@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/ui/responsive-dialog.d.ts

@@ -1,18 +1,17 @@
 import { DialogCloseProps, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger } from "./dialog.js";
 import { ComponentProps } from "react";
 //#region src/ui/responsive-dialog.d.ts
-type ResponsiveDialogProps = DialogProps;
-type ResponsiveDialogContentProps = DialogContentProps & {
+export type ResponsiveDialogProps = DialogProps;
+export type ResponsiveDialogContentProps = DialogContentProps & {
   dialogClassName?: string;
   drawerClassName?: string;
 };
-declare function ResponsiveDialog({ open: controlledOpen, defaultOpen, onOpenChange, children }: ResponsiveDialogProps): import("react").JSX.Element;
-declare function ResponsiveDialogTrigger(props: Omit<ComponentProps<typeof DialogTrigger>, "handle">): import("react").JSX.Element;
-declare function ResponsiveDialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
-declare function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton, ...props }: ResponsiveDialogContentProps): import("react").JSX.Element;
-declare function ResponsiveDialogHeader(props: ComponentProps<typeof DialogHeader>): import("react").JSX.Element;
-declare function ResponsiveDialogFooter(props: ComponentProps<typeof DialogFooter>): import("react").JSX.Element;
-declare function ResponsiveDialogTitle(props: ComponentProps<typeof DialogTitle>): import("react").JSX.Element;
-declare function ResponsiveDialogDescription(props: ComponentProps<typeof DialogDescription>): import("react").JSX.Element;
-//#endregion
-export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogContentProps, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogProps, ResponsiveDialogTitle, ResponsiveDialogTrigger };
+export declare function ResponsiveDialog({ open: controlledOpen, defaultOpen, onOpenChange, children }: ResponsiveDialogProps): import("react").JSX.Element;
+export declare function ResponsiveDialogTrigger(props: Omit<ComponentProps<typeof DialogTrigger>, "handle">): import("react").JSX.Element;
+export declare function ResponsiveDialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
+export declare function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton, ...props }: ResponsiveDialogContentProps): import("react").JSX.Element;
+export declare function ResponsiveDialogHeader(props: ComponentProps<typeof DialogHeader>): import("react").JSX.Element;
+export declare function ResponsiveDialogFooter(props: ComponentProps<typeof DialogFooter>): import("react").JSX.Element;
+export declare function ResponsiveDialogTitle(props: ComponentProps<typeof DialogTitle>): import("react").JSX.Element;
+export declare function ResponsiveDialogDescription(props: ComponentProps<typeof DialogDescription>): import("react").JSX.Element;
+//#endregion

package/dist/ui/rich-tooltip-tour.d.ts

@@ -1,12 +1,11 @@
 //#region src/ui/rich-tooltip-tour.d.ts
-type TourPosition = {
+export type TourPosition = {
   index: number;
   total: number;
   isFirst: boolean;
   isLast: boolean;
 };
-declare function tourPosition(steps: readonly string[], activeStep: string | null): TourPosition;
-declare function stepAfter(steps: readonly string[], index: number): string | null;
-declare function stepBefore(steps: readonly string[], index: number): string | null;
-//#endregion
-export { TourPosition, stepAfter, stepBefore, tourPosition };
+export declare function tourPosition(steps: readonly string[], activeStep: string | null): TourPosition;
+export declare function stepAfter(steps: readonly string[], index: number): string | null;
+export declare function stepBefore(steps: readonly string[], index: number): string | null;
+//#endregion

package/dist/ui/rich-tooltip.d.ts

@@ -4,8 +4,8 @@ import { TourPosition } from "./rich-tooltip-tour.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Popover } from "@base-ui/react/popover";
 //#region src/ui/rich-tooltip.d.ts
-type RichTooltipTone = "accent" | "surface";
-type RichTooltipProgressVariant = "count" | "dots";
+export type RichTooltipTone = "accent" | "surface";
+export type RichTooltipProgressVariant = "count" | "dots";
 type RichTooltipContentKnobStyle = RichTooltipKnobStyle & PopupKnobStyle;
 type TourValue = TourPosition & {
   activeStep: string | null;
@@ -14,9 +14,8 @@ type TourValue = TourPosition & {
   goTo: (step: string) => void;
   finish: () => void;
 };
-/** Null outside `<RichTooltipTour>` — single-use rich tooltips read it and skip their step affordances. */
-declare function useTour(): TourValue | null;
-type RichTooltipTourProps = {
+export declare function useTour(): TourValue | null;
+export type RichTooltipTourProps = {
   steps: readonly string[];
   step?: string | null;
   defaultStep?: string;
@@ -25,20 +24,20 @@ type RichTooltipTourProps = {
   storageKey?: string;
   children?: ReactNode;
 };
-declare function RichTooltipTour({ steps, step, defaultStep, onStepChange, onComplete, storageKey, children }: RichTooltipTourProps): import("react").JSX.Element;
-type RichTooltipProps = Omit<ComponentProps<typeof Popover.Root>, "modal"> & {
+export declare function RichTooltipTour({ steps, step, defaultStep, onStepChange, onComplete, storageKey, children }: RichTooltipTourProps): import("react").JSX.Element;
+export type RichTooltipProps = Omit<ComponentProps<typeof Popover.Root>, "modal"> & {
   step?: string;
   tone?: RichTooltipTone;
   storageKey?: string;
   dismissOnOutsidePress?: boolean;
   trapFocus?: boolean;
 };
-declare function RichTooltip({ step, tone, storageKey, dismissOnOutsidePress, trapFocus, open, defaultOpen, onOpenChange, children, ...props }: RichTooltipProps): import("react").JSX.Element;
-declare function RichTooltipTrigger({ className, ...props }: ComponentProps<typeof Popover.Trigger> & {
+export declare function RichTooltip({ step, tone, storageKey, dismissOnOutsidePress, trapFocus, open, defaultOpen, onOpenChange, children, ...props }: RichTooltipProps): import("react").JSX.Element;
+export declare function RichTooltipTrigger({ className, ...props }: ComponentProps<typeof Popover.Trigger> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
 type AnchorProp = ComponentProps<typeof Popover.Positioner>["anchor"];
-type RichTooltipContentProps = Omit<ComponentProps<typeof Popover.Popup>, "style"> & {
+export type RichTooltipContentProps = Omit<ComponentProps<typeof Popover.Popup>, "style"> & {
   style?: CSSProperties & RichTooltipContentKnobStyle;
 } & {
   side?: ComponentProps<typeof Popover.Positioner>["side"];
@@ -49,35 +48,34 @@ type RichTooltipContentProps = Omit<ComponentProps<typeof Popover.Popup>, "style
   arrow?: boolean;
   scrollAnchorIntoView?: boolean;
 };
-declare function RichTooltipContent({ className, children, side, align, sideOffset, anchor, collisionPadding, arrow, scrollAnchorIntoView, ...props }: RichTooltipContentProps): import("react").JSX.Element;
-declare function RichTooltipMedia({ className, ...props }: ComponentProps<"div"> & {
+export declare function RichTooltipContent({ className, children, side, align, sideOffset, anchor, collisionPadding, arrow, scrollAnchorIntoView, ...props }: RichTooltipContentProps): import("react").JSX.Element;
+export declare function RichTooltipMedia({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function RichTooltipHeader({ className, ...props }: ComponentProps<"div"> & {
+export declare function RichTooltipHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function RichTooltipTitle({ className, ...props }: Omit<ComponentProps<typeof Popover.Title>, "style"> & {
+export declare function RichTooltipTitle({ className, ...props }: Omit<ComponentProps<typeof Popover.Title>, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function RichTooltipDescription({ className, ...props }: Omit<ComponentProps<typeof Popover.Description>, "style"> & {
+export declare function RichTooltipDescription({ className, ...props }: Omit<ComponentProps<typeof Popover.Description>, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function RichTooltipFooter({ className, ...props }: ComponentProps<"div"> & {
+export declare function RichTooltipFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-type RichTooltipProgressProps = Omit<ComponentProps<"div">, "style"> & {
+export type RichTooltipProgressProps = Omit<ComponentProps<"div">, "style"> & {
   variant?: RichTooltipProgressVariant;
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
 };
-declare function RichTooltipProgress({ className, variant, children, ...props }: RichTooltipProgressProps): import("react").JSX.Element | null;
-declare function RichTooltipPrevious({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
+export declare function RichTooltipProgress({ className, variant, children, ...props }: RichTooltipProgressProps): import("react").JSX.Element | null;
+export declare function RichTooltipPrevious({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
 }): import("react").JSX.Element | null;
-declare function RichTooltipNext({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
+export declare function RichTooltipNext({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function RichTooltipClose({ className, children, ...props }: Omit<ComponentProps<typeof Popover.Close>, "style"> & {
+export declare function RichTooltipClose({ className, children, ...props }: Omit<ComponentProps<typeof Popover.Close>, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { RichTooltip, RichTooltipClose, RichTooltipContent, RichTooltipContentProps, RichTooltipDescription, RichTooltipFooter, RichTooltipHeader, RichTooltipMedia, RichTooltipNext, RichTooltipPrevious, RichTooltipProgress, RichTooltipProgressProps, RichTooltipProgressVariant, RichTooltipProps, RichTooltipTitle, RichTooltipTone, RichTooltipTour, RichTooltipTourProps, RichTooltipTrigger, useTour };
+//#endregion

package/dist/ui/rich-tooltip.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { stepAfter, stepBefore, tourPosition } from "./rich-tooltip-tour.js";
 import { createContext, useContext, useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -8,7 +9,6 @@ import { ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";
 import { Popover } from "@base-ui/react/popover";
 //#region src/ui/rich-tooltip.tsx
 const TourContext = createContext(null);
-/** Null outside `<RichTooltipTour>` — single-use rich tooltips read it and skip their step affordances. */
 function useTour() {
 	return useContext(TourContext);
 }
@@ -26,7 +26,6 @@ function writeSeen(storageKey) {
 		globalThis.localStorage?.setItem(storageKey, "seen");
 	} catch {}
 }
-/** Starts closed so the server and first client pass agree, then opens once storage has been read. */
 function useSeenGate(storageKey, enabled) {
 	const [allowed, setAllowed] = useState(false);
 	useEffect(() => {
@@ -136,6 +135,7 @@ function useAnchorScroll(anchor, open, enabled) {
 	]);
 }
 function RichTooltipContent({ className, children, side = "bottom", align = "center", sideOffset = 10, anchor, collisionPadding = 12, arrow = true, scrollAnchorIntoView = true, ...props }) {
+	const skin = useSkin();
 	const { tone } = useRichTooltipContext();
 	const isSurface = tone === "surface";
 	useAnchorScroll(anchor, true, scrollAnchorIntoView);
@@ -144,8 +144,8 @@ function RichTooltipContent({ className, children, side = "bottom", align = "cen
 		"data-popup-kind": "rich-tooltip",
 		"data-control-family": "popup",
 		"data-slot": "positioner",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side,
 		align,
 		sideOffset,

package/dist/ui/scroll-area.d.ts

@@ -2,15 +2,15 @@ import { ScrollAreaKnobStyle } from "../knob-contracts/scroll-area-knobs.js";
 import { ProgressiveBlurProps } from "./progressive-blur.js";
 import { CSSProperties, ComponentProps, Ref } from "react";
 //#region src/ui/scroll-area.d.ts
-declare const scrollAreaScrollbarVisibilities: readonly ["scroll", "hover", "always"];
-type ScrollAreaScrollbarVisibility = (typeof scrollAreaScrollbarVisibilities)[number];
-type ScrollAreaLockAxis = "x" | "y" | "both";
-type ScrollAreaViewportProps = Omit<ComponentProps<"div">, "children" | "className" | "ref"> & {
+export declare const scrollAreaScrollbarVisibilities: readonly ["scroll", "hover", "always"];
+export type ScrollAreaScrollbarVisibility = (typeof scrollAreaScrollbarVisibilities)[number];
+export type ScrollAreaLockAxis = "x" | "y" | "both";
+export type ScrollAreaViewportProps = Omit<ComponentProps<"div">, "children" | "className" | "ref"> & {
   "data-control-ui"?: string;
   "data-control-family"?: string;
   "data-slot"?: string;
 };
-type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
+export type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ScrollAreaKnobStyle;
 } & {
   viewportClassName?: string;
@@ -23,6 +23,5 @@ type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   lockAxis?: ScrollAreaLockAxis;
   scrollbarVisibility?: ScrollAreaScrollbarVisibility;
 };
-declare function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, ...props }: ScrollAreaProps): import("react").JSX.Element;
-//#endregion
-export { ScrollArea, ScrollAreaLockAxis, ScrollAreaProps, ScrollAreaScrollbarVisibility, ScrollAreaViewportProps, scrollAreaScrollbarVisibilities };
+export declare function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, ...props }: ScrollAreaProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/scroll-area.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { useSkin } from "../skin-provider.js";
 import { ProgressiveBlur } from "./progressive-blur.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
@@ -34,7 +35,9 @@ function viewportStyle(maxHeight, lockX, lockY) {
 		...lockY ? { overflowY: "hidden" } : {}
 	};
 }
-function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask = true, blur = false, blurProps, lockAxis, scrollbarVisibility = "scroll", children, style, ...props }) {
+function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask = true, blur, blurProps, lockAxis, scrollbarVisibility = "scroll", children, style, ...props }) {
+	const skin = useSkin();
+	const resolvedBlur = blur ?? skin.scrollAreaBlur ?? false;
 	const lockX = lockAxis === "x" || lockAxis === "both";
 	const lockY = lockAxis === "y" || lockAxis === "both";
 	const resolvedViewportStyle = viewportStyle(maxHeight, lockX, lockY);
@@ -51,7 +54,7 @@ function ScrollArea({ className, viewportClassName, viewportProps, viewportRef,
 		"data-control-family": "scroll-area",
 		"data-slot": "root",
 		"data-mask": mask || void 0,
-		"data-blur": blur || void 0,
+		"data-blur": resolvedBlur || void 0,
 		"data-lock-axis": lockAxis,
 		className: cn("relative overflow-hidden", className),
 		style,
@@ -73,22 +76,22 @@ function ScrollArea({ className, viewportClassName, viewportProps, viewportRef,
 					children
 				})
 			}),
-			blur && !lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
+			resolvedBlur && !lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
 				...blurProps,
 				side: "top",
 				visible: false
 			}),
-			blur && !lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
+			resolvedBlur && !lockY && /* @__PURE__ */ jsx(ProgressiveBlur, {
 				...blurProps,
 				side: "bottom",
 				visible: false
 			}),
-			blur && !lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
+			resolvedBlur && !lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
 				...blurProps,
 				side: "inline-start",
 				visible: false
 			}),
-			blur && !lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
+			resolvedBlur && !lockX && /* @__PURE__ */ jsx(ProgressiveBlur, {
 				...blurProps,
 				side: "inline-end",
 				visible: false

package/dist/ui/select.d.ts

@@ -5,27 +5,35 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/ui/select.d.ts
-type SelectProps<TValue extends string = string> = ControlledChoice<TValue> & {
+export type SelectProps<TValue extends string = string> = Omit<ControlledChoice<TValue>, "value"> & {
+  value?: TValue | null;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
   disabled?: boolean;
+  items?: Record<string, ReactNode> | readonly {
+    value: TValue;
+    label: ReactNode;
+  }[];
   name?: string;
   children?: ReactNode;
 };
-declare const selectTriggerVariants: readonly ["surface", "ghost"];
-type SelectTriggerVariant = (typeof selectTriggerVariants)[number];
-type SelectTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+export declare const selectTriggerVariants: readonly ["surface", "ghost"];
+export type SelectTriggerVariant = (typeof selectTriggerVariants)[number];
+export type SelectTriggerProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & ButtonKnobStyle;
 } & {
   size?: ControlSize;
   variant?: SelectTriggerVariant;
 };
-type SelectValueProps = {
+export type SelectValueProps = {
   placeholder?: ReactNode;
   children?: ReactNode | ((value: string) => ReactNode);
 };
-type SelectContentProps = Omit<ComponentProps<"div">, "style"> & {
+export type SelectContentProps = Omit<ComponentProps<"div">, "style"> & Pick<ComponentProps<typeof Select$1.Positioner>, "alignItemWithTrigger"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type SelectItemProps = Omit<ComponentProps<"div">, "style"> & {
+export type SelectItemProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   value: string;
@@ -35,10 +43,9 @@ type SelectItemProps = Omit<ComponentProps<"div">, "style"> & {
 type RefinedSelectTriggerProps = SelectTriggerProps & Pick<ComponentProps<typeof Select$1.Trigger>, "nativeButton" | "render"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function Select<TValue extends string = string>({ children, onValueChange, ...props }: SelectProps<TValue>): import("react").JSX.Element;
-declare function SelectTrigger({ size, variant, className, children, disabled, ...props }: RefinedSelectTriggerProps): import("react").JSX.Element;
-declare function SelectValue({ children, ...props }: SelectValueProps): import("react").JSX.Element;
-declare function SelectContent({ className, children, ...props }: SelectContentProps): import("react").JSX.Element;
-declare function SelectItem({ className, children, disabled, ...props }: SelectItemProps): import("react").JSX.Element;
-//#endregion
-export { Select, SelectContent, SelectContentProps, SelectItem, SelectItemProps, SelectProps, SelectTrigger, SelectTriggerProps, SelectTriggerVariant, SelectValue, SelectValueProps, selectTriggerVariants };
+export declare function Select<TValue extends string = string>({ children, onValueChange, ...props }: SelectProps<TValue>): import("react").JSX.Element;
+export declare function SelectTrigger({ size, variant, className, children, disabled, ...props }: RefinedSelectTriggerProps): import("react").JSX.Element;
+export declare function SelectValue({ children, ...props }: SelectValueProps): import("react").JSX.Element;
+export declare function SelectContent({ className, children, alignItemWithTrigger, ...props }: SelectContentProps): import("react").JSX.Element;
+export declare function SelectItem({ className, children, disabled, ...props }: SelectItemProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/select.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
@@ -64,13 +65,15 @@ function SelectValue({ children, ...props }) {
 		children
 	});
 }
-function SelectContent({ className, children, ...props }) {
+function SelectContent({ className, children, alignItemWithTrigger = false, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side: "bottom",
 		align: "start",
 		sideOffset: 6,
+		alignItemWithTrigger,
 		className: "z-[80]",
 		children: /* @__PURE__ */ jsx(Select$1.Popup, {
 			"data-control-ui": "select",

package/dist/ui/separator.d.ts

@@ -2,8 +2,7 @@ import { SeparatorKnobStyle } from "../knob-contracts/separator-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 //#region src/ui/separator.d.ts
-declare function Separator({ className, orientation, ...props }: Omit<ComponentProps<typeof Separator$1>, "style"> & {
+export declare function Separator({ className, orientation, ...props }: Omit<ComponentProps<typeof Separator$1>, "style"> & {
   style?: CSSProperties & SeparatorKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { Separator };
+//#endregion

package/dist/ui/sheet.d.ts

@@ -2,24 +2,23 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/ui/sheet.d.ts
-declare function Sheet(props: ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
-declare function SheetClose({ className, ...props }: ComponentProps<typeof Dialog.Close> & {
+export declare function Sheet(props: ComponentProps<typeof Dialog.Root>): import("react").JSX.Element;
+export declare function SheetClose({ className, ...props }: ComponentProps<typeof Dialog.Close> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-type SheetContentProps = Omit<ComponentProps<typeof Dialog.Popup>, "style"> & {
+export type SheetContentProps = Omit<ComponentProps<typeof Dialog.Popup>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   side?: "left" | "right";
 };
-declare function SheetContent({ className, children, side, ...props }: SheetContentProps): import("react").JSX.Element;
-declare function SheetHeader({ className, ...props }: ComponentProps<"div"> & {
+export declare function SheetContent({ className, children, side, ...props }: SheetContentProps): import("react").JSX.Element;
+export declare function SheetHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function SheetTitle({ className, ...props }: ComponentProps<typeof Dialog.Title> & {
+export declare function SheetTitle({ className, ...props }: ComponentProps<typeof Dialog.Title> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function SheetDescription({ className, ...props }: ComponentProps<typeof Dialog.Description> & {
+export declare function SheetDescription({ className, ...props }: ComponentProps<typeof Dialog.Description> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { Sheet, SheetClose, SheetContent, SheetContentProps, SheetDescription, SheetHeader, SheetTitle };
+//#endregion

package/dist/ui/sheet.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { skinEffects, skinId } from "../skin.js";
+import { controlEffectsAttribute } from "../skin.js";
+import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/ui/sheet.tsx
@@ -18,18 +19,19 @@ function SheetClose({ className, ...props }) {
 	});
 }
 function SheetContent({ className, children, side = "right", ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
 		"data-control-ui": "sheet",
 		"data-popup-kind": "sheet",
 		"data-slot": "backdrop",
 		"data-control-family": "popup",
 		"data-popup-part": "backdrop",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		className: "fixed inset-0 z-[70]"
 	}), /* @__PURE__ */ jsx(Dialog.Popup, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		"data-control-ui": "sheet",
 		"data-popup-kind": "sheet",
 		"data-control-family": "popup",

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

@@ -2,16 +2,26 @@ import { HoverIndicator, RenderProp, SelectionIndicator } from "../control-props
 import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/sidebar-menu.d.ts
-declare const sidebarMenuButtonVariants: readonly ["default", "outline"];
-type SidebarMenuButtonVariant = (typeof sidebarMenuButtonVariants)[number];
-declare const sidebarMenuButtonSizes: readonly ["default", "sm", "lg"];
-type SidebarMenuButtonSize = (typeof sidebarMenuButtonSizes)[number];
-type SidebarGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+export declare const sidebarMenuButtonVariants: readonly ["default", "outline"];
+export type SidebarMenuButtonVariant = (typeof sidebarMenuButtonVariants)[number];
+export declare const sidebarMenuButtonSizes: readonly ["default", "sm", "lg"];
+export type SidebarMenuButtonSize = (typeof sidebarMenuButtonSizes)[number];
+export type SidebarGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 } & {
   render?: RenderProp<ComponentProps<"div">>;
 };
-type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
+export type SidebarGroupContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & SidebarKnobStyle;
+};
+export type SidebarMenuActionProps = Omit<ComponentProps<"button">, "style"> & {
+  render?: RenderProp<ComponentProps<"button">>;
+  showOnHover?: boolean;
+  style?: CSSProperties & SidebarKnobStyle;
+};
+export declare function SidebarGroupContent({ className, ...props }: SidebarGroupContentProps): import("react").JSX.Element;
+export declare function SidebarMenuAction({ className, render, showOnHover, children, ...props }: SidebarMenuActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & SidebarKnobStyle;
 } & {
   render?: RenderProp<ComponentProps<"button">>;
@@ -20,20 +30,19 @@ type SidebarMenuButtonProps = Omit<ComponentProps<"button">, "style"> & {
   variant?: SidebarMenuButtonVariant;
   size?: SidebarMenuButtonSize;
 };
-declare function SidebarGroup({ className, ...props }: ComponentProps<"div"> & {
+export declare function SidebarGroup({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
-declare function SidebarGroupLabel({ className, render, children, ...props }: SidebarGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-type SidebarSelectionIndicator = SelectionIndicator | HoverIndicator;
-declare function SidebarMenu({ className, indicator, style, children, ...props }: ComponentProps<"ul"> & {
+export declare function SidebarGroupLabel({ className, render, children, ...props }: SidebarGroupLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SidebarSelectionIndicator = SelectionIndicator | HoverIndicator;
+export declare function SidebarMenu({ className, indicator, style, children, ...props }: ComponentProps<"ul"> & {
   indicator?: SidebarSelectionIndicator;
 } & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
-declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> & {
+export declare function SidebarMenuItem({ className, ...props }: ComponentProps<"li"> & {
   style?: CSSProperties & SidebarKnobStyle;
 }): import("react").JSX.Element;
-declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
-declare function SidebarMenuSub({ className, ...props }: ComponentProps<typeof SidebarMenu>): import("react").JSX.Element;
-//#endregion
-export { SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuItem, SidebarMenuSub, SidebarSelectionIndicator, sidebarMenuButtonSizes, sidebarMenuButtonVariants };
+export declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, children, ...props }: SidebarMenuButtonProps): import("react").JSX.Element;
+export declare function SidebarMenuSub({ className, ...props }: ComponentProps<typeof SidebarMenu>): import("react").JSX.Element;
+//#endregion

package/dist/ui/sidebar-menu.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 { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { useSidebar } from "./sidebar-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
@@ -15,6 +15,31 @@ const sidebarMenuButtonSizes = [
 	"sm",
 	"lg"
 ];
+function SidebarGroupContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "sidebar",
+		"data-control-family": "sidebar",
+		"data-slot": "group-content",
+		className: cn("w-full", className),
+		...props
+	});
+}
+function SidebarMenuAction({ className, render, showOnHover = false, children, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: {
+			type: "button",
+			...props,
+			"data-control-ui": "sidebar",
+			"data-control-family": "sidebar",
+			"data-slot": "menu-action",
+			"data-show-on-hover": showOnHover || void 0,
+			className: cn("end-1 flex size-5 items-center justify-center -translate-y-1/2 disabled:pointer-events-none group-data-[collapsible=icon]:hidden [&>svg]:size-4 [&>svg]:shrink-0", className, "absolute"),
+			children
+		}
+	});
+}
 function SidebarGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "sidebar",
@@ -40,7 +65,8 @@ function SidebarGroupLabel({ className, render, children, ...props }) {
 }
 const SidebarMenuContext = createContext("none");
 function SidebarMenu({ className, indicator, style, children, ...props }) {
-	const resolvedIndicator = indicator ?? skinIndicator("sidebar") ?? "none";
+	const skin = useSkin();
+	const resolvedIndicator = indicator ?? skin.indicators?.sidebar ?? "none";
 	const hasHighlight = resolvedIndicator !== "none";
 	const list = /* @__PURE__ */ jsx("ul", {
 		"data-control-ui": "sidebar",
@@ -76,7 +102,7 @@ function SidebarMenuItem({ className, ...props }) {
 		...props
 	});
 }
-const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden text-start group-data-[collapsible=icon]:px-0! disabled:pointer-events-none aria-disabled:pointer-events-none [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+const sidebarMenuButtonClasses = cva("peer/menu-button flex w-full items-center overflow-hidden text-start group-data-[collapsible=icon]:px-0! disabled:pointer-events-none aria-disabled:pointer-events-none [&>span]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: null,
@@ -132,4 +158,4 @@ function SidebarMenuSub({ className, ...props }) {
 	});
 }
 //#endregion
-export { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants };
+export { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants };

package/dist/ui/sidebar-provider.d.ts

@@ -1,7 +1,7 @@
 import { SidebarKnobStyle } from "../knob-contracts/sidebar-knobs.js";
-import { CSSProperties, ComponentProps } from "react";
+import { CSSProperties, ComponentProps, RefObject } from "react";
 //#region src/ui/sidebar-provider.d.ts
-type SidebarStyle = CSSProperties & SidebarKnobStyle & {
+export type SidebarStyle = CSSProperties & SidebarKnobStyle & {
   "--sidebar-width"?: string;
   "--sidebar-width-icon"?: string;
 };
@@ -13,16 +13,41 @@ type SidebarContextProps = {
   setOpenMobile: (open: boolean) => void;
   isMobile: boolean;
   toggleSidebar: () => void;
+  width: number | undefined;
+  minWidth: number;
+  maxWidth: number;
+  setWidth: (width: number) => void;
 };
-declare function useSidebar(): SidebarContextProps;
-type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
+type SidebarElements = {
+  wrapperRef: RefObject<HTMLDivElement | null>;
+  offcanvasRef: RefObject<HTMLDivElement | null>;
+  railRef: RefObject<HTMLElement | null>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+};
+export declare const SidebarSurfaceContext: import("react").Context<{
+  side: "left" | "right";
+  collapsible: "offcanvas" | "icon" | "none";
+  railContainer: HTMLDivElement | null;
+} | null>;
+export declare function useSidebarElements(): SidebarElements;
+export declare function useSidebarSurface(): {
+  side: "left" | "right";
+  collapsible: "offcanvas" | "icon" | "none";
+  railContainer: HTMLDivElement | null;
+};
+export declare function useSidebar(): SidebarContextProps;
+export type SidebarProviderProps = Omit<ComponentProps<"div">, "style"> & {
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  width?: number;
+  onWidthChange?: (width: number) => void;
   persistOpen?: boolean;
   keyboardShortcut?: string | null;
   style?: SidebarStyle;
 };
-declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, persistOpen, keyboardShortcut, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
-//#endregion
-export { SidebarProvider, SidebarProviderProps, SidebarStyle, useSidebar };
+export declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, defaultWidth, minWidth, maxWidth, width: widthProp, onWidthChange, persistOpen, keyboardShortcut, ref, className, style, children, ...props }: SidebarProviderProps): import("react").JSX.Element;
+//#endregion