@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/password-strength/password-strength.js

@@ -0,0 +1,455 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { Label as Label$1 } from "../label/label.js";
+import { FieldMessage } from "../lib/field-message.js";
+import { useFieldWiring } from "../lib/field-shell.js";
+import { EyeMorph } from "../lib/eye-morph.js";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Button, Group, Input } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/password-strength/password-strength.tsx
+const defaultPasswordStrengthMessages = {
+	levels: {
+		tooShort: "Too short",
+		weak: "Weak",
+		fair: "Fair",
+		good: "Good",
+		strong: "Strong"
+	},
+	showPassword: "Show password",
+	meterLabel: "Password strength",
+	noPassword: "No password yet",
+	rulesLabel: "Password requirements",
+	ruleMet: ", met",
+	ruleNotMet: ", not met",
+	remainingPrefix: "",
+	remainingSuffix: "more",
+	summary: ({ label, met, total }) => `Strength: ${label}. ${met} of ${total} requirements met.`
+};
+/** Counts code points, so an emoji or other astral character counts as one. */
+const countCodePoints = (password) => Array.from(password).length;
+const defaultRuleLabels = {
+	length: (minLength) => `At least ${minLength} characters`,
+	case: "Upper and lowercase letters",
+	number: "At least one number",
+	symbol: "At least one symbol"
+};
+/** The built-in rules (length, mixed case, number, symbol) with your own minimum length, labels and character count. */
+function createPasswordRules({ minLength = 12, labels, countCharacters = countCodePoints } = {}) {
+	const copy = {
+		...defaultRuleLabels,
+		...labels
+	};
+	return [
+		{
+			id: "length",
+			label: copy.length(minLength),
+			test: (password) => countCharacters(password) >= minLength,
+			remaining: (password) => Math.max(0, minLength - countCharacters(password))
+		},
+		{
+			id: "case",
+			label: copy.case,
+			test: (password) => /\p{Ll}/u.test(password) && /\p{Lu}/u.test(password)
+		},
+		{
+			id: "number",
+			label: copy.number,
+			test: (password) => /\p{N}/u.test(password)
+		},
+		{
+			id: "symbol",
+			label: copy.symbol,
+			test: (password) => /[^\p{L}\p{N}\s]/u.test(password)
+		}
+	];
+}
+const defaultPasswordRules = createPasswordRules();
+/** Scores a password on the device: one step per share of rules met, capped at the first step while it is shorter than the short length (8 by default). */
+function estimateStrength(password, rules = defaultPasswordRules, { shortLength = 8, levels, countCharacters = countCodePoints } = {}) {
+	if (!password) return {
+		level: 0,
+		label: "",
+		met: []
+	};
+	const words = {
+		...defaultPasswordStrengthMessages.levels,
+		...levels
+	};
+	const met = rules.filter((rule) => rule.test(password)).map((rule) => rule.id);
+	if (countCharacters(password) < shortLength) return {
+		level: 1,
+		label: words.tooShort,
+		met,
+		short: true
+	};
+	const level = Math.min(4, Math.max(1, Math.round(met.length / Math.max(rules.length, 1) * 4)));
+	return {
+		level,
+		label: [
+			words.weak,
+			words.fair,
+			words.good,
+			words.strong
+		][level - 1] ?? words.weak,
+		met
+	};
+}
+/**
+* The field's box: a React Aria `Group` with the shared field surface (see
+* PasswordField for why a Group and for `data-focus-within`). Hover darkens the
+* border only to `muted-foreground`, as the reference does here, and a new error
+* shakes the box (two animation names, so each restart plays).
+*/
+const shellClass = cn(fieldSurfaceVariants(), "flex items-center gap-1 h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [--field-toggle-size:calc(var(--spacing)*8.5)] [&:where([data-focus-within])]:border-foreground data-[hovered]:not-data-[disabled]:not-data-[focus-within]:not-data-[invalid]:border-muted-foreground motion-safe:data-[shake=a]:animate-field-shake-a motion-safe:data-[shake=b]:animate-field-shake-b");
+const inputClass = "min-w-0 flex-1 border-0 bg-transparent p-0 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed motion-safe:data-[reveal=shown]:animate-field-reveal-shown motion-safe:data-[reveal=hidden]:animate-field-reveal-hidden";
+const toggleClass = "field-toggle-button grid size-(--field-toggle-size) flex-none cursor-pointer place-items-center rounded-md border-0 bg-transparent p-0 text-muted-foreground [--press-scale:.94] [-webkit-tap-highlight-color:transparent] outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground aria-pressed:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed";
+const toPlaces = (value, seq, previous) => {
+	const digits = String(value).split("");
+	return digits.map((digit, index) => {
+		const key = digits.length - 1 - index;
+		return {
+			key,
+			digit,
+			seq: previous.get(key)?.seq ?? seq
+		};
+	});
+};
+function LeavingDigit({ id, rect, onDone, children }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		style: rect,
+		className: "absolute motion-safe:animate-field-count-out motion-reduce:animate-fade-out",
+		children
+	});
+}
+function PlaceColumn({ place, direction, leaving, onDone }) {
+	const digitRef = useRef(null);
+	const digits = useLeavingItems(place.digit, place.digit, () => digitRef.current);
+	const done = useCallback(() => onDone(place.key), [onDone, place.key]);
+	useExitBackstop(leaving, done, 900);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving && prefersReducedMotion()) done();
+	}, [leaving, done]);
+	return /* @__PURE__ */ jsxs("span", {
+		style: { "--roll": direction },
+		onAnimationEnd: (event) => {
+			if (leaving && event.target === event.currentTarget && event.animationName === "field-column-shrink") done();
+		},
+		className: cn("field-number-column overflow-x-clip", leaving ? "motion-safe:animate-field-column-out" : place.seq > 0 && "motion-safe:animate-field-column-in"),
+		children: [digits.leaving.map((item) => /* @__PURE__ */ jsx(LeavingDigit, {
+			id: item.id,
+			rect: item.rect,
+			onDone: digits.remove,
+			children: item.value
+		}, item.id)), /* @__PURE__ */ jsx("span", {
+			ref: digitRef,
+			className: digits.changed ? "motion-safe:animate-field-count-in motion-reduce:animate-field-swap-fade-in" : void 0,
+			children: place.digit
+		}, place.digit)]
+	});
+}
+/** The count beside an unmet rule. It rolls digit by digit: arriving from below when the count grew, from above when it fell, and a gained or lost digit opens or closes its column. */
+function RollingCount({ value }) {
+	const [state, setState] = useState(() => ({
+		value,
+		direction: 1,
+		seq: 0,
+		places: toPlaces(value, 0, /* @__PURE__ */ new Map()),
+		gone: []
+	}));
+	let { places, gone, direction } = state;
+	if (state.value !== value) {
+		const seq = state.seq + 1;
+		direction = value > state.value ? 1 : -1;
+		places = toPlaces(value, seq, new Map(state.places.map((place) => [place.key, place])));
+		const kept = new Set(places.map((place) => place.key));
+		gone = [...state.gone.filter((place) => !kept.has(place.key)), ...state.places.filter((place) => !kept.has(place.key))];
+		setState({
+			value,
+			direction,
+			seq,
+			places,
+			gone
+		});
+	}
+	const finish = useCallback((key) => setState((current) => ({
+		...current,
+		gone: current.gone.filter((place) => place.key !== key)
+	})), []);
+	const all = [...places.map((place) => ({
+		place,
+		leaving: false
+	})), ...gone.map((place) => ({
+		place,
+		leaving: true
+	}))].sort((a, b) => b.place.key - a.place.key);
+	return /* @__PURE__ */ jsx("span", {
+		className: "inline-flex tabular-nums",
+		children: all.map(({ place, leaving }) => /* @__PURE__ */ jsx(PlaceColumn, {
+			place,
+			direction,
+			leaving,
+			onDone: finish
+		}, place.key))
+	});
+}
+/** One rule's tick: the tint grows under it while it draws from its short stroke; unchecking retracts it faster than it drew. */
+function RuleMark() {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": "true",
+		className: "field-rule-mark",
+		children: [/* @__PURE__ */ jsx("span", { className: "field-rule-fill" }), /* @__PURE__ */ jsx("svg", {
+			className: "field-rule-glyph",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.75,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M4.75 8.25 7 10.5l4.25-4.75",
+				pathLength: 1,
+				className: "field-rule-tick"
+			})
+		})]
+	});
+}
+/**
+* A new-password input with a strength meter and a checklist (see
+* {@link PasswordStrengthProps}).
+*/
+const PasswordStrength = forwardRef(function PasswordStrength({ label, value: valueProp, defaultValue = "", onValueChange, onChange, rules = defaultPasswordRules, error, revealed: revealedProp, onRevealedChange, messages: messagesProp, shortLength, countCharacters, className, ...props }, ref) {
+	const messages = {
+		...defaultPasswordStrengthMessages,
+		...messagesProp,
+		levels: {
+			...defaultPasswordStrengthMessages.levels,
+			...messagesProp?.levels
+		}
+	};
+	const options = {
+		...shortLength === void 0 ? {} : { shortLength },
+		levels: messages.levels,
+		...countCharacters === void 0 ? {} : { countCharacters }
+	};
+	const field = useFieldWiring({
+		enabled: true,
+		id: props.id,
+		describedBy: props["aria-describedby"],
+		invalid: props["aria-invalid"],
+		description: void 0,
+		error
+	});
+	const rulesId = `${field.controlId}-rules`;
+	const [internal, setInternal] = useState(defaultValue);
+	const value = valueProp ?? internal;
+	const [revealedInternal, setRevealedInternal] = useState(false);
+	const revealed = revealedProp ?? revealedInternal;
+	const strength = estimateStrength(value, rules, options);
+	const met = new Set(strength.met);
+	const rank = strength.short ? .5 : strength.level;
+	const metKey = strength.met.join(" ");
+	const [track, setTrack] = useState({
+		rank,
+		level: strength.level,
+		previousLevel: strength.level,
+		direction: 1,
+		metKey,
+		previousMet: metKey
+	});
+	if (track.rank !== rank || track.metKey !== metKey) setTrack({
+		rank,
+		level: strength.level,
+		previousLevel: track.rank !== rank ? track.level : track.previousLevel,
+		direction: track.rank === rank ? track.direction : rank > track.rank ? 1 : -1,
+		metKey,
+		previousMet: track.metKey !== metKey ? track.metKey : track.previousMet
+	});
+	const previousMet = new Set(track.previousMet.split(" ").filter(Boolean));
+	const changed = rules.filter((rule) => met.has(rule.id) !== previousMet.has(rule.id)).map((rule) => rule.id);
+	const [reveal, setReveal] = useState({
+		revealed,
+		changed: false
+	});
+	if (reveal.revealed !== revealed) setReveal({
+		revealed,
+		changed: true
+	});
+	const lastError = useRef(error);
+	const [shake, setShake] = useState(void 0);
+	useEffect(() => {
+		const previous = lastError.current;
+		lastError.current = error;
+		if (!error || error === previous) return;
+		setShake((current) => current === "a" ? "b" : "a");
+	}, [error]);
+	const summary = strength.level ? messages.summary({
+		label: strength.label,
+		met: strength.met.length,
+		total: rules.length
+	}) : "";
+	const disabled = Boolean(props.disabled);
+	const ariaInvalid = props["aria-invalid"];
+	const invalid = Boolean(error) || ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false";
+	const describedBy = [field.controlProps["aria-describedby"] ?? props["aria-describedby"], rulesId].filter(Boolean).join(" ");
+	function toggleReveal() {
+		if (revealedProp === void 0) setRevealedInternal(!revealed);
+		onRevealedChange?.(!revealed);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "password-strength",
+		"data-level": strength.level,
+		className: "grid min-w-0 font-sans [--tone:var(--color-border)] data-[level=1]:[--tone:var(--color-destructive-strong)] data-[level=2]:[--tone:var(--color-warning-strong)] data-[level=3]:[--tone:var(--color-success-strong)] data-[level=4]:[--tone:var(--color-success-strong)]",
+		children: [
+			/* @__PURE__ */ jsx(Label$1, {
+				htmlFor: field.controlId,
+				className: "mb-1.5",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				role: "presentation",
+				isDisabled: disabled,
+				isInvalid: invalid,
+				"data-shake": shake,
+				"data-slot": "password-strength-shell",
+				className: shellClass,
+				children: [/* @__PURE__ */ jsx(Input, {
+					autoComplete: "new-password",
+					autoCapitalize: "off",
+					autoCorrect: "off",
+					spellCheck: false,
+					...props,
+					ref,
+					...field.controlProps,
+					type: revealed ? "text" : "password",
+					value,
+					onChange: (event) => {
+						const next = event.target.value;
+						if (valueProp === void 0) setInternal(next);
+						onChange?.(event);
+						onValueChange?.(next, estimateStrength(next, rules, options));
+					},
+					"aria-describedby": describedBy,
+					"data-slot": "password-strength-input",
+					"data-reveal": reveal.changed ? revealed ? "shown" : "hidden" : void 0,
+					className: cn(inputClass, className)
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					isDisabled: disabled,
+					"aria-label": messages.showPassword,
+					"aria-pressed": revealed,
+					"aria-controls": field.controlId,
+					onPress: toggleReveal,
+					className: toggleClass,
+					children: /* @__PURE__ */ jsx(EyeMorph, {
+						slashed: revealed,
+						slashPath: "M3 3l18 18"
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldMessage, {
+				id: field.errorId,
+				text: error,
+				tone: "error",
+				copy: "swap"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-3 flex items-center gap-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "meter",
+					"aria-label": messages.meterLabel,
+					"aria-valuemin": 0,
+					"aria-valuemax": 4,
+					"aria-valuenow": strength.level,
+					"aria-valuetext": strength.level ? strength.label : messages.noPassword,
+					className: "grid min-w-0 flex-1 grid-cols-4 gap-1.25",
+					children: [
+						0,
+						1,
+						2,
+						3
+					].map((index) => {
+						const on = index < strength.level;
+						const wave = on ? index - track.previousLevel : track.previousLevel - 1 - index;
+						const delay = Math.max(0, wave) * (on ? .05 : .03);
+						return /* @__PURE__ */ jsx("span", {
+							className: "relative isolate h-1 overflow-hidden rounded-full bg-muted",
+							children: /* @__PURE__ */ jsx("span", {
+								"data-on": on || void 0,
+								style: { "--wave-delay": `${delay}s` },
+								className: "field-meter-fill absolute inset-0 rounded-[inherit]"
+							})
+						}, index);
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "field-strength-word text-sm font-medium text-foreground",
+					children: /* @__PURE__ */ jsx(SwapText, {
+						swapKey: strength.level ? strength.label : "",
+						dir: track.direction,
+						children: strength.label
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				id: rulesId,
+				"aria-label": messages.rulesLabel,
+				className: "mt-4 grid list-none gap-1.5 p-0",
+				children: rules.map((rule) => {
+					const ok = met.has(rule.id);
+					const remaining = value && !ok ? rule.remaining?.(value) ?? 0 : 0;
+					const order = changed.indexOf(rule.id);
+					return /* @__PURE__ */ jsxs("li", {
+						"data-met": ok || void 0,
+						style: { "--delay": `${order > 0 ? order * .05 : 0}s` },
+						className: "flex min-h-5 items-center gap-2.5 text-sm leading-(--leading-normal) text-muted-foreground data-[met]:text-foreground motion-safe:transition-colors motion-safe:duration-(--duration-standard) motion-safe:ease-settle",
+						children: [
+							/* @__PURE__ */ jsx(RuleMark, {}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "min-w-0",
+								children: [rule.label, /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: ok ? messages.ruleMet : messages.ruleNotMet
+								})]
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "relative ms-auto ps-2 text-xs whitespace-nowrap text-muted-foreground",
+								children: /* @__PURE__ */ jsx(SwapText, {
+									swapKey: remaining > 0 ? "remaining" : "",
+									dir: 1,
+									children: /* @__PURE__ */ jsxs("span", {
+										className: "field-count-text",
+										children: [
+											messages.remainingPrefix ? `${messages.remainingPrefix} ` : null,
+											/* @__PURE__ */ jsx(RollingCount, { value: remaining }),
+											messages.remainingSuffix ? ` ${messages.remainingSuffix}` : null
+										]
+									})
+								})
+							})
+						]
+					}, rule.id);
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				role: "status",
+				children: summary
+			})
+		]
+	});
+});
+//#endregion
+export { PasswordStrength, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength };
+
+//# sourceMappingURL=password-strength.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-strength.js","names":["Label","AriaGroup","AriaInput","AriaButton"],"sources":["../../src/password-strength/password-strength.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useEffect, useRef, useState, type CSSProperties } from \"react\";\nimport {\n  Button as AriaButton,\n  Group as AriaGroup,\n  Input as AriaInput,\n  type InputProps as AriaInputProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { EyeMorph } from \"../lib/eye-morph.js\";\nimport { FieldMessage } from \"../lib/field-message.js\";\nimport { useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\nimport {\n  prefersReducedMotion,\n  useExitBackstop,\n  useIsomorphicLayoutEffect,\n  useLeavingItems,\n} from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { Label } from \"../label/label.js\";\n\nexport interface PasswordRule {\n  id: string;\n  label: string;\n  test: (password: string) => boolean;\n  /** Characters still missing. Shown as a rolling count beside the rule while it is unmet. */\n  remaining?: (password: string) => number;\n}\n\nexport interface PasswordStrengthResult {\n  level: 0 | 1 | 2 | 3 | 4;\n  label: string;\n  met: string[];\n  /** True while the password is shorter than the short length, so the meter holds at its first step. */\n  short?: boolean;\n}\n\n/** The strength words, one per meter step. Override them to translate the meter. */\nexport interface PasswordStrengthLevels {\n  tooShort: string;\n  weak: string;\n  fair: string;\n  good: string;\n  strong: string;\n}\n\n/** Every user-facing string in PasswordStrength. All have English defaults; pass only the ones you change. */\nexport interface PasswordStrengthMessages {\n  levels: PasswordStrengthLevels;\n  /** Name of the show password toggle. It is a pressed toggle (aria-pressed), so the name stays the same in both states. */\n  showPassword: string;\n  /** Accessible name of the strength meter. */\n  meterLabel: string;\n  /** Meter value text while the field is empty. */\n  noPassword: string;\n  /** Accessible name of the requirements list. */\n  rulesLabel: string;\n  /** Read after a rule's label for screen readers, including any leading punctuation. */\n  ruleMet: string;\n  ruleNotMet: string;\n  /** Words around the rolling count beside an unmet rule, as in \"4 more\". */\n  remainingPrefix: string;\n  remainingSuffix: string;\n  /** The polite live-region summary read after each change. */\n  summary: (result: { label: string; met: number; total: number }) => string;\n}\n\nexport const defaultPasswordStrengthMessages: PasswordStrengthMessages = {\n  levels: { tooShort: \"Too short\", weak: \"Weak\", fair: \"Fair\", good: \"Good\", strong: \"Strong\" },\n  showPassword: \"Show password\",\n  meterLabel: \"Password strength\",\n  noPassword: \"No password yet\",\n  rulesLabel: \"Password requirements\",\n  ruleMet: \", met\",\n  ruleNotMet: \", not met\",\n  remainingPrefix: \"\",\n  remainingSuffix: \"more\",\n  summary: ({ label, met, total }) => `Strength: ${label}. ${met} of ${total} requirements met.`,\n};\n\n/** Partial messages, with partial strength words, for the `messages` prop. */\nexport type PasswordStrengthMessagesInput = Partial<Omit<PasswordStrengthMessages, \"levels\">> & {\n  levels?: Partial<PasswordStrengthLevels>;\n};\n\n/**\n * A new-password field that shows how strong the password is while it is typed:\n * four segments fill and change tone, each rule checks off with a drawn tick, and\n * the strength word swaps in place. Use it when creating or changing a password;\n * use `PasswordField` for sign in. Scoring happens on the device, nothing is sent\n * anywhere.\n *\n * Native input props apply to the input (`className` too); `disabled` also\n * disables the toggle, and `aria-invalid` gives the box its invalid border.\n *\n * @example\n * <PasswordStrength label=\"New password\" onValueChange={(value, strength) => save(value, strength.level)} />\n */\nexport interface PasswordStrengthProps extends Omit<\n  AriaInputProps,\n  \"className\" | \"style\" | \"size\" | \"type\" | \"value\" | \"defaultValue\" | \"children\"\n> {\n  /** Extra classes for the input. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /** The visible label, tied to the input with `htmlFor`. */\n  label: string;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string, strength: PasswordStrengthResult) => void;\n  /** Rules to check. Strength is the share of rules met, spread over four steps. */\n  rules?: PasswordRule[];\n  /**\n   * Error copy tied to the field. It is an alert, opens on a spring and swaps as a\n   * whole when it changes; the field shakes once each time a new error appears.\n   */\n  error?: string;\n  revealed?: boolean;\n  onRevealedChange?: (revealed: boolean) => void;\n  /** Translated or reworded copy. Every string has an English default; see PasswordStrengthMessages. */\n  messages?: PasswordStrengthMessagesInput;\n  /** Below this many characters the meter holds at its first step and reads \"Too short\". Defaults to 8. */\n  shortLength?: number;\n  /** How characters are counted for shortLength. Defaults to code points, so an emoji counts once; pass `password => password.length` to count UTF-16 units like a server might. */\n  countCharacters?: (password: string) => number;\n}\n\n/** Counts code points, so an emoji or other astral character counts as one. */\nexport const countCodePoints = (password: string) => Array.from(password).length;\n\n/** Labels for the built-in rules. `length` receives the minimum length. */\nexport interface PasswordRuleLabels {\n  length: (minLength: number) => string;\n  case: string;\n  number: string;\n  symbol: string;\n}\n\nexport interface PasswordRuleOptions {\n  /** Characters the length rule asks for. Defaults to 12. */\n  minLength?: number;\n  /** Translated or reworded rule labels. */\n  labels?: Partial<PasswordRuleLabels>;\n  /** How the length rule counts characters. Defaults to code points. */\n  countCharacters?: (password: string) => number;\n}\n\nconst defaultRuleLabels: PasswordRuleLabels = {\n  length: (minLength) => `At least ${minLength} characters`,\n  case: \"Upper and lowercase letters\",\n  number: \"At least one number\",\n  symbol: \"At least one symbol\",\n};\n\n/** The built-in rules (length, mixed case, number, symbol) with your own minimum length, labels and character count. */\nexport function createPasswordRules({\n  minLength = 12,\n  labels,\n  countCharacters = countCodePoints,\n}: PasswordRuleOptions = {}): PasswordRule[] {\n  const copy = { ...defaultRuleLabels, ...labels };\n  return [\n    {\n      id: \"length\",\n      label: copy.length(minLength),\n      test: (password) => countCharacters(password) >= minLength,\n      remaining: (password) => Math.max(0, minLength - countCharacters(password)),\n    },\n    {\n      id: \"case\",\n      label: copy.case,\n      test: (password) => /\\p{Ll}/u.test(password) && /\\p{Lu}/u.test(password),\n    },\n    { id: \"number\", label: copy.number, test: (password) => /\\p{N}/u.test(password) },\n    { id: \"symbol\", label: copy.symbol, test: (password) => /[^\\p{L}\\p{N}\\s]/u.test(password) },\n  ];\n}\n\nexport const defaultPasswordRules: PasswordRule[] = createPasswordRules();\n\nexport interface EstimateStrengthOptions {\n  /** Below this many characters a password stays at the first step, however varied it is. Defaults to 8. */\n  shortLength?: number;\n  /** Strength words for the result's label. */\n  levels?: Partial<PasswordStrengthLevels>;\n  /** How characters are counted for shortLength. Defaults to code points. */\n  countCharacters?: (password: string) => number;\n}\n\n/** Scores a password on the device: one step per share of rules met, capped at the first step while it is shorter than the short length (8 by default). */\nexport function estimateStrength(\n  password: string,\n  rules: PasswordRule[] = defaultPasswordRules,\n  { shortLength = 8, levels, countCharacters = countCodePoints }: EstimateStrengthOptions = {},\n): PasswordStrengthResult {\n  if (!password) return { level: 0, label: \"\", met: [] };\n  const words = { ...defaultPasswordStrengthMessages.levels, ...levels };\n  const met = rules.filter((rule) => rule.test(password)).map((rule) => rule.id);\n  if (countCharacters(password) < shortLength)\n    return { level: 1, label: words.tooShort, met, short: true };\n  const level = Math.min(\n    4,\n    Math.max(1, Math.round((met.length / Math.max(rules.length, 1)) * 4)),\n  ) as 1 | 2 | 3 | 4;\n  return {\n    level,\n    label: [words.weak, words.fair, words.good, words.strong][level - 1] ?? words.weak,\n    met,\n  };\n}\n\n/**\n * The field's box: a React Aria `Group` with the shared field surface (see\n * PasswordField for why a Group and for `data-focus-within`). Hover darkens the\n * border only to `muted-foreground`, as the reference does here, and a new error\n * shakes the box (two animation names, so each restart plays).\n */\nconst shellClass = cn(\n  fieldSurfaceVariants(),\n  \"flex items-center gap-1 h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [--field-toggle-size:calc(var(--spacing)*8.5)] [&:where([data-focus-within])]:border-foreground data-[hovered]:not-data-[disabled]:not-data-[focus-within]:not-data-[invalid]:border-muted-foreground motion-safe:data-[shake=a]:animate-field-shake-a motion-safe:data-[shake=b]:animate-field-shake-b\",\n);\n\nconst inputClass =\n  \"min-w-0 flex-1 border-0 bg-transparent p-0 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed motion-safe:data-[reveal=shown]:animate-field-reveal-shown motion-safe:data-[reveal=hidden]:animate-field-reveal-hidden\";\n\nconst toggleClass =\n  \"field-toggle-button grid size-(--field-toggle-size) flex-none cursor-pointer place-items-center rounded-md border-0 bg-transparent p-0 text-muted-foreground [--press-scale:.94] [-webkit-tap-highlight-color:transparent] outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground aria-pressed:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed\";\n\ninterface Place {\n  /** Place value, so 10 to 9 lets the tens column close while the ones column turns. */\n  key: number;\n  digit: string;\n  seq: number;\n}\n\nconst toPlaces = (value: number, seq: number, previous: Map<number, Place>): Place[] => {\n  const digits = String(value).split(\"\");\n  return digits.map((digit, index) => {\n    const key = digits.length - 1 - index;\n    return { key, digit, seq: previous.get(key)?.seq ?? seq };\n  });\n};\n\nfunction LeavingDigit({\n  id,\n  rect,\n  onDone,\n  children,\n}: {\n  id: number;\n  rect: { left: number; top: number; width: number; height: number };\n  onDone: (id: number) => void;\n  children: string;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      style={rect}\n      className=\"absolute motion-safe:animate-field-count-out motion-reduce:animate-fade-out\"\n    >\n      {children}\n    </span>\n  );\n}\n\nfunction PlaceColumn({\n  place,\n  direction,\n  leaving,\n  onDone,\n}: {\n  place: Place;\n  direction: number;\n  leaving: boolean;\n  onDone: (key: number) => void;\n}) {\n  const digitRef = useRef<HTMLSpanElement>(null);\n  const digits = useLeavingItems(place.digit, place.digit, () => digitRef.current);\n  const done = useCallback(() => onDone(place.key), [onDone, place.key]);\n  useExitBackstop(leaving, done, 900);\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) done();\n  }, [leaving, done]);\n  return (\n    <span\n      style={{ \"--roll\": direction } as CSSProperties}\n      onAnimationEnd={(event) => {\n        if (\n          leaving &&\n          event.target === event.currentTarget &&\n          event.animationName === \"field-column-shrink\"\n        )\n          done();\n      }}\n      className={cn(\n        \"field-number-column overflow-x-clip\",\n        leaving\n          ? \"motion-safe:animate-field-column-out\"\n          : place.seq > 0 && \"motion-safe:animate-field-column-in\",\n      )}\n    >\n      {digits.leaving.map((item) => (\n        <LeavingDigit key={item.id} id={item.id} rect={item.rect} onDone={digits.remove}>\n          {item.value}\n        </LeavingDigit>\n      ))}\n      <span\n        key={place.digit}\n        ref={digitRef}\n        className={\n          digits.changed\n            ? \"motion-safe:animate-field-count-in motion-reduce:animate-field-swap-fade-in\"\n            : undefined\n        }\n      >\n        {place.digit}\n      </span>\n    </span>\n  );\n}\n\n/** The count beside an unmet rule. It rolls digit by digit: arriving from below when the count grew, from above when it fell, and a gained or lost digit opens or closes its column. */\nfunction RollingCount({ value }: { value: number }) {\n  const [state, setState] = useState(() => ({\n    value,\n    direction: 1,\n    seq: 0,\n    places: toPlaces(value, 0, new Map<number, Place>()),\n    gone: [] as Place[],\n  }));\n  let { places, gone, direction } = state;\n  if (state.value !== value) {\n    const seq = state.seq + 1;\n    direction = value > state.value ? 1 : -1;\n    places = toPlaces(value, seq, new Map(state.places.map((place) => [place.key, place])));\n    const kept = new Set(places.map((place) => place.key));\n    gone = [\n      ...state.gone.filter((place) => !kept.has(place.key)),\n      ...state.places.filter((place) => !kept.has(place.key)),\n    ];\n    setState({ value, direction, seq, places, gone });\n  }\n  const finish = useCallback(\n    (key: number) =>\n      setState((current) => ({\n        ...current,\n        gone: current.gone.filter((place) => place.key !== key),\n      })),\n    [],\n  );\n  const all = [\n    ...places.map((place) => ({ place, leaving: false })),\n    ...gone.map((place) => ({ place, leaving: true })),\n  ].sort((a, b) => b.place.key - a.place.key);\n  return (\n    <span className=\"inline-flex tabular-nums\">\n      {all.map(({ place, leaving }) => (\n        <PlaceColumn\n          key={place.key}\n          place={place}\n          direction={direction}\n          leaving={leaving}\n          onDone={finish}\n        />\n      ))}\n    </span>\n  );\n}\n\n/** One rule's tick: the tint grows under it while it draws from its short stroke; unchecking retracts it faster than it drew. */\nfunction RuleMark() {\n  return (\n    <span aria-hidden=\"true\" className=\"field-rule-mark\">\n      <span className=\"field-rule-fill\" />\n      <svg\n        className=\"field-rule-glyph\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={1.75}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"M4.75 8.25 7 10.5l4.25-4.75\" pathLength={1} className=\"field-rule-tick\" />\n      </svg>\n    </span>\n  );\n}\n\n/**\n * A new-password input with a strength meter and a checklist (see\n * {@link PasswordStrengthProps}).\n */\nexport const PasswordStrength = forwardRef<HTMLInputElement, PasswordStrengthProps>(\n  function PasswordStrength(\n    {\n      label,\n      value: valueProp,\n      defaultValue = \"\",\n      onValueChange,\n      onChange,\n      rules = defaultPasswordRules,\n      error,\n      revealed: revealedProp,\n      onRevealedChange,\n      messages: messagesProp,\n      shortLength,\n      countCharacters,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const messages: PasswordStrengthMessages = {\n      ...defaultPasswordStrengthMessages,\n      ...messagesProp,\n      levels: { ...defaultPasswordStrengthMessages.levels, ...messagesProp?.levels },\n    };\n    const options: EstimateStrengthOptions = {\n      ...(shortLength === undefined ? {} : { shortLength }),\n      levels: messages.levels,\n      ...(countCharacters === undefined ? {} : { countCharacters }),\n    };\n    const field = useFieldWiring({\n      enabled: true,\n      id: props.id,\n      describedBy: props[\"aria-describedby\"],\n      invalid: props[\"aria-invalid\"],\n      description: undefined,\n      error,\n    });\n    const rulesId = `${field.controlId}-rules`;\n    const [internal, setInternal] = useState(defaultValue);\n    const value = valueProp ?? internal;\n    const [revealedInternal, setRevealedInternal] = useState(false);\n    const revealed = revealedProp ?? revealedInternal;\n    const strength = estimateStrength(value, rules, options);\n    const met = new Set(strength.met);\n\n    // The previous level and rule states tell which way the word moves and which segments and ticks join a staggered wave.\n    const rank = strength.short ? 0.5 : strength.level;\n    const metKey = strength.met.join(\" \");\n    const [track, setTrack] = useState({\n      rank,\n      level: strength.level,\n      previousLevel: strength.level,\n      direction: 1,\n      metKey,\n      previousMet: metKey,\n    });\n    if (track.rank !== rank || track.metKey !== metKey) {\n      setTrack({\n        rank,\n        level: strength.level,\n        previousLevel: track.rank !== rank ? track.level : track.previousLevel,\n        direction: track.rank === rank ? track.direction : rank > track.rank ? 1 : -1,\n        metKey,\n        previousMet: track.metKey !== metKey ? track.metKey : track.previousMet,\n      });\n    }\n    const previousMet = new Set(track.previousMet.split(\" \").filter(Boolean));\n    const changed = rules\n      .filter((rule) => met.has(rule.id) !== previousMet.has(rule.id))\n      .map((rule) => rule.id);\n\n    // Only a change after mount resolves the text, so the field never blurs in on first paint.\n    const [reveal, setReveal] = useState({ revealed, changed: false });\n    if (reveal.revealed !== revealed) setReveal({ revealed, changed: true });\n\n    // A new error shakes the box once. The animation name alternates, held in state, so each one restarts it.\n    const lastError = useRef(error);\n    const [shake, setShake] = useState<\"a\" | \"b\" | undefined>(undefined);\n    useEffect(() => {\n      const previous = lastError.current;\n      lastError.current = error;\n      if (!error || error === previous) return;\n      setShake((current) => (current === \"a\" ? \"b\" : \"a\"));\n    }, [error]);\n\n    // The live region speaks only when the level or the count of met rules changes, not on every keystroke.\n    const summary = strength.level\n      ? messages.summary({\n          label: strength.label,\n          met: strength.met.length,\n          total: rules.length,\n        })\n      : \"\";\n\n    const disabled = Boolean(props.disabled);\n    const ariaInvalid = props[\"aria-invalid\"];\n    const invalid =\n      Boolean(error) ||\n      (ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== \"false\");\n    const describedBy = [\n      field.controlProps[\"aria-describedby\"] ?? props[\"aria-describedby\"],\n      rulesId,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    function toggleReveal() {\n      if (revealedProp === undefined) setRevealedInternal(!revealed);\n      onRevealedChange?.(!revealed);\n    }\n\n    return (\n      <div\n        data-slot=\"password-strength\"\n        data-level={strength.level}\n        className=\"grid min-w-0 font-sans [--tone:var(--color-border)] data-[level=1]:[--tone:var(--color-destructive-strong)] data-[level=2]:[--tone:var(--color-warning-strong)] data-[level=3]:[--tone:var(--color-success-strong)] data-[level=4]:[--tone:var(--color-success-strong)]\"\n      >\n        <Label htmlFor={field.controlId} className=\"mb-1.5\">\n          {label}\n        </Label>\n        <AriaGroup\n          role=\"presentation\"\n          isDisabled={disabled}\n          isInvalid={invalid}\n          data-shake={shake}\n          data-slot=\"password-strength-shell\"\n          className={shellClass}\n        >\n          <AriaInput\n            autoComplete=\"new-password\"\n            autoCapitalize=\"off\"\n            autoCorrect=\"off\"\n            spellCheck={false}\n            {...props}\n            ref={ref}\n            {...field.controlProps}\n            type={revealed ? \"text\" : \"password\"}\n            value={value}\n            onChange={(event) => {\n              const next = event.target.value;\n              if (valueProp === undefined) setInternal(next);\n              onChange?.(event);\n              onValueChange?.(next, estimateStrength(next, rules, options));\n            }}\n            aria-describedby={describedBy}\n            data-slot=\"password-strength-input\"\n            data-reveal={reveal.changed ? (revealed ? \"shown\" : \"hidden\") : undefined}\n            className={cn(inputClass, className)}\n          />\n          <AriaButton\n            type=\"button\"\n            isDisabled={disabled}\n            aria-label={messages.showPassword}\n            aria-pressed={revealed}\n            aria-controls={field.controlId}\n            onPress={toggleReveal}\n            className={toggleClass}\n          >\n            <EyeMorph slashed={revealed} slashPath=\"M3 3l18 18\" />\n          </AriaButton>\n        </AriaGroup>\n        <FieldMessage id={field.errorId} text={error} tone=\"error\" copy=\"swap\" />\n        <div className=\"mt-3 flex items-center gap-3\">\n          <div\n            role=\"meter\"\n            aria-label={messages.meterLabel}\n            aria-valuemin={0}\n            aria-valuemax={4}\n            aria-valuenow={strength.level}\n            aria-valuetext={strength.level ? strength.label : messages.noPassword}\n            className=\"grid min-w-0 flex-1 grid-cols-4 gap-1.25\"\n          >\n            {[0, 1, 2, 3].map((index) => {\n              const on = index < strength.level;\n              // A pasted password fills left to right; clearing empties right to left.\n              const wave = on ? index - track.previousLevel : track.previousLevel - 1 - index;\n              const delay = Math.max(0, wave) * (on ? 0.05 : 0.03);\n              return (\n                <span\n                  key={index}\n                  className=\"relative isolate h-1 overflow-hidden rounded-full bg-muted\"\n                >\n                  <span\n                    data-on={on || undefined}\n                    style={{ \"--wave-delay\": `${delay}s` } as CSSProperties}\n                    className=\"field-meter-fill absolute inset-0 rounded-[inherit]\"\n                  />\n                </span>\n              );\n            })}\n          </div>\n          <span\n            aria-hidden=\"true\"\n            className=\"field-strength-word text-sm font-medium text-foreground\"\n          >\n            <SwapText swapKey={strength.level ? strength.label : \"\"} dir={track.direction}>\n              {strength.label}\n            </SwapText>\n          </span>\n        </div>\n        <ul\n          id={rulesId}\n          aria-label={messages.rulesLabel}\n          className=\"mt-4 grid list-none gap-1.5 p-0\"\n        >\n          {rules.map((rule) => {\n            const ok = met.has(rule.id);\n            const remaining = value && !ok ? (rule.remaining?.(value) ?? 0) : 0;\n            const order = changed.indexOf(rule.id);\n            return (\n              <li\n                key={rule.id}\n                data-met={ok || undefined}\n                style={{ \"--delay\": `${order > 0 ? order * 0.05 : 0}s` } as CSSProperties}\n                className=\"flex min-h-5 items-center gap-2.5 text-sm leading-(--leading-normal) text-muted-foreground data-[met]:text-foreground motion-safe:transition-colors motion-safe:duration-(--duration-standard) motion-safe:ease-settle\"\n              >\n                <RuleMark />\n                <span className=\"min-w-0\">\n                  {rule.label}\n                  <span className=\"sr-only\">{ok ? messages.ruleMet : messages.ruleNotMet}</span>\n                </span>\n                <span\n                  aria-hidden=\"true\"\n                  className=\"relative ms-auto ps-2 text-xs whitespace-nowrap text-muted-foreground\"\n                >\n                  <SwapText swapKey={remaining > 0 ? \"remaining\" : \"\"} dir={1}>\n                    <span className=\"field-count-text\">\n                      {messages.remainingPrefix ? `${messages.remainingPrefix} ` : null}\n                      <RollingCount value={remaining} />\n                      {messages.remainingSuffix ? ` ${messages.remainingSuffix}` : null}\n                    </span>\n                  </SwapText>\n                </span>\n              </li>\n            );\n          })}\n        </ul>\n        <span className=\"sr-only\" role=\"status\">\n          {summary}\n        </span>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/popover/popover.d.ts

@@ -1,5 +1,5 @@
-import { DialogTrigger as PopoverTrigger, PopoverProps } from "react-aria-components";
 import { ReactNode } from "react";
+import { DialogTrigger as PopoverTrigger, PopoverProps } from "react-aria-components";
 //#region src/popover/popover.d.ts
 /**
  * Popover, ported from the legacy shadcn/Radix component.
@@ -43,8 +43,16 @@ interface PopoverProps$1 extends Omit<PopoverProps, "className" | "style" | "chi
    * @default "bottom"
    */
   placement?: PopoverProps["placement"];
+  /**
+   * How it comes in: `rise` grows out of the trigger (offset toward it, a little
+   * small, then settles on a spring) and leaves quicker; `none` leaves the entrance
+   * to the caller, as a picker that animates its own popover does.
+   *
+   * @default "rise"
+   */
+  entrance?: "rise" | "none";
 }
-declare function Popover$1({ children, className, placement, offset, ...props }: PopoverProps$1): import("react").JSX.Element;
+declare const Popover$1: import("react").ForwardRefExoticComponent<PopoverProps$1 & import("react").RefAttributes<HTMLElement>>;
 //#endregion
 export { Popover$1 as Popover, PopoverProps$1 as PopoverProps, PopoverTrigger };
 //# sourceMappingURL=popover.d.ts.map

package/dist/popover/popover.js

@@ -1,6 +1,7 @@
 "use client";
-import { cn } from "../lib/cn.js";
+import { cnAll } from "../lib/cn.js";
 import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
 import { DialogTrigger as PopoverTrigger, Popover } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
 //#region src/popover/popover.tsx
@@ -30,16 +31,17 @@ const popoverVariants = cva([
 	"box-border font-sans text-sm leading-(--leading-normal)",
 	"outline-none"
 ]);
-function Popover$1({ children, className, placement = "bottom", offset = 4, ...props }) {
+const Popover$1 = forwardRef(function Popover$2({ children, className, placement = "bottom", offset = 4, entrance = "rise", ...props }, ref) {
 	return /* @__PURE__ */ jsx(Popover, {
+		ref,
 		...props,
 		placement,
 		offset,
 		"data-slot": "popover",
-		className: cn(popoverVariants(), className),
+		className: cnAll(popoverVariants(), entrance === "rise" && "popover-motion", className),
 		children
 	});
-}
+});
 //#endregion
 export { Popover$1 as Popover, PopoverTrigger, popoverVariants };
 

package/dist/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["Popover","AriaPopover"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n  Popover as AriaPopover,\n  type PopoverProps as AriaPopoverProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Popover, ported from the legacy shadcn/Radix component.\n *\n * Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`\n * twice, `align=\"start\"` once. `PopoverAnchor` is exported by the legacy\n * and imported by nobody, so it is not ported; neither are `side`,\n * `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,\n * `collisionPadding` or `avoidCollisions` -- zero call sites each. Both\n * existing uses are uncontrolled.\n *\n * IT GAINS AN ACCESSIBLE NAME. The legacy renders `role=\"dialog\"` with no\n * `aria-label` and no `aria-labelledby`, so both call sites announce an\n * unnamed dialog. React Aria labels the popover from its trigger\n * automatically once the two are paired, which is the only way to build\n * one here.\n *\n * The surface is `card`: in the legacy theme `--popover` is byte-identical\n * to `--card` in both themes, so the role the migration plan proposed\n * already exists under another name.\n */\nexport const popoverVariants = cva([\n  // w-72 (288px) is the legacy default width, as a spacing-scale step.\n  \"w-72 rounded-md border-(length:--border-width) border-border p-4\",\n  \"bg-card text-card-foreground shadow-floating\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load\n  // none: an unstyled document renders text in a serif, and content-box\n  // would add the 16px padding on top of the width.\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n  // React Aria gives the popover tabindex=-1 and focuses it on open, so it\n  // can take a focus ring it does not want.\n  \"outline-none\",\n]);\n\n/**\n * Content anchored to a trigger.\n *\n * @example\n * <PopoverTrigger>\n *   <Button>Pick a date</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverTrigger>\n */\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens, as React Aria's single `placement` string. The legacy\n   * split this across `side` and `align`; its one non-default call site is\n   * `align=\"start\"`, which is `\"bottom start\"` here.\n   *\n   * @default \"bottom\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n}\n\nexport function Popover({\n  children,\n  className,\n  placement = \"bottom\",\n  offset = 4,\n  ...props\n}: PopoverProps) {\n  return (\n    <AriaPopover\n      {...props}\n      placement={placement}\n      offset={offset}\n      data-slot=\"popover\"\n      className={cn(popoverVariants(), className)}\n    >\n      {/*\n        No inner Dialog. Wrapping the content in one is the common React\n        Aria idiom and it was in the first draft here -- but deleting it\n        broke no assertion, so it was doing nothing: a Popover under a\n        DialogTrigger already gets role=\"dialog\", a focus scope, and\n        aria-labelledby pointing at the trigger. The wrapper was one more\n        element and one more className to explain.\n      */}\n      {children}\n    </AriaPopover>\n  );\n}\n\n/**\n * Pairs a trigger with a popover and owns the open state.\n *\n * React Aria's `DialogTrigger`, renamed for the migration: it takes the\n * trigger element directly as its first child, which is what `asChild` was\n * doing on both legacy call sites.\n */\nexport { DialogTrigger as PopoverTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,kBAAkB,IAAI;CAEjC;CACA;CAIA;CAGA;AACF,CAAC;AA0BD,SAAgBA,UAAQ,EACtB,UACA,WACA,YAAY,UACZ,SAAS,GACT,GAAG,SACY;CACf,OACE,oBAACC,SAAD;EACE,GAAI;EACO;EACH;EACR,aAAU;EACV,WAAW,GAAG,gBAAgB,GAAG,SAAS;EAUzC;CACU,CAAA;AAEjB"}
+{"version":3,"file":"popover.js","names":["Popover","AriaPopover"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Popover as AriaPopover,\n  type PopoverProps as AriaPopoverProps,\n} from \"react-aria-components\";\n\nimport { cnAll } from \"../lib/cn.js\";\n\n/**\n * Popover, ported from the legacy shadcn/Radix component.\n *\n * Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`\n * twice, `align=\"start\"` once. `PopoverAnchor` is exported by the legacy\n * and imported by nobody, so it is not ported; neither are `side`,\n * `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,\n * `collisionPadding` or `avoidCollisions` -- zero call sites each. Both\n * existing uses are uncontrolled.\n *\n * IT GAINS AN ACCESSIBLE NAME. The legacy renders `role=\"dialog\"` with no\n * `aria-label` and no `aria-labelledby`, so both call sites announce an\n * unnamed dialog. React Aria labels the popover from its trigger\n * automatically once the two are paired, which is the only way to build\n * one here.\n *\n * The surface is `card`: in the legacy theme `--popover` is byte-identical\n * to `--card` in both themes, so the role the migration plan proposed\n * already exists under another name.\n */\nexport const popoverVariants = cva([\n  // w-72 (288px) is the legacy default width, as a spacing-scale step.\n  \"w-72 rounded-md border-(length:--border-width) border-border p-4\",\n  \"bg-card text-card-foreground shadow-floating\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load\n  // none: an unstyled document renders text in a serif, and content-box\n  // would add the 16px padding on top of the width.\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n  // React Aria gives the popover tabindex=-1 and focuses it on open, so it\n  // can take a focus ring it does not want.\n  \"outline-none\",\n]);\n\n/**\n * Content anchored to a trigger.\n *\n * @example\n * <PopoverTrigger>\n *   <Button>Pick a date</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverTrigger>\n */\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens, as React Aria's single `placement` string. The legacy\n   * split this across `side` and `align`; its one non-default call site is\n   * `align=\"start\"`, which is `\"bottom start\"` here.\n   *\n   * @default \"bottom\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n  /**\n   * How it comes in: `rise` grows out of the trigger (offset toward it, a little\n   * small, then settles on a spring) and leaves quicker; `none` leaves the entrance\n   * to the caller, as a picker that animates its own popover does.\n   *\n   * @default \"rise\"\n   */\n  entrance?: \"rise\" | \"none\";\n}\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(function Popover(\n  { children, className, placement = \"bottom\", offset = 4, entrance = \"rise\", ...props },\n  ref,\n) {\n  return (\n    <AriaPopover\n      ref={ref}\n      {...props}\n      placement={placement}\n      offset={offset}\n      data-slot=\"popover\"\n      className={cnAll(popoverVariants(), entrance === \"rise\" && \"popover-motion\", className)}\n    >\n      {/*\n        No inner Dialog. Wrapping the content in one is the common React\n        Aria idiom and it was in the first draft here -- but deleting it\n        broke no assertion, so it was doing nothing: a Popover under a\n        DialogTrigger already gets role=\"dialog\", a focus scope, and\n        aria-labelledby pointing at the trigger. The wrapper was one more\n        element and one more className to explain.\n      */}\n      {children}\n    </AriaPopover>\n  );\n});\n\n/**\n * Pairs a trigger with a popover and owns the open state.\n *\n * React Aria's `DialogTrigger`, renamed for the migration: it takes the\n * trigger element directly as its first child, which is what `asChild` was\n * doing on both legacy call sites.\n */\nexport { DialogTrigger as PopoverTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,kBAAkB,IAAI;CAEjC;CACA;CAIA;CAGA;AACF,CAAC;AAkCD,MAAaA,YAAU,WAAsC,SAASA,UACpE,EAAE,UAAU,WAAW,YAAY,UAAU,SAAS,GAAG,WAAW,QAAQ,GAAG,SAC/E,KACA;CACA,OACE,oBAACC,SAAD;EACO;EACL,GAAI;EACO;EACH;EACR,aAAU;EACV,WAAW,MAAM,gBAAgB,GAAG,aAAa,UAAU,kBAAkB,SAAS;EAUrF;CACU,CAAA;AAEjB,CAAC"}

package/dist/progress/progress.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from "class-variance-authority";
-import { ProgressBarProps } from "react-aria-components";
 import { ReactNode } from "react";
+import { ProgressBarProps } from "react-aria-components";
 //#region src/progress/progress.d.ts
 /**
  * Progress, ported from the legacy shadcn/Radix component.
@@ -77,6 +77,6 @@ export interface ProgressProps extends Omit<ProgressBarProps, "className" | "sty
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
 }
-export declare function Progress({ label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props }: ProgressProps): import("react").JSX.Element;
+export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
 //# sourceMappingURL=progress.d.ts.map