@k8o/arte-odyssey 4.2.0 → 4.2.1

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

@@ -5,7 +5,7 @@ import { CloseIcon } from "../../icons/lucide.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 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;
@@ -36,141 +36,149 @@ const Autocomplete = ({ id, describedbyId, isInvalid, isDisabled, isRequired, op
 	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"),
 		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-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));
+										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;
@@ -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/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/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);
@@ -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);

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[];

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

@@ -3,7 +3,7 @@ import { cn } from "../../../helpers/cn.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 //#region src/components/form/radio-card/radio-card.tsx
-const RadioCard = ({ labelId, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
+const RadioCard = ({ labelId, name, isDisabled, isInvalid = false, options, value, defaultValue, onChange }) => {
 	const groupId = useId();
 	const buttonRefs = useRef([]);
 	const [internalValue, setInternalValue] = useState(defaultValue ?? options[0]?.value);
@@ -22,10 +22,14 @@ const RadioCard = ({ labelId, isDisabled, isInvalid = false, options, value, def
 		if (nextIndex >= options.length) return 0;
 		return nextIndex;
 	};
-	return /* @__PURE__ */ jsx("fieldset", {
+	return /* @__PURE__ */ jsxs("fieldset", {
 		"aria-labelledby": labelId,
 		className: cn("m-0 w-full min-w-0 border-0 p-0", "grid gap-3", isDisabled && "opacity-70"),
-		children: options.map((option, index) => {
+		children: [name ? /* @__PURE__ */ jsx("input", {
+			name,
+			type: "hidden",
+			value: currentValue ?? ""
+		}) : null, options.map((option, index) => {
 			const checked = currentValue === option.value;
 			const disabled = isDisabled || option.disabled;
 			const optionId = `${groupId}-${option.value}`;
@@ -79,7 +83,7 @@ const RadioCard = ({ labelId, isDisabled, isInvalid = false, options, value, def
 					})
 				]
 			}, option.value);
-		})
+		})]
 	});
 };
 //#endregion

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

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

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

@@ -2,7 +2,7 @@ import { cn } from "../../../helpers/cn.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/form/select/select.tsx
-const Select = ({ id, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
+const Select = ({ id, name, describedbyId, isInvalid, isDisabled, isRequired, options, value, defaultValue, onChange }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative h-fit w-full",
 		children: [/* @__PURE__ */ jsx("select", {
@@ -13,6 +13,7 @@ const Select = ({ id, describedbyId, isInvalid, isDisabled, isRequired, options,
 			defaultValue,
 			disabled: isDisabled,
 			id,
+			name,
 			onChange,
 			value,
 			children: options.map((option) => /* @__PURE__ */ jsx("option", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "k8o's react ui library",
   "keywords": [
     "components",
@@ -45,7 +45,7 @@
     "baseline-status": "1.1.1",
     "clsx": "2.1.1",
     "lucide-react": "0.577.0",
-    "motion": "12.36.0",
+    "motion": "12.37.0",
     "tailwind-merge": "3.5.0"
   },
   "devDependencies": {