@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/layout/Stack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.mjs","names":["gapMap","alignMap","justifyMap","Stack","orientationProp","rest","props","Component","as","orientation","resolveDeprecatedProp","direction","cn","inline","gap","align","justify","wrap","className"],"sources":["../../../src/components/layout/Stack.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Orientation } from '../../lib/types';\n\nconst gapMap = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n  xl: 'gap-6',\n} as const;\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n} as const;\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const;\n\n/**\n * The Stack's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface StackOwnProps {\n  /**\n   * Layout axis of the stack.\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /**\n   * @deprecated Use `orientation` (same values). Still works, warns once in development, and\n   * `orientation` wins when both are given.\n   */\n  direction?: Orientation;\n  /**\n   * Gap size between stack items.\n   * @default 'md'\n   */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Cross-axis alignment of items. */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Main-axis justification of items. */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  /** Whether items should wrap to the next line. */\n  wrap?: boolean;\n  /** Whether to use inline-flex instead of flex. */\n  inline?: boolean;\n}\n\n/**\n * Props of {@link Stack} rendered as `C` (default `'div'`). `StackProps` without a type argument\n * is the 0.4 name: the props of a Stack rendered as a `<div>`, including `ref`.\n */\nexport type StackProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, StackOwnProps>;\n\ntype StackImplProps = StackOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * A one-dimensional layout: items stacked vertically (default) or horizontally with a token gap.\n *\n * @example\n * <Stack orientation=\"horizontal\" gap=\"sm\" align=\"center\">\n *   <Avatar name=\"Ada\" />\n *   <Text>Ada Lovelace</Text>\n * </Stack>\n */\nexport const Stack: PolymorphicComponent<'div', StackOwnProps> = (props) => {\n  const {\n    as,\n    orientation: orientationProp,\n    direction,\n    gap = 'md',\n    align,\n    justify,\n    wrap,\n    inline,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as StackImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const orientation =\n    resolveDeprecatedProp('Stack', orientationProp, direction, 'direction', 'orientation') ??\n    'vertical';\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        inline ? 'inline-flex' : 'flex',\n        orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        gapMap[gap],\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        wrap && 'flex-wrap',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\nStack.displayName = 'Stack';\n"],"mappings":";;;;;;AAMA,IAAMA,IAAS;CACb,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEMC,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;AACX,GAEMC,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;AACV,GAqDaC,KAAqD,MAAU;CAC1E,IAAM,EACJ,OACA,aAAaC,GACb,cACA,SAAM,MACN,UACA,YACA,SACA,WACA,cACA,aACA,QACA,GAAGC,MACDC,GACEC,IAA+BC,KAAM,OACrCC,IACJC,EAAsB,SAASN,GAAiBO,GAAW,aAAa,aAAa,KACrF;CAEF,OACE,kBAACJ,GAAD;EACO;EACL,WAAWK,EACTC,IAAS,gBAAgB,QACzBJ,MAAgB,eAAe,aAAa,YAC5CT,EAAOc,IACPC,KAASd,EAASc,IAClBC,KAAWd,EAAWc,IACtBC,KAAQ,aACRC,CACF;EACA,GAAIb;EAEH;CACQ,CAAA;AAEf;AACA,EAAM,cAAc"}
+{"version":3,"file":"Stack.mjs","names":["gapMap","alignMap","justifyMap","Stack","orientationProp","rest","props","Component","as","orientation","resolveDeprecatedProp","direction","cn","stackClassNames","inline","gap","align","justify","wrap","className"],"sources":["../../../src/components/layout/Stack.tsx"],"sourcesContent":["import * as React from 'react';\nimport { stackClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Orientation } from '../../lib/types';\n\nconst gapMap = {\n  none: 'gap-0',\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-3',\n  lg: 'gap-4',\n  xl: 'gap-6',\n} as const;\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n} as const;\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const;\n\n/**\n * The Stack's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`).\n */\nexport interface StackOwnProps {\n  /**\n   * Layout axis of the stack.\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /**\n   * @deprecated Use `orientation` (same values). Still works, warns once in development, and\n   * `orientation` wins when both are given.\n   */\n  direction?: Orientation;\n  /**\n   * Gap size between stack items.\n   * @default 'md'\n   */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Cross-axis alignment of items. */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Main-axis justification of items. */\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n  /** Whether items should wrap to the next line. */\n  wrap?: boolean;\n  /** Whether to use inline-flex instead of flex. */\n  inline?: boolean;\n}\n\n/**\n * Props of {@link Stack} rendered as `C` (default `'div'`). `StackProps` without a type argument\n * is the 0.4 name: the props of a Stack rendered as a `<div>`, including `ref`.\n */\nexport type StackProps<C extends React.ElementType = 'div'> = PolymorphicProps<C, StackOwnProps>;\n\ntype StackImplProps = StackOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * A one-dimensional layout: items stacked vertically (default) or horizontally with a token gap.\n *\n * @example\n * <Stack orientation=\"horizontal\" gap=\"sm\" align=\"center\">\n *   <Avatar name=\"Ada\" />\n *   <Text>Ada Lovelace</Text>\n * </Stack>\n */\nexport const Stack: PolymorphicComponent<'div', StackOwnProps> = (props) => {\n  const {\n    as,\n    orientation: orientationProp,\n    direction,\n    gap = 'md',\n    align,\n    justify,\n    wrap,\n    inline,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props as StackImplProps;\n  const Component: React.ElementType = as ?? 'div';\n  const orientation =\n    resolveDeprecatedProp('Stack', orientationProp, direction, 'direction', 'orientation') ??\n    'vertical';\n\n  return (\n    <Component\n      ref={ref}\n      className={cn(\n        stackClassNames.root,\n        inline ? 'inline-flex' : 'flex',\n        orientation === 'horizontal' ? 'flex-row' : 'flex-col',\n        gapMap[gap],\n        align && alignMap[align],\n        justify && justifyMap[justify],\n        wrap && 'flex-wrap',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  );\n};\nStack.displayName = 'Stack';\n"],"mappings":";;;;;;;AAOA,IAAMA,IAAS;CACb,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEMC,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;AACX,GAEMC,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;AACV,GAqDaC,KAAqD,MAAU;CAC1E,IAAM,EACJ,OACA,aAAaC,GACb,cACA,SAAM,MACN,UACA,YACA,SACA,WACA,cACA,aACA,QACA,GAAGC,MACDC,GACEC,IAA+BC,KAAM,OACrCC,IACJC,EAAsB,SAASN,GAAiBO,GAAW,aAAa,aAAa,KACrF;CAEF,OACE,kBAACJ,GAAD;EACO;EACL,WAAWK,EACTC,EAAgB,MAChBC,IAAS,gBAAgB,QACzBL,MAAgB,eAAe,aAAa,YAC5CT,EAAOe,IACPC,KAASf,EAASe,IAClBC,KAAWf,EAAWe,IACtBC,KAAQ,aACRC,CACF;EACA,GAAId;EAEH;CACQ,CAAA;AAEf;AACA,EAAM,cAAc"}

