@giddaa-housing/ui 1.1.0 → 1.2.0

package/dist/sparkline.d.ts

@@ -3,10 +3,12 @@ import { ChartContainer, ChartValueType } from "./chart.js";
 import * as React from "react";
 //#region src/sparkline.d.ts
 /**
- * Small inline trend lines for KPI cards and dense tables — no axes, no
- * gridlines. Composed from recharts plot primitives (`Line`/`Area`/`Bar`) so it
- * shares one charting engine with `line-chart`/`bar-chart` and gets hover
- * tooltips for free via the shared `ChartTooltip`/`ChartTooltipContent`.
+ * Small inline trend marks for KPI cards and dense tables — no axes, no
+ * gridlines. Three render styles ship as separate components sharing one engine:
+ * `SparklineLine`, `SparklineArea`, and `SparklineBar`. All are composed from
+ * recharts plot primitives so they share the charting engine with
+ * `line-chart`/`bar-chart` and get hover tooltips for free via the shared
+ * `ChartTooltip`/`ChartTooltipContent`.
  *
  * Sizing follows the same convention as the other charts: `size` sets the height
  * (plus stroke/dot scale) and the width is parent-driven — the component is
@@ -14,8 +16,8 @@ import * as React from "react";
  * recommended container sizes) or let it fill a KPI card.
  *
  * Sentiment colour is driven by the data direction — `status-success` for an
- * upward series, `status-danger` for downward, `text-secondary` for flat — and
- * can be overridden with `trend`. The area fill reuses the line colour at 14 %.
+ * upward series, `status-danger` for downward, `fg-secondary` for flat — and can
+ * be overridden with `trend`. The area fill reuses the line colour at 14%.
  *
  * Tokens:
  * - Stroke / fill — up: `var(--color-status-success)`, down:
@@ -26,22 +28,20 @@ import * as React from "react";
  *
  * @example
  * // KPI card trend — colour follows the metric's sentiment automatically
- * <Sparkline data={[40, 44, 42, 55, 58, 62, 70]} type="area" />
+ * <SparklineArea data={[40, 44, 42, 55, 58, 62, 70]} />
  *
  * @example
  * // Interactive — hover tooltip with currency formatting and month captions
- * <Sparkline data={values} tooltip label="Revenue" valueType="currency" labels={months} />
+ * <SparklineLine data={values} tooltip label="Revenue" valueType="currency" labels={months} />
  *
  * @example
  * // Dense table cell — fixed-width wrapper, bar render, no marker
  * <span className="inline-block w-[72px]">
- *   <Sparkline data={values} type="bar" size="sm" showMarker={false} />
+ *   <SparklineBar data={values} size="sm" showMarker={false} />
  * </span>
  */
 /** Sparkline sizes line up with the three shared `ComponentSize` values. */
 type SparklineSize = ComponentSize;
-/** Render style for the series. */
-type SparklineType = "line" | "bar" | "area";
 /** Sentiment of the series — drives the stroke/fill colour. */
 type SparklineTrend = "up" | "down" | "flat";
 type SparklineLayout = {
@@ -66,11 +66,10 @@ type SparklineLayout = {
   maxBarSize: number;
 };
 declare const SPARKLINE_LAYOUT: Record<SparklineSize, SparklineLayout>;
+/** Shared props for all three sparkline render styles. */
 type SparklineProps = Omit<React.ComponentProps<typeof ChartContainer>, "config" | "children"> & {
   /** The series to plot. Needs at least two points to draw a trend. */
   data: number[];
-  /** Render style. Defaults to `line`. */
-  type?: SparklineType;
   /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
   size?: SparklineSize;
   /** Override the auto-detected sentiment colour. */
@@ -86,6 +85,20 @@ type SparklineProps = Omit<React.ComponentProps<typeof ChartContainer>, "config"
   /** Value formatting for the tooltip. Defaults to `number`. */
   valueType?: ChartValueType;
 };
-declare function Sparkline({ data, type, size, trend, showMarker, tooltip, label, labels, valueType, className, style, ...props }: SparklineProps): React.JSX.Element;
+/**
+ * Inline line sparkline — a bare trend stroke with an optional end-point dot and
+ * hover tooltip. Sentiment colour is auto-detected from the series direction.
+ */
+declare function SparklineLine({ data, size, trend, showMarker, tooltip, label, labels, valueType, className, style, "aria-label": ariaLabelProp, ...rest }: SparklineProps): React.JSX.Element;
+/**
+ * Inline area sparkline — the same trend stroke as `SparklineLine` with a 14%
+ * wash beneath it, for KPI cards where the filled shape reads at a glance.
+ */
+declare function SparklineArea({ data, size, trend, showMarker, tooltip, label, labels, valueType, className, style, "aria-label": ariaLabelProp, ...rest }: SparklineProps): React.JSX.Element;
+/**
+ * Inline bar sparkline — one thin bar per point, for discrete series (counts,
+ * per-period totals). The end-point marker rides the latest bar.
+ */
+declare function SparklineBar({ data, size, trend, showMarker, tooltip, label, labels, valueType, className, style, "aria-label": ariaLabelProp, ...rest }: SparklineProps): React.JSX.Element;
 //#endregion
-export { SPARKLINE_LAYOUT, Sparkline, type SparklineProps, type SparklineSize, type SparklineTrend, type SparklineType };
+export { SPARKLINE_LAYOUT, SparklineArea, SparklineBar, SparklineLine, type SparklineProps, type SparklineSize, type SparklineTrend };

package/dist/sparkline.js

@@ -108,7 +108,7 @@ function SparklineBarShape({ x, y, width, height, index, value, lastIndex, radiu
 		strokeWidth: 2
 	}) : null] });
 }
