@misoto22/design 0.7.0 → 0.8.0

package/dist/components/Diagram/Diagram.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Diagram/Diagram.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface DiagramNode {\n  /** Only needed when an edge names this node. */\n  id?: string\n  /** The node's name, set in the interface face. */\n  label: string\n  /** What it is — one short line, a step back. */\n  note?: string\n  /** The one node the diagram is about. At most one or two per diagram. */\n  accent?: boolean\n  /** How this node's children are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  children?: DiagramNode[]\n  /** A line printed under the frame, outside it — what the box means. */\n  footnote?: string\n}\n\nexport interface DiagramEdge {\n  from: string\n  to: string\n  label?: string\n}\n\nexport interface DiagramSpec {\n  /** How the top-level nodes are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  nodes: DiagramNode[]\n  /** Arrows between adjacent top-level nodes, by id. */\n  edges?: DiagramEdge[]\n  /** The figure's caption. */\n  caption?: string\n  /** Names the figure for assistive tech when the caption does not. */\n  label?: string\n}\n\nexport interface DiagramProps {\n  spec: DiagramSpec\n  className?: string\n}\n\n/**\n * A flow or architecture diagram, drawn out of the system's own parts.\n *\n * The alternative it replaces is a fenced block of box-drawing characters —\n * `┌──────┬──────┐` — which is a picture rendered in a font chosen for code. It\n * inherits the code block's frame and scrollbar, so a diagram reads as terminal\n * output; it cannot wrap, so on a phone it either overflows or is scaled to\n * nothing; the box edges are text, so a screen reader reads the rules out loud;\n * and none of it responds to the theme.\n *\n * The other alternative is a diagramming library, which is several hundred\n * kilobytes of layout engine, renders after hydration, and draws in its own\n * palette. This is neither: hairline frames on the radius scale, mono labels,\n * the muted step for anything supporting — so a diagram belongs to the page it\n * sits on. It server-renders, because it is markup.\n *\n * NESTING IS CONTAINMENT, which is what most architecture diagrams actually\n * describe: this is inside that, and these two sit beside each other. Edges are\n * for the sequence between siblings, not for arbitrary wiring — a diagram that\n * needs arbitrary wiring is a diagram that wants a drawing, and this will not\n * pretend otherwise.\n *\n * It takes a spec rather than markup, so a fenced ```diagram block in an\n * article and a hand-written figure on a page are one renderer and one look —\n * and a wrong diagram is corrected by editing data.\n *\n * @example\n * <Diagram\n *   spec={{\n *     caption: 'One request, end to end.',\n *     edges: [{ from: 'edge', to: 'app', label: 'HTTPS' }],\n *     nodes: [\n *       { id: 'edge', label: 'Edge', note: 'CDN' },\n *       { id: 'app', label: 'Application', accent: true, children: [\n *         { label: 'Router' },\n *         { label: 'Handlers' },\n *       ] },\n *     ],\n *   }}\n * />\n */\nexport function Diagram({ spec, className }: DiagramProps) {\n  const { nodes, edges = [], direction = 'row', caption, label } = spec\n\n  return (\n    <figure className={cn('m-0', className)} role=\"group\" aria-label={label ?? caption ?? undefined}>\n      <div className=\"overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--paper-2) p-[clamp(1.125rem,calc(2.5*var(--fluid)),1.875rem)] scroll-slim\">\n        <NodeList nodes={nodes} edges={edges} direction={direction} depth={0} />\n      </div>\n      {caption && (\n        // A <div>, not a <figcaption>. A long-form stylesheet dropped around\n        // this will style `figcaption` and `p` unlayered, and an unlayered rule\n        // beats a utility whatever the specificity — inside an article a real\n        // figcaption came out uppercased and every label in the diagram\n        // inherited a paragraph margin. Nothing here uses a tag prose reaches\n        // for.\n        <div className=\"mt-3 mono-meta leading-[1.6] text-(--ink-3-aa)\">{caption}</div>\n      )}\n    </figure>\n  )\n}\n\n/** One rank of the diagram: the nodes, and any arrows between them. */\nfunction NodeList({\n  nodes,\n  edges,\n  direction,\n  depth,\n}: {\n  nodes: DiagramNode[]\n  edges: DiagramEdge[]\n  direction: 'row' | 'column'\n  depth: number\n}) {\n  const row = direction === 'row'\n\n  return (\n    <div className={cn('flex min-w-0 gap-3', row ? 'flex-col sm:flex-row' : 'flex-col')}>\n      {nodes.map((node, index) => (\n        <NodeFrame\n          key={node.id ?? `${node.label}-${index}`}\n          node={node}\n          edges={edges}\n          depth={depth}\n          lead={index > 0 ? findEdge(edges, nodes[index - 1]!, node) : undefined}\n          row={row}\n        />\n      ))}\n    </div>\n  )\n}\n\n/** The arrow that sits between two adjacent nodes, when an edge names them. */\nfunction findEdge(edges: DiagramEdge[], from: DiagramNode, to: DiagramNode): DiagramEdge | undefined {\n  if (!from.id || !to.id) return undefined\n  return edges.find((edge) => edge.from === from.id && edge.to === to.id)\n}\n\n/**\n * A node is one of two things, and they are drawn differently on purpose.\n *\n * A LEAF is a plate: a bordered card on paper, or ink-filled when it is what\n * the diagram is about. A CONTAINER is a band: a labelled hairline with its\n * children underneath, and NO frame of its own.\n *\n * That distinction is the whole design. Drawing a container as another box puts\n * three borders around anything two levels deep — the figure's frame, the\n * group's, and the plate's — and the result reads as packaging rather than as\n * structure. A rule with a name on it says \"these belong together\" using the\n * device every section head already uses, and leaves the borders to the things\n * that are actually objects.\n */\nfunction NodeFrame({\n  node,\n  edges,\n  depth,\n  lead,\n  row,\n}: {\n  node: DiagramNode\n  edges: DiagramEdge[]\n  depth: number\n  lead?: DiagramEdge\n  row: boolean\n}) {\n  const children = node.children ?? []\n  const isGroup = children.length > 0\n\n  return (\n    <>\n      {lead && <EdgeMark label={lead.label} row={row} />}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {isGroup ? (\n          <div\n            className={cn(\n              'min-w-0 flex-1 border-t pt-3',\n              depth === 0 ? 'border-(--ink)' : 'border-(--rule-2)',\n            )}\n          >\n            <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-0.5\">\n              <span className=\"font-sans text-[13.5px] leading-[1.35] text-(--ink)\">\n                {node.label}\n              </span>\n              {node.note && <span className=\"mono-meta text-(--ink-3-aa)\">{node.note}</span>}\n            </div>\n            <div className=\"mt-3\">\n              <NodeList\n                nodes={children}\n                edges={edges}\n                direction={node.direction ?? 'row'}\n                depth={depth + 1}\n              />\n            </div>\n          </div>\n        ) : (\n          <div\n            className={cn(\n              'flex min-w-0 flex-1 flex-col justify-center rounded-(--radius) px-3.5 py-3',\n              node.accent ? 'bg-(--accent)' : 'border border-(--rule-2) bg-(--paper)',\n            )}\n          >\n            {/* An identifier can be one long word — `TenantMainMiddleware` —\n                with no break opportunity, so it runs into the plate's edge\n                unless it is allowed to break inside itself. */}\n            <span\n              className={cn(\n                'block break-words font-sans text-[13.5px] leading-[1.35]',\n                node.accent ? 'text-(--accent-foreground)' : 'text-(--ink)',\n              )}\n            >\n              {node.label}\n            </span>\n            {node.note && (\n              <span\n                className={cn(\n                  'mt-1 block mono-meta',\n                  node.accent ? 'text-(--accent-foreground) opacity-70' : 'text-(--ink-3-aa)',\n                )}\n              >\n                {node.note}\n              </span>\n            )}\n          </div>\n        )}\n\n        {node.footnote && (\n          <span className=\"mt-2 block mono-meta text-(--ink-3-aa)\">{node.footnote}</span>\n        )}\n      </div>\n    </>\n  )\n}\n\n/**\n * The connector. An arrow and, when the edge is named, the name under it —\n * hidden from assistive tech, which reads the nodes in document order anyway\n * and has no use for a glyph pointing at the next one.\n */\nfunction EdgeMark({ label, row }: { label?: string; row: boolean }): ReactNode {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        'flex flex-none items-center justify-center gap-1.5 text-(--ink-3-aa)',\n        row ? 'sm:flex-col' : 'flex-col',\n      )}\n    >\n      {/* One glyph, turned. A row stacks into a column below `sm`, so the arrow\n          has to point the way the layout actually runs at that width. In RTL the\n          inline axis reverses, so the flat arrow is mirrored with it. */}\n      <span\n        className={cn(\n          'font-mono text-[13px] leading-none',\n          row ? 'rotate-90 sm:rotate-0 sm:rtl:-scale-x-100' : 'rotate-90',\n        )}\n      >\n        →\n      </span>\n      {label && <span className=\"mono-meta whitespace-nowrap\">{label}</span>}\n    </div>\n  )\n}\n\nexport default Diagram\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Diagram/Diagram.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { DEV, warn } from '../../lib/warn'\n\nexport interface DiagramNode {\n  /** Only needed when an edge names this node. */\n  id?: string\n  /** The node's name, set in the interface face. */\n  label: string\n  /** What it is — one short line, a step back. */\n  note?: string\n  /** The one node the diagram is about. At most one or two per diagram. */\n  accent?: boolean\n  /** How this node's children are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  children?: DiagramNode[]\n  /** A line printed under the frame, outside it — what the box means. */\n  footnote?: string\n}\n\nexport interface DiagramEdge {\n  from: string\n  to: string\n  label?: string\n}\n\nexport interface DiagramSpec {\n  /** How the top-level nodes are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  nodes: DiagramNode[]\n  /**\n   * Arrows between adjacent siblings, by id and in the order the rank runs.\n   * Each edge is spent the first time a pair matches it, at whatever depth\n   * that pair sits — and an edge that matches nothing says so in development\n   * rather than drawing nothing and reporting nothing.\n   */\n  edges?: DiagramEdge[]\n  /** The figure's caption. */\n  caption?: string\n  /** Names the figure for assistive tech when the caption does not. */\n  label?: string\n}\n\nexport interface DiagramProps {\n  spec: DiagramSpec\n  className?: string\n}\n\n/**\n * A flow or architecture diagram, drawn out of the system's own parts.\n *\n * The alternative it replaces is a fenced block of box-drawing characters —\n * `┌──────┬──────┐` — which is a picture rendered in a font chosen for code. It\n * inherits the code block's frame and scrollbar, so a diagram reads as terminal\n * output; it cannot wrap, so on a phone it either overflows or is scaled to\n * nothing; the box edges are text, so a screen reader reads the rules out loud;\n * and none of it responds to the theme.\n *\n * The other alternative is a diagramming library, which is several hundred\n * kilobytes of layout engine, renders after hydration, and draws in its own\n * palette. This is neither: hairline frames on the radius scale, mono labels,\n * the muted step for anything supporting — so a diagram belongs to the page it\n * sits on. It server-renders, because it is markup.\n *\n * NESTING IS CONTAINMENT, which is what most architecture diagrams actually\n * describe: this is inside that, and these two sit beside each other. Edges are\n * for the sequence between siblings, not for arbitrary wiring — a diagram that\n * needs arbitrary wiring is a diagram that wants a drawing, and this will not\n * pretend otherwise.\n *\n * It takes a spec rather than markup, so a fenced ```diagram block in an\n * article and a hand-written figure on a page are one renderer and one look —\n * and a wrong diagram is corrected by editing data.\n *\n * @example\n * <Diagram\n *   spec={{\n *     caption: 'One request, end to end.',\n *     edges: [{ from: 'edge', to: 'app', label: 'HTTPS' }],\n *     nodes: [\n *       { id: 'edge', label: 'Edge', note: 'CDN' },\n *       { id: 'app', label: 'Application', children: [\n *         { label: 'Router', accent: true },\n *         { label: 'Handlers' },\n *       ] },\n *     ],\n *   }}\n * />\n */\nexport function Diagram({ spec, className }: DiagramProps) {\n  const { nodes, edges = [], direction = 'row', caption, label } = spec\n  const { leads, drawn } = resolveLeads(nodes, edges)\n\n  if (DEV) warnSpec(nodes, edges, drawn)\n\n  return (\n    <figure className={cn('m-0', className)} role=\"group\" aria-label={label ?? caption ?? undefined}>\n      <div className=\"overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--paper-2) p-[clamp(1.125rem,calc(2.5*var(--fluid)),1.875rem)] scroll-slim\">\n        <NodeList nodes={nodes} leads={leads} direction={direction} depth={0} />\n      </div>\n      {caption && (\n        // A <div>, not a <figcaption>. A long-form stylesheet dropped around\n        // this will style `figcaption` and `p` unlayered, and an unlayered rule\n        // beats a utility whatever the specificity — inside an article a real\n        // figcaption came out uppercased and every label in the diagram\n        // inherited a paragraph margin. Nothing here uses a tag prose reaches\n        // for.\n        <div className=\"mt-3 mono-meta leading-[1.6] text-(--ink-3-aa)\">{caption}</div>\n      )}\n    </figure>\n  )\n}\n\n/** The arrow that leads INTO a node, for every node that earned one. */\ntype Leads = Map<DiagramNode, DiagramEdge>\n\n/**\n * Every arrow the spec earns, resolved once for the whole figure.\n *\n * Keyed by the node the arrow leads into, by OBJECT rather than by id: two\n * nodes sharing an id are a defect in the spec, not a licence to draw the same\n * arrow in two places. The same `edges` array used to be handed to every rank,\n * so a pair of ids reused two levels down drew the arrow again down there — an\n * arrow the author asked for once and the figure asserted twice.\n *\n * Ranks are walked breadth-first from the top and an edge is spent at the first\n * pair that matches it, which makes \"one edge, one arrow\" a property of the\n * renderer rather than a rule the author has to keep.\n */\nfunction resolveLeads(nodes: DiagramNode[], edges: DiagramEdge[]): { leads: Leads; drawn: Set<DiagramEdge> } {\n  const leads: Leads = new Map()\n  const drawn = new Set<DiagramEdge>()\n  const ranks: DiagramNode[][] = [nodes]\n\n  while (ranks.length > 0) {\n    const rank = ranks.shift()!\n    for (let index = 1; index < rank.length; index += 1) {\n      const from = rank[index - 1]!\n      const to = rank[index]!\n      if (!from.id || !to.id) continue\n      const edge = edges.find(\n        (candidate) =>\n          !drawn.has(candidate) && candidate.from === from.id && candidate.to === to.id,\n      )\n      if (!edge) continue\n      drawn.add(edge)\n      leads.set(to, edge)\n    }\n    for (const node of rank) if (node.children?.length) ranks.push(node.children)\n  }\n\n  return { leads, drawn }\n}\n\n/** One rank of the diagram: the nodes, and any arrows between them. */\nfunction NodeList({\n  nodes,\n  leads,\n  direction,\n  depth,\n}: {\n  nodes: DiagramNode[]\n  leads: Leads\n  direction: 'row' | 'column'\n  depth: number\n}) {\n  const row = direction === 'row'\n\n  return (\n    <div className={cn('flex min-w-0 gap-3', row ? 'flex-col sm:flex-row' : 'flex-col')}>\n      {nodes.map((node, index) => (\n        <NodeFrame\n          key={node.id ?? `${node.label}-${index}`}\n          node={node}\n          leads={leads}\n          depth={depth}\n          lead={leads.get(node)}\n          row={row}\n        />\n      ))}\n    </div>\n  )\n}\n\n/**\n * A node is one of two things, and they are drawn differently on purpose.\n *\n * A LEAF is a plate: a bordered card on paper, or ink-filled when it is what\n * the diagram is about. A CONTAINER is a band: a labelled hairline with its\n * children underneath, and NO frame of its own.\n *\n * That distinction is the whole design. Drawing a container as another box puts\n * three borders around anything two levels deep — the figure's frame, the\n * group's, and the plate's — and the result reads as packaging rather than as\n * structure. A rule with a name on it says \"these belong together\" using the\n * device every section head already uses, and leaves the borders to the things\n * that are actually objects.\n */\nfunction NodeFrame({\n  node,\n  leads,\n  depth,\n  lead,\n  row,\n}: {\n  node: DiagramNode\n  leads: Leads\n  depth: number\n  lead?: DiagramEdge\n  row: boolean\n}) {\n  const children = node.children ?? []\n  const isGroup = children.length > 0\n\n  return (\n    <>\n      {lead && <EdgeMark label={lead.label} row={row} />}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {isGroup ? (\n          <div\n            className={cn(\n              'min-w-0 flex-1 border-t pt-3',\n              depth === 0 ? 'border-(--ink)' : 'border-(--rule-2)',\n            )}\n          >\n            <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-0.5\">\n              <span className=\"font-sans text-[13.5px] leading-[1.35] text-(--ink)\">\n                {node.label}\n              </span>\n              {node.note && <span className=\"mono-meta text-(--ink-3-aa)\">{node.note}</span>}\n            </div>\n            <div className=\"mt-3\">\n              <NodeList\n                nodes={children}\n                leads={leads}\n                direction={node.direction ?? 'row'}\n                depth={depth + 1}\n              />\n            </div>\n          </div>\n        ) : (\n          <div\n            className={cn(\n              'flex min-w-0 flex-1 flex-col justify-center rounded-(--radius) px-3.5 py-3',\n              node.accent ? 'bg-(--accent)' : 'border border-(--rule-2) bg-(--paper)',\n            )}\n          >\n            {/* An identifier can be one long word — `TenantMainMiddleware` —\n                with no break opportunity, so it runs into the plate's edge\n                unless it is allowed to break inside itself. */}\n            <span\n              className={cn(\n                'block break-words font-sans text-[13.5px] leading-[1.35]',\n                node.accent ? 'text-(--accent-foreground)' : 'text-(--ink)',\n              )}\n            >\n              {node.label}\n            </span>\n            {node.note && (\n              <span\n                className={cn(\n                  'mt-1 block mono-meta',\n                  node.accent ? 'text-(--accent-foreground) opacity-70' : 'text-(--ink-3-aa)',\n                )}\n              >\n                {node.note}\n              </span>\n            )}\n          </div>\n        )}\n\n        {node.footnote && (\n          <span className=\"mt-2 block mono-meta text-(--ink-3-aa)\">{node.footnote}</span>\n        )}\n      </div>\n    </>\n  )\n}\n\n/**\n * The connector. An arrow and, when the edge is named, the name under it —\n * hidden from assistive tech, which reads the nodes in document order anyway\n * and has no use for a glyph pointing at the next one.\n */\nfunction EdgeMark({ label, row }: { label?: string; row: boolean }): ReactNode {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        'flex flex-none items-center justify-center gap-1.5 text-(--ink-3-aa)',\n        row ? 'sm:flex-col' : 'flex-col',\n      )}\n    >\n      {/* One glyph, turned. A row stacks into a column below `sm`, so the arrow\n          has to point the way the layout actually runs at that width. In RTL the\n          inline axis reverses, so the flat arrow is mirrored with it. */}\n      <span\n        className={cn(\n          'font-mono text-[13px] leading-none',\n          row ? 'rotate-90 sm:rotate-0 sm:rtl:-scale-x-100' : 'rotate-90',\n        )}\n      >\n        →\n      </span>\n      {label && <span className=\"mono-meta whitespace-nowrap\">{label}</span>}\n    </div>\n  )\n}\n\n/**\n * Everything the spec asked for that the renderer will not do, said out loud.\n *\n * All three failures here are silent by construction: the figure renders, it\n * renders beautifully, and it describes something other than what was written.\n * An author reading the picture has no way to tell an edge that was ignored\n * from an edge they forgot, so the console is the only place left to say it.\n *\n * Dev only, and guarded at the call site so a production bundle drops the walk\n * along with the messages.\n */\nfunction warnSpec(nodes: DiagramNode[], edges: DiagramEdge[], drawn: Set<DiagramEdge>): void {\n  const ids = new Set<string>()\n  warnNodes(nodes, ids)\n\n  for (const edge of edges) {\n    if (drawn.has(edge)) continue\n    const pair = `${edge.from} → ${edge.to}`\n    const unknown = !ids.has(edge.from) || !ids.has(edge.to)\n\n    warn({\n      code: unknown ? 'DIAGRAM_EDGE_UNKNOWN_NODE' : 'DIAGRAM_EDGE_NOT_ADJACENT',\n      problem: unknown\n        ? `The edge ${pair} names an id no node in this spec carries, so no arrow is drawn and nothing else changes.`\n        : `The edge ${pair} names two nodes that are never consecutive siblings, so no arrow is drawn anywhere.`,\n      field: `spec.edges: ${pair}`,\n      fix: unknown\n        ? 'Give the node the id the edge names, or correct the edge to an id the spec already has.'\n        : 'Write the edge from a node to the node immediately after it in the same rank, in that order. Nesting is containment here; an edge is a step between siblings.',\n      component: 'Diagram',\n    })\n  }\n}\n\n/** The node half of {@link warnSpec}: duplicate ids, and props read by nobody. */\nfunction warnNodes(nodes: DiagramNode[], ids: Set<string>): void {\n  for (const node of nodes) {\n    if (node.id) {\n      if (ids.has(node.id)) {\n        warn({\n          code: 'DIAGRAM_DUPLICATE_ID',\n          problem: `Two nodes carry the id \"${node.id}\", so an edge naming it lands on whichever comes first and silently means the other.`,\n          field: `spec.nodes: id \"${node.id}\"`,\n          fix: 'Make every id unique across the whole spec, or drop it from the node no edge names.',\n          component: 'Diagram',\n        })\n      }\n      ids.add(node.id)\n    }\n\n    const isGroup = (node.children?.length ?? 0) > 0\n\n    if (isGroup && node.accent) {\n      warn({\n        code: 'DIAGRAM_ACCENT_ON_CONTAINER',\n        problem: `\"${node.label}\" has children, so it is drawn as a band — and a band has no fill for accent to take. It type-checks and paints nothing.`,\n        field: `spec.nodes: accent on \"${node.label}\"`,\n        fix: 'Move accent to the leaf the diagram is actually about, or drop the children so this node becomes that leaf.',\n        component: 'Diagram',\n      })\n    }\n\n    if (!isGroup && node.direction) {\n      warn({\n        code: 'DIAGRAM_DIRECTION_ON_LEAF',\n        problem: `\"${node.label}\" has no children, so there is nothing here to lay out — direction is read only from a node that has some.`,\n        field: `spec.nodes: direction on \"${node.label}\"`,\n        fix: 'Set direction on the parent whose axis you meant, or on spec.direction for the top rank.',\n        component: 'Diagram',\n      })\n    }\n\n    if (node.children) warnNodes(node.children, ids)\n  }\n}\n\nexport default Diagram\n"],"mappings":"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","names":[]}

