@shiflo/ui 0.0.19 → 0.1.0

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

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

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,8 +1,9 @@
-import { jsx as y, jsxs as z } from "react/jsx-runtime";
-import { useState as G, useRef as o, useImperativeHandle as J, useEffect as S } from "react";
-import b from "basic-styled";
-import K from "../Overlay/Overlay.mjs";
-const N = b.div`
+import { jsx as o, jsxs as H } from "react/jsx-runtime";
+import { useState as R, useRef as a, useImperativeHandle as S, useEffect as j } from "react";
+import n from "@emotion/styled";
+import { motion as D } from "motion/react";
+import I from "../Overlay/Overlay.mjs";
+const O = n(D.div)`
   width: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   max-width: ${({ maxWidth: t = "375px" }) => t};
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
@@ -15,11 +16,7 @@ const N = b.div`
     palette: { common: t }
   }
 }) => t.background};
-  transition:
-    transform ${({ transitionDuration: t }) => `${t}ms`}
-      ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
-    background-color 0.2s;
-`, Q = b.div`
+`, A = n.div`
   position: sticky;
   top: 0;
   left: 0;
@@ -34,7 +31,7 @@ const N = b.div`
   }
 }) => t.background};
   transition: background-color 0.2s;
-`, U = b.div`
+`, F = n.div`
   width: 24px;
   height: 4px;
   border-radius: ${({ theme: { radius: t } }) => t[100]};
@@ -45,82 +42,70 @@ const N = b.div`
 }) => t.main};
   transition: background-color 0.2s;
 `;
