@seekalfred/primitives 0.5.0 → 0.6.0

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

@@ -0,0 +1,2 @@
+import { PasswordField, PasswordFieldMessages, PasswordFieldProps, defaultPasswordFieldMessages } from "./password-field.js";
+export { PasswordField, type PasswordFieldMessages, type PasswordFieldProps, defaultPasswordFieldMessages };

package/dist/password-field/index.js

@@ -0,0 +1,2 @@
+import { PasswordField, defaultPasswordFieldMessages } from "./password-field.js";
+export { PasswordField, defaultPasswordFieldMessages };

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

@@ -0,0 +1,37 @@
+import { InputProps } from "react-aria-components";
+//#region src/password-field/password-field.d.ts
+/** The toggle's accessible names. Both have English defaults; pass the ones you translate. */
+export interface PasswordFieldMessages {
+  showPassword: string;
+  hidePassword: string;
+}
+export declare const defaultPasswordFieldMessages: PasswordFieldMessages;
+export interface PasswordFieldProps extends Omit<InputProps, "className" | "style" | "size" | "type"> {
+  /** 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;
+  /**
+   * Helper text under the field, named by `aria-describedby`. A string, because
+   * the copy is animated word by word: it opens on a spring when it appears
+   * after mount and changed words rise in. Nothing animates on first render.
+   */
+  description?: string;
+  /** Translated or reworded toggle names. */
+  messages?: Partial<PasswordFieldMessages>;
+}
+/**
+ * A password input with a show and hide toggle. Switching resolves the text in
+ * place from a soft blur, and the eye is one outline that a slash draws across.
+ * Native input props apply to the input; `disabled` also disables the toggle,
+ * and `aria-invalid` gives the box its invalid border.
+ *
+ * The toggle's name changes with the state and it is also `aria-pressed`, so a
+ * screen reader may announce both ("Hide password, pressed").
+ *
+ * @example
+ * <PasswordField label="Password" description="At least eight characters." />
+ */
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=password-field.d.ts.map

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

@@ -0,0 +1,101 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { EyeMorph } from "../lib/eye-morph.js";
+import { forwardRef, useState } from "react";
+import { Button, Group, Input } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/password-field/password-field.tsx
+const defaultPasswordFieldMessages = {
+	showPassword: "Show password",
+	hidePassword: "Hide password"
+};
+/**
+* The field's box. A React Aria `Group` rather than the input, because the
+* toggle sits inside the same border: it carries the shared field surface (the
+* 160ms border transition, the darker border on hover and focus, the muted
+* disabled look, the invalid border) and the input inside is borderless.
+*
+* `data-focus-within` darkens the border too. A Group reports focus-visible
+* from the input modality, so a mouse click into the input, or onto the toggle,
+* would otherwise leave the border pale; a plain Input is different because
+* React Aria treats a text input as always keyboard-focused.
+*/
+const shellClass = cn(fieldSurfaceVariants(), "flex items-center h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [&:where([data-focus-within])]:border-foreground");
+/** The input inside the box: no border, no fill, no outline of its own. */
+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-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";
+/**
+* A password input with a show and hide toggle. Switching resolves the text in
+* place from a soft blur, and the eye is one outline that a slash draws across.
+* Native input props apply to the input; `disabled` also disables the toggle,
+* and `aria-invalid` gives the box its invalid border.
+*
+* The toggle's name changes with the state and it is also `aria-pressed`, so a
+* screen reader may announce both ("Hide password, pressed").
+*
+* @example
+* <PasswordField label="Password" description="At least eight characters." />
+*/
+const PasswordField = forwardRef(function PasswordField({ label, description, messages: messagesProp, className, ...props }, ref) {
+	const messages = {
+		...defaultPasswordFieldMessages,
+		...messagesProp
+	};
+	const [visible, setVisible] = useState(false);
+	const [toggled, setToggled] = useState(false);
+	const field = useFieldWiring({
+		enabled: true,
+		id: props.id,
+		describedBy: props["aria-describedby"],
+		invalid: props["aria-invalid"],
+		description,
+		error: void 0
+	});
+	const disabled = Boolean(props.disabled);
+	const ariaInvalid = props["aria-invalid"];
+	const control = /* @__PURE__ */ jsxs(Group, {
+		role: "presentation",
+		isDisabled: disabled,
+		isInvalid: ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false",
+		"data-slot": "password-field-shell",
+		className: shellClass,
+		children: [/* @__PURE__ */ jsx(Input, {
+			ref,
+			...props,
+			...field.controlProps,
+			type: visible ? "text" : "password",
+			"data-slot": "password-field",
+			"data-reveal": toggled ? visible ? "shown" : "hidden" : void 0,
+			className: cn(inputClass, className)
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			isDisabled: disabled,
+			"aria-label": visible ? messages.hidePassword : messages.showPassword,
+			"aria-pressed": visible,
+			onPress: () => {
+				setVisible((current) => !current);
+				setToggled(true);
+			},
+			className: toggleClass,
+			children: /* @__PURE__ */ jsx(EyeMorph, { slashed: visible })
+		})]
+	});
+	if (!field.active) return control;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		label,
+		controlId: field.controlId,
+		description,
+		hintId: field.hintId,
+		error: void 0,
+		errorId: void 0,
+		wordExit: "sharp",
+		numbers: false,
+		children: control
+	});
+});
+//#endregion
+export { PasswordField, defaultPasswordFieldMessages };
+
+//# sourceMappingURL=password-field.js.map

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