@ctrl-ui/react 0.8.2 → 0.8.5

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

@@ -2,8 +2,8 @@ import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
 import { DockablePanelKnobStyle } from "../knob-contracts/dockable-panel-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/dockable-panel.d.ts
-type DockablePanelPlacement = "left" | "right";
-type DockablePanelProps = Omit<ComponentProps<"aside">, "onChange" | "ref" | "style"> & {
+export type DockablePanelPlacement = "left" | "right";
+export type DockablePanelProps = Omit<ComponentProps<"aside">, "onChange" | "ref" | "style"> & {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -12,47 +12,46 @@ type DockablePanelProps = Omit<ComponentProps<"aside">, "onChange" | "ref" | "st
   onPlacementChange?: (placement: DockablePanelPlacement) => void;
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelHeaderProps = Omit<ComponentProps<"div">, "style"> & {
+export type DockablePanelHeaderProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelDragHandleProps = Omit<ComponentProps<"button">, "style"> & {
+export type DockablePanelDragHandleProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelTitleProps = Omit<ComponentProps<"h2">, "style"> & {
+export type DockablePanelTitleProps = Omit<ComponentProps<"h2">, "style"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelActionsProps = ComponentProps<"div"> & {
+export type DockablePanelActionsProps = ComponentProps<"div"> & {
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-type DockablePanelToggleProps = Omit<Omit<ComponentProps<"button">, "children"> & {
+export type DockablePanelToggleProps = Omit<Omit<ComponentProps<"button">, "children"> & {
   children?: ReactNode;
 }, "style"> & {
   style?: CSSProperties & ButtonKnobStyle;
 };
-type DockablePanelDockProps = Omit<Omit<ComponentProps<"button">, "children"> & {
+export type DockablePanelDockProps = Omit<Omit<ComponentProps<"button">, "children"> & {
   placement: DockablePanelPlacement;
   children?: ReactNode;
 }, "style"> & {
   style?: CSSProperties & ButtonKnobStyle;
 };
-type DockablePanelCloseProps = Omit<Omit<ComponentProps<"button">, "children"> & {
+export type DockablePanelCloseProps = Omit<Omit<ComponentProps<"button">, "children"> & {
   children?: ReactNode;
 }, "style"> & {
   style?: CSSProperties & ButtonKnobStyle;
 };
-type DockablePanelContentPadding = "default" | "none";
-type DockablePanelContentProps = ComponentProps<"div"> & {
+export type DockablePanelContentPadding = "default" | "none";
+export type DockablePanelContentProps = ComponentProps<"div"> & {
   padding?: DockablePanelContentPadding;
   style?: CSSProperties & DockablePanelKnobStyle;
 };
-declare function DockablePanel({ open: openProp, defaultOpen, onOpenChange, placement: placementProp, defaultPlacement, onPlacementChange, className, style, children, "aria-label": ariaLabel, ...props }: DockablePanelProps): import("react").JSX.Element | null;
-declare function DockablePanelHeader({ className, ...props }: DockablePanelHeaderProps): import("react").JSX.Element;
-declare function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, ...props }: DockablePanelDragHandleProps): import("react").JSX.Element;
-declare function DockablePanelTitle({ className, ...props }: DockablePanelTitleProps): import("react").JSX.Element;
-declare function DockablePanelActions({ className, ...props }: DockablePanelActionsProps): import("react").JSX.Element;
-declare function DockablePanelToggle({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelToggleProps): import("react").JSX.Element | null;
-declare function DockablePanelDock({ placement: nextPlacement, className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelDockProps): import("react").JSX.Element | null;
-declare function DockablePanelClose({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelCloseProps): import("react").JSX.Element;
-declare function DockablePanelContent({ padding, className, ...props }: DockablePanelContentProps): import("react").JSX.Element;
-//#endregion
-export { DockablePanel, DockablePanelActions, DockablePanelActionsProps, DockablePanelClose, DockablePanelCloseProps, DockablePanelContent, DockablePanelContentPadding, DockablePanelContentProps, DockablePanelDock, DockablePanelDockProps, DockablePanelDragHandle, DockablePanelDragHandleProps, DockablePanelHeader, DockablePanelHeaderProps, DockablePanelPlacement, DockablePanelProps, DockablePanelTitle, DockablePanelTitleProps, DockablePanelToggle, DockablePanelToggleProps };
+export declare function DockablePanel({ open: openProp, defaultOpen, onOpenChange, placement: placementProp, defaultPlacement, onPlacementChange, className, style, children, "aria-label": ariaLabel, ...props }: DockablePanelProps): import("react").JSX.Element | null;
+export declare function DockablePanelHeader({ className, ...props }: DockablePanelHeaderProps): import("react").JSX.Element;
+export declare function DockablePanelDragHandle({ className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, children, ...props }: DockablePanelDragHandleProps): import("react").JSX.Element;
+export declare function DockablePanelTitle({ className, ...props }: DockablePanelTitleProps): import("react").JSX.Element;
+export declare function DockablePanelActions({ className, ...props }: DockablePanelActionsProps): import("react").JSX.Element;
+export declare function DockablePanelToggle({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelToggleProps): import("react").JSX.Element | null;
+export declare function DockablePanelDock({ placement: nextPlacement, className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelDockProps): import("react").JSX.Element | null;
+export declare function DockablePanelClose({ className, children, "aria-label": ariaLabel, onClick, ...props }: DockablePanelCloseProps): import("react").JSX.Element;
+export declare function DockablePanelContent({ padding, className, ...props }: DockablePanelContentProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/drawer.d.ts

@@ -2,41 +2,40 @@ import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 //#region src/ui/drawer.d.ts
-declare const drawerSides: readonly ["bottom", "top", "right", "left"];
-type DrawerSide = (typeof drawerSides)[number];
-declare const drawerContentPaddings: readonly ["default", "none"];
-type DrawerContentPadding = (typeof drawerContentPaddings)[number];
-declare const drawerContentSurfaces: readonly ["background", "card"];
-type DrawerContentSurface = (typeof drawerContentSurfaces)[number];
-declare const drawerContentVariants: readonly ["edge", "floating"];
-type DrawerContentVariant = (typeof drawerContentVariants)[number];
-declare function Drawer(props: ComponentProps<typeof Drawer$1.Root> & {
+export declare const drawerSides: readonly ["bottom", "top", "right", "left"];
+export type DrawerSide = (typeof drawerSides)[number];
+export declare const drawerContentPaddings: readonly ["default", "none"];
+export type DrawerContentPadding = (typeof drawerContentPaddings)[number];
+export declare const drawerContentSurfaces: readonly ["background", "card"];
+export type DrawerContentSurface = (typeof drawerContentSurfaces)[number];
+export declare const drawerContentVariants: readonly ["edge", "floating"];
+export type DrawerContentVariant = (typeof drawerContentVariants)[number];
+export declare function Drawer(props: ComponentProps<typeof Drawer$1.Root> & {
   side?: DrawerSide;
 }): import("react").JSX.Element;
-declare function DrawerTrigger({ className, ...props }: ComponentProps<typeof Drawer$1.Trigger> & {
+export declare function DrawerTrigger({ className, ...props }: ComponentProps<typeof Drawer$1.Trigger> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function DrawerClose({ className, ...props }: ComponentProps<typeof Drawer$1.Close> & {
+export declare function DrawerClose({ className, ...props }: ComponentProps<typeof Drawer$1.Close> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function DrawerContent({ className, children, side, padding, surface, variant, style, ...props }: Omit<ComponentProps<typeof Drawer$1.Popup>, "style"> & {
+export declare function DrawerContent({ className, children, side, padding, surface, variant, style, ...props }: Omit<ComponentProps<typeof Drawer$1.Popup>, "style"> & {
   side?: DrawerSide;
   padding?: DrawerContentPadding;
   surface?: DrawerContentSurface;
   variant?: DrawerContentVariant;
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function DrawerHeader({ className, ...props }: ComponentProps<"div"> & {
+export declare function DrawerHeader({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function DrawerFooter({ className, ...props }: ComponentProps<"div"> & {
+export declare function DrawerFooter({ className, ...props }: ComponentProps<"div"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function DrawerTitle({ className, ...props }: Omit<ComponentProps<typeof Drawer$1.Title>, "style"> & {
+export declare function DrawerTitle({ className, ...props }: Omit<ComponentProps<typeof Drawer$1.Title>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-declare function DrawerDescription({ className, ...props }: Omit<ComponentProps<typeof Drawer$1.Description>, "style"> & {
+export declare function DrawerDescription({ className, ...props }: Omit<ComponentProps<typeof Drawer$1.Description>, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
-//#endregion
-export { Drawer, DrawerClose, DrawerContent, DrawerContentPadding, DrawerContentSurface, DrawerContentVariant, DrawerDescription, DrawerFooter, DrawerHeader, DrawerSide, DrawerTitle, DrawerTrigger, drawerContentPaddings, drawerContentSurfaces, drawerContentVariants, drawerSides };
+//#endregion

package/dist/ui/drawer.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 { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 //#region src/ui/drawer.tsx
@@ -76,7 +77,6 @@ function DrawerTrigger({ className, ...props }) {
 function DrawerClose({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Drawer$1.Close, {
 		"data-control-ui": "drawer",
-		"data-control-family": "popup",
 		"data-popup-kind": "drawer",
 		"data-slot": "close",
 		className,
@@ -84,6 +84,7 @@ function DrawerClose({ className, ...props }) {
 	});
 }
 function DrawerContent({ className, children, side = "bottom", padding = "default", surface = "background", variant = "edge", style, ...props }) {
+	const skin = useSkin();
 	const place = placement[variant][side];
 	const grabbable = side === "bottom" || side === "top";
 	const backdropStyle = style ? { "--cui-popup-backdrop-background": style["--cui-popup-backdrop-background"] } : void 0;
@@ -93,9 +94,9 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 		"data-popup-kind": "drawer",
 		"data-popup-part": "backdrop",
 		"data-slot": "backdrop",
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
-		className: "fixed inset-0 z-[70]",
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
+		className: "fixed inset-0 z-(--z-overlay)",
 		style: backdropStyle
 	}), /* @__PURE__ */ jsx(Drawer$1.Viewport, {
 		"data-control-ui": "drawer",
@@ -104,9 +105,9 @@ function DrawerContent({ className, children, side = "bottom", padding = "defaul
 		"data-slot": "viewport",
 		"data-side": side,
 		"data-variant": variant,
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
-		className: cn("fixed inset-0 z-[71] flex", place.viewport),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
+		className: cn("fixed inset-0 z-(--z-modal) flex", place.viewport),
 		children: /* @__PURE__ */ jsxs(Drawer$1.Popup, {
 			"data-control-ui": "drawer",
 			"data-control-family": "popup",

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

@@ -8,46 +8,45 @@ type DropdownMenuStyledProps<PrimitiveProps> = Omit<PrimitiveProps, "className"
   className?: string;
   style?: CSSProperties & PopupKnobStyle;
 };
-type DropdownMenuProps = Menu.Root.Props;
-declare const dropdownMenuTriggerVariants: readonly ["surface", "ghost"];
-type DropdownMenuTriggerVariant = (typeof dropdownMenuTriggerVariants)[number];
-type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & Pick<ComponentProps<typeof Menu.Trigger>, "nativeButton" | "render"> & {
+export type DropdownMenuProps = Menu.Root.Props;
+export declare const dropdownMenuTriggerVariants: readonly ["surface", "ghost"];
+export type DropdownMenuTriggerVariant = (typeof dropdownMenuTriggerVariants)[number];
+export type DropdownMenuTriggerProps = Omit<ComponentProps<"button">, "style"> & Pick<ComponentProps<typeof Menu.Trigger>, "nativeButton" | "render"> & {
   style?: CSSProperties & ButtonKnobStyle;
 } & {
   size?: ControlSize;
   iconOnly?: boolean;
   variant?: DropdownMenuTriggerVariant;
 };
-type DropdownMenuContentProps = DropdownMenuStyledProps<Menu.Popup.Props> & Pick<Menu.Positioner.Props, "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance">;
-type DropdownMenuItemProps = DropdownMenuStyledProps<Menu.Item.Props>;
-type DropdownMenuGroupProps = DropdownMenuStyledProps<Menu.Group.Props>;
-type DropdownMenuCheckboxItemProps = DropdownMenuStyledProps<Menu.CheckboxItem.Props>;
-type DropdownMenuRadioGroupProps = DropdownMenuStyledProps<Menu.RadioGroup.Props>;
-type DropdownMenuRadioItemProps = DropdownMenuStyledProps<Menu.RadioItem.Props>;
-type DropdownMenuSubProps = Menu.SubmenuRoot.Props;
-type DropdownMenuSubTriggerProps = DropdownMenuStyledProps<Menu.SubmenuTrigger.Props>;
-type DropdownMenuSubContentProps = DropdownMenuContentProps;
-type DropdownMenuShortcutProps = DropdownMenuStyledProps<ComponentProps<"span">>;
-type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+export type DropdownMenuContentProps = DropdownMenuStyledProps<Menu.Popup.Props> & Pick<Menu.Positioner.Props, "side" | "sideOffset" | "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "collisionAvoidance">;
+export type DropdownMenuItemProps = DropdownMenuStyledProps<Menu.Item.Props>;
+export type DropdownMenuGroupProps = DropdownMenuStyledProps<Menu.Group.Props>;
+export type DropdownMenuCheckboxItemProps = DropdownMenuStyledProps<Menu.CheckboxItem.Props>;
+export type DropdownMenuRadioGroupProps = DropdownMenuStyledProps<Menu.RadioGroup.Props>;
+export type DropdownMenuRadioItemProps = DropdownMenuStyledProps<Menu.RadioItem.Props>;
+export type DropdownMenuSubProps = Menu.SubmenuRoot.Props;
+export type DropdownMenuSubTriggerProps = DropdownMenuStyledProps<Menu.SubmenuTrigger.Props>;
+export type DropdownMenuSubContentProps = DropdownMenuContentProps;
+export type DropdownMenuShortcutProps = DropdownMenuStyledProps<ComponentProps<"span">>;
+export type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
+export type DropdownMenuLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
-declare function DropdownMenuTrigger({ size, iconOnly, variant, className, children, disabled, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
-declare function DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
-declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
-declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
-declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
-declare function DropdownMenuPortal(props: Menu.Portal.Props): import("react").JSX.Element;
-declare function DropdownMenuGroup(props: DropdownMenuGroupProps): import("react").JSX.Element;
-declare function DropdownMenuCheckboxItem({ className, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
-declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): import("react").JSX.Element;
-declare function DropdownMenuRadioItem({ className, children, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
-declare function DropdownMenuSub(props: DropdownMenuSubProps): import("react").JSX.Element;
-declare function DropdownMenuSubTrigger({ className, children, ...props }: DropdownMenuSubTriggerProps): import("react").JSX.Element;
-declare function DropdownMenuSubContent(props: DropdownMenuSubContentProps): import("react").JSX.Element;
-declare function DropdownMenuShortcut(props: DropdownMenuShortcutProps): import("react").JSX.Element;
-//#endregion
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps, DropdownMenuTriggerVariant, dropdownMenuTriggerVariants };
+export declare function DropdownMenu({ children, ...props }: DropdownMenuProps): import("react").JSX.Element;
+export declare function DropdownMenuTrigger({ size, iconOnly, variant, className, children, disabled, ...props }: DropdownMenuTriggerProps): import("react").JSX.Element;
+export declare function DropdownMenuContent({ className, children, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }: DropdownMenuContentProps): import("react").JSX.Element;
+export declare function DropdownMenuItem({ className, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
+export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
+export declare function DropdownMenuLabel({ className, ...props }: DropdownMenuLabelProps): import("react").JSX.Element;
+export declare function DropdownMenuPortal(props: Menu.Portal.Props): import("react").JSX.Element;
+export declare function DropdownMenuGroup(props: DropdownMenuGroupProps): import("react").JSX.Element;
+export declare function DropdownMenuCheckboxItem({ className, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioGroup(props: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export declare function DropdownMenuRadioItem({ className, children, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+export declare function DropdownMenuSub(props: DropdownMenuSubProps): import("react").JSX.Element;
+export declare function DropdownMenuSubTrigger({ className, children, ...props }: DropdownMenuSubTriggerProps): import("react").JSX.Element;
+export declare function DropdownMenuSubContent(props: DropdownMenuSubContentProps): import("react").JSX.Element;
+export declare function DropdownMenuShortcut(props: DropdownMenuShortcutProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/dropdown-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 { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
@@ -30,9 +31,10 @@ function DropdownMenuTrigger({ size = "sm", iconOnly = false, variant = "surface
 	});
 }
 function DropdownMenuContent({ className, children, side = "bottom", sideOffset = 6, align = "start", alignOffset, collisionBoundary, collisionPadding, collisionAvoidance, ...props }) {
+	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-		"data-skin": skinId(),
-		"data-effects": skinEffects(),
+		"data-skin": skin.id,
+		"data-effects": controlEffectsAttribute(skin.effects),
 		side,
 		align,
 		sideOffset,
@@ -40,7 +42,7 @@ function DropdownMenuContent({ className, children, side = "bottom", sideOffset
 		collisionBoundary,
 		collisionPadding,
 		collisionAvoidance,
-		className: "z-[80]",
+		className: "z-(--z-popup)",
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
 			"data-control-ui": "dropdown-menu",
 			"data-slot": "content",

package/dist/ui/dropzone.d.ts

@@ -4,8 +4,8 @@ import { DropzoneDropDetails, DropzoneEvent, DropzoneGetFilesFromEvent, Dropzone
 import { DropzoneKnobStyle } from "../knob-contracts/dropzone-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/dropzone.d.ts
-type DropzoneOverlayScope = "local" | "global";
-type DropzoneProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "onDrop" | "onError"> & {
+export type DropzoneOverlayScope = "local" | "global";
+export type DropzoneProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "onDrop" | "onError"> & {
   value?: readonly File[];
   defaultValue?: readonly File[];
   onValueChange?: (value: readonly File[], details: DropzoneValueChangeDetails) => void;
@@ -17,50 +17,50 @@ type DropzoneProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "
 } & {
   style?: CSSProperties & DropzoneKnobStyle;
 };
-type DropzoneAreaProps = ComponentProps<"div"> & {
+export type DropzoneAreaProps = ComponentProps<"div"> & {
   style?: CSSProperties & DropzoneKnobStyle;
 };
-type DropzoneInputProps = Omit<ComponentProps<"input">, "accept" | "disabled" | "multiple" | "onChange" | "onClick" | "type"> & {
+export type DropzoneInputProps = Omit<ComponentProps<"input">, "accept" | "disabled" | "multiple" | "onChange" | "onClick" | "type"> & {
   style?: CSSProperties & DropzoneKnobStyle;
 };
-type DropzoneTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+export type DropzoneTriggerProps = Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & DropzoneKnobStyle;
 };
-type DropzoneOverlayProps = Omit<ComponentProps<"div">, "style"> & {
+export type DropzoneOverlayProps = Omit<ComponentProps<"div">, "style"> & {
   scope?: DropzoneOverlayScope;
   style?: CSSProperties & DropzoneKnobStyle;
 };
-type DropzoneFileListProps = Omit<ComponentProps<"ul">, "children"> & {
+export type DropzoneFileListProps = Omit<ComponentProps<"ul">, "children"> & {
   children?: (file: File, index: number) => ReactNode;
 } & {
   style?: CSSProperties & DropzoneKnobStyle;
 };
-type DropzoneRejectionListProps = Omit<ComponentProps<"ul">, "children"> & {
+export type DropzoneRejectionListProps = Omit<ComponentProps<"ul">, "children"> & {
   children?: (rejection: DropzoneFileRejection, index: number) => ReactNode;
 } & {
   style?: CSSProperties & DropzoneKnobStyle;
 };
-type DropzoneContextValue = UseDropzoneReturn & {
+export type DropzoneContextValue = UseDropzoneReturn & {
   registerGlobalOverlay: () => () => void;
 };
-type DropzoneStatusProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+export type DropzoneStatusProps = Omit<ComponentProps<"div">, "children" | "style"> & {
   children?: (state: DropzoneContextValue) => ReactNode;
   style?: CSSProperties & DropzoneKnobStyle;
 };
-type DropzoneRemoveProps = ComponentProps<typeof Button> & {
+export type DropzoneRemoveProps = ComponentProps<typeof Button> & {
   file: File;
 };
-type DropzoneClearProps = ComponentProps<typeof Button>;
-declare function useDropzoneContext(): DropzoneContextValue;
-declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFilesFromEvent, onDrop, onError, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
-declare function DropzoneArea({ className, ...props }: DropzoneAreaProps): import("react").JSX.Element;
-declare function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneInputProps): import("react").JSX.Element;
-declare function DropzoneTrigger({ className, children, onClick, disabled, ...props }: DropzoneTriggerProps): import("react").JSX.Element;
-declare function DropzoneOverlay({ scope, className, children, ...props }: DropzoneOverlayProps): import("react").JSX.Element;
-declare function DropzoneFileList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneFileListProps): import("react").JSX.Element;
-declare function DropzoneRejectionList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneRejectionListProps): import("react").JSX.Element;
-declare function DropzoneStatus({ className, children, role, "aria-live": ariaLive, ...props }: DropzoneStatusProps): import("react").JSX.Element;
-declare function DropzoneRemove({ file, children, onClick, disabled, ...props }: DropzoneRemoveProps): import("react").JSX.Element;
-declare function DropzoneClear({ children, onClick, disabled, ...props }: DropzoneClearProps): import("react").JSX.Element;
+export type DropzoneClearProps = ComponentProps<typeof Button>;
+export declare function useDropzoneContext(): DropzoneContextValue;
+export declare function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFilesFromEvent, onDrop, onError, className, children, ...props }: DropzoneProps): import("react").JSX.Element;
+export declare function DropzoneArea({ className, ...props }: DropzoneAreaProps): import("react").JSX.Element;
+export declare function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneInputProps): import("react").JSX.Element;
+export declare function DropzoneTrigger({ className, children, onClick, disabled, ...props }: DropzoneTriggerProps): import("react").JSX.Element;
+export declare function DropzoneOverlay({ scope, className, children, ...props }: DropzoneOverlayProps): import("react").JSX.Element;
+export declare function DropzoneFileList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneFileListProps): import("react").JSX.Element;
+export declare function DropzoneRejectionList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: DropzoneRejectionListProps): import("react").JSX.Element;
+export declare function DropzoneStatus({ className, children, role, "aria-live": ariaLive, ...props }: DropzoneStatusProps): import("react").JSX.Element;
+export declare function DropzoneRemove({ file, children, onClick, disabled, ...props }: DropzoneRemoveProps): import("react").JSX.Element;
+export declare function DropzoneClear({ children, onClick, disabled, ...props }: DropzoneClearProps): import("react").JSX.Element;
 //#endregion
-export { Dropzone, type DropzoneAccept, DropzoneArea, DropzoneAreaProps, DropzoneClear, DropzoneClearProps, DropzoneContextValue, type DropzoneDropDetails, DropzoneErrorCode, type DropzoneErrorCodeValue, type DropzoneEvent, type DropzoneFileError, DropzoneFileList, DropzoneFileListProps, type DropzoneFileRejection, type DropzoneGetFilesFromEvent, DropzoneInput, DropzoneInputProps, DropzoneOverlay, DropzoneOverlayProps, DropzoneOverlayScope, type DropzonePolicy, DropzoneProps, DropzoneRejectionList, DropzoneRejectionListProps, DropzoneRemove, DropzoneRemoveProps, type DropzoneSelectionMode, DropzoneStatus, DropzoneStatusProps, DropzoneTrigger, DropzoneTriggerProps, type DropzoneValidator, type DropzoneValidatorResult, type DropzoneValueChangeDetails, type DropzoneValueChangeReason, type DropzoneVisualState, type UseDropzoneOptions, type UseDropzoneReturn, formatDropzoneFileSize, useDropzone, useDropzoneContext };
+export { type DropzoneAccept, type DropzoneDropDetails, DropzoneErrorCode, type DropzoneErrorCodeValue, type DropzoneEvent, type DropzoneFileError, type DropzoneFileRejection, type DropzoneGetFilesFromEvent, type DropzonePolicy, type DropzoneSelectionMode, type DropzoneValidator, type DropzoneValidatorResult, type DropzoneValueChangeDetails, type DropzoneValueChangeReason, type DropzoneVisualState, type UseDropzoneOptions, type UseDropzoneReturn, formatDropzoneFileSize, useDropzone };

package/dist/ui/dropzone.js

@@ -272,7 +272,10 @@ function DefaultFile({ file }) {
 			/* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, {
 				className: "wrap-anywhere",
 				children: file.name
-			}), /* @__PURE__ */ jsx(ItemDescription, { children: formatDropzoneFileSize(file.size) })] }),
+			}), /* @__PURE__ */ jsx(ItemDescription, {
+				className: "tabular-nums",
+				children: formatDropzoneFileSize(file.size)
+			})] }),
 			/* @__PURE__ */ jsx(ItemActions, { children: /* @__PURE__ */ jsx(DropzoneRemove, { file }) })
 		]
 	});

package/dist/ui/empty.d.ts

@@ -1,28 +1,28 @@
 import { EmptyKnobStyle } from "../knob-contracts/empty-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/empty.d.ts
-type EmptyProps = Omit<ComponentProps<"div">, "style"> & {
+export type EmptyProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
 };
-type EmptyMediaProps = Omit<ComponentProps<"div">, "style"> & {
+export type EmptyHeaderProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
 };
-type EmptyContentProps = Omit<ComponentProps<"div">, "style"> & {
+export type EmptyMediaProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
 };
-type EmptyDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
+export type EmptyContentProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
 };
-type EmptyTitleProps = Omit<ComponentProps<"div">, "style"> & {
+export type EmptyDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
 };
-declare function Empty({ className, ...props }: EmptyProps): import("react").JSX.Element;
-declare function EmptyHeader({ className, ...props }: ComponentProps<"div"> & {
+export type EmptyTitleProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & EmptyKnobStyle;
-}): import("react").JSX.Element;
-declare function EmptyMedia({ className, ...props }: EmptyMediaProps): import("react").JSX.Element;
-declare function EmptyTitle({ className, ...props }: EmptyTitleProps): import("react").JSX.Element;
-declare function EmptyDescription({ className, ...props }: EmptyDescriptionProps): import("react").JSX.Element;
-declare function EmptyContent({ className, ...props }: EmptyContentProps): import("react").JSX.Element;
-//#endregion
-export { Empty, EmptyContent, EmptyContentProps, EmptyDescription, EmptyDescriptionProps, EmptyHeader, EmptyMedia, EmptyMediaProps, EmptyProps, EmptyTitle, EmptyTitleProps };
+};
+export declare function Empty({ className, ...props }: EmptyProps): import("react").JSX.Element;
+export declare function EmptyHeader({ className, ...props }: EmptyHeaderProps): import("react").JSX.Element;
+export declare function EmptyMedia({ className, ...props }: EmptyMediaProps): import("react").JSX.Element;
+export declare function EmptyTitle({ className, ...props }: EmptyTitleProps): import("react").JSX.Element;
+export declare function EmptyDescription({ className, ...props }: EmptyDescriptionProps): import("react").JSX.Element;
+export declare function EmptyContent({ className, ...props }: EmptyContentProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/empty.js

@@ -15,7 +15,7 @@ function EmptyHeader({ className, ...props }) {
 		"data-control-ui": "empty",
 		"data-control-family": "empty",
 		"data-slot": "header",
-		className: cn("flex max-w-sm flex-col items-center", className),
+		className: cn("flex min-w-0 flex-col items-center", className),
 		...props
 	});
 }
@@ -24,7 +24,7 @@ function EmptyMedia({ className, ...props }) {
 		"data-control-ui": "empty",
 		"data-control-family": "empty",
 		"data-slot": "media",
-		className: cn("flex shrink-0 items-center justify-center [&>svg]:size-5 [&>svg]:shrink-0", className),
+		className: cn("flex shrink-0 items-center justify-center [&>svg]:shrink-0", className),
 		...props
 	});
 }
@@ -51,7 +51,7 @@ function EmptyContent({ className, ...props }) {
 		"data-control-ui": "empty",
 		"data-control-family": "empty",
 		"data-slot": "content",
-		className: cn("flex w-full max-w-sm flex-col items-center justify-center", className),
+		className: cn("flex w-full min-w-0 flex-col items-center justify-center", className),
 		...props
 	});
 }

package/dist/ui/field.d.ts

@@ -2,7 +2,7 @@ import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Field as Field$1 } from "@base-ui/react/field";
 //#region src/ui/field.d.ts
-type FieldProps = ComponentProps<"div"> & {
+export type FieldProps = ComponentProps<"div"> & {
   orientation?: "vertical" | "horizontal" | "responsive";
   name?: string;
   disabled?: boolean;
@@ -11,54 +11,53 @@ type FieldProps = ComponentProps<"div"> & {
 } & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldLabelProps = Omit<ComponentProps<"label">, "style"> & {
+export type FieldLabelProps = Omit<ComponentProps<"label">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldContentProps = ComponentProps<"div"> & {
+export type FieldContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldTitleProps = Omit<ComponentProps<"div">, "style"> & {
+export type FieldTitleProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldControlProps = Omit<ComponentProps<"input">, "style"> & {
+export type FieldControlProps = Omit<ComponentProps<"input">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
+export type FieldDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldErrorMatch = boolean | keyof ValidityState;
-type FieldErrorProps = Omit<ComponentProps<"div">, "style"> & {
+export type FieldErrorMatch = boolean | keyof ValidityState;
+export type FieldErrorProps = Omit<ComponentProps<"div">, "style"> & {
   match?: FieldErrorMatch;
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldGroupProps = ComponentProps<"div"> & {
+export type FieldGroupProps = ComponentProps<"div"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+export type FieldSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
   children?: ReactNode;
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldItemProps = ComponentProps<"div"> & {
+export type FieldItemProps = ComponentProps<"div"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldSetProps = Omit<ComponentProps<"fieldset">, "style"> & {
+export type FieldSetProps = Omit<ComponentProps<"fieldset">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-type FieldLegendProps = Omit<ComponentProps<"div">, "style"> & {
+export type FieldLegendProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-declare function Field({ className, orientation, ...props }: FieldProps): import("react").JSX.Element;
-declare function FieldContent({ className, ...props }: FieldContentProps): import("react").JSX.Element;
-declare function FieldTitle({ className, ...props }: FieldTitleProps): import("react").JSX.Element;
-declare function FieldLabel({ className, ...props }: FieldLabelProps): import("react").JSX.Element;
+export declare function Field({ className, orientation, ...props }: FieldProps): import("react").JSX.Element;
+export declare function FieldContent({ className, ...props }: FieldContentProps): import("react").JSX.Element;
+export declare function FieldTitle({ className, ...props }: FieldTitleProps): import("react").JSX.Element;
+export declare function FieldLabel({ className, ...props }: FieldLabelProps): import("react").JSX.Element;
 type RefinedFieldControlProps = FieldControlProps & Pick<ComponentProps<typeof Field$1.Control>, "render">;
-declare function FieldControl({ className, render, ...props }: RefinedFieldControlProps): import("react").JSX.Element;
-declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react").JSX.Element;
-declare function FieldError({ className, ...props }: FieldErrorProps): import("react").JSX.Element;
-declare function FieldGroup({ className, ...props }: FieldGroupProps): import("react").JSX.Element;
-declare function FieldSeparator({ children, className, ...props }: FieldSeparatorProps): import("react").JSX.Element;
-declare function FieldItem({ className, ...props }: FieldItemProps): import("react").JSX.Element;
-declare function FieldSet({ className, ...props }: FieldSetProps): import("react").JSX.Element;
-declare function FieldLegend({ className, ...props }: FieldLegendProps): import("react").JSX.Element;
-//#endregion
-export { Field, FieldContent, FieldContentProps, FieldControl, FieldControlProps, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorMatch, FieldErrorProps, FieldGroup, FieldGroupProps, FieldItem, FieldItemProps, FieldLabel, FieldLabelProps, FieldLegend, FieldLegendProps, FieldProps, FieldSeparator, FieldSeparatorProps, FieldSet, FieldSetProps, FieldTitle, FieldTitleProps };
+export declare function FieldControl({ className, render, ...props }: RefinedFieldControlProps): import("react").JSX.Element;
+export declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react").JSX.Element;
+export declare function FieldError({ className, ...props }: FieldErrorProps): import("react").JSX.Element;
+export declare function FieldGroup({ className, ...props }: FieldGroupProps): import("react").JSX.Element;
+export declare function FieldSeparator({ children, className, ...props }: FieldSeparatorProps): import("react").JSX.Element;
+export declare function FieldItem({ className, ...props }: FieldItemProps): import("react").JSX.Element;
+export declare function FieldSet({ className, ...props }: FieldSetProps): import("react").JSX.Element;
+export declare function FieldLegend({ className, ...props }: FieldLegendProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/form.d.ts

@@ -1,10 +1,9 @@
 import { ComponentProps } from "react";
 //#region src/ui/form.d.ts
-type FormErrors = Record<string, string | string[]>;
-type FormProps = ComponentProps<"form"> & {
+export type FormErrors = Record<string, string | string[]>;
+export type FormProps = ComponentProps<"form"> & {
   errors?: FormErrors;
   validationMode?: "onSubmit" | "onBlur" | "onChange";
 };
-declare function Form({ className, ...props }: FormProps): import("react").JSX.Element;
-//#endregion
-export { Form, FormErrors, FormProps };
+export declare function Form({ className, ...props }: FormProps): import("react").JSX.Element;
+//#endregion