@ctrl-ui/react 0.8.2 → 0.8.5

package/dist/ui/popover.d.ts

@@ -2,8 +2,8 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/ui/popover.d.ts
-declare const popoverContentPaddings: readonly ["default", "none"];
-type PopoverContentPadding = (typeof popoverContentPaddings)[number];
+export declare const popoverContentPaddings: readonly ["default", "none"];
+export type PopoverContentPadding = (typeof popoverContentPaddings)[number];
 type PopoverPopupProps = Omit<ComponentProps<typeof Popover$1.Popup>, "style"> & {
   side?: ComponentProps<typeof Popover$1.Positioner>["side"];
   align?: ComponentProps<typeof Popover$1.Positioner>["align"];
@@ -12,23 +12,22 @@ type PopoverPopupProps = Omit<ComponentProps<typeof Popover$1.Popup>, "style"> &
   padding?: PopoverContentPadding;
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function Popover(props: ComponentProps<typeof Popover$1.Root>): import("react").JSX.Element;
-declare function PopoverTrigger({ className, ...props }: ComponentProps<typeof Popover$1.Trigger> & {
+export declare function Popover(props: ComponentProps<typeof Popover$1.Root>): import("react").JSX.Element;
+export declare function PopoverTrigger({ className, ...props }: ComponentProps<typeof Popover$1.Trigger> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function PopoverAnchor(props: ComponentProps<typeof Popover$1.Trigger>): import("react").JSX.Element;
-declare function PopoverContent({ className, children, side, align, sideOffset, collisionPadding, padding, ...props }: PopoverPopupProps): import("react").JSX.Element;
-declare function PopoverHeader({ className, ...props }: ComponentProps<"div"> & {
+export declare function PopoverAnchor(props: ComponentProps<typeof Popover$1.Trigger>): import("react").JSX.Element;
+export declare function PopoverContent({ className, children, side, align, sideOffset, collisionPadding, padding, ...props }: PopoverPopupProps): import("react").JSX.Element;
+export declare function PopoverHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function PopoverTitle({ className, ...props }: ComponentProps<typeof Popover$1.Title> & {
+export declare function PopoverTitle({ className, ...props }: ComponentProps<typeof Popover$1.Title> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function PopoverDescription({ className, ...props }: ComponentProps<typeof Popover$1.Description> & {
+export declare function PopoverDescription({ className, ...props }: ComponentProps<typeof Popover$1.Description> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function PopoverClose({ className, ...props }: ComponentProps<typeof Popover$1.Close> & {
+export declare function PopoverClose({ className, ...props }: ComponentProps<typeof Popover$1.Close> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverContentPadding, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, popoverContentPaddings };
+//#endregion

package/dist/ui/popover.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 } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/ui/popover.tsx
@@ -21,14 +22,15 @@ function PopoverAnchor(props) {
 	return /* @__PURE__ */ jsx(Popover$1.Trigger, { ...props });
 }
 function PopoverContent({ className, children, side = "bottom", align = "center", sideOffset = 6, collisionPadding, padding = "default", ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side,
 		align,
 		sideOffset,
 		collisionPadding,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Popover$1.Popup, {
 			"data-control-ui": "popover",
 			"data-popup-kind": "popover",

package/dist/ui/progress.d.ts

@@ -1,7 +1,7 @@
 import { RangeKnobStyle } from "../knob-contracts/range-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/progress.d.ts
-type ProgressProps = Omit<ComponentProps<"div"> & {
+export type ProgressProps = Omit<ComponentProps<"div"> & {
   value: number | null;
   min?: number;
   max?: number;
@@ -11,24 +11,23 @@ type ProgressProps = Omit<ComponentProps<"div"> & {
 }, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-type ProgressTrackProps = Omit<ComponentProps<"div">, "style"> & {
+export type ProgressTrackProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-type ProgressIndicatorProps = Omit<ComponentProps<"div">, "style"> & {
+export type ProgressIndicatorProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-type ProgressLabelProps = Omit<ComponentProps<"span">, "style"> & {
+export type ProgressLabelProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-type ProgressValueProps = Omit<Omit<ComponentProps<"span">, "children"> & {
+export type ProgressValueProps = Omit<Omit<ComponentProps<"span">, "children"> & {
   children?: ((formattedValue: string | null, value: number | null) => ReactNode) | null;
 }, "style"> & {
   style?: CSSProperties & RangeKnobStyle;
 };
-declare function Progress({ className, ...props }: ProgressProps): import("react").JSX.Element;
-declare function ProgressLabel({ className, ...props }: ProgressLabelProps): import("react").JSX.Element;
-declare function ProgressValue({ className, ...props }: ProgressValueProps): import("react").JSX.Element;
-declare function ProgressTrack({ className, ...props }: ProgressTrackProps): import("react").JSX.Element;
-declare function ProgressIndicator({ className, ...props }: ProgressIndicatorProps): import("react").JSX.Element;
-//#endregion
-export { Progress, ProgressIndicator, ProgressIndicatorProps, ProgressLabel, ProgressLabelProps, ProgressProps, ProgressTrack, ProgressTrackProps, ProgressValue, ProgressValueProps };
+export declare function Progress({ className, ...props }: ProgressProps): import("react").JSX.Element;
+export declare function ProgressLabel({ className, ...props }: ProgressLabelProps): import("react").JSX.Element;
+export declare function ProgressValue({ className, ...props }: ProgressValueProps): import("react").JSX.Element;
+export declare function ProgressTrack({ className, ...props }: ProgressTrackProps): import("react").JSX.Element;
+export declare function ProgressIndicator({ className, ...props }: ProgressIndicatorProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/progressive-blur.d.ts

@@ -1,12 +1,11 @@
 import { ProgressiveBlurKnobStyle } from "../knob-contracts/progressive-blur-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/progressive-blur.d.ts
-type ProgressiveBlurSide = "top" | "bottom" | "inline-start" | "inline-end";
-type ProgressiveBlurProps = Omit<ComponentProps<"div">, "children" | "dangerouslySetInnerHTML" | "style" | "tabIndex"> & {
+export type ProgressiveBlurSide = "top" | "bottom" | "inline-start" | "inline-end";
+export type ProgressiveBlurProps = Omit<ComponentProps<"div">, "children" | "dangerouslySetInnerHTML" | "style" | "tabIndex"> & {
   side?: ProgressiveBlurSide;
   visible?: boolean;
   style?: CSSProperties & ProgressiveBlurKnobStyle;
 };
-declare function ProgressiveBlur({ side, visible, ...props }: ProgressiveBlurProps): import("react").JSX.Element;
-//#endregion
-export { ProgressiveBlur, ProgressiveBlurProps, ProgressiveBlurSide };
+export declare function ProgressiveBlur({ side, visible, ...props }: ProgressiveBlurProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/radio-group.d.ts

@@ -2,7 +2,7 @@ import { ControlledChoice } from "../control-props.js";
 import { ChoiceKnobStyle } from "../knob-contracts/choice-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/radio-group.d.ts
-type RadioGroupProps<TValue extends string = string> = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledChoice<TValue> & {
+export type RadioGroupProps<TValue extends string = string> = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & ControlledChoice<TValue> & {
   disabled?: boolean;
   readOnly?: boolean;
   required?: boolean;
@@ -11,7 +11,7 @@ type RadioGroupProps<TValue extends string = string> = Omit<ComponentProps<"div"
 } & {
   style?: CSSProperties & ChoiceKnobStyle;
 };
-type RadioProps = Omit<{
+export type RadioProps = Omit<{
   value: string;
   disabled?: boolean;
   readOnly?: boolean;
@@ -23,7 +23,6 @@ type RadioProps = Omit<{
 }, "style"> & {
   style?: CSSProperties & ChoiceKnobStyle;
 };
-declare function RadioGroup<TValue extends string = string>({ className, orientation, ...props }: RadioGroupProps<TValue>): import("react").JSX.Element;
-declare function Radio({ className, disabled, ...props }: RadioProps): import("react").JSX.Element;
-//#endregion
-export { Radio, RadioGroup, RadioGroupProps, RadioProps };
+export declare function RadioGroup<TValue extends string = string>({ className, orientation, ...props }: RadioGroupProps<TValue>): import("react").JSX.Element;
+export declare function Radio({ className, disabled, ...props }: RadioProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/resizable.d.ts

@@ -1,12 +1,12 @@
 import { ResizableKnobStyle } from "../knob-contracts/resizable-knobs.js";
 import { CSSProperties, ComponentProps, Ref } from "react";
 //#region src/ui/resizable.d.ts
-type ResizableLayout = {
+export type ResizableLayout = {
   [panelId: string]: number;
 };
-type ResizablePanelGroupVariant = "framed" | "nested";
-type ResizableHandleVariant = "solid" | "hover";
-type ResizablePanelGroupProps = Omit<ComponentProps<"div">, "style"> & {
+export type ResizablePanelGroupVariant = "framed" | "nested";
+export type ResizableHandleVariant = "solid" | "hover";
+export type ResizablePanelGroupProps = Omit<ComponentProps<"div">, "style"> & {
   orientation?: "horizontal" | "vertical";
   variant?: ResizablePanelGroupVariant;
   defaultLayout?: ResizableLayout;
@@ -18,18 +18,18 @@ type ResizablePanelGroupProps = Omit<ComponentProps<"div">, "style"> & {
   }) => void;
   style?: CSSProperties & ResizableKnobStyle;
 };
-type ResizablePanelSize = {
+export type ResizablePanelSize = {
   asPercentage: number;
   inPixels: number;
 };
-interface ResizablePanelHandle {
+export interface ResizablePanelHandle {
   collapse: () => void;
   expand: () => void;
   getSize: () => ResizablePanelSize;
   isCollapsed: () => boolean;
   resize: (size: number | string) => void;
 }
-type ResizablePanelProps = Omit<ComponentProps<"div">, "onResize"> & {
+export type ResizablePanelProps = Omit<ComponentProps<"div">, "onResize"> & {
   defaultSize?: number | string;
   minSize?: number | string;
   maxSize?: number | string;
@@ -42,15 +42,14 @@ type ResizablePanelProps = Omit<ComponentProps<"div">, "onResize"> & {
 } & {
   style?: CSSProperties & ResizableKnobStyle;
 };
-type ResizableHandleProps = Omit<ComponentProps<"div">, "role" | "tabIndex" | "style"> & {
+export type ResizableHandleProps = Omit<ComponentProps<"div">, "role" | "tabIndex" | "style"> & {
   variant?: ResizableHandleVariant;
   withHandle?: boolean;
   disabled?: boolean;
   disableDoubleClick?: boolean;
   style?: CSSProperties & ResizableKnobStyle;
 };
-declare function ResizablePanelGroup({ className, orientation, variant, children, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
-declare function ResizablePanel({ className, ...props }: ResizablePanelProps): import("react").JSX.Element;
-declare function ResizableHandle({ className, variant, withHandle, children, ...props }: ResizableHandleProps): import("react").JSX.Element;
-//#endregion
-export { ResizableHandle, ResizableHandleProps, ResizableHandleVariant, ResizableLayout, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupProps, ResizablePanelGroupVariant, ResizablePanelHandle, ResizablePanelProps, ResizablePanelSize };
+export declare function ResizablePanelGroup({ className, orientation, variant, children, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
+export declare function ResizablePanel({ className, ...props }: ResizablePanelProps): import("react").JSX.Element;
+export declare function ResizableHandle({ className, variant, withHandle, children, ...props }: ResizableHandleProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/resizable.js

@@ -38,7 +38,7 @@ function ResizableHandle({ className, variant = "solid", withHandle, children, .
 		"data-slot": "handle",
 		"data-variant": variant,
 		"data-axis": axis,
-		className: cn("relative flex items-center justify-center", axis === "vertical" ? "w-px" : "h-px", className),
+		className: cn("relative flex items-center justify-center", axis === "vertical" ? "w-px touch-pan-y" : "h-px touch-pan-x", className),
 		...props,
 		children: [withHandle ? /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "resizable",

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,14 +144,14 @@ 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,
 		anchor,
 		collisionPadding,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsxs(Popover.Popup, {
 			"data-control-ui": "rich-tooltip",
 			"data-popup-kind": "rich-tooltip",

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,14 +65,16 @@ 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,
-		className: "z-[80]",
+		alignItemWithTrigger,
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Select$1.Popup, {
 			"data-control-ui": "select",
 			"data-popup-kind": "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