@kimdw-rtk/ui 0.0.9 → 0.0.12

package/dist/hooks/useDialog/useDialog.spec.js

@@ -0,0 +1,59 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { act, render, screen, waitFor } from "@testing-library/react";
+import { UIProvider } from "#contexts";
+import { useDialog } from "#hooks";
+describe("useDialog \uD14C\uC2A4\uD2B8", () => {
+  const mockFn = jest.fn();
+  beforeEach(() => {
+    const TestComponent = () => {
+      const { alert, confirm } = useDialog();
+      const handleConfirmClick = async () => {
+        mockFn(await confirm("confirm"));
+      };
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => alert("alert"), children: "alert click" }),
+        /* @__PURE__ */ jsx("button", { onClick: handleConfirmClick, children: "confirm click" })
+      ] });
+    };
+    render(
+      /* @__PURE__ */ jsx(UIProvider, { overlayUnmountOn: "exit", children: /* @__PURE__ */ jsx(TestComponent, {}) })
+    );
+  });
+  it("\uD655\uC778 \uBC84\uD2BC\uC744 \uB204\uB974\uBA74 alert\uC744 \uB2EB\uC744 \uC218 \uC788\uB2E4.", async () => {
+    const alertButton = screen.getByRole("button", { name: "alert click" });
+    expect(screen.queryByText("alert")).not.toBeInTheDocument();
+    act(() => {
+      alertButton.click();
+    });
+    expect(screen.getByText("alert")).toBeInTheDocument();
+    const okButton = screen.getByRole("button", { name: "\uD655\uC778" });
+    act(() => {
+      okButton.click();
+    });
+    expect(screen.queryByText("alert")).not.toBeInTheDocument();
+  });
+  it.skip("confirm\uC758 \uD655\uC778 \uBC84\uD2BC\uC744 \uB204\uB974\uBA74 true, \uCDE8\uC18C \uBC84\uD2BC\uC744 \uB204\uB974\uBA74 false\uB97C \uBC18\uD658\uD55C\uB2E4.", async () => {
+    const confirmButton = screen.getByRole("button", { name: "confirm click" });
+    act(() => {
+      confirmButton.click();
+    });
+    const okButton = screen.getByRole("button", { name: "\uD655\uC778" });
+    act(() => {
+      okButton.click();
+    });
+    await waitFor(() => {
+      expect(mockFn.mock.calls[0][0]).toBe(true);
+    });
+    act(() => {
+      confirmButton.click();
+    });
+    const cancelButton = screen.getByRole("button", { name: "\uCDE8\uC18C" });
+    act(() => {
+      cancelButton.click();
+    });
+    await waitFor(() => {
+      expect(mockFn.mock.calls[1][0]).toBe(false);
+    });
+  });
+});
+//# sourceMappingURL=useDialog.spec.js.map

