@shiflo/ui 0.0.6 → 0.0.7

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,
@@ -18,28 +18,22 @@ const h = u.button`
     color 0.2s;
   border: 1px solid transparent;
 
-  @media (pointer: coarse), (any-pointer: coarse) {
-    &:hover {
-      pointer-events: none;
-    }
-  }
-
   ${({
   theme: {
-    mode: t,
-    palette: { primary: e, secondary: r, neutral: o },
-    typography: { body1: d, body2: n, small1: a, 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": {
@@ -48,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]
@@ -83,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],
@@ -105,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
@@ -126,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,
@@ -140,69 +154,69 @@ 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: a.fontSize,
-        lineHeight: a.lineHeight,
+        fontSize: n.fontSize,
+        lineHeight: n.lineHeight,
         "& svg": {
-          width: a.fontSize,
-          height: a.fontSize
+          width: n.fontSize,
+          height: n.fontSize
         }
       });
       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: n.fontSize,
-        lineHeight: n.lineHeight,
+        fontSize: i.fontSize,
+        lineHeight: i.lineHeight,
         "& svg": {
-          width: n.fontSize,
-          height: n.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: n,
-  endIcon: a,
-  ...s
+  startIcon: i,
+  endIcon: n,
+  ...c
 }) {
-  return r === "text" ? /* @__PURE__ */ g(h, { ref: t, variant: "text", size: o, color: "secondary", ...s, children: [
-    n,
+  return t === "text" ? /* @__PURE__ */ g(h, { ref: r, variant: "text", size: o, color: "secondary", ...c, children: [
+    i,
     e,
-    a
-  ] }) : r === "ghost" ? /* @__PURE__ */ g(h, { ref: t, variant: "ghost", size: o, color: "primary", ...s, children: [
-    n,
+    n
+  ] }) : t === "ghost" ? /* @__PURE__ */ g(h, { ref: r, variant: "ghost", size: o, color: "primary", ...c, children: [
+    i,
     e,
-    a
-  ] }) : /* @__PURE__ */ g(h, { ref: t, variant: r, size: o, color: d, ...s, children: [
-    n,
+    n
+  ] }) : /* @__PURE__ */ g(h, { ref: r, variant: t, size: o, color: d, ...c, children: [
+    i,
     e,
-    a
+    n
   ] });
 }
 export {
-  C as default
+  S as default
 };

package/package.json

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