@clubmed/trident-ui 2.0.0-beta.7 → 2.0.0-beta.74

package/ui/forms/PhoneFieldSplitInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneFieldSplitInput.js","names":[],"sources":["../../../lib/ui/forms/PhoneFieldSplitInput.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  calculateCursorPosition,\n  DEFAULT_PHONE_PREFIXES,\n  extractDigits,\n  formatPhoneDigits,\n  formatWithPattern,\n  getLiteralPrefixInfo,\n  type PhonePrefix,\n  stripLiteralPrefix,\n} from '../helpers/phone';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport type { FormControlProps } from './FormControl';\nimport type { PhoneValue } from './PhoneField';\n\ntype PhoneFieldChangeHandler = (event: Event, value: PhoneValue) => void;\n\nexport interface PhoneFieldSplitProps {\n  prefixes?: PhonePrefix[];\n  defaultPrefix?: string;\n}\n\nconst usePhoneField = (args: {\n  externalValue?: PhoneValue;\n  pattern: string;\n  defaultPrefix: string;\n  onChange?: PhoneFieldChangeHandler;\n}) => {\n  const { externalValue, pattern, defaultPrefix, onChange } = args;\n  const numberInputRef = useRef<HTMLInputElement>(null);\n  const cursorPositionRef = useRef<number | null>(null);\n  const [prefix, setPrefix] = useState(defaultPrefix);\n  const [number, setNumber] = useState('');\n\n  const emitChange = useCallback(\n    (event: Event, nextPrefix: string, nextNumber: string) => {\n      if (nextPrefix === prefix && nextNumber === number) {\n        return;\n      }\n\n      const full = `${nextPrefix} ${nextNumber}`.trim();\n\n      onChange?.(event, {\n        full,\n        prefix: nextPrefix,\n        number: nextNumber,\n        raw: extractDigits(full),\n      });\n    },\n    [number, onChange, prefix],\n  );\n\n  useEffect(() => {\n    if (cursorPositionRef.current !== null && numberInputRef.current) {\n      numberInputRef.current.setSelectionRange(\n        cursorPositionRef.current,\n        cursorPositionRef.current,\n      );\n      cursorPositionRef.current = null;\n    }\n  }, [number]);\n\n  useEffect(() => {\n    if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n      setPrefix(externalValue.prefix || defaultPrefix);\n      setNumber(externalValue.number || '');\n    }\n  }, [externalValue, defaultPrefix]);\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key !== 'Backspace' && e.key !== 'Delete') {\n        return;\n      }\n\n      const cursorPosition = e.currentTarget.selectionStart || 0;\n      const selectionEnd = e.currentTarget.selectionEnd || 0;\n\n      if (cursorPosition !== selectionEnd) {\n        return;\n      }\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n      const targetChar =\n        e.key === 'Backspace' ? number[cursorPosition - 1] : number[cursorPosition];\n\n      if (!targetChar || /\\d/.test(targetChar)) {\n        return;\n      }\n\n      e.preventDefault();\n\n      const allDigits = stripLiteralPrefix(extractDigits(number), literalPrefixDigits);\n      const digitsBeforeCursor = stripLiteralPrefix(\n        extractDigits(number.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      ).length;\n\n      let newDigits: string;\n      let targetCursorDigits: number;\n\n      if (e.key === 'Backspace') {\n        if (digitsBeforeCursor === 0) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n        targetCursorDigits = digitsBeforeCursor - 1;\n      } else {\n        if (digitsBeforeCursor >= allDigits.length) {\n          return;\n        }\n\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n        targetCursorDigits = digitsBeforeCursor;\n      }\n\n      const formatted = formatWithPattern(newDigits, pattern);\n      cursorPositionRef.current = calculateCursorPosition(\n        targetCursorDigits,\n        formatted,\n        literalPrefixDigits,\n      );\n\n      setNumber(formatted);\n\n      emitChange(e.nativeEvent, prefix, formatted);\n    },\n    [emitChange, pattern, number, prefix],\n  );\n\n  const onInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const formattedValue = formatPhoneDigits(\n        e.target.value,\n        pattern,\n        e.target.selectionStart || 0,\n      );\n      if (!formattedValue) return;\n\n      cursorPositionRef.current = formattedValue.nextCursor;\n      setNumber(formattedValue.formatted);\n\n      emitChange(e.nativeEvent, prefix, formattedValue.formatted);\n    },\n    [emitChange, pattern, prefix],\n  );\n\n  const onPrefixChange = useCallback(\n    (event: Event, newPrefix: string) => {\n      setPrefix(newPrefix);\n\n      emitChange(event, newPrefix, number);\n    },\n    [emitChange, number],\n  );\n\n  return { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange };\n};\n\nexport interface PhoneFieldSplitInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {\n  value?: PhoneValue;\n  pattern?: string;\n  prefixes?: PhoneFieldSplitProps['prefixes'];\n  defaultPrefix?: PhoneFieldSplitProps['defaultPrefix'];\n  iconType?: IconicTypes;\n  validationStatus?: FormControlProps<PhoneValue>['validationStatus'];\n  onChange?: (event: Event, value: PhoneValue) => void;\n}\n\nexport const PhoneFieldSplitInput = ({\n  id,\n  name,\n  value: externalValue,\n  pattern = '## ## ## ## ##',\n  prefixes = DEFAULT_PHONE_PREFIXES,\n  defaultPrefix = prefixes[0]?.code || '+1',\n  placeholder = '',\n  iconType,\n  disabled = false,\n  required = false,\n  validationStatus = 'default',\n  onChange,\n  ...rest\n}: PhoneFieldSplitInputProps) => {\n  const internalId = useId();\n  const resolvedId = id ?? internalId;\n  const resolvedName = name ?? resolvedId;\n\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const { numberInputRef, prefix, number, onKeyDown, onInputChange, onPrefixChange } =\n    usePhoneField({\n      externalValue,\n      pattern,\n      defaultPrefix,\n      onChange,\n    });\n\n  return (\n    <div className=\"flex gap-8\">\n      <div\n        className={clsx('relative rounded-pill z-0 flex-shrink-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        {/* Real select — invisible but interactive, uses fullLabel for dropdown options */}\n        <select\n          disabled={disabled}\n          value={prefix}\n          onChange={(e) => onPrefixChange(e.nativeEvent, e.target.value)}\n          className=\"peer opacity-0 absolute inset-0 w-full h-full cursor-pointer outline-none\"\n          id={`${resolvedId}-prefix`}\n          aria-label={`${resolvedName}-prefix`}\n        >\n          {(prefixes as PhonePrefix[]).map((p) => (\n            <option key={p.code} value={p.code}>\n              {p.fullLabel ?? p.label ?? p.code}\n            </option>\n          ))}\n        </select>\n\n        {/* Visible fake select showing the short label */}\n        <div\n          aria-hidden=\"true\"\n          className={clsx(\n            'text-b3 rounded-pill w-full border px-20 py-12 font-semibold pointer-events-none flex items-center justify-between gap-8 peer-focus-visible:ring-4 peer-focus-visible:ring-black peer-focus-visible:ring-offset-2',\n            {\n              'border-middleGrey': internalStatus === 'default',\n              'text-black bg-white': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey text-black': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span>{(prefixes as PhonePrefix[]).find((p) => p.code === prefix)?.label ?? prefix}</span>\n          <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n        </div>\n      </div>\n\n      <div className=\"relative flex-1\">\n        <input\n          {...(rest as Record<string, unknown>)}\n          ref={numberInputRef}\n          type=\"tel\"\n          disabled={disabled}\n          required={required}\n          value={number}\n          onChange={onInputChange}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            {\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\n              'pe-[52px]': internalStatus === 'error' || internalStatus === 'success',\n              'bg-white text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={`${resolvedName}-number`}\n          id={resolvedId}\n        />\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/forms/RadioSelect.d.ts

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

package/ui/forms/RadioSelect.js

@@ -0,0 +1,117 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { FormControl as t } from "./FormControl.js";
+import { useDropdown as n } from "../Dropdown.js";
+import { Radio as r } from "./radios/Radio.js";
+import { useEffect as i, useId as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Icon as l } from "@clubmed/trident-icons";
+//#region lib/ui/forms/RadioSelect.tsx
+function u({ children: t, selected: n }) {
+	return /* @__PURE__ */ s("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, close: N, containerRef: P, isLeaving: F } = n(), [I, L] = o(g);
+	i(() => {
+		g !== void 0 && L(g);
+	}, [g]);
+	let R = (e, t) => {
+		L(t), y?.(e, t), N();
+	}, z = _ || (v ?? []).flatMap((e) => e.options), B = z.find((e) => e.value === I), V = I === void 0 || !B ? /* @__PURE__ */ s("span", {
+		className: "text-darkGrey",
+		children: h
+	}) : D ? D(I) : /* @__PURE__ */ s("span", { children: B.label }), H = C === "error", U = C === "success", W = b, G = (e) => /* @__PURE__ */ s("div", {
+		className: "flex flex-col gap-12",
+		children: e.map((e, t) => /* @__PURE__ */ s(r, {
+			name: A,
+			value: String(e.value),
+			checked: I === e.value,
+			disabled: b,
+			onChange: (t) => R(t, e.value),
+			children: /* @__PURE__ */ s(u, {
+				selected: I === e.value,
+				children: e.label
+			})
+		}, t))
+	});
+	return /* @__PURE__ */ s(t, {
+		id: k,
+		label: p,
+		description: m,
+		className: T,
+		dataName: "RadioSelect",
+		"data-testid": E,
+		disabled: b,
+		required: x,
+		hideRequiredStar: S,
+		validationStatus: C,
+		errorMessage: w,
+		children: /* @__PURE__ */ c("div", {
+			ref: P,
+			className: "relative",
+			children: [/* @__PURE__ */ c("button", {
+				type: "button",
+				id: k,
+				"aria-haspopup": "listbox",
+				"aria-expanded": j,
+				"aria-disabled": W,
+				disabled: W,
+				onClick: M,
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 text-left flex items-center justify-between gap-8", {
+					"bg-white text-black border-middleGrey focus:border-black active:border-black": !W && !H && !U,
+					"bg-pearl border-middleGrey text-grey": W,
+					"border-red bg-white": H,
+					"border-green bg-white": U
+				}),
+				children: [/* @__PURE__ */ s("span", {
+					className: "truncate flex-1",
+					children: V
+				}), /* @__PURE__ */ c("span", {
+					className: "flex items-center gap-8 shrink-0",
+					children: [
+						H && /* @__PURE__ */ s(l, {
+							name: "CrossDefault",
+							width: "24px",
+							className: "text-red"
+						}),
+						U && /* @__PURE__ */ s(l, {
+							name: "CheckDefault",
+							width: "24px",
+							className: "text-green"
+						}),
+						/* @__PURE__ */ s(l, {
+							name: "ArrowDefaultDown",
+							width: "24px",
+							className: e("text-black transition-transform", { "rotate-180": j })
+						})
+					]
+				})]
+			}), /* @__PURE__ */ s("div", {
+				role: "listbox",
+				"aria-hidden": !j && !F,
+				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 pointer-events-none": !j && F,
+					"opacity-0 scale-90 pointer-events-none": !j && !F
+				}),
+				children: v ? v.map((t, n) => /* @__PURE__ */ c("div", {
+					className: e({ "mt-16 first:mt-0": n > 0 }),
+					children: [t.label && /* @__PURE__ */ s("p", {
+						className: "text-b4 text-darkGrey font-semibold mb-8 ps-4",
+						children: t.label
+					}), G(t.options)]
+				}, n)) : G(z)
+			})]
+		})
+	});
+}
+//#endregion
+export { d as RadioSelect };
+
+//# sourceMappingURL=RadioSelect.js.map

