@siyahi/ui 0.1.9-next.2 → 0.1.9-next.21

package/dist/components/siyahi/treemap.js

@@ -1,20 +1,16 @@
 import { useFormat } from "../../lib/format.js";
+import { useElementWidth } from "../../lib/use-element-width.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";
+import { useEffect, useEffectEvent, useMemo, useState } from "react";
 //#region src/components/siyahi/treemap.tsx
 /** Holdings heat map: area by weight, colour by signed change, optionally grouped; hand-drawn SVG. */
 function Treemap({ items, height, range, onHover, selected, onSelect }) {
-	const ref = useRef(null);
-	const [width, setWidth] = useState(0);
+	const [ref, width] = useElementWidth();
+	const [focusedKey, setFocusedKey] = useState(null);
 	const selectedKey = selected ? selected.key ?? selected.name : null;
 	const { pct } = useFormat();
-	useLayoutEffect(() => {
-		const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));
-		if (ref.current) observer.observe(ref.current);
-		return () => observer.disconnect();
-	}, []);
 	const clearOutside = useEffectEvent((event) => {
 		const tile = event.target instanceof Element ? event.target.closest("[data-slot=\"treemap-tile\"]") : null;
 		if (!ref.current?.contains(tile)) onSelect?.(null);
@@ -25,7 +21,12 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		document.addEventListener("pointerdown", onPointerDown);
 		return () => document.removeEventListener("pointerdown", onPointerDown);
 	}, [selectedKey]);
-	const { groups, tiles } = layout(items, width, height);
+	const { groups, tiles } = useMemo(() => layout(items, width, height), [
+		items,
+		width,
+		height
+	]);
+	const focusKey = tiles.some(({ item }) => (item.key ?? item.name) === focusedKey) ? focusedKey : tiles[0]?.item.key ?? tiles[0]?.item.name;
 	const change = (value) => value === null ? "—" : `${value > 0 ? "▲ " : value < 0 ? "▼ " : ""}${pct(Math.abs(value))}`;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