-function E({
+function z({
   open: t,
-  onClose: c,
-  children: T,
-  transitionDuration: s = 200,
-  maxWidth: j = "375px",
-  onClick: $,
-  ref: I,
-  hideDragHandleBar: O,
-  hideOverlay: A,
-  style: F,
-  ...W
+  onClose: r,
+  children: m,
+  transitionDuration: i = 0.2,
+  maxWidth: d = "375px",
+  onClick: c,
+  ref: f,
+  hideDragHandleBar: p,
+  hideOverlay: u,
+  style: g,
+  dragThreshold: h = 100,
+  ...y
 }) {
-  const [h, L] = G(!1), l = o(null), x = o(null), i = o(null), d = o(!1), v = o(0), f = o(0), m = o(0), p = o(0), g = o(0), q = o(0.25);
-  J(I, () => l.current);
-  const P = (r) => {
-    r.stopPropagation(), typeof $ == "function" && $(r);
+  const [b, s] = R(!1), l = a(null), x = a(null), $ = a(null);
+  S(f, () => l.current);
+  const v = (e) => {
+    e.stopPropagation(), typeof c == "function" && c(e);
+  }, k = (e, B) => {
+    const { offset: w, velocity: E } = B;
+    (w.y > h || E.y > 500) && typeof r == "function" && r();
   };
-  return S(() => {
-    let r;
-    return t ? r = requestAnimationFrame(() => {
-      L(!0);
-    }) : L(!1), () => {
-      r && cancelAnimationFrame(r);
+  return j(() => {
+    let e;
+    return t ? e = requestAnimationFrame(() => {
+      s(!0);
+    }) : s(!1), () => {
+      e && cancelAnimationFrame(e);
     };
-  }, [t]), S(() => {
-    const r = l.current, n = x.current, k = (e) => {
-      r && (r.scrollTop > 0 || (d.current = !0, v.current = e, f.current = e, m.current = r.offsetHeight, g.current = Date.now(), r.style.transition = "none", r.style.cursor = "grabbing", n && (n.style.transition = "none"), i.current && (i.current.style.cursor = "grabbing")));
-    }, R = (e) => {
-      if (!r || !d.current) return;
-      const u = e - v.current;
-      if (u < 0) return;
-      f.current = e;
-      const D = Date.now(), M = D - g.current;
-      if (M > 0) {
-        const V = f.current;
-        p.current = (e - V) / M, g.current = D;
-      }
-      n && (n.style.opacity = `${Math.max(0, 1 - u / (m.current * 2))}`), r.style.transform = `translate3d(0, ${u}px, 0)`;
-    }, a = () => {
-      if (!r || !d.current) return;
-      d.current = !1, r.style.cursor = "default", i.current && (i.current.style.cursor = "grab");
-      const e = f.current - v.current, u = m.current * q.current;
-      r.style.transition = `transform ${s}ms ease-out`, n && (n.style.transition = `opacity ${s}ms ease-out`), e > u || p.current > 0.5 && p.current > 0 ? (r.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), c == null || c()) : (r.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
-    }, w = (e) => k(e.clientY), H = (e) => R(e.clientY), Y = (e) => k(e.touches[0].clientY), B = (e) => R(e.touches[0].clientY);
-    return r == null || r.addEventListener("mousedown", w), r == null || r.addEventListener("mousemove", H), r == null || r.addEventListener("mouseup", a), r == null || r.addEventListener("mouseleave", a), r == null || r.addEventListener("touchstart", Y), r == null || r.addEventListener("touchmove", B), r == null || r.addEventListener("touchend", a), r == null || r.addEventListener("touchcancel", a), () => {
-      r == null || r.removeEventListener("mousedown", w), r == null || r.removeEventListener("mousemove", H), r == null || r.removeEventListener("mouseup", a), r == null || r.removeEventListener("mouseleave", a), r == null || r.removeEventListener("touchstart", Y), r == null || r.removeEventListener("touchmove", B), r == null || r.removeEventListener("touchend", a), r == null || r.removeEventListener("touchcancel", a);
-    };
-  }, [h, c, s]), /* @__PURE__ */ y(
-    K,
+  }, [t]), /* @__PURE__ */ o(
+    I,
     {
       ref: x,
       open: t,
-      onClose: c,
-      transitionDuration: s,
+      onClose: r,
+      transitionDuration: i,
       placement: "center-bottom",
-      css: A ? {
-        pointerEvents: "none",
-        backgroundColor: "transparent !important"
-      } : void 0,
-      children: /* @__PURE__ */ z(
-        N,
+      hideOverlay: u,
+      children: /* @__PURE__ */ H(
+        O,
         {
           ref: l,
-          ease: t ? "in" : "out",
-          transitionDuration: s,
-          maxWidth: j,
-          onClick: P,
-          ...W,
-          style: {
-            transform: `translate3d(0, ${h ? "0" : "200%"}, 0)`,
-            ...F
+          drag: "y",
+          dragConstraints: { top: 0, bottom: 0 },
+          dragElastic: { top: 0, bottom: 0.2 },
+          dragMomentum: !1,
+          onDragEnd: k,
+          maxWidth: d,
+          onClick: v,
+          initial: { y: "200%" },
+          animate: {
+            y: b ? 0 : "200%"
+          },
+          exit: { y: "200%" },
+          transition: {
+            type: "spring",
+            duration: i,
+            damping: 10
           },
+          style: g,
+          ...y,
           children: [
-            !O && /* @__PURE__ */ y(Q, { ref: i, children: /* @__PURE__ */ y(U, {}) }),
-            T
+            !p && /* @__PURE__ */ o(A, { ref: $, children: /* @__PURE__ */ o(F, {}) }),
+            m
           ]
         }
       )
@@ -128,5 +113,5 @@ function E({
   );
 }
 export {
-  E as default
+  z as default
 };

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

@@ -1,10 +1,12 @@
-import { ComponentPropsWithRef } from 'react';
+import { PropsWithChildren } from 'react';
+import { HTMLMotionProps } from 'motion/react';
 import { UtilityProps } from '../../typings/utility';
-export interface BottomSheetProps extends ComponentPropsWithRef<"div">, Pick<UtilityProps, "css"> {
+export interface BottomSheetProps extends PropsWithChildren<HTMLMotionProps<"div"> & Pick<UtilityProps, "css">> {
     open?: boolean;
     onClose?: () => void;
     transitionDuration?: number;
     maxWidth?: string;
     hideDragHandleBar?: boolean;
     hideOverlay?: boolean;
+    dragThreshold?: number;
 }

package/dist/components/Box/Box.mjs

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

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

@@ -1,11 +1,11 @@
 import { ElementType, ReactNode } from 'react';
 import { PolymorphicComponentProps } from '../../typings/component';
 import { RecursionPath, UtilityProps } from '../../typings/utility';
-import { BasicTheme } from 'basic-styled';
+import { ShifloTheme } from '../../theme/typing';
 export interface BaseBoxProps extends UtilityProps {
-    backgroundColor?: RecursionPath<BasicTheme["palette"]>;
-    color?: RecursionPath<BasicTheme["palette"]> | "inherit";
-    borderColor?: RecursionPath<BasicTheme["palette"]>;
+    backgroundColor?: RecursionPath<ShifloTheme["palette"]>;
+    color?: RecursionPath<ShifloTheme["palette"]> | "inherit";
+    borderColor?: RecursionPath<ShifloTheme["palette"]>;
 }
 export type BoxProps<T extends ElementType> = BaseBoxProps & PolymorphicComponentProps<T>;
 export type BoxComponent<DT extends ElementType = "div"> = <T extends ElementType = DT>(props: BoxProps<T>) => ReactNode;

package/dist/components/Button/Button.mjs

@@ -1,37 +1,23 @@
-import { jsxs as g } from "react/jsx-runtime";
-import v from "basic-styled";
-const h = v.button`
+import { jsxs as k } from "react/jsx-runtime";
+import f from "@emotion/styled";
+import { motion as v } from "motion/react";
+const m = f(v.button)`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: ${({ theme: { spacing: r } }) => r[100]};
+  gap: ${({ theme: { spacing: t } }) => t[100]};
   font-weight: 500;
-  transition:
-    transform 0.2s ease-out,
-    background-color 0.2s,
-    padding 0.2s,
-    font-size 0.2s,
-    font-weight 0.2s,
-    border-width 0.2s,
-    border-radius 0.2s,
-    border-color 0.2s,
-    color 0.2s;
-  border: 1px solid transparent;
+  transition: all 0.2s;
 
-  ${({
-  theme: {
-    mode: r,
-    palette: { primary: e, secondary: t, neutral: o },
-    typography: { body1: c, body2: a, small1: n, small2: d },
-    spacing: s,
-    radius: l
-  },
-  variant: b,
-  size: f,
-  color: k
-}) => {
-  const i = {};
-  switch (b) {
+  ${({ theme: t, variant: l, size: s, color: d }) => {
+  const {
+    mode: a,
+    palette: { primary: e, secondary: r, neutral: o, gradient: p },
+    typography: { body1: c, body2: g, small1: h, small2: u },
+    spacing: n,
+    radius: b
+  } = t, i = {};
+  switch (l) {
     case "ghost":
       Object.assign(i, {
         backgroundColor: e.alpha[10],
@@ -45,11 +31,10 @@ const h = v.button`
           }
         },
         "&:active": {
-          transform: "scale(0.9)",
           backgroundColor: e.alpha[30]
         },
         "&:disabled": {
-          backgroundColor: r === "dark" ? e.alpha[10] : e.alpha[5],
+          backgroundColor: a === "dark" ? e.alpha[10] : e.alpha[5],
           color: o[500],
           cursor: "not-allowed"
         }
@@ -58,10 +43,10 @@ const h = v.button`
     case "text":
       Object.assign(i, {
         backgroundColor: "transparent",
-        color: r === "dark" ? o[800] : o[700],
+        color: a === "dark" ? o[800] : o[700],
         // 기본 텍스트 색상 (더 강조된 중립색)
         "& svg": {
-          color: r === "dark" ? o[800] : o[700]
+          color: a === "dark" ? o[800] : o[700]
         },
         "@media (hover: hover)": {
           "&:hover": {
@@ -69,7 +54,6 @@ const h = v.button`
           }
         },
         "&:active": {
-          transform: "scale(0.9)",
           backgroundColor: o[300]
         },
         "&:disabled": {
@@ -80,22 +64,45 @@ const h = v.button`
         }
       });
       break;
+    case "gradient":
+      Object.assign(i, {
+        background: p.primaryToAccent,
+        color: a === "dark" ? o[900] : r.main,
+        "& svg": {
+          color: a === "dark" ? o[900] : r.main
+        },
+        "@media (hover: hover)": {
+          "&:hover": {
+            background: p.primaryToAccent
+          }
+        },
+        "&:active": {
+          background: p.primaryToAccent,
+          boxShadow: `inset 0 0 0 100px ${e.dark}`
+        },
+        "&:disabled": {
+          background: o[200],
+          color: o[500],
+          cursor: "not-allowed",
+          boxShadow: "none"
+        }
+      });
+      break;
     default:
-      if (k === "secondary") {
+      if (d === "secondary") {
         Object.assign(i, {
-          backgroundColor: t.main,
-          color: r === "dark" ? o[900] : o[700],
+          backgroundColor: r.main,
+          color: a === "dark" ? o[900] : o[700],
           "& svg": {
-            color: r === "dark" ? o[900] : o[700]
+            color: a === "dark" ? o[900] : o[700]
           },
           "@media (hover: hover)": {
             "&:hover": {
-              backgroundColor: t.light
+              backgroundColor: r.light
             }
           },
           "&:active": {
-            transform: "scale(0.9)",
-            backgroundColor: t.dark
+            backgroundColor: r.dark
           },
           "&:disabled": {
             backgroundColor: o[200],
@@ -107,9 +114,9 @@ const h = v.button`
       }
       Object.assign(i, {
         backgroundColor: e.main,
-        color: r === "dark" ? o[900] : t.main,
+        color: a === "dark" ? o[900] : r.main,
         "& svg": {
-          color: r === "dark" ? o[900] : t.main
+          color: a === "dark" ? o[900] : r.main
         },
         "@media (hover: hover)": {
           "&:hover": {
@@ -117,7 +124,6 @@ const h = v.button`
           }
         },
         "&:active": {
-          transform: "scale(0.9)",
           backgroundColor: e.active
         },
         "&:disabled": {
@@ -128,11 +134,11 @@ const h = v.button`
       });
       break;
   }
-  switch (f) {
+  switch (s) {
     case "large":
       Object.assign(i, {
-        padding: `${s[300]} ${s[350]}`,
-        borderRadius: l[300],
+        padding: `${n[300]} ${n[350]}`,
+        borderRadius: b[300],
         fontSize: c.fontSize,
         lineHeight: c.lineHeight,
         "& svg": {
@@ -143,37 +149,37 @@ const h = v.button`
       break;
     case "small":
       Object.assign(i, {
-        padding: `${s[100]} ${s[150]}`,
-        borderRadius: l[200],
-        fontSize: n.fontSize,
-        lineHeight: n.lineHeight,
+        padding: `${n[100]} ${n[150]}`,
+        borderRadius: b[200],
+        fontSize: h.fontSize,
+        lineHeight: h.lineHeight,
         "& svg": {
-          width: n.fontSize,
-          height: n.fontSize
+          width: h.fontSize,
+          height: h.fontSize
         }
       });
       break;
     case "xSmall":
       Object.assign(i, {
-        padding: `${s[50]} ${s[100]}`,
-        borderRadius: l[150],
-        fontSize: d.fontSize,
-        lineHeight: d.lineHeight,
+        padding: `${n[50]} ${n[100]}`,
+        borderRadius: b[150],
+        fontSize: u.fontSize,
+        lineHeight: u.lineHeight,
         "& svg": {
-          width: d.fontSize,
-          height: d.fontSize
+          width: u.fontSize,
+          height: u.fontSize
         }
       });
       break;
     default:
       Object.assign(i, {
-        padding: `${s[200]} ${s[250]}`,
-        borderRadius: l[250],
-        fontSize: a.fontSize,
-        lineHeight: a.lineHeight,
+        padding: `${n[200]} ${n[250]}`,
+        borderRadius: b[250],
+        fontSize: g.fontSize,
+        lineHeight: g.lineHeight,
         "& svg": {
-          width: a.fontSize,
-          height: a.fontSize
+          width: g.fontSize,
+          height: g.fontSize
         }
       });
       break;
@@ -182,28 +188,112 @@ const h = v.button`
 }}
 `;
 function C({
-  ref: r,
-  children: e,
-  variant: t = "filled",
-  size: o = "medium",
-  color: c = "primary",
-  startIcon: a,
-  endIcon: n,
-  ...d
+  ref: t,
+  children: l,
+  variant: s = "filled",
+  size: d = "medium",
+  color: a = "primary",
+  startIcon: e,
+  endIcon: r,
+  ...o
 }) {
-  return t === "text" ? /* @__PURE__ */ g(h, { ref: r, variant: "text", size: o, color: "secondary", ...d, children: [
-    a,
-    e,
-    n
-  ] }) : t === "ghost" ? /* @__PURE__ */ g(h, { ref: r, variant: "ghost", size: o, color: "primary", ...d, children: [
-    a,
-    e,
-    n
-  ] }) : /* @__PURE__ */ g(h, { ref: r, variant: t, size: o, color: c, ...d, children: [
-    a,
-    e,
-    n
-  ] });
+  return s === "text" ? /* @__PURE__ */ k(
+    m,
+    {
+      ref: t,
+      variant: "text",
+      size: d,
+      color: "secondary",
+      layout: !0,
+      whileHover: {
+        scale: 1.02
+      },
+      whileTap: { scale: 0.98 },
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 25
+      },
+      ...o,
+      children: [
+        e,
+        l,
+        r
+      ]
+    }
+  ) : s === "ghost" ? /* @__PURE__ */ k(
+    m,
+    {
+      ref: t,
+      variant: "ghost",
+      size: d,
+      color: "primary",
+      layout: !0,
+      whileHover: {
+        scale: 1.02
+      },
+      whileTap: { scale: 0.98 },
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 25
+      },
+      ...o,
+      children: [
+        e,
+        l,
+        r
+      ]
+    }
+  ) : s === "gradient" ? /* @__PURE__ */ k(
+    m,
+    {
+      ref: t,
+      variant: "gradient",
+      size: d,
+      color: "primary",
+      layout: !0,
+      whileHover: {
+        scale: 1.02
+      },
+      whileTap: { scale: 0.98 },
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 25
+      },
+      ...o,
+      children: [
+        e,
+        l,
+        r
+      ]
+    }
+  ) : /* @__PURE__ */ k(
+    m,
+    {
+      ref: t,
+      variant: s,
+      size: d,
+      color: a,
+      layout: !0,
+      whileHover: {
+        scale: 1.02
+      },
+      whileTap: { scale: 0.98 },
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 25
+      },
+      ...o,
+      children: [
+        e,
+        l,
+        r
+      ]
+    }
+  );
 }
 export {
   C as default

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

@@ -1,5 +1,6 @@
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import { UtilityProps } from '../../typings/utility';
+import { HTMLMotionProps } from 'motion/react';
 export interface BaseButtonProps extends Pick<UtilityProps, "css"> {
     size?: "xSmall" | "small" | "medium" | "large";
     startIcon?: ReactNode;
@@ -17,4 +18,8 @@ export interface TextButtonProps extends BaseButtonProps {
     variant?: "text";
     color?: "secondary";
 }
-export type ButtonProps = (FilledButtonProps | GhostButtonProps | TextButtonProps) & ComponentPropsWithRef<"button">;
+export interface GradientButtonProps extends BaseButtonProps {
+    variant?: "gradient";
+    color?: "primary";
+}
+export type ButtonProps = (FilledButtonProps | GhostButtonProps | TextButtonProps | GradientButtonProps) & PropsWithChildren<HTMLMotionProps<"button">>;