@ctrl-ui/react 0.9.6 → 0.9.8

package/dist/styles/recipes/popup-drawer.css

@@ -85,6 +85,7 @@
   /* Block padding lives inside the scroller, never on the popup: the scroll edge would clip a focus ring on the first or last row. */
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"][data-padding="default"]) {
     padding-block: calc(var(--spacing) * 4);
+    padding-inline: calc(var(--spacing) * 4);
   }
 
   :where([data-control-family="popup"][data-popup-kind="drawer"][data-slot="body"][data-padding="default"]:last-child) {

package/dist/styles/recipes/popup-lists.css

@@ -64,12 +64,12 @@
   }
 
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="group"] [cmdk-group-heading]) {
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1.5);
-    text-transform: uppercase;
-    font-size: var(--text-caption);
+    padding-inline: var(--cui-popup-command-heading-padding-inline);
+    padding-block: var(--cui-popup-command-heading-padding-block);
+    text-transform: var(--cui-popup-command-heading-text-transform);
+    font-size: var(--cui-popup-command-heading-font-size);
     font-weight: var(--font-weight-medium);
-    letter-spacing: 0.08em;
+    letter-spacing: var(--cui-popup-command-heading-letter-spacing);
   }
 
   :where([data-control-family="popup"][data-popup-kind="command"][data-slot="empty"]),
@@ -153,7 +153,7 @@
   }
 
   :where([data-control-family="popup"][data-popup-part="separator"]) {
-    margin-block: calc(var(--spacing) * 1);
+    margin-block: var(--cui-popup-separator-gap);
     margin-inline: var(--cui-popup-separator-inset);
     block-size: 1px;
     background-color: var(--cui-popup-separator-color);
@@ -175,6 +175,7 @@
     margin-inline-start: auto;
     padding-inline-start: calc(var(--spacing) * 4);
     line-height: 1;
+    color: var(--cui-popup-submenu-indicator-foreground);
   }
 
   :where([data-control-family="popup"][data-popup-part="bar"]) {
@@ -317,3 +318,51 @@
   inherits: true;
   initial-value: 0px;
 }
+
+@property --cui-popup-separator-gap {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-submenu-indicator-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-popup-command-heading-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-command-heading-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-command-heading-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-command-heading-letter-spacing {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-popup-command-heading-text-transform {
+  syntax: "none | uppercase | lowercase | capitalize";
+  inherits: true;
+  initial-value: none;
+}
+
+@property --cui-popup-dialog-max-inline-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/popup-motion.css

@@ -63,7 +63,13 @@
   }
 
   :where([data-control-family="popup"][data-popup-kind="tooltip"][data-slot="content"][data-popup-part="surface"][data-arrow="true"]) {
-    --_popup-tooltip-content-radius: clamp(0px, var(--cui-popup-radius), 3px);
+    --_popup-tooltip-content-radius: clamp(0px, var(--cui-popup-radius), var(--cui-popup-tooltip-arrow-radius));
     border-radius: var(--_popup-tooltip-content-radius);
   }
 }
+
+@property --cui-popup-tooltip-arrow-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/popup.css

@@ -37,6 +37,15 @@
     --cui-popup-label-text-transform: uppercase;
     --cui-popup-separator-color: var(--border);
     --cui-popup-separator-inset: calc(var(--popover-padding) * -1);
+    --cui-popup-separator-gap: calc(var(--spacing) * 1);
+    --cui-popup-submenu-indicator-foreground: var(--cui-popup-item-foreground);
+    --cui-popup-tooltip-arrow-radius: 3px;
+    --cui-popup-command-heading-padding-block: calc(var(--spacing) * 1.5);
+    --cui-popup-command-heading-padding-inline: calc(var(--spacing) * 2);
+    --cui-popup-command-heading-font-size: var(--text-caption);
+    --cui-popup-command-heading-letter-spacing: calc(var(--cui-popup-command-heading-font-size) * 0.08);
+    --cui-popup-command-heading-text-transform: uppercase;
+    --cui-popup-dialog-max-inline-size: 32rem;
     --cui-popup-shortcut-foreground: var(--muted-foreground);
     --cui-popup-shortcut-font-size: var(--text-body);
     --cui-popup-shortcut-letter-spacing: 0.02em;
