@misoto22/folio 0.0.0 → 0.16.0

package/dist/components/NavItem/NavItem.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { RemixiconComponentType } from '@remixicon/react';
+
+interface NavItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> {
+    href: string;
+    /** Optional leading icon (a `@remixicon/react` component, rendered at 18px). */
+    icon?: RemixiconComponentType;
+    /** Marks the current route. Also sets `aria-current="page"`. */
+    active?: boolean;
+    /**
+     * Hand the styling to a router's own `Link` instead of a native `<a>`.
+     *
+     * The slotted child receives the classes and `aria-current`, and becomes the
+     * row — so `icon` is not rendered in this mode; put it inside the child.
+     */
+    asChild?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * A row in a sidebar.
+ *
+ * `aria-current="page"` and not only a colour: the active row has to be
+ * identifiable to a reader who cannot see that it is darker. In this system it
+ * is also carried by weight and by a filled ground, so it survives monochrome
+ * printing and low contrast.
+ *
+ * Framework-agnostic. `asChild` is how a Next or React Router app gets
+ * client-side navigation without this package importing either.
+ *
+ * @example
+ * <NavItem href="/components/button" icon={Square} active>Button</NavItem>
+ * @example
+ * <NavItem asChild href="/work"><Link href="/work">Work</Link></NavItem>
+ */
+declare function NavItem({ href, icon: Icon, active, asChild, children, className, ...rest }: NavItemProps): react.JSX.Element;
+
+export { NavItem, type NavItemProps, NavItem as default };

package/dist/components/NavItem/NavItem.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/cn.js";
+function NavItem({
+  href,
+  icon: Icon,
+  active = false,
+  asChild = false,
+  children,
+  className,
+  ...rest
+}) {
+  const cls = cn(
+    "flex min-h-(--control-h-sm) items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-1.5 text-sm transition-colors duration-(--duration-fast)",
+    active ? "bg-(--stone) font-medium text-(--ink)" : "text-(--ink-3-aa) hover:bg-(--stone) hover:text-(--ink)",
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { "aria-current": active ? "page" : void 0, className: cls, ...rest, children });
+  }
+  return /* @__PURE__ */ jsxs("a", { href, "aria-current": active ? "page" : void 0, className: cls, ...rest, children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { size: 18, "aria-hidden": true, className: "shrink-0" }),
+    children
+  ] });
+}
+var NavItem_default = NavItem;
+export {
+  NavItem,
+  NavItem_default as default
+};
+//# sourceMappingURL=NavItem.js.map

