@shiflo/ui 0.0.18 → 0.1.0

package/dist/components/Button/Button.mjs

@@ -1,37 +1,23 @@
-import { jsxs as g } from "react/jsx-runtime";
-import v from "basic-styled";
-const h = v.button`
+import { jsxs as k } from "react/jsx-runtime";
+import f from "@emotion/styled";
+import { motion as v } from "motion/react";
+const m = f(v.button)`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: ${({ theme: { spacing: r } }) => r[100]};
+  gap: ${({ theme: { spacing: t } }) => t[100]};
   font-weight: 500;
-  transition:
-    transform 0.2s ease-out,
-    background-color 0.2s,
-    padding 0.2s,
-    font-size 0.2s,
-    font-weight 0.2s,
-    border-width 0.2s,
-    border-radius 0.2s,
-    border-color 0.2s,
-    color 0.2s;
-  border: 1px solid transparent;
+  transition: all 0.2s;
 
-  ${({
-  theme: {
-    mode: r,
-    palette: { primary: e, secondary: t, neutral: o },
-    typography: { body1: c, body2: a, small1: n, small2: d },
-    spacing: s,
-    radius: l
-  },
-  variant: b,
-  size: f,
-  color: k
-}) => {
-  const i = {};
-  switch (b) {
+  ${({ theme: t, variant: l, size: s, color: d }) => {
+  const {
+    mode: a,
+    palette: { primary: e, secondary: r, neutral: o, gradient: p },
+    typography: { body1: c, body2: g, small1: h, small2: u },
+    spacing: n,
+    radius: b
+  } = t, i = {};
+  switch (l) {
     case "ghost":
       Object.assign(i, {
         backgroundColor: e.alpha[10],
@@ -45,11 +31,10 @@ const h = v.button`
           }
         },
         "&:active": {
-          transform: "scale(0.9)",
           backgroundColor: e.alpha[30]
         },
         "&:disabled": {
-          backgroundColor: r === "dark" ? e.alpha[10] : e.alpha[5],
+          backgroundColor: a === "dark" ? e.alpha[10] : e.alpha[5],
           color: o[500],
           cursor: "not-allowed"
         }
@@ -58,10 +43,10 @@ const h = v.button`
     case "text":
       Object.assign(i, {
         backgroundColor: "transparent",
-        color: r === "dark" ? o[800] : o[700],
+        color: a === "dark" ? o[800] : o[700],
         // 기본 텍스트 색상 (더 강조된 중립색)
         "& svg": {
-          color: r === "dark" ? o[800] : o[700]
+          color: a === "dark" ? o[800] : o[700]
         },
         "@media (hover: hover)": {
           "&:hover": {
@@ -69,7 +54,6 @@ const h = v.button`
           }
         },
         "&:active": {
-          transform: "scale(0.9)",
           backgroundColor: o[300]
         },
         "&:disabled": {
@@ -80,22 +64,45 @@ const h = v.button`
         }
       });
       break;
+    case "gradient":
+      Object.assign(i, {
+        background: p.primaryToAccent,
+        color: a === "dark" ? o[900] : r.main,
+        "& svg": {
+          color: a === "dark" ? o[900] : r.main
+        },
+        "@media (hover: hover)": {
+          "&:hover": {
+            background: p.primaryToAccent
+          }
+        },
+        "&:active": {
+          background: p.primaryToAccent,
+          boxShadow: `inset 0 0 0 100px ${e.dark}`
+        },
+        "&:disabled": {
+          background: o[200],
+          color: o[500],
+          cursor: "not-allowed",
+          boxShadow: "none"
+        }
+      });
+      break;
     default:
-      if (k === "secondary") {
+      if (d === "secondary") {
         Object.assign(i, {
-          backgroundColor: t.main,
-          color: r === "dark" ? o[900] : o[700],
+          backgroundColor: r.main,
+          color: a === "dark" ? o[900] : o[700],
           "& svg": {
-            color: r === "dark" ? o[900] : o[700]
+            color: a === "dark" ? o[900] : o[700]
           },
           "@media (hover: hover)": {
             "&:hover": {
-              backgroundColor: t.light
+              backgroundColor: r.light
             }
           },
           "&:active": {
-            transform: "scale(0.9)",
-            backgroundColor: t.dark
+            backgroundColor: r.dark
           },
           "&:disabled": {
             backgroundColor: o[200],
@@ -107,9 +114,9 @@ const h = v.button`
       }
       Object.assign(i, {
         backgroundColor: e.main,
-        color: r === "dark" ? o[900] : t.main,
+        color: a === "dark" ? o[900] : r.main,
         "& svg": {
-          color: r === "dark" ? o[900] : t.main
+          color: a === "dark" ? o[900] : r.main
         },
         "@media (hover: hover)": {
           "&:hover": {
@@ -117,7 +124,6 @@ const h = v.button`
           }
         },
         "&:active": {
-          transform: "scale(0.9)",
           backgroundColor: e.active
         },
         "&:disabled": {
@@ -128,11 +134,11 @@ const h = v.button`
       });
       break;
   }
-  switch (f) {
+  switch (s) {
     case "large":
       Object.assign(i, {
-        padding: `${s[300]} ${s[350]}`,
-        borderRadius: l[300],
+        padding: `${n[300]} ${n[350]}`,
+        borderRadius: b[300],
         fontSize: c.fontSize,
         lineHeight: c.lineHeight,
         "& svg": {
@@ -143,37 +149,37 @@ const h = v.button`
       break;
     case "small":
       Object.assign(i, {
-        padding: `${s[100]} ${s[150]}`,
-        borderRadius: l[200],
-        fontSize: n.fontSize,
-        lineHeight: n.lineHeight,
+        padding: `${n[100]} ${n[150]}`,
+        borderRadius: b[200],
+        fontSize: h.fontSize,
+        lineHeight: h.lineHeight,
         "& svg": {
-          width: n.fontSize,
-          height: n.fontSize
+          width: h.fontSize,
+          height: h.fontSize
         }
       });
       break;
     case "xSmall":
       Object.assign(i, {
-        padding: `${s[50]} ${s[100]}`,
-        borderRadius: l[150],
-        fontSize: d.fontSize,
-        lineHeight: d.lineHeight,
+        padding: `${n[50]} ${n[100]}`,
+        borderRadius: b[150],
+        fontSize: u.fontSize,
+        lineHeight: u.lineHeight,
         "& svg": {
-          width: d.fontSize,
-          height: d.fontSize
+          width: u.fontSize,
+          height: u.fontSize
         }
       });
       break;
     default:
       Object.assign(i, {
-        padding: `${s[200]} ${s[250]}`,
-        borderRadius: l[250],
-        fontSize: a.fontSize,
-        lineHeight: a.lineHeight,
+        padding: `${n[200]} ${n[250]}`,
+        borderRadius: b[250],
+        fontSize: g.fontSize,
+        lineHeight: g.lineHeight,
         "& svg": {
-          width: a.fontSize,
-          height: a.fontSize
+          width: g.fontSize,
+          height: g.fontSize
         }
       });
       break;
@@ -182,28 +188,112 @@ const h = v.button`
 }}
 `;
 function C({
-  ref: r,
-  children: e,
-  variant: t = "filled",
-  size: o = "medium",
-  color: c = "primary",
-  startIcon: a,
-  endIcon: n,
-  ...d
+  ref: t,
+  children: l,
+  variant: s = "filled",
+  size: d = "medium",
+  color: a = "primary",
+  startIcon: e,
+  endIcon: r,
+  ...o
 }) {
-  return t === "text" ? /* @__PURE__ */ g(h, { ref: r, variant: "text", size: o, color: "secondary", ...d, children: [
-    a,
-    e,
-    n
-  ] }) : t === "ghost" ? /* @__PURE__ */ g(h, { ref: r, variant: "ghost", size: o, color: "primary", ...d, children: [
-    a,
-    e,
-    n
-  ] }) : /* @__PURE__ */ g(h, { ref: r, variant: t, size: o, color: c, ...d, children: [
-    a,
-    e,
-    n
-  ] });
+  return s === "text" ? /* @__PURE__ */ k(
+    m,
+    {
+      ref: t,
+      variant: "text",
+      size: d,
+      color: "secondary",
+      layout: !0,
+      whileHover: {
+        scale: 1.02
+      },
+      whileTap: { scale: 0.98 },
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 25
+      },
+      ...o,
+      children: [
+        e,
+        l,
+        r
+      ]
+    }
+  ) : s === "ghost" ? /* @__PURE__ */ k(
+    m,
+    {
+      ref: t,
+      variant: "ghost",
+      size: d,
+      color: "primary",
+      layout: !0,
+      whileHover: {
+        scale: 1.02
+      },
+      whileTap: { scale: 0.98 },
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 25
+      },
+      ...o,
+      children: [
+        e,
+        l,
+        r
+      ]
+    }
+  ) : s === "gradient" ? /* @__PURE__ */ k(
+    m,
+    {
+      ref: t,
+      variant: "gradient",
+      size: d,
+      color: "primary",
+      layout: !0,
+      whileHover: {
+        scale: 1.02
+      },
+      whileTap: { scale: 0.98 },
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 25
+      },
+      ...o,
+      children: [
+        e,
+        l,
+        r
+      ]
+    }
+  ) : /* @__PURE__ */ k(
+    m,
+    {
+      ref: t,
+      variant: s,
+      size: d,
+      color: a,
+      layout: !0,
+      whileHover: {
+        scale: 1.02
+      },
+      whileTap: { scale: 0.98 },
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 25
+      },
+      ...o,
+      children: [
+        e,
+        l,
+        r
+      ]
+    }
+  );
 }
 export {
   C as default

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

@@ -1,5 +1,6 @@
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { UtilityProps } from '../../typings/utility';
+import { HTMLMotionProps } from 'motion/react';
 export interface BaseButtonProps extends Pick<UtilityProps, "css"> {
     size?: "xSmall" | "small" | "medium" | "large";
     startIcon?: ReactNode;
@@ -17,4 +18,8 @@ export interface TextButtonProps extends BaseButtonProps {
     variant?: "text";
     color?: "secondary";
 }
-export type ButtonProps = (FilledButtonProps | GhostButtonProps | TextButtonProps) & ComponentPropsWithRef<"button">;
+export interface GradientButtonProps extends BaseButtonProps {
+    variant?: "gradient";
+    color?: "primary";
+}
+export type ButtonProps = (FilledButtonProps | GhostButtonProps | TextButtonProps | GradientButtonProps) & PropsWithChildren<HTMLMotionProps<"button">>;

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 "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 './FPSTMonitor.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("react").JSX.Element;
+export default FPSMonitor;