@@ -197,6 +206,7 @@
     )
   ) {
     --cui-popup-shortcut-foreground: var(--cui-popup-item-highlight-foreground);
+    --cui-popup-submenu-indicator-foreground: var(--cui-popup-item-highlight-foreground);
     --muted-foreground: var(--cui-popup-item-highlight-muted-foreground);
     background-color: var(--cui-popup-item-highlight-background);
     color: var(--cui-popup-item-highlight-foreground);

package/dist/styles/recipes/range.css

@@ -5,6 +5,8 @@
     --cui-range-indicator-radius: 9999px;
     --cui-range-indicator-background: var(--primary);
     --cui-range-thumb-radius: 9999px;
+    --cui-range-thumb-inline-size: calc(var(--spacing) * 3.5);
+    --cui-range-thumb-block-size: calc(var(--spacing) * 3.5);
     --cui-range-thumb-background: var(--background);
     --cui-range-thumb-border-color: var(--control-rim);
     --cui-range-thumb-shadow: var(--shadow-sm);
@@ -85,8 +87,8 @@
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"][data-variant="default"]) {
-    inline-size: calc(var(--spacing) * 3.5);
-    block-size: calc(var(--spacing) * 3.5);
+    inline-size: var(--cui-range-thumb-inline-size);
+    block-size: var(--cui-range-thumb-block-size);
   }
 
   :where([data-control-family="range"][data-range-kind="slider"][data-slot="thumb"]) {
@@ -347,6 +349,18 @@
   initial-value: 0px;
 }
 
+@property --cui-range-thumb-inline-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-range-thumb-block-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-range-thumb-background {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/sidebar-mobile.css

@@ -93,7 +93,7 @@
     box-shadow: var(--cui-sidebar-nav-shadow);
   }
 
-  @media (width < 64rem) {
+  @variant max-sidebar {
     :where([data-control-family="sidebar"][data-slot="wrapper"]:has(> [data-slot="mobile-nav-container"])) {
       flex-direction: column;
     }

package/dist/styles/recipes/sidebar-parts.css

@@ -94,7 +94,7 @@
     --focus-ring-offset: calc(var(--focus-ring-width) * -1);
   }
 
-  @media (width >= 64rem) {
+  @variant sidebar {
     :where(
         [data-control-family="sidebar"][data-slot="root"][data-variant="inset"][data-state]
           ~ [data-control-family="sidebar"][data-slot="inset"]
@@ -122,6 +122,10 @@
     box-shadow: var(--cui-sidebar-header-shadow);
   }
 
+  :where([data-control-family="sidebar"][data-slot="header"][data-divider]) {
+    border-block-end: var(--cui-sidebar-header-border-width) solid var(--cui-sidebar-header-border-color);
+  }
+
   :where([data-control-family="sidebar"][data-slot="content-stack"]) {
     gap: calc(var(--spacing) * 2);
   }
@@ -219,3 +223,15 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-sidebar-header-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-sidebar-header-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/sidebar.css

@@ -17,6 +17,11 @@
     background-image: var(--cui-sidebar-wrapper-background-image);
   }
 
+  :where([data-control-family="sidebar"][data-slot="wrapper"][data-surface="background"]) {
+    --cui-sidebar-wrapper-background: var(--background);
+    color: var(--foreground);
+  }
+
   :where([data-control-family="sidebar"][data-slot="wrapper"]:has([data-control-family="sidebar"][data-variant="inset"][data-state])) {
     --cui-sidebar-wrapper-background: var(--sidebar);
   }
@@ -35,6 +40,8 @@
     --cui-sidebar-inner-shadow: none;
     --cui-sidebar-header-background: transparent;
     --cui-sidebar-header-shadow: 0 0 transparent;
+    --cui-sidebar-header-border-width: 1px;
+    --cui-sidebar-header-border-color: var(--sidebar-border);
     --cui-sidebar-rail-divider-background: transparent;
     --cui-sidebar-group-label-foreground: oklch(from var(--sidebar-foreground) l c h / 0.7);
     --cui-sidebar-group-label-font-size: var(--text-caption);
@@ -71,6 +78,10 @@
     background-color: transparent;
   }
 
+  :where([data-control-family="sidebar"][data-slot="root"]:is([data-variant="page"], [data-variant="inset"])[data-state]) {
+    --cui-sidebar-header-border-width: 0px;
+  }
+
   :where([data-control-family="sidebar"][data-slot="gap"]) {
     background-color: transparent;
     transition: width var(--_sidebar-transition-duration) var(--ease-standard);

package/dist/styles/recipes/tabs.css

@@ -22,6 +22,8 @@
     --cui-tabs-indicator-shadow: var(--shadow-sm);
     --cui-tabs-border-color: var(--border);
     --cui-tabs-border-width: var(--control-rim-width);
+    --cui-tabs-font-size: var(--text-label);
+    --cui-tabs-font-weight: var(--font-weight-medium);
   }
 
   :where([data-control-family="tabs"][data-slot="root"][data-orientation="vertical"]) {
@@ -30,14 +32,15 @@
   }
 
   :where([data-control-family="tabs"][data-slot="list"]) {
-    --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--_tabs-trigger-h) / 2));
+    --cui-tabs-trigger-height: var(--control-h-sm);
+    --_tabs-trigger-radius-fit: min(var(--cui-tabs-trigger-radius), calc(var(--cui-tabs-trigger-height) / 2));
     position: relative;
     display: flex;
-    min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding) + var(--cui-tabs-list-padding));
+    min-height: calc(var(--cui-tabs-trigger-height) + var(--cui-tabs-list-padding) + var(--cui-tabs-list-padding));
     width: fit-content;
     align-items: center;
     gap: calc(var(--spacing) * 1);
-    border-radius: min(var(--cui-tabs-list-radius), calc(var(--_tabs-trigger-h) / 2 + var(--cui-tabs-list-padding)));
+    border-radius: min(var(--cui-tabs-list-radius), calc(var(--cui-tabs-trigger-height) / 2 + var(--cui-tabs-list-padding)));
     background: var(--cui-tabs-list-background);
     box-shadow: var(--cui-tabs-list-shadow);
     padding: var(--cui-tabs-list-padding);
@@ -45,12 +48,24 @@
     backdrop-filter: var(--cui-tabs-list-backdrop-filter);
   }
 
+  :where([data-control-family="tabs"][data-slot="list"][data-size="xs"]) {
+    --cui-tabs-trigger-height: var(--control-h-xs);
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-size="md"]) {
+    --cui-tabs-trigger-height: var(--control-h-md);
+  }
+
+  :where([data-control-family="tabs"][data-slot="list"][data-size="lg"]) {
+    --cui-tabs-trigger-height: var(--control-h-lg);
+  }
+
   :where([data-control-family="tabs"][data-slot="indicator"]) {
     position: absolute;
     top: 50%;
     left: 0;
     z-index: 0;
-    height: var(--_tabs-trigger-h);
+    height: var(--cui-tabs-trigger-height);
     width: var(--active-tab-width);
     transform: translateX(var(--active-tab-left)) translateY(-50%);
     border-radius: var(--_tabs-trigger-radius-fit);
@@ -81,7 +96,7 @@
     position: relative;
     z-index: 1;
     display: inline-flex;
-    height: var(--_tabs-trigger-h);
+    height: var(--cui-tabs-trigger-height);
     flex-shrink: 0;
     cursor: pointer;
     align-items: center;
@@ -91,8 +106,8 @@
     border-radius: var(--_tabs-trigger-radius-fit);
     padding-inline: calc(var(--spacing) * 3.5);
     color: var(--cui-tabs-foreground);
-    font-size: var(--text-label);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--cui-tabs-font-size);
+    font-weight: var(--cui-tabs-font-weight);
   }
 
   :where([data-control-family="tabs"][data-slot="list"]:not([data-orientation="vertical"], [data-variant="browser"]) [data-slot="tab"]) {
@@ -129,7 +144,7 @@
   :where([data-control-family="tabs"][data-slot="list"][data-variant="browser"]) {
     --_tabs-browser-corner-double: calc(var(--_tabs-trigger-radius-fit) + var(--_tabs-trigger-radius-fit));
     --_tabs-browser-inset: calc(var(--_tabs-trigger-radius-fit) + var(--cui-tabs-surface-radius));
-    min-height: calc(var(--_tabs-trigger-h) + var(--cui-tabs-list-padding));
+    min-height: calc(var(--cui-tabs-trigger-height) + var(--cui-tabs-list-padding));
     width: auto;
     align-items: flex-end;
     isolation: isolate;
@@ -269,6 +284,12 @@
   initial-value: 0px;
 }
 
+@property --cui-tabs-trigger-height {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
 @property --cui-tabs-list-padding {
   syntax: "<length-percentage>";
   inherits: true;
@@ -304,6 +325,18 @@
   initial-value: transparent;
 }
 
+@property --cui-tabs-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-tabs-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
 @property --cui-tabs-active-foreground {
   syntax: "<color>";
   inherits: true;

package/dist/styles/recipes/timeline.css

@@ -7,11 +7,14 @@
     --cui-timeline-success-foreground: var(--foreground);
     --cui-timeline-error-foreground: var(--destructive-text);
     --cui-timeline-separator-background: var(--border);
+    --cui-timeline-separator-inline-size: 1px;
     --cui-timeline-title-foreground: var(--foreground);
+    --cui-timeline-title-font-weight: var(--font-weight-medium);
+    --cui-timeline-item-padding-block: calc(var(--spacing) * 5);
   }
   :where([data-control-family="timeline"][data-slot="item"]) {
     column-gap: calc(var(--spacing) * 3);
-    padding-block-end: calc(var(--spacing) * 5);
+    padding-block-end: var(--cui-timeline-item-padding-block);
   }
 
   :where([data-control-family="timeline"][data-slot="item"]:last-child) {
@@ -52,13 +55,15 @@
   }
 
   :where([data-control-family="timeline"][data-slot="separator"]) {
+    inset-inline-start: calc(var(--spacing) * 2 - var(--cui-timeline-separator-inline-size) / 2);
+    inline-size: var(--cui-timeline-separator-inline-size);
     background: var(--cui-timeline-separator-background);
   }
 
   :where([data-control-family="timeline"][data-slot="title"]) {
     color: var(--cui-timeline-title-foreground);
     font-size: var(--text-label);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--cui-timeline-title-font-weight);
     line-height: calc(var(--spacing) * 5);
     text-wrap: balance;
   }
@@ -118,3 +123,21 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-timeline-title-font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 400;
+}
+
+@property --cui-timeline-item-padding-block {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-timeline-separator-inline-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/recipes/tree.css

@@ -10,6 +10,8 @@
     --cui-tree-item-trigger-font-size: var(--text-body);
     --cui-tree-item-trigger-selected-font-weight: var(--font-weight-normal);
     --cui-tree-indent-inset: 1.25rem;
+    --cui-tree-guide-background: transparent;
+    --cui-tree-guide-inline-size: 1px;
   }
 
   :where([data-control-family="tree"][data-slot="list"]) {
@@ -119,10 +121,29 @@
   }
 
   :where([data-control-family="tree"][data-slot="item-group"]) {
+    position: relative;
     translate: 0 0;
     transition: translate var(--duration-base) var(--ease-emphasized);
   }
 
