@astryxdesign/lab 0.6.1-canary.f48d468 → 0.6.2-canary.a4bcbeb

package/dist/Chat/ChatTypingIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatTypingIndicator.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatTypingIndicator.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAIlD,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACzE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAoED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,wBAAwB,+BAsB1B;yBA7Be,mBAAmB"}
+{"version":3,"file":"ChatTypingIndicator.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatTypingIndicator.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAMlD,MAAM,WAAW,wBAAyB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACzE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB;AAuFD;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,wBAAwB,+BA4B1B;yBAnCe,mBAAmB"}

package/dist/Chat/ChatTypingIndicator.js

@@ -4,7 +4,7 @@
 
 /**
  * @file ChatTypingIndicator.tsx
- * @input Uses React, StyleX (keyframes), theme tokens
+ * @input Uses React, i18n (useTranslator/useLocale), StyleX (keyframes), theme tokens
  * @output Exports ChatTypingIndicator component and ChatTypingIndicatorProps
  * @position Animated "X is typing…" hint above a chat composer
  *
@@ -18,11 +18,13 @@
  * - /packages/lab/src/Chat/ChatTypingIndicator.doc.mjs
  * - /apps/storybook/stories/ChatAdditions.stories.tsx (examples)
  */
+import { useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import '@astryxdesign/core/theme/tokens.stylex';
 import { colorVars, spacingVars, radiusVars, durationVars, typographyVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
 import { mergeProps } from '@astryxdesign/core/utils';
 import { themeProps } from '@astryxdesign/core/utils';
+import { useLocale, useTranslator } from '@astryxdesign/core/i18n';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -38,17 +40,31 @@ const styles = {
     $$css: true
   }
 };
-function typingLabel(names) {
+
+/**
+ * Builds the status sentence for the people currently typing.
+ *
+ * Every phrase comes from the translation catalog, and the names themselves are
+ * joined by `Intl.ListFormat` for the active locale rather than an English
+ * "and". Three or more people collapse to the first name plus a translated
+ * overflow phrase, which is then joined the same way — so the conjunction, the
+ * separator, and their order all follow the locale instead of this file.
+ */
+function typingLabel(names, t, listFormat) {
   if (names == null || names.length === 0) {
     return null;
   }
   if (names.length === 1) {
-    return `${names[0]} is typing…`;
-  }
-  if (names.length === 2) {
-    return `${names[0]} and ${names[1]} are typing…`;
+    return t('@astryx.chatTypingIndicator.one', {
+      name: names[0]
+    });
   }
-  return `${names[0]} and ${names.length - 1} others are typing…`;
+  const parts = names.length === 2 ? [names[0], names[1]] : [names[0], t('@astryx.chatTypingIndicator.others', {
+    count: names.length - 1
+  })];
+  return t('@astryx.chatTypingIndicator.many', {
+    names: listFormat.format(parts)
+  });
 }
 
 // =============================================================================
@@ -76,7 +92,13 @@ export function ChatTypingIndicator({
   'data-testid': testId,
   ref
 }) {
-  const label = typingLabel(names);
+  const t = useTranslator();
+  const locale = useLocale();
+  const listFormat = useMemo(() => new Intl.ListFormat(locale, {
+    style: 'long',
+    type: 'conjunction'
+  }), [locale]);
+  const label = typingLabel(names, t, listFormat);
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     role: "status",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.6.1-canary.f48d468",
+  "version": "0.6.2-canary.a4bcbeb",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -46,7 +46,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.6.1-canary.f48d468",
+    "@astryxdesign/core": "0.6.2-canary.a4bcbeb",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -56,8 +56,8 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.6.1-canary.f48d468",
-    "@astryxdesign/cli": "0.6.1-canary.f48d468",
+    "@astryxdesign/a11y-spec": "0.6.2-canary.a4bcbeb",
+    "@astryxdesign/cli": "0.6.2-canary.a4bcbeb",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/Chat/ChatTypingIndicator.doc.mjs

@@ -8,12 +8,12 @@ export const docs = {
   group: 'Chat',
   category: 'Chat',
   displayName: 'Chat Typing Indicator',
-  description: 'Animated three-dot typing hint with a grammar-aware label: "Ana is typing...", "Ana and Ben are typing...", or "Ana and 2 others are typing...". Dots bounce with staggered stylex.keyframes delays, disabled under prefers-reduced-motion; the label is announced politely via role="status".',
+  description: 'Animated three-dot typing hint with a localized, grammar-aware label: "Ana is typing...", "Ana and Ben are typing...", or "Ana and 2 others are typing...". Dots bounce with staggered stylex.keyframes delays, disabled under prefers-reduced-motion; the label is announced politely via role="status".',
   props: [
     {
       name: 'names',
       type: 'string[]',
-      description: 'Names of people currently typing. One name renders "is typing", two render both names, more collapse to "and N others". When omitted or empty, only the animated dots render.',
+      description: 'Names of people currently typing. One name renders "is typing", two render both names, more collapse to "and N others". The sentence comes from the i18n catalog and the names are joined with Intl.ListFormat, so the wording and conjunction follow the active locale. When omitted or empty, only the animated dots render.',
     },
   ],
 };
@@ -23,7 +23,7 @@ export const docsZh = {
   displayName: 'Chat Typing Indicator',
   description: '带语法感知标签的三点跳动输入提示："Ana is typing..."、"Ana and Ben are typing..." 或 "Ana and 2 others are typing..."。圆点用 stylex.keyframes 交错跳动，prefers-reduced-motion 下禁用；标签通过 role="status" 礼貌播报。',
   propDescriptions: {
-    names: '正在输入的人名。一个名字渲染 "is typing"，两个渲染双名，更多折叠为 "and N others"。省略或为空时仅渲染动画圆点。',
+    names: '正在输入的人名。一个名字渲染 "is typing"，两个渲染双名，更多折叠为 "and N others"。语句取自 i18n 词条，人名由 Intl.ListFormat 按当前语言拼接，因此措辞与连接词随语言而变。省略或为空时仅渲染动画圆点。',
   },
 };
 
@@ -32,6 +32,7 @@ export const docsDense = {
   displayName: 'Chat Typing Indicator',
   description: 'bouncing three-dot typing hint; label grammar 1/2/N names; reduced-motion safe keyframes; role=status polite announce; dots-only when names empty',
   propDescriptions: {
-    names: "string[]; 1='X is typing', 2='X and Y', 3+='X and N others'; empty=dots only",
+    names:
+      "string[]; 1='X is typing', 2='X and Y', 3+='X and N others'; phrases from i18n catalog, names joined by Intl.ListFormat; empty=dots only",
   },
 };

package/src/Chat/ChatTypingIndicator.test.tsx

@@ -3,6 +3,7 @@
 import {describe, it, expect} from 'vitest';
 import {render, screen} from '@testing-library/react';
 import {ChatTypingIndicator} from './ChatTypingIndicator';
+import {InternationalizationProvider} from '@astryxdesign/core/i18n';
 
 describe('ChatTypingIndicator', () => {
   it('renders "X is typing…" for one name', () => {
@@ -20,6 +21,51 @@ describe('ChatTypingIndicator', () => {
     expect(screen.getByText('Ana and 2 others are typing…')).toBeTruthy();
   });
 
+  it('localizes the one-name sentence through the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {
+            '@astryx.chatTypingIndicator.one': '{name} est en train d’écrire…',
+          },
+        }}>
+        <ChatTypingIndicator names={['Ana']} />
+      </InternationalizationProvider>,
+    );
+    expect(screen.getByText('Ana est en train d’écrire…')).toBeTruthy();
+  });
+
+  it('joins two names with the locale list format', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {'@astryx.chatTypingIndicator.many': '{names} écrivent…'},
+        }}>
+        <ChatTypingIndicator names={['Ana', 'Ben']} />
+      </InternationalizationProvider>,
+    );
+    // Intl.ListFormat('fr') joins with "et", not the English "and".
+    expect(screen.getByText('Ana et Ben écrivent…')).toBeTruthy();
+  });
+
+  it('localizes the collapsed overflow sentence', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {
+            '@astryx.chatTypingIndicator.others': '{count, number} autres',
+            '@astryx.chatTypingIndicator.many': '{names} écrivent…',
+          },
+        }}>
+        <ChatTypingIndicator names={['Ana', 'Ben', 'Casey']} />
+      </InternationalizationProvider>,
+    );
+    expect(screen.getByText('Ana et 2 autres écrivent…')).toBeTruthy();
+  });
+
   it('renders dots only when names is empty', () => {
     render(<ChatTypingIndicator names={[]} data-testid="typing" />);
     const root = screen.getByTestId('typing');

package/src/Chat/ChatTypingIndicator.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file ChatTypingIndicator.tsx
- * @input Uses React, StyleX (keyframes), theme tokens
+ * @input Uses React, i18n (useTranslator/useLocale), StyleX (keyframes), theme tokens
  * @output Exports ChatTypingIndicator component and ChatTypingIndicatorProps
  * @position Animated "X is typing…" hint above a chat composer
  *
@@ -19,6 +19,7 @@
  * - /apps/storybook/stories/ChatAdditions.stories.tsx (examples)
  */
 
+import {useMemo} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -31,6 +32,8 @@ import {
 import type {BaseProps} from '@astryxdesign/core';
 import {mergeProps} from '@astryxdesign/core/utils';
 import {themeProps} from '@astryxdesign/core/utils';
+import {useLocale, useTranslator} from '@astryxdesign/core/i18n';
+import type {TranslatorFn} from '@astryxdesign/core/i18n';
 
 export interface ChatTypingIndicatorProps extends BaseProps<HTMLDivElement> {
   /** Ref forwarded to the root element */
@@ -94,17 +97,36 @@ const styles = stylex.create({
   },
 });
 
-function typingLabel(names: string[] | undefined): string | null {
+/**
+ * Builds the status sentence for the people currently typing.
+ *
+ * Every phrase comes from the translation catalog, and the names themselves are
+ * joined by `Intl.ListFormat` for the active locale rather than an English
+ * "and". Three or more people collapse to the first name plus a translated
+ * overflow phrase, which is then joined the same way — so the conjunction, the
+ * separator, and their order all follow the locale instead of this file.
+ */
+function typingLabel(
+  names: string[] | undefined,
+  t: TranslatorFn,
+  listFormat: Intl.ListFormat,
+): string | null {
   if (names == null || names.length === 0) {
     return null;
   }
   if (names.length === 1) {
-    return `${names[0]} is typing…`;
+    return t('@astryx.chatTypingIndicator.one', {name: names[0]});
   }
-  if (names.length === 2) {
-    return `${names[0]} and ${names[1]} are typing…`;
-  }
-  return `${names[0]} and ${names.length - 1} others are typing…`;
+  const parts =
+    names.length === 2
+      ? [names[0], names[1]]
+      : [
+          names[0],
+          t('@astryx.chatTypingIndicator.others', {count: names.length - 1}),
+        ];
+  return t('@astryx.chatTypingIndicator.many', {
+    names: listFormat.format(parts),
+  });
 }
 
 // =============================================================================
@@ -132,7 +154,13 @@ export function ChatTypingIndicator({
   'data-testid': testId,
   ref,
 }: ChatTypingIndicatorProps) {
-  const label = typingLabel(names);
+  const t = useTranslator();
+  const locale = useLocale();
+  const listFormat = useMemo(
+    () => new Intl.ListFormat(locale, {style: 'long', type: 'conjunction'}),
+    [locale],
+  );
+  const label = typingLabel(names, t, listFormat);
   return (
     <div
       ref={ref}