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

package/dist/accent-colors-Ch2J0EEY.js

@@ -0,0 +1,13 @@
+"use client";
+//#region src/lib/accent-colors.ts
+const accentByColor = {
+	accent: void 0,
+	neutral: "gray",
+	success: "green",
+	warning: "orange",
+	danger: "red"
+};
+//#endregion
+export { accentByColor as t };
+
+//# sourceMappingURL=accent-colors-Ch2J0EEY.js.map

package/dist/accent-colors-Ch2J0EEY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accent-colors-Ch2J0EEY.js","names":[],"sources":["../src/lib/accent-colors.ts"],"sourcesContent":["export type SparkAccentColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\nexport const accentByColor: Record<\n  SparkAccentColor,\n  'gray' | 'red' | 'green' | 'orange' | undefined\n> = {\n  accent: undefined,\n  neutral: 'gray',\n  success: 'green',\n  warning: 'orange',\n  danger: 'red',\n}\n"],"mappings":";;AAOA,MAAa,gBAGT;CACF,QAAQ,KAAA;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACT"}

package/dist/accent-colors-CjHCf8fH.cjs

@@ -0,0 +1,18 @@
+"use client";
+//#region src/lib/accent-colors.ts
+const accentByColor = {
+	accent: void 0,
+	neutral: "gray",
+	success: "green",
+	warning: "orange",
+	danger: "red"
+};
+//#endregion
+Object.defineProperty(exports, "accentByColor", {
+	enumerable: true,
+	get: function() {
+		return accentByColor;
+	}
+});
+
+//# sourceMappingURL=accent-colors-CjHCf8fH.cjs.map

package/dist/accent-colors-CjHCf8fH.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accent-colors-CjHCf8fH.cjs","names":[],"sources":["../src/lib/accent-colors.ts"],"sourcesContent":["export type SparkAccentColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\nexport const accentByColor: Record<\n  SparkAccentColor,\n  'gray' | 'red' | 'green' | 'orange' | undefined\n> = {\n  accent: undefined,\n  neutral: 'gray',\n  success: 'green',\n  warning: 'orange',\n  danger: 'red',\n}\n"],"mappings":";;AAOA,MAAa,gBAGT;CACF,QAAQ,KAAA;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;CACT"}

package/dist/components/accordion.cjs

