@siyahi/ui 0.1.9-next.34 → 0.1.9-next.36

package/dist/components/registry/dashboardcn/kpi-row-card.js

@@ -1,18 +1,20 @@
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../ui/card.js";
 import { cn } from "../../../lib/utils.js";
+import { StaleNote } from "../../siyahi/stale-note.js";
 import { Delta } from "../../siyahi/delta.js";
 import { Sparkline } from "./sparkline.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 //#region src/components/registry/dashboardcn/kpi-row-card.tsx
 const COLUMNS = {
-	1: "basis-full",
-	2: "basis-full @2xs/strip:basis-1/2",
-	3: "basis-full @lg/strip:basis-1/3",
-	4: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4",
-	5: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/5",
-	6: "basis-full @2xs/strip:basis-1/2 @xl/strip:basis-1/3 @5xl/strip:basis-1/6",
-	8: "basis-full @2xs/strip:basis-1/2 @3xl/strip:basis-1/4 @7xl/strip:basis-1/8"
+	1: "",
+	2: "@2xs/strip:grid-cols-2",
+	3: "@lg/strip:grid-cols-3",
+	4: "@2xs/strip:grid-cols-2 @3xl/strip:grid-cols-4",
+	5: "@lg/strip:grid-cols-3 @3xl/strip:grid-cols-5",
+	6: "@2xs/strip:grid-cols-2 @xl/strip:grid-cols-3 @5xl/strip:grid-cols-6",
+	7: "@2xl/strip:grid-cols-4 @7xl/strip:grid-cols-7",
+	8: "@2xs/strip:grid-cols-2 @3xl/strip:grid-cols-4 @7xl/strip:grid-cols-8"
 };
 function trendColor(change) {
 	if (change === void 0) return "var(--chart-1)";
@@ -20,8 +22,8 @@ function trendColor(change) {
 	if (change < 0) return "var(--negative)";
 	return "var(--muted-foreground)";
 }
-/** A card holding a row of small figures, each with its change and a sparkline: more numbers in less room than stat tiles. */
-function MetricStrip({ title, description, action, items, footer, className, ...props }) {
+/** A row of figures, each with its change and recent run, optionally a picker that scopes the page. */
+function MetricStrip({ title, description, action, items, footer, selected, onSelect, className, ...props }) {
 	const columns = COLUMNS[Math.min(items.length, 8)] ?? COLUMNS[8];
 	return /* @__PURE__ */ jsxs(Card, {
 		className: cn("gap-4", className),
@@ -34,40 +36,55 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 			] }),
 			/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
 				"data-slot": "metric-strip",
-				className: "@container/strip -mx-4 -my-3 overflow-hidden",
+				className: "@container/strip",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "-me-px -mb-px flex flex-wrap",
+					className: cn("grid grid-cols-1 gap-x-6 gap-y-5", columns),
 					children: items.map((item) => /* @__PURE__ */ jsxs("div", {
 						"data-slot": "metric-strip-item",
 						"data-tone": item.tone,
-						className: cn("flex min-w-0 flex-col gap-1.5 border-e border-b px-4 py-4", columns),
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "truncate font-mono text-2xs tracking-wider text-muted-foreground uppercase",
-							children: item.label
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex flex-wrap items-end justify-between gap-x-3 gap-y-1",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "flex min-w-0 flex-col gap-0.5",
-								children: [/* @__PURE__ */ jsx("div", {
-									className: "text-xl font-semibold tracking-tight tabular-nums",
-									children: item.value
-								}), (item.change !== void 0 || item.note) && /* @__PURE__ */ jsxs("div", {
-									className: "flex flex-wrap items-center gap-x-1.5 text-xs",
-									children: [item.change !== void 0 && /* @__PURE__ */ jsx(Delta, {
+						"data-stale": item.stale ? "" : void 0,
+						"data-picked": onSelect && item.label === selected ? "" : void 0,
+						className: cn("relative row-span-4 grid min-w-0 grid-rows-subgrid gap-y-1", onSelect && item.disabled && "opacity-60"),
+						children: [
+							onSelect && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": item.label,
+								"aria-pressed": item.label === selected,
+								disabled: item.disabled,
+								onClick: () => onSelect(item.label),
+								className: "absolute -inset-2 z-10 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-slot": "metric-strip-label",
+								className: "font-mono text-2xs tracking-wider break-words text-muted-foreground uppercase",
+								children: item.label
+							}),
+							/* @__PURE__ */ jsx("div", {
+								"data-slot": "metric-strip-value",
+								className: "text-xl font-semibold tracking-tight tabular-nums",
+								children: item.value
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-wrap items-center gap-x-1.5 gap-y-1 self-start text-xs",
+								children: [
+									item.change !== void 0 && /* @__PURE__ */ jsx(Delta, {
 										value: item.change,
 										format: item.changeFormat
-									}), item.note && /* @__PURE__ */ jsx("span", {
+									}),
+									item.note && /* @__PURE__ */ jsx("span", {
 										className: "text-muted-foreground",
 										children: item.note
-									})]
-								})]
-							}), item.trend && item.trend.length > 1 && /* @__PURE__ */ jsx(Sparkline, {
+									}),
+									item.stale && /* @__PURE__ */ jsx(StaleNote, { since: item.stale })
+								]
+							}),
+							item.trend && item.trend.length > 1 ? /* @__PURE__ */ jsx(Sparkline, {
 								data: item.trend,
 								variant: "line",
 								color: trendColor(item.change),
-								className: "h-9 w-20 shrink-0"
-							})]
-						})]
+								className: "mt-1 h-8 w-full"
+							}) : /* @__PURE__ */ jsx("div", {})
+						]
 					}, item.label))
 				})
 			}) }),

