@elmeragroup/fuse 0.1.0-canary.1

package/components/pagination/intl/nb-NO.js

@@ -0,0 +1,14 @@
+//#region src/components/pagination/intl/nb-NO.ts
+/** Default localized copy for the `pagination.*` rows. */
+const nbNO = {
+	landmark: "Sidenavigasjon",
+	previous: "Forrige",
+	next: "Neste",
+	goToPrevious: "Gå til forrige side",
+	goToNext: "Gå til neste side",
+	morePages: "Flere sider"
+};
+//#endregion
+export { nbNO };
+
+//# sourceMappingURL=nb-NO.js.map

package/components/pagination/intl/nb-NO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nb-NO.js","names":[],"sources":["../../../../src/components/pagination/intl/nb-NO.ts"],"sourcesContent":["/** Default localized copy for the `pagination.*` rows. */\nexport const nbNO = {\n  landmark: \"Sidenavigasjon\",\n  previous: \"Forrige\",\n  next: \"Neste\",\n  goToPrevious: \"Gå til forrige side\",\n  goToNext: \"Gå til neste side\",\n  morePages: \"Flere sider\",\n};\n"],"mappings":";;AACA,MAAa,OAAO;CAClB,UAAU;CACV,UAAU;CACV,MAAM;CACN,cAAc;CACd,UAAU;CACV,WAAW;AACb"}

package/components/pagination/intl/sv-SE.js

@@ -0,0 +1,14 @@
+//#region src/components/pagination/intl/sv-SE.ts
+/** Default localized copy for the `pagination.*` rows. */
+const svSE = {
+	landmark: "Sidnavigering",
+	previous: "Föregående",
+	next: "Nästa",
+	goToPrevious: "Gå till föregående sida",
+	goToNext: "Gå till nästa sida",
+	morePages: "Fler sidor"
+};
+//#endregion
+export { svSE };
+
+//# sourceMappingURL=sv-SE.js.map

package/components/pagination/intl/sv-SE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-SE.js","names":[],"sources":["../../../../src/components/pagination/intl/sv-SE.ts"],"sourcesContent":["/** Default localized copy for the `pagination.*` rows. */\nexport const svSE = {\n  landmark: \"Sidnavigering\",\n  previous: \"Föregående\",\n  next: \"Nästa\",\n  goToPrevious: \"Gå till föregående sida\",\n  goToNext: \"Gå till nästa sida\",\n  morePages: \"Fler sidor\",\n};\n"],"mappings":";;AACA,MAAa,OAAO;CAClB,UAAU;CACV,UAAU;CACV,MAAM;CACN,cAAc;CACd,UAAU;CACV,WAAW;AACb"}

package/components/pagination/pagination-variants.d.ts

@@ -0,0 +1,52 @@
+//#region src/components/pagination/pagination-variants.d.ts
+export declare const paginationVariants: import("tailwind-variants").TVReturnType<{
+  direction: {
+    previous: {
+      link: string;
+    };
+    next: {
+      link: string;
+    };
+  };
+}, {
+  base: string;
+  content: string;
+  link: string;
+  linkIcon: string;
+  ellipsis: string;
+  ellipsisIcon: string;
+}, undefined, {
+  direction: {
+    previous: {
+      link: string;
+    };
+    next: {
+      link: string;
+    };
+  };
+}, {
+  base: string;
+  content: string;
+  link: string;
+  linkIcon: string;
+  ellipsis: string;
+  ellipsisIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  direction: {
+    previous: {
+      link: string;
+    };
+    next: {
+      link: string;
+    };
+  };
+}, {
+  base: string;
+  content: string;
+  link: string;
+  linkIcon: string;
+  ellipsis: string;
+  ellipsisIcon: string;
+}>>;
+//#endregion
+//# sourceMappingURL=pagination-variants.d.ts.map

package/components/pagination/pagination-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-variants.d.ts","names":[],"sources":["../../../src/components/pagination/pagination-variants.ts"],"mappings":";qBAca,gDAAkB;;IAWzB;MACE;;IAEF;MACE"}

package/components/pagination/pagination-variants.js

@@ -0,0 +1,33 @@
+import { tv } from "tailwind-variants";
+//#region src/components/pagination/pagination-variants.ts
+/**
+* PUBLIC recipe. Consumers borrow it from
+* `@elmeragroup/fuse/pagination`. Layout only — colors, radius, focus ring, and
+* control-box sizing come from the borrowed public `buttonVariants`.
+*
+* `direction` is not a consumer-facing prop. No recipe
+* default — Previous/Next pass the axis internally (ConfirmButton/TimelineList).
+*
+* `pl-2.5` / `pr-2.5` are reviewed chevron-side layout literals, not a
+* control-box size axis. `size-9` on the ellipsis slot is
+* the reviewed decorative box, not a density rung.
+*/
+const paginationVariants = tv({
+	slots: {
+		base: "mx-auto flex w-full flex-col items-center justify-center space-y-4",
+		content: "flex max-w-full flex-row flex-wrap items-center justify-center gap-1",
+		link: "gap-1",
+		linkIcon: "size-4",
+		ellipsis: "flex size-9 items-center justify-center",
+		ellipsisIcon: "size-4"
+	},
+	variants: { direction: {
+		previous: { link: "pl-2.5" },
+		next: { link: "pr-2.5" }
+	} },
+	defaultVariants: {}
+});
+//#endregion
+export { paginationVariants };
+
+//# sourceMappingURL=pagination-variants.js.map

package/components/pagination/pagination-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-variants.js","names":[],"sources":["../../../src/components/pagination/pagination-variants.ts"],"sourcesContent":["/**\n * PUBLIC recipe. Consumers borrow it from\n * `@elmeragroup/fuse/pagination`. Layout only — colors, radius, focus ring, and\n * control-box sizing come from the borrowed public `buttonVariants`.\n *\n * `direction` is not a consumer-facing prop. No recipe\n * default — Previous/Next pass the axis internally (ConfirmButton/TimelineList).\n *\n * `pl-2.5` / `pr-2.5` are reviewed chevron-side layout literals, not a\n * control-box size axis. `size-9` on the ellipsis slot is\n * the reviewed decorative box, not a density rung.\n */\nimport { tv } from \"tailwind-variants\";\n\nexport const paginationVariants = tv({\n  slots: {\n    base: \"mx-auto flex w-full flex-col items-center justify-center space-y-4\",\n    content: \"flex max-w-full flex-row flex-wrap items-center justify-center gap-1\",\n    link: \"gap-1\",\n    linkIcon: \"size-4\",\n    ellipsis: \"flex size-9 items-center justify-center\",\n    ellipsisIcon: \"size-4\",\n  },\n  variants: {\n    direction: {\n      previous: {\n        link: \"pl-2.5\",\n      },\n      next: {\n        link: \"pr-2.5\",\n      },\n    },\n  },\n  // Required shape: elmera/enforce-variant-standard makes every recipe declare\n  // `defaultVariants`. There is no default direction — Previous/Next pass the axis.\n  defaultVariants: {},\n});\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAa,qBAAqB,GAAG;CACnC,OAAO;EACL,MAAM;EACN,SAAS;EACT,MAAM;EACN,UAAU;EACV,UAAU;EACV,cAAc;CAChB;CACA,UAAU,EACR,WAAW;EACT,UAAU,EACR,MAAM,SACR;EACA,MAAM,EACJ,MAAM,SACR;CACF,EACF;CAGA,iBAAiB,CAAC;AACpB,CAAC"}

package/components/pagination/pagination.d.ts

@@ -0,0 +1,93 @@
+import { ButtonProps } from "../button/button.js";
+import { ComponentProps, ReactElement } from "react";
+//#region src/components/pagination/pagination.d.ts
+export type PaginationRootProps = ComponentProps<"nav"> & {
+  /**
+   * Landmark label. Defaults to the locale dictionary; an explicit `aria-label`
+   * wins over this prop.
+   */
+  label?: string;
+};
+/** Wrapping row of page links; edge controls stay reachable in narrow containers. */
+export type PaginationContentProps = ComponentProps<"ul">;
+export type PaginationItemProps = ComponentProps<"li">;
+export type PaginationLinkProps = {
+  /**
+   * Current page. Renders `aria-current="page"` and the outline button variant;
+   * inactive links omit the attribute entirely.
+   */
+  isActive?: boolean;
+  /**
+   * Recipe size axis borrowed from Button. Defaults to `"icon"`.
+   */
+  size?: ButtonProps["size"];
+} & ComponentProps<"a">;
+export type PaginationPreviousProps = Omit<PaginationLinkProps, "size" | "isActive" | "children"> & {
+  /**
+   * Recipe size axis borrowed from Button. Defaults to `"default"`.
+   */
+  size?: ButtonProps["size"];
+  /**
+   * Visible Previous copy. Defaults to the locale dictionary.
+   */
+  text?: string;
+  /**
+   * Accessible name. Defaults to the locale dictionary; an explicit `aria-label` wins.
+   */
+  label?: string;
+};
+export type PaginationNextProps = Omit<PaginationLinkProps, "size" | "isActive" | "children"> & {
+  /**
+   * Recipe size axis borrowed from Button. Defaults to `"default"`.
+   */
+  size?: ButtonProps["size"];
+  /**
+   * Visible Next copy. Defaults to the locale dictionary.
+   */
+  text?: string;
+  /**
+   * Accessible name. Defaults to the locale dictionary; an explicit `aria-label` wins.
+   */
+  label?: string;
+};
+export type PaginationEllipsisProps = Omit<ComponentProps<"span">, "children"> & {
+  /**
+   * Screen-reader-only ellipsis copy. Defaults to the locale dictionary.
+   */
+  label?: string;
+};
+/**
+ * Client page-navigation compound. Anchors are styled via
+ * the borrowed public `buttonVariants`; landmark, Previous/Next, and ellipsis
+ * copy come from the provider dictionary.
+ */
+export declare function PaginationRoot({ className, label, "aria-label": ariaLabel, ...props }: PaginationRootProps): ReactElement;
+export declare namespace PaginationRoot {
+  var displayName: string;
+}
+export declare function PaginationContent({ className, ...props }: PaginationContentProps): ReactElement;
+export declare namespace PaginationContent {
+  var displayName: string;
+}
+export declare function PaginationItem({ className, ...props }: PaginationItemProps): ReactElement;
+export declare namespace PaginationItem {
+  var displayName: string;
+}
+export declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): ReactElement;
+export declare namespace PaginationLink {
+  var displayName: string;
+}
+export declare function PaginationPrevious({ size, ...props }: PaginationPreviousProps): ReactElement;
+export declare namespace PaginationPrevious {
+  var displayName: string;
+}
+export declare function PaginationNext({ size, ...props }: PaginationNextProps): ReactElement;
+export declare namespace PaginationNext {
+  var displayName: string;
+}
+export declare function PaginationEllipsis({ className, label, ...props }: PaginationEllipsisProps): ReactElement;
+export declare namespace PaginationEllipsis {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=pagination.d.ts.map

package/components/pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"mappings":";;;YAwCY,sBAAsB;;;;;EAKhC;;;YAIU,yBAAyB;YACzB,sBAAsB;YAEtB;;;;;EAKV;;;;EAIA,OAAO;IACL;YAEQ,0BAA0B,KAAK;;;;EAIzC,OAAO;;;;EAIP;;;;EAIA;;YAGU,sBAAsB,KAAK;;;;EAIrC,OAAO;;;;EAIP;;;;EAIA;;YAGU,0BAA0B,KAAK;;;;EAIzC;;;;;;;wBAQc,iBACd,WACA,qBACc,cACX,SACF,sBAAsB;yBALT;MAAA;;wBAmBA,oBAAoB,cAAc,SAAS,yBAAyB;yBAApE;MAAA;;wBAIA,iBAAiB,cAAc,SAAS,sBAAsB;yBAA9D;MAAA;;wBAIA,iBACd,WACA,UACA,SACG,SACF,sBAAsB;yBALT;MAAA;;wBA2CA,qBAAqB,SAAqB,SAAS,0BAA0B;yBAA7E;MAAA;;wBAIA,iBAAiB,SAAqB,SAAS,sBAAsB;yBAArE;MAAA;;wBAIA,qBAAqB,WAAW,UAAU,SAAS,0BAA0B;yBAA7E;MAAA"}

package/components/pagination/pagination.js