package/dist/hooks/useDialog/useDialog.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useDialog/useDialog.spec.tsx"],"sourcesContent":["import { act, render, screen, waitFor } from '@testing-library/react';\n\nimport { UIProvider } from '#contexts';\nimport { useDialog } from '#hooks';\n\ndescribe('useDialog 테스트', () => {\n  const mockFn = jest.fn();\n\n  beforeEach(() => {\n    const TestComponent = () => {\n      const { alert, confirm } = useDialog();\n\n      const handleConfirmClick = async () => {\n        mockFn(await confirm('confirm'));\n      };\n\n      return (\n        <>\n          <button onClick={() => alert('alert')}>alert click</button>\n          <button onClick={handleConfirmClick}>confirm click</button>\n        </>\n      );\n    };\n\n    render(\n      <UIProvider overlayUnmountOn={'exit'}>\n        <TestComponent />\n      </UIProvider>,\n    );\n  });\n\n  it('확인 버튼을 누르면 alert을 닫을 수 있다.', async () => {\n    const alertButton = screen.getByRole('button', { name: 'alert click' });\n\n    expect(screen.queryByText('alert')).not.toBeInTheDocument();\n\n    act(() => {\n      alertButton.click();\n    });\n\n    expect(screen.getByText('alert')).toBeInTheDocument();\n\n    const okButton = screen.getByRole('button', { name: '확인' });\n    act(() => {\n      okButton.click();\n    });\n\n    expect(screen.queryByText('alert')).not.toBeInTheDocument();\n  });\n\n  it.skip('confirm의 확인 버튼을 누르면 true, 취소 버튼을 누르면 false를 반환한다.', async () => {\n    const confirmButton = screen.getByRole('button', { name: 'confirm click' });\n\n    act(() => {\n      confirmButton.click();\n    });\n\n    const okButton = screen.getByRole('button', { name: '확인' });\n    act(() => {\n      okButton.click();\n    });\n\n    await waitFor(() => {\n      expect(mockFn.mock.calls[0][0]).toBe(true);\n    });\n\n    act(() => {\n      confirmButton.click();\n    });\n\n    const cancelButton = screen.getByRole('button', { name: '취소' });\n    act(() => {\n      cancelButton.click();\n    });\n\n    await waitFor(() => {\n      expect(mockFn.mock.calls[1][0]).toBe(false);\n    });\n  });\n});\n"],"mappings":"AAiBQ,mBACE,KADF;AAjBR,SAAS,KAAK,QAAQ,QAAQ,eAAe;AAE7C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAE1B,SAAS,gCAAiB,MAAM;AAC9B,QAAM,SAAS,KAAK,GAAG;AAEvB,aAAW,MAAM;AACf,UAAM,gBAAgB,MAAM;AAC1B,YAAM,EAAE,OAAO,QAAQ,IAAI,UAAU;AAErC,YAAM,qBAAqB,YAAY;AACrC,eAAO,MAAM,QAAQ,SAAS,CAAC;AAAA,MACjC;AAEA,aACE,iCACE;AAAA,4BAAC,YAAO,SAAS,MAAM,MAAM,OAAO,GAAG,yBAAW;AAAA,QAClD,oBAAC,YAAO,SAAS,oBAAoB,2BAAa;AAAA,SACpD;AAAA,IAEJ;AAEA;AAAA,MACE,oBAAC,cAAW,kBAAkB,QAC5B,8BAAC,iBAAc,GACjB;AAAA,IACF;AAAA,EACF,CAAC;AAED,KAAG,oGAA8B,YAAY;AAC3C,UAAM,cAAc,OAAO,UAAU,UAAU,EAAE,MAAM,cAAc,CAAC;AAEtE,WAAO,OAAO,YAAY,OAAO,CAAC,EAAE,IAAI,kBAAkB;AAE1D,QAAI,MAAM;AACR,kBAAY,MAAM;AAAA,IACpB,CAAC;AAED,WAAO,OAAO,UAAU,OAAO,CAAC,EAAE,kBAAkB;AAEpD,UAAM,WAAW,OAAO,UAAU,UAAU,EAAE,MAAM,eAAK,CAAC;AAC1D,QAAI,MAAM;AACR,eAAS,MAAM;AAAA,IACjB,CAAC;AAED,WAAO,OAAO,YAAY,OAAO,CAAC,EAAE,IAAI,kBAAkB;AAAA,EAC5D,CAAC;AAED,KAAG,KAAK,mKAAqD,YAAY;AACvE,UAAM,gBAAgB,OAAO,UAAU,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE1E,QAAI,MAAM;AACR,oBAAc,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,WAAW,OAAO,UAAU,UAAU,EAAE,MAAM,eAAK,CAAC;AAC1D,QAAI,MAAM;AACR,eAAS,MAAM;AAAA,IACjB,CAAC;AAED,UAAM,QAAQ,MAAM;AAClB,aAAO,OAAO,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,IAAI;AAAA,IAC3C,CAAC;AAED,QAAI,MAAM;AACR,oBAAc,MAAM;AAAA,IACtB,CAAC;AAED,UAAM,eAAe,OAAO,UAAU,UAAU,EAAE,MAAM,eAAK,CAAC;AAC9D,QAAI,MAAM;AACR,mBAAa,MAAM;AAAA,IACrB,CAAC;AAED,UAAM,QAAQ,MAAM;AAClB,aAAO,OAAO,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK;AAAA,IAC5C,CAAC;AAAA,EACH,CAAC;AACH,CAAC;","names":[]}

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

@@ -1,5 +1,6 @@
 /**
  * 마우스를 사용하는 환경에서도 드래그로 가로 스크롤을 할 수 있게 만드는 hook
  */
-export declare const useMouseScroll: <T extends React.RefObject<HTMLElement | null>>(ref: T) => void;
-//# sourceMappingURL=index.d.ts.map
+declare const useMouseScroll: <T extends React.RefObject<HTMLElement | null>>(ref: T) => void;
+
+export { useMouseScroll };

package/dist/hooks/useMouseScroll/index.js

@@ -1,49 +1,48 @@
-import { useEffect } from 'react';
-
-/**
- * 마우스를 사용하는 환경에서도 드래그로 가로 스크롤을 할 수 있게 만드는 hook
- */
+"use client";
+import { useEffect } from "react";
 const useMouseScroll = (ref) => {
-    useEffect(() => {
-        const element = ref.current;
-        let isDown = false, startX = 0, startLeft = 0;
-        if (element === null) {
-            return;
-        }
-        const handleMouseDown = (e) => {
-            if (!element.contains(e.target)) {
-                return;
-            }
-            isDown = true;
-            startLeft = element.scrollLeft;
-            startX = e.x;
-        };
-        const handleMouseMove = (e) => {
-            if (!isDown) {
-                return;
-            }
-            element.scrollLeft = startLeft + startX - e.x;
-        };
-        const handleMouseUp = () => {
-            isDown = false;
-        };
-        const handleWheel = (e) => {
-            element.scrollTo({
-                left: element.scrollLeft + e.deltaY,
-                behavior: 'smooth',
-            });
-        };
-        window.addEventListener('mousedown', handleMouseDown);
-        window.addEventListener('mousemove', handleMouseMove);
-        window.addEventListener('mouseup', handleMouseUp);
-        element.addEventListener('wheel', handleWheel);
-        return () => {
-            window.removeEventListener('mousedown', handleMouseDown);
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-            element.removeEventListener('wheel', handleWheel);
-        };
-    }, [ref]);
+  useEffect(() => {
+    const element = ref.current;
+    let isDown = false, startX = 0, startLeft = 0;
+    if (element === null) {
+      return;
+    }
+    const handleMouseDown = (e) => {
+      if (!element.contains(e.target)) {
+        return;
+      }
+      isDown = true;
+      startLeft = element.scrollLeft;
+      startX = e.x;
+    };
+    const handleMouseMove = (e) => {
+      if (!isDown) {
+        return;
+      }
+      element.scrollLeft = startLeft + startX - e.x;
+    };
+    const handleMouseUp = () => {
+      isDown = false;
+    };
+    const handleWheel = (e) => {
+      element.scrollTo({
+        left: element.scrollLeft + e.deltaY,
+        behavior: "smooth"
+      });
+    };
+    window.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    element.addEventListener("wheel", handleWheel);
+    return () => {
+      window.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      element.removeEventListener("wheel", handleWheel);
+    };
+  }, [ref]);
 };
-
-export { useMouseScroll };
+export {
+  useMouseScroll
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/useMouseScroll/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useMouseScroll/index.ts"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\n\n/**\n * 마우스를 사용하는 환경에서도 드래그로 가로 스크롤을 할 수 있게 만드는 hook\n */\nexport const useMouseScroll = <T extends React.RefObject<HTMLElement | null>>(\n  ref: T,\n): void => {\n  useEffect(() => {\n    const element = ref.current;\n    let isDown = false,\n      startX = 0,\n      startLeft = 0;\n\n    if (element === null) {\n      return;\n    }\n\n    const handleMouseDown = (e: MouseEvent) => {\n      if (!element.contains(e.target as Node)) {\n        return;\n      }\n\n      isDown = true;\n\n      startLeft = element.scrollLeft;\n      startX = e.x;\n    };\n\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!isDown) {\n        return;\n      }\n\n      element.scrollLeft = startLeft + startX - e.x;\n    };\n\n    const handleMouseUp = () => {\n      isDown = false;\n    };\n\n    const handleWheel = (e: WheelEvent) => {\n      element.scrollTo({\n        left: element.scrollLeft + e.deltaY,\n        behavior: 'smooth',\n      });\n    };\n\n    window.addEventListener('mousedown', handleMouseDown);\n    window.addEventListener('mousemove', handleMouseMove);\n    window.addEventListener('mouseup', handleMouseUp);\n    element.addEventListener('wheel', handleWheel);\n\n    return () => {\n      window.removeEventListener('mousedown', handleMouseDown);\n      window.removeEventListener('mousemove', handleMouseMove);\n      window.removeEventListener('mouseup', handleMouseUp);\n      element.removeEventListener('wheel', handleWheel);\n    };\n  }, [ref]);\n};\n"],"mappings":";AAEA,SAAS,iBAAiB;AAKnB,MAAM,iBAAiB,CAC5B,QACS;AACT,YAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,SAAS,OACX,SAAS,GACT,YAAY;AAEd,QAAI,YAAY,MAAM;AACpB;AAAA,IACF;AAEA,UAAM,kBAAkB,CAAC,MAAkB;AACzC,UAAI,CAAC,QAAQ,SAAS,EAAE,MAAc,GAAG;AACvC;AAAA,MACF;AAEA,eAAS;AAET,kBAAY,QAAQ;AACpB,eAAS,EAAE;AAAA,IACb;AAEA,UAAM,kBAAkB,CAAC,MAAkB;AACzC,UAAI,CAAC,QAAQ;AACX;AAAA,MACF;AAEA,cAAQ,aAAa,YAAY,SAAS,EAAE;AAAA,IAC9C;AAEA,UAAM,gBAAgB,MAAM;AAC1B,eAAS;AAAA,IACX;AAEA,UAAM,cAAc,CAAC,MAAkB;AACrC,cAAQ,SAAS;AAAA,QACf,MAAM,QAAQ,aAAa,EAAE;AAAA,QAC7B,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AAEA,WAAO,iBAAiB,aAAa,eAAe;AACpD,WAAO,iBAAiB,aAAa,eAAe;AACpD,WAAO,iBAAiB,WAAW,aAAa;AAChD,YAAQ,iBAAiB,SAAS,WAAW;AAE7C,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,eAAe;AACvD,aAAO,oBAAoB,aAAa,eAAe;AACvD,aAAO,oBAAoB,WAAW,aAAa;AACnD,cAAQ,oBAAoB,SAAS,WAAW;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACV;","names":[]}

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

