@misoto22/folio 0.0.0 → 0.16.0

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function Skeleton({ className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("h-3 bg-(--stone)", className), ...rest });
+}
+function SkeletonLine({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(Skeleton, { className: cn("h-3 rounded-(--radius-pill)", className), ...rest });
+}
+function SkeletonBlock({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(Skeleton, { className: cn("rounded-(--radius-sm)", className), ...rest });
+}
+function SkeletonCircle({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(Skeleton, { className: cn("size-9 rounded-full", className), ...rest });
+}
+function SkeletonText({ lines = 3, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2.5", className), ...rest, children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx(SkeletonLine, { className: index === lines - 1 ? "w-[62%]" : "w-full" }, index)) });
+}
+function SkeletonPage({ label, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-busy": "true",
+      "data-folio-animated": true,
+      className: cn("animate-pulse motion-reduce:animate-none", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+        children
+      ]
+    }
+  );
+}
+var Skeleton_default = Skeleton;
+export {
+  Skeleton,
+  SkeletonBlock,
+  SkeletonCircle,
+  SkeletonLine,
+  SkeletonPage,
+  SkeletonText,
+  Skeleton_default as default
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The fill every skeleton part is drawn from: `--stone`, at the height of one\n * line until something says otherwise.\n *\n * Deliberately NOT a shimmer. A shimmer sweeps a highlight across the shape,\n * which implies a light source; the White Reset has none, so the sweep reads as\n * a bug rather than as loading. The whole page breathes together instead —\n * see `SkeletonPage`, which owns the single pulse.\n *\n * `h-3` is a default rather than a design. A `<div>` is already full width, so\n * height was the one dimension a caller could omit and get nothing for — a\n * bare `<Skeleton />` was a zero-height box, which is not a small skeleton but\n * an absent one. Twelve pixels is the height `SkeletonLine` already chose, and\n * any class the caller passes replaces it.\n *\n * @example\n * <Skeleton className=\"h-3 w-40 rounded-(--radius-pill)\" />\n */\nexport function Skeleton({ className, ...rest }: SkeletonProps) {\n  return <div aria-hidden=\"true\" className={cn('h-3 bg-(--stone)', className)} {...rest} />\n}\n\n/** A line of type. Height is the line's; width is how far it runs. */\nexport function SkeletonLine({ className, ...rest }: SkeletonProps) {\n  return <Skeleton className={cn('h-3 rounded-(--radius-pill)', className)} {...rest} />\n}\n\n/** A block: an image mount, a plate, a chart. */\nexport function SkeletonBlock({ className, ...rest }: SkeletonProps) {\n  return <Skeleton className={cn('rounded-(--radius-sm)', className)} {...rest} />\n}\n\n/** A circle: an avatar, a marker. */\nexport function SkeletonCircle({ className, ...rest }: SkeletonProps) {\n  return <Skeleton className={cn('size-9 rounded-full', className)} {...rest} />\n}\n\nexport interface SkeletonTextProps extends SkeletonProps {\n  /** How many lines of prose to stand in for. */\n  lines?: number\n}\n\n/**\n * A paragraph.\n *\n * The last line is short, because real prose ends mid-measure. A block of equal\n * full-width bars reads as a table, and the reader then flinches when a\n * paragraph arrives instead.\n */\nexport function SkeletonText({ lines = 3, className, ...rest }: SkeletonTextProps) {\n  return (\n    <div className={cn('flex flex-col gap-2.5', className)} {...rest}>\n      {Array.from({ length: lines }, (_, index) => (\n        <SkeletonLine key={index} className={index === lines - 1 ? 'w-[62%]' : 'w-full'} />\n      ))}\n    </div>\n  )\n}\n\nexport interface SkeletonPageProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * What is loading, in words. Announced once; the shapes themselves are\n   * `aria-hidden`, so this sentence is the entire experience for a screen\n   * reader and \"Loading\" alone tells it nothing.\n   */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The frame a skeleton sits in: the live region, and the single pulse.\n *\n * One `animate-pulse` on the wrapper rather than one per part, so the page\n * breathes together instead of shimmering out of phase — twenty independently\n * animated bars is a visual noise floor, not a loading state.\n *\n * A skeleton whose shape does not match what replaces it is worse than none: it\n * promises a layout and then the page jumps out from under the reader. Compose\n * the parts to match the real thing, and change both together.\n *\n * @example\n * <SkeletonPage label=\"Loading projects\">\n *   <SkeletonLine className=\"h-2.5 w-28\" />\n *   <SkeletonBlock className=\"mt-6 h-40\" />\n * </SkeletonPage>\n */\nexport function SkeletonPage({ label, children, className, ...rest }: SkeletonPageProps) {\n  return (\n    <div\n      role=\"status\"\n      aria-busy=\"true\"\n      data-folio-animated\n      className={cn('animate-pulse motion-reduce:animate-none', className)}\n      {...rest}\n    >\n      <span className=\"sr-only\">{label}</span>\n      {children}\n    </div>\n  )\n}\n\nexport default Skeleton\n"],"mappings":"AAwBS,cAqEL,YArEK;AAvBT,SAAS,UAAU;AAsBZ,SAAS,SAAS,EAAE,WAAW,GAAG,KAAK,GAAkB;AAC9D,SAAO,oBAAC,SAAI,eAAY,QAAO,WAAW,GAAG,oBAAoB,SAAS,GAAI,GAAG,MAAM;AACzF;AAGO,SAAS,aAAa,EAAE,WAAW,GAAG,KAAK,GAAkB;AAClE,SAAO,oBAAC,YAAS,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,MAAM;AACtF;AAGO,SAAS,cAAc,EAAE,WAAW,GAAG,KAAK,GAAkB;AACnE,SAAO,oBAAC,YAAS,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAAM;AAChF;AAGO,SAAS,eAAe,EAAE,WAAW,GAAG,KAAK,GAAkB;AACpE,SAAO,oBAAC,YAAS,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,MAAM;AAC9E;AAcO,SAAS,aAAa,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,GAAsB;AACjF,SACE,oBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MACzD,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,UACjC,oBAAC,gBAAyB,WAAW,UAAU,QAAQ,IAAI,YAAY,YAApD,KAA8D,CAClF,GACH;AAEJ;AA6BO,SAAS,aAAa,EAAE,OAAO,UAAU,WAAW,GAAG,KAAK,GAAsB;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,uBAAmB;AAAA,MACnB,WAAW,GAAG,4CAA4C,SAAS;AAAA,MAClE,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,WAAW,iBAAM;AAAA,QAChC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,74 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {
+    /**
+     * Names the control. Required: a slider with no name announces only a number,
+     * and a number with no noun is not information.
+     *
+     * A range slider (two thumbs) needs one name per thumb — pass an array.
+     */
+    label: string | [string, string];
+    /**
+     * Prints the current value beside the label.
+     *
+     * A two-thumb range prints both names and both values, in the same order —
+     * the heading used to print the first name over a pair of numbers, which read
+     * as "Minimum" over "10 – 90".
+     */
+    showValue?: boolean;
+    /**
+     * Turns that readout into a box the number can be typed into, and implies
+     * `showValue`.
+     *
+     * A slider is a control for a NEIGHBOURHOOD; someone who needs 1,150 rather
+     * than roughly 1,200 is dragging a 16px thumb across a hundred steps to get
+     * it. This is the way out, in the place the value already is, rather than a
+     * second field beside the track that has to be kept in step by hand.
+     *
+     * The box shows `format`'s output at rest and the bare number while it has
+     * focus, so a reader still sees "$1,200" and a typist is never asked to type
+     * a currency symbol back.
+     */
+    editable?: boolean;
+    /**
+     * Renders the value with a unit or a currency, e.g. `(n) => n + '%'`.
+     *
+     * Reaches assistive tech as well as the readout: it becomes each thumb's
+     * `aria-valuetext`, so a thumb showing "$1,200" announces that rather than the
+     * bare number. Left off, the platform announces the value itself.
+     */
+    format?: (value: number) => string;
+}
+/**
+ * A value chosen along a range.
+ *
+ * Radix owns the keyboard contract — arrows step, Page keys jump, Home and End
+ * reach the ends — and the ARIA that reports the value. What is here is the
+ * look, and the labelling, which is the part a slider most often gets wrong: a
+ * thumb that announces "42" and nothing else leaves a screen reader user with a
+ * number and no idea what it measures.
+ *
+ * A 44px hit area sits invisibly around the 16px thumb, because a thumb sized
+ * for the design is well under any pointer-target guideline.
+ *
+ * `editable` is the answer to the thing a slider cannot do. Reach for it
+ * whenever the exact figure is the point — a budget, a timeout, a price — and
+ * leave it off when the value is genuinely approximate, because a box invites
+ * precision the setting may not have.
+ *
+ * Inside a `Field`, the hint, the error and the requirement land on the THUMB,
+ * which is the element carrying `role="slider"` — on the root they would sit on
+ * a `<span>` with no role and announce nothing. The NAME still comes from
+ * `label` here: a field's label above a slider points at that same roleless
+ * root, so it neither names the control nor clicks through to it.
+ *
+ * @example
+ * <Slider label="Quality" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />
+ * @example
+ * <Slider label="Monthly budget" defaultValue={[1200]} max={5000} step={50} editable format={(n) => `$${n}`} />
+ */
+declare function Slider({ label, showValue, editable, format, className, onValueChange, value: controlledValue, defaultValue, min, max, step, 'aria-describedby': describedBy, 'aria-required': ariaRequired, 'aria-invalid': ariaInvalid, ...props }: SliderProps): react.JSX.Element;
+
+export { Slider, type SliderProps, Slider as default };

package/dist/components/Slider/Slider.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { Fragment, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { clampToRange, parseNumber, snapToStep } from "../../lib/numeric.js";
+import { warnBlankName } from "../../lib/warn.js";
+function Slider({
+  label,
+  showValue = false,
+  editable = false,
+  format,
+  className,
+  onValueChange,
+  value: controlledValue,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  "aria-describedby": describedBy,
+  "aria-required": ariaRequired,
+  "aria-invalid": ariaInvalid,
+  ...props
+}) {
+  const names = Array.isArray(label) ? label : [label];
+  warnBlankName("Slider", "label", names[0], "the thumb is announced with no name and its value describes nothing");
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? [min]);
+  const current = controlledValue ?? uncontrolled;
+  const [draft, setDraft] = useState(null);
+  const draftRef = useRef(null);
+  const edit = (next) => {
+    draftRef.current = next;
+    setDraft(next);
+  };
+  const handleChange = (next) => {
+    if (controlledValue === void 0) setUncontrolled(next);
+    onValueChange?.(next);
+  };
+  const commit = (index, text) => {
+    const parsed = parseNumber(text);
+    if (parsed === null) return false;
+    const lower = index > 0 ? current[index - 1] ?? min : min;
+    const upper = index < current.length - 1 ? current[index + 1] ?? max : max;
+    const next = clampToRange(snapToStep(parsed, step, min), Math.max(min, lower), Math.min(max, upper));
+    if (next !== current[index]) handleChange(current.map((value, i) => i === index ? next : value));
+    return true;
+  };
+  const print = format ?? String;
+  const heading = names.length > 1 ? current.map((_, index) => names[index] ?? names[0]).join(" \u2013 ") : names[0];
+  const readout = showValue || editable;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col gap-3",
+        // On the wrapper, and driven by the prop: the thumb is a <span>, so a
+        // `disabled:` variant compiles to `&:disabled` and matches nothing —
+        // the control was drawn exactly like a live one while refusing to move.
+        // The wrapper is also what dims the readout above the track.
+        props.disabled && "opacity-(--disabled-opacity) pointer-events-none",
+        className
+      ),
+      children: [
+        readout && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-4 mono-meta text-(--ink-3-aa)", children: [
+          /* @__PURE__ */ jsx("span", { children: heading }),
+          editable ? /* @__PURE__ */ jsx("span", { className: "flex items-baseline gap-1.5", children: current.map((value, index) => {
+            const editing = draft?.index === index;
+            const text = editing ? draft.text : print(value);
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              index > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2013" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  inputMode: "decimal",
+                  disabled: props.disabled,
+                  value: text,
+                  "aria-label": `${names[index] ?? names[0]}, exact value`,
+                  "aria-describedby": describedBy,
+                  "aria-required": ariaRequired,
+                  "aria-invalid": editing && parseNumber(draft.text) === null || ariaInvalid || void 0,
+                  onFocus: () => edit({ index, text: String(value) }),
+                  onChange: (event) => edit({ index, text: event.target.value }),
+                  onBlur: () => {
+                    const pending = draftRef.current;
+                    if (pending?.index === index) commit(index, pending.text);
+                    edit(null);
+                  },
+                  onKeyDown: (event) => {
+                    const pending = draftRef.current;
+                    if (event.key === "Enter") {
+                      event.preventDefault();
+                      if (pending?.index === index && commit(index, pending.text)) edit(null);
+                    }
+                    if (event.key === "Escape") {
+                      event.preventDefault();
+                      edit(null);
+                      event.currentTarget.blur();
+                    }
+                  },
+                  className: "w-20 rounded-(--radius-sm) border border-(--rule-2) bg-(--paper) px-1.5 py-0.5 text-end tabular-nums text-(--ink) transition-colors duration-(--duration-fast) hover:border-(--rule-hard) focus:border-(--ink) aria-invalid:border-(--danger)"
+                }
+              )
+            ] }, index);
+          }) }) : /* @__PURE__ */ jsx("span", { className: "tabular-nums text-(--ink)", children: current.map((value) => print(value)).join(" \u2013 ") })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          SliderPrimitive.Root,
+          {
+            className: "group relative flex w-full touch-none select-none items-center py-3",
+            value: current,
+            min,
+            max,
+            step,
+            onValueChange: handleChange,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-(--accent)" }) }),
+              current.map((value, index) => /* @__PURE__ */ jsx(
+                SliderPrimitive.Thumb,
+                {
+                  "aria-label": names[index] ?? names[0],
+                  "aria-describedby": describedBy,
+                  "aria-required": ariaRequired,
+                  "aria-invalid": ariaInvalid,
+                  "aria-valuetext": format ? format(value) : void 0,
+                  className: "relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 motion-reduce:transition-none"
+                },
+                index
+              ))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var Slider_default = Slider;
+export {
+  Slider,
+  Slider_default as default
+};
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { Fragment, useRef, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { clampToRange, parseNumber, snapToStep } from '../../lib/numeric'\nimport { warnBlankName } from '../../lib/warn'\n\nexport interface SliderProps extends ComponentProps<typeof SliderPrimitive.Root> {\n  /**\n   * Names the control. Required: a slider with no name announces only a number,\n   * and a number with no noun is not information.\n   *\n   * A range slider (two thumbs) needs one name per thumb — pass an array.\n   */\n  label: string | [string, string]\n  /**\n   * Prints the current value beside the label.\n   *\n   * A two-thumb range prints both names and both values, in the same order —\n   * the heading used to print the first name over a pair of numbers, which read\n   * as \"Minimum\" over \"10 – 90\".\n   */\n  showValue?: boolean\n  /**\n   * Turns that readout into a box the number can be typed into, and implies\n   * `showValue`.\n   *\n   * A slider is a control for a NEIGHBOURHOOD; someone who needs 1,150 rather\n   * than roughly 1,200 is dragging a 16px thumb across a hundred steps to get\n   * it. This is the way out, in the place the value already is, rather than a\n   * second field beside the track that has to be kept in step by hand.\n   *\n   * The box shows `format`'s output at rest and the bare number while it has\n   * focus, so a reader still sees \"$1,200\" and a typist is never asked to type\n   * a currency symbol back.\n   */\n  editable?: boolean\n  /**\n   * Renders the value with a unit or a currency, e.g. `(n) => n + '%'`.\n   *\n   * Reaches assistive tech as well as the readout: it becomes each thumb's\n   * `aria-valuetext`, so a thumb showing \"$1,200\" announces that rather than the\n   * bare number. Left off, the platform announces the value itself.\n   */\n  format?: (value: number) => string\n}\n\n/** Which box is being typed into, and what is in it. Only one can have focus. */\ninterface Draft {\n  index: number\n  text: string\n}\n\n/**\n * A value chosen along a range.\n *\n * Radix owns the keyboard contract — arrows step, Page keys jump, Home and End\n * reach the ends — and the ARIA that reports the value. What is here is the\n * look, and the labelling, which is the part a slider most often gets wrong: a\n * thumb that announces \"42\" and nothing else leaves a screen reader user with a\n * number and no idea what it measures.\n *\n * A 44px hit area sits invisibly around the 16px thumb, because a thumb sized\n * for the design is well under any pointer-target guideline.\n *\n * `editable` is the answer to the thing a slider cannot do. Reach for it\n * whenever the exact figure is the point — a budget, a timeout, a price — and\n * leave it off when the value is genuinely approximate, because a box invites\n * precision the setting may not have.\n *\n * Inside a `Field`, the hint, the error and the requirement land on the THUMB,\n * which is the element carrying `role=\"slider\"` — on the root they would sit on\n * a `<span>` with no role and announce nothing. The NAME still comes from\n * `label` here: a field's label above a slider points at that same roleless\n * root, so it neither names the control nor clicks through to it.\n *\n * @example\n * <Slider label=\"Quality\" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />\n * @example\n * <Slider label=\"Monthly budget\" defaultValue={[1200]} max={5000} step={50} editable format={(n) => `$${n}`} />\n */\nexport function Slider({\n  label,\n  showValue = false,\n  editable = false,\n  format,\n  className,\n  onValueChange,\n  value: controlledValue,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  'aria-describedby': describedBy,\n  'aria-required': ariaRequired,\n  'aria-invalid': ariaInvalid,\n  ...props\n}: SliderProps) {\n  const names = Array.isArray(label) ? label : [label]\n\n  // The other five guarded naming props are plain strings; this one is a\n  // string or a pair, so the first name is what is checked — a range whose\n  // lower thumb has no name is the same silence as a single one with none.\n  // It catches a blank, not an absent: `label` is required, so a missing one\n  // is a type error everywhere except a caller that has already left the\n  // types behind.\n  warnBlankName('Slider', 'label', names[0], 'the thumb is announced with no name and its value describes nothing')\n\n  // Tracked here, not read off the props. An uncontrolled slider's\n  // `defaultValue` never changes, so the printed figure sat at its starting\n  // number while the thumb moved — the one thing `showValue` exists to avoid.\n  //\n  // The fallback is the primitive's own — one thumb at the minimum. The thumbs\n  // are rendered from THIS array rather than from Radix's, so an empty one is a\n  // track with nothing on it to drag, which is what `<Slider label=\"Volume\" />`\n  // used to render.\n  const [uncontrolled, setUncontrolled] = useState<number[]>(defaultValue ?? [min])\n  const current = controlledValue ?? uncontrolled\n\n  // Mirrored into a ref because Escape clears the draft and blurs the box in\n  // the SAME event: the state update has not been applied by the time the\n  // blur handler runs, so a handler reading the state variable would see the\n  // abandoned text and commit exactly what Escape was pressed to discard.\n  const [draft, setDraft] = useState<Draft | null>(null)\n  const draftRef = useRef<Draft | null>(null)\n  const edit = (next: Draft | null) => {\n    draftRef.current = next\n    setDraft(next)\n  }\n\n  const handleChange = (next: number[]) => {\n    if (controlledValue === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n  }\n\n  /**\n   * Commits one typed box, or reports that there was no number in it.\n   *\n   * A thumb is also bounded by its NEIGHBOURS, which is the bound a typed\n   * value can cross and a dragged one cannot: typing 90 into the lower end of a\n   * range whose upper end is at 70 would otherwise hand Radix an unsorted array\n   * and leave the two thumbs crossed over.\n   */\n  const commit = (index: number, text: string): boolean => {\n    const parsed = parseNumber(text)\n    if (parsed === null) return false\n    const lower = index > 0 ? (current[index - 1] ?? min) : min\n    const upper = index < current.length - 1 ? (current[index + 1] ?? max) : max\n    const next = clampToRange(snapToStep(parsed, step, min), Math.max(min, lower), Math.min(max, upper))\n    if (next !== current[index]) handleChange(current.map((value, i) => (i === index ? next : value)))\n    return true\n  }\n\n  const print = format ?? String\n  // One name per thumb, in the thumbs' own order, so the heading lines up with\n  // the numbers under it. A single name stays a single name however many thumbs\n  // there are — a price filter called \"Price\" is not \"Price – Price\".\n  const heading =\n    names.length > 1 ? current.map((_, index) => names[index] ?? names[0]).join(' – ') : names[0]\n\n  const readout = showValue || editable\n\n  return (\n    <div\n      className={cn(\n        'flex w-full flex-col gap-3',\n        // On the wrapper, and driven by the prop: the thumb is a <span>, so a\n        // `disabled:` variant compiles to `&:disabled` and matches nothing —\n        // the control was drawn exactly like a live one while refusing to move.\n        // The wrapper is also what dims the readout above the track.\n        props.disabled && 'opacity-(--disabled-opacity) pointer-events-none',\n        className,\n      )}\n    >\n      {readout && (\n        <div className=\"flex items-baseline justify-between gap-4 mono-meta text-(--ink-3-aa)\">\n          <span>{heading}</span>\n          {editable ? (\n            <span className=\"flex items-baseline gap-1.5\">\n              {current.map((value, index) => {\n                const editing = draft?.index === index\n                const text = editing ? draft.text : print(value)\n                return (\n                  <Fragment key={index}>\n                    {index > 0 && <span aria-hidden=\"true\">–</span>}\n                    <input\n                      type=\"text\"\n                      // Not `type=\"number\"`: the box holds `format`'s output at\n                      // rest — \"$1,200\" — which a number input refuses to\n                      // display and silently blanks. `inputMode` is what still\n                      // brings up the numeric keypad on a phone.\n                      inputMode=\"decimal\"\n                      // `disabled` on the wrapper is `pointer-events-none`,\n                      // which a keyboard walks straight past. Without this, the\n                      // one editable part of a disabled slider stays editable.\n                      disabled={props.disabled}\n                      value={text}\n                      // The name has to differ from the thumb's: both carry the\n                      // same value, and two controls announcing \"Quality\" is a\n                      // reader hearing the same control twice.\n                      aria-label={`${names[index] ?? names[0]}, exact value`}\n                      aria-describedby={describedBy}\n                      aria-required={ariaRequired}\n                      aria-invalid={(editing && parseNumber(draft.text) === null) || ariaInvalid || undefined}\n                      onFocus={() => edit({ index, text: String(value) })}\n                      onChange={(event) => edit({ index, text: event.target.value })}\n                      onBlur={() => {\n                        const pending = draftRef.current\n                        if (pending?.index === index) commit(index, pending.text)\n                        edit(null)\n                      }}\n                      onKeyDown={(event) => {\n                        const pending = draftRef.current\n                        if (event.key === 'Enter') {\n                          event.preventDefault()\n                          if (pending?.index === index && commit(index, pending.text)) edit(null)\n                        }\n                        if (event.key === 'Escape') {\n                          event.preventDefault()\n                          edit(null)\n                          event.currentTarget.blur()\n                        }\n                      }}\n                      className=\"w-20 rounded-(--radius-sm) border border-(--rule-2) bg-(--paper) px-1.5 py-0.5 text-end tabular-nums text-(--ink) transition-colors duration-(--duration-fast) hover:border-(--rule-hard) focus:border-(--ink) aria-invalid:border-(--danger)\"\n                    />\n                  </Fragment>\n                )\n              })}\n            </span>\n          ) : (\n            <span className=\"tabular-nums text-(--ink)\">\n              {current.map((value) => print(value)).join(' – ')}\n            </span>\n          )}\n        </div>\n      )}\n      {/* Controlled from THIS component's state even when the caller left it\n          uncontrolled, because the thumbs have to answer to more than dragging:\n          a number typed into the readout never passes through Radix, so a Root\n          holding its own `defaultValue` would keep the thumb where it was and\n          leave the figure above it disagreeing with the track. `min`, `max` and\n          `step` are passed on rather than spread for the same reason — the\n          typed value is reconciled against them here. */}\n      <SliderPrimitive.Root\n        className=\"group relative flex w-full touch-none select-none items-center py-3\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        onValueChange={handleChange}\n        {...props}\n      >\n        <SliderPrimitive.Track className=\"relative h-1 w-full grow overflow-hidden rounded-(--radius-pill) bg-(--stone) transition-[height] duration-(--duration-fast) group-hover:h-1.5\">\n          <SliderPrimitive.Range className=\"absolute h-full bg-(--accent)\" />\n        </SliderPrimitive.Track>\n        {current.map((value, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            aria-label={names[index] ?? names[0]}\n            // The thumb is what carries role=\"slider\", so this is where a\n            // Field's description and requirement have to land — on the root\n            // they sit on a <span> with no role, which announces nothing.\n            aria-describedby={describedBy}\n            aria-required={ariaRequired}\n            aria-invalid={ariaInvalid}\n            // Only when a format was given: setting it otherwise would replace\n            // the platform's own reading of the value with the same digits.\n            aria-valuetext={format ? format(value) : undefined}\n            // The visible thumb is 16px; the `before` pseudo-element widens the\n            // hit area to 44px without changing what is drawn.\n            // `transition-transform` and not `all`: the thumb's own position is\n            // set by Radix as a `left` percentage, and transitioning that would\n            // make it lag the pointer. Only the grow-on-grab is animated.\n            className=\"relative block size-4 rounded-(--radius-pill) border border-(--accent) bg-(--paper) transition-[transform,background-color] duration-(--duration-fast) ease-(--ease-out-expo) before:absolute before:left-1/2 before:top-1/2 before:size-11 before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] hover:scale-110 hover:bg-(--stone) active:scale-125 data-[state=active]:scale-125 motion-reduce:transition-none\"\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Slider\n"],"mappings":"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","names":[]}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** 14px / 18px / 26px. Match the size of the type it sits beside. */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * `default` draws the ring against the page — a hairline track in the rule
+     * colour with the leading quarter in ink. `current` draws it in the inherited
+     * text colour, which is what a spinner inside a filled button needs: on an
+     * ink ground an ink ring is invisible.
+     */
+    tone?: 'default' | 'current';
+    /** Merged onto the RING, after `size` and `tone`, so it overrides both. */
+    className?: string;
+    /**
+     * Announced to assistive tech. Pass the specific thing being waited on
+     * ("Loading projects"), not the generic word — a screen reader user hearing
+     * "Loading" three times cannot tell which three things.
+     *
+     * Pass `null` for a spinner that sits inside a control which already names
+     * the operation (a button whose own label changes to "Saving…"), so the two
+     * are not read out twice.
+     */
+    label?: string | null;
+}
+/**
+ * The system's one "working" indicator.
+ *
+ * A ring, not a blurred glow and not a shimmer: the White Reset has no light
+ * source, so depth and softness are not available to it. The leading quarter is
+ * the only thing that distinguishes the ring from a plain circle, which is why
+ * the track stays a hairline — a spinner is a hint that time is passing, not a
+ * feature of the page.
+ *
+ * It spins under `motion-safe` only. A reader who has asked for less motion
+ * gets a static ring, which still reads as "not finished" because the leading
+ * quarter is darker than the track.
+ *
+ * For a wait long enough that the reader would otherwise wonder whether the
+ * page is broken, prefer `Skeleton` — a shape that describes what is coming
+ * beats a dot that describes nothing.
+ *
+ * `className` reaches the RING, alongside `size` and `tone`, and overrides
+ * them: every utility a caller has for a spinner is about the ring, and merged
+ * onto the wrapper instead `className="size-8"` grew an invisible box around an
+ * unchanged 18px circle. Layout still works from there — the wrapper is
+ * `inline-flex` and takes the ring's margin box as its own.
+ *
+ * @example
+ * <Spinner size="lg" label="Loading projects" />
+ * @example
+ * // Inside a filled button, where the ground is ink:
+ * <Spinner size="sm" tone="current" label={null} />
+ */
+declare function Spinner({ size, tone, className, label, ...rest }: SpinnerProps): react.JSX.Element;
+
+export { Spinner, type SpinnerProps, Spinner as default };

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const SIZE = {
+  sm: "size-3.5 border-[1.5px]",
+  md: "size-[18px] border-2",
+  lg: "size-6.5 border-2"
+};
+const TONE = {
+  default: "border-(--rule-2) border-t-(--ink)",
+  current: "border-current/25 border-t-current"
+};
+function Spinner({
+  size = "md",
+  tone = "default",
+  className,
+  label = "Loading",
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: label === null ? void 0 : "status",
+      "aria-hidden": label === null ? true : void 0,
+      className: "inline-flex shrink-0 items-center justify-center",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-folio-animated": true,
+            className: cn(
+              "inline-block rounded-full border-solid motion-safe:animate-[folio-spin_0.7s_linear_infinite]",
+              SIZE[size],
+              TONE[tone],
+              className
+            )
+          }
+        ),
+        label !== null && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+}
+var Spinner_default = Spinner;
+export {
+  Spinner,
+  Spinner_default as default
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** 14px / 18px / 26px. Match the size of the type it sits beside. */\n  size?: 'sm' | 'md' | 'lg'\n  /**\n   * `default` draws the ring against the page — a hairline track in the rule\n   * colour with the leading quarter in ink. `current` draws it in the inherited\n   * text colour, which is what a spinner inside a filled button needs: on an\n   * ink ground an ink ring is invisible.\n   */\n  tone?: 'default' | 'current'\n  /** Merged onto the RING, after `size` and `tone`, so it overrides both. */\n  className?: string\n  /**\n   * Announced to assistive tech. Pass the specific thing being waited on\n   * (\"Loading projects\"), not the generic word — a screen reader user hearing\n   * \"Loading\" three times cannot tell which three things.\n   *\n   * Pass `null` for a spinner that sits inside a control which already names\n   * the operation (a button whose own label changes to \"Saving…\"), so the two\n   * are not read out twice.\n   */\n  label?: string | null\n}\n\nconst SIZE = {\n  sm: 'size-3.5 border-[1.5px]',\n  md: 'size-[18px] border-2',\n  lg: 'size-6.5 border-2',\n} as const\n\nconst TONE = {\n  default: 'border-(--rule-2) border-t-(--ink)',\n  current: 'border-current/25 border-t-current',\n} as const\n\n/**\n * The system's one \"working\" indicator.\n *\n * A ring, not a blurred glow and not a shimmer: the White Reset has no light\n * source, so depth and softness are not available to it. The leading quarter is\n * the only thing that distinguishes the ring from a plain circle, which is why\n * the track stays a hairline — a spinner is a hint that time is passing, not a\n * feature of the page.\n *\n * It spins under `motion-safe` only. A reader who has asked for less motion\n * gets a static ring, which still reads as \"not finished\" because the leading\n * quarter is darker than the track.\n *\n * For a wait long enough that the reader would otherwise wonder whether the\n * page is broken, prefer `Skeleton` — a shape that describes what is coming\n * beats a dot that describes nothing.\n *\n * `className` reaches the RING, alongside `size` and `tone`, and overrides\n * them: every utility a caller has for a spinner is about the ring, and merged\n * onto the wrapper instead `className=\"size-8\"` grew an invisible box around an\n * unchanged 18px circle. Layout still works from there — the wrapper is\n * `inline-flex` and takes the ring's margin box as its own.\n *\n * @example\n * <Spinner size=\"lg\" label=\"Loading projects\" />\n * @example\n * // Inside a filled button, where the ground is ink:\n * <Spinner size=\"sm\" tone=\"current\" label={null} />\n */\nexport function Spinner({\n  size = 'md',\n  tone = 'default',\n  className,\n  label = 'Loading',\n  ...rest\n}: SpinnerProps) {\n  return (\n    <span\n      role={label === null ? undefined : 'status'}\n      aria-hidden={label === null ? true : undefined}\n      className=\"inline-flex shrink-0 items-center justify-center\"\n      {...rest}\n    >\n      <span\n        data-folio-animated\n        className={cn(\n          'inline-block rounded-full border-solid motion-safe:animate-[folio-spin_0.7s_linear_infinite]',\n          SIZE[size],\n          TONE[tone],\n          className,\n        )}\n      />\n      {label !== null && <span className=\"sr-only\">{label}</span>}\n    </span>\n  )\n}\n\nexport default Spinner\n"],"mappings":"AA2EI,SAME,KANF;AA1EJ,SAAS,UAAU;AA0BnB,MAAM,OAAO;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,OAAO;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AACX;AA+BO,SAAS,QAAQ;AAAA,EACtB,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,UAAU,OAAO,SAAY;AAAA,MACnC,eAAa,UAAU,OAAO,OAAO;AAAA,MACrC,WAAU;AAAA,MACT,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,uBAAmB;AAAA,YACnB,WAAW;AAAA,cACT;AAAA,cACA,KAAK,IAAI;AAAA,cACT,KAAK,IAAI;AAAA,cACT;AAAA,YACF;AAAA;AAAA,QACF;AAAA,QACC,UAAU,QAAQ,oBAAC,UAAK,WAAU,WAAW,iBAAM;AAAA;AAAA;AAAA,EACtD;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/StatusDot/StatusDot.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+type StatusTone = 'success' | 'warning' | 'danger' | 'neutral';
+interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
+    /** 7px / 8px. `md` is the default. */
+    size?: 'sm' | 'md';
+    tone?: StatusTone;
+    /** A halo that grows and dissolves, for "live right now". Off for a settled state. */
+    pulse?: boolean;
+}
+/**
+ * The dot beside a status word.
+ *
+ * `aria-hidden` without exception: the dot repeats a state the adjacent label
+ * already names, and a screen reader announcing "available" twice is worse than
+ * not announcing the decoration at all. If a call site has no visible label,
+ * the fix is a label, not an `aria-label` on the dot.
+ *
+ * The halo is a separate absolutely-positioned ring rather than a box-shadow,
+ * because Law 2 of this system is that a shadow is never blurred — and it is
+ * motion-safe, so a reader who asked for less motion gets a static dot.
+ *
+ * @example
+ * <span className="inline-flex items-center gap-2"><StatusDot /> Available</span>
+ */
+declare function StatusDot({ size, tone, pulse, className, ...rest }: StatusDotProps): react.JSX.Element;
+
+export { StatusDot, type StatusDotProps, type StatusTone, StatusDot as default };

package/dist/components/StatusDot/StatusDot.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const SIZE = { sm: "size-[7px]", md: "size-2" };
+const TONE = {
+  success: "bg-(--ok)",
+  warning: "bg-(--warn)",
+  danger: "bg-(--danger)",
+  neutral: "bg-(--ink-3-aa)"
+};
+function StatusDot({
+  size = "md",
+  tone = "success",
+  pulse = true,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn("relative inline-grid shrink-0 place-items-center", SIZE[size], className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("absolute inset-0 rounded-full", TONE[tone]) }),
+        pulse && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-folio-animated": true,
+            className: cn(
+              "absolute inset-0 rounded-full motion-safe:animate-[folio-halo_2.4s_ease-out_infinite]",
+              TONE[tone]
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var StatusDot_default = StatusDot;
+export {
+  StatusDot,
+  StatusDot_default as default
+};
+//# sourceMappingURL=StatusDot.js.map

package/dist/components/StatusDot/StatusDot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/StatusDot/StatusDot.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type StatusTone = 'success' | 'warning' | 'danger' | 'neutral'\n\nexport interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {\n  /** 7px / 8px. `md` is the default. */\n  size?: 'sm' | 'md'\n  tone?: StatusTone\n  /** A halo that grows and dissolves, for \"live right now\". Off for a settled state. */\n  pulse?: boolean\n}\n\nconst SIZE = { sm: 'size-[7px]', md: 'size-2' } as const\n\nconst TONE: Record<StatusTone, string> = {\n  success: 'bg-(--ok)',\n  warning: 'bg-(--warn)',\n  danger: 'bg-(--danger)',\n  neutral: 'bg-(--ink-3-aa)',\n}\n\n/**\n * The dot beside a status word.\n *\n * `aria-hidden` without exception: the dot repeats a state the adjacent label\n * already names, and a screen reader announcing \"available\" twice is worse than\n * not announcing the decoration at all. If a call site has no visible label,\n * the fix is a label, not an `aria-label` on the dot.\n *\n * The halo is a separate absolutely-positioned ring rather than a box-shadow,\n * because Law 2 of this system is that a shadow is never blurred — and it is\n * motion-safe, so a reader who asked for less motion gets a static dot.\n *\n * @example\n * <span className=\"inline-flex items-center gap-2\"><StatusDot /> Available</span>\n */\nexport function StatusDot({\n  size = 'md',\n  tone = 'success',\n  pulse = true,\n  className,\n  ...rest\n}: StatusDotProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn('relative inline-grid shrink-0 place-items-center', SIZE[size], className)}\n      {...rest}\n    >\n      <span className={cn('absolute inset-0 rounded-full', TONE[tone])} />\n      {pulse && (\n        <span\n          data-folio-animated\n          className={cn(\n            'absolute inset-0 rounded-full motion-safe:animate-[folio-halo_2.4s_ease-out_infinite]',\n            TONE[tone],\n          )}\n        />\n      )}\n    </span>\n  )\n}\n\nexport default StatusDot\n"],"mappings":"AA6CI,SAKE,KALF;AA5CJ,SAAS,UAAU;AAYnB,MAAM,OAAO,EAAE,IAAI,cAAc,IAAI,SAAS;AAE9C,MAAM,OAAmC;AAAA,EACvC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AAiBO,SAAS,UAAU;AAAA,EACxB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW,GAAG,oDAAoD,KAAK,IAAI,GAAG,SAAS;AAAA,MACtF,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAW,GAAG,iCAAiC,KAAK,IAAI,CAAC,GAAG;AAAA,QACjE,SACC;AAAA,UAAC;AAAA;AAAA,YACC,uBAAmB;AAAA,YACnB,WAAW;AAAA,cACT;AAAA,cACA,KAAK,IAAI;AAAA,YACX;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/components/StatusPill/StatusPill.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { StatusTone } from '../StatusDot/StatusDot.js';
+
+interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    tone?: StatusTone;
+    /** Pulsing live dot (default) vs a settled one. */
+    pulse?: boolean;
+}
+/**
+ * A live state, named: a dot plus an uppercase mono label in an outlined pill.
+ *
+ * One component rather than a dot and a pill assembled per call site, which is
+ * how the same "available for work" chip ended up with three different dot
+ * sizes and two different pulse timings on one site.
+ *
+ * A warning or danger tone is doubled by a visually-hidden severity word, so
+ * the tone survives the dot being hidden. It does not survive monochrome: the
+ * pill's own text is `--ink-2` at every tone, and the state itself still
+ * belongs in the words the call site writes.
+ *
+ * @example
+ * <StatusPill>Available for work</StatusPill>
+ * @example
+ * <StatusPill tone="warning" pulse={false}>Degraded</StatusPill>
+ */
+declare function StatusPill({ children, tone, pulse, className, ...rest }: StatusPillProps): react.JSX.Element;
+
+export { StatusPill, type StatusPillProps, StatusPill as default };

