@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/line-chart.js

@@ -1,269 +1,150 @@
-// src/components/ui/chart.tsx
-import { cva } from "class-variance-authority";
-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;
-}
-
-// 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
-    }
-  };
-}
-
-// src/components/ui/line-chart.tsx
-var LINE_CHART_LAYOUT = {
-  sm: {
-    height: 64,
-    margin: { top: 6, right: 6, bottom: 0, left: 0 },
-    strokeWidth: 2,
-    dotRadius: 2.5,
-    activeDotRadius: 4,
-    tickFontSize: 9,
-    yAxisWidth: 22,
-    tickMargin: 3
-  },
-  md: {
-    height: 88,
-    margin: { top: 8, right: 8, bottom: 0, left: 0 },
-    strokeWidth: 2,
-    dotRadius: 3,
-    activeDotRadius: 4.5,
-    tickFontSize: 10,
-    yAxisWidth: 24,
-    tickMargin: 4
-  },
-  lg: {
-    height: 108,
-    margin: { top: 10, right: 10, bottom: 0, left: 0 },
-    strokeWidth: 2,
-    dotRadius: 3.5,
-    activeDotRadius: 5,
-    tickFontSize: 11,
-    yAxisWidth: 26,
-    tickMargin: 5
-  },
-  xl: {
-    height: 132,
-    margin: { top: 12, right: 12, bottom: 0, left: 0 },
-    strokeWidth: 2,
-    dotRadius: 4,
-    activeDotRadius: 5.5,
-    tickFontSize: 11,
-    yAxisWidth: 28,
-    tickMargin: 6
-  },
-  huge: {
-    height: 164,
-    margin: { top: 14, right: 14, bottom: 0, left: 0 },
-    strokeWidth: 2,
-    dotRadius: 4.5,
-    activeDotRadius: 6,
-    tickFontSize: 12,
-    yAxisWidth: 30,
-    tickMargin: 7
-  }
+"use client";
+import { useComponentSize } from "./size-context.js";
+import { cartesianAxisProps } from "./chart.js";
+//#region src/line-chart.tsx
+const LINE_CHART_LAYOUT = {
+	sm: {
+		height: 64,
+		margin: {
+			top: 6,
+			right: 6,
+			bottom: 0,
+			left: 0
+		},
+		strokeWidth: 2,
+		dotRadius: 2.5,
+		activeDotRadius: 4,
+		tickFontSize: 9,
+		yAxisWidth: 22,
+		tickMargin: 3
+	},
+	md: {
+		height: 88,
+		margin: {
+			top: 8,
+			right: 8,
+			bottom: 0,
+			left: 0
+		},
+		strokeWidth: 2,
+		dotRadius: 3,
+		activeDotRadius: 4.5,
+		tickFontSize: 10,
+		yAxisWidth: 24,
+		tickMargin: 4
+	},
+	lg: {
+		height: 108,
+		margin: {
+			top: 10,
+			right: 10,
+			bottom: 0,
+			left: 0
+		},
+		strokeWidth: 2,
+		dotRadius: 3.5,
+		activeDotRadius: 5,
+		tickFontSize: 11,
+		yAxisWidth: 26,
+		tickMargin: 5
+	},
+	xl: {
+		height: 132,
+		margin: {
+			top: 12,
+			right: 12,
+			bottom: 0,
+			left: 0
+		},
+		strokeWidth: 2,
+		dotRadius: 4,
+		activeDotRadius: 5.5,
+		tickFontSize: 11,
+		yAxisWidth: 28,
+		tickMargin: 6
+	},
+	huge: {
+		height: 164,
+		margin: {
+			top: 14,
+			right: 14,
+			bottom: 0,
+			left: 0
+		},
+		strokeWidth: 2,
+		dotRadius: 4.5,
+		activeDotRadius: 6,
+		tickFontSize: 12,
+		yAxisWidth: 30,
+		tickMargin: 7
+	}
 };
+/** Map the 5 line-chart sizes to the 3 ComponentSize values for ChartCard. */
 function toComponentSize(size) {
-  if (size === "xl" || size === "huge") return "lg";
-  return size;
+	if (size === "xl" || size === "huge") return "lg";
+	return size;
 }
+/**
+* Build the colour-bound props for a `<Line>`/`<Area>` series at a given size:
+* the rounded stroke geometry plus the resting and active dots, all painted in
+* `color`. `area` adds the 15 %-opacity wash beneath the stroke.
+*/
 function seriesProps(layout, color) {
-  return {
-    type: "linear",
-    stroke: color,
-    strokeWidth: layout.strokeWidth,
-    strokeLinejoin: "round",
-    strokeLinecap: "round",
-    dot: { r: layout.dotRadius, fill: color, strokeWidth: 0 },
-    activeDot: {
-      r: layout.activeDotRadius,
-      fill: color,
-      stroke: "var(--color-surface-raised)",
-      strokeWidth: 2
-    }
-  };
+	return {
+		type: "linear",
+		stroke: color,
+		strokeWidth: layout.strokeWidth,
+		strokeLinejoin: "round",
+		strokeLinecap: "round",
+		dot: {
+			r: layout.dotRadius,
+			fill: color,
+			strokeWidth: 0
+		},
+		activeDot: {
+			r: layout.activeDotRadius,
+			fill: color,
+			stroke: "var(--color-surface-raised)",
+			strokeWidth: 2
+		}
+	};
 }
+/**
+* Resolve the line-chart layout for an explicit or inherited component size. The
+* returned object groups the giddaa defaults by the recharts component they
+* belong to. `line(color)`/`area(color)` return the full series props for a
+* given colour — spread each onto its element, then pass the data-specific props
+* (`config`, `data`, `dataKey`, …) directly afterwards to add or override:
+*
+*   const chart = useLineChartLayout(size);
+*   <ChartContainer config={config} {...chart.container}>
+*     <AreaChart data={data} {...chart.chart}>
+*       <XAxis dataKey="month" {...chart.xAxis} />
+*       <YAxis {...chart.yAxis} />
+*       <Area dataKey="revenue" {...chart.area("var(--color-revenue)")} />
+*/
 function useLineChartLayout(size) {
-  const inheritedSize = useComponentSize();
-  const resolved = size ?? inheritedSize;
-  const layout = LINE_CHART_LAYOUT[resolved] ?? LINE_CHART_LAYOUT.md;
-  const axes = cartesianAxisProps(layout);
-  return {
-    container: {
-      className: "aspect-auto w-full",
-      style: { height: layout.height }
-    },
-    chart: {
-      accessibilityLayer: true,
-      margin: layout.margin
-    },
-    xAxis: axes.xAxis,
-    yAxis: axes.yAxis,
-    line: (color) => seriesProps(layout, color),
-    area: (color) => ({
-      ...seriesProps(layout, color),
-      fill: color,
-      fillOpacity: 0.15
-    })
-  };
+	const inheritedSize = useComponentSize();
+	const layout = LINE_CHART_LAYOUT[size ?? inheritedSize] ?? LINE_CHART_LAYOUT.md;
+	const axes = cartesianAxisProps(layout);
+	return {
+		container: {
+			className: "aspect-auto w-full",
+			style: { height: layout.height }
+		},
+		chart: {
+			accessibilityLayer: true,
+			margin: layout.margin
+		},
+		xAxis: axes.xAxis,
+		yAxis: axes.yAxis,
+		line: (color) => seriesProps(layout, color),
+		area: (color) => ({
+			...seriesProps(layout, color),
+			fill: color,
+			fillOpacity: .15
+		})
+	};
 }
-export {
-  LINE_CHART_LAYOUT,
-  toComponentSize,
-  useLineChartLayout
-};
-//# sourceMappingURL=line-chart.js.map
+//#endregion
+export { LINE_CHART_LAYOUT, toComponentSize, useLineChartLayout };

package/dist/logo.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-
+import * as React from "react";
+//#region src/logo.d.ts
 declare function GiddaaLogo(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
 declare function GiddaaIcon(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-
-export { GiddaaIcon, GiddaaLogo };
+//#endregion
+export { GiddaaIcon, GiddaaLogo };