@tallyui/components 1.0.0 → 2.0.0

package/src/ui/index.ts

@@ -0,0 +1,99 @@
+// Core
+export { Text, TextClassContext, textVariants, type TextProps } from './text';
+export { HStack, hstackVariants, type HStackProps } from './hstack';
+export { VStack, vstackVariants, type VStackProps } from './vstack';
+
+// Visual
+export { Icon, iconVariants, type IconProps } from './icon';
+export { createSvgIcon, type SvgIconProps } from './icon/svg-icon';
+export { SearchIcon } from './icon/search-icon';
+export { Loader, loaderVariants, type LoaderProps } from './loader';
+export { Badge, badgeVariants, badgeTextVariants, type BadgeProps } from './badge';
+export { Avatar, avatarVariants, type AvatarProps } from './avatar';
+
+// Interactive
+export { Button, buttonVariants, buttonTextVariants, type ButtonProps } from './button';
+export { IconButton, iconButtonVariants, type IconButtonProps } from './icon-button';
+
+// Containers & Form
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './card';
+export { Separator, type SeparatorProps } from './separator';
+export { Label, type LabelProps } from './label';
+export { Input, InputRoot, InputField, InputSlot, useInputContext, type InputRootProps } from './input';
+export { Textarea, type TextareaProps } from './textarea';
+
+// Tabs
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+
+// Dialog
+export {
+  Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent,
+  DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose,
+} from './dialog';
+
+// Alert Dialog
+export {
+  AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay,
+  AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle,
+  AlertDialogDescription, AlertDialogAction, AlertDialogCancel,
+} from './alert-dialog';
+
+// Select
+export {
+  Select, SelectGroup, SelectValue, SelectTrigger, SelectContent,
+  SelectLabel, SelectItem, SelectSeparator,
+} from './select';
+
+// Combobox
+export {
+  Combobox, ComboboxTrigger, ComboboxInput, ComboboxContent,
+  ComboboxItem, ComboboxEmpty,
+} from './combobox';
+
+// Dropdown Menu
+export {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
+  DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel,
+  DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuPortal,
+  DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './dropdown-menu';
+
+// Context Menu
+export {
+  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
+  ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel,
+  ContextMenuSeparator, ContextMenuGroup, ContextMenuPortal,
+  ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+} from './context-menu';
+
+// Popover
+export { Popover, PopoverTrigger, PopoverContent } from './popover';
+
+// Tooltip
+export { Tooltip, TooltipTrigger, TooltipContent } from './tooltip';
+
+// Hover Card
+export { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card';
+
+// Accordion
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion';
+
+// Collapsible
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';
+
+// Form Controls
+export { Checkbox } from './checkbox';
+export { Switch } from './switch';
+export { RadioGroup, RadioGroupItem } from './radio-group';
+export { Toggle, toggleVariants, toggleTextVariants, type ToggleProps } from './toggle';
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps } from './toggle-group';
+export { Progress, type ProgressProps } from './progress';
+export { Slider, type SliderProps } from './slider';
+
+// Toast
+export { Toast, ToastTitle, ToastDescription, ToastClose, toastVariants, type ToastProps } from './toast';
+
+// Table
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from './table';

package/src/ui/input/index.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { TextInput, View, type TextInputProps, type ViewProps } from 'react-native';
+import { cn } from '@tallyui/theme';
+
+interface InputContextType {
+  focused: boolean;
+  disabled: boolean;
+}
+
+const InputContext = React.createContext<InputContextType>({
+  focused: false,
+  disabled: false,
+});
+
+function useInputContext() {
+  return React.useContext(InputContext);
+}
+
+// Root container
+interface InputRootProps extends ViewProps {
+  disabled?: boolean;
+}
+
+const InputRoot = React.forwardRef<View, InputRootProps>(
+  function InputRoot({ className, disabled = false, children, ...props }, ref) {
+    const [focused, setFocused] = React.useState(false);
+
+    return (
+      <InputContext.Provider value={{ focused, disabled }}>
+        <View
+          ref={ref}
+          className={cn(
+            'flex h-10 flex-row items-center rounded-md border border-input bg-background px-3',
+            focused && 'ring-2 ring-ring ring-offset-2',
+            disabled && 'opacity-50',
+            className,
+          )}
+          {...props}
+        >
+          {React.Children.map(children, (child) => {
+            if (React.isValidElement(child) && child.type === InputField) {
+              return React.cloneElement(child as React.ReactElement<any>, {
+                onFocus: (e: any) => {
+                  setFocused(true);
+                  (child.props as any).onFocus?.(e);
+                },
+                onBlur: (e: any) => {
+                  setFocused(false);
+                  (child.props as any).onBlur?.(e);
+                },
+              });
+            }
+            return child;
+          })}
+        </View>
+      </InputContext.Provider>
+    );
+  }
+);
+InputRoot.displayName = 'InputRoot';
+
+// Left/Right slots
+const InputSlot = React.forwardRef<View, ViewProps>(
+  function InputSlot({ className, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('justify-center', className)} {...props} />
+    );
+  }
+);
+InputSlot.displayName = 'InputSlot';
+
+// The actual text input
+const InputField = React.forwardRef<TextInput, TextInputProps>(
+  function InputField({ className, ...props }, ref) {
+    const { disabled } = useInputContext();
+
+    return (
+      <TextInput
+        ref={ref}
+        editable={!disabled}
+        className={cn(
+          'flex-1 text-sm text-foreground web:outline-none placeholder:text-muted-foreground',
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+InputField.displayName = 'InputField';
+
+// Convenience compound component
+const Input = Object.assign(InputRoot, {
+  Left: InputSlot,
+  Field: InputField,
+  Right: InputSlot,
+});
+
+export { Input, InputRoot, InputField, InputSlot, useInputContext };
+export type { InputRootProps };

package/src/ui/label/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { Label as LabelPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
+
+const Label = React.forwardRef<React.ComponentRef<typeof Text>, LabelProps>(
+  function Label({ className, ...props }, ref) {
+    return (
+      <LabelPrimitive.Root
+        ref={ref}
+        className={cn(
+          'text-sm font-medium leading-none text-foreground web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70',
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Label.displayName = 'Label';
+
+export { Label };
+export type { LabelProps };

package/src/ui/loader/index.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const loaderVariants = cva('animate-spin', {
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-8 w-8',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+type LoaderProps = Omit<ViewProps, 'children'> & VariantProps<typeof loaderVariants>;
+
+function Loader({ className, size, ...props }: LoaderProps) {
+  const textClass = React.useContext(TextClassContext);
+
+  return (
+    <View
+      className={cn(loaderVariants({ size }), textClass, className)}
+      role="progressbar"
+      {...props}
+    >
+      <View className="h-full w-full rounded-full border-2 border-current border-t-transparent" />
+    </View>
+  );
+}
+
+export { Loader, loaderVariants };
+export type { LoaderProps };

package/src/ui/popover/index.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Popover as PopoverPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }, ref) {
+  return (
+    <PopoverPrimitive.Portal>
+      <TextClassContext.Provider value="text-popover-foreground">
+        <PopoverPrimitive.Content
+          ref={ref}
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            'z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+            className,
+          )}
+          {...props}
+        />
+      </TextClassContext.Provider>
+    </PopoverPrimitive.Portal>
+  );
+});
+PopoverContent.displayName = 'PopoverContent';
+
+export { Popover, PopoverTrigger, PopoverContent };

package/src/ui/progress/index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Progress as ProgressPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+type ProgressProps = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>;
+
+const Progress = React.forwardRef<
+  React.ComponentRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(function Progress({ className, value, ...props }, ref) {
+  return (
+    <ProgressPrimitive.Root
+      ref={ref}
+      className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        className="h-full w-full flex-1 rounded-full bg-primary web:transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+});
+Progress.displayName = 'Progress';
+
+export { Progress };
+export type { ProgressProps };

package/src/ui/radio-group/index.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { RadioGroup as RadioGroupPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const RadioGroup = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(function RadioGroup({ className, ...props }, ref) {
+  return (
+    <RadioGroupPrimitive.Root ref={ref} className={cn('grid gap-2', className)} {...props} />
+  );
+});
+RadioGroup.displayName = 'RadioGroup';
+
+const RadioGroupItem = React.forwardRef<
+  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(function RadioGroupItem({ className, ...props }, ref) {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <View className="h-2.5 w-2.5 rounded-full bg-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = 'RadioGroupItem';
+
+export { RadioGroup, RadioGroupItem };

package/src/ui/select/index.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Select as SelectPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(function SelectTrigger({ className, children, ...props }, ref) {
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex h-10 w-full flex-row items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground web:ring-offset-background web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </SelectPrimitive.Trigger>
+  );
+});
+SelectTrigger.displayName = 'SelectTrigger';
+
+const SelectContent = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(function SelectContent({ className, children, ...props }, ref) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        className={cn(
+          'relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
+SelectContent.displayName = 'SelectContent';
+
+const SelectLabel = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(function SelectLabel({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Label ref={ref} className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)} {...props} />
+  );
+});
+SelectLabel.displayName = 'SelectLabel';
+
+const SelectItem = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(function SelectItem({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Item
+      ref={ref}
+      className={cn(
+        'relative flex w-full cursor-default select-none flex-row items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none web:focus:bg-accent web:focus:text-accent-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SelectItem.displayName = 'SelectItem';
+
+const SelectSeparator = React.forwardRef<
+  React.ComponentRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(function SelectSeparator({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+  );
+});
+SelectSeparator.displayName = 'SelectSeparator';
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+};

package/src/ui/separator/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Separator as SeparatorPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;
+
+const Separator = React.forwardRef<React.ComponentRef<typeof View>, SeparatorProps>(
+  function Separator({ className, orientation = 'horizontal', decorative = true, ...props }, ref) {
+    return (
+      <SeparatorPrimitive.Root
+        ref={ref}
+        decorative={decorative}
+        orientation={orientation}
+        className={cn(
+          'shrink-0 bg-border',
+          orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+          className,
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Separator.displayName = 'Separator';
+
+export { Separator };
+export type { SeparatorProps };

package/src/ui/slider/index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { Slider as SliderPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>;
+
+const Slider = React.forwardRef<
+  React.ComponentRef<typeof SliderPrimitive.Root>,
+  SliderProps
+>(function Slider({ className, ...props }, ref) {
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn('relative flex w-full touch-none select-none items-center', className)}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2" />
+    </SliderPrimitive.Root>
+  );
+});
+Slider.displayName = 'Slider';
+
+export { Slider };
+export type { SliderProps };

package/src/ui/switch/index.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { Switch as SwitchPrimitive } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Switch = React.forwardRef<
+  React.ComponentRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(function Switch({ className, ...props }, ref) {
+  return (
+    <SwitchPrimitive.Root
+      ref={ref}
+      className={cn(
+        'web:peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 web:focus-visible:ring-offset-background',
+        props.checked ? 'bg-primary' : 'bg-input',
+        props.disabled && 'web:cursor-not-allowed opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 web:transition-transform',
+          props.checked ? 'translate-x-5' : 'translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+});
+Switch.displayName = 'Switch';
+
+export { Switch };

package/src/ui/table/index.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { View, Text, Pressable, type ViewProps, type TextProps } from 'react-native';
+import { TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Table = React.forwardRef<View, ViewProps>(function Table({ className, ...props }, ref) {
+  return <View ref={ref} role="table" className={cn('w-full', className)} {...props} />;
+});
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<View, ViewProps>(function TableHeader({ className, ...props }, ref) {
+  return <View ref={ref} role="rowgroup" className={cn('border-b border-border', className)} {...props} />;
+});
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<View, ViewProps>(function TableBody({ className, ...props }, ref) {
+  return <View ref={ref} role="rowgroup" className={cn('[&>*:last-child]:border-0', className)} {...props} />;
+});
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<View, ViewProps>(function TableFooter({ className, ...props }, ref) {
+  return <View ref={ref} role="rowgroup" className={cn('border-t border-border bg-muted/50 font-medium', className)} {...props} />;
+});
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<View, ViewProps>(function TableRow({ className, ...props }, ref) {
+  return (
+    <View
+      ref={ref}
+      role="row"
+      className={cn('flex flex-row border-b border-border web:transition-colors web:hover:bg-muted/50', className)}
+      {...props}
+    />
+  );
+});
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<View, ViewProps>(function TableHead({ className, ...props }, ref) {
+  return (
+    <TextClassContext.Provider value="text-muted-foreground text-xs uppercase text-left font-medium">
+      <View
+        ref={ref}
+        role="columnheader"
+        className={cn('flex-1 px-4 py-3 text-left font-medium text-muted-foreground', className)}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<View, ViewProps>(function TableCell({ className, ...props }, ref) {
+  return (
+    <View ref={ref} role="cell" className={cn('flex-1 px-4 py-4', className)} {...props} />
+  );
+});
+TableCell.displayName = 'TableCell';
+
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell };

package/src/ui/tabs/index.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Tabs as TabsPrimitive, TextClassContext } from '@tallyui/primitives';
+import { cn } from '@tallyui/theme';
+
+const Tabs = TabsPrimitive.Root;
+
+function TabsList({ className, ...props }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      className={cn('inline-flex h-10 items-center justify-center rounded-md bg-muted p-1', className)}
+      {...props}
+    />
+  );
+}
+
+const TabsTrigger = React.forwardRef<
+  React.ComponentRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(function TabsTrigger({ className, ...props }, ref) {
+  const { value } = TabsPrimitive.useRootContext();
+  const isActive = props.value === value;
+
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-sm font-medium',
+        isActive ? 'text-foreground' : 'text-muted-foreground'
+      )}
+    >
+      <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium web:ring-offset-background web:transition-all web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          isActive && 'bg-background shadow-sm',
+          className,
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+});
+TabsTrigger.displayName = 'TabsTrigger';
+
+function TabsContent({ className, ...props }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      className={cn('mt-2 web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };