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

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 }) {

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, {

package/dist/components/attachment.d.cts

@@ -9,7 +9,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/attachment.d.ts
 declare const attachmentVariants: (props?: ({
-  size?: "default" | "sm" | "xs" | null | undefined;
+  size?: "sm" | "default" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Attachment({

package/dist/components/attachment.d.ts

@@ -9,7 +9,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/attachment.d.ts
 declare const attachmentVariants: (props?: ({
-  size?: "default" | "sm" | "xs" | null | undefined;
+  size?: "sm" | "default" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Attachment({

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,7 +1,9 @@
 "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");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
@@ -21,25 +23,6 @@ const FOCUS_TRANSITION_MS = 180;
 const DEFAULT_HEIGHT = 220;
 const BAR_RADIUS = 2;
 const Y_AXIS_GUTTER = 34;
-function buildYAxisTicks(yMax) {
-	const rawStep = yMax / 4;
-	const normalized = rawStep === 0 ? 1 : rawStep;
-	const magnitude = Math.pow(10, Math.floor(Math.log10(normalized)));
-	const step = ([
-		1,
-		2,
-		2.5,
-		5,
-		10
-	].find((value) => value * magnitude >= normalized) ?? 10) * magnitude;
-	const upper = Math.ceil(yMax / step) * step;
-	const ticks = [];
-	for (let value = 0; value <= upper + step * .001; value += step) ticks.push(Number(value.toFixed(6)));
-	return ticks;
-}
-function formatYAxisTick(value) {
-	return value >= 10 ? require_utils_format.integerFormat.format(value) : require_utils_format.oneDecimalFormat.format(value);
-}
 function buildBarPath(x, y, width, height, radius, roundTop, roundBottom) {
 	const r = Math.max(0, Math.min(radius, width / 2, height / 2));
 	if (r === 0 || !roundTop && !roundBottom) return `M ${x} ${y} H ${x + width} V ${y + height} H ${x} Z`;
@@ -69,15 +52,21 @@ function BarStackLayer({ stackData, series, seriesByKey, xScale, yScale, colorSc
 		xScale,
 		yScale,
 		color: colorScale,
+		offset: "diverging",
 		children: (barStacks) => barStacks.map((barStack) => barStack.bars.map((bar) => {
-			if ((bar.bar.data.__values[barStack.key] ?? 0) === 0) return null;
+			const values = bar.bar.data.__values;
+			const segmentValue = values[barStack.key] ?? 0;
+			if (segmentValue === 0) return null;
 			const strokeColor = seriesByKey.get(barStack.key)?.color ?? bar.color;
 			const fillColor = strokeColor;
-			const valueKeys = series.map((entry) => entry.key).filter((key) => (bar.bar.data.__values[key] ?? 0) > 0);
-			const isBottomSegment = valueKeys[0] === barStack.key;
-			const isTopSegment = valueKeys[valueKeys.length - 1] === barStack.key;
+			const positiveKeys = series.map((entry) => entry.key).filter((key) => (values[key] ?? 0) > 0);
+			const negativeKeys = series.map((entry) => entry.key).filter((key) => (values[key] ?? 0) < 0);
+			const roundTop = segmentValue > 0 && positiveKeys[positiveKeys.length - 1] === barStack.key;
+			const roundBottom = segmentValue > 0 ? positiveKeys[0] === barStack.key : negativeKeys[negativeKeys.length - 1] === barStack.key;
+			const top = bar.height < 0 ? bar.y + bar.height : bar.y;
+			const barHeight = Math.abs(bar.height);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-				d: buildBarPath(bar.x, bar.y, bar.width, Math.max(0, bar.height), BAR_RADIUS, isTopSegment, isBottomSegment),
+				d: buildBarPath(bar.x, top, bar.width, Math.max(0, barHeight), BAR_RADIUS, roundTop, roundBottom),
 				fill: fillColor,
 				stroke: strokeColor,
 				strokeWidth: 1,
@@ -87,12 +76,13 @@ 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;
-	if (!series.some((entry) => (datum.__values[entry.key] ?? 0) > 0)) return null;
+	if (!series.some((entry) => (datum.__values[entry.key] ?? 0) !== 0)) return null;
 	const topY = PADDING_TOP;
-	const baselineY = yScale(0);
+	const bottomY = yScale(series.reduce((sum, entry) => sum + Math.min(0, datum.__values[entry.key] ?? 0), 0));
 	const borderPaddingX = 4;
 	const borderPaddingY = 3;
 	const borderXRaw = x - borderPaddingX;
@@ -104,7 +94,7 @@ function FocusBorder({ category, visible, stackData, series, xScale, yScale }) {
 	const borderX = Math.max(minX, borderXRaw);
 	const borderRight = Math.min(maxX, borderXRaw + borderWidthRaw);
 	const borderWidth = Math.max(0, borderRight - borderX);
-	const borderHeight = Math.max(1, baselineY - topY + borderPaddingY * 2);
+	const borderHeight = Math.max(1, bottomY - topY + borderPaddingY * 2);
 	if (borderWidth <= 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
 		x: borderX,
@@ -118,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`
 		}
 	});
 }
@@ -164,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)}`);
@@ -175,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);
@@ -218,11 +209,12 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 		series,
 		hiddenSeries
 	]);
-	const yMax = (0, react.useMemo)(() => Math.max(1, referenceLine?.value ?? 0, ...stackData.map((record) => series.reduce((sum, entry) => sum + (record.__values[entry.key] ?? 0), 0))), [
+	const yMax = (0, react.useMemo)(() => Math.max(1, referenceLine?.value ?? 0, ...stackData.map((record) => series.reduce((sum, entry) => sum + Math.max(0, record.__values[entry.key] ?? 0), 0))), [
 		referenceLine,
 		series,
 		stackData
 	]);
+	const yMin = (0, react.useMemo)(() => Math.min(0, ...stackData.map((record) => series.reduce((sum, entry) => sum + Math.min(0, record.__values[entry.key] ?? 0), 0))), [series, stackData]);
 	const xDomain = (0, react.useMemo)(() => categories ?? stackData.map((record) => record.__category), [categories, stackData]);
 	const xScale = (0, react.useMemo)(() => (0, _visx_scale.scaleBand)({
 		domain: xDomain,
@@ -230,9 +222,13 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 		padding: .32
 	}), [xDomain, width]);
 	const yScale = (0, react.useMemo)(() => (0, _visx_scale.scaleLinear)({
-		domain: [0, yMax],
+		domain: [yMin, yMax],
 		range: [height - PADDING_BOTTOM, PADDING_TOP]
-	}), [height, yMax]);
+	}), [
+		height,
+		yMax,
+		yMin
+	]);
 	const colorScale = (0, react.useMemo)(() => (0, _visx_scale.scaleOrdinal)({
 		domain: series.map((entry) => entry.key),
 		range: series.map((entry) => entry.color)
@@ -283,8 +279,8 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 	const focusCategory = lastFocusCategoryRef.current;
 	const focused = (0, react.useMemo)(() => hoveredCategory === null ? null : stackData.find((record) => record.__category === hoveredCategory) ?? null, [hoveredCategory, stackData]);
 	const totalValue = (0, react.useMemo)(() => {
-		if (focused) return series.reduce((sum, entry) => sum + (focused.__values[entry.key] ?? 0), 0);
-		return stackData.reduce((sum, record) => sum + series.reduce((s, entry) => s + (record.__values[entry.key] ?? 0), 0), 0);
+		if (focused) return series.reduce((sum, entry) => sum + Math.max(0, focused.__values[entry.key] ?? 0), 0);
+		return stackData.reduce((sum, record) => sum + series.reduce((s, entry) => s + Math.max(0, record.__values[entry.key] ?? 0), 0), 0);
 	}, [
 		focused,
 		series,
@@ -304,7 +300,7 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 		};
 	}, [hoverLabel]);
 	const ticks = categoryTicks ?? xDomain;
-	const yTicks = (0, react.useMemo)(() => buildYAxisTicks(yMax), [yMax]);
+	const yTicks = (0, react.useMemo)(() => require_utils_chart_scale.buildYAxisScale(yMin, yMax).ticks, [yMin, yMax]);
 	const highlightX = (0, react.useMemo)(() => {
 		if (!showHighlightLine || highlightedCategory === void 0) return null;
 		const x = xScale(highlightedCategory);
@@ -320,12 +316,27 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 		data,
 		getCategory
 	]);
+	const barStackLayer = (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarStackLayer, {
+		stackData,
+		series,
+		seriesByKey,
+		xScale,
+		yScale,
+		colorScale
+	}), [
+		stackData,
+		series,
+		seriesByKey,
+		xScale,
+		yScale,
+		colorScale
+	]);
 	const fmtTooltipValue = formatValue ?? formatTotal;
-	const tooltipRows = focused ? [...series.filter((entry) => (focused.__values[entry.key] ?? 0) > 0).map((entry) => ({
+	const tooltipRows = focused ? [...series.filter((entry) => (focused.__values[entry.key] ?? 0) !== 0).map((entry) => ({
 		key: entry.key,
 		label: entry.label,
 		color: entry.color,
-		value: fmtTooltipValue(focused.__values[entry.key] ?? 0)
+		value: fmtTooltipValue(Math.abs(focused.__values[entry.key] ?? 0))
 	})), ...(lines ?? []).filter((line) => !hiddenSeries.has(line.key)).flatMap((line) => {
 		const value = focusedDatum === null ? null : line.getValue(focusedDatum);
 		if (value === null || !Number.isFinite(value)) return [];
@@ -355,7 +366,7 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 				className: "flex items-baseline justify-between",
 				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.SectionTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "tabular-nums",
-					children: renderTotal ? renderTotal(totalValue) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					children: renderTotal ? renderTotal(totalValue, focused === null) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "text-base font-bold text-gray tabular-nums",
 						children: formatTotal(totalValue)
 					})
@@ -393,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),
@@ -407,8 +418,8 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 							x1: Y_AXIS_GUTTER,
 							x2: Y_AXIS_GUTTER,
 							y1: PADDING_TOP,
-							y2: yScale(0),
-							stroke: "var(--gray-a6)",
+							y2: height - PADDING_BOTTOM,
+							stroke: "var(--neutral-a6)",
 							strokeWidth: 1
 						}),
 						yTicks.map((tick, index) => {
@@ -419,22 +430,22 @@ 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: formatYAxisTick(tick)
+								children: require_utils_chart_scale.formatYAxisTick(tick)
 							})] }, `y-tick-${tick}`);
 						}),
 						yAxisUnit && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 							x: 0,
 							y: PADDING_TOP - 6,
 							textAnchor: "start",
-							fill: "var(--gray-a11)",
+							fill: "var(--neutral-a11)",
 							fontSize: 10,
 							fontWeight: 600,
 							children: yAxisUnit
@@ -443,7 +454,7 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 							x1: highlightX,
 							x2: highlightX,
 							y1: PADDING_TOP,
-							y2: yScale(0),
+							y2: height - PADDING_BOTTOM,
 							stroke: "var(--spark-a9)",
 							strokeWidth: 1.5,
 							strokeDasharray: "5 4",
@@ -454,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: [
@@ -466,20 +477,13 @@ function BarChart({ data, series, lines, getCategory, categories, categoryTicks,
 								xScale,
 								yScale
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BarStackLayer, {
-								stackData,
-								series,
-								seriesByKey,
-								xScale,
-								yScale,
-								colorScale
-							}),
+							barStackLayer,
 							referenceLine && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
 								x1: Y_AXIS_GUTTER,
 								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"
 							}),