@epilot/spark-ui 0.20.0 → 0.20.1

package/dist/components/accordion.cjs

@@ -1,10 +1,10 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-let _base_ui_react_accordion = require("@base-ui/react/accordion");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _base_ui_react_accordion = require("@base-ui/react/accordion");
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/accordion.tsx

package/dist/components/accordion.d.ts

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

package/dist/components/accordion.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
+import "react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { KeyboardArrowDown } from "@epilot/spark-icons";
-import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {

package/dist/components/alert-dialog.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_alert_dialog = require("@base-ui/react/alert-dialog");
 let cnfast = require("cnfast");

package/dist/components/alert-dialog.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Button, buttonVariants } from "./button.js";
-import { Close } from "@epilot/spark-icons";
 import "react";
+import { Close } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 //#region src/components/alert-dialog.tsx

package/dist/components/autocomplete.cjs

@@ -5,9 +5,9 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_field = require("./field.cjs");
 const require_components_input = require("./input.cjs");
 const require_components_input_group = require("./input-group.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_autocomplete = require("@base-ui/react/autocomplete");
 let cnfast = require("cnfast");

package/dist/components/autocomplete.js

@@ -4,8 +4,8 @@ import { cn } from "../utils/cn.js";
 import { useFieldControl } from "./field.js";
 import { Input } from "./input.js";
 import { InputGroup } from "./input-group.js";
-import { Close, KeyboardArrowDown } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { Close, KeyboardArrowDown } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
 //#region src/components/autocomplete.tsx

package/dist/components/bar-chart-with-total.d.cts

@@ -1,7 +1,7 @@
 "use client";
 
 import { BarChartCategory, BarChartLineSeries, BarChartProps, BarChartSeries } from "./bar-chart.cjs";
-import { Format } from "./number-flow.cjs";
+import { t as Format } from "../number-flow-Bch81ixZ.cjs";
 
 //#region src/components/bar-chart-with-total.d.ts
 type BarChartWithTotalProps<TDatum> = Omit<BarChartProps<TDatum>, 'renderTotal' | 'formatTotal'> & {

package/dist/components/bar-chart-with-total.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { BarChartCategory, BarChartLineSeries, BarChartProps, BarChartSeries } from "./bar-chart.js";
-import { Format } from "./number-flow.js";
+import { t as Format } from "../number-flow-Bch81ixZ.js";
 
 //#region src/components/bar-chart-with-total.d.ts
 type BarChartWithTotalProps<TDatum> = Omit<BarChartProps<TDatum>, 'renderTotal' | 'formatTotal'> & {

package/dist/components/bar-chart.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_components_chart = require("./chart.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");

package/dist/components/bar-chart.js

@@ -1,8 +1,8 @@
 "use client";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
-import { cn } from "../utils/cn.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";

package/dist/components/calendar.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _daypicker_react = require("@daypicker/react");
 let cnfast = require("cnfast");

package/dist/components/calendar.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./button.js";
-import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import "react";
+import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { DayPicker } from "@daypicker/react";
 //#region src/components/calendar.tsx

package/dist/components/callout.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let cnfast = require("cnfast");

package/dist/components/callout.d.cts

@@ -8,7 +8,7 @@ import { SparkIcon } from "@epilot/spark-icons";
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "neutral" | "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "neutral" | "error" | "success" | "warning" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.d.ts

@@ -1,14 +1,14 @@
 "use client";
 
 import { ButtonProps } from "./button.js";
-import { SparkIcon } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { SparkIcon } from "@epilot/spark-icons";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "neutral" | "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "neutral" | "error" | "success" | "warning" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Button } from "./button.js";
-import { Cancel, CheckCircle, Info, Warning } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { Cancel, CheckCircle, Info, Warning } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/callout.tsx

package/dist/components/dialog.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_dialog = require("@base-ui/react/dialog");
 let cnfast = require("cnfast");

package/dist/components/dialog.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./button.js";
-import { Close } from "@epilot/spark-icons";
 import "react";
+import { Close } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/components/dialog.tsx

package/dist/components/dropdown-menu.cjs

@@ -1,9 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_menu = require("@base-ui/react/menu");
 let cnfast = require("cnfast");

package/dist/components/dropdown-menu.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { Check, ChevronRight } from "@epilot/spark-icons";
 import "react";
+import { Check, ChevronRight } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/dropdown-menu.tsx

package/dist/components/empty-state.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { SparkIcon } from "@epilot/spark-icons";
 import { ReactNode } from "react";
+import { SparkIcon } from "@epilot/spark-icons";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/empty-state.d.ts

package/dist/components/energy-breakdown.cjs

@@ -0,0 +1,80 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../utils/chars.cjs");
+const require_utils_format = require("../utils/format.cjs");
+const require_components_donut_chart = require("./donut-chart.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/energy-breakdown.tsx
+function formatBreakdownCenter(v) {
+	if (v >= 1e3) return require_utils_format.formatThousands(v);
+	if (v >= 100) return require_utils_format.integerFormat.format(v);
+	if (v >= 10) return require_utils_format.oneDecimalFormat.format(v);
+	return require_utils_format.twoDecimalFormat.format(v);
+}
+function EnergyBreakdown({ title, subtitle, items, centerSub = "kWh" }) {
+	const sortedItems = (0, react.useMemo)(() => [...items].sort((a, b) => b.value - a.value), [items]);
+	const total = items.reduce((s, i) => s + i.value, 0);
+	const centerTotal = items.filter((i) => !i.excludeFromCenterTotal).reduce((s, i) => s + i.value, 0);
+	if (total === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-4 pt-3 pb-5",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm font-semibold text-gray",
+				children: title
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs text-gray-light",
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-6",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_donut_chart.DonutChart, {
+				centerLabel: formatBreakdownCenter(centerTotal),
+				centerSub,
+				segments: sortedItems.map(({ value, color }) => ({
+					value,
+					color
+				}))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-1 flex-col gap-3",
+				children: sortedItems.map(({ label, value, color }) => {
+					const pct = value / total * 100;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col gap-1.5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-baseline justify-between gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "min-w-0 truncate text-sm font-medium text-gray",
+								children: label
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-gray-light",
+									children: require_utils_format.formatEnergy(value)
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "font-semibold text-gray",
+									children: `${require_utils_format.integerFormat.format(pct)} %`
+								})]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "h-1 w-full overflow-hidden rounded-full bg-gray-a4",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "h-full rounded-full",
+								style: {
+									width: `${pct}%`,
+									background: color
+								}
+							})
+						})]
+					}, label);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+exports.EnergyBreakdown = EnergyBreakdown;
+
+//# sourceMappingURL=energy-breakdown.cjs.map

