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

package/dist/components/Card.js

@@ -0,0 +1,181 @@
+// src/components/Card.tsx
+import { forwardRef } from "react";
+import { cn } from "../lib/recipe.js";
+import { accentVar, semanticTokens } from "../lib/theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Card = forwardRef(function Card2({
+  title,
+  description,
+  imgSrc,
+  href,
+  asciiArt,
+  filename,
+  children,
+  className = "",
+  accent,
+  badge,
+  panel = false,
+  variant,
+  style,
+  ...props
+}, ref) {
+  const accentColor = accent ? accentVar(accent) : void 0;
+  const form = variant ?? (panel || !title && children ? "panel" : "card");
+  const baseCardStyle = {
+    backgroundColor: semanticTokens.surface.base,
+    color: semanticTokens.text.primary,
+    border: `2px solid ${semanticTokens.border.strong}`,
+    transition: "transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease",
+    ...accentColor ? { borderLeftWidth: "4px", borderLeftColor: accentColor } : {},
+    ...style
+  };
+  if (form === "panel") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "card",
+        ref,
+        className: cn(className),
+        style: { ...baseCardStyle, padding: "1.5rem" },
+        ...props,
+        children: [
+          badge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                padding: "0.15rem 0.5rem",
+                fontSize: "0.65rem",
+                fontFamily: semanticTokens.font.mono,
+                fontWeight: 700,
+                textTransform: "uppercase",
+                color: "var(--ds-text-inverse)",
+                backgroundColor: accentColor ?? semanticTokens.accent.tertiary,
+                marginBottom: "0.75rem"
+              },
+              children: badge
+            }
+          ),
+          title && /* @__PURE__ */ jsx(
+            "h3",
+            {
+              style: {
+                fontFamily: semanticTokens.font.display,
+                fontSize: "1.1rem",
+                fontWeight: 800,
+                textTransform: "uppercase",
+                color: accentColor || semanticTokens.text.primary,
+                marginBottom: "0.75rem",
+                letterSpacing: "0.025em"
+              },
+              children: title
+            }
+          ),
+          description && /* @__PURE__ */ jsx("p", { style: { fontFamily: semanticTokens.font.mono, fontSize: "0.85rem", color: semanticTokens.text.primary, opacity: 0.9, lineHeight: 1.6 }, children: description }),
+          children
+        ]
+      }
+    );
+  }
+  const computedFilename = filename || (title ? `${title.toLowerCase().replace(/\s+/g, "_")}.md` : "card.md");
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card", ref, className: cn("p-4 md:w-1/2", className), style: { maxWidth: "544px" }, ...props, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: "100%",
+        ...baseCardStyle
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              borderBottom: `2px solid ${semanticTokens.border.strong}`,
+              padding: "0.5rem 1rem",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              backgroundColor: semanticTokens.surface.base
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontFamily: semanticTokens.font.mono,
+                    fontSize: "0.85rem",
+                    color: semanticTokens.accent.secondary,
+                    fontWeight: 700,
+                    textTransform: "uppercase",
+                    // A file name is one unbreakable token: in a narrow card it must wrap inside the
+                    // header strip, not run out past the card border.
+                    minWidth: 0,
+                    overflowWrap: "anywhere"
+                  },
+                  children: computedFilename
+                }
+              ),
+              asciiArt && /* @__PURE__ */ jsx("pre", { style: { fontSize: "0.7rem", color: semanticTokens.accent.primary, lineHeight: 1 }, children: asciiArt })
+            ]
+          }
+        ),
+        imgSrc && /* @__PURE__ */ jsx("div", { style: { borderBottom: `2px solid ${semanticTokens.border.strong}` }, children: href ? /* @__PURE__ */ jsx("a", { href, "aria-label": `Link to ${title || "card"}`, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: title || "Card Image",
+            src: imgSrc,
+            style: { objectFit: "cover", objectPosition: "center", width: "100%", maxHeight: "192px" }
+          }
+        ) }) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: title || "Card Image",
+            src: imgSrc,
+            style: { objectFit: "cover", objectPosition: "center", width: "100%", maxHeight: "192px" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: "1.5rem" }, children: [
+          title && /* @__PURE__ */ jsx(
+            "h2",
+            {
+              style: {
+                marginBottom: "0.75rem",
+                fontSize: "1.5rem",
+                fontFamily: semanticTokens.font.display,
+                fontWeight: 700,
+                lineHeight: 1.3,
+                letterSpacing: "-0.01em",
+                textTransform: "uppercase",
+                color: semanticTokens.text.primary
+              },
+              children: href ? /* @__PURE__ */ jsx("a", { href, "aria-label": `Link to ${title}`, style: { color: "inherit", textDecoration: "none" }, children: title }) : title
+            }
+          ),
+          description && /* @__PURE__ */ jsx("p", { style: { marginBottom: "0.75rem", fontFamily: semanticTokens.font.body, fontSize: "0.9rem", color: semanticTokens.text.primary, opacity: 0.7, lineHeight: 1.6 }, children: description }),
+          children,
+          href && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href,
+              style: {
+                fontFamily: semanticTokens.font.mono,
+                fontWeight: 700,
+                color: semanticTokens.accent.primary,
+                textDecoration: "none",
+                textTransform: "uppercase",
+                display: "inline-block",
+                transition: "transform 0.15s ease"
+              },
+              "aria-label": `Link to ${title || "details"}`,
+              children: "[ Learn More \u2192 ]"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+});
+export {
+  Card
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Card.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { ReactNode, HTMLAttributes, CSSProperties } from 'react';\nimport { cn } from '../lib/recipe';\nimport { accentVar, semanticTokens } from '../lib/theme';\nimport type { AccentToken } from '../lib/theme';\n\n\n/**\n * The two shapes a `Card` renders.\n *\n * `panel` is the general container — border, padding, optional accent stripe.\n * `card` is the blog/project card: a filename bar, an optional cover image and\n * a `[ Learn More → ]` footer, carrying its own width and float classes.\n */\nexport type CardVariant = 'panel' | 'card';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Card heading. With no `variant` set, its presence is also what selects the\n   * full card form over the panel form — see the note on `variant`.\n   */\n  title?: string;\n  /**\n   * The standfirst under the title — one or two sentences saying what the card\n   * is about. Longer body copy belongs in `children`, which is not constrained\n   * to a paragraph.\n   */\n  description?: string;\n  /**\n   * A cover image above the card's text. Mutually exclusive with `asciiArt` in\n   * practice rather than in types: both occupy the same slot, and a card given\n   * both shows the image.\n   */\n  imgSrc?: string;\n  /**\n   * Turns the card into a link to here, rendered as a trailing affordance\n   * rather than by wrapping the whole card — so the title stays selectable and\n   * nested controls keep their own click targets.\n   */\n  href?: string;\n  /**\n   * Monospace art rendered in place of an image. The reason the mono face is\n   * latin-only by deliberate choice: box-drawing characters must land on the\n   * same advance width or the art shears.\n   */\n  asciiArt?: string;\n  /**\n   * Shown in the card's header strip as a file name would be in an editor\n   * tab. A label for the card's provenance, not a download.\n   */\n  filename?: string;\n  /**\n   * The card's body. Whatever `title` and `description` cannot say — a list, a\n   * chart, controls. With no `title` and no `variant`, supplying this is what\n   * selects the panel form; see the note on `variant`.\n   */\n  children?: ReactNode;\n  /**\n   * Merged into the recipe's classes. For placement and span — a grid cell, a\n   * width — rather than for restyling the surface.\n   */\n  className?: string;\n  /** Semantic accent for the left border highlight. */\n  accent?: AccentToken;\n  /** Badge text shown in the card header */\n  badge?: string;\n  /**\n   * Render the plain panel.\n   *\n   * @deprecated Use `variant=\"panel\"`. This is kept because it is what existing\n   * call sites pass, and `variant` takes precedence over it.\n   */\n  panel?: boolean;\n  /**\n   * Which of the component's two forms to render.\n   *\n   * Setting it is the whole point: with `variant` omitted the form is\n   * *inferred* — panel when there is no `title`, full card otherwise — so a\n   * panel that later gains a title silently becomes a floated blog card with a\n   * filename bar. Nothing in the diff that adds the title says so.\n   *\n   * Omitting it keeps that inference exactly as it was, for the call sites that\n   * already rely on it. New code should say which form it wants.\n   */\n  variant?: CardVariant;\n}\n\n/**\n * A bordered container, in two forms.\n *\n * **`variant=\"panel\"`** is the general one: border, 1.5rem of padding, an\n * optional accent stripe down the left edge, and whatever you put in it. Reach\n * for this unless you specifically want the other.\n *\n * **`variant=\"card\"`** is the blog/project card — a filename bar across the top\n * reading `some_title.md`, an optional cover image, then title, description and\n * a `[ Learn More → ]` link. It is opinionated on purpose and carries its own\n * width and float classes, so it belongs in a card grid rather than as a\n * general-purpose box.\n *\n * **Say which one you want.** With `variant` omitted the form is inferred from\n * whether a `title` is present, which means adding a title to a panel silently\n * turns it into a floated blog card. The inference is kept for the call sites\n * that predate `variant`; new code should not rely on it.\n *\n * The accent is a *stripe*, not a fill: `accent` thickens the left border to\n * 4px and colours it. That is the whole colour budget of the component, which\n * is why a card conveys category rather than status.\n *\n * ```tsx\n * <Card variant=\"panel\" accent=\"info\" badge=\"DRAFT\">\n *   <p>Anything.</p>\n * </Card>\n *\n * <Card variant=\"card\" title=\"Where a theme stops applying\" href=\"/posts/theme\" />\n * ```\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>(function Card({\n  title,\n  description,\n  imgSrc,\n  href,\n  asciiArt,\n  filename,\n  children,\n  className = '',\n  accent,\n  badge,\n  panel = false,\n  variant,\n  style,\n  ...props\n}, ref) {\n  const accentColor = accent ? accentVar(accent) : undefined;\n\n  /**\n   * An explicit `variant` decides; otherwise fall back to the historical\n   * inference, unchanged, so nothing that renders today renders differently.\n   *\n   * Written as one resolved value rather than left inline in the branch below,\n   * because the inference is the part worth being able to point at — and worth\n   * being able to delete in one place when it goes in a major.\n   */\n  const form: CardVariant = variant ?? (panel || (!title && children) ? 'panel' : 'card');\n\n  const baseCardStyle: CSSProperties = {\n    backgroundColor: semanticTokens.surface.base,\n    color: semanticTokens.text.primary,\n    border: `2px solid ${semanticTokens.border.strong}`,\n    transition: 'transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease',\n    ...(accentColor ? { borderLeftWidth: '4px', borderLeftColor: accentColor } : {}),\n    ...style,\n  };\n\n  // Simple panel mode: no filename header, no width constraints\n  if (form === 'panel') {\n    return (\n      <div data-slot=\"card\"\n        ref={ref}\n        className={cn(className)}\n        style={{ ...baseCardStyle, padding: '1.5rem' }}\n        {...props}\n      >\n        {badge && (\n          <span\n            style={{\n              display: 'inline-block',\n              padding: '0.15rem 0.5rem',\n              fontSize: '0.65rem',\n              fontFamily: semanticTokens.font.mono,\n              fontWeight: 700,\n              textTransform: 'uppercase',\n              color: 'var(--ds-text-inverse)',\n              backgroundColor: accentColor ?? semanticTokens.accent.tertiary,\n              marginBottom: '0.75rem',\n            }}\n          >\n            {badge}\n          </span>\n        )}\n        {title && (\n          <h3\n            style={{\n              fontFamily: semanticTokens.font.display,\n              fontSize: '1.1rem',\n              fontWeight: 800,\n              textTransform: 'uppercase',\n              color: accentColor || semanticTokens.text.primary,\n              marginBottom: '0.75rem',\n              letterSpacing: '0.025em',\n            }}\n          >\n            {title}\n          </h3>\n        )}\n        {description && (\n          <p style={{ fontFamily: semanticTokens.font.mono, fontSize: '0.85rem', color: semanticTokens.text.primary, opacity: 0.9, lineHeight: 1.6 }}>\n            {description}\n          </p>\n        )}\n        {children}\n      </div>\n    );\n  }\n\n  // Full card mode with filename header bar (blog/project card style)\n  const computedFilename = filename || (title ? `${title.toLowerCase().replace(/\\s+/g, '_')}.md` : 'card.md');\n\n  return (\n    <div data-slot=\"card\" ref={ref} className={cn('p-4 md:w-1/2', className)} style={{ maxWidth: '544px' }} {...props}>\n      <div\n        style={{\n          height: '100%',\n          ...baseCardStyle,\n        }}\n      >\n        <div\n          style={{\n            borderBottom: `2px solid ${semanticTokens.border.strong}`,\n            padding: '0.5rem 1rem',\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            backgroundColor: semanticTokens.surface.base,\n          }}\n        >\n          <span\n            style={{\n              fontFamily: semanticTokens.font.mono,\n              fontSize: '0.85rem',\n              color: semanticTokens.accent.secondary,\n              fontWeight: 700,\n              textTransform: 'uppercase',\n              // A file name is one unbreakable token: in a narrow card it must wrap inside the\n              // header strip, not run out past the card border.\n              minWidth: 0,\n              overflowWrap: 'anywhere',\n            }}\n          >\n            {computedFilename}\n          </span>\n          {asciiArt && (\n            <pre style={{ fontSize: '0.7rem', color: semanticTokens.accent.primary, lineHeight: 1 }}>\n              {asciiArt}\n            </pre>\n          )}\n        </div>\n\n        {imgSrc && (\n          <div style={{ borderBottom: `2px solid ${semanticTokens.border.strong}` }}>\n            {href ? (\n              <a href={href} aria-label={`Link to ${title || 'card'}`}>\n                <img\n                  alt={title || 'Card Image'}\n                  src={imgSrc}\n                  style={{ objectFit: 'cover', objectPosition: 'center', width: '100%', maxHeight: '192px' }}\n                />\n              </a>\n            ) : (\n              <img\n                alt={title || 'Card Image'}\n                src={imgSrc}\n                style={{ objectFit: 'cover', objectPosition: 'center', width: '100%', maxHeight: '192px' }}\n              />\n            )}\n          </div>\n        )}\n\n        <div style={{ padding: '1.5rem' }}>\n          {title && (\n            <h2\n              style={{\n                marginBottom: '0.75rem',\n                fontSize: '1.5rem',\n                fontFamily: semanticTokens.font.display,\n                fontWeight: 700,\n                lineHeight: 1.3,\n                letterSpacing: '-0.01em',\n                textTransform: 'uppercase',\n                color: semanticTokens.text.primary,\n              }}\n            >\n              {href ? (\n                <a href={href} aria-label={`Link to ${title}`} style={{ color: 'inherit', textDecoration: 'none' }}>\n                  {title}\n                </a>\n              ) : (\n                title\n              )}\n            </h2>\n          )}\n          {description && (\n            <p style={{ marginBottom: '0.75rem', fontFamily: semanticTokens.font.body, fontSize: '0.9rem', color: semanticTokens.text.primary, opacity: 0.7, lineHeight: 1.6 }}>\n              {description}\n            </p>\n          )}\n          {children}\n          {href && (\n            <a\n              href={href}\n              style={{\n                fontFamily: semanticTokens.font.mono,\n                fontWeight: 700,\n                color: semanticTokens.accent.primary,\n                textDecoration: 'none',\n                textTransform: 'uppercase',\n                display: 'inline-block',\n                transition: 'transform 0.15s ease',\n              }}\n              aria-label={`Link to ${title || 'details'}`}\n            >\n              [ Learn More &rarr; ]\n            </a>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"mappings":"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","names":["Card"]}

