@veevarts/design-system 2.0.0-beta.7 → 2.0.0-csm.1

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

@@ -42,3 +42,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/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/ArtifactCard/ArtifactCard.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react';
+import { ArtifactCardProps } from './types';
+/**
+ * A saved artifact (a table, a chart, a report) shown in a conversation or a
+ * list: kind, title, a preview, its save status in words, and the caller's
+ * actions. A HeroUI `Card`.
+ *
+ * The status line is one polite live region whose role never changes, so
+ * "Saving…" turning into "Saved" or "Couldn't save" is announced once, and a
+ * card that mounts already failed (a conversation reopened) interrupts no one.
+ * An assertive error belongs to `AssistantNotice`, as in the rest of the
+ * family. A failed save keeps its preview, so the work stays in view; a
+ * deleted one drops it.
+ */
+export declare function ArtifactCard({ title, kindLabel, icon, status, statusLabel, meta, badge, children, actions, titleAs: TitleElement, className, 'data-testid': dataTestId, }: ArtifactCardProps): JSX.Element;
+export declare namespace ArtifactCard {
+    var displayName: string;
+}
+export default ArtifactCard;

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

@@ -0,0 +1,2 @@
+export { ArtifactCard } from './ArtifactCard';
+export type { ArtifactCardProps, ArtifactCardStatus } from './types';

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

