@easy-shadcn/react
Version:
Use shadcn/ui easy&enhance like component library
75 lines (72 loc) • 2.62 kB
JavaScript
import * as React2 from 'react';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
import { cn } from '@easy-shadcn/utils';
import * as TogglePrimitive from '@radix-ui/react-toggle';
import { cva } from 'class-variance-authority';
import { jsx } from 'react/jsx-runtime';
var toggleVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
{
variants: {
variant: {
default: "bg-transparent",
outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
},
size: {
default: "h-9 px-3",
sm: "h-8 px-2",
lg: "h-10 px-3"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
}
);
var Toggle = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
TogglePrimitive.Root,
{
ref,
className: cn(toggleVariants({ variant, size, className })),
...props
}
));
Toggle.displayName = TogglePrimitive.Root.displayName;
var ToggleGroupContext = React2.createContext({
size: "default",
variant: "default"
});
var ToggleGroup = React2.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
ToggleGroupPrimitive.Root,
{
ref,
className: cn("flex items-center justify-center gap-1", className),
...props,
children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
}
));
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
var ToggleGroupItem = React2.forwardRef(({ className, children, variant, size, ...props }, ref) => {
const context = React2.useContext(ToggleGroupContext);
return /* @__PURE__ */ jsx(
ToggleGroupPrimitive.Item,
{
ref,
className: cn(
toggleVariants({
variant: context.variant || variant,
size: context.size || size
}),
className
),
...props,
children
}
);
});
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
var Toggle2 = ({ options, ...resetProps }) => {
return /* @__PURE__ */ jsx(ToggleGroup, { ...resetProps, children: options.map(({ value, label, ...resetOpt }) => /* @__PURE__ */ jsx(ToggleGroupItem, { value, ...resetOpt, children: label }, value)) });
};
export { Toggle2 as Toggle };