@tsed/react-formio 3.0.0-alpha.10 → 3.0.0-alpha.11

package/dist/molecules/tabs/Tab.js

@@ -0,0 +1,67 @@
+import { jsxs as l, jsx as b } from "react/jsx-runtime";
+import { c as f } from "../../chunks/index.js";
+import { useRef as p, useEffect as v, useCallback as r } from "react";
+import { useKeyboardControls as A } from "../../hooks/useKeyboardControls.js";
+import { registerComponent as E } from "../../registries/components.js";
+import { iconClass as K } from "../../utils/iconClass.js";
+import { useTabsUid as j, useActiveTab as C, useRegisterTabControl as D } from "./hooks/tabControl.js";
+function L({ onClick: s, icon: u, value: e, children: _, className: d, after: T }) {
+  const m = j(), a = p(null), o = C(), t = D({ value: e, ref: a }), i = p(o), c = p(o === e);
+  c.current = o === e, v(() => {
+    var n;
+    i.current !== o && e === o && ((n = a.current) == null || n.focus(), s == null || s(e)), i.current !== o && (i.current = o);
+  }, [e, s, o]);
+  const y = r(() => {
+    t({ type: "start" });
+  }, [t]), w = r(() => {
+    t({ type: "end" });
+  }, [t]), x = r(() => {
+    t({ type: "previous" });
+  }, [t]), h = r(() => {
+    t({ type: "next" });
+  }, [t]), N = r(() => {
+    const n = document.documentElement.dir === "rtl";
+    t({ type: n ? "next" : "previous" });
+  }, [t]), R = r(() => {
+    const n = document.documentElement.dir === "rtl";
+    t({ type: n ? "previous" : "next" });
+  }, [t]), $ = A({
+    start: y,
+    end: w,
+    up: x,
+    down: h,
+    left: N,
+    right: R
+  }), g = r(() => {
+    t({ type: "update", payload: e });
+  }, [t, e]);
+  return /* @__PURE__ */ l("div", { title: "button-wrapper", className: f("tw-tabs__button-wrapper", d, { "-active": c.current }, d), children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        ref: a,
+        id: `Tab_${e}_${m}`,
+        "data-name": "Tab",
+        title: "button-tab",
+        role: "tab",
+        "aria-selected": c.current,
+        "aria-controls": `TabPanel_${e}_${m}`,
+        tabIndex: c.current ? 0 : -1,
+        className: "tw-tabs__button",
+        onClick: g,
+        onKeyDown: $,
+        children: [
+          u && /* @__PURE__ */ b("i", { className: f(K(void 0, u), "tw-tabs__button-icon") }),
+          /* @__PURE__ */ b("span", { className: "tw-tabs__button-label", children: _ }),
+          T
+        ]
+      }
+    ),
+    /* @__PURE__ */ b("div", { className: "tw-tabs__button-border" })
+  ] });
+}
+E("Tab", L);
+export {
+  L as Tab
+};
+//# sourceMappingURL=Tab.js.map

package/dist/molecules/tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../src/molecules/tabs/Tab.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { PropsWithChildren, useCallback, useEffect, useRef } from \"react\";\n\nimport { useKeyboardControls } from \"../../hooks/useKeyboardControls.js\";\nimport { registerComponent } from \"../../registries/components.js\";\nimport { iconClass } from \"../../utils/iconClass.js\";\nimport { useActiveTab, useRegisterTabControl, useTabsUid } from \"./hooks/tabControl.js\";\n\nexport interface TabProps {\n  icon?: string;\n  isActive?: boolean;\n  className?: string;\n  after?: React.ReactNode;\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onClick?: (value: number) => void;\n}\n\nexport function Tab({ onClick, icon, value, children, className, after }: PropsWithChildren<TabProps>) {\n  const uid = useTabsUid();\n  const ref = useRef<HTMLButtonElement>(null);\n  const activeTab = useActiveTab();\n  const dispatch = useRegisterTabControl({ value, ref });\n  const previousActiveTab = useRef(activeTab);\n\n  const isActive = useRef(activeTab === value);\n  isActive.current = activeTab === value;\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onClick?.(value);\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [value, onClick, activeTab]);\n\n  const start = useCallback(() => {\n    dispatch({ type: \"start\" });\n  }, [dispatch]);\n\n  const end = useCallback(() => {\n    dispatch({ type: \"end\" });\n  }, [dispatch]);\n\n  const up = useCallback(() => {\n    dispatch({ type: \"previous\" });\n  }, [dispatch]);\n\n  const down = useCallback(() => {\n    dispatch({ type: \"next\" });\n  }, [dispatch]);\n\n  const left = useCallback(() => {\n    const isRTL = document.documentElement.dir === \"rtl\";\n\n    dispatch({ type: isRTL ? \"next\" : \"previous\" });\n  }, [dispatch]);\n\n  const right = useCallback(() => {\n    const isRTL = document.documentElement.dir === \"rtl\";\n\n    dispatch({ type: isRTL ? \"previous\" : \"next\" });\n  }, [dispatch]);\n\n  const handleKeyDown = useKeyboardControls({\n    start,\n    end,\n    up,\n    down,\n    left,\n    right\n  });\n\n  const handleClick = useCallback(() => {\n    dispatch({ type: \"update\", payload: value });\n  }, [dispatch, value]);\n\n  return (\n    <div title={\"button-wrapper\"} className={classnames(\"tw-tabs__button-wrapper\", className, { \"-active\": isActive.current }, className)}>\n      <button\n        ref={ref}\n        id={`Tab_${value}_${uid}`}\n        data-name='Tab'\n        title='button-tab'\n        role='tab'\n        aria-selected={isActive.current}\n        aria-controls={`TabPanel_${value}_${uid}`}\n        tabIndex={isActive.current ? 0 : -1}\n        className={\"tw-tabs__button\"}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n      >\n        {icon && <i className={classnames(iconClass(undefined, icon), \"tw-tabs__button-icon\")} />}\n        <span className={\"tw-tabs__button-label\"}>{children}</span>\n        {after}\n      </button>\n      <div className='tw-tabs__button-border' />\n    </div>\n  );\n}\n\nregisterComponent(\"Tab\", Tab);\n"],"names":["Tab","onClick","icon","value","children","className","after","uid","useTabsUid","ref","useRef","activeTab","useActiveTab","dispatch","useRegisterTabControl","previousActiveTab","isActive","useEffect","_a","start","useCallback","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsxs","classnames","jsx","iconClass","registerComponent"],"mappings":"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"}