package/dist/components/ChartTooltip.js

@@ -0,0 +1,54 @@
+"use client";
+
+// src/components/ChartTooltip.tsx
+import { TooltipWithBounds, useTooltip } from "@visx/tooltip";
+import { forwardRef } from "react";
+import { cn } from "../lib/recipe.js";
+import { Card } from "./Card.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartTooltip = forwardRef(
+  function ChartTooltip2({ title, accent = "primary", top, left, children, className, ...props }, ref) {
+    const content = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "chart-tooltip",
+        className: cn("pointer-events-none inline-block align-top", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          Card,
+          {
+            variant: "panel",
+            accent,
+            className: cn("min-w-32 p-2.5 font-mono text-xs shadow-hard-sm", className),
+            children: [
+              title && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "chart-tooltip-title",
+                  className: "mb-1 border-b border-edge-subtle pb-1 font-bold uppercase tracking-wider text-content-muted",
+                  children: [
+                    "[ ",
+                    title,
+                    " ]"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { "data-slot": "chart-tooltip-body", className: "space-y-0.5 text-content-primary", children })
+            ]
+          }
+        )
+      }
+    );
+    if (top !== void 0 && left !== void 0) {
+      return /* @__PURE__ */ jsx(TooltipWithBounds, { top, left, unstyled: true, children: content });
+    }
+    return content;
+  }
+);
+ChartTooltip.displayName = "ChartTooltip";
+export {
+  ChartTooltip,
+  useTooltip as useChartTooltip
+};
+//# sourceMappingURL=ChartTooltip.js.map