+  :where([data-control-family="tree"][data-slot="item-group"])::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: calc(
+      var(--_tree-level, 1) *
+      var(--cui-tree-indent-inset) +
+      var(--spacing) *
+      2 -
+      var(--cui-tree-guide-inline-size) /
+      2
+    );
+    inline-size: var(--cui-tree-guide-inline-size);
+    border-radius: var(--cui-tree-guide-inline-size);
+    background-color: var(--cui-tree-guide-background);
+    pointer-events: none;
+  }
+
   :where([data-control-family="tree"][data-slot="item-content"]:is([data-starting-style], [data-ending-style]) > [data-slot="item-group"]) {
     translate: 0 calc(var(--spacing) * -1);
   }
@@ -187,3 +208,15 @@
   inherits: true;
   initial-value: transparent;
 }
+
+@property --cui-tree-guide-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-tree-guide-inline-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/styles/theme.css

@@ -242,10 +242,15 @@
   --font-body: var(--font-sans);
   --font-display: var(--font-sans);
   --text-micro: 0.625rem;
+  --text-micro--line-height: 1.5;
   --text-caption: 0.6875rem;
+  --text-caption--line-height: 1.5;
   --text-label: 0.75rem;
+  --text-label--line-height: 1.5;
   --text-body: 0.875rem;
+  --text-body--line-height: 1.5;
   --text-body-lg: 1rem;
+  --text-body-lg--line-height: 1.5;
   --text-heading-4: 0.9375rem;
   --text-heading-4--line-height: 1.4;
   --text-heading-4--font-weight: 600;
@@ -421,7 +426,7 @@
 /* biome-ignore-end lint/complexity/noImportantStyles: Reduced motion must override skin and inline motion. */
 
 @theme static {
-  --breakpoint-lg: 64rem;
+  --breakpoint-sidebar: 64rem;
 }
 
 @theme inline {
@@ -485,10 +490,15 @@
   --spacing-control-lg: var(--control-h-lg);
 
   --text-micro: var(--text-micro);
+  --text-micro--line-height: var(--text-micro--line-height);
   --text-caption: var(--text-caption);
+  --text-caption--line-height: var(--text-caption--line-height);
   --text-label: var(--text-label);
+  --text-label--line-height: var(--text-label--line-height);
   --text-body: var(--text-body);
+  --text-body--line-height: var(--text-body--line-height);
   --text-body-lg: var(--text-body-lg);
+  --text-body-lg--line-height: var(--text-body-lg--line-height);
   --text-heading-4: var(--text-heading-4);
   --text-heading-4--line-height: var(--text-heading-4--line-height);
   --text-heading-4--font-weight: var(--text-heading-4--font-weight);

package/dist/ui/alert-dialog.js

@@ -53,7 +53,7 @@ function AlertDialogContent({ className, children, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2", className),
+		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] -translate-x-1/2", className),
 		...props,
 		children
 	})] });

