@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/ui/skeleton.js

@@ -1,13 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/skeleton.tsx
-function Skeleton({ className, ...props }) {
+const skeletonVariants = [
+	"shimmer",
+	"pulse",
+	"none"
+];
+function Skeleton({ variant = "shimmer", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
 		"data-control-ui": "skeleton",
 		"data-control-family": "skeleton",
 		"data-slot": "root",
+		"data-variant": variant,
 		className,
 		...props
 	});
 }
 //#endregion
-export { Skeleton };
+export { Skeleton, skeletonVariants };

package/dist/ui/slider.d.ts

@@ -1,12 +1,14 @@
 import { RangeKnobStyle } from "../knob-contracts/range-knobs.js";
 import { CSSProperties } from "react";
 //#region src/ui/slider.d.ts
-type SliderVariant = "default" | "plain";
-type SliderProps = Omit<{
+export type SliderVariant = "default" | "plain";
+export type SliderProps = Omit<{
   variant?: SliderVariant;
   value?: number;
   defaultValue?: number;
   onValueChange?: (value: number) => void;
+  onValueCommitted?: (value: number) => void;
+  orientation?: "horizontal" | "vertical";
   min?: number;
   max?: number;
   step?: number;
@@ -19,6 +21,5 @@ type SliderProps = Omit<{
 }, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-declare function Slider({ className, variant, label, showValue, formatValue, value, defaultValue, onValueChange, min, max, step, disabled, style, ...props }: SliderProps): import("react").JSX.Element;
-//#endregion
-export { Slider, SliderProps, SliderVariant };
+export declare function Slider({ className, variant, label, showValue, formatValue, value, defaultValue, onValueChange, onValueCommitted, orientation, min, max, step, disabled, style, "aria-label": ariaLabel, ...props }: SliderProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/slider.js

@@ -17,19 +17,17 @@ function displaySliderValue(values, formatValue) {
 	if (value === void 0) return "";
 	return formatValue ? formatValue(value) : Math.round(value);
 }
-function Slider({ className, variant = "default", label, showValue, formatValue, value, defaultValue, onValueChange, min = 0, max = 100, step, disabled, style, ...props }) {
+function Slider({ className, variant = "default", label, showValue, formatValue, value, defaultValue, onValueChange, onValueCommitted, orientation = "horizontal", min = 0, max = 100, step, disabled, style, "aria-label": ariaLabel, ...props }) {
 	const showValueResolved = showValue ?? Boolean(label);
 	const labeled = variant === "plain" && (label !== void 0 || showValue === true);
 	const ticks = labeled ? tickPositions(min, max, step) : [];
-	const trackStyle = style;
-	const indicatorStyle = style;
-	const thumbStyle = style;
 	return /* @__PURE__ */ jsxs(Slider$1.Root, {
 		"data-control-ui": "slider",
 		"data-range-kind": "slider",
 		"data-slot": "root",
 		"data-control-family": "range",
 		"data-variant": variant,
+		orientation,
 		"data-labeled": labeled ? "true" : void 0,
 		value,
 		defaultValue,
@@ -37,8 +35,9 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 		max,
 		step,
 		disabled,
-		onValueChange: onValueChange ? (next) => onValueChange(Array.isArray(next) ? next[0] : next) : void 0,
-		className: cn("group relative flex w-full cursor-pointer touch-none select-none items-center data-[disabled]:cursor-not-allowed", className),
+		onValueChange,
+		onValueCommitted,
+		className: cn("group relative flex cursor-pointer touch-none select-none items-center data-[disabled]:cursor-not-allowed", orientation === "vertical" ? "min-h-20 w-fit" : "w-full", className),
 		style,
 		...props,
 		children: [/* @__PURE__ */ jsx(Slider$1.Control, {
@@ -47,7 +46,7 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 			"data-range-kind": "slider",
 			"data-slot": "control",
 			"data-labeled": labeled ? "true" : void 0,
-			className: "flex w-full items-center",
+			className: cn("flex items-center", orientation === "vertical" ? "h-full" : "w-full"),
 			children: /* @__PURE__ */ jsxs(Slider$1.Track, {
 				"data-control-ui": "slider",
 				"data-control-family": "range",
@@ -55,8 +54,8 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 				"data-slot": "track",
 				"data-variant": variant,
 				"data-labeled": labeled ? "true" : void 0,
-				className: "relative w-full grow overflow-hidden",
-				style: trackStyle,
+				className: cn("relative grow", orientation === "vertical" ? "h-full" : "w-full"),
+				style,
 				children: [
 					/* @__PURE__ */ jsx(Slider$1.Indicator, {
 						"data-control-ui": "slider",
@@ -64,7 +63,7 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 						"data-range-kind": "slider",
 						"data-slot": "indicator",
 						"data-variant": variant,
-						style: indicatorStyle
+						style
 					}),
 					ticks.map((pct) => /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
@@ -72,17 +71,21 @@ function Slider({ className, variant = "default", label, showValue, formatValue,
 						"data-control-family": "range",
 						"data-range-kind": "slider",
 						"data-slot": "tick",
-						className: "pointer-events-none absolute bottom-0",
-						style: { left: `${pct}%` }
+						className: "pointer-events-none absolute",
+						style: orientation === "vertical" ? { bottom: `${pct}%` } : {
+							left: `${pct}%`,
+							bottom: 0
+						}
 					}, pct)),
 					/* @__PURE__ */ jsx(Slider$1.Thumb, {
+						"aria-label": ariaLabel,
 						"data-control-ui": "slider",
 						"data-control-family": "range",
 						"data-range-kind": "slider",
 						"data-slot": "thumb",
 						"data-variant": variant,
 						className: cn("block", variant === "plain" && "after:absolute after:-inset-3 after:content-['']"),
-						style: thumbStyle
+						style
 					})
 				]
 			})

package/dist/ui/spinner.d.ts

@@ -2,11 +2,10 @@ import { ControlSize } from "../control-variants.js";
 import { SpinnerKnobStyle } from "../knob-contracts/spinner-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/spinner.d.ts
-type SpinnerProps = Omit<ComponentProps<"span"> & {
+export type SpinnerProps = Omit<ComponentProps<"span"> & {
   size?: ControlSize;
 }, "style"> & {
   style?: CSSProperties & SpinnerKnobStyle;
 };
-declare function Spinner({ size, className, ...props }: SpinnerProps): import("react").JSX.Element;
-//#endregion
-export { Spinner, SpinnerProps };
+export declare function Spinner({ size, className, ...props }: SpinnerProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/stepper.d.ts

@@ -1,10 +1,10 @@
 import { StepperKnobStyle } from "../knob-contracts/stepper-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/stepper.d.ts
-type StepperOrientation = "horizontal" | "vertical";
-type StepperContentMode = "current" | "all";
-type StepperState = "neutral" | "complete" | "current" | "upcoming";
-type StepperProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
+export type StepperOrientation = "horizontal" | "vertical";
+export type StepperContentMode = "current" | "all";
+export type StepperState = "neutral" | "complete" | "current" | "upcoming";
+export type StepperProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
   value?: number | null;
   defaultValue?: number | null;
   onValueChange?: (value: number) => void;
@@ -14,45 +14,44 @@ type StepperProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
 } & {
   style?: CSSProperties & StepperKnobStyle;
 };
-type StepperListProps = ComponentProps<"ol"> & {
+export type StepperListProps = ComponentProps<"ol"> & {
   style?: CSSProperties & StepperKnobStyle;
 };
-type StepperItemProps = Omit<ComponentProps<"li">, "value"> & {
+export type StepperItemProps = Omit<ComponentProps<"li">, "value"> & {
   step: number;
   disabled?: boolean;
   invalid?: boolean;
 } & {
   style?: CSSProperties & StepperKnobStyle;
 };
-type StepperTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+export type StepperTriggerProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & StepperKnobStyle;
 };
-type StepperIndicatorProps = Omit<ComponentProps<"span">, "style"> & {
+export type StepperIndicatorProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & StepperKnobStyle;
 };
-type StepperSeparatorProps = Omit<ComponentProps<"span">, "style"> & {
+export type StepperSeparatorProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & StepperKnobStyle;
 };
-type StepperTitleProps = Omit<ComponentProps<"span">, "style"> & {
+export type StepperTitleProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & StepperKnobStyle;
 };
-type StepperDescriptionProps = Omit<ComponentProps<"span">, "style"> & {
+export type StepperDescriptionProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & StepperKnobStyle;
 };
-type StepperContentProps = ComponentProps<"section"> & {
+export type StepperContentProps = ComponentProps<"section"> & {
   step: number;
   keepMounted?: boolean;
 } & {
   style?: CSSProperties & StepperKnobStyle;
 };
-declare function Stepper({ value, defaultValue, onValueChange, orientation, contentMode, responsive, id, className, children, ...props }: StepperProps): import("react").JSX.Element;
-declare function StepperList({ className, ...props }: StepperListProps): import("react").JSX.Element;
-declare function StepperItem({ step, disabled, invalid, className, children, ...props }: StepperItemProps): import("react").JSX.Element;
-declare function StepperTrigger({ disabled: disabledProp, className, onClick, type, ...props }: StepperTriggerProps): import("react").JSX.Element;
-declare function StepperIndicator({ className, children, ...props }: StepperIndicatorProps): import("react").JSX.Element;
-declare function StepperSeparator({ className, ...props }: StepperSeparatorProps): import("react").JSX.Element;
-declare function StepperTitle({ className, ...props }: StepperTitleProps): import("react").JSX.Element;
-declare function StepperDescription({ className, ...props }: StepperDescriptionProps): import("react").JSX.Element;
-declare function StepperContent({ step, keepMounted, className, ...props }: StepperContentProps): import("react").JSX.Element | null;
-//#endregion
-export { Stepper, StepperContent, StepperContentMode, StepperContentProps, StepperDescription, StepperDescriptionProps, StepperIndicator, StepperIndicatorProps, StepperItem, StepperItemProps, StepperList, StepperListProps, StepperOrientation, StepperProps, StepperSeparator, StepperSeparatorProps, StepperState, StepperTitle, StepperTitleProps, StepperTrigger, StepperTriggerProps };
+export declare function Stepper({ value, defaultValue, onValueChange, orientation, contentMode, responsive, id, className, children, ...props }: StepperProps): import("react").JSX.Element;
+export declare function StepperList({ className, ...props }: StepperListProps): import("react").JSX.Element;
+export declare function StepperItem({ step, disabled, invalid, className, children, ...props }: StepperItemProps): import("react").JSX.Element;
+export declare function StepperTrigger({ disabled: disabledProp, className, onClick, type, ...props }: StepperTriggerProps): import("react").JSX.Element;
+export declare function StepperIndicator({ className, children, ...props }: StepperIndicatorProps): import("react").JSX.Element;
+export declare function StepperSeparator({ className, ...props }: StepperSeparatorProps): import("react").JSX.Element;
+export declare function StepperTitle({ className, ...props }: StepperTitleProps): import("react").JSX.Element;
+export declare function StepperDescription({ className, ...props }: StepperDescriptionProps): import("react").JSX.Element;
+export declare function StepperContent({ step, keepMounted, className, ...props }: StepperContentProps): import("react").JSX.Element | null;
+//#endregion

package/dist/ui/switch.d.ts

@@ -1,7 +1,7 @@
 import { SwitchKnobStyle } from "../knob-contracts/switch-knobs.js";
 import { CSSProperties, ReactNode } from "react";
 //#region src/ui/switch.d.ts
-type SwitchProps = Omit<{
+export type SwitchProps = Omit<{
   checked?: boolean;
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
@@ -21,6 +21,5 @@ type SwitchProps = Omit<{
 }, "style"> & {
   style?: CSSProperties & SwitchKnobStyle;
 };
-declare function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, ...props }: SwitchProps): import("react").JSX.Element;
-//#endregion
-export { Switch, SwitchProps };
+export declare function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, style, ...props }: SwitchProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/switch.js

@@ -1,9 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useSwitchDrag } from "./use-switch-drag.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/ui/switch.tsx
-function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, ...props }) {
+function Switch({ className, checked, defaultChecked, onCheckedChange, disabled, readOnly, required, name, value, id, icon, checkedIcon, uncheckedIcon, style, ...props }) {
+	const { thumbRef, dragProps, dragProgress } = useSwitchDrag();
+	const dragStyle = { "--_switch-drag-progress": dragProgress ?? 0 };
 	const hasStateIcons = checkedIcon !== void 0 || uncheckedIcon !== void 0;
 	const hasIcon = icon !== void 0 || hasStateIcons;
 	const singleIcon = hasStateIcons ? void 0 : icon;
@@ -13,6 +16,12 @@ function Switch({ className, checked, defaultChecked, onCheckedChange, disabled,
 		"data-control-ui": "switch",
 		"data-control-family": "switch",
 		"data-slot": "root",
+		"data-dragging": dragProgress !== null ? "" : void 0,
+		"data-drag-checked": dragProgress === null ? void 0 : dragProgress >= .5,
+		style: {
+			...style,
+			...dragStyle
+		},
 		checked,
 		defaultChecked,
 		onCheckedChange,
@@ -26,7 +35,9 @@ function Switch({ className, checked, defaultChecked, onCheckedChange, disabled,
 		render: /* @__PURE__ */ jsx("button", { type: "button" }),
 		className: cn("relative inline-flex shrink-0 cursor-pointer items-center", "data-[disabled]:cursor-not-allowed", className),
 		...props,
+		...dragProps,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+			ref: thumbRef,
 			"data-control-ui": "switch",
 			"data-control-family": "switch",
 			"data-slot": "thumb",

package/dist/ui/table-of-contents.d.ts

@@ -1,22 +1,21 @@
 import { TableOfContentsKnobStyle } from "../knob-contracts/table-of-contents-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/table-of-contents.d.ts
-type TocItem = {
+export type TocItem = {
   href: string;
   label: string;
   level?: number;
   children?: TocItem[];
 };
-declare const tableOfContentsVariants: readonly ["background", "trail", "both"];
-type TableOfContentsVariant = (typeof tableOfContentsVariants)[number];
-type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">, "style"> & {
+export declare const tableOfContentsVariants: readonly ["background", "trail", "both"];
+export type TableOfContentsVariant = (typeof tableOfContentsVariants)[number];
+export type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">, "style"> & {
   style?: CSSProperties & TableOfContentsKnobStyle;
 } & {
   items: TocItem[];
   label?: string;
   variant?: TableOfContentsVariant;
 };
-declare function useVisibleSections(ids: string[]): string[];
-declare function TableOfContents({ items, label, variant, className, style, ...props }: TableOfContentsProps): import("react").JSX.Element | null;
-//#endregion
-export { TableOfContents, TableOfContentsProps, TableOfContentsVariant, TocItem, tableOfContentsVariants, useVisibleSections };
+export declare function useVisibleSections(ids: string[]): string[];
+export declare function TableOfContents({ items, label, variant, className, style, ...props }: TableOfContentsProps): import("react").JSX.Element | null;
+//#endregion

package/dist/ui/table-of-contents.js

@@ -114,7 +114,7 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 					"data-control-ui": "table-of-contents",
 					"data-control-family": "table-of-contents",
 					"data-slot": "rail",
-					className: "pointer-events-none absolute inset-y-0 left-0 -z-20 w-px"
+					className: "pointer-events-none absolute inset-y-0 start-0 -z-20"
 				}),
 				/* @__PURE__ */ jsx(TrackHighlight, {
 					"data-variant": variant,
@@ -127,7 +127,7 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 						"data-control-ui": "table-of-contents",
 						"data-control-family": "table-of-contents",
 						"data-slot": "trail",
-						className: "absolute inset-y-0 left-0 w-0.5"
+						className: "absolute inset-y-0 start-0"
 					})
 				}),
 				/* @__PURE__ */ jsx(TocList, {
@@ -149,6 +149,7 @@ function TocList({ items, activeSet, variant, root = false }) {
 		children: items.map((item) => {
 			const targetId = item.href.replace(/^#/, "");
 			const isActive = activeSet.has(targetId);
+			const itemStyle = { "--_toc-depth": item.depth };
 			return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
 				"data-control-ui": "table-of-contents",
 				"data-control-family": "table-of-contents",
@@ -160,6 +161,7 @@ function TocList({ items, activeSet, variant, root = false }) {
 				"aria-current": isActive ? "location" : void 0,
 				href: item.href,
 				className: "block",
+				style: itemStyle,
 				children: item.label
 			}), item.children && /* @__PURE__ */ jsx(TocList, {
 				items: item.children,

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