@shiflo/ui 0.2.1 → 0.2.3

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/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;

package/dist/components/Overlay/Overlay.mjs

@@ -1,13 +1,13 @@
-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`
+import { jsxs as p, jsx as s } from "@emotion/react/jsx-runtime";
+import { useState as y, useRef as C, useImperativeHandle as I, useLayoutEffect as w, useEffect as L } from "react";
+import { createPortal as A } from "react-dom";
+import o from "@emotion/styled";
+const g = o.div`
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1;
-`, C = s.div`
+`, h = o.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -15,135 +15,149 @@ const w = s.div`
   height: 100%;
   background-color: ${({
   theme: {
-    palette: { common: e }
+    palette: { common: t }
   }
-}) => e.overlay};
+}) => t.overlay};
   transition:
-    opacity ${({ transitionDuration: e }) => `${e}ms`}
-      ${({ ease: e }) => e === "in" ? "ease-in" : "ease-out"},
+    opacity ${({ transitionDuration: t }) => `${t}ms`}
+      ${({ ease: t }) => t === "in" ? "ease-in" : "ease-out"},
     background-color 0.2s;
-`, L = s.div`
+`, O = o.div`
   position: fixed;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 
-  ${({ placement: e }) => {
-  const t = {};
-  switch (e) {
+  ${({ placement: t }) => {
+  const e = {};
+  switch (t) {
     case "top-left":
-      Object.assign(t, {
+      Object.assign(e, {
         top: 0,
         left: 0
       });
       break;
     case "top-right":
-      Object.assign(t, {
+      Object.assign(e, {
         top: 0,
         right: 0
       });
       break;
     case "bottom-left":
-      Object.assign(t, {
+      Object.assign(e, {
         bottom: 0,
         left: 0
       });
       break;
     case "bottom-right":
-      Object.assign(t, {
+      Object.assign(e, {
         bottom: 0,
         right: 0
       });
       break;
     case "center-top":
-      Object.assign(t, {
+      Object.assign(e, {
         top: 0,
         left: "50%",
         transform: "translate3d(-50%, 0, 0)"
       });
       break;
     case "center-bottom":
-      Object.assign(t, {
+      Object.assign(e, {
         bottom: 0,
         left: "50%",
         transform: "translate3d(-50%, 0, 0)"
       });
       break;
     case "center-middle":
-      Object.assign(t, {
+      Object.assign(e, {
         top: "50%",
         left: "50%",
         transform: "translate3d(-50%, -50%, 0)"
       });
       break;
     case "center-left":
-      Object.assign(t, {
+      Object.assign(e, {
         top: "50%",
         left: 0,
         transform: "translate3d(0, -50%, 0)"
       });
       break;
     case "center-right":
-      Object.assign(t, {
+      Object.assign(e, {
         top: "50%",
         right: 0,
         transform: "translate3d(0, -50%, 0)"
       });
       break;
   }
-  return t;
+  return e;
 }}
 `;
-function U({
-  children: e,
-  open: t,
-  onClose: d,
+function q({
+  children: t,
+  open: e,
+  onClose: k,
   transitionDuration: a = 200,
-  placement: m,
-  style: u,
-  ref: b,
-  onClick: p,
-  ...g
+  placement: i,
+  style: c,
+  ref: v,
+  onClick: j,
+  disablePortal: x = !0,
+  ...l
 }) {
-  const [y, o] = f(!0), [h, i] = f(!1), n = j(null), O = (r) => {
-    d?.(), p?.(r);
+  const [E, f] = y(!0), [d, m] = y(!1), n = C(null), u = (r) => {
+    k?.(), j?.(r);
   };
-  return x(b, () => n.current), E(() => {
+  return I(v, () => n.current), w(() => {
     let r;
-    return t ? (o(!1), r = requestAnimationFrame(() => {
-      i(!0);
-    })) : i(!1), () => {
+    return e ? (f(!1), r = requestAnimationFrame(() => {
+      m(!0);
+    })) : m(!1), () => {
       r && cancelAnimationFrame(r);
     };
-  }, [t, a]), $(() => {
-    const r = n.current, c = (v) => {
-      t || v.propertyName === "opacity" && o(!0);
+  }, [e, a]), L(() => {
+    const r = n.current, b = ($) => {
+      e || $.propertyName === "opacity" && f(!0);
     };
-    return r?.addEventListener("transitionend", c), () => {
-      r?.removeEventListener("transitionend", c);
+    return r?.addEventListener("transitionend", b), () => {
+      r?.removeEventListener("transitionend", b);
     };
-  }, [t]), y ? null : I(
-    /* @__PURE__ */ k(w, { children: [
-      /* @__PURE__ */ l(
-        C,
+  }, [e]), E ? null : x ? /* @__PURE__ */ p(g, { children: [
+    /* @__PURE__ */ s(
+      h,
+      {
+        ref: n,
+        transitionDuration: a,
+        ease: e ? "in" : "out",
+        onClick: u,
+        style: { opacity: d ? 1 : 0, ...c },
+        ...l
+      }
+    ),
+    /* @__PURE__ */ s(O, { placement: i, children: t })
+  ] }) : A(
+    /* @__PURE__ */ p(g, { children: [
+      /* @__PURE__ */ s(
+        h,
         {
           ref: n,
           transitionDuration: a,
-          ease: t ? "in" : "out",
-          onClick: O,
+          ease: e ? "in" : "out",
+          onClick: u,
           style: {
-            opacity: h ? 1 : 0,
-            ...u
+            opacity: d ? 1 : 0,
+            ...c
           },
-          ...g
+          ...l
         }
       ),
-      /* @__PURE__ */ l(L, { placement: m, children: e })
+      /* @__PURE__ */ s(O, { placement: i, children: t })
     ] }),
     document.body
   );
 }
 export {
-  U as default
+  q as default
 };

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

@@ -6,4 +6,5 @@ export interface OverlayProps extends ComponentPropsWithRef<"div">, Pick<Utility
     transitionDuration?: number;
     placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-top" | "center-bottom" | "center-middle" | "center-left" | "center-right";
     hideOverlay?: boolean;
+    disablePortal?: boolean;
 }

package/dist/theme/GlobalStyle.mjs

@@ -34,6 +34,7 @@ function l() {
           color: e.primary,
           backgroundColor: o.background,
           transition: "background-color 0.3s, color 0.3s",
+          fontSmooth: "antialiased",
           fontFamily: `Spoqa Han Sans Neo, -apple-system, BlinkMacSystemFont, Helvetica Neue,
             Apple SD Gothic Neo, Malgun Gothic, 맑은 고딕, 나눔고딕, Nanum Gothic,
             Noto Sans KR, Noto Sans CJK KR, arial, 돋움, Dotum, Tahoma, Geneva, sans-serif`

package/dist/theme/dark.mjs

@@ -1,7 +1,7 @@
 import a from "./radius.mjs";
 import r from "./spacing.mjs";
 import i from "./typography.mjs";
-const e = {
+const t = {
   mode: "dark",
   palette: {
     primary: {
@@ -65,9 +65,9 @@ const e = {
         dark: "#CCB77A"
       },
       error: {
-        light: "#8C4F4F",
-        main: "#F5A3A3",
-        dark: "#C88585"
+        light: "#7F1D1D",
+        main: "#EF4444",
+        dark: "#C53030"
       },
       info: {
         light: "#446E9E",
@@ -99,5 +99,5 @@ const e = {
   radius: a
 };
 export {
-  e as default
+  t as default
 };

package/dist/theme/light.mjs

@@ -65,9 +65,9 @@ const e = {
         dark: "#B89A4F"
       },
       error: {
-        light: "#FBC7C7",
-        main: "#D67C7C",
-        dark: "#B85C5C"
+        light: "#FFD6D6",
+        main: "#DC2626",
+        dark: "#B91C1C"
       },
       info: {
         light: "#C7E0FA",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "files": [
     "dist"