@hybridcore/ui 1.6.0 → 1.6.2

package/dist/components/sortable-list/index.js

@@ -0,0 +1,599 @@
+var Z = Object.defineProperty;
+var ee = (r, l, c) => l in r ? Z(r, l, { enumerable: !0, configurable: !0, writable: !0, value: c }) : r[l] = c;
+var q = (r, l, c) => ee(r, typeof l != "symbol" ? l + "" : l, c);
+import { jsx as C, jsxs as B } from "react/jsx-runtime";
+import te from "sortablejs";
+import * as se from "react";
+import oe from "react";
+import { g as ne } from "../../_commonjsHelpers-BVfed4GL.js";
+import { useSortableListLogic as re } from "./logic.js";
+import { SortableListRoot as ae, SortableListItem as le } from "./styled.js";
+import { a as M, _ as ie } from "../../objectWithoutPropertiesLoose-DJteAcBH.js";
+import { P as f } from "../../index-C__OZmYy.js";
+import { c as ce } from "../../clsx-OuTLNxxd.js";
+import { g as de, a as pe, s as j, u as fe, c as ue } from "../../generateUtilityClasses-C3ivN9Ie.js";
+import { T as R } from "../../Typography-DgsSLCFC.js";
+function be(r) {
+  return pe("MuiCardHeader", r);
+}
+const G = de("MuiCardHeader", ["root", "avatar", "action", "content", "title", "subheader"]), he = ["action", "avatar", "className", "component", "disableTypography", "subheader", "subheaderTypographyProps", "title", "titleTypographyProps"], me = (r) => {
+  const {
+    classes: l
+  } = r;
+  return ue({
+    root: ["root"],
+    avatar: ["avatar"],
+    action: ["action"],
+    content: ["content"],
+    title: ["title"],
+    subheader: ["subheader"]
+  }, be, l);
+}, xe = j("div", {
+  name: "MuiCardHeader",
+  slot: "Root",
+  overridesResolver: (r, l) => M({
+    [`& .${G.title}`]: l.title,
+    [`& .${G.subheader}`]: l.subheader
+  }, l.root)
+})({
+  display: "flex",
+  alignItems: "center",
+  padding: 16
+}), $e = j("div", {
+  name: "MuiCardHeader",
+  slot: "Avatar",
+  overridesResolver: (r, l) => l.avatar
+})({
+  display: "flex",
+  flex: "0 0 auto",
+  marginRight: 16
+}), ge = j("div", {
+  name: "MuiCardHeader",
+  slot: "Action",
+  overridesResolver: (r, l) => l.action
+})({
+  flex: "0 0 auto",
+  alignSelf: "flex-start",
+  marginTop: -4,
+  marginRight: -8,
+  marginBottom: -4
+}), ye = j("div", {
+  name: "MuiCardHeader",
+  slot: "Content",
+  overridesResolver: (r, l) => l.content
+})({
+  flex: "1 1 auto"
+}), W = /* @__PURE__ */ se.forwardRef(function(l, c) {
+  const b = fe({
+    props: l,
+    name: "MuiCardHeader"
+  }), {
+    action: g,
+    avatar: d,
+    className: u,
+    component: O = "div",
+    disableTypography: $ = !1,
+    subheader: N,
+    subheaderTypographyProps: E,
+    title: H,
+    titleTypographyProps: L
+  } = b, D = ie(b, he), w = M({}, b, {
+    component: O,
+    disableTypography: $
+  }), y = me(w);
+  let v = H;
+  v != null && v.type !== R && !$ && (v = /* @__PURE__ */ C(R, M({
+    variant: d ? "body2" : "h5",
+    className: y.title,
+    component: "span",
+    display: "block"
+  }, L, {
+    children: v
+  })));
+  let S = N;
+  return S != null && S.type !== R && !$ && (S = /* @__PURE__ */ C(R, M({
+    variant: d ? "body2" : "body1",
+    className: y.subheader,
+    color: "text.secondary",
+    component: "span",
+    display: "block"
+  }, E, {
+    children: S
+  }))), /* @__PURE__ */ B(xe, M({
+    className: ce(y.root, u),
+    as: O,
+    ref: c,
+    ownerState: w
+  }, D, {
+    children: [d && /* @__PURE__ */ C($e, {
+      className: y.avatar,
+      ownerState: w,
+      children: d
+    }), /* @__PURE__ */ B(ye, {
+      className: y.content,
+      ownerState: w,
+      children: [v, S]
+    }), g && /* @__PURE__ */ C(ge, {
+      className: y.action,
+      ownerState: w,
+      children: g
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" && (W.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The action to display in the card header.
+   */
+  action: f.node,
+  /**
+   * The Avatar element to display.
+   */
+  avatar: f.node,
+  /**
+   * @ignore
+   */
+  children: f.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: f.object,
+  /**
+   * @ignore
+   */
+  className: f.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: f.elementType,
+  /**
+   * If `true`, `subheader` and `title` won't be wrapped by a Typography component.
+   * This can be useful to render an alternative Typography variant by wrapping
+   * the `title` text, and optional `subheader` text
+   * with the Typography component.
+   * @default false
+   */
+  disableTypography: f.bool,
+  /**
+   * The content of the component.
+   */
+  subheader: f.node,
+  /**
+   * These props will be forwarded to the subheader
+   * (as long as disableTypography is not `true`).
+   */
+  subheaderTypographyProps: f.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: f.oneOfType([f.arrayOf(f.oneOfType([f.func, f.object, f.bool])), f.func, f.object]),
+  /**
+   * The content of the component.
+   */
+  title: f.node,
+  /**
+   * These props will be forwarded to the title
+   * (as long as disableTypography is not `true`).
+   */
+  titleTypographyProps: f.object
+});
+var J = { exports: {} }, K = { exports: {} };
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+(function(r) {
+  (function() {
+    var l = {}.hasOwnProperty;
+    function c() {
+      for (var b = [], g = 0; g < arguments.length; g++) {
+        var d = arguments[g];
+        if (d) {
+          var u = typeof d;
+          if (u === "string" || u === "number")
+            b.push(d);
+          else if (Array.isArray(d)) {
+            if (d.length) {
+              var O = c.apply(null, d);
+              O && b.push(O);
+            }
+          } else if (u === "object")
+            if (d.toString === Object.prototype.toString)
+              for (var $ in d)
+                l.call(d, $) && d[$] && b.push($);
+            else
+              b.push(d.toString());
+        }
+      }
+      return b.join(" ");
+    }
+    r.exports ? (c.default = c, r.exports = c) : window.classNames = c;
+  })();
+})(K);
+var we = K.exports, ve = process.env.NODE_ENV === "production", U = "Invariant failed";
+function Ce(r, l) {
+  if (!r) {
+    if (ve)
+      throw new Error(U);
+    var c = typeof l == "function" ? l() : l, b = c ? U + ": " + c : U;
+    throw new Error(b);
+  }
+}
+const Oe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Ce
+}, Symbol.toStringTag, { value: "Module" })), Se = /* @__PURE__ */ ne(Oe);
+(function(r) {
+  var l = te, c = we, b = oe, g = Se;
+  function d(s) {
+    return s && s.__esModule ? s.default : s;
+  }
+  function u(s, e, t, o) {
+    Object.defineProperty(s, e, { get: t, set: o, enumerable: !0, configurable: !0 });
+  }
+  function O(s, e) {
+    return Object.keys(e).forEach(function(t) {
+      t === "default" || t === "__esModule" || s.hasOwnProperty(t) || Object.defineProperty(s, t, {
+        enumerable: !0,
+        get: function() {
+          return e[t];
+        }
+      });
+    }), s;
+  }
+  u(r.exports, "Sortable", () => $882b6d93070905b3$re_export$Sortable), u(r.exports, "Direction", () => $882b6d93070905b3$re_export$Direction), u(r.exports, "DOMRect", () => $882b6d93070905b3$re_export$DOMRect), u(r.exports, "GroupOptions", () => $882b6d93070905b3$re_export$GroupOptions), u(r.exports, "MoveEvent", () => $882b6d93070905b3$re_export$MoveEvent), u(r.exports, "Options", () => $882b6d93070905b3$re_export$Options), u(r.exports, "PullResult", () => $882b6d93070905b3$re_export$PullResult), u(r.exports, "PutResult", () => $882b6d93070905b3$re_export$PutResult), u(r.exports, "SortableEvent", () => $882b6d93070905b3$re_export$SortableEvent), u(r.exports, "SortableOptions", () => $882b6d93070905b3$re_export$SortableOptions), u(r.exports, "Utils", () => $882b6d93070905b3$re_export$Utils), u(r.exports, "ReactSortable", () => T);
+  function $(s) {
+    s.parentElement !== null && s.parentElement.removeChild(s);
+  }
+  function N(s, e, t) {
+    const o = s.children[t] || null;
+    s.insertBefore(e, o);
+  }
+  function E(s) {
+    s.forEach((e) => $(e.element));
+  }
+  function H(s) {
+    s.forEach((e) => {
+      N(e.parentElement, e.element, e.oldIndex);
+    });
+  }
+  function L(s, e) {
+    const t = v(s), o = {
+      parentElement: s.from
+    };
+    let a = [];
+    switch (t) {
+      case "normal":
+        a = [
+          {
+            element: s.item,
+            newIndex: s.newIndex,
+            oldIndex: s.oldIndex,
+            parentElement: s.from
+          }
+        ];
+        break;
+      case "swap":
+        const p = {
+          element: s.item,
+          oldIndex: s.oldIndex,
+          newIndex: s.newIndex,
+          ...o
+        }, h = {
+          element: s.swapItem,
+          oldIndex: s.newIndex,
+          newIndex: s.oldIndex,
+          ...o
+        };
+        a = [
+          p,
+          h
+        ];
+        break;
+      case "multidrag":
+        a = s.oldIndicies.map((x, I) => ({
+          element: x.multiDragElement,
+          oldIndex: x.index,
+          newIndex: s.newIndicies[I].index,
+          ...o
+        }));
+        break;
+    }
+    return S(a, e);
+  }
+  function D(s, e) {
+    const t = w(s, e);
+    return y(s, t);
+  }
+  function w(s, e) {
+    const t = [
+      ...e
+    ];
+    return s.concat().reverse().forEach((o) => t.splice(o.oldIndex, 1)), t;
+  }
+  function y(s, e, t, o) {
+    const a = [
+      ...e
+    ];
+    return s.forEach((n) => {
+      const i = o && t && o(n.item, t);
+      a.splice(n.newIndex, 0, i || n.item);
+    }), a;
+  }
+  function v(s) {
+    return s.oldIndicies && s.oldIndicies.length > 0 ? "multidrag" : s.swapItem ? "swap" : "normal";
+  }
+  function S(s, e) {
+    return s.map((o) => ({
+      ...o,
+      item: e[o.oldIndex]
+    })).sort((o, a) => o.oldIndex - a.oldIndex);
+  }
+  function Q(s) {
+    const { list: e, setList: t, children: o, tag: a, style: n, className: i, clone: p, onAdd: h, onChange: x, onChoose: I, onClone: A, onEnd: P, onFilter: k, onRemove: _, onSort: z, onStart: F, onUnchoose: V, onUpdate: Ee, onMove: Le, onSpill: Pe, onSelect: Me, onDeselect: He, ...Y } = s;
+    return Y;
+  }
+  const m = {
+    dragging: null
+  };
+  class T extends b.Component {
+    constructor(e) {
+      super(e), this.ref = /* @__PURE__ */ (0, b.createRef)();
+      const t = [
+        ...e.list
+      ].map((o) => Object.assign(o, {
+        chosen: !1,
+        selected: !1
+      }));
+      e.setList(t, this.sortable, m), d(g)(
+        //@ts-expect-error: Doesn't exist. Will deprecate soon.
+        !e.plugins,
+        `
+Plugins prop is no longer supported.
+Instead, mount it with "Sortable.mount(new MultiDrag())"
+Please read the updated README.md at https://github.com/SortableJS/react-sortablejs.
+      `
+      );
+    }
+    componentDidMount() {
+      if (this.ref.current === null) return;
+      const e = this.makeOptions();
+      d(l).create(this.ref.current, e);
+    }
+    componentDidUpdate(e) {
+      e.disabled !== this.props.disabled && this.sortable && this.sortable.option("disabled", this.props.disabled);
+    }
+    render() {
+      const { tag: e, style: t, className: o, id: a } = this.props, n = {
+        style: t,
+        className: o,
+        id: a
+      }, i = !e || e === null ? "div" : e;
+      return /* @__PURE__ */ (0, b.createElement)(i, {
+        // @todo - find a way (perhaps with the callback) to allow AntD components to work
+        ref: this.ref,
+        ...n
+      }, this.getChildren());
+    }
+    getChildren() {
+      const { children: e, dataIdAttr: t, selectedClass: o = "sortable-selected", chosenClass: a = "sortable-chosen", dragClass: n = "sortable-drag", fallbackClass: i = "sortable-falback", ghostClass: p = "sortable-ghost", swapClass: h = "sortable-swap-highlight", filter: x = "sortable-filter", list: I } = this.props;
+      if (!e || e == null) return null;
+      const A = t || "data-id";
+      return b.Children.map(e, (P, k) => {
+        if (P === void 0) return;
+        const _ = I[k] || {}, { className: z } = P.props, F = typeof x == "string" && {
+          [x.replace(".", "")]: !!_.filtered
+        }, V = d(c)(z, {
+          [o]: _.selected,
+          [a]: _.chosen,
+          ...F
+        });
+        return /* @__PURE__ */ (0, b.cloneElement)(P, {
+          [A]: P.key,
+          className: V
+        });
+      });
+    }
+    /** Appends the `sortable` property to this component */
+    get sortable() {
+      const e = this.ref.current;
+      if (e === null) return null;
+      const t = Object.keys(e).find((o) => o.includes("Sortable"));
+      return t ? e[t] : null;
+    }
+    /** Converts all the props from `ReactSortable` into the `options` object that `Sortable.create(el, [options])` can use. */
+    makeOptions() {
+      const e = [
+        "onAdd",
+        "onChoose",
+        "onDeselect",
+        "onEnd",
+        "onRemove",
+        "onSelect",
+        "onSpill",
+        "onStart",
+        "onUnchoose",
+        "onUpdate"
+      ], t = [
+        "onChange",
+        "onClone",
+        "onFilter",
+        "onSort"
+      ], o = Q(this.props);
+      return e.forEach((n) => o[n] = this.prepareOnHandlerPropAndDOM(n)), t.forEach((n) => o[n] = this.prepareOnHandlerProp(n)), {
+        ...o,
+        onMove: (n, i) => {
+          const { onMove: p } = this.props, h = n.willInsertAfter || -1;
+          if (!p) return h;
+          const x = p(n, i, this.sortable, m);
+          return typeof x > "u" ? !1 : x;
+        }
+      };
+    }
+    /** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop & an `on[Handler]` ReactSortable method.  */
+    prepareOnHandlerPropAndDOM(e) {
+      return (t) => {
+        this.callOnHandlerProp(t, e), this[e](t);
+      };
+    }
+    /** Prepares a method that will be used in the sortable options to call an `on[Handler]` prop */
+    prepareOnHandlerProp(e) {
+      return (t) => {
+        this.callOnHandlerProp(t, e);
+      };
+    }
+    /** Calls the `props.on[Handler]` function */
+    callOnHandlerProp(e, t) {
+      const o = this.props[t];
+      o && o(e, this.sortable, m);
+    }
+    // SORTABLE DOM HANDLING
+    onAdd(e) {
+      const { list: t, setList: o, clone: a } = this.props, n = [
+        ...m.dragging.props.list
+      ], i = L(e, n);
+      E(i);
+      const p = y(i, t, e, a).map((h) => Object.assign(h, {
+        selected: !1
+      }));
+      o(p, this.sortable, m);
+    }
+    onRemove(e) {
+      const { list: t, setList: o } = this.props, a = v(e), n = L(e, t);
+      H(n);
+      let i = [
+        ...t
+      ];
+      if (e.pullMode !== "clone") i = w(n, i);
+      else {
+        let p = n;
+        switch (a) {
+          case "multidrag":
+            p = n.map((h, x) => ({
+              ...h,
+              element: e.clones[x]
+            }));
+            break;
+          case "normal":
+            p = n.map((h) => ({
+              ...h,
+              element: e.clone
+            }));
+            break;
+          case "swap":
+          default:
+            d(g)(!0, `mode "${a}" cannot clone. Please remove "props.clone" from <ReactSortable/> when using the "${a}" plugin`);
+        }
+        E(p), n.forEach((h) => {
+          const x = h.oldIndex, I = this.props.clone(h.item, e);
+          i.splice(x, 1, I);
+        });
+      }
+      i = i.map((p) => Object.assign(p, {
+        selected: !1
+      })), o(i, this.sortable, m);
+    }
+    onUpdate(e) {
+      const { list: t, setList: o } = this.props, a = L(e, t);
+      E(a), H(a);
+      const n = D(a, t);
+      return o(n, this.sortable, m);
+    }
+    onStart() {
+      m.dragging = this;
+    }
+    onEnd() {
+      m.dragging = null;
+    }
+    onChoose(e) {
+      const { list: t, setList: o } = this.props, a = t.map((n, i) => {
+        let p = n;
+        return i === e.oldIndex && (p = Object.assign(n, {
+          chosen: !0
+        })), p;
+      });
+      o(a, this.sortable, m);
+    }
+    onUnchoose(e) {
+      const { list: t, setList: o } = this.props, a = t.map((n, i) => {
+        let p = n;
+        return i === e.oldIndex && (p = Object.assign(p, {
+          chosen: !1
+        })), p;
+      });
+      o(a, this.sortable, m);
+    }
+    onSpill(e) {
+      const { removeOnSpill: t, revertOnSpill: o } = this.props;
+      t && !o && $(e.item);
+    }
+    onSelect(e) {
+      const { list: t, setList: o } = this.props, a = t.map((n) => Object.assign(n, {
+        selected: !1
+      }));
+      e.newIndicies.forEach((n) => {
+        const i = n.index;
+        if (i === -1) {
+          console.log(`"${e.type}" had indice of "${n.index}", which is probably -1 and doesn't usually happen here.`), console.log(e);
+          return;
+        }
+        a[i].selected = !0;
+      }), o(a, this.sortable, m);
+    }
+    onDeselect(e) {
+      const { list: t, setList: o } = this.props, a = t.map((n) => Object.assign(n, {
+        selected: !1
+      }));
+      e.newIndicies.forEach((n) => {
+        const i = n.index;
+        i !== -1 && (a[i].selected = !0);
+      }), o(a, this.sortable, m);
+    }
+  }
+  /* eslint-disable-next-line */
+  q(T, "defaultProps", {
+    clone: (e) => e
+  });
+  var X = {};
+  O(r.exports, X);
+})(J);
+var Ie = J.exports;
+const qe = (r) => {
+  const { actions: l } = re(r);
+  return /* @__PURE__ */ C(ae, { sx: r.sx, children: /* @__PURE__ */ C(
+    Ie.ReactSortable,
+    {
+      list: r.items,
+      setList: l.handleSetList,
+      disabled: r.disabled,
+      children: r.items.map((c) => /* @__PURE__ */ C(
+        le,
+        {
+          selected: c.selected,
+          onClick: l.handleClick(c),
+          children: /* @__PURE__ */ C(
+            W,
+            {
+              title: c.name,
+              avatar: c.icon,
+              action: c.actions,
+              titleTypographyProps: {
+                variant: "body2",
+                fontSize: 12
+              }
+            }
+          )
+        },
+        c.id
+      ))
+    }
+  ) });
+};
+export {
+  qe as SortableList
+};

package/dist/components/sortable-list/logic.js

@@ -0,0 +1,18 @@
+import { useThemeProps as r } from "@mui/material";
+import a from "lodash";
+const h = (e) => {
+  const o = r({ props: e, name: "HCSortableList" }), n = { ...o };
+  return {
+    refs: {},
+    state: { ownerState: n },
+    actions: { handleClick: (s) => () => {
+      var t;
+      (t = s.onClick) == null || t.call(s, s);
+    }, handleSetList: (s) => {
+      a.isEqual(o.items, s) || o.setItems(s);
+    } }
+  };
+};
+export {
+  h as useSortableListLogic
+};

package/dist/components/sortable-list/styled.js

@@ -0,0 +1,38 @@
+import { styled as t, Box as r, alpha as a } from "@mui/material";
+const i = (o) => o !== "selected", d = t(r, {
+  name: "HCSortableList",
+  slot: "root"
+})({}), p = t(r, {
+  name: "HCSortableList",
+  slot: "item",
+  shouldForwardProp: i
+})(({ theme: o, selected: e }) => ({
+  position: "relative",
+  borderBottom: "1px solid",
+  borderBottomColor: o.palette.divider,
+  boxShadow: "none !important",
+  cursor: "pointer",
+  "&:hover": {
+    backgroundColor: "rgba(0, 0, 0, 0.04)"
+  },
+  "& .MuiCardHeader-root": {
+    padding: "4px 8px"
+  },
+  ...e && {
+    "&:before": {
+      content: '""',
+      position: "absolute",
+      left: 0,
+      top: 0,
+      bottom: 0,
+      right: 0,
+      borderLeft: "1px solid",
+      borderLeftColor: o.palette.primary.main,
+      backgroundColor: a(o.palette.primary.main, 0.1)
+    }
+  }
+}));
+export {
+  p as SortableListItem,
+  d as SortableListRoot
+};

package/dist/components/static-text/index.js

@@ -1,18 +1,18 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as i } from "react/jsx-runtime";
 import { useStaticTextLogic as n } from "./logic.js";
 import { StaticTextRoot as c } from "./styled.js";
-function S(t) {
-  const { html: o, ownerState: r, sx: e, other: i } = n(t);
-  return /* @__PURE__ */ m(
+const S = (t) => {
+  const { html: o, ownerState: r, sx: e, other: m } = n(t);
+  return /* @__PURE__ */ i(
     c,
     {
       ownerState: r,
       sx: e,
       dangerouslySetInnerHTML: { __html: o },
-      ...i
+      ...m
     }
   );
-}
+};
 export {
   S as StaticText
 };

package/dist/components/stats-box/index.js

@@ -0,0 +1,12 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { StatsBoxRoot as s, StatsBoxCaption as e, StatsBoxValueContainer as x, StatsBoxValue as c } from "./styled.js";
+const p = ({ label: a, value: r, icon: i, ...n }) => /* @__PURE__ */ t(s, { ...n, children: [
+  /* @__PURE__ */ o(e, { variant: "caption", children: a }),
+  /* @__PURE__ */ t(x, { children: [
+    /* @__PURE__ */ o(c, { variant: "h1", children: r }),
+    i
+  ] })
+] });
+export {
+  p as StatsBox
+};