@k8o/arte-odyssey 4.2.1 → 5.0.0

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

@@ -3,7 +3,7 @@ import { 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 }) => {
 	return /* @__PURE__ */ jsxs("button", {
-		className: cn("cursor-pointer rounded-lg border-2 text-center font-bold transition-colors", {
+		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/90 active:bg-primary-bg/80": variant === "contained" && color === "primary",
 			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize": variant === "contained" && color === "gray",
 			"cursor-not-allowed opacity-35 hover:bg-primary-bg active:bg-primary-bg": disabled && variant === "contained",

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

@@ -12,7 +12,7 @@ const LinkButton = ({ children, size = "md", color = "primary", variant = "conta
 	};
 	return renderAnchor({
 		href,
-		className: cn("rounded-lg border-2 text-center font-bold transition-colors", {
+		className: cn("rounded-full border-2 text-center font-bold transition-colors", {
 			"border-transparent bg-primary-bg text-fg hover:bg-primary-bg/90 active:bg-primary-bg/80": variant === "contained" && color === "primary",
 			"border-transparent bg-bg-subtle text-fg-base hover:bg-bg-mute active:bg-bg-emphasize": variant === "contained" && color === "gray",
 			"border-primary-border bg-bg-base text-primary-fg hover:bg-bg-subtle active:bg-bg-emphasize": variant === "outlined" && color === "primary",

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

@@ -1,6 +1,7 @@
 "use client";
+import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useCallback, useState } from "react";
+import { createContext, use } from "react";
 //#region src/components/data-display/accordion/context.tsx
 const OpenContext = createContext(false);
 const ToggleOpenContext = createContext(void 0);
@@ -17,13 +18,11 @@ const useItemId = () => {
 	return id;
 };
 const AccordionItemProvider = ({ defaultOpen = false, id, children }) => {
-	const [open, setOpen] = useState(defaultOpen);
+	const { isOpen, toggle } = useDisclosure(defaultOpen);
 	return /* @__PURE__ */ jsx(OpenContext, {
-		value: open,
+		value: isOpen,
 		children: /* @__PURE__ */ jsx(ToggleOpenContext, {
-			value: useCallback(() => {
-				setOpen((open) => !open);
-			}, []),
+			value: toggle,
 			children: /* @__PURE__ */ jsx(ItemIdContext, {
 				value: id,
 				children

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

@@ -2,7 +2,7 @@ import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/card.tsx
 const Card = ({ children, variant = "primary", width = "full", appearance = "shadow" }) => /* @__PURE__ */ jsx("div", {
-	className: cn("rounded-lg", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", variant === "primary" && "bg-bg-base", variant === "secondary" && "bg-bg-mute"),
+	className: cn("rounded-xl", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", variant === "primary" && "bg-bg-base", variant === "secondary" && "bg-bg-mute"),
 	children
 });
 //#endregion

package/dist/components/data-display/card/interactive-card.mjs

@@ -2,7 +2,7 @@ import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/card/interactive-card.tsx
 const InteractiveCard = ({ children, variant = "primary", width = "full", appearance = "shadow" }) => /* @__PURE__ */ jsx("div", {
-	className: cn("rounded-lg transition-transform hover:scale-[1.02] active:scale-[0.98]", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", variant === "primary" && "bg-bg-base", variant === "secondary" && "bg-bg-mute"),
+	className: cn("rounded-xl transition-transform hover:scale-[1.02] active:scale-[0.98]", appearance === "shadow" && "shadow-sm", appearance === "bordered" && "border border-border-mute", width === "full" && "w-full", width === "fit" && "w-fit", variant === "primary" && "bg-bg-base", variant === "secondary" && "bg-bg-mute"),
 	children
 });
 //#endregion

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

@@ -2,21 +2,20 @@
 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 { useCallback, useEffect, useRef, useState } from "react";
 //#region src/components/form/autocomplete/autocomplete.tsx
 const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
-	const [internalValue, setInternalValue] = useState(defaultValue || []);
-	const isControlled = value !== void 0;
-	const currentValue = isControlled ? value : internalValue;
+	const [currentValue, handleChange] = useControllableState({
+		value,
+		defaultValue: defaultValue || [],
+		onChange
+	});
 	const ref = useRef(null);
 	const [open, setOpen] = useState(false);
 	const [text, setText] = useState("");
 	const [selectIndex, setSelectIndex] = useState();
-	const handleChange = useCallback((newValue) => {
-		if (!isControlled) setInternalValue(newValue);
-		onChange?.(newValue);
-	}, [isControlled, onChange]);
 	const filteredOptions = options.filter((option) => option.label.includes(text));
 	const reset = useCallback(() => {
 		setText("");
@@ -34,7 +33,7 @@ const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequir
 		};
 	}, [reset]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative w-full rounded-lg 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 has-disabled:has-hover:hover:bg-bg-mute"),
+		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 has-disabled:has-hover:hover:bg-bg-mute"),
 		ref,
 		children: [
 			name ? currentValue.map((selectedValue) => /* @__PURE__ */ jsx("input", {
@@ -143,7 +142,7 @@ const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequir
 			/* @__PURE__ */ jsx("div", {
 				className: "relative w-full",
 				children: open && /* @__PURE__ */ jsx("div", {
-					className: "absolute top-1 z-10 w-full rounded-lg border border-border-mute bg-bg-base shadow-md",
+					className: "absolute top-1 z-10 w-full rounded-xl border border-border-mute bg-bg-base shadow-md",
 					role: "presentation",
 					children: /* @__PURE__ */ jsxs("ul", {
 						className: "max-h-96 py-2",

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

@@ -22,7 +22,7 @@ const CheckboxCard = ({ labelId, name, isDisabled, isInvalid = false, options, v
 			const disabled = isDisabled || option.disabled;
 			const optionId = `${groupId}-${option.value}`;
 			return /* @__PURE__ */ jsxs("label", {
-				className: cn("flex w-full min-w-0 rounded-lg 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-border-info bg-bg-subtle", isInvalid ? "border-border-error" : "border-border-mute hover:bg-bg-mute", disabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
+				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-border-info bg-bg-subtle", isInvalid ? "border-border-error" : "border-border-mute hover:bg-bg-mute", disabled && "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.mjs

@@ -1,18 +1,19 @@
 "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, useState } from "react";
+import { createContext, use } from "react";
 //#region src/components/form/checkbox-group/checkbox-group.tsx
 const CheckboxGroupContext = createContext(void 0);
 const useCheckboxGroupContext = () => use(CheckboxGroupContext);
 const Root = ({ children, describedbyId, defaultValue, isDisabled = false, isInvalid = false, isRequired = false, labelId, name, onChange, value }) => {
-	const isControlled = value !== void 0;
-	const [internalValue, setInternalValue] = useState(defaultValue ?? []);
-	const currentValue = isControlled ? value : internalValue;
+	const [currentValue, setCurrentValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange
+	});
 	const toggleValue = (targetValue) => {
-		const nextValue = currentValue.includes(targetValue) ? currentValue.filter((item) => item !== targetValue) : [...currentValue, targetValue];
-		if (!isControlled) setInternalValue(nextValue);
-		onChange?.(nextValue);
+		setCurrentValue(currentValue.includes(targetValue) ? currentValue.filter((item) => item !== targetValue) : [...currentValue, targetValue]);
 	};
 	return /* @__PURE__ */ jsx("fieldset", {
 		"aria-describedby": describedbyId,

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

@@ -100,7 +100,7 @@ const ItemList = ({ showWebkitRelativePath, clearable }) => {
 			const onDelete = () => onFileDelete(id);
 			const sizeInKB = (file.size / 1024).toFixed(2);
 			return /* @__PURE__ */ jsxs("li", {
-				className: "flex items-center justify-between rounded-lg border border-border-base bg-bg-base px-3 py-2",
+				className: "flex items-center justify-between rounded-xl border border-border-base bg-bg-base px-3 py-2",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-1",
 					children: [/* @__PURE__ */ jsx("span", {

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

@@ -23,7 +23,7 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 		onChange?.(newValue);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex h-12 w-full items-center justify-between gap-2 rounded-lg 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 has-disabled:has-hover: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", "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 has-disabled:has-hover:hover:bg-bg-mute"),
 		children: [/* @__PURE__ */ jsx("input", {
 			"aria-describedby": describedbyId,
 			"aria-invalid": isInvalid,
@@ -68,7 +68,7 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 			"aria-hidden": "true",
 			className: "absolute right-0 flex h-full flex-col",
 			children: [/* @__PURE__ */ jsxs("button", {
-				className: cn("flex w-6 grow items-center justify-center rounded-tr-lg border-border-base border-b border-l bg-bg-mute", "disabled:cursor-not-allowed"),
+				className: cn("flex w-6 grow items-center justify-center rounded-tr-xl border-border-base border-b border-l bg-bg-mute", "disabled:cursor-not-allowed"),
 				disabled: isDisabled,
 				onClick: () => {
 					const newValue = between(toPrecision(cast(displayValue, precision) + step, precision), min, max);
@@ -82,7 +82,7 @@ const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequire
 					children: "増やす"
 				}), /* @__PURE__ */ jsx(PlusIcon, { size: "sm" })]
 			}), /* @__PURE__ */ jsxs("button", {
-				className: cn("flex w-6 grow items-center justify-center rounded-br-lg border-border-base border-l bg-bg-mute", "disabled:cursor-not-allowed"),
+				className: cn("flex w-6 grow items-center justify-center rounded-br-xl border-border-base border-l bg-bg-mute", "disabled:cursor-not-allowed"),
 				disabled: isDisabled,
 				onClick: () => {
 					const newValue = between(toPrecision(cast(displayValue, precision) - step, precision), min, max);

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

@@ -1,11 +1,11 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { ViewIcon, ViewOffIcon } from "../../icons/lucide.mjs";
+import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 //#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 [isVisible, setIsVisible] = useState(false);
+	const { isOpen: isVisible, toggle: toggleVisible } = useDisclosure();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative w-full",
 		children: [/* @__PURE__ */ jsx("input", {
@@ -13,7 +13,7 @@ const PasswordInput = ({ id, name, describedbyId, isInvalid, isDisabled, isRequi
 			"aria-invalid": isInvalid,
 			"aria-required": isRequired,
 			autoComplete,
-			className: cn("w-full rounded-lg 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", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"),
 			defaultValue,
 			disabled: isDisabled,
 			id,
@@ -27,9 +27,7 @@ const PasswordInput = ({ id, name, describedbyId, isInvalid, isDisabled, isRequi
 			"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,
-			onClick: () => {
-				setIsVisible((current) => !current);
-			},
+			onClick: toggleVisible,
 			type: "button",
 			children: isVisible ? /* @__PURE__ */ jsx(ViewOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx(ViewIcon, { size: "sm" })
 		})]

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

@@ -36,7 +36,7 @@ const RadioCard = ({ labelId, name, isDisabled, isInvalid = false, options, valu
 			return /* @__PURE__ */ jsxs("button", {
 				"aria-describedby": option.description ? `${optionId}-description` : void 0,
 				"aria-pressed": checked,
-				className: cn("flex w-full min-w-0 rounded-lg border bg-bg-base p-4 text-left transition-colors", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", checked && "border-border-info bg-bg-subtle", isInvalid ? "border-border-error" : "border-border-mute hover:bg-bg-mute", disabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
+				className: cn("flex w-full min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", checked && "border-border-info bg-bg-subtle", isInvalid ? "border-border-error" : "border-border-mute hover:bg-bg-mute", disabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
 				disabled,
 				id: optionId,
 				onClick: () => {

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

@@ -9,7 +9,7 @@ const Select = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, op
 			"aria-describedby": describedbyId,
 			"aria-invalid": isInvalid,
 			"aria-required": isRequired,
-			className: cn("w-full appearance-none rounded-lg 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"),
+			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,
 			id,

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

@@ -1,19 +1,17 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
 //#region src/components/form/slider/slider.tsx
 const Slider = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, value, defaultValue, onChange, step = 1, max = 100, min = 0 }) => {
-	const isControlled = value !== void 0;
-	const [internalValue, setInternalValue] = useState(defaultValue ?? value ?? min);
-	const currentValue = isControlled ? value : internalValue;
+	const [currentValue, handleChange] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? min,
+		onChange
+	});
 	const range = Math.max(max - min, 1);
 	const progress = (currentValue - min) / range * 100;
 	const style = { "--slider-progress": `${Math.min(Math.max(progress, 0), 100)}%` };
-	const handleChange = (newValue) => {
-		if (!isControlled) setInternalValue(newValue);
-		onChange?.(newValue);
-	};
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("relative flex h-8 w-full items-center", "before:absolute before:inset-x-0 before:h-2 before:rounded-full before:bg-bg-mute", "after:absolute after:left-0 after:h-2 after:rounded-full after:bg-primary-bg", "after:w-(--slider-progress)", isInvalid && "after:bg-bg-error", isDisabled && "opacity-50"),
 		style,
@@ -24,7 +22,6 @@ const Slider = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, va
 			"aria-valuemin": min,
 			"aria-valuenow": currentValue,
 			className: cn("relative z-10 h-8 w-full appearance-none bg-transparent", "focus:outline-none", "disabled:cursor-not-allowed", "[&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent", "[&::-webkit-slider-thumb]:mt-[-4px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-border-base [&::-webkit-slider-thumb]:bg-bg-base [&::-webkit-slider-thumb]:shadow-xs", "[&:focus-visible::-webkit-slider-thumb]:border-transparent [&:focus-visible::-webkit-slider-thumb]:ring-2 [&:focus-visible::-webkit-slider-thumb]:ring-border-info", "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent", "[&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-transparent", "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-border-base [&::-moz-range-thumb]:bg-bg-base [&::-moz-range-thumb]:shadow-xs", "[&:focus-visible::-moz-range-thumb]:border-transparent [&:focus-visible::-moz-range-thumb]:ring-2 [&:focus-visible::-moz-range-thumb]:ring-border-info", isInvalid && "[&::-moz-range-thumb]:border-border-error [&::-webkit-slider-thumb]:border-border-error [&:focus-visible::-moz-range-thumb]:ring-border-error [&:focus-visible::-webkit-slider-thumb]:ring-border-error"),
-			defaultValue: isControlled ? void 0 : defaultValue,
 			disabled: isDisabled,
 			id,
 			max,
@@ -36,7 +33,7 @@ const Slider = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, va
 			required: isRequired,
 			step,
 			type: "range",
-			value: isControlled ? value : void 0
+			value: currentValue
 		})
 	});
 };

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

@@ -6,7 +6,7 @@ const TextField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired,
 		"aria-describedby": describedbyId,
 		"aria-invalid": isInvalid,
 		"aria-required": isRequired,
-		className: cn("w-full rounded-lg border border-border-base bg-bg-base px-3 py-2", "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", "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,
 		id,

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

@@ -15,7 +15,7 @@ const Textarea = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired,
 		"aria-describedby": describedbyId,
 		"aria-invalid": isInvalid,
 		"aria-required": isRequired,
-		className: cn("w-full resize-none rounded-lg border border-border-base bg-bg-base px-3 py-2", "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", fullHeight && "h-full"),
+		className: cn("w-full resize-none rounded-xl border border-border-base bg-bg-base px-3 py-2", "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", fullHeight && "h-full"),
 		defaultValue,
 		disabled: isDisabled,
 		id,

package/dist/components/navigation/tabs/tabs.mjs

@@ -88,7 +88,7 @@ const Tab = ({ id, children }) => {
 		tabIndex: activeIndex === index ? 0 : -1,
 		children: [selectedId === id && /* @__PURE__ */ jsx(motion.div, {
 			className: "absolute right-0 -bottom-0.5 left-0 h-1 bg-primary-border",
-			layoutId: "underline"
+			layoutId: `${rootId}-underline`
 		}), children]
 	});
 };

package/dist/components/overlays/modal/modal.mjs

@@ -140,7 +140,7 @@ const Modal = ({ ref, type = "center", defaultOpen, isOpen, onClose, children })
 	]);
 	return /* @__PURE__ */ jsx(motion.dialog, {
 		animate: realDialogOpen ? "open" : "closed",
-		className: cn("border-border-mute bg-bg-base shadow-md backdrop:bg-back-drop", type === "center" && "m-auto max-h-lg w-5/6 max-w-2xl rounded-lg dark:border", type === "bottom" && "mt-auto w-screen max-w-screen rounded-t-lg dark:border-t", type === "right" && "ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg dark:border-l", type === "left" && "mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg dark:border-r"),
+		className: cn("border-border-mute bg-bg-base text-fg-base shadow-md backdrop:bg-back-drop", type === "center" && "m-auto max-h-lg w-5/6 max-w-2xl rounded-lg dark:border", type === "bottom" && "mt-auto w-screen max-w-screen rounded-t-lg dark:border-t", type === "right" && "ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg dark:border-l", type === "left" && "mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg dark:border-r"),
 		exit: "closed",
 		initial: "closed",
 		onClick: (e) => {

package/dist/components/overlays/popover/hooks.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { useClickAway } from "../../../hooks/click-away/index.mjs";
-import { createContext, use, useMemo } from "react";
+import { createContext, use, useMemo, useRef } from "react";
 //#region src/components/overlays/popover/hooks.ts
 const PopoverContext = createContext(null);
 const PopoverProvider = PopoverContext;
@@ -33,7 +33,8 @@ const useOpenContext = () => {
 const usePopoverContent = () => {
 	const popover = usePopoverContext();
 	const isHover = popover.type === "tooltip";
-	const ref = useClickAway((event) => {
+	const ref = useRef(null);
+	useClickAway(ref, (event) => {
 		if (!popover.isOpen) return;
 		if (popover.triggerRef.current?.contains(event.target)) return;
 		popover.onClose();

package/dist/components/overlays/popover/popover.mjs

@@ -1,15 +1,16 @@
 "use client";
+import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
 import { usePortalRoot } from "../../providers/portal-root.mjs";
 import { PopoverProvider, useOpenContext, usePopoverContent, usePopoverTrigger } from "./hooks.mjs";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useState } from "react";
+import { useEffect, useId } from "react";
 import { AnimatePresence } from "motion/react";
 import * as motion$1 from "motion/react-client";
 import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, useFloating } from "@floating-ui/react";
 //#region src/components/overlays/popover/popover.tsx
 const Root = ({ children, type = "menu", placement = "bottom-start", flipDisabled = false }) => {
 	const id = useId();
-	const [isOpen, setIsOpen] = useState(false);
+	const { isOpen, open, close, toggle } = useDisclosure();
 	const { refs, floatingStyles, context, placement: computedPlacement } = useFloating({
 		strategy: "fixed",
 		placement,
@@ -21,32 +22,23 @@ const Root = ({ children, type = "menu", placement = "bottom-start", flipDisable
 		})],
 		transform: false
 	});
-	const toggleOpen = useCallback(() => {
-		setIsOpen((prev) => !prev);
-	}, []);
-	const onOpen = useCallback(() => {
-		setIsOpen(true);
-	}, []);
-	const onClose = useCallback(() => {
-		setIsOpen(false);
-	}, []);
 	useEffect(() => {
 		const handleKeyDown = (e) => {
-			if (e.key === "Escape") onClose();
+			if (e.key === "Escape") close();
 		};
 		window.addEventListener("keydown", handleKeyDown);
 		return () => {
 			window.removeEventListener("keydown", handleKeyDown);
 		};
-	}, [onClose]);
+	}, [close]);
 	return /* @__PURE__ */ jsx(PopoverProvider, {
 		value: {
 			rootId: id,
 			type,
 			isOpen,
-			toggleOpen,
-			onOpen,
-			onClose,
+			toggleOpen: toggle,
+			onOpen: open,
+			onClose: close,
 			context,
 			placement: computedPlacement,
 			triggerRef: refs.domReference,

package/dist/hooks/breakpoint/index.d.mts

@@ -0,0 +1,5 @@
+//#region src/hooks/breakpoint/index.d.ts
+type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+declare const useBreakpoint: (breakpoint: Breakpoint) => boolean;
+//#endregion
+export { useBreakpoint };

package/dist/hooks/breakpoint/index.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/hooks/breakpoint/index.ts
+const BREAKPOINTS = {
+	sm: "40rem",
+	md: "48rem",
+	lg: "64rem",
+	xl: "80rem",
+	"2xl": "96rem"
+};
+const useBreakpoint = (breakpoint) => {
+	const query = `(min-width: ${BREAKPOINTS[breakpoint]})`;
+	const subscribe = useCallback((cb) => {
+		const mediaQueryList = window.matchMedia(query);
+		mediaQueryList.addEventListener("change", cb);
+		return () => {
+			mediaQueryList.removeEventListener("change", cb);
+		};
+	}, [query]);
+	const getSnapshot = () => window.matchMedia(query).matches;
+	return useSyncExternalStore(subscribe, getSnapshot, () => false);
+};
+//#endregion
+export { useBreakpoint };

package/dist/hooks/click-away/index.d.mts

@@ -1,6 +1,6 @@
 import { RefObject } from "react";
 
 //#region src/hooks/click-away/index.d.ts
-declare const useClickAway: <T extends Element = HTMLElement>(callback: (e: Event) => void, enabled?: boolean) => RefObject<T | null>;
+declare const useClickAway: <T extends Element = HTMLElement>(ref: RefObject<T | null>, callback: (e: Event) => void, enabled?: boolean) => void;
 //#endregion
 export { useClickAway };

package/dist/hooks/click-away/index.mjs

@@ -1,8 +1,7 @@
 "use client";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 //#region src/hooks/click-away/index.ts
-const useClickAway = (callback, enabled = true) => {
-	const ref = useRef(null);
+const useClickAway = (ref, callback, enabled = true) => {
 	useEffect(() => {
 		if (!enabled) return;
 		const handler = (e) => {
@@ -15,8 +14,11 @@ const useClickAway = (callback, enabled = true) => {
 			document.removeEventListener("mousedown", handler);
 			document.removeEventListener("touchstart", handler);
 		};
-	}, [callback, enabled]);
-	return ref;
+	}, [
+		ref,
+		callback,
+		enabled
+	]);
 };
 //#endregion
 export { useClickAway };

package/dist/hooks/controllable-state/index.d.mts

@@ -0,0 +1,13 @@
+//#region src/hooks/controllable-state/index.d.ts
+type UseControllableStateProps<T> = {
+  value?: T;
+  defaultValue: T;
+  onChange?: (value: T) => void;
+};
+declare const useControllableState: <T>({
+  value,
+  defaultValue,
+  onChange
+}: UseControllableStateProps<T>) => [T, (next: T | ((prev: T) => T)) => void];
+//#endregion
+export { useControllableState };

package/dist/hooks/controllable-state/index.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+//#region src/hooks/controllable-state/index.ts
+const useControllableState = ({ value, defaultValue, onChange }) => {
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const currentValue = isControlled ? value : internalValue;
+	const currentValueRef = useRef(currentValue);
+	currentValueRef.current = currentValue;
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+	const isControlledRef = useRef(isControlled);
+	isControlledRef.current = isControlled;
+	return [currentValue, useCallback((next) => {
+		const nextValue = typeof next === "function" ? next(currentValueRef.current) : next;
+		if (!isControlledRef.current) setInternalValue(nextValue);
+		onChangeRef.current?.(nextValue);
+	}, [])];
+};
+//#endregion
+export { useControllableState };

package/dist/hooks/debounce/index.d.mts

@@ -0,0 +1,6 @@
+//#region src/hooks/debounce/index.d.ts
+type AnyFunction = (...args: any[]) => any;
+declare const useDebounce: <T>(value: T, delay: number) => T;
+declare const useDebouncedCallback: <T extends AnyFunction>(callback: T, delay: number) => (...args: Parameters<T>) => void;
+//#endregion
+export { useDebounce, useDebouncedCallback };

package/dist/hooks/debounce/index.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/hooks/debounce/index.ts
+const useDebounce = (value, delay) => {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [value, delay]);
+	return debouncedValue;
+};
+const useDebouncedCallback = (callback, delay) => {
+	const timerRef = useRef(void 0);
+	const callbackRef = useRef(callback);
+	useEffect(() => {
+		callbackRef.current = callback;
+	});
+	useEffect(() => {
+		return () => {
+			clearTimeout(timerRef.current);
+		};
+	}, []);
+	return useCallback((...args) => {
+		clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => {
+			callbackRef.current(...args);
+		}, delay);
+	}, [delay]);
+};
+//#endregion
+export { useDebounce, useDebouncedCallback };

package/dist/hooks/disclosure/index.d.mts

@@ -0,0 +1,10 @@
+//#region src/hooks/disclosure/index.d.ts
+type UseDisclosureReturn = {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+};
+declare const useDisclosure: (defaultOpen?: boolean) => UseDisclosureReturn;
+//#endregion
+export { useDisclosure };

package/dist/hooks/disclosure/index.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { useCallback, useState } from "react";
+//#region src/hooks/disclosure/index.ts
+const useDisclosure = (defaultOpen = false) => {
+	const [isOpen, setIsOpen] = useState(defaultOpen);
+	return {
+		isOpen,
+		open: useCallback(() => setIsOpen(true), []),
+		close: useCallback(() => setIsOpen(false), []),
+		toggle: useCallback(() => setIsOpen((prev) => !prev), [])
+	};
+};
+//#endregion
+export { useDisclosure };

package/dist/hooks/hover/index.d.mts

@@ -0,0 +1,12 @@
+//#region src/hooks/hover/index.d.ts
+type HoverProps = {
+  onPointerEnter: () => void;
+  onPointerLeave: () => void;
+};
+type UseHoverReturn = {
+  isHovered: boolean;
+  hoverProps: HoverProps;
+};
+declare const useHover: () => UseHoverReturn;
+//#endregion
+export { useHover };

package/dist/hooks/hover/index.mjs

@@ -0,0 +1,15 @@
+"use client";
+import { useCallback, useState } from "react";
+//#region src/hooks/hover/index.ts
+const useHover = () => {
+	const [isHovered, setIsHovered] = useState(false);
+	return {
+		isHovered,
+		hoverProps: {
+			onPointerEnter: useCallback(() => setIsHovered(true), []),
+			onPointerLeave: useCallback(() => setIsHovered(false), [])
+		}
+	};
+};
+//#endregion
+export { useHover };