@epilot/spark-ui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/components/card.d.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { n as SparkCardColor, r as SparkCardVariant } from "../theme-types-DoROIXpi.js";
+import * as React$1 from "react";
+
+//#region src/components/card.d.ts
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Container chrome scoped to this card — NOT the ambient `data-style` knob
+   * (that drives controls and would cascade into the card's content). Unset →
+   * follows the app-level `[data-card-variant]` knob (default soft-neutral).
+   * (`solid` is hidden for now — see `SparkCardVariant`.)
+   */
+  variant?: SparkCardVariant;
+  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */
+  color?: SparkCardColor;
+}
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardSkeleton: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, type CardProps, CardSkeleton, CardTitle };
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card.js

@@ -0,0 +1,76 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/card.tsx
+const cardVariants = cva("relative flex w-full flex-col gap-1 rounded-2xl py-3", {
+	variants: { variant: {
+		ambient: "border-[length:var(--spark-card-border-width,0px)] border-[color:var(--spark-card-border,transparent)] bg-(--spark-card-bg,var(--neutral-a3)) px-[var(--spark-card-px,1rem)]",
+		soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) px-4",
+		surface: "border border-[color:var(--spark-card-c-border,var(--neutral-a6))] bg-(--spark-card-c-surface,var(--neutral-2)) px-4",
+		outline: "border border-[color:var(--spark-card-c-border,var(--neutral-a6))] px-4",
+		ghost: "",
+		solid: "bg-(--spark-card-c-solid,var(--neutral-9)) px-4 [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]"
+	} },
+	defaultVariants: { variant: "ambient" }
+});
+const Card = React$1.forwardRef(({ className, variant, color, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: cn(cardVariants({ variant }), className),
+	"data-slot": "card",
+	"data-variant": variant,
+	"data-card-color": color === "accent" ? "accent" : void 0,
+	ref,
+	...props
+}));
+Card.displayName = "Card";
+const CardHeader = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center gap-4", className),
+	ref,
+	...props
+}));
+CardHeader.displayName = "CardHeader";
+const CardIcon = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))", className),
+	ref,
+	...props
+}));
+CardIcon.displayName = "CardIcon";
+const CardTitle = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", {
+	className: cn("text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))", className),
+	ref,
+	...props
+}));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", {
+	className: cn("text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))", className),
+	ref,
+	...props
+}));
+CardDescription.displayName = "CardDescription";
+const CardContent = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: cn("", className),
+	ref,
+	...props
+}));
+CardContent.displayName = "CardContent";
+const CardFooter = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))", className),
+	ref,
+	...props
+}));
+CardFooter.displayName = "CardFooter";
+const CardSkeleton = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
+	className: cn("relative flex w-full items-center gap-4 rounded-2xl bg-spark-a3 p-4 opacity-80", className),
+	ref,
+	...props,
+	children: [/* @__PURE__ */ jsx("div", { className: "size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none" }), /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 flex-col gap-y-2",
+		children: [/* @__PURE__ */ jsx("div", { className: "h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none" }), /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none" })]
+	})]
+}));
+CardSkeleton.displayName = "CardSkeleton";
+//#endregion
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, CardSkeleton, CardTitle };
+
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":["React"],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst cardVariants = cva(\n  // Layout + constant VERTICAL padding + radius (rounded-2xl tracks the [data-radius]\n  // knob). Chrome (bg/border) and HORIZONTAL padding live per-variant so `ghost` sits\n  // flush. Container chrome ONLY (contract §11): reads/sets --spark-card-* — never\n  // data-style or the --spark-* scale — so styling/colouring a card never repaints the\n  // controls inside it.\n  'relative flex w-full flex-col gap-1 rounded-2xl py-3',\n  {\n    variants: {\n      variant: {\n        // Prop unset → follow the app-level [data-card-variant] knob; fallbacks == today's look.\n        ambient:\n          'border-[length:var(--spark-card-border-width,0px)] border-[color:var(--spark-card-border,transparent)] bg-(--spark-card-bg,var(--neutral-a3)) px-[var(--spark-card-px,1rem)]',\n        soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) px-4',\n        surface:\n          'border border-[color:var(--spark-card-c-border,var(--neutral-a6))] bg-(--spark-card-c-surface,var(--neutral-2)) px-4',\n        outline:\n          'border border-[color:var(--spark-card-c-border,var(--neutral-a6))] px-4',\n        // no horizontal inset (no chrome to pad against); py-3 keeps the vertical rhythm.\n        ghost: '',\n        // HIDDEN: `SparkCardVariant` excludes `solid` for now (content-contrast TBD).\n        // Recipe kept so re-enabling is only widening the type back to SparkStyle.\n        solid:\n          'bg-(--spark-card-c-solid,var(--neutral-9)) px-4 [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-contrast))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-contrast))]',\n      },\n    },\n    defaultVariants: {\n      variant: 'ambient',\n    },\n  },\n)\n\ninterface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Container chrome scoped to this card — NOT the ambient `data-style` knob\n   * (that drives controls and would cascade into the card's content). Unset →\n   * follows the app-level `[data-card-variant]` knob (default soft-neutral).\n   * (`solid` is hidden for now — see `SparkCardVariant`.)\n   */\n  variant?: SparkCardVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, ...props }, ref) => (\n    <div\n      className={cn(cardVariants({ variant }), className)}\n      data-slot=\"card\"\n      data-variant={variant}\n      data-card-color={color === 'accent' ? 'accent' : undefined}\n      ref={ref}\n      {...props}\n    />\n  ),\n)\n\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn('flex items-center gap-4', className)}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardHeader.displayName = 'CardHeader'\n\nconst CardIcon = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardIcon.displayName = 'CardIcon'\n\nconst CardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    className={cn(\n      'text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    className={cn(\n      'text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div className={cn('', className)} ref={ref} {...props} />\n))\n\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'flex items-center justify-end gap-2 pt-2 text-(--spark-card-fg,var(--neutral-a12))',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  />\n))\n\nCardFooter.displayName = 'CardFooter'\n\nconst CardSkeleton = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    className={cn(\n      'relative flex w-full items-center gap-4 rounded-2xl bg-spark-a3 p-4 opacity-80',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    <div className=\"size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none\" />\n    <div className=\"flex flex-1 flex-col gap-y-2\">\n      <div className=\"h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n      <div className=\"h-4 w-1/2 max-w-48 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none\" />\n    </div>\n  </div>\n))\n\nCardSkeleton.displayName = 'CardSkeleton'\n\nexport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardIcon,\n  CardSkeleton,\n  CardTitle,\n}\nexport type { CardProps }\n"],"mappings":";;;;;;AAKA,MAAM,eAAe,IAMnB,wDACA;CACE,UAAU,EACR,SAAS;EAEP,SACE;EACF,MAAM;EACN,SACE;EACF,SACE;EAEF,OAAO;EAGP,OACE;EACH,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAcD,MAAM,OAAOA,QAAM,YAChB,EAAE,WAAW,SAAS,OAAO,GAAG,SAAS,QACxC,oBAAC,OAAD;CACE,WAAW,GAAG,aAAa,EAAE,SAAS,CAAC,EAAE,UAAU;CACnD,aAAU;CACV,gBAAc;CACd,mBAAiB,UAAU,WAAW,WAAW,KAAA;CAC5C;CACL,GAAI;CACJ,CAAA,CAEL;AAED,KAAK,cAAc;AAEnB,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GAAG,2BAA2B,UAAU;CAC9C;CACL,GAAI;CACJ,CAAA,CACF;AAEF,WAAW,cAAc;AAEzB,MAAM,WAAWA,QAAM,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,uFACA,UACD;CACI;CACL,GAAI;CACJ,CAAA,CACF;AAEF,SAAS,cAAc;AAEvB,MAAM,YAAYA,QAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,MAAD;CACE,WAAW,GACT,6EACA,UACD;CACI;CACL,GAAI;CACJ,CAAA,CACF;AAEF,UAAU,cAAc;AAExB,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACE,WAAW,GACT,qEACA,UACD;CACI;CACL,GAAI;CACJ,CAAA,CACF;AAEF,gBAAgB,cAAc;AAE9B,MAAM,cAAcA,QAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CAAK,WAAW,GAAG,IAAI,UAAU;CAAO;CAAK,GAAI;CAAS,CAAA,CAC1D;AAEF,YAAY,cAAc;AAE1B,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,sFACA,UACD;CACI;CACL,GAAI;CACJ,CAAA,CACF;AAEF,WAAW,cAAc;AAEzB,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,qBAAC,OAAD;CACE,WAAW,GACT,kFACA,UACD;CACI;CACL,GAAI;WANN,CAQE,oBAAC,OAAD,EAAK,WAAU,4FAA6F,CAAA,EAC5G,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD,EAAK,WAAU,4FAA6F,CAAA,EAC5G,oBAAC,OAAD,EAAK,WAAU,4FAA6F,CAAA,CACxG;IACF;GACN;AAEF,aAAa,cAAc"}

