@shiflo/ui 0.0.7 → 0.0.9

package/dist/components/Button/Button.mjs

@@ -1,6 +1,6 @@
 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;
@@ -22,29 +22,26 @@ const h = u.button`
   theme: {
     mode: r,
     palette: { primary: e, secondary: t, neutral: o },
-    typography: { body1: d, body2: i, small1: n, small2: c },
+    typography: { body1: c, body2: a, small1: n, small2: d },
     spacing: s,
     radius: l
   },
   variant: b,
-  size: k,
-  color: f
+  size: f,
+  color: k
 }) => {
-  const a = {};
+  const i = {};
   switch (b) {
     case "ghost":
-      Object.assign(a, {
+      Object.assign(i, {
         backgroundColor: e.alpha[10],
         color: e.main,
         "& svg": {
           color: e.main
         },
-        "&:hover": {
-          backgroundColor: e.alpha[20]
-        },
-        "@media (pointer: coarse), (any-pointer: coarse)": {
+        "@media (hover: hover)": {
           "&:hover": {
-            backgroundColor: e.alpha[10]
+            backgroundColor: e.alpha[20]
           }
         },
         "&:active": {
@@ -59,19 +56,16 @@ const h = u.button`
       });
       break;
     case "text":
-      Object.assign(a, {
+      Object.assign(i, {
         backgroundColor: "transparent",
         color: r === "dark" ? o[800] : o[700],
         // 기본 텍스트 색상 (더 강조된 중립색)
         "& svg": {
           color: r === "dark" ? o[800] : o[700]
         },
-        "&:hover": {
-          backgroundColor: o[200]
-        },
-        "@media (pointer: coarse), (any-pointer: coarse)": {
+        "@media (hover: hover)": {
           "&:hover": {
-            backgroundColor: "transparent"
+            backgroundColor: o[200]
           }
         },
         "&:active": {
@@ -87,19 +81,16 @@ const h = u.button`
       });
       break;
     default:
-      if (f === "secondary") {
-        Object.assign(a, {
+      if (k === "secondary") {
+        Object.assign(i, {
           backgroundColor: t.main,
           color: r === "dark" ? o[900] : o[700],
           "& svg": {
             color: r === "dark" ? o[900] : o[700]
           },
-          "&:hover": {
-            backgroundColor: t.light
-          },
-          "@media (pointer: coarse), (any-pointer: coarse)": {
+          "@media (hover: hover)": {
             "&:hover": {
-              backgroundColor: t.main
+              backgroundColor: t.light
             }
           },
           "&:active": {
@@ -114,18 +105,15 @@ const h = u.button`
         });
         break;
       }
-      Object.assign(a, {
+      Object.assign(i, {
         backgroundColor: e.main,
         color: r === "dark" ? o[900] : t.main,
         "& svg": {
           color: r === "dark" ? o[900] : t.main
         },
-        "&:hover": {
-          backgroundColor: e.hover
-        },
-        "@media (pointer: coarse), (any-pointer: coarse)": {
+        "@media (hover: hover)": {
           "&:hover": {
-            backgroundColor: e.main
+            backgroundColor: e.hover
           }
         },
         "&:active": {
@@ -140,21 +128,21 @@ const h = u.button`
       });
       break;
   }
-  switch (k) {
+  switch (f) {
     case "large":
-      Object.assign(a, {
+      Object.assign(i, {
         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(a, {
+      Object.assign(i, {
         padding: `${s[100]} ${s[150]}`,
         borderRadius: l[200],
         fontSize: n.fontSize,
@@ -166,57 +154,57 @@ const h = u.button`
       });
       break;
     case "xSmall":
-      Object.assign(a, {
+      Object.assign(i, {
         padding: `${s[50]} ${s[100]}`,
         borderRadius: l[150],
-        fontSize: c.fontSize,
-        lineHeight: c.lineHeight,
+        fontSize: d.fontSize,
+        lineHeight: d.lineHeight,
         "& svg": {
-          width: c.fontSize,
-          height: c.fontSize
+          width: d.fontSize,
+          height: d.fontSize
         }
       });
       break;
     default:
-      Object.assign(a, {
+      Object.assign(i, {
         padding: `${s[200]} ${s[250]}`,
         borderRadius: l[250],
-        fontSize: i.fontSize,
-        lineHeight: i.lineHeight,
+        fontSize: a.fontSize,
+        lineHeight: a.lineHeight,
         "& svg": {
-          width: i.fontSize,
-          height: i.fontSize
+          width: a.fontSize,
+          height: a.fontSize
         }
       });
       break;
   }
-  return a;
+  return i;
 }}
 `;
-function S({
+function C({
   ref: r,
   children: e,
   variant: t = "filled",
   size: o = "medium",
-  color: d = "primary",
-  startIcon: i,
+  color: c = "primary",
+  startIcon: a,
   endIcon: n,
-  ...c
+  ...d
 }) {
-  return t === "text" ? /* @__PURE__ */ g(h, { ref: r, variant: "text", size: o, color: "secondary", ...c, children: [
-    i,
+  return t === "text" ? /* @__PURE__ */ g(h, { ref: r, variant: "text", size: o, color: "secondary", ...d, children: [
+    a,
     e,
     n
-  ] }) : t === "ghost" ? /* @__PURE__ */ g(h, { ref: r, variant: "ghost", size: o, color: "primary", ...c, children: [
-    i,
+  ] }) : t === "ghost" ? /* @__PURE__ */ g(h, { ref: r, variant: "ghost", size: o, color: "primary", ...d, children: [
+    a,
     e,
     n
-  ] }) : /* @__PURE__ */ g(h, { ref: r, variant: t, size: o, color: d, ...c, children: [
-    i,
+  ] }) : /* @__PURE__ */ g(h, { ref: r, variant: t, size: o, color: c, ...d, children: [
+    a,
     e,
     n
   ] });
 }
 export {
-  S as default
+  C as default
 };

package/dist/theme/ThemeProvider.mjs

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import m from "basic-styled/setup/createBuilder";
+import m from "basic-styled/setup/configureStyled";
 import i from "basic-styled/setup/ResetStyle";
 import f from "basic-styled/setup/ThemeProvider";
 import l from "./dark.mjs";
@@ -8,7 +8,7 @@ import h from "./light.mjs";
 m({
   prefix: "shiflo-ui"
 });
-function j({ children: e, theme: o }) {
+function y({ children: e, theme: o }) {
   return /* @__PURE__ */ t(f, { theme: o === "dark" ? l : h, children: [
     /* @__PURE__ */ r(i, {}),
     /* @__PURE__ */ r(p, {}),
@@ -16,5 +16,5 @@ function j({ children: e, theme: o }) {
   ] });
 }
 export {
-  j as default
+  y as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shiflo/ui",
   "description": "Shiflo React UI Components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "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"
   },