package/ui/forms/RadioSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioSelect.js","names":[],"sources":["../../../lib/ui/forms/RadioSelect.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useEffect, type ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { Icon } from '@clubmed/trident-icons';\nimport { Radio } from './radios/Radio';\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 RadioSelectOption<Value = string> {\n  value: Value;\n  label: ReactNode;\n}\n\nexport interface RadioSelectGroup<Value = string> {\n  label?: ReactNode;\n  options: RadioSelectOption<Value>[];\n}\n\nexport interface RadioSelectProps<Value = string> {\n  id?: string;\n  name?: string;\n  label?: ReactNode;\n  description?: string;\n  placeholder?: string;\n  value?: Value;\n  options?: RadioSelectOption<Value>[];\n  groups?: RadioSelectGroup<Value>[];\n  onChange?: (event: Event, 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 value summary in the trigger */\n  renderValue?: (selected: Value) => ReactNode;\n}\n\nexport function RadioSelect<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}: RadioSelectProps<Value>) {\n  const internalId = useId();\n  const id = idProp ?? internalId;\n  const name = nameProp ?? id;\n\n  const { open, toggle, close, containerRef, isLeaving } = useDropdown();\n  const [selected, setSelected] = useState<Value | undefined>(controlledValue);\n\n  useEffect(() => {\n    if (controlledValue !== undefined) {\n      setSelected(controlledValue);\n    }\n  }, [controlledValue]);\n\n  const selectOption = (event: Event, val: Value) => {\n    setSelected(val);\n    onChange?.(event, val);\n    close();\n  };\n\n  const allOptions: RadioSelectOption<Value>[] = options\n    ? options\n    : (groups ?? []).flatMap((g) => g.options);\n\n  const selectedOption = allOptions.find((o) => o.value === selected);\n\n  const triggerLabel =\n    selected === undefined || !selectedOption ? (\n      <span className=\"text-darkGrey\">{placeholder}</span>\n    ) : renderValue ? (\n      renderValue(selected)\n    ) : (\n      <span>{selectedOption.label}</span>\n    );\n\n  const isError = validationStatus === 'error';\n  const isSuccess = validationStatus === 'success';\n  const isDisabled = disabled;\n\n  const renderOptions = (opts: RadioSelectOption<Value>[]) => (\n    <div className=\"flex flex-col gap-12\">\n      {opts.map((option, i) => (\n        <Radio\n          key={i}\n          name={name}\n          value={String(option.value)}\n          checked={selected === option.value}\n          disabled={disabled}\n          onChange={(event) => selectOption(event, option.value)}\n        >\n          <OptionLabel selected={selected === option.value}>{option.label}</OptionLabel>\n        </Radio>\n      ))}\n    </div>\n  );\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={className}\n      dataName=\"RadioSelect\"\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 focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 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-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 pointer-events-none': !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/Range.d.ts

@@ -26,7 +26,7 @@ interface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChan
     /**
      * On change
      * */
-    onChange?: (name: string, value: number[]) => void;
+    onChange?: (event: Event, value: number[]) => void;
     /**
      * Options
      * @default []

package/ui/forms/Select.js

@@ -1,21 +1,20 @@
 import { t as e } from "../../chunks/clsx.js";
-import { useValue as t } from "../hooks/useValue.js";
-import { useInternalStatus as n } from "../hooks/useInternalStatus.js";
-import { FormControl as r } from "./FormControl.js";
+import { useInternalStatus as t } from "../hooks/useInternalStatus.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";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Icon as s } from "@clubmed/trident-icons";
 //#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 } = t({
-		name: d,
+	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({
 		initialValue: p,
 		onChange: C
-	}), O = n({
+	}), O = t({
 		isDisabled: v,
 		validationStatus: h
 	});
-	return /* @__PURE__ */ o(r, {
+	return /* @__PURE__ */ a(n, {
 		id: u,
 		className: x,
 		label: f,
@@ -27,12 +26,12 @@ var c = (c) => {
 		hideRequiredStar: b,
 		validationStatus: h,
 		errorMessage: _,
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ o("div", {
 			className: e("relative rounded-pill z-0", {
 				"bg-white": O !== "disabled",
 				"bg-pearl border-middleGrey": O === "disabled"
 			}),
-			children: [/* @__PURE__ */ o("select", {
+			children: [/* @__PURE__ */ a("select", {
 				...T,
 				id: u,
 				name: d,
@@ -40,9 +39,9 @@ var c = (c) => {
 				required: y,
 				value: E,
 				onChange: (e) => {
-					D(e.target.value);
+					D(e.target.value, e.nativeEvent);
 				},
-				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none appearance-none bg-transparent", {
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 appearance-none bg-transparent", {
 					"border-middleGrey focus:border-black active:border-black pe-[52px]": O === "default",
 					"pe-[84px]": O === "error" || O === "success",
 					"text-black": O !== "disabled",
@@ -52,28 +51,28 @@ var c = (c) => {
 				}),
 				"aria-label": d,
 				children: w
-			}), /* @__PURE__ */ o("div", {
+			}), /* @__PURE__ */ a("div", {
 				className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1", {
 					"text-grey": O === "disabled",
 					"text-red": O === "error",
 					"text-green": O === "success"
 				}),
-				children: /* @__PURE__ */ s("span", {
+				children: /* @__PURE__ */ o("span", {
 					className: "ms-auto flex gap-x-8",
 					children: [
-						O === "error" && /* @__PURE__ */ o(a, {
+						O === "error" && /* @__PURE__ */ a(s, {
 							name: "CrossDefault",
 							width: "24px",
 							type: g
 						}),
-						O === "success" && /* @__PURE__ */ o(a, {
+						O === "success" && /* @__PURE__ */ a(s, {
 							name: "CheckDefault",
 							width: "24px",
 							type: g
 						}),
-						/* @__PURE__ */ o("button", {
+						/* @__PURE__ */ a("span", {
 							className: "pointer-events-auto inline-flex",
-							children: /* @__PURE__ */ o(a, {
+							children: /* @__PURE__ */ a(s, {
 								name: "ArrowDefaultDown",
 								type: "svg",
 								width: "24px",

package/ui/forms/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../lib/ui/forms/Select.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport { type SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ name, initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={clsx('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => {\n            setValue(e.target.value as Value);\n          }}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none appearance-none bg-transparent',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <button className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </button>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,IAAa,KAA2B,MAA8B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,GACb,aACA,aACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAM;EAAc;EAAU,CAAC,EACvE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC;AAEF,QACE,kBAAC,GAAD;EACM;EACO;EACJ;EACM;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GACE,WAAW,EAAK,6BAA6B;IAC3C,YAAY,MAAmB;IAC/B,8BAA8B,MAAmB;IAClD,CAAC;aAJJ,CAME,kBAAC,UAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM;AACf,OAAS,EAAE,OAAO,MAAe;;IAEnC,WAAW,EACT,0HACA;KACE,sEACE,MAAmB;KACrB,aAAa,MAAmB,WAAW,MAAmB;KAC9D,cAAc,MAAmB;KACjC,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IAEX;IACM,CAAA,EAET,kBAAC,OAAD;IACE,WAAW,EACT,2FACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,WAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG1D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG3D,kBAAC,UAAD;OAAQ,WAAU;iBAChB,kBAAC,GAAD;QAAM,MAAK;QAAmB,MAAK;QAAM,OAAM;QAAO,OAAM;QAAU,CAAA;OAC/D,CAAA;MACJ;;IACH,CAAA,CACF;;EACM,CAAA"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../lib/ui/forms/Select.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useValue } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicTypes } from '@clubmed/trident-icons';\nimport { type SelectHTMLAttributes, useId } from 'react';\n\nexport interface SelectProps<Value>\n  extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {\n  description?: string;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n}\n\nexport const Select = <Value = string,>(props: SelectProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: initialValue,\n    description,\n    validationStatus = 'default',\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = id,\n    onChange,\n    children,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange });\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  return (\n    <FormControl\n      id={id}\n      className={className}\n      label={label}\n      description={description}\n      dataName=\"TextField\"\n      dataTestId={dataTestId}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      validationStatus={validationStatus}\n      errorMessage={errorMessage}\n    >\n      <div\n        className={clsx('relative rounded-pill z-0', {\n          'bg-white': internalStatus !== 'disabled',\n          'bg-pearl border-middleGrey': internalStatus === 'disabled',\n        })}\n      >\n        <select\n          {...rest}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as any}\n          onChange={(e) => {\n            setValue(e.target.value as Value, e.nativeEvent);\n          }}\n          className={clsx(\n            'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 appearance-none bg-transparent',\n            {\n              'border-middleGrey focus:border-black active:border-black pe-[52px]':\n                internalStatus === 'default',\n              'pe-[84px]': internalStatus === 'error' || internalStatus === 'success',\n              'text-black': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n              'border-red': internalStatus === 'error',\n              'border-green': internalStatus === 'success',\n            },\n          )}\n          aria-label={name}\n        >\n          {children}\n        </select>\n\n        <div\n          className={clsx(\n            'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1',\n            {\n              'text-grey': internalStatus === 'disabled',\n              'text-red': internalStatus === 'error',\n              'text-green': internalStatus === 'success',\n            },\n          )}\n        >\n          <span className=\"ms-auto flex gap-x-8\">\n            {internalStatus === 'error' && (\n              <Icon name=\"CrossDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n\n            <span className=\"pointer-events-auto inline-flex\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </span>\n          </span>\n        </div>\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;;AAeA,IAAa,KAA2B,MAA8B;CACpE,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,UACA,OAAO,GACP,gBACA,sBAAmB,WACnB,aACA,iBACA,cAAW,IACX,cAAW,IACX,qBACA,cACA,gBAAa,GACb,aACA,aACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAAgB;EAAE;EAAc;EAAU,CAAC,EACjE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC;AAEF,QACE,kBAAC,GAAD;EACM;EACO;EACJ;EACM;EACb,UAAS;EACG;EACF;EACA;EACQ;EACA;EACJ;YAEd,kBAAC,OAAD;GACE,WAAW,EAAK,6BAA6B;IAC3C,YAAY,MAAmB;IAC/B,8BAA8B,MAAmB;IAClD,CAAC;aAJJ,CAME,kBAAC,UAAD;IACE,GAAI;IACA;IACE;IACI;IACA;IACH;IACP,WAAW,MAAM;AACf,OAAS,EAAE,OAAO,OAAgB,EAAE,YAAY;;IAElD,WAAW,EACT,oMACA;KACE,sEACE,MAAmB;KACrB,aAAa,MAAmB,WAAW,MAAmB;KAC9D,cAAc,MAAmB;KACjC,8BAA8B,MAAmB;KACjD,cAAc,MAAmB;KACjC,gBAAgB,MAAmB;KACpC,CACF;IACD,cAAY;IAEX;IACM,CAAA,EAET,kBAAC,OAAD;IACE,WAAW,EACT,2FACA;KACE,aAAa,MAAmB;KAChC,YAAY,MAAmB;KAC/B,cAAc,MAAmB;KAClC,CACF;cAED,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACG,MAAmB,WAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG1D,MAAmB,aAClB,kBAAC,GAAD;OAAM,MAAK;OAAe,OAAM;OAAO,MAAM;OAAY,CAAA;MAG3D,kBAAC,QAAD;OAAM,WAAU;iBACd,kBAAC,GAAD;QAAM,MAAK;QAAmB,MAAK;QAAM,OAAM;QAAO,OAAM;QAAU,CAAA;OACjE,CAAA;MACF;;IACH,CAAA,CACF;;EACM,CAAA"}

package/ui/forms/Switch.d.ts

@@ -1,7 +1,9 @@
-import { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import { Colors } from '../types/Colors';
-export interface SwitchProps extends ComponentPropsWithoutRef<'button'> {
+export interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'defaultChecked' | 'onChange' | 'value'> {
     checked: boolean;
     color?: Colors;
+    value?: string | number | boolean;
+    onChange?: (event: Event, value: boolean) => void;
 }
-export declare const Switch: FunctionComponent<SwitchProps>;
+export declare function Switch({ id, name, checked, className, color, onChange, disabled, tabIndex, children, role, value, ...attrs }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/ui/forms/Switch.js

@@ -1,42 +1,62 @@
 "use client";
 import { t as e } from "../../chunks/clsx.js";
 import { getBgColor as t } from "../helpers/colors/colors.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region lib/ui/forms/Switch.tsx
-var i = ({ checked: i, className: a, color: o = "saffron", onClick: s, ...c }) => {
-	let l = (e) => {
-		c.disabled || s?.(e);
-	};
-	return /* @__PURE__ */ n("button", {
-		...c,
-		"aria-checked": i,
-		className: e(a, "rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors", { "bg-middleGrey": !i }, { [t(o)]: i }),
-		"data-name": "Switch",
-		onClick: l,
-		role: "switch",
-		type: "button",
-		children: /* @__PURE__ */ r("svg", {
-			className: "size-24",
-			viewBox: "0 0 24 24",
-			children: [
-				/* @__PURE__ */ n("circle", {
-					className: "fill-white",
-					cx: 12,
-					cy: 12,
-					r: 12
-				}),
-				/* @__PURE__ */ n("circle", {
-					className: "fill-middleGrey",
-					cx: 12,
-					cy: 12,
-					r: 4
-				}),
-				/* @__PURE__ */ n("path", { d: "M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37" })
-			]
-		})
+function a({ id: a, name: o, checked: s, className: c, color: l = "saffron", onChange: u, disabled: d = !1, tabIndex: f = 0, children: p, role: m = "switch", value: h, ...g }) {
+	let _ = n(), v = a ?? _, y = o ?? v, b = p != null, x = e("inline-flex items-center relative", {
+		"gap-4": b,
+		"cursor-pointer": !d,
+		"cursor-not-allowed": d
 	});
-};
+	return /* @__PURE__ */ i(b ? "label" : "span", {
+		htmlFor: v,
+		className: x,
+		children: [
+			/* @__PURE__ */ r("input", {
+				...g,
+				id: v,
+				name: y,
+				checked: s,
+				"data-name": "Switch",
+				disabled: d,
+				role: m,
+				tabIndex: f,
+				type: "checkbox",
+				value: typeof h == "boolean" ? String(h) : h,
+				className: "absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full",
+				onChange: (e) => {
+					u?.(e.nativeEvent, e.target.checked);
+				}
+			}),
+			/* @__PURE__ */ r("span", {
+				className: e(c, "rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors", { "bg-middleGrey": !s }, { [t(l)]: s }),
+				children: /* @__PURE__ */ r("svg", {
+					className: "size-24",
+					viewBox: "0 0 24 24",
+					children: /* @__PURE__ */ i("g", { children: [
+						/* @__PURE__ */ r("circle", {
+							cx: 12,
+							cy: 12,
+							r: 12,
+							fill: "var(--color-white)"
+						}),
+						/* @__PURE__ */ r("circle", {
+							cx: 12,
+							cy: 12,
+							r: 4,
+							fill: "var(--color-middleGrey)"
+						}),
+						/* @__PURE__ */ r("path", { d: "M18.1 7.5c.4.4.4 1.08 0 1.48l-6.83 7q-.3.3-.72.3a1 1 0 0 1-.72-.3L5.9 11.96c-.4-.41-.4-1.07 0-1.48a1 1 0 0 1 1.44 0l3.2 3.27 6.12-6.25a1 1 0 0 1 .72-.3 1 1 0 0 1 .72.3" })
+					] })
+				})
+			}),
+			p
+		]
+	});
+}
 //#endregion
-export { i as Switch };
+export { a as Switch };
 
 //# sourceMappingURL=Switch.js.map

package/ui/forms/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../lib/ui/forms/Switch.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ComponentPropsWithoutRef, FunctionComponent, MouseEvent } from 'react';\n\nimport { getBgColor } from '../helpers/colors/colors';\nimport type { Colors } from '../types/Colors';\n\nexport interface SwitchProps extends ComponentPropsWithoutRef<'button'> {\n  checked: boolean;\n  color?: Colors;\n}\n\nexport const Switch: FunctionComponent<SwitchProps> = ({\n  checked,\n  className,\n  color = 'saffron',\n  onClick,\n  ...attrs\n}) => {\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!attrs.disabled) {\n      onClick?.(e);\n    }\n  };\n\n  return (\n    <button\n      {...attrs}\n      aria-checked={checked}\n      className={clsx(\n        className,\n        'rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors',\n        { 'bg-middleGrey': !checked },\n        { [getBgColor(color)]: checked },\n      )}\n      data-name=\"Switch\"\n      onClick={handleClick}\n      role=\"switch\"\n      type=\"button\"\n    >\n      <svg className=\"size-24\" viewBox=\"0 0 24 24\">\n        <circle className=\"fill-white\" cx={12} cy={12} r={12} />\n        <circle className=\"fill-middleGrey\" cx={12} cy={12} r={4} />\n        <path d=\"M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37\" />\n      </svg>\n    </button>\n  );\n};\n"],"mappings":";;;;;AAaA,IAAa,KAA0C,EACrD,YACA,cACA,WAAQ,WACR,YACA,GAAG,QACC;CACJ,IAAM,KAAe,MAAqC;AACxD,EAAK,EAAM,YACT,IAAU,EAAE;;AAIhB,QACE,kBAAC,UAAD;EACE,GAAI;EACJ,gBAAc;EACd,WAAW,EACT,GACA,qFACA,EAAE,iBAAiB,CAAC,GAAS,EAC7B,GAAG,EAAW,EAAM,GAAG,GAAS,CACjC;EACD,aAAU;EACV,SAAS;EACT,MAAK;EACL,MAAK;YAEL,kBAAC,OAAD;GAAK,WAAU;GAAU,SAAQ;aAAjC;IACE,kBAAC,UAAD;KAAQ,WAAU;KAAa,IAAI;KAAI,IAAI;KAAI,GAAG;KAAM,CAAA;IACxD,kBAAC,UAAD;KAAQ,WAAU;KAAkB,IAAI;KAAI,IAAI;KAAI,GAAG;KAAK,CAAA;IAC5D,kBAAC,QAAD,EAAM,GAAE,kLAAmL,CAAA;;;EAEtL,CAAA"}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../lib/ui/forms/Switch.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, useId } from 'react';\n\nimport { getBgColor } from '../helpers/colors/colors';\nimport type { Colors } from '../types/Colors';\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<'input'>,\n    'size' | 'type' | 'defaultChecked' | 'onChange' | 'value'\n  > {\n  checked: boolean;\n  color?: Colors;\n  value?: string | number | boolean;\n  onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Switch({\n  id,\n  name,\n  checked,\n  className,\n  color = 'saffron',\n  onChange,\n  disabled = false,\n  tabIndex = 0,\n  children,\n  role = 'switch',\n  value,\n  ...attrs\n}: SwitchProps) {\n  const internalId = useId();\n  const inputId = id ?? internalId;\n  const inputName = name ?? inputId;\n  const hasChildren = children !== undefined && children !== null;\n  const rootClassName = clsx('inline-flex items-center relative', {\n    'gap-4': hasChildren,\n    'cursor-pointer': !disabled,\n    'cursor-not-allowed': disabled,\n  });\n  const Node = hasChildren ? 'label' : 'span';\n\n  return (\n    <Node htmlFor={inputId} className={rootClassName}>\n      <input\n        {...attrs}\n        id={inputId}\n        name={inputName}\n        checked={checked}\n        data-name=\"Switch\"\n        disabled={disabled}\n        role={role}\n        tabIndex={tabIndex}\n        type=\"checkbox\"\n        value={typeof value === 'boolean' ? String(value) : value}\n        className=\"absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full\"\n        onChange={(e) => {\n          onChange?.(e.nativeEvent, e.target.checked);\n        }}\n      />\n\n      <span\n        className={clsx(\n          className,\n          'rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors',\n          { 'bg-middleGrey': !checked },\n          { [getBgColor(color)]: checked },\n        )}\n      >\n        <svg className=\"size-24\" viewBox=\"0 0 24 24\">\n          <g>\n            <circle cx={12} cy={12} r={12} fill=\"var(--color-white)\" />\n            <circle cx={12} cy={12} r={4} fill=\"var(--color-middleGrey)\" />\n            <path d=\"M18.1 7.5c.4.4.4 1.08 0 1.48l-6.83 7q-.3.3-.72.3a1 1 0 0 1-.72-.3L5.9 11.96c-.4-.41-.4-1.07 0-1.48a1 1 0 0 1 1.44 0l3.2 3.27 6.12-6.25a1 1 0 0 1 .72-.3 1 1 0 0 1 .72.3\" />\n          </g>\n        </svg>\n      </span>\n      {children}\n    </Node>\n  );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,EAAO,EACrB,OACA,SACA,YACA,cACA,WAAQ,WACR,aACA,cAAW,IACX,cAAW,GACX,aACA,UAAO,UACP,UACA,GAAG,KACW;CACd,IAAM,IAAa,GAAO,EACpB,IAAU,KAAM,GAChB,IAAY,KAAQ,GACpB,IAAc,KAAuC,MACrD,IAAgB,EAAK,qCAAqC;EAC9D,SAAS;EACT,kBAAkB,CAAC;EACnB,sBAAsB;EACvB,CAAC;AAGF,QACE,kBAHW,IAAc,UAAU,QAGnC;EAAM,SAAS;EAAS,WAAW;YAAnC;GACE,kBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACJ,MAAM;IACG;IACT,aAAU;IACA;IACJ;IACI;IACV,MAAK;IACL,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;IACpD,WAAU;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA;GAEF,kBAAC,QAAD;IACE,WAAW,EACT,GACA,qFACA,EAAE,iBAAiB,CAAC,GAAS,EAC7B,GAAG,EAAW,EAAM,GAAG,GAAS,CACjC;cAED,kBAAC,OAAD;KAAK,WAAU;KAAU,SAAQ;eAC/B,kBAAC,KAAD,EAAA,UAAA;MACE,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAI,MAAK;OAAuB,CAAA;MAC3D,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAG,MAAK;OAA4B,CAAA;MAC/D,kBAAC,QAAD,EAAM,GAAE,2KAA4K,CAAA;MAClL,EAAA,CAAA;KACA,CAAA;IACD,CAAA;GACN"}

package/ui/forms/TextField.js

@@ -1,22 +1,21 @@
 import { t as e } from "../../chunks/clsx.js";
-import { useValue as t } from "../hooks/useValue.js";
-import { useInternalStatus as n } from "../hooks/useInternalStatus.js";
-import { FormControl as r } from "./FormControl.js";
+import { useInternalStatus as t } from "../hooks/useInternalStatus.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";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Icon as s } from "@clubmed/trident-icons";
 //#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 = !0, clear: T = "", iconFirst: E = !0, onChange: D, formatter: O, ...k } = c, { value: A, setValue: j } = t({
-		name: d,
+	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({
 		initialValue: p,
 		onChange: D,
 		formatter: O
-	}), M = n({
+	}), M = t({
 		isDisabled: y,
 		validationStatus: h
 	}), N = !y && A !== "" && A != null && !!T;
-	return /* @__PURE__ */ o(r, {
+	return /* @__PURE__ */ a(n, {
 		id: u,
 		label: f,
 		className: S,
@@ -28,21 +27,21 @@ var c = (c) => {
 		hideRequiredStar: x,
 		validationStatus: h,
 		errorMessage: v,
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ o("div", {
 			className: "relative",
-			children: [/* @__PURE__ */ o("input", {
+			children: [/* @__PURE__ */ a("input", {
 				...k,
 				id: u,
 				name: d,
 				disabled: y,
 				required: b,
 				value: A,
-				onChange: (e) => j(e.target.value),
+				onChange: (e) => j(e.target.value, e.nativeEvent),
 				style: {
 					"--nbIconsStart": Number(!!g && E),
-					"--nbIconsEnd": Number(!!g && !E) + Number(N || w) + Number(M === "error" || M === "success")
+					"--nbIconsEnd": Number(!!g && !E) + Number(w && !N || N && M !== "error") + Number(M === "error" || M === "success")
 				},
-				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
+				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2 ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
 					"border-middleGrey focus:border-black active:border-black": M === "default",
 					"bg-white text-black": M !== "disabled",
 					"bg-pearl border-middleGrey": M === "disabled",
@@ -50,44 +49,54 @@ var c = (c) => {
 					"border-green": M === "success"
 				}),
 				"aria-label": d
-			}), /* @__PURE__ */ s("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12", {
 					"text-grey": M === "disabled",
 					"text-red": M === "error",
 					"text-green": M === "success"
 				}),
-				children: [g && E && /* @__PURE__ */ o(a, {
+				children: [g && E && /* @__PURE__ */ a(s, {
 					name: g,
 					width: "24px"
-				}), /* @__PURE__ */ s("span", {
+				}), /* @__PURE__ */ o("span", {
 					className: "ms-auto flex gap-x-8",
 					children: [
-						M === "error" && /* @__PURE__ */ o(a, {
+						M === "error" && (N ? /* @__PURE__ */ a("button", {
+							className: "pointer-events-auto cursor-pointer flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
+							onClick: (e) => j("", e.nativeEvent),
+							"aria-label": T,
+							type: "reset",
+							children: /* @__PURE__ */ a(s, {
+								name: "CrossDefault",
+								width: "24px",
+								type: _
+							})
+						}) : /* @__PURE__ */ a(s, {
 							name: "CrossDefault",
 							width: "24px",
 							type: _
-						}),
-						M === "success" && /* @__PURE__ */ o(a, {
+						})),
+						M === "success" && /* @__PURE__ */ a(s, {
 							name: "CheckDefault",
 							width: "24px",
 							type: _
 						}),
-						(w || N) && (N ? /* @__PURE__ */ o("button", {
-							className: "pointer-events-auto",
-							onClick: () => j(""),
+						(w || N && M !== "error") && (N ? /* @__PURE__ */ a("button", {
+							className: "pointer-events-auto cursor-pointer flex outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
+							onClick: (e) => j("", e.nativeEvent),
 							"aria-label": T,
 							type: "reset",
-							children: /* @__PURE__ */ o(a, {
+							children: /* @__PURE__ */ a(s, {
 								name: "CrossDefault",
 								className: "text-black",
 								width: "24px"
 							})
-						}) : /* @__PURE__ */ o(a, {
+						}) : /* @__PURE__ */ a(s, {
 							name: "ArrowDefaultDown",
 							className: "text-black",
 							width: "24px"
 						})),
-						!E && g && /* @__PURE__ */ o(a, {
+						!E && g && /* @__PURE__ */ a(s, {
 							name: g,
 							width: "24px"
 						})