@shiflo/ui 0.1.1 → 0.1.2

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -99,7 +99,7 @@ function z({
           transition: {
             type: "spring",
             duration: i,
-            damping: 10
+            bounce: 0.2
           },
           style: g,
           ...y,

package/dist/components/Button/Button.mjs

@@ -1,7 +1,7 @@
 import { jsxs as k } from "@emotion/react/jsx-runtime";
-import f from "@emotion/styled";
-import { motion as v } from "motion/react";
-const m = f(v.button)`
+import v from "@emotion/styled";
+import { motion as f } from "motion/react";
+const m = v(f.button)`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -9,11 +9,11 @@ const m = f(v.button)`
   font-weight: 500;
   transition: all 0.2s;
 
-  ${({ theme: t, variant: l, size: s, color: d }) => {
+  ${({ theme: t, variant: l, size: d, color: c }) => {
   const {
     mode: a,
     palette: { primary: e, secondary: r, neutral: o, gradient: p },
-    typography: { body1: c, body2: g, small1: h, small2: u },
+    typography: { body1: s, body2: g, small1: h, small2: u },
     spacing: n,
     radius: b
   } = t, i = {};
@@ -89,7 +89,7 @@ const m = f(v.button)`
       });
       break;
     default:
-      if (d === "secondary") {
+      if (c === "secondary") {
         Object.assign(i, {
           backgroundColor: r.main,
           color: a === "dark" ? o[900] : o[700],
@@ -134,16 +134,16 @@ const m = f(v.button)`
       });
       break;
   }
-  switch (s) {
+  switch (d) {
     case "large":
       Object.assign(i, {
         padding: `${n[300]} ${n[350]}`,
         borderRadius: b[300],
-        fontSize: c.fontSize,
-        lineHeight: c.lineHeight,
+        fontSize: s.fontSize,
+        lineHeight: s.lineHeight,
         "& svg": {
-          width: c.fontSize,
-          height: c.fontSize
+          width: s.fontSize,
+          height: s.fontSize
         }
       });
       break;
@@ -190,19 +190,19 @@ const m = f(v.button)`
 function C({
   ref: t,
   children: l,
-  variant: s = "filled",
-  size: d = "medium",
+  variant: d = "filled",
+  size: c = "medium",
   color: a = "primary",
   startIcon: e,
   endIcon: r,
   ...o
 }) {
-  return s === "text" ? /* @__PURE__ */ k(
+  return d === "text" ? /* @__PURE__ */ k(
     m,
     {
       ref: t,
       variant: "text",
-      size: d,
+      size: c,
       color: "secondary",
       layout: !0,
       whileHover: {
@@ -211,8 +211,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [
@@ -221,12 +221,12 @@ function C({
         r
       ]
     }
-  ) : s === "ghost" ? /* @__PURE__ */ k(
+  ) : d === "ghost" ? /* @__PURE__ */ k(
     m,
     {
       ref: t,
       variant: "ghost",
-      size: d,
+      size: c,
       color: "primary",
       layout: !0,
       whileHover: {
@@ -235,8 +235,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [
@@ -245,12 +245,12 @@ function C({
         r
       ]
     }
-  ) : s === "gradient" ? /* @__PURE__ */ k(
+  ) : d === "gradient" ? /* @__PURE__ */ k(
     m,
     {
       ref: t,
       variant: "gradient",
-      size: d,
+      size: c,
       color: "primary",
       layout: !0,
       whileHover: {
@@ -259,8 +259,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [
@@ -273,8 +273,8 @@ function C({
     m,
     {
       ref: t,
-      variant: s,
-      size: d,
+      variant: d,
+      size: c,
       color: a,
       layout: !0,
       whileHover: {
@@ -283,8 +283,8 @@ function C({
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        stiffness: 400,
-        damping: 25
+        duration: 0.2,
+        bounce: 0.2
       },
       ...o,
       children: [

package/dist/components/Dialog/Dialog.mjs

@@ -1,9 +1,9 @@
 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)`
+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)`
   width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
   max-width: ${({ maxWidth: e = "375px" }) => e};
   max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
@@ -17,60 +17,59 @@ const x = g(y.div)`
   }
 }) => e.background};
 `;
-function F({
+function O({
   open: e,
-  onClose: l,
-  children: n,
+  onClose: c,
+  children: l,
   transitionDuration: a = 0.2,
   onClick: o,
-  style: b,
-  maxWidth: c = "375px",
+  style: $,
+  maxWidth: n = "375px",
   ...s
 }) {
-  const [r, i] = d(!1), f = u(null), p = (t) => {
+  const [i, r] = p(!1), f = (t) => {
     t.stopPropagation(), typeof o == "function" && o(t);
   };
-  return h(() => {
+  return d(() => {
     let t;
     return e ? t = requestAnimationFrame(() => {
-      i(!0);
-    }) : i(!1), () => {
+      r(!0);
+    }) : r(!1), () => {
       t && cancelAnimationFrame(t);
     };
   }, [e]), /* @__PURE__ */ m(
-    $,
+    g,
     {
-      ref: f,
       open: e,
-      onClose: l,
+      onClose: c,
       transitionDuration: a,
       placement: "center-middle",
       children: /* @__PURE__ */ m(
-        x,
+        y,
         {
           transitionDuration: a,
-          maxWidth: c,
-          onClick: p,
+          maxWidth: n,
+          onClick: f,
           initial: {
             scale: 0.9,
             opacity: 0
           },
           animate: {
-            scale: r ? 1 : 0.9,
-            opacity: r ? 1 : 0
+            scale: i ? 1 : 0.9,
+            opacity: i ? 1 : 0
           },
           transition: {
             type: "spring",
             duration: a,
-            damping: 10
+            bounce: 0.2
           },
           ...s,
-          children: n
+          children: l
         }
       )
     }
   );
 }
 export {
-  F as default
+  O as default
 };

package/dist/components/Overlay/Overlay.mjs

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

package/dist/components/Snackbar/Snackbar.mjs

@@ -1,9 +1,9 @@
-import { jsxs as E, jsx as c } from "@emotion/react/jsx-runtime";
-import { useState as y, useRef as b, useImperativeHandle as z, useLayoutEffect as A, useEffect as g } from "react";
-import { createPortal as I } from "react-dom";
-import i from "@emotion/styled";
-import { motion as L } from "motion/react";
-const R = i(L.div)`
+import { jsxs as $, jsx as l } from "@emotion/react/jsx-runtime";
+import { useState as h, useRef as v, useEffect as x } from "react";
+import { createPortal as S } from "react-dom";
+import n from "@emotion/styled";
+import { motion as k } from "motion/react";
+const A = n(k.div)`
   position: fixed;
   left: 50%;
   bottom: ${({ theme: { spacing: e } }) => `calc(${e[800]} + var(--safe-area-inset-bottom, 0px))`};
@@ -21,9 +21,9 @@ const R = i(L.div)`
 }) => e[900]};
   border-radius: ${({ theme: { radius: e } }) => e[400]};
   z-index: 1;
-`, T = i.div`
+`, z = n.div`
   white-space: nowrap;
-`, j = i.div`
+`, j = n.div`
   flex-grow: 1;
   display: -webkit-box;
   overflow: hidden;
@@ -40,52 +40,49 @@ const R = i(L.div)`
   lineHeight: t.lineHeight,
   color: e.surface
 })}
-`, F = i.div`
+`, C = n.div`
   white-space: nowrap;
 `;
-function B({
+function E({
   children: e,
   open: t,
-  onClose: l,
-  transitionDuration: a = 0.2,
-  style: O,
-  ref: v,
+  onClose: c,
+  transitionDuration: r = 0.2,
+  style: F,
+  ref: I,
   startIcon: m,
-  action: f,
-  maxWidth: w = "375px",
-  autoHideDuration: d = 3e3,
+  action: s,
+  maxWidth: b = "375px",
+  autoHideDuration: f = 3e3,
   disableAutoHide: p,
-  ...$
+  ...w
 }) {
-  const [k, u] = y(!0), [r, h] = y(!1), o = b(null), s = b(null);
-  return z(v, () => o.current), A(() => {
-    let n;
-    return t ? (u(!1), n = requestAnimationFrame(() => {
-      h(!0);
-    })) : h(!1), () => {
-      n && cancelAnimationFrame(n);
+  const [g, d] = h(!0), [i, u] = h(!1), o = v(null);
+  x(() => {
+    let a;
+    return t ? (d(!1), a = requestAnimationFrame(() => {
+      u(!0);
+    })) : u(!1), () => {
+      a && cancelAnimationFrame(a);
     };
-  }, [t, a]), g(() => {
-    const n = o.current, x = (S) => {
-      t || S.propertyName === "opacity" && u(!0);
-    };
-    return n?.addEventListener("transitionend", x), () => {
-      n?.removeEventListener("transitionend", x);
-    };
-  }, [t]), g(() => {
-    if (!(p || !r))
-      return s.current = setTimeout(() => {
-        l?.();
-      }, d), () => {
-        s.current && clearTimeout(s.current);
+  }, [t, r]);
+  const y = () => {
+    t || d(!0);
+  };
+  return x(() => {
+    if (!(p || !i))
+      return o.current = setTimeout(() => {
+        c?.();
+      }, f), () => {
+        o.current && clearTimeout(o.current);
       };
-  }, [p, d, r, l]), k ? null : I(
-    /* @__PURE__ */ E(
-      R,
+  }, [p, f, i, c]), g ? null : S(
+    /* @__PURE__ */ $(
+      A,
       {
-        ref: o,
-        transitionDuration: a,
-        maxWidth: w,
+        transitionDuration: r,
+        maxWidth: b,
+        onAnimationComplete: y,
         initial: {
           x: "-50%",
           scale: 0.97,
@@ -93,19 +90,19 @@ function B({
         },
         animate: {
           x: "-50%",
-          scale: r ? 1 : 0.97,
-          opacity: r ? 1 : 0
+          scale: i ? 1 : 0.97,
+          opacity: i ? 1 : 0
         },
         transition: {
           type: "spring",
-          duration: a,
-          damping: 10
+          duration: r,
+          bounce: 0.2
         },
-        ...$,
+        ...w,
         children: [
-          m && /* @__PURE__ */ c(T, { children: m }),
-          /* @__PURE__ */ c(j, { children: e }),
-          f && /* @__PURE__ */ c(F, { children: f })
+          m && /* @__PURE__ */ l(z, { children: m }),
+          /* @__PURE__ */ l(j, { children: e }),
+          s && /* @__PURE__ */ l(C, { children: s })
         ]
       }
     ),
@@ -113,5 +110,5 @@ function B({
   );
 }
 export {
-  B as default
+  E as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "dist"