@clubmed/trident-ui 2.0.0-beta.4 → 2.0.0-beta.40

package/ui/contexts/TridentUIConfig.js

@@ -1,4 +1,4 @@
-import { r as e, t } from "../../chunks/chunk.js";
+import { o as e, t } from "../../chunks/chunk.js";
 import { createContext as n, useContext as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region ../../node_modules/.pnpm/lodash@4.17.23/node_modules/lodash/isArray.js

package/ui/forms/CheckboxSelect.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { ValidationStatus } from '../hooks/useInternalStatus';
+export interface CheckboxSelectOption<Value = string> {
+    value: Value;
+    label: ReactNode;
+}
+export interface CheckboxSelectGroup<Value = string> {
+    label?: ReactNode;
+    options: CheckboxSelectOption<Value>[];
+}
+export interface CheckboxSelectProps<Value = string> {
+    id?: string;
+    name?: string;
+    label?: ReactNode;
+    description?: string;
+    placeholder?: string;
+    value?: Value[];
+    options?: CheckboxSelectOption<Value>[];
+    groups?: CheckboxSelectGroup<Value>[];
+    onChange?: (name: string, value: Value[]) => void;
+    disabled?: boolean;
+    required?: boolean;
+    hideRequiredStar?: boolean;
+    validationStatus?: ValidationStatus;
+    errorMessage?: string;
+    className?: string;
+    'data-testid'?: string;
+    /** Renders the selected values summary in the trigger */
+    renderValue?: (selected: Value[]) => ReactNode;
+}
+export declare function CheckboxSelect<Value = string>({ id: idProp, name: nameProp, label, description, placeholder, value: controlledValue, options, groups, onChange, disabled, required, hideRequiredStar, validationStatus, errorMessage, className, 'data-testid': dataTestId, renderValue, }: CheckboxSelectProps<Value>): import("react/jsx-runtime").JSX.Element;

package/ui/forms/CheckboxSelect.js

@@ -0,0 +1,119 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { Checkbox as t } from "./checkboxes/Checkbox.js";
+import { FormControl as n } from "./FormControl.js";
+import { useDropdown as r } from "../Dropdown.js";
+import { useEffect as i, useId as a, useState as o } from "react";
+import { Icon as s } from "@clubmed/trident-icons";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region lib/ui/forms/CheckboxSelect.tsx
+function u({ children: t, selected: n }) {
+	return /* @__PURE__ */ c("span", {
+		ref: (e) => {
+			e && (e.title = e.textContent ?? "");
+		},
+		className: e("text-b3 text-black truncate", { "font-semibold": n }),
+		children: t
+	});
+}
+function d({ id: d, name: f, label: p, description: m, placeholder: h = "Select...", value: g, options: _, groups: v, onChange: y, disabled: b = !1, required: x = !1, hideRequiredStar: S, validationStatus: C = "default", errorMessage: w, className: T, "data-testid": E, renderValue: D }) {
+	let O = a(), k = d ?? O, A = f ?? k, { open: j, toggle: M, containerRef: N, isLeaving: P } = r(), [F, I] = o(g ?? []);
+	i(() => {
+		g !== void 0 && I(g);
+	}, [g]);
+	let L = (e) => {
+		let t = F.includes(e) ? F.filter((t) => t !== e) : [...F, e];
+		I(t), y?.(A, t);
+	}, R = _ || (v ?? []).flatMap((e) => e.options), z = F.length === 0 ? /* @__PURE__ */ c("span", {
+		className: "text-darkGrey",
+		children: h
+	}) : D ? D(F) : /* @__PURE__ */ c("span", { children: R.filter((e) => F.includes(e.value)).map((e) => e.label).join(", ") }), B = C === "error", V = C === "success", H = b, U = (e) => /* @__PURE__ */ c("div", {
+		className: "flex flex-col gap-12",
+		children: e.map((e, n) => /* @__PURE__ */ c(t, {
+			name: A,
+			value: String(e.value),
+			checked: F.includes(e.value),
+			disabled: b,
+			onChange: () => L(e.value),
+			children: /* @__PURE__ */ c(u, {
+				selected: F.includes(e.value),
+				children: e.label
+			})
+		}, n))
+	});
+	return /* @__PURE__ */ c(n, {
+		id: k,
+		label: p,
+		description: m,
+		className: T,
+		dataName: "CheckboxSelect",
+		"data-testid": E,
+		disabled: b,
+		required: x,
+		hideRequiredStar: S,
+		validationStatus: C,
+		errorMessage: w,
+		children: /* @__PURE__ */ l("div", {
+			ref: N,
+			className: "relative",
+			children: [/* @__PURE__ */ l("button", {
+				type: "button",
+				id: k,
+				"aria-haspopup": "listbox",
+				"aria-expanded": j,
+				"aria-disabled": H,
+				disabled: H,
+				onClick: M,
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none text-left flex items-center justify-between gap-8", {
+					"bg-white text-black border-middleGrey focus:border-black active:border-black": !H && !B && !V,
+					"bg-pearl border-middleGrey text-grey": H,
+					"border-red bg-white": B,
+					"border-green bg-white": V
+				}),
+				children: [/* @__PURE__ */ c("span", {
+					className: "truncate flex-1",
+					children: z
+				}), /* @__PURE__ */ l("span", {
+					className: "flex items-center gap-8 shrink-0",
+					children: [
+						B && /* @__PURE__ */ c(s, {
+							name: "CrossDefault",
+							width: "24px",
+							className: "text-red"
+						}),
+						V && /* @__PURE__ */ c(s, {
+							name: "CheckDefault",
+							width: "24px",
+							className: "text-green"
+						}),
+						/* @__PURE__ */ c(s, {
+							name: "ArrowDefaultDown",
+							width: "24px",
+							className: e("text-black transition-transform", { "rotate-180": j })
+						})
+					]
+				})]
+			}), /* @__PURE__ */ c("div", {
+				role: "listbox",
+				"aria-multiselectable": "true",
+				"aria-hidden": !j && !P,
+				className: e("absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]", {
+					"animate-zoom-in": j,
+					"animate-zoom-out": !j && P,
+					"opacity-0 scale-90 pointer-events-none": !j && !P
+				}),
+				children: v ? v.map((t, n) => /* @__PURE__ */ l("div", {
+					className: e({ "mt-16 first:mt-0": n > 0 }),
+					children: [t.label && /* @__PURE__ */ c("p", {
+						className: "text-b4 text-darkGrey font-semibold mb-8 ps-4",
+						children: t.label
+					}), U(t.options)]
+				}, n)) : U(R)
+			})]
+		})
+	});
+}
+//#endregion
+export { d as CheckboxSelect };
+
+//# sourceMappingURL=CheckboxSelect.js.map

