@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/PersonDisplay/PersonDisplay.d.ts

@@ -0,0 +1,99 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type AgentAvatarProps, type AvatarProps } from '../Avatar/index.js';
+/**
+ * Visual size of the PersonDisplay composition. Drives Avatar diameter
+ * and Name / Description text sizes via context.
+ */
+export type PersonDisplaySize = 'inline' | 'sm' | 'md' | 'lg';
+export interface PersonDisplayProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual size of the entire composition. `md` is the default — suits
+     * sidebars, members lists, and most card / table contexts. `sm` is
+     * the compact density for tight table cells; `lg` is the detail-page
+     * hero size. Propagates to the Avatar size and the Name / Description
+     * text sizes via context.
+     *
+     * `inline` fits a person into a text row: the Avatar is one line tall
+     * (`1lh`) and the Name inherits the surrounding text's size and weight
+     * (and colour, unless it has an `href` — then it's a subtle Link), so a
+     * person in a `DefinitionList` value or a table cell is exactly as tall as
+     * its plain-text neighbours. Follows the text size; no size decision per
+     * call site. Skip Descriptions — a second line defeats it. The root is a
+     * `<div>`, so not inside a `<p>`; in a line that also holds something
+     * taller than one line it top-aligns rather than sharing the baseline.
+     */
+    size?: PersonDisplaySize;
+    /**
+     * Force the composition to shrink-wrap to its content (avatar + name) instead of
+     * stretching to fill a parent. Default `false`. The root is `inline-flex` and
+     * shrink-wraps on its own — but as a child of a *stretching* flex/grid container
+     * (a detail/sidebar card column with `align-items: stretch` / `justify-self:
+     * stretch`) CSS blockifies it and the parent stretches it to the full column
+     * width. The avatar+name then sit in the left portion and the trailing empty
+     * space joins the box, so a `Popover.Trigger` / `Tooltip` cloned onto the
+     * PersonDisplay anchors to that wide box and centers far to the right of the
+     * person. Set `shrink` on such an overlay trigger to keep it content-width
+     * (`width: fit-content`) regardless of the parent, so the overlay anchors to the
+     * visible avatar+name.
+     */
+    shrink?: boolean;
+    /**
+     * `<PersonDisplay.Avatar>` (or `<PersonDisplay.AgentAvatar>`) +
+     * `<PersonDisplay.Name>` (+ optional `<PersonDisplay.OnBehalfOf>` and
+     * repeating `<PersonDisplay.Description>`) subcomponents in any order — Root
+     * sorts the avatar into its own slot. With an `OnBehalfOf`, Name and
+     * OnBehalfOf share one truncating row above the Descriptions.
+     */
+    children: ReactNode;
+}
+export interface PersonDisplayAvatarProps extends Omit<AvatarProps, 'size'> {
+}
+/** `AgentAvatar` props minus `size` (from context) and `decorative` (always on). */
+export interface PersonDisplayAgentAvatarProps extends Omit<AgentAvatarProps, 'size' | 'decorative' | 'name'> {
+    /**
+     * Agent label. Not announced here: the avatar is decorative, and the
+     * visible `PersonDisplay.Name` (pass the same label) names the agent.
+     */
+    name: string;
+}
+export interface PersonDisplayOnBehalfOfProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The member the agent acts for, rendered after a muted "for" prefix. A
+     * plain name, or a `<Link>` to the member. Omit (or pass an empty string)
+     * when the member was erased: renders "for a former member". Plain-text
+     * children (a string, a number, or text-only nodes like `{first} {last}`)
+     * give the member box a hover `title` of the full "for {member}" text (the
+     * erased copy when erased), which shadows a consumer `title` on
+     * OnBehalfOf; a `<Link>` or other element child gets none. The root span is
+     * `display: contents` (its prefix and member join the Name's row), so box
+     * styles passed via `className`/`style` on it don't paint.
+     */
+    children?: ReactNode;
+}
+export interface PersonDisplayNameProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * When set, the name renders as a `<Link>` to this URL. Use for
+     * navigable people (contacts, members) where the row links to a
+     * detail page. Omit for read-only displays (audit actor, activity
+     * timeline) where the name is plain text.
+     */
+    href?: string;
+    /** The person's display name — usually a plain string. */
+    children: ReactNode;
+}
+export interface PersonDisplayDescriptionProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * One line of descriptive metadata — email, role, company, etc.
+     * Repeat the subcomponent for additional lines; each renders on its
+     * own row beneath the name. Accepts arbitrary `ReactNode` children
+     * so consumers can inline a `<Badge>` or other small decoration.
+     */
+    children: ReactNode;
+}
+export declare const PersonDisplay: import("react").ForwardRefExoticComponent<PersonDisplayProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Avatar: import("react").ForwardRefExoticComponent<PersonDisplayAvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+    AgentAvatar: import("react").ForwardRefExoticComponent<PersonDisplayAgentAvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Name: import("react").ForwardRefExoticComponent<PersonDisplayNameProps & import("react").RefAttributes<HTMLElement>>;
+    OnBehalfOf: import("react").ForwardRefExoticComponent<PersonDisplayOnBehalfOfProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Description: import("react").ForwardRefExoticComponent<PersonDisplayDescriptionProps & import("react").RefAttributes<HTMLSpanElement>>;
+};

package/dist/components/PersonDisplay/PersonDisplay.js

@@ -0,0 +1,214 @@
+'use client';
+import { AgentAvatar } from "../Avatar/AgentAvatar.js";
+import { Avatar } from "../Avatar/Avatar.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { Text } from "../Text/Text.js";
+import { Link } from "../Link/Link.js";
+import PersonDisplay_module_default from "./PersonDisplay.module.js";
+import { Children, createContext, forwardRef, isValidElement, useContext } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/PersonDisplay/PersonDisplay.tsx
+var PersonDisplayContext = createContext(null);
+function useSize() {
+	return useContext(PersonDisplayContext)?.size ?? "md";
+}
+function useAgentRow() {
+	return useContext(PersonDisplayContext)?.agentRow ?? false;
+}
+/**
+* Children as one plain string when they are text only: a string, a number,
+* or an array of them such as JSX `{first} {last}` (nullish and boolean
+* entries ignored). Otherwise undefined.
+*/
+function plainText(children) {
+	const isText = (c) => typeof c === "string" || typeof c === "number";
+	if (isText(children)) return String(children);
+	if (Array.isArray(children)) {
+		const parts = children.filter((c) => c != null && typeof c !== "boolean");
+		if (parts.every(isText)) return parts.join("");
+	}
+}
+var AVATAR_SIZE = {
+	inline: "inline",
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+var NAME_TEXT_SIZE = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+var DESCRIPTION_TEXT_SIZE = {
+	inline: "inherit",
+	sm: "xs",
+	md: "sm",
+	lg: "md"
+};
+/**
+* Avatar slot: a thin `<Avatar>` wrapper that takes its size from the PersonDisplay root (`PersonDisplay.Avatar`).
+* @see docs/components/PersonDisplay.md
+*/
+var PersonDisplayAvatar = forwardRef(function PersonDisplayAvatar(props, ref) {
+	const size = useSize();
+	return /* @__PURE__ */ jsx(Avatar, {
+		...props,
+		ref,
+		size: AVATAR_SIZE[size]
+	});
+});
+/**
+* Agent slot: a decorative `<AgentAvatar>` sized from the PersonDisplay root (`PersonDisplay.AgentAvatar`).
+* @see docs/components/PersonDisplay.md
+*/
+var PersonDisplayAgentAvatar = forwardRef(function PersonDisplayAgentAvatar(props, ref) {
+	const size = useSize();
+	return /* @__PURE__ */ jsx(AgentAvatar, {
+		...props,
+		ref,
+		size: AVATAR_SIZE[size],
+		decorative: true
+	});
+});
+/**
+* Name slot: plain text, or a real `<a>` link when `href` is set (`PersonDisplay.Name`).
+* @see docs/components/PersonDisplay.md
+*/
+var PersonDisplayName = forwardRef(function PersonDisplayName({ href, className, children, ...rest }, ref) {
+	const size = useSize();
+	const plain = useAgentRow() ? plainText(children) : void 0;
+	const title = plain?.trim() ? plain : void 0;
+	const content = size === "inline" ? children : /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: NAME_TEXT_SIZE[size],
+		weight: "medium",
+		children
+	});
+	if (href) return /* @__PURE__ */ jsx(Link, {
+		ref,
+		href,
+		variant: "subtle",
+		className: clsx(PersonDisplay_module_default.name, className),
+		title,
+		...rest,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: clsx(PersonDisplay_module_default.name, className),
+		title,
+		...rest,
+		children: content
+	});
+});
+/**
+* Muted "for {member}" after the Name, for an agent acting for a member (`PersonDisplay.OnBehalfOf`).
+* @see docs/components/PersonDisplay.md
+*/
+var PersonDisplayOnBehalfOf = forwardRef(function PersonDisplayOnBehalfOf({ className, children, ...rest }, ref) {
+	const size = useSize();
+	const t = useTranslation();
+	const prefix = t("personDisplay.onBehalfOfPrefix");
+	const plain = plainText(children);
+	const former = children == null || typeof children === "boolean" || plain?.trim() === "";
+	const text = former ? t("personDisplay.onBehalfOfFormer") : plain !== void 0 ? `${prefix} ${plain}` : void 0;
+	const textProps = {
+		size: size === "inline" ? "inherit" : NAME_TEXT_SIZE[size],
+		tone: "muted",
+		weight: "regular"
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: clsx(PersonDisplay_module_default.onBehalfOf, className),
+		...rest,
+		children: [
+			" ",
+			!former && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				className: PersonDisplay_module_default.onBehalfOfPrefix,
+				...textProps,
+				children: prefix
+			}), " "] }),
+			/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				className: PersonDisplay_module_default.onBehalfOfMember,
+				title: text,
+				...textProps,
+				children: former ? text : plain ?? children
+			})
+		]
+	});
+});
+/**
+* One line of muted descriptive metadata; repeat for more lines, not for interactive content (`PersonDisplay.Description`).
+* @see docs/components/PersonDisplay.md
+*/
+var PersonDisplayDescription = forwardRef(function PersonDisplayDescription({ className, children, ...rest }, ref) {
+	const textSize = DESCRIPTION_TEXT_SIZE[useSize()];
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: clsx(PersonDisplay_module_default.description, className),
+		...rest,
+		children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: textSize,
+			tone: "muted",
+			children
+		})
+	});
+});
+/**
+* Avatar + Name (+ optional Description lines): the standard horizontal "person row".
+* @see docs/components/PersonDisplay.md
+*/
+var PersonDisplayRoot = forwardRef(function PersonDisplayRoot({ size = "md", shrink = false, className, children, ...rest }, ref) {
+	const avatarChildren = [];
+	let columnChildren = [];
+	const rowChildren = [];
+	const otherChildren = [];
+	let agentRow = false;
+	Children.forEach(children, (child) => {
+		const type = isValidElement(child) ? child.type : null;
+		if (type === PersonDisplayAvatar || type === PersonDisplayAgentAvatar) {
+			avatarChildren.push(child);
+			return;
+		}
+		columnChildren.push(child);
+		if (type === PersonDisplayName || type === PersonDisplayOnBehalfOf) rowChildren.push(child);
+		else otherChildren.push(child);
+		if (type === PersonDisplayOnBehalfOf) agentRow = true;
+	});
+	if (agentRow) {
+		const isOnBehalfOf = (c) => isValidElement(c) && c.type === PersonDisplayOnBehalfOf;
+		rowChildren.sort((a, b) => Number(isOnBehalfOf(a)) - Number(isOnBehalfOf(b)));
+		columnChildren = [/* @__PURE__ */ jsx("div", {
+			className: PersonDisplay_module_default.agentRow,
+			children: rowChildren
+		}, "agent-row"), ...otherChildren];
+	}
+	return /* @__PURE__ */ jsx(PersonDisplayContext.Provider, {
+		value: {
+			size,
+			agentRow
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: clsx(PersonDisplay_module_default.root, shrink && PersonDisplay_module_default.shrink, className),
+			...rest,
+			"data-size": size,
+			children: [avatarChildren, columnChildren.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: PersonDisplay_module_default.column,
+				children: columnChildren
+			})]
+		})
+	});
+});
+var PersonDisplay = Object.assign(PersonDisplayRoot, {
+	Avatar: PersonDisplayAvatar,
+	AgentAvatar: PersonDisplayAgentAvatar,
+	Name: PersonDisplayName,
+	OnBehalfOf: PersonDisplayOnBehalfOf,
+	Description: PersonDisplayDescription
+});
+export { PersonDisplay };

