@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/password-field/password-field.d.ts

@@ -17,6 +17,21 @@ export interface PasswordFieldProps extends Omit<InputProps, "className" | "styl
    * after mount and changed words rise in. Nothing animates on first render.
    */
   description?: string;
+  /**
+   * Error text under the field. Sets `aria-invalid`, so the box takes its
+   * invalid border, and is announced as an alert when it appears. Opens and
+   * closes like `description`; an empty or `undefined` value closes the row.
+   * The same prop as Input's. Inside a React Aria `TextField` (which supplies
+   * the label and description) the error row is still rendered, after the
+   * control, and named in the input's `aria-describedby`.
+   */
+  error?: string;
+  /**
+   * The field must be filled: the input is `required` (announced by screen
+   * readers, and checked by native form validation) and the label shows the
+   * required marker.
+   */
+  isRequired?: boolean;
   /** Translated or reworded toggle names. */
   messages?: Partial<PasswordFieldMessages>;
 }
@@ -31,6 +46,7 @@ export interface PasswordFieldProps extends Omit<InputProps, "className" | "styl
  *
  * @example
  * <PasswordField label="Password" description="At least eight characters." />
+ * <PasswordField label="API secret" isRequired error={errors.secret?.message} {...register("secret")} />
  */
 export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion

package/dist/password-field/password-field.js

@@ -1,11 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldMessage } from "../lib/field-message.js";
 import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
 import { EyeMorph } from "../lib/eye-morph.js";
