@siyahi/ui 0.1.9-next.7 → 0.1.9-next.8

package/README.md

@@ -67,8 +67,8 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 
 ## What is in it
 
-- **shadcn/ui components** in the `base-luma` style, installed with the shadcn
-  CLI and never edited.
+- **shadcn/ui components** in the `base-nova` style, shadcn's flat and compact
+  one, installed with the shadcn CLI and never edited.
 - **Registry add-ons**, copied once with their origin and licence recorded:
   bar, area and line chart cards from shadcn's chart blocks, a data table on
   TanStack Table, calendar, weekday and status heatmaps, a ranked
@@ -82,9 +82,12 @@ Every merge to `main` also attaches both tarballs to a GitHub release
   `PageSection`, `PageSubheading`, `DataList` and `InlineCode`, the data table
   parts `DataTableSortHeader` (sorts on one click) and `DataTableRowCount`
   ("12 of 48"), `DataBar` (a figure in a table cell with a bar giving its size
-  against the column's largest), and `SiyahiProvider`.
-- **Cards and badges as installed**: every `Card`, stat tiles included, keeps
-  luma's `rounded-4xl`, `shadow-md` and faint ring. A category (a sector, a
+  against the column's largest), `PanelGrid` (data blocks side by side, with
+  hairlines between them on a ruled page), and `SiyahiProvider`.
+- **Surfaces**: by default a data block has no box. Every `Card` on a ruled
+  page, chart cards and stat tiles included, loses its fill, corner and ring,
+  and a `PanelGrid` draws hairlines between blocks; see Surfaces below. A
+  category (a sector, a
   broker, a unit's kind) is an outline `Badge`: categories stay neutral, and
   colour is left to the four meaning colours and the charts. On a narrow card
   (header under 24rem, so any phone) a header action such as a toggle drops
@@ -127,6 +130,8 @@ Every merge to `main` also attaches both tarballs to a GitHub release
 | Label and value pairs, such as a record's fields                        | `DataList` and `DataListItem`                                       |
 | A command or file to copy, wrapped or scrolling                         | `CodeBlock` with `CodeBlockCopyButton`                              |
 | A labelled copy action, such as "Copy all" for a section                | `CopyButton`                                                        |
+| Data blocks side by side: charts, tables, a strip of figures            | `PanelGrid`                                                         |
+| Boxes back, or no lines at all, for a page or a part of one             | `SiyahiProvider` with `surface="card"` or `surface="open"`          |
 | A command, file or identifier inside prose                              | `InlineCode`                                                        |
 | A signed figure (a gain, a loss, a change)                              | `Delta`                                                             |
 | A time, with the viewer's own clock on hover                            | `LocalTime`                                                         |
@@ -171,6 +176,28 @@ loss, a change) goes through `<Delta>`, which adds ▲ or ▼ and the meaning
 colour. Time zone names come from the runtime's ICU data; a slim Node or
 browser build may print `GMT+5:30` where a full one prints `IST`.
 
+## Surfaces
+
+A data block sits on the page in one of three ways, set by `SiyahiProvider`'s
+`surface`:
+
+- `"ruled"`, the default: no box. Every `Card` loses its fill, corner and ring,
+  and blocks side by side in a `PanelGrid` are parted by hairlines, with a rule
+  above and below the grid. One surface, as on a trading screen.
+- `"open"`: no box and no lines. The card's padding goes too, so a block's
+  content sits level with the page's text; for pages read top to bottom.
+- `"card"`: shadcn's own Nova card, a filled box with a 1px ring.
+
+A component outside any provider is ruled. A nested provider sets the surface
+for one part of a page. A picked `SectionCards` tile keeps its ring on every
+surface.
+
+```tsx
+<SiyahiProvider surface="open">
+  <PageSection title="Why XIRR fell">…</PageSection>
+</SiyahiProvider>
+```
+
 ## Dark mode
 
 The colour scheme follows the device (`prefers-color-scheme`). There is no

package/dist/components/registry/dashboard-01/section-cards.js

@@ -26,7 +26,7 @@ function SectionCards({ items, selected, onSelect }) {
 						"aria-pressed": item.label === selected,
 						disabled: item.disabled,
 						onClick: () => onSelect(item.label),
-						className: "absolute inset-0 z-10 rounded-4xl outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
+						className: "absolute inset-0 z-10 rounded-[inherit] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
 					}),
 					/* @__PURE__ */ jsxs(CardHeader, { children: [
 						/* @__PURE__ */ jsx(CardDescription, { children: item.label }),

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

@@ -24,7 +24,6 @@ function trendColor(change) {
 function MetricStrip({ title, description, action, items, footer, className, ...props }) {
 	const columns = COLUMNS[Math.min(items.length, 8)] ?? COLUMNS[8];
 	return /* @__PURE__ */ jsxs(Card, {
-		"data-slot": "metric-strip",
 		className: cn("gap-4", className),
 		...props,
 		children: [
@@ -34,6 +33,7 @@ function MetricStrip({ title, description, action, items, footer, className, ...
 				action && /* @__PURE__ */ jsx(CardAction, { children: action })
 			] }),
 			/* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", {
+				"data-slot": "metric-strip",
 				className: "@container/strip -mx-4 -my-3 overflow-hidden",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "-mt-px -ml-px flex flex-wrap",

package/dist/components/registry/niko-table/ui/table.js

@@ -52,14 +52,14 @@ function TableRow({ className, ...props }) {
 function TableHead({ className, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 }
 function TableCell({ className, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
+		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]", className),
 		...props
 	});
 }

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/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" })]
 	});