@kimdw-rtk/ui 0.0.9 → 0.0.11

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.cjs

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _css = require('@vanilla-extract/css');
+var _recipes = require('@vanilla-extract/recipes');
+var _themes = require('#themes');
+const colorVar = _css.createVar.call(void 0, );
+const ripple = _recipes.recipe.call(void 0, {
+  base: {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    borderRadius: "50%",
+    backgroundColor: colorVar,
+    opacity: "0",
+    transformOrigin: "center center",
+    pointerEvents: "none",
+    vars: {
+      [colorVar]: `color-mix(in srgb, rgba(${_themes.theme.color.accent}, 0.2) 20%, rgba(${_themes.theme.color.foreground}, 0.2) 80%)`
+    }
+  },
+  variants: {
+    animation: {
+      true: {
+        transition: "opacity 0.25s linear, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+        transform: "translate(-50%, -50%) scale(1, 1)"
+      },
+      false: {
+        transform: "translate(-50%, -50%) scale(0.1, 0.1)"
+      }
+    }
+  }
+});
+
+
+
+exports.colorVar = colorVar; exports.ripple = ripple;
+//# sourceMappingURL=ripple.css.cjs.map

package/dist/hooks/useRipple/ripple.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useRipple/ripple.css.ts","/home/runner/work/react-kits/react-kits/packages/ui/dist/hooks/useRipple/ripple.css.cjs"],"names":[],"mappings":"AAAA,oHAA0B;AAC1B,mDAAuB;AAEvB,iCAAsB;AAEf,MAAM,SAAA,EAAW,4BAAA,CAAU;AAE3B,MAAM,OAAA,EAAS,6BAAA;AAAO,EAC3B,IAAA,EAAM;AAAA,IACJ,QAAA,EAAU,UAAA;AAAA,IACV,IAAA,EAAM,GAAA;AAAA,IACN,GAAA,EAAK,GAAA;AAAA,IAEL,YAAA,EAAc,KAAA;AAAA,IAEd,eAAA,EAAiB,QAAA;AAAA,IAEjB,OAAA,EAAS,GAAA;AAAA,IACT,eAAA,EAAiB,eAAA;AAAA,IAEjB,aAAA,EAAe,MAAA;AAAA,IAEf,IAAA,EAAM;AAAA,MACJ,CAAC,QAAQ,CAAA,EAAG,CAAA,wBAAA,EAA2B,aAAA,CAAM,KAAA,CAAM,MAAM,CAAA,iBAAA,EAAoB,aAAA,CAAM,KAAA,CAAM,UAAU,CAAA,WAAA;AAAA,IACrG;AAAA,EACF,CAAA;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAA,EAAW;AAAA,MACT,IAAA,EAAM;AAAA,QACJ,UAAA,EACE,mEAAA;AAAA,QACF,SAAA,EAAW;AAAA,MACb,CAAA;AAAA,MAEA,KAAA,EAAO;AAAA,QACL,SAAA,EAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF,CAAC,CAAA;ACTD;AACE;AACA;AACF,qDAAC","file":"/home/runner/work/react-kits/react-kits/packages/ui/dist/hooks/useRipple/ripple.css.cjs","sourcesContent":["import { createVar } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { theme } from '#themes';\n\nexport const colorVar = createVar();\n\nexport const ripple = recipe({\n  base: {\n    position: 'absolute',\n    left: '0',\n    top: '0',\n\n    borderRadius: '50%',\n\n    backgroundColor: colorVar,\n\n    opacity: '0',\n    transformOrigin: 'center center',\n\n    pointerEvents: 'none',\n\n    vars: {\n      [colorVar]: `color-mix(in srgb, rgba(${theme.color.accent}, 0.2) 20%, rgba(${theme.color.foreground}, 0.2) 80%)`,\n    },\n  },\n  variants: {\n    animation: {\n      true: {\n        transition:\n          'opacity 0.25s linear, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)',\n        transform: 'translate(-50%, -50%) scale(1, 1)',\n      },\n\n      false: {\n        transform: 'translate(-50%, -50%) scale(0.1, 0.1)',\n      },\n    },\n  },\n});\n",null]}

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

