@protobase/ui 0.15.4 → 0.16.0

package/dist/auth/sign-up-details-form.js

@@ -1,129 +1,99 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
-import { CodeInput } from "./code-input.js";
 import { AuthLayout } from "./auth-layout.js";
 import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/auth/sign-up-details-form.tsx
-/** The second step of making an account: the emailed code, the person's name and how they will sign in. */
-const SignUpDetailsForm = ({ email, onSubmit, onResend, onBack, methods, busy, error, notice }) => {
-	const [code, setCode] = useState("");
+/** The last step of making an account, once the emailed code was right: the person's name and how they will sign in. */
+const SignUpDetailsForm = ({ email, onSubmit, onBack, methods, busy, error }) => {
 	const [name, setName] = useState("");
 	const [password, setPassword] = useState("");
 	const passwordHint = useId();
 	const withPassword = methods.includes("password");
 	const passwordOptional = methods.includes("emailCode");
 	return /* @__PURE__ */ jsxs(AuthLayout, {
-		title: "Check your email",
-		description: "Enter the code we sent to create your account.",
-		children: [
-			/* @__PURE__ */ jsxs("p", {
-				className: "mb-4 text-[13px] text-muted-foreground",
-				children: [
-					"A 6-digit code is on its way to ",
-					/* @__PURE__ */ jsx("span", {
-						className: "font-medium text-foreground",
-						children: email
-					}),
-					". It works for 5 minutes, once. If the address has an account already, the email says so instead."
-				]
-			}),
-			notice && /* @__PURE__ */ jsx("p", {
-				role: "status",
-				className: "mb-4 rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
-				children: notice
-			}),
-			/* @__PURE__ */ jsxs("form", {
-				className: "flex flex-col gap-4",
-				onSubmit: (event) => {
-					event.preventDefault();
-					onSubmit({
-						code: code.trim(),
-						name: name.trim(),
-						...withPassword && password && { password }
-					});
-				},
-				children: [
-					/* @__PURE__ */ jsxs("label", {
+		title: "Your details",
+		description: "One last step to create your account.",
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "mb-4 text-[13px] text-muted-foreground",
+			children: [
+				"The code was right: the account is for ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: email
+				}),
+				"."
+			]
+		}), /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-4",
+			onSubmit: (event) => {
+				event.preventDefault();
+				onSubmit({
+					name: name.trim(),
+					...withPassword && password && { password }
+				});
+			},
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Your name", /* @__PURE__ */ jsx(Input, {
+						name: "name",
+						autoComplete: "name",
+						required: true,
+						autoFocus: true,
+						maxLength: 200,
+						value: name,
+						onChange: (event) => setName(event.target.value),
+						className: "min-h-6"
+					})]
+				}),
+				withPassword && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-1.5",
+					children: [/* @__PURE__ */ jsxs("label", {
 						className: "flex flex-col gap-1.5 text-[13px] font-medium",
-						children: ["Code", /* @__PURE__ */ jsx(CodeInput, {
-							name: "code",
-							required: true,
-							autoFocus: true,
-							value: code,
-							invalid: Boolean(error),
-							onChange: (event) => setCode(event.target.value)
-						})]
-					}),
-					/* @__PURE__ */ jsxs("label", {
-						className: "flex flex-col gap-1.5 text-[13px] font-medium",
-						children: ["Your name", /* @__PURE__ */ jsx(Input, {
-							name: "name",
-							autoComplete: "name",
-							required: true,
-							maxLength: 200,
-							value: name,
-							onChange: (event) => setName(event.target.value),
+						children: [passwordOptional ? "Password (optional)" : "Password", /* @__PURE__ */ jsx(Input, {
+							type: "password",
+							name: "password",
+							autoComplete: "new-password",
+							"aria-describedby": passwordHint,
+							required: !passwordOptional,
+							minLength: 12,
+							maxLength: 128,
+							value: password,
+							onChange: (event) => setPassword(event.target.value),
 							className: "min-h-6"
 						})]
-					}),
-					withPassword && /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col gap-1.5",
-						children: [/* @__PURE__ */ jsxs("label", {
-							className: "flex flex-col gap-1.5 text-[13px] font-medium",
-							children: [passwordOptional ? "Password (optional)" : "Password", /* @__PURE__ */ jsx(Input, {
-								type: "password",
-								name: "password",
-								autoComplete: "new-password",
-								"aria-describedby": passwordHint,
-								required: !passwordOptional,
-								minLength: 12,
-								maxLength: 128,
-								value: password,
-								onChange: (event) => setPassword(event.target.value),
-								className: "min-h-6"
-							})]
-						}), /* @__PURE__ */ jsxs("p", {
-							id: passwordHint,
-							className: "text-xs text-muted-foreground",
-							children: [
-								"At least ",
-								12,
-								" characters.",
-								passwordOptional && " Without one, you sign in with a code we email you."
-							]
-						})]
-					}),
-					error && /* @__PURE__ */ jsx("p", {
-						role: "alert",
-						className: "text-xs font-medium text-danger-text",
-						children: error
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						variant: "primary",
-						type: "submit",
-						loading: busy,
-						className: "min-h-10",
-						children: "Create account"
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex justify-between gap-2",
-						children: [/* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							onClick: onBack,
-							className: "min-h-10",
-							children: "Use another address"
-						}), /* @__PURE__ */ jsx(Button, {
-							variant: "ghost",
-							onClick: onResend,
-							disabled: busy,
-							className: "min-h-10",
-							children: "Send a new code"
-						})]
-					})
-				]
-			})
-		]
+					}), /* @__PURE__ */ jsxs("p", {
+						id: passwordHint,
+						className: "text-xs text-muted-foreground",
+						children: [
+							"At least ",
+							12,
+							" characters.",
+							passwordOptional && " Without one, you sign in with a code we email you."
+						]
+					})]
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "text-xs font-medium text-danger-text",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					loading: busy,
+					className: "min-h-10",
+					children: "Create account"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					onClick: onBack,
+					className: "min-h-10",
+					children: "Use another address"
+				})
+			]
+		})]
 	});
 };
 //#endregion

