@k8o/arte-odyssey 8.0.3 → 9.1.0

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

@@ -1,17 +1,16 @@
 "use client";
-import { uuidV4 } from "../../../helpers/uuid-v4.mjs";
-import { createContext, use, useCallback } from "react";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useCallback } from "react";
 //#region src/components/feedback/toast/context.ts
 const MAX_TOAST_COUNT = 5;
-const SetToastContext = createContext(void 0);
+const [SetToastContext, useSetToast] = createSafeContext("useToast must be used within a ToastProvider");
 const useToast = () => {
-	const setToasts = use(SetToastContext);
-	if (!setToasts) throw new Error("useToast must be used within a ToastProvider");
+	const setToasts = useSetToast();
 	return {
 		onOpen: useCallback((status, message) => {
 			setToasts((prev) => {
 				return [...prev, {
-					id: uuidV4(),
+					id: crypto.randomUUID(),
 					status,
 					message
 				}].slice(-MAX_TOAST_COUNT);
@@ -26,4 +25,4 @@ const useToast = () => {
 	};
 };
 //#endregion
-export { SetToastContext, useToast };
+export { SetToastContext, useSetToast, useToast };

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

@@ -54,7 +54,7 @@ const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
 		children: [children, container ? createPortal(/* @__PURE__ */ jsx("section", {
 			"aria-label": "通知",
 			"aria-live": "polite",
-			className: cn("absolute bottom-3 z-50 flex w-full flex-col items-center justify-center gap-4", position === "fixed" && "fixed", position === "absolute" && "absolute"),
+			className: cn("absolute bottom-3 z-toast flex w-full flex-col items-center justify-center gap-4", position === "fixed" && "fixed", position === "absolute" && "absolute"),
 			children: /* @__PURE__ */ jsx(AnimatePresence, {
 				initial: false,
 				children: toasts.map((toast) => /* @__PURE__ */ jsx(motion$1.div, {

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

@@ -6,7 +6,7 @@ type BaseProps = {
   id: string;
   invalid?: boolean;
   options: readonly Option[];
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'id' | 'autoComplete' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded'>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'style' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'id' | 'autoComplete' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded'>;
 type ControlledProps = {
   value: string[];
   onChange: (value: string[]) => void;

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

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
+import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
@@ -7,6 +8,7 @@ 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";
+import { autoUpdate, flip, offset, size, useFloating } from "@floating-ui/react";
 //#region src/components/form/autocomplete/autocomplete.tsx
 const Autocomplete = ({ id, name, invalid = false, disabled = false, required = false, options, value, defaultValue, onChange, ...rest }) => {
 	const [currentValue, handleChange] = useControllableState({
@@ -15,18 +17,37 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 		onChange
 	});
 	const ref = useRef(null);
-	const [open, setOpen] = useState(false);
+	const { isOpen, open, close } = useDisclosure();
 	const [text, setText] = useState("");
 	const [selectIndex, setSelectIndex] = useState();
+	const { refs, floatingStyles } = useFloating({
+		strategy: "fixed",
+		placement: "bottom-start",
+		open: isOpen,
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(4),
+			flip({
+				fallbackAxisSideDirection: "end",
+				padding: 8
+			}),
+			size({ apply: ({ rects, elements }) => {
+				const referenceEl = elements.reference instanceof HTMLElement ? elements.reference : null;
+				const isVertical = referenceEl !== null && getComputedStyle(referenceEl).writingMode.startsWith("vertical");
+				Object.assign(elements.floating.style, { inlineSize: `${isVertical ? rects.reference.height : rects.reference.width}px` });
+			} })
+		],
+		transform: false
+	});
 	const [deferredText, isPending] = useDeferredDebounce(text);
 	const filteredOptions = options.filter((option) => option.label.includes(deferredText));
 	const { pending: formPending } = useFormStatus();
 	const disabledResolved = disabled || formPending;
 	const reset = useCallback(() => {
 		setText("");
-		setOpen(false);
+		close();
 		setSelectIndex(void 0);
-	}, []);
+	}, [close]);
 	useEffect(() => {
 		const handleClick = (e) => {
 			if (e.target instanceof Node && ref.current?.contains(e.target) === true) return;
@@ -37,9 +58,13 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 			document.removeEventListener("click", handleClick);
 		};
 	}, [reset]);
+	const setReferenceRef = (node) => {
+		ref.current = node;
+		refs.setReference(node);
+	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative w-full rounded-xl border border-border-base bg-bg-base", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info", "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
-		ref,
+		className: cn("relative rounded-xl border border-border-base bg-bg-base inline-full", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info", "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
+		ref: setReferenceRef,
 		children: [
 			name !== void 0 && name !== "" ? currentValue.map((selectedValue) => /* @__PURE__ */ jsx("input", {
 				name,
@@ -69,8 +94,8 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 					}), /* @__PURE__ */ jsx("input", {
 						...rest,
 						"aria-autocomplete": "list",
-						"aria-controls": open ? `${id}_listbox` : void 0,
-						"aria-expanded": open,
+						"aria-controls": isOpen ? `${id}_listbox` : void 0,
+						"aria-expanded": isOpen,
 						"aria-invalid": invalid,
 						"aria-required": required,
 						autoComplete: "off",
@@ -79,19 +104,19 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 						id,
 						onBlur: (e) => {
 							if (e.relatedTarget?.id.startsWith(`${id}_option_`) === true) return;
-							setOpen(false);
+							close();
 						},
 						onChange: (e) => {
-							setOpen(true);
+							open();
 							setText(e.target.value);
 							setSelectIndex(void 0);
 						},
 						onClick: () => {
-							if (open && text.length === 0) {
-								setOpen(false);
+							if (isOpen && text.length === 0) {
+								close();
 								return;
 							}
-							setOpen(true);
+							open();
 							setSelectIndex(void 0);
 						},
 						onKeyDown: (e) => {
@@ -101,7 +126,7 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 								return;
 							}
 							if (e.key === "ArrowDown") {
-								setOpen(true);
+								open();
 								setSelectIndex((prev) => {
 									if (prev === void 0) return 0;
 									return Math.min(prev + 1, options.length - 1);
@@ -109,7 +134,7 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 								return;
 							}
 							if (e.key === "ArrowUp") {
-								setOpen(true);
+								open();
 								setSelectIndex((prev) => {
 									if (prev === void 0) return 0;
 									return Math.max(prev - 1, 0);
@@ -147,43 +172,42 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 					children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "relative w-full",
-				children: open && /* @__PURE__ */ jsx("div", {
-					className: "bg-bg-raised absolute top-1 z-10 w-full rounded-xl shadow-md",
-					role: "presentation",
-					children: /* @__PURE__ */ jsxs("ul", {
-						"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: "text-fg-mute px-3 py-2",
-							children: "該当なし"
-						}), filteredOptions.map((option, idx) => {
-							const selected = currentValue.includes(option.value);
-							return /* @__PURE__ */ jsx("li", {
-								className: cn("cursor-pointer px-3 py-2 transition-colors", selected && "bg-primary-bg-subtle text-primary-fg", selectIndex === idx && !selected && "bg-bg-subtle", selectIndex === idx && selected && "bg-primary-bg-mute text-primary-fg"),
-								id: `${id}_option_${option.value}`,
-								onClick: (e) => {
-									e.stopPropagation();
-									reset();
-									if (selected) {
-										handleChange(currentValue.filter((v) => v !== option.value));
-										return;
-									}
-									handleChange([...currentValue, option.value]);
-								},
-								onKeyDown: (e) => {
-									e.preventDefault();
-								},
-								onMouseEnter: () => {
-									setSelectIndex(idx);
-								},
-								tabIndex: -1,
-								children: option.label
-							}, option.value);
-						})]
-					})
+			isOpen && /* @__PURE__ */ jsx("div", {
+				className: "bg-bg-raised z-10 rounded-xl shadow-md",
+				ref: refs.setFloating,
+				role: "presentation",
+				style: floatingStyles,
+				children: /* @__PURE__ */ jsxs("ul", {
+					"aria-busy": isPending || void 0,
+					className: cn("max-h-96 py-2 transition-opacity vertical:max-h-none vertical:max-w-96", isPending && "opacity-60"),
+					id: `${id}_listbox`,
+					children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", {
+						className: "text-fg-mute px-3 py-2",
+						children: "該当なし"
+					}), filteredOptions.map((option, idx) => {
+						const selected = currentValue.includes(option.value);
+						return /* @__PURE__ */ jsx("li", {
+							className: cn("cursor-pointer px-3 py-2 transition-colors", selected && "bg-primary-bg-subtle text-primary-fg", selectIndex === idx && !selected && "bg-bg-subtle", selectIndex === idx && selected && "bg-primary-bg-mute text-primary-fg"),
+							id: `${id}_option_${option.value}`,
+							onClick: (e) => {
+								e.stopPropagation();
+								reset();
+								if (selected) {
+									handleChange(currentValue.filter((v) => v !== option.value));
+									return;
+								}
+								handleChange([...currentValue, option.value]);
+							},
+							onKeyDown: (e) => {
+								e.preventDefault();
+							},
+							onMouseEnter: () => {
+								setSelectIndex(idx);
+							},
+							tabIndex: -1,
+							children: option.label
+						}, option.value);
+					})]
 				})
 			})
 		]

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

@@ -4,7 +4,7 @@ import { ChangeEventHandler, FC, InputHTMLAttributes } from "react";
 type BaseProps = {
   itemValue?: string;
   label: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'value' | 'onChange' | 'defaultChecked' | 'checked' | 'children'>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style' | 'value' | 'onChange' | 'defaultChecked' | 'checked' | 'children'>;
 type ControlledProps = {
   value: boolean;
   onChange: ChangeEventHandler<HTMLInputElement>;

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

@@ -1,22 +1,25 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { CheckIcon } from "../../icons/lucide.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { useCheckboxGroupContext } from "../checkbox-group/checkbox-group.mjs";
-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, disabled = false, label, value, defaultChecked, onChange, ...rest }) => {
 	const groupContext = useCheckboxGroupContext();
 	const { pending } = useFormStatus();
-	const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+	const [internalChecked, setInternalChecked] = useControllableState({
+		value,
+		defaultValue: defaultChecked ?? false
+	});
 	const groupItemValue = itemValue ?? "";
 	if (groupContext && (itemValue === void 0 || itemValue === "")) throw new Error("Checkbox inside CheckboxGroup requires itemValue");
 	const isControlled = value !== void 0;
 	const disabledResolved = disabled || groupContext?.disabled === true || pending;
-	const checked = groupContext ? groupContext.currentValue.includes(groupItemValue) : isControlled ? value : internalChecked;
+	const checked = groupContext ? groupContext.currentValue.includes(groupItemValue) : internalChecked;
 	const setChecked = (nextChecked) => {
-		if (!isControlled) setInternalChecked(nextChecked);
+		setInternalChecked(nextChecked);
 		onChange?.({ target: { checked: nextChecked } });
 	};
 	return /* @__PURE__ */ jsxs("label", {

package/dist/components/form/checkbox-card/checkbox-card.d.mts

@@ -11,7 +11,7 @@ type CheckboxCardOption = Readonly<{
 type BaseProps = {
   invalid?: boolean;
   options: readonly CheckboxCardOption[];
-} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className' | 'children' | 'onChange' | 'defaultValue'>;
+} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className' | 'style' | 'children' | 'onChange' | 'defaultValue'>;
 type ControlledProps = {
   value: string[];
   onChange: (value: string[]) => void;

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

@@ -1,22 +1,23 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { CheckIcon } from "../../icons/lucide.mjs";
-import { useId, useState } from "react";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/checkbox-card/checkbox-card.tsx
 const CheckboxCard = ({ name, disabled = false, invalid = false, options, value, defaultValue, onChange, ...rest }) => {
 	const groupId = useId();
-	const [internalValue, setInternalValue] = useState(defaultValue ?? []);
-	const isControlled = value !== void 0;
-	const selectedValues = isControlled ? value : internalValue;
+	const [selectedValues, setSelectedValues] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange
+	});
 	const handleToggle = (nextValue, checked) => {
-		const nextValues = checked ? [...selectedValues, nextValue] : selectedValues.filter((item) => item !== nextValue);
-		if (!isControlled) setInternalValue(nextValues);
-		onChange?.(nextValues);
+		setSelectedValues(checked ? [...selectedValues, nextValue] : selectedValues.filter((item) => item !== nextValue));
 	};
 	return /* @__PURE__ */ jsx("fieldset", {
 		...rest,
-		className: cn("m-0 w-full min-w-0 border-0 p-0", "grid gap-3", disabled && "opacity-70"),
+		className: cn("m-0 min-w-0 border-0 p-0 inline-full", "grid gap-3", disabled && "opacity-70"),
 		children: options.map((option) => {
 			const checked = selectedValues.includes(option.value);
 			const optionDisabled = disabled || option.disabled === true;
@@ -24,7 +25,7 @@ const CheckboxCard = ({ name, disabled = false, invalid = false, options, value,
 			const hasVisual = option.visual !== void 0 && option.visual !== null;
 			const optionId = `${groupId}-${option.value}`;
 			return /* @__PURE__ */ jsxs("label", {
-				className: cn("flex w-full min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors", "has-[input:focus-visible]:outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-border-info", checked && "border-primary-border bg-primary-bg-subtle hover:bg-primary-bg-mute", invalid ? "border-border-error" : !checked && "border-border-mute hover:bg-bg-subtle", optionDisabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
+				className: cn("flex min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors inline-full", "has-[input:focus-visible]:outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-border-info", checked && "border-primary-border bg-primary-bg-subtle hover:bg-primary-bg-mute", invalid ? "border-border-error" : !checked && "border-border-mute hover:bg-bg-subtle", optionDisabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
 				id: optionId,
 				children: [
 					/* @__PURE__ */ jsx("input", {

package/dist/components/form/checkbox-group/checkbox-group.d.mts

@@ -12,7 +12,7 @@ type RootBaseProps = PropsWithChildren<{
   invalid?: boolean;
   required?: boolean;
   name: string;
-} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className' | 'onChange' | 'defaultValue' | 'name'>>;
+} & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className' | 'style' | 'onChange' | 'defaultValue' | 'name'>>;
 type RootControlledProps = {
   value: string[];
   onChange: (value: string[]) => void;

package/dist/components/form/checkbox-group/index.d.mts

@@ -5,7 +5,7 @@ declare const CheckboxGroup: _$react.FC<{
   invalid?: boolean;
   required?: boolean;
   name: string;
-} & Omit<_$react.FieldsetHTMLAttributes<HTMLFieldSetElement>, "name" | "defaultValue" | "className" | "onChange"> & {
+} & Omit<_$react.FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange" | "className" | "style" | "name"> & {
   children?: _$react.ReactNode | undefined;
 } & ({
   value: string[];
@@ -20,7 +20,7 @@ declare const CheckboxGroup: _$react.FC<{
     invalid?: boolean;
     required?: boolean;
     name: string;
-  } & Omit<_$react.FieldsetHTMLAttributes<HTMLFieldSetElement>, "name" | "defaultValue" | "className" | "onChange"> & {
+  } & Omit<_$react.FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange" | "className" | "style" | "name"> & {
     children?: _$react.ReactNode | undefined;
   } & ({
     value: string[];
@@ -35,7 +35,7 @@ declare const CheckboxGroup: _$react.FC<{
   Item: _$react.FC<{
     itemValue?: string;
     label: string;
-  } & Omit<_$react.InputHTMLAttributes<HTMLInputElement>, "children" | "defaultChecked" | "className" | "onChange" | "type" | "value" | "checked"> & ({
+  } & Omit<_$react.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "className" | "style" | "checked" | "defaultChecked" | "children"> & ({
     value: boolean;
     onChange: _$react.ChangeEventHandler<HTMLInputElement>;
     defaultChecked?: never;

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

@@ -8,7 +8,7 @@ type RootProps = PropsWithChildren<{
   defaultValue?: File[];
   onChange?: ChangeEventHandler<HTMLInputElement>;
   webkitDirectory?: boolean;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'onChange' | 'defaultValue' | 'value' | 'children'>>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style' | 'onChange' | 'defaultValue' | 'value' | 'children'>>;
 declare const FileField: {
   readonly Root: ({
     children,

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

@@ -1,18 +1,12 @@
 "use client";
-import { uuidV4 } from "../../../helpers/uuid-v4.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
-import { createContext, use, useCallback, useId, useMemo, useRef, useState } from "react";
+import { 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;
-const useFileFieldContext = () => {
-	const fileField = use(FileFieldContext);
-	if (!fileField) throw new Error("useFileFieldContext must be used within a FileField.Root");
-	return fileField;
-};
+const [FileFieldProvider, useFileFieldContext] = createSafeContext("useFileFieldContext must be used within a FileField.Root");
 const Root = ({ children, disabled = false, invalid = false, required = false, multiple = false, maxFiles, onChange, webkitDirectory = false, ...rest }) => {
 	const generatedId = useId();
 	const inputRef = useRef(null);
@@ -23,7 +17,7 @@ const Root = ({ children, disabled = false, invalid = false, required = false, m
 		onChange?.(event);
 		const newFiles = Array.from(event.target.files ?? []).map((file) => ({
 			file,
-			id: uuidV4()
+			id: crypto.randomUUID()
 		}));
 		setAcceptedFiles(multiple || webkitDirectory ? [...acceptedFiles, ...newFiles].slice(0, maxFiles ?? Number.POSITIVE_INFINITY) : newFiles.slice(0, 1));
 	}, [

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

@@ -4,7 +4,7 @@ import { FC, FormHTMLAttributes, ReactNode } from "react";
 type Props = {
   action?: ((formData: FormData) => void | Promise<void>) | string;
   children: ReactNode;
-} & Omit<FormHTMLAttributes<HTMLFormElement>, 'action' | 'children'>;
+} & Omit<FormHTMLAttributes<HTMLFormElement>, 'action' | 'children' | 'className' | 'style'>;
 declare const Form: FC<Props>;
 //#endregion
 export { Form };

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

@@ -1,10 +1,9 @@
 "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 }) => /* @__PURE__ */ jsx("form", {
+const Form = ({ action, children, ...rest }) => /* @__PURE__ */ jsx("form", {
 	action,
-	className: cn("flex flex-col gap-6", className),
+	className: "flex flex-col gap-6",
 	...rest,
 	children
 });

package/dist/{helpers/number → components/form/number-field}/cast.d.mts

@@ -1,4 +1,4 @@
-//#region src/helpers/number/cast.d.ts
+//#region src/components/form/number-field/cast.d.ts
 declare const cast: (value: string, step: number, precision?: number) => number;
 //#endregion
 export { cast };

package/dist/{helpers/number → components/form/number-field}/cast.mjs

@@ -1,5 +1,5 @@
-import { toPrecision } from "./to-precision.mjs";
-//#region src/helpers/number/cast.ts
+import { toPrecision } from "../../../internal/to-precision.mjs";
+//#region src/components/form/number-field/cast.ts
 const FLOATING_POINT_REGEX = /^[Ee0-9+\-.]$/;
 const isInvalidCharacter = (value) => FLOATING_POINT_REGEX.test(value);
 const sanitize = (value) => value.split("").filter((char) => isInvalidCharacter(char)).join("");

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

@@ -4,7 +4,7 @@ import { FC, InputHTMLAttributes } from "react";
 type BaseProps = {
   invalid?: boolean;
   precision?: number;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'step' | 'min' | 'max'> & {
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'style' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'step' | 'min' | 'max'> & {
   step?: number;
   min?: number;
   max?: number;

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

@@ -1,31 +1,32 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 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 { toPrecision } from "../../../internal/to-precision.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { clamp } from "../../../internal/clamp.mjs";
+import { cast } from "./cast.mjs";
 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 = ({ invalid = false, disabled = false, required = false, value, defaultValue, onChange, step = 1, precision = 0, max = 9007199254740991, min = -9007199254740991, ...rest }) => {
-	const isControlled = value !== void 0;
-	const initialValue = defaultValue ?? value ?? 0;
-	const [internalValue, setInternalValue] = useState(initialValue);
-	const [displayValue, setDisplayValue] = useState(initialValue.toFixed(precision));
-	const [prevValue, setPrevValue] = useState(initialValue);
+	const [currentValue, setCurrentValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? 0,
+		onChange
+	});
+	const [displayValue, setDisplayValue] = useState(() => currentValue.toFixed(precision));
+	const [prevValue, setPrevValue] = useState(currentValue);
 	const { pending } = useFormStatus();
-	const currentValue = isControlled ? value : internalValue;
-	if (isControlled && value !== prevValue) {
-		setDisplayValue(value.toFixed(precision));
-		setPrevValue(value);
+	if (currentValue !== prevValue) {
+		setDisplayValue(currentValue.toFixed(precision));
+		setPrevValue(currentValue);
 	}
 	const handleChange = (newValue) => {
-		if (!isControlled) setInternalValue(newValue);
-		onChange?.(newValue);
+		setCurrentValue(newValue);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex h-12 w-full items-center justify-between gap-2 rounded-xl border border-border-base bg-bg-base", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info", "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
+		className: cn("relative flex h-12 w-full items-center justify-between gap-2 rounded-xl border border-border-base bg-bg-base vertical:h-auto vertical:w-12", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info", "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
 		children: [/* @__PURE__ */ jsx("input", {
 			autoComplete: "off",
 			autoCorrect: "off",
@@ -36,11 +37,11 @@ const NumberField = ({ invalid = false, disabled = false, required = false, valu
 			"aria-valuemax": max,
 			"aria-valuemin": min,
 			"aria-valuenow": currentValue,
-			className: cn("grow bg-transparent pr-8 pl-3 focus-visible:outline-hidden size-full", "disabled:cursor-not-allowed", "read-only:cursor-not-allowed"),
+			className: cn("grow bg-transparent pe-8 ps-3 focus-visible:outline-hidden size-full", "disabled:cursor-not-allowed", "read-only:cursor-not-allowed"),
 			disabled,
 			readOnly: pending || void 0,
 			onBlur: () => {
-				const newValue = between(cast(displayValue, precision), min, max);
+				const newValue = clamp(cast(displayValue, precision), min, max);
 				handleChange(newValue);
 				setDisplayValue(newValue.toFixed(precision));
 			},
@@ -50,12 +51,12 @@ const NumberField = ({ invalid = false, disabled = false, required = false, valu
 			},
 			onKeyDown: (e) => {
 				if (e.key === "ArrowUp") {
-					const newValue = between(toPrecision(cast(displayValue, precision) + step, precision), min, max);
+					const newValue = clamp(toPrecision(cast(displayValue, precision) + step, precision), min, max);
 					handleChange(newValue);
 					setDisplayValue(newValue.toFixed(precision));
 				}
 				if (e.key === "ArrowDown") {
-					const newValue = between(toPrecision(cast(displayValue, precision) - step, precision), min, max);
+					const newValue = clamp(toPrecision(cast(displayValue, precision) - step, precision), min, max);
 					handleChange(newValue);
 					setDisplayValue(newValue.toFixed(precision));
 				}
@@ -66,12 +67,12 @@ const NumberField = ({ invalid = false, disabled = false, required = false, valu
 			value: displayValue
 		}), /* @__PURE__ */ jsxs("div", {
 			"aria-hidden": "true",
-			className: "absolute right-1 flex h-full flex-col py-1",
+			className: "vertical:inset-e-auto vertical:bottom-1 vertical:h-auto vertical:w-full vertical:flex-row vertical:px-1 vertical:py-0 absolute end-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 hover:disabled:bg-transparent"),
+				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors vertical:h-6 vertical:w-auto", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute hover:disabled:bg-transparent"),
 				disabled: disabled || pending,
 				onClick: () => {
-					const newValue = between(toPrecision(cast(displayValue, precision) + step, precision), min, max);
+					const newValue = clamp(toPrecision(cast(displayValue, precision) + step, precision), min, max);
 					handleChange(newValue);
 					setDisplayValue(newValue.toFixed(precision));
 				},
@@ -85,10 +86,10 @@ const NumberField = ({ invalid = false, disabled = false, required = false, valu
 					size: "sm"
 				})]
 			}), /* @__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 hover:disabled:bg-transparent"),
+				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors vertical:h-6 vertical:w-auto", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute hover:disabled:bg-transparent"),
 				disabled: disabled || pending,
 				onClick: () => {
-					const newValue = between(toPrecision(cast(displayValue, precision) - step, precision), min, max);
+					const newValue = clamp(toPrecision(cast(displayValue, precision) - step, precision), min, max);
 					handleChange(newValue);
 					setDisplayValue(newValue.toFixed(precision));
 				},

package/dist/components/form/password-input/password-input.d.mts

@@ -5,7 +5,7 @@ type Props = {
   invalid?: boolean;
   showLabel?: string;
   hideLabel?: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style'>;
 declare const PasswordInput: FC<Props>;
 //#endregion
 export { PasswordInput };

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

@@ -9,18 +9,18 @@ const PasswordInput = ({ invalid = false, autoComplete = "current-password", sho
 	const { isOpen: isVisible, toggle: toggleVisible } = useDisclosure();
 	const { pending } = useFormStatus();
 	return /* @__PURE__ */ jsxs("div", {
-		className: "relative w-full",
+		className: cn("relative flex w-full items-center rounded-xl border border-border-base bg-bg-base vertical:h-full vertical:w-auto", invalid && "border-border-error", (disabled || pending) && "cursor-not-allowed border-border-mute bg-bg-mute", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info"),
 		children: [/* @__PURE__ */ jsx("input", {
 			"aria-invalid": invalid,
 			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 hover:disabled: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"),
+			className: cn("w-full grow bg-transparent px-3 py-2 focus-visible:outline-hidden vertical:h-full vertical:w-auto", "disabled:cursor-not-allowed", "read-only:cursor-not-allowed read-only:bg-bg-subtle"),
 			disabled,
 			readOnly: pending || readOnly,
 			type: isVisible ? "text" : "password",
 			...rest
 		}), /* @__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", !disabled && !pending && "hover:bg-bg-mute hover:text-fg-base", (disabled || pending) && "cursor-not-allowed text-fg-mute/70"),
+			className: cn("me-2 inline-flex shrink-0 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", !disabled && !pending && "hover:bg-bg-mute hover:text-fg-base", (disabled || pending) && "cursor-not-allowed text-fg-mute/70"),
 			disabled: disabled || pending,
 			onClick: toggleVisible,
 			type: "button",