package/dist/components/energy-breakdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-breakdown.cjs","names":["formatThousands","integerFormat","oneDecimalFormat","twoDecimalFormat","DonutChart","formatEnergy"],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-gray-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAyBA,SAAS,sBAAsB,GAAW;CACxC,IAAI,KAAK,KAAM,OAAOA,qBAAAA,gBAAgB,CAAC;CACvC,IAAI,KAAK,KAAK,OAAOC,qBAAAA,cAAc,OAAO,CAAC;CAC3C,IAAI,KAAK,IAAI,OAAOC,qBAAAA,iBAAiB,OAAO,CAAC;CAC7C,OAAOC,qBAAAA,iBAAiB,OAAO,CAAC;AAClC;AAEA,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,eAAA,GAAA,MAAA,eACE,CAAC,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,GACjD,CAAC,KAAK,CACR;CAEA,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,CAAC;CACnD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,sBAAsB,EACvC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,CAAC;CAIlC,IAFkB,UAAU,GAEb,OAAO;CAEtB,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAmC;GAAY,CAAA,GAC/D,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA2B;GAAe,CAAA,CACvD;MAEL,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;IACE,aAAa,sBAAsB,WAAW;IACnC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;IAAM,EAAE;GACnE,CAAA,GAED,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;KAC9B,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;OAAK,WAAU;iBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;QAAM,WAAU;kBACb;OACG,CAAA,GACN,iBAAA,GAAA,kBAAA,MAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACbC,qBAAAA,aAAa,KAAK;QACf,CAAA,GACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACb,GAAGJ,qBAAAA,cAAc,OAAO,GAAG;QACxB,CAAA,CACF;SACH;UACL,iBAAA,GAAA,kBAAA,KAAC,OAAD;OAAK,WAAU;iBACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;QAAM;OAC9C,CAAA;MACE,CAAA,CACF;QApBK,KAoBL;IAET,CAAC;GACE,CAAA,CACF;IACF;;AAET"}