package/dist/components/StatusPill/StatusPill.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { StatusDot } from "../StatusDot/StatusDot.js";
+const SEVERITY = {
+  warning: "Warning",
+  danger: "Error"
+};
+function StatusPill({
+  children,
+  tone = "success",
+  pulse = true,
+  className,
+  ...rest
+}) {
+  const severity = SEVERITY[tone];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-2.5 rounded-(--radius-pill) border border-(--rule-2) bg-(--paper) py-1.5 ps-2.5 pe-3 eyebrow tracking-[0.12em] text-(--ink-2)",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(StatusDot, { tone, pulse }),
+        severity && /* @__PURE__ */ jsx("span", { className: "sr-only", children: severity }),
+        children
+      ]
+    }
+  );
+}
+var StatusPill_default = StatusPill;
+export {
+  StatusPill,
+  StatusPill_default as default
+};
+//# sourceMappingURL=StatusPill.js.map

package/dist/components/StatusPill/StatusPill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/StatusPill/StatusPill.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { StatusDot, type StatusTone } from '../StatusDot/StatusDot'\n\nexport interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  tone?: StatusTone\n  /** Pulsing live dot (default) vs a settled one. */\n  pulse?: boolean\n}\n\n/**\n * The two tones a reader must not miss, in the words the dot cannot say.\n *\n * `tone` reaches only the StatusDot, and the dot is `aria-hidden` by law — so\n * before this, \"Degraded\" in a warning pill and \"Degraded\" in a neutral one\n * were the same sentence to anyone who could not see the colour.\n *\n * `success` and `neutral` add nothing on purpose. They are the absence of\n * alarm, which is what a reader assumes; announcing it before every settled\n * pill is noise charged to the two tones that are worth interrupting for.\n */\nconst SEVERITY: Partial<Record<StatusTone, string>> = {\n  warning: 'Warning',\n  danger: 'Error',\n}\n\n/**\n * A live state, named: a dot plus an uppercase mono label in an outlined pill.\n *\n * One component rather than a dot and a pill assembled per call site, which is\n * how the same \"available for work\" chip ended up with three different dot\n * sizes and two different pulse timings on one site.\n *\n * A warning or danger tone is doubled by a visually-hidden severity word, so\n * the tone survives the dot being hidden. It does not survive monochrome: the\n * pill's own text is `--ink-2` at every tone, and the state itself still\n * belongs in the words the call site writes.\n *\n * @example\n * <StatusPill>Available for work</StatusPill>\n * @example\n * <StatusPill tone=\"warning\" pulse={false}>Degraded</StatusPill>\n */\nexport function StatusPill({\n  children,\n  tone = 'success',\n  pulse = true,\n  className,\n  ...rest\n}: StatusPillProps) {\n  const severity = SEVERITY[tone]\n\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-2.5 rounded-(--radius-pill) border border-(--rule-2) bg-(--paper) py-1.5 ps-2.5 pe-3 eyebrow tracking-[0.12em] text-(--ink-2)',\n        className,\n      )}\n      {...rest}\n    >\n      <StatusDot tone={tone} pulse={pulse} />\n      {/* Absolutely positioned by `sr-only`, so it is out of flow and costs the\n          pill neither a gap nor a pixel. */}\n      {severity && <span className=\"sr-only\">{severity}</span>}\n      {children}\n    </span>\n  )\n}\n\nexport default StatusPill\n"],"mappings":"AAsDI,SAOE,KAPF;AArDJ,SAAS,UAAU;AACnB,SAAS,iBAAkC;AAoB3C,MAAM,WAAgD;AAAA,EACpD,SAAS;AAAA,EACT,QAAQ;AACV;AAmBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,WAAW,SAAS,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,aAAU,MAAY,OAAc;AAAA,QAGpC,YAAY,oBAAC,UAAK,WAAU,WAAW,oBAAS;AAAA,QAChD;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}