@shiflo/ui 0.1.6 → 0.2.0

package/dist/components/Overlay/Overlay.mjs

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

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

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

package/dist/components/Snackbar/Snackbar.mjs

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

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

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

package/dist/components/Switch/Switch.mjs

@@ -1,18 +1,14 @@
 import { jsx as n } from "@emotion/react/jsx-runtime";
-import s from "@emotion/styled";
-import { motion as l } from "motion/react";
-const d = s(l.button)`
+import l from "@emotion/styled";
+const c = l.button`
   position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 ${({ theme: { spacing: t } }) => t[100]};
   border-radius: 9999px;
-  transition: background-color 0.3s;
+  transition: all 0.2s;
   cursor: pointer;
 
-  ${({ theme: { palette: t }, checked: i, disabled: r, size: a }) => {
+  ${({ theme: { palette: t }, checked: r, disabled: a, size: i }) => {
   const e = {};
-  switch (a) {
+  switch (i) {
     case "small":
       Object.assign(e, {
         width: "40px",
@@ -44,71 +40,60 @@ const d = s(l.button)`
       });
       break;
   }
-  return i ? Object.assign(e, {
+  return r ? Object.assign(e, {
     backgroundColor: t.primary.main
   }) : Object.assign(e, {
     backgroundColor: t.neutral[300]
-  }), r && Object.assign(e, {
+  }), a && Object.assign(e, {
     backgroundColor: t.neutral[200]
   }), e;
 }};
 
-  &:disabled {
-    cursor: not-allowed;
-  }
-`, c = s(l.div)`
-  background-color: ${({
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 0;
+    background-color: ${({
   theme: {
     palette: { common: t }
   }
 }) => t.background};
-  border-radius: 50%;
+    border-radius: 50%;
+    transition:
+      width 0.2s,
+      height 0.2s,
+      background-color 0.2s,
+      transform 0.2s ${({ ease: t }) => t === "in" ? "ease-in" : "ease-out"};
+    transform: ${({ theme: { spacing: t }, checked: r }) => r ? `translate3d(calc(100% + ${t[100]}), -50%, 0)` : `translate3d(${t[100]}, -50%, 0)`};
+  }
 
-  ${({ size: t }) => {
-  switch (t) {
-    case "small":
-      return {
-        width: "16px",
-        height: "16px"
-      };
-    case "large":
-      return {
-        width: "24px",
-        height: "24px"
-      };
-    default:
-      return {
-        width: "20px",
-        height: "20px"
-      };
+  &:disabled {
+    cursor: not-allowed;
   }
-}}
 `;
-function x({
+function f({
   checked: t = !1,
-  disabled: i = !1,
-  size: r = "medium",
-  onChange: a,
+  disabled: r = !1,
+  size: a = "medium",
+  onChange: i,
   onClick: e,
-  ...h
+  ...s
 }) {
   return /* @__PURE__ */ n(
-    d,
+    c,
     {
-      size: r,
+      size: a,
       checked: t,
-      disabled: i,
+      disabled: r,
+      ease: t ? "in" : "out",
       onClick: (o) => {
-        !i && typeof a == "function" && a(o, !t), typeof e == "function" && e(o);
-      },
-      style: {
-        justifyContent: t ? "flex-end" : "flex-start"
+        !r && typeof i == "function" && i(o, !t), typeof e == "function" && e(o);
       },
-      ...h,
-      children: /* @__PURE__ */ n(c, { layout: !0, size: r })
+      ...s
     }
   );
 }
 export {
-  x as default
+  f as default
 };

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

@@ -1,6 +1,6 @@
-import { MouseEvent } from 'react';
-import { HTMLMotionProps } from 'motion/react';
-export interface SwitchProps extends Omit<HTMLMotionProps<"button">, "onChange"> {
+import { ComponentPropsWithRef, MouseEvent } from 'react';
+import { UtilityProps } from '../../typings/utility';
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"button">, "onChange">, Pick<UtilityProps, "css"> {
     checked?: boolean;
     disabled?: boolean;
     size?: "small" | "medium" | "large";

package/dist/components/Tag/Tag.mjs

@@ -1,19 +1,18 @@
 import { jsx as n } from "@emotion/react/jsx-runtime";
 import a from "@emotion/styled";
-import { motion as m } from "motion/react";
-import o from "../../utils/getValueByPath.mjs";
-const s = a(m.span)`
-  transition: all 0.3s;
+import r from "../../utils/getValueByPath.mjs";
+const s = a.span`
+  transition: all 0.2s;
   cursor: default;
 
   padding: ${({ theme: { spacing: t } }) => t[100]};
   border-radius: ${({ theme: { radius: t } }) => t[200]};
 
-  ${({ theme: { palette: t }, color: r, textColor: i }) => {
+  ${({ theme: { palette: t }, color: o, textColor: i }) => {
   const e = {};
   return Object.assign(e, {
-    backgroundColor: o(t, r) || "inherit",
-    color: o(t, i) || "inherit"
+    backgroundColor: r(t, o) || "inherit",
+    color: r(t, i) || "inherit"
   }), e;
 }}
 
@@ -27,9 +26,9 @@ const s = a(m.span)`
   lineHeight: t.lineHeight
 })};
 `;
-function l(t) {
+function f(t) {
   return /* @__PURE__ */ n(s, { ...t });
 }
 export {
-  l as default
+  f as default
 };

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

@@ -1,7 +1,7 @@
+import { ComponentPropsWithRef } from 'react';
 import { ShifloTheme } from '../../theme/typing';
 import { RecursionPath, UtilityProps } from '../../typings/utility';
-import { HTMLMotionProps } from 'motion/react';
-export interface TagProps extends HTMLMotionProps<"span">, Pick<UtilityProps, "css"> {
+export interface TagProps extends ComponentPropsWithRef<"span">, Pick<UtilityProps, "css"> {
     color?: RecursionPath<ShifloTheme["palette"]> | "inherit";
     textColor?: RecursionPath<ShifloTheme["palette"]> | "inherit";
 }

package/dist/components/TextField/TextField.d.ts

@@ -1,3 +1,3 @@
 import { TextFieldProps } from './TextField.typing';
-declare function TextField({ variant, size, fullWidth, disabled, startIcon, endIcon, onFocus, onBlur, ...props }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function TextField({ variant, size, fullWidth, disabled, startIcon, endIcon, onFocus, onBlur, css, ...props }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default TextField;

package/dist/components/TextField/TextField.mjs

@@ -1,14 +1,13 @@
-import { jsxs as m, jsx as a } from "@emotion/react/jsx-runtime";
-import { useState as p } from "react";
+import { jsxs as p, jsx as a } from "@emotion/react/jsx-runtime";
+import { useState as m } from "react";
 import l from "@emotion/styled";
-import { motion as c } from "motion/react";
-const b = l(c.div)`
+const b = l.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e[200]};
   border: 1px solid transparent;
   border-radius: ${({ theme: { radius: e } }) => e[200]};
-  transition: all 0.3s;
+  transition: all 0.2s;
   background-color: ${({
   theme: {
     palette: { common: e }
@@ -119,7 +118,7 @@ const b = l(c.div)`
   color: e[500],
   cursor: "not-allowed"
 } : {}};
-`, w = l(c.input)`
+`, w = l.input`
   flex-grow: 1;
   border: none;
   outline: none;
@@ -147,19 +146,20 @@ const b = l(c.div)`
   justify-content: center;
   white-space: nowrap;
 `;
-function H({
+function F({
   variant: e = "outlined",
   size: n = "medium",
   fullWidth: o,
   disabled: t,
   startIcon: r,
   endIcon: i,
-  onFocus: h,
-  onBlur: u,
+  onFocus: c,
+  onBlur: h,
+  css: u,
   ...f
 }) {
-  const [g, d] = p(!1);
-  return /* @__PURE__ */ m(
+  const [g, d] = m(!1);
+  return /* @__PURE__ */ p(
     b,
     {
       variant: e,
@@ -167,12 +167,13 @@ function H({
       focused: g,
       fullWidth: o,
       disabled: t,
+      css: u,
       children: [
         r && /* @__PURE__ */ a(S, { children: r }),
         /* @__PURE__ */ a(w, { ...f, onFocus: (s) => {
-          d(!0), h?.(s);
+          d(!0), c?.(s);
         }, onBlur: (s) => {
-          d(!1), u?.(s);
+          d(!1), h?.(s);
         }, disabled: t }),
         i && /* @__PURE__ */ a($, { children: i })
       ]
@@ -180,5 +181,5 @@ function H({
   );
 }
 export {
-  H as default
+  F as default
 };

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

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { HTMLMotionProps } from 'motion/react';
-export interface TextFieldProps extends Omit<HTMLMotionProps<"input">, "size"> {
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { UtilityProps } from '../../typings/utility';
+export interface TextFieldProps extends Omit<ComponentPropsWithRef<"input">, "children" | "size">, Pick<UtilityProps, "css"> {
     variant?: "contained" | "outlined";
     startIcon?: ReactNode;
     endIcon?: ReactNode;

package/dist/components/Typography/Typography.mjs

@@ -1,22 +1,21 @@
-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 { jsx as c } from "@emotion/react/jsx-runtime";
+import d from "@emotion/styled";
+import f from "../../utils/getUtilityProps.mjs";
 import r from "../../utils/getValueByPath.mjs";
-const h = y(c.div)`
-  transition: all 0.3s;
+const h = d.div`
+  transition: all 0.2s;
 
-  ${({ theme: { typography: t, palette: i }, variant: s, color: n, fontWeight: a, borderColor: e, ...l }) => {
-  const { fontSize: p, lineHeight: m } = t[s || "body2"], o = {
+  ${({ theme: { typography: t, palette: i }, variant: s, color: n, fontWeight: a, borderColor: o, ...l }) => {
+  const { fontSize: p, lineHeight: y } = t[s || "body2"], e = {
     fontSize: p,
-    lineHeight: m,
+    lineHeight: y,
     fontWeight: a
   };
-  return Object.assign(o, d(l)), e && Object.assign(o, {
-    borderColor: r(i, e) || "inherit"
-  }), Object.assign(o, {
+  return Object.assign(e, f(l)), o && Object.assign(e, {
+    borderColor: r(i, o) || "inherit"
+  }), Object.assign(e, {
     color: r(i, n) || "inherit"
-  }), o;
+  }), e;
 }};
 
   ${({ textAlign: t }) => t ? {
@@ -35,7 +34,7 @@ const h = y(c.div)`
   WebkitLineClamp: t,
   WebkitBoxOrient: "vertical"
 } : {}};
-`, j = (t) => /* @__PURE__ */ f(h, { ...t });
+`, v = (t) => /* @__PURE__ */ c(h, { ...t });
 export {
-  j as default
+  v as default
 };