@k8o/arte-odyssey 1.2.0 → 1.4.0

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/scroll-linked/scroll-linked.d.ts

@@ -1,2 +1,4 @@
-import type { FC } from 'react';
-export declare const ScrollLinked: FC;
+import type { FC, RefObject } from 'react';
+export declare const ScrollLinked: FC<{
+    container?: RefObject<HTMLElement | null>;
+}>;

package/dist/components/scroll-linked/scroll-linked.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { motion, useScroll, useSpring } from "motion/react";
-const ScrollLinked = () => {
-  const { scrollYProgress } = useScroll();
+const ScrollLinked = ({ container }) => {
+  const { scrollYProgress } = useScroll({ container });
   const scaleX = useSpring(scrollYProgress, {
     stiffness: 100,
     damping: 30,

package/dist/components/scroll-linked/scroll-linked.stories.js

@@ -1,4 +1,5 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { ScrollLinked } from "./scroll-linked";
 const meta = {
   title: "components/scroll-linked",
@@ -11,8 +12,40 @@ const Scroll = {
     (Story) => /* @__PURE__ */ jsx("div", { className: "h-lvh overflow-y-scroll", children: /* @__PURE__ */ jsx(Story, {}) })
   ]
 };
+const WithContainer = {
+  decorators: [
+    (Story) => {
+      const containerRef = useRef(null);
+      return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-label": "Scrollable container example",
+          className: "relative h-96 overflow-y-scroll rounded border border-gray-300",
+          ref: containerRef,
+          tabIndex: 0,
+          children: [
+            /* @__PURE__ */ jsx(Story, { args: { container: containerRef } }),
+            /* @__PURE__ */ jsxs("div", { className: "h-[200vh] p-4", children: [
+              /* @__PURE__ */ jsx("h2", { className: "mb-4 font-bold text-xl", children: "Container Scroll Example" }),
+              /* @__PURE__ */ jsx("p", { className: "mb-4", children: "Scroll within this container to see the progress bar at the top." }),
+              /* @__PURE__ */ jsx("p", { className: "mb-4", children: "The progress bar tracks this container's scroll position, not the window's scroll." }),
+              /* @__PURE__ */ jsx("div", { className: "mt-8 space-y-4", children: Array.from({ length: 20 }, (_, i) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: Static demo content
+                /* @__PURE__ */ jsxs("p", { className: "rounded bg-gray-100 p-4", children: [
+                  "Content block ",
+                  i + 1
+                ] }, `content-${i}`)
+              )) })
+            ] })
+          ]
+        }
+      ) });
+    }
+  ]
+};
 export {
   NoScroll,
   Scroll,
+  WithContainer,
   scroll_linked_stories_default as default
 };

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8o/arte-odyssey",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "k8o's react ui library",
   "author": "k8o <kosakanoki@gmail.com>",
   "keywords": [
@@ -63,24 +63,24 @@
   },
   "devDependencies": {
     "@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",
+    "@storybook/addon-a11y": "10.0.6",
+    "@storybook/addon-docs": "10.0.6",
+    "@storybook/addon-vitest": "10.0.6",
+    "@storybook/react-vite": "10.0.6",
     "@tailwindcss/postcss": "4.1.16",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "@vitejs/plugin-react-swc": "4.2.0",
-    "@vitest/browser-playwright": "4.0.6",
-    "@vitest/ui": "4.0.6",
+    "@vitest/browser-playwright": "4.0.8",
+    "@vitest/ui": "4.0.8",
     "postcss": "8.5.6",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "storybook": "10.0.2",
+    "storybook": "10.0.6",
     "storybook-addon-mock-date": "1.0.2",
     "tailwindcss": "4.1.16",
     "vite": "7.1.12",
-    "vitest": "4.0.6",
+    "vitest": "4.0.8",
     "vitest-browser-react": "2.0.2"
   },
   "peerDependencies": {