@giddaa-housing/ui 1.0.0 → 1.1.0

package/dist/funnel-chart.d.ts

@@ -1,10 +1,7 @@
-import * as React from 'react';
-import { ChartCard, ChartValueType } from './chart.js';
-import { ComponentSize } from './size-context.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import 'recharts';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartCard, ChartValueType } from "./chart.js";
+import * as React from "react";
+//#region src/funnel-chart.d.ts
 /**
  * A staged conversion chart for drop-off analytics. Two renderings share one
  * component — `funnel` draws connected, edge-sharing trapezoids (recharts
@@ -35,12 +32,12 @@ type FunnelChartType = "funnel" | "bars";
 /** Where the colour-key legend sits relative to the plot. */
 type FunnelLegendPlacement = "right" | "bottom";
 type FunnelStage = {
-    /** Stage name, e.g. "Applied". */
-    label: string;
-    /** Absolute count reaching this stage. */
-    value: number;
-    /** Segment colour; defaults to the palette in stage order. */
-    fill?: string;
+  /** Stage name, e.g. "Applied". */
+  label: string;
+  /** Absolute count reaching this stage. */
+  value: number;
+  /** Segment colour; defaults to the palette in stage order. */
+  fill?: string;
 };
 /**
  * Stage palette, ordered top-of-funnel → bottom: forest → brass → moss → clay →
@@ -49,36 +46,36 @@ type FunnelStage = {
  */
 declare const FUNNEL_CHART_PALETTE: readonly ["var(--color-forest-700)", "var(--color-brass-500)", "var(--color-moss-600)", "var(--color-clay-500)", "var(--color-stone-500)"];
 type FunnelChartLayout = {
-    /** Plot box height in px. */
-    height: number;
-    /** Plot box width in px — the funnel/bars column; labels + legend flow after. */
-    width: number;
-    /** Corner radius for the `bars` rendering. */
-    barRadius: number;
-    /** Bar thickness cap for the `bars` rendering. */
-    barMaxSize: number;
+  /** Plot box height in px. */
+  height: number;
+  /** Plot box width in px — the funnel/bars column; labels + legend flow after. */
+  width: number;
+  /** Corner radius for the `bars` rendering. */
+  barRadius: number;
+  /** Bar thickness cap for the `bars` rendering. */
+  barMaxSize: number;
 };
 declare const FUNNEL_CHART_LAYOUT: Record<FunnelChartSize, FunnelChartLayout>;
 type FunnelChartProps = Omit<React.ComponentProps<typeof ChartCard>, "size" | "children"> & {
-    /** Stages in funnel order — the widest (top) stage first. */
-    data: FunnelStage[];
-    /** Plot rendering. Defaults to `funnel`. */
-    type?: FunnelChartType;
-    /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
-    size?: FunnelChartSize;
-    /** Chart heading. Omit to hide the title. */
-    title?: React.ReactNode;
-    /** Supporting metadata (period, source). Omit to hide the description. */
-    description?: React.ReactNode;
-    /** Enable the hover value tooltip. Default false. */
-    tooltip?: boolean;
-    /** Legend placement — a right column or a wrapped bottom row. Default right. */
-    legend?: FunnelLegendPlacement;
-    /** Format the absolute count in the value label and tooltip. */
-    valueFormatter?: (value: number) => string;
-    /** Value formatting for the tooltip. Defaults to `number`. */
-    valueType?: ChartValueType;
+  /** Stages in funnel order — the widest (top) stage first. */
+  data: FunnelStage[];
+  /** Plot rendering. Defaults to `funnel`. */
+  type?: FunnelChartType;
+  /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
+  size?: FunnelChartSize;
+  /** Chart heading. Omit to hide the title. */
+  title?: React.ReactNode;
+  /** Supporting metadata (period, source). Omit to hide the description. */
+  description?: React.ReactNode;
+  /** Enable the hover value tooltip. Default false. */
+  tooltip?: boolean;
+  /** Legend placement — a right column or a wrapped bottom row. Default right. */
+  legend?: FunnelLegendPlacement;
+  /** Format the absolute count in the value label and tooltip. */
+  valueFormatter?: (value: number) => string;
+  /** Value formatting for the tooltip. Defaults to `number`. */
+  valueType?: ChartValueType;
 };
 declare function FunnelChart({ data, type, size, title, description, tooltip, legend, valueFormatter, valueType, className, ...props }: FunnelChartProps): React.JSX.Element;
-
-export { FUNNEL_CHART_LAYOUT, FUNNEL_CHART_PALETTE, FunnelChart, type FunnelChartLayout, type FunnelChartProps, type FunnelChartSize, type FunnelChartType, type FunnelLegendPlacement, type FunnelStage };
+//#endregion
+export { FUNNEL_CHART_LAYOUT, FUNNEL_CHART_PALETTE, FunnelChart, type FunnelChartLayout, type FunnelChartProps, type FunnelChartSize, type FunnelChartType, type FunnelLegendPlacement, type FunnelStage };

package/dist/funnel-chart.js

@@ -1,196 +1,174 @@
 "use client";
-import {
-  ChartCard,
-  ChartContainer,
-  ChartDescription,
-  ChartHeader,
-  ChartTitle,
-  ChartTooltip,
-  ChartTooltipContent
-} from "./chunk-NOFXVRWL.js";
-import {
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/funnel-chart.tsx
-import { cva } from "class-variance-authority";
-import {
-  Bar,
-  BarChart,
-  Funnel,
-  FunnelChart as RechartsFunnelChart,
-  XAxis,
-  YAxis
-} from "recharts";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartTitle, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-var FUNNEL_CHART_PALETTE = [
-  "var(--color-forest-700)",
-  "var(--color-brass-500)",
-  "var(--color-moss-600)",
-  "var(--color-clay-500)",
-  "var(--color-stone-500)"
+import { cva } from "class-variance-authority";
+import { Bar, BarChart, Funnel, FunnelChart as FunnelChart$1, XAxis, YAxis } from "recharts";
+//#region src/funnel-chart.tsx
+/**
+* Stage palette, ordered top-of-funnel → bottom: forest → brass → moss → clay →
+* stone. Giddaa has no `chart-1`…`chart-N` tokens yet, so these map to the brand
+* scales; assign by order, or override per stage with `fill`.
+*/
+const FUNNEL_CHART_PALETTE = [
+	"var(--color-forest-700)",
+	"var(--color-brass-500)",
+	"var(--color-moss-600)",
+	"var(--color-clay-500)",
+	"var(--color-stone-500)"
 ];
-var FUNNEL_CHART_LAYOUT = {
-  sm: { height: 150, width: 150, barRadius: 3, barMaxSize: 14 },
-  md: { height: 200, width: 220, barRadius: 4, barMaxSize: 18 },
-  lg: { height: 264, width: 288, barRadius: 5, barMaxSize: 22 }
+const FUNNEL_CHART_LAYOUT = {
+	sm: {
+		height: 150,
+		width: 150,
+		barRadius: 3,
+		barMaxSize: 14
+	},
+	md: {
+		height: 200,
+		width: 220,
+		barRadius: 4,
+		barMaxSize: 18
+	},
+	lg: {
+		height: 264,
+		width: 288,
+		barRadius: 5,
+		barMaxSize: 22
+	}
 };
-var funnelStageListVariants = cva("flex min-w-0 flex-col", {
-  variants: {
-    size: {
-      sm: "gap-2 text-gdt-xs",
-      md: "gap-3 text-gdt-sm",
-      lg: "gap-3.5 text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
+/** Vertical stage list — value-label column and the right-hand legend share it. */
+const funnelStageListVariants = cva("flex min-w-0 flex-col", {
+	variants: { size: {
+		sm: "gap-2 text-gdt-xs",
+		md: "gap-3 text-gdt-sm",
+		lg: "gap-3.5 text-gdt-sm"
+	} },
+	defaultVariants: { size: "md" }
 });
-var funnelLegendDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: { sm: "size-2", md: "size-2.5", lg: "size-3" }
-  },
-  defaultVariants: { size: "md" }
+const funnelLegendDotVariants = cva("shrink-0 rounded-full", {
+	variants: { size: {
+		sm: "size-2",
+		md: "size-2.5",
+		lg: "size-3"
+	} },
+	defaultVariants: { size: "md" }
 });
-function FunnelChart({
-  data,
-  type = "funnel",
-  size,
-  title,
-  description,
-  tooltip = false,
-  legend = "right",
-  valueFormatter = (value) => value.toLocaleString("en-NG"),
-  valueType = "number",
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const layout = FUNNEL_CHART_LAYOUT[resolvedSize];
-  const stages = data.map((stage, i) => ({
-    ...stage,
-    fill: stage.fill ?? FUNNEL_CHART_PALETTE[i % FUNNEL_CHART_PALETTE.length]
-  }));
-  const top = stages[0]?.value || 1;
-  const config = Object.fromEntries(
-    stages.map((stage) => [
-      stage.label,
-      { label: stage.label, color: stage.fill }
-    ])
-  );
-  const tooltipNode = tooltip ? /* @__PURE__ */ jsx(
-    ChartTooltip,
-    {
-      cursor: false,
-      content: /* @__PURE__ */ jsx(ChartTooltipContent, { nameKey: "label", valueType })
-    }
-  ) : null;
-  const chartNode = type === "bars" ? /* @__PURE__ */ jsxs(
-    BarChart,
-    {
-      accessibilityLayer: true,
-      layout: "vertical",
-      data: stages,
-      margin: { top: 0, right: 0, bottom: 0, left: 0 },
-      barCategoryGap: "0%",
-      children: [
-        tooltipNode,
-        /* @__PURE__ */ jsx(XAxis, { type: "number", domain: [0, top], hide: true }),
-        /* @__PURE__ */ jsx(YAxis, { type: "category", dataKey: "label", hide: true }),
-        /* @__PURE__ */ jsx(
-          Bar,
-          {
-            dataKey: "value",
-            radius: layout.barRadius,
-            color: "var(--color-line-subtle)",
-            isAnimationActive: false
-          }
-        )
-      ]
-    }
-  ) : /* @__PURE__ */ jsxs(RechartsFunnelChart, { margin: { top: 0, right: 0, bottom: 0, left: 0 }, children: [
-    tooltipNode,
-    /* @__PURE__ */ jsx(
-      Funnel,
-      {
-        data: stages,
-        dataKey: "value",
-        nameKey: "label",
-        isAnimationActive: false
-      }
-    )
-  ] });
-  const valueLabels = /* @__PURE__ */ jsx("ul", { className: cn(funnelStageListVariants({ size: resolvedSize })), children: stages.map((stage) => /* @__PURE__ */ jsxs(
-    "li",
-    {
-      className: "whitespace-nowrap tabular-nums text-fg-primary",
-      children: [
-        valueFormatter(stage.value),
-        " \xB7",
-        " ",
-        Math.round(stage.value / top * 100),
-        "%"
-      ]
-    },
-    stage.label
-  )) });
-  const legendNode = /* @__PURE__ */ jsx(
-    "ul",
-    {
-      className: cn(
-        legend === "right" ? funnelStageListVariants({ size: resolvedSize }) : cn(
-          "flex flex-row flex-wrap items-center gap-x-4 gap-y-2",
-          resolvedSize === "sm" ? "text-gdt-xs" : "text-gdt-sm"
-        )
-      ),
-      children: stages.map((stage) => /* @__PURE__ */ jsxs(
-        "li",
-        {
-          className: "flex items-center gap-2 text-fg-primary",
-          children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: cn(funnelLegendDotVariants({ size: resolvedSize })),
-                style: { backgroundColor: stage.fill }
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: stage.label })
-          ]
-        },
-        stage.label
-      ))
-    }
-  );
-  return /* @__PURE__ */ jsxs(ChartCard, { size: resolvedSize, className, ...props, children: [
-    (title != null || description != null) && /* @__PURE__ */ jsxs(ChartHeader, { children: [
-      title != null && /* @__PURE__ */ jsx(ChartTitle, { children: title }),
-      description != null && /* @__PURE__ */ jsx(ChartDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-4", children: [
-        /* @__PURE__ */ jsx(
-          ChartContainer,
-          {
-            config,
-            className: "aspect-auto shrink-0",
-            style: { width: layout.width, height: layout.height },
-            children: chartNode
-          }
-        ),
-        valueLabels,
-        legend === "right" && legendNode
-      ] }),
-      legend === "bottom" && legendNode
-    ] })
-  ] });
+function FunnelChart({ data, type = "funnel", size, title, description, tooltip = false, legend = "right", valueFormatter = (value) => value.toLocaleString("en-NG"), valueType = "number", className, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const layout = FUNNEL_CHART_LAYOUT[resolvedSize];
+	const stages = data.map((stage, i) => ({
+		...stage,
+		fill: stage.fill ?? FUNNEL_CHART_PALETTE[i % FUNNEL_CHART_PALETTE.length]
+	}));
+	const top = stages[0]?.value || 1;
+	const config = Object.fromEntries(stages.map((stage) => [stage.label, {
+		label: stage.label,
+		color: stage.fill
+	}]));
+	const tooltipNode = tooltip ? /* @__PURE__ */ jsx(ChartTooltip, {
+		cursor: false,
+		content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+			nameKey: "label",
+			valueType
+		})
+	}) : null;
+	const chartNode = type === "bars" ? /* @__PURE__ */ jsxs(BarChart, {
+		accessibilityLayer: true,
+		layout: "vertical",
+		data: stages,
+		margin: {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		},
+		barCategoryGap: "0%",
+		children: [
+			tooltipNode,
+			/* @__PURE__ */ jsx(XAxis, {
+				type: "number",
+				domain: [0, top],
+				hide: true
+			}),
+			/* @__PURE__ */ jsx(YAxis, {
+				type: "category",
+				dataKey: "label",
+				hide: true
+			}),
+			/* @__PURE__ */ jsx(Bar, {
+				dataKey: "value",
+				radius: layout.barRadius,
+				color: "var(--color-line-subtle)",
+				isAnimationActive: false
+			})
+		]
+	}) : /* @__PURE__ */ jsxs(FunnelChart$1, {
+		margin: {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			left: 0
+		},
+		children: [tooltipNode, /* @__PURE__ */ jsx(Funnel, {
+			data: stages,
+			dataKey: "value",
+			nameKey: "label",
+			isAnimationActive: false
+		})]
+	});
+	const valueLabels = /* @__PURE__ */ jsx("ul", {
+		className: cn(funnelStageListVariants({ size: resolvedSize })),
+		children: stages.map((stage) => /* @__PURE__ */ jsxs("li", {
+			className: "whitespace-nowrap tabular-nums text-fg-primary",
+			children: [
+				valueFormatter(stage.value),
+				" ·",
+				" ",
+				Math.round(stage.value / top * 100),
+				"%"
+			]
+		}, stage.label))
+	});
+	const legendNode = /* @__PURE__ */ jsx("ul", {
+		className: cn(legend === "right" ? funnelStageListVariants({ size: resolvedSize }) : cn("flex flex-row flex-wrap items-center gap-x-4 gap-y-2", resolvedSize === "sm" ? "text-gdt-xs" : "text-gdt-sm")),
+		children: stages.map((stage) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-2 text-fg-primary",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(funnelLegendDotVariants({ size: resolvedSize })),
+				style: { backgroundColor: stage.fill }
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: stage.label
+			})]
+		}, stage.label))
+	});
+	return /* @__PURE__ */ jsxs(ChartCard, {
+		size: resolvedSize,
+		className,
+		...props,
+		children: [(title != null || description != null) && /* @__PURE__ */ jsxs(ChartHeader, { children: [title != null && /* @__PURE__ */ jsx(ChartTitle, { children: title }), description != null && /* @__PURE__ */ jsx(ChartDescription, { children: description })] }), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-6 gap-y-4",
+				children: [
+					/* @__PURE__ */ jsx(ChartContainer, {
+						config,
+						className: "aspect-auto shrink-0",
+						style: {
+							width: layout.width,
+							height: layout.height
+						},
+						children: chartNode
+					}),
+					valueLabels,
+					legend === "right" && legendNode
+				]
+			}), legend === "bottom" && legendNode]
+		})]
+	});
 }
