SnowLuma v2.4.2 source snapshot

packages/ui/src/components/tabs.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../lib/cn';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.List
+        ref={ref}
+        className={cn(
+            'inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+            className,
+        )}
+        {...props}
+    />
+));
+TabsList.displayName = 'TabsList';
+
+const TabsTrigger = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium transition-all',
+            'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40',
+            'disabled:pointer-events-none disabled:opacity-50',
+            'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+            className,
+        )}
+        {...props}
+    />
+));
+TabsTrigger.displayName = 'TabsTrigger';
+
+const TabsContent = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Content ref={ref} className={cn('mt-2 outline-none', className)} {...props} />
+));
+TabsContent.displayName = 'TabsContent';
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };