@shiflo/ui 0.0.19 → 0.1.1

package/dist/components/Dialog/Dialog.mjs

@@ -1,8 +1,9 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useState as $, useRef as p, useEffect as h } from "react";
-import g from "basic-styled";
-import y from "../Overlay/Overlay.mjs";
-const x = g.div`
+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)`
   width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
   max-width: ${({ maxWidth: e = "375px" }) => e};
   max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
@@ -15,24 +16,18 @@ const x = g.div`
     palette: { common: e }
   }
 }) => e.background};
-  transition:
-    transform ${({ transitionDuration: e }) => `${e}ms`}
-      ${({ ease: e }) => e === "in" ? "ease-out" : "ease-in"},
-    opacity ${({ transitionDuration: e }) => `${e}ms`}
-      ${({ ease: e }) => e === "in" ? "ease-out" : "ease-in"},
-    background-color 0.2s;
 `;
-function O({
+function F({
   open: e,
-  onClose: n,
-  children: m,
-  transitionDuration: a = 200,
+  onClose: l,
+  children: n,
+  transitionDuration: a = 0.2,
   onClick: o,
-  style: l,
+  style: b,
   maxWidth: c = "375px",
-  ...f
+  ...s
 }) {
-  const [r, i] = $(!1), u = p(null), d = (t) => {
+  const [r, i] = d(!1), f = u(null), p = (t) => {
     t.stopPropagation(), typeof o == "function" && o(t);
   };
   return h(() => {
@@ -42,33 +37,40 @@ function O({
     }) : i(!1), () => {
       t && cancelAnimationFrame(t);
     };
-  }, [e]), /* @__PURE__ */ s(
-    y,
+  }, [e]), /* @__PURE__ */ m(
+    $,
     {
-      ref: u,
+      ref: f,
       open: e,
-      onClose: n,
+      onClose: l,
       transitionDuration: a,
       placement: "center-middle",
-      children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ m(
         x,
         {
-          ease: e ? "in" : "out",
           transitionDuration: a,
           maxWidth: c,
-          onClick: d,
-          ...f,
-          style: {
-            transform: `scale(${r ? 1 : 0.9})`,
-            opacity: r ? 1 : 0,
-            ...l
+          onClick: p,
+          initial: {
+            scale: 0.9,
+            opacity: 0
           },
-          children: m
+          animate: {
+            scale: r ? 1 : 0.9,
+            opacity: r ? 1 : 0
+          },
+          transition: {
+            type: "spring",
+            duration: a,
+            damping: 10
+          },
+          ...s,
+          children: n
         }
       )
     }
   );
 }
 export {
-  O as default
+  F as default
 };

package/dist/components/Dialog/Dialog.typing.d.ts

@@ -1,6 +1,7 @@
-import { ComponentPropsWithRef } from 'react';
+import { PropsWithChildren } from 'react';
 import { UtilityProps } from '../../typings/utility';
-export interface DialogProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
+import { HTMLMotionProps } from 'motion/react';
+export interface DialogProps extends PropsWithChildren<HTMLMotionProps<"div"> & Pick<UtilityProps, "css">> {
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;

package/dist/components/FPSMonitor/FPSMonitor.d.ts

@@ -0,0 +1,11 @@
+import { FPSMetrics } from './FPSMonitor.utils';
+export interface FPSMonitorProps {
+    trigger?: boolean;
+    duration?: number;
+    updateInterval?: number;
+    threshold?: number;
+    onComplete?: (metrics: FPSMetrics) => void;
+    on60FPSAchieved?: (achieved: boolean) => void;
+}
+declare function FPSMonitor({ trigger, duration, updateInterval, threshold, onComplete, on60FPSAchieved }: FPSMonitorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default FPSMonitor;

package/dist/components/FPSMonitor/FPSMonitor.mjs

@@ -0,0 +1,201 @@
+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.d.ts

@@ -0,0 +1,69 @@
+export interface FPSMetrics {
+    fps: number;
+    averageFPS: number;
+    minFPS: number;
+    maxFPS: number;
+    frameCount: number;
+    duration: number;
+}
+export interface FPSOptions {
+    /** 측정 지속 시간 (밀리초) */
+    duration?: number;
+    /** 평균 FPS 계산을 위한 샘플 수 */
+    sampleSize?: number;
+    /** 콜백 함수 호출 간격 (프레임 수) */
+    callbackInterval?: number;
+}
+/**
+ * requestAnimationFrame을 사용한 FPS 측정기
+ */
+export declare class FPSChecker {
+    private startTime;
+    private lastTime;
+    private frameCount;
+    private fpsHistory;
+    private animationId;
+    private isRunning;
+    private options;
+    private onUpdate?;
+    private onComplete?;
+    constructor(options?: FPSOptions, callbacks?: {
+        onUpdate?: (metrics: FPSMetrics) => void;
+        onComplete?: (metrics: FPSMetrics) => void;
+    });
+    /**
+     * FPS 측정 시작
+     */
+    start(): void;
+    /**
+     * FPS 측정 중지
+     */
+    stop(): FPSMetrics;
+    /**
+     * 현재 측정 중인지 확인
+     */
+    get running(): boolean;
+    /**
+     * 현재까지의 측정 결과 반환
+     */
+    getMetrics(): FPSMetrics;
+    private measure;
+}
+/**
+ * 간단한 FPS 측정 함수
+ * @param duration 측정 지속 시간 (밀리초)
+ * @returns Promise<FPSMetrics>
+ */
+export declare function measureFPS(duration?: number): Promise<FPSMetrics>;
+/**
+ * 실시간 FPS 모니터링 함수
+ * @param onUpdate FPS 업데이트 콜백
+ * @param options 측정 옵션
+ * @returns FPSChecker 인스턴스
+ */
+export declare function monitorFPS(onUpdate: (metrics: FPSMetrics) => void, options?: FPSOptions): FPSChecker;
+/**
+ * Performance API를 사용한 프레임레이트 측정
+ * 더 정확하지만 브라우저 지원이 제한적
+ */
+export declare function measureFPSWithPerformanceAPI(): Promise<FPSMetrics>;

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

@@ -0,0 +1,116 @@
+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.d.ts

@@ -0,0 +1,3 @@
+import { default as FPSMonitor, FPSMonitorProps } from './FPSMonitor';
+export type { FPSMonitorProps };
+export default FPSMonitor;

package/dist/components/FPSMonitor/index.mjs

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

package/dist/components/Icon/Icon.d.ts

@@ -1,3 +1,3 @@
 import { IconProps } from './Icon.typing';
-declare function Icon({ ref, name, width, height, ...props }: IconProps): import("react").JSX.Element[] | null | undefined;
+declare function Icon({ ref, name, width, height, ...props }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element[] | null | undefined;
 export default Icon;

package/dist/components/Icon/Icon.mjs

@@ -1,7 +1,7 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as m } from "@emotion/react/jsx-runtime";
 import { Children as p, isValidElement as l } from "react";
 import { S as a } from "../../assets/icons/index.ts-Bfm0GTNS.js";
-import c from "basic-styled";
+import c from "@emotion/styled";
 import d from "../../utils/getValueByPath.mjs";
 const f = c.svg`
   transition:

package/dist/components/Icon/Icon.typing.d.ts

@@ -1,10 +1,10 @@
 import { ComponentPropsWithRef } from 'react';
-import { RecursionPath, UtilityProps } from '../../typings/utility';
-import { BasicTheme } from 'basic-styled';
+import { ShifloTheme } from '../../theme/typing';
+import { RecursionPath } from '../../typings/utility';
 import type * as Svgs from "../../assets/icons";
-export interface BaseIconProps extends Pick<UtilityProps, "css"> {
+export interface BaseIconProps {
     name: keyof typeof Svgs;
-    color?: RecursionPath<BasicTheme["palette"]> | "inherit";
+    color?: RecursionPath<ShifloTheme["palette"]> | "inherit";
     width?: number;
     height?: number;
 }

package/dist/components/Overlay/Overlay.d.ts

@@ -1,3 +1,3 @@
 import { OverlayProps } from './Overlay.typing';
-declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, onClick, ...props }: OverlayProps): import('react').ReactPortal | null;
+declare function Overlay({ children, open, onClose, transitionDuration, placement, ref, onClick, hideOverlay, ...props }: OverlayProps): import('react').ReactPortal | null;
 export default Overlay;