@clubmed/trident-ui 1.3.0-beta.1 → 1.3.0-beta.10

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 type { 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 { type ComponentPropsWithoutRef, type 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,38 +1,33 @@
-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
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { c as l } from "../chunks/index.js";
+import { useRef as m, useState as d, useLayoutEffect as h } from "react";
+import p from "../hooks/useResizeObserver.js";
+const R = ({
+  className: o,
+  children: a,
+  innerClassName: n,
+  isExpanded: t = !1,
+  min: f = 0,
+  ...c
 }) => {
-  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 = m(null), [u, r] = d(0);
+  return p({
+    ref: e,
+    onResize: () => {
+      var s;
+      e.current && r((s = e.current) == null ? void 0 : s.offsetHeight);
+    }
+  }), h(() => {
+    e.current && r(e.current.offsetHeight);
+  }, [e]), /* @__PURE__ */ i(
+    "div",
     {
-      role: c,
-      className: d("overflow-hidden", m),
-      style: { ...f },
-      id: n,
-      children: /* @__PURE__ */ s("div", { className: a, ref: i, children: t })
+      ...c,
+      className: l("overflow-hidden transition-all duration-500", o),
+      "data-expanded": t,
+      style: { height: t ? u : f },
+      children: /* @__PURE__ */ i("div", { className: n, ref: e, children: a })
     }
   );
 };

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;AACE,QAAAC,IAAMC,EAAuB,IAAI,GACjC,EAAE,QAAAC,EAAO,IAAIC,EAAU,EAAE,WAAWH,GAAK,GAEzC,CAACI,GAAQC,CAAG,IAAIC,EAAU,OAAO;AAAA,IACrC,MAAM;AAAA,MACJ,QAAQJ,EAAO,GAAGV,CAAmB;AAAA,IACvC;AAAA,IACA,WAAW;AAAA,EACX,EAAA;AAEF,SAAAe,EAAU,MAAM;AACd,IAAAF,EAAI,MAAM;AAAA,MACR,IAAI;AAAA,QACF,QAAQH,EAAO,GAAGV,CAAmB;AAAA,MACvC;AAAA,MACA,QAAQ;AAAA,QACN,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IAAA,CACD;AAAA,EAAA,GACA,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,EAAO;AAAA,MACnB,IAAAR;AAAA,MAEA,UAAC,gBAAAY,EAAA,OAAA,EAAI,WAAAX,GAAsB,KAAAG,GACxB,UAAAL,GACH;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","_a","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,GAAOG,IAAAN,EAAI,YAAJ,gBAAAM,EAAa,YAAY;AAAA,IAEpC;AAAA,EAAA,CACD,GAEDC,EAAgB,MAAM;AACpB,IAAKP,EAAI,WAGTG,EAAOH,EAAI,QAAQ,YAAY;AAAA,EACjC,GAAG,CAACA,CAAG,CAAC,GAGN,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGT;AAAA,MACJ,WAAWU,EAAW,+CAA+Cf,CAAS;AAAA,MAC9E,iBAAeG;AAAA,MACf,OAAO,EAAE,QAAQA,IAAaK,IAAMJ,EAAA;AAAA,MAEpC,UAAA,gBAAAU,EAAC,OAAA,EAAI,WAAWZ,GAAgB,KAAAI,GAC7B,UAAAL,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Forms/Checkboxes/Checkbox.js

@@ -1,12 +1,11 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { c } from "../../../chunks/index.js";
+import { c as o } from "../../../chunks/index.js";
 import { useId as D } from "react";
-import { Icon as h } from "../../../atoms/Icons/Icon.js";
-import "@clubmed/trident-icons";
 import { useValue as S } from "../../../hooks/useValue.js";
 /* empty css                       */
 import { useInternalStatus as V } from "../../../hooks/useInternalStatus.js";
-function B(u) {
+import { Icon as p } from "@clubmed/trident-icons";
+function A(u) {
   const x = D(), {
     id: s = x,
     name: n = s,
@@ -20,13 +19,13 @@ function B(u) {
     validationStatus: N = "default",
     errorMessage: d,
     children: g,
-    onChange: o,
+    onChange: c,
     ...y
   } = u, { value: m, setValue: I } = S({
     name: n,
     initialValue: k,
-    onChange(w, p) {
-      o == null || o(w, p ? l !== void 0 ? l : p : null);
+    onChange(w, h) {
+      c == null || c(w, h ? l !== void 0 ? l : h : null);
     }
   }), e = V({
     isDisabled: r,
@@ -35,13 +34,13 @@ function B(u) {
   return /* @__PURE__ */ t(
     "div",
     {
-      className: c("flex flex-col space-y-2", f),
+      className: o("flex flex-col space-y-2", f),
       "data-testid": `checkbox-container-${s}`,
       children: [
         /* @__PURE__ */ t(
           "label",
           {
-            className: c("cursor-pointer relative flex text-b3 items-center", {
+            className: o("cursor-pointer relative flex text-b3 items-center", {
               "text-grey": e === "disabled",
               "text-black": e !== "default"
             }),
@@ -68,10 +67,10 @@ function B(u) {
                   "span",
                   {
                     style: { height: i, width: i },
-                    className: c({ "!border-red": e === "error" }),
+                    className: o({ "!border-red": e === "error" }),
                     "data-testid": `check-container-${s}`,
                     children: /* @__PURE__ */ a(
-                      h,
+                      p,
                       {
                         name: "CheckDefault",
                         type: "svg",
@@ -88,7 +87,7 @@ function B(u) {
           }
         ),
         C && /* @__PURE__ */ t("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
-          /* @__PURE__ */ a(h, { name: "Error", width: "20px" }),
+          /* @__PURE__ */ a(p, { name: "Error", width: "20px" }),
           d
         ] })
       ]
@@ -96,6 +95,6 @@ function B(u) {
   );
 }
 export {
-  B as Checkbox
+  A as Checkbox
 };
 //# sourceMappingURL=Checkbox.js.map

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 { Icon } from '@/atoms/Icons/index.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\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,KAEb;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,EACD,IAAAhB,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;AAG9D,SAAA,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,cAAC,gBAAAG,EAAA,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;AACb,uBAAAJ,KAAYW,EAAS,CAACD,CAAO;AAAA,oBAChC;AAAA,oBACA,SAAAA;AAAA,oBACA,aAAU;AAAA,oBACV,UAAAV;AAAA,oBACA,OAAAE;AAAA,kBAAA;AAAA,gBACF;AAAA,gBAEA,gBAAAgB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,OAAO,EAAE,QAAQf,GAAM,OAAOA,EAAK;AAAA,oBACnC,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,oBACZ;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA,GACF;AAAA,cAECI;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,QAECQ,KACE,gBAAAC,EAAA,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,UAAA,gBAAAE,EAACC,GAAK,EAAA,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/Bb;AAAA,QAAA,GACH;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,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;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Checkboxes.js","sources":["../../../../lib/molecules/Forms/Checkboxes/Checkboxes.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport type { CheckboxProps } from './Checkbox.js';\nimport classnames from 'classnames';\n\nexport interface CheckboxesProps<Value = string>\n  extends Pick<\n      FormControlProps<Value[]>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function Checkboxes<Value = string>(props: CheckboxesProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value[]>({\n    name,\n    initialValue,\n    formatter(value) {\n      return value !== undefined ? ([].concat(value as never) as Value[]) : value;\n    },\n    defaultValue: (defaultValue as Value[]) || ([] as Value[]),\n    onChange,\n  });\n\n  return (\n    <div {...rest} className={rest.className} role=\"listbox\">\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          const propValue: Value = (child.props as CheckboxProps<Value>).value as Value;\n\n          return cloneElement(child, {\n            ...child.props,\n            name,\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: tabIndex + index + 1,\n            className: classnames(child.props.className || 'mt-8 first:mt-0'),\n            checked: value.includes(propValue),\n            onChange(_: string, item: Value | null) {\n              if (item === null) {\n                setValue(value.filter((v) => v !== propValue));\n              } else {\n                setValue(value.concat(propValue));\n              }\n            },\n          } as CheckboxProps<Value>);\n        }\n\n        return child;\n      })}\n    </div>\n  );\n}\n"],"names":["Checkboxes","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","jsx","Children","child","index","isValidElement","propValue","cloneElement","classnames","_","item","v"],"mappings":";;;;AAsBO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,KAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EACD,IAAAZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAS,IAAIC,EAAkB;AAAA,IAC5C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,UAAUO,GAAO;AACf,aAAOA,MAAU,SAAa,CAAA,EAAG,OAAOA,CAAc,IAAgBA;AAAAA,IACxE;AAAA,IACA,cAAeN,KAA6B,CAAC;AAAA,IAC7C,UAAAC;AAAA,EAAA,CACD;AAED,SACG,gBAAAQ,EAAA,OAAA,EAAK,GAAGJ,GAAM,WAAWA,EAAK,WAAW,MAAK,WAC5C,UAASK,EAAA,IAAIZ,GAAU,CAACa,GAAOC,MAAU;AACpC,QAAAC,EAAeF,CAAK,GAAG;AACnB,YAAAG,IAAoBH,EAAM,MAA+B;AAE/D,aAAOI,EAAaJ,GAAO;AAAA,QACzB,GAAGA,EAAM;AAAA,QACT,MAAAd;AAAA,QACA,IAAI,GAAGD,CAAE,IAAIgB,CAAK;AAAA,QAClB,UAAAV;AAAA,QACA,UAAAC;AAAA,QACA,UAAUC,IAAWQ,IAAQ;AAAA,QAC7B,WAAWI,EAAWL,EAAM,MAAM,aAAa,iBAAiB;AAAA,QAChE,SAASL,EAAM,SAASQ,CAAS;AAAA,QACjC,SAASG,GAAWC,GAAoB;AACtC,UACEX,EADEW,MAAS,OACFZ,EAAM,OAAO,CAACa,MAAMA,MAAML,CAAS,IAEnCR,EAAM,OAAOQ,CAAS,CAFc;AAAA,QAIjD;AAAA,MAAA,CACuB;AAAA,IAC3B;AAEO,WAAAH;AAAA,EACR,CAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"Checkboxes.js","sources":["../../../../lib/molecules/Forms/Checkboxes/Checkboxes.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport type { CheckboxProps } from './Checkbox.js';\nimport classnames from 'classnames';\n\nexport interface CheckboxesProps<Value = string>\n  extends Pick<\n      FormControlProps<Value[]>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function Checkboxes<Value = string>(props: CheckboxesProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value[]>({\n    name,\n    initialValue,\n    formatter(value) {\n      return value !== undefined ? ([].concat(value as never) as Value[]) : value;\n    },\n    defaultValue: (defaultValue as Value[]) || ([] as Value[]),\n    onChange,\n  });\n\n  return (\n    <div {...rest} className={rest.className} role=\"listbox\">\n      {Children.map(children, (child, index) => {\n        if (isValidElement(child)) {\n          const propValue: Value = (child.props as CheckboxProps<Value>).value as Value;\n\n          return cloneElement(child, {\n            ...child.props,\n            name,\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: tabIndex + index + 1,\n            className: classnames(child.props.className || 'mt-8 first:mt-0'),\n            checked: value.includes(propValue),\n            onChange(_: string, item: Value | null) {\n              if (item === null) {\n                setValue(value.filter((v) => v !== propValue));\n              } else {\n                setValue(value.concat(propValue));\n              }\n            },\n          } as CheckboxProps<Value>);\n        }\n\n        return child;\n      })}\n    </div>\n  );\n}\n"],"names":["Checkboxes","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","jsx","Children","child","index","isValidElement","propValue","cloneElement","classnames","_","item","v"],"mappings":";;;;AAsBO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IAC5C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,UAAUO,GAAO;AACf,aAAOA,MAAU,SAAa,CAAA,EAAG,OAAOA,CAAc,IAAgBA;AAAAA,IACxE;AAAA,IACA,cAAeN,KAA6B,CAAA;AAAA,IAC5C,UAAAC;AAAA,EAAA,CACD;AAED,SACE,gBAAAQ,EAAC,OAAA,EAAK,GAAGJ,GAAM,WAAWA,EAAK,WAAW,MAAK,WAC5C,UAAAK,EAAS,IAAIZ,GAAU,CAACa,GAAOC,MAAU;AACxC,QAAIC,EAAeF,CAAK,GAAG;AACzB,YAAMG,IAAoBH,EAAM,MAA+B;AAE/D,aAAOI,EAAaJ,GAAO;AAAA,QACzB,GAAGA,EAAM;AAAA,QACT,MAAAd;AAAA,QACA,IAAI,GAAGD,CAAE,IAAIgB,CAAK;AAAA,QAClB,UAAAV;AAAA,QACA,UAAAC;AAAA,QACA,UAAUC,IAAWQ,IAAQ;AAAA,QAC7B,WAAWI,EAAWL,EAAM,MAAM,aAAa,iBAAiB;AAAA,QAChE,SAASL,EAAM,SAASQ,CAAS;AAAA,QACjC,SAASG,GAAWC,GAAoB;AACtC,UACEX,EADEW,MAAS,OACFZ,EAAM,OAAO,CAACa,MAAMA,MAAML,CAAS,IAEnCR,EAAM,OAAOQ,CAAS,CAFc;AAAA,QAIjD;AAAA,MAAA,CACuB;AAAA,IAC3B;AAEA,WAAOH;AAAA,EACT,CAAC,EAAA,CACH;AAEJ;"}

package/molecules/Forms/DateField.d.ts

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