@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/input/input.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldShell, hasFieldProps, useFieldWiring } from "../lib/field-shell.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { Input } from "react-aria-components";
@@ -30,7 +31,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const inputVariants = cva([
 	fieldSurfaceVariants(),
-	"text-base",
 	"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium",
 	"file:text-foreground"
 ], {
@@ -42,16 +42,21 @@ const inputVariants = cva([
 		* second most common at 167 call sites, and while the field was locked
 		* to `md` the pair was 10px out of alignment with no supported fix.
 		*
-		* Type does NOT scale, which is the one place this axis deliberately
-		* departs from Button's. iOS Safari zooms the viewport when a focused
-		* field's text is under 16px, so `text-base` stays pinned in the base
-		* at every rung -- see the note there. Shrinking the box is a layout
-		* choice; shrinking the type is a bug on a phone.
+		* Type follows Button's sm rung, with one guard. `sm` is 14px, the
+		* size of the body text a small field sits among (Button's sm label is
+		* text-sm for the same reason). `md` and `lg` stay 16px.
+		*
+		* The guard: iOS Safari zooms the viewport when a focused field's text
+		* is under 16px, so a coarse pointer (a touch screen) keeps 16px on
+		* `sm` too. The switch is the input device, not the viewport width:
+		* the legacy `text-base md:text-sm` changed size at a breakpoint that
+		* has nothing to do with zoom, so a narrow desktop window got 16px and
+		* a tablet in landscape got 14px and zoomed.
 		*/
 		size: {
-			sm: "h-(--density-control-h-sm) px-(--density-control-pad-sm)",
-			md: "h-(--density-control-h-md) px-(--density-control-pad-md)",
-			lg: "h-(--density-control-h-lg) px-(--density-control-pad-lg)"
+			sm: "h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm pointer-coarse:text-base",
+			md: "h-(--density-control-h-md) px-(--density-control-pad-md) text-base",
+			lg: "h-(--density-control-h-lg) px-(--density-control-pad-lg) text-base"
 		},
 		hasStartIcon: { true: "" },
 		hasEndIcon: { true: "" }
@@ -155,10 +160,20 @@ const affixVariants = cva([
 	],
 	defaultVariants: { size: "md" }
 });
-const Input$1 = forwardRef(function Input$2({ className, size = "md", startIcon, endIcon, ...props }, ref) {
+const Input$1 = forwardRef(function Input$2(allProps, ref) {
+	const { className, size = "md", startIcon, endIcon, label, description, error, ...props } = allProps;
+	const field = useFieldWiring({
+		enabled: hasFieldProps(allProps),
+		id: props.id,
+		describedBy: props["aria-describedby"],
+		invalid: props["aria-invalid"],
+		description,
+		error
+	});
 	const input = /* @__PURE__ */ jsx(Input, {
 		ref,
 		...props,
+		...field.controlProps,
 		"data-slot": "input",
 		className: cn(inputVariants({
 			size,
@@ -166,8 +181,7 @@ const Input$1 = forwardRef(function Input$2({ className, size = "md", startIcon,
 			hasEndIcon: endIcon !== void 0
 		}), className)
 	});
-	if (startIcon === void 0 && endIcon === void 0) return input;
-	return /* @__PURE__ */ jsxs("span", {
+	const control = startIcon === void 0 && endIcon === void 0 ? input : /* @__PURE__ */ jsxs("span", {
 		"data-slot": "input-wrapper",
 		className: "relative block w-full",
 		children: [
@@ -190,6 +204,16 @@ const Input$1 = forwardRef(function Input$2({ className, size = "md", startIcon,
 			})
 		]
 	});
+	if (!field.active) return control;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		label,
+		controlId: field.controlId,
+		description,
+		hintId: field.hintId,
+		error,
+		errorId: field.errorId,
+		children: control
+	});
 });
 //#endregion
 export { Input$1 as Input, inputVariants };

package/dist/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["Input","AriaInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Input as AriaInput, type InputProps as AriaInputProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Input, ported from the legacy shadcn component onto React Aria's Input.\n *\n * Census: 25 files, 51 uses -- the busiest control in the app after Button.\n * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.\n *\n * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`\n * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real\n * event -- not the `isDisabled`/`onChange(value)` shape the rest of React\n * Aria uses. It reads `InputContext` when one is present, so the same\n * component is a bare styled input today and composes inside a `TextField`\n * the moment one is wrapped around it. There is no rename to schedule.\n *\n * That is also why this is not `TextField`. Wrapping 51 call sites in a\n * field they do not have, to get a `onChange(value: string)` they did not\n * ask for, would be the migration doing work on the app's behalf.\n *\n * `border-input` becomes `border-border`: in the legacy theme `--input` is\n * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the\n * dark values differ only in alpha. A fourth token role that turns out to\n * be an existing one, after `popover`, `accent` and the scrim.\n */\nexport const inputVariants = cva(\n  [\n    fieldSurfaceVariants(),\n\n    // text-base always, not the legacy `text-base md:text-sm`. 16px is the\n    // threshold below which iOS Safari zooms the viewport on focus, and the\n    // legacy dropped to 14px at exactly the widths where that stops being a\n    // phone -- which reads as a deliberate fix but leaves the field a\n    // different size on either side of a breakpoint for no visual reason.\n    \"text-base\",\n\n    // type=\"file\" has one call site, which is not zero. Enough to keep it\n    // from rendering as an unstyled user-agent button.\n    \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n    \"file:text-foreground\",\n  ],\n  {\n    variants: {\n      /**\n       * Height and inline padding from the control scale, so `data-density`\n       * moves a whole form at once. Same three names and the same tokens as\n       * Button, because they sit in the same row: Button's `sm` is the app's\n       * second most common at 167 call sites, and while the field was locked\n       * to `md` the pair was 10px out of alignment with no supported fix.\n       *\n       * Type does NOT scale, which is the one place this axis deliberately\n       * departs from Button's. iOS Safari zooms the viewport when a focused\n       * field's text is under 16px, so `text-base` stays pinned in the base\n       * at every rung -- see the note there. Shrinking the box is a layout\n       * choice; shrinking the type is a bug on a phone.\n       */\n      size: {\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm)\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md)\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg)\",\n      },\n      // Declared empty and filled by the compound variants below: the affix\n      // inset depends on BOTH whether a slot is used and which rung it is on.\n      hasStartIcon: { true: \"\" },\n      hasEndIcon: { true: \"\" },\n    },\n    compoundVariants: [\n      // The affix slots float ABOVE the field rather than sitting beside it\n      // in a flex row, so the only thing keeping the value from running\n      // underneath a glyph is this padding. It is the same three tokens that\n      // place the glyph -- inline padding, icon box, control gap -- so the\n      // text and the glyph move together across density AND size. A\n      // hand-tuned `pl-9` at the call site can do neither, and the product\n      // app has eighteen of those.\n      {\n        size: \"sm\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"sm\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * An affix slot.\n *\n * `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on\n * top of the field, so without it the glyph swallows the click that was meant\n * to focus the input. Which also fixes the slot's scope -- these are\n * DECORATIVE marks. An interactive trailing control (a password reveal, a\n * clear button) needs its own pointer events and its own accessible name, and\n * the census found no call site for one, so it is not built here.\n *\n * Logical properties throughout. The product app's eighteen hand-rolled\n * adornments are all `absolute left-*`, with `absolute start-*` at zero\n * occurrences, so every one of them puts the glyph on the wrong side under\n * RTL and lets the text run over it.\n */\nconst affixVariants = cva(\n  [\n    \"pointer-events-none absolute inset-y-0 flex items-center\",\n    \"text-muted-foreground\",\n    // Sized like Button's icon slots, and skipped when the caller sized the\n    // glyph themselves. An svg with neither a width attribute nor a resolved\n    // class renders at 0x0 and every position assertion still passes.\n    \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      side: { start: \"\", end: \"\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    // The glyph's inset is the field's own inline padding, so it lines up with\n    // where the value would have started. That makes it a pair of axes, not\n    // one: a small field at the medium inset puts the glyph under the text.\n    compoundVariants: [\n      { side: \"start\", size: \"sm\", class: \"start-(--density-control-pad-sm)\" },\n      { side: \"start\", size: \"md\", class: \"start-(--density-control-pad-md)\" },\n      { side: \"start\", size: \"lg\", class: \"start-(--density-control-pad-lg)\" },\n      { side: \"end\", size: \"sm\", class: \"end-(--density-control-pad-sm)\" },\n      { side: \"end\", size: \"md\", class: \"end-(--density-control-pad-md)\" },\n      { side: \"end\", size: \"lg\", class: \"end-(--density-control-pad-lg)\" },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * A single-line text field.\n *\n * @example\n * <Input type=\"email\" placeholder=\"you@example.com\" value={v} onChange={e => set(e.target.value)} />\n * <Input aria-label=\"Search\" startIcon={<SearchIcon aria-hidden />} />\n */\nexport interface InputProps extends Omit<AriaInputProps, \"className\" | \"style\" | \"size\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Control scale. Height and inline padding come from the same\n   * `--density-control-*` tokens as Button, so a field and a button on one\n   * rung are the same height.\n   *\n   * Type does not scale with it: the field stays at 16px everywhere, because\n   * iOS Safari zooms the viewport when a focused input's text is smaller.\n   *\n   * This REPLACES the native `size` attribute, which React Aria inherits from\n   * `InputHTMLAttributes` as a character count. No call site in the census\n   * used it; set a width with `className` instead.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Decorative glyph at the leading edge of the field.\n   *\n   * Mark it `aria-hidden` -- the field's label carries the accessible name,\n   * and a second name source only makes it announce twice. It is sized at\n   * `--icon-sm` unless it carries a `size-*` class of its own, positioned\n   * from `--density-control-pad-md`, and the field's leading padding grows to\n   * match so the value cannot run underneath it.\n   *\n   * The slot is `pointer-events: none`, so a click on the glyph focuses the\n   * field. That makes it decorative by construction: an interactive\n   * adornment -- a password reveal, a clear button -- is NOT this prop.\n   *\n   * Two named slots rather than one `icon` plus a position prop, matching\n   * Button: a search field can legitimately carry a leading glyph AND a\n   * trailing unit, which one slot cannot express.\n   */\n  startIcon?: ReactNode;\n  /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */\n  endIcon?: ReactNode;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  { className, size = \"md\", startIcon, endIcon, ...props },\n  ref,\n) {\n  const input = (\n    <AriaInput\n      // The ref goes on the INPUT, never on the wrapper span below. A ref\n      // pointing at the wrapper is still non-null, so it satisfies the obvious\n      // assertion while breaking `.focus()`, `.select()` and every\n      // react-hook-form site -- but only at the call sites that pass an icon.\n      // RefLandsOnTheInputNotTheWrapper is the guard.\n      ref={ref}\n      {...props}\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({\n          size,\n          hasStartIcon: startIcon !== undefined,\n          hasEndIcon: endIcon !== undefined,\n        }),\n        className,\n      )}\n    />\n  );\n\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  if (startIcon === undefined && endIcon === undefined) return input;\n\n  // An overlay, not a flex row. Moving the border onto this wrapper would\n  // take the painted surface off [data-slot=\"input\"] -- the selector the\n  // escape hatch is built on -- and would force the focus ring onto\n  // :focus-within and the invalid border onto :has(), when React Aria\n  // already puts data-focus-visible and data-invalid on the input itself.\n  return (\n    <span data-slot=\"input-wrapper\" className=\"relative block w-full\">\n      {input}\n      {startIcon === undefined ? null : (\n        <span data-slot=\"input-start-icon\" className={affixVariants({ side: \"start\", size })}>\n          {startIcon}\n        </span>\n      )}\n      {endIcon === undefined ? null : (\n        <span data-slot=\"input-end-icon\" className={affixVariants({ side: \"end\", size })}>\n          {endIcon}\n        </span>\n      )}\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,gBAAgB,IAC3B;CACE,qBAAqB;CAOrB;CAIA;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;EAcR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAGA,cAAc,EAAE,MAAM,GAAG;EACzB,YAAY,EAAE,MAAM,GAAG;CACzB;CACA,kBAAkB;EAQhB;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;CACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,IACpB;CACE;CACA;CAIA;AACF,GACA;CACE,UAAU;EACR,MAAM;GAAE,OAAO;GAAI,KAAK;EAAG;EAC3B,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CAIA,kBAAkB;EAChB;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;CACrE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAiDA,MAAaA,UAAQ,WAAyC,SAASA,QACrE,EAAE,WAAW,OAAO,MAAM,WAAW,SAAS,GAAG,SACjD,KACA;CACA,MAAM,QACJ,oBAACC,OAAD;EAMO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GACT,cAAc;GACZ;GACA,cAAc,cAAc,KAAA;GAC5B,YAAY,YAAY,KAAA;EAC1B,CAAC,GACD,SACF;CACD,CAAA;CAOH,IAAI,cAAc,KAAA,KAAa,YAAY,KAAA,GAAW,OAAO;CAO7D,OACE,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EAA1C,UAAA;GACG;GACA,cAAc,KAAA,IAAY,OACzB,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,cAAc;KAAE,MAAM;KAAS;IAAK,CAAC;IAChF,UAAA;GACG,CAAA;GAEP,YAAY,KAAA,IAAY,OACvB,oBAAC,QAAD;IAAM,aAAU;IAAiB,WAAW,cAAc;KAAE,MAAM;KAAO;IAAK,CAAC;IAC5E,UAAA;GACG,CAAA;EAEJ;;AAEV,CAAC"}
+{"version":3,"file":"input.js","names":["Input","AriaInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Input as AriaInput, type InputProps as AriaInputProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { FieldShell, hasFieldProps, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldSurfaceVariants } from \"../lib/field-surface.js\";\n\n/**\n * Input, ported from the legacy shadcn component onto React Aria's Input.\n *\n * Census: 25 files, 51 uses -- the busiest control in the app after Button.\n * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.\n *\n * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`\n * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real\n * event -- not the `isDisabled`/`onChange(value)` shape the rest of React\n * Aria uses. It reads `InputContext` when one is present, so the same\n * component is a bare styled input today and composes inside a `TextField`\n * the moment one is wrapped around it. There is no rename to schedule.\n *\n * That is also why this is not `TextField`. Wrapping 51 call sites in a\n * field they do not have, to get a `onChange(value: string)` they did not\n * ask for, would be the migration doing work on the app's behalf.\n *\n * `border-input` becomes `border-border`: in the legacy theme `--input` is\n * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the\n * dark values differ only in alpha. A fourth token role that turns out to\n * be an existing one, after `popover`, `accent` and the scrim.\n */\nexport const inputVariants = cva(\n  [\n    fieldSurfaceVariants(),\n\n    // type=\"file\" has one call site, which is not zero. Enough to keep it\n    // from rendering as an unstyled user-agent button.\n    \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n    \"file:text-foreground\",\n  ],\n  {\n    variants: {\n      /**\n       * Height and inline padding from the control scale, so `data-density`\n       * moves a whole form at once. Same three names and the same tokens as\n       * Button, because they sit in the same row: Button's `sm` is the app's\n       * second most common at 167 call sites, and while the field was locked\n       * to `md` the pair was 10px out of alignment with no supported fix.\n       *\n       * Type follows Button's sm rung, with one guard. `sm` is 14px, the\n       * size of the body text a small field sits among (Button's sm label is\n       * text-sm for the same reason). `md` and `lg` stay 16px.\n       *\n       * The guard: iOS Safari zooms the viewport when a focused field's text\n       * is under 16px, so a coarse pointer (a touch screen) keeps 16px on\n       * `sm` too. The switch is the input device, not the viewport width:\n       * the legacy `text-base md:text-sm` changed size at a breakpoint that\n       * has nothing to do with zoom, so a narrow desktop window got 16px and\n       * a tablet in landscape got 14px and zoomed.\n       */\n      size: {\n        sm: \"h-(--density-control-h-sm) px-(--density-control-pad-sm) text-sm pointer-coarse:text-base\",\n        md: \"h-(--density-control-h-md) px-(--density-control-pad-md) text-base\",\n        lg: \"h-(--density-control-h-lg) px-(--density-control-pad-lg) text-base\",\n      },\n      // Declared empty and filled by the compound variants below: the affix\n      // inset depends on BOTH whether a slot is used and which rung it is on.\n      hasStartIcon: { true: \"\" },\n      hasEndIcon: { true: \"\" },\n    },\n    compoundVariants: [\n      // The affix slots float ABOVE the field rather than sitting beside it\n      // in a flex row, so the only thing keeping the value from running\n      // underneath a glyph is this padding. It is the same three tokens that\n      // place the glyph -- inline padding, icon box, control gap -- so the\n      // text and the glyph move together across density AND size. A\n      // hand-tuned `pl-9` at the call site can do neither, and the product\n      // app has eighteen of those.\n      {\n        size: \"sm\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasStartIcon: true,\n        class:\n          \"ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"sm\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"md\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n      {\n        size: \"lg\",\n        hasEndIcon: true,\n        class:\n          \"pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n      },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * An affix slot.\n *\n * `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on\n * top of the field, so without it the glyph swallows the click that was meant\n * to focus the input. Which also fixes the slot's scope -- these are\n * DECORATIVE marks. An interactive trailing control (a password reveal, a\n * clear button) needs its own pointer events and its own accessible name, and\n * the census found no call site for one, so it is not built here.\n *\n * Logical properties throughout. The product app's eighteen hand-rolled\n * adornments are all `absolute left-*`, with `absolute start-*` at zero\n * occurrences, so every one of them puts the glyph on the wrong side under\n * RTL and lets the text run over it.\n */\nconst affixVariants = cva(\n  [\n    \"pointer-events-none absolute inset-y-0 flex items-center\",\n    \"text-muted-foreground\",\n    // Sized like Button's icon slots, and skipped when the caller sized the\n    // glyph themselves. An svg with neither a width attribute nor a resolved\n    // class renders at 0x0 and every position assertion still passes.\n    \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      side: { start: \"\", end: \"\" },\n      size: { sm: \"\", md: \"\", lg: \"\" },\n    },\n    // The glyph's inset is the field's own inline padding, so it lines up with\n    // where the value would have started. That makes it a pair of axes, not\n    // one: a small field at the medium inset puts the glyph under the text.\n    compoundVariants: [\n      { side: \"start\", size: \"sm\", class: \"start-(--density-control-pad-sm)\" },\n      { side: \"start\", size: \"md\", class: \"start-(--density-control-pad-md)\" },\n      { side: \"start\", size: \"lg\", class: \"start-(--density-control-pad-lg)\" },\n      { side: \"end\", size: \"sm\", class: \"end-(--density-control-pad-sm)\" },\n      { side: \"end\", size: \"md\", class: \"end-(--density-control-pad-md)\" },\n      { side: \"end\", size: \"lg\", class: \"end-(--density-control-pad-lg)\" },\n    ],\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/**\n * A single-line text field.\n *\n * @example\n * <Input type=\"email\" placeholder=\"you@example.com\" value={v} onChange={e => set(e.target.value)} />\n * <Input aria-label=\"Search\" startIcon={<SearchIcon aria-hidden />} />\n */\nexport interface InputProps extends Omit<AriaInputProps, \"className\" | \"style\" | \"size\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Control scale. Height and inline padding come from the same\n   * `--density-control-*` tokens as Button, so a field and a button on one\n   * rung are the same height.\n   *\n   * Type does not scale with it: the field stays at 16px everywhere, because\n   * iOS Safari zooms the viewport when a focused input's text is smaller.\n   *\n   * This REPLACES the native `size` attribute, which React Aria inherits from\n   * `InputHTMLAttributes` as a character count. No call site in the census\n   * used it; set a width with `className` instead.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * Decorative glyph at the leading edge of the field.\n   *\n   * Mark it `aria-hidden` -- the field's label carries the accessible name,\n   * and a second name source only makes it announce twice. It is sized at\n   * `--icon-sm` unless it carries a `size-*` class of its own, positioned\n   * from `--density-control-pad-md`, and the field's leading padding grows to\n   * match so the value cannot run underneath it.\n   *\n   * The slot is `pointer-events: none`, so a click on the glyph focuses the\n   * field. That makes it decorative by construction: an interactive\n   * adornment -- a password reveal, a clear button -- is NOT this prop.\n   *\n   * Two named slots rather than one `icon` plus a position prop, matching\n   * Button: a search field can legitimately carry a leading glyph AND a\n   * trailing unit, which one slot cannot express.\n   */\n  startIcon?: ReactNode;\n  /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */\n  endIcon?: ReactNode;\n  /**\n   * A visible label above the field, tied to it with `htmlFor`. Passing any of\n   * `label`, `description` or `error` (even as `undefined`) wraps the field;\n   * with none of them the DOM is exactly the bare input. Do not also pass\n   * `aria-label`: it wins over the label, so the visible name is not the\n   * accessible one (WCAG 2.5.3). Ignored inside a React Aria `TextField`,\n   * which supplies its own label and messages.\n   */\n  label?: ReactNode;\n  /**\n   * Helper text under the field, named by `aria-describedby`. It opens on a\n   * spring when it appears after mount, changed words rise in and numbers roll\n   * digit by digit; nothing animates on first render, and reduced motion swaps\n   * it instantly. A string, because the copy is animated word by word.\n   */\n  description?: string;\n  /**\n   * Error text under the field. Sets `aria-invalid`, so the field takes its\n   * invalid border, and is announced as an alert when it appears. Opens and\n   * closes like `description`. An empty or `undefined` value closes the row.\n   */\n  error?: string;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(allProps, ref) {\n  const {\n    className,\n    size = \"md\",\n    startIcon,\n    endIcon,\n    label,\n    description,\n    error,\n    ...props\n  } = allProps;\n  const field = useFieldWiring({\n    enabled: hasFieldProps(allProps),\n    id: props.id,\n    describedBy: props[\"aria-describedby\"],\n    invalid: props[\"aria-invalid\"],\n    description,\n    error,\n  });\n  const input = (\n    <AriaInput\n      // The ref goes on the INPUT, never on the wrapper span below. A ref\n      // pointing at the wrapper is still non-null, so it satisfies the obvious\n      // assertion while breaking `.focus()`, `.select()` and every\n      // react-hook-form site -- but only at the call sites that pass an icon.\n      // RefLandsOnTheInputNotTheWrapper is the guard.\n      ref={ref}\n      {...props}\n      {...field.controlProps}\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({\n          size,\n          hasStartIcon: startIcon !== undefined,\n          hasEndIcon: endIcon !== undefined,\n        }),\n        className,\n      )}\n    />\n  );\n\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  // With neither slot used there is no wrapper AT ALL, so the DOM is\n  // byte-identical to what shipped before this prop existed. That is what\n  // keeps this additive for the 97 call sites that pass no glyph, and\n  // NoIconsLeaveDomUnchanged is the assertion holding it true.\n  //\n  // An overlay, not a flex row. Moving the border onto this wrapper would\n  // take the painted surface off [data-slot=\"input\"] -- the selector the\n  // escape hatch is built on -- and would force the focus ring onto\n  // :focus-within and the invalid border onto :has(), when React Aria\n  // already puts data-focus-visible and data-invalid on the input itself.\n  const control =\n    startIcon === undefined && endIcon === undefined ? (\n      input\n    ) : (\n      <span data-slot=\"input-wrapper\" className=\"relative block w-full\">\n        {input}\n        {startIcon === undefined ? null : (\n          <span data-slot=\"input-start-icon\" className={affixVariants({ side: \"start\", size })}>\n            {startIcon}\n          </span>\n        )}\n        {endIcon === undefined ? null : (\n          <span data-slot=\"input-end-icon\" className={affixVariants({ side: \"end\", size })}>\n            {endIcon}\n          </span>\n        )}\n      </span>\n    );\n\n  // Without a field prop there is no field wrapper either, and the DOM is the bare input (or the icon wrapper).\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={error}\n      errorId={field.errorId}\n    >\n      {control}\n    </FieldShell>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,gBAAgB,IAC3B;CACE,qBAAqB;CAIrB;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;;;;;;EAmBR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAGA,cAAc,EAAE,MAAM,GAAG;EACzB,YAAY,EAAE,MAAM,GAAG;CACzB;CACA,kBAAkB;EAQhB;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;CACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,IACpB;CACE;CACA;CAIA;AACF,GACA;CACE,UAAU;EACR,MAAM;GAAE,OAAO;GAAI,KAAK;EAAG;EAC3B,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CAIA,kBAAkB;EAChB;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;CACrE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAuEA,MAAaA,UAAQ,WAAyC,SAASA,QAAM,UAAU,KAAK;CAC1F,MAAM,EACJ,WACA,OAAO,MACP,WACA,SACA,OACA,aACA,OACA,GAAG,UACD;CACJ,MAAM,QAAQ,eAAe;EAC3B,SAAS,cAAc,QAAQ;EAC/B,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA;CACF,CAAC;CACD,MAAM,QACJ,oBAACC,OAAD;EAMO;EACL,GAAI;EACJ,GAAI,MAAM;EACV,aAAU;EACV,WAAW,GACT,cAAc;GACZ;GACA,cAAc,cAAc,KAAA;GAC5B,YAAY,YAAY,KAAA;EAC1B,CAAC,GACD,SACF;CACD,CAAA;CAiBH,MAAM,UACJ,cAAc,KAAA,KAAa,YAAY,KAAA,IACrC,QAEA,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EAA1C,UAAA;GACG;GACA,cAAc,KAAA,IAAY,OACzB,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,cAAc;KAAE,MAAM;KAAS;IAAK,CAAC;IAChF,UAAA;GACG,CAAA;GAEP,YAAY,KAAA,IAAY,OACvB,oBAAC,QAAD;IAAM,aAAU;IAAiB,WAAW,cAAc;KAAE,MAAM;KAAO;IAAK,CAAC;IAC5E,UAAA;GACG,CAAA;EAEJ;;CAIV,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACP;EACP,SAAS,MAAM;EAEd,UAAA;CACS,CAAA;AAEhB,CAAC"}

package/dist/lib/count-to.js

@@ -0,0 +1,113 @@
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "./motion.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/lib/count-to.ts
+/** The smooth spring (visual duration .4s, no bounce) sampled every 16ms, so a count agrees with a CSS transition on `--ease-smooth`. */
+const SMOOTH_CURVE = [
+	0,
+	.0191,
+	.0667,
+	.1313,
+	.2048,
+	.2816,
+	.3577,
+	.4308,
+	.4991,
+	.562,
+	.6189,
+	.67,
+	.7154,
+	.7554,
+	.7905,
+	.821,
+	.8475,
+	.8704,
+	.89,
+	.9069,
+	.9213,
+	.9336,
+	.9441,
+	.9529,
+	.9605,
+	.9668,
+	.9722,
+	.9767,
+	.9805,
+	.9837,
+	.9864,
+	.9887,
+	.9905,
+	.9921,
+	.9934,
+	.9945,
+	.9955,
+	.9962,
+	.9969,
+	.9974,
+	.9978,
+	.9982,
+	.9985,
+	.9988,
+	.999,
+	1
+];
+const SMOOTH_MS = 720;
+const ease = (t) => {
+	const at = t * SMOOTH_MS / 16;
+	const i = Math.min(Math.floor(at), SMOOTH_CURVE.length - 2);
+	const a = SMOOTH_CURVE[i];
+	return a + (SMOOTH_CURVE[i + 1] - a) * (at - i);
+};
+/**
+* A number that counts to `target` on the smooth spring, whenever `target` changes.
+* The first value is shown as it is, and reduced motion jumps. Returns the whole
+* number to show. The count is for the eye; the caller keeps the real value for
+* assistive technology.
+*/
+function useCountTo(target) {
+	const [shown, setShown] = useState(target);
+	const current = useRef(target);
+	const first = useRef(true);
+	useIsomorphicLayoutEffect(() => {
+		if (first.current) {
+			first.current = false;
+			current.current = target;
+			return;
+		}
+		if (prefersReducedMotion()) {
+			current.current = target;
+			const frame = requestAnimationFrame(() => setShown(target));
+			return () => cancelAnimationFrame(frame);
+		}
+		const from = current.current;
+		const start = performance.now() - 16;
+		let frame = 0;
+		const tick = (now) => {
+			const t = Math.min(Math.max((now - start) / SMOOTH_MS, 0), 1);
+			current.current = from + (target - from) * ease(t);
+			setShown(current.current);
+			if (t < 1) frame = requestAnimationFrame(tick);
+		};
+		frame = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame);
+	}, [target]);
+	return Math.round(shown);
+}
+/** `value`, but only after `ms` have passed since it turned true; false at once. For a detail that lands as a move ends. */
+function useAfter(value, ms) {
+	const [later, setLater] = useState(value);
+	const [seen, setSeen] = useState(value);
+	if (seen !== value) {
+		setSeen(value);
+		if (!value) setLater(false);
+	}
+	useEffect(() => {
+		if (!value) return;
+		const timer = window.setTimeout(() => setLater(true), prefersReducedMotion() ? 0 : ms);
+		return () => window.clearTimeout(timer);
+	}, [value, ms]);
+	return value && later;
+}
+//#endregion
+export { useAfter, useCountTo };
+
+//# sourceMappingURL=count-to.js.map

package/dist/lib/count-to.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"count-to.js","names":[],"sources":["../../src/lib/count-to.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"./motion.js\";\n\n/** The smooth spring (visual duration .4s, no bounce) sampled every 16ms, so a count agrees with a CSS transition on `--ease-smooth`. */\nconst SMOOTH_CURVE: readonly number[] = [\n  0, 0.0191, 0.0667, 0.1313, 0.2048, 0.2816, 0.3577, 0.4308, 0.4991, 0.562, 0.6189, 0.67, 0.7154,\n  0.7554, 0.7905, 0.821, 0.8475, 0.8704, 0.89, 0.9069, 0.9213, 0.9336, 0.9441, 0.9529, 0.9605,\n  0.9668, 0.9722, 0.9767, 0.9805, 0.9837, 0.9864, 0.9887, 0.9905, 0.9921, 0.9934, 0.9945, 0.9955,\n  0.9962, 0.9969, 0.9974, 0.9978, 0.9982, 0.9985, 0.9988, 0.999, 1,\n];\nconst SMOOTH_MS = 720;\n\nconst ease = (t: number) => {\n  const at = (t * SMOOTH_MS) / 16;\n  const i = Math.min(Math.floor(at), SMOOTH_CURVE.length - 2);\n  const a = SMOOTH_CURVE[i]!;\n  const b = SMOOTH_CURVE[i + 1]!;\n  return a + (b - a) * (at - i);\n};\n\n/**\n * A number that counts to `target` on the smooth spring, whenever `target` changes.\n * The first value is shown as it is, and reduced motion jumps. Returns the whole\n * number to show. The count is for the eye; the caller keeps the real value for\n * assistive technology.\n */\nexport function useCountTo(target: number) {\n  const [shown, setShown] = useState(target);\n  const current = useRef(target);\n  const first = useRef(true);\n  // A layout effect, so the count starts in the same frame the bar's transition does and the two agree.\n  useIsomorphicLayoutEffect(() => {\n    if (first.current) {\n      // The first value is already what is shown.\n      first.current = false;\n      current.current = target;\n      return;\n    }\n    if (prefersReducedMotion()) {\n      current.current = target;\n      const frame = requestAnimationFrame(() => setShown(target));\n      return () => cancelAnimationFrame(frame);\n    }\n    const from = current.current;\n    // A frame early: the number it shows is rendered a frame after the bar's transition has started.\n    const start = performance.now() - 16;\n    let frame = 0;\n    const tick = (now: number) => {\n      const t = Math.min(Math.max((now - start) / SMOOTH_MS, 0), 1);\n      current.current = from + (target - from) * ease(t);\n      setShown(current.current);\n      if (t < 1) frame = requestAnimationFrame(tick);\n    };\n    frame = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frame);\n  }, [target]);\n  return Math.round(shown);\n}\n\n/** `value`, but only after `ms` have passed since it turned true; false at once. For a detail that lands as a move ends. */\nexport function useAfter(value: boolean, ms: number) {\n  const [later, setLater] = useState(value);\n  const [seen, setSeen] = useState(value);\n  // Turning false resets it, during render, so the next turn true waits again.\n  if (seen !== value) {\n    setSeen(value);\n    if (!value) setLater(false);\n  }\n  useEffect(() => {\n    if (!value) return;\n    const timer = window.setTimeout(() => setLater(true), prefersReducedMotion() ? 0 : ms);\n    return () => window.clearTimeout(timer);\n  }, [value, ms]);\n  return value && later;\n}\n"],"mappings":";;;;AAKA,MAAM,eAAkC;CACtC;CAAG;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAO;CAAQ;CAAM;CACxF;CAAQ;CAAQ;CAAO;CAAQ;CAAQ;CAAM;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CACrF;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CACxF;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAO;AACjE;AACA,MAAM,YAAY;AAElB,MAAM,QAAQ,MAAc;CAC1B,MAAM,KAAM,IAAI,YAAa;CAC7B,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,EAAE,GAAG,aAAa,SAAS,CAAC;CAC1D,MAAM,IAAI,aAAa;CAEvB,OAAO,KADG,aAAa,IAAI,KACX,MAAM,KAAK;AAC7B;;;;;;;AAQA,SAAgB,WAAW,QAAgB;CACzC,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,MAAM,UAAU,OAAO,MAAM;CAC7B,MAAM,QAAQ,OAAO,IAAI;CAEzB,gCAAgC;EAC9B,IAAI,MAAM,SAAS;GAEjB,MAAM,UAAU;GAChB,QAAQ,UAAU;GAClB;EACF;EACA,IAAI,qBAAqB,GAAG;GAC1B,QAAQ,UAAU;GAClB,MAAM,QAAQ,4BAA4B,SAAS,MAAM,CAAC;GAC1D,aAAa,qBAAqB,KAAK;EACzC;EACA,MAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,YAAY,IAAI,IAAI;EAClC,IAAI,QAAQ;EACZ,MAAM,QAAQ,QAAgB;GAC5B,MAAM,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,SAAS,WAAW,CAAC,GAAG,CAAC;GAC5D,QAAQ,UAAU,QAAQ,SAAS,QAAQ,KAAK,CAAC;GACjD,SAAS,QAAQ,OAAO;GACxB,IAAI,IAAI,GAAG,QAAQ,sBAAsB,IAAI;EAC/C;EACA,QAAQ,sBAAsB,IAAI;EAClC,aAAa,qBAAqB,KAAK;CACzC,GAAG,CAAC,MAAM,CAAC;CACX,OAAO,KAAK,MAAM,KAAK;AACzB;;AAGA,SAAgB,SAAS,OAAgB,IAAY;CACnD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,IAAI,SAAS,OAAO;EAClB,QAAQ,KAAK;EACb,IAAI,CAAC,OAAO,SAAS,KAAK;CAC5B;CACA,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,MAAM,QAAQ,OAAO,iBAAiB,SAAS,IAAI,GAAG,qBAAqB,IAAI,IAAI,EAAE;EACrF,aAAa,OAAO,aAAa,KAAK;CACxC,GAAG,CAAC,OAAO,EAAE,CAAC;CACd,OAAO,SAAS;AAClB"}

package/dist/lib/eye-morph.js

@@ -0,0 +1,62 @@
+import { useSvgId } from "./svg-id.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/eye-morph.tsx
+/**
+* One eye that a slash draws across, cutting the outline beneath it, instead of
+* swapping two icons. The slash is a path normalised to length 1 (`field-eye-slash`
+* draws and undraws it with a dash transition); the same path, thick and black,
+* in the mask is what cuts the outline. `slashPath` is the line's `d`.
+*/
+function EyeMorph({ slashed, slashPath = "M2 2l20 20" }) {
+	const mask = `eye-${useSvgId()}`;
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		"data-slashed": slashed ? "" : void 0,
+		className: "size-4.5",
+		children: [
+			/* @__PURE__ */ jsxs("mask", {
+				id: mask,
+				maskUnits: "userSpaceOnUse",
+				x: "0",
+				y: "0",
+				width: "24",
+				height: "24",
+				children: [/* @__PURE__ */ jsx("rect", {
+					width: "24",
+					height: "24",
+					fill: "white",
+					stroke: "none"
+				}), /* @__PURE__ */ jsx("path", {
+					d: slashPath,
+					pathLength: 1,
+					stroke: "black",
+					strokeWidth: 5,
+					className: "field-eye-slash"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				mask: `url(#${mask})`,
+				children: [/* @__PURE__ */ jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }), /* @__PURE__ */ jsx("circle", {
+					cx: "12",
+					cy: "12",
+					r: "3"
+				})]
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: slashPath,
+				pathLength: 1,
+				className: "field-eye-slash"
+			})
+		]
+	});
+}
+//#endregion
+export { EyeMorph };
+
+//# sourceMappingURL=eye-morph.js.map

package/dist/lib/eye-morph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eye-morph.js","names":[],"sources":["../../src/lib/eye-morph.tsx"],"sourcesContent":["import { useSvgId } from \"./svg-id.js\";\n\n/**\n * One eye that a slash draws across, cutting the outline beneath it, instead of\n * swapping two icons. The slash is a path normalised to length 1 (`field-eye-slash`\n * draws and undraws it with a dash transition); the same path, thick and black,\n * in the mask is what cuts the outline. `slashPath` is the line's `d`.\n */\nexport function EyeMorph({\n  slashed,\n  slashPath = \"M2 2l20 20\",\n}: {\n  slashed: boolean;\n  slashPath?: string;\n}) {\n  const mask = `eye-${useSvgId()}`;\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.75}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      data-slashed={slashed ? \"\" : undefined}\n      className=\"size-4.5\"\n    >\n      <mask id={mask} maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"24\" height=\"24\">\n        <rect width=\"24\" height=\"24\" fill=\"white\" stroke=\"none\" />\n        <path\n          d={slashPath}\n          pathLength={1}\n          stroke=\"black\"\n          strokeWidth={5}\n          className=\"field-eye-slash\"\n        />\n      </mask>\n      <g mask={`url(#${mask})`}>\n        <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" />\n        <circle cx=\"12\" cy=\"12\" r=\"3\" />\n      </g>\n      <path d={slashPath} pathLength={1} className=\"field-eye-slash\" />\n    </svg>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,SAAS,EACvB,SACA,YAAY,gBAIX;CACD,MAAM,OAAO,OAAO,SAAS;CAC7B,OACE,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAa;EACb,eAAc;EACd,gBAAe;EACf,eAAY;EACZ,gBAAc,UAAU,KAAK,KAAA;EAC7B,WAAU;EATZ,UAAA;GAWE,qBAAC,QAAD;IAAM,IAAI;IAAM,WAAU;IAAiB,GAAE;IAAI,GAAE;IAAI,OAAM;IAAK,QAAO;IAAzE,UAAA,CACE,oBAAC,QAAD;KAAM,OAAM;KAAK,QAAO;KAAK,MAAK;KAAQ,QAAO;IAAQ,CAAA,GACzD,oBAAC,QAAD;KACE,GAAG;KACH,YAAY;KACZ,QAAO;KACP,aAAa;KACb,WAAU;IACX,CAAA,CACG;;GACN,qBAAC,KAAD;IAAG,MAAM,QAAQ,KAAK;IAAtB,UAAA,CACE,oBAAC,QAAD,EAAM,GAAE,wGAAyG,CAAA,GACjH,oBAAC,UAAD;KAAQ,IAAG;KAAK,IAAG;KAAK,GAAE;IAAK,CAAA,CAC9B;;GACH,oBAAC,QAAD;IAAM,GAAG;IAAW,YAAY;IAAG,WAAU;GAAmB,CAAA;EAC7D;;AAET"}