@clubmed/trident-ui 1.3.0-beta.8 → 1.3.0-rc.1

package/molecules/Chip.js

@@ -0,0 +1,31 @@
+import { jsx as a } from "react/jsx-runtime";
+import { c as m } from "../chunks/index.js";
+import { getTheme as c } from "./Chip.themes.js";
+const f = ({
+  className: e,
+  color: s = "sienna",
+  size: r = "size-32",
+  theme: o = "solid",
+  children: t,
+  ...n
+}) => {
+  const { thRoot: i } = c(o, { color: s });
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      ...n,
+      className: m(
+        "inline-flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full border",
+        r,
+        i,
+        e
+      ),
+      "data-name": "Chip",
+      children: t
+    }
+  );
+};
+export {
+  f as Chip
+};
+//# sourceMappingURL=Chip.js.map

package/molecules/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../lib/molecules/Chip.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nimport { getTheme, type Theme } from './Chip.themes';\n\nimport type { Colors } from '@/types/Colors';\n\nexport interface ChipProps extends ComponentPropsWithoutRef<'span'> {\n  color?: Colors;\n  size?: string;\n  theme?: Theme;\n}\n\nexport const Chip = ({\n  className,\n  color = 'sienna',\n  size = 'size-32',\n  theme = 'solid',\n  children,\n  ...attrs\n}: ChipProps) => {\n  const { thRoot } = getTheme(theme, { color });\n\n  return (\n    <span\n      {...attrs}\n      className={classNames(\n        'inline-flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full border',\n        size,\n        thRoot,\n        className,\n      )}\n      data-name=\"Chip\"\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["Chip","className","color","size","theme","children","attrs","thRoot","getTheme","jsx","classNames"],"mappings":";;;AAaO,MAAMA,IAAO,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,GAAGC;AACL,MAAiB;AACf,QAAM,EAAE,QAAAC,EAAA,IAAWC,EAASJ,GAAO,EAAE,OAAAF,GAAO;AAE5C,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGH;AAAA,MACJ,WAAWI;AAAAA,QACT;AAAA,QACAP;AAAA,QACAI;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,aAAU;AAAA,MAET,UAAAI;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/molecules/Chip.themes.d.ts

@@ -0,0 +1,12 @@
+import { Colors } from '../types/Colors';
+export type Theme = 'solid' | 'outline' | 'light' | 'dark';
+type Options = {
+    color: Colors;
+};
+export declare const themes: (color: Colors) => Record<Theme, {
+    thRoot: string;
+}>;
+export declare const getTheme: (theme: Theme, { color }: Options) => {
+    thRoot: string;
+};
+export {};

package/molecules/Chip.themes.js

@@ -0,0 +1,24 @@
+import { c as e } from "../chunks/index.js";
+import { getBorderColor as r, getTextColor as n, getBgColor as g, getComplementaryTextColor as i } from "../helpers/colors/colors.js";
+const l = (t) => ({
+  solid: {
+    thRoot: e(g(t), r(t), i(t))
+  },
+  outline: {
+    thRoot: e("bg-transparent", r(t), n(t))
+  },
+  light: {
+    thRoot: e("bg-lightSand text-black border-lightSand")
+  },
+  dark: {
+    thRoot: e("bg-ultramarine text-white border-ultramarine")
+  }
+}), h = (t, { color: a }) => {
+  const o = l(a);
+  return o[t] || o.solid;
+};
+export {
+  h as getTheme,
+  l as themes
+};
+//# sourceMappingURL=Chip.themes.js.map

package/molecules/Chip.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.themes.js","sources":["../../lib/molecules/Chip.themes.ts"],"sourcesContent":["import classnames from 'classnames';\nimport type { Colors } from '@/types/Colors';\nimport {\n  getBgColor,\n  getBorderColor,\n  getComplementaryTextColor,\n  getTextColor,\n} from '@/helpers/colors/colors';\n\nexport type Theme = 'solid' | 'outline' | 'light' | 'dark';\n\ntype Options = { color: Colors };\n\nexport const themes = (color: Colors): Record<Theme, { thRoot: string }> => ({\n  solid: {\n    thRoot: classnames(getBgColor(color), getBorderColor(color), getComplementaryTextColor(color)),\n  },\n  outline: {\n    thRoot: classnames('bg-transparent', getBorderColor(color), getTextColor(color)),\n  },\n  light: {\n    thRoot: classnames('bg-lightSand text-black border-lightSand'),\n  },\n  dark: {\n    thRoot: classnames('bg-ultramarine text-white border-ultramarine'),\n  },\n});\n\nexport const getTheme = (theme: Theme, { color }: Options) => {\n  const THEMES = themes(color);\n\n  return THEMES[theme] || THEMES.solid;\n};\n"],"names":["themes","color","classnames","getBgColor","getBorderColor","getComplementaryTextColor","getTextColor","getTheme","theme","THEMES"],"mappings":";;AAaO,MAAMA,IAAS,CAACC,OAAsD;AAAA,EAC3E,OAAO;AAAA,IACL,QAAQC,EAAWC,EAAWF,CAAK,GAAGG,EAAeH,CAAK,GAAGI,EAA0BJ,CAAK,CAAC;AAAA,EAAA;AAAA,EAE/F,SAAS;AAAA,IACP,QAAQC,EAAW,kBAAkBE,EAAeH,CAAK,GAAGK,EAAaL,CAAK,CAAC;AAAA,EAAA;AAAA,EAEjF,OAAO;AAAA,IACL,QAAQC,EAAW,0CAA0C;AAAA,EAAA;AAAA,EAE/D,MAAM;AAAA,IACJ,QAAQA,EAAW,8CAA8C;AAAA,EAAA;AAErE,IAEaK,IAAW,CAACC,GAAc,EAAE,OAAAP,QAAqB;AAC5D,QAAMQ,IAAST,EAAOC,CAAK;AAE3B,SAAOQ,EAAOD,CAAK,KAAKC,EAAO;AACjC;"}

package/molecules/ElasticHeight.d.ts

@@ -1,29 +1,8 @@
-import { type FunctionComponent, type PropsWithChildren } from 'react';
-/**
- * This is not a Collapse component, it's a component that animates *to* the height of its children.
- * It does the *absolute* same but you Bring Your Own Height™ by applying a class to the children.
- * e.g.: <ElasticHeight className={isOpen ? "" : "h-0"}><div>...</div></ElasticHeight>
- * ID is there for accessibility purposes.
- *
- * This is in no way affiliated with Amazon ElasticSearch.
- */
-interface ElasticHeightProps {
-    /**
-     * Id of the element
-     */
-    id?: string;
-    /**
-     * Class of the element (please provide something that sets the height)
-     */
-    className?: string;
-    /**
-     * Class of the container (to avoid CLS, mainly)
-     */
-    containerClassName?: string;
-    /**
-     * Role of the element
-     */
-    role?: string;
+import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+interface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {
+    innerClassName?: string;
+    isExpanded?: boolean;
+    min?: number;
 }
-export declare const ElasticHeight: FunctionComponent<PropsWithChildren<ElasticHeightProps>>;
+export declare const ElasticHeight: FunctionComponent<ElasticHeightProps>;
 export {};

package/molecules/ElasticHeight.js

@@ -1,42 +1,36 @@
+"use client";
 import { jsx as s } from "react/jsx-runtime";
-import { useResize as l, useSpring as h, animated as p } from "@react-spring/web";
-import { c as d } from "../chunks/index.js";
-import { useRef as u, useEffect as g } from "react";
-const r = (t) => t, R = ({
-  children: t,
-  id: n,
-  className: a,
-  role: c,
-  containerClassName: m
+import { c as u } from "../chunks/index.js";
+import { useRef as l, useState as m, useLayoutEffect as d } from "react";
+import h from "../hooks/useResizeObserver.js";
+const H = ({
+  className: i,
+  children: o,
+  innerClassName: a,
+  isExpanded: t = !1,
+  min: n = 0,
+  ...f
 }) => {
-  const i = u(null), { height: e } = l({ container: i }), [f, o] = h(() => ({
-    from: {
-      height: e.to(r)
-    },
-    immediate: !0
-  }));
-  return g(() => {
-    o.start({
-      to: {
-        height: e.to(r)
-      },
-      config: {
-        tension: 170,
-        friction: 26
-      }
-    });
-  }, [o, e]), /* @__PURE__ */ s(
-    p.div,
+  const e = l(null), [c, r] = m(0);
+  return h({
+    ref: e,
+    onResize: () => {
+      e.current && r(e.current?.offsetHeight);
+    }
+  }), d(() => {
+    e.current && r(e.current.offsetHeight);
+  }, [e]), /* @__PURE__ */ s(
+    "div",
     {
-      role: c,
-      className: d("overflow-hidden", m),
-      style: { ...f },
-      id: n,
-      children: /* @__PURE__ */ s("div", { className: a, ref: i, children: t })
+      ...f,
+      className: u("overflow-hidden transition-all duration-500", i),
+      "data-expanded": t,
+      style: { height: t ? c : n },
+      children: /* @__PURE__ */ s("div", { className: a, ref: e, children: o })
     }
   );
 };
 export {
-  R as ElasticHeight
+  H as ElasticHeight
 };
 //# sourceMappingURL=ElasticHeight.js.map

package/molecules/ElasticHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElasticHeight.js","sources":["../../lib/molecules/ElasticHeight.tsx"],"sourcesContent":["import { useSpring, animated, useResize } from '@react-spring/web';\nimport classnames from 'classnames';\nimport {\n  type FunctionComponent,\n  type MutableRefObject,\n  type PropsWithChildren,\n  useEffect,\n  useRef,\n} from 'react';\n\n/**\n * This is not a Collapse component, it's a component that animates *to* the height of its children.\n * It does the *absolute* same but you Bring Your Own Height™ by applying a class to the children.\n * e.g.: <ElasticHeight className={isOpen ? \"\" : \"h-0\"}><div>...</div></ElasticHeight>\n * ID is there for accessibility purposes.\n *\n * This is in no way affiliated with Amazon ElasticSearch.\n */\n\ninterface ElasticHeightProps {\n  /**\n   * Id of the element\n   */\n  id?: string;\n  /**\n   * Class of the element (please provide something that sets the height)\n   */\n  className?: string;\n  /**\n   * Class of the container (to avoid CLS, mainly)\n   */\n  containerClassName?: string;\n  /**\n   * Role of the element\n   */\n  role?: string;\n}\n\nconst linearInterpolation = (x: number) => x;\n\nexport const ElasticHeight: FunctionComponent<PropsWithChildren<ElasticHeightProps>> = ({\n  children,\n  id,\n  className,\n  role,\n  containerClassName,\n}) => {\n  const ref = useRef<HTMLDivElement>(null) as MutableRefObject<HTMLDivElement>;\n  const { height } = useResize({ container: ref });\n\n  const [styles, api] = useSpring(() => ({\n    from: {\n      height: height.to(linearInterpolation),\n    },\n    immediate: true,\n  }));\n\n  useEffect(() => {\n    api.start({\n      to: {\n        height: height.to(linearInterpolation),\n      },\n      config: {\n        tension: 170,\n        friction: 26,\n      },\n    });\n  }, [api, height]);\n\n  return (\n    <animated.div\n      role={role}\n      className={classnames('overflow-hidden', containerClassName)}\n      style={{ ...styles }}\n      id={id}\n    >\n      <div className={className} ref={ref}>\n        {children}\n      </div>\n    </animated.div>\n  );\n};\n"],"names":["linearInterpolation","x","ElasticHeight","children","id","className","role","containerClassName","ref","useRef","height","useResize","styles","api","useSpring","useEffect","jsx","animated","classnames"],"mappings":";;;;AAsCA,MAAMA,IAAsB,CAACC,MAAcA,GAE9BC,IAA0E,CAAC;AAAA,EACtF,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,oBAAAC;AACF,MAAM;AACJ,QAAMC,IAAMC,EAAuB,IAAI,GACjC,EAAE,QAAAC,EAAA,IAAWC,EAAU,EAAE,WAAWH,GAAK,GAEzC,CAACI,GAAQC,CAAG,IAAIC,EAAU,OAAO;AAAA,IACrC,MAAM;AAAA,MACJ,QAAQJ,EAAO,GAAGV,CAAmB;AAAA,IAAA;AAAA,IAEvC,WAAW;AAAA,EAAA,EACX;AAEF,SAAAe,EAAU,MAAM;AACd,IAAAF,EAAI,MAAM;AAAA,MACR,IAAI;AAAA,QACF,QAAQH,EAAO,GAAGV,CAAmB;AAAA,MAAA;AAAA,MAEvC,QAAQ;AAAA,QACN,SAAS;AAAA,QACT,UAAU;AAAA,MAAA;AAAA,IACZ,CACD;AAAA,EACH,GAAG,CAACa,GAAKH,CAAM,CAAC,GAGd,gBAAAM;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,MAAAX;AAAA,MACA,WAAWY,EAAW,mBAAmBX,CAAkB;AAAA,MAC3D,OAAO,EAAE,GAAGK,EAAA;AAAA,MACZ,IAAAR;AAAA,MAEA,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAAX,GAAsB,KAAAG,GACxB,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ElasticHeight.js","sources":["../../lib/molecules/ElasticHeight.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport {\n  type ComponentPropsWithoutRef,\n  type FunctionComponent,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport useResizeObserver from '@/hooks/useResizeObserver';\n\ninterface ElasticHeightProps extends ComponentPropsWithoutRef<'div'> {\n  innerClassName?: string;\n  isExpanded?: boolean;\n  min?: number;\n}\n\nexport const ElasticHeight: FunctionComponent<ElasticHeightProps> = ({\n  className,\n  children,\n  innerClassName,\n  isExpanded = false,\n  min = 0,\n  ...attrs\n}) => {\n  const ref = useRef<HTMLDivElement>(null as any);\n  const [max, setMax] = useState(0);\n\n  useResizeObserver<HTMLDivElement>({\n    ref: ref,\n    onResize: () => {\n      if (ref.current) {\n        setMax(ref.current?.offsetHeight);\n      }\n    },\n  });\n\n  useLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n    setMax(ref.current.offsetHeight);\n  }, [ref]);\n\n  return (\n    <div\n      {...attrs}\n      className={classnames('overflow-hidden transition-all duration-500', className)}\n      data-expanded={isExpanded}\n      style={{ height: isExpanded ? max : min }}\n    >\n      <div className={innerClassName} ref={ref}>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":["ElasticHeight","className","children","innerClassName","isExpanded","min","attrs","ref","useRef","max","setMax","useState","useResizeObserver","useLayoutEffect","jsx","classnames"],"mappings":";;;;;AAkBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,KAAAC,IAAM;AAAA,EACN,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMC,EAAuB,IAAW,GACxC,CAACC,GAAKC,CAAM,IAAIC,EAAS,CAAC;AAEhC,SAAAC,EAAkC;AAAA,IAChC,KAAAL;AAAA,IACA,UAAU,MAAM;AACd,MAAIA,EAAI,WACNG,EAAOH,EAAI,SAAS,YAAY;AAAA,IAEpC;AAAA,EAAA,CACD,GAEDM,EAAgB,MAAM;AACpB,IAAKN,EAAI,WAGTG,EAAOH,EAAI,QAAQ,YAAY;AAAA,EACjC,GAAG,CAACA,CAAG,CAAC,GAGN,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,WAAWS,EAAW,+CAA+Cd,CAAS;AAAA,MAC9E,iBAAeG;AAAA,MACf,OAAO,EAAE,QAAQA,IAAaK,IAAMJ,EAAA;AAAA,MAEpC,UAAA,gBAAAS,EAAC,OAAA,EAAI,WAAWX,GAAgB,KAAAI,GAC7B,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Forms/Checkboxes/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import type { FormControlProps } from '../FormControl';
+import { FormControlProps } from '../FormControl';
 export interface CheckboxProps<Value = string> extends FormControlProps<Value> {
     size?: number;
     onChange?: (name: string, value: Value | null) => void;

package/molecules/Forms/Checkboxes/Checkbox.js

@@ -1,76 +1,76 @@
-import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { c as o } from "../../../chunks/index.js";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { c as n } from "../../../chunks/index.js";
 import { useId as D } from "react";
 import { useValue as S } from "../../../hooks/useValue.js";
 /* empty css                       */
 import { useInternalStatus as V } from "../../../hooks/useInternalStatus.js";
-import { Icon as p } from "@clubmed/trident-icons";
-function A(u) {
-  const x = D(), {
-    id: s = x,
-    name: n = s,
-    className: f,
-    dataTestId: b,
+import { Icon as h } from "@clubmed/trident-icons";
+function A(p) {
+  const u = D(), {
+    id: s = u,
+    name: o = s,
+    className: x,
+    dataTestId: f,
     disabled: r = !1,
-    checked: k = !1,
+    checked: b = !1,
     value: l,
     size: i = 24,
-    tabIndex: v = 0,
-    validationStatus: N = "default",
-    errorMessage: d,
-    children: g,
-    onChange: c,
-    ...y
-  } = u, { value: m, setValue: I } = S({
-    name: n,
-    initialValue: k,
-    onChange(w, h) {
-      c == null || c(w, h ? l !== void 0 ? l : h : null);
+    tabIndex: k = 0,
+    validationStatus: g = "default",
+    errorMessage: c,
+    children: v,
+    onChange: C,
+    ...N
+  } = p, { value: d, setValue: y } = S({
+    name: o,
+    initialValue: b,
+    onChange(w, m) {
+      C?.(w, m ? l !== void 0 ? l : m : null);
     }
   }), e = V({
     isDisabled: r,
-    validationStatus: N
-  }), C = e === "error" && d;
-  return /* @__PURE__ */ t(
+    validationStatus: g
+  }), I = e === "error" && c;
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: o("flex flex-col space-y-2", f),
+      className: n("flex flex-col space-y-2", x),
       "data-testid": `checkbox-container-${s}`,
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           "label",
           {
-            className: o("cursor-pointer relative flex text-b3 items-center", {
+            className: n("cursor-pointer relative flex text-b3 items-center", {
               "text-grey": e === "disabled",
               "text-black": e !== "default"
             }),
             children: [
-              /* @__PURE__ */ t("span", { className: "relative self-start me-8", children: [
-                /* @__PURE__ */ a(
+              /* @__PURE__ */ a("span", { className: "relative self-start me-8", children: [
+                /* @__PURE__ */ t(
                   "input",
                   {
-                    ...y,
-                    name: n,
-                    "data-testid": b,
+                    ...N,
+                    name: o,
+                    "data-testid": f,
                     type: "checkbox",
-                    tabIndex: v,
+                    tabIndex: k,
                     onChange: () => {
-                      !r && I(!m);
+                      !r && y(!d);
                     },
-                    checked: m,
+                    checked: d,
                     "data-name": "Checkbox",
                     disabled: r,
                     value: l
                   }
                 ),
-                /* @__PURE__ */ a(
+                /* @__PURE__ */ t(
                   "span",
                   {
                     style: { height: i, width: i },
-                    className: o({ "!border-red": e === "error" }),
+                    className: n({ "!border-red": e === "error" }),
                     "data-testid": `check-container-${s}`,
-                    children: /* @__PURE__ */ a(
-                      p,
+                    children: /* @__PURE__ */ t(
+                      h,
                       {
                         name: "CheckDefault",
                         type: "svg",
@@ -82,13 +82,13 @@ function A(u) {
                   }
                 )
               ] }),
-              g
+              v
             ]
           }
         ),
-        C && /* @__PURE__ */ t("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
-          /* @__PURE__ */ a(p, { name: "Error", width: "20px" }),
-          d
+        I && /* @__PURE__ */ a("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
+          /* @__PURE__ */ t(h, { name: "Error", width: "20px" }),
+          c
         ] })
       ]
     }

package/molecules/Forms/Checkboxes/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../lib/molecules/Forms/Checkboxes/Checkbox.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface CheckboxProps<Value = string> extends FormControlProps<Value> {\n  size?: number;\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Checkbox<Value = string>(props: CheckboxProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    children,\n    onChange,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={classnames('flex flex-col space-y-2', className)}\n      data-testid={`checkbox-container-${id}`}\n    >\n      <label\n        className={classnames('cursor-pointer relative flex text-b3 items-center', {\n          'text-grey': internalStatus === 'disabled',\n          'text-black': internalStatus !== 'default',\n        })}\n      >\n        <span className=\"relative self-start me-8\">\n          <input\n            {...rest}\n            name={name}\n            data-testid={dataTestId}\n            type=\"checkbox\"\n            tabIndex={tabIndex}\n            onChange={() => {\n              !disabled && setValue(!checked);\n            }}\n            checked={checked}\n            data-name=\"Checkbox\"\n            disabled={disabled}\n            value={value as any}\n          />\n\n          <span\n            style={{ height: size, width: size }}\n            className={classnames({ '!border-red': internalStatus === 'error' })}\n            data-testid={`check-container-${id}`}\n          >\n            <Icon\n              name=\"CheckDefault\"\n              type=\"svg\"\n              width={`${size}px`}\n              color=\"black\"\n              className=\"absolute\"\n            />\n          </span>\n        </span>\n\n        {children}\n      </label>\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Checkbox","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","validationStatus","errorMessage","children","onChange","rest","checked","setValue","useValue","internalStatus","useInternalStatus","shouldDisplayErrorMessage","jsxs","classnames","jsx","Icon"],"mappings":";;;;;;;AAaO,SAASA,EAAyBC,GAA6B;AACpE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDhB,GAEE,EAAE,OAAOiB,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAf;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMa,GAAS;AACtB,MAAAF,KAAA,QAAAA,EAAWX,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB;AAAA,IAClF;AAAA,EAAA,CACD,GACKG,IAAiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAK;AAAA,EAAA,CACD,GAEKU,IAA4BF,MAAmB,WAAWP;AAEhE,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,2BAA2BnB,CAAS;AAAA,MAC1D,eAAa,sBAAsBF,CAAE;AAAA,MAErC,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,qDAAqD;AAAA,cACzE,aAAaJ,MAAmB;AAAA,cAChC,cAAcA,MAAmB;AAAA,YAAA,CAClC;AAAA,YAED,UAAA;AAAA,cAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BACd,UAAA;AAAA,gBAAA,gBAAAE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACE,GAAGT;AAAA,oBACJ,MAAAZ;AAAA,oBACA,eAAaE;AAAA,oBACb,MAAK;AAAA,oBACL,UAAAK;AAAA,oBACA,UAAU,MAAM;AACd,uBAACJ,KAAYW,EAAS,CAACD,CAAO;AAAA,oBAChC;AAAA,oBACA,SAAAA;AAAA,oBACA,aAAU;AAAA,oBACV,UAAAV;AAAA,oBACA,OAAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGF,gBAAAgB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO,EAAE,QAAQf,GAAM,OAAOA,EAAA;AAAA,oBAC9B,WAAWc,EAAW,EAAE,eAAeJ,MAAmB,SAAS;AAAA,oBACnE,eAAa,mBAAmBjB,CAAE;AAAA,oBAElC,UAAA,gBAAAsB;AAAA,sBAACC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,MAAK;AAAA,wBACL,OAAO,GAAGhB,CAAI;AAAA,wBACd,OAAM;AAAA,wBACN,WAAU;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACZ;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAECI;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFQ,KACC,gBAAAC,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/Bb;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../lib/molecules/Forms/Checkboxes/Checkbox.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface CheckboxProps<Value = string> extends FormControlProps<Value> {\n  size?: number;\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Checkbox<Value = string>(props: CheckboxProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    children,\n    onChange,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, checked ? ((value !== undefined ? value : checked) as Value) : null);\n    },\n  });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={classnames('flex flex-col space-y-2', className)}\n      data-testid={`checkbox-container-${id}`}\n    >\n      <label\n        className={classnames('cursor-pointer relative flex text-b3 items-center', {\n          'text-grey': internalStatus === 'disabled',\n          'text-black': internalStatus !== 'default',\n        })}\n      >\n        <span className=\"relative self-start me-8\">\n          <input\n            {...rest}\n            name={name}\n            data-testid={dataTestId}\n            type=\"checkbox\"\n            tabIndex={tabIndex}\n            onChange={() => {\n              !disabled && setValue(!checked);\n            }}\n            checked={checked}\n            data-name=\"Checkbox\"\n            disabled={disabled}\n            value={value as any}\n          />\n\n          <span\n            style={{ height: size, width: size }}\n            className={classnames({ '!border-red': internalStatus === 'error' })}\n            data-testid={`check-container-${id}`}\n          >\n            <Icon\n              name=\"CheckDefault\"\n              type=\"svg\"\n              width={`${size}px`}\n              color=\"black\"\n              className=\"absolute\"\n            />\n          </span>\n        </span>\n\n        {children}\n      </label>\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start space-x-4 ps-20\" role=\"alert\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"names":["Checkbox","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","validationStatus","errorMessage","children","onChange","rest","checked","setValue","useValue","internalStatus","useInternalStatus","shouldDisplayErrorMessage","jsxs","classnames","jsx","Icon"],"mappings":";;;;;;;AAaO,SAASA,EAAyBC,GAA6B;AACpE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDhB,GAEE,EAAE,OAAOiB,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAf;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMa,GAAS;AACtB,MAAAF,IAAWX,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD,GACKG,IAAiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAK;AAAA,EAAA,CACD,GAEKU,IAA4BF,MAAmB,WAAWP;AAEhE,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAW,2BAA2BnB,CAAS;AAAA,MAC1D,eAAa,sBAAsBF,CAAE;AAAA,MAErC,UAAA;AAAA,QAAA,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAW,qDAAqD;AAAA,cACzE,aAAaJ,MAAmB;AAAA,cAChC,cAAcA,MAAmB;AAAA,YAAA,CAClC;AAAA,YAED,UAAA;AAAA,cAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,4BACd,UAAA;AAAA,gBAAA,gBAAAE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACE,GAAGT;AAAA,oBACJ,MAAAZ;AAAA,oBACA,eAAaE;AAAA,oBACb,MAAK;AAAA,oBACL,UAAAK;AAAA,oBACA,UAAU,MAAM;AACd,uBAACJ,KAAYW,EAAS,CAACD,CAAO;AAAA,oBAChC;AAAA,oBACA,SAAAA;AAAA,oBACA,aAAU;AAAA,oBACV,UAAAV;AAAA,oBACA,OAAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGF,gBAAAgB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO,EAAE,QAAQf,GAAM,OAAOA,EAAA;AAAA,oBAC9B,WAAWc,EAAW,EAAE,eAAeJ,MAAmB,SAAS;AAAA,oBACnE,eAAa,mBAAmBjB,CAAE;AAAA,oBAElC,UAAA,gBAAAsB;AAAA,sBAACC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,MAAK;AAAA,wBACL,OAAO,GAAGhB,CAAI;AAAA,wBACd,OAAM;AAAA,wBACN,WAAU;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACZ;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cAECI;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFQ,KACC,gBAAAC,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,UAAA,gBAAAE,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/Bb;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/molecules/Forms/Checkboxes/Checkboxes.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLAttributes } from 'react';
-import type { FormControlProps } from '../FormControl.js';
+import { HTMLAttributes } from 'react';
+import { FormControlProps } from '../FormControl.js';
 export interface CheckboxesProps<Value = string> extends Pick<FormControlProps<Value[]>, 'id' | 'name' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'tabIndex' | 'description' | 'validationStatus' | 'errorMessage'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
 }
 export declare function Checkboxes<Value = string>(props: CheckboxesProps<Value>): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/DateField.d.ts

@@ -1,5 +1,5 @@
-import { type IconicNames, type IconicTypes } from '@clubmed/trident-icons';
-import { type FormControlProps } from './FormControl.js';
+import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { FormControlProps } from './FormControl.js';
 interface DateFieldProps extends Omit<FormControlProps<Date | null>, 'max' | 'min'> {
     description?: string;
     /**

package/molecules/Forms/DateField.js

@@ -1,4 +1,4 @@
-import { jsx as p, jsxs as T } from "react/jsx-runtime";
+import { jsx as p, jsxs as C } from "react/jsx-runtime";
 import { c as q } from "../../chunks/index.js";
 import { useId as A, useRef as B, useState as H, useCallback as L, useEffect as J } from "react";
 import { Icon as E } from "@clubmed/trident-icons";
@@ -25,7 +25,7 @@ function z(t) {
 function G(t, e) {
   return P(2, arguments), z(t).getTime() - z(e).getTime();
 }
-function m(t, e) {
+function f(t, e) {
   for (var n = t < 0 ? "-" : "", r = Math.abs(t).toString(); r.length < e; )
     r = "0" + r;
   return n + r;
@@ -36,98 +36,97 @@ function W(t, e) {
   var a = z(t);
   if (isNaN(a.getTime()))
     throw new RangeError("Invalid time value");
-  var l = String((n = e == null ? void 0 : e.format) !== null && n !== void 0 ? n : "extended"), i = String((r = e == null ? void 0 : e.representation) !== null && r !== void 0 ? r : "complete");
-  if (l !== "extended" && l !== "basic")
+  var c = String((n = e?.format) !== null && n !== void 0 ? n : "extended"), i = String((r = e?.representation) !== null && r !== void 0 ? r : "complete");
+  if (c !== "extended" && c !== "basic")
     throw new RangeError("format must be 'extended' or 'basic'");
   if (i !== "date" && i !== "time" && i !== "complete")
     throw new RangeError("representation must be 'date', 'time', or 'complete'");
-  var f = "", g = "", y = l === "extended" ? "-" : "", j = l === "extended" ? ":" : "";
+  var d = "", g = "", D = c === "extended" ? "-" : "", I = c === "extended" ? ":" : "";
   if (i !== "time") {
-    var o = m(a.getDate(), 2), w = m(a.getMonth() + 1, 2), C = m(a.getFullYear(), 4);
-    f = "".concat(C).concat(y).concat(w).concat(y).concat(o);
+    var o = f(a.getDate(), 2), y = f(a.getMonth() + 1, 2), T = f(a.getFullYear(), 4);
+    d = "".concat(T).concat(D).concat(y).concat(D).concat(o);
   }
   if (i !== "date") {
     var b = a.getTimezoneOffset();
     if (b !== 0) {
-      var x = Math.abs(b), u = m(Math.floor(x / 60), 2), d = m(x % 60, 2), v = b < 0 ? "+" : "-";
-      g = "".concat(v).concat(u, ":").concat(d);
+      var w = Math.abs(b), l = f(Math.floor(w / 60), 2), u = f(w % 60, 2), j = b < 0 ? "+" : "-";
+      g = "".concat(j).concat(l, ":").concat(u);
     } else
       g = "Z";
-    var F = m(a.getHours(), 2), S = m(a.getMinutes(), 2), M = m(a.getSeconds(), 2), N = f === "" ? "" : "T", s = [F, S, M].join(j);
-    f = "".concat(f).concat(N).concat(s).concat(g);
+    var F = f(a.getHours(), 2), x = f(a.getMinutes(), 2), S = f(a.getSeconds(), 2), M = d === "" ? "" : "T", s = [F, x, S].join(I);
+    d = "".concat(d).concat(M).concat(s).concat(g);
   }
-  return f;
+  return d;
 }
 const O = (t) => t ? W(new Date(t), { representation: "date" }) : "", X = (t, e, n) => {
   if (!t)
     return !0;
-  const r = (i) => new Date(i.getFullYear(), i.getMonth(), i.getDate()), a = new Date(t), l = r(a);
-  return !(e && l < r(e) || n && l > r(n));
+  const r = (i) => new Date(i.getFullYear(), i.getMonth(), i.getDate()), a = new Date(t), c = r(a);
+  return !(e && c < r(e) || n && c > r(n));
 }, se = (t) => {
   const e = A(), {
     id: n = e,
     name: r = n,
     label: a,
-    description: l,
+    description: c,
     openDatepicker: i,
-    validationStatus: f = "default",
+    validationStatus: d = "default",
     icon: g = "CalendarDefault",
-    iconType: y,
-    errorMessage: j,
+    iconType: D,
+    errorMessage: I,
     disabled: o = !1,
-    required: w = !1,
-    hideRequiredStar: C,
+    required: y = !1,
+    hideRequiredStar: T,
     dataTestId: b = "DateField",
-    value: x,
-    min: u,
-    max: d,
-    onChange: v,
+    value: w,
+    min: l,
+    max: u,
+    onChange: j,
     ...F
-  } = t, S = B(null), [M, N] = H(!1), s = Q({
+  } = t, x = B(null), [S, M] = H(!1), s = Q({
     isDisabled: o,
-    validationStatus: f
-  }), { setValue: h, value: D } = K({
+    validationStatus: d
+  }), { setValue: v, value: h } = K({
     name: r,
     formatter: O,
-    initialValue: x,
-    onChange: (c, R) => v == null ? void 0 : v(c, new Date(R))
-  }), k = O(u), I = O(d), Y = (c) => {
-    h(c.target.value);
+    initialValue: w,
+    onChange: (m, R) => j?.(m, new Date(R))
+  }), N = O(l), k = O(u), Y = (m) => {
+    v(m.target.value);
   }, Z = () => {
-    var c;
-    (c = S.current) == null || c.showPicker();
+    x.current?.showPicker();
   }, _ = L(() => {
-    const c = new Date(D);
-    if (u && d) {
-      const R = Math.abs(G(c, u)), $ = Math.abs(G(c, d));
-      h(R <= $ ? k : I);
+    const m = new Date(h);
+    if (l && u) {
+      const R = Math.abs(G(m, l)), $ = Math.abs(G(m, u));
+      v(R <= $ ? N : k);
       return;
     }
-    if (u) {
-      h(k);
+    if (l) {
+      v(N);
       return;
     }
-    if (d) {
-      h(I);
+    if (u) {
+      v(k);
       return;
     }
-  }, [d, u, I, k, h, D]);
+  }, [u, l, k, N, v, h]);
   return J(() => {
-    !X(D, u, d) && !M && _();
-  }, [_, d, u, M, D]), /* @__PURE__ */ p(
+    !X(h, l, u) && !S && _();
+  }, [_, u, l, S, h]), /* @__PURE__ */ p(
     U,
     {
       id: n,
       label: a,
-      description: l,
+      description: c,
       dataName: "DateField",
       dataTestId: b,
       disabled: o,
-      required: w,
-      hideRequiredStar: C,
-      validationStatus: f,
-      errorMessage: j,
-      children: /* @__PURE__ */ T("div", { className: "relative", children: [
+      required: y,
+      hideRequiredStar: T,
+      validationStatus: d,
+      errorMessage: I,
+      children: /* @__PURE__ */ C("div", { className: "relative", children: [
         /* @__PURE__ */ p(
           "input",
           {
@@ -146,17 +145,17 @@ const O = (t) => t ? W(new Date(t), { representation: "date" }) : "", X = (t, e,
             ),
             id: n,
             disabled: o,
-            required: w,
-            ref: S,
-            value: D,
-            min: k,
-            max: I,
+            required: y,
+            ref: x,
+            value: h,
+            min: N,
+            max: k,
             onChange: Y,
-            onFocus: () => N(!0),
-            onBlur: () => N(!1)
+            onFocus: () => M(!0),
+            onBlur: () => M(!1)
           }
         ),
-        /* @__PURE__ */ T(
+        /* @__PURE__ */ C(
           "div",
           {
             className: q(
@@ -168,11 +167,11 @@ const O = (t) => t ? W(new Date(t), { representation: "date" }) : "", X = (t, e,
               }
             ),
             children: [
-              /* @__PURE__ */ T("button", { className: "pointer-events-auto leading-none", onClick: Z, children: [
-                /* @__PURE__ */ p(E, { name: g, iconType: y, width: "24px" }),
+              /* @__PURE__ */ C("button", { className: "pointer-events-auto leading-none", onClick: Z, children: [
+                /* @__PURE__ */ p(E, { name: g, iconType: D, width: "24px" }),
                 /* @__PURE__ */ p("span", { className: "sr-only", children: i })
               ] }),
-              /* @__PURE__ */ T("span", { className: "ms-auto flex gap-x-8", children: [
+              /* @__PURE__ */ C("span", { className: "ms-auto flex gap-x-8", children: [
                 s === "error" && /* @__PURE__ */ p(E, { name: "CrossDefault", width: "24px" }),
                 s === "success" && /* @__PURE__ */ p(E, { name: "CheckDefault", width: "24px" })
               ] })