-import { forwardRef, useState } from "react";
-import { Button, Group, Input } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Button, Group, Input, InputContext, useSlottedContext } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/password-field/password-field.tsx
 const defaultPasswordFieldMessages = {
 	showPassword: "Show password",
@@ -22,10 +23,10 @@ const defaultPasswordFieldMessages = {
 * would otherwise leave the border pale; a plain Input is different because
 * React Aria treats a text input as always keyboard-focused.
 */
-const shellClass = cn(fieldSurfaceVariants(), "flex items-center h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [&:where([data-focus-within])]:border-foreground");
+const shellClass = cn(fieldSurfaceVariants(), "flex items-center h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [&:where([data-focus-within])]:border-border-strong");
 /** The input inside the box: no border, no fill, no outline of its own. */
 const inputClass = "min-w-0 flex-1 border-0 bg-transparent p-0 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed motion-safe:data-[reveal=shown]:animate-field-reveal-shown motion-safe:data-[reveal=hidden]:animate-field-reveal-hidden";
-const toggleClass = "field-toggle-button grid size-7.5 flex-none cursor-pointer place-items-center rounded-md border-0 bg-transparent p-0 text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground aria-pressed:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed";
+const toggleClass = "field-toggle-button grid size-7.5 flex-none cursor-pointer place-items-center rounded-control border-0 bg-transparent p-0 text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground aria-pressed:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed";
 /**
 * A password input with a show and hide toggle. Switching resolves the text in
 * place from a soft blur, and the eye is one outline that a slash draws across.
@@ -37,8 +38,9 @@ const toggleClass = "field-toggle-button grid size-7.5 flex-none cursor-pointer
 *
 * @example
 * <PasswordField label="Password" description="At least eight characters." />
+* <PasswordField label="API secret" isRequired error={errors.secret?.message} {...register("secret")} />
 */
-const PasswordField = forwardRef(function PasswordField({ label, description, messages: messagesProp, className, ...props }, ref) {
+const PasswordField = forwardRef(function PasswordField({ label, description, error, isRequired, messages: messagesProp, className, ...props }, ref) {
 	const messages = {
 		...defaultPasswordFieldMessages,
 		...messagesProp
@@ -51,20 +53,35 @@ const PasswordField = forwardRef(function PasswordField({ label, description, me
 		describedBy: props["aria-describedby"],
 		invalid: props["aria-invalid"],
 		description,
-		error: void 0
+		error
 	});
+	const inputContext = useSlottedContext(InputContext);
+	const generatedId = useId();
+	const insideErrorId = field.inside && error ? `${generatedId}-error` : void 0;
+	const [errorRow, setErrorRow] = useState(Boolean(insideErrorId));
+	if (insideErrorId && !errorRow) setErrorRow(true);
+	const insideProps = insideErrorId ? {
+		"aria-invalid": true,
+		"aria-describedby": [
+			inputContext?.["aria-describedby"],
+			props["aria-describedby"],
+			insideErrorId
+		].filter(Boolean).join(" ")
+	} : {};
 	const disabled = Boolean(props.disabled);
 	const ariaInvalid = props["aria-invalid"];
 	const control = /* @__PURE__ */ jsxs(Group, {
 		role: "presentation",
 		isDisabled: disabled,
-		isInvalid: ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false",
+		isInvalid: Boolean(error) || ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false",
 		"data-slot": "password-field-shell",
 		className: shellClass,
 		children: [/* @__PURE__ */ jsx(Input, {
 			ref,
 			...props,
+			...isRequired ? { required: true } : {},
 			...field.controlProps,
+			...insideProps,
 			type: visible ? "text" : "password",
 			"data-slot": "password-field",
 			"data-reveal": toggled ? visible ? "shown" : "hidden" : void 0,
@@ -82,14 +99,26 @@ const PasswordField = forwardRef(function PasswordField({ label, description, me
 			children: /* @__PURE__ */ jsx(EyeMorph, { slashed: visible })
 		})]
 	});
+	if (field.inside) return /* @__PURE__ */ jsxs(Fragment$1, { children: [control, errorRow ? /* @__PURE__ */ jsx("div", {
+		"data-slot": "password-field-error-row",
+		className: "grid min-w-0 font-sans",
+		children: /* @__PURE__ */ jsx(FieldMessage, {
+			id: insideErrorId,
+			text: error,
+			tone: "error",
+			wordExit: "sharp",
+			numbers: false
+		})
+	}) : null] });
 	if (!field.active) return control;
 	return /* @__PURE__ */ jsx(FieldShell, {
 		label,
 		controlId: field.controlId,
 		description,
 		hintId: field.hintId,
-		error: void 0,
-		errorId: void 0,
+		error,
+		errorId: field.errorId,
+		required: isRequired,
 		wordExit: "sharp",
 		numbers: false,
 		children: control

package/dist/password-field/password-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-field.js","names":["AriaGroup","AriaInput","AriaButton"],"sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useState } from \"react\";\nimport {\n  Button as AriaButton,\n  Group as AriaGroup,\n  Input as AriaInput,\n  type InputProps as AriaInputProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { EyeMorph } from \"../lib/eye-morph.js\";\nimport { FieldShell, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/** The toggle's accessible names. Both have English defaults; pass the ones you translate. */\nexport interface PasswordFieldMessages {\n  showPassword: string;\n  hidePassword: string;\n}\n\nexport const defaultPasswordFieldMessages: PasswordFieldMessages = {\n  showPassword: \"Show password\",\n  hidePassword: \"Hide password\",\n};\n\n/**\n * The field's box. A React Aria `Group` rather than the input, because the\n * toggle sits inside the same border: it carries the shared field surface (the\n * 160ms border transition, the darker border on hover and focus, the muted\n * disabled look, the invalid border) and the input inside is borderless.\n *\n * `data-focus-within` darkens the border too. A Group reports focus-visible\n * from the input modality, so a mouse click into the input, or onto the toggle,\n * would otherwise leave the border pale; a plain Input is different because\n * React Aria treats a text input as always keyboard-focused.\n */\nconst shellClass = cn(\n  fieldSurfaceVariants(),\n  \"flex items-center h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [&:where([data-focus-within])]:border-foreground\",\n);\n\n/** The input inside the box: no border, no fill, no outline of its own. */\nconst inputClass =\n  \"min-w-0 flex-1 border-0 bg-transparent p-0 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed motion-safe:data-[reveal=shown]:animate-field-reveal-shown motion-safe:data-[reveal=hidden]:animate-field-reveal-hidden\";\n\nconst toggleClass =\n  \"field-toggle-button grid size-7.5 flex-none cursor-pointer place-items-center rounded-md border-0 bg-transparent p-0 text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground aria-pressed:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed\";\n\nexport interface PasswordFieldProps extends Omit<\n  AriaInputProps,\n  \"className\" | \"style\" | \"size\" | \"type\"\n> {\n  /** Extra classes for the input. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /** The visible label, tied to the input with `htmlFor`. */\n  label: string;\n  /**\n   * Helper text under the field, named by `aria-describedby`. A string, because\n   * the copy is animated word by word: it opens on a spring when it appears\n   * after mount and changed words rise in. Nothing animates on first render.\n   */\n  description?: string;\n  /** Translated or reworded toggle names. */\n  messages?: Partial<PasswordFieldMessages>;\n}\n\n/**\n * A password input with a show and hide toggle. Switching resolves the text in\n * place from a soft blur, and the eye is one outline that a slash draws across.\n * Native input props apply to the input; `disabled` also disables the toggle,\n * and `aria-invalid` gives the box its invalid border.\n *\n * The toggle's name changes with the state and it is also `aria-pressed`, so a\n * screen reader may announce both (\"Hide password, pressed\").\n *\n * @example\n * <PasswordField label=\"Password\" description=\"At least eight characters.\" />\n */\nexport const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  function PasswordField({ label, description, messages: messagesProp, className, ...props }, ref) {\n    const messages = { ...defaultPasswordFieldMessages, ...messagesProp };\n    const [visible, setVisible] = useState(false);\n    // data-reveal only appears after the first toggle, so the animation runs on each change but never on mount.\n    const [toggled, setToggled] = useState(false);\n    const field = useFieldWiring({\n      enabled: true,\n      id: props.id,\n      describedBy: props[\"aria-describedby\"],\n      invalid: props[\"aria-invalid\"],\n      description,\n      error: undefined,\n    });\n    const disabled = Boolean(props.disabled);\n    const ariaInvalid = props[\"aria-invalid\"];\n    const invalid = ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== \"false\";\n\n    const control = (\n      <AriaGroup\n        role=\"presentation\"\n        isDisabled={disabled}\n        isInvalid={invalid}\n        data-slot=\"password-field-shell\"\n        className={shellClass}\n      >\n        <AriaInput\n          ref={ref}\n          {...props}\n          {...field.controlProps}\n          type={visible ? \"text\" : \"password\"}\n          data-slot=\"password-field\"\n          data-reveal={toggled ? (visible ? \"shown\" : \"hidden\") : undefined}\n          className={cn(inputClass, className)}\n        />\n        <AriaButton\n          type=\"button\"\n          isDisabled={disabled}\n          aria-label={visible ? messages.hidePassword : messages.showPassword}\n          aria-pressed={visible}\n          onPress={() => {\n            setVisible((current) => !current);\n            setToggled(true);\n          }}\n          className={toggleClass}\n        >\n          <EyeMorph slashed={visible} />\n        </AriaButton>\n      </AriaGroup>\n    );\n\n    if (!field.active) return control;\n    return (\n      <FieldShell\n        label={label}\n        controlId={field.controlId}\n        description={description}\n        hintId={field.hintId}\n        error={undefined}\n        errorId={undefined}\n        wordExit=\"sharp\"\n        numbers={false}\n      >\n        {control}\n      </FieldShell>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAqBA,MAAa,+BAAsD;CACjE,cAAc;CACd,cAAc;AAChB;;;;;;;;;;;;AAaA,MAAM,aAAa,GACjB,qBAAqB,GACrB,gJACF;;AAGA,MAAM,aACJ;AAEF,MAAM,cACJ;;;;;;;;;;;;;AAgCF,MAAa,gBAAgB,WAC3B,SAAS,cAAc,EAAE,OAAO,aAAa,UAAU,cAAc,WAAW,GAAG,SAAS,KAAK;CAC/F,MAAM,WAAW;EAAE,GAAG;EAA8B,GAAG;CAAa;CACpE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,QAAQ,eAAe;EAC3B,SAAS;EACT,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA,OAAO,KAAA;CACT,CAAC;CACD,MAAM,WAAW,QAAQ,MAAM,QAAQ;CACvC,MAAM,cAAc,MAAM;CAG1B,MAAM,UACJ,qBAACA,OAAD;EACE,MAAK;EACL,YAAY;EACZ,WANY,gBAAgB,KAAA,KAAa,gBAAgB,SAAS,gBAAgB;EAOlF,aAAU;EACV,WAAW;EALb,UAAA,CAOE,oBAACC,OAAD;GACO;GACL,GAAI;GACJ,GAAI,MAAM;GACV,MAAM,UAAU,SAAS;GACzB,aAAU;GACV,eAAa,UAAW,UAAU,UAAU,WAAY,KAAA;GACxD,WAAW,GAAG,YAAY,SAAS;EACpC,CAAA,GACD,oBAACC,QAAD;GACE,MAAK;GACL,YAAY;GACZ,cAAY,UAAU,SAAS,eAAe,SAAS;GACvD,gBAAc;GACd,eAAe;IACb,YAAY,YAAY,CAAC,OAAO;IAChC,WAAW,IAAI;GACjB;GACA,WAAW;GAEX,UAAA,oBAAC,UAAD,EAAU,SAAS,QAAU,CAAA;EACnB,CAAA,CACH;;CAGb,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACd,OAAO,KAAA;EACP,SAAS,KAAA;EACT,UAAS;EACT,SAAS;EAER,UAAA;CACS,CAAA;AAEhB,CACF"}
+{"version":3,"file":"password-field.js","names":["AriaGroup","AriaInput","AriaButton"],"sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport {\n  Button as AriaButton,\n  Group as AriaGroup,\n  Input as AriaInput,\n  InputContext,\n  useSlottedContext,\n  type InputProps as AriaInputProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { EyeMorph } from \"../lib/eye-morph.js\";\nimport { FieldMessage } from \"../lib/field-message.js\";\nimport { FieldShell, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/** The toggle's accessible names. Both have English defaults; pass the ones you translate. */\nexport interface PasswordFieldMessages {\n  showPassword: string;\n  hidePassword: string;\n}\n\nexport const defaultPasswordFieldMessages: PasswordFieldMessages = {\n  showPassword: \"Show password\",\n  hidePassword: \"Hide password\",\n};\n\n/**\n * The field's box. A React Aria `Group` rather than the input, because the\n * toggle sits inside the same border: it carries the shared field surface (the\n * 160ms border transition, the darker border on hover and focus, the muted\n * disabled look, the invalid border) and the input inside is borderless.\n *\n * `data-focus-within` darkens the border too. A Group reports focus-visible\n * from the input modality, so a mouse click into the input, or onto the toggle,\n * would otherwise leave the border pale; a plain Input is different because\n * React Aria treats a text input as always keyboard-focused.\n */\nconst shellClass = cn(\n  fieldSurfaceVariants(),\n  \"flex items-center h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [&:where([data-focus-within])]:border-border-strong\",\n);\n\n/** The input inside the box: no border, no fill, no outline of its own. */\nconst inputClass =\n  \"min-w-0 flex-1 border-0 bg-transparent p-0 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed motion-safe:data-[reveal=shown]:animate-field-reveal-shown motion-safe:data-[reveal=hidden]:animate-field-reveal-hidden\";\n\nconst toggleClass =\n  \"field-toggle-button grid size-7.5 flex-none cursor-pointer place-items-center rounded-control border-0 bg-transparent p-0 text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground aria-pressed:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed\";\n\nexport interface PasswordFieldProps extends Omit<\n  AriaInputProps,\n  \"className\" | \"style\" | \"size\" | \"type\"\n> {\n  /** Extra classes for the input. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /** The visible label, tied to the input with `htmlFor`. */\n  label: string;\n  /**\n   * Helper text under the field, named by `aria-describedby`. A string, because\n   * the copy is animated word by word: it opens on a spring when it appears\n   * after mount and changed words rise in. Nothing animates on first render.\n   */\n  description?: string;\n  /**\n   * Error text under the field. Sets `aria-invalid`, so the box takes its\n   * invalid border, and is announced as an alert when it appears. Opens and\n   * closes like `description`; an empty or `undefined` value closes the row.\n   * The same prop as Input's. Inside a React Aria `TextField` (which supplies\n   * the label and description) the error row is still rendered, after the\n   * control, and named in the input's `aria-describedby`.\n   */\n  error?: string;\n  /**\n   * The field must be filled: the input is `required` (announced by screen\n   * readers, and checked by native form validation) and the label shows the\n   * required marker.\n   */\n  isRequired?: boolean;\n  /** Translated or reworded toggle names. */\n  messages?: Partial<PasswordFieldMessages>;\n}\n\n/**\n * A password input with a show and hide toggle. Switching resolves the text in\n * place from a soft blur, and the eye is one outline that a slash draws across.\n * Native input props apply to the input; `disabled` also disables the toggle,\n * and `aria-invalid` gives the box its invalid border.\n *\n * The toggle's name changes with the state and it is also `aria-pressed`, so a\n * screen reader may announce both (\"Hide password, pressed\").\n *\n * @example\n * <PasswordField label=\"Password\" description=\"At least eight characters.\" />\n * <PasswordField label=\"API secret\" isRequired error={errors.secret?.message} {...register(\"secret\")} />\n */\nexport const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  function PasswordField(\n    { label, description, error, isRequired, messages: messagesProp, className, ...props },\n    ref,\n  ) {\n    const messages = { ...defaultPasswordFieldMessages, ...messagesProp };\n    const [visible, setVisible] = useState(false);\n    // data-reveal only appears after the first toggle, so the animation runs on each change but never on mount.\n    const [toggled, setToggled] = useState(false);\n    const field = useFieldWiring({\n      enabled: true,\n      id: props.id,\n      describedBy: props[\"aria-describedby\"],\n      invalid: props[\"aria-invalid\"],\n      description,\n      error,\n    });\n    // Inside a React Aria TextField the shell (and its error row) is skipped, since the\n    // field supplies the label and description. The error is ours, not the field's,\n    // so it is rendered after the control here and added to the input's\n    // aria-describedby, after the field's own ids (an explicit prop replaces the\n    // context's, so they are carried over). Without this the box turned red with no text.\n    const inputContext = useSlottedContext(InputContext) as {\n      \"aria-describedby\"?: string;\n    } | null;\n    const generatedId = useId();\n    const insideErrorId = field.inside && error ? `${generatedId}-error` : undefined;\n    // The row's wrapper (it carries the font the shell would) is added the first time an\n    // error arrives and then kept, so the row can animate closed; without one, nothing is added.\n    const [errorRow, setErrorRow] = useState(Boolean(insideErrorId));\n    if (insideErrorId && !errorRow) setErrorRow(true);\n    const insideProps = insideErrorId\n      ? {\n          \"aria-invalid\": true,\n          \"aria-describedby\": [\n            inputContext?.[\"aria-describedby\"],\n            props[\"aria-describedby\"],\n            insideErrorId,\n          ]\n            .filter(Boolean)\n            .join(\" \"),\n        }\n      : {};\n    const disabled = Boolean(props.disabled);\n    const ariaInvalid = props[\"aria-invalid\"];\n    const invalid =\n      Boolean(error) ||\n      (ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== \"false\");\n\n    const control = (\n      <AriaGroup\n        role=\"presentation\"\n        isDisabled={disabled}\n        isInvalid={invalid}\n        data-slot=\"password-field-shell\"\n        className={shellClass}\n      >\n        <AriaInput\n          ref={ref}\n          {...props}\n          {...(isRequired ? { required: true } : {})}\n          {...field.controlProps}\n          {...insideProps}\n          type={visible ? \"text\" : \"password\"}\n          data-slot=\"password-field\"\n          data-reveal={toggled ? (visible ? \"shown\" : \"hidden\") : undefined}\n          className={cn(inputClass, className)}\n        />\n        <AriaButton\n          type=\"button\"\n          isDisabled={disabled}\n          aria-label={visible ? messages.hidePassword : messages.showPassword}\n          aria-pressed={visible}\n          onPress={() => {\n            setVisible((current) => !current);\n            setToggled(true);\n          }}\n          className={toggleClass}\n        >\n          <EyeMorph slashed={visible} />\n        </AriaButton>\n      </AriaGroup>\n    );\n\n    if (field.inside) {\n      // Always this shape inside a field, so an error arriving later does not remount the input.\n      return (\n        <>\n          {control}\n          {errorRow ? (\n            <div data-slot=\"password-field-error-row\" className=\"grid min-w-0 font-sans\">\n              <FieldMessage\n                id={insideErrorId}\n                text={error}\n                tone=\"error\"\n                wordExit=\"sharp\"\n                numbers={false}\n              />\n            </div>\n          ) : null}\n        </>\n      );\n    }\n    if (!field.active) return control;\n    return (\n      <FieldShell\n        label={label}\n        controlId={field.controlId}\n        description={description}\n        hintId={field.hintId}\n        error={error}\n        errorId={field.errorId}\n        required={isRequired}\n        wordExit=\"sharp\"\n        numbers={false}\n      >\n        {control}\n      </FieldShell>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAwBA,MAAa,+BAAsD;CACjE,cAAc;CACd,cAAc;AAChB;;;;;;;;;;;;AAaA,MAAM,aAAa,GACjB,qBAAqB,GACrB,mJACF;;AAGA,MAAM,aACJ;AAEF,MAAM,cACJ;;;;;;;;;;;;;;AAgDF,MAAa,gBAAgB,WAC3B,SAAS,cACP,EAAE,OAAO,aAAa,OAAO,YAAY,UAAU,cAAc,WAAW,GAAG,SAC/E,KACA;CACA,MAAM,WAAW;EAAE,GAAG;EAA8B,GAAG;CAAa;CACpE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,QAAQ,eAAe;EAC3B,SAAS;EACT,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA;CACF,CAAC;CAMD,MAAM,eAAe,kBAAkB,YAAY;CAGnD,MAAM,cAAc,MAAM;CAC1B,MAAM,gBAAgB,MAAM,UAAU,QAAQ,GAAG,YAAY,UAAU,KAAA;CAGvE,MAAM,CAAC,UAAU,eAAe,SAAS,QAAQ,aAAa,CAAC;CAC/D,IAAI,iBAAiB,CAAC,UAAU,YAAY,IAAI;CAChD,MAAM,cAAc,gBAChB;EACE,gBAAgB;EAChB,oBAAoB;GAClB,eAAe;GACf,MAAM;GACN;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACb,IACA,CAAC;CACL,MAAM,WAAW,QAAQ,MAAM,QAAQ;CACvC,MAAM,cAAc,MAAM;CAK1B,MAAM,UACJ,qBAACA,OAAD;EACE,MAAK;EACL,YAAY;EACZ,WAPF,QAAQ,KAAK,KACZ,gBAAgB,KAAA,KAAa,gBAAgB,SAAS,gBAAgB;EAOrE,aAAU;EACV,WAAW;EALb,UAAA,CAOE,oBAACC,OAAD;GACO;GACL,GAAI;GACJ,GAAK,aAAa,EAAE,UAAU,KAAK,IAAI,CAAC;GACxC,GAAI,MAAM;GACV,GAAI;GACJ,MAAM,UAAU,SAAS;GACzB,aAAU;GACV,eAAa,UAAW,UAAU,UAAU,WAAY,KAAA;GACxD,WAAW,GAAG,YAAY,SAAS;EACpC,CAAA,GACD,oBAACC,QAAD;GACE,MAAK;GACL,YAAY;GACZ,cAAY,UAAU,SAAS,eAAe,SAAS;GACvD,gBAAc;GACd,eAAe;IACb,YAAY,YAAY,CAAC,OAAO;IAChC,WAAW,IAAI;GACjB;GACA,WAAW;GAEX,UAAA,oBAAC,UAAD,EAAU,SAAS,QAAU,CAAA;EACnB,CAAA,CACH;;CAGb,IAAI,MAAM,QAER,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,SACA,WACC,oBAAC,OAAD;EAAK,aAAU;EAA2B,WAAU;EAClD,UAAA,oBAAC,cAAD;GACE,IAAI;GACJ,MAAM;GACN,MAAK;GACL,UAAS;GACT,SAAS;EACV,CAAA;CACE,CAAA,IACH,IACJ,EAAA,CAAA;CAGN,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACP;EACP,SAAS,MAAM;EACf,UAAU;EACV,UAAS;EACT,SAAS;EAER,UAAA;CACS,CAAA;AAEhB,CACF"}

package/dist/phone-input/index.d.ts

@@ -0,0 +1,3 @@
+import { PHONE_COUNTRIES, PhoneCountry, PhoneStatus, formatNational, formatPhoneNumber, parsePhoneNumber } from "./phone-countries.js";
+import { PhoneInput, PhoneInputDetails, PhoneInputProps } from "./phone-input.js";
+export { PHONE_COUNTRIES, type PhoneCountry, PhoneInput, type PhoneInputDetails, type PhoneInputProps, type PhoneStatus, formatNational, formatPhoneNumber, parsePhoneNumber };

package/dist/phone-input/index.js

@@ -0,0 +1,3 @@
+import { PHONE_COUNTRIES, formatNational, formatPhoneNumber, parsePhoneNumber } from "./phone-countries.js";
+import { PhoneInput } from "./phone-input.js";
+export { PHONE_COUNTRIES, PhoneInput, formatNational, formatPhoneNumber, parsePhoneNumber };

package/dist/phone-input/phone-countries.d.ts

@@ -0,0 +1,29 @@
+//#region src/phone-input/phone-countries.d.ts
+export interface PhoneCountry {
+  /** ISO 3166-1 alpha-2 code, such as "US". */
+  iso: string;
+  name: string;
+  /** Calling code without the plus, such as "44". */
+  dial: string;
+  /** National formats from shortest to longest. `#` is a digit, anything else is a separator. */
+  patterns: string[];
+  /** A digit people may type before the number itself, such as "0" in "07911 123456". Empty when there is none. */
+  trunk: string;
+  /** A realistic national number: the placeholder, and the typing guide. */
+  example: string;
+  /** Area codes that pick this country when several share a calling code, such as Canada inside +1. */
+  areaCodes?: string[];
+}
+export declare const PHONE_COUNTRIES: PhoneCountry[];
+/** Formats national digits as typed, keeping a typed trunk prefix: "07911123456" in the UK reads "07911 123456". */
+export declare function formatNational(entry: PhoneCountry, digits: string): string;
+export type PhoneStatus = "empty" | "incomplete" | "valid" | "too-long";
+/** Reads "+44 (0)7911 123456", "0044 7911 123456" or "+14165550123" into a country and national digits. The longest calling code wins. */
+export declare function parsePhoneNumber(input: string, pool?: PhoneCountry[]): {
+  country: PhoneCountry;
+  national: string;
+} | null;
+/** Formats an E.164 number for display, such as "+44 7400 123456". Returns the input when it cannot be read. */
+export declare function formatPhoneNumber(e164: string): string;
+//#endregion
+//# sourceMappingURL=phone-countries.d.ts.map

package/dist/phone-input/phone-countries.js

@@ -0,0 +1,170 @@
+//#region src/phone-input/phone-countries.ts
+const country = (iso, name, dial, patterns, example, trunk = "0", areaCodes) => ({
+	iso,
+	name,
+	dial,
+	patterns: Array.isArray(patterns) ? patterns : [patterns],
+	example,
+	trunk,
+	areaCodes
+});
+const CA_AREA_CODES = "204 226 236 249 250 263 289 306 343 354 365 367 368 382 387 403 416 418 428 431 437 438 450 468 474 506 514 519 548 579 581 584 587 604 613 639 647 672 683 705 709 742 753 778 780 782 807 819 825 867 873 879 902 905".split(" ");
+const PHONE_COUNTRIES = [
+	country("US", "United States", "1", "(###) ###-####", "2015550123", "1"),
+	country("CA", "Canada", "1", "(###) ###-####", "5065550123", "1", CA_AREA_CODES),
+	country("MX", "Mexico", "52", "## #### ####", "2221234567", ""),
+	country("BR", "Brazil", "55", ["(##) ####-####", "(##) #####-####"], "11961234567"),
+	country("AR", "Argentina", "54", "## ####-####", "1123456789"),
+	country("CO", "Colombia", "57", "### ### ####", "3211234567", ""),
+	country("CL", "Chile", "56", "# #### ####", "221234567", ""),
+	country("PE", "Peru", "51", "### ### ###", "912345678"),
+	country("GB", "United Kingdom", "44", "#### ######", "7400123456"),
+	country("IE", "Ireland", "353", "## ### ####", "850123456"),
+	country("FR", "France", "33", "# ## ## ## ##", "612345678"),
+	country("DE", "Germany", "49", ["### #######", "### ########"], "15123456789"),
+	country("ES", "Spain", "34", "### ## ## ##", "612345678", ""),
+	country("IT", "Italy", "39", ["### ### ###", "### ### ####"], "3123456789", ""),
+	country("PT", "Portugal", "351", "### ### ###", "912345678", ""),
+	country("NL", "Netherlands", "31", "# ########", "612345678"),
+	country("BE", "Belgium", "32", "### ## ## ##", "470123456"),
+	country("CH", "Switzerland", "41", "## ### ## ##", "781234567"),
+	country("AT", "Austria", "43", ["### #######", "### ########"], "6641234567"),
+	country("SE", "Sweden", "46", "## ### ## ##", "701234567"),
+	country("NO", "Norway", "47", "### ## ###", "40612345", ""),
+	country("DK", "Denmark", "45", "## ## ## ##", "32123456", ""),
+	country("FI", "Finland", "358", ["## ### ####", "## ### #####"], "412345678"),
+	country("PL", "Poland", "48", "### ### ###", "512345678", ""),
+	country("CZ", "Czechia", "420", "### ### ###", "601123456", ""),
+	country("GR", "Greece", "30", "### ### ####", "6912345678", ""),
+	country("UA", "Ukraine", "380", "## ### ## ##", "501234567"),
+	country("TR", "Turkey", "90", "### ### ## ##", "5012345678"),
+	country("IL", "Israel", "972", "##-###-####", "502345678"),
+	country("AE", "United Arab Emirates", "971", "## ### ####", "501234567"),
+	country("SA", "Saudi Arabia", "966", "## ### ####", "512345678"),
+	country("EG", "Egypt", "20", "### ### ####", "1001234567"),
+	country("NG", "Nigeria", "234", "### ### ####", "8021234567"),
+	country("KE", "Kenya", "254", "### ######", "712123456"),
+	country("ZA", "South Africa", "27", "## ### ####", "711234567"),
+	country("IN", "India", "91", "#####-#####", "8123456789"),
+	country("PK", "Pakistan", "92", "### #######", "3012345678"),
+	country("CN", "China", "86", "### #### ####", "13123456789"),
+	country("JP", "Japan", "81", "##-####-####", "9012345678"),
+	country("KR", "South Korea", "82", ["##-###-####", "##-####-####"], "1020000000"),
+	country("TW", "Taiwan", "886", "### ### ###", "912345678"),
+	country("HK", "Hong Kong", "852", "#### ####", "51234567", ""),
+	country("SG", "Singapore", "65", "#### ####", "81234567", ""),
+	country("PH", "Philippines", "63", "### ### ####", "9051234567"),
+	country("ID", "Indonesia", "62", [
+		"###-###-####",
+		"###-####-####",
+		"###-####-#####"
+	], "81234567890"),
+	country("TH", "Thailand", "66", "## ### ####", "812345678"),
+	country("VN", "Vietnam", "84", "## ### ## ##", "912345678"),
+	country("AU", "Australia", "61", "### ### ###", "412345678"),
+	country("NZ", "New Zealand", "64", [
+		"# ### ####",
+		"## ### ####",
+		"## #### ####"
+	], "211234567")
+];
+const phoneCountryByIso = (iso) => PHONE_COUNTRIES.find((entry) => entry.iso === iso);
+const capacity = (pattern) => pattern.split("#").length - 1;
+const lengthsOf = (entry) => entry.patterns.map(capacity);
+const onlyDigits = (text) => text.replace(/\D/g, "");
+/** Regional indicator letters. Platforms without flag glyphs show the two letters, which still read. */
+const flagOf = (iso) => String.fromCodePoint(...[...iso.toUpperCase()].map((char) => 127462 + char.charCodeAt(0) - 65));
+function splitTrunk(entry, digits) {
+	return entry.trunk && digits.startsWith(entry.trunk) ? [entry.trunk, digits.slice(entry.trunk.length)] : ["", digits];
+}
+/** A typed trunk prefix earns its own room; without one the longest valid length is the cap. */
+const capDigits = (entry, digits) => digits.slice(0, splitTrunk(entry, digits)[0].length + Math.max(...lengthsOf(entry)));
+/** Separators only print while digits follow, so a half-typed number never ends in a dangling ") " or "-". */
+function applyPattern(digits, pattern) {
+	let out = "";
+	let index = 0;
+	for (const char of pattern) {
+		if (index >= digits.length) break;
+		out += char === "#" ? digits[index++] : char;
+	}
+	return out + digits.slice(index);
+}
+function patternFor(entry, length) {
+	return entry.patterns.find((pattern) => capacity(pattern) >= length) ?? entry.patterns[entry.patterns.length - 1];
+}
+/** Formats national digits as typed, keeping a typed trunk prefix: "07911123456" in the UK reads "07911 123456". */
+function formatNational(entry, digits) {
+	const [trunk, rest] = splitTrunk(entry, digits);
+	const pattern = patternFor(entry, rest.length);
+	const body = applyPattern(rest, pattern);
+	if (!trunk) return body;
+	if (!rest) return trunk;
+	return trunk + (pattern.startsWith("#") ? "" : " ") + body;
+}
+function phoneStatus(entry, digits) {
+	const length = splitTrunk(entry, digits)[1].length;
+	const lengths = lengthsOf(entry);
+	if (!length) return "empty";
+	if (lengths.includes(length)) return "valid";
+	return length > Math.max(...lengths) ? "too-long" : "incomplete";
+}
+/** The number in E.164, such as "+14155550132". Empty when there are no digits. */
+function toE164(entry, digits) {
+	const rest = splitTrunk(entry, digits)[1];
+	return rest ? `+${entry.dial}${rest}` : "";
+}
+/** Reads "+44 (0)7911 123456", "0044 7911 123456" or "+14165550123" into a country and national digits. The longest calling code wins. */
+function parsePhoneNumber(input, pool = PHONE_COUNTRIES) {
+	const trimmed = input.trim();
+	let digits = onlyDigits(trimmed);
+	if (!trimmed.startsWith("+")) {
+		if (!trimmed.startsWith("00")) return null;
+		digits = digits.slice(2);
+	}
+	for (const size of [
+		3,
+		2,
+		1
+	]) {
+		const dial = digits.slice(0, size);
+		const matches = pool.filter((entry) => entry.dial === dial);
+		if (!matches.length) continue;
+		let rest = digits.slice(size);
+		const entry = matches.find((item) => item.areaCodes?.some((code) => rest.startsWith(code))) ?? matches.find((item) => !item.areaCodes) ?? matches[0];
+		if (entry.trunk && rest.startsWith(entry.trunk) && rest.length - entry.trunk.length >= Math.min(...lengthsOf(entry))) rest = rest.slice(entry.trunk.length);
+		return {
+			country: entry,
+			national: capDigits(entry, rest)
+		};
+	}
+	return null;
+}
+/** Formats an E.164 number for display, such as "+44 7400 123456". Returns the input when it cannot be read. */
+function formatPhoneNumber(e164) {
+	const parsed = parsePhoneNumber(e164);
+	return parsed ? `+${parsed.country.dial} ${formatNational(parsed.country, parsed.national)}` : e164;
+}
+/** Position in the formatted text just after the nth digit. */
+function caretAfterDigits(text, count) {
+	if (count <= 0) {
+		const first = text.search(/\d/);
+		return first < 0 ? text.length : Math.min(first, text.length);
+	}
+	let seen = 0;
+	for (let index = 0; index < text.length; index++) if (/\d/.test(text[index]) && ++seen === count) return index + 1;
+	return text.length;
+}
+/** True when a country matches the search text: a name, an ISO code, or the start of a calling code ("+44", "44"). */
+function matchesCountry(entry, query) {
+	const needle = query.trim().toLowerCase();
+	if (!needle || needle === "+") return true;
+	if (/^[+\d\s()-]+$/.test(needle)) {
+		const digits = onlyDigits(needle);
+		return entry.dial.startsWith(digits) || digits.startsWith(entry.dial);
+	}
+	return entry.name.toLowerCase().includes(needle) || entry.iso.toLowerCase() === needle;
+}
+//#endregion
+export { PHONE_COUNTRIES, capDigits, caretAfterDigits, flagOf, formatNational, formatPhoneNumber, lengthsOf, matchesCountry, onlyDigits, parsePhoneNumber, phoneCountryByIso, phoneStatus, splitTrunk, toE164 };
+
+//# sourceMappingURL=phone-countries.js.map

package/dist/phone-input/phone-countries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-countries.js","names":[],"sources":["../../src/phone-input/phone-countries.ts"],"sourcesContent":["/*\n * A compact country table and the number maths built on it: no phone-number library and no metadata download.\n * Each entry is a name, a calling code, an ISO code and the national grouping as a pattern, where `#` is a digit and\n * anything else is a separator. Valid lengths are the digit capacities of the patterns. This is formatting help, not\n * carrier-grade validation: it knows how many digits a country usually has, not which prefixes are assigned.\n */\n\nexport interface PhoneCountry {\n  /** ISO 3166-1 alpha-2 code, such as \"US\". */\n  iso: string;\n  name: string;\n  /** Calling code without the plus, such as \"44\". */\n  dial: string;\n  /** National formats from shortest to longest. `#` is a digit, anything else is a separator. */\n  patterns: string[];\n  /** A digit people may type before the number itself, such as \"0\" in \"07911 123456\". Empty when there is none. */\n  trunk: string;\n  /** A realistic national number: the placeholder, and the typing guide. */\n  example: string;\n  /** Area codes that pick this country when several share a calling code, such as Canada inside +1. */\n  areaCodes?: string[];\n}\n\nconst country = (\n  iso: string,\n  name: string,\n  dial: string,\n  patterns: string | string[],\n  example: string,\n  trunk = \"0\",\n  areaCodes?: string[],\n): PhoneCountry => ({\n  iso,\n  name,\n  dial,\n  patterns: Array.isArray(patterns) ? patterns : [patterns],\n  example,\n  trunk,\n  areaCodes,\n});\n\nconst CA_AREA_CODES =\n  \"204 226 236 249 250 263 289 306 343 354 365 367 368 382 387 403 416 418 428 431 437 438 450 468 474 506 514 519 548 579 581 584 587 604 613 639 647 672 683 705 709 742 753 778 780 782 807 819 825 867 873 879 902 905\".split(\n    \" \",\n  );\n\nexport const PHONE_COUNTRIES: PhoneCountry[] = [\n  country(\"US\", \"United States\", \"1\", \"(###) ###-####\", \"2015550123\", \"1\"),\n  country(\"CA\", \"Canada\", \"1\", \"(###) ###-####\", \"5065550123\", \"1\", CA_AREA_CODES),\n  country(\"MX\", \"Mexico\", \"52\", \"## #### ####\", \"2221234567\", \"\"),\n  country(\"BR\", \"Brazil\", \"55\", [\"(##) ####-####\", \"(##) #####-####\"], \"11961234567\"),\n  country(\"AR\", \"Argentina\", \"54\", \"## ####-####\", \"1123456789\"),\n  country(\"CO\", \"Colombia\", \"57\", \"### ### ####\", \"3211234567\", \"\"),\n  country(\"CL\", \"Chile\", \"56\", \"# #### ####\", \"221234567\", \"\"),\n  country(\"PE\", \"Peru\", \"51\", \"### ### ###\", \"912345678\"),\n  country(\"GB\", \"United Kingdom\", \"44\", \"#### ######\", \"7400123456\"),\n  country(\"IE\", \"Ireland\", \"353\", \"## ### ####\", \"850123456\"),\n  country(\"FR\", \"France\", \"33\", \"# ## ## ## ##\", \"612345678\"),\n  country(\"DE\", \"Germany\", \"49\", [\"### #######\", \"### ########\"], \"15123456789\"),\n  country(\"ES\", \"Spain\", \"34\", \"### ## ## ##\", \"612345678\", \"\"),\n  country(\"IT\", \"Italy\", \"39\", [\"### ### ###\", \"### ### ####\"], \"3123456789\", \"\"),\n  country(\"PT\", \"Portugal\", \"351\", \"### ### ###\", \"912345678\", \"\"),\n  country(\"NL\", \"Netherlands\", \"31\", \"# ########\", \"612345678\"),\n  country(\"BE\", \"Belgium\", \"32\", \"### ## ## ##\", \"470123456\"),\n  country(\"CH\", \"Switzerland\", \"41\", \"## ### ## ##\", \"781234567\"),\n  country(\"AT\", \"Austria\", \"43\", [\"### #######\", \"### ########\"], \"6641234567\"),\n  country(\"SE\", \"Sweden\", \"46\", \"## ### ## ##\", \"701234567\"),\n  country(\"NO\", \"Norway\", \"47\", \"### ## ###\", \"40612345\", \"\"),\n  country(\"DK\", \"Denmark\", \"45\", \"## ## ## ##\", \"32123456\", \"\"),\n  country(\"FI\", \"Finland\", \"358\", [\"## ### ####\", \"## ### #####\"], \"412345678\"),\n  country(\"PL\", \"Poland\", \"48\", \"### ### ###\", \"512345678\", \"\"),\n  country(\"CZ\", \"Czechia\", \"420\", \"### ### ###\", \"601123456\", \"\"),\n  country(\"GR\", \"Greece\", \"30\", \"### ### ####\", \"6912345678\", \"\"),\n  country(\"UA\", \"Ukraine\", \"380\", \"## ### ## ##\", \"501234567\"),\n  country(\"TR\", \"Turkey\", \"90\", \"### ### ## ##\", \"5012345678\"),\n  country(\"IL\", \"Israel\", \"972\", \"##-###-####\", \"502345678\"),\n  country(\"AE\", \"United Arab Emirates\", \"971\", \"## ### ####\", \"501234567\"),\n  country(\"SA\", \"Saudi Arabia\", \"966\", \"## ### ####\", \"512345678\"),\n  country(\"EG\", \"Egypt\", \"20\", \"### ### ####\", \"1001234567\"),\n  country(\"NG\", \"Nigeria\", \"234\", \"### ### ####\", \"8021234567\"),\n  country(\"KE\", \"Kenya\", \"254\", \"### ######\", \"712123456\"),\n  country(\"ZA\", \"South Africa\", \"27\", \"## ### ####\", \"711234567\"),\n  country(\"IN\", \"India\", \"91\", \"#####-#####\", \"8123456789\"),\n  country(\"PK\", \"Pakistan\", \"92\", \"### #######\", \"3012345678\"),\n  country(\"CN\", \"China\", \"86\", \"### #### ####\", \"13123456789\"),\n  country(\"JP\", \"Japan\", \"81\", \"##-####-####\", \"9012345678\"),\n  country(\"KR\", \"South Korea\", \"82\", [\"##-###-####\", \"##-####-####\"], \"1020000000\"),\n  country(\"TW\", \"Taiwan\", \"886\", \"### ### ###\", \"912345678\"),\n  country(\"HK\", \"Hong Kong\", \"852\", \"#### ####\", \"51234567\", \"\"),\n  country(\"SG\", \"Singapore\", \"65\", \"#### ####\", \"81234567\", \"\"),\n  country(\"PH\", \"Philippines\", \"63\", \"### ### ####\", \"9051234567\"),\n  country(\"ID\", \"Indonesia\", \"62\", [\"###-###-####\", \"###-####-####\", \"###-####-#####\"], \"81234567890\"),\n  country(\"TH\", \"Thailand\", \"66\", \"## ### ####\", \"812345678\"),\n  country(\"VN\", \"Vietnam\", \"84\", \"## ### ## ##\", \"912345678\"),\n  country(\"AU\", \"Australia\", \"61\", \"### ### ###\", \"412345678\"),\n  country(\"NZ\", \"New Zealand\", \"64\", [\"# ### ####\", \"## ### ####\", \"## #### ####\"], \"211234567\"),\n];\n\nexport const phoneCountryByIso = (iso: string) =>\n  PHONE_COUNTRIES.find((entry) => entry.iso === iso);\n\nconst capacity = (pattern: string) => pattern.split(\"#\").length - 1;\nexport const lengthsOf = (entry: PhoneCountry) => entry.patterns.map(capacity);\nexport const onlyDigits = (text: string) => text.replace(/\\D/g, \"\");\n\n/** Regional indicator letters. Platforms without flag glyphs show the two letters, which still read. */\nexport const flagOf = (iso: string) =>\n  String.fromCodePoint(...[...iso.toUpperCase()].map((char) => 0x1f1e6 + char.charCodeAt(0) - 65));\n\nexport function splitTrunk(entry: PhoneCountry, digits: string): [string, string] {\n  return entry.trunk && digits.startsWith(entry.trunk)\n    ? [entry.trunk, digits.slice(entry.trunk.length)]\n    : [\"\", digits];\n}\n\n/** A typed trunk prefix earns its own room; without one the longest valid length is the cap. */\nexport const capDigits = (entry: PhoneCountry, digits: string) =>\n  digits.slice(0, splitTrunk(entry, digits)[0].length + Math.max(...lengthsOf(entry)));\n\n/** Separators only print while digits follow, so a half-typed number never ends in a dangling \") \" or \"-\". */\nfunction applyPattern(digits: string, pattern: string) {\n  let out = \"\";\n  let index = 0;\n  for (const char of pattern) {\n    if (index >= digits.length) break;\n    out += char === \"#\" ? digits[index++] : char;\n  }\n  return out + digits.slice(index);\n}\n\nfunction patternFor(entry: PhoneCountry, length: number) {\n  return (\n    entry.patterns.find((pattern) => capacity(pattern) >= length) ??\n    entry.patterns[entry.patterns.length - 1]!\n  );\n}\n\n/** Formats national digits as typed, keeping a typed trunk prefix: \"07911123456\" in the UK reads \"07911 123456\". */\nexport function formatNational(entry: PhoneCountry, digits: string) {\n  const [trunk, rest] = splitTrunk(entry, digits);\n  const pattern = patternFor(entry, rest.length);\n  const body = applyPattern(rest, pattern);\n  if (!trunk) return body;\n  if (!rest) return trunk;\n  return trunk + (pattern.startsWith(\"#\") ? \"\" : \" \") + body;\n}\n\nexport type PhoneStatus = \"empty\" | \"incomplete\" | \"valid\" | \"too-long\";\n\nexport function phoneStatus(entry: PhoneCountry, digits: string): PhoneStatus {\n  const length = splitTrunk(entry, digits)[1].length;\n  const lengths = lengthsOf(entry);\n  if (!length) return \"empty\";\n  if (lengths.includes(length)) return \"valid\";\n  return length > Math.max(...lengths) ? \"too-long\" : \"incomplete\";\n}\n\n/** The number in E.164, such as \"+14155550132\". Empty when there are no digits. */\nexport function toE164(entry: PhoneCountry, digits: string) {\n  const rest = splitTrunk(entry, digits)[1];\n  return rest ? `+${entry.dial}${rest}` : \"\";\n}\n\n/** Reads \"+44 (0)7911 123456\", \"0044 7911 123456\" or \"+14165550123\" into a country and national digits. The longest calling code wins. */\nexport function parsePhoneNumber(\n  input: string,\n  pool: PhoneCountry[] = PHONE_COUNTRIES,\n): { country: PhoneCountry; national: string } | null {\n  const trimmed = input.trim();\n  let digits = onlyDigits(trimmed);\n  if (!trimmed.startsWith(\"+\")) {\n    if (!trimmed.startsWith(\"00\")) return null;\n    digits = digits.slice(2);\n  }\n  for (const size of [3, 2, 1]) {\n    const dial = digits.slice(0, size);\n    const matches = pool.filter((entry) => entry.dial === dial);\n    if (!matches.length) continue;\n    let rest = digits.slice(size);\n    const entry =\n      matches.find((item) => item.areaCodes?.some((code) => rest.startsWith(code))) ??\n      matches.find((item) => !item.areaCodes) ??\n      matches[0]!;\n    // \"+44 (0)7911...\" carries a trunk digit it should not: drop it when the rest is still a full number without it.\n    if (\n      entry.trunk &&\n      rest.startsWith(entry.trunk) &&\n      rest.length - entry.trunk.length >= Math.min(...lengthsOf(entry))\n    ) {\n      rest = rest.slice(entry.trunk.length);\n    }\n    return { country: entry, national: capDigits(entry, rest) };\n  }\n  return null;\n}\n\n/** Formats an E.164 number for display, such as \"+44 7400 123456\". Returns the input when it cannot be read. */\nexport function formatPhoneNumber(e164: string) {\n  const parsed = parsePhoneNumber(e164);\n  return parsed\n    ? `+${parsed.country.dial} ${formatNational(parsed.country, parsed.national)}`\n    : e164;\n}\n\n/** Position in the formatted text just after the nth digit. */\nexport function caretAfterDigits(text: string, count: number) {\n  if (count <= 0) {\n    const first = text.search(/\\d/);\n    return first < 0 ? text.length : Math.min(first, text.length);\n  }\n  let seen = 0;\n  for (let index = 0; index < text.length; index++) {\n    if (/\\d/.test(text[index]!) && ++seen === count) return index + 1;\n  }\n  return text.length;\n}\n\n/** True when a country matches the search text: a name, an ISO code, or the start of a calling code (\"+44\", \"44\"). */\nexport function matchesCountry(entry: PhoneCountry, query: string) {\n  const needle = query.trim().toLowerCase();\n  if (!needle || needle === \"+\") return true;\n  if (/^[+\\d\\s()-]+$/.test(needle)) {\n    const digits = onlyDigits(needle);\n    return entry.dial.startsWith(digits) || digits.startsWith(entry.dial);\n  }\n  return entry.name.toLowerCase().includes(needle) || entry.iso.toLowerCase() === needle;\n}\n"],"mappings":"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"}

package/dist/phone-input/phone-input.d.ts

@@ -0,0 +1,66 @@
+import { PhoneCountry, PhoneStatus } from "./phone-countries.js";
+import { FocusEvent } from "react";
+//#region src/phone-input/phone-input.d.ts
+/** What `onValueChange` hands over beside the E.164 number. */
+export interface PhoneInputDetails {
+  country: PhoneCountry;
+  /** The number as shown in the field, without the calling code. */
+  formatted: string;
+  status: PhoneStatus;
+  valid: boolean;
+}
+/**
+ * PhoneInput: a phone number with a country picker. The number formats as it is
+ * typed (grouping follows the country, the caret stays on the digit it was on, a
+ * faint guide shows the rest of the expected shape), a pasted or autofilled
+ * international number such as "+44 7400 123456" picks its own country, and the
+ * value comes out in E.164. The picker is a searchable list (React Aria
+ * Autocomplete) that matches names, ISO codes and calling codes; typing "+" in
+ * the number opens it with a calling code search.
+ *
+ * Formatting and length checks come from a compact country table in this
+ * package, not a phone-number library: it knows the usual digit count and
+ * grouping of about fifty countries, not which prefixes a carrier has assigned.
+ * Use a full library on the server when a number must be a real, assigned line.
+ */
+export interface PhoneInputProps {
+  /** What the number is for, and the field's accessible name. */
+  label: string;
+  /** Keep the label for assistive technology only. */
+  labelHidden?: boolean;
+  /** The number in E.164, such as "+14155550132". An empty string clears the field. */
+  value?: string;
+  defaultValue?: string;
+  /** Fires on every edit with the E.164 number (empty when there are no digits) and its parsed details. */
+  onValueChange?: (value: string, details: PhoneInputDetails) => void;
+  /** ISO code of the selected country. Controlled when given. */
+  country?: string;
+  /** ISO code used until someone picks a country or enters an international number. @default "US" */
+  defaultCountry?: string;
+  onCountryChange?: (iso: string) => void;
+  /** Limit the picker to these ISO codes. */
+  countries?: string[];
+  /** Helper text under the field. A string, because the copy is animated word by word. */
+  description?: string;
+  /** Replaces the built-in length message. */
+  error?: string;
+  /** Show a message after blur when the number is incomplete. @default true */
+  validate?: boolean;
+  /**
+   * How a country is marked in the field and the list. `auto` draws the flag emoji where the platform can (Windows
+   * cannot) and the two-letter ISO code where it cannot; `emoji` and `code` force one.
+   * @default "auto"
+   */
+  flags?: "auto" | "emoji" | "code";
+  disabled?: boolean;
+  required?: boolean;
+  /** Adds a hidden input carrying the E.164 value for native form submission. */
+  name?: string;
+  id?: string;
+  /** Extra classes for the wrapper. Merged last. */
+  className?: string;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+}
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=phone-input.d.ts.map