@clubmed/trident-ui 2.0.0-beta.30 → 2.0.0-beta.33

package/chunks/DateField.js

@@ -1,7 +1,7 @@
 import { t as e } from "./clsx.js";
 import { useInternalStatus as t } from "../ui/hooks/useInternalStatus.js";
-import { useValue as n } from "../ui/hooks/useValue.js";
-import { FormControl as r } from "../ui/forms/FormControl.js";
+import { FormControl as n } from "../ui/forms/FormControl.js";
+import { useValue as r } from "../ui/hooks/useValue.js";
 import { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { Icon as l } from "@clubmed/trident-icons";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
@@ -74,7 +74,7 @@ var S = (e) => !e || !v(new Date(e)) ? "" : x(new Date(e), { representation: "da
 	let p = o(), { id: m = p, name: h = m, label: g, description: _, openDatepicker: v, validationStatus: b = "default", icon: x = "CalendarDefault", iconType: w, errorMessage: T, disabled: E = !1, required: D = !1, hideRequiredStar: O, dataTestId: k = "DateField", value: A, min: j, max: M, onChange: N, className: P, ...F } = f, I = s(null), [L, R] = c(!1), z = t({
 		isDisabled: E,
 		validationStatus: b
-	}), { setValue: B, value: V } = n({
+	}), { setValue: B, value: V } = r({
 		name: h,
 		formatter: S,
 		initialValue: A,
@@ -113,7 +113,7 @@ var S = (e) => !e || !v(new Date(e)) ? "" : x(new Date(e), { representation: "da
 		j,
 		L,
 		V
-	]), /* @__PURE__ */ u(r, {
+	]), /* @__PURE__ */ u(n, {
 		id: m,
 		label: g,
 		description: _,

package/examples/checkbox-select-demo.d.ts

@@ -0,0 +1 @@
+export default function CheckboxSelectDemo(): import("react/jsx-runtime").JSX.Element;

package/examples/checkbox-select-demo.js

@@ -0,0 +1,101 @@
+"use client";
+import { CheckboxSelect as e } from "../ui/forms/CheckboxSelect.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region lib/examples/checkbox-select-demo.tsx
+var i = [
+	{
+		value: "open",
+		label: "Open"
+	},
+	{
+		value: "fixed",
+		label: "Fixed"
+	},
+	{
+		value: "in-progress",
+		label: "In Progress"
+	},
+	{
+		value: "closed",
+		label: "Closed"
+	}
+];
+function a() {
+	let [a, o] = t(["open"]), [s, c] = t([]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-24",
+		style: { minWidth: 300 },
+		children: [
+			/* @__PURE__ */ n(e, {
+				label: "Status",
+				placeholder: "Select statuses...",
+				options: i,
+				value: a,
+				onChange: (e, t) => o(t)
+			}),
+			/* @__PURE__ */ n(e, {
+				label: "Category",
+				placeholder: "Select categories...",
+				groups: [{
+					label: "Travel",
+					options: [{
+						value: "flight",
+						label: "Flight"
+					}, {
+						value: "hotel",
+						label: "Hotel"
+					}]
+				}, {
+					label: "Activities",
+					options: [
+						{
+							value: "ski",
+							label: "Ski"
+						},
+						{
+							value: "golf",
+							label: "Golf"
+						},
+						{
+							value: "spa",
+							label: "Spa"
+						}
+					]
+				}],
+				value: s,
+				onChange: (e, t) => c(t),
+				renderValue: (e) => `${e.length} selected`
+			}),
+			/* @__PURE__ */ n(e, {
+				label: "Priority",
+				options: [
+					{
+						value: "high",
+						label: "High"
+					},
+					{
+						value: "medium",
+						label: "Medium"
+					},
+					{
+						value: "low",
+						label: "Low"
+					}
+				],
+				validationStatus: "error",
+				errorMessage: "Please select at least one priority"
+			}),
+			/* @__PURE__ */ n(e, {
+				label: "Tags",
+				options: i,
+				value: ["open"],
+				disabled: !0
+			})
+		]
+	});
+}
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=checkbox-select-demo.js.map

package/examples/checkbox-select-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-select-demo.js","names":[],"sources":["../../lib/examples/checkbox-select-demo.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { CheckboxSelect } from '@/ui/forms/CheckboxSelect';\n\nconst statusOptions = [\n  { value: 'open', label: 'Open' },\n  { value: 'fixed', label: 'Fixed' },\n  { value: 'in-progress', label: 'In Progress' },\n  { value: 'closed', label: 'Closed' },\n];\n\nexport default function CheckboxSelectDemo() {\n  const [status, setStatus] = useState<string[]>(['open']);\n  const [categories, setCategories] = useState<string[]>([]);\n\n  return (\n    <div className=\"space-y-24\" style={{ minWidth: 300 }}>\n      <CheckboxSelect\n        label=\"Status\"\n        placeholder=\"Select statuses...\"\n        options={statusOptions}\n        value={status}\n        onChange={(_, v) => setStatus(v)}\n      />\n\n      <CheckboxSelect\n        label=\"Category\"\n        placeholder=\"Select categories...\"\n        groups={[\n          {\n            label: 'Travel',\n            options: [\n              { value: 'flight', label: 'Flight' },\n              { value: 'hotel', label: 'Hotel' },\n            ],\n          },\n          {\n            label: 'Activities',\n            options: [\n              { value: 'ski', label: 'Ski' },\n              { value: 'golf', label: 'Golf' },\n              { value: 'spa', label: 'Spa' },\n            ],\n          },\n        ]}\n        value={categories}\n        onChange={(_, v) => setCategories(v)}\n        renderValue={(vals) => `${vals.length} selected`}\n      />\n\n      <CheckboxSelect\n        label=\"Priority\"\n        options={[\n          { value: 'high', label: 'High' },\n          { value: 'medium', label: 'Medium' },\n          { value: 'low', label: 'Low' },\n        ]}\n        validationStatus=\"error\"\n        errorMessage=\"Please select at least one priority\"\n      />\n\n      <CheckboxSelect label=\"Tags\" options={statusOptions} value={['open']} disabled />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,IAAM,IAAgB;CACpB;EAAE,OAAO;EAAQ,OAAO;EAAQ;CAChC;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAe,OAAO;EAAe;CAC9C;EAAE,OAAO;EAAU,OAAO;;CAC3B;AAED,SAAwB,IAAqB;CAC3C,IAAM,CAAC,GAAQ,KAAa,EAAmB,CAAC,OAAO,CAAC,EAClD,CAAC,GAAY,KAAiB,EAAmB,EAAE,CAAC;AAE1D,QACE,kBAAC,OAAD;EAAK,WAAU;EAAa,OAAO,EAAE,UAAU,KAAK;YAApD;GACE,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,SAAS;IACT,OAAO;IACP,WAAW,GAAG,MAAM,EAAU,EAAA;IAC9B,CAAA;GAEF,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,QAAQ,CACN;KACE,OAAO;KACP,SAAS,CACP;MAAE,OAAO;MAAU,OAAO;MAAU,EACpC;MAAE,OAAO;MAAS,OAAO;MAAS,CAAA;KAErC,EACD;KACE,OAAO;KACP,SAAS;MACP;OAAE,OAAO;OAAO,OAAO;OAAO;MAC9B;OAAE,OAAO;OAAQ,OAAO;OAAQ;MAChC;OAAE,OAAO;OAAO,OAAO;;;KAE1B,CACF;IACD,OAAO;IACP,WAAW,GAAG,MAAM,EAAc,EAAE;IACpC,cAAc,MAAS,GAAG,EAAK,OAAO;IACtC,CAAA;GAEF,kBAAC,GAAD;IACE,OAAM;IACN,SAAS;KACP;MAAE,OAAO;MAAQ,OAAO;MAAQ;KAChC;MAAE,OAAO;MAAU,OAAO;MAAU;KACpC;MAAE,OAAO;MAAO,OAAO;;KACxB;IACD,kBAAiB;IACjB,cAAa;IACb,CAAA;GAEF,kBAAC,GAAD;IAAgB,OAAM;IAAO,SAAS;IAAe,OAAO,CAAC,OAAO;IAAE,UAAA;IAAW,CAAA"}

package/examples/checkboxes-with-form-control-demo.js

@@ -1,14 +1,14 @@
 "use client";
 import { Checkbox as e } from "../ui/forms/checkboxes/Checkbox.js";
-import { Checkboxes as t } from "../ui/forms/checkboxes/Checkboxes.js";
-import { FormControl as n } from "../ui/forms/FormControl.js";
+import { FormControl as t } from "../ui/forms/FormControl.js";
+import { Checkboxes as n } from "../ui/forms/checkboxes/Checkboxes.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/examples/checkboxes-with-form-control-demo.tsx
 function a() {
-	return /* @__PURE__ */ r(n, {
+	return /* @__PURE__ */ r(t, {
 		label: "Select options",
 		description: "Choose one or more options",
-		children: /* @__PURE__ */ i(t, {
+		children: /* @__PURE__ */ i(n, {
 			name: "options",
 			"aria-labelledby": "options-label",
 			children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "2.0.0-beta.30",
+  "version": "2.0.0-beta.33",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/styles/ui/button.css

@@ -3,7 +3,7 @@
     @apply border;
     @apply border-solid;
     @apply font-sans;
-    @apply font-semibold;
+    font-weight: 600;
     transition-duration: 200ms;
     column-gap: 8px;
     align-items: center;

package/styles/ui/range.css

@@ -159,7 +159,7 @@
     color: hsl(0deg 0% 0%);
     font-size: 0.75rem;
     line-height: 0.875rem;
-    @apply font-semibold;
+    font-weight: 600;
 
     left: calc(0.5 * var(--thumbWidth));
   }

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":"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"}

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/Select.js

@@ -1,13 +1,13 @@
 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 { 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 { Icon as a } from "@clubmed/trident-icons";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region lib/ui/forms/Select.tsx
 var c = (c) => {
-	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", iconType: g, errorMessage: _, disabled: v = !1, required: y = !1, hideRequiredStar: b, className: x, dataTestId: S = u, onChange: C, children: w, ...T } = c, { value: E, setValue: D } = n({
+	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", iconType: g, errorMessage: _, disabled: v = !1, required: y = !1, hideRequiredStar: b, className: x, dataTestId: S = u, onChange: C, children: w, ...T } = c, { value: E, setValue: D } = r({
 		name: d,
 		initialValue: p,
 		onChange: C
@@ -15,7 +15,7 @@ var c = (c) => {
 		isDisabled: v,
 		validationStatus: h
 	});
-	return /* @__PURE__ */ o(r, {
+	return /* @__PURE__ */ o(n, {
 		id: u,
 		className: x,
 		label: f,

package/ui/forms/TextField.js

@@ -1,13 +1,13 @@
 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 { 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 { Icon as a } from "@clubmed/trident-icons";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region lib/ui/forms/TextField.tsx
 var c = (c) => {
-	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", icon: g, iconType: _, errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, className: S, dataTestId: C = "TextField", hasDropdown: w = !1, clear: T = "", iconFirst: E = !0, onChange: D, formatter: O, ...k } = c, { value: A, setValue: j } = n({
+	let l = i(), { id: u = l, name: d = u, label: f, value: p, description: m, validationStatus: h = "default", icon: g, iconType: _, errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, className: S, dataTestId: C = "TextField", hasDropdown: w = !1, clear: T = "", iconFirst: E = !0, onChange: D, formatter: O, ...k } = c, { value: A, setValue: j } = r({
 		name: d,
 		initialValue: p,
 		onChange: D,
@@ -16,7 +16,7 @@ var c = (c) => {
 		isDisabled: y,
 		validationStatus: h
 	}), N = !y && A !== "" && A != null && !!T;
-	return /* @__PURE__ */ o(r, {
+	return /* @__PURE__ */ o(n, {
 		id: u,
 		label: f,
 		className: S,

package/ui/forms/password/Password.js

@@ -1,7 +1,7 @@
 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 { FormControl as r } from "../FormControl.js";
+import { FormControl as n } from "../FormControl.js";
+import { useValue as r } from "../../hooks/useValue.js";
 import { ValidationMessage as i } from "./ValidationMessage.js";
 import { useEffect as a, useId as o, useState as s } from "react";
 import { Icon as c } from "@clubmed/trident-icons";
@@ -11,7 +11,7 @@ function d(d) {
 	let f = o(), { id: p = f, name: m = p, label: h, value: g, disabled: _ = !1, required: v = !1, hideRequiredStar: y, validationStatus: b = "default", errorMessage: x, validationMessages: S = [], withoutFieldValidation: C = !1, className: w, onChange: T, dataTestId: E = "Password", ...D } = d, O = t({
 		isDisabled: _,
 		validationStatus: b
-	}), { value: k, setValue: A } = n({
+	}), { value: k, setValue: A } = r({
 		name: m,
 		initialValue: g,
 		onChange: T
@@ -20,7 +20,7 @@ function d(d) {
 		M(_ ? "password" : j);
 	}, [j, _]);
 	let N = () => M(j === "password" ? "text" : "password");
-	return /* @__PURE__ */ u(r, {
+	return /* @__PURE__ */ u(n, {
 		className: w,
 		id: p,
 		label: h,