@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.10

package/tab/tab-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","sources":["../../src/tab/tab-item.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { TabContext } from \"./tab-context\";\nimport type { TabItemProps } from \"./types\";\n\nexport interface TabItemComponentProps extends TabItemProps {\n    index?: number | undefined; // injected\n}\n\nexport const TabItem = ({\n    index,\n    children,\n    titleAddon: _titleAddon, // destructure so it doesn't get passed into the dom\n    ...otherProps\n}: TabItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { currentActiveIndex } = useContext(TabContext);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return currentActiveIndex === index ? (\n        <div role=\"tabpanel\" tabIndex={0} {...otherProps}>\n            {children}\n        </div>\n    ) : null;\n};\n\nTabItem.displayName = \"Tab.Item\";\n"],"names":["TabItem","_a","index","children","titleAddon","_titleAddon","otherProps","__rest","currentActiveIndex","useContext","TabContext","_jsx","Object","assign","role","tabIndex","displayName"],"mappings":"wKASO,MAAMA,EAAWC,QAAAC,MACpBA,EAAKC,SACLA,EACAC,WAAYC,GAAWJ,EACpBK,EAAUC,EAAAN,EAJO,mCASpB,MAAMO,mBAAEA,GAAuBC,EAAWC,GAK1C,OAAOF,IAAuBN,EAC1BS,EAAA,MAAAC,OAAAC,OAAA,CAAKC,KAAK,WAAWC,SAAU,GAAOT,EAAU,CAAAH,SAC3CA,KAEL,IAAI,EAGZH,EAAQgB,YAAc"}
+{"version":3,"file":"tab-item.js","sources":["../../src/tab/tab-item.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { TabContext } from \"./tab-context\";\nimport type { TabItemProps } from \"./types\";\n\nexport interface TabItemComponentProps extends TabItemProps {\n    index?: number | undefined; // injected\n}\n\nexport const TabItem = ({\n    index,\n    children,\n    titleAddon: _titleAddon, // destructure so it doesn't get passed into the dom\n    ...otherProps\n}: TabItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { currentActiveIndex, instanceId } = useContext(TabContext);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return currentActiveIndex === index ? (\n        <div\n            role=\"tabpanel\"\n            aria-labelledby={`${instanceId}-tab-${index}`}\n            tabIndex={0}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    ) : null;\n};\n\nTabItem.displayName = \"Tab.Item\";\n"],"names":["TabItem","_a","index","children","titleAddon","_titleAddon","otherProps","__rest","currentActiveIndex","instanceId","useContext","TabContext","_jsx","Object","assign","role","tabIndex","displayName"],"mappings":"wKASO,MAAMA,EAAWC,QAAAC,MACpBA,EAAKC,SACLA,EACAC,WAAYC,GAAWJ,EACpBK,EAAUC,EAAAN,EAJO,mCASpB,MAAMO,mBAAEA,EAAkBC,WAAEA,GAAeC,EAAWC,GAKtD,OAAOH,IAAuBN,EAC1BU,EAAA,MAAAC,OAAAC,OAAA,CACIC,KAAK,WAAU,kBACE,GAAGN,SAAkBP,IACtCc,SAAU,GACNV,EAAU,CAAAH,SAEbA,KAEL,IAAI,EAGZH,EAAQiB,YAAc"}

package/tab/tab-link-chain.d.ts

@@ -1,6 +1,6 @@
 import type { TabProps } from "./types";
 interface Props extends Pick<TabProps, "fullWidthIndicatorLine" | "onTabClick" | "data-testid" | "fadeColor"> {
-    controlledMode?: boolean | undefined;
+    controlledMode?: boolean;
 }
 export declare const TabLinkChain: ({ controlledMode, "data-testid": testId, onTabClick, fullWidthIndicatorLine, fadeColor, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/tab/tab-link-chain.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,useRef as n}from"react";import{r as i}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as o}from"styled-components";import{Typography as l}from"../typography/index.js";import{V3_Breakpoint as d}from"../v3_theme/index.js";import{TabContext as a}from"./tab-context.js";import{CustomFadeWrapper as c,Chain as s,ChainItem as h,ChainLink as m,LabelContainer as u,Label as p,BoldLabel as f}from"./tab-link-chain.style.js";const v=({controlledMode:v,"data-testid":g,onTabClick:x,fullWidthIndicatorLine:y,fadeColor:b})=>{const{setCurrentActiveIndex:w,currentActiveIndex:$,tabLinks:k}=r(a),C=r(o),L=d["md-max"]({theme:C}),j=i.useMediaQuery({maxWidth:L}),A=d["lg-max"]({theme:C}),B=n(null),I=n([]),D=e=>t=>{t.preventDefault(),t.stopPropagation(),v||w(e),x&&x(k[e].title,e)},W=e=>j&&e.length>20?`${e.substring(0,20)}...`:e;return e(c,{onResize:({content:e,wrapper:t})=>{e&&t&&window.innerWidth<=A&&B.current&&(e.scrollLeft=B.current.getBoundingClientRect().left)},"data-testid":g,fadeColor:b,children:e(s,{role:"tablist",$fullWidthIndicatorLine:y,children:k.map((({title:r,width:n,titleAddon:i},o)=>{const d=$===o;return e(h,{role:"none",$active:d,ref:d?B:null,$width:n,children:t(m,{role:"none",onClick:D(o),"data-testid":`${g}-link-${o}`,$reversed:"left"===(null==i?void 0:i.position),children:[t(u,{role:"none",children:[e(p,{$active:d,onClick:D(o),"aria-hidden":"true",children:e(l.BodyBL,{weight:"regular",children:W(r)})}),e(f,{role:"tab",type:"button","aria-selected":d,tabIndex:d?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%k.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+k.length)%k.length,e.preventDefault()),null===(r=I.current[n])||void 0===r||r.focus()})(e,o),ref:e=>I.current[o]=e,$active:d,children:e(l.BodyBL,{weight:"semibold",children:W(r)})})]}),null==i?void 0:i.content]})},o)}))})})};export{v as TabLinkChain};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r from"clsx";import{useContext as n,useRef as o,useEffect as i}from"react";import{FadeWrapper as l}from"../shared/fade-wrapper/fade-wrapper.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as a}from"../theme/utils/use-media-query.js";import{TabContext as s}from"./tab-context.js";import{tokens as d,customFadeWrapper as c,labelContainer as m,label as u,deselectedLabel as p,deselectedLabelActive as h,selectedLabel as f,selectedLabelActive as v,flexRow as j,chainLink as y,chainLinkReversed as g,chainItem as k,chainItemActive as b,chain as x,chainFullWidthIndicator as w}from"./tab-link-chain.styles.js";const C=({controlledMode:C,"data-testid":I,onTabClick:N,fullWidthIndicatorLine:$,fadeColor:A})=>{const{setCurrentActiveIndex:D,currentActiveIndex:L,tabLinks:R,instanceId:P}=n(s),q=a("lg"),B=o(null),z=o(null),E=o([]),K=o([]);i((()=>{K.current.forEach(((e,t)=>{var r;if(!e)return;const n=null===(r=R[t])||void 0===r?void 0:r.width;n?e.style.setProperty(d.chainItem.width,n):e.style.removeProperty(d.chainItem.width)}))}),[R]);const M=e=>t=>{t.preventDefault(),t.stopPropagation(),C||D(e),N&&N(R[e].title,e)};return e(l,{onResize:({content:e})=>{e&&q&&B.current&&z.current&&(e.scrollLeft=B.current.getBoundingClientRect().left-z.current.getBoundingClientRect().left)},"data-testid":I,fadeColor:A,className:c,children:e("ul",{role:"tablist",ref:z,className:r(x,$&&w),children:R.map((({title:n,width:o,titleAddon:i},l)=>{var a;const s=L===l;return e("li",{role:"none",className:r(k,s&&b),ref:e=>{K.current[l]=e,s&&(B.current=e)},children:t("div",{role:"none",onClick:M(l),"data-testid":`${I}-link-${l}`,className:r(j,y,"left"===(null==i?void 0:i.position)&&g),children:[t("div",{className:m,role:"none",children:[e("div",{className:r(u,p,s&&h),onClick:M(l),"aria-hidden":"true",children:n}),e("button",{role:"tab",id:`${P}-tab-${l}`,type:"button","aria-selected":s,tabIndex:s?0:-1,onKeyDown:e=>((e,t)=>{var r;let n=t;"ArrowRight"===e.key?(n=(t+1)%R.length,e.preventDefault()):"ArrowLeft"===e.key&&(n=(t-1+R.length)%R.length,e.preventDefault()),null===(r=E.current[n])||void 0===r||r.focus()})(e,l),ref:e=>E.current[l]=e,className:r(u,f,s&&v),children:n})]}),null==i?void 0:i.content]})},`${n}-${null!=o?o:""}-${null!==(a=null==i?void 0:i.position)&&void 0!==a?a:"none"}`)}))})})};export{C as TabLinkChain};
 //# sourceMappingURL=tab-link-chain.js.map

package/tab/tab-link-chain.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import { useContext, useRef } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport type { ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport { TabContext } from \"./tab-context\";\nimport {\n    BoldLabel,\n    Chain,\n    ChainItem,\n    ChainLink,\n    CustomFadeWrapper,\n    Label,\n    LabelContainer,\n} from \"./tab-link-chain.style\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean | undefined;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks } =\n        useContext(TabContext);\n\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"md-max\"]({ theme });\n\n    const isMobile = useMediaQuery({\n        maxWidth: mobileBreakpoint,\n    });\n\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n\n    const activeLinkRef = useRef<HTMLLIElement>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content, wrapper }: ResizeCallbackParams) => {\n        if (\n            content &&\n            wrapper &&\n            window.innerWidth <= tabletBreakpoint &&\n            activeLinkRef.current\n        ) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const truncateText = (value: string) => {\n        if (isMobile) {\n            return value.length > 20 ? `${value.substring(0, 20)}...` : value;\n        }\n\n        return value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <CustomFadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n        >\n            <Chain\n                role=\"tablist\"\n                $fullWidthIndicatorLine={fullWidthIndicatorLine}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n\n                    return (\n                        <ChainItem\n                            key={index}\n                            role=\"none\"\n                            $active={isActive}\n                            ref={isActive ? activeLinkRef : null}\n                            $width={width}\n                        >\n                            <ChainLink\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                $reversed={titleAddon?.position === \"left\"}\n                            >\n                                <LabelContainer role=\"none\">\n                                    <Label\n                                        $active={isActive}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        <Typography.BodyBL weight=\"regular\">\n                                            {truncateText(title)}\n                                        </Typography.BodyBL>\n                                    </Label>\n                                    <BoldLabel\n                                        role=\"tab\"\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        $active={isActive}\n                                    >\n                                        <Typography.BodyBL weight=\"semibold\">\n                                            {truncateText(title)}\n                                        </Typography.BodyBL>\n                                    </BoldLabel>\n                                </LabelContainer>\n                                {titleAddon?.content}\n                            </ChainLink>\n                        </ChainItem>\n                    );\n                })}\n            </Chain>\n        </CustomFadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","useContext","TabContext","theme","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","tabletBreakpoint","activeLinkRef","useRef","chainLinkRefs","handleChainLinkClick","index","event","preventDefault","stopPropagation","title","truncateText","value","length","substring","_jsx","CustomFadeWrapper","onResize","content","wrapper","window","innerWidth","current","scrollLeft","getBoundingClientRect","left","Chain","role","$fullWidthIndicatorLine","children","map","width","titleAddon","isActive","ChainItem","$active","ref","$width","_jsxs","ChainLink","onClick","$reversed","position","LabelContainer","Label","Typography","BodyBL","weight","BoldLabel","type","tabIndex","onKeyDown","e","nextIndex","key","_a","focus","handleKeyDown","el"],"mappings":"wgBA2BO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,GAC/CC,EAAWC,GAETC,EAAQF,EAAWG,GACnBC,EAAmBC,EAAc,UAAU,CAAEH,UAE7CI,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAGRK,EAAmBJ,EAAc,UAAU,CAAEH,UAE7CQ,EAAgBC,EAAsB,MACtCC,EAAgBD,EAAqC,IAKrDE,EACDC,GACAC,IACGA,EAAMC,iBACND,EAAME,kBACDzB,GACDK,EAAsBiB,GAGtBpB,GACAA,EAAWK,EAASe,GAAOI,MAAOJ,EACtC,EA+BFK,EAAgBC,GACdd,GACOc,EAAMC,OAAS,GAAK,GAAGD,EAAME,UAAU,EAAG,SAG9CF,EAMX,OACIG,EAACC,EAAiB,CACdC,SAzCa,EAAGC,UAASC,cAEzBD,GACAC,GACAC,OAAOC,YAAcpB,GACrBC,EAAcoB,UAEdJ,EAAQK,WACJrB,EAAcoB,QAAQE,wBAAwBC,KACtD,EAgC0B,cACTxC,EACbG,UAAWA,WAEX2B,EAACW,GACGC,KAAK,UAASC,wBACWzC,EAAsB0C,SAE9CtC,EAASuC,KAAI,EAAGpB,QAAOqB,QAAOC,cAAc1B,KACzC,MAAM2B,EAAW3C,IAAuBgB,EAExC,OACIS,EAACmB,GAEGP,KAAK,OAAMQ,QACFF,EACTG,IAAKH,EAAW/B,EAAgB,KAAImC,OAC5BN,WAERO,EAACC,GACGZ,KAAK,OACLa,QAASnC,EAAqBC,GAAM,cACvB,GAAGrB,UAAeqB,IAAOmC,UACF,UAAzBT,aAAU,EAAVA,EAAYU,UAAmBb,SAAA,CAE1CS,EAACK,EAAc,CAAChB,KAAK,iBACjBZ,EAAC6B,WACYX,EACTO,QAASnC,EAAqBC,GAAM,cACxB,gBAEZS,EAAC8B,EAAWC,OAAM,CAACC,OAAO,mBACrBpC,EAAaD,OAGtBK,EAACiC,EAAS,CACNrB,KAAK,MACLsB,KAAK,SAAQ,gBACEhB,EACfiB,SAAUjB,EAAW,GAAI,EACzBkB,UAAYC,GArE1B,EAACA,EAAwB9C,WAC3C,IAAI+C,EAAY/C,EACF,eAAV8C,EAAEE,KACFD,GAAa/C,EAAQ,GAAKf,EAASsB,OACnCuC,EAAE5C,kBACe,cAAV4C,EAAEE,MACTD,GAAa/C,EAAQ,EAAIf,EAASsB,QAAUtB,EAASsB,OACrDuC,EAAE5C,kBAG0B,QAAhC+C,EAAAnD,EAAckB,QAAQ+B,UAAU,IAAAE,GAAAA,EAAEC,OAAO,EA4DLC,CAAcL,EAAG9C,GAErB8B,IAAMsB,GACDtD,EAAckB,QAAQhB,GAASoD,EAAGvB,QAE9BF,EAAQJ,SAEjBd,EAAC8B,EAAWC,QAAOC,OAAO,WAAUlB,SAC/BlB,EAAaD,UAIzBsB,aAAU,EAAVA,EAAYd,YAxCZZ,EA0CG,OAIR"}
+{"version":3,"file":"tab-link-chain.js","sources":["../../src/tab/tab-link-chain.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useContext, useEffect, useRef } from \"react\";\n\nimport { FadeWrapper, type ResizeCallbackParams } from \"../shared/fade-wrapper\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { TabContext } from \"./tab-context\";\nimport * as styles from \"./tab-link-chain.styles\";\nimport type { TabProps } from \"./types\";\n\ninterface Props\n    extends Pick<\n        TabProps,\n        \"fullWidthIndicatorLine\" | \"onTabClick\" | \"data-testid\" | \"fadeColor\"\n    > {\n    controlledMode?: boolean;\n}\n\nexport const TabLinkChain = ({\n    controlledMode,\n    \"data-testid\": testId,\n    onTabClick,\n    fullWidthIndicatorLine,\n    fadeColor,\n}: Props) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setCurrentActiveIndex, currentActiveIndex, tabLinks, instanceId } =\n        useContext(TabContext);\n\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    const activeLinkRef = useRef<HTMLLIElement | null>(null);\n    const chainRef = useRef<HTMLUListElement | null>(null);\n    const chainLinkRefs = useRef<(HTMLButtonElement | null)[]>([]);\n    const chainItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n\n    useEffect(() => {\n        chainItemRefs.current.forEach((itemRef, index) => {\n            if (!itemRef) {\n                return;\n            }\n\n            const width = tabLinks[index]?.width;\n\n            if (width) {\n                itemRef.style.setProperty(styles.tokens.chainItem.width, width);\n            } else {\n                itemRef.style.removeProperty(styles.tokens.chainItem.width);\n            }\n        });\n    }, [tabLinks]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChainLinkClick =\n        (index: number) =>\n        (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n            if (!controlledMode) {\n                setCurrentActiveIndex(index);\n            }\n\n            if (onTabClick) {\n                onTabClick(tabLinks[index].title, index);\n            }\n        };\n\n    const handleResize = ({ content }: ResizeCallbackParams) => {\n        if (content && isTablet && activeLinkRef.current && chainRef.current) {\n            content.scrollLeft =\n                activeLinkRef.current.getBoundingClientRect().left -\n                chainRef.current.getBoundingClientRect().left;\n        }\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent, index: number) => {\n        let nextIndex = index;\n        if (e.key === \"ArrowRight\") {\n            nextIndex = (index + 1) % tabLinks.length;\n            e.preventDefault();\n        } else if (e.key === \"ArrowLeft\") {\n            nextIndex = (index - 1 + tabLinks.length) % tabLinks.length;\n            e.preventDefault();\n        }\n\n        chainLinkRefs.current[nextIndex]?.focus();\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <FadeWrapper\n            onResize={handleResize}\n            data-testid={testId}\n            fadeColor={fadeColor}\n            className={styles.customFadeWrapper}\n        >\n            <ul\n                role=\"tablist\"\n                ref={chainRef}\n                className={clsx(\n                    styles.chain,\n                    fullWidthIndicatorLine && styles.chainFullWidthIndicator\n                )}\n            >\n                {tabLinks.map(({ title, width, titleAddon }, index) => {\n                    const isActive = currentActiveIndex === index;\n                    const chainItemRef = (el: HTMLLIElement | null) => {\n                        chainItemRefs.current[index] = el;\n                        if (isActive) {\n                            activeLinkRef.current = el;\n                        }\n                    };\n\n                    return (\n                        <li\n                            key={`${title}-${width ?? \"\"}-${\n                                titleAddon?.position ?? \"none\"\n                            }`}\n                            role=\"none\"\n                            className={clsx(\n                                styles.chainItem,\n                                isActive && styles.chainItemActive\n                            )}\n                            ref={chainItemRef}\n                        >\n                            <div\n                                role=\"none\"\n                                onClick={handleChainLinkClick(index)}\n                                data-testid={`${testId}-link-${index}`}\n                                className={clsx(\n                                    styles.flexRow,\n                                    styles.chainLink,\n                                    titleAddon?.position === \"left\" &&\n                                        styles.chainLinkReversed\n                                )}\n                            >\n                                <div\n                                    className={styles.labelContainer}\n                                    role=\"none\"\n                                >\n                                    <div\n                                        className={clsx(\n                                            styles.label,\n                                            styles.deselectedLabel,\n                                            isActive &&\n                                                styles.deselectedLabelActive\n                                        )}\n                                        onClick={handleChainLinkClick(index)}\n                                        aria-hidden=\"true\"\n                                    >\n                                        {title}\n                                    </div>\n                                    <button\n                                        role=\"tab\"\n                                        id={`${instanceId}-tab-${index}`}\n                                        type=\"button\"\n                                        aria-selected={isActive}\n                                        tabIndex={isActive ? 0 : -1}\n                                        onKeyDown={(e) =>\n                                            handleKeyDown(e, index)\n                                        }\n                                        ref={(el) =>\n                                            (chainLinkRefs.current[index] = el)\n                                        }\n                                        className={clsx(\n                                            styles.label,\n                                            styles.selectedLabel,\n                                            isActive &&\n                                                styles.selectedLabelActive\n                                        )}\n                                    >\n                                        {title}\n                                    </button>\n                                </div>\n                                {titleAddon?.content}\n                            </div>\n                        </li>\n                    );\n                })}\n            </ul>\n        </FadeWrapper>\n    );\n};\n"],"names":["TabLinkChain","controlledMode","testId","onTabClick","fullWidthIndicatorLine","fadeColor","setCurrentActiveIndex","currentActiveIndex","tabLinks","instanceId","useContext","TabContext","isTablet","useMaxWidthMediaQuery","activeLinkRef","useRef","chainRef","chainLinkRefs","chainItemRefs","useEffect","current","forEach","itemRef","index","width","_a","style","setProperty","styles.tokens","chainItem","removeProperty","handleChainLinkClick","event","preventDefault","stopPropagation","title","_jsx","FadeWrapper","onResize","content","scrollLeft","getBoundingClientRect","left","className","styles.customFadeWrapper","children","role","ref","clsx","styles.chain","styles.chainFullWidthIndicator","map","titleAddon","isActive","styles.chainItem","styles.chainItemActive","el","_jsxs","onClick","styles.flexRow","styles.chainLink","position","styles.chainLinkReversed","styles.labelContainer","styles.label","styles.deselectedLabel","styles.deselectedLabelActive","id","type","tabIndex","onKeyDown","e","nextIndex","key","length","focus","handleKeyDown","styles.selectedLabel","styles.selectedLabelActive"],"mappings":"0hCAiBO,MAAMA,EAAe,EACxBC,iBACA,cAAeC,EACfC,aACAC,yBACAC,gBAKA,MAAMC,sBAAEA,EAAqBC,mBAAEA,EAAkBC,SAAEA,EAAQC,WAAEA,GACzDC,EAAWC,GAETC,EAAWC,EAAsB,MAEjCC,EAAgBC,EAA6B,MAC7CC,EAAWD,EAAgC,MAC3CE,EAAgBF,EAAqC,IACrDG,EAAgBH,EAAiC,IAEvDI,GAAU,KACND,EAAcE,QAAQC,SAAQ,CAACC,EAASC,WACpC,IAAKD,EACD,OAGJ,MAAME,EAAuB,QAAfC,EAAAjB,EAASe,UAAM,IAAAE,OAAA,EAAAA,EAAED,MAE3BA,EACAF,EAAQI,MAAMC,YAAYC,EAAcC,UAAUL,MAAOA,GAEzDF,EAAQI,MAAMI,eAAeF,EAAcC,UAAUL,MACzD,GACF,GACH,CAAChB,IAKJ,MAAMuB,EACDR,GACAS,IACGA,EAAMC,iBACND,EAAME,kBACDjC,GACDK,EAAsBiB,GAGtBpB,GACAA,EAAWK,EAASe,GAAOY,MAAOZ,EACtC,EA2BR,OACIa,EAACC,EAAW,CACRC,SA1Ba,EAAGC,cAChBA,GAAW3B,GAAYE,EAAcM,SAAWJ,EAASI,UACzDmB,EAAQC,WACJ1B,EAAcM,QAAQqB,wBAAwBC,KAC9C1B,EAASI,QAAQqB,wBAAwBC,KACjD,EAqB0B,cACTxC,EACbG,UAAWA,EACXsC,UAAWC,EAAwBC,SAEnCT,EAAA,KAAA,CACIU,KAAK,UACLC,IAAK/B,EACL2B,UAAWK,EACPC,EACA7C,GAA0B8C,GAC7BL,SAEArC,EAAS2C,KAAI,EAAGhB,QAAOX,QAAO4B,cAAc7B,WACzC,MAAM8B,EAAW9C,IAAuBgB,EAQxC,OACIa,EAAA,KAAA,CAIIU,KAAK,OACLH,UAAWK,EACPM,EACAD,GAAYE,GAEhBR,IAjBcS,IAClBtC,EAAcE,QAAQG,GAASiC,EAC3BH,IACAvC,EAAcM,QAAUoC,EAC5B,EAaqBX,SAEjBY,EAAA,MAAA,CACIX,KAAK,OACLY,QAAS3B,EAAqBR,GAAM,cACvB,GAAGrB,UAAeqB,IAC/BoB,UAAWK,EACPW,EACAC,EACyB,UAAzBR,aAAU,EAAVA,EAAYS,WACRC,GACPjB,SAAA,CAEDY,EAAA,MAAA,CACId,UAAWoB,EACXjB,KAAK,OAAMD,SAAA,CAEXT,EAAA,MAAA,CACIO,UAAWK,EACPgB,EACAC,EACAZ,GACIa,GAERR,QAAS3B,EAAqBR,iBAClB,OAAMsB,SAEjBV,IAELC,YACIU,KAAK,MACLqB,GAAI,GAAG1D,SAAkBc,IACzB6C,KAAK,SAAQ,gBACEf,EACfgB,SAAUhB,EAAW,KACrBiB,UAAYC,GArF1B,EAACA,EAAwBhD,WAC3C,IAAIiD,EAAYjD,EACF,eAAVgD,EAAEE,KACFD,GAAajD,EAAQ,GAAKf,EAASkE,OACnCH,EAAEtC,kBACe,cAAVsC,EAAEE,MACTD,GAAajD,EAAQ,EAAIf,EAASkE,QAAUlE,EAASkE,OACrDH,EAAEtC,kBAG0B,QAAhCR,EAAAR,EAAcG,QAAQoD,UAAU,IAAA/C,GAAAA,EAAEkD,OAAO,EA4ELC,CAAcL,EAAGhD,GAErBwB,IAAMS,GACDvC,EAAcG,QAAQG,GAASiC,EAEpCb,UAAWK,EACPgB,EACAa,EACAxB,GACIyB,YAGP3C,OAGRiB,eAAAA,EAAYb,YA3DZ,GAAGJ,KAASX,QAAAA,EAAS,MACF,UAApB4B,aAAU,EAAVA,EAAYS,gBAAQ,IAAApC,EAAAA,EAAI,SA4D3B,OAIP"}

package/tab/tab-link-chain.styles.d.ts

@@ -0,0 +1,19 @@
+export declare const tokens: {
+    chainItem: {
+        width: string;
+    };
+};
+export declare const chain: import("@linaria/core").LinariaClassName;
+export declare const chainFullWidthIndicator: import("@linaria/core").LinariaClassName;
+export declare const chainItem: import("@linaria/core").LinariaClassName;
+export declare const chainItemActive: import("@linaria/core").LinariaClassName;
+export declare const flexRow: import("@linaria/core").LinariaClassName;
+export declare const chainLink: import("@linaria/core").LinariaClassName;
+export declare const chainLinkReversed: import("@linaria/core").LinariaClassName;
+export declare const labelContainer: import("@linaria/core").LinariaClassName;
+export declare const label: import("@linaria/core").LinariaClassName;
+export declare const deselectedLabel: import("@linaria/core").LinariaClassName;
+export declare const deselectedLabelActive: import("@linaria/core").LinariaClassName;
+export declare const selectedLabel: import("@linaria/core").LinariaClassName;
+export declare const selectedLabelActive: import("@linaria/core").LinariaClassName;
+export declare const customFadeWrapper: import("@linaria/core").LinariaClassName;

package/tab/tab-link-chain.styles.js

@@ -0,0 +1,2 @@
+import"./tab-link-chain.styles_49got4.css";const t={chainItem:{width:"--fds-internal-tab-chainItem-width"}},c="c16oikpn",i="c2536gp",s="c1c3wbud",d="cdfiwt",n="fxd8c9t",a="c1gdrjx",l="cj41vce",e="lmiq2g0",b="l1yi6azs",h="d97pn0z",g="d1v8j9lw",m="s5l4m4t",o="shqgesl",p="c1r7bbxk";export{c as chain,i as chainFullWidthIndicator,s as chainItem,d as chainItemActive,a as chainLink,l as chainLinkReversed,p as customFadeWrapper,h as deselectedLabel,g as deselectedLabelActive,n as flexRow,b as label,e as labelContainer,m as selectedLabel,o as selectedLabelActive,t as tokens};
+//# sourceMappingURL=tab-link-chain.styles.js.map

