@astryxdesign/lab 0.1.4-canary.7aef8d3 → 0.1.4-canary.7e5db0e

package/README.md

@@ -12,6 +12,8 @@ Components in lab:
 - Compose with `@astryxdesign/core` components (use the theme, follow naming conventions)
 - Graduate to `@astryxdesign/core` after thorough engineering review
 
+See the **[Component Lifecycle](https://github.com/facebook/astryx/wiki/Component-Lifecycle)** wiki for how a component moves from lab → core (and the promotion gates), and the **[Component Hardening Protocol](https://github.com/facebook/astryx/wiki/Component-Hardening-Protocol)** for the bar a component must clear to graduate.
+
 ## What's here vs what's in core
 
 **Lab:** Works, has basic props, maybe has stories. API might change. Not accessibility-hardened, not vibe-tested, not fully themed. **Canary-only — no stability promise.**

package/dist/Chat/ChatEmojiPicker.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @file ChatEmojiPicker.tsx
+ * @input Uses React, StyleX, theme tokens, Popover, TextInput, useGridFocus
+ * @output Exports ChatEmojiPicker component, ChatEmojiPickerProps,
+ *   ChatEmojiOption, and DEFAULT_CHAT_EMOJIS
+ * @position Popover emoji grid for chat reactions; wraps a trigger button
+ *
+ * Renders a Popover around a trigger element: a shortname filter input over
+ * a fixed 8-column emoji grid. Arrow keys move focus through the grid
+ * (left/right by one, up/down by a row) via useGridFocus; picking an emoji
+ * calls onSelect and closes the popover, which restores focus to the
+ * trigger. Ships with a small default emoji set; pass `emojis` to override.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/Chat/index.ts (exports)
+ * - /packages/lab/src/Chat/ChatEmojiPicker.doc.mjs
+ * - /apps/storybook/stories/ChatAdditions.stories.tsx (examples)
+ */
+import type { ReactNode } from 'react';
+import type { BaseProps } from '@astryxdesign/core';
+export interface ChatEmojiOption {
+    /** The emoji character, e.g. "🎉". */
+    emoji: string;
+    /** Shortname used for filtering and accessible labels, e.g. "tada". */
+    name: string;
+}
+/**
+ * Small default emoji set (two grid rows) covering the common
+ * reaction vocabulary. Override via the `emojis` prop.
+ */
+export declare const DEFAULT_CHAT_EMOJIS: ReadonlyArray<ChatEmojiOption>;
+export interface ChatEmojiPickerProps extends Omit<BaseProps<HTMLDivElement>, 'onSelect'> {
+    /** Ref forwarded to the popover panel element */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Called with the picked emoji character.
+     * The popover closes itself after selection.
+     */
+    onSelect: (emoji: string) => void;
+    /**
+     * Emoji options rendered in the grid (8 per row).
+     * @default DEFAULT_CHAT_EMOJIS
+     */
+    emojis?: ReadonlyArray<ChatEmojiOption>;
+    /**
+     * Accessible label for the popover dialog.
+     * @default 'Pick an emoji'
+     */
+    label?: string;
+    /**
+     * Placeholder and hidden label for the filter input.
+     * @default 'Search emoji'
+     */
+    searchLabel?: string;
+    /**
+     * Trigger element — must contain a `<button>` (Popover wires it up).
+     */
+    children: ReactNode;
+    /** Test ID for the popover content. */
+    'data-testid'?: string;
+}
+/**
+ * Popover emoji grid with shortname filtering and arrow-key navigation.
+ *
+ * Wraps its trigger button in a Popover. Typing in the filter input narrows
+ * the grid by shortname; arrow keys move focus between emoji; picking one
+ * calls `onSelect` and closes the popover (focus returns to the trigger).
+ *
+ * @example
+ * ```
+ * <ChatEmojiPicker onSelect={(emoji) => addReaction(emoji)}>
+ *   <button type="button" aria-label="Add reaction">🙂</button>
+ * </ChatEmojiPicker>
+ * ```
+ */
+export declare function ChatEmojiPicker({ onSelect, emojis, label, searchLabel, children, xstyle, className, style: styleProp, 'data-testid': testId, ref, }: ChatEmojiPickerProps): import("react").JSX.Element;
+export declare namespace ChatEmojiPicker {
+    var displayName: string;
+}
+//# sourceMappingURL=ChatEmojiPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatEmojiPicker.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatEmojiPicker.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAOlD,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,aAAa,CAAC,eAAe,CAiB9D,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA+DD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAA4B,EAC5B,KAAuB,EACvB,WAA4B,EAC5B,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,oBAAoB,+BAoFtB;yBA/Fe,eAAe"}

package/dist/Chat/ChatEmojiPicker.js

@@ -0,0 +1,201 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ChatEmojiPicker.tsx
+ * @input Uses React, StyleX, theme tokens, Popover, TextInput, useGridFocus
+ * @output Exports ChatEmojiPicker component, ChatEmojiPickerProps,
+ *   ChatEmojiOption, and DEFAULT_CHAT_EMOJIS
+ * @position Popover emoji grid for chat reactions; wraps a trigger button
+ *
+ * Renders a Popover around a trigger element: a shortname filter input over
+ * a fixed 8-column emoji grid. Arrow keys move focus through the grid
+ * (left/right by one, up/down by a row) via useGridFocus; picking an emoji
+ * calls onSelect and closes the popover, which restores focus to the
+ * trigger. Ships with a small default emoji set; pass `emojis` to override.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/Chat/index.ts (exports)
+ * - /packages/lab/src/Chat/ChatEmojiPicker.doc.mjs
+ * - /apps/storybook/stories/ChatAdditions.stories.tsx (examples)
+ */
+import { useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { mergeProps } from '@astryxdesign/core/utils';
+import { themeProps } from '@astryxdesign/core/utils';
+import { Popover } from '@astryxdesign/core/Popover';
+import { TextInput } from '@astryxdesign/core/TextInput';
+import { useGridFocus } from '@astryxdesign/core/hooks';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Small default emoji set (two grid rows) covering the common
+ * reaction vocabulary. Override via the `emojis` prop.
+ */
+export const DEFAULT_CHAT_EMOJIS = [{
+  emoji: '👍',
+  name: 'thumbs up'
+}, {
+  emoji: '❤️',
+  name: 'heart'
+}, {
+  emoji: '😂',
+  name: 'joy'
+}, {
+  emoji: '🎉',
+  name: 'tada'
+}, {
+  emoji: '😮',
+  name: 'wow'
+}, {
+  emoji: '😢',
+  name: 'cry'
+}, {
+  emoji: '🔥',
+  name: 'fire'
+}, {
+  emoji: '👀',
+  name: 'eyes'
+}, {
+  emoji: '✅',
+  name: 'check'
+}, {
+  emoji: '🙏',
+  name: 'pray'
+}, {
+  emoji: '💯',
+  name: 'hundred'
+}, {
+  emoji: '🚀',
+  name: 'rocket'
+}, {
+  emoji: '😍',
+  name: 'heart eyes'
+}, {
+  emoji: '🤔',
+  name: 'thinking'
+}, {
+  emoji: '👋',
+  name: 'wave'
+}, {
+  emoji: '⭐',
+  name: 'star'
+}];
+const GRID_COLUMNS = 8;
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = {
+  panel: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1txdalj",
+    kzqmXN: "x1dz1jew",
+    kB7OPa: "x9f619",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * Popover emoji grid with shortname filtering and arrow-key navigation.
+ *
+ * Wraps its trigger button in a Popover. Typing in the filter input narrows
+ * the grid by shortname; arrow keys move focus between emoji; picking one
+ * calls `onSelect` and closes the popover (focus returns to the trigger).
+ *
+ * @example
+ * ```
+ * <ChatEmojiPicker onSelect={(emoji) => addReaction(emoji)}>
+ *   <button type="button" aria-label="Add reaction">🙂</button>
+ * </ChatEmojiPicker>
+ * ```
+ */
+export function ChatEmojiPicker({
+  onSelect,
+  emojis = DEFAULT_CHAT_EMOJIS,
+  label = 'Pick an emoji',
+  searchLabel = 'Search emoji',
+  children,
+  xstyle,
+  className,
+  style: styleProp,
+  'data-testid': testId,
+  ref
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const {
+    gridRef,
+    handleKeyDown
+  } = useGridFocus({
+    columns: GRID_COLUMNS
+  });
+  const trimmed = query.trim().toLowerCase();
+  const visible = trimmed === '' ? emojis : emojis.filter(option => option.name.toLowerCase().includes(trimmed) || option.emoji === trimmed);
+  const handleOpenChange = open => {
+    setIsOpen(open);
+    if (!open) {
+      setQuery('');
+    }
+  };
+  const handleSelect = emoji => {
+    onSelect(emoji);
+    handleOpenChange(false);
+  };
+  return /*#__PURE__*/_jsx(Popover, {
+    isOpen: isOpen,
+    onOpenChange: handleOpenChange,
+    label: label,
+    placement: "below",
+    alignment: "start",
+    "data-testid": testId,
+    content: /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      ...mergeProps(themeProps('chat-emoji-picker'), stylex.props(styles.panel, xstyle), className, styleProp),
+      children: [/*#__PURE__*/_jsx(TextInput, {
+        label: searchLabel,
+        isLabelHidden: true,
+        size: "sm",
+        placeholder: searchLabel,
+        value: query,
+        onChange: setQuery,
+        hasClear: true
+      }), visible.length === 0 ? /*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "xce4md1 x7a5moj x9ynric x141an7d xv1l7n4"
+        },
+        children: ["No emoji match \u201C", query.trim(), "\u201D."]
+      }) : /*#__PURE__*/_jsx("div", {
+        ref: gridRef,
+        role: "group",
+        "aria-label": "Emoji",
+        onKeyDown: handleKeyDown,
+        ...{
+          className: "xrvj5dj x12m0uhf x1lsbc85"
+        },
+        children: visible.map(option => /*#__PURE__*/_jsx("button", {
+          type: "button",
+          "data-emoji": option.emoji,
+          "aria-label": `React with ${option.name}`,
+          onClick: () => handleSelect(option.emoji),
+          ...{
+            className: "x3nfvp2 x6s0dn4 xl56j7k x1td3qas x10w6t97 xx3sua9 xng3xce x1717udv xjbqb8w x1n5bzlp xe9uy6x x1ypdohk xosj86m xw6l6zx x1a2a7pz x17nn4n9 x2ssjo2 x15406qy xuedmi6 x12w9bfk xlr8y92"
+          },
+          children: /*#__PURE__*/_jsx("span", {
+            "aria-hidden": "true",
+            children: option.emoji
+          })
+        }, option.emoji))
+      })]
+    }),
+    children: children
+  });
+}
+ChatEmojiPicker.displayName = 'ChatEmojiPicker';

package/dist/Chat/ChatReactionBar.d.ts

@@ -0,0 +1,73 @@
+import type { BaseProps } from '@astryxdesign/core';
+import type { ChatEmojiOption } from './ChatEmojiPicker';
+export interface ChatReaction {
+    /** The emoji character, e.g. "🎉". */
+    emoji: string;
+    /** Number of people who reacted with this emoji. */
+    count: number;
+    /**
+     * Whether the current user has reacted — accent border, tinted
+     * background, and `aria-pressed="true"` on the pill.
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Human-readable description used as the pill's tooltip and accessible
+     * label, e.g. "Ana and Dana reacted with 🎉". Falls back to a count-based
+     * label when omitted.
+     */
+    label?: string;
+}
+export interface ChatReactionBarProps extends Omit<BaseProps<HTMLDivElement>, 'onToggle'> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Reactions to render, in display order. */
+    reactions: ChatReaction[];
+    /** Called with the pill's emoji when the user toggles a reaction. */
+    onToggle?: (emoji: string) => void;
+    /**
+     * Called with the picked emoji when the user adds a reaction from the
+     * emoji picker. The trailing add-reaction button renders only when
+     * this is provided.
+     */
+    onAdd?: (emoji: string) => void;
+    /**
+     * Emoji options for the add-reaction picker.
+     * @default DEFAULT_CHAT_EMOJIS
+     */
+    emojis?: ReadonlyArray<ChatEmojiOption>;
+    /**
+     * Accessible label for the add-reaction button.
+     * @default 'Add reaction'
+     */
+    addLabel?: string;
+    /**
+     * Accessible label for the reaction group.
+     * @default 'Reactions'
+     */
+    label?: string;
+}
+/**
+ * Row of emoji reaction pills under a chat message.
+ *
+ * Each pill shows an emoji and count; the current user's own reactions get
+ * an accent tint and `aria-pressed`. Provide `onAdd` to render a trailing
+ * add-reaction button that opens a ChatEmojiPicker popover.
+ *
+ * @example
+ * ```
+ * <ChatReactionBar
+ *   reactions={[
+ *     {emoji: '🎉', count: 4, isSelected: true, label: 'You and Dana reacted with 🎉'},
+ *     {emoji: '👀', count: 2},
+ *   ]}
+ *   onToggle={(emoji) => toggleReaction(emoji)}
+ *   onAdd={(emoji) => addReaction(emoji)}
+ * />
+ * ```
+ */
+export declare function ChatReactionBar({ reactions, onToggle, onAdd, emojis, addLabel, label, xstyle, className, style: styleProp, 'data-testid': testId, ref, }: ChatReactionBarProps): import("react").JSX.Element;
+export declare namespace ChatReactionBar {
+    var displayName: string;
+}
+//# sourceMappingURL=ChatReactionBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatReactionBar.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatReactionBar.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAKlD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC,6CAA6C;IAC7C,SAAS,EAAE,YAAY,EAAE,CAAC;IAE1B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhC;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAExC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAyB,EACzB,KAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,oBAAoB,+BAyDtB;yBArEe,eAAe"}

package/dist/Chat/ChatReactionBar.js

@@ -0,0 +1,148 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ChatReactionBar.tsx
+ * @input Uses React, StyleX, theme tokens, Tooltip, ChatEmojiPicker
+ * @output Exports ChatReactionBar component, ChatReactionBarProps, ChatReaction
+ * @position Row of emoji reaction pills under a chat message
+ *
+ * Renders reaction pills (emoji + count) with a pressed state for the
+ * current user's own reactions, optional tooltips listing reactors, and an
+ * optional trailing add-reaction button that opens a ChatEmojiPicker
+ * popover. Data flows in via `reactions`; toggles flow out via `onToggle`
+ * and new reactions via `onAdd`.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/Chat/index.ts (exports)
+ * - /packages/lab/src/Chat/ChatReactionBar.doc.mjs
+ * - /apps/storybook/stories/ChatAdditions.stories.tsx (examples)
+ */
+import * as stylex from '@stylexjs/stylex';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, typeScaleVars, fontWeightVars } from '@astryxdesign/core/theme/tokens.stylex';
+import { mergeProps } from '@astryxdesign/core/utils';
+import { themeProps } from '@astryxdesign/core/utils';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
+import { ChatEmojiPicker } from "./ChatEmojiPicker.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = {
+  root: {
+    k1xSpc: "x78zum5",
+    kwnvtZ: "x1a02dak",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "xzye2dw",
+    $$css: true
+  }
+};
+function pillLabel(reaction) {
+  if (reaction.label != null) {
+    return reaction.label;
+  }
+  const noun = reaction.count === 1 ? 'reaction' : 'reactions';
+  return `${reaction.count} ${noun} with ${reaction.emoji}`;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * Row of emoji reaction pills under a chat message.
+ *
+ * Each pill shows an emoji and count; the current user's own reactions get
+ * an accent tint and `aria-pressed`. Provide `onAdd` to render a trailing
+ * add-reaction button that opens a ChatEmojiPicker popover.
+ *
+ * @example
+ * ```
+ * <ChatReactionBar
+ *   reactions={[
+ *     {emoji: '🎉', count: 4, isSelected: true, label: 'You and Dana reacted with 🎉'},
+ *     {emoji: '👀', count: 2},
+ *   ]}
+ *   onToggle={(emoji) => toggleReaction(emoji)}
+ *   onAdd={(emoji) => addReaction(emoji)}
+ * />
+ * ```
+ */
+export function ChatReactionBar({
+  reactions,
+  onToggle,
+  onAdd,
+  emojis,
+  addLabel = 'Add reaction',
+  label = 'Reactions',
+  xstyle,
+  className,
+  style: styleProp,
+  'data-testid': testId,
+  ref
+}) {
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    role: "group",
+    "aria-label": label,
+    "data-testid": testId,
+    ...mergeProps(themeProps('chat-reaction-bar'), stylex.props(styles.root, xstyle), className, styleProp),
+    children: [reactions.map(reaction => {
+      const isSelected = reaction.isSelected === true;
+      const pill = /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        "aria-pressed": isSelected,
+        "aria-label": pillLabel(reaction),
+        onClick: () => onToggle?.(reaction.emoji),
+        ...{
+          0: {
+            className: "x3nfvp2 x6s0dn4 xzye2dw xxk0z11 xf314gf xjspbzw xmkeg23 x1y0btm7 x9r1u3d x1xfd4ba x1ww4t2b xwmxj5m x1ypdohk x9ynric x9f619 xq90yva xuedmi6 x12w9bfk xlr8y92"
+          },
+          1: {
+            className: "x3nfvp2 x6s0dn4 xzye2dw xxk0z11 xf314gf xjspbzw xmkeg23 x1y0btm7 x1ypdohk x9ynric x9f619 xq90yva xuedmi6 x12w9bfk xlr8y92 xgcxg3y xad5do xn21ew4 xhggfp0"
+          }
+        }[!!isSelected << 0],
+        children: [/*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          ...{
+            className: "xjm74w1 xw6l6zx"
+          },
+          children: reaction.emoji
+        }), /*#__PURE__*/_jsx("span", {
+          ...{
+            0: {
+              className: "x141an7d x1e4wzip xv1l7n4 xss6m8b x1ltkj2j"
+            },
+            1: {
+              className: "x141an7d xss6m8b x1ltkj2j xjse4m1 x2mo6ok"
+            }
+          }[!!isSelected << 0],
+          children: reaction.count
+        })]
+      }, reaction.emoji);
+      return reaction.label != null ? /*#__PURE__*/_jsx(Tooltip, {
+        content: reaction.label,
+        children: pill
+      }, reaction.emoji) : pill;
+    }), onAdd != null && /*#__PURE__*/_jsx(ChatEmojiPicker, {
+      emojis: emojis,
+      onSelect: onAdd,
+      label: addLabel,
+      children: /*#__PURE__*/_jsx(Tooltip, {
+        content: addLabel,
+        children: /*#__PURE__*/_jsx("button", {
+          type: "button",
+          "aria-label": addLabel,
+          ...{
+            className: "x3nfvp2 x6s0dn4 xl56j7k x1td3qas xxk0z11 xjspbzw xmkeg23 x1y0btm7 x9r1u3d x1xfd4ba x1ww4t2b xwmxj5m xv9yike x1ypdohk x9f619 x1jvydc1 x1ltkj2j x1717udv"
+          },
+          children: "+"
+        })
+      })
+    })]
+  });
+}
+ChatReactionBar.displayName = 'ChatReactionBar';

