@epilot/spark-ui 0.10.0

package/dist/components/callout.d.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import { ButtonProps } from "./button.js";
+import { MaterialSymbolIconName } from "../icons/material-symbol.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/callout.d.ts
+type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
+declare const calloutVariants: (props?: ({
+  variant?: "info" | "warning" | "success" | "error" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
+  /** Overrides the variant's default icon; the variant's color is kept. */
+  icon?: MaterialSymbolIconName;
+}
+declare const CalloutTitle: ({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+declare const CalloutDescription: ({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLParagraphElement>) => import("react/jsx-runtime").JSX.Element;
+type CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {
+  align?: 'start' | 'end';
+};
+declare const CalloutAction: ({
+  className,
+  align,
+  ...props
+}: CalloutActionType) => import("react/jsx-runtime").JSX.Element;
+declare const Callout: ({
+  variant,
+  icon,
+  className,
+  children,
+  ...props
+}: CalloutProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Callout, CalloutAction, CalloutDescription, type CalloutProps, CalloutTitle, type CalloutVariant, calloutVariants };
+//# sourceMappingURL=callout.d.ts.map

package/dist/components/callout.js

@@ -0,0 +1,88 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { MaterialSymbol } from "../icons/material-symbol.js";
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/callout.tsx
+const calloutVariants = cva("group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0", {
+	variants: { variant: {
+		error: "bg-base-error-soft text-error",
+		success: "bg-base-success-soft text-success",
+		warning: "bg-base-warning-soft text-warning",
+		info: "bg-base-info-soft text-info"
+	} },
+	defaultVariants: { variant: "info" }
+});
+const CALLOUT_ICONS = {
+	error: {
+		name: "cancel",
+		className: "text-error-light"
+	},
+	success: {
+		name: "check_circle",
+		className: "text-success-light"
+	},
+	warning: {
+		name: "warning",
+		className: "text-warning-light"
+	},
+	info: {
+		name: "info",
+		className: "text-info-light"
+	}
+};
+const CalloutTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
+	"data-slot": "callout-title",
+	className: cn("text-base leading-5 font-semibold", className),
+	...props
+});
+const CalloutDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
+	"data-slot": "callout-description",
+	className: cn("text-sm", className),
+	...props
+});
+const CalloutVariantContext = React$1.createContext("info");
+const CALLOUT_ACTION_COLORS = {
+	error: "bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4",
+	success: "bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4",
+	warning: "bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4",
+	info: "bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4"
+};
+const CalloutAction = ({ className, align = "start", ...props }) => {
+	const calloutVariant = React$1.useContext(CalloutVariantContext);
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "callout-action",
+		size: "small",
+		styleVariant: "surface",
+		color: "neutral",
+		className: cn("mt-2 w-fit", {
+			"self-start": align === "start",
+			"self-end": align === "end"
+		}, CALLOUT_ACTION_COLORS[calloutVariant], className),
+		...props
+	});
+};
+const Callout = ({ variant = "info", icon, className, children, ...props }) => {
+	const variantIcon = CALLOUT_ICONS[variant ?? "info"];
+	return /* @__PURE__ */ jsx(CalloutVariantContext.Provider, {
+		value: variant ?? "info",
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "callout",
+			className: cn(calloutVariants({ variant }), className),
+			...props,
+			children: [/* @__PURE__ */ jsx(MaterialSymbol, {
+				className: cn("inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]", variantIcon?.className),
+				name: icon ?? variantIcon.name
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex w-full min-w-0 flex-col gap-1",
+				children
+			})]
+		})
+	});
+};
+//#endregion
+export { Callout, CalloutAction, CalloutDescription, CalloutTitle, calloutVariants };
+
+//# sourceMappingURL=callout.js.map

