@shiflo/ui 0.0.19 → 0.1.1

package/dist/components/Overlay/Overlay.mjs

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

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

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

package/dist/components/Snackbar/Snackbar.mjs

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

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

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

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

@@ -1,3 +1,3 @@
 import { SwitchProps } from './Switch.typing';
-declare function Switch({ checked, disabled, size, onChange, onClick, ...props }: SwitchProps): import("react").JSX.Element;
+declare function Switch({ checked, disabled, size, onChange, onClick, ...props }: SwitchProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Switch;

package/dist/components/Switch/Switch.mjs

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

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

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

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

@@ -1,3 +1,3 @@
 import { TagProps } from './Tag.typing';
-declare function Tag(props: TagProps): import("react").JSX.Element;
+declare function Tag(props: TagProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.mjs

@@ -1,9 +1,8 @@
-import { jsx as l } from "react/jsx-runtime";
-import b from "basic-styled";
-const m = b.span`
-  transition:
-    background-color 0.2s,
-    color 0.2s;
+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;
   cursor: default;
 
   padding: ${({ theme: { spacing: r } }) => r[100]};
@@ -16,13 +15,13 @@ const m = b.span`
       primary: e,
       secondary: o,
       text: i,
-      feedback: { warning: n, error: t, info: c, success: s }
+      feedback: { warning: n, error: t, info: s, success: c }
     }
   },
-  color: g
+  color: m
 }) => {
   const a = {};
-  switch (g) {
+  switch (m) {
     case "warning":
       Object.assign(a, {
         backgroundColor: n.main,
@@ -37,13 +36,13 @@ const m = b.span`
       break;
     case "info":
       Object.assign(a, {
-        backgroundColor: c.main,
+        backgroundColor: s.main,
         color: r === "dark" ? o.main : i.primary
       });
       break;
     case "success":
       Object.assign(a, {
-        backgroundColor: s.main,
+        backgroundColor: c.main,
         color: r === "dark" ? o.main : i.primary
       });
       break;
@@ -67,9 +66,9 @@ const m = b.span`
   lineHeight: r.lineHeight
 })};
 `;
-function d(r) {
-  return /* @__PURE__ */ l(m, { ...r });
+function f(r) {
+  return /* @__PURE__ */ l(k, { ...r });
 }
 export {
-  d as default
+  f as default
 };

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

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from 'react';
 import { UtilityProps } from '../../typings/utility';
-export interface TagProps extends ComponentPropsWithRef<"span">, Pick<UtilityProps, "css"> {
+import { HTMLMotionProps } from 'motion/react';
+export interface TagProps extends HTMLMotionProps<"span">, Pick<UtilityProps, "css"> {
     color?: "primary" | "warning" | "error" | "info" | "success";
 }

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, css, onFocus, onBlur, ...props }: TextFieldProps): import("react").JSX.Element;
+declare function TextField({ variant, size, fullWidth, disabled, startIcon, endIcon, onFocus, onBlur, ...props }: TextFieldProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default TextField;

package/dist/components/TextField/TextField.mjs

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

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

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