@misoto22/folio 0.0.0 → 0.16.0

package/dist/components/DropdownMenu/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client'\n\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport type { RemixiconComponentType } from '@remixicon/react'\nimport { isValidElement, useId, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/**\n * True for a component type — `icon={Settings}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Remix Icon glyph is none of those, it is a plain\n * function component. So both spellings are tellable apart at runtime, which is\n * what lets one prop take either — and it has to, because this prop meant the\n * opposite thing one import away and the wrong spelling failed at render, not\n * at the type.\n */\nfunction isIconComponent(icon: RemixiconComponentType | ReactNode): icon is RemixiconComponentType {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: RemixiconComponentType | ReactNode): ReactNode {\n  if (icon === undefined || icon === null || icon === false) return null\n  if (!isIconComponent(icon)) {\n    return (\n      <span aria-hidden className=\"grid size-4 shrink-0 place-items-center [&_svg]:size-4\">\n        {icon}\n      </span>\n    )\n  }\n  const Icon = icon\n  return <Icon size={16} className=\"shrink-0\" aria-hidden />\n}\n\n/** Radix DropdownMenu root + trigger, re-exported as typed passthroughs. */\nexport const DropdownMenu = DropdownMenuPrimitive.Root\nexport const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nexport type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content>\n\n/**\n * A menu surface.\n *\n * A menu is a list of ACTIONS. If the items navigate somewhere, they belong in\n * a nav; if they set a value, that is a `Select` or a `RadioGroup` — this\n * package ships no checkbox or radio menu item, and a plain item pretending to\n * be a choice loses the checked state a screen reader needs.\n *\n * @example\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild><Button variant=\"secondary\">Menu</Button></DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuGroup label=\"Account\">\n *       <DropdownMenuItem icon={Settings}>Settings</DropdownMenuItem>\n *     </DropdownMenuGroup>\n *     <DropdownMenuSeparator />\n *     <DropdownMenuItem icon={LogOut}>Sign out</DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n */\nexport function DropdownMenuContent({\n  className,\n  sideOffset = 6,\n  children,\n  ...rest\n}: DropdownMenuContentProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <DropdownMenuPrimitive.Portal container={container ?? undefined}>\n      <DropdownMenuPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        sideOffset={sideOffset}\n        data-folio-animated\n        data-folio-menu\n        className={cn(\n          'z-(--z-dropdown) min-w-44 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-1.5 shadow-(--panel-lift) panel-blur',\n          'data-[state=open]:animate-[folio-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[folio-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </DropdownMenuPrimitive.Content>\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nexport interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenuPrimitive.Item> {\n  /**\n   * Optional leading icon, rendered before the label.\n   *\n   * Either spelling: `icon={Settings}` passes the component and this sizes it,\n   * `icon={<Settings size={16} />}` passes the element and this places it. The\n   * two used to mean opposite things one import apart — `CommandItem.icon` took\n   * the element while this took the component — and the wrong one did not fail\n   * a type check into anything actionable, it failed at render.\n   */\n  icon?: RemixiconComponentType | ReactNode\n  /** Paints the row as destructive. Use for delete, revoke, disconnect. */\n  destructive?: boolean\n}\n\n/**\n * A menu row.\n *\n * Highlight is driven by Radix's `data-highlighted`, which covers both pointer\n * hover and keyboard focus — styling `:hover` alone leaves the keyboard user\n * unable to see where they are.\n */\nexport function DropdownMenuItem({\n  icon,\n  destructive = false,\n  className,\n  children,\n  ...rest\n}: DropdownMenuItemProps) {\n  return (\n    <DropdownMenuPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-2.5 rounded-(--radius-row) px-2.5 py-2 text-sm outline-none transition-colors duration-(--duration-fast) data-[highlighted]:bg-(--stone) data-[disabled]:pointer-events-none data-[disabled]:opacity-(--disabled-opacity)',\n        destructive ? 'text-(--danger)' : 'text-(--ink-2) data-[highlighted]:text-(--ink)',\n        className,\n      )}\n      {...rest}\n    >\n      {iconNode(icon)}\n      {children}\n    </DropdownMenuPrimitive.Item>\n  )\n}\n\n/** Hairline divider between menu groups. */\nexport function DropdownMenuSeparator({\n  className,\n  ...rest\n}: ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Mono eyebrow heading, on its own.\n *\n * Visual only: Radix renders it as a bare `<div>` with no role, so it segments\n * the menu for a reader who can see it and for nobody else. Reach for\n * `DropdownMenuGroup` when the eyebrow is a HEADING over rows; this is right\n * for a line that heads nothing — the signed-in address at the top of an\n * account menu.\n */\nexport function DropdownMenuLabel({\n  className,\n  ...rest\n}: ComponentProps<typeof DropdownMenuPrimitive.Label>) {\n  return (\n    <DropdownMenuPrimitive.Label\n      className={cn('px-2.5 py-1.5 eyebrow text-(--ink-3-aa)', className)}\n      {...rest}\n    />\n  )\n}\n\nexport interface DropdownMenuGroupProps\n  extends ComponentProps<typeof DropdownMenuPrimitive.Group> {\n  /** The eyebrow over the rows, and the group's accessible name. */\n  label?: ReactNode\n}\n\n/**\n * A named section of a menu.\n *\n * The eyebrow alone was a picture of a heading. Radix's `MenuLabel` carries no\n * role and no `aria-labelledby` wiring, and `MenuGroup` — which does carry\n * `role=\"group\"` — was not re-exported by this package at all, so a sighted\n * reader saw three labelled sections and a screen-reader user got one\n * undifferentiated list. This renders the group, renders the label inside it,\n * and points the one at the other, which is the whole of the fix and not\n * something a caller should have to remember.\n *\n * @example\n * <DropdownMenuGroup label=\"Account\">\n *   <DropdownMenuItem icon={Settings}>Settings</DropdownMenuItem>\n * </DropdownMenuGroup>\n */\nexport function DropdownMenuGroup({ label, children, ...rest }: DropdownMenuGroupProps) {\n  const id = useId()\n\n  return (\n    <DropdownMenuPrimitive.Group\n      aria-labelledby={label === undefined ? undefined : id}\n      {...rest}\n    >\n      {label !== undefined && <DropdownMenuLabel id={id}>{label}</DropdownMenuLabel>}\n      {children}\n    </DropdownMenuPrimitive.Group>\n  )\n}\n\nexport default DropdownMenu\n"],"mappings":";AA8BM,cA8FF,YA9FE;AA5BN,YAAY,2BAA2B;AAEvC,SAAS,gBAAgB,aAAkD;AAC3E,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAYpC,SAAS,gBAAgB,MAA0E;AACjG,MAAI,eAAe,IAAI,EAAG,QAAO;AACjC,MAAI,OAAO,SAAS,WAAY,QAAO;AACvC,MAAI,OAAO,SAAS,YAAY,SAAS,KAAM,QAAO;AACtD,SAAO,CAAC,MAAM,QAAQ,IAAI,KAAK,EAAE,OAAO,YAAY,SAAS,EAAE,UAAU;AAC3E;AAGA,SAAS,SAAS,MAAqD;AACrE,MAAI,SAAS,UAAa,SAAS,QAAQ,SAAS,MAAO,QAAO;AAClE,MAAI,CAAC,gBAAgB,IAAI,GAAG;AAC1B,WACE,oBAAC,UAAK,eAAW,MAAC,WAAU,0DACzB,gBACH;AAAA,EAEJ;AACA,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,MAAM,IAAI,WAAU,YAAW,eAAW,MAAC;AAC1D;AAGO,MAAM,eAAe,sBAAsB;AAC3C,MAAM,sBAAsB,sBAAsB;AAwBlD,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,sBAAsB,QAAtB,EAA6B,WAAW,aAAa,QACpD;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB;AAAA,MACA,uBAAmB;AAAA,MACnB,mBAAe;AAAA,MACf,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAwBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,cAAc,oBAAoB;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,iBAAS,IAAI;AAAA,QACb;AAAA;AAAA;AAAA,EACH;AAEJ;AAGO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,GAAG;AACL,GAA2D;AACzD,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAWO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,GAAG;AACL,GAAuD;AACrD,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA;AAAA,EACN;AAEJ;AAwBO,SAAS,kBAAkB,EAAE,OAAO,UAAU,GAAG,KAAK,GAA2B;AACtF,QAAM,KAAK,MAAM;AAEjB,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,mBAAiB,UAAU,SAAY,SAAY;AAAA,MAClD,GAAG;AAAA,MAEH;AAAA,kBAAU,UAAa,oBAAC,qBAAkB,IAAS,iBAAM;AAAA,QACzD;AAAA;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { RemixiconComponentType } from '@remixicon/react';
+import { HeadingLevel } from '../Heading/Heading.js';
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional Remix Icon glyph, shown muted inside a quiet circle. */
+    icon?: RemixiconComponentType;
+    title: ReactNode;
+    description?: ReactNode;
+    /** The one thing to do next. An empty state without an action is a dead end. */
+    action?: ReactNode;
+    /**
+     * The heading level `title` opens, in the document the empty state lands in.
+     *
+     * Defaults to `2`, which is the placement this component is sized for: it
+     * stands in for a whole view inside a page that already has an `h1`, so the
+     * level below that one is the level that does not leave a hole in heading
+     * navigation. Under a section that already has its own `h2`, pass `3`.
+     *
+     * The default was `3` and fixed, which was wrong in the ordinary case and
+     * impossible to correct — the documentation could name the rule but a caller
+     * had no prop to follow it with. `2` is the common case rather than a
+     * compromise, and it is optional rather than required because the correct
+     * placement has one answer often enough that making every existing call site
+     * restate it would buy nothing.
+     *
+     * The size does not follow the level. `title` renders at `--fs-sub` at every
+     * level, because moving a state down the outline is a fact about the document
+     * and not a request for smaller type.
+     */
+    level?: HeadingLevel;
+}
+/**
+ * A collection with nothing in it — yet.
+ *
+ * Distinct from `ErrorState`: nothing went wrong here, so the copy says what to
+ * do rather than what failed. The two are different components because the
+ * shared temptation — one component with a `variant` — produces error pages
+ * that read like empty folders.
+ *
+ * @example
+ * <EmptyState
+ *   icon={Inbox}
+ *   title="No projects yet"
+ *   description="Create your first project to get started."
+ *   action={<Button>New project</Button>}
+ * />
+ * @example
+ * // Inside a section that already has its own heading.
+ * <EmptyState level={3} title="No invoices yet" />
+ */
+declare function EmptyState({ icon: Icon, title, description, action, level, className, ...rest }: EmptyStateProps): react.JSX.Element;
+
+export { EmptyState, type EmptyStateProps, EmptyState as default };

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading } from "../Heading/Heading.js";
+import { cn } from "../../lib/cn.js";
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  level = 2,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col items-center px-(--page-pad) py-20 text-center", className),
+      ...rest,
+      children: [
+        Icon && /* @__PURE__ */ jsx("span", { className: "mb-6 flex size-14 items-center justify-center rounded-(--radius-pill) bg-(--stone) text-(--ink-3-aa)", children: /* @__PURE__ */ jsx(Icon, { size: 24, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx(Heading, { level, size: "sub", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "m-0 mt-2 max-w-sm text-sm leading-relaxed text-(--ink-3-aa)", children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: "mt-8", children: action })
+      ]
+    }
+  );
+}
+var EmptyState_default = EmptyState;
+export {
+  EmptyState,
+  EmptyState_default as default
+};
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["import type { RemixiconComponentType } from '@remixicon/react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { Heading, type HeadingLevel } from '../Heading/Heading'\nimport { cn } from '../../lib/cn'\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Optional Remix Icon glyph, shown muted inside a quiet circle. */\n  icon?: RemixiconComponentType\n  title: ReactNode\n  description?: ReactNode\n  /** The one thing to do next. An empty state without an action is a dead end. */\n  action?: ReactNode\n  /**\n   * The heading level `title` opens, in the document the empty state lands in.\n   *\n   * Defaults to `2`, which is the placement this component is sized for: it\n   * stands in for a whole view inside a page that already has an `h1`, so the\n   * level below that one is the level that does not leave a hole in heading\n   * navigation. Under a section that already has its own `h2`, pass `3`.\n   *\n   * The default was `3` and fixed, which was wrong in the ordinary case and\n   * impossible to correct — the documentation could name the rule but a caller\n   * had no prop to follow it with. `2` is the common case rather than a\n   * compromise, and it is optional rather than required because the correct\n   * placement has one answer often enough that making every existing call site\n   * restate it would buy nothing.\n   *\n   * The size does not follow the level. `title` renders at `--fs-sub` at every\n   * level, because moving a state down the outline is a fact about the document\n   * and not a request for smaller type.\n   */\n  level?: HeadingLevel\n}\n\n/**\n * A collection with nothing in it — yet.\n *\n * Distinct from `ErrorState`: nothing went wrong here, so the copy says what to\n * do rather than what failed. The two are different components because the\n * shared temptation — one component with a `variant` — produces error pages\n * that read like empty folders.\n *\n * @example\n * <EmptyState\n *   icon={Inbox}\n *   title=\"No projects yet\"\n *   description=\"Create your first project to get started.\"\n *   action={<Button>New project</Button>}\n * />\n * @example\n * // Inside a section that already has its own heading.\n * <EmptyState level={3} title=\"No invoices yet\" />\n */\nexport function EmptyState({\n  icon: Icon,\n  title,\n  description,\n  action,\n  level = 2,\n  className,\n  ...rest\n}: EmptyStateProps) {\n  return (\n    <div\n      className={cn('flex flex-col items-center px-(--page-pad) py-20 text-center', className)}\n      {...rest}\n    >\n      {Icon && (\n        <span className=\"mb-6 flex size-14 items-center justify-center rounded-(--radius-pill) bg-(--stone) text-(--ink-3-aa)\">\n          <Icon size={24} aria-hidden />\n        </span>\n      )}\n      <Heading level={level} size=\"sub\">\n        {title}\n      </Heading>\n      {description && (\n        <p className=\"m-0 mt-2 max-w-sm text-sm leading-relaxed text-(--ink-3-aa)\">{description}</p>\n      )}\n      {action && <div className=\"mt-8\">{action}</div>}\n    </div>\n  )\n}\n\nexport default EmptyState\n"],"mappings":"AA+DI,SAMM,KANN;AA7DJ,SAAS,eAAkC;AAC3C,SAAS,UAAU;AAkDZ,SAAS,WAAW;AAAA,EACzB,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,gEAAgE,SAAS;AAAA,MACtF,GAAG;AAAA,MAEH;AAAA,gBACC,oBAAC,UAAK,WAAU,wGACd,8BAAC,QAAK,MAAM,IAAI,eAAW,MAAC,GAC9B;AAAA,QAEF,oBAAC,WAAQ,OAAc,MAAK,OACzB,iBACH;AAAA,QACC,eACC,oBAAC,OAAE,WAAU,+DAA+D,uBAAY;AAAA,QAEzF,UAAU,oBAAC,SAAI,WAAU,QAAQ,kBAAO;AAAA;AAAA;AAAA,EAC3C;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/ErrorState/ErrorState.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { HeadingLevel } from '../Heading/Heading.js';
+
+interface ErrorStateProps extends HTMLAttributes<HTMLElement> {
+    /** The status, set large — "404", "500". Decorative; the heading carries the meaning. */
+    code: ReactNode;
+    heading: ReactNode;
+    message: ReactNode;
+    /** The way back. Render it with {@link ERROR_ACTION_CLASS}. */
+    action: ReactNode;
+    /**
+     * The heading level `heading` opens, in the document the error state lands in.
+     *
+     * Defaults to `1`, and that is not a compromise: this component replaces the
+     * page rather than sitting inside one — its own ground, its own viewport, its
+     * own top clearance — so the page's single `h1` is the one it renders. Kept
+     * as the default, existing call sites render exactly the markup they did.
+     *
+     * The prop exists because the level was previously fixed, and the one piece
+     * of advice this component's documentation gives about headings — do not put
+     * it inside a shell that already has an `h1` — was advice a caller had no way
+     * to take. Now they do: inside a shell that owns the page heading, pass `2`.
+     *
+     * The size does not follow the level. `heading` renders at `--fs-heading` at
+     * every level; a failure demoted in the outline is the same failure.
+     */
+    level?: HeadingLevel;
+}
+/**
+ * The recovery affordance's look, exported so every error page offers the same
+ * one rather than each inventing a link style.
+ */
+declare const ERROR_ACTION_CLASS = "text-sm text-(--ink) underline decoration-(--rule-2) underline-offset-4 transition-colors duration-(--duration-fast) hover:decoration-(--ink)";
+/**
+ * A page that could not be shown.
+ *
+ * The code is set at the top of the type ladder and marked `aria-hidden` — read
+ * aloud, "404" before the sentence explaining it is noise, and the heading
+ * immediately after says the same thing in words.
+ *
+ * @example
+ * <ErrorState
+ *   code="404"
+ *   heading="Page not found"
+ *   message="The page you're looking for has moved, or never existed."
+ *   action={<a href="/" className={ERROR_ACTION_CLASS}>Back home</a>}
+ * />
+ * @example
+ * // Inside a shell that already owns the page's h1.
+ * <ErrorState level={2} code="503" heading="Invoices could not be loaded" … />
+ */
+declare function ErrorState({ code, heading, message, action, level, className, ...rest }: ErrorStateProps): react.JSX.Element;
+
+export { ERROR_ACTION_CLASS, ErrorState, type ErrorStateProps, ErrorState as default };

package/dist/components/ErrorState/ErrorState.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading } from "../Heading/Heading.js";
+import { cn } from "../../lib/cn.js";
+const ERROR_ACTION_CLASS = "text-sm text-(--ink) underline decoration-(--rule-2) underline-offset-4 transition-colors duration-(--duration-fast) hover:decoration-(--ink)";
+function ErrorState({
+  code,
+  heading,
+  message,
+  action,
+  level = 1,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      className: cn("flex min-h-svh flex-col justify-center bg-(--paper) pt-24", className),
+      ...rest,
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-(--w-page) px-(--page-pad)", children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            "aria-hidden": "true",
+            className: "m-0 font-heading text-[length:var(--fs-title)] leading-tight text-(--ink)",
+            children: code
+          }
+        ),
+        /* @__PURE__ */ jsx(Heading, { level, size: "heading", className: "mb-4 mt-6", children: heading }),
+        /* @__PURE__ */ jsx("p", { className: "mb-10 max-w-(--measure-record) text-base leading-relaxed text-(--ink-3-aa)", children: message }),
+        action
+      ] })
+    }
+  );
+}
+var ErrorState_default = ErrorState;
+export {
+  ERROR_ACTION_CLASS,
+  ErrorState,
+  ErrorState_default as default
+};
+//# sourceMappingURL=ErrorState.js.map