@@ -0,0 +1,127 @@
+"use client";
+import { cn } from "../../styles/cn.js";
+import { useLocalizedStrings } from "../../hooks/use-localized-strings.js";
+import { buttonVariants } from "../button/button-variants.js";
+import { CaretRight } from "../../icons/generated/caret-right.js";
+import { DotsThree } from "../../icons/generated/dots-three.js";
+import { CaretLeft } from "../../icons/generated/caret-left.js";
+import { paginationStrings } from "./intl/index.js";
+import { paginationVariants } from "./pagination-variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pagination/pagination.tsx
+/** Resolved once at module scope — the recipe is prop-independent here (no per-render work). */
+const { base, content, link, linkIcon, ellipsis, ellipsisIcon } = paginationVariants();
+/**
+* The two edges differ by four values only, so `Pagination.Previous` and
+* `Pagination.Next` are one component parameterised by direction.
+*/
+const EDGES = {
+	previous: {
+		slot: "pagination-previous",
+		Icon: CaretLeft,
+		labelKey: "goToPrevious",
+		textKey: "previous",
+		link: paginationVariants({ direction: "previous" }).link
+	},
+	next: {
+		slot: "pagination-next",
+		Icon: CaretRight,
+		labelKey: "goToNext",
+		textKey: "next",
+		link: paginationVariants({ direction: "next" }).link
+	}
+};
+/**
+* Client page-navigation compound. Anchors are styled via
+* the borrowed public `buttonVariants`; landmark, Previous/Next, and ellipsis
+* copy come from the provider dictionary.
+*/
+function PaginationRoot({ className, label, "aria-label": ariaLabel, ...props }) {
+	const strings = useLocalizedStrings(paginationStrings);
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "pagination",
+		role: "navigation",
+		"aria-label": ariaLabel ?? label ?? strings.format("landmark"),
+		className: cn(base(), className),
+		...props
+	});
+}
+function PaginationContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "pagination-content",
+		className: cn(content(), className),
+		...props
+	});
+}
+function PaginationItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "pagination-item",
+		className,
+		...props
+	});
+}
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		"data-slot": "pagination-link",
+		"aria-current": isActive ? "page" : void 0,
+		className: cn(buttonVariants({
+			variant: isActive ? "outline" : "ghost",
+			size
+		}), link(), className),
+		...props
+	});
+}
+function PaginationEdge({ direction, className, text, label, size = "default", "aria-label": ariaLabel, ...props }) {
+	const edge = EDGES[direction];
+	const strings = useLocalizedStrings(paginationStrings);
+	const caret = /* @__PURE__ */ jsx(edge.Icon, { className: linkIcon() });
+	const copy = /* @__PURE__ */ jsx("span", { children: text ?? strings.format(edge.textKey) });
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"data-slot": edge.slot,
+		size,
+		"aria-label": ariaLabel ?? label ?? strings.format(edge.labelKey),
+		className: cn(edge.link(), className),
+		...props,
+		children: [direction === "previous" ? caret : copy, direction === "previous" ? copy : caret]
+	});
+}
+function PaginationPrevious({ size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(PaginationEdge, {
+		direction: "previous",
+		size,
+		...props
+	});
+}
+function PaginationNext({ size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(PaginationEdge, {
+		direction: "next",
+		size,
+		...props
+	});
+}
+function PaginationEllipsis({ className, label, ...props }) {
+	const strings = useLocalizedStrings(paginationStrings);
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "pagination-ellipsis",
+		className: cn(ellipsis(), className),
+		...props,
+		children: [/* @__PURE__ */ jsx(DotsThree, {
+			"aria-hidden": "true",
+			className: ellipsisIcon()
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label ?? strings.format("morePages")
+		})]
+	});
+}
+PaginationRoot.displayName = "Pagination.Root";
+PaginationContent.displayName = "Pagination.Content";
+PaginationItem.displayName = "Pagination.Item";
+PaginationLink.displayName = "Pagination.Link";
+PaginationPrevious.displayName = "Pagination.Previous";
+PaginationNext.displayName = "Pagination.Next";
+PaginationEllipsis.displayName = "Pagination.Ellipsis";
+//#endregion
+export { PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationRoot };
+
+//# sourceMappingURL=pagination.js.map

package/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, ReactElement } from \"react\";\n\nimport { useLocalizedStrings } from \"../../hooks/use-localized-strings\";\nimport { CaretLeft } from \"../../icons/generated/caret-left\";\nimport { CaretRight } from \"../../icons/generated/caret-right\";\nimport { DotsThree } from \"../../icons/generated/dots-three\";\nimport { cn } from \"../../styles/cn\";\nimport type { ButtonProps } from \"../button/button\";\nimport { buttonVariants } from \"../button/button-variants\";\nimport { paginationStrings } from \"./intl\";\nimport { paginationVariants } from \"./pagination-variants\";\n\n/** Resolved once at module scope — the recipe is prop-independent here (no per-render work). */\nconst { base, content, link, linkIcon, ellipsis, ellipsisIcon } = paginationVariants();\n\n/**\n * The two edges differ by four values only, so `Pagination.Previous` and\n * `Pagination.Next` are one component parameterised by direction.\n */\nconst EDGES = {\n  previous: {\n    slot: \"pagination-previous\",\n    Icon: CaretLeft,\n    labelKey: \"goToPrevious\",\n    textKey: \"previous\",\n    link: paginationVariants({ direction: \"previous\" }).link,\n  },\n  next: {\n    slot: \"pagination-next\",\n    Icon: CaretRight,\n    labelKey: \"goToNext\",\n    textKey: \"next\",\n    link: paginationVariants({ direction: \"next\" }).link,\n  },\n} as const;\n\ntype PaginationDirection = keyof typeof EDGES;\n\nexport type PaginationRootProps = ComponentProps<\"nav\"> & {\n  /**\n   * Landmark label. Defaults to the locale dictionary; an explicit `aria-label`\n   * wins over this prop.\n   */\n  label?: string;\n};\n\n/** Wrapping row of page links; edge controls stay reachable in narrow containers. */\nexport type PaginationContentProps = ComponentProps<\"ul\">;\nexport type PaginationItemProps = ComponentProps<\"li\">;\n\nexport type PaginationLinkProps = {\n  /**\n   * Current page. Renders `aria-current=\"page\"` and the outline button variant;\n   * inactive links omit the attribute entirely.\n   */\n  isActive?: boolean;\n  /**\n   * Recipe size axis borrowed from Button. Defaults to `\"icon\"`.\n   */\n  size?: ButtonProps[\"size\"];\n} & ComponentProps<\"a\">;\n\nexport type PaginationPreviousProps = Omit<PaginationLinkProps, \"size\" | \"isActive\" | \"children\"> & {\n  /**\n   * Recipe size axis borrowed from Button. Defaults to `\"default\"`.\n   */\n  size?: ButtonProps[\"size\"];\n  /**\n   * Visible Previous copy. Defaults to the locale dictionary.\n   */\n  text?: string;\n  /**\n   * Accessible name. Defaults to the locale dictionary; an explicit `aria-label` wins.\n   */\n  label?: string;\n};\n\nexport type PaginationNextProps = Omit<PaginationLinkProps, \"size\" | \"isActive\" | \"children\"> & {\n  /**\n   * Recipe size axis borrowed from Button. Defaults to `\"default\"`.\n   */\n  size?: ButtonProps[\"size\"];\n  /**\n   * Visible Next copy. Defaults to the locale dictionary.\n   */\n  text?: string;\n  /**\n   * Accessible name. Defaults to the locale dictionary; an explicit `aria-label` wins.\n   */\n  label?: string;\n};\n\nexport type PaginationEllipsisProps = Omit<ComponentProps<\"span\">, \"children\"> & {\n  /**\n   * Screen-reader-only ellipsis copy. Defaults to the locale dictionary.\n   */\n  label?: string;\n};\n\n/**\n * Client page-navigation compound. Anchors are styled via\n * the borrowed public `buttonVariants`; landmark, Previous/Next, and ellipsis\n * copy come from the provider dictionary.\n */\nexport function PaginationRoot({\n  className,\n  label,\n  \"aria-label\": ariaLabel,\n  ...props\n}: PaginationRootProps): ReactElement {\n  const strings = useLocalizedStrings(paginationStrings);\n\n  return (\n    <nav\n      data-slot=\"pagination\"\n      role=\"navigation\"\n      aria-label={ariaLabel ?? label ?? strings.format(\"landmark\")}\n      className={cn(base(), className)}\n      {...props}\n    />\n  );\n}\n\nexport function PaginationContent({ className, ...props }: PaginationContentProps): ReactElement {\n  return <ul data-slot=\"pagination-content\" className={cn(content(), className)} {...props} />;\n}\n\nexport function PaginationItem({ className, ...props }: PaginationItemProps): ReactElement {\n  return <li data-slot=\"pagination-item\" className={className} {...props} />;\n}\n\nexport function PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps): ReactElement {\n  return (\n    <a\n      data-slot=\"pagination-link\"\n      aria-current={isActive ? \"page\" : undefined}\n      className={cn(buttonVariants({ variant: isActive ? \"outline\" : \"ghost\", size }), link(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationEdge({\n  direction,\n  className,\n  text,\n  label,\n  size = \"default\",\n  \"aria-label\": ariaLabel,\n  ...props\n}: PaginationPreviousProps & { direction: PaginationDirection }): ReactElement {\n  const edge = EDGES[direction];\n  const strings = useLocalizedStrings(paginationStrings);\n  const caret = <edge.Icon className={linkIcon()} />;\n  const copy = <span>{text ?? strings.format(edge.textKey)}</span>;\n\n  return (\n    <PaginationLink\n      data-slot={edge.slot}\n      size={size}\n      aria-label={ariaLabel ?? label ?? strings.format(edge.labelKey)}\n      className={cn(edge.link(), className)}\n      {...props}>\n      {direction === \"previous\" ? caret : copy}\n      {direction === \"previous\" ? copy : caret}\n    </PaginationLink>\n  );\n}\n\nexport function PaginationPrevious({ size = \"default\", ...props }: PaginationPreviousProps): ReactElement {\n  return <PaginationEdge direction=\"previous\" size={size} {...props} />;\n}\n\nexport function PaginationNext({ size = \"default\", ...props }: PaginationNextProps): ReactElement {\n  return <PaginationEdge direction=\"next\" size={size} {...props} />;\n}\n\nexport function PaginationEllipsis({ className, label, ...props }: PaginationEllipsisProps): ReactElement {\n  const strings = useLocalizedStrings(paginationStrings);\n\n  return (\n    <span data-slot=\"pagination-ellipsis\" className={cn(ellipsis(), className)} {...props}>\n      <DotsThree aria-hidden=\"true\" className={ellipsisIcon()} />\n      <span className=\"sr-only\">{label ?? strings.format(\"morePages\")}</span>\n    </span>\n  );\n}\n\nPaginationRoot.displayName = \"Pagination.Root\";\nPaginationContent.displayName = \"Pagination.Content\";\nPaginationItem.displayName = \"Pagination.Item\";\nPaginationLink.displayName = \"Pagination.Link\";\nPaginationPrevious.displayName = \"Pagination.Previous\";\nPaginationNext.displayName = \"Pagination.Next\";\nPaginationEllipsis.displayName = \"Pagination.Ellipsis\";\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,EAAE,MAAM,SAAS,MAAM,UAAU,UAAU,iBAAiB,mBAAmB;;;;;AAMrF,MAAM,QAAQ;CACZ,UAAU;EACR,MAAM;EACN,MAAM;EACN,UAAU;EACV,SAAS;EACT,MAAM,mBAAmB,EAAE,WAAW,WAAW,CAAC,CAAC,CAAC;CACtD;CACA,MAAM;EACJ,MAAM;EACN,MAAM;EACN,UAAU;EACV,SAAS;EACT,MAAM,mBAAmB,EAAE,WAAW,OAAO,CAAC,CAAC,CAAC;CAClD;AACF;;;;;;AAsEA,SAAgB,eAAe,EAC7B,WACA,OACA,cAAc,WACd,GAAG,SACiC;CACpC,MAAM,UAAU,oBAAoB,iBAAiB;CAErD,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,cAAY,aAAa,SAAS,QAAQ,OAAO,UAAU;EAC3D,WAAW,GAAG,KAAK,GAAG,SAAS;EAC/B,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAA+C;CAC/F,OAAO,oBAAC,MAAD;EAAI,aAAU;EAAqB,WAAW,GAAG,QAAQ,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC7F;AAEA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA4C;CACzF,OAAO,oBAAC,MAAD;EAAI,aAAU;EAA6B;EAAW,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAgB,eAAe,EAC7B,WACA,UACA,OAAO,QACP,GAAG,SACiC;CACpC,OACE,oBAAC,KAAD;EACE,aAAU;EACV,gBAAc,WAAW,SAAS,KAAA;EAClC,WAAW,GAAG,eAAe;GAAE,SAAS,WAAW,YAAY;GAAS;EAAK,CAAC,GAAG,KAAK,GAAG,SAAS;EAClG,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,WACA,WACA,MACA,OACA,OAAO,WACP,cAAc,WACd,GAAG,SAC0E;CAC7E,MAAM,OAAO,MAAM;CACnB,MAAM,UAAU,oBAAoB,iBAAiB;CACrD,MAAM,QAAQ,oBAAC,KAAK,MAAN,EAAW,WAAW,SAAS,EAAI,CAAA;CACjD,MAAM,OAAO,oBAAC,QAAD,EAAA,UAAO,QAAQ,QAAQ,OAAO,KAAK,OAAO,EAAQ,CAAA;CAE/D,OACE,qBAAC,gBAAD;EACE,aAAW,KAAK;EACV;EACN,cAAY,aAAa,SAAS,QAAQ,OAAO,KAAK,QAAQ;EAC9D,WAAW,GAAG,KAAK,KAAK,GAAG,SAAS;EACpC,GAAI;EALN,UAAA,CAMG,cAAc,aAAa,QAAQ,MACnC,cAAc,aAAa,OAAO,KACrB;;AAEpB;AAEA,SAAgB,mBAAmB,EAAE,OAAO,WAAW,GAAG,SAAgD;CACxG,OAAO,oBAAC,gBAAD;EAAgB,WAAU;EAAiB;EAAM,GAAI;CAAQ,CAAA;AACtE;AAEA,SAAgB,eAAe,EAAE,OAAO,WAAW,GAAG,SAA4C;CAChG,OAAO,oBAAC,gBAAD;EAAgB,WAAU;EAAa;EAAM,GAAI;CAAQ,CAAA;AAClE;AAEA,SAAgB,mBAAmB,EAAE,WAAW,OAAO,GAAG,SAAgD;CACxG,MAAM,UAAU,oBAAoB,iBAAiB;CAErD,OACE,qBAAC,QAAD;EAAM,aAAU;EAAsB,WAAW,GAAG,SAAS,GAAG,SAAS;EAAG,GAAI;EAAhF,UAAA,CACE,oBAAC,WAAD;GAAW,eAAY;GAAO,WAAW,aAAa;EAAI,CAAA,GAC1D,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA,SAAS,QAAQ,OAAO,WAAW;EAAQ,CAAA,CAClE;;AAEV;AAEA,eAAe,cAAc;AAC7B,kBAAkB,cAAc;AAChC,eAAe,cAAc;AAC7B,eAAe,cAAc;AAC7B,mBAAmB,cAAc;AACjC,eAAe,cAAc;AAC7B,mBAAmB,cAAc"}