package/dist/components/callout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callout.js","names":["React"],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype CalloutVariant = 'error' | 'info' | 'success' | 'warning'\n\nconst calloutVariants = cva(\n  'group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0',\n  {\n    variants: {\n      variant: {\n        error: 'bg-base-error-soft text-error',\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        info: 'bg-base-info-soft text-info',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n)\n\nconst CALLOUT_ICONS: Record<\n  CalloutVariant,\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  error: { name: 'cancel', className: 'text-error-light' },\n  success: { name: 'check_circle', className: 'text-success-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  info: { name: 'info', className: 'text-info-light' },\n}\n\ninterface CalloutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof calloutVariants> {\n  /** Overrides the variant's default icon; the variant's color is kept. */\n  icon?: MaterialSymbolIconName\n}\n\nconst CalloutTitle = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    data-slot=\"callout-title\"\n    className={cn('text-base leading-5 font-semibold', className)}\n    {...props}\n  />\n)\n\nconst CalloutDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    data-slot=\"callout-description\"\n    className={cn('text-sm', className)}\n    {...props}\n  />\n)\n\nconst CalloutVariantContext = React.createContext<CalloutVariant>('info')\n\nconst CALLOUT_ACTION_COLORS: Record<CalloutVariant, string> = {\n  error:\n    'bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4',\n  success:\n    'bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4',\n  warning:\n    'bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4',\n  info: 'bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4',\n}\n\ntype CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {\n  align?: 'start' | 'end'\n}\n\nconst CalloutAction = ({\n  className,\n  align = 'start',\n  ...props\n}: CalloutActionType) => {\n  const calloutVariant = React.useContext(CalloutVariantContext)\n\n  return (\n    <Button\n      data-slot=\"callout-action\"\n      size=\"small\"\n      styleVariant=\"surface\"\n      color=\"neutral\"\n      className={cn(\n        'mt-2 w-fit',\n        { 'self-start': align === 'start', 'self-end': align === 'end' },\n        CALLOUT_ACTION_COLORS[calloutVariant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst Callout = ({\n  variant = 'info',\n  icon,\n  className,\n  children,\n  ...props\n}: CalloutProps) => {\n  const variantIcon = CALLOUT_ICONS[variant ?? 'info']\n\n  return (\n    <CalloutVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        data-slot=\"callout\"\n        className={cn(calloutVariants({ variant }), className)}\n        {...props}\n      >\n        <MaterialSymbol\n          className={cn(\n            'inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]',\n            variantIcon?.className,\n          )}\n          name={icon ?? variantIcon.name}\n        />\n        <div className=\"flex w-full min-w-0 flex-col gap-1\">{children}</div>\n      </div>\n    </CalloutVariantContext.Provider>\n  )\n}\n\nexport {\n  Callout,\n  CalloutAction,\n  CalloutDescription,\n  CalloutTitle,\n  calloutVariants,\n}\nexport type { CalloutProps, CalloutVariant }\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,IACtB,uNACA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,MAAM,gBAGF;CACF,OAAO;EAAE,MAAM;EAAU,WAAW;CAAmB;CACvD,SAAS;EAAE,MAAM;EAAgB,WAAW;CAAqB;CACjE,SAAS;EAAE,MAAM;EAAW,WAAW;CAAqB;CAC5D,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAkB;AACrD;AAUA,MAAM,gBAAgB,EACpB,WACA,GAAG,YAEH,oBAAC,QAAD;CACE,aAAU;CACV,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,oBAAC,KAAD;CACE,aAAU;CACV,WAAW,GAAG,WAAW,SAAS;CAClC,GAAI;AACL,CAAA;AAGH,MAAM,wBAAwBA,QAAM,cAA8B,MAAM;AAExE,MAAM,wBAAwD;CAC5D,OACE;CACF,SACE;CACF,SACE;CACF,MAAM;AACR;AAMA,MAAM,iBAAiB,EACrB,WACA,QAAQ,SACR,GAAG,YACoB;CACvB,MAAM,iBAAiBA,QAAM,WAAW,qBAAqB;CAE7D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAa;EACb,OAAM;EACN,WAAW,GACT,cACA;GAAE,cAAc,UAAU;GAAS,YAAY,UAAU;EAAM,GAC/D,sBAAsB,iBACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,WAAW,EACf,UAAU,QACV,MACA,WACA,UACA,GAAG,YACe;CAClB,MAAM,cAAc,cAAc,WAAW;CAE7C,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,WAAW;YAChD,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACrD,GAAI;aAHN,CAKE,oBAAC,gBAAD;IACE,WAAW,GACT,2FACA,aAAa,SACf;IACA,MAAM,QAAQ,YAAY;GAC3B,CAAA,GACD,oBAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CACyB,CAAA;AAEpC"}