package/tab/tab-link-chain.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-link-chain.styles.js","sources":["../../src/tab/tab-link-chain.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    chainItem: {\n        width: \"--fds-internal-tab-chainItem-width\",\n    },\n};\n\nexport const chain = css`\n    display: inline-flex;\n    width: 100%;\n    list-style-type: none;\n`;\n\nexport const chainFullWidthIndicator = css`\n    &::after {\n        content: \"\";\n        height: inherit;\n        flex-grow: 1;\n        /* follows the border in ChainItem */\n        border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    }\n`;\n\nexport const chainItem = css`\n    display: flex;\n    justify-content: center;\n    flex-shrink: 0;\n    border-bottom: ${Border[\"width-040\"]} ${Border.solid} ${Colour.border};\n    ${tokens.chainItem.width}: initial;\n    width: var(${tokens.chainItem.width}, auto);\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex: 1;\n        justify-content: center;\n    }\n`;\n\nexport const chainItemActive = css`\n    border-color: ${Colour[\"border-primary\"]};\n`;\n\nexport const flexRow = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n`;\n\nexport const chainLink = css`\n    /* position: relative; */\n    flex-direction: row;\n    gap: 0.5rem;\n    padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-20\"]};\n    cursor: pointer;\n    width: 100%;\n    justify-content: center;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: -2px;\n        border-radius: ${Radius.sm};\n    }\n`;\n\nexport const chainLinkReversed = css`\n    flex-direction: row-reverse;\n`;\n\nexport const labelContainer = css`\n    position: relative;\n`;\n\nexport const label = css`\n    border: none;\n    background: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const deselectedLabel = css`\n    position: absolute;\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text-subtler\"]};\n    opacity: 1;\n`;\n\nexport const deselectedLabelActive = css`\n    opacity: 0;\n`;\n\nexport const selectedLabel = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text-primary\"]};\n    opacity: 0;\n    outline: none;\n\n    ${MediaQuery.MaxWidth.sm} {\n        max-width: 20ch;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n`;\n\nexport const selectedLabelActive = css`\n    opacity: 1;\n`;\n\nexport const customFadeWrapper = css`\n    [data-id=\"left-fade-indicator-button\"],\n    [data-id=\"right-fade-indicator-button\"] {\n        margin-bottom: ${Spacing[\"spacing-4\"]};\n    }\n`;\n"],"names":["tokens","chainItem","width","chain","chainFullWidthIndicator","chainItemActive","flexRow","chainLink","chainLinkReversed","labelContainer","label","deselectedLabel","deselectedLabelActive","selectedLabel","selectedLabelActive","customFadeWrapper"],"mappings":"8DAWO,MAAMA,EAAS,CAClBC,UAAW,CACPC,MAAO,uCAIFC,EAAK,WAMLC,EAAuB,UAUvBH,EAAS,WAcTI,EAAe,SAIfC,EAAO,UAMPC,EAAS,UAiBTC,EAAiB,UAIjBC,EAAc,UAIdC,EAAK,WAYLC,EAAe,UAOfC,EAAqB,WAIrBC,EAAa,UAcbC,EAAmB,UAInBC,EAAiB"}

package/tab/tab-link-chain.styles_49got4.css

@@ -0,0 +1,14 @@
+@layer fds{.c16oikpn{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:100%;list-style-type:none;}
+.c2536gp::after{content:"";height:inherit;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;border-bottom:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border);}
+.c1c3wbud{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;border-bottom:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border);--fds-internal-tab-chainItem-width:initial;width:var(--fds-internal-tab-chainItem-width, auto);}:where(body.fds-breakpoint-sm-max) .c1c3wbud{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.cdfiwt{border-color:var(--fds-colour-border-primary);}
+.fxd8c9t{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.c1gdrjx{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:0.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-16) var(--fds-spacing-20);cursor:pointer;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.c1gdrjx:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:-2px;border-radius:var(--fds-radius-sm);}
+.cj41vce{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.lmiq2g0{position:relative;}
+.l1yi6azs{border:none;background:none;}:where(body.fds-breakpoint-sm-max) .l1yi6azs{max-width:20ch;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.d97pn0z{position:absolute;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-subtler);opacity:1;}
+.d1v8j9lw{opacity:0;}
+.s5l4m4t{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text-primary);opacity:0;outline:none;}:where(body.fds-breakpoint-sm-max) .s5l4m4t{max-width:20ch;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.shqgesl{opacity:1;}
+.c1r7bbxk [data-id="left-fade-indicator-button"],.c1r7bbxk [data-id="right-fade-indicator-button"]{margin-bottom:var(--fds-spacing-4);}}

package/tab/tab-list-item.d.ts

@@ -0,0 +1,5 @@
+import type { TabListItemProps } from "./types";
+export declare const TabListItem: {
+    (_props: TabListItemProps): null;
+    displayName: string;
+};

package/tab/tab-list-item.js

@@ -0,0 +1,2 @@
+const a=a=>null;a.displayName="Tab.TabListItem";export{a as TabListItem};
+//# sourceMappingURL=tab-list-item.js.map

package/tab/tab-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list-item.js","sources":["../../src/tab/tab-list-item.tsx"],"sourcesContent":["import type { TabListItemProps } from \"./types\";\n\n// Declarative slot component — props are consumed by Tab.TabList, not rendered\nexport const TabListItem = (_props: TabListItemProps) => null;\n\nTabListItem.displayName = \"Tab.TabListItem\";\n"],"names":["TabListItem","_props","displayName"],"mappings":"AAGO,MAAMA,EAAeC,GAA6B,KAEzDD,EAAYE,YAAc"}

package/tab/tab-list.d.ts

@@ -0,0 +1,5 @@
+import type { TabListProps } from "./types";
+export declare const TabList: {
+    ({ children, fullWidthIndicatorLine, fadeColor, "data-testid": testId, }: TabListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/tab/tab-list.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";import{useContext as e,useMemo as o,Children as i,useEffect as r}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as a}from"../util/use-isomorphic-layout-effect.js";import{TabContext as n}from"./tab-context.js";import{TabLinkChain as l}from"./tab-link-chain.js";const d=({children:d,fullWidthIndicatorLine:s,fadeColor:m,"data-testid":c})=>{const{setTabLinks:p,controlledMode:u,onTabClick:f,isContextProvided:b}=e(n),j=o((()=>i.toArray(d).filter(Boolean).map((({props:t})=>({title:t.title,width:t.width,titleAddon:t.titleAddon})))),[d]);return a((()=>{p(j)}),[p,j]),r((()=>{"production"===process.env.NODE_ENV||b||console.error("Tab.TabList must be rendered inside Tab.Context.")}),[b]),t(l,{controlledMode:u,onTabClick:f,"data-testid":c,fullWidthIndicatorLine:s,fadeColor:m})};d.displayName="Tab.TabList";export{d as TabList};
+//# sourceMappingURL=tab-list.js.map

package/tab/tab-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-list.js","sources":["../../src/tab/tab-list.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { Children, useContext, useEffect, useMemo } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../util\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabListItemProps, TabListProps } from \"./types\";\n\nexport const TabList = ({\n    children,\n    fullWidthIndicatorLine,\n    fadeColor,\n    \"data-testid\": testId,\n}: TabListProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setTabLinks, controlledMode, onTabClick, isContextProvided } =\n        useContext(TabContext);\n\n    const tabLinks = useMemo(() => {\n        return (\n            Children.toArray(children).filter(\n                Boolean\n            ) as ReactElement<TabListItemProps>[]\n        ).map(({ props }) => ({\n            title: props.title,\n            width: props.width,\n            titleAddon: props.titleAddon,\n        })) as TabLinkProps[];\n    }, [children]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useIsomorphicLayoutEffect(() => {\n        setTabLinks(tabLinks);\n    }, [setTabLinks, tabLinks]);\n\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"production\" && !isContextProvided) {\n            console.error(\"Tab.TabList must be rendered inside Tab.Context.\");\n        }\n    }, [isContextProvided]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <TabLinkChain\n            controlledMode={controlledMode}\n            onTabClick={onTabClick}\n            data-testid={testId}\n            fullWidthIndicatorLine={fullWidthIndicatorLine}\n            fadeColor={fadeColor}\n        />\n    );\n};\n\nTabList.displayName = \"Tab.TabList\";\n"],"names":["TabList","children","fullWidthIndicatorLine","fadeColor","testId","setTabLinks","controlledMode","onTabClick","isContextProvided","useContext","TabContext","tabLinks","useMemo","Children","toArray","filter","Boolean","map","props","title","width","titleAddon","useIsomorphicLayoutEffect","useEffect","process","env","NODE_ENV","console","error","_jsx","TabLinkChain","displayName"],"mappings":"+dASO,MAAMA,EAAU,EACnBC,WACAC,yBACAC,YACA,cAAeC,MAKf,MAAMC,YAAEA,EAAWC,eAAEA,EAAcC,WAAEA,EAAUC,kBAAEA,GAC7CC,EAAWC,GAETC,EAAWC,GAAQ,IAEjBC,EAASC,QAAQb,GAAUc,OACvBC,SAENC,KAAI,EAAGC,YAAO,CACZC,MAAOD,EAAMC,MACbC,MAAOF,EAAME,MACbC,WAAYH,EAAMG,gBAEvB,CAACpB,IAkBJ,OAbAqB,GAA0B,KACtBjB,EAAYM,EAAS,GACtB,CAACN,EAAaM,IAEjBY,GAAU,KACuB,eAAzBC,QAAQC,IAAIC,UAA8BlB,GAC1CmB,QAAQC,MAAM,mDAClB,GACD,CAACpB,IAMAqB,EAACC,EAAY,CACTxB,eAAgBA,EAChBC,WAAYA,gBACCH,EACbF,uBAAwBA,EACxBC,UAAWA,GACb,EAIVH,EAAQ+B,YAAc"}

package/tab/tab-panel.d.ts

@@ -0,0 +1,5 @@
+import type { TabPanelProps } from "./types";
+export declare const TabPanel: {
+    ({ index, children, ...otherProps }: TabPanelProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/tab/tab-panel.js

@@ -0,0 +1,2 @@
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useContext as t,useEffect as n}from"react";import{TabContext as i}from"./tab-context.js";const o=o=>{var{index:a,children:d}=o,l=e(o,["index","children"]);const{currentActiveIndex:s,isContextProvided:c,instanceId:b}=t(i);return n((()=>{"production"===process.env.NODE_ENV||c||console.error("Tab.Panel must be rendered inside Tab.Context.")}),[c]),s===a?r("div",Object.assign({role:"tabpanel","aria-labelledby":`${b}-tab-${a}`,tabIndex:0},l,{children:d})):null};o.displayName="Tab.Panel";export{o as TabPanel};
+//# sourceMappingURL=tab-panel.js.map

package/tab/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sources":["../../src/tab/tab-panel.tsx"],"sourcesContent":["import { useContext, useEffect } from \"react\";\n\nimport { TabContext } from \"./tab-context\";\nimport type { TabPanelProps } from \"./types\";\n\nexport const TabPanel = ({ index, children, ...otherProps }: TabPanelProps) => {\n    const { currentActiveIndex, isContextProvided, instanceId } =\n        useContext(TabContext);\n\n    useEffect(() => {\n        if (process.env.NODE_ENV !== \"production\" && !isContextProvided) {\n            console.error(\"Tab.Panel must be rendered inside Tab.Context.\");\n        }\n    }, [isContextProvided]);\n\n    return currentActiveIndex === index ? (\n        <div\n            role=\"tabpanel\"\n            aria-labelledby={`${instanceId}-tab-${index}`}\n            tabIndex={0}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    ) : null;\n};\n\nTabPanel.displayName = \"Tab.Panel\";\n"],"names":["TabPanel","_a","index","children","otherProps","__rest","currentActiveIndex","isContextProvided","instanceId","useContext","TabContext","useEffect","process","env","NODE_ENV","console","error","_jsx","Object","assign","role","tabIndex","displayName"],"mappings":"uLAKO,MAAMA,EAAYC,QAAAC,MAAEA,EAAKC,SAAEA,GAAQF,EAAKG,EAAUC,EAAAJ,EAAhC,sBACrB,MAAMK,mBAAEA,EAAkBC,kBAAEA,EAAiBC,WAAEA,GAC3CC,EAAWC,GAQf,OANAC,GAAU,KACuB,eAAzBC,QAAQC,IAAIC,UAA8BP,GAC1CQ,QAAQC,MAAM,iDAClB,GACD,CAACT,IAEGD,IAAuBJ,EAC1Be,EAAA,MAAAC,OAAAC,OAAA,CACIC,KAAK,WAAU,kBACE,GAAGZ,SAAkBN,IACtCmB,SAAU,GACNjB,EAAU,CAAAD,SAEbA,KAEL,IAAI,EAGZH,EAASsB,YAAc"}

package/tab/tab.d.ts

@@ -1,10 +1,42 @@
 import type { TabProps } from "./types";