package/dist/components/NavItem/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/NavItem/NavItem.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { RemixiconComponentType } from '@remixicon/react'\nimport type { AnchorHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface NavItemProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> {\n  href: string\n  /** Optional leading icon (a `@remixicon/react` component, rendered at 18px). */\n  icon?: RemixiconComponentType\n  /** Marks the current route. Also sets `aria-current=\"page\"`. */\n  active?: boolean\n  /**\n   * Hand the styling to a router's own `Link` instead of a native `<a>`.\n   *\n   * The slotted child receives the classes and `aria-current`, and becomes the\n   * row — so `icon` is not rendered in this mode; put it inside the child.\n   */\n  asChild?: boolean\n  children: ReactNode\n  className?: string\n}\n\n/**\n * A row in a sidebar.\n *\n * `aria-current=\"page\"` and not only a colour: the active row has to be\n * identifiable to a reader who cannot see that it is darker. In this system it\n * is also carried by weight and by a filled ground, so it survives monochrome\n * printing and low contrast.\n *\n * Framework-agnostic. `asChild` is how a Next or React Router app gets\n * client-side navigation without this package importing either.\n *\n * @example\n * <NavItem href=\"/components/button\" icon={Square} active>Button</NavItem>\n * @example\n * <NavItem asChild href=\"/work\"><Link href=\"/work\">Work</Link></NavItem>\n */\nexport function NavItem({\n  href,\n  icon: Icon,\n  active = false,\n  asChild = false,\n  children,\n  className,\n  ...rest\n}: NavItemProps) {\n  const cls = cn(\n    'flex min-h-(--control-h-sm) items-center gap-2.5 rounded-(--radius-sm) px-2.5 py-1.5 text-sm transition-colors duration-(--duration-fast)',\n    active\n      ? 'bg-(--stone) font-medium text-(--ink)'\n      : 'text-(--ink-3-aa) hover:bg-(--stone) hover:text-(--ink)',\n    className,\n  )\n\n  if (asChild) {\n    // Slot demands exactly ONE child, and `{Icon && …}` is a second one the\n    // moment `icon` is omitted — which is how a whole sidebar of slotted rows\n    // failed to render at all. So a slotted row takes its icon inside the child\n    // it was handed, and this branch passes `children` through untouched.\n    return (\n      <Slot aria-current={active ? 'page' : undefined} className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  return (\n    <a href={href} aria-current={active ? 'page' : undefined} className={cls} {...rest}>\n      {Icon && <Icon size={18} aria-hidden className=\"shrink-0\" />}\n      {children}\n    </a>\n  )\n}\n\nexport default NavItem\n"],"mappings":"AA8DM,cAOF,YAPE;AA9DN,SAAS,YAAY;AAGrB,SAAS,UAAU;AAoCZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,MAAM;AAAA,IACV;AAAA,IACA,SACI,0CACA;AAAA,IACJ;AAAA,EACF;AAEA,MAAI,SAAS;AAKX,WACE,oBAAC,QAAK,gBAAc,SAAS,SAAS,QAAW,WAAW,KAAM,GAAG,MAClE,UACH;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAE,MAAY,gBAAc,SAAS,SAAS,QAAW,WAAW,KAAM,GAAG,MAC3E;AAAA,YAAQ,oBAAC,QAAK,MAAM,IAAI,eAAW,MAAC,WAAU,YAAW;AAAA,IACzD;AAAA,KACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/NumberField/NumberField.d.ts

@@ -0,0 +1,69 @@
+import * as react from 'react';
+import { InputHTMLAttributes, Ref } from 'react';
+
+interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'type'> {
+    value?: number;
+    defaultValue?: number;
+    /** Fires with the parsed number. Raw `onChange` still fires with the event. */
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    /** The increment for the arrows and for one notch of a scrub. */
+    step?: number;
+    /**
+     * A unit drawn inside the end of the field — `%`, `px`, `ms`.
+     *
+     * The field reserves a fixed slot for it, so keep it to about four
+     * characters; a longer one runs under a long number. It is announced through
+     * `aria-describedby` as well as drawn, because a unit nobody hears turns
+     * "300" into a number with no dimension.
+     */
+    unit?: string;
+    /**
+     * A grip at the start of the field that changes the value as it is dragged.
+     *
+     * On by default, and the reason to reach for this over `<Input type="number">`:
+     * a value that is being TUNED — a duration, a weight, an offset — is found by
+     * sweeping through neighbouring values, not by typing candidates one at a
+     * time. Shift multiplies the travel by ten.
+     *
+     * Pointer only, and `aria-hidden` for that reason: the same journey on a
+     * keyboard is the arrow keys on the field itself, which the platform already
+     * provides. Turn it off where the number is a quantity rather than a setting
+     * — a line item's quantity is chosen, not swept to.
+     */
+    scrub?: boolean;
+    /** Paints the resting border with `--danger` and reflects `aria-invalid`. */
+    invalid?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * A number, typed or swept to.
+ *
+ * `Input` with `type="number"` is a box that happens to reject letters. This is
+ * the control for a number that has a RANGE and a sensible increment: the
+ * arrows step it, the grip sweeps it, and `min`, `max` and `step` are honoured
+ * on the way out rather than merely announced.
+ *
+ * Reach for `Slider` instead when the position along the range is the
+ * information — a volume, a confidence, anything a reader judges by where the
+ * thumb sits. Reach for this when the digits are. A slider that also has to be
+ * exact is a `Slider` with `editable`, not one of these beside it.
+ *
+ * **Clamping happens when the field is left, not while it is being typed.** A
+ * minimum of 10 would otherwise make 50 unreachable: the `5` is clamped up to
+ * 10 before the `0` arrives. So `onValueChange` can report a number outside the
+ * range mid-keystroke, and the value that settles is always inside it.
+ *
+ * The native spinner buttons are hidden — they are three different controls in
+ * three browsers, and none of them is this system's. The grip replaces them for
+ * a pointer; the arrow keys were always the keyboard's answer.
+ *
+ * @example
+ * <Field label="Line height"><NumberField defaultValue={1.5} min={1} max={3} step={0.1} /></Field>
+ * @example
+ * <Field label="Timeout"><NumberField defaultValue={30} min={0} max={600} unit="s" /></Field>
+ */
+declare function NumberField({ value, defaultValue, onValueChange, min, max, step, unit, scrub, invalid, disabled, className, ref, onChange, onFocus, onBlur, onKeyDown, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, ...rest }: NumberFieldProps): react.JSX.Element;
+
+export { NumberField, type NumberFieldProps, NumberField as default };

package/dist/components/NumberField/NumberField.js

@@ -0,0 +1,162 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiArrowLeftRightLine } from "@remixicon/react";
+import { useId, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+import { clampToRange, parseNumber, snapToStep } from "../../lib/numeric.js";
+const PX_PER_STEP = 4;
+const COARSE = 10;
+function NumberField({
+  value,
+  defaultValue,
+  onValueChange,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  unit,
+  scrub = true,
+  invalid,
+  disabled,
+  className,
+  ref,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}) {
+  const bad = isInvalid(invalid, ariaInvalid);
+  const unitId = useId();
+  const [uncontrolled, setUncontrolled] = useState(
+    defaultValue ?? (Number.isFinite(min) ? min : 0)
+  );
+  const current = value ?? uncontrolled;
+  const [draft, setDraft] = useState(null);
+  const draftRef = useRef(null);
+  const setDraftText = (text) => {
+    draftRef.current = text;
+    setDraft(text);
+  };
+  const emit = (next) => {
+    if (value === void 0) setUncontrolled(next);
+    onValueChange?.(next);
+  };
+  const settle = (next) => emit(clampToRange(snapToStep(next, step, Number.isFinite(min) ? min : 0), min, max));
+  const entry = useRef(current);
+  const drag = useRef(null);
+  const startScrub = (event) => {
+    if (event.button !== 0 || disabled) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startValue: current,
+      // A scrub is spatial, so it follows the reading direction the way the
+      // slider's own track does: in an RTL page, more is to the left.
+      sign: getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1
+    };
+  };
+  const moveScrub = (event) => {
+    const state = drag.current;
+    if (!state || state.pointerId !== event.pointerId) return;
+    const notches = Math.round((event.clientX - state.startX) / PX_PER_STEP) * state.sign;
+    settle(state.startValue + notches * step * (event.shiftKey ? COARSE : 1));
+  };
+  const endScrub = (event) => {
+    if (drag.current?.pointerId !== event.pointerId) return;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    drag.current = null;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", disabled && "opacity-(--disabled-opacity)", className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "number",
+        inputMode: "decimal",
+        disabled,
+        value: draft ?? String(current),
+        min: Number.isFinite(min) ? min : void 0,
+        max: Number.isFinite(max) ? max : void 0,
+        step,
+        "aria-describedby": [describedBy, unit ? unitId : null].filter(Boolean).join(" ") || void 0,
+        "aria-invalid": ariaInvalid ?? (invalid ? true : void 0),
+        onFocus: (event) => {
+          entry.current = current;
+          onFocus?.(event);
+        },
+        onChange: (event) => {
+          setDraftText(event.target.value);
+          const parsed = parseNumber(event.target.value);
+          if (parsed !== null) emit(parsed);
+          onChange?.(event);
+        },
+        onBlur: (event) => {
+          const text = draftRef.current;
+          const parsed = text === null ? null : parseNumber(text);
+          if (parsed !== null) settle(parsed);
+          setDraftText(null);
+          onBlur?.(event);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            const text = draftRef.current;
+            const parsed = text === null ? null : parseNumber(text);
+            if (parsed !== null) settle(parsed);
+            setDraftText(null);
+          }
+          if (event.key === "Escape") {
+            emit(entry.current);
+            setDraftText(null);
+            event.currentTarget.blur();
+          }
+          onKeyDown?.(event);
+        },
+        className: cn(
+          CONTROL_BASE,
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
+          "tabular-nums",
+          // Full literal strings: Tailwind only emits what it can read here.
+          scrub && "ps-9",
+          unit && "pe-12",
+          // Three browsers, three spinners, none of them this system's.
+          "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        ),
+        ...rest
+      }
+    ),
+    scrub && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        onPointerDown: startScrub,
+        onPointerMove: moveScrub,
+        onPointerUp: endScrub,
+        onPointerCancel: endScrub,
+        className: cn(
+          "absolute inset-y-0 start-0 flex touch-none select-none items-center ps-2.5 text-(--ink-3-aa) transition-colors duration-(--duration-fast)",
+          disabled ? "pointer-events-none" : "cursor-ew-resize hover:text-(--ink)"
+        ),
+        children: /* @__PURE__ */ jsx(RiArrowLeftRightLine, { className: "size-4", "aria-hidden": true })
+      }
+    ),
+    unit && /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: unitId,
+        className: "pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-sm text-(--ink-3-aa)",
+        children: unit
+      }
+    )
+  ] });
+}
+var NumberField_default = NumberField;
+export {
+  NumberField,
+  NumberField_default as default
+};
+//# sourceMappingURL=NumberField.js.map

