mada-design-system 0.7.1 → 0.8.0

package/index.es409.js

@@ -1,4 +1,78 @@
-import t from "./index.es342.js";
+import d from "./index.es406.js";
+import { handleBreakpoints as f } from "./index.es410.js";
+import { getPath as l } from "./index.es407.js";
+import y from "./index.es411.js";
+import h from "./index.es415.js";
+const v = {
+  m: "margin",
+  p: "padding"
+}, E = {
+  t: "Top",
+  r: "Right",
+  b: "Bottom",
+  l: "Left",
+  x: ["Left", "Right"],
+  y: ["Top", "Bottom"]
+}, p = {
+  marginX: "mx",
+  marginY: "my",
+  paddingX: "px",
+  paddingY: "py"
+}, N = h((e) => {
+  if (e.length > 2)
+    if (p[e])
+      e = p[e];
+    else
+      return [e];
+  const [n, t] = e.split(""), r = v[n], a = E[t] || "";
+  return Array.isArray(a) ? a.map((o) => r + o) : [r + a];
+}), s = ["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd"], m = ["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"], b = [...s, ...m];
+function I(e, n, t, r) {
+  var a;
+  const o = (a = l(e, n, !1)) != null ? a : t;
+  return typeof o == "number" ? (i) => typeof i == "string" ? i : (process.env.NODE_ENV, o * i) : Array.isArray(o) ? (i) => typeof i == "string" ? i : (process.env.NODE_ENV !== "production" && Number.isInteger(i) && i > o.length - 1, o[i]) : typeof o == "function" ? o : (process.env.NODE_ENV, () => {
+  });
+}
+function B(e) {
+  return I(e, "spacing", 8, "spacing");
+}
+function S(e, n) {
+  if (typeof n == "string" || n == null)
+    return n;
+  const t = Math.abs(n), r = e(t);
+  return n >= 0 ? r : typeof r == "number" ? -r : `-${r}`;
+}
+function T(e, n) {
+  return (t) => e.reduce((r, a) => (r[a] = S(n, t), r), {});
+}
+function $(e, n, t, r) {
+  if (n.indexOf(t) === -1)
+    return null;
+  const a = N(t), o = T(a, r), i = e[t];
+  return f(e, i, o);
+}
+function u(e, n) {
+  const t = B(e.theme);
+  return Object.keys(e).map((r) => $(e, n, r, t)).reduce(y, {});
+}
+function c(e) {
+  return u(e, s);
+}
+c.propTypes = process.env.NODE_ENV !== "production" ? s.reduce((e, n) => (e[n] = d, e), {}) : {};
+c.filterProps = s;
+function g(e) {
+  return u(e, m);
+}
+g.propTypes = process.env.NODE_ENV !== "production" ? m.reduce((e, n) => (e[n] = d, e), {}) : {};
+g.filterProps = m;
+process.env.NODE_ENV !== "production" && b.reduce((e, n) => (e[n] = d, e), {});
 export {
-  t as default
+  B as createUnarySpacing,
+  I as createUnaryUnit,
+  T as getStyleFromPropValue,
+  S as getValue,
+  c as margin,
+  s as marginKeys,
+  g as padding,
+  m as paddingKeys
 };

package/index.es41.js

@@ -1,5 +1,5 @@
 import { jsx as x } from "react/jsx-runtime";
-import { clsx as c } from "./index.es131.js";
+import { clsx as c } from "./index.es133.js";
 const u = ({
   minChildWidth: r,
   cols: e = 12,

package/index.es410.js

@@ -1,253 +1,57 @@
-import G from "./index.es201.js";
-import U from "./index.es202.js";
-import * as e from "react";
-import _ from "./index.es203.js";
-import { clsx as c } from "./index.es131.js";
-import j from "./index.es215.js";
-import F from "./index.es224.js";
-import J from "./index.es433.js";
-import i from "./index.es412.js";
-import { jsx as k } from "react/jsx-runtime";
-import { keyframes as E } from "./index.es398.js";
-import Q from "./index.es257.js";
-const Z = ["center", "classes", "className"];
-let y = (r) => r, V, D, K, S;
-const w = 550, v = 80, tt = E(V || (V = y`
-  0% {
-    transform: scale(0);
-    opacity: 0.1;
-  }
-
-  100% {
-    transform: scale(1);
-    opacity: 0.3;
-  }
-`)), et = E(D || (D = y`
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-`)), it = E(K || (K = y`
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(0.92);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-`)), rt = j("span", {
-  name: "MuiTouchRipple",
-  slot: "Root"
-})({
-  overflow: "hidden",
-  pointerEvents: "none",
-  position: "absolute",
-  zIndex: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  borderRadius: "inherit"
-}), ot = j(J, {
-  name: "MuiTouchRipple",
-  slot: "Ripple"
-})(S || (S = y`
-  opacity: 0;
-  position: absolute;
-
-  &.${0} {
-    opacity: 0.3;
-    transform: scale(1);
-    animation-name: ${0};
-    animation-duration: ${0}ms;
-    animation-timing-function: ${0};
-  }
-
-  &.${0} {
-    animation-duration: ${0}ms;
-  }
-
-  & .${0} {
-    opacity: 1;
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: currentColor;
-  }
-
-  & .${0} {
-    opacity: 0;
-    animation-name: ${0};
-    animation-duration: ${0}ms;
-    animation-timing-function: ${0};
-  }
-
-  & .${0} {
-    position: absolute;
-    /* @noflip */
-    left: 0px;
-    top: 0;
-    animation-name: ${0};
-    animation-duration: 2500ms;
-    animation-timing-function: ${0};
-    animation-iteration-count: infinite;
-    animation-delay: 200ms;
-  }
-`), i.rippleVisible, tt, w, ({
-  theme: r
-}) => r.transitions.easing.easeInOut, i.ripplePulsate, ({
-  theme: r
-}) => r.transitions.duration.shorter, i.child, i.childLeaving, et, w, ({
-  theme: r
-}) => r.transitions.easing.easeInOut, i.childPulsate, it, ({
-  theme: r
-}) => r.transitions.easing.easeInOut), q = /* @__PURE__ */ e.forwardRef(function(A, H) {
-  const I = F({
-    props: A,
-    name: "MuiTouchRipple"
-  }), {
-    center: L = !1,
-    classes: n = {},
-    className: W
-  } = I, B = U(I, Z), [N, X] = e.useState([]), Y = e.useRef(0), h = e.useRef(null);
-  e.useEffect(() => {
-    h.current && (h.current(), h.current = null);
-  }, [N]);
-  const T = e.useRef(!1), d = e.useRef(0), o = e.useRef(null), z = e.useRef(null);
-  e.useEffect(() => () => {
-    d.current && clearTimeout(d.current);
-  }, []);
-  const $ = e.useCallback((t) => {
-    const {
-      pulsate: a,
-      rippleX: s,
-      rippleY: g,
-      rippleSize: b,
-      cb: P
-    } = t;
-    X((l) => [...l, /* @__PURE__ */ k(ot, {
-      classes: {
-        ripple: c(n.ripple, i.ripple),
-        rippleVisible: c(n.rippleVisible, i.rippleVisible),
-        ripplePulsate: c(n.ripplePulsate, i.ripplePulsate),
-        child: c(n.child, i.child),
-        childLeaving: c(n.childLeaving, i.childLeaving),
-        childPulsate: c(n.childPulsate, i.childPulsate)
-      },
-      timeout: w,
-      pulsate: a,
-      rippleX: s,
-      rippleY: g,
-      rippleSize: b
-    }, Y.current)]), Y.current += 1, h.current = P;
-  }, [n]), R = e.useCallback((t = {}, a = {}, s = () => {
-  }) => {
-    const {
-      pulsate: g = !1,
-      center: b = L || a.pulsate,
-      fakeElement: P = !1
-      // For test purposes
-    } = a;
-    if ((t == null ? void 0 : t.type) === "mousedown" && T.current) {
-      T.current = !1;
-      return;
-    }
-    (t == null ? void 0 : t.type) === "touchstart" && (T.current = !0);
-    const l = P ? null : z.current, u = l ? l.getBoundingClientRect() : {
-      width: 0,
-      height: 0,
-      left: 0,
-      top: 0
-    };
-    let p, m, f;
-    if (b || t === void 0 || t.clientX === 0 && t.clientY === 0 || !t.clientX && !t.touches)
-      p = Math.round(u.width / 2), m = Math.round(u.height / 2);
-    else {
-      const {
-        clientX: x,
-        clientY: C
-      } = t.touches && t.touches.length > 0 ? t.touches[0] : t;
-      p = Math.round(x - u.left), m = Math.round(C - u.top);
-    }
-    if (b)
-      f = Math.sqrt((2 * u.width ** 2 + u.height ** 2) / 3), f % 2 === 0 && (f += 1);
-    else {
-      const x = Math.max(Math.abs((l ? l.clientWidth : 0) - p), p) * 2 + 2, C = Math.max(Math.abs((l ? l.clientHeight : 0) - m), m) * 2 + 2;
-      f = Math.sqrt(x ** 2 + C ** 2);
-    }
-    t != null && t.touches ? o.current === null && (o.current = () => {
-      $({
-        pulsate: g,
-        rippleX: p,
-        rippleY: m,
-        rippleSize: f,
-        cb: s
-      });
-    }, d.current = setTimeout(() => {
-      o.current && (o.current(), o.current = null);
-    }, v)) : $({
-      pulsate: g,
-      rippleX: p,
-      rippleY: m,
-      rippleSize: f,
-      cb: s
-    });
-  }, [L, $]), O = e.useCallback(() => {
-    R({}, {
-      pulsate: !0
-    });
-  }, [R]), M = e.useCallback((t, a) => {
-    if (clearTimeout(d.current), (t == null ? void 0 : t.type) === "touchend" && o.current) {
-      o.current(), o.current = null, d.current = setTimeout(() => {
-        M(t, a);
-      });
-      return;
-    }
-    o.current = null, X((s) => s.length > 0 ? s.slice(1) : s), h.current = a;
-  }, []);
-  return e.useImperativeHandle(H, () => ({
-    pulsate: O,
-    start: R,
-    stop: M
-  }), [O, R, M]), /* @__PURE__ */ k(rt, G({
-    className: c(i.root, n.root, W),
-    ref: z
-  }, B, {
-    children: /* @__PURE__ */ k(Q, {
-      component: null,
-      exit: !0,
-      children: N
-    })
-  }));
-});
-process.env.NODE_ENV !== "production" && (q.propTypes = {
-  /**
-   * If `true`, the ripple starts at the center of the component
-   * rather than at the point of interaction.
-   */
-  center: _.bool,
-  /**
-   * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
-   */
-  classes: _.object,
-  /**
-   * @ignore
-   */
-  className: _.string
-});
-const Rt = q;
+const c = {
+  xs: 0,
+  // phone
+  sm: 600,
+  // tablet
+  md: 900,
+  // small laptop
+  lg: 1200,
+  // desktop
+  xl: 1536
+  // large screen
+}, k = {
+  // Sorted ASC by size. That's important.
+  // It can't be configured as it's used statically for propTypes.
+  keys: ["xs", "sm", "md", "lg", "xl"],
+  up: (t) => `@media (min-width:${c[t]}px)`
+};
+function m(t, e, n) {
+  const s = t.theme || {};
+  if (Array.isArray(e)) {
+    const r = s.breakpoints || k;
+    return e.reduce((u, o, i) => (u[r.up(r.keys[i])] = n(e[i]), u), {});
+  }
+  if (typeof e == "object") {
+    const r = s.breakpoints || k;
+    return Object.keys(e).reduce((u, o) => {
+      if (Object.keys(r.values || c).indexOf(o) !== -1) {
+        const i = r.up(o);
+        u[i] = n(e[o], o);
+      } else {
+        const i = o;
+        u[i] = e[i];
+      }
+      return u;
+    }, {});
+  }
+  return n(e);
+}
+function y(t = {}) {
+  var e;
+  return ((e = t.keys) == null ? void 0 : e.reduce((s, d) => {
+    const r = t.up(d);
+    return s[r] = {}, s;
+  }, {})) || {};
+}
+function f(t, e) {
+  return t.reduce((n, s) => {
+    const d = n[s];
+    return (!d || Object.keys(d).length === 0) && delete n[s], n;
+  }, e);
+}
 export {
-  v as DELAY_RIPPLE,
-  ot as TouchRippleRipple,
-  rt as TouchRippleRoot,
-  Rt as default
+  y as createEmptyBreakpointObject,
+  m as handleBreakpoints,
+  f as removeUnusedBreakpoints,
+  c as values
 };

package/index.es411.js

@@ -1,10 +1,10 @@
-import s from "./index.es226.js";
-import e from "./index.es225.js";
-function n(t) {
-  return e("MuiButtonBase", t);
+import f from "./index.es372.js";
+function o(e, r) {
+  return r ? f(e, r, {
+    clone: !1
+    // No need to clone deep, it's way faster.
+  }) : e;
 }
-const o = s("MuiButtonBase", ["root", "disabled", "focusVisible"]), l = o;
 export {
-  l as default,
-  n as getButtonBaseUtilityClass
+  o as default
 };

package/index.es412.js

@@ -1,5 +1,78 @@
-import e from "./index.es226.js";
-const l = e("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), s = l;
+import r from "./index.es407.js";
+import c from "./index.es408.js";
+import { createUnaryUnit as p, getValue as a } from "./index.es409.js";
+import { handleBreakpoints as l } from "./index.es410.js";
+import s from "./index.es406.js";
+const u = (o) => {
+  if (o.gap !== void 0 && o.gap !== null) {
+    const e = p(o.theme, "spacing", 8, "gap"), n = (t) => ({
+      gap: a(e, t)
+    });
+    return l(o, o.gap, n);
+  }
+  return null;
+};
+u.propTypes = process.env.NODE_ENV !== "production" ? {
+  gap: s
+} : {};
+u.filterProps = ["gap"];
+const i = (o) => {
+  if (o.columnGap !== void 0 && o.columnGap !== null) {
+    const e = p(o.theme, "spacing", 8, "columnGap"), n = (t) => ({
+      columnGap: a(e, t)
+    });
+    return l(o, o.columnGap, n);
+  }
+  return null;
+};
+i.propTypes = process.env.NODE_ENV !== "production" ? {
+  columnGap: s
+} : {};
+i.filterProps = ["columnGap"];
+const m = (o) => {
+  if (o.rowGap !== void 0 && o.rowGap !== null) {
+    const e = p(o.theme, "spacing", 8, "rowGap"), n = (t) => ({
+      rowGap: a(e, t)
+    });
+    return l(o, o.rowGap, n);
+  }
+  return null;
+};
+m.propTypes = process.env.NODE_ENV !== "production" ? {
+  rowGap: s
+} : {};
+m.filterProps = ["rowGap"];
+const g = r({
+  prop: "gridColumn"
+}), d = r({
+  prop: "gridRow"
+}), f = r({
+  prop: "gridAutoFlow"
+}), w = r({
+  prop: "gridAutoColumns"
+}), G = r({
+  prop: "gridAutoRows"
+}), A = r({
+  prop: "gridTemplateColumns"
+}), T = r({
+  prop: "gridTemplateRows"
+}), y = r({
+  prop: "gridTemplateAreas"
+}), P = r({
+  prop: "gridArea"
+});
+c(u, i, m, g, d, f, w, G, A, T, y, P);
 export {
-  s as default
+  i as columnGap,
+  u as gap,
+  P as gridArea,
+  w as gridAutoColumns,
+  f as gridAutoFlow,
+  G as gridAutoRows,
+  g as gridColumn,
+  d as gridRow,
+  y as gridTemplateAreas,
+  A as gridTemplateColumns,
+  T as gridTemplateRows,
+  m as rowGap
 };