boreal-ui 0.0.34 → 0.0.36

package/dist/next/Tabs-Dl389scs.js

@@ -0,0 +1,263 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useRef, useEffect, useMemo } from "react";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { c as getDefaultSize, d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
+const noScroll = "_noScroll_13ifa_108";
+const errorMessage = "_errorMessage_13ifa_109";
+const loadingContainer = "_loadingContainer_13ifa_110";
+const hideScrollbar = "_hideScrollbar_13ifa_102";
+const sr_only = "_sr_only_13ifa_111";
+const tabs_container = "_tabs_container_13ifa_540";
+const tabs = "_tabs_13ifa_540";
+const icon = "_icon_13ifa_563";
+const tab = "_tab_13ifa_540";
+const xs = "_xs_13ifa_620";
+const small = "_small_13ifa_630";
+const medium = "_medium_13ifa_640";
+const large = "_large_13ifa_650";
+const xl = "_xl_13ifa_660";
+const content = "_content_13ifa_670";
+const primary = "_primary_13ifa_691";
+const active = "_active_13ifa_691";
+const secondary = "_secondary_13ifa_700";
+const tertiary = "_tertiary_13ifa_709";
+const quaternary = "_quaternary_13ifa_718";
+const clear = "_clear_13ifa_727";
+const success = "_success_13ifa_736";
+const error = "_error_13ifa_109";
+const warning = "_warning_13ifa_754";
+const roundNone = "_roundNone_13ifa_767";
+const roundSmall = "_roundSmall_13ifa_777";
+const roundMedium = "_roundMedium_13ifa_787";
+const roundLarge = "_roundLarge_13ifa_797";
+const roundFull = "_roundFull_13ifa_807";
+const shadowNone = "_shadowNone_13ifa_817";
+const shadowLight = "_shadowLight_13ifa_821";
+const shadowMedium = "_shadowMedium_13ifa_825";
+const shadowStrong = "_shadowStrong_13ifa_829";
+const shadowIntense = "_shadowIntense_13ifa_833";
+const spin = "_spin_13ifa_1";
+const pulse = "_pulse_13ifa_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  tabs_container,
+  tabs,
+  icon,
+  tab,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  content,
+  primary,
+  active,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  success,
+  error,
+  warning,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_13ifa_1",
+  "slide-up": "_slide-up_13ifa_1",
+  "spin-3d": "_spin-3d_13ifa_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_13ifa_1",
+  "progress-grow": "_progress-grow_13ifa_1",
+  "indeterminate-move": "_indeterminate-move_13ifa_1",
+  "skeleton-loading": "_skeleton-loading_13ifa_1"
+};
+const TabsBase = ({
+  tabs: tabs2,
+  defaultIndex = 0,
+  onChange,
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  className = "",
+  theme = getDefaultTheme(),
+  state = "",
+  size = getDefaultSize(),
+  orientation = "horizontal",
+  activationMode = "auto",
+  "data-testid": testId = "tabs",
+  classMap
+}) => {
+  const uid = useId();
+  const baseId = `${testId}-${uid}`;
+  const [activeIndex, setActiveIndex] = useState(defaultIndex);
+  const [focusIndex, setFocusIndex] = useState(defaultIndex);
+  const tabRefs = useRef([]);
+  useEffect(() => {
+    var _a;
+    const current = activationMode === "manual" ? focusIndex : activeIndex;
+    tabRefs.current.forEach((el, i) => {
+      if (!el) return;
+      el.setAttribute("tabindex", i === current ? "0" : "-1");
+    });
+    (_a = tabRefs.current[current]) == null ? void 0 : _a.focus();
+  }, [activeIndex, focusIndex, activationMode]);
+  const containerClassNames = useMemo(
+    () => combineClassNames(
+      classMap.container,
+      classMap[theme],
+      classMap[state],
+      classMap[size],
+      className
+    ),
+    [classMap, theme, state, size, className]
+  );
+  const tabClassNames = useMemo(
+    () => combineClassNames(
+      classMap.tab,
+      shadow && classMap[`shadow${capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize(rounding)}`]
+    ),
+    [classMap, shadow, rounding]
+  );
+  const activate = (index) => {
+    setActiveIndex(index);
+    onChange == null ? void 0 : onChange(index);
+  };
+  const isDisabled = (index) => {
+    var _a;
+    return !!((_a = tabs2[index]) == null ? void 0 : _a.disabled);
+  };
+  const nextEnabled = (start, dir) => {
+    const len = tabs2.length;
+    let i = start;
+    for (let n = 0; n < len; n++) {
+      i = (i + dir + len) % len;
+      if (!isDisabled(i)) return i;
+    }
+    return start;
+  };
+  const onKeyDown = (event) => {
+    const horiz = orientation === "horizontal";
+    const { key } = event;
+    let newFocus = focusIndex;
+    if (horiz && key === "ArrowRight") {
+      event.preventDefault();
+      newFocus = nextEnabled(focusIndex, 1);
+    } else if (horiz && key === "ArrowLeft") {
+      event.preventDefault();
+      newFocus = nextEnabled(focusIndex, -1);
+    } else if (!horiz && key === "ArrowDown") {
+      event.preventDefault();
+      newFocus = nextEnabled(focusIndex, 1);
+    } else if (!horiz && key === "ArrowUp") {
+      event.preventDefault();
+      newFocus = nextEnabled(focusIndex, -1);
+    } else if (key === "Home") {
+      event.preventDefault();
+      newFocus = nextEnabled(-1, 1);
+    } else if (key === "End") {
+      event.preventDefault();
+      newFocus = nextEnabled(0, -1);
+    } else if (activationMode === "manual" && (key === "Enter" || key === " ")) {
+      event.preventDefault();
+      if (!isDisabled(focusIndex)) activate(focusIndex);
+      return;
+    } else {
+      return;
+    }
+    setFocusIndex(newFocus);
+    if (activationMode === "auto") activate(newFocus);
+  };
+  const currentPanelId = `${baseId}-panel-${activeIndex}`;
+  const currentTabId = `${baseId}-tab-${activeIndex}`;
+  return /* @__PURE__ */ jsxs("div", { className: containerClassNames, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classMap.tabs,
+        role: "tablist",
+        "aria-label": "Tabs",
+        "aria-orientation": orientation,
+        onKeyDown,
+        "data-testid": `${testId}-tablist`,
+        children: tabs2.map((tab2, index) => {
+          const Icon = tab2.icon;
+          const isActive = index === activeIndex;
+          const disabled = isDisabled(index);
+          const tabId = `${baseId}-tab-${index}`;
+          const panelId = `${baseId}-panel-${index}`;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (el) => {
+                tabRefs.current[index] = el;
+              },
+              className: combineClassNames(
+                tabClassNames,
+                isActive && classMap.active,
+                disabled && classMap.disabled
+              ),
+              role: "tab",
+              type: "button",
+              "aria-selected": isActive,
+              "aria-controls": panelId,
+              id: tabId,
+              "aria-disabled": disabled || void 0,
+              onClick: () => {
+                if (disabled) return;
+                setFocusIndex(index);
+                activate(index);
+              },
+              "data-testid": `${testId}-tab-${index}`,
+              children: [
+                Icon && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classMap.icon,
+                    "aria-hidden": "true",
+                    "data-testid": `${testId}-icon-${index}`,
+                    children: /* @__PURE__ */ jsx(Icon, {})
+                  }
+                ),
+                tab2.label
+              ]
+            },
+            index
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classMap.content,
+        role: "tabpanel",
+        id: currentPanelId,
+        "aria-labelledby": currentTabId,
+        tabIndex: 0,
+        "data-testid": `${testId}-panel`,
+        children: tabs2[activeIndex].content
+      }
+    )
+  ] });
+};
+TabsBase.displayName = "TabsBase";
+const Tabs = (props) => {
+  return /* @__PURE__ */ jsx(TabsBase, { ...props, classMap: styles });
+};
+export {
+  Tabs as T
+};
+//# sourceMappingURL=Tabs-Dl389scs.js.map

