@shiflo/ui 0.2.1 → 0.2.4

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("@emotion/react/jsx-runtime").JSX.Element;
+declare function BottomSheet({ open, onClose, children, transitionDuration, maxWidth, onClick, ref, hideDragHandleBar, hideOverlay, disablePortal, style, ...props }: BottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default BottomSheet;

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,8 +1,8 @@
-import { jsx as g, jsxs as V } from "@emotion/react/jsx-runtime";
-import { useState as z, useRef as o, useImperativeHandle as C, useEffect as M } from "react";
+import { jsx as g, jsxs as z } from "@emotion/react/jsx-runtime";
+import { useState as C, useRef as o, useImperativeHandle as G, useEffect as M } from "react";
 import y from "@emotion/styled";
-import G from "../Overlay/Overlay.mjs";
-const J = y.div`
+import J from "../Overlay/Overlay.mjs";
+const K = y.div`
   width: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   max-width: ${({ maxWidth: t = "375px" }) => t};
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
@@ -19,7 +19,7 @@ const J = y.div`
     transform ${({ transitionDuration: t }) => `${t}ms`}
       ${({ ease: t }) => t === "in" ? "ease-out" : "ease-in"},
     background-color 0.2s;
-`, K = y.div`
+`, N = y.div`
   position: sticky;
   top: 0;
   left: 0;
@@ -34,7 +34,7 @@ const J = y.div`
   }
 }) => t.background};
   transition: background-color 0.2s;
-`, N = y.div`
+`, Q = y.div`
   width: 24px;
   height: 4px;
   border-radius: ${({ theme: { radius: t } }) => t[100]};
@@ -45,7 +45,7 @@ const J = y.div`
 }) => t.main};
   transition: background-color 0.2s;
 `;
-function _({
+function ee({
   open: t,
   onClose: d,
   children: S,
@@ -55,12 +55,13 @@ function _({
   ref: j,
   hideDragHandleBar: I,
   hideOverlay: O,
-  style: A,
-  ...F
+  disablePortal: A,
+  style: F,
+  ...W
 }) {
-  const [E, $] = z(!1), m = o(null), L = o(null), c = o(null), u = o(!1), f = o(0), l = o(0), h = o(0), v = o(0), p = o(0), W = o(0.25);
-  C(j, () => m.current);
-  const q = (e) => {
+  const [E, $] = C(!1), m = o(null), L = o(null), c = o(null), u = o(!1), f = o(0), l = o(0), h = o(0), v = o(0), p = o(0), q = o(0.25);
+  G(j, () => m.current);
+  const P = (e) => {
     e.stopPropagation(), typeof b == "function" && b(e);
   };
   return M(() => {
@@ -80,46 +81,47 @@ function _({
       l.current = r;
       const B = Date.now(), D = B - p.current;
       if (D > 0) {
-        const P = l.current;
-        v.current = (r - P) / D, p.current = B;
+        const V = l.current;
+        v.current = (r - V) / D, p.current = B;
       }
       n && (n.style.opacity = `${Math.max(0, 1 - i / (h.current * 2))}`), e.style.transform = `translate3d(0, ${i}px, 0)`;
     }, s = () => {
       if (!e || !u.current) return;
       u.current = !1, e.style.cursor = "default", c.current && (c.current.style.cursor = "grab");
-      const r = l.current - f.current, i = h.current * W.current;
+      const r = l.current - f.current, i = h.current * q.current;
       e.style.transition = `transform ${a}ms ease-out`, n && (n.style.transition = `opacity ${a}ms ease-out`), r > i || v.current > 0.5 && v.current > 0 ? (e.style.transform = "translate3d(0, 200%, 0)", n && (n.style.opacity = "0"), d?.()) : (e.style.transform = "translate3d(0, 0, 0)", n && (n.style.opacity = "1"));
     }, R = (r) => x(r.clientY), w = (r) => k(r.clientY), H = (r) => x(r.touches[0].clientY), Y = (r) => k(r.touches[0].clientY);
     return e?.addEventListener("mousedown", R), e?.addEventListener("mousemove", w), e?.addEventListener("mouseup", s), e?.addEventListener("mouseleave", s), e?.addEventListener("touchstart", H), e?.addEventListener("touchmove", Y), e?.addEventListener("touchend", s), e?.addEventListener("touchcancel", s), () => {
       e?.removeEventListener("mousedown", R), e?.removeEventListener("mousemove", w), e?.removeEventListener("mouseup", s), e?.removeEventListener("mouseleave", s), e?.removeEventListener("touchstart", H), e?.removeEventListener("touchmove", Y), e?.removeEventListener("touchend", s), e?.removeEventListener("touchcancel", s);
     };
   }, [E, d, a]), /* @__PURE__ */ g(
-    G,
+    J,
     {
       ref: L,
       open: t,
       onClose: d,
       transitionDuration: a,
       placement: "center-bottom",
+      disablePortal: A,
       css: O ? {
         pointerEvents: "none",
         backgroundColor: "transparent !important"
       } : void 0,
-      children: /* @__PURE__ */ V(
-        J,
+      children: /* @__PURE__ */ z(
+        K,
         {
           ref: m,
           ease: t ? "in" : "out",
           transitionDuration: a,
           maxWidth: T,
-          onClick: q,
-          ...F,
+          onClick: P,
+          ...W,
           style: {
             transform: `translate3d(0, ${E ? "0" : "200%"}, 0)`,
-            ...A
+            ...F
           },
           children: [
-            !I && /* @__PURE__ */ g(K, { ref: c, children: /* @__PURE__ */ g(N, {}) }),
+            !I && /* @__PURE__ */ g(N, { ref: c, children: /* @__PURE__ */ g(Q, {}) }),
             S
           ]
         }
@@ -128,5 +130,5 @@ function _({
   );
 }
 export {
-  _ as default
+  ee as default
 };

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

@@ -7,4 +7,5 @@ export interface BottomSheetProps extends ComponentPropsWithRef<"div">, Pick<Uti
     maxWidth?: string;
     hideDragHandleBar?: boolean;
     hideOverlay?: boolean;
+    disablePortal?: boolean;
 }

package/dist/components/Button/Button.mjs

@@ -1,20 +1,19 @@
 import { jsxs as s } from "@emotion/react/jsx-runtime";
-import S from "@emotion/styled";
-const b = S.button`
+import x from "@emotion/styled";
+const b = x.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: ${({ theme: { spacing: e } }) => e[100]};
   font-weight: 500;
   transition: all 0.2s;
   border: 1px solid transparent;
 
   ${({
   theme: {
-    mode: e,
-    palette: { primary: r, secondary: t, neutral: o, gradient: g },
-    typography: { body1: a, body2: n, small1: c, small2: l },
-    spacing: d,
+    mode: r,
+    palette: { primary: e, secondary: a, neutral: o, gradient: d },
+    typography: { body1: c, body2: n, small1: l, small2: g },
+    spacing: t,
     radius: h
   },
   variant: k,
@@ -25,22 +24,22 @@ const b = S.button`
   switch (k) {
     case "ghost":
       Object.assign(i, {
-        backgroundColor: r.alpha[10],
-        color: r.main,
+        backgroundColor: e.alpha[10],
+        color: e.main,
         "& svg": {
-          color: r.main
+          color: e.main
         },
         "@media (hover: hover)": {
           "&:hover": {
-            backgroundColor: r.alpha[20]
+            backgroundColor: e.alpha[20]
           }
         },
         "&:active": {
           transform: "scale(0.9)",
-          backgroundColor: r.alpha[30]
+          backgroundColor: e.alpha[30]
         },
         "&:disabled": {
-          backgroundColor: e === "dark" ? r.alpha[10] : r.alpha[5],
+          backgroundColor: r === "dark" ? e.alpha[10] : e.alpha[5],
           color: o[500],
           cursor: "not-allowed"
         }
@@ -48,20 +47,20 @@ const b = S.button`
       break;
     case "gradient":
       Object.assign(i, {
-        background: g.primaryToAccent,
-        color: e === "dark" ? o[900] : t.main,
+        background: d.primaryToAccent,
+        color: r === "dark" ? o[900] : a.main,
         "& svg": {
-          color: e === "dark" ? o[900] : t.main
+          color: r === "dark" ? o[900] : a.main
         },
         "@media (hover: hover)": {
           "&:hover": {
-            background: g.primaryToAccent
+            background: d.primaryToAccent
           }
         },
         "&:active": {
           transform: "scale(0.9)",
-          background: g.primaryToAccent,
-          boxShadow: `inset 0 0 0 100px ${r.dark}`
+          background: d.primaryToAccent,
+          boxShadow: `inset 0 0 0 100px ${e.dark}`
         },
         "&:disabled": {
           background: o[200],
@@ -74,10 +73,10 @@ const b = S.button`
     case "text":
       Object.assign(i, {
         backgroundColor: "transparent",
-        color: e === "dark" ? o[800] : o[700],
+        color: r === "dark" ? o[800] : o[700],
         // 기본 텍스트 색상 (더 강조된 중립색)
         "& svg": {
-          color: e === "dark" ? o[800] : o[700]
+          color: r === "dark" ? o[800] : o[700]
         },
         "@media (hover: hover)": {
           "&:hover": {
@@ -99,19 +98,19 @@ const b = S.button`
     default:
       if (v === "secondary") {
         Object.assign(i, {
-          backgroundColor: t.main,
-          color: e === "dark" ? o[900] : o[700],
+          backgroundColor: a.main,
+          color: r === "dark" ? o[900] : o[700],
           "& svg": {
-            color: e === "dark" ? o[900] : o[700]
+            color: r === "dark" ? o[900] : o[700]
           },
           "@media (hover: hover)": {
             "&:hover": {
-              backgroundColor: t.light
+              backgroundColor: a.light
             }
           },
           "&:active": {
             transform: "scale(0.9)",
-            backgroundColor: t.dark
+            backgroundColor: a.dark
           },
           "&:disabled": {
             backgroundColor: o[200],
@@ -122,19 +121,19 @@ const b = S.button`
         break;
       }
       Object.assign(i, {
-        backgroundColor: r.main,
-        color: e === "dark" ? o[900] : t.main,
+        backgroundColor: e.main,
+        color: r === "dark" ? o[900] : a.main,
         "& svg": {
-          color: e === "dark" ? o[900] : t.main
+          color: r === "dark" ? o[900] : a.main
         },
         "@media (hover: hover)": {
           "&:hover": {
-            backgroundColor: r.hover
+            backgroundColor: e.hover
           }
         },
         "&:active": {
           transform: "scale(0.9)",
-          backgroundColor: r.active
+          backgroundColor: e.active
         },
         "&:disabled": {
           backgroundColor: o[200],
@@ -147,49 +146,53 @@ const b = S.button`
   switch (f) {
     case "large":
       Object.assign(i, {
-        padding: `${d[300]} ${d[350]}`,
+        padding: `${t[300]} ${t[350]}`,
         borderRadius: h[300],
-        fontSize: a.fontSize,
-        lineHeight: a.lineHeight,
+        fontSize: c.fontSize,
+        lineHeight: c.lineHeight,
+        gap: t[200],
         "& svg": {
-          width: a.fontSize,
-          height: a.fontSize
+          width: `calc(${c.fontSize} + 4px)`,
+          height: `calc(${c.fontSize} + 4px)`
         }
       });
       break;
     case "small":
       Object.assign(i, {
-        padding: `${d[100]} ${d[150]}`,
+        padding: `${t[100]} ${t[150]}`,
         borderRadius: h[200],
-        fontSize: c.fontSize,
-        lineHeight: c.lineHeight,
+        fontSize: l.fontSize,
+        lineHeight: l.lineHeight,
+        gap: t[100],
         "& svg": {
-          width: c.fontSize,
-          height: c.fontSize
+          width: `calc(${l.fontSize} + 4px)`,
+          height: `calc(${l.fontSize} + 4px)`
         }
       });
       break;
     case "xSmall":
       Object.assign(i, {
-        padding: `${d[50]} ${d[100]}`,
+        padding: `${t[50]} ${t[100]}`,
         borderRadius: h[150],
-        fontSize: l.fontSize,
-        lineHeight: l.lineHeight,
+        fontSize: g.fontSize,
+        lineHeight: g.lineHeight,
+        gap: t[100],
         "& svg": {
-          width: l.fontSize,
-          height: l.fontSize
+          width: `calc(${g.fontSize} + 4px)`,
+          height: `calc(${g.fontSize} + 4px)`
         }
       });
       break;
     default:
       Object.assign(i, {
-        padding: `${d[200]} ${d[250]}`,
+        padding: `${t[200]} ${t[250]}`,
         borderRadius: h[250],
         fontSize: n.fontSize,
         lineHeight: n.lineHeight,
+        gap: t[150],
         "& svg": {
-          width: n.fontSize,
-          height: n.fontSize
+          width: `calc(${n.fontSize} + 4px)`,
+          height: `calc(${n.fontSize} + 4px)`
         }
       });
       break;
@@ -197,34 +200,34 @@ const b = S.button`
   return i;
 }}
 `;
-function w({
-  ref: e,
-  children: r,
-  variant: t = "filled",
+function $({
+  ref: r,
+  children: e,
+  variant: a = "filled",
   size: o = "medium",
-  color: g = "primary",
-  startIcon: a,
+  color: d = "primary",
+  startIcon: c,
   endIcon: n,
-  ...c
+  ...l
 }) {
-  return t === "text" ? /* @__PURE__ */ s(b, { ref: e, variant: "text", size: o, color: "secondary", ...c, children: [
-    a,
-    r,
+  return a === "text" ? /* @__PURE__ */ s(b, { ref: r, variant: "text", size: o, color: "secondary", ...l, children: [
+    c,
+    e,
     n
-  ] }) : t === "ghost" ? /* @__PURE__ */ s(b, { ref: e, variant: "ghost", size: o, color: "primary", ...c, children: [
-    a,
-    r,
+  ] }) : a === "ghost" ? /* @__PURE__ */ s(b, { ref: r, variant: "ghost", size: o, color: "primary", ...l, children: [
+    c,
+    e,
     n
-  ] }) : t === "gradient" ? /* @__PURE__ */ s(b, { ref: e, variant: "gradient", size: o, color: "primary", ...c, children: [
-    a,
-    r,
+  ] }) : a === "gradient" ? /* @__PURE__ */ s(b, { ref: r, variant: "gradient", size: o, color: "primary", ...l, children: [
+    c,
+    e,
     n
-  ] }) : /* @__PURE__ */ s(b, { ref: e, variant: t, size: o, color: g, ...c, children: [
-    a,
-    r,
+  ] }) : /* @__PURE__ */ s(b, { ref: r, variant: a, size: o, color: d, ...l, children: [
+    c,
+    e,
     n
   ] });
 }
 export {
-  w as default
+  $ as default
 };

package/dist/components/Dialog/Dialog.d.ts

@@ -1,3 +1,3 @@
 import { DialogProps } from './Dialog.typing';
-declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, maxWidth, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Dialog({ open, onClose, children, transitionDuration, onClick, style, maxWidth, disablePortal, ...props }: DialogProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Dialog;

package/dist/components/Dialog/Dialog.mjs

@@ -1,8 +1,8 @@
 import { jsx as s } from "@emotion/react/jsx-runtime";
-import { useState as $, useRef as p, useEffect as h } from "react";
-import g from "@emotion/styled";
-import y from "../Overlay/Overlay.mjs";
-const x = g.div`
+import { useState as p, useRef as h, useEffect as g } from "react";
+import y from "@emotion/styled";
+import x from "../Overlay/Overlay.mjs";
+const b = y.div`
   width: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
   max-width: ${({ maxWidth: e = "375px" }) => e};
   max-height: calc(100% - ${({ theme: { spacing: e } }) => e[800]});
@@ -22,7 +22,7 @@ const x = g.div`
       ${({ ease: e }) => e === "in" ? "ease-out" : "ease-in"},
     background-color 0.2s;
 `;
-function O({
+function A({
   open: e,
   onClose: n,
   children: m,
@@ -30,12 +30,13 @@ function O({
   onClick: o,
   style: l,
   maxWidth: c = "375px",
-  ...f
+  disablePortal: f,
+  ...u
 }) {
-  const [r, i] = $(!1), u = p(null), d = (t) => {
+  const [r, i] = p(!1), d = h(null), $ = (t) => {
     t.stopPropagation(), typeof o == "function" && o(t);
   };
-  return h(() => {
+  return g(() => {
     let t;
     return e ? t = requestAnimationFrame(() => {
       i(!0);
@@ -43,21 +44,22 @@ function O({
       t && cancelAnimationFrame(t);
     };
   }, [e]), /* @__PURE__ */ s(
-    y,
+    x,
     {
-      ref: u,
+      ref: d,
       open: e,
       onClose: n,
       transitionDuration: a,
       placement: "center-middle",
+      disablePortal: f,
       children: /* @__PURE__ */ s(
-        x,
+        b,
         {
           ease: e ? "in" : "out",
           transitionDuration: a,
           maxWidth: c,
-          onClick: d,
-          ...f,
+          onClick: $,
+          ...u,
           style: {
             transform: `scale(${r ? 1 : 0.9})`,
             opacity: r ? 1 : 0,
@@ -70,5 +72,5 @@ function O({
   );
 }
 export {
-  O as default
+  A as default
 };

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

@@ -5,4 +5,5 @@ export interface DialogProps extends ComponentPropsWithRef<"div">, Pick<UtilityP
     onClose?: () => void;
     transitionDuration?: number;
     maxWidth?: string;
+    disablePortal?: boolean;
 }

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

@@ -1,3 +1,3 @@
 import { OverlayProps } from './Overlay.typing';
-declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, onClick, ...props }: OverlayProps): import('react').ReactPortal | null;
+declare function Overlay({ children, open, onClose, transitionDuration, placement, style, ref, onClick, disablePortal, ...props }: OverlayProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
 export default Overlay;