package/dist/components/NumberField/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["'use client'\n\nimport { RiArrowLeftRightLine } from '@remixicon/react'\nimport { useId, useRef, useState, type InputHTMLAttributes, type PointerEvent, type Ref } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\nimport { clampToRange, parseNumber, snapToStep } from '../../lib/numeric'\n\n/**\n * Pixels of travel per step while scrubbing.\n *\n * Four is the number a pointer reads as \"one notch\". At one or two the value\n * runs away from the hand; past about eight the gesture stops feeling like it\n * is driving anything and a reader goes back to typing.\n */\nconst PX_PER_STEP = 4\n\n/** How much Shift multiplies a scrub by. Ten, as in every drawing tool. */\nconst COARSE = 10\n\nexport interface NumberFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'min' | 'max' | 'step' | 'type'> {\n  value?: number\n  defaultValue?: number\n  /** Fires with the parsed number. Raw `onChange` still fires with the event. */\n  onValueChange?: (value: number) => void\n  min?: number\n  max?: number\n  /** The increment for the arrows and for one notch of a scrub. */\n  step?: number\n  /**\n   * A unit drawn inside the end of the field — `%`, `px`, `ms`.\n   *\n   * The field reserves a fixed slot for it, so keep it to about four\n   * characters; a longer one runs under a long number. It is announced through\n   * `aria-describedby` as well as drawn, because a unit nobody hears turns\n   * \"300\" into a number with no dimension.\n   */\n  unit?: string\n  /**\n   * A grip at the start of the field that changes the value as it is dragged.\n   *\n   * On by default, and the reason to reach for this over `<Input type=\"number\">`:\n   * a value that is being TUNED — a duration, a weight, an offset — is found by\n   * sweeping through neighbouring values, not by typing candidates one at a\n   * time. Shift multiplies the travel by ten.\n   *\n   * Pointer only, and `aria-hidden` for that reason: the same journey on a\n   * keyboard is the arrow keys on the field itself, which the platform already\n   * provides. Turn it off where the number is a quantity rather than a setting\n   * — a line item's quantity is chosen, not swept to.\n   */\n  scrub?: boolean\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  ref?: Ref<HTMLInputElement>\n}\n\n/**\n * A number, typed or swept to.\n *\n * `Input` with `type=\"number\"` is a box that happens to reject letters. This is\n * the control for a number that has a RANGE and a sensible increment: the\n * arrows step it, the grip sweeps it, and `min`, `max` and `step` are honoured\n * on the way out rather than merely announced.\n *\n * Reach for `Slider` instead when the position along the range is the\n * information — a volume, a confidence, anything a reader judges by where the\n * thumb sits. Reach for this when the digits are. A slider that also has to be\n * exact is a `Slider` with `editable`, not one of these beside it.\n *\n * **Clamping happens when the field is left, not while it is being typed.** A\n * minimum of 10 would otherwise make 50 unreachable: the `5` is clamped up to\n * 10 before the `0` arrives. So `onValueChange` can report a number outside the\n * range mid-keystroke, and the value that settles is always inside it.\n *\n * The native spinner buttons are hidden — they are three different controls in\n * three browsers, and none of them is this system's. The grip replaces them for\n * a pointer; the arrow keys were always the keyboard's answer.\n *\n * @example\n * <Field label=\"Line height\"><NumberField defaultValue={1.5} min={1} max={3} step={0.1} /></Field>\n * @example\n * <Field label=\"Timeout\"><NumberField defaultValue={30} min={0} max={600} unit=\"s\" /></Field>\n */\nexport function NumberField({\n  value,\n  defaultValue,\n  onValueChange,\n  min = Number.NEGATIVE_INFINITY,\n  max = Number.POSITIVE_INFINITY,\n  step = 1,\n  unit,\n  scrub = true,\n  invalid,\n  disabled,\n  className,\n  ref,\n  onChange,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  'aria-describedby': describedBy,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: NumberFieldProps) {\n  const bad = isInvalid(invalid, ariaInvalid)\n  const unitId = useId()\n\n  const [uncontrolled, setUncontrolled] = useState<number>(\n    defaultValue ?? (Number.isFinite(min) ? min : 0),\n  )\n  const current = value ?? uncontrolled\n\n  // Non-null only while the box is being typed into. The field shows the draft\n  // verbatim then, so a half-typed \"1.\" or \"-\" survives to the next keystroke\n  // instead of being rewritten into a number the moment it parses.\n  //\n  // Mirrored into a ref because Escape has to clear it and then blur the field\n  // in the SAME event: `setDraft(null)` has not been applied by the time the\n  // blur handler runs, so a handler reading the state variable would still see\n  // the abandoned text and commit it.\n  const [draft, setDraft] = useState<string | null>(null)\n  const draftRef = useRef<string | null>(null)\n  const setDraftText = (text: string | null) => {\n    draftRef.current = text\n    setDraft(text)\n  }\n\n  const emit = (next: number) => {\n    if (value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n  }\n\n  /** Reconciles a number with the range and the step, then commits it. */\n  const settle = (next: number) => emit(clampToRange(snapToStep(next, step, Number.isFinite(min) ? min : 0), min, max))\n\n  // What the value was when the box gained focus, so Escape has something to\n  // go back to: the raw emits above have already moved it by then.\n  const entry = useRef(current)\n\n  const drag = useRef<{ pointerId: number; startX: number; startValue: number; sign: 1 | -1 } | null>(null)\n\n  const startScrub = (event: PointerEvent<HTMLSpanElement>) => {\n    if (event.button !== 0 || disabled) return\n    // Otherwise the gesture selects the text of the field it is dragging over.\n    event.preventDefault()\n    event.currentTarget.setPointerCapture(event.pointerId)\n    drag.current = {\n      pointerId: event.pointerId,\n      startX: event.clientX,\n      startValue: current,\n      // A scrub is spatial, so it follows the reading direction the way the\n      // slider's own track does: in an RTL page, more is to the left.\n      sign: getComputedStyle(event.currentTarget).direction === 'rtl' ? -1 : 1,\n    }\n  }\n\n  const moveScrub = (event: PointerEvent<HTMLSpanElement>) => {\n    const state = drag.current\n    if (!state || state.pointerId !== event.pointerId) return\n    const notches = Math.round((event.clientX - state.startX) / PX_PER_STEP) * state.sign\n    settle(state.startValue + notches * step * (event.shiftKey ? COARSE : 1))\n  }\n\n  const endScrub = (event: PointerEvent<HTMLSpanElement>) => {\n    if (drag.current?.pointerId !== event.pointerId) return\n    event.currentTarget.releasePointerCapture(event.pointerId)\n    drag.current = null\n  }\n\n  return (\n    <div className={cn('relative w-full', disabled && 'opacity-(--disabled-opacity)', className)}>\n      <input\n        ref={ref}\n        type=\"number\"\n        inputMode=\"decimal\"\n        disabled={disabled}\n        value={draft ?? String(current)}\n        min={Number.isFinite(min) ? min : undefined}\n        max={Number.isFinite(max) ? max : undefined}\n        step={step}\n        aria-describedby={[describedBy, unit ? unitId : null].filter(Boolean).join(' ') || undefined}\n        aria-invalid={ariaInvalid ?? (invalid ? true : undefined)}\n        onFocus={(event) => {\n          entry.current = current\n          onFocus?.(event)\n        }}\n        onChange={(event) => {\n          setDraftText(event.target.value)\n          // The raw number, unclamped — see the note on the component.\n          const parsed = parseNumber(event.target.value)\n          if (parsed !== null) emit(parsed)\n          onChange?.(event)\n        }}\n        onBlur={(event) => {\n          const text = draftRef.current\n          const parsed = text === null ? null : parseNumber(text)\n          if (parsed !== null) settle(parsed)\n          setDraftText(null)\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter') {\n            const text = draftRef.current\n            const parsed = text === null ? null : parseNumber(text)\n            if (parsed !== null) settle(parsed)\n            setDraftText(null)\n          }\n          if (event.key === 'Escape') {\n            emit(entry.current)\n            setDraftText(null)\n            event.currentTarget.blur()\n          }\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          CONTROL_BASE,\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n          'tabular-nums',\n          // Full literal strings: Tailwind only emits what it can read here.\n          scrub && 'ps-9',\n          unit && 'pe-12',\n          // Three browsers, three spinners, none of them this system's.\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...rest}\n      />\n      {scrub && (\n        <span\n          // Not a button: it commits nothing, has no keyboard journey of its\n          // own, and announcing it would give a reader a control that does\n          // nothing when they press it. The arrow keys on the field are the\n          // keyboard's path to the same values.\n          aria-hidden=\"true\"\n          onPointerDown={startScrub}\n          onPointerMove={moveScrub}\n          onPointerUp={endScrub}\n          onPointerCancel={endScrub}\n          className={cn(\n            'absolute inset-y-0 start-0 flex touch-none select-none items-center ps-2.5 text-(--ink-3-aa) transition-colors duration-(--duration-fast)',\n            disabled ? 'pointer-events-none' : 'cursor-ew-resize hover:text-(--ink)',\n          )}\n        >\n          <RiArrowLeftRightLine className=\"size-4\" aria-hidden />\n        </span>\n      )}\n      {unit && (\n        <span\n          id={unitId}\n          className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3 text-sm text-(--ink-3-aa)\"\n        >\n          {unit}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport default NumberField\n"],"mappings":"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","names":[]}

package/dist/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,92 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { HeadingLevel } from '../Heading/Heading.js';
+
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** What this page is. One line, and the only thing at this weight. */
+    title: ReactNode;
+    /**
+     * The kicker above the title.
+     *
+     * A wayfinding aid rather than decoration: in a console whose pages are
+     * referred to by a numeral, this is that numeral, and elsewhere it is the
+     * section the page belongs to.
+     */
+    eyebrow?: ReactNode;
+    /** One sentence saying what the page is for. Never a second finding. */
+    description?: ReactNode;
+    /**
+     * The trail above the opening, for a shell that does not already pin one.
+     *
+     * A page rendered inside an application frame usually leaves this off — two
+     * trails on one screen are two answers to "where am I". Takes the rendered
+     * `Breadcrumb` rather than its items, so the crumbs stay the caller's to
+     * wire to a router.
+     */
+    breadcrumb?: ReactNode;
+    /**
+     * Controls that qualify what the page IS, set inside the opening rather than
+     * above the content.
+     *
+     * The distinction is worth holding: a range picker does not act on the
+     * records, it says which slice of them the title refers to. Below the rule it
+     * becomes a toolbar competing with whatever strip follows; beside the title
+     * it reads as part of the heading, which is what it is.
+     */
+    actions?: ReactNode;
+    /**
+     * The heading level `title` opens, in the document the opening lands in.
+     *
+     * Defaults to `1`, which is what a page opening IS: a page has one name, and
+     * a shell that owns the document's heading has taken the page's own name away
+     * from it. Move it only where the opening is not the document's — a preview
+     * canvas, a template shown inside a documentation page, a composition
+     * embedded under a host's own `h1`.
+     *
+     * The size does not follow the level. `title` renders at `--fs-heading` at
+     * every level, because moving an opening down the outline is a fact about the
+     * document and not a request for smaller type.
+     */
+    level?: HeadingLevel;
+    className?: string;
+}
+/**
+ * A page opening: what this page is, and what qualifies it.
+ *
+ * The system has `Heading` for a heading and `Breadcrumb` for a trail, and
+ * nothing that said how a page STARTS — so every application invented the
+ * arrangement, and the eyebrow landed above the title on one screen and below
+ * it on the next. This fixes the order, the rule under it, and where the
+ * controls sit.
+ *
+ * Distinct from `AppShell`, which is the frame around a page rather than the
+ * top of one: a shell holds the rail and the bar for every route, and this is
+ * the first thing inside the route's own column.
+ *
+ * The title renders as an `h1` unless `level` says otherwise, and it is worth
+ * saying why the default is the whole answer nearly always: a page has one name,
+ * and a shell that owns the document's heading has taken the page's own name
+ * away from it. A second opening on one screen is two pages.
+ *
+ * The SIZE is not a prop at all. `Heading` at level 1 defaults to `--fs-title`,
+ * which is the editorial step for a document whose subject IS its title; a page
+ * opening stands over a working screen, where the title is the label for what
+ * follows and the records under it are what the reader came for. `--fs-heading`
+ * is that step at every level, and `Heading` is what draws it, so the ladder
+ * stays one ladder and moving an opening down the outline never resizes it.
+ *
+ * @example
+ * <PageHeader eyebrow="04" title="Money" description="Balances and flows." />
+ * @example
+ * <PageHeader
+ *   title="Jobs"
+ *   breadcrumb={<Breadcrumb items={crumbs} />}
+ *   actions={<Button size="sm">Run now</Button>}
+ * />
+ * @example
+ * // Inside a page that already has its own h1 — a preview, a template.
+ * <PageHeader level={2} title="Money" />
+ */
+declare function PageHeader({ title, eyebrow, description, breadcrumb, actions, level, className, ...rest }: PageHeaderProps): react.JSX.Element;
+
+export { PageHeader, type PageHeaderProps, PageHeader as default };

package/dist/components/PageHeader/PageHeader.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading } from "../Heading/Heading.js";
+import { cn } from "../../lib/cn.js";
+const CLASS = {
+  header: "flex flex-col gap-1 border-b border-(--rule) pb-6",
+  trail: "mb-2",
+  eyebrow: "m-0 eyebrow text-(--ink-3-aa)",
+  row: "flex flex-wrap items-baseline justify-between gap-3",
+  actions: "flex shrink-0 items-center gap-2",
+  description: "m-0 max-w-(--measure-record) text-(--ink-2)"
+};
+function PageHeader({
+  title,
+  eyebrow,
+  description,
+  breadcrumb,
+  actions,
+  level = 1,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("header", { className: cn(CLASS.header, className), ...rest, children: [
+    breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: CLASS.trail, children: breadcrumb }),
+    eyebrow !== void 0 && /* @__PURE__ */ jsx("p", { className: CLASS.eyebrow, children: eyebrow }),
+    /* @__PURE__ */ jsxs("div", { className: CLASS.row, children: [
+      /* @__PURE__ */ jsx(Heading, { level, size: "heading", children: title }),
+      actions !== void 0 && /* @__PURE__ */ jsx("div", { className: CLASS.actions, children: actions })
+    ] }),
+    description !== void 0 && /* @__PURE__ */ jsx("p", { className: CLASS.description, children: description })
+  ] });
+}
+var PageHeader_default = PageHeader;
+export {
+  PageHeader,
+  PageHeader_default as default
+};
+//# sourceMappingURL=PageHeader.js.map

