| 1 | "use client"; |
| 2 | import { cva, type VariantProps } from "class-variance-authority"; |
| 3 | import type * as React from "react"; |
| 4 | |
| 5 | import { cn } from "~/lib/utils"; |
| 6 | import { Separator } from "./separator"; |
| 7 | |
| 8 | const groupVariants = cva( |
| 9 | "flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=button]:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64 dark:*:[[data-slot=separator]:has(~[data-slot=button]:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64", |
| 10 | { |
| 11 | defaultVariants: { |
| 12 | orientation: "horizontal", |
| 13 | }, |
| 14 | variants: { |
| 15 | orientation: { |
| 16 | horizontal: |
| 17 | "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none", |
| 18 | vertical: |
| 19 | "*:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none", |
| 20 | }, |
| 21 | }, |
| 22 | }, |
| 23 | ); |
| 24 | |
| 25 | function Group({ |
| 26 | className, |
| 27 | orientation, |
| 28 | children, |
| 29 | ...props |
| 30 | }: { |
| 31 | className?: string; |
| 32 | orientation?: VariantProps<typeof groupVariants>["orientation"]; |
| 33 | children: React.ReactNode; |
| 34 | } & React.ComponentProps<"div">) { |
| 35 | return ( |
| 36 | <div |
| 37 | className={cn(groupVariants({ orientation }), className)} |
| 38 | data-orientation={orientation} |
| 39 | data-slot="group" |
| 40 | role="group" |
| 41 | {...props} |
| 42 | > |
| 43 | {children} |
| 44 | </div> |
| 45 | ); |
| 46 | } |
| 47 | |
| 48 | function GroupSeparator({ |
| 49 | className, |
| 50 | orientation = "vertical", |
| 51 | ...props |
| 52 | }: { |
| 53 | className?: string; |
| 54 | } & React.ComponentProps<typeof Separator>) { |
| 55 | return ( |
| 56 | <Separator |
| 57 | className={cn( |
| 58 | "[[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+input+&]:-translate-x-px pointer-events-none relative z-2 bg-input before:absolute before:inset-0 has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=input-group]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring dark:before:bg-input/32 [[data-slot=input-control]:focus-within+&,[data-slot=input-group]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&,[data-slot=number-field]:focus-within+input+&]:bg-ring", |
| 59 | className, |
| 60 | )} |
| 61 | orientation={orientation} |
| 62 | {...props} |
| 63 | /> |
| 64 | ); |
| 65 | } |
| 66 | |
| 67 | export { |
| 68 | Group, |
| 69 | Group as ButtonGroup, |
| 70 | GroupSeparator, |
| 71 | GroupSeparator as ButtonGroupSeparator, |
| 72 | groupVariants, |
| 73 | }; |