ods-ant 0.2.0 → 0.4.0

package/dist-lib/navigation/Tabs.cjs

@@ -0,0 +1,162 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`);let t=require(`antd`),n=require(`react`),r=require(`react/jsx-runtime`);var i=`ds-tabs-styles`,a=`data-ds-tab-label`,o=16,s={sm:{tabHeight:`26px`,fontSize:`12px`,lineHeight:`16px`,letterSpacingActive:`0.54px`,letterSpacingInactive:`0.48px`,segmentedMinWidth:`104px`},md:{tabHeight:`40px`,fontSize:`14px`,lineHeight:`18px`,letterSpacingActive:`0.56px`,letterSpacingInactive:`0.49px`,segmentedMinWidth:`132px`},lg:{tabHeight:`44px`,fontSize:`16px`,lineHeight:`20px`,letterSpacingActive:`0.56px`,letterSpacingInactive:`0.48px`,segmentedMinWidth:`160px`}};function c(){if(typeof document>`u`||document.getElementById(i))return;let{tabs:t,segmented:n}=e.dsSemanticTokens,r=document.createElement(`style`);r.id=i,r.textContent=`
+    [data-ds-tabs].ant-tabs .ant-tabs-nav {
+      margin: 0;
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-tab {
+      margin: 0;
+      padding: 0 16px;
+      height: var(--ds-tabs-height);
+      align-items: center;
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn {
+      display: inline-grid;
+      color: ${t.text.inactive};
+      font-size: var(--ds-tabs-font-size);
+      font-weight: 600;
+      line-height: var(--ds-tabs-line-height);
+      letter-spacing: var(--ds-tabs-letter-inactive);
+      text-transform: uppercase;
+    }
+
+    /* Reserve width using a hidden bold clone to prevent layout shift on activation. */
+    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn::after {
+      content: attr(${a});
+      font-size: inherit;
+      font-weight: 700;
+      line-height: inherit;
+      letter-spacing: var(--ds-tabs-letter-active);
+      text-transform: inherit;
+      visibility: hidden;
+      pointer-events: none;
+      height: 0;
+      overflow: hidden;
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+      color: ${t.text.active};
+      font-weight: 700;
+      letter-spacing: var(--ds-tabs-letter-active);
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-ink-bar {
+      height: 4px;
+      background: ${t.indicator.active};
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-ink-bar,
+    [data-ds-tabs].ant-tabs .ant-tabs-tab,
+    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn,
+    [data-ds-tabs].ant-tabs .ant-tabs-content,
+    [data-ds-tabs].ant-tabs .ant-tabs-tabpane {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    [data-ds-tabs].ant-tabs-top > .ant-tabs-content-holder {
+      margin-top: 24px;
+    }
+
+    [data-ds-tabs][data-ds-underline='true'].ant-tabs-top > .ant-tabs-nav::before,
+    [data-ds-tabs][data-ds-underline='true'].ant-tabs-bottom > .ant-tabs-nav::before {
+      border-bottom: 1px solid ${t.indicator.baseline};
+    }
+
+    [data-ds-tabs][data-ds-underline='false'].ant-tabs-top > .ant-tabs-nav::before,
+    [data-ds-tabs][data-ds-underline='false'].ant-tabs-bottom > .ant-tabs-nav::before {
+      border-bottom: none;
+    }
+
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-nav-list,
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-nav-list {
+      width: 100%;
+      display: flex;
+    }
+
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-tab,
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-tab {
+      flex: 1 1 0;
+      justify-content: center;
+    }
+
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-tab-btn,
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-tab-btn {
+      text-align: center;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav {
+      display: inline-flex;
+      width: fit-content;
+      max-width: 100%;
+      flex: 0 0 auto;
+      padding: 4px;
+      background: ${n.container.background};
+      border: none;
+      border-radius: 8px;
+      box-shadow: none;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav::before {
+      border-bottom: none;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-wrap,
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-list {
+      width: auto;
+      flex: 0 0 auto;
+      max-width: 100%;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-nav-list {
+      gap: 4px;
+      align-items: center;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab {
+      min-width: var(--ds-tabs-segmented-min-width);
+      height: var(--ds-tabs-height);
+      padding: 0 16px;
+      justify-content: center;
+      border-radius: 6px;
+      border: 1px solid transparent;
+      background: transparent;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab-btn {
+      color: ${n.text.inactive};
+      font-weight: ${n.typography.fontWeight};
+      letter-spacing: 0;
+      text-transform: none;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'][data-ds-size='sm'].ant-tabs-top .ant-tabs-tab-btn {
+      font-size: ${s.md.fontSize};
+      line-height: ${s.md.lineHeight};
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active {
+      background: ${n.item.selectedBackground};
+      border-color: transparent;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+      color: ${t.text.active};
+      font-weight: 700;
+      letter-spacing: 0;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-ink-bar {
+      display: none;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-content-holder {
+      margin-top: 16px;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'][data-ds-layout='equal-width'].ant-tabs-top > .ant-tabs-nav {
+      display: flex;
+      width: 100%;
+    }
+  `,document.head.appendChild(r)}function l(e){e&&e.querySelectorAll(`.ant-tabs-tab-btn`).forEach(e=>{let t=(e.textContent??``).replace(/\s+/g,` `).trim();e.setAttribute(a,t)})}var u=({dsVariant:e=`line`,dsSize:i=`md`,dsLayout:a=`default-hug`,dsUnderline:u=!1,indicator:d,style:f,className:p,...m})=>{let h=(0,n.useRef)(null);(0,n.useEffect)(()=>{c(),l(h.current);let e=new MutationObserver(()=>{l(h.current)});return h.current&&e.observe(h.current,{subtree:!0,childList:!0,characterData:!0}),()=>{e.disconnect()}},[]);let g=s[i],_=d??{size:e=>Math.max(e-o*2,0),align:`center`};return(0,r.jsx)(`div`,{ref:h,children:(0,r.jsx)(t.Tabs,{...m,className:p,animated:!1,indicator:_,style:{...f,"--ds-tabs-height":g.tabHeight,"--ds-tabs-font-size":g.fontSize,"--ds-tabs-line-height":g.lineHeight,"--ds-tabs-letter-active":g.letterSpacingActive,"--ds-tabs-letter-inactive":g.letterSpacingInactive,"--ds-tabs-segmented-min-width":g.segmentedMinWidth},"data-ds-tabs":!0,"data-ds-variant":e,"data-ds-size":i,"data-ds-layout":a,"data-ds-underline":u?`true`:`false`})})};exports.Tabs=u;
+//# sourceMappingURL=Tabs.cjs.map

package/dist-lib/navigation/Tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs","names":[],"sources":["../../src/ds/navigation/Tabs.tsx"],"sourcesContent":["import { Tabs as AntTabs } from 'antd';\nimport type { TabsProps as AntTabsProps } from 'antd';\nimport { useEffect, useRef } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSTabsSize = 'sm' | 'md' | 'lg';\nexport type DSTabsLayout = 'default-hug' | 'equal-width';\nexport type DSTabsVariant = 'line' | 'segmented-light';\n\nexport type TabsProps = AntTabsProps & {\n  /** DS visual variant. */\n  dsVariant?: DSTabsVariant;\n  /** DS tab size mapped from Figma menu tab variants. */\n  dsSize?: DSTabsSize;\n  /** DS layout mode: intrinsic tab widths or equal-width tabs. */\n  dsLayout?: DSTabsLayout;\n  /** DS underline baseline under the tab row. */\n  dsUnderline?: boolean;\n};\n\nconst STYLE_ID = 'ds-tabs-styles';\nconst LABEL_STABILITY_ATTR = 'data-ds-tab-label';\nconst TAB_HORIZONTAL_PADDING_PX = 16;\n\nconst SIZE_TOKENS: Record<DSTabsSize, {\n  tabHeight: string;\n  fontSize: string;\n  lineHeight: string;\n  letterSpacingActive: string;\n  letterSpacingInactive: string;\n  segmentedMinWidth: string;\n}> = {\n  sm: {\n    tabHeight: '26px',\n    fontSize: '12px',\n    lineHeight: '16px',\n    letterSpacingActive: '0.54px',\n    letterSpacingInactive: '0.48px',\n    segmentedMinWidth: '104px',\n  },\n  md: {\n    tabHeight: '40px',\n    fontSize: '14px',\n    lineHeight: '18px',\n    letterSpacingActive: '0.56px',\n    letterSpacingInactive: '0.49px',\n    segmentedMinWidth: '132px',\n  },\n  lg: {\n    tabHeight: '44px',\n    fontSize: '16px',\n    lineHeight: '20px',\n    letterSpacingActive: '0.56px',\n    letterSpacingInactive: '0.48px',\n    segmentedMinWidth: '160px',\n  },\n};\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n  if (document.getElementById(STYLE_ID)) return;\n\n  const { tabs, segmented } = dsSemanticTokens;\n\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = `\n    [data-ds-tabs].ant-tabs .ant-tabs-nav {\n      margin: 0;\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-tab {\n      margin: 0;\n      padding: 0 16px;\n      height: var(--ds-tabs-height);\n      align-items: center;\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn {\n      display: inline-grid;\n      color: ${tabs.text.inactive};\n      font-size: var(--ds-tabs-font-size);\n      font-weight: 600;\n      line-height: var(--ds-tabs-line-height);\n      letter-spacing: var(--ds-tabs-letter-inactive);\n      text-transform: uppercase;\n    }\n\n    /* Reserve width using a hidden bold clone to prevent layout shift on activation. */\n    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn::after {\n      content: attr(${LABEL_STABILITY_ATTR});\n      font-size: inherit;\n      font-weight: 700;\n      line-height: inherit;\n      letter-spacing: var(--ds-tabs-letter-active);\n      text-transform: inherit;\n      visibility: hidden;\n      pointer-events: none;\n      height: 0;\n      overflow: hidden;\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n      color: ${tabs.text.active};\n      font-weight: 700;\n      letter-spacing: var(--ds-tabs-letter-active);\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-ink-bar {\n      height: 4px;\n      background: ${tabs.indicator.active};\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-ink-bar,\n    [data-ds-tabs].ant-tabs .ant-tabs-tab,\n    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn,\n    [data-ds-tabs].ant-tabs .ant-tabs-content,\n    [data-ds-tabs].ant-tabs .ant-tabs-tabpane {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    [data-ds-tabs].ant-tabs-top > .ant-tabs-content-holder {\n      margin-top: 24px;\n    }\n\n    [data-ds-tabs][data-ds-underline='true'].ant-tabs-top > .ant-tabs-nav::before,\n    [data-ds-tabs][data-ds-underline='true'].ant-tabs-bottom > .ant-tabs-nav::before {\n      border-bottom: 1px solid ${tabs.indicator.baseline};\n    }\n\n    [data-ds-tabs][data-ds-underline='false'].ant-tabs-top > .ant-tabs-nav::before,\n    [data-ds-tabs][data-ds-underline='false'].ant-tabs-bottom > .ant-tabs-nav::before {\n      border-bottom: none;\n    }\n\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-nav-list,\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-nav-list {\n      width: 100%;\n      display: flex;\n    }\n\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-tab,\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-tab {\n      flex: 1 1 0;\n      justify-content: center;\n    }\n\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-tab-btn,\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-tab-btn {\n      text-align: center;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav {\n      display: inline-flex;\n      width: fit-content;\n      max-width: 100%;\n      flex: 0 0 auto;\n      padding: 4px;\n      background: ${segmented.container.background};\n      border: none;\n      border-radius: 8px;\n      box-shadow: none;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav::before {\n      border-bottom: none;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-wrap,\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-list {\n      width: auto;\n      flex: 0 0 auto;\n      max-width: 100%;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-nav-list {\n      gap: 4px;\n      align-items: center;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab {\n      min-width: var(--ds-tabs-segmented-min-width);\n      height: var(--ds-tabs-height);\n      padding: 0 16px;\n      justify-content: center;\n      border-radius: 6px;\n      border: 1px solid transparent;\n      background: transparent;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab-btn {\n      color: ${segmented.text.inactive};\n      font-weight: ${segmented.typography.fontWeight};\n      letter-spacing: 0;\n      text-transform: none;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'][data-ds-size='sm'].ant-tabs-top .ant-tabs-tab-btn {\n      font-size: ${SIZE_TOKENS.md.fontSize};\n      line-height: ${SIZE_TOKENS.md.lineHeight};\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active {\n      background: ${segmented.item.selectedBackground};\n      border-color: transparent;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n      color: ${tabs.text.active};\n      font-weight: 700;\n      letter-spacing: 0;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-ink-bar {\n      display: none;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-content-holder {\n      margin-top: 16px;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'][data-ds-layout='equal-width'].ant-tabs-top > .ant-tabs-nav {\n      display: flex;\n      width: 100%;\n    }\n  `;\n\n  document.head.appendChild(style);\n}\n\nfunction syncTabLabelStabilityAttrs(root: HTMLElement | null) {\n  if (!root) return;\n\n  const tabButtons = root.querySelectorAll<HTMLElement>('.ant-tabs-tab-btn');\n  tabButtons.forEach((button) => {\n    const label = (button.textContent ?? '').replace(/\\s+/g, ' ').trim();\n    button.setAttribute(LABEL_STABILITY_ATTR, label);\n  });\n}\n\nexport const Tabs = ({\n  dsVariant = 'line',\n  dsSize = 'md',\n  dsLayout = 'default-hug',\n  dsUnderline = false,\n  indicator,\n  style,\n  className,\n  ...props\n}: TabsProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    injectStyles();\n\n    syncTabLabelStabilityAttrs(rootRef.current);\n\n    const observer = new MutationObserver(() => {\n      syncTabLabelStabilityAttrs(rootRef.current);\n    });\n\n    if (rootRef.current) {\n      observer.observe(rootRef.current, {\n        subtree: true,\n        childList: true,\n        characterData: true,\n      });\n    }\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  const tokens = SIZE_TOKENS[dsSize];\n  const resolvedIndicator = indicator ?? {\n    size: (origin: number) => Math.max(origin - TAB_HORIZONTAL_PADDING_PX * 2, 0),\n    align: 'center' as const,\n  };\n\n  return (\n    <div ref={rootRef}>\n      <AntTabs\n        {...props}\n        className={className}\n        animated={false}\n        indicator={resolvedIndicator}\n        style={{\n          ...style,\n          ['--ds-tabs-height' as string]: tokens.tabHeight,\n          ['--ds-tabs-font-size' as string]: tokens.fontSize,\n          ['--ds-tabs-line-height' as string]: tokens.lineHeight,\n          ['--ds-tabs-letter-active' as string]: tokens.letterSpacingActive,\n          ['--ds-tabs-letter-inactive' as string]: tokens.letterSpacingInactive,\n          ['--ds-tabs-segmented-min-width' as string]: tokens.segmentedMinWidth,\n        }}\n        data-ds-tabs\n        data-ds-variant={dsVariant}\n        data-ds-size={dsSize}\n        data-ds-layout={dsLayout}\n        data-ds-underline={dsUnderline ? 'true' : 'false'}\n      />\n    </div>\n  );\n};\n"],"mappings":"4MAoBA,IAAM,EAAW,iBACX,EAAuB,oBACvB,EAA4B,GAE5B,EAOD,CACH,GAAI,CACF,UAAW,OACX,SAAU,OACV,WAAY,OACZ,oBAAqB,SACrB,sBAAuB,SACvB,kBAAmB,QACpB,CACD,GAAI,CACF,UAAW,OACX,SAAU,OACV,WAAY,OACZ,oBAAqB,SACrB,sBAAuB,SACvB,kBAAmB,QACpB,CACD,GAAI,CACF,UAAW,OACX,SAAU,OACV,WAAY,OACZ,oBAAqB,SACrB,sBAAuB,SACvB,kBAAmB,QACpB,CACF,CAED,SAAS,GAAe,CAEtB,GADI,OAAO,SAAa,KACpB,SAAS,eAAe,EAAS,CAAE,OAEvC,GAAM,CAAE,OAAM,aAAc,EAAA,iBAEtB,EAAQ,SAAS,cAAc,QAAQ,CAC7C,EAAM,GAAK,EACX,EAAM,YAAc;;;;;;;;;;;;;;eAcP,EAAK,KAAK,SAAS;;;;;;;;;;sBAUZ,EAAqB;;;;;;;;;;;;;eAa5B,EAAK,KAAK,OAAO;;;;;;;oBAOZ,EAAK,UAAU,OAAO;;;;;;;;;;;;;;;;;;iCAkBT,EAAK,UAAU,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA+BrC,EAAU,UAAU,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAiCpC,EAAU,KAAK,SAAS;qBAClB,EAAU,WAAW,WAAW;;;;;;mBAMlC,EAAY,GAAG,SAAS;qBACtB,EAAY,GAAG,WAAW;;;;oBAI3B,EAAU,KAAK,mBAAmB;;;;;eAKvC,EAAK,KAAK,OAAO;;;;;;;;;;;;;;;;;IAmB9B,SAAS,KAAK,YAAY,EAAM,CAGlC,SAAS,EAA2B,EAA0B,CACvD,GAEc,EAAK,iBAA8B,oBACtD,CAAW,QAAS,GAAW,CAC7B,IAAM,GAAS,EAAO,aAAe,IAAI,QAAQ,OAAQ,IAAI,CAAC,MAAM,CACpE,EAAO,aAAa,EAAsB,EAAM,EAChD,CAGJ,IAAa,GAAQ,CACnB,YAAY,OACZ,SAAS,KACT,WAAW,cACX,cAAc,GACd,YACA,QACA,YACA,GAAG,KACY,CACf,IAAM,GAAA,EAAA,EAAA,QAAiC,KAAK,EAE5C,EAAA,EAAA,eAAgB,CACd,GAAc,CAEd,EAA2B,EAAQ,QAAQ,CAE3C,IAAM,EAAW,IAAI,qBAAuB,CAC1C,EAA2B,EAAQ,QAAQ,EAC3C,CAUF,OARI,EAAQ,SACV,EAAS,QAAQ,EAAQ,QAAS,CAChC,QAAS,GACT,UAAW,GACX,cAAe,GAChB,CAAC,KAGS,CACX,EAAS,YAAY,GAEtB,EAAE,CAAC,CAEN,IAAM,EAAS,EAAY,GACrB,EAAoB,GAAa,CACrC,KAAO,GAAmB,KAAK,IAAI,EAAS,EAA4B,EAAG,EAAE,CAC7E,MAAO,SACR,CAED,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,IAAK,YACR,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,GAAI,EACO,YACX,SAAU,GACV,UAAW,EACX,MAAO,CACL,GAAG,EACF,mBAA+B,EAAO,UACtC,sBAAkC,EAAO,SACzC,wBAAoC,EAAO,WAC3C,0BAAsC,EAAO,oBAC7C,4BAAwC,EAAO,sBAC/C,gCAA4C,EAAO,kBACrD,CACD,eAAA,GACA,kBAAiB,EACjB,eAAc,EACd,iBAAgB,EAChB,oBAAmB,EAAc,OAAS,QAC1C,CAAA,CACE,CAAA"}

package/dist-lib/navigation/Tabs.js

@@ -0,0 +1,249 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Tabs as t } from "antd";
+import { useEffect as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/ds/navigation/Tabs.tsx
+var a = "ds-tabs-styles", o = "data-ds-tab-label", s = 16, c = {
+	sm: {
+		tabHeight: "26px",
+		fontSize: "12px",
+		lineHeight: "16px",
+		letterSpacingActive: "0.54px",
+		letterSpacingInactive: "0.48px",
+		segmentedMinWidth: "104px"
+	},
+	md: {
+		tabHeight: "40px",
+		fontSize: "14px",
+		lineHeight: "18px",
+		letterSpacingActive: "0.56px",
+		letterSpacingInactive: "0.49px",
+		segmentedMinWidth: "132px"
+	},
+	lg: {
+		tabHeight: "44px",
+		fontSize: "16px",
+		lineHeight: "20px",
+		letterSpacingActive: "0.56px",
+		letterSpacingInactive: "0.48px",
+		segmentedMinWidth: "160px"
+	}
+};
+function l() {
+	if (typeof document > "u" || document.getElementById(a)) return;
+	let { tabs: t, segmented: n } = e, r = document.createElement("style");
+	r.id = a, r.textContent = `
+    [data-ds-tabs].ant-tabs .ant-tabs-nav {
+      margin: 0;
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-tab {
+      margin: 0;
+      padding: 0 16px;
+      height: var(--ds-tabs-height);
+      align-items: center;
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn {
+      display: inline-grid;
+      color: ${t.text.inactive};
+      font-size: var(--ds-tabs-font-size);
+      font-weight: 600;
+      line-height: var(--ds-tabs-line-height);
+      letter-spacing: var(--ds-tabs-letter-inactive);
+      text-transform: uppercase;
+    }
+
+    /* Reserve width using a hidden bold clone to prevent layout shift on activation. */
+    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn::after {
+      content: attr(${o});
+      font-size: inherit;
+      font-weight: 700;
+      line-height: inherit;
+      letter-spacing: var(--ds-tabs-letter-active);
+      text-transform: inherit;
+      visibility: hidden;
+      pointer-events: none;
+      height: 0;
+      overflow: hidden;
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+      color: ${t.text.active};
+      font-weight: 700;
+      letter-spacing: var(--ds-tabs-letter-active);
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-ink-bar {
+      height: 4px;
+      background: ${t.indicator.active};
+    }
+
+    [data-ds-tabs].ant-tabs .ant-tabs-ink-bar,
+    [data-ds-tabs].ant-tabs .ant-tabs-tab,
+    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn,
+    [data-ds-tabs].ant-tabs .ant-tabs-content,
+    [data-ds-tabs].ant-tabs .ant-tabs-tabpane {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    [data-ds-tabs].ant-tabs-top > .ant-tabs-content-holder {
+      margin-top: 24px;
+    }
+
+    [data-ds-tabs][data-ds-underline='true'].ant-tabs-top > .ant-tabs-nav::before,
+    [data-ds-tabs][data-ds-underline='true'].ant-tabs-bottom > .ant-tabs-nav::before {
+      border-bottom: 1px solid ${t.indicator.baseline};
+    }
+
+    [data-ds-tabs][data-ds-underline='false'].ant-tabs-top > .ant-tabs-nav::before,
+    [data-ds-tabs][data-ds-underline='false'].ant-tabs-bottom > .ant-tabs-nav::before {
+      border-bottom: none;
+    }
+
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-nav-list,
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-nav-list {
+      width: 100%;
+      display: flex;
+    }
+
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-tab,
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-tab {
+      flex: 1 1 0;
+      justify-content: center;
+    }
+
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-tab-btn,
+    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-tab-btn {
+      text-align: center;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav {
+      display: inline-flex;
+      width: fit-content;
+      max-width: 100%;
+      flex: 0 0 auto;
+      padding: 4px;
+      background: ${n.container.background};
+      border: none;
+      border-radius: 8px;
+      box-shadow: none;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav::before {
+      border-bottom: none;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-wrap,
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-list {
+      width: auto;
+      flex: 0 0 auto;
+      max-width: 100%;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-nav-list {
+      gap: 4px;
+      align-items: center;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab {
+      min-width: var(--ds-tabs-segmented-min-width);
+      height: var(--ds-tabs-height);
+      padding: 0 16px;
+      justify-content: center;
+      border-radius: 6px;
+      border: 1px solid transparent;
+      background: transparent;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab-btn {
+      color: ${n.text.inactive};
+      font-weight: ${n.typography.fontWeight};
+      letter-spacing: 0;
+      text-transform: none;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'][data-ds-size='sm'].ant-tabs-top .ant-tabs-tab-btn {
+      font-size: ${c.md.fontSize};
+      line-height: ${c.md.lineHeight};
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active {
+      background: ${n.item.selectedBackground};
+      border-color: transparent;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+      color: ${t.text.active};
+      font-weight: 700;
+      letter-spacing: 0;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-ink-bar {
+      display: none;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-content-holder {
+      margin-top: 16px;
+    }
+
+    [data-ds-tabs][data-ds-variant='segmented-light'][data-ds-layout='equal-width'].ant-tabs-top > .ant-tabs-nav {
+      display: flex;
+      width: 100%;
+    }
+  `, document.head.appendChild(r);
+}
+function u(e) {
+	e && e.querySelectorAll(".ant-tabs-tab-btn").forEach((e) => {
+		let t = (e.textContent ?? "").replace(/\s+/g, " ").trim();
+		e.setAttribute(o, t);
+	});
+}
+var d = ({ dsVariant: e = "line", dsSize: a = "md", dsLayout: o = "default-hug", dsUnderline: d = !1, indicator: f, style: p, className: m, ...h }) => {
+	let g = r(null);
+	n(() => {
+		l(), u(g.current);
+		let e = new MutationObserver(() => {
+			u(g.current);
+		});
+		return g.current && e.observe(g.current, {
+			subtree: !0,
+			childList: !0,
+			characterData: !0
+		}), () => {
+			e.disconnect();
+		};
+	}, []);
+	let _ = c[a], v = f ?? {
+		size: (e) => Math.max(e - s * 2, 0),
+		align: "center"
+	};
+	return /* @__PURE__ */ i("div", {
+		ref: g,
+		children: /* @__PURE__ */ i(t, {
+			...h,
+			className: m,
+			animated: !1,
+			indicator: v,
+			style: {
+				...p,
+				"--ds-tabs-height": _.tabHeight,
+				"--ds-tabs-font-size": _.fontSize,
+				"--ds-tabs-line-height": _.lineHeight,
+				"--ds-tabs-letter-active": _.letterSpacingActive,
+				"--ds-tabs-letter-inactive": _.letterSpacingInactive,
+				"--ds-tabs-segmented-min-width": _.segmentedMinWidth
+			},
+			"data-ds-tabs": !0,
+			"data-ds-variant": e,
+			"data-ds-size": a,
+			"data-ds-layout": o,
+			"data-ds-underline": d ? "true" : "false"
+		})
+	});
+};
+//#endregion
+export { d as Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/dist-lib/navigation/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../src/ds/navigation/Tabs.tsx"],"sourcesContent":["import { Tabs as AntTabs } from 'antd';\nimport type { TabsProps as AntTabsProps } from 'antd';\nimport { useEffect, useRef } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSTabsSize = 'sm' | 'md' | 'lg';\nexport type DSTabsLayout = 'default-hug' | 'equal-width';\nexport type DSTabsVariant = 'line' | 'segmented-light';\n\nexport type TabsProps = AntTabsProps & {\n  /** DS visual variant. */\n  dsVariant?: DSTabsVariant;\n  /** DS tab size mapped from Figma menu tab variants. */\n  dsSize?: DSTabsSize;\n  /** DS layout mode: intrinsic tab widths or equal-width tabs. */\n  dsLayout?: DSTabsLayout;\n  /** DS underline baseline under the tab row. */\n  dsUnderline?: boolean;\n};\n\nconst STYLE_ID = 'ds-tabs-styles';\nconst LABEL_STABILITY_ATTR = 'data-ds-tab-label';\nconst TAB_HORIZONTAL_PADDING_PX = 16;\n\nconst SIZE_TOKENS: Record<DSTabsSize, {\n  tabHeight: string;\n  fontSize: string;\n  lineHeight: string;\n  letterSpacingActive: string;\n  letterSpacingInactive: string;\n  segmentedMinWidth: string;\n}> = {\n  sm: {\n    tabHeight: '26px',\n    fontSize: '12px',\n    lineHeight: '16px',\n    letterSpacingActive: '0.54px',\n    letterSpacingInactive: '0.48px',\n    segmentedMinWidth: '104px',\n  },\n  md: {\n    tabHeight: '40px',\n    fontSize: '14px',\n    lineHeight: '18px',\n    letterSpacingActive: '0.56px',\n    letterSpacingInactive: '0.49px',\n    segmentedMinWidth: '132px',\n  },\n  lg: {\n    tabHeight: '44px',\n    fontSize: '16px',\n    lineHeight: '20px',\n    letterSpacingActive: '0.56px',\n    letterSpacingInactive: '0.48px',\n    segmentedMinWidth: '160px',\n  },\n};\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n  if (document.getElementById(STYLE_ID)) return;\n\n  const { tabs, segmented } = dsSemanticTokens;\n\n  const style = document.createElement('style');\n  style.id = STYLE_ID;\n  style.textContent = `\n    [data-ds-tabs].ant-tabs .ant-tabs-nav {\n      margin: 0;\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-tab {\n      margin: 0;\n      padding: 0 16px;\n      height: var(--ds-tabs-height);\n      align-items: center;\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn {\n      display: inline-grid;\n      color: ${tabs.text.inactive};\n      font-size: var(--ds-tabs-font-size);\n      font-weight: 600;\n      line-height: var(--ds-tabs-line-height);\n      letter-spacing: var(--ds-tabs-letter-inactive);\n      text-transform: uppercase;\n    }\n\n    /* Reserve width using a hidden bold clone to prevent layout shift on activation. */\n    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn::after {\n      content: attr(${LABEL_STABILITY_ATTR});\n      font-size: inherit;\n      font-weight: 700;\n      line-height: inherit;\n      letter-spacing: var(--ds-tabs-letter-active);\n      text-transform: inherit;\n      visibility: hidden;\n      pointer-events: none;\n      height: 0;\n      overflow: hidden;\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n      color: ${tabs.text.active};\n      font-weight: 700;\n      letter-spacing: var(--ds-tabs-letter-active);\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-ink-bar {\n      height: 4px;\n      background: ${tabs.indicator.active};\n    }\n\n    [data-ds-tabs].ant-tabs .ant-tabs-ink-bar,\n    [data-ds-tabs].ant-tabs .ant-tabs-tab,\n    [data-ds-tabs].ant-tabs .ant-tabs-tab-btn,\n    [data-ds-tabs].ant-tabs .ant-tabs-content,\n    [data-ds-tabs].ant-tabs .ant-tabs-tabpane {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    [data-ds-tabs].ant-tabs-top > .ant-tabs-content-holder {\n      margin-top: 24px;\n    }\n\n    [data-ds-tabs][data-ds-underline='true'].ant-tabs-top > .ant-tabs-nav::before,\n    [data-ds-tabs][data-ds-underline='true'].ant-tabs-bottom > .ant-tabs-nav::before {\n      border-bottom: 1px solid ${tabs.indicator.baseline};\n    }\n\n    [data-ds-tabs][data-ds-underline='false'].ant-tabs-top > .ant-tabs-nav::before,\n    [data-ds-tabs][data-ds-underline='false'].ant-tabs-bottom > .ant-tabs-nav::before {\n      border-bottom: none;\n    }\n\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-nav-list,\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-nav-list {\n      width: 100%;\n      display: flex;\n    }\n\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-tab,\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-tab {\n      flex: 1 1 0;\n      justify-content: center;\n    }\n\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-top .ant-tabs-tab-btn,\n    [data-ds-tabs][data-ds-layout='equal-width'].ant-tabs-bottom .ant-tabs-tab-btn {\n      text-align: center;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav {\n      display: inline-flex;\n      width: fit-content;\n      max-width: 100%;\n      flex: 0 0 auto;\n      padding: 4px;\n      background: ${segmented.container.background};\n      border: none;\n      border-radius: 8px;\n      box-shadow: none;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav::before {\n      border-bottom: none;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-wrap,\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-nav .ant-tabs-nav-list {\n      width: auto;\n      flex: 0 0 auto;\n      max-width: 100%;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-nav-list {\n      gap: 4px;\n      align-items: center;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab {\n      min-width: var(--ds-tabs-segmented-min-width);\n      height: var(--ds-tabs-height);\n      padding: 0 16px;\n      justify-content: center;\n      border-radius: 6px;\n      border: 1px solid transparent;\n      background: transparent;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab-btn {\n      color: ${segmented.text.inactive};\n      font-weight: ${segmented.typography.fontWeight};\n      letter-spacing: 0;\n      text-transform: none;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'][data-ds-size='sm'].ant-tabs-top .ant-tabs-tab-btn {\n      font-size: ${SIZE_TOKENS.md.fontSize};\n      line-height: ${SIZE_TOKENS.md.lineHeight};\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active {\n      background: ${segmented.item.selectedBackground};\n      border-color: transparent;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n      color: ${tabs.text.active};\n      font-weight: 700;\n      letter-spacing: 0;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top .ant-tabs-ink-bar {\n      display: none;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'].ant-tabs-top > .ant-tabs-content-holder {\n      margin-top: 16px;\n    }\n\n    [data-ds-tabs][data-ds-variant='segmented-light'][data-ds-layout='equal-width'].ant-tabs-top > .ant-tabs-nav {\n      display: flex;\n      width: 100%;\n    }\n  `;\n\n  document.head.appendChild(style);\n}\n\nfunction syncTabLabelStabilityAttrs(root: HTMLElement | null) {\n  if (!root) return;\n\n  const tabButtons = root.querySelectorAll<HTMLElement>('.ant-tabs-tab-btn');\n  tabButtons.forEach((button) => {\n    const label = (button.textContent ?? '').replace(/\\s+/g, ' ').trim();\n    button.setAttribute(LABEL_STABILITY_ATTR, label);\n  });\n}\n\nexport const Tabs = ({\n  dsVariant = 'line',\n  dsSize = 'md',\n  dsLayout = 'default-hug',\n  dsUnderline = false,\n  indicator,\n  style,\n  className,\n  ...props\n}: TabsProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    injectStyles();\n\n    syncTabLabelStabilityAttrs(rootRef.current);\n\n    const observer = new MutationObserver(() => {\n      syncTabLabelStabilityAttrs(rootRef.current);\n    });\n\n    if (rootRef.current) {\n      observer.observe(rootRef.current, {\n        subtree: true,\n        childList: true,\n        characterData: true,\n      });\n    }\n\n    return () => {\n      observer.disconnect();\n    };\n  }, []);\n\n  const tokens = SIZE_TOKENS[dsSize];\n  const resolvedIndicator = indicator ?? {\n    size: (origin: number) => Math.max(origin - TAB_HORIZONTAL_PADDING_PX * 2, 0),\n    align: 'center' as const,\n  };\n\n  return (\n    <div ref={rootRef}>\n      <AntTabs\n        {...props}\n        className={className}\n        animated={false}\n        indicator={resolvedIndicator}\n        style={{\n          ...style,\n          ['--ds-tabs-height' as string]: tokens.tabHeight,\n          ['--ds-tabs-font-size' as string]: tokens.fontSize,\n          ['--ds-tabs-line-height' as string]: tokens.lineHeight,\n          ['--ds-tabs-letter-active' as string]: tokens.letterSpacingActive,\n          ['--ds-tabs-letter-inactive' as string]: tokens.letterSpacingInactive,\n          ['--ds-tabs-segmented-min-width' as string]: tokens.segmentedMinWidth,\n        }}\n        data-ds-tabs\n        data-ds-variant={dsVariant}\n        data-ds-size={dsSize}\n        data-ds-layout={dsLayout}\n        data-ds-underline={dsUnderline ? 'true' : 'false'}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;AAoBA,IAAM,IAAW,kBACX,IAAuB,qBACvB,IAA4B,IAE5B,IAOD;CACH,IAAI;EACF,WAAW;EACX,UAAU;EACV,YAAY;EACZ,qBAAqB;EACrB,uBAAuB;EACvB,mBAAmB;EACpB;CACD,IAAI;EACF,WAAW;EACX,UAAU;EACV,YAAY;EACZ,qBAAqB;EACrB,uBAAuB;EACvB,mBAAmB;EACpB;CACD,IAAI;EACF,WAAW;EACX,UAAU;EACV,YAAY;EACZ,qBAAqB;EACrB,uBAAuB;EACvB,mBAAmB;EACpB;CACF;AAED,SAAS,IAAe;AAEtB,KADI,OAAO,WAAa,OACpB,SAAS,eAAe,EAAS,CAAE;CAEvC,IAAM,EAAE,SAAM,iBAAc,GAEtB,IAAQ,SAAS,cAAc,QAAQ;AAoK7C,CAnKA,EAAM,KAAK,GACX,EAAM,cAAc;;;;;;;;;;;;;;eAcP,EAAK,KAAK,SAAS;;;;;;;;;;sBAUZ,EAAqB;;;;;;;;;;;;;eAa5B,EAAK,KAAK,OAAO;;;;;;;oBAOZ,EAAK,UAAU,OAAO;;;;;;;;;;;;;;;;;;iCAkBT,EAAK,UAAU,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBA+BrC,EAAU,UAAU,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAiCpC,EAAU,KAAK,SAAS;qBAClB,EAAU,WAAW,WAAW;;;;;;mBAMlC,EAAY,GAAG,SAAS;qBACtB,EAAY,GAAG,WAAW;;;;oBAI3B,EAAU,KAAK,mBAAmB;;;;;eAKvC,EAAK,KAAK,OAAO;;;;;;;;;;;;;;;;;KAmB9B,SAAS,KAAK,YAAY,EAAM;;AAGlC,SAAS,EAA2B,GAA0B;AACvD,MAEc,EAAK,iBAA8B,oBACtD,CAAW,SAAS,MAAW;EAC7B,IAAM,KAAS,EAAO,eAAe,IAAI,QAAQ,QAAQ,IAAI,CAAC,MAAM;AACpE,IAAO,aAAa,GAAsB,EAAM;GAChD;;AAGJ,IAAa,KAAQ,EACnB,eAAY,QACZ,YAAS,MACT,cAAW,eACX,iBAAc,IACd,cACA,UACA,cACA,GAAG,QACY;CACf,IAAM,IAAU,EAAuB,KAAK;AAE5C,SAAgB;AAGd,EAFA,GAAc,EAEd,EAA2B,EAAQ,QAAQ;EAE3C,IAAM,IAAW,IAAI,uBAAuB;AAC1C,KAA2B,EAAQ,QAAQ;IAC3C;AAUF,SARI,EAAQ,WACV,EAAS,QAAQ,EAAQ,SAAS;GAChC,SAAS;GACT,WAAW;GACX,eAAe;GAChB,CAAC,QAGS;AACX,KAAS,YAAY;;IAEtB,EAAE,CAAC;CAEN,IAAM,IAAS,EAAY,IACrB,IAAoB,KAAa;EACrC,OAAO,MAAmB,KAAK,IAAI,IAAS,IAA4B,GAAG,EAAE;EAC7E,OAAO;EACR;AAED,QACE,kBAAC,OAAD;EAAK,KAAK;YACR,kBAAC,GAAD;GACE,GAAI;GACO;GACX,UAAU;GACV,WAAW;GACX,OAAO;IACL,GAAG;IACF,oBAA+B,EAAO;IACtC,uBAAkC,EAAO;IACzC,yBAAoC,EAAO;IAC3C,2BAAsC,EAAO;IAC7C,6BAAwC,EAAO;IAC/C,iCAA4C,EAAO;IACrD;GACD,gBAAA;GACA,mBAAiB;GACjB,gBAAc;GACd,kBAAgB;GAChB,qBAAmB,IAAc,SAAS;GAC1C,CAAA;EACE,CAAA"}

package/dist-lib/navigation/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Breadcrumb.cjs`),t=require(`./Anchor.cjs`),n=require(`./Pagination.cjs`),r=require(`../Steps-Dhq_inin.cjs`),i=require(`./Tabs.cjs`),a=require(`../Dropdown-BU7v5Q4i.cjs`),o=require(`./Menu.cjs`);exports.Anchor=t.Anchor,exports.Breadcrumb=e.Breadcrumb,exports.Dropdown=a.t,exports.Menu=o.Menu,exports.Pagination=n.Pagination,exports.Steps=r.t,exports.Tabs=i.Tabs;

package/dist-lib/navigation/index.js

@@ -0,0 +1,8 @@
+import { Breadcrumb as e } from "./Breadcrumb.js";
+import { Anchor as t } from "./Anchor.js";
+import { Pagination as n } from "./Pagination.js";
+import { t as r } from "../Steps-DT5AKuMX.js";
+import { Tabs as i } from "./Tabs.js";
+import { t as a } from "../Dropdown-C2t8AOdz.js";
+import { Menu as o } from "./Menu.js";
+export { t as Anchor, e as Breadcrumb, a as Dropdown, o as Menu, n as Pagination, r as Steps, i as Tabs };