package/dist/components/ErrorState/ErrorState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ErrorState/ErrorState.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { Heading, type HeadingLevel } from '../Heading/Heading'\nimport { cn } from '../../lib/cn'\n\nexport interface ErrorStateProps extends HTMLAttributes<HTMLElement> {\n  /** The status, set large — \"404\", \"500\". Decorative; the heading carries the meaning. */\n  code: ReactNode\n  heading: ReactNode\n  message: ReactNode\n  /** The way back. Render it with {@link ERROR_ACTION_CLASS}. */\n  action: ReactNode\n  /**\n   * The heading level `heading` opens, in the document the error state lands in.\n   *\n   * Defaults to `1`, and that is not a compromise: this component replaces the\n   * page rather than sitting inside one — its own ground, its own viewport, its\n   * own top clearance — so the page's single `h1` is the one it renders. Kept\n   * as the default, existing call sites render exactly the markup they did.\n   *\n   * The prop exists because the level was previously fixed, and the one piece\n   * of advice this component's documentation gives about headings — do not put\n   * it inside a shell that already has an `h1` — was advice a caller had no way\n   * to take. Now they do: inside a shell that owns the page heading, pass `2`.\n   *\n   * The size does not follow the level. `heading` renders at `--fs-heading` at\n   * every level; a failure demoted in the outline is the same failure.\n   */\n  level?: HeadingLevel\n}\n\n/**\n * The recovery affordance's look, exported so every error page offers the same\n * one rather than each inventing a link style.\n */\nexport const ERROR_ACTION_CLASS =\n  'text-sm text-(--ink) underline decoration-(--rule-2) underline-offset-4 transition-colors duration-(--duration-fast) hover:decoration-(--ink)'\n\n/**\n * A page that could not be shown.\n *\n * The code is set at the top of the type ladder and marked `aria-hidden` — read\n * aloud, \"404\" before the sentence explaining it is noise, and the heading\n * immediately after says the same thing in words.\n *\n * @example\n * <ErrorState\n *   code=\"404\"\n *   heading=\"Page not found\"\n *   message=\"The page you're looking for has moved, or never existed.\"\n *   action={<a href=\"/\" className={ERROR_ACTION_CLASS}>Back home</a>}\n * />\n * @example\n * // Inside a shell that already owns the page's h1.\n * <ErrorState level={2} code=\"503\" heading=\"Invoices could not be loaded\" … />\n */\nexport function ErrorState({\n  code,\n  heading,\n  message,\n  action,\n  level = 1,\n  className,\n  ...rest\n}: ErrorStateProps) {\n  return (\n    <section\n      className={cn('flex min-h-svh flex-col justify-center bg-(--paper) pt-24', className)}\n      {...rest}\n    >\n      <div className=\"mx-auto w-full max-w-(--w-page) px-(--page-pad)\">\n        {/* `leading-tight`, not `leading-none`. At the title step this face\n            draws about 62px of ink, and a line box of exactly the font size is\n            47 — so the figures overflowed their own box by seven pixels at the\n            top and seven at the bottom, pressing up against the eyebrow above\n            and eating half the gap to the heading below. The box that says\n            nothing is spaced from is the box the ink is actually in. */}\n        <p\n          aria-hidden=\"true\"\n          className=\"m-0 font-heading text-[length:var(--fs-title)] leading-tight text-(--ink)\"\n        >\n          {code}\n        </p>\n        <Heading level={level} size=\"heading\" className=\"mb-4 mt-6\">\n          {heading}\n        </Heading>\n        <p className=\"mb-10 max-w-(--measure-record) text-base leading-relaxed text-(--ink-3-aa)\">\n          {message}\n        </p>\n        {action}\n      </div>\n    </section>\n  )\n}\n\nexport default ErrorState\n"],"mappings":"AAqEM,SAOE,KAPF;AApEN,SAAS,eAAkC;AAC3C,SAAS,UAAU;AAgCZ,MAAM,qBACX;AAoBK,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,6DAA6D,SAAS;AAAA,MACnF,GAAG;AAAA,MAEJ,+BAAC,SAAI,WAAU,mDAOb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,WAAQ,OAAc,MAAK,WAAU,WAAU,aAC7C,mBACH;AAAA,QACA,oBAAC,OAAE,WAAU,8EACV,mBACH;AAAA,QACC;AAAA,SACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,111 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Where the control sits relative to its label.
+ *
+ * `stacked` is the form row: label, control, message, down the page.
+ *
+ * `row` is the settings row: the label and its `description` in a column at the
+ * inline start, the control at the inline end, one rhythm down a settings
+ * screen. It is a layout, not a second component — the label wiring, the
+ * required marker and the message slot are the same three things either way,
+ * and a `SettingRow` beside this would be all three of them written twice.
+ */
+type FieldLayout = 'stacked' | 'row';
+interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visible label text; renders a `--danger` asterisk when `required`. */
+    label?: ReactNode;
+    /**
+     * The control's `id`. Optional: when omitted, the field generates one and
+     * puts it on the control child itself, so the label still points at
+     * something. Pass it explicitly when the id has to be stable across renders
+     * — a form library referencing it by name, say.
+     */
+    htmlFor?: string;
+    /**
+     * A second line under the LABEL, explaining what the setting does.
+     *
+     * Distinct from `hint`, which sits under the control and belongs to the input
+     * — "We never share it". This belongs to the thing being switched on, and it
+     * is what makes a settings row a settings row. Both reach the control through
+     * `aria-describedby`, so a row that has a description and an error announces
+     * both.
+     */
+    description?: ReactNode;
+    /** Helper copy shown below the control when there is no `error`. */
+    hint?: ReactNode;
+    /** Validation message; takes precedence over `hint` when present. */
+    error?: ReactNode;
+    required?: boolean;
+    /** Where the control sits relative to its label. See {@link FieldLayout}. */
+    layout?: FieldLayout;
+    children: ReactNode;
+}
+/**
+ * A labelled form row: label, control, and the one message below it.
+ *
+ * The visible message is only half of accessible validation — it must also
+ * reach the control. This wires `aria-describedby`, `aria-required` and
+ * `aria-invalid` onto the single control child so the requirement and the error
+ * are announced, not merely drawn (WCAG 1.3.1 / 3.3.1 / 4.1.2).
+ *
+ * An earlier version derived the message id from `htmlFor`, which meant a
+ * caller who left `htmlFor` off got a hint that was rendered and never
+ * announced — the failure was invisible in the browser and total for a screen
+ * reader. The id is now generated when it is not supplied.
+ *
+ * `hint` and `error` are one slot, not two stacked messages: when a field is
+ * wrong, the thing to read is what is wrong with it. `description` is a
+ * different slot again — it explains the SETTING, not the input, and it is what
+ * `layout="row"` puts under the label to make a settings row.
+ *
+ * **How the wiring reaches the control.** `cloneElement` puts the four
+ * attributes on the single child, and each control forwards them to whatever
+ * element carries the role — which is the child itself for `Input`, `Textarea`,
+ * `NativeSelect`, `Checkbox`, `Switch` and any host element written by hand, and
+ * a trigger, a group or a thumb further down for `Select`, `Combobox`,
+ * `DatePicker`, `Slider`, `RadioGroup` and `ToggleGroup`. The composites used to
+ * drop them on the floor, which drew a hint under a control that never announced
+ * it; a wrapper that appears to wire things up and does not is worse than one
+ * that never claimed to.
+ *
+ * The label's own id travels separately, through context, because a name is the
+ * one thing a prop cannot carry: a trigger whose text is its VALUE is named by
+ * the label AND by itself, so `<Field label="Region"><Select/></Field>`
+ * announces "Region, Australia" rather than either half.
+ *
+ * Three things stay out of reach, and each of them is the control's own markup
+ * rather than a gap in this wiring. A `<label for>` binds only to a labellable
+ * element, so the words do not click through to a `RadioGroup`, a `ToggleGroup`
+ * or a `Slider`: the first two are a `role="radiogroup"` named by pointing back
+ * at the label instead, exactly as a `<legend>` is, and the third carries
+ * `role="slider"` on a thumb below a roleless root. `required` reaches a control
+ * as `aria-required`, which `DatePicker`'s plain `<button>` trigger and a
+ * multiple-value `ToggleGroup`'s `role="toolbar"` have nowhere to put; there the
+ * asterisk is the only marker. And `aria-invalid` reaches `Slider`'s root rather
+ * than its thumb, so an errored slider is drawn wrong without being announced
+ * wrong.
+ *
+ * Each composite still takes its own `label` prop — that is what names it
+ * standing outside a field, and `Select`, `Combobox` and `DatePicker` warn when
+ * it is blank. It is no longer used INSTEAD of this one's.
+ *
+ * What no wiring can reach, the field says out loud in development rather than
+ * failing silently: `FIELD_CONTROL_NOT_LABELLABLE` when the child is a host
+ * element a label cannot bind to — the `<div>` wrapper that takes the id and
+ * leaves the control inside it with nothing — and `FIELD_CONTROL_NOT_WIRED`
+ * when there is no single element to wire at all.
+ *
+ * @example
+ * <Field label="Email" required hint="We never share it."><Input type="email" /></Field>
+ * @example
+ * <Field label="Name" error="Name is required."><Input /></Field>
+ * @example
+ * <Field layout="row" label="Email notifications" description="A digest every Monday.">
+ *   <Switch defaultChecked />
+ * </Field>
+ */
+declare function Field({ label, htmlFor, description, hint, error, required, layout, children, className, ...rest }: FieldProps): react.JSX.Element;
+
+export { Field, type FieldLayout, type FieldProps, Field as default };

