UNPKG

@vela-ui/react

Version:

Vela UI React components

3 lines (2 loc) 4.03 kB
"use client" "use strict";"use client";var m=Object.create;var p=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var r in e)p(t,r,{get:e[r],enumerable:!0})},f=(t,e,r,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of P(e))!C.call(t,a)&&a!==r&&p(t,a,{get:()=>e[a],enumerable:!(n=g(e,a))||n.enumerable});return t};var w=(t,e,r)=>(r=t!=null?m(v(t)):{},f(e||!t||!t.__esModule?p(r,"default",{value:t,enumerable:!0}):r,t)),h=t=>f(p({},"__esModule",{value:!0}),t);var O={};y(O,{Tab:()=>j,TabList:()=>E,TabPanel:()=>M,Tabs:()=>N});module.exports=h(O);var o=require("react-aria-components"),T=require("tailwind-variants");var b=w(require("react"));function x(t={}){let{strict:e=!0,errorMessage:r="useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",name:n}=t,a=b.createContext(void 0);a.displayName=n;function s(){var l;let i=b.useContext(a);if(!i&&e){let u=new Error(r);throw u.name="ContextError",(l=Error.captureStackTrace)==null||l.call(Error,u,s),u}return i}return[a.Provider,s,a]}var d=require("react/jsx-runtime"),R=(0,T.tv)({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:A,list:L,tab:V,panel:k}=R(),[z,c]=x({name:"TabsContext"});function N({className:t,variant:e="default",size:r="md",fitted:n=!1,children:a,...s}){return(0,d.jsx)(o.Tabs,{"data-slot":"tabs",className:(0,o.composeRenderProps)(t,(i,{orientation:l})=>A({orientation:l,className:i})),...s,children:(0,o.composeRenderProps)(a,(i,{orientation:l})=>(0,d.jsx)(z,{value:{orientation:l,variant:e,size:r,fitted:n},children:i}))})}function E({className:t,...e}){let{orientation:r,variant:n,fitted:a}=c();return(0,d.jsx)(o.TabList,{"data-slot":"tab-list",className:(0,o.composeRenderProps)(t,s=>L({orientation:r,variant:n,fitted:a,className:s})),...e})}function j({className:t,...e}){let{orientation:r,variant:n,size:a,fitted:s}=c();return(0,d.jsx)(o.Tab,{"data-slot":"tab",className:(0,o.composeRenderProps)(t,(i,l)=>V({...l,orientation:r,variant:n,size:a,fitted:s,className:i})),...e})}function M({className:t,...e}){let{orientation:r,variant:n,size:a}=c();return(0,d.jsx)(o.TabPanel,{"data-slot":"tab-panel",className:(0,o.composeRenderProps)(t,(s,i)=>k({...i,orientation:r,variant:n,size:a,className:s})),...e})}0&&(module.exports={Tab,TabList,TabPanel,Tabs});