@k8o/arte-odyssey 4.2.0 → 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.d.mts

@@ -4,6 +4,7 @@ import { FC } from "react";
 //#region src/components/form/autocomplete/autocomplete.d.ts
 type BaseProps = {
   id: string;
+  name?: string;
   describedbyId: string | undefined;
   isInvalid: boolean;
   isDisabled: boolean;

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, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
-	const [internalValue, setInternalValue] = useState(defaultValue || []);
-	const isControlled = value !== void 0;
-	const currentValue = isControlled ? value : internalValue;
+const Autocomplete = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
+	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,143 +33,151 @@ const Autocomplete = ({ id, describedbyId, isInvalid, isDisabled, isRequired, op
 		};
 	}, [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: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-h-12 items-center justify-between gap-2 px-3 py-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex w-full flex-wrap gap-1",
-				children: [currentValue.map((text) => {
-					const label = options.find((option) => option.value === text)?.label;
-					return /* @__PURE__ */ jsxs("div", {
-						className: "inline-flex items-center gap-2 rounded-full bg-bg-mute px-3 py-1 font-medium text-sm",
-						tabIndex: -1,
-						children: [label, /* @__PURE__ */ jsx(IconButton, {
-							label: "閉じる",
-							onClick: (e) => {
-								e.stopPropagation();
-								reset();
-								handleChange(currentValue.filter((v) => v !== text));
-							},
-							size: "sm",
-							children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
-						})]
-					}, text);
-				}), /* @__PURE__ */ jsx("input", {
-					"aria-autocomplete": "list",
-					"aria-controls": open ? `${id}_listbox` : void 0,
-					"aria-describedby": describedbyId,
-					"aria-expanded": open,
-					"aria-invalid": isInvalid,
-					"aria-required": isRequired,
-					autoComplete: "off",
-					className: cn("grow bg-transparent focus-visible:outline-hidden", "disabled:cursor-not-allowed"),
-					disabled: isDisabled,
-					id,
-					onBlur: (e) => {
-						if (e.relatedTarget?.id.startsWith(`${id}_option_`)) return;
-						setOpen(false);
-					},
-					onChange: (e) => {
-						setOpen(true);
-						setText(e.target.value);
-						setSelectIndex(void 0);
-					},
-					onClick: () => {
-						if (open && text.length === 0) {
+		children: [
+			name ? currentValue.map((selectedValue) => /* @__PURE__ */ jsx("input", {
+				name,
+				type: "hidden",
+				value: selectedValue
+			}, selectedValue)) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-12 items-center justify-between gap-2 px-3 py-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex w-full flex-wrap gap-1",
+					children: [currentValue.map((text) => {
+						const label = options.find((option) => option.value === text)?.label;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "inline-flex items-center gap-2 rounded-full bg-bg-mute px-3 py-1 font-medium text-sm",
+							tabIndex: -1,
+							children: [label, /* @__PURE__ */ jsx(IconButton, {
+								label: "閉じる",
+								onClick: (e) => {
+									e.stopPropagation();
+									reset();
+									handleChange(currentValue.filter((v) => v !== text));
+								},
+								size: "sm",
+								children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+							})]
+						}, text);
+					}), /* @__PURE__ */ jsx("input", {
+						"aria-autocomplete": "list",
+						"aria-controls": open ? `${id}_listbox` : void 0,
+						"aria-describedby": describedbyId,
+						"aria-expanded": open,
+						"aria-invalid": isInvalid,
+						"aria-required": isRequired,
+						autoComplete: "off",
+						className: cn("grow bg-transparent focus-visible:outline-hidden", "disabled:cursor-not-allowed"),
+						disabled: isDisabled,
+						id,
+						onBlur: (e) => {
+							if (e.relatedTarget?.id.startsWith(`${id}_option_`)) return;
 							setOpen(false);
-							return;
-						}
-						setOpen(true);
-						setSelectIndex(void 0);
-					},
-					onKeyDown: (e) => {
-						if (e.key === "Backspace" && text.length === 0) {
-							reset();
-							handleChange(currentValue.slice(0, -1));
-							return;
-						}
-						if (e.key === "ArrowDown") {
+						},
+						onChange: (e) => {
 							setOpen(true);
-							setSelectIndex((prev) => {
-								if (prev === void 0) return 0;
-								return Math.min(prev + 1, options.length - 1);
-							});
-							return;
-						}
-						if (e.key === "ArrowUp") {
+							setText(e.target.value);
+							setSelectIndex(void 0);
+						},
+						onClick: () => {
+							if (open && text.length === 0) {
+								setOpen(false);
+								return;
+							}
 							setOpen(true);
-							setSelectIndex((prev) => {
-								if (prev === void 0) return 0;
-								return Math.max(prev - 1, 0);
-							});
-							return;
-						}
-						if (e.key === "Enter" && selectIndex !== void 0 && selectIndex >= 0) {
-							const selected = filteredOptions[selectIndex];
-							if (!selected) return;
-							if (currentValue.includes(selected.value)) {
-								handleChange(currentValue.filter((v) => v !== selected.value));
+							setSelectIndex(void 0);
+						},
+						onKeyDown: (e) => {
+							if (e.key === "Backspace" && text.length === 0) {
 								reset();
+								handleChange(currentValue.slice(0, -1));
 								return;
 							}
-							handleChange([...currentValue, selected.value]);
-							reset();
-							return;
-						}
-					},
-					placeholder: "入力して絞り込めます",
-					role: "combobox",
-					type: "text",
-					value: text
-				})]
-			}), currentValue.length > 0 && /* @__PURE__ */ jsx(IconButton, {
-				label: "すべて閉じる",
-				onClick: (e) => {
-					e.stopPropagation();
-					handleChange([]);
-				},
-				size: "sm",
-				children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
-			})]
-		}), /* @__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",
-				role: "presentation",
-				children: /* @__PURE__ */ jsxs("ul", {
-					className: "max-h-96 py-2",
-					id: `${id}_listbox`,
-					children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", {
-						className: "px-3 py-2 text-fg-mute",
-						children: "該当なし"
-					}), filteredOptions.map((option, idx) => {
-						const selected = currentValue.includes(option.value);
-						return /* @__PURE__ */ jsx("li", {
-							className: cn("cursor-pointer px-3 py-2", selected && "bg-bg-mute", selectIndex === idx && !selected && "bg-bg-emphasize", selectIndex === idx && selected && "bg-bg-mute"),
-							id: `${id}_option_${option.value}`,
-							onClick: (e) => {
-								e.stopPropagation();
-								reset();
-								if (selected) {
-									handleChange(currentValue.filter((v) => v !== option.value));
+							if (e.key === "ArrowDown") {
+								setOpen(true);
+								setSelectIndex((prev) => {
+									if (prev === void 0) return 0;
+									return Math.min(prev + 1, options.length - 1);
+								});
+								return;
+							}
+							if (e.key === "ArrowUp") {
+								setOpen(true);
+								setSelectIndex((prev) => {
+									if (prev === void 0) return 0;
+									return Math.max(prev - 1, 0);
+								});
+								return;
+							}
+							if (e.key === "Enter" && selectIndex !== void 0 && selectIndex >= 0) {
+								const selected = filteredOptions[selectIndex];
+								if (!selected) return;
+								if (currentValue.includes(selected.value)) {
+									handleChange(currentValue.filter((v) => v !== selected.value));
+									reset();
 									return;
 								}
-								handleChange([...currentValue, option.value]);
-							},
-							onKeyDown: (e) => {
-								e.preventDefault();
-							},
-							onMouseEnter: () => {
-								setSelectIndex(idx);
-							},
-							tabIndex: -1,
-							children: option.label
-						}, option.value);
+								handleChange([...currentValue, selected.value]);
+								reset();
+								return;
+							}
+						},
+						placeholder: "入力して絞り込めます",
+						role: "combobox",
+						type: "text",
+						value: text
 					})]
