@react-three/uikit-default
Version:
Default (shadcn) kit for @react-three/uikit
43 lines (42 loc) • 2.45 kB
JavaScript
import { Container, DefaultProperties } from '@react-three/uikit';
import React, { createContext, forwardRef, useContext, useState } from 'react';
import { borderRadius, colors } from './theme.js';
const toggleVariants = {
default: {},
outline: {
containerProps: {
borderWidth: 1,
borderColor: colors.input,
},
containerHoverProps: {
backgroundColor: colors.accent,
},
},
//TODO: hover:text-accent-foreground
};
const toggleSizes = {
default: { height: 40, paddingX: 12 },
sm: { height: 36, paddingX: 10 },
lg: { height: 44, paddingX: 20 },
};
const ToggleGroupContext = createContext({ size: 'default', variant: 'default' });
export const ToggleGroup = forwardRef(({ children, size = 'default', variant = 'default', ...props }, ref) => {
return (React.createElement(Container, { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 4, ref: ref, ...props },
React.createElement(ToggleGroupContext.Provider, { value: { variant, size } }, children)));
});
export const ToggleGroupItem = forwardRef(({ children, defaultChecked, checked: providedChecked, disabled = false, onCheckedChange, hover, ...props }, ref) => {
const { size, variant } = useContext(ToggleGroupContext);
const [uncontrolled, setUncontrolled] = useState(defaultChecked ?? false);
const checked = providedChecked ?? uncontrolled;
const { containerHoverProps, containerProps, } = toggleVariants[variant];
return (React.createElement(Container, { onClick: disabled
? undefined
: () => {
if (providedChecked == null) {
setUncontrolled(!checked);
}
onCheckedChange?.(!checked);
}, alignItems: "center", justifyContent: "center", borderRadius: borderRadius.md, cursor: disabled ? undefined : 'pointer', backgroundOpacity: disabled ? 0.5 : undefined, borderOpacity: disabled ? 0.5 : undefined, backgroundColor: checked ? colors.accent : undefined, hover: disabled ? hover : { backgroundColor: colors.muted, ...containerHoverProps, ...hover }, ref: ref, ...containerProps, ...toggleSizes[size], ...props },
React.createElement(DefaultProperties, { color: checked ? colors.accentForeground : undefined, opacity: disabled ? 0.5 : undefined, fontSize: 14, lineHeight: 20 }, children)));
//TODO: hover:text-muted-foreground
});