@k8ordo/ui 1.0.0

package/dist/components/overlays/popover/escape-stack.mjs

@@ -0,0 +1,34 @@
+"use client";
+//#region src/components/overlays/popover/escape-stack.ts
+/**
+* 開いているポップオーバーのレイヤースタック。
+*
+* APG に合わせ、Escape は最も内側（最後に開かれた）1 枚だけを閉じる。
+* 各 Popover が window にリスナを張ると画面上の枚数だけ発火してしまうため、
+* リスナはモジュール全体で 1 つだけ持ち、スタック最上位へディスパッチする。
+*/
+const layers = [];
+const handleKeyDown = (event) => {
+	if (event.key !== "Escape" || event.defaultPrevented) return;
+	const top = layers.at(-1);
+	if (!top) return;
+	event.preventDefault();
+	top();
+};
+/**
+* ポップオーバーを最上位レイヤーとして積む。戻り値を呼ぶと取り除かれる。
+*/
+const pushEscapeLayer = (close) => {
+	if (layers.length === 0) window.addEventListener("keydown", handleKeyDown);
+	const layer = () => {
+		close();
+	};
+	layers.push(layer);
+	return () => {
+		const index = layers.lastIndexOf(layer);
+		if (index !== -1) layers.splice(index, 1);
+		if (layers.length === 0) window.removeEventListener("keydown", handleKeyDown);
+	};
+};
+//#endregion
+export { pushEscapeLayer };

package/dist/components/overlays/popover/hooks.d.mts

@@ -0,0 +1,53 @@
+import { Placement } from "../../../types/variables.mjs";
+import { KeyboardEventHandler, MouseEventHandler, RefCallback, RefObject } from "react";
+//#region src/components/overlays/popover/hooks.d.ts
+type PopoverContext = {
+  rootId: string;
+  role: 'dialog' | 'menu' | 'listbox';
+  closeOnClickAway: boolean;
+  trapFocus: boolean;
+  isOpen: boolean;
+  toggleOpen: () => void;
+  onOpen: () => void;
+  onClose: () => void;
+  placement: Placement;
+  anchorName: string;
+  flipDisabled: boolean;
+  triggerRef: RefObject<HTMLElement | null>;
+  setTriggerRef: (node: HTMLElement | null) => void;
+};
+declare const PopoverProvider: import("react").Context<PopoverContext | null>, usePopoverContext: () => PopoverContext;
+declare const useOpenContext: () => {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  toggleOpen: () => void;
+};
+type PopoverContentProps = {
+  id: string;
+  ref: RefObject<HTMLDivElement | null>;
+  role: 'dialog' | 'menu' | 'listbox';
+  'aria-orientation'?: 'vertical';
+};
+declare const usePopoverContent: () => {
+  id: string;
+  ref: RefObject<HTMLDivElement | null>;
+  isOpen: boolean;
+  trapFocus: boolean;
+  anchorName: string;
+  placement: Placement;
+  flipDisabled: boolean;
+  itemProps: PopoverContentProps;
+};
+type PopoverTriggerProps = {
+  ref: RefCallback<HTMLElement>;
+  onClick: MouseEventHandler<HTMLElement>;
+  onKeyDown: KeyboardEventHandler<HTMLElement>;
+  'aria-haspopup': 'dialog' | 'menu' | 'listbox';
+  'aria-expanded': boolean;
+  'aria-controls'?: string;
+  role?: 'combobox';
+};
+declare const usePopoverTrigger: () => PopoverTriggerProps;
+//#endregion
+export { PopoverContentProps, PopoverProvider, PopoverTriggerProps, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger };

package/dist/components/overlays/popover/hooks.mjs

@@ -0,0 +1,141 @@
+"use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useClickAway } from "../../../hooks/click-away/index.mjs";
+import { useMemo, useRef } from "react";
+//#region src/components/overlays/popover/hooks.ts
+const [PopoverProvider, usePopoverContext] = createSafeContext("usePopoverContext must be used within a Popover.Root");
+const useOpenContext = () => {
+	const popover = usePopoverContext();
+	return useMemo(() => ({
+		isOpen: popover.isOpen,
+		onOpen: popover.onOpen,
+		onClose: popover.onClose,
+		toggleOpen: popover.toggleOpen
+	}), [
+		popover.isOpen,
+		popover.onClose,
+		popover.onOpen,
+		popover.toggleOpen
+	]);
+};
+const usePopoverContent = () => {
+	const popover = usePopoverContext();
+	const ref = useRef(null);
+	useClickAway(ref, (event) => {
+		if (!popover.isOpen) return;
+		if (event.target instanceof Node && popover.triggerRef.current?.contains(event.target) === true) return;
+		popover.onClose();
+	}, popover.closeOnClickAway);
+	const itemProps = useMemo(() => {
+		const id = `${popover.rootId}_list`;
+		switch (popover.role) {
+			case "dialog": return {
+				id,
+				ref,
+				role: "dialog"
+			};
+			case "menu": return {
+				id,
+				ref,
+				role: "menu",
+				"aria-orientation": "vertical"
+			};
+			case "listbox": return {
+				id,
+				ref,
+				role: "listbox"
+			};
+			default: return popover.role;
+		}
+	}, [
+		popover.rootId,
+		popover.role,
+		ref
+	]);
+	return useMemo(() => ({
+		id: `${popover.rootId}_list`,
+		ref,
+		isOpen: popover.isOpen,
+		trapFocus: popover.trapFocus,
+		anchorName: popover.anchorName,
+		placement: popover.placement,
+		flipDisabled: popover.flipDisabled,
+		itemProps
+	}), [
+		popover.rootId,
+		popover.isOpen,
+		popover.anchorName,
+		popover.placement,
+		popover.flipDisabled,
+		ref,
+		popover.trapFocus,
+		itemProps
+	]);
+};
+const usePopoverTrigger = () => {
+	const popover = usePopoverContext();
+	return useMemo(() => {
+		const listId = popover.isOpen ? `${popover.rootId}_list` : void 0;
+		switch (popover.role) {
+			case "dialog": return {
+				onClick: popover.toggleOpen,
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						popover.toggleOpen();
+					}
+				},
+				"aria-haspopup": "dialog",
+				"aria-expanded": popover.isOpen,
+				"aria-controls": listId,
+				ref: popover.setTriggerRef
+			};
+			case "menu": return {
+				onClick: popover.toggleOpen,
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						popover.toggleOpen();
+					}
+					if (e.key === "ArrowUp") {
+						e.preventDefault();
+						popover.onOpen();
+					}
+					if (e.key === "ArrowDown") {
+						e.preventDefault();
+						popover.onOpen();
+					}
+				},
+				"aria-haspopup": "menu",
+				"aria-expanded": popover.isOpen,
+				"aria-controls": listId,
+				ref: popover.setTriggerRef
+			};
+			case "listbox": return {
+				onClick: popover.toggleOpen,
+				onKeyDown: (e) => {
+					if (e.key === "Enter") {
+						e.preventDefault();
+						popover.toggleOpen();
+					}
+					if (e.key === "ArrowUp") {
+						e.preventDefault();
+						popover.onOpen();
+					}
+					if (e.key === "ArrowDown") {
+						e.preventDefault();
+						popover.onOpen();
+					}
+				},
+				role: "combobox",
+				"aria-haspopup": "listbox",
+				"aria-expanded": popover.isOpen,
+				"aria-controls": listId,
+				ref: popover.setTriggerRef
+			};
+			default: return popover.role;
+		}
+	}, [popover]);
+};
+//#endregion
+export { PopoverProvider, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger };

package/dist/components/overlays/popover/index.d.mts

@@ -0,0 +1,3 @@
+import { PopoverContentProps, PopoverTriggerProps, useOpenContext } from "./hooks.mjs";
+import { Popover } from "./popover.mjs";
+export { Popover, type PopoverContentProps, type PopoverTriggerProps, useOpenContext };

package/dist/components/overlays/popover/index.mjs

@@ -0,0 +1,3 @@
+import { useOpenContext } from "./hooks.mjs";
+import { Popover } from "./popover.mjs";
+export { Popover, useOpenContext };

package/dist/components/overlays/popover/popover.d.mts

