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

package/dist/components/BarChart.js

@@ -0,0 +1,288 @@
+"use client";
+
+// src/components/BarChart.tsx
+import { AxisBottom, AxisLeft } from "@visx/axis";
+import { GridColumns, GridRows } from "@visx/grid";
+import { Group } from "@visx/group";
+import { ParentSize } from "@visx/responsive";
+import { scaleBand, scaleLinear } from "@visx/scale";
+import { Bar } from "@visx/shape";
+import { forwardRef } from "react";
+import { cn } from "../lib/recipe.js";
+import { accentVar } from "../lib/theme.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_VERTICAL_MARGIN = { top: 28, right: 24, bottom: 44, left: 48 };
+var DEFAULT_HORIZONTAL_MARGIN = { top: 20, right: 48, bottom: 36, left: 80 };
+function BarChartCanvas({
+  data,
+  width = 500,
+  height = 260,
+  orientation = "vertical",
+  accent = "primary",
+  showGrid = true,
+  showValues = true,
+  emptyMessage = "NO DATA",
+  ariaLabel,
+  margin: customMargin,
+  onBarClick,
+  className,
+  svgRef,
+  ...props
+}) {
+  const isHorizontal = orientation === "horizontal";
+  const margin = customMargin ?? (isHorizontal ? DEFAULT_HORIZONTAL_MARGIN : DEFAULT_VERTICAL_MARGIN);
+  const xMax = Math.max(0, width - margin.left - margin.right);
+  const yMax = Math.max(0, height - margin.top - margin.bottom);
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        ref: svgRef,
+        "data-slot": "barchart",
+        width,
+        height,
+        viewBox: `0 0 ${width} ${height}`,
+        role: "img",
+        "aria-label": ariaLabel ?? "Empty chart",
+        className: cn(
+          "w-full max-w-full overflow-visible border-2 border-edge-strong bg-surface-base",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "text",
+          {
+            x: width / 2,
+            y: height / 2,
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            fill: "var(--ds-text-muted)",
+            fontFamily: "var(--ds-font-mono)",
+            fontSize: 12,
+            fontWeight: "bold",
+            children: [
+              "[ ",
+              emptyMessage,
+              " ]"
+            ]
+          }
+        )
+      }
+    );
+  }
+  const values = data.map((d) => d.value);
+  const maxValue = Math.max(1, ...values);
+  const categoryScale = scaleBand({
+    domain: data.map((d) => d.label),
+    range: isHorizontal ? [0, yMax] : [0, xMax],
+    padding: 0.3
+  });
+  const valueScale = scaleLinear({
+    domain: [0, maxValue],
+    range: isHorizontal ? [0, xMax] : [yMax, 0],
+    nice: true
+  });
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ref: svgRef,
+      "data-slot": "barchart",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      role: "img",
+      "aria-label": ariaLabel ?? `Bar chart with ${data.length} categories`,
+      className: cn(
+        "w-full max-w-full overflow-visible border-2 border-edge-strong bg-surface-base",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxs(Group, { left: margin.left, top: margin.top, children: [
+        showGrid && (isHorizontal ? /* @__PURE__ */ jsx(
+          GridColumns,
+          {
+            scale: valueScale,
+            height: yMax,
+            stroke: "var(--ds-border-subtle)",
+            strokeWidth: 1
+          }
+        ) : /* @__PURE__ */ jsx(
+          GridRows,
+          {
+            scale: valueScale,
+            width: xMax,
+            stroke: "var(--ds-border-subtle)",
+            strokeWidth: 1
+          }
+        )),
+        data.map((d, index) => {
+          const barAccent = d.accent ?? accent;
+          const fillColor = accentVar(barAccent);
+          if (isHorizontal) {
+            const barY2 = categoryScale(d.label) ?? 0;
+            const barHeight2 = categoryScale.bandwidth();
+            const barWidth2 = Math.max(0, valueScale(d.value));
+            return /* @__PURE__ */ jsxs(Group, { children: [
+              /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  x: 0,
+                  y: barY2,
+                  width: barWidth2,
+                  height: barHeight2,
+                  fill: fillColor,
+                  stroke: "var(--ds-border-strong)",
+                  strokeWidth: 2,
+                  className: "cursor-pointer hover:opacity-80",
+                  onClick: () => onBarClick?.(d, index)
+                }
+              ),
+              showValues && /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: barWidth2 + 6,
+                  y: barY2 + barHeight2 / 2,
+                  dominantBaseline: "central",
+                  fill: "var(--ds-text-primary)",
+                  fontFamily: "var(--ds-font-mono)",
+                  fontSize: 11,
+                  fontWeight: "bold",
+                  children: d.value
+                }
+              )
+            ] }, `bar-h-${d.label}-${index}`);
+          }
+          const barX = categoryScale(d.label) ?? 0;
+          const barWidth = categoryScale.bandwidth();
+          const barHeight = Math.max(0, yMax - (valueScale(d.value) ?? 0));
+          const barY = yMax - barHeight;
+          return /* @__PURE__ */ jsxs(Group, { children: [
+            /* @__PURE__ */ jsx(
+              Bar,
+              {
+                x: barX,
+                y: barY,
+                width: barWidth,
+                height: barHeight,
+                fill: fillColor,
+                stroke: "var(--ds-border-strong)",
+                strokeWidth: 2,
+                className: "cursor-pointer hover:opacity-80",
+                onClick: () => onBarClick?.(d, index)
+              }
+            ),
+            showValues && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: barX + barWidth / 2,
+                y: barY - 6,
+                textAnchor: "middle",
+                fill: "var(--ds-text-primary)",
+                fontFamily: "var(--ds-font-mono)",
+                fontSize: 11,
+                fontWeight: "bold",
+                children: d.value
+              }
+            )
+          ] }, `bar-v-${d.label}-${index}`);
+        }),
+        isHorizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            AxisLeft,
+            {
+              scale: categoryScale,
+              stroke: "var(--ds-border-strong)",
+              strokeWidth: 2,
+              tickStroke: "var(--ds-border-strong)",
+              tickLength: 4,
+              tickLabelProps: {
+                fill: "var(--ds-text-secondary)",
+                fontFamily: "var(--ds-font-mono)",
+                fontSize: 11,
+                textAnchor: "end",
+                dominantBaseline: "central",
+                dx: "-0.25em"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AxisBottom,
+            {
+              top: yMax,
+              scale: valueScale,
+              stroke: "var(--ds-border-strong)",
+              strokeWidth: 2,
+              tickStroke: "var(--ds-border-strong)",
+              tickLength: 4,
+              tickLabelProps: {
+                fill: "var(--ds-text-secondary)",
+                fontFamily: "var(--ds-font-mono)",
+                fontSize: 10,
+                textAnchor: "middle",
+                dominantBaseline: "hanging",
+                dy: "0.25em"
+              }
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            AxisBottom,
+            {
+              top: yMax,
+              scale: categoryScale,
+              stroke: "var(--ds-border-strong)",
+              strokeWidth: 2,
+              tickStroke: "var(--ds-border-strong)",
+              tickLength: 4,
+              tickLabelProps: {
+                fill: "var(--ds-text-secondary)",
+                fontFamily: "var(--ds-font-mono)",
+                fontSize: 11,
+                textAnchor: "middle",
+                dominantBaseline: "hanging",
+                dy: "0.25em"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AxisLeft,
+            {
+              scale: valueScale,
+              stroke: "var(--ds-border-strong)",
+              strokeWidth: 2,
+              tickStroke: "var(--ds-border-strong)",
+              tickLength: 4,
+              tickLabelProps: {
+                fill: "var(--ds-text-secondary)",
+                fontFamily: "var(--ds-font-mono)",
+                fontSize: 10,
+                textAnchor: "end",
+                dominantBaseline: "central",
+                dx: "-0.25em"
+              }
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+var BarChart = forwardRef(function BarChart2({ responsive = false, ...props }, ref) {
+  if (responsive) {
+    return /* @__PURE__ */ jsx(ParentSize, { className: cn("w-full", props.className), children: ({ width: parentWidth }) => /* @__PURE__ */ jsx(
+      BarChartCanvas,
+      {
+        ...props,
+        width: parentWidth > 0 ? parentWidth : props.width ?? 500,
+        svgRef: ref
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(BarChartCanvas, { ...props, svgRef: ref });
+});
+BarChart.displayName = "BarChart";
+export {
+  BarChart,
+  ParentSize as ResponsiveChartContainer
+};
+//# sourceMappingURL=BarChart.js.map

package/dist/components/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/BarChart.tsx"],"sourcesContent":["'use client';\n\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport { GridColumns, GridRows } from '@visx/grid';\nimport { Group } from '@visx/group';\nimport { ParentSize } from '@visx/responsive';\nimport { scaleBand, scaleLinear } from '@visx/scale';\nimport { Bar } from '@visx/shape';\nimport { type ForwardedRef, forwardRef, type SVGProps } from 'react';\nimport { cn } from '../lib/recipe';\nimport { type AccentToken, accentVar } from '../lib/theme';\n\nexport { ParentSize as ResponsiveChartContainer };\n\nexport interface BarChartDatum {\n  label: string;\n  value: number;\n  accent?: AccentToken;\n}\n\nexport interface BarChartProps extends Omit<SVGProps<SVGSVGElement>, 'data'> {\n  /** Categorical data points with labels and numeric values. */\n  data: BarChartDatum[];\n  /** SVG coordinate width (default 500). */\n  width?: number;\n  /** SVG coordinate height (default 260). */\n  height?: number;\n  /** Whether chart width dynamically tracks parent container width (default false). */\n  responsive?: boolean;\n  /** Bar layout orientation (default 'vertical'). */\n  orientation?: 'vertical' | 'horizontal';\n  /** Default accent token applied to bars without their own accent (default 'primary'). */\n  accent?: AccentToken;\n  /** Whether to render background coordinate grid lines (default true). */\n  showGrid?: boolean;\n  /** Whether to render numeric value labels beside or above bars (default true). */\n  showValues?: boolean;\n  /** Custom fallback message when dataset is empty (default 'NO DATA'). */\n  emptyMessage?: string;\n  /** Screen reader accessibility label. */\n  ariaLabel?: string;\n  /** Inset padding between outer canvas and plotting coordinates. */\n  margin?: { top: number; right: number; bottom: number; left: number };\n  /** Optional click callback for interactive bar inspection. */\n  onBarClick?: (datum: BarChartDatum, index: number) => void;\n}\n\nconst DEFAULT_VERTICAL_MARGIN = { top: 28, right: 24, bottom: 44, left: 48 };\nconst DEFAULT_HORIZONTAL_MARGIN = { top: 20, right: 48, bottom: 36, left: 80 };\n\ninterface InternalCanvasProps extends Omit<BarChartProps, 'responsive'> {\n  svgRef?: ForwardedRef<SVGSVGElement>;\n}\n\nfunction BarChartCanvas({\n  data,\n  width = 500,\n  height = 260,\n  orientation = 'vertical',\n  accent = 'primary',\n  showGrid = true,\n  showValues = true,\n  emptyMessage = 'NO DATA',\n  ariaLabel,\n  margin: customMargin,\n  onBarClick,\n  className,\n  svgRef,\n  ...props\n}: InternalCanvasProps) {\n  const isHorizontal = orientation === 'horizontal';\n  const margin =\n    customMargin ?? (isHorizontal ? DEFAULT_HORIZONTAL_MARGIN : DEFAULT_VERTICAL_MARGIN);\n\n  const xMax = Math.max(0, width - margin.left - margin.right);\n  const yMax = Math.max(0, height - margin.top - margin.bottom);\n\n  if (!data || data.length === 0) {\n    return (\n      <svg\n        ref={svgRef}\n        data-slot=\"barchart\"\n        width={width}\n        height={height}\n        viewBox={`0 0 ${width} ${height}`}\n        role=\"img\"\n        aria-label={ariaLabel ?? 'Empty chart'}\n        className={cn(\n          'w-full max-w-full overflow-visible border-2 border-edge-strong bg-surface-base',\n          className,\n        )}\n        {...props}\n      >\n        <text\n          x={width / 2}\n          y={height / 2}\n          textAnchor=\"middle\"\n          dominantBaseline=\"central\"\n          fill=\"var(--ds-text-muted)\"\n          fontFamily=\"var(--ds-font-mono)\"\n          fontSize={12}\n          fontWeight=\"bold\"\n        >\n          [ {emptyMessage} ]\n        </text>\n      </svg>\n    );\n  }\n\n  const values = data.map((d) => d.value);\n  const maxValue = Math.max(1, ...values);\n\n  const categoryScale = scaleBand<string>({\n    domain: data.map((d) => d.label),\n    range: isHorizontal ? [0, yMax] : [0, xMax],\n    padding: 0.3,\n  });\n\n  const valueScale = scaleLinear<number>({\n    domain: [0, maxValue],\n    range: isHorizontal ? [0, xMax] : [yMax, 0],\n    nice: true,\n  });\n\n  return (\n    <svg\n      ref={svgRef}\n      data-slot=\"barchart\"\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      role=\"img\"\n      aria-label={ariaLabel ?? `Bar chart with ${data.length} categories`}\n      className={cn(\n        'w-full max-w-full overflow-visible border-2 border-edge-strong bg-surface-base',\n        className,\n      )}\n      {...props}\n    >\n      <Group left={margin.left} top={margin.top}>\n        {showGrid &&\n          (isHorizontal ? (\n            <GridColumns\n              scale={valueScale}\n              height={yMax}\n              stroke=\"var(--ds-border-subtle)\"\n              strokeWidth={1}\n            />\n          ) : (\n            <GridRows\n              scale={valueScale}\n              width={xMax}\n              stroke=\"var(--ds-border-subtle)\"\n              strokeWidth={1}\n            />\n          ))}\n\n        {data.map((d, index) => {\n          const barAccent = d.accent ?? accent;\n          const fillColor = accentVar(barAccent);\n\n          if (isHorizontal) {\n            const barY = categoryScale(d.label) ?? 0;\n            const barHeight = categoryScale.bandwidth();\n            const barWidth = Math.max(0, valueScale(d.value));\n\n            return (\n              <Group key={`bar-h-${d.label}-${index}`}>\n                <Bar\n                  x={0}\n                  y={barY}\n                  width={barWidth}\n                  height={barHeight}\n                  fill={fillColor}\n                  stroke=\"var(--ds-border-strong)\"\n                  strokeWidth={2}\n                  className=\"cursor-pointer hover:opacity-80\"\n                  onClick={() => onBarClick?.(d, index)}\n                />\n                {showValues && (\n                  <text\n                    x={barWidth + 6}\n                    y={barY + barHeight / 2}\n                    dominantBaseline=\"central\"\n                    fill=\"var(--ds-text-primary)\"\n                    fontFamily=\"var(--ds-font-mono)\"\n                    fontSize={11}\n                    fontWeight=\"bold\"\n                  >\n                    {d.value}\n                  </text>\n                )}\n              </Group>\n            );\n          }\n\n          const barX = categoryScale(d.label) ?? 0;\n          const barWidth = categoryScale.bandwidth();\n          const barHeight = Math.max(0, yMax - (valueScale(d.value) ?? 0));\n          const barY = yMax - barHeight;\n\n          return (\n            <Group key={`bar-v-${d.label}-${index}`}>\n              <Bar\n                x={barX}\n                y={barY}\n                width={barWidth}\n                height={barHeight}\n                fill={fillColor}\n                stroke=\"var(--ds-border-strong)\"\n                strokeWidth={2}\n                className=\"cursor-pointer hover:opacity-80\"\n                onClick={() => onBarClick?.(d, index)}\n              />\n              {showValues && (\n                <text\n                  x={barX + barWidth / 2}\n                  y={barY - 6}\n                  textAnchor=\"middle\"\n                  fill=\"var(--ds-text-primary)\"\n                  fontFamily=\"var(--ds-font-mono)\"\n                  fontSize={11}\n                  fontWeight=\"bold\"\n                >\n                  {d.value}\n                </text>\n              )}\n            </Group>\n          );\n        })}\n\n        {isHorizontal ? (\n          <>\n            <AxisLeft\n              scale={categoryScale}\n              stroke=\"var(--ds-border-strong)\"\n              strokeWidth={2}\n              tickStroke=\"var(--ds-border-strong)\"\n              tickLength={4}\n              tickLabelProps={{\n                fill: 'var(--ds-text-secondary)',\n                fontFamily: 'var(--ds-font-mono)',\n                fontSize: 11,\n                textAnchor: 'end',\n                dominantBaseline: 'central',\n                dx: '-0.25em',\n              }}\n            />\n            <AxisBottom\n              top={yMax}\n              scale={valueScale}\n              stroke=\"var(--ds-border-strong)\"\n              strokeWidth={2}\n              tickStroke=\"var(--ds-border-strong)\"\n              tickLength={4}\n              tickLabelProps={{\n                fill: 'var(--ds-text-secondary)',\n                fontFamily: 'var(--ds-font-mono)',\n                fontSize: 10,\n                textAnchor: 'middle',\n                dominantBaseline: 'hanging',\n                dy: '0.25em',\n              }}\n            />\n          </>\n        ) : (\n          <>\n            <AxisBottom\n              top={yMax}\n              scale={categoryScale}\n              stroke=\"var(--ds-border-strong)\"\n              strokeWidth={2}\n              tickStroke=\"var(--ds-border-strong)\"\n              tickLength={4}\n              tickLabelProps={{\n                fill: 'var(--ds-text-secondary)',\n                fontFamily: 'var(--ds-font-mono)',\n                fontSize: 11,\n                textAnchor: 'middle',\n                dominantBaseline: 'hanging',\n                dy: '0.25em',\n              }}\n            />\n            <AxisLeft\n              scale={valueScale}\n              stroke=\"var(--ds-border-strong)\"\n              strokeWidth={2}\n              tickStroke=\"var(--ds-border-strong)\"\n              tickLength={4}\n              tickLabelProps={{\n                fill: 'var(--ds-text-secondary)',\n                fontFamily: 'var(--ds-font-mono)',\n                fontSize: 10,\n                textAnchor: 'end',\n                dominantBaseline: 'central',\n                dx: '-0.25em',\n              }}\n            />\n          </>\n        )}\n      </Group>\n    </svg>\n  );\n}\n\n/**\n * Brutalist categorical bar chart built with Visx primitives.\n *\n * Emits high-contrast, deterministic SVG geometry with 2px borders, theme-driven fills,\n * and monospace axis coordinates. Supports vertical and horizontal layouts and\n * responds dynamically to theme ladder swaps without canvas re-renders.\n */\nexport const BarChart = forwardRef<SVGSVGElement, BarChartProps>(function BarChart(\n  { responsive = false, ...props },\n  ref,\n) {\n  if (responsive) {\n    return (\n      <ParentSize className={cn('w-full', props.className)}>\n        {({ width: parentWidth }) => (\n          <BarChartCanvas\n            {...props}\n            width={parentWidth > 0 ? parentWidth : (props.width ?? 500)}\n            svgRef={ref}\n          />\n        )}\n      </ParentSize>\n    );\n  }\n\n  return <BarChartCanvas {...props} svgRef={ref} />;\n});\n\nBarChart.displayName = 'BarChart';\n"],"mappings":"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","names":["barY","barHeight","barWidth","BarChart"]}

package/dist/components/BracketText.js

@@ -0,0 +1,23 @@
+// src/components/BracketText.tsx
+import { cn } from "../lib/recipe.js";
+import { accentTextClass } from "../lib/accentClasses.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BracketText({
+  children,
+  accent,
+  className = "",
+  ...props
+}) {
+  const accentClass = accent ? accentTextClass(accent) : "";
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "bracket-text", className: cn(accentClass, className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "[" }),
+    " ",
+    children,
+    " ",
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "]" })
+  ] });
+}
+export {
+  BracketText
+};
+//# sourceMappingURL=BracketText.js.map

package/dist/components/BracketText.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/BracketText.tsx"],"sourcesContent":["import type { ReactNode, HTMLAttributes } from 'react';\nimport type { AccentToken } from '../lib/theme';\nimport { cn } from '../lib/recipe';\nimport { accentTextClass } from '../lib/accentClasses';\n\nexport interface BracketTextProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode;\n  /**\n   * Semantic emphasis. Roles only — `'white'` was still accepted here after\n   * #138 removed the hue vocabulary from the component API, because the union\n   * named it explicitly and the class map was typed `Record<string, string>`.\n   * An appearance name in a component API is the defect ADR 0001 exists to\n   * prevent; omit `accent` for the default ink.\n   */\n  accent?: AccentToken;\n  className?: string;\n}\n\nexport function BracketText({\n  children,\n  accent,\n  className = '',\n  ...props\n}: BracketTextProps) {\n  // No per-render object: the map lives in `lib/accentClasses`, written once.\n  const accentClass = accent ? accentTextClass(accent) : '';\n\n  return (\n    <span data-slot=\"bracket-text\" className={cn(accentClass, className)} {...props}>\n      <span aria-hidden=\"true\">\n        [\n      </span>{' '}\n      {children}{' '}\n      <span aria-hidden=\"true\">\n        ]\n      </span>\n    </span>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAyB5B,SACE,KADF;AAVG,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAqB;AAEnB,QAAM,cAAc,SAAS,gBAAgB,MAAM,IAAI;AAEvD,SACE,qBAAC,UAAK,aAAU,gBAAe,WAAW,GAAG,aAAa,SAAS,GAAI,GAAG,OACxE;AAAA,wBAAC,UAAK,eAAY,QAAO,eAEzB;AAAA,IAAQ;AAAA,IACP;AAAA,IAAU;AAAA,IACX,oBAAC,UAAK,eAAY,QAAO,eAEzB;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/BulletChart.js

@@ -0,0 +1,50 @@
+// src/components/BulletChart.tsx
+import { Bullet as MicroBullet } from "@microcharts/react/bullet";
+import { forwardRef } from "react";
+import { cn } from "../lib/recipe.js";
+import { accentVar } from "../lib/theme.js";
+import { jsx } from "react/jsx-runtime";
+var BulletChart = forwardRef(function BulletChart2({
+  value,
+  target,
+  bands,
+  accent = "primary",
+  width = 140,
+  height = 20,
+  title,
+  summary,
+  label = "none",
+  className,
+  ...props
+}, ref) {
+  const barColor = accentVar(accent);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "bullet-chart",
+      className: cn("inline-flex items-center font-mono", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        MicroBullet,
+        {
+          value,
+          target,
+          bands,
+          color: barColor,
+          width,
+          height,
+          title,
+          summary,
+          label,
+          className: "overflow-visible"
+        }
+      )
+    }
+  );
+});
+BulletChart.displayName = "BulletChart";
+export {
+  BulletChart
+};
+//# sourceMappingURL=BulletChart.js.map

package/dist/components/BulletChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/BulletChart.tsx"],"sourcesContent":["import { Bullet as MicroBullet } from '@microcharts/react/bullet';\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '../lib/recipe';\nimport { type AccentToken, accentVar } from '../lib/theme';\n\nexport interface BulletChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> {\n  /** Current actual metric value. */\n  value: number;\n  /** Target or benchmark value to compare against. */\n  target: number;\n  /** Qualitative comparative range thresholds (e.g. [40, 70, 100]). */\n  bands?: number[];\n  /** Accent role token controlling the main value bar color (default 'primary'). */\n  accent?: AccentToken;\n  /** Display width in pixels (default 140). */\n  width?: number;\n  /** Display height in pixels (default 20). */\n  height?: number;\n  /** Accessible chart title. */\n  title?: string;\n  /** Accessible prose summary. */\n  summary?: string;\n  /** How to format numeric labels ('none' | 'value' | 'both'). */\n  label?: 'none' | 'value' | 'both';\n}\n\n/**\n * High-density KPI benchmark comparison indicator.\n *\n * Wraps @microcharts/react Bullet to render a qualitative target-versus-actual\n * comparison. Sits cleanly inside StatCards, table cells, or dashboard summaries\n * with zero client JS runtime requirements and theme ladder token awareness.\n */\nexport const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>(function BulletChart(\n  {\n    value,\n    target,\n    bands,\n    accent = 'primary',\n    width = 140,\n    height = 20,\n    title,\n    summary,\n    label = 'none',\n    className,\n    ...props\n  },\n  ref,\n) {\n  const barColor = accentVar(accent);\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"bullet-chart\"\n      className={cn('inline-flex items-center font-mono', className)}\n      {...props}\n    >\n      <MicroBullet\n        value={value}\n        target={target}\n        bands={bands}\n        color={barColor}\n        width={width}\n        height={height}\n        title={title}\n        summary={summary}\n        label={label}\n        className=\"overflow-visible\"\n      />\n    </div>\n  );\n});\n\nBulletChart.displayName = 'BulletChart';\n"],"mappings":";AAAA,SAAS,UAAU,mBAAmB;AACtC,SAAS,kBAAuC;AAChD,SAAS,UAAU;AACnB,SAA2B,iBAAiB;AAuDtC;AAzBC,IAAM,cAAc,WAA6C,SAASA,aAC/E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,WAAW,UAAU,MAAM;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAU;AAAA;AAAA,MACZ;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,YAAY,cAAc;","names":["BulletChart"]}

package/dist/components/Button.js

@@ -0,0 +1,130 @@
+"use client";
+
+// src/components/Button.tsx
+import { forwardRef } from "react";
+import { recipe } from "../lib/recipe.js";
+import { Spinner } from "./Spinner.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PRESS = "shadow-hard-md not-disabled:not-aria-disabled:hover:shadow-hard-lg not-disabled:not-aria-disabled:active:translate-x-1 not-disabled:not-aria-disabled:active:translate-y-1 not-disabled:not-aria-disabled:active:shadow-none";
+var DISABLED = "disabled:cursor-not-allowed disabled:border-edge-subtle disabled:bg-surface-sunken disabled:text-content-muted disabled:shadow-none";
+var PRIMARY = `bg-accent-primary text-content-inverse border-edge-strong ${PRESS}`;
+var SECONDARY = `bg-accent-secondary text-content-inverse border-edge-strong ${PRESS}`;
+var TERTIARY = `bg-accent-tertiary text-content-inverse border-edge-strong ${PRESS}`;
+var INVERSE = `bg-content-primary text-content-inverse border-content-primary ${PRESS}`;
+var button = recipe({
+  base: `font-mono font-bold uppercase border-2 transition-all duration-200 ${DISABLED}`,
+  variants: {
+    size: {
+      sm: "px-4 py-2 text-sm",
+      md: "px-6 py-3 text-base",
+      lg: "px-8 py-4 text-lg"
+    },
+    variant: {
+      primary: PRIMARY,
+      secondary: SECONDARY,
+      tertiary: TERTIARY,
+      inverse: INVERSE,
+      default: PRIMARY
+    },
+    /**
+     * An anchor is not `inline-flex` by default and carries an underline, so the
+     * two forms would otherwise lay out and read differently from identical
+     * props. A variant rather than a prepended string so a caller's own
+     * `className` still resolves against it.
+     */
+    asLink: {
+      true: "inline-flex items-center justify-center no-underline"
+    },
+    /**
+     * Held in its press: the `:active` offset with the shadow gone, over the
+     * variant's own fill. Enabled is raised, disabled is sunken and muted, and
+     * pending is the one in between — this button was pressed and has not let
+     * go. `relative` is the box the spinner is centred in.
+     */
+    pending: {
+      true: "relative cursor-progress translate-x-1 translate-y-1 shadow-none"
+    }
+  },
+  defaultVariants: {
+    variant: "tertiary",
+    size: "md"
+  }
+});
+var Button = forwardRef(
+  function Button2(props, ref) {
+    const {
+      children,
+      variant = "tertiary",
+      size = "md",
+      bracketed = false,
+      className,
+      ...rest
+    } = props;
+    const label = bracketed ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "select-none", "aria-hidden": "true", children: "[" }),
+      /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-2", children }),
+      /* @__PURE__ */ jsx("span", { className: "select-none", "aria-hidden": "true", children: "]" })
+    ] }) : /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center gap-2", children });
+    if (typeof props.href === "string") {
+      const {
+        pending: _pending,
+        pendingLabel: _pendingLabel,
+        ...anchorProps
+      } = rest;
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          "data-slot": "button",
+          ref,
+          ...anchorProps,
+          rel: anchorProps.rel ?? (anchorProps.target === "_blank" ? "noopener noreferrer" : void 0),
+          className: button({ variant, size, asLink: true, class: className }),
+          children: label
+        }
+      );
+    }
+    const {
+      pending,
+      pendingLabel = "Working",
+      ...buttonProps
+    } = rest;
+    const isPending = pending === true && !buttonProps.disabled;
+    const element = /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-slot": "button",
+        ref,
+        ...buttonProps,
+        "aria-disabled": isPending ? true : buttonProps["aria-disabled"],
+        onClick: isPending ? preventActivation : buttonProps.onClick,
+        "data-pending": isPending ? "" : void 0,
+        className: button({ variant, size, pending: isPending, class: className }),
+        children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "inline-flex opacity-0", children: label }),
+          /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              size: size === "sm" ? "sm" : "md",
+              accent: "current",
+              role: void 0,
+              "aria-hidden": "true",
+              className: "absolute inset-0"
+            }
+          )
+        ] }) : label
+      }
+    );
+    if (pending === void 0) return element;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      element,
+      /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", "data-slot": "button-status", children: isPending ? pendingLabel : "" })
+    ] });
+  }
+);
+function preventActivation(event) {
+  event.preventDefault();
+}
+export {
+  Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport type { Ref } from 'react';\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  DetailedHTMLProps,\n  MouseEvent,\n  ReactNode,\n} from 'react';\nimport { recipe } from '../lib/recipe';\nimport { Spinner } from './Spinner';\n\ninterface ButtonOwnProps {\n  /**\n   * The label. Written in caps at the call site rather than upper-cased in\n   * CSS, so a screen reader is given the words rather than the shouting, and\n   * so an acronym that is already caps does not read as emphasis.\n   */\n  children: ReactNode;\n  /**\n   * `primary`, `secondary` and `tertiary` use the corresponding accent role,\n   * which changes with the theme level. `inverse` uses the primary content\n   * role as its background for maximum contrast. `default` is identical to\n   * `primary`. Omitted, the variant is `tertiary`.\n   */\n  variant?: ButtonVariant;\n  /**\n   * Padding and type scale, not a semantic weight. `md` is the default and the\n   * one to reach for; `sm` is for dense rows such as a table's row actions,\n   * and `lg` for a page's single primary action. Hit area is the constraint\n   * that decides — `sm` is still 44px tall at the `web` Medium.\n   */\n  size?: 'sm' | 'md' | 'lg';\n  /**\n   * Wraps the label in `[ ]`. The brutalist cue for \"this one does something\"\n   * — worth it for a form's submit or a destructive confirm, noise on every\n   * button in a toolbar. It is punctuation in the label, not a border.\n   */\n  bracketed?: boolean;\n  /**\n   * Merged into the recipe's own classes. Reach for it to place the button —\n   * `w-full`, a grid slot — rather than to restyle it; a colour set here is\n   * what `pnpm check:tokens` exists to find.\n   */\n  className?: string;\n}\n\n/**\n * The accents a filled Button may take.\n *\n * Narrower than `AccentToken` on purpose: `quiet` is missing because\n * `check:contrast` gates `text.inverse` against `accent.primary`, `secondary`\n * and `tertiary` only. A quiet fill with inverse text on it is not measured, so\n * it is not offered.\n */\nexport type ButtonVariant =\n    | 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'inverse'\n    | 'default';\n\n/**\n * The `<button>` form. `href?: never` is what makes the union below\n * discriminate: without it TypeScript would accept `href` here and silently\n * drop it onto an element that ignores it.\n */\nexport type ButtonElementProps = ButtonOwnProps &\n  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {\n    href?: never;\n    /**\n     * The request this button started is in flight. Reach for it instead of\n     * `disabled` while a submit is being sent.\n     *\n     * `disabled` removes a focused button from the tab order and drops focus\n     * to `<body>`, so a keyboard user is thrown back to the top of the page\n     * at the moment they need to hear what happened. A pending button keeps\n     * focus and its tab stop, reports `aria-disabled=\"true\"` instead of the\n     * `disabled` attribute, and ignores activation: a click, Enter, Space,\n     * or Enter in one of its form's fields does not run `onClick` and does\n     * not submit the form again.\n     *\n     * It shows a spinner in place of the label, over the label's own box, so\n     * the button keeps its width; the label stays in the accessibility tree,\n     * so the accessible name does not change while it has focus. The fill is\n     * kept and the button sits sunk into its press — the same offset and no\n     * shadow as `:active` — which is distinct from the sunken, muted\n     * `disabled` treatment.\n     *\n     * Pass it from the first render — `pending={saving}`, not\n     * `pending={saving || undefined}` — so the live region that announces\n     * `pendingLabel` is in the page before it has anything to say. `disabled`\n     * wins over `pending` when both are set.\n     */\n    pending?: boolean;\n    /**\n     * What is being waited for, as a screen reader hears it when `pending`\n     * turns on — \"Signing in\", not \"Loading\". It is written into a visually\n     * hidden `role=\"status\"` region beside the button, which exists whenever\n     * `pending` is passed at all and is empty until it is `true`.\n     */\n    pendingLabel?: string;\n  };\n\n/** The `<a>` form. Passing `href` selects it; there is no `as` prop to remember. */\nexport type ButtonLinkProps = ButtonOwnProps &\n  DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & {\n    /**\n     * Where it navigates — and the discriminant. Supplying it renders an `<a>`\n     * wearing the button's styling, which is what a keyboard user, a screen\n     * reader and a middle click all need from something that navigates. Omit\n     * it for anything that acts on the current page.\n     */\n    href: string;\n    /**\n     * Not offered on the anchor form. A link's work is the browser's\n     * navigation, which the page cannot hold open, and `aria-disabled` on a\n     * link is a link that still navigates. A control that starts a request\n     * is a `<button>`.\n     */\n    pending?: never;\n    /** Not offered on the anchor form; see `pending`. */\n    pendingLabel?: never;\n  };\n\nexport type ButtonProps = ButtonElementProps | ButtonLinkProps;\n\n/**\n * The press affordance — offset shadow that collapses as the control moves into\n * it. Shared rather than repeated so the four accents cannot drift apart.\n *\n * Hover and press are gated on `not-disabled:` so a disabled button does not\n * lift under the pointer or sink when clicked: it would be promising an action\n * it will not take. `not-disabled` rather than `enabled`, because `:enabled`\n * matches form elements only and the anchor form would lose its hover.\n *\n * `not-aria-disabled:` is the same gate for a pending button, which is\n * `aria-disabled` rather than `:disabled` so that it keeps focus. Spelled out\n * in full rather than built from a constant: Tailwind reads the source text,\n * and a template literal emits no CSS.\n */\nconst PRESS =\n  'shadow-hard-md not-disabled:not-aria-disabled:hover:shadow-hard-lg ' +\n  'not-disabled:not-aria-disabled:active:translate-x-1 ' +\n  'not-disabled:not-aria-disabled:active:translate-y-1 ' +\n  'not-disabled:not-aria-disabled:active:shadow-none';\n\n/**\n * The disabled treatment, the one `Select`'s trigger and the text fields wear:\n * a sunken ground, the subtle edge, muted ink and no shadow. Before #252 a\n * disabled button rendered exactly like an enabled one — it looked pressable\n * and did nothing. A request in flight is `pending`, not this. `disabled:`\n * matches the `<button>` form only, which is right: an anchor cannot be\n * disabled.\n */\nconst DISABLED =\n  'disabled:cursor-not-allowed disabled:border-edge-subtle disabled:bg-surface-sunken ' +\n  'disabled:text-content-muted disabled:shadow-none';\n\n/**\n * One constant per rendered form, aliased by every name that resolves to it.\n *\n * `default` and `primary` share the same constant and render identically.\n */\nconst PRIMARY = `bg-accent-primary text-content-inverse border-edge-strong ${PRESS}`;\nconst SECONDARY = `bg-accent-secondary text-content-inverse border-edge-strong ${PRESS}`;\nconst TERTIARY = `bg-accent-tertiary text-content-inverse border-edge-strong ${PRESS}`;\nconst INVERSE = `bg-content-primary text-content-inverse border-content-primary ${PRESS}`;\n\nconst button = recipe({\n  base: `font-mono font-bold uppercase border-2 transition-all duration-200 ${DISABLED}`,\n  variants: {\n    size: {\n      sm: 'px-4 py-2 text-sm',\n      md: 'px-6 py-3 text-base',\n      lg: 'px-8 py-4 text-lg',\n    },\n    variant: {\n      primary: PRIMARY,\n      secondary: SECONDARY,\n      tertiary: TERTIARY,\n      inverse: INVERSE,\n      default: PRIMARY,\n    },\n    /**\n     * An anchor is not `inline-flex` by default and carries an underline, so the\n     * two forms would otherwise lay out and read differently from identical\n     * props. A variant rather than a prepended string so a caller's own\n     * `className` still resolves against it.\n     */\n    asLink: {\n      true: 'inline-flex items-center justify-center no-underline',\n    },\n    /**\n     * Held in its press: the `:active` offset with the shadow gone, over the\n     * variant's own fill. Enabled is raised, disabled is sunken and muted, and\n     * pending is the one in between — this button was pressed and has not let\n     * go. `relative` is the box the spinner is centred in.\n     */\n    pending: {\n      true: 'relative cursor-progress translate-x-1 translate-y-1 shadow-none',\n    },\n  },\n  defaultVariants: {\n    variant: 'tertiary',\n    size: 'md',\n  },\n});\n\n/**\n * A button, or a link that looks like one.\n *\n * The distinction is not cosmetic and is not the caller's styling preference:\n * a control that *navigates* must be an `<a>`, or it loses middle-click,\n * open-in-new-tab, the status-bar URL preview, and its announcement as a link\n * to a screen reader. Marketing CTAs are overwhelmingly navigation — \"Get\n * started\" goes somewhere — so a button-only component pushes every landing\n * page into either nesting an anchor inside a button (invalid HTML) or\n * re-styling the whole thing by hand.\n *\n * Passing `href` selects the anchor form, and TypeScript then offers anchor\n * attributes (`target`, `rel`, `download`) and withdraws button-only ones\n * (`disabled`, `type`) — the latter being the point, since `disabled` does\n * nothing whatsoever on an anchor.\n *\n * ```tsx\n * <Button onClick={save}>SAVE</Button>\n * <Button href=\"/pricing\" variant=\"tertiary\" bracketed size=\"lg\">SEE PRICING</Button>\n * ```\n */\n/**\n * Forwards its ref to whichever element it renders.\n *\n * `ButtonProps` is a union, so the ref's type is the union of both targets —\n * `HTMLButtonElement | HTMLAnchorElement`. A caller who knows which form they\n * asked for can narrow it; one who does not is told the truth, which is that it\n * depends on `href`.\n *\n * This is what `<Tooltip.Trigger render={<Button />} />` needs: Base UI's\n * composition merges props *and a ref* onto the element it is given, and a\n * component that drops the ref silently breaks positioning, focus return and\n * outside-click detection in every primitive that wraps it.\n */\nexport const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n  function Button(props, ref) {\n  const {\n    children,\n    variant = 'tertiary',\n    size = 'md',\n    bracketed = false,\n    className,\n    ...rest\n  } = props;\n\n  const label = bracketed ? (\n    <span className=\"inline-flex items-center justify-center gap-2\">\n      <span className=\"select-none\" aria-hidden=\"true\">\n        [\n      </span>\n      <span className=\"inline-flex items-center gap-2\">{children}</span>\n      <span className=\"select-none\" aria-hidden=\"true\">\n        ]\n      </span>\n    </span>\n  ) : (\n    <span className=\"inline-flex items-center justify-center gap-2\">{children}</span>\n  );\n\n  if (typeof props.href === 'string') {\n    // `pending` is `never` here; taken out so a stray `undefined` is not spread.\n    const {\n      pending: _pending,\n      pendingLabel: _pendingLabel,\n      ...anchorProps\n    } = rest as Omit<ButtonLinkProps, keyof ButtonOwnProps>;\n    return (\n      <a data-slot=\"button\"\n        ref={ref as Ref<HTMLAnchorElement>}\n        {...anchorProps}\n        // A `target=\"_blank\"` document can reach back through `window.opener`\n        // unless told otherwise. Modern browsers imply `noopener`, but not\n        // every renderer this package ships into is a modern browser, and an\n        // explicit `rel` costs nothing. An explicit `rel` from the caller wins.\n        rel={\n          anchorProps.rel ??\n          (anchorProps.target === '_blank' ? 'noopener noreferrer' : undefined)\n        }\n        className={button({ variant, size, asLink: true, class: className })}\n      >\n        {label}\n      </a>\n    );\n  }\n\n  const {\n    pending,\n    pendingLabel = 'Working',\n    ...buttonProps\n  } = rest as Omit<ButtonElementProps, keyof ButtonOwnProps>;\n  const isPending = pending === true && !buttonProps.disabled;\n\n  const element = (\n    <button data-slot=\"button\"\n      ref={ref as Ref<HTMLButtonElement>}\n      {...buttonProps}\n      // The `disabled` attribute is what drops focus, so a pending button says\n      // it is unavailable through ARIA and refuses activation here instead.\n      // Enter and Space on a focused button, and Enter in a text field of its\n      // form (implicit submission), all reach a button as a `click`; cancelling\n      // it cancels the submit it would have sent. Base UI's Button does the\n      // same under `focusableWhenDisabled`.\n      aria-disabled={isPending ? true : buttonProps['aria-disabled']}\n      onClick={isPending ? preventActivation : buttonProps.onClick}\n      data-pending={isPending ? '' : undefined}\n      className={button({ variant, size, pending: isPending, class: className })}\n    >\n      {isPending ? (\n        <>\n          {/* Transparent, not removed: it holds the width and the name. */}\n          <span className=\"inline-flex opacity-0\">{label}</span>\n          <Spinner\n            // Sized to the label's line box: `sm` in a small button, `md` —\n            // about a capital's height and a half — in the others.\n            size={size === 'sm' ? 'sm' : 'md'}\n            accent=\"current\"\n            // The status region beside the button announces the wait. This is\n            // the drawing only; a second live region inside a button, whose\n            // children are presentational, would be read unreliably or twice.\n            role={undefined}\n            aria-hidden=\"true\"\n            className=\"absolute inset-0\"\n          />\n        </>\n      ) : (\n        label\n      )}\n    </button>\n  );\n\n  if (pending === undefined) return element;\n\n  return (\n    <>\n      {element}\n      {/*\n       * Outside the button because a button's children are presentational: a\n       * live region inside one is flattened into its name. Present from the\n       * first render and filled only while pending, which is what makes the\n       * insertion an announcement rather than a region appearing already full.\n       */}\n      <span role=\"status\" className=\"sr-only\" data-slot=\"button-status\">\n        {isPending ? pendingLabel : ''}\n      </span>\n    </>\n  );\n});\n\n/** A pending button's click: cancelled, so neither `onClick` nor a submit runs. */\nfunction preventActivation(event: MouseEvent<HTMLButtonElement>) {\n  event.preventDefault();\n}\n"],"mappings":"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","names":["Button"]}