@astryxdesign/core 0.2.0-canary.95f28a1 → 0.2.0-canary.c366298

package/dist/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"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"}

package/dist/TextArea/TextArea.js

@@ -15,27 +15,68 @@
  * - /apps/storybook/stories/TextArea.stories.tsx (storybook stories)
  * - /packages/cli/templates/blocks/components/TextArea/ (showcase blocks)
  */
-import { useId, useOptimistic, useTransition, useRef } from 'react';
+import { useId, useOptimistic, useTransition, useRef, useCallback } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
 import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
-import { renderIconSlot } from "../Icon/index.js";
+import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const COUNTER_WARNING_THRESHOLD = 0.8;
 const styles = {
   wrapper: {
     kY2c9j: "x1vjfegm",
-    kGNEyG: "x1cy8zhl",
+    k1xSpc: "x1lliihq",
+    kmVPX3: "x1717udv",
+    "--_textarea-inline-padding": "x1kdpo6e",
+    $$css: true
+  },
+  textarea: {
+    k1xSpc: "x1lliihq",
+    kzqmXN: "xh8yej3",
+    kB7OPa: "x9f619",
+    k7Eaqz: "xeuugli",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
     k8WAf4: "xu0wf1k",
+    kg3NbH: "x1w6f3ag",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xjm74w1 x6pjikd",
+    kLWn49: "xw6l6zx",
+    kMwMTN: "x1tgivj0",
+    kWkggS: "xjbqb8w",
+    kI3sdo: "x1a2a7pz",
+    k8Qsv1: "xeyghm5",
+    kHenm0: "x288g5",
+    $$css: true
+  },
+  textareaDisabled: {
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  },
+  textareaWithStartIcon: {
+    kZCmMZ: "x1b6te9z",
+    $$css: true
+  },
+  textareaWithStatus: {
+    kwRFfy: "xp2dy4z",
+    $$css: true
+  },
+  textareaWithBusyStatus: {
+    kwRFfy: "x1g2apga",
+    $$css: true
+  },
+  textareaWithCounter: {
+    kGO01o: "xekm6fs",
     $$css: true
   }
 };
