@siyahi/ui 0.1.8-next.4 → 0.1.9-next.10

package/dist/components/siyahi/data-bar.js

@@ -0,0 +1,29 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/data-bar.tsx
+/**
+* A table cell's figure behind a short bar whose length is the figure's share of max, so a column reads as a chart.
+* The bar has a fixed width, so every row draws to the same scale, and sits on the figure's line, so the row
+* keeps its height.
+*/
+function DataBar({ value, max, tone = "chart", children, className }) {
+	const share = max > 0 ? Math.min(1, Math.abs(value) / max) : 0;
+	const fill = tone === "chart" ? "bg-chart-1" : value < 0 ? "bg-negative" : "bg-positive";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-bar",
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "h-1.5 w-16 shrink-0 overflow-hidden rounded-full bg-muted",
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("h-full rounded-full", fill),
+				style: { width: `${share * 100}%` }
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children
+		})]
+	});
+}
+//#endregion
+export { DataBar };

package/dist/components/siyahi/data-list.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/data-list.d.ts
+/** Label and value pairs, such as a record's fields in a card. */
+export declare function DataList({ className, children }: {
+  className?: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+export interface DataListItemProps {
+  /** A short muted label; may hold a badge beside the words. */
+  label: ReactNode;
+  children: ReactNode;
+}
+export declare function DataListItem({ label, children }: DataListItemProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/data-list.js

@@ -0,0 +1,25 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/data-list.tsx
+/** Label and value pairs, such as a record's fields in a card. */
+function DataList({ className, children }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: cn("flex flex-col gap-4", className),
+		children
+	});
+}
+function DataListItem({ label, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "data-list-item",
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ jsx("dt", {
+			className: "flex items-center gap-2 text-xs font-medium text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("dd", {
+			className: "min-w-0",
+			children
+		})]
+	});
+}
+//#endregion
+export { DataList, DataListItem };

package/dist/components/siyahi/data-table-row-count.d.ts

@@ -0,0 +1,11 @@
+import { RowData } from "@tanstack/react-table";
+//#region src/components/siyahi/data-table-row-count.d.ts
+export interface DataTableRowCountProps {
+  /** What a row is, plural: "positions" prints "48 positions" while nothing is filtered. */
+  unit: string;
+  /** Rows before any filter. Defaults to the table's data; pass it when the page narrowed the data before the table. */
+  total?: number;
+}
+/** How many rows the filters leave: "12 of 48", or "48 positions" when they leave all. For a table toolbar, at its end. */
+export declare function DataTableRowCount<TData extends RowData>({ unit, total }: DataTableRowCountProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/data-table-row-count.js

@@ -0,0 +1,18 @@
+import { useFormat } from "../../lib/format.js";
+import { useDataTable } from "../registry/niko-table/core/data-table-context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/data-table-row-count.tsx
+/** How many rows the filters leave: "12 of 48", or "48 positions" when they leave all. For a table toolbar, at its end. */
+function DataTableRowCount({ unit, total }) {
+	const { table } = useDataTable();
+	const { count } = useFormat();
+	const all = total ?? table.getCoreRowModel().rows.length;
+	const shown = table.getFilteredRowModel().rows.length;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "data-table-row-count",
+		className: "ml-auto text-sm text-muted-foreground tabular-nums",
+		children: shown === all ? `${count(all)} ${unit}` : `${count(shown)} of ${count(all)}`
+	});
+}
+//#endregion
+export { DataTableRowCount };

package/dist/components/siyahi/data-table-sort-header.d.ts

@@ -0,0 +1,15 @@
+import { RowData } from "@tanstack/react-table";
+//#region src/components/siyahi/data-table-sort-header.d.ts
+/**
+ * A column header that sorts on one click, largest (or Z) first, as shadcn's
+ * data table guide draws it: a ghost button with the direction's arrow. The
+ * column menu takes two clicks for the same. Use it as a column's `header`:
+ * `header: () => <DataTableSortHeader />`; the title defaults to `meta.label`.
+ */
+export declare function DataTableSortHeader<TData extends RowData>({ title }: {
+  title?: string;
+}): import("react").JSX.Element;
+export declare namespace DataTableSortHeader {
+  var displayName: string;
+}
+//#endregion