package/dist/next/Tabs-Dl389scs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs-Dl389scs.js","sources":["../../src/components/Tabs/TabsBase.tsx","../../src/components/Tabs/next/Tabs.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState, useId } from \"react\";\r\nimport { BaseTabsProps } from \"./Tabs.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TabsBase: React.FC<BaseTabsProps> = ({\r\n  tabs,\r\n  defaultIndex = 0,\r\n  onChange,\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  className = \"\",\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  orientation = \"horizontal\",\r\n  activationMode = \"auto\",\r\n  \"data-testid\": testId = \"tabs\",\r\n  classMap,\r\n}) => {\r\n  const uid = useId();\r\n  const baseId = `${testId}-${uid}`;\r\n\r\n  const [activeIndex, setActiveIndex] = useState(defaultIndex);\r\n  const [focusIndex, setFocusIndex] = useState(defaultIndex);\r\n\r\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\r\n\r\n  useEffect(() => {\r\n    const current = activationMode === \"manual\" ? focusIndex : activeIndex;\r\n    tabRefs.current.forEach((el, i) => {\r\n      if (!el) return;\r\n      el.setAttribute(\"tabindex\", i === current ? \"0\" : \"-1\");\r\n    });\r\n    tabRefs.current[current]?.focus();\r\n  }, [activeIndex, focusIndex, activationMode]);\r\n\r\n  const containerClassNames = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.container,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        className\r\n      ),\r\n    [classMap, theme, state, size, className]\r\n  );\r\n\r\n  const tabClassNames = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.tab,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`]\r\n      ),\r\n    [classMap, shadow, rounding]\r\n  );\r\n\r\n  const activate = (index: number) => {\r\n    setActiveIndex(index);\r\n    onChange?.(index);\r\n  };\r\n\r\n  const isDisabled = (index: number) => !!tabs[index]?.disabled;\r\n\r\n  const nextEnabled = (start: number, dir: 1 | -1) => {\r\n    const len = tabs.length;\r\n    let i = start;\r\n    for (let n = 0; n < len; n++) {\r\n      i = (i + dir + len) % len;\r\n      if (!isDisabled(i)) return i;\r\n    }\r\n    return start;\r\n  };\r\n\r\n  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n    const horiz = orientation === \"horizontal\";\r\n    const { key } = event;\r\n\r\n    let newFocus = focusIndex;\r\n\r\n    if (horiz && key === \"ArrowRight\") {\r\n      event.preventDefault();\r\n      newFocus = nextEnabled(focusIndex, 1);\r\n    } else if (horiz && key === \"ArrowLeft\") {\r\n      event.preventDefault();\r\n      newFocus = nextEnabled(focusIndex, -1);\r\n    } else if (!horiz && key === \"ArrowDown\") {\r\n      event.preventDefault();\r\n      newFocus = nextEnabled(focusIndex, 1);\r\n    } else if (!horiz && key === \"ArrowUp\") {\r\n      event.preventDefault();\r\n      newFocus = nextEnabled(focusIndex, -1);\r\n    } else if (key === \"Home\") {\r\n      event.preventDefault();\r\n      newFocus = nextEnabled(-1, 1);\r\n    } else if (key === \"End\") {\r\n      event.preventDefault();\r\n      newFocus = nextEnabled(0, -1);\r\n    } else if (\r\n      activationMode === \"manual\" &&\r\n      (key === \"Enter\" || key === \" \")\r\n    ) {\r\n      event.preventDefault();\r\n      if (!isDisabled(focusIndex)) activate(focusIndex);\r\n      return;\r\n    } else {\r\n      return;\r\n    }\r\n\r\n    setFocusIndex(newFocus);\r\n    if (activationMode === \"auto\") activate(newFocus);\r\n  };\r\n\r\n  const currentPanelId = `${baseId}-panel-${activeIndex}`;\r\n  const currentTabId = `${baseId}-tab-${activeIndex}`;\r\n\r\n  return (\r\n    <div className={containerClassNames} data-testid={testId}>\r\n      <div\r\n        className={classMap.tabs}\r\n        role=\"tablist\"\r\n        aria-label=\"Tabs\"\r\n        aria-orientation={orientation}\r\n        onKeyDown={onKeyDown}\r\n        data-testid={`${testId}-tablist`}\r\n      >\r\n        {tabs.map((tab, index) => {\r\n          const Icon = tab.icon;\r\n          const isActive = index === activeIndex;\r\n          const disabled = isDisabled(index);\r\n          const tabId = `${baseId}-tab-${index}`;\r\n          const panelId = `${baseId}-panel-${index}`;\r\n\r\n          return (\r\n            <button\r\n              key={index}\r\n              ref={(el) => {\r\n                tabRefs.current[index] = el;\r\n              }}\r\n              className={combineClassNames(\r\n                tabClassNames,\r\n                isActive && classMap.active,\r\n                disabled && classMap.disabled\r\n              )}\r\n              role=\"tab\"\r\n              type=\"button\"\r\n              aria-selected={isActive}\r\n              aria-controls={panelId}\r\n              id={tabId}\r\n              aria-disabled={disabled || undefined}\r\n              onClick={() => {\r\n                if (disabled) return;\r\n                setFocusIndex(index);\r\n                activate(index);\r\n              }}\r\n              data-testid={`${testId}-tab-${index}`}\r\n            >\r\n              {Icon && (\r\n                <div\r\n                  className={classMap.icon}\r\n                  aria-hidden=\"true\"\r\n                  data-testid={`${testId}-icon-${index}`}\r\n                >\r\n                  <Icon />\r\n                </div>\r\n              )}\r\n              {tab.label}\r\n            </button>\r\n          );\r\n        })}\r\n      </div>\r\n\r\n      <div\r\n        className={classMap.content}\r\n        role=\"tabpanel\"\r\n        id={currentPanelId}\r\n        aria-labelledby={currentTabId}\r\n        tabIndex={0}\r\n        data-testid={`${testId}-panel`}\r\n      >\r\n        {tabs[activeIndex].content}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nTabsBase.displayName = \"TabsBase\";\r\nexport default TabsBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport styles from \"./Tabs.module.scss\";\r\nimport TabsBase from \"../TabsBase\";\r\nimport { TabsProps } from \"../Tabs.types\";\r\n\r\nconst Tabs: React.FC<TabsProps> = (props) => {\r\n  return <TabsBase {...props} classMap={styles} />;\r\n};\r\n\r\nexport default Tabs;\r\n"],"names":["tabs","tab"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,MAAM,WAAoC,CAAC;AAAA,EACzC,MAAAA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ,gBAAA;AAAA,EACR,QAAQ;AAAA,EACR,OAAO,eAAA;AAAA,EACP,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,eAAe,SAAS;AAAA,EACxB;AACF,MAAM;AACJ,QAAM,MAAM,MAAA;AACZ,QAAM,SAAS,GAAG,MAAM,IAAI,GAAG;AAE/B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,YAAY;AAC3D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,YAAY;AAEzD,QAAM,UAAU,OAAqC,EAAE;AAEvD,YAAU,MAAM;;AACd,UAAM,UAAU,mBAAmB,WAAW,aAAa;AAC3D,YAAQ,QAAQ,QAAQ,CAAC,IAAI,MAAM;AACjC,UAAI,CAAC,GAAI;AACT,SAAG,aAAa,YAAY,MAAM,UAAU,MAAM,IAAI;AAAA,IACxD,CAAC;AACD,kBAAQ,QAAQ,OAAO,MAAvB,mBAA0B;AAAA,EAC5B,GAAG,CAAC,aAAa,YAAY,cAAc,CAAC;AAE5C,QAAM,sBAAsB;AAAA,IAC1B,MACE;AAAA,MACE,SAAS;AAAA,MACT,SAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,SAAS,IAAI;AAAA,MACb;AAAA,IAAA;AAAA,IAEJ,CAAC,UAAU,OAAO,OAAO,MAAM,SAAS;AAAA,EAAA;AAG1C,QAAM,gBAAgB;AAAA,IACpB,MACE;AAAA,MACE,SAAS;AAAA,MACT,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,IAAA;AAAA,IAEvD,CAAC,UAAU,QAAQ,QAAQ;AAAA,EAAA;AAG7B,QAAM,WAAW,CAAC,UAAkB;AAClC,mBAAe,KAAK;AACpB,yCAAW;AAAA,EACb;AAEA,QAAM,aAAa,CAAC,UAAA;;AAAkB,YAAC,GAAC,KAAAA,MAAK,KAAK,MAAV,mBAAa;AAAA;AAErD,QAAM,cAAc,CAAC,OAAe,QAAgB;AAClD,UAAM,MAAMA,MAAK;AACjB,QAAI,IAAI;AACR,aAAS,IAAI,GAAG,IAAI,KAAK,KAAK;AAC5B,WAAK,IAAI,MAAM,OAAO;AACtB,UAAI,CAAC,WAAW,CAAC,EAAG,QAAO;AAAA,IAC7B;AACA,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,CAAC,UAA+C;AAChE,UAAM,QAAQ,gBAAgB;AAC9B,UAAM,EAAE,QAAQ;AAEhB,QAAI,WAAW;AAEf,QAAI,SAAS,QAAQ,cAAc;AACjC,YAAM,eAAA;AACN,iBAAW,YAAY,YAAY,CAAC;AAAA,IACtC,WAAW,SAAS,QAAQ,aAAa;AACvC,YAAM,eAAA;AACN,iBAAW,YAAY,YAAY,EAAE;AAAA,IACvC,WAAW,CAAC,SAAS,QAAQ,aAAa;AACxC,YAAM,eAAA;AACN,iBAAW,YAAY,YAAY,CAAC;AAAA,IACtC,WAAW,CAAC,SAAS,QAAQ,WAAW;AACtC,YAAM,eAAA;AACN,iBAAW,YAAY,YAAY,EAAE;AAAA,IACvC,WAAW,QAAQ,QAAQ;AACzB,YAAM,eAAA;AACN,iBAAW,YAAY,IAAI,CAAC;AAAA,IAC9B,WAAW,QAAQ,OAAO;AACxB,YAAM,eAAA;AACN,iBAAW,YAAY,GAAG,EAAE;AAAA,IAC9B,WACE,mBAAmB,aAClB,QAAQ,WAAW,QAAQ,MAC5B;AACA,YAAM,eAAA;AACN,UAAI,CAAC,WAAW,UAAU,YAAY,UAAU;AAChD;AAAA,IACF,OAAO;AACL;AAAA,IACF;AAEA,kBAAc,QAAQ;AACtB,QAAI,mBAAmB,OAAQ,UAAS,QAAQ;AAAA,EAClD;AAEA,QAAM,iBAAiB,GAAG,MAAM,UAAU,WAAW;AACrD,QAAM,eAAe,GAAG,MAAM,QAAQ,WAAW;AAEjD,SACE,qBAAC,OAAA,EAAI,WAAW,qBAAqB,eAAa,QAChD,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,SAAS;AAAA,QACpB,MAAK;AAAA,QACL,cAAW;AAAA,QACX,oBAAkB;AAAA,QAClB;AAAA,QACA,eAAa,GAAG,MAAM;AAAA,QAErB,UAAAA,MAAK,IAAI,CAACC,MAAK,UAAU;AACxB,gBAAM,OAAOA,KAAI;AACjB,gBAAM,WAAW,UAAU;AAC3B,gBAAM,WAAW,WAAW,KAAK;AACjC,gBAAM,QAAQ,GAAG,MAAM,QAAQ,KAAK;AACpC,gBAAM,UAAU,GAAG,MAAM,UAAU,KAAK;AAExC,iBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,KAAK,CAAC,OAAO;AACX,wBAAQ,QAAQ,KAAK,IAAI;AAAA,cAC3B;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY,SAAS;AAAA,gBACrB,YAAY,SAAS;AAAA,cAAA;AAAA,cAEvB,MAAK;AAAA,cACL,MAAK;AAAA,cACL,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf,IAAI;AAAA,cACJ,iBAAe,YAAY;AAAA,cAC3B,SAAS,MAAM;AACb,oBAAI,SAAU;AACd,8BAAc,KAAK;AACnB,yBAAS,KAAK;AAAA,cAChB;AAAA,cACA,eAAa,GAAG,MAAM,QAAQ,KAAK;AAAA,cAElC,UAAA;AAAA,gBAAA,QACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,SAAS;AAAA,oBACpB,eAAY;AAAA,oBACZ,eAAa,GAAG,MAAM,SAAS,KAAK;AAAA,oBAEpC,8BAAC,MAAA,CAAA,CAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGTA,KAAI;AAAA,cAAA;AAAA,YAAA;AAAA,YA/BA;AAAA,UAAA;AAAA,QAkCX,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,SAAS;AAAA,QACpB,MAAK;AAAA,QACL,IAAI;AAAA,QACJ,mBAAiB;AAAA,QACjB,UAAU;AAAA,QACV,eAAa,GAAG,MAAM;AAAA,QAErB,UAAAD,MAAK,WAAW,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACrB,GACF;AAEJ;AAEA,SAAS,cAAc;AC3LvB,MAAM,OAA4B,CAAC,UAAU;AAC3C,SAAO,oBAAC,UAAA,EAAU,GAAG,OAAO,UAAU,QAAQ;AAChD;"}

package/dist/next/Tabs.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Tabs = require("./Tabs-DhQgzZKQ.cjs");
+const Tabs = require("./Tabs-0GBOWBIt.cjs");
 module.exports = Tabs.Tabs;
 //# sourceMappingURL=Tabs.cjs.js.map

package/dist/next/Tabs.js

@@ -1,4 +1,4 @@
-import { T } from "./Tabs-CuF_JTan.js";
+import { T } from "./Tabs-Dl389scs.js";
 export {
   T as default
 };

package/dist/next/TagInput-Bjt_zbHy.js

@@ -0,0 +1,362 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as IconButton } from "./IconButton-qQljwBB2.js";
+import { T as TextInput } from "./TextInput-D9dzooMU.js";
+import { useId, useState, useRef, useEffect, useMemo } from "react";
+import { C as CloseIcon } from "./CloseIcon-C3eQm4EK.js";
+import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
+import { c as capitalize } from "./capitalize-C0TSQSPh.js";
+import { c as getDefaultSize, d as getDefaultTheme, a as getDefaultRounding, b as getDefaultShadow } from "./boreal-style-config-BILmxkZG.js";
+const noScroll = "_noScroll_8ms2i_108";
+const errorMessage = "_errorMessage_8ms2i_109";
+const loadingContainer = "_loadingContainer_8ms2i_110";
+const hideScrollbar = "_hideScrollbar_8ms2i_102";
+const sr_only = "_sr_only_8ms2i_111";
+const tagInput = "_tagInput_8ms2i_540";
+const tag = "_tag_8ms2i_540";
+const suggestionItem = "_suggestionItem_8ms2i_568";
+const inputWrapper = "_inputWrapper_8ms2i_572";
+const tagContainer = "_tagContainer_8ms2i_581";
+const removeButton = "_removeButton_8ms2i_604";
+const tagLabel = "_tagLabel_8ms2i_647";
+const suggestionList = "_suggestionList_8ms2i_651";
+const xs = "_xs_8ms2i_694";
+const small = "_small_8ms2i_704";
+const medium = "_medium_8ms2i_714";
+const large = "_large_8ms2i_724";
+const xl = "_xl_8ms2i_734";
+const primary = "_primary_8ms2i_744";
+const secondary = "_secondary_8ms2i_748";
+const tertiary = "_tertiary_8ms2i_752";
+const quaternary = "_quaternary_8ms2i_756";
+const clear = "_clear_8ms2i_760";
+const success = "_success_8ms2i_764";
+const error = "_error_8ms2i_109";
+const warning = "_warning_8ms2i_774";
+const roundNone = "_roundNone_8ms2i_779";
+const roundSmall = "_roundSmall_8ms2i_783";
+const roundMedium = "_roundMedium_8ms2i_787";
+const roundLarge = "_roundLarge_8ms2i_791";
+const roundFull = "_roundFull_8ms2i_795";
+const shadowNone = "_shadowNone_8ms2i_799";
+const shadowLight = "_shadowLight_8ms2i_803";
+const shadowMedium = "_shadowMedium_8ms2i_807";
+const shadowStrong = "_shadowStrong_8ms2i_811";
+const shadowIntense = "_shadowIntense_8ms2i_815";
+const spin = "_spin_8ms2i_1";
+const pulse = "_pulse_8ms2i_1";
+const styles = {
+  noScroll,
+  errorMessage,
+  loadingContainer,
+  hideScrollbar,
+  sr_only,
+  tagInput,
+  tag,
+  suggestionItem,
+  inputWrapper,
+  tagContainer,
+  removeButton,
+  tagLabel,
+  suggestionList,
+  xs,
+  small,
+  medium,
+  large,
+  xl,
+  primary,
+  secondary,
+  tertiary,
+  quaternary,
+  clear,
+  success,
+  error,
+  warning,
+  roundNone,
+  roundSmall,
+  roundMedium,
+  roundLarge,
+  roundFull,
+  shadowNone,
+  shadowLight,
+  shadowMedium,
+  shadowStrong,
+  shadowIntense,
+  "fade-in": "_fade-in_8ms2i_1",
+  "slide-up": "_slide-up_8ms2i_1",
+  "spin-3d": "_spin-3d_8ms2i_1",
+  spin,
+  pulse,
+  "fade-in-up": "_fade-in-up_8ms2i_1",
+  "progress-grow": "_progress-grow_8ms2i_1",
+  "indeterminate-move": "_indeterminate-move_8ms2i_1",
+  "skeleton-loading": "_skeleton-loading_8ms2i_1"
+};
+const TagInputBase = ({
+  tags = [],
+  onChange,
+  fetchSuggestions,
+  debounceMs = 300,
+  placeholder = "Add a tag...",
+  theme = getDefaultTheme(),
+  state = "",
+  size = getDefaultSize(),
+  rounding = getDefaultRounding(),
+  shadow = getDefaultShadow(),
+  "data-testid": testId = "tag-input",
+  ariaDescription = "Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty.",
+  classMap,
+  IconButton: IconButton2,
+  TextInput: TextInput2
+}) => {
+  const uid = useId();
+  const inputId = `${testId}-input-${uid}`;
+  const descId = `${testId}-desc-${uid}`;
+  const labelId = `${testId}-label-${uid}`;
+  const listboxId = `${testId}-listbox-${uid}`;
+  const statusId = `${testId}-status-${uid}`;
+  const [inputValue, setInputValue] = useState("");
+  const [tagList, setTagList] = useState(tags);
+  const [lastAction, setLastAction] = useState("");
+  const [suggestions, setSuggestions] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const debounceRef = useRef(null);
+  const hasTag = (val) => tagList.some((t) => t.toLowerCase() === val.toLowerCase());
+  useEffect(() => {
+    if (!fetchSuggestions) {
+      setSuggestions([]);
+      setOpen(false);
+      return;
+    }
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    const query = inputValue.trim();
+    if (!query) {
+      setSuggestions([]);
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const result = await fetchSuggestions(query);
+        setSuggestions(result || []);
+        setOpen(((result == null ? void 0 : result.length) ?? 0) > 0);
+        setActiveIndex(((result == null ? void 0 : result.length) ?? 0) > 0 ? 0 : -1);
+      } catch {
+        setSuggestions([]);
+        setOpen(false);
+        setActiveIndex(-1);
+      }
+    }, debounceMs);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [inputValue, fetchSuggestions, debounceMs]);
+  const addTag = (raw) => {
+    const newTag = raw.trim();
+    if (!newTag || hasTag(newTag)) return false;
+    const updated = [...tagList, newTag];
+    setTagList(updated);
+    onChange == null ? void 0 : onChange(updated);
+    setLastAction(`Added tag ${newTag}.`);
+    return true;
+  };
+  const removeTag = (tag2) => {
+    const updated = tagList.filter((t) => t !== tag2);
+    setTagList(updated);
+    onChange == null ? void 0 : onChange(updated);
+    setLastAction(`Removed tag ${tag2}.`);
+  };
+  const handleKeyDown = (event) => {
+    const { key } = event;
+    if (open && suggestions.length > 0) {
+      if (key === "ArrowDown") {
+        event.preventDefault();
+        setActiveIndex((i) => (i + 1) % suggestions.length);
+        return;
+      }
+      if (key === "ArrowUp") {
+        event.preventDefault();
+        setActiveIndex(
+          (i) => (i - 1 + suggestions.length) % suggestions.length
+        );
+        return;
+      }
+      if (key === "Enter") {
+        event.preventDefault();
+        const choice = suggestions[activeIndex];
+        if (choice && addTag(choice)) {
+          setInputValue("");
+        }
+        setSuggestions([]);
+        setOpen(false);
+        setActiveIndex(-1);
+        return;
+      }
+      if (key === "Escape") {
+        event.preventDefault();
+        setSuggestions([]);
+        setOpen(false);
+        setActiveIndex(-1);
+        return;
+      }
+    }
+    if (key === "Enter" || key === ",") {
+      event.preventDefault();
+      if (addTag(inputValue)) setInputValue("");
+      setSuggestions([]);
+      setOpen(false);
+      setActiveIndex(-1);
+      return;
+    }
+    if (key === "Backspace" && inputValue === "" && tagList.length > 0) {
+      const last = tagList[tagList.length - 1];
+      removeTag(last);
+    }
+  };
+  const wrapperClass = useMemo(
+    () => combineClassNames(
+      classMap.tagInput,
+      classMap[theme],
+      classMap[state],
+      classMap[size]
+    ),
+    [classMap, theme, state, size]
+  );
+  const tagClass = useMemo(
+    () => combineClassNames(
+      classMap.tag,
+      shadow && classMap[`shadow${capitalize(shadow)}`],
+      rounding && classMap[`round${capitalize(rounding)}`]
+    ),
+    [classMap, shadow, rounding]
+  );
+  const handleSuggestionClick = (suggestion) => {
+    if (addTag(suggestion)) setInputValue("");
+    setSuggestions([]);
+    setOpen(false);
+    setActiveIndex(-1);
+  };
+  const activeOptionId = open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: wrapperClass,
+      role: "group",
+      "aria-labelledby": labelId,
+      "aria-describedby": `${descId} ${statusId}`,
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx("label", { id: labelId, className: "sr_only", children: "Tag Input" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: descId,
+            className: "sr_only",
+            "data-testid": `${testId}-description`,
+            children: ariaDescription
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { className: classMap.tagContainer, "data-testid": `${testId}-list`, children: tagList.map((tag2, index) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: tagClass,
+            role: "listitem",
+            "data-testid": `${testId}-tag-${index}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: classMap.tagLabel, children: tag2 }),
+              /* @__PURE__ */ jsx(
+                IconButton2,
+                {
+                  type: "button",
+                  "aria-label": `Remove tag ${tag2}`,
+                  className: classMap.removeButton,
+                  onClick: () => removeTag(tag2),
+                  "data-testid": `${testId}-remove-${index}`,
+                  icon: CloseIcon,
+                  size: "small",
+                  theme: "clear",
+                  shadow: "none",
+                  iconClassName: classMap.removeButtonIcon
+                }
+              )
+            ]
+          },
+          `${tag2}-${index}`
+        )) }),
+        /* @__PURE__ */ jsx("div", { className: classMap.inputWrapper, children: /* @__PURE__ */ jsx(
+          TextInput2,
+          {
+            id: inputId,
+            type: "text",
+            theme,
+            state,
+            rounding,
+            shadow,
+            className: classMap.input,
+            value: inputValue,
+            placeholder: tagList.length === 0 ? placeholder : "",
+            onChange: (e) => setInputValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            autoComplete: "off",
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            "aria-activedescendant": activeOptionId,
+            "aria-label": "Add new tag",
+            "aria-describedby": `${descId} ${statusId}`,
+            "data-testid": `${testId}-input`
+          }
+        ) }),
+        open && suggestions.length > 0 && /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: classMap.suggestionList,
+            role: "listbox",
+            id: listboxId,
+            "aria-label": "Tag suggestions",
+            "data-testid": `${testId}-suggestions`,
+            children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+              "li",
+              {
+                id: `${listboxId}-opt-${index}`,
+                className: combineClassNames(
+                  classMap.suggestionItem,
+                  index === activeIndex && (classMap.active || "")
+                ),
+                role: "option",
+                "aria-selected": index === activeIndex,
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => handleSuggestionClick(suggestion),
+                "data-testid": `${testId}-suggestion-${index}`,
+                children: suggestion
+              },
+              `${suggestion}-${index}`
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { id: statusId, "aria-live": "polite", className: "sr_only", children: [
+          open && suggestions.length > 0 ? `${suggestions.length} suggestion${suggestions.length === 1 ? "" : "s"} available.` : "",
+          lastAction
+        ] })
+      ]
+    }
+  );
+};
+TagInputBase.displayName = "TagInputBase";
+const TagInput = (props) => {
+  return /* @__PURE__ */ jsx(
+    TagInputBase,
+    {
+      ...props,
+      classMap: styles,
+      IconButton,
+      TextInput
+    }
+  );
+};
+export {
+  TagInput as T
+};
+//# sourceMappingURL=TagInput-Bjt_zbHy.js.map