package/components/phone-number-field/country-names.d.ts

@@ -0,0 +1,12 @@
+import { CountryCode } from "libphonenumber-js/core";
+//#region src/components/phone-number-field/country-names.d.ts
+/**
+ * Per-locale country display names, filled on first lookup and shared across
+ * PhoneNumberField instances. Creating the resolver does not construct
+ * `Intl.DisplayNames` or call `.of`.
+ */
+export declare function countryNameResolver(locale: string): (countryCode: CountryCode) => string;
+/** Drops cached locale formatters so a later mount is a cold start. */
+export declare function resetCountryNameCache(): void;
+//#endregion
+//# sourceMappingURL=country-names.d.ts.map

package/components/phone-number-field/country-names.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-names.d.ts","names":[],"sources":["../../../src/components/phone-number-field/country-names.ts"],"mappings":";;;;;;;wBAmCgB,oBAAoB,kBAAkB,aAAa;;wBAcnD"}

package/components/phone-number-field/country-names.js

@@ -0,0 +1,42 @@
+//#region src/components/phone-number-field/country-names.ts
+const localeCountryNames = /* @__PURE__ */ new Map();
+function resolveDisplayNames(locale) {
+	try {
+		return new Intl.DisplayNames([locale], { type: "region" });
+	} catch {
+		return new Intl.DisplayNames(["en-US"], { type: "region" });
+	}
+}
+function localeEntry(locale) {
+	const cached = localeCountryNames.get(locale);
+	if (cached) return cached;
+	const entry = {
+		displayNames: resolveDisplayNames(locale),
+		names: /* @__PURE__ */ new Map()
+	};
+	localeCountryNames.set(locale, entry);
+	return entry;
+}
+/**
+* Per-locale country display names, filled on first lookup and shared across
+* PhoneNumberField instances. Creating the resolver does not construct
+* `Intl.DisplayNames` or call `.of`.
+*/
+function countryNameResolver(locale) {
+	return (countryCode) => {
+		const entry = localeEntry(locale);
+		const cached = entry.names.get(countryCode);
+		if (cached !== void 0) return cached;
+		const name = entry.displayNames.of(countryCode) ?? countryCode;
+		entry.names.set(countryCode, name);
+		return name;
+	};
+}
+/** Drops cached locale formatters so a later mount is a cold start. */
+function resetCountryNameCache() {
+	localeCountryNames.clear();
+}
+//#endregion
+export { countryNameResolver, resetCountryNameCache };
+
+//# sourceMappingURL=country-names.js.map

