@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

package/dist/components/ErrorSummary.js

@@ -0,0 +1,122 @@
+"use client";
+
+// src/components/ErrorSummary.tsx
+import { forwardRef, useCallback, useEffect, useId, useRef } from "react";
+import { recipe } from "../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var errorSummary = recipe({
+  slots: {
+    root: "flex flex-col gap-3 border-2 border-intent-danger bg-surface-base p-5 font-mono shadow-hard-intent-danger",
+    title: "m-0 font-display text-lg font-bold uppercase tracking-wider text-content-primary",
+    description: "max-w-prose font-sans text-sm leading-relaxed text-content-secondary",
+    list: "m-0 flex list-none flex-col gap-2 p-0",
+    item: "flex gap-2 text-sm",
+    marker: "font-bold text-intent-danger",
+    link: "font-bold text-intent-danger underline underline-offset-4 hover:no-underline"
+  }
+});
+var FIELD = '[data-slot="field"], [data-slot="fieldset-field"]';
+var FOCUSABLE = [
+  'input:not([type="hidden"]):not([aria-hidden="true"])',
+  "select",
+  "textarea",
+  "button",
+  "a[href]",
+  "[tabindex]"
+].join(", ");
+function isFocusable(element) {
+  return element.matches(FOCUSABLE) && element.tabIndex >= 0 && !element.matches(":disabled");
+}
+function focusTargetFor(element) {
+  if (isFocusable(element)) return element;
+  const scopes = [element, element.closest(FIELD)];
+  for (const scope of scopes) {
+    if (!scope) continue;
+    const found = Array.from(scope.querySelectorAll(FOCUSABLE)).find(isFocusable);
+    if (found) return found;
+  }
+  return null;
+}
+function assignRef(ref, node) {
+  if (typeof ref === "function") {
+    ref(node);
+    return;
+  }
+  if (ref) {
+    ref.current = node;
+  }
+}
+function followError(event, id) {
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return;
+  }
+  const element = event.currentTarget.ownerDocument.getElementById(id);
+  const target = element && focusTargetFor(element);
+  if (!element || !target) return;
+  event.preventDefault();
+  target.focus({ preventScroll: true });
+  (element.closest(FIELD) ?? target).scrollIntoView?.({ block: "start" });
+}
+var ErrorSummary = forwardRef(function ErrorSummary2({
+  errors,
+  title = "There is a problem",
+  headingLevel = 2,
+  focusOnAppear = true,
+  children,
+  className,
+  ...props
+}, ref) {
+  const styles = errorSummary();
+  const titleId = useId();
+  const root = useRef(null);
+  const hasErrors = errors.length > 0;
+  const attach = useCallback(
+    (node) => {
+      root.current = node;
+      assignRef(ref, node);
+    },
+    [ref]
+  );
+  useEffect(() => {
+    if (hasErrors && focusOnAppear) {
+      root.current?.focus();
+    }
+  }, [hasErrors, focusOnAppear]);
+  if (!hasErrors) return null;
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      tabIndex: -1,
+      "aria-labelledby": titleId,
+      "data-slot": "error-summary",
+      ...props,
+      ref: attach,
+      className: styles.root({ class: className }),
+      children: [
+        /* @__PURE__ */ jsx(Heading, { id: titleId, "data-slot": "error-summary-title", className: styles.title(), children: title }),
+        children && // A `div`, not a `p`, for the reason `EmptyState` gives: the slot takes
+        // arbitrary nodes, and a block inside a paragraph is repaired by the
+        // parser into markup that is not what was written.
+        /* @__PURE__ */ jsx("div", { "data-slot": "error-summary-description", className: styles.description(), children }),
+        /* @__PURE__ */ jsx("ul", { "data-slot": "error-summary-list", className: styles.list(), children: errors.map((error, index) => /* @__PURE__ */ jsxs("li", { "data-slot": "error-summary-item", className: styles.item(), children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.marker(), children: ">" }),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `#${error.id}`,
+              "data-slot": "error-summary-link",
+              className: styles.link(),
+              onClick: (event) => followError(event, error.id),
+              children: error.message
+            }
+          )
+        ] }, `${error.id}-${index}`)) })
+      ]
+    }
+  );
+});
+export {
+  ErrorSummary
+};
+//# sourceMappingURL=ErrorSummary.js.map

