@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/sparkline.js

@@ -1,260 +1,324 @@
 "use client";
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent
-} from "./chunk-NOFXVRWL.js";
-import {
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/sparkline.tsx
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  Line,
-  LineChart,
-  XAxis
-} from "recharts";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var SPARKLINE_LAYOUT = {
-  sm: {
-    width: 72,
-    height: 24,
-    strokeWidth: 1.5,
-    dotRadius: 2,
-    margin: { top: 4, right: 4, bottom: 2, left: 2 },
-    barRadius: 1,
-    maxBarSize: 6
-  },
-  md: {
-    width: 104,
-    height: 32,
-    strokeWidth: 2,
-    dotRadius: 2.5,
-    margin: { top: 5, right: 5, bottom: 2, left: 2 },
-    barRadius: 2,
-    maxBarSize: 8
-  },
-  lg: {
-    width: 144,
-    height: 44,
-    strokeWidth: 2,
-    dotRadius: 3,
-    margin: { top: 6, right: 6, bottom: 3, left: 3 },
-    barRadius: 2,
-    maxBarSize: 10
-  }
+import { Area, AreaChart, Bar, BarChart, Line, LineChart, XAxis } from "recharts";
+//#region src/sparkline.tsx
+const SPARKLINE_LAYOUT = {
+	sm: {
+		width: 72,
+		height: 24,
+		strokeWidth: 1.5,
+		dotRadius: 2,
+		margin: {
+			top: 4,
+			right: 4,
+			bottom: 2,
+			left: 2
+		},
+		barRadius: 1,
+		maxBarSize: 6
+	},
+	md: {
+		width: 104,
+		height: 32,
+		strokeWidth: 2,
+		dotRadius: 2.5,
+		margin: {
+			top: 5,
+			right: 5,
+			bottom: 2,
+			left: 2
+		},
+		barRadius: 2,
+		maxBarSize: 8
+	},
+	lg: {
+		width: 144,
+		height: 44,
+		strokeWidth: 2,
+		dotRadius: 3,
+		margin: {
+			top: 6,
+			right: 6,
+			bottom: 3,
+			left: 3
+		},
+		barRadius: 2,
+		maxBarSize: 10
+	}
 };
-var TREND_COLOR = {
-  up: "var(--color-status-success)",
-  down: "var(--color-status-danger)",
-  flat: "var(--color-fg-secondary)"
+const TREND_COLOR = {
+	up: "var(--color-status-success)",
+	down: "var(--color-status-danger)",
+	flat: "var(--color-fg-secondary)"
 };
+/**
+* Derive sentiment from the series: compare the last value to the first and
+* read flat when the change is a small fraction of the overall range.
+*/
 function resolveTrend(data) {
-  if (data.length < 2) return "flat";
-  const first = data[0];
-  const last = data[data.length - 1];
-  const min = Math.min(...data);
-  const max = Math.max(...data);
-  const range = max - min || 1;
-  const delta = last - first;
-  if (Math.abs(delta) / range < 0.05) return "flat";
-  return delta > 0 ? "up" : "down";
+	if (data.length < 2) return "flat";
+	const first = data[0];
+	const last = data[data.length - 1];
+	const min = Math.min(...data);
+	const range = Math.max(...data) - min || 1;
+	const delta = last - first;
+	if (Math.abs(delta) / range < .05) return "flat";
+	return delta > 0 ? "up" : "down";
 }
-function SparklineEndDot({
-  cx,
-  cy,
-  index,
-  lastIndex,
-  radius
-}) {
-  if (cx == null || cy == null || index !== lastIndex) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "circle",
-    {
-      cx,
-      cy,
-      r: radius,
-      fill: "var(--color-value)",
-      stroke: "var(--color-surface)",
-      strokeWidth: 2
-    }
-  );
+/**
+* Custom dot passed to recharts as `dot={<SparklineEndDot ... />}`. recharts
+* clones it for every point, injecting `cx`/`cy`/`index`; we only paint the
+* latest point so the series carries a single end-point marker.
+*/
+function SparklineEndDot({ cx, cy, index, lastIndex, radius }) {
+	if (cx == null || cy == null || index !== lastIndex) return null;
+	return /* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r: radius,
+		fill: "var(--color-value)",
+		stroke: "var(--color-surface)",
+		strokeWidth: 2
+	});
 }
-function SparklineBarShape({
-  x,
-  y,
-  width,
-  height,
-  index,
-  value,
-  lastIndex,
-  radius,
-  dotRadius
-}) {
-  if (x == null || y == null || width == null || height == null) {
-    return null;
-  }
-  const markerY = typeof value === "number" && value < 0 ? y + height : y;
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x,
-        y,
-        width,
-        height,
-        rx: radius,
-        ry: radius,
-        fill: "var(--color-value)"
-      }
-    ),
-    index === lastIndex ? /* @__PURE__ */ jsx(
-      "circle",
-      {
-        cx: x + width / 2,
-        cy: markerY,
-        r: dotRadius,
-        fill: "var(--color-value)",
-        stroke: "var(--color-surface)",
-        strokeWidth: 2
-      }
-    ) : null
-  ] });
+/**
+* Bars do not support `dot`, so the marker is rendered as part of a custom bar
+* shape. Only the latest bar receives the end-point marker.
+*/
+function SparklineBarShape({ x, y, width, height, index, value, lastIndex, radius, dotRadius }) {
+	if (x == null || y == null || width == null || height == null) return null;
+	const markerY = typeof value === "number" && value < 0 ? y + height : y;
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+		x,
+		y,
+		width,
+		height,
+		rx: radius,
+		ry: radius,
+		fill: "var(--color-value)"
+	}), index === lastIndex ? /* @__PURE__ */ jsx("circle", {
+		cx: x + width / 2,
+		cy: markerY,
+		r: dotRadius,
+		fill: "var(--color-value)",
+		stroke: "var(--color-surface)",
+		strokeWidth: 2
+	}) : null] });
 }
