@loke/design-system/dist/components/tabs/index.mjs

A design system with individually importable components

"use client";
import{cn}from"@loke/design-system/cn";import*as TabsPrimitive from"@loke/ui/tabs";import{forwardRef}from"react";import{jsx}from"react/jsx-runtime";var createTabsScope2=TabsPrimitive.createTabsScope,Tabs2=forwardRef(({className,orientation="horizontal",...props},ref)=>jsx(TabsPrimitive.Tabs,{className:cn("flex",orientation==="horizontal"?"flex-col":"flex-row",className),"data-slot":"tabs",orientation,ref,...props}));Tabs2.displayName=TabsPrimitive.Tabs.displayName;var TabsList2=forwardRef(({className,...props},ref)=>jsx(TabsPrimitive.TabsList,{className:cn("inline-flex h-9 items-center gap-1 border-border border-b",className),"data-slot":"tabs-list",ref,...props}));TabsList2.displayName=TabsPrimitive.TabsList.displayName;var TabsTrigger2=forwardRef(({className,...props},ref)=>jsx(TabsPrimitive.TabsTrigger,{className:cn("relative inline-flex cursor-pointer items-center justify-center whitespace-nowrap px-3 py-2 text-muted-foreground text-sm transition-colors","hover:text-foreground","focus-visible:text-foreground focus-visible:outline-hidden","disabled:pointer-events-none disabled:opacity-50","data-[state=active]:text-foreground","after:absolute after:inset-x-0 after:bottom-[-1px] after:h-0.5 after:scale-x-0 after:bg-primary after:transition-transform after:duration-200","data-[state=active]:after:scale-x-100",className),"data-slot":"tabs-trigger",ref,...props}));TabsTrigger2.displayName=TabsPrimitive.TabsTrigger.displayName;var TabsContent2=forwardRef(({className,...props},ref)=>jsx(TabsPrimitive.TabsContent,{className:cn("mt-4 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",className),"data-slot":"tabs-content",ref,...props}));TabsContent2.displayName=TabsPrimitive.TabsContent.displayName;export{createTabsScope2 as createTabsScope,TabsTrigger2 as TabsTrigger,TabsList2 as TabsList,TabsContent2 as TabsContent,Tabs2 as Tabs};