@misoto22/folio 0.0.0 → 0.17.0

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { RiAddLine } from "@remixicon/react";
+import { cn } from "../../lib/cn.js";
+const Accordion = AccordionPrimitive.Root;
+function AccordionItem({ title, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Item,
+    {
+      className: cn("border-b border-(--rule)", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "m-0", children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, { className: "group flex w-full items-center justify-between gap-4 py-4 text-start font-sans text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)", children: [
+          title,
+          /* @__PURE__ */ jsx(
+            RiAddLine,
+            {
+              size: 16,
+              "aria-hidden": true,
+              className: "shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-base) ease-(--ease-out-expo) group-data-[state=open]:rotate-45"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          AccordionPrimitive.Content,
+          {
+            "data-folio-animated": true,
+            className: "overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[folio-accordion-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[folio-accordion-down_var(--duration-base)_var(--ease)]",
+            children: /* @__PURE__ */ jsx("div", { className: "pb-4 pe-8", children })
+          }
+        )
+      ]
+    }
+  );
+}
+var Accordion_default = Accordion;
+export {
+  Accordion,
+  AccordionItem,
+  Accordion_default as default
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client'\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { RiAddLine } from '@remixicon/react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * Radix root, re-exported. Pass `type=\"single\" collapsible` for an FAQ and\n * `type=\"multiple\"` for a settings stack; Radix's own discriminated union then\n * types `value` correctly for each.\n */\nexport const Accordion = AccordionPrimitive.Root\n\nexport interface AccordionItemProps\n  extends Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'children' | 'title'> {\n  /** The row's summary — what the reader clicks. Named `title` rather than\n   *  inherited from the DOM attribute of the same name, which is a tooltip. */\n  title: ReactNode\n  children: ReactNode\n}\n\n/**\n * One disclosure row: a hairline-ruled trigger and its panel.\n *\n * The marker is a plus that rotates into a minus, not a chevron. A chevron says\n * \"there is more below\"; a plus says \"this opens\" — and in a stack of rows the\n * difference decides whether the reader expects navigation or expansion.\n *\n * The panel animates on Radix's own `--radix-accordion-content-height`, so it\n * opens to its real height without measuring anything at the call site.\n *\n * @example\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"ship\" title=\"How do I ship it?\">Push to main.</AccordionItem>\n * </Accordion>\n */\nexport function AccordionItem({ title, children, className, ...rest }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      className={cn('border-b border-(--rule)', className)}\n      {...rest}\n    >\n      <AccordionPrimitive.Header className=\"m-0\">\n        <AccordionPrimitive.Trigger className=\"group flex w-full items-center justify-between gap-4 py-4 text-start font-sans text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)\">\n          {title}\n          <RiAddLine\n            size={16}\n            aria-hidden\n            className=\"shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-base) ease-(--ease-out-expo) group-data-[state=open]:rotate-45\"\n          />\n        </AccordionPrimitive.Trigger>\n      </AccordionPrimitive.Header>\n      <AccordionPrimitive.Content\n        data-folio-animated\n        className=\"overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[folio-accordion-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[folio-accordion-down_var(--duration-base)_var(--ease)]\"\n      >\n        <div className=\"pb-4 pe-8\">{children}</div>\n      </AccordionPrimitive.Content>\n    </AccordionPrimitive.Item>\n  )\n}\n\nexport default Accordion\n"],"mappings":";AA4CQ,SAEE,KAFF;AA1CR,YAAY,wBAAwB;AACpC,SAAS,iBAAiB;AAE1B,SAAS,UAAU;AAOZ,MAAM,YAAY,mBAAmB;AAyBrC,SAAS,cAAc,EAAE,OAAO,UAAU,WAAW,GAAG,KAAK,GAAuB;AACzF,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ;AAAA,4BAAC,mBAAmB,QAAnB,EAA0B,WAAU,OACnC,+BAAC,mBAAmB,SAAnB,EAA2B,WAAU,yKACnC;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,eAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ;AAAA,WACF,GACF;AAAA,QACA;AAAA,UAAC,mBAAmB;AAAA,UAAnB;AAAA,YACC,uBAAmB;AAAA,YACnB,WAAU;AAAA,YAEV,8BAAC,SAAI,WAAU,aAAa,UAAS;AAAA;AAAA,QACvC;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    tone?: AlertTone;
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Optional action — a retry, a link to the settings that fix this. */
+    action?: ReactNode;
+    /** Hides the leading icon for a dense inline notice. */
+    hideIcon?: boolean;
+}
+/**
+ * A message about the page, in place.
+ *
+ * Carries `role="alert"` for the danger tone and `role="status"` for the rest,
+ * which is the difference between interrupting the reader and waiting for a
+ * pause. Getting that backwards is the usual accessibility failure here: a
+ * "saved" toast that talks over someone mid-sentence, or a payment error that
+ * is never announced at all.
+ *
+ * The tone is the message's SEVERITY, not its decoration. Colour is doubled by
+ * an icon and by the words, so the meaning survives both monochrome printing
+ * and colour-blindness.
+ *
+ * @example
+ * <Alert tone="danger" title="Upload failed">The file exceeds 25 MB.</Alert>
+ */
+declare function Alert({ tone, title, children, action, hideIcon, className, ...rest }: AlertProps): react.JSX.Element;
+
+export { Alert, type AlertProps, type AlertTone, Alert as default };

package/dist/components/Alert/Alert.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiAlertLine, RiCheckboxCircleLine, RiCloseCircleLine, RiInformationLine } from "@remixicon/react";
+import { cn } from "../../lib/cn.js";
+const TONE = {
+  info: { surface: "border-(--rule-2) bg-(--paper-2)", mark: "text-(--ink-2)", icon: RiInformationLine, live: "polite" },
+  success: { surface: "border-transparent bg-(--ok-soft)", mark: "text-(--ok)", icon: RiCheckboxCircleLine, live: "polite" },
+  warning: { surface: "border-transparent bg-(--warn-soft)", mark: "text-(--warn)", icon: RiAlertLine, live: "polite" },
+  /* Assertive: a danger alert interrupts because whatever the reader is doing
+     is already failing. The other three wait for a pause in speech. */
+  danger: { surface: "border-transparent bg-(--danger-soft)", mark: "text-(--danger)", icon: RiCloseCircleLine, live: "assertive" }
+};
+function Alert({
+  tone = "info",
+  title,
+  children,
+  action,
+  hideIcon = false,
+  className,
+  ...rest
+}) {
+  const { surface, mark, icon: Icon, live } = TONE[tone];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: tone === "danger" ? "alert" : "status",
+      "aria-live": live,
+      className: cn(
+        "flex gap-3 rounded-(--radius) border p-4 text-sm text-(--ink-2)",
+        surface,
+        className
+      ),
+      ...rest,
+      children: [
+        !hideIcon && /* @__PURE__ */ jsx(Icon, { size: 18, className: cn("mt-px shrink-0", mark), "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "m-0 font-medium text-(--ink)", children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", title && "mt-1"), children }),
+          action && /* @__PURE__ */ jsx("div", { className: "mt-3", children: action })
+        ] })
+      ]
+    }
+  );
+}
+var Alert_default = Alert;
+export {
+  Alert,
+  Alert_default as default
+};
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { RiAlertLine, RiCheckboxCircleLine, RiCloseCircleLine, RiInformationLine } from '@remixicon/react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger'\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  tone?: AlertTone\n  title?: ReactNode\n  children?: ReactNode\n  /** Optional action — a retry, a link to the settings that fix this. */\n  action?: ReactNode\n  /** Hides the leading icon for a dense inline notice. */\n  hideIcon?: boolean\n}\n\nconst TONE: Record<\n  AlertTone,\n  { surface: string; mark: string; icon: typeof RiInformationLine; live: 'polite' | 'assertive' }\n> = {\n  info: { surface: 'border-(--rule-2) bg-(--paper-2)', mark: 'text-(--ink-2)', icon: RiInformationLine, live: 'polite' },\n  success: { surface: 'border-transparent bg-(--ok-soft)', mark: 'text-(--ok)', icon: RiCheckboxCircleLine, live: 'polite' },\n  warning: { surface: 'border-transparent bg-(--warn-soft)', mark: 'text-(--warn)', icon: RiAlertLine, live: 'polite' },\n  /* Assertive: a danger alert interrupts because whatever the reader is doing\n     is already failing. The other three wait for a pause in speech. */\n  danger: { surface: 'border-transparent bg-(--danger-soft)', mark: 'text-(--danger)', icon: RiCloseCircleLine, live: 'assertive' },\n}\n\n/**\n * A message about the page, in place.\n *\n * Carries `role=\"alert\"` for the danger tone and `role=\"status\"` for the rest,\n * which is the difference between interrupting the reader and waiting for a\n * pause. Getting that backwards is the usual accessibility failure here: a\n * \"saved\" toast that talks over someone mid-sentence, or a payment error that\n * is never announced at all.\n *\n * The tone is the message's SEVERITY, not its decoration. Colour is doubled by\n * an icon and by the words, so the meaning survives both monochrome printing\n * and colour-blindness.\n *\n * @example\n * <Alert tone=\"danger\" title=\"Upload failed\">The file exceeds 25 MB.</Alert>\n */\nexport function Alert({\n  tone = 'info',\n  title,\n  children,\n  action,\n  hideIcon = false,\n  className,\n  ...rest\n}: AlertProps) {\n  const { surface, mark, icon: Icon, live } = TONE[tone]\n\n  return (\n    <div\n      role={tone === 'danger' ? 'alert' : 'status'}\n      aria-live={live}\n      className={cn(\n        'flex gap-3 rounded-(--radius) border p-4 text-sm text-(--ink-2)',\n        surface,\n        className,\n      )}\n      {...rest}\n    >\n      {!hideIcon && <Icon size={18} className={cn('mt-px shrink-0', mark)} aria-hidden />}\n      <div className=\"min-w-0 flex-1\">\n        {title && <p className=\"m-0 font-medium text-(--ink)\">{title}</p>}\n        {children && <div className={cn('leading-relaxed', title && 'mt-1')}>{children}</div>}\n        {action && <div className=\"mt-3\">{action}</div>}\n      </div>\n    </div>\n  )\n}\n\nexport default Alert\n"],"mappings":"AAkEoB,cACd,YADc;AAlEpB,SAAS,aAAa,sBAAsB,mBAAmB,yBAAyB;AAExF,SAAS,UAAU;AAcnB,MAAM,OAGF;AAAA,EACF,MAAM,EAAE,SAAS,oCAAoC,MAAM,kBAAkB,MAAM,mBAAmB,MAAM,SAAS;AAAA,EACrH,SAAS,EAAE,SAAS,qCAAqC,MAAM,eAAe,MAAM,sBAAsB,MAAM,SAAS;AAAA,EACzH,SAAS,EAAE,SAAS,uCAAuC,MAAM,iBAAiB,MAAM,aAAa,MAAM,SAAS;AAAA;AAAA;AAAA,EAGpH,QAAQ,EAAE,SAAS,yCAAyC,MAAM,mBAAmB,MAAM,mBAAmB,MAAM,YAAY;AAClI;AAkBO,SAAS,MAAM;AAAA,EACpB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,EAAE,SAAS,MAAM,MAAM,MAAM,KAAK,IAAI,KAAK,IAAI;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,SAAS,WAAW,UAAU;AAAA,MACpC,aAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,SAAC,YAAY,oBAAC,QAAK,MAAM,IAAI,WAAW,GAAG,kBAAkB,IAAI,GAAG,eAAW,MAAC;AAAA,QACjF,qBAAC,SAAI,WAAU,kBACZ;AAAA,mBAAS,oBAAC,OAAE,WAAU,gCAAgC,iBAAM;AAAA,UAC5D,YAAY,oBAAC,SAAI,WAAW,GAAG,mBAAmB,SAAS,MAAM,GAAI,UAAS;AAAA,UAC9E,UAAU,oBAAC,SAAI,WAAU,QAAQ,kBAAO;AAAA,WAC3C;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/components/AppShell/AppShell.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** Navigation content for the sidebar (e.g. a stack of `NavItem`s). */
+    sidebar: ReactNode;
+    /** Optional content for the sticky topbar, laid out after the mobile toggle. */
+    topbar?: ReactNode;
+    /** Optional brand lockup pinned to the top of the sidebar. */
+    brand?: ReactNode;
+    /**
+     * Which element the content well renders as.
+     *
+     * `main` is right for the shell of an application, and is the default. A
+     * document may contain exactly one `main` landmark, so an AppShell rendered
+     * INSIDE another page — a preview on a documentation site, a screenshot
+     * harness — must pass `div`, or the page has two and assistive tech can no
+     * longer answer "where is the content".
+     */
+    contentAs?: 'main' | 'div';
+    /**
+     * Names the sidebar landmark.
+     *
+     * Two `complementary` landmarks with the same name cannot be told apart, and
+     * a shell rendered inside another page — a preview, a screenshot harness —
+     * makes exactly that pair. It is also the only way a non-English app gets a
+     * landmark name its readers can read.
+     */
+    sidebarLabel?: string;
+    /** Names the navigation landmark inside the sidebar. */
+    navLabel?: string;
+    /** The drawer toggle, closed and open. */
+    openLabel?: string;
+    closeLabel?: string;
+    children: ReactNode;
+}
+/**
+ * Two columns on a desktop, one column and a drawer on a phone.
+ *
+ * The drawer closes on Escape as well as on the scrim, because a drawer that
+ * only closes by tapping outside it strands a keyboard user inside a menu they
+ * cannot leave. The scrim is a `<button>` for the same reason — a `<div>` with
+ * an `onClick` is not reachable by keyboard and not announced as anything.
+ *
+ * Below `md` the closed drawer is `inert`. Sliding it off-screen is a visual
+ * state and nothing more: without that attribute every link in it stays
+ * focusable and stays in the accessibility tree, so Tab from the toggle walks
+ * into a menu nobody can see. Closing it also returns focus to the toggle,
+ * because the element focus was on is the element that just left.
+ *
+ * @example
+ * <AppShell brand={<Wordmark />} sidebar={<NavItem href="/">Home</NavItem>}>
+ *   <Card>…</Card>
+ * </AppShell>
+ */
+declare function AppShell({ sidebar, topbar, brand, contentAs: Content, sidebarLabel, navLabel, openLabel, closeLabel, children, className, ...rest }: AppShellProps): react.JSX.Element;
+
+export { AppShell, type AppShellProps, AppShell as default };

