@clubmed/trident-ui 1.3.0-beta.9 → 1.3.0-rc.2

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

@@ -0,0 +1,43 @@
+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
+     */
+    className?: string;
+    /**
+     * Background color
+     */
+    backgroundColor?: LiteralUnion<BgColor>;
+    /**
+     * Text color
+     */
+    color?: LiteralUnion<TextColor>;
+    /**
+     * Border color
+     */
+    border?: LiteralUnion<BorderColor>;
+    /**
+     * Optional icon name
+     */
+    icon?: IconicNames;
+    /**
+     * Tag label
+     */
+    label?: string;
+    /**
+     * theme mode
+     */
+    theme?: 'icon' | 'label' | 'both' | 'swap' | 'unfold' | 'monogram' | 'pill' | 'none';
+    /**
+     * Icon class name
+     */
+    iconClassName?: string;
+    /**
+     * Label class name
+     */
+    labelClassName?: string;
+}
+export declare const Tag: FunctionComponent<TagProps>;

package/molecules/Tag.js

@@ -0,0 +1,73 @@
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { Icon as C } from "@clubmed/trident-icons";
+import { c as n } from "../chunks/index.js";
+import { getBorderColor as y, getBgColor as N, getTextColor as j } from "../helpers/colors/colors.js";
+const z = ({
+  className: i,
+  backgroundColor: l = "saffron",
+  border: m = l,
+  color: c = "black",
+  icon: t,
+  label: e = "",
+  theme: r = "both",
+  iconClassName: d,
+  labelClassName: b
+}) => {
+  if (!e && !t)
+    return null;
+  const h = y(m), f = N(l), x = j(c), a = !!t, o = r === "both" && !a ? "label" : r, p = o === "both" || o === "swap" || o === "unfold" || o === "none", g = a && (o === "icon" || p), w = o === "label" || o === "pill" || p;
+  return /* @__PURE__ */ u(
+    "span",
+    {
+      "data-name": "Tag",
+      className: n(
+        "box-border inline-flex items-center justify-center gap-x-4 whitespace-nowrap rounded-pill border align-middle font-sans font-semibold",
+        {
+          "text-b4": o !== "pill",
+          "text-b5": o === "pill"
+        },
+        {
+          "p-4": o !== "label" && o !== "both",
+          "px-16 py-6": o === "label",
+          "py-4 pe-16 ps-12": o === "both",
+          "px-8 py-4": o === "pill",
+          "sm:px-16": o === "swap",
+          "sm:pe-16 sm:ps-12": o === "unfold"
+        },
+        h,
+        f,
+        x,
+        i
+      ),
+      title: e,
+      role: "note",
+      children: [
+        o === "monogram" && /* @__PURE__ */ s("span", { className: "size-24 text-center leading-[1.5rem]", children: e }),
+        g && /* @__PURE__ */ s(
+          C,
+          {
+            width: "1.5rem",
+            name: t,
+            className: n({ "sm:hidden": o === "swap" }, d)
+          }
+        ),
+        w && /* @__PURE__ */ s(
+          "span",
+          {
+            className: n(
+              {
+                "hidden sm:block": o === "swap" || o === "unfold"
+              },
+              b
+            ),
+            children: e
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  z as Tag
+};
+//# sourceMappingURL=Tag.js.map

package/molecules/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../lib/molecules/Tag.tsx"],"sourcesContent":["import { Icon, type IconicNames } from '@clubmed/trident-icons';\nimport classNames from 'classnames';\nimport type { FunctionComponent } from 'react';\n\nimport {\n  type BgColor,\n  type BorderColor,\n  getBgColor,\n  getBorderColor,\n  getTextColor,\n  type TextColor,\n} from '@/helpers/colors/colors.js';\nimport type { LiteralUnion } from '@/types/LiteralUnion';\n\nexport interface TagProps {\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Background color\n   */\n  backgroundColor?: LiteralUnion<BgColor>;\n  /**\n   * Text color\n   */\n  color?: LiteralUnion<TextColor>;\n  /**\n   * Border color\n   */\n  border?: LiteralUnion<BorderColor>;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Tag label\n   */\n  label?: string;\n  /**\n   * theme mode\n   */\n  theme?: 'icon' | 'label' | 'both' | 'swap' | 'unfold' | 'monogram' | 'pill' | 'none';\n  /**\n   * Icon class name\n   */\n  iconClassName?: string;\n  /**\n   * Label class name\n   */\n  labelClassName?: string;\n}\n\nexport const Tag: FunctionComponent<TagProps> = ({\n  className,\n  backgroundColor = 'saffron',\n  border = backgroundColor,\n  color = 'black',\n  icon,\n  label = '',\n  theme = 'both',\n  iconClassName,\n  labelClassName,\n}) => {\n  if (!label && !icon) {\n    return null;\n  }\n\n  const borderColor = getBorderColor(border);\n  const bgColor = getBgColor(backgroundColor);\n  const textColor = getTextColor(color);\n\n  const hasIcon = !!icon;\n  const mode = theme === 'both' && !hasIcon ? 'label' : theme;\n\n  const withBoth = mode === 'both' || mode === 'swap' || mode === 'unfold' || mode === 'none';\n  const withIcon = hasIcon && (mode === 'icon' || withBoth);\n  const withLabel = mode === 'label' || mode === 'pill' || withBoth;\n\n  return (\n    <span\n      data-name=\"Tag\"\n      className={classNames(\n        'box-border inline-flex items-center justify-center gap-x-4 whitespace-nowrap rounded-pill border align-middle font-sans font-semibold',\n        {\n          'text-b4': mode !== 'pill',\n          'text-b5': mode === 'pill',\n        },\n        {\n          'p-4': mode !== 'label' && mode !== 'both',\n          'px-16 py-6': mode === 'label',\n          'py-4 pe-16 ps-12': mode === 'both',\n          'px-8 py-4': mode === 'pill',\n          'sm:px-16': mode === 'swap',\n          'sm:pe-16 sm:ps-12': mode === 'unfold',\n        },\n        borderColor,\n        bgColor,\n        textColor,\n        className,\n      )}\n      title={label}\n      role=\"note\"\n    >\n      {mode === 'monogram' && <span className=\"size-24 text-center leading-[1.5rem]\">{label}</span>}\n      {withIcon && (\n        <Icon\n          width=\"1.5rem\"\n          name={icon}\n          className={classNames({ 'sm:hidden': mode === 'swap' }, iconClassName)}\n        />\n      )}\n      {withLabel && (\n        <span\n          className={classNames(\n            {\n              'hidden sm:block': mode === 'swap' || mode === 'unfold',\n            },\n            labelClassName,\n          )}\n        >\n          {label}\n        </span>\n      )}\n    </span>\n  );\n};\n"],"names":["Tag","className","backgroundColor","border","color","icon","label","theme","iconClassName","labelClassName","borderColor","getBorderColor","bgColor","getBgColor","textColor","getTextColor","hasIcon","mode","withBoth","withIcon","withLabel","jsxs","classNames","jsx","Icon"],"mappings":";;;;AAqDO,MAAMA,IAAmC,CAAC;AAAA,EAC/C,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAASD;AAAA,EACT,OAAAE,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,eAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACJ,MAAI,CAACH,KAAS,CAACD;AACb,WAAO;AAGT,QAAMK,IAAcC,EAAeR,CAAM,GACnCS,IAAUC,EAAWX,CAAe,GACpCY,IAAYC,EAAaX,CAAK,GAE9BY,IAAU,CAAC,CAACX,GACZY,IAAOV,MAAU,UAAU,CAACS,IAAU,UAAUT,GAEhDW,IAAWD,MAAS,UAAUA,MAAS,UAAUA,MAAS,YAAYA,MAAS,QAC/EE,IAAWH,MAAYC,MAAS,UAAUC,IAC1CE,IAAYH,MAAS,WAAWA,MAAS,UAAUC;AAEzD,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAAA,QACT;AAAA,QACA;AAAA,UACE,WAAWL,MAAS;AAAA,UACpB,WAAWA,MAAS;AAAA,QAAA;AAAA,QAEtB;AAAA,UACE,OAAOA,MAAS,WAAWA,MAAS;AAAA,UACpC,cAAcA,MAAS;AAAA,UACvB,oBAAoBA,MAAS;AAAA,UAC7B,aAAaA,MAAS;AAAA,UACtB,YAAYA,MAAS;AAAA,UACrB,qBAAqBA,MAAS;AAAA,QAAA;AAAA,QAEhCP;AAAA,QACAE;AAAA,QACAE;AAAA,QACAb;AAAA,MAAA;AAAA,MAEF,OAAOK;AAAA,MACP,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAW,MAAS,cAAc,gBAAAM,EAAC,QAAA,EAAK,WAAU,wCAAwC,UAAAjB,GAAM;AAAA,QACrFa,KACC,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAMnB;AAAA,YACN,WAAWiB,EAAW,EAAE,aAAaL,MAAS,OAAA,GAAUT,CAAa;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxEY,KACC,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAAA,cACT;AAAA,gBACE,mBAAmBL,MAAS,UAAUA,MAAS;AAAA,cAAA;AAAA,cAEjDR;AAAA,YAAA;AAAA,YAGD,UAAAH;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.3.0-beta.9",
+  "version": "1.3.0-rc.2",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -51,16 +51,16 @@
       "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",
       "default": "./molecules/Forms/Radios/index.js"
     },
+    "./molecules/Forms/Password": {
+      "types": "./molecules/Forms/Password/index.d.ts",
+      "import": "./molecules/Forms/Password/index.js",
+      "default": "./molecules/Forms/Password/index.js"
+    },
     "./fonts/*": "./fonts/*",
     "./atoms/*": {
       "types": "./atoms/*.d.ts",
@@ -82,10 +82,15 @@
       "import": "./hooks/*.js",
       "default": "./hooks/*.js"
     },
-    "./tests/*": {
-      "types": "./tests/*.d.ts",
-      "import": "./tests/*.js",
-      "default": "./tests/*.js"
+    "./types/*": {
+      "types": "./types/*.d.ts",
+      "import": "./types/*.js",
+      "default": "./types/*.js"
+    },
+    "./utils/*": {
+      "types": "./utils/*.d.ts",
+      "import": "./utils/*.js",
+      "default": "./utils/*.js"
     }
   },
   "scripts": {
@@ -104,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/styles/index.css

@@ -1,4 +1,4 @@
 /* This file is used to import all the stylesheets */
 @import './globals.css';
 /* do not remove the line below */
-@import '../assets/style.css';
+@import '../assets/trident-ui.css';

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>;
 };

package/tailwind/plugins/lineClampFix.d.ts

@@ -1,4 +1,4 @@
 export declare const lineClampSafariFix: {
-    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/popover.d.ts

@@ -1,4 +1,4 @@
 export declare const popover: {
-    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/startingStyle.d.ts

@@ -1,4 +1,4 @@
 export declare const startingStyle: {
-    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/transitionBehavior.d.ts

@@ -1,4 +1,4 @@
 export declare const transitionBehavior: {
-    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>;
 };