@giddaa-housing/ui 1.1.0 → 2.0.0

package/dist/file-upload.js

@@ -0,0 +1,154 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { CircularProgress, Progress, ProgressValue } from "./progress.js";
+import { File, X } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/file-upload.tsx
+const FileUploadContext = createContext(null);
+function normalizeProgress(value) {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(100, Math.max(0, Math.round(value)));
+}
+function useFileUpload() {
+	const context = useContext(FileUploadContext);
+	if (!context) throw new Error("FileUpload compound components must be rendered inside <FileUpload>.");
+	return context;
+}
+function FileUpload({ className, state = "uploading", value, "aria-busy": ariaBusy, ...props }) {
+	const progress = normalizeProgress(value);
+	return /* @__PURE__ */ jsx(FileUploadContext.Provider, {
+		value: {
+			state,
+			value: progress
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "file-upload",
+			"data-state": state,
+			"data-value": progress,
+			"aria-busy": ariaBusy ?? (state === "uploading" || void 0),
+			className: cn("group/file-upload relative flex min-w-0 items-start gap-3 rounded-xl border border-line bg-surface p-3", "data-[state=error]:border-line-danger data-[state=error]:bg-surface-danger-subtle", className),
+			...props
+		})
+	});
+}
+function FileUploadPreview({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-preview",
+		className: cn("relative flex size-20 shrink-0 items-center justify-center rounded-lg bg-surface-raised", className),
+		...props
+	});
+}
+function FileUploadImage({ className, alt = "", ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		"data-slot": "file-upload-image",
+		className: cn("size-full rounded-[inherit] object-cover", className),
+		alt,
+		...props
+	});
+}
+function FileUploadOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-overlay",
+		className: cn("absolute inset-0 flex items-center justify-center rounded-[inherit] bg-black/45", className),
+		...props
+	});
+}
+function FileUploadPreviewAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-preview-action",
+		className: cn("absolute -top-2 -right-2 z-10", className),
+		...props
+	});
+}
+function FileUploadIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-icon",
+		className: cn("flex size-11 shrink-0 items-center justify-center rounded-lg bg-surface-brand-subtle text-fg-brand", "group-data-[state=error]/file-upload:bg-surface-danger-subtle group-data-[state=error]/file-upload:text-status-danger", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(File, {
+			"aria-hidden": "true",
+			className: "size-5"
+		})
+	});
+}
+function FileUploadContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-content",
+		className: cn("min-w-0 flex-1", className),
+		...props
+	});
+}
+function FileUploadHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-header",
+		className: cn("flex min-w-0 items-center gap-2", className),
+		...props
+	});
+}
+function FileUploadName({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "file-upload-name",
+		className: cn("min-w-0 flex-1 truncate text-gdt-sm font-semibold leading-snug text-fg-primary", className),
+		...props
+	});
+}
+function FileUploadMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "file-upload-meta",
+		className: cn("mt-0.5 text-gdt-xs leading-snug text-fg-secondary", className),
+		...props
+	});
+}
+function FileUploadStatus({ className, children, pendingLabel = "Waiting to upload", uploadingLabel, completeLabel = "Upload complete", errorLabel = "Upload failed", ...props }) {
+	const context = useFileUpload();
+	const defaultLabels = {
+		pending: pendingLabel,
+		uploading: uploadingLabel ?? `${context.value}% uploaded`,
+		complete: completeLabel,
+		error: errorLabel
+	};
+	const content = typeof children === "function" ? children(context) : children ?? defaultLabels[context.state];
+	return /* @__PURE__ */ jsx("output", {
+		"data-slot": "file-upload-status",
+		"aria-live": "polite",
+		className: cn("text-gdt-xs leading-snug text-fg-secondary", "group-data-[state=complete]/file-upload:text-status-success group-data-[state=error]/file-upload:text-status-danger", className),
+		...props,
+		children: content
+	});
+}
+function FileUploadProgress({ className, children, showValue = true, "aria-label": ariaLabel = "Upload progress", ...props }) {
+	const { state, value } = useFileUpload();
+	return /* @__PURE__ */ jsx(Progress, {
+		value,
+		"aria-label": ariaLabel,
+		className: cn("mt-2", state === "complete" && "[&_[data-slot=progress-indicator]]:bg-status-success", state === "error" && "[&_[data-slot=progress-indicator]]:bg-status-danger", className),
+		...props,
+		children: children ?? (showValue ? /* @__PURE__ */ jsx(ProgressValue, {}) : null)
+	});
+}
+function FileUploadCircularProgress({ className, labelOverlay = true, "aria-label": ariaLabel = "Upload progress", ...props }) {
+	const { state, value } = useFileUpload();
+	return /* @__PURE__ */ jsx(CircularProgress, {
+		value,
+		labelOverlay,
+		"aria-label": ariaLabel,
+		className: cn("text-white [&_circle:first-child]:text-white/35 [&_circle:last-child]:text-white", state === "complete" && "[&_circle:last-child]:text-status-success", state === "error" && "[&_circle:last-child]:text-status-danger", className),
+		...props
+	});
+}
+function FileUploadCancel({ className, type = "button", children, variant = "ghost", "aria-label": ariaLabel = "Cancel upload", ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		"data-slot": "file-upload-cancel",
+		type,
+		"aria-label": ariaLabel,
+		className: cn("inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent bg-transparent p-0 text-fg-secondary", "transition-[background-color,border-color,color,box-shadow] hover:bg-surface-raised hover:text-fg-primary focus-visible:border-line-focus focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50", variant === "surface" && "border-line bg-surface-overlay shadow-sm hover:bg-surface-raised", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(X, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
+	});
+}
+//#endregion
+export { FileUpload, FileUploadCancel, FileUploadCircularProgress, FileUploadContent, FileUploadHeader, FileUploadIcon, FileUploadImage, FileUploadMeta, FileUploadName, FileUploadOverlay, FileUploadPreview, FileUploadPreviewAction, FileUploadProgress, FileUploadStatus, useFileUpload };

package/dist/funnel-chart.d.ts

@@ -9,9 +9,10 @@ import * as React from "react";
  * (recharts `BarChart`, vertical layout) over a faint 100 % reference, using
  * recharts' built-in `Bar` `background`. Both read top-down as the audience
  * drops off, and both reuse the same stage data, palette, value-label column,
- * legend, frame, and tooltip — only the inner plot differs (the same split as
- * `Sparkline`). Per the chart architecture the recharts primitives are rendered
- * directly here, never wrapped.
+ * legend, frame, and tooltip — only the inner plot differs (the same
+ * split-by-render-style approach as the `Sparkline*` components). Per the chart
+ * architecture the recharts primitives are rendered directly here, never
+ * wrapped.
  *
  * @example
  * <FunnelChart
@@ -40,11 +41,14 @@ type FunnelStage = {
   fill?: string;
 };
 /**
- * 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`.
+ * Stage palette, ordered top-of-funnel → bottom. A funnel encodes *magnitude*
+ * (each stage is a share of the one above), not identity, so — like
+ * `heatmap-chart` — stages take one theme-aware hue (`surface-brand`) at a
+ * descending opacity ramp rather than distinct categorical hues. The ramp is
+ * floored (down to 20%, not the heatmap's 8%) so the faintest stage's legend dot
+ * stays legible. Assign by order, or override per stage with `fill`.
  */
-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)"];
+declare const FUNNEL_CHART_PALETTE: readonly ["rgb(from var(--color-surface-brand) r g b / 1)", "rgb(from var(--color-surface-brand) r g b / 0.78)", "rgb(from var(--color-surface-brand) r g b / 0.56)", "rgb(from var(--color-surface-brand) r g b / 0.36)", "rgb(from var(--color-surface-brand) r g b / 0.2)"];
 type FunnelChartLayout = {
   /** Plot box height in px. */
   height: number;

package/dist/funnel-chart.js

@@ -7,16 +7,19 @@ 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`.
+* Stage palette, ordered top-of-funnel → bottom. A funnel encodes *magnitude*
+* (each stage is a share of the one above), not identity, so — like
+* `heatmap-chart` — stages take one theme-aware hue (`surface-brand`) at a
+* descending opacity ramp rather than distinct categorical hues. The ramp is
+* floored (down to 20%, not the heatmap's 8%) so the faintest stage's legend dot
+* stays legible. 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)"
+	"rgb(from var(--color-surface-brand) r g b / 1)",
+	"rgb(from var(--color-surface-brand) r g b / 0.78)",
+	"rgb(from var(--color-surface-brand) r g b / 0.56)",
+	"rgb(from var(--color-surface-brand) r g b / 0.36)",
+	"rgb(from var(--color-surface-brand) r g b / 0.2)"
 ];
 const FUNNEL_CHART_LAYOUT = {
 	sm: {

package/dist/input-group.js

@@ -8,7 +8,7 @@ import { Textarea } from "./textarea.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/input-group.tsx
-const inputGroupVariants = cva("group/input-group relative flex w-full min-w-0 items-center rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:border-line-subtle has-disabled:bg-surface has-disabled:text-fg-caption-placeholder focus-within:border-line-focus focus-within:inset-ring-1 inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3", {
+const inputGroupVariants = cva("group/input-group relative flex w-full min-w-0 items-center rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:border-line-subtle has-disabled:bg-surface has-disabled:text-fg-caption-placeholder focus-within:border-line-focus focus-within:inset-ring-1 focus-within:inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[[data-slot][aria-invalid=true]]:focus-within:border-line-danger has-[[data-slot][aria-invalid=true]]:focus-within:inset-ring-line-danger has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3", {
 	variants: { size: {
 		sm: "h-8",
 		md: "h-10",

package/dist/input-otp.d.ts

@@ -0,0 +1,23 @@
+import { n as InputSize } from "./input-CfoEJ8A6.js";
+import * as React from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/input-otp.d.ts
+declare const inputOTPSlotVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type InputOTPProps = Omit<OTPField.Root.Props, "className"> & {
+  className?: string;
+  size?: InputSize;
+};
+declare function InputOTP({ className, size, ...props }: InputOTPProps): React.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+type InputOTPSlotProps = Omit<OTPField.Input.Props, "className"> & {
+  className?: string;
+};
+declare function InputOTPSlot({ className, ...props }: InputOTPSlotProps): React.JSX.Element;
+type InputOTPSeparatorProps = Omit<OTPField.Separator.Props, "className"> & {
+  className?: string;
+};
+declare function InputOTPSeparator({ children, className, ...props }: InputOTPSeparatorProps): React.JSX.Element;
+//#endregion
+export { InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, inputOTPSlotVariants };

package/dist/input-otp.js

@@ -0,0 +1,56 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { InputSizeProvider, useInputComponentSize } from "./input-size-context.js";
+import { MinusIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/input-otp.tsx
+const inputOTPSlotVariants = cva("relative flex shrink-0 appearance-none items-center justify-center rounded-full border border-line bg-canvas text-center font-normal text-fg-primary caret-fg-primary outline-none transition-[background-color,border-color,box-shadow,color] placeholder:text-fg-caption-placeholder hover:border-line-strong focus:z-10 focus:border-line-focus focus:inset-ring-1 focus:inset-ring-line-focus data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:focus:border-line-danger aria-invalid:focus:inset-ring-line-danger data-invalid:border-line-danger data-invalid:text-fg-danger data-invalid:focus:border-line-danger data-invalid:focus:inset-ring-line-danger group-aria-invalid/input-otp:border-line-danger group-aria-invalid/input-otp:text-fg-danger group-aria-invalid/input-otp:focus:border-line-danger group-aria-invalid/input-otp:focus:inset-ring-line-danger", {
+	variants: { size: {
+		sm: "size-8 text-gdt-xs",
+		md: "size-10 text-gdt-sm",
+		lg: "size-12 text-gdt-md",
+		xl: "size-14 text-gdt-lg"
+	} },
+	defaultVariants: { size: "md" }
+});
+function InputOTP({ className, size, ...props }) {
+	const resolvedSize = useInputComponentSize(size);
+	return /* @__PURE__ */ jsx(InputSizeProvider, {
+		size: resolvedSize,
+		children: /* @__PURE__ */ jsx(OTPField.Root, {
+			"data-slot": "input-otp",
+			"data-size": resolvedSize,
+			className: cn("group/input-otp flex items-center gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50", className),
+			...props
+		})
+	});
+}
+function InputOTPGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-group",
+		"data-size": useInputComponentSize(),
+		className: cn("flex items-center rounded-full [&>[data-slot=input-otp-slot]:first-child]:rounded-l-full [&>[data-slot=input-otp-slot]:last-child]:rounded-r-full [&>[data-slot=input-otp-slot]:not(:first-child)]:-ml-px [&>[data-slot=input-otp-slot]]:rounded-none", className),
+		...props
+	});
+}
+function InputOTPSlot({ className, ...props }) {
+	const resolvedSize = useInputComponentSize();
+	return /* @__PURE__ */ jsx(OTPField.Input, {
+		"data-slot": "input-otp-slot",
+		"data-size": resolvedSize,
+		className: cn(inputOTPSlotVariants({ size: resolvedSize }), className),
+		...props
+	});
+}
+function InputOTPSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx(OTPField.Separator, {
+		"data-slot": "input-otp-separator",
+		className: cn("flex items-center justify-center px-1 text-fg-secondary [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, inputOTPSlotVariants };

package/dist/input.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/input.tsx
-const inputVariants = cva("flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none", {
+const inputVariants = cva("flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger", {
 	variants: { size: {
 		sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
 		md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",

package/dist/line-chart.d.ts

@@ -1,43 +1,47 @@
 import { t as ComponentSize } from "./size-context-D4mYvcg8.js";
+import { ChartConfig } from "./chart.js";
+import * as React from "react";
+import { Area, AreaChart as AreaChart$1, CartesianGrid, Line, LineChart as LineChart$1, XAxis, YAxis } from "recharts";
 //#region src/line-chart.d.ts
 /**
- * Line charts are composed from recharts plot primitives directly — recharts
- * identifies `Line`, `Area`, `XAxis`, `YAxis`, and `CartesianGrid` by component
- * identity and cannot be wrapped. This module supplies giddaa-specific defaults
- * that would otherwise be copy-pasted into every line chart: per-size layout
- * numbers. Pair them with the shared frame and overlays from `./chart`.
+ * Line and area 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.
  *
- * Five sizes (sm → huge) extend the three `ComponentSize` values used elsewhere.
- * xl and huge must be passed explicitly — they cannot be inherited from
- * `SizeProvider` since `ComponentSize` only carries sm/md/lg.
- *
- * Tokens:
- * - Primary series stroke + dots + area fill: `var(--color-surface-brand)`
- * - Comparison series: `var(--color-surface-accent)`
- * - Gridlines: `var(--color-line-subtle)`
- * - Area wash: primary series colour at 15 % opacity (`fillOpacity={0.15}`)
- * - Active-dot ring: `var(--color-surface-raised)` stroke (matches card bg)
+ * Anatomy: `LineChart`/`AreaChart` are the plot roots (frame + responsive box +
+ * recharts chart); compose the grid, axes, series, and the shared overlays from
+ * `./chart` as children. Both roots share the same axis and grid wrappers.
  *
  * @example
- * const chart = useLineChartLayout();
  * <ChartCard size="md">
  *   <ChartHeader>
  *     <ChartTitle>Revenue Overview</ChartTitle>
  *     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>
  *   </ChartHeader>
- *   <ChartContainer config={config} {...chart.container}>
- *     <AreaChart data={data} {...chart.chart}>
- *       <CartesianGrid vertical={false} stroke="var(--color-line-subtle)" />
- *       <XAxis dataKey="month" {...chart.xAxis} />
- *       <YAxis {...chart.yAxis} />
- *       <ChartLegend verticalAlign="top" content={<ChartLegendContent marker="line" />} />
- *       <ChartTooltip content={<ChartTooltipContent />} />
- *       <Area dataKey="revenue" {...chart.area("var(--color-revenue)")} />
- *     </AreaChart>
- *   </ChartContainer>
+ *   <AreaChart config={config} data={data}>
+ *     <LineChartGrid />
+ *     <LineChartXAxis dataKey="month" />
+ *     <LineChartYAxis />
+ *     <ChartTooltip content={<ChartTooltipContent />} />
+ *     <AreaChartSeries dataKey="revenue" name="Revenue" />
+ *   </AreaChart>
  * </ChartCard>
  */
-/** Five sizes for line charts — extends ComponentSize with xl and huge. */
+/**
+ * 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.
+ */
+declare const LINE_CHART_PALETTE: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)"];
+/**
+ * Five sizes for line/area charts — extends the three shared `ComponentSize`
+ * values with `xl` and `huge` for hero trend panels. `xl`/`huge` scale the plot
+ * height and margins on the *root only*; the child series and axes resolve to
+ * `lg` marks (identical from `lg` up), so they never need the extended union.
+ */
 type LineChartSize = "sm" | "md" | "lg" | "xl" | "huge";
 type LineChartLayout = {
   /** Plot height in px. Width stays fluid via ResponsiveContainer. */
@@ -63,21 +67,89 @@ type LineChartLayout = {
   tickMargin: number;
 };
 declare const LINE_CHART_LAYOUT: Record<LineChartSize, LineChartLayout>;
-/** Map the 5 line-chart sizes to the 3 ComponentSize values for ChartCard. */
+/** Clamp the 5 line-chart sizes to the 3 `ComponentSize` values for children. */
 declare function toComponentSize(size: LineChartSize): ComponentSize;
+/** Shared root knobs — series theming, plot scale, and the plot-box className. */
+type LineChartRootExtras = {
+  /** Series labels/icons for the shared tooltip and legend (see `ChartConfig`). */
+  config?: ChartConfig;
+  /** Plot scale; inherited from the nearest `SizeProvider` when omitted. */
+  size?: LineChartSize;
+  /** Applied to the responsive plot box, e.g. to override its height. */
+  className?: string;
+};
+type LineChartProps = Omit<React.ComponentProps<typeof LineChart$1>, "width" | "height"> & LineChartRootExtras;
+type AreaChartProps = Omit<React.ComponentProps<typeof AreaChart$1>, "width" | "height"> & LineChartRootExtras;
 /**
- * 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)")} />
+ * Plot root — wraps the shared `ChartContainer` (tooltip/legend theming,
+ * responsive box) around the recharts `LineChart` with a size-scaled height and
+ * margin. `size` flows to the child primitives through `SizeProvider` (clamped
+ * to `lg` for `xl`/`huge`). Extra props reach the recharts chart (`data`,
+ * `syncId`, …).
+ */
+declare function LineChart({ config, size, className, children, ...props }: LineChartProps): React.JSX.Element;
+/**
+ * Plot root for filled trends — identical to `LineChart` but wraps the recharts
+ * `AreaChart`, so it hosts `AreaChartSeries` (and the same grid/axes/overlays).
+ */
+declare function AreaChart({ config, size, className, children, ...props }: AreaChartProps): React.JSX.Element;
+type LineChartGridProps = React.ComponentProps<typeof CartesianGrid>;
+/**
+ * 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).
+ */
+declare function LineChartGrid(props: LineChartGridProps): React.JSX.Element;
+type LineChartXAxisProps = React.ComponentProps<typeof XAxis> & {
+  /** Explicit axis scale; otherwise inherited from the chart's `size`. */
+  size?: LineChartSize;
+};
+type LineChartYAxisProps = React.ComponentProps<typeof YAxis> & {
+  /** Explicit axis scale; otherwise inherited from the chart's `size`. */
+  size?: LineChartSize;
+};
+/**
+ * Category (time) axis — recharts `XAxis` with no axis/tick lines, a size-scaled
+ * tick margin, and caption-placeholder tick ink. Passing your own `tick`
+ * replaces the default styling entirely.
+ */
+declare function LineChartXAxis({ size, tick, ...props }: LineChartXAxisProps): React.JSX.Element;
+/**
+ * Value axis — recharts `YAxis` with no axis/tick lines, size-scaled tick type,
+ * and reserved width for value labels. Override `width` for long labels.
+ */
+declare function LineChartYAxis({ size, tick, ...props }: LineChartYAxisProps): React.JSX.Element;
+type LineChartSeriesProps = React.ComponentProps<typeof Line> & {
+  /** Series colour for the stroke and dots. Defaults to the first chart token. */
+  color?: string;
+  /** Explicit mark scale; otherwise inherited from the chart's `size`. */
+  size?: LineChartSize;
+};
+/**
+ * One line series — recharts `Line` with the giddaa mark spec: a 2px rounded
+ * stroke in `color`, solid resting dots, and a hover dot ringed in
+ * `surface-raised` so overlapping series stay separable. `color` drives all of
+ * them at once; `stroke`/`dot`/`activeDot` still win when passed directly.
+ */
+declare function LineChartSeries({ color, size, dot, activeDot, ...props }: LineChartSeriesProps): React.JSX.Element;
+type AreaChartSeriesProps = React.ComponentProps<typeof Area> & {
+  /** Series colour for the stroke, wash, and dots. Defaults to the first chart token. */
+  color?: string;
+  /** Explicit mark scale; otherwise inherited from the chart's `size`. */
+  size?: LineChartSize;
+};
+/**
+ * One area series — recharts `Area` with the giddaa mark spec: the same rounded
+ * 2px stroke and dots as `LineChartSeries`, plus the series colour washed to 15%
+ * beneath the stroke. `color` drives stroke + fill + dots at once;
+ * `stroke`/`fill`/`dot` still win when passed directly.
+ */
+declare function AreaChartSeries({ color, size, dot, activeDot, ...props }: AreaChartSeriesProps): React.JSX.Element;
+/**
+ * @deprecated Compose the `<LineChart>`/`<AreaChart>` primitives instead — see
+ * the module example. This layout hook predates recharts 3 wrapping support and
+ * will be removed in the next major. It returns prop bags to spread onto raw
+ * recharts elements.
  */
 declare function useLineChartLayout(size?: LineChartSize): {
   container: {
@@ -151,4 +223,4 @@ declare function useLineChartLayout(size?: LineChartSize): {
   };
 };
 //#endregion
-export { LINE_CHART_LAYOUT, type LineChartLayout, type LineChartSize, toComponentSize, useLineChartLayout };
+export { AreaChart, type AreaChartProps, AreaChartSeries, type AreaChartSeriesProps, LINE_CHART_LAYOUT, LINE_CHART_PALETTE, LineChart, LineChartGrid, type LineChartGridProps, type LineChartLayout, type LineChartProps, LineChartSeries, type LineChartSeriesProps, type LineChartSize, LineChartXAxis, type LineChartXAxisProps, LineChartYAxis, type LineChartYAxisProps, toComponentSize, useLineChartLayout };