@shiflo/ui 0.1.1 → 0.1.3

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -99,7 +99,7 @@ function z({
           transition: {
             type: "spring",
             duration: i,
-            damping: 10
+            bounce: 0.2
           },
           style: g,
           ...y,

package/dist/components/Button/Button.mjs

@@ -1,7 +1,7 @@
 import { jsxs as k } from "@emotion/react/jsx-runtime";
-import f from "@emotion/styled";
-import { motion as v } from "motion/react";
-const m = f(v.button)`
+import v from "@emotion/styled";
+import { motion as f } from "motion/react";
+const m = v(f.button)`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9,11 +9,11 @@ const m = f(v.button)`
   font-weight: 500;
   transition: all 0.2s;
 
-  ${({ theme: t, variant: l, size: s, color: d }) => {
+  ${({ theme: t, variant: l, size: d, color: c }) => {
   const {
     mode: a,
     palette: { primary: e, secondary: r, neutral: o, gradient: p },
-    typography: { body1: c, body2: g, small1: h, small2: u },
+    typography: { body1: s, body2: g, small1: h, small2: u },
     spacing: n,
     radius: b
   } = t, i = {};
@@ -89,7 +89,7 @@ const m = f(v.button)`
       });
       break;
     default:
-      if (d === "secondary") {
+      if (c === "secondary") {
         Object.assign(i, {
           backgroundColor: r.main,
           color: a === "dark" ? o[900] : o[700],
@@ -134,16 +134,16 @@ const m = f(v.button)`
       });
       break;
   }
-  switch (s) {
+  switch (d) {
     case "large":
       Object.assign(i, {
         padding: `${n[300]} ${n[350]}`,
         borderRadius: b[300],
-        fontSize: c.fontSize,
-        lineHeight: c.lineHeight,
+        fontSize: s.fontSize,
+        lineHeight: s.lineHeight,
         "& svg": {
-          width: c.fontSize,
-          height: c.fontSize
+          width: s.fontSize,
+          height: s.fontSize
         }
       });
       break;
@@ -190,19 +190,19 @@ const m = f(v.button)`
 function C({
   ref: t,
   children: l,
-  variant: s = "filled",
-  size: d = "medium",
+  variant: d = "filled",
+  size: c = "medium",
   color: a = "primary",
   startIcon: e,
   endIcon: r,
   ...o
 }) {
-  return s === "text" ? /* @__PURE__ */ k(
+  return d === "text" ? /* @__PURE__ */ k(
     m,
     {
       ref: t,
       variant: "text",
-      size: d,
+      size: c,
       color: "secondary",
       layout: !0,
       whileHover: {
@@ -211,8 +211,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [
@@ -221,12 +221,12 @@ function C({
         r
       ]
     }
-  ) : s === "ghost" ? /* @__PURE__ */ k(
+  ) : d === "ghost" ? /* @__PURE__ */ k(
     m,
     {
       ref: t,
       variant: "ghost",
-      size: d,
+      size: c,
       color: "primary",
       layout: !0,
       whileHover: {
@@ -235,8 +235,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [
@@ -245,12 +245,12 @@ function C({
         r
       ]
     }
-  ) : s === "gradient" ? /* @__PURE__ */ k(
+  ) : d === "gradient" ? /* @__PURE__ */ k(
     m,
     {
       ref: t,
       variant: "gradient",
-      size: d,
+      size: c,
       color: "primary",
       layout: !0,
       whileHover: {
@@ -259,8 +259,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [
@@ -273,8 +273,8 @@ function C({
     m,
     {
       ref: t,
-      variant: s,
-      size: d,
+      variant: d,
+      size: c,
       color: a,
       layout: !0,
       whileHover: {
@@ -283,8 +283,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [

package/dist/components/Dialog/Dialog.mjs

@@ -1,9 +1,9 @@
 import { jsx as m } from "@emotion/react/jsx-runtime";
-import { useState as d, useRef as u, useEffect as h } from "react";
-import g from "@emotion/styled";
-import { motion as y } from "motion/react";
-import $ from "../Overlay/Overlay.mjs";
-const x = g(y.div)`
+import { useState as p, useEffect as d } from "react";
+import u from "@emotion/styled";
+import { motion as h } from "motion/react";
+import g from "../Overlay/Overlay.mjs";
+const y = u(h.div)`
   width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
   max-width: ${({ maxWidth: e = "375px" }) => e};
   max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
@@ -17,60 +17,59 @@ const x = g(y.div)`
   }
 }) => e.background};
 `;
-function F({
+function O({
   open: e,
-  onClose: l,
-  children: n,
+  onClose: c,
+  children: l,
   transitionDuration: a = 0.2,
   onClick: o,
-  style: b,
-  maxWidth: c = "375px",
+  style: $,
+  maxWidth: n = "375px",
   ...s
 }) {
-  const [r, i] = d(!1), f = u(null), p = (t) => {
+  const [i, r] = p(!1), f = (t) => {
     t.stopPropagation(), typeof o == "function" && o(t);
   };
-  return h(() => {
+  return d(() => {
     let t;
     return e ? t = requestAnimationFrame(() => {
-      i(!0);
-    }) : i(!1), () => {
+      r(!0);
+    }) : r(!1), () => {
       t && cancelAnimationFrame(t);
     };
   }, [e]), /* @__PURE__ */ m(
-    $,
+    g,
     {
-      ref: f,
       open: e,
-      onClose: l,
+      onClose: c,
       transitionDuration: a,
       placement: "center-middle",
       children: /* @__PURE__ */ m(
-        x,
+        y,
         {
           transitionDuration: a,
-          maxWidth: c,
-          onClick: p,
+          maxWidth: n,
+          onClick: f,
           initial: {
             scale: 0.9,
             opacity: 0
           },
           animate: {
-            scale: r ? 1 : 0.9,
-            opacity: r ? 1 : 0
+            scale: i ? 1 : 0.9,
+            opacity: i ? 1 : 0
           },
           transition: {
             type: "spring",
             duration: a,
-            damping: 10
+            bounce: 0.2
           },
           ...s,
-          children: n
+          children: l
         }
       )
     }
   );
 }
 export {
-  F as default
+  O as default
 };

package/dist/components/Overlay/Overlay.mjs

@@ -1,35 +1,30 @@
-import { jsxs as x, jsx as f } from "@emotion/react/jsx-runtime";
-import { useState as m, useRef as E, useImperativeHandle as I, useLayoutEffect as C, useEffect as w } from "react";
-import { createPortal as L } from "react-dom";
-import { useTheme as A } from "@emotion/react";
-import a from "@emotion/styled";
-import { motion as o } from "motion/react";
-const F = a(o.div)`
+import { jsxs as k, jsx as m } from "@emotion/react/jsx-runtime";
+import { useState as f, useEffect as j } from "react";
+import { createPortal as v } from "react-dom";
+import { useTheme as x } from "@emotion/react";
+import r from "@emotion/styled";
+import { motion as n } from "motion/react";
+const C = r(n.div)`
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
-`, R = a(o.div)`
+`, A = r(n.div)`
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: ${({
-  theme: {
-    palette: { common: r }
-  }
-}) => r.overlay};
-`, S = a(o.div)`
+`, w = r(n.div)`
   position: fixed;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 
-  ${({ placement: r }) => {
+  ${({ placement: o }) => {
   const t = {};
-  switch (r) {
+  switch (o) {
     case "top-left":
       Object.assign(t, {
         top: 0,
@@ -93,60 +88,56 @@ const F = a(o.div)`
   return t;
 }}
 `;
-function N({
-  children: r,
+function P({
+  children: o,
   open: t,
-  onClose: d,
-  transitionDuration: s = 0.2,
-  placement: p,
-  ref: u,
-  onClick: b,
-  hideOverlay: g,
-  ...y
+  onClose: p,
+  transitionDuration: a = 0.2,
+  placement: b,
+  ref: I,
+  onClick: d,
+  hideOverlay: s,
+  ...g
 }) {
   const {
-    palette: { common: h }
-  } = A(), [O, i] = m(!0), [v, c] = m(!1), n = E(null), k = (e) => {
-    d?.(), b?.(e);
+    palette: { common: i }
+  } = x(), [u, c] = f(!0), [h, l] = f(!1), y = (e) => {
+    p?.(), d?.(e);
+  }, O = () => {
+    t || c(!0);
   };
-  return I(u, () => n.current), C(() => {
+  return j(() => {
     let e;
-    return t ? (i(!1), e = requestAnimationFrame(() => {
-      c(!0);
-    })) : c(!1), () => {
+    return t ? (c(!1), e = requestAnimationFrame(() => {
+      l(!0);
+    })) : l(!1), () => {
       e && cancelAnimationFrame(e);
     };
-  }, [t, s]), w(() => {
-    const e = n.current, l = (j) => {
-      t || j.propertyName === "opacity" && i(!0);
-    };
-    return e?.addEventListener("transitionend", l), () => {
-      e?.removeEventListener("transitionend", l);
-    };
-  }, [t]), O ? null : L(
-    /* @__PURE__ */ x(F, { children: [
-      /* @__PURE__ */ f(
-        R,
+  }, [t, a]), u ? null : v(
+    /* @__PURE__ */ k(C, { children: [
+      /* @__PURE__ */ m(
+        A,
         {
-          ref: n,
-          initial: { opacity: 0 },
+          initial: { opacity: 0, backgroundColor: s ? "rgba(0, 0, 0, 0)" : i.overlay },
           animate: {
-            opacity: v ? 1 : 0,
-            backgroundColor: g ? "rgba(0, 0, 0, 0)" : h.overlay
+            opacity: h ? 1 : 0,
+            backgroundColor: s ? "rgba(0, 0, 0, 0)" : i.overlay
           },
           transition: {
-            duration: s,
-            ease: t ? "easeIn" : "easeOut"
+            type: "spring",
+            duration: a,
+            bounce: 0.2
           },
-          onClick: k,
-          ...y
+          onAnimationComplete: O,
+          onClick: y,
+          ...g
         }
       ),
-      /* @__PURE__ */ f(S, { placement: p, children: r })
+      /* @__PURE__ */ m(w, { placement: b, children: o })
     ] }),
     document.body
   );
 }
 export {
-  N as default
+  P as default
 };

package/dist/components/Snackbar/Snackbar.mjs

@@ -1,9 +1,9 @@
-import { jsxs as E, jsx as c } from "@emotion/react/jsx-runtime";
-import { useState as y, useRef as b, useImperativeHandle as z, useLayoutEffect as A, useEffect as g } from "react";
-import { createPortal as I } from "react-dom";
-import i from "@emotion/styled";
-import { motion as L } from "motion/react";
-const R = i(L.div)`
+import { jsxs as $, jsx as l } from "@emotion/react/jsx-runtime";
+import { useState as h, useRef as v, useEffect as x } from "react";
+import { createPortal as S } from "react-dom";
+import n from "@emotion/styled";
+import { motion as k } from "motion/react";
+const A = n(k.div)`
   position: fixed;
   left: 50%;
   bottom: ${({ theme: { spacing: e } }) => `calc(${e[800]} + var(--safe-area-inset-bottom, 0px))`};
@@ -21,9 +21,9 @@ const R = i(L.div)`
 }) => e[900]};
   border-radius: ${({ theme: { radius: e } }) => e[400]};
   z-index: 1;
-`, T = i.div`
+`, z = n.div`
   white-space: nowrap;
-`, j = i.div`
+`, j = n.div`
   flex-grow: 1;
   display: -webkit-box;
   overflow: hidden;
@@ -40,52 +40,49 @@ const R = i(L.div)`
   lineHeight: t.lineHeight,
   color: e.surface
 })}
-`, F = i.div`
+`, C = n.div`
   white-space: nowrap;
 `;
-function B({
+function E({
   children: e,
   open: t,
-  onClose: l,
-  transitionDuration: a = 0.2,
-  style: O,
-  ref: v,
+  onClose: c,
+  transitionDuration: r = 0.2,
+  style: F,
+  ref: I,
   startIcon: m,
-  action: f,
-  maxWidth: w = "375px",
-  autoHideDuration: d = 3e3,
+  action: s,
+  maxWidth: b = "375px",
+  autoHideDuration: f = 3e3,
   disableAutoHide: p,
-  ...$
+  ...w
 }) {
-  const [k, u] = y(!0), [r, h] = y(!1), o = b(null), s = b(null);
-  return z(v, () => o.current), A(() => {
-    let n;
-    return t ? (u(!1), n = requestAnimationFrame(() => {
-      h(!0);
-    })) : h(!1), () => {
-      n && cancelAnimationFrame(n);
+  const [g, d] = h(!0), [i, u] = h(!1), o = v(null);
+  x(() => {
+    let a;
+    return t ? (d(!1), a = requestAnimationFrame(() => {
+      u(!0);
+    })) : u(!1), () => {
+      a && cancelAnimationFrame(a);
     };
-  }, [t, a]), g(() => {
-    const n = o.current, x = (S) => {
-      t || S.propertyName === "opacity" && u(!0);
-    };
-    return n?.addEventListener("transitionend", x), () => {
-      n?.removeEventListener("transitionend", x);
-    };
-  }, [t]), g(() => {
-    if (!(p || !r))
-      return s.current = setTimeout(() => {
-        l?.();
-      }, d), () => {
-        s.current && clearTimeout(s.current);
+  }, [t, r]);
+  const y = () => {
+    t || d(!0);
+  };
+  return x(() => {
+    if (!(p || !i))
+      return o.current = setTimeout(() => {
+        c?.();
+      }, f), () => {
+        o.current && clearTimeout(o.current);
       };
-  }, [p, d, r, l]), k ? null : I(
-    /* @__PURE__ */ E(
-      R,
+  }, [p, f, i, c]), g ? null : S(
+    /* @__PURE__ */ $(
+      A,
       {
-        ref: o,
-        transitionDuration: a,
-        maxWidth: w,
+        transitionDuration: r,
+        maxWidth: b,
+        onAnimationComplete: y,
         initial: {
           x: "-50%",
           scale: 0.97,
@@ -93,19 +90,19 @@ function B({
         },
         animate: {
           x: "-50%",
-          scale: r ? 1 : 0.97,
-          opacity: r ? 1 : 0
+          scale: i ? 1 : 0.97,
+          opacity: i ? 1 : 0
         },
         transition: {
           type: "spring",
-          duration: a,
-          damping: 10
+          duration: r,
+          bounce: 0.2
         },
-        ...$,
+        ...w,
         children: [
-          m && /* @__PURE__ */ c(T, { children: m }),
-          /* @__PURE__ */ c(j, { children: e }),
-          f && /* @__PURE__ */ c(F, { children: f })
+          m && /* @__PURE__ */ l(z, { children: m }),
+          /* @__PURE__ */ l(j, { children: e }),
+          s && /* @__PURE__ */ l(C, { children: s })
         ]
       }
     ),
@@ -113,5 +110,5 @@ function B({
   );
 }
 export {
-  B as default
+  E as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "files": [
     "dist"

package/dist/components/FPSMonitor/FPSMonitor.mjs

@@ -1,201 +0,0 @@
-import { jsxs as t, jsx as r } from "@emotion/react/jsx-runtime";
-import { useState as P, useRef as k, useEffect as A } from "react";
-import { useTheme as E } from "@emotion/react";
-import { motion as u, AnimatePresence as C } from "motion/react";
-import s from "../Box/Box.mjs";
-import { FPSChecker as I } from "./FPSMonitor.utils.mjs";
-import e from "../Typography/Typography.mjs";
-function J({
-  trigger: R = !1,
-  duration: g = 5e3,
-  updateInterval: y = 10,
-  threshold: p = 55,
-  onComplete: v,
-  on60FPSAchieved: b
-}) {
-  const {
-    palette: { neutral: x, primary: o, feedback: n, common: W, border: w, gradient: T },
-    spacing: l,
-    radius: d
-  } = E(), [i, f] = P(null), [c, F] = P(null), h = k(!1), m = k(null);
-  A(() => {
-    if (!h.current)
-      return h.current = !0, F(null), f(null), m.current = new I(
-        { duration: g, callbackInterval: y },
-        {
-          onUpdate: (a) => {
-            f(a);
-          },
-          onComplete: (a) => {
-            h.current = !1, f(a), v?.(a);
-            const S = a.averageFPS >= p;
-            F(S), b?.(S);
-          }
-        }
-      ), m.current.start(), () => {
-        m.current && h.current && m.current.stop();
-      };
-  }, [R, g, y, p, b, v]);
-  const $ = () => i ? i.averageFPS >= 60 ? o.main : i.averageFPS >= 30 ? o.light : n.error.main : x[500], B = () => i ? i.averageFPS >= 60 ? "60프레임 달성!" : i.averageFPS >= 30 ? "30프레임 이상" : "30프레임 미만" : "측정 대기 중", j = (a) => a >= 60 ? o.main : a >= 30 ? o.light : n.error.main, O = (a) => Math.min(a / 60 * 100, 100);
-  return /* @__PURE__ */ t(
-    u.div,
-    {
-      initial: { opacity: 0, y: 10 },
-      animate: { opacity: 1, y: 0 },
-      transition: { duration: 0.3, ease: "easeOut" },
-      style: {
-        padding: l[600],
-        border: `1px solid ${w.light}`,
-        borderRadius: d[600],
-        backgroundColor: W.surface,
-        boxShadow: `0 2px 8px ${x[100]}15`,
-        position: "relative",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ r(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              height: "2px",
-              background: T.primaryToAccent,
-              opacity: 0.6
-            }
-          }
-        ),
-        /* @__PURE__ */ r(s, { mb: "600", children: /* @__PURE__ */ r(e, { variant: "heading3", fontWeight: 700, color: "primary.main", mb: "400", children: "FPS 모니터" }) }),
-        /* @__PURE__ */ r(C, { children: i && /* @__PURE__ */ r(
-          u.div,
-          {
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-            transition: { duration: 0.2 },
-            children: /* @__PURE__ */ t(s, { mb: "600", children: [
-              /* @__PURE__ */ t(
-                e,
-                {
-                  variant: "body1",
-                  fontWeight: 700,
-                  mb: "400",
-                  style: { color: $() },
-                  children: [
-                    "상태: ",
-                    B()
-                  ]
-                }
-              ),
-              /* @__PURE__ */ t(s, { mb: "500", children: [
-                /* @__PURE__ */ t(e, { variant: "small1", color: "text.secondary", mb: "300", children: [
-                  "현재 FPS: ",
-                  i.fps.toFixed(1)
-                ] }),
-                /* @__PURE__ */ r(
-                  s,
-                  {
-                    style: {
-                      height: "8px",
-                      backgroundColor: o.alpha[10],
-                      borderRadius: d[150],
-                      overflow: "hidden",
-                      position: "relative"
-                    },
-                    children: /* @__PURE__ */ r(
-                      u.div,
-                      {
-                        style: {
-                          height: "100%",
-                          backgroundColor: j(i.fps),
-                          borderRadius: d[150],
-                          position: "relative"
-                        },
-                        initial: { width: 0 },
-                        animate: { width: `${O(i.fps)}%` },
-                        transition: { duration: 0.4, ease: "easeOut" }
-                      }
-                    )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ t(
-                s,
-                {
-                  mb: "600",
-                  style: {
-                    display: "grid",
-                    gridTemplateColumns: "1fr 1fr",
-                    gap: l[300],
-                    backgroundColor: o.alpha[5],
-                    padding: l[400],
-                    borderRadius: d[400],
-                    border: `1px solid ${o.alpha[20]}`
-                  },
-                  children: [
-                    /* @__PURE__ */ t("div", { children: [
-                      /* @__PURE__ */ r(e, { variant: "small1", color: "text.secondary", children: "평균 FPS" }),
-                      /* @__PURE__ */ r(e, { variant: "body1", fontWeight: 700, color: "text.primary", children: i.averageFPS.toFixed(1) })
-                    ] }),
-                    /* @__PURE__ */ t("div", { children: [
-                      /* @__PURE__ */ r(e, { variant: "small1", color: "text.secondary", children: "최소 FPS" }),
-                      /* @__PURE__ */ r(e, { variant: "body1", fontWeight: 700, color: "text.primary", children: i.minFPS.toFixed(1) })
-                    ] }),
-                    /* @__PURE__ */ t("div", { children: [
-                      /* @__PURE__ */ r(e, { variant: "small1", color: "text.secondary", children: "최대 FPS" }),
-                      /* @__PURE__ */ r(e, { variant: "body1", fontWeight: 700, color: "text.primary", children: i.maxFPS.toFixed(1) })
-                    ] }),
-                    /* @__PURE__ */ t("div", { children: [
-                      /* @__PURE__ */ r(e, { variant: "small1", color: "text.secondary", children: "프레임 수" }),
-                      /* @__PURE__ */ r(e, { variant: "body1", fontWeight: 700, color: "text.primary", children: i.frameCount })
-                    ] }),
-                    /* @__PURE__ */ t("div", { style: { gridColumn: "1 / -1" }, children: [
-                      /* @__PURE__ */ r(e, { variant: "small1", color: "text.secondary", children: "측정 시간" }),
-                      /* @__PURE__ */ t(e, { variant: "body1", fontWeight: 700, color: "text.primary", children: [
-                        (i.duration / 1e3).toFixed(1),
-                        "초"
-                      ] })
-                    ] })
-                  ]
-                }
-              )
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ r(C, { children: c !== null && /* @__PURE__ */ t(
-          u.div,
-          {
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-            transition: { duration: 0.2 },
-            style: {
-              width: "100%",
-              marginTop: l[600],
-              padding: l[400],
-              backgroundColor: c ? o.alpha[10] : n.error.light,
-              border: `1px solid ${c ? o.main : n.error.main}`,
-              borderRadius: d[400],
-              color: c ? o.main : n.error.dark,
-              position: "relative",
-              overflow: "hidden"
-            },
-            children: [
-              /* @__PURE__ */ r(e, { variant: "body1", fontWeight: 700, children: c ? "60프레임 달성!" : "60프레임 미달성" }),
-              /* @__PURE__ */ t(e, { variant: "small1", mt: "200", style: { opacity: 0.8 }, children: [
-                "임계값: ",
-                p,
-                "fps"
-              ] })
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-}
-export {
-  J as default
-};

package/dist/components/FPSMonitor/FPSMonitor.utils.mjs

@@ -1,116 +0,0 @@
-class u {
-  startTime = 0;
-  lastTime = 0;
-  frameCount = 0;
-  fpsHistory = [];
-  animationId = null;
-  isRunning = !1;
-  options;
-  onUpdate;
-  onComplete;
-  constructor(t = {}, e) {
-    this.options = {
-      duration: t.duration ?? 5e3,
-      // 기본 5초
-      sampleSize: t.sampleSize ?? 60,
-      // 기본 60프레임 샘플
-      callbackInterval: t.callbackInterval ?? 10
-      // 기본 10프레임마다 콜백
-    }, this.onUpdate = e?.onUpdate, this.onComplete = e?.onComplete;
-  }
-  /**
-   * FPS 측정 시작
-   */
-  start() {
-    if (this.isRunning) {
-      console.warn("FPS 측정이 이미 실행 중입니다.");
-      return;
-    }
-    this.isRunning = !0, this.startTime = performance.now(), this.lastTime = this.startTime, this.frameCount = 0, this.fpsHistory = [], this.animationId = requestAnimationFrame(this.measure.bind(this));
-  }
-  /**
-   * FPS 측정 중지
-   */
-  stop() {
-    if (!this.isRunning)
-      throw new Error("FPS 측정이 실행 중이 아닙니다.");
-    return this.isRunning = !1, this.animationId && (cancelAnimationFrame(this.animationId), this.animationId = null), this.getMetrics();
-  }
-  /**
-   * 현재 측정 중인지 확인
-   */
-  get running() {
-    return this.isRunning;
-  }
-  /**
-   * 현재까지의 측정 결과 반환
-   */
-  getMetrics() {
-    const e = performance.now() - this.startTime, i = this.frameCount > 0 ? this.frameCount / e * 1e3 : 0, h = this.fpsHistory.length > 0 ? this.fpsHistory.reduce((m, o) => m + o, 0) / this.fpsHistory.length : i, s = this.fpsHistory.length > 0 ? Math.min(...this.fpsHistory) : i, r = this.fpsHistory.length > 0 ? Math.max(...this.fpsHistory) : i;
-    return {
-      fps: i,
-      averageFPS: h,
-      minFPS: s,
-      maxFPS: r,
-      frameCount: this.frameCount,
-      duration: e
-    };
-  }
-  measure(t) {
-    if (this.isRunning) {
-      if (this.frameCount++, t - this.lastTime >= 1e3) {
-        const e = this.frameCount / (t - this.startTime) * 1e3;
-        this.fpsHistory.push(e), this.fpsHistory.length > this.options.sampleSize && this.fpsHistory.shift(), this.lastTime = t;
-      }
-      if (this.frameCount % this.options.callbackInterval === 0 && this.onUpdate?.(this.getMetrics()), t - this.startTime >= this.options.duration) {
-        this.stop(), this.onComplete?.(this.getMetrics());
-        return;
-      }
-      this.animationId = requestAnimationFrame(this.measure.bind(this));
-    }
-  }
-}
-function f(n = 5e3) {
-  return new Promise((t) => {
-    new u({ duration: n }, { onComplete: t }).start();
-  });
-}
-function p(n, t = {}) {
-  const e = new u(t, { onUpdate: n });
-  return e.start(), e;
-}
-function l() {
-  return new Promise((n, t) => {
-    if (!("PerformanceObserver" in window)) {
-      t(new Error("PerformanceObserver를 지원하지 않는 브라우저입니다."));
-      return;
-    }
-    const e = new PerformanceObserver((i) => {
-      const s = i.getEntries().filter((r) => r.entryType === "frame");
-      if (s.length > 0) {
-        const r = s.map((a) => a.duration), o = 1e3 / (r.reduce((a, c) => a + c, 0) / r.length);
-        e.disconnect(), n({
-          fps: o,
-          averageFPS: o,
-          minFPS: o,
-          maxFPS: o,
-          frameCount: s.length,
-          duration: s[s.length - 1].startTime - s[0].startTime
-        });
-      }
-    });
-    try {
-      e.observe({ entryTypes: ["frame"] }), setTimeout(() => {
-        e.disconnect(), t(new Error("측정 시간이 초과되었습니다."));
-      }, 3e3);
-    } catch (i) {
-      t(i);
-    }
-  });
-}
-export {
-  u as FPSChecker,
-  f as measureFPS,
-  l as measureFPSWithPerformanceAPI,
-  p as monitorFPS
-};

package/dist/components/FPSMonitor/index.mjs

@@ -1,4 +0,0 @@
-import r from "./FPSMonitor.mjs";
-export {
-  r as default
-};