kdpa-components 1.0.0 → 1.2.0

package/dist/KdpaSkeleton-f8f3aefc.js

@@ -0,0 +1,580 @@
+import { j as l } from "./jsx-dev-runtime-48fdc504.js";
+import { G } from "./iconBase-800b43ff.js";
+import { C as W } from "./CircularProgress-01a8929e.js";
+import { a as i, _ as S } from "./extends-135d7828.js";
+import * as M from "react";
+import { g as V, c as d, j as k, P as n, l as Y, d as H, a as J } from "./identifier-2647f844.js";
+import { g as U, s as x, u as q, c as A, a as z } from "./useThemeProps-ea792506.js";
+import { u as Q } from "./useTheme-6ea322ec.js";
+import { k as C, c as y } from "./emotion-react.browser.esm-3fa5f721.js";
+function Z(e) {
+  return String(e).match(/[\d.\-+]*\s*(.*)/)[1] || "";
+}
+function ee(e) {
+  return parseFloat(e);
+}
+function re(e) {
+  return V("MuiLinearProgress", e);
+}
+U("MuiLinearProgress", ["root", "colorPrimary", "colorSecondary", "determinate", "indeterminate", "buffer", "query", "dashed", "dashedColorPrimary", "dashedColorSecondary", "bar", "barColorPrimary", "barColorSecondary", "bar1Indeterminate", "bar1Determinate", "bar1Buffer", "bar2Indeterminate", "bar2Buffer"]);
+const ae = ["className", "color", "value", "valueBuffer", "variant"];
+let h = (e) => e, j, K, R, O, _, w;
+const P = 4, ne = C(j || (j = h`
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+`)), oe = C(K || (K = h`
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+`)), te = C(R || (R = h`
+  0% {
+    opacity: 1;
+    background-position: 0 -23px;
+  }
+
+  60% {
+    opacity: 0;
+    background-position: 0 -23px;
+  }
+
+  100% {
+    opacity: 1;
+    background-position: -200px -23px;
+  }
+`)), ie = (e) => {
+  const {
+    classes: r,
+    variant: a,
+    color: o
+  } = e, t = {
+    root: ["root", `color${d(o)}`, a],
+    dashed: ["dashed", `dashedColor${d(o)}`],
+    bar1: ["bar", `barColor${d(o)}`, (a === "indeterminate" || a === "query") && "bar1Indeterminate", a === "determinate" && "bar1Determinate", a === "buffer" && "bar1Buffer"],
+    bar2: ["bar", a !== "buffer" && `barColor${d(o)}`, a === "buffer" && `color${d(o)}`, (a === "indeterminate" || a === "query") && "bar2Indeterminate", a === "buffer" && "bar2Buffer"]
+  };
+  return z(t, re, r);
+}, D = (e, r) => r === "inherit" ? "currentColor" : e.vars ? e.vars.palette.LinearProgress[`${r}Bg`] : e.palette.mode === "light" ? Y(e.palette[r].main, 0.62) : H(e.palette[r].main, 0.5), se = x("span", {
+  name: "MuiLinearProgress",
+  slot: "Root",
+  overridesResolver: (e, r) => {
+    const {
+      ownerState: a
+    } = e;
+    return [r.root, r[`color${d(a.color)}`], r[a.variant]];
+  }
+})(({
+  ownerState: e,
+  theme: r
+}) => i({
+  position: "relative",
+  overflow: "hidden",
+  display: "block",
+  height: 4,
+  zIndex: 0,
+  // Fix Safari's bug during composition of different paint.
+  "@media print": {
+    colorAdjust: "exact"
+  },
+  backgroundColor: D(r, e.color)
+}, e.color === "inherit" && e.variant !== "buffer" && {
+  backgroundColor: "none",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "currentColor",
+    opacity: 0.3
+  }
+}, e.variant === "buffer" && {
+  backgroundColor: "transparent"
+}, e.variant === "query" && {
+  transform: "rotate(180deg)"
+})), le = x("span", {
+  name: "MuiLinearProgress",
+  slot: "Dashed",
+  overridesResolver: (e, r) => {
+    const {
+      ownerState: a
+    } = e;
+    return [r.dashed, r[`dashedColor${d(a.color)}`]];
+  }
+})(({
+  ownerState: e,
+  theme: r
+}) => {
+  const a = D(r, e.color);
+  return i({
+    position: "absolute",
+    marginTop: 0,
+    height: "100%",
+    width: "100%"
+  }, e.color === "inherit" && {
+    opacity: 0.3
+  }, {
+    backgroundImage: `radial-gradient(${a} 0%, ${a} 16%, transparent 42%)`,
+    backgroundSize: "10px 10px",
+    backgroundPosition: "0 -23px"
+  });
+}, y(O || (O = h`
+    animation: ${0} 3s infinite linear;
+  `), te)), de = x("span", {
+  name: "MuiLinearProgress",
+  slot: "Bar1",
+  overridesResolver: (e, r) => {
+    const {
+      ownerState: a
+    } = e;
+    return [r.bar, r[`barColor${d(a.color)}`], (a.variant === "indeterminate" || a.variant === "query") && r.bar1Indeterminate, a.variant === "determinate" && r.bar1Determinate, a.variant === "buffer" && r.bar1Buffer];
+  }
+})(({
+  ownerState: e,
+  theme: r
+}) => i({
+  width: "100%",
+  position: "absolute",
+  left: 0,
+  bottom: 0,
+  top: 0,
+  transition: "transform 0.2s linear",
+  transformOrigin: "left",
+  backgroundColor: e.color === "inherit" ? "currentColor" : (r.vars || r).palette[e.color].main
+}, e.variant === "determinate" && {
+  transition: `transform .${P}s linear`
+}, e.variant === "buffer" && {
+  zIndex: 1,
+  transition: `transform .${P}s linear`
+}), ({
+  ownerState: e
+}) => (e.variant === "indeterminate" || e.variant === "query") && y(_ || (_ = h`
+      width: auto;
+      animation: ${0} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    `), ne)), ce = x("span", {
+  name: "MuiLinearProgress",
+  slot: "Bar2",
+  overridesResolver: (e, r) => {
+    const {
+      ownerState: a
+    } = e;
+    return [r.bar, r[`barColor${d(a.color)}`], (a.variant === "indeterminate" || a.variant === "query") && r.bar2Indeterminate, a.variant === "buffer" && r.bar2Buffer];
+  }
+})(({
+  ownerState: e,
+  theme: r
+}) => i({
+  width: "100%",
+  position: "absolute",
+  left: 0,
+  bottom: 0,
+  top: 0,
+  transition: "transform 0.2s linear",
+  transformOrigin: "left"
+}, e.variant !== "buffer" && {
+  backgroundColor: e.color === "inherit" ? "currentColor" : (r.vars || r).palette[e.color].main
+}, e.color === "inherit" && {
+  opacity: 0.3
+}, e.variant === "buffer" && {
+  backgroundColor: D(r, e.color),
+  transition: `transform .${P}s linear`
+}), ({
+  ownerState: e
+}) => (e.variant === "indeterminate" || e.variant === "query") && y(w || (w = h`
+      width: auto;
+      animation: ${0} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+    `), oe)), X = /* @__PURE__ */ M.forwardRef(function(r, a) {
+  const o = q({
+    props: r,
+    name: "MuiLinearProgress"
+  }), {
+    className: t,
+    color: b = "primary",
+    value: s,
+    valueBuffer: u,
+    variant: c = "indeterminate"
+  } = o, $ = S(o, ae), p = i({}, o, {
+    color: b,
+    variant: c
+  }), f = ie(p), v = Q(), g = {}, N = {
+    bar1: {},
+    bar2: {}
+  };
+  if (c === "determinate" || c === "buffer")
+    if (s !== void 0) {
+      g["aria-valuenow"] = Math.round(s), g["aria-valuemin"] = 0, g["aria-valuemax"] = 100;
+      let m = s - 100;
+      v.direction === "rtl" && (m = -m), N.bar1.transform = `translateX(${m}%)`;
+    } else
+      process.env.NODE_ENV !== "production" && console.error("MUI: You need to provide a value prop when using the determinate or buffer variant of LinearProgress .");
+  if (c === "buffer")
+    if (u !== void 0) {
+      let m = (u || 0) - 100;
+      v.direction === "rtl" && (m = -m), N.bar2.transform = `translateX(${m}%)`;
+    } else
+      process.env.NODE_ENV !== "production" && console.error("MUI: You need to provide a valueBuffer prop when using the buffer variant of LinearProgress.");
+  return /* @__PURE__ */ k.jsxs(se, i({
+    className: A(f.root, t),
+    ownerState: p,
+    role: "progressbar"
+  }, g, {
+    ref: a
+  }, $, {
+    children: [c === "buffer" ? /* @__PURE__ */ k.jsx(le, {
+      className: f.dashed,
+      ownerState: p
+    }) : null, /* @__PURE__ */ k.jsx(de, {
+      className: f.bar1,
+      ownerState: p,
+      style: N.bar1
+    }), c === "determinate" ? null : /* @__PURE__ */ k.jsx(ce, {
+      className: f.bar2,
+      ownerState: p,
+      style: N.bar2
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" && (X.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.object,
+  /**
+   * @ignore
+   */
+  className: n.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
+   * @default 'primary'
+   */
+  color: n.oneOfType([n.oneOf(["inherit", "primary", "secondary"]), n.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  /**
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between 0 and 100.
+   */
+  value: n.number,
+  /**
+   * The value for the buffer variant.
+   * Value between 0 and 100.
+   */
+  valueBuffer: n.number,
+  /**
+   * The variant to use.
+   * Use indeterminate or query when there is no progress value.
+   * @default 'indeterminate'
+   */
+  variant: n.oneOf(["buffer", "determinate", "indeterminate", "query"])
+});
+const ue = X;
+function pe(e) {
+  return V("MuiSkeleton", e);
+}
+U("MuiSkeleton", ["root", "text", "rectangular", "rounded", "circular", "pulse", "wave", "withChildren", "fitContent", "heightAuto"]);
+const fe = ["animation", "className", "component", "height", "style", "variant", "width"];
+let L = (e) => e, I, T, B, E;
+const me = (e) => {
+  const {
+    classes: r,
+    variant: a,
+    animation: o,
+    hasChildren: t,
+    width: b,
+    height: s
+  } = e;
+  return z({
+    root: ["root", a, o, t && "withChildren", t && !b && "fitContent", t && !s && "heightAuto"]
+  }, pe, r);
+}, be = C(I || (I = L`
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`)), ge = C(T || (T = L`
+  0% {
+    transform: translateX(-100%);
+  }
+
+  50% {
+    /* +0.5s of delay between each loop */
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+`)), he = x("span", {
+  name: "MuiSkeleton",
+  slot: "Root",
+  overridesResolver: (e, r) => {
+    const {
+      ownerState: a
+    } = e;
+    return [r.root, r[a.variant], a.animation !== !1 && r[a.animation], a.hasChildren && r.withChildren, a.hasChildren && !a.width && r.fitContent, a.hasChildren && !a.height && r.heightAuto];
+  }
+})(({
+  theme: e,
+  ownerState: r
+}) => {
+  const a = Z(e.shape.borderRadius) || "px", o = ee(e.shape.borderRadius);
+  return i({
+    display: "block",
+    // Create a "on paper" color with sufficient contrast retaining the color
+    backgroundColor: e.vars ? e.vars.palette.Skeleton.bg : J(e.palette.text.primary, e.palette.mode === "light" ? 0.11 : 0.13),
+    height: "1.2em"
+  }, r.variant === "text" && {
+    marginTop: 0,
+    marginBottom: 0,
+    height: "auto",
+    transformOrigin: "0 55%",
+    transform: "scale(1, 0.60)",
+    borderRadius: `${o}${a}/${Math.round(o / 0.6 * 10) / 10}${a}`,
+    "&:empty:before": {
+      content: '"\\00a0"'
+    }
+  }, r.variant === "circular" && {
+    borderRadius: "50%"
+  }, r.variant === "rounded" && {
+    borderRadius: (e.vars || e).shape.borderRadius
+  }, r.hasChildren && {
+    "& > *": {
+      visibility: "hidden"
+    }
+  }, r.hasChildren && !r.width && {
+    maxWidth: "fit-content"
+  }, r.hasChildren && !r.height && {
+    height: "auto"
+  });
+}, ({
+  ownerState: e
+}) => e.animation === "pulse" && y(B || (B = L`
+      animation: ${0} 1.5s ease-in-out 0.5s infinite;
+    `), be), ({
+  ownerState: e,
+  theme: r
+}) => e.animation === "wave" && y(E || (E = L`
+      position: relative;
+      overflow: hidden;
+
+      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
+      -webkit-mask-image: -webkit-radial-gradient(white, black);
+
+      &::after {
+        animation: ${0} 1.6s linear 0.5s infinite;
+        background: linear-gradient(
+          90deg,
+          transparent,
+          ${0},
+          transparent
+        );
+        content: '';
+        position: absolute;
+        transform: translateX(-100%); /* Avoid flash during server-side hydration */
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+      }
+    `), ge, (r.vars || r).palette.action.hover)), F = /* @__PURE__ */ M.forwardRef(function(r, a) {
+  const o = q({
+    props: r,
+    name: "MuiSkeleton"
+  }), {
+    animation: t = "pulse",
+    className: b,
+    component: s = "span",
+    height: u,
+    style: c,
+    variant: $ = "text",
+    width: p
+  } = o, f = S(o, fe), v = i({}, o, {
+    animation: t,
+    component: s,
+    variant: $,
+    hasChildren: !!f.children
+  }), g = me(v);
+  return /* @__PURE__ */ k.jsx(he, i({
+    as: s,
+    ref: a,
+    className: A(g.root, b),
+    ownerState: v
+  }, f, {
+    style: i({
+      width: p,
+      height: u
+    }, c)
+  }));
+});
+process.env.NODE_ENV !== "production" && (F.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.
+   * If `false` the animation effect is disabled.
+   * @default 'pulse'
+   */
+  animation: n.oneOf(["pulse", "wave", !1]),
+  /**
+   * Optional children to infer width and height from.
+   */
+  children: n.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.object,
+  /**
+   * @ignore
+   */
+  className: n.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: n.elementType,
+  /**
+   * Height of the skeleton.
+   * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+   */
+  height: n.oneOfType([n.number, n.string]),
+  /**
+   * @ignore
+   */
+  style: n.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: n.oneOfType([n.arrayOf(n.oneOfType([n.func, n.object, n.bool])), n.func, n.object]),
+  /**
+   * The type of content that will be rendered.
+   * @default 'text'
+   */
+  variant: n.oneOfType([n.oneOf(["circular", "rectangular", "rounded", "text"]), n.string]),
+  /**
+   * Width of the skeleton.
+   * Useful when the skeleton is inside an inline element with no width of its own.
+   */
+  width: n.oneOfType([n.number, n.string])
+});
+const ve = F;
+function ke(e) {
+  return G({ tag: "svg", attr: { viewBox: "0 0 16 16", fill: "currentColor" }, child: [{ tag: "path", attr: { fillRule: "evenodd", clipRule: "evenodd", d: "M13.917 7A6.002 6.002 0 0 0 2.083 7H1.071a7.002 7.002 0 0 1 13.858 0h-1.012z" } }] })(e);
+}
+const je = ({
+  size: e = 18,
+  customIcon: r = ke,
+  className: a,
+  style: o
+}) => /* @__PURE__ */ l.jsxDEV("div", { className: "kdpa-inline-spinner", style: o, children: /* @__PURE__ */ l.jsxDEV(r, { size: e, className: `inline-spinner ${a}` }, void 0, !1, {
+  fileName: "D:/a.dakhili/kdpa/packages/components/src/components/Loading/KdpaInlineSpinner/KdpaInlineSpinner.tsx",
+  lineNumber: 22,
+  columnNumber: 7
+}, globalThis) }, void 0, !1, {
+  fileName: "D:/a.dakhili/kdpa/packages/components/src/components/Loading/KdpaInlineSpinner/KdpaInlineSpinner.tsx",
+  lineNumber: 21,
+  columnNumber: 5
+}, globalThis);
+function Ke({
+  children: e,
+  loading: r = !1,
+  fade: a = !0,
+  type: o = "spinner",
+  value: t,
+  position: b = "center",
+  color: s = "",
+  size: u = 30
+}) {
+  return r ? /* @__PURE__ */ l.jsxDEV("div", { children: [
+    /* @__PURE__ */ l.jsxDEV("div", { children: e }, void 0, !1, {
+      fileName: "D:/a.dakhili/kdpa/packages/components/src/components/Loading/KdpaLoading/KdpaLoading.tsx",
+      lineNumber: 62,
+      columnNumber: 7
+    }, this),
+    o === "spinner" ? /* @__PURE__ */ l.jsxDEV(
+      W,
+      {
+        size: u,
+        ...t ? { value: t, variant: "determinate" } : { variant: "indeterminate" }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "D:/a.dakhili/kdpa/packages/components/src/components/Loading/KdpaLoading/KdpaLoading.tsx",
+        lineNumber: 64,
+        columnNumber: 9
+      },
+      this
+    ) : /* @__PURE__ */ l.jsxDEV(
+      ue,
+      {
+        ...t ? { value: t, variant: "determinate" } : { variant: "indeterminate" }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "D:/a.dakhili/kdpa/packages/components/src/components/Loading/KdpaLoading/KdpaLoading.tsx",
+        lineNumber: 72,
+        columnNumber: 9
+      },
+      this
+    )
+  ] }, void 0, !0, {
+    fileName: "D:/a.dakhili/kdpa/packages/components/src/components/Loading/KdpaLoading/KdpaLoading.tsx",
+    lineNumber: 61,
+    columnNumber: 5
+  }, this) : /* @__PURE__ */ l.jsxDEV(l.Fragment, { children: e }, void 0, !1, {
+    fileName: "D:/a.dakhili/kdpa/packages/components/src/components/Loading/KdpaLoading/KdpaLoading.tsx",
+    lineNumber: 81,
+    columnNumber: 5
+  }, this);
+}
+const Re = (e) => /* @__PURE__ */ l.jsxDEV(ve, { ...e, children: e.children }, void 0, !1, {
+  fileName: "D:/a.dakhili/kdpa/packages/components/src/components/Loading/KdpaSkeleton/KdpaSkeleton.tsx",
+  lineNumber: 6,
+  columnNumber: 10
+}, globalThis);
+export {
+  Ke as B,
+  je as K,
+  Re as a
+};