| 1 | "use client"; |
| 2 | |
| 3 | import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"; |
| 4 | import { cva, type VariantProps } from "class-variance-authority"; |
| 5 | |
| 6 | import { cn } from "~/lib/utils"; |
| 7 | |
| 8 | const toggleVariants = cva( |
| 9 | "[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 aria-disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", |
| 10 | { |
| 11 | defaultVariants: { |
| 12 | size: "default", |
| 13 | variant: "default", |
| 14 | }, |
| 15 | variants: { |
| 16 | size: { |
| 17 | compact: |
| 18 | "h-7 min-w-7 rounded-md px-[calc(--spacing(1)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] [&_svg:not([class*='size-'])]:size-3.5", |
| 19 | default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8", |
| 20 | lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9", |
| 21 | segmented: |
| 22 | "h-6 min-w-0 rounded-md px-2.5 text-xs before:rounded-[calc(var(--radius-md)-1px)]", |
| 23 | sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7", |
| 24 | xs: "h-7 min-w-7 px-[calc(--spacing(1)-1px)] sm:h-6 sm:min-w-6 rounded-md", |
| 25 | }, |
| 26 | variant: { |
| 27 | default: "border-transparent", |
| 28 | pill: "border-transparent rounded-full px-3 font-normal text-muted-foreground data-pressed:text-foreground", |
| 29 | ghost: |
| 30 | "border-transparent text-foreground shadow-none [:disabled,:active,[data-pressed]]:shadow-none before:shadow-none data-pressed:bg-accent data-pressed:text-accent-foreground disabled:opacity-100 disabled:text-muted-foreground disabled:[&_svg]:opacity-100", |
| 31 | outline: |
| 32 | "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none", |
| 33 | segmented: |
| 34 | "border-transparent text-muted-foreground shadow-none transition-colors before:shadow-none hover:bg-background/55 hover:text-foreground data-pressed:bg-background data-pressed:text-foreground data-pressed:shadow-xs/10 dark:hover:bg-input/32 dark:data-pressed:bg-input/72", |
| 35 | }, |
| 36 | }, |
| 37 | }, |
| 38 | ); |
| 39 | |
| 40 | function Toggle({ |
| 41 | className, |
| 42 | variant, |
| 43 | size, |
| 44 | ...props |
| 45 | }: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) { |
| 46 | return ( |
| 47 | <TogglePrimitive |
| 48 | className={cn(toggleVariants({ className, size, variant }))} |
| 49 | data-slot="toggle" |
| 50 | {...props} |
| 51 | /> |
| 52 | ); |
| 53 | } |
| 54 | |
| 55 | // The *Variants function is for components/ui modules only. |
| 56 | export { Toggle, toggleVariants }; |