@commenda/pathfinder 0.1.0 → 0.2.0

package/dist/components/inline-reference/InlineReference.js

@@ -21,19 +21,12 @@ var o = ({ label: o, href: s, icon: c, previewConfig: l, onClick: u, className:
 		className: n(p, "pf:cursor-pointer pf:border-0 pf:bg-transparent pf:p-0 pf:text-start"),
 		children: m
 	});
-	return l ? f ? /* @__PURE__ */ i(e, {
+	return l ? /* @__PURE__ */ i(e, {
 		mode: "preview",
 		trigger: h,
 		title: l.title ?? o,
 		loadingConfig: { isLoading: l.isLoading ?? !1 },
 		children: l.content
-	}) : /* @__PURE__ */ i(e, {
-		trigger: h,
-		title: l.title ?? o,
-		children: l.isLoading ? /* @__PURE__ */ i("span", {
-			role: "status",
-			children: "Loading preview…"
-		}) : l.content
 	}) : f || u ? h : /* @__PURE__ */ i("span", {
 		className: p,
 		children: m

package/dist/components/list/List.js

@@ -69,7 +69,7 @@ function l({ label: l, items: u, selectedId: d, onSelectionChange: f, emptyConte
 						f?.(e.id), e.onAction?.();
 					};
 					return /* @__PURE__ */ c("li", {
-						className: a("pf:group pf:relative pf:min-w-0 pf:rounded-sm pf:hover:bg-soft-pearl-200", l && "pf:bg-soft-pearl-300 pf:hover:bg-soft-pearl-300"),
+						className: a("pf:group pf:relative pf:min-w-0 pf:rounded-sm pf:[@media(hover:hover)]:hover:bg-soft-pearl-200 pf:motion-safe:transition-colors pf:duration-120 pf:ease-out pf:focus-within:transition-none", l && "pf:bg-soft-pearl-300 pf:hover:bg-soft-pearl-300"),
 						children: [e.linkConfig ? /* @__PURE__ */ s(n, {
 							linkConfig: e.linkConfig,
 							"aria-label": e.title,
@@ -85,7 +85,7 @@ function l({ label: l, items: u, selectedId: d, onSelectionChange: f, emptyConte
 							onClick: m,
 							children: u
 						}), e.menuConfig && /* @__PURE__ */ s("span", {
-							className: "pf:absolute pf:top-sm pf:end-md pf:opacity-100 pf:[@media(hover:hover)]:opacity-0 pf:group-hover:opacity-100 pf:group-focus-within:opacity-100",
+							className: "pf:absolute pf:top-sm pf:end-md pf:opacity-100 pf:motion-safe:transition-opacity pf:duration-120 pf:ease-out pf:group-focus-within:transition-none pf:[@media(hover:hover)]:opacity-0 pf:group-hover:opacity-100 pf:group-focus-within:opacity-100",
 							children: /* @__PURE__ */ s(r, {
 								menu: e.menuConfig,
 								trigger: /* @__PURE__ */ s(t, {

package/dist/components/list/ListGroup.js

@@ -6,20 +6,24 @@ import { PlusIcon as r } from "../icons/PlusIcon.js";
 import i from "clsx";
 import { useId as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Collapsible as l } from "@base-ui/react/collapsible";
 //#region src/components/list/ListGroup.tsx
-function l({ label: l, children: u, tone: d = "neutral", disclosureConfig: f, progressConfig: p, count: m, actionConfig: h, className: g }) {
-	let _ = a(), [v, y] = o(f?.defaultValue ?? !0), b = f?.value ?? v;
-	return /* @__PURE__ */ c("section", {
-		"aria-label": l,
-		className: i("pf:min-w-0 pf:font-body", g),
+function u({ label: u, children: d, tone: f = "neutral", disclosureConfig: p, progressConfig: m, count: h, actionConfig: g, className: _ }) {
+	let [v, y] = o(!1), b = a(), [x, S] = o(p?.defaultValue ?? !0), C = p?.value ?? x;
+	return /* @__PURE__ */ c(l.Root, {
+		render: /* @__PURE__ */ s("section", {}),
+		open: C,
+		"data-motion": v ? "pointer" : void 0,
+		"aria-label": u,
+		className: i("pf:group/list-disclosure pf:min-w-0 pf:font-body", _),
 		children: [/* @__PURE__ */ c("div", {
-			className: i("pf:flex pf:items-center pf:gap-md pf:rounded-md pf:pe-lg", d === "current" ? "pf:bg-blue-100 pf:hover:bg-blue-200" : "pf:bg-soft-pearl-200 pf:hover:bg-soft-pearl-300"),
+			className: i("pf:flex pf:items-center pf:gap-md pf:rounded-md pf:pe-lg", f === "current" ? "pf:bg-blue-100 pf:hover:bg-blue-200" : "pf:bg-soft-pearl-200 pf:hover:bg-soft-pearl-300"),
 			children: [/* @__PURE__ */ c("button", {
 				type: "button",
-				"aria-expanded": b,
-				"aria-controls": _,
-				onClick: () => {
-					y(!b), f?.onValueChange?.(!b);
+				"aria-expanded": C,
+				"aria-controls": b,
+				onClick: (e) => {
+					y(e.detail > 0), S(!C), p?.onValueChange?.(!C);
 				},
 				className: "pf:flex pf:flex-1 pf:min-w-0 pf:min-h-[36px] pf:items-center pf:flex-wrap pf:gap-sm pf:ps-lg pf:py-xs pf:border-0 pf:rounded-md pf:bg-transparent pf:text-start pf:text-label-13 pf:font-medium pf:text-soft-pearl-1000 pf:cursor-pointer pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
 				children: [
@@ -27,46 +31,47 @@ function l({ label: l, children: u, tone: d = "neutral", disclosureConfig: f, pr
 						className: "pf:flex pf:size-[16px] pf:items-center pf:justify-center pf:shrink-0",
 						children: /* @__PURE__ */ s(n, {
 							size: 12,
-							className: b ? "pf:rotate-90" : "pf:rtl:rotate-180"
+							className: i("pf:transition-none pf:motion-safe:group-data-[motion=pointer]/list-disclosure:transition-transform pf:duration-180 pf:ease-[cubic-bezier(0.23,1,0.32,1)]", C ? "pf:rotate-90" : "pf:rtl:rotate-180")
 						})
 					}),
 					/* @__PURE__ */ s("span", {
-						title: l,
+						title: u,
 						className: "pf:min-w-0 pf:flex-1 pf:truncate",
-						children: l
+						children: u
 					}),
-					p && /* @__PURE__ */ c("span", {
+					m && /* @__PURE__ */ c("span", {
 						className: "pf:inline-flex pf:items-center pf:gap-xs pf:rounded-full pf:bg-background pf:inset-ring-[0.5px] pf:inset-ring-soft-pearl-300 pf:ps-sm pf:pe-lg pf:py-xs pf:text-label-12 pf:font-normal",
 						children: [
 							/* @__PURE__ */ s(t, {
-								label: `${l} progress`,
-								value: p.done,
-								max: p.total,
+								label: `${u} progress`,
+								value: m.done,
+								max: m.total,
 								"aria-hidden": "true"
 							}),
-							p.done,
+							m.done,
 							" / ",
-							p.total
+							m.total
 						]
 					}),
-					m !== void 0 && /* @__PURE__ */ s("span", {
+					h !== void 0 && /* @__PURE__ */ s("span", {
 						className: "pf:text-soft-pearl-800 pf:font-normal",
-						children: m
+						children: h
 					})
 				]
-			}), h && /* @__PURE__ */ s(e, {
-				label: h.label,
+			}), g && /* @__PURE__ */ s(e, {
+				label: g.label,
 				size: "xs",
-				disabled: h.disabled,
-				onClick: h.onAction,
+				disabled: g.disabled,
+				onClick: g.onAction,
 				children: /* @__PURE__ */ s(r, { size: 16 })
 			})]
-		}), /* @__PURE__ */ s("div", {
-			id: _,
-			hidden: !b,
-			children: u
+		}), /* @__PURE__ */ s(l.Panel, {
+			id: b,
+			keepMounted: !0,
+			className: "pf:h-(--collapsible-panel-height) pf:overflow-hidden pf:data-starting-style:h-0 pf:data-ending-style:h-0 pf:transition-none pf:motion-safe:group-data-[motion=pointer]/list-disclosure:transition-[height] pf:duration-180 pf:ease-[cubic-bezier(0.23,1,0.32,1)]",
+			children: d
 		})]
 	});
 }
 //#endregion
-export { l as ListGroup };
+export { u as ListGroup };

package/dist/components/list/ListTask.js

@@ -6,7 +6,7 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 function i({ title: i, description: a, statusConfig: o, properties: s, onOpen: c, className: l }) {
 	let u = t("pf:m-0 pf:min-w-0 pf:wrap-anywhere pf:text-label-13 pf:font-medium", o.status === "completed" ? "pf:line-through pf:text-soft-pearl-800" : "pf:text-soft-pearl-1000");
 	return /* @__PURE__ */ r("div", {
-		className: t("pf:flex pf:items-start pf:gap-md pf:ps-lg pf:pe-md pf:py-lg pf:rounded-sm pf:min-w-0 pf:font-body pf:hover:bg-soft-pearl-200", l),
+		className: t("pf:flex pf:items-start pf:gap-md pf:ps-lg pf:pe-md pf:py-lg pf:rounded-sm pf:min-w-0 pf:font-body pf:[@media(hover:hover)]:hover:bg-soft-pearl-200 pf:motion-safe:transition-colors pf:duration-120 pf:ease-out pf:focus-within:transition-none", l),
 		children: [/* @__PURE__ */ n(e, {
 			...o,
 			size: 16

package/dist/components/list/SettingRow.js

@@ -36,7 +36,7 @@ function a({ title: a, description: o, leading: s, badge: c, divided: l = !0, ac
 	return u ? /* @__PURE__ */ r("button", {
 		type: "button",
 		onClick: u.onAction,
-		className: t(p, "pf:cursor-pointer pf:hover:bg-soft-pearl-200 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700"),
+		className: t(p, "pf:cursor-pointer pf:[@media(hover:hover)]:hover:bg-soft-pearl-200 pf:motion-safe:transition-colors pf:duration-120 pf:ease-out pf:focus-within:transition-none pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700"),
 		children: m
 	}) : /* @__PURE__ */ r("div", {
 		className: p,

package/dist/components/markdown/Markdown.js

@@ -1,7 +1,7 @@
 "use client";
 import { Separator as e } from "../separator/Separator.js";
-import { CodeBlock as t } from "../code-block/CodeBlock.js";
-import { safeHref as n } from "../inline-reference/safe-href.js";
+import { safeHref as t } from "../inline-reference/safe-href.js";
+import { CodeBlock as n } from "../code-block/CodeBlock.js";
 import { InlineReference as r } from "../inline-reference/InlineReference.js";
 import { inlineCodeClassNames as i, markdownClassNames as a } from "./markdown-class-names.js";
 import { markdownElements as o } from "./markdown-elements.js";
@@ -15,9 +15,9 @@ var p = /* @__PURE__ */ l(function({ content: l, children: p, isStreaming: m, is
 	let x = m ?? h ?? !1, S = u(() => ({
 		...o,
 		p: ({ children: e }) => /* @__PURE__ */ d("p", { children: e }),
-		code: ({ children: e, className: n }) => /* @__PURE__ */ d(t, {
+		code: ({ children: e, className: t }) => /* @__PURE__ */ d(n, {
 			code: (typeof e == "string" ? e : "").replace(/\n$/, ""),
-			language: /language-(\S+)/.exec(n ?? "")?.[1] ?? "text",
+			language: /language-(\S+)/.exec(t ?? "")?.[1] ?? "text",
 			showLineNumbers: v?.showLineNumbers
 		}),
 		inlineCode: ({ children: e }) => /* @__PURE__ */ d("code", {
@@ -26,14 +26,14 @@ var p = /* @__PURE__ */ l(function({ content: l, children: p, isStreaming: m, is
 		}),
 		table: s,
 		hr: () => /* @__PURE__ */ d(e, { className: "pf:my-xl" }),
-		a: ({ href: e, children: t }) => {
-			let i = n(e);
-			if (!i) return /* @__PURE__ */ d("span", { children: t });
-			let a = _?.resolve(i, typeof t == "string" ? t : "");
+		a: ({ href: e, children: n }) => {
+			let i = t(e);
+			if (!i) return /* @__PURE__ */ d("span", { children: n });
+			let a = _?.resolve(i, typeof n == "string" ? n : "");
 			return a ? /* @__PURE__ */ d(r, { ...a }) : /* @__PURE__ */ d("a", {
 				href: i,
 				rel: "noopener noreferrer",
-				children: t
+				children: n
 			});
 		},
 		...g
@@ -51,12 +51,13 @@ var p = /* @__PURE__ */ l(function({ content: l, children: p, isStreaming: m, is
 			prefix: "pf",
 			mode: x ? "streaming" : "static",
 			isAnimating: x,
+			animated: !1,
 			parseIncompleteMarkdown: x,
 			components: S,
 			controls: !1,
 			linkSafety: { enabled: !1 },
 			skipHtml: !0,
-			urlTransform: (e) => n(e) ?? "",
+			urlTransform: (e) => t(e) ?? "",
 			children: l ?? p
 		})
 	});

package/dist/components/markdown/MarkdownTable.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-/** MARKDOWN-TABLE-01: Figma620:31414. Compact semantic table, sticky first column, copy/export/fullscreen. */
+/** MARKDOWN-TABLE-01: Figma620:31414. Shared read-only table with copy/export/fullscreen actions. */
 export declare const MarkdownTable: ({ children }: {
     children?: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/markdown/MarkdownTable.js

@@ -4,43 +4,76 @@ import { Copy06Icon as t } from "../icons/Copy06Icon.js";
 import { Dropdown as n } from "../dropdown/Dropdown.js";
 import { DotsHorizontalIcon as r } from "../icons/DotsHorizontalIcon.js";
 import { Dialog as i } from "../dialog/Dialog.js";
-import { useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { extractTableDataFromElement as l, tableDataToCSV as u, tableDataToMarkdown as d, tableDataToTSV as f } from "streamdown";
+import { markdownElements as a } from "./markdown-elements.js";
+import { Table as o } from "../table/Table.js";
+import { Children as s, isValidElement as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { extractTableDataFromElement as p, tableDataToCSV as m, tableDataToMarkdown as h, tableDataToTSV as g } from "streamdown";
 //#region src/components/markdown/MarkdownTable.tsx
-var p = ({ children: p }) => {
-	let m = a(null), [h, g] = o(!1), [_, v] = o(""), y = () => m.current ? l(m.current) : {
-		headers: [],
-		rows: []
-	}, b = async () => {
+function _(e) {
+	return s.toArray(e).flatMap((e) => c(e) ? e.type === "tr" || e.type === a.tr ? [s.toArray(e.props.children).flatMap((e) => c(e) ? [e.props] : [])] : _(e.props.children) : []);
+}
+function v(e) {
+	return s.toArray(e).map((e) => c(e) ? v(e.props.children) : typeof e == "string" || typeof e == "number" ? String(e) : "").join("");
+}
+var y = ({ children: a }) => {
+	let s = l(null), [c, y] = u(!1), [b, x] = u(""), S = () => {
+		let e = s.current?.querySelector("table");
+		return e ? p(e) : {
+			headers: [],
+			rows: []
+		};
+	}, C = async () => {
 		try {
-			await navigator.clipboard.writeText(f(y())), v("Table copied");
+			await navigator.clipboard.writeText(g(S())), x("Table copied");
 		} catch {
-			v("Could not copy table. Try again.");
+			x("Could not copy table. Try again.");
 		}
-	}, x = (e) => {
-		let t = e === "csv" ? u(y()) : d(y()), n = URL.createObjectURL(new Blob([t], { type: e === "csv" ? "text/csv;charset=utf-8" : "text/markdown;charset=utf-8" })), r = document.createElement("a");
+	}, w = (e) => {
+		let t = e === "csv" ? m(S()) : h(S()), n = URL.createObjectURL(new Blob([t], { type: e === "csv" ? "text/csv;charset=utf-8" : "text/markdown;charset=utf-8" })), r = document.createElement("a");
 		r.href = n, r.download = `table.${e === "csv" ? "csv" : "md"}`, r.click(), setTimeout(() => {
 			URL.revokeObjectURL(n);
 		}, 1e3);
-	}, S = "pf:w-full pf:border-collapse pf:font-body pf:text-label-13 pf:[&_th]:h-[var(--pf-control-lg)] pf:[&_th]:text-label-12 pf:[&_th]:font-medium pf:[&_th]:text-soft-pearl-800 pf:[&_td]:h-5xl pf:[&_th]:px-lg pf:[&_td]:px-lg pf:[&_th]:border-b-[0.5px] pf:[&_td]:border-b-[0.5px] pf:[&_th]:border-solid pf:[&_td]:border-solid pf:[&_th]:border-soft-pearl-300 pf:[&_td]:border-soft-pearl-300 pf:[&_th]:whitespace-nowrap pf:[&_td]:whitespace-nowrap pf:[&_th:first-child]:sticky pf:[&_td:first-child]:sticky pf:[&_th:first-child]:left-0 pf:[&_td:first-child]:left-0 pf:[&_th:first-child]:bg-background pf:[&_td:first-child]:bg-background pf:[&_th:first-child]:z-10 pf:[&_td:first-child]:z-10", C = "pf:overflow-x-auto pf:rounded-xs pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700";
-	return /* @__PURE__ */ c("div", {
-		className: "pf:my-lg pf:min-w-0 pf:rounded-xl pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-soft-pearl-100 pf:p-md",
+	}, [T = [], ...E] = _(a), D = E.map((e, t) => ({
+		id: String(t),
+		cells: e
+	})), O = T.map((e, t) => ({
+		id: String(t),
+		header: v(e.children),
+		align: e.style?.textAlign === "right" ? "end" : e.style?.textAlign === "center" ? "center" : "start",
+		cell: (e) => e.cells[t]?.children,
+		value: (e) => v(e.cells[t]?.children)
+	})), k = O.length ? /* @__PURE__ */ d(o, {
+		label: "Markdown table",
+		rows: D,
+		columns: O,
+		rowConfig: {
+			getId: (e) => e.id,
+			getLabel: (e) => v(e.cells[0]?.children)
+		},
+		controlsConfig: {
+			toolbar: !1,
+			pagination: !1
+		},
+		container: "flat"
+	}) : null;
+	return /* @__PURE__ */ f("div", {
+		className: "pf:my-lg pf:min-w-0 pf:rounded-xl pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:overflow-hidden",
 		children: [
-			/* @__PURE__ */ c("div", {
-				className: "pf:mb-md pf:flex pf:justify-end pf:gap-0.5",
-				children: [/* @__PURE__ */ s(e, {
-					size: "xs",
+			/* @__PURE__ */ f("div", {
+				className: "pf:flex pf:items-center pf:justify-end pf:gap-xs pf:px-md pf:py-xs pf:bg-soft-pearl-100 pf:border-b-[0.5px] pf:border-soft-pearl-300",
+				children: [/* @__PURE__ */ d(e, {
+					size: "sm",
 					label: "Copy table",
 					onClick: () => {
-						b().catch(() => void 0);
+						C().catch(() => void 0);
 					},
-					children: /* @__PURE__ */ s(t, {})
-				}), /* @__PURE__ */ s(n, {
-					trigger: /* @__PURE__ */ s(e, {
-						size: "xs",
+					children: /* @__PURE__ */ d(t, {})
+				}), /* @__PURE__ */ d(n, {
+					trigger: /* @__PURE__ */ d(e, {
+						size: "sm",
 						label: "More table actions",
-						children: /* @__PURE__ */ s(r, {})
+						children: /* @__PURE__ */ d(r, {})
 					}),
 					menu: { groups: [{
 						id: "table",
@@ -50,7 +83,7 @@ var p = ({ children: p }) => {
 								type: "action",
 								label: "View full screen",
 								onClick: () => {
-									g(!0);
+									y(!0);
 								}
 							},
 							{
@@ -58,7 +91,7 @@ var p = ({ children: p }) => {
 								type: "action",
 								label: "Download CSV",
 								onClick: () => {
-									x("csv");
+									w("csv");
 								}
 							},
 							{
@@ -66,48 +99,32 @@ var p = ({ children: p }) => {
 								type: "action",
 								label: "Download Markdown",
 								onClick: () => {
-									x("markdown");
+									w("markdown");
 								}
 							}
 						]
 					}] }
 				})]
 			}),
-			/* @__PURE__ */ s("span", {
+			/* @__PURE__ */ d("span", {
 				role: "status",
 				className: "pf:sr-only",
-				children: _
+				children: b
 			}),
-			/* @__PURE__ */ s("div", {
-				role: "region",
-				"aria-label": "Markdown table",
-				tabIndex: 0,
-				className: C,
-				children: /* @__PURE__ */ s("table", {
-					ref: m,
-					className: S,
-					children: p
-				})
+			/* @__PURE__ */ d("div", {
+				ref: s,
+				children: k
 			}),
-			/* @__PURE__ */ s(i, {
-				open: h,
-				onOpenChange: g,
+			/* @__PURE__ */ d(i, {
+				open: c,
+				onOpenChange: y,
 				title: "Table",
 				size: "xl",
 				className: "pf:w-[calc(100vw-32px)] pf:h-[calc(100dvh-32px)]",
-				children: /* @__PURE__ */ s("div", {
-					role: "region",
-					"aria-label": "Expanded Markdown table",
-					tabIndex: 0,
-					className: C,
-					children: /* @__PURE__ */ s("table", {
-						className: S,
-						children: p
-					})
-				})
+				children: k
 			})
 		]
 	});
 };
 //#endregion
-export { p as MarkdownTable };
+export { y as MarkdownTable };

package/dist/components/otp/OTP.js

@@ -1,65 +1,66 @@
 "use client";
-import { FieldFrame as e, fieldShellClass as t } from "../fields/FieldFrame.js";
-import { useTextField as n } from "../fields/useTextField.js";
-import r from "clsx";
-import { Fragment as i, forwardRef as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { OTPInput as l, REGEXP_ONLY_DIGITS as u } from "input-otp";
+import { ControlSpinner as e } from "../controls/ControlSpinner.js";
+import { FieldFrame as t, fieldShellClass as n } from "../fields/FieldFrame.js";
+import { useTextField as r } from "../fields/useTextField.js";
+import i from "clsx";
+import { Fragment as a, forwardRef as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { OTPInput as u, REGEXP_ONLY_DIGITS as d } from "input-otp";
 //#region src/components/otp/OTP.tsx
-var d = a(function(a, d) {
-	let f = n(a), { length: p = 6, groupConfig: m, loadingConfig: h, onComplete: g, label: _, hideLabel: v, labelConfig: y, description: b, errorConfig: x, sourceConfig: S, disableConfig: C, value: w, defaultValue: T, onValueChange: E, className: D, onBlur: O, readOnly: k, ...A } = a, j = m?.sizes ?? (p === 6 ? [3, 3] : [p]);
-	if (j.some((e) => !Number.isInteger(e) || e < 1) || j.reduce((e, t) => e + t, 0) !== p) throw Error("OTP group sizes must be positive integers summing to length.");
-	let M = new Set(j.slice(0, -1).map((e, t) => j.slice(0, t + 1).reduce((e, t) => e + t, 0)));
-	return /* @__PURE__ */ c(e, {
-		field: a,
-		id: f.id,
-		supportId: f.supportId,
-		error: f.error,
-		className: D,
-		children: [/* @__PURE__ */ s("div", {
+var f = o(function(o, f) {
+	let p = r(o), { length: m = 6, groupConfig: h, loadingConfig: g, onComplete: _, label: v, hideLabel: y, labelConfig: b, description: x, errorConfig: S, sourceConfig: C, disableConfig: w, value: T, defaultValue: E, onValueChange: D, className: O, onBlur: k, readOnly: A, ...j } = o, M = h?.sizes ?? (m === 6 ? [3, 3] : [m]);
+	if (M.some((e) => !Number.isInteger(e) || e < 1) || M.reduce((e, t) => e + t, 0) !== m) throw Error("OTP group sizes must be positive integers summing to length.");
+	let N = new Set(M.slice(0, -1).map((e, t) => M.slice(0, t + 1).reduce((e, t) => e + t, 0)));
+	return /* @__PURE__ */ l(t, {
+		field: o,
+		id: p.id,
+		supportId: p.supportId,
+		error: p.error,
+		className: O,
+		children: [/* @__PURE__ */ c("div", {
 			className: "pf:min-w-0 pf:overflow-x-auto pf:p-xxs",
-			children: /* @__PURE__ */ s(l, {
-				...A,
-				id: f.id,
-				value: f.value,
-				maxLength: p,
-				minLength: p,
-				pattern: u,
+			children: /* @__PURE__ */ c(u, {
+				...j,
+				id: p.id,
+				value: p.value,
+				maxLength: m,
+				minLength: m,
+				pattern: d,
 				inputMode: "numeric",
 				autoComplete: "one-time-code",
-				disabled: C?.isDisabled,
-				readOnly: k || h?.isLoading,
-				"aria-busy": h?.isLoading,
-				"aria-invalid": f.error ? !0 : A["aria-invalid"],
-				"aria-describedby": f.describedBy,
+				disabled: w?.isDisabled,
+				readOnly: A || g?.isLoading,
+				"aria-busy": g?.isLoading,
+				"aria-invalid": p.error ? !0 : j["aria-invalid"],
+				"aria-describedby": p.describedBy,
 				ref: (e) => {
-					f.controlRef.current = e, typeof d == "function" ? d(e) : d && (d.current = e);
+					p.controlRef.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
 				},
 				onBlur: (e) => {
-					f.blur(), O?.(e);
+					p.blur(), k?.(e);
 				},
 				onChange: (e) => {
-					k || h?.isLoading || C?.isDisabled || (f.change(e), e.length === p && e !== f.value && g?.(e));
+					A || g?.isLoading || w?.isDisabled || (p.change(e), e.length === m && e !== p.value && _?.(e));
 				},
 				containerClassName: "pf:flex pf:w-fit pf:gap-sm pf:items-center",
-				render: ({ slots: e }) => /* @__PURE__ */ s(o, { children: e.map((e, n) => /* @__PURE__ */ c(i, { children: [M.has(n) && /* @__PURE__ */ s("span", {
+				render: ({ slots: e }) => /* @__PURE__ */ c(s, { children: e.map((e, t) => /* @__PURE__ */ l(a, { children: [N.has(t) && /* @__PURE__ */ c("span", {
 					"aria-hidden": "true",
 					className: "pf:text-soft-pearl-800",
 					children: "–"
-				}), /* @__PURE__ */ s("span", {
+				}), /* @__PURE__ */ c("span", {
 					"aria-hidden": "true",
-					"data-invalid": f.error ? "" : void 0,
-					"data-disabled": C?.isDisabled ? "" : void 0,
-					className: r(t, "pf:size-[36px] pf:shrink-0 pf:justify-center pf:text-label-15 pf:font-medium", e.isActive && "pf:border-blue-700 pf:shadow-[0_0_0_2px_var(--pf-color-blue-200)]"),
-					children: e.char ?? (e.hasFakeCaret ? /* @__PURE__ */ s("span", { className: "pf:h-[16px] pf:w-px pf:bg-soft-pearl-1000" }) : null)
-				})] }, n)) })
+					"data-invalid": p.error ? "" : void 0,
+					"data-disabled": w?.isDisabled ? "" : void 0,
+					className: i(n, "pf:border-soft-pearl-500 pf:size-[36px] pf:shrink-0 pf:justify-center pf:text-label-15 pf:font-medium", e.isActive && "pf:border-blue-700 pf:shadow-[0_0_0_2px_var(--pf-color-blue-200)]"),
+					children: e.char ?? (e.hasFakeCaret && !g?.isLoading ? /* @__PURE__ */ c("span", { className: "pf:h-[16px] pf:w-px pf:bg-soft-pearl-1000 pf:motion-safe:animate-[pf-otp-caret_1s_step-end_infinite]" }) : null)
+				})] }, t)) })
 			})
-		}), h?.isLoading && /* @__PURE__ */ s("span", {
+		}), g?.isLoading && /* @__PURE__ */ l("span", {
 			role: "status",
-			className: "pf:text-copy-12 pf:text-soft-pearl-800",
-			children: h.label ?? "Verifying code…"
+			className: "pf:flex pf:items-center pf:gap-sm pf:text-copy-12 pf:text-soft-pearl-800",
+			children: [/* @__PURE__ */ c(e, { size: 16 }), g.label ?? "Verifying code…"]
 		})]
 	});
 });
 //#endregion
-export { d as OTP };
+export { f as OTP };

package/dist/components/output-sections/OutputRow.js

@@ -19,8 +19,7 @@ var c = ({ id: c, title: l, dateTime: u, leading: d, meta: f, label: p, selected
 			"aria-current": m || void 0,
 			disabled: h,
 			onClick: g,
-			title: l,
-			className: i("pf:box-border pf:flex pf:h-full pf:w-full pf:min-w-0 pf:items-center pf:gap-md pf:rounded-sm pf:border-0 pf:bg-transparent pf:px-md pf:text-start pf:font-body pf:text-label-13 pf:text-inherit pf:cursor-pointer pf:hover:text-soft-pearl-1000 pf:disabled:cursor-not-allowed pf:disabled:opacity-50", _ && "pf:pr-[36px] pf:[@media(hover:hover)]:pr-md pf:[@media(hover:hover)]:group-hover:pr-[36px] pf:group-focus-within:pr-[36px]", v && "pf:pr-[36px]!", e),
+			className: i("pf:box-border pf:flex pf:h-full pf:w-full pf:min-w-0 pf:items-center pf:gap-md pf:rounded-sm pf:border-0 pf:bg-transparent pf:px-md pf:text-start pf:font-body pf:text-label-13 pf:text-inherit pf:cursor-pointer pf:hover:text-soft-pearl-1000 pf:disabled:cursor-not-allowed pf:disabled:opacity-50", _ && "pf:pe-[36px] pf:[@media(hover:hover)]:pe-md pf:[@media(hover:hover)]:group-hover:pr-[36px] pf:group-focus-within:pr-[36px]", v && "pf:pe-[36px]!", e),
 			children: [
 				/* @__PURE__ */ o("span", {
 					"aria-hidden": "true",
@@ -40,7 +39,7 @@ var c = ({ id: c, title: l, dateTime: u, leading: d, meta: f, label: p, selected
 				})
 			]
 		}), _ && /* @__PURE__ */ o("div", {
-			className: "pf:absolute pf:right-xs pf:top-xs pf:[@media(hover:hover)]:opacity-0 pf:group-hover:opacity-100 pf:group-focus-within:opacity-100 pf:has-[[aria-expanded=true]]:opacity-100",
+			className: "pf:absolute pf:end-xs pf:top-1/2 pf:-translate-y-1/2 pf:[@media(hover:hover)]:opacity-0 pf:group-hover:opacity-100 pf:group-focus-within:opacity-100 pf:has-[[aria-expanded=true]]:opacity-100",
 			children: /* @__PURE__ */ o(n, {
 				open: v,
 				onOpenChange: y,

package/dist/components/overlays/OverlayFrame.js

@@ -19,9 +19,9 @@ function u({ heading: u, description: d, children: f, footerConfig: p, onClose:
 		};
 	}, []), /* @__PURE__ */ l(n, { children: [
 		/* @__PURE__ */ l("header", {
-			className: i("pf:flex pf:shrink-0 pf:items-start pf:gap-xl pf:border-0 pf:border-b-[0.5px] pf:border-solid", w ? "pf:border-soft-pearl-300" : "pf:border-transparent", y ? "pf:ps-xl pf:pe-md pf:pt-lg pf:pb-xs" : b ? "pf:ps-3xl pf:pe-xl pf:pt-lg pf:pb-xl" : "pf:ps-3xl pf:pe-xl pf:pt-2xl pf:pb-xl"),
+			className: i("pf:flex pf:shrink-0 pf:items-center pf:gap-lg pf:border-0 pf:border-b-[0.5px] pf:border-solid", w ? "pf:border-soft-pearl-300" : "pf:border-transparent", y ? "pf:ps-xl pf:pe-md pf:pt-lg pf:pb-xs" : b ? "pf:ps-3xl pf:pe-xl pf:pt-lg pf:pb-xl" : "pf:ps-3xl pf:pe-xl pf:pt-2xl pf:pb-xl"),
 			children: [/* @__PURE__ */ l("div", {
-				className: i("pf:min-w-0 pf:flex-1", !y && "pf:pt-xs"),
+				className: "pf:min-w-0 pf:flex-1",
 				children: [u, d]
 			}), !x && v?.visible !== !1 && /* @__PURE__ */ c(e, {
 				label: v?.label ?? "Close",

package/dist/components/overlays/overlay-class-names.d.ts

@@ -1,8 +1,8 @@
 export declare const overlaySurfaceClassNames = "pf:box-border pf:flex pf:flex-col pf:min-h-0 pf:min-w-0 pf:overflow-hidden pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:rounded-[12px] pf:shadow-modal pf:font-body pf:text-copy-13 pf:text-soft-pearl-1000 pf:outline-none";
-export declare const overlayBackdropClassNames = "pf:fixed pf:inset-0 pf:z-40 pf:bg-soft-pearl-1000/10 pf:transition-opacity pf:duration-200 pf:ease-(--pf-easing-out) pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0";
-/** Dialog: fade, scale 0.95 and the 48% → 50% centering offset (2% of panel height).
+export declare const overlayBackdropClassNames = "pf:fixed pf:inset-0 pf:z-40 pf:bg-soft-pearl-1000/10 pf:transition-opacity pf:duration-180 pf:data-[ending-style]:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0";
+/** Dialog: centered fade and restrained scale; exit is shorter than entry.
  * Use one transform: Tailwind v4 scale/translate utilities do not transition via the transform property.
  */
-export declare const dialogMotionClassNames = "pf:transition-[opacity,transform] pf:duration-200 pf:ease-(--pf-easing-out) pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:motion-safe:data-[starting-style]:[transform:translateY(2%)_scale(0.95)] pf:motion-safe:data-[ending-style]:[transform:translateY(2%)_scale(0.95)]";
+export declare const dialogMotionClassNames = "pf:transition-[opacity,transform] pf:duration-180 pf:data-[ending-style]:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:motion-safe:data-[starting-style]:[transform:scale(0.98)] pf:motion-safe:data-[ending-style]:[transform:scale(0.98)]";
 export declare const overlayTitleClassNames = "pf:m-0 pf:text-heading-15 pf:font-semibold pf:wrap-anywhere";
 export declare const overlayDescriptionClassNames = "pf:m-0 pf:mt-xs pf:text-copy-13 pf:text-soft-pearl-900 pf:wrap-anywhere";

package/dist/components/overlays/overlay-class-names.js

@@ -1,4 +1,4 @@
 //#region src/components/overlays/overlay-class-names.ts
-var e = "pf:box-border pf:flex pf:flex-col pf:min-h-0 pf:min-w-0 pf:overflow-hidden pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:rounded-[12px] pf:shadow-modal pf:font-body pf:text-copy-13 pf:text-soft-pearl-1000 pf:outline-none", t = "pf:fixed pf:inset-0 pf:z-40 pf:bg-soft-pearl-1000/10 pf:transition-opacity pf:duration-200 pf:ease-(--pf-easing-out) pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0", n = "pf:transition-[opacity,transform] pf:duration-200 pf:ease-(--pf-easing-out) pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:motion-safe:data-[starting-style]:[transform:translateY(2%)_scale(0.95)] pf:motion-safe:data-[ending-style]:[transform:translateY(2%)_scale(0.95)]", r = "pf:m-0 pf:text-heading-15 pf:font-semibold pf:wrap-anywhere", i = "pf:m-0 pf:mt-xs pf:text-copy-13 pf:text-soft-pearl-900 pf:wrap-anywhere";
+var e = "pf:box-border pf:flex pf:flex-col pf:min-h-0 pf:min-w-0 pf:overflow-hidden pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-background pf:rounded-[12px] pf:shadow-modal pf:font-body pf:text-copy-13 pf:text-soft-pearl-1000 pf:outline-none", t = "pf:fixed pf:inset-0 pf:z-40 pf:bg-soft-pearl-1000/10 pf:transition-opacity pf:duration-180 pf:data-[ending-style]:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0", n = "pf:transition-[opacity,transform] pf:duration-180 pf:data-[ending-style]:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-reduce:transition-none pf:data-[starting-style]:opacity-0 pf:data-[ending-style]:opacity-0 pf:motion-safe:data-[starting-style]:[transform:scale(0.98)] pf:motion-safe:data-[ending-style]:[transform:scale(0.98)]", r = "pf:m-0 pf:text-heading-15 pf:font-semibold pf:wrap-anywhere", i = "pf:m-0 pf:mt-xs pf:text-copy-13 pf:text-soft-pearl-900 pf:wrap-anywhere";
 //#endregion
 export { n as dialogMotionClassNames, t as overlayBackdropClassNames, i as overlayDescriptionClassNames, e as overlaySurfaceClassNames, r as overlayTitleClassNames };