@shiflo/ui 0.0.6 → 0.0.8

package/dist/components/Button/Button.mjs

@@ -1,10 +1,10 @@
 import { jsxs as g } from "react/jsx-runtime";
-import u from "basic-styled";
-const h = u.button`
+import v from "basic-styled";
+const h = v.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,18 +18,12 @@ 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: c, body2: a, small1: n, small2: d },
+    spacing: s,
     radius: l
   },
   variant: b,
@@ -45,15 +39,17 @@ const h = u.button`
         "& svg": {
           color: e.main
         },
-        "&:hover": {
-          backgroundColor: e.alpha[20]
+        "@media (hover: hover)": {
+          "&:hover": {
+            backgroundColor: e.alpha[20]
+          }
         },
         "&: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"
         }
@@ -62,13 +58,15 @@ const h = u.button`
     case "text":
       Object.assign(i, {
         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 (hover: hover)": {
+          "&:hover": {
+            backgroundColor: o[200]
+          }
         },
         "&:active": {
           transform: "scale(0.9)",
@@ -85,17 +83,19 @@ const h = u.button`
     default:
       if (k === "secondary") {
         Object.assign(i, {
-          backgroundColor: r.main,
-          color: t === "dark" ? o[900] : o[700],
+          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
+          "@media (hover: hover)": {
+            "&:hover": {
+              backgroundColor: t.light
+            }
           },
           "&:active": {
             transform: "scale(0.9)",
-            backgroundColor: r.dark
+            backgroundColor: t.dark
           },
           "&:disabled": {
             backgroundColor: o[200],
@@ -107,12 +107,14 @@ const h = u.button`
       }
       Object.assign(i, {
         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 (hover: hover)": {
+          "&:hover": {
+            backgroundColor: e.hover
+          }
         },
         "&:active": {
           transform: "scale(0.9)",
@@ -129,49 +131,49 @@ const h = u.button`
   switch (f) {
     case "large":
       Object.assign(i, {
-        padding: `${c[300]} ${c[350]}`,
+        padding: `${s[300]} ${s[350]}`,
         borderRadius: l[300],
-        fontSize: d.fontSize,
-        lineHeight: d.lineHeight,
+        fontSize: c.fontSize,
+        lineHeight: c.lineHeight,
         "& svg": {
-          width: d.fontSize,
-          height: d.fontSize
+          width: c.fontSize,
+          height: c.fontSize
         }
       });
       break;
     case "small":
       Object.assign(i, {
-        padding: `${c[100]} ${c[150]}`,
+        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]}`,
+        padding: `${s[50]} ${s[100]}`,
         borderRadius: l[150],
-        fontSize: s.fontSize,
-        lineHeight: s.lineHeight,
+        fontSize: d.fontSize,
+        lineHeight: d.lineHeight,
         "& svg": {
-          width: s.fontSize,
-          height: s.fontSize
+          width: d.fontSize,
+          height: d.fontSize
         }
       });
       break;
     default:
       Object.assign(i, {
-        padding: `${c[200]} ${c[250]}`,
+        padding: `${s[200]} ${s[250]}`,
         borderRadius: l[250],
-        fontSize: n.fontSize,
-        lineHeight: n.lineHeight,
+        fontSize: a.fontSize,
+        lineHeight: a.lineHeight,
         "& svg": {
-          width: n.fontSize,
-          height: n.fontSize
+          width: a.fontSize,
+          height: a.fontSize
         }
       });
       break;
@@ -180,27 +182,27 @@ const h = u.button`
 }}
 `;
 function C({
-  ref: t,
+  ref: r,
   children: e,
-  variant: r = "filled",
+  variant: t = "filled",
   size: o = "medium",
-  color: d = "primary",
-  startIcon: n,
-  endIcon: a,
-  ...s
+  color: c = "primary",
+  startIcon: a,
+  endIcon: n,
+  ...d
 }) {
-  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", ...d, children: [
+    a,
     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", ...d, children: [
+    a,
     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: c, ...d, children: [
+    a,
     e,
-    a
+    n
   ] });
 }
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "files": [
     "dist"
@@ -85,7 +85,7 @@
     "vite-plugin-svgr": "^4.3.0"
   },
   "peerDependencies": {
-    "basic-styled": ">=0.1.10",
+    "basic-styled": ">=0.1.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },