@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/scatter-chart.d.ts

@@ -0,0 +1,140 @@
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartConfig } from "./chart.js";
+import * as React from "react";
+import { CartesianGrid, Scatter, ScatterChart as ScatterChart$1, XAxis, YAxis } from "recharts";
+import { Payload } from "recharts/types/component/DefaultTooltipContent";
+//#region src/scatter-chart.d.ts
+/**
+ * Scatter charts are composable wrappers over the recharts cartesian
+ * primitives. recharts 3 registers graphical items through context when they
+ * render, so the primitives CAN be wrapped in our own components. Each
+ * wrapper bakes in the giddaa defaults (tokens, size-scaled type, mark specs)
+ * and forwards every recharts prop, so anything can be overridden in place or
+ * replaced with the raw recharts element.
+ *
+ * Anatomy: `ScatterChart` is the plot root (frame + responsive box + recharts
+ * chart); compose the grid, axes, series, and the shared overlays from
+ * `./chart` as children. Unlike `BarChart`/`RadarChart`, each series carries
+ * its own `data` (an array of `{ x, y }` pairs) rather than sharing one row
+ * per category.
+ *
+ * @example
+ * <ChartCard size="md">
+ *   <ChartHeader>
+ *     <ChartTitle>Price vs. size</ChartTitle>
+ *     <ChartDescription>Lekki listings · ₦m by sqm</ChartDescription>
+ *   </ChartHeader>
+ *   <ScatterChart config={config}>
+ *     <ScatterChartGrid />
+ *     <ScatterChartXAxis dataKey="size" name="Size" unit="sqm" />
+ *     <ScatterChartYAxis dataKey="price" name="Price" unit="₦m" />
+ *     <ChartTooltip content={<ScatterChartTooltipContent />} />
+ *     <ScatterChartSeries data={data} name="Lekki" />
+ *   </ScatterChart>
+ * </ChartCard>
+ */
+/**
+ * Categorical series palette — the theme-aware `chart-1`…`chart-3` tokens.
+ * Assign colours in this fixed order, never cycled: a fourth series folds into
+ * "Other" or becomes a second chart.
+ */
+declare const SCATTER_CHART_PALETTE: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)"];
+type ScatterChartLayout = {
+  /** Plot height in px. Width stays fluid via the ResponsiveContainer. */
+  height: number;
+  /** Outer margin around the plot. */
+  margin: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+  };
+  /** Axis tick label font size. */
+  tickFontSize: number;
+  /** Space between an axis and its tick labels. */
+  tickMargin: number;
+  /** Reserved width for the value axis. */
+  yAxisWidth: number;
+  /** Radius of a resting point, in px (r ≥ 4 keeps the ≥8px marker floor). */
+  dotRadius: number;
+  /** Radius of the active (hover) point. */
+  activeDotRadius: number;
+};
+declare const SCATTER_CHART_LAYOUT: Record<ComponentSize, ScatterChartLayout>;
+type ScatterChartProps = Omit<React.ComponentProps<typeof ScatterChart$1>, "width" | "height"> & {
+  /** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */
+  config?: ChartConfig;
+  /** Plot scale; inherited from the nearest `SizeProvider` when omitted. */
+  size?: ComponentSize;
+  /** Applied to the responsive plot box, e.g. to override its height. */
+  className?: string;
+};
+/**
+ * Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,
+ * responsive box) around the recharts `ScatterChart` with a size-scaled
+ * height and margin. `size` also flows to the child primitives through
+ * `SizeProvider`. Extra props reach the recharts chart (`data`, `syncId`,
+ * `margin`, …).
+ */
+declare function ScatterChart({ config, size, className, children, ...props }: ScatterChartProps): React.JSX.Element;
+type ScatterChartGridProps = React.ComponentProps<typeof CartesianGrid>;
+/**
+ * Value reference lines — recharts `CartesianGrid` painted with the `line`
+ * token (`line-subtle` matches the chart card surface in both themes, so it
+ * would vanish). Both axes are quantitative in a scatter plot, so horizontal
+ * and vertical lines render by default; pass `vertical={false}` to thin it out.
+ */
+declare function ScatterChartGrid(props: ScatterChartGridProps): React.JSX.Element;
+type ScatterChartXAxisProps = React.ComponentProps<typeof XAxis> & {
+  /** Explicit axis scale; otherwise inherited from the chart's `size`. */
+  size?: ComponentSize;
+};
+/**
+ * Value axis — recharts `XAxis` defaulting to `type="number"` (a scatter axis
+ * is continuous, not categorical), with no axis/tick lines, size-scaled tick
+ * margin, and caption-placeholder tick ink. Pass `name`/`unit` to label this
+ * axis in the tooltip. Passing your own `tick` replaces the default styling
+ * entirely.
+ */
+declare function ScatterChartXAxis({ size, type, tick, ...props }: ScatterChartXAxisProps): React.JSX.Element;
+type ScatterChartYAxisProps = React.ComponentProps<typeof YAxis> & {
+  /** Explicit axis scale; otherwise inherited from the chart's `size`. */
+  size?: ComponentSize;
+};
+/**
+ * Value axis — recharts `YAxis` defaulting to `type="number"`, with no
+ * axis/tick lines, size-scaled tick type, and reserved width for value
+ * labels. Pass `name`/`unit` to label this axis in the tooltip. Override
+ * `width` for long tick labels.
+ */
+declare function ScatterChartYAxis({ size, type, tick, ...props }: ScatterChartYAxisProps): React.JSX.Element;
+type ScatterChartTooltipContentProps = {
+  active?: boolean;
+  payload?: ReadonlyArray<Payload<string | number, string | number>>;
+  className?: string;
+};
+/**
+ * Hover tooltip for a scatter point. Unlike the shared `ChartTooltipContent`
+ * (built for a single hero value), a scatter point carries one value per
+ * axis, so this lists every axis entry — each labelled by its `XAxis`/
+ * `YAxis` `name` and `unit` — under one series dot, on the same elevated
+ * overlay (bg-surface-overlay, shadow-2, border-subtle) as the rest of the
+ * chart library.
+ */
+declare function ScatterChartTooltipContent({ active, payload, className }: ScatterChartTooltipContentProps): React.JSX.Element | null;
+type ScatterChartSeriesProps = React.ComponentProps<typeof Scatter> & {
+  /** Series colour for the points. Defaults to the first categorical chart token. */
+  color?: string;
+  /** Explicit mark scale; otherwise inherited from the chart's `size`. */
+  size?: ComponentSize;
+};
+/**
+ * One data series — recharts `Scatter` with the giddaa mark spec: solid
+ * resting points at a size-scaled radius (r ≥ 4, the ≥8px marker floor) and a
+ * larger active point ringed in `surface-raised` so overlapping series stay
+ * separable. `color` drives both shapes at once; `shape`/`activeShape` still
+ * win when passed directly.
+ */
+declare function ScatterChartSeries({ color, size, shape, activeShape, ...props }: ScatterChartSeriesProps): React.JSX.Element;
+//#endregion
+export { SCATTER_CHART_LAYOUT, SCATTER_CHART_PALETTE, ScatterChart, ScatterChartGrid, type ScatterChartGridProps, type ScatterChartLayout, type ScatterChartProps, ScatterChartSeries, type ScatterChartSeriesProps, ScatterChartTooltipContent, type ScatterChartTooltipContentProps, ScatterChartXAxis, type ScatterChartXAxisProps, ScatterChartYAxis, type ScatterChartYAxisProps };

