@seekalfred/primitives 0.5.1 → 0.6.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-field.js","names":["AriaGroup","AriaInput","AriaButton"],"sources":["../../src/password-field/password-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useState } 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 { FieldShell, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/** The toggle's accessible names. Both have English defaults; pass the ones you translate. */\nexport interface PasswordFieldMessages {\n  showPassword: string;\n  hidePassword: string;\n}\n\nexport const defaultPasswordFieldMessages: PasswordFieldMessages = {\n  showPassword: \"Show password\",\n  hidePassword: \"Hide password\",\n};\n\n/**\n * The field's box. A React Aria `Group` rather than the input, because the\n * toggle sits inside the same border: it carries the shared field surface (the\n * 160ms border transition, the darker border on hover and focus, the muted\n * disabled look, the invalid border) and the input inside is borderless.\n *\n * `data-focus-within` darkens the border too. A Group reports focus-visible\n * from the input modality, so a mouse click into the input, or onto the toggle,\n * would otherwise leave the border pale; a plain Input is different because\n * React Aria treats a text input as always keyboard-focused.\n */\nconst shellClass = cn(\n  fieldSurfaceVariants(),\n  \"flex items-center h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [&:where([data-focus-within])]:border-foreground\",\n);\n\n/** The input inside the box: no border, no fill, no outline of its own. */\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-7.5 flex-none cursor-pointer place-items-center rounded-md border-0 bg-transparent p-0 text-muted-foreground 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\nexport interface PasswordFieldProps extends Omit<\n  AriaInputProps,\n  \"className\" | \"style\" | \"size\" | \"type\"\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  /**\n   * Helper text under the field, named by `aria-describedby`. A string, because\n   * the copy is animated word by word: it opens on a spring when it appears\n   * after mount and changed words rise in. Nothing animates on first render.\n   */\n  description?: string;\n  /** Translated or reworded toggle names. */\n  messages?: Partial<PasswordFieldMessages>;\n}\n\n/**\n * A password input with a show and hide toggle. Switching resolves the text in\n * place from a soft blur, and the eye is one outline that a slash draws across.\n * Native input props apply to the input; `disabled` also disables the toggle,\n * and `aria-invalid` gives the box its invalid border.\n *\n * The toggle's name changes with the state and it is also `aria-pressed`, so a\n * screen reader may announce both (\"Hide password, pressed\").\n *\n * @example\n * <PasswordField label=\"Password\" description=\"At least eight characters.\" />\n */\nexport const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  function PasswordField({ label, description, messages: messagesProp, className, ...props }, ref) {\n    const messages = { ...defaultPasswordFieldMessages, ...messagesProp };\n    const [visible, setVisible] = useState(false);\n    // data-reveal only appears after the first toggle, so the animation runs on each change but never on mount.\n    const [toggled, setToggled] = useState(false);\n    const field = useFieldWiring({\n      enabled: true,\n      id: props.id,\n      describedBy: props[\"aria-describedby\"],\n      invalid: props[\"aria-invalid\"],\n      description,\n      error: undefined,\n    });\n    const disabled = Boolean(props.disabled);\n    const ariaInvalid = props[\"aria-invalid\"];\n    const invalid = ariaInvalid !== undefined && ariaInvalid !== false && ariaInvalid !== \"false\";\n\n    const control = (\n      <AriaGroup\n        role=\"presentation\"\n        isDisabled={disabled}\n        isInvalid={invalid}\n        data-slot=\"password-field-shell\"\n        className={shellClass}\n      >\n        <AriaInput\n          ref={ref}\n          {...props}\n          {...field.controlProps}\n          type={visible ? \"text\" : \"password\"}\n          data-slot=\"password-field\"\n          data-reveal={toggled ? (visible ? \"shown\" : \"hidden\") : undefined}\n          className={cn(inputClass, className)}\n        />\n        <AriaButton\n          type=\"button\"\n          isDisabled={disabled}\n          aria-label={visible ? messages.hidePassword : messages.showPassword}\n          aria-pressed={visible}\n          onPress={() => {\n            setVisible((current) => !current);\n            setToggled(true);\n          }}\n          className={toggleClass}\n        >\n          <EyeMorph slashed={visible} />\n        </AriaButton>\n      </AriaGroup>\n    );\n\n    if (!field.active) return control;\n    return (\n      <FieldShell\n        label={label}\n        controlId={field.controlId}\n        description={description}\n        hintId={field.hintId}\n        error={undefined}\n        errorId={undefined}\n        wordExit=\"sharp\"\n        numbers={false}\n      >\n        {control}\n      </FieldShell>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;AAqBA,MAAa,+BAAsD;CACjE,cAAc;CACd,cAAc;AAChB;;;;;;;;;;;;AAaA,MAAM,aAAa,GACjB,qBAAqB,GACrB,gJACF;;AAGA,MAAM,aACJ;AAEF,MAAM,cACJ;;;;;;;;;;;;;AAgCF,MAAa,gBAAgB,WAC3B,SAAS,cAAc,EAAE,OAAO,aAAa,UAAU,cAAc,WAAW,GAAG,SAAS,KAAK;CAC/F,MAAM,WAAW;EAAE,GAAG;EAA8B,GAAG;CAAa;CACpE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,QAAQ,eAAe;EAC3B,SAAS;EACT,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA,OAAO,KAAA;CACT,CAAC;CACD,MAAM,WAAW,QAAQ,MAAM,QAAQ;CACvC,MAAM,cAAc,MAAM;CAG1B,MAAM,UACJ,qBAACA,OAAD;EACE,MAAK;EACL,YAAY;EACZ,WANY,gBAAgB,KAAA,KAAa,gBAAgB,SAAS,gBAAgB;EAOlF,aAAU;EACV,WAAW;EALb,UAAA,CAOE,oBAACC,OAAD;GACO;GACL,GAAI;GACJ,GAAI,MAAM;GACV,MAAM,UAAU,SAAS;GACzB,aAAU;GACV,eAAa,UAAW,UAAU,UAAU,WAAY,KAAA;GACxD,WAAW,GAAG,YAAY,SAAS;EACpC,CAAA,GACD,oBAACC,QAAD;GACE,MAAK;GACL,YAAY;GACZ,cAAY,UAAU,SAAS,eAAe,SAAS;GACvD,gBAAc;GACd,eAAe;IACb,YAAY,YAAY,CAAC,OAAO;IAChC,WAAW,IAAI;GACjB;GACA,WAAW;GAEX,UAAA,oBAAC,UAAD,EAAU,SAAS,QAAU,CAAA;EACnB,CAAA,CACH;;CAGb,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACd,OAAO,KAAA;EACP,SAAS,KAAA;EACT,UAAS;EACT,SAAS;EAER,UAAA;CACS,CAAA;AAEhB,CACF"}

package/dist/password-strength/index.d.ts

@@ -0,0 +1,2 @@
+import { EstimateStrengthOptions, PasswordRule, PasswordRuleLabels, PasswordRuleOptions, PasswordStrength, PasswordStrengthLevels, PasswordStrengthMessages, PasswordStrengthMessagesInput, PasswordStrengthProps, PasswordStrengthResult, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength.js";
+export { type EstimateStrengthOptions, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength };

package/dist/password-strength/index.js

@@ -0,0 +1,2 @@
+import { PasswordStrength, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength } from "./password-strength.js";
+export { PasswordStrength, countCodePoints, createPasswordRules, defaultPasswordRules, defaultPasswordStrengthMessages, estimateStrength };

package/dist/password-strength/password-strength.d.ts

@@ -0,0 +1,127 @@
+import { InputProps } from "react-aria-components";
+//#region src/password-strength/password-strength.d.ts
+export interface PasswordRule {
+  id: string;
+  label: string;
+  test: (password: string) => boolean;
+  /** Characters still missing. Shown as a rolling count beside the rule while it is unmet. */
+  remaining?: (password: string) => number;
+}
+export interface PasswordStrengthResult {
+  level: 0 | 1 | 2 | 3 | 4;
+  label: string;
+  met: string[];
+  /** True while the password is shorter than the short length, so the meter holds at its first step. */
+  short?: boolean;
+}
+/** The strength words, one per meter step. Override them to translate the meter. */
+export interface PasswordStrengthLevels {
+  tooShort: string;
+  weak: string;
+  fair: string;
+  good: string;
+  strong: string;
+}
+/** Every user-facing string in PasswordStrength. All have English defaults; pass only the ones you change. */
+export interface PasswordStrengthMessages {
+  levels: PasswordStrengthLevels;
+  /** Name of the show password toggle. It is a pressed toggle (aria-pressed), so the name stays the same in both states. */
+  showPassword: string;
+  /** Accessible name of the strength meter. */
+  meterLabel: string;
+  /** Meter value text while the field is empty. */
+  noPassword: string;
+  /** Accessible name of the requirements list. */
+  rulesLabel: string;
+  /** Read after a rule's label for screen readers, including any leading punctuation. */
+  ruleMet: string;
+  ruleNotMet: string;
+  /** Words around the rolling count beside an unmet rule, as in "4 more". */
+  remainingPrefix: string;
+  remainingSuffix: string;
+  /** The polite live-region summary read after each change. */
+  summary: (result: {
+    label: string;
+    met: number;
+    total: number;
+  }) => string;
+}
+export declare const defaultPasswordStrengthMessages: PasswordStrengthMessages;
+/** Partial messages, with partial strength words, for the `messages` prop. */
+export type PasswordStrengthMessagesInput = Partial<Omit<PasswordStrengthMessages, "levels">> & {
+  levels?: Partial<PasswordStrengthLevels>;
+};
+/**
+ * A new-password field that shows how strong the password is while it is typed:
+ * four segments fill and change tone, each rule checks off with a drawn tick, and
+ * the strength word swaps in place. Use it when creating or changing a password;
+ * use `PasswordField` for sign in. Scoring happens on the device, nothing is sent
+ * anywhere.
+ *
+ * Native input props apply to the input (`className` too); `disabled` also
+ * disables the toggle, and `aria-invalid` gives the box its invalid border.
+ *
+ * @example
+ * <PasswordStrength label="New password" onValueChange={(value, strength) => save(value, strength.level)} />
+ */
+export interface PasswordStrengthProps extends Omit<InputProps, "className" | "style" | "size" | "type" | "value" | "defaultValue" | "children"> {
+  /** Extra classes for the input. Merged last, so they win conflicts with ours. */
+  className?: string;
+  /** The visible label, tied to the input with `htmlFor`. */
+  label: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, strength: PasswordStrengthResult) => void;
+  /** Rules to check. Strength is the share of rules met, spread over four steps. */
+  rules?: PasswordRule[];
+  /**
+   * Error copy tied to the field. It is an alert, opens on a spring and swaps as a
+   * whole when it changes; the field shakes once each time a new error appears.
+   */
+  error?: string;
+  revealed?: boolean;
+  onRevealedChange?: (revealed: boolean) => void;
+  /** Translated or reworded copy. Every string has an English default; see PasswordStrengthMessages. */
+  messages?: PasswordStrengthMessagesInput;
+  /** Below this many characters the meter holds at its first step and reads "Too short". Defaults to 8. */
+  shortLength?: number;
+  /** 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. */
+  countCharacters?: (password: string) => number;
+}
+/** Counts code points, so an emoji or other astral character counts as one. */
+export declare const countCodePoints: (password: string) => number;
+/** Labels for the built-in rules. `length` receives the minimum length. */
+export interface PasswordRuleLabels {
+  length: (minLength: number) => string;
+  case: string;
+  number: string;
+  symbol: string;
+}
+export interface PasswordRuleOptions {
+  /** Characters the length rule asks for. Defaults to 12. */
+  minLength?: number;
+  /** Translated or reworded rule labels. */
+  labels?: Partial<PasswordRuleLabels>;
+  /** How the length rule counts characters. Defaults to code points. */
+  countCharacters?: (password: string) => number;
+}
+/** The built-in rules (length, mixed case, number, symbol) with your own minimum length, labels and character count. */
+export declare function createPasswordRules({ minLength, labels, countCharacters }?: PasswordRuleOptions): PasswordRule[];
+export declare const defaultPasswordRules: PasswordRule[];
+export interface EstimateStrengthOptions {
+  /** Below this many characters a password stays at the first step, however varied it is. Defaults to 8. */
+  shortLength?: number;
+  /** Strength words for the result's label. */
+  levels?: Partial<PasswordStrengthLevels>;
+  /** How characters are counted for shortLength. Defaults to code points. */
+  countCharacters?: (password: string) => number;
+}
+/** 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). */
+export declare function estimateStrength(password: string, rules?: PasswordRule[], { shortLength, levels, countCharacters }?: EstimateStrengthOptions): PasswordStrengthResult;
+/**
+ * A new-password input with a strength meter and a checklist (see
+ * {@link PasswordStrengthProps}).
+ */
+export declare const PasswordStrength: import("react").ForwardRefExoticComponent<PasswordStrengthProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=password-strength.d.ts.map

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