@shiflo/ui 0.2.1 → 0.2.4

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/components/Snackbar/Snackbar.mjs

@@ -1,8 +1,8 @@
-import { jsxs as z, jsx as o } from "@emotion/react/jsx-runtime";
-import { useState as $, useRef as b, useImperativeHandle as A, useLayoutEffect as I, useEffect as y } from "react";
+import { jsxs as z, jsx as s } from "@emotion/react/jsx-runtime";
+import { useState as x, useRef as b, useImperativeHandle as A, useLayoutEffect as I, useEffect as y } from "react";
 import { createPortal as L } from "react-dom";
-import i from "@emotion/styled";
-const R = i.div`
+import a from "@emotion/styled";
+const R = a.div`
   position: fixed;
   bottom: ${({ theme: { spacing: e }, bottom: t }) => `calc(${t || e[800]} + var(--safe-area-inset-bottom, 0px))`};
   left: 50%;
@@ -26,9 +26,14 @@ const R = i.div`
       ${({ ease: e }) => e === "in" ? "ease-in" : "ease-out"},
     transform ${({ transitionDuration: e }) => `${e}ms`},
     background-color 0.2s;
-`, T = i.div`
+`, T = a.div`
   white-space: nowrap;
-`, j = i.div`
+  color: ${({
+  theme: {
+    palette: { common: e }
+  }
+}) => e.surface};
+`, j = a.div`
   flex-grow: 1;
   display: -webkit-box;
   overflow: hidden;
@@ -45,7 +50,7 @@ const R = i.div`
   lineHeight: t.lineHeight,
   color: e.surface
 })}
-`, F = i.div`
+`, F = a.div`
   white-space: nowrap;
 `;
 function N({
@@ -62,8 +67,8 @@ function N({
   disableAutoHide: u,
   ...k
 }) {
-  const [S, p] = $(!0), [n, h] = $(!1), a = b(null), s = b(null);
-  return A(w, () => a.current), I(() => {
+  const [S, p] = x(!0), [n, h] = x(!1), i = b(null), o = b(null);
+  return A(w, () => i.current), I(() => {
     let r;
     return t ? (p(!1), r = requestAnimationFrame(() => {
       h(!0);
@@ -71,24 +76,24 @@ function N({
       r && cancelAnimationFrame(r);
     };
   }, [t, l]), y(() => {
-    const r = a.current, x = (E) => {
+    const r = i.current, $ = (E) => {
       t || E.propertyName === "opacity" && p(!0);
     };
-    return r?.addEventListener("transitionend", x), () => {
-      r?.removeEventListener("transitionend", x);
+    return r?.addEventListener("transitionend", $), () => {
+      r?.removeEventListener("transitionend", $);
     };
   }, [t]), y(() => {
     if (!(u || !n))
-      return s.current = setTimeout(() => {
+      return o.current = setTimeout(() => {
         c?.();
       }, d), () => {
-        s.current && clearTimeout(s.current);
+        o.current && clearTimeout(o.current);
       };
   }, [u, d, n, c]), S ? null : L(
     /* @__PURE__ */ z(
       R,
       {
-        ref: a,
+        ref: i,
         transitionDuration: l,
         ease: t ? "in" : "out",
         maxWidth: g,
@@ -99,9 +104,9 @@ function N({
         },
         ...k,
         children: [
-          m && /* @__PURE__ */ o(T, { children: m }),
-          /* @__PURE__ */ o(j, { children: e }),
-          f && /* @__PURE__ */ o(F, { children: f })
+          m && /* @__PURE__ */ s(T, { children: m }),
+          /* @__PURE__ */ s(j, { children: e }),
+          f && /* @__PURE__ */ s(F, { children: f })
         ]
       }
     ),

package/dist/components/TextField/TextField.mjs

@@ -1,7 +1,7 @@
-import { jsxs as p, jsx as a } from "@emotion/react/jsx-runtime";
+import { jsxs as p, jsx as s } from "@emotion/react/jsx-runtime";
 import { useState as m } from "react";
 import l from "@emotion/styled";
-const b = l.div`
+const $ = l.div`
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e[200]};
@@ -53,8 +53,8 @@ const b = l.div`
         fontSize: n.fontSize,
         lineHeight: n.lineHeight,
         "& svg": {
-          width: n.fontSize,
-          height: n.fontSize
+          width: `calc(${n.fontSize} + 4px)`,
+          height: `calc(${n.fontSize} + 4px)`
         }
       });
       break;
@@ -64,8 +64,8 @@ const b = l.div`
         fontSize: t.fontSize,
         lineHeight: t.lineHeight,
         "& svg": {
-          width: t.fontSize,
-          height: t.fontSize
+          width: `calc(${t.fontSize} + 4px)`,
+          height: `calc(${t.fontSize} + 4px)`
         }
       });
       break;
@@ -75,8 +75,8 @@ const b = l.div`
         fontSize: o.fontSize,
         lineHeight: o.lineHeight,
         "& svg": {
-          width: o.fontSize,
-          height: o.fontSize
+          width: `calc(${o.fontSize} + 4px)`,
+          height: `calc(${o.fontSize} + 4px)`
         }
       });
       break;
@@ -118,7 +118,7 @@ const b = l.div`
   color: e[500],
   cursor: "not-allowed"
 } : {}};
-`, w = l.input`
+`, x = l.input`
   flex-grow: 1;
   border: none;
   outline: none;
@@ -135,12 +135,12 @@ const b = l.div`
   &:disabled {
     cursor: not-allowed;
   }
-`, S = l.div`
+`, b = l.div`
   display: flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-`, $ = l.div`
+`, w = l.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -153,14 +153,14 @@ function F({
   disabled: t,
   startIcon: r,
   endIcon: i,
-  onFocus: c,
+  onFocus: d,
   onBlur: h,
   css: u,
   ...f
 }) {
-  const [g, d] = m(!1);
+  const [g, c] = m(!1);
   return /* @__PURE__ */ p(
-    b,
+    $,
     {
       variant: e,
       size: n,
@@ -169,13 +169,13 @@ function F({
       disabled: t,
       css: u,
       children: [
-        r && /* @__PURE__ */ a(S, { children: r }),
-        /* @__PURE__ */ a(w, { ...f, onFocus: (s) => {
-          d(!0), c?.(s);
-        }, onBlur: (s) => {
-          d(!1), h?.(s);
+        r && /* @__PURE__ */ s(b, { children: r }),
+        /* @__PURE__ */ s(x, { ...f, onFocus: (a) => {
+          c(!0), d?.(a);
+        }, onBlur: (a) => {
+          c(!1), h?.(a);
         }, disabled: t }),
-        i && /* @__PURE__ */ a($, { children: i })
+        i && /* @__PURE__ */ s(w, { children: i })
       ]
     }
   );

package/dist/components/index.d.ts

@@ -2,7 +2,6 @@ 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';
@@ -13,11 +12,10 @@ 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 };
+export { Button, Box, Typography, TextField, Overlay, BottomSheet, Dialog, Snackbar, Switch, Tag };

package/dist/components/index.mjs

@@ -1,24 +1,22 @@
-import { default as a } from "./BottomSheet/BottomSheet.mjs";
+import { default as o } 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 m } from "./Overlay/Overlay.mjs";
+import { default as s } from "./Snackbar/Snackbar.mjs";
+import { default as h } 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";
+import { default as c } from "./Typography/Typography.mjs";
 export {
-  a as BottomSheet,
+  o as BottomSheet,
   r as Box,
   l as Button,
   x as Dialog,
-  m as Icon,
-  s as Overlay,
-  g as Snackbar,
-  i as Switch,
+  m as Overlay,
+  s as Snackbar,
+  h as Switch,
   y as Tag,
   S as TextField,
-  b as Typography
+  c as Typography
 };

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/dist/theme/typography.mjs

@@ -11,18 +11,18 @@ const e = {
   },
   heading3: {
     tag: "h3",
-    fontSize: "18px",
-    lineHeight: "24px"
+    fontSize: "20px",
+    lineHeight: "28px"
   },
   body1: {
     tag: "div",
     fontSize: "16px",
-    lineHeight: "20px"
+    lineHeight: "24px"
   },
   body2: {
     tag: "div",
     fontSize: "14px",
-    lineHeight: "18px"
+    lineHeight: "20px"
   },
   small1: {
     tag: "p",
@@ -31,8 +31,8 @@ const e = {
   },
   small2: {
     tag: "p",
-    fontSize: "10.5px",
-    lineHeight: "14px"
+    fontSize: "10px",
+    lineHeight: "16px"
   },
   small3: {
     tag: "p",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "type": "module",
   "files": [
     "dist"
@@ -76,6 +76,7 @@
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
+    "lucide-react": "^0.563.0",
     "prettier": "^3.5.3",
     "storybook": "^10.0.2",
     "typescript": "^5.7.3",
@@ -88,7 +89,8 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "lucide-react": "^0.563.0"
   },
   "lint-staged": {
     "*.{js,mjs,ts,jsx,tsx,mts,json,html}": "prettier --write",

package/dist/assets/icons/index.d.ts

@@ -1,2 +0,0 @@
-export * from './line';
-export * from './solid';

package/dist/assets/icons/index.mjs

@@ -1,48 +0,0 @@
-import { S as e } from "./line/calendar-line.svg-DHsuXoUL.js";
-import { S as a } from "./solid/calendar-days-solid.svg-CIj8vf6t.js";
-import { S as i } from "./solid/calendar-lines-solid.svg-D2qG_E7t.js";
-import { S as t } from "./solid/calendar-week-solid.svg-CVmrJtif.js";
-import { S as f } from "./solid/calendars-solid.svg-rClh_xBu.js";
-import { S as p } from "./solid/gear-solid.svg-C6vEx0Wx.js";
-import { S as n } from "./solid/grid-2-solid.svg-BRtzwK6Y.js";
-import { S as c } from "./solid/pen-to-square-solid.svg-DUdNcuTM.js";
-import { S as h } from "./solid/plus-solid.svg-piiaS3kO.js";
-import { S as L } from "./solid/rotate-right-solid.svg-CYW200XH.js";
-import { S as B } from "./solid/xmark-solid.svg-Ce8xHlZn.js";
-import { S as G } from "./solid/check-solid.svg-C41sTTzR.js";
-import { S as T } from "./solid/trash-solid.svg-iJSf_6Y3.js";
-import { S as q } from "./solid/minus-solid.svg-BBiGvc-2.js";
-import { S as w } from "./solid/briefcase-blank-solid.svg-6ppQL_Z4.js";
-import { S as z } from "./solid/chart-simple-horizontal-solid.svg-znTJSeQj.js";
-import { S as E } from "./solid/clock-desk-solid.svg-Dvm3Xip1.js";
-import { S as I } from "./solid/circle-check-solid.svg-D2Pv_oiO.js";
-import { S as W } from "./solid/arrow-left-solid.svg-C16XJbK9.js";
-import { S as b } from "./solid/circle-info-solid.svg-eMJtJJRm.js";
-import { S as F } from "./solid/circle-exclamation-solid.svg-CuZt_q4T.js";
-import { S as K } from "./solid/circle-plus-solid.svg-wYCF_uVS.js";
-import { S as O } from "./solid/chevron-left-solid.svg-CrKzZ71H.js";
-export {
-  W as ArrowLeftSolid,
-  w as BriefcaseBlankSolid,
-  a as CalendarDaysSolid,
-  e as CalendarLine,
-  i as CalendarLinesSolid,
-  t as CalendarWeekSolid,
-  f as CalendarsSolid,
-  z as ChartSimpleHorizontalSolid,
-  G as CheckSolid,
-  O as ChevronLeftSolid,
-  I as CircleCheckSolid,
-  F as CircleExclamationSolid,
-  b as CircleInfoSolid,
-  K as CirclePlusSolid,
-  E as ClockDeskSolid,
-  p as GearSolid,
-  n as Grid2Solid,
-  q as MinusSolid,
-  c as PenToSquareSolid,
-  h as PlusSolid,
-  L as RotateRightSolid,
-  T as TrashSolid,
-  B as XmarkSolid
-};