package/dist/components/card.cjs

@@ -0,0 +1,100 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+let cnfast = require("cnfast");
+//#region src/components/card.tsx
+const cardVariants = (0, class_variance_authority.cva)("relative flex w-full flex-col gap-1 rounded-2xl py-3", {
+	variants: { variant: {
+		ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) px-(--spark-card-px,1rem)",
+		soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) px-4",
+		surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) px-4",
+		outline: "border border-(--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.forwardRef(({ className, variant, color, render, ...props }, ref) => {
+	const interactive = render != null;
+	const resolved = variant ?? "ambient";
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "div",
+		render,
+		props: {
+			"data-slot": "card",
+			"data-variant": variant,
+			"data-card-color": color === "accent" ? "accent" : void 0,
+			className: (0, cnfast.cn)(cardVariants({ variant }), interactive && [
+				"cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none",
+				"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+				"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+				(resolved === "ambient" || resolved === "soft") && "hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))"
+			], className),
+			ref,
+			...props
+		}
+	});
+});
+Card.displayName = "Card";
+const CardHeader = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex items-center gap-4", className),
+	ref,
+	...props
+}));
+CardHeader.displayName = "CardHeader";
+const CardIcon = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("flex shrink-0 items-center justify-center text-(--spark-card-icon,var(--spark-a11))", className),
+	ref,
+	...props
+}));
+CardIcon.displayName = "CardIcon";
+const CardTitle = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+	className: (0, cnfast.cn)("text-base leading-5 font-medium text-(--spark-card-fg,var(--neutral-a12))", className),
+	ref,
+	...props
+}));
+CardTitle.displayName = "CardTitle";
+const CardDescription = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+	className: (0, cnfast.cn)("text-sm leading-5 text-(--spark-card-fg-muted,var(--neutral-a11))", className),
+	ref,
+	...props
+}));
+CardDescription.displayName = "CardDescription";
+const CardContent = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.cn)("", className),
+	ref,
+	...props
+}));
+CardContent.displayName = "CardContent";
+const CardFooter = react.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, cnfast.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.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	className: (0, cnfast.cn)("relative flex w-full items-center gap-4 rounded-2xl bg-spark-a3 p-4 opacity-80", className),
+	ref,
+	...props,
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "size-10 shrink-0 animate-pulse rounded-full bg-base-gray-soft motion-reduce:animate-none" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-1 flex-col gap-y-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-5 w-1/3 max-w-32 animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none" }), /* @__PURE__ */ (0, react_jsx_runtime.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
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardIcon = CardIcon;
+exports.CardSkeleton = CardSkeleton;
+exports.CardTitle = CardTitle;
+
+//# sourceMappingURL=card.cjs.map