@@ -0,0 +1,31 @@
+import { ArtifactCardStatus } from './types';
+/**
+ * Every slot class of `ArtifactCard`. HeroUI semantic colours only, so the
+ * card works under `.dark`: `content1` card, `divider` edges, `foreground`
+ * text, `default-600` secondary text (it also sits on `default-100`, where
+ * `default-500` falls under 4.5:1). Status tones use the 700 step, which
+ * stays readable in both themes because HeroUI's dark scales are reversed.
+ */
+export declare const artifactCardClass: {
+    readonly base: "w-full border border-default-200 bg-content1 shadow-none";
+    readonly deleted: "border-dashed";
+    readonly header: "flex flex-col items-start gap-1 px-4 pb-0 pt-3";
+    readonly kindRow: "flex min-w-0 flex-wrap items-center gap-2 text-xs text-default-600";
+    readonly kind: "inline-flex items-center gap-1.5 font-medium";
+    readonly badge: "inline-flex items-center gap-1 rounded-md border border-default-300 bg-default-100 px-1.5 py-0.5 text-[0.6875rem] font-semibold uppercase tracking-wide text-default-700";
+    readonly title: "m-0 min-w-0 text-sm font-semibold text-foreground [overflow-wrap:anywhere]";
+    readonly titleDeleted: "text-default-600";
+    readonly meta: "text-xs tabular-nums text-default-600 [overflow-wrap:anywhere]";
+    readonly body: "min-w-0 px-4 py-3";
+    readonly skeleton: "flex flex-col gap-2";
+    readonly skeletonLine: "h-3 rounded-md";
+    /** Three lines of a preview that has not arrived yet. */
+    readonly skeletonWidths: readonly ["w-3/4", "w-full", "w-2/3"];
+    readonly footer: "flex flex-wrap items-center justify-between gap-2 border-t border-divider px-4 py-2.5";
+    readonly status: "flex min-w-0 items-center gap-1.5 text-xs font-medium [overflow-wrap:anywhere]";
+    /** HeroUI's small spinner is 20px; sized to the 14px status icons so the footer keeps its height when the save ends. */
+    readonly spinner: "size-3.5";
+    readonly actions: "flex flex-wrap items-center gap-1.5";
+};
+export declare const artifactCardStatusClass: Record<ArtifactCardStatus, string>;
+export declare const ARTIFACT_CARD_STATUS_ICON: Record<Exclude<ArtifactCardStatus, 'saving'>, string>;

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+/**
+ * Where a saved artifact stands. `saving` while it is written, `saved` once
+ * it is kept, `failed` when it could not be saved (too large, an error), and
+ * `deleted` once its owner removed it.
+ */
+export type ArtifactCardStatus = 'saving' | 'saved' | 'failed' | 'deleted';
+export interface ArtifactCardProps {
+    /** The artifact's title, e.g. "Renewals in Q1 with red health". */
+    title: string;
+    /** What kind of artifact it is, e.g. "Table", "Chart", "Report". */
+    kindLabel: string;
+    /** Iconify name for the kind. */
+    icon?: string;
+    /** Defaults to `saved`. */
+    status?: ArtifactCardStatus;
+    /**
+     * The status in words, always shown: "Saved · private to you", "Saving…",
+     * "Couldn't save: the report is over the size limit", "Deleted".
+     */
+    statusLabel: ReactNode;
+    /** A short line under the title, e.g. "12 rows · 4 columns". */
+    meta?: ReactNode;
+    /** A small marker next to the kind, e.g. "Internal". Styled by the card so it reads the same everywhere. */
+    badge?: ReactNode;
+    /** A preview: the first rows, a small chart, the first lines. Hidden once `deleted`; a skeleton while `saving` without one. */
+    children?: ReactNode;
+    /** Controls (Open, Download, Delete, a narrower request). Rendered as given. */
+    actions?: ReactNode;
+    /** The title's element. Defaults to `p`; pick a heading that fits the page's outline. */
+    titleAs?: 'h2' | 'h3' | 'h4' | 'p';
+    className?: string;
+    '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,37 @@
+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;
+    state: AssistantActivityState;
+    /** How long it took. Omitted, no duration is shown. */
+    durationMs?: number;
+}
+export interface AssistantActivityProps {
+    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;
+    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;
+    className?: string;
+    '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,27 @@
+/**
+ * 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";
+    readonly inputWrapper: "border-default-200 bg-content1 data-[hover=true]:border-default-300 group-data-[focus=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,48 @@
+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`. */
+    prompt?: string;
+}
+export interface AssistantComposerProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Enter or the send button, with a non-empty value, while not running or disabled. */
+    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;
+    isDisabled?: boolean;
+    /** The field's accessible name. Required, and distinct from `placeholder`. */
+    label: string;
+    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. */
+    maxLength?: number;
+    /** Autosize bounds. Default 2 and 8 rows. */
+    minRows?: number;
+    maxRows?: number;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/AssistantMarkdown/AssistantMarkdown.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from 'react';
+import { AssistantMarkdownProps } from './types';
+/**
+ * An assistant's answer, rendered from a safe Markdown subset: headings,
+ * paragraphs, lists, bold and italic, inline code, code blocks, tables,
+ * blockquotes and links. No raw HTML, no images, no auto-linked URLs; links
+ * open in a new tab, show their domain, and pass `linkPolicy` first.
+ *
+ * markdown-it parses (a peer dependency, shared with `@tiptap/pm`); every
+ * token is turned into a React element from an allowlist, and nothing reaches
+ * the DOM as HTML.
+ */
+export declare function AssistantMarkdown({ source, linkPolicy, headingOffset, renderCitation, newTabLabel, tableLabel, codeLabel, className, 'data-testid': dataTestId, }: AssistantMarkdownProps): JSX.Element;
+export declare namespace AssistantMarkdown {
+    var displayName: string;
+}
+export default AssistantMarkdown;

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

@@ -0,0 +1,3 @@
+export { AssistantMarkdown } from './AssistantMarkdown';
+export { defaultAssistantLinkPolicy } from './parser';
+export type { AssistantMarkdownLinkPolicy, AssistantMarkdownProps } from './types';

package/dist/patterns/AssistantMarkdown/parser.d.ts

