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

package/dist/components/ReportDocument.js

@@ -0,0 +1,75 @@
+// src/components/ReportDocument.tsx
+import { forwardRef } from "react";
+import { cn, recipe } from "../lib/recipe.js";
+import { childrenToText, slugify } from "../lib/slug.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var document_ = recipe({
+  slots: {
+    // `print:` keeps the document usable on paper, which is where a report
+    // often ends up. Utilities rather than an `@media print` block, because a
+    // stylesheet is not where styling lives here.
+    root: "mx-auto w-full max-w-4xl bg-surface-base px-6 py-12 font-sans text-content-primary sm:px-8 print:max-w-none print:px-0 print:py-0",
+    header: "mb-10 border-b-4 border-edge-strong pb-6",
+    title: "font-display text-3xl font-bold uppercase leading-tight tracking-tight sm:text-4xl",
+    subtitle: "mt-3 max-w-2xl font-sans text-base text-content-secondary",
+    meta: "mt-6 flex flex-wrap gap-x-8 gap-y-3",
+    metaItem: "flex flex-col gap-0.5",
+    metaLabel: "font-mono text-[0.6875rem] font-bold uppercase tracking-widest text-content-muted",
+    metaValue: "font-mono text-sm text-content-secondary",
+    body: "flex flex-col gap-8",
+    section: "scroll-mt-4 break-inside-avoid",
+    sectionTitle: "mb-4 border-b-2 border-edge-subtle pb-2 font-display text-xl font-bold uppercase tracking-tight",
+    sectionBody: "flex flex-col gap-4",
+    details: "group border-2 border-edge-strong bg-surface-raised",
+    summary: "flex cursor-pointer list-none items-center gap-3 px-4 py-3 font-mono text-sm font-bold text-content-primary marker:content-none hover:bg-surface-sunken",
+    summaryNote: "font-normal text-content-muted",
+    detailsBody: "border-t-2 border-edge-subtle p-4"
+  }
+});
+var ReportDocument = forwardRef(function ReportDocument2({ title, subtitle, meta, children, className, ...props }, ref) {
+  const styles = document_();
+  return /* @__PURE__ */ jsxs("article", { "data-slot": "report-document", ref, className: cn(styles.root(), className), ...props, children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.header(), children: [
+      /* @__PURE__ */ jsx("h1", { className: styles.title(), children: title }),
+      subtitle ? /* @__PURE__ */ jsx("p", { className: styles.subtitle(), children: subtitle }) : null,
+      meta && meta.length > 0 ? /* @__PURE__ */ jsx("dl", { className: styles.meta(), children: meta.map((item) => /* @__PURE__ */ jsxs("div", { className: styles.metaItem(), children: [
+        /* @__PURE__ */ jsx("dt", { className: styles.metaLabel(), children: item.label }),
+        /* @__PURE__ */ jsx("dd", { className: styles.metaValue(), children: item.value })
+      ] }, item.label)) }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.body(), children })
+  ] });
+});
+var ReportSection = forwardRef(function ReportSection2({ title, id, children, className, ...props }, ref) {
+  const styles = document_();
+  const anchor = id ?? slugify(childrenToText(title));
+  return /* @__PURE__ */ jsxs("section", { "data-slot": "report-section", ref, id: anchor, className: cn(styles.section(), className), ...props, children: [
+    /* @__PURE__ */ jsx("h2", { className: styles.sectionTitle(), children: title }),
+    /* @__PURE__ */ jsx("div", { className: styles.sectionBody(), children })
+  ] });
+});
+var ReportDetails = forwardRef(
+  function ReportDetails2({ summary, note, open, children, className, ...props }, ref) {
+    const styles = document_();
+    return /* @__PURE__ */ jsxs("details", { "data-slot": "report-details", ref, open, className: cn(styles.details(), className), ...props, children: [
+      /* @__PURE__ */ jsxs("summary", { className: styles.summary(), children: [
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "text-accent-primary", children: [
+          /* @__PURE__ */ jsx("span", { className: "group-open:hidden", children: "[+]" }),
+          /* @__PURE__ */ jsx("span", { className: "hidden group-open:inline", children: "[-]" })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: summary }),
+        note ? /* @__PURE__ */ jsx("span", { className: styles.summaryNote(), children: note }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.detailsBody(), children })
+    ] });
+  }
+);
+ReportDocument.displayName = "ReportDocument";
+ReportSection.displayName = "ReportSection";
+ReportDetails.displayName = "ReportDetails";
+export {
+  ReportDetails,
+  ReportDocument,
+  ReportSection
+};
+//# sourceMappingURL=ReportDocument.js.map

package/dist/components/ReportDocument.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ReportDocument.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { cn, recipe } from '../lib/recipe';\nimport { childrenToText, slugify } from '../lib/slug';\n\n/**\n * The page frame for a generated report: a titled header with a metadata strip,\n * and a body that spaces its own sections.\n *\n * It exists so an agent writing a report has one obvious starting point rather\n * than a layout decision. Everything inside is ordinary composition — `Card`,\n * `StatCard`, `DataTable`, `NoteBlock`, `Prose` — and the frame only owns the\n * measure, the header and the vertical rhythm.\n *\n * Every colour addresses a role, so the same markup renders on every rung of\n * the ladder and the generator's `--theme` flag is the only thing that decides.\n */\n\nconst document_ = recipe({\n  slots: {\n    // `print:` keeps the document usable on paper, which is where a report\n    // often ends up. Utilities rather than an `@media print` block, because a\n    // stylesheet is not where styling lives here.\n    root: 'mx-auto w-full max-w-4xl bg-surface-base px-6 py-12 font-sans text-content-primary sm:px-8 print:max-w-none print:px-0 print:py-0',\n    header: 'mb-10 border-b-4 border-edge-strong pb-6',\n    title: 'font-display text-3xl font-bold uppercase leading-tight tracking-tight sm:text-4xl',\n    subtitle: 'mt-3 max-w-2xl font-sans text-base text-content-secondary',\n    meta: 'mt-6 flex flex-wrap gap-x-8 gap-y-3',\n    metaItem: 'flex flex-col gap-0.5',\n    metaLabel: 'font-mono text-[0.6875rem] font-bold uppercase tracking-widest text-content-muted',\n    metaValue: 'font-mono text-sm text-content-secondary',\n    body: 'flex flex-col gap-8',\n    section: 'scroll-mt-4 break-inside-avoid',\n    sectionTitle:\n      'mb-4 border-b-2 border-edge-subtle pb-2 font-display text-xl font-bold uppercase tracking-tight',\n    sectionBody: 'flex flex-col gap-4',\n    details: 'group border-2 border-edge-strong bg-surface-raised',\n    summary:\n      'flex cursor-pointer list-none items-center gap-3 px-4 py-3 font-mono text-sm font-bold '\n      + 'text-content-primary marker:content-none hover:bg-surface-sunken',\n    summaryNote: 'font-normal text-content-muted',\n    detailsBody: 'border-t-2 border-edge-subtle p-4',\n  },\n});\n\n/** One `label`/`value` pair in the header strip — a run date, a commit, a scope. */\nexport interface ReportMetaItem {\n  label: string;\n  value: ReactNode;\n}\n\nexport interface ReportDocumentProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** The report's name, as an `<h1>`. What a reader sees first and links by. */\n  title: ReactNode;\n  /** One line under the title saying what the report answers. */\n  subtitle?: ReactNode;\n  /** Rendered as a definition strip under the title. Omit for none. */\n  meta?: readonly ReportMetaItem[];\n  /** The report body — sections, cards, tables. Spaced by the frame. */\n  children: ReactNode;\n  /** Merged onto the article. For the measure or the page margin. */\n  className?: string;\n}\n\n/**\n * The page frame for a generated report: a titled header with a metadata\n * strip, and a body that spaces its own sections.\n *\n * It exists so that a tool writing a report has one obvious starting point\n * rather than a layout decision to make badly. The frame owns the measure, the\n * header and the vertical rhythm, and nothing else — everything inside it is\n * ordinary composition with `Card`, `StatCard`, `DataTable`, `NoteBlock` and\n * `Prose`.\n *\n * Every colour addresses a role, so the same markup renders on every rung of\n * the ladder. It also prints: the `print:` utilities drop the page margin and\n * the measure, because a report is a thing people put in front of other\n * people.\n *\n * Use `ReportSection` for its parts and `ReportDetails` for anything folded\n * away; both are documented on this page.\n */\nexport const ReportDocument = forwardRef<HTMLElement, ReportDocumentProps>(function ReportDocument(\n  { title, subtitle, meta, children, className, ...props },\n  ref,\n) {\n  const styles = document_();\n\n  return (\n    <article data-slot=\"report-document\" ref={ref} className={cn(styles.root(), className)} {...props}>\n      <header className={styles.header()}>\n        <h1 className={styles.title()}>{title}</h1>\n        {subtitle ? <p className={styles.subtitle()}>{subtitle}</p> : null}\n        {meta && meta.length > 0 ? (\n          <dl className={styles.meta()}>\n            {meta.map((item) => (\n              <div key={item.label} className={styles.metaItem()}>\n                <dt className={styles.metaLabel()}>{item.label}</dt>\n                <dd className={styles.metaValue()}>{item.value}</dd>\n              </div>\n            ))}\n          </dl>\n        ) : null}\n      </header>\n      <div className={styles.body()}>{children}</div>\n    </article>\n  );\n});\n\n/**\n * A titled section inside a report. Headings carry the display font from\n * `styles.css`, so this only owns the rule above and the spacing.\n */\nexport interface ReportSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {\n  /** The section heading, rendered as an `<h2>`. */\n  title: ReactNode;\n  /**\n   * Anchor for the section, so a reader can link straight to it. Derived from\n   * the title when omitted — a generated report is often the thing someone\n   * pastes into a ticket, and \"see the Failures section\" is worse than a URL.\n   */\n  id?: string;\n  /** What the section contains. Stacked with the frame's own rhythm. */\n  children: ReactNode;\n  /** Merged onto the section element. */\n  className?: string;\n}\n\nexport const ReportSection = forwardRef<HTMLElement, ReportSectionProps>(function ReportSection(\n  { title, id, children, className, ...props },\n  ref,\n) {\n  const styles = document_();\n  const anchor = id ?? slugify(childrenToText(title));\n  return (\n    <section data-slot=\"report-section\" ref={ref} id={anchor} className={cn(styles.section(), className)} {...props}>\n      <h2 className={styles.sectionTitle()}>{title}</h2>\n      <div className={styles.sectionBody()}>{children}</div>\n    </section>\n  );\n});\n\n/**\n * A collapsible block, built on `<details>`.\n *\n * This is the one interactive affordance a static report can actually have.\n * Every other one — a sort control, a filter, a tab strip — needs client JS that\n * this pipeline does not emit, so it renders as a dead control; `<details>` is\n * disclosure implemented by the browser itself. That makes progressive\n * disclosure available to a generated report at all: a summary anyone can scan,\n * with the stack trace, the full diff or the 200-row table folded away until\n * someone wants it.\n *\n * `open` is worth setting on the block a reader came for. Printing a report\n * prints only what is open, which is usually right and occasionally surprising.\n */\nexport interface ReportDetailsProps extends HTMLAttributes<HTMLDetailsElement> {\n  /** The always-visible row. Should read as a claim, not a label. */\n  summary: ReactNode;\n  /** Short right-aligned annotation on the summary row — a count, a duration. */\n  note?: ReactNode;\n  /** Start expanded. Printing a report prints only what is open. */\n  open?: boolean;\n  /** The folded-away detail — a trace, a diff, a long table. */\n  children: ReactNode;\n  /** Merged onto the `<details>` element. */\n  className?: string;\n}\n\nexport const ReportDetails = forwardRef<HTMLDetailsElement, ReportDetailsProps>(\n  function ReportDetails({ summary, note, open, children, className, ...props }, ref) {\n    const styles = document_();\n    return (\n      <details data-slot=\"report-details\" ref={ref} open={open} className={cn(styles.details(), className)} {...props}>\n        <summary className={styles.summary()}>\n        {/* Text, not an icon: the marker has to survive greyscale printing and a\n            reader who cannot see colour. */}\n          <span aria-hidden=\"true\" className=\"text-accent-primary\">\n            <span className=\"group-open:hidden\">[+]</span>\n            <span className=\"hidden group-open:inline\">[-]</span>\n          </span>\n          <span className=\"flex-1\">{summary}</span>\n          {note ? <span className={styles.summaryNote()}>{note}</span> : null}\n        </summary>\n        <div className={styles.detailsBody()}>{children}</div>\n      </details>\n    );\n  },\n);\n\n/*\n * `forwardRef` requires these: `check:component-contract` gates displayName at\n * budget 0, and without them a ref-forwarding component shows as\n * `ForwardRef(...)` in React DevTools and in a failing test's output.\n */\nReportDocument.displayName = 'ReportDocument';\nReportSection.displayName = 'ReportSection';\nReportDetails.displayName = 'ReportDetails';\n"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,SAAS,IAAI,cAAc;AAC3B,SAAS,gBAAgB,eAAe;AAwFhC,cAKM,YALN;AAzER,IAAM,YAAY,OAAO;AAAA,EACvB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,IACT,cACE;AAAA,IACF,aAAa;AAAA,IACb,SAAS;AAAA,IACT,SACE;AAAA,IAEF,aAAa;AAAA,IACb,aAAa;AAAA,EACf;AACF,CAAC;AAuCM,IAAM,iBAAiB,WAA6C,SAASA,gBAClF,EAAE,OAAO,UAAU,MAAM,UAAU,WAAW,GAAG,MAAM,GACvD,KACA;AACA,QAAM,SAAS,UAAU;AAEzB,SACE,qBAAC,aAAQ,aAAU,mBAAkB,KAAU,WAAW,GAAG,OAAO,KAAK,GAAG,SAAS,GAAI,GAAG,OAC1F;AAAA,yBAAC,YAAO,WAAW,OAAO,OAAO,GAC/B;AAAA,0BAAC,QAAG,WAAW,OAAO,MAAM,GAAI,iBAAM;AAAA,MACrC,WAAW,oBAAC,OAAE,WAAW,OAAO,SAAS,GAAI,oBAAS,IAAO;AAAA,MAC7D,QAAQ,KAAK,SAAS,IACrB,oBAAC,QAAG,WAAW,OAAO,KAAK,GACxB,eAAK,IAAI,CAAC,SACT,qBAAC,SAAqB,WAAW,OAAO,SAAS,GAC/C;AAAA,4BAAC,QAAG,WAAW,OAAO,UAAU,GAAI,eAAK,OAAM;AAAA,QAC/C,oBAAC,QAAG,WAAW,OAAO,UAAU,GAAI,eAAK,OAAM;AAAA,WAFvC,KAAK,KAGf,CACD,GACH,IACE;AAAA,OACN;AAAA,IACA,oBAAC,SAAI,WAAW,OAAO,KAAK,GAAI,UAAS;AAAA,KAC3C;AAEJ,CAAC;AAqBM,IAAM,gBAAgB,WAA4C,SAASC,eAChF,EAAE,OAAO,IAAI,UAAU,WAAW,GAAG,MAAM,GAC3C,KACA;AACA,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,MAAM,QAAQ,eAAe,KAAK,CAAC;AAClD,SACE,qBAAC,aAAQ,aAAU,kBAAiB,KAAU,IAAI,QAAQ,WAAW,GAAG,OAAO,QAAQ,GAAG,SAAS,GAAI,GAAG,OACxG;AAAA,wBAAC,QAAG,WAAW,OAAO,aAAa,GAAI,iBAAM;AAAA,IAC7C,oBAAC,SAAI,WAAW,OAAO,YAAY,GAAI,UAAS;AAAA,KAClD;AAEJ,CAAC;AA6BM,IAAM,gBAAgB;AAAA,EAC3B,SAASC,eAAc,EAAE,SAAS,MAAM,MAAM,UAAU,WAAW,GAAG,MAAM,GAAG,KAAK;AAClF,UAAM,SAAS,UAAU;AACzB,WACE,qBAAC,aAAQ,aAAU,kBAAiB,KAAU,MAAY,WAAW,GAAG,OAAO,QAAQ,GAAG,SAAS,GAAI,GAAG,OACxG;AAAA,2BAAC,aAAQ,WAAW,OAAO,QAAQ,GAGjC;AAAA,6BAAC,UAAK,eAAY,QAAO,WAAU,uBACjC;AAAA,8BAAC,UAAK,WAAU,qBAAoB,iBAAG;AAAA,UACvC,oBAAC,UAAK,WAAU,4BAA2B,iBAAG;AAAA,WAChD;AAAA,QACA,oBAAC,UAAK,WAAU,UAAU,mBAAQ;AAAA,QACjC,OAAO,oBAAC,UAAK,WAAW,OAAO,YAAY,GAAI,gBAAK,IAAU;AAAA,SACjE;AAAA,MACA,oBAAC,SAAI,WAAW,OAAO,YAAY,GAAI,UAAS;AAAA,OAClD;AAAA,EAEJ;AACF;AAOA,eAAe,cAAc;AAC7B,cAAc,cAAc;AAC5B,cAAc,cAAc;","names":["ReportDocument","ReportSection","ReportDetails"]}

package/dist/components/SectionContainer.js

@@ -0,0 +1,18 @@
+// src/components/SectionContainer.tsx
+import { cn } from "../lib/recipe.js";
+import { jsx } from "react/jsx-runtime";
+function SectionContainer({ children, className = "" }) {
+  return (
+    /*
+     * `cn()`, not a template. Appending the caller's `className` to a template
+     * string does nothing when the two conflict: Tailwind resolves
+     * `max-w-3xl` against `max-w-7xl` by CSS source order, not by the order the
+     * classes appear in the attribute. `cn()` merges, so the caller wins.
+     */
+    /* @__PURE__ */ jsx("section", { "data-slot": "section-container", className: cn("mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0", className), children })
+  );
+}
+export {
+  SectionContainer
+};
+//# sourceMappingURL=SectionContainer.js.map

package/dist/components/SectionContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/SectionContainer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '../lib/recipe';\n\nexport interface SectionContainerProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport function SectionContainer({ children, className = '' }: SectionContainerProps) {\n  return (\n    /*\n     * `cn()`, not a template. Appending the caller's `className` to a template\n     * string does nothing when the two conflict: Tailwind resolves\n     * `max-w-3xl` against `max-w-7xl` by CSS source order, not by the order the\n     * classes appear in the attribute. `cn()` merges, so the caller wins.\n     */\n    <section data-slot=\"section-container\" className={cn('mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0', className)}>\n      {children}\n    </section>\n  );\n}\n"],"mappings":";AACA,SAAS,UAAU;AAef;AARG,SAAS,iBAAiB,EAAE,UAAU,YAAY,GAAG,GAA0B;AACpF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOE,oBAAC,aAAQ,aAAU,qBAAoB,WAAW,GAAG,uDAAuD,SAAS,GAClH,UACH;AAAA;AAEJ;","names":[]}

package/dist/components/Select.js

@@ -0,0 +1,199 @@
+"use client";
+
+// src/components/Select.tsx
+import { forwardRef, useId } from "react";
+import { ChevronDown } from "lucide-react";
+import { Field as BaseField } from "@base-ui/react/field";
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { recipe } from "../lib/recipe.js";
+import { FieldFrame, accentStyle } from "./fieldFrame.js";
+import { fieldControl } from "./Input.js";
+import { usePortalThemeAttribute } from "./portalTheme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var list = recipe({
+  slots: {
+    trigger: "flex items-center justify-between gap-3 text-left data-[disabled]:cursor-not-allowed data-[disabled]:border-edge-subtle data-[disabled]:bg-surface-sunken data-[disabled]:text-content-muted",
+    value: "truncate data-[placeholder]:text-content-muted",
+    icon: "flex shrink-0 text-content-secondary",
+    // No compositor layer at high pixel density — `floatingSurface.ts` has why.
+    positioner: "z-top will-change-auto!",
+    popup: "min-w-[var(--anchor-width)] border-2 border-edge-strong bg-surface-raised font-mono text-sm text-content-primary shadow-hard-md",
+    list: "max-h-[min(var(--available-height),20rem)] overflow-y-auto py-1",
+    item: "group flex cursor-pointer items-center gap-2 px-3 py-2 select-none data-[highlighted]:bg-[var(--field-accent)] data-[highlighted]:text-content-inverse data-[selected]:font-bold data-[disabled]:cursor-not-allowed data-[disabled]:text-content-muted",
+    mark: "w-3 shrink-0 text-[var(--field-accent)] group-data-[highlighted]:text-content-inverse",
+    empty: "px-3 py-2 text-content-muted"
+  }
+});
+function skipDisabledRows(event) {
+  const { key } = event;
+  if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Home" && key !== "End") return;
+  const rows = Array.from(event.currentTarget.querySelectorAll('[role="option"]'));
+  const enabled = rows.filter((row) => row.getAttribute("aria-disabled") !== "true");
+  if (enabled.length === 0) return;
+  let target;
+  if (key === "Home") target = enabled[0];
+  else if (key === "End") target = enabled[enabled.length - 1];
+  else {
+    const step = key === "ArrowDown" ? 1 : -1;
+    const from = rows.indexOf(event.target);
+    for (let i = from + step; i >= 0 && i < rows.length; i += step) {
+      if (enabled.includes(rows[i])) {
+        target = rows[i];
+        break;
+      }
+    }
+    if (!target) target = enabled.includes(rows[from]) ? rows[from] : enabled[0];
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  target?.focus();
+}
+var Select = forwardRef(function Select2({
+  label,
+  error,
+  helperText,
+  options,
+  /** Semantic accent for the focus border, the highlighted row and the chosen mark. */
+  accent = "primary",
+  /** Merged onto the control itself, not the label-and-error group. */
+  className = "",
+  style,
+  id,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  name,
+  form,
+  autoComplete,
+  disabled,
+  required,
+  native = false,
+  ...props
+}, ref) {
+  const labelId = useId();
+  const portalTheme = usePortalThemeAttribute();
+  const control = fieldControl({ invalid: Boolean(error), interactive: !disabled });
+  const initial = defaultValue ?? (placeholder === void 0 ? options.find((o) => !o.disabled)?.value : void 0);
+  if (native) {
+    return /* @__PURE__ */ jsx(FieldFrame, { label, error, helperText, disabled, children: /* @__PURE__ */ jsx(
+      BaseField.Control,
+      {
+        ref,
+        id,
+        name,
+        disabled,
+        value,
+        defaultValue: value === void 0 ? initial ?? "" : void 0,
+        onValueChange: (next) => onValueChange?.(next),
+        render: (controlProps) => /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ...controlProps,
+            ...props,
+            form,
+            autoComplete,
+            required,
+            "data-slot": "field-control",
+            style: accentStyle(accent, style),
+            className: control.control({ class: className }),
+            children: [
+              placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+              options.map((opt) => (
+                // The platform paints this list. `color-scheme`, which each
+                // Level declares, is as far as the palette reaches into it.
+                /* @__PURE__ */ jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)
+              ))
+            ]
+          }
+        )
+      }
+    ) });
+  }
+  const styles = list();
+  const listName = label ? { "aria-labelledby": labelId } : { "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"] };
+  return /* @__PURE__ */ jsx(
+    FieldFrame,
+    {
+      label,
+      error,
+      helperText,
+      disabled,
+      nativeLabel: false,
+      labelId,
+      children: /* @__PURE__ */ jsxs(
+        BaseSelect.Root,
+        {
+          items: options,
+          name,
+          form,
+          autoComplete,
+          disabled,
+          required,
+          value: value === void 0 ? void 0 : value === "" ? null : value,
+          defaultValue: value === void 0 ? initial ?? null : void 0,
+          onValueChange: (next) => {
+            if (next !== null) onValueChange?.(next);
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              BaseSelect.Trigger,
+              {
+                ref,
+                id,
+                "data-slot": "select-trigger",
+                style: accentStyle(accent, style),
+                className: control.control({ class: [styles.trigger(), className] }),
+                ...props,
+                children: [
+                  /* @__PURE__ */ jsx(BaseSelect.Value, { "data-slot": "select-value", placeholder, className: styles.value() }),
+                  /* @__PURE__ */ jsx(BaseSelect.Icon, { "data-slot": "select-icon", className: styles.icon(), children: /* @__PURE__ */ jsx(ChevronDown, { size: 16, strokeWidth: 2.5 }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(BaseSelect.Portal, { children: /* @__PURE__ */ jsx(
+              BaseSelect.Positioner,
+              {
+                ...portalTheme,
+                alignItemWithTrigger: false,
+                sideOffset: 4,
+                className: styles.positioner(),
+                children: /* @__PURE__ */ jsxs(
+                  BaseSelect.Popup,
+                  {
+                    "data-slot": "select-popup",
+                    style: accentStyle(accent),
+                    className: styles.popup(),
+                    onKeyDownCapture: skipDisabledRows,
+                    children: [
+                      /* @__PURE__ */ jsx(BaseSelect.List, { "data-slot": "select-list", className: styles.list(), ...listName, children: options.map((opt) => /* @__PURE__ */ jsxs(
+                        BaseSelect.Item,
+                        {
+                          value: opt.value,
+                          label: opt.label,
+                          disabled: opt.disabled,
+                          "data-slot": "select-item",
+                          className: styles.item(),
+                          children: [
+                            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.mark(), children: /* @__PURE__ */ jsx(BaseSelect.ItemIndicator, { children: ">" }) }),
+                            /* @__PURE__ */ jsx(BaseSelect.ItemText, { "data-slot": "select-item-text", children: opt.label })
+                          ]
+                        },
+                        opt.value
+                      )) }),
+                      options.length === 0 && /* @__PURE__ */ jsx("div", { "data-slot": "select-empty", className: styles.empty(), children: "> No options" })
+                    ]
+                  }
+                )
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+});
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Select.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId } from 'react';\nimport type { HTMLAttributes, KeyboardEvent, Ref } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { Field as BaseField } from '@base-ui/react/field';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport { recipe } from '../lib/recipe';\nimport { FieldFrame, accentStyle } from './fieldFrame';\nimport { fieldControl } from './Input';\nimport { usePortalThemeAttribute } from './portalTheme';\nimport type { FieldProps } from './fieldFrame';\n\nexport interface SelectOption {\n  /** What the option says, in the list and in the closed control once chosen. */\n  label: string;\n  /** What `value` becomes, and what a form submits, when this option is chosen. */\n  value: string;\n  /**\n   * Shown but not choosable. The keyboard skips it, as the pointer cannot\n   * select it, so a list with a disabled row still has somewhere to land.\n   */\n  disabled?: boolean;\n}\n\nexport interface SelectProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'className' | 'defaultValue' | 'onChange' | 'children'>,\n    FieldProps {\n  /** The choices, in the order the list shows them and the arrow keys visit them. */\n  options: SelectOption[];\n  /** The chosen option's `value`. Supplying it makes the field controlled; pair it with `onValueChange`. */\n  value?: string;\n  /**\n   * The option chosen at first, for an uncontrolled field. Omitted, the first\n   * enabled option is chosen — what a native `<select>` does — unless a\n   * `placeholder` is set, in which case nothing is.\n   */\n  defaultValue?: string;\n  /** Called with the newly chosen option's `value`, on either presentation. */\n  onValueChange?: (value: string) => void;\n  /**\n   * Shown in the closed control while nothing is chosen. Its presence is also\n   * what makes \"nothing chosen\" the starting state, so a required field can\n   * refuse to submit until someone picks.\n   */\n  placeholder?: string;\n  /** The name the chosen value is submitted under in a native form. */\n  name?: string;\n  /** The `id` of a `<form>` elsewhere in the page that the value belongs to. */\n  form?: string;\n  /** An autofill hint, as on a native `<select>`. */\n  autoComplete?: string;\n  /** Ignores user interaction, and greys the label and control with it. */\n  disabled?: boolean;\n  /** Requires a choice before the form submits; announced as `aria-required`. */\n  required?: boolean;\n  /** Placed on the control — the trigger, or the native `<select>` — never on the wrapper. */\n  id?: string;\n  /**\n   * Render the platform's own `<select>` instead of this system's list.\n   *\n   * A deliberate choice rather than a fallback (#164): on a phone, a long list\n   * is genuinely better as the native picker, which scrolls with momentum and\n   * sits where the thumb is. The cost is the one the listbox exists to remove —\n   * the open list is painted by the operating system, which `color-scheme`\n   * reaches as a light/dark hint and not as a palette.\n   */\n  native?: boolean;\n}\n\n// The open list. The closed trigger is `fieldControl`, so it matches the text\n// controls; everything that only exists once the list is open is here. The\n// highlighted row is an accent fill with inverse text and the chosen row\n// carries an accent mark: selection devices in the sense\n// `auditSelectionDevices` means, never a surface swap, and pairs\n// `check:contrast` measures under `select.*`. (Comments inside the object\n// literal would ship: esbuild keeps them there.)\nconst list = recipe({\n  slots: {\n    trigger:\n      'flex items-center justify-between gap-3 text-left data-[disabled]:cursor-not-allowed '\n      + 'data-[disabled]:border-edge-subtle data-[disabled]:bg-surface-sunken data-[disabled]:text-content-muted',\n    value: 'truncate data-[placeholder]:text-content-muted',\n    icon: 'flex shrink-0 text-content-secondary',\n    // No compositor layer at high pixel density — `floatingSurface.ts` has why.\n    positioner: 'z-top will-change-auto!',\n    popup:\n      'min-w-[var(--anchor-width)] border-2 border-edge-strong bg-surface-raised font-mono text-sm '\n      + 'text-content-primary shadow-hard-md',\n    list: 'max-h-[min(var(--available-height),20rem)] overflow-y-auto py-1',\n    item:\n      'group flex cursor-pointer items-center gap-2 px-3 py-2 select-none '\n      + 'data-[highlighted]:bg-[var(--field-accent)] data-[highlighted]:text-content-inverse '\n      + 'data-[selected]:font-bold '\n      + 'data-[disabled]:cursor-not-allowed data-[disabled]:text-content-muted',\n    mark: 'w-3 shrink-0 text-[var(--field-accent)] group-data-[highlighted]:text-content-inverse',\n    empty: 'px-3 py-2 text-content-muted',\n  },\n});\n\n// Base UI's listbox lets the arrows, Home and End land on a disabled row (it\n// passes `disabledIndices: []` on purpose, after the APG), and a row that can\n// be focused but not chosen is a dead end under Enter. Native `<select>` skips\n// them, and so does this: the keys are taken in the capture phase, before Base\n// UI sees them, and focus moves to the next enabled row — which Base UI's own\n// item `onFocus` then adopts as the highlight. With no enabled row at all the\n// keys are left to Base UI, so the list is never left with nowhere to be.\nfunction skipDisabledRows(event: KeyboardEvent<HTMLElement>) {\n  const { key } = event;\n  if (key !== 'ArrowDown' && key !== 'ArrowUp' && key !== 'Home' && key !== 'End') return;\n  const rows = Array.from(event.currentTarget.querySelectorAll<HTMLElement>('[role=\"option\"]'));\n  const enabled = rows.filter((row) => row.getAttribute('aria-disabled') !== 'true');\n  if (enabled.length === 0) return;\n\n  let target: HTMLElement | undefined;\n  if (key === 'Home') target = enabled[0];\n  else if (key === 'End') target = enabled[enabled.length - 1];\n  else {\n    const step = key === 'ArrowDown' ? 1 : -1;\n    const from = rows.indexOf(event.target as HTMLElement);\n    for (let i = from + step; i >= 0 && i < rows.length; i += step) {\n      if (enabled.includes(rows[i]!)) {\n        target = rows[i];\n        break;\n      }\n    }\n    // Past the last enabled row: stay put, as a native `<select>` does,\n    // rather than wrapping or stepping onto a disabled one.\n    if (!target) target = enabled.includes(rows[from]!) ? rows[from] : enabled[0];\n  }\n\n  event.preventDefault();\n  event.stopPropagation();\n  target?.focus();\n}\n\n/**\n * One of a fixed set, chosen from a list this system paints.\n *\n * The closed control is the same field as `Input` — label, helper text, error,\n * accent, drawn by the same recipe. The open list is a Base UI listbox rather\n * than the platform's, so it is drawn from the Level's roles like every other\n * surface: `surface.raised` behind the rows, an accent fill on the highlighted\n * one, an accent mark beside the chosen one. On a native `<select>` that list\n * belonged to the operating system, and `midnight` and `sketch` reached it only\n * as far as `color-scheme` allowed.\n *\n * The keyboard is a listbox's: Enter, Space or the arrows open it; the arrows,\n * Home and End move through it, skipping disabled rows; typing jumps to the\n * option that starts with what was typed; Enter commits the highlighted row\n * and Escape closes without changing anything.\n *\n * The value still reaches a native form: Base UI keeps a hidden input under\n * `name`, so `FormData` carries the chosen `value` as it did from the\n * `<select>`.\n *\n * Set `native` for the platform picker instead — see the prop.\n *\n * ```tsx\n * <Select\n *   label=\"Deployment region\"\n *   name=\"region\"\n *   options={[\n *     { label: 'US East (N. Virginia)', value: 'us-east-1' },\n *     { label: 'EU West (Frankfurt)', value: 'eu-west-1' },\n *   ]}\n * />\n * ```\n */\nexport const Select = forwardRef<HTMLElement, SelectProps>(function Select(\n  {\n    label,\n    error,\n    helperText,\n    options,\n    /** Semantic accent for the focus border, the highlighted row and the chosen mark. */\n    accent = 'primary',\n    /** Merged onto the control itself, not the label-and-error group. */\n    className = '',\n    style,\n    id,\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder,\n    name,\n    form,\n    autoComplete,\n    disabled,\n    required,\n    native = false,\n    ...props\n  },\n  ref,\n) {\n  const labelId = useId();\n  const portalTheme = usePortalThemeAttribute();\n  const control = fieldControl({ invalid: Boolean(error), interactive: !disabled });\n  // What a native `<select>` shows with no value: its first enabled option. A\n  // placeholder is the explicit way to start from nothing instead.\n  const initial = defaultValue ?? (placeholder === undefined ? options.find((o) => !o.disabled)?.value : undefined);\n\n  if (native) {\n    return (\n      <FieldFrame label={label} error={error} helperText={helperText} disabled={disabled}>\n        <BaseField.Control\n          ref={ref as Ref<HTMLInputElement>}\n          id={id}\n          name={name}\n          disabled={disabled}\n          value={value}\n          defaultValue={value === undefined ? (initial ?? '') : undefined}\n          onValueChange={(next) => onValueChange?.(next)}\n          render={(controlProps) => (\n            <select\n              {...controlProps}\n              {...props}\n              form={form}\n              autoComplete={autoComplete}\n              required={required}\n              data-slot=\"field-control\"\n              style={accentStyle(accent, style)}\n              className={control.control({ class: className })}\n            >\n              {placeholder !== undefined && (\n                <option value=\"\" disabled>\n                  {placeholder}\n                </option>\n              )}\n              {options.map((opt) => (\n                // The platform paints this list. `color-scheme`, which each\n                // Level declares, is as far as the palette reaches into it.\n                <option key={opt.value} value={opt.value} disabled={opt.disabled}>\n                  {opt.label}\n                </option>\n              ))}\n            </select>\n          )}\n        />\n      </FieldFrame>\n    );\n  }\n\n  const styles = list();\n  // The listbox is named by the same label as the trigger, or by the trigger's\n  // own `aria-label` when there is no visible one — a list that opens with no\n  // name is announced as \"listbox\" and nothing else.\n  const listName = label\n    ? { 'aria-labelledby': labelId }\n    : { 'aria-label': props['aria-label'], 'aria-labelledby': props['aria-labelledby'] };\n\n  return (\n    <FieldFrame\n      label={label}\n      error={error}\n      helperText={helperText}\n      disabled={disabled}\n      nativeLabel={false}\n      labelId={labelId}\n    >\n      <BaseSelect.Root<string>\n        items={options}\n        name={name}\n        form={form}\n        autoComplete={autoComplete}\n        disabled={disabled}\n        required={required}\n        // `''` is \"nothing chosen\" on the native element, so it is here too.\n        value={value === undefined ? undefined : value === '' ? null : value}\n        defaultValue={value === undefined ? (initial ?? null) : undefined}\n        // The new value only. Base UI's second argument is its own event\n        // details type, and forwarding it would publish that type.\n        onValueChange={(next) => {\n          if (next !== null) onValueChange?.(next);\n        }}\n      >\n        <BaseSelect.Trigger\n          ref={ref as Ref<HTMLButtonElement>}\n          id={id}\n          data-slot=\"select-trigger\"\n          style={accentStyle(accent, style)}\n          className={control.control({ class: [styles.trigger(), className] })}\n          {...props}\n        >\n          <BaseSelect.Value data-slot=\"select-value\" placeholder={placeholder} className={styles.value()} />\n          <BaseSelect.Icon data-slot=\"select-icon\" className={styles.icon()}>\n            <ChevronDown size={16} strokeWidth={2.5} />\n          </BaseSelect.Icon>\n        </BaseSelect.Trigger>\n        <BaseSelect.Portal>\n          {/* Below the trigger, never over it: Base UI's default slides the\n              list up so the chosen row sits on the trigger, which moves with\n              the value and hides the field it belongs to. */}\n          <BaseSelect.Positioner\n            {...portalTheme}\n            alignItemWithTrigger={false}\n            sideOffset={4}\n            className={styles.positioner()}\n          >\n            {/* The accent again, because the list is portalled out of the\n                trigger's subtree and would not inherit it. */}\n            <BaseSelect.Popup\n              data-slot=\"select-popup\"\n              style={accentStyle(accent)}\n              className={styles.popup()}\n              onKeyDownCapture={skipDisabledRows}\n            >\n              <BaseSelect.List data-slot=\"select-list\" className={styles.list()} {...listName}>\n                {options.map((opt) => (\n                  <BaseSelect.Item\n                    key={opt.value}\n                    value={opt.value}\n                    label={opt.label}\n                    disabled={opt.disabled}\n                    data-slot=\"select-item\"\n                    className={styles.item()}\n                  >\n                    <span aria-hidden=\"true\" className={styles.mark()}>\n                      <BaseSelect.ItemIndicator>&gt;</BaseSelect.ItemIndicator>\n                    </span>\n                    <BaseSelect.ItemText data-slot=\"select-item-text\">{opt.label}</BaseSelect.ItemText>\n                  </BaseSelect.Item>\n                ))}\n              </BaseSelect.List>\n              {options.length === 0 && (\n                <div data-slot=\"select-empty\" className={styles.empty()}>\n                  &gt; No options\n                </div>\n              )}\n            </BaseSelect.Popup>\n          </BaseSelect.Positioner>\n        </BaseSelect.Portal>\n      </BaseSelect.Root>\n    </FieldFrame>\n  );\n});\n"],"mappings":";;;AAEA,SAAS,YAAY,aAAa;AAElC,SAAS,mBAAmB;AAC5B,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU,kBAAkB;AACrC,SAAS,cAAc;AACvB,SAAS,YAAY,mBAAmB;AACxC,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AA4M5B,SAWI,KAXJ;AAzIZ,IAAM,OAAO,OAAO;AAAA,EAClB,OAAO;AAAA,IACL,SACE;AAAA,IAEF,OAAO;AAAA,IACP,MAAM;AAAA;AAAA,IAEN,YAAY;AAAA,IACZ,OACE;AAAA,IAEF,MAAM;AAAA,IACN,MACE;AAAA,IAIF,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AACF,CAAC;AASD,SAAS,iBAAiB,OAAmC;AAC3D,QAAM,EAAE,IAAI,IAAI;AAChB,MAAI,QAAQ,eAAe,QAAQ,aAAa,QAAQ,UAAU,QAAQ,MAAO;AACjF,QAAM,OAAO,MAAM,KAAK,MAAM,cAAc,iBAA8B,iBAAiB,CAAC;AAC5F,QAAM,UAAU,KAAK,OAAO,CAAC,QAAQ,IAAI,aAAa,eAAe,MAAM,MAAM;AACjF,MAAI,QAAQ,WAAW,EAAG;AAE1B,MAAI;AACJ,MAAI,QAAQ,OAAQ,UAAS,QAAQ,CAAC;AAAA,WAC7B,QAAQ,MAAO,UAAS,QAAQ,QAAQ,SAAS,CAAC;AAAA,OACtD;AACH,UAAM,OAAO,QAAQ,cAAc,IAAI;AACvC,UAAM,OAAO,KAAK,QAAQ,MAAM,MAAqB;AACrD,aAAS,IAAI,OAAO,MAAM,KAAK,KAAK,IAAI,KAAK,QAAQ,KAAK,MAAM;AAC9D,UAAI,QAAQ,SAAS,KAAK,CAAC,CAAE,GAAG;AAC9B,iBAAS,KAAK,CAAC;AACf;AAAA,MACF;AAAA,IACF;AAGA,QAAI,CAAC,OAAQ,UAAS,QAAQ,SAAS,KAAK,IAAI,CAAE,IAAI,KAAK,IAAI,IAAI,QAAQ,CAAC;AAAA,EAC9E;AAEA,QAAM,eAAe;AACrB,QAAM,gBAAgB;AACtB,UAAQ,MAAM;AAChB;AAmCO,IAAM,SAAS,WAAqC,SAASA,QAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA,SAAS;AAAA;AAAA,EAET,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,cAAc,wBAAwB;AAC5C,QAAM,UAAU,aAAa,EAAE,SAAS,QAAQ,KAAK,GAAG,aAAa,CAAC,SAAS,CAAC;AAGhF,QAAM,UAAU,iBAAiB,gBAAgB,SAAY,QAAQ,KAAK,CAAC,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ;AAEvG,MAAI,QAAQ;AACV,WACE,oBAAC,cAAW,OAAc,OAAc,YAAwB,UAC9D;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,UAAU,SAAa,WAAW,KAAM;AAAA,QACtD,eAAe,CAAC,SAAS,gBAAgB,IAAI;AAAA,QAC7C,QAAQ,CAAC,iBACP;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA,aAAU;AAAA,YACV,OAAO,YAAY,QAAQ,KAAK;AAAA,YAChC,WAAW,QAAQ,QAAQ,EAAE,OAAO,UAAU,CAAC;AAAA,YAE9C;AAAA,8BAAgB,UACf,oBAAC,YAAO,OAAM,IAAG,UAAQ,MACtB,uBACH;AAAA,cAED,QAAQ,IAAI,CAAC;AAAA;AAAA;AAAA,gBAGZ,oBAAC,YAAuB,OAAO,IAAI,OAAO,UAAU,IAAI,UACrD,cAAI,SADM,IAAI,KAEjB;AAAA,eACD;AAAA;AAAA;AAAA,QACH;AAAA;AAAA,IAEJ,GACF;AAAA,EAEJ;AAEA,QAAM,SAAS,KAAK;AAIpB,QAAM,WAAW,QACb,EAAE,mBAAmB,QAAQ,IAC7B,EAAE,cAAc,MAAM,YAAY,GAAG,mBAAmB,MAAM,iBAAiB,EAAE;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEA;AAAA,QAAC,WAAW;AAAA,QAAX;AAAA,UACC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEA,OAAO,UAAU,SAAY,SAAY,UAAU,KAAK,OAAO;AAAA,UAC/D,cAAc,UAAU,SAAa,WAAW,OAAQ;AAAA,UAGxD,eAAe,CAAC,SAAS;AACvB,gBAAI,SAAS,KAAM,iBAAgB,IAAI;AAAA,UACzC;AAAA,UAEA;AAAA;AAAA,cAAC,WAAW;AAAA,cAAX;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,aAAU;AAAA,gBACV,OAAO,YAAY,QAAQ,KAAK;AAAA,gBAChC,WAAW,QAAQ,QAAQ,EAAE,OAAO,CAAC,OAAO,QAAQ,GAAG,SAAS,EAAE,CAAC;AAAA,gBAClE,GAAG;AAAA,gBAEJ;AAAA,sCAAC,WAAW,OAAX,EAAiB,aAAU,gBAAe,aAA0B,WAAW,OAAO,MAAM,GAAG;AAAA,kBAChG,oBAAC,WAAW,MAAX,EAAgB,aAAU,eAAc,WAAW,OAAO,KAAK,GAC9D,8BAAC,eAAY,MAAM,IAAI,aAAa,KAAK,GAC3C;AAAA;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,WAAW,QAAX,EAIC;AAAA,cAAC,WAAW;AAAA,cAAX;AAAA,gBACE,GAAG;AAAA,gBACJ,sBAAsB;AAAA,gBACtB,YAAY;AAAA,gBACZ,WAAW,OAAO,WAAW;AAAA,gBAI7B;AAAA,kBAAC,WAAW;AAAA,kBAAX;AAAA,oBACC,aAAU;AAAA,oBACV,OAAO,YAAY,MAAM;AAAA,oBACzB,WAAW,OAAO,MAAM;AAAA,oBACxB,kBAAkB;AAAA,oBAElB;AAAA,0CAAC,WAAW,MAAX,EAAgB,aAAU,eAAc,WAAW,OAAO,KAAK,GAAI,GAAG,UACpE,kBAAQ,IAAI,CAAC,QACZ;AAAA,wBAAC,WAAW;AAAA,wBAAX;AAAA,0BAEC,OAAO,IAAI;AAAA,0BACX,OAAO,IAAI;AAAA,0BACX,UAAU,IAAI;AAAA,0BACd,aAAU;AAAA,0BACV,WAAW,OAAO,KAAK;AAAA,0BAEvB;AAAA,gDAAC,UAAK,eAAY,QAAO,WAAW,OAAO,KAAK,GAC9C,8BAAC,WAAW,eAAX,EAAyB,eAAI,GAChC;AAAA,4BACA,oBAAC,WAAW,UAAX,EAAoB,aAAU,oBAAoB,cAAI,OAAM;AAAA;AAAA;AAAA,wBAVxD,IAAI;AAAA,sBAWX,CACD,GACH;AAAA,sBACC,QAAQ,WAAW,KAClB,oBAAC,SAAI,aAAU,gBAAe,WAAW,OAAO,MAAM,GAAG,0BAEzD;AAAA;AAAA;AAAA,gBAEJ;AAAA;AAAA,YACF,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Select"]}

package/dist/components/SiteFooter.js

@@ -0,0 +1,29 @@
+// src/components/SiteFooter.tsx
+import { forwardRef } from "react";
+import { recipe } from "../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var siteFooter = recipe({
+  slots: {
+    root: "border-t-4 border-edge-strong bg-surface-raised font-mono text-content-primary print:hidden",
+    body: "mx-auto flex max-w-6xl flex-col gap-8 px-4 py-8 md:flex-row md:justify-between md:px-6",
+    lead: "max-w-sm text-sm leading-relaxed",
+    nav: "flex flex-wrap gap-x-12 gap-y-6",
+    meta: "border-t-2 border-edge-strong",
+    metaInner: "mx-auto max-w-6xl px-4 py-4 text-xs uppercase tracking-wide text-content-secondary md:px-6"
+  }
+});
+var SiteFooter = forwardRef(function SiteFooter2({ children, nav, meta, className, ...props }, ref) {
+  const styles = siteFooter();
+  const hasBody = Boolean(children) || Boolean(nav);
+  return /* @__PURE__ */ jsxs("footer", { ref, "data-slot": "site-footer", ...props, className: styles.root({ class: className }), children: [
+    hasBody ? /* @__PURE__ */ jsxs("div", { "data-slot": "site-footer-body", className: styles.body(), children: [
+      children ? /* @__PURE__ */ jsx("div", { "data-slot": "site-footer-lead", className: styles.lead(), children }) : null,
+      nav ? /* @__PURE__ */ jsx("div", { "data-slot": "site-footer-nav", className: styles.nav(), children: nav }) : null
+    ] }) : null,
+    meta ? /* @__PURE__ */ jsx("div", { "data-slot": "site-footer-meta", className: hasBody ? styles.meta() : void 0, children: /* @__PURE__ */ jsx("div", { className: styles.metaInner(), children: meta }) }) : null
+  ] });
+});
+export {
+  SiteFooter
+};
+//# sourceMappingURL=SiteFooter.js.map

package/dist/components/SiteFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/SiteFooter.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { recipe } from '../lib/recipe';\n\nexport interface SiteFooterProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className'> {\n  /**\n   * The lead block — the site's name, a line about it, a newsletter prompt.\n   * Takes the first column at desktop widths and the top of the stack below.\n   */\n  children?: ReactNode;\n  /**\n   * Link columns — normally one or more vertical `SiteNav`s, each with its own\n   * `label`. A footer nav is a second navigation landmark on the page, so it\n   * must be named apart from the header's: `Footer`, `Product`, `Company`.\n   */\n  nav?: ReactNode;\n  /**\n   * The bottom strip — copyright, licence, colophon, a build stamp. Set in the\n   * secondary ink, below a rule.\n   */\n  meta?: ReactNode;\n  /** Merged into the `<footer>`'s classes. */\n  className?: string;\n}\n\nconst siteFooter = recipe({\n  slots: {\n    root: 'border-t-4 border-edge-strong bg-surface-raised font-mono text-content-primary print:hidden',\n    body: 'mx-auto flex max-w-6xl flex-col gap-8 px-4 py-8 md:flex-row md:justify-between md:px-6',\n    lead: 'max-w-sm text-sm leading-relaxed',\n    nav: 'flex flex-wrap gap-x-12 gap-y-6',\n    meta: 'border-t-2 border-edge-strong',\n    metaInner: 'mx-auto max-w-6xl px-4 py-4 text-xs uppercase tracking-wide text-content-secondary md:px-6',\n  },\n});\n\n/**\n * The site's content-info landmark: a lead block, link columns and a bottom\n * strip.\n *\n * Like {@link SiteHeader} it is a layout and holds no content of its own —\n * no copyright line, no links, no name. Every slot is optional, so a\n * portfolio's one-line footer and a marketing site's four columns are the same\n * component with more or fewer slots filled.\n *\n * Rendered as `<footer>`, which is the `contentinfo` landmark when it is not\n * inside an `<article>`, `<aside>`, `<main>`, `<nav>` or `<section>` — so put\n * it beside `<main>`, not in it.\n *\n * @example\n * ```tsx\n * <SiteFooter\n *   nav={\n *     <SiteNav label=\"Footer\" orientation=\"vertical\">\n *       <SiteNavItem href=\"/colophon\">Colophon</SiteNavItem>\n *     </SiteNav>\n *   }\n *   meta=\"© 2026 Site name\"\n * >\n *   A line about the site.\n * </SiteFooter>\n * ```\n */\nexport const SiteFooter = forwardRef<HTMLElement, SiteFooterProps>(function SiteFooter(\n  { children, nav, meta, className, ...props },\n  ref,\n) {\n  const styles = siteFooter();\n  const hasBody = Boolean(children) || Boolean(nav);\n\n  return (\n    <footer ref={ref} data-slot=\"site-footer\" {...props} className={styles.root({ class: className })}>\n      {hasBody ? (\n        <div data-slot=\"site-footer-body\" className={styles.body()}>\n          {children ? (\n            <div data-slot=\"site-footer-lead\" className={styles.lead()}>\n              {children}\n            </div>\n          ) : null}\n          {nav ? (\n            <div data-slot=\"site-footer-nav\" className={styles.nav()}>\n              {nav}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      {meta ? (\n        <div data-slot=\"site-footer-meta\" className={hasBody ? styles.meta() : undefined}>\n          <div className={styles.metaInner()}>{meta}</div>\n        </div>\n      ) : null}\n    </footer>\n  );\n});\n"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,SAAS,cAAc;AAwEf,SAEI,KAFJ;AAhDR,IAAM,aAAa,OAAO;AAAA,EACxB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF,CAAC;AA6BM,IAAM,aAAa,WAAyC,SAASA,YAC1E,EAAE,UAAU,KAAK,MAAM,WAAW,GAAG,MAAM,GAC3C,KACA;AACA,QAAM,SAAS,WAAW;AAC1B,QAAM,UAAU,QAAQ,QAAQ,KAAK,QAAQ,GAAG;AAEhD,SACE,qBAAC,YAAO,KAAU,aAAU,eAAe,GAAG,OAAO,WAAW,OAAO,KAAK,EAAE,OAAO,UAAU,CAAC,GAC7F;AAAA,cACC,qBAAC,SAAI,aAAU,oBAAmB,WAAW,OAAO,KAAK,GACtD;AAAA,iBACC,oBAAC,SAAI,aAAU,oBAAmB,WAAW,OAAO,KAAK,GACtD,UACH,IACE;AAAA,MACH,MACC,oBAAC,SAAI,aAAU,mBAAkB,WAAW,OAAO,IAAI,GACpD,eACH,IACE;AAAA,OACN,IACE;AAAA,IACH,OACC,oBAAC,SAAI,aAAU,oBAAmB,WAAW,UAAU,OAAO,KAAK,IAAI,QACrE,8BAAC,SAAI,WAAW,OAAO,UAAU,GAAI,gBAAK,GAC5C,IACE;AAAA,KACN;AAEJ,CAAC;","names":["SiteFooter"]}

package/dist/components/SiteHeader.js

@@ -0,0 +1,59 @@
+"use client";
+
+// src/components/SiteHeader.tsx
+import { forwardRef } from "react";
+import { recipe } from "../lib/recipe.js";
+import { SiteLink } from "./LinkProvider.js";
+import { SiteHeaderCollapseContext } from "./siteNavContext.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var siteHeader = recipe({
+  slots: {
+    root: "relative border-b-4 border-edge-strong bg-surface-raised font-mono text-content-primary print:hidden",
+    skip: "sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-top focus:border-2 focus:border-edge-strong focus:bg-surface-base focus:px-4 focus:py-2 focus:font-bold focus:uppercase focus:text-content-primary",
+    bar: "mx-auto flex max-w-6xl items-center gap-4 px-4 py-3 md:px-6",
+    brand: "mr-auto inline-flex items-center gap-2 font-display text-lg font-bold uppercase tracking-wider text-content-primary no-underline hover:text-accent-primary",
+    nav: "hidden",
+    mobile: "",
+    actions: "flex items-center gap-2"
+  },
+  variants: {
+    collapseAt: {
+      sm: { nav: "sm:block", mobile: "sm:hidden" },
+      md: { nav: "md:block", mobile: "md:hidden" },
+      lg: { nav: "lg:block", mobile: "lg:hidden" }
+    },
+    sticky: {
+      true: { root: "sticky top-0 z-top" }
+    }
+  },
+  defaultVariants: { collapseAt: "md" }
+});
+var SiteHeader = forwardRef(function SiteHeader2({
+  brand,
+  brandHref = "/",
+  nav,
+  mobileNav,
+  actions,
+  collapseAt = "md",
+  skipTo = "main-content",
+  skipLabel = "Skip to content",
+  sticky = false,
+  className,
+  ...props
+}, ref) {
+  const styles = siteHeader({ collapseAt, sticky });
+  const skipId = skipTo === false ? null : skipTo.replace(/^#/, "");
+  return /* @__PURE__ */ jsxs("header", { ref, "data-slot": "site-header", ...props, className: styles.root({ class: className }), children: [
+    skipId ? /* @__PURE__ */ jsx("a", { href: `#${skipId}`, "data-slot": "site-header-skip", className: styles.skip(), children: skipLabel }) : null,
+    /* @__PURE__ */ jsxs("div", { "data-slot": "site-header-bar", className: styles.bar(), children: [
+      /* @__PURE__ */ jsx(SiteLink, { href: brandHref, current: false, "data-slot": "site-header-brand", className: styles.brand(), children: brand }),
+      nav ? /* @__PURE__ */ jsx("div", { "data-slot": "site-header-nav", className: styles.nav(), children: nav }) : null,
+      actions ? /* @__PURE__ */ jsx("div", { "data-slot": "site-header-actions", className: styles.actions(), children: actions }) : null,
+      mobileNav ? /* @__PURE__ */ jsx("div", { "data-slot": "site-header-mobile-nav", className: styles.mobile(), children: /* @__PURE__ */ jsx(SiteHeaderCollapseContext.Provider, { value: collapseAt, children: mobileNav }) }) : null
+    ] })
+  ] });
+});
+export {
+  SiteHeader
+};
+//# sourceMappingURL=SiteHeader.js.map

package/dist/components/SiteHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/SiteHeader.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { recipe } from '../lib/recipe';\nimport { SiteLink } from './LinkProvider';\nimport { SiteHeaderCollapseContext } from './siteNavContext';\n\n/**\n * The breakpoint at which a `SiteHeader` swaps its `mobileNav` for its `nav`.\n * Tailwind's own names, and only the three a header plausibly collapses at.\n */\nexport type SiteHeaderCollapse = 'sm' | 'md' | 'lg';\n\nexport interface SiteHeaderProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className'> {\n  /**\n   * The site's name or mark, rendered as the link home. Text, a logo, or both —\n   * a logo image needs its own `alt`, since it becomes the link's name.\n   */\n  brand: ReactNode;\n  /** Where the brand links to. The site root by default. */\n  brandHref?: string;\n  /**\n   * The desktop navigation — normally a `SiteNav`. Shown at `collapseAt` and\n   * wider; not rendered into the accessibility tree below it.\n   */\n  nav?: ReactNode;\n  /**\n   * The narrow-viewport navigation — normally a `MobileNav` with the same items\n   * as `nav`. Shown below `collapseAt` only.\n   */\n  mobileNav?: ReactNode;\n  /**\n   * Trailing controls shown at every width — a CTA `Button`, a theme control, a\n   * repository link. Keep it short: on a phone it shares the bar with the brand\n   * and the menu trigger.\n   */\n  actions?: ReactNode;\n  /**\n   * Where `nav` gives way to `mobileNav`. `md` (768px) by default; a site with\n   * many top-level items wants `lg`, one with three short ones may keep its row\n   * down to `sm`.\n   */\n  collapseAt?: SiteHeaderCollapse;\n  /**\n   * The `id` of the page's main content, which the skip link jumps to. A\n   * leading `#` is accepted and ignored. Pass `false` to omit the skip link —\n   * only when the page already renders one of its own.\n   */\n  skipTo?: string | false;\n  /** The skip link's text. `Skip to content` by default. */\n  skipLabel?: string;\n  /** Stick the bar to the top of the viewport as the page scrolls. Off by default. */\n  sticky?: boolean;\n  /** Merged into the `<header>`'s classes. */\n  className?: string;\n}\n\n// The class strings are written out in full, per breakpoint, because\n// Tailwind's scanner reads source text: a template literal such as\n// `${at}:flex` would generate no CSS at all.\nconst siteHeader = recipe({\n  slots: {\n    root: 'relative border-b-4 border-edge-strong bg-surface-raised font-mono text-content-primary print:hidden',\n    skip: 'sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-top '\n      + 'focus:border-2 focus:border-edge-strong focus:bg-surface-base focus:px-4 focus:py-2 '\n      + 'focus:font-bold focus:uppercase focus:text-content-primary',\n    bar: 'mx-auto flex max-w-6xl items-center gap-4 px-4 py-3 md:px-6',\n    brand: 'mr-auto inline-flex items-center gap-2 font-display text-lg font-bold uppercase '\n      + 'tracking-wider text-content-primary no-underline hover:text-accent-primary',\n    nav: 'hidden',\n    mobile: '',\n    actions: 'flex items-center gap-2',\n  },\n  variants: {\n    collapseAt: {\n      sm: { nav: 'sm:block', mobile: 'sm:hidden' },\n      md: { nav: 'md:block', mobile: 'md:hidden' },\n      lg: { nav: 'lg:block', mobile: 'lg:hidden' },\n    },\n    sticky: {\n      true: { root: 'sticky top-0 z-top' },\n    },\n  },\n  defaultVariants: { collapseAt: 'md' },\n});\n\n/**\n * The site's banner: skip link, brand, navigation and trailing actions, with\n * the navigation swapping to a {@link MobileNav} below a breakpoint.\n *\n * It is a layout and a landmark, not a menu. The `<header>` is the banner; the\n * navigation is whatever `SiteNav` and `MobileNav` the caller passes, so the\n * header holds no items, no labels and no current-page logic of its own. The\n * same four parts — this, `SiteNav`, `MobileNav`, `SiteFooter` — build a\n * portfolio, a blog, a marketing site and a project site without a prop\n * between them changing; the stories are those four.\n *\n * ## The breakpoint is the point\n *\n * Below `collapseAt` the `nav` slot is `display: none` and the `mobileNav`\n * slot is shown; at `collapseAt` and wider, the reverse. `display: none` rather\n * than `aria-hidden`, so the hidden one leaves the accessibility tree and the\n * tab order together — a screen reader never meets two copies of one nav.\n *\n * ## The skip link\n *\n * The first focusable element on the page, visually hidden until it takes\n * focus. It jumps to `#main-content` unless `skipTo` names another `id`; the\n * page's `<main>` must carry that `id`, which is the one thing this component\n * asks of the page around it.\n *\n * @example\n * ```tsx\n * const items = (\n *   <>\n *     <SiteNavItem href=\"/writing\">Writing</SiteNavItem>\n *     <SiteNavItem href=\"/projects\">Projects</SiteNavItem>\n *   </>\n * );\n *\n * <SiteHeader\n *   brand=\"Site name\"\n *   nav={<SiteNav label=\"Primary\">{items}</SiteNav>}\n *   mobileNav={<MobileNav label=\"Primary\">{items}</MobileNav>}\n * />\n * <main id=\"main-content\">…</main>\n * ```\n */\nexport const SiteHeader = forwardRef<HTMLElement, SiteHeaderProps>(function SiteHeader(\n  {\n    brand,\n    brandHref = '/',\n    nav,\n    mobileNav,\n    actions,\n    collapseAt = 'md',\n    skipTo = 'main-content',\n    skipLabel = 'Skip to content',\n    sticky = false,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const styles = siteHeader({ collapseAt, sticky });\n  const skipId = skipTo === false ? null : skipTo.replace(/^#/, '');\n\n  return (\n    <header ref={ref} data-slot=\"site-header\" {...props} className={styles.root({ class: className })}>\n      {skipId ? (\n        <a href={`#${skipId}`} data-slot=\"site-header-skip\" className={styles.skip()}>\n          {skipLabel}\n        </a>\n      ) : null}\n      <div data-slot=\"site-header-bar\" className={styles.bar()}>\n        <SiteLink href={brandHref} current={false} data-slot=\"site-header-brand\" className={styles.brand()}>\n          {brand}\n        </SiteLink>\n        {nav ? (\n          <div data-slot=\"site-header-nav\" className={styles.nav()}>\n            {nav}\n          </div>\n        ) : null}\n        {actions ? (\n          <div data-slot=\"site-header-actions\" className={styles.actions()}>\n            {actions}\n          </div>\n        ) : null}\n        {mobileNav ? (\n          <div data-slot=\"site-header-mobile-nav\" className={styles.mobile()}>\n            <SiteHeaderCollapseContext.Provider value={collapseAt}>\n              {mobileNav}\n            </SiteHeaderCollapseContext.Provider>\n          </div>\n        ) : null}\n      </div>\n    </header>\n  );\n});\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAE3B,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,iCAAiC;AAkJlC,cAIF,YAJE;AA1FR,IAAM,aAAa,OAAO;AAAA,EACxB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IAGN,KAAK;AAAA,IACL,OAAO;AAAA,IAEP,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,IAAI,EAAE,KAAK,YAAY,QAAQ,YAAY;AAAA,MAC3C,IAAI,EAAE,KAAK,YAAY,QAAQ,YAAY;AAAA,MAC3C,IAAI,EAAE,KAAK,YAAY,QAAQ,YAAY;AAAA,IAC7C;AAAA,IACA,QAAQ;AAAA,MACN,MAAM,EAAE,MAAM,qBAAqB;AAAA,IACrC;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,YAAY,KAAK;AACtC,CAAC;AA4CM,IAAM,aAAa,WAAyC,SAASA,YAC1E;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,WAAW,EAAE,YAAY,OAAO,CAAC;AAChD,QAAM,SAAS,WAAW,QAAQ,OAAO,OAAO,QAAQ,MAAM,EAAE;AAEhE,SACE,qBAAC,YAAO,KAAU,aAAU,eAAe,GAAG,OAAO,WAAW,OAAO,KAAK,EAAE,OAAO,UAAU,CAAC,GAC7F;AAAA,aACC,oBAAC,OAAE,MAAM,IAAI,MAAM,IAAI,aAAU,oBAAmB,WAAW,OAAO,KAAK,GACxE,qBACH,IACE;AAAA,IACJ,qBAAC,SAAI,aAAU,mBAAkB,WAAW,OAAO,IAAI,GACrD;AAAA,0BAAC,YAAS,MAAM,WAAW,SAAS,OAAO,aAAU,qBAAoB,WAAW,OAAO,MAAM,GAC9F,iBACH;AAAA,MACC,MACC,oBAAC,SAAI,aAAU,mBAAkB,WAAW,OAAO,IAAI,GACpD,eACH,IACE;AAAA,MACH,UACC,oBAAC,SAAI,aAAU,uBAAsB,WAAW,OAAO,QAAQ,GAC5D,mBACH,IACE;AAAA,MACH,YACC,oBAAC,SAAI,aAAU,0BAAyB,WAAW,OAAO,OAAO,GAC/D,8BAAC,0BAA0B,UAA1B,EAAmC,OAAO,YACxC,qBACH,GACF,IACE;AAAA,OACN;AAAA,KACF;AAEJ,CAAC;","names":["SiteHeader"]}

package/dist/components/SiteNav.js

@@ -0,0 +1,141 @@
+"use client";
+
+// src/components/SiteNav.tsx
+import { forwardRef, useMemo } from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { ChevronDown } from "lucide-react";
+import { cn, recipe } from "../lib/recipe.js";
+import { SiteLink } from "./LinkProvider.js";
+import { Menu } from "./Menu.js";
+import { floatingParts } from "./floatingSurface.js";
+import { SiteNavContext, useSiteNavContext } from "./siteNavContext.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var siteNav = recipe({
+  slots: {
+    root: "font-mono",
+    list: "m-0 flex list-none p-0",
+    link: "border-transparent font-bold uppercase text-content-secondary no-underline hover:text-accent-primary aria-[current=page]:border-accent-primary aria-[current=page]:text-accent-primary",
+    trigger: "inline-flex cursor-pointer items-center gap-1 border-transparent bg-transparent font-mono font-bold uppercase text-content-secondary hover:text-accent-primary data-[popup-open]:text-accent-primary"
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        list: "flex-wrap items-center gap-x-6 gap-y-2",
+        link: "inline-block border-b-2 py-1 text-sm tracking-wide",
+        trigger: "border-b-2 py-1 text-sm tracking-wide"
+      },
+      vertical: {
+        list: "flex-col gap-1",
+        link: "block min-h-11 border-l-4 px-3 py-3 text-sm aria-[current=page]:bg-surface-base",
+        trigger: "min-h-11 w-full border-l-4 px-3 py-3 text-left text-sm"
+      }
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+var SiteNav = forwardRef(function SiteNav2({ label, children, orientation = "horizontal", className, ...props }, ref) {
+  const parent = useSiteNavContext();
+  const styles = siteNav({ orientation });
+  const onNavigate = parent.onNavigate;
+  const context = useMemo(
+    () => ({ orientation, inMenu: false, onNavigate }),
+    [orientation, onNavigate]
+  );
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref,
+      "data-slot": "site-nav",
+      "data-orientation": orientation,
+      ...props,
+      "aria-label": label,
+      className: styles.root({ class: className }),
+      children: /* @__PURE__ */ jsx("ul", { "data-slot": "site-nav-list", className: styles.list(), children: /* @__PURE__ */ jsx(SiteNavContext.Provider, { value: context, children }) })
+    }
+  );
+});
+var SiteNavItem = forwardRef(
+  function SiteNavItem2(props, ref) {
+    const context = useSiteNavContext();
+    const styles = siteNav({ orientation: context.orientation });
+    if (typeof props.href !== "string") {
+      const { label, children: children2, defaultOpen, className: className2 } = props;
+      return /* @__PURE__ */ jsx("li", { "data-slot": "site-nav-item", children: /* @__PURE__ */ jsx(
+        Menu,
+        {
+          defaultOpen,
+          trigger: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref,
+              type: "button",
+              "data-slot": "site-nav-group",
+              className: styles.trigger({ class: className2 }),
+              children: [
+                label,
+                /* @__PURE__ */ jsx(ChevronDown, { size: 14, strokeWidth: 3, "aria-hidden": "true" })
+              ]
+            }
+          ),
+          children: /* @__PURE__ */ jsx(SiteNavContext.Provider, { value: { ...context, inMenu: true }, children: children2 })
+        }
+      ) });
+    }
+    const { href, children, current, className, onClick, ...rest } = props;
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) context.onNavigate?.();
+    };
+    if (context.inMenu) {
+      return /* @__PURE__ */ jsx(
+        MenuLink,
+        {
+          ref,
+          ...rest,
+          href,
+          current,
+          className,
+          onClick: handleClick,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("li", { "data-slot": "site-nav-item", children: /* @__PURE__ */ jsx(
+      SiteLink,
+      {
+        ref,
+        ...rest,
+        href,
+        current,
+        onClick: handleClick,
+        "data-slot": "site-nav-link",
+        className: styles.link({ class: className }),
+        children
+      }
+    ) });
+  }
+);
+var MenuLink = forwardRef(function MenuLink2({ href, current, className, children, ...rest }, ref) {
+  const parts = floatingParts();
+  return /* @__PURE__ */ jsx(
+    BaseMenu.LinkItem,
+    {
+      ref,
+      closeOnClick: true,
+      "data-slot": "site-nav-menu-link",
+      className: cn(
+        parts.item(),
+        "no-underline aria-[current=page]:font-bold aria-[current=page]:underline",
+        className
+      ),
+      render: (renderProps) => /* @__PURE__ */ jsx(SiteLink, { ...renderProps, href, current }),
+      ...rest,
+      children
+    }
+  );
+});
+export {
+  SiteNav,
+  SiteNavItem
+};
+//# sourceMappingURL=SiteNav.js.map