diff options
Diffstat (limited to 'packages/ui-new/src/components/ui/tabs.tsx')
| -rw-r--r-- | packages/ui-new/src/components/ui/tabs.tsx | 80 |
1 files changed, 0 insertions, 80 deletions
diff --git a/packages/ui-new/src/components/ui/tabs.tsx b/packages/ui-new/src/components/ui/tabs.tsx deleted file mode 100644 index c66893f..0000000 --- a/packages/ui-new/src/components/ui/tabs.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"; -import { cva, type VariantProps } from "class-variance-authority"; - -import { cn } from "@/lib/utils"; - -function Tabs({ - className, - orientation = "horizontal", - ...props -}: TabsPrimitive.Root.Props) { - return ( - <TabsPrimitive.Root - data-slot="tabs" - data-orientation={orientation} - className={cn( - "gap-2 group/tabs flex data-horizontal:flex-col", - className, - )} - {...props} - /> - ); -} - -const tabsListVariants = cva( - "rounded-none p-0.75 group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", - { - variants: { - variant: { - default: "bg-muted", - line: "gap-1 bg-transparent", - }, - }, - defaultVariants: { - variant: "default", - }, - }, -); - -function TabsList({ - className, - variant = "default", - ...props -}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) { - return ( - <TabsPrimitive.List - data-slot="tabs-list" - data-variant={variant} - className={cn(tabsListVariants({ variant }), className)} - {...props} - /> - ); -} - -function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) { - return ( - <TabsPrimitive.Tab - data-slot="tabs-trigger" - className={cn( - "gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", - "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", - "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground", - "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:-bottom-1.25 group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100", - className, - )} - {...props} - /> - ); -} - -function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) { - return ( - <TabsPrimitive.Panel - data-slot="tabs-content" - className={cn("text-xs/relaxed flex-1 outline-none", className)} - {...props} - /> - ); -} - -export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }; |