@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/bar-chart.js

@@ -1,302 +1,249 @@
-// 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/chart.tsx
-import { cva } from "class-variance-authority";
+"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 } from "react/jsx-runtime";
 import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-// 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;
+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)"
+];
+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
+	}
+};
+const BarChartContext = React.createContext(null);
+function useBarChartOrientation(orientation) {
+	const context = React.useContext(BarChartContext);
+	return orientation ?? context?.orientation ?? "vertical";
 }
-
-// src/components/ui/chart.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var ChartContext = React.createContext(null);
-var chartCardVariants = cva(
-  "flex w-full min-w-0 flex-col rounded-2xl border border-line-subtle bg-surface-raised text-fg-primary shadow-1",
-  {
-    variants: {
-      size: {
-        sm: "gap-3 p-4",
-        md: "gap-4 p-5",
-        lg: "gap-5 p-6"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var chartTitleVariants = cva("min-w-0 font-bold text-fg-primary", {
-  variants: {
-    size: {
-      sm: "text-gdt-md",
-      md: "text-gdt-lg",
-      lg: "text-gdt-h5"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartDescriptionVariants = cva("min-w-0 font-normal text-fg-secondary", {
-  variants: {
-    size: {
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartTooltipVariants = cva(
-  "flex flex-col bg-surface-overlay border border-line-subtle shadow-2",
-  {
-    variants: {
-      size: {
-        xs: "gap-0.5 rounded-md p-2",
-        sm: "gap-0.5 rounded-md p-2.5",
-        md: "gap-1 rounded-lg p-3",
-        lg: "gap-1 rounded-xl p-3.5"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var chartTooltipDotVariants = cva("shrink-0 rounded-full", {
-  variants: {
-    size: {
-      xs: "size-1.5",
-      sm: "size-2",
-      md: "size-2.5",
-      lg: "size-2.5"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
-});
-var chartTooltipLabelVariants = cva("font-medium text-fg-secondary", {
-  variants: {
-    size: {
-      xs: "text-gdt-xs",
-      sm: "text-gdt-xs",
-      md: "text-gdt-sm",
-      lg: "text-gdt-sm"
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-var chartTooltipValueVariants = cva(
-  "font-extrabold text-fg-primary tabular-nums",
-  {
-    variants: {
-      size: {
-        xs: "text-gdt-sm",
-        sm: "text-gdt-md",
-        md: "text-gdt-lg",
-        lg: "text-gdt-xl"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var chartLegendItemVariants = cva(
-  "group/legend-item flex items-center rounded-md leading-none text-fg-primary transition-colors [&>svg]:shrink-0",
-  {
-    variants: {
-      size: {
-        sm: "gap-1.5 px-2 py-1 text-gdt-xs [&>svg]:size-3",
-        md: "gap-2 px-2.5 py-1.5 text-gdt-sm [&>svg]:size-3.5"
-      },
-      interactive: {
-        true: "cursor-pointer outline-none hover:bg-surface-raised focus-visible:bg-surface-raised",
-        false: ""
-      },
-      inactive: {
-        true: "text-fg-caption-placeholder line-through",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      size: "md",
-      interactive: false,
-      inactive: false
-    }
-  }
-);
-var chartLegendMarkerSizeVariants = cva("shrink-0", {
-  variants: {
-    marker: {
-      dot: "rounded-full",
-      square: "rounded-[2px]",
-      line: "rounded-full"
-    },
-    size: {
-      sm: "",
-      md: ""
-    }
-  },
-  compoundVariants: [
-    { marker: ["dot", "square"], size: "sm", className: "size-2" },
-    { marker: ["dot", "square"], size: "md", className: "size-2.5" },
-    { marker: "line", size: "sm", className: "h-[3px] w-3" },
-    { marker: "line", size: "md", className: "h-[3px] w-3.5" }
-  ],
-  defaultVariants: { marker: "dot", size: "md" }
-});
-function cartesianAxisProps(layout) {
-  const tick = { fontSize: layout.tickFontSize };
-  return {
-    xAxis: {
-      tickLine: false,
-      axisLine: false,
-      tickMargin: layout.tickMargin,
-      tick
-    },
-    yAxis: {
-      tickLine: false,
-      axisLine: false,
-      width: layout.yAxisWidth,
-      tick
-    }
-  };
+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
+		}
+	};
 }
-
-// src/components/ui/bar-chart.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-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
-  }
-};
-function useBarChartLayout(size) {
-  const layout = BAR_CHART_LAYOUT[useComponentSize(size)];
-  const axes = cartesianAxisProps(layout);
-  return {
-    container: {
-      className: "aspect-auto w-full",
-      style: { height: layout.height }
-    },
-    chart: {
-      accessibilityLayer: true,
-      margin: layout.margin,
-      barCategoryGap: layout.barCategoryGap,
-      barGap: layout.barGap
-    },
-    xAxis: axes.xAxis,
-    yAxis: axes.yAxis,
-    bar: {
-      radius: [layout.barRadius, layout.barRadius, 0, 0],
-      maxBarSize: layout.maxBarSize
-    }
-  };
+/**
+* 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
+				})
+			})
+		})
+	});
 }
-function BarValueLabel({
-  orientation = "vertical",
-  fontSize,
-  formatter,
-  className,
-  x,
-  y,
-  width,
-  height,
-  value
-}) {
-  const valueFontSize = BAR_CHART_LAYOUT[useComponentSize()].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;
-  const isHorizontal = orientation === "horizontal";
-  const labelX = isHorizontal ? numX + numWidth + gap : numX + numWidth / 2;
-  const labelY = isHorizontal ? numY + numHeight / 2 : numY - gap;
-  return /* @__PURE__ */ jsx3(
-    "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
-    }
-  );
+/**
+* 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
+	});
 }
-export {
-  BAR_CHART_LAYOUT,
-  BarValueLabel,
-  useBarChartLayout
-};
-//# sourceMappingURL=bar-chart.js.map
+/**
+* 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
+	});
+}
+/**
+* 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
+	});
+}
+/**
+* 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";
+	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
+	});
+}
+//#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 };