@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/ui/table.d.ts

@@ -1,37 +1,36 @@
 import { TableKnobStyle } from "../knob-contracts/table-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/table.d.ts
-type TableProps = Omit<ComponentProps<"table">, "style"> & {
+export type TableProps = Omit<ComponentProps<"table">, "style"> & {
   style?: CSSProperties & TableKnobStyle;
 };
-type TableHeaderProps = Omit<ComponentProps<"thead">, "style"> & {
+export type TableHeaderProps = Omit<ComponentProps<"thead">, "style"> & {
   style?: CSSProperties & TableKnobStyle;
 };
-type TableBodyProps = Omit<ComponentProps<"tbody">, "style"> & {
+export type TableBodyProps = Omit<ComponentProps<"tbody">, "style"> & {
   style?: CSSProperties & TableKnobStyle;
 };
-type TableFooterProps = Omit<ComponentProps<"tfoot">, "style"> & {
+export type TableFooterProps = Omit<ComponentProps<"tfoot">, "style"> & {
   style?: CSSProperties & TableKnobStyle;
 };
-type TableRowProps = Omit<ComponentProps<"tr">, "style"> & {
+export type TableRowProps = Omit<ComponentProps<"tr">, "style"> & {
   style?: CSSProperties & TableKnobStyle;
 };
-type TableHeadProps = Omit<ComponentProps<"th">, "style"> & {
+export type TableHeadProps = Omit<ComponentProps<"th">, "style"> & {
   style?: CSSProperties & TableKnobStyle;
 };
-type TableCellProps = ComponentProps<"td"> & {
+export type TableCellProps = ComponentProps<"td"> & {
   style?: CSSProperties & TableKnobStyle;
 };
-type TableCaptionProps = Omit<ComponentProps<"caption">, "style"> & {
+export type TableCaptionProps = Omit<ComponentProps<"caption">, "style"> & {
   style?: CSSProperties & TableKnobStyle;
 };
-declare function Table({ className, ...props }: TableProps): import("react").JSX.Element;
-declare function TableHeader({ className, ...props }: TableHeaderProps): import("react").JSX.Element;
-declare function TableBody({ className, ...props }: TableBodyProps): import("react").JSX.Element;
-declare function TableFooter({ className, ...props }: TableFooterProps): import("react").JSX.Element;
-declare function TableRow({ className, ...props }: TableRowProps): import("react").JSX.Element;
-declare function TableHead({ className, ...props }: TableHeadProps): import("react").JSX.Element;
-declare function TableCell({ className, ...props }: TableCellProps): import("react").JSX.Element;
-declare function TableCaption({ className, ...props }: TableCaptionProps): import("react").JSX.Element;
-//#endregion
-export { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps };
+export declare function Table({ className, ...props }: TableProps): import("react").JSX.Element;
+export declare function TableHeader({ className, ...props }: TableHeaderProps): import("react").JSX.Element;
+export declare function TableBody({ className, ...props }: TableBodyProps): import("react").JSX.Element;
+export declare function TableFooter({ className, ...props }: TableFooterProps): import("react").JSX.Element;
+export declare function TableRow({ className, ...props }: TableRowProps): import("react").JSX.Element;
+export declare function TableHead({ className, ...props }: TableHeadProps): import("react").JSX.Element;
+export declare function TableCell({ className, ...props }: TableCellProps): import("react").JSX.Element;
+export declare function TableCaption({ className, ...props }: TableCaptionProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/tabs.d.ts

@@ -3,17 +3,20 @@ import { ControlSize } from "../control-variants.js";
 import { TabsKnobStyle } from "../knob-contracts/tabs-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/tabs.d.ts
-type TabsProps<TValue extends string = string> = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledChoice<TValue> & {
+export type TabsProps<TValue extends string = string> = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledChoice<TValue> & {
+  orientation?: "horizontal" | "vertical";
   style?: CSSProperties & TabsKnobStyle;
 };
-type TabsListVariant = "default" | "browser";
-type TabsListProps = Omit<ComponentProps<"div">, "style"> & {
+export type TabsListVariant = "default" | "browser";
+export type TabsListProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & TabsKnobStyle;
 } & {
   size?: ControlSize;
   variant?: TabsListVariant;
+  activateOnFocus?: boolean;
+  loopFocus?: boolean;
 };
-type TabsTabProps = Omit<Omit<ComponentProps<"button">, "value">, "style"> & {
+export type TabsTabProps = Omit<Omit<ComponentProps<"button">, "value">, "style"> & {
   style?: CSSProperties & TabsKnobStyle;
 } & {
   value: string;
@@ -23,14 +26,14 @@ type TabsTabProps = Omit<Omit<ComponentProps<"button">, "value">, "style"> & {
   }>;
   nativeButton?: boolean;
 };
-type TabsPanelProps = Omit<ComponentProps<"div">, "style"> & {
+export type TabsPanelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & TabsKnobStyle;
 } & {
   value: string;
+  keepMounted?: boolean;
 };
-declare function Tabs<TValue extends string = string>({ className, onValueChange, children, ...props }: TabsProps<TValue>): import("react").JSX.Element;
-declare function TabsList({ size, variant, className, children, style, ...props }: TabsListProps): import("react").JSX.Element;
-declare function TabsTab({ className, ...props }: TabsTabProps): import("react").JSX.Element;
-declare function TabsPanel({ className, value, ref, ...props }: TabsPanelProps): import("react").JSX.Element;
-//#endregion
-export { Tabs, TabsList, TabsListProps, TabsListVariant, TabsPanel, TabsPanelProps, TabsProps, TabsTab, TabsTabProps };
+export declare function Tabs<TValue extends string = string>({ className, onValueChange, children, ...props }: TabsProps<TValue>): import("react").JSX.Element;
+export declare function TabsList({ size, variant, className, children, style, ...props }: TabsListProps): import("react").JSX.Element;
+export declare function TabsTab({ className, ...props }: TabsTabProps): import("react").JSX.Element;
+export declare function TabsPanel({ className, value, ref, ...props }: TabsPanelProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/textarea.d.ts

@@ -1,9 +1,8 @@
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/textarea.d.ts
-type TextareaProps = Omit<ComponentProps<"textarea">, "style"> & {
+export type TextareaProps = Omit<ComponentProps<"textarea">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;
-//#endregion
-export { Textarea, TextareaProps };
+export declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/timeline.d.ts

@@ -1,40 +1,39 @@
 import { TimelineKnobStyle } from "../knob-contracts/timeline-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/timeline.d.ts
-type TimelineState = "neutral" | "pending" | "running" | "success" | "error";
-type TimelineProps = ComponentProps<"ol"> & {
+export type TimelineState = "neutral" | "pending" | "running" | "success" | "error";
+export type TimelineProps = ComponentProps<"ol"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };
-type TimelineItemProps = ComponentProps<"li"> & {
+export type TimelineItemProps = ComponentProps<"li"> & {
   state?: TimelineState;
 } & {
   style?: CSSProperties & TimelineKnobStyle;
 };
-type TimelineIndicatorProps = Omit<ComponentProps<"span">, "style"> & {
+export type TimelineIndicatorProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };
-type TimelineSeparatorProps = Omit<ComponentProps<"span">, "style"> & {
+export type TimelineSeparatorProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };
-type TimelineContentProps = ComponentProps<"div"> & {
+export type TimelineContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };
-type TimelineTitleProps = Omit<ComponentProps<"div">, "style"> & {
+export type TimelineTitleProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };
-type TimelineDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
+export type TimelineDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };
-type TimelineMetaProps = ComponentProps<"div"> & {
+export type TimelineMetaProps = ComponentProps<"div"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };
-declare function Timeline({ className, ...props }: TimelineProps): import("react").JSX.Element;
-declare function TimelineItem({ state, className, ...props }: TimelineItemProps): import("react").JSX.Element;
-declare function TimelineIndicator({ className, ...props }: TimelineIndicatorProps): import("react").JSX.Element;
-declare function TimelineSeparator({ className, ...props }: TimelineSeparatorProps): import("react").JSX.Element;
-declare function TimelineContent({ className, ...props }: TimelineContentProps): import("react").JSX.Element;
-declare function TimelineTitle({ className, ...props }: TimelineTitleProps): import("react").JSX.Element;
-declare function TimelineDescription({ className, ...props }: TimelineDescriptionProps): import("react").JSX.Element;
-declare function TimelineMeta({ className, ...props }: TimelineMetaProps): import("react").JSX.Element;
-//#endregion
-export { Timeline, TimelineContent, TimelineContentProps, TimelineDescription, TimelineDescriptionProps, TimelineIndicator, TimelineIndicatorProps, TimelineItem, TimelineItemProps, TimelineMeta, TimelineMetaProps, TimelineProps, TimelineSeparator, TimelineSeparatorProps, TimelineState, TimelineTitle, TimelineTitleProps };
+export declare function Timeline({ className, ...props }: TimelineProps): import("react").JSX.Element;
+export declare function TimelineItem({ state, className, ...props }: TimelineItemProps): import("react").JSX.Element;
+export declare function TimelineIndicator({ className, ...props }: TimelineIndicatorProps): import("react").JSX.Element;
+export declare function TimelineSeparator({ className, ...props }: TimelineSeparatorProps): import("react").JSX.Element;
+export declare function TimelineContent({ className, ...props }: TimelineContentProps): import("react").JSX.Element;
+export declare function TimelineTitle({ className, ...props }: TimelineTitleProps): import("react").JSX.Element;
+export declare function TimelineDescription({ className, ...props }: TimelineDescriptionProps): import("react").JSX.Element;
+export declare function TimelineMeta({ className, ...props }: TimelineMetaProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/toast.d.ts

@@ -1,19 +1,20 @@
+import { ButtonProps } from "./button.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ReactNode } from "react";
 import { Toast } from "@base-ui/react/toast";
 //#region src/ui/toast.d.ts
-type ToasterProps = {
+export type ToasterProps = {
   className?: string;
   timeout?: number;
   limit?: number;
   rootStyle?: CSSProperties & PopupKnobStyle;
   indicatorStyle?: CSSProperties & PopupKnobStyle;
-  actionStyle?: CSSProperties & PopupKnobStyle;
-  closeStyle?: CSSProperties & PopupKnobStyle;
+  actionStyle?: ButtonProps["style"];
+  closeStyle?: ButtonProps["style"];
 };
-declare const toastManager: import("@base-ui/react").ToastManager<any>;
+export declare const toastManager: import("@base-ui/react").ToastManager<any>;
 type ToastOptions = Omit<Parameters<typeof toastManager.add>[0], "title">;
-declare const toast: ((title: ReactNode, options?: ToastOptions) => string) & {
+export declare const toast: ((title: ReactNode, options?: ToastOptions) => string) & {
   success: (title: ReactNode, options?: ToastOptions) => string;
   error: (title: ReactNode, options?: ToastOptions) => string;
   warning: (title: ReactNode, options?: ToastOptions) => string;
@@ -22,7 +23,6 @@ declare const toast: ((title: ReactNode, options?: ToastOptions) => string) & {
   promise: (...args: Parameters<typeof toastManager.promise>) => Promise<unknown>;
   dismiss: (id?: string) => void;
 };
-declare const useToast: typeof Toast.useToastManager;
-declare function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }: ToasterProps): import("react").JSX.Element;
-//#endregion
-export { Toaster, ToasterProps, toast, toastManager, useToast };
+export declare const useToast: typeof Toast.useToastManager;
+export declare function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }: ToasterProps): import("react").JSX.Element;
+//#endregion

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
@@ -41,7 +43,7 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 			style: rootStyle,
 			"data-slot": "root",
 			"data-surface": "floating",
-			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute right-0 bottom-0 left-auto z-[calc(1000-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
+			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute right-0 bottom-0 left-auto z-[calc(var(--z-toast)-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
 			children: /* @__PURE__ */ jsxs(Toast.Content, {
 				"data-control-ui": "toast",
 				"data-control-family": "popup",
@@ -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,9 +123,9 @@ 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(),
-			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),
+			"data-skin": skin.id,
+			"data-effects": controlEffectsAttribute(skin.effects),
+			className: cn("fixed right-4 bottom-4 z-(--z-toast) mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-[22.5rem]", className),
 			children: /* @__PURE__ */ jsx(ToastList, {
 				rootStyle,
 				indicatorStyle,

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,9 +44,9 @@ 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(),
-		className: "z-[90]",
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
+		className: "z-(--z-tooltip)",
 		...positionerProps,
 		children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
 			ref,

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,