UNPKG

@easy-shadcn/react

Version:

Use shadcn/ui easy&enhance like component library

75 lines (72 loc) 2.62 kB
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 };