@@ -0,0 +1,37 @@
+import { default as MarkdownIt } from 'markdown-it';
+import { AssistantMarkdownLinkPolicy } from './types';
+/** markdown-it's token, without importing a deep path that the bundle would also have to keep external. */
+export type MarkdownToken = ReturnType<MarkdownIt['parse']>[number];
+/** One shared parser: building one is the costly part, and its settings never change. */
+export declare function assistantMarkdownParser(): MarkdownIt;
+/**
+ * The href a rendered link may carry, so the domain shown next to it is where
+ * it goes. `AssistantMarkdown` applies it to whatever the link policy returns,
+ * the default or the caller's.
+ * - An `http(s):` href must name its host (`https://…`), and comes back in its
+ *   canonical form, so the domain shown and the target are read from one
+ *   string. `https:evil.example` and `https:/evil.example` read as evil.example
+ *   on their own, but a browser resolves them against the page, as paths on
+ *   the page's own origin: refused (`null`).
+ * - An href with no scheme that names a host (`//evil.example`) leaves the
+ *   page, but no domain can be shown for it: refused.
+ * - Anything else (a `mailto:`, a path on the app) is returned as is.
+ */
+export declare function checkedLinkHref(href: string): string | null;
+/**
+ * The link policy used when the caller passes none: absolute `http://` and
+ * `https://` URLs (through `checkedLinkHref`), and `mailto:`, only.
+ * markdown-it has already refused `javascript:`, `vbscript:`, `file:` and
+ * non-image `data:` links by then (it lets `data:image/*` through, which this
+ * policy refuses); this also refuses relative links, because only the app
+ * knows where they would go.
+ *
+ * A `mailto:` keeps its address only: `?subject=`, `body=`, `cc=` and `bcc=`
+ * are dropped, so a link can't open an email already filled in.
+ */
+export declare const defaultAssistantLinkPolicy: AssistantMarkdownLinkPolicy;
+/**
+ * Where a link goes, shown next to it: the host for `http(s):` (without
+ * `www.`), the address for `mailto:`. Empty when it can't be read.
+ */
+export declare function linkDestination(href: string): string;

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

@@ -0,0 +1,35 @@
+/**
+ * Every slot class of `AssistantMarkdown`. HeroUI semantic colours plus
+ * `ai-accent` for links, so the rendered answer works under `.dark`. Text
+ * tones: `foreground` for body, `default-600` for quotes, `default-500` only
+ * for the link domain on a plain card (4.83:1 light, 6.9:1 dark).
+ */
+export declare const assistantMarkdownClass: {
+    readonly root: "min-w-0 space-y-3 text-sm leading-relaxed text-foreground [overflow-wrap:anywhere]";
+    readonly paragraph: "m-0";
+    readonly heading: Record<number, string>;
+    readonly bulletList: "m-0 list-disc space-y-1 ps-5";
+    readonly orderedList: "m-0 list-decimal space-y-1 ps-5";
+    readonly listItem: "ps-1 [&>ol]:mt-1 [&>ul]:mt-1";
+    /** Quoted third-party text (an email, a call note): set apart, never styled as the assistant's own words. */
+    readonly blockquote: "m-0 space-y-2 border-s-2 border-default-300 ps-3 text-default-600";
+    readonly code: "rounded bg-default-100 px-1 py-0.5 font-mono text-[0.8125em]";
+    /** The code block's scroll box: named and focusable like the table's, so a long line can be scrolled by keyboard in every browser. */
+    readonly codeWrap: "max-w-full overflow-x-auto rounded-md bg-default-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ai-focus";
+    readonly pre: "m-0 whitespace-pre p-3 font-mono text-xs [overflow-wrap:normal]";
+    readonly rule: "my-3 border-0 border-t border-divider";
+    readonly tableWrap: "max-w-full overflow-x-auto rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ai-focus";
+    readonly table: "w-full border-collapse text-sm";
+    /**
+     * Cells break between words only (the root's `overflow-wrap: anywhere`
+     * would split them mid-word and squeeze a wide table to fit), and headers
+     * stay on one line, so a wide table scrolls inside its box instead.
+     */
+    readonly headerCell: "whitespace-nowrap border-b border-divider px-2 py-1.5 font-semibold";
+    readonly cell: "border-b border-divider px-2 py-1.5 align-top [overflow-wrap:normal]";
+    readonly align: Record<string, string>;
+    readonly link: "text-ai-accent underline underline-offset-2 hover:no-underline";
+    /** `inline-block` keeps the link's underline off the domain. */
+    readonly linkDomain: "inline-block text-default-500";
+    readonly srOnly: "sr-only";
+};