@shiflo/ui 0.1.3 → 0.1.5

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -1,3 +1,3 @@
-import { BottomSheetProps } from './BottomSheet.typing';
+import { BottomSheetProps } from '.';
 declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, style, dragThreshold, ...props }: BottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default BottomSheet;

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,9 +1,9 @@
 import { jsx as o, jsxs as H } from "@emotion/react/jsx-runtime";
 import { useState as R, useRef as a, useImperativeHandle as S, useEffect as j } from "react";
+import D from "../Overlay/Overlay.mjs";
 import n from "@emotion/styled";
-import { motion as D } from "motion/react";
-import I from "../Overlay/Overlay.mjs";
-const O = n(D.div)`
+import { motion as I } from "motion/react";
+const O = n(I.div)`
   width: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   max-width: ${({ maxWidth: t = "375px" }) => t};
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
@@ -30,7 +30,7 @@ const O = n(D.div)`
     palette: { common: t }
   }
 }) => t.background};
-  transition: background-color 0.2s;
+  transition: background-color 0.3s;
 `, F = n.div`
   width: 24px;
   height: 4px;
@@ -40,13 +40,13 @@ const O = n(D.div)`
     palette: { border: t }
   }
 }) => t.main};
-  transition: background-color 0.2s;
+  transition: background-color 0.3s;
 `;
 function z({
   open: t,
   onClose: r,
   children: m,
-  transitionDuration: i = 0.2,
+  transitionDuration: i = 0.3,
   maxWidth: d = "375px",
   onClick: c,
   ref: f,
@@ -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);
@@ -72,9 +72,9 @@ function z({
       e && cancelAnimationFrame(e);
     };
   }, [t]), /* @__PURE__ */ o(
-    I,
+    D,
     {
-      ref: x,
+      ref: $,
       open: t,
       onClose: r,
       transitionDuration: i,
@@ -86,7 +86,7 @@ function z({
           ref: l,
           drag: "y",
           dragConstraints: { top: 0, bottom: 0 },
-          dragElastic: { top: 0, bottom: 0.2 },
+          dragElastic: { top: 0, bottom: 0.3 },
           dragMomentum: !1,
           onDragEnd: k,
           maxWidth: d,
@@ -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/Box/Box.mjs

@@ -1,21 +1,21 @@
-import { jsx as c } from "@emotion/react/jsx-runtime";
-import m from "@emotion/styled";
-import a from "../../utils/getUtilityProps.mjs";
-import s from "../../utils/getValueByPath.mjs";
-const f = m.div`
+import { jsx as m } from "@emotion/react/jsx-runtime";
+import a from "@emotion/styled";
+import f from "../../utils/getUtilityProps.mjs";
+import r from "../../utils/getValueByPath.mjs";
+const c = a.div`
   transition: all 0.2s;
 
-  ${({ theme: { palette: t }, backgroundColor: r, borderColor: e, color: o, ...n }) => {
+  ${({ theme: { palette: t }, backgroundColor: s, borderColor: o, color: e, ...n }) => {
   const i = {};
-  return Object.assign(i, a(n)), r && Object.assign(i, {
-    backgroundColor: s(t, r) || "inherit"
-  }), e && Object.assign(i, {
-    borderColor: s(t, e) || "inherit"
+  return Object.assign(i, f(n)), s && Object.assign(i, {
+    backgroundColor: r(t, s) || "inherit"
   }), o && Object.assign(i, {
-    color: s(t, o) || "inherit"
+    borderColor: r(t, o) || "inherit"
+  }), e && Object.assign(i, {
+    color: r(t, e) || "inherit"
   }), i;
 }}
-`, y = (t) => /* @__PURE__ */ c(f, { ...t, css: t.css });
+`, y = (t) => /* @__PURE__ */ m(c, { ...t });
 export {
   y as default
 };

package/dist/components/Button/Button.mjs

@@ -7,15 +7,15 @@ const m = v(f.button)`
   justify-content: center;
   gap: ${({ theme: { spacing: t } }) => t[100]};
   font-weight: 500;
