@k8ordo/ui 2.0.0 → 2.1.0

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

@@ -16,20 +16,20 @@ type PopoverContext = {
   triggerRef: RefObject<HTMLElement | null>;
   setTriggerRef: (node: HTMLElement | null) => void;
 };
-declare const PopoverProvider: import("react").Context<PopoverContext | null>, usePopoverContext: () => PopoverContext;
-declare const useOpenContext: () => {
+export declare const PopoverProvider: import("react").Context<PopoverContext | null>, usePopoverContext: () => PopoverContext;
+export declare const useOpenContext: () => {
   isOpen: boolean;
   onOpen: () => void;
   onClose: () => void;
   toggleOpen: () => void;
 };
-type PopoverContentProps = {
+export type PopoverContentProps = {
   id: string;
   ref: RefObject<HTMLDivElement | null>;
   role: 'dialog' | 'menu' | 'listbox';
   'aria-orientation'?: 'vertical';
 };
-declare const usePopoverContent: () => {
+export declare const usePopoverContent: () => {
   id: string;
   ref: RefObject<HTMLDivElement | null>;
   isOpen: boolean;
@@ -39,7 +39,7 @@ declare const usePopoverContent: () => {
   flipDisabled: boolean;
   itemProps: PopoverContentProps;
 };
-type PopoverTriggerProps = {
+export type PopoverTriggerProps = {
   ref: RefCallback<HTMLElement>;
   onClick: MouseEventHandler<HTMLElement>;
   onKeyDown: KeyboardEventHandler<HTMLElement>;
@@ -48,6 +48,5 @@ type PopoverTriggerProps = {
   'aria-controls'?: string;
   role?: 'combobox';
 };
-declare const usePopoverTrigger: () => PopoverTriggerProps;
-//#endregion
-export { PopoverContentProps, PopoverProvider, PopoverTriggerProps, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger };
+export declare const usePopoverTrigger: () => PopoverTriggerProps;
+//#endregion

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

@@ -3,7 +3,7 @@ import { PopoverContentProps, PopoverTriggerProps, useOpenContext } from "./hook
 import "./popover.mjs";
 import "../../../index.mjs";
 //#region src/components/overlays/popover/index.d.ts
-declare const Popover: {
+export declare const Popover: {
   readonly Root: import("react").FC<import("react").PropsWithChildren<{
     placement?: Placement;
     role?: 'dialog' | 'menu' | 'listbox';
@@ -23,4 +23,4 @@ declare const Popover: {
   }>;
 };
 //#endregion
-export { Popover, type PopoverContentProps, type PopoverTriggerProps, useOpenContext };
+export { type PopoverContentProps, type PopoverTriggerProps, useOpenContext };

package/dist/components/overlays/popover/popover.css

@@ -0,0 +1,51 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._5jFJFW_root {
+    z-index: var(--z-index-overlay);
+    outline-style: none;
+
+    @media (forced-colors: active) {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+
+  ._5jFJFW_scale:popover-open {
+    animation-name: _5jFJFW_pop-in;
+    animation-duration: .18s;
+  }
+
+  ._5jFJFW_fade:popover-open {
+    animation-name: _5jFJFW_fade-in;
+    animation-duration: var(--duration-fast);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :is(._5jFJFW_scale:popover-open, ._5jFJFW_fade:popover-open) {
+      animation: none;
+    }
+  }
+
+  @keyframes _5jFJFW_pop-in {
+    from {
+      scale: .92;
+    }
+
+    to {
+      scale: 1;
+    }
+  }
+
+  @keyframes _5jFJFW_fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
+@layer utilities;

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

@@ -2,7 +2,7 @@ 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 Root: FC<PropsWithChildren<{
+export declare const Root: FC<PropsWithChildren<{
   placement?: Placement;
   role?: 'dialog' | 'menu' | 'listbox';
   flipDisabled?: boolean;
@@ -12,12 +12,12 @@ declare const Root: FC<PropsWithChildren<{
   defaultOpen?: boolean;
   onChange?: (isOpen: boolean) => void;
 }>>;
-declare const Content: FC<{
+export declare const Content: FC<{
   renderItem: (props: PopoverContentProps) => ReactElement;
   animation?: 'scale' | 'fade';
 }>;
-declare const Trigger: FC<{
+export declare const Trigger: FC<{
   renderItem: (props: PopoverTriggerProps) => ReactElement;
 }>;
 //#endregion
-export { Content, type PopoverContentProps, type PopoverTriggerProps, Root, Trigger, useOpenContext };
+export { type PopoverContentProps, type PopoverTriggerProps, useOpenContext };

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

@@ -1,12 +1,13 @@
 "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 { readWritingMode } from "../../../hooks/writing-mode/index.mjs";
 import { useFocusTrap } from "../../../internal/focus-trap.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 popover_module_default from "./popover.module.mjs";
+import { clsx } from "clsx";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } 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 }) => {
@@ -57,7 +58,12 @@ const Root = ({ children, role = "menu", placement = "bottom-start", flipDisable
 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 [writingMode, setWritingMode] = useState("horizontal");
+	useLayoutEffect(() => {
+		const trigger = triggerRef.current;
+		if (isOpen && trigger) setWritingMode(readWritingMode(trigger));
+	}, [isOpen, triggerRef]);
+	const writingClass = writingMode === "vertical" ? "writing-v" : void 0;
 	const contentWrapperRef = useRef(null);
 	useEffect(() => {
 		const el = contentWrapperRef.current;
@@ -72,7 +78,7 @@ const Content = ({ renderItem, animation = "scale" }) => {
 		onClose();
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("z-overlay outline-hidden", animation === "fade" ? "ao-anim-fade" : "ao-anim-scale", writingClass),
+		className: clsx(popover_module_default.root, animation === "fade" ? popover_module_default.fade : popover_module_default.scale, writingClass),
 		onBlur: handleFocusOut,
 		popover: "manual",
 		ref: contentWrapperRef,

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

@@ -0,0 +1,11 @@
+import './popover.css';
+//#region src/components/overlays/popover/popover.module.css
+var popover_module_default = {
+	"fade": "_5jFJFW_fade",
+	"fade-in": "_5jFJFW_fade-in",
+	"pop-in": "_5jFJFW_pop-in",
+	"root": "_5jFJFW_root",
+	"scale": "_5jFJFW_scale"
+};
+//#endregion
+export { popover_module_default as default };

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

@@ -0,0 +1,68 @@
+@layer properties, theme, base;
+
+@layer components {
+  .BgXmNG_bridge:before {
+    content: "";
+    position: absolute;
+  }
+
+  .BgXmNG_bridge:after {
+    content: "";
+    position-anchor: var(--ao-anchor);
+    position: fixed;
+  }
+
+  .BgXmNG_top:before {
+    inset-inline: 0;
+    bottom: calc(var(--spacing) * -2);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_top:after {
+    bottom: anchor(top);
+    left: anchor(left);
+    right: anchor(right);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_bottom:before {
+    inset-inline: 0;
+    top: calc(var(--spacing) * -2);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_bottom:after {
+    top: anchor(bottom);
+    left: anchor(left);
+    right: anchor(right);
+    height: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_left:before {
+    inset-block: 0;
+    right: calc(var(--spacing) * -2);
+    width: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_left:after {
+    top: anchor(top);
+    right: anchor(left);
+    bottom: anchor(bottom);
+    width: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_right:before {
+    inset-block: 0;
+    left: calc(var(--spacing) * -2);
+    width: calc(var(--spacing) * 2);
+  }
+
+  .BgXmNG_right:after {
+    top: anchor(top);
+    bottom: anchor(bottom);
+    left: anchor(right);
+    width: calc(var(--spacing) * 2);
+  }
+}
+
+@layer utilities;

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

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

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

@@ -1,29 +1,15 @@
-import { cn } from "../../../helpers/cn.mjs";
+import bridge_module_default from "./bridge.module.mjs";
+import { clsx } from "clsx";
 //#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)]")
+	top: bridge_module_default.top,
+	bottom: bridge_module_default.bottom,
+	left: bridge_module_default.left,
+	right: bridge_module_default.right
 };
 const bridgeClass = (placement) => {
 	const side = placement.split("-")[0] ?? "bottom";
-	return cn(bridgeBase, BRIDGE_BY_SIDE[side]);
+	return clsx(bridge_module_default.bridge, BRIDGE_BY_SIDE[side]);
 };
 //#endregion
 export { bridgeClass };

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

@@ -0,0 +1,11 @@
+import './bridge.css';
+//#region src/components/overlays/tooltip/bridge.module.css
+var bridge_module_default = {
+	"bottom": "BgXmNG_bottom",
+	"bridge": "BgXmNG_bridge",
+	"left": "BgXmNG_left",
+	"right": "BgXmNG_right",
+	"top": "BgXmNG_top"
+};
+//#endregion
+export { bridge_module_default as default };

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

@@ -2,7 +2,7 @@ import { Placement } from "../../../types/variables.mjs";
 import "../../../index.mjs";
 import { TooltipTriggerProps } from "./tooltip.mjs";
 //#region src/components/overlays/tooltip/index.d.ts
-declare const Tooltip: {
+export declare const Tooltip: {
   readonly Root: import("react").FC<import("react").PropsWithChildren<{
     placement?: Placement;
     isOpen?: boolean;
@@ -19,4 +19,4 @@ declare const Tooltip: {
   }>;
 };
 //#endregion
-export { Tooltip, type TooltipTriggerProps };
+export type { TooltipTriggerProps };

package/dist/components/overlays/tooltip/tooltip.css

@@ -0,0 +1,15 @@
+@layer properties, theme, base;
+
+@layer components {
+  ._4CBCqq_content {
+    border-radius: var(--radius-lg);
+    background-color: var(--color-bg-inverse);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    color: var(--color-fg-inverse);
+    box-shadow: var(--shadow-md);
+    position: relative;
+  }
+}
+
+@layer utilities;

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

@@ -1,7 +1,7 @@
 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 = {
+export type TooltipTriggerProps = {
   ref: RefCallback<HTMLElement>;
   onMouseEnter: MouseEventHandler<HTMLElement>;
   onMouseLeave: MouseEventHandler<HTMLElement>;
@@ -9,7 +9,7 @@ type TooltipTriggerProps = {
   onBlur: FocusEventHandler<HTMLElement>;
   'aria-describedby'?: string;
 };
-declare const Root: FC<PropsWithChildren<{
+export declare const Root: FC<PropsWithChildren<{
   placement?: Placement;
   isOpen?: boolean;
   defaultOpen?: boolean;
@@ -22,9 +22,8 @@ declare const Root: FC<PropsWithChildren<{
    */
   closeDelay?: number;
 }>>;
-declare const Trigger: FC<{
+export declare const Trigger: FC<{
   renderItem: (props: TooltipTriggerProps) => ReactElement;
 }>;
-declare const Content: FC<PropsWithChildren>;
-//#endregion
-export { Content, Root, TooltipTriggerProps, Trigger };
+export declare const Content: FC<PropsWithChildren>;
+//#endregion

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

@@ -1,11 +1,12 @@
 "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/index.mjs";
 import { bridgeClass } from "./bridge.mjs";
+import tooltip_module_default from "./tooltip.module.mjs";
+import { clsx } from "clsx";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/tooltip/tooltip.tsx
@@ -66,7 +67,7 @@ const Content = ({ children }) => {
 	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)),
+			className: clsx(tooltip_module_default.content, bridgeClass(popover.placement)),
 			id,
 			onBlur: popover.onClose,
 			onFocus: popover.onOpen,

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

@@ -0,0 +1,5 @@
+import './tooltip.css';
+//#region src/components/overlays/tooltip/tooltip.module.css
+var tooltip_module_default = { "content": "_4CBCqq_content" };
+//#endregion
+export { tooltip_module_default as default };

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

@@ -1,4 +1,3 @@
-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 };
+export { PortalRootProvider, UIProvider, usePortalRoot };

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

@@ -1,8 +1,10 @@
-import { FC, PropsWithChildren, RefObject } from "react";
+import { 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 };
+/**
+ * Where floating UI portals to. The Context is the provider — React 19's
+ * spelling, `<PortalRootProvider value={ref}>` — so there is no wrapper
+ * component to keep in step with it.
+ */
+export declare const PortalRootProvider: import("react").Context<RefObject<HTMLElement | null> | undefined>;
+export declare const usePortalRoot: () => RefObject<HTMLElement | null> | undefined;
+//#endregion

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

@@ -1,12 +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
-});
+/**
+* Where floating UI portals to. The Context is the provider — React 19's
+* spelling, `<PortalRootProvider value={ref}>` — so there is no wrapper
+* component to keep in step with it.
+*/
+const PortalRootProvider = createContext(void 0);
+const usePortalRoot = () => use(PortalRootProvider);
 //#endregion
 export { PortalRootProvider, usePortalRoot };

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

@@ -1,8 +1,4 @@
-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 };
+export declare const UIProvider: FC<PropsWithChildren>;
+//#endregion

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

@@ -1,11 +1,7 @@
 "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 })
-});
+const UIProvider = ({ children }) => /* @__PURE__ */ jsx(ToastProvider, { children });
 //#endregion
 export { UIProvider };

package/dist/helpers/chain.d.mts

@@ -1,5 +1,4 @@
 //#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 };
+export declare const chain: <T extends AnyFunction>(...callbacks: Array<T | undefined>) => (...args: Parameters<T>) => void;
+//#endregion

package/dist/helpers/chain.mjs

@@ -2,28 +2,5 @@
 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/create-safe-context.d.mts

@@ -1,6 +1,5 @@
 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 };
+export declare const createSafeContext: <T>(errorMessage: string) => CreateSafeContextReturn<T>;
+//#endregion

package/dist/helpers/create-safe-context.mjs

@@ -9,22 +9,5 @@ const createSafeContext = (errorMessage) => {
 	};
 	return [Context, useSafeContext];
 };
-if (import.meta.vitest) describe("createSafeContext", () => {
-	it("Provider配下ではコンテキストの値を返す", async () => {
-		const { createElement } = await import("react");
-		const { renderToString } = await import("react-dom/server");
-		const [Context, useValue] = createSafeContext("missing provider");
-		const Consumer = () => createElement("span", null, useValue());
-		const html = renderToString(createElement(Context, { value: "hello" }, createElement(Consumer)));
-		expect(html).toContain("hello");
-	});
-	it("Provider外では指定したエラーメッセージでthrowする", async () => {
-		const { createElement } = await import("react");
-		const { renderToString } = await import("react-dom/server");
-		const [, useValue] = createSafeContext("useValue must be used within a Provider");
-		const Consumer = () => createElement("span", null, useValue());
-		expect(() => renderToString(createElement(Consumer))).toThrow("useValue must be used within a Provider");
-	});
-});
 //#endregion
 export { createSafeContext };

package/dist/helpers/index.d.mts

@@ -1,6 +1,5 @@
 import { chain } from "./chain.mjs";
-import { cn } from "./cn.mjs";
 import { createSafeContext } from "./create-safe-context.mjs";
 import { mergeProps } from "./merge-props.mjs";
 import { mergeRefs } from "./merge-refs.mjs";
-export { chain, cn, createSafeContext, mergeProps, mergeRefs };
+export { chain, createSafeContext, mergeProps, mergeRefs };

package/dist/helpers/index.mjs

@@ -1,6 +1,5 @@
-import { cn } from "./cn.mjs";
+import { mergeRefs } from "./merge-refs.mjs";
 import { chain } from "./chain.mjs";
 import { createSafeContext } from "./create-safe-context.mjs";
 import { mergeProps } from "./merge-props.mjs";
-import { mergeRefs } from "./merge-refs.mjs";
-export { chain, cn, createSafeContext, mergeProps, mergeRefs };
+export { chain, createSafeContext, mergeProps, mergeRefs };

package/dist/helpers/merge-props.d.mts

@@ -1,6 +1,5 @@
 //#region src/helpers/merge-props.d.ts
 type Props = Record<string, unknown>;
 type MergedProps<A, B> = Omit<A, keyof B> & B;
-declare const mergeProps: <A extends Props, B extends Props>(base: A, override: B) => MergedProps<A, B>;
-//#endregion
-export { mergeProps };
+export declare const mergeProps: <A extends Props, B extends Props>(base: A, override: B) => MergedProps<A, B>;
+//#endregion

package/dist/helpers/merge-props.mjs

@@ -1,5 +1,5 @@
-import { cn } from "./cn.mjs";
 import { chain } from "./chain.mjs";
+import { clsx } from "clsx";
 //#region src/helpers/merge-props.ts
 const isEventHandler = (key, value) => typeof value === "function" && key.startsWith("on") && key.length > 2 && key[2] === (key[2]?.toUpperCase() ?? "");
 const mergeProps = (base, override) => {
@@ -7,7 +7,7 @@ const mergeProps = (base, override) => {
 	for (const key of Object.keys(override)) {
 		const baseValue = base[key];
 		const overrideValue = override[key];
-		if (key === "className") result[key] = cn(baseValue, overrideValue);
+		if (key === "className") result[key] = clsx(baseValue, overrideValue);
 		else if (key === "style") result[key] = {
 			...baseValue,
 			...overrideValue
@@ -17,40 +17,5 @@ const mergeProps = (base, override) => {
 	}
 	return result;
 };
-if (import.meta.vitest) describe("mergeProps", () => {
-	it("classNameをcnでマージする", () => {
-		const merged = mergeProps({ className: "p-2 text-fg-base" }, { className: "text-fg-mute" });
-		expect(merged.className).toBe("p-2 text-fg-mute");
-	});
-	it("styleを浅くマージする", () => {
-		const merged = mergeProps({ style: {
-			color: "red",
-			fontSize: 12
-		} }, { style: { color: "blue" } });
-		expect(merged.style).toEqual({
-			color: "blue",
-			fontSize: 12
-		});
-	});
-	it("onClickなどのイベントハンドラを連結する", () => {
-		const calls = [];
-		mergeProps({ onClick: () => calls.push("a") }, { onClick: () => calls.push("b") }).onClick();
-		expect(calls).toEqual(["a", "b"]);
-	});
-	it("それ以外のpropsは後勝ちで上書きする", () => {
-		const merged = mergeProps({
-			id: "a",
-			disabled: true
-		}, { id: "b" });
-		expect(merged).toEqual({
-			id: "b",
-			disabled: true
-		});
-	});
-	it("overrideがundefinedの場合はbaseの値を保持する", () => {
-		const merged = mergeProps({ id: "a" }, { id: void 0 });
-		expect(merged.id).toBe("a");
-	});
-});
 //#endregion
 export { mergeProps };

package/dist/helpers/merge-refs.d.mts

@@ -1,5 +1,4 @@
 import { Ref, RefCallback } from "react";
 //#region src/helpers/merge-refs.d.ts
-declare const mergeRefs: <T>(...refs: ReadonlyArray<Ref<T> | undefined>) => RefCallback<T>;
-//#endregion
-export { mergeRefs };
+export declare const mergeRefs: <T>(...refs: ReadonlyArray<Ref<T> | undefined>) => RefCallback<T>;
+//#endregion