@k8o/arte-odyssey 6.0.1 → 7.0.0

package/dist/components/buttons/button/button.d.mts

@@ -9,6 +9,7 @@ declare const Button: FC<{
   fullWidth?: boolean;
   startIcon?: ReactNode;
   endIcon?: ReactNode;
+  onAction?: () => void | Promise<void>;
 } & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>>;
 //#endregion
 export { Button };

package/dist/components/buttons/button/button.mjs

@@ -1,29 +1,49 @@
+"use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { jsxs } from "react/jsx-runtime";
+import { Spinner } from "../../feedback/spinner/spinner.mjs";
+import { useTransition } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/button/button.tsx
-const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "contained", disabled = false, fullWidth = false, onClick, startIcon, endIcon, ...rest }) => {
+const Button = ({ ref, children, type = "button", size = "md", color = "primary", variant = "contained", disabled = false, fullWidth = false, onAction, onClick, startIcon, endIcon, ...rest }) => {
+	const [transitionPending, startTransition] = useTransition();
+	const { pending: formPending } = useFormStatus();
+	const isPending = transitionPending || type === "submit" && formPending;
+	const isDisabled = disabled || isPending;
+	const handleClick = onClick || onAction ? (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (onAction) startTransition(async () => {
+			await onAction();
+		});
+	} : void 0;
+	const resolvedStartIcon = isPending ? /* @__PURE__ */ jsx(Spinner, {
+		label: "Loading",
+		size: size === "lg" ? "md" : "sm"
+	}) : startIcon;
 	return /* @__PURE__ */ jsxs("button", {
+		"aria-busy": isPending || void 0,
 		className: cn("cursor-pointer rounded-full border-2 text-center font-bold transition-colors", {
 			"border-transparent bg-primary-bg text-fg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize": variant === "contained" && color === "primary",
 			"border-transparent bg-secondary-bg text-fg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize": variant === "contained" && color === "secondary",
 			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute/80 active:bg-bg-mute": variant === "contained" && color === "gray",
-			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": disabled && variant === "contained" && color === "primary",
-			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": disabled && variant === "contained" && color === "secondary",
-			"cursor-not-allowed opacity-35 hover:bg-bg-subtle active:bg-bg-subtle": disabled && variant === "contained" && color === "gray",
+			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": isDisabled && variant === "contained" && color === "primary",
+			"cursor-not-allowed opacity-35 hover:bg-secondary-bg active:bg-secondary-bg": isDisabled && variant === "contained" && color === "secondary",
+			"cursor-not-allowed opacity-35 hover:bg-bg-subtle active:bg-bg-subtle": isDisabled && variant === "contained" && color === "gray",
 			"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "primary",
 			"border-secondary-border bg-bg-base text-secondary-fg hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "secondary",
 			"border-border-base bg-bg-base text-fg-base hover:bg-bg-subtle active:bg-bg-mute": variant === "outlined" && color === "gray",
-			"cursor-not-allowed bg-bg-base opacity-35 hover:bg-bg-base active:bg-bg-base": disabled && variant === "outlined",
+			"cursor-not-allowed bg-bg-base opacity-35 hover:bg-bg-base active:bg-bg-base": isDisabled && variant === "outlined",
 			"border-transparent bg-transparent text-fg-mute hover:bg-bg-subtle hover:text-fg-base active:bg-bg-mute active:text-fg-base": variant === "skeleton",
-			"cursor-not-allowed bg-transparent text-fg-mute opacity-35 hover:bg-transparent hover:text-fg-mute active:bg-transparent active:text-fg-mute": disabled && variant === "skeleton"
-		}, "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", fullWidth && "w-full", Boolean(startIcon ?? endIcon) && "flex items-center gap-2", startIcon && endIcon ? "justify-between" : startIcon && variant !== "skeleton" ? "justify-center" : endIcon && "justify-between"),
-		disabled,
-		onClick,
+			"cursor-not-allowed bg-transparent text-fg-mute opacity-35 hover:bg-transparent hover:text-fg-mute active:bg-transparent active:text-fg-mute": isDisabled && variant === "skeleton"
+		}, "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", size === "sm" && "px-3 py-1 text-sm", size === "md" && "px-4 py-2 text-md", size === "lg" && "px-6 py-3 text-lg", fullWidth && "w-full", Boolean(resolvedStartIcon ?? endIcon) && "flex items-center gap-2", resolvedStartIcon && endIcon ? "justify-between" : resolvedStartIcon && variant !== "skeleton" ? "justify-center" : endIcon && "justify-between"),
+		disabled: isDisabled,
+		onClick: handleClick,
 		ref,
 		type,
 		...rest,
 		children: [
-			startIcon,
+			resolvedStartIcon,
 			children,
 			endIcon
 		]

package/dist/components/buttons/icon-button/icon-button.d.mts

@@ -5,6 +5,7 @@ type Props = {
   size?: 'sm' | 'md' | 'lg';
   bg?: 'transparent' | 'base' | 'primary' | 'secondary';
   label: string;
+  onAction?: () => void | Promise<void>;
 } & Omit<HTMLProps<HTMLButtonElement>, 'size' | 'type'>;
 declare const IconButton: FC<Props>;
 //#endregion

package/dist/components/buttons/icon-button/icon-button.mjs

@@ -1,10 +1,27 @@
+"use client";
 import { cn } from "../../../helpers/cn.mjs";
+import { useTransition } from "react";
+import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/buttons/icon-button/icon-button.tsx
-const IconButton = ({ ref, size = "md", bg = "transparent", label, children, ...props }) => {
+const IconButton = ({ ref, size = "md", bg = "transparent", label, children, onAction, onClick, disabled, ...props }) => {
+	const [transitionPending, startTransition] = useTransition();
+	const { pending: formPending } = useFormStatus();
+	const isPending = transitionPending || formPending;
+	const isDisabled = Boolean(disabled) || isPending;
+	const handleClick = onClick || onAction ? (event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (onAction) startTransition(async () => {
+			await onAction();
+		});
+	} : void 0;
 	return /* @__PURE__ */ jsxs("button", {
+		"aria-busy": isPending || void 0,
 		"aria-label": props.role ? label : void 0,
-		className: cn("inline-flex cursor-pointer rounded-full transition-colors", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", (bg === "transparent" || bg === "base") && "hover:bg-bg-subtle active:bg-bg-mute", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", bg === "secondary" && "bg-secondary-bg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3", props.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent"),
+		className: cn("inline-flex cursor-pointer rounded-full transition-colors", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", (bg === "transparent" || bg === "base") && "hover:bg-bg-subtle active:bg-bg-mute", bg === "base" && "bg-bg-base", bg === "transparent" && "bg-transparent", bg === "primary" && "bg-primary-bg hover:bg-primary-bg-emphasize/80 active:bg-primary-bg-emphasize", bg === "secondary" && "bg-secondary-bg hover:bg-secondary-bg-emphasize/80 active:bg-secondary-bg-emphasize", size === "sm" && "p-1", size === "md" && "p-2", size === "lg" && "p-3", isDisabled && "cursor-not-allowed opacity-50 hover:bg-transparent active:bg-transparent"),
+		disabled: isDisabled,
+		onClick: handleClick,
 		ref,
 		...props,
 		children: [!props.role && /* @__PURE__ */ jsx("span", {

package/dist/components/data-display/accordion/accordion-item.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { AccordionItemProvider } from "./context.mjs";
-import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/accordion-item.tsx
 const AccordionItem = ({ children, defaultOpen = false }) => {
 	return /* @__PURE__ */ jsx(AccordionItemProvider, {

package/dist/components/data-display/accordion/context.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
-import { jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/accordion/context.tsx
 const OpenContext = createContext(false);
 const ToggleOpenContext = createContext(void 0);

package/dist/components/data-display/avatar/avatar.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/avatar/avatar.tsx
 const getInitials = (name) => {
 	if (!name) return "?";

package/dist/components/data-display/baseline-status/baseline-status.mjs

@@ -1,25 +1,23 @@
 "use client";
+import { Suspense, use } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useSyncExternalStore } from "react";
 //#region src/components/data-display/baseline-status/baseline-status.tsx
-let didInit = false;
-const BaselineStatus = ({ featureId }) => {
-	if (!useSyncExternalStore((onStoreChange) => {
-		if (!didInit) {
-			didInit = true;
-			import("baseline-status").then(() => {
-				onStoreChange();
-			});
-		}
-		return () => {};
-	}, () => didInit, () => false)) return /* @__PURE__ */ jsx("div", {
-		className: "max-w-full animate-pulse rounded-lg border border-border-base bg-bg-base p-4",
-		style: { height: "120px" }
-	});
+let loadPromise = null;
+const loadBaselineStatus = () => {
+	loadPromise ??= import("baseline-status");
+	return loadPromise;
+};
+const BaselineStatusResolved = ({ featureId }) => {
+	use(loadBaselineStatus());
 	return /* @__PURE__ */ jsx("baseline-status", {
 		className: "wrap-normal max-w-full rounded-lg border border-border-base bg-bg-base p-4",
 		featureId
 	});
 };
+const BaselineStatusSkeleton = () => /* @__PURE__ */ jsx("div", { className: "h-58 max-w-full animate-pulse rounded-lg border border-border-base bg-bg-base p-4 sm:h-40 md:h-30" });
+const BaselineStatus = ({ featureId }) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: /* @__PURE__ */ jsx(BaselineStatusSkeleton, {}),
+	children: /* @__PURE__ */ jsx(BaselineStatusResolved, { featureId })
+});
 //#endregion
 export { BaselineStatus };

package/dist/components/data-display/code/code.mjs

@@ -1,6 +1,6 @@
 import { findAllColors } from "../../../helpers/color/find-all-colors.mjs";
+import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1 } from "react";
 //#region src/components/data-display/code/code.tsx
 const Code = ({ children }) => {
 	const colors = findAllColors(children);
@@ -12,7 +12,7 @@ const Code = ({ children }) => {
 	let lastIndex = 0;
 	colors.forEach((colorInfo, index) => {
 		if (colorInfo.start > lastIndex) parts.push(children.slice(lastIndex, colorInfo.start));
-		parts.push(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		parts.push(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 			"aria-label": `Color: ${colorInfo.color}`,
 			className: "inline-block h-3 w-3 shrink-0 rounded-sm border border-border-base",
 			role: "img",

package/dist/components/feedback/toast/provider.mjs

@@ -2,23 +2,26 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { uuidV4 } from "../../../helpers/uuid-v4.mjs";
 import { Toast } from "./toast.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence } from "motion/react";
 import * as motion$1 from "motion/react-client";
-import { createPortal } from "react-dom";
 //#region src/components/feedback/toast/provider.tsx
+const MAX_TOAST_COUNT = 5;
 const SetToastContext = createContext(void 0);
 const useToast = () => {
 	const setToasts = use(SetToastContext);
 	if (!setToasts) throw new Error("useToast must be used within a ToastProvider");
 	return {
 		onOpen: useCallback((status, message) => {
-			setToasts((prev) => [...prev, {
-				id: uuidV4(),
-				status,
-				message
-			}]);
+			setToasts((prev) => {
+				return [...prev, {
+					id: uuidV4(),
+					status,
+					message
+				}].slice(-MAX_TOAST_COUNT);
+			});
 		}, [setToasts]),
 		onClose: useCallback((id) => {
 			setToasts((prev) => prev.filter((toast) => toast.id !== id));

package/dist/components/feedback/toast/toast.mjs

@@ -2,8 +2,8 @@
 import { Alert } from "../alert/alert.mjs";
 import { useTimeout } from "../../../hooks/timeout/index.mjs";
 import { useToast } from "./provider.mjs";
-import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/toast/toast.tsx
 const DELAY_MS = 5e3;
 const Toast = ({ id, status, message }) => {

package/dist/components/form/autocomplete/autocomplete.mjs

@@ -3,8 +3,10 @@ import { cn } from "../../../helpers/cn.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useDeferredDebounce } from "../../../hooks/deferred-debounce/index.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/autocomplete/autocomplete.tsx
 const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
 	const [currentValue, handleChange] = useControllableState({
@@ -16,7 +18,10 @@ const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequir
 	const [open, setOpen] = useState(false);
 	const [text, setText] = useState("");
 	const [selectIndex, setSelectIndex] = useState();
-	const filteredOptions = options.filter((option) => option.label.includes(text));
+	const [deferredText, isPending] = useDeferredDebounce(text);
+	const filteredOptions = options.filter((option) => option.label.includes(deferredText));
+	const { pending: formPending } = useFormStatus();
+	const isDisabledResolved = isDisabled || formPending;
 	const reset = useCallback(() => {
 		setText("");
 		setOpen(false);
@@ -70,7 +75,7 @@ const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequir
 						"aria-required": isRequired,
 						autoComplete: "off",
 						className: cn("grow bg-transparent focus-visible:outline-hidden", "disabled:cursor-not-allowed"),
-						disabled: isDisabled,
+						disabled: isDisabledResolved,
 						id,
 						onBlur: (e) => {
 							if (e.relatedTarget?.id.startsWith(`${id}_option_`)) return;
@@ -112,6 +117,10 @@ const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequir
 								return;
 							}
 							if (e.key === "Enter" && selectIndex !== void 0 && selectIndex >= 0) {
+								if (isPending) {
+									e.preventDefault();
+									return;
+								}
 								const selected = filteredOptions[selectIndex];
 								if (!selected) return;
 								if (currentValue.includes(selected.value)) {
@@ -145,7 +154,8 @@ const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequir
 					className: "absolute top-1 z-10 w-full rounded-xl bg-bg-raised shadow-md",
 					role: "presentation",
 					children: /* @__PURE__ */ jsxs("ul", {
-						className: "max-h-96 py-2",
+						"aria-busy": isPending || void 0,
+						className: cn("max-h-96 py-2 transition-opacity", isPending && "opacity-60"),
 						id: `${id}_listbox`,
 						children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", {
 							className: "px-3 py-2 text-fg-mute",

package/dist/components/form/checkbox/checkbox.mjs

@@ -2,16 +2,18 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { CheckIcon } from "../../icons/lucide.mjs";
 import { useCheckboxGroupContext } from "../checkbox-group/checkbox-group.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/checkbox/checkbox.tsx
 const Checkbox = ({ name, itemValue, isDisabled = false, label, value, defaultChecked, onChange }) => {
 	const groupContext = useCheckboxGroupContext();
+	const { pending } = useFormStatus();
 	const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
 	const groupItemValue = itemValue ?? "";
 	if (groupContext && !itemValue) throw new Error("Checkbox inside CheckboxGroup requires itemValue");
 	const isControlled = value !== void 0;
-	const isDisabledResolved = isDisabled || groupContext?.isDisabled;
+	const isDisabledResolved = isDisabled || groupContext?.isDisabled || pending;
 	const checked = groupContext ? groupContext.currentValue.includes(groupItemValue) : isControlled ? value : internalChecked;
 	const setChecked = (nextChecked) => {
 		if (!isControlled) setInternalChecked(nextChecked);

package/dist/components/form/checkbox-card/checkbox-card.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { CheckIcon } from "../../icons/lucide.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/checkbox-card/checkbox-card.tsx
 const CheckboxCard = ({ labelId, name, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
 	const groupId = useId();

package/dist/components/form/checkbox-group/checkbox-group.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
-import { jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/form/checkbox-group/checkbox-group.tsx
 const CheckboxGroupContext = createContext(void 0);
 const useCheckboxGroupContext = () => use(CheckboxGroupContext);

package/dist/components/form/file-field/file-field.d.mts

@@ -1,5 +1,5 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ChangeEventHandler, FC, PropsWithChildren, ReactElement } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/form/file-field/file-field.d.ts
 declare const FileField: {

package/dist/components/form/file-field/file-field.mjs

@@ -2,8 +2,9 @@
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
 import { uuidV4 } from "../../../helpers/uuid-v4.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useId, useMemo, useRef, useState } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/file-field/file-field.tsx
 const FileFieldContext = createContext(null);
 const FileFieldProvider = FileFieldContext;
@@ -15,6 +16,8 @@ const useFileFieldContext = () => {
 const Root = ({ children, id, name, describedbyId, isDisabled = false, isInvalid = false, isRequired = false, accept, multiple = false, maxFiles, onChange, webkitDirectory = false }) => {
 	const generatedId = useId();
 	const inputRef = useRef(null);
+	const { pending } = useFormStatus();
+	const isDisabledResolved = isDisabled || pending;
 	const [acceptedFiles, setAcceptedFiles] = useState([]);
 	const onFilesChange = useCallback((event) => {
 		onChange?.(event);
@@ -50,13 +53,13 @@ const Root = ({ children, id, name, describedbyId, isDisabled = false, isInvalid
 	}, []);
 	return /* @__PURE__ */ jsx(FileFieldProvider, {
 		value: useMemo(() => ({
-			isDisabled,
+			isDisabled: isDisabledResolved,
 			isInvalid,
 			acceptedFiles,
 			onFileDelete,
 			openFilePicker
 		}), [
-			isDisabled,
+			isDisabledResolved,
 			isInvalid,
 			acceptedFiles,
 			onFileDelete,
@@ -69,7 +72,7 @@ const Root = ({ children, id, name, describedbyId, isDisabled = false, isInvalid
 				"aria-describedby": describedbyId,
 				"aria-invalid": isInvalid,
 				className: "sr-only",
-				disabled: isDisabled,
+				disabled: isDisabledResolved,
 				id: id ?? generatedId,
 				multiple,
 				name,

package/dist/components/form/form/form.d.mts

@@ -0,0 +1,10 @@
+import { FC, FormHTMLAttributes, ReactNode } from "react";
+
+//#region src/components/form/form/form.d.ts
+type Props = {
+  action?: ((formData: FormData) => void | Promise<void>) | string;
+  children: ReactNode;
+} & Omit<FormHTMLAttributes<HTMLFormElement>, 'action' | 'children'>;
+declare const Form: FC<Props>;
+//#endregion
+export { Form };

package/dist/components/form/form/form.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/form/form/form.tsx
+const Form = ({ action, className, children, ...rest }) => {
+	return /* @__PURE__ */ jsx("form", {
+		action,
+		className: cn("flex flex-col gap-6", className),
+		...rest,
+		children
+	});
+};
+//#endregion
+export { Form };

package/dist/components/form/form/index.d.mts

@@ -0,0 +1,2 @@
+import { Form } from "./form.mjs";
+export { Form };

package/dist/components/form/form/index.mjs

@@ -0,0 +1,2 @@
+import { Form } from "./form.mjs";
+export { Form };

package/dist/components/form/form-control/form-control.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/form-control/form-control.tsx
 const FormControl = ({ isDisabled = false, isInvalid = false, isRequired = false, label, labelAs = "label", helpText, errorText, renderInput }) => {
 	const id = useId();

package/dist/components/form/number-field/number-field.mjs

@@ -4,8 +4,9 @@ import { ChevronIcon } from "../../icons/lucide.mjs";
 import { between } from "../../../helpers/number/between.mjs";
 import { toPrecision } from "../../../helpers/number/to-precision.mjs";
 import { cast } from "../../../helpers/number/cast.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/number-field/number-field.tsx
 const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, value, defaultValue, onChange, step = 1, precision = 0, max = 9007199254740991, min = -9007199254740991, placeholder }) => {
 	const isControlled = value !== void 0;
@@ -13,6 +14,7 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 	const [internalValue, setInternalValue] = useState(initialValue);
 	const [displayValue, setDisplayValue] = useState(initialValue.toFixed(precision));
 	const [prevValue, setPrevValue] = useState(initialValue);
+	const { pending } = useFormStatus();
 	const currentValue = isControlled ? value : internalValue;
 	if (isControlled && value !== prevValue) {
 		setDisplayValue(value.toFixed(precision));
@@ -33,11 +35,12 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 			"aria-valuenow": currentValue,
 			autoComplete: "off",
 			autoCorrect: "off",
-			className: cn("h-full w-full grow bg-transparent pr-8 pl-3 focus-visible:outline-hidden", "disabled:cursor-not-allowed"),
+			className: cn("h-full w-full grow bg-transparent pr-8 pl-3 focus-visible:outline-hidden", "disabled:cursor-not-allowed", "read-only:cursor-not-allowed"),
 			disabled: isDisabled,
 			id,
 			inputMode: "decimal",
 			name,
+			readOnly: pending || void 0,
 			onBlur: () => {
 				const newValue = between(cast(displayValue, precision), min, max);
 				handleChange(newValue);
@@ -69,7 +72,7 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 			className: "absolute right-1 flex h-full flex-col py-1",
 			children: [/* @__PURE__ */ jsxs("button", {
 				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute disabled:hover:bg-transparent"),
-				disabled: isDisabled,
+				disabled: isDisabled || pending,
 				onClick: () => {
 					const newValue = between(toPrecision(cast(displayValue, precision) + step, precision), min, max);
 					handleChange(newValue);
@@ -86,7 +89,7 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 				})]
 			}), /* @__PURE__ */ jsxs("button", {
 				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute disabled:hover:bg-transparent"),
-				disabled: isDisabled,
+				disabled: isDisabled || pending,
 				onClick: () => {
 					const newValue = between(toPrecision(cast(displayValue, precision) - step, precision), min, max);
 					handleChange(newValue);

package/dist/components/form/password-input/password-input.mjs

@@ -2,10 +2,12 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { ViewIcon, ViewOffIcon } from "../../icons/lucide.mjs";
 import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
+import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/password-input/password-input.tsx
 const PasswordInput = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, placeholder, autoComplete = "current-password", showLabel = "Show password", hideLabel = "Hide password", defaultValue, value, onChange }) => {
 	const { isOpen: isVisible, toggle: toggleVisible } = useDisclosure();
+	const { pending } = useFormStatus();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative w-full",
 		children: [/* @__PURE__ */ jsx("input", {
@@ -13,20 +15,21 @@ const PasswordInput = ({ id, name, describedbyId, isInvalid, isDisabled, isRequi
 			"aria-invalid": isInvalid,
 			"aria-required": isRequired,
 			autoComplete,
-			className: cn("w-full rounded-xl border border-border-base bg-bg-base px-3 py-2 pr-12", "aria-invalid:border-border-error", "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute disabled:hover:bg-bg-mute", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"),
+			className: cn("w-full rounded-xl border border-border-base bg-bg-base px-3 py-2 pr-12", "aria-invalid:border-border-error", "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute disabled:hover:bg-bg-mute", "read-only:cursor-not-allowed read-only:bg-bg-subtle", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"),
 			defaultValue,
 			disabled: isDisabled,
 			id,
 			name,
 			onChange,
 			placeholder,
+			readOnly: pending || void 0,
 			required: isRequired,
 			type: isVisible ? "text" : "password",
 			value
 		}), /* @__PURE__ */ jsx("button", {
 			"aria-label": isVisible ? hideLabel : showLabel,
-			className: cn("absolute top-1/2 right-2 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-fg-mute transition-colors", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", !isDisabled && "hover:bg-bg-mute hover:text-fg-base", isDisabled && "cursor-not-allowed text-fg-mute/70"),
-			disabled: isDisabled,
+			className: cn("absolute top-1/2 right-2 inline-flex -translate-y-1/2 items-center justify-center rounded-md p-1 text-fg-mute transition-colors", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", !isDisabled && !pending && "hover:bg-bg-mute hover:text-fg-base", (isDisabled || pending) && "cursor-not-allowed text-fg-mute/70"),
+			disabled: isDisabled || pending,
 			onClick: toggleVisible,
 			type: "button",
 			children: isVisible ? /* @__PURE__ */ jsx(ViewOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx(ViewIcon, { size: "sm" })

package/dist/components/form/radio/radio.mjs

@@ -1,28 +1,31 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/radio/radio.tsx
 const Radio = ({ labelId, name, isDisabled, value, defaultValue, onChange, options }) => {
 	const [internalValue, setInternalValue] = useState(defaultValue);
+	const { pending } = useFormStatus();
 	const isControlled = value !== void 0;
 	const selectedValue = isControlled ? value : internalValue;
+	const isDisabledResolved = isDisabled || pending;
 	const selectValue = (nextValue) => {
 		if (!isControlled) setInternalValue(nextValue);
 		onChange?.({ target: { value: nextValue } });
 	};
 	return /* @__PURE__ */ jsx("div", {
 		"aria-labelledby": labelId,
-		className: cn("flex cursor-pointer flex-col gap-2", isDisabled && "cursor-not-allowed"),
+		className: cn("flex cursor-pointer flex-col gap-2", isDisabledResolved && "cursor-not-allowed"),
 		role: "radiogroup",
 		children: options.map((option) => /* @__PURE__ */ jsxs("label", {
-			className: cn("flex items-center gap-2 text-left", isDisabled ? "cursor-not-allowed" : "cursor-pointer"),
+			className: cn("flex items-center gap-2 text-left", isDisabledResolved ? "cursor-not-allowed" : "cursor-pointer"),
 			children: [
 				/* @__PURE__ */ jsx("input", {
 					checked: isControlled ? value === option.value : void 0,
 					className: "peer sr-only",
 					defaultChecked: isControlled ? void 0 : defaultValue === option.value,
-					disabled: isDisabled,
+					disabled: isDisabledResolved,
 					name: name ?? labelId,
 					onChange: () => {
 						selectValue(option.value);
@@ -32,7 +35,7 @@ const Radio = ({ labelId, name, isDisabled, value, defaultValue, onChange, optio
 				}),
 				/* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
-					className: cn("inline-flex size-5 items-center justify-center rounded-full border-2 transition-colors", "peer-focus-visible:border-transparent peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info", selectedValue === option.value ? "border-border-base bg-primary-bg" : "border-border-mute bg-bg-base", isDisabled && "border-border-mute bg-bg-mute"),
+					className: cn("inline-flex size-5 items-center justify-center rounded-full border-2 transition-colors", "peer-focus-visible:border-transparent peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info", selectedValue === option.value ? "border-border-base bg-primary-bg" : "border-border-mute bg-bg-base", isDisabledResolved && "border-border-mute bg-bg-mute"),
 					children: /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full transition-opacity", selectedValue === option.value ? "bg-primary-border opacity-100" : "bg-transparent opacity-0") })
 				}),
 				/* @__PURE__ */ jsx("span", { children: option.label })

package/dist/components/form/radio-card/radio-card.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/radio-card/radio-card.tsx
 const RadioCard = ({ labelId, name, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
 	const groupId = useId();

package/dist/components/form/select/select.mjs

@@ -1,8 +1,11 @@
+"use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
+import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/select/select.tsx
 const Select = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
+	const { pending } = useFormStatus();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative h-fit w-full",
 		children: [/* @__PURE__ */ jsx("select", {
@@ -11,7 +14,7 @@ const Select = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, op
 			"aria-required": isRequired,
 			className: cn("w-full appearance-none rounded-xl border border-border-base bg-bg-base px-3 py-2 text-fg-base", "aria-invalid:border-border-error", "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute disabled:hover:bg-bg-mute", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"),
 			defaultValue,
-			disabled: isDisabled,
+			disabled: isDisabled || pending,
 			id,
 			name,
 			onChange,