xiod-ui 1.0.0

package/dist/components/file-upload.js

@@ -0,0 +1,482 @@
+"use client";
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { AlertCircle } from "xiod-icons/icons/AlertCircle";
+import { CheckmarkCircle } from "xiod-icons/icons/CheckmarkCircle";
+import { Delete } from "xiod-icons/icons/Delete";
+import { File } from "xiod-icons/icons/File";
+import { FileArchive } from "xiod-icons/icons/FileArchive";
+import { FileAudio } from "xiod-icons/icons/FileAudio";
+import { FileCode } from "xiod-icons/icons/FileCode";
+import { FileEmpty } from "xiod-icons/icons/FileEmpty";
+import { FileImage } from "xiod-icons/icons/FileImage";
+import { FileVideo } from "xiod-icons/icons/FileVideo";
+//#region src/components/file-upload.tsx
+const FileUploadContext = React$1.createContext(null);
+function useFileUploadContext() {
+	const context = React$1.useContext(FileUploadContext);
+	if (!context) throw new Error("FileUpload subcomponents must be rendered within a <FileUpload> provider component.");
+	return context;
+}
+function isAccepted(file, acceptString) {
+	if (!acceptString) return true;
+	const acceptTypes = acceptString.split(",").map((t) => t.trim().toLowerCase());
+	const fileType = file.type.toLowerCase();
+	const fileName = file.name.toLowerCase();
+	return acceptTypes.some((type) => {
+		if (type.startsWith(".")) return fileName.endsWith(type);
+		if (type.endsWith("/*")) {
+			const baseType = type.slice(0, -2);
+			return fileType.startsWith(baseType);
+		}
+		return fileType === type;
+	});
+}
+function formatFileSize(bytes) {
+	if (bytes === 0) return "0 Bytes";
+	const k = 1024;
+	const sizes = [
+		"Bytes",
+		"KB",
+		"MB",
+		"GB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+}
+function FileUpload({ files: filesProp, onFilesChange, onFilesAdded, onFileRemove, maxFiles = 5, maxSizeMB = 10, accept, disabled = false, children, ...props }) {
+	const [internalFiles, setInternalFiles] = React$1.useState([]);
+	const [isDragging, setIsDragging] = React$1.useState(false);
+	const fileInputRef = React$1.useRef(null);
+	const files = filesProp ?? internalFiles;
+	const setFiles = React$1.useCallback((update) => {
+		if (filesProp === void 0) setInternalFiles(update);
+		if (onFilesChange) onFilesChange(typeof update === "function" ? update(files) : update);
+	}, [
+		filesProp,
+		onFilesChange,
+		files
+	]);
+	const removeFile = React$1.useCallback((id) => {
+		if (disabled) return;
+		const updatedFiles = files.filter((f) => f.id !== id);
+		setFiles(updatedFiles);
+		if (onFileRemove) onFileRemove(id);
+	}, [
+		files,
+		disabled,
+		onFileRemove,
+		setFiles
+	]);
+	const addFiles = React$1.useCallback((newFiles) => {
+		if (disabled) return;
+		const validatedItems = [];
+		const currentFileCount = files.length;
+		let addedCount = 0;
+		for (const file of newFiles) {
+			if (maxFiles && currentFileCount + addedCount >= maxFiles) break;
+			let errorMessage;
+			let status = "idle";
+			if (maxSizeMB && file.size > maxSizeMB * 1024 * 1024) {
+				errorMessage = `File exceeds max size of ${maxSizeMB}MB`;
+				status = "error";
+			} else if (accept && !isAccepted(file, accept)) {
+				errorMessage = "Invalid file type";
+				status = "error";
+			}
+			validatedItems.push({
+				id: Math.random().toString(36).substring(2, 9),
+				file,
+				progress: 0,
+				status,
+				errorMessage
+			});
+			addedCount++;
+		}
+		if (validatedItems.length > 0) {
+			const updatedFiles = [...files, ...validatedItems];
+			setFiles(updatedFiles);
+			if (onFilesAdded) onFilesAdded(validatedItems.map((item) => item.file));
+		}
+	}, [
+		files,
+		maxFiles,
+		maxSizeMB,
+		accept,
+		disabled,
+		onFilesAdded,
+		setFiles
+	]);
+	const contextValue = React$1.useMemo(() => ({
+		files,
+		isDragging,
+		setIsDragging,
+		maxFiles,
+		maxSizeMB,
+		accept,
+		disabled,
+		removeFile,
+		addFiles,
+		fileInputRef
+	}), [
+		files,
+		isDragging,
+		maxFiles,
+		maxSizeMB,
+		accept,
+		disabled,
+		removeFile,
+		addFiles
+	]);
+	return /* @__PURE__ */ jsx(FileUploadContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "contents",
+			"data-slot": "file-upload",
+			...props,
+			children
+		})
+	});
+}
+function FileUploadTrigger({ className, render, ...props }) {
+	const { fileInputRef, isDragging, setIsDragging, disabled, addFiles } = useFileUploadContext();
+	const handleDragOver = (e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setIsDragging(true);
+	};
+	const handleDragLeave = (e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setIsDragging(false);
+	};
+	const handleDrop = (e) => {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		setIsDragging(false);
+		if (e.dataTransfer.files && e.dataTransfer.files.length > 0) addFiles(Array.from(e.dataTransfer.files));
+	};
+	const handleClick = () => {
+		if (disabled) return;
+		fileInputRef.current?.click();
+	};
+	const handleKeyDown = (e) => {
+		if (disabled) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			fileInputRef.current?.click();
+		}
+	};
+	const defaultProps = {
+		role: "button",
+		tabIndex: disabled ? -1 : 0,
+		className: cn("relative flex flex-col items-center justify-center rounded-2xl border border-dashed border-input bg-muted/20 hover:bg-muted/40 p-[calc(--spacing(8)-1px)] text-center transition-[color,background-color,border-color,transform,box-shadow,opacity] duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 cursor-pointer select-none", "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", isDragging && "scale-[1.01] border-primary bg-primary/4 dark:bg-primary/8 border-solid", disabled && "cursor-not-allowed opacity-64", className),
+		"data-dragging": isDragging ? "true" : void 0,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "file-upload-trigger",
+		onDragOver: handleDragOver,
+		onDragLeave: handleDragLeave,
+		onDrop: handleDrop,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function FileUploadInput({ className, ...props }) {
+	const { fileInputRef, maxFiles, accept, disabled, addFiles } = useFileUploadContext();
+	const handleChange = (e) => {
+		if (e.target.files && e.target.files.length > 0) addFiles(Array.from(e.target.files));
+		e.target.value = "";
+	};
+	return /* @__PURE__ */ jsx("input", {
+		type: "file",
+		ref: fileInputRef,
+		className: cn("hidden", className),
+		multiple: maxFiles > 1,
+		accept,
+		disabled,
+		onChange: handleChange,
+		"data-slot": "file-upload-input",
+		...props
+	});
+}
+function FileUploadList({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("grid gap-3 w-full mt-4", className),
+		"data-slot": "file-upload-list"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+const FileItemContext = React$1.createContext(null);
+function useFileItemContext() {
+	const context = React$1.useContext(FileItemContext);
+	if (!context) throw new Error("FileUploadItem subcomponents must be rendered within a <FileUploadItem> parent component.");
+	return context;
+}
+function FileUploadItem({ className, render, fileItem, ...props }) {
+	const defaultProps = {
+		className: cn("group relative flex items-center gap-4 overflow-hidden rounded-xl border border-border/80 bg-background/50 p-[calc(--spacing(3)-1px)] shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] transition-[color,background-color,border-color,box-shadow,opacity]", fileItem.status === "uploading" && "pb-4.5", className),
+		"data-status": fileItem.status,
+		"data-slot": "file-upload-item"
+	};
+	return /* @__PURE__ */ jsx(FileItemContext.Provider, {
+		value: fileItem,
+		children: useRender({
+			defaultTagName: "div",
+			props: mergeProps(defaultProps, props),
+			render
+		})
+	});
+}
+function FileUploadItemIcon({ className, render, ...props }) {
+	const { file } = useFileItemContext();
+	const defaultProps = {
+		className: cn("flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", className),
+		"data-slot": "file-upload-item-icon"
+	};
+	const getIcon = () => {
+		const type = file.type.toLowerCase();
+		const name = file.name.toLowerCase();
+		if (type.startsWith("image/")) return /* @__PURE__ */ jsx(FileImage, { className: "size-5 text-primary" });
+		if (type.startsWith("video/")) return /* @__PURE__ */ jsx(FileVideo, { className: "size-5 text-primary" });
+		if (type.startsWith("audio/")) return /* @__PURE__ */ jsx(FileAudio, { className: "size-5 text-warning" });
+		if (type.includes("pdf") || name.endsWith(".pdf")) return /* @__PURE__ */ jsx(File, { className: "size-5 text-destructive" });
+		if (type.includes("zip") || type.includes("tar") || type.includes("gzip") || type.includes("rar") || name.endsWith(".zip") || name.endsWith(".rar") || name.endsWith(".gz")) return /* @__PURE__ */ jsx(FileArchive, { className: "size-5 text-success" });
+		if (type.includes("json") || type.includes("javascript") || type.includes("typescript") || type.includes("html") || type.includes("css") || name.endsWith(".json") || name.endsWith(".js") || name.endsWith(".ts") || name.endsWith(".tsx") || name.endsWith(".html") || name.endsWith(".css")) return /* @__PURE__ */ jsx(FileCode, { className: "size-5 text-info" });
+		return /* @__PURE__ */ jsx(FileEmpty, { className: "size-5 text-muted-foreground" });
+	};
+	const defaultContent = getIcon();
+	const mergedProps = mergeProps(defaultProps, props);
+	if (mergedProps.children === void 0) mergedProps.children = defaultContent;
+	return useRender({
+		defaultTagName: "div",
+		props: mergedProps,
+		render
+	});
+}
+function FileUploadItemName({ className, render, ...props }) {
+	const { file } = useFileItemContext();
+	const defaultProps = {
+		className: cn("truncate text-sm font-medium text-foreground pr-2", className),
+		"data-slot": "file-upload-item-name"
+	};
+	const mergedProps = mergeProps(defaultProps, props);
+	if (mergedProps.children === void 0) mergedProps.children = file.name;
+	return useRender({
+		defaultTagName: "p",
+		props: mergedProps,
+		render
+	});
+}
+function FileUploadItemSize({ className, render, ...props }) {
+	const { file } = useFileItemContext();
+	const defaultProps = {
+		className: cn("text-xs text-muted-foreground", className),
+		"data-slot": "file-upload-item-size"
+	};
+	const mergedProps = mergeProps(defaultProps, props);
+	if (mergedProps.children === void 0) mergedProps.children = formatFileSize(file.size);
+	return useRender({
+		defaultTagName: "span",
+		props: mergedProps,
+		render
+	});
+}
+function FileUploadItemProgress({ className, render, ...props }) {
+	const { progress, status } = useFileItemContext();
+	const defaultProps = {
+		className: cn("absolute bottom-0 left-0 h-1 w-full bg-muted/60", className),
+		"data-slot": "file-upload-item-progress"
+	};
+	const mergedProps = mergeProps(defaultProps, props);
+	if (mergedProps.children === void 0) mergedProps.children = /* @__PURE__ */ jsx("div", {
+		className: "h-full bg-primary transition-[width] duration-300 ease-in-out",
+		style: { width: `${progress}%` },
+		role: "progressbar",
+		"aria-valuenow": progress,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100
+	});
+	const renderResult = useRender({
+		defaultTagName: "div",
+		props: mergedProps,
+		render
+	});
+	if (status !== "uploading") return null;
+	return renderResult;
+}
+function FileUploadItemStatus({ className, render, ...props }) {
+	const { status, progress, errorMessage } = useFileItemContext();
+	const defaultProps = {
+		className: cn("flex items-center gap-1.5 shrink-0", className),
+		"data-slot": "file-upload-item-status"
+	};
+	const getStatusContent = () => {
+		if (status === "success") return /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1 rounded-full bg-success/10 px-2 py-0.5 text-xs font-medium text-success dark:bg-success/20",
+			children: [/* @__PURE__ */ jsx(CheckmarkCircle, { className: "size-3" }), " Done"]
+		});
+		if (status === "error") return /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-xs font-medium text-destructive dark:bg-destructive/20",
+			title: errorMessage,
+			children: [/* @__PURE__ */ jsx(AlertCircle, { className: "size-3" }), " Failed"]
+		});
+		if (status === "uploading") return /* @__PURE__ */ jsxs("span", {
+			className: "text-xs font-medium text-muted-foreground",
+			children: [Math.round(progress), "%"]
+		});
+		return null;
+	};
+	const defaultContent = getStatusContent();
+	const mergedProps = mergeProps(defaultProps, props);
+	if (mergedProps.children === void 0) mergedProps.children = defaultContent;
+	const renderResult = useRender({
+		defaultTagName: "div",
+		props: mergedProps,
+		render
+	});
+	if (!defaultContent) return null;
+	return renderResult;
+}
+function FileUploadItemRemove({ className, render, ...props }) {
+	const { id } = useFileItemContext();
+	const { removeFile, disabled } = useFileUploadContext();
+	const defaultProps = {
+		type: "button",
+		disabled,
+		onClick: (e) => {
+			e.stopPropagation();
+			removeFile(id);
+		},
+		className: cn("relative flex items-center justify-center rounded-lg text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 size-8 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+		"data-slot": "file-upload-item-remove"
+	};
+	const mergedProps = mergeProps(defaultProps, props);
+	if (mergedProps.children === void 0) mergedProps.children = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Delete, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: "Remove file"
+	})] });
+	return useRender({
+		defaultTagName: "button",
+		props: mergedProps,
+		render
+	});
+}
+const attachmentVariants = cva("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-2xl border bg-card text-card-foreground focus-within:ring-1 focus-within:ring-ring/30 not-dark:bg-clip-padding transition-[color,background-color,border-color,box-shadow,opacity] duration-200 outline-none", {
+	variants: {
+		size: {
+			default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+			sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+			xs: "gap-1.5 rounded-xl text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+		},
+		orientation: {
+			horizontal: "min-w-40 items-center",
+			vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		orientation: "horizontal"
+	}
+});
+function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment",
+		"data-state": state,
+		"data-size": size,
+		"data-orientation": orientation,
+		className: cn(attachmentVariants({
+			size,
+			orientation
+		}), state === "error" ? "border-destructive/30 bg-destructive/4" : "border-border/80 bg-background/50", state === "idle" && "border-dashed", "before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] group-data-[size=xs]/attachment:before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		...props
+	});
+}
+const attachmentMediaVariants = cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+	variants: { variant: {
+		icon: "",
+		image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+	} },
+	defaultVariants: { variant: "icon" }
+});
+function AttachmentMedia({ className, variant = "icon", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-media",
+		"data-variant": variant,
+		className: cn(attachmentMediaVariants({ variant }), className),
+		...props
+	});
+}
+function AttachmentContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-content",
+		className: cn("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className),
+		...props
+	});
+}
+function AttachmentTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-title",
+		className: cn("block max-w-full min-w-0 truncate font-medium text-foreground group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse", className),
+		...props
+	});
+}
+function AttachmentDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-description",
+		className: cn("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80 max-w-full", className),
+		...props
+	});
+}
+function AttachmentActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-actions",
+		className: cn("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", className),
+		...props
+	});
+}
+function AttachmentAction({ className, variant, size = "icon-xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "attachment-action",
+		variant: variant ?? "ghost",
+		size,
+		className: cn("pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+		...props
+	});
+}
+function AttachmentTrigger({ className, render, type, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			type: render ? type : type ?? "button",
+			className: cn("absolute inset-0 z-10 outline-none cursor-pointer", className)
+		}, props),
+		render,
+		state: { slot: "attachment-trigger" }
+	});
+}
+function AttachmentGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-group",
+		className: cn("flex min-w-0 snap-x snap-mandatory scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className),
+		...props
+	});
+}
+//#endregion
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, FileUpload, FileUploadInput, FileUploadItem, FileUploadItemIcon, FileUploadItemName, FileUploadItemProgress, FileUploadItemRemove, FileUploadItemSize, FileUploadItemStatus, FileUploadList, FileUploadTrigger, attachmentMediaVariants, attachmentVariants, formatFileSize };