-function Sparkline({
-  data,
-  type = "line",
-  size,
-  trend,
-  showMarker = true,
-  tooltip = false,
-  label = "Value",
-  labels,
-  valueType = "number",
-  className,
-  style,
-  ...props
-}) {
-  const layout = SPARKLINE_LAYOUT[useComponentSize(size)];
-  const resolvedTrend = trend ?? resolveTrend(data);
-  const color = TREND_COLOR[resolvedTrend];
-  const chartData = data.map((value, i) => ({
-    x: labels?.[i] ?? `${i + 1}`,
-    value
-  }));
-  const lastIndex = data.length - 1;
-  const config = {
-    value: { label, 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 + 0.5,
-    fill: "var(--color-value)",
-    stroke: "var(--color-surface)",
-    strokeWidth: 2
-  } : false;
-  const tooltipNode = tooltip ? /* @__PURE__ */ jsx(
-    ChartTooltip,
-    {
-      cursor: false,
-      content: /* @__PURE__ */ jsx(ChartTooltipContent, { size: "xs", valueType })
-    }
-  ) : null;
-  const ariaLabel = props["aria-label"] ?? `${label} sparkline, trend ${resolvedTrend}`;
-  if (data.length < 2) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...props,
-        "aria-label": ariaLabel,
-        role: "img",
-        className: cn("w-full", className),
-        style: { height: layout.height, ...style }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    ChartContainer,
-    {
-      ...props,
-      "aria-label": ariaLabel,
-      role: "img",
-      config,
-      className: cn("aspect-auto w-full", className),
-      style: { 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, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
-        tooltip ? /* @__PURE__ */ jsx(XAxis, { dataKey: "x", hide: true }) : null,
-        tooltipNode,
-        /* @__PURE__ */ jsx(
-          Area,
-          {
-            type: "monotone",
-            dataKey: "value",
-            stroke: "var(--color-value)",
-            strokeWidth: layout.strokeWidth,
-            strokeLinejoin: "round",
-            strokeLinecap: "round",
-            fill: "var(--color-value)",
-            fillOpacity: 0.14,
-            dot: endDot,
-            activeDot,
-            isAnimationActive: false
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs(LineChart, { accessibilityLayer: true, data: chartData, margin: layout.margin, children: [
-        tooltip ? /* @__PURE__ */ jsx(XAxis, { dataKey: "x", hide: true }) : null,
-        tooltipNode,
-        /* @__PURE__ */ jsx(
-          Line,
-          {
-            type: "monotone",
-            dataKey: "value",
-            stroke: "var(--color-value)",
-            strokeWidth: layout.strokeWidth,
-            strokeLinejoin: "round",
-            strokeLinecap: "round",
-            dot: endDot,
-            activeDot,
-            isAnimationActive: false
-          }
-        )
-      ] })
-    }
-  );
+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];
+	const chartData = data.map((value, i) => ({
+		x: labels?.[i] ?? `${i + 1}`,
+		value
+	}));
+	const config = { value: {
+		label: label ?? "Value",
+		color
+	} };
+	const activeDot = tooltip ? {
+		r: layout.dotRadius + .5,
+		fill: "var(--color-value)",
+		stroke: "var(--color-surface)",
+		strokeWidth: 2
+	} : false;
+	const tooltipNode = tooltip ? /* @__PURE__ */ jsx(ChartTooltip, {
+		cursor: false,
+		content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+			size: "xs",
+			valueType: valueType ?? "number"
+		})
+	}) : null;
+	return {
+		layout,
+		resolvedTrend,
+		chartData,
+		lastIndex: data.length - 1,
+		config,
+		showDot: (showMarker ?? true) && data.length >= 2,
+		activeDot,
+		tooltipNode,
+		ariaLabel: ariaLabelProp ?? `${label ?? "Value"} ${kind}, trend ${resolvedTrend}`
+	};
 }