package/dist/components/siyahi/data-table-sort-header.js

@@ -0,0 +1,36 @@
+import { Button } from "../ui/button.js";
+import { DataTableColumnHeader, useColumnHeaderContext } from "../registry/niko-table/components/data-table-column-header.js";
+import { useDerivedColumnTitle } from "../registry/niko-table/hooks/use-derived-column-title.js";
+import { registerComponentFeatures } from "../registry/niko-table/config/feature-detection.js";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/data-table-sort-header.tsx
+/**
+* A column header that sorts on one click, largest (or Z) first, as shadcn's
+* data table guide draws it: a ghost button with the direction's arrow. The
+* column menu takes two clicks for the same. Use it as a column's `header`:
+* `header: () => <DataTableSortHeader />`; the title defaults to `meta.label`.
+*/
+function DataTableSortHeader({ title }) {
+	const { column } = useColumnHeaderContext(true);
+	const label = useDerivedColumnTitle(column, column.id, title);
+	const sorted = column.getIsSorted();
+	return /* @__PURE__ */ jsx(DataTableColumnHeader, { children: /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "sm",
+		className: "-ml-2",
+		onClick: () => column.toggleSorting(sorted !== "desc"),
+		children: [
+			label,
+			/* @__PURE__ */ jsx(sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon, { "aria-hidden": "true" }),
+			sorted && /* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [", sorted ", sorted === "asc" ? "ascending" : "descending"]
+			})
+		]
+	}) });
+}
+DataTableSortHeader.displayName = "DataTableSortHeader";
+registerComponentFeatures(DataTableSortHeader.displayName, { enableSorting: true });
+//#endregion
+export { DataTableSortHeader };

package/dist/components/siyahi/inline-code.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/inline-code.d.ts
+/** A command, file name or identifier inside prose, in Geist Mono on a muted chip, at the size of the text around it. */
+export declare function InlineCode({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/inline-code.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/inline-code.tsx
+/** A command, file name or identifier inside prose, in Geist Mono on a muted chip, at the size of the text around it. */
+function InlineCode({ children }) {
+	return /* @__PURE__ */ jsx("code", {
+		className: "rounded-sm bg-muted px-1 font-mono",
+		children
+	});
+}
+//#endregion
+export { InlineCode };

package/dist/components/siyahi/page-section.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/page-section.d.ts
+export interface PageSectionProps {
+  /** Anchor for a table of contents; the section scrolls in with room above it. */
+  id?: string;
+  /** Small muted line above the title, such as "Part 2". */
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  /** Muted prose under the title: a sentence, or several paragraphs as elements. */
+  lead?: ReactNode;
+  /** A control for the whole section, such as a copy or mode toggle; it sits right, beside the heading. */
+  action?: ReactNode;
+  children?: ReactNode;
+}
+/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+export declare function PageSection({ id, eyebrow, title, lead, action, children }: PageSectionProps): import("react").JSX.Element;
+/** A heading inside a PageSection, one level under its title. */
+export declare function PageSubheading({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/page-section.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/page-section.tsx
+/** One part of a long page: a rule above, then the heading and lead on the canvas, then its content. */
+function PageSection({ id, eyebrow, title, lead, action, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		"data-slot": "page-section",
+		className: "flex scroll-mt-6 flex-col gap-6 border-t pt-10",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-end justify-between gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [
+					eyebrow && /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: eyebrow
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: title
+					}),
+					lead && /* @__PURE__ */ jsx("div", {
+						className: "flex max-w-prose flex-col gap-2 text-muted-foreground",
+						children: lead
+					})
+				]
+			}), action]
+		}), children]
+	});
+}
+/** A heading inside a PageSection, one level under its title. */
+function PageSubheading({ children }) {
+	return /* @__PURE__ */ jsx("h3", {
+		className: "text-lg font-semibold tracking-tight",
+		children
+	});
+}
+//#endregion
+export { PageSection, PageSubheading };

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

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+//#region src/components/siyahi/panel-grid.d.ts
+declare const COLUMNS: {
+  readonly 1: "";
+  readonly 2: "@2xl/panels:grid-cols-2";
+  readonly 3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3";
+  readonly 4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4";
+};
+export interface PanelGridProps {
+  /** Blocks across on a wide page; two on a medium one, and one on a phone. */
+  columns?: keyof typeof COLUMNS;
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface a hairline parts them across and
+ * down, with a rule above and below the grid; open leaves whitespace between them, and card a gap between boxes.
+ * Each block's left and top edges carry its rules, and the grid clips the ones on its own edges.
+ */
+export declare function PanelGrid({ columns, children, className }: PanelGridProps): import("react").JSX.Element;
+//#endregion
+export {};

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

@@ -0,0 +1,34 @@
+import { useSurface } from "./siyahi-provider.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Children } from "react";
+//#region src/components/siyahi/panel-grid.tsx
+const COLUMNS = {
+	1: "",
+	2: "@2xl/panels:grid-cols-2",
+	3: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-3",
+	4: "@2xl/panels:grid-cols-2 @5xl/panels:grid-cols-4"
+};
+/**
+* Data blocks side by side: chart cards, tables, a MetricStrip. On a ruled surface a hairline parts them across and
+* down, with a rule above and below the grid; open leaves whitespace between them, and card a gap between boxes.
+* Each block's left and top edges carry its rules, and the grid clips the ones on its own edges.
+*/
+function PanelGrid({ columns = 2, children, className }) {
+	const surface = useSurface();
+	const ruled = surface === "ruled";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "panel-grid",
+		className: cn("@container/panels", ruled && "overflow-hidden border-y", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("grid grid-cols-1", COLUMNS[columns], ruled ? "-mt-px -ml-px" : surface === "open" ? "gap-x-10 gap-y-8" : "gap-4"),
+			children: Children.map(children, (child) => /* @__PURE__ */ jsx("div", {
+				"data-slot": "panel",
+				className: cn("min-w-0", ruled && "border-t border-l"),
+				children: child
+			}))
+		})
+	});
+}
+//#endregion
+export { PanelGrid };

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

@@ -1,12 +1,23 @@
 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": no box, hairlines between blocks in a PanelGrid. "open": no box and no
+ * lines, the block's content level with the page's text. "card": shadcn's own card, a filled box with a 1px ring.
+ */
+export type Surface = "ruled" | "open" | "card";
 export interface SiyahiProviderProps {
   /** Any setting left out keeps its default: en-IN, INR, Asia/Kolkata. */
   locale?: Partial<SiyahiLocale>;
+  /**
+   * 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".
+   */
+  surface?: Surface;
   children: ReactNode;
 }
-/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
-export declare function SiyahiProvider({ locale, children }: SiyahiProviderProps): import("react").JSX.Element;
+/** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
+export declare function SiyahiProvider({ locale, surface, children }: SiyahiProviderProps): import("react").JSX.Element;
 export declare function useLocale(): SiyahiLocale;
+export declare function useSurface(): Surface;
 //#endregion

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

@@ -4,8 +4,9 @@ import { jsx } from "react/jsx-runtime";
 import { createContext, use, useMemo } from "react";
 //#region src/components/siyahi/siyahi-provider.tsx
 const LocaleContext = createContext(defaultLocale);
-/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
-function SiyahiProvider({ locale, children }) {
+const SurfaceContext = createContext("ruled");
+/** Wrap the app once. Carries the locale, the surface and the tooltip provider shadcn asks for. */
+function SiyahiProvider({ locale, surface, children }) {
 	const { numberLocale, currency, timeZone } = {
 		...defaultLocale,
 		...locale
@@ -19,13 +20,25 @@ function SiyahiProvider({ locale, children }) {
 		currency,
 		timeZone
 	]);
+	const around = use(SurfaceContext);
 	return /* @__PURE__ */ jsx(LocaleContext, {
 		value,
-		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
+		children: /* @__PURE__ */ jsx(SurfaceContext, {
+			value: surface ?? around,
+			children: /* @__PURE__ */ jsx(TooltipProvider, { children: surface ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "siyahi-provider",
+				"data-surface": surface,
+				className: "contents",
+				children
+			}) : children })
+		})
 	});
 }
 function useLocale() {
 	return use(LocaleContext);
 }
