@epilot/spark-ui 1.0.0-alpha.4 → 1.0.0-alpha.5

package/dist/components/button.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { d as SparkStyle, t as SparkButtonColor } from "../theme-types-DoROIXpi.js";
+import { u as SparkStyle } from "../theme-types-BDdoRxXa.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
@@ -9,14 +9,13 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
-  color?: "accent" | "neutral" | "danger" | null | undefined;
-  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
+  variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
+  color?: "neutral" | "accent" | "danger" | null | undefined;
+  size?: "small" | "icon" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends React$1.ComponentProps<typeof Button$1>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {
-  /** Visual weight. Overrides the ambient theme style ([data-style]) for this button. */
   styleVariant?: SparkStyle;
-  /** Which scale paints the button; `neutral`/`danger` re-point the accent scale. */
   color?: SparkButtonColor;
   /**
    * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`
@@ -31,6 +30,8 @@ declare function Button({
   styleVariant,
   color,
   size,
+  render,
+  nativeButton,
   variant: _variant,
   ...props
 }: ButtonProps): _$react_jsx_runtime0.JSX.Element;
@@ -38,5 +39,5 @@ declare namespace Button {
   var displayName: string;
 }
 //#endregion
-export { Button, ButtonProps, buttonVariants };
+export { Button, ButtonProps, SparkButtonColor, buttonVariants };
 //# sourceMappingURL=button.d.ts.map

package/dist/components/button.js

@@ -1,6 +1,7 @@
 "use client";
 "use client";
 import { cn } from "../utils/cn.js";
+import { t as accentByColor } from "../accent-colors-Ch2J0EEY.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
@@ -32,10 +33,12 @@ const buttonVariants = cva("group/button inline-flex cursor-pointer items-center
 	defaultVariants: { size: "default" }
 });
 const buttonRecipe = "bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]";
-function Button({ className, styleVariant, color, size, variant: _variant, ...props }) {
+function Button({ className, styleVariant, color, size, render, nativeButton, variant: _variant, ...props }) {
 	return /* @__PURE__ */ jsx(Button$1, {
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0,
-		"data-accent-color": color === "neutral" ? "gray" : color === "danger" ? "red" : void 0,
+		"data-accent-color": color ? accentByColor[color] : void 0,
+		nativeButton: nativeButton ?? render === void 0,
+		render,
 		className: cn(buttonVariants({
 			size,
 			color

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport type { SparkButtonColor, SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst buttonVariants = cva(\n  'group/button inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors 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 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      // Class-only axis, kept only for callers of `buttonVariants()` that style a\n      // non-<Button> element (e.g. react-day-picker `classNames`, dialog/sheet close\n      // Xs). The <Button> component never uses it — it applies `buttonRecipe` + `data-*`\n      // attributes instead. These strings mirror the style/color defaults so class-only\n      // callers get the same look.\n      variant: {\n        primary:\n          'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10))',\n        secondary:\n          'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--color-gray-a7)] hover:bg-gray-a3',\n        tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n        bare: 'rounded-none! text-gray-12 outline-hidden!',\n        destructive:\n          'bg-red-a3 text-red-a11 hover:bg-red-a4 focus-visible:ring-base-error-solid',\n      },\n      // bg/text/border flow through CSS vars set by [data-accent-color]; only the\n      // focus ring differs per color, so it's the only class this axis carries.\n      color: {\n        accent: '',\n        neutral: '',\n        danger: 'focus-visible:ring-base-error-solid',\n      },\n      size: {\n        small: 'h-9 px-3 text-sm [&_svg:not([class*=size-])]:size-4',\n        default: 'h-10 px-3 [&_svg:not([class*=size-])]:size-5',\n        medium: 'h-11 px-4 [&_svg:not([class*=size-])]:size-6',\n        'icon-small': 'size-9 [&_svg:not([class*=size-])]:size-4',\n        icon: 'size-10 [&_svg:not([class*=size-])]:size-5',\n        'icon-medium': 'size-11 [&_svg:not([class*=size-])]:size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n)\n\n// The recipe the <Button> component applies for the style/color API. It reads the shared\n// `--spark-style-*` tokens (set by [data-style], re-pointed to neutral/danger by\n// [data-accent-color]); the 1px inset shadow renders the border without the geometry\n// shift a real border adds (transparent when `--spark-style-border` is unset).\nconst buttonRecipe =\n  'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nexport interface ButtonProps\n  extends\n    React.ComponentProps<typeof ButtonPrimitive>,\n    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {\n  /** Visual weight. Overrides the ambient theme style ([data-style]) for this button. */\n  styleVariant?: SparkStyle\n  /** Which scale paints the button; `neutral`/`danger` re-point the accent scale. */\n  color?: SparkButtonColor\n  /**\n   * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`\n   * (`solid | soft | surface | ghost | outline`) and `color`\n   * (`accent | neutral | danger`) instead. The `variant` axis on\n   * `buttonVariants` exists only for class-string callers.\n   */\n  variant?: never\n}\n\n// `render` replaces the old `asChild`: pass the element to render (e.g. a\n// router <Link/>) plus `nativeButton={false}`; Base UI merges props and maps\n// `disabled` to aria semantics on non-button elements.\nfunction Button({\n  className,\n  styleVariant,\n  color,\n  size,\n  // deprecated no-op (see ButtonProps) -- kept out of the DOM spread\n  variant: _variant,\n  ...props\n}: ButtonProps) {\n  // With no style/color the button emits no style attrs, so it follows the\n  // ambient [data-style] + high-contrast cascade (CSS fallback = solid accent).\n  // Setting `color` alone pins `solid`: [data-accent-color] re-points --spark-*,\n  // but --spark-style-* resolve on the element declaring [data-style], so the\n  // button must re-declare its own [data-style] for the re-point to take effect.\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor =\n    color === 'neutral' ? 'gray' : color === 'danger' ? 'red' : undefined\n\n  return (\n    <ButtonPrimitive\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      className={cn(buttonVariants({ size, color }), buttonRecipe, className)}\n      {...props}\n    />\n  )\n}\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;AAQA,MAAM,iBAAiB,IACrB,6cACA;CACE,UAAU;EAMR,SAAS;GACP,SACE;GACF,WACE;GACF,UAAU;GACV,MAAM;GACN,aACE;GACH;EAGD,OAAO;GACL,QAAQ;GACR,SAAS;GACT,QAAQ;GACT;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,QAAQ;GACR,cAAc;GACd,MAAM;GACN,eAAe;GAChB;EACF;CACD,iBAAiB,EACf,MAAM,WACP;CACF,CACF;AAMD,MAAM,eACJ;AAsBF,SAAS,OAAO,EACd,WACA,cACA,OACA,MAEA,SAAS,UACT,GAAG,SACW;AAWd,QACE,oBAACA,UAAD;EACE,cAPY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAOpD,qBALF,UAAU,YAAY,SAAS,UAAU,WAAW,QAAQ,KAAA;EAM1D,WAAW,GAAG,eAAe;GAAE;GAAM;GAAO,CAAC,EAAE,cAAc,UAAU;EACvE,GAAI;EACJ,CAAA;;AAIN,OAAO,cAAc"}
+{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../src/components/button.tsx"],"sourcesContent":["'use client'\n\nimport { Button as ButtonPrimitive } from '@base-ui/react/button'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nconst buttonVariants = cva(\n  'group/button inline-flex cursor-pointer items-center justify-center gap-2 rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] text-base font-medium whitespace-nowrap transition-colors 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 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        primary:\n          'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10))',\n        secondary:\n          'bg-gray-2 text-gray-a11 shadow-[inset_0_0_0_1px_var(--color-gray-a7)] hover:bg-gray-a3',\n        tertiary: 'bg-transparent text-gray-a11 hover:bg-gray-a3',\n        bare: 'rounded-none! text-gray-12 outline-hidden!',\n        destructive:\n          'bg-red-a3 text-red-a11 hover:bg-red-a4 focus-visible:ring-base-error-solid',\n      },\n      color: {\n        accent: '',\n        neutral: '',\n        danger: 'focus-visible:ring-base-error-solid',\n      },\n      size: {\n        small: 'h-9 px-3 text-sm [&_svg:not([class*=size-])]:size-4',\n        default: 'h-10 px-3 [&_svg:not([class*=size-])]:size-5',\n        medium: 'h-11 px-4 [&_svg:not([class*=size-])]:size-6',\n        'icon-small': 'size-9 [&_svg:not([class*=size-])]:size-4',\n        icon: 'size-10 [&_svg:not([class*=size-])]:size-5',\n        'icon-medium': 'size-11 [&_svg:not([class*=size-])]:size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n)\n\nconst buttonRecipe =\n  'bg-(--spark-style-bg,var(--spark-9)) text-(--spark-style-fg,var(--spark-contrast)) hover:bg-(--spark-style-bg-hover,var(--spark-10)) shadow-[inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]'\n\nexport type SparkButtonColor = 'accent' | 'neutral' | 'danger'\n\nexport interface ButtonProps\n  extends\n    React.ComponentProps<typeof ButtonPrimitive>,\n    Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {\n  styleVariant?: SparkStyle\n  color?: SparkButtonColor\n  /**\n   * @deprecated Not a `<Button>` prop and silently ignored -- use `styleVariant`\n   * (`solid | soft | surface | ghost | outline`) and `color`\n   * (`accent | neutral | danger`) instead. The `variant` axis on\n   * `buttonVariants` exists only for class-string callers.\n   */\n  variant?: never\n}\n\nfunction Button({\n  className,\n  styleVariant,\n  color,\n  size,\n  render,\n  nativeButton,\n  variant: _variant,\n  ...props\n}: ButtonProps) {\n  const hasLook = styleVariant !== undefined || color !== undefined\n  const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n  const dataAccentColor = color ? accentByColor[color] : undefined\n\n  return (\n    <ButtonPrimitive\n      data-style={dataStyle}\n      data-accent-color={dataAccentColor}\n      nativeButton={nativeButton ?? render === undefined}\n      render={render}\n      className={cn(buttonVariants({ size, color }), buttonRecipe, className)}\n      {...props}\n    />\n  )\n}\n\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;AASA,MAAM,iBAAiB,IACrB,6cACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,UAAU;GACV,MAAM;GACN,aACE;GACH;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACT,QAAQ;GACT;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,QAAQ;GACR,cAAc;GACd,MAAM;GACN,eAAe;GAChB;EACF;CACD,iBAAiB,EACf,MAAM,WACP;CACF,CACF;AAED,MAAM,eACJ;AAmBF,SAAS,OAAO,EACd,WACA,cACA,OACA,MACA,QACA,cACA,SAAS,UACT,GAAG,SACW;AAKd,QACE,oBAACA,UAAD;EACE,cANY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;EAMpD,qBALoB,QAAQ,cAAc,SAAS,KAAA;EAMnD,cAAc,gBAAgB,WAAW,KAAA;EACjC;EACR,WAAW,GAAG,eAAe;GAAE;GAAM;GAAO,CAAC,EAAE,cAAc,UAAU;EACvE,GAAI;EACJ,CAAA;;AAIN,OAAO,cAAc"}

package/dist/components/card.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { n as SparkCardColor, r as SparkCardVariant } from "../theme-types-r20EJfEC.cjs";
+import { n as SparkCardVariant, t as SparkCardColor } from "../theme-types-BwSJKdsB.cjs";
 import * as React$1 from "react";
 
 //#region src/components/card.d.ts

package/dist/components/card.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { n as SparkCardColor, r as SparkCardVariant } from "../theme-types-DoROIXpi.js";
+import { n as SparkCardVariant, t as SparkCardColor } from "../theme-types-BDdoRxXa.js";
 import * as React$1 from "react";
 
 //#region src/components/card.d.ts

package/dist/components/chart.cjs

@@ -63,7 +63,7 @@ function clampTooltipPosition({ anchorX, anchorY, width, height, tipWidth, tipHe
 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),
+		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

package/dist/components/chart.cjs.map

@@ -1 +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"}
+{"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-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              <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,+GACA,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.js

@@ -60,7 +60,7 @@ function clampTooltipPosition({ anchorX, anchorY, width, height, tipWidth, tipHe
 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),
+		className: 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__ */ jsx("div", {
 			className: "font-medium text-gray",
 			children: label

package/dist/components/chart.js.map

@@ -1 +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"}
+{"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-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              <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,+GACA,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

@@ -1,35 +1,42 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
+const require_accent_colors = require("../accent-colors-CjHCf8fH.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" })]
-	})
-}));
+const Checkbox = react.forwardRef(({ className, size: _size, bordered: _bordered, styleVariant, color, ...props }, ref) => {
+	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
+	const dataAccentColor = color ? require_accent_colors.accentByColor[color] : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_checkbox.Checkbox.Root, {
+		"data-style": dataStyle,
+		"data-accent-color": dataAccentColor,
+		className: (0, cnfast.cn)("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--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-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft", "data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))", "data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--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-(--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;

package/dist/components/checkbox.cjs.map

@@ -1 +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"}
+{"version":3,"file":"checkbox.cjs","names":["React","accentByColor","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\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  styleVariant?: SparkStyle\n  color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    {\n      className,\n      size: _size,\n      bordered: _bordered,\n      styleVariant,\n      color,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n    const dataAccentColor = color ? accentByColor[color] : undefined\n\n    return (\n      <CheckboxPrimitive.Root\n        data-style={dataStyle}\n        data-accent-color={dataAccentColor}\n        className={cn(\n          'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--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          'rounded-[min(var(--spark-rounded-sm),40%)]',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n          'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft',\n          'data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))',\n          'data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--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-(--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  },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;;;;AAuBA,MAAM,WAAWA,MAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQC,sBAAAA,cAAc,SAAS,KAAA;AAEvD,QACE,iBAAA,GAAA,kBAAA,KAACC,wBAAAA,SAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EACnB,YAAA,GAAA,OAAA,IACE,yJACA,qIACA,8CACA,iFACA,6DACA,0EACA,+GACA,2HACA,UACD;EACI;EACL,GAAI;YAEJ,iBAAA,GAAA,kBAAA,MAACA,wBAAAA,SAAkB,WAAnB;GAA6B,WAAU;aAAvC,CAEE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,MAAK;IACL,SAAQ;cAER,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,WAAU;KACV,GAAE;KACF,YAAY;KACZ,QAAO;KACP,eAAc;KACd,gBAAe;KACf,aAAa;KACb,CAAA;IACE,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,qIAAsI,CAAA,CAC1H;;EACP,CAAA;EAG9B;AAED,SAAS,cAAc"}

package/dist/components/checkbox.d.cts

@@ -1,9 +1,11 @@
 "use client";
 
+import { u as SparkStyle } from "../theme-types-BwSJKdsB.cjs";
 import * as React$1 from "react";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 
 //#region src/components/checkbox.d.ts
+type SparkCheckboxColor = 'accent' | 'neutral' | 'danger';
 type CheckboxProps = Checkbox$1.Root.Props & {
   /**
    * @deprecated The checkbox now renders a single 24px size (with a 40px hit
@@ -15,8 +17,10 @@ type CheckboxProps = Checkbox$1.Root.Props & {
    * but ignored.
    */
   bordered?: boolean;
+  styleVariant?: SparkStyle;
+  color?: SparkCheckboxColor;
 };
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
 //#endregion
-export { Checkbox, type CheckboxProps };
+export { Checkbox, type CheckboxProps, SparkCheckboxColor };
 //# sourceMappingURL=checkbox.d.cts.map

package/dist/components/checkbox.d.ts

@@ -1,9 +1,11 @@
 "use client";
 
+import { u as SparkStyle } from "../theme-types-BDdoRxXa.js";
 import * as React$1 from "react";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 
 //#region src/components/checkbox.d.ts
+type SparkCheckboxColor = 'accent' | 'neutral' | 'danger';
 type CheckboxProps = Checkbox$1.Root.Props & {
   /**
    * @deprecated The checkbox now renders a single 24px size (with a 40px hit
@@ -15,8 +17,10 @@ type CheckboxProps = Checkbox$1.Root.Props & {
    * but ignored.
    */
   bordered?: boolean;
+  styleVariant?: SparkStyle;
+  color?: SparkCheckboxColor;
 };
 declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
 //#endregion
-export { Checkbox, type CheckboxProps };
+export { Checkbox, type CheckboxProps, SparkCheckboxColor };
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/components/checkbox.js

@@ -1,32 +1,39 @@
 "use client";
 import { cn } from "../utils/cn.js";
+import { t as accentByColor } from "../accent-colors-Ch2J0EEY.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" })]
-	})
-}));
+const Checkbox = React$1.forwardRef(({ className, size: _size, bordered: _bordered, styleVariant, color, ...props }, ref) => {
+	const dataStyle = styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "solid" : void 0;
+	const dataAccentColor = color ? accentByColor[color] : void 0;
+	return /* @__PURE__ */ jsx(Checkbox$1.Root, {
+		"data-style": dataStyle,
+		"data-accent-color": dataAccentColor,
+		className: cn("peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--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-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft", "data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))", "data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--spark-style-bg,var(--spark-9))", className),
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(Checkbox$1.Indicator, {
+			className: "group inline-flex items-center justify-center text-(--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 };

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","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,QAAM,YAKpB,EAAE,WAAW,MAAM,OAAO,UAAU,WAAW,GAAG,SAAS,QAC5D,oBAACC,WAAkB,MAAnB;CACE,WAAW,GAGT,8JACA,qIAKA,8CACA,+EAEA,6DAGA,qFAGA,+HACA,2IACA,UACD;CACI;CACL,GAAI;WAEJ,qBAACA,WAAkB,WAAnB;EAA6B,WAAU;YAAvC,CAEE,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,MAAK;GACL,SAAQ;aAER,oBAAC,QAAD;IACE,WAAU;IACV,GAAE;IACF,YAAY;IACZ,QAAO;IACP,eAAc;IACd,gBAAe;IACf,aAAa;IACb,CAAA;GACE,CAAA,EACN,oBAAC,QAAD,EAAM,WAAU,qIAAsI,CAAA,CAC1H;;CACP,CAAA,CACzB;AAEF,SAAS,cAAc"}
+{"version":3,"file":"checkbox.js","names":["React","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'\nimport * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkCheckboxColor = 'accent' | 'neutral' | 'danger'\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  styleVariant?: SparkStyle\n  color?: SparkCheckboxColor\n}\n\nconst Checkbox = React.forwardRef<\n  React.ComponentRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    {\n      className,\n      size: _size,\n      bordered: _bordered,\n      styleVariant,\n      color,\n      ...props\n    },\n    ref,\n  ) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    const dataStyle = hasLook ? (styleVariant ?? 'solid') : undefined\n    const dataAccentColor = color ? accentByColor[color] : undefined\n\n    return (\n      <CheckboxPrimitive.Root\n        data-style={dataStyle}\n        data-accent-color={dataAccentColor}\n        className={cn(\n          'peer relative inline-flex size-6 shrink-0 cursor-pointer items-center justify-center border-(length:--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          'rounded-[min(var(--spark-rounded-sm),40%)]',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'data-disabled:cursor-not-allowed data-disabled:opacity-50',\n          'border-(--spark-style-idle-border,var(--spark-a7)) bg-base-accent-soft',\n          'data-checked:border-(--spark-style-border,var(--spark-9)) data-checked:bg-(--spark-style-bg,var(--spark-9))',\n          'data-indeterminate:border-(--spark-style-border,var(--spark-9)) data-indeterminate:bg-(--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-(--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  },\n)\n\nCheckbox.displayName = 'Checkbox'\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":";;;;;;;AAuBA,MAAM,WAAWA,QAAM,YAKnB,EACE,WACA,MAAM,OACN,UAAU,WACV,cACA,OACA,GAAG,SAEL,QACG;CAEH,MAAM,YADU,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAC3B,gBAAgB,UAAW,KAAA;CACxD,MAAM,kBAAkB,QAAQ,cAAc,SAAS,KAAA;AAEvD,QACE,oBAACC,WAAkB,MAAnB;EACE,cAAY;EACZ,qBAAmB;EACnB,WAAW,GACT,yJACA,qIACA,8CACA,iFACA,6DACA,0EACA,+GACA,2HACA,UACD;EACI;EACL,GAAI;YAEJ,qBAACA,WAAkB,WAAnB;GAA6B,WAAU;aAAvC,CAEE,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,MAAK;IACL,SAAQ;cAER,oBAAC,QAAD;KACE,WAAU;KACV,GAAE;KACF,YAAY;KACZ,QAAO;KACP,eAAc;KACd,gBAAe;KACf,aAAa;KACb,CAAA;IACE,CAAA,EACN,oBAAC,QAAD,EAAM,WAAU,qIAAsI,CAAA,CAC1H;;EACP,CAAA;EAG9B;AAED,SAAS,cAAc"}

package/dist/components/circular-gauge.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { t as Tone } from "../tones-DyCkL71h.js";
+import { t as Tone } from "../tones-PXJGlSpe.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/components/day-of-week-picker.cjs

@@ -98,7 +98,7 @@ const DayOfWeekPicker = react.forwardRef(({ className, disabled, onValueChange,
 					"aria-label": dayAriaLabels?.[day.value] ?? label,
 					disabled,
 					onClick: () => toggle(day.value),
-					className: (0, cnfast.cn)("inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-slate-a4"),
+					className: (0, cnfast.cn)("inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-gray-a4"),
 					children: label
 				}, day.value);
 			})
@@ -112,7 +112,7 @@ function PresetButton({ active, children, disabled, onClick }) {
 		onClick,
 		disabled,
 		"aria-pressed": active,
-		className: (0, cnfast.cn)("inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-slate-a3"),
+		className: (0, cnfast.cn)("inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-gray-a3"),
 		children
 	});
 }

package/dist/components/day-of-week-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"day-of-week-picker.cjs","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-slate-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-slate-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAW,OAAO;EAAO;CAClC;EAAE,OAAO;EAAa,OAAO;EAAO;CACpC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CAClC;AAED,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;CACD;AACD,MAAM,eAA0B,CAAC,YAAY,SAAS;AACtD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,MAAM;AA4BzD,MAAM,kBAAkBA,MAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,MAAM,cAAc,IAAI,IAAI,MAAM,EAAE,CAAC,MAAM,CAAC;CAE7D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,SAAS;AAC9B,MAAI,KAAK,IAAI,IAAI,CACf,MAAK,OAAO,IAAI;MAEhB,MAAK,IAAI,IAAI;AAEf,gBAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC;;CAGpD,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,EAAE,CAAC;CAEzE,MAAM,aAAa,WAAsB;AACvC,gBAAc,OAAO;;AAGvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,UAAU;YAA9D,CACG,eACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,cAAc;KACpB;KACV,eAAe,UAAU,cAAc;eAEtC,cAAc,YAAY;KACd,CAAA;IACf,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,WAAW;KACb,CAAA;IACf,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,SAAS;KACf;KACV,eAAe,UAAU,SAAS;eAEjC,cAAc,YAAY;KACd,CAAA;IACX;MAER,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,MAAM;IACvC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;AAE5C,WACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,MAAM;KAChC,YAAA,GAAA,OAAA,IACE,uOACA,UACI,+DACA,sDACL;eAEA;KACM,EAfF,IAAI,MAeF;KAEX;GACE,CAAA,CACF;;EAGX;AAED,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;AACpB,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,qOACA,SACI,oCACA,mDACL;EAEA;EACM,CAAA"}
+{"version":3,"file":"day-of-week-picker.cjs","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAW,OAAO;EAAO;CAClC;EAAE,OAAO;EAAa,OAAO;EAAO;CACpC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CAClC;AAED,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;CACD;AACD,MAAM,eAA0B,CAAC,YAAY,SAAS;AACtD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,MAAM;AA4BzD,MAAM,kBAAkBA,MAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,MAAM,cAAc,IAAI,IAAI,MAAM,EAAE,CAAC,MAAM,CAAC;CAE7D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,SAAS;AAC9B,MAAI,KAAK,IAAI,IAAI,CACf,MAAK,OAAO,IAAI;MAEhB,MAAK,IAAI,IAAI;AAEf,gBAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC;;CAGpD,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,EAAE,CAAC;CAEzE,MAAM,aAAa,WAAsB;AACvC,gBAAc,OAAO;;AAGvB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,YAAA,GAAA,OAAA,IAAc,uBAAuB,UAAU;YAA9D,CACG,eACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,cAAc;KACpB;KACV,eAAe,UAAU,cAAc;eAEtC,cAAc,YAAY;KACd,CAAA;IACf,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,WAAW;KACb,CAAA;IACf,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACE,QAAQ,QAAQ,SAAS;KACf;KACV,eAAe,UAAU,SAAS;eAEjC,cAAc,YAAY;KACd,CAAA;IACX;MAER,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,MAAM;IACvC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;AAE5C,WACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,MAAM;KAChC,YAAA,GAAA,OAAA,IACE,yOACA,UACI,+DACA,qDACL;eAEA;KACM,EAfF,IAAI,MAeF;KAEX;GACE,CAAA,CACF;;EAGX;AAED,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;AACpB,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,uOACA,SACI,oCACA,kDACL;EAEA;EACM,CAAA"}

package/dist/components/day-of-week-picker.js

@@ -95,7 +95,7 @@ const DayOfWeekPicker = React$1.forwardRef(({ className, disabled, onValueChange
 					"aria-label": dayAriaLabels?.[day.value] ?? label,
 					disabled,
 					onClick: () => toggle(day.value),
-					className: cn("inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-slate-a4"),
+					className: cn("inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", checked ? "bg-base-accent-solid text-accent-contrast hover:bg-spark-9" : "bg-base-gray-soft text-gray-light hover:bg-gray-a4"),
 					children: label
 				}, day.value);
 			})
@@ -109,7 +109,7 @@ function PresetButton({ active, children, disabled, onClick }) {
 		onClick,
 		disabled,
 		"aria-pressed": active,
-		className: cn("inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-slate-a3"),
+		className: cn("inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", active ? "bg-base-accent-soft text-accent" : "bg-transparent text-gray-light hover:bg-gray-a3"),
 		children
 	});
 }

package/dist/components/day-of-week-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"day-of-week-picker.js","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-slate-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-slate-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAW,OAAO;EAAO;CAClC;EAAE,OAAO;EAAa,OAAO;EAAO;CACpC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CAClC;AAED,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;CACD;AACD,MAAM,eAA0B,CAAC,YAAY,SAAS;AACtD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,MAAM;AA4BzD,MAAM,kBAAkBA,QAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,QAAM,cAAc,IAAI,IAAI,MAAM,EAAE,CAAC,MAAM,CAAC;CAE7D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,SAAS;AAC9B,MAAI,KAAK,IAAI,IAAI,CACf,MAAK,OAAO,IAAI;MAEhB,MAAK,IAAI,IAAI;AAEf,gBAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC;;CAGpD,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,EAAE,CAAC;CAEzE,MAAM,aAAa,WAAsB;AACvC,gBAAc,OAAO;;AAGvB,QACE,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,uBAAuB,UAAU;YAA9D,CACG,eACC,qBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,oBAAC,cAAD;KACE,QAAQ,QAAQ,cAAc;KACpB;KACV,eAAe,UAAU,cAAc;eAEtC,cAAc,YAAY;KACd,CAAA;IACf,oBAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,WAAW;KACb,CAAA;IACf,oBAAC,cAAD;KACE,QAAQ,QAAQ,SAAS;KACf;KACV,eAAe,UAAU,SAAS;eAEjC,cAAc,YAAY;KACd,CAAA;IACX;MAER,oBAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,MAAM;IACvC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;AAE5C,WACE,oBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,MAAM;KAChC,WAAW,GACT,uOACA,UACI,+DACA,sDACL;eAEA;KACM,EAfF,IAAI,MAeF;KAEX;GACE,CAAA,CACF;;EAGX;AAED,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;AACpB,QACE,oBAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,WAAW,GACT,qOACA,SACI,oCACA,mDACL;EAEA;EACM,CAAA"}
+{"version":3,"file":"day-of-week-picker.js","names":["React"],"sources":["../../src/components/day-of-week-picker.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nexport type WeekDay =\n  | 'monday'\n  | 'tuesday'\n  | 'wednesday'\n  | 'thursday'\n  | 'friday'\n  | 'saturday'\n  | 'sunday'\n\nexport const WEEK_DAYS: ReadonlyArray<{ value: WeekDay; short: string }> = [\n  { value: 'monday', short: 'Mon' },\n  { value: 'tuesday', short: 'Tue' },\n  { value: 'wednesday', short: 'Wed' },\n  { value: 'thursday', short: 'Thu' },\n  { value: 'friday', short: 'Fri' },\n  { value: 'saturday', short: 'Sat' },\n  { value: 'sunday', short: 'Sun' },\n]\n\nconst WEEKDAYS_ONLY: WeekDay[] = [\n  'monday',\n  'tuesday',\n  'wednesday',\n  'thursday',\n  'friday',\n]\nconst WEEKEND_ONLY: WeekDay[] = ['saturday', 'sunday']\nconst ALL_DAYS: WeekDay[] = WEEK_DAYS.map((d) => d.value)\n\ninterface DayOfWeekPickerProps {\n  value: WeekDay[]\n  onValueChange: (next: WeekDay[]) => void\n  disabled?: boolean\n  /** Show \"Weekdays / Weekend / Every day\" preset shortcuts above the chips. */\n  showPresets?: boolean\n  className?: string\n  /** Short labels (e.g. \"Mon\", \"Tue\") shown on each day chip. Defaults to English. */\n  dayLabels?: Partial<Record<WeekDay, string>>\n  /**\n   * Full accessible names per day (e.g. \"Monday\"). Used as each chip's\n   * `aria-label`. Falls back to the visible short label when omitted.\n   */\n  dayAriaLabels?: Partial<Record<WeekDay, string>>\n  /** Preset button labels. Each defaults to its English name. */\n  presetLabels?: {\n    weekdays?: React.ReactNode\n    weekend?: React.ReactNode\n    everyDay?: React.ReactNode\n  }\n  /** Accessible label for the preset row. Defaults to `\"Day presets\"`. */\n  presetsAriaLabel?: string\n  /** Accessible label for the day chip group. Defaults to `\"Days of the week\"`. */\n  daysAriaLabel?: string\n}\n\nconst DayOfWeekPicker = React.forwardRef<HTMLDivElement, DayOfWeekPickerProps>(\n  (\n    {\n      className,\n      disabled,\n      onValueChange,\n      showPresets = false,\n      value,\n      dayLabels,\n      dayAriaLabels,\n      presetLabels,\n      presetsAriaLabel = 'Day presets',\n      daysAriaLabel = 'Days of the week',\n    },\n    ref,\n  ) => {\n    const selected = React.useMemo(() => new Set(value), [value])\n\n    const toggle = (day: WeekDay) => {\n      const next = new Set(selected)\n      if (next.has(day)) {\n        next.delete(day)\n      } else {\n        next.add(day)\n      }\n      onValueChange(ALL_DAYS.filter((d) => next.has(d)))\n    }\n\n    const matches = (preset: WeekDay[]) =>\n      selected.size === preset.length && preset.every((d) => selected.has(d))\n\n    const setPreset = (preset: WeekDay[]) => {\n      onValueChange(preset)\n    }\n\n    return (\n      <div ref={ref} className={cn('flex flex-col gap-2', className)}>\n        {showPresets && (\n          <div\n            role=\"group\"\n            aria-label={presetsAriaLabel}\n            className=\"flex flex-wrap gap-1.5\"\n          >\n            <PresetButton\n              active={matches(WEEKDAYS_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKDAYS_ONLY)}\n            >\n              {presetLabels?.weekdays ?? 'Weekdays'}\n            </PresetButton>\n            <PresetButton\n              active={matches(WEEKEND_ONLY)}\n              disabled={disabled}\n              onClick={() => setPreset(WEEKEND_ONLY)}\n            >\n              {presetLabels?.weekend ?? 'Weekend'}\n            </PresetButton>\n            <PresetButton\n              active={matches(ALL_DAYS)}\n              disabled={disabled}\n              onClick={() => setPreset(ALL_DAYS)}\n            >\n              {presetLabels?.everyDay ?? 'Every day'}\n            </PresetButton>\n          </div>\n        )}\n        <div role=\"group\" aria-label={daysAriaLabel} className=\"flex gap-1\">\n          {WEEK_DAYS.map((day) => {\n            const checked = selected.has(day.value)\n            const label = dayLabels?.[day.value] ?? day.short\n            const ariaLabel = dayAriaLabels?.[day.value] ?? label\n            return (\n              <button\n                key={day.value}\n                type=\"button\"\n                role=\"checkbox\"\n                aria-checked={checked}\n                aria-label={ariaLabel}\n                disabled={disabled}\n                onClick={() => toggle(day.value)}\n                className={cn(\n                  'inline-flex h-9 flex-1 items-center justify-center rounded-circle text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n                  checked\n                    ? 'bg-base-accent-solid text-accent-contrast hover:bg-spark-9'\n                    : 'bg-base-gray-soft text-gray-light hover:bg-gray-a4',\n                )}\n              >\n                {label}\n              </button>\n            )\n          })}\n        </div>\n      </div>\n    )\n  },\n)\n\nDayOfWeekPicker.displayName = 'DayOfWeekPicker'\n\ninterface PresetButtonProps {\n  active: boolean\n  disabled?: boolean\n  onClick: () => void\n  children: React.ReactNode\n}\n\nfunction PresetButton({\n  active,\n  children,\n  disabled,\n  onClick,\n}: PresetButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={disabled}\n      aria-pressed={active}\n      className={cn(\n        'inline-flex h-7 items-center justify-center rounded-circle px-3 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        active\n          ? 'bg-base-accent-soft text-accent'\n          : 'bg-transparent text-gray-light hover:bg-gray-a3',\n      )}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { DayOfWeekPicker }\n"],"mappings":";;;;;AAYA,MAAa,YAA8D;CACzE;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAW,OAAO;EAAO;CAClC;EAAE,OAAO;EAAa,OAAO;EAAO;CACpC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CACjC;EAAE,OAAO;EAAY,OAAO;EAAO;CACnC;EAAE,OAAO;EAAU,OAAO;EAAO;CAClC;AAED,MAAM,gBAA2B;CAC/B;CACA;CACA;CACA;CACA;CACD;AACD,MAAM,eAA0B,CAAC,YAAY,SAAS;AACtD,MAAM,WAAsB,UAAU,KAAK,MAAM,EAAE,MAAM;AA4BzD,MAAM,kBAAkBA,QAAM,YAE1B,EACE,WACA,UACA,eACA,cAAc,OACd,OACA,WACA,eACA,cACA,mBAAmB,eACnB,gBAAgB,sBAElB,QACG;CACH,MAAM,WAAWA,QAAM,cAAc,IAAI,IAAI,MAAM,EAAE,CAAC,MAAM,CAAC;CAE7D,MAAM,UAAU,QAAiB;EAC/B,MAAM,OAAO,IAAI,IAAI,SAAS;AAC9B,MAAI,KAAK,IAAI,IAAI,CACf,MAAK,OAAO,IAAI;MAEhB,MAAK,IAAI,IAAI;AAEf,gBAAc,SAAS,QAAQ,MAAM,KAAK,IAAI,EAAE,CAAC,CAAC;;CAGpD,MAAM,WAAW,WACf,SAAS,SAAS,OAAO,UAAU,OAAO,OAAO,MAAM,SAAS,IAAI,EAAE,CAAC;CAEzE,MAAM,aAAa,WAAsB;AACvC,gBAAc,OAAO;;AAGvB,QACE,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,uBAAuB,UAAU;YAA9D,CACG,eACC,qBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,WAAU;aAHZ;IAKE,oBAAC,cAAD;KACE,QAAQ,QAAQ,cAAc;KACpB;KACV,eAAe,UAAU,cAAc;eAEtC,cAAc,YAAY;KACd,CAAA;IACf,oBAAC,cAAD;KACE,QAAQ,QAAQ,aAAa;KACnB;KACV,eAAe,UAAU,aAAa;eAErC,cAAc,WAAW;KACb,CAAA;IACf,oBAAC,cAAD;KACE,QAAQ,QAAQ,SAAS;KACf;KACV,eAAe,UAAU,SAAS;eAEjC,cAAc,YAAY;KACd,CAAA;IACX;MAER,oBAAC,OAAD;GAAK,MAAK;GAAQ,cAAY;GAAe,WAAU;aACpD,UAAU,KAAK,QAAQ;IACtB,MAAM,UAAU,SAAS,IAAI,IAAI,MAAM;IACvC,MAAM,QAAQ,YAAY,IAAI,UAAU,IAAI;AAE5C,WACE,oBAAC,UAAD;KAEE,MAAK;KACL,MAAK;KACL,gBAAc;KACd,cAPc,gBAAgB,IAAI,UAAU;KAQlC;KACV,eAAe,OAAO,IAAI,MAAM;KAChC,WAAW,GACT,yOACA,UACI,+DACA,qDACL;eAEA;KACM,EAfF,IAAI,MAeF;KAEX;GACE,CAAA,CACF;;EAGX;AAED,gBAAgB,cAAc;AAS9B,SAAS,aAAa,EACpB,QACA,UACA,UACA,WACoB;AACpB,QACE,oBAAC,UAAD;EACE,MAAK;EACI;EACC;EACV,gBAAc;EACd,WAAW,GACT,uOACA,SACI,oCACA,kDACL;EAEA;EACM,CAAA"}