@k8o/arte-odyssey 9.0.0 → 10.0.0

package/dist/components/data-display/card/type.d.mts

@@ -4,6 +4,6 @@ import { HTMLAttributes } from "react";
 type CardProps = {
   width?: 'full' | 'fit';
   appearance?: 'shadow' | 'bordered';
-} & HTMLAttributes<HTMLDivElement>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>;
 //#endregion
 export { CardProps };

package/dist/components/data-display/code/code.d.mts

@@ -3,7 +3,7 @@ import { FC, HTMLAttributes } from "react";
 //#region src/components/data-display/code/code.d.ts
 type Props = {
   children: string;
-} & Omit<HTMLAttributes<HTMLElement>, 'children'>;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>;
 declare const Code: FC<Props>;
 //#endregion
 export { Code };

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

@@ -1,13 +1,12 @@
-import { cn } from "../../../helpers/cn.mjs";
 import { findAllColors } from "./find-all-colors.mjs";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/code/code.tsx
-const Code = ({ children, className, ...rest }) => {
+const Code = ({ children, ...rest }) => {
 	const colors = findAllColors(children);
 	if (colors.length === 0) return /* @__PURE__ */ jsx("code", {
 		...rest,
-		className: cn("bg-bg-mute m-0.5 rounded-md px-1.5 sm:py-0.5", className),
+		className: "bg-bg-mute m-0.5 rounded-md px-1.5 sm:py-0.5",
 		children
 	});
 	const parts = [];
@@ -25,7 +24,7 @@ const Code = ({ children, className, ...rest }) => {
 	if (lastIndex < children.length) parts.push(children.slice(lastIndex));
 	return /* @__PURE__ */ jsx("code", {
 		...rest,
-		className: cn("bg-bg-mute m-0.5 inline-flex items-center gap-1 rounded-md px-1.5 sm:py-0.5", className),
+		className: "bg-bg-mute vertical:inline vertical:gap-0 m-0.5 inline-flex items-center gap-1 rounded-md px-1.5 sm:py-0.5",
 		children: parts
 	});
 };

package/dist/components/data-display/code/find-all-colors.mjs

@@ -1,6 +1,6 @@
 //#region src/components/data-display/code/find-all-colors.ts
 const extractFunctionContent = (source, funcName) => {
-	const funcPattern = new RegExp(`${funcName}\\s*\\(`, "gi");
+	const funcPattern = new RegExp(`${funcName}\\s*\\(`, "giu");
 	const matches = [];
 	let match = funcPattern.exec(source);
 	while (match !== null) {
@@ -46,7 +46,7 @@ function findAllColors(text) {
 		const matches = extractFunctionContent(text, func);
 		results.push(...matches);
 	}
-	const hexPattern = /#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})(?=\s|;|,|$|\)|]|})/g;
+	const hexPattern = /#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})(?=\s|;|,|$|\)|\]|\})/gu;
 	let hexMatch = hexPattern.exec(text);
 	while (hexMatch !== null) {
 		results.push({
@@ -88,7 +88,7 @@ function findAllColors(text) {
 		while (index !== -1) {
 			const beforeChar = index > 0 ? lowerText[index - 1] ?? " " : " ";
 			const afterChar = index + color.length < lowerText.length ? lowerText[index + color.length] ?? " " : " ";
-			if (!(/[a-zA-Z0-9]/.test(beforeChar) || /[a-zA-Z0-9]/.test(afterChar))) results.push({
+			if (!(/[a-zA-Z0-9]/u.test(beforeChar) || /[a-zA-Z0-9]/u.test(afterChar))) results.push({
 				color,
 				start: index,
 				end: index + color.length

package/dist/components/data-display/heading/heading.d.mts

@@ -4,7 +4,7 @@ import { FC, HTMLAttributes } from "react";
 type Props = {
   type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   lineClamp?: number;
-} & HTMLAttributes<HTMLHeadingElement>;
+} & Omit<HTMLAttributes<HTMLHeadingElement>, 'className' | 'style'>;
 declare const Heading: FC<Props>;
 //#endregion
 export { Heading };

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

@@ -1,36 +1,36 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/heading/heading.tsx
-const Heading = ({ children, type, lineClamp, className, ...rest }) => {
+const Heading = ({ children, type, lineClamp, ...rest }) => {
 	const lineClampClass = { [`line-clamp-${lineClamp?.toString() ?? ""}`]: lineClamp };
 	if (type === "h1") return /* @__PURE__ */ jsx("h1", {
 		...rest,
-		className: cn("font-bold text-2xl md:text-3xl", lineClampClass, className),
+		className: cn("font-bold text-2xl md:text-3xl", lineClampClass),
 		children
 	});
 	if (type === "h2") return /* @__PURE__ */ jsx("h2", {
 		...rest,
-		className: cn("font-bold text-xl md:text-2xl", lineClampClass, className),
+		className: cn("font-bold text-xl md:text-2xl", lineClampClass),
 		children
 	});
 	if (type === "h3") return /* @__PURE__ */ jsx("h3", {
 		...rest,
-		className: cn("font-bold text-lg md:text-xl", lineClampClass, className),
+		className: cn("font-bold text-lg md:text-xl", lineClampClass),
 		children
 	});
 	if (type === "h4") return /* @__PURE__ */ jsx("h4", {
 		...rest,
-		className: cn("font-bold text-md md:text-lg", lineClampClass, className),
+		className: cn("font-bold text-md md:text-lg", lineClampClass),
 		children
 	});
 	if (type === "h5") return /* @__PURE__ */ jsx("h5", {
 		...rest,
-		className: cn("font-bold text-sm md:text-md", lineClampClass, className),
+		className: cn("font-bold text-sm md:text-md", lineClampClass),
 		children
 	});
 	return /* @__PURE__ */ jsx("h6", {
 		...rest,
-		className: cn("font-bold text-xs md:text-sm", lineClampClass, className),
+		className: cn("font-bold text-xs md:text-sm", lineClampClass),
 		children
 	});
 };

package/dist/components/data-display/table/table.d.mts

@@ -1,43 +1,38 @@
 import { FC, PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/data-display/table/table.d.ts
-type RootProps = PropsWithChildren<{
-  className?: string;
-  containerClassName?: string;
-}>;
 type RowProps = PropsWithChildren<{
-  className?: string;
   interactive?: boolean;
 }>;
 type CellAlign = 'left' | 'center' | 'right';
 type HeaderCellProps = PropsWithChildren<{
   align?: CellAlign;
-  className?: string;
 }>;
 type CellProps = PropsWithChildren<{
   align?: CellAlign;
-  className?: string;
   colSpan?: number;
   tone?: 'default' | 'muted';
 }>;
-type SectionProps = PropsWithChildren<{
-  className?: string;
-}>;
-type CaptionProps = PropsWithChildren<{
-  className?: string;
-}>;
 type EmptyStateProps = {
   colSpan: number;
   children: ReactNode;
 };
 declare const Table: {
-  readonly Root: FC<RootProps>;
-  readonly Head: FC<SectionProps>;
-  readonly Body: FC<SectionProps>;
+  readonly Root: FC<{
+    children?: ReactNode | undefined;
+  }>;
+  readonly Head: FC<{
+    children?: ReactNode | undefined;
+  }>;
+  readonly Body: FC<{
+    children?: ReactNode | undefined;
+  }>;
   readonly Row: FC<RowProps>;
   readonly HeaderCell: FC<HeaderCellProps>;
   readonly Cell: FC<CellProps>;
-  readonly Caption: FC<CaptionProps>;
+  readonly Caption: FC<{
+    children?: ReactNode | undefined;
+  }>;
   readonly EmptyState: FC<EmptyStateProps>;
 };
 //#endregion

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

@@ -1,45 +1,47 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/data-display/table/table.tsx
-const Root = ({ children, className, containerClassName }) => /* @__PURE__ */ jsx("div", {
-	className: cn("w-full overflow-x-auto rounded-lg border border-border-mute bg-bg-base", containerClassName),
+const Root = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "border-border-mute bg-bg-base vertical:writing-sideways-rl vertical:h-fit vertical:w-fit w-full overflow-x-auto rounded-lg border",
 	children: /* @__PURE__ */ jsx("table", {
-		className: cn("min-w-full border-collapse text-left text-sm", className),
+		className: "min-w-full border-collapse text-left text-sm",
 		children
 	})
 });
-const Head = ({ children, className }) => /* @__PURE__ */ jsx("thead", {
-	className: cn("bg-bg-subtle", className),
+const Head = ({ children }) => /* @__PURE__ */ jsx("thead", {
+	className: "bg-bg-subtle",
 	children
 });
-const Body = ({ children, className }) => /* @__PURE__ */ jsx("tbody", {
-	className: cn("[&_tr:last-child]:border-b-0", className),
+const Body = ({ children }) => /* @__PURE__ */ jsx("tbody", {
+	className: "vertical:[&_tr:last-child]:border-l-0 [&_tr:last-child]:border-b-0",
 	children
 });
-const Row = ({ children, className, interactive = false }) => /* @__PURE__ */ jsx("tr", {
-	className: cn("border-border-mute border-b transition-colors", interactive && "hover:bg-bg-mute", className),
+const Row = ({ children, interactive = false }) => /* @__PURE__ */ jsx("tr", {
+	className: cn("border-border-mute border-b transition-colors vertical:border-b-0 vertical:border-l", interactive && "hover:bg-bg-mute"),
 	children
 });
-const HeaderCell = ({ align = "left", children, className }) => /* @__PURE__ */ jsx("th", {
-	className: cn("px-4 py-3 font-medium text-fg-base", align === "center" && "text-center", align === "right" && "text-right", className),
+const HeaderCell = ({ align = "left", children }) => /* @__PURE__ */ jsx("th", {
+	className: cn("px-4 py-3 font-medium text-fg-base", align === "center" && "text-center", align === "right" && "text-right"),
 	scope: "col",
 	children
 });
-const Cell = ({ align = "left", children, className, colSpan, tone = "default" }) => /* @__PURE__ */ jsx("td", {
-	className: cn("px-4 py-3 align-middle", tone === "muted" ? "text-fg-mute" : "text-fg-base", align === "center" && "text-center", align === "right" && "text-right", className),
+const Cell = ({ align = "left", children, colSpan, tone = "default" }) => /* @__PURE__ */ jsx("td", {
+	className: cn("px-4 py-3 align-middle", tone === "muted" ? "text-fg-mute" : "text-fg-base", align === "center" && "text-center", align === "right" && "text-right"),
 	colSpan,
 	children
 });
-const Caption = ({ children, className }) => /* @__PURE__ */ jsx("caption", {
-	className: cn("caption-bottom px-4 py-3 text-fg-mute text-sm", className),
+const Caption = ({ children }) => /* @__PURE__ */ jsx("caption", {
+	className: "text-fg-mute caption-bottom px-4 py-3 text-sm",
 	children
 });
-const EmptyState = ({ children, colSpan }) => /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Cell, {
-	align: "center",
-	className: "text-fg-mute py-10",
-	colSpan,
-	children
-}) });
+const EmptyState = ({ children, colSpan }) => /* @__PURE__ */ jsx("tr", {
+	className: "border-border-mute border-b transition-colors",
+	children: /* @__PURE__ */ jsx("td", {
+		className: "text-fg-mute px-4 py-10 text-center align-middle",
+		colSpan,
+		children
+	})
+});
 const Table = {
 	Root,
 	Head,

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

@@ -3,9 +3,9 @@ import { FC, HTMLAttributes } from "react";
 
 //#region src/components/feedback/alert/alert.d.ts
 type Props = {
-  status: Status;
+  tone: Status;
   message: string | string[];
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role' | 'className' | 'style'>;
 declare const Alert: FC<Props>;
 //#endregion
 export { Alert };

package/dist/components/feedback/alert/alert.mjs

@@ -8,18 +8,18 @@ const STATUS_LABEL = {
 	warning: "警告",
 	error: "エラー"
 };
-const Alert = ({ status, message, className, ...rest }) => /* @__PURE__ */ jsxs("div", {
+const Alert = ({ tone, message, ...rest }) => /* @__PURE__ */ jsxs("div", {
 	...rest,
-	className: cn("flex items-center gap-3 rounded-lg p-4", status === "success" && "bg-bg-success", status === "info" && "bg-bg-info", status === "warning" && "bg-bg-warning", status === "error" && "bg-bg-error", className),
-	role: status === "error" || status === "warning" ? "alert" : "status",
+	className: cn("flex items-center gap-3 rounded-lg p-4", tone === "success" && "bg-bg-success", tone === "info" && "bg-bg-info", tone === "warning" && "bg-bg-warning", tone === "error" && "bg-bg-error"),
+	role: tone === "error" || tone === "warning" ? "alert" : "status",
 	children: [/* @__PURE__ */ jsxs("span", {
-		className: cn(status === "success" && "text-fg-success", status === "info" && "text-fg-info", status === "warning" && "text-fg-warning", status === "error" && "text-fg-error"),
+		className: cn(tone === "success" && "text-fg-success", tone === "info" && "text-fg-info", tone === "warning" && "text-fg-warning", tone === "error" && "text-fg-error"),
 		children: [/* @__PURE__ */ jsx(AlertIcon, {
 			size: "md",
-			status
+			status: tone
 		}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: STATUS_LABEL[status]
+			children: STATUS_LABEL[tone]
 		})]
 	}), Array.isArray(message) ? message.length > 1 ? /* @__PURE__ */ jsx("ul", {
 		className: "space-y-1",

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

@@ -6,7 +6,7 @@ type Props = {
   maxProgress: number;
   minProgress?: number;
   label?: string;
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
 declare const Progress: FC<Props>;
 //#endregion
 export { Progress };

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

@@ -1,18 +1,17 @@
-import { cn } from "../../../helpers/cn.mjs";
 import { toPrecision } from "../../../internal/to-precision.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/progress/progress.tsx
-const Progress = ({ progress, maxProgress, minProgress = 0, label, className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const Progress = ({ progress, maxProgress, minProgress = 0, label, ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
-	className: cn("bg-bg-emphasize w-full rounded-full", className),
+	className: "bg-bg-emphasize vertical:inline-48 rounded-full block-4 inline-full",
+	style: { "--progress-fill": `${(progress / maxProgress * 100).toString()}%` },
 	children: /* @__PURE__ */ jsx("div", {
 		"aria-label": label ?? `${toPrecision(progress / maxProgress).toString()}%`,
 		"aria-valuemax": maxProgress,
 		"aria-valuemin": minProgress,
 		"aria-valuenow": progress,
-		className: "bg-primary-bg h-4 rounded-full transition-all",
-		role: "progressbar",
-		style: { width: `${(progress / maxProgress * 100).toString()}%` }
+		className: "bg-primary-bg rounded-full transition-all block-full inline-(--progress-fill)",
+		role: "progressbar"
 	})
 });
 //#endregion

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

@@ -5,7 +5,7 @@ type Props = {
   animate?: boolean;
   shape?: 'rect' | 'circle';
   size?: 'sm' | 'md' | 'lg';
-} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
 declare const Skeleton: FC<Props>;
 //#endregion
 export { Skeleton };

package/dist/components/feedback/skeleton/skeleton.mjs

@@ -1,10 +1,10 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/feedback/skeleton/skeleton.tsx
-const Skeleton = ({ animate = true, shape = "rect", size = "md", className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const Skeleton = ({ animate = true, shape = "rect", size = "md", ...rest }) => /* @__PURE__ */ jsx("div", {
 	...rest,
 	"aria-hidden": true,
-	className: cn("bg-bg-mute", animate && "animate-pulse", shape === "rect" && "rounded-lg", shape === "rect" && size === "sm" && "h-3 w-24", shape === "rect" && size === "md" && "h-4 w-40", shape === "rect" && size === "lg" && "h-5 w-56", shape === "circle" && "rounded-full", shape === "circle" && size === "sm" && "size-8", shape === "circle" && size === "md" && "size-12", shape === "circle" && size === "lg" && "size-16", className)
+	className: cn("bg-bg-mute", animate && "animate-pulse", shape === "rect" && "rounded-lg", shape === "rect" && size === "sm" && "h-3 w-24", shape === "rect" && size === "md" && "h-4 w-40", shape === "rect" && size === "lg" && "h-5 w-56", shape === "circle" && "rounded-full", shape === "circle" && size === "sm" && "size-8", shape === "circle" && size === "md" && "size-12", shape === "circle" && size === "lg" && "size-16")
 });
 //#endregion
 export { Skeleton };

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

@@ -4,7 +4,7 @@ import { FC, OutputHTMLAttributes } from "react";
 type Props = {
   label?: string;
   size?: 'sm' | 'md' | 'lg';
-} & Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'aria-label'>;
+} & Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'aria-label' | 'className' | 'style'>;
 declare const Spinner: FC<Props>;
 //#endregion
 export { Spinner };

package/dist/components/feedback/spinner/spinner.mjs

@@ -1,11 +1,11 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/feedback/spinner/spinner.tsx
-const Spinner = ({ label = "Loading", size = "md", className, ...rest }) => /* @__PURE__ */ jsxs("output", {
+const Spinner = ({ label = "Loading", size = "md", ...rest }) => /* @__PURE__ */ jsxs("output", {
 	...rest,
 	"aria-label": label,
 	"aria-live": "polite",
-	className: cn("inline-flex items-center justify-center", className),
+	className: "inline-flex items-center justify-center",
 	children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": true,
 		className: cn("inline-block animate-spin rounded-full border-4 border-border-base border-t-primary-border", size === "sm" && "size-4", size === "md" && "size-6", size === "lg" && "size-8")

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

@@ -1,16 +1,15 @@
 import { Status } from "../../../types/variables.mjs";
-import * as _$react from "react";
 import { Dispatch, SetStateAction } from "react";
 
 //#region src/components/feedback/toast/context.d.ts
 type ToastType = {
   id: string;
-  status: Status;
+  tone: Status;
   message: string;
 };
-declare const SetToastContext: _$react.Context<Dispatch<SetStateAction<ToastType[]>> | null>, useSetToast: () => Dispatch<SetStateAction<ToastType[]>>;
+declare const SetToastContext: import("react").Context<Dispatch<SetStateAction<ToastType[]>> | null>, useSetToast: () => Dispatch<SetStateAction<ToastType[]>>;
 declare const useToast: () => {
-  onOpen: (status: Status, message: string) => void;
+  onOpen: (tone: Status, message: string) => void;
   onClose: (id: string) => void;
   onCloseAll: () => void;
 };

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

@@ -54,7 +54,7 @@ const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
 		children: [children, container ? createPortal(/* @__PURE__ */ jsx("section", {
 			"aria-label": "通知",
 			"aria-live": "polite",
-			className: cn("absolute bottom-3 z-50 flex w-full flex-col items-center justify-center gap-4", position === "fixed" && "fixed", position === "absolute" && "absolute"),
+			className: cn("absolute bottom-3 z-toast flex w-full flex-col items-center justify-center gap-4", position === "fixed" && "fixed", position === "absolute" && "absolute"),
 			children: /* @__PURE__ */ jsx(AnimatePresence, {
 				initial: false,
 				children: toasts.map((toast) => /* @__PURE__ */ jsx(motion$1.div, {
@@ -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.d.mts

@@ -6,7 +6,7 @@ type BaseProps = {
   id: string;
   invalid?: boolean;
   options: readonly Option[];
-} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'id' | 'autoComplete' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded'>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'style' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'id' | 'autoComplete' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded'>;
 type ControlledProps = {
   value: string[];
   onChange: (value: string[]) => void;

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";
@@ -8,6 +9,7 @@ import { useDeferredDebounce } from "../../../hooks/deferred-debounce/index.mjs"
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useFormStatus } from "react-dom";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { autoUpdate, flip, offset, size, useFloating } from "@floating-ui/react";
 //#region src/components/form/autocomplete/autocomplete.tsx
 const Autocomplete = ({ id, name, invalid = false, disabled = false, required = false, options, value, defaultValue, onChange, ...rest }) => {
 	const [currentValue, handleChange] = useControllableState({
@@ -19,6 +21,25 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 	const { isOpen, open, close } = useDisclosure();
 	const [text, setText] = useState("");
 	const [selectIndex, setSelectIndex] = useState();
+	const { refs, floatingStyles } = useFloating({
+		strategy: "fixed",
+		placement: "bottom-start",
+		open: isOpen,
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(4),
+			flip({
+				fallbackAxisSideDirection: "end",
+				padding: 8
+			}),
+			size({ apply: ({ rects, elements }) => {
+				const referenceEl = elements.reference instanceof HTMLElement ? elements.reference : null;
+				const isVertical = referenceEl !== null && getComputedStyle(referenceEl).writingMode.startsWith("vertical");
+				Object.assign(elements.floating.style, { inlineSize: `${isVertical ? rects.reference.height : rects.reference.width}px` });
+			} })
+		],
+		transform: false
+	});
 	const [deferredText, isPending] = useDeferredDebounce(text);
 	const filteredOptions = options.filter((option) => option.label.includes(deferredText));
 	const { pending: formPending } = useFormStatus();
@@ -38,9 +59,13 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 			document.removeEventListener("click", handleClick);
 		};
 	}, [reset]);
+	const setReferenceRef = (node) => {
+		ref.current = node;
+		refs.setReference(node);
+	};
 	return /* @__PURE__ */ jsxs("div", {
-		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 hover:has-disabled:has-hover:bg-bg-mute"),
-		ref,
+		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", {
 				name,
@@ -148,43 +173,46 @@ const Autocomplete = ({ id, name, invalid = false, disabled = false, required =
 					children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
 				})]
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "relative w-full",
-				children: isOpen && /* @__PURE__ */ jsx("div", {
-					className: "bg-bg-raised absolute top-1 z-10 w-full rounded-xl shadow-md",
-					role: "presentation",
-					children: /* @__PURE__ */ jsxs("ul", {
-						"aria-busy": isPending || void 0,
-						className: cn("max-h-96 py-2 transition-opacity", isPending && "opacity-60"),
-						id: `${id}_listbox`,
-						children: [filteredOptions.length === 0 && /* @__PURE__ */ jsx("li", {
-							className: "text-fg-mute px-3 py-2",
-							children: "該当なし"
-						}), filteredOptions.map((option, idx) => {
-							const selected = currentValue.includes(option.value);
-							return /* @__PURE__ */ jsx("li", {
-								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}`,
-								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);
-						})]
-					})
+			isOpen && /* @__PURE__ */ jsx("div", {
+				className: "bg-bg-raised z-10 rounded-xl shadow-md",
+				ref: refs.setFloating,
+				role: "presentation",
+				style: floatingStyles,
+				children: /* @__PURE__ */ jsxs("ul", {
+					"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();
+								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);
+					})]
 				})
 			})
 		]