package/dist/components/PageHeader/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PageHeader/PageHeader.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { Heading, type HeadingLevel } from '../Heading/Heading'\nimport { cn } from '../../lib/cn'\n\n/**\n * The parts, named. One place to read what a page opening is made of, and the\n * reason a caller never needs a class of their own to adjust one.\n */\nconst CLASS = {\n  header: 'flex flex-col gap-1 border-b border-(--rule) pb-6',\n  trail: 'mb-2',\n  eyebrow: 'm-0 eyebrow text-(--ink-3-aa)',\n  row: 'flex flex-wrap items-baseline justify-between gap-3',\n  actions: 'flex shrink-0 items-center gap-2',\n  description: 'm-0 max-w-(--measure-record) text-(--ink-2)',\n} as const\n\nexport interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** What this page is. One line, and the only thing at this weight. */\n  title: ReactNode\n  /**\n   * The kicker above the title.\n   *\n   * A wayfinding aid rather than decoration: in a console whose pages are\n   * referred to by a numeral, this is that numeral, and elsewhere it is the\n   * section the page belongs to.\n   */\n  eyebrow?: ReactNode\n  /** One sentence saying what the page is for. Never a second finding. */\n  description?: ReactNode\n  /**\n   * The trail above the opening, for a shell that does not already pin one.\n   *\n   * A page rendered inside an application frame usually leaves this off — two\n   * trails on one screen are two answers to \"where am I\". Takes the rendered\n   * `Breadcrumb` rather than its items, so the crumbs stay the caller's to\n   * wire to a router.\n   */\n  breadcrumb?: ReactNode\n  /**\n   * Controls that qualify what the page IS, set inside the opening rather than\n   * above the content.\n   *\n   * The distinction is worth holding: a range picker does not act on the\n   * records, it says which slice of them the title refers to. Below the rule it\n   * becomes a toolbar competing with whatever strip follows; beside the title\n   * it reads as part of the heading, which is what it is.\n   */\n  actions?: ReactNode\n  /**\n   * The heading level `title` opens, in the document the opening lands in.\n   *\n   * Defaults to `1`, which is what a page opening IS: a page has one name, and\n   * a shell that owns the document's heading has taken the page's own name away\n   * from it. Move it only where the opening is not the document's — a preview\n   * canvas, a template shown inside a documentation page, a composition\n   * embedded under a host's own `h1`.\n   *\n   * The size does not follow the level. `title` renders at `--fs-heading` at\n   * every level, because moving an opening down the outline is a fact about the\n   * document and not a request for smaller type.\n   */\n  level?: HeadingLevel\n  className?: string\n}\n\n/**\n * A page opening: what this page is, and what qualifies it.\n *\n * The system has `Heading` for a heading and `Breadcrumb` for a trail, and\n * nothing that said how a page STARTS — so every application invented the\n * arrangement, and the eyebrow landed above the title on one screen and below\n * it on the next. This fixes the order, the rule under it, and where the\n * controls sit.\n *\n * Distinct from `AppShell`, which is the frame around a page rather than the\n * top of one: a shell holds the rail and the bar for every route, and this is\n * the first thing inside the route's own column.\n *\n * The title renders as an `h1` unless `level` says otherwise, and it is worth\n * saying why the default is the whole answer nearly always: a page has one name,\n * and a shell that owns the document's heading has taken the page's own name\n * away from it. A second opening on one screen is two pages.\n *\n * The SIZE is not a prop at all. `Heading` at level 1 defaults to `--fs-title`,\n * which is the editorial step for a document whose subject IS its title; a page\n * opening stands over a working screen, where the title is the label for what\n * follows and the records under it are what the reader came for. `--fs-heading`\n * is that step at every level, and `Heading` is what draws it, so the ladder\n * stays one ladder and moving an opening down the outline never resizes it.\n *\n * @example\n * <PageHeader eyebrow=\"04\" title=\"Money\" description=\"Balances and flows.\" />\n * @example\n * <PageHeader\n *   title=\"Jobs\"\n *   breadcrumb={<Breadcrumb items={crumbs} />}\n *   actions={<Button size=\"sm\">Run now</Button>}\n * />\n * @example\n * // Inside a page that already has its own h1 — a preview, a template.\n * <PageHeader level={2} title=\"Money\" />\n */\nexport function PageHeader({\n  title,\n  eyebrow,\n  description,\n  breadcrumb,\n  actions,\n  level = 1,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  return (\n    <header className={cn(CLASS.header, className)} {...rest}>\n      {breadcrumb !== undefined && <div className={CLASS.trail}>{breadcrumb}</div>}\n      {eyebrow !== undefined && <p className={CLASS.eyebrow}>{eyebrow}</p>}\n      <div className={CLASS.row}>\n        <Heading level={level} size=\"heading\">\n          {title}\n        </Heading>\n        {actions !== undefined && <div className={CLASS.actions}>{actions}</div>}\n      </div>\n      {description !== undefined && <p className={CLASS.description}>{description}</p>}\n    </header>\n  )\n}\n\nexport default PageHeader\n"],"mappings":"AAmHmC,cAE7B,YAF6B;AAlHnC,SAAS,eAAkC;AAC3C,SAAS,UAAU;AAMnB,MAAM,QAAQ;AAAA,EACZ,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,KAAK;AAAA,EACL,SAAS;AAAA,EACT,aAAa;AACf;AAwFO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE,qBAAC,YAAO,WAAW,GAAG,MAAM,QAAQ,SAAS,GAAI,GAAG,MACjD;AAAA,mBAAe,UAAa,oBAAC,SAAI,WAAW,MAAM,OAAQ,sBAAW;AAAA,IACrE,YAAY,UAAa,oBAAC,OAAE,WAAW,MAAM,SAAU,mBAAQ;AAAA,IAChE,qBAAC,SAAI,WAAW,MAAM,KACpB;AAAA,0BAAC,WAAQ,OAAc,MAAK,WACzB,iBACH;AAAA,MACC,YAAY,UAAa,oBAAC,SAAI,WAAW,MAAM,SAAU,mBAAQ;AAAA,OACpE;AAAA,IACC,gBAAgB,UAAa,oBAAC,OAAE,WAAW,MAAM,aAAc,uBAAY;AAAA,KAC9E;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** 1-based. */
+    page: number;
+    /** Total pages. A value of 1 or less renders nothing. */
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** How many numbered pages sit either side of the current one. */
+    siblings?: number;
+    label?: string;
+    /**
+     * Names the two step controls.
+     *
+     * Each is a chevron and nothing else, so these strings are its entire
+     * accessible name — the same reason `AppShell` exposes `openLabel` and
+     * `closeLabel` rather than baking them in.
+     */
+    previousLabel?: string;
+    nextLabel?: string;
+    /**
+     * Names one numbered page.
+     *
+     * A function rather than a template, because the number does not sit in the
+     * same place in every language and neither does the noun around it —
+     * `"Page 3"`, `"第 3 页"`, `"Seite 3"`. The visible digit is the same either
+     * way; this is what a screen reader hears instead of a bare number.
+     */
+    pageLabel?: (page: number) => string;
+}
+declare const GAP: "\u2026";
+/**
+ * Builds the visible page list: always the first and last page, a window around
+ * the current one, and an ellipsis wherever the sequence skips.
+ *
+ * Returned as numbers and a literal ellipsis rather than as pre-rendered nodes,
+ * so the shape is testable without a DOM — the off-by-one at the window edges
+ * is the whole difficulty of this component.
+ */
+declare function paginationRange(page: number, pageCount: number, siblings?: number): (number | typeof GAP)[];
+/**
+ * Numbered pagination.
+ *
+ * The current page is marked by one filled pill that TRAVELS between the
+ * numbers rather than by a background switching off on one and on on another.
+ * Two backgrounds cross-fading reads as two things changing; a shape moving
+ * reads as the one thing that actually did.
+ *
+ * A `<nav>` wrapping a list, and the current page is a `<button aria-current>`
+ * rather than a styled `<span>` — a reader jumping by landmark needs to find
+ * the control, and a reader on the current page needs to be told they are
+ * already there.
+ *
+ * Renders nothing at one page or fewer. A pager for a single page is furniture.
+ *
+ * Every string a reader hears is a prop. The chevrons carry no text, so
+ * `previousLabel` and `nextLabel` are the whole of those two controls' names,
+ * and `pageLabel` is a function because "Page 3" is a phrase whose parts move
+ * around between languages.
+ *
+ * @example
+ * <Pagination page={page} pageCount={12} onPageChange={setPage} />
+ */
+declare function Pagination({ page, pageCount, onPageChange, siblings, label, previousLabel, nextLabel, pageLabel, className, ...rest }: PaginationProps): react.JSX.Element | null;
+
+export { Pagination, type PaginationProps, Pagination as default, paginationRange };