+/**
+ * A tabbed-panel layout that switches visible content by selecting a tab link.
+ *
+ * Use `Tab` to organise content into labelled panels where only one panel is
+ * visible at a time. Compose with `Tab.Item` to define each panel.
+ *
+ * For cases where the tab bar and panels need to be positioned independently,
+ * use the standalone composition: `Tab.Context`, `Tab.TabList`,
+ * `Tab.TabListItem`, and `Tab.Panel`.
+ * @keywords navigation, panel, tabbed, tabs
+ */
 export declare const Tab: {
-    ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, "data-testid": testId, fullWidthIndicatorLine, fadeColor, ...otherProps }: TabProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, "data-testid": testId, className, fullWidthIndicatorLine, fadeColor, ...otherProps }: TabProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
+    /** Renders an individual content panel within a `Tab`. Inactive items are unmounted — inner state is not preserved across tab switches. */
     Item: {
         ({ index, children, titleAddon: _titleAddon, ...otherProps }: import("./tab-item").TabItemComponentProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
     };
+    /** Context provider for the standalone TabList + Panel composition. */
+    Context: {
+        ({ children, currentActive: currentActiveIndex, initialActive, onTabClick, }: import("./types").TabContextProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Renders the tab link bar within a `Tab.Context`. */
+    TabList: {
+        ({ children, fullWidthIndicatorLine, fadeColor, "data-testid": testId, }: import("./types").TabListProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Declares a tab entry inside a `Tab.TabList`. */
+    TabListItem: {
+        (_props: import("./types").TabListItemProps): null;
+        displayName: string;
+    };
+    /** Renders a content panel within a `Tab.Context`. Inactive panels are unmounted — inner state is not preserved across tab switches. */
+    Panel: {
+        ({ index, children, ...otherProps }: import("./types").TabPanelProps): import("react/jsx-runtime").JSX.Element | null;
+        displayName: string;
+    };
 };

package/tab/tab.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as i,jsxs as e}from"react/jsx-runtime";import{useState as r,useMemo as o,Children as a,useEffect as n,cloneElement as d}from"react";import{Wrapper as l}from"./tab.style.js";import{TabContext as c}from"./tab-context.js";import{TabItem as s}from"./tab-item.js";import{TabLinkChain as m}from"./tab-link-chain.js";const p=s=>{var{children:p,currentActive:f,initialActive:b=0,onTabClick:u,"data-testid":h,fullWidthIndicatorLine:v,fadeColor:A}=s,j=t(s,["children","currentActive","initialActive","onTabClick","data-testid","fullWidthIndicatorLine","fadeColor"]);const[y,C]=r(f||b),k=o((()=>a.toArray(p).filter(Boolean).map((t=>({title:t.props.title,width:t.props.width,titleAddon:t.props.titleAddon})))),[p]);n((()=>{"number"==typeof f&&C(f)}),[f]);return i(l,Object.assign({"data-testid":h},j,{children:e(c.Provider,{value:{tabLinks:k,currentActiveIndex:y,setCurrentActiveIndex:C},children:[i(m,{controlledMode:"number"==typeof f,onTabClick:u,"data-testid":`${h}-tabs`,fullWidthIndicatorLine:v,fadeColor:A}),a.toArray(p).filter(Boolean).map(((t,i)=>d(t,{key:i,index:i})))]})}))};p.displayName="Tab";const f=Object.assign(p,{Item:s});export{f as Tab};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as i,jsxs as e}from"react/jsx-runtime";import r from"clsx";import{useState as o,useMemo as a,Children as n,useEffect as l,cloneElement as s}from"react";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as d}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{wrapper as m}from"./tab.styles.js";import{noop as c,TabContext as p}from"./tab-context.js";import{TabContextProvider as b}from"./tab-context-provider.js";import{TabItem as f}from"./tab-item.js";import{TabLinkChain as u}from"./tab-link-chain.js";import{TabList as j}from"./tab-list.js";import{TabListItem as v}from"./tab-list-item.js";import{TabPanel as h}from"./tab-panel.js";const x=b=>{var{children:f,currentActive:j,initialActive:v=0,onTabClick:h,"data-testid":x,className:y,fullWidthIndicatorLine:A,fadeColor:C}=b,k=t(b,["children","currentActive","initialActive","onTabClick","data-testid","className","fullWidthIndicatorLine","fadeColor"]);const[I,T]=o(j||v),L=d(),g=a((()=>n.toArray(f).filter(Boolean).map((t=>({title:t.props.title,width:t.props.width,titleAddon:t.props.titleAddon})))),[f]),N=a((()=>({instanceId:L,tabLinks:g,currentActiveIndex:I,setCurrentActiveIndex:T,setTabLinks:c,controlledMode:"number"==typeof j,onTabClick:h,isContextProvided:!0})),[I,j,L,h,g]);l((()=>{"number"==typeof j&&T(j)}),[j]);return i("div",Object.assign({"data-testid":x,className:r(m,y)},k,{children:e(p.Provider,{value:N,children:[i(u,{controlledMode:"number"==typeof j,onTabClick:h,"data-testid":`${x}-tabs`,fullWidthIndicatorLine:A,fadeColor:C}),n.toArray(f).filter(Boolean).map(((t,i)=>{var e;const r=t;return s(t,{key:null!==(e=r.key)&&void 0!==e?e:r.props.title,index:i})}))]})}))};x.displayName="Tab";const y=Object.assign(x,{Item:f,Context:b,TabList:j,TabListItem:v,Panel:h});export{y as Tab};
 //# sourceMappingURL=tab.js.map

package/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport { Wrapper } from \"./tab.style\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { TabContext } from \"./tab-context\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: index,\n                index,\n            });\n        });\n    };\n\n    return (\n        <Wrapper data-testid={testId} {...otherProps}>\n            <TabContext.Provider\n                value={{\n                    tabLinks,\n                    currentActiveIndex: currentActive,\n                    setCurrentActiveIndex: setCurrentActive,\n                }}\n            >\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </Wrapper>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport const Tab = Object.assign(TabBase, {\n    Item: TabItem,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","useEffect","_jsx","Wrapper","Object","assign","_jsxs","TabContext","Provider","value","setCurrentActiveIndex","TabLinkChain","controlledMode","index","cloneElement","key","displayName","Tab","Item","TabItem"],"mappings":"gXAaA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,uBACrBA,EAAsBC,UACtBA,KACGC,EAAUC,EAAAV,EARA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,yBAAA,cAab,MAAOE,EAAeS,GAAoBC,EACtCT,GAAsBC,GAGpBS,EAAWC,GAAQ,IACCC,EAASC,QAAQf,GAAUgB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAACvB,IAKJwB,GAAU,KAC4B,iBAAvBtB,GACPQ,EAAiBR,EACrB,GACD,CAACA,IAiBJ,OACIuB,EAACC,EAAOC,OAAAC,OAAA,CAAA,cAAcvB,GAAYG,EAAU,CAAAR,SACxC6B,EAACC,EAAWC,SAAQ,CAChBC,MAAO,CACHpB,WACAV,mBAAoBD,EACpBgC,sBAAuBvB,GAC1BV,SAAA,CAEDyB,EAACS,EAAY,CACTC,eAA8C,iBAAvBjC,EACvBE,WAAYA,gBACC,GAAGC,SAChBC,uBAAwBA,EACxBC,UAAWA,IAzBDO,EAASC,QAAQf,GAAUgB,OAAOC,SAEnCC,KAAI,CAACC,EAAOiB,IAEtBC,EAAalB,EAA4B,CAC5CmB,IAAKF,EACLA,iBAuBE,EAIlBtC,EAAQyC,YAAc,YAKTC,EAAMb,OAAOC,OAAO9B,EAAS,CACtC2C,KAAMC"}
+{"version":3,"file":"tab.js","sources":["../../src/tab/tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { Children, cloneElement, useEffect, useMemo, useState } from \"react\";\n\nimport { useId } from \"../util\";\nimport * as styles from \"./tab.styles\";\nimport type { TabLinkProps } from \"./tab-context\";\nimport { noop, TabContext } from \"./tab-context\";\nimport { TabContextProvider } from \"./tab-context-provider\";\nimport { TabItem } from \"./tab-item\";\nimport { TabLinkChain } from \"./tab-link-chain\";\nimport { TabList } from \"./tab-list\";\nimport { TabListItem } from \"./tab-list-item\";\nimport { TabPanel } from \"./tab-panel\";\nimport type { TabItemProps, TabProps } from \"./types\";\n\nconst TabBase = ({\n    children,\n    currentActive: currentActiveIndex,\n    initialActive = 0,\n    onTabClick,\n    \"data-testid\": testId,\n    className,\n    fullWidthIndicatorLine,\n    fadeColor,\n    ...otherProps\n}: TabProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [currentActive, setCurrentActive] = useState<number>(\n        currentActiveIndex || initialActive\n    );\n\n    const instanceId = useId();\n\n    const tabLinks = useMemo(() => {\n        const validChildren = Children.toArray(children).filter(\n            Boolean\n        ) as ReactElement<TabItemProps>[];\n\n        return validChildren.map((child) => {\n            return {\n                title: child.props.title,\n                width: child.props.width,\n                titleAddon: child.props.titleAddon,\n            };\n        }) as TabLinkProps[];\n    }, [children]);\n\n    const tabContextValue = useMemo(\n        () => ({\n            instanceId,\n            tabLinks,\n            currentActiveIndex: currentActive,\n            setCurrentActiveIndex: setCurrentActive,\n            setTabLinks: noop,\n            controlledMode: typeof currentActiveIndex === \"number\",\n            onTabClick,\n            isContextProvided: true,\n        }),\n        [currentActive, currentActiveIndex, instanceId, onTabClick, tabLinks]\n    );\n\n    // =========================================================================\n    // Effects\n    // =========================================================================\n    useEffect(() => {\n        if (typeof currentActiveIndex === \"number\") {\n            setCurrentActive(currentActiveIndex);\n        }\n    }, [currentActiveIndex]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderChildren = () => {\n        const validChildren = Children.toArray(children).filter(Boolean);\n\n        return validChildren.map((child, index) => {\n            const element = child as ReactElement<TabItemProps>;\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return cloneElement(child as ReactElement<any>, {\n                key: element.key ?? element.props.title,\n                index,\n            });\n        });\n    };\n\n    return (\n        <div\n            data-testid={testId}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <TabContext.Provider value={tabContextValue}>\n                <TabLinkChain\n                    controlledMode={typeof currentActiveIndex === \"number\"}\n                    onTabClick={onTabClick}\n                    data-testid={`${testId}-tabs`}\n                    fullWidthIndicatorLine={fullWidthIndicatorLine}\n                    fadeColor={fadeColor}\n                />\n                {renderChildren()}\n            </TabContext.Provider>\n        </div>\n    );\n};\n\nTabBase.displayName = \"Tab\";\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n// @catalog\n/**\n * A tabbed-panel layout that switches visible content by selecting a tab link.\n *\n * Use `Tab` to organise content into labelled panels where only one panel is\n * visible at a time. Compose with `Tab.Item` to define each panel.\n *\n * For cases where the tab bar and panels need to be positioned independently,\n * use the standalone composition: `Tab.Context`, `Tab.TabList`,\n * `Tab.TabListItem`, and `Tab.Panel`.\n * @keywords navigation, panel, tabbed, tabs\n */\nexport const Tab = Object.assign(TabBase, {\n    /** Renders an individual content panel within a `Tab`. Inactive items are unmounted — inner state is not preserved across tab switches. */\n    Item: TabItem,\n    /** Context provider for the standalone TabList + Panel composition. */\n    Context: TabContextProvider,\n    /** Renders the tab link bar within a `Tab.Context`. */\n    TabList,\n    /** Declares a tab entry inside a `Tab.TabList`. */\n    TabListItem,\n    /** Renders a content panel within a `Tab.Context`. Inactive panels are unmounted — inner state is not preserved across tab switches. */\n    Panel: TabPanel,\n});\n"],"names":["TabBase","_a","children","currentActive","currentActiveIndex","initialActive","onTabClick","testId","className","fullWidthIndicatorLine","fadeColor","otherProps","__rest","setCurrentActive","useState","instanceId","useId","tabLinks","useMemo","Children","toArray","filter","Boolean","map","child","title","props","width","titleAddon","tabContextValue","setCurrentActiveIndex","setTabLinks","noop","controlledMode","isContextProvided","useEffect","_jsx","Object","assign","clsx","styles.wrapper","_jsxs","TabContext","Provider","value","TabLinkChain","index","element","cloneElement","key","displayName","Tab","Item","TabItem","Context","TabContextProvider","TabList","TabListItem","Panel","TabPanel"],"mappings":"sxBAgBA,MAAMA,EAAWC,QAAAC,SACbA,EACAC,cAAeC,EAAkBC,cACjCA,EAAgB,EAACC,WACjBA,EACA,cAAeC,EAAMC,UACrBA,EAASC,uBACTA,EAAsBC,UACtBA,GAAST,EACNU,EAAUC,EAAAX,EATA,CAAA,WAAA,gBAAA,gBAAA,aAAA,cAAA,YAAA,yBAAA,cAcb,MAAOE,EAAeU,GAAoBC,EACtCV,GAAsBC,GAGpBU,EAAaC,IAEbC,EAAWC,GAAQ,IACCC,EAASC,QAAQlB,GAAUmB,OAC7CC,SAGiBC,KAAKC,IACf,CACHC,MAAOD,EAAME,MAAMD,MACnBE,MAAOH,EAAME,MAAMC,MACnBC,WAAYJ,EAAME,MAAME,gBAGjC,CAAC1B,IAEE2B,EAAkBX,GACpB,KAAA,CACIH,aACAE,WACAb,mBAAoBD,EACpB2B,sBAAuBjB,EACvBkB,YAAaC,EACbC,eAA8C,iBAAvB7B,EACvBE,aACA4B,mBAAmB,KAEvB,CAAC/B,EAAeC,EAAoBW,EAAYT,EAAYW,IAMhEkB,GAAU,KAC4B,iBAAvB/B,GACPS,EAAiBT,EACrB,GACD,CAACA,IAmBJ,OACIgC,EAAA,MAAAC,OAAAC,OAAA,CAAA,cACiB/B,EACbC,UAAW+B,EAAKC,EAAgBhC,IAC5BG,EAAU,CAAAT,SAEduC,EAACC,EAAWC,SAAQ,CAACC,MAAOf,EAAe3B,SAAA,CACvCkC,EAACS,EAAY,CACTZ,eAA8C,iBAAvB7B,EACvBE,WAAYA,EAAU,cACT,GAAGC,SAChBE,uBAAwBA,EACxBC,UAAWA,IAzBDS,EAASC,QAAQlB,GAAUmB,OAAOC,SAEnCC,KAAI,CAACC,EAAOsB,WAC7B,MAAMC,EAAUvB,EAGhB,OAAOwB,EAAaxB,EAA4B,CAC5CyB,YAAKhD,EAAA8C,EAAQE,mBAAOF,EAAQrB,MAAMD,MAClCqB,SACF,SAoBA,EAId9C,EAAQkD,YAAc,YAiBTC,EAAMd,OAAOC,OAAOtC,EAAS,CAEtCoD,KAAMC,EAENC,QAASC,EAETC,UAEAC,cAEAC,MAAOC"}

