analytica-frontend-lib 1.0.68 → 1.0.70

package/dist/Auth/index.mjs

@@ -0,0 +1,166 @@
+// src/components/Auth/Auth.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+  useMemo
+} from "react";
+import { useLocation, Navigate } from "react-router-dom";
+import { Fragment, jsx } from "react/jsx-runtime";
+var AuthContext = createContext(void 0);
+var AuthProvider = ({
+  children,
+  checkAuthFn,
+  signOutFn,
+  initialAuthState = {},
+  getUserFn,
+  getSessionFn,
+  getTokensFn
+}) => {
+  const [authState, setAuthState] = useState({
+    isAuthenticated: false,
+    isLoading: true,
+    ...initialAuthState
+  });
+  const checkAuth = useCallback(async () => {
+    try {
+      setAuthState((prev) => ({ ...prev, isLoading: true }));
+      if (!checkAuthFn) {
+        setAuthState((prev) => ({
+          ...prev,
+          isAuthenticated: false,
+          isLoading: false
+        }));
+        return false;
+      }
+      const isAuth = await checkAuthFn();
+      setAuthState((prev) => ({
+        ...prev,
+        isAuthenticated: isAuth,
+        isLoading: false,
+        user: getUserFn ? getUserFn() : prev.user,
+        sessionInfo: getSessionFn ? getSessionFn() : prev.sessionInfo,
+        tokens: getTokensFn ? getTokensFn() : prev.tokens
+      }));
+      return isAuth;
+    } catch (error) {
+      console.error("Erro ao verificar autentica\xE7\xE3o:", error);
+      setAuthState((prev) => ({
+        ...prev,
+        isAuthenticated: false,
+        isLoading: false
+      }));
+      return false;
+    }
+  }, [checkAuthFn, getUserFn, getSessionFn, getTokensFn]);
+  const signOut = useCallback(() => {
+    if (signOutFn) {
+      signOutFn();
+    }
+    setAuthState((prev) => ({
+      ...prev,
+      isAuthenticated: false,
+      user: void 0,
+      sessionInfo: void 0,
+      tokens: void 0
+    }));
+  }, [signOutFn]);
+  useEffect(() => {
+    checkAuth();
+  }, [checkAuth]);
+  const contextValue = useMemo(
+    () => ({
+      ...authState,
+      checkAuth,
+      signOut
+    }),
+    [authState, checkAuth, signOut]
+  );
+  return /* @__PURE__ */ jsx(AuthContext.Provider, { value: contextValue, children });
+};
+var useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === void 0) {
+    throw new Error("useAuth deve ser usado dentro de um AuthProvider");
+  }
+  return context;
+};
+var ProtectedRoute = ({
+  children,
+  redirectTo = "/",
+  loadingComponent,
+  additionalCheck
+}) => {
+  const { isAuthenticated, isLoading, ...authState } = useAuth();
+  const defaultLoadingComponent = /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent || defaultLoadingComponent });
+  }
+  if (!isAuthenticated) {
+    return /* @__PURE__ */ jsx(Navigate, { to: redirectTo, replace: true });
+  }
+  if (additionalCheck && !additionalCheck({ isAuthenticated, isLoading, ...authState })) {
+    return /* @__PURE__ */ jsx(Navigate, { to: redirectTo, replace: true });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var PublicRoute = ({
+  children,
+  redirectTo = "/painel",
+  redirectIfAuthenticated = false,
+  checkAuthBeforeRender = false
+}) => {
+  const { isAuthenticated, isLoading } = useAuth();
+  if (checkAuthBeforeRender && isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
+  }
+  if (isAuthenticated && redirectIfAuthenticated) {
+    return /* @__PURE__ */ jsx(Navigate, { to: redirectTo, replace: true });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var withAuth = (Component, options = {}) => {
+  return (props) => /* @__PURE__ */ jsx(ProtectedRoute, { ...options, children: /* @__PURE__ */ jsx(Component, { ...props }) });
+};
+var useAuthGuard = (options = {}) => {
+  const authState = useAuth();
+  const { requireAuth = true, customCheck } = options;
+  const canAccess = !authState.isLoading && (requireAuth ? authState.isAuthenticated && (!customCheck || customCheck(authState)) : !authState.isAuthenticated || !customCheck || customCheck(authState));
+  return {
+    canAccess,
+    isLoading: authState.isLoading,
+    authState
+  };
+};
+var useRouteAuth = (fallbackPath = "/") => {
+  const { isAuthenticated, isLoading } = useAuth();
+  const location = useLocation();
+  const redirectToLogin = () => /* @__PURE__ */ jsx(Navigate, { to: fallbackPath, state: { from: location }, replace: true });
+  return {
+    isAuthenticated,
+    isLoading,
+    redirectToLogin
+  };
+};
+var Auth_default = {
+  AuthProvider,
+  ProtectedRoute,
+  PublicRoute,
+  withAuth,
+  useAuth,
+  useAuthGuard,
+  useRouteAuth
+};
+export {
+  AuthProvider,
+  ProtectedRoute,
+  PublicRoute,
+  Auth_default as default,
+  useAuth,
+  useAuthGuard,
+  useRouteAuth,
+  withAuth
+};
+//# sourceMappingURL=index.mjs.map

package/dist/Auth/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Auth/Auth.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  ReactNode,\n  ComponentType,\n  useCallback,\n  useMemo,\n} from 'react';\nimport { useLocation, Navigate } from 'react-router-dom';\n\n/**\n * Interface básica para tokens de autenticação\n */\nexport interface AuthTokens {\n  token: string;\n  refreshToken: string;\n  [key: string]: unknown;\n}\n\n/**\n * Interface básica para usuário\n */\nexport interface AuthUser {\n  id: string;\n  name?: string;\n  email?: string;\n  [key: string]: unknown;\n}\n\n/**\n * Interface básica para informações de sessão\n */\nexport interface SessionInfo {\n  institutionId?: string;\n  profileId?: string;\n  schoolId?: string;\n  schoolYearId?: string;\n  classId?: string;\n  [key: string]: unknown;\n}\n\n/**\n * Interface para o estado de autenticação\n */\nexport interface AuthState {\n  isAuthenticated: boolean;\n  isLoading: boolean;\n  user?: AuthUser | null;\n  sessionInfo?: SessionInfo | null;\n  tokens?: AuthTokens | null;\n}\n\n/**\n * Interface para as funções de autenticação\n */\nexport interface AuthContextType extends AuthState {\n  checkAuth: () => Promise<boolean>;\n  signOut: () => void;\n}\n\n/**\n * Context de autenticação\n */\nconst AuthContext = createContext<AuthContextType | undefined>(undefined);\n\n/**\n * Props do AuthProvider\n */\nexport interface AuthProviderProps {\n  children: ReactNode;\n  /**\n   * Função para verificar se o usuário está autenticado\n   * Deve retornar uma Promise<boolean>\n   */\n  checkAuthFn?: () => Promise<boolean> | boolean;\n  /**\n   * Função para fazer logout\n   */\n  signOutFn?: () => void;\n  /**\n   * Estado de autenticação inicial\n   */\n  initialAuthState?: Partial<AuthState>;\n  /**\n   * Função para obter dados do usuário (opcional)\n   */\n  getUserFn?: () => AuthUser | null | undefined;\n  /**\n   * Função para obter informações da sessão (opcional)\n   */\n  getSessionFn?: () => SessionInfo | null | undefined;\n  /**\n   * Função para obter tokens (opcional)\n   */\n  getTokensFn?: () => AuthTokens | null | undefined;\n}\n\n/**\n * Provider de autenticação que gerencia o estado global de auth\n * Compatível com qualquer store (Zustand, Redux, Context, etc.)\n */\nexport const AuthProvider = ({\n  children,\n  checkAuthFn,\n  signOutFn,\n  initialAuthState = {},\n  getUserFn,\n  getSessionFn,\n  getTokensFn,\n}: AuthProviderProps) => {\n  const [authState, setAuthState] = useState<AuthState>({\n    isAuthenticated: false,\n    isLoading: true,\n    ...initialAuthState,\n  });\n\n  const checkAuth = useCallback(async (): Promise<boolean> => {\n    try {\n      setAuthState((prev) => ({ ...prev, isLoading: true }));\n\n      // Se não há função de verificação, assume como não autenticado\n      if (!checkAuthFn) {\n        setAuthState((prev) => ({\n          ...prev,\n          isAuthenticated: false,\n          isLoading: false,\n        }));\n        return false;\n      }\n\n      const isAuth = await checkAuthFn();\n\n      setAuthState((prev) => ({\n        ...prev,\n        isAuthenticated: isAuth,\n        isLoading: false,\n        user: getUserFn ? getUserFn() : prev.user,\n        sessionInfo: getSessionFn ? getSessionFn() : prev.sessionInfo,\n        tokens: getTokensFn ? getTokensFn() : prev.tokens,\n      }));\n\n      return isAuth;\n    } catch (error) {\n      console.error('Erro ao verificar autenticação:', error);\n      setAuthState((prev) => ({\n        ...prev,\n        isAuthenticated: false,\n        isLoading: false,\n      }));\n      return false;\n    }\n  }, [checkAuthFn, getUserFn, getSessionFn, getTokensFn]);\n\n  const signOut = useCallback(() => {\n    if (signOutFn) {\n      signOutFn();\n    }\n    setAuthState((prev) => ({\n      ...prev,\n      isAuthenticated: false,\n      user: undefined,\n      sessionInfo: undefined,\n      tokens: undefined,\n    }));\n  }, [signOutFn]);\n\n  useEffect(() => {\n    checkAuth();\n  }, [checkAuth]);\n\n  const contextValue = useMemo(\n    (): AuthContextType => ({\n      ...authState,\n      checkAuth,\n      signOut,\n    }),\n    [authState, checkAuth, signOut]\n  );\n\n  return (\n    <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>\n  );\n};\n\n/**\n * Hook para usar o contexto de autenticação\n */\nexport const useAuth = (): AuthContextType => {\n  const context = useContext(AuthContext);\n  if (context === undefined) {\n    throw new Error('useAuth deve ser usado dentro de um AuthProvider');\n  }\n  return context;\n};\n\n/**\n * Props do ProtectedRoute\n */\nexport interface ProtectedRouteProps {\n  children: ReactNode;\n  /**\n   * Path para redirecionamento quando não autenticado\n   */\n  redirectTo?: string;\n  /**\n   * Componente de loading personalizado\n   */\n  loadingComponent?: ReactNode;\n  /**\n   * Função adicional de verificação (ex: verificar permissões específicas)\n   */\n  additionalCheck?: (authState: AuthState) => boolean;\n}\n\n/**\n * Componente para proteger rotas que requerem autenticação\n *\n * @example\n * ```tsx\n * <ProtectedRoute redirectTo=\"/login\">\n *   <PainelPage />\n * </ProtectedRoute>\n * ```\n */\nexport const ProtectedRoute = ({\n  children,\n  redirectTo = '/',\n  loadingComponent,\n  additionalCheck,\n}: ProtectedRouteProps) => {\n  const { isAuthenticated, isLoading, ...authState } = useAuth();\n\n  // Componente de loading padrão\n  const defaultLoadingComponent = (\n    <div className=\"flex items-center justify-center min-h-screen\">\n      <div className=\"text-text-950 text-lg\">Carregando...</div>\n    </div>\n  );\n\n  // Mostrar loading enquanto verifica autenticação\n  if (isLoading) {\n    return <>{loadingComponent || defaultLoadingComponent}</>;\n  }\n\n  // Verificar autenticação básica\n  if (!isAuthenticated) {\n    return <Navigate to={redirectTo} replace />;\n  }\n\n  // Verificação adicional (ex: permissões)\n  if (\n    additionalCheck &&\n    !additionalCheck({ isAuthenticated, isLoading, ...authState })\n  ) {\n    return <Navigate to={redirectTo} replace />;\n  }\n\n  return <>{children}</>;\n};\n\n/**\n * Props do PublicRoute\n */\nexport interface PublicRouteProps {\n  children: ReactNode;\n  /**\n   * Path para redirecionamento\n   */\n  redirectTo?: string;\n  /**\n   * Se deve redirecionar quando usuário estiver autenticado\n   */\n  redirectIfAuthenticated?: boolean;\n  /**\n   * Se deve verificar autenticação antes de renderizar\n   */\n  checkAuthBeforeRender?: boolean;\n}\n\n/**\n * Componente para rotas públicas (login, recuperação de senha, etc.)\n * Opcionalmente redireciona se o usuário já estiver autenticado\n *\n * @example\n * ```tsx\n * <PublicRoute redirectTo=\"/painel\" redirectIfAuthenticated={true}>\n *   <LoginPage />\n * </PublicRoute>\n * ```\n */\nexport const PublicRoute = ({\n  children,\n  redirectTo = '/painel',\n  redirectIfAuthenticated = false,\n  checkAuthBeforeRender = false,\n}: PublicRouteProps) => {\n  const { isAuthenticated, isLoading } = useAuth();\n\n  // Se deve aguardar verificação de auth antes de renderizar\n  if (checkAuthBeforeRender && isLoading) {\n    return (\n      <div className=\"flex items-center justify-center min-h-screen\">\n        <div className=\"text-text-950 text-lg\">Carregando...</div>\n      </div>\n    );\n  }\n\n  // Redirecionar se já autenticado e configurado para isso\n  if (isAuthenticated && redirectIfAuthenticated) {\n    return <Navigate to={redirectTo} replace />;\n  }\n\n  return <>{children}</>;\n};\n\n/**\n * HOC para proteger componentes com autenticação\n *\n * @example\n * ```tsx\n * const ProtectedComponent = withAuth(MyComponent, {\n *   fallback: \"/login\",\n *   loadingComponent: <CustomSpinner />\n * });\n * ```\n */\nexport const withAuth = <P extends object>(\n  Component: ComponentType<P>,\n  options: Omit<ProtectedRouteProps, 'children'> = {}\n) => {\n  return (props: P) => (\n    <ProtectedRoute {...options}>\n      <Component {...props} />\n    </ProtectedRoute>\n  );\n};\n\n/**\n * Hook para guard de autenticação com verificações customizadas\n *\n * @example\n * ```tsx\n * const { canAccess, isLoading } = useAuthGuard({\n *   requireAuth: true,\n *   customCheck: (user) => user?.role === 'admin'\n * });\n * ```\n */\nexport const useAuthGuard = (\n  options: {\n    requireAuth?: boolean;\n    customCheck?: (authState: AuthState) => boolean;\n  } = {}\n) => {\n  const authState = useAuth();\n  const { requireAuth = true, customCheck } = options;\n\n  const canAccess =\n    !authState.isLoading &&\n    (requireAuth\n      ? authState.isAuthenticated && (!customCheck || customCheck(authState))\n      : !authState.isAuthenticated || !customCheck || customCheck(authState));\n\n  return {\n    canAccess,\n    isLoading: authState.isLoading,\n    authState,\n  };\n};\n\n/**\n * Hook para verificar autenticação em rotas específicas\n * Útil para verificações condicionais dentro de componentes\n *\n * @example\n * ```tsx\n * const { isAuthenticated, redirectToLogin } = useRouteAuth();\n *\n * if (!isAuthenticated) {\n *   return redirectToLogin();\n * }\n * ```\n */\nexport const useRouteAuth = (fallbackPath = '/') => {\n  const { isAuthenticated, isLoading } = useAuth();\n  const location = useLocation();\n\n  const redirectToLogin = () => (\n    <Navigate to={fallbackPath} state={{ from: location }} replace />\n  );\n\n  return {\n    isAuthenticated,\n    isLoading,\n    redirectToLogin,\n  };\n};\n\nexport default {\n  AuthProvider,\n  ProtectedRoute,\n  PublicRoute,\n  withAuth,\n  useAuth,\n  useAuthGuard,\n  useRouteAuth,\n};\n"],"mappings":"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","names":[]}

package/dist/Tab/index.d.mts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+/**
+ * Individual tab item interface
+ */
+interface TabItem {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Label text for the tab */
+    label: string;
+    /** Alternative label for mobile (optional) */
+    mobileLabel?: string;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+}
+/**
+ * Tab component props interface
+ */
+interface TabProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Array of tab items */
+    tabs: TabItem[];
+    /** Currently active tab ID */
+    activeTab: string;
+    /** Callback when tab changes */
+    onTabChange: (tabId: string) => void;
+    /** Size variant of the tabs */
+    size?: 'small' | 'medium' | 'large';
+    /** Whether to enable responsive behavior */
+    responsive?: boolean;
+}
+/**
+ * Tab component following the established architecture patterns
+ */
+declare const Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type TabItem, type TabProps, Tab as default };

package/dist/Tab/index.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+/**
+ * Individual tab item interface
+ */
+interface TabItem {
+    /** Unique identifier for the tab */
+    id: string;
+    /** Label text for the tab */
+    label: string;
+    /** Alternative label for mobile (optional) */
+    mobileLabel?: string;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+}
+/**
+ * Tab component props interface
+ */
+interface TabProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Array of tab items */
+    tabs: TabItem[];
+    /** Currently active tab ID */
+    activeTab: string;
+    /** Callback when tab changes */
+    onTabChange: (tabId: string) => void;
+    /** Size variant of the tabs */
+    size?: 'small' | 'medium' | 'large';
+    /** Whether to enable responsive behavior */
+    responsive?: boolean;
+}
+/**
+ * Tab component following the established architecture patterns
+ */
+declare const Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type TabItem, type TabProps, Tab as default };

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":";AAAA,SAAS,kBAAiD;AAqOxC,mBACE,KADF;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,MAAM;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,oCAAC,UAAK,WAAU,iDACb,wBAAc,IAAI,cACjB,iCACE;AAAA,sCAAC,UAAK,WAAU,aAAa,cAAI,aAAY;AAAA,kBAC7C,oBAAC,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":[]}