@@ -0,0 +1,16 @@
+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)";
+            transform: "translate(-50%, -50%) scale(1, 1)";
+        };
+        false: {
+            transform: "translate(-50%, -50%) scale(0.1, 0.1)";
+        };
+    };
+}>;
+
+export { colorVar, ripple };

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 };

package/dist/hooks/useRipple/ripple.css.js

@@ -1,33 +1,35 @@
-import { createVar } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
-import { recipe } from '../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.esm.js';
-import { theme } from '../../themes/theme.css.js';
-
+import { createVar } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { theme } from "#themes";
 const colorVar = createVar();
 const ripple = recipe({
-    base: {
-        position: 'absolute',
-        left: '0',
-        top: '0',
-        borderRadius: '50%',
-        backgroundColor: colorVar,
-        opacity: '0',
-        transformOrigin: 'center center',
-        pointerEvents: 'none',
-        vars: {
-            [colorVar]: `color-mix(in srgb, rgba(${theme.color.accent}, 0.2) 20%, rgba(${theme.color.foreground}, 0.2) 80%)`,
-        },
-    },
-    variants: {
-        animation: {
-            true: {
-                transition: 'opacity 0.25s linear, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
-                transform: 'translate(-50%, -50%) scale(1, 1)',
-            },
-            false: {
-                transform: 'translate(-50%, -50%) scale(0.1, 0.1)',
-            },
-        },
-    },
+  base: {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    borderRadius: "50%",
+    backgroundColor: colorVar,
+    opacity: "0",
+    transformOrigin: "center center",
+    pointerEvents: "none",
+    vars: {
+      [colorVar]: `color-mix(in srgb, rgba(${theme.color.accent}, 0.2) 20%, rgba(${theme.color.foreground}, 0.2) 80%)`
+    }
+  },
+  variants: {
+    animation: {
+      true: {
+        transition: "opacity 0.25s linear, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
+        transform: "translate(-50%, -50%) scale(1, 1)"
+      },
+      false: {
+        transform: "translate(-50%, -50%) scale(0.1, 0.1)"
+      }
+    }
+  }
 });
-
-export { colorVar, ripple };
+export {
+  colorVar,
+  ripple
+};
+//# sourceMappingURL=ripple.css.js.map

package/dist/hooks/useRipple/ripple.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useRipple/ripple.css.ts"],"sourcesContent":["import { createVar } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { theme } from '#themes';\n\nexport const colorVar = createVar();\n\nexport const ripple = recipe({\n  base: {\n    position: 'absolute',\n    left: '0',\n    top: '0',\n\n    borderRadius: '50%',\n\n    backgroundColor: colorVar,\n\n    opacity: '0',\n    transformOrigin: 'center center',\n\n    pointerEvents: 'none',\n\n    vars: {\n      [colorVar]: `color-mix(in srgb, rgba(${theme.color.accent}, 0.2) 20%, rgba(${theme.color.foreground}, 0.2) 80%)`,\n    },\n  },\n  variants: {\n    animation: {\n      true: {\n        transition:\n          'opacity 0.25s linear, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)',\n        transform: 'translate(-50%, -50%) scale(1, 1)',\n      },\n\n      false: {\n        transform: 'translate(-50%, -50%) scale(0.1, 0.1)',\n      },\n    },\n  },\n});\n"],"mappings":"AAAA,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AAEvB,SAAS,aAAa;AAEf,MAAM,WAAW,UAAU;AAE3B,MAAM,SAAS,OAAO;AAAA,EAC3B,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,MAAM;AAAA,IACN,KAAK;AAAA,IAEL,cAAc;AAAA,IAEd,iBAAiB;AAAA,IAEjB,SAAS;AAAA,IACT,iBAAiB;AAAA,IAEjB,eAAe;AAAA,IAEf,MAAM;AAAA,MACJ,CAAC,QAAQ,GAAG,2BAA2B,MAAM,MAAM,MAAM,oBAAoB,MAAM,MAAM,UAAU;AAAA,IACrG;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,YACE;AAAA,QACF,WAAW;AAAA,MACb;AAAA,MAEA,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/hooks/useToast/ToastContainer.cjs

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }var _jsxruntime = require('react/jsx-runtime');
+var _ToastContainercss = require('./ToastContainer.css'); var s = _interopRequireWildcard(_ToastContainercss);
+const ToastContainer = ({ children }) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: s.container, children });
+};
+
+
+exports.ToastContainer = ToastContainer;
+//# sourceMappingURL=ToastContainer.cjs.map

package/dist/hooks/useToast/ToastContainer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useToast/ToastContainer.tsx","/home/runner/work/react-kits/react-kits/packages/ui/dist/hooks/useToast/ToastContainer.cjs"],"names":[],"mappings":"AASS,0YAAA;AAPT,8GAAmB;AAMZ,MAAM,eAAA,EAAiB,CAAC,EAAE,SAAS,CAAA,EAAA,GAA2B;AACnE,EAAA,uBAAO,6BAAA,KAAC,EAAA,EAAI,SAAA,EAAW,CAAA,CAAE,SAAA,EAAY,SAAA,CAAS,CAAA;AAChD,CAAA;ACLA;AACE;AACF,wCAAC","file":"/home/runner/work/react-kits/react-kits/packages/ui/dist/hooks/useToast/ToastContainer.cjs","sourcesContent":["import type { ReactNode } from 'react';\n\nimport * as s from './ToastContainer.css';\n\ninterface ToastContainerProps {\n  children: ReactNode;\n}\n\nexport const ToastContainer = ({ children }: ToastContainerProps) => {\n  return <div className={s.container}>{children}</div>;\n};\n",null]}

package/dist/hooks/useToast/ToastContainer.css.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _css = require('@vanilla-extract/css');
+const container = _css.style.call(void 0, {
+  display: "flex",
+  alignItems: "flex-end",
+  flexDirection: "column-reverse",
+  position: "fixed",
+  right: "1rem",
+  bottom: "1rem",
+  left: "1rem"
+});
+
+
+exports.container = container;
+//# sourceMappingURL=ToastContainer.css.cjs.map

package/dist/hooks/useToast/ToastContainer.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useToast/ToastContainer.css.ts","/home/runner/work/react-kits/react-kits/packages/ui/dist/hooks/useToast/ToastContainer.css.cjs"],"names":[],"mappings":"AAAA,oHAAsB;AAEf,MAAM,UAAA,EAAY,wBAAA;AAAM,EAC7B,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,UAAA;AAAA,EACZ,aAAA,EAAe,gBAAA;AAAA,EAEf,QAAA,EAAU,OAAA;AAAA,EACV,KAAA,EAAO,MAAA;AAAA,EACP,MAAA,EAAQ,MAAA;AAAA,EACR,IAAA,EAAM;AACR,CAAC,CAAA;ACDD;AACE;AACF,8BAAC","file":"/home/runner/work/react-kits/react-kits/packages/ui/dist/hooks/useToast/ToastContainer.css.cjs","sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const container = style({\n  display: 'flex',\n  alignItems: 'flex-end',\n  flexDirection: 'column-reverse',\n\n  position: 'fixed',\n  right: '1rem',\n  bottom: '1rem',\n  left: '1rem',\n});\n",null]}

package/dist/hooks/useToast/ToastContainer.css.d.cts

@@ -0,0 +1,3 @@
+declare const container: string;
+
+export { container };

package/dist/hooks/useToast/ToastContainer.css.d.ts

@@ -1,2 +1,3 @@
-export declare const container: string;
-//# sourceMappingURL=ToastContainer.css.d.ts.map
+declare const container: string;
+
+export { container };

package/dist/hooks/useToast/ToastContainer.css.js

@@ -1,13 +1,14 @@
-import { style } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
-
+import { style } from "@vanilla-extract/css";
 const container = style({
-    display: 'flex',
-    alignItems: 'flex-end',
-    flexDirection: 'column-reverse',
-    position: 'fixed',
-    right: '1rem',
-    bottom: '1rem',
-    left: '1rem',
+  display: "flex",
+  alignItems: "flex-end",
+  flexDirection: "column-reverse",
+  position: "fixed",
+  right: "1rem",
+  bottom: "1rem",
+  left: "1rem"
 });
-
-export { container };
+export {
+  container
+};
+//# sourceMappingURL=ToastContainer.css.js.map

