@epilot/spark-ui 0.10.0

package/dist/components/energy-bar-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"energy-bar-chart.js","names":[],"sources":["../../src/components/energy-bar-chart.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type Category = BarChartCategory\n\nexport interface HourBucket {\n  hour: number\n  solar: number\n  battery: number\n  grid: number\n}\n\nexport type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>\nexport type EnergyBarLineSeries<TDatum = HourBucket> =\n  BarChartLineSeries<TDatum>\n\ninterface EnergyBarChartProps<TDatum> {\n  data: TDatum[]\n  series: BarChartSeries<TDatum>[]\n  lines?: BarChartLineSeries<TDatum>[]\n  getCategory: (datum: TDatum) => Category\n  categories?: Category[]\n  categoryTicks?: Category[]\n  formatCategory?: (category: Category) => string\n  formatTooltipCategory?: (category: Category) => string\n  highlightedCategory?: Category\n  showHighlightLine?: boolean\n  title?: string\n  yAxisUnit?: string\n  formatValue?: (value: number) => string\n  totalSuffix?: string\n  totalFormat?: Format\n  height?: number\n  className?: string\n}\n\nexport function EnergyBarChart<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: EnergyBarChartProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value, animated) => (\n        <NumberFlow\n          value={value}\n          animated={animated}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;AAyCA,SAAgB,eAAuB,EACrC,aACA,aACA,WACA,GAAG,QAC+C;CAClD,OACE,oBAAC,UAAD;EACE,GAAI;EACO;EACX,cAAc,OAAO,aACnB,oBAAC,YAAD;GACS;GACG;GACV,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,YAAY;GACxD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,YAAY;GACxD,WAAU;EACX,CAAA;CAEJ,CAAA;AAEL"}

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_energy_bar_chart = require("./energy-bar-chart.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_energy_bar_chart.EnergyBarChart, {
+		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","EnergyBarChart"],"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 { EnergyBarChart } from './energy-bar-chart'\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    <EnergyBarChart<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,oCAAAA,gBAAD;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

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

@@ -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.ts.map

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

@@ -0,0 +1,62 @@
+"use client";
+import "../utils/chars.js";
+import { twoDecimalFormat } from "../utils/format.js";
+import { EnergyBarChart } from "./energy-bar-chart.js";
+import { jsx } from "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) : `${twoDecimalFormat.format(value)} ${unit}`;
+	const omitted = new Set(omitSeries);
+	return /* @__PURE__ */ jsx(EnergyBarChart, {
+		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
+export { EnergyHistoryChart };
+
+//# sourceMappingURL=energy-history-chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"energy-history-chart.js","names":["valueFormat"],"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 { EnergyBarChart } from './energy-bar-chart'\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    <EnergyBarChart<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,iBAAY,OAAO,KAAK,KAAkB;CAEnD,MAAM,UAAU,IAAI,IAA4B,UAAU;CAoC1D,OACE,oBAAC,gBAAD;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/feed-in-hero.cjs

@@ -0,0 +1,55 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let cnfast = require("cnfast");
+//#region src/components/feed-in-hero.tsx
+const FeedInHero = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex flex-col items-center gap-1 rounded-2xl border border-gray p-5 text-center", className),
+		...rest
+	});
+};
+/**
+* Label row above the value. Lays out children in a flex row with a small
+* gap so a tooltip / icon can sit alongside the label text.
+*/
+const FeedInHeroLabel = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, cnfast.cn)("flex items-center gap-1.5 text-xs font-medium text-gray-light", className),
+		...rest
+	});
+};
+const valueToneVariants = (0, class_variance_authority.cva)("text-4xl font-bold tabular-nums", {
+	variants: { tone: {
+		success: "text-success",
+		warning: "text-warning",
+		error: "text-error",
+		accent: "text-accent",
+		neutral: "text-gray"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+const FeedInHeroValue = ({ className, tone, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: valueToneVariants({
+			tone,
+			className
+		}),
+		...rest
+	});
+};
+/** Smaller-weight unit suffix that sits inline with the value (e.g. "W"). */
+const FeedInHeroValueUnit = ({ className, ...rest }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, cnfast.cn)("text-2xl font-semibold", className),
+		...rest
+	});
+};
+//#endregion
+exports.FeedInHero = FeedInHero;
+exports.FeedInHeroLabel = FeedInHeroLabel;
+exports.FeedInHeroValue = FeedInHeroValue;
+exports.FeedInHeroValueUnit = FeedInHeroValueUnit;
+
+//# sourceMappingURL=feed-in-hero.cjs.map