package/dist/components/energy-breakdown.d.cts

@@ -0,0 +1,24 @@
+"use client";
+
+//#region src/components/energy-breakdown.d.ts
+type BreakdownItem = {
+  label: string;
+  value: number;
+  color: string;
+  excludeFromCenterTotal?: boolean;
+};
+type EnergyBreakdownProps = {
+  title: string;
+  subtitle: string;
+  items: BreakdownItem[];
+  centerSub?: string;
+};
+declare function EnergyBreakdown({
+  title,
+  subtitle,
+  items,
+  centerSub
+}: EnergyBreakdownProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { BreakdownItem, EnergyBreakdown, EnergyBreakdownProps };
+//# sourceMappingURL=energy-breakdown.d.cts.map

package/dist/components/energy-breakdown.d.ts

@@ -0,0 +1,24 @@
+"use client";
+
+//#region src/components/energy-breakdown.d.ts
+type BreakdownItem = {
+  label: string;
+  value: number;
+  color: string;
+  excludeFromCenterTotal?: boolean;
+};
+type EnergyBreakdownProps = {
+  title: string;
+  subtitle: string;
+  items: BreakdownItem[];
+  centerSub?: string;
+};
+declare function EnergyBreakdown({
+  title,
+  subtitle,
+  items,
+  centerSub
+}: EnergyBreakdownProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { BreakdownItem, EnergyBreakdown, EnergyBreakdownProps };
+//# sourceMappingURL=energy-breakdown.d.ts.map

package/dist/components/energy-breakdown.js

@@ -0,0 +1,79 @@
+"use client";
+import "../utils/chars.js";
+import { formatEnergy, formatThousands, integerFormat, oneDecimalFormat, twoDecimalFormat } from "../utils/format.js";
+import { DonutChart } from "./donut-chart.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/energy-breakdown.tsx
+function formatBreakdownCenter(v) {
+	if (v >= 1e3) return formatThousands(v);
+	if (v >= 100) return integerFormat.format(v);
+	if (v >= 10) return oneDecimalFormat.format(v);
+	return twoDecimalFormat.format(v);
+}
+function EnergyBreakdown({ title, subtitle, items, centerSub = "kWh" }) {
+	const sortedItems = useMemo(() => [...items].sort((a, b) => b.value - a.value), [items]);
+	const total = items.reduce((s, i) => s + i.value, 0);
+	const centerTotal = items.filter((i) => !i.excludeFromCenterTotal).reduce((s, i) => s + i.value, 0);
+	if (total === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4 pt-3 pb-5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-semibold text-gray",
+				children: title
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-gray-light",
+				children: subtitle
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-6",
+			children: [/* @__PURE__ */ jsx(DonutChart, {
+				centerLabel: formatBreakdownCenter(centerTotal),
+				centerSub,
+				segments: sortedItems.map(({ value, color }) => ({
+					value,
+					color
+				}))
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 flex-col gap-3",
+				children: sortedItems.map(({ label, value, color }) => {
+					const pct = value / total * 100;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1.5",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-baseline justify-between gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-0 truncate text-sm font-medium text-gray",
+								children: label
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-gray-light",
+									children: formatEnergy(value)
+								}), /* @__PURE__ */ jsx("span", {
+									className: "font-semibold text-gray",
+									children: `${integerFormat.format(pct)} %`
+								})]
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "h-1 w-full overflow-hidden rounded-full bg-gray-a4",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full rounded-full",
+								style: {
+									width: `${pct}%`,
+									background: color
+								}
+							})
+						})]
+					}, label);
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+export { EnergyBreakdown };
+
+//# sourceMappingURL=energy-breakdown.js.map