package/dist/scatter-chart.js

@@ -0,0 +1,248 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { ChartContainer, cartesianAxisProps } from "./chart.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CartesianGrid, Scatter, ScatterChart as ScatterChart$1, XAxis, YAxis } from "recharts";
+//#region src/scatter-chart.tsx
+/**
+* Scatter charts are composable wrappers over the recharts cartesian
+* primitives. recharts 3 registers graphical items through context when they
+* render, so the primitives CAN be wrapped in our own components. Each
+* wrapper bakes in the giddaa defaults (tokens, size-scaled type, mark specs)
+* and forwards every recharts prop, so anything can be overridden in place or
+* replaced with the raw recharts element.
+*
+* Anatomy: `ScatterChart` is the plot root (frame + responsive box + recharts
+* chart); compose the grid, axes, series, and the shared overlays from
+* `./chart` as children. Unlike `BarChart`/`RadarChart`, each series carries
+* its own `data` (an array of `{ x, y }` pairs) rather than sharing one row
+* per category.
+*
+* @example
+* <ChartCard size="md">
+*   <ChartHeader>
+*     <ChartTitle>Price vs. size</ChartTitle>
+*     <ChartDescription>Lekki listings · ₦m by sqm</ChartDescription>
+*   </ChartHeader>
+*   <ScatterChart config={config}>
+*     <ScatterChartGrid />
+*     <ScatterChartXAxis dataKey="size" name="Size" unit="sqm" />
+*     <ScatterChartYAxis dataKey="price" name="Price" unit="₦m" />
+*     <ChartTooltip content={<ScatterChartTooltipContent />} />
+*     <ScatterChartSeries data={data} name="Lekki" />
+*   </ScatterChart>
+* </ChartCard>
+*/
+/**
+* Categorical series palette — the theme-aware `chart-1`…`chart-3` tokens.
+* Assign colours in this fixed order, never cycled: a fourth series folds into
+* "Other" or becomes a second chart.
+*/
+const SCATTER_CHART_PALETTE = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)"
+];
+const DEFAULT_SERIES_COLOR = SCATTER_CHART_PALETTE[0];
+const SCATTER_CHART_LAYOUT = {
+	sm: {
+		height: 220,
+		margin: {
+			top: 16,
+			right: 12,
+			bottom: 0,
+			left: 0
+		},
+		tickFontSize: 10,
+		tickMargin: 6,
+		yAxisWidth: 32,
+		dotRadius: 4,
+		activeDotRadius: 6
+	},
+	md: {
+		height: 260,
+		margin: {
+			top: 20,
+			right: 16,
+			bottom: 0,
+			left: 0
+		},
+		tickFontSize: 11,
+		tickMargin: 8,
+		yAxisWidth: 36,
+		dotRadius: 5,
+		activeDotRadius: 7
+	},
+	lg: {
+		height: 320,
+		margin: {
+			top: 24,
+			right: 20,
+			bottom: 0,
+			left: 0
+		},
+		tickFontSize: 12,
+		tickMargin: 10,
+		yAxisWidth: 40,
+		dotRadius: 6,
+		activeDotRadius: 8
+	}
+};
+/**
+* Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,
+* responsive box) around the recharts `ScatterChart` with a size-scaled
+* height and margin. `size` also flows to the child primitives through
+* `SizeProvider`. Extra props reach the recharts chart (`data`, `syncId`,
+* `margin`, …).
+*/
+function ScatterChart({ config = {}, size, className, children, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const layout = SCATTER_CHART_LAYOUT[resolvedSize];
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: cn("aspect-auto w-full", className),
+			style: { height: layout.height },
+			children: /* @__PURE__ */ jsx(ScatterChart$1, {
+				accessibilityLayer: true,
+				margin: layout.margin,
+				...props,
+				children
+			})
+		})
+	});
+}
+/**
+* Value reference lines — recharts `CartesianGrid` painted with the `line`
+* token (`line-subtle` matches the chart card surface in both themes, so it
+* would vanish). Both axes are quantitative in a scatter plot, so horizontal
+* and vertical lines render by default; pass `vertical={false}` to thin it out.
+*/
+function ScatterChartGrid(props) {
+	return /* @__PURE__ */ jsx(CartesianGrid, {
+		stroke: "var(--color-line)",
+		...props
+	});
+}
+/**
+* Value axis — recharts `XAxis` defaulting to `type="number"` (a scatter axis
+* is continuous, not categorical), with no axis/tick lines, size-scaled tick
+* margin, and caption-placeholder tick ink. Pass `name`/`unit` to label this
+* axis in the tooltip. Passing your own `tick` replaces the default styling
+* entirely.
+*/
+function ScatterChartXAxis({ size, type = "number", tick, ...props }) {
+	const layout = SCATTER_CHART_LAYOUT[useComponentSize(size)];
+	const axes = cartesianAxisProps(layout);
+	const defaultTick = {
+		...axes.xAxis.tick,
+		fill: "var(--color-fg-caption-placeholder)"
+	};
+	return /* @__PURE__ */ jsx(XAxis, {
+		type,
+		tickLine: axes.xAxis.tickLine,
+		axisLine: axes.xAxis.axisLine,
+		tickMargin: axes.xAxis.tickMargin,
+		tick: tick ?? defaultTick,
+		...props
+	});
+}
+/**
+* Value axis — recharts `YAxis` defaulting to `type="number"`, with no
+* axis/tick lines, size-scaled tick type, and reserved width for value
+* labels. Pass `name`/`unit` to label this axis in the tooltip. Override
+* `width` for long tick labels.
+*/
+function ScatterChartYAxis({ size, type = "number", tick, ...props }) {
+	const layout = SCATTER_CHART_LAYOUT[useComponentSize(size)];
+	const axes = cartesianAxisProps(layout);
+	const defaultTick = {
+		...axes.yAxis.tick,
+		fill: "var(--color-fg-caption-placeholder)"
+	};
+	return /* @__PURE__ */ jsx(YAxis, {
+		type,
+		tickLine: axes.yAxis.tickLine,
+		axisLine: axes.yAxis.axisLine,
+		width: axes.yAxis.width,
+		tick: tick ?? defaultTick,
+		...props
+	});
+}
+/**
+* Hover tooltip for a scatter point. Unlike the shared `ChartTooltipContent`
+* (built for a single hero value), a scatter point carries one value per
+* axis, so this lists every axis entry — each labelled by its `XAxis`/
+* `YAxis` `name` and `unit` — under one series dot, on the same elevated
+* overlay (bg-surface-overlay, shadow-2, border-subtle) as the rest of the
+* chart library.
+*/
+function ScatterChartTooltipContent({ active, payload, className }) {
+	if (!active || !payload?.length) return null;
+	const points = payload.filter((entry) => entry.type !== "none" && entry.value != null);
+	if (!points.length) return null;
+	const dotColor = points[0]?.color ?? points[0]?.fill ?? DEFAULT_SERIES_COLOR;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col gap-1 rounded-lg border border-line-subtle bg-surface-overlay p-3 shadow-2", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "size-2.5 shrink-0 rounded-full",
+			style: { backgroundColor: dotColor }
+		}), points.map((point, index) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-3 text-gdt-sm",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-fg-secondary",
+				children: point.name
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "font-extrabold text-fg-primary tabular-nums",
+				children: [point.value, point.unit != null && point.unit !== "" && /* @__PURE__ */ jsx("span", {
+					className: "ml-1 font-normal text-fg-caption-placeholder",
+					children: point.unit
+				})]
+			})]
+		}, `${point.dataKey ?? point.name ?? index}`))]
+	});
+}
+/** Renders one resting or active point as a plain filled/ringed circle. */
+function ScatterPoint({ cx, cy, r, color, ringed }) {
+	if (cx == null || cy == null) return null;
+	return /* @__PURE__ */ jsx("circle", {
+		cx,
+		cy,
+		r,
+		fill: color,
+		stroke: ringed ? "var(--color-surface-raised)" : "none",
+		strokeWidth: ringed ? 2 : 0
+	});
+}
+/**
+* One data series — recharts `Scatter` with the giddaa mark spec: solid
+* resting points at a size-scaled radius (r ≥ 4, the ≥8px marker floor) and a
+* larger active point ringed in `surface-raised` so overlapping series stay
+* separable. `color` drives both shapes at once; `shape`/`activeShape` still
+* win when passed directly.
+*/
+function ScatterChartSeries({ color = DEFAULT_SERIES_COLOR, size, shape, activeShape, ...props }) {
+	const layout = SCATTER_CHART_LAYOUT[useComponentSize(size)];
+	return /* @__PURE__ */ jsx(Scatter, {
+		shape: shape ?? ((shapeProps) => /* @__PURE__ */ jsx(ScatterPoint, {
+			cx: shapeProps.cx,
+			cy: shapeProps.cy,
+			r: layout.dotRadius,
+			color
+		})),
+		activeShape: activeShape ?? ((shapeProps) => /* @__PURE__ */ jsx(ScatterPoint, {
+			cx: shapeProps.cx,
+			cy: shapeProps.cy,
+			r: layout.activeDotRadius,
+			color,
+			ringed: true
+		})),
+		fill: color,
+		...props
+	});
+}
+//#endregion
+export { SCATTER_CHART_LAYOUT, SCATTER_CHART_PALETTE, ScatterChart, ScatterChartGrid, ScatterChartSeries, ScatterChartTooltipContent, ScatterChartXAxis, ScatterChartYAxis };

package/dist/search-input.d.ts

@@ -1,19 +1,12 @@
-import * as React from 'react';
-import { InputGroupInput } from './input-group.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import './button.js';
-import '@base-ui/react/button';
-import './input.js';
-import './input-size-context.js';
-import './textarea.js';
-
+import { InputGroupInput } from "./input-group.js";
+import * as React from "react";
+//#region src/search-input.d.ts
 type SearchInputVariant = "dashboard" | "app";
 type SearchInputProps = React.ComponentProps<typeof InputGroupInput> & {
-    wrapperClassName?: string;
-    onClear?: () => void;
-    variant?: SearchInputVariant;
+  wrapperClassName?: string;
+  onClear?: () => void;
+  variant?: SearchInputVariant;
 };
 declare const SearchInput: React.ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-
-export { SearchInput };
+//#endregion
+export { SearchInput };