@shiflo/ui 0.0.5 → 0.0.7

package/dist/components/Box/Box.mjs

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

package/dist/components/Button/Button.mjs

@@ -4,7 +4,7 @@ const h = u.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: ${({ theme: { spacing: t } }) => t[100]};
+  gap: ${({ theme: { spacing: r } }) => r[100]};
   font-weight: 500;
   transition:
     transform 0.2s ease-out,
@@ -20,20 +20,20 @@ const h = u.button`
 
   ${({
   theme: {
-    mode: t,
-    palette: { primary: e, secondary: r, neutral: o },
-    typography: { body1: d, body2: a, small1: n, small2: s },
-    spacing: c,
+    mode: r,
+    palette: { primary: e, secondary: t, neutral: o },
+    typography: { body1: d, body2: i, small1: n, small2: c },
+    spacing: s,
     radius: l
   },
   variant: b,
-  size: f,
-  color: k
+  size: k,
+  color: f
 }) => {
-  const i = {};
+  const a = {};
   switch (b) {
     case "ghost":
-      Object.assign(i, {
+      Object.assign(a, {
         backgroundColor: e.alpha[10],
         color: e.main,
         "& svg": {
@@ -42,28 +42,38 @@ const h = u.button`
         "&:hover": {
           backgroundColor: e.alpha[20]
         },
+        "@media (pointer: coarse), (any-pointer: coarse)": {
+          "&:hover": {
+            backgroundColor: e.alpha[10]
+          }
+        },
         "&:active": {
           transform: "scale(0.9)",
           backgroundColor: e.alpha[30]
         },
         "&:disabled": {
-          backgroundColor: t === "dark" ? e.alpha[10] : e.alpha[5],
+          backgroundColor: r === "dark" ? e.alpha[10] : e.alpha[5],
           color: o[500],
           cursor: "not-allowed"
         }
       });
       break;
     case "text":
-      Object.assign(i, {
+      Object.assign(a, {
         backgroundColor: "transparent",
-        color: t === "dark" ? o[800] : o[700],
+        color: r === "dark" ? o[800] : o[700],
         // 기본 텍스트 색상 (더 강조된 중립색)
         "& svg": {
-          color: t === "dark" ? o[800] : o[700]
+          color: r === "dark" ? o[800] : o[700]
         },
         "&:hover": {
           backgroundColor: o[200]
         },
+        "@media (pointer: coarse), (any-pointer: coarse)": {
+          "&:hover": {
+            backgroundColor: "transparent"
+          }
+        },
         "&:active": {
           transform: "scale(0.9)",
           backgroundColor: o[300]
@@ -77,19 +87,24 @@ const h = u.button`
       });
       break;
     default:
-      if (k === "secondary") {
-        Object.assign(i, {
-          backgroundColor: r.main,
-          color: t === "dark" ? o[900] : o[700],
+      if (f === "secondary") {
+        Object.assign(a, {
+          backgroundColor: t.main,
+          color: r === "dark" ? o[900] : o[700],
           "& svg": {
-            color: t === "dark" ? o[900] : o[700]
+            color: r === "dark" ? o[900] : o[700]
           },
           "&:hover": {
-            backgroundColor: r.light
+            backgroundColor: t.light
+          },
+          "@media (pointer: coarse), (any-pointer: coarse)": {
+            "&:hover": {
+              backgroundColor: t.main
+            }
           },
           "&:active": {
             transform: "scale(0.9)",
-            backgroundColor: r.dark
+            backgroundColor: t.dark
           },
           "&:disabled": {
             backgroundColor: o[200],
@@ -99,15 +114,20 @@ const h = u.button`
         });
         break;
       }
-      Object.assign(i, {
+      Object.assign(a, {
         backgroundColor: e.main,
-        color: t === "dark" ? o[900] : r.main,
+        color: r === "dark" ? o[900] : t.main,
         "& svg": {
-          color: t === "dark" ? o[900] : r.main
+          color: r === "dark" ? o[900] : t.main
         },
         "&:hover": {
           backgroundColor: e.hover
         },
+        "@media (pointer: coarse), (any-pointer: coarse)": {
+          "&:hover": {
+            backgroundColor: e.main
+          }
+        },
         "&:active": {
           transform: "scale(0.9)",
           backgroundColor: e.active
@@ -120,10 +140,10 @@ const h = u.button`
       });
       break;
   }
-  switch (f) {
+  switch (k) {
     case "large":
-      Object.assign(i, {
-        padding: `${c[300]} ${c[350]}`,
+      Object.assign(a, {
+        padding: `${s[300]} ${s[350]}`,
         borderRadius: l[300],
         fontSize: d.fontSize,
         lineHeight: d.lineHeight,
@@ -134,8 +154,8 @@ const h = u.button`
       });
       break;
     case "small":
-      Object.assign(i, {
-        padding: `${c[100]} ${c[150]}`,
+      Object.assign(a, {
+        padding: `${s[100]} ${s[150]}`,
         borderRadius: l[200],
         fontSize: n.fontSize,
         lineHeight: n.lineHeight,
@@ -146,57 +166,57 @@ const h = u.button`
       });
       break;
     case "xSmall":
-      Object.assign(i, {
-        padding: `${c[50]} ${c[100]}`,
+      Object.assign(a, {
+        padding: `${s[50]} ${s[100]}`,
         borderRadius: l[150],
-        fontSize: s.fontSize,
-        lineHeight: s.lineHeight,
+        fontSize: c.fontSize,
+        lineHeight: c.lineHeight,
         "& svg": {
-          width: s.fontSize,
-          height: s.fontSize
+          width: c.fontSize,
+          height: c.fontSize
         }
       });
       break;
     default:
-      Object.assign(i, {
-        padding: `${c[200]} ${c[250]}`,
+      Object.assign(a, {
+        padding: `${s[200]} ${s[250]}`,
         borderRadius: l[250],
-        fontSize: a.fontSize,
-        lineHeight: a.lineHeight,
+        fontSize: i.fontSize,
+        lineHeight: i.lineHeight,
         "& svg": {
-          width: a.fontSize,
-          height: a.fontSize
+          width: i.fontSize,
+          height: i.fontSize
         }
       });
       break;
   }
-  return i;
+  return a;
 }}
 `;
-function C({
-  ref: t,
+function S({
+  ref: r,
   children: e,
-  variant: r = "filled",
+  variant: t = "filled",
   size: o = "medium",
   color: d = "primary",
-  startIcon: a,
+  startIcon: i,
   endIcon: n,
-  ...s
+  ...c
 }) {
-  return r === "text" ? /* @__PURE__ */ g(h, { ref: t, variant: "text", size: o, color: "secondary", ...s, children: [
-    a,
+  return t === "text" ? /* @__PURE__ */ g(h, { ref: r, variant: "text", size: o, color: "secondary", ...c, children: [
+    i,
     e,
     n
-  ] }) : r === "ghost" ? /* @__PURE__ */ g(h, { ref: t, variant: "ghost", size: o, color: "primary", ...s, children: [
-    a,
+  ] }) : t === "ghost" ? /* @__PURE__ */ g(h, { ref: r, variant: "ghost", size: o, color: "primary", ...c, children: [
+    i,
     e,
     n
-  ] }) : /* @__PURE__ */ g(h, { ref: t, variant: r, size: o, color: d, ...s, children: [
-    a,
+  ] }) : /* @__PURE__ */ g(h, { ref: r, variant: t, size: o, color: d, ...c, children: [
+    i,
     e,
     n
   ] });
 }
 export {
-  C as default
+  S as default
 };

package/dist/components/Typography/Typography.mjs

@@ -1,8 +1,8 @@
-import { jsx as p } from "react/jsx-runtime";
-import b from "basic-styled";
-import f from "../../utils/getUtilityProps.mjs";
-import i from "../../utils/getValueByPath.mjs";
-const h = b.div`
+import { jsx as h } from "react/jsx-runtime";
+import p from "basic-styled";
+import b from "../../utils/getUtilityProps.mjs";
+import r from "../../utils/getValueByPath.mjs";
+const f = p.div`
   transition:
     font-size 0.2s,
     line-height 0.2s,
@@ -11,19 +11,23 @@ const h = b.div`
     border-color 0.2s,
     color 0.2s;
 
-  ${({ theme: { typography: o, palette: e }, variant: s, color: n, fontWeight: l, borderColor: r, ...d }) => {
-  const { fontSize: a, lineHeight: c } = o[s || "body2"], t = {
+  ${({ theme: { typography: o, palette: t }, variant: s, color: n, fontWeight: l, borderColor: i, ...d }) => {
+  const { fontSize: a, lineHeight: c } = o[s || "body2"], e = {
     fontSize: a,
     lineHeight: c,
     fontWeight: l
   };
-  return Object.assign(t, f(d)), r && Object.assign(t, {
-    borderColor: i(e, r)
-  }), Object.assign(t, {
-    color: i(e, n)
-  }), t;
+  return Object.assign(e, b(d)), i && Object.assign(e, {
+    borderColor: r(t, i) || "inherit"
+  }), Object.assign(e, {
+    color: r(t, n) || "inherit"
+  }), e;
 }};
 
+  ${({ textAlign: o }) => o ? {
+  textAlign: o
+} : {}};
+
   ${({ noWrap: o }) => o ? {
   whiteSpace: "nowrap",
   overflow: "hidden",
@@ -36,7 +40,7 @@ const h = b.div`
   "-webkit-line-clamp": o,
   "-webkit-box-orient": "vertical"
 } : {}};
-`, u = (o) => /* @__PURE__ */ p(h, { ...o });
+`, u = (o) => /* @__PURE__ */ h(f, { ...o });
 export {
   u as default
 };

package/package.json

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