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

package/dist/components/segmented-control.cjs

@@ -0,0 +1,44 @@
+"use client";
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-aJGBMT86.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_tabs = require("@base-ui/react/tabs");
+let cnfast = require("cnfast");
+//#region src/components/segmented-control.tsx
+function SegmentedControl({ className, styleVariant = "solid", size = "default", children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
+		"data-slot": "segmented-control",
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_tabs.Tabs.List, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"data-size": size,
+			"data-slot": "segmented-control-track",
+			"data-style": styleVariant,
+			className: (0, cnfast.cn)("group/segmented relative isolate flex w-full items-stretch p-1", "rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", "data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3", "data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)", "data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)", size === "small" && "h-9 text-sm", size === "default" && "h-10 text-base", size === "medium" && "h-11 text-base", className),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Indicator, {
+				"data-slot": "segmented-control-indicator",
+				renderBeforeHydration: true,
+				className: (0, cnfast.cn)("pointer-events-none absolute top-[var(--active-tab-top)] left-[var(--active-tab-left)] z-0 h-[var(--active-tab-height)] w-[var(--active-tab-width)]", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "bg-gray-1 dark:bg-gray-a4", "group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--spark-9))", "shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", "transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none", "[&[data-starting-style]]:transition-none")
+			}), children]
+		})
+	});
+}
+function SegmentedControlItem({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Tab, {
+		"data-slot": "segmented-control-item",
+		ref,
+		className: (0, cnfast.cn)("relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "text-gray-a11 transition-colors motion-reduce:transition-none", "not-data-active:hover:text-gray-12", "data-active:text-(--spark-style-fg,var(--spark-contrast))", "focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-inset", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4", "group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5", "group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6", className),
+		...props,
+		children
+	});
+}
+//#endregion
+exports.SegmentedControl = SegmentedControl;
+exports.SegmentedControlItem = SegmentedControlItem;
+
+//# sourceMappingURL=segmented-control.cjs.map