@@ -0,0 +1,25 @@
+import { Placement } from "../../../types/variables.mjs";
+import { PopoverContentProps, PopoverTriggerProps, useOpenContext } from "./hooks.mjs";
+import { FC, PropsWithChildren, ReactElement } from "react";
+//#region src/components/overlays/popover/popover.d.ts
+declare const Popover: {
+  readonly Root: FC<PropsWithChildren<{
+    placement?: Placement;
+    role?: 'dialog' | 'menu' | 'listbox';
+    flipDisabled?: boolean;
+    closeOnClickAway?: boolean;
+    trapFocus?: boolean;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
+  }>>;
+  readonly Content: FC<{
+    renderItem: (props: PopoverContentProps) => ReactElement;
+    animation?: 'scale' | 'fade';
+  }>;
+  readonly Trigger: FC<{
+    renderItem: (props: PopoverTriggerProps) => ReactElement;
+  }>;
+};
+//#endregion
+export { Popover, type PopoverContentProps, type PopoverTriggerProps, useOpenContext };

package/dist/components/overlays/popover/popover.mjs

@@ -0,0 +1,90 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
+import { useFocusTrap } from "../../../hooks/focus-trap/index.mjs";
+import { getContentAnchorStyle, toAnchorName } from "./anchor-positioning.mjs";
+import { pushEscapeLayer } from "./escape-stack.mjs";
+import { PopoverProvider, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger } from "./hooks.mjs";
+import { useCallback, useEffect, useId, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/overlays/popover/popover.tsx
+const Root = ({ children, role = "menu", placement = "bottom-start", flipDisabled = false, closeOnClickAway = true, trapFocus = true, isOpen: isOpenProp, defaultOpen = false, onChange }) => {
+	const id = useId();
+	const [isOpen, setIsOpen] = useControllableState({
+		value: isOpenProp,
+		defaultValue: defaultOpen,
+		onChange
+	});
+	const open = useCallback(() => {
+		setIsOpen(true);
+	}, [setIsOpen]);
+	const close = useCallback(() => {
+		setIsOpen(false);
+	}, [setIsOpen]);
+	const toggle = useCallback(() => {
+		setIsOpen((prev) => !prev);
+	}, [setIsOpen]);
+	const anchorName = toAnchorName(id);
+	const triggerRef = useRef(null);
+	const setTriggerRef = useCallback((node) => {
+		triggerRef.current = node;
+		if (node) node.style.setProperty("anchor-name", anchorName);
+	}, [anchorName]);
+	useEffect(() => {
+		if (!isOpen) return;
+		return pushEscapeLayer(close);
+	}, [isOpen, close]);
+	return /* @__PURE__ */ jsx(PopoverProvider, {
+		value: {
+			rootId: id,
+			role,
+			closeOnClickAway,
+			trapFocus,
+			isOpen,
+			toggleOpen: toggle,
+			onOpen: open,
+			onClose: close,
+			placement,
+			anchorName,
+			flipDisabled,
+			triggerRef,
+			setTriggerRef
+		},
+		children
+	});
+};
+const Content = ({ renderItem, animation = "scale" }) => {
+	const { isOpen, trapFocus, anchorName, placement, flipDisabled, itemProps } = usePopoverContent();
+	const { triggerRef, onClose } = usePopoverContext();
+	const writingClass = useWritingMode(triggerRef) === "vertical" ? "writing-v" : void 0;
+	const contentWrapperRef = useRef(null);
+	useEffect(() => {
+		const el = contentWrapperRef.current;
+		if (!el) return;
+		if (isOpen && !el.matches(":popover-open")) el.showPopover();
+		else if (!isOpen && el.matches(":popover-open")) el.hidePopover();
+	}, [isOpen]);
+	useFocusTrap(contentWrapperRef, triggerRef, isOpen && trapFocus);
+	const handleFocusOut = (event) => {
+		const next = event.relatedTarget;
+		if (!isOpen || !trapFocus || next === null || event.currentTarget.contains(next) || triggerRef.current?.contains(next) === true) return;
+		onClose();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("z-overlay outline-hidden", animation === "fade" ? "ao-anim-fade" : "ao-anim-scale", writingClass),
+		onBlur: handleFocusOut,
+		popover: "manual",
+		ref: contentWrapperRef,
+		style: getContentAnchorStyle(anchorName, placement, flipDisabled),
+		children: renderItem(itemProps)
+	});
+};
+const Trigger = ({ renderItem }) => renderItem(usePopoverTrigger());
+const Popover = {
+	Root,
+	Content,
+	Trigger
+};
+//#endregion
+export { Popover, useOpenContext };

package/dist/components/overlays/tooltip/bridge.d.mts

@@ -0,0 +1,5 @@
+import { Placement } from "../../../types/variables.mjs";
+//#region src/components/overlays/tooltip/bridge.d.ts
+declare const bridgeClass: (placement: Placement) => string;
+//#endregion
+export { bridgeClass };

package/dist/components/overlays/tooltip/bridge.mjs

@@ -0,0 +1,29 @@
+import { cn } from "../../../helpers/cn.mjs";
+//#region src/components/overlays/tooltip/bridge.ts
+/**
+* trigger との 8px の隙間（anchor-positioning の offset 相当）を覆う透明ブリッジ。
+*
+* 隙間を渡る途中で mouseleave 扱いにならないよう、当たり判定を「trigger と
+* content の幅の合併」に広げる。1 枚では表現できないため 2 枚の帯を重ねる:
+* - ::before … content の幅の帯（通常の absolute 配置）
+* - ::after … trigger の幅の帯。anchor() は containing block が initial
+*   containing block でないと trigger を参照できない（acceptable anchor 制約）
+*   ため、fixed 配置で CB を ICB に切り替えた上で 4 辺を anchor() で
+*   trigger に張り付ける。anchor 名は popover が配る --ao-anchor を使う。
+*
+* ブリッジが守るのは「まっすぐ渡る」「content 上に留まる」経路だけで、
+* content 中央へ斜めに向かう軌跡は Tooltip の closeDelay（時間側）が守る。
+*/
+const bridgeBase = cn("before:absolute", "after:fixed after:[position-anchor:var(--ao-anchor)]");
+const BRIDGE_BY_SIDE = {
+	top: cn("before:inset-x-0 before:-bottom-2 before:h-2", "after:h-2 after:bottom-[anchor(top)] after:left-[anchor(left)] after:right-[anchor(right)]"),
+	bottom: cn("before:inset-x-0 before:-top-2 before:h-2", "after:h-2 after:top-[anchor(bottom)] after:left-[anchor(left)] after:right-[anchor(right)]"),
+	left: cn("before:inset-y-0 before:-right-2 before:w-2", "after:w-2 after:right-[anchor(left)] after:top-[anchor(top)] after:bottom-[anchor(bottom)]"),
+	right: cn("before:inset-y-0 before:-left-2 before:w-2", "after:w-2 after:left-[anchor(right)] after:top-[anchor(top)] after:bottom-[anchor(bottom)]")
+};
+const bridgeClass = (placement) => {
+	const side = placement.split("-")[0] ?? "bottom";
+	return cn(bridgeBase, BRIDGE_BY_SIDE[side]);
+};
+//#endregion
+export { bridgeClass };

package/dist/components/overlays/tooltip/index.d.mts

@@ -0,0 +1,2 @@
+import { Tooltip, TooltipTriggerProps } from "./tooltip.mjs";
+export { Tooltip, type TooltipTriggerProps };

package/dist/components/overlays/tooltip/index.mjs

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

package/dist/components/overlays/tooltip/tooltip.d.mts

@@ -0,0 +1,34 @@
+import { Placement } from "../../../types/variables.mjs";
+import { FC, FocusEventHandler, MouseEventHandler, PropsWithChildren, ReactElement, RefCallback } from "react";
+//#region src/components/overlays/tooltip/tooltip.d.ts
+type TooltipTriggerProps = {
+  ref: RefCallback<HTMLElement>;
+  onMouseEnter: MouseEventHandler<HTMLElement>;
+  onMouseLeave: MouseEventHandler<HTMLElement>;
+  onFocus: FocusEventHandler<HTMLElement>;
+  onBlur: FocusEventHandler<HTMLElement>;
+  'aria-describedby'?: string;
+};
+declare const Tooltip: {
+  readonly Root: FC<PropsWithChildren<{
+    placement?: Placement;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onChange?: (isOpen: boolean) => void;
+    /** hover で開くまでの猶予(ms)。ポインタが通過しただけの誤表示を防ぐ。 */
+    openDelay?: number;
+    /**
+     * hover が外れてから閉じるまでの猶予(ms)。ブリッジ（隙間の当たり判定）が
+     * 守れない「content の中央へ斜めに向かう軌跡」を時間側でカバーする。
+     */
+    closeDelay?: number;
+  }>>;
+  readonly Trigger: FC<{
+    renderItem: (props: TooltipTriggerProps) => ReactElement;
+  }>;
+  readonly Content: FC<{
+    children?: import("react").ReactNode | undefined;
+  }>;
+};
+//#endregion
+export { Tooltip, TooltipTriggerProps };

