analytica-frontend-lib 1.0.68 → 1.0.71

package/dist/Tab/index.js

@@ -0,0 +1,182 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Tab/Tab.tsx
+var Tab_exports = {};
+__export(Tab_exports, {
+  default: () => Tab_default
+});
+module.exports = __toCommonJS(Tab_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TAB_SIZE_CLASSES = {
+  small: {
+    container: "h-10 gap-1",
+    tab: "px-3 py-2 text-sm",
+    indicator: "h-0.5"
+  },
+  medium: {
+    container: "h-12 gap-2",
+    tab: "px-4 py-4 text-sm",
+    indicator: "h-1"
+  },
+  large: {
+    container: "h-14 gap-2",
+    tab: "px-6 py-4 text-base",
+    indicator: "h-1"
+  }
+};
+var RESPONSIVE_WIDTH_CLASSES = {
+  twoTabs: "w-[115px] sm:w-[204px]",
+  threeTabs: "w-[100px] sm:w-[160px]",
+  fourTabs: "w-[80px] sm:w-[140px]",
+  fiveTabs: "w-[70px] sm:w-[120px]",
+  default: "flex-1"
+};
+var Tab = (0, import_react.forwardRef)(
+  ({
+    tabs,
+    activeTab,
+    onTabChange,
+    size = "medium",
+    responsive = true,
+    className = "",
+    ...props
+  }, ref) => {
+    const sizeClasses = TAB_SIZE_CLASSES[size];
+    const getResponsiveWidthClass = (tabCount) => {
+      if (!responsive) return RESPONSIVE_WIDTH_CLASSES.default;
+      switch (tabCount) {
+        case 2:
+          return RESPONSIVE_WIDTH_CLASSES.twoTabs;
+        case 3:
+          return RESPONSIVE_WIDTH_CLASSES.threeTabs;
+        case 4:
+          return RESPONSIVE_WIDTH_CLASSES.fourTabs;
+        case 5:
+          return RESPONSIVE_WIDTH_CLASSES.fiveTabs;
+        default:
+          return RESPONSIVE_WIDTH_CLASSES.default;
+      }
+    };
+    const handleTabClick = (tabId) => {
+      const tab = tabs.find((t) => t.id === tabId);
+      if (tab && !tab.disabled) {
+        onTabChange(tabId);
+      }
+    };
+    const wrapAroundIndex = (index, maxLength) => {
+      if (index < 0) return maxLength - 1;
+      if (index >= maxLength) return 0;
+      return index;
+    };
+    const findNextValidTab = (startIndex, direction) => {
+      let nextIndex = wrapAroundIndex(startIndex + direction, tabs.length);
+      let attempts = 0;
+      while (tabs[nextIndex]?.disabled && attempts < tabs.length) {
+        nextIndex = wrapAroundIndex(nextIndex + direction, tabs.length);
+        attempts++;
+      }
+      return nextIndex;
+    };
+    const handleArrowNavigation = (direction) => {
+      const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
+      const nextIndex = findNextValidTab(currentIndex, direction);
+      if (!tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {
+        handleTabClick(tabs[nextIndex].id);
+      }
+    };
+    const handleKeyDown = (event, tabId) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleTabClick(tabId);
+        return;
+      }
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const direction = event.key === "ArrowLeft" ? -1 : 1;
+        handleArrowNavigation(direction);
+      }
+    };
+    const getTabClassNames = (isDisabled, isActive) => {
+      if (isDisabled) {
+        return "text-text-400 cursor-not-allowed opacity-50";
+      }
+      if (isActive) {
+        return "text-text-950";
+      }
+      return "text-text-700 hover:text-text-800";
+    };
+    const tabWidthClass = getResponsiveWidthClass(tabs.length);
+    const containerWidth = responsive && tabs.length <= 2 ? "w-[240px] sm:w-[416px]" : "w-full";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: `flex flex-row items-start ${sizeClasses.container} ${containerWidth} ${className}`,
+        role: "tablist",
+        ...props,
+        children: tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          const isDisabled = Boolean(tab.disabled);
+          const tabClassNames = getTabClassNames(isDisabled, isActive);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": isActive,
+              "aria-disabled": isDisabled,
+              tabIndex: isActive ? 0 : -1,
+              className: `
+                relative flex flex-row justify-center items-center gap-2 rounded transition-colors isolate
+                ${sizeClasses.tab}
+                ${tabWidthClass}
+                ${tabClassNames}
+                ${!isDisabled && !isActive ? "hover:bg-background-50" : ""}
+                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2
+              `,
+              onClick: () => handleTabClick(tab.id),
+              onKeyDown: (e) => handleKeyDown(e, tab.id),
+              disabled: isDisabled,
+              "data-testid": `tab-${tab.id}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-bold leading-4 tracking-[0.2px] truncate", children: responsive && tab.mobileLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sm:hidden", children: tab.mobileLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hidden sm:inline", children: tab.label })
+                ] }) : tab.label }),
+                isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "div",
+                  {
+                    className: `absolute bottom-0 left-2 right-2 bg-primary-700 rounded-lg z-[2] ${sizeClasses.indicator}`,
+                    "data-testid": "active-indicator"
+                  }
+                )
+              ]
+            },
+            tab.id
+          );
+        })
+      }
+    );
+  }
+);
+Tab.displayName = "Tab";
+var Tab_default = Tab;
+//# sourceMappingURL=index.js.map

package/dist/Tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, KeyboardEvent } from 'react';\n\n/**\n * Individual tab item interface\n */\nexport interface TabItem {\n  /** Unique identifier for the tab */\n  id: string;\n  /** Label text for the tab */\n  label: string;\n  /** Alternative label for mobile (optional) */\n  mobileLabel?: string;\n  /** Whether the tab is disabled */\n  disabled?: boolean;\n}\n\n/**\n * Tab component props interface\n */\nexport interface TabProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Array of tab items */\n  tabs: TabItem[];\n  /** Currently active tab ID */\n  activeTab: string;\n  /** Callback when tab changes */\n  onTabChange: (tabId: string) => void;\n  /** Size variant of the tabs */\n  size?: 'small' | 'medium' | 'large';\n  /** Whether to enable responsive behavior */\n  responsive?: boolean;\n}\n\n/**\n * Size configuration lookup table\n */\nconst TAB_SIZE_CLASSES = {\n  small: {\n    container: 'h-10 gap-1',\n    tab: 'px-3 py-2 text-sm',\n    indicator: 'h-0.5',\n  },\n  medium: {\n    container: 'h-12 gap-2',\n    tab: 'px-4 py-4 text-sm',\n    indicator: 'h-1',\n  },\n  large: {\n    container: 'h-14 gap-2',\n    tab: 'px-6 py-4 text-base',\n    indicator: 'h-1',\n  },\n} as const;\n\n/**\n * Responsive width classes for tabs\n */\nconst RESPONSIVE_WIDTH_CLASSES = {\n  twoTabs: 'w-[115px] sm:w-[204px]',\n  threeTabs: 'w-[100px] sm:w-[160px]',\n  fourTabs: 'w-[80px] sm:w-[140px]',\n  fiveTabs: 'w-[70px] sm:w-[120px]',\n  default: 'flex-1',\n} as const;\n\n/**\n * Tab component following the established architecture patterns\n */\nconst Tab = forwardRef<HTMLDivElement, TabProps>(\n  (\n    {\n      tabs,\n      activeTab,\n      onTabChange,\n      size = 'medium',\n      responsive = true,\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    const sizeClasses = TAB_SIZE_CLASSES[size];\n\n    /**\n     * Get responsive width class based on number of tabs\n     */\n    const getResponsiveWidthClass = (tabCount: number): string => {\n      if (!responsive) return RESPONSIVE_WIDTH_CLASSES.default;\n\n      switch (tabCount) {\n        case 2:\n          return RESPONSIVE_WIDTH_CLASSES.twoTabs;\n        case 3:\n          return RESPONSIVE_WIDTH_CLASSES.threeTabs;\n        case 4:\n          return RESPONSIVE_WIDTH_CLASSES.fourTabs;\n        case 5:\n          return RESPONSIVE_WIDTH_CLASSES.fiveTabs;\n        default:\n          return RESPONSIVE_WIDTH_CLASSES.default;\n      }\n    };\n\n    /**\n     * Handle tab click\n     */\n    const handleTabClick = (tabId: string) => {\n      const tab = tabs.find((t) => t.id === tabId);\n      if (tab && !tab.disabled) {\n        onTabChange(tabId);\n      }\n    };\n\n    /**\n     * Wrap index around array bounds\n     */\n    const wrapAroundIndex = (index: number, maxLength: number): number => {\n      if (index < 0) return maxLength - 1;\n      if (index >= maxLength) return 0;\n      return index;\n    };\n\n    /**\n     * Find next valid (non-disabled) tab index\n     */\n    const findNextValidTab = (\n      startIndex: number,\n      direction: number\n    ): number => {\n      let nextIndex = wrapAroundIndex(startIndex + direction, tabs.length);\n      let attempts = 0;\n\n      while (tabs[nextIndex]?.disabled && attempts < tabs.length) {\n        nextIndex = wrapAroundIndex(nextIndex + direction, tabs.length);\n        attempts++;\n      }\n\n      return nextIndex;\n    };\n\n    /**\n     * Handle arrow key navigation\n     */\n    const handleArrowNavigation = (direction: number): void => {\n      const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);\n      const nextIndex = findNextValidTab(currentIndex, direction);\n\n      if (!tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {\n        handleTabClick(tabs[nextIndex].id);\n      }\n    };\n\n    /**\n     * Handle keyboard navigation\n     */\n    const handleKeyDown = (\n      event: KeyboardEvent<HTMLButtonElement>,\n      tabId: string\n    ) => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleTabClick(tabId);\n        return;\n      }\n\n      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n        event.preventDefault();\n        const direction = event.key === 'ArrowLeft' ? -1 : 1;\n        handleArrowNavigation(direction);\n      }\n    };\n\n    /**\n     * Get tab text and interaction classes based on state\n     */\n    const getTabClassNames = (\n      isDisabled: boolean,\n      isActive: boolean\n    ): string => {\n      if (isDisabled) {\n        return 'text-text-400 cursor-not-allowed opacity-50';\n      }\n\n      if (isActive) {\n        return 'text-text-950';\n      }\n\n      return 'text-text-700 hover:text-text-800';\n    };\n\n    const tabWidthClass = getResponsiveWidthClass(tabs.length);\n    const containerWidth =\n      responsive && tabs.length <= 2 ? 'w-[240px] sm:w-[416px]' : 'w-full';\n\n    return (\n      <div\n        ref={ref}\n        className={`flex flex-row items-start ${sizeClasses.container} ${containerWidth} ${className}`}\n        role=\"tablist\"\n        {...props}\n      >\n        {tabs.map((tab) => {\n          const isActive = tab.id === activeTab;\n          const isDisabled = Boolean(tab.disabled);\n          const tabClassNames = getTabClassNames(isDisabled, isActive);\n\n          return (\n            <button\n              key={tab.id}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              aria-disabled={isDisabled}\n              tabIndex={isActive ? 0 : -1}\n              className={`\n                relative flex flex-row justify-center items-center gap-2 rounded transition-colors isolate\n                ${sizeClasses.tab}\n                ${tabWidthClass}\n                ${tabClassNames}\n                ${!isDisabled && !isActive ? 'hover:bg-background-50' : ''}\n                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\n              `}\n              onClick={() => handleTabClick(tab.id)}\n              onKeyDown={(e) => handleKeyDown(e, tab.id)}\n              disabled={isDisabled}\n              data-testid={`tab-${tab.id}`}\n            >\n              <span className=\"font-bold leading-4 tracking-[0.2px] truncate\">\n                {responsive && tab.mobileLabel ? (\n                  <>\n                    <span className=\"sm:hidden\">{tab.mobileLabel}</span>\n                    <span className=\"hidden sm:inline\">{tab.label}</span>\n                  </>\n                ) : (\n                  tab.label\n                )}\n              </span>\n              {isActive && (\n                <div\n                  className={`absolute bottom-0 left-2 right-2 bg-primary-700 rounded-lg z-[2] ${sizeClasses.indicator}`}\n                  data-testid=\"active-indicator\"\n                />\n              )}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nTab.displayName = 'Tab';\n\nexport default Tab;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0D;AAqOxC;AAjMlB,IAAM,mBAAmB;AAAA,EACvB,OAAO;AAAA,IACL,WAAW;AAAA,IACX,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,WAAW;AAAA,IACX,KAAK;AAAA,IACL,WAAW;AAAA,EACb;AACF;AAKA,IAAM,2BAA2B;AAAA,EAC/B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAKA,IAAM,UAAM;AAAA,EACV,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,cAAc,iBAAiB,IAAI;AAKzC,UAAM,0BAA0B,CAAC,aAA6B;AAC5D,UAAI,CAAC,WAAY,QAAO,yBAAyB;AAEjD,cAAQ,UAAU;AAAA,QAChB,KAAK;AACH,iBAAO,yBAAyB;AAAA,QAClC,KAAK;AACH,iBAAO,yBAAyB;AAAA,QAClC,KAAK;AACH,iBAAO,yBAAyB;AAAA,QAClC,KAAK;AACH,iBAAO,yBAAyB;AAAA,QAClC;AACE,iBAAO,yBAAyB;AAAA,MACpC;AAAA,IACF;AAKA,UAAM,iBAAiB,CAAC,UAAkB;AACxC,YAAM,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,KAAK;AAC3C,UAAI,OAAO,CAAC,IAAI,UAAU;AACxB,oBAAY,KAAK;AAAA,MACnB;AAAA,IACF;AAKA,UAAM,kBAAkB,CAAC,OAAe,cAA8B;AACpE,UAAI,QAAQ,EAAG,QAAO,YAAY;AAClC,UAAI,SAAS,UAAW,QAAO;AAC/B,aAAO;AAAA,IACT;AAKA,UAAM,mBAAmB,CACvB,YACA,cACW;AACX,UAAI,YAAY,gBAAgB,aAAa,WAAW,KAAK,MAAM;AACnE,UAAI,WAAW;AAEf,aAAO,KAAK,SAAS,GAAG,YAAY,WAAW,KAAK,QAAQ;AAC1D,oBAAY,gBAAgB,YAAY,WAAW,KAAK,MAAM;AAC9D;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AAKA,UAAM,wBAAwB,CAAC,cAA4B;AACzD,YAAM,eAAe,KAAK,UAAU,CAAC,QAAQ,IAAI,OAAO,SAAS;AACjE,YAAM,YAAY,iBAAiB,cAAc,SAAS;AAE1D,UAAI,CAAC,KAAK,SAAS,GAAG,YAAY,cAAc,cAAc;AAC5D,uBAAe,KAAK,SAAS,EAAE,EAAE;AAAA,MACnC;AAAA,IACF;AAKA,UAAM,gBAAgB,CACpB,OACA,UACG;AACH,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,cAAM,eAAe;AACrB,uBAAe,KAAK;AACpB;AAAA,MACF;AAEA,UAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,cAAc;AAC3D,cAAM,eAAe;AACrB,cAAM,YAAY,MAAM,QAAQ,cAAc,KAAK;AACnD,8BAAsB,SAAS;AAAA,MACjC;AAAA,IACF;AAKA,UAAM,mBAAmB,CACvB,YACA,aACW;AACX,UAAI,YAAY;AACd,eAAO;AAAA,MACT;AAEA,UAAI,UAAU;AACZ,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT;AAEA,UAAM,gBAAgB,wBAAwB,KAAK,MAAM;AACzD,UAAM,iBACJ,cAAc,KAAK,UAAU,IAAI,2BAA2B;AAE9D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,6BAA6B,YAAY,SAAS,IAAI,cAAc,IAAI,SAAS;AAAA,QAC5F,MAAK;AAAA,QACJ,GAAG;AAAA,QAEH,eAAK,IAAI,CAAC,QAAQ;AACjB,gBAAM,WAAW,IAAI,OAAO;AAC5B,gBAAM,aAAa,QAAQ,IAAI,QAAQ;AACvC,gBAAM,gBAAgB,iBAAiB,YAAY,QAAQ;AAE3D,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,MAAK;AAAA,cACL,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf,UAAU,WAAW,IAAI;AAAA,cACzB,WAAW;AAAA;AAAA,kBAEP,YAAY,GAAG;AAAA,kBACf,aAAa;AAAA,kBACb,aAAa;AAAA,kBACb,CAAC,cAAc,CAAC,WAAW,2BAA2B,EAAE;AAAA;AAAA;AAAA,cAG5D,SAAS,MAAM,eAAe,IAAI,EAAE;AAAA,cACpC,WAAW,CAAC,MAAM,cAAc,GAAG,IAAI,EAAE;AAAA,cACzC,UAAU;AAAA,cACV,eAAa,OAAO,IAAI,EAAE;AAAA,cAE1B;AAAA,4DAAC,UAAK,WAAU,iDACb,wBAAc,IAAI,cACjB,4EACE;AAAA,8DAAC,UAAK,WAAU,aAAa,cAAI,aAAY;AAAA,kBAC7C,4CAAC,UAAK,WAAU,oBAAoB,cAAI,OAAM;AAAA,mBAChD,IAEA,IAAI,OAER;AAAA,gBACC,YACC;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,oEAAoE,YAAY,SAAS;AAAA,oBACpG,eAAY;AAAA;AAAA,gBACd;AAAA;AAAA;AAAA,YAjCG,IAAI;AAAA,UAmCX;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAI,cAAc;AAElB,IAAO,cAAQ;","names":[]}

package/dist/Tab/index.mjs

@@ -0,0 +1,161 @@
+// src/components/Tab/Tab.tsx
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TAB_SIZE_CLASSES = {
+  small: {
+    container: "h-10 gap-1",
+    tab: "px-3 py-2 text-sm",
+    indicator: "h-0.5"
+  },
+  medium: {
+    container: "h-12 gap-2",
+    tab: "px-4 py-4 text-sm",
+    indicator: "h-1"
+  },
+  large: {
+    container: "h-14 gap-2",
+    tab: "px-6 py-4 text-base",
+    indicator: "h-1"
+  }
+};
+var RESPONSIVE_WIDTH_CLASSES = {
+  twoTabs: "w-[115px] sm:w-[204px]",
+  threeTabs: "w-[100px] sm:w-[160px]",
+  fourTabs: "w-[80px] sm:w-[140px]",
+  fiveTabs: "w-[70px] sm:w-[120px]",
+  default: "flex-1"
+};
+var Tab = forwardRef(
+  ({
+    tabs,
+    activeTab,
+    onTabChange,
+    size = "medium",
+    responsive = true,
+    className = "",
+    ...props
+  }, ref) => {
+    const sizeClasses = TAB_SIZE_CLASSES[size];
+    const getResponsiveWidthClass = (tabCount) => {
+      if (!responsive) return RESPONSIVE_WIDTH_CLASSES.default;
+      switch (tabCount) {
+        case 2:
+          return RESPONSIVE_WIDTH_CLASSES.twoTabs;
+        case 3:
+          return RESPONSIVE_WIDTH_CLASSES.threeTabs;
+        case 4:
+          return RESPONSIVE_WIDTH_CLASSES.fourTabs;
+        case 5:
+          return RESPONSIVE_WIDTH_CLASSES.fiveTabs;
+        default:
+          return RESPONSIVE_WIDTH_CLASSES.default;
+      }
+    };
+    const handleTabClick = (tabId) => {
+      const tab = tabs.find((t) => t.id === tabId);
+      if (tab && !tab.disabled) {
+        onTabChange(tabId);
+      }
+    };
+    const wrapAroundIndex = (index, maxLength) => {
+      if (index < 0) return maxLength - 1;
+      if (index >= maxLength) return 0;
+      return index;
+    };
+    const findNextValidTab = (startIndex, direction) => {
+      let nextIndex = wrapAroundIndex(startIndex + direction, tabs.length);
+      let attempts = 0;
+      while (tabs[nextIndex]?.disabled && attempts < tabs.length) {
+        nextIndex = wrapAroundIndex(nextIndex + direction, tabs.length);
+        attempts++;
+      }
+      return nextIndex;
+    };
+    const handleArrowNavigation = (direction) => {
+      const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);
+      const nextIndex = findNextValidTab(currentIndex, direction);
+      if (!tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {
+        handleTabClick(tabs[nextIndex].id);
+      }
+    };
+    const handleKeyDown = (event, tabId) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleTabClick(tabId);
+        return;
+      }
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const direction = event.key === "ArrowLeft" ? -1 : 1;
+        handleArrowNavigation(direction);
+      }
+    };
+    const getTabClassNames = (isDisabled, isActive) => {
+      if (isDisabled) {
+        return "text-text-400 cursor-not-allowed opacity-50";
+      }
+      if (isActive) {
+        return "text-text-950";
+      }
+      return "text-text-700 hover:text-text-800";
+    };
+    const tabWidthClass = getResponsiveWidthClass(tabs.length);
+    const containerWidth = responsive && tabs.length <= 2 ? "w-[240px] sm:w-[416px]" : "w-full";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `flex flex-row items-start ${sizeClasses.container} ${containerWidth} ${className}`,
+        role: "tablist",
+        ...props,
+        children: tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          const isDisabled = Boolean(tab.disabled);
+          const tabClassNames = getTabClassNames(isDisabled, isActive);
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": isActive,
+              "aria-disabled": isDisabled,
+              tabIndex: isActive ? 0 : -1,
+              className: `
+                relative flex flex-row justify-center items-center gap-2 rounded transition-colors isolate
+                ${sizeClasses.tab}
+                ${tabWidthClass}
+                ${tabClassNames}
+                ${!isDisabled && !isActive ? "hover:bg-background-50" : ""}
+                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2
+              `,
+              onClick: () => handleTabClick(tab.id),
+              onKeyDown: (e) => handleKeyDown(e, tab.id),
+              disabled: isDisabled,
+              "data-testid": `tab-${tab.id}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "font-bold leading-4 tracking-[0.2px] truncate", children: responsive && tab.mobileLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: tab.mobileLabel }),
+                  /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: tab.label })
+                ] }) : tab.label }),
+                isActive && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `absolute bottom-0 left-2 right-2 bg-primary-700 rounded-lg z-[2] ${sizeClasses.indicator}`,
+                    "data-testid": "active-indicator"
+                  }
+                )
+              ]
+            },
+            tab.id
+          );
+        })
+      }
+    );
+  }
+);
+Tab.displayName = "Tab";
+var Tab_default = Tab;
+export {
+  Tab_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/Tab/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Tab/Tab.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, KeyboardEvent } from 'react';\n\n/**\n * Individual tab item interface\n */\nexport interface TabItem {\n  /** Unique identifier for the tab */\n  id: string;\n  /** Label text for the tab */\n  label: string;\n  /** Alternative label for mobile (optional) */\n  mobileLabel?: string;\n  /** Whether the tab is disabled */\n  disabled?: boolean;\n}\n\n/**\n * Tab component props interface\n */\nexport interface TabProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Array of tab items */\n  tabs: TabItem[];\n  /** Currently active tab ID */\n  activeTab: string;\n  /** Callback when tab changes */\n  onTabChange: (tabId: string) => void;\n  /** Size variant of the tabs */\n  size?: 'small' | 'medium' | 'large';\n  /** Whether to enable responsive behavior */\n  responsive?: boolean;\n}\n\n/**\n * Size configuration lookup table\n */\nconst TAB_SIZE_CLASSES = {\n  small: {\n    container: 'h-10 gap-1',\n    tab: 'px-3 py-2 text-sm',\n    indicator: 'h-0.5',\n  },\n  medium: {\n    container: 'h-12 gap-2',\n    tab: 'px-4 py-4 text-sm',\n    indicator: 'h-1',\n  },\n  large: {\n    container: 'h-14 gap-2',\n    tab: 'px-6 py-4 text-base',\n    indicator: 'h-1',\n  },\n} as const;\n\n/**\n * Responsive width classes for tabs\n */\nconst RESPONSIVE_WIDTH_CLASSES = {\n  twoTabs: 'w-[115px] sm:w-[204px]',\n  threeTabs: 'w-[100px] sm:w-[160px]',\n  fourTabs: 'w-[80px] sm:w-[140px]',\n  fiveTabs: 'w-[70px] sm:w-[120px]',\n  default: 'flex-1',\n} as const;\n\n/**\n * Tab component following the established architecture patterns\n */\nconst Tab = forwardRef<HTMLDivElement, TabProps>(\n  (\n    {\n      tabs,\n      activeTab,\n      onTabChange,\n      size = 'medium',\n      responsive = true,\n      className = '',\n      ...props\n    },\n    ref\n  ) => {\n    const sizeClasses = TAB_SIZE_CLASSES[size];\n\n    /**\n     * Get responsive width class based on number of tabs\n     */\n    const getResponsiveWidthClass = (tabCount: number): string => {\n      if (!responsive) return RESPONSIVE_WIDTH_CLASSES.default;\n\n      switch (tabCount) {\n        case 2:\n          return RESPONSIVE_WIDTH_CLASSES.twoTabs;\n        case 3:\n          return RESPONSIVE_WIDTH_CLASSES.threeTabs;\n        case 4:\n          return RESPONSIVE_WIDTH_CLASSES.fourTabs;\n        case 5:\n          return RESPONSIVE_WIDTH_CLASSES.fiveTabs;\n        default:\n          return RESPONSIVE_WIDTH_CLASSES.default;\n      }\n    };\n\n    /**\n     * Handle tab click\n     */\n    const handleTabClick = (tabId: string) => {\n      const tab = tabs.find((t) => t.id === tabId);\n      if (tab && !tab.disabled) {\n        onTabChange(tabId);\n      }\n    };\n\n    /**\n     * Wrap index around array bounds\n     */\n    const wrapAroundIndex = (index: number, maxLength: number): number => {\n      if (index < 0) return maxLength - 1;\n      if (index >= maxLength) return 0;\n      return index;\n    };\n\n    /**\n     * Find next valid (non-disabled) tab index\n     */\n    const findNextValidTab = (\n      startIndex: number,\n      direction: number\n    ): number => {\n      let nextIndex = wrapAroundIndex(startIndex + direction, tabs.length);\n      let attempts = 0;\n\n      while (tabs[nextIndex]?.disabled && attempts < tabs.length) {\n        nextIndex = wrapAroundIndex(nextIndex + direction, tabs.length);\n        attempts++;\n      }\n\n      return nextIndex;\n    };\n\n    /**\n     * Handle arrow key navigation\n     */\n    const handleArrowNavigation = (direction: number): void => {\n      const currentIndex = tabs.findIndex((tab) => tab.id === activeTab);\n      const nextIndex = findNextValidTab(currentIndex, direction);\n\n      if (!tabs[nextIndex]?.disabled && nextIndex !== currentIndex) {\n        handleTabClick(tabs[nextIndex].id);\n      }\n    };\n\n    /**\n     * Handle keyboard navigation\n     */\n    const handleKeyDown = (\n      event: KeyboardEvent<HTMLButtonElement>,\n      tabId: string\n    ) => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleTabClick(tabId);\n        return;\n      }\n\n      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n        event.preventDefault();\n        const direction = event.key === 'ArrowLeft' ? -1 : 1;\n        handleArrowNavigation(direction);\n      }\n    };\n\n    /**\n     * Get tab text and interaction classes based on state\n     */\n    const getTabClassNames = (\n      isDisabled: boolean,\n      isActive: boolean\n    ): string => {\n      if (isDisabled) {\n        return 'text-text-400 cursor-not-allowed opacity-50';\n      }\n\n      if (isActive) {\n        return 'text-text-950';\n      }\n\n      return 'text-text-700 hover:text-text-800';\n    };\n\n    const tabWidthClass = getResponsiveWidthClass(tabs.length);\n    const containerWidth =\n      responsive && tabs.length <= 2 ? 'w-[240px] sm:w-[416px]' : 'w-full';\n\n    return (\n      <div\n        ref={ref}\n        className={`flex flex-row items-start ${sizeClasses.container} ${containerWidth} ${className}`}\n        role=\"tablist\"\n        {...props}\n      >\n        {tabs.map((tab) => {\n          const isActive = tab.id === activeTab;\n          const isDisabled = Boolean(tab.disabled);\n          const tabClassNames = getTabClassNames(isDisabled, isActive);\n\n          return (\n            <button\n              key={tab.id}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isActive}\n              aria-disabled={isDisabled}\n              tabIndex={isActive ? 0 : -1}\n              className={`\n                relative flex flex-row justify-center items-center gap-2 rounded transition-colors isolate\n                ${sizeClasses.tab}\n                ${tabWidthClass}\n                ${tabClassNames}\n                ${!isDisabled && !isActive ? 'hover:bg-background-50' : ''}\n                focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2\n              `}\n              onClick={() => handleTabClick(tab.id)}\n              onKeyDown={(e) => handleKeyDown(e, tab.id)}\n              disabled={isDisabled}\n              data-testid={`tab-${tab.id}`}\n            >\n              <span className=\"font-bold leading-4 tracking-[0.2px] truncate\">\n                {responsive && tab.mobileLabel ? (\n                  <>\n                    <span className=\"sm:hidden\">{tab.mobileLabel}</span>\n                    <span className=\"hidden sm:inline\">{tab.label}</span>\n                  </>\n                ) : (\n                  tab.label\n                )}\n              </span>\n              {isActive && (\n                <div\n                  className={`absolute bottom-0 left-2 right-2 bg-primary-700 rounded-lg z-[2] ${sizeClasses.indicator}`}\n                  data-testid=\"active-indicator\"\n                />\n              )}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nTab.displayName = 'Tab';\n\nexport default Tab;\n"],"mappings":"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","names":[]}