@clubmed/trident-ui 1.6.0-beta.3 → 1.6.0-beta.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # ClubMed React UI components changelog
 
+# [1.6.0-beta.4](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.6.0-beta.3...v1.6.0-beta.4) (2026-01-07)
+
+
+### Features
+
+* **molecules:** add `FormControlError` component and integrate it into `FormControl` with tests ([82798ae](https://scm.clubmed.com/clubmed/ui/trident-ui/-/commit/82798ae09e2f7ec06441f7c38f774a4a48590035))
+
 # [1.6.0-beta.3](https://scm.clubmed.com/clubmed/ui/trident-ui/compare/v1.6.0-beta.2...v1.6.0-beta.3) (2026-01-07)
 
 

package/molecules/Forms/Filter.js

@@ -1,48 +1,48 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { c as d } from "../../chunks/clsx.js";
+import { c as g } from "../../chunks/clsx.js";
 import { useId as C } from "react";
 /* empty css                    */
 import { Icon as l } from "@clubmed/trident-icons";
 import { useValue as S } from "../../hooks/useValue.js";
 import { useInternalStatus as V } from "../../hooks/useInternalStatus.js";
-function q(m) {
-  const u = C(), {
-    id: r = u,
+function q(d) {
+  const m = C(), {
+    id: r = m,
     name: n = r,
-    className: p,
-    dataTestId: h,
+    className: u,
+    dataTestId: p,
     disabled: t = !1,
-    checked: f = !1,
+    checked: h = !1,
     value: s,
-    tabIndex: x = 0,
-    validationStatus: b = "default",
+    tabIndex: f = 0,
+    validationStatus: x = "default",
     errorMessage: i,
-    onChange: k,
-    hasDropdown: v,
-    children: N,
-    ...w
-  } = m, { value: o, setValue: D } = S({
+    onChange: b,
+    hasDropdown: k,
+    children: v,
+    ...N
+  } = d, { value: o, setValue: w } = S({
     name: n,
-    initialValue: f,
-    onChange(g, c) {
-      k?.(g, c ? s !== void 0 ? s : c : null);
+    initialValue: h,
+    onChange(I, c) {
+      b?.(I, c ? s !== void 0 ? s : c : null);
     }
-  }), I = V({
+  }), D = V({
     isDisabled: t,
-    validationStatus: b
+    validationStatus: x
   }) === "error" && i;
-  return /* @__PURE__ */ a("div", { className: d(p, "relative"), children: [
+  return /* @__PURE__ */ a("div", { className: g(u, "relative"), children: [
     /* @__PURE__ */ a("label", { "data-testid": `filter-container-${r}`, className: "relative", children: [
       /* @__PURE__ */ e(
         "input",
         {
-          ...w,
+          ...N,
           name: n,
-          "data-testid": h,
+          "data-testid": p,
           type: "checkbox",
-          tabIndex: x,
+          tabIndex: f,
           onChange: () => {
-            t || D(!o);
+            t || w(!o);
           },
           checked: o,
           "data-name": "Filter",
@@ -51,12 +51,12 @@ function q(m) {
         }
       ),
       /* @__PURE__ */ a("span", { children: [
-        /* @__PURE__ */ e("span", { className: d("text-b3 font-semibold"), children: N }),
+        /* @__PURE__ */ e("span", { className: "font-semibold", children: v }),
         /* @__PURE__ */ e(l, { className: "check", width: null, name: "CheckDefault", color: "black" }),
-        v && /* @__PURE__ */ e(l, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
+        k && /* @__PURE__ */ e(l, { name: "ArrowDefaultDown", className: "ml-8", width: "24px", color: "black" })
       ] })
     ] }),
-    I && /* @__PURE__ */ a("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
+    D && /* @__PURE__ */ a("span", { className: "text-red text-b4 flex items-start space-x-4 ps-20", role: "alert", children: [
       /* @__PURE__ */ e(l, { name: "Error", width: "20px" }),
       i
     ] })

package/molecules/Forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\n\nexport interface FilterProps<Value = string> extends FormControlProps<Value> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<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    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    onChange,\n    hasDropdown,\n    children,\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\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            if (!disabled) setValue(!checked);\n          }}\n          checked={checked}\n          data-name=\"Filter\"\n          disabled={disabled}\n          value={value as any}\n        />\n        <span>\n          <span className={clsx('text-b3 font-semibold')}>{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\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":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","validationStatus","errorMessage","onChange","hasDropdown","children","rest","checked","setValue","useValue","shouldDisplayErrorMessage","useInternalStatus","clsx","jsxs","jsx","Icon"],"mappings":";;;;;;;AAiBO,SAASA,EAAuBC,GAA2B;AAChE,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,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;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,MAAAJ,IAAWT,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD,GAOKG,IALiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAI;AAAA,EAAA,CACD,MAEoD,WAAWC;AAEhE,2BACG,OAAA,EAAI,WAAWU,EAAKjB,GAAW,UAAU,GACxC,UAAA;AAAA,IAAA,gBAAAkB,EAAC,WAAM,eAAa,oBAAoBpB,CAAE,IAAI,WAAU,YACtD,UAAA;AAAA,MAAA,gBAAAqB;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGR;AAAA,UACJ,MAAAZ;AAAA,UACA,eAAaE;AAAA,UACb,MAAK;AAAA,UACL,UAAAI;AAAA,UACA,UAAU,MAAM;AACd,YAAKH,KAAUW,EAAS,CAACD,CAAO;AAAA,UAClC;AAAA,UACA,SAAAA;AAAA,UACA,aAAU;AAAA,UACV,UAAAV;AAAA,UACA,OAAAE;AAAA,QAAA;AAAA,MAAA;AAAA,wBAED,QAAA,EACC,UAAA;AAAA,QAAA,gBAAAe,EAAC,QAAA,EAAK,WAAWF,EAAK,uBAAuB,GAAI,UAAAP,GAAS;AAAA,QAE1D,gBAAAS,EAACC,KAAK,WAAU,SAAQ,OAAO,MAAM,MAAK,gBAAe,OAAM,QAAA,CAAQ;AAAA,QAEtEX,KACC,gBAAAU,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,MAAA,EAAA,CAE9E;AAAA,IAAA,GACF;AAAA,IAECL,KACC,gBAAAG,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,MAC/Bb;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"Filter.js","sources":["../../../lib/molecules/Forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId } from 'react';\nimport './controls.css';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '@/hooks/useValue.js';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl';\nimport { useInternalStatus } from '@/hooks/useInternalStatus';\n\nexport interface FilterProps<Value = string> extends FormControlProps<Value> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Filter<Value = string>(props: FilterProps<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    tabIndex = 0,\n    validationStatus = 'default',\n    errorMessage,\n    onChange,\n    hasDropdown,\n    children,\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\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            if (!disabled) setValue(!checked);\n          }}\n          checked={checked}\n          data-name=\"Filter\"\n          disabled={disabled}\n          value={value as any}\n        />\n        <span>\n          <span className=\"font-semibold\">{children}</span>\n\n          <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n          {hasDropdown && (\n            <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n          )}\n        </span>\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":["Filter","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","tabIndex","validationStatus","errorMessage","onChange","hasDropdown","children","rest","checked","setValue","useValue","shouldDisplayErrorMessage","useInternalStatus","clsx","jsxs","jsx","Icon"],"mappings":";;;;;;;AAiBO,SAASA,EAAuBC,GAA2B;AAChE,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,UAAAC,IAAW;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;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,MAAAJ,IAAWT,GAAMa,IAAYR,MAAU,SAAYA,IAAQQ,IAAqB,IAAI;AAAA,IACtF;AAAA,EAAA,CACD,GAOKG,IALiBC,EAAkB;AAAA,IACvC,YAAYd;AAAA,IACZ,kBAAAI;AAAA,EAAA,CACD,MAEoD,WAAWC;AAEhE,2BACG,OAAA,EAAI,WAAWU,EAAKjB,GAAW,UAAU,GACxC,UAAA;AAAA,IAAA,gBAAAkB,EAAC,WAAM,eAAa,oBAAoBpB,CAAE,IAAI,WAAU,YACtD,UAAA;AAAA,MAAA,gBAAAqB;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGR;AAAA,UACJ,MAAAZ;AAAA,UACA,eAAaE;AAAA,UACb,MAAK;AAAA,UACL,UAAAI;AAAA,UACA,UAAU,MAAM;AACd,YAAKH,KAAUW,EAAS,CAACD,CAAO;AAAA,UAClC;AAAA,UACA,SAAAA;AAAA,UACA,aAAU;AAAA,UACV,UAAAV;AAAA,UACA,OAAAE;AAAA,QAAA;AAAA,MAAA;AAAA,wBAED,QAAA,EACC,UAAA;AAAA,QAAA,gBAAAe,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAT,EAAA,CAAS;AAAA,QAE1C,gBAAAS,EAACC,KAAK,WAAU,SAAQ,OAAO,MAAM,MAAK,gBAAe,OAAM,QAAA,CAAQ;AAAA,QAEtEX,KACC,gBAAAU,EAACC,GAAA,EAAK,MAAK,oBAAmB,WAAU,QAAO,OAAM,QAAO,OAAM,QAAA,CAAQ;AAAA,MAAA,EAAA,CAE9E;AAAA,IAAA,GACF;AAAA,IAECL,KACC,gBAAAG,EAAC,QAAA,EAAK,WAAU,qDAAoD,MAAK,SACvE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,MAC/Bb;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;"}

package/molecules/Forms/FormControl.d.ts

@@ -4,10 +4,11 @@ import { FormLabelProps } from './FormLabel';
 export type FormControlProps<Value = unknown, Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>> = {
     value?: Value;
     label?: ReactNode;
+    labelClassName?: string;
     validationStatus?: ValidationStatus;
     onChange?: (name: string, value: Value) => void;
     dataTestId?: string;
     dataName?: string;
     errorMessage?: string;
 } & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;
-export declare const FormControl: <Value = string>({ id, label, description, disabled, required, className, validationStatus, children, errorMessage, dataTestId, dataName, hideRequiredStar, layout, }: FormControlProps<Value>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormControl: <Value = string>({ id, label, description, disabled, required, className, validationStatus, children, errorMessage, dataTestId, dataName, labelClassName, hideRequiredStar, layout, }: FormControlProps<Value>) => import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/FormControl.js

@@ -1,55 +1,54 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useInternalStatus as h } from "../../hooks/useInternalStatus.js";
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import { useInternalStatus as F } from "../../hooks/useInternalStatus.js";
 import { FormLabel as S } from "./FormLabel.js";
-import { Icon as b } from "@clubmed/trident-icons";
-import { c as g } from "../../chunks/clsx.js";
-const v = ({
-  id: t,
-  label: r,
-  description: o,
-  disabled: n,
+import { c as j } from "../../chunks/clsx.js";
+import { FormControlError as C } from "./FormControlError.js";
+const y = ({
+  id: r,
+  label: t,
+  description: a,
+  disabled: e,
   required: l,
   className: m,
-  validationStatus: i = "default",
-  children: c,
-  errorMessage: a,
-  dataTestId: p,
-  dataName: x,
-  hideRequiredStar: d,
-  layout: f
+  validationStatus: n = "default",
+  children: i,
+  errorMessage: o,
+  dataTestId: c,
+  dataName: d,
+  labelClassName: f,
+  hideRequiredStar: p,
+  layout: u
 }) => {
-  const u = h({
-    isDisabled: !!n,
-    validationStatus: i
-  }) === "error" && a;
-  return /* @__PURE__ */ s(
+  const x = F({
+    isDisabled: !!e,
+    validationStatus: n
+  }) === "error" && o;
+  return /* @__PURE__ */ h(
     "div",
     {
-      className: g("flex flex-col gap-4", m),
-      "data-name": x,
-      "data-testid": p,
+      className: j("flex flex-col gap-4", m),
+      "data-name": d,
+      "data-testid": c,
       children: [
-        r && t && /* @__PURE__ */ e(
+        t && r && /* @__PURE__ */ s(
           S,
           {
-            description: o,
-            id: t,
-            layout: f,
+            description: a,
+            id: r,
+            layout: u,
             required: l,
-            hideRequiredStar: d,
-            children: r
+            hideRequiredStar: p,
+            className: f,
+            children: t
           }
         ),
-        c,
-        u && /* @__PURE__ */ s("span", { className: "text-red text-b4 flex items-start gap-x-4 px-20", children: [
-          /* @__PURE__ */ e(b, { name: "Error", width: "20px" }),
-          a
-        ] })
+        i,
+        x && /* @__PURE__ */ s(C, { children: o })
       ]
     }
   );
 };
 export {
-  v as FormControl
+  y as FormControl
 };
 //# sourceMappingURL=FormControl.js.map

package/molecules/Forms/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sources":["../../../lib/molecules/Forms/FormControl.tsx"],"sourcesContent":["import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';\nimport { useInternalStatus, type ValidationStatus } from '@/hooks/useInternalStatus';\nimport { FormLabel, type FormLabelProps } from './FormLabel';\nimport { Icon } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\n\nexport type FormControlProps<\n  Value = unknown,\n  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>,\n> = {\n  value?: Value;\n  label?: ReactNode;\n  validationStatus?: ValidationStatus;\n  onChange?: (name: string, value: Value) => void;\n  dataTestId?: string;\n  dataName?: string;\n  errorMessage?: string;\n} & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;\n\nexport const FormControl = <Value = string,>({\n  id,\n  label,\n  description,\n  disabled,\n  required,\n  className,\n  validationStatus = 'default',\n  children,\n  errorMessage,\n  dataTestId,\n  dataName,\n  hideRequiredStar,\n  layout,\n}: FormControlProps<Value>) => {\n  const internalStatus = useInternalStatus({\n    isDisabled: !!disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={clsx('flex flex-col gap-4', className)}\n      data-name={dataName}\n      data-testid={dataTestId}\n    >\n      {label && id && (\n        <FormLabel\n          description={description}\n          id={id}\n          layout={layout}\n          required={required}\n          hideRequiredStar={hideRequiredStar}\n        >\n          {label}\n        </FormLabel>\n      )}\n\n      {children}\n\n      {shouldDisplayErrorMessage && (\n        <span className=\"text-red text-b4 flex items-start gap-x-4 px-20\">\n          <Icon name=\"Error\" width=\"20px\" />\n          {errorMessage}\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["FormControl","id","label","description","disabled","required","className","validationStatus","children","errorMessage","dataTestId","dataName","hideRequiredStar","layout","shouldDisplayErrorMessage","useInternalStatus","jsxs","clsx","jsx","FormLabel","Icon"],"mappings":";;;;;AAmBO,MAAMA,IAAc,CAAkB;AAAA,EAC3C,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,QAAAC;AACF,MAA+B;AAM7B,QAAMC,IALiBC,EAAkB;AAAA,IACvC,YAAY,CAAC,CAACX;AAAA,IACd,kBAAAG;AAAA,EAAA,CACD,MAEoD,WAAWE;AAEhE,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAK,uBAAuBX,CAAS;AAAA,MAChD,aAAWK;AAAA,MACX,eAAaD;AAAA,MAEZ,UAAA;AAAA,QAAAR,KAASD,KACR,gBAAAiB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAAhB;AAAA,YACA,IAAAF;AAAA,YACA,QAAAY;AAAA,YACA,UAAAR;AAAA,YACA,kBAAAO;AAAA,YAEC,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJM;AAAA,QAEAM,KACC,gBAAAE,EAAC,QAAA,EAAK,WAAU,mDACd,UAAA;AAAA,UAAA,gBAAAE,EAACE,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,UAC/BX;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
+{"version":3,"file":"FormControl.js","sources":["../../../lib/molecules/Forms/FormControl.tsx"],"sourcesContent":["import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';\nimport { useInternalStatus, type ValidationStatus } from '@/hooks/useInternalStatus';\nimport { FormLabel, type FormLabelProps } from './FormLabel';\nimport clsx from 'clsx';\nimport { FormControlError } from '@/molecules/Forms/FormControlError';\n\nexport type FormControlProps<\n  Value = unknown,\n  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>,\n> = {\n  value?: Value;\n  label?: ReactNode;\n  labelClassName?: string;\n  validationStatus?: ValidationStatus;\n  onChange?: (name: string, value: Value) => void;\n  dataTestId?: string;\n  dataName?: string;\n  errorMessage?: string;\n} & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;\n\nexport const FormControl = <Value = string,>({\n  id,\n  label,\n  description,\n  disabled,\n  required,\n  className,\n  validationStatus = 'default',\n  children,\n  errorMessage,\n  dataTestId,\n  dataName,\n  labelClassName,\n  hideRequiredStar,\n  layout,\n}: FormControlProps<Value>) => {\n  const internalStatus = useInternalStatus({\n    isDisabled: !!disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={clsx('flex flex-col gap-4', className)}\n      data-name={dataName}\n      data-testid={dataTestId}\n    >\n      {label && id && (\n        <FormLabel\n          description={description}\n          id={id}\n          layout={layout}\n          required={required}\n          hideRequiredStar={hideRequiredStar}\n          className={labelClassName}\n        >\n          {label}\n        </FormLabel>\n      )}\n\n      {children}\n\n      {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n    </div>\n  );\n};\n"],"names":["FormControl","id","label","description","disabled","required","className","validationStatus","children","errorMessage","dataTestId","dataName","labelClassName","hideRequiredStar","layout","shouldDisplayErrorMessage","useInternalStatus","jsxs","clsx","jsx","FormLabel","FormControlError"],"mappings":";;;;;AAoBO,MAAMA,IAAc,CAAkB;AAAA,EAC3C,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,QAAAC;AACF,MAA+B;AAM7B,QAAMC,IALiBC,EAAkB;AAAA,IACvC,YAAY,CAAC,CAACZ;AAAA,IACd,kBAAAG;AAAA,EAAA,CACD,MAEoD,WAAWE;AAEhE,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAK,uBAAuBZ,CAAS;AAAA,MAChD,aAAWK;AAAA,MACX,eAAaD;AAAA,MAEZ,UAAA;AAAA,QAAAR,KAASD,KACR,gBAAAkB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAAjB;AAAA,YACA,IAAAF;AAAA,YACA,QAAAa;AAAA,YACA,UAAAT;AAAA,YACA,kBAAAQ;AAAA,YACA,WAAWD;AAAA,YAEV,UAAAV;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJM;AAAA,QAEAO,KAA6B,gBAAAI,EAACE,GAAA,EAAkB,UAAAZ,EAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpE;"}

package/molecules/Forms/FormControlError.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare function FormControlError({ children, className, ...args }: PropsWithChildren<HTMLAttributes<HTMLSpanElement>>): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/FormControlError.js

@@ -0,0 +1,26 @@
+import { jsxs as e, jsx as m } from "react/jsx-runtime";
+import { t as s } from "../../chunks/bundle-mjs.js";
+import { Icon as a } from "@clubmed/trident-icons";
+import { c as x } from "../../chunks/clsx.js";
+function f({
+  children: r,
+  className: t,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      ...o,
+      "data-testid": "FormControlError",
+      className: x("text-red", s("text-b4 flex items-start gap-x-4 px-20", t)),
+      children: [
+        /* @__PURE__ */ m(a, { name: "Error", width: "20px" }),
+        r
+      ]
+    }
+  );
+}
+export {
+  f as FormControlError
+};
+//# sourceMappingURL=FormControlError.js.map

package/molecules/Forms/FormControlError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControlError.js","sources":["../../../lib/molecules/Forms/FormControlError.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport { twMerge } from 'tailwind-merge';\nimport { Icon } from '@clubmed/trident-icons';\nimport clsx from 'clsx';\n\nexport function FormControlError({\n  children,\n  className,\n  ...args\n}: PropsWithChildren<HTMLAttributes<HTMLSpanElement>>) {\n  return (\n    <span\n      {...args}\n      data-testid=\"FormControlError\"\n      className={clsx('text-red', twMerge('text-b4 flex items-start gap-x-4 px-20', className))}\n    >\n      <Icon name=\"Error\" width=\"20px\" />\n      {children}\n    </span>\n  );\n}\n"],"names":["FormControlError","children","className","args","jsxs","clsx","twMerge","jsx","Icon"],"mappings":";;;;AAKO,SAASA,EAAiB;AAAA,EAC/B,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAuD;AACrD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACJ,eAAY;AAAA,MACZ,WAAWE,EAAK,YAAYC,EAAQ,0CAA0CJ,CAAS,CAAC;AAAA,MAExF,UAAA;AAAA,QAAA,gBAAAK,EAACC,GAAA,EAAK,MAAK,SAAQ,OAAM,QAAO;AAAA,QAC/BP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/molecules/Forms/NumberField.d.ts

@@ -16,6 +16,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     increase: () => void;
     decrease: () => void;
     label?: import('react').ReactNode;
+    labelClassName?: string;
     validationStatus?: import('../../hooks/useInternalStatus').ValidationStatus;
     dataName?: string;
     errorMessage?: string;

package/molecules/Link.d.ts

@@ -10,6 +10,10 @@ interface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement> extends Anc
      */
     icon?: IconicNames;
     iconType?: IconicTypes;
+    /**
+     * Icon width
+     */
+    width?: string;
     /**
      * Underlined
      */

package/molecules/Link.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as i } from "react/jsx-runtime";
 import { c as o } from "../chunks/clsx.js";
-import { Icon as u } from "@clubmed/trident-icons";
-import { t as f } from "../chunks/bundle-mjs.js";
-const L = ({
+import { Icon as f } from "@clubmed/trident-icons";
+import { t as k } from "../chunks/bundle-mjs.js";
+const T = ({
   label: n,
   icon: s,
   component: c = "a",
@@ -10,17 +10,18 @@ const L = ({
   underlined: e = !0,
   className: l,
   inert: p,
-  ...d
+  width: d = "24px",
+  ...x
 }) => {
-  const r = n.lastIndexOf(" "), a = r === -1 ? n.length : r, h = n.substring(0, 1), x = n.substring(1, a + 1), g = n.substring(a);
+  const r = n.lastIndexOf(" "), a = r === -1 ? n.length : r, g = n.substring(0, 1), h = n.substring(1, a + 1), u = n.substring(a);
   return /* @__PURE__ */ t(
     p ? "span" : c,
     {
-      className: f("decoration-none link-container cursor-pointer text-inherit", l),
+      className: k("decoration-none link-container cursor-pointer text-inherit", l),
       "data-name": "Link",
-      ...d,
+      ...x,
       children: [
-        /* @__PURE__ */ i("span", { className: o({ "link-underline": e }), children: h }),
+        /* @__PURE__ */ i("span", { className: o({ "link-underline": e }), children: g }),
         /* @__PURE__ */ t(
           "span",
           {
@@ -29,15 +30,15 @@ const L = ({
               "link-underline": e
             }),
             children: [
-              x,
+              h,
               /* @__PURE__ */ t("span", { className: "inline-block", children: [
-                g,
+                u,
                 s && /* @__PURE__ */ i(
-                  u,
+                  f,
                   {
                     name: s,
                     iconType: m,
-                    width: "24px",
+                    width: d,
                     style: { marginInlineStart: "8px" }
                   }
                 )
@@ -50,6 +51,6 @@ const L = ({
   );
 };
 export {
-  L as Link
+  T as Link
 };
 //# sourceMappingURL=Link.js.map

package/molecules/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../lib/molecules/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { twMerge } from 'tailwind-merge';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  ...anchorAttrs\n}) => {\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={twMerge('decoration-none link-container cursor-pointer text-inherit', className)}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={clsx('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width=\"24px\"\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"names":["Link","label","icon","component","iconType","underlined","className","inert","anchorAttrs","lastSpace","lastIndex","first","middle","last","jsxs","twMerge","jsx","clsx","Icon"],"mappings":";;;;AAmCO,MAAMA,IAAqC,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYR,EAAM,YAAY,GAAG,GACjCS,IAAYD,MAAc,KAAKR,EAAM,SAASQ,GAE9CE,IAAQV,EAAM,UAAU,GAAG,CAAC,GAC5BW,IAASX,EAAM,UAAU,GAAGS,IAAY,CAAC,GACzCG,IAAOZ,EAAM,UAAUS,CAAS;AAKtC,SACE,gBAAAI;AAAA,IAHcP,IAAQ,SAFZJ;AAAA,IAKT;AAAA,MACC,WAAWY,EAAQ,8DAA8DT,CAAS;AAAA,MAC1F,aAAU;AAAA,MACT,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,kBAAkBZ,GAAY,GAAI,UAAAM,GAAM;AAAA,QAChE,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWG,EAAK,aAAa;AAAA,cAC3B,YAAYf;AAAA,cACZ,kBAAkBG;AAAA,YAAA,CACnB;AAAA,YAEA,UAAA;AAAA,cAAAO;AAAA,cACD,gBAAAE,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,gBAAAD;AAAA,gBACAX,KACC,gBAAAc;AAAA,kBAACE;AAAA,kBAAA;AAAA,oBACC,MAAMhB;AAAA,oBACN,UAAAE;AAAA,oBACA,OAAM;AAAA,oBACN,OAAO,EAAE,mBAAmB,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,cACpC,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Link.js","sources":["../../lib/molecules/Link.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { twMerge } from 'tailwind-merge';\n\ninterface LinkProps<T extends HTMLAnchorElement = HTMLAnchorElement>\n  extends AnchorHTMLAttributes<T> {\n  /**\n   * Label text\n   */\n  label: string;\n  /**\n   * Icon name\n   */\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  /**\n   * Icon width\n   */\n  width?: string;\n  /**\n   * Underlined\n   */\n  underlined?: boolean;\n  /**\n   * Additional class names\n   */\n  className?: string;\n  /**\n   * Is the link inert (not itself clickable but part of a clickable element)\n   */\n  inert?: boolean;\n  /**\n   * Allow giving a custom component\n   */\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const Link: FunctionComponent<LinkProps> = ({\n  label,\n  icon,\n  component = 'a',\n  iconType,\n  underlined = true,\n  className,\n  inert,\n  width = '24px',\n  ...anchorAttrs\n}) => {\n  const lastSpace = label.lastIndexOf(' ');\n  const lastIndex = lastSpace === -1 ? label.length : lastSpace;\n\n  const first = label.substring(0, 1);\n  const middle = label.substring(1, lastIndex + 1);\n  const last = label.substring(lastIndex);\n  const Cmp = component as FunctionComponent<PropsWithChildren>;\n\n  const TagName = inert ? 'span' : Cmp;\n\n  return (\n    <TagName\n      className={twMerge('decoration-none link-container cursor-pointer text-inherit', className)}\n      data-name=\"Link\"\n      {...anchorAttrs}\n    >\n      <span className={clsx({ 'link-underline': underlined })}>{first}</span>\n      <span\n        className={clsx('hoverable', {\n          'has-icon': icon,\n          'link-underline': underlined,\n        })}\n      >\n        {middle}\n        <span className=\"inline-block\">\n          {last}\n          {icon && (\n            <Icon\n              name={icon}\n              iconType={iconType}\n              width={width}\n              style={{ marginInlineStart: '8px' }}\n            />\n          )}\n        </span>\n      </span>\n    </TagName>\n  );\n};\n"],"names":["Link","label","icon","component","iconType","underlined","className","inert","width","anchorAttrs","lastSpace","lastIndex","first","middle","last","jsxs","twMerge","jsx","clsx","Icon"],"mappings":";;;;AAuCO,MAAMA,IAAqC,CAAC;AAAA,EACjD,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYT,EAAM,YAAY,GAAG,GACjCU,IAAYD,MAAc,KAAKT,EAAM,SAASS,GAE9CE,IAAQX,EAAM,UAAU,GAAG,CAAC,GAC5BY,IAASZ,EAAM,UAAU,GAAGU,IAAY,CAAC,GACzCG,IAAOb,EAAM,UAAUU,CAAS;AAKtC,SACE,gBAAAI;AAAA,IAHcR,IAAQ,SAFZJ;AAAA,IAKT;AAAA,MACC,WAAWa,EAAQ,8DAA8DV,CAAS;AAAA,MAC1F,aAAU;AAAA,MACT,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAQ,EAAC,QAAA,EAAK,WAAWC,EAAK,EAAE,kBAAkBb,GAAY,GAAI,UAAAO,GAAM;AAAA,QAChE,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWG,EAAK,aAAa;AAAA,cAC3B,YAAYhB;AAAA,cACZ,kBAAkBG;AAAA,YAAA,CACnB;AAAA,YAEA,UAAA;AAAA,cAAAQ;AAAA,cACD,gBAAAE,EAAC,QAAA,EAAK,WAAU,gBACb,UAAA;AAAA,gBAAAD;AAAA,gBACAZ,KACC,gBAAAe;AAAA,kBAACE;AAAA,kBAAA;AAAA,oBACC,MAAMjB;AAAA,oBACN,UAAAE;AAAA,oBACA,OAAAI;AAAA,oBACA,OAAO,EAAE,mBAAmB,MAAA;AAAA,kBAAM;AAAA,gBAAA;AAAA,cACpC,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.6.0-beta.3",
+  "version": "1.6.0-beta.4",
   "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",