package/dist/components/overlays/tooltip/tooltip.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useCanHover } from "../_internal/use-can-hover.mjs";
+import { useHoverIntent } from "../_internal/use-hover-intent.mjs";
+import { usePopoverContext } from "../popover/hooks.mjs";
+import { Popover } from "../popover/popover.mjs";
+import { bridgeClass } from "./bridge.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/overlays/tooltip/tooltip.tsx
+const [TooltipIntentProvider, useTooltipIntent] = createSafeContext("useTooltipIntent must be used within a Tooltip.Root");
+const useTooltipTriggerProps = () => {
+	const popover = usePopoverContext();
+	const intent = useTooltipIntent();
+	return useMemo(() => ({
+		ref: popover.setTriggerRef,
+		onMouseEnter: intent.hoverStart,
+		onMouseLeave: intent.hoverEnd,
+		onFocus: (e) => {
+			if (e.target.matches(":focus-visible")) {
+				intent.cancel();
+				popover.onOpen();
+			}
+		},
+		onBlur: () => {
+			intent.cancel();
+			popover.onClose();
+		},
+		"aria-describedby": popover.isOpen ? `${popover.rootId}_list` : void 0
+	}), [popover, intent]);
+};
+const IntentProvider = ({ openDelay, closeDelay, children }) => {
+	const popover = usePopoverContext();
+	const canHover = useCanHover();
+	const intent = useHoverIntent({
+		onOpen: popover.onOpen,
+		onClose: popover.onClose,
+		openDelay,
+		closeDelay,
+		enabled: canHover
+	});
+	return /* @__PURE__ */ jsx(TooltipIntentProvider, {
+		value: intent,
+		children
+	});
+};
+const Root = ({ children, placement = "bottom", isOpen, defaultOpen, onChange, openDelay = 0, closeDelay = 150 }) => /* @__PURE__ */ jsx(Popover.Root, {
+	closeOnClickAway: false,
+	defaultOpen,
+	isOpen,
+	onChange,
+	placement,
+	trapFocus: false,
+	role: "dialog",
+	children: /* @__PURE__ */ jsx(IntentProvider, {
+		closeDelay,
+		openDelay,
+		children
+	})
+});
+const Trigger = ({ renderItem }) => renderItem(useTooltipTriggerProps());
+const Content = ({ children }) => {
+	const popover = usePopoverContext();
+	const intent = useTooltipIntent();
+	return /* @__PURE__ */ jsx(Popover.Content, {
+		animation: "fade",
+		renderItem: ({ id, ref }) => /* @__PURE__ */ jsx("div", {
+			className: cn("bg-bg-inverse text-fg-inverse relative rounded-lg px-4 py-2 shadow-md", bridgeClass(popover.placement)),
+			id,
+			onBlur: popover.onClose,
+			onFocus: popover.onOpen,
+			onMouseEnter: intent.hoverStart,
+			onMouseLeave: intent.hoverEnd,
+			ref,
+			role: "tooltip",
+			children
+		})
+	});
+};
+const Tooltip = {
+	Root,
+	Trigger,
+	Content
+};
+//#endregion
+export { Tooltip };

package/dist/components/providers/index.d.mts

@@ -0,0 +1,4 @@
+import { Messages } from "../../i18n/messages.mjs";
+import { UIProvider } from "./ui-provider.mjs";
+import { PortalRootProvider, usePortalRoot } from "./portal-root.mjs";
+export { type Messages, PortalRootProvider, UIProvider, usePortalRoot };

package/dist/components/providers/index.mjs

@@ -0,0 +1,3 @@
+import { UIProvider } from "./ui-provider.mjs";
+import { PortalRootProvider, usePortalRoot } from "./portal-root.mjs";
+export { PortalRootProvider, UIProvider, usePortalRoot };

package/dist/components/providers/portal-root.d.mts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren, RefObject } from "react";
+//#region src/components/providers/portal-root.d.ts
+declare const usePortalRoot: () => RefObject<HTMLElement | null> | undefined;
+declare const PortalRootProvider: FC<PropsWithChildren<{
+  value?: RefObject<HTMLElement | null> | undefined;
+}>>;
+//#endregion
+export { PortalRootProvider, usePortalRoot };

