asma-ui-core 3.114.0 → 3.115.0

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

@@ -1,10 +1,10 @@
-import { cn as i } from "../../helpers/cn.js";
-var d = () => ({
+import { cn as t } from "../../helpers/cn.js";
+var l = () => ({
   boxSizing: "border-box",
   height: 40,
   minHeight: 40,
   maxHeight: 40
-}), l = ({ paddingLeft: e = 14, paddingRight: r = 14 } = {}) => ({
+}), s = ({ paddingLeft: e = 14, paddingRight: r = 14 } = {}) => ({
   boxSizing: "border-box",
   margin: 0,
   paddingTop: 0,
@@ -16,29 +16,29 @@ var d = () => ({
   maxHeight: 40,
   lineHeight: "24px",
   fontSize: 16
-}), s = (e) => e ? {
+}), b = (e) => e ? {
   top: 0,
   transform: "translateY(-50%)"
 } : {
   top: "50%",
   transform: "translateY(-50%)"
-}, b = (e) => ({
+}, x = (e) => ({
   width: "100%",
   maxWidth: `var(--field-width-${e})`
-}), x = {
+}), p = {
   "--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]");
+}, g = (e) => e <= 9 ? "xs" : e <= 15 ? "s" : e <= 27 ? "m" : "full", h = ({ disabled: e } = {}) => t("block pb-1 text-base font-semibold", e ? "text-delta-300" : "text-delta-800"), n = "shadow-[inset_0_0_0_2px_var(--colors-error-500)]", u = ({ focused: e, error: r, disabled: o, readOnly: a, borderless: i }) => t("pointer-events-none absolute inset-0 rounded border border-solid transition-colors", i && !e ? "border-transparent" : o ? "border-delta-300" : a ? "border-delta-200" : r ? t("border-error-500", e && n) : 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"), v = ({ focused: e, error: r, disabled: o, readOnly: a, notched: i = !0 }) => t("pointer-events-none absolute z-0 m-0 box-border min-w-0 overflow-hidden rounded border border-solid transition-colors", i ? "inset-x-0 bottom-0 top-[-5px] px-2 py-0" : "inset-0", o ? "border-delta-300" : a ? "border-delta-200" : r ? t("border-error-500", e && n) : 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"), m = (e) => t("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]"), f = ({ shrink: e, focused: r, error: o, disabled: a, readOnly: i }) => t("pointer-events-none absolute left-[14px] z-10 max-w-[calc(100%-1.75rem)] truncate transition-colors duration-150", a ? "text-delta-300" : i ? "text-delta-800" : o ? "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 fieldLabelAboveClass,
+  h as fieldLabelAboveClass,
   g as fieldWidthForMaxLength,
-  b as fieldWidthStyle,
-  m as floatingLabelClass,
-  s as floatingLabelLayoutStyle,
-  x as fullScreenFieldWidthVars,
-  f as notchedLegendClass,
-  h as notchedOutlineClass,
+  x as fieldWidthStyle,
+  f as floatingLabelClass,
+  b as floatingLabelLayoutStyle,
+  p as fullScreenFieldWidthVars,
+  m as notchedLegendClass,
+  v as notchedOutlineClass,
   u as outlineClass,
-  l as singleLineInputLayoutStyle,
-  d as singleLineShellLayoutStyle
+  s as singleLineInputLayoutStyle,
+  l as singleLineShellLayoutStyle
 };

package/dist/components/inputs/textarea/StyledTextarea.module.js

@@ -1,11 +1,11 @@
-var a = "_textarea_lhzo8_1", e = "_active_lhzo8_1", _ = "_error_lhzo8_41", r = "_label_lhzo8_82", l = "_disabled_lhzo8_90", t = "_description_lhzo8_95", o = {
-  textarea: a,
-  active: e,
-  error: _,
-  label: r,
-  disabled: l,
-  description: t
+var e = "_textarea_1sre0_1", r = "_active_1sre0_1", a = "_error_1sre0_43", _ = "_label_1sre0_86", t = "_disabled_1sre0_94", s = "_description_1sre0_99", d = {
+  textarea: e,
+  active: r,
+  error: a,
+  label: _,
+  disabled: t,
+  description: s
 };
 export {
-  o as default
+  d as default
 };

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

@@ -1,119 +1,120 @@
-import { cn as g } from "../../../helpers/cn.js";
-import { isOverlayBackEnabled as M, useBackCloses as A } from "../../../hooks/useBackCloses.hook.js";
-import { useIsMobileView as q } from "../../hooks/useWindowWidthSize.hook.js";
-import { StyledDrawer as F } from "../../../components/navigation/drawer/StyledDrawer.js";
-import { useBackNavigationClose as K } from "../../hooks/useBackNavigationClose.hook.js";
-import { usePopupState as W } from "../../../hooks/usePopupState.js";
-import { ClickAwayListener as z } from "../../../components/mui-compat/ClickAwayListener.js";
-import { isBeforeMinTime as w } from "./helpers/minTime.js";
-import { TimePickerPanel as G } from "./components/TimePickerPanel.js";
-import { TimePickerPopper as J } from "./TimePickerPopper.js";
-import { getTimeFromValue as B } from "./helpers/getTimeFromValue.js";
-import { timePickerWidthProps as O } from "./helpers/timePickerWidth.js";
-import { TimePickerInput as Q } from "./TimePickerInput.js";
-import { useEffect as R, useState as E } from "react";
-import { jsx as r, jsxs as D } from "react/jsx-runtime";
-import { format as V, isBefore as U, isValid as X } from "date-fns";
-var fe = (o) => {
-  const { value: l, onSelect: n, notBeforeTime: d, minTime: c } = o, t = W({
+import { cn as D } from "../../../helpers/cn.js";
+import { isOverlayBackEnabled as q, useBackCloses as F } from "../../../hooks/useBackCloses.hook.js";
+import { useIsMobileView as K } from "../../hooks/useWindowWidthSize.hook.js";
+import { StyledDrawer as W } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useBackNavigationClose as z } from "../../hooks/useBackNavigationClose.hook.js";
+import { usePopupState as G } from "../../../hooks/usePopupState.js";
+import { ClickAwayListener as J } from "../../../components/mui-compat/ClickAwayListener.js";
+import { isBeforeMinTime as E } from "./helpers/minTime.js";
+import { TimePickerPanel as Q } from "./components/TimePickerPanel.js";
+import { TimePickerPopper as R } from "./TimePickerPopper.js";
+import { getTimeFromValue as C } from "./helpers/getTimeFromValue.js";
+import { timePickerWidthProps as H } from "./helpers/timePickerWidth.js";
+import { TimePickerInput as U } from "./TimePickerInput.js";
+import { useEffect as X, useState as P } from "react";
+import { jsx as i, jsxs as L } from "react/jsx-runtime";
+import { format as V, isBefore as Y, isValid as Z } from "date-fns";
+var de = (r) => {
+  const { value: a, onSelect: n, notBeforeTime: v, minTime: c } = r, t = G({
     variant: "popper",
     popupId: "time-picker-popper"
-  }), m = q();
-  A({
+  }), m = K();
+  F({
     active: t.isOpen,
     requestClose: t.close
-  }), K({
-    open: m && t.isOpen && !M(),
+  }), z({
+    open: m && t.isOpen && !q(),
     onClose: t.close
   });
-  const { isOpen: P, anchorEl: x, close: h } = t;
-  R(() => {
-    if (!P || m) return;
-    const e = (i) => {
-      x?.contains(document.activeElement) && (i.key === "Escape" ? (i.preventDefault(), i.stopPropagation(), h()) : i.key === "Tab" && h());
+  const { isOpen: b, anchorEl: S, close: w } = t;
+  X(() => {
+    if (!b || m) return;
+    const e = (o) => {
+      S?.contains(document.activeElement) && (o.key === "Escape" ? (o.preventDefault(), o.stopPropagation(), w()) : o.key === "Tab" && w());
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [
-    P,
-    x,
-    h,
+    b,
+    S,
+    w,
     m
   ]);
-  const C = l ? V(l, "HH:mm") : "", [H, u] = E(C), [b, a] = E(!1), [L, s] = E(!0), v = b ? H : C, k = (e) => !e || !d || !X(d) || !U(e, d), f = v.length === 5 ? B(v, l) : null, N = f ? k(f) : !0, I = (e) => {
-    const i = e.target.value;
-    if (a(!0), u(i), i.length !== 5) {
-      s(!1);
+  const T = a ? V(a, "HH:mm") : "", [k, u] = P(T), [x, s] = P(!1), [B, f] = P(!1), p = x ? k : T, d = (e) => !e || !v || !Z(v) || !Y(e, v), l = p.length === 5 ? C(p, a) : null, j = !B || p === "" || l !== null, I = !B || !l || d(l), g = (e) => {
+    if (e === "") return !0;
+    const o = C(e, a);
+    return o !== null && d(o);
+  }, M = (e) => {
+    const o = e.target.value;
+    if (s(!0), u(o), g(o) && f(!1), o.length !== 5) return;
+    const h = C(o, a);
+    if (!h) {
+      n(void 0);
       return;
     }
-    const p = B(i, l);
-    if (!p) {
-      n(void 0), s(!1);
+    E(h, c) || (d(h) ? (n(h), s(!1), t.close()) : n(void 0));
+  }, O = (e) => {
+    if (e && E(e, c)) return;
+    const o = d(e);
+    if (f(!o), o) {
+      n(e), u(e ? V(e, "HH:mm") : ""), s(!1);
       return;
     }
-    s(!0), !w(p, c) && (k(p) ? (n(p), a(!1), t.close()) : n(void 0));
-  }, T = (e) => {
-    if (!(e && w(e, c))) {
-      if (s(!0), k(e)) {
-        n(e), u(e ? V(e, "HH:mm") : ""), a(!1);
-        return;
-      }
-      n(void 0), u(e ? V(e, "HH:mm") : ""), a(!0);
-    }
-  }, j = () => {
-    b && f && w(f, c) && a(!1);
-  }, S = () => {
-    n(void 0), u(""), a(!1), s(!0);
-  }, y = /* @__PURE__ */ r(Q, {
-    ...o,
+    n(void 0), u(e ? V(e, "HH:mm") : ""), s(!0);
+  }, A = () => {
+    x && (l && E(l, c) ? s(!1) : k === "" ? n(void 0) : g(k) || f(!0));
+  }, N = () => {
+    n(void 0), u(""), s(!1), f(!1);
+  }, y = /* @__PURE__ */ i(U, {
+    ...r,
     popupState: t,
-    localValue: v,
-    isValidTime: L,
-    isValidEndTime: N,
-    handleChange: I,
-    handleBlur: j
+    localValue: p,
+    isValidTime: j,
+    isValidEndTime: I,
+    handleChange: M,
+    handleBlur: A
   });
-  return o.disabled || o.readOnly ? y : m ? /* @__PURE__ */ D("div", {
-    className: g("relative h-auto", typeof o.width == "number" && "w-auto"),
-    ...O(o.width),
-    children: [/* @__PURE__ */ r("div", {
+  return r.disabled || r.readOnly ? y : m ? /* @__PURE__ */ L("div", {
+    className: D("relative h-auto", typeof r.width == "number" && "w-auto"),
+    ...H(r.width),
+    children: [/* @__PURE__ */ i("div", {
       className: "m-0 flex h-fit items-center justify-center p-0",
       children: y
-    }), /* @__PURE__ */ r(F, {
+    }), /* @__PURE__ */ i(W, {
       anchor: "bottom",
       open: t.isOpen,
       onClose: t.close,
       anchorEl: t.anchorEl,
       registerBackClose: !1,
-      children: /* @__PURE__ */ r("div", {
+      children: /* @__PURE__ */ i("div", {
         className: "mx-auto w-full max-w-[360px] px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2",
-        children: /* @__PURE__ */ r(G, {
-          dataTest: o.dataTest,
-          value: l,
+        children: /* @__PURE__ */ i(Q, {
+          dataTest: r.dataTest,
+          value: a,
           minTime: c,
-          onSelect: T,
-          handleClear: S,
+          onSelect: O,
+          handleClear: N,
           onConfirm: t.close
         })
       })
     })]
-  }) : /* @__PURE__ */ r(z, {
+  }) : /* @__PURE__ */ i(J, {
     mouseEvent: "onMouseDown",
     onClickAway: t.close,
-    children: /* @__PURE__ */ D("div", {
-      className: g("relative h-auto", typeof o.width == "number" && "w-auto"),
-      ...O(o.width),
-      children: [/* @__PURE__ */ r("div", {
+    children: /* @__PURE__ */ L("div", {
+      className: D("relative h-auto", typeof r.width == "number" && "w-auto"),
+      ...H(r.width),
+      children: [/* @__PURE__ */ i("div", {
         className: "m-0 flex h-fit items-center justify-center p-0",
         children: y
-      }), t.isOpen && /* @__PURE__ */ r(J, {
-        ...o,
+      }), t.isOpen && /* @__PURE__ */ i(R, {
+        ...r,
         popupState: t,
-        handleClear: S,
-        onSelect: T
+        handleClear: N,
+        onSelect: O
       })]
     })
   });
 };
 export {
-  fe as StyledTimePicker
+  de as StyledTimePicker
 };

package/dist/src/components/inputs/field-styles.d.ts

@@ -46,9 +46,12 @@ interface FieldState {
     /** `variant="standard"`: same geometry as the outlined field, but the border is painted on focus only. */
     borderless?: boolean;
 }
-/** The border overlay (an absolutely-positioned sibling so width changes never reflow the input). */
+/**
+ * The border overlay (an absolutely-positioned sibling so width changes never reflow the input).
+ * States: resting 1px delta-500 · focused 3px focus-ring · error 1px error-500 · error + focused 3px error-500.
+ */
 export declare const outlineClass: ({ focused, error, disabled, readOnly, borderless }: FieldState) => string;
-/** MUI-compatible fieldset outline used by text fields with floating labels. */
+/** MUI-compatible fieldset outline used by text fields with floating labels. Same states as `outlineClass`. */
 export declare const notchedOutlineClass: ({ focused, error, disabled, readOnly, notched, }: FieldState & {
     notched?: boolean;
 }) => string;

package/dist/src/components/inputs/field-styles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/inputs/select-autocomplete/StyledSelectAutocomplete.d.ts

@@ -43,7 +43,8 @@ type AutocompleteValue<T, Multiple, DisableClearable, FreeSolo> = Multiple exten
 /**
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#20474-29075
  * Figma "Autocomplete". The trigger is the outlined **Input field** (shared `field-styles`: 40px,
- * border enabled delta-500/`#7a899e`, hover gama-300, focus gama-400 `#1ca1a1`, error error-500),
+ * border enabled delta-500/`#7a899e`, hover gama-300, focus 3px `color.focus.ring`, error error-500,
+ * error + focus 3px error-500),
  * so the field **State** (Enabled/Hovered/Focused/Error/Read-only) ← focus/open + `error`/`readOnly`/
  * `disabled`. **Filled** ← selected value(s): single fills the input text, multiple renders **Tag
  * chips** (`StyledChip`: h32, radius25, label 16/delta-700 — node 20475-29954). The dropdown is the

package/dist/src/components/inputs/textarea/StyledTextarea.d.ts

@@ -57,7 +57,8 @@ type StyledTextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & T
  * Figma has no standalone "Text area" component — a multiline text control inherits the **Input
  * field** outlined styling (shared with `StyledInputField`/`field-styles`): radius 4, field text
  * **Body Base 16/lh24 delta-800**; border **enabled delta-500 #7a899e**, **hover gama-300 #60bdbd
- * (2px)**, **focus gama-400 #1ca1a1 (3px)**, **error error-500 #e10700**, **disabled delta-300**.
+ * (2px)**, **focus 3px `color.focus.ring`**, **error error-500 #e10700**, **error + focus 3px
+ * error-500**, **disabled delta-300**.
  * Title = **Body Base SemiBold 16 delta-800**; description/helper = **Helper 14/lh20 delta-600**.
  * State (Enabled/Hover/Focus/Error/Disabled) ← native + `error`/`disabled`; the `not_editable`/
  * `view_only` variants are the read-only presentations. Colours live in the textarea-only

package/dist/src/datetime/components/time-picker/StyledTimePicker.d.ts

@@ -2,7 +2,8 @@ import { StyledTimePickerProps } from './types';
 /**
  * @figmaNode wXrXt5uKNNzV2DnQCgyYZH#15561-37391
  * Figma has no distinct time-picker-popover component — the trigger is the outlined **Input field**
- * (`field-styles`: 40px, border delta-500 / hover gama-300 / focus gama-400 / error error-500) with
+ * (`field-styles`: 40px, border delta-500 / hover gama-300 / focus 3px `color.focus.ring` / error
+ * error-500 / error + focus 3px error-500) with
  * a trailing **clock icon** (delta-700 like the select/search field icons; delta-300 when disabled).
  * The dropdown follows the **Menus** surface (delta-300 border + Menus shadow `0 2 4 rgba(34,33,51,
  * .15)`): scrollable hour/minute columns of 36px cells — hover delta-50, "now" gama-50 (like the

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.114.0",
+    "version": "3.115.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",

package/src/styles/components-colors/inputVariables.css

@@ -63,8 +63,9 @@
     --input-error-disabled-cursor: default;
     --input-error-outline-width: 1px;
     --input-error-hover-outline-width: 1px;
-    --input-error-active-outline-width: 1px;
-    --input-error-focus-outline-width: 1px;
+    /* Error like the input field (ASMA-8561): 1px at rest and on hover, 3px on press and focus. */
+    --input-error-active-outline-width: 3px;
+    --input-error-focus-outline-width: 3px;
     --input-error-disabled-outline-width: 1px;
     /* input notEditable */
     --colors-input-notEditable-placeholder-color: var(--colors-delta-800);