@hybridcore/ui 1.5.90 → 1.6.0

package/dist/components/search-input/index.js

@@ -1,148 +1,70 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import k, { useState as O } from "react";
-import { Close as m, Search as u } from "@mui/icons-material";
-import { FilledInput as b, Input as R } from "@mui/material";
-import { F as _, I as j } from "../../InputLabel-CBuAYyuT.js";
-import { O as v } from "../../OutlinedInput-B-iZoc9l.js";
-import { I as g } from "../../InputAdornment-B7qEA4kN.js";
-import { I as t } from "../../IconButton-DJ-31-Fd.js";
-const z = ({
-  defaultValue: x = "",
-  label: I = "Search",
-  placeholder: i,
-  disableLabel: C = !1,
-  fullWidth: w = !1,
-  variant: l = "outlined",
-  size: A = "small",
-  iconSize: n = "medium",
-  sx: D,
-  onChange: y,
-  onSubmit: a
-}, F) => {
-  const [r, h] = O(x), c = (o) => {
-    h(o.target.value), y && y(o.target.value);
-  }, d = (o) => {
-    a && a(r);
-  }, p = (o) => {
-    o.key === "Enter" && d();
-  }, K = () => {
-    h("");
-  };
-  k.useImperativeHandle(F, () => ({
-    reset() {
-      K();
-    }
-  }));
-  const f = () => {
-    h(""), a && a("");
-  };
-  return /* @__PURE__ */ s(_, { sx: D, size: A, variant: l, fullWidth: w, children: [
-    !C && /* @__PURE__ */ e(j, { htmlFor: "search-input", children: I }),
-    l === "outlined" && /* @__PURE__ */ e(
-      v,
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Close as I, Search as b } from "@mui/icons-material";
+import { useSearchInputLogic as g } from "./logic.js";
+import { SearchEndAdornment as x, SearchIconButton as h, SearchInputRoot as z, SearchInputLabel as C, OutlinedSearchInput as w, FilledSearchInput as y, StandardSearchInput as L } from "./styled.js";
+const D = (r) => {
+  const { state: s, actions: n } = g(r), { ownerState: u, value: o } = s, {
+    label: i = "Search",
+    placeholder: S,
+    disableLabel: c = !1,
+    fullWidth: m = !1,
+    variant: a = "outlined",
+    size: p = "small",
+    iconSize: t = "medium"
+  } = r, f = /* @__PURE__ */ d(x, { position: "end", children: [
+    o.length > 0 && /* @__PURE__ */ e(
+      h,
       {
-        id: "search-input",
-        type: "text",
-        label: C ? "" : I,
-        value: r,
-        placeholder: i,
-        onChange: c,
-        onKeyDown: p,
-        endAdornment: /* @__PURE__ */ s(g, { position: "end", children: [
-          r.length > 0 && /* @__PURE__ */ e(
-            t,
-            {
-              "aria-label": "search",
-              onClick: f,
-              edge: "end",
-              size: n,
-              color: "error",
-              children: /* @__PURE__ */ e(m, { fontSize: n })
-            }
-          ),
-          /* @__PURE__ */ e(
-            t,
-            {
-              "aria-label": "search",
-              onClick: d,
-              edge: "end",
-              size: n,
-              children: /* @__PURE__ */ e(u, { fontSize: n })
-            }
-          )
-        ] })
+        "aria-label": "clear",
+        onClick: n.handleClear,
+        edge: "end",
+        size: t,
+        color: "error",
+        children: /* @__PURE__ */ e(I, { fontSize: t })
       }
     ),
-    l === "filled" && /* @__PURE__ */ e(
-      b,
+    /* @__PURE__ */ e(
+      h,
       {
-        id: "search-input",
-        type: "text",
-        value: r,
-        placeholder: i,
-        onChange: c,
-        onKeyDown: p,
-        endAdornment: /* @__PURE__ */ s(g, { position: "end", children: [
-          r.length > 0 && /* @__PURE__ */ e(
-            t,
-            {
-              "aria-label": "search",
-              onClick: f,
-              edge: "end",
-              size: n,
-              color: "error",
-              children: /* @__PURE__ */ e(m, { fontSize: n })
-            }
-          ),
-          /* @__PURE__ */ e(
-            t,
-            {
-              "aria-label": "search",
-              onClick: d,
-              edge: "end",
-              size: n,
-              children: /* @__PURE__ */ e(u, { fontSize: n })
-            }
-          )
-        ] })
-      }
-    ),
-    l === "standard" && /* @__PURE__ */ e(
-      R,
-      {
-        id: "search-input",
-        type: "text",
-        value: r,
-        placeholder: i,
-        onChange: c,
-        onKeyDown: p,
-        endAdornment: /* @__PURE__ */ s(g, { position: "end", children: [
-          r.length > 0 && /* @__PURE__ */ e(
-            t,
-            {
-              "aria-label": "search",
-              onClick: f,
-              edge: "end",
-              size: n,
-              color: "error",
-              children: /* @__PURE__ */ e(m, { fontSize: n })
-            }
-          ),
-          /* @__PURE__ */ e(
-            t,
-            {
-              "aria-label": "search",
-              onClick: d,
-              edge: "end",
-              size: n,
-              children: /* @__PURE__ */ e(u, { fontSize: n })
-            }
-          )
-        ] })
+        "aria-label": "search",
+        onClick: n.handleSubmit,
+        edge: "end",
+        size: t,
+        children: /* @__PURE__ */ e(b, { fontSize: t })
       }
     )
-  ] });
-}, M = k.forwardRef(z);
+  ] }), l = {
+    id: "search-input",
+    type: "text",
+    value: o,
+    placeholder: S,
+    onChange: n.handleChange,
+    onKeyDown: n.handleKeyDown,
+    endAdornment: f
+  };
+  return /* @__PURE__ */ d(
+    z,
+    {
+      ownerState: u,
+      sx: r.sx,
+      size: p,
+      variant: a,
+      fullWidth: m,
+      children: [
+        !c && /* @__PURE__ */ e(C, { htmlFor: "search-input", children: i }),
+        a === "outlined" && /* @__PURE__ */ e(
+          w,
+          {
+            ...l,
+            label: c ? "" : i
+          }
+        ),
+        a === "filled" && /* @__PURE__ */ e(y, { ...l }),
+        a === "standard" && /* @__PURE__ */ e(L, { ...l })
+      ]
+    }
+  );
+};
 export {
-  M as SearchInput
+  D as SearchInput
 };

package/dist/components/search-input/logic.js

@@ -0,0 +1,43 @@
+import { useThemeProps as g } from "@mui/material";
+import { useState as C } from "react";
+const D = (r) => {
+  const i = g({ props: r, name: "HCSearchInput" }), {
+    defaultValue: t = "",
+    label: u = "Search",
+    placeholder: c,
+    disableLabel: h = !1,
+    fullWidth: d = !1,
+    variant: f = "outlined",
+    size: m = "small",
+    iconSize: p = "medium",
+    sx: S,
+    onChange: n,
+    onSubmit: a
+  } = i, [o, l] = C(t), b = (e) => {
+    l(e.target.value), n && n(e.target.value);
+  }, s = (e) => {
+    a && a(o);
+  };
+  return {
+    refs: {},
+    state: { ownerState: {
+      defaultValue: t,
+      label: u,
+      placeholder: c,
+      disableLabel: h,
+      fullWidth: d,
+      variant: f,
+      size: m,
+      iconSize: p,
+      sx: S
+    }, value: o },
+    actions: { handleChange: b, handleSubmit: s, handleKeyDown: (e) => {
+      e.key === "Enter" && s();
+    }, handleClear: () => {
+      l(""), a && a("");
+    } }
+  };
+};
+export {
+  D as useSearchInputLogic
+};

package/dist/components/search-input/styled.js

@@ -0,0 +1,33 @@
+import { styled as t, FormControl as o, InputLabel as e, OutlinedInput as a, FilledInput as r, Input as u, InputAdornment as c, IconButton as p } from "@mui/material";
+const l = (n) => n !== "ownerState", s = t(o, {
+  name: "HCSearchInput",
+  slot: "root",
+  shouldForwardProp: l
+})({}), S = t(e, {
+  name: "HCSearchInput",
+  slot: "label"
+})({}), h = t(a, {
+  name: "HCSearchInput",
+  slot: "input"
+})({}), d = t(r, {
+  name: "HCSearchInput",
+  slot: "input"
+})({}), m = t(u, {
+  name: "HCSearchInput",
+  slot: "input"
+})({}), i = t(c, {
+  name: "HCSearchInput",
+  slot: "endAdornment"
+})({}), C = t(p, {
+  name: "HCSearchInput",
+  slot: "iconButton"
+})({});
+export {
+  d as FilledSearchInput,
+  h as OutlinedSearchInput,
+  i as SearchEndAdornment,
+  C as SearchIconButton,
+  S as SearchInputLabel,
+  s as SearchInputRoot,
+  m as StandardSearchInput
+};

package/dist/components/simple-pivot-table/index.js

@@ -0,0 +1,66 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Typography as r, Divider as s, TableContainer as S, Table as u, TableBody as x, TableRow as y, TableCell as b } from "@mui/material";
+import { useSimplePivotTableLogic as P } from "./logic.js";
+import { SimplePivotTableRoot as C, SimplePivotTableHeader as F, SimplePivotTableContent as N, SimplePivotTableFooter as j } from "./styled.js";
+function z(n) {
+  const {
+    title: d,
+    dimensions: m,
+    values: c,
+    data: h,
+    aggregations: p,
+    formatCell: v,
+    ownerState: a,
+    sx: T,
+    other: g
+  } = P(n), f = {
+    title: d,
+    description: n.description,
+    dimensions: m,
+    values: c,
+    data: h,
+    aggregations: p
+  };
+  return /* @__PURE__ */ l(
+    C,
+    {
+      ownerState: a,
+      sx: T,
+      "data-snapshot": JSON.stringify(f),
+      ...g,
+      children: [
+        /* @__PURE__ */ e(F, { ownerState: a, children: /* @__PURE__ */ e(r, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: d }) }),
+        /* @__PURE__ */ e(s, {}),
+        /* @__PURE__ */ e(N, { ownerState: a, children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(u, { size: "small", children: /* @__PURE__ */ e(x, { children: h.map((i, o) => /* @__PURE__ */ l(
+          y,
+          {
+            hover: !0,
+            sx: { "&:last-child td": { borderBottom: 0 } },
+            children: [
+              m.map((t) => /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(r, { variant: "body2", children: i[t.value] ?? "—" }) }, t.value)),
+              c.map((t) => /* @__PURE__ */ e(b, { align: "right", children: /* @__PURE__ */ e(
+                r,
+                {
+                  variant: "body2",
+                  fontWeight: 500,
+                  color: "primary.main",
+                  children: v(i[t.dataFieldName])
+                }
+              ) }, t.dataFieldName))
+            ]
+          },
+          o
+        )) }) }) }) }),
+        /* @__PURE__ */ e(s, {}),
+        /* @__PURE__ */ e(j, { ownerState: a, children: p.map(({ label: i, value: o }) => /* @__PURE__ */ l(r, { variant: "caption", color: "text.disabled", children: [
+          i,
+          ": ",
+          o
+        ] }, i)) })
+      ]
+    }
+  );
+}
+export {
+  z as SimplePivotTable
+};

package/dist/components/simple-pivot-table/logic.js

@@ -0,0 +1,51 @@
+import { useThemeProps as h } from "@mui/material";
+import { useMemo as S } from "react";
+const e = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 2
+}), w = (s) => {
+  const l = h({ props: s, name: "HCSimplePivotTable" }), {
+    title: u,
+    description: c,
+    data: a = [],
+    dimensions: b = [],
+    values: r = [],
+    sx: f,
+    ...p
+  } = l, g = S(() => {
+    if (a.length === 0)
+      return [
+        { label: "Total", value: e.format(0) },
+        { label: "Avg", value: e.format(0) },
+        { label: "Max", value: e.format(0) },
+        { label: "Min", value: e.format(0) }
+      ];
+    const t = a.map(
+      (n) => r.reduce((m, N) => m + (Number(n[N.dataFieldName]) || 0), 0)
+    ), o = Math.max(...t, 1), x = Math.min(...t, o), i = t.reduce((n, m) => n + m, 0), M = i / a.length;
+    return [
+      { label: "Total", value: e.format(i) },
+      { label: "Avg", value: e.format(M) },
+      { label: "Max", value: e.format(o) },
+      { label: "Min", value: e.format(x) }
+    ];
+  }, [a, r]), v = (t) => {
+    if (t == null || t === "") return "—";
+    const o = Number(t);
+    return Number.isNaN(o) ? String(t) : e.format(o);
+  }, d = { ...l };
+  return {
+    title: u,
+    description: c,
+    dimensions: b,
+    values: r,
+    data: a,
+    aggregations: g,
+    formatCell: v,
+    ownerState: d,
+    sx: f,
+    other: p
+  };
+};
+export {
+  w as useSimplePivotTableLogic
+};

package/dist/components/simple-pivot-table/styled.js

@@ -0,0 +1,45 @@
+import { styled as e, Paper as l, Box as t } from "@mui/material";
+const i = e(l, {
+  name: "HCSimplePivotTable",
+  slot: "Root",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(() => ({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column"
+})), n = e(t, {
+  name: "HCSimplePivotTable",
+  slot: "Header",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(({ theme: o }) => ({
+  flex: "0 0 auto",
+  padding: o.spacing(1.25, 2)
+})), r = e(t, {
+  name: "HCSimplePivotTable",
+  slot: "Content",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(() => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flex: "1 1 auto",
+  minHeight: 0,
+  overflow: "auto"
+})), p = e(t, {
+  name: "HCSimplePivotTable",
+  slot: "Footer",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(({ theme: o }) => ({
+  flex: "0 0 auto",
+  padding: o.spacing(1.25, 2),
+  display: "flex",
+  justifyContent: "flex-end",
+  alignItems: "flex-end",
+  gap: o.spacing(1)
+}));
+export {
+  r as SimplePivotTableContent,
+  p as SimplePivotTableFooter,
+  n as SimplePivotTableHeader,
+  i as SimplePivotTableRoot
+};

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

@@ -0,0 +1,18 @@
+import { jsx as m } 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(
+    c,
+    {
+      ownerState: r,
+      sx: e,
+      dangerouslySetInnerHTML: { __html: o },
+      ...i
+    }
+  );
+}
+export {
+  S as StaticText
+};

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

@@ -0,0 +1,13 @@
+import { useThemeProps as p } from "@mui/material";
+const a = (o) => {
+  const t = p({ props: o, name: "HCStaticText" }), { content: e, sx: s, ...n } = t, r = e ?? "", c = { ...t };
+  return {
+    html: r,
+    ownerState: c,
+    sx: s,
+    other: n
+  };
+};
+export {
+  a as useStaticTextLogic
+};

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

@@ -0,0 +1,45 @@
+import { styled as t, Box as a } from "@mui/material";
+const i = t(a, {
+  name: "HCStaticText",
+  slot: "Root",
+  shouldForwardProp: (o) => o !== "ownerState"
+})(({ theme: o }) => ({
+  ...o.typography.body2,
+  color: o.palette.text.primary,
+  "& h1": {
+    ...o.typography.h5,
+    marginBottom: o.spacing(0.75)
+  },
+  "& h2": {
+    ...o.typography.h6,
+    marginBottom: o.spacing(0.5)
+  },
+  "& h3": {
+    ...o.typography.subtitle1,
+    fontWeight: 600,
+    marginBottom: o.spacing(0.5)
+  },
+  "& p": {
+    margin: 0,
+    "& + p": { marginTop: o.spacing(0.5) }
+  },
+  "& ul, & ol": {
+    paddingLeft: o.spacing(3),
+    margin: 0
+  },
+  "& li": { marginBottom: o.spacing(0.25) },
+  "& a": {
+    color: o.palette.primary.main,
+    textDecoration: "underline"
+  },
+  "& hr": {
+    border: "none",
+    borderTop: `1px solid ${o.palette.divider}`,
+    margin: o.spacing(1, 0)
+  },
+  "& strong": { fontWeight: 600 },
+  "& em": { fontStyle: "italic" }
+}));
+export {
+  i as StaticTextRoot
+};