package/dist/components/providers/portal-root.mjs

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/providers/portal-root.tsx
+const PortalRootContext = createContext(void 0);
+const usePortalRoot = () => use(PortalRootContext);
+const PortalRootProvider = ({ value, children }) => /* @__PURE__ */ jsx(PortalRootContext, {
+	value,
+	children
+});
+//#endregion
+export { PortalRootProvider, usePortalRoot };

package/dist/components/providers/ui-provider.d.mts

@@ -0,0 +1,8 @@
+import { Messages } from "../../i18n/messages.mjs";
+import { FC, PropsWithChildren } from "react";
+//#region src/components/providers/ui-provider.d.ts
+declare const UIProvider: FC<PropsWithChildren<{
+  messages?: Partial<Messages> | undefined;
+}>>;
+//#endregion
+export { UIProvider };

package/dist/components/providers/ui-provider.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { MessagesProvider } from "../../i18n/context.mjs";
+import { ToastProvider } from "../feedback/toast/provider.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/providers/ui-provider.tsx
+const UIProvider = ({ messages, children }) => /* @__PURE__ */ jsx(MessagesProvider, {
+	messages,
+	children: /* @__PURE__ */ jsx(ToastProvider, { children })
+});
+//#endregion
+export { UIProvider };

package/dist/helpers/chain.d.mts

@@ -0,0 +1,5 @@
+//#region src/helpers/chain.d.ts
+type AnyFunction = (...args: never[]) => unknown;
+declare const chain: <T extends AnyFunction>(...callbacks: Array<T | undefined>) => (...args: Parameters<T>) => void;
+//#endregion
+export { chain };

package/dist/helpers/chain.mjs

@@ -0,0 +1,29 @@
+//#region src/helpers/chain.ts
+const chain = (...callbacks) => (...args) => {
+	for (const callback of callbacks) callback?.(...args);
+};
+if (import.meta.vitest) describe("chain", () => {
+	it("渡されたコールバックを順番に呼び出す", () => {
+		const calls = [];
+		chain(() => calls.push(1), () => calls.push(2), () => calls.push(3))();
+		expect(calls).toEqual([
+			1,
+			2,
+			3
+		]);
+	});
+	it("引数を全てのコールバックに渡す", () => {
+		const fn1 = vi.fn();
+		const fn2 = vi.fn();
+		chain(fn1, fn2)("a", 1);
+		expect(fn1).toHaveBeenCalledWith("a", 1);
+		expect(fn2).toHaveBeenCalledWith("a", 1);
+	});
+	it("undefinedのコールバックはスキップする", () => {
+		const fn = vi.fn();
+		chain(void 0, fn, void 0)();
+		expect(fn).toHaveBeenCalledOnce();
+	});
+});
+//#endregion
+export { chain };

package/dist/helpers/cn.d.mts

@@ -0,0 +1,5 @@
+import { ClassValue } from "clsx";
+//#region src/helpers/cn.d.ts
+declare const cn: (...inputs: ClassValue[]) => string;
+//#endregion
+export { cn };

package/dist/helpers/cn.mjs

@@ -0,0 +1,27 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/helpers/cn.ts
+const cn = (...inputs) => twMerge(clsx(inputs));
+if (import.meta.vitest) describe("cn", () => {
+	it("複数のクラス名を空白区切りで結合する", () => {
+		expect(cn("flex", "items-center")).toBe("flex items-center");
+	});
+	it("falsyな値と条件付きクラスを除外する", () => {
+		expect(cn("flex", void 0, null, false, {
+			hidden: false,
+			grow: true
+		})).toBe("flex grow");
+	});
+	it("ネストした配列を展開する", () => {
+		expect(cn(["flex", ["items-center"]])).toBe("flex items-center");
+	});
+	it("競合するTailwindクラスは後勝ちで解決する", () => {
+		expect(cn("p-2", "p-4")).toBe("p-4");
+		expect(cn("text-sm", "text-lg")).toBe("text-lg");
+	});
+	it("競合しないクラスはどちらも残す", () => {
+		expect(cn("px-2", "py-4")).toBe("px-2 py-4");
+	});
+});
+//#endregion
+export { cn };

package/dist/helpers/create-safe-context.d.mts

@@ -0,0 +1,6 @@
+import { Context } from "react";
+//#region src/helpers/create-safe-context.d.ts
+type CreateSafeContextReturn<T> = readonly [Context<T | null>, () => T];
+declare const createSafeContext: <T>(errorMessage: string) => CreateSafeContextReturn<T>;
+//#endregion
+export { createSafeContext };