package/dist/components/segmented-control.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.cjs","names":["TabsPrimitive"],"sources":["../../src/components/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype SegmentedControlSize = 'small' | 'default' | 'medium'\n\ntype SegmentedControlProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.Root>,\n  'orientation'\n> & {\n  /** Visual weight of the selected segment, following the Spark style axis. */\n  styleVariant?: Exclude<SparkStyle, 'ghost'>\n  /** Control height, padding, and typography. Matches the Button size scale. */\n  size?: SegmentedControlSize\n}\n\nfunction SegmentedControl({\n  className,\n  styleVariant = 'solid',\n  size = 'default',\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SegmentedControlProps) {\n  return (\n    <TabsPrimitive.Root data-slot=\"segmented-control\" ref={ref} {...props}>\n      <TabsPrimitive.List\n        // the group's accessible name belongs on role=tablist (the List), not\n        // the Root container\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-size={size}\n        data-slot=\"segmented-control-track\"\n        data-style={styleVariant}\n        className={cn(\n          // full-width control; segments share the width equally (flex-1 below)\n          'group/segmented relative isolate flex w-full items-stretch p-1',\n          'rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          // the track chrome follows the style: a filled groove for solid/soft, a\n          // faintly-filled bordered surface, or a bare outline (all neutral — the\n          // accent lives on the selected segment)\n          'data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3',\n          'data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)',\n          'data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)',\n          size === 'small' && 'h-9 text-sm',\n          size === 'default' && 'h-10 text-base',\n          size === 'medium' && 'h-11 text-base',\n          className,\n        )}\n      >\n        {/* neutral like the switch thumb; solid alone fills with the accent below */}\n        <TabsPrimitive.Indicator\n          data-slot=\"segmented-control-indicator\"\n          renderBeforeHydration\n          className={cn(\n            'pointer-events-none absolute top-[var(--active-tab-top)] left-[var(--active-tab-left)] z-0 h-[var(--active-tab-height)] w-[var(--active-tab-width)]',\n            'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n            'bg-gray-1 dark:bg-gray-a4',\n            'group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--spark-9))',\n            'shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n            'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none',\n            // suppress the corner-to-position slide on first mount\n            '[&[data-starting-style]]:transition-none',\n          )}\n        />\n        {children}\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  )\n}\n\ntype SegmentedControlItemProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction SegmentedControlItem({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedControlItemProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"segmented-control-item\"\n      ref={ref}\n      className={cn(\n        'relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none',\n        'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n        'text-gray-a11 transition-colors motion-reduce:transition-none',\n        'not-data-active:hover:text-gray-12',\n        'data-active:text-(--spark-style-fg,var(--spark-contrast))',\n        // packed segments: an offset ring would collide with neighbours, so the\n        // ring sits inset within each segment\n        'focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-inset',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        // size follows the Button scale (padding + icon size). Icon size is set\n        // via --spark-icon-size (font glyphs) plus size-* (raw svg).\n        'group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4',\n        'group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5',\n        'group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Tab>\n  )\n}\n\nexport { SegmentedControl, SegmentedControlItem }\nexport type {\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n  SegmentedControlSize,\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAS,iBAAiB,EACxB,WACA,eAAe,SACf,OAAO,WACP,UACA,KACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACqB;AACxB,QACE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,MAAf;EAAoB,aAAU;EAAyB;EAAK,GAAI;YAC9D,iBAAA,GAAA,kBAAA,MAACA,oBAAAA,KAAc,MAAf;GAGE,cAAY;GACZ,mBAAiB;GACjB,aAAW;GACX,aAAU;GACV,cAAY;GACZ,YAAA,GAAA,OAAA,IAEE,kEACA,oEAIA,8DACA,0HACA,0FACA,SAAS,WAAW,eACpB,SAAS,aAAa,kBACtB,SAAS,YAAY,kBACrB,UACD;aAtBH,CAyBE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,YAAA,GAAA,OAAA,IACE,uJACA,oEACA,6BACA,2EACA,8HACA,0FAEA,2CACD;IACD,CAAA,EACD,SACkB;;EACF,CAAA;;AAMzB,SAAS,qBAAqB,EAC5B,WACA,UACA,KACA,GAAG,SACyB;AAC5B,QACE,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,KAAc,KAAf;EACE,aAAU;EACL;EACL,YAAA,GAAA,OAAA,IACE,gJACA,oEACA,iEACA,sCACA,6DAGA,8EACA,gEACA,gDAGA,0KACA,mLACA,+KACA,UACD;EACD,GAAI;EAEH;EACiB,CAAA"}

package/dist/components/segmented-control.d.cts

@@ -0,0 +1,33 @@
+"use client";
+
+import { d as SparkStyle } from "../theme-types-r20EJfEC.cjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/components/segmented-control.d.ts
+type SegmentedControlSize = 'small' | 'default' | 'medium';
+type SegmentedControlProps = Omit<React$1.ComponentProps<typeof Tabs.Root>, 'orientation'> & {
+  /** Visual weight of the selected segment, following the Spark style axis. */styleVariant?: Exclude<SparkStyle, 'ghost'>; /** Control height, padding, and typography. Matches the Button size scale. */
+  size?: SegmentedControlSize;
+};
+declare function SegmentedControl({
+  className,
+  styleVariant,
+  size,
+  children,
+  ref,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  ...props
+}: SegmentedControlProps): _$react_jsx_runtime0.JSX.Element;
+type SegmentedControlItemProps = React$1.ComponentProps<typeof Tabs.Tab>;
+declare function SegmentedControlItem({
+  className,
+  children,
+  ref,
+  ...props
+}: SegmentedControlItemProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSize };
+//# sourceMappingURL=segmented-control.d.cts.map

package/dist/components/segmented-control.d.ts

@@ -0,0 +1,33 @@
+"use client";
+
+import { d as SparkStyle } from "../theme-types-DoROIXpi.js";
+import * as React$1 from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+
+//#region src/components/segmented-control.d.ts
+type SegmentedControlSize = 'small' | 'default' | 'medium';
+type SegmentedControlProps = Omit<React$1.ComponentProps<typeof Tabs.Root>, 'orientation'> & {
+  /** Visual weight of the selected segment, following the Spark style axis. */styleVariant?: Exclude<SparkStyle, 'ghost'>; /** Control height, padding, and typography. Matches the Button size scale. */
+  size?: SegmentedControlSize;
+};
+declare function SegmentedControl({
+  className,
+  styleVariant,
+  size,
+  children,
+  ref,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  ...props
+}: SegmentedControlProps): _$react_jsx_runtime0.JSX.Element;
+type SegmentedControlItemProps = React$1.ComponentProps<typeof Tabs.Tab>;
+declare function SegmentedControlItem({
+  className,
+  children,
+  ref,
+  ...props
+}: SegmentedControlItemProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, type SegmentedControlSize };
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control.js

@@ -0,0 +1,40 @@
+"use client";
+"use client";
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/segmented-control.tsx
+function SegmentedControl({ className, styleVariant = "solid", size = "default", children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "segmented-control",
+		ref,
+		...props,
+		children: /* @__PURE__ */ jsxs(Tabs.List, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledby,
+			"data-size": size,
+			"data-slot": "segmented-control-track",
+			"data-style": styleVariant,
+			className: cn("group/segmented relative isolate flex w-full items-stretch p-1", "rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", "data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3", "data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)", "data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)", size === "small" && "h-9 text-sm", size === "default" && "h-10 text-base", size === "medium" && "h-11 text-base", className),
+			children: [/* @__PURE__ */ jsx(Tabs.Indicator, {
+				"data-slot": "segmented-control-indicator",
+				renderBeforeHydration: true,
+				className: cn("pointer-events-none absolute top-[var(--active-tab-top)] left-[var(--active-tab-left)] z-0 h-[var(--active-tab-height)] w-[var(--active-tab-width)]", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "bg-gray-1 dark:bg-gray-a4", "group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--spark-9))", "shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]", "transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none", "[&[data-starting-style]]:transition-none")
+			}), children]
+		})
+	});
+}
+function SegmentedControlItem({ className, children, ref, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-slot": "segmented-control-item",
+		ref,
+		className: cn("relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none", "rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]", "text-gray-a11 transition-colors motion-reduce:transition-none", "not-data-active:hover:text-gray-12", "data-active:text-(--spark-style-fg,var(--spark-contrast))", "focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-inset", "data-disabled:pointer-events-none data-disabled:text-gray-a8", "[&_svg]:pointer-events-none [&_svg]:shrink-0", "group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4", "group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5", "group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { SegmentedControl, SegmentedControlItem };
+
+//# sourceMappingURL=segmented-control.js.map

package/dist/components/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","names":["TabsPrimitive"],"sources":["../../src/components/segmented-control.tsx"],"sourcesContent":["'use client'\n\nimport { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\ntype SegmentedControlSize = 'small' | 'default' | 'medium'\n\ntype SegmentedControlProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.Root>,\n  'orientation'\n> & {\n  /** Visual weight of the selected segment, following the Spark style axis. */\n  styleVariant?: Exclude<SparkStyle, 'ghost'>\n  /** Control height, padding, and typography. Matches the Button size scale. */\n  size?: SegmentedControlSize\n}\n\nfunction SegmentedControl({\n  className,\n  styleVariant = 'solid',\n  size = 'default',\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SegmentedControlProps) {\n  return (\n    <TabsPrimitive.Root data-slot=\"segmented-control\" ref={ref} {...props}>\n      <TabsPrimitive.List\n        // the group's accessible name belongs on role=tablist (the List), not\n        // the Root container\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-size={size}\n        data-slot=\"segmented-control-track\"\n        data-style={styleVariant}\n        className={cn(\n          // full-width control; segments share the width equally (flex-1 below)\n          'group/segmented relative isolate flex w-full items-stretch p-1',\n          'rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n          // the track chrome follows the style: a filled groove for solid/soft, a\n          // faintly-filled bordered surface, or a bare outline (all neutral — the\n          // accent lives on the selected segment)\n          'data-[style=soft]:bg-gray-a3 data-[style=solid]:bg-gray-a3',\n          'data-[style=surface]:bg-gray-a2 data-[style=surface]:inset-ring data-[style=surface]:inset-ring-(--spark-style-border)',\n          'data-[style=outline]:inset-ring data-[style=outline]:inset-ring-(--spark-style-border)',\n          size === 'small' && 'h-9 text-sm',\n          size === 'default' && 'h-10 text-base',\n          size === 'medium' && 'h-11 text-base',\n          className,\n        )}\n      >\n        {/* neutral like the switch thumb; solid alone fills with the accent below */}\n        <TabsPrimitive.Indicator\n          data-slot=\"segmented-control-indicator\"\n          renderBeforeHydration\n          className={cn(\n            'pointer-events-none absolute top-[var(--active-tab-top)] left-[var(--active-tab-left)] z-0 h-[var(--active-tab-height)] w-[var(--active-tab-width)]',\n            'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n            'bg-gray-1 dark:bg-gray-a4',\n            'group-data-[style=solid]/segmented:bg-(--spark-style-bg,var(--spark-9))',\n            'shadow-[0_1px_2px_0_rgb(0_0_0/0.06),inset_0_0_0_var(--spark-style-border-width,1px)_var(--spark-style-border,transparent)]',\n            'transition-[left,top,width,height] duration-200 ease-out motion-reduce:transition-none',\n            // suppress the corner-to-position slide on first mount\n            '[&[data-starting-style]]:transition-none',\n          )}\n        />\n        {children}\n      </TabsPrimitive.List>\n    </TabsPrimitive.Root>\n  )\n}\n\ntype SegmentedControlItemProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction SegmentedControlItem({\n  className,\n  children,\n  ref,\n  ...props\n}: SegmentedControlItemProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"segmented-control-item\"\n      ref={ref}\n      className={cn(\n        'relative z-10 inline-flex h-full flex-1 basis-0 cursor-pointer items-center justify-center gap-1.5 font-medium whitespace-nowrap select-none',\n        'rounded-[max(var(--spark-rounded-sm),var(--spark-rounded-full))]',\n        'text-gray-a11 transition-colors motion-reduce:transition-none',\n        'not-data-active:hover:text-gray-12',\n        'data-active:text-(--spark-style-fg,var(--spark-contrast))',\n        // packed segments: an offset ring would collide with neighbours, so the\n        // ring sits inset within each segment\n        'focus-visible:ring-2 focus-visible:outline-hidden focus-visible:ring-inset',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0',\n        // size follows the Button scale (padding + icon size). Icon size is set\n        // via --spark-icon-size (font glyphs) plus size-* (raw svg).\n        'group-data-[size=small]/segmented:px-3 group-data-[size=small]/segmented:[--spark-icon-size:1rem] group-data-[size=small]/segmented:[&_svg:not([class*=size-])]:size-4',\n        'group-data-[size=default]/segmented:px-3 group-data-[size=default]/segmented:[--spark-icon-size:1.25rem] group-data-[size=default]/segmented:[&_svg:not([class*=size-])]:size-5',\n        'group-data-[size=medium]/segmented:px-4 group-data-[size=medium]/segmented:[--spark-icon-size:1.5rem] group-data-[size=medium]/segmented:[&_svg:not([class*=size-])]:size-6',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </TabsPrimitive.Tab>\n  )\n}\n\nexport { SegmentedControl, SegmentedControlItem }\nexport type {\n  SegmentedControlItemProps,\n  SegmentedControlProps,\n  SegmentedControlSize,\n}\n"],"mappings":";;;;;;;AAmBA,SAAS,iBAAiB,EACxB,WACA,eAAe,SACf,OAAO,WACP,UACA,KACA,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACqB;AACxB,QACE,oBAACA,KAAc,MAAf;EAAoB,aAAU;EAAyB;EAAK,GAAI;YAC9D,qBAACA,KAAc,MAAf;GAGE,cAAY;GACZ,mBAAiB;GACjB,aAAW;GACX,aAAU;GACV,cAAY;GACZ,WAAW,GAET,kEACA,oEAIA,8DACA,0HACA,0FACA,SAAS,WAAW,eACpB,SAAS,aAAa,kBACtB,SAAS,YAAY,kBACrB,UACD;aAtBH,CAyBE,oBAACA,KAAc,WAAf;IACE,aAAU;IACV,uBAAA;IACA,WAAW,GACT,uJACA,oEACA,6BACA,2EACA,8HACA,0FAEA,2CACD;IACD,CAAA,EACD,SACkB;;EACF,CAAA;;AAMzB,SAAS,qBAAqB,EAC5B,WACA,UACA,KACA,GAAG,SACyB;AAC5B,QACE,oBAACA,KAAc,KAAf;EACE,aAAU;EACL;EACL,WAAW,GACT,gJACA,oEACA,iEACA,sCACA,6DAGA,8EACA,gEACA,gDAGA,0KACA,mLACA,+KACA,UACD;EACD,GAAI;EAEH;EACiB,CAAA"}

package/dist/components/separator.cjs

@@ -24,7 +24,7 @@ const Separator = react.forwardRef(({ className, orientation = "horizontal", dec
 		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, cnfast.cn)("shrink-0 border-t border-gray", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+		className: (0, cnfast.cn)("shrink-0 border-gray", orientation === "horizontal" ? "h-px w-full border-t" : "h-full w-px border-l", className),
 		"data-orientation": orientation,
 		ref,
 		role: isDecorative ? "none" : "separator",

package/dist/components/separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"separator.cjs","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative, children, ...props },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className=\"h-px flex-1 border-t border-gray\" />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className=\"h-px flex-1 border-t border-gray\" />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          'shrink-0 border-t border-gray',\n          orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n          className,\n        )}\n        data-orientation={orientation}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAYA,MAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;AAEpC,KAAI,SACF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GACpD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;IAAgB,CAAA;GACpE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAChD;;AAIV,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,iCACA,gBAAgB,eAAe,gBAAgB,eAC/C,UACD;EACD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;EACJ,CAAA;EAGP;AAED,UAAU,cAAc"}
+{"version":3,"file":"separator.cjs","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative, children, ...props },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className=\"h-px flex-1 border-t border-gray\" />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className=\"h-px flex-1 border-t border-gray\" />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          'shrink-0 border-gray',\n          orientation === 'horizontal'\n            ? 'h-px w-full border-t'\n            : 'h-full w-px border-l',\n          className,\n        )}\n        data-orientation={orientation}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAYA,MAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;AAEpC,KAAI,SACF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2BAA2B,UAAU;EACnD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GACpD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;IAAgB,CAAA;GACpE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAChD;;AAIV,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,wBACA,gBAAgB,eACZ,yBACA,wBACJ,UACD;EACD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;EACJ,CAAA;EAGP;AAED,UAAU,cAAc"}

package/dist/components/separator.js

@@ -21,7 +21,7 @@ const Separator = React$1.forwardRef(({ className, orientation = "horizontal", d
 		]
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("shrink-0 border-t border-gray", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+		className: cn("shrink-0 border-gray", orientation === "horizontal" ? "h-px w-full border-t" : "h-full w-px border-l", className),
 		"data-orientation": orientation,
 		ref,
 		role: isDecorative ? "none" : "separator",

package/dist/components/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative, children, ...props },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className=\"h-px flex-1 border-t border-gray\" />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className=\"h-px flex-1 border-t border-gray\" />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          'shrink-0 border-t border-gray',\n          orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',\n          className,\n        )}\n        data-orientation={orientation}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;AAQA,MAAM,YAAYA,QAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;AAEpC,KAAI,SACF,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,2BAA2B,UAAU;EACnD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GACpD,oBAAC,QAAD;IAAM,WAAU;IAAoC;IAAgB,CAAA;GACpE,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAChD;;AAIV,QACE,oBAAC,OAAD;EACE,WAAW,GACT,iCACA,gBAAgB,eAAe,gBAAgB,eAC/C,UACD;EACD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;EACJ,CAAA;EAGP;AAED,UAAU,cAAc"}
+{"version":3,"file":"separator.js","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = 'horizontal', decorative, children, ...props },\n    ref,\n  ) => {\n    // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n    // role=\"separator\" unless the caller opts back into decorative.\n    const isDecorative = decorative ?? !children\n\n    if (children) {\n      return (\n        <div\n          className={cn('flex items-center gap-4', className)}\n          data-orientation={orientation}\n          ref={ref}\n          role={isDecorative ? 'none' : 'separator'}\n          {...props}\n        >\n          <div className=\"h-px flex-1 border-t border-gray\" />\n          <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n          <div className=\"h-px flex-1 border-t border-gray\" />\n        </div>\n      )\n    }\n\n    return (\n      <div\n        className={cn(\n          'shrink-0 border-gray',\n          orientation === 'horizontal'\n            ? 'h-px w-full border-t'\n            : 'h-full w-px border-l',\n          className,\n        )}\n        data-orientation={orientation}\n        ref={ref}\n        role={isDecorative ? 'none' : 'separator'}\n        {...props}\n      />\n    )\n  },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;AAQA,MAAM,YAAYA,QAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;AAEpC,KAAI,SACF,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,2BAA2B,UAAU;EACnD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GACpD,oBAAC,QAAD;IAAM,WAAU;IAAoC;IAAgB,CAAA;GACpE,oBAAC,OAAD,EAAK,WAAU,oCAAqC,CAAA;GAChD;;AAIV,QACE,oBAAC,OAAD;EACE,WAAW,GACT,wBACA,gBAAgB,eACZ,yBACA,wBACJ,UACD;EACD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;EACJ,CAAA;EAGP;AAED,UAAU,cAAc"}

package/dist/components/solar-forecast-chart.cjs

@@ -12,12 +12,12 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/solar-forecast-chart.tsx
-const DEFAULT_HEIGHT = 180;
+const DEFAULT_HEIGHT = 220;
 const BASE_MARGIN = {
 	top: 8,
 	right: 8,
 	bottom: 28,
-	left: 8
+	left: 34
 };
 /** Extra headroom for the weather icon row pinned above the plot. */
 const WEATHER_ROW_HEIGHT = 24;
@@ -33,7 +33,7 @@ function defaultFormatTime(date) {
 * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its
 * container; compose a title and any summary around it.
 */
-function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className }) {
+function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, yAxisUnit = "kW", formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className }) {
 	const containerRef = (0, react.useRef)(null);
 	const [width, setWidth] = (0, react.useState)(0);
 	(0, react.useEffect)(() => {
@@ -90,6 +90,7 @@ function SolarForecastChart({ produced, forecast, producedLabel = "Produced", fo
 			showGrid: true,
 			xTickCount: 6,
 			yTickCount: 4,
+			yAxisUnit,
 			formatDate: formatTime,
 			formatTooltipDate: formatTooltipTime ?? formatTime,
 			formatValue,

package/dist/components/solar-forecast-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"solar-forecast-chart.cjs","names":["oneDecimalFormat","MaterialSymbol","LineChart"],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 180\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 8 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => ({\n        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAiB;AACvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;CAAG;;AAE7D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;AACjD,QAAO,GAAGA,qBAAAA,iBAAiB,OAAO,MAAM;;AAG1C,SAAS,kBAAkB,MAAoB;AAC7C,QAAO,KAAK,UAAU,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI;;;;;;;;AA6CpD,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,aACuC;CACvC,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CACjD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,EAAE;AAErC,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;AACtB,OAAI,MAAO,UAAS,MAAM,YAAY,MAAM;IAC5C;AACF,KAAG,QAAQ,GAAG;AACd,eAAa,GAAG,YAAY;IAC3B,EAAE,CAAC;CAEN,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;EACtE;CACD,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,SAAS,CAAC,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;GACV,CAAA;EAEL,EAAE,GACH,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,QAAQ;EAAE,EAC1E,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,OAAO;EAAE,CACvE,CAAC,QAAQ,MAAuD,QAAQ,EAAE,CAAC;AAE5E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,KAAK;EAAc,YAAA,GAAA,OAAA,IAAc,UAAU,UAAU;YACvD,QAAQ,KACP,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;IAAe,EACxD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;IACT,CACF;GACD,UAAA;GACA,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACZ,CAAA;EAEA,CAAA"}
+{"version":3,"file":"solar-forecast-chart.cjs","names":["oneDecimalFormat","MaterialSymbol","LineChart"],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 220\n// `left` leaves room for the y-axis tick labels + unit (matches the 34px gutter\n// used by BarChart / PowerHistoryChart).\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 34 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Tooltip value formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to \"kW\". */\n  yAxisUnit?: string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  yAxisUnit = 'kW',\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => ({\n        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          yAxisUnit={yAxisUnit}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAiB;AAGvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;CAAI;;AAE9D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;AACjD,QAAO,GAAGA,qBAAAA,iBAAiB,OAAO,MAAM;;AAG1C,SAAS,kBAAkB,MAAoB;AAC7C,QAAO,KAAK,UAAU,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI;;;;;;;;AA+CpD,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,YAAY,MACZ,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,aACuC;CACvC,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CACjD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,EAAE;AAErC,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;AACtB,OAAI,MAAO,UAAS,MAAM,YAAY,MAAM;IAC5C;AACF,KAAG,QAAQ,GAAG;AACd,eAAa,GAAG,YAAY;IAC3B,EAAE,CAAC;CAEN,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;EACtE;CACD,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,SAAS,CAAC,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;GACV,CAAA;EAEL,EAAE,GACH,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,QAAQ;EAAE,EAC1E,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,OAAO;EAAE,CACvE,CAAC,QAAQ,MAAuD,QAAQ,EAAE,CAAC;AAE5E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,KAAK;EAAc,YAAA,GAAA,OAAA,IAAc,UAAU,UAAU;YACvD,QAAQ,KACP,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;IAAe,EACxD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;IACT,CACF;GACD,UAAA;GACA,YAAY;GACZ,YAAY;GACD;GACX,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACZ,CAAA;EAEA,CAAA"}

package/dist/components/solar-forecast-chart.d.cts

@@ -18,8 +18,10 @@ interface SolarForecastChartProps {
   producedLabel?: ReactNode;
   /** Tooltip label for the forecast series. */
   forecastLabel?: ReactNode;
-  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */
+  /** Tooltip value formatter. Defaults to one-decimal kW (power). */
   formatValue?: (value: number) => string;
+  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to "kW". */
+  yAxisUnit?: string;
   /** X-axis tick formatter. Defaults to the zero-padded hour. */
   formatTime?: (date: Date) => string;
   /** Tooltip time formatter. Defaults to `formatTime`. */
@@ -51,6 +53,7 @@ declare function SolarForecastChart({
   producedLabel,
   forecastLabel,
   formatValue,
+  yAxisUnit,
   formatTime,
   formatTooltipTime,
   weather,

package/dist/components/solar-forecast-chart.d.ts

@@ -18,8 +18,10 @@ interface SolarForecastChartProps {
   producedLabel?: ReactNode;
   /** Tooltip label for the forecast series. */
   forecastLabel?: ReactNode;
-  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */
+  /** Tooltip value formatter. Defaults to one-decimal kW (power). */
   formatValue?: (value: number) => string;
+  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to "kW". */
+  yAxisUnit?: string;
   /** X-axis tick formatter. Defaults to the zero-padded hour. */
   formatTime?: (date: Date) => string;
   /** Tooltip time formatter. Defaults to `formatTime`. */
@@ -51,6 +53,7 @@ declare function SolarForecastChart({
   producedLabel,
   forecastLabel,
   formatValue,
+  yAxisUnit,
   formatTime,
   formatTooltipTime,
   weather,

package/dist/components/solar-forecast-chart.js

@@ -7,12 +7,12 @@ import { LineChart } from "./line-chart.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/solar-forecast-chart.tsx
-const DEFAULT_HEIGHT = 180;
+const DEFAULT_HEIGHT = 220;
 const BASE_MARGIN = {
 	top: 8,
 	right: 8,
 	bottom: 28,
-	left: 8
+	left: 34
 };
 /** Extra headroom for the weather icon row pinned above the plot. */
 const WEATHER_ROW_HEIGHT = 24;
@@ -28,7 +28,7 @@ function defaultFormatTime(date) {
 * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its
 * container; compose a title and any summary around it.
 */
-function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className }) {
+function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, yAxisUnit = "kW", formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className }) {
 	const containerRef = useRef(null);
 	const [width, setWidth] = useState(0);
 	useEffect(() => {
@@ -85,6 +85,7 @@ function SolarForecastChart({ produced, forecast, producedLabel = "Produced", fo
 			showGrid: true,
 			xTickCount: 6,
 			yTickCount: 4,
+			yAxisUnit,
 			formatDate: formatTime,
 			formatTooltipDate: formatTooltipTime ?? formatTime,
 			formatValue,

package/dist/components/solar-forecast-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"solar-forecast-chart.js","names":[],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 180\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 8 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => ({\n        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;;AAcA,MAAM,iBAAiB;AACvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;CAAG;;AAE7D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;AACjD,QAAO,GAAG,iBAAiB,OAAO,MAAM;;AAG1C,SAAS,kBAAkB,MAAoB;AAC7C,QAAO,KAAK,UAAU,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI;;;;;;;;AA6CpD,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,aACuC;CACvC,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;AAErC,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;AACtB,OAAI,MAAO,UAAS,MAAM,YAAY,MAAM;IAC5C;AACF,KAAG,QAAQ,GAAG;AACd,eAAa,GAAG,YAAY;IAC3B,EAAE,CAAC;CAEN,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;EACtE;CACD,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,SAAS,CAAC,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,oBAAC,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;GACV,CAAA;EAEL,EAAE,GACH,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,QAAQ;EAAE,EAC1E,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,OAAO;EAAE,CACvE,CAAC,QAAQ,MAAuD,QAAQ,EAAE,CAAC;AAE5E,QACE,oBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,GAAG,UAAU,UAAU;YACvD,QAAQ,KACP,oBAAC,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;IAAe,EACxD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;IACT,CACF;GACD,UAAA;GACA,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACZ,CAAA;EAEA,CAAA"}
+{"version":3,"file":"solar-forecast-chart.js","names":[],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 220\n// `left` leaves room for the y-axis tick labels + unit (matches the 34px gutter\n// used by BarChart / PowerHistoryChart).\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 34 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Tooltip value formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to \"kW\". */\n  yAxisUnit?: string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  yAxisUnit = 'kW',\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => ({\n        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          yAxisUnit={yAxisUnit}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;;AAcA,MAAM,iBAAiB;AAGvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;CAAI;;AAE9D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;AACjD,QAAO,GAAG,iBAAiB,OAAO,MAAM;;AAG1C,SAAS,kBAAkB,MAAoB;AAC7C,QAAO,KAAK,UAAU,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI;;;;;;;;AA+CpD,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,YAAY,MACZ,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,aACuC;CACvC,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;AAErC,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;AACtB,OAAI,MAAO,UAAS,MAAM,YAAY,MAAM;IAC5C;AACF,KAAG,QAAQ,GAAG;AACd,eAAa,GAAG,YAAY;IAC3B,EAAE,CAAC;CAEN,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;EACtE;CACD,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,SAAS,CAAC,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,oBAAC,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;GACV,CAAA;EAEL,EAAE,GACH,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,QAAQ;EAAE,EAC1E,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,OAAO;EAAE,CACvE,CAAC,QAAQ,MAAuD,QAAQ,EAAE,CAAC;AAE5E,QACE,oBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,GAAG,UAAU,UAAU;YACvD,QAAQ,KACP,oBAAC,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;IAAe,EACxD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;IACT,CACF;GACD,UAAA;GACA,YAAY;GACZ,YAAY;GACD;GACX,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACZ,CAAA;EAEA,CAAA"}

package/dist/components/theme.cjs

@@ -1,6 +1,6 @@
 "use client";
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_theme = require("../theme-C9_OSe0S.cjs");
+const require_theme = require("../theme-CfFWrMEF.cjs");
 exports.Theme = require_theme.Theme;
 exports.useTheme = require_theme.useTheme;

package/dist/components/theme.js

@@ -1,4 +1,4 @@
 "use client";
 "use client";
-import { n as useTheme, t as Theme } from "../theme-B3WtiByA.js";
+import { n as useTheme, t as Theme } from "../theme-C19BbKfO.js";
 export { Theme, useTheme };

package/dist/components/tooltip.cjs

@@ -52,7 +52,7 @@ const InfoTooltip = ({ content, label }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			"aria-label": `About ${label}`,
-			className: "focus-visible:ring-primary inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {

package/dist/components/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}
+{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}

package/dist/components/tooltip.js

@@ -49,7 +49,7 @@ const InfoTooltip = ({ content, label }) => {
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		render: /* @__PURE__ */ jsx("button", {
 			"aria-label": `About ${label}`,
-			className: "focus-visible:ring-primary inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ jsx(MaterialSymbol, {

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,oBAAC,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none text-balance transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-error-a12 data-[variant=destructive]:text-error-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50 size-2.5 rotate-45 rounded-[2px]',\n                // diamond arrow: overlap the popup edge on the anchor side\n                'data-[side=bottom]:-top-[5px] data-[side=left]:-right-[5px] data-[side=right]:-left-[5px] data-[side=top]:-bottom-[5px]',\n                'data-[variant=default]:bg-gray-12 data-[variant=default]:fill-gray-12',\n                'data-[variant=destructive]:bg-error-12 data-[variant=destructive]:fill-error-12',\n              )}\n            />\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n}\n\nconst InfoTooltip = ({ content, label }: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={`About ${label}`}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-[14px]!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;AAC5D,QAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;EAAS,CAAA;;AAG/D,MAAM,iBAAiB,EACrB,GAAG,YACuD;AAC1D,QAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;EAAS,CAAA;;AAK1E,MAAM,WAAW,EAAE,GAAG,YAA0B;AAC9C,QAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,OAAS,CAAA;;AAG7C,MAAM,kBAAkB,EACtB,GAAG,YACwD;AAC3D,QAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;EAAS,CAAA;;AAY5E,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;AACzB,QACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,6IAEA,8DACA,mNAEA,4DACA,wEACA,mFACA,UACD;GACD,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,yCAEA,2HACA,yEACA,kFACD;IACD,CAAA,CAEmB;;EACG,CAAA,EACN,CAAA;;AAS9B,MAAM,eAAe,EAAE,SAAS,YAA8B;AAC5D,QACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,SAAS;GACrB,WAAU;GACV,MAAK;GACL,CAAA;YAGJ,oBAAC,gBAAD;GAAgB,WAAU;GAAe,MAAK;GAAS,CAAA;EACxC,CAAA,EACjB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;EACc,CAAA,CACT,EAAA,CAAA"}

package/dist/styles/index.css

@@ -4,6 +4,9 @@
 @import '@radix-ui/colors/red.css' layer(base);
 @import '@radix-ui/colors/orange.css' layer(base);
 @import '@radix-ui/colors/pink.css' layer(base);
+@import '@radix-ui/colors/cyan.css' layer(base);
+@import '@radix-ui/colors/tomato.css' layer(base);
+@import '@radix-ui/colors/amber.css' layer(base);
 
 /* Solid Light Alpha */
 @import '@radix-ui/colors/green-alpha.css' layer(base);
@@ -11,6 +14,9 @@
 @import '@radix-ui/colors/red-alpha.css' layer(base);
 @import '@radix-ui/colors/orange-alpha.css' layer(base);
 @import '@radix-ui/colors/pink-alpha.css' layer(base);
+@import '@radix-ui/colors/cyan-alpha.css' layer(base);
+@import '@radix-ui/colors/tomato-alpha.css' layer(base);
+@import '@radix-ui/colors/amber-alpha.css' layer(base);
 
 /* Solid Dark */
 @import '@radix-ui/colors/green-dark.css' layer(base);
@@ -18,6 +24,9 @@
 @import '@radix-ui/colors/red-dark.css' layer(base);
 @import '@radix-ui/colors/orange-dark.css' layer(base);
 @import '@radix-ui/colors/pink-dark.css' layer(base);
+@import '@radix-ui/colors/cyan-dark.css' layer(base);
+@import '@radix-ui/colors/tomato-dark.css' layer(base);
+@import '@radix-ui/colors/amber-dark.css' layer(base);
 
 /* Solid Dark Alpha */
 @import '@radix-ui/colors/green-dark-alpha.css' layer(base);
@@ -25,6 +34,9 @@
 @import '@radix-ui/colors/red-dark-alpha.css' layer(base);
 @import '@radix-ui/colors/orange-dark-alpha.css' layer(base);
 @import '@radix-ui/colors/pink-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/cyan-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/tomato-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/amber-dark-alpha.css' layer(base);
 
 /* Grays Light */
 @import '@radix-ui/colors/gray.css' layer(base);
@@ -74,6 +86,31 @@
 /* Tailwind animate plugin */
 @import 'tw-animate-css';
 
+/*
+ * Portal parity: ECP ships a contrast-fixed light green-a11 (opaque, darker
+ * than Radix stock #00713fde) for readable success-light text. Declared here
+ * (after the imports, directly in layer base) -- inside spark-default.css it
+ * would land in the nested base.base sub-layer and lose to Radix's direct
+ * base rules (a layer's direct rules act as its implicit final sub-layer).
+ */
+@layer base {
+  :root,
+  .light,
+  .light-theme {
+    --green-a11: #06784c;
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      :root,
+      .light,
+      .light-theme {
+        --green-a11: color(display-p3 0.21 0.46 0.31);
+      }
+    }
+  }
+}
+
 /* Hit area utilities — Kian Bazarjani <https://bazza.dev> */
 @utility hit-area-debug {
   position: relative;