package/dist/components/energy-breakdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-breakdown.js","names":[],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-gray-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,sBAAsB,GAAW;CACxC,IAAI,KAAK,KAAM,OAAO,gBAAgB,CAAC;CACvC,IAAI,KAAK,KAAK,OAAO,cAAc,OAAO,CAAC;CAC3C,IAAI,KAAK,IAAI,OAAO,iBAAiB,OAAO,CAAC;CAC7C,OAAO,iBAAiB,OAAO,CAAC;AAClC;AAEA,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,cAAc,cACZ,CAAC,GAAG,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,GACjD,CAAC,KAAK,CACR;CAEA,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,CAAC;CACnD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,sBAAsB,EACvC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,CAAC;CAIlC,IAFkB,UAAU,GAEb,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAmC;GAAY,CAAA,GAC/D,oBAAC,QAAD;IAAM,WAAU;cAA2B;GAAe,CAAA,CACvD;MAEL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,YAAD;IACE,aAAa,sBAAsB,WAAW;IACnC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;IAAM,EAAE;GACnE,CAAA,GAED,oBAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;KAC9B,OACE,qBAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,QAAD;QAAM,WAAU;kBACb;OACG,CAAA,GACN,qBAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,oBAAC,QAAD;SAAM,WAAU;mBACb,aAAa,KAAK;QACf,CAAA,GACN,oBAAC,QAAD;SAAM,WAAU;mBACb,GAAG,cAAc,OAAO,GAAG;QACxB,CAAA,CACF;SACH;UACL,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;QAAM;OAC9C,CAAA;MACE,CAAA,CACF;QApBK,KAoBL;IAET,CAAC;GACE,CAAA,CACF;IACF;;AAET"}

package/dist/components/energy-history-chart.cjs

@@ -0,0 +1,63 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../utils/chars.cjs");
+const require_utils_format = require("../utils/format.cjs");
+const require_components_bar_chart_with_total = require("./bar-chart-with-total.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/energy-history-chart.tsx
+/**
+* Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
+* (blue) energy sources stacked per bucket, the total height being the energy
+* consumed. Grid feed-in (translucent blue) dips below the baseline as an
+* export. For cumulative energy (week/month/year views). Thin wrapper over the
+* shared visx `BarChart`, so it inherits the card tooltip and both indicators.
+*/
+function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, omitSeries, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
+	const fmtValue = (value) => formatValue ? formatValue(value) : `${require_utils_format.twoDecimalFormat.format(value)} ${unit}`;
+	const omitted = new Set(omitSeries);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_bar_chart_with_total.BarChartWithTotal, {
+		data,
+		series: [
+			{
+				key: "solar",
+				label: labels.solar,
+				color: "var(--orange-9)",
+				getValue: (d) => d.solar
+			},
+			{
+				key: "battery",
+				label: labels.battery,
+				color: "var(--green-9)",
+				getValue: (d) => d.battery
+			},
+			{
+				key: "grid",
+				label: labels.grid,
+				color: "var(--blue-9)",
+				getValue: (d) => d.grid
+			},
+			...labels.gridFeedIn !== void 0 ? [{
+				key: "gridFeedIn",
+				label: labels.gridFeedIn,
+				color: "var(--blue-7)",
+				getValue: (d) => -Math.max(0, d.gridFeedIn ?? 0)
+			}] : []
+		].filter((s) => !omitted.has(s.key)),
+		getCategory: (d) => d.bucket,
+		title,
+		yAxisUnit: unit,
+		height,
+		className,
+		formatValue: fmtValue,
+		categoryTicks,
+		...formatBucketLabel && { formatTooltipCategory: (category) => formatBucketLabel(String(category)) },
+		totalSuffix: unit,
+		totalFormat: { maximumFractionDigits: 2 },
+		...highlightedBucket !== void 0 && { highlightedCategory: highlightedBucket },
+		...showHighlightLine !== void 0 && { showHighlightLine }
+	});
+}
+//#endregion
+exports.EnergyHistoryChart = EnergyHistoryChart;
+
+//# sourceMappingURL=energy-history-chart.cjs.map

