@spesia/ui 1.8.21 → 1.9.7

package/dist/components/checkbox/Checked.js

@@ -0,0 +1,47 @@
+import { styled as C } from "@mui/material/styles";
+import v from "./Unchecked.js";
+import { primitives as h } from "../../styles/colors.js";
+const x = (r, o) => `<svg xmlns='http://www.w3.org/2000/svg' width='${r}' height='${o}' viewBox='0 0 16 12' fill='none'><path d='M14.3333 1L5.16667 10.1667L1 6' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>`, p = (r, o) => `url("data:image/svg+xml;utf8,${encodeURIComponent(x(r, o))}")`, M = C(v)(({ theme: r }) => {
+  var o, a, e, l, n, t, c, i, d, s, u, g, b, k;
+  return {
+    backgroundColor: (o = r.vars) == null ? void 0 : o.palette.background.secondaryPaper,
+    backgroundImage: p(16, 12),
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    borderWidth: 2,
+    borderColor: (a = r.vars) == null ? void 0 : a.palette.primary.light,
+    ".MuiCheckbox-root[variant='rounded'] &": {
+      borderRadius: h.borderRadius.full
+    },
+    ".MuiCheckbox-sizeSmall &": {
+      backgroundImage: p(12, 8)
+    },
+    ".MuiCheckbox-colorNeutral &": {
+      borderColor: (e = r.vars) == null ? void 0 : e.palette.neutral.main,
+      backgroundColor: (l = r.vars) == null ? void 0 : l.palette.neutral.light
+    },
+    ".MuiCheckbox-colorSecondary &": {
+      borderColor: (n = r.vars) == null ? void 0 : n.palette.secondary.main,
+      backgroundColor: (t = r.vars) == null ? void 0 : t.palette.background.alphaBrown
+    },
+    ".MuiCheckbox-colorInfo &": {
+      borderColor: (c = r.vars) == null ? void 0 : c.palette.info.main,
+      backgroundColor: (i = r.vars) == null ? void 0 : i.palette.info.lighter
+    },
+    ".MuiCheckbox-colorError &": {
+      borderColor: (d = r.vars) == null ? void 0 : d.palette.error.main,
+      backgroundColor: (s = r.vars) == null ? void 0 : s.palette.error.lighter
+    },
+    ".MuiCheckbox-colorSuccess &": {
+      borderColor: (u = r.vars) == null ? void 0 : u.palette.success.main,
+      backgroundColor: (g = r.vars) == null ? void 0 : g.palette.success.lighter
+    },
+    ".MuiCheckbox-colorWarning &": {
+      borderColor: (b = r.vars) == null ? void 0 : b.palette.warning.main,
+      backgroundColor: (k = r.vars) == null ? void 0 : k.palette.warning.lighter
+    }
+  };
+}), y = M;
+export {
+  y as default
+};

package/dist/components/checkbox/Unchecked.js

@@ -0,0 +1,70 @@
+import { styled as x } from "@mui/material/styles";
+import { primitives as h } from "../../styles/colors.js";
+const M = x("span")(({ theme: r }) => {
+  var o, a, e, l, c, i, n, t, u, d, s, b, p, k, C, g, v;
+  return {
+    borderRadius: h.borderRadius.default,
+    width: 24,
+    height: 24,
+    border: "2px solid",
+    borderColor: (o = r.vars) == null ? void 0 : o.palette.primary.light,
+    backgroundColor: (a = r.vars) == null ? void 0 : a.palette.background.paper,
+    ".MuiCheckbox-root[variant='rounded'] &": {
+      borderRadius: h.borderRadius.full
+    },
+    ".Mui-focusVisible &": {
+      outline: `2px auto ${(e = r.vars) == null ? void 0 : e.palette.neutral.lighter}`,
+      outlineOffset: 2
+    },
+    ".MuiCheckbox-sizeSmall &": {
+      width: 20,
+      height: 20
+    },
+    "input:hover ~ &": {
+      backgroundColor: (l = r.vars) == null ? void 0 : l.palette.background.secondaryPaper
+    },
+    "input:disabled ~ &": {
+      boxShadow: "none",
+      background: (c = r.vars) == null ? void 0 : c.palette.background.alphaBrown
+    },
+    ".MuiCheckbox-colorNeutral &": {
+      borderColor: (i = r.vars) == null ? void 0 : i.palette.neutral.main
+    },
+    ".MuiCheckbox-colorNeutral:hover &": {
+      backgroundColor: (n = r.vars) == null ? void 0 : n.palette.neutral.lighter
+    },
+    ".MuiCheckbox-colorSecondary &": {
+      borderColor: (t = r.vars) == null ? void 0 : t.palette.secondary.main
+    },
+    ".MuiCheckbox-colorSecondary:hover &": {
+      backgroundColor: (u = r.vars) == null ? void 0 : u.palette.background.alphaBrown
+    },
+    ".MuiCheckbox-colorInfo &": {
+      borderColor: (d = r.vars) == null ? void 0 : d.palette.info.main
+    },
+    ".MuiCheckbox-colorInfo:hover &": {
+      backgroundColor: (s = r.vars) == null ? void 0 : s.palette.info.lighter
+    },
+    ".MuiCheckbox-colorError &": {
+      borderColor: (b = r.vars) == null ? void 0 : b.palette.error.main
+    },
+    ".MuiCheckbox-colorError:hover &": {
+      backgroundColor: (p = r.vars) == null ? void 0 : p.palette.error.lighter
+    },
+    ".MuiCheckbox-colorSuccess &": {
+      borderColor: (k = r.vars) == null ? void 0 : k.palette.success.main
+    },
+    ".MuiCheckbox-colorSuccess:hover &": {
+      backgroundColor: (C = r.vars) == null ? void 0 : C.palette.success.lighter
+    },
+    ".MuiCheckbox-colorWarning &": {
+      borderColor: (g = r.vars) == null ? void 0 : g.palette.warning.main
+    },
+    ".MuiCheckbox-colorWarning:hover &": {
+      backgroundColor: (v = r.vars) == null ? void 0 : v.palette.warning.lighter
+    }
+  };
+}), y = M;
+export {
+  y as default
+};