package/dist/components/ErrorSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ErrorSummary.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useCallback, useEffect, useId, useRef } from 'react';\nimport type { ForwardedRef, HTMLAttributes, MouseEvent, ReactNode } from 'react';\nimport { recipe } from '../lib/recipe';\n\n// The danger edge and its hard shadow are the whole signal that this box is\n// about a failure; the heading stays in the primary ink so it reads as a\n// heading, and the links carry the danger role, as a field's own error does.\nconst errorSummary = recipe({\n  slots: {\n    root:\n      'flex flex-col gap-3 border-2 border-intent-danger bg-surface-base p-5 font-mono ' +\n      'shadow-hard-intent-danger',\n    title: 'm-0 font-display text-lg font-bold uppercase tracking-wider text-content-primary',\n    description: 'max-w-prose font-sans text-sm leading-relaxed text-content-secondary',\n    list: 'm-0 flex list-none flex-col gap-2 p-0',\n    item: 'flex gap-2 text-sm',\n    marker: 'font-bold text-intent-danger',\n    link: 'font-bold text-intent-danger underline underline-offset-4 hover:no-underline',\n  },\n});\n\n/** One entry in the summary: which control is wrong, and what is wrong with it. */\nexport interface ErrorSummaryError {\n  /**\n   * The `id` of the invalid control, without the `#`. The entry links to\n   * `#id`, and following the link focuses that control. Give the field the\n   * same `id` you list here — `Input`, `TextArea`, `Select`, `Checkbox`,\n   * `Switch` and `RadioGroup` all take one.\n   */\n  id: string;\n  /**\n   * What is wrong and how to put it right, as the link text. Usually the same\n   * words as the field's own `error`, so the reader recognises the field when\n   * they arrive at it.\n   */\n  message: string;\n}\n\nexport interface ErrorSummaryProps extends Omit<\n  HTMLAttributes<HTMLElement>,\n  'title' | 'className' | 'children'\n> {\n  /**\n   * The form's current errors, in the order the fields appear. Empty renders\n   * nothing at all — there is no \"all clear\" state to announce.\n   */\n  errors: readonly ErrorSummaryError[];\n  /**\n   * The heading, which is also the region's accessible name. Say that\n   * something is wrong, not what: the list says what.\n   */\n  title?: string;\n  /**\n   * The heading's level. `2` suits the usual place — the top of a form under\n   * the page's `h1`. Set it where the form sits deeper in the outline.\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /**\n   * Move focus to the summary when it appears — when `errors` goes from empty\n   * to non-empty, including on mount. On by default, because focus is how the\n   * summary is announced (see the component notes). Turn it off only where\n   * errors appear while the reader is still typing, and focus it from the\n   * submit handler through the ref instead. Not `autoFocus`: that is the\n   * HTML attribute, which fires once on insertion, and this is a different\n   * rule.\n   */\n  focusOnAppear?: boolean;\n  /**\n   * Optional prose between the heading and the list — a sentence about the\n   * errors as a whole. The list is still rendered from `errors`.\n   */\n  children?: ReactNode;\n  /** Merged onto the root. For placement — margins, width — not colour. */\n  className?: string;\n}\n\n// The wrapper each field frame renders. A control found inside it is the one\n// the link is for, and the wrapper — label included — is what scrolls into\n// view, so the reader lands on the question and not just the box.\nconst FIELD = '[data-slot=\"field\"], [data-slot=\"fieldset-field\"]';\n\nconst FOCUSABLE = [\n  'input:not([type=\"hidden\"]):not([aria-hidden=\"true\"])',\n  'select',\n  'textarea',\n  'button',\n  'a[href]',\n  '[tabindex]',\n].join(', ');\n\nfunction isFocusable(element: HTMLElement): boolean {\n  return element.matches(FOCUSABLE) && element.tabIndex >= 0 && !element.matches(':disabled');\n}\n\n// The element an id names is not always the one that takes focus. A\n// `Checkbox` or `Switch` puts its id on Base UI's hidden input, which is\n// `aria-hidden` and out of the tab order, so the visible control beside it is\n// the target; a `RadioGroup`'s id is on the group, and the target is the radio\n// its roving focus would give Tab.\nfunction focusTargetFor(element: HTMLElement): HTMLElement | null {\n  if (isFocusable(element)) return element;\n  const scopes: (Element | null)[] = [element, element.closest(FIELD)];\n  for (const scope of scopes) {\n    if (!scope) continue;\n    const found = Array.from(scope.querySelectorAll<HTMLElement>(FOCUSABLE)).find(isFocusable);\n    if (found) return found;\n  }\n  return null;\n}\n\n// Module scope, as in `dialogPopupRef.ts`: written inline, the assignment\n// reads to the compiler lint as a component mutating a captured value.\nfunction assignRef<T>(ref: ForwardedRef<T>, node: T | null) {\n  if (typeof ref === 'function') {\n    ref(node);\n    return;\n  }\n  if (ref) {\n    ref.current = node;\n  }\n}\n\nfunction followError(event: MouseEvent<HTMLAnchorElement>, id: string) {\n  // A modified or secondary click is the reader asking the browser for\n  // something else; leave it to the browser.\n  if (\n    event.defaultPrevented ||\n    event.button !== 0 ||\n    event.metaKey ||\n    event.ctrlKey ||\n    event.shiftKey ||\n    event.altKey\n  ) {\n    return;\n  }\n  const element = event.currentTarget.ownerDocument.getElementById(id);\n  const target = element && focusTargetFor(element);\n  // Nothing focusable under that id: the plain fragment jump still scrolls\n  // to it, which is better than a link that does nothing.\n  if (!element || !target) return;\n\n  event.preventDefault();\n  target.focus({ preventScroll: true });\n  // Optional because not every DOM implements it; jsdom does not.\n  (element.closest(FIELD) ?? target).scrollIntoView?.({ block: 'start' });\n}\n\n/**\n * The form's errors, gathered in one place at the top of the form, each a\n * link to the field it is about.\n *\n * Field-level `error` says what is wrong with *this* field, where the reader\n * already is. After a failed submit the reader is at the button, and a long\n * form's errors are scattered above them, some off-screen. This is the list\n * they start from: one heading saying that something is wrong, one line per\n * error, and each line takes them to the control — focus moves to it, and its\n * label scrolls into view.\n *\n * ## How it is announced: focus, not `role=\"alert\"`\n *\n * When the summary appears it moves focus to itself (`tabIndex={-1}`), and it\n * is a `section` named by its heading, so a screen reader announces \"There is\n * a problem, region\" and reads on into the list. That is one deliberate\n * choice, made instead of a live region:\n *\n * - Focus puts the reader *where the fixes are*. The next Tab is the first\n *   error's link. An alert is read out and leaves the reader at the submit\n *   button with the list somewhere above them.\n * - Doing both double-announces: the alert fires and the focus change reads\n *   the same content again.\n *\n * The fields keep to the same rule. A field's `error` is not a live region\n * either: it describes its control through `aria-describedby`, so it is read\n * when a link here moves focus to the field, and not at the moment the\n * summary appears. Before #299 every field error was `role=\"alert\"`, and a\n * failed submit read each one on top of the summary.\n *\n * So there is no `role=\"alert\"` here, and `focusOnAppear` is on by default. It\n * fires when `errors` goes from empty to non-empty. A second failed submit\n * while errors are still listed does not re-fire it; remount the summary with\n * a `key` that changes per submit attempt, or call `focus()` on its ref.\n *\n * It holds no copy of its own beyond the default heading, and renders nothing\n * when `errors` is empty.\n *\n * ```tsx\n * <ErrorSummary\n *   key={attempt}\n *   errors={[\n *     { id: 'display-name', message: 'Enter a display name' },\n *     { id: 'terms', message: 'Accept the terms to continue' },\n *   ]}\n * />\n * ```\n */\nexport const ErrorSummary = forwardRef<HTMLElement, ErrorSummaryProps>(function ErrorSummary(\n  {\n    errors,\n    title = 'There is a problem',\n    headingLevel = 2,\n    focusOnAppear = true,\n    children,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const styles = errorSummary();\n  const titleId = useId();\n  const root = useRef<HTMLElement | null>(null);\n  const hasErrors = errors.length > 0;\n\n  const attach = useCallback(\n    (node: HTMLElement | null) => {\n      root.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n\n  useEffect(() => {\n    if (hasErrors && focusOnAppear) {\n      root.current?.focus();\n    }\n  }, [hasErrors, focusOnAppear]);\n\n  if (!hasErrors) return null;\n\n  const Heading = `h${headingLevel}` as const;\n\n  return (\n    <section\n      tabIndex={-1}\n      aria-labelledby={titleId}\n      data-slot=\"error-summary\"\n      {...props}\n      ref={attach}\n      className={styles.root({ class: className })}\n    >\n      <Heading id={titleId} data-slot=\"error-summary-title\" className={styles.title()}>\n        {title}\n      </Heading>\n      {children && (\n        // A `div`, not a `p`, for the reason `EmptyState` gives: the slot takes\n        // arbitrary nodes, and a block inside a paragraph is repaired by the\n        // parser into markup that is not what was written.\n        <div data-slot=\"error-summary-description\" className={styles.description()}>\n          {children}\n        </div>\n      )}\n      <ul data-slot=\"error-summary-list\" className={styles.list()}>\n        {errors.map((error, index) => (\n          <li key={`${error.id}-${index}`} data-slot=\"error-summary-item\" className={styles.item()}>\n            <span aria-hidden=\"true\" className={styles.marker()}>\n              &gt;\n            </span>\n            <a\n              href={`#${error.id}`}\n              data-slot=\"error-summary-link\"\n              className={styles.link()}\n              onClick={(event) => followError(event, error.id)}\n            >\n              {error.message}\n            </a>\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n});\n"],"mappings":"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","names":["ErrorSummary"]}

