@k8ordo/ui 1.0.0

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

@@ -0,0 +1,2 @@
+import { Skeleton } from "./skeleton.mjs";
+export { Skeleton };

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

@@ -0,0 +1,2 @@
+import { Skeleton } from "./skeleton.mjs";
+export { Skeleton };

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

@@ -0,0 +1,10 @@
+import { FC, HTMLAttributes } from "react";
+//#region src/components/feedback/skeleton/skeleton.d.ts
+type Props = {
+  animate?: boolean;
+  shape?: 'rect' | 'circle';
+  size?: 'sm' | 'md' | 'lg';
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>;
+declare const Skeleton: FC<Props>;
+//#endregion
+export { Skeleton };

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

@@ -0,0 +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", ...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")
+});
+//#endregion
+export { Skeleton };

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

@@ -0,0 +1,2 @@
+import { Spinner } from "./spinner.mjs";
+export { Spinner };

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

@@ -0,0 +1,2 @@
+import { Spinner } from "./spinner.mjs";
+export { Spinner };

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

@@ -0,0 +1,9 @@
+import { FC, OutputHTMLAttributes } from "react";
+//#region src/components/feedback/spinner/spinner.d.ts
+type Props = {
+  label?: string;
+  size?: 'sm' | 'md' | 'lg';
+} & Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'aria-label' | 'className' | 'style'>;
+declare const Spinner: FC<Props>;
+//#endregion
+export { Spinner };

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

@@ -0,0 +1,24 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/feedback/spinner/spinner.tsx
+const Spinner = ({ label, size = "md", ...rest }) => {
+	const messages = useMessages();
+	const resolvedLabel = label ?? messages.loading;
+	return /* @__PURE__ */ jsxs("output", {
+		...rest,
+		"aria-label": resolvedLabel,
+		"aria-live": "polite",
+		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")
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: resolvedLabel
+		})]
+	});
+};
+//#endregion
+export { Spinner };

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

@@ -0,0 +1,34 @@
+import { Status } from "../../../types/variables.mjs";
+import { AlertAction } from "../alert/alert.mjs";
+import "../alert/index.mjs";
+//#region src/components/feedback/toast/context.d.ts
+type ToastAction = AlertAction;
+type ToastOptions = {
+  /**
+   * 自動で閉じるまでのミリ秒。`Number.POSITIVE_INFINITY` で自動クローズなし
+   * （閉じるボタンでのみ閉じる）。既定は 5000ms。
+   */
+  duration?: number;
+  action?: ToastAction;
+};
+type ToastType = {
+  id: string;
+  tone: Status;
+  message: string;
+  duration: number;
+  action?: ToastAction;
+  /**
+   * 開いた時点のフォーカス位置。閉じたときの返還先候補として使う。
+   * 参照を握り続けて DOM のリークを起こさないよう WeakRef で持つ。
+   */
+  opener?: WeakRef<HTMLElement>;
+};
+type ToastStore = {
+  open: (tone: Status, message: string, options?: ToastOptions) => void;
+  close: (id: string) => void;
+  closeAll: () => void;
+};
+declare const ToastStoreContext: import("react").Context<ToastStore | null>, useToastStore: () => ToastStore;
+declare const useToast: () => ToastStore;
+//#endregion
+export { ToastAction, ToastOptions, ToastStore, ToastStoreContext, ToastType, useToast, useToastStore };

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

@@ -0,0 +1,7 @@
+"use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+//#region src/components/feedback/toast/context.ts
+const [ToastStoreContext, useToastStore] = createSafeContext("useToast must be used within a ToastProvider");
+const useToast = () => useToastStore();
+//#endregion
+export { ToastStoreContext, useToast, useToastStore };

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

@@ -0,0 +1,3 @@
+import { ToastAction, ToastOptions, useToast } from "./context.mjs";
+import { ToastProvider } from "./provider.mjs";
+export { type ToastAction, type ToastOptions, ToastProvider, useToast };

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

@@ -0,0 +1,3 @@
+import { useToast } from "./context.mjs";
+import { ToastProvider } from "./provider.mjs";
+export { ToastProvider, useToast };

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

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren, RefObject } from "react";
+//#region src/components/feedback/toast/provider.d.ts
+declare const ToastProvider: FC<PropsWithChildren<{
+  portalRef?: RefObject<HTMLElement | null>;
+  position?: 'fixed' | 'absolute';
+}>>;
+//#endregion
+export { ToastProvider };

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

@@ -0,0 +1,171 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { ToastStoreContext } from "./context.mjs";
+import { Toast } from "./toast.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/feedback/toast/provider.tsx
+const MAX_TOAST_COUNT = 5;
+const DEFAULT_DURATION_MS = 5e3;
+const EXIT_MS = 200;
+const FOCUSABLE_SELECTOR = "a[href], button:not(:disabled), [tabindex]:not([tabindex=\"-1\"])";
+const enforceLimit = (state) => {
+	if (state.isHovered || state.isFocused) return state;
+	const active = state.toasts.filter((toast) => !state.closingIds.includes(toast.id));
+	const overflow = active.length - MAX_TOAST_COUNT;
+	if (overflow <= 0) return state;
+	return {
+		...state,
+		closingIds: [...state.closingIds, ...active.slice(0, overflow).map((toast) => toast.id)]
+	};
+};
+const ToastProvider = ({ children, portalRef = null, position = "fixed" }) => {
+	const messages = useMessages();
+	const [state, setState] = useState({
+		toasts: [],
+		closingIds: [],
+		isHovered: false,
+		isFocused: false
+	});
+	const [defaultContainer, setDefaultContainer] = useState(null);
+	const viewportRef = useRef(null);
+	const focusedToastIdRef = useRef(null);
+	useEffect(() => {
+		setDefaultContainer(document.body);
+	}, []);
+	const exitTimersRef = useRef(/* @__PURE__ */ new Map());
+	useEffect(() => {
+		for (const id of state.closingIds) {
+			if (exitTimersRef.current.has(id)) continue;
+			const timerId = window.setTimeout(() => {
+				exitTimersRef.current.delete(id);
+				setState((prev) => ({
+					...prev,
+					toasts: prev.toasts.filter((toast) => toast.id !== id),
+					closingIds: prev.closingIds.filter((closingId) => closingId !== id)
+				}));
+			}, EXIT_MS);
+			exitTimersRef.current.set(id, timerId);
+		}
+	}, [state.closingIds]);
+	useEffect(() => {
+		const timers = exitTimersRef.current;
+		return () => {
+			for (const timerId of timers.values()) window.clearTimeout(timerId);
+			timers.clear();
+		};
+	}, []);
+	useEffect(() => {
+		const closedId = focusedToastIdRef.current;
+		const viewport = viewportRef.current;
+		if (closedId === null || viewport === null || !state.closingIds.includes(closedId)) return;
+		focusedToastIdRef.current = null;
+		const focusIfPossible = (element) => {
+			if (element === null || element === void 0 || !element.isConnected) return false;
+			element.focus();
+			return viewport.ownerDocument.activeElement === element;
+		};
+		for (const item of viewport.querySelectorAll("[data-toast-id]:not([data-closing])")) if (focusIfPossible(item.querySelector(FOCUSABLE_SELECTOR))) return;
+		const opener = state.toasts.find((toast) => toast.id === closedId)?.opener?.deref();
+		if (focusIfPossible(opener)) return;
+		viewport.focus();
+	}, [state.closingIds, state.toasts]);
+	const store = useMemo(() => ({
+		open: (tone, message, options) => {
+			const id = crypto.randomUUID();
+			const { activeElement } = document;
+			const opener = activeElement instanceof HTMLElement && activeElement !== document.body ? new WeakRef(activeElement) : void 0;
+			setState((prev) => enforceLimit({
+				...prev,
+				toasts: [...prev.toasts, {
+					id,
+					tone,
+					message,
+					duration: options?.duration ?? DEFAULT_DURATION_MS,
+					action: options?.action,
+					opener
+				}]
+			}));
+		},
+		close: (id) => {
+			setState((prev) => prev.closingIds.includes(id) ? prev : {
+				...prev,
+				closingIds: [...prev.closingIds, id]
+			});
+		},
+		closeAll: () => {
+			setState((prev) => ({
+				...prev,
+				closingIds: prev.toasts.map((toast) => toast.id)
+			}));
+		}
+	}), []);
+	const setHovered = (isHovered) => {
+		setState((prev) => prev.isHovered === isHovered ? prev : enforceLimit({
+			...prev,
+			isHovered
+		}));
+	};
+	const setFocused = (isFocused) => {
+		setState((prev) => prev.isFocused === isFocused ? prev : enforceLimit({
+			...prev,
+			isFocused
+		}));
+	};
+	const container = portalRef?.current ?? defaultContainer;
+	const isPaused = state.isHovered || state.isFocused;
+	return /* @__PURE__ */ jsxs(ToastStoreContext, {
+		value: store,
+		children: [children, container ? createPortal(/* @__PURE__ */ jsx("section", {
+			"aria-label": state.toasts.length > 0 ? messages.toastRegion : void 0,
+			className: cn("bottom-3 z-toast flex w-full flex-col items-center justify-center", position === "fixed" && "fixed", position === "absolute" && "absolute"),
+			onBlur: (event) => {
+				if (event.currentTarget.contains(event.relatedTarget)) return;
+				setFocused(false);
+				if (event.target.closest("[data-closing]") === null) focusedToastIdRef.current = null;
+			},
+			onFocus: (event) => {
+				const item = event.target.closest("[data-toast-id]");
+				focusedToastIdRef.current = item?.dataset.toastId ?? null;
+				setFocused(item !== null);
+			},
+			onPointerEnter: () => {
+				setHovered(true);
+			},
+			onPointerLeave: () => {
+				setHovered(false);
+			},
+			ref: viewportRef,
+			tabIndex: -1,
+			children: state.toasts.map((toast) => {
+				const isClosing = state.closingIds.includes(toast.id);
+				return /* @__PURE__ */ jsx("div", {
+					className: "ao-toast-item w-full justify-items-center",
+					"data-closing": isClosing || void 0,
+					"data-toast-id": toast.id,
+					inert: isClosing || void 0,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "min-h-0",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "ao-toast-enter shadow-lg",
+							children: /* @__PURE__ */ jsx(Toast, {
+								action: toast.action,
+								duration: toast.duration,
+								isPaused,
+								message: toast.message,
+								onClose: () => {
+									store.close(toast.id);
+								},
+								tone: toast.tone
+							})
+						})
+					})
+				}, toast.id);
+			})
+		}), container) : null]
+	});
+};
+//#endregion
+export { ToastProvider };

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

