@hybridcore/ui 1.6.0 → 1.6.2

package/dist/components/document-viewer/styled.js

@@ -1,39 +1,127 @@
-import { styled as o, Button as r, alpha as n, InputBase as e, Box as i } from "@mui/material";
-const a = o(r)(({ theme: t }) => ({
-  color: t.palette.grey[500],
+import { styled as o, Box as t, AppBar as c, Toolbar as l, Button as r, alpha as a, Divider as s, InputBase as u } from "@mui/material";
+const n = (e) => e !== "ownerState", m = o(t, {
+  name: "HCDocumentViewer",
+  slot: "root"
+})(({ theme: e }) => ({
+  backgroundColor: e.palette.background.default
+})), p = o(c, {
+  name: "HCDocumentViewer",
+  slot: "appBar"
+})({}), w = o(l, {
+  name: "HCDocumentViewer",
+  slot: "toolbar"
+})({
+  justifyContent: "space-between"
+}), g = o(t, {
+  name: "HCDocumentViewer",
+  slot: "logo"
+})({}), D = o(t, {
+  name: "HCDocumentViewer",
+  slot: "navigation"
+})({}), V = o(t, {
+  name: "HCDocumentViewer",
+  slot: "actions"
+})({}), C = o(r, {
+  name: "HCDocumentViewer",
+  slot: "actionButton"
+})(({ theme: e }) => ({
+  color: e.palette.text.secondary,
   minWidth: "auto",
   "&:hover": {
-    backgroundColor: n(t.palette.grey[500], 0.15),
-    color: t.palette.grey[700]
+    backgroundColor: a(e.palette.text.secondary, 0.15),
+    color: e.palette.text.primary
   }
-})), d = o(e)(() => ({
-  border: "1px solid",
-  borderColor: "#E9E9EA",
-  background: "#F8F8F8",
-  width: 40,
-  fontSize: 14,
-  "& .MuiInputBase-input": {
-    textAlign: "center"
-  }
-})), s = o(i)({
+})), b = o(t, {
+  name: "HCDocumentViewer",
+  slot: "actionButtonsRow"
+})(({ theme: e }) => ({
+  display: "flex",
+  gap: e.spacing(1),
+  alignItems: "center"
+})), x = o(s, {
+  name: "HCDocumentViewer",
+  slot: "actionDivider"
+})({}), H = o(t, {
+  name: "HCDocumentViewer",
+  slot: "content",
+  shouldForwardProp: n
+})(({ ownerState: e }) => ({
+  marginRight: e.rightPanelWidth,
+  transition: "all .3s"
+})), v = o(t, {
+  name: "HCDocumentViewer",
+  slot: "viewer"
+})({
+  overflow: "auto"
+}), f = o(t, {
+  name: "HCDocumentViewer",
+  slot: "sidePanel",
+  shouldForwardProp: n
+})(({ theme: e, ownerState: i }) => ({
   position: "fixed",
   top: 0,
   bottom: 0,
-  backgroundColor: "#fff",
+  right: 0,
+  width: i.rightPanelWidth,
+  backgroundColor: e.palette.background.paper,
   transition: "all .3s",
   overflow: "auto"
-}), p = o(a)({
+})), B = o(r, {
+  name: "HCDocumentViewer",
+  slot: "sidePanelToggleButton",
+  shouldForwardProp: n
+})(({ theme: e, ownerState: i }) => ({
   position: "fixed",
   top: 75,
-  marginRight: 10,
-  background: "#fff",
-  borderRadius: 4,
-  border: "1px solid rgba(0, 0, 0, 0.12)",
-  transition: "all .3s"
-});
+  right: i.rightPanelWidth,
+  marginRight: e.spacing(1.25),
+  minWidth: "auto",
+  background: e.palette.background.paper,
+  color: e.palette.text.secondary,
+  borderRadius: e.shape.borderRadius / 2,
+  border: `1px solid ${e.palette.divider}`,
+  transition: "all .3s",
+  "&:hover": {
+    backgroundColor: a(e.palette.text.secondary, 0.15),
+    color: e.palette.text.primary
+  }
+})), h = o(t, {
+  name: "HCDocumentViewer",
+  slot: "sidePanelToggleIcon",
+  shouldForwardProp: n
+})(({ ownerState: e }) => ({
+  display: "inline-flex",
+  transition: "transform .3s",
+  transform: `rotate(${e.rightPanelExpanded ? 0 : 180}deg)`,
+  "& .MuiSvgIcon-root": {
+    fontSize: 14
+  }
+})), P = o(u, {
+  name: "HCDocumentViewer",
+  slot: "input"
+})(({ theme: e }) => ({
+  border: `1px solid ${e.palette.divider}`,
+  backgroundColor: e.palette.action.hover,
+  width: 40,
+  fontSize: 14,
+  "& .MuiInputBase-input": {
+    textAlign: "center"
+  }
+}));
 export {
-  a as Button,
-  d as Input,
-  s as SidePanel,
-  p as SidePanelToggleButton
+  C as DocumentViewerActionButton,
+  b as DocumentViewerActionButtonsRow,
+  x as DocumentViewerActionDivider,
+  V as DocumentViewerActions,
+  p as DocumentViewerAppBar,
+  H as DocumentViewerContent,
+  P as DocumentViewerInput,
+  g as DocumentViewerLogo,
+  D as DocumentViewerNavigation,
+  m as DocumentViewerRoot,
+  f as DocumentViewerSidePanel,
+  B as DocumentViewerSidePanelToggleButton,
+  h as DocumentViewerSidePanelToggleIcon,
+  w as DocumentViewerToolbar,
+  v as DocumentViewerViewer
 };

package/dist/components/duration-select/index.js

@@ -0,0 +1,27 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useDurationSelectLogic as l } from "./logic.js";
+import { DurationSelectRoot as n, DurationSelectSelect as i } from "./styled.js";
+import { M as c } from "../../MenuItem-DwqJqzuM.js";
+const h = (o) => {
+  const { state: a, actions: r } = l(o);
+  return /* @__PURE__ */ t(n, { sx: o.sx, children: /* @__PURE__ */ t(
+    i,
+    {
+      id: "duration-select",
+      value: a.duration,
+      onChange: r.handleChange,
+      children: a.options.map((e) => /* @__PURE__ */ t(
+        c,
+        {
+          value: e.value,
+          sx: { fontSize: "small" },
+          children: e.label
+        },
+        e.value
+      ))
+    }
+  ) });
+};
+export {
+  h as DurationSelect
+};

package/dist/components/duration-select/logic.js

@@ -0,0 +1,21 @@
+import { useThemeProps as c } from "@mui/material";
+import { useState as D } from "react";
+const g = [
+  { value: "24 Hours", label: "24 Hours" },
+  { value: "7 Days", label: "7 Days" },
+  { value: "30 Days", label: "30 Days" }
+], p = (n) => {
+  const t = c({ props: n, name: "HCDurationSelect" }), o = t.value ?? "7 Days", [s, r] = D(String(o)), l = t.options ?? g, i = { ...t };
+  return {
+    refs: {},
+    state: { ownerState: i, duration: s, options: l },
+    actions: { handleChange: (u) => {
+      var a;
+      const e = String(u.target.value);
+      r(e), (a = t.onChange) == null || a.call(t, e);
+    } }
+  };
+};
+export {
+  p as useDurationSelectLogic
+};

package/dist/components/duration-select/styled.js

@@ -0,0 +1,26 @@
+import { styled as t, FormControl as e } from "@mui/material";
+import { S as n } from "../../Select-DHUl_uG3.js";
+const a = t(e, {
+  name: "HCDurationSelect",
+  slot: "root"
+})({}), c = t(n, {
+  name: "HCDurationSelect",
+  slot: "select"
+})(({ theme: o }) => ({
+  "& .MuiSelect-select, & .MuiInput-input:focus": {
+    background: "#f8f8f8",
+    border: "none",
+    borderRadius: o.spacing(1),
+    paddingLeft: o.spacing(1.5),
+    paddingTop: o.spacing(0.5),
+    paddingBottom: o.spacing(0.5),
+    fontSize: "10px"
+  },
+  "&:before, &:after": {
+    display: "none"
+  }
+}));
+export {
+  a as DurationSelectRoot,
+  c as DurationSelectSelect
+};

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

@@ -0,0 +1,20 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useEditableTextLogic as r } from "./logic.js";
+import { EditableTextRoot as a } from "./styled.js";
+const d = (t) => {
+  const { state: e, actions: o } = r(t);
+  return /* @__PURE__ */ n(
+    a,
+    {
+      ownerState: e.ownerState,
+      contentEditable: !0,
+      onInput: o.handleInput,
+      onBlur: o.handleBlur,
+      dangerouslySetInnerHTML: { __html: t.text ?? "" },
+      ...e.rest
+    }
+  );
+};
+export {
+  d as EditableText
+};

package/dist/components/editable-text/logic.js

@@ -0,0 +1,18 @@
+import { useThemeProps as u } from "@mui/material";
+import { useState as d } from "react";
+const w = (n) => {
+  const o = u({ props: n, name: "HCEditableText" }), { text: a, placeholder: i, onChange: t, ...c } = o, l = c, [r, p] = d(!a), h = { ...o, showPlaceholder: r };
+  return {
+    refs: {},
+    state: { ownerState: h, rest: l },
+    actions: { handleInput: (e) => {
+      const s = !e.currentTarget.textContent;
+      s !== r && p(s);
+    }, handleBlur: (e) => {
+      t == null || t(e.currentTarget.textContent);
+    } }
+  };
+};
+export {
+  w as useEditableTextLogic
+};

package/dist/components/editable-text/styled.js

@@ -0,0 +1,22 @@
+import { styled as e, Typography as l } from "@mui/material";
+const t = (o) => o !== "ownerState", d = e(l, {
+  name: "HCEditableText",
+  slot: "root",
+  shouldForwardProp: t
+})(({ theme: o, ownerState: r }) => ({
+  display: "inline-block",
+  border: "1px solid transparent",
+  borderRadius: o.spacing(0.5),
+  padding: o.spacing(0, 0.5),
+  minWidth: 100,
+  ":hover": {
+    borderColor: o.palette.grey[400]
+  },
+  ":after": {
+    content: `'${r.placeholder ?? ""}'`,
+    display: r.showPlaceholder ? "inline-block" : "none"
+  }
+}));
+export {
+  d as EditableTextRoot
+};

package/dist/components/geometry-picker/coordinate/index.js

@@ -1,23 +1,24 @@
-import { jsxs as l, Fragment as p, jsx as o } from "react/jsx-runtime";
-import { Button as a, Box as f } from "@mui/material";
-import u from "../map/index.js";
-import C from "../parser/index.js";
-import { g as y, c as h } from "../../../ol-yOE-NV0X.js";
-import { useState as g } from "react";
-import { Add as P } from "@mui/icons-material";
-import { parse as v, convert as x } from "../../map/helpers/wkt.js";
-import T from "lodash";
-function M({
+import { jsxs as s, Fragment as p, jsx as o } from "react/jsx-runtime";
+import { Box as f, Button as c } from "@mui/material";
+import { Map as u } from "../map/index.js";
+import { Parser as C } from "../parser/index.js";
+import { GeometryPickerCoordinateSubmit as y } from "../styled.js";
+import { g as h, c as g } from "../../../ol-yOE-NV0X.js";
+import { useState as P } from "react";
+import { Add as v } from "@mui/icons-material";
+import { parse as k, convert as w } from "../../map/helpers/wkt.js";
+import x from "lodash";
+const V = ({
   mapboxAccessToken: d,
-  value: c = "POINT(0 0)",
+  value: l = "POINT(0 0)",
   defaultExtent: r,
   onCancel: m,
-  onSubmit: s
-}) {
-  const [t, n] = g(
-    r ? y(r) : c
+  onSubmit: a
+}) => {
+  const [t, n] = P(
+    r ? h(r) : l
   );
-  return /* @__PURE__ */ l(p, { children: [
+  return /* @__PURE__ */ s(p, { children: [
     /* @__PURE__ */ o(
       u,
       {
@@ -27,7 +28,7 @@ function M({
         disableContextMenu: !0,
         defaultExtent: r,
         onDrawEnd: (e) => {
-          const i = h({ features: e });
+          const i = g({ features: e });
           n(i);
         }
       }
@@ -36,14 +37,13 @@ function M({
       n(e);
     } }),
     /* @__PURE__ */ o(
-      a,
+      y,
       {
-        startIcon: /* @__PURE__ */ o(P, {}),
+        startIcon: /* @__PURE__ */ o(v, {}),
         fullWidth: !0,
-        sx: { textTransform: "none", mt: 1 },
         onClick: () => {
-          let e = v(t);
-          if (T.isArray(e))
+          let e = k(t);
+          if (x.isArray(e))
             e = {
               type: "GeometryCollection",
               geometries: [
@@ -75,21 +75,21 @@ function M({
             return;
           }
           if (e) {
-            const i = x(e);
+            const i = w(e);
             n(i ?? "");
           }
         },
         children: "Add Coordinate"
       }
     ),
-    /* @__PURE__ */ l(f, { display: "flex", justifyContent: "space-between", mt: 3, children: [
-      /* @__PURE__ */ o(a, { color: "primary", onClick: m, children: "Cancel" }),
-      /* @__PURE__ */ o(a, { color: "primary", variant: "contained", onClick: () => {
-        s && s(t);
+    /* @__PURE__ */ s(f, { display: "flex", justifyContent: "space-between", mt: 3, children: [
+      /* @__PURE__ */ o(c, { color: "primary", onClick: m, children: "Cancel" }),
+      /* @__PURE__ */ o(c, { color: "primary", variant: "contained", onClick: () => {
+        a && a(t);
       }, children: "Ok" })
     ] })
   ] });
-}
+};
 export {
-  M as default
+  V as Coordinate
 };

package/dist/components/geometry-picker/edit/index.js

@@ -1,38 +1,38 @@
 import { jsxs as t, jsx as i, Fragment as D } from "react/jsx-runtime";
 import k, { useState as x } from "react";
 import { Dialog as W, DialogContent as w, DialogActions as y, Button as e, Box as j } from "@mui/material";
-import m from "../map/index.js";
+import { Map as m } from "../map/index.js";
 import { c as K } from "../../../ol-yOE-NV0X.js";
-function F({
+const F = ({
   value: h,
   disableActions: p,
   mapboxAccessToken: o,
   variant: v = "inline",
   mapId: a,
-  onCancel: n,
+  onCancel: r,
   onSubmit: l,
   onChange: c
-}) {
-  const d = k.useRef(null), [r, g] = x(h), f = () => {
-    l && l(r);
-  }, s = (C) => {
+}) => {
+  const d = k.useRef(null), [n, g] = x(h), s = () => {
+    l && l(n);
+  }, f = (C) => {
     const u = K({ features: C });
     g(u), c && c(u);
   };
-  return v === "dialog" ? /* @__PURE__ */ t(W, { open: !0, maxWidth: "sm", fullWidth: !0, onClose: n, children: [
+  return v === "dialog" ? /* @__PURE__ */ t(W, { open: !0, maxWidth: "sm", fullWidth: !0, onClose: r, children: [
     /* @__PURE__ */ i(w, { children: /* @__PURE__ */ i(
       m,
       {
         id: a,
         ref: d,
-        drawingWKTData: r,
+        drawingWKTData: n,
         mapboxAccessToken: o,
-        onDrawEnd: s
+        onDrawEnd: f
       }
     ) }),
     /* @__PURE__ */ t(y, { children: [
-      /* @__PURE__ */ i(e, { color: "inherit", variant: "contained", onClick: n, children: "Cancel" }),
-      /* @__PURE__ */ i(e, { variant: "contained", onClick: f, children: "Ok" })
+      /* @__PURE__ */ i(e, { color: "inherit", variant: "contained", onClick: r, children: "Cancel" }),
+      /* @__PURE__ */ i(e, { variant: "contained", onClick: s, children: "Ok" })
     ] })
   ] }) : /* @__PURE__ */ t(D, { children: [
     /* @__PURE__ */ i(
@@ -40,17 +40,17 @@ function F({
       {
         id: a,
         ref: d,
-        drawingWKTData: r,
+        drawingWKTData: n,
         mapboxAccessToken: o,
-        onDrawEnd: s
+        onDrawEnd: f
       }
     ),
     !p && /* @__PURE__ */ t(j, { display: "flex", justifyContent: "space-between", mt: 3, children: [
-      /* @__PURE__ */ i(e, { color: "primary", onClick: n, children: "Cancel" }),
-      /* @__PURE__ */ i(e, { color: "primary", variant: "contained", onClick: f, children: "Ok" })
+      /* @__PURE__ */ i(e, { color: "primary", onClick: r, children: "Cancel" }),
+      /* @__PURE__ */ i(e, { color: "primary", variant: "contained", onClick: s, children: "Ok" })
     ] })
   ] });
-}
+};
 export {
-  F as default
+  F as Edit
 };