kdpa-components 1.35.2 → 1.35.3

package/dist/ButtonBase-0f9f324d.js

@@ -0,0 +1,655 @@
+import { a as pe, _ as v } from "./extends-393586f3.js";
+import * as o from "react";
+import { P as e, g as Ue } from "./identifier-9dfe30d8.js";
+import { c as M, g as fe, s as ee, u as de, a as _e } from "./useThemeProps-7d04a175.js";
+import { j } from "./jsx-runtime-944c88e2.js";
+import { k as te } from "./emotion-react.browser.esm-d563ed65.js";
+import { T as Fe } from "./TransitionGroup-196acb6a.js";
+import { u as re } from "./useForkRef-0781dda0.js";
+import { u as Ke } from "./useIsFocusVisible-4693b580.js";
+import { u as q } from "./useEventCallback-fe4fd69c.js";
+import { r as Oe } from "./refType-af1a9f54.js";
+import { e as ze } from "./elementTypeAcceptingRef-6c34f16b.js";
+function he(s) {
+  const {
+    className: C,
+    classes: a,
+    pulsate: u = !1,
+    rippleX: N,
+    rippleY: i,
+    rippleSize: p,
+    in: w,
+    onExited: f,
+    timeout: r
+  } = s, [m, b] = o.useState(!1), d = M(C, a.ripple, a.rippleVisible, u && a.ripplePulsate), k = {
+    width: p,
+    height: p,
+    top: -(p / 2) + i,
+    left: -(p / 2) + N
+  }, l = M(a.child, m && a.childLeaving, u && a.childPulsate);
+  return !w && !m && b(!0), o.useEffect(() => {
+    if (!w && f != null) {
+      const R = setTimeout(f, r);
+      return () => {
+        clearTimeout(R);
+      };
+    }
+  }, [f, w, r]), /* @__PURE__ */ j.jsx("span", {
+    className: d,
+    style: k,
+    children: /* @__PURE__ */ j.jsx("span", {
+      className: l
+    })
+  });
+}
+process.env.NODE_ENV !== "production" && (he.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: e.object.isRequired,
+  className: e.string,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  in: e.bool,
+  /**
+   * @ignore - injected from TransitionGroup
+   */
+  onExited: e.func,
+  /**
+   * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.
+   */
+  pulsate: e.bool,
+  /**
+   * Diameter of the ripple.
+   */
+  rippleSize: e.number,
+  /**
+   * Horizontal position of the ripple center.
+   */
+  rippleX: e.number,
+  /**
+   * Vertical position of the ripple center.
+   */
+  rippleY: e.number,
+  /**
+   * exit delay
+   */
+  timeout: e.number.isRequired
+});
+const Xe = fe("MuiTouchRipple", ["root", "ripple", "rippleVisible", "ripplePulsate", "child", "childLeaving", "childPulsate"]), c = Xe, Ye = ["center", "classes", "className"];
+let H = (s) => s, le, ae, ue, ce;
+const Z = 550, Ae = 80, qe = te(le || (le = H`
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+`)), ve = te(ae || (ae = H`
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+`)), He = te(ue || (ue = H`
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+`)), We = ee("span", {
+  name: "MuiTouchRipple",
+  slot: "Root"
+})({
+  overflow: "hidden",
+  pointerEvents: "none",
+  position: "absolute",
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: "inherit"
+}), Ge = ee(he, {
+  name: "MuiTouchRipple",
+  slot: "Ripple"
+})(ce || (ce = H`
+  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;
+  }
+`), c.rippleVisible, qe, Z, ({
+  theme: s
+}) => s.transitions.easing.easeInOut, c.ripplePulsate, ({
+  theme: s
+}) => s.transitions.duration.shorter, c.child, c.childLeaving, ve, Z, ({
+  theme: s
+}) => s.transitions.easing.easeInOut, c.childPulsate, He, ({
+  theme: s
+}) => s.transitions.easing.easeInOut), me = /* @__PURE__ */ o.forwardRef(function(C, a) {
+  const u = de({
+    props: C,
+    name: "MuiTouchRipple"
+  }), {
+    center: N = !1,
+    classes: i = {},
+    className: p
+  } = u, w = pe(u, Ye), [f, r] = o.useState([]), m = o.useRef(0), b = o.useRef(null);
+  o.useEffect(() => {
+    b.current && (b.current(), b.current = null);
+  }, [f]);
+  const d = o.useRef(!1), k = o.useRef(null), l = o.useRef(null), R = o.useRef(null);
+  o.useEffect(() => () => {
+    clearTimeout(k.current);
+  }, []);
+  const F = o.useCallback((n) => {
+    const {
+      pulsate: g,
+      rippleX: y,
+      rippleY: L,
+      rippleSize: _,
+      cb: O
+    } = n;
+    r((T) => [...T, /* @__PURE__ */ j.jsx(Ge, {
+      classes: {
+        ripple: M(i.ripple, c.ripple),
+        rippleVisible: M(i.rippleVisible, c.rippleVisible),
+        ripplePulsate: M(i.ripplePulsate, c.ripplePulsate),
+        child: M(i.child, c.child),
+        childLeaving: M(i.childLeaving, c.childLeaving),
+        childPulsate: M(i.childPulsate, c.childPulsate)
+      },
+      timeout: Z,
+      pulsate: g,
+      rippleX: y,
+      rippleY: L,
+      rippleSize: _
+    }, m.current)]), m.current += 1, b.current = O;
+  }, [i]), I = o.useCallback((n = {}, g = {}, y = () => {
+  }) => {
+    const {
+      pulsate: L = !1,
+      center: _ = N || g.pulsate,
+      fakeElement: O = !1
+      // For test purposes
+    } = g;
+    if ((n == null ? void 0 : n.type) === "mousedown" && d.current) {
+      d.current = !1;
+      return;
+    }
+    (n == null ? void 0 : n.type) === "touchstart" && (d.current = !0);
+    const T = O ? null : R.current, P = T ? T.getBoundingClientRect() : {
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0
+    };
+    let x, V, D;
+    if (_ || n === void 0 || n.clientX === 0 && n.clientY === 0 || !n.clientX && !n.touches)
+      x = Math.round(P.width / 2), V = Math.round(P.height / 2);
+    else {
+      const {
+        clientX: S,
+        clientY: B
+      } = n.touches && n.touches.length > 0 ? n.touches[0] : n;
+      x = Math.round(S - P.left), V = Math.round(B - P.top);
+    }
+    if (_)
+      D = Math.sqrt((2 * P.width ** 2 + P.height ** 2) / 3), D % 2 === 0 && (D += 1);
+    else {
+      const S = Math.max(Math.abs((T ? T.clientWidth : 0) - x), x) * 2 + 2, B = Math.max(Math.abs((T ? T.clientHeight : 0) - V), V) * 2 + 2;
+      D = Math.sqrt(S ** 2 + B ** 2);
+    }
+    n != null && n.touches ? l.current === null && (l.current = () => {
+      F({
+        pulsate: L,
+        rippleX: x,
+        rippleY: V,
+        rippleSize: D,
+        cb: y
+      });
+    }, k.current = setTimeout(() => {
+      l.current && (l.current(), l.current = null);
+    }, Ae)) : F({
+      pulsate: L,
+      rippleX: x,
+      rippleY: V,
+      rippleSize: D,
+      cb: y
+    });
+  }, [N, F]), K = o.useCallback(() => {
+    I({}, {
+      pulsate: !0
+    });
+  }, [I]), U = o.useCallback((n, g) => {
+    if (clearTimeout(k.current), (n == null ? void 0 : n.type) === "touchend" && l.current) {
+      l.current(), l.current = null, k.current = setTimeout(() => {
+        U(n, g);
+      });
+      return;
+    }
+    l.current = null, r((y) => y.length > 0 ? y.slice(1) : y), b.current = g;
+  }, []);
+  return o.useImperativeHandle(a, () => ({
+    pulsate: K,
+    start: I,
+    stop: U
+  }), [K, I, U]), /* @__PURE__ */ j.jsx(We, v({
+    className: M(c.root, i.root, p),
+    ref: R
+  }, w, {
+    children: /* @__PURE__ */ j.jsx(Fe, {
+      component: null,
+      exit: !0,
+      children: f
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" && (me.propTypes = {
+  /**
+   * If `true`, the ripple starts at the center of the component
+   * rather than at the point of interaction.
+   */
+  center: e.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string
+});
+const Je = me;
+function Qe(s) {
+  return Ue("MuiButtonBase", s);
+}
+const Ze = fe("MuiButtonBase", ["root", "disabled", "focusVisible"]), et = Ze, tt = ["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"], ot = (s) => {
+  const {
+    disabled: C,
+    focusVisible: a,
+    focusVisibleClassName: u,
+    classes: N
+  } = s, p = _e({
+    root: ["root", C && "disabled", a && "focusVisible"]
+  }, Qe, N);
+  return a && u && (p.root += ` ${u}`), p;
+}, nt = ee("button", {
+  name: "MuiButtonBase",
+  slot: "Root",
+  overridesResolver: (s, C) => C.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.
+  },
+  [`&.${et.disabled}`]: {
+    pointerEvents: "none",
+    // Disable link interactions
+    cursor: "default"
+  },
+  "@media print": {
+    colorAdjust: "exact"
+  }
+}), be = /* @__PURE__ */ o.forwardRef(function(C, a) {
+  const u = de({
+    props: C,
+    name: "MuiButtonBase"
+  }), {
+    action: N,
+    centerRipple: i = !1,
+    children: p,
+    className: w,
+    component: f = "button",
+    disabled: r = !1,
+    disableRipple: m = !1,
+    disableTouchRipple: b = !1,
+    focusRipple: d = !1,
+    LinkComponent: k = "a",
+    onBlur: l,
+    onClick: R,
+    onContextMenu: F,
+    onDragLeave: I,
+    onFocus: K,
+    onFocusVisible: U,
+    onKeyDown: n,
+    onKeyUp: g,
+    onMouseDown: y,
+    onMouseLeave: L,
+    onMouseUp: _,
+    onTouchEnd: O,
+    onTouchMove: T,
+    onTouchStart: P,
+    tabIndex: x = 0,
+    TouchRippleProps: V,
+    touchRippleRef: D,
+    type: S
+  } = u, B = pe(u, tt), z = o.useRef(null), h = o.useRef(null), Re = re(h, D), {
+    isFocusVisibleRef: oe,
+    onFocus: ge,
+    onBlur: ye,
+    ref: Te
+  } = Ke(), [$, Y] = o.useState(!1);
+  r && $ && Y(!1), o.useImperativeHandle(N, () => ({
+    focusVisible: () => {
+      Y(!0), z.current.focus();
+    }
+  }), []);
+  const [W, Me] = o.useState(!1);
+  o.useEffect(() => {
+    Me(!0);
+  }, []);
+  const G = W && !m && !r;
+  o.useEffect(() => {
+    $ && d && !m && W && h.current.pulsate();
+  }, [m, d, $, W]);
+  function E(t, se, Ie = b) {
+    return q((ie) => (se && se(ie), !Ie && h.current && h.current[t](ie), !0));
+  }
+  const Ce = E("start", y), xe = E("stop", F), Be = E("stop", I), Ee = E("stop", _), Ne = E("stop", (t) => {
+    $ && t.preventDefault(), L && L(t);
+  }), ke = E("start", P), Pe = E("stop", O), Ve = E("stop", T), De = E("stop", (t) => {
+    ye(t), oe.current === !1 && Y(!1), l && l(t);
+  }, !1), we = q((t) => {
+    z.current || (z.current = t.currentTarget), ge(t), oe.current === !0 && (Y(!0), U && U(t)), K && K(t);
+  }), J = () => {
+    const t = z.current;
+    return f && f !== "button" && !(t.tagName === "A" && t.href);
+  }, Q = o.useRef(!1), Le = q((t) => {
+    d && !Q.current && $ && h.current && t.key === " " && (Q.current = !0, h.current.stop(t, () => {
+      h.current.start(t);
+    })), t.target === t.currentTarget && J() && t.key === " " && t.preventDefault(), n && n(t), t.target === t.currentTarget && J() && t.key === "Enter" && !r && (t.preventDefault(), R && R(t));
+  }), Se = q((t) => {
+    d && t.key === " " && h.current && $ && !t.defaultPrevented && (Q.current = !1, h.current.stop(t, () => {
+      h.current.pulsate(t);
+    })), g && g(t), R && t.target === t.currentTarget && J() && t.key === " " && !t.defaultPrevented && R(t);
+  });
+  let A = f;
+  A === "button" && (B.href || B.to) && (A = k);
+  const X = {};
+  A === "button" ? (X.type = S === void 0 ? "button" : S, X.disabled = r) : (!B.href && !B.to && (X.role = "button"), r && (X["aria-disabled"] = r));
+  const $e = re(a, Te, z);
+  process.env.NODE_ENV !== "production" && o.useEffect(() => {
+    G && !h.current && console.error(["MUI: The `component` prop provided to ButtonBase is invalid.", "Please make sure the children prop is rendered in this custom component."].join(`
+`));
+  }, [G]);
+  const ne = v({}, u, {
+    centerRipple: i,
+    component: f,
+    disabled: r,
+    disableRipple: m,
+    disableTouchRipple: b,
+    focusRipple: d,
+    tabIndex: x,
+    focusVisible: $
+  }), je = ot(ne);
+  return /* @__PURE__ */ j.jsxs(nt, v({
+    as: A,
+    className: M(je.root, w),
+    ownerState: ne,
+    onBlur: De,
+    onClick: R,
+    onContextMenu: xe,
+    onFocus: we,
+    onKeyDown: Le,
+    onKeyUp: Se,
+    onMouseDown: Ce,
+    onMouseLeave: Ne,
+    onMouseUp: Ee,
+    onDragLeave: Be,
+    onTouchEnd: Pe,
+    onTouchMove: Ve,
+    onTouchStart: ke,
+    ref: $e,
+    tabIndex: r ? -1 : x,
+    type: S
+  }, X, B, {
+    children: [p, G ? (
+      /* TouchRipple is only needed client-side, x2 boost on the server. */
+      /* @__PURE__ */ j.jsx(Je, v({
+        ref: Re,
+        center: i
+      }, V))
+    ) : null]
+  }));
+});
+process.env.NODE_ENV !== "production" && (be.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: Oe,
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: e.bool,
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: ze,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ 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
+   */
+  type: e.oneOfType([e.oneOf(["button", "reset", "submit"]), e.string])
+});
+const bt = be;
+export {
+  bt as B
+};

package/dist/Buttons/index.d.ts

@@ -0,0 +1,9 @@
+export { default as KdpaButton } from "./KdpaButton/KdpaButton";
+export { default as KdpaIconButton } from "./KdpaIconButton/KdpaIconButton";
+export { default as KdpaPrimaryButton } from "./KdpaPrimaryButton/KpdaPrimaryButton";
+export { default as KdpaSecondaryButton } from "./KdpaSecondaryButton/KdpaSecondaryButton";
+export type { KdpaButtonProps } from "./KdpaButton/KdpaButton";
+export type { KdpaIconButtonProps } from "./KdpaIconButton/KdpaIconButton";
+export type { KdpaPrimaryButtonProps } from "./KdpaPrimaryButton/KpdaPrimaryButton";
+export type { KdpaSecondaryButtonProps } from "./KdpaSecondaryButton/KdpaSecondaryButton";
+//# sourceMappingURL=index.d.ts.map

package/dist/Buttons/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Buttons/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAE3F,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC/D,YAAY,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,YAAY,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AACpF,YAAY,EAAE,wBAAwB,EAAE,MAAM,2CAA2C,CAAC"}