package/ui/forms/CheckboxSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxSelect.js","names":[],"sources":["../../../lib/ui/forms/CheckboxSelect.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useEffect, type ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { Icon } from '@clubmed/trident-icons';\nimport { Checkbox } from './checkboxes/Checkbox';\nimport type { ValidationStatus } from '../hooks/useInternalStatus';\nimport { FormControl } from './FormControl';\nimport { useDropdown } from '../Dropdown';\n\nfunction OptionLabel({ children, selected }: { children: ReactNode; selected: boolean }) {\n  return (\n    <span\n      ref={(el) => {\n        if (el) el.title = el.textContent ?? '';\n      }}\n      className={clsx('text-b3 text-black truncate', { 'font-semibold': selected })}\n    >\n      {children}\n    </span>\n  );\n}\n\nexport interface CheckboxSelectOption<Value = string> {\n  value: Value;\n  label: ReactNode;\n}\n\nexport interface CheckboxSelectGroup<Value = string> {\n  label?: ReactNode;\n  options: CheckboxSelectOption<Value>[];\n}\n\nexport interface CheckboxSelectProps<Value = string> {\n  id?: string;\n  name?: string;\n  label?: ReactNode;\n  description?: string;\n  placeholder?: string;\n  value?: Value[];\n  options?: CheckboxSelectOption<Value>[];\n  groups?: CheckboxSelectGroup<Value>[];\n  onChange?: (name: string, value: Value[]) => void;\n  disabled?: boolean;\n  required?: boolean;\n  hideRequiredStar?: boolean;\n  validationStatus?: ValidationStatus;\n  errorMessage?: string;\n  className?: string;\n  'data-testid'?: string;\n  /** Renders the selected values summary in the trigger */\n  renderValue?: (selected: Value[]) => ReactNode;\n}\n\nexport function CheckboxSelect<Value = string>({\n  id: idProp,\n  name: nameProp,\n  label,\n  description,\n  placeholder = 'Select...',\n  value: controlledValue,\n  options,\n  groups,\n  onChange,\n  disabled = false,\n  required = false,\n  hideRequiredStar,\n  validationStatus = 'default',\n  errorMessage,\n  className,\n  'data-testid': dataTestId,\n  renderValue,\n}: CheckboxSelectProps<Value>) {\n  const internalId = useId();\n  const id = idProp ?? internalId;\n  const name = nameProp ?? id;\n\n  const { open, toggle, containerRef, isLeaving } = useDropdown();\n  const [selected, setSelected] = useState<Value[]>(controlledValue ?? []);\n\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setSelected(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const toggleOption = (val: Value) => {\n    const next = selected.includes(val) ? selected.filter((v) => v !== val) : [...selected, val];\n    setSelected(next);\n    onChange?.(name, next);\n  };\n\n  const allOptions: CheckboxSelectOption<Value>[] = options\n    ? options\n    : (groups ?? []).flatMap((g) => g.options);\n\n  const triggerLabel =\n    selected.length === 0 ? (\n      <span className=\"text-darkGrey\">{placeholder}</span>\n    ) : renderValue ? (\n      renderValue(selected)\n    ) : (\n      <span>\n        {allOptions\n          .filter((o) => selected.includes(o.value))\n          .map((o) => o.label)\n          .join(', ')}\n      </span>\n    );\n\n  const isError = validationStatus === 'error';\n  const isSuccess = validationStatus === 'success';\n  const isDisabled = disabled;\n\n  const renderOptions = (opts: CheckboxSelectOption<Value>[]) => (\n    <div className=\"flex flex-col gap-12\">\n      {opts.map((option, i) => (\n        <Checkbox\n          key={i}\n          name={name}\n          value={String(option.value)}\n          checked={selected.includes(option.value)}\n          disabled={disabled}\n          onChange={() => toggleOption(option.value)}\n        >\n          <OptionLabel selected={selected.includes(option.value)}>{option.label}</OptionLabel>\n        </Checkbox>\n      ))}\n    </div>\n  );\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={className}\n      dataName=\"CheckboxSelect\"\n      data-testid={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div ref={containerRef} className=\"relative\">\n        <button\n          type=\"button\"\n          id={id}\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-disabled={isDisabled}\n          disabled={isDisabled}\n          onClick={toggle}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none text-left flex items-center justify-between gap-8',\n            {\n              'bg-white text-black border-middleGrey focus:border-black active:border-black':\n                !isDisabled && !isError && !isSuccess,\n              'bg-pearl border-middleGrey text-grey': isDisabled,\n              'border-red bg-white': isError,\n              'border-green bg-white': isSuccess,\n            },\n          )}\n        >\n          <span className=\"truncate flex-1\">{triggerLabel}</span>\n          <span className=\"flex items-center gap-8 shrink-0\">\n            {isError && <Icon name=\"CrossDefault\" width=\"24px\" className=\"text-red\" />}\n            {isSuccess && <Icon name=\"CheckDefault\" width=\"24px\" className=\"text-green\" />}\n            <Icon\n              name=\"ArrowDefaultDown\"\n              width=\"24px\"\n              className={clsx('text-black transition-transform', { 'rotate-180': open })}\n            />\n          </span>\n        </button>\n\n        <div\n          role=\"listbox\"\n          aria-multiselectable=\"true\"\n          aria-hidden={!open && !isLeaving}\n          className={clsx(\n            'absolute z-10 top-[calc(100%+8px)] left-0 right-0 bg-white rounded-16 border border-lightGrey shadow-md p-12 origin-top will-change-[transform,opacity]',\n            {\n              'animate-zoom-in': open,\n              'animate-zoom-out': !open && isLeaving,\n              'opacity-0 scale-90 pointer-events-none': !open && !isLeaving,\n            },\n          )}\n        >\n          {groups\n            ? groups.map((group, gi) => (\n                <div key={gi} className={clsx({ 'mt-16 first:mt-0': gi > 0 })}>\n                  {group.label && (\n                    <p className=\"text-b4 text-darkGrey font-semibold mb-8 ps-4\">{group.label}</p>\n                  )}\n                  {renderOptions(group.options)}\n                </div>\n              ))\n            : renderOptions(allOptions)}\n        </div>\n      </div>\n    </FormControl>\n  );\n}\n"],"mappings":";;;;;;;;;AAUA,SAAS,EAAY,EAAE,aAAU,eAAwD;AACvF,QACE,kBAAC,QAAD;EACE,MAAM,MAAO;AACX,GAAI,MAAI,EAAG,QAAQ,EAAG,eAAe;;EAEvC,WAAW,EAAK,+BAA+B,EAAE,iBAAiB,GAAU,CAAC;EAE5E;EACI,CAAA;;AAmCX,SAAgB,EAA+B,EAC7C,IAAI,GACJ,MAAM,GACN,UACA,gBACA,iBAAc,aACd,OAAO,GACP,YACA,WACA,aACA,cAAW,IACX,cAAW,IACX,qBACA,sBAAmB,WACnB,iBACA,cACA,eAAe,GACf,kBAC6B;CAC7B,IAAM,IAAa,GAAO,EACpB,IAAK,KAAU,GACf,IAAO,KAAY,GAEnB,EAAE,SAAM,WAAQ,iBAAc,iBAAc,GAAa,EACzD,CAAC,GAAU,KAAe,EAAkB,KAAmB,EAAE,CAAC;AAExE,SAAgB;AACd,EAAI,MAAoB,KAAA,KACtB,EAAY,EAAgB;IAE7B,CAAC,EAAgB,CAAC;CAErB,IAAM,KAAgB,MAAe;EACnC,IAAM,IAAO,EAAS,SAAS,EAAI,GAAG,EAAS,QAAQ,MAAM,MAAM,EAAI,GAAG,CAAC,GAAG,GAAU,EAAI;AAE5F,EADA,EAAY,EAAK,EACjB,IAAW,GAAM,EAAK;IAGlB,IAA4C,MAE7C,KAAU,EAAE,EAAE,SAAS,MAAM,EAAE,QAAQ,EAEtC,IACJ,EAAS,WAAW,IAClB,kBAAC,QAAD;EAAM,WAAU;YAAiB;EAAmB,CAAA,GAClD,IACF,EAAY,EAAS,GAErB,kBAAC,QAAD,EAAA,UACG,EACE,QAAQ,MAAM,EAAS,SAAS,EAAE,MAAM,CAAC,CACzC,KAAK,MAAM,EAAE,MAAM,CACnB,KAAK,KAAK,EACR,CAAA,EAGL,IAAU,MAAqB,SAC/B,IAAY,MAAqB,WACjC,IAAa,GAEb,KAAiB,MACrB,kBAAC,OAAD;EAAK,WAAU;YACZ,EAAK,KAAK,GAAQ,MACjB,kBAAC,GAAD;GAEQ;GACN,OAAO,OAAO,EAAO,MAAM;GAC3B,SAAS,EAAS,SAAS,EAAO,MAAM;GAC9B;GACV,gBAAgB,EAAa,EAAO,MAAM;aAE1C,kBAAC,GAAD;IAAa,UAAU,EAAS,SAAS,EAAO,MAAM;cAAG,EAAO;IAAoB,CAAA;GAC3E,EARJ,EAQI,CAAA;EAET,CAAA;AAGR,QACE,kBAAC,GAAD;EACM;EACG;EACM;EACF;EACX,UAAS;EACT,eAAa;EACH;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GAAK,KAAK;GAAc,WAAU;aAAlC,CACE,kBAAC,UAAD;IACE,MAAK;IACD;IACJ,iBAAc;IACd,iBAAe;IACf,iBAAe;IACf,UAAU;IACV,SAAS;IACT,WAAW,EACT,6IACA;KACE,gFACE,CAAC,KAAc,CAAC,KAAW,CAAC;KAC9B,wCAAwC;KACxC,uBAAuB;KACvB,yBAAyB;KAC1B,CACF;cAjBH,CAmBE,kBAAC,QAAD;KAAM,WAAU;eAAmB;KAAoB,CAAA,EACvD,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,KAAW,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,WAAU;OAAa,CAAA;MACzE,KAAa,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,WAAU;OAAe,CAAA;MAC9E,kBAAC,GAAD;OACE,MAAK;OACL,OAAM;OACN,WAAW,EAAK,mCAAmC,EAAE,cAAc,GAAM,CAAA;OACzE,CAAA;;;OAIN,kBAAC,OAAD;IACE,MAAK;IACL,wBAAqB;IACrB,eAAa,CAAC,KAAQ,CAAC;IACvB,WAAW,EACT,2JACA;KACE,mBAAmB;KACnB,oBAAoB,CAAC,KAAQ;KAC7B,0CAA0C,CAAC,KAAQ,CAAC;KACrD,CACF;cAEA,IACG,EAAO,KAAK,GAAO,MACjB,kBAAC,OAAD;KAAc,WAAW,EAAK,EAAE,oBAAoB,IAAK,GAAG,CAAC;eAA7D,CACG,EAAM,SACL,kBAAC,KAAD;MAAG,WAAU;gBAAiD,EAAM;MAAU,CAAA,EAE/E,EAAc,EAAM,QAAQ,CAAA;OAJrB,EAKJ,CACN,GACF,EAAc,EAAA;IACd,CAAA,CAAA;;EAEI,CAAA"}

package/ui/forms/Filter.d.ts

@@ -1,9 +1,13 @@
-import { FormControlProps } from './FormControl';
-export interface FilterProps<Value = string> extends FormControlProps<Value> {
+import { ComponentPropsWithoutRef } from 'react';
+export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
     /**
      * Is it attached to a dropdown?
      */
     hasDropdown?: boolean;
-    onChange?: (name: string, value: Value | null) => void;
+    /**
+     * @deprecated use ["data-testid"] instead
+     */
+    dataTestId?: string;
+    'data-testid'?: string;
 }
-export declare function Filter<Value = string>(props: FilterProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function Filter(props: FilterProps): import("react/jsx-runtime").JSX.Element;

package/ui/forms/Filter.js

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

package/ui/forms/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport { useValue } from '../hooks/useValue';\nimport type { FormControlProps } from './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"],"mappings":";;;;;;;AAgBA,SAAgB,EAAuB,GAA2B;CAChE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,SAAS,IAAiB,IAC1B,UACA,cAAW,GACX,sBAAmB,WACnB,iBACA,aACA,gBACA,aACA,GAAG,MACD,GAEE,EAAE,OAAO,GAAS,gBAAa,EAAkB;EACrD;EACA,cAAc;EACd,SAAS,GAAM,GAAS;AACtB,OAAW,GAAM,IAAY,MAAU,KAAA,IAAoB,IAAR,IAA6B,KAAK;;EAExF,CAAC,EAOI,IALiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,KAEmD,WAAW;AAEhE,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YAA3C,CACE,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACE;IACN,eAAa;IACb,MAAK;IACK;IACV,gBAAgB;AACd,KAAK,KAAU,EAAS,CAAC,EAAQ;;IAE1B;IACT,aAAU;IACA;IACH;IACP,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAiB;KAAgB,CAAA;IAEjD,kBAAC,GAAD;KAAM,WAAU;KAAQ,OAAO;KAAM,MAAK;KAAe,OAAM;KAAU,CAAA;IAExE,KACC,kBAAC,GAAD;KAAM,MAAK;KAAmB,WAAU;KAAO,OAAM;KAAO,OAAM;KAAU,CAAA;IAEzE,EAAA,CAAA,CACD;MAEP,KACC,kBAAC,QAAD;GAAM,WAAU;GAAoD,MAAK;aAAzE,CACE,kBAAC,GAAD;IAAM,MAAK;IAAQ,OAAM;IAAS,CAAA,EACjC,EACI;KAEL"}
+{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n  /**\n   * Is it attached to a dropdown?\n   */\n  hasDropdown?: boolean;\n  /**\n   * @deprecated use [\"data-testid\"] instead\n   */\n  dataTestId?: string;\n  'data-testid'?: string;\n}\n\nexport function Filter(props: FilterProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled = false,\n    'data-testid': dataTestIdProp,\n    tabIndex = 0,\n    hasDropdown,\n    children,\n    ...rest\n  } = props;\n\n  return (\n    <div className={clsx(className, 'relative')}>\n      <label data-testid={`filter-container-${id}`} className=\"relative\">\n        <input\n          {...rest}\n          id={id}\n          name={name}\n          data-testid={dataTestIdProp ?? dataTestId}\n          type=\"checkbox\"\n          tabIndex={tabIndex}\n          data-name=\"Filter\"\n          disabled={disabled}\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    </div>\n  );\n}\n"],"mappings":";;;;;AAgBA,SAAgB,EAAO,GAAoB;CACzC,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,eAAe,GACf,cAAW,GACX,gBACA,aACA,GAAG,MACD;AAEJ,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YACzC,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACN,eAAa,KAAkB;IAC/B,MAAK;IACK;IACV,aAAU;IACA;IACV,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAiB;KAAgB,CAAA;IAEjD,kBAAC,GAAD;KAAM,WAAU;KAAQ,OAAO;KAAM,MAAK;KAAe,OAAM;KAAU,CAAA;IAExE,KACC,kBAAC,GAAD;KAAM,MAAK;KAAmB,WAAU;KAAO,OAAM;KAAO,OAAM;KAAU,CAAA;IAEzE,EAAA,CAAA,CACD;;EACJ,CAAA"}

package/ui/forms/FormControl.js

@@ -1,11 +1,11 @@
 import { t as e } from "../../chunks/clsx.js";
-import { useInternalStatus as t } from "../hooks/useInternalStatus.js";
-import { FormLabel as n } from "./FormLabel.js";
-import { FormControlError as r } from "./FormControlError.js";
+import { FormControlError as t } from "./FormControlError.js";
+import { useInternalStatus as n } from "../hooks/useInternalStatus.js";
+import { FormLabel as r } from "./FormLabel.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region lib/ui/forms/FormControl.tsx
 var o = ({ id: o, label: s, description: c, disabled: l, required: u, className: d, validationStatus: f = "default", children: p, errorMessage: m, dataTestId: h, "data-testid": g, dataName: _, labelClassName: v, hideRequiredStar: y, layout: b, inline: x }) => {
-	let S = t({
+	let S = n({
 		isDisabled: !!l,
 		validationStatus: f
 	}) === "error" && m;
@@ -14,7 +14,7 @@ var o = ({ id: o, label: s, description: c, disabled: l, required: u, className:
 		"data-name": _,
 		"data-testid": g ?? h,
 		children: [
-			s && o && /* @__PURE__ */ i(n, {
+			s && o && /* @__PURE__ */ i(r, {
 				description: c,
 				id: o,
 				layout: b,
@@ -24,7 +24,7 @@ var o = ({ id: o, label: s, description: c, disabled: l, required: u, className:
 				children: s
 			}),
 			p,
-			S && /* @__PURE__ */ i(r, { children: m })
+			S && /* @__PURE__ */ i(t, { children: m })
 		]
 	});
 };

package/ui/forms/NumberField.d.ts

@@ -34,14 +34,11 @@ export declare function useNumberField(props: NumberFieldProps): {
     errorMessage?: string;
     color?: string | undefined | undefined;
     size?: number | undefined | undefined;
-    description?: string | undefined;
-    layout?: "horizontal" | `horizontal-${string}` | "vertical" | undefined;
-    required?: boolean | undefined | undefined;
-    hideRequiredStar?: boolean | undefined;
-    className?: string | undefined | undefined;
+    content?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    prefix?: string | undefined | undefined;
     children?: import('react').ReactNode;
-    form?: string | undefined | undefined;
-    htmlFor?: string | undefined | undefined;
+    className?: string | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -62,14 +59,11 @@ export declare function useNumberField(props: NumberFieldProps): {
     style?: import('react').CSSProperties | undefined;
     tabIndex?: number | undefined | undefined;
     title?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;
     role?: import('react').AriaRole | undefined;
     about?: string | undefined | undefined;
-    content?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
-    prefix?: string | undefined | undefined;
     property?: string | undefined | undefined;
     rel?: string | undefined | undefined;
     resource?: string | undefined | undefined;
@@ -317,6 +311,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     onTransitionRunCapture?: (import('react').TransitionEventHandler<HTMLInputElement> & import('react').TransitionEventHandler<HTMLLabelElement>) | undefined;
     onTransitionStart?: (import('react').TransitionEventHandler<HTMLInputElement> & import('react').TransitionEventHandler<HTMLLabelElement>) | undefined;
     onTransitionStartCapture?: (import('react').TransitionEventHandler<HTMLInputElement> & import('react').TransitionEventHandler<HTMLLabelElement>) | undefined;
+    form?: string | undefined | undefined;
     list?: string | undefined | undefined;
     pattern?: string | undefined | undefined;
     width?: number | string | undefined | undefined;
@@ -336,9 +331,14 @@ export declare function useNumberField(props: NumberFieldProps): {
     multiple?: boolean | undefined | undefined;
     placeholder?: string | undefined | undefined;
     readOnly?: boolean | undefined | undefined;
+    required?: boolean | undefined | undefined;
     src?: string | undefined | undefined;
     step?: number | string | undefined | undefined;
     type?: import('react').HTMLInputTypeAttribute | undefined;
+    description?: string | undefined;
+    layout?: "horizontal" | `horizontal-${string}` | "vertical" | undefined;
+    hideRequiredStar?: boolean | undefined;
+    htmlFor?: string | undefined | undefined;
 };
 export declare const NumberField: (props: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/ui/forms/NumberField.js

@@ -1,7 +1,7 @@
 import { t as e } from "../../chunks/clsx.js";
 import { Button as t } from "../buttons/Button.js";
-import { useValue as n } from "../hooks/useValue.js";
-import { FormControl as r } from "./FormControl.js";
+import { FormControl as n } from "./FormControl.js";
+import { useValue as r } from "../hooks/useValue.js";
 import { useId as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region lib/ui/forms/NumberField.tsx
@@ -10,7 +10,7 @@ var s = {
 	height: "28px"
 };
 function c(e) {
-	let t = i(), { id: r = t, name: a = r, value: o = 0, onChange: s, min: c = 0, max: l = 10, disabled: u = !1, dataTestId: d = "NumberField", inline: f = !0, labels: p, ...m } = e, { value: h, setValue: g } = n({
+	let t = i(), { id: n = t, name: a = n, value: o = 0, onChange: s, min: c = 0, max: l = 10, disabled: u = !1, dataTestId: d = "NumberField", inline: f = !0, labels: p, ...m } = e, { value: h, setValue: g } = r({
 		name: a,
 		defaultValue: o,
 		formatter: Number,
@@ -25,7 +25,7 @@ function c(e) {
 	};
 	return {
 		...m,
-		id: r,
+		id: n,
 		min: c,
 		max: l,
 		name: a,
@@ -39,13 +39,13 @@ function c(e) {
 		decrease: y
 	};
 }
-var l = (n) => {
-	let { disabled: i, min: l, max: u, label: d, description: f, id: p, dataTestId: m, value: h, handleChange: g, increase: _, decrease: v, errorMessage: y, validationStatus: b, hideRequiredStar: x, required: S, inline: C, labels: w, ...T } = c(n);
-	return /* @__PURE__ */ a(r, {
+var l = (r) => {
+	let { disabled: i, min: l, max: u, label: d, description: f, id: p, dataTestId: m, value: h, handleChange: g, increase: _, decrease: v, errorMessage: y, validationStatus: b, hideRequiredStar: x, required: S, inline: C, labels: w, ...T } = c(r);
+	return /* @__PURE__ */ a(n, {
 		id: p,
 		label: d,
 		description: f,
-		className: e("flex items-center", n.className),
+		className: e("flex items-center", r.className),
 		dataName: "NumberField",
 		dataTestId: m,
 		errorMessage: y,

package/ui/forms/PhoneField.d.ts

@@ -1,22 +1,17 @@
+import { IconicTypes } from '@clubmed/trident-icons';
 import { FormControlProps } from './FormControl';
-import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
-import { PhonePrefix } from '../helpers/phone';
+import { PhoneFieldFullProps } from './PhoneFieldFullInput';
+import { PhoneFieldSplitProps } from './PhoneFieldSplitInput';
 export interface PhoneValue {
     full: string;
     prefix?: string;
     number?: string;
     raw: string;
 }
-export interface PhoneFieldProps<Value = PhoneValue> extends FormControlProps<Value> {
+export type PhoneFieldProps<Value = PhoneValue> = FormControlProps<Value> & PhoneFieldFullProps & PhoneFieldSplitProps & {
     mode?: 'full' | 'split';
     pattern?: string;
-    prefixes?: PhonePrefix[];
-    defaultPrefix?: string;
-    description?: string;
-    icon?: IconicNames;
     iconType?: IconicTypes;
-    errorMessage?: string;
-    dataTestId?: string;
     placeholder?: string;
-}
+};
 export declare const PhoneField: <Value = PhoneValue>(props: PhoneFieldProps<Value>) => import("react/jsx-runtime").JSX.Element;