package/dist/Chat/ChatTypingIndicator.d.ts

@@ -0,0 +1,30 @@
+import type { BaseProps } from '@astryxdesign/core';
+export interface ChatTypingIndicatorProps extends BaseProps<HTMLDivElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Names of people currently typing. Drives the label:
+     * one name → "Ana is typing…", two → "Ana and Ben are typing…",
+     * more → "Ana and 2 others are typing…". When omitted or empty,
+     * only the animated dots render.
+     */
+    names?: string[];
+}
+/**
+ * Animated three-dot typing hint with a name-aware label.
+ *
+ * The dots bounce with staggered delays (disabled under
+ * prefers-reduced-motion) and the label is announced politely to
+ * screen readers via role="status".
+ *
+ * @example
+ * ```
+ * <ChatTypingIndicator names={['Ana']} />
+ * <ChatTypingIndicator names={['Ana', 'Ben', 'Casey']} />
+ * ```
+ */
+export declare function ChatTypingIndicator({ names, xstyle, className, style: styleProp, 'data-testid': testId, ref, }: ChatTypingIndicatorProps): import("react").JSX.Element;
+export declare namespace ChatTypingIndicator {
+    var displayName: string;
+}
+//# sourceMappingURL=ChatTypingIndicator.d.ts.map

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

