@veevarts/design-system 2.0.0-alpha.6 → 2.0.0-alpha.60

package/dist/patterns/ActivityTimeline/ActivityTimeline.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ActivityTimelineProps } from './types';
+export declare const ActivityTimeline: React.FC<ActivityTimelineProps>;

package/dist/patterns/ActivityTimeline/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivityTimeline } from './ActivityTimeline';
+export type { ActivityTimelineProps, ActivityTimelineEvent } from './types';

package/dist/patterns/ActivityTimeline/styles.d.ts

@@ -0,0 +1,15 @@
+export declare const activityTimelineClass: {
+    readonly list: "m-0 list-none p-0 pl-0.5";
+    readonly event: "flex gap-3.5";
+    readonly eventSpaced: "pb-4";
+    readonly rail: "flex flex-none flex-col items-center";
+    readonly dot: "mt-[0.3125rem] size-2.5 rounded-full";
+    readonly connector: "mt-1 w-[1.5px] flex-1 bg-pos-hair";
+    readonly body: "min-w-0 flex-1 pb-0.5";
+    readonly head: "flex min-w-0 flex-wrap items-baseline gap-x-3";
+    readonly title: "min-w-0 text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere]";
+    readonly timestamp: "ml-auto min-w-0 max-w-full text-[0.8125rem] tabular-nums text-default-500 [overflow-wrap:anywhere]";
+    readonly detail: "mt-[0.1875rem] min-w-0 text-[0.84375rem] leading-[1.5] text-default-500 [overflow-wrap:anywhere]";
+    readonly actor: "mt-[0.1875rem] min-w-0 text-[0.78125rem] text-default-500 [overflow-wrap:anywhere]";
+    readonly empty: "text-[0.875rem] text-default-500";
+};

