@giddaa-housing/ui 1.1.0 → 1.2.0

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 };

package/dist/line-chart.js

@@ -1,7 +1,48 @@
 "use client";
-import { useComponentSize } from "./size-context.js";
-import { cartesianAxisProps } from "./chart.js";
+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 { Area, AreaChart as AreaChart$1, CartesianGrid, Line, LineChart as LineChart$1, XAxis, YAxis } from "recharts";
 //#region src/line-chart.tsx
+/**
+* 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.
+*
+* 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
+* <ChartCard size="md">
+*   <ChartHeader>
+*     <ChartTitle>Revenue Overview</ChartTitle>
+*     <ChartDescription>Monthly revenue · Jan–Jul</ChartDescription>
+*   </ChartHeader>
+*   <AreaChart config={config} data={data}>
+*     <LineChartGrid />
+*     <LineChartXAxis dataKey="month" />
+*     <LineChartYAxis />
+*     <ChartTooltip content={<ChartTooltipContent />} />
+*     <AreaChartSeries dataKey="revenue" name="Revenue" />
+*   </AreaChart>
+* </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 LINE_CHART_PALETTE = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)"
+];
+const DEFAULT_SERIES_COLOR = LINE_CHART_PALETTE[0];
 const LINE_CHART_LAYOUT = {
 	sm: {
 		height: 64,
@@ -57,8 +98,8 @@ const LINE_CHART_LAYOUT = {
 			left: 0
 		},
 		strokeWidth: 2,
-		dotRadius: 4,
-		activeDotRadius: 5.5,
+		dotRadius: 3.5,
+		activeDotRadius: 5,
 		tickFontSize: 11,
 		yAxisWidth: 28,
 		tickMargin: 6
@@ -72,30 +113,143 @@ const LINE_CHART_LAYOUT = {
 			left: 0
 		},
 		strokeWidth: 2,
-		dotRadius: 4.5,
-		activeDotRadius: 6,
+		dotRadius: 3.5,
+		activeDotRadius: 5,
 		tickFontSize: 12,
 		yAxisWidth: 30,
 		tickMargin: 7
 	}
 };
-/** 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. */
 function toComponentSize(size) {
 	if (size === "xl" || size === "huge") return "lg";
 	return size;
 }
+/** Resolve the layout for an explicit or inherited line-chart size. */
+function useLineChartSize(size) {
+	const inherited = useComponentSize();
+	const resolved = size ?? inherited;
+	return {
+		size: resolved,
+		layout: LINE_CHART_LAYOUT[resolved] ?? LINE_CHART_LAYOUT.md
+	};
+}
+/**
+* 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`, …).
+*/
+function LineChart({ config = {}, size, className, children, ...props }) {
+	const { size: resolved, layout } = useLineChartSize(size);
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: toComponentSize(resolved),
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: cn("aspect-auto w-full", className),
+			style: { height: layout.height },
+			children: /* @__PURE__ */ jsx(LineChart$1, {
+				accessibilityLayer: true,
+				margin: layout.margin,
+				...props,
+				children
+			})
+		})
+	});
+}
+/**
+* Plot root for filled trends — identical to `LineChart` but wraps the recharts
+* `AreaChart`, so it hosts `AreaChartSeries` (and the same grid/axes/overlays).
+*/
+function AreaChart({ config = {}, size, className, children, ...props }) {
+	const { size: resolved, layout } = useLineChartSize(size);
+	return /* @__PURE__ */ jsx(SizeProvider, {
+		size: toComponentSize(resolved),
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			config,
+			className: cn("aspect-auto w-full", className),
+			style: { height: layout.height },
+			children: /* @__PURE__ */ jsx(AreaChart$1, {
+				accessibilityLayer: true,
+				margin: layout.margin,
+				...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).
+*/
+function LineChartGrid(props) {
+	return /* @__PURE__ */ jsx(CartesianGrid, {
+		vertical: false,
+		stroke: "var(--color-line)",
+		...props
+	});
+}
+/**
+* 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.
+*/
+function LineChartXAxis({ size, tick, ...props }) {
+	const { layout } = useLineChartSize(size);
+	const axes = cartesianAxisProps({
+		tickMargin: layout.tickMargin,
+		tickFontSize: layout.tickFontSize,
+		yAxisWidth: layout.yAxisWidth
+	});
+	const defaultTick = {
+		...axes.xAxis.tick,
+		fill: "var(--color-fg-caption-placeholder)"
+	};
+	return /* @__PURE__ */ jsx(XAxis, {
+		tickLine: axes.xAxis.tickLine,
+		axisLine: axes.xAxis.axisLine,
+		tickMargin: axes.xAxis.tickMargin,
+		tick: tick ?? defaultTick,
+		...props
+	});
+}
 /**
-* 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.
+* Value axis — recharts `YAxis` with no axis/tick lines, size-scaled tick type,
+* and reserved width for value labels. Override `width` for long labels.
 */
-function seriesProps(layout, color) {
+function LineChartYAxis({ size, tick, ...props }) {
+	const { layout } = useLineChartSize(size);
+	const axes = cartesianAxisProps({
+		tickMargin: layout.tickMargin,
+		tickFontSize: layout.tickFontSize,
+		yAxisWidth: layout.yAxisWidth
+	});
+	const defaultTick = {
+		...axes.yAxis.tick,
+		fill: "var(--color-fg-caption-placeholder)"
+	};
+	return /* @__PURE__ */ jsx(YAxis, {
+		tickLine: axes.yAxis.tickLine,
+		axisLine: axes.yAxis.axisLine,
+		width: axes.yAxis.width,
+		tick: tick ?? defaultTick,
+		...props
+	});
+}
+/** The giddaa line mark spec: rounded 2px stroke, resting + surface-ringed active dots. */
+function lineMarkProps(layout, color) {
 	return {
 		type: "linear",
 		stroke: color,
 		strokeWidth: layout.strokeWidth,
 		strokeLinejoin: "round",
-		strokeLinecap: "round",
+		strokeLinecap: "round"
+	};
+}
+function defaultDots(layout, color) {
+	return {
 		dot: {
 			r: layout.dotRadius,
 			fill: color,
@@ -110,23 +264,56 @@ function seriesProps(layout, color) {
 	};
 }
 /**
-* 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)")} />
+* 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.
+*/
+function LineChartSeries({ color = DEFAULT_SERIES_COLOR, size, dot, activeDot, ...props }) {
+	const { layout } = useLineChartSize(size);
+	const dots = defaultDots(layout, color);
+	return /* @__PURE__ */ jsx(Line, {
+		...lineMarkProps(layout, color),
+		dot: dot ?? dots.dot,
+		activeDot: activeDot ?? dots.activeDot,
+		...props
+	});
+}
+/**
+* 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.
+*/
+function AreaChartSeries({ color = DEFAULT_SERIES_COLOR, size, dot, activeDot, ...props }) {
+	const { layout } = useLineChartSize(size);
+	const dots = defaultDots(layout, color);
+	return /* @__PURE__ */ jsx(Area, {
+		...lineMarkProps(layout, color),
+		fill: color,
+		fillOpacity: .15,
+		dot: dot ?? dots.dot,
+		activeDot: activeDot ?? dots.activeDot,
+		...props
+	});
+}
+/**
+* @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.
 */
 function useLineChartLayout(size) {
-	const inheritedSize = useComponentSize();
-	const layout = LINE_CHART_LAYOUT[size ?? inheritedSize] ?? LINE_CHART_LAYOUT.md;
-	const axes = cartesianAxisProps(layout);
+	const { layout } = useLineChartSize(size);
+	const axes = cartesianAxisProps({
+		tickMargin: layout.tickMargin,
+		tickFontSize: layout.tickFontSize,
+		yAxisWidth: layout.yAxisWidth
+	});
+	const series = (color) => ({
+		...lineMarkProps(layout, color),
+		...defaultDots(layout, color)
+	});
 	return {
 		container: {
 			className: "aspect-auto w-full",
@@ -138,13 +325,13 @@ function useLineChartLayout(size) {
 		},
 		xAxis: axes.xAxis,
 		yAxis: axes.yAxis,
-		line: (color) => seriesProps(layout, color),
+		line: (color) => series(color),
 		area: (color) => ({
-			...seriesProps(layout, color),
+			...series(color),
 			fill: color,
 			fillOpacity: .15
 		})
 	};
 }
 //#endregion
-export { LINE_CHART_LAYOUT, toComponentSize, useLineChartLayout };
+export { AreaChart, AreaChartSeries, LINE_CHART_LAYOUT, LINE_CHART_PALETTE, LineChart, LineChartGrid, LineChartSeries, LineChartXAxis, LineChartYAxis, toComponentSize, useLineChartLayout };

package/dist/list-item.d.ts

@@ -0,0 +1,22 @@
+import { Avatar } from "./avatar.js";
+import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+//#region src/list-item.d.ts
+declare const listItemVariants: (props?: ({
+  size?: "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ListItemSize = NonNullable<VariantProps<typeof listItemVariants>["size"]>;
+type ListItemProps = useRender.ComponentProps<"div"> & VariantProps<typeof listItemVariants> & {
+  selected?: boolean;
+};
+declare function ListItem({ className, render, size, selected, ...props }: ListItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ListItemAvatar({ className, size, ...props }: ComponentProps<typeof Avatar>): import("react").JSX.Element;
+declare function ListItemIcon({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+declare function ListItemContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function ListItemTitle({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+declare function ListItemDescription({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+declare function ListItemMeta({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+declare function ListItemCount({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+//#endregion
+export { ListItem, ListItemAvatar, ListItemContent, ListItemCount, ListItemDescription, ListItemIcon, ListItemMeta, type ListItemProps, type ListItemSize, ListItemTitle, listItemVariants };

package/dist/list-item.js

@@ -0,0 +1,84 @@
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { Avatar } from "./avatar.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
+//#region src/list-item.tsx
+const listItemVariants = cva("group/list-item flex w-full min-w-0 items-center border-b border-line-subtle bg-surface text-left text-fg-primary transition-[background-color,color,opacity,box-shadow] outline-none data-[selected=true]:bg-surface-brand-subtle [button,a,[role=button],[role=link]]:cursor-pointer [button,a,[role=button],[role=link]]:select-none [button,a,[role=button],[role=link]]:hover:bg-surface-raised [button,a,[role=button],[role=link]]:active:bg-surface-raised data-[selected=true]:[button,a,[role=button],[role=link]]:hover:bg-surface-brand-subtle data-[selected=true]:[button,a,[role=button],[role=link]]:active:bg-surface-brand-subtle disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]", {
+	variants: { size: {
+		md: "gap-3 px-4 py-3.5",
+		lg: "gap-4 px-5 py-4.5"
+	} },
+	defaultVariants: { size: "md" }
+});
+function ListItem({ className, render, size = "md", selected = false, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			className: cn(listItemVariants({ size }), className),
+			"data-selected": selected,
+			"data-size": size,
+			"data-slot": "list-item"
+		}, props),
+		render,
+		state: {
+			slot: "list-item",
+			size,
+			selected
+		}
+	});
+}
+function ListItemAvatar({ className, size = "sm", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar, {
+		"data-slot": "list-item-avatar",
+		size,
+		className: cn("group-data-[size=md]/list-item:size-8 group-data-[size=lg]/list-item:size-10", "**:data-[slot=avatar-fallback]:bg-action-tertiary **:data-[slot=avatar-fallback]:text-fg-primary", "group-data-[selected=true]/list-item:**:data-[slot=avatar-fallback]:bg-surface-brand group-data-[selected=true]/list-item:**:data-[slot=avatar-fallback]:text-fg-on-brand", className),
+		...props
+	});
+}
+function ListItemIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "list-item-icon",
+		className: cn("flex shrink-0 items-center justify-center text-fg-secondary [&>svg]:shrink-0", "group-data-[size=md]/list-item:size-5 group-data-[size=md]/list-item:[&>svg]:size-5", "group-data-[size=lg]/list-item:size-6 group-data-[size=lg]/list-item:[&>svg]:size-6", className),
+		...props
+	});
+}
+function ListItemContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "list-item-content",
+		className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
+		...props
+	});
+}
+function ListItemTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "list-item-title",
+		className: cn("min-w-0 truncate font-semibold text-fg-primary group-data-[selected=true]/list-item:text-fg-brand group-disabled/list-item:text-fg-caption-placeholder group-aria-disabled/list-item:text-fg-caption-placeholder", "group-data-[size=md]/list-item:text-gdt-sm", "group-data-[size=lg]/list-item:text-gdt-md", className),
+		...props
+	});
+}
+function ListItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "list-item-description",
+		className: cn("min-w-0 truncate font-normal text-fg-secondary group-disabled/list-item:text-fg-caption-placeholder group-aria-disabled/list-item:text-fg-caption-placeholder", "group-data-[size=md]/list-item:text-gdt-xs", "group-data-[size=lg]/list-item:text-gdt-sm", className),
+		...props
+	});
+}
+function ListItemMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "list-item-meta",
+		className: cn("shrink-0 whitespace-nowrap text-right font-normal text-fg-secondary group-data-[selected=true]/list-item:text-fg-brand group-disabled/list-item:text-fg-caption-placeholder group-aria-disabled/list-item:text-fg-caption-placeholder", "group-data-[size=md]/list-item:text-gdt-xs", "group-data-[size=lg]/list-item:text-gdt-sm", className),
+		...props
+	});
+}
+function ListItemCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "list-item-count",
+		className: cn("flex shrink-0 items-center justify-center rounded-full bg-action-primary px-2 py-0.5 text-gdt-xs font-bold whitespace-nowrap text-fg-on-brand group-disabled/list-item:bg-action-tertiary group-disabled/list-item:text-fg-caption-placeholder group-aria-disabled/list-item:bg-action-tertiary group-aria-disabled/list-item:text-fg-caption-placeholder", "group-data-[size=md]/list-item:min-h-5.5", "group-data-[size=lg]/list-item:min-h-6", className),
+		...props
+	});
+}
+//#endregion
+export { ListItem, ListItemAvatar, ListItemContent, ListItemCount, ListItemDescription, ListItemIcon, ListItemMeta, ListItemTitle, listItemVariants };

package/dist/number-input.js

@@ -43,24 +43,27 @@ function NumberInput({ children, format, formatPreset, placeholder, size, thousa
 }
 function NumberInputControl() {
 	const size = useComponentSize();
-	return /* @__PURE__ */ jsxs(InputGroupAddon, {
+	return /* @__PURE__ */ jsx(InputGroupAddon, {
 		align: "inline-end",
-		className: cn("flex gap-0 flex-col h-[calc(100%-2px)] w-10 overflow-hidden rounded-r-full p-0! pr-1.5!", size === "lg" && "w-12"),
-		children: [/* @__PURE__ */ jsx(NumberField.Increment, {
-			className: "w-full flex-1 rounded-none rounded-tr-full",
-			render: /* @__PURE__ */ jsx(InputGroupButton, { variant: "tertiary" }),
-			children: /* @__PURE__ */ jsx(PlusIcon, { className: cn("size-1.5", {
-				"size-3": size === "md",
-				"size-3.5": size === "lg"
-			}) })
-		}), /* @__PURE__ */ jsx(NumberField.Decrement, {
-			className: "w-full flex-1 rounded-none rounded-br-full",
-			render: /* @__PURE__ */ jsx(InputGroupButton, { variant: "tertiary" }),
-			children: /* @__PURE__ */ jsx(MinusIcon, { className: cn("size-1.5", {
-				"size-3": size === "md",
-				"size-3.5": size === "lg"
-			}) })
-		})]
+		className: cn("flex h-full w-10 overflow-hidden rounded-r-full p-0! group-focus-within/input-group:mr-px group-focus-within/input-group:h-[calc(100%-2px)]", size === "lg" && "w-12"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full w-full flex-col gap-0 group-focus-within/input-group:ml-px group-focus-within/input-group:h-[calc(100%+2px)]",
+			children: [/* @__PURE__ */ jsx(NumberField.Increment, {
+				className: "w-full flex-1 rounded-none rounded-tr-full",
+				render: /* @__PURE__ */ jsx(InputGroupButton, { variant: "tertiary" }),
+				children: /* @__PURE__ */ jsx(PlusIcon, { className: cn("size-1.5", {
+					"size-3": size === "md",
+					"size-3.5": size === "lg"
+				}) })
+			}), /* @__PURE__ */ jsx(NumberField.Decrement, {
+				className: "w-full flex-1 rounded-none rounded-br-full",
+				render: /* @__PURE__ */ jsx(InputGroupButton, { variant: "tertiary" }),
+				children: /* @__PURE__ */ jsx(MinusIcon, { className: cn("size-1.5", {
+					"size-3": size === "md",
+					"size-3.5": size === "lg"
+				}) })
+			})]
+		})
 	});
 }
 //#endregion