@clubmed/trident-ui 2.0.0-beta.9 → 2.0.0

package/ui/forms/FloatingLabelTextField.js

@@ -0,0 +1,132 @@
+"use client";
+import { t as e } from "../../chunks/clsx.js";
+import { FormControlError as t } from "./FormControlError.js";
+import { useInternalStatus as n } from "../hooks/useInternalStatus.js";
+import { useValue as r } from "../hooks/useValue.js";
+import { useId as i, useRef 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/FloatingLabelTextField.tsx
+var u = (u) => {
+	let d = i(), { id: f = d, name: p = f, label: m, labelClassName: h, value: g, validationStatus: _ = "default", errorMessage: v, disabled: y = !1, required: b = !1, hideRequiredStar: x, description: S, icon: C, iconType: w, iconFirst: T = !0, hasDropdown: E = !1, clear: D = "", className: O, dataTestId: k, dataName: A, "data-testid": j, onChange: M, formatter: N, ...P } = u, { value: F, setValue: I } = r({
+		initialValue: g,
+		onChange: M,
+		formatter: N
+	}), L = n({
+		isDisabled: y,
+		validationStatus: _
+	}), [R, z] = o(!1), B = a(null), V = R || F !== "" && F != null, H = L === "error" && v, U = !y && F !== "" && F != null && !!D, W = Number(!!C && T), G = Number(!!C && !T) + Number(U || E) + Number(L === "error" || L === "success");
+	return /* @__PURE__ */ c("div", {
+		className: e("flex flex-col gap-4", O),
+		"data-name": A ?? "FloatingLabelTextField",
+		"data-testid": j ?? k,
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "relative",
+				children: [
+					/* @__PURE__ */ s("input", {
+						...P,
+						ref: B,
+						id: f,
+						name: p,
+						disabled: y,
+						required: b,
+						value: F,
+						onChange: (e) => I(e.target.value, e.nativeEvent),
+						onFocus: () => z(!0),
+						onBlur: () => z(!1),
+						style: {
+							"--nbIconsStart": W,
+							"--nbIconsEnd": G
+						},
+						className: e("text-b3 rounded-pill w-full border h-60 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)]", {
+							"pt-[26px] pb-[8px]": V && m,
+							"py-12": !(V && m),
+							"border-middleGrey focus:border-black active:border-black": L === "default",
+							"bg-white text-black": L !== "disabled",
+							"bg-pearl border-middleGrey": L === "disabled",
+							"border-red": L === "error",
+							"border-green": L === "success"
+						}),
+						"aria-label": m ? void 0 : p,
+						"aria-invalid": L === "error",
+						"aria-describedby": H ? `${f}-error` : void 0
+					}),
+					m && /* @__PURE__ */ c("label", {
+						htmlFor: f,
+						style: { left: `calc(20px + ${W} * 32px)` },
+						className: e("pointer-events-none absolute right-0 transition-all duration-150 select-none pe-[calc(20px+var(--nbIconsEnd)*32px)]", {
+							"top-[10px] text-b6 font-semibold": V,
+							"top-1/2 -translate-y-1/2 text-b3 font-normal": !V,
+							"text-red": L === "error" && V,
+							"text-middleGrey": L !== "error" && V,
+							"text-black": !V && L !== "disabled",
+							"text-grey": L === "disabled"
+						}, h),
+						children: [m, b && !x && /* @__PURE__ */ s("span", {
+							className: "text-red ms-4",
+							"aria-hidden": "true",
+							children: "*"
+						})]
+					}),
+					/* @__PURE__ */ c("div", {
+						className: e("pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12", {
+							"text-grey": L === "disabled",
+							"text-red": L === "error",
+							"text-green": L === "success"
+						}),
+						children: [C && T && /* @__PURE__ */ s(l, {
+							name: C,
+							width: "24px"
+						}), /* @__PURE__ */ c("span", {
+							className: "ms-auto flex gap-x-8",
+							children: [
+								L === "error" && /* @__PURE__ */ s(l, {
+									name: "CrossDefault",
+									width: "24px",
+									type: w
+								}),
+								L === "success" && /* @__PURE__ */ s(l, {
+									name: "CheckDefault",
+									width: "24px",
+									type: w
+								}),
+								(E || U) && (U ? /* @__PURE__ */ s("button", {
+									className: "pointer-events-auto outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2",
+									onClick: (e) => I("", e.nativeEvent),
+									"aria-label": D,
+									type: "reset",
+									children: /* @__PURE__ */ s(l, {
+										name: "CrossDefault",
+										className: "text-black",
+										width: "24px"
+									})
+								}) : /* @__PURE__ */ s(l, {
+									name: "ArrowDefaultDown",
+									className: "text-black",
+									width: "24px"
+								})),
+								!T && C && /* @__PURE__ */ s(l, {
+									name: C,
+									width: "24px"
+								})
+							]
+						})]
+					})
+				]
+			}),
+			S && /* @__PURE__ */ s("span", {
+				className: "text-b4 text-darkGrey font-normal px-20",
+				children: S
+			}),
+			H && /* @__PURE__ */ s(t, {
+				id: `${f}-error`,
+				children: v
+			})
+		]
+	});
+};
+//#endregion
+export { u as FloatingLabelTextField };
+
+//# sourceMappingURL=FloatingLabelTextField.js.map

