mada-design-system 0.8.3 → 0.8.4

package/index.es39.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-label";
-import { cva as i } from "./index.es111.js";
+import { cva as i } from "./index.es121.js";
 import * as m from "react";
 import { cn as l } from "./index.es89.js";
 const d = i("peer-disabled:cursor-not-allowed peer-disabled:opacity-70", {

package/index.es390.js

@@ -1,208 +1,353 @@
-import E from "./index.es207.js";
-import x from "./index.es208.js";
-import N from "./index.es442.js";
-import v from "./index.es209.js";
-import A from "./index.es443.js";
-import _ from "./index.es444.js";
-import C from "react";
-import g from "./index.es445.js";
-import { classNamesShape as $ } from "./index.es446.js";
-import { forceReflow as S } from "./index.es447.js";
-var T = function(i, p) {
-  return i && p && p.split(" ").forEach(function(s) {
-    return A(i, s);
-  });
-}, d = function(i, p) {
-  return i && p && p.split(" ").forEach(function(s) {
-    return _(i, s);
-  });
-}, c = /* @__PURE__ */ function(u) {
-  N(i, u);
-  function i() {
-    for (var s, t = arguments.length, a = new Array(t), o = 0; o < t; o++)
-      a[o] = arguments[o];
-    return s = u.call.apply(u, [this].concat(a)) || this, s.appliedClasses = {
-      appear: {},
-      enter: {},
-      exit: {}
-    }, s.onEnter = function(e, r) {
-      var n = s.resolveArguments(e, r), l = n[0], m = n[1];
-      s.removeClasses(l, "exit"), s.addClass(l, m ? "appear" : "enter", "base"), s.props.onEnter && s.props.onEnter(e, r);
-    }, s.onEntering = function(e, r) {
-      var n = s.resolveArguments(e, r), l = n[0], m = n[1], f = m ? "appear" : "enter";
-      s.addClass(l, f, "active"), s.props.onEntering && s.props.onEntering(e, r);
-    }, s.onEntered = function(e, r) {
-      var n = s.resolveArguments(e, r), l = n[0], m = n[1], f = m ? "appear" : "enter";
-      s.removeClasses(l, f), s.addClass(l, f, "done"), s.props.onEntered && s.props.onEntered(e, r);
-    }, s.onExit = function(e) {
-      var r = s.resolveArguments(e), n = r[0];
-      s.removeClasses(n, "appear"), s.removeClasses(n, "enter"), s.addClass(n, "exit", "base"), s.props.onExit && s.props.onExit(e);
-    }, s.onExiting = function(e) {
-      var r = s.resolveArguments(e), n = r[0];
-      s.addClass(n, "exit", "active"), s.props.onExiting && s.props.onExiting(e);
-    }, s.onExited = function(e) {
-      var r = s.resolveArguments(e), n = r[0];
-      s.removeClasses(n, "exit"), s.addClass(n, "exit", "done"), s.props.onExited && s.props.onExited(e);
-    }, s.resolveArguments = function(e, r) {
-      return s.props.nodeRef ? [s.props.nodeRef.current, e] : [e, r];
-    }, s.getClassNames = function(e) {
-      var r = s.props.classNames, n = typeof r == "string", l = n && r ? r + "-" : "", m = n ? "" + l + e : r[e], f = n ? m + "-active" : r[e + "Active"], h = n ? m + "-done" : r[e + "Done"];
-      return {
-        baseClassName: m,
-        activeClassName: f,
-        doneClassName: h
-      };
-    }, s;
+import w from "./index.es220.js";
+import ge from "./index.es221.js";
+import * as t from "react";
+import e from "./index.es222.js";
+import { clsx as Be } from "./index.es106.js";
+import Ce from "./index.es234.js";
+import xe from "./index.es243.js";
+import De from "./index.es480.js";
+import ke, { getButtonBaseUtilityClass as Ve } from "./index.es481.js";
+import { jsxs as Ee, jsx as we } from "react/jsx-runtime";
+import _ from "./index.es387.js";
+import Fe from "./index.es441.js";
+import M from "./index.es239.js";
+import Le from "./index.es438.js";
+import Ne from "./index.es436.js";
+import Se from "./index.es242.js";
+const Ue = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"], Pe = (g) => {
+  const {
+    disabled: i,
+    focusVisible: b,
+    focusVisibleClassName: c,
+    classes: B
+  } = g, m = Se({
+    root: ["root", i && "disabled", b && "focusVisible"]
+  }, Ve, B);
+  return b && c && (m.root += ` ${c}`), m;
+}, je = Ce("button", {
+  name: "MuiButtonBase",
+  slot: "Root",
+  overridesResolver: (g, i) => i.root
+})({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  boxSizing: "border-box",
+  WebkitTapHighlightColor: "transparent",
+  backgroundColor: "transparent",
+  // Reset default value
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
+  border: 0,
+  margin: 0,
+  // Remove the margin in Safari
+  borderRadius: 0,
+  padding: 0,
+  // Remove the padding in Firefox
+  cursor: "pointer",
+  userSelect: "none",
+  verticalAlign: "middle",
+  MozAppearance: "none",
+  // Reset
+  WebkitAppearance: "none",
+  // Reset
+  textDecoration: "none",
+  // So we take precedent over the style of a native <a /> element.
+  color: "inherit",
+  "&::-moz-focus-inner": {
+    borderStyle: "none"
+    // Remove Firefox dotted outline.
+  },
+  [`&.${ke.disabled}`]: {
+    pointerEvents: "none",
+    // Disable link interactions
+    cursor: "default"
+  },
+  "@media print": {
+    colorAdjust: "exact"
   }
-  var p = i.prototype;
-  return p.addClass = function(t, a, o) {
-    var e = this.getClassNames(a)[o + "ClassName"], r = this.getClassNames("enter"), n = r.doneClassName;
-    a === "appear" && o === "done" && n && (e += " " + n), o === "active" && t && S(t), e && (this.appliedClasses[a][o] = e, T(t, e));
-  }, p.removeClasses = function(t, a) {
-    var o = this.appliedClasses[a], e = o.base, r = o.active, n = o.done;
-    this.appliedClasses[a] = {}, e && d(t, e), r && d(t, r), n && d(t, n);
-  }, p.render = function() {
-    var t = this.props;
-    t.classNames;
-    var a = x(t, ["classNames"]);
-    return /* @__PURE__ */ C.createElement(g, E({}, a, {
-      onEnter: this.onEnter,
-      onEntered: this.onEntered,
-      onEntering: this.onEntering,
-      onExit: this.onExit,
-      onExiting: this.onExiting,
-      onExited: this.onExited
-    }));
-  }, i;
-}(C.Component);
-c.defaultProps = {
-  classNames: ""
-};
-c.propTypes = process.env.NODE_ENV !== "production" ? E({}, g.propTypes, {
+}), q = /* @__PURE__ */ t.forwardRef(function(i, b) {
+  const c = xe({
+    props: i,
+    name: "MuiButtonBase"
+  }), {
+    action: B,
+    centerRipple: C = !1,
+    children: m,
+    className: z,
+    component: h = "button",
+    disabled: r = !1,
+    disableRipple: R = !1,
+    disableTouchRipple: F = !1,
+    focusRipple: a = !1,
+    LinkComponent: H = "a",
+    onBlur: L,
+    onClick: l,
+    onContextMenu: W,
+    onDragLeave: $,
+    onFocus: N,
+    onFocusVisible: S,
+    onKeyDown: U,
+    onKeyUp: P,
+    onMouseDown: G,
+    onMouseLeave: j,
+    onMouseUp: J,
+    onTouchEnd: Q,
+    onTouchMove: X,
+    onTouchStart: Y,
+    tabIndex: K = 0,
+    TouchRippleProps: Z,
+    touchRippleRef: ee,
+    type: x
+  } = c, p = ge(c, Ue), f = t.useRef(null), n = t.useRef(null), oe = _(n, ee), {
+    isFocusVisibleRef: I,
+    onFocus: ne,
+    onBlur: te,
+    ref: se
+  } = Fe(), [u, T] = t.useState(!1);
+  r && u && T(!1), t.useImperativeHandle(B, () => ({
+    focusVisible: () => {
+      T(!0), f.current.focus();
+    }
+  }), []);
+  const [D, re] = t.useState(!1);
+  t.useEffect(() => {
+    re(!0);
+  }, []);
+  const k = D && !R && !r;
+  t.useEffect(() => {
+    u && a && !R && D && n.current.pulsate();
+  }, [R, a, u, D]);
+  function s(o, A, Me = F) {
+    return M((v) => (A && A(v), !Me && n.current && n.current[o](v), !0));
+  }
+  const ue = s("start", G), ce = s("stop", W), ie = s("stop", $), ae = s("stop", J), le = s("stop", (o) => {
+    u && o.preventDefault(), j && j(o);
+  }), pe = s("start", Y), fe = s("stop", Q), de = s("stop", X), be = s("stop", (o) => {
+    te(o), I.current === !1 && T(!1), L && L(o);
+  }, !1), me = M((o) => {
+    f.current || (f.current = o.currentTarget), ne(o), I.current === !0 && (T(!0), S && S(o)), N && N(o);
+  }), V = () => {
+    const o = f.current;
+    return h && h !== "button" && !(o.tagName === "A" && o.href);
+  }, E = t.useRef(!1), he = M((o) => {
+    a && !E.current && u && n.current && o.key === " " && (E.current = !0, n.current.stop(o, () => {
+      n.current.start(o);
+    })), o.target === o.currentTarget && V() && o.key === " " && o.preventDefault(), U && U(o), o.target === o.currentTarget && V() && o.key === "Enter" && !r && (o.preventDefault(), l && l(o));
+  }), Re = M((o) => {
+    a && o.key === " " && n.current && u && !o.defaultPrevented && (E.current = !1, n.current.stop(o, () => {
+      n.current.pulsate(o);
+    })), P && P(o), l && o.target === o.currentTarget && V() && o.key === " " && !o.defaultPrevented && l(o);
+  });
+  let y = h;
+  y === "button" && (p.href || p.to) && (y = H);
+  const d = {};
+  y === "button" ? (d.type = x === void 0 ? "button" : x, d.disabled = r) : (!p.href && !p.to && (d.role = "button"), r && (d["aria-disabled"] = r));
+  const Te = _(b, se, f);
+  process.env.NODE_ENV !== "production" && t.useEffect(() => {
+    k && n.current;
+  }, [k]);
+  const O = w({}, c, {
+    centerRipple: C,
+    component: h,
+    disabled: r,
+    disableRipple: R,
+    disableTouchRipple: F,
+    focusRipple: a,
+    tabIndex: K,
+    focusVisible: u
+  }), ye = Pe(O);
+  return /* @__PURE__ */ Ee(je, w({
+    as: y,
+    className: Be(ye.root, z),
+    ownerState: O,
+    onBlur: be,
+    onClick: l,
+    onContextMenu: ce,
+    onFocus: me,
+    onKeyDown: he,
+    onKeyUp: Re,
+    onMouseDown: ue,
+    onMouseLeave: le,
+    onMouseUp: ae,
+    onDragLeave: ie,
+    onTouchEnd: fe,
+    onTouchMove: de,
+    onTouchStart: pe,
+    ref: Te,
+    tabIndex: r ? -1 : K,
+    type: x
+  }, d, p, {
+    children: [m, k ? (
+      /* TouchRipple is only needed client-side, x2 boost on the server. */
+      /* @__PURE__ */ we(De, w({
+        ref: oe,
+        center: C
+      }, Z))
+    ) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" && (q.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
-   * The animation classNames applied to the component as it appears, enters,
-   * exits or has finished the transition. A single name can be provided, which
-   * will be suffixed for each stage, e.g. `classNames="fade"` applies:
-   *
-   * - `fade-appear`, `fade-appear-active`, `fade-appear-done`
-   * - `fade-enter`, `fade-enter-active`, `fade-enter-done`
-   * - `fade-exit`, `fade-exit-active`, `fade-exit-done`
-   *
-   * A few details to note about how these classes are applied:
-   *
-   * 1. They are _joined_ with the ones that are already defined on the child
-   *    component, so if you want to add some base styles, you can use
-   *    `className` without worrying that it will be overridden.
-   *
-   * 2. If the transition component mounts with `in={false}`, no classes are
-   *    applied yet. You might be expecting `*-exit-done`, but if you think
-   *    about it, a component cannot finish exiting if it hasn't entered yet.
-   *
-   * 2. `fade-appear-done` and `fade-enter-done` will _both_ be applied. This
-   *    allows you to define different behavior for when appearing is done and
-   *    when regular entering is done, using selectors like
-   *    `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply
-   *    an epic entrance animation when element first appears in the DOM using
-   *    [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can
-   *    simply use `fade-enter-done` for defining both cases.
-   *
-   * Each individual classNames can also be specified independently like:
-   *
-   * ```js
-   * classNames={{
-   *  appear: 'my-appear',
-   *  appearActive: 'my-active-appear',
-   *  appearDone: 'my-done-appear',
-   *  enter: 'my-enter',
-   *  enterActive: 'my-active-enter',
-   *  enterDone: 'my-done-enter',
-   *  exit: 'my-exit',
-   *  exitActive: 'my-active-exit',
-   *  exitDone: 'my-done-exit',
-   * }}
-   * ```
-   *
-   * If you want to set these classes using CSS Modules:
-   *
-   * ```js
-   * import styles from './styles.css';
-   * ```
-   *
-   * you might want to use camelCase in your CSS file, that way could simply
-   * spread them instead of listing them one by one:
-   *
-   * ```js
-   * classNames={{ ...styles }}
-   * ```
-   *
-   * @type {string | {
-   *  appear?: string,
-   *  appearActive?: string,
-   *  appearDone?: string,
-   *  enter?: string,
-   *  enterActive?: string,
-   *  enterDone?: string,
-   *  exit?: string,
-   *  exitActive?: string,
-   *  exitDone?: string,
-   * }}
-   */
-  classNames: $,
-  /**
-   * A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
-   * applied.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
-   *
-   * @type Function(node: HtmlElement, isAppearing: bool)
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
    */
-  onEnter: v.func,
+  action: Le,
   /**
-   * A `<Transition>` callback fired immediately after the 'enter-active' or
-   * 'appear-active' class is applied.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
-   *
-   * @type Function(node: HtmlElement, isAppearing: bool)
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
    */
-  onEntering: v.func,
+  centerRipple: e.bool,
   /**
-   * A `<Transition>` callback fired immediately after the 'enter' or
-   * 'appear' classes are **removed** and the `done` class is added to the DOM node.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
-   *
-   * @type Function(node: HtmlElement, isAppearing: bool)
+   * The content of the component.
    */
-  onEntered: v.func,
+  children: e.node,
   /**
-   * A `<Transition>` callback fired immediately after the 'exit' class is
-   * applied.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed
-   *
-   * @type Function(node: HtmlElement)
+   * Override or extend the styles applied to the component.
    */
-  onExit: v.func,
+  classes: e.object,
   /**
-   * A `<Transition>` callback fired immediately after the 'exit-active' is applied.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed
-   *
-   * @type Function(node: HtmlElement)
+   * @ignore
    */
-  onExiting: v.func,
+  className: e.string,
   /**
-   * A `<Transition>` callback fired immediately after the 'exit' classes
-   * are **removed** and the `exit-done` class is added to the DOM node.
-   *
-   * **Note**: when `nodeRef` prop is passed, `node` is not passed
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: Ne,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
    *
-   * @type Function(node: HtmlElement)
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: e.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: e.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: e.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: e.string,
+  /**
+   * @ignore
+   */
+  href: e.any,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: e.elementType,
+  /**
+   * @ignore
+   */
+  onBlur: e.func,
+  /**
+   * @ignore
+   */
+  onClick: e.func,
+  /**
+   * @ignore
+   */
+  onContextMenu: e.func,
+  /**
+   * @ignore
+   */
+  onDragLeave: e.func,
+  /**
+   * @ignore
+   */
+  onFocus: e.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: e.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: e.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: e.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: e.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: e.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: e.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: e.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: e.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: e.func,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: e.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: e.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: e.oneOfType([e.func, e.shape({
+    current: e.shape({
+      pulsate: e.func.isRequired,
+      start: e.func.isRequired,
+      stop: e.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
    */
-  onExited: v.func
-}) : {};
-const z = c;
+  type: e.oneOfType([e.oneOf(["button", "reset", "submit"]), e.string])
+});
+const Ze = q;
 export {
-  z as default
+  je as ButtonBaseRoot,
+  Ze as default
 };