@@ -94,12 +135,17 @@ export function TextArea({
   ...rest
 }) {
   const size = useSize(sizeProp, 'md');
+  const t = useTranslator();
+  const announce = useAnnounce();
   const id = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
   const counterID = useId();
   const textareaRef = useRef(null);
   const containerRef = useRef(null);
+  // Tracks the counter "zone" last announced (under / near / over) so we only
+  // announce on a zone change, not on every keystroke.
+  const counterZoneRef = useRef(null);
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
@@ -128,6 +174,30 @@ export function TextArea({
   // The tooltip variant renders no message box; describe the input by the
   // tooltip's content instead so the status is still announced.
   statusTooltipDescribedBy, maxLength != null ? counterID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
+
+  // Announce the character-count status through the shared live region, but
+  // only when the value crosses into a new zone (near the limit / over the
+  // limit) so we don't speak on every keystroke. Over-limit is assertive (an
+  // error the user should hear immediately); nearing the limit is polite.
+  const announceCounter = useCallback(length => {
+    if (maxLength == null) {
+      return;
+    }
+    const zone = length > maxLength ? 'over' : length >= maxLength * COUNTER_WARNING_THRESHOLD ? 'near' : 'under';
+    if (zone === counterZoneRef.current) {
+      return;
+    }
+    counterZoneRef.current = zone;
+    if (zone === 'over') {
+      announce(t('@astryx.textArea.charactersOverLimit', {
+        count: length - maxLength
+      }), 'assertive');
+    } else if (zone === 'near') {
+      announce(t('@astryx.textArea.charactersRemaining', {
+        count: maxLength - length
+      }));
+    }
+  }, [announce, t, maxLength]);
   const handleChange = e => {
     // Value can't change while showing a disabled message (the field is
     // read-only and non-native-disabled), but guard the handler too so the
@@ -136,6 +206,7 @@ export function TextArea({
       return;
     }
     const newValue = e.target.value;
+    announceCounter(newValue.length);
     onChange?.(newValue, e);
     if (changeAction && !e.defaultPrevented) {
       startTransition(async () => {
@@ -185,10 +256,15 @@ export function TextArea({
       ...mergeProps(themeProps('textarea', {
         size,
         status: status?.type ?? null
-      }), stylex.props(inputWrapperStyles.base, styles.wrapper, textareaSizeStyles[size], effectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !effectivelyDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
-      children: [startIcon && renderIconSlot(startIcon, {
-        size: 'sm',
-        color: 'secondary'
+      }), stylex.props(inputWrapperStyles.base, styles.wrapper, isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
+      children: [startIcon && /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x10l6tqk xctzyg x1kiyvbf x47corl x78zum5"
+        },
+        children: renderIconSlot(startIcon, {
+          size: 'sm',
+          color: 'secondary'
+        })
       }), /*#__PURE__*/_jsx("textarea", {
         ...rest,
         ref: mergeRefs(ref, textareaRef),
@@ -215,41 +291,33 @@ export function TextArea({
         "aria-required": isRequired && !isOptional ? 'true' : undefined,
         "aria-invalid": status?.type === 'error' || maxLength != null && optimisticValue.length > maxLength ? 'true' : undefined,
         "aria-busy": isBusy || undefined,
+        ...stylex.props(styles.textarea, textareaSizeStyles[size], isDisabled && styles.textareaDisabled, Boolean(startIcon) && styles.textareaWithStartIcon, (status || isBusy) && styles.textareaWithStatus, isBusy && !!statusIcon && styles.textareaWithBusyStatus, maxLength != null && styles.textareaWithCounter)
+      }), (isBusy || statusIcon) && /*#__PURE__*/_jsxs("span", {
+        ...{
+          className: "x10l6tqk xctzyg x13oyzgk x47corl x78zum5 x6s0dn4 x1txdalj"
+        },
+        children: [isBusy && /*#__PURE__*/_jsx(Spinner, {
+          size: "sm"
+        }), statusIcon]
+      }), maxLength != null && /*#__PURE__*/_jsxs("div", {
+        id: counterID,
         ...{
           0: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5"
-          },
-          2: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5 x1h6gzvc"
+            className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j xv1l7n4"
           },
           1: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5 x1we12cn"
-          },
-          3: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x288g5 x1h6gzvc x1we12cn"
+            className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j xjt36v0"
           }
-        }[!!effectivelyDisabled << 1 | !!status << 0]
-      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
-        size: "sm"
-      }), statusIcon && /*#__PURE__*/_jsx("span", {
-        ...{
-          className: "x10l6tqk xctzyg x72tfeb x47corl x78zum5"
-        },
-        children: statusIcon
-      })]
-    }), maxLength != null && /*#__PURE__*/_jsxs("div", {
-      id: counterID,
-      ...{
-        0: {
-          className: "x78zum5 x13a6bvl xcsaf9d x9ynric x141an7d xv1l7n4"
-        },
-        1: {
-          className: "x78zum5 x13a6bvl xcsaf9d x9ynric x141an7d xjt36v0"
-        }
-      }[!!(optimisticValue.length > maxLength) << 0],
-      children: [optimisticValue.length, "/", maxLength, /*#__PURE__*/_jsx(VisuallyHidden, {
-        "aria-live": "polite",
-        children: optimisticValue.length >= maxLength * COUNTER_WARNING_THRESHOLD ? optimisticValue.length > maxLength ? `${optimisticValue.length - maxLength} characters over limit` : `${maxLength - optimisticValue.length} characters remaining` : ''
+        }[!!(optimisticValue.length > maxLength) << 0],
+        children: [optimisticValue.length > maxLength &&
+        /*#__PURE__*/
+        // Non-color cue so the over-limit state isn't conveyed by the red
+        // color alone (WCAG 1.4.1). Decorative — the count text and the
+        // live-region announcement carry the meaning.
+        _jsx(Icon, {
+          icon: "warning",
+          size: "sm"
+        }), optimisticValue.length, "/", maxLength]
       })]
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });

package/dist/astryx.css

@@ -96,6 +96,7 @@
   .x9icjy1{--_segmented-control-radius:var(--radius-element)}
   .xficto1{--_tab-indicator-bottom:calc(-1 * (var(--spacing-1) + var(--border-width)))}
   .xbrl7fg{--_tab-indicator-bottom:var(--x---_tab-indicator-bottom)}
+  .x1kdpo6e{--_textarea-inline-padding:var(--spacing-2)}
   .x1f8er9e{--_tree-focus-outline-offset:0}
   .x1hb5tod{--_tree-focus-outline:none}
   .xnvcwyz{--astryx-section-padding:var(--spacing-0-5)}
@@ -416,6 +417,7 @@
   .xmfvnks:not(#\#):not(#\#){padding-block:var(--spacing-8)}
   .xnjsko4:not(#\#):not(#\#){padding-inline:0}
   .xx2oswg:not(#\#):not(#\#){padding-inline:calc(var(--spacing-1) - 1px)}
+  .x1w6f3ag:not(#\#):not(#\#){padding-inline:var(--_textarea-inline-padding)}
   .xkjnx3w:not(#\#):not(#\#){padding-inline:var(--spacing-0-5)}
   .x17a0aqu:not(#\#):not(#\#){padding-inline:var(--spacing-0)}
   .x4ezzuc:not(#\#):not(#\#){padding-inline:var(--spacing-1-5)}
@@ -821,6 +823,7 @@
   .xz03a8w:not(#\#):not(#\#):not(#\#){inset-inline-end:2px}
   .x1oinnt5:not(#\#):not(#\#):not(#\#){inset-inline-end:calc((var(--size-element-md) - 20px) / 2 - 1px)}
   .x8qlsd8:not(#\#):not(#\#):not(#\#){inset-inline-end:calc((var(--size-element-sm) - 20px) / 2 - 1px)}
+  .x13oyzgk:not(#\#):not(#\#):not(#\#){inset-inline-end:var(--_textarea-inline-padding)}
   .xy3asu9:not(#\#):not(#\#):not(#\#){inset-inline-end:var(--spacing-1)}
   .x72tfeb:not(#\#):not(#\#):not(#\#){inset-inline-end:var(--spacing-2)}
   .x1mcfs9z:not(#\#):not(#\#):not(#\#){inset-inline-end:var(--spacing-3)}
@@ -828,6 +831,7 @@
   .x9p6ekw:not(#\#):not(#\#):not(#\#){inset-inline-start:14px}
   .xaoy8p5:not(#\#):not(#\#):not(#\#){inset-inline-start:2px}
   .xbudbmw:not(#\#):not(#\#):not(#\#){inset-inline-start:50%}
+  .x1kiyvbf:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--_textarea-inline-padding)}
   .x1ybfrjj:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--spacing-3)}
   .xc8icb0:not(#\#):not(#\#):not(#\#){isolation:isolate}
   .xl56j7k:not(#\#):not(#\#):not(#\#){justify-content:center}
@@ -910,6 +914,8 @@
   .x1mzt3pk:not(#\#):not(#\#):not(#\#){overflow-wrap:break-word}
   .x1h4wwuj:not(#\#):not(#\#):not(#\#){overflow-wrap:normal}
   .xyri2b:not(#\#):not(#\#):not(#\#){padding-inline-end:0}
+  .x1g2apga:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--_textarea-inline-padding) + var(--spacing-12))}
+  .xp2dy4z:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--_textarea-inline-padding) + var(--spacing-6))}
   .x12frdag:not(#\#):not(#\#):not(#\#){padding-inline-end:calc(var(--container-padding-inline-end) - var(--border-width))}
   .x64h4k7:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--container-padding-inline-end)}
   .x1peupej:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--layout-padding-inner-x,var(--spacing-4))}
@@ -927,6 +933,7 @@
   .x1q91b2g:not(#\#):not(#\#):not(#\#){padding-inline-end:var(--spacing-8)}
   .x1c1uobl:not(#\#):not(#\#):not(#\#){padding-inline-start:0}
   .x1f43n9v:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(16px + var(--spacing-1-5))}
+  .x1b6te9z:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--_textarea-inline-padding) + var(--spacing-6))}
   .xs19ii7:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--container-padding-inline-start) - var(--border-width))}
   .x2a0j69:not(#\#):not(#\#):not(#\#){padding-inline-start:calc(var(--spacing-2) - var(--spacing-1) + 1px)}
   .x1c35znw:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--container-padding-inline-start)}
@@ -1284,6 +1291,7 @@
   .x1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
   .x1c7jfne:not(#\#):not(#\#):not(#\#):not(#\#){bottom:2px}
   .xyi47jn:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--_tab-indicator-bottom,-1px)}
+  .x112dmjn:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--spacing-1)}
   .x1nqzi6q:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--x-bottom)}
   .xvle69y:not(#\#):not(#\#):not(#\#):not(#\#){height:.75rem}
   .xqtp20y:not(#\#):not(#\#):not(#\#):not(#\#){height:0}
@@ -1462,6 +1470,7 @@
   .x1awphl8:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-4)}
   .x1hk98q:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-5)}
   .xjpqqx5:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-6)}
+  .xekm6fs:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-7)}
   .x2oz4g1:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-8)}
   .xexx8yu:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:0}
   .x1htvmrp:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:calc(var(--_chat-composer-padding) + var(--_chat-composer-radius))}