-export {
-  FUNNEL_CHART_LAYOUT,
-  FUNNEL_CHART_PALETTE,
-  FunnelChart
-};
-//# sourceMappingURL=funnel-chart.js.map
+//#endregion
+export { FUNNEL_CHART_LAYOUT, FUNNEL_CHART_PALETTE, FunnelChart };

package/dist/gallery-indicator.d.ts

@@ -1,18 +1,17 @@
-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/gallery-indicator.d.ts
 type GalleryIndicatorSize = "sm" | "md" | "lg";
 declare const galleryIndicatorVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type GalleryIndicatorProps = React.ComponentProps<"span"> & VariantProps<typeof galleryIndicatorVariants> & {
-    photoCount?: number;
-    currentPhoto?: number;
-    totalPhotos?: number;
-    label?: string;
+  photoCount?: number;
+  currentPhoto?: number;
+  totalPhotos?: number;
+  label?: string;
 };
 declare function GalleryIndicatorIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function GalleryIndicator({ className, size, photoCount, currentPhoto, totalPhotos, label, children, ...props }: GalleryIndicatorProps): React.JSX.Element;
-
-export { GalleryIndicator, GalleryIndicatorIcon, type GalleryIndicatorProps, type GalleryIndicatorSize, galleryIndicatorVariants };
+//#endregion
+export { GalleryIndicator, GalleryIndicatorIcon, type GalleryIndicatorProps, type GalleryIndicatorSize, galleryIndicatorVariants };

