@shiflo/ui 0.0.18 → 0.1.0

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 "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.mjs

@@ -1,17 +1,18 @@
 import { jsx as n } from "react/jsx-runtime";
-import l from "basic-styled";
-const c = l.button`
+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.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 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,4 @@
-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"> {
     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("react").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 "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;

package/dist/components/Typography/Typography.mjs

@@ -1,46 +1,41 @@
-import { jsx as h } from "react/jsx-runtime";
-import p from "basic-styled";
-import b from "../../utils/getUtilityProps.mjs";
+import { jsx as c } from "react/jsx-runtime";
+import f from "@emotion/styled";
+import { motion as y } from "motion/react";
+import d from "../../utils/getUtilityProps.mjs";
 import r from "../../utils/getValueByPath.mjs";
-const f = p.div`
-  transition:
-    font-size 0.2s,
-    line-height 0.2s,
-    border-width 0.2s,
-    border-radius 0.2s,
-    border-color 0.2s,
-    color 0.2s;
+const h = f(y.div)`
+  transition: all 0.2s;
 
-  ${({ theme: { typography: o, palette: t }, variant: s, color: n, fontWeight: l, borderColor: i, ...d }) => {
-  const { fontSize: a, lineHeight: c } = o[s || "body2"], e = {
-    fontSize: a,
-    lineHeight: c,
+  ${({ theme: { typography: t, palette: i }, variant: s, color: n, fontWeight: l, borderColor: e, ...a }) => {
+  const { fontSize: p, lineHeight: m } = t[s || "body2"], o = {
+    fontSize: p,
+    lineHeight: m,
     fontWeight: l
   };
-  return Object.assign(e, b(d)), i && Object.assign(e, {
-    borderColor: r(t, i) || "inherit"
-  }), Object.assign(e, {
-    color: r(t, n) || "inherit"
-  }), e;
+  return Object.assign(o, d(a)), e && Object.assign(o, {
+    borderColor: r(i, e) || "inherit"
+  }), Object.assign(o, {
+    color: r(i, n) || "inherit"
+  }), o;
 }};
 
-  ${({ textAlign: o }) => o ? {
-  textAlign: o
+  ${({ textAlign: t }) => t ? {
+  textAlign: t
 } : {}};
 
-  ${({ noWrap: o }) => o ? {
+  ${({ noWrap: t }) => t ? {
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis"
 } : {}};
 
-  ${({ lineClamp: o }) => o ? {
+  ${({ lineClamp: t }) => t ? {
   display: "-webkit-box",
   overflow: "hidden",
-  "-webkit-line-clamp": o,
+  "-webkit-line-clamp": t,
   "-webkit-box-orient": "vertical"
 } : {}};
-`, u = (o) => /* @__PURE__ */ h(f, { ...o });
+`, u = (t) => /* @__PURE__ */ c(h, { ...t });
 export {
   u as default
 };

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

@@ -1,12 +1,12 @@
 import { ReactNode, ElementType } from 'react';
 import { PolymorphicComponentProps } from '../../typings/component';
 import { UtilityProps, RecursionPath } from '../../typings/utility';
-import { BasicTheme } from 'basic-styled';
+import { ShifloTheme } from '../../theme/typing';
 export interface BaseTypographyProps extends UtilityProps {
-    variant?: keyof BasicTheme["typography"];
+    variant?: keyof ShifloTheme["typography"];
     fontWeight?: 400 | 500 | 700;
-    color?: RecursionPath<BasicTheme["palette"]> | "inherit";
-    borderColor?: RecursionPath<BasicTheme["palette"]>;
+    color?: RecursionPath<ShifloTheme["palette"]> | "inherit";
+    borderColor?: RecursionPath<ShifloTheme["palette"]>;
     textAlign?: "left" | "center" | "right";
     noWrap?: boolean;
     lineClamp?: number;

package/dist/components/index.d.ts

@@ -0,0 +1,23 @@
+import { default as BottomSheet } from './BottomSheet';
+import { default as Box } from './Box';
+import { default as Button } from './Button';
+import { default as Dialog } from './Dialog';
+import { default as Icon } from './Icon';
+import { default as Overlay } from './Overlay';
+import { default as Snackbar } from './Snackbar';
+import { default as Switch } from './Switch';
+import { default as Tag } from './Tag';
+import { default as TextField } from './TextField';
+import { default as Typography } from './Typography';
+export * from './BottomSheet';
+export * from './Box';
+export * from './Button';
+export * from './Dialog';
+export * from './Icon';
+export * from './Overlay';
+export * from './Snackbar';
+export * from './Switch';
+export * from './Tag';
+export * from './TextField';
+export * from './Typography';
+export { Button, Box, Typography, TextField, Overlay, BottomSheet, Dialog, Icon, Snackbar, Switch, Tag };

package/dist/components/index.mjs

@@ -0,0 +1,24 @@
+import { default as a } from "./BottomSheet/BottomSheet.mjs";
+import { default as r } from "./Box/Box.mjs";
+import { default as l } from "./Button/Button.mjs";
+import { default as x } from "./Dialog/Dialog.mjs";
+import { default as m } from "./Icon/Icon.mjs";
+import { default as s } from "./Overlay/Overlay.mjs";
+import { default as g } from "./Snackbar/Snackbar.mjs";
+import { default as i } from "./Switch/Switch.mjs";
+import { default as y } from "./Tag/Tag.mjs";
+import { default as S } from "./TextField/TextField.mjs";
+import { default as b } from "./Typography/Typography.mjs";
+export {
+  a as BottomSheet,
+  r as Box,
+  l as Button,
+  x as Dialog,
+  m as Icon,
+  s as Overlay,
+  g as Snackbar,
+  i as Switch,
+  y as Tag,
+  S as TextField,
+  b as Typography
+};