+function useSurface() {
+	return use(SurfaceContext);
+}
 //#endregion
-export { SiyahiProvider, useLocale };
+export { SiyahiProvider, useLocale, useSurface };

package/dist/components/siyahi/tone-progress.d.ts

@@ -0,0 +1,15 @@
+import { Progress } from "../ui/progress.js";
+import { ComponentProps } from "react";
+//#region src/components/siyahi/tone-progress.d.ts
+declare const TONE: {
+  readonly positive: "**:data-[slot=progress-indicator]:bg-positive";
+  readonly negative: "**:data-[slot=progress-indicator]:bg-negative";
+};
+export interface ToneProgressProps extends ComponentProps<typeof Progress> {
+  /** The meaning colour of the bar: a gain's share in --positive, a loss's in --negative. */
+  tone: keyof typeof TONE;
+}
+/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+export declare function ToneProgress({ tone, className, ...props }: ToneProgressProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/components/siyahi/tone-progress.js

@@ -0,0 +1,18 @@
+import { Progress } from "../ui/progress.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/tone-progress.tsx
+const TONE = {
+	positive: "**:data-[slot=progress-indicator]:bg-positive",
+	negative: "**:data-[slot=progress-indicator]:bg-negative"
+};
+/** shadcn's Progress with its bar in a meaning colour, such as each position's share of the booked P&L. */
+function ToneProgress({ tone, className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress, {
+		"data-tone": tone,
+		className: cn(TONE[tone], className),
+		...props
+	});
+}
+//#endregion
+export { ToneProgress };

package/dist/components/siyahi/treemap.d.ts

@@ -28,4 +28,11 @@ export interface TreemapProps<T extends TreemapItem> {
 }
 /** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 export declare function Treemap<T extends TreemapItem>({ items, height, range, onHover, selected, onSelect }: TreemapProps<T>): import("react").JSX.Element;
+export interface TreemapLegendProps {
+  /** The Treemap's own range, so each swatch matches its tiles. */
+  range?: number;
+  className?: string;
+}
+/** The Treemap's colour scale under the map: five steps of loss, no change, five steps of gain, deepest at the ends. */
+export declare function TreemapLegend({ range, className }: TreemapLegendProps): import("react").JSX.Element;
 //#endregion

package/dist/components/siyahi/treemap.js

@@ -1,5 +1,6 @@
 import { useFormat } from "../../lib/format.js";
-import { heat, layout } from "../../lib/treemap.js";
+import { heat, heatFill, heatRange, layout } from "../../lib/treemap.js";
+import { cn } from "cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
 //#region src/components/siyahi/treemap.tsx
@@ -96,5 +97,71 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		})
 	});
 }
+function Swatch({ label, fill }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-slot": "treemap-legend-swatch",
+		className: "h-3 flex-1",
+		children: [/* @__PURE__ */ jsx("title", { children: label }), /* @__PURE__ */ jsx("rect", {
+			width: "100%",
+			height: "100%",
+			rx: 2,
+			style: { fill }
+		})]
+	});
+}
+/** The Treemap's colour scale under the map: five steps of loss, no change, five steps of gain, deepest at the ends. */
+function TreemapLegend({ range, className }) {
+	const { pct } = useFormat();
+	const step = heatRange(range) / 5;
+	const digits = Number.isInteger(Math.round(step * 1e6) / 1e4) ? 0 : 1;
+	const over = pct(step * 4, digits);
+	const swatch = (side, n) => {
+		const word = side === "positive" ? "up" : "down";
+		const label = n === 5 ? `${word} over ${over}` : `${word} ${pct(step * (n - 1), digits)}–${pct(step * n, digits)}`;
+		return /* @__PURE__ */ jsx(Swatch, {
+			label,
+			fill: heatFill(side, n)
+		}, `${side}-${n}`);
+	};
+	const steps = Array.from({ length: 5 }, (_, i) => i + 1);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "treemap-legend",
+		className: cn("flex w-full max-w-xs flex-col gap-1 text-xs text-muted-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-0.5",
+				"aria-hidden": "true",
+				children: [
+					steps.toReversed().map((n) => swatch("negative", n)),
+					/* @__PURE__ */ jsx(Swatch, {
+						label: "no change, or unknown",
+						fill: heat(null)
+					}),
+					steps.map((n) => swatch("positive", n))
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-between gap-2 tabular-nums",
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: ["▼ over ", over] }),
+					/* @__PURE__ */ jsxs("span", { children: [pct(step, digits), " a step"] }),
+					/* @__PURE__ */ jsxs("span", { children: ["▲ over ", over] })
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "sr-only",
+				children: [
+					"Tile colours run in ",
+					5,
+					" steps of ",
+					pct(step, digits),
+					" each way, deepest over ",
+					over,
+					"; a muted tile is no change or unknown."
+				]
+			})
+		]
+	});
+}
 //#endregion
-export { Treemap };
+export { Treemap, TreemapLegend };

package/dist/components/ui/accordion.js

@@ -6,14 +6,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function Accordion({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {
 		"data-slot": "accordion",
-		className: cn("flex w-full flex-col overflow-hidden rounded-2xl border", className),
+		className: cn("flex w-full flex-col", className),
 		...props
 	});
 }
 function AccordionItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Item, {
 		"data-slot": "accordion-item",
-		className: cn("not-last:border-b data-open:bg-muted/50", className),
+		className: cn("not-last:border-b", className),
 		...props
 	});
 }
@@ -22,7 +22,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
+			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
 			...props,
 			children: [
 				children,
@@ -41,10 +41,10 @@ function AccordionTrigger({ className, children, ...props }) {
 function AccordionContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Panel, {
 		"data-slot": "accordion-content",
-		className: "overflow-hidden px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+		className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+			className: cn("h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
 			children
 		})
 	});

package/dist/components/ui/alert.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import { cva } from "class-variance-authority";
 //#region src/components/ui/alert.tsx
-const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
 	variants: { variant: {
 		default: "bg-card text-card-foreground",
 		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
@@ -35,7 +35,7 @@ function AlertDescription({ className, ...props }) {
 function AlertAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-action",
-		className: cn("absolute top-2.5 right-3", className),
+		className: cn("absolute top-2 right-2", className),
 		...props
 	});
 }

package/dist/components/ui/badge.js

@@ -3,7 +3,7 @@ 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/badge.tsx
-const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
 	variants: { variant: {
 		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
 		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",

package/dist/components/ui/breadcrumb.js

@@ -16,14 +16,14 @@ function Breadcrumb({ className, ...props }) {
 function BreadcrumbList({ className, ...props }) {
 	return /* @__PURE__ */ jsx("ol", {
 		"data-slot": "breadcrumb-list",
-		className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5", className),
+		className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className),
 		...props
 	});
 }
 function BreadcrumbItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx("li", {
 		"data-slot": "breadcrumb-item",
-		className: cn("inline-flex items-center gap-1.5", className),
+		className: cn("inline-flex items-center gap-1", className),
 		...props
 	});
 }

package/dist/components/ui/button.js

@@ -3,25 +3,25 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Button as Button$1 } from "@base-ui/react/button";
 //#region src/components/ui/button.tsx
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:bg-primary/80",
-			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent dark:hover:bg-input/30",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
 			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
 			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
 			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-			xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-			sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-			lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-			icon: "size-9",
-			"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-			"icon-sm": "size-8",
-			"icon-lg": "size-10"
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
 		}
 	},
 	defaultVariants: {

package/dist/components/ui/calendar.js

@@ -10,7 +10,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
 	const defaultClassNames = getDefaultClassNames();
 	return /* @__PURE__ */ jsx(DayPicker, {
 		showOutsideDays,
-		className: cn("group/calendar bg-background p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+		className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
 		captionLayout,
 		locale,
 		formatters: {