@@ -0,0 +1,15 @@
+import { Status } from "../../../types/variables.mjs";
+import { ToastAction } from "./context.mjs";
+import { FC } from "react";
+//#region src/components/feedback/toast/toast.d.ts
+type ToastProps = {
+  tone: Status;
+  message: string;
+  duration: number;
+  action?: ToastAction;
+  isPaused?: boolean;
+  onClose: () => void;
+};
+declare const Toast: FC<ToastProps>;
+//#endregion
+export { Toast };

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

@@ -0,0 +1,32 @@
+"use client";
+import { Alert } from "../alert/alert.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/feedback/toast/toast.tsx
+const Toast = ({ tone, message, duration, action, isPaused = false, onClose }) => {
+	const onCloseRef = useRef(onClose);
+	useEffect(() => {
+		onCloseRef.current = onClose;
+	});
+	const remainingRef = useRef(duration);
+	useEffect(() => {
+		if (isPaused || !Number.isFinite(remainingRef.current)) return;
+		const startedAt = performance.now();
+		const timeoutId = window.setTimeout(() => {
+			onCloseRef.current();
+		}, remainingRef.current);
+		return () => {
+			window.clearTimeout(timeoutId);
+			remainingRef.current -= performance.now() - startedAt;
+		};
+	}, [isPaused]);
+	return /* @__PURE__ */ jsx(Alert, {
+		action,
+		"aria-atomic": true,
+		message,
+		onClose,
+		tone
+	});
+};
+//#endregion
+export { Toast };

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