@@ -4,8 +4,8 @@ const require_chunk = require("../chunk-aJGBMT86.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let _base_ui_react_accordion = require("@base-ui/react/accordion");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_accordion = require("@base-ui/react/accordion");
 let cnfast = require("cnfast");
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {
@@ -19,7 +19,7 @@ function Accordion({ className, variant = "soft", ...props }) {
 function AccordionItem({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_accordion.Accordion.Item, {
 		"data-slot": "accordion-item",
-		className: (0, cnfast.cn)("group-data-[variant=soft]/accordion:rounded-md group-data-[variant=soft]/accordion:bg-gray-a2", "group-data-[variant=surface]/accordion:bg-gray-2", "group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-md group-data-[variant=surface]/accordion:last:rounded-b-md group-data-[variant=surface]/accordion:last:border-b", "group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-md group-data-[variant=outline]/accordion:last:rounded-b-md group-data-[variant=outline]/accordion:last:border-b", className),
+		className: (0, cnfast.cn)("group-data-[variant=soft]/accordion:rounded-md group-data-[variant=soft]/accordion:bg-gray-a2 dark:group-data-[variant=soft]/accordion:bg-gray-a3", "group-data-[variant=surface]/accordion:bg-gray-2", "group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-md group-data-[variant=surface]/accordion:last:rounded-b-md group-data-[variant=surface]/accordion:last:border-b", "group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-md group-data-[variant=outline]/accordion:last:rounded-b-md group-data-[variant=outline]/accordion:last:border-b", className),
 		...props
 	});
 }
@@ -28,7 +28,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_accordion.Accordion.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: (0, cnfast.cn)("flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50", "group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4", "[&[data-panel-open]>:last-child]:rotate-180", className),
+			className: (0, cnfast.cn)("flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12", "rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50", "group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4", "[&[data-panel-open]>:last-child]:rotate-180", className),
 			...props,
 			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
 				className: "shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none",

package/dist/components/accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.cjs","names":["AccordionPrimitive","MaterialSymbol"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ntype AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline'\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {\n  /**\n   * Container chrome (neutral):\n   * - `ghost` — no border/fill, just the trigger + spacing;\n   * - `soft` (default) — separate soft-tinted rounded cards, 2px gap between them;\n   * - `surface` — items glued into one bordered panel with an opaque fill;\n   * - `outline` — the same glued bordered panel, but no fill (transparent).\n   * A `variant` prop, NOT the ambient `data-style` knob — that would cascade into\n   * the panel content. Spacing + scaling still come from the ambient knobs.\n   */\n  variant?: AccordionVariant\n}\n\nfunction Accordion({ className, variant = 'soft', ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      // group/accordion + data-variant drive every item/trigger's per-variant\n      // chrome; soft stacks its separate cards with a gap (below).\n      data-variant={variant}\n      className={cn(\n        'group/accordion',\n        // soft = separate cards → stack them with a small (2px) gap. surface/outline\n        // glue their items into one bordered panel (default block, no gap).\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-0.5',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        // NEUTRAL container chrome per the accordion variant (group/accordion) — mirrors\n        // ListItem's group-data-[variant=X]/list: block (list.tsx); keep both in sync if\n        // this pattern changes. ghost carries no chrome. Radius = rounded-md (tracks the\n        // radius knob but never goes fully round). No text underline / per-item separator\n        // anymore.\n\n        // soft (default): each item is its own borderless soft-tinted rounded card;\n        // the root separates them with a 2px gap (the gap IS the separator).\n        'group-data-[variant=soft]/accordion:rounded-md group-data-[variant=soft]/accordion:bg-gray-a2',\n        // surface + outline share ONE glued-panel frame: full thin border around the\n        // stack (sides on all, top on each as divider/frame, bottom on the last),\n        // first/last round the outer corners. surface fills it (opaque bg); outline\n        // leaves it transparent.\n        'group-data-[variant=surface]/accordion:bg-gray-2',\n        'group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-md group-data-[variant=surface]/accordion:last:rounded-b-md group-data-[variant=surface]/accordion:last:border-b',\n        'group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-md group-data-[variant=outline]/accordion:last:rounded-b-md group-data-[variant=outline]/accordion:last:border-b',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          // WCAG 2.5.5: min 44px touch target — a HARD floor (min-h-[2.75rem], not\n          // min-h-11, which scales below 44px under dense/scaled knobs). py/text still\n          // scale with the spacing + scaling knobs, growing the target past 44px.\n          // No text underline (was hover:underline).\n          'flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12',\n          // default focus style (matches Button): 2px ring + 2px offset, accent colour\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n          // horizontal padding sits INSIDE the chrome (soft/surface/outline); ghost\n          // keeps the label flush (\"just plain text and spacing\").\n          'group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          // chevron (last child) flips when open\n          '[&[data-panel-open]>:last-child]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <MaterialSymbol\n          className=\"shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none\"\n          name=\"expand_more\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Panel\n>\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      // Base UI sets --accordion-panel-height + starting/ending styles on the\n      // panel; the height transition replaces the radix keyframe animation.\n      className=\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-11 transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none\"\n      {...props}\n    >\n      {/* padding aligns with the trigger: flush for ghost, inside the chrome otherwise */}\n      <div\n        className={cn(\n          'pb-4 group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\nexport type { AccordionProps, AccordionVariant }\n"],"mappings":";;;;;;;;;;AAoBA,SAAS,UAAU,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAyB;AAC5E,QACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,MAApB;EACE,aAAU;EAGV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,mBAGA,qFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAMN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,MAApB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IASE,iGAKA,oDACA,iUACA,iUACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,QAApB;EAA2B,WAAU;YACnC,iBAAA,GAAA,kBAAA,MAACA,yBAAAA,UAAmB,SAApB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAKE,yHAEA,iFACA,oDAGA,oIAEA,+CACA,UACD;GACD,GAAI;aAlBN,CAoBG,UACD,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IACE,WAAU;IACV,MAAK;IACL,CAAA,CACyB;;EACH,CAAA;;AAQhC,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,iBAAA,GAAA,kBAAA,KAACD,yBAAAA,UAAmB,OAApB;EACE,aAAU;EAGV,WAAU;EACV,GAAI;YAGJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,YAAA,GAAA,OAAA,IACE,yIACA,UACD;GAEA;GACG,CAAA;EACmB,CAAA"}
+{"version":3,"file":"accordion.cjs","names":["AccordionPrimitive","MaterialSymbol"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ntype AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline'\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {\n  /**\n   * Container chrome (neutral):\n   * - `ghost` — no border/fill, just the trigger + spacing;\n   * - `soft` (default) — separate soft-tinted rounded cards, 2px gap between them;\n   * - `surface` — items glued into one bordered panel with an opaque fill;\n   * - `outline` — the same glued bordered panel, but no fill (transparent).\n   * A `variant` prop, NOT the ambient `data-style` knob — that would cascade into\n   * the panel content. Spacing + scaling still come from the ambient knobs.\n   */\n  variant?: AccordionVariant\n}\n\nfunction Accordion({ className, variant = 'soft', ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      // group/accordion + data-variant drive every item/trigger's per-variant\n      // chrome; soft stacks its separate cards with a gap (below).\n      data-variant={variant}\n      className={cn(\n        'group/accordion',\n        // soft = separate cards → stack them with a small (2px) gap. surface/outline\n        // glue their items into one bordered panel (default block, no gap).\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-0.5',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        // NEUTRAL container chrome per the accordion variant (group/accordion) — mirrors\n        // ListItem's group-data-[variant=X]/list: block (list.tsx); keep both in sync if\n        // this pattern changes. ghost carries no chrome. Radius = rounded-md (tracks the\n        // radius knob but never goes fully round). No text underline / per-item separator\n        // anymore.\n\n        // soft (default): each item is its own borderless soft-tinted rounded card;\n        // the root separates them with a 2px gap (the gap IS the separator).\n        'group-data-[variant=soft]/accordion:rounded-md group-data-[variant=soft]/accordion:bg-gray-a2 dark:group-data-[variant=soft]/accordion:bg-gray-a3',\n        // surface + outline share ONE glued-panel frame: full thin border around the\n        // stack (sides on all, top on each as divider/frame, bottom on the last),\n        // first/last round the outer corners. surface fills it (opaque bg); outline\n        // leaves it transparent.\n        'group-data-[variant=surface]/accordion:bg-gray-2',\n        'group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-md group-data-[variant=surface]/accordion:last:rounded-b-md group-data-[variant=surface]/accordion:last:border-b',\n        'group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-md group-data-[variant=outline]/accordion:last:rounded-b-md group-data-[variant=outline]/accordion:last:border-b',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          // WCAG 2.5.5: min 44px touch target — a HARD floor (min-h-[2.75rem], not\n          // min-h-11, which scales below 44px under dense/scaled knobs). py/text still\n          // scale with the spacing + scaling knobs, growing the target past 44px.\n          // No text underline (was hover:underline).\n          'flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12',\n          // default focus style (matches Button): 2px ring + 2px offset, accent colour\n          'rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n          // horizontal padding sits INSIDE the chrome (soft/surface/outline); ghost\n          // keeps the label flush (\"just plain text and spacing\").\n          'group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          // chevron (last child) flips when open\n          '[&[data-panel-open]>:last-child]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <MaterialSymbol\n          className=\"shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none\"\n          name=\"expand_more\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Panel\n>\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      // Base UI sets --accordion-panel-height + starting/ending styles on the\n      // panel; the height transition replaces the radix keyframe animation.\n      className=\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-11 transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none\"\n      {...props}\n    >\n      {/* padding aligns with the trigger: flush for ghost, inside the chrome otherwise */}\n      <div\n        className={cn(\n          'pb-4 group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\nexport type { AccordionProps, AccordionVariant }\n"],"mappings":";;;;;;;;;;AAoBA,SAAS,UAAU,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAyB;AAC5E,QACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,MAApB;EACE,aAAU;EAGV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,mBAGA,qFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAMN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,MAApB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IASE,qJAKA,oDACA,iUACA,iUACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,QAApB;EAA2B,WAAU;YACnC,iBAAA,GAAA,kBAAA,MAACA,yBAAAA,UAAmB,SAApB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAKE,yHAEA,4FACA,oDAGA,oIAEA,+CACA,UACD;GACD,GAAI;aAlBN,CAoBG,UACD,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IACE,WAAU;IACV,MAAK;IACL,CAAA,CACyB;;EACH,CAAA;;AAQhC,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,iBAAA,GAAA,kBAAA,KAACD,yBAAAA,UAAmB,OAApB;EACE,aAAU;EAGV,WAAU;EACV,GAAI;YAGJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,YAAA,GAAA,OAAA,IACE,yIACA,UACD;GAEA;GACG,CAAA;EACmB,CAAA"}

package/dist/components/accordion.d.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import * as React$1 from "react";
-import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 
 //#region src/components/accordion.d.ts
 type AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline';

package/dist/components/accordion.js

@@ -2,8 +2,8 @@
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
 import "react";
-import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {
@@ -16,7 +16,7 @@ function Accordion({ className, variant = "soft", ...props }) {
 function AccordionItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Item, {
 		"data-slot": "accordion-item",
-		className: cn("group-data-[variant=soft]/accordion:rounded-md group-data-[variant=soft]/accordion:bg-gray-a2", "group-data-[variant=surface]/accordion:bg-gray-2", "group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-md group-data-[variant=surface]/accordion:last:rounded-b-md group-data-[variant=surface]/accordion:last:border-b", "group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-md group-data-[variant=outline]/accordion:last:rounded-b-md group-data-[variant=outline]/accordion:last:border-b", className),
+		className: cn("group-data-[variant=soft]/accordion:rounded-md group-data-[variant=soft]/accordion:bg-gray-a2 dark:group-data-[variant=soft]/accordion:bg-gray-a3", "group-data-[variant=surface]/accordion:bg-gray-2", "group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-md group-data-[variant=surface]/accordion:last:rounded-b-md group-data-[variant=surface]/accordion:last:border-b", "group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-md group-data-[variant=outline]/accordion:last:rounded-b-md group-data-[variant=outline]/accordion:last:border-b", className),
 		...props
 	});
 }
@@ -25,7 +25,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50", "group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4", "[&[data-panel-open]>:last-child]:rotate-180", className),
+			className: cn("flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12", "rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50", "group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4", "[&[data-panel-open]>:last-child]:rotate-180", className),
 			...props,
 			children: [children, /* @__PURE__ */ jsx(MaterialSymbol, {
 				className: "shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none",

package/dist/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["AccordionPrimitive"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ntype AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline'\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {\n  /**\n   * Container chrome (neutral):\n   * - `ghost` — no border/fill, just the trigger + spacing;\n   * - `soft` (default) — separate soft-tinted rounded cards, 2px gap between them;\n   * - `surface` — items glued into one bordered panel with an opaque fill;\n   * - `outline` — the same glued bordered panel, but no fill (transparent).\n   * A `variant` prop, NOT the ambient `data-style` knob — that would cascade into\n   * the panel content. Spacing + scaling still come from the ambient knobs.\n   */\n  variant?: AccordionVariant\n}\n\nfunction Accordion({ className, variant = 'soft', ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      // group/accordion + data-variant drive every item/trigger's per-variant\n      // chrome; soft stacks its separate cards with a gap (below).\n      data-variant={variant}\n      className={cn(\n        'group/accordion',\n        // soft = separate cards → stack them with a small (2px) gap. surface/outline\n        // glue their items into one bordered panel (default block, no gap).\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-0.5',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        // NEUTRAL container chrome per the accordion variant (group/accordion) — mirrors\n        // ListItem's group-data-[variant=X]/list: block (list.tsx); keep both in sync if\n        // this pattern changes. ghost carries no chrome. Radius = rounded-md (tracks the\n        // radius knob but never goes fully round). No text underline / per-item separator\n        // anymore.\n\n        // soft (default): each item is its own borderless soft-tinted rounded card;\n        // the root separates them with a 2px gap (the gap IS the separator).\n        'group-data-[variant=soft]/accordion:rounded-md group-data-[variant=soft]/accordion:bg-gray-a2',\n        // surface + outline share ONE glued-panel frame: full thin border around the\n        // stack (sides on all, top on each as divider/frame, bottom on the last),\n        // first/last round the outer corners. surface fills it (opaque bg); outline\n        // leaves it transparent.\n        'group-data-[variant=surface]/accordion:bg-gray-2',\n        'group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-md group-data-[variant=surface]/accordion:last:rounded-b-md group-data-[variant=surface]/accordion:last:border-b',\n        'group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-md group-data-[variant=outline]/accordion:last:rounded-b-md group-data-[variant=outline]/accordion:last:border-b',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          // WCAG 2.5.5: min 44px touch target — a HARD floor (min-h-[2.75rem], not\n          // min-h-11, which scales below 44px under dense/scaled knobs). py/text still\n          // scale with the spacing + scaling knobs, growing the target past 44px.\n          // No text underline (was hover:underline).\n          'flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12',\n          // default focus style (matches Button): 2px ring + 2px offset, accent colour\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n          // horizontal padding sits INSIDE the chrome (soft/surface/outline); ghost\n          // keeps the label flush (\"just plain text and spacing\").\n          'group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          // chevron (last child) flips when open\n          '[&[data-panel-open]>:last-child]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <MaterialSymbol\n          className=\"shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none\"\n          name=\"expand_more\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Panel\n>\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      // Base UI sets --accordion-panel-height + starting/ending styles on the\n      // panel; the height transition replaces the radix keyframe animation.\n      className=\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-11 transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none\"\n      {...props}\n    >\n      {/* padding aligns with the trigger: flush for ghost, inside the chrome otherwise */}\n      <div\n        className={cn(\n          'pb-4 group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\nexport type { AccordionProps, AccordionVariant }\n"],"mappings":";;;;;;;AAoBA,SAAS,UAAU,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAyB;AAC5E,QACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EAGV,gBAAc;EACd,WAAW,GACT,mBAGA,qFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAMN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAST,iGAKA,oDACA,iUACA,iUACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,oBAACA,YAAmB,QAApB;EAA2B,WAAU;YACnC,qBAACA,YAAmB,SAApB;GACE,aAAU;GACV,WAAW,GAKT,yHAEA,iFACA,oDAGA,oIAEA,+CACA,UACD;GACD,GAAI;aAlBN,CAoBG,UACD,oBAAC,gBAAD;IACE,WAAU;IACV,MAAK;IACL,CAAA,CACyB;;EACH,CAAA;;AAQhC,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,oBAACA,YAAmB,OAApB;EACE,aAAU;EAGV,WAAU;EACV,GAAI;YAGJ,oBAAC,OAAD;GACE,WAAW,GACT,yIACA,UACD;GAEA;GACG,CAAA;EACmB,CAAA"}
+{"version":3,"file":"accordion.js","names":["AccordionPrimitive"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ntype AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline'\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {\n  /**\n   * Container chrome (neutral):\n   * - `ghost` — no border/fill, just the trigger + spacing;\n   * - `soft` (default) — separate soft-tinted rounded cards, 2px gap between them;\n   * - `surface` — items glued into one bordered panel with an opaque fill;\n   * - `outline` — the same glued bordered panel, but no fill (transparent).\n   * A `variant` prop, NOT the ambient `data-style` knob — that would cascade into\n   * the panel content. Spacing + scaling still come from the ambient knobs.\n   */\n  variant?: AccordionVariant\n}\n\nfunction Accordion({ className, variant = 'soft', ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      // group/accordion + data-variant drive every item/trigger's per-variant\n      // chrome; soft stacks its separate cards with a gap (below).\n      data-variant={variant}\n      className={cn(\n        'group/accordion',\n        // soft = separate cards → stack them with a small (2px) gap. surface/outline\n        // glue their items into one bordered panel (default block, no gap).\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-0.5',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        // NEUTRAL container chrome per the accordion variant (group/accordion) — mirrors\n        // ListItem's group-data-[variant=X]/list: block (list.tsx); keep both in sync if\n        // this pattern changes. ghost carries no chrome. Radius = rounded-md (tracks the\n        // radius knob but never goes fully round). No text underline / per-item separator\n        // anymore.\n\n        // soft (default): each item is its own borderless soft-tinted rounded card;\n        // the root separates them with a 2px gap (the gap IS the separator).\n        'group-data-[variant=soft]/accordion:rounded-md group-data-[variant=soft]/accordion:bg-gray-a2 dark:group-data-[variant=soft]/accordion:bg-gray-a3',\n        // surface + outline share ONE glued-panel frame: full thin border around the\n        // stack (sides on all, top on each as divider/frame, bottom on the last),\n        // first/last round the outer corners. surface fills it (opaque bg); outline\n        // leaves it transparent.\n        'group-data-[variant=surface]/accordion:bg-gray-2',\n        'group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-md group-data-[variant=surface]/accordion:last:rounded-b-md group-data-[variant=surface]/accordion:last:border-b',\n        'group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-md group-data-[variant=outline]/accordion:last:rounded-b-md group-data-[variant=outline]/accordion:last:border-b',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          // WCAG 2.5.5: min 44px touch target — a HARD floor (min-h-[2.75rem], not\n          // min-h-11, which scales below 44px under dense/scaled knobs). py/text still\n          // scale with the spacing + scaling knobs, growing the target past 44px.\n          // No text underline (was hover:underline).\n          'flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12',\n          // default focus style (matches Button): 2px ring + 2px offset, accent colour\n          'rounded-md focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n          // horizontal padding sits INSIDE the chrome (soft/surface/outline); ghost\n          // keeps the label flush (\"just plain text and spacing\").\n          'group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          // chevron (last child) flips when open\n          '[&[data-panel-open]>:last-child]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <MaterialSymbol\n          className=\"shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none\"\n          name=\"expand_more\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Panel\n>\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      // Base UI sets --accordion-panel-height + starting/ending styles on the\n      // panel; the height transition replaces the radix keyframe animation.\n      className=\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-11 transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none\"\n      {...props}\n    >\n      {/* padding aligns with the trigger: flush for ghost, inside the chrome otherwise */}\n      <div\n        className={cn(\n          'pb-4 group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\nexport type { AccordionProps, AccordionVariant }\n"],"mappings":";;;;;;;AAoBA,SAAS,UAAU,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAyB;AAC5E,QACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EAGV,gBAAc;EACd,WAAW,GACT,mBAGA,qFACA,UACD;EACD,GAAI;EACJ,CAAA;;AAMN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAST,qJAKA,oDACA,iUACA,iUACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,oBAACA,YAAmB,QAApB;EAA2B,WAAU;YACnC,qBAACA,YAAmB,SAApB;GACE,aAAU;GACV,WAAW,GAKT,yHAEA,4FACA,oDAGA,oIAEA,+CACA,UACD;GACD,GAAI;aAlBN,CAoBG,UACD,oBAAC,gBAAD;IACE,WAAU;IACV,MAAK;IACL,CAAA,CACyB;;EACH,CAAA;;AAQhC,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;AACxB,QACE,oBAACA,YAAmB,OAApB;EACE,aAAU;EAGV,WAAU;EACV,GAAI;YAGJ,oBAAC,OAAD;GACE,WAAW,GACT,yIACA,UACD;GAEA;GACG,CAAA;EACmB,CAAA"}

package/dist/components/attachment.d.cts

@@ -22,7 +22,7 @@ declare function Attachment({
   state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
 }): _$react_jsx_runtime0.JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-  variant?: "icon" | "image" | null | undefined;
+  variant?: "image" | "icon" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function AttachmentMedia({
   className,

package/dist/components/attachment.d.ts

@@ -22,7 +22,7 @@ declare function Attachment({
   state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
 }): _$react_jsx_runtime0.JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-  variant?: "icon" | "image" | null | undefined;
+  variant?: "image" | "icon" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function AttachmentMedia({
   className,

package/dist/components/badge.cjs

@@ -1,18 +1,23 @@
 "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 cnfast = require("cnfast");
 //#region src/components/badge.tsx
-const Badge = react.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-	"data-slot": "badge",
-	className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-[length:var(--spark-style-border-width,1px)] border-[color:var(--spark-style-border,transparent)]", "bg-[var(--spark-style-bg,var(--color-gray-a3))] text-[color:var(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))]", className),
-	ref,
-	...props,
-	children
-}));
+const Badge = react.forwardRef(({ className, children, styleVariant, color, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "badge",
+		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
+		"data-accent-color": color ? require_accent_colors.accentByColor[color] : void 0,
+		className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))", className),
+		ref,
+		...props,
+		children
+	});
+});
 Badge.displayName = "Badge";
 //#endregion
 exports.Badge = Badge;

package/dist/components/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, ...props }, ref) => (\n    <span\n      data-slot=\"badge\"\n      className={cn(\n        // 20px pill sized for counts + short labels; tabular-nums keeps digit widths steady.\n        // rounded-sm (→ --spark-rounded-sm, 3px) — a subtle corner that matches Figma; tracks the radius knob.\n        'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n        // Style knob (data-style) + accent + high-contrast, inherited from the shared\n        // --spark-style-* tokens. UNSTYLED = a neutral gray soft chip: the fallbacks read\n        // the gray/neutral scale (gray-a3 fill, gray-a11 ink), so a bare <Badge> is quiet\n        // and accent-independent (stays gray even inside a themed accent). Any data-style\n        // brings in the accent — solid fills it (readable --spark-badge-fg text),\n        // surface/outline add a 1px edge. border-box keeps the 20px height constant.\n        'border-[length:var(--spark-style-border-width,1px)] border-[color:var(--spark-style-border,transparent)]',\n        'bg-[var(--spark-style-bg,var(--color-gray-a3))] text-[color:var(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))]',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </span>\n  ),\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;AAOA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,iBAAA,GAAA,kBAAA,KAAC,QAAD;CACE,aAAU;CACV,YAAA,GAAA,OAAA,IAGE,sHAOA,4GACA,kIACA,UACD;CACI;CACL,GAAI;CAEH;CACI,CAAA,CAEV;AAED,MAAM,cAAc"}
+{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * 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 SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;AAE/D,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,sBAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,sHACA,4FACA,kHACA,UACD;EACI;EACL,GAAI;EAEH;EACI,CAAA;EAGZ;AAED,MAAM,cAAc"}

package/dist/components/badge.d.cts

@@ -1,12 +1,16 @@
 "use client";
 
+import { u as SparkStyle } from "../theme-types-BwSJKdsB.cjs";
 import * as React$1 from "react";
 
 //#region src/components/badge.d.ts
+type SparkBadgeColor = 'accent' | 'neutral' | 'success' | 'warning' | 'danger';
 interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+  styleVariant?: SparkStyle;
+  color?: SparkBadgeColor;
   children?: React$1.ReactNode;
 }
 declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
 //#endregion
-export { Badge, type BadgeProps };
+export { Badge, type BadgeProps, SparkBadgeColor };
 //# sourceMappingURL=badge.d.cts.map

package/dist/components/badge.d.ts

@@ -1,12 +1,16 @@
 "use client";
 
+import { u as SparkStyle } from "../theme-types-BDdoRxXa.js";
 import * as React$1 from "react";
 
 //#region src/components/badge.d.ts
+type SparkBadgeColor = 'accent' | 'neutral' | 'success' | 'warning' | 'danger';
 interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+  styleVariant?: SparkStyle;
+  color?: SparkBadgeColor;
   children?: React$1.ReactNode;
 }
 declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
 //#endregion
-export { Badge, type BadgeProps };
+export { Badge, type BadgeProps, SparkBadgeColor };
 //# sourceMappingURL=badge.d.ts.map

package/dist/components/badge.js

@@ -1,15 +1,20 @@
 "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 } from "react/jsx-runtime";
 //#region src/components/badge.tsx
-const Badge = React$1.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("span", {
-	"data-slot": "badge",
-	className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-[length:var(--spark-style-border-width,1px)] border-[color:var(--spark-style-border,transparent)]", "bg-[var(--spark-style-bg,var(--color-gray-a3))] text-[color:var(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))]", className),
-	ref,
-	...props,
-	children
-}));
+const Badge = React$1.forwardRef(({ className, children, styleVariant, color, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "badge",
+		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
+		"data-accent-color": color ? accentByColor[color] : void 0,
+		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))", className),
+		ref,
+		...props,
+		children
+	});
+});
 Badge.displayName = "Badge";
 //#endregion
 export { Badge };

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, ...props }, ref) => (\n    <span\n      data-slot=\"badge\"\n      className={cn(\n        // 20px pill sized for counts + short labels; tabular-nums keeps digit widths steady.\n        // rounded-sm (→ --spark-rounded-sm, 3px) — a subtle corner that matches Figma; tracks the radius knob.\n        'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n        // Style knob (data-style) + accent + high-contrast, inherited from the shared\n        // --spark-style-* tokens. UNSTYLED = a neutral gray soft chip: the fallbacks read\n        // the gray/neutral scale (gray-a3 fill, gray-a11 ink), so a bare <Badge> is quiet\n        // and accent-independent (stays gray even inside a themed accent). Any data-style\n        // brings in the accent — solid fills it (readable --spark-badge-fg text),\n        // surface/outline add a 1px edge. border-box keeps the 20px height constant.\n        'border-[length:var(--spark-style-border-width,1px)] border-[color:var(--spark-style-border,transparent)]',\n        'bg-[var(--spark-style-bg,var(--color-gray-a3))] text-[color:var(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))]',\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      {children}\n    </span>\n  ),\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;AAOA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,GAAG,SAAS,QAClC,oBAAC,QAAD;CACE,aAAU;CACV,WAAW,GAGT,sHAOA,4GACA,kIACA,UACD;CACI;CACL,GAAI;CAEH;CACI,CAAA,CAEV;AAED,MAAM,cAAc"}
+{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * 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 SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--color-gray-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--color-gray-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;AAE/D,QACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,sHACA,4FACA,kHACA,UACD;EACI;EACL,GAAI;EAEH;EACI,CAAA;EAGZ;AAED,MAAM,cAAc"}

package/dist/components/bar-chart.cjs

@@ -1,6 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../chunk-aJGBMT86.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
@@ -75,6 +76,7 @@ function BarStackLayer({ stackData, series, seriesByKey, xScale, yScale, colorSc
 	});
 }
 function FocusBorder({ category, visible, stackData, series, xScale, yScale }) {
+	const reducedMotion = require_hooks_use_reduced_motion.useReducedMotion();
 	const x = xScale(category);
 	const datum = stackData.find((entry) => entry.__category === category);
 	if (x === void 0 || !datum) return null;
@@ -106,7 +108,7 @@ function FocusBorder({ category, visible, stackData, series, xScale, yScale }) {
 		pointerEvents: "none",
 		style: {
 			opacity: visible ? 1 : 0,
-			transition: `x ${FOCUS_TRANSITION_MS}ms ease, y ${FOCUS_TRANSITION_MS}ms ease, width ${FOCUS_TRANSITION_MS}ms ease, height ${FOCUS_TRANSITION_MS}ms ease, opacity ${FOCUS_TRANSITION_MS}ms ease`
+			transition: reducedMotion ? `opacity ${FOCUS_TRANSITION_MS}ms ease` : `x ${FOCUS_TRANSITION_MS}ms ease, y ${FOCUS_TRANSITION_MS}ms ease, width ${FOCUS_TRANSITION_MS}ms ease, height ${FOCUS_TRANSITION_MS}ms ease, opacity ${FOCUS_TRANSITION_MS}ms ease`
 		}
 	});
 }