@@ -0,0 +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"}

package/dist/Chat/ChatTypingIndicator.js

@@ -0,0 +1,112 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ChatTypingIndicator.tsx
+ * @input Uses React, StyleX (keyframes), theme tokens
+ * @output Exports ChatTypingIndicator component and ChatTypingIndicatorProps
+ * @position Animated "X is typing…" hint above a chat composer
+ *
+ * Three staggered bouncing dots (stylex.keyframes, reduced-motion safe)
+ * with a grammar-aware label: "Ana is typing…", "Ana and Ben are typing…",
+ * or "Ana and 2 others are typing…". Announced politely via role="status".
+ * Renders dots only when no names are provided.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/Chat/index.ts (exports)
+ * - /packages/lab/src/Chat/ChatTypingIndicator.doc.mjs
+ * - /apps/storybook/stories/ChatAdditions.stories.tsx (examples)
+ */
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// Styles
+// =============================================================================
+
+const bounceKeyframes = "x17t2jll-B";
+const styles = {
+  root: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kOIVth: "x1txdalj",
+    kAzted: "xisnujt",
+    $$css: true
+  }
+};
+function typingLabel(names) {
+  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 `${names[0]} and ${names.length - 1} others are typing…`;
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * Animated three-dot typing hint with a name-aware label.
+ *
+ * The dots bounce with staggered delays (disabled under
+ * prefers-reduced-motion) and the label is announced politely to
+ * screen readers via role="status".
+ *
+ * @example
+ * ```
+ * <ChatTypingIndicator names={['Ana']} />
+ * <ChatTypingIndicator names={['Ana', 'Ben', 'Casey']} />
+ * ```
+ */
+export function ChatTypingIndicator({
+  names,
+  xstyle,
+  className,
+  style: styleProp,
+  'data-testid': testId,
+  ref
+}) {
+  const label = typingLabel(names);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    role: "status",
+    "aria-live": "polite",
+    "data-testid": testId,
+    ...mergeProps(themeProps('chat-typing-indicator'), stylex.props(styles.root, xstyle), className, styleProp),
+    children: [/*#__PURE__*/_jsxs("span", {
+      "aria-hidden": "true",
+      ...{
+        className: "x3nfvp2 x6s0dn4 x1lsbc85"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x1ftt334 x1ycjhwn xjspbzw x1q5y3ey x17u5aw1 xxprybm xa4qsjk x4hg4is x1aquc0h"
+        }
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x1ftt334 x1ycjhwn xjspbzw x1q5y3ey x17u5aw1 xxprybm xa4qsjk x4hg4is x1aquc0h x1jksiw5"
+        }
+      }), /*#__PURE__*/_jsx("span", {
+        ...{
+          className: "x1ftt334 x1ycjhwn xjspbzw x1q5y3ey x17u5aw1 xxprybm xa4qsjk x4hg4is x1aquc0h xtmkasn"
+        }
+      })]
+    }), label != null && /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x9ynric x141an7d xv1l7n4"
+      },
+      children: label
+    })]
+  });
+}
+ChatTypingIndicator.displayName = 'ChatTypingIndicator';