package/dist/components/AppShell/AppShell.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiCloseLine, RiMenuLine } from "@remixicon/react";
+import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
+import { cn } from "../../lib/cn.js";
+const DESKTOP = "(min-width: 768px)";
+function cannotMeasure() {
+  return typeof window === "undefined" || typeof window.matchMedia !== "function";
+}
+function subscribeToWidth(onChange) {
+  if (cannotMeasure()) return () => {
+  };
+  const list = window.matchMedia(DESKTOP);
+  list.addEventListener("change", onChange);
+  return () => list.removeEventListener("change", onChange);
+}
+function readIsDrawer() {
+  if (cannotMeasure()) return false;
+  return !window.matchMedia(DESKTOP).matches;
+}
+function readIsDrawerOnServer() {
+  return false;
+}
+function useIsDrawer() {
+  return useSyncExternalStore(subscribeToWidth, readIsDrawer, readIsDrawerOnServer);
+}
+function AppShell({
+  sidebar,
+  topbar,
+  brand,
+  contentAs: Content = "main",
+  sidebarLabel = "Sidebar",
+  navLabel = "Primary",
+  openLabel = "Open navigation",
+  closeLabel = "Close navigation",
+  children,
+  className,
+  ...rest
+}) {
+  const [open, setOpen] = useState(false);
+  const sidebarId = useId();
+  const toggle = useRef(null);
+  const isDrawer = useIsDrawer();
+  const close = useCallback(() => {
+    setOpen(false);
+    toggle.current?.focus();
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, close]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("min-h-svh bg-(--paper) md:grid md:grid-cols-[15rem_1fr]", className),
+      ...rest,
+      children: [
+        open && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": closeLabel,
+            onClick: close,
+            className: "fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            id: sidebarId,
+            "aria-label": sidebarLabel,
+            inert: isDrawer && !open,
+            "data-folio-animated": true,
+            className: cn(
+              "fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)",
+              // The drawer slides in from the edge reading STARTS at, so in an
+              // right-to-left document it comes from the right.
+              open ? "translate-x-0" : "-translate-x-full rtl:translate-x-full",
+              "md:static md:z-auto md:translate-x-0"
+            ),
+            children: [
+              brand && /* @__PURE__ */ jsx("div", { className: "flex h-(--bar-h) items-center border-b border-(--rule) px-5", children: brand }),
+              /* @__PURE__ */ jsx(
+                "nav",
+                {
+                  "aria-label": navLabel,
+                  className: "flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim",
+                  children: sidebar
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-(--z-sticky) flex h-(--bar-h) items-center gap-3 border-b border-(--rule) bg-(--paper)/85 px-(--page-pad) backdrop-blur", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": open ? closeLabel : openLabel,
+                "aria-expanded": open,
+                "aria-controls": sidebarId,
+                ref: toggle,
+                onClick: () => setOpen((previous) => !previous),
+                className: "-ms-2.5 grid size-11 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:text-(--ink) md:hidden",
+                children: open ? /* @__PURE__ */ jsx(RiCloseLine, { size: 20, "aria-hidden": true }) : /* @__PURE__ */ jsx(RiMenuLine, { size: 20, "aria-hidden": true })
+              }
+            ),
+            topbar
+          ] }),
+          /* @__PURE__ */ jsx(Content, { className: "mx-auto w-full max-w-(--w-page) px-(--page-pad) py-8", children })
+        ] })
+      ]
+    }
+  );
+}
+var AppShell_default = AppShell;
+export {
+  AppShell,
+  AppShell_default as default
+};
+//# sourceMappingURL=AppShell.js.map