package/dist/ui/badge.js

@@ -27,7 +27,7 @@ function Badge({ variant = "default", size = "md", color, render, className, chi
 			"data-variant": variant,
 			"data-size": size,
 			"data-color": resolvedColor,
-			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3", className),
+			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap [&>svg]:pointer-events-none [&>svg]:size-3", className),
 			children
 		}
 	});

package/dist/ui/calendar.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useSkin } from "../skin-provider.js";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { CaptionLabel, Day, DayPicker, Month, MonthCaption, MonthGrid, Months, Nav, Weekday } from "react-day-picker";
@@ -12,7 +13,8 @@ const chevronPathByOrientation = {
 	up: "M3 10 8 5.5 13 10",
 	down: "M3 6 8 10.5 13 6"
 };
-function Calendar({ className, showOutsideDays = true, style, ...props }) {
+function Calendar({ className, showOutsideDays, style, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "calendar",
 		"data-control-family": "calendar",
@@ -20,7 +22,7 @@ function Calendar({ className, showOutsideDays = true, style, ...props }) {
 		className: cn("w-fit", className),
 		style,
 		children: /* @__PURE__ */ jsx(DayPicker, {
-			showOutsideDays,
+			showOutsideDays: showOutsideDays ?? skin.calendarShowOutsideDays ?? true,
 			components: {
 				Chevron: CalendarChevron,
 				Months: CalendarMonths,
@@ -111,12 +113,15 @@ function CalendarWeekday({ className, ...props }) {
 		...props
 	});
 }
-function CalendarDay({ className, ...props }) {
+function CalendarDay({ className, day, ...props }) {
+	const dayOfWeek = day.date.getDay();
 	return /* @__PURE__ */ jsx(Day, {
 		"data-control-ui": "calendar",
 		"data-control-family": "calendar",
 		"data-slot": "day-cell",
-		className: cn("p-0 align-middle", className),
+		"data-weekend": dayOfWeek === 0 || dayOfWeek === 6 ? true : void 0,
+		className: cn("align-middle", className),
+		day,
 		...props
 	});
 }

package/dist/ui/card.d.ts

@@ -3,10 +3,12 @@ import { CardKnobStyle } from "../knob-contracts/card-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/card.d.ts
 export type CardVariant = "default" | "sectioned";
+export type CardSize = "default" | "sm";
 export type CardProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & CardKnobStyle;
 } & {
   variant?: CardVariant;
+  size?: CardSize;
 };
 export type CardHeaderProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
@@ -27,7 +29,7 @@ export type CardContentProps = ComponentProps<"div"> & {
 export type CardFooterProps = ComponentProps<"div"> & {
   style?: CSSProperties & CardKnobStyle;
 };
-export declare function Card({ variant, className, ...props }: CardProps): import("react").JSX.Element;
+export declare function Card({ variant, size, className, ...props }: CardProps): import("react").JSX.Element;
 export declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
 export declare function CardTitle({ render, ...props }: CardTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;

package/dist/ui/card.js

@@ -3,13 +3,14 @@ import { cn } from "../lib/cn.js";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/card.tsx
-function Card({ variant = "default", className, ...props }) {
+function Card({ variant = "default", size = "default", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "card",
 		"data-control-family": "card",
 		"data-slot": "root",
 		"data-surface": "panel",
 		"data-variant": variant,
+		"data-size": size,
 		className: cn("flex flex-col", className),
 		...props
 	});

package/dist/ui/dialog.js

@@ -54,7 +54,7 @@ function DialogContent({ className, children, showCloseButton = true, closeLabel
 		"data-control-family": "popup",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2", className),
+		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] -translate-x-1/2", className),
 		...props,
 		children: [
 			skinAdornment(skin, "dialog", "titlebar", {}),

package/dist/ui/dropdown-menu.d.ts

@@ -35,7 +35,7 @@ export type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
 export declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
-export declare function DropdownMenuTrigger({ size, iconOnly, variant, className, children, disabled, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
+export declare function DropdownMenuTrigger({ size, iconOnly, variant, className, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
 export declare function DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
 export declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
 export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;