package/dist/components/chip-list/ChipList.js

@@ -0,0 +1,97 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as C, useEffect as g } from "react";
+import { suitCx as k } from "../../helpers/suitCx.js";
+import { Box as w, Tooltip as R, Chip as L } from "@mui/material";
+import { primitives as f } from "../../styles/colors.js";
+const j = ({
+  options: b,
+  onSelect: d,
+  initialValue: o,
+  disabled: i,
+  dataTestId: p = "chipList",
+  size: m,
+  className: v
+}) => {
+  const l = b.map((e) => ({
+    ...e,
+    label: e.label || e.value,
+    tooltip: e.tooltip
+  })) ?? [], [t, c] = C(o), s = k(
+    {
+      name: "ChipList",
+      states: ["disabled"]
+    },
+    {
+      disabled: i
+    },
+    v
+  ), h = (e) => {
+    c(e), d && d(e);
+  };
+  g(() => {
+    Promise.resolve().then(() => {
+      o && o !== t && c(o);
+    });
+  }, [o]);
+  const x = /* @__PURE__ */ a(
+    w,
+    {
+      role: "listbox",
+      className: s("periods"),
+      sx: {
+        backgroundColor: (e) => {
+          var r;
+          return (r = e.vars) == null ? void 0 : r.palette.background.alphaBrown;
+        },
+        borderRadius: f.borderRadius.full,
+        padding: 2,
+        display: "flex",
+        flexDirection: "row",
+        gap: 4,
+        ".MuiChip-icon": {
+          fill: (e) => {
+            var r;
+            return (r = e.vars) == null ? void 0 : r.palette.text.primary;
+          }
+        }
+      },
+      "data-testid": p + "_Options",
+      children: l == null ? void 0 : l.map((e, r) => /* @__PURE__ */ a(
+        "div",
+        {
+          className: s("periods-item"),
+          role: "option",
+          "aria-selected": e.value === t,
+          children: /* @__PURE__ */ a(R, { arrow: !0, placement: "top", title: e.tooltip ?? "", children: /* @__PURE__ */ a(
+            L,
+            {
+              sx: {
+                px: 2,
+                backgroundColor: (n) => {
+                  var u;
+                  return e.value === t ? (u = n.vars) == null ? void 0 : u.palette.background.default : "transparent";
+                },
+                borderRadius: f.borderRadius.full,
+                border: "none",
+                width: "auto"
+              },
+              size: m,
+              disabled: i,
+              label: e.label,
+              icon: e.icon,
+              "data-selected": e.value === t,
+              "data-value": e.value,
+              onClick: (n) => h(e.value)
+            }
+          ) })
+        },
+        "period-" + r
+      ))
+    }
+  );
+  return /* @__PURE__ */ a("div", { "data-testid": p, className: s(), children: x });
+};
+export {
+  j as ChipList,
+  j as default
+};

package/dist/components/container-grid/ContainerGrid.js