package/dist/components/form.d.ts

@@ -0,0 +1,6 @@
+import * as React$1 from "react";
+import { Form as Form$1 } from "@base-ui/react/form";
+//#region src/components/form.d.ts
+declare function Form({ className, ...props }: Form$1.Props): React$1.JSX.Element;
+//#endregion
+export { Form };

package/dist/components/form.js

@@ -0,0 +1,14 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Form as Form$1 } from "@base-ui/react/form";
+//#region src/components/form.tsx
+function Form({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Form$1, {
+		className: cn("flex w-full flex-col gap-4", className),
+		"data-slot": "form",
+		...props
+	});
+}
+//#endregion
+export { Form };

package/dist/components/frame.d.ts

@@ -0,0 +1,10 @@
+import * as React$1 from "react";
+//#region src/components/frame.d.ts
+declare function Frame({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function FramePanel({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function FrameHeader({ className, ...props }: React$1.ComponentProps<"header">): React$1.JSX.Element;
+declare function FrameTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function FrameDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function FrameFooter({ className, ...props }: React$1.ComponentProps<"footer">): React$1.JSX.Element;
+//#endregion
+export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle };

package/dist/components/frame.js

@@ -0,0 +1,47 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/frame.tsx
+function Frame({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative flex flex-col rounded-2xl bg-muted/72 p-1", "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1", className),
+		"data-slot": "frame",
+		...props
+	});
+}
+function FramePanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative rounded-xl border bg-background bg-clip-padding p-[calc(--spacing(5)-1px)] shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "frame-panel",
+		...props
+	});
+}
+function FrameHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		className: cn("flex flex-col px-5 py-4", className),
+		"data-slot": "frame-panel-header",
+		...props
+	});
+}
+function FrameTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("font-semibold text-sm", className),
+		"data-slot": "frame-panel-title",
+		...props
+	});
+}
+function FrameDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "frame-panel-description",
+		...props
+	});
+}
+function FrameFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("footer", {
+		className: cn("px-5 py-4", className),
+		"data-slot": "frame-panel-footer",
+		...props
+	});
+}
+//#endregion
+export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle };

package/dist/components/gauge.d.ts

@@ -0,0 +1,27 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/gauge.d.ts
+export interface GaugeProps extends useRender.ComponentProps<"div"> {
+  /**
+   * The progress value (0 to max).
+   */
+  value?: number;
+  /**
+   * The maximum progress value. Defaults to 100.
+   */
+  max?: number;
+  /**
+   * The size of the gauge (diameter) in pixels. Defaults to 120.
+   */
+  size?: number;
+  /**
+   * The stroke width of the SVG circle. Defaults to 12.
+   */
+  strokeWidth?: number;
+  /**
+   * Whether to display the value text in the center. Defaults to true.
+   */
+  showValue?: boolean;
+}
+export declare function Gauge({ render, value, max, size, strokeWidth, showValue, className, children, ...props }: GaugeProps): React$1.ReactElement;
+//#endregion

package/dist/components/gauge.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn } from "cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/gauge.tsx
+function Gauge({ render, value = 0, max = 100, size = 120, strokeWidth = 12, showValue = true, className, children, ...props }) {
+	const safeMax = Number.isFinite(max) && max > 0 ? max : 100;
+	const safeValue = Math.min(Math.max(Number.isFinite(value) ? value : 0, 0), safeMax);
+	const safeSize = Number.isFinite(size) && size > 0 ? size : 120;
+	const safeStrokeWidth = Number.isFinite(strokeWidth) && strokeWidth > 0 ? Math.min(strokeWidth, safeSize) : Math.min(12, safeSize);
+	const percentage = safeValue / safeMax * 100;
+	const center = safeSize / 2;
+	const radius = Math.max(0, center - safeStrokeWidth / 2);
+	const circumference = 2 * Math.PI * radius;
+	const semiCircumference = circumference / 2;
+	const trackDashoffset = semiCircumference;
+	const indicatorDashoffset = circumference - semiCircumference * (percentage / 100);
+	const defaultProps = {
+		className: cn("relative inline-flex flex-col items-center justify-end shrink-0", className),
+		role: "meter",
+		"aria-valuemin": 0,
+		"aria-valuemax": safeMax,
+		"aria-valuenow": safeValue,
+		"data-state": percentage === 100 ? "complete" : "loading",
+		"data-slot": "gauge",
+		style: {
+			width: safeSize,
+			height: safeSize / 2 + safeStrokeWidth / 2
+		},
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("svg", {
+			className: "absolute top-0 left-0 overflow-visible pointer-events-none",
+			style: {
+				width: safeSize,
+				height: safeSize
+			},
+			viewBox: `0 0 ${safeSize} ${safeSize}`,
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "stroke-muted fill-transparent",
+				cx: center,
+				cy: center,
+				r: radius,
+				strokeWidth: safeStrokeWidth,
+				strokeDasharray: circumference,
+				strokeDashoffset: trackDashoffset,
+				strokeLinecap: "round",
+				transform: `rotate(180 ${center} ${center})`
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "stroke-primary fill-transparent transition-[stroke-dashoffset] duration-500 ease-in-out",
+				cx: center,
+				cy: center,
+				r: radius,
+				strokeWidth: safeStrokeWidth,
+				strokeDasharray: circumference,
+				strokeDashoffset: indicatorDashoffset,
+				strokeLinecap: "round",
+				transform: `rotate(180 ${center} ${center})`
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col items-center justify-end z-10 w-full h-full pb-1",
+			children: children ? children : showValue ? /* @__PURE__ */ jsx("span", {
+				className: "text-2xl font-bold tracking-tighter text-foreground leading-none",
+				children: safeValue
+			}) : null
+		})] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { Gauge };