@ctrl-ui/react 0.8.1 → 0.8.4

package/dist/ui/morphing-panel.d.ts

@@ -2,23 +2,22 @@ import { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } fr
 import { MorphingPanelKnobStyle } from "../knob-contracts/morphing-panel-knobs.js";
 import { CSSProperties } from "react";
 //#region src/ui/morphing-panel.d.ts
-type MorphingPanelDimensions = {
+export type MorphingPanelDimensions = {
   width: string;
   height: string;
 };
-type MorphingPanelProps = Omit<CollapsibleProps, "style"> & {
+export type MorphingPanelProps = Omit<CollapsibleProps, "style"> & {
   collapsedSize: MorphingPanelDimensions;
   expandedSize: MorphingPanelDimensions;
   style?: CSSProperties & MorphingPanelKnobStyle;
 };
-type MorphingPanelTriggerProps = Omit<CollapsibleTriggerProps, "style"> & {
+export type MorphingPanelTriggerProps = Omit<CollapsibleTriggerProps, "style"> & {
   style?: CSSProperties & MorphingPanelKnobStyle;
 };
-type MorphingPanelContentProps = Omit<CollapsibleContentProps, "style"> & {
+export type MorphingPanelContentProps = Omit<CollapsibleContentProps, "style"> & {
   style?: CSSProperties & MorphingPanelKnobStyle;
 };
-declare function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props }: MorphingPanelProps): import("react").JSX.Element;
-declare function MorphingPanelTrigger({ render, className, children, ...props }: MorphingPanelTriggerProps): import("react").JSX.Element;
-declare function MorphingPanelContent({ className, ...props }: MorphingPanelContentProps): import("react").JSX.Element;
-//#endregion
-export { MorphingPanel, MorphingPanelContent, MorphingPanelContentProps, MorphingPanelDimensions, MorphingPanelProps, MorphingPanelTrigger, MorphingPanelTriggerProps };
+export declare function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props }: MorphingPanelProps): import("react").JSX.Element;
+export declare function MorphingPanelTrigger({ render, className, children, ...props }: MorphingPanelTriggerProps): import("react").JSX.Element;
+export declare function MorphingPanelContent({ className, ...props }: MorphingPanelContentProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/native-select.d.ts

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

package/dist/ui/native-select.js

@@ -20,7 +20,7 @@ function NativeSelect({ size = "md", className, children, ...props }) {
 			"data-control-family": "field",
 			"data-field-kind": "native-select",
 			"data-slot": "icon",
-			className: "pointer-events-none absolute right-[calc(var(--padding-x)*0.6)]",
+			className: "pointer-events-none absolute",
 			children: /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 12 12",
 				className: "size-3",

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

@@ -3,7 +3,7 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 //#region src/ui/navigation-menu.d.ts
-type NavigationMenuProps = ComponentProps<"nav"> & {
+export type NavigationMenuProps = ComponentProps<"nav"> & {
   value?: string | null;
   defaultValue?: string | null;
   onValueChange?: (value: string | null) => void;
@@ -13,39 +13,38 @@ type NavigationMenuProps = ComponentProps<"nav"> & {
 } & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type NavigationMenuListProps = ComponentProps<"ul"> & {
+export type NavigationMenuListProps = ComponentProps<"ul"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type NavigationMenuItemProps = ComponentProps<"li"> & {
+export type NavigationMenuItemProps = ComponentProps<"li"> & {
   value?: string;
 } & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type NavigationMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+export type NavigationMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & ButtonKnobStyle & PopupKnobStyle;
 };
-type NavigationMenuContentProps = ComponentProps<"div"> & {
+export type NavigationMenuContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare const navigationMenuLinkVariants: readonly ["default", "compact"];
-type NavigationMenuLinkVariant = (typeof navigationMenuLinkVariants)[number];
-type NavigationMenuLinkProps = Omit<ComponentProps<"a">, "style"> & {
+export declare const navigationMenuLinkVariants: readonly ["default", "compact"];
+export type NavigationMenuLinkVariant = (typeof navigationMenuLinkVariants)[number];
+export type NavigationMenuLinkProps = Omit<ComponentProps<"a">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 } & {
   active?: boolean;
   closeOnClick?: boolean;
   variant?: NavigationMenuLinkVariant;
 };
-type NavigationMenuViewportProps = Omit<ComponentProps<"div">, "style"> & {
+export type NavigationMenuViewportProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
 type RefinedLinkProps = NavigationMenuLinkProps & Pick<ComponentProps<typeof NavigationMenu$1.Link>, "render">;
-declare function NavigationMenu({ className, children, ...props }: NavigationMenuProps): import("react").JSX.Element;
-declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): import("react").JSX.Element;
-declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): import("react").JSX.Element;
-declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
-declare function NavigationMenuContent({ className, children, ...props }: NavigationMenuContentProps): import("react").JSX.Element;
-declare function NavigationMenuLink({ variant, className, active, children, ...props }: RefinedLinkProps): import("react").JSX.Element;
-declare function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps): import("react").JSX.Element;
-//#endregion
-export { NavigationMenu, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuItem, NavigationMenuItemProps, NavigationMenuLink, NavigationMenuLinkProps, NavigationMenuLinkVariant, NavigationMenuList, NavigationMenuListProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport, NavigationMenuViewportProps, navigationMenuLinkVariants };
+export declare function NavigationMenu({ className, children, ...props }: NavigationMenuProps): import("react").JSX.Element;
+export declare function NavigationMenuList({ className, ...props }: NavigationMenuListProps): import("react").JSX.Element;
+export declare function NavigationMenuItem({ className, ...props }: NavigationMenuItemProps): import("react").JSX.Element;
+export declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenuTriggerProps): import("react").JSX.Element;
+export declare function NavigationMenuContent({ className, children, ...props }: NavigationMenuContentProps): import("react").JSX.Element;
+export declare function NavigationMenuLink({ variant, className, active, children, ...props }: RefinedLinkProps): import("react").JSX.Element;
+export declare function NavigationMenuViewport({ className, ...props }: NavigationMenuViewportProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/navigation-menu.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 { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 //#region src/ui/navigation-menu.tsx
@@ -96,13 +97,14 @@ function NavigationMenuLink({ variant = "default", className, active, children,
 	});
 }
 function NavigationMenuViewport({ className, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(NavigationMenu$1.Portal, { children: /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
 		"data-control-ui": "navigation-menu",
 		"data-control-family": "popup",
 		"data-popup-kind": "navigation-menu",
 		"data-slot": "positioner",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		sideOffset: 8,
 		collisionPadding: {
 			top: 5,

package/dist/ui/number-field.d.ts

@@ -2,8 +2,8 @@ import { ControlSize } from "../control-variants.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
 //#region src/ui/number-field.d.ts
-type NumberFieldChangeReason = "input-change" | "input-clear" | "input-blur" | "input-paste" | "keyboard" | "increment-press" | "decrement-press" | "wheel" | "scrub" | "none";
-type NumberFieldChangeEventDetails = {
+export type NumberFieldChangeReason = "input-change" | "input-clear" | "input-blur" | "input-paste" | "keyboard" | "increment-press" | "decrement-press" | "wheel" | "scrub" | "none";
+export type NumberFieldChangeEventDetails = {
   reason: NumberFieldChangeReason;
   event: Event;
   cancel?: () => void;
@@ -12,7 +12,7 @@ type NumberFieldChangeEventDetails = {
   isPropagationAllowed?: boolean;
   trigger?: Element | undefined;
 };
-type NumberFieldProps = {
+export type NumberFieldProps = {
   size?: ControlSize;
   value?: number | null;
   defaultValue?: number;
@@ -39,34 +39,33 @@ type NumberFieldProps = {
   style?: CSSProperties & FieldKnobStyle;
   children?: ReactNode;
 };
-type NumberFieldGroupProps = Omit<ComponentProps<"div">, "style"> & {
+export type NumberFieldGroupProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type NumberFieldInputProps = Omit<ComponentProps<"input">, "style"> & {
+export type NumberFieldInputProps = Omit<ComponentProps<"input">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type NumberFieldIncrementProps = ComponentProps<"button"> & {
+export type NumberFieldIncrementProps = ComponentProps<"button"> & {
   nativeButton?: boolean;
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type NumberFieldDecrementProps = ComponentProps<"button"> & {
+export type NumberFieldDecrementProps = ComponentProps<"button"> & {
   nativeButton?: boolean;
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type NumberFieldScrubAreaProps = ComponentProps<"span"> & {
+export type NumberFieldScrubAreaProps = ComponentProps<"span"> & {
   direction?: "horizontal" | "vertical";
   pixelSensitivity?: number;
   teleportDistance?: number;
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
-declare function NumberField({ size, value, defaultValue, children, ...props }: NumberFieldProps): import("react").JSX.Element;
-declare function NumberFieldGroup({ className, children, ...props }: NumberFieldGroupProps): import("react").JSX.Element;
-declare function NumberFieldInput({ className, ...props }: NumberFieldInputProps): import("react").JSX.Element;
-declare function NumberFieldDecrement({ className, children, ...props }: NumberFieldDecrementProps): import("react").JSX.Element;
-declare function NumberFieldIncrement({ className, children, ...props }: NumberFieldIncrementProps): import("react").JSX.Element;
-declare function NumberFieldScrubArea({ className, children, ...props }: NumberFieldScrubAreaProps): import("react").JSX.Element;
-//#endregion
-export { NumberField, NumberFieldChangeEventDetails, NumberFieldChangeReason, NumberFieldDecrement, NumberFieldDecrementProps, NumberFieldGroup, NumberFieldGroupProps, NumberFieldIncrement, NumberFieldIncrementProps, NumberFieldInput, NumberFieldInputProps, NumberFieldProps, NumberFieldScrubArea, NumberFieldScrubAreaProps };
+export declare function NumberField({ size, value, defaultValue, children, ...props }: NumberFieldProps): import("react").JSX.Element;
+export declare function NumberFieldGroup({ className, children, ...props }: NumberFieldGroupProps): import("react").JSX.Element;
+export declare function NumberFieldInput({ className, ...props }: NumberFieldInputProps): import("react").JSX.Element;
+export declare function NumberFieldDecrement({ className, children, ...props }: NumberFieldDecrementProps): import("react").JSX.Element;
+export declare function NumberFieldIncrement({ className, children, ...props }: NumberFieldIncrementProps): import("react").JSX.Element;
+export declare function NumberFieldScrubArea({ className, children, ...props }: NumberFieldScrubAreaProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/pagination.d.ts

@@ -1,26 +1,25 @@
 import { PaginationKnobStyle } from "../knob-contracts/pagination-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/pagination.d.ts
-type PaginationEllipsisProps = Omit<ComponentProps<"span">, "style"> & {
+export type PaginationEllipsisProps = Omit<ComponentProps<"span">, "style"> & {
   style?: CSSProperties & PaginationKnobStyle;
 };
-type PaginationLinkProps = Omit<ComponentProps<"a"> & {
+export type PaginationLinkProps = Omit<ComponentProps<"a"> & {
   isActive?: boolean;
 }, "style"> & {
   style?: CSSProperties & PaginationKnobStyle;
 };
-declare function Pagination({ className, ...props }: ComponentProps<"nav"> & {
+export declare function Pagination({ className, ...props }: ComponentProps<"nav"> & {
   style?: CSSProperties & PaginationKnobStyle;
 }): import("react").JSX.Element;
-declare function PaginationContent({ className, ...props }: ComponentProps<"ul"> & {
+export declare function PaginationContent({ className, ...props }: ComponentProps<"ul"> & {
   style?: CSSProperties & PaginationKnobStyle;
 }): import("react").JSX.Element;
-declare function PaginationItem({ className, ...props }: ComponentProps<"li"> & {
+export declare function PaginationItem({ className, ...props }: ComponentProps<"li"> & {
   style?: CSSProperties & PaginationKnobStyle;
 }): import("react").JSX.Element;
-declare function PaginationLink({ isActive, className, ...props }: PaginationLinkProps): import("react").JSX.Element;
-declare function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
-declare function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
-declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
-//#endregion
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationLink, PaginationLinkProps, PaginationNext, PaginationPrevious };
+export declare function PaginationLink({ isActive, className, ...props }: PaginationLinkProps): import("react").JSX.Element;
+export declare function PaginationPrevious({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+export declare function PaginationNext({ className, ...props }: ComponentProps<typeof PaginationLink>): import("react").JSX.Element;
+export declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/phone-input.d.ts

@@ -4,10 +4,10 @@ import { CSSProperties, ComponentProps } from "react";
 import { Country, Value } from "react-phone-number-input/max";
 import { Labels } from "react-phone-number-input";
 //#region src/ui/phone-input.d.ts
-type PhoneInputValue = Value;
-type PhoneInputCountry = Country;
+export type PhoneInputValue = Value;
+export type PhoneInputCountry = Country;
 type CountryOptionOrder = PhoneInputCountry | "XX" | "🌐" | "|" | "..." | "…";
-type PhoneInputProps = Omit<ComponentProps<"input">, "defaultValue" | "size" | "style" | "type" | "value"> & {
+export type PhoneInputProps = Omit<ComponentProps<"input">, "defaultValue" | "size" | "style" | "type" | "value"> & {
   size?: ControlSize;
   value?: PhoneInputValue | string;
   defaultValue?: PhoneInputValue | string;
@@ -25,6 +25,5 @@ type PhoneInputProps = Omit<ComponentProps<"input">, "defaultValue" | "size" | "
   "data-invalid"?: boolean | string;
   style?: CSSProperties & PhoneInputKnobStyle;
 };
-declare function PhoneInput(props: PhoneInputProps): import("react").JSX.Element;
-//#endregion
-export { PhoneInput, PhoneInputCountry, PhoneInputProps, PhoneInputValue };
+export declare function PhoneInput(props: PhoneInputProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/phone-input.js

@@ -2,12 +2,12 @@
 import { cn } from "../lib/cn.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
-import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
+import { normalizePhoneInputText, normalizePhoneInputValue } from "../lib/phone-input-format.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
 import flags from "react-phone-number-input/flags";
+import PhoneNumberInput, { getCountryCallingCode, parsePhoneNumber } from "react-phone-number-input/max";
 //#region src/ui/phone-input.tsx
 const FLAG_COMPONENTS = flags;
 const PhoneNumberInputWithRef = PhoneNumberInput;
@@ -70,41 +70,44 @@ function PhoneCountrySelect({ value, options, onChange, onFocus, onBlur, disable
 				align: "start",
 				padding: "none",
 				className: "w-[min(20rem,calc(100vw-2rem))]",
-				children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, {
-					"aria-label": searchPlaceholder,
-					placeholder: searchPlaceholder
-				}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
-					const callingCode = option.value ? `+${getCountryCallingCode(option.value)}` : "";
-					const selected = option.value === value;
-					return /* @__PURE__ */ jsxs(CommandItem, {
-						value: `${option.label} ${option.value ?? "international"} ${callingCode}`,
-						"data-current": selected ? "" : void 0,
-						onSelect: () => {
-							onChange(option.value);
-							setOpen(false);
-						},
-						children: [
-							/* @__PURE__ */ jsx(CountryFlag, { country: option.value }),
-							/* @__PURE__ */ jsx("span", {
-								className: "min-w-0 flex-1 truncate",
-								children: option.label
-							}),
-							callingCode ? /* @__PURE__ */ jsx("span", {
-								"data-control-ui": "phone-input",
-								"data-control-family": "phone-input",
-								"data-slot": "metadata",
-								className: "min-w-0",
-								style: metadataStyle,
-								children: callingCode
-							}) : null,
-							selected ? /* @__PURE__ */ jsx("span", {
-								className: "sr-only",
-								children: "Selected"
-							}) : null,
-							/* @__PURE__ */ jsx(CheckIcon, { visible: selected })
-						]
-					}, option.value ?? "international");
-				}) })] })] })
+				children: /* @__PURE__ */ jsxs(Command, {
+					chrome: "embedded",
+					children: [/* @__PURE__ */ jsx(CommandInput, {
+						"aria-label": searchPlaceholder,
+						placeholder: searchPlaceholder
+					}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }), /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+						const callingCode = option.value ? `+${getCountryCallingCode(option.value)}` : "";
+						const selected = option.value === value;
+						return /* @__PURE__ */ jsxs(CommandItem, {
+							value: `${option.label} ${option.value ?? "international"} ${callingCode}`,
+							"data-current": selected ? "" : void 0,
+							onSelect: () => {
+								onChange(option.value);
+								setOpen(false);
+							},
+							children: [
+								/* @__PURE__ */ jsx(CountryFlag, { country: option.value }),
+								/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1 truncate",
+									children: option.label
+								}),
+								callingCode ? /* @__PURE__ */ jsx("span", {
+									"data-control-ui": "phone-input",
+									"data-control-family": "phone-input",
+									"data-slot": "metadata",
+									className: "min-w-0",
+									style: metadataStyle,
+									children: callingCode
+								}) : null,
+								selected ? /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: "Selected"
+								}) : null,
+								/* @__PURE__ */ jsx(CheckIcon, { visible: selected })
+							]
+						}, option.value ?? "international");
+					}) })] })]
+				})
 			})]
 		})
 	});

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,9 +22,10 @@ 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,

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