@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/ui/combobox.d.ts

@@ -5,7 +5,7 @@ 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> = {
+export type ComboboxProps<Value = string> = {
   children?: ReactNode;
   items?: readonly Value[];
   value?: Value | null;
@@ -26,47 +26,46 @@ type ComboboxProps<Value = string> = {
   isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
   filter?: Combobox$1.Root.Props<Value>["filter"];
 };
-type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
+export type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 } & {
   size?: ControlSize;
 };
-type ComboboxTriggerProps = ComponentProps<"button"> & {
+export type ComboboxTriggerProps = ComponentProps<"button"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type ComboboxContentProps = Omit<ComponentProps<"div"> & {
+export type ComboboxContentProps = Omit<ComponentProps<"div"> & {
   sideOffset?: number;
 }, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ComboboxListProps<Value = unknown> = Omit<ComponentProps<"div">, "children"> & {
+export type ComboboxListProps<Value = unknown> = Omit<ComponentProps<"div">, "children"> & {
   children?: ReactNode | ((item: Value, index: number) => ReactNode);
 } & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ComboboxItemProps<Value = unknown> = Omit<Omit<ComponentProps<"div">, "value"> & {
+export type ComboboxItemProps<Value = unknown> = Omit<Omit<ComponentProps<"div">, "value"> & {
   value?: Value;
   disabled?: boolean;
 }, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ComboboxEmptyProps = Omit<ComponentProps<"div">, "style"> & {
+export type ComboboxEmptyProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type ComboboxGroupProps = ComponentProps<"div"> & {
+export type ComboboxGroupProps = ComponentProps<"div"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type ComboboxGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+export type ComboboxGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function Combobox<Value = string>({ children, onValueChange, autoHighlight, ...props }: ComboboxProps<Value>): import("react").JSX.Element;
-declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
-declare function ComboboxInput({ size, className, ...props }: ComboboxInputProps): import("react").JSX.Element;
-declare function ComboboxContent({ className, children, sideOffset, ...props }: ComboboxContentProps): import("react").JSX.Element;
-declare function ComboboxList<Value = unknown>({ className, children, ...props }: ComboboxListProps<Value>): import("react").JSX.Element;
-declare function ComboboxEmpty({ className, children, ...props }: ComboboxEmptyProps): import("react").JSX.Element;
-declare function ComboboxItem<Value = unknown>({ className, children, disabled, value, ...props }: ComboboxItemProps<Value>): import("react").JSX.Element;
-declare function ComboboxGroup({ className, children, ...props }: ComboboxGroupProps): import("react").JSX.Element;
-declare function ComboboxGroupLabel({ className, children, ...props }: ComboboxGroupLabelProps): import("react").JSX.Element;
-//#endregion
-export { Combobox, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, ComboboxGroupLabelProps, ComboboxGroupProps, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxListProps, ComboboxProps, ComboboxTrigger, ComboboxTriggerProps };
+export declare function Combobox<Value = string>({ children, onValueChange, autoHighlight, ...props }: ComboboxProps<Value>): import("react").JSX.Element;
+export declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
+export declare function ComboboxInput({ size, className, ...props }: ComboboxInputProps): import("react").JSX.Element;
+export declare function ComboboxContent({ className, children, sideOffset, ...props }: ComboboxContentProps): import("react").JSX.Element;
+export declare function ComboboxList<Value = unknown>({ className, children, ...props }: ComboboxListProps<Value>): import("react").JSX.Element;
+export declare function ComboboxEmpty({ className, children, ...props }: ComboboxEmptyProps): import("react").JSX.Element;
+export declare function ComboboxItem<Value = unknown>({ className, children, disabled, value, ...props }: ComboboxItemProps<Value>): import("react").JSX.Element;
+export declare function ComboboxGroup({ className, children, ...props }: ComboboxGroupProps): import("react").JSX.Element;
+export declare function ComboboxGroupLabel({ className, children, ...props }: ComboboxGroupLabelProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/combobox.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { emitComboboxValueChange } from "./combobox-disabled-selection.js";
 import { createContext, use, useEffect, useState } from "react";
@@ -76,17 +77,18 @@ function ComboboxInput({ size = "md", className, ...props }) {
 	});
 }
 function ComboboxContent({ className, children, sideOffset = 6, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, {
 		"data-control-ui": "combobox",
 		"data-popup-kind": "combobox",
 		"data-control-family": "popup",
 		"data-slot": "positioner",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side: "bottom",
 		align: "start",
 		sideOffset,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Combobox$1.Popup, {
 			"data-control-ui": "combobox",
 			"data-popup-kind": "combobox",

package/dist/ui/command.d.ts

@@ -1,44 +1,47 @@
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { Dialog } from "./dialog.js";
-import { CSSProperties, ComponentProps } from "react";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Command as Command$1 } from "cmdk";
 //#region src/ui/command.d.ts
-type CommandProps = Omit<ComponentProps<typeof Command$1>, "style"> & {
+export type CommandChrome = "standalone" | "embedded";
+export type CommandProps = Omit<ComponentProps<typeof Command$1>, "style"> & {
+  chrome?: CommandChrome;
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function Command({ className, ...props }: CommandProps): import("react").JSX.Element;
-declare function CommandDialog({ title, description, children, className, commandProps, ...props }: ComponentProps<typeof Dialog> & {
+export declare function Command({ chrome, className, ...props }: CommandProps): import("react").JSX.Element;
+export declare function CommandDialog({ title, description, children, className, commandProps, ...props }: ComponentProps<typeof Dialog> & {
   title?: string;
   description?: string;
   className?: string;
   commandProps?: ComponentProps<typeof Command>;
 }): import("react").JSX.Element;
-type CommandInputProps = Omit<ComponentProps<typeof Command$1.Input>, "style"> & {
+export type CommandInputProps = Omit<ComponentProps<typeof Command$1.Input>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function CommandInput({ className, ...props }: CommandInputProps): import("react").JSX.Element;
-declare function CommandList({ className, ...props }: ComponentProps<typeof Command$1.List> & {
+export declare function CommandInput({ className, ...props }: CommandInputProps): import("react").JSX.Element;
+export declare function CommandList({ className, children, ...props }: ComponentProps<typeof Command$1.List> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-type CommandEmptyProps = Omit<ComponentProps<typeof Command$1.Empty>, "style"> & {
+export type CommandEmptyProps = Omit<ComponentProps<typeof Command$1.Empty>, "style" | "title"> & {
   style?: CSSProperties & PopupKnobStyle;
+  title?: ReactNode;
+  description?: ReactNode;
 };
-declare function CommandEmpty({ className, ...props }: CommandEmptyProps): import("react").JSX.Element;
-type CommandGroupProps = Omit<ComponentProps<typeof Command$1.Group>, "style"> & {
+export declare function CommandEmpty({ className, children, title, description, ...props }: CommandEmptyProps): import("react").JSX.Element;
+export type CommandGroupProps = Omit<ComponentProps<typeof Command$1.Group>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function CommandGroup({ className, ...props }: CommandGroupProps): import("react").JSX.Element;
-type CommandSeparatorProps = Omit<ComponentProps<typeof Command$1.Separator>, "style"> & {
+export declare function CommandGroup({ className, ...props }: CommandGroupProps): import("react").JSX.Element;
+export type CommandSeparatorProps = Omit<ComponentProps<typeof Command$1.Separator>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function CommandSeparator({ className, ...props }: CommandSeparatorProps): import("react").JSX.Element;
-type CommandItemProps = Omit<ComponentProps<typeof Command$1.Item>, "style"> & {
+export declare function CommandSeparator({ className, ...props }: CommandSeparatorProps): import("react").JSX.Element;
+export type CommandItemProps = Omit<ComponentProps<typeof Command$1.Item>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function CommandItem({ className, disabled, onSelect, ...props }: CommandItemProps): import("react").JSX.Element;
-type CommandShortcutProps = Omit<ComponentProps<"span">, "style"> & {
+export declare function CommandItem({ className, disabled, onSelect, ...props }: CommandItemProps): import("react").JSX.Element;
+export type CommandShortcutProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function CommandShortcut({ className, ...props }: CommandShortcutProps): import("react").JSX.Element;
-//#endregion
-export { Command, CommandDialog, CommandEmpty, CommandEmptyProps, CommandGroup, CommandGroupProps, CommandInput, CommandInputProps, CommandItem, CommandItemProps, CommandList, CommandProps, CommandSeparator, CommandSeparatorProps, CommandShortcut, CommandShortcutProps };
+export declare function CommandShortcut({ className, ...props }: CommandShortcutProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/command.js

@@ -2,28 +2,30 @@
 import { cn } from "../lib/cn.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Command as Command$1 } from "cmdk";
+import { Command as Command$1, useCommandState } from "cmdk";
 //#region src/ui/command.tsx
-function Command({ className, ...props }) {
+function Command({ chrome = "standalone", className, ...props }) {
 	return /* @__PURE__ */ jsx(Command$1, {
 		"data-control-ui": "command",
 		"data-popup-kind": "command",
 		"data-slot": "root",
 		"data-control-family": "popup",
-		"data-popup-part": "surface",
+		"data-popup-part": chrome === "standalone" ? "surface" : void 0,
 		"data-popup-static": "",
-		"data-surface": "panel",
-		className: cn("flex h-full w-full flex-col overflow-hidden", className),
+		"data-chrome": chrome,
+		"data-surface": chrome === "standalone" ? "panel" : void 0,
+		className: cn("flex h-full w-full flex-col", className),
 		...props
 	});
 }
-function CommandDialog({ title = "Command palette", description = "Search for a command to run...", children, className, commandProps, ...props }) {
+function CommandDialog({ title = "Command palette", description = "Search for a command to run…", children, className, commandProps, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog, {
 		...props,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: cn("overflow-hidden p-0", className),
+			className: cn("p-0", className),
 			showCloseButton: false,
 			children: [
 				/* @__PURE__ */ jsx(DialogTitle, {
@@ -35,6 +37,7 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 					children: description
 				}),
 				/* @__PURE__ */ jsx(Command, {
+					chrome: "embedded",
 					...commandProps,
 					"data-control-ui": "command",
 					"data-popup-kind": "command",
@@ -48,6 +51,7 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 	});
 }
 function CommandInput({ className, ...props }) {
+	const hasResults = useCommandState((state) => state.filtered.count > 0);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "command",
 		"data-popup-kind": "command",
@@ -78,37 +82,82 @@ function CommandInput({ className, ...props }) {
 				strokeLinecap: "round"
 			})]
 		}), /* @__PURE__ */ jsx(Command$1.Input, {
+			asChild: true,
 			"data-control-ui": "command",
 			"data-popup-kind": "command",
 			"data-control-family": "popup",
 			"data-slot": "input",
 			className: cn("h-full w-full disabled:cursor-not-allowed", className),
-			...props
+			...props,
+			children: /* @__PURE__ */ jsx("input", {
+				role: "combobox",
+				"aria-expanded": hasResults
+			})
 		})]
 	});
 }
-function CommandList({ className, ...props }) {
+function CommandListSurface({ hasResults, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: hasResults ? "listbox" : "group"
+	});
+}
+function CommandList({ className, children, ...props }) {
+	const hasResults = useCommandState((state) => state.filtered.count > 0);
 	return /* @__PURE__ */ jsx(ScrollArea, {
 		maxHeight: "min(360px, var(--available-height, 360px))",
 		className: "min-h-0 w-full",
 		children: /* @__PURE__ */ jsx(Command$1.List, {
+			asChild: true,
 			"data-control-ui": "command",
 			"data-control-family": "popup",
 			"data-popup-kind": "command",
 			"data-slot": "list",
 			className: cn("p-[var(--popover-padding)]", className),
-			...props
+			...props,
+			children: /* @__PURE__ */ jsx(CommandListSurface, {
+				hasResults,
+				children
+			})
 		})
 	});
 }
-function CommandEmpty({ className, ...props }) {
+function CommandEmpty({ className, children, title = "No results found", description = "Try a different search term.", ...props }) {
 	return /* @__PURE__ */ jsx(Command$1.Empty, {
+		asChild: true,
 		"data-control-ui": "command",
 		"data-control-family": "popup",
 		"data-popup-kind": "command",
 		"data-slot": "empty",
 		className,
-		...props
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			role: "status",
+			children: children ?? /* @__PURE__ */ jsx(Empty, { children: /* @__PURE__ */ jsxs(EmptyHeader, { children: [
+				/* @__PURE__ */ jsx(EmptyMedia, { children: /* @__PURE__ */ jsx(CommandEmptyIcon, {}) }),
+				/* @__PURE__ */ jsx(EmptyTitle, { children: title }),
+				description ? /* @__PURE__ */ jsx(EmptyDescription, { children: description }) : null
+			] }) })
+		})
+	});
+}
+function CommandEmptyIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		fill: "none",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "7",
+			cy: "7",
+			r: "4.25",
+			stroke: "currentColor",
+			strokeWidth: "1.3"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "m10.5 10.5 3 3",
+			stroke: "currentColor",
+			strokeWidth: "1.3",
+			strokeLinecap: "round"
+		})]
 	});
 }
 function CommandGroup({ className, ...props }) {
@@ -117,12 +166,13 @@ function CommandGroup({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "command",
 		"data-slot": "group",
-		className: cn("overflow-hidden p-[var(--popover-padding)]", className),
+		className: cn("p-[var(--popover-padding)]", className),
 		...props
 	});
 }
 function CommandSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command$1.Separator, {
+		"aria-hidden": "true",
 		"data-control-ui": "command",
 		"data-popup-kind": "command",
 		"data-control-family": "popup",

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

@@ -3,84 +3,83 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
 //#region src/ui/context-menu.d.ts
-type ContextMenuProps = {
+export type ContextMenuProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
 };
-type ContextMenuTriggerProps = ComponentProps<"div"> & {
+export type ContextMenuTriggerProps = ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ContextMenuGroupProps = ComponentProps<"div"> & {
+export type ContextMenuGroupProps = ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ContextMenuContentProps = Omit<ComponentProps<"div">, "style"> & {
+export type ContextMenuContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ContextMenuItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+export type ContextMenuItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   disabled?: boolean;
   inset?: boolean;
   onClick?: (event: MouseEvent) => void;
 };
-type ContextMenuCheckboxItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+export type ContextMenuCheckboxItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;
 };
-type ContextMenuRadioGroupProps<TValue extends string = string> = ComponentProps<"div"> & Omit<ControlledChoice<TValue>, "defaultValue"> & {
+export type ContextMenuRadioGroupProps<TValue extends string = string> = ComponentProps<"div"> & Omit<ControlledChoice<TValue>, "defaultValue"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ContextMenuRadioItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+export type ContextMenuRadioItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   value: string;
   disabled?: boolean;
 };
-type ContextMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
+export type ContextMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   inset?: boolean;
 };
-type ContextMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+export type ContextMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ContextMenuShortcutProps = Omit<ComponentProps<"span">, "style"> & {
+export type ContextMenuShortcutProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type ContextMenuSubProps = {
+export type ContextMenuSubProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
 };
-type ContextMenuSubTriggerProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+export type ContextMenuSubTriggerProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   disabled?: boolean;
   inset?: boolean;
 };
-type ContextMenuSubContentProps = Omit<ComponentProps<"div">, "style"> & {
+export type ContextMenuSubContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function ContextMenu(props: ContextMenuProps): import("react").JSX.Element;
-declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): import("react").JSX.Element;
-declare function ContextMenuPortal(props: ComponentProps<typeof ContextMenu$1.Portal>): import("react").JSX.Element;
-declare function ContextMenuGroup({ className, ...props }: ContextMenuGroupProps): import("react").JSX.Element;
-declare function ContextMenuContent({ className, children, ...props }: ContextMenuContentProps): import("react").JSX.Element;
-declare function ContextMenuItem({ className, inset, ...props }: ContextMenuItemProps): import("react").JSX.Element;
-declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
-declare function ContextMenuRadioGroup<TValue extends string = string>({ className, ...props }: ContextMenuRadioGroupProps<TValue>): import("react").JSX.Element;
-declare function ContextMenuRadioItem({ className, children, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
-declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react").JSX.Element;
-declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react").JSX.Element;
-declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): import("react").JSX.Element;
-declare function ContextMenuSub(props: ContextMenuSubProps): import("react").JSX.Element;
-declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps): import("react").JSX.Element;
-declare function ContextMenuSubContent({ className, children, ...props }: ContextMenuSubContentProps): import("react").JSX.Element;
-//#endregion
-export { ContextMenu, ContextMenuCheckboxItem, ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuContentProps, ContextMenuGroup, ContextMenuGroupProps, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuLabelProps, ContextMenuPortal, ContextMenuProps, ContextMenuRadioGroup, ContextMenuRadioGroupProps, ContextMenuRadioItem, ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuSeparatorProps, ContextMenuShortcut, ContextMenuShortcutProps, ContextMenuSub, ContextMenuSubContent, ContextMenuSubContentProps, ContextMenuSubProps, ContextMenuSubTrigger, ContextMenuSubTriggerProps, ContextMenuTrigger, ContextMenuTriggerProps };
+export declare function ContextMenu(props: ContextMenuProps): import("react").JSX.Element;
+export declare function ContextMenuTrigger({ className, ...props }: ContextMenuTriggerProps): import("react").JSX.Element;
+export declare function ContextMenuPortal(props: ComponentProps<typeof ContextMenu$1.Portal>): import("react").JSX.Element;
+export declare function ContextMenuGroup({ className, ...props }: ContextMenuGroupProps): import("react").JSX.Element;
+export declare function ContextMenuContent({ className, children, ...props }: ContextMenuContentProps): import("react").JSX.Element;
+export declare function ContextMenuItem({ className, inset, ...props }: ContextMenuItemProps): import("react").JSX.Element;
+export declare function ContextMenuCheckboxItem({ className, children, ...props }: ContextMenuCheckboxItemProps): import("react").JSX.Element;
+export declare function ContextMenuRadioGroup<TValue extends string = string>({ className, ...props }: ContextMenuRadioGroupProps<TValue>): import("react").JSX.Element;
+export declare function ContextMenuRadioItem({ className, children, ...props }: ContextMenuRadioItemProps): import("react").JSX.Element;
+export declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react").JSX.Element;
+export declare function ContextMenuSeparator({ className, ...props }: ContextMenuSeparatorProps): import("react").JSX.Element;
+export declare function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): import("react").JSX.Element;
+export declare function ContextMenuSub(props: ContextMenuSubProps): import("react").JSX.Element;
+export declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps): import("react").JSX.Element;
+export declare function ContextMenuSubContent({ className, children, ...props }: ContextMenuSubContentProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/context-menu.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
@@ -34,10 +35,11 @@ function ContextMenuGroup({ className, ...props }) {
 	});
 }
 function ContextMenuContent({ className, children, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
-		className: "z-[80]",
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 			"data-control-ui": "context-menu",
 			"data-popup-kind": "context-menu",
@@ -179,10 +181,11 @@ function ContextMenuSubTrigger({ className, inset = false, children, ...props })
 	});
 }
 function ContextMenuSubContent({ className, children, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
-		className: "z-[80]",
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
+		className: "z-(--z-popup)",
 		sideOffset: -4,
 		alignOffset: -5,
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {

package/dist/ui/dialog.d.ts

@@ -4,35 +4,35 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/ui/dialog.d.ts
-type DialogProps = {
+export type DialogProps = {
+  modal?: boolean | "trap-focus";
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
 };
-type DialogContentProps = Omit<ComponentProps<"div">, "style"> & {
+export type DialogContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   showCloseButton?: boolean;
 };
-declare function Dialog(props: DialogProps): import("react").JSX.Element;
-declare function DialogTrigger({ className, ...props }: ComponentProps<typeof Dialog$1.Trigger> & {
+export declare function Dialog(props: DialogProps): import("react").JSX.Element;
+export declare function DialogTrigger({ className, ...props }: ComponentProps<typeof Dialog$1.Trigger> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-type DialogCloseProps = Omit<ComponentProps<typeof Dialog$1.Close>, "render"> & Pick<ButtonProps, "variant" | "size" | "tone" | "iconOnly">;
-declare function DialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): import("react").JSX.Element;
-declare function DialogHeader({ className, ...props }: ComponentProps<"div"> & {
+export type DialogCloseProps = Omit<ComponentProps<typeof Dialog$1.Close>, "render"> & Pick<ButtonProps, "variant" | "size" | "tone" | "iconOnly">;
+export declare function DialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
+export declare function DialogContent({ className, children, showCloseButton, ...props }: DialogContentProps): import("react").JSX.Element;
+export declare function DialogHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function DialogFooter({ className, ...props }: ComponentProps<"div"> & {
+export declare function DialogFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function DialogTitle({ className, ...props }: ComponentProps<"h2"> & {
+export declare function DialogTitle({ className, ...props }: ComponentProps<"h2"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function DialogDescription({ className, ...props }: ComponentProps<"p"> & {
+export declare function DialogDescription({ className, ...props }: ComponentProps<"p"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { Dialog, DialogClose, DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger };
+//#endregion

package/dist/ui/dialog.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinAdornment, skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute, skinAdornment } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
@@ -33,34 +34,35 @@ function DialogClose({ className, children, variant = "surface", size = "sm", to
 	});
 }
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, {
 		"data-control-ui": "dialog",
 		"data-popup-kind": "dialog",
 		"data-slot": "backdrop",
 		"data-control-family": "popup",
 		"data-popup-part": "backdrop",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
-		className: "fixed inset-0 z-[70]"
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
+		className: "fixed inset-0 z-(--z-overlay)"
 	}), /* @__PURE__ */ jsxs(Dialog$1.Popup, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		"data-control-ui": "dialog",
 		"data-popup-kind": "dialog",
 		"data-slot": "content",
 		"data-control-family": "popup",
 		"data-popup-part": "surface",
 		"data-surface": "modal",
-		className: cn("fixed left-1/2 top-[12vh] z-[71] grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 p-0", className),
+		className: cn("fixed left-1/2 top-[12vh] z-(--z-modal) grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2", className),
 		...props,
 		children: [
-			skinAdornment("dialog", "titlebar", {}),
+			skinAdornment(skin, "dialog", "titlebar", {}),
 			children,
 			showCloseButton ? /* @__PURE__ */ jsxs(DialogClose, {
 				variant: "ghost",
 				size: "xs",
 				iconOnly: true,
-				className: "absolute right-3 top-3",
+				className: "absolute",
 				children: [/* @__PURE__ */ jsx("svg", {
 					viewBox: "0 0 16 16",
 					className: "size-4",

package/dist/ui/dockable-panel-geometry.d.ts

@@ -1,18 +1,17 @@
 //#region src/ui/dockable-panel-geometry.d.ts
-type DockablePanelBounds = {
+export type DockablePanelBounds = {
   width: number;
   height: number;
 };
-type DockablePanelSize = {
+export type DockablePanelSize = {
   width: number;
   height: number;
 };
-type DockablePanelPosition = {
+export type DockablePanelPosition = {
   x: number;
   y: number;
 };
-declare function clampDockablePanelPosition(position: DockablePanelPosition, bounds: DockablePanelBounds, panel: DockablePanelSize, inset?: number): DockablePanelPosition;
-declare function dockablePanelSideAt(pointerX: number, width: number): "left" | "right";
-declare function oppositeDockablePanelSide(placement: "left" | "right"): "left" | "right";
-//#endregion
-export { DockablePanelBounds, DockablePanelPosition, DockablePanelSize, clampDockablePanelPosition, dockablePanelSideAt, oppositeDockablePanelSide };
+export declare function clampDockablePanelPosition(position: DockablePanelPosition, bounds: DockablePanelBounds, panel: DockablePanelSize, inset?: number): DockablePanelPosition;
+export declare function dockablePanelSideAt(pointerX: number, width: number): "left" | "right";
+export declare function oppositeDockablePanelSide(placement: "left" | "right"): "left" | "right";
+//#endregion