package/dist/components/Field/Field.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label } from "@radix-ui/react-label";
+import { cloneElement, isValidElement, useId } from "react";
+import { cn } from "../../lib/cn.js";
+import { DEV, warn } from "../../lib/warn.js";
+import { FieldControlProvider } from "./field-control.js";
+function Field({
+  label,
+  htmlFor,
+  description,
+  hint,
+  error,
+  required,
+  layout = "stacked",
+  children,
+  className,
+  ...rest
+}) {
+  const generatedId = useId();
+  const controlId = htmlFor ?? generatedId;
+  const message = error ?? hint;
+  const messageId = message != null ? `${controlId}-${error != null ? "error" : "hint"}` : void 0;
+  const descriptionId = description != null ? `${controlId}-description` : void 0;
+  const labelId = label != null ? `${controlId}-label` : void 0;
+  let control = children;
+  if (isValidElement(children)) {
+    const child = children;
+    control = cloneElement(child, {
+      id: child.props.id ?? controlId,
+      "aria-describedby": [child.props["aria-describedby"], descriptionId, messageId].filter(Boolean).join(" ") || void 0,
+      "aria-required": required || child.props["aria-required"] || void 0,
+      "aria-invalid": error != null ? child.props["aria-invalid"] ?? true : child.props["aria-invalid"]
+    });
+  } else if (DEV) {
+    warn({
+      code: "FIELD_CONTROL_NOT_WIRED",
+      problem: "Field's child is not a single React element, so the label, aria-describedby, aria-required and aria-invalid were not applied to any control.",
+      field: "children",
+      fix: "Put exactly one control element directly inside Field. For a row of controls, give each its own Field and lay them out around it.",
+      component: "Field"
+    });
+  }
+  if (DEV && isValidElement(children) && typeof children.type === "string") {
+    const LABELLABLE = ["input", "select", "textarea", "button", "meter", "output", "progress"];
+    if (!LABELLABLE.includes(children.type)) {
+      warn({
+        code: "FIELD_CONTROL_NOT_LABELLABLE",
+        problem: `Field's child is a <${children.type}>, which cannot take a label \u2014 so the id, aria-describedby, aria-required and aria-invalid were applied to it rather than to a control.`,
+        field: "children",
+        fix: "Put the control itself directly inside Field, with no wrapper. For a row of controls, give each its own Field and lay them out around it.",
+        component: "Field"
+      });
+    }
+  }
+  const wired = /* @__PURE__ */ jsx(FieldControlProvider, { value: { labelId }, children: control });
+  const heading = (label != null || description != null) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    label != null && /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: controlId, className: "text-sm text-(--ink)", children: [
+      label,
+      required && /* @__PURE__ */ jsxs("span", { className: "text-(--danger)", "aria-hidden": "true", children: [
+        " ",
+        "*"
+      ] })
+    ] }),
+    description != null && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "m-0 text-xs text-(--ink-3-aa)", children: description })
+  ] });
+  const note = message != null && /* @__PURE__ */ jsx(
+    "p",
+    {
+      id: messageId,
+      className: cn("m-0 text-xs", error != null ? "text-(--danger)" : "text-(--ink-3-aa)"),
+      children: message
+    }
+  );
+  if (layout === "row") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), ...rest, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: heading }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: wired })
+      ] }),
+      note
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), ...rest, children: [
+    heading,
+    wired,
+    note
+  ] });
+}
+var Field_default = Field;
+export {
+  Field,
+  Field_default as default
+};
+//# sourceMappingURL=Field.js.map

package/dist/components/Field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Field/Field.tsx"],"sourcesContent":["'use client'\n\nimport { Label } from '@radix-ui/react-label'\nimport { cloneElement, isValidElement, useId } from 'react'\nimport type { HTMLAttributes, ReactElement, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { DEV, warn } from '../../lib/warn'\nimport { FieldControlProvider } from './field-control'\n\n/**\n * Where the control sits relative to its label.\n *\n * `stacked` is the form row: label, control, message, down the page.\n *\n * `row` is the settings row: the label and its `description` in a column at the\n * inline start, the control at the inline end, one rhythm down a settings\n * screen. It is a layout, not a second component — the label wiring, the\n * required marker and the message slot are the same three things either way,\n * and a `SettingRow` beside this would be all three of them written twice.\n */\nexport type FieldLayout = 'stacked' | 'row'\n\nexport interface FieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** Visible label text; renders a `--danger` asterisk when `required`. */\n  label?: ReactNode\n  /**\n   * The control's `id`. Optional: when omitted, the field generates one and\n   * puts it on the control child itself, so the label still points at\n   * something. Pass it explicitly when the id has to be stable across renders\n   * — a form library referencing it by name, say.\n   */\n  htmlFor?: string\n  /**\n   * A second line under the LABEL, explaining what the setting does.\n   *\n   * Distinct from `hint`, which sits under the control and belongs to the input\n   * — \"We never share it\". This belongs to the thing being switched on, and it\n   * is what makes a settings row a settings row. Both reach the control through\n   * `aria-describedby`, so a row that has a description and an error announces\n   * both.\n   */\n  description?: ReactNode\n  /** Helper copy shown below the control when there is no `error`. */\n  hint?: ReactNode\n  /** Validation message; takes precedence over `hint` when present. */\n  error?: ReactNode\n  required?: boolean\n  /** Where the control sits relative to its label. See {@link FieldLayout}. */\n  layout?: FieldLayout\n  children: ReactNode\n}\n\ntype WirableControl = ReactElement<{\n  id?: string\n  'aria-describedby'?: string\n  'aria-required'?: boolean\n  'aria-invalid'?: boolean | 'true' | 'false'\n}>\n\n/**\n * A labelled form row: label, control, and the one message below it.\n *\n * The visible message is only half of accessible validation — it must also\n * reach the control. This wires `aria-describedby`, `aria-required` and\n * `aria-invalid` onto the single control child so the requirement and the error\n * are announced, not merely drawn (WCAG 1.3.1 / 3.3.1 / 4.1.2).\n *\n * An earlier version derived the message id from `htmlFor`, which meant a\n * caller who left `htmlFor` off got a hint that was rendered and never\n * announced — the failure was invisible in the browser and total for a screen\n * reader. The id is now generated when it is not supplied.\n *\n * `hint` and `error` are one slot, not two stacked messages: when a field is\n * wrong, the thing to read is what is wrong with it. `description` is a\n * different slot again — it explains the SETTING, not the input, and it is what\n * `layout=\"row\"` puts under the label to make a settings row.\n *\n * **How the wiring reaches the control.** `cloneElement` puts the four\n * attributes on the single child, and each control forwards them to whatever\n * element carries the role — which is the child itself for `Input`, `Textarea`,\n * `NativeSelect`, `Checkbox`, `Switch` and any host element written by hand, and\n * a trigger, a group or a thumb further down for `Select`, `Combobox`,\n * `DatePicker`, `Slider`, `RadioGroup` and `ToggleGroup`. The composites used to\n * drop them on the floor, which drew a hint under a control that never announced\n * it; a wrapper that appears to wire things up and does not is worse than one\n * that never claimed to.\n *\n * The label's own id travels separately, through context, because a name is the\n * one thing a prop cannot carry: a trigger whose text is its VALUE is named by\n * the label AND by itself, so `<Field label=\"Region\"><Select/></Field>`\n * announces \"Region, Australia\" rather than either half.\n *\n * Three things stay out of reach, and each of them is the control's own markup\n * rather than a gap in this wiring. A `<label for>` binds only to a labellable\n * element, so the words do not click through to a `RadioGroup`, a `ToggleGroup`\n * or a `Slider`: the first two are a `role=\"radiogroup\"` named by pointing back\n * at the label instead, exactly as a `<legend>` is, and the third carries\n * `role=\"slider\"` on a thumb below a roleless root. `required` reaches a control\n * as `aria-required`, which `DatePicker`'s plain `<button>` trigger and a\n * multiple-value `ToggleGroup`'s `role=\"toolbar\"` have nowhere to put; there the\n * asterisk is the only marker. And `aria-invalid` reaches `Slider`'s root rather\n * than its thumb, so an errored slider is drawn wrong without being announced\n * wrong.\n *\n * Each composite still takes its own `label` prop — that is what names it\n * standing outside a field, and `Select`, `Combobox` and `DatePicker` warn when\n * it is blank. It is no longer used INSTEAD of this one's.\n *\n * What no wiring can reach, the field says out loud in development rather than\n * failing silently: `FIELD_CONTROL_NOT_LABELLABLE` when the child is a host\n * element a label cannot bind to — the `<div>` wrapper that takes the id and\n * leaves the control inside it with nothing — and `FIELD_CONTROL_NOT_WIRED`\n * when there is no single element to wire at all.\n *\n * @example\n * <Field label=\"Email\" required hint=\"We never share it.\"><Input type=\"email\" /></Field>\n * @example\n * <Field label=\"Name\" error=\"Name is required.\"><Input /></Field>\n * @example\n * <Field layout=\"row\" label=\"Email notifications\" description=\"A digest every Monday.\">\n *   <Switch defaultChecked />\n * </Field>\n */\nexport function Field({\n  label,\n  htmlFor,\n  description,\n  hint,\n  error,\n  required,\n  layout = 'stacked',\n  children,\n  className,\n  ...rest\n}: FieldProps) {\n  const generatedId = useId()\n  const controlId = htmlFor ?? generatedId\n  const message = error ?? hint\n  const messageId = message != null ? `${controlId}-${error != null ? 'error' : 'hint'}` : undefined\n  const descriptionId = description != null ? `${controlId}-description` : undefined\n  const labelId = label != null ? `${controlId}-label` : undefined\n\n  let control = children\n  if (isValidElement(children)) {\n    const child = children as WirableControl\n    control = cloneElement(child, {\n      id: child.props.id ?? controlId,\n      'aria-describedby':\n        [child.props['aria-describedby'], descriptionId, messageId].filter(Boolean).join(' ') ||\n        undefined,\n      'aria-required': required || child.props['aria-required'] || undefined,\n      'aria-invalid':\n        error != null ? (child.props['aria-invalid'] ?? true) : child.props['aria-invalid'],\n    })\n  } else if (DEV) {\n    warn({\n      code: 'FIELD_CONTROL_NOT_WIRED',\n      problem:\n        \"Field's child is not a single React element, so the label, aria-describedby, aria-required and aria-invalid were not applied to any control.\",\n      field: 'children',\n      fix: 'Put exactly one control element directly inside Field. For a row of controls, give each its own Field and lay them out around it.',\n      component: 'Field',\n    })\n  }\n\n  if (DEV && isValidElement(children) && typeof children.type === 'string') {\n    // A wrapper is the failure this exists for, and it is the one that looks\n    // most correct: `<Field><div><Input /></div></Field>` renders, and the\n    // label points at the DIV. The id, the describedby and the invalid state\n    // all land on a box, the control inside gets none of them, and a browser\n    // shows nothing wrong.\n    //\n    // Narrowed to HOST elements because that is the half that can be decided:\n    // a lowercase tag either takes a label or it does not. A function component\n    // might forward its props to a real control, and warning on those would\n    // fire on every correct use of Input, Select and the rest.\n    const LABELLABLE = ['input', 'select', 'textarea', 'button', 'meter', 'output', 'progress']\n    if (!LABELLABLE.includes(children.type)) {\n      warn({\n        code: 'FIELD_CONTROL_NOT_LABELLABLE',\n        problem: `Field's child is a <${children.type}>, which cannot take a label — so the id, aria-describedby, aria-required and aria-invalid were applied to it rather than to a control.`,\n        field: 'children',\n        fix: 'Put the control itself directly inside Field, with no wrapper. For a row of controls, give each its own Field and lay them out around it.',\n        component: 'Field',\n      })\n    }\n  }\n\n  // The label's id, for the controls that have to name themselves from it —\n  // everything else the field decided is already on the cloned child.\n  const wired = <FieldControlProvider value={{ labelId }}>{control}</FieldControlProvider>\n\n  const heading = (label != null || description != null) && (\n    <div className=\"flex flex-col gap-1\">\n      {label != null && (\n        <Label id={labelId} htmlFor={controlId} className=\"text-sm text-(--ink)\">\n          {label}\n          {required && (\n            <span className=\"text-(--danger)\" aria-hidden=\"true\">\n              {' '}\n              *\n            </span>\n          )}\n        </Label>\n      )}\n      {description != null && (\n        <p id={descriptionId} className=\"m-0 text-xs text-(--ink-3-aa)\">\n          {description}\n        </p>\n      )}\n    </div>\n  )\n\n  const note = message != null && (\n    <p\n      id={messageId}\n      className={cn('m-0 text-xs', error != null ? 'text-(--danger)' : 'text-(--ink-3-aa)')}\n    >\n      {message}\n    </p>\n  )\n\n  if (layout === 'row') {\n    return (\n      <div className={cn('flex flex-col gap-1.5', className)} {...rest}>\n        {/* `items-start` and not `items-center`: a description of two lines\n            would otherwise drag the switch down to the middle of the paragraph,\n            and a column of settings rows would have its controls on five\n            different lines. */}\n        <div className=\"flex items-start justify-between gap-6\">\n          <div className=\"min-w-0 flex-1\">{heading}</div>\n          <div className=\"shrink-0\">{wired}</div>\n        </div>\n        {note}\n      </div>\n    )\n  }\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)} {...rest}>\n      {heading}\n      {wired}\n      {note}\n    </div>\n  )\n}\n\nexport default Field\n"],"mappings":";AA8LgB,cAQJ,YARI;AA5LhB,SAAS,aAAa;AACtB,SAAS,cAAc,gBAAgB,aAAa;AAEpD,SAAS,UAAU;AACnB,SAAS,KAAK,YAAY;AAC1B,SAAS,4BAA4B;AAoH9B,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,cAAc,MAAM;AAC1B,QAAM,YAAY,WAAW;AAC7B,QAAM,UAAU,SAAS;AACzB,QAAM,YAAY,WAAW,OAAO,GAAG,SAAS,IAAI,SAAS,OAAO,UAAU,MAAM,KAAK;AACzF,QAAM,gBAAgB,eAAe,OAAO,GAAG,SAAS,iBAAiB;AACzE,QAAM,UAAU,SAAS,OAAO,GAAG,SAAS,WAAW;AAEvD,MAAI,UAAU;AACd,MAAI,eAAe,QAAQ,GAAG;AAC5B,UAAM,QAAQ;AACd,cAAU,aAAa,OAAO;AAAA,MAC5B,IAAI,MAAM,MAAM,MAAM;AAAA,MACtB,oBACE,CAAC,MAAM,MAAM,kBAAkB,GAAG,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KACpF;AAAA,MACF,iBAAiB,YAAY,MAAM,MAAM,eAAe,KAAK;AAAA,MAC7D,gBACE,SAAS,OAAQ,MAAM,MAAM,cAAc,KAAK,OAAQ,MAAM,MAAM,cAAc;AAAA,IACtF,CAAC;AAAA,EACH,WAAW,KAAK;AACd,SAAK;AAAA,MACH,MAAM;AAAA,MACN,SACE;AAAA,MACF,OAAO;AAAA,MACP,KAAK;AAAA,MACL,WAAW;AAAA,IACb,CAAC;AAAA,EACH;AAEA,MAAI,OAAO,eAAe,QAAQ,KAAK,OAAO,SAAS,SAAS,UAAU;AAWxE,UAAM,aAAa,CAAC,SAAS,UAAU,YAAY,UAAU,SAAS,UAAU,UAAU;AAC1F,QAAI,CAAC,WAAW,SAAS,SAAS,IAAI,GAAG;AACvC,WAAK;AAAA,QACH,MAAM;AAAA,QACN,SAAS,uBAAuB,SAAS,IAAI;AAAA,QAC7C,OAAO;AAAA,QACP,KAAK;AAAA,QACL,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF;AAIA,QAAM,QAAQ,oBAAC,wBAAqB,OAAO,EAAE,QAAQ,GAAI,mBAAQ;AAEjE,QAAM,WAAW,SAAS,QAAQ,eAAe,SAC/C,qBAAC,SAAI,WAAU,uBACZ;AAAA,aAAS,QACR,qBAAC,SAAM,IAAI,SAAS,SAAS,WAAW,WAAU,wBAC/C;AAAA;AAAA,MACA,YACC,qBAAC,UAAK,WAAU,mBAAkB,eAAY,QAC3C;AAAA;AAAA,QAAI;AAAA,SAEP;AAAA,OAEJ;AAAA,IAED,eAAe,QACd,oBAAC,OAAE,IAAI,eAAe,WAAU,iCAC7B,uBACH;AAAA,KAEJ;AAGF,QAAM,OAAO,WAAW,QACtB;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,MACJ,WAAW,GAAG,eAAe,SAAS,OAAO,oBAAoB,mBAAmB;AAAA,MAEnF;AAAA;AAAA,EACH;AAGF,MAAI,WAAW,OAAO;AACpB,WACE,qBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MAK1D;AAAA,2BAAC,SAAI,WAAU,0CACb;AAAA,4BAAC,SAAI,WAAU,kBAAkB,mBAAQ;AAAA,QACzC,oBAAC,SAAI,WAAU,YAAY,iBAAM;AAAA,SACnC;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MACzD;AAAA;AAAA,IACA;AAAA,IACA;AAAA,KACH;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/components/Field/field-control.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+
+/**
+ * The one thing a `Field` cannot hand its control as a prop: where its label is.
+ *
+ * Everything else the field decides — the id, `aria-describedby`,
+ * `aria-required`, `aria-invalid` — travels as props on the cloned child, and a
+ * control that swallowed them was simply not forwarding them to the element
+ * that carries the role. That is a bug in the control, not a missing channel.
+ *
+ * A NAME is different. A trigger whose text is its value has to be named by the
+ * label AND by itself, which is two ids in one `aria-labelledby`; a group has to
+ * point BACK at the label, because `<label for>` does not bind to a
+ * `role="radiogroup"`. Neither can be expressed by a value the field computes on
+ * its own, so the label's id is published here and the control assembles the
+ * rest.
+ */
+interface FieldControl {
+    /** The label element's id, or undefined when the field has no label. */
+    labelId?: string;
+}
+declare const FieldControlProvider: react.Provider<FieldControl | null>;
+/**
+ * The enclosing `Field`'s label, if there is one.
+ *
+ * Null is a supported state, not a failure: every control here works outside a
+ * field, and each names itself from its own `label` prop when it must.
+ */
+declare function useFieldControl(): FieldControl | null;
+
+export { type FieldControl, FieldControlProvider, useFieldControl };

package/dist/components/Field/field-control.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, useContext } from "react";
+const FieldControlContext = createContext(null);
+const FieldControlProvider = FieldControlContext.Provider;
+function useFieldControl() {
+  return useContext(FieldControlContext);
+}
+export {
+  FieldControlProvider,
+  useFieldControl
+};
+//# sourceMappingURL=field-control.js.map

package/dist/components/Field/field-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Field/field-control.ts"],"sourcesContent":["'use client'\n\nimport { createContext, useContext } from 'react'\n\n/**\n * The one thing a `Field` cannot hand its control as a prop: where its label is.\n *\n * Everything else the field decides — the id, `aria-describedby`,\n * `aria-required`, `aria-invalid` — travels as props on the cloned child, and a\n * control that swallowed them was simply not forwarding them to the element\n * that carries the role. That is a bug in the control, not a missing channel.\n *\n * A NAME is different. A trigger whose text is its value has to be named by the\n * label AND by itself, which is two ids in one `aria-labelledby`; a group has to\n * point BACK at the label, because `<label for>` does not bind to a\n * `role=\"radiogroup\"`. Neither can be expressed by a value the field computes on\n * its own, so the label's id is published here and the control assembles the\n * rest.\n */\nexport interface FieldControl {\n  /** The label element's id, or undefined when the field has no label. */\n  labelId?: string\n}\n\nconst FieldControlContext = createContext<FieldControl | null>(null)\n\nexport const FieldControlProvider = FieldControlContext.Provider\n\n/**\n * The enclosing `Field`'s label, if there is one.\n *\n * Null is a supported state, not a failure: every control here works outside a\n * field, and each names itself from its own `label` prop when it must.\n */\nexport function useFieldControl(): FieldControl | null {\n  return useContext(FieldControlContext)\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AAsB1C,MAAM,sBAAsB,cAAmC,IAAI;AAE5D,MAAM,uBAAuB,oBAAoB;AAQjD,SAAS,kBAAuC;AACrD,SAAO,WAAW,mBAAmB;AACvC;","names":[]}

package/dist/components/FigureBand/FigureBand.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+interface Figure {
+    /** Stable key; also what a caller keys its own data by. */
+    id: string;
+    /** The label over the value. */
+    label: string;
+    /** The value itself, set in the serif at the band's scale. */
+    value: ReactNode;
+    /** The quiet line under it — a trend, a qualifier, a second fact. */
+    note?: ReactNode;
+}
+interface FigureBandProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children'> {
+    figures: Figure[];
+    /**
+     * How large the value is set.
+     *
+     * `lead` is for a band that is the point of its page — a stats headline,
+     * where the numbers ARE the content. `sub` is for a band that supports the
+     * page around it, and keeps the ladder honest: a supporting figure must not
+     * be set at the same size as the page's own subject.
+     */
+    scale?: 'lead' | 'sub';
+    /** Names the band for assistive tech when it has no visible heading of its own. */
+    label?: string;
+}
+/** A framed, responsive group of related facts with semantic term/value pairs. */
+declare function FigureBand({ figures, scale, label, className, ...rest }: FigureBandProps): react.JSX.Element | null;
+
+export { type Figure, FigureBand, type FigureBandProps, FigureBand as default };

package/dist/components/FigureBand/FigureBand.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const VALUE_SCALE = {
+  lead: "text-[clamp(2rem,4cqi,2.75rem)] leading-[1.15] tracking-[-0.02em] tabular-nums",
+  sub: "text-[length:var(--fs-sub)] leading-[1.2]"
+};
+function FigureBand({
+  figures,
+  scale = "lead",
+  label,
+  className,
+  ...rest
+}) {
+  if (figures.length === 0) return null;
+  const columns = Math.min(4, Math.ceil(figures.length / Math.ceil(figures.length / 4)));
+  const columnClass = {
+    1: "@xl:basis-full",
+    2: "@xl:basis-[calc(50%-.5px)]",
+    3: "@xl:basis-[calc(33.333333%-.667px)]",
+    4: "@xl:basis-[calc(25%-.75px)]"
+  }[columns];
+  return /* @__PURE__ */ jsx("div", { className: "folio-figure-band @container w-full", children: /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "aria-label": label,
+      className: cn(
+        "m-0 flex w-full flex-wrap gap-px overflow-hidden rounded-[10px] border border-(--rule) bg-(--rule)",
+        className
+      ),
+      ...rest,
+      children: figures.map((figure) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn("min-w-0 grow basis-[calc(50%-.5px)] bg-(--paper) px-5 py-5 @xl:px-6 @xl:py-6", columnClass),
+          children: [
+            /* @__PURE__ */ jsx("dt", { className: "mb-2 font-sans text-[13px] font-normal leading-normal text-(--ink-3-aa)", children: figure.label }),
+            /* @__PURE__ */ jsx("dd", { className: cn("m-0 font-heading font-normal text-(--ink)", VALUE_SCALE[scale]), children: figure.value }),
+            figure.note !== void 0 && figure.note !== null && /* @__PURE__ */ jsx("dd", { className: "m-0 mt-2.5 font-sans text-[13px] font-light leading-[1.5] text-(--ink-3-aa)", children: figure.note })
+          ]
+        },
+        figure.id
+      ))
+    }
+  ) });
+}
+var FigureBand_default = FigureBand;
+export {
+  FigureBand,
+  FigureBand_default as default
+};
+//# sourceMappingURL=FigureBand.js.map

