@k8o/arte-odyssey 8.0.3 → 9.0.0

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

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { Tooltip } from "../../overlays/tooltip/tooltip.mjs";
+import { chain } from "../../../helpers/chain.mjs";
 import { mergeRefs } from "../../../helpers/merge-refs.mjs";
 import { useTransition } from "react";
 import { useFormStatus } from "react-dom";
@@ -66,23 +67,11 @@ const IconButton = ({ ref, size = "md", bg = "transparent", label, tooltipPlacem
 				"aria-label": label,
 				className,
 				disabled: isDisabled,
-				onBlur: (e) => {
-					triggerProps.onBlur(e);
-					onBlur?.(e);
-				},
+				onBlur: chain(triggerProps.onBlur, onBlur),
 				onClick: handleClick,
-				onFocus: (e) => {
-					triggerProps.onFocus(e);
-					onFocus?.(e);
-				},
-				onMouseEnter: (e) => {
-					triggerProps.onMouseEnter(e);
-					onMouseEnter?.(e);
-				},
-				onMouseLeave: (e) => {
-					triggerProps.onMouseLeave(e);
-					onMouseLeave?.(e);
-				},
+				onFocus: chain(triggerProps.onFocus, onFocus),
+				onMouseEnter: chain(triggerProps.onMouseEnter, onMouseEnter),
+				onMouseLeave: chain(triggerProps.onMouseLeave, onMouseLeave),
 				ref: mergeRefs(ref, triggerProps.ref),
 				type: "button",
 				children

package/dist/components/data-display/accordion/context.d.mts

@@ -2,9 +2,9 @@ import { FC, PropsWithChildren } from "react";
 
 //#region src/components/data-display/accordion/context.d.ts
 type ToggleOpen = () => void;
-declare const useOpen: () => boolean;
 declare const useToggleOpen: () => ToggleOpen;
 declare const useItemId: () => string;
+declare const useOpen: () => boolean;
 declare const AccordionItemProvider: FC<PropsWithChildren<{
   defaultOpen?: boolean;
   id: string;

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

@@ -1,22 +1,13 @@
 "use client";
 import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 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);
-const ItemIdContext = createContext(void 0);
+const [ToggleOpenContext, useToggleOpen] = createSafeContext("useToggleOpen must be used within AccordionProvider");
+const [ItemIdContext, useItemId] = createSafeContext("useItemId must be used within AccordionProvider");
 const useOpen = () => use(OpenContext);
-const useToggleOpen = () => {
-	const toggleOpen = use(ToggleOpenContext);
-	if (!toggleOpen) throw new Error("useToggleOpen must be used within AccordionProvider");
-	return toggleOpen;
-};
-const useItemId = () => {
-	const id = use(ItemIdContext);
-	if (id === void 0 || id === "") throw new Error("useItemId must be used within AccordionProvider");
-	return id;
-};
 const AccordionItemProvider = ({ defaultOpen = false, id, children }) => {
 	const { isOpen, toggle } = useDisclosure(defaultOpen);
 	return /* @__PURE__ */ jsx(OpenContext, {

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

@@ -1,5 +1,5 @@
 import { cn } from "../../../helpers/cn.mjs";
-import { findAllColors } from "../../../helpers/color/find-all-colors.mjs";
+import { findAllColors } from "./find-all-colors.mjs";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/code/code.tsx

package/dist/{helpers/color → components/data-display/code}/find-all-colors.d.mts

@@ -1,4 +1,4 @@
-//#region src/helpers/color/find-all-colors.d.ts
+//#region src/components/data-display/code/find-all-colors.d.ts
 type ColorMatch = {
   color: string;
   start: number;

package/dist/{helpers/color → components/data-display/code}/find-all-colors.mjs

@@ -1,4 +1,4 @@
-//#region src/helpers/color/find-all-colors.ts
+//#region src/components/data-display/code/find-all-colors.ts
 const extractFunctionContent = (source, funcName) => {
 	const funcPattern = new RegExp(`${funcName}\\s*\\(`, "gi");
 	const matches = [];

package/dist/components/feedback/progress/progress.mjs

@@ -1,5 +1,5 @@
 import { cn } from "../../../helpers/cn.mjs";
-import { toPrecision } from "../../../helpers/number/to-precision.mjs";
+import { toPrecision } from "../../../internal/to-precision.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/progress/progress.tsx
 const Progress = ({ progress, maxProgress, minProgress = 0, label, className, ...rest }) => /* @__PURE__ */ jsx("div", {

package/dist/components/feedback/toast/context.d.mts

@@ -8,11 +8,11 @@ type ToastType = {
   status: Status;
   message: string;
 };
-declare const SetToastContext: _$react.Context<Dispatch<SetStateAction<ToastType[]>> | undefined>;
+declare const SetToastContext: _$react.Context<Dispatch<SetStateAction<ToastType[]>> | null>, useSetToast: () => Dispatch<SetStateAction<ToastType[]>>;
 declare const useToast: () => {
   onOpen: (status: Status, message: string) => void;
   onClose: (id: string) => void;
   onCloseAll: () => void;
 };
 //#endregion
-export { SetToastContext, ToastType, useToast };
+export { SetToastContext, ToastType, useSetToast, useToast };

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/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";
@@ -15,7 +16,7 @@ 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 [deferredText, isPending] = useDeferredDebounce(text);
@@ -24,9 +25,9 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 	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;
@@ -69,8 +70,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 +80,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 +102,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 +110,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);
@@ -149,7 +150,7 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "relative w-full",
-				children: open && /* @__PURE__ */ jsx("div", {
+				children: isOpen && /* @__PURE__ */ jsx("div", {
 					className: "bg-bg-raised absolute top-1 z-10 w-full rounded-xl shadow-md",
 					role: "presentation",
 					children: /* @__PURE__ */ jsxs("ul", {

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.mjs

@@ -1,18 +1,19 @@
 "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,

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>, "className" | "onChange" | "defaultValue" | "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>, "className" | "onChange" | "defaultValue" | "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>, "type" | "className" | "value" | "onChange" | "children" | "checked" | "defaultChecked"> & ({
     value: boolean;
     onChange: _$react.ChangeEventHandler<HTMLInputElement>;
     defaultChecked?: never;

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/{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.mjs

@@ -1,28 +1,29 @@
 "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"),
@@ -40,7 +41,7 @@ const NumberField = ({ invalid = false, disabled = false, required = false, valu
 			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));
 				}
@@ -71,7 +72,7 @@ const NumberField = ({ invalid = false, disabled = false, required = false, valu
 				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"),
 				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));
 				},
@@ -88,7 +89,7 @@ const NumberField = ({ invalid = false, disabled = false, required = false, valu
 				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"),
 				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/radio/radio.mjs

@@ -1,17 +1,19 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { useState } from "react";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/radio/radio.tsx
 const Radio = ({ "aria-labelledby": labelledbyId, name, disabled = false, value, defaultValue, onChange, options, ...rest }) => {
-	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [selectedValue, setSelectedValue] = useControllableState({
+		value,
+		defaultValue
+	});
 	const { pending } = useFormStatus();
 	const isControlled = value !== void 0;
-	const selectedValue = isControlled ? value : internalValue;
 	const disabledResolved = disabled || pending;
 	const selectValue = (nextValue) => {
-		if (!isControlled) setInternalValue(nextValue);
+		setSelectedValue(nextValue);
 		onChange?.({ target: { value: nextValue } });
 	};
 	return /* @__PURE__ */ jsx("div", {

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

@@ -1,16 +1,18 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { useId, useRef, useState } from "react";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { useId, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/radio-card/radio-card.tsx
 const RadioCard = ({ "aria-labelledby": labelledbyId, name, disabled = false, invalid = false, options, value, defaultValue, onChange, ...rest }) => {
 	const groupId = useId();
 	const buttonRefs = useRef([]);
-	const [internalValue, setInternalValue] = useState(defaultValue ?? options[0]?.value);
-	const isControlled = value !== void 0;
-	const currentValue = isControlled ? value : internalValue;
+	const [currentValue, setCurrentValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? options[0]?.value
+	});
 	const selectValue = (nextValue) => {
-		if (!isControlled) setInternalValue(nextValue);
+		setCurrentValue(nextValue);
 		onChange?.({ target: { value: nextValue } });
 	};
 	const focusIndex = (index) => {

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

@@ -1,16 +1,19 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { useId, useState } from "react";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { useId } from "react";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/switch/switch.tsx
 const Switch = ({ value, defaultChecked, id, disabled = false, invalid = false, required = false, label, onChange, ...rest }) => {
 	const generatedId = useId();
 	const inputId = id ?? generatedId;
-	const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+	const [isSelected, setSelected] = useControllableState({
+		value,
+		defaultValue: defaultChecked ?? false
+	});
 	const { pending } = useFormStatus();
 	const isControlled = value !== void 0;
-	const isSelected = isControlled ? value : internalChecked;
 	const disabledResolved = disabled || pending;
 	return /* @__PURE__ */ jsxs("label", {
 		className: cn("inline-flex w-fit items-center gap-3", disabledResolved ? "cursor-not-allowed text-fg-mute" : "cursor-pointer"),
@@ -27,7 +30,7 @@ const Switch = ({ value, defaultChecked, id, disabled = false, invalid = false,
 				disabled: disabledResolved,
 				id: inputId,
 				onChange: (event) => {
-					if (!isControlled) setInternalChecked(event.target.checked);
+					setSelected(event.target.checked);
 					onChange?.(event);
 				},
 				required,

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

@@ -1,7 +1,8 @@
 import { ArteOdyssey } from "./arte-odyssey.mjs";
 import { GitHubIcon } from "./github-mark.mjs";
 import { Logo, LogoIcon } from "./logo.mjs";
-import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./lucide.mjs";
+import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./lucide.mjs";
 import { QiitaIcon } from "./qiita.mjs";
 import { TwitterIcon } from "./twitter.mjs";
-export { AIIcon, AccessibilityIcon, AlertIcon, ArteOdyssey, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GitHubIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, QiitaIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon };
+import { VerticalWritingIcon } from "./vertical-writing.mjs";
+export { AIIcon, AccessibilityIcon, AlertIcon, ArteOdyssey, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GitHubIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, QiitaIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon };

package/dist/components/icons/index.mjs

@@ -1,7 +1,8 @@
 import { ArteOdyssey } from "./arte-odyssey.mjs";
 import { GitHubIcon } from "./github-mark.mjs";
 import { Logo, LogoIcon } from "./logo.mjs";
-import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./lucide.mjs";
+import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./lucide.mjs";
 import { QiitaIcon } from "./qiita.mjs";
 import { TwitterIcon } from "./twitter.mjs";
-export { AIIcon, AccessibilityIcon, AlertIcon, ArteOdyssey, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GitHubIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, QiitaIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon };
+import { VerticalWritingIcon } from "./vertical-writing.mjs";
+export { AIIcon, AccessibilityIcon, AlertIcon, ArteOdyssey, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GitHubIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, QiitaIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon };