@ctrl-ui/react 0.8.1 → 0.8.2

package/dist/email/email.js

@@ -6,11 +6,20 @@ function tailwindTheme(theme) {
 		presets: [pixelBasedPreset],
 		theme: { extend: {
 			colors: theme.colors,
+			borderRadius: theme.radii,
+			minHeight: { control: theme.button.height },
+			padding: {
+				"control-x": theme.button.paddingInline,
+				"control-y": theme.button.paddingBlock
+			},
 			fontFamily: {
 				body: theme.fonts.body,
 				display: theme.fonts.display
 			},
-			fontSize: Object.fromEntries(Object.entries(theme.text).map(([name, { fontSize, ...options }]) => [name, [fontSize, options]]))
+			fontSize: {
+				...Object.fromEntries(Object.entries(theme.text).map(([name, { fontSize, ...options }]) => [name, [fontSize, options]])),
+				control: [theme.button.fontSize, { lineHeight: theme.button.lineHeight }]
+			}
 		} }
 	};
 }
@@ -23,7 +32,7 @@ function EmailLayout({ theme, preview, children, head, lang = "en", dir = "ltr"
 			children: [/* @__PURE__ */ jsx(Head, { children: head }), /* @__PURE__ */ jsxs(Body, {
 				className: "m-0 bg-background p-4 font-body text-body text-foreground",
 				children: [/* @__PURE__ */ jsx(Preview, { children: preview }), /* @__PURE__ */ jsx(Container, {
-					className: "mx-auto w-full max-w-[600px] bg-card p-6 text-card-foreground",
+					className: "mx-auto w-full max-w-[600px] rounded-panel bg-card p-6 text-card-foreground",
 					children
 				})]
 			})]
@@ -57,7 +66,7 @@ function EmailText({ tone = "default", className = "", style, ...props }) {
 function EmailButton({ className = "", ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
-		className: `box-border bg-primary px-5 py-3 text-center font-body text-body font-semibold text-primary-foreground no-underline ${className}`
+		className: `box-border min-h-control rounded-control bg-primary px-control-x py-control-y text-center font-body text-control font-medium text-primary-foreground no-underline ${className}`
 	});
 }
 function EmailLink({ className = "", ...props }) {

package/dist/email/length.d.ts

@@ -0,0 +1,4 @@
+//#region src/email/length.d.ts
+declare function emailLengthPixels(name: string, value: string, rootFontSize: number, allowZero?: boolean): number;
+//#endregion
+export { emailLengthPixels };

package/dist/email/length.js

@@ -0,0 +1,34 @@
+//#region src/email/length.ts
+function parseLengthQuantity(value, rootFontSize) {
+	const match = /^(-?\d*\.?\d+)(px|rem)?$/.exec(value.trim());
+	if (!match) return null;
+	return {
+		amount: Number(match[1]) * (match[2] === "rem" ? rootFontSize : 1),
+		unit: match[2] ? "px" : ""
+	};
+}
+function calculateLengthExpression(expression, rootFontSize) {
+	const match = /^\s*(-?\d*\.?\d+(?:px|rem)?)\s*([+*/-])\s*(-?\d*\.?\d+(?:px|rem)?)\s*$/.exec(expression);
+	if (!match) return null;
+	const left = parseLengthQuantity(match[1], rootFontSize);
+	const right = parseLengthQuantity(match[3], rootFontSize);
+	if (!left || !right) return null;
+	const operator = match[2];
+	if ((operator === "+" || operator === "-") && left.unit === right.unit) return `${left.amount + (operator === "+" ? right.amount : -right.amount)}${left.unit}`;
+	if (operator === "*" && !(left.unit && right.unit)) return `${left.amount * right.amount}${left.unit || right.unit}`;
+	if (operator === "/" && !right.unit && right.amount !== 0) return `${left.amount / right.amount}${left.unit}`;
+	return null;
+}
+function emailLengthPixels(name, value, rootFontSize, allowZero = false) {
+	let resolved = value;
+	for (let depth = 0; depth < 16 && resolved.includes("calc("); depth++) {
+		const simplified = resolved.replace(/calc\(([^()]*)\)/g, (original, expression) => calculateLengthExpression(expression, rootFontSize) ?? original);
+		if (simplified === resolved) break;
+		resolved = simplified;
+	}
+	const result = parseLengthQuantity(resolved, rootFontSize);
+	if (!(result && (result.unit === "px" || result.amount === 0) && Number.isFinite(result.amount) && (allowZero ? result.amount >= 0 : result.amount > 0))) throw new Error(`Email theme: ${name} must resolve to a ${allowZero ? "non-negative" : "positive"} px/rem length, received ${value}.`);
+	return result.amount;
+}
+//#endregion
+export { emailLengthPixels };

package/dist/email/templates.js

@@ -35,7 +35,7 @@ function InvitationEmail({ theme, brand, footer, inviter, workspace, inviteUrl }
 				". Bring your work, share a little inspiration, and make something together."
 			] }),
 			/* @__PURE__ */ jsxs(Section, {
-				className: "my-6 bg-muted p-5",
+				className: "my-6 rounded-panel bg-muted p-5",
 				children: [/* @__PURE__ */ jsx(EmailHeading, {
 					as: "h3",
 					children: "Your team is waiting"
@@ -69,7 +69,7 @@ function ProductEmail({ theme, brand, footer, title, description, imageUrl, imag
 				src: imageUrl,
 				alt: imageAlt,
 				width: "552",
-				className: "mb-6 block h-auto w-full"
+				className: "mb-6 block h-auto w-full rounded-scene"
 			}),
 			/* @__PURE__ */ jsx(EmailHeading, { children: title }),
 			/* @__PURE__ */ jsx(EmailText, { children: description }),
@@ -102,7 +102,7 @@ function EditorialEmail({ theme, brand, footer, title, description, imageUrl, im
 					src: imageUrl,
 					alt: imageAlt,
 					width: "198",
-					className: "block h-auto w-full"
+					className: "block h-auto w-full rounded-scene"
 				})
 			}), /* @__PURE__ */ jsxs(Column, {
 				width: "64%",
@@ -148,7 +148,7 @@ function NewsletterEmail({ theme, brand, footer, articles, unsubscribeUrl }) {
 						src: article.imageUrl,
 						alt: article.imageAlt,
 						width: "552",
-						className: "mb-4 block h-auto w-full"
+						className: "mb-4 block h-auto w-full rounded-scene"
 					}),
 					/* @__PURE__ */ jsx(EmailHeading, {
 						as: "h2",
@@ -190,7 +190,7 @@ function SummaryEmail({ theme, brand, footer, period, metrics, details, dashboar
 			/* @__PURE__ */ jsx(EmailHeading, { children: "Good work adds up." }),
 			/* @__PURE__ */ jsx(EmailText, { children: "Here’s what your team moved forward this week." }),
 			/* @__PURE__ */ jsx(Section, {
-				className: "my-6 bg-muted p-4",
+				className: "my-6 rounded-panel bg-muted p-4",
 				children: /* @__PURE__ */ jsx(Row, {
 					className: "table-fixed",
 					children: metrics.map((metric) => /* @__PURE__ */ jsxs(Column, {

package/dist/email/theme.d.ts

@@ -15,6 +15,18 @@ type EmailTheme = {
     body: string;
     display: string;
   };
+  radii: {
+    control: string;
+    panel: string;
+    scene: string;
+  };
+  button: {
+    height: string;
+    paddingInline: string;
+    paddingBlock: string;
+    fontSize: string;
+    lineHeight: string;
+  };
   text: Record<EmailHeadingSize | "body" | "caption", EmailTypeStyle>;
 };
 declare function createEmailTheme(tokens: ReadonlyMap<string, string>, rootFontSize?: number): EmailTheme;

package/dist/email/theme.js

@@ -1,3 +1,4 @@
+import { emailLengthPixels } from "./length.js";
 import { composite, resolveColor, tokenMaps } from "../scripts/contrast-eval.js";
 //#region src/email/theme.ts
 function resolveVariables(value, tokens, chain = []) {
@@ -17,12 +18,7 @@ function tokenValue(name, tokens, fallback) {
 	return resolved;
 }
 function pixelSize(name, tokens, rootFontSize) {
-	const value = tokenValue(name, tokens);
-	const match = /^(\d*\.?\d+)(px|rem)$/.exec(value);
-	if (!match) throw new Error(`Email theme: ${name} must resolve to px or rem, received ${value}.`);
-	const pixels = Number(match[1]) * (match[2] === "rem" ? rootFontSize : 1);
-	if (pixels <= 0) throw new Error(`Email theme: ${name} must be positive.`);
-	return `${pixels}px`;
+	return `${emailLengthPixels(name, tokenValue(name, tokens), rootFontSize)}px`;
 }
 function numericStyle(name, tokens, fallback) {
 	const value = tokenValue(name, tokens, fallback);
@@ -31,6 +27,13 @@ function numericStyle(name, tokens, fallback) {
 }
 function createEmailTheme(tokens, rootFontSize = 16) {
 	if (!Number.isFinite(rootFontSize) || rootFontSize <= 0) throw new Error("Email theme: rootFontSize must be a positive pixel value.");
+	function lengthPixels(name, allowZero = false) {
+		return emailLengthPixels(name, tokenValue(name, tokens), rootFontSize, allowZero);
+	}
+	const buttonHeight = lengthPixels("--control-h-md");
+	const buttonFontSize = lengthPixels("--text-body");
+	const reactEmailButtonLineHeight = buttonFontSize * 1.2;
+	const buttonPaddingBlock = Math.max(0, (buttonHeight - reactEmailButtonLineHeight) / 2);
 	function color(name) {
 		const result = resolveColor(`var(--${name})`, tokens);
 		if ("unresolved" in result) throw new Error(`Email theme: --${name}: ${result.unresolved}.`);
@@ -71,6 +74,18 @@ function createEmailTheme(tokens, rootFontSize = 16) {
 			body: tokenValue("--font-body", tokens),
 			display: tokenValue("--font-display", tokens)
 		},
+		radii: {
+			control: `${lengthPixels("--radius-control", true)}px`,
+			panel: `${lengthPixels("--radius-panel", true)}px`,
+			scene: `${lengthPixels("--radius-scene", true)}px`
+		},
+		button: {
+			height: `${buttonHeight}px`,
+			paddingInline: `${lengthPixels("--padding-x", true)}px`,
+			paddingBlock: `${buttonPaddingBlock}px`,
+			fontSize: `${buttonFontSize}px`,
+			lineHeight: `${reactEmailButtonLineHeight}px`
+		},
 		text: {
 			body: {
 				fontSize: pixelSize("--text-body-lg", tokens, rootFontSize),

package/dist/styles/index.css

@@ -33,6 +33,7 @@
 @import "./recipes/code-block-editor.css";
 @import "./recipes/code-diff.css";
 @import "./recipes/sidebar.css";
+@import "./recipes/sidebar-menu.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";

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

@@ -0,0 +1,156 @@
+@layer components {
+  :where([data-control-family="sidebar"][data-slot="group-label"]) {
+    gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 2);
+    border-radius: var(--radius-md);
+    color: var(--cui-sidebar-group-label-foreground);
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+    outline: none;
+    transition-property: margin, opacity;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]),
+  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+    gap: calc(var(--spacing) * 1.5);
+    block-size: var(--control-h-md);
+    border-radius: var(--cui-sidebar-menu-button-radius);
+    padding-inline: var(--padding-x);
+    font-size: var(--text-body);
+    background-color: transparent;
+    color: var(--cui-sidebar-menu-button-foreground);
+    outline: none;
+    transition-property: width, height, padding, color, background-color, box-shadow;
+    transition-duration: var(--duration-base);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
+    block-size: var(--control-h-sm);
+    padding-inline: calc(var(--padding-x) * 0.75);
+    font-size: var(--text-label);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
+    gap: calc(var(--spacing) * 2);
+    block-size: var(--control-h-lg);
+    padding-inline: calc(var(--padding-x) * 1.25);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="menu-button"]:hover),
+    :where([data-control-family="sidebar"][data-slot="menu-action"]:hover) {
+      background-color: var(--cui-sidebar-menu-button-hover-background);
+      color: var(--cui-sidebar-menu-button-hover-foreground);
+      box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover) {
+      background-color: var(--cui-sidebar-menu-button-active-background);
+      color: var(--cui-sidebar-menu-button-active-foreground);
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:is(:active, [data-popup-open])),
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:active),
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
+    background-color: var(--cui-sidebar-menu-button-active-background);
+    color: var(--cui-sidebar-menu-button-active-foreground);
+    box-shadow: var(--cui-sidebar-menu-button-active-shadow);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
+    background-color: var(--background);
+    box-shadow: 0 0 0 1px var(--sidebar-border);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover) {
+      box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
+    }
+  }
+
+  :where(
+    [data-control-family="sidebar"][data-indicator="slide"]
+      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
+  ) {
+    background-color: transparent;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:is(:disabled, [aria-disabled="true"])),
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:disabled),
+  :where([data-control-family="sidebar"][data-slot="menu-button"][aria-disabled="true"]) {
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="group-content"]) {
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-md) / 2);
+    padding: 0;
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-sm) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-action"]) {
+    inset-block-start: calc(var(--control-h-lg) / 2);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-action"])) {
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
+
+  :where([data-control-family="sidebar"][data-slot="menu-action"]:focus-visible) {
+    outline: 2px solid var(--sidebar-ring);
+    outline-offset: 2px;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    :where([data-control-family="sidebar"][data-slot="menu-action"][data-show-on-hover]) {
+      opacity: 0;
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-item"]:is(:hover, :focus-within) [data-slot="menu-action"]),
+    :where([data-control-family="sidebar"][data-slot="menu-action"][data-popup-open]) {
+      opacity: 1;
+    }
+  }
+
+  @media (pointer: coarse) {
+    :where([data-control-family="sidebar"][data-slot="menu-action"]) {
+      min-inline-size: 44px;
+      min-block-size: 44px;
+      inset-inline-end: 0;
+      inset-block-start: max(22px, calc(var(--control-h-md) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"] ~ [data-slot="menu-action"]) {
+      inset-block-start: max(22px, calc(var(--control-h-sm) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"] ~ [data-slot="menu-action"]) {
+      inset-block-start: max(22px, calc(var(--control-h-lg) / 2));
+    }
+
+    :where([data-control-family="sidebar"][data-slot="menu-button"]:has(~ [data-slot="menu-action"])) {
+      padding-inline-end: calc(var(--spacing) * 12);
+    }
+  }
+}

package/dist/styles/recipes/sidebar.css

@@ -176,99 +176,6 @@
     --cui-track-highlight-radius: var(--cui-sidebar-menu-button-radius);
   }
 
-  :where([data-control-family="sidebar"][data-slot="group-label"]) {
-    gap: calc(var(--spacing) * 2);
-    padding-inline: calc(var(--spacing) * 2);
-    border-radius: var(--radius-md);
-    color: var(--cui-sidebar-group-label-foreground);
-    font-size: var(--text-caption);
-    font-weight: var(--font-weight-medium);
-    outline: none;
-    transition-property: margin, opacity;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"]) {
-    gap: calc(var(--spacing) * 1.5);
-    block-size: var(--control-h-md);
-    border-radius: var(--cui-sidebar-menu-button-radius);
-    padding-inline: var(--padding-x);
-    font-size: var(--text-body);
-    background-color: transparent;
-    color: var(--cui-sidebar-menu-button-foreground);
-    outline: none;
-    transition-property: width, height, padding, color, background-color, box-shadow;
-    transition-duration: var(--duration-base);
-    transition-timing-function: var(--ease-standard);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="sm"]) {
-    block-size: var(--control-h-sm);
-    padding-inline: calc(var(--padding-x) * 0.75);
-    font-size: var(--text-label);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-size="lg"]) {
-    gap: calc(var(--spacing) * 2);
-    block-size: var(--control-h-lg);
-    padding-inline: calc(var(--padding-x) * 1.25);
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"]:hover) {
-      background-color: var(--cui-sidebar-menu-button-hover-background);
-      color: var(--cui-sidebar-menu-button-hover-foreground);
-      box-shadow: var(--cui-sidebar-menu-button-hover-shadow);
-    }
-
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-state="open"]:hover) {
-      background-color: var(--cui-sidebar-menu-button-active-background);
-      color: var(--cui-sidebar-menu-button-active-foreground);
-    }
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"]:active),
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
-    background-color: var(--cui-sidebar-menu-button-active-background);
-    color: var(--cui-sidebar-menu-button-active-foreground);
-    box-shadow: var(--cui-sidebar-menu-button-active-shadow);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-active]) {
-    font-weight: var(--font-weight-medium);
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]) {
-    background-color: var(--background);
-    box-shadow: 0 0 0 1px var(--sidebar-border);
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-slot="menu-button"][data-variant="outline"]:hover) {
-      box-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.08);
-    }
-  }
-
-  :where(
-    [data-control-family="sidebar"][data-indicator="slide"]
-      [data-control-family="sidebar"][data-slot="menu-button"]:is(:hover, :active, [data-active], [data-popup-open])
-  ) {
-    background-color: transparent;
-  }
-
-  @media (hover: hover) {
-    :where([data-control-family="sidebar"][data-indicator="hover"] [data-slot="menu-button"]:hover:not([data-active])) {
-      background-color: transparent;
-      box-shadow: none;
-    }
-  }
-
-  :where([data-control-family="sidebar"][data-slot="menu-button"]:disabled),
-  :where([data-control-family="sidebar"][data-slot="menu-button"][aria-disabled="true"]) {
-    opacity: 0.5;
-  }
-
   :where([data-control-family="sidebar"][data-slot="root"][data-side="right"] [data-control-family="sidebar"][data-slot="gap"]) {
     rotate: 180deg;
   }

package/dist/ui/color-picker.js

@@ -3,9 +3,9 @@ import { cn } from "../lib/cn.js";
 import { skinEffects, skinId } from "../skin.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
-import { useColorArea } from "../hooks/use-color-area.js";
 import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
 import { TARGET_RATIO, contrastOf, fixColorForContrast, nextFixLevel, wcagLevels } from "../lib/contrast.js";
+import { useColorArea } from "../hooks/use-color-area.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";

package/dist/ui/combobox.d.ts

@@ -3,6 +3,7 @@ import { ControlSize } from "../control-variants.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/ui/combobox.d.ts
 type ComboboxProps<Value = string> = {
   children?: ReactNode;
@@ -23,6 +24,7 @@ type ComboboxProps<Value = string> = {
   autoHighlight?: boolean;
   itemToStringLabel?: (itemValue: Value) => string;
   isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
+  filter?: Combobox$1.Root.Props<Value>["filter"];
 };
 type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;

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

@@ -1,16 +1,14 @@
-import { OpenChangeEventDetails } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
-import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
+import { CSSProperties, ComponentProps } from "react";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.d.ts
-type DropdownMenuProps = {
-  children?: ReactNode;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+type DropdownMenuStyledProps<PrimitiveProps> = Omit<PrimitiveProps, "className" | "style"> & {
+  className?: string;
+  style?: CSSProperties & PopupKnobStyle;
 };
+type DropdownMenuProps = Menu.Root.Props;
 declare const dropdownMenuTriggerVariants: readonly ["surface", "ghost"];
 type DropdownMenuTriggerVariant = (typeof dropdownMenuTriggerVariants)[number];
 type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & Pick<ComponentProps<typeof Menu.Trigger>, "nativeButton" | "render"> & {
@@ -20,15 +18,16 @@ type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & Pick<C
   iconOnly?: boolean;
   variant?: DropdownMenuTriggerVariant;
 };
-type DropdownMenuContentProps = Omit<ComponentProps<"div">, "style"> & {
-  style?: CSSProperties & PopupKnobStyle;
-};
-type DropdownMenuItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
-  style?: CSSProperties & PopupKnobStyle;
-} & {
-  disabled?: boolean;
-  onClick?: (event: MouseEvent) => void;
-};
+type DropdownMenuContentProps = DropdownMenuStyledProps<Menu.Popup.Props> & Pick<Menu.Positioner.Props, "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance">;
+type DropdownMenuItemProps = DropdownMenuStyledProps<Menu.Item.Props>;
+type DropdownMenuGroupProps = DropdownMenuStyledProps<Menu.Group.Props>;
+type DropdownMenuCheckboxItemProps = DropdownMenuStyledProps<Menu.CheckboxItem.Props>;
+type DropdownMenuRadioGroupProps = DropdownMenuStyledProps<Menu.RadioGroup.Props>;
+type DropdownMenuRadioItemProps = DropdownMenuStyledProps<Menu.RadioItem.Props>;
+type DropdownMenuSubProps = Menu.SubmenuRoot.Props;
+type DropdownMenuSubTriggerProps = DropdownMenuStyledProps<Menu.SubmenuTrigger.Props>;
+type DropdownMenuSubContentProps = DropdownMenuContentProps;
+type DropdownMenuShortcutProps = DropdownMenuStyledProps<ComponentProps<"span">>;
 type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
@@ -37,9 +36,18 @@ type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
 };
 declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
 declare function DropdownMenuTrigger({ size, iconOnly, variant, className, children, disabled, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
-declare function DropdownMenuContent({ className, children, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
+declare function DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
 declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
 declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
 declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
+declare function DropdownMenuPortal(props: Menu.Portal.Props): import("react").JSX.Element;
+declare function DropdownMenuGroup(props: DropdownMenuGroupProps): import("react").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
+declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+declare function DropdownMenuSub(props: DropdownMenuSubProps): import("react").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, children, ...props }: DropdownMenuSubTriggerProps): import("react").JSX.Element;
+declare function DropdownMenuSubContent(props: DropdownMenuSubContentProps): import("react").JSX.Element;
+declare function DropdownMenuShortcut(props: DropdownMenuShortcutProps): import("react").JSX.Element;
 //#endregion
-export { DropdownMenu, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuTrigger, DropdownMenuTriggerProps, DropdownMenuTriggerVariant, dropdownMenuTriggerVariants };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps, DropdownMenuTriggerVariant, dropdownMenuTriggerVariants };

package/dist/ui/dropdown-menu.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { skinEffects, skinId } from "../skin.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/ui/dropdown-menu.tsx
 const dropdownMenuTriggerVariants = ["surface", "ghost"];
@@ -29,13 +29,17 @@ function DropdownMenuTrigger({ size = "sm", iconOnly = false, variant = "surface
 		children
 	});
 }
-function DropdownMenuContent({ className, children, ...props }) {
+function DropdownMenuContent({ className, children, side = "bottom", sideOffset = 6, align = "start", alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
 		"data-skin": skinId(),
 		"data-effects": skinEffects(),
-		side: "bottom",
-		align: "start",
-		sideOffset: 6,
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		collisionBoundary,
+		collisionPadding,
+		collisionAvoidance,
 		className: "z-[80]",
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
 			"data-control-ui": "dropdown-menu",
@@ -79,5 +83,106 @@ function DropdownMenuLabel({ className, ...props }) {
 		...props
 	});
 }
+function DropdownMenuPortal(props) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { ...props });
+}
+function DropdownMenuGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-slot": "group",
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-slot": "checkbox-item",
+		className: cn("relative", popupItemStructureClasses, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenuCheck, {})
+		}), children]
+	});
+}
+function DropdownMenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-slot": "radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-slot": "radio-item",
+		className: cn("relative", popupItemStructureClasses, className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+			className: "pointer-events-none absolute start-2 flex size-4 items-center justify-center",
+			children: /* @__PURE__ */ jsx(DropdownMenuCheck, {})
+		}), children]
+	});
+}
+function DropdownMenuCheck() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 12 12",
+		className: "size-3",
+		"aria-hidden": "true",
+		fill: "none",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M2.5 6.5 5 9l4.5-5",
+			stroke: "currentColor",
+			strokeWidth: "1.6",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function DropdownMenuSub(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+}
+function DropdownMenuSubTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-slot": "sub-trigger",
+		className: cn(popupItemStructureClasses, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "dropdown-menu",
+			"data-control-family": "popup",
+			"data-slot": "sub-trigger-indicator",
+			"aria-hidden": "true",
+			children: "›"
+		})]
+	});
+}
+function DropdownMenuSubContent(props) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-control-ui": "dropdown-menu",
+		"data-slot": "sub-content",
+		side: "right",
+		sideOffset: 0,
+		alignOffset: -3,
+		...props
+	});
+}
+function DropdownMenuShortcut(props) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "popup",
+		"data-popup-part": "shortcut",
+		"data-slot": "shortcut",
+		...props
+	});
+}
 //#endregion
-export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, dropdownMenuTriggerVariants };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuTriggerVariants };

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

@@ -11,6 +11,16 @@ type SidebarGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
 } & {
   render?: RenderProp<ComponentProps<"div">>;
 };
+type SidebarGroupContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+};
+type SidebarMenuActionProps = Omit<ComponentProps<"button">, "style"> & {
+  render?: RenderProp<ComponentProps<"button">>;
+  showOnHover?: boolean;
+  style?: CSSProperties & SidebarKnobStyle;
+};
+declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): import("react").JSX.Element;
+declare function SidebarMenuAction({ className, render, showOnHover, children, ...props }: SidebarMenuActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 } & {
@@ -36,4 +46,4 @@ declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> &
 declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
 declare function SidebarMenuSub({ className, ...props }: ComponentProps<typeof SidebarMenu>): import("react").JSX.Element;
 //#endregion
-export { SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants };
+export { SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants };

package/dist/ui/sidebar-menu.js

@@ -15,6 +15,31 @@ const sidebarMenuButtonSizes = [
 	"sm",
 	"lg"
 ];
+function SidebarGroupContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "group-content",
+		className: cn("w-full", className),
+		...props
+	});
+}
+function SidebarMenuAction({ className, render, showOnHover = false, children, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: {
+			type: "button",
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "menu-action",
+			"data-show-on-hover": showOnHover || void 0,
+			className: cn("end-1 flex size-5 items-center justify-center -translate-y-1/2 disabled:pointer-events-none group-data-[collapsible=icon]:hidden [&>svg]:size-4 [&>svg]:shrink-0", className, "absolute"),
+			children
+		}
+	});
+}
 function SidebarGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "sidebar",
@@ -132,4 +157,4 @@ function SidebarMenuSub({ className, ...props }) {
 	});
 }
 //#endregion
-export { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants };
+export { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants };

package/dist/ui/sidebar.d.ts

@@ -1,6 +1,6 @@
 import { Button } from "./button.js";
 import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
-import { SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupContentProps, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar } from "./sidebar-provider.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/sidebar.d.ts
@@ -28,4 +28,4 @@ declare function SidebarFooter({ className, ...props }: ComponentProps<"div"> &
 }): import("react").JSX.Element;
 declare function SidebarContent({ className, children, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailProps, type SidebarSelectionIndicator, type SidebarStyle, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, type SidebarGroupContentProps, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarRailProps, type SidebarSelectionIndicator, type SidebarStyle, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/dist/ui/sidebar.js

@@ -5,7 +5,7 @@ import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
 import { SidebarProvider, useSidebar } from "./sidebar-provider.js";
-import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
+import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PanelLeftIcon } from "lucide-react";
 //#region src/ui/sidebar.tsx
@@ -180,4 +180,4 @@ function SidebarContent({ className, children, ...props }) {
 	});
 }
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarProvider, SidebarRail, SidebarTrigger, sidebarMenuButtonSizes, sidebarMenuButtonVariants, useSidebar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "Control UI components, blocks, and primitives with the Refined skin, as a versioned package.",
   "license": "MIT",
   "repository": {