-  transition: all 0.2s;
+  transition: all 0.3s;
 
   ${({ 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: u },
+    typography: { body1: s, body2: g, small1: h, small2: b },
     spacing: n,
-    radius: b
+    radius: u
   } = t, i = {};
   switch (l) {
     case "ghost":
@@ -138,7 +138,7 @@ const m = v(f.button)`
     case "large":
       Object.assign(i, {
         padding: `${n[300]} ${n[350]}`,
-        borderRadius: b[300],
+        borderRadius: u[300],
         fontSize: s.fontSize,
         lineHeight: s.lineHeight,
         "& svg": {
@@ -150,7 +150,7 @@ const m = v(f.button)`
     case "small":
       Object.assign(i, {
         padding: `${n[100]} ${n[150]}`,
-        borderRadius: b[200],
+        borderRadius: u[200],
         fontSize: h.fontSize,
         lineHeight: h.lineHeight,
         "& svg": {
@@ -162,19 +162,19 @@ const m = v(f.button)`
     case "xSmall":
       Object.assign(i, {
         padding: `${n[50]} ${n[100]}`,
-        borderRadius: b[150],
-        fontSize: u.fontSize,
-        lineHeight: u.lineHeight,
+        borderRadius: u[150],
+        fontSize: b.fontSize,
+        lineHeight: b.lineHeight,
         "& svg": {
-          width: u.fontSize,
-          height: u.fontSize
+          width: b.fontSize,
+          height: b.fontSize
         }
       });
       break;
     default:
       Object.assign(i, {
         padding: `${n[200]} ${n[250]}`,
-        borderRadius: b[250],
+        borderRadius: u[250],
         fontSize: g.fontSize,
         lineHeight: g.lineHeight,
         "& svg": {
@@ -204,14 +204,13 @@ function C({
       variant: "text",
       size: c,
       color: "secondary",
-      layout: !0,
       whileHover: {
         scale: 1.02
       },
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        duration: 0.2,
+        duration: 0.3,
         bounce: 0.2
       },
       ...o,
@@ -228,14 +227,13 @@ function C({
       variant: "ghost",
       size: c,
       color: "primary",
-      layout: !0,
       whileHover: {
         scale: 1.02
       },
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        duration: 0.2,
+        duration: 0.3,
         bounce: 0.2
       },
       ...o,
@@ -252,14 +250,13 @@ function C({
       variant: "gradient",
       size: c,
       color: "primary",
-      layout: !0,
       whileHover: {
         scale: 1.02
       },
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        duration: 0.2,
+        duration: 0.3,
         bounce: 0.2
       },
       ...o,
@@ -276,14 +273,13 @@ function C({
       variant: d,
       size: c,
       color: a,
-      layout: !0,
       whileHover: {
         scale: 1.02
       },
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        duration: 0.2,
+        duration: 0.3,
         bounce: 0.2
       },
       ...o,

package/dist/components/Dialog/Dialog.mjs

@@ -21,7 +21,7 @@ function O({
   open: e,
   onClose: c,
   children: l,
-  transitionDuration: a = 0.2,
+  transitionDuration: a = 0.3,
   onClick: o,
   style: $,
   maxWidth: n = "375px",

package/dist/components/Icon/Icon.mjs

@@ -5,9 +5,9 @@ import c from "@emotion/styled";
 import d from "../../utils/getValueByPath.mjs";
 const f = c.svg`
   transition:
-    width 0.2s,
-    height 0.2s,
-    color 0.2s;
+    width 0.3s,
+    height 0.3s,
+    color 0.3s;
 
   width: ${({ width: t }) => `${t || 24}px`};
   height: ${({ height: t }) => `${t || 24}px`};

package/dist/components/Overlay/Overlay.mjs

@@ -1,21 +1,21 @@
-import { jsxs as k, jsx as m } from "@emotion/react/jsx-runtime";
-import { useState as f, 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 { motion as n } from "motion/react";
-const C = r(n.div)`
+import n from "@emotion/styled";
+import { motion as a } from "motion/react";
+const C = n(a.div)`
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
-`, A = r(n.div)`
+`, A = n(a.div)`
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-`, w = r(n.div)`
+`, w = n(a.div)`
   position: fixed;
   width: 100%;
   display: flex;
@@ -91,49 +91,53 @@ const C = r(n.div)`
 function P({
   children: o,
   open: t,
-  onClose: p,
-  transitionDuration: a = 0.2,
-  placement: b,
+  onClose: d,
+  transitionDuration: s = 0.3,
+  placement: p,
   ref: I,
-  onClick: d,
-  hideOverlay: s,
-  ...g
+  onClick: g,
+  hideOverlay: r,
+  ...i
 }) {
   const {
-    palette: { common: i }
-  } = x(), [u, c] = f(!0), [h, l] = f(!1), y = (e) => {
-    p?.(), d?.(e);
-  }, O = () => {
-    t || c(!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 e;
-    return t ? (c(!1), e = requestAnimationFrame(() => {
-      l(!0);
-    })) : l(!1), () => {
+    return t ? (l(!1), e = requestAnimationFrame(() => {
+      m(!0);
+    })) : m(!1), () => {
       e && cancelAnimationFrame(e);
     };
-  }, [t, a]), u ? null : v(
-    /* @__PURE__ */ k(C, { children: [
-      /* @__PURE__ */ m(
+  }, [t, s]), u ? null : v(
+    /* @__PURE__ */ O(C, { children: [
+      /* @__PURE__ */ f(
         A,
         {
-          initial: { opacity: 0, backgroundColor: s ? "rgba(0, 0, 0, 0)" : i.overlay },
+          initial: { opacity: 0, backgroundColor: r ? "rgba(0, 0, 0, 0)" : c.overlay },
           animate: {
-            opacity: h ? 1 : 0,
-            backgroundColor: s ? "rgba(0, 0, 0, 0)" : i.overlay
+            opacity: y ? 1 : 0,
+            backgroundColor: r ? "rgba(0, 0, 0, 0)" : c.overlay
           },
           transition: {
             type: "spring",
-            duration: a,
+            duration: s,
             bounce: 0.2
           },
-          onAnimationComplete: O,
-          onClick: y,
-          ...g
+          onAnimationComplete: k,
+          onClick: h,
+          ...i,
+          style: {
+            pointerEvents: r ? "none" : void 0,
+            ...i.style
+          }
         }
       ),
-      /* @__PURE__ */ m(w, { placement: b, children: o })
+      /* @__PURE__ */ f(w, { placement: p, children: o })
     ] }),
     document.body
   );

package/dist/components/Snackbar/Snackbar.mjs

@@ -47,7 +47,7 @@ function E({
   children: e,
   open: t,
   onClose: c,
-  transitionDuration: r = 0.2,
+  transitionDuration: r = 0.3,
   style: F,
   ref: I,
   startIcon: m,

package/dist/components/Switch/Switch.mjs

@@ -7,7 +7,7 @@ const d = s(l.button)`
   align-items: center;
   padding: 0 ${({ theme: { spacing: t } }) => t[100]};
   border-radius: 9999px;
-  transition: background-color 0.2s;
+  transition: background-color 0.3s;
   cursor: pointer;
 
   ${({ theme: { palette: t }, checked: i, disabled: r, size: a }) => {
@@ -101,7 +101,6 @@ function x({
       onClick: (o) => {
         !i && typeof a == "function" && a(o, !t), typeof e == "function" && e(o);
       },
-      layout: !0,
       style: {
         justifyContent: t ? "flex-end" : "flex-start"
       },

package/dist/components/Tag/Tag.mjs

@@ -2,7 +2,7 @@ import { jsx as l } from "@emotion/react/jsx-runtime";
 import g from "@emotion/styled";
 import { motion as b } from "motion/react";
 const k = g(b.span)`
-  transition: all 0.2s;
+  transition: all 0.3s;
   cursor: default;
 
   padding: ${({ theme: { spacing: r } }) => r[100]};

package/dist/components/TextField/TextField.mjs

@@ -8,7 +8,7 @@ const b = l(c.div)`
   gap: ${({ theme: { spacing: e } }) => e[200]};
   border: 1px solid transparent;
   border-radius: ${({ theme: { radius: e } }) => e[200]};
-  transition: all 0.2s;
+  transition: all 0.3s;
   background-color: ${({
   theme: {
     palette: { common: e }
@@ -147,7 +147,7 @@ const b = l(c.div)`
   justify-content: center;
   white-space: nowrap;
 `;
-function y({
+function H({
   variant: e = "outlined",
   size: n = "medium",
   fullWidth: o,
@@ -167,7 +167,6 @@ function y({
       focused: g,
       fullWidth: o,
       disabled: t,
-      layout: !0,
       children: [
         r && /* @__PURE__ */ a(S, { children: r }),
         /* @__PURE__ */ a(w, { ...f, onFocus: (s) => {
@@ -181,5 +180,5 @@ function y({
   );
 }
 export {
-  y as default
+  H as default
 };

package/dist/components/Typography/Typography.mjs

@@ -1,18 +1,18 @@
-import { jsx as c } from "@emotion/react/jsx-runtime";
-import f from "@emotion/styled";
-import { motion as y } from "motion/react";
+import { jsx as f } from "@emotion/react/jsx-runtime";
+import y from "@emotion/styled";
+import { motion as c } from "motion/react";
 import d from "../../utils/getUtilityProps.mjs";
 import r from "../../utils/getValueByPath.mjs";
-const h = f(y.div)`
-  transition: all 0.2s;
+const h = y(c.div)`
+  transition: all 0.3s;
 
-  ${({ theme: { typography: t, palette: i }, variant: s, color: n, fontWeight: l, borderColor: e, ...a }) => {
+  ${({ theme: { typography: t, palette: i }, variant: s, color: n, fontWeight: a, borderColor: e, ...l }) => {
   const { fontSize: p, lineHeight: m } = t[s || "body2"], o = {
     fontSize: p,
     lineHeight: m,
-    fontWeight: l
+    fontWeight: a
   };
-  return Object.assign(o, d(a)), e && Object.assign(o, {
+  return Object.assign(o, d(l)), e && Object.assign(o, {
     borderColor: r(i, e) || "inherit"
   }), Object.assign(o, {
     color: r(i, n) || "inherit"
@@ -32,10 +32,10 @@ const h = f(y.div)`
   ${({ lineClamp: t }) => t ? {
   display: "-webkit-box",
   overflow: "hidden",
-  "-webkit-line-clamp": t,
-  "-webkit-box-orient": "vertical"
+  WebkitLineClamp: t,
+  WebkitBoxOrient: "vertical"
 } : {}};
-`, u = (t) => /* @__PURE__ */ c(h, { ...t });
+`, j = (t) => /* @__PURE__ */ f(h, { ...t });
 export {
-  u as default
+  j as default
 };

package/dist/theme/GlobalStyle.mjs

@@ -33,7 +33,7 @@ function l() {
           height: "100%",
           color: e.primary,
           backgroundColor: o.background,
-          transition: "background-color 0.2s, color 0.2s",
+          transition: "background-color 0.3s, color 0.3s",
           fontFamily: `Spoqa Han Sans Neo, -apple-system, BlinkMacSystemFont, Helvetica Neue,
             Apple SD Gothic Neo, Malgun Gothic, 맑은 고딕, 나눔고딕, Nanum Gothic,
             Noto Sans KR, Noto Sans CJK KR, arial, 돋움, Dotum, Tahoma, Geneva, sans-serif`

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.3",
+  "version": "0.1.5",
   "type": "module",
   "files": [
     "dist"