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

package/ui/forms/NumberField.d.ts

@@ -3,6 +3,7 @@ import { FormControlProps } from './FormControl';
 interface NumberFieldProps extends FormControlProps<number> {
     min?: number;
     max?: number;
+    controlled?: boolean;
     labels: {
         increase: string;
         decrease: string;
@@ -24,8 +25,8 @@ export declare function useNumberField(props: NumberFieldProps): {
         input: string;
     };
     handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
-    increase: () => void;
-    decrease: () => void;
+    increase: (event?: Event) => void;
+    decrease: (event?: Event) => void;
     label?: import('react').ReactNode;
     labelClassName?: string;
     validationStatus?: import('../hooks/useInternalStatus').ValidationStatus;
@@ -34,33 +35,11 @@ export declare function useNumberField(props: NumberFieldProps): {
     errorMessage?: string;
     color?: string | undefined | undefined;
     size?: number | undefined | undefined;
-    form?: string | undefined | undefined;
-    slot?: string | undefined | undefined;
-    style?: import('react').CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    pattern?: string | undefined | undefined;
-    accept?: string | undefined | undefined;
-    alt?: string | undefined | undefined;
-    autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;
-    capture?: boolean | "user" | "environment" | undefined | undefined;
-    checked?: boolean | undefined | undefined;
-    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
-    formEncType?: string | undefined | undefined;
-    formMethod?: string | undefined | undefined;
-    formNoValidate?: boolean | undefined | undefined;
-    formTarget?: string | undefined | undefined;
-    height?: number | string | undefined | undefined;
-    list?: string | undefined | undefined;
-    maxLength?: number | undefined | undefined;
-    minLength?: number | undefined | undefined;
-    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;
-    width?: number | string | undefined | undefined;
+    content?: string | undefined | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
+    prefix?: string | undefined | undefined;
+    children?: import('react').ReactNode;
+    className?: string | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -68,7 +47,6 @@ export declare function useNumberField(props: NumberFieldProps): {
     accessKey?: string | undefined | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
@@ -77,16 +55,16 @@ export declare function useNumberField(props: NumberFieldProps): {
     hidden?: boolean | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
+    slot?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import('react').CSSProperties | undefined;
     tabIndex?: number | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
+    title?: string | 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;
@@ -164,7 +142,6 @@ export declare function useNumberField(props: NumberFieldProps): {
     "aria-valuemin"?: number | undefined | undefined;
     "aria-valuenow"?: number | undefined | undefined;
     "aria-valuetext"?: string | undefined | undefined;
-    children?: import('react').ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined | undefined;
@@ -335,6 +312,30 @@ 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;
+    accept?: string | undefined | undefined;
+    alt?: string | undefined | undefined;
+    autoComplete?: import('react').HTMLInputAutoCompleteAttribute | undefined;
+    capture?: boolean | "user" | "environment" | undefined | undefined;
+    checked?: boolean | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
+    height?: number | string | undefined | undefined;
+    maxLength?: number | undefined | undefined;
+    minLength?: number | undefined | undefined;
+    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;

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,42 +10,41 @@ 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({
-		name: a,
-		defaultValue: o,
+	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, controlled: p = !1, labels: m, ...h } = e, { value: g, setValue: _ } = r({
+		...p ? { initialValue: o } : { defaultValue: o },
 		formatter: Number,
 		onChange: s
-	}), _ = (e) => {
+	}), v = (e) => {
 		let t = Number(e.target.value);
-		t >= c && t <= l && g(Number(t));
-	}, v = () => {
-		h < l && g(h + 1);
-	}, y = () => {
-		h > c && g(h - 1);
+		t >= c && t <= l && _(Number(t), e.nativeEvent);
+	}, y = (e) => {
+		g < l && _(g + 1, e);
+	}, b = (e) => {
+		g > c && _(g - 1, e);
 	};
 	return {
-		...m,
-		id: r,
+		...h,
+		id: n,
 		min: c,
 		max: l,
 		name: a,
-		value: h,
+		value: g,
 		dataTestId: d,
 		disabled: u,
 		inline: f,
-		labels: p,
-		handleChange: _,
-		increase: v,
-		decrease: y
+		labels: m,
+		handleChange: v,
+		increase: y,
+		decrease: b
 	};
 }
-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,
@@ -59,7 +58,7 @@ var l = (n) => {
 			className: "flex items-center gap-x-8",
 			children: [
 				/* @__PURE__ */ a(t, {
-					onClick: v,
+					onClick: (e) => v(e.nativeEvent),
 					variant: "circle",
 					disabled: h <= l || i,
 					icon: "MinusDefault",
@@ -68,7 +67,7 @@ var l = (n) => {
 				}),
 				/* @__PURE__ */ a("input", {
 					...T,
-					className: e("text-b2 text-center font-bold outline-none", { "bg-pearl text-grey": i }),
+					className: e("text-b2 text-center font-bold outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2", { "bg-pearl text-grey": i }),
 					style: s,
 					type: "number",
 					title: w.input,
@@ -81,7 +80,7 @@ var l = (n) => {
 					max: u
 				}),
 				/* @__PURE__ */ a(t, {
-					onClick: _,
+					onClick: (e) => _(e.nativeEvent),
 					variant: "circle",
 					"aria-label": w.increase,
 					disabled: h >= u || i,

package/ui/forms/NumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.js","names":[],"sources":["../../../lib/ui/forms/NumberField.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport { type ChangeEvent, useId } from 'react';\n\nimport { useValue } from '../hooks/useValue';\nimport { Button } from '../buttons/Button';\nimport { FormControl, type FormControlProps } from './FormControl';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n  labels: {\n    increase: string;\n    decrease: string;\n    input: string;\n  };\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    inline = true,\n    labels,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    name: name!,\n    defaultValue: initialValue,\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue));\n    }\n  };\n\n  const increase = () => {\n    if (value < max) {\n      setValue(value + 1);\n    }\n  };\n\n  const decrease = () => {\n    if (value > min) {\n      setValue(value - 1);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    inline,\n    labels,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    hideRequiredStar,\n    required,\n    inline,\n    labels,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={clsx('flex items-center', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      layout=\"vertical\"\n      inline={inline}\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          onClick={decrease}\n          variant=\"circle\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          aria-label={labels.decrease}\n          data-testid={`${dataTestId}-decrease`}\n        />\n        <input\n          {...rest}\n          className={clsx('text-b2 text-center font-bold outline-none', {\n            'bg-pearl text-grey': disabled,\n          })}\n          style={INPUT_STYLE}\n          type=\"number\"\n          title={labels.input}\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          onClick={increase}\n          variant=\"circle\"\n          aria-label={labels.increase}\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          data-testid={`${dataTestId}-increase`}\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;AAkBA,IAAM,IAAc;CAAE,OAAO;CAAQ,QAAQ;CAAQ;AAErD,SAAgB,EAAe,GAAyB;CACtD,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,OAAO,IAAe,GACtB,aACA,SAAM,GACN,SAAM,IACN,cAAW,IACX,gBAAa,eACb,YAAS,IACT,WACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAA4C;EAChE;EACN,cAAc;EACd,WAAW;EACX;EACD,CAAC,EAEI,KAAgB,MAAqC;EACzD,IAAM,IAAW,OAAO,EAAE,OAAO,MAAM;AAEvC,EAAI,KAAY,KAAO,KAAY,KACjC,EAAS,OAAO,EAAS,CAAC;IAIxB,UAAiB;AACrB,EAAI,IAAQ,KACV,EAAS,IAAQ,EAAE;IAIjB,UAAiB;AACrB,EAAI,IAAQ,KACV,EAAS,IAAQ,EAAE;;AAIvB,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAGH,IAAa,KAAe,MAA4B;CACtD,IAAM,EACJ,aACA,QACA,QACA,UACA,gBACA,OACA,eACA,UACA,iBACA,aACA,aACA,iBACA,qBACA,qBACA,aACA,WACA,WACA,GAAG,MACD,EAAe,EAAM;AAEzB,QACE,kBAAC,GAAD;EACM;EACG;EACM;EACb,WAAW,EAAK,qBAAqB,EAAM,UAAU;EACrD,UAAS;EACG;EACE;EACI;EACR;EACA;EACQ;EAClB,QAAO;EACC;YAER,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,SAAS;KACT,SAAQ;KACR,UAAU,KAAS,KAAO;KAC1B,MAAK;KACL,cAAY,EAAO;KACnB,eAAa,GAAG,EAAW;KAC3B,CAAA;IACF,kBAAC,SAAD;KACE,GAAI;KACJ,WAAW,EAAK,8CAA8C,EAC5D,sBAAsB,GACvB,CAAC;KACF,OAAO;KACP,MAAK;KACL,OAAO,EAAO;KACV;KACJ,UAAU;KACA;KACA;KACH;KACF;KACA;KACL,CAAA;IACF,kBAAC,GAAD;KACE,SAAS;KACT,SAAQ;KACR,cAAY,EAAO;KACnB,UAAU,KAAS,KAAO;KAC1B,MAAK;KACL,eAAa,GAAG,EAAW;KAC3B,CAAA;IACE;;EACM,CAAA"}
+{"version":3,"file":"NumberField.js","names":[],"sources":["../../../lib/ui/forms/NumberField.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport { type ChangeEvent, type MouseEvent, useId } from 'react';\n\nimport { useValue } from '../hooks/useValue';\nimport { Button } from '../buttons/Button';\nimport { FormControl, type FormControlProps } from './FormControl';\n\ninterface NumberFieldProps extends FormControlProps<number> {\n  min?: number;\n  max?: number;\n  controlled?: boolean;\n  labels: {\n    increase: string;\n    decrease: string;\n    input: string;\n  };\n}\n\nconst INPUT_STYLE = { width: '28px', height: '28px' };\n\nexport function useNumberField(props: NumberFieldProps) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    value: initialValue = 0,\n    onChange,\n    min = 0,\n    max = 10,\n    disabled = false,\n    dataTestId = 'NumberField',\n    inline = true,\n    controlled = false,\n    labels,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<number, string | number | boolean>({\n    ...(controlled ? { initialValue } : { defaultValue: initialValue }),\n    formatter: Number,\n    onChange,\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newValue = Number(e.target.value);\n\n    if (newValue >= min && newValue <= max) {\n      setValue(Number(newValue), e.nativeEvent);\n    }\n  };\n\n  const increase = (event?: Event) => {\n    if (value < max) {\n      setValue(value + 1, event);\n    }\n  };\n\n  const decrease = (event?: Event) => {\n    if (value > min) {\n      setValue(value - 1, event);\n    }\n  };\n\n  return {\n    ...rest,\n    id,\n    min,\n    max,\n    name,\n    value,\n    dataTestId,\n    disabled,\n    inline,\n    labels,\n    handleChange,\n    increase,\n    decrease,\n  };\n}\n\nexport const NumberField = (props: NumberFieldProps) => {\n  const {\n    disabled,\n    min,\n    max,\n    label,\n    description,\n    id,\n    dataTestId,\n    value,\n    handleChange,\n    increase,\n    decrease,\n    errorMessage,\n    validationStatus,\n    hideRequiredStar,\n    required,\n    inline,\n    labels,\n    ...rest\n  } = useNumberField(props);\n\n  return (\n    <FormControl\n      id={id}\n      label={label}\n      description={description}\n      className={clsx('flex items-center', props.className)}\n      dataName=\"NumberField\"\n      dataTestId={dataTestId}\n      errorMessage={errorMessage}\n      validationStatus={validationStatus}\n      disabled={disabled}\n      required={required}\n      hideRequiredStar={hideRequiredStar}\n      layout=\"vertical\"\n      inline={inline}\n    >\n      <div className=\"flex items-center gap-x-8\">\n        <Button\n          onClick={(e: MouseEvent<HTMLButtonElement>) => decrease(e.nativeEvent)}\n          variant=\"circle\"\n          disabled={value <= min || disabled}\n          icon=\"MinusDefault\"\n          aria-label={labels.decrease}\n          data-testid={`${dataTestId}-decrease`}\n        />\n        <input\n          {...rest}\n          className={clsx(\n            'text-b2 text-center font-bold outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            {\n              'bg-pearl text-grey': disabled,\n            },\n          )}\n          style={INPUT_STYLE}\n          type=\"number\"\n          title={labels.input}\n          id={id}\n          onChange={handleChange}\n          disabled={disabled}\n          required={required}\n          value={value}\n          min={min}\n          max={max}\n        />\n        <Button\n          onClick={(e: MouseEvent<HTMLButtonElement>) => increase(e.nativeEvent)}\n          variant=\"circle\"\n          aria-label={labels.increase}\n          disabled={value >= max || disabled}\n          icon=\"PlusDefault\"\n          data-testid={`${dataTestId}-increase`}\n        />\n      </div>\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;AAmBA,IAAM,IAAc;CAAE,OAAO;CAAQ,QAAQ;CAAQ;AAErD,SAAgB,EAAe,GAAyB;CACtD,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,OAAO,IAAe,GACtB,aACA,SAAM,GACN,SAAM,IACN,cAAW,IACX,gBAAa,eACb,YAAS,IACT,gBAAa,IACb,WACA,GAAG,MACD,GAEE,EAAE,UAAO,gBAAa,EAA4C;EACtE,GAAI,IAAa,EAAE,iBAAc,GAAG,EAAE,cAAc,GAAc;EAClE,WAAW;EACX;EACD,CAAC,EAEI,KAAgB,MAAqC;EACzD,IAAM,IAAW,OAAO,EAAE,OAAO,MAAM;AAEvC,EAAI,KAAY,KAAO,KAAY,KACjC,EAAS,OAAO,EAAS,EAAE,EAAE,YAAY;IAIvC,KAAY,MAAkB;AAClC,EAAI,IAAQ,KACV,EAAS,IAAQ,GAAG,EAAM;IAIxB,KAAY,MAAkB;AAClC,EAAI,IAAQ,KACV,EAAS,IAAQ,GAAG,EAAM;;AAI9B,QAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;;AAGH,IAAa,KAAe,MAA4B;CACtD,IAAM,EACJ,aACA,QACA,QACA,UACA,gBACA,OACA,eACA,UACA,iBACA,aACA,aACA,iBACA,qBACA,qBACA,aACA,WACA,WACA,GAAG,MACD,EAAe,EAAM;AAEzB,QACE,kBAAC,GAAD;EACM;EACG;EACM;EACb,WAAW,EAAK,qBAAqB,EAAM,UAAU;EACrD,UAAS;EACG;EACE;EACI;EACR;EACA;EACQ;EAClB,QAAO;EACC;YAER,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD;KACE,UAAU,MAAqC,EAAS,EAAE,YAAY;KACtE,SAAQ;KACR,UAAU,KAAS,KAAO;KAC1B,MAAK;KACL,cAAY,EAAO;KACnB,eAAa,GAAG,EAAW;KAC3B,CAAA;IACF,kBAAC,SAAD;KACE,GAAI;KACJ,WAAW,EACT,wHACA,EACE,sBAAsB,GACvB,CACF;KACD,OAAO;KACP,MAAK;KACL,OAAO,EAAO;KACV;KACJ,UAAU;KACA;KACA;KACH;KACF;KACA;KACL,CAAA;IACF,kBAAC,GAAD;KACE,UAAU,MAAqC,EAAS,EAAE,YAAY;KACtE,SAAQ;KACR,cAAY,EAAO;KACnB,UAAU,KAAS,KAAO;KAC1B,MAAK;KACL,eAAa,GAAG,EAAW;KAC3B,CAAA;IACE;;EACM,CAAA"}

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;

package/ui/forms/PhoneField.js

@@ -1,219 +1,39 @@
-import { t as e } from "../../chunks/clsx.js";
-import { useInternalStatus as t } from "../hooks/useInternalStatus.js";
-import { FormControl as n } from "./FormControl.js";
-import { countDigitPlaceholders as r, extractDigits as i, formatWithPattern as a } from "../helpers/phone/formatters.js";
-import { DEFAULT_PHONE_PREFIXES as o } from "../helpers/phone/defaultPrefixes.js";
-import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
-import { Icon as f } from "@clubmed/trident-icons";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { FormControl as e } from "./FormControl.js";
+import { PhoneFieldFullInput as t } from "./PhoneFieldFullInput.js";
+import { PhoneFieldSplitInput as n } from "./PhoneFieldSplitInput.js";
+import { useId as r } from "react";
+import "@clubmed/trident-icons";
+import { jsx as i } from "react/jsx-runtime";
 //#region lib/ui/forms/PhoneField.tsx
-var h = o, g = (e) => {
-	let t = e.indexOf("#"), n = t > 0 ? e.substring(0, t) : "";
-	return {
-		literalPrefix: n,
-		literalPrefixDigits: i(n)
-	};
-}, _ = (e, t) => t.length > 0 && e.startsWith(t) ? e.substring(t.length) : e, v = (e, t, n) => {
-	let r = 0, i = 0;
-	for (let a = 0; a < t.length; a++) if (/\d/.test(t[a])) {
-		if (i < n.length) {
-			i++;
-			continue;
-		}
-		if (r++, r === e) return a + 1;
-	}
-	return t.length;
-}, y = (o) => {
-	let y = l(), { id: b = y, name: x = b, label: S, value: C, mode: w = "full", pattern: T = "## ## ## ## ##", prefixes: E = h, defaultPrefix: D = E[0]?.code || "+1", description: O, validationStatus: k = "default", icon: A, iconType: j, errorMessage: M, disabled: N = !1, required: P = !1, hideRequiredStar: F, className: I, dataTestId: L = "PhoneField", placeholder: R = "", onChange: z, ...B } = o, V = u(null), H = u(null), U = u(null), [W, G] = d(D), [K, q] = d(""), [J, Y] = d(""), X = t({
-		isDisabled: N,
-		validationStatus: k
-	});
-	c(() => {
-		let e = w === "full" ? V : H;
-		U.current !== null && e.current && (e.current.setSelectionRange(U.current, U.current), U.current = null);
-	}, [
-		J,
-		K,
-		w
-	]), c(() => {
-		if (C && typeof C == "object" && "full" in C) {
-			let e = C;
-			w === "full" ? Y(e.full || "") : (G(e.prefix || D), q(e.number || ""));
-		}
-	}, [
-		C,
-		w,
-		D
-	]);
-	let Z = s((e, t, n) => {
-		let r = {
-			full: e,
-			prefix: t,
-			number: n,
-			raw: i(e)
-		};
-		z?.(x, r);
-	}, [z, x]), Q = s((e, t, n) => {
-		if (e.key !== "Backspace" && e.key !== "Delete") return;
-		let r = e.currentTarget, o = r.selectionStart || 0;
-		if (o !== (r.selectionEnd || 0)) return;
-		let { literalPrefixDigits: s } = g(T), c = e.key === "Backspace" ? t[o - 1] : t[o];
-		if (!c || /\d/.test(c)) return;
-		e.preventDefault();
-		let l = _(i(t), s), u = _(i(t.substring(0, o)), s).length, d, f;
-		if (e.key === "Backspace") {
-			if (u === 0) return;
-			d = l.slice(0, u - 1) + l.slice(u), f = u - 1;
-		} else {
-			if (u >= l.length) return;
-			d = l.slice(0, u) + l.slice(u + 1), f = u;
-		}
-		let p = a(d, T);
-		U.current = v(f, p, s), n ? (Y(p), Z(p)) : (q(p), G((e) => (Z(`${e} ${p}`.trim(), e, p), e)));
-	}, [T, Z]), $ = s((e, t) => {
-		let n = e.target.value, o = e.target.selectionStart || 0, { literalPrefixDigits: s } = g(T), c = _(i(n), s), l = r(T);
-		if (c.length > l) return;
-		let u = _(i(n.substring(0, o)), s).length, d = a(c, T);
-		U.current = v(u, d, s), t ? (Y(d), Z(d)) : (q(d), G((e) => (Z(`${e} ${d}`.trim(), e, d), e)));
-	}, [T, Z]), ee = s((e) => {
-		G(e), q((t) => (Z(`${e} ${t}`.trim(), e, t), t));
-	}, [Z]);
-	return /* @__PURE__ */ p(n, {
-		id: b,
-		label: S,
-		className: I,
-		description: O,
+var a = (a) => {
+	let { id: o, name: s, value: c, label: l, className: u, description: d, mode: f = "full", dataTestId: p = "PhoneField", disabled: m, required: h, hideRequiredStar: g, validationStatus: _, errorMessage: v, onChange: y, ...b } = a, x = y, S = r(), C = {
+		id: o || S,
+		label: l,
+		className: u,
+		description: d,
 		dataName: "PhoneField",
-		dataTestId: L,
-		disabled: N,
-		required: P,
-		hideRequiredStar: F,
-		validationStatus: k,
-		errorMessage: M,
-		children: w === "full" ? /* @__PURE__ */ m("div", {
-			className: "relative",
-			children: [/* @__PURE__ */ p("input", {
-				...B,
-				ref: V,
-				id: b,
-				name: x,
-				type: "tel",
-				disabled: N,
-				required: P,
-				value: J,
-				onChange: (e) => $(e, !0),
-				onKeyDown: (e) => Q(e, J, !0),
-				placeholder: R,
-				className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none", {
-					"border-middleGrey focus:border-black active:border-black": X === "default",
-					"ps-[52px]": A,
-					"pe-[52px]": X === "error" || X === "success",
-					"bg-white text-black": X !== "disabled",
-					"bg-pearl border-middleGrey": X === "disabled",
-					"border-red": X === "error",
-					"border-green": X === "success"
-				}),
-				"aria-label": x
-			}), /* @__PURE__ */ m("div", {
-				className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12", {
-					"text-grey": X === "disabled",
-					"text-red": X === "error",
-					"text-green": X === "success"
-				}),
-				children: [A && /* @__PURE__ */ p(f, {
-					name: A,
-					width: "24px"
-				}), /* @__PURE__ */ m("span", {
-					className: "ms-auto flex gap-x-8",
-					children: [X === "error" && /* @__PURE__ */ p(f, {
-						name: "CrossDefault",
-						width: "24px",
-						type: j
-					}), X === "success" && /* @__PURE__ */ p(f, {
-						name: "CheckDefault",
-						width: "24px",
-						type: j
-					})]
-				})]
-			})]
-		}) : /* @__PURE__ */ m("div", {
-			className: "flex gap-8",
-			children: [/* @__PURE__ */ m("div", {
-				className: e("relative rounded-pill z-0 w-[120px] flex-shrink-0", {
-					"bg-white": X !== "disabled",
-					"bg-pearl border-middleGrey": X === "disabled"
-				}),
-				children: [/* @__PURE__ */ p("select", {
-					disabled: N,
-					value: W,
-					onChange: (e) => ee(e.target.value),
-					className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-semibold outline-none appearance-none bg-transparent", {
-						"border-middleGrey focus:border-black active:border-black": X === "default",
-						"text-black": X !== "disabled",
-						"bg-pearl border-middleGrey": X === "disabled",
-						"border-red": X === "error",
-						"border-green": X === "success",
-						"pe-[52px]": !0
-					}),
-					id: `${b}-prefix`,
-					"aria-label": `${x}-prefix`,
-					children: E.map((e) => /* @__PURE__ */ p("option", {
-						value: e.code,
-						children: e.code
-					}, e.code))
-				}), /* @__PURE__ */ p("div", {
-					className: "pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12 -z-1",
-					children: /* @__PURE__ */ p(f, {
-						name: "ArrowDefaultDown",
-						type: "svg",
-						width: "24px",
-						color: "black"
-					})
-				})]
-			}), /* @__PURE__ */ m("div", {
-				className: "relative flex-1",
-				children: [/* @__PURE__ */ p("input", {
-					ref: H,
-					type: "tel",
-					disabled: N,
-					required: P,
-					value: K,
-					onChange: (e) => $(e, !1),
-					onKeyDown: (e) => Q(e, K, !1),
-					placeholder: R,
-					className: e("text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none", {
-						"border-middleGrey focus:border-black active:border-black": X === "default",
-						"pe-[52px]": X === "error" || X === "success",
-						"bg-white text-black": X !== "disabled",
-						"bg-pearl border-middleGrey": X === "disabled",
-						"border-red": X === "error",
-						"border-green": X === "success"
-					}),
-					"aria-label": `${x}-number`
-				}), /* @__PURE__ */ p("div", {
-					className: e("pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12", {
-						"text-grey": X === "disabled",
-						"text-red": X === "error",
-						"text-green": X === "success"
-					}),
-					children: /* @__PURE__ */ m("span", {
-						className: "flex gap-x-8",
-						children: [X === "error" && /* @__PURE__ */ p(f, {
-							name: "CrossDefault",
-							width: "24px",
-							type: j
-						}), X === "success" && /* @__PURE__ */ p(f, {
-							name: "CheckDefault",
-							width: "24px",
-							type: j
-						})]
-					})
-				})]
-			})]
+		dataTestId: p,
+		disabled: m,
+		required: h,
+		hideRequiredStar: g,
+		validationStatus: _,
+		errorMessage: v
+	};
+	return /* @__PURE__ */ i(e, {
+		...C,
+		children: i(f === "full" ? t : n, {
+			id: C.id,
+			name: s,
+			value: c,
+			disabled: m,
+			required: h,
+			validationStatus: _,
+			onChange: x,
+			...b
 		})
 	});
 };
 //#endregion
-export { y as PhoneField };
+export { a as PhoneField };
 
 //# sourceMappingURL=PhoneField.js.map

package/ui/forms/PhoneField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneField.js","names":[],"sources":["../../../lib/ui/forms/PhoneField.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport {\n  type ChangeEvent,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  extractDigits,\n  formatWithPattern,\n  countDigitPlaceholders,\n  DEFAULT_PHONE_PREFIXES,\n  type PhonePrefix,\n} from '../helpers/phone';\n\nexport interface PhoneValue {\n  full: string;\n  prefix?: string;\n  number?: string;\n  raw: string;\n}\n\nexport interface PhoneFieldProps<Value = PhoneValue> extends FormControlProps<Value> {\n  mode?: 'full' | 'split';\n  pattern?: string;\n  prefixes?: PhonePrefix[];\n  defaultPrefix?: string;\n  description?: string;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  errorMessage?: string;\n  dataTestId?: string;\n  placeholder?: string;\n}\n\n// Extract default to constant to prevent breaking memoization (rerender-memo-with-default-value)\nconst DEFAULT_PREFIXES = DEFAULT_PHONE_PREFIXES;\n\n// Extract literal prefix from pattern (everything before first #)\nconst getLiteralPrefixInfo = (pattern: string) => {\n  const firstHashIndex = pattern.indexOf('#');\n  const literalPrefix = firstHashIndex > 0 ? pattern.substring(0, firstHashIndex) : '';\n  const literalPrefixDigits = extractDigits(literalPrefix);\n  return { literalPrefix, literalPrefixDigits };\n};\n\n// Strip literal prefix digits from digit string\nconst stripLiteralPrefix = (allDigits: string, literalPrefixDigits: string) => {\n  if (literalPrefixDigits.length > 0 && allDigits.startsWith(literalPrefixDigits)) {\n    return allDigits.substring(literalPrefixDigits.length);\n  }\n  return allDigits;\n};\n\n// Calculate cursor position after formatting\nconst calculateCursorPosition = (\n  digitsBeforeCursor: number,\n  formatted: string,\n  literalPrefixDigits: string,\n) => {\n  let digitCount = 0;\n  let skippedPrefixDigits = 0;\n\n  for (let i = 0; i < formatted.length; i++) {\n    if (/\\d/.test(formatted[i])) {\n      if (skippedPrefixDigits < literalPrefixDigits.length) {\n        skippedPrefixDigits++;\n        continue;\n      }\n\n      digitCount++;\n      if (digitCount === digitsBeforeCursor) {\n        return i + 1;\n      }\n    }\n  }\n\n  return formatted.length;\n};\n\nexport const PhoneField = <Value = PhoneValue,>(props: PhoneFieldProps<Value>) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    value: externalValue,\n    mode = 'full',\n    pattern = '## ## ## ## ##',\n    prefixes = DEFAULT_PREFIXES,\n    defaultPrefix = prefixes[0]?.code || '+1',\n    description,\n    validationStatus = 'default',\n    icon,\n    iconType,\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    className,\n    dataTestId = 'PhoneField',\n    placeholder = '',\n    onChange,\n    ...rest\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\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  const [fullNumber, setFullNumber] = useState('');\n\n  const internalStatus = useInternalStatus({\n    isDisabled: disabled,\n    validationStatus,\n  });\n\n  // Apply cursor position after state updates\n  useEffect(() => {\n    const ref = mode === 'full' ? inputRef : numberInputRef;\n    if (cursorPositionRef.current !== null && ref.current) {\n      ref.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);\n      cursorPositionRef.current = null;\n    }\n  }, [fullNumber, number, mode]);\n\n  // Initialize from external value\n  useEffect(() => {\n    if (externalValue && typeof externalValue === 'object' && 'full' in externalValue) {\n      const phoneValue = externalValue as unknown as PhoneValue;\n      if (mode === 'full') {\n        setFullNumber(phoneValue.full || '');\n      } else {\n        setPrefix(phoneValue.prefix || defaultPrefix);\n        setNumber(phoneValue.number || '');\n      }\n    }\n  }, [externalValue, mode, defaultPrefix]);\n\n  // Emit onChange with PhoneValue structure\n  const emitChange = useCallback(\n    (full: string, prefix?: string, number?: string) => {\n      const raw = extractDigits(full);\n      const phoneValue: PhoneValue = {\n        full,\n        prefix,\n        number,\n        raw,\n      };\n      onChange?.(name, phoneValue as Value);\n    },\n    [onChange, name],\n  );\n\n  // Unified handler for backspace/delete on non-digit characters\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>, currentValue: string, isFullMode: boolean) => {\n      if (e.key !== 'Backspace' && e.key !== 'Delete') {\n        return;\n      }\n\n      const input = e.currentTarget;\n      const cursorPosition = input.selectionStart || 0;\n      const selectionEnd = input.selectionEnd || 0;\n\n      // If there's a selection, let default behavior handle it\n      if (cursorPosition !== selectionEnd) {\n        return;\n      }\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n      // Check if we're on a non-digit character\n      const targetChar =\n        e.key === 'Backspace' ? currentValue[cursorPosition - 1] : currentValue[cursorPosition];\n\n      if (!targetChar || /\\d/.test(targetChar)) {\n        return;\n      }\n\n      e.preventDefault();\n\n      // Extract and clean digits\n      const allDigits = stripLiteralPrefix(extractDigits(currentValue), literalPrefixDigits);\n      const digitsBeforeCursorStr = stripLiteralPrefix(\n        extractDigits(currentValue.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      );\n      const digitsBeforeCursor = digitsBeforeCursorStr.length;\n\n      // Calculate new digits based on key\n      let newDigits: string;\n      let targetCursorDigits: number;\n\n      if (e.key === 'Backspace') {\n        if (digitsBeforeCursor === 0) return;\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor - 1) + allDigits.slice(digitsBeforeCursor);\n        targetCursorDigits = digitsBeforeCursor - 1;\n      } else {\n        // Delete\n        if (digitsBeforeCursor >= allDigits.length) return;\n        newDigits =\n          allDigits.slice(0, digitsBeforeCursor) + allDigits.slice(digitsBeforeCursor + 1);\n        targetCursorDigits = digitsBeforeCursor;\n      }\n\n      // Format and update\n      const formatted = formatWithPattern(newDigits, pattern);\n      const newCursor = calculateCursorPosition(targetCursorDigits, formatted, literalPrefixDigits);\n      cursorPositionRef.current = newCursor;\n\n      if (isFullMode) {\n        setFullNumber(formatted);\n        emitChange(formatted);\n      } else {\n        setNumber(formatted);\n        setPrefix((currentPrefix) => {\n          const combined = `${currentPrefix} ${formatted}`.trim();\n          emitChange(combined, currentPrefix, formatted);\n          return currentPrefix;\n        });\n      }\n    },\n    [pattern, emitChange],\n  );\n\n  // Unified handler for input changes\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>, isFullMode: boolean) => {\n      const inputValue = e.target.value;\n      const cursorPosition = e.target.selectionStart || 0;\n\n      const { literalPrefixDigits } = getLiteralPrefixInfo(pattern);\n\n      // Extract and clean digits\n      const allDigits = stripLiteralPrefix(extractDigits(inputValue), literalPrefixDigits);\n\n      // Check against pattern limit\n      const maxDigits = countDigitPlaceholders(pattern);\n      if (allDigits.length > maxDigits) {\n        return;\n      }\n\n      // Count digits before cursor\n      const digitsBeforeCursorInInput = stripLiteralPrefix(\n        extractDigits(inputValue.substring(0, cursorPosition)),\n        literalPrefixDigits,\n      );\n      const digitsBeforeCursor = digitsBeforeCursorInInput.length;\n\n      // Format the value\n      const formatted = formatWithPattern(allDigits, pattern);\n\n      // Calculate cursor position\n      const newCursor = calculateCursorPosition(digitsBeforeCursor, formatted, literalPrefixDigits);\n      cursorPositionRef.current = newCursor;\n\n      // Update state\n      if (isFullMode) {\n        setFullNumber(formatted);\n        emitChange(formatted);\n      } else {\n        setNumber(formatted);\n        setPrefix((currentPrefix) => {\n          const combined = `${currentPrefix} ${formatted}`.trim();\n          emitChange(combined, currentPrefix, formatted);\n          return currentPrefix;\n        });\n      }\n    },\n    [pattern, emitChange],\n  );\n\n  // Split mode: handle prefix change\n  const handlePrefixChange = useCallback(\n    (newPrefix: string) => {\n      setPrefix(newPrefix);\n      setNumber((currentNumber) => {\n        const combined = `${newPrefix} ${currentNumber}`.trim();\n        emitChange(combined, newPrefix, currentNumber);\n        return currentNumber;\n      });\n    },\n    [emitChange],\n  );\n\n  const formControlProps = {\n    id,\n    label,\n    className,\n    description,\n    dataName: 'PhoneField',\n    dataTestId,\n    disabled,\n    required,\n    hideRequiredStar,\n    validationStatus,\n    errorMessage,\n  };\n\n  return (\n    <FormControl {...formControlProps}>\n      {mode === 'full' ? (\n        // Full mode: single input with pattern masking\n        <div className=\"relative\">\n          <input\n            {...(rest as any)}\n            ref={inputRef}\n            id={id}\n            name={name}\n            type=\"tel\"\n            disabled={disabled}\n            required={required}\n            value={fullNumber}\n            onChange={(e) => handleInputChange(e, true)}\n            onKeyDown={(e) => handleKeyDown(e, fullNumber, true)}\n            placeholder={placeholder}\n            className={clsx(\n              'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none',\n              {\n                'border-middleGrey focus:border-black active:border-black':\n                  internalStatus === 'default',\n                'ps-[52px]': icon,\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={name}\n          />\n\n          <div\n            className={clsx(\n              'pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12',\n              {\n                'text-grey': internalStatus === 'disabled',\n                'text-red': internalStatus === 'error',\n                'text-green': internalStatus === 'success',\n              },\n            )}\n          >\n            {icon && <Icon name={icon} width=\"24px\" />}\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            </span>\n          </div>\n        </div>\n      ) : (\n        // Split mode: prefix dropdown + number input\n        <div className=\"flex gap-8\">\n          <div\n            className={clsx('relative rounded-pill z-0 w-[120px] flex-shrink-0', {\n              'bg-white': internalStatus !== 'disabled',\n              'bg-pearl border-middleGrey': internalStatus === 'disabled',\n            })}\n          >\n            <select\n              disabled={disabled}\n              value={prefix}\n              onChange={(e) => handlePrefixChange(e.target.value)}\n              className={clsx(\n                'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-semibold outline-none appearance-none bg-transparent',\n                {\n                  'border-middleGrey focus:border-black active:border-black':\n                    internalStatus === 'default',\n                  'text-black': internalStatus !== 'disabled',\n                  'bg-pearl border-middleGrey': internalStatus === 'disabled',\n                  'border-red': internalStatus === 'error',\n                  'border-green': internalStatus === 'success',\n                  'pe-[52px]': true, // Space for dropdown arrow\n                },\n              )}\n              id={`${id}-prefix`}\n              aria-label={`${name}-prefix`}\n            >\n              {prefixes.map((p) => (\n                <option key={p.code} value={p.code}>\n                  {p.code}\n                </option>\n              ))}\n            </select>\n\n            <div className=\"pointer-events-none absolute inset-0 flex items-center justify-end px-20 py-12 -z-1\">\n              <Icon name=\"ArrowDefaultDown\" type=\"svg\" width=\"24px\" color=\"black\" />\n            </div>\n          </div>\n\n          <div className=\"relative flex-1\">\n            <input\n              ref={numberInputRef}\n              type=\"tel\"\n              disabled={disabled}\n              required={required}\n              value={number}\n              onChange={(e) => handleInputChange(e, false)}\n              onKeyDown={(e) => handleKeyDown(e, number, false)}\n              placeholder={placeholder}\n              className={clsx(\n                'text-b3 rounded-pill w-full border overflow-hidden px-20 py-12 font-normal outline-none',\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={`${name}-number`}\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\n                {internalStatus === 'success' && (\n                  <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n                )}\n              </span>\n            </div>\n          </div>\n        </div>\n      )}\n    </FormControl>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"PhoneField.js","names":[],"sources":["../../../lib/ui/forms/PhoneField.tsx"],"sourcesContent":["import { type IconicTypes } from '@clubmed/trident-icons';\nimport { FormControl, type FormControlProps } from './FormControl';\nimport { PhoneFieldFullInput, type PhoneFieldFullProps } from './PhoneFieldFullInput';\nimport { PhoneFieldSplitInput, type PhoneFieldSplitProps } from './PhoneFieldSplitInput';\nimport { useId } from 'react';\n\nexport interface PhoneValue {\n  full: string;\n  prefix?: string;\n  number?: string;\n  raw: string;\n}\n\nexport type PhoneFieldProps<Value = PhoneValue> = FormControlProps<Value> &\n  PhoneFieldFullProps &\n  PhoneFieldSplitProps & {\n    mode?: 'full' | 'split';\n    pattern?: string;\n    iconType?: IconicTypes;\n    placeholder?: string;\n  };\n\nexport const PhoneField = <Value = PhoneValue,>(props: PhoneFieldProps<Value>) => {\n  const {\n    id,\n    name,\n    value,\n    label,\n    className,\n    description,\n    mode = 'full',\n    dataTestId = 'PhoneField',\n    disabled,\n    required,\n    hideRequiredStar,\n    validationStatus,\n    errorMessage,\n    onChange,\n    ...rest\n  } = props;\n  const onPhoneChange = onChange as ((event: Event, value: PhoneValue) => void) | undefined;\n  const internalId = useId();\n\n  const formControlProps = {\n    id: id || internalId,\n    label,\n    className,\n    description,\n    dataName: 'PhoneField',\n    dataTestId,\n    disabled,\n    required,\n    hideRequiredStar,\n    validationStatus,\n    errorMessage,\n  };\n\n  return (\n    <FormControl {...formControlProps}>\n      {mode === 'full' ? (\n        <PhoneFieldFullInput\n          id={formControlProps.id}\n          name={name}\n          value={value as PhoneValue | undefined}\n          disabled={disabled}\n          required={required}\n          validationStatus={validationStatus}\n          onChange={onPhoneChange}\n          {...rest}\n        />\n      ) : (\n        <PhoneFieldSplitInput\n          id={formControlProps.id}\n          name={name}\n          value={value as PhoneValue | undefined}\n          disabled={disabled}\n          required={required}\n          validationStatus={validationStatus}\n          onChange={onPhoneChange}\n          {...rest}\n        />\n      )}\n    </FormControl>\n  );\n};\n"],"mappings":";;;;;;;AAsBA,IAAa,KAAmC,MAAkC;CAChF,IAAM,EACJ,OACA,SACA,UACA,UACA,cACA,gBACA,UAAO,QACP,gBAAa,cACb,aACA,aACA,qBACA,qBACA,iBACA,aACA,GAAG,MACD,GACE,IAAgB,GAChB,IAAa,GAAO,EAEpB,IAAmB;EACvB,IAAI,KAAM;EACV;EACA;EACA;EACA,UAAU;EACV;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,kBAAC,GAAD;EAAa,GAAI;YAEb,EADD,MAAS,SACP,IAWA,GAXD;GACE,IAAI,EAAiB;GACf;GACC;GACG;GACA;GACQ;GAClB,UAAU;GACV,GAAI;GACJ,CAWA;EAEQ,CAAA"}

package/ui/forms/PhoneFieldFullInput.d.ts

@@ -0,0 +1,16 @@
+import { IconicNames, IconicTypes } from '@clubmed/trident-icons';
+import { InputHTMLAttributes } from 'react';
+import { FormControlProps } from './FormControl';
+import { PhoneValue } from './PhoneField';
+export interface PhoneFieldFullProps {
+    icon?: IconicNames;
+}
+export interface PhoneFieldFullInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'pattern'> {
+    value?: PhoneValue;
+    pattern?: string;
+    icon?: PhoneFieldFullProps['icon'];
+    iconType?: IconicTypes;
+    validationStatus?: FormControlProps<PhoneValue>['validationStatus'];
+    onChange?: (event: Event, value: PhoneValue) => void;
+}
+export declare const PhoneFieldFullInput: ({ id, name, value: externalValue, pattern, placeholder, icon, iconType, disabled, required, validationStatus, onChange, ...inputProps }: PhoneFieldFullInputProps) => import("react/jsx-runtime").JSX.Element;