package/dist/auth/sign-up-page.js

@@ -1,5 +1,6 @@
 import { authMessage } from "./auth-messages.js";
 import { useAuth } from "./auth-provider.js";
+import { SignUpCodeForm } from "./sign-up-code-form.js";
 import { SignUpDetailsForm } from "./sign-up-details-form.js";
 import { SignUpEmailForm } from "./sign-up-email-form.js";
 import { useState } from "react";
@@ -7,11 +8,12 @@ import { AuthError } from "@protobase/client";
 import { jsx } from "react/jsx-runtime";
 //#region src/auth/sign-up-page.tsx
 /**
-* Makes an account on a server with open sign-up: the address, then the code emailed to it with the person's name and
-* password. The new account is signed in, and sets up what the sign-in policy requires as after any sign-in.
+* Makes an account on a server with open sign-up: the address, then the code emailed to it on its own, then the
+* person's name and password. The new account is signed in, and sets up what the sign-in policy requires as after any
+* sign-in.
 */
-const SignUpPage = ({ workspace, email, onCodeSent, onBack, onSignIn, onBrowse }) => {
-	const { signInMethods, sendSignUpCode, signUp } = useAuth();
+const SignUpPage = ({ workspace, email, ticket, onCodeSent, onVerified, onBack, onSignIn, onBrowse }) => {
+	const { signInMethods, sendSignUpCode, verifySignUpCode, signUp } = useAuth();
 	const [busy, setBusy] = useState(false);
 	const [error, setError] = useState();
 	const [notice, setNotice] = useState();
@@ -38,19 +40,26 @@ const SignUpPage = ({ workspace, email, onCodeSent, onBack, onSignIn, onBrowse }
 			onCodeSent(address);
 		})
 	});