@@ -34,32 +35,72 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		children: /* @__PURE__ */ jsxs("svg", {
 			width,
 			height,
-			role: "img",
+			role: onSelect ? "group" : "img",
 			"aria-label": "Treemap of holdings by weight and change",
 			className: "text-xs",
-			onPointerLeave: () => onHover?.(null),
+			onPointerLeave: (event) => event.pointerType === "mouse" && onHover?.(null),
 			children: [groups.map(({ group, ...box }) => /* @__PURE__ */ jsxs("svg", {
 				...box,
 				"data-slot": "treemap-group",
-				onPointerEnter: () => onHover?.(null),
-				children: [/* @__PURE__ */ jsx("rect", {
-					width: "100%",
-					height: "100%",
-					fill: "none",
-					pointerEvents: "all"
-				}), /* @__PURE__ */ jsx("text", {
-					x: 2,
-					y: 12,
-					className: "fill-muted-foreground font-medium",
-					children: group
-				})]
-			}, group)), tiles.map(({ item, ...box }) => {
+				onPointerEnter: (event) => event.pointerType === "mouse" && onHover?.(null),
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						width: "100%",
+						height: "100%",
+						fill: "none",
+						pointerEvents: "all"
+					}),
+					/* @__PURE__ */ jsx("title", { children: group }),
+					textWidth(group) <= box.width - 4 && /* @__PURE__ */ jsx("text", {
+						x: 2,
+						y: 12,
+						className: "fill-muted-foreground font-medium",
+						children: group
+					})
+				]
+			}, group)), tiles.map(({ item, ...box }, index) => {
 				const key = item.key ?? item.name;
 				return /* @__PURE__ */ jsxs("svg", {
 					...box,
 					"data-slot": "treemap-tile",
 					"data-selected": key === selectedKey || void 0,
-					onPointerEnter: () => onHover?.(item),
+					role: onSelect ? "button" : void 0,
+					tabIndex: onSelect ? key === focusKey ? 0 : -1 : void 0,
+					"aria-label": `${item.name}${item.group ? `, ${item.group}` : ""}, ${change(item.change)}`,
+					"aria-pressed": onSelect ? key === selectedKey : void 0,
+					onFocus: () => setFocusedKey(key),
+					onKeyDown: (event) => {
+						if (!onSelect) return;
+						if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							onSelect(key === selectedKey ? null : item);
+						} else if (event.key === "Escape") onSelect(null);
+						else {
+							let next;
+							switch (event.key) {
+								case "Home":
+									next = 0;
+									break;
+								case "End":
+									next = tiles.length - 1;
+									break;
+								case "ArrowRight":
+								case "ArrowDown":
+									next = (index + 1) % tiles.length;
+									break;
+								case "ArrowLeft":
+								case "ArrowUp":
+									next = (index + tiles.length - 1) % tiles.length;
+									break;
+								default: return;
+							}
+							event.preventDefault();
+							const target = tiles[next]?.item;
+							if (target) setFocusedKey(target.key ?? target.name);
+							ref.current?.querySelectorAll("[data-slot=\"treemap-tile\"]")[next]?.focus();
+						}
+					},
+					onPointerEnter: (event) => event.pointerType === "mouse" && onHover?.(item),
 					onClick: () => onSelect?.(key === selectedKey ? null : item),
 					children: [
 						/* @__PURE__ */ jsx("rect", {
@@ -78,14 +119,14 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 							strokeWidth: 2,
 							className: "stroke-foreground"
 						}),
-						box.width > 56 && box.height > 36 && /* @__PURE__ */ jsxs("text", {
+						box.width >= MIN_LABEL_WIDTH && box.height >= MIN_LABEL_HEIGHT && /* @__PURE__ */ jsxs("text", {
 							x: 8,
 							y: 18,
 							className: "fill-foreground",
 							children: [/* @__PURE__ */ jsx("tspan", {
 								className: "font-medium",
-								children: item.name
-							}), /* @__PURE__ */ jsx("tspan", {
+								children: fit(item.name, box.width - 16)
+							}), box.height >= TWO_LINE_HEIGHT && /* @__PURE__ */ jsx("tspan", {
 								x: 8,
 								dy: 16,
 								children: change(item.change)
@@ -97,6 +138,15 @@ function Treemap({ items, height, range, onHover, selected, onSelect }) {
 		})
 	});
 }
+const CHAR_PX = 6.6;
+const textWidth = (text) => text.length * CHAR_PX;
+function fit(text, width) {
+	const room = Math.floor(width / CHAR_PX);
+	return text.length <= room ? text : `${text.slice(0, Math.max(room - 1, 1)).trimEnd()}…`;
+}
+const MIN_LABEL_WIDTH = 56;
+const MIN_LABEL_HEIGHT = 28;
+const TWO_LINE_HEIGHT = 44;
 function Swatch({ label, fill }) {
 	return /* @__PURE__ */ jsxs("svg", {
 		"data-slot": "treemap-legend-swatch",

package/dist/components/siyahi/warning-alert.d.ts

@@ -0,0 +1,10 @@
+import { Alert } from "../ui/alert.js";
+import { ComponentProps } from "react";
+//#region src/components/siyahi/warning-alert.d.ts
+/**
+ * An Alert for a caution the reader must not miss, such as withdrawn results or incomplete data: the whole card
+ * takes a faint amber wash inside an amber border, with the warning triangle. Never mark a warning with a single
+ * coloured edge; the tint is the card. Put an AlertTitle and an AlertDescription inside.
+ */
+export declare function WarningAlert({ className, children, ...props }: ComponentProps<typeof Alert>): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/warning-alert.js

@@ -0,0 +1,20 @@
+import { Alert } from "../ui/alert.js";
+import { cn } from "cn";
+import { TriangleAlertIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/warning-alert.tsx
+/**
+* An Alert for a caution the reader must not miss, such as withdrawn results or incomplete data: the whole card
+* takes a faint amber wash inside an amber border, with the warning triangle. Never mark a warning with a single
+* coloured edge; the tint is the card. Put an AlertTitle and an AlertDescription inside.
+*/
+function WarningAlert({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Alert, {
+		"data-tone": "warning",
+		className: cn("gap-x-3 border-warning/45 bg-warning/10 px-4 py-3 [&>svg]:text-warning!", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(TriangleAlertIcon, {}), children]
+	});
+}
+//#endregion
+export { WarningAlert };

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: {

package/dist/components/ui/card.js

@@ -6,21 +6,21 @@ function Card({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card",
 		"data-size": size,
-		className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-4xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-md ring-1 ring-foreground/5 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] dark:ring-foreground/10 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl", className),
+		className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className),
 		...props
 	});
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-4xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className),
+		className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className),
 		...props
 	});
 }
 function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-title",
-		className: cn("font-heading text-base font-medium", className),
+		className: cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
 		...props
 	});
 }
@@ -48,7 +48,7 @@ function CardContent({ className, ...props }) {
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("flex items-center rounded-b-4xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)", className),
+		className: cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className),
 		...props
 	});
 }

