asma-ui-core 3.108.4 → 3.110.0

package/dist/components/inputs/dynamic-select/components/DynamicSelectAutocomplete.js

@@ -1,117 +1,121 @@
 import { cn as q } from "../../../../helpers/cn.js";
-import { StyledTooltip as z } from "../../../data-display/tooltip/StyledTooltip.js";
-import { LoadingIcon as te } from "../../../icons/loading-icon/LoadingIcon.js";
-import { CheckIcon as le } from "../../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as ae } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as E } from "../../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as re } from "../../checkbox/base-ui/StyledCheckbox.js";
-import { StyledInputField as oe } from "../../input-field/StyledInputField.js";
-import { StyledSelectAutocomplete as ie } from "../../select-autocomplete/StyledSelectAutocomplete.js";
-import { DynamicInteractiveChipGroup as ne } from "./DynamicInteractiveChipGroup.js";
-import { createElement as F, forwardRef as se, useCallback as h, useState as de } from "react";
-import { Fragment as K, jsx as l, jsxs as T } from "react/jsx-runtime";
-var Ce = se((O, H) => {
-  const [_, S] = de(!1), { options: k, dataTest: f, value: g, readOnly: u, multiple: o, required: R, onChange: x, size: W, rowSize: y = "compact", title: v, noOptionsText: G, placeholder: J, disabled: I, helperText: M, disableHelperText: N, error: A, valueKey: P = "value", labelKey: Q = "label", renderLabel: s, getOptionTooltip: V, startAdornment: U, autocompleteProps: i, loading: m, maxTags: X, onFocus: Y, onBlur: Z } = O, d = (e) => typeof e == "object" ? e?.[Q]?.toString() ?? "" : e?.toString() ?? "", b = h((e) => typeof e == "object" ? e?.[P] : e, [P]), $ = h((e, t) => b(e) === b(t), [b]), w = (e) => {
-    const t = b(e);
+import { StyledTooltip as E } from "../../../data-display/tooltip/StyledTooltip.js";
+import { LoadingIcon as re } from "../../../icons/loading-icon/LoadingIcon.js";
+import { CheckIcon as ae } from "../../../icons/check-icon/CheckIcon.js";
+import { PlusIconCircle as ie } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
+import { StyledChip as F } from "../../../data-display/chip/StyledChip.js";
+import { StyledCheckbox as oe } from "../../checkbox/base-ui/StyledCheckbox.js";
+import { fieldWidthStyle as ne } from "../../field-styles.js";
+import { StyledInputField as se } from "../../input-field/StyledInputField.js";
+import { StyledSelectAutocomplete as de } from "../../select-autocomplete/StyledSelectAutocomplete.js";
+import { DynamicSelectTitle as ce } from "./DynamicSelectTitle.js";
+import { DynamicInteractiveChipGroup as ue } from "./DynamicInteractiveChipGroup.js";
+import { createElement as K, forwardRef as me, useCallback as h, useState as pe } from "react";
+import { Fragment as H, jsx as l, jsxs as T } from "react/jsx-runtime";
+var Ne = me((C, W) => {
+  const [_, O] = pe(!1), { options: S, dataTest: f, value: g, readOnly: u, multiple: i, required: R, onChange: x, size: G, rowSize: y = "compact", title: k, titleSize: J, width: I = "full", noOptionsText: M, placeholder: Q, disabled: N, helperText: U, disableHelperText: A, error: P, valueKey: V = "value", labelKey: X = "label", renderLabel: s, getOptionTooltip: $, startAdornment: Y, autocompleteProps: o, loading: m, maxTags: Z, onFocus: ee, onBlur: te } = C, d = (e) => typeof e == "object" ? e?.[X]?.toString() ?? "" : e?.toString() ?? "", p = h((e) => typeof e == "object" ? e?.[V] : e, [V]), B = h((e, t) => p(e) === p(t), [p]), v = (e) => {
+    const t = p(e);
     return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : d(e);
-  }, B = h((e) => {
-    S(!0), i?.onOpen?.(e);
-  }, [i]), ee = h((e, t) => {
-    S(!1), i?.onClose?.(e, t);
-  }, [i]);
-  if (o && u) return /* @__PURE__ */ l(ne, { ...O });
-  const C = v ? `${f}-title` : void 0;
+  }, D = h((e) => {
+    O(!0), o?.onOpen?.(e);
+  }, [o]), le = h((e, t) => {
+    O(!1), o?.onClose?.(e, t);
+  }, [o]);
+  if (i && u) return /* @__PURE__ */ l(ue, { ...C });
+  const w = k ? `${f}-title` : void 0;
   return /* @__PURE__ */ T("div", {
-    className: "flex w-full flex-col gap-y-1",
-    children: [v && /* @__PURE__ */ l("span", {
-      id: C,
-      className: "text-base font-semibold text-delta-800",
-      children: v
-    }), /* @__PURE__ */ l(ie, {
+    className: "flex flex-col gap-y-1",
+    "data-field-width": I,
+    style: ne(I),
+    children: [/* @__PURE__ */ l(ce, {
+      id: w,
+      title: k,
+      titleSize: J
+    }), /* @__PURE__ */ l(de, {
       open: _,
-      onOpen: B,
-      onClose: ee,
-      disableCloseOnSelect: o,
+      onOpen: D,
+      onClose: le,
+      disableCloseOnSelect: i,
       dataTest: f,
-      disabled: !!I || !!m,
-      noOptionsText: G,
+      disabled: !!N || !!m,
+      noOptionsText: M,
       loading: m,
       readOnly: u,
       value: g,
-      size: W,
+      size: G,
       rowSize: y,
       disableClearable: R,
-      options: k,
+      options: S,
       fullWidth: !0,
       classes: { listbox: "max-h-[300px]" },
-      getOptionLabel: i?.getOptionLabel ?? d,
+      getOptionLabel: o?.getOptionLabel ?? d,
       onChange: (e, t) => {
         x(t);
       },
       filterSelectedOptions: !1,
-      isOptionEqualToValue: i?.isOptionEqualToValue ?? $,
+      isOptionEqualToValue: o?.isOptionEqualToValue ?? B,
       autoHeight: !0,
-      multiple: o,
-      renderValue: o ? (e) => {
+      multiple: i,
+      renderValue: i ? (e) => {
         if (!Array.isArray(e)) return null;
-        const t = e, c = X ?? k.length, r = t.slice(0, c), n = t.length - c;
-        return [...r.map((a) => /* @__PURE__ */ l(E, {
-          dataTest: `${w(a)}-chip`,
+        const t = e, c = Z ?? S.length, a = t.slice(0, c), n = t.length - c;
+        return [...a.map((r) => /* @__PURE__ */ l(F, {
+          dataTest: `${v(r)}-chip`,
           readOnly: u,
           variant: "outlined",
-          label: s ? s(a) : d(a),
+          label: s ? s(r) : d(r),
           classes: {
             root: "h-fit w-fit min-h-[32px]",
             label: "block whitespace-normal"
           },
-          disabled: !!I || !!m,
+          disabled: !!N || !!m,
           deleteButtonTabIndex: -1,
           onDelete: () => {
-            Array.isArray(g) && x(g.filter((p) => !$(p, a)));
+            Array.isArray(g) && x(g.filter((b) => !B(b, r)));
           }
-        }, w(a))), n > 0 ? /* @__PURE__ */ l(E, {
+        }, v(r))), n > 0 ? /* @__PURE__ */ l(F, {
           dataTest: "remaining-count-tag-chip",
           label: `+${n}`,
           variant: "outlined",
           tabIndex: -1,
-          onClick: B
+          onClick: D
         }, "remaining-count") : null];
       } : void 0,
-      popupIcon: m ? /* @__PURE__ */ l(te, {
+      popupIcon: m ? /* @__PURE__ */ l(re, {
         height: 24,
         width: 24
-      }) : o ? /* @__PURE__ */ l(ae, {
+      }) : i ? /* @__PURE__ */ l(ie, {
         height: 24,
         width: 24
       }) : void 0,
       renderOption: (e, t, c) => {
-        const r = typeof t == "object" ? !!t?.disabled : !1, n = V ? V(t) : null, a = r && n ? `${e.id}-reason` : void 0, p = a && e["data-active"] !== void 0 ? !0 : void 0, j = a && /* @__PURE__ */ l("span", {
-          id: a,
+        const a = typeof t == "object" ? !!t?.disabled : !1, n = $ ? $(t) : null, r = a && n ? `${e.id}-reason` : void 0, b = r && e["data-active"] !== void 0 ? !0 : void 0, j = r && /* @__PURE__ */ l("span", {
+          id: r,
           className: "sr-only",
           "aria-hidden": "true",
           children: n
         });
-        if (o) {
+        if (i) {
           const L = c.selected;
-          return /* @__PURE__ */ F("li", {
+          return /* @__PURE__ */ K("li", {
             ...e,
             role: "option",
             "aria-selected": L,
             key: e.id,
-            onClick: r ? void 0 : e.onClick,
-            className: q("relative box-border flex cursor-pointer items-center gap-x-1 bg-white px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", r && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
-            "aria-disabled": r,
-            "aria-describedby": a
+            onClick: a ? void 0 : e.onClick,
+            className: q("relative box-border flex cursor-pointer items-center gap-x-1 bg-white px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+            "aria-disabled": a,
+            "aria-describedby": r
           }, j, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
             "aria-hidden": "true",
             className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
-          }), /* @__PURE__ */ l(z, {
+          }), /* @__PURE__ */ l(E, {
             arrow: !0,
             title: n,
-            open: p,
-            children: /* @__PURE__ */ T(K, { children: [/* @__PURE__ */ l(re, {
-              disabled: r,
-              dataTest: `${w(t)}-checkbox`,
+            open: b,
+            children: /* @__PURE__ */ T(H, { children: [/* @__PURE__ */ l(oe, {
+              disabled: a,
+              dataTest: `${v(t)}-checkbox`,
               size: "small",
               decorative: !0,
               hideWrapper: !0,
@@ -123,26 +127,26 @@ var Ce = se((O, H) => {
             })] })
           }));
         }
-        const D = c.selected;
-        return /* @__PURE__ */ F("li", {
+        const z = c.selected;
+        return /* @__PURE__ */ K("li", {
           ...e,
           role: "option",
-          "aria-selected": D,
+          "aria-selected": z,
           key: e.id,
-          className: q("relative box-border flex cursor-pointer items-center gap-x-1 px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", r && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
-          onClick: r ? void 0 : e.onClick,
-          "aria-disabled": r,
-          "aria-describedby": a
+          className: q("relative box-border flex cursor-pointer items-center gap-x-1 px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+          onClick: a ? void 0 : e.onClick,
+          "aria-disabled": a,
+          "aria-describedby": r
         }, j, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
-        }), /* @__PURE__ */ l(z, {
+        }), /* @__PURE__ */ l(E, {
           arrow: !0,
           title: n,
-          open: p,
-          children: /* @__PURE__ */ T(K, { children: [/* @__PURE__ */ l("span", {
+          open: b,
+          children: /* @__PURE__ */ T(H, { children: [/* @__PURE__ */ l("span", {
             className: "w-5 min-w-5",
-            children: D && /* @__PURE__ */ l(le, {
+            children: z && /* @__PURE__ */ l(ae, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
@@ -153,37 +157,37 @@ var Ce = se((O, H) => {
           })] })
         }));
       },
-      renderInput: (e) => /* @__PURE__ */ l(oe, {
+      renderInput: (e) => /* @__PURE__ */ l(se, {
         dataTest: `${f}-input-field`,
         ...e,
-        inputRef: H,
-        error: A,
-        helperText: N ? void 0 : M,
-        reserveHelperText: N ? !1 : A !== void 0,
+        inputRef: W,
+        error: P,
+        helperText: A ? void 0 : U,
+        reserveHelperText: A ? !1 : P !== void 0,
         variant: "outlined",
         label: "",
-        placeholder: J,
+        placeholder: Q,
         readOnly: u,
-        onFocus: Y,
-        onBlur: Z,
+        onFocus: ee,
+        onBlur: te,
         onKeyDown: e.onKeyDown,
         autoComplete: "off",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
-            startAdornment: U ?? e.slotProps?.input?.startAdornment
+            startAdornment: Y ?? e.slotProps?.input?.startAdornment
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
-            ...C ? { "aria-labelledby": C } : {}
+            ...w ? { "aria-labelledby": w } : {}
           }
         }
       }),
-      ...i
+      ...o
     })]
   });
 });
 export {
-  Ce as DynamicSelectAutocomplete
+  Ne as DynamicSelectAutocomplete
 };

package/dist/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.js

@@ -1,19 +1,23 @@
-import { jsx as d, jsxs as u } from "react/jsx-runtime";
-var m = ({ dataTest: a, options: c, value: t, title: n, valueKey: i = "value", labelKey: o = "label", renderLabel: r }) => {
-  const s = (e) => typeof e == "object" ? e?.[i] : e, f = (e) => typeof e == "object" ? e?.[o]?.toString() ?? "" : e?.toString() ?? "", l = t == null ? null : c.find((e) => s(e) === s(t)) ?? t;
-  return /* @__PURE__ */ u("div", {
-    "data-testid": `${a}-read-only`,
+import { fieldWidthStyle as y } from "../../field-styles.js";
+import { DynamicSelectTitle as x } from "./DynamicSelectTitle.js";
+import { jsx as d, jsxs as g } from "react/jsx-runtime";
+var j = ({ dataTest: r, options: c, value: t, title: o, titleSize: s, width: a = "full", valueKey: f = "value", labelKey: m = "label", renderLabel: i }) => {
+  const n = (e) => typeof e == "object" ? e?.[f] : e, u = (e) => typeof e == "object" ? e?.[m]?.toString() ?? "" : e?.toString() ?? "", l = t == null ? null : c.find((e) => n(e) === n(t)) ?? t;
+  return /* @__PURE__ */ g("div", {
+    "data-testid": `${r}-read-only`,
     className: "flex flex-col gap-y-1",
-    children: [n && /* @__PURE__ */ d("span", {
-      className: "text-base font-semibold text-delta-800",
-      children: n
+    "data-field-width": a,
+    style: y(a),
+    children: [/* @__PURE__ */ d(x, {
+      title: o,
+      titleSize: s
     }), /* @__PURE__ */ d("div", {
-      "data-testid": `${a}-read-only-value`,
+      "data-testid": `${r}-read-only-value`,
       className: "text-base/6 text-delta-700",
-      children: l === null ? "-" : r ? r(l) : f(l)
+      children: l === null ? "-" : i ? i(l) : u(l)
     })]
   });
 };
 export {
-  m as DynamicSelectReadOnlyValue
+  j as DynamicSelectReadOnlyValue
 };

package/dist/components/inputs/dynamic-select/components/DynamicSelectTitle.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+var r = ({ title: e, titleSize: l = "base", id: a }) => e == null || e === !1 || e === "" ? null : /* @__PURE__ */ t("span", {
+  id: a,
+  className: l === "lg" ? "text-lg/7 font-semibold text-delta-800" : "text-base font-semibold text-delta-800",
+  children: e
+});
+export {
+  r as DynamicSelectTitle
+};

package/dist/components/inputs/field-styles.js

@@ -1,4 +1,4 @@
-import { cn as n } from "../../helpers/cn.js";
+import { cn as i } from "../../helpers/cn.js";
 var d = () => ({
   boxSizing: "border-box",
   height: 40,
@@ -22,13 +22,23 @@ var d = () => ({
 } : {
   top: "50%",
   transform: "translateY(-50%)"
-}, x = ({ focused: e, error: r, disabled: t, readOnly: o, borderless: a }) => n("pointer-events-none absolute inset-0 rounded border border-solid transition-colors", a && !e ? "border-transparent" : t ? "border-delta-300" : o ? "border-delta-200" : r ? "border-error-500" : e ? "border-focus-ring shadow-[inset_0_0_0_2px_var(--colors-focus-ring)]" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), b = ({ focused: e, error: r, disabled: t, readOnly: o, notched: a = !0 }) => n("pointer-events-none absolute z-0 m-0 box-border min-w-0 overflow-hidden rounded border border-solid transition-colors", a ? "inset-x-0 bottom-0 top-[-5px] px-2 py-0" : "inset-0", t ? "border-delta-300" : o ? "border-delta-200" : r ? "border-error-500" : e ? "border-focus-ring shadow-[inset_0_0_0_2px_var(--colors-focus-ring)]" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), g = (e) => n("block h-[11px] overflow-hidden bg-white p-0 text-xs leading-[23px] text-transparent transition-[max-width] duration-150", e ? "max-w-full" : "max-w-[0.01px]"), p = ({ shrink: e, focused: r, error: t, disabled: o, readOnly: a }) => n("pointer-events-none absolute left-[14px] z-10 max-w-[calc(100%-1.75rem)] truncate transition-colors duration-150", o ? "text-delta-300" : a ? "text-delta-800" : t ? "text-error-500" : r ? "text-gama-500" : e ? "text-delta-800" : "text-delta-500", e ? "bg-white px-1 text-xs leading-[16px] tracking-[0.24px]" : "text-base leading-[23px] tracking-[0.00938em]");
+}, b = (e) => ({
+  width: "100%",
+  maxWidth: `var(--field-width-${e})`
+}), x = {
+  "--field-width-full": "100%",
+  "--form-column-width": "100%"
+}, g = (e) => e <= 9 ? "xs" : e <= 15 ? "s" : e <= 27 ? "m" : "full", p = ({ disabled: e } = {}) => i("block pb-1 text-base font-semibold", e ? "text-delta-300" : "text-delta-800"), u = ({ focused: e, error: r, disabled: t, readOnly: o, borderless: a }) => i("pointer-events-none absolute inset-0 rounded border border-solid transition-colors", a && !e ? "border-transparent" : t ? "border-delta-300" : o ? "border-delta-200" : r ? "border-error-500" : e ? "border-focus-ring shadow-[inset_0_0_0_2px_var(--colors-focus-ring)]" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), h = ({ focused: e, error: r, disabled: t, readOnly: o, notched: a = !0 }) => i("pointer-events-none absolute z-0 m-0 box-border min-w-0 overflow-hidden rounded border border-solid transition-colors", a ? "inset-x-0 bottom-0 top-[-5px] px-2 py-0" : "inset-0", t ? "border-delta-300" : o ? "border-delta-200" : r ? "border-error-500" : e ? "border-focus-ring shadow-[inset_0_0_0_2px_var(--colors-focus-ring)]" : "border-delta-500 group-hover:border-2 group-hover:border-gama-300"), f = (e) => i("block h-[11px] overflow-hidden bg-white p-0 text-xs leading-[23px] text-transparent transition-[max-width] duration-150", e ? "max-w-full" : "max-w-[0.01px]"), m = ({ shrink: e, focused: r, error: t, disabled: o, readOnly: a }) => i("pointer-events-none absolute left-[14px] z-10 max-w-[calc(100%-1.75rem)] truncate transition-colors duration-150", o ? "text-delta-300" : a ? "text-delta-800" : t ? "text-error-500" : r ? "text-gama-500" : e ? "text-delta-800" : "text-delta-500", e ? "bg-white px-1 text-xs leading-[16px] tracking-[0.24px]" : "text-base leading-[23px] tracking-[0.00938em]");
 export {
-  p as floatingLabelClass,
+  p as fieldLabelAboveClass,
+  g as fieldWidthForMaxLength,
+  b as fieldWidthStyle,
+  m as floatingLabelClass,
   s as floatingLabelLayoutStyle,
-  g as notchedLegendClass,
-  b as notchedOutlineClass,
-  x as outlineClass,
+  x as fullScreenFieldWidthVars,
+  f as notchedLegendClass,
+  h as notchedOutlineClass,
+  u as outlineClass,
   l as singleLineInputLayoutStyle,
   d as singleLineShellLayoutStyle
 };

package/dist/components/inputs/form-layout/StyledFieldPair.js

@@ -0,0 +1,22 @@
+import { cn as r } from "../../../helpers/cn.js";
+import { fieldLabelAboveClass as s } from "../field-styles.js";
+import e from "./StyledFieldPair.module.js";
+import { jsx as l, jsxs as o } from "react/jsx-runtime";
+var p = ({ children: i, legend: d, className: t, dataTest: a }) => d == null ? /* @__PURE__ */ l("div", {
+  "data-testid": a,
+  className: r(e.row, t),
+  children: i
+}) : /* @__PURE__ */ o("fieldset", {
+  "data-testid": a,
+  className: r(e.fieldset, t),
+  children: [/* @__PURE__ */ l("legend", {
+    className: r(e.legend, s()),
+    children: d
+  }), /* @__PURE__ */ l("div", {
+    className: e.row,
+    children: i
+  })]
+});
+export {
+  p as StyledFieldPair
+};

package/dist/components/inputs/form-layout/StyledFieldPair.module.js

@@ -0,0 +1,8 @@
+var e = "_fieldset_17n6s_1", _ = "_legend_17n6s_8", d = "_row_17n6s_12", l = {
+  fieldset: e,
+  legend: _,
+  row: d
+};
+export {
+  l as default
+};

package/dist/components/inputs/form-layout/StyledFormColumn.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+var i = ({ children: t, className: d, dataTest: m }) => /* @__PURE__ */ o("div", {
+  "data-testid": m,
+  className: d,
+  style: {
+    width: "100%",
+    maxWidth: "var(--form-column-width)"
+  },
+  children: t
+});
+export {
+  i as StyledFormColumn
+};