package/dist/components/chart.cjs

@@ -0,0 +1,93 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let cnfast = require("cnfast");
+//#region src/components/chart.tsx
+/**
+* Tracks an element's rendered size via ResizeObserver. The element must stay
+* mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref
+* is attached when the observer is set up.
+*/
+function useMeasuredSize() {
+	const ref = (0, react.useRef)(null);
+	const [size, setSize] = (0, react.useState)({
+		width: 0,
+		height: 0
+	});
+	(0, react.useEffect)(() => {
+		const element = ref.current;
+		if (!element) return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			setSize({
+				width: entry.contentRect.width,
+				height: entry.contentRect.height
+			});
+		});
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
+	}, []);
+	return [ref, size];
+}
+/**
+* Positions a tooltip relative to an anchor while keeping it fully inside the
+* chart: clamped on every edge, flipped above/below or left/right as needed.
+*/
+function clampTooltipPosition({ anchorX, anchorY, width, height, tipWidth, tipHeight, gap = 12, pad = 8, placement = "above" }) {
+	const maxLeft = Math.max(pad, width - tipWidth - pad);
+	const maxTop = Math.max(pad, height - tipHeight - pad);
+	if (placement === "beside") {
+		const right = anchorX + gap;
+		const left = right + tipWidth + pad <= width ? right : anchorX - gap - tipWidth;
+		return {
+			left: Math.min(Math.max(left, pad), maxLeft),
+			top: Math.min(Math.max(anchorY, pad), maxTop)
+		};
+	}
+	const above = anchorY - gap - tipHeight;
+	const desiredTop = above >= pad ? above : anchorY + gap;
+	return {
+		left: Math.min(Math.max(anchorX - tipWidth / 2, pad), maxLeft),
+		top: Math.min(Math.max(desiredTop, pad), maxTop)
+	};
+}
+/**
+* Card-style multi-series tooltip body: an optional header plus one
+* coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart
+* components so every chart shares the same tooltip look.
+*/
+function ChartTooltipCard({ label, rows, className }) {
+	if (rows.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, cnfast.cn)("grid min-w-40 gap-1.5 rounded-lg border border-slate-a6 bg-slate-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3", className),
+		children: [label !== void 0 && label !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "font-medium text-gray",
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "grid gap-1.5",
+			children: rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "flex items-center gap-1.5 text-gray-light",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "size-2 shrink-0 rounded-[2px]",
+						style: { backgroundColor: row.color }
+					}), row.label]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-medium whitespace-nowrap text-gray tabular-nums",
+					children: row.value
+				})]
+			}, row.key))
+		})]
+	});
+}
+//#endregion
+exports.ChartTooltipCard = ChartTooltipCard;
+exports.clampTooltipPosition = clampTooltipPosition;
+exports.useMeasuredSize = useMeasuredSize;
+
+//# sourceMappingURL=chart.cjs.map

package/dist/components/chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.cjs","names":[],"sources":["../../src/components/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode\n    color?: string\n  }\n>\n\nexport interface ChartTooltipRow {\n  key: string\n  label: React.ReactNode\n  /** CSS color value for the legend dot (e.g. `var(--orange-a9)`). */\n  color: string\n  value: React.ReactNode\n}\n\nexport interface ChartTooltipCardProps {\n  label?: React.ReactNode\n  rows: ChartTooltipRow[]\n  className?: string\n}\n\n/**\n * Tracks an element's rendered size via ResizeObserver. The element must stay\n * mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref\n * is attached when the observer is set up.\n */\nexport function useMeasuredSize<T extends HTMLElement>() {\n  const ref = useRef<T>(null)\n  const [size, setSize] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setSize({\n        width: entry.contentRect.width,\n        height: entry.contentRect.height,\n      })\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return [ref, size] as const\n}\n\ninterface ClampTooltipArgs {\n  /** Anchor point (chart-local px) the tooltip should sit at, horizontally centred. */\n  anchorX: number\n  anchorY: number\n  /** Chart bounds (px). */\n  width: number\n  height: number\n  /** Measured tooltip size (px). */\n  tipWidth: number\n  tipHeight: number\n  /** Gap between the anchor and the tooltip. */\n  gap?: number\n  /** Minimum distance kept from every chart edge. */\n  pad?: number\n  /**\n   * `above` (default): centred above the anchor, flipped below if it would clip\n   * the top — good for bars. `beside`: offset to the side of the anchor so it\n   * never sits on top of the hovered point/line — good for line/area charts.\n   */\n  placement?: 'above' | 'beside'\n}\n\n/**\n * Positions a tooltip relative to an anchor while keeping it fully inside the\n * chart: clamped on every edge, flipped above/below or left/right as needed.\n */\nexport function clampTooltipPosition({\n  anchorX,\n  anchorY,\n  width,\n  height,\n  tipWidth,\n  tipHeight,\n  gap = 12,\n  pad = 8,\n  placement = 'above',\n}: ClampTooltipArgs): { left: number; top: number } {\n  const maxLeft = Math.max(pad, width - tipWidth - pad)\n  const maxTop = Math.max(pad, height - tipHeight - pad)\n\n  if (placement === 'beside') {\n    // Prefer the right of the anchor; flip to the left if it would overflow.\n    const right = anchorX + gap\n    const left =\n      right + tipWidth + pad <= width ? right : anchorX - gap - tipWidth\n    return {\n      left: Math.min(Math.max(left, pad), maxLeft),\n      top: Math.min(Math.max(anchorY, pad), maxTop),\n    }\n  }\n\n  const above = anchorY - gap - tipHeight\n  const desiredTop = above >= pad ? above : anchorY + gap\n  return {\n    left: Math.min(Math.max(anchorX - tipWidth / 2, pad), maxLeft),\n    top: Math.min(Math.max(desiredTop, pad), maxTop),\n  }\n}\n\n/**\n * Card-style multi-series tooltip body: an optional header plus one\n * coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart\n * components so every chart shares the same tooltip look.\n */\nexport function ChartTooltipCard({\n  label,\n  rows,\n  className,\n}: ChartTooltipCardProps) {\n  if (rows.length === 0) return null\n\n  return (\n    <div\n      className={cn(\n        'grid min-w-40 gap-1.5 rounded-lg border border-slate-a6 bg-slate-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3',\n        className,\n      )}\n    >\n      {label !== undefined && label !== null && (\n        <div className=\"font-medium text-gray\">{label}</div>\n      )}\n      <div className=\"grid gap-1.5\">\n        {rows.map((row) => (\n          <div\n            key={row.key}\n            className=\"flex items-center justify-between gap-4\"\n          >\n            <span className=\"flex items-center gap-1.5 text-gray-light\">\n              <span\n                className=\"size-2 shrink-0 rounded-[2px]\"\n                style={{ backgroundColor: row.color }}\n              />\n              {row.label}\n            </span>\n            <span className=\"font-medium whitespace-nowrap text-gray tabular-nums\">\n              {row.value}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAgB,kBAAyC;CACvD,MAAM,OAAA,GAAA,MAAA,QAAgB,KAAK;CAC3B,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAAoB;EAAE,OAAO;EAAG,QAAQ;EAAG,CAAC;AAEzD,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,UAAU,IAAI;AACpB,MAAI,CAAC,QAAS;EAEd,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,MAAM,QAAQ,QAAQ;AACtB,OAAI,CAAC,MAAO;AACZ,WAAQ;IACN,OAAO,MAAM,YAAY;IACzB,QAAQ,MAAM,YAAY;IAC3B,CAAC;IACF;AAEF,iBAAe,QAAQ,QAAQ;AAC/B,eAAa,eAAe,YAAY;IACvC,EAAE,CAAC;AAEN,QAAO,CAAC,KAAK,KAAK;;;;;;AA6BpB,SAAgB,qBAAqB,EACnC,SACA,SACA,OACA,QACA,UACA,WACA,MAAM,IACN,MAAM,GACN,YAAY,WACsC;CAClD,MAAM,UAAU,KAAK,IAAI,KAAK,QAAQ,WAAW,IAAI;CACrD,MAAM,SAAS,KAAK,IAAI,KAAK,SAAS,YAAY,IAAI;AAEtD,KAAI,cAAc,UAAU;EAE1B,MAAM,QAAQ,UAAU;EACxB,MAAM,OACJ,QAAQ,WAAW,OAAO,QAAQ,QAAQ,UAAU,MAAM;AAC5D,SAAO;GACL,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,EAAE,QAAQ;GAC5C,KAAK,KAAK,IAAI,KAAK,IAAI,SAAS,IAAI,EAAE,OAAO;GAC9C;;CAGH,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,aAAa,SAAS,MAAM,QAAQ,UAAU;AACpD,QAAO;EACL,MAAM,KAAK,IAAI,KAAK,IAAI,UAAU,WAAW,GAAG,IAAI,EAAE,QAAQ;EAC9D,KAAK,KAAK,IAAI,KAAK,IAAI,YAAY,IAAI,EAAE,OAAO;EACjD;;;;;;;AAQH,SAAgB,iBAAiB,EAC/B,OACA,MACA,aACwB;AACxB,KAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,iHACA,UACD;YAJH,CAMG,UAAU,KAAA,KAAa,UAAU,QAChC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aAAyB;GAAY,CAAA,EAEtD,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,QACT,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAEE,WAAU;cAFZ,CAIE,iBAAA,GAAA,kBAAA,MAAC,QAAD;KAAM,WAAU;eAAhB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,OAAO;MACrC,CAAA,EACD,IAAI,MACA;QACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eACb,IAAI;KACA,CAAA,CACH;MAbC,IAAI,IAaL,CACN;GACE,CAAA,CACF"}

package/dist/components/chart.d.cts

@@ -0,0 +1,83 @@
+"use client";
+
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+
+//#region src/components/chart.d.ts
+type ChartConfig = Record<string, {
+  label?: React$1.ReactNode;
+  color?: string;
+}>;
+interface ChartTooltipRow {
+  key: string;
+  label: React$1.ReactNode;
+  /** CSS color value for the legend dot (e.g. `var(--orange-a9)`). */
+  color: string;
+  value: React$1.ReactNode;
+}
+interface ChartTooltipCardProps {
+  label?: React$1.ReactNode;
+  rows: ChartTooltipRow[];
+  className?: string;
+}
+/**
+ * Tracks an element's rendered size via ResizeObserver. The element must stay
+ * mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref
+ * is attached when the observer is set up.
+ */
+declare function useMeasuredSize<T extends HTMLElement>(): readonly [React$1.RefObject<T | null>, {
+  width: number;
+  height: number;
+}];
+interface ClampTooltipArgs {
+  /** Anchor point (chart-local px) the tooltip should sit at, horizontally centred. */
+  anchorX: number;
+  anchorY: number;
+  /** Chart bounds (px). */
+  width: number;
+  height: number;
+  /** Measured tooltip size (px). */
+  tipWidth: number;
+  tipHeight: number;
+  /** Gap between the anchor and the tooltip. */
+  gap?: number;
+  /** Minimum distance kept from every chart edge. */
+  pad?: number;
+  /**
+   * `above` (default): centred above the anchor, flipped below if it would clip
+   * the top — good for bars. `beside`: offset to the side of the anchor so it
+   * never sits on top of the hovered point/line — good for line/area charts.
+   */
+  placement?: 'above' | 'beside';
+}
+/**
+ * Positions a tooltip relative to an anchor while keeping it fully inside the
+ * chart: clamped on every edge, flipped above/below or left/right as needed.
+ */
+declare function clampTooltipPosition({
+  anchorX,
+  anchorY,
+  width,
+  height,
+  tipWidth,
+  tipHeight,
+  gap,
+  pad,
+  placement
+}: ClampTooltipArgs): {
+  left: number;
+  top: number;
+};
+/**
+ * Card-style multi-series tooltip body: an optional header plus one
+ * coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart
+ * components so every chart shares the same tooltip look.
+ */
+declare function ChartTooltipCard({
+  label,
+  rows,
+  className
+}: ChartTooltipCardProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartConfig, ChartTooltipCard, ChartTooltipCardProps, ChartTooltipRow, clampTooltipPosition, useMeasuredSize };
+//# sourceMappingURL=chart.d.cts.map

package/dist/components/chart.d.ts

@@ -0,0 +1,83 @@
+"use client";
+
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/chart.d.ts
+type ChartConfig = Record<string, {
+  label?: React$1.ReactNode;
+  color?: string;
+}>;
+interface ChartTooltipRow {
+  key: string;
+  label: React$1.ReactNode;
+  /** CSS color value for the legend dot (e.g. `var(--orange-a9)`). */
+  color: string;
+  value: React$1.ReactNode;
+}
+interface ChartTooltipCardProps {
+  label?: React$1.ReactNode;
+  rows: ChartTooltipRow[];
+  className?: string;
+}
+/**
+ * Tracks an element's rendered size via ResizeObserver. The element must stay
+ * mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref
+ * is attached when the observer is set up.
+ */
+declare function useMeasuredSize<T extends HTMLElement>(): readonly [React$1.RefObject<T | null>, {
+  width: number;
+  height: number;
+}];
+interface ClampTooltipArgs {
+  /** Anchor point (chart-local px) the tooltip should sit at, horizontally centred. */
+  anchorX: number;
+  anchorY: number;
+  /** Chart bounds (px). */
+  width: number;
+  height: number;
+  /** Measured tooltip size (px). */
+  tipWidth: number;
+  tipHeight: number;
+  /** Gap between the anchor and the tooltip. */
+  gap?: number;
+  /** Minimum distance kept from every chart edge. */
+  pad?: number;
+  /**
+   * `above` (default): centred above the anchor, flipped below if it would clip
+   * the top — good for bars. `beside`: offset to the side of the anchor so it
+   * never sits on top of the hovered point/line — good for line/area charts.
+   */
+  placement?: 'above' | 'beside';
+}
+/**
+ * Positions a tooltip relative to an anchor while keeping it fully inside the
+ * chart: clamped on every edge, flipped above/below or left/right as needed.
+ */
+declare function clampTooltipPosition({
+  anchorX,
+  anchorY,
+  width,
+  height,
+  tipWidth,
+  tipHeight,
+  gap,
+  pad,
+  placement
+}: ClampTooltipArgs): {
+  left: number;
+  top: number;
+};
+/**
+ * Card-style multi-series tooltip body: an optional header plus one
+ * coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart
+ * components so every chart shares the same tooltip look.
+ */
+declare function ChartTooltipCard({
+  label,
+  rows,
+  className
+}: ChartTooltipCardProps): _$react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { ChartConfig, ChartTooltipCard, ChartTooltipCardProps, ChartTooltipRow, clampTooltipPosition, useMeasuredSize };
+//# sourceMappingURL=chart.d.ts.map

package/dist/components/chart.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart.tsx
+/**
+* Tracks an element's rendered size via ResizeObserver. The element must stay
+* mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref
+* is attached when the observer is set up.
+*/
+function useMeasuredSize() {
+	const ref = useRef(null);
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0
+	});
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			setSize({
+				width: entry.contentRect.width,
+				height: entry.contentRect.height
+			});
+		});
+		resizeObserver.observe(element);
+		return () => resizeObserver.disconnect();
+	}, []);
+	return [ref, size];
+}
+/**
+* Positions a tooltip relative to an anchor while keeping it fully inside the
+* chart: clamped on every edge, flipped above/below or left/right as needed.
+*/
+function clampTooltipPosition({ anchorX, anchorY, width, height, tipWidth, tipHeight, gap = 12, pad = 8, placement = "above" }) {
+	const maxLeft = Math.max(pad, width - tipWidth - pad);
+	const maxTop = Math.max(pad, height - tipHeight - pad);
+	if (placement === "beside") {
+		const right = anchorX + gap;
+		const left = right + tipWidth + pad <= width ? right : anchorX - gap - tipWidth;
+		return {
+			left: Math.min(Math.max(left, pad), maxLeft),
+			top: Math.min(Math.max(anchorY, pad), maxTop)
+		};
+	}
+	const above = anchorY - gap - tipHeight;
+	const desiredTop = above >= pad ? above : anchorY + gap;
+	return {
+		left: Math.min(Math.max(anchorX - tipWidth / 2, pad), maxLeft),
+		top: Math.min(Math.max(desiredTop, pad), maxTop)
+	};
+}
+/**
+* Card-style multi-series tooltip body: an optional header plus one
+* coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart
+* components so every chart shares the same tooltip look.
+*/
+function ChartTooltipCard({ label, rows, className }) {
+	if (rows.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-40 gap-1.5 rounded-lg border border-slate-a6 bg-slate-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3", className),
+		children: [label !== void 0 && label !== null && /* @__PURE__ */ jsx("div", {
+			className: "font-medium text-gray",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "grid gap-1.5",
+			children: rows.map((row) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "flex items-center gap-1.5 text-gray-light",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "size-2 shrink-0 rounded-[2px]",
+						style: { backgroundColor: row.color }
+					}), row.label]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-medium whitespace-nowrap text-gray tabular-nums",
+					children: row.value
+				})]
+			}, row.key))
+		})]
+	});
+}
+//#endregion
+export { ChartTooltipCard, clampTooltipPosition, useMeasuredSize };
+
+//# sourceMappingURL=chart.js.map

package/dist/components/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","names":[],"sources":["../../src/components/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode\n    color?: string\n  }\n>\n\nexport interface ChartTooltipRow {\n  key: string\n  label: React.ReactNode\n  /** CSS color value for the legend dot (e.g. `var(--orange-a9)`). */\n  color: string\n  value: React.ReactNode\n}\n\nexport interface ChartTooltipCardProps {\n  label?: React.ReactNode\n  rows: ChartTooltipRow[]\n  className?: string\n}\n\n/**\n * Tracks an element's rendered size via ResizeObserver. The element must stay\n * mounted (e.g. an always-rendered, possibly-hidden tooltip wrapper) so the ref\n * is attached when the observer is set up.\n */\nexport function useMeasuredSize<T extends HTMLElement>() {\n  const ref = useRef<T>(null)\n  const [size, setSize] = useState({ width: 0, height: 0 })\n\n  useEffect(() => {\n    const element = ref.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setSize({\n        width: entry.contentRect.width,\n        height: entry.contentRect.height,\n      })\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  return [ref, size] as const\n}\n\ninterface ClampTooltipArgs {\n  /** Anchor point (chart-local px) the tooltip should sit at, horizontally centred. */\n  anchorX: number\n  anchorY: number\n  /** Chart bounds (px). */\n  width: number\n  height: number\n  /** Measured tooltip size (px). */\n  tipWidth: number\n  tipHeight: number\n  /** Gap between the anchor and the tooltip. */\n  gap?: number\n  /** Minimum distance kept from every chart edge. */\n  pad?: number\n  /**\n   * `above` (default): centred above the anchor, flipped below if it would clip\n   * the top — good for bars. `beside`: offset to the side of the anchor so it\n   * never sits on top of the hovered point/line — good for line/area charts.\n   */\n  placement?: 'above' | 'beside'\n}\n\n/**\n * Positions a tooltip relative to an anchor while keeping it fully inside the\n * chart: clamped on every edge, flipped above/below or left/right as needed.\n */\nexport function clampTooltipPosition({\n  anchorX,\n  anchorY,\n  width,\n  height,\n  tipWidth,\n  tipHeight,\n  gap = 12,\n  pad = 8,\n  placement = 'above',\n}: ClampTooltipArgs): { left: number; top: number } {\n  const maxLeft = Math.max(pad, width - tipWidth - pad)\n  const maxTop = Math.max(pad, height - tipHeight - pad)\n\n  if (placement === 'beside') {\n    // Prefer the right of the anchor; flip to the left if it would overflow.\n    const right = anchorX + gap\n    const left =\n      right + tipWidth + pad <= width ? right : anchorX - gap - tipWidth\n    return {\n      left: Math.min(Math.max(left, pad), maxLeft),\n      top: Math.min(Math.max(anchorY, pad), maxTop),\n    }\n  }\n\n  const above = anchorY - gap - tipHeight\n  const desiredTop = above >= pad ? above : anchorY + gap\n  return {\n    left: Math.min(Math.max(anchorX - tipWidth / 2, pad), maxLeft),\n    top: Math.min(Math.max(desiredTop, pad), maxTop),\n  }\n}\n\n/**\n * Card-style multi-series tooltip body: an optional header plus one\n * coloured-dot row per series. Rendered inside `@visx/tooltip` by the chart\n * components so every chart shares the same tooltip look.\n */\nexport function ChartTooltipCard({\n  label,\n  rows,\n  className,\n}: ChartTooltipCardProps) {\n  if (rows.length === 0) return null\n\n  return (\n    <div\n      className={cn(\n        'grid min-w-40 gap-1.5 rounded-lg border border-slate-a6 bg-slate-1 px-3 py-2 text-xs shadow-lg shadow-gray-a3',\n        className,\n      )}\n    >\n      {label !== undefined && label !== null && (\n        <div className=\"font-medium text-gray\">{label}</div>\n      )}\n      <div className=\"grid gap-1.5\">\n        {rows.map((row) => (\n          <div\n            key={row.key}\n            className=\"flex items-center justify-between gap-4\"\n          >\n            <span className=\"flex items-center gap-1.5 text-gray-light\">\n              <span\n                className=\"size-2 shrink-0 rounded-[2px]\"\n                style={{ backgroundColor: row.color }}\n              />\n              {row.label}\n            </span>\n            <span className=\"font-medium whitespace-nowrap text-gray tabular-nums\">\n              {row.value}\n            </span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AA+BA,SAAgB,kBAAyC;CACvD,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,CAAC,MAAM,WAAW,SAAS;EAAE,OAAO;EAAG,QAAQ;EAAG,CAAC;AAEzD,iBAAgB;EACd,MAAM,UAAU,IAAI;AACpB,MAAI,CAAC,QAAS;EAEd,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,MAAM,QAAQ,QAAQ;AACtB,OAAI,CAAC,MAAO;AACZ,WAAQ;IACN,OAAO,MAAM,YAAY;IACzB,QAAQ,MAAM,YAAY;IAC3B,CAAC;IACF;AAEF,iBAAe,QAAQ,QAAQ;AAC/B,eAAa,eAAe,YAAY;IACvC,EAAE,CAAC;AAEN,QAAO,CAAC,KAAK,KAAK;;;;;;AA6BpB,SAAgB,qBAAqB,EACnC,SACA,SACA,OACA,QACA,UACA,WACA,MAAM,IACN,MAAM,GACN,YAAY,WACsC;CAClD,MAAM,UAAU,KAAK,IAAI,KAAK,QAAQ,WAAW,IAAI;CACrD,MAAM,SAAS,KAAK,IAAI,KAAK,SAAS,YAAY,IAAI;AAEtD,KAAI,cAAc,UAAU;EAE1B,MAAM,QAAQ,UAAU;EACxB,MAAM,OACJ,QAAQ,WAAW,OAAO,QAAQ,QAAQ,UAAU,MAAM;AAC5D,SAAO;GACL,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,IAAI,EAAE,QAAQ;GAC5C,KAAK,KAAK,IAAI,KAAK,IAAI,SAAS,IAAI,EAAE,OAAO;GAC9C;;CAGH,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,aAAa,SAAS,MAAM,QAAQ,UAAU;AACpD,QAAO;EACL,MAAM,KAAK,IAAI,KAAK,IAAI,UAAU,WAAW,GAAG,IAAI,EAAE,QAAQ;EAC9D,KAAK,KAAK,IAAI,KAAK,IAAI,YAAY,IAAI,EAAE,OAAO;EACjD;;;;;;;AAQH,SAAgB,iBAAiB,EAC/B,OACA,MACA,aACwB;AACxB,KAAI,KAAK,WAAW,EAAG,QAAO;AAE9B,QACE,qBAAC,OAAD;EACE,WAAW,GACT,iHACA,UACD;YAJH,CAMG,UAAU,KAAA,KAAa,UAAU,QAChC,oBAAC,OAAD;GAAK,WAAU;aAAyB;GAAY,CAAA,EAEtD,oBAAC,OAAD;GAAK,WAAU;aACZ,KAAK,KAAK,QACT,qBAAC,OAAD;IAEE,WAAU;cAFZ,CAIE,qBAAC,QAAD;KAAM,WAAU;eAAhB,CACE,oBAAC,QAAD;MACE,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,OAAO;MACrC,CAAA,EACD,IAAI,MACA;QACP,oBAAC,QAAD;KAAM,WAAU;eACb,IAAI;KACA,CAAA,CACH;MAbC,IAAI,IAaL,CACN;GACE,CAAA,CACF"}

package/dist/components/checkbox.cjs

@@ -0,0 +1,37 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_checkbox = require("@base-ui/react/checkbox");
+let cnfast = require("cnfast");
+//#region src/components/checkbox.tsx
+const Checkbox = react.forwardRef(({ className, size: _size, bordered: _bordered, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_checkbox.Checkbox.Root, {
+	className: (0, cnfast.cn)("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-[length:var(--spark-style-border-width,2px)] transition-colors", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "rounded-[min(var(--spark-rounded-sm),40%)]", "focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-[color:var(--spark-style-idle-border,var(--spark-a7))] bg-base-accent-soft", "data-checked:border-[color:var(--spark-style-border,var(--spark-9))] data-checked:bg-[var(--spark-style-bg,var(--spark-9))]", "data-indeterminate:border-[color:var(--spark-style-border,var(--spark-9))] data-indeterminate:bg-[var(--spark-style-bg,var(--spark-9))]", className),
+	ref,
+	...props,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_checkbox.Checkbox.Indicator, {
+		className: "group inline-flex items-center justify-center text-[color:var(--spark-style-fg,var(--spark-on-solid))]",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			"aria-hidden": "true",
+			className: "hidden size-5 group-data-checked:block",
+			fill: "none",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+				className: "animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none",
+				d: "M5.5 12.5 L10 17 L18.5 7.5",
+				pathLength: 1,
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2.5
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none" })]
+	})
+}));
+Checkbox.displayName = "Checkbox";
+//#endregion
+exports.Checkbox = Checkbox;
+
+//# sourceMappingURL=checkbox.cjs.map

package/dist/components/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.cjs","names":["React","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype CheckboxProps = CheckboxPrimitive.Root.Props & {\n  /**\n   * @deprecated The checkbox now renders a single 24px size (with a 40px hit\n   * area). Accepted for back-compat but ignored.\n   */\n  size?: 'default' | 'large'\n  /**\n   * @deprecated The checkbox is always bordered now. Accepted for back-compat\n   * but ignored.\n   */\n  bordered?: boolean\n}\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n  // `size`/`bordered` are deprecated no-ops — pulled out of the rest so they\n  // don't leak onto the DOM element as unknown attributes.\n>(({ className, size: _size, bordered: _bordered, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      // 24px visible box with a 40px hit area (the ::before overlay, WCAG 2.5.5).\n      // Border width follows the style knob (surface thins to 1px; the rest stay 2px).\n      'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-[length:var(--spark-style-border-width,2px)] transition-colors',\n      \"before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n      // Capped radius: follows the [data-radius] factor, but the 40% ceiling (a\n      // circle needs 50%) keeps a checkbox from ever rounding into a circle at\n      // large/full or small sizes. A % radius tracks the box itself, so it holds\n      // across every spacing/scaling combo (Radix idiom: cap small-control radius).\n      'rounded-[min(var(--spark-rounded-sm),40%)]',\n      'focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden',\n      // Base UI renders a <span>, so disabled state comes via data-disabled\n      'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n      // Unchecked: subtle fill + a style-aware border (soft sets the idle-border\n      // to none). The a7 fallback keeps the default (no data-style) affordance.\n      'border-[color:var(--spark-style-idle-border,var(--spark-a7))] bg-base-accent-soft',\n      // Checked / indeterminate: style-aware fill + border (--spark-style-*,\n      // solid by default). Mirrors the Button's style knob.\n      'data-checked:border-[color:var(--spark-style-border,var(--spark-9))] data-checked:bg-[var(--spark-style-bg,var(--spark-9))]',\n      'data-indeterminate:border-[color:var(--spark-style-border,var(--spark-9))] data-indeterminate:bg-[var(--spark-style-bg,var(--spark-9))]',\n      className,\n    )}\n    ref={ref}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"group inline-flex items-center justify-center text-[color:var(--spark-style-fg,var(--spark-on-solid))]\">\n      {/* custom-drawn glyphs; group-data toggles which one the mounted indicator shows */}\n      <svg\n        aria-hidden=\"true\"\n        className=\"hidden size-5 group-data-checked:block\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path\n          className=\"animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none\"\n          d=\"M5.5 12.5 L10 17 L18.5 7.5\"\n          pathLength={1}\n          stroke=\"currentColor\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth={2.5}\n        />\n      </svg>\n      <span className=\"hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;;;AAiBA,MAAM,WAAWA,MAAM,YAKpB,EAAE,WAAW,MAAM,OAAO,UAAU,WAAW,GAAG,SAAS,QAC5D,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,SAAkB,MAAnB;CACE,YAAA,GAAA,OAAA,IAGE,8JACA,qIAKA,8CACA,+EAEA,6DAGA,qFAGA,+HACA,2IACA,UACD;CACI;CACL,GAAI;WAEJ,iBAAA,GAAA,kBAAA,MAACA,wBAAAA,SAAkB,WAAnB;EAA6B,WAAU;YAAvC,CAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,MAAK;GACL,SAAQ;aAER,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,WAAU;IACV,GAAE;IACF,YAAY;IACZ,QAAO;IACP,eAAc;IACd,gBAAe;IACf,aAAa;IACb,CAAA;GACE,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,qIAAsI,CAAA,CAC1H;;CACP,CAAA,CACzB;AAEF,SAAS,cAAc"}

package/dist/components/checkbox.d.cts

@@ -0,0 +1,22 @@
+"use client";
+
+import * as React$1 from "react";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+
+//#region src/components/checkbox.d.ts
+type CheckboxProps = Checkbox$1.Root.Props & {
+  /**
+   * @deprecated The checkbox now renders a single 24px size (with a 40px hit
+   * area). Accepted for back-compat but ignored.
+   */
+  size?: 'default' | 'large';
+  /**
+   * @deprecated The checkbox is always bordered now. Accepted for back-compat
+   * but ignored.
+   */
+  bordered?: boolean;
+};
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
+//#endregion
+export { Checkbox, type CheckboxProps };
+//# sourceMappingURL=checkbox.d.cts.map

package/dist/components/checkbox.d.ts

@@ -0,0 +1,22 @@
+"use client";
+
+import * as React$1 from "react";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+
+//#region src/components/checkbox.d.ts
+type CheckboxProps = Checkbox$1.Root.Props & {
+  /**
+   * @deprecated The checkbox now renders a single 24px size (with a 40px hit
+   * area). Accepted for back-compat but ignored.
+   */
+  size?: 'default' | 'large';
+  /**
+   * @deprecated The checkbox is always bordered now. Accepted for back-compat
+   * but ignored.
+   */
+  bordered?: boolean;
+};
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
+//#endregion
+export { Checkbox, type CheckboxProps };
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.js

@@ -0,0 +1,34 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
+//#region src/components/checkbox.tsx
+const Checkbox = React$1.forwardRef(({ className, size: _size, bordered: _bordered, ...props }, ref) => /* @__PURE__ */ jsx(Checkbox$1.Root, {
+	className: cn("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-[length:var(--spark-style-border-width,2px)] transition-colors", "before:absolute before:top-1/2 before:left-1/2 before:size-10 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "rounded-[min(var(--spark-rounded-sm),40%)]", "focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-[color:var(--spark-style-idle-border,var(--spark-a7))] bg-base-accent-soft", "data-checked:border-[color:var(--spark-style-border,var(--spark-9))] data-checked:bg-[var(--spark-style-bg,var(--spark-9))]", "data-indeterminate:border-[color:var(--spark-style-border,var(--spark-9))] data-indeterminate:bg-[var(--spark-style-bg,var(--spark-9))]", className),
+	ref,
+	...props,
+	children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
+		className: "group inline-flex items-center justify-center text-[color:var(--spark-style-fg,var(--spark-on-solid))]",
+		children: [/* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			className: "hidden size-5 group-data-checked:block",
+			fill: "none",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ jsx("path", {
+				className: "animate-check-draw [stroke-dasharray:1] motion-reduce:animate-none",
+				d: "M5.5 12.5 L10 17 L18.5 7.5",
+				pathLength: 1,
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2.5
+			})
+		}), /* @__PURE__ */ jsx("span", { className: "hidden h-0.5 w-3 origin-center animate-dash-pop rounded-full bg-current group-data-indeterminate:block motion-reduce:animate-none" })]
+	})
+}));
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=checkbox.js.map