@clubmed/trident-ui 1.3.0-beta.2 → 1.3.0-beta.4

package/molecules/Tabs/Tab.d.ts

@@ -6,7 +6,7 @@ interface Props {
     /**
      * Tab Heading text
      */
-    label: string;
+    label?: string;
     /**
      * Tab heading index<br/>
      * _Can be **0** or **1** indexed_

package/molecules/Tabs/Tab.js

@@ -1,37 +1,37 @@
 "use client";
-import { jsx as u, jsxs as B } from "react/jsx-runtime";
-import { c as m } from "../../chunks/index.js";
-import { useRef as d, useEffect as I, useCallback as r } from "react";
-import { animated as _ } from "@react-spring/web";
-import { useActiveTab as z, useRegisterTabControl as G } from "./hooks/tabControl.js";
-import { getTheme as M } from "./theme.js";
-import { useSafeBoop as O } from "../../hooks/useSafeBoop.js";
-import { useKeyboardControls as P } from "../../hooks/useKeyboardControls.js";
-const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
-  className: b,
+import { jsx as d, jsxs as j } from "react/jsx-runtime";
+import { c as u } from "../../chunks/index.js";
+import { useRef as m, useEffect as B, useCallback as r } from "react";
+import { animated as I } from "@react-spring/web";
+import { useActiveTab as P, useTabsUid as U, useRegisterTabControl as z } from "./hooks/tabControl.js";
+import { getTheme as G } from "./theme.js";
+import { useSafeBoop as M } from "../../hooks/useSafeBoop.js";
+import { useKeyboardControls as O } from "../../hooks/useKeyboardControls.js";
+const f = "-z-1 rounded-pill absolute inset-0 duration-300", X = ({
+  className: y,
   label: a,
-  children: y,
-  value: e,
+  children: g,
+  value: o,
   onSelect: i,
-  as: g = "h2",
+  as: T = "h2",
   theme: h = "yellow"
 }) => {
-  const p = d(null), o = z(), t = G({ value: e, ref: p }), l = d(o), n = d(o === e);
-  n.current = o === e;
-  const x = { "--tab-index": e }, { textColor: C, textColorActive: T, bgColor: w } = M(h), [A, c] = O({ scale: 1.02 });
-  I(() => {
+  const p = m(null), e = P(), b = U(), t = z({ value: o, ref: p }), l = m(e), n = m(e === o);
+  n.current = e === o;
+  const x = { "--tab-index": o }, { textColor: C, textColorActive: w, bgColor: A } = G(h), [N, c] = M({ scale: 1.02 });
+  B(() => {
     var s;
-    l.current !== o && e === o && ((s = p.current) == null || s.focus(), i == null || i({ value: e, label: a })), l.current !== o && (l.current = o);
-  }, [a, e, i, o]);
-  const v = r(() => {
+    l.current !== e && o === e && ((s = p.current) == null || s.focus(), i == null || i({ value: o, label: a })), l.current !== e && (l.current = e);
+  }, [a, o, i, e]);
+  const _ = r(() => {
     n.current && c();
-  }, [c]), N = r(() => {
+  }, [c]), k = r(() => {
     t({ type: "start" });
-  }, [t]), k = r(() => {
-    t({ type: "end" });
   }, [t]), L = r(() => {
-    t({ type: "previous" });
+    t({ type: "end" });
   }, [t]), R = r(() => {
+    t({ type: "previous" });
+  }, [t]), v = r(() => {
     t({ type: "next" });
   }, [t]), E = r(() => {
     const s = document.documentElement.dir === "rtl";
@@ -39,63 +39,65 @@ const f = "-z-1 rounded-pill absolute inset-0 duration-300", W = ({
   }, [t]), K = r(() => {
     const s = document.documentElement.dir === "rtl";
     t({ type: s ? "previous" : "next" });
-  }, [t]), D = P({
-    activate: v,
-    start: N,
-    end: k,
-    up: L,
-    down: R,
+  }, [t]), $ = O({
+    activate: _,
+    start: k,
+    end: L,
+    up: R,
+    down: v,
     left: E,
     right: K
-  }), j = r(() => {
-    t({ type: "update", payload: e }), n.current && c();
-  }, [c, t, e]);
-  return /* @__PURE__ */ u(
-    _.div,
+  }), D = r(() => {
+    t({ type: "update", payload: o }), n.current && c();
+  }, [c, t, o]);
+  return /* @__PURE__ */ d(
+    I.div,
     {
+      id: `Tab_${o}_${b}`,
       "data-name": "Tab",
       ref: p,
       role: "tab",
       "aria-selected": n.current,
+      "aria-controls": `TabPanel_${o}_${b}`,
       tabIndex: n.current ? 0 : -1,
-      style: A,
-      className: m(
+      style: N,
+      className: u(
         "text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none",
-        b,
+        y,
         {
           [C]: !n.current,
-          [T]: n.current
+          [w]: n.current
         }
       ),
-      onKeyDown: D,
-      onClick: j,
-      children: /* @__PURE__ */ B(g, { className: "relative inline-block px-20 py-12", children: [
-        /* @__PURE__ */ u(
+      onKeyDown: $,
+      onClick: D,
+      children: /* @__PURE__ */ j(T, { className: "relative inline-block px-20 py-12", children: [
+        /* @__PURE__ */ d(
           "span",
           {
-            className: m(
+            className: u(
               "group-hover:bg-pearl group-focus-within:bg-pearl transition-colors",
               f
             )
           }
         ),
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ d(
           "span",
           {
-            className: m(
+            className: u(
               "tab-focus-pill ease transition-transform/colors",
               f,
-              w
+              A
             ),
             style: x
           }
         ),
-        y ?? a
+        g ?? a
       ] })
     }
   );
 };
 export {
-  W as Tab
+  X as Tab
 };
 //# sourceMappingURL=Tab.js.map

package/molecules/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../lib/molecules/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  type FunctionComponent,\n  useCallback,\n  useEffect,\n  useRef,\n  type PropsWithChildren,\n} from 'react';\n\nimport { animated } from 'react-spring';\n\nimport { useActiveTab, useRegisterTabControl } from './hooks/tabControl';\nimport { type Theme, getTheme } from './theme';\n\nimport { useSafeBoop } from '../../hooks/useSafeBoop';\nimport { useKeyboardControls } from '../../hooks/useKeyboardControls';\n\nimport './Tab.css';\n\nconst BACKGROUND_PILL_CLASSNAME = '-z-1 rounded-pill absolute inset-0 duration-300';\n\ninterface Props {\n  className?: string;\n  /**\n   * Tab Heading text\n   */\n  label: string;\n  /**\n   * Tab heading index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onSelect?: (context: { value: Props['value']; label: Props['label'] }) => void;\n  /**\n   * Tab Heading theme\n   */\n  theme?: Theme;\n  /**\n   * Heading type\n   * _default: **h2**_\n   */\n  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  label,\n  children,\n  value,\n  onSelect,\n  as: TagName = 'h2',\n  theme = 'yellow',\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\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  const pillStyle = { '--tab-index': value } as CSSProperties;\n  const { textColor, textColorActive, bgColor } = getTheme(theme);\n  const [boopStyle, boopTrigger] = useSafeBoop({ scale: 1.02 });\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onSelect?.({ value, label });\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [label, value, onSelect, activeTab]);\n\n  const activate = useCallback(() => {\n    if (isActive.current) {\n      boopTrigger();\n    }\n  }, [boopTrigger]);\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    activate,\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\n    if (isActive.current) {\n      boopTrigger();\n    }\n  }, [boopTrigger, dispatch, value]);\n\n  return (\n    <animated.div\n      data-name=\"Tab\"\n      ref={ref}\n      role=\"tab\"\n      aria-selected={isActive.current}\n      tabIndex={isActive.current ? 0 : -1}\n      style={boopStyle}\n      className={classnames(\n        'text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none',\n        className,\n        {\n          [textColor]: !isActive.current,\n          [textColorActive]: isActive.current,\n        },\n      )}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n    >\n      <TagName className=\"relative inline-block px-20 py-12\">\n        <span\n          className={classnames(\n            'group-hover:bg-pearl group-focus-within:bg-pearl transition-colors',\n            BACKGROUND_PILL_CLASSNAME,\n          )}\n        />\n        <span\n          className={classnames(\n            'tab-focus-pill ease transition-transform/colors',\n            BACKGROUND_PILL_CLASSNAME,\n            bgColor,\n          )}\n          style={pillStyle}\n        />\n        {children ?? label}\n      </TagName>\n    </animated.div>\n  );\n};\n"],"names":["BACKGROUND_PILL_CLASSNAME","Tab","className","label","children","value","onSelect","TagName","theme","ref","useRef","activeTab","useActiveTab","dispatch","useRegisterTabControl","previousActiveTab","isActive","pillStyle","textColor","textColorActive","bgColor","getTheme","boopStyle","boopTrigger","useSafeBoop","useEffect","_a","activate","useCallback","start","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsx","animated","classnames","jsxs"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../../../lib/molecules/Tabs/Tab.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  type FunctionComponent,\n  useCallback,\n  useEffect,\n  useRef,\n  type PropsWithChildren,\n} from 'react';\n\nimport { animated } from 'react-spring';\n\nimport { useActiveTab, useRegisterTabControl, useTabsUid } from './hooks/tabControl';\nimport { type Theme, getTheme } from './theme';\n\nimport { useSafeBoop } from '../../hooks/useSafeBoop';\nimport { useKeyboardControls } from '../../hooks/useKeyboardControls';\n\nimport './Tab.css';\n\nconst BACKGROUND_PILL_CLASSNAME = '-z-1 rounded-pill absolute inset-0 duration-300';\n\ninterface Props {\n  className?: string;\n  /**\n   * Tab Heading text\n   */\n  label?: string;\n  /**\n   * Tab heading index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on tab select handler\n   */\n  onSelect?: (context: { value: Props['value']; label: Props['label'] }) => void;\n  /**\n   * Tab Heading theme\n   */\n  theme?: Theme;\n  /**\n   * Heading type\n   * _default: **h2**_\n   */\n  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n\nexport const Tab: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  label,\n  children,\n  value,\n  onSelect,\n  as: TagName = 'h2',\n  theme = 'yellow',\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const activeTab = useActiveTab();\n  const uid = useTabsUid();\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  const pillStyle = { '--tab-index': value } as CSSProperties;\n  const { textColor, textColorActive, bgColor } = getTheme(theme);\n  const [boopStyle, boopTrigger] = useSafeBoop({ scale: 1.02 });\n\n  useEffect(() => {\n    if (previousActiveTab.current !== activeTab && value === activeTab) {\n      ref.current?.focus();\n      onSelect?.({ value, label });\n    }\n    if (previousActiveTab.current !== activeTab) {\n      previousActiveTab.current = activeTab;\n    }\n  }, [label, value, onSelect, activeTab]);\n\n  const activate = useCallback(() => {\n    if (isActive.current) {\n      boopTrigger();\n    }\n  }, [boopTrigger]);\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    activate,\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\n    if (isActive.current) {\n      boopTrigger();\n    }\n  }, [boopTrigger, dispatch, value]);\n\n  return (\n    <animated.div\n      id={`Tab_${value}_${uid}`}\n      data-name=\"Tab\"\n      ref={ref}\n      role=\"tab\"\n      aria-selected={isActive.current}\n      aria-controls={`TabPanel_${value}_${uid}`}\n      tabIndex={isActive.current ? 0 : -1}\n      style={boopStyle}\n      className={classnames(\n        'text-b3 group inline-block cursor-pointer overflow-hidden whitespace-nowrap bg-transparent pe-4 align-middle font-semibold outline-none',\n        className,\n        {\n          [textColor]: !isActive.current,\n          [textColorActive]: isActive.current,\n        },\n      )}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n    >\n      <TagName className=\"relative inline-block px-20 py-12\">\n        <span\n          className={classnames(\n            'group-hover:bg-pearl group-focus-within:bg-pearl transition-colors',\n            BACKGROUND_PILL_CLASSNAME,\n          )}\n        />\n        <span\n          className={classnames(\n            'tab-focus-pill ease transition-transform/colors',\n            BACKGROUND_PILL_CLASSNAME,\n            bgColor,\n          )}\n          style={pillStyle}\n        />\n        {children ?? label}\n      </TagName>\n    </animated.div>\n  );\n};\n"],"names":["BACKGROUND_PILL_CLASSNAME","Tab","className","label","children","value","onSelect","TagName","theme","ref","useRef","activeTab","useActiveTab","uid","useTabsUid","dispatch","useRegisterTabControl","previousActiveTab","isActive","pillStyle","textColor","textColorActive","bgColor","getTheme","boopStyle","boopTrigger","useSafeBoop","useEffect","_a","activate","useCallback","start","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsx","animated","classnames","jsxs"],"mappings":";;;;;;;;;AAsBA,MAAMA,IAA4B,mDA4BrBC,IAAmD,CAAC;AAAA,EAC/D,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAIC,IAAU;AAAA,EACd,OAAAC,IAAQ;AACV,MAAM;AACE,QAAAC,IAAMC,EAAuB,IAAI,GAEjCC,IAAYC,KACZC,IAAMC,KACNC,IAAWC,EAAsB,EAAE,OAAAX,GAAO,KAAAI,EAAK,CAAA,GAC/CQ,IAAoBP,EAAOC,CAAS,GAEpCO,IAAWR,EAAOC,MAAcN,CAAK;AAC3C,EAAAa,EAAS,UAAUP,MAAcN;AAE3B,QAAAc,IAAY,EAAE,eAAed,KAC7B,EAAE,WAAAe,GAAW,iBAAAC,GAAiB,SAAAC,EAAQ,IAAIC,EAASf,CAAK,GACxD,CAACgB,GAAWC,CAAW,IAAIC,EAAY,EAAE,OAAO,MAAM;AAE5D,EAAAC,EAAU,MAAM;;AACd,IAAIV,EAAkB,YAAYN,KAAaN,MAAUM,OACvDiB,IAAAnB,EAAI,YAAJ,QAAAmB,EAAa,SACFtB,KAAA,QAAAA,EAAA,EAAE,OAAAD,GAAO,OAAAF,EAAA,KAElBc,EAAkB,YAAYN,MAChCM,EAAkB,UAAUN;AAAA,KAE7B,CAACR,GAAOE,GAAOC,GAAUK,CAAS,CAAC;AAEhC,QAAAkB,IAAWC,EAAY,MAAM;AACjC,IAAIZ,EAAS,WACCO;EACd,GACC,CAACA,CAAW,CAAC,GAEVM,IAAQD,EAAY,MAAM;AACrB,IAAAf,EAAA,EAAE,MAAM,QAAA,CAAS;AAAA,EAAA,GACzB,CAACA,CAAQ,CAAC,GAEPiB,IAAMF,EAAY,MAAM;AACnB,IAAAf,EAAA,EAAE,MAAM,MAAA,CAAO;AAAA,EAAA,GACvB,CAACA,CAAQ,CAAC,GAEPkB,IAAKH,EAAY,MAAM;AAClB,IAAAf,EAAA,EAAE,MAAM,WAAA,CAAY;AAAA,EAAA,GAC5B,CAACA,CAAQ,CAAC,GAEPmB,IAAOJ,EAAY,MAAM;AACpB,IAAAf,EAAA,EAAE,MAAM,OAAA,CAAQ;AAAA,EAAA,GACxB,CAACA,CAAQ,CAAC,GAEPoB,IAAOL,EAAY,MAAM;AACvB,UAAAM,IAAQ,SAAS,gBAAgB,QAAQ;AAE/C,IAAArB,EAAS,EAAE,MAAMqB,IAAQ,SAAS,WAAY,CAAA;AAAA,EAAA,GAC7C,CAACrB,CAAQ,CAAC,GAEPsB,IAAQP,EAAY,MAAM;AACxB,UAAAM,IAAQ,SAAS,gBAAgB,QAAQ;AAE/C,IAAArB,EAAS,EAAE,MAAMqB,IAAQ,aAAa,OAAQ,CAAA;AAAA,EAAA,GAC7C,CAACrB,CAAQ,CAAC,GAEPuB,IAAgBC,EAAoB;AAAA,IACxC,UAAAV;AAAA,IACA,OAAAE;AAAA,IACA,KAAAC;AAAA,IACA,IAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAE;AAAA,EAAA,CACD,GAEKG,IAAcV,EAAY,MAAM;AACpC,IAAAf,EAAS,EAAE,MAAM,UAAU,SAASV,EAAO,CAAA,GAEvCa,EAAS,WACCO;EAEb,GAAA,CAACA,GAAaV,GAAUV,CAAK,CAAC;AAG/B,SAAA,gBAAAoC;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,IAAI,OAAOrC,CAAK,IAAIQ,CAAG;AAAA,MACvB,aAAU;AAAA,MACV,KAAAJ;AAAA,MACA,MAAK;AAAA,MACL,iBAAeS,EAAS;AAAA,MACxB,iBAAe,YAAYb,CAAK,IAAIQ,CAAG;AAAA,MACvC,UAAUK,EAAS,UAAU,IAAI;AAAA,MACjC,OAAOM;AAAA,MACP,WAAWmB;AAAA,QACT;AAAA,QACAzC;AAAA,QACA;AAAA,UACE,CAACkB,CAAS,GAAG,CAACF,EAAS;AAAA,UACvB,CAACG,CAAe,GAAGH,EAAS;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,WAAWoB;AAAA,MACX,SAASE;AAAA,MAET,UAAA,gBAAAI,EAACrC,GAAQ,EAAA,WAAU,qCACjB,UAAA;AAAA,QAAA,gBAAAkC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA3C;AAAA,YACF;AAAA,UAAA;AAAA,QACF;AAAA,QACA,gBAAAyC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA3C;AAAA,cACAsB;AAAA,YACF;AAAA,YACA,OAAOH;AAAA,UAAA;AAAA,QACT;AAAA,QACCf,KAAYD;AAAA,MAAA,GACf;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Tabs/TabPanel.js

@@ -1,60 +1,62 @@
 "use client";
 import { jsx as p } from "react/jsx-runtime";
-import { c as d } from "../../chunks/index.js";
-import { useRef as l, useEffect as f } from "react";
-import { useSpring as u, animated as b } from "@react-spring/web";
-import { useActiveTab as y } from "./hooks/tabControl.js";
-const a = {
+import { c as u } from "../../chunks/index.js";
+import { useRef as b, useEffect as f } from "react";
+import { useSpring as h, animated as l } from "@react-spring/web";
+import { useTabsUid as T, useActiveTab as g } from "./hooks/tabControl.js";
+const i = {
   opacity: 0,
   pointerEvents: "none",
-  display: "none"
+  height: 0
 }, n = {
   opacity: 1,
   pointerEvents: "auto",
-  display: "block"
-}, R = ({
-  value: o,
-  className: i,
-  onSelect: e,
-  children: c
+  height: "auto"
+}, P = ({
+  value: e,
+  className: c,
+  onSelect: a,
+  children: m
 }) => {
-  const r = l(!1), t = y() === o, [m, s] = u(() => ({
-    from: t ? n : a
+  const o = T(), s = b(!1), t = g() === e, [d, r] = h(() => ({
+    from: t ? n : i
   }));
   return f(() => {
-    if (!r.current) {
-      r.current = !0;
+    if (!s.current) {
+      s.current = !0;
       return;
     }
-    s.start({
+    r.start({
       to: {
-        ...t ? n : a,
-        display: "block"
+        ...t ? n : i,
+        height: "auto"
       },
       onRest: () => {
-        s.start({
-          to: { display: t ? "block" : "none" },
+        r.start({
+          to: { height: t ? "auto" : 0 },
           immediate: !0
         });
       }
-    }), t && (e == null || e({ value: o }));
-  }, [t, s, o, e]), /* @__PURE__ */ p(
-    b.div,
+    }), t && (a == null || a({ value: e }));
+  }, [t, r, e, a]), /* @__PURE__ */ p(
+    l.div,
     {
-      "data-name": "Tab",
-      style: m,
+      style: d,
+      id: `TabPanel_${e}_${o}`,
+      "data-name": `TabPanel_${e}`,
       role: "tabpanel",
       "aria-hidden": !t,
+      "aria-labelledby": `Tab_${e}_${o}`,
       tabIndex: t ? 0 : -1,
-      className: d("col-start-1 col-end-1 row-start-1 row-end-1", i, {
+      className: u(c, "col-start-1 col-end-1 row-start-1 row-end-1", {
         "z-0": !t,
         "z-1": t
       }),
-      children: c
+      children: m
     }
   );
 };
 export {
-  R as TabPanel
+  P as TabPanel
 };
 //# sourceMappingURL=TabPanel.js.map

package/molecules/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../lib/molecules/Tabs/TabPanel.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type FunctionComponent, type PropsWithChildren, useEffect, useRef } from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTab } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Tab panel index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on panel select handler\n   */\n  onSelect?: (context: { value: Props['value'] }) => void;\n}\n\ninterface TabStyle {\n  pointerEvents: 'none' | 'auto';\n  opacity: number;\n  display: 'block' | 'none';\n}\n\nconst FROM: TabStyle = {\n  opacity: 0,\n  pointerEvents: 'none',\n  display: 'none',\n};\n\nconst TO: TabStyle = {\n  opacity: 1,\n  pointerEvents: 'auto',\n  display: 'block',\n};\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<Props>> = ({\n  value,\n  className,\n  onSelect,\n  children,\n}) => {\n  const mounted = useRef(false);\n  const tabSelected = useActiveTab();\n  const isActive = tabSelected === value;\n\n  const [style, styleApi] = useSpring<TabStyle>(() => ({\n    from: isActive ? TO : FROM,\n  }));\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n\n    styleApi.start({\n      to: {\n        ...(isActive ? TO : FROM),\n        display: 'block',\n      },\n      onRest: () => {\n        styleApi.start({\n          to: { display: isActive ? 'block' : 'none' },\n          immediate: true,\n        });\n      },\n    });\n\n    if (isActive) {\n      onSelect?.({ value });\n    }\n  }, [isActive, styleApi, value, onSelect]);\n\n  return (\n    <animated.div\n      data-name=\"Tab\"\n      style={style}\n      role=\"tabpanel\"\n      aria-hidden={!isActive}\n      tabIndex={isActive ? 0 : -1}\n      className={classnames('col-start-1 col-end-1 row-start-1 row-end-1', className, {\n        'z-0': !isActive,\n        'z-1': isActive,\n      })}\n    >\n      {children}\n    </animated.div>\n  );\n};\n"],"names":["FROM","TO","TabPanel","value","className","onSelect","children","mounted","useRef","isActive","useActiveTab","style","styleApi","useSpring","useEffect","jsx","animated","classnames"],"mappings":";;;;;;AA2BA,MAAMA,IAAiB;AAAA,EACrB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,SAAS;AACX,GAEMC,IAAe;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,SAAS;AACX,GAEaC,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACE,QAAAC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,QACaP,GAE3B,CAACQ,GAAOC,CAAQ,IAAIC,EAAoB,OAAO;AAAA,IACnD,MAAMJ,IAAWR,IAAKD;AAAA,EACtB,EAAA;AAEF,SAAAc,EAAU,MAAM;AACV,QAAA,CAACP,EAAQ,SAAS;AACpB,MAAAA,EAAQ,UAAU;AAClB;AAAA,IACF;AAEA,IAAAK,EAAS,MAAM;AAAA,MACb,IAAI;AAAA,QACF,GAAIH,IAAWR,IAAKD;AAAA,QACpB,SAAS;AAAA,MACX;AAAA,MACA,QAAQ,MAAM;AACZ,QAAAY,EAAS,MAAM;AAAA,UACb,IAAI,EAAE,SAASH,IAAW,UAAU,OAAO;AAAA,UAC3C,WAAW;AAAA,QAAA,CACZ;AAAA,MACH;AAAA,IAAA,CACD,GAEGA,MACSJ,KAAA,QAAAA,EAAA,EAAE,OAAAF;KAEd,CAACM,GAAUG,GAAUT,GAAOE,CAAQ,CAAC,GAGtC,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,aAAU;AAAA,MACV,OAAAL;AAAA,MACA,MAAK;AAAA,MACL,eAAa,CAACF;AAAA,MACd,UAAUA,IAAW,IAAI;AAAA,MACzB,WAAWQ,EAAW,+CAA+Cb,GAAW;AAAA,QAC9E,OAAO,CAACK;AAAA,QACR,OAAOA;AAAA,MAAA,CACR;AAAA,MAEA,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"TabPanel.js","sources":["../../../lib/molecules/Tabs/TabPanel.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport { type FunctionComponent, type PropsWithChildren, useEffect, useRef } from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTab, useTabsUid } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Tab panel index<br/>\n   * _Can be **0** or **1** indexed_\n   */\n  value: number;\n  /**\n   * on panel select handler\n   */\n  onSelect?: (context: { value: Props['value'] }) => void;\n}\n\ninterface TabStyle {\n  pointerEvents: 'none' | 'auto';\n  opacity: number;\n  height?: number | 'auto';\n}\n\nconst FROM: TabStyle = {\n  opacity: 0,\n  pointerEvents: 'none',\n  height: 0,\n};\n\nconst TO: TabStyle = {\n  opacity: 1,\n  pointerEvents: 'auto',\n  height: 'auto',\n};\n\nexport const TabPanel: FunctionComponent<PropsWithChildren<Props>> = ({\n  value,\n  className,\n  onSelect,\n  children,\n}) => {\n  const uid = useTabsUid();\n  const mounted = useRef(false);\n  const tabSelected = useActiveTab();\n  const isActive = tabSelected === value;\n\n  const [style, styleApi] = useSpring<TabStyle>(() => ({\n    from: isActive ? TO : FROM,\n  }));\n\n  useEffect(() => {\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n\n    styleApi.start({\n      to: {\n        ...(isActive ? TO : FROM),\n        height: 'auto',\n      },\n      onRest: () => {\n        styleApi.start({\n          to: { height: isActive ? 'auto' : 0 },\n          immediate: true,\n        });\n      },\n    });\n\n    if (isActive) {\n      onSelect?.({ value });\n    }\n  }, [isActive, styleApi, value, onSelect]);\n\n  return (\n    <animated.div\n      style={style}\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(className, 'col-start-1 col-end-1 row-start-1 row-end-1', {\n        'z-0': !isActive,\n        'z-1': isActive,\n      })}\n    >\n      {children}\n    </animated.div>\n  );\n};\n"],"names":["FROM","TO","TabPanel","value","className","onSelect","children","uid","useTabsUid","mounted","useRef","isActive","useActiveTab","style","styleApi","useSpring","useEffect","jsx","animated","classnames"],"mappings":";;;;;;AA2BA,MAAMA,IAAiB;AAAA,EACrB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AACV,GAEMC,IAAe;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,QAAQ;AACV,GAEaC,IAAwD,CAAC;AAAA,EACpE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,KACNC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,QACaT,GAE3B,CAACU,GAAOC,CAAQ,IAAIC,EAAoB,OAAO;AAAA,IACnD,MAAMJ,IAAWV,IAAKD;AAAA,EACtB,EAAA;AAEF,SAAAgB,EAAU,MAAM;AACV,QAAA,CAACP,EAAQ,SAAS;AACpB,MAAAA,EAAQ,UAAU;AAClB;AAAA,IACF;AAEA,IAAAK,EAAS,MAAM;AAAA,MACb,IAAI;AAAA,QACF,GAAIH,IAAWV,IAAKD;AAAA,QACpB,QAAQ;AAAA,MACV;AAAA,MACA,QAAQ,MAAM;AACZ,QAAAc,EAAS,MAAM;AAAA,UACb,IAAI,EAAE,QAAQH,IAAW,SAAS,EAAE;AAAA,UACpC,WAAW;AAAA,QAAA,CACZ;AAAA,MACH;AAAA,IAAA,CACD,GAEGA,MACSN,KAAA,QAAAA,EAAA,EAAE,OAAAF;KAEd,CAACQ,GAAUG,GAAUX,GAAOE,CAAQ,CAAC,GAGtC,gBAAAY;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,OAAAL;AAAA,MACA,IAAI,YAAYV,CAAK,IAAII,CAAG;AAAA,MAC5B,aAAW,YAAYJ,CAAK;AAAA,MAC5B,MAAK;AAAA,MACL,eAAa,CAACQ;AAAA,MACd,mBAAiB,OAAOR,CAAK,IAAII,CAAG;AAAA,MACpC,UAAUI,IAAW,IAAI;AAAA,MACzB,WAAWQ,EAAWf,GAAW,+CAA+C;AAAA,QAC9E,OAAO,CAACO;AAAA,QACR,OAAOA;AAAA,MAAA,CACR;AAAA,MAEA,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/molecules/Tabs/Tabs.js

@@ -1,22 +1,20 @@
 import { jsx as a } from "react/jsx-runtime";
-import { c as t } from "../../chunks/index.js";
-import { TabsProvider as c } from "./context/TabControl.js";
-const p = ({
+import { c as o } from "../../chunks/index.js";
+import { TabsProvider as l } from "./context/TabControl.js";
+const i = ({
   className: s,
   compacted: r = !1,
   selected: e,
-  min: m,
-  max: o,
-  children: l
+  children: m
 }) => /* @__PURE__ */ a(
   "div",
   {
-    className: t("flex flex-col", s, { "sm:gap-y-20": !r }),
+    className: o("flex flex-col", s, { "sm:gap-y-20": !r }),
     "data-name": "Tabs",
-    children: /* @__PURE__ */ a(c, { selected: e, min: m, max: o, children: l })
+    children: /* @__PURE__ */ a(l, { selected: e, children: m })
   }
 );
 export {
-  p as Tabs
+  i as Tabs
 };
 //# sourceMappingURL=Tabs.js.map

package/molecules/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../lib/molecules/Tabs/Tabs.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { TabsProvider } from './context/TabControl';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n  className?: string;\n  /**\n   * Shrink the spacing between tabs and panels\n   */\n  compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  compacted = false,\n  selected,\n  min,\n  max,\n  children,\n}) => {\n  return (\n    <div\n      className={classnames('flex flex-col', className, { 'sm:gap-y-20': !compacted })}\n      data-name=\"Tabs\"\n    >\n      <TabsProvider selected={selected} min={min} max={max}>\n        {children}\n      </TabsProvider>\n    </div>\n  );\n};\n"],"names":["Tabs","className","compacted","selected","min","max","children","jsx","classnames","TabsProvider"],"mappings":";;;AAeO,MAAMA,IAAoD,CAAC;AAAA,EAChE,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAW,iBAAiBP,GAAW,EAAE,eAAe,CAACC,GAAW;AAAA,IAC/E,aAAU;AAAA,IAEV,UAAC,gBAAAK,EAAAE,GAAA,EAAa,UAAAN,GAAoB,KAAAC,GAAU,KAAAC,GACzC,UAAAC,GACH;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Tabs.js","sources":["../../../lib/molecules/Tabs/Tabs.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { TabsProvider } from './context/TabControl';\n\ntype ProviderProps = ComponentProps<typeof TabsProvider>;\n\ninterface Props extends ProviderProps {\n  className?: string;\n  /**\n   * Shrink the spacing between tabs and panels\n   */\n  compacted?: boolean;\n}\n\nexport const Tabs: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  compacted = false,\n  selected,\n  children,\n}) => {\n  return (\n    <div\n      className={classnames('flex flex-col', className, { 'sm:gap-y-20': !compacted })}\n      data-name=\"Tabs\"\n    >\n      <TabsProvider selected={selected}>{children}</TabsProvider>\n    </div>\n  );\n};\n"],"names":["Tabs","className","compacted","selected","children","jsx","classnames","TabsProvider"],"mappings":";;;AAeO,MAAMA,IAAoD,CAAC;AAAA,EAChE,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAW,iBAAiBL,GAAW,EAAE,eAAe,CAACC,GAAW;AAAA,IAC/E,aAAU;AAAA,IAEV,UAAA,gBAAAG,EAACE,GAAa,EAAA,UAAAJ,GAAqB,UAAAC,EAAS,CAAA;AAAA,EAAA;AAAA;"}

package/molecules/Tabs/context/TabControl.d.ts

@@ -1,50 +1,52 @@
-import { type Dispatch, type FunctionComponent, type PropsWithChildren, type RefObject } from 'react';
-type TabsAction = {
+import { type Dispatch, type PropsWithChildren, type 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: 'next';
-} | {
-    type: 'previous';
-} | {
-    type: 'start';
-} | {
-    type: 'end';
 };
-type ControlAction<T extends HTMLElement = HTMLElement> = {
+type TabsRegisterAction<T extends HTMLElement = HTMLElement> = {
     type: 'register';
     payload: {
         value: number;
         ref: RefObject<T>;
     };
-} | {
+};
+type TabsUnregisterAction = {
     type: 'unregister';
     payload: {
         value: number;
     };
 };
-interface ActiveTab {
+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>;
 }
-export declare const ActiveTabContext: import("react").Context<ActiveTab>;
-interface TabRefs<T extends HTMLElement = HTMLElement> {
-    refs: Map<number, RefObject<T>>;
-}
-export declare const TabRefsContext: import("react").Context<TabRefs<HTMLElement>>;
-interface TabControl<T extends HTMLElement = HTMLElement> {
+interface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {
+    uid: string;
+    value: number;
+    refs: RefTabs<T>;
     dispatch: Dispatch<TabsAction>;
-    register: (value: Extract<ControlAction<T>, {
-        type: 'register';
-    }>['payload']['value'], ref: Extract<ControlAction<T>, {
-        type: 'register';
-    }>['payload']['ref']) => void;
+    register: (value: number, ref: RefTab<T>) => void;
     unregister: (value: number) => void;
 }
 export declare const TabControlContext: import("react").Context<TabControl<HTMLElement>>;
-interface ProviderProps {
+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;
-    max: 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 const TabsProvider: FunctionComponent<PropsWithChildren<ProviderProps>>;
+export declare function TabsProvider({ selected, children }: PropsWithChildren<TabsProviderProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/molecules/Tabs/context/TabControl.js

@@ -1,46 +1,64 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import { createContext as c, useReducer as v, useMemo as u, useCallback as x } from "react";
-const C = (t) => {
-  const e = Math.max(Math.min(t.min, t.max), 0), r = Math.max(Math.min(t.max, 1 / 0), e);
+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 {
-    min: e,
-    max: r,
-    clamp: (n) => Math.max(Math.min(n, r), e)
+    ...e,
+    value: r
   };
-}, g = (t) => {
-  const { clamp: e } = C(t);
-  return e(t.value);
-}, P = (t) => {
-  const { min: e, max: r, clamp: n } = C(t);
-  return (a, o) => {
-    switch (o.type) {
-      case "update":
-        return n(o.payload);
-      case "next":
-        return a + 1 <= r ? a + 1 : e;
-      case "previous":
-        return a - 1 >= e ? a - 1 : r;
-      case "start":
-        return e;
-      case "end":
-        return 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)
   };
-}, R = (t, e) => {
-  switch (e.type) {
-    case "register":
-      return new Map(t.set(e.payload.value, e.payload.ref));
-    case "unregister":
-      return t.delete(e.payload.value), new Map(t);
+}
+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);
   }
-}, h = c({ value: 0 });
-h.displayName = "ActiveTabContext";
-const y = c({
-  refs: /* @__PURE__ */ new Map()
-});
-y.displayName = "TabRefsContext";
-const b = c({
+  return e;
+}
+const d = p({
+  uid: "",
+  value: 0,
+  refs: /* @__PURE__ */ new Map(),
   dispatch: () => {
     console.warn("Tab Controller Context dispatch used outside of Provider");
   },
@@ -51,34 +69,17 @@ const b = c({
     console.warn("Tab Controller Context unregister used outside of Provider");
   }
 });
-b.displayName = "TabControlContext";
-const A = ({
-  min: t = 0,
-  max: e,
-  selected: r = t,
-  children: n
-}) => {
-  const [a, o] = v(
-    P({ min: t, max: e }),
-    { value: r, min: t, max: e },
-    g
-  ), [i, d] = v(R, /* @__PURE__ */ new Map()), M = u(() => ({ value: a }), [a]), f = u(() => ({ refs: i }), [i]), p = x(
-    (s, w) => {
-      d({ type: "register", payload: { value: s, ref: w } });
-    },
-    []
-  ), m = x(
-    (s) => {
-      d({ type: "unregister", payload: { value: s } });
-    },
-    []
-  ), T = u(() => ({ dispatch: o, register: p, unregister: m }), [p, m]);
-  return /* @__PURE__ */ l(h.Provider, { value: M, children: /* @__PURE__ */ l(y.Provider, { value: f, children: /* @__PURE__ */ l(b.Provider, { value: T, children: n }) }) });
-};
+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 {
-  h as ActiveTabContext,
-  b as TabControlContext,
-  y as TabRefsContext,
-  A as TabsProvider
+  d as TabControlContext,
+  P as TabsProvider
 };
 //# sourceMappingURL=TabControl.js.map