package/tab/tab.styles.d.ts

@@ -0,0 +1 @@
+export declare const wrapper: import("@linaria/core").LinariaClassName;

package/tab/tab.styles.js

@@ -0,0 +1,2 @@
+import"./tab.styles_1najffw.css";const t="wchm9bj";export{t as wrapper};
+//# sourceMappingURL=tab.styles.js.map

package/tab/tab.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.styles.js","sources":["../../src/tab/tab.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n`;\n"],"names":["wrapper"],"mappings":"oDAEO,MAAMA,EAAO"}

package/tab/tab.styles_1najffw.css

@@ -0,0 +1 @@
+@layer fds{.wchm9bj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}}

package/tab/types.d.ts

@@ -1,33 +1,164 @@
+import type React from "react";
 import type { FadeColorSet } from "../shared/fade-wrapper";
+/**
+ * Props for the `Tab` component.
+ */
 export interface TabProps {
     children: JSX.Element | JSX.Element[];
-    /** Specify the initial tab index that is to be displayed */
+    /**
+     * Zero-based index of the tab panel displayed on first render.
+     *
+     * Ignored when `currentActive` is provided.
+     *
+     * @default 0
+     */
     initialActive?: number | undefined;
     /**
-     * Specify the current tab index that is to be displayed. By specifying
-     * this prop, the tab rendering will be manually controlled by you
+     * Zero-based index of the currently active tab panel.
+     *
+     * When provided, the component operates in controlled mode — the caller is
+     * responsible for updating this value in response to `onTabClick` to
+     * reflect tab changes.
      */
     currentActive?: number;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Called when the user clicks a tab link.
+     *
+     * @param title The `title` of the clicked `Tab.Item`.
+     * @param index The zero-based index of the clicked `Tab.Item`.
+     */
     onTabClick?: ((title: string, index: number) => void) | undefined;
+    /**
+     * Extends all tab indicator lines to the full width
+     * of the tab bar instead of matching only the tab link width.
+     *
+     * @default false
+     */
     fullWidthIndicatorLine?: boolean | undefined;
+    /**
+     * Background color(s) used for the fade overlays at the edges of the
+     * scrollable tab link bar.
+     *
+     * Pass a `string[]` to apply the same gradient stop colors on both edges,
+     * or a `FadeColorSet` to specify left and right edges independently.
+     */
     fadeColor?: string[] | FadeColorSet | undefined;
 }
+/**
+ * Props for the `Tab.Item` sub-component.
+ */
 export interface TabItemProps {
+    /**
+     * Text label rendered in the tab link bar for this panel.
+     */
     title: string;
     children: JSX.Element | JSX.Element[];
-    /** Custom addon content displayed next to the tab title */
+    /**
+     * Optional addon element rendered alongside the tab title in the link bar.
+     */
     titleAddon?: TitleAddonProps | undefined;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Explicit width for this tab link in the tab bar. Accepts any valid CSS width value.
+     */
     width?: string | undefined;
 }
+/**
+ * Configuration for the optional addon element displayed next to a tab title.
+ */
 export interface TitleAddonProps {
-    /** addon content */
+    /** The element rendered as the addon. */
     content: JSX.Element;
-    /** position of the addon content, defaults to "right" */
+    /**
+     * Which side of the tab title the addon appears on.
+     *
+     * @default "right"
+     */
     position?: "left" | "right" | undefined;
 }
+/**
+ * Props for the `Tab.Context` component.
+ */
+export interface TabContextProps {
+    children: React.ReactNode;
+    /**
+     * Zero-based index of the tab panel displayed on first render.
+     *
+     * Ignored when `currentActive` is provided.
+     *
+     * @default 0
+     */
+    initialActive?: number | undefined;
+    /**
+     * Zero-based index of the currently active tab panel.
+     *
+     * When provided, the component operates in controlled mode — the caller is
+     * responsible for updating this value in response to `onTabClick` to
+     * reflect tab changes.
+     */
+    currentActive?: number | undefined;
+    /**
+     * Called when the user clicks a tab link.
+     *
+     * @param title The `title` of the clicked `Tab.TabListItem`.
+     * @param index The zero-based index of the clicked `Tab.TabListItem`.
+     */
+    onTabClick?: ((title: string, index: number) => void) | undefined;
+}
+/**
+ * Props for the `Tab.TabList` component.
+ */
+export interface TabListProps {
+    children: React.ReactNode;
+    "data-testid"?: string | undefined;
+    /**
+     * Extends all tab indicator lines to the full width
+     * of the tab bar instead of matching only the tab link width.
+     *
+     * @default false
+     */
+    fullWidthIndicatorLine?: boolean | undefined;
+    /**
+     * Background color(s) used for the fade overlays at the edges of the
+     * scrollable tab link bar.
+     *
+     * Pass a `string[]` to apply the same gradient stop colors on both edges,
+     * or a `FadeColorSet` to specify left and right edges independently.
+     */
+    fadeColor?: string[] | FadeColorSet | undefined;
+}
+/**
+ * Props for the `Tab.TabListItem` component.
+ */
+export interface TabListItemProps {
+    /**
+     * Text label rendered in the tab link bar for this item.
+     */
+    title: string;
+    /**
+     * Optional addon element rendered alongside the tab title in the link bar.
+     */
+    titleAddon?: TitleAddonProps | undefined;
+    /**
+     * Explicit width for this tab link in the tab bar. Accepts any valid CSS width value.
+     */
+    width?: string | undefined;
+}
+/**
+ * Props for the `Tab.Panel` component.
+ */
+export interface TabPanelProps {
+    /**
+     * Zero-based index identifying which active tab this panel corresponds to.
+     */
+    index: number;
+    children: React.ReactNode;
+    className?: string | undefined;
+    id?: string | undefined;
+    "data-testid"?: string | undefined;
+}

package/table/table.d.ts

@@ -1,24 +1,53 @@
-export declare const Table: (({ children, ...props }: React.TableHTMLAttributes<HTMLTableElement>) => import("react/jsx-runtime").JSX.Element) & {
-    Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    Table: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+import type { TableBodyProps, TableCellProps, TableContainerProps, TableHeaderProps, TableHeadProps, TableRowProps, TableTableProps } from "./types";
+/**
+ * A styled HTML table with a scrollable container wrapper.
+ *
+ * Use `Table` when displaying structured tabular data. The default export
+ * wraps content in `Table.Container` and `Table.Table` automatically. For
+ * full layout control, compose the sub-components directly:
+ * - `Table.Container` — scrollable wrapper div
+ * - `Table.Table` — the bare `<table>` element
+ * - `Table.Head` — the `<thead>` section
+ * - `Table.Body` — the `<tbody>` section
+ * - `Table.Row` — a `<tr>` row within the body
+ * - `Table.Cell` — a `<td>` data cell
+ * - `Table.HeaderCell` — a `<th>` column header cell
+ * @keywords data, grid, rows, tabular
+ */
+export declare const Table: (({ children, ...props }: TableTableProps) => import("react/jsx-runtime").JSX.Element) & {
+    /** Scrollable wrapper div that contains a `Table.Table`. */
+    Container: {
+        ({ children, className, ...props }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** The bare `<table>` element. Use directly when you need to place the table inside a custom container. */
+    Table: {
+        ({ children, className, ...props }: TableTableProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    /** Renders the `<thead>` section of the table. */
     Head: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, ...props }: TableHeadProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders the `<tbody>` section of the table. */
     Body: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders a `<tr>` row within a `Table.Body`. */
     Row: {
-        ({ children, ...props }: React.HTMLAttributes<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableRowProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders a `<td>` data cell within a `Table.Row`. */
     Cell: {
-        ({ children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableCellProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    /** Renders a `<th>` header cell within a `Table.Head` row. */
     HeaderCell: {
-        ({ children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>): import("react/jsx-runtime").JSX.Element;
+        ({ children, className, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
 };

package/table/table.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{TableWrapper as l,TableComponent as n,TableBody as a,BodyRow as i,BodyCell as c,HeaderCell as d}from"./table.styles.js";const s=l=>{var{children:n}=l,a=e(l,["children"]);return r("thead",Object.assign({},a,{children:n}))};s.displayName="Table.Head";const t=l=>{var{children:n}=l,i=e(l,["children"]);return r(a,Object.assign({},i,{children:n}))};t.displayName="Table.Body";const h=l=>{var{children:n}=l,a=e(l,["children"]);return r(i,Object.assign({},a,{children:n}))};h.displayName="Table.Row";const o=l=>{var{children:n}=l,a=e(l,["children"]);return r(c,Object.assign({},a,{children:n}))};o.displayName="Table.Cell";const b=l=>{var{children:n}=l,a=e(l,["children"]);return r(d,Object.assign({},a,{children:n}))};b.displayName="Table.HeaderCell";const m=Object.assign((a=>{var{children:i}=a,c=e(a,["children"]);return r(l,{children:r(n,Object.assign({},c,{children:i}))})}),{Container:l,Table:n,Head:s,Body:t,Row:h,Cell:o,HeaderCell:b});export{m as Table};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import s from"clsx";import{tableBody as l,bodyRow as r,bodyCell as c,headerCell as n,tableWrapper as i,tableComponent as t}from"./table.styles.js";const d=s=>{var{children:l}=s,r=e(s,["children"]);return a("thead",Object.assign({},r,{children:l}))};d.displayName="Table.Head";const m=r=>{var{children:c,className:n}=r,i=e(r,["children","className"]);return a("tbody",Object.assign({className:s(l,n)},i,{children:c}))};m.displayName="Table.Body";const h=l=>{var{children:c,className:n}=l,i=e(l,["children","className"]);return a("tr",Object.assign({className:s(r,n)},i,{children:c}))};h.displayName="Table.Row";const N=l=>{var{children:r,className:n}=l,i=e(l,["children","className"]);return a("td",Object.assign({className:s(c,n)},i,{children:r}))};N.displayName="Table.Cell";const o=l=>{var{children:r,className:c}=l,i=e(l,["children","className"]);return a("th",Object.assign({className:s(n,c)},i,{children:r}))};o.displayName="Table.HeaderCell";const b=l=>{var{children:r,className:c}=l,n=e(l,["children","className"]);return a("div",Object.assign({className:s(i,c),"data-testid":"table-wrapper"},n,{children:r}))};b.displayName="Table.Container";const p=l=>{var{children:r,className:c}=l,n=e(l,["children","className"]);return a("table",Object.assign({className:s(t,c)},n,{children:r}))};p.displayName="Table.Table";const j=Object.assign((s=>{var{children:l}=s,r=e(s,["children"]);return a(b,{children:a(p,Object.assign({},r,{children:l}))})}),{Container:b,Table:p,Head:d,Body:m,Row:h,Cell:N,HeaderCell:o});export{j as Table};
 //# sourceMappingURL=table.js.map