asma-ui-core 3.73.0 → 3.74.0

package/dist/helpers/useHelperSlot.js

@@ -0,0 +1,12 @@
+import { useHelperAlertRole as u } from "./useHelperAlertRole.js";
+import { warnMissingErrorMessage as s } from "./warnMissingErrorMessage.js";
+function f(r, e, o, t, l) {
+  const n = l !== !0 && (t === !0 || o != null || !!e);
+  return s(r, e, o), {
+    show: n,
+    role: u(e)
+  };
+}
+export {
+  f as useHelperSlot
+};

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

@@ -51,7 +51,7 @@ 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 (2px)**, **error error-500 #e10700**, **disabled delta-300**.
+ * (2px)**, **focus gama-400 #1ca1a1 (3px)**, **error error-500 #e10700**, **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/helpers/HelperRow.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface HelperRowProps {
+    id: string;
+    role: 'alert' | 'status';
+    error?: boolean;
+    message?: ReactNode;
+    hideErrorIcon?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Shared helper-text row rendered beneath input components (Figma "Helper text" row,
+ * 24 px min-height, pt 4 px, gap 4 px). Renders error icon + message text with proper
+ * ARIA role. Consumers add layout tweaks (margin, alignment) via `className`.
+ */
+export declare const HelperRow: import('react').ForwardRefExoticComponent<HelperRowProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/helpers/useHelperSlot.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface UseHelperSlotResult {
+    show: boolean;
+    role: 'alert' | 'status';
+}
+/**
+ * Shared logic for the helper-text row beneath input components.
+ * Returns `show` (whether the slot should render) and `role` (ARIA live-region role).
+ * Emits a dev-mode warning when `error` is set but `message` is empty.
+ */
+export declare function useHelperSlot(component: string, error: boolean | undefined, message: ReactNode, reserveHelperText?: boolean, readOnly?: boolean): UseHelperSlotResult;

package/package.json

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

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

@@ -14,7 +14,7 @@
     --colors-input-active-focus-text-color: var(--colors-delta-800);
     --colors-input-active-disabled-text-color: var(--colors-delta-300);
     /* Figma Input field (node 15561-37391): enabled border delta-500 #7a899e; hover border/hover
-       gama-300 #60bdbd (2px); focus border/focus gama-400 #1ca1a1 (2px); disabled delta-300. */
+       gama-300 #60bdbd (2px); focus border/focus gama-400 #1ca1a1 (3px); disabled delta-300. */
     --colors-input-active-outline-color: var(--colors-delta-500);
     --colors-input-active-hover-outline-color: var(--colors-gama-300);
     --colors-input-active-active-outline-color: var(--colors-gama-400);
@@ -27,8 +27,8 @@
     --input-active-disabled-cursor: default;
     --input-active-outline-width: 1px;
     --input-active-hover-outline-width: 2px;
-    --input-active-active-outline-width: 2px;
-    --input-active-focus-outline-width: 2px;
+    --input-active-active-outline-width: 3px;
+    --input-active-focus-outline-width: 3px;
     --input-active-disabled-outline-width: 1px;
     /* Input Error */
     --colors-input-error-placeholder-color: var(--colors-error-500);
@@ -55,7 +55,7 @@
     --input-error-outline-width: 1px;
     --input-error-hover-outline-width: 1px;
     --input-error-active-outline-width: 1px;
-    --input-error-focus-outline-width: 2px;
+    --input-error-focus-outline-width: 1px;
     --input-error-disabled-outline-width: 1px;
     /* input notEditable */
     --colors-input-notEditable-placeholder-color: var(--colors-delta-800);