@shiflo/ui 0.1.4 → 0.1.6

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

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

package/dist/components/BottomSheet/BottomSheet.mjs

@@ -1,9 +1,9 @@
 import { jsx as o, jsxs as H } from "@emotion/react/jsx-runtime";
 import { useState as R, useRef as a, useImperativeHandle as S, useEffect as j } from "react";
+import D from "../Overlay/Overlay.mjs";
 import n from "@emotion/styled";
-import { motion as D } from "motion/react";
-import I from "../Overlay/Overlay.mjs";
-const O = n(D.div)`
+import { motion as I } from "motion/react";
+const O = n(I.div)`
   width: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
   max-width: ${({ maxWidth: t = "375px" }) => t};
   max-height: calc(100% - ${({ theme: { spacing: t } }) => t[800]});
@@ -30,7 +30,7 @@ const O = n(D.div)`
     palette: { common: t }
   }
 }) => t.background};
-  transition: background-color 0.2s;
+  transition: background-color 0.3s;
 `, F = n.div`
   width: 24px;
   height: 4px;
@@ -40,13 +40,13 @@ const O = n(D.div)`
     palette: { border: t }
   }
 }) => t.main};
-  transition: background-color 0.2s;
+  transition: background-color 0.3s;
 `;
 function z({
   open: t,
   onClose: r,
   children: m,
-  transitionDuration: i = 0.2,
+  transitionDuration: i = 0.3,
   maxWidth: d = "375px",
   onClick: c,
   ref: f,
@@ -72,7 +72,7 @@ function z({
       e && cancelAnimationFrame(e);
     };
   }, [t]), /* @__PURE__ */ o(
-    I,
+    D,
     {
       ref: $,
       open: t,
@@ -86,7 +86,7 @@ function z({
           ref: l,
           drag: "y",
           dragConstraints: { top: 0, bottom: 0 },
-          dragElastic: { top: 0, bottom: 0.2 },
+          dragElastic: { top: 0, bottom: 0.3 },
           dragMomentum: !1,
           onDragEnd: k,
           maxWidth: d,

package/dist/components/Box/Box.mjs

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

package/dist/components/Button/Button.mjs

@@ -7,15 +7,15 @@ const m = v(f.button)`
   justify-content: center;
   gap: ${({ theme: { spacing: t } }) => t[100]};
   font-weight: 500;
-  transition: all 0.2s;
+  transition: all 0.3s;
 
   ${({ theme: t, variant: l, size: d, color: c }) => {
   const {
     mode: a,
     palette: { primary: e, secondary: r, neutral: o, gradient: p },
-    typography: { body1: s, body2: g, small1: h, small2: u },
+    typography: { body1: s, body2: g, small1: h, small2: b },
     spacing: n,
-    radius: b
+    radius: u
   } = t, i = {};
   switch (l) {
     case "ghost":
@@ -138,7 +138,7 @@ const m = v(f.button)`
     case "large":
       Object.assign(i, {
         padding: `${n[300]} ${n[350]}`,
-        borderRadius: b[300],
+        borderRadius: u[300],
         fontSize: s.fontSize,
         lineHeight: s.lineHeight,
         "& svg": {
@@ -150,7 +150,7 @@ const m = v(f.button)`
     case "small":
       Object.assign(i, {
         padding: `${n[100]} ${n[150]}`,
-        borderRadius: b[200],
+        borderRadius: u[200],
         fontSize: h.fontSize,
         lineHeight: h.lineHeight,
         "& svg": {
@@ -162,19 +162,19 @@ const m = v(f.button)`
     case "xSmall":
       Object.assign(i, {
         padding: `${n[50]} ${n[100]}`,
-        borderRadius: b[150],
-        fontSize: u.fontSize,
-        lineHeight: u.lineHeight,
+        borderRadius: u[150],
+        fontSize: b.fontSize,
+        lineHeight: b.lineHeight,
         "& svg": {
-          width: u.fontSize,
-          height: u.fontSize
+          width: b.fontSize,
+          height: b.fontSize
         }
       });
       break;
     default:
       Object.assign(i, {
         padding: `${n[200]} ${n[250]}`,
-        borderRadius: b[250],
+        borderRadius: u[250],
         fontSize: g.fontSize,
         lineHeight: g.lineHeight,
         "& svg": {
@@ -204,14 +204,13 @@ function C({
       variant: "text",
       size: c,
       color: "secondary",
-      layout: !0,
       whileHover: {
         scale: 1.02
       },
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        duration: 0.2,
+        duration: 0.3,
         bounce: 0.2
       },
       ...o,
@@ -228,14 +227,13 @@ function C({
       variant: "ghost",
       size: c,
       color: "primary",
-      layout: !0,
       whileHover: {
         scale: 1.02
       },
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        duration: 0.2,
+        duration: 0.3,
         bounce: 0.2
       },
       ...o,
@@ -252,14 +250,13 @@ function C({
       variant: "gradient",
       size: c,
       color: "primary",
-      layout: !0,
       whileHover: {
         scale: 1.02
       },
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        duration: 0.2,
+        duration: 0.3,
         bounce: 0.2
       },
       ...o,
@@ -276,14 +273,13 @@ function C({
       variant: d,
       size: c,
       color: a,
-      layout: !0,
       whileHover: {
         scale: 1.02
       },
       whileTap: { scale: 0.98 },
       transition: {
         type: "spring",
-        duration: 0.2,
+        duration: 0.3,
         bounce: 0.2
       },
       ...o,

package/dist/components/Dialog/Dialog.mjs

@@ -21,7 +21,7 @@ function O({
   open: e,
   onClose: c,
   children: l,
-  transitionDuration: a = 0.2,
+  transitionDuration: a = 0.3,
   onClick: o,
   style: $,
   maxWidth: n = "375px",

package/dist/components/Icon/Icon.mjs

@@ -5,9 +5,9 @@ import c from "@emotion/styled";
 import d from "../../utils/getValueByPath.mjs";
 const f = c.svg`
   transition:
-    width 0.2s,
-    height 0.2s,
-    color 0.2s;
+    width 0.3s,
+    height 0.3s,
+    color 0.3s;
 
   width: ${({ width: t }) => `${t || 24}px`};
   height: ${({ height: t }) => `${t || 24}px`};

package/dist/components/Overlay/Overlay.mjs

@@ -92,7 +92,7 @@ function P({
   children: o,
   open: t,
   onClose: d,
-  transitionDuration: s = 0.2,
+  transitionDuration: s = 0.3,
   placement: p,
   ref: I,
   onClick: g,

package/dist/components/Snackbar/Snackbar.mjs

@@ -6,7 +6,7 @@ import { motion as k } from "motion/react";
 const A = n(k.div)`
   position: fixed;
   left: 50%;
-  bottom: ${({ theme: { spacing: e } }) => `calc(${e[800]} + var(--safe-area-inset-bottom, 0px))`};
+  bottom: ${({ theme: { spacing: e }, bottom: t }) => `calc(${t || e[800]} + var(--safe-area-inset-bottom, 0px))`};
   display: flex;
   align-items: center;
   gap: ${({ theme: { spacing: e } }) => e[400]};
@@ -47,7 +47,7 @@ function E({
   children: e,
   open: t,
   onClose: c,
-  transitionDuration: r = 0.2,
+  transitionDuration: r = 0.3,
   style: F,
   ref: I,
   startIcon: m,

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

@@ -9,4 +9,5 @@ export interface SnackbarProps extends PropsWithChildren<HTMLMotionProps<"div">>
     maxWidth?: string;
     autoHideDuration?: number;
     disableAutoHide?: boolean;
+    bottom?: string;
 }

package/dist/components/Switch/Switch.mjs

@@ -7,7 +7,7 @@ const d = s(l.button)`
   align-items: center;
   padding: 0 ${({ theme: { spacing: t } }) => t[100]};
   border-radius: 9999px;
-  transition: background-color 0.2s;
+  transition: background-color 0.3s;
   cursor: pointer;
 
   ${({ theme: { palette: t }, checked: i, disabled: r, size: a }) => {
@@ -101,7 +101,6 @@ function x({
       onClick: (o) => {
         !i && typeof a == "function" && a(o, !t), typeof e == "function" && e(o);
       },
-      layout: !0,
       style: {
         justifyContent: t ? "flex-end" : "flex-start"
       },

package/dist/components/Tag/Tag.mjs

@@ -1,74 +1,35 @@
-import { jsx as l } from "@emotion/react/jsx-runtime";
-import g from "@emotion/styled";
-import { motion as b } from "motion/react";
-const k = g(b.span)`
-  transition: all 0.2s;
+import { jsx as n } from "@emotion/react/jsx-runtime";
+import a from "@emotion/styled";
+import { motion as m } from "motion/react";
+import o from "../../utils/getValueByPath.mjs";
+const s = a(m.span)`
+  transition: all 0.3s;
   cursor: default;
 
-  padding: ${({ theme: { spacing: r } }) => r[100]};
-  border-radius: ${({ theme: { radius: r } }) => r[200]};
+  padding: ${({ theme: { spacing: t } }) => t[100]};
+  border-radius: ${({ theme: { radius: t } }) => t[200]};
 
-  ${({
-  theme: {
-    mode: r,
-    palette: {
-      primary: e,
-      secondary: o,
-      text: i,
-      feedback: { warning: n, error: t, info: s, success: c }
-    }
-  },
-  color: m
-}) => {
-  const a = {};
-  switch (m) {
-    case "warning":
-      Object.assign(a, {
-        backgroundColor: n.main,
-        color: r === "dark" ? o.main : i.primary
-      });
-      break;
-    case "error":
-      Object.assign(a, {
-        backgroundColor: t.main,
-        color: r === "dark" ? o.main : i.primary
-      });
-      break;
-    case "info":
-      Object.assign(a, {
-        backgroundColor: s.main,
-        color: r === "dark" ? o.main : i.primary
-      });
-      break;
-    case "success":
-      Object.assign(a, {
-        backgroundColor: c.main,
-        color: r === "dark" ? o.main : i.primary
-      });
-      break;
-    default:
-      Object.assign(a, {
-        backgroundColor: e.main,
-        color: o.main
-      });
-      break;
-  }
-  return a;
+  ${({ theme: { palette: t }, color: r, textColor: i }) => {
+  const e = {};
+  return Object.assign(e, {
+    backgroundColor: o(t, r) || "inherit",
+    color: o(t, i) || "inherit"
+  }), e;
 }}
 
   ${({
   theme: {
-    typography: { small2: r }
+    typography: { small2: t }
   }
 }) => ({
-  fontSize: r.fontSize,
+  fontSize: t.fontSize,
   fontWeight: 700,
-  lineHeight: r.lineHeight
+  lineHeight: t.lineHeight
 })};
 `;
-function f(r) {
-  return /* @__PURE__ */ l(k, { ...r });
+function l(t) {
+  return /* @__PURE__ */ n(s, { ...t });
 }
 export {
-  f as default
+  l as default
 };

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

@@ -1,5 +1,7 @@
-import { UtilityProps } from '../../typings/utility';
+import { ShifloTheme } from '../../theme/typing';
+import { RecursionPath, UtilityProps } from '../../typings/utility';
 import { HTMLMotionProps } from 'motion/react';
 export interface TagProps extends HTMLMotionProps<"span">, Pick<UtilityProps, "css"> {
-    color?: "primary" | "warning" | "error" | "info" | "success";
+    color?: RecursionPath<ShifloTheme["palette"]> | "inherit";
+    textColor?: RecursionPath<ShifloTheme["palette"]> | "inherit";
 }

package/dist/components/TextField/TextField.mjs

@@ -8,7 +8,7 @@ const b = l(c.div)`
   gap: ${({ theme: { spacing: e } }) => e[200]};
   border: 1px solid transparent;
   border-radius: ${({ theme: { radius: e } }) => e[200]};
-  transition: all 0.2s;
+  transition: all 0.3s;
   background-color: ${({
   theme: {
     palette: { common: e }
@@ -147,7 +147,7 @@ const b = l(c.div)`
   justify-content: center;
   white-space: nowrap;
 `;
-function y({
+function H({
   variant: e = "outlined",
   size: n = "medium",
   fullWidth: o,
@@ -167,7 +167,6 @@ function y({
       focused: g,
       fullWidth: o,
       disabled: t,
-      layout: !0,
       children: [
         r && /* @__PURE__ */ a(S, { children: r }),
         /* @__PURE__ */ a(w, { ...f, onFocus: (s) => {
@@ -181,5 +180,5 @@ function y({
   );
 }
 export {
-  y as default
+  H as default
 };

package/dist/components/Typography/Typography.mjs

@@ -1,18 +1,18 @@
-import { jsx as c } from "@emotion/react/jsx-runtime";
-import f from "@emotion/styled";
-import { motion as y } from "motion/react";
+import { jsx as f } from "@emotion/react/jsx-runtime";
+import y from "@emotion/styled";
+import { motion as c } from "motion/react";
 import d from "../../utils/getUtilityProps.mjs";
 import r from "../../utils/getValueByPath.mjs";
-const h = f(y.div)`
-  transition: all 0.2s;
+const h = y(c.div)`
+  transition: all 0.3s;
 
-  ${({ theme: { typography: t, palette: i }, variant: s, color: n, fontWeight: l, borderColor: e, ...a }) => {
+  ${({ theme: { typography: t, palette: i }, variant: s, color: n, fontWeight: a, borderColor: e, ...l }) => {
   const { fontSize: p, lineHeight: m } = t[s || "body2"], o = {
     fontSize: p,
     lineHeight: m,
-    fontWeight: l
+    fontWeight: a
   };
-  return Object.assign(o, d(a)), e && Object.assign(o, {
+  return Object.assign(o, d(l)), e && Object.assign(o, {
     borderColor: r(i, e) || "inherit"
   }), Object.assign(o, {
     color: r(i, n) || "inherit"
@@ -32,10 +32,10 @@ const h = f(y.div)`
   ${({ lineClamp: t }) => t ? {
   display: "-webkit-box",
   overflow: "hidden",
-  "-webkit-line-clamp": t,
-  "-webkit-box-orient": "vertical"
+  WebkitLineClamp: t,
+  WebkitBoxOrient: "vertical"
 } : {}};
-`, u = (t) => /* @__PURE__ */ c(h, { ...t });
+`, j = (t) => /* @__PURE__ */ f(h, { ...t });
 export {
-  u as default
+  j as default
 };

package/dist/theme/GlobalStyle.mjs

@@ -33,7 +33,7 @@ function l() {
           height: "100%",
           color: e.primary,
           backgroundColor: o.background,
-          transition: "background-color 0.2s, color 0.2s",
+          transition: "background-color 0.3s, color 0.3s",
           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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "files": [
     "dist"
@@ -51,14 +51,14 @@
     "prepublishOnly": "pnpm build"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.1",
+    "@chromatic-com/storybook": "^4.1.2",
     "@emotion/react": "^11.14.0",
     "@emotion/serialize": "^1.3.3",
     "@emotion/styled": "^11.14.1",
     "@eslint/js": "^9.22.0",
-    "@storybook/addon-docs": "^9.1.7",
-    "@storybook/addon-onboarding": "^9.1.7",
-    "@storybook/react-vite": "^9.1.7",
+    "@storybook/addon-docs": "^10.0.2",
+    "@storybook/addon-onboarding": "^10.0.2",
+    "@storybook/react-vite": "^10.0.2",
     "@types/node": "^24.5.2",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
@@ -71,14 +71,14 @@
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "^9.1.7",
+    "eslint-plugin-storybook": "^10.0.2",
     "glob": "^11.0.1",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.3",
     "motion": "^12.23.12",
     "prettier": "^3.5.3",
-    "storybook": "^9.1.7",
+    "storybook": "^10.0.2",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.26.0",
     "vite": "^7.1.6",