package/dist/components/card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.cjs","names":["React"],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport { 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  'relative flex w-full flex-col gap-1 rounded-2xl py-3',\n  {\n    variants: {\n      variant: {\n        ambient:\n          'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) px-(--spark-card-px,1rem)',\n        soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) px-4',\n        surface:\n          'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) px-4',\n        outline: 'border border-(--spark-card-c-border,var(--neutral-a6)) px-4',\n        ghost: '',\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   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole\n   * card interactive (hover tint, focus ring, disabled styles). Omit → static.\n   */\n  render?: useRender.RenderProp\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, render, ...props }, ref) => {\n    const interactive = render != null\n    const resolved = variant ?? 'ambient'\n    return useRender({\n      defaultTagName: 'div',\n      render,\n      props: {\n        'data-slot': 'card',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        className: cn(\n          cardVariants({ variant }),\n          interactive && [\n            'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n            'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n            'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n            // hover deepens the fill one step; bordered/bare variants only ring\n            (resolved === 'ambient' || resolved === 'soft') &&\n              'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))',\n          ],\n          className,\n        ),\n        ref,\n        ...props,\n      },\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":";;;;;;;;;;AAMA,MAAM,gBAAA,GAAA,yBAAA,KACJ,wDACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,MAAM;EACN,SACE;EACF,SAAS;EACT,OAAO;EACP,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAmBA,MAAM,OAAOA,MAAM,YAChB,EAAE,WAAW,SAAS,OAAO,QAAQ,GAAG,SAAS,QAAQ;CACxD,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,YAAA,GAAA,OAAA,IACE,aAAa,EAAE,QAAQ,CAAC,GACxB,eAAe;IACb;IACA;IACA;KAEC,aAAa,aAAa,aAAa,WACtC;GACJ,GACA,SACF;GACA;GACA,GAAG;EACL;CACF,CAAC;AACH,CACF;AAEA,KAAK,cAAc;AAEnB,MAAM,aAAaA,MAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;CAC7C;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,WAAWA,MAAM,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,YAAA,GAAA,OAAA,IACE,uFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,SAAS,cAAc;AAEvB,MAAM,YAAYA,MAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,MAAD;CACE,YAAA,GAAA,OAAA,IACE,6EACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,UAAU,cAAc;AAExB,MAAM,kBAAkBA,MAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACE,YAAA,GAAA,OAAA,IACE,qEACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,gBAAgB,cAAc;AAE9B,MAAM,cAAcA,MAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CAAK,YAAA,GAAA,OAAA,IAAc,IAAI,SAAS;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAC1D;AAED,YAAY,cAAc;AAE1B,MAAM,aAAaA,MAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACE,YAAA,GAAA,OAAA,IACE,sFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,eAAeA,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,MAAC,OAAD;CACE,YAAA,GAAA,OAAA,IACE,kFACA,SACF;CACK;CACL,GAAI;WANN,CAQE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,CACxG;GACF;EACN;AAED,aAAa,cAAc"}

package/dist/components/card.d.cts

@@ -0,0 +1,34 @@
+"use client";
+
+import { n as SparkCardVariant, t as SparkCardColor } from "../theme-types-8wjgiNA_.cjs";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#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;
+  /**
+   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole
+   * card interactive (hover tint, focus ring, disabled styles). Omit → static.
+   */
+  render?: useRender.RenderProp;
+}
+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.cts.map

package/dist/components/card.d.ts

