@misoto22/design 0.3.1

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type SkeletonProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * The fill every skeleton part is drawn from: `--stone`, and nothing else.
+ *
+ * Deliberately NOT a shimmer. A shimmer sweeps a highlight across the shape,
+ * which implies a light source; the White Reset has none, so the sweep reads as
+ * a bug rather than as loading. The whole page breathes together instead —
+ * see `SkeletonPage`, which owns the single pulse.
+ *
+ * @example
+ * <Skeleton className="h-3 w-40 rounded-(--radius-pill)" />
+ */
+declare function Skeleton({ className, ...rest }: SkeletonProps): react.JSX.Element;
+/** A line of type. Height is the line's; width is how far it runs. */
+declare function SkeletonLine({ className, ...rest }: SkeletonProps): react.JSX.Element;
+/** A block: an image mount, a plate, a chart. */
+declare function SkeletonBlock({ className, ...rest }: SkeletonProps): react.JSX.Element;
+/** A circle: an avatar, a marker. */
+declare function SkeletonCircle({ className, ...rest }: SkeletonProps): react.JSX.Element;
+interface SkeletonTextProps extends SkeletonProps {
+    /** How many lines of prose to stand in for. */
+    lines?: number;
+}
+/**
+ * A paragraph.
+ *
+ * The last line is short, because real prose ends mid-measure. A block of equal
+ * full-width bars reads as a table, and the reader then flinches when a
+ * paragraph arrives instead.
+ */
+declare function SkeletonText({ lines, className, ...rest }: SkeletonTextProps): react.JSX.Element;
+interface SkeletonPageProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * What is loading, in words. Announced once; the shapes themselves are
+     * `aria-hidden`, so this sentence is the entire experience for a screen
+     * reader and "Loading" alone tells it nothing.
+     */
+    label: string;
+    children: ReactNode;
+}
+/**
+ * The frame a skeleton sits in: the live region, and the single pulse.
+ *
+ * One `animate-pulse` on the wrapper rather than one per part, so the page
+ * breathes together instead of shimmering out of phase — twenty independently
+ * animated bars is a visual noise floor, not a loading state.
+ *
+ * A skeleton whose shape does not match what replaces it is worse than none: it
+ * promises a layout and then the page jumps out from under the reader. Compose
+ * the parts to match the real thing, and change both together.
+ *
+ * @example
+ * <SkeletonPage label="Loading projects">
+ *   <SkeletonLine className="h-2.5 w-28" />
+ *   <SkeletonBlock className="mt-6 h-40" />
+ * </SkeletonPage>
+ */
+declare function SkeletonPage({ label, children, className, ...rest }: SkeletonPageProps): react.JSX.Element;
+
+export { Skeleton, SkeletonBlock, SkeletonCircle, SkeletonLine, SkeletonPage, type SkeletonPageProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, Skeleton as default };

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("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-m22-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`, and nothing else.\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 * @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('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-m22-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":"AAiBS,cAqEL,YArEK;AAhBT,SAAS,UAAU;AAeZ,SAAS,SAAS,EAAE,WAAW,GAAG,KAAK,GAAkB;AAC9D,SAAO,oBAAC,SAAI,eAAY,QAAO,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,MAAM;AACrF;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,qBAAiB;AAAA,MACjB,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,35 @@
+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. */
+    showValue?: boolean;
+    /** Renders the value with a unit or a currency, e.g. `(n) => n + '%'`. */
+    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.
+ *
+ * @example
+ * <Slider label="Quality" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />
+ */
+declare function Slider({ label, showValue, format, className, onValueChange, ...props }: SliderProps): react.JSX.Element;
+
+export { Slider, type SliderProps, Slider as default };

package/dist/components/Slider/Slider.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { useState } from "react";
+import { cn } from "../../lib/cn.js";
+function Slider({
+  label,
+  showValue = false,
+  format = String,
+  className,
+  onValueChange,
+  ...props
+}) {
+  const names = Array.isArray(label) ? label : [label];
+  const [uncontrolled, setUncontrolled] = useState(props.defaultValue ?? []);
+  const current = props.value ?? uncontrolled;
+  const handleChange = (next) => {
+    if (props.value === void 0) setUncontrolled(next);
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-3", className), children: [
+    showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mono-meta text-(--ink-3-aa)", children: [
+      /* @__PURE__ */ jsx("span", { children: names[0] }),
+      /* @__PURE__ */ jsx("span", { className: "tabular-nums text-(--ink)", children: current.map((value) => format(value)).join(" \u2013 ") })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      SliderPrimitive.Root,
+      {
+        className: "group relative flex w-full touch-none select-none items-center py-3",
+        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((_, index) => /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              "aria-label": names[index] ?? names[0],
+              className: "relative block size-4 rounded-full 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 disabled:opacity-(--disabled-opacity) 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 { useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\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  /** Prints the current value beside the label. */\n  showValue?: boolean\n  /** Renders the value with a unit or a currency, e.g. `(n) => n + '%'`. */\n  format?: (value: number) => 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 * @example\n * <Slider label=\"Quality\" defaultValue={[80]} max={100} step={5} showValue format={(n) => `${n}%`} />\n */\nexport function Slider({\n  label,\n  showValue = false,\n  format = String,\n  className,\n  onValueChange,\n  ...props\n}: SliderProps) {\n  const names = Array.isArray(label) ? label : [label]\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  const [uncontrolled, setUncontrolled] = useState<number[]>(props.defaultValue ?? [])\n  const current = props.value ?? uncontrolled\n\n  const handleChange = (next: number[]) => {\n    if (props.value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-3', className)}>\n      {showValue && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{names[0]}</span>\n          <span className=\"tabular-nums text-(--ink)\">\n            {current.map((value) => format(value)).join(' – ')}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        className=\"group relative flex w-full touch-none select-none items-center py-3\"\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((_, index) => (\n          <SliderPrimitive.Thumb\n            key={index}\n            aria-label={names[index] ?? names[0]}\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-full 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 disabled:opacity-(--disabled-opacity) motion-reduce:transition-none\"\n          />\n        ))}\n      </SliderPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Slider\n"],"mappings":";AA2DQ,SACE,KADF;AAzDR,YAAY,qBAAqB;AACjC,SAAS,gBAAqC;AAC9C,SAAS,UAAU;AA+BZ,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAKnD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmB,MAAM,gBAAgB,CAAC,CAAC;AACnF,QAAM,UAAU,MAAM,SAAS;AAE/B,QAAM,eAAe,CAAC,SAAmB;AACvC,QAAI,MAAM,UAAU,OAAW,iBAAgB,IAAI;AACnD,oBAAgB,IAAI;AAAA,EACtB;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACvD;AAAA,iBACC,qBAAC,SAAI,WAAU,mEACb;AAAA,0BAAC,UAAM,gBAAM,CAAC,GAAE;AAAA,MAChB,oBAAC,UAAK,WAAU,6BACb,kBAAQ,IAAI,CAAC,UAAU,OAAO,KAAK,CAAC,EAAE,KAAK,UAAK,GACnD;AAAA,OACF;AAAA,IAEF;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAU;AAAA,QACV,eAAe;AAAA,QACd,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,kJAC/B,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,iCAAgC,GACnE;AAAA,UACC,QAAQ,IAAI,CAAC,GAAG,UACf;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEC,cAAY,MAAM,KAAK,KAAK,MAAM,CAAC;AAAA,cAMnC,WAAU;AAAA;AAAA,YAPL;AAAA,UAQP,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

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

@@ -0,0 +1,50 @@
+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';
+    /**
+     * 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.
+ *
+ * @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,48 @@
+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: cn("inline-flex shrink-0 items-center justify-center", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-m22-animated": true,
+            className: cn(
+              "inline-block rounded-full border-solid motion-safe:animate-[m22-spin_0.7s_linear_infinite]",
+              SIZE[size],
+              TONE[tone]
+            )
+          }
+        ),
+        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  /**\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 * @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={cn('inline-flex shrink-0 items-center justify-center', className)}\n      {...rest}\n    >\n      <span\n        data-m22-animated\n        className={cn(\n          'inline-block rounded-full border-solid motion-safe:animate-[m22-spin_0.7s_linear_infinite]',\n          SIZE[size],\n          TONE[tone],\n        )}\n      />\n      {label !== null && <span className=\"sr-only\">{label}</span>}\n    </span>\n  )\n}\n\nexport default Spinner\n"],"mappings":"AAmEI,SAME,KANF;AAlEJ,SAAS,UAAU;AAwBnB,MAAM,OAAO;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,OAAO;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AACX;AAyBO,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,WAAW,GAAG,oDAAoD,SAAS;AAAA,MAC1E,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YACjB,WAAW;AAAA,cACT;AAAA,cACA,KAAK,IAAI;AAAA,cACT,KAAK,IAAI;AAAA,YACX;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-m22-animated": true,
+            className: cn(
+              "absolute inset-0 rounded-full motion-safe:animate-[m22-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-m22-animated\n          className={cn(\n            'absolute inset-0 rounded-full motion-safe:animate-[m22-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,qBAAiB;AAAA,YACjB,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,25 @@
+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.
+ *
+ * @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,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { StatusDot } from "../StatusDot/StatusDot.js";
+function StatusPill({
+  children,
+  tone = "success",
+  pulse = true,
+  className,
+  ...rest
+}) {
+  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 }),
+        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 * 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 * @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  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      {children}\n    </span>\n  )\n}\n\nexport default StatusPill\n"],"mappings":"AA+BI,SAOE,KAPF;AA9BJ,SAAS,UAAU;AACnB,SAAS,iBAAkC;AAqBpC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,aAAU,MAAY,OAAc;AAAA,QACpC;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root>;
+/**
+ * A setting that takes effect immediately.
+ *
+ * Distinct from `Checkbox`, and the distinction is not cosmetic: a switch
+ * applies on flip, a checkbox applies on submit. A switch inside a form with a
+ * Save button is a lie about when the change happened.
+ *
+ * The track fills with ink when on and the thumb is paper with a hairline —
+ * rather than a white thumb floating on a drop shadow, which this system does
+ * not have. The off state is a filled rule-coloured track, so the control still
+ * reads as a control on a white page.
+ *
+ * @example
+ * <Field label="Email notifications"><Switch defaultChecked /></Field>
+ */
+declare function Switch({ className, ...props }: SwitchProps): react.JSX.Element;
+
+export { Switch, type SwitchProps, Switch as default };

package/dist/components/Switch/Switch.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../../lib/cn.js";
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      className: cn(
+        "group inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-(--radius-pill) border border-(--rule-2) bg-(--stone) px-0.5 transition-colors duration-(--duration-fast) hover:border-(--rule-hard) data-[state=checked]:border-(--accent) data-[state=checked]:bg-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: "block size-3.5 translate-x-0 rounded-full bg-(--paper) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) group-active:w-5 data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-4 motion-reduce:transition-none" })
+    }
+  );
+}
+var Switch_default = Switch;
+export {
+  Switch,
+  Switch_default as default
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["'use client'\n\nimport * as SwitchPrimitive from '@radix-ui/react-switch'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root>\n\n/**\n * A setting that takes effect immediately.\n *\n * Distinct from `Checkbox`, and the distinction is not cosmetic: a switch\n * applies on flip, a checkbox applies on submit. A switch inside a form with a\n * Save button is a lie about when the change happened.\n *\n * The track fills with ink when on and the thumb is paper with a hairline —\n * rather than a white thumb floating on a drop shadow, which this system does\n * not have. The off state is a filled rule-coloured track, so the control still\n * reads as a control on a white page.\n *\n * @example\n * <Field label=\"Email notifications\"><Switch defaultChecked /></Field>\n */\nexport function Switch({ className, ...props }: SwitchProps) {\n  return (\n    <SwitchPrimitive.Root\n      className={cn(\n        'group inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-(--radius-pill) border border-(--rule-2) bg-(--stone) px-0.5 transition-colors duration-(--duration-fast) hover:border-(--rule-hard) data-[state=checked]:border-(--accent) data-[state=checked]:bg-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    >\n      {/* The thumb narrows as it starts moving and rounds out again when it\n          lands, which is what makes a 16px slide read as a deliberate flip\n          rather than a jump. `transition-[transform,width]` and not `all`, so\n          the track's own colour change keeps its shorter duration. */}\n      <SwitchPrimitive.Thumb className=\"block size-3.5 translate-x-0 rounded-full bg-(--paper) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) group-active:w-5 data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-4 motion-reduce:transition-none\" />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport default Switch\n"],"mappings":";AAoCM;AAlCN,YAAY,qBAAqB;AAEjC,SAAS,UAAU;AAmBZ,SAAS,OAAO,EAAE,WAAW,GAAG,MAAM,GAAgB;AAC3D,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAMJ,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,mQAAkQ;AAAA;AAAA,EACrS;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,96 @@
+import * as react from 'react';
+import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, TableHTMLAttributes } from 'react';
+
+type TableAlign = 'start' | 'center' | 'end';
+/**
+ * Which rules the table draws.
+ *
+ * `rows` is the default and the right answer for reading down a column: one
+ * hairline between records and nothing else, so the eye tracks a line across
+ * without a grid competing for it. `grid` adds the vertical rules a dense
+ * numeric table needs to keep columns apart. `bordered` puts an edge around the
+ * whole thing, for a table that sits loose on a page rather than inside a card
+ * that already has one. `none` is for a table inside something that draws its
+ * own structure.
+ */
+type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none';
+interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Describes the table for a screen reader, which cannot see the heading above
+     * it. Rendered as a visually-hidden `<caption>` — required, because an
+     * unnamed table in a page with three tables is unnavigable.
+     */
+    caption: string;
+    /** Prints the caption instead of hiding it. */
+    showCaption?: boolean;
+    /**
+     * Pins the header row while the body scrolls. Needs a bounded height on the
+     * container — otherwise the page scrolls, not the table, and nothing sticks.
+     */
+    stickyHeader?: boolean;
+    /** Which rules to draw. See {@link TableBorders}. */
+    borders?: TableBorders;
+    /** Tightens the row padding, for a table that is mostly numbers. */
+    density?: 'comfortable' | 'compact';
+}
+/**
+ * A ruled data table.
+ *
+ * Wrapped in its own horizontally scrolling container, because a table is the
+ * one block that legitimately exceeds the measure — and a page that scrolls
+ * sideways as a whole is a layout bug, while a table that does is a table.
+ *
+ * That container is focusable, and it has to be. A scrollable region whose
+ * contents are not themselves focusable is unreachable by keyboard: there is no
+ * element to Tab to and therefore no way to press an arrow key at it, so the
+ * columns past the fold simply do not exist for anyone not using a mouse.
+ *
+ * No zebra striping at any border setting. In a monochrome system a striped row
+ * is a second surface competing with the page ground, and the hairline between
+ * rows is already enough to track a line across.
+ *
+ * @example
+ * <Table caption="Deploy history">
+ *   <THead><TR><TH>Commit</TH><TH align="end" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>
+ *   <TBody><TR><TD>a1b2c3d</TD><TD align="end">2m 14s</TD></TR></TBody>
+ * </Table>
+ * @example
+ * <Table caption="Inventory" borders="bordered-grid" density="compact">…</Table>
+ */
+declare function Table({ caption, showCaption, stickyHeader, borders, density, className, children, ...rest }: TableProps): react.JSX.Element;
+/** Header group. The rule under it is drawn by the table's border setting. */
+declare function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
+declare function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>): react.JSX.Element;
+type SortDirection = 'ascending' | 'descending' | 'none';
+interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Which edge the column's contents sit against. Numbers belong at `end`. */
+    align?: TableAlign;
+    /** Makes the label a button and shows the sort marker. */
+    sortable?: boolean;
+    /**
+     * Which way this column is sorted. Also set as `aria-sort`, which is the
+     * only way a screen reader learns a table is ordered at all — a caret drawn
+     * in the header tells it nothing.
+     */
+    sortDirection?: SortDirection;
+    onSort?: () => void;
+}
+/**
+ * A column label. Mono and uppercase, so it never reads as data.
+ *
+ * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than
+ * the `<th>` becoming clickable: a cell with a click handler is not focusable
+ * and not announced as a control, so the sort exists only for a mouse.
+ *
+ * Sorting is per column and opt-in. A table where every header is a button
+ * invites the reader to try sorting a column the data cannot be ordered by.
+ */
+declare function TH({ align, sortable, sortDirection, onSort, className, children, ...rest }: THProps): react.JSX.Element;
+interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Which edge the cell's contents sit against. Match the column's header. */
+    align?: TableAlign;
+}
+declare function TD({ align, className, ...rest }: TDProps): react.JSX.Element;
+
+export { type SortDirection, TBody, TD, type TDProps, TH, type THProps, THead, TR, Table, type TableAlign, type TableBorders, type TableProps, Table as default };