package/dist/gallery-indicator.js

@@ -1,12 +1,75 @@
-import {
-  GalleryIndicator,
-  GalleryIndicatorIcon,
-  galleryIndicatorVariants
-} from "./chunk-UJJNLGTM.js";
-import "./chunk-Y4TTYVNE.js";
-export {
-  GalleryIndicator,
-  GalleryIndicatorIcon,
-  galleryIndicatorVariants
-};
-//# sourceMappingURL=gallery-indicator.js.map
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/gallery-indicator.tsx
+const galleryIndicatorVariants = cva("inline-flex w-fit shrink-0 items-center justify-center rounded-[100px] bg-black/40 px-3 font-bold leading-none whitespace-nowrap text-white shadow-[0px_0px_4px_0px_rgba(0,0,0,0.1)] backdrop-blur-[15px] sm:px-4", {
+	variants: { size: {
+		sm: "h-[35px] gap-2 text-gdt-xs sm:gap-4 [&>svg]:size-5",
+		md: "h-10 gap-2 text-gdt-sm sm:gap-4 [&>svg]:size-5",
+		lg: "h-10 gap-2 text-gdt-lg sm:h-[50px] sm:gap-4 [&>svg]:size-6"
+	} },
+	defaultVariants: { size: "md" }
+});
+function GalleryIndicatorIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M5.75 17.5 3.63 7.62a2 2 0 0 1 1.53-2.37l9.66-2.07a2 2 0 0 1 2.37 1.53l.27 1.29",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				width: "14.5",
+				height: "12.5",
+				x: "7",
+				y: "7.5",
+				stroke: "currentColor",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				rx: "2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m8.75 17 3.31-3.31a1.25 1.25 0 0 1 1.77 0L17.25 17",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m15.5 15.25.81-.81a1.25 1.25 0 0 1 1.77 0L20.5 16.86",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "17.25",
+				cy: "11.25",
+				r: "1.25",
+				fill: "currentColor"
+			})
+		]
+	});
+}
+function GalleryIndicator({ className, size = "md", photoCount = 35, currentPhoto, totalPhotos = photoCount, label, children, ...props }) {
+	const resolvedLabel = children ?? label ?? (currentPhoto === void 0 ? `View All ${photoCount} Photos` : `${currentPhoto}/${totalPhotos}`);
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "gallery-indicator",
+		"data-size": size,
+		className: cn(galleryIndicatorVariants({ size }), className),
+		...props,
+		children: [/* @__PURE__ */ jsx(GalleryIndicatorIcon, { className: "shrink-0 text-white" }), /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: resolvedLabel
+		})]
+	});
+}
+//#endregion
+export { GalleryIndicator, GalleryIndicatorIcon, galleryIndicatorVariants };