@@ -1,6 +1,7 @@
-export declare const usePointerSlider: <T extends React.RefObject<HTMLElement | null>>(ref: T, { min, max, defaultValue, }: {
+declare const usePointerSlider: <T extends React.RefObject<HTMLElement | null>>(ref: T, { min, max, defaultValue, }: {
     min: number;
     max: number;
     defaultValue: number;
 }) => number;
-//# sourceMappingURL=index.d.ts.map
+
+export { usePointerSlider };

package/dist/hooks/usePointerSlider/index.js

@@ -1,46 +1,58 @@
-import { useState, useEffect } from 'react';
-
-const usePointerSlider = (ref, { min, max, defaultValue, }) => {
-    const [value, setValue] = useState(defaultValue);
-    useEffect(() => {
-        const element = ref.current;
-        let isDown = false, parentWidth = 0, parentX = 0;
-        if (element === null) {
-            return;
-        }
-        element.style.left = `${((value - min) / (max - min)) * 100}%`;
-        const handlePointerDown = (e) => {
-            element.setPointerCapture(e.pointerId);
-            isDown = true;
-            const boundingRect = element.parentElement?.getBoundingClientRect();
-            if (boundingRect === undefined) {
-                return;
-            }
-            parentWidth = boundingRect.width;
-            parentX = boundingRect.x;
-        };
-        const handlePointerMove = (e) => {
-            if (!isDown) {
-                return;
-            }
-            const currentValue = Math.min(max, Math.max(min, Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min));
-            element.style.left = `${((currentValue - min) / (max - min)) * 100}%`;
-            setValue(currentValue);
-        };
-        const handlePointerUp = (e) => {
-            element.releasePointerCapture(e.pointerId);
-            isDown = false;
-        };
-        element.addEventListener('pointerdown', handlePointerDown);
-        element.addEventListener('pointermove', handlePointerMove);
-        element.addEventListener('pointerup', handlePointerUp);
-        return () => {
-            element.removeEventListener('pointerdown', handlePointerDown);
-            element.removeEventListener('pointermove', handlePointerMove);
-            element.removeEventListener('pointerup', handlePointerUp);
-        };
-    }, [ref, max, min, value]);
-    return value;
+"use client";
+import { useEffect, useState } from "react";
+const usePointerSlider = (ref, {
+  min,
+  max,
+  defaultValue
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  useEffect(() => {
+    const element = ref.current;
+    let isDown = false, parentWidth = 0, parentX = 0;
+    if (element === null) {
+      return;
+    }
+    element.style.left = `${(value - min) / (max - min) * 100}%`;
+    const handlePointerDown = (e) => {
+      element.setPointerCapture(e.pointerId);
+      isDown = true;
+      const boundingRect = element.parentElement?.getBoundingClientRect();
+      if (boundingRect === void 0) {
+        return;
+      }
+      parentWidth = boundingRect.width;
+      parentX = boundingRect.x;
+    };
+    const handlePointerMove = (e) => {
+      if (!isDown) {
+        return;
+      }
+      const currentValue = Math.min(
+        max,
+        Math.max(
+          min,
+          Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min
+        )
+      );
+      element.style.left = `${(currentValue - min) / (max - min) * 100}%`;
+      setValue(currentValue);
+    };
+    const handlePointerUp = (e) => {
+      element.releasePointerCapture(e.pointerId);
+      isDown = false;
+    };
+    element.addEventListener("pointerdown", handlePointerDown);
+    element.addEventListener("pointermove", handlePointerMove);
+    element.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      element.removeEventListener("pointerdown", handlePointerDown);
+      element.removeEventListener("pointermove", handlePointerMove);
+      element.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [ref, max, min, value]);
+  return value;
 };
-
-export { usePointerSlider };
+export {
+  usePointerSlider
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/usePointerSlider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/usePointerSlider/index.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const usePointerSlider = <T extends React.RefObject<HTMLElement | null>>(\n  ref: T,\n  {\n    min,\n    max,\n    defaultValue,\n  }: {\n    min: number;\n    max: number;\n    defaultValue: number;\n  },\n): number => {\n  const [value, setValue] = useState<number>(defaultValue);\n\n  useEffect(() => {\n    const element = ref.current;\n    let isDown = false,\n      parentWidth = 0,\n      parentX = 0;\n\n    if (element === null) {\n      return;\n    }\n\n    element.style.left = `${((value - min) / (max - min)) * 100}%`;\n\n    const handlePointerDown = (e: PointerEvent) => {\n      element.setPointerCapture(e.pointerId);\n      isDown = true;\n      const boundingRect = element.parentElement?.getBoundingClientRect();\n\n      if (boundingRect === undefined) {\n        return;\n      }\n\n      parentWidth = boundingRect.width;\n      parentX = boundingRect.x;\n    };\n\n    const handlePointerMove = (e: PointerEvent) => {\n      if (!isDown) {\n        return;\n      }\n\n      const currentValue = Math.min(\n        max,\n        Math.max(\n          min,\n          Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min,\n        ),\n      );\n\n      element.style.left = `${((currentValue - min) / (max - min)) * 100}%`;\n\n      setValue(currentValue);\n    };\n\n    const handlePointerUp = (e: PointerEvent) => {\n      element.releasePointerCapture(e.pointerId);\n      isDown = false;\n    };\n\n    element.addEventListener('pointerdown', handlePointerDown);\n    element.addEventListener('pointermove', handlePointerMove);\n    element.addEventListener('pointerup', handlePointerUp);\n\n    return () => {\n      element.removeEventListener('pointerdown', handlePointerDown);\n      element.removeEventListener('pointermove', handlePointerMove);\n      element.removeEventListener('pointerup', handlePointerUp);\n    };\n  }, [ref, max, min, value]);\n\n  return value;\n};\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAE7B,MAAM,mBAAmB,CAC9B,KACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,MAKW;AACX,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,YAAY;AAEvD,YAAU,MAAM;AACd,UAAM,UAAU,IAAI;AACpB,QAAI,SAAS,OACX,cAAc,GACd,UAAU;AAEZ,QAAI,YAAY,MAAM;AACpB;AAAA,IACF;AAEA,YAAQ,MAAM,OAAO,IAAK,QAAQ,QAAQ,MAAM,OAAQ,GAAG;AAE3D,UAAM,oBAAoB,CAAC,MAAoB;AAC7C,cAAQ,kBAAkB,EAAE,SAAS;AACrC,eAAS;AACT,YAAM,eAAe,QAAQ,eAAe,sBAAsB;AAElE,UAAI,iBAAiB,QAAW;AAC9B;AAAA,MACF;AAEA,oBAAc,aAAa;AAC3B,gBAAU,aAAa;AAAA,IACzB;AAEA,UAAM,oBAAoB,CAAC,MAAoB;AAC7C,UAAI,CAAC,QAAQ;AACX;AAAA,MACF;AAEA,YAAM,eAAe,KAAK;AAAA,QACxB;AAAA,QACA,KAAK;AAAA,UACH;AAAA,UACA,KAAK,OAAO,EAAE,UAAU,YAAY,eAAe,MAAM,KAAK,IAAI;AAAA,QACpE;AAAA,MACF;AAEA,cAAQ,MAAM,OAAO,IAAK,eAAe,QAAQ,MAAM,OAAQ,GAAG;AAElE,eAAS,YAAY;AAAA,IACvB;AAEA,UAAM,kBAAkB,CAAC,MAAoB;AAC3C,cAAQ,sBAAsB,EAAE,SAAS;AACzC,eAAS;AAAA,IACX;AAEA,YAAQ,iBAAiB,eAAe,iBAAiB;AACzD,YAAQ,iBAAiB,eAAe,iBAAiB;AACzD,YAAQ,iBAAiB,aAAa,eAAe;AAErD,WAAO,MAAM;AACX,cAAQ,oBAAoB,eAAe,iBAAiB;AAC5D,cAAQ,oBAAoB,eAAe,iBAAiB;AAC5D,cAAQ,oBAAoB,aAAa,eAAe;AAAA,IAC1D;AAAA,EACF,GAAG,CAAC,KAAK,KAAK,KAAK,KAAK,CAAC;AAEzB,SAAO;AACT;","names":[]}

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

@@ -1,4 +1,7 @@
-export declare const useRipple: <T extends HTMLElement>(ref?: React.Ref<T>) => {
-    ripple: import("react/jsx-runtime").JSX.Element;
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const useRipple: <T extends HTMLElement>(ref?: React.Ref<T>) => {
+    ripple: react_jsx_runtime.JSX.Element;
 };
-//# sourceMappingURL=index.d.ts.map
+
+export { useRipple };

package/dist/hooks/useRipple/index.js

@@ -1,113 +1,116 @@
-import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
-import { useRef, useEffect, useMemo } from 'react';
-import { ripple, colorVar } from './ripple.css.js';
-
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import * as s from "./ripple.css";
 const useRipple = (ref) => {
-    const rippleRef = useRef(null);
-    useEffect(() => {
-        let element = null;
-        if (!ref) {
-            return;
+  const rippleRef = useRef(null);
+  useEffect(() => {
+    let element = null;
+    if (!ref) {
+      return;
+    }
+    if (typeof ref === "function") {
+      ref(element);
+    } else {
+      element = ref.current;
+    }
+    const ripple = rippleRef.current;
+    let timer;
+    let isAnimationPending = false;
+    let isFadeIn = false, isMouseDown = false, isTransitionEnd = true;
+    if (!ripple || !element) {
+      return;
+    }
+    const clearTimer = () => {
+      clearTimeout(timer);
+      isAnimationPending = false;
+    };
+    const runAnimation = (x, y) => {
+      const width = element.clientWidth / 2 + Math.abs(element.clientWidth / 2 - x), height = element.clientHeight / 2 + Math.abs(element.clientHeight / 2 - y);
+      const size = Math.round(Math.sqrt(width ** 2 + height ** 2) * 2);
+      ripple.style.width = `${size}px`;
+      ripple.style.height = `${size}px`;
+      ripple.style.left = `${x}px`;
+      ripple.style.top = `${y}px`;
+      ripple.style.boxShadow = `${s.colorVar} 0 0 ${size / 10}px ${size / 10}px`;
+      ripple.className = s.ripple({ animation: false });
+      ripple.offsetTop;
+      ripple.className = s.ripple({ animation: true });
+      ripple.style.opacity = "1";
+      isAnimationPending = false;
+      isFadeIn = true;
+      isTransitionEnd = false;
+    };
+    const handleClick = (e) => {
+      if (!isAnimationPending) {
+        return;
+      }
+      if (element instanceof HTMLButtonElement && element.disabled) {
+        return;
+      }
+      clearTimer();
+      runAnimation(e.offsetX, e.offsetY);
+    };
+    const handlePointerDown = (e) => {
+      if (e.button !== 0 || !ripple || !isTransitionEnd) {
+        return;
+      }
+      if (element instanceof HTMLButtonElement && element.disabled) {
+        return;
+      }
+      isMouseDown = true;
+      if (e.pointerType === "mouse") {
+        runAnimation(e.offsetX, e.offsetY);
+        return;
+      }
+      clearTimer();
+      isAnimationPending = true;
+      timer = setTimeout(() => runAnimation(e.offsetX, e.offsetY), 100);
+    };
+    const handlePointerUp = () => {
+      if (!isMouseDown) {
+        return;
+      }
+      clearTimer();
+      if (!isFadeIn) {
+        ripple.style.opacity = "0";
+        isFadeIn = false;
+      }
+      isMouseDown = false;
+    };
+    const handleTransitionEnd = (e) => {
+      if (e.propertyName === "opacity" && isFadeIn) {
+        if (!isMouseDown) {
+          ripple.style.opacity = "0";
         }
-        if (typeof ref === 'function') {
-            ref(element);
-        }
-        else {
-            element = ref.current;
-        }
-        const ripple$1 = rippleRef.current;
-        let timer;
-        let isAnimationPending = false;
-        let isFadeIn = false, isMouseDown = false, isTransitionEnd = true;
-        if (!ripple$1 || !element) {
-            return;
-        }
-        const clearTimer = () => {
-            clearTimeout(timer);
-            isAnimationPending = false;
-        };
-        const runAnimation = (x, y) => {
-            const width = element.clientWidth / 2 + Math.abs(element.clientWidth / 2 - x), height = element.clientHeight / 2 + Math.abs(element.clientHeight / 2 - y);
-            const size = Math.round(Math.sqrt(width ** 2 + height ** 2) * 2);
-            ripple$1.style.width = `${size}px`;
-            ripple$1.style.height = `${size}px`;
-            ripple$1.style.left = `${x}px`;
-            ripple$1.style.top = `${y}px`;
-            ripple$1.style.boxShadow = `${colorVar} 0 0 ${size / 10}px ${size / 10}px`;
-            ripple$1.className = ripple({ animation: false });
-            //eslint-disable-next-line
-            ripple$1.offsetTop;
-            ripple$1.className = ripple({ animation: true });
-            ripple$1.style.opacity = '1';
-            isAnimationPending = false;
-            isFadeIn = true;
-            isTransitionEnd = false;
-        };
-        const handleClick = (e) => {
-            if (!isAnimationPending) {
-                return;
-            }
-            if (element instanceof HTMLButtonElement && element.disabled) {
-                return;
-            }
-            clearTimer();
-            runAnimation(e.offsetX, e.offsetY);
-        };
-        const handlePointerDown = (e) => {
-            if (e.button !== 0 || !ripple$1 || !isTransitionEnd) {
-                return;
-            }
-            if (element instanceof HTMLButtonElement && element.disabled) {
-                return;
-            }
-            isMouseDown = true;
-            if (e.pointerType === 'mouse') {
-                runAnimation(e.offsetX, e.offsetY);
-                return;
-            }
-            clearTimer();
-            isAnimationPending = true;
-            timer = setTimeout(() => runAnimation(e.offsetX, e.offsetY), 100);
-        };
-        const handlePointerUp = () => {
-            if (!isMouseDown) {
-                return;
-            }
-            clearTimer();
-            if (!isFadeIn) {
-                ripple$1.style.opacity = '0';
-                isFadeIn = false;
-            }
-            isMouseDown = false;
-        };
-        const handleTransitionEnd = (e) => {
-            if (e.propertyName === 'opacity' && isFadeIn) {
-                if (!isMouseDown) {
-                    ripple$1.style.opacity = '0';
-                }
-                isFadeIn = false;
-                return;
-            }
-            if (e.propertyName === 'transform' && !isFadeIn) {
-                isTransitionEnd = true;
-            }
-        };
-        element.addEventListener('click', handleClick);
-        element.addEventListener('pointerdown', handlePointerDown);
-        element.addEventListener('pointerup', handlePointerUp);
-        element.addEventListener('pointerleave', handlePointerUp);
-        ripple$1.addEventListener('transitionend', handleTransitionEnd);
-        return () => {
-            element.removeEventListener('click', handleClick);
-            element.removeEventListener('pointerdown', handlePointerDown);
-            element.removeEventListener('pointerup', handlePointerUp);
-            element.removeEventListener('pointerleave', handlePointerUp);
-            ripple$1.removeEventListener('transitionend', handleTransitionEnd);
-        };
-    }, [ref, rippleRef]);
-    return useMemo(() => ({
-        ripple: (jsxRuntimeExports.jsx("div", { ref: rippleRef, className: ripple({ animation: false }) })),
-    }), [rippleRef]);
+        isFadeIn = false;
+        return;
+      }
+      if (e.propertyName === "transform" && !isFadeIn) {
+        isTransitionEnd = true;
+      }
+    };
+    element.addEventListener("click", handleClick);
+    element.addEventListener("pointerdown", handlePointerDown);
+    element.addEventListener("pointerup", handlePointerUp);
+    element.addEventListener("pointerleave", handlePointerUp);
+    ripple.addEventListener("transitionend", handleTransitionEnd);
+    return () => {
+      element.removeEventListener("click", handleClick);
+      element.removeEventListener("pointerdown", handlePointerDown);
+      element.removeEventListener("pointerup", handlePointerUp);
+      element.removeEventListener("pointerleave", handlePointerUp);
+      ripple.removeEventListener("transitionend", handleTransitionEnd);
+    };
+  }, [ref, rippleRef]);
+  return useMemo(
+    () => ({
+      ripple: /* @__PURE__ */ jsx("div", { ref: rippleRef, className: s.ripple({ animation: false }) })
+    }),
+    [rippleRef]
+  );
+};
+export {
+  useRipple
 };
-
-export { useRipple };
+//# sourceMappingURL=index.js.map

package/dist/hooks/useRipple/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useRipple/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport * as s from './ripple.css';\n\nexport const useRipple = <T extends HTMLElement>(ref?: React.Ref<T>) => {\n  const rippleRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let element: T | null = null;\n\n    if (!ref) {\n      return;\n    }\n\n    if (typeof ref === 'function') {\n      ref(element);\n    } else {\n      element = ref.current;\n    }\n\n    const ripple = rippleRef.current;\n\n    let timer: ReturnType<typeof setTimeout>;\n    let isAnimationPending = false;\n\n    let isFadeIn = false,\n      isMouseDown = false,\n      isTransitionEnd = true;\n\n    if (!ripple || !element) {\n      return;\n    }\n\n    const clearTimer = () => {\n      clearTimeout(timer);\n      isAnimationPending = false;\n    };\n\n    const runAnimation = (x: number, y: number) => {\n      const width =\n          element.clientWidth / 2 + Math.abs(element.clientWidth / 2 - x),\n        height =\n          element.clientHeight / 2 + Math.abs(element.clientHeight / 2 - y);\n      const size = Math.round(Math.sqrt(width ** 2 + height ** 2) * 2);\n\n      ripple.style.width = `${size}px`;\n      ripple.style.height = `${size}px`;\n      ripple.style.left = `${x}px`;\n      ripple.style.top = `${y}px`;\n\n      ripple.style.boxShadow = `${s.colorVar} 0 0 ${size / 10}px ${size / 10}px`;\n      ripple.className = s.ripple({ animation: false });\n      //eslint-disable-next-line\n      ripple.offsetTop;\n      ripple.className = s.ripple({ animation: true });\n      ripple.style.opacity = '1';\n\n      isAnimationPending = false;\n      isFadeIn = true;\n      isTransitionEnd = false;\n    };\n\n    const handleClick = (e: MouseEvent) => {\n      if (!isAnimationPending) {\n        return;\n      }\n\n      if (element instanceof HTMLButtonElement && element.disabled) {\n        return;\n      }\n\n      clearTimer();\n      runAnimation(e.offsetX, e.offsetY);\n    };\n\n    const handlePointerDown = (e: PointerEvent) => {\n      if (e.button !== 0 || !ripple || !isTransitionEnd) {\n        return;\n      }\n\n      if (element instanceof HTMLButtonElement && element.disabled) {\n        return;\n      }\n\n      isMouseDown = true;\n\n      if (e.pointerType === 'mouse') {\n        runAnimation(e.offsetX, e.offsetY);\n        return;\n      }\n\n      clearTimer();\n      isAnimationPending = true;\n      timer = setTimeout(() => runAnimation(e.offsetX, e.offsetY), 100);\n    };\n\n    const handlePointerUp = () => {\n      if (!isMouseDown) {\n        return;\n      }\n\n      clearTimer();\n\n      if (!isFadeIn) {\n        ripple.style.opacity = '0';\n        isFadeIn = false;\n      }\n\n      isMouseDown = false;\n    };\n\n    const handleTransitionEnd = (e: TransitionEvent) => {\n      if (e.propertyName === 'opacity' && isFadeIn) {\n        if (!isMouseDown) {\n          ripple.style.opacity = '0';\n        }\n\n        isFadeIn = false;\n        return;\n      }\n\n      if (e.propertyName === 'transform' && !isFadeIn) {\n        isTransitionEnd = true;\n      }\n    };\n\n    element.addEventListener('click', handleClick);\n    element.addEventListener('pointerdown', handlePointerDown);\n    element.addEventListener('pointerup', handlePointerUp);\n    element.addEventListener('pointerleave', handlePointerUp);\n    ripple.addEventListener('transitionend', handleTransitionEnd);\n\n    return () => {\n      element.removeEventListener('click', handleClick);\n      element.removeEventListener('pointerdown', handlePointerDown);\n      element.removeEventListener('pointerup', handlePointerUp);\n      element.removeEventListener('pointerleave', handlePointerUp);\n      ripple.removeEventListener('transitionend', handleTransitionEnd);\n    };\n  }, [ref, rippleRef]);\n\n  return useMemo(\n    () => ({\n      ripple: (\n        <div ref={rippleRef} className={s.ripple({ animation: false })} />\n      ),\n    }),\n    [rippleRef],\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/hooks/useRipple/ripple.css.d.ts

@@ -1,5 +1,7 @@
-export declare const colorVar: `var(--${string})`;
-export declare const ripple: import("@vanilla-extract/recipes").RuntimeFn<{
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+
+declare const colorVar: `var(--${string})`;
+declare const ripple: _vanilla_extract_recipes.RuntimeFn<{
     animation: {
         true: {
             transition: "opacity 0.25s linear, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)";
@@ -10,4 +12,5 @@ export declare const ripple: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-//# sourceMappingURL=ripple.css.d.ts.map
+
+export { colorVar, ripple };