package/dist/hooks/useToast/ToastContainer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useToast/ToastContainer.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const container = style({\n  display: 'flex',\n  alignItems: 'flex-end',\n  flexDirection: 'column-reverse',\n\n  position: 'fixed',\n  right: '1rem',\n  bottom: '1rem',\n  left: '1rem',\n});\n"],"mappings":"AAAA,SAAS,aAAa;AAEf,MAAM,YAAY,MAAM;AAAA,EAC7B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,eAAe;AAAA,EAEf,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AACR,CAAC;","names":[]}

package/dist/hooks/useToast/ToastContainer.d.cts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ToastContainerProps {
+    children: ReactNode;
+}
+declare const ToastContainer: ({ children }: ToastContainerProps) => react_jsx_runtime.JSX.Element;
+
+export { ToastContainer };

package/dist/hooks/useToast/ToastContainer.d.ts

@@ -1,7 +1,9 @@
-import type { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
 interface ToastContainerProps {
     children: ReactNode;
 }
-export declare const ToastContainer: ({ children }: ToastContainerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ToastContainer.d.ts.map
+declare const ToastContainer: ({ children }: ToastContainerProps) => react_jsx_runtime.JSX.Element;
+
+export { ToastContainer };

package/dist/hooks/useToast/ToastContainer.js

@@ -1,8 +1,9 @@
-import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
-import { container } from './ToastContainer.css.js';
-
+import { jsx } from "react/jsx-runtime";
+import * as s from "./ToastContainer.css";
 const ToastContainer = ({ children }) => {
-    return jsxRuntimeExports.jsx("div", { className: container, children: children });
+  return /* @__PURE__ */ jsx("div", { className: s.container, children });
 };
-
-export { ToastContainer };
+export {
+  ToastContainer
+};
+//# sourceMappingURL=ToastContainer.js.map

package/dist/hooks/useToast/ToastContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useToast/ToastContainer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport * as s from './ToastContainer.css';\n\ninterface ToastContainerProps {\n  children: ReactNode;\n}\n\nexport const ToastContainer = ({ children }: ToastContainerProps) => {\n  return <div className={s.container}>{children}</div>;\n};\n"],"mappings":"AASS;AAPT,YAAY,OAAO;AAMZ,MAAM,iBAAiB,CAAC,EAAE,SAAS,MAA2B;AACnE,SAAO,oBAAC,SAAI,WAAW,EAAE,WAAY,UAAS;AAChD;","names":[]}

package/dist/hooks/useToast/ToastProvider.cjs

@@ -0,0 +1,99 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+var _jsxruntime = require('react/jsx-runtime');
+
+
+
+
+
+
+var _react = require('react');
+var _utils = require('@kimdw-rtk/utils');
+var _components = require('#components');
+var _ToastContainer = require('./ToastContainer');
+const ToastContext = _react.createContext.call(void 0, 
+  void 0
+);
+const DEFAULT_TOAST_DURATION = 5e3;
+const ToastProvider = ({
+  children,
+  defaultDuration = DEFAULT_TOAST_DURATION
+}) => {
+  const [toasts, setToasts] = _react.useState.call(void 0, []);
+  const idRef = _react.useRef.call(void 0, 0);
+  const remove = _react.useCallback.call(void 0, (id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const push = _react.useCallback.call(void 0, 
+    ({
+      color,
+      message,
+      autoClose = true,
+      duration = defaultDuration,
+      onClick
+    }) => {
+      const id = ++idRef.current;
+      setToasts((prev) => [
+        ...prev,
+        { id, color, message, autoClose, duration, onClick }
+      ]);
+      if (!autoClose) {
+        return id;
+      }
+      setTimeout(() => {
+        remove(id);
+      }, duration);
+      return id;
+    },
+    [defaultDuration, remove]
+  );
+  const handleToastClick = (toast) => {
+    if (toast.onClick === void 0) {
+      remove(toast.id);
+      return;
+    }
+    toast.onClick(toast.id);
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    ToastContext.Provider,
+    {
+      value: _react.useMemo.call(void 0, () => ({ push, remove }), [push, remove]),
+      children: [
+        children,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ToastContainer.ToastContainer, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _utils.TransitionGroup, { children: toasts.map((toast) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _utils.CSSTransition,
+          {
+            as: "div",
+            initial: {
+              opacity: 0,
+              transform: "translateY(1rem)",
+              height: "0"
+            },
+            animate: {
+              opacity: 1,
+              transform: "translateY(0)",
+              height: "3.5rem"
+            },
+            exit: { opacity: 0, height: "0" },
+            duration: 500,
+            style: { display: "flex", flexDirection: "column-reverse" },
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _components.Toast,
+              {
+                color: toast.color,
+                duration: toast.autoClose ? toast.duration : 0,
+                onClick: () => handleToastClick(toast),
+                children: toast.message
+              }
+            )
+          },
+          toast.id
+        )) }) })
+      ]
+    }
+  );
+};
+
+
+
+exports.ToastContext = ToastContext; exports.ToastProvider = ToastProvider;
+//# sourceMappingURL=ToastProvider.cjs.map

