asma-ui-core 3.109.0 → 3.110.0

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

@@ -1,62 +1,65 @@
-import { cn as L } from "../../../../helpers/cn.js";
-import { StyledTooltip as q } from "../../../data-display/tooltip/StyledTooltip.js";
-import { LoadingIcon as le } from "../../../icons/loading-icon/LoadingIcon.js";
-import { CheckIcon as re } 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 { cn as q } from "../../../../helpers/cn.js";
+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 { StyledInputField as ie } from "../../input-field/StyledInputField.js";
-import { StyledSelectAutocomplete as ne } from "../../select-autocomplete/StyledSelectAutocomplete.js";
-import { DynamicSelectTitle as se } from "./DynamicSelectTitle.js";
-import { DynamicInteractiveChipGroup as de } from "./DynamicInteractiveChipGroup.js";
-import { createElement as F, forwardRef as ce, useCallback as h, useState as ue } from "react";
-import { Fragment as K, jsx as l, jsxs as T } from "react/jsx-runtime";
-var Se = ce((C, H) => {
-  const [_, O] = ue(!1), { options: S, dataTest: f, value: g, readOnly: u, multiple: o, required: R, onChange: x, size: W, rowSize: y = "compact", title: k, titleSize: G, noOptionsText: J, placeholder: M, disabled: I, helperText: Q, disableHelperText: N, error: A, valueKey: P = "value", labelKey: U = "label", renderLabel: s, getOptionTooltip: V, startAdornment: X, autocompleteProps: i, loading: m, maxTags: Y, onFocus: Z, onBlur: ee } = C, d = (e) => typeof e == "object" ? e?.[U]?.toString() ?? "" : e?.toString() ?? "", p = h((e) => typeof e == "object" ? e?.[P] : e, [P]), $ = h((e, t) => p(e) === p(t), [p]), v = (e) => {
+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) => {
-    O(!0), i?.onOpen?.(e);
-  }, [i]), te = h((e, t) => {
-    O(!1), i?.onClose?.(e, t);
-  }, [i]);
-  if (o && u) return /* @__PURE__ */ l(de, { ...C });
+  }, 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: [/* @__PURE__ */ l(se, {
+    className: "flex flex-col gap-y-1",
+    "data-field-width": I,
+    style: ne(I),
+    children: [/* @__PURE__ */ l(ce, {
       id: w,
       title: k,
-      titleSize: G
-    }), /* @__PURE__ */ l(ne, {
+      titleSize: J
+    }), /* @__PURE__ */ l(de, {
       open: _,
-      onOpen: B,
-      onClose: te,
-      disableCloseOnSelect: o,
+      onOpen: D,
+      onClose: le,
+      disableCloseOnSelect: i,
       dataTest: f,
-      disabled: !!I || !!m,
-      noOptionsText: J,
+      disabled: !!N || !!m,
+      noOptionsText: M,
       loading: m,
       readOnly: u,
       value: g,
-      size: W,
+      size: G,
       rowSize: y,
       disableClearable: R,
       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 = Y ?? S.length, a = t.slice(0, c), n = t.length - c;
-        return [...a.map((r) => /* @__PURE__ */ l(E, {
+        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",
@@ -65,85 +68,85 @@ var Se = ce((C, H) => {
             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((b) => !$(b, r)));
+            Array.isArray(g) && x(g.filter((b) => !B(b, r)));
           }
-        }, v(r))), 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(le, {
+      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 a = typeof t == "object" ? !!t?.disabled : !1, n = V ? V(t) : null, r = a && n ? `${e.id}-reason` : void 0, b = r && e["data-active"] !== void 0 ? !0 : void 0, D = r && /* @__PURE__ */ l("span", {
+        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) {
-          const z = c.selected;
-          return /* @__PURE__ */ F("li", {
+        if (i) {
+          const L = c.selected;
+          return /* @__PURE__ */ K("li", {
             ...e,
             role: "option",
-            "aria-selected": z,
+            "aria-selected": L,
             key: e.id,
             onClick: a ? void 0 : e.onClick,
-            className: L("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"),
+            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
-          }, D, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
+          }, 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(q, {
+          }), /* @__PURE__ */ l(E, {
             arrow: !0,
             title: n,
             open: b,
-            children: /* @__PURE__ */ T(K, { children: [/* @__PURE__ */ l(oe, {
+            children: /* @__PURE__ */ T(H, { children: [/* @__PURE__ */ l(oe, {
               disabled: a,
               dataTest: `${v(t)}-checkbox`,
               size: "small",
               decorative: !0,
               hideWrapper: !0,
               className: "min-w-[36px]",
-              checked: z
+              checked: L
             }), s ? s(t) : /* @__PURE__ */ l("span", {
               className: "line-clamp-2 h-fit min-w-0 flex-1 break-words text-base text-delta-800",
               children: d(t)
             })] })
           }));
         }
-        const j = c.selected;
-        return /* @__PURE__ */ F("li", {
+        const z = c.selected;
+        return /* @__PURE__ */ K("li", {
           ...e,
           role: "option",
-          "aria-selected": j,
+          "aria-selected": z,
           key: e.id,
-          className: L("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"),
+          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
-        }, D, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
+        }, 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(q, {
+        }), /* @__PURE__ */ l(E, {
           arrow: !0,
           title: n,
           open: b,
-          children: /* @__PURE__ */ T(K, { children: [/* @__PURE__ */ l("span", {
+          children: /* @__PURE__ */ T(H, { children: [/* @__PURE__ */ l("span", {
             className: "w-5 min-w-5",
-            children: j && /* @__PURE__ */ l(re, {
+            children: z && /* @__PURE__ */ l(ae, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
@@ -154,26 +157,26 @@ var Se = ce((C, H) => {
           })] })
         }));
       },
-      renderInput: (e) => /* @__PURE__ */ l(ie, {
+      renderInput: (e) => /* @__PURE__ */ l(se, {
         dataTest: `${f}-input-field`,
         ...e,
-        inputRef: H,
-        error: A,
-        helperText: N ? void 0 : Q,
-        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: M,
+        placeholder: Q,
         readOnly: u,
-        onFocus: Z,
-        onBlur: ee,
+        onFocus: ee,
+        onBlur: te,
         onKeyDown: e.onKeyDown,
         autoComplete: "off",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
-            startAdornment: X ?? e.slotProps?.input?.startAdornment
+            startAdornment: Y ?? e.slotProps?.input?.startAdornment
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
@@ -181,10 +184,10 @@ var Se = ce((C, H) => {
           }
         }
       }),
-      ...i
+      ...o
     })]
   });
 });
 export {
-  Se as DynamicSelectAutocomplete
+  Ne as DynamicSelectAutocomplete
 };

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

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

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
+};