@ctrl-ui/react 0.8.1 → 0.8.4

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,13 +77,14 @@ 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,

package/dist/ui/command.d.ts

@@ -3,42 +3,43 @@ import { Dialog } from "./dialog.js";
 import { CSSProperties, ComponentProps } 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"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-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, ...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

@@ -4,18 +4,19 @@ import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.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
 	});
 }
@@ -23,7 +24,7 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 	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 +36,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 +50,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 +81,59 @@ 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, ...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
+		})
 	});
 }
 function CommandGroup({ className, ...props }) {
@@ -117,12 +142,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,9 +35,10 @@ 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(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		className: "z-[80]",
 		children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, {
 			"data-control-ui": "context-menu",
@@ -179,9 +181,10 @@ 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(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		className: "z-[80]",
 		sideOffset: -4,
 		alignOffset: -5,

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(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		className: "fixed inset-0 z-[70]"
 	}), /* @__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-[71] 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

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

@@ -2,8 +2,8 @@ import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { DockablePanelKnobStyle } from "../knob-contracts/dockable-panel-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/dockable-panel.d.ts
-type DockablePanelPlacement = "left" | "right";
-type DockablePanelProps = Omit<ComponentProps<"aside">, "onChange" | "ref" | "style"> & {
+export type DockablePanelPlacement = "left" | "right";
+export type DockablePanelProps = Omit<ComponentProps<"aside">, "onChange" | "ref" | "style"> & {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -12,47 +12,46 @@ type DockablePanelProps = Omit<ComponentProps<"aside">, "onChange" | "ref" | "st
   onPlacementChange?: (placement: DockablePanelPlacement) => void;
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelHeaderProps = Omit<ComponentProps<"div">, "style"> & {
+export type DockablePanelHeaderProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelDragHandleProps = Omit<ComponentProps<"button">, "style"> & {
+export type DockablePanelDragHandleProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelTitleProps = Omit<ComponentProps<"h2">, "style"> & {
+export type DockablePanelTitleProps = Omit<ComponentProps<"h2">, "style"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelActionsProps = ComponentProps<"div"> & {
+export type DockablePanelActionsProps = ComponentProps<"div"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelToggleProps = Omit<Omit<ComponentProps<"button">, "children"> & {
+export type DockablePanelToggleProps = Omit<Omit<ComponentProps<"button">, "children"> & {
   children?: ReactNode;
 }, "style"> & {
   style?: CSSProperties & ButtonKnobStyle;
 };
-type DockablePanelDockProps = Omit<Omit<ComponentProps<"button">, "children"> & {
+export type DockablePanelDockProps = Omit<Omit<ComponentProps<"button">, "children"> & {
   placement: DockablePanelPlacement;
   children?: ReactNode;
 }, "style"> & {
   style?: CSSProperties & ButtonKnobStyle;
 };
-type DockablePanelCloseProps = Omit<Omit<ComponentProps<"button">, "children"> & {
+export type DockablePanelCloseProps = Omit<Omit<ComponentProps<"button">, "children"> & {
   children?: ReactNode;
 }, "style"> & {
   style?: CSSProperties & ButtonKnobStyle;
 };
-type DockablePanelContentPadding = "default" | "none";
-type DockablePanelContentProps = ComponentProps<"div"> & {
+export type DockablePanelContentPadding = "default" | "none";
+export type DockablePanelContentProps = ComponentProps<"div"> & {
   padding?: DockablePanelContentPadding;
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-declare function DockablePanel({ open: openProp, defaultOpen, onOpenChange, placement: placementProp, defaultPlacement, onPlacementChange, className, style, children, "aria-label": ariaLabel, ...props }: DockablePanelProps): import("react").JSX.Element | null;
-declare function DockablePanelHeader({ className, ...props }: DockablePanelHeaderProps): import("react").JSX.Element;
-declare function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, ...props }: DockablePanelDragHandleProps): import("react").JSX.Element;
-declare function DockablePanelTitle({ className, ...props }: DockablePanelTitleProps): import("react").JSX.Element;
-declare function DockablePanelActions({ className, ...props }: DockablePanelActionsProps): import("react").JSX.Element;
-declare function DockablePanelToggle({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelToggleProps): import("react").JSX.Element | null;
-declare function DockablePanelDock({ placement: nextPlacement, className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelDockProps): import("react").JSX.Element | null;
-declare function DockablePanelClose({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelCloseProps): import("react").JSX.Element;
-declare function DockablePanelContent({ padding, className, ...props }: DockablePanelContentProps): import("react").JSX.Element;
-//#endregion
-export { DockablePanel, DockablePanelActions, DockablePanelActionsProps, DockablePanelClose, DockablePanelCloseProps, DockablePanelContent, DockablePanelContentPadding, DockablePanelContentProps, DockablePanelDock, DockablePanelDockProps, DockablePanelDragHandle, DockablePanelDragHandleProps, DockablePanelHeader, DockablePanelHeaderProps, DockablePanelPlacement, DockablePanelProps, DockablePanelTitle, DockablePanelTitleProps, DockablePanelToggle, DockablePanelToggleProps };
+export declare function DockablePanel({ open: openProp, defaultOpen, onOpenChange, placement: placementProp, defaultPlacement, onPlacementChange, className, style, children, "aria-label": ariaLabel, ...props }: DockablePanelProps): import("react").JSX.Element | null;
+export declare function DockablePanelHeader({ className, ...props }: DockablePanelHeaderProps): import("react").JSX.Element;
+export declare function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, ...props }: DockablePanelDragHandleProps): import("react").JSX.Element;
+export declare function DockablePanelTitle({ className, ...props }: DockablePanelTitleProps): import("react").JSX.Element;
+export declare function DockablePanelActions({ className, ...props }: DockablePanelActionsProps): import("react").JSX.Element;
+export declare function DockablePanelToggle({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelToggleProps): import("react").JSX.Element | null;
+export declare function DockablePanelDock({ placement: nextPlacement, className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelDockProps): import("react").JSX.Element | null;
+export declare function DockablePanelClose({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelCloseProps): import("react").JSX.Element;
+export declare function DockablePanelContent({ padding, className, ...props }: DockablePanelContentProps): import("react").JSX.Element;
+//#endregion