package/dist/components/AppShell/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["'use client'\n\nimport { RiCloseLine, RiMenuLine } from '@remixicon/react'\nimport { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * The width the sidebar stops being a drawer at — `--breakpoint-md`, the same\n * 768px every `md:` variant below is compiled against. Written out rather than\n * read from the token, because a media query string is not a custom property\n * and `matchMedia` cannot resolve one.\n */\nconst DESKTOP = '(min-width: 768px)'\n\n/** True where nothing can answer the question: a server, or a DOM without it. */\nfunction cannotMeasure(): boolean {\n  return typeof window === 'undefined' || typeof window.matchMedia !== 'function'\n}\n\nfunction subscribeToWidth(onChange: () => void): () => void {\n  if (cannotMeasure()) return () => {}\n  const list = window.matchMedia(DESKTOP)\n  list.addEventListener('change', onChange)\n  return () => list.removeEventListener('change', onChange)\n}\n\n/**\n * Falls back to \"not a drawer\", which is the safe answer rather than the likely\n * one: an environment that cannot measure must not take an entire application's\n * navigation out of the accessibility tree on a guess.\n */\nfunction readIsDrawer(): boolean {\n  if (cannotMeasure()) return false\n  return !window.matchMedia(DESKTOP).matches\n}\n\nfunction readIsDrawerOnServer(): boolean {\n  return false\n}\n\n/**\n * True while the sidebar is a drawer rather than a column.\n *\n * `open` alone cannot answer this. It is false on a desktop too, where the\n * sidebar is a visible grid column — so anything keyed on `open` by itself\n * would hide the navigation of every desktop app in the package.\n *\n * `useSyncExternalStore` rather than an effect: the server has no viewport, so\n * it renders the desktop answer and React reconciles the real one on hydration\n * instead of the two silently disagreeing.\n */\nfunction useIsDrawer(): boolean {\n  return useSyncExternalStore(subscribeToWidth, readIsDrawer, readIsDrawerOnServer)\n}\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Navigation content for the sidebar (e.g. a stack of `NavItem`s). */\n  sidebar: ReactNode\n  /** Optional content for the sticky topbar, laid out after the mobile toggle. */\n  topbar?: ReactNode\n  /** Optional brand lockup pinned to the top of the sidebar. */\n  brand?: ReactNode\n  /**\n   * Which element the content well renders as.\n   *\n   * `main` is right for the shell of an application, and is the default. A\n   * document may contain exactly one `main` landmark, so an AppShell rendered\n   * INSIDE another page — a preview on a documentation site, a screenshot\n   * harness — must pass `div`, or the page has two and assistive tech can no\n   * longer answer \"where is the content\".\n   */\n  contentAs?: 'main' | 'div'\n  /**\n   * Names the sidebar landmark.\n   *\n   * Two `complementary` landmarks with the same name cannot be told apart, and\n   * a shell rendered inside another page — a preview, a screenshot harness —\n   * makes exactly that pair. It is also the only way a non-English app gets a\n   * landmark name its readers can read.\n   */\n  sidebarLabel?: string\n  /** Names the navigation landmark inside the sidebar. */\n  navLabel?: string\n  /** The drawer toggle, closed and open. */\n  openLabel?: string\n  closeLabel?: string\n  children: ReactNode\n}\n\n/**\n * Two columns on a desktop, one column and a drawer on a phone.\n *\n * The drawer closes on Escape as well as on the scrim, because a drawer that\n * only closes by tapping outside it strands a keyboard user inside a menu they\n * cannot leave. The scrim is a `<button>` for the same reason — a `<div>` with\n * an `onClick` is not reachable by keyboard and not announced as anything.\n *\n * Below `md` the closed drawer is `inert`. Sliding it off-screen is a visual\n * state and nothing more: without that attribute every link in it stays\n * focusable and stays in the accessibility tree, so Tab from the toggle walks\n * into a menu nobody can see. Closing it also returns focus to the toggle,\n * because the element focus was on is the element that just left.\n *\n * @example\n * <AppShell brand={<Wordmark />} sidebar={<NavItem href=\"/\">Home</NavItem>}>\n *   <Card>…</Card>\n * </AppShell>\n */\nexport function AppShell({\n  sidebar,\n  topbar,\n  brand,\n  contentAs: Content = 'main',\n  sidebarLabel = 'Sidebar',\n  navLabel = 'Primary',\n  openLabel = 'Open navigation',\n  closeLabel = 'Close navigation',\n  children,\n  className,\n  ...rest\n}: AppShellProps) {\n  const [open, setOpen] = useState(false)\n  const sidebarId = useId()\n  const toggle = useRef<HTMLButtonElement>(null)\n  const isDrawer = useIsDrawer()\n\n  /**\n   * Both ways out, so both return focus.\n   *\n   * Escape used to leave the reader standing on a link that had just slid off\n   * screen; the scrim is worse, because the scrim itself is the focused element\n   * and it unmounts, dropping focus to `<body>`. Either way the drawer is about\n   * to become inert, and focus inside an inert subtree is focus the browser\n   * throws away.\n   */\n  const close = useCallback(() => {\n    setOpen(false)\n    toggle.current?.focus()\n  }, [])\n\n  useEffect(() => {\n    if (!open) return\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') close()\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [open, close])\n\n  return (\n    <div\n      className={cn('min-h-svh bg-(--paper) md:grid md:grid-cols-[15rem_1fr]', className)}\n      {...rest}\n    >\n      {open && (\n        <button\n          type=\"button\"\n          aria-label={closeLabel}\n          onClick={close}\n          className=\"fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden\"\n        />\n      )}\n\n      <aside\n        id={sidebarId}\n        aria-label={sidebarLabel}\n        // Only below `md`, and only while it is shut. Above the breakpoint this\n        // element is the page's navigation column, and inert would delete it.\n        inert={isDrawer && !open}\n        // The transition is motion like any other, and the reduced-motion rule\n        // in keyframes.css matches on this attribute.\n        data-folio-animated\n        className={cn(\n          'fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)',\n          // The drawer slides in from the edge reading STARTS at, so in an\n          // right-to-left document it comes from the right.\n          open ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full',\n          'md:static md:z-auto md:translate-x-0',\n        )}\n      >\n        {brand && (\n          <div className=\"flex h-(--bar-h) items-center border-b border-(--rule) px-5\">{brand}</div>\n        )}\n        <nav\n          aria-label={navLabel}\n          className=\"flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim\"\n        >\n          {sidebar}\n        </nav>\n      </aside>\n\n      <div className=\"flex min-w-0 flex-col\">\n        <header className=\"sticky top-0 z-(--z-sticky) flex h-(--bar-h) items-center gap-3 border-b border-(--rule) bg-(--paper)/85 px-(--page-pad) backdrop-blur\">\n          <button\n            type=\"button\"\n            aria-label={open ? closeLabel : openLabel}\n            aria-expanded={open}\n            aria-controls={sidebarId}\n            ref={toggle}\n            onClick={() => setOpen((previous) => !previous)}\n            className=\"-ms-2.5 grid size-11 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:text-(--ink) md:hidden\"\n          >\n            {open ? <RiCloseLine size={20} aria-hidden /> : <RiMenuLine size={20} aria-hidden />}\n          </button>\n          {topbar}\n        </header>\n\n        <Content className=\"mx-auto w-full max-w-(--w-page) px-(--page-pad) py-8\">{children}</Content>\n      </div>\n    </div>\n  )\n}\n\nexport default AppShell\n"],"mappings":"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","names":[]}

