@ctrl-ui/react 0.8.0

package/dist/ui/dropdown-menu.js

@@ -0,0 +1,89 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/ui/dropdown-menu.tsx
+const dropdownMenuTriggerVariants = ["surface", "ghost"];
+function DropdownMenu({ children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		...props,
+		children
+	});
+}
+function DropdownMenuTrigger({ size = "sm", iconOnly = false, variant = "surface", className, children, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-control-ui": "dropdown-menu",
+		"data-control-family": "button",
+		"data-slot": "trigger",
+		"data-control": "true",
+		"data-size": size,
+		"data-icon-only": iconOnly ? "true" : void 0,
+		"data-variant": variant,
+		"data-tone": "neutral",
+		"data-shape": "default",
+		className: cn("relative isolate inline-flex shrink-0 items-center justify-center overflow-visible", className),
+		disabled,
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "button",
+			"data-control-family": "button",
+			"data-slot": "content",
+			className: "relative z-[1] inline-flex items-center justify-center gap-[inherit]",
+			children
+		})
+	});
+}
+function DropdownMenuContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side: "bottom",
+		align: "start",
+		sideOffset: 6,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-control-ui": "dropdown-menu",
+			"data-slot": "content",
+			"data-surface": "floating",
+			"data-control-family": "popup",
+			"data-popup-part": "list-surface",
+			className: cn("min-w-[max(11rem,var(--anchor-width))]", className),
+			...props,
+			children
+		})
+	}) });
+}
+function DropdownMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-control-ui": "dropdown-menu",
+		"data-slot": "item",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		className: cn(popupItemStructureClasses, className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-control-ui": "dropdown-menu",
+		"data-slot": "separator",
+		"data-control-family": "popup",
+		"data-popup-part": "separator",
+		className: cn(className),
+		...props
+	});
+}
+function DropdownMenuLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "dropdown-menu",
+		"data-slot": "label",
+		"data-control-family": "popup",
+		"data-popup-part": "label",
+		className: cn(className),
+		...props
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, dropdownMenuTriggerVariants };

package/dist/ui/dropzone.d.ts

@@ -0,0 +1,66 @@
+import { Button } from "./button.js";
+import { DropzoneAccept, DropzoneErrorCode, DropzoneErrorCodeValue, DropzoneFileError, DropzoneFileRejection, DropzonePolicy, DropzoneSelectionMode, DropzoneValidator, DropzoneValidatorResult, formatDropzoneFileSize } from "../lib/dropzone-validation.js";
+import { DropzoneDropDetails, DropzoneEvent, DropzoneGetFilesFromEvent, DropzoneValueChangeDetails, DropzoneValueChangeReason, DropzoneVisualState, UseDropzoneOptions, UseDropzoneReturn, useDropzone } from "../hooks/use-dropzone.js";
+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"> & {
+  value?: readonly File[];
+  defaultValue?: readonly File[];
+  onValueChange?: (value: readonly File[], details: DropzoneValueChangeDetails) => void;
+  policy?: DropzonePolicy;
+  disabled?: boolean;
+  getFilesFromEvent?: DropzoneGetFilesFromEvent;
+  onDrop?: (details: DropzoneDropDetails) => void;
+  onError?: (error: Error) => void;
+} & {
+  style?: CSSProperties & DropzoneKnobStyle;
+};
+type DropzoneAreaProps = ComponentProps<"div"> & {
+  style?: CSSProperties & DropzoneKnobStyle;
+};
+type DropzoneInputProps = Omit<ComponentProps<"input">, "accept" | "disabled" | "multiple" | "onChange" | "onClick" | "type"> & {
+  style?: CSSProperties & DropzoneKnobStyle;
+};
+type DropzoneTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & DropzoneKnobStyle;
+};
+type DropzoneOverlayProps = Omit<ComponentProps<"div">, "style"> & {
+  scope?: DropzoneOverlayScope;
+  style?: CSSProperties & DropzoneKnobStyle;
+};
+type DropzoneFileListProps = Omit<ComponentProps<"ul">, "children"> & {
+  children?: (file: File, index: number) => ReactNode;
+} & {
+  style?: CSSProperties & DropzoneKnobStyle;
+};
+type DropzoneRejectionListProps = Omit<ComponentProps<"ul">, "children"> & {
+  children?: (rejection: DropzoneFileRejection, index: number) => ReactNode;
+} & {
+  style?: CSSProperties & DropzoneKnobStyle;
+};
+type DropzoneContextValue = UseDropzoneReturn & {
+  registerGlobalOverlay: () => () => void;
+};
+type DropzoneStatusProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+  children?: (state: DropzoneContextValue) => ReactNode;
+  style?: CSSProperties & DropzoneKnobStyle;
+};
+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;
+//#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 };

package/dist/ui/dropzone.js

@@ -0,0 +1,311 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { DropzoneErrorCode, formatDropzoneFileSize } from "../lib/dropzone-validation.js";
+import { useDropzone } from "../hooks/use-dropzone.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "./item.js";
+import { createContext, useContext, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleAlert, CloudUpload, FileIcon, LoaderCircle, Search, XIcon } from "lucide-react";
+//#region src/ui/dropzone.tsx
+const DropzoneContext = createContext(null);
+const fileRenderKeys = /* @__PURE__ */ new WeakMap();
+let nextFileRenderKey = 0;
+function getFileRenderKey(file) {
+	const existingKey = fileRenderKeys.get(file);
+	if (existingKey) return existingKey;
+	const key = `dropzone-file-${nextFileRenderKey}`;
+	nextFileRenderKey += 1;
+	fileRenderKeys.set(file, key);
+	return key;
+}
+function useDropzoneContext() {
+	const context = useContext(DropzoneContext);
+	if (!context) throw new Error("Dropzone parts must be used inside Dropzone.");
+	return context;
+}
+function Dropzone({ value, defaultValue, onValueChange, policy, disabled, getFilesFromEvent, onDrop, onError, className, children, ...props }) {
+	const [globalOverlayCount, setGlobalOverlayCount] = useState(0);
+	const [registerGlobalOverlay] = useState(() => () => {
+		let registered = true;
+		setGlobalOverlayCount((count) => count + 1);
+		return () => {
+			if (!registered) return;
+			registered = false;
+			setGlobalOverlayCount((count) => Math.max(0, count - 1));
+		};
+	});
+	const dropzone = useDropzone({
+		value,
+		defaultValue,
+		onValueChange,
+		policy,
+		disabled,
+		getFilesFromEvent,
+		onDrop,
+		onError,
+		trackDocumentDrag: globalOverlayCount > 0
+	});
+	const context = {
+		...dropzone,
+		registerGlobalOverlay
+	};
+	const empty = dropzone.value.length === 0 && dropzone.fileRejections.length === 0;
+	return /* @__PURE__ */ jsx(DropzoneContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-control-ui": "dropzone",
+			"data-control-family": "dropzone",
+			"data-slot": "root",
+			"data-disabled": dropzone.disabled ? "true" : void 0,
+			"data-empty": empty ? "true" : void 0,
+			className: cn("min-w-0", className),
+			children
+		})
+	});
+}
+function DropzoneArea({ className, ...props }) {
+	const context = useDropzoneContext();
+	const areaProps = context.getRootProps(props);
+	return /* @__PURE__ */ jsx("div", {
+		...areaProps,
+		"aria-busy": context.isProcessing ? "true" : "false",
+		"data-control-ui": "dropzone",
+		"data-control-family": "dropzone",
+		"data-slot": "area",
+		"data-state": context.visualState,
+		"data-disabled": context.disabled ? "true" : void 0,
+		className: cn("relative isolate min-w-0", className)
+	});
+}
+function DropzoneInput({ className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const inputProps = useDropzoneContext().getInputProps({
+		...props,
+		"aria-label": ariaLabelledBy ? ariaLabel : ariaLabel ?? "Choose files",
+		"aria-labelledby": ariaLabelledBy
+	});
+	return /* @__PURE__ */ jsx("input", {
+		...inputProps,
+		"data-control-ui": "dropzone",
+		"data-control-family": "dropzone",
+		"data-slot": "input",
+		className: cn("sr-only", className)
+	});
+}
+function DropzoneTrigger({ className, children, onClick, disabled, ...props }) {
+	const context = useDropzoneContext();
+	const triggerDisabled = disabled || context.disabled || context.isProcessing;
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		disabled: triggerDisabled,
+		"data-control-ui": "dropzone",
+		"data-control-family": "dropzone",
+		"data-slot": "trigger",
+		"data-state": context.visualState,
+		"data-disabled": triggerDisabled ? "true" : void 0,
+		className: cn("flex w-full cursor-pointer flex-col items-center justify-center disabled:cursor-not-allowed", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) context.open();
+		},
+		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, { state: context.visualState })
+	});
+}
+function DropzoneOverlay({ scope = "local", className, children, ...props }) {
+	const context = useDropzoneContext();
+	const active = scope === "global" ? context.isDragGlobal : context.isDragActive;
+	useEffect(() => {
+		if (scope !== "global") return;
+		return context.registerGlobalOverlay();
+	}, [context.registerGlobalOverlay, scope]);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"aria-hidden": "true",
+		"data-control-ui": "dropzone",
+		"data-control-family": "dropzone",
+		"data-slot": "overlay",
+		"data-state": context.visualState,
+		"data-active": active ? "true" : void 0,
+		"data-scope": scope,
+		className: cn("pointer-events-none absolute inset-0 z-10 hidden items-center justify-center data-[active=true]:flex", className),
+		children: children ?? /* @__PURE__ */ jsx(DropzoneFeedback, { state: context.visualState })
+	});
+}
+function DropzoneFileList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const context = useDropzoneContext();
+	const empty = context.value.length === 0;
+	return /* @__PURE__ */ jsx("ul", {
+		...props,
+		hidden: empty,
+		"aria-label": ariaLabelledBy ? ariaLabel : ariaLabel ?? "Selected files",
+		"aria-labelledby": ariaLabelledBy,
+		"data-control-ui": "dropzone",
+		"data-control-family": "dropzone",
+		"data-slot": "file-list",
+		"data-empty": empty ? "true" : void 0,
+		className: cn("flex flex-col", className),
+		children: context.value.map((file, index) => /* @__PURE__ */ jsx("li", {
+			"data-control-ui": "dropzone",
+			"data-control-family": "dropzone",
+			"data-slot": "file",
+			className: void 0,
+			children: children ? children(file, index) : /* @__PURE__ */ jsx(DefaultFile, { file })
+		}, getFileRenderKey(file)))
+	});
+}
+function DropzoneRejectionList({ className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+	const context = useDropzoneContext();
+	const empty = context.fileRejections.length === 0;
+	return /* @__PURE__ */ jsx("ul", {
+		...props,
+		hidden: empty,
+		"aria-label": ariaLabelledBy ? ariaLabel : ariaLabel ?? "Rejected files",
+		"aria-labelledby": ariaLabelledBy,
+		"data-control-ui": "dropzone",
+		"data-control-family": "dropzone",
+		"data-slot": "rejection-list",
+		"data-empty": empty ? "true" : void 0,
+		className: cn("flex flex-col", className),
+		children: context.fileRejections.map((rejection, index) => /* @__PURE__ */ jsx("li", {
+			"data-control-ui": "dropzone",
+			"data-control-family": "dropzone",
+			"data-slot": "rejection",
+			className: void 0,
+			children: children ? children(rejection, index) : /* @__PURE__ */ jsx(DefaultRejection, { rejection })
+		}, getFileRenderKey(rejection.file)))
+	});
+}
+function DropzoneStatus({ className, children, role = "status", "aria-live": ariaLive = "polite", ...props }) {
+	const context = useDropzoneContext();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role,
+		"aria-live": ariaLive,
+		"data-control-ui": "dropzone",
+		"data-control-family": "dropzone",
+		"data-slot": "status",
+		"data-state": context.visualState,
+		className,
+		children: children ? children(context) : getDropzoneStatusMessage(context)
+	});
+}
+function DropzoneRemove({ file, children, onClick, disabled, ...props }) {
+	const context = useDropzoneContext();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		type: "button",
+		variant: props.variant ?? "quiet",
+		size: props.size ?? "sm",
+		iconOnly: props.iconOnly ?? true,
+		"aria-label": props["aria-label"] ?? `Remove ${file.name}`,
+		disabled: disabled || context.disabled || context.isProcessing,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) context.removeFile(file);
+		},
+		children: children ?? /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+	});
+}
+function DropzoneClear({ children, onClick, disabled, ...props }) {
+	const context = useDropzoneContext();
+	const empty = context.value.length === 0 && context.fileRejections.length === 0;
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		type: "button",
+		variant: props.variant ?? "quiet",
+		size: props.size ?? "sm",
+		disabled: disabled || context.disabled || context.isProcessing || empty,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) context.reset();
+		},
+		children: children ?? "Clear all"
+	});
+}
+function DropzoneFeedback({ state }) {
+	let icon = /* @__PURE__ */ jsx(CloudUpload, { "aria-hidden": "true" });
+	let message = "Drop files here or choose files.";
+	if (state === "processing") {
+		icon = /* @__PURE__ */ jsx(LoaderCircle, {
+			"data-control-ui": "dropzone",
+			"data-control-family": "dropzone",
+			"data-slot": "feedback-spinner",
+			"aria-hidden": "true"
+		});
+		message = "Checking files…";
+	} else if (state === "accept") {
+		icon = /* @__PURE__ */ jsx(CloudUpload, { "aria-hidden": "true" });
+		message = "Release to add files.";
+	} else if (state === "reject") {
+		icon = /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" });
+		message = "Some files are not accepted.";
+	} else if (state === "unknown") {
+		icon = /* @__PURE__ */ jsx(Search, { "aria-hidden": "true" });
+		message = "Release to check files.";
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		"data-control-ui": "dropzone",
+		"data-control-family": "dropzone",
+		"data-slot": "feedback",
+		className: "flex flex-col items-center",
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-control-ui": "dropzone",
+			"data-control-family": "dropzone",
+			"data-slot": "feedback-icon",
+			className: "[&>svg]:size-6",
+			children: icon
+		}), /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "dropzone",
+			"data-control-family": "dropzone",
+			"data-slot": "feedback-message",
+			children: message
+		})]
+	});
+}
+function DefaultFile({ file }) {
+	return /* @__PURE__ */ jsxs(Item, {
+		variant: "muted",
+		children: [
+			/* @__PURE__ */ jsx(ItemMedia, { children: /* @__PURE__ */ jsx(FileIcon, { "aria-hidden": "true" }) }),
+			/* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, {
+				className: "wrap-anywhere",
+				children: file.name
+			}), /* @__PURE__ */ jsx(ItemDescription, { children: formatDropzoneFileSize(file.size) })] }),
+			/* @__PURE__ */ jsx(ItemActions, { children: /* @__PURE__ */ jsx(DropzoneRemove, { file }) })
+		]
+	});
+}
+function DefaultRejection({ rejection }) {
+	return /* @__PURE__ */ jsxs(Item, {
+		variant: "muted",
+		children: [/* @__PURE__ */ jsx(ItemMedia, {
+			"data-dropzone-invalid": "",
+			children: /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" })
+		}), /* @__PURE__ */ jsxs(ItemContent, { children: [/* @__PURE__ */ jsx(ItemTitle, {
+			className: "wrap-anywhere",
+			children: rejection.file.name
+		}), rejection.errors.map((error) => /* @__PURE__ */ jsx(ItemDescription, {
+			"data-dropzone-invalid": "",
+			children: error.message
+		}, `${error.code}-${error.message}`))] })]
+	});
+}
+function getDropzoneStatusMessage(context) {
+	if (context.isProcessing) return "Checking files…";
+	if (context.isDragActive && context.isDragReject) return "Some files are not accepted.";
+	if (context.isDragActive && context.isDragAccept) return "Release to add files.";
+	if (context.isDragActive && context.isDragUnknown) return "Release to check files.";
+	if (context.fileRejections.length > 0) {
+		const count = context.fileRejections.length;
+		return `${count} ${count === 1 ? "file" : "files"} could not be added.`;
+	}
+	if (context.value.length > 0) {
+		const count = context.value.length;
+		return `${count} ${count === 1 ? "file" : "files"} selected.`;
+	}
+	return "No files selected.";
+}
+//#endregion
+export { Dropzone, DropzoneArea, DropzoneClear, DropzoneErrorCode, DropzoneFileList, DropzoneInput, DropzoneOverlay, DropzoneRejectionList, DropzoneRemove, DropzoneStatus, DropzoneTrigger, formatDropzoneFileSize, useDropzone, useDropzoneContext };