package/ui/forms/FloatingLabelTextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingLabelTextField.js","names":[],"sources":["../../../lib/ui/forms/FloatingLabelTextField.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useState, useRef } from 'react';\nimport clsx from 'clsx';\nimport { useValue, type UseValueProps } from '../hooks/useValue';\nimport { useInternalStatus } from '../hooks/useInternalStatus';\nimport { FormControlError } from './FormControlError';\nimport { Icon, type IconicNames, type IconicTypes } from '@clubmed/trident-icons';\nimport { type FormControlProps } from './FormControl';\n\nexport interface FloatingLabelTextFieldProps<Value = string> extends FormControlProps<Value> {\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  formatter?: UseValueProps<Value>['formatter'];\n  hasDropdown?: boolean;\n  clear?: string;\n  iconFirst?: boolean;\n}\n\nexport const FloatingLabelTextField = <Value = string,>(\n  props: FloatingLabelTextFieldProps<Value>,\n) => {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    label,\n    labelClassName,\n    value: initialValue,\n    validationStatus = 'default',\n    errorMessage,\n    disabled = false,\n    required = false,\n    hideRequiredStar,\n    description,\n    icon,\n    iconType,\n    iconFirst = true,\n    hasDropdown = false,\n    clear = '',\n    className,\n    dataTestId,\n    dataName,\n    'data-testid': dataTestIdProp,\n    onChange,\n    formatter,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({ initialValue, onChange, formatter });\n  const internalStatus = useInternalStatus({ isDisabled: disabled, validationStatus });\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const isFloating = focused || (value !== '' && value !== null && value !== undefined);\n  const showError = internalStatus === 'error' && errorMessage;\n  const shouldDisplayClearButton =\n    !disabled && value !== '' && value !== null && value !== undefined && !!clear;\n\n  const nbIconsStart = Number(!!icon && iconFirst);\n  const nbIconsEnd =\n    Number(!!icon && !iconFirst) +\n    Number(shouldDisplayClearButton || hasDropdown) +\n    Number(internalStatus === 'error' || internalStatus === 'success');\n\n  return (\n    <div\n      className={clsx('flex flex-col gap-4', className)}\n      data-name={dataName ?? 'FloatingLabelTextField'}\n      data-testid={dataTestIdProp ?? dataTestId}\n    >\n      <div className=\"relative\">\n        <input\n          {...rest}\n          ref={inputRef}\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          value={value as string}\n          onChange={(e) => setValue(e.target.value as Value, e.nativeEvent)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          style={\n            {\n              '--nbIconsStart': nbIconsStart,\n              '--nbIconsEnd': nbIconsEnd,\n            } as React.CSSProperties\n          }\n          className={clsx(\n            'text-b3 rounded-pill w-full border h-60 font-normal outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2',\n            'ps-[calc(20px+var(--nbIconsStart)*32px)] pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n            {\n              'pt-[26px] pb-[8px]': isFloating && label,\n              'py-12': !(isFloating && label),\n              'border-middleGrey focus:border-black active:border-black':\n                internalStatus === 'default',\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={label ? undefined : name}\n          aria-invalid={internalStatus === 'error'}\n          aria-describedby={showError ? `${id}-error` : undefined}\n        />\n\n        {label && (\n          <label\n            htmlFor={id}\n            style={\n              {\n                left: `calc(20px + ${nbIconsStart} * 32px)`,\n              } as React.CSSProperties\n            }\n            className={clsx(\n              'pointer-events-none absolute right-0 transition-all duration-150 select-none pe-[calc(20px+var(--nbIconsEnd)*32px)]',\n              {\n                'top-[10px] text-b6 font-semibold': isFloating,\n                'top-1/2 -translate-y-1/2 text-b3 font-normal': !isFloating,\n                'text-red': internalStatus === 'error' && isFloating,\n                'text-middleGrey': internalStatus !== 'error' && isFloating,\n                'text-black': !isFloating && internalStatus !== 'disabled',\n                'text-grey': internalStatus === 'disabled',\n              },\n              labelClassName,\n            )}\n          >\n            {label}\n            {required && !hideRequiredStar && (\n              <span className=\"text-red ms-4\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\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 && iconFirst && <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            {internalStatus === 'success' && (\n              <Icon name=\"CheckDefault\" width=\"24px\" type={iconType} />\n            )}\n            {(hasDropdown || shouldDisplayClearButton) &&\n              (shouldDisplayClearButton ? (\n                <button\n                  className=\"pointer-events-auto outline-none focus-visible:ring-4 focus-visible:ring-black focus-visible:ring-offset-2\"\n                  onClick={(e) => setValue('' as Value, e.nativeEvent)}\n                  aria-label={clear}\n                  type=\"reset\"\n                >\n                  <Icon name=\"CrossDefault\" className=\"text-black\" width=\"24px\" />\n                </button>\n              ) : (\n                <Icon name=\"ArrowDefaultDown\" className=\"text-black\" width=\"24px\" />\n              ))}\n            {!iconFirst && icon && <Icon name={icon} width=\"24px\" />}\n          </span>\n        </div>\n      </div>\n\n      {description && (\n        <span className=\"text-b4 text-darkGrey font-normal px-20\">{description}</span>\n      )}\n\n      {showError && <FormControlError id={`${id}-error`}>{errorMessage}</FormControlError>}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/ui/forms/FormControl.d.ts

@@ -6,7 +6,7 @@ export type FormControlProps<Value = unknown, Attributes extends HTMLAttributes<
     label?: ReactNode;
     labelClassName?: string;
     validationStatus?: ValidationStatus;
-    onChange?: (name: string, value: Value) => void;
+    onChange?: (event: Event, value: Value) => void;
     /**
      * @deprecated use ["data-testid"] instead
      */

package/ui/forms/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":[],"sources":["../../../lib/ui/forms/FormControl.tsx"],"sourcesContent":["import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';\nimport { useInternalStatus, type ValidationStatus } from '../hooks/useInternalStatus';\nimport { FormLabel, type FormLabelProps } from './FormLabel';\nimport clsx from 'clsx';\nimport { FormControlError } from './FormControlError';\n\nexport type FormControlProps<\n  Value = unknown,\n  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>,\n> = {\n  value?: Value;\n  label?: ReactNode;\n  labelClassName?: string;\n  validationStatus?: ValidationStatus;\n  onChange?: (name: string, value: Value) => void;\n  /**\n   * @deprecated use [\"data-testid\"] instead\n   */\n  dataTestId?: string;\n  'data-testid'?: string;\n  dataName?: string;\n  errorMessage?: string;\n  inline?: boolean;\n} & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;\n\nexport const FormControl = <Value = string,>({\n  id,\n  label,\n  description,\n  disabled,\n  required,\n  className,\n  validationStatus = 'default',\n  children,\n  errorMessage,\n  dataTestId,\n  'data-testid': dataTestIdProp,\n  dataName,\n  labelClassName,\n  hideRequiredStar,\n  layout,\n  inline,\n}: FormControlProps<Value>) => {\n  const internalStatus = useInternalStatus({\n    isDisabled: !!disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={clsx('flex gap-4', inline ? '' : 'flex-col', className)}\n      data-name={dataName}\n      data-testid={dataTestIdProp ?? dataTestId}\n    >\n      {label && id && (\n        <FormLabel\n          description={description}\n          id={id}\n          layout={layout}\n          required={required}\n          hideRequiredStar={hideRequiredStar}\n          className={labelClassName}\n        >\n          {label}\n        </FormLabel>\n      )}\n\n      {children}\n\n      {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAa,KAAgC,EAC3C,OACA,UACA,gBACA,aACA,aACA,cACA,sBAAmB,WACnB,aACA,iBACA,eACA,eAAe,GACf,aACA,mBACA,qBACA,WACA,gBAC6B;CAM7B,IAAM,IALiB,EAAkB;EACvC,YAAY,CAAC,CAAC;EACd;EACD,CAAC,KAEmD,WAAW;AAEhE,QACE,kBAAC,OAAD;EACE,WAAW,EAAK,cAAc,IAAS,KAAK,YAAY,EAAU;EAClE,aAAW;EACX,eAAa,KAAkB;YAHjC;GAKG,KAAS,KACR,kBAAC,GAAD;IACe;IACT;IACI;IACE;IACQ;IAClB,WAAW;cAEV;IACS,CAAA;GAGb;GAEA,KAA6B,kBAAC,GAAD,EAAA,UAAmB,GAAgC,CAAA;GAC7E"}
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../lib/ui/forms/FormControl.tsx"],"sourcesContent":["import type { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';\nimport { useInternalStatus, type ValidationStatus } from '../hooks/useInternalStatus';\nimport { FormLabel, type FormLabelProps } from './FormLabel';\nimport clsx from 'clsx';\nimport { FormControlError } from './FormControlError';\n\nexport type FormControlProps<\n  Value = unknown,\n  Attributes extends HTMLAttributes<HTMLElement> = InputHTMLAttributes<HTMLInputElement>,\n> = {\n  value?: Value;\n  label?: ReactNode;\n  labelClassName?: string;\n  validationStatus?: ValidationStatus;\n  onChange?: (event: Event, value: Value) => void;\n  /**\n   * @deprecated use [\"data-testid\"] instead\n   */\n  dataTestId?: string;\n  'data-testid'?: string;\n  dataName?: string;\n  errorMessage?: string;\n  inline?: boolean;\n} & Omit<Attributes & Partial<FormLabelProps>, 'onChange' | 'value'>;\n\nexport const FormControl = <Value = string,>({\n  id,\n  label,\n  description,\n  disabled,\n  required,\n  className,\n  validationStatus = 'default',\n  children,\n  errorMessage,\n  dataTestId,\n  'data-testid': dataTestIdProp,\n  dataName,\n  labelClassName,\n  hideRequiredStar,\n  layout,\n  inline,\n}: FormControlProps<Value>) => {\n  const internalStatus = useInternalStatus({\n    isDisabled: !!disabled,\n    validationStatus,\n  });\n\n  const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n  return (\n    <div\n      className={clsx('flex gap-4', inline ? '' : 'flex-col', className)}\n      data-name={dataName}\n      data-testid={dataTestIdProp ?? dataTestId}\n    >\n      {label && id && (\n        <FormLabel\n          description={description}\n          id={id}\n          layout={layout}\n          required={required}\n          hideRequiredStar={hideRequiredStar}\n          className={labelClassName}\n        >\n          {label}\n        </FormLabel>\n      )}\n\n      {children}\n\n      {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAa,KAAgC,EAC3C,OACA,UACA,gBACA,aACA,aACA,cACA,sBAAmB,WACnB,aACA,iBACA,eACA,eAAe,GACf,aACA,mBACA,qBACA,WACA,gBAC6B;CAM7B,IAAM,IALiB,EAAkB;EACvC,YAAY,CAAC,CAAC;EACd;EACD,CAAC,KAEmD,WAAW;AAEhE,QACE,kBAAC,OAAD;EACE,WAAW,EAAK,cAAc,IAAS,KAAK,YAAY,EAAU;EAClE,aAAW;EACX,eAAa,KAAkB;YAHjC;GAKG,KAAS,KACR,kBAAC,GAAD;IACe;IACT;IACI;IACE;IACQ;IAClB,WAAW;cAEV;IACS,CAAA;GAGb;GAEA,KAA6B,kBAAC,GAAD,EAAA,UAAmB,GAAgC,CAAA;GAC7E"}

package/ui/forms/FormControlError.js

@@ -1,14 +1,14 @@
 import { t as e } from "../../chunks/clsx.js";
 import { twMerge as t } from "../helpers/twMerge.js";
-import { Icon as n } from "@clubmed/trident-icons";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Icon as i } from "@clubmed/trident-icons";
 //#region lib/ui/forms/FormControlError.tsx
 function a({ children: a, className: o, ...s }) {
-	return /* @__PURE__ */ i("span", {
+	return /* @__PURE__ */ r("span", {
 		...s,
 		"data-testid": "FormControlError",
 		className: e("text-red", t("text-b4 flex items-start gap-x-4 px-20", o)),
-		children: [/* @__PURE__ */ r(n, {
+		children: [/* @__PURE__ */ n(i, {
 			name: "Error",
 			width: "20px"
 		}), a]

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;

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 { jsx as i } from "react/jsx-runtime";
+import "@clubmed/trident-icons";
 //#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