@k8o/arte-odyssey 1.1.0 → 1.3.0

package/dist/components/code/code.js

@@ -18,7 +18,7 @@ const Code = ({ children }) => {
           "span",
           {
             "aria-label": `Color: ${colorInfo.color}`,
-            className: "inline-block h-3 w-3 flex-shrink-0 rounded-sm border border-gray-300",
+            className: "inline-block h-3 w-3 shrink-0 rounded-sm border border-border-base",
             role: "img",
             style: { backgroundColor: colorInfo.color }
           }

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

@@ -0,0 +1,42 @@
+import type { ChangeEventHandler, FC, PropsWithChildren, ReactElement } from 'react';
+type AcceptedFile = {
+    file: File;
+    id: string;
+};
+type FileFieldContext = {
+    isDisabled: boolean;
+    isInvalid: boolean;
+    acceptedFiles: AcceptedFile[];
+    onFileDelete: (id: string) => void;
+    openFilePicker: () => void;
+};
+declare const FileFieldContext: import("react").Context<FileFieldContext | null>;
+export declare const FileFieldProvider: import("react").Context<FileFieldContext | null>;
+export declare const FileField: {
+    readonly Root: ({ children, id, name, describedbyId, isDisabled, isInvalid, isRequired, accept, multiple, maxFiles, onChange, webkitDirectory, }: PropsWithChildren<{
+        id?: string;
+        name?: string;
+        describedbyId?: string | undefined;
+        isDisabled?: boolean;
+        isInvalid?: boolean;
+        isRequired?: boolean;
+        accept?: string;
+        multiple?: boolean;
+        maxFiles?: number;
+        defaultValue?: File[];
+        onChange?: ChangeEventHandler<HTMLInputElement>;
+        webkitDirectory?: boolean;
+    }>) => import("react/jsx-runtime").JSX.Element;
+    readonly Trigger: FC<{
+        renderItem: (props: {
+            onClick: () => void;
+            disabled: boolean;
+            invalid: boolean;
+        }) => ReactElement;
+    }>;
+    readonly ItemList: FC<{
+        showWebkitRelativePath?: boolean;
+        clearable?: boolean;
+    }>;
+};
+export {};

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

@@ -0,0 +1,153 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  use,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { uuidV4 } from "../../../helpers/uuid-v4";
+import { IconButton } from "../../icon-button";
+import { CloseIcon } from "../../icons";
+const FileFieldContext = createContext(null);
+const FileFieldProvider = FileFieldContext;
+const useFileFieldContext = () => {
+  const fileField = use(FileFieldContext);
+  if (!fileField) {
+    throw new Error("useFileFieldContext must be used within a FileField.Root");
+  }
+  return fileField;
+};
+const Root = ({
+  children,
+  id,
+  name,
+  describedbyId,
+  isDisabled = false,
+  isInvalid = false,
+  isRequired = false,
+  accept,
+  multiple = false,
+  maxFiles,
+  onChange,
+  webkitDirectory = false
+}) => {
+  const generatedId = useId();
+  const inputRef = useRef(null);
+  const [acceptedFiles, setAcceptedFiles] = useState([]);
+  const onFilesChange = useCallback(
+    (event) => {
+      onChange?.(event);
+      const files = Array.from(event.target.files ?? []);
+      const newFiles = files.map((file) => ({ file, id: uuidV4() }));
+      const updatedFiles = multiple || webkitDirectory ? [...acceptedFiles, ...newFiles].slice(
+        0,
+        maxFiles ?? Number.POSITIVE_INFINITY
+      ) : newFiles.slice(0, 1);
+      setAcceptedFiles(updatedFiles);
+    },
+    [acceptedFiles, multiple, maxFiles, onChange, webkitDirectory]
+  );
+  const onFileDelete = useCallback(
+    (fileId) => {
+      const updatedFiles = acceptedFiles.filter((f) => f.id !== fileId);
+      setAcceptedFiles(updatedFiles);
+      if (inputRef.current && onChange) {
+        const dataTransfer = new DataTransfer();
+        for (const { file } of updatedFiles) {
+          dataTransfer.items.add(file);
+        }
+        inputRef.current.files = dataTransfer.files;
+        const event = new Event("change", { bubbles: true });
+        Object.defineProperty(event, "target", {
+          writable: false,
+          value: inputRef.current
+        });
+        onChange(event);
+      }
+    },
+    [acceptedFiles, onChange]
+  );
+  const openFilePicker = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      isDisabled,
+      isInvalid,
+      acceptedFiles,
+      onFileDelete,
+      openFilePicker
+    }),
+    [isDisabled, isInvalid, acceptedFiles, onFileDelete, openFilePicker]
+  );
+  return /* @__PURE__ */ jsxs(FileFieldProvider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        accept,
+        "aria-describedby": describedbyId,
+        "aria-invalid": isInvalid,
+        className: "sr-only",
+        disabled: isDisabled,
+        id: id ?? generatedId,
+        multiple,
+        name,
+        onChange: onFilesChange,
+        ref: inputRef,
+        required: isRequired,
+        type: "file",
+        webkitdirectory: webkitDirectory ? "true" : void 0
+      }
+    ),
+    children
+  ] });
+};
+const Trigger = ({ renderItem }) => {
+  const context = useFileFieldContext();
+  return renderItem({
+    onClick: context.openFilePicker,
+    disabled: context.isDisabled,
+    invalid: context.isInvalid
+  });
+};
+const ItemList = ({ showWebkitRelativePath, clearable }) => {
+  const { acceptedFiles, onFileDelete } = useFileFieldContext();
+  if (acceptedFiles.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "mt-2 space-y-2", children: acceptedFiles.map((acceptedFile) => {
+    const { file, id } = acceptedFile;
+    const onDelete = () => onFileDelete(id);
+    const sizeInKB = (file.size / 1024).toFixed(2);
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "flex items-center justify-between rounded-md border border-border-base bg-bg-base px-3 py-2",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-fg-base text-sm", children: showWebkitRelativePath ? file.webkitRelativePath : file.name }),
+            /* @__PURE__ */ jsxs("span", { className: "text-fg-mute text-xs", children: [
+              sizeInKB,
+              " KB"
+            ] })
+          ] }),
+          clearable && /* @__PURE__ */ jsx(IconButton, { label: "\u30D5\u30A1\u30A4\u30EB\u3092\u524A\u9664", onClick: onDelete, children: /* @__PURE__ */ jsx(CloseIcon, { size: "sm" }) })
+        ]
+      },
+      id
+    );
+  }) });
+};
+const FileField = {
+  Root,
+  Trigger,
+  ItemList
+};
+export {
+  FileField,
+  FileFieldProvider
+};

package/dist/components/form/file-field/file-field.stories.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../../button";
+import { FileField } from "./file-field";
+const meta = {
+  title: "components/form/file-field",
+  component: FileField.Root,
+  args: {
+    id: "filefield"
+  },
+  render: (args) => {
+    return /* @__PURE__ */ jsxs(FileField.Root, { ...args, children: [
+      /* @__PURE__ */ jsx(
+        FileField.Trigger,
+        {
+          renderItem: ({ disabled, onClick }) => /* @__PURE__ */ jsx(Button, { disabled, onClick, children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
+        }
+      ),
+      /* @__PURE__ */ jsx(FileField.ItemList, {})
+    ] });
+  },
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // FileField単体ではラベルを付随しない
+          "label-title-only": { enabled: false },
+          label: { enabled: false }
+        }
+      }
+    }
+  }
+};
+var file_field_stories_default = meta;
+const Default = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false
+  }
+};
+const Multiple = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    multiple: true
+  }
+};
+const MaxFiles = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    multiple: true,
+    maxFiles: 3
+  }
+};
+const ImageOnly = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    accept: "image/*"
+  }
+};
+const WebkitDirectory = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    webkitDirectory: true
+  }
+};
+const HasClearButton = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    multiple: true
+  },
+  render: (args) => {
+    return /* @__PURE__ */ jsxs(FileField.Root, { ...args, children: [
+      /* @__PURE__ */ jsx(
+        FileField.Trigger,
+        {
+          renderItem: ({ disabled, onClick }) => /* @__PURE__ */ jsx(Button, { disabled, onClick, children: "\u30D5\u30A1\u30A4\u30EB\u3092\u8FFD\u52A0" })
+        }
+      ),
+      /* @__PURE__ */ jsx(FileField.ItemList, { clearable: true })
+    ] });
+  }
+};
+const ShowWebkitRelativePath = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    webkitDirectory: true
+  },
+  render: (args) => {
+    return /* @__PURE__ */ jsxs(FileField.Root, { ...args, children: [
+      /* @__PURE__ */ jsx(
+        FileField.Trigger,
+        {
+          renderItem: ({ disabled, onClick }) => /* @__PURE__ */ jsx(Button, { disabled, onClick, variant: "outlined", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
+        }
+      ),
+      /* @__PURE__ */ jsx(FileField.ItemList, { showWebkitRelativePath: true })
+    ] });
+  }
+};
+const OnlyTrigger = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false
+  },
+  render: (args) => {
+    return /* @__PURE__ */ jsx(FileField.Root, { ...args, children: /* @__PURE__ */ jsx(
+      FileField.Trigger,
+      {
+        renderItem: ({ disabled, onClick }) => /* @__PURE__ */ jsx(Button, { disabled, onClick, variant: "outlined", children: "\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E" })
+      }
+    ) });
+  }
+};
+export {
+  Default,
+  HasClearButton,
+  ImageOnly,
+  MaxFiles,
+  Multiple,
+  OnlyTrigger,
+  ShowWebkitRelativePath,
+  WebkitDirectory,
+  file_field_stories_default as default
+};

package/dist/components/form/file-field/index.d.ts

@@ -0,0 +1 @@
+export * from './file-field';

package/dist/components/form/file-field/index.js

@@ -0,0 +1 @@
+export * from "./file-field";

package/dist/components/icon-button/icon-button.js

@@ -13,7 +13,7 @@ const IconButton = ({
     {
       "aria-label": props.role ? label : void 0,
       className: cn(
-        "inline-flex rounded-full bg-transparent",
+        "inline-flex cursor-pointer rounded-full bg-transparent",
         "hover:bg-bg-subtle",
         "focus-visible:border-transparent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border-info active:bg-bg-emphasize",
         bg === "base" && "bg-bg-base/90",

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './dropdown-menu';
 export * from './error-boundary';
 export * from './form/autocomplete';
 export * from './form/checkbox';
+export * from './form/file-field';
 export * from './form/form-control';
 export * from './form/number-field';
 export * from './form/radio';

package/dist/components/index.js

@@ -12,6 +12,7 @@ export * from "./dropdown-menu";
 export * from "./error-boundary";
 export * from "./form/autocomplete";
 export * from "./form/checkbox";
+export * from "./form/file-field";
 export * from "./form/form-control";
 export * from "./form/number-field";
 export * from "./form/radio";

package/dist/helpers/color/find-all-colors.js

@@ -79,7 +79,8 @@ 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 (/\s|;|,|:/.test(beforeChar) && /\s|;|,|$|\)|]|}/.test(afterChar)) {
+      const isWordBoundary = !(/[a-zA-Z0-9]/.test(beforeChar) || /[a-zA-Z0-9]/.test(afterChar));
+      if (isWordBoundary) {
         results.push({
           color,
           start: index,
@@ -202,6 +203,18 @@ if (import.meta.vitest) {
         const result = findAllColors("red");
         expect(result).toEqual([{ color: "red", start: 0, end: 3 }]);
       });
+      it("\u4ED6\u306E\u5358\u8A9E\u306E\u4E00\u90E8\u3068\u3057\u3066\u542B\u307E\u308C\u308B\u8272\u540D\u3092\u691C\u51FA\u3057\u306A\u3044", () => {
+        const result = findAllColors("reduce");
+        expect(result).toEqual([]);
+      });
+      it("\u4ED6\u306E\u5358\u8A9E\u306E\u4E00\u90E8\u3068\u3057\u3066\u542B\u307E\u308C\u308B\u8272\u540D\u3092\u691C\u51FA\u3057\u306A\u3044\uFF08\u8907\u6570\u30D1\u30BF\u30FC\u30F3\uFF09", () => {
+        const result = findAllColors("blueberry, greenfield, redirection");
+        expect(result).toEqual([]);
+      });
+      it("\u5358\u8A9E\u306E\u4E00\u90E8\u3067\u306A\u3044\u8272\u540D\u306E\u307F\u3092\u691C\u51FA\u3059\u308B", () => {
+        const result = findAllColors("reduce color: red; blueberry");
+        expect(result).toEqual([{ color: "red", start: 14, end: 17 }]);
+      });
     });
   });
 }