package/dist/molecules/tabs/TabList.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function TabList(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/tabs/TabList.js

@@ -0,0 +1,24 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { Children as m, isValidElement as p } from "react";
+import { registerComponent as f } from "../../registries/components.js";
+function l(n) {
+  const s = [], a = [], r = [];
+  return m.forEach(n.children, (e) => {
+    var i;
+    if (p(e) && ((i = e.type) == null ? void 0 : i.name) === "Tab") {
+      r.push(e);
+      return;
+    }
+    r.length > 0 ? a.push(e) : s.push(e);
+  }), /* @__PURE__ */ t("nav", { className: "tw-tabs__header", children: /* @__PURE__ */ o("div", { className: "tw-tabs__header-wrapper", children: [
+    /* @__PURE__ */ t("div", { className: "tw-tabs__header-border" }),
+    s,
+    /* @__PURE__ */ t("div", { role: "tablist", children: r }),
+    a
+  ] }) });
+}
+f("TabList", l);
+export {
+  l as TabList
+};
+//# sourceMappingURL=TabList.js.map

package/dist/molecules/tabs/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","sources":["../../../src/molecules/tabs/TabList.tsx"],"sourcesContent":["import { Children, isValidElement, PropsWithChildren, ReactNode } from \"react\";\n\nimport { registerComponent } from \"../../registries/components.js\";\n\nexport function TabList(props: PropsWithChildren<{}>) {\n  const before: ReactNode[] = [];\n  const after: ReactNode[] = [];\n  const items: ReactNode[] = [];\n\n  Children.forEach(props.children, (child) => {\n    if (isValidElement(child)) {\n      if ((child.type as any)?.name === \"Tab\") {\n        items.push(child);\n        return;\n      }\n    }\n\n    if (items.length > 0) {\n      after.push(child);\n    } else {\n      before.push(child);\n    }\n  });\n\n  return (\n    <nav className='tw-tabs__header'>\n      <div className='tw-tabs__header-wrapper'>\n        <div className='tw-tabs__header-border' />\n        {before}\n        <div role='tablist'>{items}</div>\n        {after}\n      </div>\n    </nav>\n  );\n}\n\nregisterComponent(\"TabList\", TabList);\n"],"names":["TabList","props","before","after","items","Children","child","isValidElement","_a","jsxs","jsx","registerComponent"],"mappings":";;;AAIO,SAASA,EAAQC,GAA8B;AACpD,QAAMC,IAAsB,CAAC,GACvBC,IAAqB,CAAC,GACtBC,IAAqB,CAAC;AAE5B,SAAAC,EAAS,QAAQJ,EAAM,UAAU,CAACK,MAAU;;AACtC,QAAAC,EAAeD,CAAK,OACjBE,IAAAF,EAAM,SAAN,gBAAAE,EAAoB,UAAS,OAAO;AACvC,MAAAJ,EAAM,KAAKE,CAAK;AAChB;AAAA,IAAA;AAIA,IAAAF,EAAM,SAAS,IACjBD,EAAM,KAAKG,CAAK,IAEhBJ,EAAO,KAAKI,CAAK;AAAA,EACnB,CACD,qBAGE,OAAI,EAAA,WAAU,mBACb,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,yBAAyB,CAAA;AAAA,IACvCR;AAAA,IACA,gBAAAQ,EAAA,OAAA,EAAI,MAAK,WAAW,UAAMN,GAAA;AAAA,IAC1BD;AAAA,EAAA,EAAA,CACH,EACF,CAAA;AAEJ;AAEAQ,EAAkB,WAAWX,CAAO;"}

package/dist/molecules/tabs/TabPanel.d.ts

@@ -0,0 +1,9 @@
+export interface TabPanelProps {
+    className?: string;
+    /**
+     * Tab panel index<br/>
+     * _Can be **0** or **1** indexed_
+     */
+    value: number;
+}
+export declare function TabPanel({ value, className, children }: React.PropsWithChildren<TabPanelProps>): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/tabs/TabPanel.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c as b } from "../../chunks/index.js";
+import { registerComponent as s } from "../../registries/components.js";
+import { useActiveTab as c, useTabsUid as m } from "./hooks/tabControl.js";
+function d({ value: a, className: i, children: n }) {
+  const o = c(), t = m(), e = o === a;
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      id: `TabPanel_${a}_${t}`,
+      "data-name": `TabPanel_${a}`,
+      role: "tabpanel",
+      "aria-hidden": !e,
+      "aria-labelledby": `Tab_${a}_${t}`,
+      tabIndex: e ? 0 : -1,
+      className: b("tw-tabs__panel", i, {
+        "-active": e
+      }),
+      children: n
+    }
+  );
+}
+s("TabPanel", d);
+export {
+  d as TabPanel
+};
+//# sourceMappingURL=TabPanel.js.map

package/dist/molecules/tabs/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sources":["../../../src/molecules/tabs/TabPanel.tsx"],"sourcesContent":["import classnames from \"classnames\";\n\nimport { registerComponent } from \"../../registries/components.js\";\nimport { useActiveTab, useTabsUid } from \"./hooks/tabControl.js\";\n\nexport interface TabPanelProps {\n  className?: string;\n  /**\n   * Tab panel index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n}\n\nexport function TabPanel({ value, className, children }: React.PropsWithChildren<TabPanelProps>) {\n  const tabSelected = useActiveTab();\n  const uid = useTabsUid();\n  const isActive = tabSelected === value;\n\n  return (\n    <div\n      id={`TabPanel_${value}_${uid}`}\n      data-name={`TabPanel_${value}`}\n      role='tabpanel'\n      aria-hidden={!isActive}\n      aria-labelledby={`Tab_${value}_${uid}`}\n      tabIndex={isActive ? 0 : -1}\n      className={classnames(\"tw-tabs__panel\", className, {\n        \"-active\": isActive\n      })}\n    >\n      {children}\n    </div>\n  );\n}\n\nregisterComponent(\"TabPanel\", TabPanel);\n"],"names":["TabPanel","value","className","children","tabSelected","useActiveTab","uid","useTabsUid","isActive","jsx","classnames","registerComponent"],"mappings":";;;;AAcO,SAASA,EAAS,EAAE,OAAAC,GAAO,WAAAC,GAAW,UAAAC,KAAoD;AAC/F,QAAMC,IAAcC,EAAa,GAC3BC,IAAMC,EAAW,GACjBC,IAAWJ,MAAgBH;AAG/B,SAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,YAAYR,CAAK,IAAIK,CAAG;AAAA,MAC5B,aAAW,YAAYL,CAAK;AAAA,MAC5B,MAAK;AAAA,MACL,eAAa,CAACO;AAAA,MACd,mBAAiB,OAAOP,CAAK,IAAIK,CAAG;AAAA,MACpC,UAAUE,IAAW,IAAI;AAAA,MACzB,WAAWE,EAAW,kBAAkBR,GAAW;AAAA,QACjD,WAAWM;AAAA,MAAA,CACZ;AAAA,MAEA,UAAAL;AAAA,IAAA;AAAA,EACH;AAEJ;AAEAQ,EAAkB,YAAYX,CAAQ;"}

package/dist/molecules/tabs/Tabs.d.ts

@@ -1,19 +1,7 @@
-import { PropsWithChildren } from 'react';
-export declare function ButtonTab({ icon, back, onClick, isActive, reverse, children, className, after }: PropsWithChildren<any>): import("react/jsx-runtime").JSX.Element;
-export interface TabsItemProps extends Record<string, any> {
-    label?: string;
-    icon?: string;
-}
+import { CSSProperties, PropsWithChildren } from 'react';
 export interface TabsProps extends Record<string, any> {
-    headerChildren?: any;
-    AddButton?: any;
-    current?: TabsItemProps;
-    items?: TabsItemProps[];
-    style?: any;
+    style?: CSSProperties;
     className?: string;
-    reverse?: boolean;
-    Button?: any;
-    onClick?: (item: TabsItemProps) => void;
-    i18n?: (f: string) => string;
+    selected?: number;
 }
-export declare function Tabs({ style, current, items, children, HeaderChildren, AddButton, Button, className, onClick, i18n, ...additionalProps }: PropsWithChildren<TabsProps>): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs({ style, selected, children, className }: PropsWithChildren<TabsProps>): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/tabs/Tabs.js

@@ -1,72 +1,12 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { c as i } from "../../chunks/index.js";
-import { iconClass as p } from "../../utils/iconClass.js";
-function N({ icon: c, back: s, onClick: r, isActive: b, reverse: l, children: o, className: n, after: _ }) {
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      title: "button-wrapper",
-      className: i("tw-tabs__button-wrapper", b ? "-active" : "", s ? "-back" : "", n),
-      children: [
-        /* @__PURE__ */ e(
-          "button",
-          {
-            title: "button-tab",
-            className: i("tw-tabs__button", l ? "-reverse" : "", b ? "-active" : "", s ? "-back" : ""),
-            onClick: r,
-            children: [
-              c && /* @__PURE__ */ t("i", { className: i(p(void 0, c), "tw-tabs__button-icon") }),
-              /* @__PURE__ */ t("span", { className: "tw-tabs__button-label", children: o }),
-              _
-            ]
-          }
-        ),
-        /* @__PURE__ */ t("div", { className: i("tw-tabs__button-border", b ? "-active" : "") })
-      ]
-    }
-  );
-}
-function x({
-  style: c,
-  current: s,
-  items: r = [],
-  children: b,
-  HeaderChildren: l,
-  AddButton: o,
-  Button: n = N,
-  className: _,
-  onClick: w,
-  i18n: m = (a) => a,
-  ...d
-}) {
-  return /* @__PURE__ */ e("div", { "data-testid": "tabs-comp", className: `tw-tabs ${_}`, style: c, children: [
-    /* @__PURE__ */ e("div", { children: [
-      /* @__PURE__ */ t("nav", { className: "tw-tabs__header", children: /* @__PURE__ */ e("div", { className: "tw-tabs__header-wrapper", children: [
-        /* @__PURE__ */ t("div", { className: "tw-tabs__header-border" }),
-        r.filter((a) => a.label || a.icon).map((a, v) => /* @__PURE__ */ t(
-          n,
-          {
-            back: a.back,
-            isActive: (s == null ? void 0 : s.action) === a.action,
-            exact: a.exact,
-            onClick: () => {
-              w && w(a);
-            },
-            ...d,
-            ...a,
-            children: m(a.label || "")
-          },
-          v
-        )),
-        o && /* @__PURE__ */ t(o, { ...d, current: s })
-      ] }) }),
-      l && /* @__PURE__ */ t(l, { ...d, current: s })
-    ] }),
-    /* @__PURE__ */ t("div", { title: "tab-body", className: "tw-tabs__body", children: b })
-  ] });
+import { registerComponent as m } from "../../registries/components.js";
+import { TabsProvider as e } from "./context/TabControl.js";
+function n({ style: t, selected: o, children: s, className: a }) {
+  return /* @__PURE__ */ r("div", { "data-testid": "Tabs", className: i("tw-tabs", a), style: t, children: /* @__PURE__ */ r(e, { selected: o, children: s }) });
 }
+m("Tabs", n);
 export {
-  N as ButtonTab,
-  x as Tabs
+  n as Tabs
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/molecules/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/molecules/tabs/Tabs.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { PropsWithChildren } from \"react\";\n\nimport { iconClass } from \"../../utils/iconClass\";\n\nexport function ButtonTab({ icon, back, onClick, isActive, reverse, children, className, after }: PropsWithChildren<any>) {\n  return (\n    <div\n      title={\"button-wrapper\"}\n      className={classnames(\"tw-tabs__button-wrapper\", isActive ? \"-active\" : \"\", back ? \"-back\" : \"\", className)}\n    >\n      <button\n        title={\"button-tab\"}\n        className={classnames(\"tw-tabs__button\", reverse ? \"-reverse\" : \"\", isActive ? \"-active\" : \"\", back ? \"-back\" : \"\")}\n        onClick={onClick}\n      >\n        {icon && <i className={classnames(iconClass(undefined, icon), \"tw-tabs__button-icon\")} />}\n        <span className={\"tw-tabs__button-label\"}>{children}</span>\n        {after}\n      </button>\n      <div className={classnames(\"tw-tabs__button-border\", isActive ? \"-active\" : \"\")} />\n    </div>\n  );\n}\n\nexport interface TabsItemProps extends Record<string, any> {\n  label?: string;\n  icon?: string;\n}\n\nexport interface TabsProps extends Record<string, any> {\n  headerChildren?: any;\n  AddButton?: any;\n  current?: TabsItemProps;\n  items?: TabsItemProps[];\n  style?: any;\n  className?: string;\n  reverse?: boolean;\n  Button?: any;\n  onClick?: (item: TabsItemProps) => void;\n  i18n?: (f: string) => string;\n}\n\nexport function Tabs({\n  style,\n  current,\n  items = [],\n  children,\n  HeaderChildren,\n  AddButton,\n  Button = ButtonTab,\n  className,\n  onClick,\n  i18n = (f) => f,\n  ...additionalProps\n}: PropsWithChildren<TabsProps>) {\n  return (\n    <div data-testid={\"tabs-comp\"} className={`tw-tabs ${className}`} style={style}>\n      <div>\n        <nav className='tw-tabs__header'>\n          <div className='tw-tabs__header-wrapper'>\n            <div className='tw-tabs__header-border' />\n            {items\n              .filter((item) => item.label || item.icon)\n              .map((item, index) => {\n                return (\n                  <Button\n                    key={index}\n                    back={item.back}\n                    isActive={current?.action === item.action}\n                    exact={item.exact}\n                    onClick={() => {\n                      onClick && onClick(item);\n                    }}\n                    {...additionalProps}\n                    {...item}\n                  >\n                    {i18n(item.label || \"\")}\n                  </Button>\n                );\n              })}\n            {AddButton && <AddButton {...additionalProps} current={current} />}\n          </div>\n        </nav>\n        {HeaderChildren && <HeaderChildren {...additionalProps} current={current} />}\n      </div>\n      <div title={\"tab-body\"} className={\"tw-tabs__body\"}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"names":["ButtonTab","icon","back","onClick","isActive","reverse","children","className","after","jsxs","classnames","jsx","iconClass","Tabs","style","current","items","HeaderChildren","AddButton","Button","i18n","f","additionalProps","item","index"],"mappings":";;;AAKgB,SAAAA,EAAU,EAAE,MAAAC,GAAM,MAAAC,GAAM,SAAAC,GAAS,UAAAC,GAAU,SAAAC,GAAS,UAAAC,GAAU,WAAAC,GAAW,OAAAC,KAAiC;AAEtH,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAWC,EAAW,2BAA2BN,IAAW,YAAY,IAAIF,IAAO,UAAU,IAAIK,CAAS;AAAA,MAE1G,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,WAAWC,EAAW,mBAAmBL,IAAU,aAAa,IAAID,IAAW,YAAY,IAAIF,IAAO,UAAU,EAAE;AAAA,YAClH,SAAAC;AAAA,YAEC,UAAA;AAAA,cAAQF,KAAA,gBAAAU,EAAC,OAAE,WAAWD,EAAWE,EAAU,QAAWX,CAAI,GAAG,sBAAsB,EAAG,CAAA;AAAA,cACtF,gBAAAU,EAAA,QAAA,EAAK,WAAW,yBAA0B,UAAAL,EAAS,CAAA;AAAA,cACnDE;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,QACA,gBAAAG,EAAC,SAAI,WAAWD,EAAW,0BAA0BN,IAAW,YAAY,EAAE,EAAG,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACnF;AAEJ;AAoBO,SAASS,EAAK;AAAA,EACnB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC;AAAA,EACT,UAAAV;AAAA,EACA,gBAAAW;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAASnB;AAAA,EACT,WAAAO;AAAA,EACA,SAAAJ;AAAA,EACA,MAAAiB,IAAO,CAACC,MAAMA;AAAA,EACd,GAAGC;AACL,GAAiC;AAE7B,SAAA,gBAAAb,EAAC,SAAI,eAAa,aAAa,WAAW,WAAWF,CAAS,IAAI,OAAAO,GAChE,UAAA;AAAA,IAAA,gBAAAL,EAAC,OACC,EAAA,UAAA;AAAA,MAAA,gBAAAE,EAAC,SAAI,WAAU,mBACb,UAAC,gBAAAF,EAAA,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAC,gBAAAE,EAAA,OAAA,EAAI,WAAU,yBAAyB,CAAA;AAAA,QACvCK,EACE,OAAO,CAACO,MAASA,EAAK,SAASA,EAAK,IAAI,EACxC,IAAI,CAACA,GAAMC,MAER,gBAAAb;AAAA,UAACQ;AAAA,UAAA;AAAA,YAEC,MAAMI,EAAK;AAAA,YACX,WAAUR,KAAA,gBAAAA,EAAS,YAAWQ,EAAK;AAAA,YACnC,OAAOA,EAAK;AAAA,YACZ,SAAS,MAAM;AACb,cAAApB,KAAWA,EAAQoB,CAAI;AAAA,YACzB;AAAA,YACC,GAAGD;AAAA,YACH,GAAGC;AAAA,YAEH,UAAAH,EAAKG,EAAK,SAAS,EAAE;AAAA,UAAA;AAAA,UAVjBC;AAAA,QAWP,CAEH;AAAA,QACFN,KAAa,gBAAAP,EAACO,GAAW,EAAA,GAAGI,GAAiB,SAAAP,EAAkB,CAAA;AAAA,MAAA,EAAA,CAClE,EACF,CAAA;AAAA,MACCE,KAAkB,gBAAAN,EAACM,GAAgB,EAAA,GAAGK,GAAiB,SAAAP,EAAkB,CAAA;AAAA,IAAA,GAC5E;AAAA,sBACC,OAAI,EAAA,OAAO,YAAY,WAAW,iBAChC,UAAAT,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/molecules/tabs/Tabs.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport type { CSSProperties, PropsWithChildren } from \"react\";\n\nimport { registerComponent } from \"../../registries/components.js\";\nimport { TabsProvider } from \"./context/TabControl.js\";\n\nexport interface TabsProps extends Record<string, any> {\n  style?: CSSProperties;\n  className?: string;\n  selected?: number;\n}\n\nexport function Tabs({ style, selected, children, className }: PropsWithChildren<TabsProps>) {\n  return (\n    <div data-testid={\"Tabs\"} className={classnames(\"tw-tabs\", className)} style={style}>\n      <TabsProvider selected={selected}>{children}</TabsProvider>\n    </div>\n  );\n}\n\nregisterComponent(\"Tabs\", Tabs);\n"],"names":["Tabs","style","selected","children","className","jsx","classnames","TabsProvider","registerComponent"],"mappings":";;;;AAYO,SAASA,EAAK,EAAE,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,WAAAC,KAA2C;AAC3F,SACG,gBAAAC,EAAA,OAAA,EAAI,eAAa,QAAQ,WAAWC,EAAW,WAAWF,CAAS,GAAG,OAAAH,GACrE,UAAA,gBAAAI,EAACE,GAAa,EAAA,UAAAL,GAAqB,UAAAC,EAAS,CAAA,GAC9C;AAEJ;AAEAK,EAAkB,QAAQR,CAAI;"}

package/dist/molecules/tabs/TabsBody.d.ts

@@ -0,0 +1 @@
+export declare function TabsBody(props: React.PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/tabs/TabsBody.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import { registerComponent as r } from "../../registries/components.js";
+function d(t) {
+  return /* @__PURE__ */ o("div", { title: "tabs-body", "data-testid": "TabsBody", className: "tw-tabs__body", children: t.children });
+}
+r("TabsBody", d);
+export {
+  d as TabsBody
+};
+//# sourceMappingURL=TabsBody.js.map

package/dist/molecules/tabs/TabsBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsBody.js","sources":["../../../src/molecules/tabs/TabsBody.tsx"],"sourcesContent":["import { registerComponent } from \"../../registries/components.js\";\n\nexport function TabsBody(props: React.PropsWithChildren<{}>) {\n  return (\n    <div title={\"tabs-body\"} data-testid={\"TabsBody\"} className={\"tw-tabs__body\"}>\n      {props.children}\n    </div>\n  );\n}\n\nregisterComponent(\"TabsBody\", TabsBody);\n"],"names":["TabsBody","props","jsx","registerComponent"],"mappings":";;AAEO,SAASA,EAASC,GAAoC;AAEzD,SAAA,gBAAAC,EAAC,SAAI,OAAO,aAAa,eAAa,YAAY,WAAW,iBAC1D,UAAAD,EAAM,SACT,CAAA;AAEJ;AAEAE,EAAkB,YAAYH,CAAQ;"}