package/dist/components/Dialog/Dialog.d.ts

@@ -7,7 +7,14 @@ declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 interface DialogContentProps extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {
-    /** Heading text. When omitted, a visually-hidden title is rendered for a11y. */
+    /**
+     * Heading text.
+     *
+     * Pass one even when `hideTitle` is set. Radix requires a title, so omitting
+     * it renders a hidden fallback reading the literal word "Dialog" — which
+     * satisfies an automated accessibility check and announces every unnamed
+     * modal in the application as the same thing. Development says so out loud.
+     */
     title?: ReactNode;
     /** Sub-heading under the title. */
     description?: ReactNode;
@@ -32,8 +39,16 @@ interface DialogContentProps extends Omit<ComponentProps<typeof DialogPrimitive.
  * usually by leaving focus behind in the page underneath.
  *
  * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog
- * without a visible heading still renders a hidden one rather than logging a
- * warning and shipping an unnamed modal.
+ * without a visible heading still renders a hidden one rather than shipping an
+ * unnamed modal — and warns in development, because the fallback it renders is
+ * the literal word "Dialog" and a placeholder that passes an accessibility
+ * check is how the problem survives a review.
+ *
+ * Portals into the element an enclosing `OverlayContainer` names, and switches
+ * from viewport positioning to container positioning when there is one. A
+ * `fixed` panel covers the page whatever it is portalled into, so honouring
+ * the container without that swap would have moved the markup and left the
+ * picture unchanged.
  *
  * @example
  * <Dialog>

package/dist/components/Dialog/Dialog.js

@@ -3,6 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { cn } from "../../lib/cn.js";
+import { useOverlayContainer } from "../../lib/overlay-container.js";
+import { DEV, warn } from "../../lib/warn.js";
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogClose = DialogPrimitive.Close;
@@ -26,12 +28,25 @@ function DialogContent({
   hideTitle = false,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+  const container = useOverlayContainer();
+  if (DEV && title === void 0) {
+    warn({
+      code: "DIALOG_TITLE_MISSING",
+      problem: 'DialogContent has no title, so its accessible name is the fallback string "Dialog". Every unnamed modal in the app announces identically, and the check that would have caught it passes.',
+      field: "title",
+      fix: "Give it a title that says what the dialog asks. Add hideTitle when the heading would be furniture on screen.",
+      component: "Dialog"
+    });
+  }
+  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { container: container ?? void 0, children: [
     /* @__PURE__ */ jsx(
       DialogPrimitive.Overlay,
       {
         "data-m22-animated": true,
-        className: "fixed inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]"
+        className: cn(
+          "inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]",
+          container ? "absolute" : "fixed"
+        )
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -41,6 +56,9 @@ function DialogContent({
         className: cn(
           "fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-6 panel-blur scroll-slim",
           "data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]",
+          // Against the container's box rather than the viewport's, and capped
+          // by it: 92vw inside a 400px frame is not a cap at all.
+          container && "absolute max-h-[calc(100%-2rem)] max-w-[calc(100%-2rem)]",
           className
         ),
         ...rest,

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Dialog root + trigger + close, re-exported as typed passthroughs. */\nexport const Dialog = DialogPrimitive.Root\nexport const DialogTrigger = DialogPrimitive.Trigger\nexport const DialogClose = DialogPrimitive.Close\n\n/** Title + description stack; renders nothing when both are omitted. */\nfunction DialogHeader({\n  title,\n  description,\n  hidden,\n}: {\n  title?: ReactNode\n  description?: ReactNode\n  hidden: boolean\n}) {\n  if (title === undefined && description === undefined) return null\n  return (\n    <div className={cn('mb-4 flex flex-col gap-1 pe-8', hidden && 'sr-only')}>\n      {title !== undefined && (\n        <DialogPrimitive.Title className=\"m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)\">\n          {title}\n        </DialogPrimitive.Title>\n      )}\n      {description !== undefined && (\n        <DialogPrimitive.Description className=\"m-0 text-sm leading-relaxed text-(--ink-3-aa)\">\n          {description}\n        </DialogPrimitive.Description>\n      )}\n    </div>\n  )\n}\n\nexport interface DialogContentProps\n  extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {\n  /** Heading text. When omitted, a visually-hidden title is rendered for a11y. */\n  title?: ReactNode\n  /** Sub-heading under the title. */\n  description?: ReactNode\n  className?: string\n  /** Show the top-right close control (default true). */\n  showClose?: boolean\n  /**\n   * Keeps the title for assistive tech and hides it visually.\n   *\n   * For a surface whose purpose is obvious to anyone who can see it — a command\n   * palette, a media lightbox — where a printed heading would be furniture. The\n   * title itself is never optional: Radix requires one, and a modal with no\n   * accessible name drops a screen reader into an unnamed region.\n   */\n  hideTitle?: boolean\n}\n\n/**\n * A modal surface: portal → scrim → centred panel.\n *\n * Radix owns the focus trap, the escape key, the scroll lock and the\n * `aria-modal` wiring — all of which a hand-rolled dialog gets subtly wrong,\n * usually by leaving focus behind in the page underneath.\n *\n * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog\n * without a visible heading still renders a hidden one rather than logging a\n * warning and shipping an unnamed modal.\n *\n * @example\n * <Dialog>\n *   <DialogTrigger asChild><Button>Delete</Button></DialogTrigger>\n *   <DialogContent title=\"Delete file\" description=\"This cannot be undone.\">\n *     <DialogClose asChild><Button variant=\"secondary\">Cancel</Button></DialogClose>\n *   </DialogContent>\n * </Dialog>\n */\nexport function DialogContent({\n  title,\n  description,\n  children,\n  className,\n  showClose = true,\n  hideTitle = false,\n  ...rest\n}: DialogContentProps) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        data-m22-animated\n        className=\"fixed inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]\"\n      />\n      <DialogPrimitive.Content\n        data-m22-animated\n        className={cn(\n          'fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-6 panel-blur scroll-slim',\n          'data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]',\n          className,\n        )}\n        {...rest}\n      >\n        <DialogHeader title={title} description={description} hidden={hideTitle} />\n\n        {title === undefined && (\n          <DialogPrimitive.Title className=\"sr-only\">Dialog</DialogPrimitive.Title>\n        )}\n\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={16} strokeWidth={1.5} aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport default Dialog\n"],"mappings":";AAwBI,SAEI,KAFJ;AAtBJ,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAElB,SAAS,UAAU;AAGZ,MAAM,SAAS,gBAAgB;AAC/B,MAAM,gBAAgB,gBAAgB;AACtC,MAAM,cAAc,gBAAgB;AAG3C,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,UAAa,gBAAgB,OAAW,QAAO;AAC7D,SACE,qBAAC,SAAI,WAAW,GAAG,iCAAiC,UAAU,SAAS,GACpE;AAAA,cAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,0EAC9B,iBACH;AAAA,IAED,gBAAgB,UACf,oBAAC,gBAAgB,aAAhB,EAA4B,WAAU,iDACpC,uBACH;AAAA,KAEJ;AAEJ;AAyCO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,SACE,qBAAC,gBAAgB,QAAhB,EACC;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAU;AAAA;AAAA,IACZ;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,OAAc,aAA0B,QAAQ,WAAW;AAAA,UAExE,UAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,WAAU,oBAAM;AAAA,UAGlD,aACC;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,UAGD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\nimport { DEV, warn } from '../../lib/warn'\n\n/** Radix Dialog root + trigger + close, re-exported as typed passthroughs. */\nexport const Dialog = DialogPrimitive.Root\nexport const DialogTrigger = DialogPrimitive.Trigger\nexport const DialogClose = DialogPrimitive.Close\n\n/** Title + description stack; renders nothing when both are omitted. */\nfunction DialogHeader({\n  title,\n  description,\n  hidden,\n}: {\n  title?: ReactNode\n  description?: ReactNode\n  hidden: boolean\n}) {\n  if (title === undefined && description === undefined) return null\n  return (\n    <div className={cn('mb-4 flex flex-col gap-1 pe-8', hidden && 'sr-only')}>\n      {title !== undefined && (\n        <DialogPrimitive.Title className=\"m-0 font-heading text-[length:var(--fs-item)] font-normal text-(--ink)\">\n          {title}\n        </DialogPrimitive.Title>\n      )}\n      {description !== undefined && (\n        <DialogPrimitive.Description className=\"m-0 text-sm leading-relaxed text-(--ink-3-aa)\">\n          {description}\n        </DialogPrimitive.Description>\n      )}\n    </div>\n  )\n}\n\nexport interface DialogContentProps\n  extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {\n  /**\n   * Heading text.\n   *\n   * Pass one even when `hideTitle` is set. Radix requires a title, so omitting\n   * it renders a hidden fallback reading the literal word \"Dialog\" — which\n   * satisfies an automated accessibility check and announces every unnamed\n   * modal in the application as the same thing. Development says so out loud.\n   */\n  title?: ReactNode\n  /** Sub-heading under the title. */\n  description?: ReactNode\n  className?: string\n  /** Show the top-right close control (default true). */\n  showClose?: boolean\n  /**\n   * Keeps the title for assistive tech and hides it visually.\n   *\n   * For a surface whose purpose is obvious to anyone who can see it — a command\n   * palette, a media lightbox — where a printed heading would be furniture. The\n   * title itself is never optional: Radix requires one, and a modal with no\n   * accessible name drops a screen reader into an unnamed region.\n   */\n  hideTitle?: boolean\n}\n\n/**\n * A modal surface: portal → scrim → centred panel.\n *\n * Radix owns the focus trap, the escape key, the scroll lock and the\n * `aria-modal` wiring — all of which a hand-rolled dialog gets subtly wrong,\n * usually by leaving focus behind in the page underneath.\n *\n * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog\n * without a visible heading still renders a hidden one rather than shipping an\n * unnamed modal — and warns in development, because the fallback it renders is\n * the literal word \"Dialog\" and a placeholder that passes an accessibility\n * check is how the problem survives a review.\n *\n * Portals into the element an enclosing `OverlayContainer` names, and switches\n * from viewport positioning to container positioning when there is one. A\n * `fixed` panel covers the page whatever it is portalled into, so honouring\n * the container without that swap would have moved the markup and left the\n * picture unchanged.\n *\n * @example\n * <Dialog>\n *   <DialogTrigger asChild><Button>Delete</Button></DialogTrigger>\n *   <DialogContent title=\"Delete file\" description=\"This cannot be undone.\">\n *     <DialogClose asChild><Button variant=\"secondary\">Cancel</Button></DialogClose>\n *   </DialogContent>\n * </Dialog>\n */\nexport function DialogContent({\n  title,\n  description,\n  children,\n  className,\n  showClose = true,\n  hideTitle = false,\n  ...rest\n}: DialogContentProps) {\n  const container = useOverlayContainer()\n\n  if (DEV && title === undefined) {\n    warn({\n      code: 'DIALOG_TITLE_MISSING',\n      problem:\n        'DialogContent has no title, so its accessible name is the fallback string \"Dialog\". Every unnamed modal in the app announces identically, and the check that would have caught it passes.',\n      field: 'title',\n      fix: 'Give it a title that says what the dialog asks. Add hideTitle when the heading would be furniture on screen.',\n      component: 'Dialog',\n    })\n  }\n\n  return (\n    <DialogPrimitive.Portal container={container ?? undefined}>\n      <DialogPrimitive.Overlay\n        data-m22-animated\n        className={cn(\n          'inset-0 z-(--z-overlay) bg-(--scrim) data-[state=open]:animate-[m22-fade-in_var(--duration-fast)_var(--ease)]',\n          container ? 'absolute' : 'fixed',\n        )}\n      />\n      <DialogPrimitive.Content\n        data-m22-animated\n        className={cn(\n          'fixed left-1/2 top-1/2 z-(--z-modal) max-h-[85vh] w-[min(92vw,32rem)] -translate-x-1/2 -translate-y-1/2 overflow-auto rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-6 panel-blur scroll-slim',\n          'data-[state=open]:animate-[m22-panel-in_var(--duration-base)_var(--ease)]',\n          // Against the container's box rather than the viewport's, and capped\n          // by it: 92vw inside a 400px frame is not a cap at all.\n          container && 'absolute max-h-[calc(100%-2rem)] max-w-[calc(100%-2rem)]',\n          className,\n        )}\n        {...rest}\n      >\n        <DialogHeader title={title} description={description} hidden={hideTitle} />\n\n        {title === undefined && (\n          <DialogPrimitive.Title className=\"sr-only\">Dialog</DialogPrimitive.Title>\n        )}\n\n        {showClose && (\n          <DialogPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-3 top-3 grid size-9 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={16} strokeWidth={1.5} aria-hidden />\n          </DialogPrimitive.Close>\n        )}\n\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  )\n}\n\nexport default Dialog\n"],"mappings":";AA0BI,SAEI,KAFJ;AAxBJ,YAAY,qBAAqB;AACjC,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,2BAA2B;AACpC,SAAS,KAAK,YAAY;AAGnB,MAAM,SAAS,gBAAgB;AAC/B,MAAM,gBAAgB,gBAAgB;AACtC,MAAM,cAAc,gBAAgB;AAG3C,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,UAAa,gBAAgB,OAAW,QAAO;AAC7D,SACE,qBAAC,SAAI,WAAW,GAAG,iCAAiC,UAAU,SAAS,GACpE;AAAA,cAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,0EAC9B,iBACH;AAAA,IAED,gBAAgB,UACf,oBAAC,gBAAgB,aAAhB,EAA4B,WAAU,iDACpC,uBACH;AAAA,KAEJ;AAEJ;AAwDO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL,GAAuB;AACrB,QAAM,YAAY,oBAAoB;AAEtC,MAAI,OAAO,UAAU,QAAW;AAC9B,SAAK;AAAA,MACH,MAAM;AAAA,MACN,SACE;AAAA,MACF,OAAO;AAAA,MACP,KAAK;AAAA,MACL,WAAW;AAAA,IACb,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,gBAAgB,QAAhB,EAAuB,WAAW,aAAa,QAC9C;AAAA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,QAC3B;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA;AAAA,UAGA,aAAa;AAAA,UACb;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,OAAc,aAA0B,QAAQ,WAAW;AAAA,UAExE,UAAU,UACT,oBAAC,gBAAgB,OAAhB,EAAsB,WAAU,WAAU,oBAAM;AAAA,UAGlD,aACC;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,UAGD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { LucideIcon } from 'lucide-react';
 
@@ -11,16 +11,17 @@ type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Cont
  * A menu surface.
  *
  * A menu is a list of ACTIONS. If the items navigate somewhere, they belong in
- * a nav; if they set a value, that is a `Select` or a `RadioGroup` — Radix has
- * menu variants for both, and a plain item pretending to be a choice loses the
- * checked state a screen reader needs.
+ * a nav; if they set a value, that is a `Select` or a `RadioGroup` — this
+ * package ships no checkbox or radio menu item, and a plain item pretending to
+ * be a choice loses the checked state a screen reader needs.
  *
  * @example
  * <DropdownMenu>
  *   <DropdownMenuTrigger asChild><Button variant="secondary">Menu</Button></DropdownMenuTrigger>
  *   <DropdownMenuContent>
- *     <DropdownMenuLabel>Account</DropdownMenuLabel>
- *     <DropdownMenuItem icon={Settings}>Settings</DropdownMenuItem>
+ *     <DropdownMenuGroup label="Account">
+ *       <DropdownMenuItem icon={Settings}>Settings</DropdownMenuItem>
+ *     </DropdownMenuGroup>
  *     <DropdownMenuSeparator />
  *     <DropdownMenuItem icon={LogOut}>Sign out</DropdownMenuItem>
  *   </DropdownMenuContent>
@@ -28,8 +29,16 @@ type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Cont
  */
 declare function DropdownMenuContent({ className, sideOffset, children, ...rest }: DropdownMenuContentProps): react.JSX.Element;
 interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenuPrimitive.Item> {
-    /** Optional leading icon, rendered before the label. */
-    icon?: LucideIcon;
+    /**
+     * Optional leading icon, rendered before the label.
+     *
+     * Either spelling: `icon={Settings}` passes the component and this sizes it,
+     * `icon={<Settings size={16} />}` passes the element and this places it. The
+     * two used to mean opposite things one import apart — `CommandItem.icon` took
+     * the element while this took the component — and the wrong one did not fail
+     * a type check into anything actionable, it failed at render.
+     */
+    icon?: LucideIcon | ReactNode;
     /** Paints the row as destructive. Use for delete, revoke, disconnect. */
     destructive?: boolean;
 }
@@ -40,10 +49,39 @@ interface DropdownMenuItemProps extends ComponentProps<typeof DropdownMenuPrimit
  * hover and keyboard focus — styling `:hover` alone leaves the keyboard user
  * unable to see where they are.
  */
-declare function DropdownMenuItem({ icon: Icon, destructive, className, children, ...rest }: DropdownMenuItemProps): react.JSX.Element;
+declare function DropdownMenuItem({ icon, destructive, className, children, ...rest }: DropdownMenuItemProps): react.JSX.Element;
 /** Hairline divider between menu groups. */
 declare function DropdownMenuSeparator({ className, ...rest }: ComponentProps<typeof DropdownMenuPrimitive.Separator>): react.JSX.Element;
-/** Mono eyebrow heading for a group of items. */
+/**
+ * Mono eyebrow heading, on its own.
+ *
+ * Visual only: Radix renders it as a bare `<div>` with no role, so it segments
+ * the menu for a reader who can see it and for nobody else. Reach for
+ * `DropdownMenuGroup` when the eyebrow is a HEADING over rows; this is right
+ * for a line that heads nothing — the signed-in address at the top of an
+ * account menu.
+ */
 declare function DropdownMenuLabel({ className, ...rest }: ComponentProps<typeof DropdownMenuPrimitive.Label>): react.JSX.Element;
+interface DropdownMenuGroupProps extends ComponentProps<typeof DropdownMenuPrimitive.Group> {
+    /** The eyebrow over the rows, and the group's accessible name. */
+    label?: ReactNode;
+}
+/**
+ * A named section of a menu.
+ *
+ * The eyebrow alone was a picture of a heading. Radix's `MenuLabel` carries no
+ * role and no `aria-labelledby` wiring, and `MenuGroup` — which does carry
+ * `role="group"` — was not re-exported by this package at all, so a sighted
+ * reader saw three labelled sections and a screen-reader user got one
+ * undifferentiated list. This renders the group, renders the label inside it,
+ * and points the one at the other, which is the whole of the fix and not
+ * something a caller should have to remember.
+ *
+ * @example
+ * <DropdownMenuGroup label="Account">
+ *   <DropdownMenuItem icon={Settings}>Settings</DropdownMenuItem>
+ * </DropdownMenuGroup>
+ */
+declare function DropdownMenuGroup({ label, children, ...rest }: DropdownMenuGroupProps): react.JSX.Element;
 
-export { DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenu as default };
+export { DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenu as default };

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,8 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { isValidElement, useId } from "react";
 import { cn } from "../../lib/cn.js";
 import { useOverlayContainer } from "../../lib/overlay-container.js";
+function isIconComponent(icon) {
+  if (isValidElement(icon)) return false;
+  if (typeof icon === "function") return true;
+  if (typeof icon !== "object" || icon === null) return false;
+  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !("then" in icon);
+}
+function iconNode(icon) {
+  if (icon === void 0 || icon === null || icon === false) return null;
+  if (!isIconComponent(icon)) {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "grid size-4 shrink-0 place-items-center [&_svg]:size-4", children: icon });
+  }
+  const Icon = icon;
+  return /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, className: "shrink-0", "aria-hidden": true });
+}
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 function DropdownMenuContent({
@@ -30,7 +45,7 @@ function DropdownMenuContent({
   ) });
 }
 function DropdownMenuItem({
-  icon: Icon,
+  icon,
   destructive = false,
   className,
   children,
@@ -46,7 +61,7 @@ function DropdownMenuItem({
       ),
       ...rest,
       children: [
-        Icon && /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, className: "shrink-0", "aria-hidden": true }),
+        iconNode(icon),
         children
       ]
     }
@@ -76,10 +91,25 @@ function DropdownMenuLabel({
     }
   );
 }
+function DropdownMenuGroup({ label, children, ...rest }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.Group,
+    {
+      "aria-labelledby": label === void 0 ? void 0 : id,
+      ...rest,
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsx(DropdownMenuLabel, { id, children: label }),
+        children
+      ]
+    }
+  );
+}
 var DropdownMenu_default = DropdownMenu;
 export {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,

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

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

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

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

package/dist/components/EmptyState/EmptyState.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading } from "../Heading/Heading.js";
 import { cn } from "../../lib/cn.js";
 function EmptyState({
   icon: Icon,
   title,
   description,
   action,
+  level = 2,
   className,
   ...rest
 }) {
@@ -15,7 +17,7 @@ function EmptyState({
       ...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 }),
+        /* @__PURE__ */ jsx(Heading, { level, size: "sub", children: title }),
         description && /* @__PURE__ */ jsx("p", { className: "m-0 mt-2 max-w-sm text-sm leading-relaxed text-(--ink-3-aa)", children: description }),
         action && /* @__PURE__ */ jsx("div", { className: "mt-8", children: action })
       ]

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

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

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

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

package/dist/components/ErrorState/ErrorState.js

@@ -1,7 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading } from "../Heading/Heading.js";
 import { cn } from "../../lib/cn.js";
 const ERROR_ACTION_CLASS = "text-sm text-(--ink) underline decoration-(--rule-2) underline-offset-4 transition-colors duration-(--duration-fast) hover:decoration-(--ink)";
-function ErrorState({ code, heading, message, action, className, ...rest }) {
+function ErrorState({
+  code,
+  heading,
+  message,
+  action,
+  level = 1,
+  className,
+  ...rest
+}) {
   return /* @__PURE__ */ jsx(
     "section",
     {
@@ -16,7 +25,7 @@ function ErrorState({ code, heading, message, action, className, ...rest }) {
             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(Heading, { level, size: "heading", className: "mb-4 mt-6", children: heading }),
         /* @__PURE__ */ jsx("p", { className: "mb-10 max-w-(--measure-record) text-base leading-relaxed text-(--ink-3-aa)", children: message }),
         action
       ] })

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

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