@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/picker-lzgmsNfG.js

@@ -0,0 +1,32 @@
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Button } from "./button.js";
+import { PopoverTrigger } from "./popover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/picker.tsx
+function PickerTrigger({ icon: Icon, displayValue, placeholder, disabled, open, className }) {
+	return /* @__PURE__ */ jsxs(PopoverTrigger, {
+		disabled,
+		className: cn("flex h-10 w-full items-center justify-between rounded-full border px-3.5 text-gdt-sm transition-[border-color,box-shadow] outline-none", disabled ? "cursor-not-allowed border-line-subtle bg-surface text-fg-caption-placeholder" : open ? "border-line-focus bg-canvas text-fg-primary inset-ring-1 inset-ring-line-focus" : "border-line bg-canvas text-fg-primary hover:border-line-strong", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn("min-w-0 truncate", !displayValue && "text-fg-caption-placeholder"),
+			children: displayValue || placeholder
+		}), /* @__PURE__ */ jsx(Icon, { className: cn("ml-2 size-4 shrink-0", disabled ? "text-fg-caption-placeholder" : "text-fg-secondary") })]
+	});
+}
+function PickerFooter({ secondaryLabel, onSecondary, onApply }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between border-t border-line-subtle px-4 py-3",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "tertiary-outline",
+			size: "sm",
+			onClick: onSecondary,
+			children: secondaryLabel
+		}), /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			onClick: onApply,
+			children: "Apply"
+		})]
+	});
+}
+//#endregion
+export { PickerTrigger as n, PickerFooter as t };

package/dist/pie-chart.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import * as React from "react";
+//#region src/pie-chart.d.ts
 /**
  * Pie / donut charts are composed from recharts plot primitives directly —
  * recharts identifies `PieChart`, `Pie`, and `Cell` by component identity, so
@@ -31,20 +31,20 @@ import { ComponentSize } from './size-context.js';
 /** Pie sizes line up with the three shared `ComponentSize` values. */
 type PieChartSize = ComponentSize;
 type PieChartLayout = {
-    /** Square plot box in px (width = height); width is NOT parent-driven here. */
-    size: number;
-    /** Donut hole radius in px. Pass `0` to the `Pie` for a filled pie. */
-    innerRadius: number;
-    /** Outer ring radius in px. */
-    outerRadius: number;
-    /** Gap between segments, in degrees. */
-    paddingAngle: number;
-    /** Corner radius of each segment. */
-    cornerRadius: number;
-    /** Center total font size. */
-    totalFontSize: number;
-    /** Center caption font size. */
-    captionFontSize: number;
+  /** Square plot box in px (width = height); width is NOT parent-driven here. */
+  size: number;
+  /** Donut hole radius in px. Pass `0` to the `Pie` for a filled pie. */
+  innerRadius: number;
+  /** Outer ring radius in px. */
+  outerRadius: number;
+  /** Gap between segments, in degrees. */
+  paddingAngle: number;
+  /** Corner radius of each segment. */
+  cornerRadius: number;
+  /** Center total font size. */
+  totalFontSize: number;
+  /** Center caption font size. */
+  captionFontSize: number;
 };
 declare const PIE_CHART_LAYOUT: Record<PieChartSize, PieChartLayout>;
 /**
@@ -60,28 +60,28 @@ declare const PIE_CHART_PALETTE: readonly ["var(--color-forest-700)", "var(--col
  * onto `Pie`, then pass the data-specific props (`data`, `dataKey`, `nameKey`)
  * directly afterwards. `type="pie"` collapses the donut hole (`innerRadius` 0).
  */
