@amateescu/portal-ui-components 0.0.13 → 0.0.15-beta0

package/dist/Skeleton-CxzINLDP.js

@@ -0,0 +1,565 @@
+import { a as F } from "./objectWithoutPropertiesLoose-CIT-1_kH.js";
+import * as i from "react";
+import { I as G, c as p, g as W, m as _, K as D, u as X, C as k, o as z, _ as K } from "./useId-D0OLY2mt.js";
+var J = { icon: { tag: "svg", attrs: { "fill-rule": "evenodd", viewBox: "64 64 896 896", focusable: "false" }, children: [{ tag: "path", attrs: { d: "M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" } }] }, name: "close", theme: "outlined" }, Q = function(t, s) {
+  return /* @__PURE__ */ i.createElement(G, F({}, t, {
+    ref: s,
+    icon: J
+  }));
+}, U = /* @__PURE__ */ i.forwardRef(Q);
+process.env.NODE_ENV !== "production" && (U.displayName = "CloseOutlined");
+const w = (e) => {
+  const {
+    prefixCls: t,
+    className: s,
+    style: n,
+    size: a,
+    shape: r
+  } = e, c = p({
+    [`${t}-lg`]: a === "large",
+    [`${t}-sm`]: a === "small"
+  }), l = p({
+    [`${t}-circle`]: r === "circle",
+    [`${t}-square`]: r === "square",
+    [`${t}-round`]: r === "round"
+  }), o = i.useMemo(() => typeof a == "number" ? {
+    width: a,
+    height: a,
+    lineHeight: `${a}px`
+  } : {}, [a]);
+  return /* @__PURE__ */ i.createElement("span", {
+    className: p(t, c, l, s),
+    style: Object.assign(Object.assign({}, o), n)
+  });
+}, Y = new D("ant-skeleton-loading", {
+  "0%": {
+    backgroundPosition: "100% 50%"
+  },
+  "100%": {
+    backgroundPosition: "0 50%"
+  }
+}), E = (e) => ({
+  height: e,
+  lineHeight: X(e)
+}), f = (e) => Object.assign({
+  width: e
+}, E(e)), Z = (e) => ({
+  background: e.skeletonLoadingBackground,
+  backgroundSize: "400% 100%",
+  animationName: Y,
+  animationDuration: e.skeletonLoadingMotionDuration,
+  animationTimingFunction: "ease",
+  animationIterationCount: "infinite"
+}), H = (e, t) => Object.assign({
+  width: t(e).mul(5).equal(),
+  minWidth: t(e).mul(5).equal()
+}, E(e)), ee = (e) => {
+  const {
+    skeletonAvatarCls: t,
+    gradientFromColor: s,
+    controlHeight: n,
+    controlHeightLG: a,
+    controlHeightSM: r
+  } = e;
+  return {
+    [t]: Object.assign({
+      display: "inline-block",
+      verticalAlign: "top",
+      background: s
+    }, f(n)),
+    [`${t}${t}-circle`]: {
+      borderRadius: "50%"
+    },
+    [`${t}${t}-lg`]: Object.assign({}, f(a)),
+    [`${t}${t}-sm`]: Object.assign({}, f(r))
+  };
+}, te = (e) => {
+  const {
+    controlHeight: t,
+    borderRadiusSM: s,
+    skeletonInputCls: n,
+    controlHeightLG: a,
+    controlHeightSM: r,
+    gradientFromColor: c,
+    calc: l
+  } = e;
+  return {
+    [n]: Object.assign({
+      display: "inline-block",
+      verticalAlign: "top",
+      background: c,
+      borderRadius: s
+    }, H(t, l)),
+    [`${n}-lg`]: Object.assign({}, H(a, l)),
+    [`${n}-sm`]: Object.assign({}, H(r, l))
+  };
+}, V = (e) => Object.assign({
+  width: e
+}, E(e)), se = (e) => {
+  const {
+    skeletonImageCls: t,
+    imageSizeBase: s,
+    gradientFromColor: n,
+    borderRadiusSM: a,
+    calc: r
+  } = e;
+  return {
+    [t]: Object.assign(Object.assign({
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      verticalAlign: "middle",
+      background: n,
+      borderRadius: a
+    }, V(r(s).mul(2).equal())), {
+      [`${t}-path`]: {
+        fill: "#bfbfbf"
+      },
+      [`${t}-svg`]: Object.assign(Object.assign({}, V(s)), {
+        maxWidth: r(s).mul(4).equal(),
+        maxHeight: r(s).mul(4).equal()
+      }),
+      [`${t}-svg${t}-svg-circle`]: {
+        borderRadius: "50%"
+      }
+    }),
+    [`${t}${t}-circle`]: {
+      borderRadius: "50%"
+    }
+  };
+}, B = (e, t, s) => {
+  const {
+    skeletonButtonCls: n
+  } = e;
+  return {
+    [`${s}${n}-circle`]: {
+      width: t,
+      minWidth: t,
+      borderRadius: "50%"
+    },
+    [`${s}${n}-round`]: {
+      borderRadius: t
+    }
+  };
+}, R = (e, t) => Object.assign({
+  width: t(e).mul(2).equal(),
+  minWidth: t(e).mul(2).equal()
+}, E(e)), ne = (e) => {
+  const {
+    borderRadiusSM: t,
+    skeletonButtonCls: s,
+    controlHeight: n,
+    controlHeightLG: a,
+    controlHeightSM: r,
+    gradientFromColor: c,
+    calc: l
+  } = e;
+  return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+    [s]: Object.assign({
+      display: "inline-block",
+      verticalAlign: "top",
+      background: c,
+      borderRadius: t,
+      width: l(n).mul(2).equal(),
+      minWidth: l(n).mul(2).equal()
+    }, R(n, l))
+  }, B(e, n, s)), {
+    [`${s}-lg`]: Object.assign({}, R(a, l))
+  }), B(e, a, `${s}-lg`)), {
+    [`${s}-sm`]: Object.assign({}, R(r, l))
+  }), B(e, r, `${s}-sm`));
+}, ae = (e) => {
+  const {
+    componentCls: t,
+    skeletonAvatarCls: s,
+    skeletonTitleCls: n,
+    skeletonParagraphCls: a,
+    skeletonButtonCls: r,
+    skeletonInputCls: c,
+    skeletonImageCls: l,
+    controlHeight: o,
+    controlHeightLG: d,
+    controlHeightSM: m,
+    gradientFromColor: g,
+    padding: h,
+    marginSM: C,
+    borderRadius: b,
+    titleHeight: u,
+    blockRadius: O,
+    paragraphLiHeight: y,
+    controlHeightXS: P,
+    paragraphMarginTop: $
+  } = e;
+  return {
+    [t]: {
+      display: "table",
+      width: "100%",
+      [`${t}-header`]: {
+        display: "table-cell",
+        paddingInlineEnd: h,
+        verticalAlign: "top",
+        // Avatar
+        [s]: Object.assign({
+          display: "inline-block",
+          verticalAlign: "top",
+          background: g
+        }, f(o)),
+        [`${s}-circle`]: {
+          borderRadius: "50%"
+        },
+        [`${s}-lg`]: Object.assign({}, f(d)),
+        [`${s}-sm`]: Object.assign({}, f(m))
+      },
+      [`${t}-content`]: {
+        display: "table-cell",
+        width: "100%",
+        verticalAlign: "top",
+        // Title
+        [n]: {
+          width: "100%",
+          height: u,
+          background: g,
+          borderRadius: O,
+          [`+ ${a}`]: {
+            marginBlockStart: m
+          }
+        },
+        // paragraph
+        [a]: {
+          padding: 0,
+          "> li": {
+            width: "100%",
+            height: y,
+            listStyle: "none",
+            background: g,
+            borderRadius: O,
+            "+ li": {
+              marginBlockStart: P
+            }
+          }
+        },
+        [`${a}> li:last-child:not(:first-child):not(:nth-child(2))`]: {
+          width: "61%"
+        }
+      },
+      [`&-round ${t}-content`]: {
+        [`${n}, ${a} > li`]: {
+          borderRadius: b
+        }
+      }
+    },
+    [`${t}-with-avatar ${t}-content`]: {
+      // Title
+      [n]: {
+        marginBlockStart: C,
+        [`+ ${a}`]: {
+          marginBlockStart: $
+        }
+      }
+    },
+    // Skeleton element
+    [`${t}${t}-element`]: Object.assign(Object.assign(Object.assign(Object.assign({
+      display: "inline-block",
+      width: "auto"
+    }, ne(e)), ee(e)), te(e)), se(e)),
+    // Skeleton Block Button, Input
+    [`${t}${t}-block`]: {
+      width: "100%",
+      [r]: {
+        width: "100%"
+      },
+      [c]: {
+        width: "100%"
+      }
+    },
+    // With active animation
+    [`${t}${t}-active`]: {
+      [`
+        ${n},
+        ${a} > li,
+        ${s},
+        ${r},
+        ${c},
+        ${l}
+      `]: Object.assign({}, Z(e))
+    }
+  };
+}, le = (e) => {
+  const {
+    colorFillContent: t,
+    colorFill: s
+  } = e, n = t, a = s;
+  return {
+    color: n,
+    colorGradientEnd: a,
+    gradientFromColor: n,
+    gradientToColor: a,
+    titleHeight: e.controlHeight / 2,
+    blockRadius: e.borderRadiusSM,
+    paragraphMarginTop: e.marginLG + e.marginXXS,
+    paragraphLiHeight: e.controlHeight / 2
+  };
+}, v = W("Skeleton", (e) => {
+  const {
+    componentCls: t,
+    calc: s
+  } = e, n = _(e, {
+    skeletonAvatarCls: `${t}-avatar`,
+    skeletonTitleCls: `${t}-title`,
+    skeletonParagraphCls: `${t}-paragraph`,
+    skeletonButtonCls: `${t}-button`,
+    skeletonInputCls: `${t}-input`,
+    skeletonImageCls: `${t}-image`,
+    imageSizeBase: s(e.controlHeight).mul(1.5).equal(),
+    borderRadius: 100,
+    // Large number to make capsule shape
+    skeletonLoadingBackground: `linear-gradient(90deg, ${e.gradientFromColor} 25%, ${e.gradientToColor} 37%, ${e.gradientFromColor} 63%)`,
+    skeletonLoadingMotionDuration: "1.4s"
+  });
+  return [ae(n)];
+}, le, {
+  deprecatedTokens: [["color", "gradientFromColor"], ["colorGradientEnd", "gradientToColor"]]
+}), oe = (e) => {
+  const {
+    prefixCls: t,
+    className: s,
+    rootClassName: n,
+    active: a,
+    shape: r = "circle",
+    size: c = "default"
+  } = e, {
+    getPrefixCls: l
+  } = i.useContext(k), o = l("skeleton", t), [d, m, g] = v(o), h = z(e, ["prefixCls", "className"]), C = p(o, `${o}-element`, {
+    [`${o}-active`]: a
+  }, s, n, m, g);
+  return d(/* @__PURE__ */ i.createElement("div", {
+    className: C
+  }, /* @__PURE__ */ i.createElement(w, Object.assign({
+    prefixCls: `${o}-avatar`,
+    shape: r,
+    size: c
+  }, h))));
+}, ie = (e) => {
+  const {
+    prefixCls: t,
+    className: s,
+    rootClassName: n,
+    active: a,
+    block: r = !1,
+    size: c = "default"
+  } = e, {
+    getPrefixCls: l
+  } = i.useContext(k), o = l("skeleton", t), [d, m, g] = v(o), h = z(e, ["prefixCls"]), C = p(o, `${o}-element`, {
+    [`${o}-active`]: a,
+    [`${o}-block`]: r
+  }, s, n, m, g);
+  return d(/* @__PURE__ */ i.createElement("div", {
+    className: C
+  }, /* @__PURE__ */ i.createElement(w, Object.assign({
+    prefixCls: `${o}-button`,
+    size: c
+  }, h))));
+}, re = "M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z", ce = (e) => {
+  const {
+    prefixCls: t,
+    className: s,
+    rootClassName: n,
+    style: a,
+    active: r
+  } = e, {
+    getPrefixCls: c
+  } = i.useContext(k), l = c("skeleton", t), [o, d, m] = v(l), g = p(l, `${l}-element`, {
+    [`${l}-active`]: r
+  }, s, n, d, m);
+  return o(/* @__PURE__ */ i.createElement("div", {
+    className: g
+  }, /* @__PURE__ */ i.createElement("div", {
+    className: p(`${l}-image`, s),
+    style: a
+  }, /* @__PURE__ */ i.createElement("svg", {
+    viewBox: "0 0 1098 1024",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: `${l}-image-svg`
+  }, /* @__PURE__ */ i.createElement("title", null, "Image placeholder"), /* @__PURE__ */ i.createElement("path", {
+    d: re,
+    className: `${l}-image-path`
+  })))));
+}, ge = (e) => {
+  const {
+    prefixCls: t,
+    className: s,
+    rootClassName: n,
+    active: a,
+    block: r,
+    size: c = "default"
+  } = e, {
+    getPrefixCls: l
+  } = i.useContext(k), o = l("skeleton", t), [d, m, g] = v(o), h = z(e, ["prefixCls"]), C = p(o, `${o}-element`, {
+    [`${o}-active`]: a,
+    [`${o}-block`]: r
+  }, s, n, m, g);
+  return d(/* @__PURE__ */ i.createElement("div", {
+    className: C
+  }, /* @__PURE__ */ i.createElement(w, Object.assign({
+    prefixCls: `${o}-input`,
+    size: c
+  }, h))));
+}, de = (e) => {
+  const {
+    prefixCls: t,
+    className: s,
+    rootClassName: n,
+    style: a,
+    active: r,
+    children: c
+  } = e, {
+    getPrefixCls: l
+  } = i.useContext(k), o = l("skeleton", t), [d, m, g] = v(o), h = p(o, `${o}-element`, {
+    [`${o}-active`]: r
+  }, m, s, n, g);
+  return d(/* @__PURE__ */ i.createElement("div", {
+    className: h
+  }, /* @__PURE__ */ i.createElement("div", {
+    className: p(`${o}-image`, s),
+    style: a
+  }, c)));
+}, me = (e, t) => {
+  const {
+    width: s,
+    rows: n = 2
+  } = t;
+  if (Array.isArray(s))
+    return s[e];
+  if (n - 1 === e)
+    return s;
+}, ue = (e) => {
+  const {
+    prefixCls: t,
+    className: s,
+    style: n,
+    rows: a
+  } = e, r = K(new Array(a)).map((c, l) => (
+    // eslint-disable-next-line react/no-array-index-key
+    /* @__PURE__ */ i.createElement("li", {
+      key: l,
+      style: {
+        width: me(l, e)
+      }
+    })
+  ));
+  return /* @__PURE__ */ i.createElement("ul", {
+    className: p(t, s),
+    style: n
+  }, r);
+}, pe = (e) => {
+  let {
+    prefixCls: t,
+    className: s,
+    width: n,
+    style: a
+  } = e;
+  return (
+    // biome-ignore lint/a11y/useHeadingContent: HOC here
+    /* @__PURE__ */ i.createElement("h3", {
+      className: p(t, s),
+      style: Object.assign({
+        width: n
+      }, a)
+    })
+  );
+};
+function q(e) {
+  return e && typeof e == "object" ? e : {};
+}
+function he(e, t) {
+  return e && !t ? {
+    size: "large",
+    shape: "square"
+  } : {
+    size: "large",
+    shape: "circle"
+  };
+}
+function Ce(e, t) {
+  return !e && t ? {
+    width: "38%"
+  } : e && t ? {
+    width: "50%"
+  } : {};
+}
+function be(e, t) {
+  const s = {};
+  return (!e || !t) && (s.width = "61%"), !e && t ? s.rows = 3 : s.rows = 2, s;
+}
+const S = (e) => {
+  const {
+    prefixCls: t,
+    loading: s,
+    className: n,
+    rootClassName: a,
+    style: r,
+    children: c,
+    avatar: l = !1,
+    title: o = !0,
+    paragraph: d = !0,
+    active: m,
+    round: g
+  } = e, {
+    getPrefixCls: h,
+    direction: C,
+    skeleton: b
+  } = i.useContext(k), u = h("skeleton", t), [O, y, P] = v(u);
+  if (s || !("loading" in e)) {
+    const $ = !!l, x = !!o, j = !!d;
+    let M;
+    if ($) {
+      const N = Object.assign(Object.assign({
+        prefixCls: `${u}-avatar`
+      }, he(x, j)), q(l));
+      M = /* @__PURE__ */ i.createElement("div", {
+        className: `${u}-header`
+      }, /* @__PURE__ */ i.createElement(w, Object.assign({}, N)));
+    }
+    let A;
+    if (x || j) {
+      let N;
+      if (x) {
+        const I = Object.assign(Object.assign({
+          prefixCls: `${u}-title`
+        }, Ce($, j)), q(o));
+        N = /* @__PURE__ */ i.createElement(pe, Object.assign({}, I));
+      }
+      let L;
+      if (j) {
+        const I = Object.assign(Object.assign({
+          prefixCls: `${u}-paragraph`
+        }, be($, x)), q(d));
+        L = /* @__PURE__ */ i.createElement(ue, Object.assign({}, I));
+      }
+      A = /* @__PURE__ */ i.createElement("div", {
+        className: `${u}-content`
+      }, N, L);
+    }
+    const T = p(u, {
+      [`${u}-with-avatar`]: $,
+      [`${u}-active`]: m,
+      [`${u}-rtl`]: C === "rtl",
+      [`${u}-round`]: g
+    }, b == null ? void 0 : b.className, n, a, y, P);
+    return O(/* @__PURE__ */ i.createElement("div", {
+      className: T,
+      style: Object.assign(Object.assign({}, b == null ? void 0 : b.style), r)
+    }, M, A));
+  }
+  return c ?? null;
+};
+S.Button = ie;
+S.Avatar = oe;
+S.Input = ge;
+S.Image = ce;
+S.Node = de;
+process.env.NODE_ENV !== "production" && (S.displayName = "Skeleton");
+export {
+  U as R,
+  S
+};