@cuemath/leap 3.5.44 → 3.5.45

package/dist/features/ui/tabs/tab-tem/tab-item.js

@@ -1,45 +1,51 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { memo as p, useCallback as I } from "react";
-import T from "../../text/text.js";
-import { TabWrapper as f, Icon as b } from "../tabs-styled.js";
-const u = ({
-  tab: o,
-  isSelected: r,
-  onChange: n,
-  tabUnderlineColor: c = "WHITE_T_15",
-  selectedTabUnderlineColor: s = "WHITE",
-  activeTabTextProps: l = { $renderAs: "ub2-bold" },
-  inactiveTabTextProps: $ = { $renderAs: "ub2" }
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { memo as T, useMemo as x, useCallback as I } from "react";
+import { useTheme as g } from "styled-components";
+import v from "../../text/text.js";
+import { TabWrapper as j, Icon as k } from "../tabs-styled.js";
+const A = ({
+  tab: t,
+  isSelected: e,
+  onChange: c,
+  theme: l,
+  layout: m,
+  height: d,
+  minWidth: $
 }) => {
-  const { Icon: t, iconPosition: m = "left" } = o, d = I(() => {
-    n(o.id);
-  }, [o.id, n]), i = r ? l : $;
-  return /* @__PURE__ */ a(
-    f,
+  const { tabs: f } = g(), { Icon: s, iconPosition: u = "left", disabled: o = !1 } = t, i = f[l], n = x(() => o ? "disabled" : e ? "active" : "inactive", [o, e]), a = i.text[n], C = n === "active" ? i.underline[n] : "TRANSPARENT", b = i.icon[n], h = I(() => {
+    o || c(t.id);
+  }, [t.id, c, o]);
+  return /* @__PURE__ */ p(
+    j,
     {
       $flexDirection: "row",
       $alignItems: "center",
       $justifyContent: "center",
-      $gapX: 0.875,
-      onClick: d,
-      $borderBottomColor: r ? s : c,
+      $gutterX: 1,
+      onClick: h,
+      $borderBottomColor: C,
+      $disabled: o,
+      $layout: m,
+      $theme: l,
+      $isSelected: e,
+      $height: d,
+      $minWidth: $,
       children: [
-        t ? /* @__PURE__ */ e(b, { $selected: r, $iconPosition: m, children: /* @__PURE__ */ e(t, {}) }) : void 0,
-        /* @__PURE__ */ e(
-          T,
+        s && e && !o ? /* @__PURE__ */ r(k, { $iconPosition: u, $iconColor: b, children: /* @__PURE__ */ r(s, {}) }) : void 0,
+        /* @__PURE__ */ r(
+          v,
           {
             $align: "center",
-            $color: "WHITE",
-            ...i,
-            $renderAs: i.$renderAs,
-            children: o.label
+            $color: a.color,
+            $renderAs: a.variant,
+            children: t.label
           }
         )
       ]
     }
   );
-}, h = p(u);
+}, w = T(A);
 export {
-  h as default
+  w as default
 };
 //# sourceMappingURL=tab-item.js.map

package/dist/features/ui/tabs/tab-tem/tab-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","sources":["../../../../../src/features/ui/tabs/tab-tem/tab-item.tsx"],"sourcesContent":["import { memo, useCallback } from 'react';\n\nimport Text from '../../text/text';\nimport * as Styled from '../tabs-styled';\nimport type { ITabItemProps } from '../tabs-types';\n\nconst TabItem = ({\n  tab,\n  isSelected,\n  onChange,\n  tabUnderlineColor = 'WHITE_T_15',\n  selectedTabUnderlineColor = 'WHITE',\n  activeTabTextProps = { $renderAs: 'ub2-bold' },\n  inactiveTabTextProps = { $renderAs: 'ub2' },\n}: ITabItemProps) => {\n  const { Icon, iconPosition = 'left' } = tab;\n\n  const handleClick = useCallback(() => {\n    onChange(tab.id);\n  }, [tab.id, onChange]);\n\n  const activeTextProps = isSelected ? activeTabTextProps : inactiveTabTextProps;\n\n  return (\n    <Styled.TabWrapper\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $gapX={0.875}\n      onClick={handleClick}\n      $borderBottomColor={isSelected ? selectedTabUnderlineColor : tabUnderlineColor}\n    >\n      {Icon ? (\n        <Styled.Icon $selected={isSelected} $iconPosition={iconPosition}>\n          <Icon />\n        </Styled.Icon>\n      ) : undefined}\n      <Text\n        $align=\"center\"\n        $color=\"WHITE\"\n        {...activeTextProps}\n        $renderAs={activeTextProps.$renderAs}\n      >\n        {tab.label}\n      </Text>\n    </Styled.TabWrapper>\n  );\n};\n\nexport default memo(TabItem);\n"],"names":["TabItem","tab","isSelected","onChange","tabUnderlineColor","selectedTabUnderlineColor","activeTabTextProps","inactiveTabTextProps","Icon","iconPosition","handleClick","useCallback","activeTextProps","jsxs","Styled.TabWrapper","jsx","Styled.Icon","Text","TabItem$1","memo"],"mappings":";;;;AAMA,MAAMA,IAAU,CAAC;AAAA,EACf,KAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,2BAAAC,IAA4B;AAAA,EAC5B,oBAAAC,IAAqB,EAAE,WAAW,WAAW;AAAA,EAC7C,sBAAAC,IAAuB,EAAE,WAAW,MAAM;AAC5C,MAAqB;AACnB,QAAM,EAAEC,MAAAA,GAAM,cAAAC,IAAe,OAAA,IAAWR,GAElCS,IAAcC,EAAY,MAAM;AACpC,IAAAR,EAASF,EAAI,EAAE;AAAA,EACd,GAAA,CAACA,EAAI,IAAIE,CAAQ,CAAC,GAEfS,IAAkBV,IAAaI,IAAqBC;AAGxD,SAAA,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,SAASJ;AAAA,MACT,oBAAoBR,IAAaG,IAA4BD;AAAA,MAE5D,UAAA;AAAA,QACCI,IAAA,gBAAAO,EAACC,GAAA,EAAY,WAAWd,GAAY,eAAeO,GACjD,UAAA,gBAAAM,EAACP,GAAK,CAAA,CAAA,EACR,CAAA,IACE;AAAA,QACJ,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,QAAO;AAAA,YACN,GAAGL;AAAA,YACJ,WAAWA,EAAgB;AAAA,YAE1B,UAAIX,EAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeiB,IAAAC,EAAKnB,CAAO;"}
+{"version":3,"file":"tab-item.js","sources":["../../../../../src/features/ui/tabs/tab-tem/tab-item.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../../text/text';\nimport type { TColorNames, TTextVariants } from '../../types';\nimport * as Styled from '../tabs-styled';\nimport type { ITabItemProps } from '../tabs-types';\n\nconst TabItemComponent = <TId extends string = string>({\n  tab,\n  isSelected,\n  onChange,\n  theme,\n  layout,\n  height,\n  minWidth,\n}: ITabItemProps<TId>) => {\n  const { tabs: tabsTheme } = useTheme();\n  const { Icon, iconPosition = 'left', disabled = false } = tab;\n  const themeConfig = tabsTheme[theme];\n  const tabState = useMemo(() => {\n    if (disabled) return 'disabled';\n\n    if (isSelected) return 'active';\n\n    return 'inactive';\n  }, [disabled, isSelected]);\n  const textConfig = themeConfig.text[tabState];\n  const underlineColor: TColorNames =\n    tabState === 'active' ? themeConfig.underline[tabState] : 'TRANSPARENT';\n  const iconColor = themeConfig.icon[tabState];\n\n  const handleClick = useCallback(() => {\n    if (!disabled) {\n      onChange(tab.id);\n    }\n  }, [tab.id, onChange, disabled]);\n\n  return (\n    <Styled.TabWrapper\n      $flexDirection=\"row\"\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $gutterX={1}\n      onClick={handleClick}\n      $borderBottomColor={underlineColor}\n      $disabled={disabled}\n      $layout={layout}\n      $theme={theme}\n      $isSelected={isSelected}\n      $height={height}\n      $minWidth={minWidth}\n    >\n      {Icon && isSelected && !disabled ? (\n        <Styled.Icon $iconPosition={iconPosition} $iconColor={iconColor}>\n          <Icon />\n        </Styled.Icon>\n      ) : undefined}\n      <Text\n        $align=\"center\"\n        $color={textConfig.color}\n        $renderAs={textConfig.variant as TTextVariants}\n      >\n        {tab.label}\n      </Text>\n    </Styled.TabWrapper>\n  );\n};\n\nconst TabItem = memo(TabItemComponent) as <TId extends string = string>(\n  props: ITabItemProps<TId>,\n) => React.ReactElement;\n\nexport default TabItem;\n"],"names":["TabItemComponent","tab","isSelected","onChange","theme","layout","height","minWidth","tabsTheme","useTheme","Icon","iconPosition","disabled","themeConfig","tabState","useMemo","textConfig","underlineColor","iconColor","handleClick","useCallback","jsxs","Styled.TabWrapper","jsx","Styled.Icon","Text","TabItem","memo"],"mappings":";;;;;AAQA,MAAMA,IAAmB,CAA8B;AAAA,EACrD,KAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACF,MAA0B;AACxB,QAAM,EAAE,MAAMC,EAAU,IAAIC,EAAS,GAC/B,EAAA,MAAEC,GAAM,cAAAC,IAAe,QAAQ,UAAAC,IAAW,GAAU,IAAAX,GACpDY,IAAcL,EAAUJ,CAAK,GAC7BU,IAAWC,EAAQ,MACnBH,IAAiB,aAEjBV,IAAmB,WAEhB,YACN,CAACU,GAAUV,CAAU,CAAC,GACnBc,IAAaH,EAAY,KAAKC,CAAQ,GACtCG,IACJH,MAAa,WAAWD,EAAY,UAAUC,CAAQ,IAAI,eACtDI,IAAYL,EAAY,KAAKC,CAAQ,GAErCK,IAAcC,EAAY,MAAM;AACpC,IAAKR,KACHT,EAASF,EAAI,EAAE;AAAA,KAEhB,CAACA,EAAI,IAAIE,GAAUS,CAAQ,CAAC;AAG7B,SAAA,gBAAAS;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,SAASH;AAAA,MACT,oBAAoBF;AAAA,MACpB,WAAWL;AAAA,MACX,SAASP;AAAA,MACT,QAAQD;AAAA,MACR,aAAaF;AAAA,MACb,SAASI;AAAA,MACT,WAAWC;AAAA,MAEV,UAAA;AAAA,QAAAG,KAAQR,KAAc,CAACU,IACtB,gBAAAW,EAACC,GAAA,EAAY,eAAeb,GAAc,YAAYO,GACpD,UAAC,gBAAAK,EAAAb,GAAA,CAAA,CAAK,GACR,IACE;AAAA,QACJ,gBAAAa;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,QAAO;AAAA,YACP,QAAQT,EAAW;AAAA,YACnB,WAAWA,EAAW;AAAA,YAErB,UAAIf,EAAA;AAAA,UAAA;AAAA,QACP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEMyB,IAAUC,EAAK3B,CAAgB;"}

package/dist/features/ui/tabs/tabs-styled.js

@@ -1,31 +1,57 @@
-import e from "styled-components";
-import i from "../layout/flex-view.js";
-const l = e.div(({ theme: r, $tabsCount: o, $background: t }) => {
-  const { colors: s } = r;
+import n from "styled-components";
+import g from "../layout/flex-view.js";
+const f = n.div(({ theme: t, $inactiveUnderlineColor: o }) => {
+  const { colors: r } = t;
   return `
-    display: grid;
-    background: ${s[t]};
-    grid-template-columns: repeat(${o}, 1fr);
+    display: flex;
+    border-bottom: 1.5px solid ${r[o]};
+    position: relative;
   `;
-}), a = e(i)(({ $borderBottomColor: r }) => `
-    cursor: pointer;
-    border-bottom: 1.5px solid ${r};
+}), m = n(g)(({
+  theme: t,
+  $borderBottomColor: o,
+  $disabled: r,
+  $layout: e,
+  $theme: l,
+  $isSelected: a,
+  $height: p,
+  $minWidth: s
+}) => {
+  const { colors: i, tabs: c } = t, d = c[l], x = i[d.background.hover];
+  return `
+    cursor: ${r ? "not-allowed" : "pointer"};
+    border-bottom: 1.5px solid ${i[o]};
     transition: all 0.3s ease;
-  `), d = e.div(({ theme: r, $iconPosition: o, $selected: t }) => `
+    height: ${p || 40}px;
+    ${s ? `min-width: ${s}px;` : ""}
+    position: relative;
+    margin-bottom: -1.5px;
+    background-color: transparent;
+    ${e === "fill" ? "flex: 1;" : "flex-shrink: 0;"}
+
+    ${!r && !a ? `
+      &:hover {
+        background-color: ${x};
+      }
+    ` : ""}
+  `;
+}), $ = n.div(({ theme: t, $iconPosition: o, $iconColor: r }) => {
+  const { colors: e } = t;
+  return `
     ${o === "left" ? "padding-right" : "padding-left"}: 4px;
     order: ${o === "left" ? -1 : 1};
-    
+
     & svg {
-      display: ${t ? "block" : "none"};
       width: 16px;
       height: 16px;
-      color: ${r.colors.WHITE_1};
+      color: ${e[r]};
       transition: color 0.2s ease-in-out;
     }
-      `);
+  `;
+});
 export {
-  d as Icon,
-  a as TabWrapper,
-  l as TabsWrapper
+  $ as Icon,
+  m as TabWrapper,
+  f as TabsWrapper
 };
 //# sourceMappingURL=tabs-styled.js.map

package/dist/features/ui/tabs/tabs-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-styled.js","sources":["../../../../src/features/ui/tabs/tabs-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport type { TColorNames } from '../types';\nimport type { ITabItem } from './tabs-types';\n\ninterface TabsWrapperProps {\n  $tabsCount: number;\n  $background: TColorNames;\n}\n\nconst TabsWrapper = styled.div<TabsWrapperProps>(({ theme, $tabsCount, $background }) => {\n  const { colors } = theme;\n\n  return `\n    display: grid;\n    background: ${colors[$background]};\n    grid-template-columns: repeat(${$tabsCount}, 1fr);\n  `;\n});\n\ninterface ITabsText {\n  $borderBottomColor: TColorNames;\n}\n\nconst TabWrapper = styled(FlexView)<ITabsText>(({ $borderBottomColor }) => {\n  return `\n    cursor: pointer;\n    border-bottom: 1.5px solid ${$borderBottomColor};\n    transition: all 0.3s ease;\n  `;\n});\n\ninterface IStyledIconProps {\n  $iconPosition: NonNullable<ITabItem['iconPosition']>;\n  $selected: boolean;\n}\n\nconst Icon = styled.div<IStyledIconProps>(({ theme, $iconPosition, $selected }) => {\n  return `\n    ${$iconPosition === 'left' ? 'padding-right' : 'padding-left'}: 4px;\n    order: ${$iconPosition === 'left' ? -1 : 1};\n    \n    & svg {\n      display: ${$selected ? 'block' : 'none'};\n      width: 16px;\n      height: 16px;\n      color: ${theme.colors.WHITE_1};\n      transition: color 0.2s ease-in-out;\n    }\n      `;\n});\n\nexport { TabsWrapper, Icon, TabWrapper };\n"],"names":["TabsWrapper","styled","theme","$tabsCount","$background","colors","TabWrapper","FlexView","$borderBottomColor","Icon","$iconPosition","$selected"],"mappings":";;AAWM,MAAAA,IAAcC,EAAO,IAAsB,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,aAAAC,QAAkB;AACjF,QAAA,EAAE,QAAAC,EAAW,IAAAH;AAEZ,SAAA;AAAA;AAAA,kBAESG,EAAOD,CAAW,CAAC;AAAA,oCACDD,CAAU;AAAA;AAE9C,CAAC,GAMKG,IAAaL,EAAOM,CAAQ,EAAa,CAAC,EAAE,oBAAAC,QACzC;AAAA;AAAA,iCAEwBA,CAAkB;AAAA;AAAA,GAGlD,GAOKC,IAAOR,EAAO,IAAsB,CAAC,EAAE,OAAAC,GAAO,eAAAQ,GAAe,WAAAC,QAC1D;AAAA,MACHD,MAAkB,SAAS,kBAAkB,cAAc;AAAA,aACpDA,MAAkB,SAAS,KAAK,CAAC;AAAA;AAAA;AAAA,iBAG7BC,IAAY,UAAU,MAAM;AAAA;AAAA;AAAA,eAG9BT,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA,OAIlC;"}
+{"version":3,"file":"tabs-styled.js","sources":["../../../../src/features/ui/tabs/tabs-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport type { TColorNames } from '../types';\nimport type { ITabItem, TTabsLayout } from './tabs-types';\nimport type { TTabsTheme } from '../theme/tabs';\n\ninterface ITabsWrapperProps {\n  $inactiveUnderlineColor: TColorNames;\n}\n\nconst TabsWrapper = styled.div<ITabsWrapperProps>(({ theme, $inactiveUnderlineColor }) => {\n  const { colors } = theme;\n\n  return `\n    display: flex;\n    border-bottom: 1.5px solid ${colors[$inactiveUnderlineColor]};\n    position: relative;\n  `;\n});\n\ninterface ITabWrapperProps {\n  $borderBottomColor: TColorNames;\n  $disabled?: boolean;\n  $layout: TTabsLayout;\n  $theme: TTabsTheme;\n  $isSelected?: boolean;\n  $height?: number;\n  $minWidth?: number;\n}\n\nconst TabWrapper = styled(FlexView)<ITabWrapperProps>(({\n  theme,\n  $borderBottomColor,\n  $disabled,\n  $layout,\n  $theme: tabsTheme,\n  $isSelected,\n  $height,\n  $minWidth,\n}) => {\n  const { colors, tabs } = theme;\n  const tabsThemeConfig = tabs[tabsTheme];\n  const hoverBackgroundColor = colors[tabsThemeConfig.background.hover];\n\n  return `\n    cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    border-bottom: 1.5px solid ${colors[$borderBottomColor]};\n    transition: all 0.3s ease;\n    height: ${$height || 40}px;\n    ${$minWidth ? `min-width: ${$minWidth}px;` : ''}\n    position: relative;\n    margin-bottom: -1.5px;\n    background-color: transparent;\n    ${$layout === 'fill' ? 'flex: 1;' : 'flex-shrink: 0;'}\n\n    ${\n      !$disabled && !$isSelected\n        ? `\n      &:hover {\n        background-color: ${hoverBackgroundColor};\n      }\n    `\n        : ''\n    }\n  `;\n});\n\ninterface IStyledIconProps {\n  $iconPosition: NonNullable<ITabItem['iconPosition']>;\n  $iconColor: TColorNames;\n}\n\nconst Icon = styled.div<IStyledIconProps>(({ theme, $iconPosition, $iconColor }) => {\n  const { colors } = theme;\n\n  return `\n    ${$iconPosition === 'left' ? 'padding-right' : 'padding-left'}: 4px;\n    order: ${$iconPosition === 'left' ? -1 : 1};\n\n    & svg {\n      width: 16px;\n      height: 16px;\n      color: ${colors[$iconColor]};\n      transition: color 0.2s ease-in-out;\n    }\n  `;\n});\n\nexport { TabsWrapper, Icon, TabWrapper };\n"],"names":["TabsWrapper","styled","theme","$inactiveUnderlineColor","colors","TabWrapper","FlexView","$borderBottomColor","$disabled","$layout","tabsTheme","$isSelected","$height","$minWidth","tabs","tabsThemeConfig","hoverBackgroundColor","Icon","$iconPosition","$iconColor"],"mappings":";;AAWA,MAAMA,IAAcC,EAAO,IAAuB,CAAC,EAAE,OAAAC,GAAO,yBAAAC,QAA8B;AAClF,QAAA,EAAE,QAAAC,EAAW,IAAAF;AAEZ,SAAA;AAAA;AAAA,iCAEwBE,EAAOD,CAAuB,CAAC;AAAA;AAAA;AAGhE,CAAC,GAYKE,IAAaJ,EAAOK,CAAQ,EAAoB,CAAC;AAAA,EACrD,OAAAJ;AAAA,EACA,oBAAAK;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAQC;AAAA,EACR,aAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAT,GAAQ,MAAAU,EAAS,IAAAZ,GACnBa,IAAkBD,EAAKJ,CAAS,GAChCM,IAAuBZ,EAAOW,EAAgB,WAAW,KAAK;AAE7D,SAAA;AAAA,cACKP,IAAY,gBAAgB,SAAS;AAAA,iCAClBJ,EAAOG,CAAkB,CAAC;AAAA;AAAA,cAE7CK,KAAW,EAAE;AAAA,MACrBC,IAAY,cAAcA,CAAS,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,MAI7CJ,MAAY,SAAS,aAAa,iBAAiB;AAAA;AAAA,MAGnD,CAACD,KAAa,CAACG,IACX;AAAA;AAAA,4BAEkBK,CAAoB;AAAA;AAAA,QAGtC,EACN;AAAA;AAEJ,CAAC,GAOKC,IAAOhB,EAAO,IAAsB,CAAC,EAAE,OAAAC,GAAO,eAAAgB,GAAe,YAAAC,QAAiB;AAC5E,QAAA,EAAE,QAAAf,EAAW,IAAAF;AAEZ,SAAA;AAAA,MACHgB,MAAkB,SAAS,kBAAkB,cAAc;AAAA,aACpDA,MAAkB,SAAS,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAK/Bd,EAAOe,CAAU,CAAC;AAAA;AAAA;AAAA;AAIjC,CAAC;"}

package/dist/features/ui/tabs/tabs.js

@@ -1,30 +1,33 @@
-import { jsx as o } from "react/jsx-runtime";
-import { memo as a } from "react";
-import b from "./tab-tem/tab-item.js";
-import { TabsWrapper as u } from "./tabs-styled.js";
-const c = ({
-  selectedTab: m,
+import { jsx as r } from "react/jsx-runtime";
+import { memo as d } from "react";
+import { useTheme as f } from "styled-components";
+import l from "./tab-tem/tab-item.js";
+import { TabsWrapper as T } from "./tabs-styled.js";
+const b = d(function({
+  selectedTab: i,
   onChange: t,
-  tabs: e,
-  tabUnderlineColor: s,
-  selectedTabUnderlineColor: d,
-  background: n = "BLACK_4",
-  activeTabTextProps: i = { $renderAs: "ub2-bold" },
-  inactiveTabTextProps: p = { $renderAs: "ub2" }
-}) => /* @__PURE__ */ o(u, { $tabsCount: e.length, $background: n, children: e.map((r) => /* @__PURE__ */ o(
-  b,
-  {
-    tab: r,
-    isSelected: r.id === m,
-    onChange: t,
-    inactiveTabTextProps: p,
-    activeTabTextProps: i,
-    tabUnderlineColor: s,
-    selectedTabUnderlineColor: d
-  },
-  r.id
-)) }), T = a(c);
+  tabs: n,
+  theme: o = "dark",
+  layout: m = "compact",
+  height: s,
+  minWidth: a
+}) {
+  const { tabs: c } = f(), p = c[o].underline.inactive;
+  return /* @__PURE__ */ r(T, { $inactiveUnderlineColor: p, children: n.map((e) => /* @__PURE__ */ r(
+    l,
+    {
+      tab: e,
+      isSelected: e.id === i,
+      onChange: t,
+      theme: o,
+      layout: m,
+      height: s,
+      minWidth: a
+    },
+    e.id
+  )) });
+}), $ = b;
 export {
-  T as default
+  $ as default
 };
 //# sourceMappingURL=tabs.js.map

package/dist/features/ui/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":["../../../../src/features/ui/tabs/tabs.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport TabItem from './tab-tem/tab-item';\nimport * as Styled from './tabs-styled';\nimport type { ITabsProps } from './tabs-types';\n\nconst Tabs = ({\n  selectedTab,\n  onChange,\n  tabs,\n  tabUnderlineColor,\n  selectedTabUnderlineColor,\n  background = 'BLACK_4',\n  activeTabTextProps = { $renderAs: 'ub2-bold' },\n  inactiveTabTextProps = { $renderAs: 'ub2' },\n}: ITabsProps) => {\n  return (\n    <Styled.TabsWrapper $tabsCount={tabs.length} $background={background}>\n      {tabs.map(tab => (\n        <TabItem\n          key={tab.id}\n          tab={tab}\n          isSelected={tab.id === selectedTab}\n          onChange={onChange}\n          inactiveTabTextProps={inactiveTabTextProps}\n          activeTabTextProps={activeTabTextProps}\n          tabUnderlineColor={tabUnderlineColor}\n          selectedTabUnderlineColor={selectedTabUnderlineColor}\n        />\n      ))}\n    </Styled.TabsWrapper>\n  );\n};\n\nexport default memo(Tabs);\n"],"names":["Tabs","selectedTab","onChange","tabs","tabUnderlineColor","selectedTabUnderlineColor","background","activeTabTextProps","inactiveTabTextProps","jsx","Styled.TabsWrapper","tab","TabItem","memo"],"mappings":";;;;AAMA,MAAMA,IAAO,CAAC;AAAA,EACZ,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,oBAAAC,IAAqB,EAAE,WAAW,WAAW;AAAA,EAC7C,sBAAAC,IAAuB,EAAE,WAAW,MAAM;AAC5C,MAEI,gBAAAC,EAACC,GAAA,EAAmB,YAAYP,EAAK,QAAQ,aAAaG,GACvD,UAAKH,EAAA,IAAI,CACRQ,MAAA,gBAAAF;AAAA,EAACG;AAAA,EAAA;AAAA,IAEC,KAAAD;AAAA,IACA,YAAYA,EAAI,OAAOV;AAAA,IACvB,UAAAC;AAAA,IACA,sBAAAM;AAAA,IACA,oBAAAD;AAAA,IACA,mBAAAH;AAAA,IACA,2BAAAC;AAAA,EAAA;AAAA,EAPKM,EAAI;AASZ,CAAA,EACH,CAAA,GAIWR,IAAAU,EAAKb,CAAI;"}
+{"version":3,"file":"tabs.js","sources":["../../../../src/features/ui/tabs/tabs.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport TabItem from './tab-tem/tab-item';\nimport * as Styled from './tabs-styled';\nimport type { ITabsProps } from './tabs-types';\n\nconst Tabs = memo(function Tabs<TId extends string = string>({\n  selectedTab,\n  onChange,\n  tabs,\n  theme = 'dark',\n  layout = 'compact',\n  height,\n  minWidth,\n}: ITabsProps<TId>) {\n  const { tabs: tabsTheme } = useTheme();\n  const themeConfig = tabsTheme[theme];\n  const inactiveUnderlineColor = themeConfig.underline.inactive;\n\n  return (\n    <Styled.TabsWrapper $inactiveUnderlineColor={inactiveUnderlineColor}>\n      {tabs.map(tab => (\n        <TabItem\n          key={tab.id}\n          tab={tab}\n          isSelected={tab.id === selectedTab}\n          onChange={onChange}\n          theme={theme}\n          layout={layout}\n          height={height}\n          minWidth={minWidth}\n        />\n      ))}\n    </Styled.TabsWrapper>\n  );\n});\n\nexport default Tabs;\n"],"names":["Tabs","memo","selectedTab","onChange","tabs","theme","layout","height","minWidth","tabsTheme","useTheme","inactiveUnderlineColor","jsx","Styled.TabsWrapper","tab","TabItem","Tabs$1"],"mappings":";;;;;AAOA,MAAMA,IAAOC,EAAK,SAA2C;AAAA,EAC3D,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,UAAAC;AACF,GAAoB;AAClB,QAAM,EAAE,MAAMC,EAAU,IAAIC,EAAS,GAE/BC,IADcF,EAAUJ,CAAK,EACQ,UAAU;AAGnD,SAAA,gBAAAO,EAACC,GAAA,EAAmB,yBAAyBF,GAC1C,UAAAP,EAAK,IAAI,CACRU,MAAA,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MAEC,KAAAD;AAAA,MACA,YAAYA,EAAI,OAAOZ;AAAA,MACvB,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,QAAAC;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,IAPKM,EAAI;AAAA,EASZ,CAAA,EACH,CAAA;AAEJ,CAAC,GAEDE,IAAehB;"}

package/dist/features/ui/theme/get-theme.js

@@ -5,12 +5,13 @@ import g, { hues as f } from "./clrs.js";
 import { getDevice as n } from "./get-device.js";
 import p from "./input.js";
 import u from "./layout.js";
-import { getMediaQueries as c } from "./media-queries.js";
-import s from "./tab.js";
-import x from "./text.js";
-import C from "./text-button.js";
-import { getZIndexConfig as a } from "./z-index.js";
-const z = () => {
+import { getMediaQueries as s } from "./media-queries.js";
+import c from "./tab.js";
+import C from "./tabs.js";
+import a from "./text.js";
+import x from "./text-button.js";
+import { getZIndexConfig as T } from "./z-index.js";
+const D = () => {
   const t = u(), { gutter: o, deviceWidth: e } = t;
   return {
     arrowTooltip: r(),
@@ -20,15 +21,16 @@ const z = () => {
     input: p(o),
     checkbox: m(o),
     layout: t,
-    tab: s(t.gutter),
-    text: x(),
-    textButton: C(),
-    zIndex: a(),
+    tab: c(t.gutter),
+    tabs: C(),
+    text: a(),
+    textButton: x(),
+    zIndex: T(),
     device: n(e),
-    mediaQueries: c()
+    mediaQueries: s()
   };
 };
 export {
-  z as getTheme
+  D as getTheme
 };
 //# sourceMappingURL=get-theme.js.map

package/dist/features/ui/theme/get-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-theme.js","sources":["../../../../src/features/ui/theme/get-theme.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components';\n\nimport getArrowTooltipConfig from './arrow-tooltip';\nimport getButtonConfig from './button';\nimport getCheckboxConfig from './checkbox';\nimport getColors, { hues } from './clrs';\nimport { getDevice } from './get-device';\nimport getInputConfig from './input';\nimport getLayout from './layout';\nimport { getMediaQueries } from './media-queries';\nimport getTabConfig from './tab';\nimport getTextTypes from './text';\nimport getTextButtonConfig from './text-button';\nimport { getZIndexConfig } from './z-index';\n\nconst getTheme: () => DefaultTheme = () => {\n  const layout = getLayout();\n  const { gutter, deviceWidth } = layout;\n\n  return {\n    arrowTooltip: getArrowTooltipConfig(),\n    button: getButtonConfig(gutter),\n    colors: getColors(),\n    hues: hues,\n    input: getInputConfig(gutter),\n    checkbox: getCheckboxConfig(gutter),\n    layout,\n    tab: getTabConfig(layout.gutter),\n    text: getTextTypes(),\n    textButton: getTextButtonConfig(),\n    zIndex: getZIndexConfig(),\n    device: getDevice(deviceWidth),\n    mediaQueries: getMediaQueries(),\n  };\n};\n\nexport { getTheme };\n"],"names":["getTheme","layout","getLayout","gutter","deviceWidth","getArrowTooltipConfig","getButtonConfig","getColors","hues","getInputConfig","getCheckboxConfig","getTabConfig","getTextTypes","getTextButtonConfig","getZIndexConfig","getDevice","getMediaQueries"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,IAA+B,MAAM;AACzC,QAAMC,IAASC,KACT,EAAE,QAAAC,GAAQ,aAAAC,EAAgB,IAAAH;AAEzB,SAAA;AAAA,IACL,cAAcI,EAAsB;AAAA,IACpC,QAAQC,EAAgBH,CAAM;AAAA,IAC9B,QAAQI,EAAU;AAAA,IAClB,MAAAC;AAAA,IACA,OAAOC,EAAeN,CAAM;AAAA,IAC5B,UAAUO,EAAkBP,CAAM;AAAA,IAClC,QAAAF;AAAA,IACA,KAAKU,EAAaV,EAAO,MAAM;AAAA,IAC/B,MAAMW,EAAa;AAAA,IACnB,YAAYC,EAAoB;AAAA,IAChC,QAAQC,EAAgB;AAAA,IACxB,QAAQC,EAAUX,CAAW;AAAA,IAC7B,cAAcY,EAAgB;AAAA,EAAA;AAElC;"}
+{"version":3,"file":"get-theme.js","sources":["../../../../src/features/ui/theme/get-theme.ts"],"sourcesContent":["import type { DefaultTheme } from 'styled-components';\n\nimport getArrowTooltipConfig from './arrow-tooltip';\nimport getButtonConfig from './button';\nimport getCheckboxConfig from './checkbox';\nimport getColors, { hues } from './clrs';\nimport { getDevice } from './get-device';\nimport getInputConfig from './input';\nimport getLayout from './layout';\nimport { getMediaQueries } from './media-queries';\nimport getTabConfig from './tab';\nimport getTabsConfig from './tabs';\nimport getTextTypes from './text';\nimport getTextButtonConfig from './text-button';\nimport { getZIndexConfig } from './z-index';\n\nconst getTheme: () => DefaultTheme = () => {\n  const layout = getLayout();\n  const { gutter, deviceWidth } = layout;\n\n  return {\n    arrowTooltip: getArrowTooltipConfig(),\n    button: getButtonConfig(gutter),\n    colors: getColors(),\n    hues: hues,\n    input: getInputConfig(gutter),\n    checkbox: getCheckboxConfig(gutter),\n    layout,\n    tab: getTabConfig(layout.gutter),\n    tabs: getTabsConfig(),\n    text: getTextTypes(),\n    textButton: getTextButtonConfig(),\n    zIndex: getZIndexConfig(),\n    device: getDevice(deviceWidth),\n    mediaQueries: getMediaQueries(),\n  };\n};\n\nexport { getTheme };\n"],"names":["getTheme","layout","getLayout","gutter","deviceWidth","getArrowTooltipConfig","getButtonConfig","getColors","hues","getInputConfig","getCheckboxConfig","getTabConfig","getTabsConfig","getTextTypes","getTextButtonConfig","getZIndexConfig","getDevice","getMediaQueries"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,IAA+B,MAAM;AACzC,QAAMC,IAASC,KACT,EAAE,QAAAC,GAAQ,aAAAC,EAAgB,IAAAH;AAEzB,SAAA;AAAA,IACL,cAAcI,EAAsB;AAAA,IACpC,QAAQC,EAAgBH,CAAM;AAAA,IAC9B,QAAQI,EAAU;AAAA,IAClB,MAAAC;AAAA,IACA,OAAOC,EAAeN,CAAM;AAAA,IAC5B,UAAUO,EAAkBP,CAAM;AAAA,IAClC,QAAAF;AAAA,IACA,KAAKU,EAAaV,EAAO,MAAM;AAAA,IAC/B,MAAMW,EAAc;AAAA,IACpB,MAAMC,EAAa;AAAA,IACnB,YAAYC,EAAoB;AAAA,IAChC,QAAQC,EAAgB;AAAA,IACxB,QAAQC,EAAUZ,CAAW;AAAA,IAC7B,cAAca,EAAgB;AAAA,EAAA;AAElC;"}

package/dist/features/ui/theme/tabs.js

@@ -0,0 +1,52 @@
+const a = () => ({
+  light: {
+    text: {
+      active: { color: "BLACK_1", variant: "ub2-bold" },
+      inactive: { color: "BLACK_1", variant: "ub2" },
+      hover: { color: "BLACK_1", variant: "ub2" },
+      disabled: { color: "BLACK_T_38", variant: "ub2" }
+    },
+    underline: {
+      active: "BLACK_1",
+      inactive: "BLACK_T_15",
+      hover: "BLACK_T_15",
+      disabled: "BLACK_T_15"
+    },
+    icon: {
+      active: "BLACK_1",
+      inactive: "BLACK_1",
+      hover: "BLACK_1",
+      disabled: "BLACK_T_38"
+    },
+    background: {
+      hover: "BLACK_T_08"
+    }
+  },
+  dark: {
+    text: {
+      active: { color: "WHITE", variant: "ub2-bold" },
+      inactive: { color: "WHITE", variant: "ub2" },
+      hover: { color: "WHITE", variant: "ub2" },
+      disabled: { color: "WHITE_T_38", variant: "ub2" }
+    },
+    underline: {
+      active: "WHITE",
+      inactive: "WHITE_T_15",
+      hover: "WHITE_T_15",
+      disabled: "WHITE_T_15"
+    },
+    icon: {
+      active: "WHITE",
+      inactive: "WHITE",
+      hover: "WHITE",
+      disabled: "WHITE_T_38"
+    },
+    background: {
+      hover: "WHITE_T_10"
+    }
+  }
+});
+export {
+  a as default
+};
+//# sourceMappingURL=tabs.js.map

package/dist/features/ui/theme/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../../src/features/ui/theme/tabs.ts"],"sourcesContent":["import type { TColorNames } from '../types';\n\n/**\n * Theme variants for the Tabs component.\n *\n * - `light`: Dark text on light background with black hover overlay\n * - `dark`: Light text on dark background with white hover overlay\n */\nexport type TTabsTheme = 'light' | 'dark';\n\n/**\n * Theme configuration interface for tabs styling.\n * Defines colors and styles for different tab states.\n *\n * @internal\n */\ninterface ITabsThemeConfig {\n  /** Text styling for different tab states */\n  text: {\n    active: { color: TColorNames; variant: string };\n    inactive: { color: TColorNames; variant: string };\n    hover: { color: TColorNames; variant: string };\n    disabled: { color: TColorNames; variant: string };\n  };\n  /** Border bottom colors for different tab states */\n  underline: {\n    active: TColorNames;\n    inactive: TColorNames;\n    hover: TColorNames;\n    disabled: TColorNames;\n  };\n  /** Icon colors for different tab states */\n  icon: {\n    active: TColorNames;\n    inactive: TColorNames;\n    hover: TColorNames;\n    disabled: TColorNames;\n  };\n  /** Background overlay colors for interactive states */\n  background: {\n    hover: TColorNames;\n  };\n}\n\ninterface IGetTabsConfig {\n  (): Record<TTabsTheme, ITabsThemeConfig>;\n}\n\n/**\n * Returns the complete theme configuration for tabs component.\n * Provides styling for both light and dark themes including hover effects.\n *\n * @returns Theme configuration object with light and dark variants\n * @internal\n */\nconst getTabsConfig: IGetTabsConfig = () => ({\n  light: {\n    text: {\n      active: { color: 'BLACK_1', variant: 'ub2-bold' },\n      inactive: { color: 'BLACK_1', variant: 'ub2' },\n      hover: { color: 'BLACK_1', variant: 'ub2' },\n      disabled: { color: 'BLACK_T_38', variant: 'ub2' },\n    },\n    underline: {\n      active: 'BLACK_1',\n      inactive: 'BLACK_T_15',\n      hover: 'BLACK_T_15',\n      disabled: 'BLACK_T_15',\n    },\n    icon: {\n      active: 'BLACK_1',\n      inactive: 'BLACK_1',\n      hover: 'BLACK_1',\n      disabled: 'BLACK_T_38',\n    },\n    background: {\n      hover: 'BLACK_T_08',\n    },\n  },\n  dark: {\n    text: {\n      active: { color: 'WHITE', variant: 'ub2-bold' },\n      inactive: { color: 'WHITE', variant: 'ub2' },\n      hover: { color: 'WHITE', variant: 'ub2' },\n      disabled: { color: 'WHITE_T_38', variant: 'ub2' },\n    },\n    underline: {\n      active: 'WHITE',\n      inactive: 'WHITE_T_15',\n      hover: 'WHITE_T_15',\n      disabled: 'WHITE_T_15',\n    },\n    icon: {\n      active: 'WHITE',\n      inactive: 'WHITE',\n      hover: 'WHITE',\n      disabled: 'WHITE_T_38',\n    },\n    background: {\n      hover: 'WHITE_T_10',\n    },\n  },\n});\n\nexport default getTabsConfig;\nexport type { ITabsThemeConfig };\n"],"names":["getTabsConfig"],"mappings":"AAuDA,MAAMA,IAAgC,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,WAAW,SAAS,WAAW;AAAA,MAChD,UAAU,EAAE,OAAO,WAAW,SAAS,MAAM;AAAA,MAC7C,OAAO,EAAE,OAAO,WAAW,SAAS,MAAM;AAAA,MAC1C,UAAU,EAAE,OAAO,cAAc,SAAS,MAAM;AAAA,IAClD;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,QAAQ,EAAE,OAAO,SAAS,SAAS,WAAW;AAAA,MAC9C,UAAU,EAAE,OAAO,SAAS,SAAS,MAAM;AAAA,MAC3C,OAAO,EAAE,OAAO,SAAS,SAAS,MAAM;AAAA,MACxC,UAAU,EAAE,OAAO,cAAc,SAAS,MAAM;AAAA,IAClD;AAAA,IACA,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,IACT;AAAA,EACF;AACF;"}

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
 import { Channel } from '@cuemath/cue-message-broker';
 import { ChannelStatus } from '@cuemath/cue-message-broker';
-import { ComponentProps } from 'react';
 import { ComponentType } from 'react';
 import { Config } from '@lottiefiles/dotlottie-web';
 import { Context } from 'react';
@@ -780,6 +779,8 @@ export declare const getPreferencesFromConfig: IGetPreferencesFromConfig;
 
 declare const getTabConfig: IGetTabConfig;
 
+/* Excluded from this release type: getTabsConfig */
+
 declare const getTextButtonConfig: IGetTextButtonConfig;
 
 declare function getTextTypes(multiplier?: number): Record<TTextVariants, ITextConfig>;
@@ -1881,6 +1882,10 @@ declare interface IGetTabConfig {
     };
 }
 
+declare interface IGetTabsConfig {
+    (): Record<TTabsTheme, ITabsThemeConfig>;
+}
+
 declare interface IGetTextButtonConfig {
     (): {
         sizes: Record<TTextButtonSizes, ITextButtonSizeConfig>;
@@ -4124,11 +4129,40 @@ declare interface ISyncableWebGameProps {
     enableSync?: boolean;
 }
 
-declare interface ITabItem {
-    id: string;
+/**
+ * Configuration for an individual tab item.
+ *
+ * @template TId - The type for tab identifiers (must extend string)
+ *
+ * @example
+ * ```typescript
+ * type TabId = 'home' | 'profile' | 'settings';
+ *
+ * const tabItem: ITabItem<TabId> = {
+ *   id: 'home',
+ *   label: 'Home',
+ *   Icon: HomeIcon,
+ *   iconPosition: 'left'
+ * };
+ * ```
+ */
+declare interface ITabItem<TId extends string = string> {
+    /** Unique identifier for the tab. Must be type-safe and match the selectedTab type. */
+    id: TId;
+    /** Display text for the tab */
     label: string;
+    /** Position of the icon relative to the label. Defaults to 'left' if Icon is provided. */
     iconPosition?: 'left' | 'right';
+    /**
+     * Optional React component for the tab icon. Should be an SVG component that accepts SVGProps.
+     * Icons are only shown when the tab is selected and not disabled.
+     */
     Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
+    /**
+     * Whether the tab is disabled. Disabled tabs show a "not-allowed" cursor,
+     * cannot be clicked, and have reduced opacity.
+     */
+    disabled?: boolean;
 }
 
 export declare interface ITable {
@@ -4198,17 +4232,114 @@ export declare interface ITabSizeConfig {
     textVariant: TTextVariants;
 }
 
-declare interface ITabsProps {
-    selectedTab: string;
-    onChange: (tab: string) => void;
-    tabs: ITabItem[];
-    background?: TColorNames;
-    tabUnderlineColor?: TColorNames;
-    selectedTabUnderlineColor?: TColorNames;
-    activeTabTextProps?: ComponentProps<typeof Text_2>;
-    inactiveTabTextProps?: ComponentProps<typeof Text_2>;
+/**
+ * Props for the Tabs component - a horizontal tab navigation with theme support.
+ *
+ * @template TId - The type for tab identifiers (must extend string). This ensures
+ * type safety between the selectedTab prop and the ids in the tabs array.
+ *
+ * @example
+ * Basic usage:
+ * ```typescript
+ * type TabId = 'overview' | 'details' | 'settings';
+ *
+ * const [selectedTab, setSelectedTab] = useState<TabId>('overview');
+ *
+ * <Tabs
+ *   selectedTab={selectedTab}
+ *   onChange={setSelectedTab}
+ *   tabs={[
+ *     { id: 'overview', label: 'Overview' },
+ *     { id: 'details', label: 'Details', Icon: DetailsIcon },
+ *     { id: 'settings', label: 'Settings', disabled: true }
+ *   ]}
+ *   theme="light"
+ *   layout="fill"
+ * />
+ * ```
+ *
+ * @example
+ * With icons and positioning:
+ * ```typescript
+ * <Tabs
+ *   selectedTab="profile"
+ *   onChange={(tabId) => console.log('Selected:', tabId)}
+ *   tabs={[
+ *     { id: 'home', label: 'Home', Icon: HomeIcon },
+ *     { id: 'profile', label: 'Profile', Icon: UserIcon, iconPosition: 'right' },
+ *     { id: 'settings', label: 'Settings', Icon: SettingsIcon }
+ *   ]}
+ *   theme="dark"
+ * />
+ * ```
+ */
+declare interface ITabsProps<TId extends string = string> {
+    /**
+     * The currently selected tab ID. Must match one of the IDs in the tabs array.
+     * TypeScript will enforce this relationship when TId is a union type.
+     */
+    selectedTab: TId;
+    /**
+     * Callback fired when a tab is clicked. Receives the clicked tab's ID.
+     * This will not be called for disabled tabs.
+     */
+    onChange: (tab: TId) => void;
+    /**
+     * Array of tab configurations. Each tab must have a unique ID that matches
+     * the TId type parameter for type safety.
+     */
+    tabs: ITabItem<TId>[];
+    /**
+     * Visual theme for the tabs. Affects colors, hover states, and styling.
+     * Defaults to 'dark' if not specified.
+     *
+     * - `light`: Dark text on light background with subtle black hover overlay
+     * - `dark`: Light text on dark background with subtle white hover overlay
+     */
+    theme?: TTabsTheme;
+    /**
+     * Layout behavior for the tabs container.
+     * Defaults to 'compact' if not specified.
+     *
+     * - `compact`: Tabs only take required space, extra space shows inactive border
+     * - `fill`: Tabs expand evenly to fill the entire container width
+     */
+    layout?: TTabsLayout;
+    /**
+     * Custom height for individual tabs in pixels.
+     * Defaults to 40px if not specified.
+     *
+     * @example
+     * ```typescript
+     * // Default height (40px)
+     * <Tabs selectedTab="home" onChange={handleChange} tabs={tabsData} />
+     *
+     * // Custom height
+     * <Tabs height={60} selectedTab="home" onChange={handleChange} tabs={tabsData} />
+     * ```
+     */
+    height?: number;
+    /**
+     * Minimum width for individual tabs in pixels.
+     * Tabs will auto-size based on content if not specified.
+     *
+     * @example
+     * ```typescript
+     * // Auto width (default)
+     * <Tabs selectedTab="home" onChange={handleChange} tabs={tabsData} />
+     *
+     * // Minimum width for consistent sizing
+     * <Tabs minWidth={120} selectedTab="home" onChange={handleChange} tabs={tabsData} />
+     *
+     * // Combined with height for full control
+     * <Tabs height={50} minWidth={100} selectedTab="home" onChange={handleChange} tabs={tabsData} />
+     * ```
+     */
+    minWidth?: number;
 }
 
+/* Excluded from this release type: ITabsThemeConfig */
+
 export declare interface ITabVariantConfig {
     backgroundColorName: {
         inactive: TColorNames;
@@ -4348,6 +4479,7 @@ export declare interface ITheme {
     input: ReturnType<typeof getInputConfig>;
     layout: ReturnType<typeof getLayout>;
     tab: ReturnType<typeof getTabConfig>;
+    tabs: ReturnType<typeof getTabsConfig>;
     text: ReturnType<typeof getTextTypes>;
     textButton: ReturnType<typeof getTextButtonConfig>;
     zIndex: ReturnType<typeof getZIndexConfig>;
@@ -6034,7 +6166,7 @@ declare const TAB_CODES: {
 
 export declare const TabComponent: FC<ITabProps>;
 
-export declare const Tabs: MemoExoticComponent<({ selectedTab, onChange, tabs, tabUnderlineColor, selectedTabUnderlineColor, background, activeTabTextProps, inactiveTabTextProps, }: ITabsProps) => JSX.Element>;
+export declare const Tabs: MemoExoticComponent<(<TId extends string = string>({ selectedTab, onChange, tabs, theme, layout, height, minWidth, }: ITabsProps<TId>) => JSX.Element)>;
 
 export declare type TAction = EventToPayload<TInclassMessage>;
 
@@ -7165,6 +7297,21 @@ export declare type TTableMode = 'random' | 'sequence' | 'advance' | 'infinite';
 
 export declare type TTabSizes = 'xsmall' | 'small' | 'regular' | 'medium';
 
+/**
+ * Layout options for the tabs component.
+ * - `compact`: Tabs only take up the space they need, leaving extra space after the last tab
+ * - `fill`: Tabs expand evenly to fill the entire container width
+ */
+declare type TTabsLayout = 'compact' | 'fill';
+
+/**
+ * Theme variants for the Tabs component.
+ *
+ * - `light`: Dark text on light background with black hover overlay
+ * - `dark`: Light text on dark background with white hover overlay
+ */
+declare type TTabsTheme = 'light' | 'dark';
+
 export declare type TTabVariants = 'primary' | 'secondary';
 
 declare type TTestDifficultyLevel = 'EASY' | 'MODERATE' | 'DIFFICULT';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.5.44",
+  "version": "3.5.45",
   "type": "module",
   "files": [
     "dist"