-declare function usePieChartLayout({ size, type, }?: {
-    size?: PieChartSize;
-    type?: "donut" | "pie";
+declare function usePieChartLayout({ size, type }?: {
+  size?: PieChartSize;
+  type?: "donut" | "pie";
 }): {
-    container: {
-        className: string;
-        style: {
-            width: number;
-            height: number;
-        };
-    };
-    pie: {
-        innerRadius: number;
-        outerRadius: number;
-        paddingAngle: number;
-        cornerRadius: number;
-        strokeWidth: number;
-    };
-    label: {
-        totalFontSize: number;
-        captionFontSize: number;
+  container: {
+    className: string;
+    style: {
+      width: number;
+      height: number;
     };
+  };
+  pie: {
+    innerRadius: number;
+    outerRadius: number;
+    paddingAngle: number;
+    cornerRadius: number;
+    strokeWidth: number;
+  };
+  label: {
+    totalFontSize: number;
+    captionFontSize: number;
+  };
 };
 /**
  * Center label for a donut — the hero total over a short caption. Pass it to
@@ -89,18 +89,18 @@ declare function usePieChartLayout({ size, type, }?: {
  * the `Pie`; recharts injects the `viewBox` carrying the polar center (cx/cy).
  */
 type PieCenterLabelProps = {
-    /** Hero figure — pre-formatted, e.g. "₦1.1M". */
-    total: React.ReactNode;
-    /** Short label describing what the total represents, e.g. "Total spend". */
-    caption?: React.ReactNode;
-    /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
-    size?: PieChartSize;
-    viewBox?: {
-        cx?: number;
-        cy?: number;
-    };
+  /** Hero figure — pre-formatted, e.g. "₦1.1M". */
+  total: React.ReactNode;
+  /** Short label describing what the total represents, e.g. "Total spend". */
+  caption?: React.ReactNode;
+  /** Explicit size; otherwise inherited from the nearest `SizeProvider`. */
+  size?: PieChartSize;
+  viewBox?: {
+    cx?: number;
+    cy?: number;
+  };
 };
-declare function PieCenterLabel({ total, caption, size, viewBox, }: PieCenterLabelProps): React.JSX.Element | null;
+declare function PieCenterLabel({ total, caption, size, viewBox }: PieCenterLabelProps): React.JSX.Element | null;
 /**
  * Rich legend for pie/donut charts. Unlike the shared `ChartLegendContent`
  * (marker + label only), each row pairs a colour dot with the category name, its
@@ -108,18 +108,18 @@ declare function PieCenterLabel({ total, caption, size, viewBox, }: PieCenterLab
  * mini table. Values and percentages are pre-formatted by the caller.
  */
 type PieLegendItem = {
-    /** Category name, e.g. "Housing". */
-    label: string;
-    /** Segment colour — should match the matching `Cell` fill. */
-    color: string;
-    /** Pre-formatted value, e.g. "₦420k". */
-    value: React.ReactNode;
-    /** Pre-formatted share, e.g. "38%". */
-    percentage: React.ReactNode;
+  /** Category name, e.g. "Housing". */
+  label: string;
+  /** Segment colour — should match the matching `Cell` fill. */
+  color: string;
+  /** Pre-formatted value, e.g. "₦420k". */
+  value: React.ReactNode;
+  /** Pre-formatted share, e.g. "38%". */
+  percentage: React.ReactNode;
 };
 declare function PieChartLegend({ items, size, className, ...props }: React.ComponentProps<"ul"> & {
-    items: PieLegendItem[];
-    size?: PieChartSize;
+  items: PieLegendItem[];
+  size?: PieChartSize;
 }): React.JSX.Element;
-
-export { PIE_CHART_LAYOUT, PIE_CHART_PALETTE, PieCenterLabel, type PieCenterLabelProps, type PieChartLayout, PieChartLegend, type PieChartSize, type PieLegendItem, usePieChartLayout };
+//#endregion
+export { PIE_CHART_LAYOUT, PIE_CHART_PALETTE, PieCenterLabel, type PieCenterLabelProps, type PieChartLayout, PieChartLegend, type PieChartSize, type PieLegendItem, usePieChartLayout };

package/dist/pie-chart.js

@@ -1,192 +1,149 @@
-// src/components/ui/pie-chart.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/pie-chart.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var PIE_CHART_LAYOUT = {
-  sm: {
-    size: 132,
-    innerRadius: 42,
-    outerRadius: 64,
-    paddingAngle: 2,
-    cornerRadius: 0,
-    totalFontSize: 18,
-    captionFontSize: 9
-  },
-  md: {
-    size: 176,
-    innerRadius: 56,
-    outerRadius: 84,
-    paddingAngle: 2,
-    cornerRadius: 0,
-    totalFontSize: 24,
-    captionFontSize: 11
-  },
-  lg: {
-    size: 224,
-    innerRadius: 72,
-    outerRadius: 108,
-    paddingAngle: 2,
-    cornerRadius: 0,
-    totalFontSize: 30,
-    captionFontSize: 12
-  }
+//#region src/pie-chart.tsx
+const PIE_CHART_LAYOUT = {
+	sm: {
+		size: 132,
+		innerRadius: 42,
+		outerRadius: 64,
+		paddingAngle: 2,
+		cornerRadius: 0,
+		totalFontSize: 18,
+		captionFontSize: 9
+	},
+	md: {
+		size: 176,
+		innerRadius: 56,
+		outerRadius: 84,
+		paddingAngle: 2,
+		cornerRadius: 0,
+		totalFontSize: 24,
+		captionFontSize: 11
+	},
+	lg: {
+		size: 224,
+		innerRadius: 72,
+		outerRadius: 108,
+		paddingAngle: 2,
+		cornerRadius: 0,
+		totalFontSize: 30,
+		captionFontSize: 12
+	}
 };
-var PIE_CHART_PALETTE = [
-  "var(--color-forest-700)",
-  "var(--color-brass-500)",
-  "var(--color-moss-600)",
-  "var(--color-clay-500)",
-  "var(--color-stone-500)"
+/**
+* Categorical palette for pie/donut segments, ordered by share. Giddaa has no
+* `chart-1`…`chart-N` tokens yet, so these map to the brand scales: forest →
+* brass → moss → clay → stone. Assign by index, or override per `Cell`.
+*/
+const PIE_CHART_PALETTE = [
+	"var(--color-forest-700)",
+	"var(--color-brass-500)",
+	"var(--color-moss-600)",
+	"var(--color-clay-500)",
+	"var(--color-stone-500)"
 ];
-function usePieChartLayout({
-  size,
-  type = "donut"
-} = {}) {
-  const layout = PIE_CHART_LAYOUT[useComponentSize(size)];
-  return {
-    container: {
-      className: "aspect-square shrink-0",
-      style: { width: layout.size, height: layout.size }
-    },
-    pie: {
-      innerRadius: type === "pie" ? 0 : layout.innerRadius,
-      outerRadius: layout.outerRadius,
-      paddingAngle: type === "pie" ? 0 : layout.paddingAngle,
-      cornerRadius: layout.cornerRadius,
-      strokeWidth: 0
-    },
-    label: {
-      totalFontSize: layout.totalFontSize,
-      captionFontSize: layout.captionFontSize
-    }
-  };
+/**
+* Resolve the pie-chart layout for an explicit or inherited component size and
+* chart `type`. The returned object groups the giddaa defaults by the recharts
+* component they belong to — spread `container` onto `ChartContainer` and `pie`
+* onto `Pie`, then pass the data-specific props (`data`, `dataKey`, `nameKey`)
+* directly afterwards. `type="pie"` collapses the donut hole (`innerRadius` 0).
+*/
+function usePieChartLayout({ size, type = "donut" } = {}) {
+	const layout = PIE_CHART_LAYOUT[useComponentSize(size)];
+	return {
+		container: {
+			className: "aspect-square shrink-0",
+			style: {
+				width: layout.size,
+				height: layout.size
+			}
+		},
+		pie: {
+			innerRadius: type === "pie" ? 0 : layout.innerRadius,
+			outerRadius: layout.outerRadius,
+			paddingAngle: type === "pie" ? 0 : layout.paddingAngle,
+			cornerRadius: layout.cornerRadius,
+			strokeWidth: 0
+		},
+		label: {
+			totalFontSize: layout.totalFontSize,
+			captionFontSize: layout.captionFontSize
+		}
+	};
 }
-function PieCenterLabel({
-  total,
-  caption,
-  size,
-  viewBox
-}) {
-  const { label } = usePieChartLayout({ size });
-  if (!viewBox || viewBox.cx == null || viewBox.cy == null) {
-    return null;
-  }
-  const { cx, cy } = viewBox;
-  const captionY = cy + label.totalFontSize * 0.72;
-  return /* @__PURE__ */ jsxs("text", { x: cx, y: cy, textAnchor: "middle", dominantBaseline: "central", children: [
-    /* @__PURE__ */ jsx2(
-      "tspan",
-      {
-        x: cx,
-        y: caption == null ? cy : cy - label.captionFontSize * 0.5,
-        className: "fill-fg-primary font-extrabold tabular-nums",
-        style: { fontSize: label.totalFontSize },
-        children: total
-      }
-    ),
-    caption != null && /* @__PURE__ */ jsx2(
-      "tspan",
-      {
-        x: cx,
-        y: captionY,
-        className: "fill-fg-secondary font-medium",
-        style: { fontSize: label.captionFontSize },
-        children: caption
-      }
-    )
-  ] });
+function PieCenterLabel({ total, caption, size, viewBox }) {
+	const { label } = usePieChartLayout({ size });
+	if (!viewBox || viewBox.cx == null || viewBox.cy == null) return null;
+	const { cx, cy } = viewBox;
+	const captionY = cy + label.totalFontSize * .72;
+	return /* @__PURE__ */ jsxs("text", {
+		x: cx,
+		y: cy,
+		textAnchor: "middle",
+		dominantBaseline: "central",
+		children: [/* @__PURE__ */ jsx("tspan", {
+			x: cx,
+			y: caption == null ? cy : cy - label.captionFontSize * .5,
+			className: "fill-fg-primary font-extrabold tabular-nums",
+			style: { fontSize: label.totalFontSize },
+			children: total
+		}), caption != null && /* @__PURE__ */ jsx("tspan", {
+			x: cx,
+			y: captionY,
+			className: "fill-fg-secondary font-medium",
+			style: { fontSize: label.captionFontSize },
+			children: caption
+		})]
+	});
 }
-var pieLegendVariants = cva("flex min-w-0 flex-col", {
-  variants: {
-    size: {
-      sm: "gap-1.5 text-gdt-xs",
-      md: "gap-2 text-gdt-sm",
-      lg: "gap-2.5 text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
+const pieLegendVariants = cva("flex min-w-0 flex-col", {
+	variants: { size: {
+		sm: "gap-1.5 text-gdt-xs",
+		md: "gap-2 text-gdt-sm",
+		lg: "gap-2.5 text-gdt-sm"
+	} },
+	defaultVariants: { size: "md" }
 });
-var pieLegendDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: { sm: "size-2", md: "size-2.5", lg: "size-3" }
-  },
-  defaultVariants: { size: "md" }
+const pieLegendDotVariants = cva("shrink-0 rounded-full", {
+	variants: { size: {
+		sm: "size-2",
+		md: "size-2.5",
+		lg: "size-3"
+	} },
+	defaultVariants: { size: "md" }
 });
-function PieChartLegend({
-  items,
-  size,
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  return /* @__PURE__ */ jsx2(
-    "ul",
-    {
-      className: cn(pieLegendVariants({ size: resolvedSize }), className),
-      ...props,
-      children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx2(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: cn(pieLegendDotVariants({ size: resolvedSize })),
-            style: { backgroundColor: item.color }
-          }
-        ),
-        /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate text-fg-primary", children: item.label }),
-        /* @__PURE__ */ jsx2("span", { className: "shrink-0 tabular-nums text-fg-secondary", children: item.value }),
-        /* @__PURE__ */ jsx2("span", { className: "w-9 shrink-0 text-right font-bold tabular-nums text-fg-primary", children: item.percentage })
-      ] }, item.label))
-    }
-  );
+function PieChartLegend({ items, size, className, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn(pieLegendVariants({ size: resolvedSize }), className),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+			className: "flex items-center gap-2.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: cn(pieLegendDotVariants({ size: resolvedSize })),
+					style: { backgroundColor: item.color }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-fg-primary",
+					children: item.label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "shrink-0 tabular-nums text-fg-secondary",
+					children: item.value
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "w-9 shrink-0 text-right font-bold tabular-nums text-fg-primary",
+					children: item.percentage
+				})
+			]
+		}, item.label))
+	});
 }