package/dist/hooks/useToast/ToastProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/react-kits/react-kits/packages/ui/dist/hooks/useToast/ToastProvider.cjs","../../../src/hooks/useToast/ToastProvider.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/react-kits/react-kits/packages/ui/dist/hooks/useToast/ToastProvider.cjs","sourcesContent":[null,"'use client';\n\nimport {\n  createContext,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from 'react';\n\nimport { CSSTransition, TransitionGroup } from '@kimdw-rtk/utils';\n\nimport { Toast } from '#components';\n\nimport { ToastContainer } from './ToastContainer';\n\nexport interface ToastData {\n  id: number;\n  color?: ComponentProps<typeof Toast>['color'];\n  message: string;\n  autoClose?: boolean;\n  duration?: number;\n  onClick?: (id: number) => void;\n}\n\ninterface ToastContextType {\n  push: (data: Omit<ToastData, 'id'>) => number;\n  remove: (id: number) => void;\n}\n\nexport const ToastContext = createContext<ToastContextType | undefined>(\n  undefined,\n);\n\ninterface ToastProviderProps {\n  children: ReactNode;\n  defaultDuration?: number;\n}\n\nconst DEFAULT_TOAST_DURATION = 5000;\n\nexport const ToastProvider = ({\n  children,\n  defaultDuration = DEFAULT_TOAST_DURATION,\n}: ToastProviderProps) => {\n  const [toasts, setToasts] = useState<ToastData[]>([]);\n  const idRef = useRef<number>(0);\n\n  const remove = useCallback((id: number) => {\n    setToasts((prev) => prev.filter((toast) => toast.id !== id));\n  }, []);\n\n  const push = useCallback<ToastContextType['push']>(\n    ({\n      color,\n      message,\n      autoClose = true,\n      duration = defaultDuration,\n      onClick,\n    }) => {\n      const id = ++idRef.current;\n      setToasts((prev) => [\n        ...prev,\n        { id, color, message, autoClose, duration, onClick },\n      ]);\n\n      if (!autoClose) {\n        return id;\n      }\n\n      // autoClose가 true면, 일정 시간이 지난 후 toast 제거\n      setTimeout(() => {\n        remove(id);\n      }, duration);\n\n      return id;\n    },\n    [defaultDuration, remove],\n  );\n\n  const handleToastClick = (toast: ToastData) => {\n    // onClick 이벤트가 정의되어 있지 않으면 기본적으로 toast를 닫도록 한다.\n    if (toast.onClick === undefined) {\n      remove(toast.id);\n      return;\n    }\n\n    toast.onClick(toast.id);\n  };\n\n  return (\n    <ToastContext.Provider\n      value={useMemo(() => ({ push, remove }), [push, remove])}\n    >\n      {children}\n      <ToastContainer>\n        <TransitionGroup>\n          {toasts.map((toast) => (\n            <CSSTransition\n              as=\"div\"\n              key={toast.id}\n              initial={{\n                opacity: 0,\n                transform: 'translateY(1rem)',\n                height: '0',\n              }}\n              animate={{\n                opacity: 1,\n                transform: 'translateY(0)',\n                height: '3.5rem',\n              }}\n              exit={{ opacity: 0, height: '0' }}\n              duration={500}\n              style={{ display: 'flex', flexDirection: 'column-reverse' }}\n            >\n              <Toast\n                color={toast.color}\n                duration={toast.autoClose ? toast.duration : 0}\n                onClick={() => handleToastClick(toast)}\n              >\n                {toast.message}\n              </Toast>\n            </CSSTransition>\n          ))}\n        </TransitionGroup>\n      </ToastContainer>\n    </ToastContext.Provider>\n  );\n};\n"]}