@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/ui/toast.js

@@ -1,6 +1,8 @@
 "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 { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
 //#region src/ui/toast.tsx
@@ -73,24 +75,28 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 						}) : null]
 					}),
 					entry.actionProps ? /* @__PURE__ */ jsx(Toast.Action, {
-						"data-control-ui": "toast",
-						"data-control-family": "popup",
-						"data-popup-kind": "toast",
-						"data-slot": "action",
 						style: actionStyle,
-						className: "shrink-0 cursor-pointer"
+						render: (renderProps) => /* @__PURE__ */ jsx(Button, {
+							...renderProps,
+							"data-popup-kind": "toast",
+							"data-popup-part": "action",
+							variant: "surface",
+							size: "xs"
+						})
 					}) : null,
 					/* @__PURE__ */ jsx(Toast.Close, {
-						"data-control-ui": "toast",
-						"data-control-family": "popup",
-						"data-popup-kind": "toast",
-						"data-slot": "close",
 						style: closeStyle,
 						"aria-label": "Close",
-						className: "shrink-0 cursor-pointer",
+						render: (renderProps) => /* @__PURE__ */ jsx(Button, {
+							...renderProps,
+							"data-popup-kind": "toast",
+							"data-popup-part": "close",
+							variant: "quiet",
+							size: "xs",
+							iconOnly: true
+						}),
 						children: /* @__PURE__ */ jsx("svg", {
 							viewBox: "0 0 16 16",
-							className: "size-4",
 							"aria-hidden": "true",
 							fill: "none",
 							children: /* @__PURE__ */ jsx("path", {
@@ -107,6 +113,7 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 	});
 }
 function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Toast.Provider, {
 		toastManager,
 		timeout,
@@ -116,8 +123,8 @@ function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionS
 			"data-control-family": "popup",
 			"data-popup-kind": "toast",
 			"data-slot": "viewport",
-			"data-skin": skinId(),
-			"data-effects": skinEffects(),
+			"data-skin": skin.id,
+			"data-effects": controlEffectsAttribute(skin.effects),
 			className: cn("fixed right-4 bottom-4 z-[95] mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-[22.5rem]", className),
 			children: /* @__PURE__ */ jsx(ToastList, {
 				rootStyle,

package/dist/ui/toggle.d.ts

@@ -2,20 +2,19 @@ import { ControlledMultiChoice, HoverIndicator } from "../control-props.js";
 import { ButtonProps } from "./button.js";
 import { ComponentProps } from "react";
 //#region src/ui/toggle.d.ts
-type ToggleProps = Omit<ButtonProps, "render" | "nativeButton" | "value"> & {
+export type ToggleProps = Omit<ButtonProps, "render" | "nativeButton" | "value"> & {
   pressed?: boolean;
   defaultPressed?: boolean;
   onPressedChange?: (pressed: boolean) => void;
   value?: string;
   showCheck?: boolean;
 };
-type ToggleGroupProps<TValue extends string = string> = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice<TValue> & {
+export type ToggleGroupProps<TValue extends string = string> = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledMultiChoice<TValue> & {
   multiple?: boolean;
   disabled?: boolean;
   orientation?: "horizontal" | "vertical";
   indicator?: HoverIndicator;
 };
-declare function Toggle({ variant, size, tone, active, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
-declare function ToggleGroup<TValue extends string = string>({ className, orientation, indicator, children, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
-//#endregion
-export { Toggle, ToggleGroup, ToggleGroupProps, ToggleProps };
+export declare function Toggle({ variant, size, tone, active, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
+export declare function ToggleGroup<TValue extends string = string>({ className, orientation, indicator, children, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
+//#endregion

package/dist/ui/toggle.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinIndicator } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { ButtonTrackContext, buttonContentClasses, buttonStructureClasses, buttonTrackStructureClasses } from "./button.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { useContext } from "react";
@@ -62,7 +62,8 @@ function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, sh
 	});
 }
 function ToggleGroup({ className, orientation = "horizontal", indicator, children, ...props }) {
-	const resolvedIndicator = indicator ?? skinIndicator("toggle-group") ?? "none";
+	const skin = useSkin();
+	const resolvedIndicator = indicator ?? skin.indicators?.["toggle-group"] ?? "none";
 	const tracksHover = resolvedIndicator === "hover";
 	return /* @__PURE__ */ jsx(ButtonTrackContext, {
 		value: tracksHover,

package/dist/ui/toolbar.d.ts

@@ -2,39 +2,38 @@ import { ToolbarKnobStyle } from "../knob-contracts/toolbar-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 //#region src/ui/toolbar.d.ts
-type ToolbarVariant = "default" | "inverse";
-type ToolbarLinkVariant = "default" | "track";
-type ToolbarProps = Omit<ComponentProps<"div">, "style"> & {
+export type ToolbarVariant = "default" | "inverse" | "floating";
+export type ToolbarLinkVariant = "default" | "track";
+export type ToolbarProps = Omit<ComponentProps<"div">, "style"> & {
   orientation?: "horizontal" | "vertical";
   variant?: ToolbarVariant;
   style?: CSSProperties & ToolbarKnobStyle;
 };
-type ToolbarButtonProps = Omit<ComponentProps<"button">, "style"> & {
+export type ToolbarButtonProps = Omit<ComponentProps<"button">, "style"> & {
   iconOnly?: boolean;
   style?: CSSProperties & ToolbarKnobStyle;
 };
-type ToolbarLinkProps = Omit<ComponentProps<"a">, "style"> & {
+export type ToolbarLinkProps = Omit<ComponentProps<"a">, "style"> & {
   variant?: ToolbarLinkVariant;
   style?: CSSProperties & ToolbarKnobStyle;
 };
-type ToolbarGroupProps = ComponentProps<"div"> & {
+export type ToolbarGroupProps = ComponentProps<"div"> & {
   style?: CSSProperties & ToolbarKnobStyle;
 };
-type ToolbarSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+export type ToolbarSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
   orientation?: "horizontal" | "vertical";
   style?: CSSProperties & ToolbarKnobStyle;
 };
-type ToolbarInputProps = Omit<ComponentProps<"input">, "style"> & {
+export type ToolbarInputProps = Omit<ComponentProps<"input">, "style"> & {
   style?: CSSProperties & ToolbarKnobStyle;
 };
-declare function Toolbar({ orientation, variant, className, ...props }: ToolbarProps): import("react").JSX.Element;
+export declare function Toolbar({ orientation, variant, className, children, ...props }: ToolbarProps): import("react").JSX.Element;
 type RefinedToolbarButtonProps = ToolbarButtonProps & Pick<ComponentProps<typeof Toolbar$1.Button>, "render">;
-declare function ToolbarButton({ iconOnly, className, ...props }: RefinedToolbarButtonProps): import("react").JSX.Element;
+export declare function ToolbarButton({ iconOnly, className, ...props }: RefinedToolbarButtonProps): import("react").JSX.Element;
 type RefinedToolbarLinkProps = ToolbarLinkProps & Pick<ComponentProps<typeof Toolbar$1.Link>, "render">;
-declare function ToolbarLink({ variant, className, ...props }: RefinedToolbarLinkProps): import("react").JSX.Element;
-declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
-declare function ToolbarSeparator({ orientation, className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
+export declare function ToolbarLink({ variant, className, ...props }: RefinedToolbarLinkProps): import("react").JSX.Element;
+export declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
+export declare function ToolbarSeparator({ orientation, className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
 type RefinedToolbarInputProps = ToolbarInputProps & Pick<ComponentProps<typeof Toolbar$1.Input>, "render">;
-declare function ToolbarInput({ className, ...props }: RefinedToolbarInputProps): import("react").JSX.Element;
-//#endregion
-export { Toolbar, ToolbarButton, ToolbarButtonProps, ToolbarGroup, ToolbarGroupProps, ToolbarInput, ToolbarInputProps, ToolbarLink, ToolbarLinkProps, ToolbarLinkVariant, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, ToolbarVariant };
+export declare function ToolbarInput({ className, ...props }: RefinedToolbarInputProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/toolbar.js

@@ -1,17 +1,28 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
 //#region src/ui/toolbar.tsx
-function Toolbar({ orientation = "horizontal", variant = "default", className, ...props }) {
-	return /* @__PURE__ */ jsx(Toolbar$1.Root, {
+function Toolbar({ orientation = "horizontal", variant = "default", className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Toolbar$1.Root, {
 		orientation,
 		"data-control-ui": "toolbar",
 		"data-control-family": "toolbar",
 		"data-slot": "root",
 		"data-variant": variant,
 		className: cn("group/toolbar inline-flex", orientation === "vertical" ? "flex-col items-stretch" : "items-center", className),
-		...props
+		...props,
+		children: [variant === "floating" && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			"data-control-ui": "toolbar",
+			"data-control-family": "popup",
+			"data-popup-kind": "toolbar",
+			"data-popup-part": "surface",
+			"data-popup-static": "",
+			"data-surface": "floating",
+			"data-slot": "surface",
+			className: "pointer-events-none absolute inset-0 -z-1"
+		}), children]
 	});
 }
 function ToolbarButton({ iconOnly = false, className, ...props }) {

package/dist/ui/tooltip.d.ts

@@ -2,26 +2,19 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, Ref } from "react";
 import { Tooltip as Tooltip$1, TooltipPopupProps, TooltipPositionerProps } from "@base-ui/react/tooltip";
 //#region src/ui/tooltip.d.ts
-type TooltipProviderProps = Omit<ComponentProps<typeof Tooltip$1.Provider>, "delay" | "timeout"> & {
-  delay?: number;
-  timeout?: number;
-  delayDuration?: number;
-  skipDelayDuration?: number;
-};
-declare function TooltipProvider({ delay, delayDuration, timeout, skipDelayDuration, ...props }: TooltipProviderProps): import("react").JSX.Element;
-declare function Tooltip(props: ComponentProps<typeof Tooltip$1.Root>): import("react").JSX.Element;
+export declare function TooltipProvider({ delay, ...props }: ComponentProps<typeof Tooltip$1.Provider>): import("react").JSX.Element;
+export declare function Tooltip(props: ComponentProps<typeof Tooltip$1.Root>): import("react").JSX.Element;
 type TooltipTriggerProps = ComponentProps<typeof Tooltip$1.Trigger> & {
   ref?: Ref<HTMLButtonElement>;
 };
-declare function TooltipTrigger({ render, children, ref, ...props }: TooltipTriggerProps): import("react").JSX.Element;
+export declare function TooltipTrigger({ render, children, ref, ...props }: TooltipTriggerProps): import("react").JSX.Element;
 type TooltipContentPositionerProps = Omit<TooltipPositionerProps, keyof TooltipPopupProps>;
-type TooltipContentProps = Omit<TooltipPopupProps & Omit<TooltipContentPositionerProps, "style">, "style"> & {
+export type TooltipContentProps = Omit<TooltipPopupProps & Omit<TooltipContentPositionerProps, "style">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   arrow?: boolean;
   hidden?: boolean;
   ref?: Ref<HTMLDivElement>;
 };
-declare function TooltipContent({ className, children, side, sideOffset, align, alignOffset, arrowPadding, anchor, positionMethod, collisionBoundary, collisionPadding, sticky, disableAnchorTracking, collisionAvoidance, arrow, hidden, ref, ...props }: TooltipContentProps): import("react").JSX.Element | null;
-//#endregion
-export { Tooltip, TooltipContent, TooltipContentProps, TooltipProvider, TooltipTrigger };
+export declare function TooltipContent({ className, children, side, sideOffset, align, alignOffset, arrowPadding, anchor, positionMethod, collisionBoundary, collisionPadding, sticky, disableAnchorTracking, collisionAvoidance, arrow, hidden, ref, ...props }: TooltipContentProps): import("react").JSX.Element | null;
+//#endregion

package/dist/ui/tooltip.js

@@ -1,15 +1,13 @@
 "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 { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/ui/tooltip.tsx
-function TooltipProvider({ delay, delayDuration, timeout, skipDelayDuration, ...props }) {
-	const resolvedDelay = delay ?? delayDuration;
-	const resolvedTimeout = timeout ?? skipDelayDuration;
+function TooltipProvider({ delay = 500, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
-		...resolvedDelay !== void 0 ? { delay: resolvedDelay } : {},
-		...resolvedTimeout !== void 0 ? { timeout: resolvedTimeout } : {},
+		delay,
 		...props
 	});
 }
@@ -25,6 +23,7 @@ function TooltipTrigger({ render, children, ref, ...props }) {
 	});
 }
 function TooltipContent({ className, children, side = "top", sideOffset = 8, align = "center", alignOffset = 0, arrowPadding = 10, anchor, positionMethod, collisionBoundary, collisionPadding, sticky, disableAnchorTracking, collisionAvoidance, arrow = true, hidden = false, ref, ...props }) {
+	const skin = useSkin();
 	if (hidden) return null;
 	const positionerProps = {
 		side,
@@ -45,8 +44,8 @@ function TooltipContent({ className, children, side = "top", sideOffset = 8, ali
 		"data-popup-kind": "tooltip",
 		"data-control-family": "popup",
 		"data-slot": "positioner",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		className: "z-[90]",
 		...positionerProps,
 		children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {

package/dist/ui/tree.d.ts

@@ -2,19 +2,19 @@ import { RenderProp, SelectionIndicator } from "../control-props.js";
 import { TreeKnobStyle } from "../knob-contracts/tree-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/tree.d.ts
-type TreeSelectionMode = "none" | "single" | "multiple";
-type TreeInteractionReason = "pointer" | "keyboard" | "imperative";
-type TreeSelectionChangeDetails = {
+export type TreeSelectionMode = "none" | "single" | "multiple";
+export type TreeInteractionReason = "pointer" | "keyboard" | "imperative";
+export type TreeSelectionChangeDetails = {
   value: string;
   reason: TreeInteractionReason;
 };
-type TreeExpandedChangeDetails = {
+export type TreeExpandedChangeDetails = {
   value: string;
   expanded: boolean;
   reason: TreeInteractionReason;
 };
-type TreeSelectionIndicator = SelectionIndicator;
-type TreeProps = Omit<Omit<ComponentProps<"ul">, "onChange" | "defaultValue">, "style"> & {
+export type TreeSelectionIndicator = SelectionIndicator;
+export type TreeProps = Omit<Omit<ComponentProps<"ul">, "onChange" | "defaultValue">, "style"> & {
   style?: CSSProperties & TreeKnobStyle;
 } & {
   selectionMode?: TreeSelectionMode;
@@ -26,31 +26,30 @@ type TreeProps = Omit<Omit<ComponentProps<"ul">, "onChange" | "defaultValue">, "
   onExpandedChange?: (expanded: string[], details: TreeExpandedChangeDetails) => void;
   indicator?: TreeSelectionIndicator;
 };
-type TreeItemProps = Omit<ComponentProps<"li">, "value"> & {
+export type TreeItemProps = Omit<ComponentProps<"li">, "value"> & {
   value: string;
   disabled?: boolean;
   label?: string;
   children?: ReactNode;
 };
-type TreeItemTriggerProps = Omit<ComponentProps<"div">, "style"> & {
+export type TreeItemTriggerProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & TreeKnobStyle;
 } & {
   render?: RenderProp<ComponentProps<"div">>;
 };
-type TreeItemIndicatorProps = Omit<ComponentProps<"span">, "style"> & {
+export type TreeItemIndicatorProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & TreeKnobStyle;
 };
-type TreeItemLabelProps = ComponentProps<"span"> & {
+export type TreeItemLabelProps = ComponentProps<"span"> & {
   render?: RenderProp<ComponentProps<"span">>;
 };
-type TreeItemContentProps = ComponentProps<"div"> & {
+export type TreeItemContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & TreeKnobStyle;
 };
-declare function Tree({ selectionMode, indicator, value, defaultValue, onValueChange, expandedValue, defaultExpandedValue, onExpandedChange, className, style, children, onKeyDown, onFocusCapture, ...props }: TreeProps): import("react").JSX.Element;
-declare function TreeItem({ value, disabled, label, className, style, children, ref, ...props }: TreeItemProps): import("react").JSX.Element;
-declare function TreeItemTrigger({ className, children, onClick, render, ...props }: TreeItemTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function TreeItemIndicator({ className, children, ...props }: TreeItemIndicatorProps): import("react").JSX.Element;
-declare function TreeItemLabel({ className, children, render, ref, ...props }: TreeItemLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function TreeItemContent({ className, children, ...props }: TreeItemContentProps): import("react").JSX.Element;
-//#endregion
-export { Tree, TreeExpandedChangeDetails, TreeInteractionReason, TreeItem, TreeItemContent, TreeItemContentProps, TreeItemIndicator, TreeItemIndicatorProps, TreeItemLabel, TreeItemLabelProps, TreeItemProps, TreeItemTrigger, TreeItemTriggerProps, TreeProps, TreeSelectionChangeDetails, TreeSelectionIndicator, TreeSelectionMode };
+export declare function Tree({ selectionMode, indicator, value, defaultValue, onValueChange, expandedValue, defaultExpandedValue, onExpandedChange, className, style, children, onKeyDown, onFocusCapture, ...props }: TreeProps): import("react").JSX.Element;
+export declare function TreeItem({ value, disabled, label, className, style, children, ref, ...props }: TreeItemProps): import("react").JSX.Element;
+export declare function TreeItemTrigger({ className, children, onClick, render, ...props }: TreeItemTriggerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TreeItemIndicator({ className, children, ...props }: TreeItemIndicatorProps): import("react").JSX.Element;
+export declare function TreeItemLabel({ className, children, render, ref, ...props }: TreeItemLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TreeItemContent({ className, children, ...props }: TreeItemContentProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/tree.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinIndicator } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { Children, createContext, isValidElement, useContext, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
@@ -128,6 +128,7 @@ function handleTreeKeyDown(event, ctx, typeahead) {
 	}
 }
 function Tree({ selectionMode = "single", indicator, value, defaultValue, onValueChange, expandedValue, defaultExpandedValue, onExpandedChange, className, style, children, onKeyDown, onFocusCapture, ...props }) {
+	const skin = useSkin();
 	const [selectedState, setSelectedState] = useState(() => new Set(defaultValue));
 	const [expandedState, setExpandedState] = useState(() => new Set(defaultExpandedValue));
 	const [focusedValue, setFocusedValue] = useState(null);
@@ -194,7 +195,7 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 			reason
 		});
 	};
-	const resolvedIndicator = indicator ?? skinIndicator("tree") ?? "none";
+	const resolvedIndicator = indicator ?? skin.indicators?.tree ?? "none";
 	const contextValue = {
 		selectionMode,
 		indicator: resolvedIndicator,

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

@@ -2,7 +2,7 @@ import { OpenChangeEventDetails } from "../control-props.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/trigger-menu.d.ts
-type TriggerMenuProps = {
+export type TriggerMenuProps = {
   open: boolean;
   onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
   anchorRect: DOMRect | null;
@@ -14,33 +14,32 @@ type TriggerMenuProps = {
 } & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type TriggerMenuListProps = ComponentProps<"div"> & {
+export type TriggerMenuListProps = ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type TriggerMenuItemProps = Omit<Omit<ComponentProps<"div">, "onSelect"> & {
+export type TriggerMenuItemProps = Omit<Omit<ComponentProps<"div">, "onSelect"> & {
   active?: boolean;
   disabled?: boolean;
 }, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type TriggerMenuEmptyProps = Omit<ComponentProps<"div">, "style"> & {
+export type TriggerMenuEmptyProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type TriggerMenuGroupProps = ComponentProps<"div"> & {
+export type TriggerMenuGroupProps = ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type TriggerMenuGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+export type TriggerMenuGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type TriggerMenuIconProps = Omit<ComponentProps<"span">, "style"> & {
+export type TriggerMenuIconProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function TriggerMenu({ open, onOpenChange, anchorRect, side, align, sideOffset, className, children }: TriggerMenuProps): import("react").JSX.Element;
-declare function TriggerMenuList({ className, ...props }: TriggerMenuListProps): import("react").JSX.Element;
-declare function TriggerMenuItem({ className, active, disabled, onMouseDown, ...props }: TriggerMenuItemProps): import("react").JSX.Element;
-declare function TriggerMenuIcon({ className, ...props }: TriggerMenuIconProps): import("react").JSX.Element;
-declare function TriggerMenuEmpty({ className, ...props }: TriggerMenuEmptyProps): import("react").JSX.Element;
-declare function TriggerMenuGroup({ className, ...props }: TriggerMenuGroupProps): import("react").JSX.Element;
-declare function TriggerMenuGroupLabel({ className, ...props }: TriggerMenuGroupLabelProps): import("react").JSX.Element;
-//#endregion
-export { TriggerMenu, TriggerMenuEmpty, TriggerMenuEmptyProps, TriggerMenuGroup, TriggerMenuGroupLabel, TriggerMenuGroupLabelProps, TriggerMenuGroupProps, TriggerMenuIcon, TriggerMenuIconProps, TriggerMenuItem, TriggerMenuItemProps, TriggerMenuList, TriggerMenuListProps, TriggerMenuProps };
+export declare function TriggerMenu({ open, onOpenChange, anchorRect, side, align, sideOffset, className, children }: TriggerMenuProps): import("react").JSX.Element;
+export declare function TriggerMenuList({ className, ...props }: TriggerMenuListProps): import("react").JSX.Element;
+export declare function TriggerMenuItem({ className, active, disabled, onMouseDown, ...props }: TriggerMenuItemProps): import("react").JSX.Element;
+export declare function TriggerMenuIcon({ className, ...props }: TriggerMenuIconProps): import("react").JSX.Element;
+export declare function TriggerMenuEmpty({ className, ...props }: TriggerMenuEmptyProps): import("react").JSX.Element;
+export declare function TriggerMenuGroup({ className, ...props }: TriggerMenuGroupProps): import("react").JSX.Element;
+export declare function TriggerMenuGroupLabel({ className, ...props }: TriggerMenuGroupLabelProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/trigger-menu.js

@@ -1,11 +1,13 @@
 "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 } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/ui/trigger-menu.tsx
 function TriggerMenu({ open, onOpenChange, anchorRect, side = "top", align = "start", sideOffset = 8, className, children }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		open,
 		onOpenChange: (next, eventDetails) => onOpenChange?.(next, eventDetails),
@@ -15,8 +17,8 @@ function TriggerMenu({ open, onOpenChange, anchorRect, side = "top", align = "st
 			"data-popup-kind": "trigger-menu",
 			"data-control-family": "popup",
 			"data-slot": "positioner",
-			"data-skin": skinId(),
-			"data-effects": skinEffects(),
+			"data-skin": skin.id,
+			"data-effects": controlEffectsAttribute(skin.effects),
 			anchor: anchorRect === null ? void 0 : () => ({ getBoundingClientRect: () => anchorRect }),
 			side,
 			align,

package/dist/ui/use-switch-drag.d.ts

@@ -0,0 +1,7 @@
+//#region src/ui/use-switch-drag.d.ts
+export declare function useSwitchDrag(): {
+  thumbRef: import("react").RefObject<HTMLSpanElement | null>;
+  dragProps: Pick<import("@base-ui/react").SwitchRootProps, "onClick" | "onKeyDown" | "onLostPointerCapture" | "onPointerCancel" | "onPointerDown" | "onPointerMove" | "onPointerUp">;
+  dragProgress: number | null;
+};
+//#endregion

package/dist/ui/use-switch-drag.js

@@ -0,0 +1,104 @@
+"use client";
+import { useRef, useState } from "react";
+//#region src/ui/use-switch-drag.ts
+const dragThresholdPx = 3;
+function switchDragProgress(gesture, clientX) {
+	const deltaX = (clientX - gesture.startX) * gesture.direction;
+	return Math.max(0, Math.min(1, gesture.startProgress + deltaX / gesture.travel));
+}
+function isSwitchLocked(root) {
+	return root.hasAttribute("data-disabled") || root.hasAttribute("data-readonly");
+}
+function useSwitchDrag() {
+	const thumbRef = useRef(null);
+	const [dragProgress, setDragProgress] = useState(null);
+	const gestureRef = useRef(null);
+	function cancelDrag(gesture) {
+		gesture.canceled = true;
+		setDragProgress(null);
+	}
+	return {
+		thumbRef,
+		dragProps: {
+			onPointerDown(event) {
+				const root = event.currentTarget;
+				if (!(event.isPrimary && event.button === 0 && !isSwitchLocked(root)) || !thumbRef.current) return;
+				setDragProgress(null);
+				const styles = getComputedStyle(root);
+				const travel = root.clientWidth - Number.parseFloat(styles.paddingLeft) - Number.parseFloat(styles.paddingRight) - thumbRef.current.offsetWidth;
+				if (travel <= 0) return;
+				const progress = root.hasAttribute("data-checked") ? 1 : 0;
+				gestureRef.current = {
+					pointerId: event.pointerId,
+					startX: event.clientX,
+					startY: event.clientY,
+					startProgress: progress,
+					travel,
+					direction: styles.direction === "rtl" ? -1 : 1,
+					dragged: false,
+					released: false,
+					canceled: false
+				};
+				root.setPointerCapture(event.pointerId);
+			},
+			onPointerMove(event) {
+				const gesture = gestureRef.current;
+				if (!gesture || gesture.pointerId !== event.pointerId || gesture.released) return;
+				const root = event.currentTarget;
+				if (gesture.canceled || isSwitchLocked(root)) {
+					cancelDrag(gesture);
+					return;
+				}
+				const deltaX = event.clientX - gesture.startX;
+				const deltaY = event.clientY - gesture.startY;
+				if (!gesture.dragged) {
+					if (Math.abs(deltaY) > Math.max(dragThresholdPx, Math.abs(deltaX))) {
+						cancelDrag(gesture);
+						return;
+					}
+					if (Math.abs(deltaX) < dragThresholdPx) return;
+					gesture.dragged = true;
+				}
+				setDragProgress(switchDragProgress(gesture, event.clientX));
+			},
+			onPointerUp(event) {
+				const gesture = gestureRef.current;
+				if (!gesture || gesture.pointerId !== event.pointerId) return;
+				gesture.released = true;
+				setDragProgress(null);
+				if (!gesture.dragged || gesture.canceled) return;
+				const root = event.currentTarget;
+				const shouldToggle = switchDragProgress(gesture, event.clientX) >= .5 !== root.hasAttribute("data-checked") && !isSwitchLocked(root);
+				gesture.canceled = true;
+				if (shouldToggle) root.click();
+			},
+			onPointerCancel(event) {
+				const gesture = gestureRef.current;
+				if (!gesture || gesture.pointerId !== event.pointerId) return;
+				cancelDrag(gesture);
+			},
+			onLostPointerCapture(event) {
+				const gesture = gestureRef.current;
+				if (!gesture || gesture.pointerId !== event.pointerId || gesture.released) return;
+				cancelDrag(gesture);
+			},
+			onKeyDown(event) {
+				if (event.key !== "Escape" || !gestureRef.current) return;
+				cancelDrag(gestureRef.current);
+			},
+			onClick(event) {
+				if (event.detail === 0) return;
+				const gesture = gestureRef.current;
+				gestureRef.current = null;
+				if (gesture?.canceled) {
+					event.preventDefault();
+					event.stopPropagation();
+					event.preventBaseUIHandler();
+				}
+			}
+		},
+		dragProgress
+	};
+}
+//#endregion
+export { useSwitchDrag };