package/dist/components/Article/Article.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface ArticleProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Rendered HTML from a Markdown or MDX pipeline.
+     *
+     * Trusted markup only. This sets `dangerouslySetInnerHTML`, so it must come
+     * from content you control — a repository's own posts, a CMS you author —
+     * and never from a reader. Untrusted Markdown has to be sanitised before it
+     * reaches here; that is a pipeline decision, not a component one, and a
+     * sanitiser bolted on inside a styling primitive would be the wrong place to
+     * make it and the easiest place to get it wrong.
+     */
+    html?: string;
+    /** The element to render. `article` by default; pass `div` for a fragment. */
+    as?: 'article' | 'div' | 'section';
+}
+/**
+ * The long-form reading surface.
+ *
+ * Everything a Markdown pipeline can emit — headings, prose, lists, tables,
+ * quotations, code, figures, footnotes, MathML — set in this system's type,
+ * colour and rules. The styles live in `article.css` rather than in a class
+ * string, because the input is not JSX: there is no component to hang a class
+ * on when the markup arrived as a string, so the contract has to be the element
+ * names themselves.
+ *
+ * That file is published on its own as `@misoto22/folio/article.css`, so a
+ * site with its own Markdown pipeline can take the reading surface without
+ * taking the components — which is the case this exists for. Three sites
+ * hand-rolling a prose stylesheet is three prose stylesheets that drift.
+ *
+ * Composable either way: pass `html` for a rendered string, or children for
+ * real elements — one or the other, never both. `html` wins when both arrive,
+ * and says so in development: `html=""` is still `html`, which made losing a
+ * page of children a thing that could happen without a word. A post that mixes
+ * the two — prose with a `Diagram` dropped into the middle — renders its blocks
+ * in order and gives each one an `Article`. Inside one, these rules BEAT a component's utilities:
+ * `article.css` is imported unlayered while Tailwind's utilities sit in
+ * `@layer utilities`, and an unlayered rule wins over a layered one whatever
+ * either one's specificity is. That is the mechanism rather than an accident —
+ * it is what lets a `Markdown` paragraph, a `Text` carrying `m-0`, give its
+ * margin up to the article's rhythm. A component that has to hold a property
+ * inside an article needs an inline style, not a class.
+ *
+ * @example
+ * <Article html={renderedMarkdown} />
+ * @example
+ * <Article>
+ *   <h1>The White Reset</h1>
+ *   <p className="lead">A monochrome system for software and writing.</p>
+ *   <Diagram spec={spec} />
+ * </Article>
+ */
+declare function Article({ html, as: Comp, className, children, ...rest }: ArticleProps): react.JSX.Element;
+
+export { Article, type ArticleProps, Article as default };

