init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@humansignal/shad/utils";
import { cva } from "class-variance-authority";
 
type TabsContextType = {
  variant: "default" | "flat";
};
 
const TabsContext = React.createContext<TabsContextType>({
  variant: "default",
});
 
const Tabs = ({
  variant = "default",
  ...props
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
  variant?: "default" | "flat";
}) => {
  return (
    <TabsContext.Provider value={{ variant }}>
      <TabsPrimitive.Root {...props} />
    </TabsContext.Provider>
  );
};
const tabsListVariants = cva("inline-flex items-center", {
  variants: {
    variant: {
      default: "justify-center h-10 bg-neutral-surface p-1 gap-1 border border-neutral-border rounded-smaller",
      flat: "w-full h-auto border-b border-neutral-border",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});
const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => {
  const { variant } = React.useContext(TabsContext);
  return <TabsPrimitive.List ref={ref} className={cn(tabsListVariants({ variant }), className)} {...props} />;
});
TabsList.displayName = TabsPrimitive.List.displayName;
 
const tabsTriggerVariants = cva(
  "inline-flex justify-center items-center text-body-regular font-medium transition-colors disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "h-8 px-tight rounded-smaller data-[state=active]:bg-primary-background data-[state=active]:text-primary-content data-[state=active]:shadow-sm data-[state=inactive]:text-neutral-content-subtle data-[state=inactive]:hover:text-neutral-content",
        flat: "py-tight px-base -mb-px border-b-2 border-transparent data-[state=active]:border-primary-border data-[state=active]:text-primary-content data-[state=inactive]:text-neutral-content-subtle data-[state=inactive]:hover:text-neutral-content",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);
 
const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => {
  const { variant } = React.useContext(TabsContext);
  return <TabsPrimitive.Trigger ref={ref} className={cn(tabsTriggerVariants({ variant }), className)} {...props} />;
});
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
const tabsContentVariants = cva("", {
  variants: {
    variant: {
      default: "mt-2",
      flat: "mt-wide",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});
 
const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => {
  const { variant } = React.useContext(TabsContext);
  return <TabsPrimitive.Content ref={ref} className={cn(tabsContentVariants({ variant }), className)} {...props} />;
});
TabsContent.displayName = TabsPrimitive.Content.displayName;
 
export { Tabs, TabsList, TabsTrigger, TabsContent };