package/dist/components/PersonDisplay/PersonDisplay.module.js

@@ -0,0 +1,23 @@
+import "./PersonDisplay.css";
+// src/components/PersonDisplay/PersonDisplay.module.scss
+var root = "PersonDisplay__root__RO7jo";
+var shrink = "PersonDisplay__shrink__fHY0P";
+var column = "PersonDisplay__column__b86lc";
+var name = "PersonDisplay__name__m7cB1";
+var agentRow = "PersonDisplay__agentRow__xxhNb";
+var onBehalfOf = "PersonDisplay__onBehalfOf__LLqif";
+var onBehalfOfPrefix = "PersonDisplay__onBehalfOfPrefix__J7ucI";
+var onBehalfOfMember = "PersonDisplay__onBehalfOfMember__2FEM-";
+var description = "PersonDisplay__description__21Dht";
+var PersonDisplay_module_default = {
+	root,
+	shrink,
+	column,
+	name,
+	agentRow,
+	onBehalfOf,
+	onBehalfOfPrefix,
+	onBehalfOfMember,
+	description
+};
+export { agentRow, column, PersonDisplay_module_default as default, description, name, onBehalfOf, onBehalfOfMember, onBehalfOfPrefix, root, shrink };

package/dist/components/PersonDisplay/index.d.ts