package/dist/components/energy-history-chart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-history-chart.cjs","names":["valueFormat","BarChartWithTotal"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { BarChartWithTotal } from './bar-chart-with-total'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n  gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n    /** Optional; when set, grid feed-in is drawn below the baseline. */\n    gridFeedIn?: string\n  }\n  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n  omitSeries?: readonly EnergyHistorySeriesKey[]\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  omitSeries,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n  const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n    ...(labels.gridFeedIn !== undefined\n      ? [\n          {\n            key: 'gridFeedIn',\n            label: labels.gridFeedIn,\n            color: 'var(--blue-7)',\n            getValue: (d: EnergyHistoryDatum) =>\n              -Math.max(0, d.gridFeedIn ?? 0),\n          },\n        ]\n      : []),\n  ]\n  const series = allSeries.filter(\n    (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n  )\n\n  return (\n    <BarChartWithTotal<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,KAAK,IACjB,GAAGA,qBAAAA,iBAAY,OAAO,KAAK,KAAkB;CAEnD,MAAM,UAAU,IAAI,IAA4B,UAAU;CAoC1D,OACE,iBAAA,GAAA,kBAAA,KAACC,wCAAAA,mBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;GACrB;GACA,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,CAAC;GAClC,CACF,IACA,CAAC;EAEgB,EAAE,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,GAA6B,CAMpC;EACb,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,QAAQ,CAAC,EACtC;EACA,aAAa;EACb,aAAa,EAAE,uBAAuB,EAAE;EACxC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,kBACvB;EACA,GAAK,sBAAsB,KAAA,KAAa,EAAE,kBAAkB;CAC7D,CAAA;AAEL"}

package/dist/components/energy-history-chart.d.cts

@@ -0,0 +1,64 @@
+"use client";
+
+//#region src/components/energy-history-chart.d.ts
+interface EnergyHistoryDatum {
+  /** Bucket label/id (e.g. weekday, day-of-month, month). */
+  bucket: string;
+  /** Solar used on-site (kWh, ≥ 0). */
+  solar: number;
+  /** Battery discharged (kWh, ≥ 0). */
+  battery: number;
+  /** Grid imported (kWh, ≥ 0). */
+  grid: number;
+  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */
+  gridFeedIn?: number;
+}
+interface EnergyHistoryChartProps {
+  data: EnergyHistoryDatum[];
+  /** Axis/tooltip unit, e.g. "kWh". */
+  unit: string;
+  formatValue?: (value: number) => string;
+  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */
+  formatBucketLabel?: (bucket: string) => string;
+  labels: {
+    solar: string;
+    battery: string;
+    grid: string; /** Optional; when set, grid feed-in is drawn below the baseline. */
+    gridFeedIn?: string;
+  };
+  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */
+  omitSeries?: readonly EnergyHistorySeriesKey[];
+  /** Bucket to mark with the current-period dashed line. */
+  highlightedBucket?: string;
+  showHighlightLine?: boolean;
+  title?: string;
+  className?: string;
+  height?: number;
+  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */
+  categoryTicks?: string[];
+}
+type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn';
+/**
+ * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
+ * (blue) energy sources stacked per bucket, the total height being the energy
+ * consumed. Grid feed-in (translucent blue) dips below the baseline as an
+ * export. For cumulative energy (week/month/year views). Thin wrapper over the
+ * shared visx `BarChart`, so it inherits the card tooltip and both indicators.
+ */
+declare function EnergyHistoryChart({
+  data,
+  unit,
+  formatValue,
+  formatBucketLabel,
+  labels,
+  omitSeries,
+  highlightedBucket,
+  showHighlightLine,
+  title,
+  className,
+  height,
+  categoryTicks
+}: EnergyHistoryChartProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum, EnergyHistorySeriesKey };
+//# sourceMappingURL=energy-history-chart.d.cts.map