koval-ui/dist/src/lib/Tabs/Tabs.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),y=require("classnames"),C=require("css-vars-hook"),M=require("../../internal/hooks/useLinkRefs.cjs"),h=require("../../internal/hooks/useIsOverflow.cjs"),w=require("../../internal/Icons/IconScroll.cjs"),I=require("./TabButton.cjs"),a=require("./Tabs.module.css.cjs"),d=s.forwardRef(({children:o,className:b,selected:t,width:n,height:c,onToggle:f=()=>{},...v},j)=>{const{LocalRoot:q,ref:R}=C.useLocalTheme();M.useLinkRefs(j,R);const p=s.useMemo(()=>{let e={};return c&&(e={...e,height:c}),n&&(e={...e,width:n}),e},[c,n]),u=s.useMemo(()=>t||s.Children.toArray(o)[0].props.name,[o,t]),[l,i]=s.useState(u);s.useEffect(()=>{i(t||u)},[t,u]);const x=s.useCallback(e=>{i(e),f(e)},[f]),T=s.useMemo(()=>s.Children.map(o,e=>({tabName:e.props.name,icon:e.props.icon})),[o]),N=s.useMemo(()=>s.Children.toArray(o).find(e=>e.props.name===l),[o,l]),m=s.useRef(null),{overflowX:S}=h.useIsOverflow(m);return r.jsxs(q,{...v,theme:p,className:y(a.default.tabs,b),children:[r.jsxs("div",{className:a.default.viewport,children:[r.jsx("header",{ref:m,className:a.default.header,children:T.map(({tabName:e,icon:k})=>r.jsx(I.TabButton,{icon:k,onClick:x,tabName:e,activeName:l},e))}),S&&r.jsx("div",{className:a.default["overflow-indicator"],children:r.jsx(w.IconScroll,{})})]}),r.jsx("div",{className:a.default.content,children:N})]})});d.displayName="Tabs";exports.Tabs=d;
//# sourceMappingURL=Tabs.cjs.map