package/dist/components/ui/chart.js

@@ -79,7 +79,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
 	if (!active || !payload?.length) return null;
 	const nestLabel = payload.length === 1 && indicator !== "dot";
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("grid min-w-32 items-start gap-1.5 rounded-xl bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10", className),
+		className: cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
 		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("div", {
 			className: "grid gap-1.5",
 			children: payload.filter((item) => item.type !== "none").map((item, index) => {

package/dist/components/ui/code-block.js

@@ -1,3 +1,4 @@
+"use client";
 import { Button } from "./button.js";
 import { cn } from "cn";
 import { CheckIcon, CopyIcon } from "lucide-react";
@@ -5,10 +6,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { cva } from "class-variance-authority";
 //#region src/components/ui/code-block.tsx
-const codeBlockVariants = cva("group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-2xl text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/30 data-[size=sm]:rounded-xl data-[size=sm]:text-xs", {
+const codeBlockVariants = cva("group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs", {
 	variants: { variant: {
-		default: "bg-muted text-foreground ring-1 ring-foreground/5 dark:ring-foreground/10",
-		destructive: "bg-destructive/5 text-destructive ring-1 ring-destructive/15 dark:bg-destructive/10 dark:ring-destructive/20"
+		default: "border border-input text-foreground has-[>[data-slot=code-block-content]:focus-visible]:border-ring dark:bg-input/30",
+		destructive: "border border-destructive/30 text-destructive dark:border-destructive/40"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -24,21 +25,21 @@ function CodeBlock({ className, variant = "default", size = "default", ...props
 function CodeBlockHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "code-block-header",
-		className: cn("flex min-w-0 shrink-0 items-center gap-2 px-5 pt-5 text-muted-foreground group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pt-3 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0", className),
+		className: cn("flex min-w-0 shrink-0 items-center gap-2 px-3 pt-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0", className),
 		...props
 	});
 }
 function CodeBlockTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "code-block-title",
-		className: cn("min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-4 group-data-[size=sm]/code-block:[&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5", className),
+		className: cn("min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5", className),
 		...props
 	});
 }
 function CodeBlockActions({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "code-block-actions",
-		className: cn("-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 *:data-[slot=button]:hover:bg-foreground/5 dark:*:data-[slot=button]:hover:bg-foreground/10 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-4 [[data-slot=code-block]>&]:top-4 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-2 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10", className),
+		className: cn("-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10", className),
 		...props
 	});
 }
@@ -55,7 +56,7 @@ function CodeBlockCopyButton({ value, variant = "ghost", size = "icon-xs", class
 		variant,
 		size,
 		"aria-label": copied ? "Copied" : "Copy",
-		className: cn("hover:bg-foreground/5 dark:hover:bg-foreground/10", className),
+		className: cn(className),
 		onClick: (event) => {
 			onClick?.(event);
 			navigator.clipboard.writeText(value).then(() => setCopied(true)).catch(() => {});
@@ -79,7 +80,7 @@ function CodeBlockContent({ className, children, style, wrap = false, lineNumber
 			counterReset: `line ${startLine - 1}`,
 			...style
 		},
-		className: cn("min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-5 py-5 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:py-3 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap", className),
+		className: cn("min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap", className),
 		...props,
 		children: /* @__PURE__ */ jsx("code", {
 			"data-slot": "code-block-code",
@@ -88,12 +89,12 @@ function CodeBlockContent({ className, children, style, wrap = false, lineNumber
 		})
 	});
 }
-const codeBlockLineVariants = cva("relative -mx-5 block min-h-lh px-5 group-data-[size=sm]/code-block:-mx-3 group-data-[size=sm]/code-block:px-3 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']", {
+const codeBlockLineVariants = cva("relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']", {
 	variants: { variant: {
 		default: "",
-		added: "bg-foreground/5 after:content-['+']",
+		added: "bg-muted after:content-['+']",
 		removed: "bg-destructive/10 after:text-destructive after:content-['−']",
-		highlighted: "bg-foreground/5"
+		highlighted: "bg-muted"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -114,7 +115,7 @@ function CodeBlockLine({ className, variant = "default", children, ...props }) {
 function CodeBlockFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "code-block-footer",
-		className: cn("flex min-w-0 shrink-0 items-center gap-2 px-5 pb-5 text-muted-foreground group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pb-3", className),
+		className: cn("flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5", className),
 		...props
 	});
 }

package/dist/components/ui/command.js

@@ -1,3 +1,4 @@
+"use client";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog.js";
 import { InputGroup, InputGroupAddon } from "./input-group.js";
 import { cn } from "cn";
@@ -9,7 +10,7 @@ import { Command as Command$1 } from "cmdk";
 function Command({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command$1, {
 		"data-slot": "command",
-		className: cn("flex size-full flex-col overflow-hidden rounded-4xl bg-popover p-1 text-popover-foreground", className),
+		className: cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", className),
 		...props
 	});
 }
@@ -20,7 +21,7 @@ function CommandDialog({ title = "Command Palette", description = "Search for a
 			className: "sr-only",
 			children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogDescription, { children: description })]
 		}), /* @__PURE__ */ jsx(DialogContent, {
-			className: cn("top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0", className),
+			className: cn("top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0", className),
 			showCloseButton,
 			children
 		})]
@@ -31,7 +32,7 @@ function CommandInput({ className, ...props }) {
 		"data-slot": "command-input-wrapper",
 		className: "p-1 pb-0",
 		children: /* @__PURE__ */ jsxs(InputGroup, {
-			className: "h-9 bg-input/50",
+			className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!",
 			children: [/* @__PURE__ */ jsx(Command$1.Input, {
 				"data-slot": "command-input",
 				className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
@@ -57,21 +58,21 @@ function CommandEmpty({ className, ...props }) {
 function CommandGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command$1.Group, {
 		"data-slot": "command-group",
-		className: cn("overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className),
+		className: cn("overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", className),
 		...props
 	});
 }
 function CommandSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command$1.Separator, {
 		"data-slot": "command-separator",
-		className: cn("my-1.5 h-px bg-border/50", className),
+		className: cn("-mx-1 h-px bg-border", className),
 		...props
 	});
 }
 function CommandItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Command$1.Item, {
 		"data-slot": "command-item",
-		className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none in-data-[slot=dialog-content]:rounded-3xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className),
+		className: cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })]
 	});

package/dist/components/ui/context-menu.js

@@ -32,7 +32,7 @@ function ContextMenuContent({ className, align = "start", alignOffset = 4, side
 		sideOffset,
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 			"data-slot": "context-menu-content",
-			className: cn("z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-3xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 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),
+			className: cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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
 		})
 	}) });
@@ -47,7 +47,7 @@ function ContextMenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.GroupLabel, {
 		"data-slot": "context-menu-label",
 		"data-inset": inset,
-		className: cn("px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5", className),
+		className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className),
 		...props
 	});
 }
@@ -56,7 +56,7 @@ function ContextMenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "context-menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
+		className: cn("group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
 		...props
 	});
 }
@@ -70,7 +70,7 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.SubmenuTrigger, {
 		"data-slot": "context-menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("flex cursor-default items-center rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
 	});
@@ -87,7 +87,7 @@ function ContextMenuCheckboxItem({ className, children, checked, inset, ...props
 	return /* @__PURE__ */ jsxs(ContextMenu$1.CheckboxItem, {
 		"data-slot": "context-menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("relative flex cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -106,7 +106,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(ContextMenu$1.RadioItem, {
 		"data-slot": "context-menu-radio-item",
 		"data-inset": inset,
-		className: cn("relative flex cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute right-2",
@@ -117,7 +117,7 @@ function ContextMenuRadioItem({ className, children, inset, ...props }) {
 function ContextMenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(ContextMenu$1.Separator, {
 		"data-slot": "context-menu-separator",
-		className: cn("-mx-1.5 my-1.5 h-px bg-border/50", className),
+		className: cn("-mx-1 my-1 h-px bg-border", className),
 		...props
 	});
 }