@giddaa-housing/ui 1.1.0 → 2.0.0

package/dist/chart.d.ts

@@ -31,6 +31,33 @@ declare function ChartTitle({ className, size, ...props }: React.ComponentProps<
 declare function ChartDescription({ className, size, ...props }: React.ComponentProps<"p"> & {
   size?: ComponentSize;
 }): React.JSX.Element;
+type ChartMetricLayout = "stacked" | "inline";
+declare function ChartMetric({ className, layout, size, ...props }: React.ComponentProps<"div"> & {
+  layout?: ChartMetricLayout;
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartValue({ className, size, ...props }: React.ComponentProps<"p"> & {
+  size?: ComponentSize;
+}): React.JSX.Element;
+type ChartTrendDirection = "up" | "down";
+type ChartTrendOrientation = "horizontal" | "vertical";
+declare function ChartTrend({ className, direction, orientation, size, ...props }: React.ComponentProps<"p"> & {
+  direction?: ChartTrendDirection;
+  orientation?: ChartTrendOrientation;
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartTrendChip({ children, className, direction: directionProp, showIcon, size: sizeProp, ...props }: React.ComponentProps<"span"> & {
+  direction?: ChartTrendDirection;
+  showIcon?: boolean;
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartTrendValue({ className, size: sizeProp, ...props }: React.ComponentProps<"span"> & {
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartTrendCaption({ className, size: sizeProp, ...props }: React.ComponentProps<"span"> & {
+  size?: ComponentSize;
+}): React.JSX.Element;
+declare function ChartFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
   config: ChartConfig;
   children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
@@ -93,11 +120,12 @@ type CartesianAxisLayout = {
  * or axis lines, a size-scaled tick font, and a reserved value-axis width) that
  * every bar and line chart would otherwise repeat per axis. Spread the result
  * onto the recharts axis, then add the chart-specific props (`dataKey`,
- * `domain`, `ticks`, a `width`/`type` override, …):
+ * `domain`, `ticks`, a `width`/`type` override, …). Chart modules build their
+ * per-size axis wrappers (`BarChartXAxis`, `LineChartXAxis`, …) on top of this:
  *
- *   const chart = useBarChartLayout();
- *   <XAxis dataKey="month" {...chart.xAxis} />
- *   <YAxis domain={[0, 120]} {...chart.yAxis} />
+ *   const axes = cartesianAxisProps({ tickMargin: 8, tickFontSize: 11, yAxisWidth: 32 });
+ *   <XAxis dataKey="month" {...axes.xAxis} />
+ *   <YAxis domain={[0, 120]} {...axes.yAxis} />
  */
 declare function cartesianAxisProps(layout: CartesianAxisLayout): {
   readonly xAxis: {
@@ -118,4 +146,4 @@ declare function cartesianAxisProps(layout: CartesianAxisLayout): {
   };
 };
 //#endregion
-export { type CartesianAxisLayout, ChartCard, ChartConfig, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, ChartValueType, cartesianAxisProps };
+export { type CartesianAxisLayout, ChartCard, ChartConfig, ChartContainer, ChartDescription, ChartFooter, ChartHeader, ChartLegend, ChartLegendContent, ChartMetric, type ChartMetricLayout, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, ChartTrend, ChartTrendCaption, ChartTrendChip, type ChartTrendDirection, type ChartTrendOrientation, ChartTrendValue, ChartValue, ChartValueType, cartesianAxisProps };

package/dist/chart.js

@@ -1,18 +1,19 @@
 "use client";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
+import { ArrowDown, ArrowUp } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 //#region src/chart.tsx
 /**
-* Markers use `--color-surface-brand` as a placeholder. Giddaa has no
-* categorical chart palette yet — add `chart-1`…`chart-N` tokens and bind each
-* series (its legend marker and tooltip dot) to its own colour once they exist.
-* Until then any series without an explicit colour paints brand-green.
+* Fallback colour for a legend marker or tooltip dot when a series resolves no
+* colour of its own — it defaults to the first categorical slot (`chart-1`).
+* A series almost always carries its own colour (set by the chart's `color`
+* prop or `ChartConfig`), so this is only hit by an unconfigured series.
 */
-const SERIES_COLOR_PLACEHOLDER = "var(--color-surface-brand)";
+const SERIES_COLOR_FALLBACK = "var(--color-chart-1)";
 function formatChartValue(value, type) {
 	if (Array.isArray(value)) return value.join(", ");
 	if (typeof value !== "number") return value == null ? "" : String(value);
@@ -52,6 +53,19 @@ function useChart() {
 *   </ChartHeader>
 *   <ChartContainer config={config}>{/* recharts plot *\/}</ChartContainer>
 * </ChartCard>
+*
+* // Single-metric chart tile
+* <ChartCard size="md">
+*   <ChartTitle>Properties sold</ChartTitle>
+*   <ChartMetric>
+*     <ChartValue>1.28k</ChartValue>
+*     <ChartTrend direction="up">
+*       <ChartTrendChip><ChartTrendValue>12.5%</ChartTrendValue></ChartTrendChip>
+*       <ChartTrendCaption>vs last month</ChartTrendCaption>
+*     </ChartTrend>
+*   </ChartMetric>
+*   <ChartFooter>{/* sparkline *\/}</ChartFooter>
+* </ChartCard>
 */
 const 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: {
@@ -112,6 +126,188 @@ function ChartDescription({ className, size, ...props }) {
 		...props
 	});
 }
+const chartMetricVariants = cva("min-w-0", {
+	variants: {
+		layout: {
+			stacked: "flex flex-col items-start",
+			inline: "flex flex-wrap items-center"
+		},
+		size: {
+			sm: "gap-1.5",
+			md: "gap-2",
+			lg: "gap-3"
+		}
+	},
+	defaultVariants: {
+		layout: "stacked",
+		size: "md"
+	}
+});
+function ChartMetric({ className, layout = "stacked", size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-metric",
+		"data-layout": layout,
+		className: cn(chartMetricVariants({
+			layout,
+			size: resolvedSize
+		}), className),
+		...props
+	});
+}
+const chartValueVariants = cva("min-w-0 font-extrabold leading-none tracking-[-0.02em] text-fg-primary tabular-nums", {
+	variants: { size: {
+		sm: "text-[2.25rem]",
+		md: "text-[3rem]",
+		lg: "text-[3.875rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+function ChartValue({ className, size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "chart-value",
+		className: cn(chartValueVariants({ size: resolvedSize }), className),
+		...props
+	});
+}
+const ChartTrendContext = React.createContext(null);
+function useChartTrend({ direction, size } = {}) {
+	const context = React.useContext(ChartTrendContext);
+	return {
+		direction: direction ?? context?.direction ?? "up",
+		size: size ?? context?.size ?? "md"
+	};
+}
+const chartTrendVariants = cva("min-w-0", {
+	variants: {
+		orientation: {
+			horizontal: "flex flex-wrap items-center gap-2",
+			vertical: "flex flex-col items-start"
+		},
+		size: {
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	},
+	compoundVariants: [
+		{
+			orientation: "vertical",
+			size: "sm",
+			className: "gap-0.5"
+		},
+		{
+			orientation: "vertical",
+			size: "md",
+			className: "gap-1"
+		},
+		{
+			orientation: "vertical",
+			size: "lg",
+			className: "gap-1"
+		}
+	],
+	defaultVariants: {
+		orientation: "horizontal",
+		size: "md"
+	}
+});
+function ChartTrend({ className, direction = "up", orientation = "horizontal", size, ...props }) {
+	const resolvedSize = useComponentSize(size);
+	return /* @__PURE__ */ jsx(ChartTrendContext.Provider, {
+		value: {
+			direction,
+			size: resolvedSize
+		},
+		children: /* @__PURE__ */ jsx("p", {
+			"data-slot": "chart-trend",
+			"data-direction": direction,
+			"data-orientation": orientation,
+			className: cn(chartTrendVariants({
+				orientation,
+				size: resolvedSize
+			}), className),
+			...props
+		})
+	});
+}
+const chartTrendChipVariants = cva("inline-flex shrink-0 items-center rounded-full font-semibold leading-none", {
+	variants: {
+		direction: {
+			up: "bg-surface-brand-subtle text-status-success",
+			down: "bg-surface-danger-subtle text-status-danger"
+		},
+		size: {
+			sm: "gap-1 px-2 py-0.5 [&>svg]:size-2.5",
+			md: "gap-1 px-[9px] py-1 [&>svg]:size-3",
+			lg: "gap-1 px-2.5 py-1.5 [&>svg]:size-3.5"
+		}
+	},
+	defaultVariants: {
+		direction: "up",
+		size: "md"
+	}
+});
+function ChartTrendChip({ children, className, direction: directionProp, showIcon = true, size: sizeProp, ...props }) {
+	const { direction, size } = useChartTrend({
+		direction: directionProp,
+		size: sizeProp
+	});
+	const Icon = direction === "down" ? ArrowDown : ArrowUp;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "chart-trend-chip",
+		"data-direction": direction,
+		className: cn(chartTrendChipVariants({
+			direction,
+			size
+		}), className),
+		...props,
+		children: [showIcon ? /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			className: "shrink-0"
+		}) : null, children]
+	});
+}
+const chartTrendValueVariants = cva("font-semibold leading-none text-current", {
+	variants: { size: {
+		sm: "text-[11px]",
+		md: "text-[13px]",
+		lg: "text-[15px]"
+	} },
+	defaultVariants: { size: "md" }
+});
+function ChartTrendValue({ className, size: sizeProp, ...props }) {
+	const { size } = useChartTrend({ size: sizeProp });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "chart-trend-value",
+		className: cn(chartTrendValueVariants({ size }), className),
+		...props
+	});
+}
+const chartTrendCaptionVariants = cva("min-w-0 truncate font-normal leading-none text-fg-secondary", {
+	variants: { size: {
+		sm: "text-[11px]",
+		md: "text-xs",
+		lg: "text-[13px]"
+	} },
+	defaultVariants: { size: "md" }
+});
+function ChartTrendCaption({ className, size: sizeProp, ...props }) {
+	const { size } = useChartTrend({ size: sizeProp });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "chart-trend-caption",
+		className: cn(chartTrendCaptionVariants({ size }), className),
+		...props
+	});
+}
+function ChartFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-footer",
+		className: cn("mt-auto flex min-h-0 w-full flex-1 flex-col items-start justify-end", className),
+		...props
+	});
+}
 function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
 	const uniqueId = React.useId();
 	const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
@@ -120,7 +316,7 @@ function ChartContainer({ id, className, children, config, initialDimension = IN
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-slot": "chart",
 			"data-chart": chartId,
-			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-fg-caption-placeholder [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-line [&_.recharts-curve.recharts-tooltip-cursor]:stroke-line [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-line [&_.recharts-radial-bar-background-sector]:fill-surface-raised [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-surface-raised [&_.recharts-reference-line_[stroke='#ccc']]:stroke-line [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
 			...props,
 			children: [/* @__PURE__ */ jsx(ChartStyle, {
 				id: chartId,
@@ -195,7 +391,7 @@ function ChartTooltipContent({ active, payload, className, hideIndicator = false
 	const [item] = payload.filter((entry) => entry.type !== "none");
 	if (!item) return null;
 	const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey ?? item.name ?? item.dataKey ?? "value"}`);
-	const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_PLACEHOLDER;
+	const dotColor = color ?? item.payload?.fill ?? item.color ?? SERIES_COLOR_FALLBACK;
 	const metricLabel = itemConfig?.label ?? item.name;
 	const heroValue = formatter ? formatter(item.value, item.name ?? "", item, 0, item.payload) : formatChartValue(item.value, valueType);
 	const periodCaption = labelFormatter ? labelFormatter(label, payload) : (typeof label === "string" ? config[label]?.label : null) ?? label;
@@ -307,7 +503,7 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
 			const itemKey = `${item.dataKey ?? item.value ?? index}`;
 			const itemConfig = getPayloadConfigFromPayload(config, item, key);
 			const inactive = (inactiveSet?.has(key) ?? false) || Boolean(item.inactive);
-			const markerColor = inactive ? "var(--color-fg-caption-placeholder)" : item.color ?? SERIES_COLOR_PLACEHOLDER;
+			const markerColor = inactive ? "var(--color-fg-caption-placeholder)" : item.color ?? SERIES_COLOR_FALLBACK;
 			const content = /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				className: cn(chartLegendMarkerSizeVariants({
@@ -343,11 +539,12 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
 * or axis lines, a size-scaled tick font, and a reserved value-axis width) that
 * every bar and line chart would otherwise repeat per axis. Spread the result
 * onto the recharts axis, then add the chart-specific props (`dataKey`,
-* `domain`, `ticks`, a `width`/`type` override, …):
+* `domain`, `ticks`, a `width`/`type` override, …). Chart modules build their
+* per-size axis wrappers (`BarChartXAxis`, `LineChartXAxis`, …) on top of this:
 *
-*   const chart = useBarChartLayout();
-*   <XAxis dataKey="month" {...chart.xAxis} />
-*   <YAxis domain={[0, 120]} {...chart.yAxis} />
+*   const axes = cartesianAxisProps({ tickMargin: 8, tickFontSize: 11, yAxisWidth: 32 });
+*   <XAxis dataKey="month" {...axes.xAxis} />
+*   <YAxis domain={[0, 120]} {...axes.yAxis} />
 */
 function cartesianAxisProps(layout) {
 	const tick = { fontSize: layout.tickFontSize };
@@ -375,4 +572,4 @@ function getPayloadConfigFromPayload(config, payload, key) {
 	return configLabelKey in config ? config[configLabelKey] : config[key];
 }
 //#endregion
-export { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartLegend, ChartLegendContent, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, cartesianAxisProps };
+export { ChartCard, ChartContainer, ChartDescription, ChartFooter, ChartHeader, ChartLegend, ChartLegendContent, ChartMetric, ChartStyle, ChartTitle, ChartTooltip, ChartTooltipContent, ChartTrend, ChartTrendCaption, ChartTrendChip, ChartTrendValue, ChartValue, cartesianAxisProps };

package/dist/checkbox.js

@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
 //#region src/checkbox.tsx
-const checkboxVariants = cva("peer group/checkbox relative flex shrink-0 items-center justify-center rounded-sm border bg-canvas text-transparent outline-none transition-[background-color,border-color,box-shadow,color] after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 border-line data-unchecked:hover:border-line-focus data-unchecked:hover:bg-surface-brand-subtle data-checked:border-action-primary data-checked:bg-action-primary data-checked:text-fg-on-brand data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--checkbox-icon-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--checkbox-icon-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--checkbox-icon-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--checkbox-icon-size:0.875rem]", { variants: { size: {
+const checkboxVariants = cva("peer group/checkbox relative flex shrink-0 items-center justify-center rounded-sm border bg-canvas text-transparent outline-none transition-[background-color,border-color,box-shadow,color] after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] border-line data-unchecked:hover:border-line-focus data-unchecked:hover:bg-surface-brand-subtle data-checked:border-action-primary data-checked:bg-action-primary data-checked:text-fg-on-brand data-disabled:cursor-not-allowed data-disabled:border-line-subtle data-disabled:bg-surface data-disabled:text-fg-caption-placeholder size-5 [--checkbox-icon-size:0.75rem] group-data-[size=sm]/field:size-4 group-data-[size=sm]/field:[--checkbox-icon-size:0.625rem] group-data-[size=md]/field:size-5 group-data-[size=md]/field:[--checkbox-icon-size:0.75rem] group-data-[size=lg]/field:size-6 group-data-[size=lg]/field:[--checkbox-icon-size:0.875rem]", { variants: { size: {
 	sm: "size-4 [--checkbox-icon-size:0.625rem]",
 	md: "size-5 [--checkbox-icon-size:0.75rem]",
 	lg: "size-6 [--checkbox-icon-size:0.875rem]"

package/dist/data-table.d.ts

@@ -58,6 +58,8 @@ type DataTableFilterProps = Omit<FilterProps, "children"> & {
   popoverFooterProps?: React.ComponentProps<typeof PopoverFooter>;
   popoverHeaderProps?: React.ComponentProps<typeof PopoverHeader>;
   resetButtonProps?: FilterResetButtonProps;
+  /** Size of the default trigger button. Mirrors `Button`'s sizes. */
+  size?: React.ComponentProps<typeof Button>["size"];
   title?: React.ReactNode;
   trigger?: React.ReactElement;
   triggerButtonProps?: Omit<React.ComponentProps<typeof Button>, "children">;
@@ -65,7 +67,7 @@ type DataTableFilterProps = Omit<FilterProps, "children"> & {
   triggerHideCountWhenZero?: boolean;
   triggerLabel?: React.ReactNode;
 };
-declare function DataTableFilter({ applyButtonProps, children, closeOnApply, closeOnReset, contentProps, defaultJoin, defaultOpen, defaultValue, fields, footer, onApply, onOpenChange, open, popoverBodyProps, popoverContentProps, popoverFooterProps, popoverHeaderProps, resetButtonProps, title, trigger, triggerButtonProps, triggerCountClassName, triggerHideCountWhenZero, triggerLabel }: DataTableFilterProps): React.JSX.Element;
+declare function DataTableFilter({ applyButtonProps, children, closeOnApply, closeOnReset, contentProps, defaultJoin, defaultOpen, defaultValue, fields, footer, onApply, onOpenChange, open, popoverBodyProps, popoverContentProps, popoverFooterProps, popoverHeaderProps, resetButtonProps, size, title, trigger, triggerButtonProps, triggerCountClassName, triggerHideCountWhenZero, triggerLabel }: DataTableFilterProps): React.JSX.Element;
 type DataTableTableProps<TData> = Omit<React.ComponentProps<typeof Table$1>, "children"> & {
   emptyState?: React.ReactNode;
   interactiveColumnIds?: string[];
@@ -74,7 +76,7 @@ type DataTableTableProps<TData> = Omit<React.ComponentProps<typeof Table$1>, "ch
   onRowClick?: (row: Row<TData>) => void;
   table?: Table<TData>;
 };
-declare function DataTable<TData>({ containerClassName, emptyState, interactiveColumnIds, isLoading: isLoadingProp, loadingRowCount, onRowClick: onRowClickProp, table: tableProp, ...props }: DataTableTableProps<TData>): string | number | bigint | true | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined>;
+declare function DataTable<TData>({ className, containerClassName, emptyState, interactiveColumnIds, isLoading: isLoadingProp, loadingRowCount, onRowClick: onRowClickProp, table: tableProp, ...props }: DataTableTableProps<TData>): string | number | bigint | true | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined>;
 type DataTableCardGridProps<TData> = React.ComponentProps<"div"> & {
   actionsColumnId?: string;
   badgeColumnId?: string;
@@ -151,9 +153,11 @@ type DataTablePageSizeSelectProps<TData> = {
   /** Current page size. Overrides the table's pagination state when set. */
   pageSize?: number;
   pageSizeOptions?: number[];
+  /** Size of the trigger button. Mirrors `Button`'s sizes. */
+  size?: React.ComponentProps<typeof Button>["size"];
   table?: Table<TData>;
 };
-declare function DataTablePageSizeSelect<TData>({ className, label, onPageSizeChange, pageSize: pageSizeProp, pageSizeOptions, table: tableProp }: DataTablePageSizeSelectProps<TData>): React.JSX.Element;
+declare function DataTablePageSizeSelect<TData>({ className, label, onPageSizeChange, pageSize: pageSizeProp, pageSizeOptions, size, table: tableProp }: DataTablePageSizeSelectProps<TData>): React.JSX.Element;
 type DataTableEmptyStateProps = {
   action?: React.ReactNode;
   description?: React.ReactNode;

package/dist/data-table.js

@@ -141,7 +141,7 @@ function DataTableToolbar({ className, ...props }) {
 		...props
 	});
 }
-function DataTableFilter({ applyButtonProps, children, closeOnApply = true, closeOnReset = true, contentProps, defaultJoin, defaultOpen = false, defaultValue, fields, footer, onApply, onOpenChange, open, popoverBodyProps, popoverContentProps, popoverFooterProps, popoverHeaderProps, resetButtonProps, title = "Filter", trigger, triggerButtonProps, triggerCountClassName, triggerHideCountWhenZero, triggerLabel = "Filters" }) {
+function DataTableFilter({ applyButtonProps, children, closeOnApply = true, closeOnReset = true, contentProps, defaultJoin, defaultOpen = false, defaultValue, fields, footer, onApply, onOpenChange, open, popoverBodyProps, popoverContentProps, popoverFooterProps, popoverHeaderProps, resetButtonProps, size = "md", title = "Filter", trigger, triggerButtonProps, triggerCountClassName, triggerHideCountWhenZero, triggerLabel = "Filters" }) {
 	const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
 	const isOpenControlled = open !== void 0;
 	const resolvedOpen = open ?? internalOpen;
@@ -169,7 +169,7 @@ function DataTableFilter({ applyButtonProps, children, closeOnApply = true, clos
 				hideCountWhenZero: triggerHideCountWhenZero,
 				children: /* @__PURE__ */ jsx(PopoverTrigger, { render: trigger ?? /* @__PURE__ */ jsxs(Button, {
 					className: cn("group", triggerButtonClassName),
-					size: "sm",
+					size,
 					variant: "tertiary-outline",
 					...resolvedTriggerButtonProps,
 					children: [
@@ -218,7 +218,7 @@ function DataTableFilter({ applyButtonProps, children, closeOnApply = true, clos
 		})
 	});
 }
-function DataTable({ containerClassName, emptyState, interactiveColumnIds = [ACTIONS_COLUMN_ID, ROW_SELECT_COLUMN_ID], isLoading: isLoadingProp, loadingRowCount = DEFAULT_SKELETON_ROW_COUNT, onRowClick: onRowClickProp, table: tableProp, ...props }) {
+function DataTable({ className, containerClassName, emptyState, interactiveColumnIds = [ACTIONS_COLUMN_ID, ROW_SELECT_COLUMN_ID], isLoading: isLoadingProp, loadingRowCount = DEFAULT_SKELETON_ROW_COUNT, onRowClick: onRowClickProp, table: tableProp, ...props }) {
 	const context = useOptionalDataTableContext();
 	const table = tableProp ?? context?.table;
 	const isLoading = isLoadingProp ?? context?.isLoading;
@@ -229,6 +229,7 @@ function DataTable({ containerClassName, emptyState, interactiveColumnIds = [ACT
 	const skeletonRows = Array.from({ length: loadingRowCount }, (_, index) => index);
 	if (isEmpty && emptyState) return emptyState;
 	return /* @__PURE__ */ jsxs(Table$1, {
+		className: cn("table-fixed", className),
 		containerClassName: cn("max-h-[68vh] overflow-y-auto", containerClassName),
 		style: { width: table.getTotalSize() },
 		...props,
@@ -624,7 +625,7 @@ function range(start, end) {
 	if (length <= 0) return [];
 	return Array.from({ length }, (_, index) => start + index);
 }
-function DataTablePageSizeSelect({ className, label = (pageSize) => `Showing ${pageSize} entries`, onPageSizeChange, pageSize: pageSizeProp, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, table: tableProp }) {
+function DataTablePageSizeSelect({ className, label = (pageSize) => `Showing ${pageSize} entries`, onPageSizeChange, pageSize: pageSizeProp, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, size = "md", table: tableProp }) {
 	const context = useOptionalDataTableContext();
 	const table = tableProp ?? context?.table;
 	if (!(pageSizeProp !== void 0) && !table) throw new Error("DataTablePageSizeSelect requires either a table (prop or DataTable context) or the controlled `pageSize` prop.");
@@ -635,14 +636,16 @@ function DataTablePageSizeSelect({ className, label = (pageSize) => `Showing ${p
 		if (onPageSizeChange) onPageSizeChange(nextPageSize);
 		else table?.setPageSize(nextPageSize);
 	};
+	const selectSize = size === "sm" || size === "md" || size === "lg" ? size : void 0;
 	return /* @__PURE__ */ jsxs(Select, {
 		value: pageSize.toString(),
 		onValueChange: handleValueChange,
-		size: "sm",
+		size: selectSize,
 		children: [/* @__PURE__ */ jsx(SelectTrigger, {
 			unstyled: true,
 			render: /* @__PURE__ */ jsx(Button, {
 				variant: "tertiary-outline",
+				size,
 				className
 			}),
 			children: /* @__PURE__ */ jsx(SelectValue, { children: () => label(pageSize) })

package/dist/dialog-nesting.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+//#region src/dialog-nesting.d.ts
+declare function DialogNestingProvider({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+/** Depth of the current dialog (1 = top-level, 2+ = nested). */
+declare function useDialogNestingDepth(): number;
+//#endregion
+export { DialogNestingProvider, useDialogNestingDepth };

package/dist/dialog-nesting.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/dialog-nesting.tsx
+/**
+* Tracks how deep a Dialog/Sheet is nested. Sheet and Dialog share the same
+* Base UI primitive, so they share this one context too — a Dialog opened
+* inside a Sheet (or vice-versa) counts as nested.
+*
+* Depth is 0 outside any dialog, 1 for a top-level dialog, 2+ for nested ones.
+* Overlays use `depth > 1` to render lighter (so the parent shows through),
+* while the base overlay keeps the full page-hiding dim.
+*/
+const DialogNestingContext = createContext(0);
+function DialogNestingProvider({ children }) {
+	const depth = useContext(DialogNestingContext);
+	return /* @__PURE__ */ jsx(DialogNestingContext.Provider, {
+		value: depth + 1,
+		children
+	});
+}
+/** Depth of the current dialog (1 = top-level, 2+ = nested). */
+function useDialogNestingDepth() {
+	return useContext(DialogNestingContext);
+}
+//#endregion
+export { DialogNestingProvider, useDialogNestingDepth };

package/dist/dialog.js

@@ -2,16 +2,17 @@
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { Button } from "./button.js";
+import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
 import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/dialog.tsx
 function Dialog({ ...props }) {
-	return /* @__PURE__ */ jsx(Dialog$1.Root, {
+	return /* @__PURE__ */ jsx(DialogNestingProvider, { children: /* @__PURE__ */ jsx(Dialog$1.Root, {
 		"data-slot": "dialog",
 		...props
-	});
+	}) });
 }
 function DialogTrigger({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
@@ -32,13 +33,16 @@ function DialogClose({ ...props }) {
 	});
 }
 function DialogOverlay({ className, ...props }) {
+	const nested = useDialogNestingDepth() > 1;
 	return /* @__PURE__ */ jsx(Dialog$1.Backdrop, {
+		forceRender: true,
 		"data-slot": "dialog-overlay",
-		className: cn("fixed inset-0 z-50 bg-black/55 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100 supports-backdrop-filter:backdrop-blur-xl", className),
+		"data-nested": nested || void 0,
+		className: cn("fixed inset-0 z-50 transition-opacity duration-150 data-closed:opacity-0 data-open:opacity-100", nested ? "bg-black/25" : "bg-black/55 supports-backdrop-filter:backdrop-blur-xl", className),
 		...props
 	});
 }
-const dialogContentVariants = cva("group/dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-5rem)] w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow) outline-none [--dialog-padding:1.25rem] transition-[opacity,transform] duration-200 ease-in-out data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", {
+const dialogContentVariants = cva("group/dialog-content fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100dvh-5rem)] w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 overflow-visible rounded-2xl border border-line-subtle bg-surface-overlay bg-clip-padding p-(--dialog-padding) text-fg-primary shadow-(--elevation-e2-shadow) outline-none [--dialog-padding:1.25rem] transition-[opacity,transform] duration-200 ease-in-out data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 origin-center data-[nested-dialog-open]:scale-[0.96]", {
 	variants: { size: {
 		sm: "sm:w-90 sm:[--dialog-padding:1.5rem]",
 		md: "sm:w-105 sm:[--dialog-padding:1.5rem]",
@@ -78,7 +82,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
 				"data-slot": "dialog-close",
 				render: /* @__PURE__ */ jsxs(Button, {
 					variant: "tertiary",
-					className: "absolute -top-10 right-0 z-10",
+					className: "absolute -top-10 right-0 z-10 group-data-[nested-dialog-open]/dialog-content:hidden",
 					size: "icon-sm",
 					children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",

package/dist/file-upload.d.ts

@@ -0,0 +1,43 @@
+import { CircularProgressProps, ProgressProps } from "./progress.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/file-upload.d.ts
+type FileUploadState = "pending" | "uploading" | "complete" | "error";
+type FileUploadContextValue = {
+  state: FileUploadState;
+  value: number;
+};
+declare function useFileUpload(): FileUploadContextValue;
+type FileUploadProps = ComponentProps<"div"> & {
+  state?: FileUploadState;
+  value: number;
+};
+declare function FileUpload({ className, state, value, "aria-busy": ariaBusy, ...props }: FileUploadProps): import("react").JSX.Element;
+declare function FileUploadPreview({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadImage({ className, alt, ...props }: ComponentProps<"img">): import("react").JSX.Element;
+declare function FileUploadOverlay({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadPreviewAction({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadIcon({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+declare function FileUploadName({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+declare function FileUploadMeta({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+type FileUploadStatusProps = Omit<ComponentProps<"output">, "children"> & {
+  children?: ReactNode | ((context: FileUploadContextValue) => ReactNode);
+  pendingLabel?: ReactNode;
+  uploadingLabel?: ReactNode;
+  completeLabel?: ReactNode;
+  errorLabel?: ReactNode;
+};
+declare function FileUploadStatus({ className, children, pendingLabel, uploadingLabel, completeLabel, errorLabel, ...props }: FileUploadStatusProps): import("react").JSX.Element;
+type FileUploadProgressProps = Omit<ProgressProps, "value"> & {
+  showValue?: boolean;
+};
+declare function FileUploadProgress({ className, children, showValue, "aria-label": ariaLabel, ...props }: FileUploadProgressProps): import("react").JSX.Element;
+type FileUploadCircularProgressProps = Omit<CircularProgressProps, "value">;
+declare function FileUploadCircularProgress({ className, labelOverlay, "aria-label": ariaLabel, ...props }: FileUploadCircularProgressProps): import("react").JSX.Element;
+type FileUploadCancelProps = ComponentProps<"button"> & {
+  variant?: "ghost" | "surface";
+};
+declare function FileUploadCancel({ className, type, children, variant, "aria-label": ariaLabel, ...props }: FileUploadCancelProps): import("react").JSX.Element;
+//#endregion
+export { FileUpload, FileUploadCancel, type FileUploadCancelProps, FileUploadCircularProgress, type FileUploadCircularProgressProps, FileUploadContent, type FileUploadContextValue, FileUploadHeader, FileUploadIcon, FileUploadImage, FileUploadMeta, FileUploadName, FileUploadOverlay, FileUploadPreview, FileUploadPreviewAction, FileUploadProgress, type FileUploadProgressProps, type FileUploadProps, type FileUploadState, FileUploadStatus, type FileUploadStatusProps, useFileUpload };