@eztrak/shared 0.4.0 → 0.4.5

package/dist/chunk-SNADLOOV.mjs

@@ -1,213 +0,0 @@
-import {
-  cn
-} from "./chunk-5L6SERQP.mjs";
-
-// src/components/tabs/EztrakTabs.tsx
-import {
-  useCallback,
-  useEffect,
-  useId,
-  useRef,
-  useState
-} from "react";
-import { jsx, jsxs } from "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 = useId().replace(/:/g, "");
-  const isControlled = activeTab !== void 0 && activeTab !== null;
-  const [uncontrolledActive, setUncontrolledActive] = useState(
-    () => getInitialTabId(tabs, defaultTabId)
-  );
-  const tabRefs = useRef(/* @__PURE__ */ new Map());
-  const displayActive = isControlled ? activeTab : uncontrolledActive;
-  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 = useCallback(
-    (tabId, disabled) => {
-      if (disabled) return;
-      if (!isControlled) {
-        setUncontrolledActive(tabId);
-      }
-      onTabChange?.(tabId);
-    },
-    [isControlled, onTabChange]
-  );
-  const focusTab = useCallback((tabId) => {
-    tabRefs.current.get(tabId)?.focus();
-  }, []);
-  const handleListKeyDown = 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__ */ jsx("div", { className: wrapperClass, children: /* @__PURE__ */ jsxs("div", { className: "eztrak-tabs-container", children: [
-    /* @__PURE__ */ jsx("nav", { className: "eztrak-tabs-nav", "aria-label": "Tabs", children: /* @__PURE__ */ 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__ */ jsx(
-            "li",
-            {
-              role: "presentation",
-              className: cn(
-                "eztrak-tabs-item",
-                isActive && "eztrak-tabs-item-active",
-                classNames?.item,
-                isActive && classNames?.itemActive
-              ),
-              children: /* @__PURE__ */ 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__ */ jsx(
-                      "span",
-                      {
-                        className: cn("eztrak-tabs-icon", classNames?.icon),
-                        "aria-hidden": true,
-                        children: tab.icon
-                      }
-                    ) : null,
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn("eztrak-tabs-label", classNames?.label),
-                        children: tab.label
-                      }
-                    ),
-                    isActive ? /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "eztrak-tabs-underline",
-                          classNames?.underline
-                        ),
-                        "aria-hidden": true
-                      }
-                    ) : null
-                  ]
-                }
-              )
-            },
-            tab.id
-          );
-        })
-      }
-    ) }),
-    showPanels ? /* @__PURE__ */ 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__ */ jsx(
-        "div",
-        {
-          id: panelId,
-          role: "tabpanel",
-          "aria-labelledby": tabId,
-          hidden: !isActive,
-          className: cn("eztrak-tabs-panel", classNames?.panel),
-          children: tab.content
-        },
-        tab.id
-      );
-    }) }) : null
-  ] }) });
-}
-
-export {
-  EztrakTabs
-};
-//# sourceMappingURL=chunk-SNADLOOV.mjs.map

package/dist/chunk-SNADLOOV.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/tabs/EztrakTabs.tsx"],"sourcesContent":["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"],"mappings":"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","names":[]}