package/dist/patterns/ActivityTimeline/types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface ActivityTimelineEvent {
+    id: string;
+    tone: RecordTone;
+    title: ReactNode;
+    timestamp: ReactNode;
+    detail?: ReactNode;
+    actor?: ReactNode;
+}
+export interface ActivityTimelineProps {
+    events: ActivityTimelineEvent[];
+    emptyContent?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/AdminTable/AdminTable.d.ts

@@ -35,6 +35,7 @@ export interface AdminTableProps {
     footer?: React.ReactNode;
     /** Accessible name. Required: a table with no name is unnavigable by screen reader. */
     ariaLabel: string;
+    variant?: 'default' | 'framed';
     className?: string;
     classNames?: AdminTableClassNames;
     'data-testid'?: string;

package/dist/patterns/AdminTable/styles.d.ts

@@ -10,7 +10,8 @@
  *
  * They are exported for the one screen that cannot use `AdminTable`: react-aria's
  * collection API rejects an interleaved `<tr>`, so a table that expands a row
- * into a full-width panel renders its own `<table>` and dresses it with these.
+ * into a full-width panel renders its own `<table>` and dresses it with these
+ * (`ExpandableTable` does, and so does the accounting ledger).
  *
  * The arbitrary values (`text-[11px]`, `tracking-[.04em]`) are the mockups'
  * measurements, pinned rather than rounded to the nearest scale step: these
@@ -42,3 +43,9 @@ export declare const adminRowClass = "border-t border-acct-hair transition-color
 export declare const adminTableClass = "w-full";
 /** The strip under the table where a pager sits. */
 export declare const adminTableFooterClass = "border-t border-acct-border px-5 py-3.5";
+export declare const adminTableFramedClass: {
+    readonly base: "overflow-x-auto";
+    readonly th: "h-auto whitespace-nowrap border-b border-pos-hair bg-transparent px-4 py-[0.875rem] text-left text-[0.6875rem] font-semibold uppercase leading-[1.5] tracking-[.055em] text-default-500 first:rounded-none last:rounded-none last:pr-3";
+    readonly tr: "border-t border-pos-hair transition-colors duration-[120ms] first:border-t-0 data-[focus-visible=true]:outline-offset-[-2px] [tbody>&]:hover:bg-default-50 [tbody>&]:data-[hover=true]:bg-default-50 motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly td: "h-[3.875rem] px-4 data-[focus-visible=true]:outline-offset-[-2px] py-[0.625rem] align-middle text-[0.875rem] text-default-900 last:pr-3";
+};

package/dist/patterns/AdminTextField/AdminTextField.d.ts

@@ -1,53 +1,13 @@
 import { default as React } from 'react';
+import { AdminFieldLabelProps, AdminTextFieldProps } from './types';
 /**
  * The uppercase field label, standalone — for a control this component does
  * not cover (a checkbox group, a read-only preview) that should still be
  * captioned like every other admin field. `suffix` is the lighter tail:
  * "· optional", "· auto-generated, immutable".
- */
-export declare const AdminFieldLabel: React.FC<{
-    children: React.ReactNode;
-    suffix?: React.ReactNode;
-    className?: string;
-    'data-testid'?: string;
-}>;
-interface AdminTextFieldBase {
-    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
-    label?: React.ReactNode;
-    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
-    labelSuffix?: React.ReactNode;
-    value: string;
-    placeholder?: string;
-    disabled?: boolean;
-    /** Monospace face without the read-only treatment, for codes the user types. */
-    mono?: boolean;
-    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
-    autoFocus?: boolean;
-    /** Small helper or error text under the control. */
-    hint?: React.ReactNode;
-    /** Renders the hint as an error and marks the control invalid. */
-    invalid?: boolean;
-    className?: string;
-    'data-testid'?: string;
-}
-/**
- * `onChange` is REQUIRED unless the field is read-only.
- *
- * This is a controlled input: given a `value` and no handler, React pins it and
- * typing does nothing — a field that looks editable, accepts focus, and silently
- * discards every keystroke. That is indistinguishable from a bug at a glance,
- * and it is what happens by accident when someone renders one to show a value.
  *
- * Showing a value without accepting edits is a real case, so it stays possible;
- * it just has to be said, with `readOnly`, which also renders it as system-owned
- * and announces it correctly.
+ * `isRequired` adds a visible `*` and the screen-reader `requiredLabel`;
+ * `help` adds an ⓘ that opens it in a popover, kept outside the label text.
  */
-export type AdminTextFieldProps = AdminTextFieldBase & ({
-    readOnly: true;
-    onChange?: never;
-} | {
-    readOnly?: false;
-    onChange: (value: string) => void;
-});
+export declare const AdminFieldLabel: React.FC<AdminFieldLabelProps>;
 export declare const AdminTextField: React.FC<AdminTextFieldProps>;
-export {};

package/dist/patterns/AdminTextField/index.d.ts

@@ -1,3 +1,3 @@
 export { AdminFieldLabel, AdminTextField } from './AdminTextField';
-export type { AdminTextFieldProps } from './AdminTextField';
-export { adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';
+export type { AdminTextFieldProps, AdminFieldLabelProps, AdminFieldRequiredProps, AdminFieldHelpProps } from './types';
+export { adminFieldErrorClass, adminFieldHelpButtonClass, adminFieldHelpContentClass, adminFieldHelpIconClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelNoAutoMarkClass, adminFieldLabelRowClass, adminFieldLabelSuffixClass, adminFieldRequiredClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';

package/dist/patterns/AdminTextField/styles.d.ts

@@ -22,6 +22,35 @@ export declare const adminFieldLabelClass = "text-[11px] font-semibold uppercase
  * aside, not as part of the field's name.
  */
 export declare const adminFieldLabelSuffixClass = "font-normal normal-case tracking-normal";
+/**
+ * The visible `*` of a required field. `after:content-none` switches off the
+ * `*` HeroUI's own `isRequired` paints into its label slot, so there is one
+ * mark, the one carrying the screen-reader word.
+ */
+export declare const adminFieldRequiredClass = "ms-0.5 text-acct-danger";
+/**
+ * The label row a field with `help` draws itself, in place of HeroUI's.
+ * HeroUI pushes its box down by `font-size-small + 10px` (24px) to make room
+ * for its outside label; this row takes the same height from the same
+ * variable, so a field with help and one without line up in a form row.
+ * `min-h` rather than `h`, so a label that wraps grows the row instead of
+ * running into the box.
+ *
+ * `text-foreground` because that is the color HeroUI's label actually renders
+ * in above the box (`group-data-[filled-within=true]:text-foreground` beats
+ * the `text-acct-muted` it is given), measured at `rgb(17, 24, 28)`.
+ */
+export declare const adminFieldLabelRowClass = "mb-0 min-h-[calc(var(--heroui-font-size-small)_+_10px)] text-foreground";
+/** Added to HeroUI's `label` slot so its `isRequired` mark does not double ours. */
+export declare const adminFieldLabelNoAutoMarkClass = "after:content-none";
+/**
+ * The ⓘ that opens a field's help: a 24px round hit target (WCAG 2.5.8) whose
+ * negative margin keeps the 11px label row from growing to fit it.
+ */
+export declare const adminFieldHelpButtonClass = "ms-0.5 -my-1.5 size-6 min-w-6 align-middle text-acct-sub data-[hover=true]:bg-acct-page data-[hover=true]:text-acct-ink";
+export declare const adminFieldHelpIconClass = "size-4";
+/** The popover the ⓘ opens. Body copy, so sentence case and ink. */
+export declare const adminFieldHelpContentClass = "max-w-xs rounded-xl px-3 py-2 text-xs leading-normal text-acct-ink2";
 /**
  * The 38px box — HeroUI's `inputWrapper` slot, which carries the border and
  * background (the `input` slot is the bare field).

package/dist/patterns/AdminTextField/types.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+/**
+ * The required mark. Plain optional props rather than a union that forces
+ * `requiredLabel` with `isRequired`: a union collapses under
+ * `Omit<AdminTextFieldProps, …>`, so every wrapper that forwards props would
+ * stop compiling.
+ */
+export interface AdminFieldRequiredProps {
+    /** Adds a visible `*` after the label (and its suffix). */
+    isRequired?: boolean;
+    /**
+     * The word screen readers hear for the `*` ("required", "obligatoire").
+     * Pass it with `isRequired`: the `*` itself is hidden from them.
+     */
+    requiredLabel?: string;
+}
+/** Help on demand: an ⓘ button after the label that opens it in a popover. */
+export interface AdminFieldHelpProps {
+    help?: React.ReactNode;
+    /** Accessible name of the ⓘ ("About timezone"). Without it the ⓘ is named by the label text. */
+    helpLabel?: string;
+}
+export interface AdminFieldLabelProps extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    children: React.ReactNode;
+    /** The lighter tail: "· optional", "· auto-generated, immutable". */
+    suffix?: React.ReactNode;
+    /**
+     * `id` of the control this captions. The text then renders as a real
+     * `<label>`, so clicking it focuses the control. The ⓘ stays outside it.
+     */
+    htmlFor?: string;
+    /** `id` of the text element, for a group to point `aria-labelledby` at. */
+    id?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+export interface AdminTextFieldBase extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
+    label?: React.ReactNode;
+    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
+    labelSuffix?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Monospace face without the read-only treatment, for codes the user types. */
+    mono?: boolean;
+    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
+    autoFocus?: boolean;
+    /** Small helper or error text under the control. */
+    hint?: React.ReactNode;
+    /** Renders the hint as an error and marks the control invalid. */
+    invalid?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * `onChange` is REQUIRED unless the field is read-only.
+ *
+ * This is a controlled input: given a `value` and no handler, React pins it and
+ * typing does nothing — a field that looks editable, accepts focus, and silently
+ * discards every keystroke. That is indistinguishable from a bug at a glance,
+ * and it is what happens by accident when someone renders one to show a value.
+ *
+ * Showing a value without accepting edits is a real case, so it stays possible;
+ * it just has to be said, with `readOnly`, which also renders it as system-owned
+ * and announces it correctly.
+ *
+ * `isRequired` / `help` behave as on {@link AdminFieldLabelProps}, and are
+ * ignored without a `label`. `isRequired` also marks the input
+ * `aria-required`, without the browser's own `required` validation.
+ */
+export type AdminTextFieldProps = AdminTextFieldBase & ({
+    readOnly: true;
+    onChange?: never;
+} | {
+    readOnly?: false;
+    onChange: (value: string) => void;
+});

package/dist/patterns/AdminToolbar/AdminToolbar.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { AdminToolbarSearchWidth, AdminToolbarSize } from './types';
 export interface AdminToolbarProps {
     searchValue: string;
     onSearchChange: (value: string) => void;
@@ -8,12 +9,22 @@ export interface AdminToolbarProps {
     searchPlaceholder?: string;
     /** Leading glyph inside the search box. */
     searchIcon?: React.ReactNode;
+    /** Shows a clear button inside the search box while it holds text. Off by default. */
+    searchClearable?: boolean;
+    /** The clear button's accessible name. `'Clear search'` by default; pass a translation. */
+    clearLabel?: string;
     /** Filters, sort pickers, a toggle — laid out after the search box. */
     children?: React.ReactNode;
     /** Pushed to the far right, for a primary action. */
     trailing?: React.ReactNode;
-    /** Search box width. `'md'` (280px) by default, `'lg'` (360px) for wide tables. */
-    searchWidth?: 'md' | 'lg';
+    /**
+     * Search box width. `'md'` (280px; 250px framed) by default, `'lg'` (360px)
+     * for wide tables, `'fill'` to grow into the space the row leaves.
+     */
+    searchWidth?: AdminToolbarSearchWidth;
+    /** `'lg'` is the 48px touch field with 16px text; `'md'` (default) keeps each variant's own height. */
+    size?: AdminToolbarSize;
+    variant?: 'default' | 'framed';
     className?: string;
     'data-testid'?: string;
 }

package/dist/patterns/AdminToolbar/index.d.ts

@@ -1,2 +1,3 @@
 export { AdminToolbar } from './AdminToolbar';
 export type { AdminToolbarProps } from './AdminToolbar';
+export type { AdminToolbarSearchWidth, AdminToolbarSize } from './types';

package/dist/patterns/AdminToolbar/styles.d.ts

@@ -0,0 +1,49 @@
+import { AdminToolbarSearchWidth, AdminToolbarSize } from './types';
+/** The default variant: a pixel-port of the accounting mockups, so its values stay in px. */
+export declare const DEFAULT_CLASS: {
+    readonly base: "flex flex-wrap items-center gap-3 mb-4";
+    readonly trailing: "ml-auto";
+    readonly icon: "flex text-acct-muted";
+    readonly inputWrapper: string;
+    readonly input: "text-[13.5px] text-acct-ink";
+};
+export declare const DEFAULT_SEARCH_WIDTH: Record<AdminToolbarSearchWidth, string>;
+export declare const FRAMED_WIDE_REM = 48;
+export declare const FRAMED_CLASS: {
+    readonly base: "flex flex-wrap items-center gap-2.5 border-b border-pos-hair px-4 py-[0.875rem]";
+    readonly narrow: "[&_[data-slot=filter-select-group]]:flex [&_[data-slot=filter-select-group]]:flex-wrap [&_[data-slot=filter-select-group]]:!max-w-none [&_[data-slot=filter-select]]:!max-w-none [&_[data-slot=filter-select]]:!min-w-[calc(50%-0.3125rem)] [&_[data-slot=filter-select]]:grow [&_[data-slot=filter-select]]:basis-[calc(50%-0.3125rem)]";
+    readonly searchWide: "ml-auto";
+    /** Fill wins over the narrow rule: it already takes the row, and keeps a trailing action beside it until 12.5rem. */
+    readonly searchFill: "min-w-[12.5rem] flex-1";
+    readonly searchNarrow: "basis-full";
+    readonly inputBaseNarrow: "w-full";
+    readonly inputWrapper: "h-[2.375rem] min-h-[2.375rem] !h-[2.375rem] rounded-[0.625rem] border border-pos-field bg-white pl-3 pr-3 shadow-none data-[hover=true]:border-pos-field group-data-[focus=true]:border-primary";
+    readonly innerWrapper: "gap-[0.3125rem]";
+    readonly input: "text-ellipsis text-[0.875rem] text-default-900 data-[has-start-content=true]:ps-0.5";
+    readonly icon: "flex text-default-400 [&_svg]:size-4";
+};
+export declare const FRAMED_SEARCH_WIDTH: Record<AdminToolbarSearchWidth, string>;
+/**
+ * `lg` is the POS register's touch row: a 48px field with 16px text and a 20px
+ * glyph, in rem so the text-size setting scales it. Merged after either
+ * variant's own classes, so it overrides their height and type only.
+ */
+export declare const LG_CLASS: {
+    readonly inputWrapper: "h-12 min-h-12 !h-12";
+    readonly input: "text-base";
+    readonly icon: "[&_svg]:size-5";
+};
+/**
+ * The clear control: a DS `Button`, so it is in the tab order and takes a
+ * translated name, unlike HeroUI's `isClearable` (tabIndex -1, English label).
+ * 32px inside the 38–40px fields, 44px inside the 48px one.
+ */
+export declare const CLEAR_CLASS: {
+    readonly button: "shrink-0 text-default-500";
+    /** The browser's own search "x" would sit beside ours. */
+    readonly input: "[&::-webkit-search-cancel-button]:appearance-none";
+};
+export declare const CLEAR_SIZE_CLASS: Record<AdminToolbarSize, {
+    button: string;
+    icon: string;
+}>;

package/dist/patterns/AdminToolbar/types.d.ts

@@ -0,0 +1,2 @@
+export type AdminToolbarSearchWidth = 'md' | 'lg' | 'fill';
+export type AdminToolbarSize = 'md' | 'lg';

package/dist/patterns/AmountList/AmountList.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { AmountListProps } from './types';
+export declare const AmountList: React.FC<AmountListProps>;

package/dist/patterns/AmountList/index.d.ts

@@ -0,0 +1,2 @@
+export { AmountList } from './AmountList';
+export type { AmountListProps, AmountListRow } from './types';

package/dist/patterns/AmountList/styles.d.ts

@@ -0,0 +1,23 @@
+export declare const amountListClass: {
+    readonly base: "w-full";
+    readonly list: "m-0 list-none p-0";
+    readonly item: "border-t border-pos-hair";
+    readonly row: "flex w-full items-start gap-3 px-5 py-3 text-left";
+    readonly rowInteractive: "cursor-pointer outline-none transition-colors hover:bg-default-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly dot: "mt-[0.4375rem] size-[0.4375rem] shrink-0 rounded-full";
+    readonly body: "flex min-w-0 flex-1 flex-col";
+    readonly title: "text-[0.875rem] font-semibold text-default-900 [overflow-wrap:anywhere] [text-wrap:pretty]";
+    readonly meta: "mt-1 flex min-w-0 flex-wrap items-center gap-[0.4375rem] text-[0.78125rem] text-default-500";
+    readonly reference: "min-w-0 font-normal text-primary [overflow-wrap:anywhere]";
+    readonly separator: "text-default-400";
+    readonly timestamp: "tabular-nums";
+    readonly detail: "mt-[0.1875rem] text-[0.78125rem] text-default-500 [overflow-wrap:anywhere] [text-wrap:pretty]";
+    readonly trailing: "max-w-[45%] min-w-min shrink-0 text-right text-[0.90625rem]";
+    readonly amount: "whitespace-nowrap text-[0.90625rem] font-bold tabular-nums text-default-900";
+    readonly note: "text-[0.78125rem] italic text-default-500 [overflow-wrap:anywhere]";
+    readonly footer: "flex items-baseline gap-3 border-t border-pos-line bg-pos-page px-5 py-[0.8125rem]";
+    readonly footerLabel: "min-w-0 text-[0.875rem] font-bold text-default-900 [overflow-wrap:anywhere]";
+    readonly footerAmount: "ml-auto whitespace-nowrap text-[1rem] font-bold tabular-nums text-default-900";
+    readonly footerNote: "border-t border-pos-hair px-5 py-[0.8125rem] text-[0.78125rem] leading-[1.6] text-default-500";
+    readonly empty: "px-5 pb-5 pt-[0.875rem] text-[0.875rem] text-default-500";
+};

package/dist/patterns/AmountList/types.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface AmountListRow {
+    id: string;
+    tone: RecordTone;
+    title: ReactNode;
+    reference?: ReactNode;
+    timestamp?: ReactNode;
+    detail?: ReactNode;
+    amount?: ReactNode;
+    amountTone?: 'positive' | 'negative' | 'neutral';
+    note?: ReactNode;
+    noteTone?: 'muted' | 'warn';
+}
+export interface AmountListProps {
+    rows: AmountListRow[];
+    footer?: {
+        label: ReactNode;
+        amount: ReactNode;
+        amountTone?: 'positive' | 'negative' | 'neutral';
+        note?: ReactNode;
+    };
+    emptyContent?: ReactNode;
+    onSelect?: (id: string) => void;
+    'data-testid'?: string;
+}

package/dist/patterns/AssistantActivity/AssistantActivity.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { AssistantActivityProps } from './types';
+/**
+ * The steps an assistant took for one turn, one row per finished step: done
+ * or failed, with how long it took. A HeroUI `Accordion` with a single item,
+ * so the group collapses under its title. Animation is off when the person
+ * prefers reduced motion.
+ *
+ * Renders nothing when `items` is empty.
+ */
+export declare function AssistantActivity({ items, title, titleText, isExpanded, defaultExpanded, onExpandedChange, stateLabels, formatDuration, className, 'data-testid': dataTestId, }: AssistantActivityProps): JSX.Element | null;
+export declare namespace AssistantActivity {
+    var displayName: string;
+}
+export default AssistantActivity;

package/dist/patterns/AssistantActivity/formatAssistantDuration.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A short, unit-suffixed duration for activity rows and running clocks:
+ * `320 ms`, `1.2 s`, `12 s`, `2 min 05 s`.
+ *
+ * Unit words are SI symbols (`ms`, `s`) and the SI-accepted `min`, so there is
+ * nothing to translate; pass your own formatter where a locale needs a
+ * different decimal mark. Every step truncates, so a value never shows as the
+ * next unit up before it gets there (999.6 ms is `999 ms`, not `1000 ms`).
+ */
+export declare function formatAssistantDuration(ms: number): string;

package/dist/patterns/AssistantActivity/index.d.ts

@@ -0,0 +1,3 @@
+export { AssistantActivity } from './AssistantActivity';
+export { formatAssistantDuration } from './formatAssistantDuration';
+export type { AssistantActivityItem, AssistantActivityProps, AssistantActivityState } from './types';

package/dist/patterns/AssistantActivity/styles.d.ts

@@ -0,0 +1,31 @@
+import { AssistantActivityState } from './types';
+/**
+ * Every slot class of `AssistantActivity`. Semantic HeroUI colours only, so
+ * the group flips under `.dark` with no dark values of its own.
+ */
+export declare const assistantActivityClass: {
+    readonly base: "w-full px-0";
+    readonly item: "shadow-none";
+    readonly trigger: "gap-2 py-1.5";
+    readonly title: "text-sm font-medium text-default-700";
+    readonly indicator: "text-default-500";
+    readonly content: "pb-2 pt-0";
+    readonly list: "m-0 flex list-none flex-col gap-1.5 p-0";
+    readonly row: "flex min-w-0 items-start gap-2 text-sm";
+    readonly icon: "mt-0.5 flex-none";
+    readonly label: "min-w-0 flex-1 text-foreground [overflow-wrap:anywhere]";
+    /**
+     * HeroUI's flat danger chip is `text-danger-600 dark:text-danger-500`,
+     * which measures 4.25:1 on its own fill in dark. The 700 step clears AA in
+     * both themes (HeroUI's dark scale is reversed, so it is a light tint
+     * there); the `dark:` repeat is what overrides HeroUI's `dark:` class.
+     */
+    readonly failed: "flex-none text-danger-700 dark:text-danger-700";
+    readonly duration: "mt-px flex-none text-xs tabular-nums text-default-500";
+    /** "Done:" before a done row, for screen readers only. */
+    readonly stateLabel: "sr-only";
+};
+export declare const assistantActivityStateIcon: Record<AssistantActivityState, {
+    icon: string;
+    className: string;
+}>;

package/dist/patterns/AssistantActivity/types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+/**
+ * How a step ended. There is no running state on purpose: a step is listed
+ * once it has finished, and the panel's own "working" notice carries the wait.
+ */
+export type AssistantActivityState = 'done' | 'failed';
+export interface AssistantActivityItem {
+    /** Stable key; also the row's `data-testid` suffix. */
+    id: string;
+    /** What the step did, in plain words ("Searched emails · last 60 days"). */
+    label: ReactNode;
+    /** How the step ended. */
+    state: AssistantActivityState;
+    /** How long it took. Omitted, no duration is shown. */
+    durationMs?: number;
+}
+export interface AssistantActivityProps {
+    /** The finished steps, in the order to show. Empty, nothing renders. */
+    items: AssistantActivityItem[];
+    /** The group's heading and toggle text, e.g. "Read 4 sources". */
+    title: ReactNode;
+    /**
+     * Plain-text `title`, for type-to-select and assistive tech. Needed when
+     * `title` is not a string (React Aria warns otherwise); a string `title` is
+     * used as is.
+     */
+    titleText?: string;
+    /** Controlled open state. */
+    isExpanded?: boolean;
+    /** Uncontrolled initial state. Defaults to open. */
+    defaultExpanded?: boolean;
+    /** Called when the group opens or closes. */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /** Words for each state. `done` is read by screen readers only; `failed` is shown. Default "Done" / "Failed". */
+    stateLabels?: Partial<Record<AssistantActivityState, string>>;
+    /** Formats `durationMs`. Defaults to `formatAssistantDuration`. */
+    formatDuration?: (ms: number) => string;
+    /** Classes on the accordion. */
+    className?: string;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `assistant-activity`. */
+    'data-testid'?: string;
+}

package/dist/patterns/AssistantComposer/AssistantComposer.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { AssistantComposerProps } from './types';
+/**
+ * Where a person types to an assistant: an autosizing field, a Send button
+ * that turns into Stop while a turn runs, and optional suggestion pills that
+ * fill the field without sending.
+ *
+ * Enter sends; Shift+Enter adds a line. Enter that confirms an IME
+ * composition (Japanese, Chinese, Korean input) is left to the IME.
+ */
+export declare function AssistantComposer({ value, onValueChange, onSubmit, onStop, isRunning, isStopDisabled, isDisabled, label, placeholder, description, sendLabel, stopLabel, suggestions, suggestionsLabel, onSuggestionSelect, maxLength, minRows, maxRows, className, 'data-testid': dataTestId, }: AssistantComposerProps): JSX.Element;
+export declare namespace AssistantComposer {
+    var displayName: string;
+}
+export default AssistantComposer;

package/dist/patterns/AssistantComposer/index.d.ts

@@ -0,0 +1,2 @@
+export { AssistantComposer } from './AssistantComposer';
+export type { AssistantComposerProps, AssistantComposerSuggestion } from './types';

package/dist/patterns/AssistantComposer/styles.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Every slot class of `AssistantComposer`. HeroUI semantic colours plus
+ * `ai-focus` for the field's focus border, so it works under `.dark`.
+ */
+export declare const assistantComposerClass: {
+    readonly base: "flex w-full min-w-0 flex-col gap-2";
+    readonly suggestions: "flex flex-wrap gap-2";
+    /**
+     * Pill tones are set here rather than taken from HeroUI's flat variant,
+     * whose text tone differs between HeroUI versions and read dim on a dark
+     * card in an app on HeroUI 2.7. Measured in both themes in the stories.
+     */
+    readonly suggestion: "h-auto min-h-8 max-w-full whitespace-normal bg-default-100 py-1.5 text-left text-foreground data-[hover=true]:bg-default-200";
+    readonly row: "flex min-w-0 items-end gap-2";
+    readonly field: "min-w-0 flex-1";
+    /**
+     * The focus border is `ai-focus` with the pointer over the field too:
+     * HeroUI's bordered variant has its own focused-and-hovered rule
+     * (`border-default-foreground`, black in light and white in dark), more
+     * specific than the focus one, so it is replaced here by name.
+     */
+    readonly inputWrapper: "border-default-200 bg-content1 data-[hover=true]:border-default-300 group-data-[focus=true]:border-ai-focus group-data-[focus=true]:data-[hover=true]:border-ai-focus";
+    readonly input: "text-sm text-foreground placeholder:text-default-500";
+    /**
+     * The hint sits under the whole row, not inside the field's column: inside
+     * it, a long hint pushed the bottom-aligned button down beside the hint.
+     * Our own element, so its tone is ours too: `default-500` clears 4.5:1 in
+     * both themes (HeroUI's description slot is `foreground-400`, 2.56:1).
+     */
+    readonly helper: "m-0 flex w-full justify-between gap-2 text-xs text-default-500";
+    readonly count: "ms-auto flex-none tabular-nums";
+    readonly button: "flex-none";
+};

package/dist/patterns/AssistantComposer/types.d.ts

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+/** A ready-made question shown as a pill above the field. */
+export interface AssistantComposerSuggestion {
+    /** Stable key; also the pill's `data-testid` suffix. */
+    key: string;
+    /** What the pill says. */
+    label: string;
+    /** What it puts in the field. Defaults to `label`. Cut to `maxLength` when the composer has one. */
+    prompt?: string;
+}
+export interface AssistantComposerProps {
+    /** The field's text. Controlled: pair it with `onValueChange`. */
+    value: string;
+    /** Called with the new text on every change, and when a suggestion fills the field. */
+    onValueChange: (value: string) => void;
+    /**
+     * Enter or the send button, while not running or disabled, with the text
+     * trimmed. It does not fire when the trimmed text is empty or the value is
+     * longer than `maxLength`.
+     */
+    onSubmit: (value: string) => void;
+    /** Shown as a Stop button in place of Send while `isRunning`. Omitted, Send is just disabled. */
+    onStop?: () => void;
+    /** A turn is running: Enter does nothing and Send becomes Stop. The field stays editable. */
+    isRunning?: boolean;
+    /**
+     * Keeps Stop in place but disabled, e.g. while a stop the person asked for
+     * is being carried out. A disabled Stop fires no `onStop`.
+     */
+    isStopDisabled?: boolean;
+    /** Disables the field, the pills and Send together. */
+    isDisabled?: boolean;
+    /** The field's accessible name. Required, and distinct from `placeholder`. */
+    label: string;
+    /** Example text inside the empty field, e.g. "Ask about this account". Not a substitute for `label`. */
+    placeholder?: string;
+    /** A hint under the field, e.g. how Enter and Shift+Enter behave. */
+    description?: ReactNode;
+    /** Name of the send button. Defaults to "Send". */
+    sendLabel?: string;
+    /** Name of the stop button. Defaults to "Stop". */
+    stopLabel?: string;
+    /** Pills that fill the field when picked. They never send. */
+    suggestions?: AssistantComposerSuggestion[];
+    /** Name of the suggestions group. Defaults to "Suggestions". */
+    suggestionsLabel?: string;
+    /** Called after a pill has filled the field. */
+    onSuggestionSelect?: (suggestion: AssistantComposerSuggestion) => void;
+    /**
+     * Caps the field and shows a `n/max` count under it. A longer suggestion is
+     * cut to it, and Send stays disabled while a controlled `value` is over it.
+     */
+    maxLength?: number;
+    /** Autosize lower bound, in rows. Defaults to 2. */
+    minRows?: number;
+    /** Autosize upper bound, in rows; past it the field scrolls. Defaults to 8. */
+    maxRows?: number;
+    /** Classes on the root `<form>`. */
+    className?: string;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `assistant-composer`. */
+    'data-testid'?: string;
+}