package/dist/components/registry/niko-table/core/data-table-error-boundary.js

@@ -1,6 +1,6 @@
 "use client";
-import { Alert, AlertDescription, AlertTitle } from "../../../ui/alert.js";
 import { Button } from "../../../ui/button.js";
+import { Alert, AlertDescription, AlertTitle } from "../../../ui/alert.js";
 import { AlertCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";

package/dist/components/registry/niko-table/filters/table-faceted-filter.js

@@ -1,8 +1,8 @@
 "use client";
-import { Badge } from "../../../ui/badge.js";
 import { Button } from "../../../ui/button.js";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../../ui/command.js";
+import { Badge } from "../../../ui/badge.js";
 import { Separator } from "../../../ui/separator.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../../ui/command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../../ui/popover.js";
 import { cn } from "../../../../lib/utils.js";
 import { FILTER_OPERATORS, FILTER_VARIANTS, JOIN_OPERATORS } from "../lib/constants.js";

package/dist/components/siyahi/panel-grid.d.ts

@@ -9,18 +9,17 @@ declare const COLUMNS: {
 export interface PanelGridProps {
   /**
    * Blocks across from a 42rem grid, so three short ones fit a reading column (an article's 55rem); 4 goes two across
-   * there and four from 64rem. Below 42rem they sit one under another.
+   * there and four from 64rem. Below 42rem they sit one under another. From 140rem a grid of 2 takes a third across,
+   * and from 180rem a grid of 2 or 3 a fourth, when it holds that many blocks; 1 stays one.
    */
   columns?: keyof typeof COLUMNS | undefined;
   children: ReactNode;
   className?: string | undefined;
 }
 /**
- * Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface, the default, the grid is filled
- * with the card colour and a hairline parts the blocks across and down, with a rule above and below the grid and none
- * on its sides; open leaves whitespace between them, and card an 8px gap between boxes. Each block's bottom and end
- * edges carry its rules and the grid clips the ones on its own edges, so an empty cell at the end of a short last row
- * is a blank stretch of the sheet, ruled off like the rest. The theme numbers each block's card title 01, 02.
+ * Data blocks side by side: chart cards, tables, a MetricStrip. On an open surface, the default, space parts the
+ * blocks: 24px across and 16px down, no box and no rule. A card surface sets them 8px apart, each in its own box. The
+ * theme numbers each block's card title 01, 02.
  */
 export declare function PanelGrid({ columns, children, className }: PanelGridProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/panel-grid.js

@@ -9,25 +9,26 @@ const COLUMNS = {
 	3: "@2xl/panels:grid-cols-3",
 	4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4"
 };
+const WIDE_THREE = "@min-[140rem]/panels:grid-cols-3";
+const WIDE_FOUR = "@min-[180rem]/panels:grid-cols-4";
 /**
-* Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface, the default, the grid is filled
-* with the card colour and a hairline parts the blocks across and down, with a rule above and below the grid and none
-* on its sides; open leaves whitespace between them, and card an 8px gap between boxes. Each block's bottom and end
-* edges carry its rules and the grid clips the ones on its own edges, so an empty cell at the end of a short last row
-* is a blank stretch of the sheet, ruled off like the rest. The theme numbers each block's card title 01, 02.
+* Data blocks side by side: chart cards, tables, a MetricStrip. On an open surface, the default, space parts the
+* blocks: 24px across and 16px down, no box and no rule. A card surface sets them 8px apart, each in its own box. The
+* theme numbers each block's card title 01, 02.
 */
 function PanelGrid({ columns = 2, children, className }) {
 	const surface = useSurface();
-	const ruled = surface === "ruled";
+	const blocks = Children.toArray(children).length;
+	const wide = cn(columns === 2 && blocks >= 3 && WIDE_THREE, (columns === 2 || columns === 3) && blocks >= 4 && WIDE_FOUR);
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "panel-grid",
 		"data-surface": surface,
-		className: cn("@container/panels", ruled && "overflow-clip border-y", className),
+		className: cn("@container/panels", className),
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-me-px -mb-px bg-card" : surface === "open" ? "gap-x-8 gap-y-6" : "gap-2"),
+			className: cn("grid grid-cols-1", COLUMNS[columns], wide, surface === "open" ? "gap-x-6 gap-y-4" : "gap-2"),
 			children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
 				"data-slot": "panel",
-				className: cn("min-w-0", ruled && "border-e border-b"),
+				className: "min-w-0",
 				children: child
 			}))
 		})

