@eztrak/shared 0.3.1 → 0.4.0

package/dist/components/index.d.ts

@@ -0,0 +1,40 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type EztrakTab = {
+    id: string;
+    label: ReactNode;
+    content?: ReactNode;
+    disabled?: boolean;
+    icon?: ReactNode;
+};
+type EztrakTabsClassNames = {
+    wrapper?: string;
+    list?: string;
+    item?: string;
+    itemActive?: string;
+    button?: string;
+    buttonActive?: string;
+    label?: string;
+    icon?: string;
+    underline?: string;
+    panel?: string;
+    content?: string;
+};
+type EztrakTabsProps = {
+    tabs: EztrakTab[];
+    activeTab?: string;
+    defaultTabId?: string;
+    onTabChange?: (id: string) => void;
+    /** When false, only the tab list is rendered (nav-only). Default: true */
+    showPanels?: boolean;
+    /** Keep inactive panels in the DOM (hidden). Default: false */
+    keepMounted?: boolean;
+    classNames?: EztrakTabsClassNames;
+    /** Shorthand for classNames.wrapper */
+    className?: string;
+};
+
+declare function EztrakTabs({ tabs, activeTab, defaultTabId, onTabChange, showPanels, keepMounted, classNames, className, }: EztrakTabsProps): react.JSX.Element | null;
+
+export { type EztrakTab, EztrakTabs, type EztrakTabsClassNames, type EztrakTabsProps };

package/dist/components/index.js