package/dist/components/Article/Article.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { DEV, warn } from "../../lib/warn.js";
+function rendersSomething(children) {
+  return children !== void 0 && children !== null && children !== false && children !== "";
+}
+function Article({ html, as: Comp = "article", className, children, ...rest }) {
+  if (html !== void 0) {
+    if (DEV && rendersSomething(children)) {
+      warn({
+        code: "ARTICLE_HTML_AND_CHILDREN",
+        problem: "Article was given html and children together, so the children are not rendered at all. html is written with dangerouslySetInnerHTML, and there is no wrapper that could hold both \u2014 the rhythm is a child combinator, so anything put around the rendered string costs every block inside it its spacing.",
+        field: "html",
+        fix: "Render the two in order as two Articles, or drop whichever of html and children is not the content. An empty html string still counts as html.",
+        component: "Article"
+      });
+    }
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        "data-folio-article": true,
+        className,
+        dangerouslySetInnerHTML: { __html: html },
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Comp, { "data-folio-article": true, className, ...rest, children });
+}
+var Article_default = Article;
+export {
+  Article,
+  Article_default as default
+};
+//# sourceMappingURL=Article.js.map

package/dist/components/Article/Article.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Article/Article.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { DEV, warn } from '../../lib/warn'\n\nexport interface ArticleProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Rendered HTML from a Markdown or MDX pipeline.\n   *\n   * Trusted markup only. This sets `dangerouslySetInnerHTML`, so it must come\n   * from content you control — a repository's own posts, a CMS you author —\n   * and never from a reader. Untrusted Markdown has to be sanitised before it\n   * reaches here; that is a pipeline decision, not a component one, and a\n   * sanitiser bolted on inside a styling primitive would be the wrong place to\n   * make it and the easiest place to get it wrong.\n   */\n  html?: string\n  /** The element to render. `article` by default; pass `div` for a fragment. */\n  as?: 'article' | 'div' | 'section'\n}\n\n/**\n * Whether `children` would actually put something on the page.\n *\n * `null`, `false` and `''` are what a conditional child evaluates to when it\n * decided not to render, so none of them is a second Article and none of them\n * is worth a warning.\n */\nfunction rendersSomething(children: ReactNode): boolean {\n  return children !== undefined && children !== null && children !== false && children !== ''\n}\n\n/**\n * The long-form reading surface.\n *\n * Everything a Markdown pipeline can emit — headings, prose, lists, tables,\n * quotations, code, figures, footnotes, MathML — set in this system's type,\n * colour and rules. The styles live in `article.css` rather than in a class\n * string, because the input is not JSX: there is no component to hang a class\n * on when the markup arrived as a string, so the contract has to be the element\n * names themselves.\n *\n * That file is published on its own as `@misoto22/folio/article.css`, so a\n * site with its own Markdown pipeline can take the reading surface without\n * taking the components — which is the case this exists for. Three sites\n * hand-rolling a prose stylesheet is three prose stylesheets that drift.\n *\n * Composable either way: pass `html` for a rendered string, or children for\n * real elements — one or the other, never both. `html` wins when both arrive,\n * and says so in development: `html=\"\"` is still `html`, which made losing a\n * page of children a thing that could happen without a word. A post that mixes\n * the two — prose with a `Diagram` dropped into the middle — renders its blocks\n * in order and gives each one an `Article`. Inside one, these rules BEAT a component's utilities:\n * `article.css` is imported unlayered while Tailwind's utilities sit in\n * `@layer utilities`, and an unlayered rule wins over a layered one whatever\n * either one's specificity is. That is the mechanism rather than an accident —\n * it is what lets a `Markdown` paragraph, a `Text` carrying `m-0`, give its\n * margin up to the article's rhythm. A component that has to hold a property\n * inside an article needs an inline style, not a class.\n *\n * @example\n * <Article html={renderedMarkdown} />\n * @example\n * <Article>\n *   <h1>The White Reset</h1>\n *   <p className=\"lead\">A monochrome system for software and writing.</p>\n *   <Diagram spec={spec} />\n * </Article>\n */\nexport function Article({ html, as: Comp = 'article', className, children, ...rest }: ArticleProps) {\n  // One or the other, never both. The rhythm rules are child combinators, so a\n  // wrapper around the rendered string — even a `display: contents` one, which\n  // removes the box but not the DOM node — would take every heading and\n  // paragraph out of the article's direct children and cost them their\n  // spacing. A page with both is a page with two Articles, and it says so\n  // below rather than dropping half the page without a word.\n  if (html !== undefined) {\n    if (DEV && rendersSomething(children)) {\n      warn({\n        code: 'ARTICLE_HTML_AND_CHILDREN',\n        problem:\n          'Article was given html and children together, so the children are not rendered at all. html is written with dangerouslySetInnerHTML, and there is no wrapper that could hold both — the rhythm is a child combinator, so anything put around the rendered string costs every block inside it its spacing.',\n        field: 'html',\n        fix: 'Render the two in order as two Articles, or drop whichever of html and children is not the content. An empty html string still counts as html.',\n        component: 'Article',\n      })\n    }\n\n    return (\n      <Comp\n        data-folio-article\n        className={className}\n        dangerouslySetInnerHTML={{ __html: html }}\n        {...rest}\n      />\n    )\n  }\n\n  return (\n    <Comp data-folio-article className={className} {...rest}>\n      {children}\n    </Comp>\n  )\n}\n\nexport default Article\n"],"mappings":"AAuFM;AAtFN,SAAS,KAAK,YAAY;AAyB1B,SAAS,iBAAiB,UAA8B;AACtD,SAAO,aAAa,UAAa,aAAa,QAAQ,aAAa,SAAS,aAAa;AAC3F;AAuCO,SAAS,QAAQ,EAAE,MAAM,IAAI,OAAO,WAAW,WAAW,UAAU,GAAG,KAAK,GAAiB;AAOlG,MAAI,SAAS,QAAW;AACtB,QAAI,OAAO,iBAAiB,QAAQ,GAAG;AACrC,WAAK;AAAA,QACH,MAAM;AAAA,QACN,SACE;AAAA,QACF,OAAO;AAAA,QACP,KAAK;AAAA,QACL,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,sBAAkB;AAAA,QAClB;AAAA,QACA,yBAAyB,EAAE,QAAQ,KAAK;AAAA,QACvC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SACE,oBAAC,QAAK,sBAAkB,MAAC,WAAuB,GAAG,MAChD,UACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Width over height. A number (`16 / 9`) or the CSS form (`'16 / 9'`).
+     *
+     * It is a style rather than a class because Tailwind can only generate what
+     * it can read verbatim in the source, and this value arrives at runtime.
+     */
+    ratio?: number | string;
+    children?: ReactNode;
+}
+/**
+ * A box that keeps its shape whatever is inside it.
+ *
+ * The one layout primitive that is genuinely hard to hand-roll. The `padding-
+ * top: 56.25%` trick everyone reaches for is a percentage of the WIDTH, which
+ * is why it works at all and also why it silently breaks the moment the box is
+ * a flex or grid child — and it takes the element's own padding with it. The
+ * modern `aspect-ratio` property does the same job in one line, and only holds
+ * if nothing inside forces a height, which is what the absolute positioning
+ * below guarantees.
+ *
+ * So: the box declares the ratio, and every direct child is stretched to fill
+ * it and taken out of flow. That means a child with no intrinsic size at all —
+ * an empty `<div>`, a map that measures its container, a skeleton — still gets
+ * the full box, and an `<img>` or `<video>` is cropped to cover it rather than
+ * letterboxed. Content that must not be cropped should set `object-contain` on
+ * itself.
+ *
+ * Reach for this when the height must be known before the content loads: a
+ * media grid that would otherwise reflow every time an image arrives is the
+ * usual case, and that reflow is the layout shift a Core Web Vitals score is
+ * measuring.
+ *
+ * @example
+ * <AspectRatio ratio={16 / 9}><img src={cover} alt="" /></AspectRatio>
+ * @example
+ * <AspectRatio ratio="1 / 1" className="rounded-(--radius) border border-(--rule-2)">
+ *   <Skeleton />
+ * </AspectRatio>
+ */
+declare function AspectRatio({ ratio, className, style, children, ...rest }: AspectRatioProps): react.JSX.Element;
+
+export { AspectRatio, type AspectRatioProps, AspectRatio as default };