package/dist/components/Fieldset.js

@@ -0,0 +1,37 @@
+// src/components/Fieldset.tsx
+import { forwardRef } from "react";
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import { cn } from "../lib/recipe.js";
+import { GroupFrame, labelClassName } from "./fieldFrame.js";
+import { jsx } from "react/jsx-runtime";
+var Legend = forwardRef(function Legend2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    BaseFieldset.Legend,
+    {
+      ref,
+      "data-slot": "fieldset-legend",
+      className: cn(labelClassName(), className),
+      ...props
+    }
+  );
+});
+var Fieldset = forwardRef(function Fieldset2({ legend, error, helperText, disabled, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    GroupFrame,
+    {
+      ref,
+      legend: legend ? /* @__PURE__ */ jsx(Legend, { children: legend }) : void 0,
+      error,
+      helperText,
+      disabled,
+      className,
+      ...props,
+      children
+    }
+  );
+});
+export {
+  Fieldset,
+  Legend
+};
+//# sourceMappingURL=Fieldset.js.map

package/dist/components/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Fieldset.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';\nimport { cn } from '../lib/recipe';\nimport { GroupFrame, labelClassName } from './fieldFrame';\n\nexport interface LegendProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {\n  /** Merged onto the legend, after the label typography it shares with every field label. */\n  className?: string;\n  /** The group's name. Plain text in almost every case; it is announced as the group's label. */\n  children?: ReactNode;\n}\n\n/**\n * The name of a group — the one accessible name a `Fieldset` or a\n * `RadioGroup` is announced by.\n *\n * `Fieldset` and `RadioGroup` render one for you from their `legend` prop, so\n * reach for this directly only when the name is more than a string. It must\n * sit inside one of them: Base UI's `Fieldset.Legend` registers its id with\n * the enclosing fieldset, and that registration is the whole association.\n *\n * A `div`, not a native `<legend>`. The group it names is sometimes a\n * `<fieldset>` and sometimes a `radiogroup`, and a `<legend>` is only valid as\n * the first child of the former; `aria-labelledby` works for both.\n *\n * ```tsx\n * <Fieldset>\n *   <Legend>Notify me about <code>main</code></Legend>\n *   …\n * </Fieldset>\n * ```\n */\nexport const Legend = forwardRef<HTMLDivElement, LegendProps>(function Legend(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <BaseFieldset.Legend\n      ref={ref}\n      data-slot=\"fieldset-legend\"\n      // `cn` for the reason every control here gives: a caller's utility has to\n      // replace the shared typography, not race it in CSS source order.\n      className={cn(labelClassName(), className)}\n      {...props}\n    />\n  );\n});\n\nexport interface FieldsetProps\n  extends Omit<HTMLAttributes<HTMLFieldSetElement>, 'className' | 'children'> {\n  /**\n   * The group's visible name, rendered as a `Legend` and wired to the group by\n   * `aria-labelledby`. Omit it only to place a `Legend` of your own among the\n   * children; a group with no name is one a screen reader announces as\n   * \"group\" and nothing else.\n   */\n  legend?: string;\n  /**\n   * The group's validation message — an error about the set, not any one\n   * control in it (\"choose at least one region\"). It describes the fieldset\n   * and every control inside it, so it is read when focus enters the group.\n   * It is not a live region; `ErrorSummary` announces a failed submit.\n   * Per-control errors belong on the controls.\n   */\n  error?: string;\n  /**\n   * Standing guidance for the whole group, shown under it and replaced by\n   * `error` while one is set — the same rule a single field follows.\n   */\n  helperText?: string;\n  /**\n   * Disables every control in the group. It is the native fieldset attribute\n   * *and* the fieldset context Base UI's fields read, so `Checkbox`, `Switch`\n   * and `Input` inside grey out and refuse input without each being told.\n   */\n  disabled?: boolean;\n  /** Merged onto the `<fieldset>`, not the wrapper around it and its message. */\n  className?: string;\n  /** The controls the group gathers — typically `Checkbox`es, or a pair of `Input`s. */\n  children: ReactNode;\n}\n\n/**\n * A set of controls that answer one question together, with a label, a\n * description and an error for the set.\n *\n * `Input`, `Checkbox` and `Switch` each carry one label and one message for\n * one control. A set of checkboxes, a start-and-end date pair or an address\n * block needs the same three things one level up, and this is where they\n * live: it is the same field contract — `error` is the message *and* the\n * invalid state, `helperText` gives way to it — applied to a group. It is not\n * radio-specific; `RadioGroup` is built on the same frame.\n *\n * What it gets right that a `<div>` with a heading does not: the legend is\n * the group's accessible name, the group's error is in the fieldset's\n * `aria-describedby` rather than hanging off whichever control it was placed\n * next to, and `disabled` reaches every control inside.\n *\n * ```tsx\n * <Fieldset legend=\"Regions\" helperText=\"Where the replicas run\">\n *   <Checkbox name=\"region\" value=\"eu\" label=\"Europe\" />\n *   <Checkbox name=\"region\" value=\"us\" label=\"North America\" />\n * </Fieldset>\n * ```\n */\nexport const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(\n  { legend, error, helperText, disabled, className, children, ...props },\n  ref,\n) {\n  return (\n    <GroupFrame\n      ref={ref as Ref<HTMLElement>}\n      legend={legend ? <Legend>{legend}</Legend> : undefined}\n      error={error}\n      helperText={helperText}\n      disabled={disabled}\n      className={className}\n      {...props}\n    >\n      {children}\n    </GroupFrame>\n  );\n});\n"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,SAAS,YAAY,oBAAoB;AACzC,SAAS,UAAU;AACnB,SAAS,YAAY,sBAAsB;AAkCvC;AALG,IAAM,SAAS,WAAwC,SAASA,QACrE,EAAE,WAAW,GAAG,MAAM,GACtB,KACA;AACA,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MAGV,WAAW,GAAG,eAAe,GAAG,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AA2DM,IAAM,WAAW,WAA+C,SAASC,UAC9E,EAAE,QAAQ,OAAO,YAAY,UAAU,WAAW,UAAU,GAAG,MAAM,GACrE,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ,SAAS,oBAAC,UAAQ,kBAAO,IAAY;AAAA,MAC7C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;","names":["Legend","Fieldset"]}

package/dist/components/Glyph.js

@@ -0,0 +1,60 @@
+// src/components/Glyph.tsx
+import { cn } from "../lib/recipe.js";
+import { NerdIcon } from "./NerdIcon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({
+  name,
+  accent,
+  size = "md",
+  bracketed = false,
+  children,
+  label,
+  className,
+  ...props
+}) {
+  if (name) {
+    return /* @__PURE__ */ jsx(
+      NerdIcon,
+      {
+        name,
+        accent,
+        size,
+        bracketed,
+        label,
+        className,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "glyph",
+      className: cn(
+        "inline-flex items-center font-mono select-none",
+        accent === "primary" && "text-accent-primary",
+        accent === "secondary" && "text-accent-secondary",
+        accent === "tertiary" && "text-accent-tertiary",
+        accent === "success" && "text-intent-success",
+        accent === "warning" && "text-intent-warning",
+        accent === "danger" && "text-intent-danger",
+        accent === "info" && "text-intent-info",
+        accent === "muted" && "text-content-muted",
+        className
+      ),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": !label,
+      ...props,
+      children: [
+        bracketed && /* @__PURE__ */ jsx("span", { className: "text-content-muted font-bold mr-0.5", children: "[" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-center inline-block leading-none", children }),
+        bracketed && /* @__PURE__ */ jsx("span", { className: "text-content-muted font-bold ml-0.5", children: "]" })
+      ]
+    }
+  );
+}
+export {
+  Glyph
+};
+//# sourceMappingURL=Glyph.js.map

package/dist/components/Glyph.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Glyph.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../lib/recipe';\nimport { NerdIcon, type NerdIconAccent, type NerdIconName } from './NerdIcon';\n\nexport interface GlyphProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Named Nerd Font glyph or custom ASCII character */\n  name?: NerdIconName;\n  /** Semantic role accent color */\n  accent?: NerdIconAccent;\n  /** Size scale */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Wrap with brutalist brackets: `[  ]` */\n  bracketed?: boolean;\n  /** Custom character or text child */\n  children?: ReactNode;\n  /** Screen-reader accessible label */\n  label?: string;\n}\n\n/**\n * Unified Glyph primitive for typographic and Nerd Font icons.\n *\n * Supports both named developer icons (`name=\"git-branch\"`) and pure ASCII symbols (`children=\"->\"`).\n *\n * @example\n * ```tsx\n * // Named Nerd Font\n * <Glyph name=\"git-branch\" accent=\"primary\" />\n *\n * // Typographic ASCII\n * <Glyph bracketed accent=\"secondary\">-></Glyph>\n * ```\n */\nexport function Glyph({\n  name,\n  accent,\n  size = 'md',\n  bracketed = false,\n  children,\n  label,\n  className,\n  ...props\n}: GlyphProps) {\n  if (name) {\n    return (\n      <NerdIcon\n        name={name}\n        accent={accent}\n        size={size}\n        bracketed={bracketed}\n        label={label}\n        className={className}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <span data-slot=\"glyph\"\n      className={cn(\n        'inline-flex items-center font-mono select-none',\n        accent === 'primary' && 'text-accent-primary',\n        accent === 'secondary' && 'text-accent-secondary',\n        accent === 'tertiary' && 'text-accent-tertiary',\n        accent === 'success' && 'text-intent-success',\n        accent === 'warning' && 'text-intent-warning',\n        accent === 'danger' && 'text-intent-danger',\n        accent === 'info' && 'text-intent-info',\n        accent === 'muted' && 'text-content-muted',\n        className,\n      )}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={!label}\n      {...props}\n    >\n      {bracketed && <span className=\"text-content-muted font-bold mr-0.5\">[</span>}\n      <span className=\"font-mono text-center inline-block leading-none\">{children}</span>\n      {bracketed && <span className=\"text-content-muted font-bold ml-0.5\">]</span>}\n    </span>\n  );\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,gBAAwD;AA2C3D,cAaF,YAbE;AAZC,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,MAAI,MAAM;AACR,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MAAK,aAAU;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,WAAW,aAAa;AAAA,QACxB,WAAW,eAAe;AAAA,QAC1B,WAAW,cAAc;AAAA,QACzB,WAAW,aAAa;AAAA,QACxB,WAAW,aAAa;AAAA,QACxB,WAAW,YAAY;AAAA,QACvB,WAAW,UAAU;AAAA,QACrB,WAAW,WAAW;AAAA,QACtB;AAAA,MACF;AAAA,MACA,MAAM,QAAQ,QAAQ;AAAA,MACtB,cAAY;AAAA,MACZ,eAAa,CAAC;AAAA,MACb,GAAG;AAAA,MAEH;AAAA,qBAAa,oBAAC,UAAK,WAAU,uCAAsC,eAAC;AAAA,QACrE,oBAAC,UAAK,WAAU,mDAAmD,UAAS;AAAA,QAC3E,aAAa,oBAAC,UAAK,WAAU,uCAAsC,eAAC;AAAA;AAAA;AAAA,EACvE;AAEJ;","names":[]}

package/dist/components/Input.js

@@ -0,0 +1,111 @@
+"use client";
+
+// src/components/Input.tsx
+import { recipe } from "../lib/recipe.js";
+import { Field as BaseField } from "@base-ui/react/field";
+import { FieldFrame, accentStyle } from "./fieldFrame.js";
+import { jsx } from "react/jsx-runtime";
+var fieldControl = recipe({
+  slots: {
+    /**
+     * No `outline-none` here, deliberately. The focus accent is a *border*
+     * swap, and a border swap is invisible under forced-colors — which is why
+     * `styles.css` declares a global `:focus-visible` outline. Suppressing the
+     * outline from this slot defeats that rule: the utility carries a class and
+     * a pseudo-class, so it outranks the bare `:focus-visible` selector and
+     * wins on exactly the keyboard focus the rule exists to cover.
+     *
+     * The `disabled:` half is the treatment `Select`'s listbox trigger already
+     * wore: a sunken ground, the subtle edge and muted ink. Without it a
+     * disabled `Input` rendered exactly like an editable one — the username
+     * in the account-settings proof read as a field you could change (#252).
+     */
+    control: "w-full border-2 border-edge-strong bg-surface-base font-mono text-sm text-content-primary transition-colors placeholder:text-content-muted focus:border-[var(--field-accent)] disabled:cursor-not-allowed disabled:border-edge-subtle disabled:bg-surface-sunken disabled:text-content-muted"
+  },
+  variants: {
+    /** Padding differs by control: a textarea is a box, the others are lines. */
+    shape: {
+      line: { control: "px-4 py-2.5" },
+      box: { control: "p-4" }
+    },
+    invalid: {
+      true: {
+        control: "border-intent-danger"
+      }
+    },
+    interactive: {
+      true: { control: "cursor-pointer" }
+    }
+  },
+  defaultVariants: {
+    shape: "line",
+    invalid: false
+  }
+});
+function Input({
+  label,
+  error,
+  helperText,
+  /**
+   * Semantic accent for the focus border, as on every control here. Declared
+   * on `FieldProps` in `./fieldFrame`, and named again at the default so the
+   * generated props table has a description rather than a blank cell.
+   */
+  accent = "primary",
+  /** Merged onto the control itself, not the label-and-error group. */
+  className = "",
+  id,
+  style,
+  ...props
+}) {
+  const styles = fieldControl({ invalid: Boolean(error) });
+  return /* @__PURE__ */ jsx(FieldFrame, { label, error, helperText, children: /* @__PURE__ */ jsx(
+    BaseField.Control,
+    {
+      id,
+      "data-slot": "field-control",
+      style: accentStyle(accent, style),
+      className: styles.control({ class: className }),
+      ...props
+    }
+  ) });
+}
+function TextArea({
+  label,
+  error,
+  helperText,
+  /**
+   * Semantic accent for the focus border, as on every control here. Declared
+   * on `FieldProps` in `./fieldFrame`, and named again at the default so the
+   * generated props table has a description rather than a blank cell.
+   */
+  accent = "primary",
+  /** Merged onto the control itself, not the label-and-error group. */
+  className = "",
+  id,
+  style,
+  ...props
+}) {
+  const styles = fieldControl({ shape: "box", invalid: Boolean(error) });
+  return /* @__PURE__ */ jsx(FieldFrame, { label, error, helperText, children: /* @__PURE__ */ jsx(
+    BaseField.Control,
+    {
+      id,
+      render: (controlProps) => /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ...controlProps,
+          ...props,
+          style: accentStyle(accent, style),
+          className: styles.control({ class: className })
+        }
+      )
+    }
+  ) });
+}
+export {
+  Input,
+  TextArea,
+  fieldControl
+};
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Input.tsx"],"sourcesContent":["'use client';\n\nimport type { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';\nimport { recipe } from '../lib/recipe';\nimport { Field as BaseField } from '@base-ui/react/field';\nimport { FieldFrame, accentStyle } from './fieldFrame';\nimport type { FieldProps } from './fieldFrame';\n\n/**\n * Form controls — the reference for how a component in this system is built.\n *\n * Three things to copy from here:\n *\n *   1. **Every colour addresses a role.** `bg-surface-base`,\n *      `text-content-primary`, `border-edge-strong`, `text-intent-danger`. Every\n *      level is styled by the same classes, and a new one would be too.\n *   2. **Styling is a `recipe`, not a template string.** The recipe has one\n *      slot per element, so a consumer can reach any of them, and conflicts\n *      resolve — a caller's `bg-surface-raised` genuinely replaces the base's\n *      `bg-surface-base` rather than racing it in CSS source order.\n *   3. **Runtime values stay out of the class string.** The focus accent comes\n *      from a prop, so it travels as a custom property; a utility cannot be\n *      assembled at build time from a value known only at runtime.\n *\n * The label, message and ARIA wiring are not here: they are `FieldFrame` in\n * `./fieldFrame`, shared with `Checkbox` and `Switch` so that one field\n * implementation serves every control.\n */\n\n/**\n * The control every text-shaped field wears: `Input`, `TextArea`, and both of\n * `Select`'s presentations — the native `<select>` and the listbox trigger.\n *\n * Exported for `./Select` (#164), whose closed trigger has to look like the\n * native control it replaced — one recipe is what makes that true rather than\n * approximately true. `src/index.ts` names this module's exports rather than\n * re-exporting it wholesale, so the recipe, and the `tailwind-variants` type\n * it carries, stays out of the published `.d.ts`.\n */\nexport const fieldControl = recipe({\n  slots: {\n    /**\n     * No `outline-none` here, deliberately. The focus accent is a *border*\n     * swap, and a border swap is invisible under forced-colors — which is why\n     * `styles.css` declares a global `:focus-visible` outline. Suppressing the\n     * outline from this slot defeats that rule: the utility carries a class and\n     * a pseudo-class, so it outranks the bare `:focus-visible` selector and\n     * wins on exactly the keyboard focus the rule exists to cover.\n     *\n     * The `disabled:` half is the treatment `Select`'s listbox trigger already\n     * wore: a sunken ground, the subtle edge and muted ink. Without it a\n     * disabled `Input` rendered exactly like an editable one — the username\n     * in the account-settings proof read as a field you could change (#252).\n     */\n    control:\n      'w-full border-2 border-edge-strong bg-surface-base font-mono text-sm text-content-primary transition-colors placeholder:text-content-muted focus:border-[var(--field-accent)] ' +\n      'disabled:cursor-not-allowed disabled:border-edge-subtle disabled:bg-surface-sunken disabled:text-content-muted',\n  },\n  variants: {\n    /** Padding differs by control: a textarea is a box, the others are lines. */\n    shape: {\n      line: { control: 'px-4 py-2.5' },\n      box: { control: 'p-4' },\n    },\n    invalid: {\n      true: {\n        control: 'border-intent-danger',\n      },\n    },\n    interactive: {\n      true: { control: 'cursor-pointer' },\n    },\n  },\n  defaultVariants: {\n    shape: 'line',\n    invalid: false,\n  },\n});\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'>,\n    FieldProps {}\n\n/**\n * A single-line text field, with its label, helper text and error as one unit.\n *\n * `Input`, `TextArea` and `Select` share one contract — `label`, `error`,\n * `helperText`, `accent` — and one recipe. The first two share a page; `Select`\n * has its own, for the list it opens. Pick by the shape of the answer, not by\n * styling: one line, several, or one of a fixed set.\n *\n * The field owns its own labelling. Supplying `label` associates it with a\n * generated `id` when the caller gives none, and `error` does three things at\n * once — the message, `aria-invalid`, and the danger border — so an invalid\n * field cannot end up looking wrong while announcing nothing.\n *\n * The message joins the control's `aria-describedby` and is read when the\n * field takes focus. It is not a live region. Pair a form with `ErrorSummary`,\n * which is what announces a failed submit.\n */\nexport function Input({\n  label,\n  error,\n  helperText,\n  /**\n   * Semantic accent for the focus border, as on every control here. Declared\n   * on `FieldProps` in `./fieldFrame`, and named again at the default so the\n   * generated props table has a description rather than a blank cell.\n   */\n  accent = 'primary',\n  /** Merged onto the control itself, not the label-and-error group. */\n  className = '',\n  id,\n  style,\n  ...props\n}: InputProps) {\n  const styles = fieldControl({ invalid: Boolean(error) });\n\n  return (\n    <FieldFrame label={label} error={error} helperText={helperText}>\n      <BaseField.Control\n        id={id}\n        data-slot=\"field-control\"\n        style={accentStyle(accent, style)}\n        // `class` is the recipe's override slot: it merges in rather than being\n        // appended after, so a caller's utility actually wins.\n        className={styles.control({ class: className })}\n        {...props}\n      />\n    </FieldFrame>\n  );\n}\n\nexport interface TextAreaProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'>,\n    FieldProps {}\n\nexport function TextArea({\n  label,\n  error,\n  helperText,\n  /**\n   * Semantic accent for the focus border, as on every control here. Declared\n   * on `FieldProps` in `./fieldFrame`, and named again at the default so the\n   * generated props table has a description rather than a blank cell.\n   */\n  accent = 'primary',\n  /** Merged onto the control itself, not the label-and-error group. */\n  className = '',\n  id,\n  style,\n  ...props\n}: TextAreaProps) {\n  const styles = fieldControl({ shape: 'box', invalid: Boolean(error) });\n\n  // `id` goes to `Field.Control`, not onto the element `render` returns. Set\n  // there, it overwrote the id the label's `for` points at — with the\n  // caller's, or with `undefined` when none was given — so a click on the\n  // words focused nothing. The name survived only through `aria-labelledby`.\n  return (\n    <FieldFrame label={label} error={error} helperText={helperText}>\n      {/*\n        The function form of `render`, not the element form, because\n        `Field.Control` is typed to `HTMLInputElement` — spreading a\n        textarea's own props through it is a type error rather than a\n        cosmetic one. This takes the wired props and puts them on an element\n        of the right type.\n      */}\n      <BaseField.Control\n        id={id}\n        render={(controlProps) => (\n          <textarea\n            {...controlProps}\n            {...props}\n            style={accentStyle(accent, style)}\n            className={styles.control({ class: className })}\n          />\n        )}\n      />\n    </FieldFrame>\n  );\n}\n"],"mappings":";;;AAGA,SAAS,cAAc;AACvB,SAAS,SAAS,iBAAiB;AACnC,SAAS,YAAY,mBAAmB;AAmHlC;AAjFC,IAAM,eAAe,OAAO;AAAA,EACjC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcL,SACE;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA;AAAA,IAER,OAAO;AAAA,MACL,MAAM,EAAE,SAAS,cAAc;AAAA,MAC/B,KAAK,EAAE,SAAS,MAAM;AAAA,IACxB;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,QACJ,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,MAAM,EAAE,SAAS,iBAAiB;AAAA,IACpC;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF,CAAC;AAuBM,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS;AAAA;AAAA,EAET,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,SAAS,aAAa,EAAE,SAAS,QAAQ,KAAK,EAAE,CAAC;AAEvD,SACE,oBAAC,cAAW,OAAc,OAAc,YACtC;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,OAAO,YAAY,QAAQ,KAAK;AAAA,MAGhC,WAAW,OAAO,QAAQ,EAAE,OAAO,UAAU,CAAC;AAAA,MAC7C,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAMO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS;AAAA;AAAA,EAET,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,SAAS,aAAa,EAAE,OAAO,OAAO,SAAS,QAAQ,KAAK,EAAE,CAAC;AAMrE,SACE,oBAAC,cAAW,OAAc,OAAc,YAQtC;AAAA,IAAC,UAAU;AAAA,IAAV;AAAA,MACC;AAAA,MACA,QAAQ,CAAC,iBACP;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,OAAO,YAAY,QAAQ,KAAK;AAAA,UAChC,WAAW,OAAO,QAAQ,EAAE,OAAO,UAAU,CAAC;AAAA;AAAA,MAChD;AAAA;AAAA,EAEJ,GACF;AAEJ;","names":[]}

package/dist/components/LinkProvider.js

@@ -0,0 +1,76 @@
+"use client";
+
+// src/components/LinkProvider.tsx
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { cn } from "../lib/recipe.js";
+import { jsx } from "react/jsx-runtime";
+var LinkContext = createContext({ component: "a" });
+function LinkProvider({ component, isCurrent, children }) {
+  const parent = useContext(LinkContext);
+  const resolvedComponent = component ?? parent.component;
+  const resolvedIsCurrent = isCurrent ?? parent.isCurrent;
+  const value = useMemo(
+    () => ({ component: resolvedComponent, isCurrent: resolvedIsCurrent }),
+    [resolvedComponent, resolvedIsCurrent]
+  );
+  return /* @__PURE__ */ jsx(LinkContext.Provider, { value, children });
+}
+function useLinkComponent() {
+  return useContext(LinkContext).component;
+}
+var EXTERNAL = /^([a-z][a-z0-9+.-]*:)?\/\//i;
+var NON_ROUTED = /^(mailto:|tel:|#)/i;
+function isExternalHref(href) {
+  return EXTERNAL.test(href) || NON_ROUTED.test(href);
+}
+function useIsCurrentHref(href) {
+  const { isCurrent } = useContext(LinkContext);
+  if (!isCurrent || isExternalHref(href)) return false;
+  return isCurrent(href);
+}
+var ProvidedAnchor = forwardRef(function ProvidedAnchor2({ component: Component, href, children, ...rest }, ref) {
+  if (isExternalHref(href)) {
+    const external = EXTERNAL.test(href);
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        href,
+        ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Component, { ref, href, ...rest, children });
+});
+function renderProvidedLink(component, props) {
+  return /* @__PURE__ */ jsx(ProvidedAnchor, { component, ...props });
+}
+var SiteLink = forwardRef(function SiteLink2({ href, current, className, "aria-current": ariaCurrent, ...props }, ref) {
+  const Component = useLinkComponent();
+  const matched = useIsCurrentHref(href);
+  const isCurrent = current ?? matched;
+  const merged = cn(className) || void 0;
+  return /* @__PURE__ */ jsx(
+    ProvidedAnchor,
+    {
+      ref,
+      component: Component,
+      href,
+      "data-slot": "site-link",
+      ...props,
+      className: merged,
+      "aria-current": isCurrent ? "page" : ariaCurrent
+    }
+  );
+});
+export {
+  LinkProvider,
+  SiteLink,
+  isExternalHref,
+  renderProvidedLink,
+  useIsCurrentHref,
+  useLinkComponent
+};
+//# sourceMappingURL=LinkProvider.js.map

package/dist/components/LinkProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/LinkProvider.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';\nimport { cn } from '../lib/recipe';\n\n/** What a consumer's link component is handed: an `href` and the usual anchor props. */\nexport type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n  href: string;\n};\n\ninterface LinkContextValue {\n  component: ElementType<LinkComponentProps>;\n  isCurrent?: (href: string) => boolean;\n}\n\n// One context for every chrome in the package. `DocsLinkProvider` writes to it\n// too, so a site that mounts both the docs chrome and the site chrome injects\n// its router once rather than once per family (issue 246).\nconst LinkContext = createContext<LinkContextValue>({ component: 'a' });\n\nexport interface LinkProviderProps {\n  /**\n   * Any component accepting `href` and the usual anchor props — `next/link`,\n   * `react-router`'s `Link`, a TanStack Router `Link`. Omit it to keep the\n   * enclosing provider's, or the plain `<a>` when there is none.\n   */\n  component?: ElementType<LinkComponentProps>;\n  /**\n   * Whether `href` is the page being shown — the consumer's route, asked\n   * rather than guessed. `SiteNavItem` and `SiteLink` mark the matching link\n   * `aria-current=\"page\"`. Omit it to keep the enclosing provider's; with none\n   * anywhere, nothing is current unless an item says so itself.\n   */\n  isCurrent?: (href: string) => boolean;\n  children: ReactNode;\n}\n\n/**\n * The link adapter: how this package's chrome renders an internal link, and\n * how it learns which page is current, without depending on a router.\n *\n * The default is a plain `<a>` and no current page, which is right for\n * Storybook, static output and a server-rendered page that marks its own\n * items. An app with a client-side router supplies its `Link` so navigation\n * stops being a full page load, and an `isCurrent` built from its own\n * location so the active item follows the route. Nothing in the package reads\n * `window.location`: the route is the router's to know.\n *\n * Nested providers inherit what they do not set, so a subtree can swap the\n * link component and keep the current-page test, or the reverse.\n *\n * ```tsx\n * <LinkProvider component={Link} isCurrent={(href) => href === pathname}>\n *   <SiteHeader … />\n * </LinkProvider>\n * ```\n */\nexport function LinkProvider({ component, isCurrent, children }: LinkProviderProps) {\n  const parent = useContext(LinkContext);\n  const resolvedComponent = component ?? parent.component;\n  const resolvedIsCurrent = isCurrent ?? parent.isCurrent;\n  const value = useMemo(\n    () => ({ component: resolvedComponent, isCurrent: resolvedIsCurrent }),\n    [resolvedComponent, resolvedIsCurrent],\n  );\n  return <LinkContext.Provider value={value}>{children}</LinkContext.Provider>;\n}\n\n/** The injected link component, or `'a'` when nothing was injected. */\nexport function useLinkComponent(): ElementType<LinkComponentProps> {\n  return useContext(LinkContext).component;\n}\n\nconst EXTERNAL = /^([a-z][a-z0-9+.-]*:)?\\/\\//i;\nconst NON_ROUTED = /^(mailto:|tel:|#)/i;\n\n/** True for links that must stay plain anchors regardless of the injected router. */\nexport function isExternalHref(href: string): boolean {\n  return EXTERNAL.test(href) || NON_ROUTED.test(href);\n}\n\n/**\n * Whether `href` is the current page, by the provider's `isCurrent`.\n *\n * An external or in-page href is never current: it is not a route, so there is\n * nothing for the consumer's router to match it against.\n */\nexport function useIsCurrentHref(href: string): boolean {\n  const { isCurrent } = useContext(LinkContext);\n  if (!isCurrent || isExternalHref(href)) return false;\n  return isCurrent(href);\n}\n\n// The shared body of `SiteLink` and `DocsLink`: an internal link through the\n// injected component, an external one through a plain `<a>` opening a new tab\n// with `rel=\"noopener noreferrer\"`. Pure in-page hashes stay plain too —\n// routers tend to treat `#section` as a route change and scroll to the top\n// instead of to the anchor. The caller's own props are spread last, so an\n// explicit `target` or `rel` wins.\n//\n// A component rather than a helper taking a ref, so the ref is forwarded the\n// way React expects rather than handed to a function during render.\nconst ProvidedAnchor = forwardRef<\n  HTMLAnchorElement,\n  LinkComponentProps & { component: ElementType<LinkComponentProps> }\n>(function ProvidedAnchor({ component: Component, href, children, ...rest }, ref) {\n  if (isExternalHref(href)) {\n    const external = EXTERNAL.test(href);\n    return (\n      <a\n        ref={ref}\n        href={href}\n        {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}\n        {...rest}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  return (\n    <Component ref={ref} href={href} {...rest}>\n      {children}\n    </Component>\n  );\n});\n\n// `DocsLink`'s entry point. Not exported from the package: `src/index.ts`\n// names this file's exports one by one.\nexport function renderProvidedLink(\n  component: ElementType<LinkComponentProps>,\n  props: LinkComponentProps,\n) {\n  return <ProvidedAnchor component={component} {...props} />;\n}\n\nexport interface SiteLinkProps extends LinkComponentProps {\n  /**\n   * Marks the link as the current page. Leave it unset and the provider's\n   * `isCurrent` decides; set it to override that for this one link.\n   */\n  current?: boolean;\n  /** Merged into the anchor's classes. */\n  className?: string;\n}\n\n/**\n * A link rendered through the {@link LinkProvider} — the router's `Link` for an\n * internal href, a plain `<a>` for an external one — carrying\n * `aria-current=\"page\"` when it is the current page.\n *\n * The attribute is the whole of the current state: `SiteNavItem` styles it with\n * an `aria-[current=page]:` variant rather than a second flag, so what a screen\n * reader is told and what a sighted reader sees cannot disagree.\n */\nexport const SiteLink = forwardRef<HTMLAnchorElement, SiteLinkProps>(function SiteLink(\n  { href, current, className, 'aria-current': ariaCurrent, ...props },\n  ref,\n) {\n  const Component = useLinkComponent();\n  const matched = useIsCurrentHref(href);\n  const isCurrent = current ?? matched;\n  // `cn` so a caller's conflicting utilities resolve rather than both\n  // emitting; `undefined` rather than an empty `class=\"\"` when there are none.\n  const merged = cn(className) || undefined;\n  return (\n    <ProvidedAnchor\n      ref={ref}\n      component={Component}\n      href={href}\n      data-slot=\"site-link\"\n      {...props}\n      className={merged}\n      aria-current={isCurrent ? 'page' : ariaCurrent}\n    />\n  );\n});\n"],"mappings":";;;AAEA,SAAS,eAAe,YAAY,YAAY,eAAe;AAE/D,SAAS,UAAU;AA8DV;AA/CT,IAAM,cAAc,cAAgC,EAAE,WAAW,IAAI,CAAC;AAuC/D,SAAS,aAAa,EAAE,WAAW,WAAW,SAAS,GAAsB;AAClF,QAAM,SAAS,WAAW,WAAW;AACrC,QAAM,oBAAoB,aAAa,OAAO;AAC9C,QAAM,oBAAoB,aAAa,OAAO;AAC9C,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,WAAW,mBAAmB,WAAW,kBAAkB;AAAA,IACpE,CAAC,mBAAmB,iBAAiB;AAAA,EACvC;AACA,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAe,UAAS;AACvD;AAGO,SAAS,mBAAoD;AAClE,SAAO,WAAW,WAAW,EAAE;AACjC;AAEA,IAAM,WAAW;AACjB,IAAM,aAAa;AAGZ,SAAS,eAAe,MAAuB;AACpD,SAAO,SAAS,KAAK,IAAI,KAAK,WAAW,KAAK,IAAI;AACpD;AAQO,SAAS,iBAAiB,MAAuB;AACtD,QAAM,EAAE,UAAU,IAAI,WAAW,WAAW;AAC5C,MAAI,CAAC,aAAa,eAAe,IAAI,EAAG,QAAO;AAC/C,SAAO,UAAU,IAAI;AACvB;AAWA,IAAM,iBAAiB,WAGrB,SAASA,gBAAe,EAAE,WAAW,WAAW,MAAM,UAAU,GAAG,KAAK,GAAG,KAAK;AAChF,MAAI,eAAe,IAAI,GAAG;AACxB,UAAM,WAAW,SAAS,KAAK,IAAI;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACC,GAAI,WAAW,EAAE,QAAQ,UAAU,KAAK,sBAAsB,IAAI,CAAC;AAAA,QACnE,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE,oBAAC,aAAU,KAAU,MAAa,GAAG,MAClC,UACH;AAEJ,CAAC;AAIM,SAAS,mBACd,WACA,OACA;AACA,SAAO,oBAAC,kBAAe,WAAuB,GAAG,OAAO;AAC1D;AAqBO,IAAM,WAAW,WAA6C,SAASC,UAC5E,EAAE,MAAM,SAAS,WAAW,gBAAgB,aAAa,GAAG,MAAM,GAClE,KACA;AACA,QAAM,YAAY,iBAAiB;AACnC,QAAM,UAAU,iBAAiB,IAAI;AACrC,QAAM,YAAY,WAAW;AAG7B,QAAM,SAAS,GAAG,SAAS,KAAK;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,aAAU;AAAA,MACT,GAAG;AAAA,MACJ,WAAW;AAAA,MACX,gBAAc,YAAY,SAAS;AAAA;AAAA,EACrC;AAEJ,CAAC;","names":["ProvidedAnchor","SiteLink"]}

package/dist/components/Menu.js

@@ -0,0 +1,144 @@
+"use client";
+
+// src/components/Menu.tsx
+import { forwardRef } from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Check } from "lucide-react";
+import { cn, recipe } from "../lib/recipe.js";
+import { usePortalThemeAttribute } from "./portalTheme.js";
+import { floatingSurface, floatingParts } from "./floatingSurface.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var menu = recipe({
+  extend: floatingSurface,
+  slots: { popup: "min-w-48 max-h-(--available-height) overflow-y-auto py-1" }
+});
+var Menu = forwardRef(function Menu2({
+  trigger,
+  children,
+  side = "bottom",
+  align = "start",
+  open,
+  defaultOpen,
+  onOpenChange,
+  className,
+  ...props
+}, ref) {
+  const styles = menu();
+  const portalTheme = usePortalThemeAttribute();
+  return /* @__PURE__ */ jsxs(
+    BaseMenu.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange: onOpenChange ? (next) => onOpenChange(next) : void 0,
+      children: [
+        /* @__PURE__ */ jsx(BaseMenu.Trigger, { render: trigger }),
+        /* @__PURE__ */ jsx(BaseMenu.Portal, { children: /* @__PURE__ */ jsx(
+          BaseMenu.Positioner,
+          {
+            ...portalTheme,
+            side,
+            align,
+            sideOffset: 6,
+            collisionPadding: 8,
+            "data-slot": "menu-positioner",
+            className: styles.positioner(),
+            children: /* @__PURE__ */ jsx(
+              BaseMenu.Popup,
+              {
+                ref,
+                "data-slot": "menu",
+                className: styles.popup({ class: className }),
+                ...props,
+                children
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+});
+var MenuItem = forwardRef(function MenuItem2({ children, intent, disabled = false, closeOnClick = true, className, ...props }, ref) {
+  const parts = floatingParts();
+  return /* @__PURE__ */ jsx(
+    BaseMenu.Item,
+    {
+      ref,
+      disabled,
+      closeOnClick,
+      "data-slot": "menu-item",
+      className: cn(
+        parts.item(),
+        intent === "danger" && parts.danger(),
+        disabled && parts.disabled(),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+var MenuRadioGroup = forwardRef(
+  function MenuRadioGroup2({ label, value, defaultValue, onValueChange, children, className, ...props }, ref) {
+    const parts = floatingParts();
+    return /* @__PURE__ */ jsxs(
+      BaseMenu.RadioGroup,
+      {
+        ref,
+        value,
+        defaultValue,
+        onValueChange: onValueChange ? (next) => onValueChange(next) : void 0,
+        "data-slot": "menu-radio-group",
+        className,
+        ...props,
+        children: [
+          label ? /* @__PURE__ */ jsx(BaseMenu.GroupLabel, { "data-slot": "menu-group-label", className: parts.groupLabel(), children: label }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+var MenuRadioItem = forwardRef(
+  function MenuRadioItem2({ value, children, closeOnClick = false, className, ...props }, ref) {
+    const parts = floatingParts();
+    return /* @__PURE__ */ jsxs(
+      BaseMenu.RadioItem,
+      {
+        ref,
+        value,
+        closeOnClick,
+        "data-slot": "menu-radio-item",
+        className: cn(parts.item(), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: parts.indicator(), children: /* @__PURE__ */ jsx(BaseMenu.RadioItemIndicator, { "data-slot": "menu-radio-indicator", children: /* @__PURE__ */ jsx(Check, { size: 14, strokeWidth: 3 }) }) }),
+          children
+        ]
+      }
+    );
+  }
+);
+var MenuSeparator = forwardRef(
+  function MenuSeparator2({ className, ...props }, ref) {
+    const parts = floatingParts();
+    return /* @__PURE__ */ jsx(
+      BaseMenu.Separator,
+      {
+        ref,
+        "data-slot": "menu-separator",
+        className: cn(parts.separator(), className),
+        ...props
+      }
+    );
+  }
+);
+export {
+  Menu,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator
+};
+//# sourceMappingURL=Menu.js.map