+				}), currentValue.length > 0 && /* @__PURE__ */ jsx(IconButton, {
+					label: "すべて閉じる",
+					onClick: (e) => {
+						e.stopPropagation();
+						handleChange([]);
+					},
+					size: "sm",
+					children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative w-full",
+				children: open && /* @__PURE__ */ jsx("div", {
+					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",
+						id: `${id}_listbox`,
+						children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", {
+							className: "px-3 py-2 text-fg-mute",
+							children: "該当なし"
+						}), filteredOptions.map((option, idx) => {
+							const selected = currentValue.includes(option.value);
+							return /* @__PURE__ */ jsx("li", {
+								className: cn("cursor-pointer px-3 py-2", selected && "bg-bg-mute", selectIndex === idx && !selected && "bg-bg-emphasize", selectIndex === idx && selected && "bg-bg-mute"),
+								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);
+						})]
+					})
 				})
 			})
-		})]
+		]
 	});
 };
 //#endregion

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

@@ -2,6 +2,7 @@ import { ChangeEventHandler, FC } from "react";
 
 //#region src/components/form/checkbox/checkbox.d.ts
 type BaseProps = {
+  name?: string;
   itemValue?: string;
   isDisabled?: boolean;
   label: string;

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

@@ -5,7 +5,7 @@ import { useCheckboxGroupContext } from "../checkbox-group/checkbox-group.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/form/checkbox/checkbox.tsx
-const Checkbox = ({ itemValue, isDisabled = false, label, value, defaultChecked, onChange }) => {
+const Checkbox = ({ name, itemValue, isDisabled = false, label, value, defaultChecked, onChange }) => {
 	const groupContext = useCheckboxGroupContext();
 	const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
 	const groupItemValue = itemValue ?? "";
@@ -25,7 +25,7 @@ const Checkbox = ({ itemValue, isDisabled = false, label, value, defaultChecked,
 				className: "peer sr-only",
 				defaultChecked: groupContext || isControlled ? void 0 : defaultChecked,
 				disabled: isDisabledResolved,
-				name: groupContext?.name,
+				name: groupContext?.name ?? name,
 				onChange: (event) => {
 					if (groupContext) {
 						groupContext.toggleValue(groupItemValue);

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

@@ -10,6 +10,7 @@ type CheckboxCardOption = Readonly<{
 }>;
 type BaseProps = {
   labelId?: string;
+  name?: string;
   isDisabled: boolean;
   isInvalid?: boolean;
   options: readonly CheckboxCardOption[];

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

@@ -4,7 +4,7 @@ import { CheckIcon } from "../../icons/lucide.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
 //#region src/components/form/checkbox-card/checkbox-card.tsx
-const CheckboxCard = ({ labelId, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
+const CheckboxCard = ({ labelId, name, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
 	const groupId = useId();
 	const [internalValue, setInternalValue] = useState(defaultValue ?? []);
 	const isControlled = value !== void 0;
@@ -22,7 +22,7 @@ const CheckboxCard = ({ labelId, isDisabled, isInvalid = false, options, value,
 			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", {
@@ -30,6 +30,7 @@ const CheckboxCard = ({ labelId, isDisabled, isInvalid = false, options, value,
 						checked,
 						className: "sr-only",
 						disabled,
+						name,
 						onChange: (event) => {
 							handleToggle(option.value, event.target.checked);
 						},

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/checkbox-group/index.d.mts

@@ -39,6 +39,7 @@ declare const CheckboxGroup: react.FC<{
   })>;
 } & {
   Item: react.FC<{
+    name?: string;
     itemValue?: string;
     isDisabled?: boolean;
     label: string;

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.d.mts

@@ -3,6 +3,7 @@ import { FC } from "react";
 //#region src/components/form/number-field/number-field.d.ts
 type BaseProps = {
   id?: string;
+  name?: string;
   describedbyId?: string | undefined;
   isInvalid: boolean;
   isDisabled: boolean;

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

@@ -7,7 +7,7 @@ import { cast } from "../../../helpers/number/cast.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/form/number-field/number-field.tsx
-const NumberField = ({ id, describedbyId, isInvalid, isDisabled, isRequired, value, defaultValue, onChange, step = 1, precision = 0, max = 9007199254740991, min = -9007199254740991, placeholder }) => {
+const NumberField = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, value, defaultValue, onChange, step = 1, precision = 0, max = 9007199254740991, min = -9007199254740991, placeholder }) => {
 	const isControlled = value !== void 0;
 	const initialValue = defaultValue ?? value ?? 0;
 	const [internalValue, setInternalValue] = useState(initialValue);
@@ -23,7 +23,7 @@ const NumberField = ({ id, describedbyId, isInvalid, isDisabled, isRequired, val
 		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,
@@ -37,6 +37,7 @@ const NumberField = ({ id, describedbyId, isInvalid, isDisabled, isRequired, val
 			disabled: isDisabled,
 			id,
 			inputMode: "decimal",
+			name,
 			onBlur: () => {
 				const newValue = between(cast(displayValue, precision), min, max);
 				handleChange(newValue);
@@ -67,7 +68,7 @@ const NumberField = ({ id, describedbyId, isInvalid, isDisabled, isRequired, val
 			"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);
@@ -81,7 +82,7 @@ const NumberField = ({ id, describedbyId, isInvalid, isDisabled, isRequired, val
 					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/radio.d.mts

@@ -4,6 +4,7 @@ import { ChangeEventHandler, FC } from "react";
 //#region src/components/form/radio/radio.d.ts
 type BaseProps = {
   labelId: string;
+  name?: string;
   isDisabled: boolean;
   options: readonly Option[];
 };

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

@@ -3,7 +3,7 @@ import { cn } from "../../../helpers/cn.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/form/radio/radio.tsx
-const Radio = ({ labelId, isDisabled, value, defaultValue, onChange, options }) => {
+const Radio = ({ labelId, name, isDisabled, value, defaultValue, onChange, options }) => {
 	const [internalValue, setInternalValue] = useState(defaultValue);
 	const isControlled = value !== void 0;
 	const selectedValue = isControlled ? value : internalValue;
@@ -23,7 +23,7 @@ const Radio = ({ labelId, isDisabled, value, defaultValue, onChange, options })
 					className: "peer sr-only",
 					defaultChecked: isControlled ? void 0 : defaultValue === option.value,
 					disabled: isDisabled,
-					name: labelId,
+					name: name ?? labelId,
 					onChange: () => {
 						selectValue(option.value);
 					},

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

@@ -10,6 +10,7 @@ type RadioCardOption = Readonly<{
 }>;
 type BaseProps = {
   labelId: string;
+  name?: string;
   isDisabled: boolean;
   isInvalid?: boolean;
   options: readonly RadioCardOption[];