@shiflo/ui 0.1.6 → 0.2.0

package/dist/components/Button/Button.mjs

@@ -1,108 +1,117 @@
-import { jsxs as k } from "@emotion/react/jsx-runtime";
-import v from "@emotion/styled";
-import { motion as f } from "motion/react";
-const m = v(f.button)`
+import { jsxs as s } from "@emotion/react/jsx-runtime";
+import S from "@emotion/styled";
+const b = S.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: ${({ theme: { spacing: t } }) => t[100]};
+  gap: ${({ theme: { spacing: e } }) => e[100]};
   font-weight: 500;
-  transition: all 0.3s;
+  transition: all 0.2s;
+  border: 1px solid transparent;
 
-  ${({ theme: t, variant: l, size: d, color: c }) => {
-  const {
-    mode: a,
-    palette: { primary: e, secondary: r, neutral: o, gradient: p },
-    typography: { body1: s, body2: g, small1: h, small2: b },
-    spacing: n,
-    radius: u
-  } = t, i = {};
-  switch (l) {
+  ${({
+  theme: {
+    mode: e,
+    palette: { primary: r, secondary: t, neutral: o, gradient: g },
+    typography: { body1: a, body2: n, small1: c, small2: l },
+    spacing: d,
+    radius: h
+  },
+  variant: k,
+  size: f,
+  color: v
+}) => {
+  const i = {};
+  switch (k) {
     case "ghost":
       Object.assign(i, {
-        backgroundColor: e.alpha[10],
-        color: e.main,
+        backgroundColor: r.alpha[10],
+        color: r.main,
         "& svg": {
-          color: e.main
+          color: r.main
         },
         "@media (hover: hover)": {
           "&:hover": {
-            backgroundColor: e.alpha[20]
+            backgroundColor: r.alpha[20]
           }
         },
         "&:active": {
-          backgroundColor: e.alpha[30]
+          transform: "scale(0.9)",
+          backgroundColor: r.alpha[30]
         },
         "&:disabled": {
-          backgroundColor: a === "dark" ? e.alpha[10] : e.alpha[5],
+          backgroundColor: e === "dark" ? r.alpha[10] : r.alpha[5],
           color: o[500],
           cursor: "not-allowed"
         }
       });
       break;
-    case "text":
+    case "gradient":
       Object.assign(i, {
-        backgroundColor: "transparent",
-        color: a === "dark" ? o[800] : o[700],
-        // 기본 텍스트 색상 (더 강조된 중립색)
+        background: g.primaryToAccent,
+        color: e === "dark" ? o[900] : t.main,
         "& svg": {
-          color: a === "dark" ? o[800] : o[700]
+          color: e === "dark" ? o[900] : t.main
         },
         "@media (hover: hover)": {
           "&:hover": {
-            backgroundColor: o[200]
+            background: g.primaryToAccent
           }
         },
         "&:active": {
-          backgroundColor: o[300]
+          transform: "scale(0.9)",
+          background: g.primaryToAccent,
+          boxShadow: `inset 0 0 0 100px ${r.dark}`
         },
         "&:disabled": {
+          background: o[200],
           color: o[500],
-          backgroundColor: "transparent",
           cursor: "not-allowed",
-          textDecoration: "none"
+          boxShadow: "none"
         }
       });
       break;
-    case "gradient":
+    case "text":
       Object.assign(i, {
-        background: p.primaryToAccent,
-        color: a === "dark" ? o[900] : r.main,
+        backgroundColor: "transparent",
+        color: e === "dark" ? o[800] : o[700],
+        // 기본 텍스트 색상 (더 강조된 중립색)
         "& svg": {
-          color: a === "dark" ? o[900] : r.main
+          color: e === "dark" ? o[800] : o[700]
         },
         "@media (hover: hover)": {
           "&:hover": {
-            background: p.primaryToAccent
+            backgroundColor: o[200]
           }
         },
         "&:active": {
-          background: p.primaryToAccent,
-          boxShadow: `inset 0 0 0 100px ${e.dark}`
+          transform: "scale(0.9)",
+          backgroundColor: o[300]
         },
         "&:disabled": {
-          background: o[200],
           color: o[500],
+          backgroundColor: "transparent",
           cursor: "not-allowed",
-          boxShadow: "none"
+          textDecoration: "none"
         }
       });
       break;
     default:
-      if (c === "secondary") {
+      if (v === "secondary") {
         Object.assign(i, {
-          backgroundColor: r.main,
-          color: a === "dark" ? o[900] : o[700],
+          backgroundColor: t.main,
+          color: e === "dark" ? o[900] : o[700],
           "& svg": {
-            color: a === "dark" ? o[900] : o[700]
+            color: e === "dark" ? o[900] : o[700]
           },
           "@media (hover: hover)": {
             "&:hover": {
-              backgroundColor: r.light
+              backgroundColor: t.light
             }
           },
           "&:active": {
-            backgroundColor: r.dark
+            transform: "scale(0.9)",
+            backgroundColor: t.dark
           },
           "&:disabled": {
             backgroundColor: o[200],
@@ -113,18 +122,19 @@ const m = v(f.button)`
         break;
       }
       Object.assign(i, {
-        backgroundColor: e.main,
-        color: a === "dark" ? o[900] : r.main,
+        backgroundColor: r.main,
+        color: e === "dark" ? o[900] : t.main,
         "& svg": {
-          color: a === "dark" ? o[900] : r.main
+          color: e === "dark" ? o[900] : t.main
         },
         "@media (hover: hover)": {
           "&:hover": {
-            backgroundColor: e.hover
+            backgroundColor: r.hover
           }
         },
         "&:active": {
-          backgroundColor: e.active
+          transform: "scale(0.9)",
+          backgroundColor: r.active
         },
         "&:disabled": {
           backgroundColor: o[200],
@@ -134,52 +144,52 @@ const m = v(f.button)`
       });
       break;
   }
-  switch (d) {
+  switch (f) {
     case "large":
       Object.assign(i, {
-        padding: `${n[300]} ${n[350]}`,
-        borderRadius: u[300],
-        fontSize: s.fontSize,
-        lineHeight: s.lineHeight,
+        padding: `${d[300]} ${d[350]}`,
+        borderRadius: h[300],
+        fontSize: a.fontSize,
+        lineHeight: a.lineHeight,
         "& svg": {
-          width: s.fontSize,
-          height: s.fontSize
+          width: a.fontSize,
+          height: a.fontSize
         }
       });
       break;
     case "small":
       Object.assign(i, {
-        padding: `${n[100]} ${n[150]}`,
-        borderRadius: u[200],
-        fontSize: h.fontSize,
-        lineHeight: h.lineHeight,
+        padding: `${d[100]} ${d[150]}`,
+        borderRadius: h[200],
+        fontSize: c.fontSize,
+        lineHeight: c.lineHeight,
         "& svg": {
-          width: h.fontSize,
-          height: h.fontSize
+          width: c.fontSize,
+          height: c.fontSize
         }
       });
       break;
     case "xSmall":
       Object.assign(i, {
-        padding: `${n[50]} ${n[100]}`,
-        borderRadius: u[150],
-        fontSize: b.fontSize,
-        lineHeight: b.lineHeight,
+        padding: `${d[50]} ${d[100]}`,
+        borderRadius: h[150],
+        fontSize: l.fontSize,
+        lineHeight: l.lineHeight,
         "& svg": {
-          width: b.fontSize,
-          height: b.fontSize
+          width: l.fontSize,
+          height: l.fontSize
         }
       });
       break;
     default:
       Object.assign(i, {
-        padding: `${n[200]} ${n[250]}`,
-        borderRadius: u[250],
-        fontSize: g.fontSize,
-        lineHeight: g.lineHeight,
+        padding: `${d[200]} ${d[250]}`,
+        borderRadius: h[250],
+        fontSize: n.fontSize,
+        lineHeight: n.lineHeight,
         "& svg": {
-          width: g.fontSize,
-          height: g.fontSize
+          width: n.fontSize,
+          height: n.fontSize
         }
       });
       break;
@@ -187,110 +197,34 @@ const m = v(f.button)`
   return i;
 }}
 `;
-function C({
-  ref: t,
-  children: l,
-  variant: d = "filled",
-  size: c = "medium",
-  color: a = "primary",
-  startIcon: e,
-  endIcon: r,
-  ...o
+function w({
+  ref: e,
+  children: r,
+  variant: t = "filled",
+  size: o = "medium",
+  color: g = "primary",
+  startIcon: a,
+  endIcon: n,
+  ...c
 }) {
-  return d === "text" ? /* @__PURE__ */ k(
-    m,
-    {
-      ref: t,
-      variant: "text",
-      size: c,
-      color: "secondary",
-      whileHover: {
-        scale: 1.02
-      },
-      whileTap: { scale: 0.98 },
-      transition: {
-        type: "spring",
-        duration: 0.3,
-        bounce: 0.2
-      },
-      ...o,
-      children: [
-        e,
-        l,
-        r
-      ]
-    }
-  ) : d === "ghost" ? /* @__PURE__ */ k(
-    m,
-    {
-      ref: t,
-      variant: "ghost",
-      size: c,
-      color: "primary",
-      whileHover: {
-        scale: 1.02
-      },
-      whileTap: { scale: 0.98 },
-      transition: {
-        type: "spring",
-        duration: 0.3,
-        bounce: 0.2
-      },
-      ...o,
-      children: [
-        e,
-        l,
-        r
-      ]
-    }
-  ) : d === "gradient" ? /* @__PURE__ */ k(
-    m,
-    {
-      ref: t,
-      variant: "gradient",
-      size: c,
-      color: "primary",
-      whileHover: {
-        scale: 1.02
-      },
-      whileTap: { scale: 0.98 },
-      transition: {
-        type: "spring",
-        duration: 0.3,
-        bounce: 0.2
-      },
-      ...o,
-      children: [
-        e,
-        l,
-        r
-      ]
-    }
-  ) : /* @__PURE__ */ k(
-    m,
-    {
-      ref: t,
-      variant: d,
-      size: c,
-      color: a,
-      whileHover: {
-        scale: 1.02
-      },
-      whileTap: { scale: 0.98 },
-      transition: {
-        type: "spring",
-        duration: 0.3,
-        bounce: 0.2
-      },
-      ...o,
-      children: [
-        e,
-        l,
-        r
-      ]
-    }
-  );
+  return t === "text" ? /* @__PURE__ */ s(b, { ref: e, variant: "text", size: o, color: "secondary", ...c, children: [
+    a,
+    r,
+    n
+  ] }) : t === "ghost" ? /* @__PURE__ */ s(b, { ref: e, variant: "ghost", size: o, color: "primary", ...c, children: [
+    a,
+    r,
+    n
+  ] }) : t === "gradient" ? /* @__PURE__ */ s(b, { ref: e, variant: "gradient", size: o, color: "primary", ...c, children: [
+    a,
+    r,
+    n
+  ] }) : /* @__PURE__ */ s(b, { ref: e, variant: t, size: o, color: g, ...c, children: [
+    a,
+    r,
+    n
+  ] });
 }
 export {
-  C as default
+  w as default
 };

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

@@ -1,6 +1,5 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { ComponentPropsWithRef, 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;
@@ -22,4 +21,4 @@ export interface GradientButtonProps extends BaseButtonProps {
     variant?: "gradient";
     color?: "primary";
 }
-export type ButtonProps = (FilledButtonProps | GhostButtonProps | TextButtonProps | GradientButtonProps) & PropsWithChildren<HTMLMotionProps<"button">>;
+export type ButtonProps = (FilledButtonProps | GhostButtonProps | TextButtonProps | GradientButtonProps) & ComponentPropsWithRef<"button">;

package/dist/components/Dialog/Dialog.mjs

@@ -1,70 +1,69 @@
-import { jsx as m } from "@emotion/react/jsx-runtime";
-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)`
+import { jsx as s } from "@emotion/react/jsx-runtime";
+import { useState as $, useRef as p, useEffect as h } from "react";
+import g from "@emotion/styled";
+import y from "../Overlay/Overlay.mjs";
+const x = g.div`
   width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
   max-width: ${({ maxWidth: e = "375px" }) => e};
   max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
   overflow-y: auto;
   margin: ${({ theme: { spacing: e } }) => e[400]};
   margin-bottom: ${({ theme: { spacing: e } }) => `calc(${e[400]} + var(--safe-area-inset-bottom, 0px))`};
-  border-radius: ${({ theme: { radius: e } }) => e[150]};
+  border-radius: ${({ theme: { radius: e } }) => e[350]};
   background-color: ${({
   theme: {
     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({
   open: e,
-  onClose: c,
-  children: l,
-  transitionDuration: a = 0.3,
+  onClose: n,
+  children: m,
+  transitionDuration: a = 200,
   onClick: o,
-  style: $,
-  maxWidth: n = "375px",
-  ...s
+  style: l,
+  maxWidth: c = "375px",
+  ...f
 }) {
-  const [i, r] = p(!1), f = (t) => {
+  const [r, i] = $(!1), u = p(null), d = (t) => {
     t.stopPropagation(), typeof o == "function" && o(t);
   };
-  return d(() => {
+  return h(() => {
     let t;
     return e ? t = requestAnimationFrame(() => {
-      r(!0);
-    }) : r(!1), () => {
+      i(!0);
+    }) : i(!1), () => {
       t && cancelAnimationFrame(t);
     };
-  }, [e]), /* @__PURE__ */ m(
-    g,
+  }, [e]), /* @__PURE__ */ s(
+    y,
     {
+      ref: u,
       open: e,
-      onClose: c,
+      onClose: n,
       transitionDuration: a,
       placement: "center-middle",
-      children: /* @__PURE__ */ m(
-        y,
+      children: /* @__PURE__ */ s(
+        x,
         {
+          ease: e ? "in" : "out",
           transitionDuration: a,
-          maxWidth: n,
-          onClick: f,
-          initial: {
-            scale: 0.9,
-            opacity: 0
+          maxWidth: c,
+          onClick: d,
+          ...f,
+          style: {
+            transform: `scale(${r ? 1 : 0.9})`,
+            opacity: r ? 1 : 0,
+            ...l
           },
-          animate: {
-            scale: i ? 1 : 0.9,
-            opacity: i ? 1 : 0
-          },
-          transition: {
-            type: "spring",
-            duration: a,
-            bounce: 0.2
-          },
-          ...s,
-          children: l
+          children: m
         }
       )
     }

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

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

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("@emotion/react/jsx-runtime").JSX.Element[] | null | undefined;
+declare function Icon({ name, ...props }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Icon;

package/dist/components/Icon/Icon.mjs

@@ -1,30 +1,18 @@
-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 "@emotion/styled";
-import d from "../../utils/getValueByPath.mjs";
-const f = c.svg`
-  transition:
-    width 0.3s,
-    height 0.3s,
-    color 0.3s;
+import { jsx as e } from "@emotion/react/jsx-runtime";
+import { S as i } from "../../assets/icons/index.ts-Cv-GsCPN.js";
+import s from "@emotion/styled";
+import c from "../../utils/getValueByPath.mjs";
+const l = (o) => s(o)`
+  transition: all 0.2s;
 
   width: ${({ width: t }) => `${t || 24}px`};
   height: ${({ height: t }) => `${t || 24}px`};
-  color: ${({ theme: { palette: t }, color: r }) => d(t, r || "") || "inherit"};
+  color: ${({ theme: { palette: t }, color: r }) => c(t, r || "") || "inherit"};
 `;
-function S({ ref: t, name: r, width: e = 24, height: n = 24, ...s }) {
-  const h = a[r];
-  return p.map(h(), (i) => {
-    if (!l(i))
-      return null;
-    const o = {
-      ...s,
-      ...i.props
-    };
-    return o.width = e ?? o.width, o.height = n ?? o.height, /* @__PURE__ */ m(f, { ref: t, ...o });
-  });
+function h({ name: o, ...t }) {
+  const r = i[o], n = l(r);
+  return /* @__PURE__ */ e(n, { name: o, ...t });
 }
 export {
-  S as default
+  h as default
 };

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

@@ -1,8 +1,8 @@
 import { ComponentPropsWithRef } from 'react';
 import { ShifloTheme } from '../../theme/typing';
-import { RecursionPath } from '../../typings/utility';
+import { RecursionPath, UtilityProps } from '../../typings/utility';
 import type * as Svgs from "../../assets/icons";
-export interface BaseIconProps {
+export interface BaseIconProps extends Pick<UtilityProps, "css"> {
     name: keyof typeof Svgs;
     color?: RecursionPath<ShifloTheme["palette"]> | "inherit";
     width?: 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, ref, onClick, hideOverlay, ...props }: OverlayProps): import('react').ReactPortal | null;
+declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, onClick, ...props }: OverlayProps): import('react').ReactPortal | null;
 export default Overlay;