asma-ui-core 3.42.0 → 3.43.0

package/dist/components/inputs/radio-button/base-ui/StyledRadioGroup.js

@@ -1,43 +1,31 @@
-import { ErrorOutlineIcon as B } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { RadioGroupContext as C } from "./RadioGroupContext.js";
-import { StyledFormHelperText as G } from "../../../miscellaneous/StyledFormHelperText.js";
-import H from "clsx";
-import { forwardRef as q, useId as t, useMemo as D, useState as E } from "react";
-import { jsx as p, jsxs as u } from "react/jsx-runtime";
-var z = q(({ value: o, defaultValue: f, onValueChange: x, disabled: s, dataTest: h, error: e, errorText: v, helperText: d, children: y, name: I, ...g }, R) => {
-  const r = t(), i = t(), S = t(), l = I ?? S, n = o !== void 0, [b, w] = E(f ?? null), a = n ? o : b, N = (m) => {
-    n || w(m), x?.(m);
-  }, T = D(() => ({
-    name: l,
+import { ErrorOutlineIcon as u } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledFormHelperText as y } from "../../../miscellaneous/StyledFormHelperText.js";
+import I from "clsx";
+import { forwardRef as R, useId as s } from "react";
+import { jsx as b, jsxs as r } from "react/jsx-runtime";
+import { RadioGroup as v } from "@base-ui/react/radio-group";
+var q = R(({ value: a, defaultValue: l, onValueChange: m, dataTest: c, error: t, errorText: p, helperText: e, children: n, ...f }, x) => {
+  const d = s(), i = s(), o = (t ?? !1) || (e ?? !1), h = t ? p ?? "Required" : e;
+  return /* @__PURE__ */ r(v, {
+    ...f,
+    "data-testid": c,
+    "aria-describedby": o ? t ? i : d : void 0,
+    "aria-invalid": t,
+    ref: x,
     value: a,
-    disabled: s,
-    onSelect: N
-  }), [
-    l,
-    a,
-    s
-  ]), c = (e ?? !1) || (d ?? !1), j = e ? v ?? "Required" : d;
-  return /* @__PURE__ */ u("div", {
-    ...g,
-    ref: R,
-    role: "radiogroup",
-    "data-testid": h,
-    "aria-describedby": c ? e ? i : r : void 0,
-    "aria-invalid": e,
-    children: [/* @__PURE__ */ p(C.Provider, {
-      value: T,
-      children: y
-    }), c && /* @__PURE__ */ u(G, {
-      id: e ? i : r,
-      role: e ? "alert" : "status",
-      className: H("m-0 flex items-center gap-1 pt-1 text-sm", e ? "text-error-500" : "text-delta-600"),
-      children: [e && /* @__PURE__ */ p(B, {
+    defaultValue: l,
+    onValueChange: m,
+    children: [n, o && /* @__PURE__ */ r(y, {
+      id: t ? i : d,
+      role: t ? "alert" : "status",
+      className: I("m-0 flex items-center gap-1 pt-1 text-sm", t ? "text-error-500" : "text-delta-600"),
+      children: [t && /* @__PURE__ */ b(u, {
         width: 20,
         height: 20
-      }), j]
+      }), h]
     })]
   });
 });
 export {
-  z as StyledRadioGroup
+  q as StyledRadioGroup
 };

package/dist/components/inputs/search-field/StyledSearchField.js

@@ -1,14 +1,14 @@
-import { cn as a } from "../../../helpers/cn.js";
+import { cn as r } from "../../../helpers/cn.js";
 import { SearchIcon as c } from "../../icons/search-icon/SearchIcon.js";
 import { CloseIcon as d } from "../../icons/close-icon/CloseIcon.js";
 import { StyledInputField as p } from "../input-field/StyledInputField.js";
 import { useState as u } from "react";
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
-var g = ({ value: t, onClear: l, ...e }) => {
-  const [n, s] = u(!1), o = n || t;
-  return /* @__PURE__ */ m("div", {
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+var g = ({ value: t, onClear: n, ...e }) => {
+  const [l, s] = u(!1), a = l || t;
+  return /* @__PURE__ */ h("div", {
     className: "relative w-full",
-    children: [/* @__PURE__ */ i(p, {
+    children: [/* @__PURE__ */ o(p, {
       size: "small",
       variant: "outlined",
       value: t,
@@ -20,24 +20,24 @@ var g = ({ value: t, onClear: l, ...e }) => {
       },
       slotProps: {
         input: {
-          className: a("transition-[padding] duration-300", o ? "pl-0" : "pl-5"),
+          className: r("transition-[padding] duration-300", a ? "pl-0" : "pl-5"),
           sx: { "& input": {
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
             overflow: "hidden"
           } },
-          endAdornment: t ? /* @__PURE__ */ i("div", {
+          endAdornment: t ? /* @__PURE__ */ o("div", {
             "data-testid": "styled-search-clear-icon",
-            className: a("cursor-pointer rounded-full bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", t ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0"),
+            className: r("cursor-pointer rounded-full bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", t ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0"),
             style: {
               width: 24,
               height: 24,
               flexShrink: 0
             },
-            onClick: (r) => {
-              r.preventDefault(), r.stopPropagation(), l?.();
+            onClick: (i) => {
+              i.preventDefault(), i.stopPropagation(), n?.();
             },
-            children: /* @__PURE__ */ i(d, {
+            children: /* @__PURE__ */ o(d, {
               width: 20,
               height: 20,
               color: "var(--colors-delta-700)",
@@ -45,21 +45,22 @@ var g = ({ value: t, onClear: l, ...e }) => {
             })
           }) : null
         },
-        inputLabel: {
-          className: o ? void 0 : "ml-6",
-          sx: { width: o ? void 0 : "calc(100% - 42px)" }
-        }
+        inputLabel: { sx: {
+          transform: "translate(34px, 9px) scale(1)",
+          width: a ? void 0 : "calc(100% - 42px)",
+          "&.MuiInputLabel-shrink": { transform: "translate(16px, -9px) scale(0.75)" }
+        } }
       },
       ...e,
       sx: {
         ...e.fullWidth ? { width: "100%" } : { width: 160 },
         ...e.sx
       }
-    }), /* @__PURE__ */ i(c, {
+    }), /* @__PURE__ */ o(c, {
       "data-testid": "styled-search-icon",
       width: 24,
       height: 24,
-      className: a("absolute left-2 top-1/2 -translate-y-1/2", "transform-gpu transition-all duration-300 ease-in-out", o ? "pointer-events-none scale-75 opacity-0" : "scale-100 opacity-100", e.error && "top-1/3"),
+      className: r("absolute left-2 top-1/2 -translate-y-1/2", "transform-gpu transition-all duration-300 ease-in-out", a ? "pointer-events-none scale-75 opacity-0" : "scale-100 opacity-100", e.error && "top-1/3"),
       color: "var(--colors-delta-700)"
     })]
   });

package/dist/components/inputs/select/StyledSelect.js

@@ -1,127 +1,48 @@
-import { cn as a } from "../../../helpers/cn.js";
-import { resolveSx as oe } from "../../../helpers/sx.js";
-import { ChevronDownIcon as re } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as se } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as le } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { outlineClass as ne } from "../field-styles.js";
-import { useFormControlContext as ie } from "../../miscellaneous/FormControlContext.js";
-import { StyledFormHelperText as ae } from "../../miscellaneous/StyledFormHelperText.js";
-import { Children as D, cloneElement as ce, isValidElement as R, useEffect as F, useRef as de, useState as S } from "react";
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import { FloatingPortal as me, autoUpdate as fe, flip as ue, offset as pe, shift as xe, size as ge, useClick as he, useDismiss as be, useFloating as we, useInteractions as ye, useMergeRefs as E, useRole as ve } from "@floating-ui/react";
-var Ve = ({ dataTest: x, value: g, defaultValue: A, onChange: I, size: z, error: V, errorText: j, allowClear: P, disabled: _, readOnly: d, name: h, placeholder: m, displayEmpty: f, renderValue: b, fullWidth: U, className: q, style: B, sx: K, children: w, MenuProps: M }) => {
-  const r = ie(), $ = z ?? r?.size ?? "medium", y = V ?? r?.error ?? !1, l = _ ?? r?.disabled ?? !1, [s, v] = S(!1), [H, O] = S(A), C = g !== void 0, n = C ? g : H, i = n !== void 0 && n !== "" && n !== null, u = de(null), { refs: N, floatingStyles: W, context: p } = we({
-    open: s,
-    onOpenChange: v,
-    placement: "bottom-start",
-    whileElementsMounted: fe,
-    middleware: [
-      pe(4),
-      ue({ padding: 8 }),
-      xe({ padding: 8 }),
-      ge({ apply({ rects: e, elements: t }) {
-        t.floating.style.minWidth = `${e.reference.width}px`;
-      } })
-    ]
-  }), { getReferenceProps: G, getFloatingProps: J } = ye([
-    he(p, { enabled: !l && !d }),
-    be(p),
-    ve(p, { role: "listbox" })
-  ]), L = E([N.setReference]), Q = E([N.setFloating, u]);
-  F(() => r?.setFocused(s), [s, r]), F(() => r?.setFilled(i || !!m || !!f), [
-    i,
-    m,
-    f,
-    r
-  ]);
-  const k = (e, t) => {
-    C || O(e), I?.({ target: {
-      value: e,
-      name: h
-    } }, t), v(!1);
-  }, T = D.map(w, (e) => {
-    if (!R(e)) return e;
-    const t = e.props.value;
-    return ce(e, {
-      selected: t === n,
-      onClick: () => k(t, e.props.children)
-    });
-  }), X = D.toArray(w).find((e) => R(e) && e.props.value === n), Y = b ? b(n) : X?.props.children, Z = (e) => {
-    const t = u.current ? Array.from(u.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
-    if (t.length === 0) return;
-    const ee = t.findIndex((te) => te === document.activeElement);
-    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(ee + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
-  };
-  return /* @__PURE__ */ c("div", {
-    className: a("group relative inline-flex flex-col", U && "w-full", q),
-    style: {
-      ...oe(K),
-      ...B
+import { ChevronDownIcon as u } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as m } from "../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as d } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledFormHelperText as c } from "../../miscellaneous/StyledFormHelperText.js";
+import s from "clsx";
+import { Select as h } from "@mui/material";
+import { Fragment as p, jsx as o, jsxs as t } from "react/jsx-runtime";
+var I = ({ dataTest: i, allowClear: l, error: e, errorText: n, ...r }) => /* @__PURE__ */ t(p, { children: [/* @__PURE__ */ o(h, {
+  ...r,
+  "data-testid": i,
+  error: e,
+  value: r.value,
+  IconComponent: ({ className: a }) => /* @__PURE__ */ o(u, {
+    width: 24,
+    height: 24,
+    className: s(a, "-mt-[3.5px]")
+  }),
+  endAdornment: l && r.value ? /* @__PURE__ */ o("div", {
+    "data-testid": "select-clear-button",
+    className: "absolute right-8 flex items-center justify-center rounded-full p-[2px] duration-300 hover:bg-gama-100",
+    onClick: () => {
+      r.onChange?.({ target: { value: "" } }, null);
     },
-    children: [
-      /* @__PURE__ */ c("button", {
-        ref: L,
-        type: "button",
-        "data-testid": x,
-        role: "combobox",
-        "aria-haspopup": "listbox",
-        "aria-expanded": s,
-        "aria-disabled": l ? !0 : void 0,
-        disabled: l,
-        ...G(),
-        className: a("relative flex w-full items-center justify-between rounded-lg border-0 bg-transparent px-3 text-left text-delta-800 outline-none", $ === "small" ? "h-9 text-sm" : "h-12 text-base", l && "cursor-not-allowed text-delta-300", d && "pointer-events-none"),
-        children: [
-          /* @__PURE__ */ o("span", {
-            className: a("min-w-0 flex-1 truncate", !i && "text-delta-500"),
-            children: i || f ? Y : m
-          }),
-          /* @__PURE__ */ c("span", {
-            className: "flex items-center gap-1",
-            children: [P && i && !l && /* @__PURE__ */ o("span", {
-              role: "button",
-              "data-testid": `${x}-clear`,
-              className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
-              onClick: (e) => {
-                e.stopPropagation(), k("", null);
-              },
-              children: /* @__PURE__ */ o(se, {
-                width: 18,
-                height: 18
-              })
-            }), /* @__PURE__ */ o(re, {
-              width: 24,
-              height: 24,
-              className: a("transition-transform", s && "rotate-180")
-            })]
-          }),
-          /* @__PURE__ */ o("div", { className: ne({
-            focused: s,
-            error: y,
-            disabled: l,
-            readOnly: d
-          }) })
-        ]
-      }),
-      s && /* @__PURE__ */ o(me, { children: /* @__PURE__ */ o("ul", {
-        ref: Q,
-        role: "listbox",
-        "aria-label": h,
-        style: W,
-        ...J(),
-        onKeyDown: Z,
-        className: a("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", M?.className),
-        children: T
-      }) }),
-      y && /* @__PURE__ */ c(ae, {
-        className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
-        children: [/* @__PURE__ */ o(le, {
-          width: 20,
-          height: 20
-        }), j ?? "Required"]
-      })
-    ]
-  });
-};
+    children: /* @__PURE__ */ o(m, {
+      width: 18,
+      height: 18
+    })
+  }) : null,
+  sx: {
+    ".MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-delta-500) !important" },
+    "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
+    "&.MuiFormLabel-root-MuiInputLabel-root .Mui-error": { color: "var(--colors-error-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: "var(--colors-gama-400) !important" },
+    "&:hover .MuiOutlinedInput-notchedOutline": { border: "2px solid var(--colors-gama-300) !important" },
+    ...r.sx
+  }
+}), e && /* @__PURE__ */ t(c, {
+  className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
+  children: [/* @__PURE__ */ o(d, {
+    width: 20,
+    height: 20
+  }), n ?? "Required"]
+})] });
 export {
-  Ve as StyledSelect
+  I as StyledSelect
 };

package/dist/components/inputs/select/StyledSelectItem.js

@@ -1,25 +1,29 @@
-import { cn as n } from "../../../helpers/cn.js";
-import { CheckIcon as l } from "../../icons/check-icon/CheckIcon.js";
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-var x = ({ children: r, selected: e, disabled: t, className: o, onClick: i }) => /* @__PURE__ */ m("li", {
-  role: "option",
-  "aria-selected": e ? !0 : void 0,
-  "aria-disabled": t ? !0 : void 0,
-  tabIndex: -1,
-  onClick: t ? void 0 : i,
-  className: n("flex items-center gap-1 px-2 py-2.5 text-sm outline-none", t ? "cursor-not-allowed text-delta-300" : "cursor-pointer hover:bg-delta-50", e && "bg-gama-50", o),
-  children: [/* @__PURE__ */ a("span", {
-    className: "flex w-6 justify-center",
-    children: e && /* @__PURE__ */ a(l, {
+import { CheckIcon as t } from "../../icons/check-icon/CheckIcon.js";
+import { MenuItem as o } from "@mui/material";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+var s = (e) => /* @__PURE__ */ n(o, {
+  ...e,
+  sx: {
+    "&.MuiMenuItem-root": {
+      fontSize: "var(--font-size-body-base) !important",
+      gap: "4px",
+      px: 1
+    },
+    "&.Mui-selected": { backgroundColor: "var(--colors-gama-50) !important" }
+  },
+  children: [/* @__PURE__ */ r("span", {
+    style: {
+      width: "24px",
+      justifyContent: "center",
+      display: "flex"
+    },
+    children: e.selected && /* @__PURE__ */ r(t, {
       width: 22,
       height: 22,
-      className: "text-gama-500"
+      style: { color: "var(--colors-gama-500)" }
     })
-  }), /* @__PURE__ */ a("span", {
-    className: "min-w-0 flex-1 truncate",
-    children: r
-  })]
+  }), /* @__PURE__ */ r("span", { children: e.children })]
 });
 export {
-  x as StyledSelectItem
+  s as StyledSelectItem
 };