@@ -0,0 +1,110 @@
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as N, useState as C, useRef as w, useEffect as $, useContext as P } from "react";
+import { suitCx as F } from "../../helpers/suitCx.js";
+import { useContainerDimensions as W } from "../../hooks/useContainerDimension.js";
+import { Box as G } from "@mui/material";
+import { theme as x } from "../../styles/index.js";
+const I = N(null), y = ({
+  spacing: s,
+  breakpoints: e,
+  className: r,
+  children: c,
+  sx: t
+}) => {
+  const [i, n] = C(void 0), m = w(null), { width: o } = W(m), d = F(
+    {
+      name: "ContainerGrid",
+      modifiers: ["container", "size"]
+    },
+    { container: !0, size: i },
+    r
+  );
+  return $(() => {
+    Promise.resolve().then(() => {
+      var l, u, f, S, v, g, p, h, z;
+      o && (o >= Number.parseInt(
+        ((e == null ? void 0 : e.lg) ?? ((f = (u = (l = x) == null ? void 0 : l.breakpoints) == null ? void 0 : u.values) == null ? void 0 : f.lg) ?? 1200).toString()
+      ) ? n("lg") : o >= Number.parseInt(
+        ((e == null ? void 0 : e.md) ?? ((g = (v = (S = x) == null ? void 0 : S.breakpoints) == null ? void 0 : v.values) == null ? void 0 : g.md) ?? 900).toString()
+      ) ? n("md") : o >= Number.parseInt(
+        ((e == null ? void 0 : e.sm) ?? ((z = (h = (p = x) == null ? void 0 : p.breakpoints) == null ? void 0 : h.values) == null ? void 0 : z.sm) ?? 600).toString()
+      ) ? n("sm") : n("xs"));
+    });
+  }, [o]), /* @__PURE__ */ a(
+    I.Provider,
+    {
+      value: {
+        containerSizeFromContext: i,
+        spacingFromContext: s
+      },
+      children: /* @__PURE__ */ a(
+        G,
+        {
+          gap: `${s}px`,
+          sx: { display: "flex", flexWrap: "wrap", ...t },
+          className: d(),
+          ref: m,
+          children: c
+        }
+      )
+    }
+  );
+}, R = ({
+  className: s,
+  children: e,
+  size: r,
+  sx: c
+}) => {
+  const { containerSizeFromContext: t, spacingFromContext: i } = P(I), [n, m] = C(100), [o, d] = C(void 0), l = F(
+    {
+      name: "ContainerGrid-column",
+      modifiers: ["size"]
+    },
+    { size: o },
+    s
+  );
+  return $(() => {
+    Promise.resolve().then(() => {
+      if (t && o !== t) {
+        d(t);
+        const u = (r == null ? void 0 : r[t]) ?? 12, f = parseInt(`${u ?? 1}`);
+        m(Math.round(f / 12 * 100));
+      }
+    });
+  }, [t]), /* @__PURE__ */ a(
+    G,
+    {
+      sx: {
+        display: "block",
+        width: `calc(${n}% - ${i}px)`,
+        ...c
+      },
+      className: l(),
+      children: e
+    }
+  );
+};
+function q({
+  container: s,
+  spacing: e,
+  size: r,
+  breakpoints: c,
+  className: t,
+  children: i,
+  sx: n
+}) {
+  const m = `${e ?? 0}`;
+  return s ? /* @__PURE__ */ a(
+    y,
+    {
+      className: t,
+      spacing: m,
+      sx: n,
+      breakpoints: c,
+      children: i
+    }
+  ) : /* @__PURE__ */ a(R, { className: t, size: r, sx: n, children: i });
+}
+export {
+  q as ContainerGrid
+};

package/dist/components/date-picker/DatePicker/DatePicker.js

@@ -0,0 +1,62 @@
+import { jsx as P } from "react/jsx-runtime";
+import { useState as k, useMemo as x } from "react";
+import { suitCx as v } from "../../../helpers/suitCx.js";
+import { DatePicker as h } from "@mui/x-date-pickers/DatePicker";
+const w = ({
+  label: a = void 0,
+  disabled: t = !1,
+  dataTestId: s = "DatePicker",
+  className: o,
+  value: i,
+  minDateErrorText: n,
+  maxDateErrorText: c,
+  errorText: e = "Your date is not valid",
+  size: l,
+  sx: m,
+  ...u
+}) => {
+  const [r, d] = k(null), f = x(() => {
+    switch (r) {
+      case "maxDate":
+        return c ?? e;
+      case "minDate":
+        return n ?? e;
+      case "invalidDate":
+        return e;
+      default:
+        return null;
+    }
+  }, [r]), D = v(
+    {
+      name: "DatePicker",
+      modifiers: ["disabled"]
+    },
+    {
+      disabled: t
+    },
+    o
+  );
+  return /* @__PURE__ */ P(
+    h,
+    {
+      ...u,
+      onError: (p) => d(p),
+      value: i,
+      label: a,
+      slotProps: {
+        textField: {
+          helperText: f,
+          size: l
+        }
+      },
+      disabled: t,
+      className: D(),
+      "data-testid": s,
+      sx: m
+    }
+  );
+};
+export {
+  w as DatePicker,
+  w as default
+};