package/dist/components/ChartTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ChartTooltip.tsx"],"sourcesContent":["'use client';\n\nimport { TooltipWithBounds, useTooltip } from '@visx/tooltip';\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { cn } from '../lib/recipe';\nimport type { AccentToken } from '../lib/theme';\nimport { Card } from './Card';\n\nexport { useTooltip as useChartTooltip };\n\nexport interface ChartTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  title?: ReactNode;\n  accent?: AccentToken;\n  top?: number;\n  left?: number;\n  children: ReactNode;\n}\n\n/**\n * Themed container for chart inspection overlays.\n *\n * Renders an elevated card with brutalist borders and hard shadows\n * to display data point details on hover or focus without obscuring context.\n */\nexport const ChartTooltip = forwardRef<HTMLDivElement, ChartTooltipProps>(\n  function ChartTooltip(\n    { title, accent = 'primary', top, left, children, className, ...props },\n    ref,\n  ) {\n    const content = (\n      <div\n        ref={ref}\n        data-slot=\"chart-tooltip\"\n        className={cn('pointer-events-none inline-block align-top', className)}\n        {...props}\n      >\n        <Card\n          variant=\"panel\"\n          accent={accent}\n          className={cn('min-w-32 p-2.5 font-mono text-xs shadow-hard-sm', className)}\n        >\n          {title && (\n            <div\n              data-slot=\"chart-tooltip-title\"\n              className=\"mb-1 border-b border-edge-subtle pb-1 font-bold uppercase tracking-wider text-content-muted\"\n            >\n              [ {title} ]\n            </div>\n          )}\n          <div data-slot=\"chart-tooltip-body\" className=\"space-y-0.5 text-content-primary\">\n            {children}\n          </div>\n        </Card>\n      </div>\n    );\n\n    if (top !== undefined && left !== undefined) {\n      return (\n        <TooltipWithBounds top={top} left={left} unstyled>\n          {content}\n        </TooltipWithBounds>\n      );\n    }\n\n    return content;\n  },\n);\n\nChartTooltip.displayName = 'ChartTooltip';\n"],"mappings":";;;AAEA,SAAS,mBAAmB,kBAAkB;AAC9C,SAAS,kBAAuD;AAChE,SAAS,UAAU;AAEnB,SAAS,YAAY;AAoCT,SAOF,KAPE;AAlBL,IAAM,eAAe;AAAA,EAC1B,SAASA,cACP,EAAE,OAAO,SAAS,WAAW,KAAK,MAAM,UAAU,WAAW,GAAG,MAAM,GACtE,KACA;AACA,UAAM,UACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW,GAAG,8CAA8C,SAAS;AAAA,QACpE,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR;AAAA,YACA,WAAW,GAAG,mDAAmD,SAAS;AAAA,YAEzE;AAAA,uBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAU;AAAA,kBACV,WAAU;AAAA,kBACX;AAAA;AAAA,oBACI;AAAA,oBAAM;AAAA;AAAA;AAAA,cACX;AAAA,cAEF,oBAAC,SAAI,aAAU,sBAAqB,WAAU,oCAC3C,UACH;AAAA;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAGF,QAAI,QAAQ,UAAa,SAAS,QAAW;AAC3C,aACE,oBAAC,qBAAkB,KAAU,MAAY,UAAQ,MAC9C,mBACH;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AACF;AAEA,aAAa,cAAc;","names":["ChartTooltip"]}

package/dist/components/Checkbox.js

@@ -0,0 +1,55 @@
+"use client";
+
+// src/components/Checkbox.tsx
+import { forwardRef } from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { cn } from "../lib/recipe.js";
+import { booleanControl } from "./booleanControl.js";
+import { FieldFrame, accentStyle } from "./fieldFrame.js";
+import { jsx } from "react/jsx-runtime";
+var Checkbox = forwardRef(function Checkbox2({
+  label,
+  error,
+  helperText,
+  accent = "primary",
+  className = "",
+  style,
+  indeterminate = false,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  name,
+  value,
+  disabled,
+  readOnly,
+  required,
+  id,
+  ...props
+}, ref) {
+  const styles = booleanControl({ shape: "box" });
+  return /* @__PURE__ */ jsx(FieldFrame, { label, error, helperText, disabled, layout: "inline", children: /* @__PURE__ */ jsx(
+    BaseCheckbox.Root,
+    {
+      ref,
+      id,
+      name,
+      value,
+      checked,
+      defaultChecked,
+      indeterminate,
+      disabled,
+      readOnly,
+      required,
+      onCheckedChange: (next) => onCheckedChange?.(next),
+      "data-slot": "checkbox",
+      style: accentStyle(accent, style),
+      className: cn(styles.control(), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(BaseCheckbox.Indicator, { "data-slot": "checkbox-indicator", className: styles.mark(), children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: indeterminate ? "-" : "X" }) })
+    }
+  ) });
+});
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\nimport { cn } from '../lib/recipe';\nimport { booleanControl } from './booleanControl';\nimport { FieldFrame, accentStyle } from './fieldFrame';\nimport type { BooleanFieldProps } from './fieldFrame';\n\nexport interface CheckboxProps extends BooleanFieldProps {\n  /**\n   * The third state: neither ticked nor unticked.\n   *\n   * It is a prop rather than a value `checked` can take, because that is what\n   * the platform does — `input.indeterminate` is separate from `input.checked`\n   * and a form submits the underlying `checked`. Base UI sets the DOM property\n   * and renders `aria-checked=\"mixed\"`; nothing here tracks it.\n   */\n  indeterminate?: boolean;\n}\n\n/**\n * A checkbox, with its label, description and error as one unit.\n *\n * Reach for it to choose *many* from a set, or to answer one yes/no that the\n * form submits. `Switch` is the same boolean where the change takes effect\n * immediately and there is nothing to submit — a setting rather than an answer.\n *\n * It composes the same `Field` the text controls use, so `error` does three\n * things at once here too: the message, `aria-invalid`, and the danger border.\n * `CheckboxRootState extends FieldRootState`, so `disabled`, `touched`,\n * `dirty`, `valid`, `filled` and `focused` arrive as data attributes on the\n * control without either the field or the control being told about the other.\n *\n * Everything a hand-rolled checkbox gets wrong is Base UI's here and not\n * written in this file: the generated `id` and its label association, the\n * composed `aria-describedby`, `aria-checked=\"mixed\"`, the `indeterminate` DOM\n * property, and the hidden input that makes the control appear in `FormData`\n * under its `name`.\n *\n * ```tsx\n * <Checkbox name=\"terms\" label=\"Accept the terms\" required />\n * ```\n */\nexport const Checkbox = forwardRef<HTMLSpanElement, CheckboxProps>(function Checkbox(\n  {\n    label,\n    error,\n    helperText,\n    accent = 'primary',\n    className = '',\n    style,\n    indeterminate = false,\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: 'box' });\n\n  return (\n    <FieldFrame label={label} error={error} helperText={helperText} disabled={disabled} layout=\"inline\">\n      <BaseCheckbox.Root\n        ref={ref}\n        id={id}\n        name={name}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        indeterminate={indeterminate}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        // Base UI's handler takes event details as a second argument. Dropping\n        // them is the confinement rule: forwarding the object would name a Base\n        // UI type in the published `.d.ts`.\n        onCheckedChange={(next) => onCheckedChange?.(next)}\n        data-slot=\"checkbox\"\n        style={accentStyle(accent, style)}\n        // `cn`, not an appended string: the merge is what makes a caller's\n        // utility actually replace the recipe's rather than race it in CSS\n        // source order. Same composition `Modal` uses over `dialogSurface`.\n        className={cn(styles.control(), className)}\n        {...props}\n      >\n        <BaseCheckbox.Indicator data-slot=\"checkbox-indicator\" className={styles.mark()}>\n          {/*\n            * ASCII, not an icon: the mark is a glyph in the same mono face the\n            * rest of the system sets, so it scales with the type rather than\n            * being a second unit of measure. `aria-hidden` because the control\n            * announces itself through `aria-checked` — the glyph would\n            * otherwise be read as part of the name.\n            */}\n          <span aria-hidden=\"true\">{indeterminate ? '-' : 'X'}</span>\n        </BaseCheckbox.Indicator>\n      </BaseCheckbox.Root>\n    </FieldFrame>\n  );\n});\n"],"mappings":";;;AAEA,SAAS,kBAAkB;AAC3B,SAAS,YAAY,oBAAoB;AACzC,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,YAAY,mBAAmB;AA+F9B;AAzDH,IAAM,WAAW,WAA2C,SAASA,UAC1E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,gBAAgB;AAAA,EAChB;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,MAAM,CAAC;AAE9C,SACE,oBAAC,cAAW,OAAc,OAAc,YAAwB,UAAoB,QAAO,UACzF;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC;AAAA,MACA;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,MAIhC,WAAW,GAAG,OAAO,QAAQ,GAAG,SAAS;AAAA,MACxC,GAAG;AAAA,MAEJ,8BAAC,aAAa,WAAb,EAAuB,aAAU,sBAAqB,WAAW,OAAO,KAAK,GAQ5E,8BAAC,UAAK,eAAY,QAAQ,0BAAgB,MAAM,KAAI,GACtD;AAAA;AAAA,EACF,GACF;AAEJ,CAAC;","names":["Checkbox"]}

package/dist/components/ColophonCard.js

@@ -0,0 +1,122 @@
+// src/components/ColophonCard.tsx
+import { ArrowUpRight, Code2, Globe, Rss, Share2 } from "lucide-react";
+import { forwardRef } from "react";
+import { cn } from "../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICON_MAP = {
+  code: Code2,
+  globe: Globe,
+  share: Share2,
+  rss: Rss,
+  external: ArrowUpRight
+};
+var ColophonCard = forwardRef(
+  function ColophonCard2({
+    authorName = "RYAN KELLY",
+    authorRole = "STAFF ENGINEER // DISTRIBUTED SYSTEMS & TOOLING",
+    bio = "I build high-throughput data engines, compiler extensions, and retro-brutalist developer tooling.",
+    sectionMarker = "\xA7",
+    links = [
+      { label: "GITHUB", href: "https://github.com/rtkelly13", icon: "code" },
+      { label: "BLOG", href: "https://ryankelly.dev", icon: "globe" },
+      { label: "SHARE", href: "https://twitter.com", icon: "share" },
+      { label: "RSS FEED", href: "/feed.xml", icon: "rss" }
+    ],
+    className,
+    ...props
+  }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        ref,
+        "data-slot": "colophon-card",
+        className: cn(
+          "border-2 border-edge-strong bg-surface-base font-mono text-content-primary p-6 shadow-hard-md relative overflow-hidden",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "colophon-card-watermark",
+              className: "absolute -right-2 -bottom-6 text-9xl font-black text-content-primary/5 select-none pointer-events-none font-serif",
+              "aria-hidden": "true",
+              children: sectionMarker
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col md:flex-row gap-6 items-start", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-slot": "colophon-card-marker",
+                className: "w-12 h-12 shrink-0 border-2 border-accent-primary bg-surface-raised flex items-center justify-center text-accent-primary font-black text-2xl shadow-hard-sm",
+                children: sectionMarker
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "h4",
+                    {
+                      "data-slot": "colophon-card-name",
+                      className: "text-sm font-black tracking-widest text-content-primary uppercase",
+                      children: authorName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "w-1.5 h-3 bg-accent-primary animate-pulse" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-slot": "colophon-card-role",
+                    className: "text-xs font-bold text-accent-secondary",
+                    children: authorRole
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  "data-slot": "colophon-card-bio",
+                  className: "font-sans text-sm text-content-secondary leading-relaxed max-w-2xl",
+                  children: bio
+                }
+              ),
+              links && links.length > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "colophon-card-links",
+                  className: "flex flex-wrap gap-2 pt-2",
+                  children: links.map((link) => {
+                    const Icon = link.icon ? ICON_MAP[link.icon] : ArrowUpRight;
+                    return /* @__PURE__ */ jsxs(
+                      "a",
+                      {
+                        href: link.href,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: "group inline-flex items-center gap-1.5 px-3 py-1.5 border border-edge-default bg-surface-raised text-xs font-bold text-content-primary hover:bg-surface-overlay hover:text-content-inverse hover:border-edge-strong transition-all shadow-hard-sm hover:-translate-x-0.5 hover:-translate-y-0.5",
+                        children: [
+                          /* @__PURE__ */ jsx(Icon, { size: 12, className: "group-hover:stroke-[2.5]" }),
+                          /* @__PURE__ */ jsx("span", { children: link.label })
+                        ]
+                      },
+                      link.label
+                    );
+                  })
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+ColophonCard.displayName = "ColophonCard";
+export {
+  ColophonCard
+};
+//# sourceMappingURL=ColophonCard.js.map

package/dist/components/ColophonCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/ColophonCard.tsx"],"sourcesContent":["import { ArrowUpRight, Code2, Globe, Rss, Share2 } from 'lucide-react';\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../lib/recipe';\n\nexport interface ColophonLink {\n  /** Display label for the link chip. */\n  label: string;\n  /** Destination URL. */\n  href: string;\n  /** Predefined glyph category icon. */\n  icon?: 'code' | 'globe' | 'share' | 'rss' | 'external';\n}\n\nexport interface ColophonCardProps extends HTMLAttributes<HTMLElement> {\n  /** Author name heading (default 'RYAN KELLY'). */\n  authorName?: string;\n  /** Technical role or title (default 'STAFF ENGINEER // DISTRIBUTED SYSTEMS & TOOLING'). */\n  authorRole?: string;\n  /** Biographic prose summary. */\n  bio?: string;\n  /** Oversized background watermark and emblem glyph (default '§'). */\n  sectionMarker?: string;\n  /** Array of social, source, or feed links. */\n  links?: ColophonLink[];\n}\n\nconst ICON_MAP = {\n  code: Code2,\n  globe: Globe,\n  share: Share2,\n  rss: Rss,\n  external: ArrowUpRight,\n};\n\n/**\n * Editorial author endnote colophon card.\n *\n * Implements a literary and technical signoff block placed at the end of essays\n * and articles. Features a prominent section mark (§), monospace bio block,\n * and brutalist action chips with hover lift.\n *\n * @example\n * ```tsx\n * <ColophonCard\n *   authorName=\"RYAN KELLY\"\n *   authorRole=\"STAFF ENGINEER\"\n *   bio=\"Distributed systems engineer building retro-brutalist tooling.\"\n *   links={[{ label: 'GITHUB', href: 'https://github.com/rtkelly13', icon: 'code' }]}\n * />\n * ```\n */\nexport const ColophonCard = forwardRef<HTMLElement, ColophonCardProps>(\n  function ColophonCard(\n    {\n      authorName = 'RYAN KELLY',\n      authorRole = 'STAFF ENGINEER // DISTRIBUTED SYSTEMS & TOOLING',\n      bio = 'I build high-throughput data engines, compiler extensions, and retro-brutalist developer tooling.',\n      sectionMarker = '§',\n      links = [\n        { label: 'GITHUB', href: 'https://github.com/rtkelly13', icon: 'code' },\n        { label: 'BLOG', href: 'https://ryankelly.dev', icon: 'globe' },\n        { label: 'SHARE', href: 'https://twitter.com', icon: 'share' },\n        { label: 'RSS FEED', href: '/feed.xml', icon: 'rss' },\n      ],\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <aside\n        ref={ref}\n        data-slot=\"colophon-card\"\n        className={cn(\n          'border-2 border-edge-strong bg-surface-base font-mono text-content-primary p-6 shadow-hard-md relative overflow-hidden',\n          className,\n        )}\n        {...props}\n      >\n        {/* Background oversized section watermark */}\n        <div\n          data-slot=\"colophon-card-watermark\"\n          className=\"absolute -right-2 -bottom-6 text-9xl font-black text-content-primary/5 select-none pointer-events-none font-serif\"\n          aria-hidden=\"true\"\n        >\n          {sectionMarker}\n        </div>\n\n        <div className=\"relative z-10 flex flex-col md:flex-row gap-6 items-start\">\n          {/* Section glyph marker box */}\n          <div\n            data-slot=\"colophon-card-marker\"\n            className=\"w-12 h-12 shrink-0 border-2 border-accent-primary bg-surface-raised flex items-center justify-center text-accent-primary font-black text-2xl shadow-hard-sm\"\n          >\n            {sectionMarker}\n          </div>\n\n          {/* Content & Bio block */}\n          <div className=\"flex-1 space-y-3\">\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center gap-2\">\n                <h4\n                  data-slot=\"colophon-card-name\"\n                  className=\"text-sm font-black tracking-widest text-content-primary uppercase\"\n                >\n                  {authorName}\n                </h4>\n                <span className=\"w-1.5 h-3 bg-accent-primary animate-pulse\" />\n              </div>\n              <div\n                data-slot=\"colophon-card-role\"\n                className=\"text-xs font-bold text-accent-secondary\"\n              >\n                {authorRole}\n              </div>\n            </div>\n\n            <p\n              data-slot=\"colophon-card-bio\"\n              className=\"font-sans text-sm text-content-secondary leading-relaxed max-w-2xl\"\n            >\n              {bio}\n            </p>\n\n            {/* Action Chips */}\n            {links && links.length > 0 && (\n              <div\n                data-slot=\"colophon-card-links\"\n                className=\"flex flex-wrap gap-2 pt-2\"\n              >\n                {links.map((link) => {\n                  const Icon = link.icon ? ICON_MAP[link.icon] : ArrowUpRight;\n                  return (\n                    <a\n                      key={link.label}\n                      href={link.href}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"group inline-flex items-center gap-1.5 px-3 py-1.5 border border-edge-default bg-surface-raised text-xs font-bold text-content-primary hover:bg-surface-overlay hover:text-content-inverse hover:border-edge-strong transition-all shadow-hard-sm hover:-translate-x-0.5 hover:-translate-y-0.5\"\n                    >\n                      <Icon size={12} className=\"group-hover:stroke-[2.5]\" />\n                      <span>{link.label}</span>\n                    </a>\n                  );\n                })}\n              </div>\n            )}\n          </div>\n        </div>\n      </aside>\n    );\n  },\n);\n\nColophonCard.displayName = 'ColophonCard';\n"],"mappings":";AAAA,SAAS,cAAc,OAAO,OAAO,KAAK,cAAc;AACxD,SAAS,kBAAuC;AAChD,SAAS,UAAU;AA8EX,cAoBM,YApBN;AAtDR,IAAM,WAAW;AAAA,EACf,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL,UAAU;AACZ;AAmBO,IAAM,eAAe;AAAA,EAC1B,SAASA,cACP;AAAA,IACE,aAAa;AAAA,IACb,aAAa;AAAA,IACb,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB,QAAQ;AAAA,MACN,EAAE,OAAO,UAAU,MAAM,gCAAgC,MAAM,OAAO;AAAA,MACtE,EAAE,OAAO,QAAQ,MAAM,yBAAyB,MAAM,QAAQ;AAAA,MAC9D,EAAE,OAAO,SAAS,MAAM,uBAAuB,MAAM,QAAQ;AAAA,MAC7D,EAAE,OAAO,YAAY,MAAM,aAAa,MAAM,MAAM;AAAA,IACtD;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAGJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cACV,eAAY;AAAA,cAEX;AAAA;AAAA,UACH;AAAA,UAEA,qBAAC,SAAI,WAAU,6DAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,WAAU;AAAA,gBAET;AAAA;AAAA,YACH;AAAA,YAGA,qBAAC,SAAI,WAAU,oBACb;AAAA,mCAAC,SAAI,WAAU,aACb;AAAA,qCAAC,SAAI,WAAU,2BACb;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,aAAU;AAAA,sBACV,WAAU;AAAA,sBAET;AAAA;AAAA,kBACH;AAAA,kBACA,oBAAC,UAAK,WAAU,6CAA4C;AAAA,mBAC9D;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,aAAU;AAAA,oBACV,WAAU;AAAA,oBAET;AAAA;AAAA,gBACH;AAAA,iBACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAU;AAAA,kBACV,WAAU;AAAA,kBAET;AAAA;AAAA,cACH;AAAA,cAGC,SAAS,MAAM,SAAS,KACvB;AAAA,gBAAC;AAAA;AAAA,kBACC,aAAU;AAAA,kBACV,WAAU;AAAA,kBAET,gBAAM,IAAI,CAAC,SAAS;AACnB,0BAAM,OAAO,KAAK,OAAO,SAAS,KAAK,IAAI,IAAI;AAC/C,2BACE;AAAA,sBAAC;AAAA;AAAA,wBAEC,MAAM,KAAK;AAAA,wBACX,QAAO;AAAA,wBACP,KAAI;AAAA,wBACJ,WAAU;AAAA,wBAEV;AAAA,8CAAC,QAAK,MAAM,IAAI,WAAU,4BAA2B;AAAA,0BACrD,oBAAC,UAAM,eAAK,OAAM;AAAA;AAAA;AAAA,sBAPb,KAAK;AAAA,oBAQZ;AAAA,kBAEJ,CAAC;AAAA;AAAA,cACH;AAAA,eAEJ;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;","names":["ColophonCard"]}