@giddaa-housing/ui 1.0.0 → 1.2.0

package/dist/bar-chart.js

@@ -1,224 +1,249 @@
 "use client";
-import {
-  ChartContainer,
-  cartesianAxisProps
-} from "./chunk-NOFXVRWL.js";
-import {
-  SizeProvider,
-  useComponentSize
-} from "./chunk-HL3ZSYES.js";
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/bar-chart.tsx
-import * as React from "react";
-import {
-  Bar,
-  BarChart as BarChartPrimitive,
-  CartesianGrid,
-  XAxis,
-  YAxis
-} from "recharts";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { SizeProvider, useComponentSize } from "./size-context.js";
+import { ChartContainer, cartesianAxisProps } from "./chart.js";
 import { jsx } from "react/jsx-runtime";
-var BAR_CHART_PALETTE = [
-  "var(--color-chart-1)",
-  "var(--color-chart-2)",
-  "var(--color-chart-3)"
+import * as React from "react";
+import { Bar, BarChart as BarChart$1, CartesianGrid, XAxis, YAxis } from "recharts";
+//#region src/bar-chart.tsx
+/**
+* Bar 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: `BarChart` is the plot root (frame + responsive box + recharts
+* chart); compose the grid, axes, series, and the shared overlays from
+* `./chart` as children:
+*
+* @example
+* <ChartCard size="md">
+*   <ChartHeader>
+*     <ChartTitle>Revenue Overview</ChartTitle>
+*     <ChartDescription>Monthly revenue - Jan-Jul</ChartDescription>
+*   </ChartHeader>
+*   <BarChart config={config} data={data}>
+*     <BarChartGrid />
+*     <BarChartXAxis dataKey="month" />
+*     <BarChartYAxis domain={[0, 120]} />
+*     <ChartTooltip content={<ChartTooltipContent />} />
+*     <BarChartSeries dataKey="revenue" name="Revenue">
+*       <LabelList dataKey="revenue" content={<BarValueLabel />} />
+*     </BarChartSeries>
+*   </BarChart>
+* </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 BAR_CHART_PALETTE = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)"
 ];
-var DEFAULT_SERIES_COLOR = BAR_CHART_PALETTE[0];
-var BAR_CHART_LAYOUT = {
-  sm: {
-    height: 180,
-    margin: { top: 20, right: 8, bottom: 0, left: 0 },
-    maxBarSize: 22,
-    barCategoryGap: "8%",
-    barGap: 4,
-    barRadius: 4,
-    tickFontSize: 10,
-    valueFontSize: 10,
-    yAxisWidth: 28,
-    tickMargin: 6
-  },
-  md: {
-    height: 220,
-    margin: { top: 24, right: 12, bottom: 0, left: 0 },
-    maxBarSize: 28,
-    barCategoryGap: "8%",
-    barGap: 6,
-    barRadius: 6,
-    tickFontSize: 11,
-    valueFontSize: 11,
-    yAxisWidth: 32,
-    tickMargin: 8
-  },
-  lg: {
-    height: 280,
-    margin: { top: 28, right: 16, bottom: 0, left: 0 },
-    maxBarSize: 36,
-    barCategoryGap: "8%",
-    barGap: 8,
-    barRadius: 8,
-    tickFontSize: 12,
-    valueFontSize: 12,
-    yAxisWidth: 36,
-    tickMargin: 10
-  }
+const DEFAULT_SERIES_COLOR = BAR_CHART_PALETTE[0];
+const BAR_CHART_LAYOUT = {
+	sm: {
+		height: 180,
+		margin: {
+			top: 20,
+			right: 8,
+			bottom: 0,
+			left: 0
+		},
+		maxBarSize: 22,
+		barCategoryGap: "8%",
+		barGap: 4,
+		barRadius: 4,
+		tickFontSize: 10,
+		valueFontSize: 10,
+		yAxisWidth: 28,
+		tickMargin: 6
+	},
+	md: {
+		height: 220,
+		margin: {
+			top: 24,
+			right: 12,
+			bottom: 0,
+			left: 0
+		},
+		maxBarSize: 28,
+		barCategoryGap: "8%",
+		barGap: 6,
+		barRadius: 6,
+		tickFontSize: 11,
+		valueFontSize: 11,
+		yAxisWidth: 32,
+		tickMargin: 8
+	},
+	lg: {
+		height: 280,
+		margin: {
+			top: 28,
+			right: 16,
+			bottom: 0,
+			left: 0
+		},
+		maxBarSize: 36,
+		barCategoryGap: "8%",
+		barGap: 8,
+		barRadius: 8,
+		tickFontSize: 12,
+		valueFontSize: 12,
+		yAxisWidth: 36,
+		tickMargin: 10
+	}
 };
-var BarChartContext = React.createContext(null);
+const BarChartContext = React.createContext(null);
 function useBarChartOrientation(orientation) {
-  const context = React.useContext(BarChartContext);
-  return orientation ?? context?.orientation ?? "vertical";
+	const context = React.useContext(BarChartContext);
+	return orientation ?? context?.orientation ?? "vertical";
 }
 function barChartAxisProps(layout) {
-  const axes = cartesianAxisProps(layout);
-  const tick = {
-    ...axes.xAxis.tick,
-    fill: "var(--color-fg-caption-placeholder)"
-  };
-  return {
-    xAxis: {
-      ...axes.xAxis,
-      tick
-    },
-    yAxis: {
-      ...axes.yAxis,
-      tick
-    }
-  };
+	const axes = cartesianAxisProps(layout);
+	const tick = {
+		...axes.xAxis.tick,
+		fill: "var(--color-fg-caption-placeholder)"
+	};
+	return {
+		xAxis: {
+			...axes.xAxis,
+			tick
+		},
+		yAxis: {
+			...axes.yAxis,
+			tick
+		}
+	};
 }
-function BarChart({
-  config = {},
-  size,
-  className,
-  children,
-  orientation = "vertical",
-  layout,
-  ...props
-}) {
-  const resolvedSize = useComponentSize(size);
-  const chartLayout = BAR_CHART_LAYOUT[resolvedSize];
-  const rechartsLayout = layout ?? (orientation === "horizontal" ? "vertical" : "horizontal");
-  return /* @__PURE__ */ jsx(SizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx(BarChartContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsx(
-    ChartContainer,
-    {
-      config,
-      className: cn("aspect-auto w-full", className),
-      style: { height: chartLayout.height },
-      children: /* @__PURE__ */ jsx(
-        BarChartPrimitive,
-        {
-          accessibilityLayer: true,
-          margin: chartLayout.margin,
-          barCategoryGap: chartLayout.barCategoryGap,
-          barGap: chartLayout.barGap,
-          layout: rechartsLayout,
-          ...props,
-          children
-        }
-      )
-    }
-  ) }) });
+/**
+* Plot root - wraps the shared `ChartContainer` (tooltip/legend theming,
+* responsive box) around the recharts `BarChart` with size-scaled height,
+* margin, and bar gaps. `size` also flows to the child primitives through
+* `SizeProvider`. Extra props reach the recharts chart (`data`, `syncId`,
+* `layout`, ...); passing `layout` directly overrides `orientation`.
+*/
+function BarChart({ config = {}, size, className, children, orientation = "vertical", layout, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	const chartLayout = BAR_CHART_LAYOUT[resolvedSize];
+	const rechartsLayout = layout ?? (orientation === "horizontal" ? "vertical" : "horizontal");
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsx(BarChartContext.Provider, {
+			value: { orientation },
+			children: /* @__PURE__ */ jsx(ChartContainer, {
+				config,
+				className: cn("aspect-auto w-full", className),
+				style: { height: chartLayout.height },
+				children: /* @__PURE__ */ jsx(BarChart$1, {
+					accessibilityLayer: true,
+					margin: chartLayout.margin,
+					barCategoryGap: chartLayout.barCategoryGap,
+					barGap: chartLayout.barGap,
+					layout: rechartsLayout,
+					...props,
+					children
+				})
+			})
+		})
+	});
 }
+/**
+* Value reference lines - recharts `CartesianGrid` with vertical lines hidden
+* and the visible grid painted with the `line` token (`line-subtle` matches the
+* chart card surface in both themes, so it would vanish). For horizontal bar
+* charts, pass `horizontal={false} vertical`.
+*/
 function BarChartGrid(props) {
-  return /* @__PURE__ */ jsx(CartesianGrid, { vertical: false, stroke: "var(--color-line)", ...props });
+	return /* @__PURE__ */ jsx(CartesianGrid, {
+		vertical: false,
+		stroke: "var(--color-line)",
+		...props
+	});
 }
+/**
+* Category/value axis - recharts `XAxis` with no axis/tick lines,
+* size-scaled tick margin, and caption-placeholder tick ink. Passing your own
+* `tick` replaces the default styling entirely.
+*/
 function BarChartXAxis({ size, tick, ...props }) {
-  const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
-  const axes = barChartAxisProps(layout);
-  return /* @__PURE__ */ jsx(
-    XAxis,
-    {
-      tickLine: axes.xAxis.tickLine,
-      axisLine: axes.xAxis.axisLine,
-      tickMargin: axes.xAxis.tickMargin,
-      tick: tick ?? axes.xAxis.tick,
-      ...props
-    }
-  );
+	const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
+	const axes = barChartAxisProps(layout);
+	return /* @__PURE__ */ jsx(XAxis, {
+		tickLine: axes.xAxis.tickLine,
+		axisLine: axes.xAxis.axisLine,
+		tickMargin: axes.xAxis.tickMargin,
+		tick: tick ?? axes.xAxis.tick,
+		...props
+	});
 }
+/**
+* Value/category axis - recharts `YAxis` with no axis/tick lines,
+* size-scaled tick type, and reserved width for value labels. Override `width`
+* for long horizontal-category labels.
+*/
 function BarChartYAxis({ size, tick, ...props }) {
-  const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
-  const axes = barChartAxisProps(layout);
-  return /* @__PURE__ */ jsx(
-    YAxis,
-    {
-      tickLine: axes.yAxis.tickLine,
-      axisLine: axes.yAxis.axisLine,
-      width: axes.yAxis.width,
-      tick: tick ?? axes.yAxis.tick,
-      ...props
-    }
-  );
+	const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
+	const axes = barChartAxisProps(layout);
+	return /* @__PURE__ */ jsx(YAxis, {
+		tickLine: axes.yAxis.tickLine,
+		axisLine: axes.yAxis.axisLine,
+		width: axes.yAxis.width,
+		tick: tick ?? axes.yAxis.tick,
+		...props
+	});
 }
-function BarChartSeries({
-  color = DEFAULT_SERIES_COLOR,
-  size,
-  orientation,
-  ...props
-}) {
-  const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
-  const resolvedOrientation = useBarChartOrientation(orientation);
-  const radius = resolvedOrientation === "horizontal" ? [0, layout.barRadius, layout.barRadius, 0] : [layout.barRadius, layout.barRadius, 0, 0];
-  return /* @__PURE__ */ jsx(
-    Bar,
-    {
-      fill: color,
-      radius,
-      maxBarSize: layout.maxBarSize,
-      ...props
-    }
-  );
+/**
+* One data series - recharts `Bar` with the giddaa mark spec: a theme-aware
+* series colour, size-scaled max thickness, and a small radius only on the
+* leading edge (top for vertical bars, right for horizontal bars). `color`
+* drives `fill`; `fill`, `radius`, and `maxBarSize` still win when passed
+* directly.
+*/
+function BarChartSeries({ color = DEFAULT_SERIES_COLOR, size, orientation, ...props }) {
+	const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
+	return /* @__PURE__ */ jsx(Bar, {
+		fill: color,
+		radius: useBarChartOrientation(orientation) === "horizontal" ? [
+			0,
+			layout.barRadius,
+			layout.barRadius,
+			0
+		] : [
+			layout.barRadius,
+			layout.barRadius,
+			0,
+			0
+		],
+		maxBarSize: layout.maxBarSize,
+		...props
+	});
 }
-function BarValueLabel({
-  orientation,
-  fontSize,
-  formatter,
-  size,
-  className,
-  x,
-  y,
-  width,
-  height,
-  value
-}) {
-  const resolvedOrientation = useBarChartOrientation(orientation);
-  const valueFontSize = BAR_CHART_LAYOUT[useComponentSize(size)].valueFontSize;
-  if (value == null || x == null || y == null || width == null) {
-    return null;
-  }
-  const numX = Number(x);
-  const numY = Number(y);
-  const numWidth = Number(width);
-  const numHeight = Number(height ?? 0);
-  const gap = 6;
-  if (!Number.isFinite(numX) || !Number.isFinite(numY) || !Number.isFinite(numWidth) || !Number.isFinite(numHeight)) {
-    return null;
-  }
-  const isHorizontal = resolvedOrientation === "horizontal";
-  const labelX = isHorizontal ? numX + numWidth + gap : numX + numWidth / 2;
-  const labelY = isHorizontal ? numY + numHeight / 2 : numY - gap;
-  return /* @__PURE__ */ jsx(
-    "text",
-    {
-      x: labelX,
-      y: labelY,
-      textAnchor: isHorizontal ? "start" : "middle",
-      dominantBaseline: isHorizontal ? "central" : "auto",
-      className: cn("fill-fg-primary font-semibold tabular-nums", className),
-      style: { fontSize: fontSize ?? valueFontSize },
-      children: formatter ? formatter(value) : value
-    }
-  );
+function BarValueLabel({ orientation, fontSize, formatter, size, className, x, y, width, height, value }) {
+	const resolvedOrientation = useBarChartOrientation(orientation);
+	const valueFontSize = BAR_CHART_LAYOUT[useComponentSize(size)].valueFontSize;
+	if (value == null || x == null || y == null || width == null) return null;
+	const numX = Number(x);
+	const numY = Number(y);
+	const numWidth = Number(width);
+	const numHeight = Number(height ?? 0);
+	const gap = 6;
+	if (!Number.isFinite(numX) || !Number.isFinite(numY) || !Number.isFinite(numWidth) || !Number.isFinite(numHeight)) return null;
+	const isHorizontal = resolvedOrientation === "horizontal";
+	return /* @__PURE__ */ jsx("text", {
+		x: isHorizontal ? numX + numWidth + gap : numX + numWidth / 2,
+		y: isHorizontal ? numY + numHeight / 2 : numY - gap,
+		textAnchor: isHorizontal ? "start" : "middle",
+		dominantBaseline: isHorizontal ? "central" : "auto",
+		className: cn("fill-fg-primary font-semibold tabular-nums", className),
+		style: { fontSize: fontSize ?? valueFontSize },
+		children: formatter ? formatter(value) : value
+	});
 }
-export {
-  BAR_CHART_LAYOUT,
-  BAR_CHART_PALETTE,
-  BarChart,
-  BarChartGrid,
-  BarChartSeries,
-  BarChartXAxis,
-  BarChartYAxis,
-  BarValueLabel
-};
-//# sourceMappingURL=bar-chart.js.map
+//#endregion
+export { BAR_CHART_LAYOUT, BAR_CHART_PALETTE, BarChart, BarChartGrid, BarChartSeries, BarChartXAxis, BarChartYAxis, BarValueLabel };

package/dist/breadcrumb.d.ts

@@ -1,6 +1,6 @@
-import { useRender } from '@base-ui/react/use-render';
-import * as React from 'react';
-
+import { useRender } from "@base-ui/react/use-render";
+import * as React from "react";
+//#region src/breadcrumb.d.ts
 declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
 declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
@@ -8,5 +8,5 @@ declare function BreadcrumbLink({ className, render, ...props }: useRender.Compo
 declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
 declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
 declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/breadcrumb.js

@@ -1,131 +1,69 @@
-import {
-  cn
-} from "./chunk-Y4TTYVNE.js";
-
-// src/breadcrumb.tsx
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
+import { t as cn } from "./cn-BI_4DMBf.js";
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/breadcrumb.tsx
 function Breadcrumb({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      "aria-label": "breadcrumb",
-      "data-slot": "breadcrumb",
-      className: cn("min-w-0", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "breadcrumb",
+		"data-slot": "breadcrumb",
+		className: cn("min-w-0", className),
+		...props
+	});
 }
 function BreadcrumbList({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "ol",
-    {
-      "data-slot": "breadcrumb-list",
-      className: cn(
-        "flex flex-wrap items-center gap-2 wrap-break-word text-gdt-sm text-fg-secondary",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: cn("flex flex-wrap items-center gap-2 wrap-break-word text-gdt-sm text-fg-secondary", className),
+		...props
+	});
 }
 function BreadcrumbItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      "data-slot": "breadcrumb-item",
-      className: cn("inline-flex min-w-0 items-center gap-2", className),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: cn("inline-flex min-w-0 items-center gap-2", className),
+		...props
+	});
 }
-function BreadcrumbLink({
-  className,
-  render,
-  ...props
-}) {
-  return useRender({
-    defaultTagName: "a",
-    props: mergeProps(
-      {
-        className: cn(
-          "inline-flex min-w-0 items-center rounded-sm text-gdt-sm font-normal text-fg-secondary transition-colors hover:text-fg-primary focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
-          className
-        )
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: "breadcrumb-link"
-    }
-  });
+function BreadcrumbLink({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn("inline-flex min-w-0 items-center rounded-sm text-gdt-sm font-normal text-fg-secondary transition-colors hover:text-fg-primary focus-visible:outline-none focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", className) }, props),
+		render,
+		state: { slot: "breadcrumb-link" }
+	});
 }
 function BreadcrumbPage({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      "data-slot": "breadcrumb-page",
-      "aria-current": "page",
-      className: cn(
-        "inline-flex min-w-0 items-center text-gdt-sm font-semibold text-fg-brand",
-        className
-      ),
-      ...props
-    }
-  );
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		"aria-current": "page",
+		className: cn("inline-flex min-w-0 items-center text-gdt-sm font-semibold text-fg-brand", className),
+		...props
+	});
 }
-function BreadcrumbSeparator({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "li",
-    {
-      "data-slot": "breadcrumb-separator",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn(
-        "inline-flex shrink-0 items-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0",
-        className
-      ),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" })
-    }
-  );
+function BreadcrumbSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("inline-flex shrink-0 items-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" })
+	});
 }
-function BreadcrumbEllipsis({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      "data-slot": "breadcrumb-ellipsis",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn(
-        "inline-flex items-center justify-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(MoreHorizontalIcon, {}),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
-      ]
-    }
-  );
+function BreadcrumbEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("inline-flex items-center justify-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More"
+		})]
+	});
 }
-export {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator
-};
-//# sourceMappingURL=breadcrumb.js.map
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };