@misoto22/design 0.3.1

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

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional lucide icon, shown muted inside a quiet circle. */
+    icon?: LucideIcon;
+    title: ReactNode;
+    description?: ReactNode;
+    /** The one thing to do next. An empty state without an action is a dead end. */
+    action?: ReactNode;
+}
+/**
+ * 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>}
+ * />
+ */
+declare function EmptyState({ icon: Icon, title, description, action, className, ...rest }: EmptyStateProps): react.JSX.Element;
+
+export { EmptyState, type EmptyStateProps, EmptyState as default };

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  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, strokeWidth: 1.5, "aria-hidden": true }) }),
+        /* @__PURE__ */ jsx("h3", { className: "m-0 font-heading text-[length:var(--fs-sub)] font-normal text-(--ink)", 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 { LucideIcon } from 'lucide-react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Optional lucide icon, shown muted inside a quiet circle. */\n  icon?: LucideIcon\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\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 */\nexport function EmptyState({\n  icon: Icon,\n  title,\n  description,\n  action,\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} strokeWidth={1.5} aria-hidden />\n        </span>\n      )}\n      <h3 className=\"m-0 font-heading text-[length:var(--fs-sub)] font-normal text-(--ink)\">\n        {title}\n      </h3>\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":"AAsCI,SAMM,KANN;AApCJ,SAAS,UAAU;AA2BZ,SAAS,WAAW;AAAA,EACzB,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;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,aAAa,KAAK,eAAW,MAAC,GAChD;AAAA,QAEF,oBAAC,QAAG,WAAU,yEACX,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,34 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+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 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>}
+ * />
+ */
+declare function ErrorState({ code, heading, message, action, 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,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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, 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-none text-(--ink)",
+            children: code
+          }
+        ),
+        /* @__PURE__ */ jsx("h1", { className: "mb-4 mt-6 font-heading text-[length:var(--fs-heading)] font-normal text-(--ink)", 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 { 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\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 */\nexport function ErrorState({ code, heading, message, action, className, ...rest }: 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        <p\n          aria-hidden=\"true\"\n          className=\"m-0 font-heading text-[length:var(--fs-title)] leading-none text-(--ink)\"\n        >\n          {code}\n        </p>\n        <h1 className=\"mb-4 mt-6 font-heading text-[length:var(--fs-heading)] font-normal text-(--ink)\">\n          {heading}\n        </h1>\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":"AAwCM,SACE,KADF;AAvCN,SAAS,UAAU;AAeZ,MAAM,qBACX;AAiBK,SAAS,WAAW,EAAE,MAAM,SAAS,SAAS,QAAQ,WAAW,GAAG,KAAK,GAAoB;AAClG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,6DAA6D,SAAS;AAAA,MACnF,GAAG;AAAA,MAEJ,+BAAC,SAAI,WAAU,mDACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,QAAG,WAAU,mFACX,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,44 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+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;
+    /** 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;
+    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.
+ *
+ * @example
+ * <Field label="Email" required hint="We never share it."><Input type="email" /></Field>
+ * @example
+ * <Field label="Name" error="Name is required."><Input /></Field>
+ */
+declare function Field({ label, htmlFor, hint, error, required, children, className, ...rest }: FieldProps): react.JSX.Element;
+
+export { Field, type FieldProps, Field as default };

package/dist/components/Field/Field.js

@@ -0,0 +1,54 @@
+"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";
+function Field({
+  label,
+  htmlFor,
+  hint,
+  error,
+  required,
+  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;
+  let control = children;
+  if (isValidElement(children)) {
+    const child = children;
+    control = cloneElement(child, {
+      id: child.props.id ?? controlId,
+      "aria-describedby": [child.props["aria-describedby"], 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"]
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), ...rest, children: [
+    label != null && /* @__PURE__ */ jsxs(Label, { htmlFor: controlId, className: "text-sm text-(--ink)", children: [
+      label,
+      required && /* @__PURE__ */ jsxs("span", { className: "text-(--danger)", "aria-hidden": "true", children: [
+        " ",
+        "*"
+      ] })
+    ] }),
+    control,
+    message != null && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: messageId,
+        className: cn("m-0 text-xs", error != null ? "text-(--danger)" : "text-(--ink-3-aa)"),
+        children: message
+      }
+    )
+  ] });
+}
+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'\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  /** 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  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.\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 */\nexport function Field({\n  label,\n  htmlFor,\n  hint,\n  error,\n  required,\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\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'], messageId].filter(Boolean).join(' ') || 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  }\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)} {...rest}>\n      {label != null && (\n        <Label 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      {control}\n      {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    </div>\n  )\n}\n\nexport default Field\n"],"mappings":";AAuFY,SASJ,KATI;AArFZ,SAAS,aAAa;AACtB,SAAS,cAAc,gBAAgB,aAAa;AAEpD,SAAS,UAAU;AAgDZ,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;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;AAEzF,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,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAAA,MAC5E,iBAAiB,YAAY,MAAM,MAAM,eAAe,KAAK;AAAA,MAC7D,gBACE,SAAS,OAAQ,MAAM,MAAM,cAAc,KAAK,OAAQ,MAAM,MAAM,cAAc;AAAA,IACtF,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,MACzD;AAAA,aAAS,QACR,qBAAC,SAAM,SAAS,WAAW,WAAU,wBAClC;AAAA;AAAA,MACA,YACC,qBAAC,UAAK,WAAU,mBAAkB,eAAY,QAC3C;AAAA;AAAA,QAAI;AAAA,SAEP;AAAA,OAEJ;AAAA,IAED;AAAA,IACA,WAAW,QACV;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,eAAe,SAAS,OAAO,oBAAoB,mBAAmB;AAAA,QAEnF;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

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

@@ -0,0 +1,51 @@
+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 mono kicker 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 row of counted facts, divided by hairlines and nothing else.
+ *
+ * A `<dl>`, because that is what this is: each cell is a term and its value,
+ * and a grid of `<div>`s tells a screen reader nothing about which number goes
+ * with which label.
+ *
+ * Each divider width names the cells that do NOT open a row rather than adding
+ * a rule and taking it back — an `undo` at equal specificity resolves on
+ * Tailwind's own sort order, which is not something a layout should depend on.
+ * Drawn this way, no edge is ever painted past the last column.
+ *
+ * @example
+ * <FigureBand
+ *   label="At a glance"
+ *   figures={[
+ *     { id: 'posts', label: 'Posts', value: '48', note: '+6 this year' },
+ *     { id: 'photos', label: 'Frames', value: '1,204' },
+ *   ]}
+ * />
+ */
+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,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const VALUE_SCALE = {
+  lead: "text-[length:var(--fs-lead)] leading-[1.1] tracking-[-0.02em]",
+  sub: "text-[length:var(--fs-sub)] leading-[1.2]"
+};
+function FigureBand({
+  figures,
+  scale = "lead",
+  label,
+  className,
+  ...rest
+}) {
+  if (figures.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "aria-label": label,
+      className: cn(
+        // A container, not a viewport reader: four figures across is a decision
+        // about how wide THIS band is, and it is wrong in a 390px frame inside a
+        // 1440px window.
+        // `w-full` is load-bearing: `@container` applies `contain: inline-size`,
+        // which computes the element's width WITHOUT looking at its contents.
+        // As a shrink-to-fit flex item that resolved to zero, and the band
+        // rendered as two 0px columns of overlapping text.
+        "@container m-0 w-full grid grid-cols-2 border-y border-(--rule) @5xl:grid-cols-4",
+        "[&>div]:border-(--rule) @max-5xl:[&>div:nth-child(even)]:border-s @max-5xl:[&>div:nth-child(n+3)]:border-t @5xl:[&>div:not(:first-child)]:border-s",
+        className
+      ),
+      ...rest,
+      children: figures.map((figure) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-transparent px-[clamp(1rem,calc(3*var(--fluid)),1.625rem)] py-[clamp(1.5rem,calc(4*var(--fluid)),2.25rem)]",
+          children: [
+            /* @__PURE__ */ jsx("dt", { className: "mb-3 eyebrow 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 mono kicker 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-[length:var(--fs-lead)] leading-[1.1] tracking-[-0.02em]',\n  sub: 'text-[length:var(--fs-sub)] leading-[1.2]',\n} as const\n\n/**\n * A row of counted facts, divided by hairlines and nothing else.\n *\n * A `<dl>`, because that is what this is: each cell is a term and its value,\n * and a grid of `<div>`s tells a screen reader nothing about which number goes\n * with which label.\n *\n * Each divider width names the cells that do NOT open a row rather than adding\n * a rule and taking it back — an `undo` at equal specificity resolves on\n * Tailwind's own sort order, which is not something a layout should depend on.\n * Drawn this way, no edge is ever painted past the last column.\n *\n * @example\n * <FigureBand\n *   label=\"At a glance\"\n *   figures={[\n *     { id: 'posts', label: 'Posts', value: '48', note: '+6 this year' },\n *     { id: 'photos', label: 'Frames', value: '1,204' },\n *   ]}\n * />\n */\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  return (\n    <dl\n      aria-label={label}\n      className={cn(\n        // A container, not a viewport reader: four figures across is a decision\n        // about how wide THIS band is, and it is wrong in a 390px frame inside a\n        // 1440px window.\n        // `w-full` is load-bearing: `@container` applies `contain: inline-size`,\n        // which computes the element's width WITHOUT looking at its contents.\n        // As a shrink-to-fit flex item that resolved to zero, and the band\n        // rendered as two 0px columns of overlapping text.\n        '@container m-0 w-full grid grid-cols-2 border-y border-(--rule) @5xl:grid-cols-4',\n        '[&>div]:border-(--rule) @max-5xl:[&>div:nth-child(even)]:border-s @max-5xl:[&>div:nth-child(n+3)]:border-t @5xl:[&>div:not(:first-child)]:border-s',\n        className,\n      )}\n      {...rest}\n    >\n      {figures.map((figure) => (\n        <div\n          key={figure.id}\n          className=\"bg-transparent px-[clamp(1rem,calc(3*var(--fluid)),1.625rem)] py-[clamp(1.5rem,calc(4*var(--fluid)),2.25rem)]\"\n        >\n          <dt className=\"mb-3 eyebrow 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  )\n}\n\nexport default FigureBand\n"],"mappings":"AAkFQ,SAIE,KAJF;AAjFR,SAAS,UAAU;AA4BnB,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AACP;AAuBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,kBAAQ,IAAI,CAAC,WACZ;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,gCAAC,QAAG,WAAU,kCAAkC,iBAAO,OAAM;AAAA,YAC7D,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;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/FloatingIconButton/FloatingIconButton.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface FloatingIconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * Which bottom corner the control is pinned to, in READING order —
+     * `end` is the right in English and the left in Arabic. Naming the sides
+     * `left`/`right` would have hard-coded one script's layout into the API.
+     */
+    position: 'start' | 'end';
+    /** Accessible name — the button has no visible text, so this is its only name. */
+    label: string;
+    children: ReactNode;
+}
+/**
+ * A round action pinned to a screen corner.
+ *
+ * A translucent paper ground with a backdrop blur rather than a drop shadow —
+ * the White Reset has no elevation ramp, so what separates the control from
+ * the page under it is the blur and the hairline, not a glow.
+ *
+ * @example
+ * <FloatingIconButton position="right" label="Back to top" onClick={scrollUp}>
+ *   <ArrowUp size={16} />
+ * </FloatingIconButton>
+ */
+declare function FloatingIconButton({ position, label, children, className, ...rest }: FloatingIconButtonProps): react.JSX.Element;
+
+export { FloatingIconButton, type FloatingIconButtonProps, FloatingIconButton as default };

package/dist/components/FloatingIconButton/FloatingIconButton.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const POSITION_CLASS = { start: "bottom-20 start-6", end: "bottom-6 end-6" };
+function FloatingIconButton({
+  position,
+  label,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      className: cn(
+        "fixed z-(--z-drawer) flex size-(--control-h-md) items-center justify-center rounded-(--radius-pill) border border-(--rule-2) bg-(--paper)/90 text-(--ink-2) backdrop-blur-sm transition-colors duration-(--duration-fast) hover:border-(--ink) hover:text-(--ink)",
+        POSITION_CLASS[position],
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var FloatingIconButton_default = FloatingIconButton;
+export {
+  FloatingIconButton,
+  FloatingIconButton_default as default
+};
+//# sourceMappingURL=FloatingIconButton.js.map

package/dist/components/FloatingIconButton/FloatingIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/FloatingIconButton/FloatingIconButton.tsx"],"sourcesContent":["'use client'\n\nimport type { ButtonHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface FloatingIconButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /**\n   * Which bottom corner the control is pinned to, in READING order —\n   * `end` is the right in English and the left in Arabic. Naming the sides\n   * `left`/`right` would have hard-coded one script's layout into the API.\n   */\n  position: 'start' | 'end'\n  /** Accessible name — the button has no visible text, so this is its only name. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * Full literal class strings per corner. Tailwind only generates classes it can\n * see verbatim in the source, so the side is never interpolated into a string.\n *\n * The start corner sits higher: browser and OS chrome (a download shelf, a\n * status toast) commonly occupies the corner where reading begins, and the\n * global scroll action keeps the far one.\n */\nconst POSITION_CLASS = { start: 'bottom-20 start-6', end: 'bottom-6 end-6' } as const\n\n/**\n * A round action pinned to a screen corner.\n *\n * A translucent paper ground with a backdrop blur rather than a drop shadow —\n * the White Reset has no elevation ramp, so what separates the control from\n * the page under it is the blur and the hairline, not a glow.\n *\n * @example\n * <FloatingIconButton position=\"right\" label=\"Back to top\" onClick={scrollUp}>\n *   <ArrowUp size={16} />\n * </FloatingIconButton>\n */\nexport function FloatingIconButton({\n  position,\n  label,\n  children,\n  className,\n  ...rest\n}: FloatingIconButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      className={cn(\n        'fixed z-(--z-drawer) flex size-(--control-h-md) items-center justify-center rounded-(--radius-pill) border border-(--rule-2) bg-(--paper)/90 text-(--ink-2) backdrop-blur-sm transition-colors duration-(--duration-fast) hover:border-(--ink) hover:text-(--ink)',\n        POSITION_CLASS[position],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport default FloatingIconButton\n"],"mappings":";AAgDI;AA7CJ,SAAS,UAAU;AAuBnB,MAAM,iBAAiB,EAAE,OAAO,qBAAqB,KAAK,iBAAiB;AAcpE,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,eAAe,QAAQ;AAAA,QACvB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,6BAAQ;","names":[]}

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { InputHTMLAttributes, Ref } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Paints the resting border with `--danger` and reflects `aria-invalid`. */
+    invalid?: boolean;
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * A single line of text entry.
+ *
+ * Shares `CONTROL_BASE` with Textarea and Select, so the three cannot drift
+ * apart. Pair with `Field` for the label, hint and error — an input with a
+ * placeholder and no label is not labelled, because the placeholder disappears
+ * the moment anyone types.
+ *
+ * @example
+ * <Field label="Email" htmlFor="email"><Input id="email" type="email" /></Field>
+ */
+declare function Input({ invalid, className, ref, 'aria-invalid': ariaInvalid, ...rest }: InputProps): react.JSX.Element;
+
+export { Input, type InputProps, Input as default };

package/dist/components/Input/Input.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+function Input({ invalid, className, ref, "aria-invalid": ariaInvalid, ...rest }) {
+  const bad = isInvalid(invalid, ariaInvalid);
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      "aria-invalid": ariaInvalid ?? (invalid ? true : void 0),
+      className: cn(CONTROL_BASE, bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting, className),
+      ...rest
+    }
+  );
+}
+var Input_default = Input;
+export {
+  Input,
+  Input_default as default
+};
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import type { InputHTMLAttributes, Ref } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  ref?: Ref<HTMLInputElement>\n}\n\n/**\n * A single line of text entry.\n *\n * Shares `CONTROL_BASE` with Textarea and Select, so the three cannot drift\n * apart. Pair with `Field` for the label, hint and error — an input with a\n * placeholder and no label is not labelled, because the placeholder disappears\n * the moment anyone types.\n *\n * @example\n * <Field label=\"Email\" htmlFor=\"email\"><Input id=\"email\" type=\"email\" /></Field>\n */\nexport function Input({ invalid, className, ref, 'aria-invalid': ariaInvalid, ...rest }: InputProps) {\n  const bad = isInvalid(invalid, ariaInvalid)\n  return (\n    <input\n      ref={ref}\n      aria-invalid={ariaInvalid ?? (invalid ? true : undefined)}\n      className={cn(CONTROL_BASE, bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting, className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Input\n"],"mappings":"AAwBI;AAvBJ,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AAmBjD,SAAS,MAAM,EAAE,SAAS,WAAW,KAAK,gBAAgB,aAAa,GAAG,KAAK,GAAe;AACnG,QAAM,MAAM,UAAU,SAAS,WAAW;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,gBAAc,gBAAgB,UAAU,OAAO;AAAA,MAC/C,WAAW,GAAG,cAAc,MAAM,eAAe,UAAU,eAAe,SAAS,SAAS;AAAA,MAC3F,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+}
+/**
+ * A key on a keyboard, set as one.
+ *
+ * Renders a `<kbd>`, which is the element that means this — a `<span>` styled
+ * to look like a key tells a screen reader nothing. Sized in `em` so it tracks
+ * whatever type it sits beside rather than fixing itself at one px value, which
+ * is how the same shortcut ended up three different sizes across a page.
+ *
+ * @example
+ * Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the palette.
+ */
+declare function Kbd({ children, className, ...rest }: KbdProps): react.JSX.Element;
+
+export { Kbd, type KbdProps, Kbd as default };

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function Kbd({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      className: cn(
+        "inline-flex min-w-[1.6em] items-center justify-center rounded-(--radius-sm) border border-(--rule-2) px-[0.4em] py-[0.1em] font-mono text-[0.8em] leading-[1.6] text-(--ink-2)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var Kbd_default = Kbd;
+export {
+  Kbd,
+  Kbd_default as default
+};
+//# sourceMappingURL=Kbd.js.map

package/dist/components/Kbd/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Kbd/Kbd.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\n  children: ReactNode\n}\n\n/**\n * A key on a keyboard, set as one.\n *\n * Renders a `<kbd>`, which is the element that means this — a `<span>` styled\n * to look like a key tells a screen reader nothing. Sized in `em` so it tracks\n * whatever type it sits beside rather than fixing itself at one px value, which\n * is how the same shortcut ended up three different sizes across a page.\n *\n * @example\n * Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the palette.\n */\nexport function Kbd({ children, className, ...rest }: KbdProps) {\n  return (\n    <kbd\n      className={cn(\n        'inline-flex min-w-[1.6em] items-center justify-center rounded-(--radius-sm) border border-(--rule-2) px-[0.4em] py-[0.1em] font-mono text-[0.8em] leading-[1.6] text-(--ink-2)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </kbd>\n  )\n}\n\nexport default Kbd\n"],"mappings":"AAoBI;AAnBJ,SAAS,UAAU;AAiBZ,SAAS,IAAI,EAAE,UAAU,WAAW,GAAG,KAAK,GAAa;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}

package/dist/components/LinkArrow/LinkArrow.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+/** The glyph itself, exported so a non-React surface can use the same mark. */
+declare const EXTERNAL_LINK_ARROW = "\u2197";
+type LinkArrowProps = HTMLAttributes<HTMLSpanElement>;
+/**
+ * The mark on a link that leaves the page — outbound, or on to a full index.
+ *
+ * Call sites used to write a bare `↗` inside the link text, which inherited the
+ * link's own size (a 17px arrow beside a 17px word, competing with it) and was
+ * read aloud as "north east arrow" because nothing hid it.
+ *
+ * `inline-block` is load-bearing twice over: it stops an underlined parent
+ * drawing its rule through the glyph, and it is what `align` is measured
+ * against. Sized in `em`, so it tracks whatever type it sits beside; coloured
+ * against paper, so a call site on a reversed plate passes its own colour.
+ *
+ * @example
+ * <a href="https://example.com">Read the paper<LinkArrow /></a>
+ */
+declare function LinkArrow({ className, ...rest }: LinkArrowProps): react.JSX.Element;
+
+export { EXTERNAL_LINK_ARROW, LinkArrow, type LinkArrowProps, LinkArrow as default };

package/dist/components/LinkArrow/LinkArrow.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const EXTERNAL_LINK_ARROW = "\u2197";
+function LinkArrow({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "ms-[0.22em] inline-block align-[0.28em] font-mono text-[0.68em] leading-none text-(--ink-3-aa)",
+        className
+      ),
+      ...rest,
+      children: EXTERNAL_LINK_ARROW
+    }
+  );
+}
+var LinkArrow_default = LinkArrow;
+export {
+  EXTERNAL_LINK_ARROW,
+  LinkArrow,
+  LinkArrow_default as default
+};
+//# sourceMappingURL=LinkArrow.js.map

package/dist/components/LinkArrow/LinkArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/LinkArrow/LinkArrow.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** The glyph itself, exported so a non-React surface can use the same mark. */\nexport const EXTERNAL_LINK_ARROW = '↗'\n\nexport type LinkArrowProps = HTMLAttributes<HTMLSpanElement>\n\n/**\n * The mark on a link that leaves the page — outbound, or on to a full index.\n *\n * Call sites used to write a bare `↗` inside the link text, which inherited the\n * link's own size (a 17px arrow beside a 17px word, competing with it) and was\n * read aloud as \"north east arrow\" because nothing hid it.\n *\n * `inline-block` is load-bearing twice over: it stops an underlined parent\n * drawing its rule through the glyph, and it is what `align` is measured\n * against. Sized in `em`, so it tracks whatever type it sits beside; coloured\n * against paper, so a call site on a reversed plate passes its own colour.\n *\n * @example\n * <a href=\"https://example.com\">Read the paper<LinkArrow /></a>\n */\nexport function LinkArrow({ className, ...rest }: LinkArrowProps) {\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        'ms-[0.22em] inline-block align-[0.28em] font-mono text-[0.68em] leading-none text-(--ink-3-aa)',\n        className,\n      )}\n      {...rest}\n    >\n      {EXTERNAL_LINK_ARROW}\n    </span>\n  )\n}\n\nexport default LinkArrow\n"],"mappings":"AAyBI;AAxBJ,SAAS,UAAU;AAGZ,MAAM,sBAAsB;AAmB5B,SAAS,UAAU,EAAE,WAAW,GAAG,KAAK,GAAmB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/components/NativeSelect/NativeSelect.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { SelectHTMLAttributes, Ref } from 'react';
+
+interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    /** Paints the resting border with `--danger` and reflects `aria-invalid`. */
+    invalid?: boolean;
+    ref?: Ref<HTMLSelectElement>;
+}
+/**
+ * A native `<select>`, restyled.
+ *
+ * The escape hatch, not the default — `Select` is the styled one. Reach for
+ * this where the platform's own picker is genuinely better: a very long list on
+ * a phone, a form that must work without JavaScript, a page where the last
+ * kilobyte matters. The browser gives typeahead and the mobile wheel for free,
+ * and those are real.
+ *
+ * What it cannot do is look like the rest of the system once open. The option
+ * list is drawn by the operating system, so it carries none of these tokens —
+ * which is exactly why it stopped being the default.
+ *
+ * @example
+ * <NativeSelect defaultValue="au"><option value="au">Australia</option></NativeSelect>
+ */
+declare function NativeSelect({ invalid, className, ref, children, 'aria-invalid': ariaInvalid, ...rest }: NativeSelectProps): react.JSX.Element;
+
+export { NativeSelect, type NativeSelectProps, NativeSelect as default };