package/dist/molecules/tabs/TabsLegacy.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface TabsItemProps extends Record<string, any> {
+    label?: string;
+    icon?: string;
+    children?: ReactNode;
+}
+export interface TabsLegacyProps extends Record<string, any> {
+    AddButton?: any;
+    current?: TabsItemProps;
+    items?: TabsItemProps[];
+    style?: CSSProperties;
+    className?: string;
+    reverse?: boolean;
+    onClick?: (item: TabsItemProps) => void;
+    i18n?: (f: string) => string;
+}
+export declare function TabsLegacy({ style, current, items, HeaderChildren, AddButton, className, onClick, i18n, reverse, after, ...additionalProps }: TabsLegacyProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/tabs/TabsLegacy.js

@@ -0,0 +1,49 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import "./Tab.js";
+import "./TabList.js";
+import "./TabPanel.js";
+import "./Tabs.js";
+import "./TabsBody.js";
+import { getComponent as a } from "../../registries/components.js";
+function w({
+  style: p,
+  current: t,
+  items: m = [],
+  HeaderChildren: e,
+  AddButton: l,
+  className: h,
+  onClick: b,
+  i18n: f = (c) => c,
+  reverse: u,
+  after: v,
+  ...i
+}) {
+  const c = a("Tab"), y = a("TabsBody"), L = a("TabList"), d = a("TabPanel"), g = a("Tabs"), T = m.filter((o) => o.label || o.icon);
+  return /* @__PURE__ */ s(g, { className: h, style: p, children: [
+    /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ s(L, { children: [
+        T.map((o, n) => /* @__PURE__ */ r(
+          c,
+          {
+            onClick: () => {
+              b && b(o);
+            },
+            icon: o.icon,
+            value: n,
+            className: u ? "-reverse" : "",
+            after: v,
+            children: f(o.label || "")
+          },
+          n
+        )),
+        l && /* @__PURE__ */ r(l, { ...i, current: t })
+      ] }),
+      e && /* @__PURE__ */ r(e, { ...i, current: t })
+    ] }),
+    /* @__PURE__ */ r(y, { children: T.map((o, n) => /* @__PURE__ */ r(d, { value: n, children: o.children || o.content }, n)) })
+  ] });
+}
+export {
+  w as TabsLegacy
+};
+//# sourceMappingURL=TabsLegacy.js.map

package/dist/molecules/tabs/TabsLegacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsLegacy.js","sources":["../../../src/molecules/tabs/TabsLegacy.tsx"],"sourcesContent":["import \"./all.js\";\n\nimport { CSSProperties, ReactNode } from \"react\";\n\nimport { getComponent } from \"../../registries/components.js\";\nimport type { Tab as DefaultTab } from \"./Tab.js\";\nimport type { TabList as DefaultTabList } from \"./TabList.js\";\nimport type { TabPanel as DefaultTabPanel } from \"./TabPanel.js\";\nimport type { Tabs as DefaultTabs } from \"./Tabs.js\";\nimport type { TabsBody as DefaultTabsBody } from \"./TabsBody.js\";\n\nexport interface TabsItemProps extends Record<string, any> {\n  label?: string;\n  icon?: string;\n  children?: ReactNode;\n}\n\nexport interface TabsLegacyProps extends Record<string, any> {\n  AddButton?: any;\n  current?: TabsItemProps;\n  items?: TabsItemProps[];\n  style?: CSSProperties;\n  className?: string;\n  reverse?: boolean;\n  onClick?: (item: TabsItemProps) => void;\n  i18n?: (f: string) => string;\n}\n\nexport function TabsLegacy({\n  style,\n  current,\n  items = [],\n  HeaderChildren,\n  AddButton,\n  className,\n  onClick,\n  i18n = (f) => f,\n  reverse,\n  after,\n  ...additionalProps\n}: TabsLegacyProps) {\n  const Tab = getComponent<typeof DefaultTab>(\"Tab\");\n  const TabsBody = getComponent<typeof DefaultTabsBody>(\"TabsBody\");\n  const TabList = getComponent<typeof DefaultTabList>(\"TabList\");\n  const TabPanel = getComponent<typeof DefaultTabPanel>(\"TabPanel\");\n  const Tabs = getComponent<typeof DefaultTabs>(\"Tabs\");\n  const tabs = items.filter((item) => item.label || item.icon);\n\n  return (\n    <Tabs className={className} style={style}>\n      <div>\n        <TabList>\n          {tabs.map((item, index) => {\n            return (\n              <Tab\n                key={index}\n                onClick={() => {\n                  onClick && onClick(item);\n                }}\n                icon={item.icon}\n                value={index}\n                className={reverse ? \"-reverse\" : \"\"}\n                after={after}\n              >\n                {i18n(item.label || \"\")}\n              </Tab>\n            );\n          })}\n          {AddButton && <AddButton {...additionalProps} current={current} />}\n        </TabList>\n        {HeaderChildren && <HeaderChildren {...additionalProps} current={current} />}\n      </div>\n      <TabsBody>\n        {tabs.map((item, index) => {\n          return (\n            <TabPanel key={index} value={index}>\n              {item.children || item.content}\n            </TabPanel>\n          );\n        })}\n      </TabsBody>\n    </Tabs>\n  );\n}\n"],"names":["TabsLegacy","style","current","items","HeaderChildren","AddButton","className","onClick","i18n","f","reverse","after","additionalProps","Tab","getComponent","TabsBody","TabList","TabPanel","Tabs","tabs","item","jsxs","index","jsx"],"mappings":";;;;;;;AA4BO,SAASA,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC;AAAA,EACT,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO,CAACC,MAAMA;AAAA,EACd,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAoB;AACZ,QAAAC,IAAMC,EAAgC,KAAK,GAC3CC,IAAWD,EAAqC,UAAU,GAC1DE,IAAUF,EAAoC,SAAS,GACvDG,IAAWH,EAAqC,UAAU,GAC1DI,IAAOJ,EAAiC,MAAM,GAC9CK,IAAOhB,EAAM,OAAO,CAACiB,MAASA,EAAK,SAASA,EAAK,IAAI;AAGzD,SAAA,gBAAAC,EAACH,GAAK,EAAA,WAAAZ,GAAsB,OAAAL,GAC1B,UAAA;AAAA,IAAA,gBAAAoB,EAAC,OACC,EAAA,UAAA;AAAA,MAAA,gBAAAA,EAACL,GACE,EAAA,UAAA;AAAA,QAAKG,EAAA,IAAI,CAACC,GAAME,MAEb,gBAAAC;AAAA,UAACV;AAAA,UAAA;AAAA,YAEC,SAAS,MAAM;AACb,cAAAN,KAAWA,EAAQa,CAAI;AAAA,YACzB;AAAA,YACA,MAAMA,EAAK;AAAA,YACX,OAAOE;AAAA,YACP,WAAWZ,IAAU,aAAa;AAAA,YAClC,OAAAC;AAAA,YAEC,UAAAH,EAAKY,EAAK,SAAS,EAAE;AAAA,UAAA;AAAA,UATjBE;AAAA,QAUP,CAEH;AAAA,QACAjB,KAAa,gBAAAkB,EAAClB,GAAW,EAAA,GAAGO,GAAiB,SAAAV,EAAkB,CAAA;AAAA,MAAA,GAClE;AAAA,MACCE,KAAkB,gBAAAmB,EAACnB,GAAgB,EAAA,GAAGQ,GAAiB,SAAAV,EAAkB,CAAA;AAAA,IAAA,GAC5E;AAAA,sBACCa,GACE,EAAA,UAAAI,EAAK,IAAI,CAACC,GAAME,MAEb,gBAAAC,EAACN,KAAqB,OAAOK,GAC1B,YAAK,YAAYF,EAAK,WADVE,CAEf,CAEH,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/molecules/tabs/all.d.ts

@@ -0,0 +1,5 @@
+export * from './Tab';
+export * from './TabList';
+export * from './TabPanel';
+export * from './Tabs';
+export * from './TabsBody';

package/dist/molecules/tabs/all.js

@@ -0,0 +1,13 @@
+import { Tab as a } from "./Tab.js";
+import { TabList as t } from "./TabList.js";
+import { TabPanel as f } from "./TabPanel.js";
+import { Tabs as p } from "./Tabs.js";
+import { TabsBody as T } from "./TabsBody.js";
+export {
+  a as Tab,
+  t as TabList,
+  f as TabPanel,
+  p as Tabs,
+  T as TabsBody
+};
+//# sourceMappingURL=all.js.map

package/dist/molecules/tabs/all.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"all.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/molecules/tabs/context/TabControl.d.ts

@@ -0,0 +1,52 @@
+import { Dispatch, PropsWithChildren, RefObject } from 'react';
+type RefTab<T extends HTMLElement = HTMLElement> = RefObject<T>;
+type RefTabs<T extends HTMLElement = HTMLElement> = Map<number, RefTab<T>>;
+type TabsUpdateAction = {
+    type: "update";
+    payload: number;
+};
+type TabsRegisterAction<T extends HTMLElement = HTMLElement> = {
+    type: "register";
+    payload: {
+        value: number;
+        ref: RefObject<T>;
+    };
+};
+type TabsUnregisterAction = {
+    type: "unregister";
+    payload: {
+        value: number;
+    };
+};
+type TabsAction<T extends HTMLElement = HTMLElement> = {
+    type: "start" | "end" | "previous" | "next";
+} | TabsUpdateAction | TabsRegisterAction<T> | TabsUnregisterAction;
+interface TabsState<T extends HTMLElement = HTMLElement> {
+    uid: string;
+    value: number;
+    refs: RefTabs<T>;
+}
+interface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {
+    uid: string;
+    value: number;
+    refs: RefTabs<T>;
+    dispatch: Dispatch<TabsAction>;
+    register: (value: number, ref: RefTab<T>) => void;
+    unregister: (value: number) => void;
+}
+export declare const TabControlContext: import('react').Context<TabControl<HTMLElement>>;
+export interface TabsProviderProps {
+    selected?: number;
+    /**
+     * The selected tab value
+     * @deprecated Min props as no effect on the Tabs component and will be removed in future versions
+     */
+    min?: number;
+    /**
+     * The selected tab value
+     * @deprecated Max props as no effect on the Tabs component and will be removed in future versions
+     */
+    max?: number;
+}
+export declare function TabsProvider({ selected, children }: PropsWithChildren<TabsProviderProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/molecules/tabs/context/TabControl.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as f } from "react/jsx-runtime";
+import { createContext as p, useId as x, useReducer as y, useCallback as u } from "react";
+function v(e) {
+  const n = [...e.refs.keys()], o = (n.findIndex((t) => t === e.value) + 1) % n.length;
+  return { ...e, value: n[o] };
+}
+function g(e) {
+  const n = [...e.refs.keys()], o = (n.findIndex((t) => t === e.value) - 1 + n.length) % n.length;
+  return { ...e, value: n[o] };
+}
+function C(e) {
+  const r = [...e.refs.keys()][0];
+  return {
+    ...e,
+    value: r
+  };
+}
+function k(e) {
+  const n = [...e.refs.keys()], r = n[n.length - 1];
+  return {
+    ...e,
+    value: r
+  };
+}
+function b(e, n) {
+  const r = new Map(e.refs);
+  return r.delete(n.payload.value), {
+    ...e,
+    refs: r
+  };
+}
+function h(e, n) {
+  return {
+    ...e,
+    refs: new Map(e.refs).set(n.payload.value, n.payload.ref)
+  };
+}
+function w(e, n) {
+  return { ...e, value: n.payload };
+}
+const i = {
+  next: v,
+  previous: g,
+  start: C,
+  end: k,
+  register: h,
+  unregister: b,
+  update: w
+};
+function I(e, n) {
+  if (n.type in i) {
+    const r = i[n.type];
+    return r(e, n);
+  }
+  return e;
+}
+const d = p({
+  uid: "",
+  value: 0,
+  refs: /* @__PURE__ */ new Map(),
+  dispatch: () => {
+    console.warn("Tab Controller Context dispatch used outside of Provider");
+  },
+  register: () => {
+    console.warn("Tab Controller Context register used outside of Provider");
+  },
+  unregister: () => {
+    console.warn("Tab Controller Context unregister used outside of Provider");
+  }
+});
+d.displayName = "TabControlContext";
+function P({ selected: e = 0, children: n }) {
+  const r = x(), [o, t] = y(I, { uid: r, value: e, refs: /* @__PURE__ */ new Map() }), a = u((s, c) => {
+    t({ type: "register", payload: { value: s, ref: c } });
+  }, []), l = u((s) => {
+    t({ type: "unregister", payload: { value: s } });
+  }, []);
+  return /* @__PURE__ */ f(d.Provider, { value: { ...o, dispatch: t, register: a, unregister: l }, children: n });
+}
+export {
+  d as TabControlContext,
+  P as TabsProvider
+};
+//# sourceMappingURL=TabControl.js.map

package/dist/molecules/tabs/context/TabControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabControl.js","sources":["../../../../src/molecules/tabs/context/TabControl.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, type Dispatch, type PropsWithChildren, type RefObject, useCallback, useId, useReducer } from \"react\";\n\ntype RefTab<T extends HTMLElement = HTMLElement> = RefObject<T>;\ntype RefTabs<T extends HTMLElement = HTMLElement> = Map<number, RefTab<T>>;\n\ntype TabsUpdateAction = {\n  type: \"update\";\n  payload: number;\n};\n\ntype TabsRegisterAction<T extends HTMLElement = HTMLElement> = {\n  type: \"register\";\n  payload: { value: number; ref: RefObject<T> };\n};\n\ntype TabsUnregisterAction = {\n  type: \"unregister\";\n  payload: { value: number };\n};\n\ntype TabsAction<T extends HTMLElement = HTMLElement> =\n  | { type: \"start\" | \"end\" | \"previous\" | \"next\" }\n  | TabsUpdateAction\n  | TabsRegisterAction<T>\n  | TabsUnregisterAction;\n\ninterface TabsState<T extends HTMLElement = HTMLElement> {\n  uid: string;\n  value: number;\n  refs: RefTabs<T>;\n}\n\ninterface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {\n  uid: string;\n  value: number;\n  refs: RefTabs<T>;\n  dispatch: Dispatch<TabsAction>;\n  register: (value: number, ref: RefTab<T>) => void;\n  unregister: (value: number) => void;\n}\n\nfunction next(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const index = keys.findIndex((value) => value === state.value);\n  const nextIndex = (index + 1) % keys.length;\n\n  return { ...state, value: keys[nextIndex] };\n}\n\nfunction previous(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const index = keys.findIndex((value) => value === state.value);\n  const previousIndex = (index - 1 + keys.length) % keys.length;\n\n  return { ...state, value: keys[previousIndex] };\n}\n\nfunction start(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const firstIndex = keys[0];\n\n  return {\n    ...state,\n    value: firstIndex\n  };\n}\n\nfunction end(state: TabsState) {\n  const keys = [...state.refs.keys()];\n  const lastIndex = keys[keys.length - 1];\n\n  return {\n    ...state,\n    value: lastIndex\n  };\n}\n\nfunction unregister(state: TabsState, action: TabsUnregisterAction) {\n  const deletedRefs = new Map(state.refs);\n  deletedRefs.delete(action.payload.value);\n\n  return {\n    ...state,\n    refs: deletedRefs\n  };\n}\n\nfunction register(state: TabsState, action: TabsRegisterAction) {\n  return {\n    ...state,\n    refs: new Map(state.refs).set(action.payload.value, action.payload.ref)\n  };\n}\n\nfunction update(state: TabsState, action: TabsUpdateAction) {\n  return { ...state, value: action.payload };\n}\n\nconst actions = {\n  next,\n  previous,\n  start,\n  end,\n  register,\n  unregister,\n  update\n};\n\nfunction tabsReducer(state: TabsState, action: TabsAction): TabsState {\n  if (action.type in actions) {\n    const actionFunction = actions[action.type as keyof typeof actions] as (state: TabsState, action: TabsAction) => TabsState;\n\n    return actionFunction(state, action);\n  }\n\n  return state;\n}\n\nexport const TabControlContext = createContext<TabControl>({\n  uid: \"\",\n  value: 0,\n  refs: new Map(),\n  dispatch: () => {\n    console.warn(\"Tab Controller Context dispatch used outside of Provider\");\n  },\n  register: () => {\n    console.warn(\"Tab Controller Context register used outside of Provider\");\n  },\n  unregister: () => {\n    console.warn(\"Tab Controller Context unregister used outside of Provider\");\n  }\n});\n\nTabControlContext.displayName = \"TabControlContext\";\n\nexport interface TabsProviderProps {\n  selected?: number;\n  /**\n   * The selected tab value\n   * @deprecated Min props as no effect on the Tabs component and will be removed in future versions\n   */\n  min?: number;\n\n  /**\n   * The selected tab value\n   * @deprecated Max props as no effect on the Tabs component and will be removed in future versions\n   */\n  max?: number;\n}\n\nexport function TabsProvider({ selected = 0, children }: PropsWithChildren<TabsProviderProps>) {\n  const uid = useId();\n  const [state, dispatch] = useReducer(tabsReducer, { uid, value: selected, refs: new Map() });\n\n  const register = useCallback(<T extends HTMLElement>(value: number, ref: RefTab<T>) => {\n    dispatch({ type: \"register\", payload: { value, ref } });\n  }, []);\n\n  const unregister = useCallback((value: number) => {\n    dispatch({ type: \"unregister\", payload: { value } });\n  }, []);\n\n  return <TabControlContext.Provider value={{ ...state, dispatch, register, unregister }}>{children}</TabControlContext.Provider>;\n}\n"],"names":["next","state","keys","nextIndex","value","previous","previousIndex","start","firstIndex","end","lastIndex","unregister","action","deletedRefs","register","update","actions","tabsReducer","actionFunction","TabControlContext","createContext","TabsProvider","selected","children","uid","useId","dispatch","useReducer","useCallback","ref","jsx"],"mappings":";;;AA2CA,SAASA,EAAKC,GAAkB;AAC9B,QAAMC,IAAO,CAAC,GAAGD,EAAM,KAAK,MAAM,GAE5BE,KADQD,EAAK,UAAU,CAACE,MAAUA,MAAUH,EAAM,KAAK,IAClC,KAAKC,EAAK;AAErC,SAAO,EAAE,GAAGD,GAAO,OAAOC,EAAKC,CAAS,EAAE;AAC5C;AAEA,SAASE,EAASJ,GAAkB;AAClC,QAAMC,IAAO,CAAC,GAAGD,EAAM,KAAK,MAAM,GAE5BK,KADQJ,EAAK,UAAU,CAACE,MAAUA,MAAUH,EAAM,KAAK,IAC9B,IAAIC,EAAK,UAAUA,EAAK;AAEvD,SAAO,EAAE,GAAGD,GAAO,OAAOC,EAAKI,CAAa,EAAE;AAChD;AAEA,SAASC,EAAMN,GAAkB;AAEzB,QAAAO,IADO,CAAC,GAAGP,EAAM,KAAK,MAAM,EACV,CAAC;AAElB,SAAA;AAAA,IACL,GAAGA;AAAA,IACH,OAAOO;AAAA,EACT;AACF;AAEA,SAASC,EAAIR,GAAkB;AAC7B,QAAMC,IAAO,CAAC,GAAGD,EAAM,KAAK,MAAM,GAC5BS,IAAYR,EAAKA,EAAK,SAAS,CAAC;AAE/B,SAAA;AAAA,IACL,GAAGD;AAAA,IACH,OAAOS;AAAA,EACT;AACF;AAEA,SAASC,EAAWV,GAAkBW,GAA8B;AAClE,QAAMC,IAAc,IAAI,IAAIZ,EAAM,IAAI;AAC1B,SAAAY,EAAA,OAAOD,EAAO,QAAQ,KAAK,GAEhC;AAAA,IACL,GAAGX;AAAA,IACH,MAAMY;AAAA,EACR;AACF;AAEA,SAASC,EAASb,GAAkBW,GAA4B;AACvD,SAAA;AAAA,IACL,GAAGX;AAAA,IACH,MAAM,IAAI,IAAIA,EAAM,IAAI,EAAE,IAAIW,EAAO,QAAQ,OAAOA,EAAO,QAAQ,GAAG;AAAA,EACxE;AACF;AAEA,SAASG,EAAOd,GAAkBW,GAA0B;AAC1D,SAAO,EAAE,GAAGX,GAAO,OAAOW,EAAO,QAAQ;AAC3C;AAEA,MAAMI,IAAU;AAAA,EACd,MAAAhB;AAAA,EACA,UAAAK;AAAA,EACA,OAAAE;AAAA,EACA,KAAAE;AAAA,EACA,UAAAK;AAAA,EACA,YAAAH;AAAA,EACA,QAAAI;AACF;AAEA,SAASE,EAAYhB,GAAkBW,GAA+B;AAChE,MAAAA,EAAO,QAAQI,GAAS;AACpB,UAAAE,IAAiBF,EAAQJ,EAAO,IAA4B;AAE3D,WAAAM,EAAejB,GAAOW,CAAM;AAAA,EAAA;AAG9B,SAAAX;AACT;AAEO,MAAMkB,IAAoBC,EAA0B;AAAA,EACzD,KAAK;AAAA,EACL,OAAO;AAAA,EACP,0BAAU,IAAI;AAAA,EACd,UAAU,MAAM;AACd,YAAQ,KAAK,0DAA0D;AAAA,EACzE;AAAA,EACA,UAAU,MAAM;AACd,YAAQ,KAAK,0DAA0D;AAAA,EACzE;AAAA,EACA,YAAY,MAAM;AAChB,YAAQ,KAAK,4DAA4D;AAAA,EAAA;AAE7E,CAAC;AAEDD,EAAkB,cAAc;AAiBzB,SAASE,EAAa,EAAE,UAAAC,IAAW,GAAG,UAAAC,KAAkD;AAC7F,QAAMC,IAAMC,EAAM,GACZ,CAACxB,GAAOyB,CAAQ,IAAIC,EAAWV,GAAa,EAAE,KAAAO,GAAK,OAAOF,GAAU,MAAU,oBAAA,OAAO,GAErFR,IAAWc,EAAY,CAAwBxB,GAAeyB,MAAmB;AAC5E,IAAAH,EAAA,EAAE,MAAM,YAAY,SAAS,EAAE,OAAAtB,GAAO,KAAAyB,EAAA,GAAO;AAAA,EACxD,GAAG,EAAE,GAEClB,IAAaiB,EAAY,CAACxB,MAAkB;AAChD,IAAAsB,EAAS,EAAE,MAAM,cAAc,SAAS,EAAE,OAAAtB,EAAA,GAAS;AAAA,EACrD,GAAG,EAAE;AAEL,SAAQ,gBAAA0B,EAAAX,EAAkB,UAAlB,EAA2B,OAAO,EAAE,GAAGlB,GAAO,UAAAyB,GAAU,UAAAZ,GAAU,YAAAH,KAAe,UAAAY,EAAS,CAAA;AACpG;"}

package/dist/molecules/tabs/hooks/tabControl.d.ts

@@ -0,0 +1,44 @@
+import { RefObject } from 'react';
+export declare const useActiveTab: () => number;
+export declare const useTabDispatch: () => import('react').Dispatch<{
+    type: "update";
+    payload: number;
+} | {
+    type: "unregister";
+    payload: {
+        value: number;
+    };
+} | {
+    type: "start" | "end" | "previous" | "next";
+} | {
+    type: "register";
+    payload: {
+        value: number;
+        ref: RefObject<HTMLElement>;
+    };
+}>;
+export declare const useTabsUid: () => string;
+interface Props<T extends HTMLElement> {
+    value: number;
+    ref: RefObject<T>;
+}
+export declare function useRegisterTabControl<T extends HTMLElement>({ value, ref }: Props<T>): import('react').Dispatch<{
+    type: "update";
+    payload: number;
+} | {
+    type: "unregister";
+    payload: {
+        value: number;
+    };
+} | {
+    type: "start" | "end" | "previous" | "next";
+} | {
+    type: "register";
+    payload: {
+        value: number;
+        ref: RefObject<HTMLElement>;
+    };
+}>;
+export declare const useTabControls: () => Map<number, RefObject<HTMLElement>>;
+export declare const useActiveTabControl: () => readonly [number, RefObject<HTMLElement> | undefined];
+export {};