package/dist/components/siyahi/scatter-chart.d.ts

@@ -25,8 +25,8 @@ export interface ScatterChartCardProps<T extends ScatterPoint> {
   action?: ReactNode;
   /** Most important first: earlier points take the labels. */
   points: T[];
-  /** Height of the plot, in pixels. */
-  height: number;
+  /** Height of the plot, in pixels. Left out, it follows the plot's width (fittedChartHeight). */
+  height?: number | undefined;
   /** What the x axis measures, under it, such as "Share of sales". */
   xLabel: string;
   /** What the y axis measures, beside it, such as "Growth on last year". */
@@ -64,6 +64,6 @@ export interface ScatterChartCardProps<T extends ScatterPoint> {
   sizeFormatter?: ((value: number) => string) | undefined;
 }
 /** Two measures per item as dots, such as size against growth, with the leading names beside their dots. */
-export declare function ScatterChartCard<T extends ScatterPoint>({ title, description, action, points, height, xLabel, yLabel, xScale, xScaleToggle, yScale, yScaleToggle, xFormatter, yFormatter, labels, details, selected, onSelect, footer, quadrants, sizeLabel, sizeFormatter }: ScatterChartCardProps<T>): import("react").JSX.Element;
+export declare function ScatterChartCard<T extends ScatterPoint>({ title, description, action, points, height: fixedHeight, xLabel, yLabel, xScale, xScaleToggle, yScale, yScaleToggle, xFormatter, yFormatter, labels, details, selected, onSelect, footer, quadrants, sizeLabel, sizeFormatter }: ScatterChartCardProps<T>): import("react").JSX.Element;
 //#endregion
 export type { ScatterQuadrants };

package/dist/components/siyahi/scatter-chart.js

@@ -2,7 +2,9 @@ import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader,
 import { ChartContainer } from "../ui/chart.js";
 import { LOG_BLOCKED, useAxisScale } from "./scale-toggle.js";
 import { useLocale } from "./siyahi-provider.js";
+import { fittedChartHeight } from "../../lib/chart-series.js";
 import { fitsLog, ticksFor } from "../../lib/ticks.js";
+import { useElementWidth } from "../../lib/use-element-width.js";
 import { fontLoads, useRenderWhenFontsLoad } from "../../lib/use-render-when-fonts-load.js";
 import { corners, dotSizes, placeLabels, quadrantSplit } from "../../lib/scatter.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -19,9 +21,10 @@ const AXIS_TITLE = "fill-muted-foreground text-xs";
 const keyOf = (point) => point.key ?? point.name;
 const MONO_WIDTH = 7.2;
 /** Two measures per item as dots, such as size against growth, with the leading names beside their dots. */
-function ScatterChartCard({ title, description, action, points, height, xLabel, yLabel, xScale = "linear", xScaleToggle = false, yScale = "linear", yScaleToggle = false, xFormatter, yFormatter, labels = 12, details, selected = null, onSelect, footer, quadrants, sizeLabel = "Size", sizeFormatter }) {
+function ScatterChartCard({ title, description, action, points, height: fixedHeight, xLabel, yLabel, xScale = "linear", xScaleToggle = false, yScale = "linear", yScaleToggle = false, xFormatter, yFormatter, labels = 12, details, selected = null, onSelect, footer, quadrants, sizeLabel = "Size", sizeFormatter }) {
 	const { numberLocale } = useLocale();
-	const plotRef = useRef(null);
+	const [plotRef, plotWidth] = useElementWidth();
+	const height = fixedHeight ?? fittedChartHeight(plotWidth);
 	const [focusedKey, setFocusedKey] = useState(null);
 	const keyed = useRef(null);
 	useEffect(() => {
@@ -245,7 +248,7 @@ function PointTooltip({ active, payload, details }) {
 	const point = active ? payload?.[0]?.payload : void 0;
 	if (!point) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "grid min-w-32 gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+		className: "grid min-w-32 gap-1.5 border border-border bg-background px-2.5 py-1.5 text-xs",
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "font-medium",
 			children: point.name

package/dist/components/siyahi/siyahi-provider.d.ts

@@ -3,18 +3,17 @@ import { SiyahiLocale } from "../../lib/locale.js";
 import { ReactNode } from "react";
 //#region src/components/siyahi/siyahi-provider.d.ts
 /**
- * How a data block sits on the page. "ruled", the default: blocks filled with the card colour and parted by hairlines,
- * with a rule above and below each group and none on its sides. "card": a filled square card in a hairline ring, 8px
- * from the next, for a page of separate blocks. "open": no fill and no lines, the block's content level with the
- * page's text.
+ * How a data block sits on the page. "open", the default: no fill, no lines and no padding, the block's content level
+ * with the page's text and parted from the next by space. "card": a filled square card in a hairline ring, 8px from
+ * the next, for a page of separate blocks.
  */
-export type Surface = "ruled" | "card" | "open";
+export type Surface = "open" | "card";
 export interface SiyahiProviderProps {
   /** Any setting left out keeps its default: en-IN, INR, Asia/Kolkata. */
   locale?: Optional<SiyahiLocale> | undefined;
   /**
    * Set it on a nested provider for one part of a page. Left out, a provider keeps the surface around it, so a
-   * provider that only changes the locale changes nothing else; the outermost default is "ruled".
+   * provider that only changes the locale changes nothing else; the outermost default is "open".
    */
   surface?: Surface | undefined;
   children: ReactNode;

package/dist/components/siyahi/siyahi-provider.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, use, useMemo } from "react";
 //#region src/components/siyahi/siyahi-provider.tsx
 const LocaleContext = createContext(defaultLocale);
-const SurfaceContext = createContext("ruled");
+const SurfaceContext = createContext("open");
 /** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
 function SiyahiProvider({ locale, surface, children }) {
 	const { numberLocale = defaultLocale.numberLocale, currency = defaultLocale.currency, timeZone = defaultLocale.timeZone } = locale ?? {};

package/dist/components/siyahi/status-badge.js

@@ -16,6 +16,7 @@ function StatusBadge({ tone = "neutral", className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
+			"data-slot": "status-dot",
 			className: cn("size-1.5 rounded-full", TONES[tone].dot)
 		}), children]
 	});

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/components/ui/alert-dialog.d.ts
+declare function AlertDialog({ ...props }: AlertDialog$1.Root.Props): React$1.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialog$1.Trigger.Props): React$1.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialog$1.Portal.Props): React$1.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialog$1.Backdrop.Props): React$1.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialog$1.Popup.Props & {
+  size?: "default" | "sm";
+}): React$1.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Title>): React$1.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React$1.ComponentProps<typeof AlertDialog$1.Description>): React$1.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialog$1.Close.Props & Pick<React$1.ComponentProps<typeof Button>, "variant" | "size">): React$1.JSX.Element;
+//#endregion
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,94 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/components/ui/alert-dialog.tsx
+function AlertDialog({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+}
+function AlertDialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+}
+function AlertDialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+		...props
+	});
+}
+function AlertDialogContent({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm 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", className),
+		...props
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function AlertDialogMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-media",
+		className: cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+}
+function AlertDialogAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-dialog-action",
+		className: cn(className),
+		...props
+	});
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		"data-slot": "alert-dialog-cancel",
+		className: cn(className),
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size
+		}),
+		...props
+	});
+}
+//#endregion
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/ui/aspect-ratio.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/ui/aspect-ratio.d.ts
+declare function AspectRatio({ ratio, className, ...props }: React.ComponentProps<"div"> & {
+  ratio: number;
+}): import("react").JSX.Element;
+//#endregion
+export { AspectRatio };

package/dist/components/ui/aspect-ratio.js

@@ -0,0 +1,13 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/aspect-ratio.tsx
+function AspectRatio({ ratio, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "aspect-ratio",
+		style: { "--ratio": ratio },
+		className: cn("relative aspect-(--ratio)", className),
+		...props
+	});
+}
+//#endregion
+export { AspectRatio };

package/dist/components/ui/attachment.d.ts

@@ -0,0 +1,25 @@
+import { Button } from "./button.js";
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/attachment.d.ts
+declare const attachmentVariants: (props?: ({
+  size?: "default" | "sm" | "xs" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Attachment({ className, state, size, orientation, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
+  state?: "idle" | "uploading" | "processing" | "error" | "done";
+}): React$1.JSX.Element;
+declare const attachmentMediaVariants: (props?: ({
+  variant?: "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function AttachmentMedia({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React$1.JSX.Element;
+declare function AttachmentContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function AttachmentActions({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AttachmentAction({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+declare function AttachmentTrigger({ className, render, type, ...props }: useRender.ComponentProps<"button">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function AttachmentGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };

package/dist/components/ui/attachment.js

@@ -0,0 +1,104 @@
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/attachment.tsx
+const attachmentVariants = cva("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed", { variants: {
+	size: {
+		default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+		sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+		xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+	},
+	orientation: {
+		horizontal: "min-w-40 items-center",
+		vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+	}
+} });
+function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment",
+		"data-state": state,
+		"data-size": size,
+		"data-orientation": orientation,
+		className: cn(attachmentVariants({
+			size,
+			orientation
+		}), className),
+		...props
+	});
+}
+const attachmentMediaVariants = cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+	variants: { variant: {
+		icon: "",
+		image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+	} },
+	defaultVariants: { variant: "icon" }
+});
+function AttachmentMedia({ className, variant = "icon", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-media",
+		"data-variant": variant,
+		className: cn(attachmentMediaVariants({ variant }), className),
+		...props
+	});
+}
+function AttachmentContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-content",
+		className: cn("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className),
+		...props
+	});
+}
+function AttachmentTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-title",
+		className: cn("block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer", className),
+		...props
+	});
+}
+function AttachmentDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-description",
+		className: cn("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80", "max-w-full", className),
+		...props
+	});
+}
+function AttachmentActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-actions",
+		className: cn("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", className),
+		...props
+	});
+}
+function AttachmentAction({ className, variant, size = "icon-xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "attachment-action",
+		variant: variant ?? "ghost",
+		size,
+		className: cn(className),
+		...props
+	});
+}
+function AttachmentTrigger({ className, render, type, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			type: render ? type : type ?? "button",
+			className: cn("absolute inset-0 z-10 outline-none", className)
+		}, props),
+		render,
+		state: { slot: "attachment-trigger" }
+	});
+}
+function AttachmentGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-group",
+		className: cn("flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className),
+		...props
+	});
+}
+//#endregion
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };

package/dist/components/ui/bubble.d.ts

@@ -0,0 +1,18 @@
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/bubble.d.ts
+declare function BubbleGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare const bubbleVariants: (props?: ({
+  variant?: "default" | "destructive" | "ghost" | "muted" | "outline" | "secondary" | "tinted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Bubble({ variant, align, className, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
+  align?: "start" | "end";
+}): React$1.JSX.Element;
+declare function BubbleContent({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function BubbleReactions({ side, align, className, ...props }: React$1.ComponentProps<"div"> & {
+  align?: "start" | "end";
+  side?: "top" | "bottom";
+}): React$1.JSX.Element;
+//#endregion
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };