@clubmed/trident-ui 1.3.0-beta.11 → 1.3.0-beta.13

package/molecules/Tabs/Tab.js

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

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, 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;AACJ,QAAMC,IAAMC,EAAuB,IAAI,GAEjCC,IAAYC,EAAA,GACZC,IAAMC,EAAA,GACNC,IAAWC,EAAsB,EAAE,OAAAX,GAAO,KAAAI,GAAK,GAC/CQ,IAAoBP,EAAOC,CAAS,GAEpCO,IAAWR,EAAOC,MAAcN,CAAK;AAC3C,EAAAa,EAAS,UAAUP,MAAcN;AAEjC,QAAMc,IAAY,EAAE,eAAed,EAAA,GAC7B,EAAE,WAAAe,GAAW,iBAAAC,GAAiB,SAAAC,EAAA,IAAYC,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,SACbtB,KAAA,QAAAA,EAAW,EAAE,OAAAD,GAAO,OAAAF,OAElBc,EAAkB,YAAYN,MAChCM,EAAkB,UAAUN;AAAA,EAEhC,GAAG,CAACR,GAAOE,GAAOC,GAAUK,CAAS,CAAC;AAEtC,QAAMkB,IAAWC,EAAY,MAAM;AACjC,IAAIZ,EAAS,WACXO,EAAA;AAAA,EAEJ,GAAG,CAACA,CAAW,CAAC,GAEVM,IAAQD,EAAY,MAAM;AAC9B,IAAAf,EAAS,EAAE,MAAM,SAAS;AAAA,EAC5B,GAAG,CAACA,CAAQ,CAAC,GAEPiB,IAAMF,EAAY,MAAM;AAC5B,IAAAf,EAAS,EAAE,MAAM,OAAO;AAAA,EAC1B,GAAG,CAACA,CAAQ,CAAC,GAEPkB,IAAKH,EAAY,MAAM;AAC3B,IAAAf,EAAS,EAAE,MAAM,YAAY;AAAA,EAC/B,GAAG,CAACA,CAAQ,CAAC,GAEPmB,IAAOJ,EAAY,MAAM;AAC7B,IAAAf,EAAS,EAAE,MAAM,QAAQ;AAAA,EAC3B,GAAG,CAACA,CAAQ,CAAC,GAEPoB,IAAOL,EAAY,MAAM;AAC7B,UAAMM,IAAQ,SAAS,gBAAgB,QAAQ;AAE/C,IAAArB,EAAS,EAAE,MAAMqB,IAAQ,SAAS,YAAY;AAAA,EAChD,GAAG,CAACrB,CAAQ,CAAC,GAEPsB,IAAQP,EAAY,MAAM;AAC9B,UAAMM,IAAQ,SAAS,gBAAgB,QAAQ;AAE/C,IAAArB,EAAS,EAAE,MAAMqB,IAAQ,aAAa,QAAQ;AAAA,EAChD,GAAG,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,GAAO,GAEvCa,EAAS,WACXO,EAAA;AAAA,EAEJ,GAAG,CAACA,GAAaV,GAAUV,CAAK,CAAC;AAEjC,SACE,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,QAAA;AAAA,MAC9B;AAAA,MAEF,WAAWoB;AAAA,MACX,SAASE;AAAA,MAET,UAAA,gBAAAI,EAACrC,GAAA,EAAQ,WAAU,qCACjB,UAAA;AAAA,QAAA,gBAAAkC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA3C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAEF,gBAAAyC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACT;AAAA,cACA3C;AAAA,cACAsB;AAAA,YAAA;AAAA,YAEF,OAAOH;AAAA,UAAA;AAAA,QAAA;AAAA,QAERf,KAAYD;AAAA,MAAA,EAAA,CACf;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"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","activate","useCallback","start","end","up","down","left","isRTL","right","handleKeyDown","useKeyboardControls","handleClick","jsx","animated","classnames","jsxs"],"mappings":"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"}

package/molecules/Tabs/TabList.d.ts

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type PropsWithChildren } from 'react';
+import { FunctionComponent, PropsWithChildren } from 'react';
 interface Props {
     className?: string;
     /**

package/molecules/Tabs/TabList.js

@@ -1,54 +1,54 @@
 "use client";
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
-import { c as t } from "../../chunks/index.js";
-import { useRef as f, useEffect as v } from "react";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { c as e } from "../../chunks/index.js";
+import { useRef as n, useEffect as v } from "react";
 import { useSpring as b, animated as h } from "@react-spring/web";
 import { useActiveTabControl as L } from "./hooks/tabControl.js";
-const k = ({
-  className: n,
-  constrained: r = !1,
+const j = ({
+  className: f,
+  constrained: l = !1,
   children: i
 }) => {
-  const s = f(null), c = f(null), [m, e] = L(), [{ scrollLeft: a }, o] = b(() => ({
+  const s = n(null), c = n(null), [m, r] = L(), [{ scrollLeft: a }, o] = b(() => ({
     from: { scrollLeft: 0 }
   }));
   v(() => {
-    if (!(e != null && e.current))
+    if (!r?.current)
       return;
-    const p = e.current.getBoundingClientRect().left, u = s.current.scrollLeft, w = c.current.offsetWidth;
+    const p = r.current.getBoundingClientRect().left, u = s.current.scrollLeft, w = c.current.offsetWidth;
     o.start({
       to: {
         scrollLeft: u + p - w
       }
     });
-  }, [a, e, o]);
+  }, [a, r, o]);
   const x = { "--active-tab": m };
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ t(
     h.div,
     {
       ref: s,
       "data-name": "TabsHeader",
-      className: t(
+      className: e(
         "scrollbar-hide relative flex max-w-full overflow-x-scroll py-20",
-        n
+        f
       ),
       scrollLeft: a,
-      children: /* @__PURE__ */ d("div", { role: "tablist", className: t("flex flex-row"), style: x, children: [
-        /* @__PURE__ */ l(
+      children: /* @__PURE__ */ d("div", { role: "tablist", className: e("flex flex-row"), style: x, children: [
+        /* @__PURE__ */ t(
           "div",
           {
             ref: c,
-            className: t("shrink-0", {
-              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !r
+            className: e("shrink-0", {
+              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !l
             })
           }
         ),
         i,
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ t(
           "div",
           {
-            className: t("shrink-0", {
-              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !r
+            className: e("shrink-0", {
+              "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !l
             })
           }
         )
@@ -57,6 +57,6 @@ const k = ({
   );
 };
 export {
-  k as TabList
+  j as TabList
 };
 //# sourceMappingURL=TabList.js.map

package/molecules/Tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../lib/molecules/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  type FunctionComponent,\n  type PropsWithChildren,\n} from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTabControl } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n\n  const [{ scrollLeft }, scrollApi] = useSpring(() => ({\n    from: { scrollLeft: 0 },\n  }));\n\n  useEffect(() => {\n    if (!currentControl?.current) {\n      return;\n    }\n\n    const tabLeft = currentControl.current.getBoundingClientRect().left;\n    const scrollLeft = containerRef.current!.scrollLeft;\n    const spacerWidth = spacerRef.current!.offsetWidth;\n\n    scrollApi.start({\n      to: {\n        scrollLeft: scrollLeft + tabLeft - spacerWidth,\n      },\n    });\n  }, [scrollLeft, currentControl, scrollApi]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n\n  return (\n    <animated.div\n      ref={containerRef}\n      data-name=\"TabsHeader\"\n      className={classnames(\n        'scrollbar-hide relative flex max-w-full overflow-x-scroll py-20',\n        className,\n      )}\n      scrollLeft={scrollLeft}\n    >\n      <div role=\"tablist\" className={classnames('flex flex-row')} style={style}>\n        <div\n          ref={spacerRef}\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n        {children}\n        <div\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n      </div>\n    </animated.div>\n  );\n};\n"],"names":["TabList","className","constrained","children","containerRef","useRef","spacerRef","currentTab","currentControl","useActiveTabControl","scrollLeft","scrollApi","useSpring","useEffect","tabLeft","spacerWidth","style","jsx","animated","classnames","jsxs"],"mappings":";;;;;;AAsBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAYD,EAAuB,IAAI,GACvC,CAACE,GAAYC,CAAc,IAAIC,EAAA,GAE/B,CAAC,EAAE,YAAAC,EAAA,GAAcC,CAAS,IAAIC,EAAU,OAAO;AAAA,IACnD,MAAM,EAAE,YAAY,EAAA;AAAA,EAAE,EACtB;AAEF,EAAAC,EAAU,MAAM;AACd,QAAI,EAACL,KAAA,QAAAA,EAAgB;AACnB;AAGF,UAAMM,IAAUN,EAAe,QAAQ,sBAAA,EAAwB,MACzDE,IAAaN,EAAa,QAAS,YACnCW,IAAcT,EAAU,QAAS;AAEvC,IAAAK,EAAU,MAAM;AAAA,MACd,IAAI;AAAA,QACF,YAAYD,IAAaI,IAAUC;AAAA,MAAA;AAAA,IACrC,CACD;AAAA,EACH,GAAG,CAACL,GAAYF,GAAgBG,CAAS,CAAC;AAE1C,QAAMK,IAAQ,EAAE,gBAAgBT,EAAA;AAEhC,SACE,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAKd;AAAA,MACL,aAAU;AAAA,MACV,WAAWe;AAAA,QACT;AAAA,QACAlB;AAAA,MAAA;AAAA,MAEF,YAAAS;AAAA,MAEA,UAAA,gBAAAU,EAAC,SAAI,MAAK,WAAU,WAAWD,EAAW,eAAe,GAAG,OAAAH,GAC1D,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKX;AAAA,YACL,WAAWa,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC;AAAA,QACD,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"TabList.js","sources":["../../../lib/molecules/Tabs/TabList.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type CSSProperties,\n  useEffect,\n  useRef,\n  type FunctionComponent,\n  type PropsWithChildren,\n} from 'react';\nimport { animated, useSpring } from '@react-spring/web';\n\nimport { useActiveTabControl } from './hooks/tabControl';\n\ninterface Props {\n  className?: string;\n  /**\n   * Remove filler placeholders\n   */\n  constrained?: boolean;\n}\n\nexport const TabList: FunctionComponent<PropsWithChildren<Props>> = ({\n  className,\n  constrained = false,\n  children,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const spacerRef = useRef<HTMLDivElement>(null);\n  const [currentTab, currentControl] = useActiveTabControl();\n\n  const [{ scrollLeft }, scrollApi] = useSpring(() => ({\n    from: { scrollLeft: 0 },\n  }));\n\n  useEffect(() => {\n    if (!currentControl?.current) {\n      return;\n    }\n\n    const tabLeft = currentControl.current.getBoundingClientRect().left;\n    const scrollLeft = containerRef.current!.scrollLeft;\n    const spacerWidth = spacerRef.current!.offsetWidth;\n\n    scrollApi.start({\n      to: {\n        scrollLeft: scrollLeft + tabLeft - spacerWidth,\n      },\n    });\n  }, [scrollLeft, currentControl, scrollApi]);\n\n  const style = { '--active-tab': currentTab } as CSSProperties;\n\n  return (\n    <animated.div\n      ref={containerRef}\n      data-name=\"TabsHeader\"\n      className={classnames(\n        'scrollbar-hide relative flex max-w-full overflow-x-scroll py-20',\n        className,\n      )}\n      scrollLeft={scrollLeft}\n    >\n      <div role=\"tablist\" className={classnames('flex flex-row')} style={style}>\n        <div\n          ref={spacerRef}\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n        {children}\n        <div\n          className={classnames('shrink-0', {\n            'w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]':\n              !constrained,\n          })}\n        />\n      </div>\n    </animated.div>\n  );\n};\n"],"names":["TabList","className","constrained","children","containerRef","useRef","spacerRef","currentTab","currentControl","useActiveTabControl","scrollLeft","scrollApi","useSpring","useEffect","tabLeft","spacerWidth","style","jsx","animated","classnames","jsxs"],"mappings":";;;;;;AAsBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AACF,MAAM;AACJ,QAAMC,IAAeC,EAAuB,IAAI,GAC1CC,IAAYD,EAAuB,IAAI,GACvC,CAACE,GAAYC,CAAc,IAAIC,EAAA,GAE/B,CAAC,EAAE,YAAAC,EAAA,GAAcC,CAAS,IAAIC,EAAU,OAAO;AAAA,IACnD,MAAM,EAAE,YAAY,EAAA;AAAA,EAAE,EACtB;AAEF,EAAAC,EAAU,MAAM;AACd,QAAI,CAACL,GAAgB;AACnB;AAGF,UAAMM,IAAUN,EAAe,QAAQ,sBAAA,EAAwB,MACzDE,IAAaN,EAAa,QAAS,YACnCW,IAAcT,EAAU,QAAS;AAEvC,IAAAK,EAAU,MAAM;AAAA,MACd,IAAI;AAAA,QACF,YAAYD,IAAaI,IAAUC;AAAA,MAAA;AAAA,IACrC,CACD;AAAA,EACH,GAAG,CAACL,GAAYF,GAAgBG,CAAS,CAAC;AAE1C,QAAMK,IAAQ,EAAE,gBAAgBT,EAAA;AAEhC,SACE,gBAAAU;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAKd;AAAA,MACL,aAAU;AAAA,MACV,WAAWe;AAAA,QACT;AAAA,QACAlB;AAAA,MAAA;AAAA,MAEF,YAAAS;AAAA,MAEA,UAAA,gBAAAU,EAAC,SAAI,MAAK,WAAU,WAAWD,EAAW,eAAe,GAAG,OAAAH,GAC1D,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKX;AAAA,YACL,WAAWa,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC;AAAA,QACD,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE,EAAW,YAAY;AAAA,cAChC,0FACE,CAACjB;AAAA,YAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Tabs/TabPanel.d.ts

@@ -1,4 +1,4 @@
-import { type FunctionComponent, type PropsWithChildren } from 'react';
+import { FunctionComponent, PropsWithChildren } from 'react';
 interface Props {
     className?: string;
     /**

package/molecules/Tabs/TabPanel.js

@@ -2,13 +2,13 @@
 import { jsx as p } from "react/jsx-runtime";
 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 { useSpring as l, animated as h } from "@react-spring/web";
 import { useTabsUid as T, useActiveTab as g } from "./hooks/tabControl.js";
-const i = {
+const n = {
   opacity: 0,
   pointerEvents: "none",
   height: 0
-}, n = {
+}, i = {
   opacity: 1,
   pointerEvents: "auto",
   height: "auto"
@@ -18,35 +18,35 @@ const i = {
   onSelect: a,
   children: m
 }) => {
-  const o = T(), s = b(!1), t = g() === e, [d, r] = h(() => ({
-    from: t ? n : i
+  const r = T(), s = b(!1), t = g() === e, [d, o] = l(() => ({
+    from: t ? i : n
   }));
   return f(() => {
     if (!s.current) {
       s.current = !0;
       return;
     }
-    r.start({
+    o.start({
       to: {
-        ...t ? n : i,
+        ...t ? i : n,
         height: "auto"
       },
       onRest: () => {
-        r.start({
+        o.start({
           to: { height: t ? "auto" : 0 },
           immediate: !0
         });
       }
-    }), t && (a == null || a({ value: e }));
-  }, [t, r, e, a]), /* @__PURE__ */ p(
-    l.div,
+    }), t && a?.({ value: e });
+  }, [t, o, e, a]), /* @__PURE__ */ p(
+    h.div,
     {
       style: d,
-      id: `TabPanel_${e}_${o}`,
+      id: `TabPanel_${e}_${r}`,
       "data-name": `TabPanel_${e}`,
       role: "tabpanel",
       "aria-hidden": !t,
-      "aria-labelledby": `Tab_${e}_${o}`,
+      "aria-labelledby": `Tab_${e}_${r}`,
       tabIndex: t ? 0 : -1,
       className: u(c, "col-start-1 col-end-1 row-start-1 row-end-1", {
         "z-0": !t,

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, 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,EAAA,GACNC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,EAAA,MACaT,GAE3B,CAACU,GAAOC,CAAQ,IAAIC,EAAoB,OAAO;AAAA,IACnD,MAAMJ,IAAWV,IAAKD;AAAA,EAAA,EACtB;AAEF,SAAAgB,EAAU,MAAM;AACd,QAAI,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,MAAA;AAAA,MAEV,QAAQ,MAAM;AACZ,QAAAc,EAAS,MAAM;AAAA,UACb,IAAI,EAAE,QAAQH,IAAW,SAAS,EAAA;AAAA,UAClC,WAAW;AAAA,QAAA,CACZ;AAAA,MACH;AAAA,IAAA,CACD,GAEGA,MACFN,KAAA,QAAAA,EAAW,EAAE,OAAAF;EAEjB,GAAG,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;"}
+{"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,EAAA,GACNC,IAAUC,EAAO,EAAK,GAEtBC,IADcC,EAAA,MACaT,GAE3B,CAACU,GAAOC,CAAQ,IAAIC,EAAoB,OAAO;AAAA,IACnD,MAAMJ,IAAWV,IAAKD;AAAA,EAAA,EACtB;AAEF,SAAAgB,EAAU,MAAM;AACd,QAAI,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,MAAA;AAAA,MAEV,QAAQ,MAAM;AACZ,QAAAc,EAAS,MAAM;AAAA,UACb,IAAI,EAAE,QAAQH,IAAW,SAAS,EAAA;AAAA,UAClC,WAAW;AAAA,QAAA,CACZ;AAAA,MACH;AAAA,IAAA,CACD,GAEGA,KACFN,IAAW,EAAE,OAAAF,GAAO;AAAA,EAExB,GAAG,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.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';
+import { ComponentProps, FunctionComponent, PropsWithChildren } from 'react';
 import { TabsProvider } from './context/TabControl';
 type ProviderProps = ComponentProps<typeof TabsProvider>;
 interface Props extends ProviderProps {

package/molecules/Tabs/TabsBody.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, PropsWithChildren } from 'react';
+import { FunctionComponent, PropsWithChildren } from 'react';
 interface Props {
     className?: string;
 }

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

@@ -1,4 +1,4 @@
-import { type Dispatch, type PropsWithChildren, type RefObject } from 'react';
+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 = {
@@ -34,7 +34,7 @@ interface TabControl<T extends HTMLElement = HTMLElement> extends TabsState<T> {
     register: (value: number, ref: RefTab<T>) => void;
     unregister: (value: number) => void;
 }
-export declare const TabControlContext: import("react").Context<TabControl<HTMLElement>>;
+export declare const TabControlContext: import('react').Context<TabControl<HTMLElement>>;
 export interface TabsProviderProps {
     selected?: number;
     /**

package/molecules/Tabs/hooks/tabControl.d.ts

@@ -1,6 +1,6 @@
-import { type RefObject } from 'react';
+import { RefObject } from 'react';
 export declare const useActiveTab: () => number;
-export declare const useTabDispatch: () => import("react").Dispatch<{
+export declare const useTabDispatch: () => import('react').Dispatch<{
     type: "update";
     payload: number;
 } | {
@@ -9,7 +9,7 @@ export declare const useTabDispatch: () => import("react").Dispatch<{
         value: number;
     };
 } | {
-    type: "start" | "end" | "next" | "previous";
+    type: "start" | "end" | "previous" | "next";
 } | {
     type: "register";
     payload: {
@@ -22,7 +22,7 @@ interface Props<T extends HTMLElement> {
     value: number;
     ref: RefObject<T>;
 }
-export declare function useRegisterTabControl<T extends HTMLElement>({ value, ref }: Props<T>): import("react").Dispatch<{
+export declare function useRegisterTabControl<T extends HTMLElement>({ value, ref }: Props<T>): import('react').Dispatch<{
     type: "update";
     payload: number;
 } | {
@@ -31,7 +31,7 @@ export declare function useRegisterTabControl<T extends HTMLElement>({ value, re
         value: number;
     };
 } | {
-    type: "start" | "end" | "next" | "previous";
+    type: "start" | "end" | "previous" | "next";
 } | {
     type: "register";
     payload: {

package/molecules/Tag.d.ts

@@ -1,7 +1,7 @@
-import { type IconicNames } from '@clubmed/trident-icons';
-import type { FunctionComponent } from 'react';
-import { type BgColor, type BorderColor, type TextColor } from '../helpers/colors/colors.js';
-import type { LiteralUnion } from '../types/LiteralUnion';
+import { IconicNames } from '@clubmed/trident-icons';
+import { FunctionComponent } from 'react';
+import { BgColor, BorderColor, TextColor } from '../helpers/colors/colors.js';
+import { LiteralUnion } from '../types/LiteralUnion';
 export interface TagProps {
     /**
      * Additional class names

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.3.0-beta.11",
+  "version": "1.3.0-beta.13",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -46,16 +46,16 @@
       "import": "./molecules/Tabs/index.js",
       "default": "./molecules/Tabs/index.js"
     },
-    "./molecules/Forms/Password": {
-      "types": "./molecules/Forms/Password/index.d.ts",
-      "import": "./molecules/Forms/Password/index.js",
-      "default": "./molecules/Forms/Password/index.js"
-    },
     "./molecules/Forms/Checkboxes": {
       "types": "./molecules/Forms/Checkboxes/index.d.ts",
       "import": "./molecules/Forms/Checkboxes/index.js",
       "default": "./molecules/Forms/Checkboxes/index.js"
     },
+    "./molecules/Forms/Password": {
+      "types": "./molecules/Forms/Password/index.d.ts",
+      "import": "./molecules/Forms/Password/index.js",
+      "default": "./molecules/Forms/Password/index.js"
+    },
     "./molecules/Forms/Radios": {
       "types": "./molecules/Forms/Radios/index.d.ts",
       "import": "./molecules/Forms/Radios/index.js",
@@ -109,86 +109,84 @@
   "dependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@use-gesture/react": "^10.2.26",
-    "@whitespace/storybook-addon-html": "6.0.5",
-    "build": "^0.1.4",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "react-day-picker": "^8.10.0",
     "react-hot-toast": "^2.4.1",
     "react-use-measure": "^2.1.1",
-    "run": "^1.5.0",
     "use-boop": "^1.1.1",
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
-    "@react-spring/web": "^9.7.3",
-    "@clubmed/trident-icons": ">=1.0.1",
+    "@clubmed/trident-icons": ">=1.3.3",
     "@commitlint/cli": "18.6.1",
     "@commitlint/config-conventional": "18.6.2",
-    "@netsells/storybook-mockdate": "^0.3.2",
-    "@storybook/addon-a11y": "8.3.5",
-    "@storybook/addon-actions": "8.3.5",
-    "@storybook/addon-essentials": "8.3.5",
-    "@storybook/addon-interactions": "8.3.5",
-    "@storybook/addon-links": "8.3.5",
-    "@storybook/addon-mdx-gfm": "8.3.5",
-    "@storybook/addon-styling": "1.3.7",
-    "@storybook/addon-viewport": "8.3.5",
-    "@storybook/blocks": "8.3.5",
-    "@storybook/react": "8.3.5",
-    "@storybook/react-vite": "8.3.5",
-    "@storybook/test": "8.3.5",
+    "@netsells/storybook-mockdate": "0.3.3",
+    "@react-spring/web": "^9.7.3",
+    "@storybook/addon-a11y": "9.1.1",
+    "@storybook/addon-docs": "9.1.1",
+    "@storybook/addon-links": "9.1.1",
+    "@storybook/addon-onboarding": "9.1.1",
+    "@storybook/addon-themes": "9.1.1",
+    "@storybook/addon-vitest": "^9.1.1",
+    "@storybook/react-vite": "9.1.1",
     "@svgr/rollup": "8.1.0",
     "@testing-library/jest-dom": "^6.3.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/fs-extra": "^11.0.4",
     "@types/picomatch": "^2.3.3",
+    "@types/lodash": "^4.17.20",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "2.1.2",
+    "@vitejs/plugin-react-swc": "^4.0.0",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
     "add": "^2.0.6",
     "autoprefixer": "^10.4.17",
     "change-case": "^5.4.3",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "9.1.0",
+    "eslint-formatter-gitlab": "5.1.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^9.1.1",
     "figures": "^6.1.0",
     "fs-extra": "^11.2.0",
     "globby": "^14.0.1",
     "husky": "^9.0.11",
+    "jest-axe": "^10.0.0",
     "jsdom": "^22.1.0",
     "lint-staged": "^15.2.2",
     "picomatch": "^4.0.1",
+    "playwright": "^1.54.2",
     "postcss": "^8.4.32",
     "prettier": "3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "rollup-preserve-directives": "^1.1.1",
-    "storybook": "8.3.5",
+    "storybook": "9.1.1",
     "svgtofont": "^4.2.0",
     "tailwindcss": "^3.3.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
-    "vite": "5.4.8",
-    "vite-plugin-dts": "^3.6.4",
-    "vite-plugin-static-copy": "1.0.1",
-    "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^2.1.2"
+    "vite": "7.1.1",
+    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-static-copy": "3.1.1",
+    "vite-plugin-svgr": "4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "3.2.4"
   },
   "peerDependencies": {
+    "@clubmed/trident-icons": ">=1.3.3",
+    "@react-spring/web": ">=9",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
-    "tailwindcss": ">=3.3.5",
-    "@clubmed/trident-icons": ">=1.0.1",
-    "@react-spring/web": ">=9"
+    "tailwindcss": ">=3.3.5"
   },
   "peerDependenciesMeta": {
     "@clubmed/trident-icons": {

package/tailwind/plugins/animationDelay.d.ts

@@ -1,4 +1,4 @@
 export declare const animationDelay: {
-    handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+    handler: import('tailwindcss/types/config').PluginCreator;
+    config?: Partial<import('tailwindcss/types/config').Config>;
 };

package/tailwind/plugins/hocus.d.ts

@@ -1,4 +1,4 @@
 export declare const hocus: {
-    handler: import("tailwindcss/types/config").PluginCreator;
-    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+    handler: import('tailwindcss/types/config').PluginCreator;
+    config?: Partial<import('tailwindcss/types/config').Config>;
 };