@k8o/arte-odyssey 9.1.0 → 10.0.0

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

@@ -2,18 +2,17 @@
 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, useSetToast] = createSafeContext("useToast must be used within a ToastProvider");
 const useToast = () => {
 	const setToasts = useSetToast();
 	return {
-		onOpen: useCallback((status, message) => {
+		onOpen: useCallback((tone, message) => {
 			setToasts((prev) => {
 				return [...prev, {
 					id: crypto.randomUUID(),
-					status,
+					tone,
 					message
-				}].slice(-MAX_TOAST_COUNT);
+				}].slice(-5);
 			});
 		}, [setToasts]),
 		onClose: useCallback((id) => {

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

@@ -67,7 +67,7 @@ const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
 					children: /* @__PURE__ */ jsx("div", {
 						"aria-atomic": true,
 						className: "shadow-lg",
-						role: toast.status === "error" || toast.status === "warning" ? "alert" : "status",
+						role: toast.tone === "error" || toast.tone === "warning" ? "alert" : "status",
 						children: /* @__PURE__ */ jsx(Toast, { ...toast })
 					})
 				}, toast.id))

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

@@ -4,7 +4,7 @@ import { FC } from "react";
 //#region src/components/feedback/toast/toast.d.ts
 type ToastProps = {
   id: string;
-  status: Status;
+  tone: Status;
   message: string;
 };
 declare const Toast: FC<ToastProps>;

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

@@ -6,14 +6,14 @@ import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/toast/toast.tsx
 const DELAY_MS = 5e3;
-const Toast = ({ id, status, message }) => {
+const Toast = ({ id, tone, message }) => {
 	const { onClose } = useToast();
 	useTimeout(useCallback(() => {
 		onClose(id);
 	}, [id, onClose]), DELAY_MS);
 	return /* @__PURE__ */ jsx(Alert, {
 		message,
-		status
+		tone
 	});
 };
 //#endregion

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

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
@@ -63,7 +64,7 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 		refs.setReference(node);
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative rounded-xl border border-border-base bg-bg-base inline-full", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info", "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
+		className: cn("relative rounded-xl border border-border-base bg-bg-base inline-full", FOCUS_RING_WITHIN, "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
 		ref: setReferenceRef,
 		children: [
 			name !== void 0 && name !== "" ? currentValue.map((selectedValue) => /* @__PURE__ */ jsx("input", {
@@ -181,14 +182,18 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 					"aria-busy": isPending || void 0,
 					className: cn("max-h-96 py-2 transition-opacity vertical:max-h-none vertical:max-w-96", isPending && "opacity-60"),
 					id: `${id}_listbox`,
+					role: "listbox",
 					children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", {
 						className: "text-fg-mute px-3 py-2",
+						role: "presentation",
 						children: "該当なし"
 					}), filteredOptions.map((option, idx) => {
 						const selected = currentValue.includes(option.value);
 						return /* @__PURE__ */ jsx("li", {
+							"aria-selected": selected,
 							className: cn("cursor-pointer px-3 py-2 transition-colors", selected && "bg-primary-bg-subtle text-primary-fg", selectIndex === idx && !selected && "bg-bg-subtle", selectIndex === idx && selected && "bg-primary-bg-mute text-primary-fg"),
 							id: `${id}_option_${option.value}`,
+							role: "option",
 							onClick: (e) => {
 								e.stopPropagation();
 								reset();

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

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, FC, InputHTMLAttributes } from "react";
+import { ChangeEvent, FC, InputHTMLAttributes } from "react";
 
 //#region src/components/form/checkbox/checkbox.d.ts
 type BaseProps = {
@@ -7,13 +7,13 @@ type BaseProps = {
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style' | 'value' | 'onChange' | 'defaultChecked' | 'checked' | 'children'>;
 type ControlledProps = {
   value: boolean;
-  onChange: ChangeEventHandler<HTMLInputElement>;
+  onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
   defaultChecked?: never;
 };
 type UncontrolledProps = {
   defaultChecked?: boolean;
   value?: never;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
 declare const Checkbox: FC<Props>;

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

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING_PEER } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { CheckIcon } from "../../icons/lucide.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
@@ -18,9 +19,9 @@ const Checkbox = ({ name, itemValue, disabled = false, label, value, defaultChec
 	const isControlled = value !== void 0;
 	const disabledResolved = disabled || groupContext?.disabled === true || pending;
 	const checked = groupContext ? groupContext.currentValue.includes(groupItemValue) : internalChecked;
-	const setChecked = (nextChecked) => {
+	const setChecked = (nextChecked, event) => {
 		setInternalChecked(nextChecked);
-		onChange?.({ target: { checked: nextChecked } });
+		onChange?.(nextChecked, event);
 	};
 	return /* @__PURE__ */ jsxs("label", {
 		className: cn("inline-flex items-center gap-2 text-left", disabledResolved ? "cursor-not-allowed text-fg-mute" : "cursor-pointer"),
@@ -36,14 +37,14 @@ const Checkbox = ({ name, itemValue, disabled = false, label, value, defaultChec
 						groupContext.toggleValue(groupItemValue);
 						return;
 					}
-					setChecked(event.target.checked);
+					setChecked(event.target.checked, event);
 				},
 				type: "checkbox",
 				value: groupContext ? groupItemValue : void 0
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("inline-flex size-5 items-center justify-center rounded-md border-2 transition-colors", "peer-focus-visible:border-transparent peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info", disabledResolved && "border-border-mute bg-bg-mute", checked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base"),
+				className: cn("inline-flex size-5 items-center justify-center rounded-md border-2 transition-colors", FOCUS_RING_PEER, disabledResolved && "border-border-mute bg-bg-mute", checked ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base"),
 				children: checked ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : null
 			}),
 			/* @__PURE__ */ jsx("span", {

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

@@ -30,6 +30,7 @@ const CheckboxCard = ({ name, disabled = false, invalid = false, options, value,
 				children: [
 					/* @__PURE__ */ jsx("input", {
 						"aria-describedby": hasDescription ? `${optionId}-description` : void 0,
+						"aria-labelledby": `${optionId}-label`,
 						checked,
 						className: "sr-only",
 						disabled: optionDisabled,
@@ -49,6 +50,7 @@ const CheckboxCard = ({ name, disabled = false, invalid = false, options, value,
 						className: "flex min-w-0 flex-1 flex-col gap-1",
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "text-fg-base font-medium",
+							id: `${optionId}-label`,
 							children: option.label
 						}), hasDescription ? /* @__PURE__ */ jsx("span", {
 							className: "text-fg-mute text-sm",

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

@@ -29,6 +29,7 @@ const Root = ({ children, defaultValue, disabled = false, invalid = false, requi
 	return /* @__PURE__ */ jsx("fieldset", {
 		...rest,
 		"aria-invalid": invalid,
+		"aria-required": required,
 		className: cn("flex flex-col gap-2", disabled && "cursor-not-allowed"),
 		children: /* @__PURE__ */ jsx(CheckboxGroupContext, {
 			value: contextValue,

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

@@ -1,12 +1,10 @@
-import * as _$react from "react";
-
 //#region src/components/form/checkbox-group/index.d.ts
-declare const CheckboxGroup: _$react.FC<{
+declare const CheckboxGroup: import("react").FC<{
   invalid?: boolean;
   required?: boolean;
   name: string;
-} & Omit<_$react.FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange" | "className" | "style" | "name"> & {
-  children?: _$react.ReactNode | undefined;
+} & Omit<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, "className" | "style" | "name" | "defaultValue" | "onChange"> & {
+  children?: import("react").ReactNode | undefined;
 } & ({
   value: string[];
   onChange: (value: string[]) => void;
@@ -16,12 +14,12 @@ declare const CheckboxGroup: _$react.FC<{
   value?: never;
   onChange?: (value: string[]) => void;
 })> & {
-  Root: _$react.FC<{
+  Root: import("react").FC<{
     invalid?: boolean;
     required?: boolean;
     name: string;
-  } & Omit<_$react.FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange" | "className" | "style" | "name"> & {
-    children?: _$react.ReactNode | undefined;
+  } & Omit<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, "className" | "style" | "name" | "defaultValue" | "onChange"> & {
+    children?: import("react").ReactNode | undefined;
   } & ({
     value: string[];
     onChange: (value: string[]) => void;
@@ -32,17 +30,17 @@ declare const CheckboxGroup: _$react.FC<{
     onChange?: (value: string[]) => void;
   })>;
 } & {
-  Item: _$react.FC<{
+  Item: import("react").FC<{
     itemValue?: string;
     label: string;
-  } & Omit<_$react.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "className" | "style" | "checked" | "defaultChecked" | "children"> & ({
+  } & Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "className" | "style" | "checked" | "defaultChecked" | "children" | "onChange"> & ({
     value: boolean;
-    onChange: _$react.ChangeEventHandler<HTMLInputElement>;
+    onChange: (checked: boolean, event: import("react").ChangeEvent<HTMLInputElement>) => void;
     defaultChecked?: never;
   } | {
     defaultChecked?: boolean;
     value?: never;
-    onChange?: _$react.ChangeEventHandler<HTMLInputElement>;
+    onChange?: (checked: boolean, event: import("react").ChangeEvent<HTMLInputElement>) => void;
   })>;
 };
 //#endregion

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

@@ -1,12 +1,11 @@
-import { ChangeEventHandler, FC, InputHTMLAttributes, PropsWithChildren, ReactElement } from "react";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ChangeEvent, FC, InputHTMLAttributes, PropsWithChildren, ReactElement } from "react";
 
 //#region src/components/form/file-field/file-field.d.ts
 type RootProps = PropsWithChildren<{
   invalid?: boolean;
   maxFiles?: number;
   defaultValue?: File[];
-  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onChange?: (files: FileList | null, event?: ChangeEvent<HTMLInputElement>) => void;
   webkitDirectory?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'style' | 'onChange' | 'defaultValue' | 'value' | 'children'>>;
 declare const FileField: {
@@ -20,7 +19,7 @@ declare const FileField: {
     onChange,
     webkitDirectory,
     ...rest
-  }: RootProps) => _$react_jsx_runtime0.JSX.Element;
+  }: RootProps) => import("react/jsx-runtime").JSX.Element;
   readonly Trigger: FC<{
     renderItem: (props: {
       onClick: () => void;

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

@@ -14,7 +14,7 @@ const Root = ({ children, disabled = false, invalid = false, required = false, m
 	const disabledResolved = disabled || pending;
 	const [acceptedFiles, setAcceptedFiles] = useState([]);
 	const onFilesChange = useCallback((event) => {
-		onChange?.(event);
+		onChange?.(event.target.files, event);
 		const newFiles = Array.from(event.target.files ?? []).map((file) => ({
 			file,
 			id: crypto.randomUUID()
@@ -34,12 +34,7 @@ const Root = ({ children, disabled = false, invalid = false, required = false, m
 			const dataTransfer = new DataTransfer();
 			for (const { file } of updatedFiles) dataTransfer.items.add(file);
 			inputRef.current.files = dataTransfer.files;
-			const event = new Event("change", { bubbles: true });
-			Object.defineProperty(event, "target", {
-				writable: false,
-				value: inputRef.current
-			});
-			onChange(event);
+			onChange(dataTransfer.files);
 		}
 	}, [acceptedFiles, onChange]);
 	const openFilePicker = useCallback(() => {

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

@@ -1,9 +1,9 @@
 import { toPrecision } from "../../../internal/to-precision.mjs";
 //#region src/components/form/number-field/cast.ts
-const FLOATING_POINT_REGEX = /^[Ee0-9+\-.]$/;
+const FLOATING_POINT_REGEX = /^[Ee0-9+\-.]$/u;
 const isInvalidCharacter = (value) => FLOATING_POINT_REGEX.test(value);
 const sanitize = (value) => value.split("").filter((char) => isInvalidCharacter(char)).join("");
-const parse = (value) => Number.parseFloat(value.toString().replaceAll(/[^\w.-]+/g, ""));
+const parse = (value) => Number.parseFloat(value.toString().replaceAll(/[^\w.-]+/gu, ""));
 const countDecimalPlaces = (value) => {
 	if (!Number.isFinite(value)) return 0;
 	let e = 1;

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

@@ -1,8 +1,9 @@
 "use client";
+import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
-import { toPrecision } from "../../../internal/to-precision.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { toPrecision } from "../../../internal/to-precision.mjs";
 import { clamp } from "../../../internal/clamp.mjs";
 import { cast } from "./cast.mjs";
 import { useState } from "react";
@@ -26,7 +27,7 @@ const NumberField = ({ invalid = false, disabled = false, required = false, valu
 		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 vertical:h-auto vertical:w-12", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info", "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
+		className: cn("relative flex h-12 w-full items-center justify-between gap-2 rounded-xl border border-border-base bg-bg-base vertical:h-auto vertical:w-12", FOCUS_RING_WITHIN, "has-aria-invalid:border-border-error", "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute hover:has-disabled:has-hover:bg-bg-mute"),
 		children: [/* @__PURE__ */ jsx("input", {
 			autoComplete: "off",
 			autoCorrect: "off",
@@ -67,7 +68,7 @@ const NumberField = ({ invalid = false, disabled = false, required = false, valu
 			value: displayValue
 		}), /* @__PURE__ */ jsxs("div", {
 			"aria-hidden": "true",
-			className: "vertical:inset-e-auto vertical:bottom-1 vertical:h-auto vertical:w-full vertical:flex-row vertical:px-1 vertical:py-0 absolute end-1 flex h-full flex-col py-1",
+			className: "vertical:inset-e-auto vertical:bottom-1 vertical:h-auto vertical:w-full vertical:flex-row vertical:px-1 vertical:py-0 absolute inset-e-1 flex h-full flex-col py-1",
 			children: [/* @__PURE__ */ jsxs("button", {
 				className: cn("flex w-6 grow items-center justify-center rounded-md text-fg-mute transition-colors vertical:h-6 vertical:w-auto", "hover:bg-bg-mute hover:text-fg-base", "disabled:cursor-not-allowed disabled:text-fg-mute hover:disabled:bg-transparent"),
 				disabled: disabled || pending,

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

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING_NO_BORDER, FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
 import { ViewIcon, ViewOffIcon } from "../../icons/lucide.mjs";
@@ -9,7 +10,7 @@ const PasswordInput = ({ invalid = false, autoComplete = "current-password", sho
 	const { isOpen: isVisible, toggle: toggleVisible } = useDisclosure();
 	const { pending } = useFormStatus();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex w-full items-center rounded-xl border border-border-base bg-bg-base vertical:h-full vertical:w-auto", invalid && "border-border-error", (disabled || pending) && "cursor-not-allowed border-border-mute bg-bg-mute", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info"),
+		className: cn("relative flex w-full items-center rounded-xl border border-border-base bg-bg-base vertical:h-full vertical:w-auto", invalid && "border-border-error", (disabled || pending) && "cursor-not-allowed border-border-mute bg-bg-mute", FOCUS_RING_WITHIN),
 		children: [/* @__PURE__ */ jsx("input", {
 			"aria-invalid": invalid,
 			autoComplete,
@@ -20,7 +21,7 @@ const PasswordInput = ({ invalid = false, autoComplete = "current-password", sho
 			...rest
 		}), /* @__PURE__ */ jsx("button", {
 			"aria-label": isVisible ? hideLabel : showLabel,
-			className: cn("me-2 inline-flex shrink-0 items-center justify-center rounded-md p-1 text-fg-mute transition-colors", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", !disabled && !pending && "hover:bg-bg-mute hover:text-fg-base", (disabled || pending) && "cursor-not-allowed text-fg-mute/70"),
+			className: cn("me-2 inline-flex shrink-0 items-center justify-center rounded-md p-1 text-fg-mute transition-colors", FOCUS_RING_NO_BORDER, !disabled && !pending && "hover:bg-bg-mute hover:text-fg-base", (disabled || pending) && "cursor-not-allowed text-fg-mute/70"),
 			disabled: disabled || pending,
 			onClick: toggleVisible,
 			type: "button",

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

@@ -1,5 +1,5 @@
 import { Option } from "../../../types/variables.mjs";
-import { ChangeEventHandler, FC, HTMLAttributes } from "react";
+import { ChangeEvent, FC, HTMLAttributes } from "react";
 
 //#region src/components/form/radio/radio.d.ts
 type BaseProps = {
@@ -10,13 +10,13 @@ type BaseProps = {
 } & Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'className' | 'style' | 'children' | 'aria-labelledby' | 'onChange'>;
 type ControlledProps = {
   value: string;
-  onChange: ChangeEventHandler<HTMLInputElement>;
+  onChange: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
   defaultValue?: never;
 };
 type UncontrolledProps = {
   defaultValue?: string;
   value?: never;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
 declare const Radio: FC<Props>;

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

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING_PEER } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { useFormStatus } from "react-dom";
@@ -12,9 +13,9 @@ const Radio = ({ "aria-labelledby": labelledbyId, name, disabled = false, value,
 	const { pending } = useFormStatus();
 	const isControlled = value !== void 0;
 	const disabledResolved = disabled || pending;
-	const selectValue = (nextValue) => {
+	const selectValue = (nextValue, event) => {
 		setSelectedValue(nextValue);
-		onChange?.({ target: { value: nextValue } });
+		onChange?.(nextValue, event);
 	};
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -29,15 +30,15 @@ const Radio = ({ "aria-labelledby": labelledbyId, name, disabled = false, value,
 					className: "peer sr-only",
 					disabled: disabledResolved,
 					name: name ?? labelledbyId,
-					onChange: () => {
-						selectValue(option.value);
+					onChange: (event) => {
+						selectValue(option.value, event);
 					},
 					type: "radio",
 					value: option.value
 				}),
 				/* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
-					className: cn("inline-flex size-5 items-center justify-center rounded-full border-2 transition-colors", "peer-focus-visible:border-transparent peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info", selectedValue === option.value ? "border-border-base bg-primary-bg" : "border-border-mute bg-bg-base", disabledResolved && "border-border-mute bg-bg-mute"),
+					className: cn("inline-flex size-5 items-center justify-center rounded-full border-2 transition-colors", FOCUS_RING_PEER, selectedValue === option.value ? "border-border-base bg-primary-bg" : "border-border-mute bg-bg-base", disabledResolved && "border-border-mute bg-bg-mute"),
 					children: /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full transition-opacity", selectedValue === option.value ? "bg-primary-border opacity-100" : "bg-transparent opacity-0") })
 				}),
 				/* @__PURE__ */ jsx("span", { children: option.label })

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

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, FC, FieldsetHTMLAttributes, ReactNode } from "react";
+import { FC, FieldsetHTMLAttributes, ReactNode } from "react";
 
 //#region src/components/form/radio-card/radio-card.d.ts
 type RadioCardOption = Readonly<{
@@ -15,13 +15,13 @@ type BaseProps = {
 } & Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className' | 'style' | 'children' | 'onChange' | 'defaultValue' | 'aria-labelledby'>;
 type ControlledProps = {
   value: string;
-  onChange: ChangeEventHandler<HTMLInputElement>;
+  onChange: (value: string) => void;
   defaultValue?: never;
 };
 type UncontrolledProps = {
   defaultValue?: string;
   value?: never;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onChange?: (value: string) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
 declare const RadioCard: FC<Props>;

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

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING_NO_BORDER } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { useId, useRef } from "react";
@@ -13,7 +14,7 @@ const RadioCard = ({ "aria-labelledby": labelledbyId, name, disabled = false, in
 	});
 	const selectValue = (nextValue) => {
 		setCurrentValue(nextValue);
-		onChange?.({ target: { value: nextValue } });
+		onChange?.(nextValue);
 	};
 	const focusIndex = (index) => {
 		buttonRefs.current[index]?.focus();
@@ -41,7 +42,7 @@ const RadioCard = ({ "aria-labelledby": labelledbyId, name, disabled = false, in
 			return /* @__PURE__ */ jsxs("button", {
 				"aria-describedby": hasDescription ? `${optionId}-description` : void 0,
 				"aria-pressed": checked,
-				className: cn("flex min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors inline-full", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", checked && "border-primary-border bg-primary-bg-subtle hover:bg-primary-bg-mute", invalid ? "border-border-error" : !checked && "border-border-mute hover:bg-bg-subtle", optionDisabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
+				className: cn("flex min-w-0 rounded-xl border bg-bg-base p-4 text-left transition-colors inline-full", FOCUS_RING_NO_BORDER, checked && "border-primary-border bg-primary-bg-subtle hover:bg-primary-bg-mute", invalid ? "border-border-error" : !checked && "border-border-mute hover:bg-bg-subtle", optionDisabled && "cursor-not-allowed border-border-mute bg-bg-subtle text-fg-mute"),
 				disabled: optionDisabled,
 				id: optionId,
 				onClick: () => {

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

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { ChevronIcon } from "../../icons/lucide.mjs";
 import { useFormStatus } from "react-dom";
@@ -7,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const Select = ({ invalid = false, options, disabled = false, ...rest }) => {
 	const { pending } = useFormStatus();
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex h-fit w-full items-center rounded-xl border border-border-base bg-bg-base vertical:h-full vertical:w-fit", invalid && "border-border-error", (disabled || pending) && "cursor-not-allowed border-border-mute bg-bg-mute", "focus-within:border-transparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info"),
+		className: cn("relative flex h-fit w-full items-center rounded-xl border border-border-base bg-bg-base vertical:h-full vertical:w-fit", invalid && "border-border-error", (disabled || pending) && "cursor-not-allowed border-border-mute bg-bg-mute", FOCUS_RING_WITHIN),
 		children: [/* @__PURE__ */ jsx("select", {
 			"aria-invalid": invalid,
 			className: cn("w-full grow appearance-none bg-transparent px-3 py-2 text-fg-base focus-visible:outline-hidden vertical:h-full vertical:w-auto", "disabled:cursor-not-allowed"),

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

@@ -23,7 +23,7 @@ const Slider = ({ invalid = false, disabled = false, required = false, value, de
 			className: "bg-bg-mute relative rounded-full block-2 inline-full",
 			children: /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("bg-primary-bg absolute start-0 inset-be-0 block-full inline-(--slider-progress) rounded-full", invalid && "bg-bg-error")
+				className: cn("bg-primary-bg absolute inset-s-0 inset-be-0 block-full inline-(--slider-progress) rounded-full", invalid && "bg-bg-error")
 			})
 		}), /* @__PURE__ */ jsx("input", {
 			...rest,

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

@@ -1,4 +1,4 @@
-import { ChangeEventHandler, FC, InputHTMLAttributes } from "react";
+import { ChangeEvent, FC, InputHTMLAttributes } from "react";
 
 //#region src/components/form/switch/switch.d.ts
 type BaseProps = {
@@ -7,13 +7,13 @@ type BaseProps = {
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'style' | 'value' | 'onChange' | 'defaultChecked' | 'checked' | 'children'>;
 type ControlledProps = {
   value: boolean;
-  onChange: ChangeEventHandler<HTMLInputElement>;
+  onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
   defaultChecked?: never;
 };
 type UncontrolledProps = {
   defaultChecked?: boolean;
   value?: never;
-  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onChange?: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
 };
 type Props = BaseProps & (ControlledProps | UncontrolledProps);
 declare const Switch: FC<Props>;

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

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING_PEER_NO_BORDER } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
 import { useId } from "react";
@@ -31,14 +32,14 @@ const Switch = ({ value, defaultChecked, id, disabled = false, invalid = false,
 				id: inputId,
 				onChange: (event) => {
 					setSelected(event.target.checked);
-					onChange?.(event);
+					onChange?.(event.target.checked, event);
 				},
 				required,
 				role: "switch",
 				type: "checkbox"
 			}), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: cn("inline-flex items-center rounded-full transition-colors", "h-7 w-12 vertical:h-12 vertical:w-7", invalid && "ring-2 ring-border-error", isSelected ? "bg-primary-bg" : "bg-bg-mute", disabledResolved && "bg-bg-subtle", "peer-focus-visible:outline-hidden peer-focus-visible:ring-2 peer-focus-visible:ring-border-info peer-focus-visible:ring-offset-2"),
+				className: cn("inline-flex items-center rounded-full transition-colors", "h-7 w-12 vertical:h-12 vertical:w-7", invalid && "ring-2 ring-border-error", isSelected ? "bg-primary-bg" : "bg-bg-mute", disabledResolved && "bg-bg-subtle", FOCUS_RING_PEER_NO_BORDER, "peer-focus-visible:ring-offset-2"),
 				children: /* @__PURE__ */ jsx("span", { className: cn("ms-0.5 size-5 rounded-full bg-bg-base shadow-xs transition-transform", isSelected && "translate-x-5 vertical:translate-x-0 vertical:translate-y-5", disabledResolved && "bg-bg-emphasize") })
 			})]
 		}), label ? /* @__PURE__ */ jsx("span", { children: label }) : null]

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

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { useFormStatus } from "react-dom";
 import { jsx } from "react/jsx-runtime";
@@ -7,7 +8,7 @@ const TextField = ({ invalid = false, readOnly, ...rest }) => {
 	const { pending } = useFormStatus();
 	return /* @__PURE__ */ jsx("input", {
 		"aria-invalid": invalid,
-		className: cn("rounded-xl border border-border-base bg-bg-base px-3 py-2 inline-full", "aria-invalid:border-border-error", "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute hover:disabled:bg-bg-mute", "read-only:cursor-not-allowed read-only:bg-bg-subtle", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info"),
+		className: cn("rounded-xl border border-border-base bg-bg-base px-3 py-2 inline-full", "aria-invalid:border-border-error", "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute hover:disabled:bg-bg-mute", "read-only:cursor-not-allowed read-only:bg-bg-subtle", FOCUS_RING),
 		readOnly: pending || readOnly,
 		type: "text",
 		...rest

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

@@ -1,4 +1,5 @@
 "use client";
+import { FOCUS_RING } from "../../_internal/focus-ring.mjs";
 import { cn } from "../../../helpers/cn.mjs";
 import { useEffect, useRef } from "react";
 import { useFormStatus } from "react-dom";
@@ -16,7 +17,7 @@ const Textarea = ({ invalid = false, fullHeight = false, autoResize = false, rea
 	}, [autoResize, value]);
 	return /* @__PURE__ */ jsx("textarea", {
 		"aria-invalid": invalid,
-		className: cn("resize-none rounded-xl border border-border-base bg-bg-base px-3 py-2 inline-full", "aria-invalid:border-border-error", "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute hover:disabled:bg-bg-mute", "read-only:cursor-not-allowed read-only:bg-bg-subtle", "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info", fullHeight && "h-full"),
+		className: cn("resize-none rounded-xl border border-border-base bg-bg-base px-3 py-2 inline-full", "aria-invalid:border-border-error", "disabled:cursor-not-allowed disabled:border-border-mute disabled:bg-bg-mute hover:disabled:bg-bg-mute", "read-only:cursor-not-allowed read-only:bg-bg-subtle", FOCUS_RING, fullHeight && "h-full"),
 		onInput: (e) => {
 			if (autoResize) resizeToContent(e.currentTarget);
 			onInput?.(e);

package/dist/components/index.d.mts

@@ -39,8 +39,10 @@ import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, Bori
 import { QiitaIcon } from "./icons/qiita.mjs";
 import { TwitterIcon } from "./icons/twitter.mjs";
 import { VerticalWritingIcon } from "./icons/vertical-writing.mjs";
+import { Grid, GridProps } from "./layout/grid/grid.mjs";
 import { ScrollLinked } from "./layout/scroll-linked/scroll-linked.mjs";
 import { Separator } from "./layout/separator/separator.mjs";
+import { Stack, StackProps } from "./layout/stack/stack.mjs";
 import { Anchor } from "./navigation/anchor/anchor.mjs";
 import { Breadcrumb } from "./navigation/breadcrumb/breadcrumb.mjs";
 import { Pagination } from "./navigation/pagination/pagination.mjs";
@@ -54,4 +56,4 @@ import { useOpenContext } from "./overlays/popover/hooks.mjs";
 import { Popover } from "./overlays/popover/popover.mjs";
 import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
 import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, type GridProps, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, type StackProps, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };

package/dist/components/index.mjs

@@ -43,8 +43,10 @@ import { Slider } from "./form/slider/slider.mjs";
 import { Switch } from "./form/switch/switch.mjs";
 import { TextField } from "./form/text-field/text-field.mjs";
 import { Textarea } from "./form/textarea/textarea.mjs";
+import { Grid } from "./layout/grid/grid.mjs";
 import { ScrollLinked } from "./layout/scroll-linked/scroll-linked.mjs";
 import { Separator } from "./layout/separator/separator.mjs";
+import { Stack } from "./layout/stack/stack.mjs";
 import { Anchor } from "./navigation/anchor/anchor.mjs";
 import { Breadcrumb } from "./navigation/breadcrumb/breadcrumb.mjs";
 import { Pagination } from "./navigation/pagination/pagination.mjs";
@@ -54,4 +56,4 @@ import { Modal } from "./overlays/modal/modal.mjs";
 import { Drawer } from "./overlays/drawer/drawer.mjs";
 import { DropdownMenu } from "./overlays/dropdown-menu/dropdown-menu.mjs";
 import { ListBox } from "./overlays/list-box/list-box.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Grid, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, Stack, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };