@hybridcore/ui 1.6.1 → 1.6.2

package/dist/components/notification/index.js

@@ -0,0 +1,67 @@
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { Close as p } from "@mui/icons-material";
+import { Fade as h } from "@mui/material";
+import { useState as v, useEffect as l } from "react";
+import { useNotificationProviderLogic as N } from "./logic.js";
+import { NotificationRoot as x, NotificationStack as C, NotificationAlert as D, NotificationCloseButton as E, NotificationTitle as g, NotificationMessage as H } from "./styled.js";
+import { notify as I, removeNotification as M } from "./store.js";
+const S = 250, T = ({
+  item: t,
+  defaultAutoHide: o,
+  defaultVariant: e,
+  onDismiss: n
+}) => {
+  const [c, r] = v(!1);
+  l(() => {
+    r(!0);
+  }, []), l(() => {
+    const a = t.options.autoHideDuration === void 0 ? o : t.options.autoHideDuration;
+    if (a === null) return;
+    const d = setTimeout(() => r(!1), a);
+    return () => clearTimeout(d);
+  }, [t.options.autoHideDuration, o]);
+  const s = () => {
+    r(!1);
+  }, u = () => {
+    n(t.id);
+  }, f = t.options.variant ?? e;
+  return /* @__PURE__ */ i(h, { in: c, timeout: S, onExited: u, unmountOnExit: !0, children: /* @__PURE__ */ m(
+    D,
+    {
+      severity: t.severity,
+      variant: f,
+      onClose: s,
+      action: /* @__PURE__ */ i(
+        E,
+        {
+          "aria-label": "Dismiss",
+          size: "small",
+          color: "inherit",
+          onClick: s,
+          children: /* @__PURE__ */ i(p, { fontSize: "small" })
+        }
+      ),
+      children: [
+        t.options.title ? /* @__PURE__ */ i(g, { children: t.options.title }) : null,
+        /* @__PURE__ */ i(H, { children: t.message })
+      ]
+    }
+  ) });
+}, k = (t) => {
+  const { state: o, actions: e } = N(t);
+  return o.visible.length === 0 ? null : /* @__PURE__ */ i(x, { ownerState: o.ownerState, sx: o.sx, children: /* @__PURE__ */ i(C, { spacing: 1, children: o.visible.map((n) => /* @__PURE__ */ i(
+    T,
+    {
+      item: n,
+      defaultAutoHide: o.defaultAutoHide,
+      defaultVariant: o.defaultVariant,
+      onDismiss: e.dismiss
+    },
+    n.id
+  )) }) });
+};
+export {
+  k as HCNotificationProvider,
+  I as notify,
+  M as removeNotification
+};

package/dist/components/notification/logic.js

@@ -0,0 +1,30 @@
+import { useThemeProps as m } from "@mui/material";
+import { useSyncExternalStore as u } from "react";
+import { subscribe as l, getItems as s, removeNotification as A } from "./store.js";
+const f = 4e3, p = 5, d = "filled", D = {
+  vertical: "bottom",
+  horizontal: "right"
+}, N = (n) => {
+  const t = m({ props: n, name: "HCNotification" }), r = u(l, s, s), o = t.maxVisible ?? p, i = t.autoHideDuration ?? f, e = t.variant ?? d, a = t.anchorOrigin ?? D, c = r.slice(-o);
+  return {
+    refs: {},
+    state: {
+      ownerState: {
+        maxVisible: o,
+        anchorOrigin: a,
+        autoHideDuration: i,
+        variant: e
+      },
+      visible: c,
+      defaultAutoHide: i,
+      defaultVariant: e,
+      sx: t.sx
+    },
+    actions: {
+      dismiss: A
+    }
+  };
+};
+export {
+  N as useNotificationProviderLogic
+};

package/dist/components/notification/store.js

@@ -0,0 +1,23 @@
+const s = /* @__PURE__ */ new Set();
+let n = [];
+const r = () => {
+  s.forEach((e) => e());
+}, o = (e, t, c = {}) => {
+  const i = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  n = [...n, { id: i, severity: e, message: t, options: c }], r();
+}, a = (e) => (s.add(e), () => {
+  s.delete(e);
+}), d = () => n, f = (e) => {
+  n = n.filter((t) => t.id !== e), r();
+}, u = {
+  error: (e, t) => o("error", e, t),
+  warning: (e, t) => o("warning", e, t),
+  info: (e, t) => o("info", e, t),
+  success: (e, t) => o("success", e, t)
+};
+export {
+  d as getItems,
+  u as notify,
+  f as removeNotification,
+  a as subscribe
+};

package/dist/components/notification/styled.js

@@ -0,0 +1,52 @@
+import { styled as o, Box as a, Stack as e, Alert as s, AlertTitle as c, IconButton as l } from "@mui/material";
+const r = (t) => t !== "ownerState", d = o(a, {
+  name: "HCNotification",
+  slot: "root",
+  shouldForwardProp: r
+})(({ theme: t, ownerState: n }) => {
+  const i = n.anchorOrigin ?? { vertical: "bottom", horizontal: "right" };
+  return {
+    position: "fixed",
+    zIndex: t.zIndex.snackbar,
+    padding: t.spacing(2),
+    pointerEvents: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: t.spacing(1),
+    maxWidth: 420,
+    width: "100%",
+    ...i.vertical === "top" ? { top: 0 } : { bottom: 0 },
+    ...i.horizontal === "left" ? { left: 0, alignItems: "flex-start" } : i.horizontal === "center" ? { left: "50%", transform: "translateX(-50%)", alignItems: "center" } : { right: 0, alignItems: "flex-end" }
+  };
+}), m = o(e, {
+  name: "HCNotification",
+  slot: "stack"
+})({
+  width: "100%",
+  pointerEvents: "auto"
+}), p = o(s, {
+  name: "HCNotification",
+  slot: "alert"
+})(({ theme: t }) => ({
+  width: "100%",
+  boxShadow: t.shadows[6]
+})), g = o(c, {
+  name: "HCNotification",
+  slot: "title"
+})({}), h = o("span", {
+  name: "HCNotification",
+  slot: "message"
+})({
+  display: "block"
+}), N = o(l, {
+  name: "HCNotification",
+  slot: "closeButton"
+})({});
+export {
+  p as NotificationAlert,
+  N as NotificationCloseButton,
+  h as NotificationMessage,
+  d as NotificationRoot,
+  m as NotificationStack,
+  g as NotificationTitle
+};

package/dist/components/object-profile-card/components/avatar/index.js

@@ -1,7 +1,7 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import { Loading as h } from "../../../loading/index.js";
 import { useObjectProfileCardAvatarLogic as g } from "./logic.js";
-import { AvatarContainer as f, AvatarButton as m, AvatarCaption as v } from "./styled.js";
+import { AvatarContainer as m, AvatarButton as v, AvatarCaption as f } from "./styled.js";
 import { c as u } from "../../../../createReactComponent-C7L-DMHj.js";
 /**
  * @license @tabler/icons-react v3.44.0 - MIT
@@ -9,10 +9,9 @@ import { c as u } from "../../../../createReactComponent-C7L-DMHj.js";
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const y = [["path", { d: "M15 8h.01", key: "svg-0" }], ["path", { d: "M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12", key: "svg-1" }], ["path", { d: "M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5", key: "svg-2" }], ["path", { d: "M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3", key: "svg-3" }]], C = u("outline", "photo", "Photo", y);
-function M(e) {
-  const { imageUrl: a, loading: r, onUpload: l, accept: c = ".jpg, .jpeg, .png", sx: d } = e, { fileInputRef: p, handleStartUpload: n, handleFileChange: s } = g(e), o = !!l;
-  return /* @__PURE__ */ i(f, { sx: d, children: [
+const y = [["path", { d: "M15 8h.01", key: "svg-0" }], ["path", { d: "M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12", key: "svg-1" }], ["path", { d: "M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5", key: "svg-2" }], ["path", { d: "M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3", key: "svg-3" }]], C = u("outline", "photo", "Photo", y), M = (e) => {
+  const { imageUrl: a, loading: r, onUpload: l, accept: c = ".jpg, .jpeg, .png", sx: d } = e, { fileInputRef: s, handleStartUpload: n, handleFileChange: p } = g(e), o = !!l;
+  return /* @__PURE__ */ i(m, { sx: d, children: [
     a ? /* @__PURE__ */ t(
       "img",
       {
@@ -22,23 +21,23 @@ function M(e) {
         onClick: o ? n : void 0,
         style: { cursor: o ? "pointer" : "default" }
       }
-    ) : /* @__PURE__ */ i(m, { onClick: n, disabled: !o, children: [
+    ) : /* @__PURE__ */ i(v, { onClick: n, disabled: !o, children: [
       /* @__PURE__ */ t(C, { size: 24 }),
-      o && /* @__PURE__ */ t(v, { variant: "body2", children: "click here to upload" })
+      o && /* @__PURE__ */ t(f, { variant: "body2", children: "click here to upload" })
     ] }),
     o && /* @__PURE__ */ t(
       "input",
       {
-        ref: p,
+        ref: s,
         type: "file",
         accept: c,
         style: { display: "none" },
-        onChange: s
+        onChange: p
       }
     ),
     /* @__PURE__ */ t(h, { show: !!r, position: "absolute" })
   ] });
-}
+};
 export {
   M as ObjectProfileCardAvatar
 };

package/dist/components/object-profile-card/index.js

@@ -1,10 +1,10 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { useTheme as y, Typography as o, Box as a, Divider as C } from "@mui/material";
 import j from "lodash";
 import { A as x } from "../../index.es-CHNMhaMi.js";
 import { FlexRow as P } from "../flex-row/index.js";
-import { InstanceVariableList as u } from "../instance-variable-list/index.js";
-import { ObjectProfileCardAvatar as O } from "./components/avatar/index.js";
+import { InstanceVariableList as O } from "../instance-variable-list/index.js";
+import { ObjectProfileCardAvatar as u } from "./components/avatar/index.js";
 import { useObjectProfileCardLogic as A } from "./logic.js";
 import { ObjectProfileCardRoot as R, ObjectProfileCardContent as U, ObjectProfileCardHeader as H, ObjectProfileCardHierarchy as D, ObjectProfileCardVariables as I } from "./styled.js";
 import { c as T } from "../../createReactComponent-C7L-DMHj.js";
@@ -14,35 +14,34 @@ import { c as T } from "../../createReactComponent-C7L-DMHj.js";
  * This source code is licensed under the MIT license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const _ = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], d = T("outline", "chevron-right", "ChevronRight", _);
-function S(m) {
+const _ = [["path", { d: "M9 6l6 6l-6 6", key: "svg-0" }]], d = T("outline", "chevron-right", "ChevronRight", _), S = (m) => {
   const l = y(), {
     data: r,
-    template: p,
-    templateHierarchy: s,
+    template: s,
+    templateHierarchy: p,
     icon: n,
     avatarUploading: h,
     onAvatarUpload: f,
-    ownerState: t,
+    ownerState: i,
     sx: g,
     other: v
   } = A(m);
-  return j.isEmpty(r) ? null : /* @__PURE__ */ e(R, { ownerState: t, sx: g, ...v, children: /* @__PURE__ */ i(U, { ownerState: t, children: [
-    /* @__PURE__ */ i(H, { ownerState: t, children: [
+  return j.isEmpty(r) ? null : /* @__PURE__ */ e(R, { ownerState: i, sx: g, ...v, children: /* @__PURE__ */ t(U, { ownerState: i, children: [
+    /* @__PURE__ */ t(H, { ownerState: i, children: [
       /* @__PURE__ */ e(
-        O,
+        u,
         {
           imageUrl: r.profileImageUrl,
           loading: h,
           onUpload: f
         }
       ),
-      /* @__PURE__ */ i(P, { gap: 1, mt: 1, children: [
+      /* @__PURE__ */ t(P, { gap: 1, mt: 1, children: [
         n && /* @__PURE__ */ e("img", { src: n, height: 24 }),
         /* @__PURE__ */ e(o, { variant: "h2", children: r.title })
       ] }),
-      /* @__PURE__ */ i(D, { ownerState: t, children: [
-        s.map((b, c) => /* @__PURE__ */ i(a, { display: "inline", children: [
+      /* @__PURE__ */ t(D, { ownerState: i, children: [
+        p.map((b, c) => /* @__PURE__ */ t(a, { display: "inline", children: [
           c > 0 && /* @__PURE__ */ e(
             d,
             {
@@ -53,7 +52,7 @@ function S(m) {
           ),
           /* @__PURE__ */ e(o, { variant: "caption", color: "text.secondary", children: b.name })
         ] }, c)),
-        /* @__PURE__ */ i(a, { display: "inline", children: [
+        /* @__PURE__ */ t(a, { display: "inline", children: [
           /* @__PURE__ */ e(
             d,
             {
@@ -66,13 +65,13 @@ function S(m) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ i(a, { flex: 1, minHeight: 0, children: [
+    /* @__PURE__ */ t(a, { flex: 1, minHeight: 0, children: [
       /* @__PURE__ */ e(C, {}),
-      /* @__PURE__ */ e(x, { heightRelativeToParent: "100%", children: /* @__PURE__ */ e(I, { ownerState: t, children: /* @__PURE__ */ e(
-        u,
+      /* @__PURE__ */ e(x, { heightRelativeToParent: "100%", children: /* @__PURE__ */ e(I, { ownerState: i, children: /* @__PURE__ */ e(
+        O,
         {
           variables: r.variables,
-          template: p,
+          template: s,
           extraData: r.description ? [
             {
               title: "Details",
@@ -84,7 +83,7 @@ function S(m) {
       ) }) })
     ] })
   ] }) });
-}
+};
 export {
   S as ObjectProfileCard
 };

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

@@ -3,8 +3,7 @@ import { Typography as l, Divider as h, Box as k, ListItem as I, Checkbox as w,
 import S from "lodash";
 import { usePaginatedListLogic as _ } from "./logic.js";
 import { PaginatedListRoot as E, PaginatedListHeader as D, PaginatedListContent as j, PaginatedListList as A, PaginatedListPagination as F } from "./styled.js";
-const N = [5, 10, 25, 50];
-function U(g) {
+const N = [5, 10, 25, 50], U = (g) => {
   const {
     title: t,
     displayData: r,
@@ -93,7 +92,7 @@ function U(g) {
       ]
     }
   );
-}
+};
 export {
   U as PaginatedList
 };

package/dist/components/placeholder/index.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import { usePlaceholderLogic as t } from "./logic.js";
+import { PlaceholderRoot as c } from "./styled.js";
+const i = (e) => {
+  const { state: o } = t(e);
+  return /* @__PURE__ */ r(c, { ownerState: o.ownerState, sx: e.sx, children: e.children });
+};
+export {
+  i as Placeholder
+};

package/dist/components/placeholder/logic.js

@@ -0,0 +1,12 @@
+import { useThemeProps as r } from "@mui/material";
+const p = (e) => {
+  const o = { ...r({ props: e, name: "HCPlaceholder" }) };
+  return {
+    refs: {},
+    state: { ownerState: o },
+    actions: {}
+  };
+};
+export {
+  p as usePlaceholderLogic
+};

package/dist/components/placeholder/styled.js

@@ -0,0 +1,32 @@
+import { styled as a, Box as l } from "@mui/material";
+const s = (o) => o !== "ownerState", p = a(l, {
+  name: "HCPlaceholder",
+  slot: "root",
+  shouldForwardProp: s
+})(({ theme: o, ownerState: t }) => ({
+  position: "absolute",
+  width: t.width ?? "auto",
+  zIndex: 1100,
+  transition: "all .3s",
+  ...t.placement === "TOP" && {
+    top: o.spacing(1),
+    left: "50%",
+    transform: "translate(-50%, 0)"
+  },
+  ...t.placement === "RIGHT" && {
+    top: o.spacing(1),
+    right: o.spacing(1)
+  },
+  ...t.placement === "BOTTOM" && {
+    bottom: o.spacing(1),
+    left: "50%",
+    transform: "translate(-50%, 0)"
+  },
+  ...t.placement === "LEFT" && {
+    top: o.spacing(1),
+    left: o.spacing(1)
+  }
+}));
+export {
+  p as PlaceholderRoot
+};

package/dist/components/positional-tooltip/index.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Typography as e } from "@mui/material";
+import { PositionalTooltipRoot as m } from "./styled.js";
+const y = ({
+  show: t,
+  text: i,
+  top: n = 0,
+  left: p = 0,
+  topOffset: l = 7,
+  leftOffset: a = 7,
+  sx: o
+}) => t ? /* @__PURE__ */ r(
+  m,
+  {
+    sx: [
+      { top: n + l, left: p + a },
+      ...Array.isArray(o) ? o : [o]
+    ],
+    children: /* @__PURE__ */ r(e, { variant: "caption", children: i })
+  }
+) : null;
+export {
+  y as PositionalTooltip
+};

package/dist/components/positional-tooltip/styled.js

@@ -0,0 +1,17 @@
+import { styled as i, Box as a } from "@mui/material";
+const p = i(a, {
+  name: "HCPositionalTooltip",
+  slot: "root"
+})(({ theme: o }) => ({
+  position: "absolute",
+  paddingLeft: o.spacing(1.5),
+  paddingRight: o.spacing(1.5),
+  paddingTop: o.spacing(0.25),
+  paddingBottom: o.spacing(0.25),
+  borderRadius: o.spacing(0.25),
+  background: "rgba(0,0,0,0.85)",
+  color: "#fff"
+}));
+export {
+  p as PositionalTooltipRoot
+};