@shiflo/ui 0.0.4 → 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/Icon/Icon.mjs

@@ -1,27 +1,30 @@
-import { jsx as h } from "react/jsx-runtime";
-import { Children as l, isValidElement as p } from "react";
+import { jsx as m } from "react/jsx-runtime";
+import { Children as p, isValidElement as l } from "react";
 import { S as a } from "../../assets/icons/index.ts-BL4wFg6B.js";
 import c from "basic-styled";
-import f from "../../utils/getValueByPath.mjs";
-const d = c.svg`
+import d from "../../utils/getValueByPath.mjs";
+const f = c.svg`
   transition:
     width 0.2s,
     height 0.2s,
     color 0.2s;
-  color: ${({ theme: { palette: o }, color: r }) => f(o, r || "") || "inherit"};
+
+  width: ${({ width: t }) => t || "24px"};
+  height: ${({ height: t }) => t || "24px"};
+  color: ${({ theme: { palette: t }, color: r }) => d(t, r || "") || "inherit"};
 `;
-function y({ ref: o, name: r, width: i = 24, height: n = 24, ...s }) {
-  const m = a[r];
-  return l.map(m(), (e) => {
-    if (!p(e))
+function v({ ref: t, name: r, width: e = 24, height: n = 24, ...s }) {
+  const h = a[r];
+  return p.map(h(), (i) => {
+    if (!l(i))
       return null;
-    const t = {
+    const o = {
       ...s,
-      ...e.props
+      ...i.props
     };
-    return t.width = i ?? t.width, t.height = n ?? t.height, /* @__PURE__ */ h(d, { ref: o, ...t });
+    return o.width = e ?? o.width, o.height = n ?? o.height, /* @__PURE__ */ m(f, { ref: t, ...o });
   });
 }
 export {
-  y as default
+  v 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/dist/utils/getUtilityProps.mjs

@@ -1,7 +1,7 @@
-import g from "../theme/radius.mjs";
+import a from "../theme/radius.mjs";
 import s from "../theme/spacing.mjs";
 function Q({
-  display: a,
+  display: g,
   flex: t,
   flexBasis: n,
   flexDirection: c,
@@ -11,30 +11,30 @@ function Q({
   flexWrap: e,
   justifyContent: b,
   alignItems: d,
-  m: R,
-  mt: o,
+  m: o,
+  mt: R,
   mr: u,
   mb: p,
   ml: h,
-  p: L,
-  pt: T,
-  pr: m,
+  p: m,
+  pt: L,
+  pr: T,
   pb: r,
-  pl: P,
-  border: U,
-  borderTop: q,
-  borderBottom: v,
-  borderRight: y,
-  borderLeft: z,
-  br: A,
-  brtl: B,
+  pl: B,
+  border: P,
+  borderTop: U,
+  borderBottom: q,
+  borderRight: v,
+  borderLeft: y,
+  br: z,
+  brtl: A,
   brtr: E,
   brml: H,
   brmr: J,
   gap: K
 }) {
   const i = {};
-  return a && Object.assign(i, { display: a }), t && Object.assign(i, { flex: t }), n && Object.assign(i, { flexBasis: n }), c && Object.assign(i, { flexDirection: c }), O && Object.assign(i, { flexFlow: O }), f && Object.assign(i, { flexGrow: f }), j && Object.assign(i, { flexShrink: j }), e && Object.assign(i, { flexWrap: e }), b && Object.assign(i, { justifyContent: b }), d && Object.assign(i, { alignItems: d }), R && Object.assign(i, { margin: s[R] }), o && Object.assign(i, { marginTop: s[o] }), p && Object.assign(i, { marginRight: s[p] }), h && Object.assign(i, { marginLeft: s[h] }), u && Object.assign(i, { marginRight: s[u] }), L && Object.assign(i, { padding: s[L] }), T && Object.assign(i, { paddingTop: s[T] }), r && Object.assign(i, { paddingRight: s[r] }), P && Object.assign(i, { paddingLeft: s[P] }), m && Object.assign(i, { paddingRight: s[m] }), K && Object.assign(i, { gap: s[K] }), U && Object.assign(i, { border: U }), q && Object.assign(i, { borderTop: q }), v && Object.assign(i, { borderBottom: v }), y && Object.assign(i, { borderRight: y }), z && Object.assign(i, { borderLeft: z }), A && Object.assign(i, { borderRadius: g[A] }), B && Object.assign(i, { borderTopLeftRadius: g[B] }), E && Object.assign(i, { borderTopRightRadius: g[E] }), H && Object.assign(i, { borderBottomLeftRadius: g[H] }), J && Object.assign(i, { borderBottomRightRadius: g[J] }), i;
+  return g && Object.assign(i, { display: g }), t && Object.assign(i, { flex: t }), n && Object.assign(i, { flexBasis: n }), c && Object.assign(i, { flexDirection: c }), O && Object.assign(i, { flexFlow: O }), f && Object.assign(i, { flexGrow: f }), j && Object.assign(i, { flexShrink: j }), e && Object.assign(i, { flexWrap: e }), b && Object.assign(i, { justifyContent: b }), d && Object.assign(i, { alignItems: d }), o && Object.assign(i, { margin: s[o] }), R && Object.assign(i, { marginTop: s[R] }), p && Object.assign(i, { marginRight: s[p] }), h && Object.assign(i, { marginLeft: s[h] }), u && Object.assign(i, { marginRight: s[u] }), m && Object.assign(i, { padding: s[m] }), L && Object.assign(i, { paddingTop: s[L] }), r && Object.assign(i, { paddingBottom: s[r] }), B && Object.assign(i, { paddingLeft: s[B] }), T && Object.assign(i, { paddingRight: s[T] }), K && Object.assign(i, { gap: s[K] }), P && Object.assign(i, { border: P }), U && Object.assign(i, { borderTop: U }), q && Object.assign(i, { borderBottom: q }), v && Object.assign(i, { borderRight: v }), y && Object.assign(i, { borderLeft: y }), z && Object.assign(i, { borderRadius: a[z] }), A && Object.assign(i, { borderTopLeftRadius: a[A] }), E && Object.assign(i, { borderTopRightRadius: a[E] }), H && Object.assign(i, { borderBottomLeftRadius: a[H] }), J && Object.assign(i, { borderBottomRightRadius: a[J] }), i;
 }
 export {
   Q as default

package/dist/utils/getValueByPath.mjs

@@ -1,6 +1,6 @@
 function i(t, e = "") {
   if (e)
-    return e.split(".").reduce((r, u) => r && r[u], t) || e;
+    return e.split(".").reduce((r, u) => r && r[u], t) || e || void 0;
 }
 export {
   i as default

package/package.json

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