@@ -0,0 +1,248 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  EztrakTabs: () => EztrakTabs
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/components/tabs/EztrakTabs.tsx
+var import_react = require("react");
+
+// src/utils/cn.ts
+var import_clsx = __toESM(require("clsx"));
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.default)(inputs));
+}
+
+// src/components/tabs/EztrakTabs.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function getInitialTabId(tabs, defaultTabId) {
+  if (defaultTabId && tabs.some((t) => t.id === defaultTabId && !t.disabled)) {
+    return defaultTabId;
+  }
+  return tabs.find((t) => !t.disabled)?.id;
+}
+function getEnabledTabIds(tabs) {
+  return tabs.filter((t) => !t.disabled).map((t) => t.id);
+}
+function EztrakTabs({
+  tabs,
+  activeTab,
+  defaultTabId,
+  onTabChange,
+  showPanels = true,
+  keepMounted = false,
+  classNames,
+  className
+}) {
+  const baseId = (0, import_react.useId)().replace(/:/g, "");
+  const isControlled = activeTab !== void 0 && activeTab !== null;
+  const [uncontrolledActive, setUncontrolledActive] = (0, import_react.useState)(
+    () => getInitialTabId(tabs, defaultTabId)
+  );
+  const tabRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const displayActive = isControlled ? activeTab : uncontrolledActive;
+  (0, import_react.useEffect)(() => {
+    if (isControlled) return;
+    const enabledIds = getEnabledTabIds(tabs);
+    if (!displayActive || !enabledIds.includes(displayActive)) {
+      const next = getInitialTabId(tabs, defaultTabId);
+      if (next !== displayActive) {
+        setUncontrolledActive(next);
+      }
+    }
+  }, [tabs, defaultTabId, isControlled, displayActive]);
+  const handleTabClick = (0, import_react.useCallback)(
+    (tabId, disabled) => {
+      if (disabled) return;
+      if (!isControlled) {
+        setUncontrolledActive(tabId);
+      }
+      onTabChange?.(tabId);
+    },
+    [isControlled, onTabChange]
+  );
+  const focusTab = (0, import_react.useCallback)((tabId) => {
+    tabRefs.current.get(tabId)?.focus();
+  }, []);
+  const handleListKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      const enabledIds = getEnabledTabIds(tabs);
+      if (enabledIds.length === 0) return;
+      const currentIndex = displayActive ? enabledIds.indexOf(displayActive) : -1;
+      let nextIndex = currentIndex;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          event.preventDefault();
+          nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % enabledIds.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          event.preventDefault();
+          nextIndex = currentIndex < 0 ? enabledIds.length - 1 : (currentIndex - 1 + enabledIds.length) % enabledIds.length;
+          break;
+        case "Home":
+          event.preventDefault();
+          nextIndex = 0;
+          break;
+        case "End":
+          event.preventDefault();
+          nextIndex = enabledIds.length - 1;
+          break;
+        default:
+          return;
+      }
+      const nextId = enabledIds[nextIndex];
+      if (nextId) {
+        handleTabClick(nextId);
+        focusTab(nextId);
+      }
+    },
+    [tabs, displayActive, handleTabClick, focusTab]
+  );
+  if (!tabs.length) {
+    return null;
+  }
+  const wrapperClass = cn(
+    "eztrak-tabs-wrapper",
+    classNames?.wrapper,
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: wrapperClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "eztrak-tabs-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", { className: "eztrak-tabs-nav", "aria-label": "Tabs", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        role: "tablist",
+        className: cn("eztrak-tabs-list", classNames?.list),
+        onKeyDown: handleListKeyDown,
+        children: tabs.map((tab) => {
+          const isActive = displayActive === tab.id;
+          const tabId = `${baseId}-tab-${tab.id}`;
+          const panelId = `${baseId}-panel-${tab.id}`;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "li",
+            {
+              role: "presentation",
+              className: cn(
+                "eztrak-tabs-item",
+                isActive && "eztrak-tabs-item-active",
+                classNames?.item,
+                isActive && classNames?.itemActive
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "button",
+                {
+                  ref: (el) => {
+                    if (el) {
+                      tabRefs.current.set(tab.id, el);
+                    } else {
+                      tabRefs.current.delete(tab.id);
+                    }
+                  },
+                  type: "button",
+                  role: "tab",
+                  id: tabId,
+                  "aria-selected": isActive,
+                  "aria-controls": showPanels ? panelId : void 0,
+                  tabIndex: isActive ? 0 : -1,
+                  disabled: tab.disabled,
+                  className: cn(
+                    "eztrak-tabs-button",
+                    isActive && "eztrak-tabs-button-active",
+                    classNames?.button,
+                    isActive && classNames?.buttonActive
+                  ),
+                  onClick: () => handleTabClick(tab.id, tab.disabled),
+                  children: [
+                    tab.icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: cn("eztrak-tabs-icon", classNames?.icon),
+                        "aria-hidden": true,
+                        children: tab.icon
+                      }
+                    ) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: cn("eztrak-tabs-label", classNames?.label),
+                        children: tab.label
+                      }
+                    ),
+                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: cn(
+                          "eztrak-tabs-underline",
+                          classNames?.underline
+                        ),
+                        "aria-hidden": true
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            },
+            tab.id
+          );
+        })
+      }
+    ) }),
+    showPanels ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("eztrak-tabs-content", classNames?.content), children: tabs.map((tab) => {
+      const isActive = displayActive === tab.id;
+      const panelId = `${baseId}-panel-${tab.id}`;
+      const tabId = `${baseId}-tab-${tab.id}`;
+      if (!keepMounted && !isActive) {
+        return null;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          id: panelId,
+          role: "tabpanel",
+          "aria-labelledby": tabId,
+          hidden: !isActive,
+          className: cn("eztrak-tabs-panel", classNames?.panel),
+          children: tab.content
+        },
+        tab.id
+      );
+    }) }) : null
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EztrakTabs
+});
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/index.ts","../../src/components/tabs/EztrakTabs.tsx","../../src/utils/cn.ts"],"sourcesContent":["export { EztrakTabs } from \"./tabs/EztrakTabs\";\r\nexport type {\r\n  EztrakTab,\r\n  EztrakTabsClassNames,\r\n  EztrakTabsProps,\r\n} from \"./tabs/types\";\r\n","import {\r\n  useCallback,\r\n  useEffect,\r\n  useId,\r\n  useRef,\r\n  useState,\r\n  type KeyboardEvent,\r\n} from \"react\";\r\nimport { cn } from \"../../utils/cn\";\r\nimport type { EztrakTab, EztrakTabsProps } from \"./types\";\r\n\r\nfunction getInitialTabId(\r\n  tabs: EztrakTab[],\r\n  defaultTabId?: string\r\n): string | undefined {\r\n  if (defaultTabId && tabs.some((t) => t.id === defaultTabId && !t.disabled)) {\r\n    return defaultTabId;\r\n  }\r\n  return tabs.find((t) => !t.disabled)?.id;\r\n}\r\n\r\nfunction getEnabledTabIds(tabs: EztrakTab[]): string[] {\r\n  return tabs.filter((t) => !t.disabled).map((t) => t.id);\r\n}\r\n\r\nexport function EztrakTabs({\r\n  tabs,\r\n  activeTab,\r\n  defaultTabId,\r\n  onTabChange,\r\n  showPanels = true,\r\n  keepMounted = false,\r\n  classNames,\r\n  className,\r\n}: EztrakTabsProps) {\r\n  const baseId = useId().replace(/:/g, \"\");\r\n  const isControlled = activeTab !== undefined && activeTab !== null;\r\n  const [uncontrolledActive, setUncontrolledActive] = useState(() =>\r\n    getInitialTabId(tabs, defaultTabId)\r\n  );\r\n  const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\r\n\r\n  const displayActive = isControlled ? activeTab : uncontrolledActive;\r\n\r\n  useEffect(() => {\r\n    if (isControlled) return;\r\n    const enabledIds = getEnabledTabIds(tabs);\r\n    if (!displayActive || !enabledIds.includes(displayActive)) {\r\n      const next = getInitialTabId(tabs, defaultTabId);\r\n      if (next !== displayActive) {\r\n        setUncontrolledActive(next);\r\n      }\r\n    }\r\n  }, [tabs, defaultTabId, isControlled, displayActive]);\r\n\r\n  const handleTabClick = useCallback(\r\n    (tabId: string, disabled?: boolean) => {\r\n      if (disabled) return;\r\n      if (!isControlled) {\r\n        setUncontrolledActive(tabId);\r\n      }\r\n      onTabChange?.(tabId);\r\n    },\r\n    [isControlled, onTabChange]\r\n  );\r\n\r\n  const focusTab = useCallback((tabId: string) => {\r\n    tabRefs.current.get(tabId)?.focus();\r\n  }, []);\r\n\r\n  const handleListKeyDown = useCallback(\r\n    (event: KeyboardEvent<HTMLUListElement>) => {\r\n      const enabledIds = getEnabledTabIds(tabs);\r\n      if (enabledIds.length === 0) return;\r\n\r\n      const currentIndex = displayActive\r\n        ? enabledIds.indexOf(displayActive)\r\n        : -1;\r\n      let nextIndex = currentIndex;\r\n\r\n      switch (event.key) {\r\n        case \"ArrowRight\":\r\n        case \"ArrowDown\":\r\n          event.preventDefault();\r\n          nextIndex =\r\n            currentIndex < 0\r\n              ? 0\r\n              : (currentIndex + 1) % enabledIds.length;\r\n          break;\r\n        case \"ArrowLeft\":\r\n        case \"ArrowUp\":\r\n          event.preventDefault();\r\n          nextIndex =\r\n            currentIndex < 0\r\n              ? enabledIds.length - 1\r\n              : (currentIndex - 1 + enabledIds.length) % enabledIds.length;\r\n          break;\r\n        case \"Home\":\r\n          event.preventDefault();\r\n          nextIndex = 0;\r\n          break;\r\n        case \"End\":\r\n          event.preventDefault();\r\n          nextIndex = enabledIds.length - 1;\r\n          break;\r\n        default:\r\n          return;\r\n      }\r\n\r\n      const nextId = enabledIds[nextIndex];\r\n      if (nextId) {\r\n        handleTabClick(nextId);\r\n        focusTab(nextId);\r\n      }\r\n    },\r\n    [tabs, displayActive, handleTabClick, focusTab]\r\n  );\r\n\r\n  if (!tabs.length) {\r\n    return null;\r\n  }\r\n\r\n  const wrapperClass = cn(\r\n    \"eztrak-tabs-wrapper\",\r\n    classNames?.wrapper,\r\n    className\r\n  );\r\n\r\n  return (\r\n    <div className={wrapperClass}>\r\n      <div className=\"eztrak-tabs-container\">\r\n        <nav className=\"eztrak-tabs-nav\" aria-label=\"Tabs\">\r\n          <ul\r\n            role=\"tablist\"\r\n            className={cn(\"eztrak-tabs-list\", classNames?.list)}\r\n            onKeyDown={handleListKeyDown}\r\n          >\r\n            {tabs.map((tab) => {\r\n              const isActive = displayActive === tab.id;\r\n              const tabId = `${baseId}-tab-${tab.id}`;\r\n              const panelId = `${baseId}-panel-${tab.id}`;\r\n\r\n              return (\r\n                <li\r\n                  key={tab.id}\r\n                  role=\"presentation\"\r\n                  className={cn(\r\n                    \"eztrak-tabs-item\",\r\n                    isActive && \"eztrak-tabs-item-active\",\r\n                    classNames?.item,\r\n                    isActive && classNames?.itemActive\r\n                  )}\r\n                >\r\n                  <button\r\n                    ref={(el) => {\r\n                      if (el) {\r\n                        tabRefs.current.set(tab.id, el);\r\n                      } else {\r\n                        tabRefs.current.delete(tab.id);\r\n                      }\r\n                    }}\r\n                    type=\"button\"\r\n                    role=\"tab\"\r\n                    id={tabId}\r\n                    aria-selected={isActive}\r\n                    aria-controls={showPanels ? panelId : undefined}\r\n                    tabIndex={isActive ? 0 : -1}\r\n                    disabled={tab.disabled}\r\n                    className={cn(\r\n                      \"eztrak-tabs-button\",\r\n                      isActive && \"eztrak-tabs-button-active\",\r\n                      classNames?.button,\r\n                      isActive && classNames?.buttonActive\r\n                    )}\r\n                    onClick={() => handleTabClick(tab.id, tab.disabled)}\r\n                  >\r\n                    {tab.icon ? (\r\n                      <span\r\n                        className={cn(\"eztrak-tabs-icon\", classNames?.icon)}\r\n                        aria-hidden\r\n                      >\r\n                        {tab.icon}\r\n                      </span>\r\n                    ) : null}\r\n                    <span\r\n                      className={cn(\"eztrak-tabs-label\", classNames?.label)}\r\n                    >\r\n                      {tab.label}\r\n                    </span>\r\n                    {isActive ? (\r\n                      <span\r\n                        className={cn(\r\n                          \"eztrak-tabs-underline\",\r\n                          classNames?.underline\r\n                        )}\r\n                        aria-hidden\r\n                      />\r\n                    ) : null}\r\n                  </button>\r\n                </li>\r\n              );\r\n            })}\r\n          </ul>\r\n        </nav>\r\n\r\n        {showPanels ? (\r\n          <div className={cn(\"eztrak-tabs-content\", classNames?.content)}>\r\n            {tabs.map((tab) => {\r\n              const isActive = displayActive === tab.id;\r\n              const panelId = `${baseId}-panel-${tab.id}`;\r\n              const tabId = `${baseId}-tab-${tab.id}`;\r\n\r\n              if (!keepMounted && !isActive) {\r\n                return null;\r\n              }\r\n\r\n              return (\r\n                <div\r\n                  key={tab.id}\r\n                  id={panelId}\r\n                  role=\"tabpanel\"\r\n                  aria-labelledby={tabId}\r\n                  hidden={!isActive}\r\n                  className={cn(\"eztrak-tabs-panel\", classNames?.panel)}\r\n                >\r\n                  {tab.content}\r\n                </div>\r\n              );\r\n            })}\r\n          </div>\r\n        ) : null}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n","import clsx from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: Parameters<typeof clsx>) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n"],"mappings":"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","names":["clsx"]}

package/dist/components/index.mjs

@@ -0,0 +1,8 @@
+import {
+  EztrakTabs
+} from "../chunk-SNADLOOV.mjs";
+import "../chunk-5L6SERQP.mjs";
+export {
+  EztrakTabs
+};
+//# sourceMappingURL=index.mjs.map

package/dist/components/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/tabs/styles.css

@@ -0,0 +1,205 @@
+/* Theme tokens — override on :root or a wrapper */
+:root {
+  --eztrak-tabs-accent: #f54e00;
+  --eztrak-tabs-inactive-bg: #f3f4f6;
+  --eztrak-tabs-inactive-border: #e0e0e0;
+  --eztrak-tabs-active-bg: #ffffff;
+  --eztrak-tabs-label-inactive: #9ca3af;
+  --eztrak-tabs-label-active: #1f2937;
+  --eztrak-tabs-label-hover: #6b7280;
+  --eztrak-tabs-hover-bg: #e5e7eb;
+  --eztrak-tabs-hover-border: #d1d5db;
+  --eztrak-tabs-radius: 6px;
+  --eztrak-tabs-gap: 8px;
+  --eztrak-tabs-padding: 10px 18px;
+  --eztrak-tabs-focus-color: #3b82f6;
+}
+
+.eztrak-tabs-wrapper {
+  width: 100%;
+  background: transparent;
+}
+
+.eztrak-tabs-container {
+  width: 100%;
+  background: transparent;
+}
+
+.eztrak-tabs-nav {
+  width: 100%;
+  background: transparent;
+}
+
+.eztrak-tabs-list {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--eztrak-tabs-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.eztrak-tabs-item {
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.eztrak-tabs-button {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: var(--eztrak-tabs-padding);
+  background: var(--eztrak-tabs-inactive-bg);
+  border: 1px solid var(--eztrak-tabs-inactive-border);
+  border-radius: var(--eztrak-tabs-radius);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.08),
+    0 0 1px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+  min-width: fit-content;
+  white-space: nowrap;
+}
+
+.eztrak-tabs-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.eztrak-tabs-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.eztrak-tabs-label {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--eztrak-tabs-label-inactive);
+  transition: color 0.2s ease;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+  line-height: 1.4;
+  letter-spacing: 0.01em;
+}
+
+.eztrak-tabs-item-active .eztrak-tabs-button {
+  flex-direction: column;
+  background: var(--eztrak-tabs-active-bg);
+  border: none;
+  box-shadow: none;
+  padding-bottom: 12px;
+}
+
+.eztrak-tabs-item-active .eztrak-tabs-label {
+  color: var(--eztrak-tabs-label-active);
+  font-weight: 500;
+}
+
+.eztrak-tabs-underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--eztrak-tabs-accent);
+  border-radius: 2px 2px 0 0;
+  animation: eztrak-tabs-slide-in 0.2s ease;
+}
+
+@keyframes eztrak-tabs-slide-in {
+  from {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+.eztrak-tabs-item:not(.eztrak-tabs-item-active) .eztrak-tabs-button:hover:not(:disabled) {
+  background: var(--eztrak-tabs-hover-bg);
+  border-color: var(--eztrak-tabs-hover-border);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.1),
+    0 0 1px rgba(0, 0, 0, 0.08);
+}
+
+.eztrak-tabs-item:not(.eztrak-tabs-item-active)
+  .eztrak-tabs-button:hover:not(:disabled)
+  .eztrak-tabs-label {
+  color: var(--eztrak-tabs-label-hover);
+}
+
+.eztrak-tabs-button:focus-visible {
+  outline: 2px solid var(--eztrak-tabs-focus-color);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+
+.eztrak-tabs-item-active .eztrak-tabs-button:focus-visible {
+  outline-offset: 4px;
+}
+
+.eztrak-tabs-content {
+  width: 100%;
+  background: transparent;
+  margin-top: 0;
+}
+
+.eztrak-tabs-panel {
+  width: 100%;
+  background: transparent;
+}
+
+.eztrak-tabs-panel-hidden {
+  display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .eztrak-tabs-list {
+    flex-wrap: wrap;
+    gap: var(--eztrak-tabs-gap);
+  }
+
+  .eztrak-tabs-button {
+    padding: 10px 16px;
+    font-size: 13px;
+  }
+
+  .eztrak-tabs-label {
+    font-size: 13px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .eztrak-tabs-list {
+    gap: 6px;
+  }
+
+  .eztrak-tabs-button {
+    padding: 8px 12px;
+  }
+
+  .eztrak-tabs-label {
+    font-size: 12px;
+  }
+}

package/dist/index.d.mts

@@ -1,4 +1,6 @@
 export { HandleApiErrorOptions, RtkQueryError, capitalizeText, checkIfExistsInArray, cn, convertCommaDataToArray, currencyFormatter, deserializeJson, flattenTableData, formatDate, formatDateTime, formatValidationErrorsHtml, getApiError, getErrorMessages, getFieldsByCategory, getFieldsByInputType, getFieldsByName, handleApiError, isEmpty, normalizeApiListItems, parseCurrencyValueToNumber, removeByPropertyValues, toDateInputValue, toLowerCaseText, truncateText } from './utils/index.mjs';
 export { UseGridHeightOptions, useGridHeight, usePaginationUrlSync } from './hooks/index.mjs';
+export { EztrakTab, EztrakTabs, EztrakTabsClassNames, EztrakTabsProps } from './components/index.mjs';
 import 'clsx';
 import 'react-router-dom';
+import 'react';

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { HandleApiErrorOptions, RtkQueryError, capitalizeText, checkIfExistsInArray, cn, convertCommaDataToArray, currencyFormatter, deserializeJson, flattenTableData, formatDate, formatDateTime, formatValidationErrorsHtml, getApiError, getErrorMessages, getFieldsByCategory, getFieldsByInputType, getFieldsByName, handleApiError, isEmpty, normalizeApiListItems, parseCurrencyValueToNumber, removeByPropertyValues, toDateInputValue, toLowerCaseText, truncateText } from './utils/index.js';
 export { UseGridHeightOptions, useGridHeight, usePaginationUrlSync } from './hooks/index.js';
+export { EztrakTab, EztrakTabs, EztrakTabsClassNames, EztrakTabsProps } from './components/index.js';
 import 'clsx';
 import 'react-router-dom';
+import 'react';