-export {
-  SPARKLINE_LAYOUT,
-  Sparkline
-};
-//# sourceMappingURL=sparkline.js.map
+/**
+* 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",
+		className: cn("w-full", className),
+		style: {
+			height: layout.height,
+			...style
+		}
+	});
+	return /* @__PURE__ */ jsx(ChartContainer, {
+		...props,
+		"aria-label": ariaLabel,
+		role: "img",
+		config,
+		className: cn("aspect-auto w-full", className),
+		style: {
+			height: layout.height,
+			...style
+		},
+		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: [
+				tooltipNode ? /* @__PURE__ */ jsx(XAxis, {
+					dataKey: "x",
+					hide: true
+				}) : null,
+				tooltipNode,
+				/* @__PURE__ */ jsx(Line, {
+					type: "monotone",
+					dataKey: "value",
+					stroke: "var(--color-value)",
+					strokeWidth: layout.strokeWidth,
+					strokeLinejoin: "round",
+					strokeLinecap: "round",
+					dot: endDot,
+					activeDot,
+					isAnimationActive: false
+				})
+			]
+		})
+	});
+}
+/**
+* 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: [
+				tooltipNode ? /* @__PURE__ */ jsx(XAxis, {
+					dataKey: "x",
+					hide: true
+				}) : null,
+				tooltipNode,
+				/* @__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
+				})
+			]
+		})
+	});
+}
+/**
+* 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, SparklineArea, SparklineBar, SparklineLine };

package/dist/stepper.d.ts

@@ -1,43 +1,42 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+//#region src/stepper.d.ts
 type StepperOrientation = "horizontal" | "vertical";
 type StepperState = "complete" | "active" | "upcoming";
 type StepperProps = React.ComponentProps<"div"> & {
-    orientation?: StepperOrientation;
-    /** Active step number (1-based). Items without an explicit `state` derive theirs from this. */
-    value?: number;
+  orientation?: StepperOrientation;
+  /** Active step number (1-based). Items without an explicit `state` derive theirs from this. */
+  value?: number;
 };
 declare function Stepper({ orientation, value, className, children, ...props }: StepperProps): React.JSX.Element;
 type StepperItemProps = Omit<React.ComponentProps<"div">, "children"> & {
-    /** Force a specific state instead of deriving it from the stepper `value`. */
-    state?: StepperState;
-    /** 1-based position. Injected by `Stepper`; only set this to override. */
-    step?: number;
-    /** Whether this is the last item (hides its connector). Injected by `Stepper`. */
-    last?: boolean;
-    /** Custom indicator node. Defaults to a numbered circle / checkmark. */
-    indicator?: React.ReactNode;
-    children?: React.ReactNode;
+  /** Force a specific state instead of deriving it from the stepper `value`. */
+  state?: StepperState;
+  /** 1-based position. Injected by `Stepper`; only set this to override. */
+  step?: number;
+  /** Whether this is the last item (hides its connector). Injected by `Stepper`. */
+  last?: boolean;
+  /** Custom indicator node. Defaults to a numbered circle / checkmark. */
+  indicator?: React.ReactNode;
+  children?: React.ReactNode;
 };
 declare function StepperItem({ state: stateOverride, step, last, indicator, className, children, ...props }: StepperItemProps): React.JSX.Element;
 declare const indicatorVariants: (props?: ({
-    state?: "active" | "complete" | "upcoming" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  state?: "active" | "complete" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StepperIndicatorProps = Omit<React.ComponentProps<"div">, "children"> & VariantProps<typeof indicatorVariants> & {
-    /** Override the rendered glyph. Defaults to the step number / checkmark. */
-    children?: React.ReactNode;
+  /** Override the rendered glyph. Defaults to the step number / checkmark. */
+  children?: React.ReactNode;
 };
 declare function StepperIndicator({ className, state: stateProp, children, ...props }: StepperIndicatorProps): React.JSX.Element;
 declare function StepperSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function StepperTitle({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 declare function StepperDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 type StepperMetaProps = Omit<React.ComponentProps<"div">, "children"> & {
-    date?: React.ReactNode;
-    time?: React.ReactNode;
+  date?: React.ReactNode;
+  time?: React.ReactNode;
 };
 /** Date / timestamp caption pair. Placeholder colour regardless of state. */
 declare function StepperMeta({ date, time, className, ...props }: StepperMetaProps): React.JSX.Element | null;
-
-export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperMeta, type StepperOrientation, StepperSeparator, type StepperState, StepperTitle };
+//#endregion
+export { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperMeta, type StepperOrientation, StepperSeparator, type StepperState, StepperTitle };