package/dist/components/layout/TabList.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../hooks/useEventCallback.cjs"),o=require("../../hooks/useControllable.cjs"),s=require("../../hooks/useId.cjs"),c=require("../../hooks/useRovingTabIndex.cjs"),l=require("../../hooks/useMergedRefs.cjs"),u=require("../../lib/styles.cjs"),d=require("./disclosureIds.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");function m(e){r.warnOnce(`TabList:duplicate:${e}`,`TabList: several tabs share the value "${e}". Tab values must be unique within a TabList; tabs with the same value share one id and are selected (and tab stops) together.`)}function h(){let e={tab:new Map,panel:new Map},t=new Set,n=!1,r=()=>{t.forEach(e=>e())};return{register(t,n,i){let a=e[t],o=a.get(n)??[];return t===`tab`&&o.length>0&&m(n),a.set(n,[...o,i]),r(),()=>{let e=[...a.get(n)??[]],t=e.indexOf(i);t!==-1&&e.splice(t,1),e.length>0?a.set(n,e):a.delete(n),r()}},get:(t,r)=>n?e[t].get(r)?.[0]??null:void 0,markReady(){n||(n=!0,r())},subscribe(e){return t.add(e),()=>{t.delete(e)}}}}var g={register:()=>()=>{},get:()=>void 0,markReady:()=>{},subscribe:()=>()=>{}},_=f.createContext(null),v={orientation:`horizontal`,isSelected:()=>!1,select:()=>{},getTabIndex:()=>-1,getGeneratedId:(e,t)=>`wave-tablist-inert-${e}-${t}`,getStaticTabId:e=>`wave-tablist-inert-tab-${e}`,getStaticPanelId:()=>void 0,registry:g};function y(e){return f.useContext(_)||(r.reportMissingContext(e,`<TabList>`),v)}function b(e){let t=e[`aria-disabled`];return e.disabled===!0||t===!0||t===`true`}function x(e){return typeof e==`string`&&e!==``?e:null}function S(e,t){if(Array.isArray(e))return e.forEach(e=>S(e,t)),t;if(!f.isValidElement(e))return t;let{props:r}=e,i=n.getElementType(e,{suspend:!1}),a=typeof r.value==`string`?r.value:void 0;if(i===O){if(a!==void 0){t.firstEnabled===void 0&&!b(r)&&(t.firstEnabled=a);let e=x(r.id);e!==null&&t.tabIds.push([a,e])}return t}return i===k?(a!==void 0&&t.panels.push([a,x(r.id)]),t):i===D?t:S(r.children,t)}function C(e,t){if(Array.isArray(e))return e.some(e=>C(e,t));if(!f.isValidElement(e))return!1;let r=n.getElementType(e,{suspend:!1});return r===O?t===`tab`:r===k||r===A?t===`panel`:r!==D&&C(e.props.children,t)}function w(e){return C(e,`panel`)&&!C(e,`tab`)}var T=f.createContext(null),E=`TabList.Panel was rendered inside the role="tablist" element, where only tabs belong (axe aria-required-children). The TabList moves a Panel after the tablist when it is its child, or in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which renders after the tablist.`,D=({value:e,defaultValue:u,onValueChange:m,orientation:g,selectTabOnFocus:v=!0,selectedValue:y,defaultSelectedValue:b,onTabSelect:x,vertical:C,className:E,children:D,onKeyDown:O,onFocus:k,ref:A,...j})=>{let M=r.resolveDeprecatedProp(`TabList`,e,y,`selectedValue`,`value`),N=r.resolveDeprecatedProp(`TabList`,u,b,`defaultSelectedValue`,`defaultValue`),P=r.resolveDeprecatedProp(`TabList`,g,C===void 0?void 0:C?`vertical`:`horizontal`,`vertical`,`orientation`)??`horizontal`;x&&r.warnDeprecated(`TabList`,`onTabSelect`,`onValueChange`,"`onValueChange` is called only when the selected tab changes.");let[F,I,L]=o.useControllable(M,N??``,m),R=JSON.stringify(S(D,{tabIds:[],panels:[]})),z=f.useMemo(()=>{let e=JSON.parse(R);return{firstEnabled:e.firstEnabled,tabIds:new Map(e.tabIds),panels:new Map(e.panels)}},[R]),B=!L&&F===``,{containerProps:V,getTabIndex:H}=c.useRovingTabIndex({activeValue:B?z.firstEnabled??null:F,orientation:P,loop:!0,onFocusMove:v?e=>W(e):void 0}),U=f.useCallback(e=>B?H(e)===0:F===e,[B,H,F]),W=a.useEventCallback(e=>{x?.(e),U(e)||I(e)}),G=s.useId(`tablist`),[K]=f.useState(h);f.useLayoutEffect(()=>K.markReady(),[K]);let q=f.useMemo(()=>({orientation:P,isSelected:U,select:W,getTabIndex:H,getGeneratedId:(e,t)=>d.getPartId(G,e,t),getStaticTabId:e=>z.tabIds.get(e)??d.getPartId(G,`tab`,e),getStaticPanelId:e=>{let t=z.panels.get(e);if(t!==void 0)return t??d.getPartId(G,`panel`,e)},registry:K}),[P,U,W,H,G,z,K]),J=l.useMergedRefs(A,V.ref),Y=[],X=[];n.flattenChildren(D).forEach(({key:e,node:t})=>{let n=(0,p.jsx)(f.Fragment,{children:t},e);(w(t)?X:Y).push(n)});let Z=P===`vertical`;return(0,p.jsx)(_.Provider,{value:q,children:(0,p.jsxs)(`div`,{className:t.cn(Z&&`flex`),children:[(0,p.jsx)(`div`,{role:`tablist`,"aria-orientation":P,className:t.cn(Z?`flex w-40 flex-col border-e border-border`:`flex border-b border-border`,E),...j,"data-roving-container":``,onKeyDown:i.composeEventHandlers(O,V.onKeyDown),onFocus:i.composeEventHandlers(k,V.onFocus,{checkDefaultPrevented:!1}),ref:J,children:(0,p.jsx)(T.Provider,{value:`tabs`,children:Y})}),(0,p.jsx)(T.Provider,{value:`panels`,children:X})]})})};D.displayName=`TabList`;var O=({value:e,id:n,className:r,children:a,onClick:o,ref:s,...c})=>{let l=y(`TabList.Tab`),d=l.isSelected(e),m=l.orientation===`vertical`,h=b(c),{registry:g}=l,_=x(n)??l.getGeneratedId(`tab`,e);f.useLayoutEffect(()=>g.register(`tab`,e,_),[g,e,_]);let v=f.useSyncExternalStore(g.subscribe,()=>g.get(`panel`,e),()=>void 0),S=v===void 0?l.getStaticPanelId(e):v??void 0;return(0,p.jsx)(`button`,{type:`button`,role:`tab`,className:t.cn(`px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none`,m&&`text-start`,d?t.cn(`text-primary`,m?`border-s-2 border-s-primary`:`border-b-2 border-b-primary`):`text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground`,u.disabledStyles,u.focusRingInset,r),...c,id:_,"aria-selected":d,"aria-controls":d?S:void 0,tabIndex:l.getTabIndex(e),"data-roving-value":e,"data-selected":d?``:void 0,onClick:i.composeEventHandlers(o,()=>{h||l.select(e)}),ref:s,children:a})};O.displayName=`Tab`;var k=({value:e,id:n,children:i,className:a,ref:o,...s})=>{let c=y(`TabList.Panel`),l=f.useContext(T)===`tabs`;f.useEffect(()=>{l&&r.warnOnce(`TabList.Panel:inside-tablist`,E)},[l]);let{registry:d}=c,m=x(n)??c.getGeneratedId(`panel`,e);f.useLayoutEffect(()=>d.register(`panel`,e,m),[d,e,m]);let h=f.useSyncExternalStore(d.subscribe,()=>d.get(`tab`,e),()=>void 0);if(!c.isSelected(e))return null;let g=h===void 0?c.getStaticTabId(e):h??void 0;return(0,p.jsx)(`div`,{role:`tabpanel`,tabIndex:0,className:t.cn(`p-4`,u.focusRing,a),...s,id:m,"aria-labelledby":g,ref:o,children:i})};k.displayName=`TabPanel`;var A=({className:e,children:n,ref:r,...i})=>(0,p.jsx)(`div`,{ref:r,className:t.cn(`min-w-0 flex-1`,e),...i,children:n});A.displayName=`TabPanels`;var j=Object.assign(D,{Tab:O,Panel:k,Panels:A});exports.TabList=j,exports.TabListPanel=k,exports.TabListPanels=A,exports.TabListTab=O;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useEventCallback.cjs"),s=require("../../hooks/useControllable.cjs"),c=require("../../hooks/useId.cjs"),l=require("../../hooks/useRovingTabIndex.cjs"),u=require("../../hooks/useMergedRefs.cjs"),d=require("../../lib/styles.cjs"),f=require("./disclosureIds.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");function h(e){r.warnOnce(`TabList:duplicate:${e}`,`TabList: several tabs share the value "${e}". Tab values must be unique within a TabList; tabs with the same value share one id and are selected (and tab stops) together.`)}function g(){let e={tab:new Map,panel:new Map},t=new Set,n=!1,r=()=>{t.forEach(e=>e())};return{register(t,n,i){let a=e[t],o=a.get(n)??[];return t===`tab`&&o.length>0&&h(n),a.set(n,[...o,i]),r(),()=>{let e=[...a.get(n)??[]],t=e.indexOf(i);t!==-1&&e.splice(t,1),e.length>0?a.set(n,e):a.delete(n),r()}},get:(t,r)=>n?e[t].get(r)?.[0]??null:void 0,markReady(){n||(n=!0,r())},subscribe(e){return t.add(e),()=>{t.delete(e)}}}}var _={register:()=>()=>{},get:()=>void 0,markReady:()=>{},subscribe:()=>()=>{}},v=p.createContext(null),y={orientation:`horizontal`,isSelected:()=>!1,select:()=>{},getTabIndex:()=>-1,getGeneratedId:(e,t)=>`wave-tablist-inert-${e}-${t}`,getStaticTabId:e=>`wave-tablist-inert-tab-${e}`,getStaticPanelId:()=>void 0,registry:_};function b(e){return p.useContext(v)||(r.reportMissingContext(e,`<TabList>`),y)}function x(e){let t=e[`aria-disabled`];return e.disabled===!0||t===!0||t===`true`}function S(e){return typeof e==`string`&&e!==``?e:null}function C(e,t){if(Array.isArray(e))return e.forEach(e=>C(e,t)),t;if(!p.isValidElement(e))return t;let{props:r}=e,i=n.getElementType(e,{suspend:!1}),a=typeof r.value==`string`?r.value:void 0;if(i===k){if(a!==void 0){t.firstEnabled===void 0&&!x(r)&&(t.firstEnabled=a);let e=S(r.id);e!==null&&t.tabIds.push([a,e])}return t}return i===A?(a!==void 0&&t.panels.push([a,S(r.id)]),t):i===O?t:C(r.children,t)}function w(e,t){if(Array.isArray(e))return e.some(e=>w(e,t));if(!p.isValidElement(e))return!1;let r=n.getElementType(e,{suspend:!1});return r===k?t===`tab`:r===A||r===j?t===`panel`:r!==O&&w(e.props.children,t)}function T(e){return w(e,`panel`)&&!w(e,`tab`)}var E=p.createContext(null),D=`TabList.Panel was rendered inside the role="tablist" element, where only tabs belong (axe aria-required-children). The TabList moves a Panel after the tablist when it is its child, or in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which renders after the tablist.`,O=({value:e,defaultValue:d,onValueChange:h,orientation:_,selectTabOnFocus:y=!0,selectedValue:b,defaultSelectedValue:x,onTabSelect:S,vertical:w,className:D,children:O,onKeyDown:k,onFocus:A,ref:j,...M})=>{let N=r.resolveDeprecatedProp(`TabList`,e,b,`selectedValue`,`value`),P=r.resolveDeprecatedProp(`TabList`,d,x,`defaultSelectedValue`,`defaultValue`),F=r.resolveDeprecatedProp(`TabList`,_,w===void 0?void 0:w?`vertical`:`horizontal`,`vertical`,`orientation`)??`horizontal`;S&&r.warnDeprecated(`TabList`,`onTabSelect`,`onValueChange`,"`onValueChange` is called only when the selected tab changes.");let[I,L,R]=s.useControllable(N,P??``,h),z=JSON.stringify(C(O,{tabIds:[],panels:[]})),B=p.useMemo(()=>{let e=JSON.parse(z);return{firstEnabled:e.firstEnabled,tabIds:new Map(e.tabIds),panels:new Map(e.panels)}},[z]),V=!R&&I===``,{containerProps:H,getTabIndex:U}=l.useRovingTabIndex({activeValue:V?B.firstEnabled??null:I,orientation:F,loop:!0,onFocusMove:y?e=>G(e):void 0}),W=p.useCallback(e=>V?U(e)===0:I===e,[V,U,I]),G=o.useEventCallback(e=>{S?.(e),W(e)||L(e)}),K=c.useId(`tablist`),[q]=p.useState(g);p.useLayoutEffect(()=>q.markReady(),[q]);let J=p.useMemo(()=>({orientation:F,isSelected:W,select:G,getTabIndex:U,getGeneratedId:(e,t)=>f.getPartId(K,e,t),getStaticTabId:e=>B.tabIds.get(e)??f.getPartId(K,`tab`,e),getStaticPanelId:e=>{let t=B.panels.get(e);if(t!==void 0)return t??f.getPartId(K,`panel`,e)},registry:q}),[F,W,G,U,K,B,q]),Y=u.useMergedRefs(j,H.ref),X=[],Z=[];n.flattenChildren(O).forEach(({key:e,node:t})=>{let n=(0,m.jsx)(p.Fragment,{children:t},e);(T(t)?Z:X).push(n)});let Q=F===`vertical`;return(0,m.jsx)(v.Provider,{value:J,children:(0,m.jsxs)(`div`,{className:t.cn(Q&&`flex`),children:[(0,m.jsx)(`div`,{role:`tablist`,"aria-orientation":F,className:t.cn(a.tabListClassNames.root,Q?`flex w-40 flex-col border-e border-border`:`flex border-b border-border`,D),...M,"data-roving-container":``,onKeyDown:i.composeEventHandlers(k,H.onKeyDown),onFocus:i.composeEventHandlers(A,H.onFocus,{checkDefaultPrevented:!1}),ref:Y,children:(0,m.jsx)(E.Provider,{value:`tabs`,children:X})}),(0,m.jsx)(E.Provider,{value:`panels`,children:Z})]})})};O.displayName=`TabList`;var k=({value:e,id:n,className:r,children:o,onClick:s,ref:c,...l})=>{let u=b(`TabList.Tab`),f=u.isSelected(e),h=u.orientation===`vertical`,g=x(l),{registry:_}=u,v=S(n)??u.getGeneratedId(`tab`,e);p.useLayoutEffect(()=>_.register(`tab`,e,v),[_,e,v]);let y=p.useSyncExternalStore(_.subscribe,()=>_.get(`panel`,e),()=>void 0),C=y===void 0?u.getStaticPanelId(e):y??void 0;return(0,m.jsx)(`button`,{type:`button`,role:`tab`,className:t.cn(a.tabListTabClassNames.root,`px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none`,h&&`text-start`,f?t.cn(`text-primary`,h?`border-s-2 border-s-primary`:`border-b-2 border-b-primary`):`text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground`,d.disabledStyles,d.focusRingInset,r),...l,id:v,"aria-selected":f,"aria-controls":f?C:void 0,tabIndex:u.getTabIndex(e),"data-roving-value":e,"data-selected":f?``:void 0,onClick:i.composeEventHandlers(s,()=>{g||u.select(e)}),ref:c,children:o})};k.displayName=`Tab`;var A=({value:e,id:n,children:i,className:o,ref:s,...c})=>{let l=b(`TabList.Panel`),u=p.useContext(E)===`tabs`;p.useEffect(()=>{u&&r.warnOnce(`TabList.Panel:inside-tablist`,D)},[u]);let{registry:f}=l,h=S(n)??l.getGeneratedId(`panel`,e);p.useLayoutEffect(()=>f.register(`panel`,e,h),[f,e,h]);let g=p.useSyncExternalStore(f.subscribe,()=>f.get(`tab`,e),()=>void 0);if(!l.isSelected(e))return null;let _=g===void 0?l.getStaticTabId(e):g??void 0;return(0,m.jsx)(`div`,{role:`tabpanel`,tabIndex:0,className:t.cn(a.tabListPanelClassNames.root,`p-4`,d.focusRing,o),...c,id:h,"aria-labelledby":_,ref:s,children:i})};A.displayName=`TabPanel`;var j=({className:e,children:n,ref:r,...i})=>(0,m.jsx)(`div`,{ref:r,className:t.cn(a.tabListPanelsClassNames.root,`min-w-0 flex-1`,e),...i,children:n});j.displayName=`TabPanels`;var M=Object.assign(O,{Tab:k,Panel:A,Panels:j});exports.TabList=M,exports.TabListPanel=A,exports.TabListPanels=j,exports.TabListTab=k;
 //# sourceMappingURL=TabList.cjs.map

package/dist/components/layout/TabList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.cjs","names":["React","getElementType","resolveDeprecatedProp","useControllable","useRovingTabIndex","useEventCallback","useId","getPartId","useMergedRefs","cn","composeEventHandlers","disabledStyles","focusRingInset","focusRing","require_runtime","require_cn","require_children","require_dev","require_composeEventHandlers","require_useEventCallback","require_useControllable","require_useId","require_useRovingTabIndex","require_useMergedRefs","require_styles","require_disclosureIds","react","react_jsx_runtime","warnDuplicateTabValue","value","createRegistry","entries","listeners","ready","emit","listener","map","part","ids","id","index","INERT_REGISTRY","TabListContext","INERT_CONTEXT","useTabListContext","component","isUnavailable","ariaDisabled","props","consumerId","collectStructure","node","child","into","type","Tab","TabPanel","TabListRoot","containsPart","TabPanels","rendersAfterTablist","TabListAreaContext","PANEL_IN_TABLIST_MESSAGE","valueProp","defaultValueProp","orientationProp","rest","selectedValue","defaultValue","defaultSelectedValue","orientation","vertical","onTabSelect","selected","setSelected","isControlled","onValueChange","structureKey","children","structure","parsed","derivesSelection","selectTabOnFocus","select","next","isSelected","getTabIndex","tabValue","baseId","registry","context","itemValue","panel","mergedRef","ref","containerProps","tabs","panels","keyed","key","isVertical","className","onKeyDown","onFocus","idProp","ctx","unavailable","mountedPanelId","panelId","onClick","insideTablist","mountedTabId","tabId","TabList"],"sources":["../../../src/components/layout/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, getElementType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport {\n  reportMissingContext,\n  resolveDeprecatedProp,\n  warnDeprecated,\n  warnOnce,\n} from '../../lib/dev';\nimport { disabledStyles, focusRing, focusRingInset } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { getPartId } from './disclosureIds';\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ntype TabListPart = 'tab' | 'panel';\n\n/**\n * The ids of the mounted Tabs and Panels by value. A Tab references a panel only while one with\n * its value is mounted (a TabList used as a filter bar has none), and each side references the\n * other's actual id, a consumer `id` included. Read with `useSyncExternalStore`.\n *\n * Before the TabList has mounted (server HTML, hydration and the first client render) the\n * registry is not ready and the static structure of the children stands in for it; once it is\n * ready, it alone decides, so a Panel that is in the element tree but never mounts (inside a\n * wrapper that renders nothing) is not referenced.\n */\ninterface TabListRegistry {\n  /** Registers a mounted Tab or Panel; returns the unregister function. */\n  register: (part: TabListPart, value: string, id: string) => () => void;\n  /**\n   * Id of the first mounted Tab or Panel with this value, `null` when none is mounted, or\n   * `undefined` while the registry is not ready (use the static structure then).\n   */\n  get: (part: TabListPart, value: string) => string | null | undefined;\n  /** Called by the TabList once it (and so every Tab and Panel mounted with it) has mounted. */\n  markReady: () => void;\n  subscribe: (listener: () => void) => () => void;\n}\n\n/** Tabs that share a value share one id, and are selected and tab stops together. */\nfunction warnDuplicateTabValue(value: string): void {\n  warnOnce(\n    `TabList:duplicate:${value}`,\n    `TabList: several tabs share the value \"${value}\". Tab values must be unique within a ` +\n      'TabList; tabs with the same value share one id and are selected (and tab stops) together.',\n  );\n}\n\nfunction createRegistry(): TabListRegistry {\n  const entries: Record<TabListPart, Map<string, string[]>> = { tab: new Map(), panel: new Map() };\n  const listeners = new Set<() => void>();\n  let ready = false;\n  const emit = () => {\n    listeners.forEach((listener) => listener());\n  };\n  return {\n    register(part, value, id) {\n      const map = entries[part];\n      const ids = map.get(value) ?? [];\n      // Called from the part's layout effect (C-DEV). Two Panels may share a value (the Tab links\n      // to the first mounted one); two Tabs may not.\n      if (part === 'tab' && ids.length > 0) warnDuplicateTabValue(value);\n      map.set(value, [...ids, id]);\n      emit();\n      return () => {\n        const ids = [...(map.get(value) ?? [])];\n        const index = ids.indexOf(id);\n        if (index !== -1) ids.splice(index, 1);\n        if (ids.length > 0) map.set(value, ids);\n        else map.delete(value);\n        emit();\n      };\n    },\n    get: (part, value) => (ready ? (entries[part].get(value)?.[0] ?? null) : undefined),\n    markReady() {\n      if (ready) return;\n      ready = true;\n      emit();\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n}\n\nconst INERT_REGISTRY: TabListRegistry = {\n  register: () => () => {},\n  get: () => undefined,\n  markReady: () => {},\n  subscribe: () => () => {},\n};\n\n/**\n * What the TabList's children show before anything mounts (server HTML and the first render):\n * found in the element tree through Fragments and the `children` of wrapper elements, but not\n * inside a component that renders a Tab or Panel itself (the registry covers those once mounted).\n */\ninterface TabListStructure {\n  /** Value of the first Tab without `disabled`/`aria-disabled`: the uncontrolled default. */\n  firstEnabled?: string;\n  /** Consumer `id`s of Tabs, by value. */\n  tabIds: Array<[string, string]>;\n  /** Values of the Panels, each with its consumer `id` or `null`. */\n  panels: Array<[string, string | null]>;\n}\n\ninterface TabListContextValue {\n  orientation: Orientation;\n  /** Whether the tab with this value is the selected one (explicit value, else the tab stop). */\n  isSelected: (value: string) => boolean;\n  /**\n   * Activates a tab: a click (Enter and Space click the tab button), or with automatic activation\n   * focus moved by the keys.\n   */\n  select: (value: string) => void;\n  getTabIndex: (value: string) => 0 | -1;\n  /** The generated id of a Tab or Panel (used when it has no consumer `id`). */\n  getGeneratedId: (part: TabListPart, value: string) => string;\n  /**\n   * Id of the Tab with this value before the TabList mounts: its consumer `id`, else the\n   * generated one.\n   */\n  getStaticTabId: (value: string) => string;\n  /**\n   * Id of the Panel with this value before the TabList mounts, or `undefined` when the children\n   * have none.\n   */\n  getStaticPanelId: (value: string) => string | undefined;\n  registry: TabListRegistry;\n}\n\nconst TabListContext = React.createContext<TabListContextValue | null>(null);\n\nconst INERT_CONTEXT: TabListContextValue = {\n  orientation: 'horizontal',\n  isSelected: () => false,\n  select: () => {},\n  getTabIndex: () => -1,\n  getGeneratedId: (part, value) => `wave-tablist-inert-${part}-${value}`,\n  getStaticTabId: (value) => `wave-tablist-inert-tab-${value}`,\n  getStaticPanelId: () => undefined,\n  registry: INERT_REGISTRY,\n};\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nfunction useTabListContext(component: string): TabListContextValue {\n  const context = React.useContext(TabListContext);\n  if (context) return context;\n  reportMissingContext(component, '<TabList>');\n  return INERT_CONTEXT;\n}\n\ninterface StructureProps {\n  value?: unknown;\n  id?: unknown;\n  disabled?: unknown;\n  'aria-disabled'?: unknown;\n  children?: unknown;\n}\n\n/** Whether a Tab's props make it unavailable (it cannot be selected and is skipped by keys). */\nfunction isUnavailable(props: StructureProps): boolean {\n  const ariaDisabled = props['aria-disabled'];\n  return props.disabled === true || ariaDisabled === true || ariaDisabled === 'true';\n}\n\n/** A consumer `id` that replaces the generated one: a non-empty string (`''` counts as none). */\nfunction consumerId(id: unknown): string | null {\n  return typeof id === 'string' && id !== '' ? id : null;\n}\n\n/**\n * Walks the element tree of the TabList's children (see {@link TabListStructure}). Parts are\n * identified through their element type, so parts written in a Server Component (lazy\n * references) count too. A `React.lazy` still loading (inside the consumer's own `<Suspense>`,\n * such as code-split panels in `TabList.Panels`) is no part and never suspends the TabList: its\n * children are walked instead. Runs during render only.\n */\nfunction collectStructure(node: unknown, into: TabListStructure): TabListStructure {\n  if (Array.isArray(node)) {\n    node.forEach((child) => collectStructure(child, into));\n    return into;\n  }\n  if (!React.isValidElement<StructureProps>(node)) return into;\n  const { props } = node;\n  const type = getElementType(node, { suspend: false });\n  const value = typeof props.value === 'string' ? props.value : undefined;\n  if (type === Tab) {\n    if (value !== undefined) {\n      if (into.firstEnabled === undefined && !isUnavailable(props)) into.firstEnabled = value;\n      const id = consumerId(props.id);\n      if (id !== null) into.tabIds.push([value, id]);\n    }\n    return into;\n  }\n  if (type === TabPanel) {\n    if (value !== undefined) into.panels.push([value, consumerId(props.id)]);\n    return into;\n  }\n  if (type === TabListRoot) return into;\n  return collectStructure(props.children, into);\n}\n\n/**\n * Whether an element tree shows a Tab, or a Panel (`TabList.Panel` or `TabList.Panels`), found as\n * in {@link collectStructure}: through Fragments and the `children` of wrapper elements, not inside\n * a nested TabList or a component that renders the part itself.\n */\nfunction containsPart(node: unknown, part: TabListPart): boolean {\n  if (Array.isArray(node)) return node.some((child) => containsPart(child, part));\n  if (!React.isValidElement<StructureProps>(node)) return false;\n  const type = getElementType(node, { suspend: false });\n  if (type === Tab) return part === 'tab';\n  if (type === TabPanel || type === TabPanels) return part === 'panel';\n  if (type === TabListRoot) return false;\n  return containsPart(node.props.children, part);\n}\n\n/**\n * Whether a child of the TabList renders after the tablist: a Panel, `TabList.Panels`, or a\n * wrapper (an element, `Suspense`, an error boundary) that holds panels and no tab.\n */\nfunction rendersAfterTablist(child: React.ReactNode): boolean {\n  return containsPart(child, 'panel') && !containsPart(child, 'tab');\n}\n\n/**\n * Where the TabList renders its children: inside the `role=\"tablist\"` element (`'tabs'`) or after\n * it (`'panels'`). A Panel that ends up inside the tablist warns in development.\n */\nconst TabListAreaContext = React.createContext<'tabs' | 'panels' | null>(null);\n\nconst PANEL_IN_TABLIST_MESSAGE =\n  'TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe ' +\n  'aria-required-children). The TabList moves a Panel after the tablist when it is its child, or ' +\n  'in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or ' +\n  \"separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which \" +\n  'renders after the tablist.';\n\n/* ------------------------------------------------------------------ */\n/*  TabList                                                            */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabList component. */\nexport interface TabListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  /**\n   * Controlled value of the selected tab (`''`: no tab selected). A controlled value that becomes\n   * `undefined` also selects no tab: the TabList stays controlled.\n   */\n  value?: string;\n  /**\n   * Selected tab for uncontrolled usage. When it is omitted (or `''`), the first enabled tab\n   * written in the TabList's children is selected, from the first render (and in server-rendered\n   * HTML) on. Tabs written directly in the children, in Fragments or in wrapper elements that\n   * pass them as `children` (such as a Tooltip) count; a tab rendered by a custom component that\n   * renders `TabList.Tab` itself does not, even when it comes first in the DOM, so that server\n   * and client pick the same tab. When every tab comes from such a component, the first enabled\n   * tab in the DOM is selected once the tabs mount. To select a tab that a custom component\n   * renders, pass `defaultValue`.\n   */\n  defaultValue?: string;\n  /** Called with the new value when the selected tab changes (not when it is activated again). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Layout and arrow-key axis: `'horizontal'` (Left/Right, mirrored in RTL) or `'vertical'`\n   * (Up/Down).\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether moving focus with the arrow keys, Home and End also selects the tab (automatic\n   * activation, as in 0.5). With `false`, the keys only move focus and Enter, Space or a click\n   * selects the focused tab (manual activation, for panels that are slow to show). Fluent's\n   * default is `false`.\n   * @default true\n   */\n  selectTabOnFocus?: boolean;\n  /** @deprecated Use `value`. */\n  selectedValue?: string;\n  /** @deprecated Use `defaultValue`. */\n  defaultSelectedValue?: string;\n  /**\n   * @deprecated Use `onValueChange`. Unlike `onValueChange`, it is called on every activation,\n   * including a click on the tab that is already selected.\n   */\n  onTabSelect?: (value: string) => void;\n  /** @deprecated Use `orientation=\"vertical\"`. */\n  vertical?: boolean;\n  /** Ref to the `role=\"tablist\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst TabListRoot = ({\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  onValueChange,\n  orientation: orientationProp,\n  selectTabOnFocus = true,\n  selectedValue,\n  defaultSelectedValue,\n  onTabSelect,\n  vertical,\n  className,\n  children,\n  onKeyDown,\n  onFocus,\n  ref,\n  ...rest\n}: TabListProps) => {\n  const value = resolveDeprecatedProp(\n    'TabList',\n    valueProp,\n    selectedValue,\n    'selectedValue',\n    'value',\n  );\n  const defaultValue = resolveDeprecatedProp(\n    'TabList',\n    defaultValueProp,\n    defaultSelectedValue,\n    'defaultSelectedValue',\n    'defaultValue',\n  );\n  const orientation =\n    resolveDeprecatedProp<Orientation>(\n      'TabList',\n      orientationProp,\n      vertical === undefined ? undefined : vertical ? 'vertical' : 'horizontal',\n      'vertical',\n      'orientation',\n    ) ?? 'horizontal';\n  if (onTabSelect) {\n    warnDeprecated(\n      'TabList',\n      'onTabSelect',\n      'onValueChange',\n      '`onValueChange` is called only when the selected tab changes.',\n    );\n  }\n\n  // The sticky mode: a controlled value that becomes `undefined` clears the selection (`''`).\n  const [selected, setSelected, isControlled] = useControllable(\n    value,\n    defaultValue ?? '',\n    onValueChange,\n  );\n\n  // The children are a new element tree on every parent render: memoized by content, so the\n  // context value stays stable while the tabs and panels stay the same.\n  const structureKey = JSON.stringify(collectStructure(children, { tabIds: [], panels: [] }));\n  const structure = React.useMemo(() => {\n    const parsed = JSON.parse(structureKey) as TabListStructure;\n    return {\n      firstEnabled: parsed.firstEnabled,\n      tabIds: new Map(parsed.tabIds),\n      panels: new Map(parsed.panels),\n    };\n  }, [structureKey]);\n\n  // Uncontrolled without a selection: the first enabled tab is selected. It is the tab stop the\n  // roving store resolves from `activeValue` (the first enabled tab of the children, replaced by\n  // the first enabled tab in the DOM once the store sees it disabled), so the selection is\n  // derived during render, present from the first render on, and follows tabs that disable\n  // themselves.\n  const derivesSelection = !isControlled && selected === '';\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: derivesSelection ? (structure.firstEnabled ?? null) : selected,\n    orientation,\n    loop: true,\n    // Automatic activation (APG Tabs): moving focus selects the tab. With manual activation the\n    // keys only move focus; the tab stop stays on the selected tab (`tabStop: 'active'`), and Enter\n    // or Space selects the focused tab through its native click.\n    onFocusMove: selectTabOnFocus ? (next) => select(next) : undefined,\n  });\n\n  const isSelected = React.useCallback(\n    (tabValue: string) => (derivesSelection ? getTabIndex(tabValue) === 0 : selected === tabValue),\n    [derivesSelection, getTabIndex, selected],\n  );\n\n  const select = useEventCallback((next: string) => {\n    onTabSelect?.(next);\n    if (!isSelected(next)) setSelected(next);\n  });\n\n  const baseId = useId('tablist');\n  const [registry] = React.useState(createRegistry);\n  // Runs after the layout effects of the Tabs and Panels mounted with the TabList, which have\n  // registered by then: from here on the registry, not the static structure, decides the links.\n  React.useLayoutEffect(() => registry.markReady(), [registry]);\n  const context = React.useMemo<TabListContextValue>(\n    () => ({\n      orientation,\n      isSelected,\n      select,\n      getTabIndex,\n      getGeneratedId: (part, itemValue) => getPartId(baseId, part, itemValue),\n      getStaticTabId: (tabValue) =>\n        structure.tabIds.get(tabValue) ?? getPartId(baseId, 'tab', tabValue),\n      getStaticPanelId: (tabValue) => {\n        const panel = structure.panels.get(tabValue);\n        if (panel === undefined) return undefined;\n        return panel ?? getPartId(baseId, 'panel', tabValue);\n      },\n      registry,\n    }),\n    [orientation, isSelected, select, getTabIndex, baseId, structure, registry],\n  );\n\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref);\n\n  const tabs: React.ReactNode[] = [];\n  const panels: React.ReactNode[] = [];\n  flattenChildren(children).forEach(({ key, node: child }) => {\n    const keyed = <React.Fragment key={key}>{child}</React.Fragment>;\n    (rendersAfterTablist(child) ? panels : tabs).push(keyed);\n  });\n\n  const isVertical = orientation === 'vertical';\n  return (\n    <TabListContext.Provider value={context}>\n      <div className={cn(isVertical && 'flex')}>\n        <div\n          role=\"tablist\"\n          aria-orientation={orientation}\n          className={cn(\n            isVertical\n              ? 'flex w-40 flex-col border-e border-border'\n              : 'flex border-b border-border',\n            className,\n          )}\n          {...rest}\n          data-roving-container=\"\"\n          onKeyDown={composeEventHandlers(onKeyDown, containerProps.onKeyDown)}\n          onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n            checkDefaultPrevented: false,\n          })}\n          ref={mergedRef}\n        >\n          <TabListAreaContext.Provider value=\"tabs\">{tabs}</TabListAreaContext.Provider>\n        </div>\n        <TabListAreaContext.Provider value=\"panels\">{panels}</TabListAreaContext.Provider>\n      </div>\n    </TabListContext.Provider>\n  );\n};\nTabListRoot.displayName = 'TabList';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Tab                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the Tab sub-component. */\nexport interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Unique value identifying this tab (and its panel). */\n  value: string;\n  /** Ref to the tab `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * A tab button. `onClick` runs before the selection (call `event.preventDefault()` to keep the\n * current tab). A `disabled` (or `aria-disabled=\"true\"`) tab is skipped by the keyboard and cannot\n * be selected. A non-empty `id` replaces the generated one (its panel's `aria-labelledby` follows\n * it). The selected tab references its panel with `aria-controls` only while a `TabList.Panel`\n * with its value is mounted.\n */\nconst Tab = ({ value, id: idProp, className, children, onClick, ref, ...rest }: TabProps) => {\n  const ctx = useTabListContext('TabList.Tab');\n  const selected = ctx.isSelected(value);\n  const isVertical = ctx.orientation === 'vertical';\n  const unavailable = isUnavailable(rest);\n\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('tab', value);\n  React.useLayoutEffect(() => registry.register('tab', value, id), [registry, value, id]);\n  const mountedPanelId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('panel', value),\n    () => undefined,\n  );\n  // Before the TabList mounts the static structure stands in; after that only a mounted panel is\n  // referenced (`null`: none).\n  const panelId =\n    mountedPanelId === undefined ? ctx.getStaticPanelId(value) : (mountedPanelId ?? undefined);\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      className={cn(\n        'px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none',\n        isVertical && 'text-start',\n        selected\n          ? cn(\n              'text-primary',\n              isVertical ? 'border-s-2 border-s-primary' : 'border-b-2 border-b-primary',\n            )\n          : 'text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground',\n        disabledStyles,\n        focusRingInset,\n        className,\n      )}\n      {...rest}\n      id={id}\n      aria-selected={selected}\n      aria-controls={selected ? panelId : undefined}\n      tabIndex={ctx.getTabIndex(value)}\n      data-roving-value={value}\n      data-selected={selected ? '' : undefined}\n      onClick={composeEventHandlers(onClick, () => {\n        if (!unavailable) ctx.select(value);\n      })}\n      ref={ref}\n    >\n      {children}\n    </button>\n  );\n};\nTab.displayName = 'Tab';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panel                                                      */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanel sub-component. */\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Value of the Tab that shows this panel. */\n  value: string;\n  /** Ref to the `role=\"tabpanel\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * The content of one tab, rendered only while its tab is selected and labelled by it (while a Tab\n * with its value is mounted). A non-empty `id` replaces the generated one (the tab's\n * `aria-controls` follows it).\n */\nconst TabPanel = ({ value, id: idProp, children, className, ref, ...rest }: TabPanelProps) => {\n  const ctx = useTabListContext('TabList.Panel');\n  const insideTablist = React.useContext(TabListAreaContext) === 'tabs';\n  React.useEffect(() => {\n    if (insideTablist) warnOnce('TabList.Panel:inside-tablist', PANEL_IN_TABLIST_MESSAGE);\n  }, [insideTablist]);\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('panel', value);\n  // Registered while mounted, also while hidden: the tab that selects it links to it.\n  React.useLayoutEffect(() => registry.register('panel', value, id), [registry, value, id]);\n  const mountedTabId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('tab', value),\n    () => undefined,\n  );\n  if (!ctx.isSelected(value)) return null;\n  // As for the Tab's aria-controls: the static structure only before the TabList mounts.\n  const tabId =\n    mountedTabId === undefined ? ctx.getStaticTabId(value) : (mountedTabId ?? undefined);\n  return (\n    <div\n      role=\"tabpanel\"\n      tabIndex={0}\n      className={cn('p-4', focusRing, className)}\n      {...rest}\n      id={id}\n      aria-labelledby={tabId}\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n};\nTabPanel.displayName = 'TabPanel';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panels                                                     */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanels sub-component. */\nexport interface TabPanelsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the container `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Optional container for the panels, rendered after the tablist. Use it to style the panel area,\n * and for panels that components render themselves: the TabList finds a Panel in its children, in\n * a Fragment or in a wrapper that holds no Tab, but a component that renders a Panel itself\n * renders inside the tablist unless it is placed in `TabList.Panels`.\n */\nconst TabPanels = ({ className, children, ref, ...rest }: TabPanelsProps) => (\n  <div ref={ref} className={cn('min-w-0 flex-1', className)} {...rest}>\n    {children}\n  </div>\n);\nTabPanels.displayName = 'TabPanels';\n\n/* ------------------------------------------------------------------ */\n/*  Export                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * A set of tabs with their panels (WAI-ARIA Tabs pattern): the arrow keys (Left/Right, mirrored\n * in RTL; Up/Down when vertical), Home and End move focus and select (automatic activation); with\n * `selectTabOnFocus={false}` they only move focus, and Enter, Space or a click selects the focused\n * tab (manual activation). The selected tab is the only tab stop; disabled tabs are skipped. Every\n * tab needs a `value` that is unique within the TabList (a development warning names a value that\n * several tabs share).\n *\n * Tabs register through context and are found in DOM order, so they may be wrapped (a Fragment,\n * a Tooltip). The children render inside the `role=\"tablist\"` element, except panels, which render\n * after it: a `TabList.Panel` or `TabList.Panels` child, or a wrapper (an element, `Suspense`, an\n * error boundary) that holds panels and no Tab. A Panel that a component renders itself cannot be\n * seen from the children: put that component inside `TabList.Panels` (a development warning names\n * a Panel that ends up inside the tablist). Content that is not a tab, such as a button next to\n * the tabs, does not belong in a tablist either: render it outside the TabList.\n *\n * Sub-components are also exported under flat names (`TabListTab`, `TabListPanel`,\n * `TabListPanels`) for React Server Components, which cannot use the dotted form.\n */\nexport const TabList = /* @__PURE__ */ Object.assign(TabListRoot, {\n  Tab,\n  Panel: TabPanel,\n  Panels: TabPanels,\n});\n\nexport { Tab as TabListTab, TabPanel as TabListPanel, TabPanels as TabListPanels };\n"],"mappings":"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"}
+{"version":3,"file":"TabList.cjs","names":["React","getElementType","resolveDeprecatedProp","useControllable","useRovingTabIndex","useEventCallback","useId","getPartId","useMergedRefs","cn","tabListClassNames","composeEventHandlers","tabListTabClassNames","disabledStyles","focusRingInset","tabListPanelClassNames","focusRing","tabListPanelsClassNames","require_runtime","require_cn","require_children","require_dev","require_composeEventHandlers","require_classNames","require_useEventCallback","require_useControllable","require_useId","require_useRovingTabIndex","require_useMergedRefs","require_styles","require_disclosureIds","react","react_jsx_runtime","warnDuplicateTabValue","value","createRegistry","entries","listeners","ready","emit","listener","map","part","ids","id","index","INERT_REGISTRY","TabListContext","INERT_CONTEXT","useTabListContext","component","isUnavailable","ariaDisabled","props","consumerId","collectStructure","node","child","into","type","Tab","TabPanel","TabListRoot","containsPart","TabPanels","rendersAfterTablist","TabListAreaContext","PANEL_IN_TABLIST_MESSAGE","valueProp","defaultValueProp","orientationProp","rest","selectedValue","defaultValue","defaultSelectedValue","orientation","vertical","onTabSelect","selected","setSelected","isControlled","onValueChange","structureKey","children","structure","parsed","derivesSelection","selectTabOnFocus","select","next","isSelected","getTabIndex","tabValue","baseId","registry","context","itemValue","panel","mergedRef","ref","containerProps","tabs","panels","keyed","key","isVertical","className","onKeyDown","onFocus","idProp","ctx","unavailable","mountedPanelId","panelId","onClick","insideTablist","mountedTabId","tabId","TabList"],"sources":["../../../src/components/layout/TabList.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  tabListClassNames,\n  tabListPanelClassNames,\n  tabListPanelsClassNames,\n  tabListTabClassNames,\n} from '../../lib/classNames';\nimport { flattenChildren, getElementType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport {\n  reportMissingContext,\n  resolveDeprecatedProp,\n  warnDeprecated,\n  warnOnce,\n} from '../../lib/dev';\nimport { disabledStyles, focusRing, focusRingInset } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { getPartId } from './disclosureIds';\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ntype TabListPart = 'tab' | 'panel';\n\n/**\n * The ids of the mounted Tabs and Panels by value. A Tab references a panel only while one with\n * its value is mounted (a TabList used as a filter bar has none), and each side references the\n * other's actual id, a consumer `id` included. Read with `useSyncExternalStore`.\n *\n * Before the TabList has mounted (server HTML, hydration and the first client render) the\n * registry is not ready and the static structure of the children stands in for it; once it is\n * ready, it alone decides, so a Panel that is in the element tree but never mounts (inside a\n * wrapper that renders nothing) is not referenced.\n */\ninterface TabListRegistry {\n  /** Registers a mounted Tab or Panel; returns the unregister function. */\n  register: (part: TabListPart, value: string, id: string) => () => void;\n  /**\n   * Id of the first mounted Tab or Panel with this value, `null` when none is mounted, or\n   * `undefined` while the registry is not ready (use the static structure then).\n   */\n  get: (part: TabListPart, value: string) => string | null | undefined;\n  /** Called by the TabList once it (and so every Tab and Panel mounted with it) has mounted. */\n  markReady: () => void;\n  subscribe: (listener: () => void) => () => void;\n}\n\n/** Tabs that share a value share one id, and are selected and tab stops together. */\nfunction warnDuplicateTabValue(value: string): void {\n  warnOnce(\n    `TabList:duplicate:${value}`,\n    `TabList: several tabs share the value \"${value}\". Tab values must be unique within a ` +\n      'TabList; tabs with the same value share one id and are selected (and tab stops) together.',\n  );\n}\n\nfunction createRegistry(): TabListRegistry {\n  const entries: Record<TabListPart, Map<string, string[]>> = { tab: new Map(), panel: new Map() };\n  const listeners = new Set<() => void>();\n  let ready = false;\n  const emit = () => {\n    listeners.forEach((listener) => listener());\n  };\n  return {\n    register(part, value, id) {\n      const map = entries[part];\n      const ids = map.get(value) ?? [];\n      // Called from the part's layout effect (C-DEV). Two Panels may share a value (the Tab links\n      // to the first mounted one); two Tabs may not.\n      if (part === 'tab' && ids.length > 0) warnDuplicateTabValue(value);\n      map.set(value, [...ids, id]);\n      emit();\n      return () => {\n        const ids = [...(map.get(value) ?? [])];\n        const index = ids.indexOf(id);\n        if (index !== -1) ids.splice(index, 1);\n        if (ids.length > 0) map.set(value, ids);\n        else map.delete(value);\n        emit();\n      };\n    },\n    get: (part, value) => (ready ? (entries[part].get(value)?.[0] ?? null) : undefined),\n    markReady() {\n      if (ready) return;\n      ready = true;\n      emit();\n    },\n    subscribe(listener) {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n  };\n}\n\nconst INERT_REGISTRY: TabListRegistry = {\n  register: () => () => {},\n  get: () => undefined,\n  markReady: () => {},\n  subscribe: () => () => {},\n};\n\n/**\n * What the TabList's children show before anything mounts (server HTML and the first render):\n * found in the element tree through Fragments and the `children` of wrapper elements, but not\n * inside a component that renders a Tab or Panel itself (the registry covers those once mounted).\n */\ninterface TabListStructure {\n  /** Value of the first Tab without `disabled`/`aria-disabled`: the uncontrolled default. */\n  firstEnabled?: string;\n  /** Consumer `id`s of Tabs, by value. */\n  tabIds: Array<[string, string]>;\n  /** Values of the Panels, each with its consumer `id` or `null`. */\n  panels: Array<[string, string | null]>;\n}\n\ninterface TabListContextValue {\n  orientation: Orientation;\n  /** Whether the tab with this value is the selected one (explicit value, else the tab stop). */\n  isSelected: (value: string) => boolean;\n  /**\n   * Activates a tab: a click (Enter and Space click the tab button), or with automatic activation\n   * focus moved by the keys.\n   */\n  select: (value: string) => void;\n  getTabIndex: (value: string) => 0 | -1;\n  /** The generated id of a Tab or Panel (used when it has no consumer `id`). */\n  getGeneratedId: (part: TabListPart, value: string) => string;\n  /**\n   * Id of the Tab with this value before the TabList mounts: its consumer `id`, else the\n   * generated one.\n   */\n  getStaticTabId: (value: string) => string;\n  /**\n   * Id of the Panel with this value before the TabList mounts, or `undefined` when the children\n   * have none.\n   */\n  getStaticPanelId: (value: string) => string | undefined;\n  registry: TabListRegistry;\n}\n\nconst TabListContext = React.createContext<TabListContextValue | null>(null);\n\nconst INERT_CONTEXT: TabListContextValue = {\n  orientation: 'horizontal',\n  isSelected: () => false,\n  select: () => {},\n  getTabIndex: () => -1,\n  getGeneratedId: (part, value) => `wave-tablist-inert-${part}-${value}`,\n  getStaticTabId: (value) => `wave-tablist-inert-tab-${value}`,\n  getStaticPanelId: () => undefined,\n  registry: INERT_REGISTRY,\n};\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nfunction useTabListContext(component: string): TabListContextValue {\n  const context = React.useContext(TabListContext);\n  if (context) return context;\n  reportMissingContext(component, '<TabList>');\n  return INERT_CONTEXT;\n}\n\ninterface StructureProps {\n  value?: unknown;\n  id?: unknown;\n  disabled?: unknown;\n  'aria-disabled'?: unknown;\n  children?: unknown;\n}\n\n/** Whether a Tab's props make it unavailable (it cannot be selected and is skipped by keys). */\nfunction isUnavailable(props: StructureProps): boolean {\n  const ariaDisabled = props['aria-disabled'];\n  return props.disabled === true || ariaDisabled === true || ariaDisabled === 'true';\n}\n\n/** A consumer `id` that replaces the generated one: a non-empty string (`''` counts as none). */\nfunction consumerId(id: unknown): string | null {\n  return typeof id === 'string' && id !== '' ? id : null;\n}\n\n/**\n * Walks the element tree of the TabList's children (see {@link TabListStructure}). Parts are\n * identified through their element type, so parts written in a Server Component (lazy\n * references) count too. A `React.lazy` still loading (inside the consumer's own `<Suspense>`,\n * such as code-split panels in `TabList.Panels`) is no part and never suspends the TabList: its\n * children are walked instead. Runs during render only.\n */\nfunction collectStructure(node: unknown, into: TabListStructure): TabListStructure {\n  if (Array.isArray(node)) {\n    node.forEach((child) => collectStructure(child, into));\n    return into;\n  }\n  if (!React.isValidElement<StructureProps>(node)) return into;\n  const { props } = node;\n  const type = getElementType(node, { suspend: false });\n  const value = typeof props.value === 'string' ? props.value : undefined;\n  if (type === Tab) {\n    if (value !== undefined) {\n      if (into.firstEnabled === undefined && !isUnavailable(props)) into.firstEnabled = value;\n      const id = consumerId(props.id);\n      if (id !== null) into.tabIds.push([value, id]);\n    }\n    return into;\n  }\n  if (type === TabPanel) {\n    if (value !== undefined) into.panels.push([value, consumerId(props.id)]);\n    return into;\n  }\n  if (type === TabListRoot) return into;\n  return collectStructure(props.children, into);\n}\n\n/**\n * Whether an element tree shows a Tab, or a Panel (`TabList.Panel` or `TabList.Panels`), found as\n * in {@link collectStructure}: through Fragments and the `children` of wrapper elements, not inside\n * a nested TabList or a component that renders the part itself.\n */\nfunction containsPart(node: unknown, part: TabListPart): boolean {\n  if (Array.isArray(node)) return node.some((child) => containsPart(child, part));\n  if (!React.isValidElement<StructureProps>(node)) return false;\n  const type = getElementType(node, { suspend: false });\n  if (type === Tab) return part === 'tab';\n  if (type === TabPanel || type === TabPanels) return part === 'panel';\n  if (type === TabListRoot) return false;\n  return containsPart(node.props.children, part);\n}\n\n/**\n * Whether a child of the TabList renders after the tablist: a Panel, `TabList.Panels`, or a\n * wrapper (an element, `Suspense`, an error boundary) that holds panels and no tab.\n */\nfunction rendersAfterTablist(child: React.ReactNode): boolean {\n  return containsPart(child, 'panel') && !containsPart(child, 'tab');\n}\n\n/**\n * Where the TabList renders its children: inside the `role=\"tablist\"` element (`'tabs'`) or after\n * it (`'panels'`). A Panel that ends up inside the tablist warns in development.\n */\nconst TabListAreaContext = React.createContext<'tabs' | 'panels' | null>(null);\n\nconst PANEL_IN_TABLIST_MESSAGE =\n  'TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe ' +\n  'aria-required-children). The TabList moves a Panel after the tablist when it is its child, or ' +\n  'in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or ' +\n  \"separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which \" +\n  'renders after the tablist.';\n\n/* ------------------------------------------------------------------ */\n/*  TabList                                                            */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabList component. */\nexport interface TabListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  /**\n   * Controlled value of the selected tab (`''`: no tab selected). A controlled value that becomes\n   * `undefined` also selects no tab: the TabList stays controlled.\n   */\n  value?: string;\n  /**\n   * Selected tab for uncontrolled usage. When it is omitted (or `''`), the first enabled tab\n   * written in the TabList's children is selected, from the first render (and in server-rendered\n   * HTML) on. Tabs written directly in the children, in Fragments or in wrapper elements that\n   * pass them as `children` (such as a Tooltip) count; a tab rendered by a custom component that\n   * renders `TabList.Tab` itself does not, even when it comes first in the DOM, so that server\n   * and client pick the same tab. When every tab comes from such a component, the first enabled\n   * tab in the DOM is selected once the tabs mount. To select a tab that a custom component\n   * renders, pass `defaultValue`.\n   */\n  defaultValue?: string;\n  /** Called with the new value when the selected tab changes (not when it is activated again). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Layout and arrow-key axis: `'horizontal'` (Left/Right, mirrored in RTL) or `'vertical'`\n   * (Up/Down).\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Whether moving focus with the arrow keys, Home and End also selects the tab (automatic\n   * activation, as in 0.5). With `false`, the keys only move focus and Enter, Space or a click\n   * selects the focused tab (manual activation, for panels that are slow to show). Fluent's\n   * default is `false`.\n   * @default true\n   */\n  selectTabOnFocus?: boolean;\n  /** @deprecated Use `value`. */\n  selectedValue?: string;\n  /** @deprecated Use `defaultValue`. */\n  defaultSelectedValue?: string;\n  /**\n   * @deprecated Use `onValueChange`. Unlike `onValueChange`, it is called on every activation,\n   * including a click on the tab that is already selected.\n   */\n  onTabSelect?: (value: string) => void;\n  /** @deprecated Use `orientation=\"vertical\"`. */\n  vertical?: boolean;\n  /** Ref to the `role=\"tablist\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst TabListRoot = ({\n  value: valueProp,\n  defaultValue: defaultValueProp,\n  onValueChange,\n  orientation: orientationProp,\n  selectTabOnFocus = true,\n  selectedValue,\n  defaultSelectedValue,\n  onTabSelect,\n  vertical,\n  className,\n  children,\n  onKeyDown,\n  onFocus,\n  ref,\n  ...rest\n}: TabListProps) => {\n  const value = resolveDeprecatedProp(\n    'TabList',\n    valueProp,\n    selectedValue,\n    'selectedValue',\n    'value',\n  );\n  const defaultValue = resolveDeprecatedProp(\n    'TabList',\n    defaultValueProp,\n    defaultSelectedValue,\n    'defaultSelectedValue',\n    'defaultValue',\n  );\n  const orientation =\n    resolveDeprecatedProp<Orientation>(\n      'TabList',\n      orientationProp,\n      vertical === undefined ? undefined : vertical ? 'vertical' : 'horizontal',\n      'vertical',\n      'orientation',\n    ) ?? 'horizontal';\n  if (onTabSelect) {\n    warnDeprecated(\n      'TabList',\n      'onTabSelect',\n      'onValueChange',\n      '`onValueChange` is called only when the selected tab changes.',\n    );\n  }\n\n  // The sticky mode: a controlled value that becomes `undefined` clears the selection (`''`).\n  const [selected, setSelected, isControlled] = useControllable(\n    value,\n    defaultValue ?? '',\n    onValueChange,\n  );\n\n  // The children are a new element tree on every parent render: memoized by content, so the\n  // context value stays stable while the tabs and panels stay the same.\n  const structureKey = JSON.stringify(collectStructure(children, { tabIds: [], panels: [] }));\n  const structure = React.useMemo(() => {\n    const parsed = JSON.parse(structureKey) as TabListStructure;\n    return {\n      firstEnabled: parsed.firstEnabled,\n      tabIds: new Map(parsed.tabIds),\n      panels: new Map(parsed.panels),\n    };\n  }, [structureKey]);\n\n  // Uncontrolled without a selection: the first enabled tab is selected. It is the tab stop the\n  // roving store resolves from `activeValue` (the first enabled tab of the children, replaced by\n  // the first enabled tab in the DOM once the store sees it disabled), so the selection is\n  // derived during render, present from the first render on, and follows tabs that disable\n  // themselves.\n  const derivesSelection = !isControlled && selected === '';\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: derivesSelection ? (structure.firstEnabled ?? null) : selected,\n    orientation,\n    loop: true,\n    // Automatic activation (APG Tabs): moving focus selects the tab. With manual activation the\n    // keys only move focus; the tab stop stays on the selected tab (`tabStop: 'active'`), and Enter\n    // or Space selects the focused tab through its native click.\n    onFocusMove: selectTabOnFocus ? (next) => select(next) : undefined,\n  });\n\n  const isSelected = React.useCallback(\n    (tabValue: string) => (derivesSelection ? getTabIndex(tabValue) === 0 : selected === tabValue),\n    [derivesSelection, getTabIndex, selected],\n  );\n\n  const select = useEventCallback((next: string) => {\n    onTabSelect?.(next);\n    if (!isSelected(next)) setSelected(next);\n  });\n\n  const baseId = useId('tablist');\n  const [registry] = React.useState(createRegistry);\n  // Runs after the layout effects of the Tabs and Panels mounted with the TabList, which have\n  // registered by then: from here on the registry, not the static structure, decides the links.\n  React.useLayoutEffect(() => registry.markReady(), [registry]);\n  const context = React.useMemo<TabListContextValue>(\n    () => ({\n      orientation,\n      isSelected,\n      select,\n      getTabIndex,\n      getGeneratedId: (part, itemValue) => getPartId(baseId, part, itemValue),\n      getStaticTabId: (tabValue) =>\n        structure.tabIds.get(tabValue) ?? getPartId(baseId, 'tab', tabValue),\n      getStaticPanelId: (tabValue) => {\n        const panel = structure.panels.get(tabValue);\n        if (panel === undefined) return undefined;\n        return panel ?? getPartId(baseId, 'panel', tabValue);\n      },\n      registry,\n    }),\n    [orientation, isSelected, select, getTabIndex, baseId, structure, registry],\n  );\n\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref);\n\n  const tabs: React.ReactNode[] = [];\n  const panels: React.ReactNode[] = [];\n  flattenChildren(children).forEach(({ key, node: child }) => {\n    const keyed = <React.Fragment key={key}>{child}</React.Fragment>;\n    (rendersAfterTablist(child) ? panels : tabs).push(keyed);\n  });\n\n  const isVertical = orientation === 'vertical';\n  return (\n    <TabListContext.Provider value={context}>\n      <div className={cn(isVertical && 'flex')}>\n        <div\n          role=\"tablist\"\n          aria-orientation={orientation}\n          className={cn(\n            tabListClassNames.root,\n            isVertical\n              ? 'flex w-40 flex-col border-e border-border'\n              : 'flex border-b border-border',\n            className,\n          )}\n          {...rest}\n          data-roving-container=\"\"\n          onKeyDown={composeEventHandlers(onKeyDown, containerProps.onKeyDown)}\n          onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n            checkDefaultPrevented: false,\n          })}\n          ref={mergedRef}\n        >\n          <TabListAreaContext.Provider value=\"tabs\">{tabs}</TabListAreaContext.Provider>\n        </div>\n        <TabListAreaContext.Provider value=\"panels\">{panels}</TabListAreaContext.Provider>\n      </div>\n    </TabListContext.Provider>\n  );\n};\nTabListRoot.displayName = 'TabList';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Tab                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the Tab sub-component. */\nexport interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Unique value identifying this tab (and its panel). */\n  value: string;\n  /** Ref to the tab `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * A tab button. `onClick` runs before the selection (call `event.preventDefault()` to keep the\n * current tab). A `disabled` (or `aria-disabled=\"true\"`) tab is skipped by the keyboard and cannot\n * be selected. A non-empty `id` replaces the generated one (its panel's `aria-labelledby` follows\n * it). The selected tab references its panel with `aria-controls` only while a `TabList.Panel`\n * with its value is mounted.\n */\nconst Tab = ({ value, id: idProp, className, children, onClick, ref, ...rest }: TabProps) => {\n  const ctx = useTabListContext('TabList.Tab');\n  const selected = ctx.isSelected(value);\n  const isVertical = ctx.orientation === 'vertical';\n  const unavailable = isUnavailable(rest);\n\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('tab', value);\n  React.useLayoutEffect(() => registry.register('tab', value, id), [registry, value, id]);\n  const mountedPanelId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('panel', value),\n    () => undefined,\n  );\n  // Before the TabList mounts the static structure stands in; after that only a mounted panel is\n  // referenced (`null`: none).\n  const panelId =\n    mountedPanelId === undefined ? ctx.getStaticPanelId(value) : (mountedPanelId ?? undefined);\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      className={cn(\n        tabListTabClassNames.root,\n        'px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none',\n        isVertical && 'text-start',\n        selected\n          ? cn(\n              'text-primary',\n              isVertical ? 'border-s-2 border-s-primary' : 'border-b-2 border-b-primary',\n            )\n          : 'text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground',\n        disabledStyles,\n        focusRingInset,\n        className,\n      )}\n      {...rest}\n      id={id}\n      aria-selected={selected}\n      aria-controls={selected ? panelId : undefined}\n      tabIndex={ctx.getTabIndex(value)}\n      data-roving-value={value}\n      data-selected={selected ? '' : undefined}\n      onClick={composeEventHandlers(onClick, () => {\n        if (!unavailable) ctx.select(value);\n      })}\n      ref={ref}\n    >\n      {children}\n    </button>\n  );\n};\nTab.displayName = 'Tab';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panel                                                      */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanel sub-component. */\nexport interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Value of the Tab that shows this panel. */\n  value: string;\n  /** Ref to the `role=\"tabpanel\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * The content of one tab, rendered only while its tab is selected and labelled by it (while a Tab\n * with its value is mounted). A non-empty `id` replaces the generated one (the tab's\n * `aria-controls` follows it).\n */\nconst TabPanel = ({ value, id: idProp, children, className, ref, ...rest }: TabPanelProps) => {\n  const ctx = useTabListContext('TabList.Panel');\n  const insideTablist = React.useContext(TabListAreaContext) === 'tabs';\n  React.useEffect(() => {\n    if (insideTablist) warnOnce('TabList.Panel:inside-tablist', PANEL_IN_TABLIST_MESSAGE);\n  }, [insideTablist]);\n  const { registry } = ctx;\n  const id = consumerId(idProp) ?? ctx.getGeneratedId('panel', value);\n  // Registered while mounted, also while hidden: the tab that selects it links to it.\n  React.useLayoutEffect(() => registry.register('panel', value, id), [registry, value, id]);\n  const mountedTabId = React.useSyncExternalStore(\n    registry.subscribe,\n    () => registry.get('tab', value),\n    () => undefined,\n  );\n  if (!ctx.isSelected(value)) return null;\n  // As for the Tab's aria-controls: the static structure only before the TabList mounts.\n  const tabId =\n    mountedTabId === undefined ? ctx.getStaticTabId(value) : (mountedTabId ?? undefined);\n  return (\n    <div\n      role=\"tabpanel\"\n      tabIndex={0}\n      className={cn(tabListPanelClassNames.root, 'p-4', focusRing, className)}\n      {...rest}\n      id={id}\n      aria-labelledby={tabId}\n      ref={ref}\n    >\n      {children}\n    </div>\n  );\n};\nTabPanel.displayName = 'TabPanel';\n\n/* ------------------------------------------------------------------ */\n/*  TabList.Panels                                                     */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the TabPanels sub-component. */\nexport interface TabPanelsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the container `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Optional container for the panels, rendered after the tablist. Use it to style the panel area,\n * and for panels that components render themselves: the TabList finds a Panel in its children, in\n * a Fragment or in a wrapper that holds no Tab, but a component that renders a Panel itself\n * renders inside the tablist unless it is placed in `TabList.Panels`.\n */\nconst TabPanels = ({ className, children, ref, ...rest }: TabPanelsProps) => (\n  <div\n    ref={ref}\n    className={cn(tabListPanelsClassNames.root, 'min-w-0 flex-1', className)}\n    {...rest}\n  >\n    {children}\n  </div>\n);\nTabPanels.displayName = 'TabPanels';\n\n/* ------------------------------------------------------------------ */\n/*  Export                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * A set of tabs with their panels (WAI-ARIA Tabs pattern): the arrow keys (Left/Right, mirrored\n * in RTL; Up/Down when vertical), Home and End move focus and select (automatic activation); with\n * `selectTabOnFocus={false}` they only move focus, and Enter, Space or a click selects the focused\n * tab (manual activation). The selected tab is the only tab stop; disabled tabs are skipped. Every\n * tab needs a `value` that is unique within the TabList (a development warning names a value that\n * several tabs share).\n *\n * Tabs register through context and are found in DOM order, so they may be wrapped (a Fragment,\n * a Tooltip). The children render inside the `role=\"tablist\"` element, except panels, which render\n * after it: a `TabList.Panel` or `TabList.Panels` child, or a wrapper (an element, `Suspense`, an\n * error boundary) that holds panels and no Tab. A Panel that a component renders itself cannot be\n * seen from the children: put that component inside `TabList.Panels` (a development warning names\n * a Panel that ends up inside the tablist). Content that is not a tab, such as a button next to\n * the tabs, does not belong in a tablist either: render it outside the TabList.\n *\n * Sub-components are also exported under flat names (`TabListTab`, `TabListPanel`,\n * `TabListPanels`) for React Server Components, which cannot use the dotted form.\n */\nexport const TabList = /* @__PURE__ */ Object.assign(TabListRoot, {\n  Tab,\n  Panel: TabPanel,\n  Panels: TabPanels,\n});\n\nexport { Tab as TabListTab, TabPanel as TabListPanel, TabPanels as TabListPanels };\n"],"mappings":"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"}

package/dist/components/layout/TabList.mjs

@@ -3,20 +3,21 @@ import { cn as e } from "../../lib/cn.mjs";
 import { flattenChildren as t, getElementType as n } from "../../lib/children.mjs";
 import { reportMissingContext as r, resolveDeprecatedProp as i, warnDeprecated as a, warnOnce as o } from "../../lib/dev.mjs";
 import { composeEventHandlers as s } from "../../lib/composeEventHandlers.mjs";
-import { useEventCallback as c } from "../../hooks/useEventCallback.mjs";
-import { useControllable as l } from "../../hooks/useControllable.mjs";
-import { useId as u } from "../../hooks/useId.mjs";
-import { useRovingTabIndex as d } from "../../hooks/useRovingTabIndex.mjs";
-import { useMergedRefs as f } from "../../hooks/useMergedRefs.mjs";
-import { disabledStyles as p, focusRing as m, focusRingInset as h } from "../../lib/styles.mjs";
-import { getPartId as g } from "./disclosureIds.mjs";
-import * as _ from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { tabListClassNames as c, tabListPanelClassNames as l, tabListPanelsClassNames as u, tabListTabClassNames as d } from "../../lib/classNames.mjs";
+import { useEventCallback as f } from "../../hooks/useEventCallback.mjs";
+import { useControllable as p } from "../../hooks/useControllable.mjs";
+import { useId as m } from "../../hooks/useId.mjs";
+import { useRovingTabIndex as h } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as g } from "../../hooks/useMergedRefs.mjs";
+import { disabledStyles as _, focusRing as v, focusRingInset as y } from "../../lib/styles.mjs";
+import { getPartId as b } from "./disclosureIds.mjs";
+import * as x from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/components/layout/TabList.tsx
-function b(e) {
+function w(e) {
 	o(`TabList:duplicate:${e}`, `TabList: several tabs share the value "${e}". Tab values must be unique within a TabList; tabs with the same value share one id and are selected (and tab stops) together.`);
 }
-function x() {
+function T() {
 	let e = {
 		tab: /* @__PURE__ */ new Map(),
 		panel: /* @__PURE__ */ new Map()
@@ -26,7 +27,7 @@ function x() {
 	return {
 		register(t, n, i) {
 			let a = e[t], o = a.get(n) ?? [];
-			return t === "tab" && o.length > 0 && b(n), a.set(n, [...o, i]), r(), () => {
+			return t === "tab" && o.length > 0 && w(n), a.set(n, [...o, i]), r(), () => {
 				let e = [...a.get(n) ?? []], t = e.indexOf(i);
 				t !== -1 && e.splice(t, 1), e.length > 0 ? a.set(n, e) : a.delete(n), r();
 			};
@@ -42,12 +43,12 @@ function x() {
 		}
 	};
 }
-var S = {
+var E = {
 	register: () => () => {},
 	get: () => void 0,
 	markReady: () => {},
 	subscribe: () => () => {}
-}, C = _.createContext(null), w = {
+}, D = x.createContext(null), O = {
 	orientation: "horizontal",
 	isSelected: () => !1,
 	select: () => {},
@@ -55,184 +56,184 @@ var S = {
 	getGeneratedId: (e, t) => `wave-tablist-inert-${e}-${t}`,
 	getStaticTabId: (e) => `wave-tablist-inert-tab-${e}`,
 	getStaticPanelId: () => void 0,
-	registry: S
+	registry: E
 };
-function T(e) {
-	return _.useContext(C) || (r(e, "<TabList>"), w);
+function k(e) {
+	return x.useContext(D) || (r(e, "<TabList>"), O);
 }
-function E(e) {
+function A(e) {
 	let t = e["aria-disabled"];
 	return e.disabled === !0 || t === !0 || t === "true";
 }
-function D(e) {
+function j(e) {
 	return typeof e == "string" && e !== "" ? e : null;
 }
-function O(e, t) {
-	if (Array.isArray(e)) return e.forEach((e) => O(e, t)), t;
-	if (!_.isValidElement(e)) return t;
+function M(e, t) {
+	if (Array.isArray(e)) return e.forEach((e) => M(e, t)), t;
+	if (!x.isValidElement(e)) return t;
 	let { props: r } = e, i = n(e, { suspend: !1 }), a = typeof r.value == "string" ? r.value : void 0;
-	if (i === P) {
+	if (i === R) {
 		if (a !== void 0) {
-			t.firstEnabled === void 0 && !E(r) && (t.firstEnabled = a);
-			let e = D(r.id);
+			t.firstEnabled === void 0 && !A(r) && (t.firstEnabled = a);
+			let e = j(r.id);
 			e !== null && t.tabIds.push([a, e]);
 		}
 		return t;
 	}
-	return i === F ? (a !== void 0 && t.panels.push([a, D(r.id)]), t) : i === N ? t : O(r.children, t);
+	return i === z ? (a !== void 0 && t.panels.push([a, j(r.id)]), t) : i === L ? t : M(r.children, t);
 }
-function k(e, t) {
-	if (Array.isArray(e)) return e.some((e) => k(e, t));
-	if (!_.isValidElement(e)) return !1;
+function N(e, t) {
+	if (Array.isArray(e)) return e.some((e) => N(e, t));
+	if (!x.isValidElement(e)) return !1;
 	let r = n(e, { suspend: !1 });
-	return r === P ? t === "tab" : r === F || r === I ? t === "panel" : r !== N && k(e.props.children, t);
+	return r === R ? t === "tab" : r === z || r === B ? t === "panel" : r !== L && N(e.props.children, t);
 }
-function A(e) {
-	return k(e, "panel") && !k(e, "tab");
+function P(e) {
+	return N(e, "panel") && !N(e, "tab");
 }
-var j = _.createContext(null), M = "TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe aria-required-children). The TabList moves a Panel after the tablist when it is its child, or in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which renders after the tablist.", N = ({ value: n, defaultValue: r, onValueChange: o, orientation: p, selectTabOnFocus: m = !0, selectedValue: h, defaultSelectedValue: b, onTabSelect: S, vertical: w, className: T, children: E, onKeyDown: D, onFocus: k, ref: M, ...N }) => {
-	let P = i("TabList", n, h, "selectedValue", "value"), F = i("TabList", r, b, "defaultSelectedValue", "defaultValue"), I = i("TabList", p, w === void 0 ? void 0 : w ? "vertical" : "horizontal", "vertical", "orientation") ?? "horizontal";
-	S && a("TabList", "onTabSelect", "onValueChange", "`onValueChange` is called only when the selected tab changes.");
-	let [L, R, z] = l(P, F ?? "", o), B = JSON.stringify(O(E, {
+var F = x.createContext(null), I = "TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe aria-required-children). The TabList moves a Panel after the tablist when it is its child, or in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which renders after the tablist.", L = ({ value: n, defaultValue: r, onValueChange: o, orientation: l, selectTabOnFocus: u = !0, selectedValue: d, defaultSelectedValue: _, onTabSelect: v, vertical: y, className: w, children: E, onKeyDown: O, onFocus: k, ref: A, ...j }) => {
+	let N = i("TabList", n, d, "selectedValue", "value"), I = i("TabList", r, _, "defaultSelectedValue", "defaultValue"), L = i("TabList", l, y === void 0 ? void 0 : y ? "vertical" : "horizontal", "vertical", "orientation") ?? "horizontal";
+	v && a("TabList", "onTabSelect", "onValueChange", "`onValueChange` is called only when the selected tab changes.");
+	let [R, z, B] = p(N, I ?? "", o), V = JSON.stringify(M(E, {
 		tabIds: [],
 		panels: []
-	})), V = _.useMemo(() => {
-		let e = JSON.parse(B);
+	})), H = x.useMemo(() => {
+		let e = JSON.parse(V);
 		return {
 			firstEnabled: e.firstEnabled,
 			tabIds: new Map(e.tabIds),
 			panels: new Map(e.panels)
 		};
-	}, [B]), H = !z && L === "", { containerProps: U, getTabIndex: W } = d({
-		activeValue: H ? V.firstEnabled ?? null : L,
-		orientation: I,
+	}, [V]), U = !B && R === "", { containerProps: W, getTabIndex: G } = h({
+		activeValue: U ? H.firstEnabled ?? null : R,
+		orientation: L,
 		loop: !0,
-		onFocusMove: m ? (e) => K(e) : void 0
-	}), G = _.useCallback((e) => H ? W(e) === 0 : L === e, [
-		H,
-		W,
-		L
-	]), K = c((e) => {
-		S?.(e), G(e) || R(e);
-	}), q = u("tablist"), [J] = _.useState(x);
-	_.useLayoutEffect(() => J.markReady(), [J]);
-	let Y = _.useMemo(() => ({
-		orientation: I,
-		isSelected: G,
-		select: K,
-		getTabIndex: W,
-		getGeneratedId: (e, t) => g(q, e, t),
-		getStaticTabId: (e) => V.tabIds.get(e) ?? g(q, "tab", e),
+		onFocusMove: u ? (e) => q(e) : void 0
+	}), K = x.useCallback((e) => U ? G(e) === 0 : R === e, [
+		U,
+		G,
+		R
+	]), q = f((e) => {
+		v?.(e), K(e) || z(e);
+	}), J = m("tablist"), [Y] = x.useState(T);
+	x.useLayoutEffect(() => Y.markReady(), [Y]);
+	let X = x.useMemo(() => ({
+		orientation: L,
+		isSelected: K,
+		select: q,
+		getTabIndex: G,
+		getGeneratedId: (e, t) => b(J, e, t),
+		getStaticTabId: (e) => H.tabIds.get(e) ?? b(J, "tab", e),
 		getStaticPanelId: (e) => {
-			let t = V.panels.get(e);
-			if (t !== void 0) return t ?? g(q, "panel", e);
+			let t = H.panels.get(e);
+			if (t !== void 0) return t ?? b(J, "panel", e);
 		},
-		registry: J
+		registry: Y
 	}), [
-		I,
-		G,
+		L,
 		K,
-		W,
 		q,
-		V,
-		J
-	]), X = f(M, U.ref), Z = [], Q = [];
+		G,
+		J,
+		H,
+		Y
+	]), ee = g(A, W.ref), Z = [], Q = [];
 	t(E).forEach(({ key: e, node: t }) => {
-		let n = /* @__PURE__ */ v(_.Fragment, { children: t }, e);
-		(A(t) ? Q : Z).push(n);
+		let n = /* @__PURE__ */ S(x.Fragment, { children: t }, e);
+		(P(t) ? Q : Z).push(n);
 	});
-	let $ = I === "vertical";
-	return /* @__PURE__ */ v(C.Provider, {
-		value: Y,
-		children: /* @__PURE__ */ y("div", {
+	let $ = L === "vertical";
+	return /* @__PURE__ */ S(D.Provider, {
+		value: X,
+		children: /* @__PURE__ */ C("div", {
 			className: e($ && "flex"),
-			children: [/* @__PURE__ */ v("div", {
+			children: [/* @__PURE__ */ S("div", {
 				role: "tablist",
-				"aria-orientation": I,
-				className: e($ ? "flex w-40 flex-col border-e border-border" : "flex border-b border-border", T),
-				...N,
+				"aria-orientation": L,
+				className: e(c.root, $ ? "flex w-40 flex-col border-e border-border" : "flex border-b border-border", w),
+				...j,
 				"data-roving-container": "",
-				onKeyDown: s(D, U.onKeyDown),
-				onFocus: s(k, U.onFocus, { checkDefaultPrevented: !1 }),
-				ref: X,
-				children: /* @__PURE__ */ v(j.Provider, {
+				onKeyDown: s(O, W.onKeyDown),
+				onFocus: s(k, W.onFocus, { checkDefaultPrevented: !1 }),
+				ref: ee,
+				children: /* @__PURE__ */ S(F.Provider, {
 					value: "tabs",
 					children: Z
 				})
-			}), /* @__PURE__ */ v(j.Provider, {
+			}), /* @__PURE__ */ S(F.Provider, {
 				value: "panels",
 				children: Q
 			})]
 		})
 	});
 };
-N.displayName = "TabList";
-var P = ({ value: t, id: n, className: r, children: i, onClick: a, ref: o, ...c }) => {
-	let l = T("TabList.Tab"), u = l.isSelected(t), d = l.orientation === "vertical", f = E(c), { registry: m } = l, g = D(n) ?? l.getGeneratedId("tab", t);
-	_.useLayoutEffect(() => m.register("tab", t, g), [
+L.displayName = "TabList";
+var R = ({ value: t, id: n, className: r, children: i, onClick: a, ref: o, ...c }) => {
+	let l = k("TabList.Tab"), u = l.isSelected(t), f = l.orientation === "vertical", p = A(c), { registry: m } = l, h = j(n) ?? l.getGeneratedId("tab", t);
+	x.useLayoutEffect(() => m.register("tab", t, h), [
 		m,
 		t,
-		g
+		h
 	]);
-	let y = _.useSyncExternalStore(m.subscribe, () => m.get("panel", t), () => void 0), b = y === void 0 ? l.getStaticPanelId(t) : y ?? void 0;
-	return /* @__PURE__ */ v("button", {
+	let g = x.useSyncExternalStore(m.subscribe, () => m.get("panel", t), () => void 0), v = g === void 0 ? l.getStaticPanelId(t) : g ?? void 0;
+	return /* @__PURE__ */ S("button", {
 		type: "button",
 		role: "tab",
-		className: e("px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none", d && "text-start", u ? e("text-primary", d ? "border-s-2 border-s-primary" : "border-b-2 border-b-primary") : "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground", p, h, r),
+		className: e(d.root, "px-4 py-2 text-body-1 font-semibold transition-colors motion-reduce:transition-none", f && "text-start", u ? e("text-primary", f ? "border-s-2 border-s-primary" : "border-b-2 border-b-primary") : "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground", _, y, r),
 		...c,
-		id: g,
+		id: h,
 		"aria-selected": u,
-		"aria-controls": u ? b : void 0,
+		"aria-controls": u ? v : void 0,
 		tabIndex: l.getTabIndex(t),
 		"data-roving-value": t,
 		"data-selected": u ? "" : void 0,
 		onClick: s(a, () => {
-			f || l.select(t);
+			p || l.select(t);
 		}),
 		ref: o,
 		children: i
 	});
 };
-P.displayName = "Tab";
-var F = ({ value: t, id: n, children: r, className: i, ref: a, ...s }) => {
-	let c = T("TabList.Panel"), l = _.useContext(j) === "tabs";
-	_.useEffect(() => {
-		l && o("TabList.Panel:inside-tablist", M);
-	}, [l]);
-	let { registry: u } = c, d = D(n) ?? c.getGeneratedId("panel", t);
-	_.useLayoutEffect(() => u.register("panel", t, d), [
-		u,
+R.displayName = "Tab";
+var z = ({ value: t, id: n, children: r, className: i, ref: a, ...s }) => {
+	let c = k("TabList.Panel"), u = x.useContext(F) === "tabs";
+	x.useEffect(() => {
+		u && o("TabList.Panel:inside-tablist", I);
+	}, [u]);
+	let { registry: d } = c, f = j(n) ?? c.getGeneratedId("panel", t);
+	x.useLayoutEffect(() => d.register("panel", t, f), [
+		d,
 		t,
-		d
+		f
 	]);
-	let f = _.useSyncExternalStore(u.subscribe, () => u.get("tab", t), () => void 0);
+	let p = x.useSyncExternalStore(d.subscribe, () => d.get("tab", t), () => void 0);
 	if (!c.isSelected(t)) return null;
-	let p = f === void 0 ? c.getStaticTabId(t) : f ?? void 0;
-	return /* @__PURE__ */ v("div", {
+	let m = p === void 0 ? c.getStaticTabId(t) : p ?? void 0;
+	return /* @__PURE__ */ S("div", {
 		role: "tabpanel",
 		tabIndex: 0,
-		className: e("p-4", m, i),
+		className: e(l.root, "p-4", v, i),
 		...s,
-		id: d,
-		"aria-labelledby": p,
+		id: f,
+		"aria-labelledby": m,
 		ref: a,
 		children: r
 	});
 };
-F.displayName = "TabPanel";
-var I = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ v("div", {
+z.displayName = "TabPanel";
+var B = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ S("div", {
 	ref: r,
-	className: e("min-w-0 flex-1", t),
+	className: e(u.root, "min-w-0 flex-1", t),
 	...i,
 	children: n
 });
-I.displayName = "TabPanels";
-var L = /* @__PURE__ */ Object.assign(N, {
-	Tab: P,
-	Panel: F,
-	Panels: I
+B.displayName = "TabPanels";
+var V = /* @__PURE__ */ Object.assign(L, {
+	Tab: R,
+	Panel: z,
+	Panels: B
 });
 //#endregion
-export { L as TabList, F as TabListPanel, I as TabListPanels, P as TabListTab };
+export { V as TabList, z as TabListPanel, B as TabListPanels, R as TabListTab };
 
 //# sourceMappingURL=TabList.mjs.map