-function Sparkline({ data, type = "line", size, trend, showMarker = true, tooltip = false, label = "Value", labels, valueType = "number", className, style, ...props }) {
+function useSparklineSetup({ data, size, trend, showMarker, tooltip, label, labels, valueType }, kind, ariaLabelProp) {
 	const layout = SPARKLINE_LAYOUT[useComponentSize(size)];
 	const resolvedTrend = trend ?? resolveTrend(data);
 	const color = TREND_COLOR[resolvedTrend];
@@ -116,21 +116,10 @@ function Sparkline({ data, type = "line", size, trend, showMarker = true, toolti
 		x: labels?.[i] ?? `${i + 1}`,
 		value
 	}));
-	const lastIndex = data.length - 1;
 	const config = { value: {
-		label,
+		label: label ?? "Value",
 		color
 	} };
-	const showDot = showMarker && data.length >= 2;
-	const endDot = showDot ? /* @__PURE__ */ jsx(SparklineEndDot, {
-		lastIndex,
-		radius: layout.dotRadius
-	}) : false;
-	const barShape = showDot ? /* @__PURE__ */ jsx(SparklineBarShape, {
-		lastIndex,
-		radius: layout.barRadius,
-		dotRadius: layout.dotRadius
-	}) : void 0;
 	const activeDot = tooltip ? {
 		r: layout.dotRadius + .5,
 		fill: "var(--color-value)",
@@ -141,11 +130,28 @@ function Sparkline({ data, type = "line", size, trend, showMarker = true, toolti
 		cursor: false,
 		content: /* @__PURE__ */ jsx(ChartTooltipContent, {
 			size: "xs",
-			valueType
+			valueType: valueType ?? "number"
 		})
 	}) : null;
-	const ariaLabel = props["aria-label"] ?? `${label} sparkline, trend ${resolvedTrend}`;
-	if (data.length < 2) return /* @__PURE__ */ jsx("div", {
+	return {
+		layout,
+		resolvedTrend,
+		chartData,
+		lastIndex: data.length - 1,
+		config,
+		showDot: (showMarker ?? true) && data.length >= 2,
+		activeDot,
+		tooltipNode,
+		ariaLabel: ariaLabelProp ?? `${label ?? "Value"} ${kind}, trend ${resolvedTrend}`
+	};
+}
+/**
+* Frame shared by every render style — the empty placeholder (fewer than two
+* points) and the responsive `ChartContainer` with the sparkline's aria wiring.
+*/
+function SparklineFrame({ setup, empty, className, style, children, ...props }) {
+	const { layout, config, ariaLabel } = setup;
+	if (empty) return /* @__PURE__ */ jsx("div", {
 		...props,
 		"aria-label": ariaLabel,
 		role: "img",
@@ -165,59 +171,105 @@ function Sparkline({ data, type = "line", size, trend, showMarker = true, toolti
 			height: layout.height,
 			...style
 		},
-		children: type === "bar" ? /* @__PURE__ */ jsxs(BarChart, {
-			accessibilityLayer: true,
-			data: chartData,
-			margin: layout.margin,
-			children: [tooltipNode, /* @__PURE__ */ jsx(Bar, {
-				dataKey: "value",
-				fill: "var(--color-value)",
-				radius: layout.barRadius,
-				maxBarSize: layout.maxBarSize,
-				shape: barShape,
-				isAnimationActive: false
-			})]
-		}) : type === "area" ? /* @__PURE__ */ jsxs(AreaChart, {
+		children
+	});
+}
+/**
+* Inline line sparkline — a bare trend stroke with an optional end-point dot and
+* hover tooltip. Sentiment colour is auto-detected from the series direction.
+*/
+function SparklineLine({ data, size, trend, showMarker, tooltip, label, labels, valueType, className, style, "aria-label": ariaLabelProp, ...rest }) {
+	const setup = useSparklineSetup({
+		data,
+		size,
+		trend,
+		showMarker,
+		tooltip,
+		label,
+		labels,
+		valueType
+	}, "sparkline", ariaLabelProp);
+	const { layout, chartData, lastIndex, showDot, activeDot, tooltipNode } = setup;
+	const endDot = showDot ? /* @__PURE__ */ jsx(SparklineEndDot, {
+		lastIndex,
+		radius: layout.dotRadius
+	}) : false;
+	return /* @__PURE__ */ jsx(SparklineFrame, {
+		setup,
+		empty: data.length < 2,
+		className,
+		style,
+		...rest,
+		children: /* @__PURE__ */ jsxs(LineChart, {
 			accessibilityLayer: true,
 			data: chartData,
 			margin: layout.margin,
 			children: [
-				tooltip ? /* @__PURE__ */ jsx(XAxis, {
+				tooltipNode ? /* @__PURE__ */ jsx(XAxis, {
 					dataKey: "x",
 					hide: true
 				}) : null,
 				tooltipNode,
-				/* @__PURE__ */ jsx(Area, {
+				/* @__PURE__ */ jsx(Line, {
 					type: "monotone",
 					dataKey: "value",
 					stroke: "var(--color-value)",
 					strokeWidth: layout.strokeWidth,
 					strokeLinejoin: "round",
 					strokeLinecap: "round",
-					fill: "var(--color-value)",
-					fillOpacity: .14,
 					dot: endDot,
 					activeDot,
 					isAnimationActive: false
 				})
 			]
-		}) : /* @__PURE__ */ jsxs(LineChart, {
+		})
+	});
+}
+/**
+* Inline area sparkline — the same trend stroke as `SparklineLine` with a 14%
+* wash beneath it, for KPI cards where the filled shape reads at a glance.
+*/
+function SparklineArea({ data, size, trend, showMarker, tooltip, label, labels, valueType, className, style, "aria-label": ariaLabelProp, ...rest }) {
+	const setup = useSparklineSetup({
+		data,
+		size,
+		trend,
+		showMarker,
+		tooltip,
+		label,
+		labels,
+		valueType
+	}, "sparkline", ariaLabelProp);
+	const { layout, chartData, lastIndex, showDot, activeDot, tooltipNode } = setup;
+	const endDot = showDot ? /* @__PURE__ */ jsx(SparklineEndDot, {
+		lastIndex,
+		radius: layout.dotRadius
+	}) : false;
+	return /* @__PURE__ */ jsx(SparklineFrame, {
+		setup,
+		empty: data.length < 2,
+		className,
+		style,
+		...rest,
+		children: /* @__PURE__ */ jsxs(AreaChart, {
 			accessibilityLayer: true,
 			data: chartData,
 			margin: layout.margin,
 			children: [
-				tooltip ? /* @__PURE__ */ jsx(XAxis, {
+				tooltipNode ? /* @__PURE__ */ jsx(XAxis, {
 					dataKey: "x",
 					hide: true
 				}) : null,
 				tooltipNode,
-				/* @__PURE__ */ jsx(Line, {
+				/* @__PURE__ */ jsx(Area, {
 					type: "monotone",
 					dataKey: "value",
 					stroke: "var(--color-value)",
 					strokeWidth: layout.strokeWidth,
 					strokeLinejoin: "round",
 					strokeLinecap: "round",
+					fill: "var(--color-value)",
+					fillOpacity: .14,
 					dot: endDot,
 					activeDot,
 					isAnimationActive: false
@@ -226,5 +278,47 @@ function Sparkline({ data, type = "line", size, trend, showMarker = true, toolti
 		})
 	});
 }
+/**
+* Inline bar sparkline — one thin bar per point, for discrete series (counts,
+* per-period totals). The end-point marker rides the latest bar.
+*/
+function SparklineBar({ data, size, trend, showMarker, tooltip, label, labels, valueType, className, style, "aria-label": ariaLabelProp, ...rest }) {
+	const setup = useSparklineSetup({
+		data,
+		size,
+		trend,
+		showMarker,
+		tooltip,
+		label,
+		labels,
+		valueType
+	}, "bar sparkline", ariaLabelProp);
+	const { layout, chartData, lastIndex, showDot, tooltipNode } = setup;
+	const barShape = showDot ? /* @__PURE__ */ jsx(SparklineBarShape, {
+		lastIndex,
+		radius: layout.barRadius,
+		dotRadius: layout.dotRadius
+	}) : void 0;
+	return /* @__PURE__ */ jsx(SparklineFrame, {
+		setup,
+		empty: data.length < 2,
+		className,
+		style,
+		...rest,
+		children: /* @__PURE__ */ jsxs(BarChart, {
+			accessibilityLayer: true,
+			data: chartData,
+			margin: layout.margin,
+			children: [tooltipNode, /* @__PURE__ */ jsx(Bar, {
+				dataKey: "value",
+				fill: "var(--color-value)",
+				radius: layout.barRadius,
+				maxBarSize: layout.maxBarSize,
+				shape: barShape,
+				isAnimationActive: false
+			})]
+		})
+	});
+}
 //#endregion
-export { SPARKLINE_LAYOUT, Sparkline };
+export { SPARKLINE_LAYOUT, SparklineArea, SparklineBar, SparklineLine };