package/dist/components/FigureBand/FigureBand.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FigureBand/FigureBand.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface Figure {\n  /** Stable key; also what a caller keys its own data by. */\n  id: string\n  /** The label over the value. */\n  label: string\n  /** The value itself, set in the serif at the band's scale. */\n  value: ReactNode\n  /** The quiet line under it — a trend, a qualifier, a second fact. */\n  note?: ReactNode\n}\n\nexport interface FigureBandProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children'> {\n  figures: Figure[]\n  /**\n   * How large the value is set.\n   *\n   * `lead` is for a band that is the point of its page — a stats headline,\n   * where the numbers ARE the content. `sub` is for a band that supports the\n   * page around it, and keeps the ladder honest: a supporting figure must not\n   * be set at the same size as the page's own subject.\n   */\n  scale?: 'lead' | 'sub'\n  /** Names the band for assistive tech when it has no visible heading of its own. */\n  label?: string\n}\n\nconst VALUE_SCALE = {\n  lead: 'text-[clamp(2rem,4cqi,2.75rem)] leading-[1.15] tracking-[-0.02em] tabular-nums',\n  sub: 'text-[length:var(--fs-sub)] leading-[1.2]',\n} as const\n\n/** A framed, responsive group of related facts with semantic term/value pairs. */\nexport function FigureBand({\n  figures,\n  scale = 'lead',\n  label,\n  className,\n  ...rest\n}: FigureBandProps) {\n  if (figures.length === 0) return null\n\n  // Balance six metrics into two complete rows instead of a four-plus-two grid.\n  const columns = Math.min(4, Math.ceil(figures.length / Math.ceil(figures.length / 4)))\n  const columnClass = {\n    1: '@xl:basis-full',\n    2: '@xl:basis-[calc(50%-.5px)]',\n    3: '@xl:basis-[calc(33.333333%-.667px)]',\n    4: '@xl:basis-[calc(25%-.75px)]',\n  }[columns]\n\n  return (\n    <div className=\"folio-figure-band @container w-full\">\n      <dl\n        aria-label={label}\n        className={cn(\n          'm-0 flex w-full flex-wrap gap-px overflow-hidden rounded-[10px] border border-(--rule) bg-(--rule)',\n          className,\n        )}\n        {...rest}\n      >\n        {figures.map((figure) => (\n          <div\n            key={figure.id}\n            className={cn('min-w-0 grow basis-[calc(50%-.5px)] bg-(--paper) px-5 py-5 @xl:px-6 @xl:py-6', columnClass)}\n          >\n            <dt className=\"mb-2 font-sans text-[13px] font-normal leading-normal text-(--ink-3-aa)\">{figure.label}</dt>\n            <dd className={cn('m-0 font-heading font-normal text-(--ink)', VALUE_SCALE[scale])}>\n              {figure.value}\n            </dd>\n            {figure.note !== undefined && figure.note !== null && (\n              <dd className=\"m-0 mt-2.5 font-sans text-[13px] font-light leading-[1.5] text-(--ink-3-aa)\">\n                {figure.note}\n              </dd>\n            )}\n          </div>\n        ))}\n      </dl>\n    </div>\n  )\n}\n\nexport default FigureBand\n"],"mappings":"AAgEU,SAIE,KAJF;AA/DV,SAAS,UAAU;AA4BnB,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AACP;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,MAAI,QAAQ,WAAW,EAAG,QAAO;AAGjC,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,SAAS,KAAK,KAAK,QAAQ,SAAS,CAAC,CAAC,CAAC;AACrF,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL,EAAE,OAAO;AAET,SACE,oBAAC,SAAI,WAAU,uCACb;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,kBAAQ,IAAI,CAAC,WACZ;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,GAAG,gFAAgF,WAAW;AAAA,UAEzG;AAAA,gCAAC,QAAG,WAAU,2EAA2E,iBAAO,OAAM;AAAA,YACtG,oBAAC,QAAG,WAAW,GAAG,6CAA6C,YAAY,KAAK,CAAC,GAC9E,iBAAO,OACV;AAAA,YACC,OAAO,SAAS,UAAa,OAAO,SAAS,QAC5C,oBAAC,QAAG,WAAU,+EACX,iBAAO,MACV;AAAA;AAAA;AAAA,QAVG,OAAO;AAAA,MAYd,CACD;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}