@@ -0,0 +1,23 @@
+import { Option } from "../../../types/variables.mjs";
+import { FC, InputHTMLAttributes, Ref } from "react";
+//#region src/components/form/autocomplete/autocomplete.d.ts
+type BaseProps = {
+  id: string;
+  invalid?: boolean;
+  options: readonly Option[];
+  ref?: Ref<HTMLInputElement>;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'className' | 'style' | 'value' | 'onChange' | 'defaultValue' | 'children' | 'id' | 'autoComplete' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'aria-activedescendant'>;
+type ControlledProps = {
+  value: string[];
+  onChange: (value: string[]) => void;
+  defaultValue?: never;
+};
+type UncontrolledProps = {
+  defaultValue?: string[];
+  value?: never;
+  onChange?: (value: string[]) => void;
+};
+type Props = BaseProps & (ControlledProps | UncontrolledProps);
+declare const Autocomplete: FC<Props>;
+//#endregion
+export { Autocomplete };

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

@@ -0,0 +1,225 @@
+"use client";
+import { FOCUS_RING_WITHIN } from "../../_internal/focus-ring.mjs";
+import { cn } from "../../../helpers/cn.mjs";
+import { useMessages } from "../../../i18n/context.mjs";
+import { chain } from "../../../helpers/chain.mjs";
+import { useClickAway } from "../../../hooks/click-away/index.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { useDeferredDebounce } from "../../../hooks/deferred-debounce/index.mjs";
+import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
+import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { CloseIcon } from "../../icons/lucide.mjs";
+import { useCallback, useRef, useState } from "react";
+import { useFormStatus } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/form/autocomplete/autocomplete.tsx
+const Autocomplete = ({ id, name, invalid = false, disabled = false, required = false, options, value, defaultValue, onChange, placeholder, onBlur, onClick, onKeyDown, ref, ...rest }) => {
+	const messages = useMessages();
+	const [currentValue, handleChange] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? [],
+		onChange
+	});
+	const containerRef = useRef(null);
+	const { isOpen, open, close } = useDisclosure();
+	const [text, setText] = useState("");
+	const [selectIndex, setSelectIndex] = useState();
+	const writingMode = useWritingMode(containerRef);
+	const anchorName = `--ao-ac-${id.replaceAll(/[^a-zA-Z0-9_-]/gu, "")}`;
+	const listboxStyle = {
+		position: "fixed",
+		inset: "auto",
+		margin: 0,
+		marginTop: "4px",
+		positionAnchor: anchorName,
+		positionArea: "bottom span-right",
+		positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline",
+		inlineSize: `anchor-size(${writingMode === "vertical" ? "height" : "width"})`
+	};
+	const [deferredText, isPending] = useDeferredDebounce(text);
+	const filteredOptions = options.filter((option) => option.label.includes(deferredText));
+	const activeIndex = selectIndex === void 0 || filteredOptions.length === 0 ? void 0 : Math.min(selectIndex, filteredOptions.length - 1);
+	const activeOption = activeIndex === void 0 ? void 0 : filteredOptions[activeIndex];
+	const { pending: formPending } = useFormStatus();
+	const disabledResolved = disabled || formPending;
+	const reset = useCallback(() => {
+		setText("");
+		close();
+		setSelectIndex(void 0);
+	}, [close]);
+	useClickAway(containerRef, reset, isOpen);
+	const scrollActiveIntoView = useCallback((node) => {
+		node?.scrollIntoView({ block: "nearest" });
+	}, []);
+	const setReferenceRef = useCallback((node) => {
+		containerRef.current = node;
+		if (node) node.style.setProperty("anchor-name", anchorName);
+	}, [anchorName]);
+	const handleBlur = (e) => {
+		if (e.relatedTarget?.id.startsWith(`${id}_option_`) === true) return;
+		close();
+	};
+	const handleClick = () => {
+		if (isOpen && text.length === 0) {
+			close();
+			return;
+		}
+		open();
+		setSelectIndex(void 0);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Backspace" && text.length === 0) {
+			reset();
+			handleChange(currentValue.slice(0, -1));
+			return;
+		}
+		if (e.key === "Escape") {
+			if (isOpen) {
+				e.preventDefault();
+				close();
+				setSelectIndex(void 0);
+			}
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			open();
+			if (filteredOptions.length === 0) return;
+			setSelectIndex(activeIndex === void 0 ? 0 : Math.min(activeIndex + 1, filteredOptions.length - 1));
+			return;
+		}
+		if (e.key === "ArrowUp") {
+			open();
+			if (filteredOptions.length === 0) return;
+			setSelectIndex(activeIndex === void 0 ? 0 : Math.max(activeIndex - 1, 0));
+			return;
+		}
+		if (e.key === "Enter" && activeIndex !== void 0) {
+			if (isPending) {
+				e.preventDefault();
+				return;
+			}
+			const selected = filteredOptions[activeIndex];
+			if (!selected) return;
+			if (currentValue.includes(selected.value)) {
+				handleChange(currentValue.filter((v) => v !== selected.value));
+				reset();
+				return;
+			}
+			handleChange([...currentValue, selected.value]);
+			reset();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		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,
+				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 min-w-0 flex-wrap gap-1",
+					children: [currentValue.map((selectedValue) => {
+						const label = options.find((option) => option.value === selectedValue)?.label;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "bg-bg-mute inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium",
+							tabIndex: -1,
+							children: [label, /* @__PURE__ */ jsx(IconButton, {
+								label: messages.autocompleteRemoveTag,
+								onClick: (e) => {
+									e.stopPropagation();
+									reset();
+									handleChange(currentValue.filter((v) => v !== selectedValue));
+								},
+								size: "sm",
+								children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+							})]
+						}, selectedValue);
+					}), /* @__PURE__ */ jsx("input", {
+						...rest,
+						"aria-activedescendant": isOpen && activeOption !== void 0 ? `${id}_option_${activeOption.value}` : void 0,
+						"aria-autocomplete": "list",
+						"aria-controls": isOpen ? `${id}_listbox` : void 0,
+						"aria-expanded": isOpen,
+						"aria-invalid": invalid,
+						"aria-required": required,
+						autoComplete: "off",
+						className: cn("grow bg-transparent focus-visible:outline-hidden", "disabled:cursor-not-allowed"),
+						disabled: disabledResolved,
+						id,
+						onBlur: chain(handleBlur, onBlur),
+						onChange: (e) => {
+							open();
+							setText(e.target.value);
+							setSelectIndex(void 0);
+						},
+						onClick: chain(handleClick, onClick),
+						onKeyDown: chain(handleKeyDown, onKeyDown),
+						placeholder: placeholder ?? messages.autocompletePlaceholder,
+						ref,
+						role: "combobox",
+						type: "text",
+						value: text
+					})]
+				}), currentValue.length > 0 && /* @__PURE__ */ jsx(IconButton, {
+					label: messages.autocompleteClear,
+					onClick: (e) => {
+						e.stopPropagation();
+						handleChange([]);
+					},
+					size: "sm",
+					children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" })
+				})]
+			}),
+			isOpen && /* @__PURE__ */ jsx("div", {
+				className: "bg-bg-raised border-border-subtle z-10 rounded-xl border shadow-md",
+				role: "presentation",
+				style: listboxStyle,
+				children: /* @__PURE__ */ jsxs("ul", {
+					"aria-busy": isPending || void 0,
+					"aria-multiselectable": "true",
+					className: cn("max-h-96 overflow-y-auto py-2 transition-opacity vertical:max-h-none vertical:max-w-96 vertical:overflow-x-auto vertical:overflow-y-visible", 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: messages.autocompleteEmpty
+					}), 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", activeIndex === idx && !selected && "bg-bg-subtle", activeIndex === idx && selected && "bg-primary-bg-mute text-primary-fg"),
+							id: `${id}_option_${option.value}`,
+							ref: activeIndex === idx ? scrollActiveIntoView : void 0,
+							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);
+					})]
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { Autocomplete };

package/dist/components/form/autocomplete/index.d.mts

@@ -0,0 +1,2 @@
+import { Autocomplete } from "./autocomplete.mjs";
+export { Autocomplete };

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

@@ -0,0 +1,2 @@
+import { Autocomplete } from "./autocomplete.mjs";
+export { Autocomplete };

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

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