UNPKG

@vela-ui/react

Version:

Vela UI React components

3 lines (2 loc) 2.89 kB
"use client" import{a as p}from"./chunk-K35CPLQX.mjs";import{Tab as u,TabList as c,TabPanel as f,Tabs as T,composeRenderProps as l}from"react-aria-components";import{tv as m}from"tailwind-variants";import{jsx as d}from"react/jsx-runtime";var P=m({slots:{root:"group/tabs",list:"relative isolate inline-flex",tab:"text-foreground/75 group relative inline-flex cursor-pointer items-center justify-center gap-2 px-3 py-1 whitespace-nowrap [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",panel:""},variants:{variant:{default:{list:"bg-muted text-muted-foreground rounded-lg p-1",tab:"dark:text-muted-foreground data-[selected=true]:bg-background data-[selected=true]:dark:text-foreground data-[selected=true]:dark:border-input data-[selected=true]:dark:bg-input/30 rounded-md border border-transparent whitespace-nowrap transition-[color,box-shadow] data-[selected=true]:shadow-sm"},underline:{list:"border-input flex",tab:"data-[selected=true]:border-foreground data-[selected=true]:text-foreground border-transparent"},pills:{tab:"data-[selected=true]:bg-muted data-[selected=true]:text-foreground rounded-md"}},size:{sm:{tab:"h-9 text-sm"},md:{tab:"h-10 text-sm"},lg:{tab:"h-11 text-base"}},orientation:{horizontal:{root:"block",list:"flex-row overflow-x-auto overflow-y-hidden",panel:"w-full pt-4"},vertical:{root:"flex",list:"flex-col overflow-x-hidden overflow-y-auto",panel:"ps-4"}},fitted:{true:{list:"flex",tab:"flex-1 justify-center text-center"}},isDisabled:{true:{tab:"cursor-not-allowed opacity-50"}},isFocusVisible:{true:{tab:"border-ring ring-ring/50 outline-ring ring-[3px] outline-1",panel:"border-ring ring-ring/50 outline-ring ring-[3px] outline-1"}}},compoundVariants:[{orientation:"horizontal",variant:"underline",className:{list:"border-b",tab:"border-b-2"}},{orientation:"vertical",variant:"underline",className:{list:"border-r",tab:"border-r-2"}}],defaultVariants:{variant:"default",size:"md"}}),{root:g,list:x,tab:v,panel:y}=P(),[w,b]=p({name:"TabsContext"});function z({className:t,variant:e="default",size:a="md",fitted:r=!1,children:o,...s}){return d(T,{"data-slot":"tabs",className:l(t,(n,{orientation:i})=>g({orientation:i,className:n})),...s,children:l(o,(n,{orientation:i})=>d(w,{value:{orientation:i,variant:e,size:a,fitted:r},children:n}))})}function k({className:t,...e}){let{orientation:a,variant:r,fitted:o}=b();return d(c,{"data-slot":"tab-list",className:l(t,s=>x({orientation:a,variant:r,fitted:o,className:s})),...e})}function C({className:t,...e}){let{orientation:a,variant:r,size:o,fitted:s}=b();return d(u,{"data-slot":"tab",className:l(t,(n,i)=>v({...i,orientation:a,variant:r,size:o,fitted:s,className:n})),...e})}function N({className:t,...e}){let{orientation:a,variant:r,size:o}=b();return d(f,{"data-slot":"tab-panel",className:l(t,(s,n)=>y({...n,orientation:a,variant:r,size:o,className:s})),...e})}export{z as a,k as b,C as c,N as d};