@snowball-tech/fractal/dist/Tabs/Tab.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as i}from"../utils-K22C_6qC.js";import{DEFAULT_ORIENTATION as a,DEFAULT_POSITION as o,DEFAULT_SIZE as s,GROUP_NAME as c}from"./Tabs.constants.js";import{forwardRef as l}from"react";import u from"lodash/fp/isEmpty.js";import d from"lodash/fp/isString.js";import f from"lodash/fp/omit.js";import{jsx as p,jsxs as m}from"react/jsx-runtime";import*as h from"@radix-ui/react-tabs";const g=l(({children:l,disabled:g=!1,icon:_,iconOnly:v=!1,label:y,large:b=!1,name:x,orientation:S=a,size:C=s,tabsPosition:w=o,withIndicator:T=!0,...E},D)=>{let O=!!l;!O&&!y&&console.warn("You must provide a `label` or `children` to the `Tab` component");let k=d(y)?y:u(y)?i(l):i(y),A=!!_,j=g,M=b||A&&!v&&!u(y),N=`after:left-1/2 after:h-quarter after:w-0 after:-translate-x-1/2 after:transition-[width] `;N+=w===`start`?`after:-bottom-px`:`after:-top-px`;let P=`aria-selected:after:w-3/4`;return S===`vertical`&&(N=`after:top-1/2 after:w-quarter after:h-0 after:-translate-y-1/2 after:transition-[height] `,N+=w===`start`?`after:-right-px`:`after:-left-px`,P=`aria-selected:after:h-3/4`),p(h.Trigger,{ref:D,"aria-label":k,className:n(`${e}-${c}__tab`,`cursor-pointer border-0 bg-[unset] px-0 py-0 text-left`,`relative h-full flex-1 self-end text-center text-grey-30`,M?`${e}-${c}__tab--large min-h-10`:`min-h-6`,`after:absolute after:block after:bg-primary after:duration-300 after:content-empty`,T?N:``,`aria-selected:text-secondary`,T?P:``,j?`${e}-${c}__tab--disabled cursor-not-allowed text-grey-70`:`hover:text-secondary`,S===`vertical`?`w-full px-3`:`h-full`,E.className),disabled:j,title:k,value:x,...f([`className`,`value`],E),children:m(r,{className:t(`flex h-full items-center justify-center gap-1 p-1`,S===`horizontal`?`flex-col`:``),element:`div`,variant:C===`large`?`body-1-median`:C===`medium`?`body-2-median`:`caption-median`,children:[_,!v&&(O?l:y)]})})});g.displayName=`Tab`;export{g as Tab,g as default};
//# sourceMappingURL=Tab.js.map