@@ -0,0 +1,34 @@
+"use client";
+
+import { n as SparkCardVariant, t as SparkCardColor } from "../theme-types-8wjgiNA_.js";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#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;
+  /**
+   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole
+   * card interactive (hover tint, focus ring, disabled styles). Omit → static.
+   */
+  render?: useRender.RenderProp;
+}
+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,90 @@
+"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";
+import { useRender } from "@base-ui/react/use-render";
+//#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:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) px-(--spark-card-px,1rem)",
+		soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) px-4",
+		surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) px-4",
+		outline: "border border-(--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, render, ...props }, ref) => {
+	const interactive = render != null;
+	const resolved = variant ?? "ambient";
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			"data-slot": "card",
+			"data-variant": variant,
+			"data-card-color": color === "accent" ? "accent" : void 0,
+			className: cn(cardVariants({ variant }), interactive && [
+				"cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none",
+				"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+				"disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+				(resolved === "ambient" || resolved === "soft") && "hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))"
+			], className),
+			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 { useRender } from '@base-ui/react/use-render'\nimport { 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  'relative flex w-full flex-col gap-1 rounded-2xl py-3',\n  {\n    variants: {\n      variant: {\n        ambient:\n          'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) px-(--spark-card-px,1rem)',\n        soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) px-4',\n        surface:\n          'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) px-4',\n        outline: 'border border-(--spark-card-c-border,var(--neutral-a6)) px-4',\n        ghost: '',\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   * Base UI polymorphism. Pass `<a href/>` or `<button/>` to make the whole\n   * card interactive (hover tint, focus ring, disabled styles). Omit → static.\n   */\n  render?: useRender.RenderProp\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, color, render, ...props }, ref) => {\n    const interactive = render != null\n    const resolved = variant ?? 'ambient'\n    return useRender({\n      defaultTagName: 'div',\n      render,\n      props: {\n        'data-slot': 'card',\n        'data-variant': variant,\n        'data-card-color': color === 'accent' ? 'accent' : undefined,\n        className: cn(\n          cardVariants({ variant }),\n          interactive && [\n            'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n            'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n            'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n            // hover deepens the fill one step; bordered/bare variants only ring\n            (resolved === 'ambient' || resolved === 'soft') &&\n              'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))',\n          ],\n          className,\n        ),\n        ref,\n        ...props,\n      },\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":";;;;;;;AAMA,MAAM,eAAe,IACnB,wDACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,MAAM;EACN,SACE;EACF,SAAS;EACT,OAAO;EACP,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAmBA,MAAM,OAAOA,QAAM,YAChB,EAAE,WAAW,SAAS,OAAO,QAAQ,GAAG,SAAS,QAAQ;CACxD,MAAM,cAAc,UAAU;CAC9B,MAAM,WAAW,WAAW;CAC5B,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,mBAAmB,UAAU,WAAW,WAAW,KAAA;GACnD,WAAW,GACT,aAAa,EAAE,QAAQ,CAAC,GACxB,eAAe;IACb;IACA;IACA;KAEC,aAAa,aAAa,aAAa,WACtC;GACJ,GACA,SACF;GACA;GACA,GAAG;EACL;CACF,CAAC;AACH,CACF;AAEA,KAAK,cAAc;AAEnB,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GAAG,2BAA2B,SAAS;CAC7C;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,WAAWA,QAAM,YAGpB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,uFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,SAAS,cAAc;AAEvB,MAAM,YAAYA,QAAM,YAGrB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,MAAD;CACE,WAAW,GACT,6EACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,UAAU,cAAc;AAExB,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACE,WAAW,GACT,qEACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,gBAAgB,cAAc;AAE9B,MAAM,cAAcA,QAAM,YAGvB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CAAK,WAAW,GAAG,IAAI,SAAS;CAAQ;CAAK,GAAI;AAAQ,CAAA,CAC1D;AAED,YAAY,cAAc;AAE1B,MAAM,aAAaA,QAAM,YAGtB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACE,WAAW,GACT,sFACA,SACF;CACK;CACL,GAAI;AACL,CAAA,CACF;AAED,WAAW,cAAc;AAEzB,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,qBAAC,OAAD;CACE,WAAW,GACT,kFACA,SACF;CACK;CACL,GAAI;WANN,CAQE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,GAC3G,oBAAC,OAAD,EAAK,WAAU,2FAA4F,CAAA,CACxG;GACF;EACN;AAED,aAAa,cAAc"}

package/dist/components/chart.cjs

@@ -0,0 +1,110 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_components_button = require("./button.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
+function ChartZoomResetButton({ label, onReset }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_button.Button, {
+		className: "absolute top-2 right-2 z-20 h-11 bg-gray-1 text-gray hover:bg-gray-2",
+		color: "neutral",
+		onClick: onReset,
+		styleVariant: "surface",
+		type: "button",
+		children: label
+	});
+}
+/**
+* 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-gray-a6 bg-gray-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: [row.marker === "dashed-line" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						className: "w-3 shrink-0 border-t-2 border-dashed",
+						style: { borderColor: row.color }
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						"aria-hidden": "true",
+						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.ChartZoomResetButton = ChartZoomResetButton;
+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":["Button"],"sources":["../../src/components/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport { Button } from './button'\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 swatch (e.g. `var(--orange-a9)`). */\n  color: string\n  value: React.ReactNode\n  /** Swatch shape: `dot` (default) for solid series, `dashed-line` for dashed ones. */\n  marker?: 'dot' | 'dashed-line'\n}\n\nexport interface ChartTooltipCardProps {\n  label?: React.ReactNode\n  rows: ChartTooltipRow[]\n  className?: string\n}\n\ninterface ChartZoomResetButtonProps {\n  label: string\n  onReset: () => void\n}\n\nexport function ChartZoomResetButton({\n  label,\n  onReset,\n}: ChartZoomResetButtonProps) {\n  return (\n    <Button\n      className=\"absolute top-2 right-2 z-20 h-11 bg-gray-1 text-gray hover:bg-gray-2\"\n      color=\"neutral\"\n      onClick={onReset}\n      styleVariant=\"surface\"\n      type=\"button\"\n    >\n      {label}\n    </Button>\n  )\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-gray-a6 bg-gray-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              {row.marker === 'dashed-line' ? (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"w-3 shrink-0 border-t-2 border-dashed\"\n                  style={{ borderColor: row.color }}\n                />\n              ) : (\n                <span\n                  aria-hidden=\"true\"\n                  className=\"size-2 shrink-0 rounded-[2px]\"\n                  style={{ backgroundColor: row.color }}\n                />\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":";;;;;;;;;AAkCA,SAAgB,qBAAqB,EACnC,OACA,WAC4B;CAC5B,OACE,iBAAA,GAAA,kBAAA,KAACA,0BAAAA,QAAD;EACE,WAAU;EACV,OAAM;EACN,SAAS;EACT,cAAa;EACb,MAAK;YAEJ;CACK,CAAA;AAEZ;;;;;;AAOA,SAAgB,kBAAyC;CACvD,MAAM,OAAA,GAAA,MAAA,QAAgB,IAAI;CAC1B,MAAM,CAAC,MAAM,YAAA,GAAA,MAAA,UAAoB;EAAE,OAAO;EAAG,QAAQ;CAAE,CAAC;CAExD,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EAEd,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,MAAM,QAAQ,QAAQ;GACtB,IAAI,CAAC,OAAO;GACZ,QAAQ;IACN,OAAO,MAAM,YAAY;IACzB,QAAQ,MAAM,YAAY;GAC5B,CAAC;EACH,CAAC;EAED,eAAe,QAAQ,OAAO;EAC9B,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,CAAC;CAEL,OAAO,CAAC,KAAK,IAAI;AACnB;;;;;AA4BA,SAAgB,qBAAqB,EACnC,SACA,SACA,OACA,QACA,UACA,WACA,MAAM,IACN,MAAM,GACN,YAAY,WACsC;CAClD,MAAM,UAAU,KAAK,IAAI,KAAK,QAAQ,WAAW,GAAG;CACpD,MAAM,SAAS,KAAK,IAAI,KAAK,SAAS,YAAY,GAAG;CAErD,IAAI,cAAc,UAAU;EAE1B,MAAM,QAAQ,UAAU;EACxB,MAAM,OACJ,QAAQ,WAAW,OAAO,QAAQ,QAAQ,UAAU,MAAM;EAC5D,OAAO;GACL,MAAM,KAAK,IAAI,KAAK,IAAI,MAAM,GAAG,GAAG,OAAO;GAC3C,KAAK,KAAK,IAAI,KAAK,IAAI,SAAS,GAAG,GAAG,MAAM;EAC9C;CACF;CAEA,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,aAAa,SAAS,MAAM,QAAQ,UAAU;CACpD,OAAO;EACL,MAAM,KAAK,IAAI,KAAK,IAAI,UAAU,WAAW,GAAG,GAAG,GAAG,OAAO;EAC7D,KAAK,KAAK,IAAI,KAAK,IAAI,YAAY,GAAG,GAAG,MAAM;CACjD;AACF;;;;;;AAOA,SAAgB,iBAAiB,EAC/B,OACA,MACA,aACwB;CACxB,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,+GACA,SACF;YAJF,CAMG,UAAU,KAAA,KAAa,UAAU,QAChC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aAAyB;EAAW,CAAA,GAErD,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,CACG,IAAI,WAAW,gBACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,aAAa,IAAI,MAAM;KACjC,CAAA,IAED,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,eAAY;MACZ,WAAU;MACV,OAAO,EAAE,iBAAiB,IAAI,MAAM;KACrC,CAAA,GAEF,IAAI,KACD;QACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eACb,IAAI;IACD,CAAA,CACH;MAtBE,IAAI,GAsBN,CACN;EACE,CAAA,CACF;;AAET"}