package/dist/components/feed-in-hero.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"feed-in-hero.cjs","names":[],"sources":["../../src/components/feed-in-hero.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst FeedInHero = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center gap-1 rounded-2xl border border-gray p-5 text-center',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\n/**\n * Label row above the value. Lays out children in a flex row with a small\n * gap so a tooltip / icon can sit alongside the label text.\n */\nconst FeedInHeroLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-xs font-medium text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst valueToneVariants = cva('text-4xl font-bold tabular-nums', {\n  variants: {\n    tone: {\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-error',\n      accent: 'text-accent',\n      neutral: 'text-gray',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n})\n\nconst FeedInHeroValue = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => {\n  return <span className={valueToneVariants({ tone, className })} {...rest} />\n}\n\n/** Smaller-weight unit suffix that sits inline with the value (e.g. \"W\"). */\nconst FeedInHeroValueUnit = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-2xl font-semibold', className)} {...rest} />\n}\n\nexport { FeedInHero, FeedInHeroLabel, FeedInHeroValue, FeedInHeroValueUnit }\n"],"mappings":";;;;;;AAIA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;AAMA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,iEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAA,GAAA,yBAAA,KAAwB,mCAAmC;CAC/D,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CAAC;AAED,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WACiD;CACpD,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,WAAW,kBAAkB;GAAE;GAAM;EAAU,CAAC;EAAG,GAAI;CAAO,CAAA;AAC7E;;AAGA,MAAM,uBAAuB,EAC3B,WACA,GAAG,WAC+B;CAClC,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,0BAA0B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9E"}

package/dist/components/feed-in-hero.d.cts

@@ -0,0 +1,32 @@
+"use client";
+
+import { Tone } from "../lib/tones.cjs";
+
+//#region src/components/feed-in-hero.d.ts
+declare const FeedInHero: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Label row above the value. Lays out children in a flex row with a small
+ * gap so a tooltip / icon can sit alongside the label text.
+ */
+declare const FeedInHeroLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const FeedInHeroValue: ({
+  className,
+  tone,
+  ...rest
+}: React.ComponentProps<"span"> & {
+  tone?: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Smaller-weight unit suffix that sits inline with the value (e.g. "W"). */
+declare const FeedInHeroValueUnit: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FeedInHero, FeedInHeroLabel, FeedInHeroValue, FeedInHeroValueUnit };
+//# sourceMappingURL=feed-in-hero.d.cts.map

package/dist/components/feed-in-hero.d.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { Tone } from "../lib/tones.js";
+
+//#region src/components/feed-in-hero.d.ts
+declare const FeedInHero: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Label row above the value. Lays out children in a flex row with a small
+ * gap so a tooltip / icon can sit alongside the label text.
+ */
+declare const FeedInHeroLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const FeedInHeroValue: ({
+  className,
+  tone,
+  ...rest
+}: React.ComponentProps<"span"> & {
+  tone?: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Smaller-weight unit suffix that sits inline with the value (e.g. "W"). */
+declare const FeedInHeroValueUnit: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FeedInHero, FeedInHeroLabel, FeedInHeroValue, FeedInHeroValueUnit };
+//# sourceMappingURL=feed-in-hero.d.ts.map