package/components/phone-number-field/country-names.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-names.js","names":[],"sources":["../../../src/components/phone-number-field/country-names.ts"],"sourcesContent":["import type { CountryCode } from \"libphonenumber-js/core\";\n\ntype LocaleCountryNames = {\n  displayNames: Intl.DisplayNames;\n  names: Map<string, string>;\n};\n\nconst localeCountryNames = new Map<string, LocaleCountryNames>();\n\nfunction resolveDisplayNames(locale: string): Intl.DisplayNames {\n  try {\n    return new Intl.DisplayNames([locale], { type: \"region\" });\n  } catch {\n    return new Intl.DisplayNames([\"en-US\"], { type: \"region\" });\n  }\n}\n\nfunction localeEntry(locale: string): LocaleCountryNames {\n  const cached = localeCountryNames.get(locale);\n  if (cached) {\n    return cached;\n  }\n  const entry: LocaleCountryNames = {\n    displayNames: resolveDisplayNames(locale),\n    names: new Map(),\n  };\n  localeCountryNames.set(locale, entry);\n  return entry;\n}\n\n/**\n * Per-locale country display names, filled on first lookup and shared across\n * PhoneNumberField instances. Creating the resolver does not construct\n * `Intl.DisplayNames` or call `.of`.\n */\nexport function countryNameResolver(locale: string): (countryCode: CountryCode) => string {\n  return (countryCode: CountryCode): string => {\n    const entry = localeEntry(locale);\n    const cached = entry.names.get(countryCode);\n    if (cached !== undefined) {\n      return cached;\n    }\n    const name = entry.displayNames.of(countryCode) ?? countryCode;\n    entry.names.set(countryCode, name);\n    return name;\n  };\n}\n\n/** Drops cached locale formatters so a later mount is a cold start. */\nexport function resetCountryNameCache(): void {\n  localeCountryNames.clear();\n}\n"],"mappings":";AAOA,MAAM,qCAAqB,IAAI,IAAgC;AAE/D,SAAS,oBAAoB,QAAmC;CAC9D,IAAI;EACF,OAAO,IAAI,KAAK,aAAa,CAAC,MAAM,GAAG,EAAE,MAAM,SAAS,CAAC;CAC3D,QAAQ;EACN,OAAO,IAAI,KAAK,aAAa,CAAC,OAAO,GAAG,EAAE,MAAM,SAAS,CAAC;CAC5D;AACF;AAEA,SAAS,YAAY,QAAoC;CACvD,MAAM,SAAS,mBAAmB,IAAI,MAAM;CAC5C,IAAI,QACF,OAAO;CAET,MAAM,QAA4B;EAChC,cAAc,oBAAoB,MAAM;EACxC,uBAAO,IAAI,IAAI;CACjB;CACA,mBAAmB,IAAI,QAAQ,KAAK;CACpC,OAAO;AACT;;;;;;AAOA,SAAgB,oBAAoB,QAAsD;CACxF,QAAQ,gBAAqC;EAC3C,MAAM,QAAQ,YAAY,MAAM;EAChC,MAAM,SAAS,MAAM,MAAM,IAAI,WAAW;EAC1C,IAAI,WAAW,KAAA,GACb,OAAO;EAET,MAAM,OAAO,MAAM,aAAa,GAAG,WAAW,KAAK;EACnD,MAAM,MAAM,IAAI,aAAa,IAAI;EACjC,OAAO;CACT;AACF;;AAGA,SAAgB,wBAA8B;CAC5C,mBAAmB,MAAM;AAC3B"}

package/components/phone-number-field/flag.d.ts

@@ -0,0 +1,15 @@
+import { PhoneCountryCode } from "./phone-engine.js";
+//#region src/components/phone-number-field/flag.d.ts
+export type FlagProps = {
+  country: PhoneCountryCode;
+};
+/**
+ * Decorative packaged-flag slot. Accepts only codes that exist in both
+ * libphonenumber and `flagAssets`.
+ */
+export declare function Flag({ country }: FlagProps): import("react").JSX.Element;
+export declare namespace Flag {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=flag.d.ts.map

package/components/phone-number-field/flag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag.d.ts","names":[],"sources":["../../../src/components/phone-number-field/flag.tsx"],"mappings":";;YAGY;EACV,SAAS;;;;;;wBAOK,OAAO,WAAW,4BAAS,IAAA;yBAA3B;MAAA"}

package/components/phone-number-field/flag.js

@@ -0,0 +1,28 @@
+import { flagAssets } from "../../flags/manifest.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/phone-number-field/flag.tsx
+/**
+* Decorative packaged-flag slot. Accepts only codes that exist in both
+* libphonenumber and `flagAssets`.
+*/
+function Flag({ country }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex h-[15px] w-5 shrink-0 items-center",
+		children: /* @__PURE__ */ jsx("img", {
+			src: flagAssets[country],
+			alt: "",
+			"aria-hidden": "true",
+			width: 20,
+			height: 15,
+			loading: "lazy",
+			decoding: "async",
+			draggable: false,
+			className: "block h-auto w-full"
+		})
+	});
+}
+Flag.displayName = "Flag";
+//#endregion
+export { Flag };
+
+//# sourceMappingURL=flag.js.map

package/components/phone-number-field/flag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flag.js","names":[],"sources":["../../../src/components/phone-number-field/flag.tsx"],"sourcesContent":["import { flagAssets } from \"../../flags\";\nimport type { PhoneCountryCode } from \"./phone-engine\";\n\nexport type FlagProps = {\n  country: PhoneCountryCode;\n};\n\n/**\n * Decorative packaged-flag slot. Accepts only codes that exist in both\n * libphonenumber and `flagAssets`.\n */\nexport function Flag({ country }: FlagProps) {\n  return (\n    <span className=\"inline-flex h-[15px] w-5 shrink-0 items-center\">\n      <img\n        src={flagAssets[country]}\n        alt=\"\"\n        aria-hidden=\"true\"\n        width={20}\n        height={15}\n        loading=\"lazy\"\n        decoding=\"async\"\n        draggable={false}\n        className=\"block h-auto w-full\"\n      />\n    </span>\n  );\n}\n\nFlag.displayName = \"Flag\";\n"],"mappings":";;;;;;;AAWA,SAAgB,KAAK,EAAE,WAAsB;CAC3C,OACE,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,OAAD;GACE,KAAK,WAAW;GAChB,KAAI;GACJ,eAAY;GACZ,OAAO;GACP,QAAQ;GACR,SAAQ;GACR,UAAS;GACT,WAAW;GACX,WAAU;EACX,CAAA;CACG,CAAA;AAEV;AAEA,KAAK,cAAc"}

package/components/phone-number-field/hooks/use-phone-number-field-state.d.ts

@@ -0,0 +1,32 @@
+import { PhoneCountryCode, PhoneNumberCountry, PhoneNumberFormat } from "../phone-engine.js";
+import { ClipboardEvent } from "react";
+import { CountryCode, MetadataJson } from "libphonenumber-js/core";
+//#region src/components/phone-number-field/hooks/use-phone-number-field-state.d.ts
+export type UsePhoneNumberFieldStateOptions = {
+  value?: string;
+  onChange?: (value: string) => void;
+  defaultCountryCode?: PhoneCountryCode;
+  metadata?: MetadataJson;
+  autoDetectCountry?: boolean;
+  international?: boolean;
+  preserveOnCountryChange?: boolean;
+  outputFormat?: PhoneNumberFormat;
+  formatOnType?: boolean;
+  onCountryChange?: (country: PhoneNumberCountry) => void;
+  locale: string;
+};
+export type UsePhoneNumberFieldStateReturn = {
+  displayValue: string;
+  outputValue: string;
+  handleInputChange: (value: string) => void;
+  selectCountry: (code: CountryCode | undefined) => void;
+  handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+  selectedCountry: PhoneNumberCountry;
+  countries: PhoneNumberCountry[];
+  getCountryName: (countryCode: CountryCode) => string;
+  /** Native form-reset handler restoring the initial state, or null when the parent owns `value`. */
+  onReset: (() => void) | null;
+};
+export declare function usePhoneNumberFieldState({ value, onChange, defaultCountryCode, metadata, autoDetectCountry, international, preserveOnCountryChange, outputFormat, formatOnType, onCountryChange, locale }: UsePhoneNumberFieldStateOptions): UsePhoneNumberFieldStateReturn;
+//#endregion
+//# sourceMappingURL=use-phone-number-field-state.d.ts.map

package/components/phone-number-field/hooks/use-phone-number-field-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-phone-number-field-state.d.ts","names":[],"sources":["../../../../src/components/phone-number-field/hooks/use-phone-number-field-state.ts"],"mappings":";;;;YAyBY;EACV;EACA,YAAY;EACZ,qBAAqB;EACrB,WAAW;EACX;EACA;EACA;EACA,eAAe;EACf;EACA,mBAAmB,SAAS;EAC5B;;YAGU;EACV;EACA;EACA,oBAAoB;EACpB,gBAAgB,MAAM;EACtB,cAAc,GAAG,eAAe;EAChC,iBAAiB;EACjB,WAAW;EACX,iBAAiB,aAAa;;EAE9B;;wBAGc,2BACd,OACA,UACA,oBACA,UACA,mBACA,eACA,yBACA,cACA,cACA,iBACA,UACC,kCAAkC"}

package/components/phone-number-field/hooks/use-phone-number-field-state.js

@@ -0,0 +1,86 @@
+"use client";
+import { countryNameResolver } from "../country-names.js";
+import { cleanPhoneInput, defaultMetadata as metadataJson, getCountries, processInputWithDetection, requirePickerCountries, resolveSelectedCountry } from "../phone-engine.js";
+import { clearedForReset, receiveValue, reconcile, snapshot, visibleSnapshot } from "../phone-field-state.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+//#region src/components/phone-number-field/hooks/use-phone-number-field-state.ts
+function usePhoneNumberFieldState({ value, onChange, defaultCountryCode, metadata = metadataJson, autoDetectCountry = true, international = false, preserveOnCountryChange = false, outputFormat = "e164", formatOnType = false, onCountryChange, locale }) {
+	const countries = useMemo(() => requirePickerCountries(getCountries(metadata)), [metadata]);
+	const configuration = useMemo(() => ({
+		countries,
+		metadata,
+		autoDetectCountry,
+		international,
+		outputFormat,
+		formatOnType
+	}), [
+		countries,
+		metadata,
+		autoDetectCountry,
+		international,
+		outputFormat,
+		formatOnType
+	]);
+	const [stored, setState] = useState(() => ({
+		configuration,
+		value,
+		accepted: receiveValue(value ?? "", resolveSelectedCountry(countries, defaultCountryCode), configuration),
+		proposal: null
+	}));
+	const state = reconcile(stored, value, configuration);
+	if (state !== stored) setState(state);
+	const current = visibleSnapshot(state);
+	const { digits, country: selectedCountry, values } = current;
+	const notifiedCountry = useRef(selectedCountry.code);
+	useEffect(() => {
+		if (notifiedCountry.current !== selectedCountry.code) {
+			notifiedCountry.current = selectedCountry.code;
+			onCountryChange?.(selectedCountry);
+		}
+	}, [selectedCountry, onCountryChange]);
+	const propose = (next) => {
+		const proposal = snapshot(next, configuration);
+		setState({
+			...state,
+			accepted: current,
+			proposal
+		});
+		onChange?.(proposal.values.outputValue);
+	};
+	const handleInputChange = (input) => {
+		propose(processInputWithDetection({
+			...configuration,
+			input: cleanPhoneInput(input),
+			currentCountry: selectedCountry
+		}));
+	};
+	const selectCountry = (code) => {
+		if (!code || code === selectedCountry.code) return;
+		const country = countries.find((row) => row.code === code);
+		if (country) propose({
+			digits: preserveOnCountryChange ? digits : "",
+			country
+		});
+	};
+	const handlePaste = (event) => {
+		event.preventDefault();
+		handleInputChange(event.clipboardData.getData("text"));
+	};
+	const getCountryName = useMemo(() => countryNameResolver(locale), [locale]);
+	return {
+		...values,
+		handleInputChange,
+		selectCountry,
+		handlePaste,
+		selectedCountry,
+		countries,
+		getCountryName,
+		onReset: value === void 0 ? () => {
+			setState(clearedForReset);
+		} : null
+	};
+}
+//#endregion
+export { usePhoneNumberFieldState };
+
+//# sourceMappingURL=use-phone-number-field-state.js.map

package/components/phone-number-field/hooks/use-phone-number-field-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-phone-number-field-state.js","names":["defaultMetadata"],"sources":["../../../../src/components/phone-number-field/hooks/use-phone-number-field-state.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { ClipboardEvent } from \"react\";\n\nimport type { CountryCode, MetadataJson } from \"libphonenumber-js/core\";\n\nimport { countryNameResolver } from \"../country-names\";\nimport {\n  cleanPhoneInput,\n  defaultMetadata,\n  getCountries,\n  processInputWithDetection,\n  requirePickerCountries,\n  resolveSelectedCountry,\n} from \"../phone-engine\";\nimport type {\n  PhoneCountryCode,\n  PhoneNumberCountry,\n  PhoneNumberFormat,\n  ProcessedPhoneInput,\n} from \"../phone-engine\";\nimport { clearedForReset, receiveValue, reconcile, snapshot, visibleSnapshot } from \"../phone-field-state\";\nimport type { PhoneState } from \"../phone-field-state\";\n\nexport type UsePhoneNumberFieldStateOptions = {\n  value?: string;\n  onChange?: (value: string) => void;\n  defaultCountryCode?: PhoneCountryCode;\n  metadata?: MetadataJson;\n  autoDetectCountry?: boolean;\n  international?: boolean;\n  preserveOnCountryChange?: boolean;\n  outputFormat?: PhoneNumberFormat;\n  formatOnType?: boolean;\n  onCountryChange?: (country: PhoneNumberCountry) => void;\n  locale: string;\n};\n\nexport type UsePhoneNumberFieldStateReturn = {\n  displayValue: string;\n  outputValue: string;\n  handleInputChange: (value: string) => void;\n  selectCountry: (code: CountryCode | undefined) => void;\n  handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;\n  selectedCountry: PhoneNumberCountry;\n  countries: PhoneNumberCountry[];\n  getCountryName: (countryCode: CountryCode) => string;\n  /** Native form-reset handler restoring the initial state, or null when the parent owns `value`. */\n  onReset: (() => void) | null;\n};\n\nexport function usePhoneNumberFieldState({\n  value,\n  onChange,\n  defaultCountryCode,\n  metadata = defaultMetadata,\n  autoDetectCountry = true,\n  international = false,\n  preserveOnCountryChange = false,\n  outputFormat = \"e164\",\n  formatOnType = false,\n  onCountryChange,\n  locale,\n}: UsePhoneNumberFieldStateOptions): UsePhoneNumberFieldStateReturn {\n  const countries = useMemo(() => requirePickerCountries(getCountries(metadata)), [metadata]);\n  const configuration = useMemo(\n    () => ({\n      countries,\n      metadata,\n      autoDetectCountry,\n      international,\n      outputFormat,\n      formatOnType,\n    }),\n    [countries, metadata, autoDetectCountry, international, outputFormat, formatOnType]\n  );\n  const [stored, setState] = useState<PhoneState>(() => ({\n    configuration,\n    value,\n    accepted: receiveValue(value ?? \"\", resolveSelectedCountry(countries, defaultCountryCode), configuration),\n    proposal: null,\n  }));\n\n  // Props are folded in during render so external replacement is visible in the same\n  // pass, including server rendering. The store catches up on commit.\n  const state = reconcile(stored, value, configuration);\n  if (state !== stored) setState(state);\n  const current = visibleSnapshot(state);\n  const { digits, country: selectedCountry, values } = current;\n\n  // Notify only committed country changes, including external value/catalog replacement.\n  const notifiedCountry = useRef(selectedCountry.code);\n  useEffect(() => {\n    if (notifiedCountry.current !== selectedCountry.code) {\n      notifiedCountry.current = selectedCountry.code;\n      onCountryChange?.(selectedCountry);\n    }\n  }, [selectedCountry, onCountryChange]);\n\n  const propose = (next: ProcessedPhoneInput) => {\n    const proposal = snapshot(next, configuration);\n    setState({ ...state, accepted: current, proposal });\n    onChange?.(proposal.values.outputValue);\n  };\n\n  const handleInputChange = (input: string) => {\n    propose(\n      processInputWithDetection({\n        ...configuration,\n        input: cleanPhoneInput(input),\n        currentCountry: selectedCountry,\n      })\n    );\n  };\n\n  const selectCountry = (code: CountryCode | undefined) => {\n    if (!code || code === selectedCountry.code) return;\n    const country = countries.find((row) => row.code === code);\n    if (country) propose({ digits: preserveOnCountryChange ? digits : \"\", country });\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault();\n    handleInputChange(event.clipboardData.getData(\"text\"));\n  };\n\n  const getCountryName = useMemo(() => countryNameResolver(locale), [locale]);\n  return {\n    ...values,\n    handleInputChange,\n    selectCountry,\n    handlePaste,\n    selectedCountry,\n    countries,\n    getCountryName,\n    // Reset only when this hook owns the value. A parent-owned `value` is the parent's\n    // to keep; a reset handler on this side would fight it.\n    onReset:\n      value === undefined\n        ? () => {\n            setState(clearedForReset);\n          }\n        : null,\n  };\n}\n"],"mappings":";;;;;;AAoDA,SAAgB,yBAAyB,EACvC,OACA,UACA,oBACA,WAAWA,cACX,oBAAoB,MACpB,gBAAgB,OAChB,0BAA0B,OAC1B,eAAe,QACf,eAAe,OACf,iBACA,UACkE;CAClE,MAAM,YAAY,cAAc,uBAAuB,aAAa,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;CAC1F,MAAM,gBAAgB,eACb;EACL;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAW;EAAU;EAAmB;EAAe;EAAc;CAAY,CACpF;CACA,MAAM,CAAC,QAAQ,YAAY,gBAA4B;EACrD;EACA;EACA,UAAU,aAAa,SAAS,IAAI,uBAAuB,WAAW,kBAAkB,GAAG,aAAa;EACxG,UAAU;CACZ,EAAE;CAIF,MAAM,QAAQ,UAAU,QAAQ,OAAO,aAAa;CACpD,IAAI,UAAU,QAAQ,SAAS,KAAK;CACpC,MAAM,UAAU,gBAAgB,KAAK;CACrC,MAAM,EAAE,QAAQ,SAAS,iBAAiB,WAAW;CAGrD,MAAM,kBAAkB,OAAO,gBAAgB,IAAI;CACnD,gBAAgB;EACd,IAAI,gBAAgB,YAAY,gBAAgB,MAAM;GACpD,gBAAgB,UAAU,gBAAgB;GAC1C,kBAAkB,eAAe;EACnC;CACF,GAAG,CAAC,iBAAiB,eAAe,CAAC;CAErC,MAAM,WAAW,SAA8B;EAC7C,MAAM,WAAW,SAAS,MAAM,aAAa;EAC7C,SAAS;GAAE,GAAG;GAAO,UAAU;GAAS;EAAS,CAAC;EAClD,WAAW,SAAS,OAAO,WAAW;CACxC;CAEA,MAAM,qBAAqB,UAAkB;EAC3C,QACE,0BAA0B;GACxB,GAAG;GACH,OAAO,gBAAgB,KAAK;GAC5B,gBAAgB;EAClB,CAAC,CACH;CACF;CAEA,MAAM,iBAAiB,SAAkC;EACvD,IAAI,CAAC,QAAQ,SAAS,gBAAgB,MAAM;EAC5C,MAAM,UAAU,UAAU,MAAM,QAAQ,IAAI,SAAS,IAAI;EACzD,IAAI,SAAS,QAAQ;GAAE,QAAQ,0BAA0B,SAAS;GAAI;EAAQ,CAAC;CACjF;CAEA,MAAM,eAAe,UAA4C;EAC/D,MAAM,eAAe;EACrB,kBAAkB,MAAM,cAAc,QAAQ,MAAM,CAAC;CACvD;CAEA,MAAM,iBAAiB,cAAc,oBAAoB,MAAM,GAAG,CAAC,MAAM,CAAC;CAC1E,OAAO;EACL,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EAGA,SACE,UAAU,KAAA,UACA;GACJ,SAAS,eAAe;EAC1B,IACA;CACR;AACF"}