package/dist/ui/empty.d.ts

@@ -0,0 +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"> & {
+  style?: CSSProperties & EmptyKnobStyle;
+};
+type EmptyMediaProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & EmptyKnobStyle;
+};
+type EmptyContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & EmptyKnobStyle;
+};
+type EmptyDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
+  style?: CSSProperties & EmptyKnobStyle;
+};
+type EmptyTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & EmptyKnobStyle;
+};
+declare function Empty({ className, ...props }: EmptyProps): import("react").JSX.Element;
+declare function EmptyHeader({ className, ...props }: ComponentProps<"div"> & {
+  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 };

package/dist/ui/empty.js

@@ -0,0 +1,59 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/empty.tsx
+function Empty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "empty",
+		"data-control-family": "empty",
+		"data-slot": "root",
+		className: cn("flex min-w-0 flex-1 flex-col items-center justify-center", className),
+		...props
+	});
+}
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "empty",
+		"data-control-family": "empty",
+		"data-slot": "header",
+		className: cn("flex max-w-sm flex-col items-center", className),
+		...props
+	});
+}
+function EmptyMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"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),
+		...props
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "empty",
+		"data-control-family": "empty",
+		"data-slot": "title",
+		className,
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-control-ui": "empty",
+		"data-control-family": "empty",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"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),
+		...props
+	});
+}
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/ui/field.d.ts

@@ -0,0 +1,64 @@
+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"> & {
+  orientation?: "vertical" | "horizontal" | "responsive";
+  name?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  validationMode?: "onSubmit" | "onBlur" | "onChange";
+} & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldLabelProps = Omit<ComponentProps<"label">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldContentProps = ComponentProps<"div"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldControlProps = Omit<ComponentProps<"input">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldErrorMatch = boolean | keyof ValidityState;
+type FieldErrorProps = Omit<ComponentProps<"div">, "style"> & {
+  match?: FieldErrorMatch;
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldGroupProps = ComponentProps<"div"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+  children?: ReactNode;
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldItemProps = ComponentProps<"div"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type FieldSetProps = Omit<ComponentProps<"fieldset">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+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;
+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 };