package/dist/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function AspectRatio({
+  ratio = 16 / 9,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const box = { aspectRatio: String(ratio), ...style };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: box,
+      className: cn(
+        "relative w-full overflow-hidden",
+        // Every direct child fills the box, so nothing inside can push the
+        // height around and break the ratio the box just declared.
+        "[&>*]:absolute [&>*]:inset-0 [&>*]:size-full",
+        "[&>img]:object-cover [&>video]:object-cover",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var AspectRatio_default = AspectRatio;
+export {
+  AspectRatio,
+  AspectRatio_default as default
+};
+//# sourceMappingURL=AspectRatio.js.map

package/dist/components/AspectRatio/AspectRatio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AspectRatio/AspectRatio.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Width over height. A number (`16 / 9`) or the CSS form (`'16 / 9'`).\n   *\n   * It is a style rather than a class because Tailwind can only generate what\n   * it can read verbatim in the source, and this value arrives at runtime.\n   */\n  ratio?: number | string\n  children?: ReactNode\n}\n\n/**\n * A box that keeps its shape whatever is inside it.\n *\n * The one layout primitive that is genuinely hard to hand-roll. The `padding-\n * top: 56.25%` trick everyone reaches for is a percentage of the WIDTH, which\n * is why it works at all and also why it silently breaks the moment the box is\n * a flex or grid child — and it takes the element's own padding with it. The\n * modern `aspect-ratio` property does the same job in one line, and only holds\n * if nothing inside forces a height, which is what the absolute positioning\n * below guarantees.\n *\n * So: the box declares the ratio, and every direct child is stretched to fill\n * it and taken out of flow. That means a child with no intrinsic size at all —\n * an empty `<div>`, a map that measures its container, a skeleton — still gets\n * the full box, and an `<img>` or `<video>` is cropped to cover it rather than\n * letterboxed. Content that must not be cropped should set `object-contain` on\n * itself.\n *\n * Reach for this when the height must be known before the content loads: a\n * media grid that would otherwise reflow every time an image arrives is the\n * usual case, and that reflow is the layout shift a Core Web Vitals score is\n * measuring.\n *\n * @example\n * <AspectRatio ratio={16 / 9}><img src={cover} alt=\"\" /></AspectRatio>\n * @example\n * <AspectRatio ratio=\"1 / 1\" className=\"rounded-(--radius) border border-(--rule-2)\">\n *   <Skeleton />\n * </AspectRatio>\n */\nexport function AspectRatio({\n  ratio = 16 / 9,\n  className,\n  style,\n  children,\n  ...rest\n}: AspectRatioProps) {\n  const box: CSSProperties = { aspectRatio: String(ratio), ...style }\n\n  return (\n    <div\n      style={box}\n      className={cn(\n        'relative w-full overflow-hidden',\n        // Every direct child fills the box, so nothing inside can push the\n        // height around and break the ratio the box just declared.\n        '[&>*]:absolute [&>*]:inset-0 [&>*]:size-full',\n        '[&>img]:object-cover [&>video]:object-cover',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default AspectRatio\n"],"mappings":"AAsDI;AArDJ,SAAS,UAAU;AA2CZ,SAAS,YAAY;AAAA,EAC1B,QAAQ,KAAK;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,MAAqB,EAAE,aAAa,OAAO,KAAK,GAAG,GAAG,MAAM;AAElE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+interface AvatarProps extends Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'> {
+    src?: string;
+    /**
+     * Describes the person, not the picture. It names the circle itself rather
+     * than the image inside it, because the image is the optional half and most
+     * rows of a real list render as initials.
+     *
+     * Empty string is correct and deliberate when the name is already printed
+     * beside the avatar: the circle then leaves the accessibility tree entirely,
+     * rather than repeating a name a screen reader has just read.
+     */
+    alt: string;
+    /** Shown while the image loads and if it never does. Usually initials. */
+    fallback: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * A person, as a circle.
+ *
+ * Wraps Radix so the fallback appears only after the image has actually failed
+ * or is still loading — a hand-rolled `onError` swap flashes the initials on
+ * every render before the cache answers.
+ *
+ * The ROOT carries the accessible name, not the image. `alt` on the image
+ * reaches the DOM only when `src` does, and the initials are aria-hidden, so an
+ * avatar with no photograph announced nothing at all however carefully `alt`
+ * was written — and a user list where photographs are optional is full of them.
+ *
+ * @example
+ * <Avatar src={user.photo} alt={user.name} fallback="HC" />
+ */
+declare function Avatar({ src, alt, fallback, size, className, ...rest }: AvatarProps): react.JSX.Element;
+
+export { Avatar, type AvatarProps, Avatar as default };

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../lib/cn.js";
+const SIZE = {
+  sm: "size-7 text-[10px]",
+  md: "size-9 text-[11px]",
+  lg: "size-12 text-[13px]"
+};
+function Avatar({ src, alt, fallback, size = "md", className, ...rest }) {
+  const named = alt.trim() !== "";
+  return /* @__PURE__ */ jsxs(
+    AvatarPrimitive.Root,
+    {
+      role: named ? "img" : void 0,
+      "aria-label": named ? alt : void 0,
+      className: cn(
+        "relative inline-flex shrink-0 overflow-hidden rounded-full border border-(--rule) bg-(--stone)",
+        SIZE[size],
+        className
+      ),
+      ...rest,
+      children: [
+        src && // Empty, deliberately: the root above is the one element that names
+        // this person, and a second name here is the same person read twice.
+        /* @__PURE__ */ jsx(AvatarPrimitive.Image, { src, alt: "", className: "size-full object-cover" }),
+        /* @__PURE__ */ jsx(
+          AvatarPrimitive.Fallback,
+          {
+            "aria-hidden": "true",
+            className: "grid size-full place-items-center font-mono uppercase tracking-wider text-(--ink-3-aa)",
+            children: fallback
+          }
+        )
+      ]
+    }
+  );
+}
+var Avatar_default = Avatar;
+export {
+  Avatar,
+  Avatar_default as default
+};
+//# sourceMappingURL=Avatar.js.map