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

package/dist/components/Swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Swatch.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../lib/recipe';\n\n/**\n * Draws a colour and names it.\n *\n * This existed as a private `Swatch` inside `SemanticTokens.stories.tsx` —\n * declared there, exported nowhere, and therefore unavailable to the two places\n * that most need it: the docs portal, which #74 notes demonstrates chrome and\n * never the package's own integration, and the blog's design sandbox.\n *\n * A design system that cannot draw its own palette outside a story file is\n * asking every consumer to reimplement the one drawing it definitely owns.\n *\n * The story version used two dozen lines of inline `style` objects, which is the\n * third idiom #47 is about and is unreachable by a consumer's `className`. This\n * is utilities throughout.\n */\nexport interface SwatchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /** The colour to draw. Any CSS colour — usually a `var(--ds-*)` read. */\n  value: string;\n  /** What the colour is called. Rendered in mono beside the well. */\n  name: string;\n  /** Optional second line — a contrast ratio, a hex, a note. */\n  detail?: string;\n  /** `md` is the reference grid; `sm` suits a dense inline list. */\n  size?: 'sm' | 'md';\n}\n\nexport const Swatch = forwardRef<HTMLDivElement, SwatchProps>(function Swatch(\n  { value, name, detail, size = 'md', className, ...props },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"swatch\"\n      className={cn('flex items-center gap-3 font-mono', className)}\n      {...props}\n    >\n      <span\n        data-slot=\"swatch-well\"\n        aria-hidden=\"true\"\n        className={cn(\n          'flex-none border-2 border-edge-strong',\n          size === 'sm' ? 'h-6 w-6' : 'h-10 w-10',\n        )}\n        style={{ backgroundColor: value }}\n      />\n      <span data-slot=\"swatch-label\" className=\"flex min-w-0 flex-col\">\n        <span className=\"truncate text-xs text-content-secondary\">{name}</span>\n        {detail && <span className=\"truncate text-xs text-content-muted\">{detail}</span>}\n      </span>\n    </div>\n  );\n});\n\nexport interface SwatchGroupProps extends HTMLAttributes<HTMLElement> {\n  /** Bracketed and uppercased, matching the rest of the system's headings. */\n  title: string;\n  /** Name → colour. Insertion order is preserved, so declare it meaningfully. */\n  entries: Record<string, string>;\n  size?: SwatchProps['size'];\n}\n\n/**\n * A titled block of swatches.\n *\n * `entries` is a record rather than an array because every caller has one to\n * hand — `LEVELS[level].accent`, `semanticTokens.text`, a `palette` — and\n * turning it into an array at each call site is the kind of ceremony that gets\n * copy-pasted wrong.\n */\nexport const SwatchGroup = forwardRef<HTMLElement, SwatchGroupProps>(function SwatchGroup(\n  { title, entries, size, className, ...props },\n  ref,\n) {\n  return (\n    <section ref={ref} data-slot=\"swatch-group\" className={cn('mb-8', className)} {...props}>\n      <h3\n        data-slot=\"swatch-group-title\"\n        className=\"mb-3 font-display text-xs font-extrabold uppercase tracking-widest text-accent-secondary\"\n      >\n        [ {title} ]\n      </h3>\n      <div data-slot=\"swatch-group-items\" className=\"grid gap-3 sm:grid-cols-2 lg:grid-cols-3\">\n        {Object.entries(entries).map(([name, value]) => (\n          <Swatch key={name} name={name} value={value} size={size} />\n        ))}\n      </div>\n    </section>\n  );\n});\n"],"mappings":";AAAA,SAAS,kBAAkB;AAE3B,SAAS,UAAU;AAuCb,cASA,YATA;AAXC,IAAM,SAAS,WAAwC,SAASA,QACrE,EAAE,OAAO,MAAM,QAAQ,OAAO,MAAM,WAAW,GAAG,MAAM,GACxD,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,qCAAqC,SAAS;AAAA,MAC3D,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,aAAU;AAAA,YACV,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,SAAS,OAAO,YAAY;AAAA,YAC9B;AAAA,YACA,OAAO,EAAE,iBAAiB,MAAM;AAAA;AAAA,QAClC;AAAA,QACA,qBAAC,UAAK,aAAU,gBAAe,WAAU,yBACvC;AAAA,8BAAC,UAAK,WAAU,2CAA2C,gBAAK;AAAA,UAC/D,UAAU,oBAAC,UAAK,WAAU,uCAAuC,kBAAO;AAAA,WAC3E;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAkBM,IAAM,cAAc,WAA0C,SAASC,aAC5E,EAAE,OAAO,SAAS,MAAM,WAAW,GAAG,MAAM,GAC5C,KACA;AACA,SACE,qBAAC,aAAQ,KAAU,aAAU,gBAAe,WAAW,GAAG,QAAQ,SAAS,GAAI,GAAG,OAChF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAU;AAAA,QACX;AAAA;AAAA,UACI;AAAA,UAAM;AAAA;AAAA;AAAA,IACX;AAAA,IACA,oBAAC,SAAI,aAAU,sBAAqB,WAAU,4CAC3C,iBAAO,QAAQ,OAAO,EAAE,IAAI,CAAC,CAAC,MAAM,KAAK,MACxC,oBAAC,UAAkB,MAAY,OAAc,QAAhC,IAA4C,CAC1D,GACH;AAAA,KACF;AAEJ,CAAC;","names":["Swatch","SwatchGroup"]}

package/dist/components/Switch.js

@@ -0,0 +1,53 @@
+"use client";
+
+// src/components/Switch.tsx
+import { forwardRef } from "react";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { cn } from "../lib/recipe.js";
+import { booleanControl } from "./booleanControl.js";
+import { FieldFrame, accentStyle } from "./fieldFrame.js";
+import { jsx } from "react/jsx-runtime";
+var Switch = forwardRef(function Switch2({
+  label,
+  error,
+  helperText,
+  accent = "primary",
+  className = "",
+  style,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  name,
+  value,
+  disabled,
+  readOnly,
+  required,
+  id,
+  ...props
+}, ref) {
+  const styles = booleanControl({ shape: "track" });
+  return /* @__PURE__ */ jsx(FieldFrame, { label, error, helperText, disabled, layout: "inline", children: /* @__PURE__ */ jsx(
+    BaseSwitch.Root,
+    {
+      ref,
+      id,
+      name,
+      value,
+      checked,
+      defaultChecked,
+      disabled,
+      readOnly,
+      required,
+      onCheckedChange: (next) => onCheckedChange?.(next),
+      "data-slot": "switch",
+      style: accentStyle(accent, style),
+      className: cn(styles.control(), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(BaseSwitch.Thumb, { "data-slot": "switch-thumb", className: styles.mark() })
+    }
+  ) });
+});
+export {
+  Switch
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Switch.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport { Switch as BaseSwitch } from '@base-ui/react/switch';\nimport { cn } from '../lib/recipe';\nimport { booleanControl } from './booleanControl';\nimport { FieldFrame, accentStyle } from './fieldFrame';\nimport type { BooleanFieldProps } from './fieldFrame';\n\nexport interface SwitchProps extends BooleanFieldProps {}\n\n/**\n * A switch, with its label, description and error as one unit.\n *\n * The same boolean `Checkbox` carries, in the presentation that says *this\n * takes effect now*: a setting being turned on, not an answer being collected.\n * Pick by when the change lands, not by how it looks — a switch inside a form\n * that only applies on submit is a checkbox drawn misleadingly.\n *\n * There is no indeterminate switch, deliberately. A track has two ends and a\n * third state has nowhere to sit; a tri-state answer is a `Checkbox`.\n *\n * It composes the same `Field` as every other control here —\n * `SwitchRootState extends FieldRootState` — so `error`, `disabled`,\n * `required` and the description behave exactly as they do on `Input`, and\n * form participation is Base UI's hidden input rather than one written here.\n *\n * ```tsx\n * <Switch name=\"telemetry\" label=\"Send anonymous telemetry\" defaultChecked />\n * ```\n */\nexport const Switch = forwardRef<HTMLSpanElement, SwitchProps>(function Switch(\n  {\n    label,\n    error,\n    helperText,\n    accent = 'primary',\n    className = '',\n    style,\n    checked,\n    defaultChecked,\n    onCheckedChange,\n    name,\n    value,\n    disabled,\n    readOnly,\n    required,\n    id,\n    ...props\n  },\n  ref,\n) {\n  const styles = booleanControl({ shape: 'track' });\n\n  return (\n    <FieldFrame label={label} error={error} helperText={helperText} disabled={disabled} layout=\"inline\">\n      <BaseSwitch.Root\n        ref={ref}\n        id={id}\n        name={name}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        // The event details Base UI passes second are dropped here for the same\n        // reason `Checkbox` drops them: they are a Base UI type, and the\n        // published surface names none.\n        onCheckedChange={(next) => onCheckedChange?.(next)}\n        data-slot=\"switch\"\n        style={accentStyle(accent, style)}\n        // `cn`, for the reason `Checkbox` states: the merge is what makes a\n        // caller's utility replace the recipe's rather than race it.\n        className={cn(styles.control(), className)}\n        {...props}\n      >\n        <BaseSwitch.Thumb data-slot=\"switch-thumb\" className={styles.mark()} />\n      </BaseSwitch.Root>\n    </FieldFrame>\n  );\n});\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAC3B,SAAS,UAAU,kBAAkB;AACrC,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,YAAY,mBAAmB;AAuEhC;AA9CD,IAAM,SAAS,WAAyC,SAASA,QACtE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS,eAAe,EAAE,OAAO,QAAQ,CAAC;AAEhD,SACE,oBAAC,cAAW,OAAc,OAAc,YAAwB,UAAoB,QAAO,UACzF;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAIA,iBAAiB,CAAC,SAAS,kBAAkB,IAAI;AAAA,MACjD,aAAU;AAAA,MACV,OAAO,YAAY,QAAQ,KAAK;AAAA,MAGhC,WAAW,GAAG,OAAO,QAAQ,GAAG,SAAS;AAAA,MACxC,GAAG;AAAA,MAEJ,8BAAC,WAAW,OAAX,EAAiB,aAAU,gBAAe,WAAW,OAAO,KAAK,GAAG;AAAA;AAAA,EACvE,GACF;AAEJ,CAAC;","names":["Switch"]}

package/dist/components/TLDR.js

@@ -0,0 +1,53 @@
+// src/components/TLDR.tsx
+import { Zap } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TLDR = ({ children }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "tldr",
+      style: {
+        margin: "2rem 0",
+        padding: "1.5rem",
+        border: "2px solid var(--ds-accent-secondary)",
+        backgroundColor: "var(--ds-surface-base)",
+        boxShadow: "6px 6px 0px 0px var(--ds-accent-secondary)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem" }, children: [
+          /* @__PURE__ */ jsx(Zap, { size: 20, color: "var(--ds-accent-secondary)" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontFamily: "var(--ds-font-display)",
+                fontWeight: 800,
+                fontSize: "1rem",
+                textTransform: "uppercase",
+                color: "var(--ds-accent-secondary)"
+              },
+              children: "[ TL;DR ]"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: "var(--ds-font-body)",
+              fontSize: "1rem",
+              fontWeight: 500,
+              color: "var(--ds-text-primary)",
+              lineHeight: 1.6
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  TLDR
+};
+//# sourceMappingURL=TLDR.js.map

package/dist/components/TLDR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TLDR.tsx"],"sourcesContent":["import type React from 'react';\nimport { Zap } from 'lucide-react';\n\nexport interface TLDRProps {\n  children: React.ReactNode;\n}\n\nexport const TLDR: React.FC<TLDRProps> = ({ children }) => {\n  return (\n    <div\n      data-slot=\"tldr\"\n      style={{\n        margin: '2rem 0',\n        padding: '1.5rem',\n        border: '2px solid var(--ds-accent-secondary)',\n        backgroundColor: 'var(--ds-surface-base)',\n        boxShadow: '6px 6px 0px 0px var(--ds-accent-secondary)',\n      }}\n    >\n      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>\n        <Zap size={20} color=\"var(--ds-accent-secondary)\" />\n        <span\n          style={{\n            fontFamily: 'var(--ds-font-display)',\n            fontWeight: 800,\n            fontSize: '1rem',\n            textTransform: 'uppercase',\n            color: 'var(--ds-accent-secondary)',\n          }}\n        >\n          [ TL;DR ]\n        </span>\n      </div>\n      <div\n        style={{\n          fontFamily: 'var(--ds-font-body)',\n          fontSize: '1rem',\n          fontWeight: 500,\n          color: 'var(--ds-text-primary)',\n          lineHeight: 1.6,\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";AACA,SAAS,WAAW;AAkBd,SACE,KADF;AAZC,IAAM,OAA4B,CAAC,EAAE,SAAS,MAAM;AACzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,6BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,KAAK,UAAU,cAAc,UAAU,GAC1F;AAAA,8BAAC,OAAI,MAAM,IAAI,OAAM,8BAA6B;AAAA,UAClD;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ,UAAU;AAAA,gBACV,eAAe;AAAA,gBACf,OAAO;AAAA,cACT;AAAA,cACD;AAAA;AAAA,UAED;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,YAAY;AAAA,YACd;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/Table.js

@@ -0,0 +1,155 @@
+"use client";
+
+// src/components/Table.tsx
+import {
+  createContext,
+  useContext
+} from "react";
+import { recipe } from "../lib/recipe.js";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_PRESENTATION = {
+  appearance: "grid",
+  density: "comfortable"
+};
+var TablePresentationContext = createContext(DEFAULT_PRESENTATION);
+function useTablePresentation() {
+  return useContext(TablePresentationContext);
+}
+var tableStyles = recipe({
+  slots: {
+    container: "relative w-full overflow-x-auto border-2 border-edge-strong bg-surface-base",
+    table: "w-full caption-bottom text-left font-mono text-sm border-collapse",
+    header: "bg-surface-raised border-b-2 border-edge-strong",
+    head: "h-11 px-4 py-3 text-left align-middle font-display text-xs font-bold uppercase tracking-wider text-accent-primary border-r-2 border-edge-strong last:border-r-0",
+    rowHead: "px-4 py-3 text-left align-middle text-sm font-bold text-content-primary border-r-2 border-edge-strong last:border-r-0",
+    body: "divide-y-2 divide-edge-strong [&_tr:last-child]:border-0",
+    row: "border-b-2 border-edge-strong transition-colors hover:bg-surface-raised data-[state=selected]:bg-surface-raised",
+    cell: "px-4 py-3 align-middle text-sm text-content-primary border-r-2 border-edge-strong last:border-r-0",
+    footer: "bg-surface-raised border-t-2 border-edge-strong font-mono text-xs font-bold text-content-primary",
+    caption: "mt-3 text-xs font-mono text-content-muted text-center"
+  },
+  variants: {
+    appearance: {
+      grid: {},
+      quiet: {
+        container: "border-0 bg-transparent",
+        header: "bg-transparent border-b border-edge-subtle",
+        head: "text-content-secondary border-r-0",
+        rowHead: "border-r-0",
+        body: "divide-y divide-edge-subtle",
+        row: "border-b border-edge-subtle",
+        cell: "border-r-0",
+        footer: "bg-transparent border-t border-edge-subtle",
+        caption: "text-left"
+      },
+      index: {
+        container: "border-0 bg-transparent",
+        header: "bg-transparent border-b border-edge-subtle",
+        head: "text-content-secondary border-r-0",
+        rowHead: "border-l-2 border-accent-primary border-r-0 pl-3",
+        body: "divide-y divide-edge-subtle",
+        row: "border-b border-edge-subtle",
+        cell: "border-r-0",
+        footer: "bg-transparent border-t border-edge-subtle",
+        caption: "text-left"
+      }
+    },
+    density: {
+      comfortable: {},
+      compact: {
+        head: "h-9 px-3 py-2",
+        rowHead: "px-3 py-1.5",
+        cell: "px-3 py-1.5",
+        caption: "mt-2"
+      }
+    }
+  },
+  defaultVariants: {
+    appearance: "grid",
+    density: "comfortable"
+  }
+});
+function Table({
+  className,
+  containerClassName,
+  label = "Table",
+  appearance = "grid",
+  density = "comfortable",
+  ...props
+}) {
+  const presentation = { appearance, density };
+  const styles = tableStyles(presentation);
+  return /* @__PURE__ */ jsx(TablePresentationContext.Provider, { value: presentation, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "table-container",
+      tabIndex: 0,
+      role: "region",
+      "aria-label": label,
+      className: styles.container({ class: containerClassName }),
+      children: /* @__PURE__ */ jsx("table", { "data-slot": "table", className: styles.table({ class: className }), ...props })
+    }
+  ) });
+}
+function TableHeader({
+  className,
+  ...props
+}) {
+  const styles = tableStyles(useTablePresentation());
+  return /* @__PURE__ */ jsx("thead", { "data-slot": "table-header", className: styles.header({ class: className }), ...props });
+}
+function TableBody({
+  className,
+  ...props
+}) {
+  const styles = tableStyles(useTablePresentation());
+  return /* @__PURE__ */ jsx("tbody", { "data-slot": "table-body", className: styles.body({ class: className }), ...props });
+}
+function TableFooter({
+  className,
+  ...props
+}) {
+  const styles = tableStyles(useTablePresentation());
+  return /* @__PURE__ */ jsx("tfoot", { "data-slot": "table-footer", className: styles.footer({ class: className }), ...props });
+}
+function TableRow({
+  className,
+  ...props
+}) {
+  const styles = tableStyles(useTablePresentation());
+  return /* @__PURE__ */ jsx("tr", { "data-slot": "table-row", className: styles.row({ class: className }), ...props });
+}
+function TableHead({
+  className,
+  scope = "col",
+  ...props
+}) {
+  const styles = tableStyles(useTablePresentation());
+  const slot = scope === "row" || scope === "rowgroup" ? styles.rowHead : styles.head;
+  return /* @__PURE__ */ jsx("th", { "data-slot": "table-head", scope, className: slot({ class: className }), ...props });
+}
+function TableCell({
+  className,
+  ...props
+}) {
+  const styles = tableStyles(useTablePresentation());
+  return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: styles.cell({ class: className }), ...props });
+}
+function TableCaption({
+  className,
+  ...props
+}) {
+  const styles = tableStyles(useTablePresentation());
+  return /* @__PURE__ */ jsx("caption", { "data-slot": "table-caption", className: styles.caption({ class: className }), ...props });
+}
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};
+//# sourceMappingURL=Table.js.map

package/dist/components/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Table.tsx"],"sourcesContent":["'use client';\n\n\nimport {\n  createContext,\n  useContext,\n  type HTMLAttributes,\n  type TableHTMLAttributes,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from 'react';\nimport { cn, recipe } from '../lib/recipe';\n\n/** The visual treatment of a table. `grid` preserves the original framed style. */\nexport type TableAppearance = 'grid' | 'quiet' | 'index';\n\n/** Cell spacing for roomy reading or dense reference data. */\nexport type TableDensity = 'comfortable' | 'compact';\n\ninterface TablePresentation {\n  appearance: TableAppearance;\n  density: TableDensity;\n}\n\nconst DEFAULT_PRESENTATION: TablePresentation = {\n  appearance: 'grid',\n  density: 'comfortable',\n};\n\nconst TablePresentationContext = createContext<TablePresentation>(DEFAULT_PRESENTATION);\n\nfunction useTablePresentation() {\n  return useContext(TablePresentationContext);\n}\n\nconst tableStyles = recipe({\n  slots: {\n    container: 'relative w-full overflow-x-auto border-2 border-edge-strong bg-surface-base',\n    table: 'w-full caption-bottom text-left font-mono text-sm border-collapse',\n    header: 'bg-surface-raised border-b-2 border-edge-strong',\n    head: 'h-11 px-4 py-3 text-left align-middle font-display text-xs font-bold uppercase tracking-wider text-accent-primary border-r-2 border-edge-strong last:border-r-0',\n    rowHead: 'px-4 py-3 text-left align-middle text-sm font-bold text-content-primary border-r-2 border-edge-strong last:border-r-0',\n    body: 'divide-y-2 divide-edge-strong [&_tr:last-child]:border-0',\n    row: 'border-b-2 border-edge-strong transition-colors hover:bg-surface-raised data-[state=selected]:bg-surface-raised',\n    cell: 'px-4 py-3 align-middle text-sm text-content-primary border-r-2 border-edge-strong last:border-r-0',\n    footer: 'bg-surface-raised border-t-2 border-edge-strong font-mono text-xs font-bold text-content-primary',\n    caption: 'mt-3 text-xs font-mono text-content-muted text-center',\n  },\n  variants: {\n    appearance: {\n      grid: {},\n      quiet: {\n        container: 'border-0 bg-transparent',\n        header: 'bg-transparent border-b border-edge-subtle',\n        head: 'text-content-secondary border-r-0',\n        rowHead: 'border-r-0',\n        body: 'divide-y divide-edge-subtle',\n        row: 'border-b border-edge-subtle',\n        cell: 'border-r-0',\n        footer: 'bg-transparent border-t border-edge-subtle',\n        caption: 'text-left',\n      },\n      index: {\n        container: 'border-0 bg-transparent',\n        header: 'bg-transparent border-b border-edge-subtle',\n        head: 'text-content-secondary border-r-0',\n        rowHead: 'border-l-2 border-accent-primary border-r-0 pl-3',\n        body: 'divide-y divide-edge-subtle',\n        row: 'border-b border-edge-subtle',\n        cell: 'border-r-0',\n        footer: 'bg-transparent border-t border-edge-subtle',\n        caption: 'text-left',\n      },\n    },\n    density: {\n      comfortable: {},\n      compact: {\n        head: 'h-9 px-3 py-2',\n        rowHead: 'px-3 py-1.5',\n        cell: 'px-3 py-1.5',\n        caption: 'mt-2',\n      },\n    },\n  },\n  defaultVariants: {\n    appearance: 'grid',\n    density: 'comfortable',\n  },\n});\n\nexport function Table({\n  className,\n  containerClassName,\n  label = 'Table',\n  appearance = 'grid',\n  density = 'comfortable',\n  ...props\n}: TableHTMLAttributes<HTMLTableElement> & {\n  containerClassName?: string;\n  /**\n   * Names the scrollable region a keyboard user lands on before the table\n   * itself. Defaults to `Table`, which is honest but uninformative — pass the\n   * table's subject where it is known.\n   */\n  label?: string;\n  /**\n   * `grid` keeps the framed default, `quiet` removes the full cell grid, and\n   * `index` adds a keyline to row headers for catalog-style scanning.\n   */\n  appearance?: TableAppearance;\n  /**\n   * `comfortable` preserves the existing cell spacing. `compact` reduces it\n   * for reference tables with many rows.\n   */\n  density?: TableDensity;\n}) {\n  const presentation = { appearance, density };\n  const styles = tableStyles(presentation);\n  /*\n   * `tabIndex={0}` on the container because it is `overflow-x-auto`: any table\n   * wider than its column becomes a scrollable region, and a scrollable region\n   * that cannot take focus cannot be scrolled by keyboard at all — axe's\n   * `scrollable-region-focusable`, and a real trap rather than a technicality,\n   * since the columns off the right edge are then reachable only with a\n   * pointer. `CodeBlock` carries the same attribute for the same reason.\n   *\n   * `role=\"region\"` and a name come with it, and not only to satisfy\n   * `jsx-a11y/no-noninteractive-tabindex`, which is at budget 0. The two rules\n   * are asking for the same thing from opposite ends: axe wants the scroll\n   * container reachable, jsx-a11y wants anything focusable to be worth\n   * landing on. A focus stop a screen reader announces as nothing is the\n   * thing jsx-a11y is right about, so the region is named. `CodeBlock`\n   * settled on exactly this pair for exactly this reason.\n   *\n   * `label` exists so the name can be the table's own — \"Failing checks\"\n   * rather than \"Table\" — for the callers that know it.\n  */\n  return (\n    <TablePresentationContext.Provider value={presentation}>\n      <div\n        data-slot=\"table-container\"\n        tabIndex={0}\n        role=\"region\"\n        aria-label={label}\n        className={styles.container({ class: containerClassName })}\n      >\n        <table data-slot=\"table\" className={styles.table({ class: className })} {...props} />\n      </div>\n    </TablePresentationContext.Provider>\n  );\n}\n\nexport function TableHeader({\n  className,\n  ...props\n}: HTMLAttributes<HTMLTableSectionElement>) {\n  const styles = tableStyles(useTablePresentation());\n  return <thead data-slot=\"table-header\" className={styles.header({ class: className })} {...props} />;\n}\n\nexport function TableBody({\n  className,\n  ...props\n}: HTMLAttributes<HTMLTableSectionElement>) {\n  const styles = tableStyles(useTablePresentation());\n  return <tbody data-slot=\"table-body\" className={styles.body({ class: className })} {...props} />;\n}\n\nexport function TableFooter({\n  className,\n  ...props\n}: HTMLAttributes<HTMLTableSectionElement>) {\n  const styles = tableStyles(useTablePresentation());\n  return <tfoot data-slot=\"table-footer\" className={styles.footer({ class: className })} {...props} />;\n}\n\nexport function TableRow({\n  className,\n  ...props\n}: HTMLAttributes<HTMLTableRowElement>) {\n  const styles = tableStyles(useTablePresentation());\n  return <tr data-slot=\"table-row\" className={styles.row({ class: className })} {...props} />;\n}\n\n/**\n * A header cell. `scope` defaults to `col`, which is what a cell in\n * `TableHeader` is; pass `scope=\"row\"` for a row header in `TableBody`, which\n * also gives it the body cell's geometry rather than the column header's.\n */\nexport function TableHead({\n  className,\n  scope = 'col',\n  ...props\n}: ThHTMLAttributes<HTMLTableCellElement>) {\n  const styles = tableStyles(useTablePresentation());\n  const slot = scope === 'row' || scope === 'rowgroup' ? styles.rowHead : styles.head;\n  return <th data-slot=\"table-head\" scope={scope} className={slot({ class: className })} {...props} />;\n}\n\nexport function TableCell({\n  className,\n  ...props\n}: TdHTMLAttributes<HTMLTableCellElement>) {\n  const styles = tableStyles(useTablePresentation());\n  return <td data-slot=\"table-cell\" className={styles.cell({ class: className })} {...props} />;\n}\n\nexport function TableCaption({\n  className,\n  ...props\n}: HTMLAttributes<HTMLTableCaptionElement>) {\n  const styles = tableStyles(useTablePresentation());\n  return <caption data-slot=\"table-caption\" className={styles.caption({ class: className })} {...props} />;\n}\n"],"mappings":";;;AAGA;AAAA,EACE;AAAA,EACA;AAAA,OAKK;AACP,SAAa,cAAc;AAuInB;AA1HR,IAAM,uBAA0C;AAAA,EAC9C,YAAY;AAAA,EACZ,SAAS;AACX;AAEA,IAAM,2BAA2B,cAAiC,oBAAoB;AAEtF,SAAS,uBAAuB;AAC9B,SAAO,WAAW,wBAAwB;AAC5C;AAEA,IAAM,cAAc,OAAO;AAAA,EACzB,OAAO;AAAA,IACL,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,IACN,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC;AAAA,MACP,OAAO;AAAA,QACL,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,QACN,KAAK;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,aAAa,CAAC;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACF,CAAC;AAEM,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,UAAU;AAAA,EACV,GAAG;AACL,GAkBG;AACD,QAAM,eAAe,EAAE,YAAY,QAAQ;AAC3C,QAAM,SAAS,YAAY,YAAY;AAoBvC,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,cACxC;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,OAAO,UAAU,EAAE,OAAO,mBAAmB,CAAC;AAAA,MAEzD,8BAAC,WAAM,aAAU,SAAQ,WAAW,OAAO,MAAM,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AAAA;AAAA,EACrF,GACF;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,SAAS,YAAY,qBAAqB,CAAC;AACjD,SAAO,oBAAC,WAAM,aAAU,gBAAe,WAAW,OAAO,OAAO,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACpG;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,SAAS,YAAY,qBAAqB,CAAC;AACjD,SAAO,oBAAC,WAAM,aAAU,cAAa,WAAW,OAAO,KAAK,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,SAAS,YAAY,qBAAqB,CAAC;AACjD,SAAO,oBAAC,WAAM,aAAU,gBAAe,WAAW,OAAO,OAAO,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACpG;AAEO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,GAAG;AACL,GAAwC;AACtC,QAAM,SAAS,YAAY,qBAAqB,CAAC;AACjD,SAAO,oBAAC,QAAG,aAAU,aAAY,WAAW,OAAO,IAAI,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3F;AAOO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAA2C;AACzC,QAAM,SAAS,YAAY,qBAAqB,CAAC;AACjD,QAAM,OAAO,UAAU,SAAS,UAAU,aAAa,OAAO,UAAU,OAAO;AAC/E,SAAO,oBAAC,QAAG,aAAU,cAAa,OAAc,WAAW,KAAK,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACpG;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,SAAS,YAAY,qBAAqB,CAAC;AACjD,SAAO,oBAAC,QAAG,aAAU,cAAa,WAAW,OAAO,KAAK,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AAC7F;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,QAAM,SAAS,YAAY,qBAAqB,CAAC;AACjD,SAAO,oBAAC,aAAQ,aAAU,iBAAgB,WAAW,OAAO,QAAQ,EAAE,OAAO,UAAU,CAAC,GAAI,GAAG,OAAO;AACxG;","names":[]}

package/dist/components/Tabs.js

@@ -0,0 +1,325 @@
+"use client";
+
+// src/components/Tabs.tsx
+import { createContext, forwardRef, useCallback, useContext, useId, useMemo, useState } from "react";
+import { cn, recipe } from "../lib/recipe.js";
+import { accentVar } from "../lib/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tabs_ = recipe({
+  slots: {
+    // The root owns no spacing: a page margin is the caller's decision, and
+    // `CodeTabs` supplies its own `my-6`.
+    root: "",
+    strip: "relative z-10 flex border-2 border-edge-strong",
+    caption: "truncate text-xs text-content-secondary",
+    list: "flex items-end",
+    tab: "shrink-0 whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-[var(--tabs-accent)] focus-visible:ring-inset"
+  },
+  variants: {
+    font: {
+      sans: {
+        tab: "font-sans text-sm font-semibold tracking-normal normal-case",
+        caption: "font-sans text-xs font-semibold uppercase tracking-wider"
+      },
+      mono: {
+        tab: "font-mono text-xs font-bold uppercase tracking-widest",
+        caption: "font-mono text-xs font-bold uppercase tracking-widest"
+      }
+    },
+    variant: {
+      // The loudest: a solid accent tab standing on the panel, its bottom rule
+      // dropped so the fill runs into what it labels.
+      merged: {
+        strip: "items-end overflow-x-auto bg-surface-raised px-1.5 pt-1.5",
+        list: "gap-1",
+        tab: "-mb-0.5 border-2 px-4 py-2"
+      },
+      // The quietest: no tab shapes, a 4px accent rule on the seam.
+      underline: {
+        strip: "items-end overflow-x-auto bg-surface-base px-3 pt-2",
+        list: "gap-1",
+        tab: "-mb-0.5 border-b-4 px-4 py-2.5"
+      },
+      // A title bar with a caption slot; the tabs are a segmented control.
+      segmented: {
+        strip: "items-center justify-between gap-4 bg-surface-raised px-3 py-2.5",
+        list: "gap-0 border-2 border-edge-strong",
+        tab: "border-r-2 border-edge-strong px-4 py-2 last:border-r-0"
+      }
+    },
+    /*
+     * `horizontal` adds nothing on purpose.
+     *
+     * Every class the horizontal strip renders is the class `CodeTabs` rendered
+     * before the extraction, which is what lets its committed baselines stay
+     * valid. The vertical set turns the strip on its side and moves each
+     * variant's edge treatment from the bottom of a tab to its trailing side.
+     */
+    orientation: {
+      horizontal: {},
+      vertical: {
+        root: "flex items-start",
+        strip: "flex-col items-stretch self-stretch overflow-x-visible",
+        list: "flex-col items-stretch",
+        tab: "w-full text-left"
+      }
+    },
+    selected: {
+      true: {},
+      false: {}
+    }
+  },
+  defaultVariants: {
+    font: "sans",
+    variant: "merged",
+    orientation: "horizontal",
+    selected: false
+  },
+  compoundVariants: [
+    {
+      variant: "merged",
+      selected: true,
+      class: {
+        tab: "relative z-10 border-edge-strong border-b-0 bg-[var(--tabs-accent)] text-content-inverse"
+      }
+    },
+    {
+      variant: "merged",
+      selected: false,
+      class: {
+        tab: "border-transparent text-content-muted hover:border-edge-strong hover:text-content-primary"
+      }
+    },
+    {
+      variant: "underline",
+      selected: true,
+      class: { tab: "border-b-[var(--tabs-accent)] text-content-primary" }
+    },
+    {
+      variant: "underline",
+      selected: false,
+      class: { tab: "border-b-transparent text-content-muted hover:text-content-primary" }
+    },
+    {
+      variant: "segmented",
+      selected: true,
+      class: { tab: "bg-[var(--tabs-accent)] text-content-inverse" }
+    },
+    {
+      variant: "segmented",
+      selected: false,
+      class: { tab: "bg-surface-base text-content-muted hover:text-content-primary" }
+    },
+    // Vertical: the seam a variant draws along the bottom of a tab moves to its
+    // trailing edge, so the strip reads as a column rather than a row that has
+    // been rotated and left with a dangling rule.
+    { variant: "merged", orientation: "vertical", class: { tab: "mb-0 -mr-0.5" } },
+    {
+      variant: "merged",
+      orientation: "vertical",
+      selected: true,
+      class: { tab: "border-b-2 border-r-0" }
+    },
+    {
+      variant: "underline",
+      orientation: "vertical",
+      class: { tab: "mb-0 border-b-0 border-r-4" }
+    },
+    {
+      variant: "underline",
+      orientation: "vertical",
+      selected: true,
+      class: { tab: "border-r-[var(--tabs-accent)]" }
+    },
+    {
+      variant: "underline",
+      orientation: "vertical",
+      selected: false,
+      class: { tab: "border-r-transparent" }
+    },
+    {
+      variant: "segmented",
+      orientation: "vertical",
+      class: { tab: "border-b-2 border-r-0 last:border-b-0" }
+    }
+  ]
+});
+var TabsContext = createContext(null);
+function useTabsContext(part) {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error(`<${part}> must be rendered inside <Tabs>.`);
+  }
+  return context;
+}
+function idPart(value) {
+  return encodeURIComponent(value);
+}
+var Tabs = forwardRef(function Tabs2({
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  variant = "merged",
+  font = "sans",
+  accent = "primary",
+  children,
+  className,
+  style,
+  ...props
+}, ref) {
+  const uid = useId();
+  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? "");
+  const selected = value ?? uncontrolled;
+  const select = useCallback(
+    (next) => {
+      if (value === void 0) setUncontrolled(next);
+      onValueChange?.(next);
+    },
+    [value, onValueChange]
+  );
+  const context = useMemo(
+    () => ({
+      value: selected,
+      select,
+      orientation,
+      variant,
+      font,
+      tabId: (v) => `${uid}-tab-${idPart(v)}`,
+      panelId: (v) => `${uid}-panel-${idPart(v)}`
+    }),
+    [selected, select, orientation, variant, font, uid]
+  );
+  const styles = tabs_({ variant, orientation, font });
+  const accented = { "--tabs-accent": accentVar(accent), ...style };
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...props,
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn(styles.root(), className),
+      style: accented,
+      children
+    }
+  ) });
+});
+function moveBetweenTabs(event, orientation, select) {
+  const current = event.currentTarget;
+  const tablist = current.closest('[role="tablist"]');
+  if (!tablist) return;
+  const strip = tablist.querySelectorAll('[role="tab"]:not(:disabled)');
+  const list = Array.from(strip);
+  const index = list.indexOf(current);
+  if (index === -1) return;
+  const [back, forward] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+  const last = list.length - 1;
+  const next = event.key === forward ? index === last ? 0 : index + 1 : event.key === back ? index === 0 ? last : index - 1 : event.key === "Home" ? 0 : event.key === "End" ? last : null;
+  if (next === null) return;
+  event.preventDefault();
+  const target = list[next];
+  if (!target) return;
+  const value = target.dataset.value;
+  if (value !== void 0) select(value);
+  target.focus();
+}
+var TabsList = forwardRef(function TabsList2({
+  label,
+  caption,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}, ref) {
+  const { orientation, variant, font } = useTabsContext("TabsList");
+  const styles = tabs_({ variant, orientation, font });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...props,
+      "data-slot": "tabs-list",
+      className: cn(styles.strip(), className),
+      children: [
+        caption ? /* @__PURE__ */ jsx("span", { "data-slot": "tabs-caption", className: styles.caption(), children: caption }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tablist",
+            "aria-label": label ?? ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+            "data-orientation": orientation,
+            className: styles.list(),
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+var TabsTab = forwardRef(function TabsTab2({ value, children, className, onClick, onKeyDown, ...props }, ref) {
+  const context = useTabsContext("TabsTab");
+  const selected = context.value === value;
+  const styles = tabs_({
+    variant: context.variant,
+    orientation: context.orientation,
+    font: context.font,
+    selected
+  });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      ...props,
+      type: "button",
+      role: "tab",
+      id: context.tabId(value),
+      "data-slot": "tabs-tab",
+      "data-value": value,
+      "aria-selected": selected,
+      "aria-controls": context.panelId(value),
+      tabIndex: selected ? 0 : -1,
+      onClick: (event) => {
+        onClick?.(event);
+        context.select(value);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        moveBetweenTabs(event, context.orientation, context.select);
+      },
+      className: cn(styles.tab(), className),
+      children
+    }
+  );
+});
+var TabsPanel = forwardRef(function TabsPanel2({ value, keepMounted = false, children, className, ...props }, ref) {
+  const context = useTabsContext("TabsPanel");
+  const selected = context.value === value;
+  if (!selected && !keepMounted) return null;
+  const classes = cn(className);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...props,
+      role: "tabpanel",
+      id: context.panelId(value),
+      "data-slot": "tabs-panel",
+      "aria-labelledby": context.tabId(value),
+      hidden: !selected,
+      className: classes || void 0,
+      children
+    }
+  );
+});
+export {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab
+};
+//# sourceMappingURL=Tabs.js.map