@epilot/spark-ui 0.20.0 → 0.20.1

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 { BarChartWithTotal } from "./bar-chart-with-total.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(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
+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 { 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,iBAAY,OAAO,KAAK,KAAkB;CAEnD,MAAM,UAAU,IAAI,IAA4B,UAAU;CAoC1D,OACE,oBAAC,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/entity-card.d.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import { Tone } from "../lib/tones.js";
-import { SparkIcon } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/entity-card.d.ts
 declare const EntityCard: ({

package/dist/components/input-date.cjs

@@ -6,9 +6,9 @@ const require_components_button = require("./button.cjs");
 const require_components_input_group = require("./input-group.cjs");
 const require_components_calendar = require("./calendar.cjs");
 const require_components_popover = require("./popover.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 ictus = require("ictus");
 let cnfast = require("cnfast");

package/dist/components/input-date.js

@@ -5,8 +5,8 @@ import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
 import { Calendar } from "./calendar.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
-import { CalendarMonth } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { CalendarMonth } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { apply, formatDate, isDateMaskKey, parseDate } from "ictus";
 //#region src/components/input-date.tsx

package/dist/components/input-group.d.cts

@@ -10,7 +10,7 @@ declare function InputGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,

package/dist/components/input-group.d.ts

@@ -10,7 +10,7 @@ declare function InputGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-start" | "inline-end" | null | undefined;
+  align?: "inline-end" | "inline-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,

package/dist/components/line-chart.cjs

@@ -1,12 +1,12 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
-const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_components_chart = require("./chart.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
+const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/line-chart.js

@@ -1,11 +1,11 @@
 "use client";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
-import { buildTimeTicks } from "../utils/chart-time-ticks.js";
-import { cn } from "../utils/cn.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
+import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useMemo } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/message-scroller.cjs

@@ -1,12 +1,12 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_components_button = require("./button.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
+const require_components_button = require("./button.cjs");
 const require_lib_message_animations = require("../lib/message-animations.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 _shadcn_react_message_scroller = require("@shadcn/react/message-scroller");
 let motion_react = require("motion/react");

package/dist/components/message-scroller.js

@@ -1,10 +1,10 @@
 "use client";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { Button } from "./button.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
-import { ArrowDownward, ArrowUpward } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { ArrowDownward, ArrowUpward } from "@epilot/spark-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
 import { LazyMotion, domAnimation } from "motion/react";

package/dist/components/number-flow.d.cts

@@ -1,14 +1,4 @@
 "use client";
 
-import { Format, NumberFlowProps, NumberFlowProps as NumberFlowProps$1 } from "@number-flow/react";
-
-//#region src/components/number-flow.d.ts
-declare function NumberFlow({
-  locales,
-  prefix,
-  suffix,
-  ...props
-}: NumberFlowProps$1): import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { type Format, type NumberFlowProps, NumberFlow as default };
-//# sourceMappingURL=number-flow.d.cts.map
+import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-Bch81ixZ.cjs";
+export { type Format, type NumberFlowProps, NumberFlow as default };

package/dist/components/number-flow.d.ts

@@ -1,14 +1,4 @@
 "use client";
 
-import { Format, NumberFlowProps, NumberFlowProps as NumberFlowProps$1 } from "@number-flow/react";
-
-//#region src/components/number-flow.d.ts
-declare function NumberFlow({
-  locales,
-  prefix,
-  suffix,
-  ...props
-}: NumberFlowProps$1): import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { type Format, type NumberFlowProps, NumberFlow as default };
-//# sourceMappingURL=number-flow.d.ts.map
+import { n as NumberFlow, r as NumberFlowProps, t as Format } from "../number-flow-Bch81ixZ.js";
+export { type Format, type NumberFlowProps, NumberFlow as default };

package/dist/components/page-header.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
 const require_components_typography = require("./typography.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_merge_props = require("@base-ui/react/merge-props");
 let _base_ui_react_use_render = require("@base-ui/react/use-render");

package/dist/components/page-header.js

@@ -2,8 +2,8 @@
 import { cn } from "../utils/cn.js";
 import { Button } from "./button.js";
 import { PageTitle } from "./typography.js";
-import { ChevronLeft } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { ChevronLeft } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

package/dist/components/pill.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_lib_accent_colors = require("../lib/accent-colors.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 cnfast = require("cnfast");
 //#region src/components/pill.tsx

package/dist/components/pill.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
-import { Close } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { Close } from "@epilot/spark-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/pill.tsx
 /**