@@ -0,0 +1,2 @@
+export { PersonDisplay } from './PersonDisplay.js';
+export type { PersonDisplayProps, PersonDisplayAvatarProps, PersonDisplayAgentAvatarProps, PersonDisplayOnBehalfOfProps, PersonDisplayNameProps, PersonDisplayDescriptionProps, PersonDisplaySize, } from './PersonDisplay.js';

package/dist/components/PhoneInput/PhoneInput.css

@@ -0,0 +1,21 @@
+.PhoneInput__root__AN-GG {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--space-1);
+  align-items: center;
+}
+
+.PhoneInput__country__y1ten {
+  max-width: var(--size-control-country);
+}
+
+.PhoneInput__number__hiJZ0 {
+  width: 100%;
+}
+
+.PhoneInput__option__9thpU {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,61 @@
+import { type HTMLAttributes } from 'react';
+import { type CountryDisplay } from './phone.js';
+/** PhoneInput size — passed through to the inner Select + Input. */
+export type PhoneInputSize = 'sm' | 'md' | 'lg';
+export interface PhoneInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Controlled E.164 value (e.g. `"+442071838750"`); `null` = empty. */
+    value: string | null;
+    /** Fires with canonical E.164 on every edit; `null` when empty. */
+    onChange: (e164: string | null) => void;
+    /** ISO 3166-1 alpha-2 country used to seed the picker when `value` is empty. Default `"US"`. */
+    defaultCountry?: string;
+    /** Restrict the picker to this ISO-code subset. Defaults to all libphonenumber-js countries. An empty array is treated as all countries. */
+    countries?: string[];
+    /**
+     * How the SELECTED country renders in the picker trigger. Default `"code"`.
+     * - `"code"` — calling code only (`+1`).
+     * - `"iso"` — ISO code + code (`US +1`).
+     * - `"name"` — full country name + code (`United States +1`).
+     * - `"flag"` — emoji flag + code (`🇺🇸 +1`). Note: emoji flags don't render on
+     *   Windows Chrome/Edge (they show the letters), so prefer `"iso"` there.
+     *
+     * The dropdown rows always show the full country name + code (plus a flag in
+     * `"flag"` mode) so they stay searchable + identifiable regardless of this.
+     */
+    countryDisplay?: CountryDisplay;
+    /**
+     * Overrides the country picker's full accessible name. By default the picker
+     * is named after the group — "<group label> Country" (e.g. "Phone Country") —
+     * so it never collides with a form's own Country field; with no group label
+     * it is just "Country". Set this when that composed name reads badly.
+     */
+    countryLabel?: string;
+    /** Control size, forwarded to the Select + Input. Default `"md"`. */
+    size?: PhoneInputSize;
+    /** Error chrome on both controls (host/Field-driven). */
+    invalid?: boolean;
+    /** Disable both controls. */
+    disabled?: boolean;
+    /** Mark required (forwarded for Field semantics). */
+    required?: boolean;
+    /** BCP-47 locale for country-name localization. Defaults to the i18n locale, else `"en"`. */
+    locale?: string;
+    /** Stable id; placed on the number field so an external `<label htmlFor>` focuses it. */
+    id?: string;
+    /**
+     * Accessible name when used STANDALONE (outside `<Field>`). A standalone
+     * PhoneInput MUST be named via `aria-label` or `aria-labelledby`, else the
+     * country/number group is unnamed. Inside `<Field>` the label is wired
+     * automatically via `aria-labelledby`.
+     */
+    'aria-label'?: string;
+    /** Ids of elements labelling the group (injected by `<Field>`; takes precedence over `aria-label`). */
+    'aria-labelledby'?: string;
+    /** Ids of description/error elements; forwarded to the number field so it is announced on focus (injected by `<Field>`). */
+    'aria-describedby'?: string;
+}
+/**
+ * International phone field: a searchable country picker plus a national-number input that emits E.164.
+ * @see docs/components/PhoneInput.md
+ */
+export declare const PhoneInput: import("react").ForwardRefExoticComponent<PhoneInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,124 @@
+'use client';
+import { Select } from "../Select/Select.js";
+import { Input } from "../Input/Input.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
+import { countryDisplayLabel, formatNational, getCountryOptions, isoToFlag, parseE164, toE164 } from "./phone.js";
+import PhoneInput_module_default from "./PhoneInput.module.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/PhoneInput/PhoneInput.tsx
+var FALLBACK_COUNTRY = "US";
+function seedCountry(value, defaultCountry) {
+	if (value) {
+		const parsed = parseE164(value);
+		if (parsed?.country) return parsed.country;
+	}
+	return defaultCountry || FALLBACK_COUNTRY;
+}
+function seedNational(value) {
+	if (!value) return "";
+	const parsed = parseE164(value);
+	return parsed ? parsed.national : value;
+}
+/**
+* International phone field: a searchable country picker plus a national-number input that emits E.164.
+* @see docs/components/PhoneInput.md
+*/
+var PhoneInput = forwardRef(function PhoneInput({ value, onChange, defaultCountry = "US", countries, countryDisplay = "code", countryLabel, size = "md", invalid, disabled, required, locale, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className, ...rest }, ref) {
+	const t = useTranslation();
+	const resolvedLocale = locale ?? "en";
+	const countryWordId = `${useId()}-country`;
+	const countryWord = t("phoneInput.countryLabel");
+	const countryNaming = countryLabel ? { "aria-label": countryLabel } : ariaLabelledby ? { "aria-labelledby": `${ariaLabelledby} ${countryWordId}` } : { "aria-label": ariaLabel ? `${ariaLabel} ${countryWord}` : countryWord };
+	const options = useMemo(() => getCountryOptions(resolvedLocale, countries), [resolvedLocale, countries]);
+	const selectOptions = useMemo(() => options.map((o) => ({
+		value: o.iso,
+		label: countryDisplayLabel(o, countryDisplay),
+		description: `${o.name} ${o.iso} +${o.callingCode}`,
+		data: o
+	})), [options, countryDisplay]);
+	const [country, setCountry] = useState(() => seedCountry(value, defaultCountry));
+	const [national, setNational] = useState(() => seedNational(value));
+	const lastEmitted = useRef(value);
+	useEffect(() => {
+		if (value === lastEmitted.current) return;
+		lastEmitted.current = value;
+		if (!value) {
+			setNational("");
+			return;
+		}
+		const parsed = parseE164(value);
+		if (parsed) {
+			if (parsed.country) setCountry(parsed.country);
+			setNational(parsed.national);
+		} else setNational(value);
+	}, [value]);
+	const emit = useCallback((rawNational, ctry) => {
+		const e164 = toE164(rawNational, ctry);
+		lastEmitted.current = e164;
+		onChange(e164);
+	}, [onChange]);
+	const onNumberChange = useCallback((e) => {
+		const formatted = formatNational(e.target.value, country);
+		setNational(formatted);
+		emit(formatted, country);
+	}, [country, emit]);
+	const onCountryChange = useCallback((next) => {
+		const c = next;
+		setCountry(c);
+		const reformatted = formatNational(national, c);
+		setNational(reformatted);
+		emit(reformatted, c);
+	}, [national, emit]);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref,
+		className: clsx(PhoneInput_module_default.root, className),
+		role: "group",
+		"aria-label": ariaLabelledby ? void 0 : ariaLabel,
+		"aria-labelledby": ariaLabelledby,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				id: countryWordId,
+				hidden: true,
+				children: countryWord
+			}),
+			/* @__PURE__ */ jsx(Select, {
+				className: PhoneInput_module_default.country,
+				options: selectOptions,
+				value: country,
+				onChange: (v) => onCountryChange(Array.isArray(v) ? v[0] : v),
+				searchable: true,
+				clearable: false,
+				selectOnOpen: true,
+				size,
+				invalid,
+				disabled,
+				...countryNaming,
+				placeholder: t("phoneInput.countrySearch"),
+				renderOption: (opt) => opt.data ? /* @__PURE__ */ jsx("span", {
+					className: PhoneInput_module_default.option,
+					children: countryDisplay === "flag" ? `${isoToFlag(opt.data.iso)} ${opt.data.name} +${opt.data.callingCode}` : `${opt.data.name} +${opt.data.callingCode}`
+				}) : opt.label
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				className: PhoneInput_module_default.number,
+				id,
+				type: "tel",
+				inputMode: "tel",
+				autoComplete: "tel-national",
+				value: national,
+				onChange: onNumberChange,
+				size,
+				invalid,
+				disabled,
+				required,
+				"aria-label": t("phoneInput.numberLabel"),
+				"aria-describedby": ariaDescribedby,
+				placeholder: t("phoneInput.numberPlaceholder")
+			})
+		]
+	});
+});
+export { PhoneInput };

package/dist/components/PhoneInput/PhoneInput.module.js

@@ -0,0 +1,13 @@
+import "./PhoneInput.css";
+// src/components/PhoneInput/PhoneInput.module.scss
+var root = "PhoneInput__root__AN-GG";
+var country = "PhoneInput__country__y1ten";
+var number = "PhoneInput__number__hiJZ0";
+var option = "PhoneInput__option__9thpU";
+var PhoneInput_module_default = {
+	root,
+	country,
+	number,
+	option
+};
+export { country, PhoneInput_module_default as default, number, option, root };

package/dist/components/PhoneInput/index.d.ts

@@ -0,0 +1,4 @@
+export { PhoneInput } from './PhoneInput.js';
+export type { PhoneInputProps, PhoneInputSize } from './PhoneInput.js';
+export { isValidPhone } from './phone.js';
+export type { CountryOption, CountryCode, CountryDisplay } from './phone.js';

package/dist/components/PhoneInput/phone.d.ts

@@ -0,0 +1,50 @@
+import { type CountryCode } from 'libphonenumber-js';
+export type { CountryCode };
+/** One selectable country: ISO code, localized name, and calling code (no `+`). */
+export interface CountryOption {
+    iso: CountryCode;
+    name: string;
+    callingCode: string;
+}
+/**
+ * How the SELECTED country renders in the picker trigger:
+ * - `'flag'` — emoji flag + calling code (`🇺🇸 +1`)
+ * - `'iso'` — ISO code + calling code (`US +1`)
+ * - `'name'` — full country name + calling code (`United States +1`)
+ * - `'code'` — calling code only (`+1`)
+ */
+export type CountryDisplay = 'flag' | 'iso' | 'name' | 'code';
+/**
+ * Emoji flag for an ISO 3166-1 alpha-2 code, built from Unicode regional-
+ * indicator symbols. Note: emoji flags do NOT render on Windows Chrome/Edge —
+ * those show the letters (e.g. "US") instead.
+ */
+export declare function isoToFlag(iso: string): string;
+/** The compact trigger label for `country` under the chosen `display` mode. */
+export declare function countryDisplayLabel(country: CountryOption, display: CountryDisplay): string;
+/**
+ * Every supported country (or the `only` subset) as `{ iso, name, callingCode }`,
+ * names localized to `locale` via `Intl.DisplayNames`, sorted by name.
+ */
+export declare function getCountryOptions(locale: string, only?: string[]): CountryOption[];
+/** Parse an E.164 string into its country + national display, or null if unparseable. */
+export declare function parseE164(value: string): {
+    country: CountryCode | undefined;
+    national: string;
+} | null;
+/** Format a raw national input for `country` as the user types (idempotent on a formatted string). */
+export declare function formatNational(input: string, country: CountryCode): string;
+/**
+ * Canonical E.164 once the input is a *possible* complete number for `country`;
+ * `null` while still partial or empty.
+ */
+export declare function toE164(input: string, country: CountryCode): string | null;
+/**
+ * True iff `e164` is a valid phone number. Exported so a host can drive Field `invalid` chrome.
+ *
+ * @example
+ * <Field error={isValidPhone(value) ? undefined : 'Enter a valid number'}>
+ *   <PhoneInput value={value} onChange={setValue} />
+ * </Field>
+ */
+export declare function isValidPhone(e164: string | null | undefined): boolean;