-export {
-  PIE_CHART_LAYOUT,
-  PIE_CHART_PALETTE,
-  PieCenterLabel,
-  PieChartLegend,
-  usePieChartLayout
-};
-//# sourceMappingURL=pie-chart.js.map
+//#endregion
+export { PIE_CHART_LAYOUT, PIE_CHART_PALETTE, PieCenterLabel, PieChartLegend, usePieChartLayout };

package/dist/popover.d.ts

@@ -1,20 +1,20 @@
-import { Popover as Popover$1 } from '@base-ui/react/popover';
-import * as React from 'react';
-import { ComponentSize } from './size-context.js';
-
+import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import * as React from "react";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+//#region src/popover.d.ts
 declare function Popover({ ...props }: Popover$1.Root.Props): React.JSX.Element;
 declare function PopoverTrigger({ ...props }: Popover$1.Trigger.Props): React.JSX.Element;
 type PopoverContentProps = Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
-    showArrow?: boolean;
-    size?: ComponentSize;
+  showArrow?: boolean;
+  size?: ComponentSize;
 };
 declare function PopoverContent({ className, align, alignOffset, side, sideOffset, showArrow, size, children, ...props }: PopoverContentProps): React.JSX.Element;
 declare function PopoverHeader({ className, border, ...props }: React.ComponentProps<"div"> & {
-    border?: boolean;
+  border?: boolean;
 }): React.JSX.Element;
 declare function PopoverBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PopoverFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PopoverTitle({ className, ...props }: Popover$1.Title.Props): React.JSX.Element;
 declare function PopoverDescription({ className, ...props }: Popover$1.Description.Props): React.JSX.Element;
-
-export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };
+//#endregion
+export { Popover, PopoverBody, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverTitle, PopoverTrigger };