@shiflo/ui 0.1.2 → 0.1.4

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -56,7 +56,7 @@ function z({
   dragThreshold: h = 100,
   ...y
 }) {
-  const [b, s] = R(!1), l = a(null), x = a(null), $ = a(null);
+  const [b, s] = R(!1), l = a(null), $ = a(null), x = a(null);
   S(f, () => l.current);
   const v = (e) => {
     e.stopPropagation(), typeof c == "function" && c(e);
@@ -74,7 +74,7 @@ function z({
   }, [t]), /* @__PURE__ */ o(
     I,
     {
-      ref: x,
+      ref: $,
       open: t,
       onClose: r,
       transitionDuration: i,
@@ -95,7 +95,6 @@ function z({
           animate: {
             y: b ? 0 : "200%"
           },
-          exit: { y: "200%" },
           transition: {
             type: "spring",
             duration: i,
@@ -104,7 +103,7 @@ function z({
           style: g,
           ...y,
           children: [
-            !p && /* @__PURE__ */ o(A, { ref: $, children: /* @__PURE__ */ o(F, {}) }),
+            !p && /* @__PURE__ */ o(A, { ref: x, children: /* @__PURE__ */ o(F, {}) }),
             m
           ]
         }

package/dist/components/Overlay/Overlay.mjs

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

package/dist/theme/dark.mjs

@@ -78,7 +78,7 @@ const C = {
     common: {
       background: "#22252A",
       surface: "#30333A",
-      overlay: "rgba(0, 0, 0, 0.7)"
+      overlay: "rgba(0, 0, 0, 0.3)"
     },
     text: {
       primary: "#EAECEF",

package/dist/theme/light.mjs

@@ -78,7 +78,7 @@ const e = {
     common: {
       background: "#FFFFFF",
       surface: "#FFFFFF",
-      overlay: "rgba(0, 0, 0, 0.5)"
+      overlay: "rgba(0, 0, 0, 0.3)"
     },
     text: {
       primary: "#212529",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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
-};