@@ -152,7 +154,7 @@ function CategoryTicks({ ticks, xScale, height, formatCategory }) {
 			x: x + xScale.bandwidth() / 2,
 			y: height - PADDING_BOTTOM + 16,
 			textAnchor: "middle",
-			fill: "var(--gray-a11)",
+			fill: "var(--neutral-a11)",
 			fontSize: 10,
 			children: formatCategory(category)
 		}, `tick-${String(category)}`);
@@ -163,6 +165,7 @@ function defaultFormatTotal(value) {
 }
 function BarChart({ data, series, lines, getCategory, categories, categoryTicks, formatCategory = (category) => String(category), formatTooltipCategory = formatCategory, highlightedCategory, showHighlightLine = false, referenceLine, title, yAxisUnit, height = DEFAULT_HEIGHT, renderTotal, formatTotal = defaultFormatTotal, formatValue, className }) {
 	const containerRef = (0, react.useRef)(null);
+	const reducedMotion = require_hooks_use_reduced_motion.useReducedMotion();
 	const [width, setWidth] = (0, react.useState)(0);
 	const [hoveredCategory, setHoveredCategory] = (0, react.useState)(null);
 	const [trailingHoverLabel, setTrailingHoverLabel] = (0, react.useState)(null);
@@ -401,7 +404,7 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 						left: tooltipPos.left,
 						top: tooltipPos.top,
 						opacity: tooltipActive ? 1 : 0,
-						transition: "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
+						transition: reducedMotion ? "opacity 140ms ease-out" : "left 140ms ease-out, top 140ms ease-out, opacity 140ms ease-out"
 					},
 					children: focusCategory !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_chart.ChartTooltipCard, {
 						label: formatTooltipCategory(focusCategory),
@@ -416,7 +419,7 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 							x2: Y_AXIS_GUTTER,
 							y1: PADDING_TOP,
 							y2: height - PADDING_BOTTOM,
-							stroke: "var(--gray-a6)",
+							stroke: "var(--neutral-a6)",
 							strokeWidth: 1
 						}),
 						yTicks.map((tick, index) => {
@@ -427,13 +430,13 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 								x2: Y_AXIS_GUTTER,
 								y1: y,
 								y2: y,
-								stroke: "var(--gray-a8)",
+								stroke: "var(--neutral-a8)",
 								strokeWidth: 1
 							}), !hideTickLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 								x: Y_AXIS_GUTTER - 7,
 								y: y + 3,
 								textAnchor: "end",
-								fill: "var(--gray-a11)",
+								fill: "var(--neutral-a11)",
 								fontSize: 10,
 								children: require_utils_chart_scale.formatYAxisTick(tick)
 							})] }, `y-tick-${tick}`);
@@ -442,7 +445,7 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 							x: 0,
 							y: PADDING_TOP - 6,
 							textAnchor: "start",
-							fill: "var(--gray-a11)",
+							fill: "var(--neutral-a11)",
 							fontSize: 10,
 							fontWeight: 600,
 							children: yAxisUnit
@@ -462,7 +465,7 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 							x2: width,
 							y1: yScale(0),
 							y2: yScale(0),
-							stroke: "var(--gray-a5)",
+							stroke: "var(--neutral-a5)",
 							strokeWidth: 1
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_visx_group.Group, { children: [
@@ -480,7 +483,7 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 								x2: width,
 								y1: yScale(referenceLine.value),
 								y2: yScale(referenceLine.value),
-								stroke: referenceLine.color ?? "var(--gray-a11)",
+								stroke: referenceLine.color ?? "var(--neutral-a11)",
 								strokeWidth: 1.5,
 								pointerEvents: "none"
 							}),