@shiflo/ui 0.0.5 → 0.0.6

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

@@ -18,11 +18,17 @@ 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: a, small1: n, small2: s },
+    typography: { body1: d, body2: n, small1: a, small2: s },
     spacing: c,
     radius: l
   },
@@ -137,11 +143,11 @@ const h = u.button`
       Object.assign(i, {
         padding: `${c[100]} ${c[150]}`,
         borderRadius: l[200],
-        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;
@@ -161,11 +167,11 @@ const h = u.button`
       Object.assign(i, {
         padding: `${c[200]} ${c[250]}`,
         borderRadius: l[250],
-        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;
@@ -179,22 +185,22 @@ function C({
   variant: r = "filled",
   size: o = "medium",
   color: d = "primary",
-  startIcon: a,
-  endIcon: n,
+  startIcon: n,
+  endIcon: a,
   ...s
 }) {
   return r === "text" ? /* @__PURE__ */ g(h, { ref: t, variant: "text", size: o, color: "secondary", ...s, children: [
-    a,
+    n,
     e,
-    n
+    a
   ] }) : r === "ghost" ? /* @__PURE__ */ g(h, { ref: t, variant: "ghost", size: o, color: "primary", ...s, children: [
-    a,
+    n,
     e,
-    n
+    a
   ] }) : /* @__PURE__ */ g(h, { ref: t, variant: r, size: o, color: d, ...s, children: [
-    a,
+    n,
     e,
-    n
+    a
   ] });
 }
 export {

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.6",
   "type": "module",
   "files": [
     "dist"