asma-ui-core 3.42.0 → 3.43.0

package/dist/datetime/components/time-picker/StyledTimePicker.js

@@ -1,63 +1,63 @@
-import { PopupState as j } from "../../../hooks/usePopupState.js";
-import { ClickAwayListener as D } from "../../../components/mui-compat/ClickAwayListener.js";
-import { TimePickerPopper as E } from "./TimePickerPopper.js";
-import { getTimeFromValue as P } from "./helpers/getTimeFromValue.js";
+import { TimePickerPopper as j } from "./TimePickerPopper.js";
+import { getTimeFromValue as H } from "./helpers/getTimeFromValue.js";
 import { TimePickerInput as T } from "./TimePickerInput.js";
 import { useState as h } from "react";
-import { jsx as o, jsxs as A } from "react/jsx-runtime";
-import { format as v, isBefore as B, isValid as N } from "date-fns";
-var J = (l) => {
-  const { value: a, onSelect: i, notBeforeTime: m } = l, V = a ? v(a, "HH:mm") : "", [x, s] = h(V), [w, t] = h(!1), [g, n] = h(!0), c = w ? x : V, u = (e) => !e || !m || !N(m) || !B(e, m), k = c.length === 5 ? P(c, a) : null, y = k ? u(k) : !0, C = (e) => {
+import { ClickAwayListener as D } from "@mui/material";
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { format as v, isBefore as A, isValid as B } from "date-fns";
+import N from "material-ui-popup-state";
+var J = (i) => {
+  const { value: a, onSelect: l, notBeforeTime: m } = i, V = a ? v(a, "HH:mm") : "", [x, s] = h(V), [w, t] = h(!1), [g, n] = h(!0), c = w ? x : V, u = (e) => !e || !m || !B(m) || !A(e, m), k = c.length === 5 ? H(c, a) : null, y = k ? u(k) : !0, P = (e) => {
     const r = e.close;
     r?.();
-  }, H = (e, r) => {
+  }, C = (e, r) => {
     const d = e.target.value;
     if (t(!0), s(d), d.length !== 5) {
       n(!1);
       return;
     }
-    const f = P(d, a);
+    const f = H(d, a);
     if (!f) {
-      i(void 0), n(!1);
+      l(void 0), n(!1);
       return;
     }
-    n(!0), u(f) ? (i(f), t(!1), C(r)) : i(void 0);
+    n(!0), u(f) ? (l(f), t(!1), P(r)) : l(void 0);
   }, I = (e) => {
     if (n(!0), u(e)) {
-      i(e), s(e ? v(e, "HH:mm") : ""), t(!1);
+      l(e), s(e ? v(e, "HH:mm") : ""), t(!1);
       return;
     }
-    i(void 0), s(e ? v(e, "HH:mm") : ""), t(!0);
+    l(void 0), s(e ? v(e, "HH:mm") : ""), t(!0);
   }, L = () => {
-    i(void 0), s(""), t(!1), n(!0);
+    l(void 0), s(""), t(!1), n(!0);
   };
-  return /* @__PURE__ */ o(j, {
+  return /* @__PURE__ */ o(N, {
     variant: "popper",
     popupId: "time-picker-popper",
-    children: (e) => l.disabled || l.readOnly ? /* @__PURE__ */ o(T, {
-      ...l,
+    children: (e) => i.disabled || i.readOnly ? /* @__PURE__ */ o(T, {
+      ...i,
       popupState: e,
       localValue: c,
       isValidTime: g,
       isValidEndTime: y,
-      handleChange: (r) => H(r, e)
+      handleChange: (r) => C(r, e)
     }) : /* @__PURE__ */ o(D, {
       mouseEvent: "onMouseDown",
-      onClickAway: () => C(e),
-      children: /* @__PURE__ */ A("div", {
+      onClickAway: () => P(e),
+      children: /* @__PURE__ */ E("div", {
         className: "relative h-auto w-auto",
         children: [/* @__PURE__ */ o("div", {
           className: "m-0 flex h-fit items-center justify-center p-0",
           children: /* @__PURE__ */ o(T, {
-            ...l,
+            ...i,
             popupState: e,
             localValue: c,
             isValidTime: g,
             isValidEndTime: y,
-            handleChange: (r) => H(r, e)
+            handleChange: (r) => C(r, e)
           })
-        }), e.isOpen && /* @__PURE__ */ o(E, {
-          ...l,
+        }), e.isOpen && /* @__PURE__ */ o(j, {
+          ...i,
           popupState: e,
           handleClear: L,
           onSelect: (r) => I(r)

package/dist/datetime/components/time-picker/TimePickerInput.js

@@ -1,18 +1,19 @@
-import { StyledInputField as w } from "../../../components/inputs/input-field/StyledInputField.js";
-import { useInputMask as y } from "../../../helpers/inputMask.js";
-import { HelperText as E } from "./components/HelperText.js";
-import { ClockOutlineIcon as I } from "../../shared-components/ClockOutlineIcon.js";
+import { StyledInputField as w } from "../../shared-components/StyledInputField.js";
+import { HelperText as y } from "./components/HelperText.js";
+import { ClockOutlineIcon as E } from "../../shared-components/ClockOutlineIcon.js";
 import { useEffect as R, useRef as v } from "react";
-import { jsx as o, jsxs as M } from "react/jsx-runtime";
-var O = (c) => {
-  const { placeholder: f, disabled: r, inputClassName: h, dataTest: n, width: i, error: u, helperText: x, label: k, locale: C = "en", popupState: l, handleChange: T, isValidTime: s, isValidEndTime: p, localValue: b, title: m, readOnly: e } = c, g = y({
+import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { useMask as M } from "@react-input/mask";
+import "material-ui-popup-state/hooks";
+var S = (c) => {
+  const { placeholder: f, disabled: r, inputClassName: h, dataTest: n, width: i, error: u, helperText: x, label: T, locale: k = "en", popupState: l, handleChange: C, isValidTime: s, isValidEndTime: p, localValue: b, title: m, readOnly: e } = c, g = M({
     mask: "xx:xx",
-    maskChar: "x",
+    replacement: { x: /\d/ },
     showMask: !1
   }), d = !s || !p || !!u, a = v(null);
   return R(() => {
     a.current && l.setAnchorEl(a.current);
-  }, []), /* @__PURE__ */ M("div", {
+  }, []), /* @__PURE__ */ I("div", {
     style: { height: e ? "40px" : "75px" },
     children: [m && /* @__PURE__ */ o("div", {
       className: "pb-1 font-roboto font-semibold text-delta-800",
@@ -26,20 +27,20 @@ var O = (c) => {
       placeholder: f,
       size: "small",
       error: d,
-      helperText: /* @__PURE__ */ o(E, {
+      helperText: /* @__PURE__ */ o(y, {
         isValidTime: s,
         isValidEndTime: p,
         error: d,
-        localization: C,
+        localization: k,
         helperText: x
       }),
-      onChange: T,
+      onChange: C,
       slotProps: { input: {
         ref: a,
         onMouseDown: (t) => {
           !r && !e && l.open(t);
         },
-        endAdornment: /* @__PURE__ */ o(I, {
+        endAdornment: /* @__PURE__ */ o(E, {
           width: 24,
           height: 24,
           onClick: (t) => {
@@ -56,10 +57,10 @@ var O = (c) => {
       disabled: r,
       readOnly: e,
       className: h,
-      label: k
+      label: T
     })]
   });
 };
 export {
-  O as TimePickerInput
+  S as TimePickerInput
 };

package/dist/datetime/components/time-picker/TimePickerPopper.js

@@ -1,31 +1,29 @@
 import { StyledButton as r } from "../../shared-components/button/StyledButton.js";
-import { bindPopper as s } from "../../../hooks/usePopupState.js";
-import { Paper as l } from "../../../components/mui-compat/Paper.js";
-import { Fade as c } from "../../../components/mui-compat/Fade.js";
-import { Popper as h } from "../../../components/mui-compat/Popper.js";
-import f from "./StyledTimePicker.module.js";
-import { TimePickerBody as u } from "./components/TimePickerBody.js";
-import { EraserIcon as x } from "../../shared-components/EraserIcon.js";
-import { CheckIcon as k } from "../../shared-components/CheckIcon.js";
-import y from "clsx";
+import s from "./StyledTimePicker.module.js";
+import { TimePickerBody as l } from "./components/TimePickerBody.js";
+import { EraserIcon as c } from "../../shared-components/EraserIcon.js";
+import { CheckIcon as h } from "../../shared-components/CheckIcon.js";
+import f from "clsx";
+import { Fade as u, Paper as x, Popper as k } from "@mui/material";
 import { jsx as t, jsxs as o } from "react/jsx-runtime";
-var I = (m) => {
-  const { popupState: e, dataTest: a, value: i, onSelect: n, handleClear: p } = m;
-  return /* @__PURE__ */ t(h, {
-    ...s(e),
-    className: y(f["shadow-mui"]),
+import { bindPopper as y } from "material-ui-popup-state/hooks";
+var j = (a) => {
+  const { popupState: e, dataTest: m, value: i, onSelect: n, handleClear: p } = a;
+  return /* @__PURE__ */ t(k, {
+    ...y(e),
+    className: f(s["shadow-mui"]),
     transition: !0,
     style: {
       zIndex: "1300",
       position: "absolute"
     },
-    children: ({ TransitionProps: d }) => /* @__PURE__ */ t(c, {
+    children: ({ TransitionProps: d }) => /* @__PURE__ */ t(u, {
       ...d,
       timeout: 350,
-      children: /* @__PURE__ */ o(l, {
+      children: /* @__PURE__ */ o(x, {
         style: { paddingBottom: "1px" },
-        children: [/* @__PURE__ */ t(u, {
-          dataTest: `${a}-time-picker-body`,
+        children: [/* @__PURE__ */ t(l, {
+          dataTest: `${m}-time-picker-body`,
           value: i,
           onSelect: n
         }), /* @__PURE__ */ o("div", {
@@ -46,7 +44,7 @@ var I = (m) => {
               minWidth: "40px",
               marginLeft: "10px"
             },
-            children: /* @__PURE__ */ t(x, {
+            children: /* @__PURE__ */ t(c, {
               width: 24,
               height: 24
             })
@@ -60,7 +58,7 @@ var I = (m) => {
               minWidth: "40px",
               marginRight: "16px"
             },
-            children: /* @__PURE__ */ t(k, {
+            children: /* @__PURE__ */ t(h, {
               width: 20,
               height: 20
             })
@@ -71,5 +69,5 @@ var I = (m) => {
   });
 };
 export {
-  I as TimePickerPopper
+  j as TimePickerPopper
 };

package/dist/datetime/helpers/cn.js

@@ -1,7 +1,8 @@
-import { clsx as n } from "clsx";
-function t(...r) {
-  return n(r);
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function n(...r) {
+  return t(o(r));
 }
 export {
-  t as cn
+  n as cn
 };

package/dist/datetime/shared-components/ExpandIcon.js

@@ -0,0 +1,18 @@
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+function i(r) {
+  return /* @__PURE__ */ t("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 24 24",
+    ...r,
+    children: /* @__PURE__ */ t("path", {
+      fill: "currentColor",
+      d: "M12 14.95q-.2 0-.375-.062t-.325-.213l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213T12 14.95"
+    })
+  });
+}
+export {
+  i as ExpandIcon
+};

package/dist/datetime/shared-components/StyledFormControl.js

@@ -0,0 +1,23 @@
+import { FormControl as r } from "@mui/material";
+import { jsx as t } from "react/jsx-runtime";
+var l = (o) => /* @__PURE__ */ t(r, {
+  ...o,
+  sx: {
+    ...o.sx,
+    "& label.MuiInputLabel-shrink": {
+      background: "white !important",
+      color: "var(--colors-delta-500) !important"
+    },
+    "& label.MuiInputLabel-shrink.Mui-focused": {
+      background: "white !important",
+      color: "var(--colors-gama-500) !important"
+    },
+    "& label.MuiInputLabel-shrink.Mui-error.Mui-focused": {
+      background: "white !important",
+      color: "var(--colors-red-500) !important"
+    }
+  }
+});
+export {
+  l as StyledFormControl
+};

package/dist/datetime/shared-components/StyledInputField.js

@@ -0,0 +1,47 @@
+import { TextField as i } from "@mui/material";
+import { jsx as a } from "react/jsx-runtime";
+var d = ({ readOnly: o, disabled: t, dataTest: e, ...r }) => /* @__PURE__ */ a(i, {
+  ...r,
+  "data-test": e,
+  disabled: !!t || !!o,
+  type: r.type ?? "mui-input",
+  sx: {
+    "& input:-webkit-autofill, & .MuiInputBase-root:has(> input:-webkit-autofill)": { backgroundColor: "#e8f0fe !important" },
+    "& input": { backgroundColor: "transparent" },
+    "& .MuiInputBase-root": { backgroundColor: "transparent" },
+    "& .MuiInputBase-colorPrimary fieldset": { borderColor: "var(--colors-delta-500) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-focused fieldset": { borderColor: "var(--colors-gama-500) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-focused::after": { borderColor: "var(--colors-gama-500) !important" },
+    "& .MuiInputBase-colorPrimary:hover fieldset": {
+      borderColor: "var(--colors-gama-300) !important",
+      borderWidth: "2px !important"
+    },
+    "& .MuiInputBase-colorPrimary.Mui-disabled:hover fieldset": { borderWidth: "1px !important" },
+    "& .MuiInputBase-colorPrimary.Mui-focused:hover fieldset": { borderColor: "var(--colors-gama-500) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-error fieldset": { borderColor: "var(--colors-error-500) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-error:hover fieldset": { borderColor: "var(--colors-error-500) !important" },
+    "& .MuiFormHelperText-root": { fontSize: "14px" },
+    "& .MuiFormHelperText-root.Mui-error": {
+      color: "var(--colors-error-500) !important",
+      marginLeft: 0
+    },
+    "& .MuiInputBase-colorPrimary.Mui-disabled fieldset": { borderColor: "var(--colors-delta-300) !important" },
+    "& label.Mui-focused": { color: "var(--colors-gama-500) !important" },
+    "& label.Mui-focused.Mui-error": { color: "var(--colors-error-500) !important" },
+    "& label.Mui-disabled": { color: "var(--colors-delta-300) !important" },
+    "& .MuiOutlinedInput-input::placeholder": {
+      color: "#666666",
+      opacity: "100"
+    },
+    "& .MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: "var(--colors-delta-300) !important" },
+    ...o && {
+      "& .MuiOutlinedInput-input.Mui-disabled": { WebkitTextFillColor: "var(--colors-delta-800) !important" },
+      "& .MuiInputBase-colorPrimary.Mui-disabled": { backgroundColor: "var(--colors-delta-10) !important" },
+      "& .MuiInputBase-colorPrimary.Mui-disabled fieldset": { borderColor: "var(--colors-delta-200) !important" }
+    },
+    ...r.sx
+  }
+});
+export {
+  d as StyledInputField
+};

package/dist/datetime/shared-components/StyledSelect.js

@@ -0,0 +1,47 @@
+import { ExpandIcon as i } from "./ExpandIcon.js";
+import a from "clsx";
+import { Select as m } from "@mui/material";
+import { jsx as r } from "react/jsx-runtime";
+var p = ({ dataTest: t, ...o }) => /* @__PURE__ */ r(m, {
+  ...o,
+  "data-test": t,
+  value: o.value,
+  IconComponent: ({ className: e, ...n }) => /* @__PURE__ */ r(i, {
+    ...n,
+    width: 24,
+    height: 24,
+    className: a(e),
+    style: { marginTop: "-3.5px" }
+  }),
+  sx: {
+    ".MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-delta-500) !important" },
+    "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
+    "&.Mui-error .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-error-500) !important" },
+    "& .MuiInputBase-colorPrimary.Mui-error fieldset": { borderColor: "var(--colors-error-500) !important" },
+    "&.Mui-focused::after": { borderColor: "transparent" },
+    transition: "none",
+    "&::before": {
+      transition: "none",
+      borderBottom: "none"
+    },
+    "&::after": { transition: "none" },
+    "&:hover::before": {
+      transition: "none",
+      borderBottom: "none"
+    },
+    ".MuiPaper-root": {
+      transition: "none !important",
+      animation: "none !important"
+    },
+    ".MuiMenuItem-root": {
+      transition: "none !important",
+      animation: "none !important"
+    },
+    "&:hover:not(.Mui-disabled, .Mui-error)::before": { borderBottom: "none" },
+    "&:focus::before": { borderBottom: "none" },
+    ...o.sx
+  }
+});
+export {
+  p as StyledSelect
+};

package/dist/datetime/shared-components/StyledSelectItem.js

@@ -0,0 +1,13 @@
+import { MenuItem as e } from "@mui/material";
+import { jsx as o } from "react/jsx-runtime";
+var n = (r) => /* @__PURE__ */ o(e, {
+  ...r,
+  sx: {
+    "&.MuiMenuItem-root": { fontSize: "14px !important" },
+    "&.Mui-selected": { backgroundColor: "var(--colors-gama-50) !important" }
+  },
+  children: r.children
+});
+export {
+  n as StyledSelectItem
+};

package/dist/datetime/shared-components/StyledTooltip.js

@@ -0,0 +1,32 @@
+import { Fade as i, Tooltip as e } from "@mui/material";
+import { jsx as l } from "react/jsx-runtime";
+import { mergeSlotProps as t } from "@mui/material/utils";
+var a = {
+  borderRadius: "3px",
+  "& .MuiTooltip-arrow": { color: "#363E4A" },
+  color: "white",
+  boxShadow: "0px 1px 4px 0px rgba(0, 0, 0, 0.25)",
+  display: "flex",
+  padding: "4px 8px",
+  alignItems: "center",
+  fontSize: "12px",
+  lineHeight: "16px",
+  letterSpacing: "0.24px",
+  bgcolor: "#363E4A",
+  wordBreak: "break-word"
+}, d = (r) => {
+  const { slotProps: o, ...p } = r;
+  return /* @__PURE__ */ l(e, {
+    placement: "top",
+    ...p,
+    slots: { transition: i },
+    slotProps: {
+      ...o,
+      transition: t(o?.transition, { timeout: 300 }),
+      tooltip: t(o?.tooltip, { sx: a })
+    }
+  });
+};
+export {
+  d as StyledTooltip
+};

package/dist/helpers/cn.js

@@ -1,7 +1,8 @@
-import { clsx as n } from "clsx";
-function t(...r) {
-  return n(r);
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function n(...r) {
+  return t(o(r));
 }
 export {
-  t as cn
+  n as cn
 };