package/dist/hooks/click-away/index.test.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { userEvent } from "@vitest/browser/context";
+import { userEvent } from "vitest/browser";
 import { render } from "vitest-browser-react";
 import { useClickAway } from ".";
 const OutsideClicker = ({ callback }) => {
@@ -12,7 +12,7 @@ const OutsideClicker = ({ callback }) => {
 describe("useClickAway", () => {
   it("\u9818\u57DF\u5916\u3092\u89E6\u308B\u3068callback\u304C\u547C\u3073\u51FA\u3055\u308C\u308B", async () => {
     const fn = vi.fn();
-    const { getByText } = render(/* @__PURE__ */ jsx(OutsideClicker, { callback: fn }));
+    const { getByText } = await render(/* @__PURE__ */ jsx(OutsideClicker, { callback: fn }));
     const element = getByText("Element");
     const outsideElement = getByText("Outside");
     expect(fn).not.toHaveBeenCalled();

package/dist/hooks/clipboard/index.test.js

@@ -12,7 +12,7 @@ describe("useClipboard", () => {
         writeText: writeTextMockFn
       }
     });
-    const { result } = renderHook(() => useClipboard());
+    const { result } = await renderHook(() => useClipboard());
     await result.current.writeClipboard(writeText);
     expect(writeTextMockFn).toBeCalledWith(writeText);
     expect(navigator.clipboard.writeText).toHaveBeenCalledOnce();
@@ -24,7 +24,7 @@ describe("useClipboard", () => {
         readText: readTextMockFn
       }
     });
-    const { result } = renderHook(() => useClipboard());
+    const { result } = await renderHook(() => useClipboard());
     await result.current.readClipboard();
     expect(readTextMockFn).toHaveBeenCalledOnce();
   });

package/dist/hooks/hash/index.test.js

@@ -12,12 +12,12 @@ describe("useHash", () => {
     vi.unstubAllGlobals();
     window.location.hash = realHash;
   });
-  it("\u73FE\u5728\u306Ehash\u5024\u3092\u53D6\u5F97\u3067\u304D\u308B", () => {
-    const { result } = renderHook(() => useHash());
+  it("\u73FE\u5728\u306Ehash\u5024\u3092\u53D6\u5F97\u3067\u304D\u308B", async () => {
+    const { result } = await renderHook(() => useHash());
     expect(result.current).toBe("test");
   });
-  it("hash\u5024\u304C\u5909\u66F4\u3055\u308C\u305F\u3068\u304D\u306B\u66F4\u65B0\u3055\u308C\u308B", () => {
-    const { result, act } = renderHook(() => useHash());
+  it("hash\u5024\u304C\u5909\u66F4\u3055\u308C\u305F\u3068\u304D\u306B\u66F4\u65B0\u3055\u308C\u308B", async () => {
+    const { result, act } = await renderHook(() => useHash());
     act(() => {
       window.location.hash = "#changed";
       window.dispatchEvent(new Event("hashchange"));
@@ -25,7 +25,7 @@ describe("useHash", () => {
     expect(result.current).toBe("changed");
   });
   it("pushState\u3067hash\u5024\u304C\u5909\u66F4\u3055\u308C\u305F\u3068\u304D\u306B\u66F4\u65B0\u3055\u308C\u308B", async () => {
-    const { result, act } = renderHook(() => useHash());
+    const { result, act } = await renderHook(() => useHash());
     act(() => {
       window.history.pushState({}, "", "/#pushed");
     });
@@ -34,7 +34,7 @@ describe("useHash", () => {
     });
   });
   it("replaceState\u3067hash\u5024\u304C\u5909\u66F4\u3055\u308C\u305F\u3068\u304D\u306B\u66F4\u65B0\u3055\u308C\u308B", async () => {
-    const { result, act } = renderHook(() => useHash());
+    const { result, act } = await renderHook(() => useHash());
     act(() => {
       window.history.replaceState({}, "", "/#replaced");
     });

package/dist/hooks/index.d.ts

@@ -4,7 +4,9 @@ export * from './clipboard';
 export * from './hash';
 export * from './interval';
 export * from './local-storage';
+export * from './resize';
 export * from './scroll-direction';
 export * from './step';
 export * from './timeout';
+export * from './window-resize';
 export * from './window-size';

package/dist/hooks/index.js

@@ -4,7 +4,9 @@ export * from "./clipboard";
 export * from "./hash";
 export * from "./interval";
 export * from "./local-storage";
+export * from "./resize";
 export * from "./scroll-direction";
 export * from "./step";
 export * from "./timeout";
+export * from "./window-resize";
 export * from "./window-size";

package/dist/hooks/interval/index.test.js

@@ -1,28 +1,28 @@
 import { renderHook } from "vitest-browser-react";
 import { useInterval } from ".";
 describe("useInterval", () => {
-  it("\u6307\u5B9A\u6642\u9593\u3054\u3068\u306B\u5B9F\u884C\u3055\u308C\u308B", () => {
+  it("\u6307\u5B9A\u6642\u9593\u3054\u3068\u306B\u5B9F\u884C\u3055\u308C\u308B", async () => {
     const fn = vi.fn();
     vi.useFakeTimers();
-    renderHook(() => {
+    await renderHook(() => {
       useInterval(fn, 1e3);
     });
     vi.advanceTimersByTime(2e3);
     expect(fn).toHaveBeenCalledTimes(2);
   });
-  it("\u6307\u5B9A\u6642\u9593\u3092\u904E\u304E\u306A\u3044\u3068\u5B9F\u884C\u3055\u308C\u306A\u3044", () => {
+  it("\u6307\u5B9A\u6642\u9593\u3092\u904E\u304E\u306A\u3044\u3068\u5B9F\u884C\u3055\u308C\u306A\u3044", async () => {
     const fn = vi.fn();
     vi.useFakeTimers();
-    renderHook(() => {
+    await renderHook(() => {
       useInterval(fn, 1e3);
     });
     vi.advanceTimersByTime(10);
     expect(fn).not.toHaveBeenCalled();
   });
-  it("\u30A2\u30F3\u30DE\u30A6\u30F3\u30C8\u5F8C\u306F\u5B9F\u884C\u3055\u308C\u306A\u3044", () => {
+  it("\u30A2\u30F3\u30DE\u30A6\u30F3\u30C8\u5F8C\u306F\u5B9F\u884C\u3055\u308C\u306A\u3044", async () => {
     const fn = vi.fn();
     vi.useFakeTimers();
-    const { unmount } = renderHook(() => {
+    const { unmount } = await renderHook(() => {
       useInterval(fn, 1e3);
     });
     unmount();

package/dist/hooks/local-storage/index.test.js

@@ -9,17 +9,21 @@ describe("useLocalStorage", () => {
   afterAll(() => {
     consoleErrorMock.mockReset();
   });
-  it("localStorage\u306B\u5024\u304C\u306A\u3051\u308C\u3070\u521D\u671F\u5024\u3092\u8FD4\u3059", () => {
-    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+  it("localStorage\u306B\u5024\u304C\u306A\u3051\u308C\u3070\u521D\u671F\u5024\u3092\u8FD4\u3059", async () => {
+    const { result } = await renderHook(
+      () => useLocalStorage(key, "defaultValue")
+    );
     expect(result.current[0]).toBe("defaultValue");
   });
-  it("localStorage\u306B\u5024\u304C\u5B58\u5728\u3042\u308C\u3070\u305D\u306E\u5024\u3092\u8FD4\u3059", () => {
+  it("localStorage\u306B\u5024\u304C\u5B58\u5728\u3042\u308C\u3070\u305D\u306E\u5024\u3092\u8FD4\u3059", async () => {
     localStorage.setItem(key, JSON.stringify("storedValue"));
-    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+    const { result } = await renderHook(
+      () => useLocalStorage(key, "defaultValue")
+    );
     expect(result.current[0]).toBe("storedValue");
   });
-  it("\u66F4\u65B0\u51E6\u7406\u3067\u306FlocalStorage\u3068state\u306E\u4E21\u65B9\u3092\u66F4\u65B0\u3059\u308B", () => {
-    const { result, act } = renderHook(
+  it("\u66F4\u65B0\u51E6\u7406\u3067\u306FlocalStorage\u3068state\u306E\u4E21\u65B9\u3092\u66F4\u65B0\u3059\u308B", async () => {
+    const { result, act } = await renderHook(
       () => useLocalStorage(key, "defaultValue")
     );
     act(() => {
@@ -28,9 +32,9 @@ describe("useLocalStorage", () => {
     expect(localStorage.getItem(key)).toBe(JSON.stringify("newValue"));
     expect(result.current[0]).toBe("newValue");
   });
-  it("\u524A\u9664\u51E6\u7406\u3067\u306FlocalStorage\u306F\u5024\u3092\u524A\u9664\u3055\u308C\u3001state\u306F\u521D\u671F\u5024\u306B\u306A\u308B", () => {
+  it("\u524A\u9664\u51E6\u7406\u3067\u306FlocalStorage\u306F\u5024\u3092\u524A\u9664\u3055\u308C\u3001state\u306F\u521D\u671F\u5024\u306B\u306A\u308B", async () => {
     localStorage.setItem(key, JSON.stringify("storedValue"));
-    const { result, act } = renderHook(
+    const { result, act } = await renderHook(
       () => useLocalStorage(key, "defaultValue")
     );
     act(() => {
@@ -39,8 +43,8 @@ describe("useLocalStorage", () => {
     expect(localStorage.getItem(key)).toBeNull();
     expect(result.current[0]).toBe("defaultValue");
   });
-  it("null\u3067\u66F4\u65B0\u3057\u305F\u5834\u5408\u306Fremove\u3068\u540C\u3058\u7D50\u679C\u306B\u306A\u308B", () => {
-    const { result, act } = renderHook(
+  it("null\u3067\u66F4\u65B0\u3057\u305F\u5834\u5408\u306Fremove\u3068\u540C\u3058\u7D50\u679C\u306B\u306A\u308B", async () => {
+    const { result, act } = await renderHook(
       () => useLocalStorage(key, {
         lang: ["ja", "en"]
       })
@@ -51,8 +55,8 @@ describe("useLocalStorage", () => {
     expect(localStorage.getItem(key)).toBeNull();
     expect(result.current[0]).toEqual({ lang: ["ja", "en"] });
   });
-  it("storage\u30A4\u30D9\u30F3\u30C8\u306E\u767A\u706B\u306B\u5FDC\u3058\u3066\u72B6state\u304C\u66F4\u65B0\u3055\u308C\u308B", () => {
-    const { result, act } = renderHook(
+  it("storage\u30A4\u30D9\u30F3\u30C8\u306E\u767A\u706B\u306B\u5FDC\u3058\u3066\u72B6state\u304C\u66F4\u65B0\u3055\u308C\u308B", async () => {
+    const { result, act } = await renderHook(
       () => useLocalStorage(key, "defaultValue")
     );
     act(() => {
@@ -66,8 +70,8 @@ describe("useLocalStorage", () => {
     });
     expect(result.current[0]).toBe("updatedValue");
   });
-  it("\u7570\u306A\u308B\u30AD\u30FC\u306Estorage\u30A4\u30D9\u30F3\u30C8\u306Fstate\u3092\u66F4\u65B0\u3057\u306A\u3044", () => {
-    const { result, act } = renderHook(
+  it("\u7570\u306A\u308B\u30AD\u30FC\u306Estorage\u30A4\u30D9\u30F3\u30C8\u306Fstate\u3092\u66F4\u65B0\u3057\u306A\u3044", async () => {
+    const { result, act } = await renderHook(
       () => useLocalStorage(key, "defaultValue")
     );
     act(() => {
@@ -81,9 +85,11 @@ describe("useLocalStorage", () => {
     });
     expect(result.current[0]).toBe("defaultValue");
   });
-  it("JSON\u3092\u30D1\u30FC\u30B9\u3067\u304D\u306A\u3044\u6642\u306F\u30A8\u30E9\u30FC\u3092\u5410\u3044\u3066\u521D\u671F\u5024\u3092\u8FD4\u3059", () => {
+  it("JSON\u3092\u30D1\u30FC\u30B9\u3067\u304D\u306A\u3044\u6642\u306F\u30A8\u30E9\u30FC\u3092\u5410\u3044\u3066\u521D\u671F\u5024\u3092\u8FD4\u3059", async () => {
     localStorage.setItem(key, "{invalidJSON");
-    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+    const { result } = await renderHook(
+      () => useLocalStorage(key, "defaultValue")
+    );
     expect(result.current[0]).toBe("defaultValue");
     expect(consoleErrorMock).toHaveBeenCalledOnce();
   });

package/dist/hooks/resize/index.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+type Options = {
+    enabled?: boolean;
+    debounceMs?: number;
+};
+export declare const useResize: <T extends Element = HTMLElement>(callback: (entry: ResizeObserverEntry) => void, options?: Options) => RefObject<T | null>;
+export {};

package/dist/hooks/resize/index.js

@@ -0,0 +1,37 @@
+"use client";
+import { useEffect, useRef } from "react";
+const useResize = (callback, options = {}) => {
+  const { enabled = true, debounceMs } = options;
+  const ref = useRef(null);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const element = ref.current;
+    if (!element) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (debounceMs !== void 0) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
+          timeoutRef.current = setTimeout(() => {
+            callback(entry);
+          }, debounceMs);
+        } else {
+          callback(entry);
+        }
+      }
+    });
+    observer.observe(element);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      observer.disconnect();
+    };
+  }, [callback, enabled, debounceMs]);
+  return ref;
+};
+export {
+  useResize
+};

package/dist/hooks/resize/index.test.js

@@ -0,0 +1,68 @@
+import { renderHook } from "vitest-browser-react";
+import { useResize } from ".";
+describe("useResize", () => {
+  it("\u8981\u7D20\u306E\u30EA\u30B5\u30A4\u30BA\u6642\u306B\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u308B", async () => {
+    const callback = vi.fn();
+    const { result } = await renderHook(() => useResize(callback));
+    const element = document.createElement("div");
+    Object.defineProperty(result.current, "current", {
+      writable: true,
+      value: element
+    });
+    const observer = new ResizeObserver(callback);
+    observer.observe(element);
+    const contentRect = new DOMRectReadOnly(0, 0, 100, 100);
+    const entry = {
+      target: element,
+      contentRect,
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: []
+    };
+    callback(entry);
+    expect(callback).toHaveBeenCalled();
+    observer.disconnect();
+  });
+  it("enabled=false\u306E\u5834\u5408\u306F\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u306A\u3044", async () => {
+    const callback = vi.fn();
+    const { result } = await renderHook(
+      () => useResize(callback, { enabled: false })
+    );
+    expect(result.current.current).toBeNull();
+    expect(callback).not.toHaveBeenCalled();
+  });
+  it("debounceMs\u6307\u5B9A\u6642\u306F\u6307\u5B9A\u6642\u9593\u5F8C\u306B\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u308B", async () => {
+    vi.useFakeTimers();
+    const callback = vi.fn();
+    const { result } = await renderHook(
+      () => useResize(callback, { debounceMs: 300 })
+    );
+    const element = document.createElement("div");
+    Object.defineProperty(result.current, "current", {
+      writable: true,
+      value: element
+    });
+    const observer = new ResizeObserver((entries) => {
+      for (const entry2 of entries) {
+        callback(entry2);
+      }
+    });
+    observer.observe(element);
+    const contentRect = new DOMRectReadOnly(0, 0, 100, 100);
+    const entry = {
+      target: element,
+      contentRect,
+      borderBoxSize: [],
+      contentBoxSize: [],
+      devicePixelContentBoxSize: []
+    };
+    callback(entry);
+    expect(callback).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(299);
+    expect(callback).toHaveBeenCalledTimes(1);
+    vi.advanceTimersByTime(1);
+    expect(callback).toHaveBeenCalledTimes(1);
+    observer.disconnect();
+    vi.useRealTimers();
+  });
+});

package/dist/hooks/scroll-direction/index.test.js

@@ -11,29 +11,29 @@ describe("useScrollDirection", () => {
       value: 0
     });
   });
-  it("\u521D\u671F\u72B6\u614B\u3067\u306Fx: right, y: up\u3092\u8FD4\u3059", () => {
-    const { result } = renderHook(() => useScrollDirection());
+  it("\u521D\u671F\u72B6\u614B\u3067\u306Fx: right, y: up\u3092\u8FD4\u3059", async () => {
+    const { result } = await renderHook(() => useScrollDirection());
     expect(result.current).toEqual({ x: "right", y: "up" });
   });
   describe("Vertical scroll", () => {
-    it("100px\u4EE5\u4E0A\u4E0B\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068y: down\u3092\u8FD4\u3059", () => {
-      const { result, act } = renderHook(() => useScrollDirection());
+    it("100px\u4EE5\u4E0A\u4E0B\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068y: down\u3092\u8FD4\u3059", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection());
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 150 });
         window.dispatchEvent(new Event("scroll"));
       });
       expect(result.current.y).toBe("down");
     });
-    it("100px\u672A\u6E80\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306Fy: up\u306E\u307E\u307E", () => {
-      const { result, act } = renderHook(() => useScrollDirection());
+    it("100px\u672A\u6E80\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306Fy: up\u306E\u307E\u307E", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection());
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 50 });
         window.dispatchEvent(new Event("scroll"));
       });
       expect(result.current.y).toBe("up");
     });
-    it("\u4E0A\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068y: up\u3092\u8FD4\u3059", () => {
-      const { result, act } = renderHook(() => useScrollDirection());
+    it("\u4E0A\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068y: up\u3092\u8FD4\u3059", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection());
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 200 });
         window.dispatchEvent(new Event("scroll"));
@@ -47,24 +47,24 @@ describe("useScrollDirection", () => {
     });
   });
   describe("Horizontal scroll", () => {
-    it("100px\u4EE5\u4E0A\u53F3\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068x: right\u3092\u8FD4\u3059", () => {
-      const { result, act } = renderHook(() => useScrollDirection());
+    it("100px\u4EE5\u4E0A\u53F3\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068x: right\u3092\u8FD4\u3059", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection());
       act(() => {
         Object.defineProperty(window, "scrollX", { value: 150 });
         window.dispatchEvent(new Event("scroll"));
       });
       expect(result.current.x).toBe("right");
     });
-    it("100px\u672A\u6E80\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306Fx: right\u306E\u307E\u307E", () => {
-      const { result, act } = renderHook(() => useScrollDirection());
+    it("100px\u672A\u6E80\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306Fx: right\u306E\u307E\u307E", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection());
       act(() => {
         Object.defineProperty(window, "scrollX", { value: 50 });
         window.dispatchEvent(new Event("scroll"));
       });
       expect(result.current.x).toBe("right");
     });
-    it("\u5DE6\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068x: left\u3092\u8FD4\u3059", () => {
-      const { result, act } = renderHook(() => useScrollDirection());
+    it("\u5DE6\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068x: left\u3092\u8FD4\u3059", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection());
       act(() => {
         Object.defineProperty(window, "scrollX", { value: 200 });
         window.dispatchEvent(new Event("scroll"));
@@ -78,8 +78,8 @@ describe("useScrollDirection", () => {
     });
   });
   describe("Combined scroll", () => {
-    it("\u7E26\u6A2A\u540C\u6642\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3057\u305F\u5834\u5408\u3001\u4E21\u65B9\u5411\u3092\u6B63\u3057\u304F\u691C\u77E5\u3059\u308B", () => {
-      const { result, act } = renderHook(() => useScrollDirection());
+    it("\u7E26\u6A2A\u540C\u6642\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3057\u305F\u5834\u5408\u3001\u4E21\u65B9\u5411\u3092\u6B63\u3057\u304F\u691C\u77E5\u3059\u308B", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection());
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 150 });
         Object.defineProperty(window, "scrollX", { value: 150 });
@@ -88,18 +88,18 @@ describe("useScrollDirection", () => {
       expect(result.current).toEqual({ x: "right", y: "down" });
     });
   });
-  it("\u30A2\u30F3\u30DE\u30A6\u30F3\u30C8\u5F8C\u306F\u30A4\u30D9\u30F3\u30C8\u30EA\u30B9\u30CA\u30FC\u304C\u524A\u9664\u3055\u308C\u308B", () => {
+  it("\u30A2\u30F3\u30DE\u30A6\u30F3\u30C8\u5F8C\u306F\u30A4\u30D9\u30F3\u30C8\u30EA\u30B9\u30CA\u30FC\u304C\u524A\u9664\u3055\u308C\u308B", async () => {
     const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
-    const { unmount } = renderHook(() => useScrollDirection());
+    const { unmount } = await renderHook(() => useScrollDirection());
     unmount();
     expect(removeEventListenerSpy).toHaveBeenCalledWith(
       "scroll",
       expect.any(Function)
     );
   });
-  it("\u30B9\u30AF\u30ED\u30FC\u30EB\u30A4\u30D9\u30F3\u30C8\u304Cpassive: true\u3067\u767B\u9332\u3055\u308C\u308B", () => {
+  it("\u30B9\u30AF\u30ED\u30FC\u30EB\u30A4\u30D9\u30F3\u30C8\u304Cpassive: true\u3067\u767B\u9332\u3055\u308C\u308B", async () => {
     const addEventListenerSpy = vi.spyOn(window, "addEventListener");
-    renderHook(() => useScrollDirection());
+    await renderHook(() => useScrollDirection());
     expect(addEventListenerSpy).toHaveBeenCalledWith(
       "scroll",
       expect.any(Function),
@@ -107,8 +107,8 @@ describe("useScrollDirection", () => {
     );
   });
   describe("Threshold parameter", () => {
-    it("threshold\u304C100\u306E\u5834\u5408\u3001100px\u4EE5\u4E0B\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306F\u65B9\u5411\u304C\u5909\u308F\u3089\u306A\u3044", () => {
-      const { result, act } = renderHook(() => useScrollDirection(100));
+    it("threshold\u304C100\u306E\u5834\u5408\u3001100px\u4EE5\u4E0B\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306F\u65B9\u5411\u304C\u5909\u308F\u3089\u306A\u3044", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection(100));
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 100 });
         window.dispatchEvent(new Event("scroll"));
@@ -120,8 +120,8 @@ describe("useScrollDirection", () => {
       });
       expect(result.current.x).toBe("right");
     });
-    it("threshold\u304C100\u306E\u5834\u5408\u3001101px\u4EE5\u4E0A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u65B9\u5411\u304C\u5909\u308F\u308B", () => {
-      const { result, act } = renderHook(() => useScrollDirection(100));
+    it("threshold\u304C100\u306E\u5834\u5408\u3001101px\u4EE5\u4E0A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u65B9\u5411\u304C\u5909\u308F\u308B", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection(100));
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 101 });
         window.dispatchEvent(new Event("scroll"));
@@ -133,32 +133,32 @@ describe("useScrollDirection", () => {
       });
       expect(result.current.x).toBe("right");
     });
-    it("threshold\u304C10\u306E\u5834\u5408\u300110px\u4EE5\u4E0B\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306F\u65B9\u5411\u304C\u5909\u308F\u3089\u306A\u3044", () => {
-      const { result, act } = renderHook(() => useScrollDirection(10));
+    it("threshold\u304C10\u306E\u5834\u5408\u300110px\u4EE5\u4E0B\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306F\u65B9\u5411\u304C\u5909\u308F\u3089\u306A\u3044", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection(10));
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 10 });
         window.dispatchEvent(new Event("scroll"));
       });
       expect(result.current.y).toBe("up");
     });
-    it("threshold\u304C10\u306E\u5834\u5408\u300111px\u4EE5\u4E0A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u65B9\u5411\u304C\u5909\u308F\u308B", () => {
-      const { result, act } = renderHook(() => useScrollDirection(10));
+    it("threshold\u304C10\u306E\u5834\u5408\u300111px\u4EE5\u4E0A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u65B9\u5411\u304C\u5909\u308F\u308B", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection(10));
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 11 });
         window.dispatchEvent(new Event("scroll"));
       });
       expect(result.current.y).toBe("down");
     });
-    it("threshold\u304C0\u306E\u5834\u5408\u30011px\u4EE5\u4E0A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u65B9\u5411\u304C\u5909\u308F\u308B", () => {
-      const { result, act } = renderHook(() => useScrollDirection(0));
+    it("threshold\u304C0\u306E\u5834\u5408\u30011px\u4EE5\u4E0A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u65B9\u5411\u304C\u5909\u308F\u308B", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection(0));
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 1 });
         window.dispatchEvent(new Event("scroll"));
       });
       expect(result.current.y).toBe("down");
     });
-    it("\u30C7\u30D5\u30A9\u30EB\u30C8\u5024\uFF08threshold\u672A\u6307\u5B9A\uFF09\u3067\u306F50px\u306E\u95BE\u5024\u304C\u9069\u7528\u3055\u308C\u308B", () => {
-      const { result, act } = renderHook(() => useScrollDirection());
+    it("\u30C7\u30D5\u30A9\u30EB\u30C8\u5024\uFF08threshold\u672A\u6307\u5B9A\uFF09\u3067\u306F50px\u306E\u95BE\u5024\u304C\u9069\u7528\u3055\u308C\u308B", async () => {
+      const { result, act } = await renderHook(() => useScrollDirection());
       act(() => {
         Object.defineProperty(window, "scrollY", { value: 50 });
         window.dispatchEvent(new Event("scroll"));

package/dist/hooks/step/index.test.js

@@ -1,19 +1,21 @@
-import { userEvent } from "@vitest/browser/context";
+import { userEvent } from "vitest/browser";
 import { renderHook } from "vitest-browser-react";
 import { useStep } from ".";
 describe("useStep", () => {
-  it("\u521D\u671F\u72B6\u614B", () => {
+  it("\u521D\u671F\u72B6\u614B", async () => {
     const initialCount = 1;
     const maxCount = 10;
-    const { result } = renderHook(() => useStep({ initialCount, maxCount }));
+    const { result } = await renderHook(
+      () => useStep({ initialCount, maxCount })
+    );
     expect(result.current.count).toBe(initialCount);
     expect(result.current.isDisabledBack).toBeTruthy();
     expect(result.current.isDisabledNext).toBeFalsy();
   });
-  it("next\u3067initialCount\u304B\u30891\u9032\u3080", () => {
+  it("next\u3067initialCount\u304B\u30891\u9032\u3080", async () => {
     const initialCount = 1;
     const maxCount = 10;
-    const { result, act } = renderHook(
+    const { result, act } = await renderHook(
       () => useStep({ initialCount, maxCount })
     );
     act(() => {
@@ -23,10 +25,10 @@ describe("useStep", () => {
     expect(result.current.isDisabledBack).toBeFalsy();
     expect(result.current.isDisabledNext).toBeFalsy();
   });
-  it("initialCount\u304B\u3089\u306Fback\u3067\u304D\u306A\u3044", () => {
+  it("initialCount\u304B\u3089\u306Fback\u3067\u304D\u306A\u3044", async () => {
     const initialCount = 1;
     const maxCount = 10;
-    const { result, act } = renderHook(
+    const { result, act } = await renderHook(
       () => useStep({ initialCount, maxCount })
     );
     act(() => {
@@ -36,10 +38,10 @@ describe("useStep", () => {
     expect(result.current.isDisabledBack).toBeTruthy();
     expect(result.current.isDisabledNext).toBeFalsy();
   });
-  it("maxCount\u307E\u3067\u9032\u3080", () => {
+  it("maxCount\u307E\u3067\u9032\u3080", async () => {
     const initialCount = 1;
     const maxCount = 3;
-    const { result, act } = renderHook(
+    const { result, act } = await renderHook(
       () => useStep({ initialCount, maxCount })
     );
     act(() => {
@@ -50,10 +52,10 @@ describe("useStep", () => {
     expect(result.current.isDisabledBack).toBeFalsy();
     expect(result.current.isDisabledNext).toBeTruthy();
   });
-  it("maxCount\u4EE5\u4E0A\u306F\u9032\u3081\u306A\u3044", () => {
+  it("maxCount\u4EE5\u4E0A\u306F\u9032\u3081\u306A\u3044", async () => {
     const initialCount = 1;
     const maxCount = 3;
-    const { result, act } = renderHook(
+    const { result, act } = await renderHook(
       () => useStep({ initialCount, maxCount })
     );
     act(() => {
@@ -65,10 +67,10 @@ describe("useStep", () => {
     expect(result.current.isDisabledBack).toBeFalsy();
     expect(result.current.isDisabledNext).toBeTruthy();
   });
-  it("next\u3068back\u3092\u7D44\u307F\u5408\u308F\u305B\u3066\u5229\u7528\u3067\u304D\u308B", () => {
+  it("next\u3068back\u3092\u7D44\u307F\u5408\u308F\u305B\u3066\u5229\u7528\u3067\u304D\u308B", async () => {
     const initialCount = 1;
     const maxCount = 3;
-    const { result, act } = renderHook(
+    const { result, act } = await renderHook(
       () => useStep({ initialCount, maxCount })
     );
     act(() => {
@@ -82,7 +84,9 @@ describe("useStep", () => {
   it("\u5DE6\u53F3\u30AD\u30FC\u3067\u64CD\u4F5C\u3067\u304D\u308B", async () => {
     const initialCount = 1;
     const maxCount = 3;
-    const { result } = renderHook(() => useStep({ initialCount, maxCount }));
+    const { result } = await renderHook(
+      () => useStep({ initialCount, maxCount })
+    );
     await userEvent.keyboard("{arrowright}");
     expect(result.current.count).toBe(initialCount + 1);
     await userEvent.keyboard("{arrowleft}");

package/dist/hooks/timeout/index.test.js

@@ -1,28 +1,28 @@
 import { renderHook } from "vitest-browser-react";
 import { useTimeout } from ".";
 describe("useTimeout", () => {
-  it("\u6307\u5B9A\u6642\u9593\u5F8C\u306B\u5B9F\u884C\u3055\u308C\u308B", () => {
+  it("\u6307\u5B9A\u6642\u9593\u5F8C\u306B\u5B9F\u884C\u3055\u308C\u308B", async () => {
     const fn = vi.fn();
     vi.useFakeTimers();
-    renderHook(() => {
+    await renderHook(() => {
       useTimeout(fn, 1e3);
     });
     vi.advanceTimersByTime(1e3);
     expect(fn).toHaveBeenCalledOnce();
   });
-  it("\u6307\u5B9A\u6642\u9593\u524D\u306B\u5B9F\u884C\u3055\u308C\u306A\u3044", () => {
+  it("\u6307\u5B9A\u6642\u9593\u524D\u306B\u5B9F\u884C\u3055\u308C\u306A\u3044", async () => {
     const fn = vi.fn();
     vi.useFakeTimers();
-    renderHook(() => {
+    await renderHook(() => {
       useTimeout(fn, 1e3);
     });
     vi.advanceTimersByTime(10);
     expect(fn).not.toHaveBeenCalled();
   });
-  it("\u6307\u5B9A\u6642\u9593\u524D\u306B\u30A2\u30F3\u30DE\u30A6\u30F3\u30C8\u3055\u308C\u306A\u3044\u5834\u5408\u306F\u5B9F\u884C\u3055\u308C\u306A\u3044", () => {
+  it("\u6307\u5B9A\u6642\u9593\u524D\u306B\u30A2\u30F3\u30DE\u30A6\u30F3\u30C8\u3055\u308C\u306A\u3044\u5834\u5408\u306F\u5B9F\u884C\u3055\u308C\u306A\u3044", async () => {
     const fn = vi.fn();
     vi.useFakeTimers();
-    const { unmount } = renderHook(() => {
+    const { unmount } = await renderHook(() => {
       useTimeout(fn, 1e3);
     });
     unmount();

package/dist/hooks/window-resize/index.d.ts

@@ -0,0 +1,10 @@
+type Size = {
+    width: number;
+    height: number;
+};
+type Options = {
+    enabled?: boolean;
+    debounceMs?: number;
+};
+export declare const useWindowResize: (callback: (size: Size) => void, options?: Options) => void;
+export {};

package/dist/hooks/window-resize/index.js

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useRef } from "react";
+const useWindowResize = (callback, options = {}) => {
+  const { enabled = true, debounceMs } = options;
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const handleResize = () => {
+      const size = {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+      if (debounceMs !== void 0) {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+          callback(size);
+        }, debounceMs);
+      } else {
+        callback(size);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [callback, enabled, debounceMs]);
+};
+export {
+  useWindowResize
+};

package/dist/hooks/window-resize/index.test.js

@@ -0,0 +1,43 @@
+import { renderHook } from "vitest-browser-react";
+import { useWindowResize } from ".";
+describe("useWindowResize", () => {
+  it("window\u30EA\u30B5\u30A4\u30BA\u6642\u306B\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u308B", async () => {
+    const resizedWindowSize = { width: 1e3, height: 1e3 };
+    const callback = vi.fn();
+    const { act } = await renderHook(() => useWindowResize(callback));
+    expect(callback).not.toHaveBeenCalled();
+    window.innerWidth = resizedWindowSize.width;
+    window.innerHeight = resizedWindowSize.height;
+    act(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(callback).toHaveBeenCalledWith(resizedWindowSize);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+  it("enabled=false\u306E\u5834\u5408\u306F\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u306A\u3044", async () => {
+    const callback = vi.fn();
+    await renderHook(() => useWindowResize(callback, { enabled: false }));
+    expect(callback).not.toHaveBeenCalled();
+  });
+  it("debounceMs\u6307\u5B9A\u6642\u306F\u6307\u5B9A\u6642\u9593\u5F8C\u306B\u30B3\u30FC\u30EB\u30D0\u30C3\u30AF\u304C\u547C\u3070\u308C\u308B", async () => {
+    vi.useFakeTimers();
+    const resizedWindowSize = { width: 1e3, height: 1e3 };
+    const callback = vi.fn();
+    const { act } = await renderHook(
+      () => useWindowResize(callback, { debounceMs: 300 })
+    );
+    expect(callback).not.toHaveBeenCalled();
+    window.innerWidth = resizedWindowSize.width;
+    window.innerHeight = resizedWindowSize.height;
+    act(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(callback).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(299);
+    expect(callback).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1);
+    expect(callback).toHaveBeenCalledWith(resizedWindowSize);
+    expect(callback).toHaveBeenCalledTimes(1);
+    vi.useRealTimers();
+  });
+});

package/dist/hooks/window-size/index.test.js

@@ -1,12 +1,12 @@
 import { renderHook } from "vitest-browser-react";
 import { useWindowSize } from ".";
 describe("useWindowSize", () => {
-  it("window\u30B5\u30A4\u30BA\u306E\u5909\u66F4\u306B\u5408\u308F\u305B\u3066\u73FE\u5728\u306Ewindow\u30B5\u30A4\u30BA\u3092\u53D6\u5F97\u3059\u308B", () => {
+  it("window\u30B5\u30A4\u30BA\u306E\u5909\u66F4\u306B\u5408\u308F\u305B\u3066\u73FE\u5728\u306Ewindow\u30B5\u30A4\u30BA\u3092\u53D6\u5F97\u3059\u308B", async () => {
     const initWindowSize = { width: 0, height: 0 };
     const resizedWindowSize = { width: 1e3, height: 1e3 };
     window.innerWidth = initWindowSize.width;
     window.innerHeight = initWindowSize.height;
-    const { result, act } = renderHook(() => useWindowSize());
+    const { result, act } = await renderHook(() => useWindowSize());
     expect(result.current).toEqual(initWindowSize);
     window.innerWidth = resizedWindowSize.width;
     window.innerHeight = resizedWindowSize.height;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "k8o's react ui library",
   "author": "k8o <kosakanoki@gmail.com>",
   "keywords": [
@@ -55,33 +55,33 @@
     "@floating-ui/react": "0.27.16",
     "baseline-status": "1.0.11",
     "clsx": "2.1.1",
-    "esbuild": "0.25.10",
-    "lucide-react": "0.545.0",
+    "esbuild": "0.25.12",
+    "lucide-react": "0.552.0",
     "motion": "12.23.24",
     "react-error-boundary": "6.0.0",
     "tailwind-merge": "3.3.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "4.1.1",
-    "@storybook/addon-a11y": "9.1.10",
-    "@storybook/addon-docs": "9.1.10",
-    "@storybook/addon-vitest": "9.1.10",
-    "@storybook/react-vite": "9.1.10",
-    "@tailwindcss/postcss": "4.1.14",
+    "@chromatic-com/storybook": "4.1.2",
+    "@storybook/addon-a11y": "10.0.2",
+    "@storybook/addon-docs": "10.0.2",
+    "@storybook/addon-vitest": "10.0.2",
+    "@storybook/react-vite": "10.0.2",
+    "@tailwindcss/postcss": "4.1.16",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
-    "@vitejs/plugin-react-swc": "4.1.0",
-    "@vitest/browser": "3.2.4",
-    "@vitest/ui": "3.2.4",
+    "@vitejs/plugin-react-swc": "4.2.0",
+    "@vitest/browser-playwright": "4.0.6",
+    "@vitest/ui": "4.0.6",
     "postcss": "8.5.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "storybook": "9.1.10",
+    "storybook": "10.0.2",
     "storybook-addon-mock-date": "1.0.2",
-    "tailwindcss": "4.1.14",
-    "vite": "7.1.9",
-    "vitest": "3.2.4",
-    "vitest-browser-react": "1.0.1"
+    "tailwindcss": "4.1.16",
+    "vite": "7.1.12",
+    "vitest": "4.0.6",
+    "vitest-browser-react": "2.0.2"
   },
   "peerDependencies": {
     "@types/react": ">=19.0.0",