-	return /* @__PURE__ */ jsx(SignUpDetailsForm, {
+	if (ticket === void 0) return /* @__PURE__ */ jsx(SignUpCodeForm, {
 		email,
-		methods: signInMethods,
 		busy,
 		error,
 		notice,
 		onBack,
+		onSubmit: (code) => void attempt(async () => onVerified(await verifySignUpCode(email, code))),
 		onResend: () => void attempt(async () => {
 			await sendSignUpCode(email);
 			setNotice("A new code is on its way. Only the newest one works.");
-		}),
+		})
+	});
+	return /* @__PURE__ */ jsx(SignUpDetailsForm, {
+		email,
+		methods: signInMethods,
+		busy,
+		error,
+		onBack,
 		onSubmit: (details) => void attempt(() => signUp({
-			email,
+			ticket,
 			...details
 		}))
 	});

package/dist/auth/two-factor-form.js

@@ -1,6 +1,6 @@
 import { Input } from "../primitives/input.js";
 import { Button } from "../primitives/button.js";
-import { CodeInput } from "./code-input.js";
+import { OtpInput } from "../primitives/otp-input.js";
 import { AuthLayout } from "./auth-layout.js";
 import { Checkbox } from "../primitives/checkbox.js";
 import { useState } from "react";
@@ -72,13 +72,13 @@ const TwoFactorForm = ({ methods, onVerify, onSendCode, onBack, busy, error, cod
 						invalid: Boolean(error),
 						onChange: (event) => setCode(event.target.value),
 						className: "min-h-6 font-mono"
-					}) : /* @__PURE__ */ jsx(CodeInput, {
+					}) : /* @__PURE__ */ jsx(OtpInput, {
 						name: "code",
 						required: true,
 						autoFocus: true,
 						value: code,
 						invalid: Boolean(error),
-						onChange: (event) => setCode(event.target.value)
+						onChange: setCode
 					})]
 				}),
 				/* @__PURE__ */ jsxs("label", {

package/dist/auth/use-sign-in-address.js

@@ -1,25 +1,38 @@
 import { withoutSignInLink } from "./provider-link.js";
 import { useRouter } from "../app/router.js";
-import { readSignInAddress, signInPath } from "./sign-in-address.js";
 import { useCallback, useMemo } from "react";
+import { readSignInAddress, signInPath } from "@protobase/schema";
 //#region src/auth/use-sign-in-address.ts
 /**
 * The sign-in route as logical values, and the ways to move along it: `address` is the step it shows, or `undefined` on
-* any other page; `next` is the page to come back to; `open` shows a step, and `leave` goes back to `next` in place of
-* the route in the tab's history. Components read and write the sign-in route through this hook, never its query.
+* any other page; `next` is the page to come back to; `open` shows a step, `link` is a step for a `RouteLink`, which a
+* click opens, and `leave` goes back to `next` in place of the route in the tab's history. Components read and write
+* the sign-in route through this hook, never its query.
 */
 const useSignInAddress = () => {
-	const { path, params, navigate } = useRouter();
+	const { path, params, basePath, navigate } = useRouter();
 	const address = useMemo(() => readSignInAddress(path, params), [path, params]);
 	const here = withoutSignInLink(new URL(params.size > 0 ? `${path}?${params}` : path, "http://local").href);
 	const next = address ? address.next : here;
+	const open = useCallback((step = "sign-in", options) => navigate(signInPath({
+		step,
+		next
+	}), options), [navigate, next]);
 	return {
 		address,
 		next,
-		open: useCallback((step = "sign-in", options) => navigate(signInPath({
-			step,
-			next
-		}), options), [navigate, next]),
+		open,
+		link: useCallback((step = "sign-in", options) => ({
+			href: `${basePath}${signInPath({
+				step,
+				next
+			})}`,
+			onFollow: () => open(step, options)
+		}), [
+			basePath,
+			next,
+			open
+		]),
 		leave: useCallback(() => navigate(next ?? "/", { replace: true }), [navigate, next])
 	};
 };

package/dist/index.d.ts

@@ -22,6 +22,7 @@ import { RecordLink } from "./app/displays/record-link.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { SignInPrompt, SignInPromptProps } from "./auth/sign-in-prompt.js";
 import { ResponsiveDialog, ResponsiveDialogProps } from "./primitives/responsive-dialog.js";
+import { OtpInput, OtpInputProps } from "./primitives/otp-input.js";
 import { AssistantDock, AssistantDockProps } from "./assistant-dock/assistant-dock.js";
 import { PartView } from "./assistant-dock/part-view.js";
 import { useAssistant } from "./assistant-dock/use-assistant.js";
@@ -41,4 +42,4 @@ import { Step, StepList, StepState } from "./step-list/step-list.js";
 import { DiffView, DiffViewProps } from "./diff-view/diff-view.js";
 import { DiffLine, diffStats, parseDiff } from "./diff-view/diff.js";
 import { CompactTable, CompactTableProps } from "./compact-table/compact-table.js";
-export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResponsiveDialog, type ResponsiveDialogProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, type ActionCardProps, type ActionContext, type ActionHandler, ApiProvider, type ApiProviderProps, App, AppLink, type AppProps, AssistantDock, type AssistantDockProps, type BackendData, type BackendRefresh, type CardAction, type CardTone, ChatMessage, ChatThread, type ChatThreadProps, CompactTable, type CompactTableProps, Composer, type ComposerProps, type CurrentAddress, type DiffLine, DiffView, type DiffViewProps, FieldList, type FieldWidget, type FieldWidgetEditorProps, type FieldWidgetProps, type LayoutRecord, type ListAddress, type ListChange, type ListDisplay, type ListDisplayRow, type MetaData, OtpInput, type OtpInputProps, PartView, type PluginInfo, type ProjectUi, type RecordCardProps, RecordLink, ResponsiveDialog, type ResponsiveDialogProps, SidePanel, type SidePanelProps, SignInPrompt, type SignInPromptProps, type Step, StepList, type StepState, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/index.js

@@ -1,3 +1,4 @@
+import { OtpInput } from "./primitives/otp-input.js";
 import { ApiProvider, useClient, useResourceClient } from "./data/api-provider.js";
 import { useApiToken } from "./auth/use-api-token.js";
 import { useRecord } from "./data/use-record.js";
@@ -32,4 +33,4 @@ import { useList } from "./data/use-list.js";
 import { isConflict, useUpdateRecord } from "./data/use-update-record.js";
 import { App } from "./app/app.js";
 import { RecordLink } from "./app/displays/record-link.js";
-export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, PartView, RecordLink, ResponsiveDialog, SidePanel, SignInPrompt, StepList, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };
+export { ActionCard, ApiProvider, App, AppLink, AssistantDock, ChatMessage, ChatThread, CompactTable, Composer, DiffView, FieldList, OtpInput, PartView, RecordLink, ResponsiveDialog, SidePanel, SignInPrompt, StepList, definePlugin, defineUi, diffStats, isConflict, mergeUi, parseDiff, pluginApi, protobaseVersion, uiFromModule, useApiToken, useAppAddress, useAssistant, useAssistantClient, useBackendData, useClient, useFacets, useHistogram, useLayoutRecord, useList, useListDisplay, useMeta, usePlugin, useRecord, useResourceClient, useSeries, useUpdateRecord };

package/dist/lib/flip-guard.js

@@ -0,0 +1,43 @@
+//#region src/lib/flip-guard.ts
+const warnInDevelopment = (held, values) => {
+	if (!import.meta.env?.DEV) return;
+	console.warn(`A layout kept changing between ${values.join(", ")} and is held at ${held}, so it does not flash. Something it draws changes what it measures.`);
+};
+/**
+* Settles a measure that a layout follows, such as a list's width, when the layout feeds back into it and it keeps
+* changing between the same few values, as a width does when the layout it gives brings a scrollbar that narrows it
+* again. Each call takes the measured `value` at time `at` and returns the value to lay out with: the measured one,
+* until it comes back to a value it had within `windowMs` `comebacks` times. It then holds the smallest of the values
+* it last changed between, which fits whichever of them the measure settles at, until the measure takes another value,
+* as on a resize of the window. A layout that keeps to the held value stops feeding the loop, so it cannot flash.
+*/
+const createFlipGuard = ({ windowMs = 1e3, comebacks = 2, onHold = warnInDevelopment } = {}) => {
+	let current;
+	let changes = [];
+	let held;
+	return (value, at) => {
+		if (held?.among.has(value)) return held.value;
+		if (held) {
+			held = void 0;
+			changes = [];
+		}
+		if (value === current) return value;
+		current = value;
+		changes = changes.filter((change) => at - change.at <= windowMs);
+		changes.push({
+			value,
+			at,
+			comeback: changes.some((change) => change.value === value)
+		});
+		if (changes.filter((change) => change.comeback).length < comebacks) return value;
+		const among = new Set(changes.slice(-2 * comebacks).map((change) => change.value));
+		held = {
+			value: Math.min(...among),
+			among
+		};
+		onHold(held.value, [...among]);
+		return held.value;
+	};
+};
+//#endregion
+export { createFlipGuard };

package/dist/lib/page-scroll-lock.js

@@ -0,0 +1,20 @@
+//#region src/lib/page-scroll-lock.ts
+const attribute = "data-pb-scroll-locked";
+/**
+* Stops the page scrolling behind a modal until the returned function is called. Where the page shows a scrollbar that
+* takes room, the page keeps that room meanwhile (`styles.css` reserves it for this attribute), so hiding the scrollbar
+* does not widen the page and move everything behind the modal sideways.
+*/
+const lockPageScroll = () => {
+	const { body, documentElement: root } = document;
+	const overflow = body.style.overflow;
+	const locked = root.hasAttribute(attribute);
+	if (window.innerWidth > root.clientWidth) root.setAttribute(attribute, "");
+	body.style.overflow = "hidden";
+	return () => {
+		body.style.overflow = overflow;
+		if (!locked) root.removeAttribute(attribute);
+	};
+};
+//#endregion
+export { lockPageScroll };

package/dist/lib/use-focus-trap.js

@@ -1,8 +1,9 @@
+import { lockPageScroll } from "./page-scroll-lock.js";
 import { useEffect, useRef } from "react";
 //#region src/lib/use-focus-trap.ts
 const focusable = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 /**
-* While `active`: moves focus into `container`, keeps Tab inside it, locks body scrolling,
+* While `active`: moves focus into `container`, keeps Tab inside it, locks page scrolling (see `lockPageScroll`),
 * calls `onEscape` on Escape, and returns focus to the previously focused element afterwards.
 */
 const useFocusTrap = (container, active, onEscape) => {
@@ -12,8 +13,7 @@ const useFocusTrap = (container, active, onEscape) => {
 		if (!active || !container.current) return;
 		const root = container.current;
 		const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		const overflow = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
+		const unlock = lockPageScroll();
 		const items = () => [...root.querySelectorAll(focusable)];
 		(items()[0] ?? root).focus();
 		const onKey = (event) => {
@@ -37,7 +37,7 @@ const useFocusTrap = (container, active, onEscape) => {
 		document.addEventListener("keydown", onKey);
 		return () => {
 			document.removeEventListener("keydown", onKey);
-			document.body.style.overflow = overflow;
+			unlock();
 			previous?.focus();
 		};
 	}, [active, container]);

package/dist/organizations/invitation-page.js

@@ -1,8 +1,10 @@
+import { cn } from "../lib/cn.js";
+import { RouteLink } from "../primitives/route-link.js";
 import { Input } from "../primitives/input.js";
 import { Spinner } from "../primitives/spinner.js";
 import { authMessage } from "../auth/auth-messages.js";
 import { useAuth } from "../auth/auth-provider.js";
-import { Button } from "../primitives/button.js";
+import { Button, buttonClass } from "../primitives/button.js";
 import { AuthLayout } from "../auth/auth-layout.js";
 import { organizationRoleLabels, roleLabel } from "./organization-paths.js";
 import { useAction } from "./use-action.js";
@@ -74,7 +76,7 @@ const SignUp = ({ token, preview, onDone }) => {
 * Where an emailed invitation link leads: what it is for, then accepting it signed in as the invited address, signing
 * in first, or making an account for an address without one.
 */
-const InvitationPage = ({ token, onDone, onSignIn }) => {
+const InvitationPage = ({ token, onDone, signIn }) => {
 	const { session, state, signOut, organizations } = useAuth();
 	const [preview, setPreview] = useState();
 	const [invalid, setInvalid] = useState();
@@ -138,10 +140,9 @@ const InvitationPage = ({ token, onDone, onSignIn }) => {
 				}),
 				children: ["Join ", preview.organization.name]
 			})]
-		}) : preview.hasAccount ? /* @__PURE__ */ jsxs(Button, {
-			variant: "primary",
-			className: "w-full",
-			onClick: onSignIn,
+		}) : preview.hasAccount ? /* @__PURE__ */ jsxs(RouteLink, {
+			to: signIn,
+			className: cn(buttonClass({ variant: "primary" }), "w-full"),
 			children: [
 				"Sign in as ",
 				preview.email,

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.15.4";
+var version = "0.16.0";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };

package/dist/primitives/otp-input.d.ts

@@ -0,0 +1,21 @@
+import { InputHTMLAttributes, Ref } from "react";
+//#region src/primitives/otp-input.d.ts
+export type OtpInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'inputMode' | 'autoComplete' | 'maxLength' | 'pattern' | 'size'> & {
+  /** The digits entered so far. */
+  value: string;
+  onChange: (code: string) => void;
+  /** Called with the code once its last digit is in, typed, pasted or filled in by the system, to submit it at once. */
+  onComplete?: (code: string) => void;
+  /** How many digits the code has; 6 by default. */
+  length?: number;
+  invalid?: boolean;
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A one-time code field drawn as a box per digit: one real input, so the system's code autofill (`one-time-code`, from
+ * a mail or a text message), pasting a whole code into any box, the phone's digit keyboard and a form's `required`
+ * work as on any field. Arrow keys, Home and End move between boxes, and a digit typed on a filled box replaces it.
+ * Label it as any input, with a `<label>` around it or `aria-label`.
+ */
+export declare const OtpInput: ({ value, onChange, onComplete, length, invalid, disabled, className, ref, onFocus, onBlur, onSelect, onKeyDown, onClick, onPaste, ...rest }: OtpInputProps) => import("react").JSX.Element;
+//#endregion

package/dist/primitives/otp-input.js

@@ -0,0 +1,117 @@
+import { cn } from "../lib/cn.js";
+import { editedCode, pastedCode } from "./otp-value.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/otp-input.tsx
+/**
+* A one-time code field drawn as a box per digit: one real input, so the system's code autofill (`one-time-code`, from
+* a mail or a text message), pasting a whole code into any box, the phone's digit keyboard and a form's `required`
+* work as on any field. Arrow keys, Home and End move between boxes, and a digit typed on a filled box replaces it.
+* Label it as any input, with a `<label>` around it or `aria-label`.
+*/
+const OtpInput = ({ value, onChange, onComplete, length = 6, invalid, disabled, className, ref, onFocus, onBlur, onSelect, onKeyDown, onClick, onPaste, ...rest }) => {
+	const input = useRef(null);
+	const [focused, setFocused] = useState(false);
+	const [caret, setCaret] = useState(value.length);
+	const code = value.slice(0, length);
+	const active = Math.min(caret, length - 1);
+	const attach = (node) => {
+		input.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+	const commit = (next) => {
+		if (next === code) return;
+		onChange(next);
+		if (next.length === length) onComplete?.(next);
+	};
+	const place = (at) => {
+		const field = input.current;
+		if (!field) return;
+		const to = Math.max(0, Math.min(at, code.length));
+		field.setSelectionRange(to, to < code.length ? to + 1 : to);
+		setCaret(to);
+	};
+	const moveWithKeys = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return;
+		const at = event.currentTarget.selectionStart ?? code.length;
+		const target = {
+			ArrowLeft: at - 1,
+			ArrowRight: at + 1,
+			Home: 0,
+			End: code.length
+		}[event.key];
+		if (target === void 0) return;
+		event.preventDefault();
+		place(target);
+	};
+	const placeAtPointer = (event) => {
+		onClick?.(event);
+		const box = event.currentTarget.getBoundingClientRect();
+		if (event.clientX <= box.left || event.clientX >= box.right) return;
+		place(Math.floor((event.clientX - box.left) / box.width * length));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", disabled && "opacity-50", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			className: "flex justify-center gap-2",
+			children: Array.from({ length }, (_, index) => {
+				const current = focused && index === active;
+				return /* @__PURE__ */ jsx("div", {
+					"data-slot": index,
+					"data-digit": code[index],
+					className: cn("flex h-12 min-w-0 max-w-12 flex-1 items-center justify-center rounded-md border bg-background font-mono text-xl font-semibold text-foreground shadow-sm transition-colors before:content-[attr(data-digit)]", invalid ? "border-danger" : current ? "border-primary" : "border-border-strong", current && (invalid ? "ring-2 ring-danger/20" : "ring-2 ring-primary/20")),
+					children: code[index] === void 0 && (current ? /* @__PURE__ */ jsx("span", { className: "h-6 w-px animate-pulse bg-foreground" }) : /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-border-strong" }))
+				}, index);
+			})
+		}), /* @__PURE__ */ jsx("input", {
+			ref: attach,
+			type: "text",
+			inputMode: "numeric",
+			autoComplete: "one-time-code",
+			pattern: `[0-9]{${length}}`,
+			spellCheck: false,
+			autoCorrect: "off",
+			autoCapitalize: "off",
+			"aria-invalid": invalid || void 0,
+			disabled,
+			value: code,
+			className: "absolute inset-0 size-full cursor-text bg-transparent text-transparent caret-transparent outline-none selection:bg-transparent disabled:cursor-not-allowed",
+			...rest,
+			onChange: (event) => {
+				const { data, dataTransfer } = event.nativeEvent;
+				commit(editedCode(event.target.value, data ?? dataTransfer?.getData("text/plain"), length));
+			},
+			onPaste: (event) => {
+				onPaste?.(event);
+				if (event.defaultPrevented) return;
+				event.preventDefault();
+				const field = event.currentTarget;
+				const next = pastedCode(code, event.clipboardData.getData("text"), field.selectionStart ?? code.length, length);
+				commit(next);
+				setCaret(next.length);
+			},
+			onSelect: (event) => {
+				onSelect?.(event);
+				const field = event.currentTarget;
+				const start = field.selectionStart ?? code.length;
+				if (start === field.selectionEnd && start < field.value.length) field.setSelectionRange(start, start + 1);
+				setCaret(start);
+			},
+			onKeyDown: moveWithKeys,
+			onClick: placeAtPointer,
+			onFocus: (event) => {
+				setFocused(true);
+				onFocus?.(event);
+			},
+			onBlur: (event) => {
+				setFocused(false);
+				onBlur?.(event);
+			}
+		})]
+	});
+};
+//#endregion
+export { OtpInput };