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

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

@@ -0,0 +1,2 @@
+export { RecordCard } from './RecordCard';
+export type { RecordCardProps, RecordCardVariant, RecordCardBody, RecordCardSurface } from './types';

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

@@ -0,0 +1,16 @@
+import { RecordCardBody, RecordCardSurface, RecordCardVariant } from './types';
+export declare const recordCardShadow = "shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+export declare const recordCardClass: {
+    readonly base: "overflow-hidden rounded-2xl border border-pos-line bg-white";
+    readonly title: "m-0 min-w-0 text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere]";
+    readonly count: "rounded-full bg-default-100 px-2 py-px text-[0.75rem] font-semibold text-default-600";
+    readonly icon: "flex shrink-0 text-default-500 [&_svg]:size-[1.125rem]";
+    readonly action: "ml-auto";
+    readonly description: "m-0 text-[0.84375rem] leading-[1.55] text-default-500 [&_b]:font-bold [&_b]:tabular-nums [&_b]:text-default-900";
+    readonly footer: "flex flex-wrap gap-2";
+    readonly footerAfterContent: "mt-[0.875rem]";
+    readonly footerAfterDescription: "mt-3";
+};
+export declare const recordCardSurfaceClass: Record<RecordCardSurface, string>;
+export declare const recordCardHeaderClass: Record<RecordCardVariant, string>;
+export declare const recordCardBodyClass: Record<RecordCardVariant, Record<RecordCardBody, string>>;

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

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type RecordCardVariant = 'section' | 'aside';
+export type RecordCardBody = 'padded' | 'rows' | 'flush' | 'none';
+/** `card` sits on a grey page with the layered shadow; `flat` keeps the border and drops the shadow, for a card inside a modal. */
+export type RecordCardSurface = 'card' | 'flat';
+export interface RecordCardProps {
+    title?: ReactNode;
+    titleAs?: 'h2' | 'h3' | 'h4';
+    icon?: ReactNode;
+    count?: ReactNode;
+    badge?: ReactNode;
+    action?: ReactNode;
+    description?: ReactNode;
+    footer?: ReactNode;
+    variant?: RecordCardVariant;
+    body?: RecordCardBody;
+    surface?: RecordCardSurface;
+    /** Merged onto the root, after the chrome (e.g. `break-inside-avoid` in a multi-column host). */
+    className?: string;
+    children?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/RecordHeader/RecordHeader.d.ts

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

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

@@ -0,0 +1,2 @@
+export { RecordHeader } from './RecordHeader';
+export type { RecordHeaderProps, RecordHeaderStat } from './types';

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

@@ -0,0 +1,43 @@
+export declare const RECORD_HEADER_WIDE_REM = 48;
+export declare const recordHeaderClass: {
+    readonly base: "mb-4 overflow-hidden rounded-2xl border border-pos-line bg-white shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly band: "flex items-center gap-2.5 border-b border-pos-hair bg-pos-page px-4 py-2.5";
+    readonly back: "inline-flex size-[1.625rem] shrink-0 items-center justify-center rounded-[0.625rem] text-default-500 outline-none transition-colors hover:bg-default-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly backIcon: "size-[0.875rem]";
+    readonly breadcrumb: "min-w-0 flex-1";
+    readonly breadcrumbList: "flex-nowrap gap-[0.375rem]";
+    readonly crumbBase: "min-w-0";
+    readonly crumb: "whitespace-nowrap text-[0.875rem] text-default-500 data-[disabled=true]:opacity-100 data-[current=true]:overflow-hidden data-[current=true]:font-normal data-[current=true]:text-default-900";
+    readonly crumbSeparator: "ms-[0.375rem] px-0 text-default-400 data-[disabled=true]:opacity-100";
+    readonly body: "flex flex-wrap gap-5";
+    readonly bodyWide: "px-5 pb-5 pt-[1.125rem]";
+    readonly bodyNarrow: "p-4";
+    readonly identity: "min-w-0 flex-[1_1_18.75rem]";
+    readonly title: "m-0 font-semibold tracking-[-.02em] text-default-900 [overflow-wrap:anywhere]";
+    readonly titleWide: "text-[1.5rem]";
+    readonly titleNarrow: "text-[1.3125rem]";
+    readonly meta: "m-0 mt-[0.6875rem] flex list-none flex-col gap-[0.4375rem] p-0";
+    readonly metaLine: "flex min-w-0 items-center gap-[0.5625rem] text-[0.84375rem] text-default-700";
+    readonly metaIcon: "flex shrink-0 text-default-400 [&_svg]:size-[0.9375rem]";
+    readonly metaText: "min-w-0 truncate";
+    readonly money: "flex flex-col gap-[0.3125rem]";
+    readonly moneyWide: "ml-auto min-w-[12.5rem] flex-none items-end text-right";
+    readonly moneyNarrow: "w-full items-start text-left";
+    readonly amountLabel: "text-[0.8125rem] text-default-500";
+    readonly amount: "whitespace-nowrap font-bold tracking-[-.03em] tabular-nums text-default-900";
+    readonly amountWide: "text-[1.9375rem] leading-[1.1]";
+    readonly amountNarrow: "text-[1.6875rem] leading-[1.1]";
+    readonly amountCaption: "text-[0.8125rem] text-default-500";
+    readonly recordId: "text-[0.8125rem] text-default-500";
+    readonly chips: "mt-[0.1875rem] flex flex-wrap gap-1.5";
+    readonly chipsWide: "justify-end";
+    readonly chipsNarrow: "justify-start";
+    readonly statItems: "m-0 mt-2.5 flex flex-wrap gap-[1.375rem]";
+    readonly stat: "flex flex-col-reverse";
+    readonly statWide: "text-right";
+    readonly statNarrow: "text-left";
+    readonly statValue: "m-0 text-[0.9375rem] font-bold tabular-nums text-default-900";
+    readonly statLabel: "mt-0.5 text-[0.75rem] text-default-500";
+    readonly statsWide: "px-5 pb-5";
+    readonly statsNarrow: "px-4 pb-4";
+};

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface RecordHeaderStat {
+    id?: string;
+    label: ReactNode;
+    value: ReactNode;
+    tone?: RecordTone;
+}
+export interface RecordHeaderProps {
+    breadcrumb?: Array<{
+        label: string;
+        onClick?: () => void;
+    }>;
+    onBack?: () => void;
+    backLabel: string;
+    title: ReactNode;
+    meta?: Array<{
+        icon?: ReactNode;
+        text: ReactNode;
+    }>;
+    amountLabel?: string;
+    amount?: ReactNode;
+    amountCaption?: ReactNode;
+    recordId?: ReactNode;
+    chips?: ReactNode;
+    statItems?: RecordHeaderStat[];
+    stats?: ReactNode;
+    banner?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/RecordLayout/RecordLayout.d.ts

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

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

@@ -0,0 +1,2 @@
+export { RecordLayout } from './RecordLayout';
+export type { RecordLayoutProps } from './types';

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

@@ -0,0 +1,8 @@
+export declare const RECORD_LAYOUT_SPLIT_REM = 50;
+export declare const recordLayoutClass: {
+    readonly base: "grid items-start gap-4";
+    readonly split: "grid-cols-[minmax(0,1fr)_23.25rem]";
+    readonly stacked: "grid-cols-[minmax(0,1fr)]";
+    readonly column: "min-w-0";
+    readonly aside: "flex min-w-0 flex-col gap-[0.875rem]";
+};

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

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface RecordLayoutProps {
+    children: ReactNode;
+    aside?: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/RecordTotals/RecordTotals.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { SignedAmountTone } from '../shared/recordTone';
+export interface RecordTotalsRow {
+    id: string;
+    label: React.ReactNode;
+    note?: React.ReactNode;
+    value: React.ReactNode;
+    tone?: SignedAmountTone;
+}
+export interface RecordTotalsProps {
+    rows: RecordTotalsRow[];
+    total: {
+        label: React.ReactNode;
+        value: React.ReactNode;
+    };
+    memo?: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare const RecordTotals: React.FC<RecordTotalsProps>;

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

@@ -0,0 +1,2 @@
+export { RecordTotals } from './RecordTotals';
+export type { RecordTotalsProps, RecordTotalsRow } from './RecordTotals';

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

@@ -0,0 +1,19 @@
+export declare const RECORD_TOTALS_WIDE_REM = 37.5;
+export declare const recordTotalsClass: {
+    readonly base: "mx-5 border-t border-pos-hair pb-[1.125rem] pt-2.5";
+    readonly rowWide: "flex items-baseline gap-4";
+    readonly rowNarrow: "flex flex-wrap items-baseline gap-x-3";
+    readonly labelWide: "shrink-0 grow-0 basis-[11.875rem]";
+    readonly labelNarrow: "flex-auto";
+    readonly noteWide: "min-w-0 flex-1";
+    readonly noteNarrow: "order-3 mt-px basis-full";
+    readonly row: "py-2";
+    readonly label: "text-[0.875rem] text-default-900";
+    readonly note: "text-[0.8125rem] text-default-500";
+    readonly value: "ml-auto shrink-0 whitespace-nowrap text-right text-[0.875rem] tabular-nums text-default-900";
+    readonly totalRule: "mt-1.5 border-t border-pos-line";
+    readonly totalRow: "pt-3";
+    readonly totalLabel: "text-[0.9375rem] font-bold text-default-900";
+    readonly totalValue: "ml-auto shrink-0 whitespace-nowrap text-right text-[1.0625rem] font-bold tabular-nums text-default-900";
+    readonly memo: "mt-2 text-[0.78125rem] leading-[1.6] text-default-500";
+};

package/dist/patterns/RefundMethodCards/RefundMethodCards.d.ts

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

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

@@ -0,0 +1,2 @@
+export { RefundMethodCards } from './RefundMethodCards';
+export type { RefundMethodCardsProps, RefundMethodCardsLabels, RefundMethodCardsError, RefundMethodView, RefundMethodKind, RefundMethodStatus, RefundMethodOption, RefundMethodAnotherMethod, RefundMethodPaidWith, } from './types';

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

@@ -0,0 +1,59 @@
+import { CSSProperties } from 'react';
+import { RefundMethodKind } from './types';
+export declare const PRIMARY = "hsl(var(--heroui-primary))";
+export declare const refundMethodKindIcon: Record<RefundMethodKind, string>;
+export declare const refundMethodCardsClass: {
+    readonly root: "flex flex-col text-default-900";
+    readonly banner: "mb-[18px]";
+    readonly eyebrowRow: "mb-3 flex min-h-6 items-center justify-between gap-3";
+    readonly eyebrow: "text-[11px] font-semibold uppercase tracking-[.08em] text-default-500";
+    readonly grid: "grid grid-cols-3 gap-2.5";
+    readonly card: "relative flex min-h-[132px] flex-col rounded-[14px] border-[1.5px] bg-white transition-colors";
+    readonly focusRing: "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
+    readonly toggle: "flex w-full items-center gap-[11px] rounded-[12px] px-[15px] pt-[13px] text-left disabled:cursor-not-allowed";
+    readonly toggleUnselected: "flex-1 flex-col items-stretch gap-3 pb-[13px]";
+    readonly toggleHeader: "flex w-full items-center gap-[11px]";
+    readonly toggleRemovable: "pr-12";
+    readonly iconBox: "flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[10px]";
+    readonly text: "min-w-0 flex-1";
+    readonly label: "block truncate text-[15px] font-semibold leading-5";
+    readonly subtitle: "block truncate text-xs text-default-500";
+    readonly status: "block truncate text-xs font-semibold";
+    readonly lowerSlot: "mt-auto flex h-11 w-full items-center rounded-[10px] px-3 text-[13px] font-medium tabular-nums";
+    readonly amountSlot: "mt-auto px-[15px] pb-[13px] pt-3";
+    readonly amountWrapper: "h-11 min-h-11 rounded-[10px] bg-white shadow-none";
+    readonly amountInput: "text-[15px] font-semibold tabular-nums";
+    readonly remove: "absolute right-1 top-1 flex h-11 w-11 items-center justify-center rounded-[10px] text-default-500 hover:text-default-900 disabled:cursor-not-allowed";
+    readonly badge: "inline-flex h-[22px] shrink-0 items-center whitespace-nowrap rounded-full px-[9px] text-xs font-medium leading-none";
+    readonly another: "flex min-h-[132px] w-full flex-col items-start justify-center gap-3 rounded-[14px] border-[1.5px] border-dashed bg-white px-[15px] py-[13px] text-left transition-colors disabled:cursor-not-allowed";
+    readonly anotherOpen: "aria-expanded:scale-100";
+    readonly menuItem: "py-2";
+};
+type CardTone = 'idle' | 'selected' | 'declined';
+export declare const refundMethodCardStyle: Record<CardTone, CSSProperties>;
+export declare const refundMethodIconStyle: {
+    readonly idle: {
+        readonly backgroundColor: "hsl(var(--heroui-default-100))";
+        readonly color: "hsl(var(--heroui-default-600))";
+    };
+    readonly selected: {
+        readonly backgroundColor: "hsl(var(--heroui-primary))";
+        readonly color: "#fff";
+    };
+};
+export declare const refundMethodLowerSlotStyle: CSSProperties;
+export declare const refundMethodAnotherStyle: CSSProperties;
+export declare const refundMethodStatusStyle: {
+    readonly declined: {
+        readonly color: "#B62214";
+    };
+    readonly pending: {
+        readonly color: "#854F0B";
+        readonly backgroundColor: "#FAEEDA";
+    };
+    readonly done: {
+        readonly color: "#3B6D11";
+        readonly backgroundColor: "#EAF3DE";
+    };
+};
+export {};

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

@@ -0,0 +1,72 @@
+import { CurrencyCode, Money } from '../../utils/money';
+export type RefundMethodKind = 'card' | 'cash' | 'check' | 'store_credit' | 'reader' | 'other';
+export type RefundMethodStatus = 'idle' | 'declined' | 'pending' | 'done';
+export interface RefundMethodView {
+    id: string;
+    kind: RefundMethodKind;
+    label: string;
+    subtitle?: string;
+    /** Most this method can take back; shown as "Up to …" and enforced on the amount input. */
+    cap?: Money;
+    selected: boolean;
+    /** The text the cashier typed, owned by the host. */
+    amount?: string;
+    status?: RefundMethodStatus;
+    statusLabel?: string;
+    removable?: boolean;
+}
+export interface RefundMethodOption {
+    id: string;
+    kind: RefundMethodKind;
+    label: string;
+    description: string;
+}
+export interface RefundMethodAnotherMethod {
+    label: string;
+    subtitle: string;
+    options: RefundMethodOption[];
+    onPick: (optionId: string) => void;
+}
+export interface RefundMethodPaidWith {
+    label: string;
+    value: string;
+}
+export interface RefundMethodCardsError {
+    tone: 'danger' | 'warning';
+    title?: string;
+    body: string;
+    onRetry?: () => void;
+    onChooseDifferent: () => void;
+}
+export interface RefundMethodCardsLabels {
+    heading?: string;
+    /** `{amount}` is replaced with the formatted cap. */
+    upTo?: string;
+    /** Shown in the lower slot of an unselected method that has no cap. */
+    noCap?: string;
+    /** Accessible name of the amount input; `{method}` is replaced with the method label. */
+    amountFor?: string;
+    /** Accessible name of the remove button; `{method}` is replaced with the method label. */
+    remove?: string;
+    declined?: string;
+    pending?: string;
+    done?: string;
+    retry?: string;
+    chooseDifferent?: string;
+}
+export interface RefundMethodCardsProps {
+    methods: RefundMethodView[];
+    onToggle: (id: string) => void;
+    onAmountChange: (id: string, draft: string) => void;
+    onAmountBlur?: (id: string) => void;
+    onRemove?: (id: string) => void;
+    /** Currency of the typed amounts when a method has no cap. Default `'USD'`. */
+    currency?: CurrencyCode;
+    paidWith?: RefundMethodPaidWith;
+    anotherMethod?: RefundMethodAnotherMethod;
+    error?: RefundMethodCardsError;
+    busy?: boolean;
+    labels?: RefundMethodCardsLabels;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/RefundProgressList/RefundProgressList.d.ts

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

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

@@ -0,0 +1,2 @@
+export { RefundProgressList } from './RefundProgressList';
+export type { RefundProgressListProps, RefundProgressListLabels, RefundProgressPart, RefundProgressStatus, RefundProgressAction, } from './types';

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

@@ -0,0 +1,44 @@
+import { CSSProperties } from 'react';
+import { RefundProgressStatus } from './types';
+export declare const refundProgressListClass: {
+    readonly root: "flex flex-col text-default-900";
+    readonly eyebrow: "mb-3 text-[11px] font-semibold uppercase tracking-[.08em] text-default-500";
+    readonly list: "flex flex-col gap-2.5";
+    readonly row: "flex flex-col gap-3 rounded-[14px] border-[1.5px] px-[15px] py-[13px] transition-colors";
+    readonly main: "flex items-center gap-[11px]";
+    readonly iconBox: "flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[10px]";
+    readonly text: "min-w-0 flex-1";
+    readonly label: "block truncate text-[15px] font-semibold leading-5";
+    readonly note: "block truncate text-xs text-default-500";
+    readonly amount: "shrink-0 text-[15px] font-semibold tabular-nums";
+    readonly badge: "inline-flex h-[22px] shrink-0 items-center gap-[5px] whitespace-nowrap rounded-full px-[9px] text-xs font-medium leading-none";
+    readonly prompt: "flex flex-wrap items-center gap-3 rounded-[10px] px-3 py-2";
+    readonly promptText: "min-w-0 flex-1 text-[13px] font-medium";
+    readonly action: "h-11 min-w-0 rounded-[12px] px-4 text-[14px] font-semibold";
+};
+export declare const refundProgressRowStyle: {
+    readonly idle: {
+        readonly borderColor: "#E7E7E9";
+        readonly backgroundColor: "#fff";
+    };
+    readonly active: {
+        readonly borderColor: "hsl(var(--heroui-primary))";
+        readonly backgroundColor: "hsl(var(--heroui-primary) / 0.05)";
+    };
+    readonly failed: {
+        readonly borderColor: "#B62214";
+        readonly backgroundColor: "#FCEBEB";
+    };
+};
+export declare const refundProgressIconStyle: {
+    readonly idle: {
+        readonly backgroundColor: "hsl(var(--heroui-default-100))";
+        readonly color: "hsl(var(--heroui-default-600))";
+    };
+    readonly active: {
+        readonly backgroundColor: "hsl(var(--heroui-primary))";
+        readonly color: "#fff";
+    };
+};
+export declare const refundProgressPromptStyle: CSSProperties;
+export declare const refundProgressStatusStyle: Record<RefundProgressStatus, CSSProperties>;

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

@@ -0,0 +1,37 @@
+import { Money } from '../../utils/money';
+import { RefundMethodKind } from '../RefundMethodCards/types';
+export type RefundProgressStatus = 'queued' | 'processing' | 'waiting_reader' | 'waiting_cash' | 'done' | 'failed';
+export interface RefundProgressAction {
+    label: string;
+    onPress: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface RefundProgressPart {
+    id: string;
+    kind: RefundMethodKind;
+    label: string;
+    amount: Money;
+    status: RefundProgressStatus;
+    note?: string;
+    /** Instruction for the cashier under the row, e.g. "Give $30.00 from the drawer". */
+    prompt?: string;
+    action?: RefundProgressAction;
+}
+export interface RefundProgressListLabels {
+    heading?: string;
+    queued?: string;
+    processing?: string;
+    waitingReader?: string;
+    waitingCash?: string;
+    done?: string;
+    failed?: string;
+}
+export interface RefundProgressListProps {
+    parts: RefundProgressPart[];
+    /** Highlighted row. Defaults to the first part that is processing or waiting. */
+    activeId?: string;
+    labels?: RefundProgressListLabels;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/RelatedRecordList/RelatedRecordList.d.ts

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

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

@@ -0,0 +1,2 @@
+export { RelatedRecordList } from './RelatedRecordList';
+export type { RelatedRecordListProps, RelatedRecordRow } from './types';

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

@@ -0,0 +1,19 @@
+export declare const relatedRecordListClass: {
+    readonly base: "overflow-hidden rounded-2xl border border-pos-line bg-white shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly header: "flex flex-wrap items-center gap-2 px-5 pt-4";
+    readonly title: "m-0 min-w-0 text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere]";
+    readonly count: "rounded-full bg-default-100 px-2 py-px text-[0.75rem] font-semibold text-default-600";
+    readonly list: "m-0 list-none p-0";
+    readonly item: "border-t border-pos-hair";
+    readonly itemFirstHeadless: "border-t-0";
+    readonly row: "flex w-full items-center gap-2.5 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 rowBody: "flex min-w-0 flex-1 flex-col";
+    readonly rowHead: "flex min-w-0 flex-wrap items-center gap-2";
+    readonly primaryLinked: "min-w-0 text-[0.875rem] font-normal text-primary [overflow-wrap:anywhere]";
+    readonly primaryPlain: "min-w-0 text-[0.875rem] font-normal text-default-900 [overflow-wrap:anywhere]";
+    readonly secondary: "mt-[0.1875rem] block min-w-0 truncate text-[0.8125rem] text-default-500";
+    readonly amount: "max-w-[45%] shrink-0 text-right text-[0.875rem] font-semibold tabular-nums text-default-900 [overflow-wrap:anywhere]";
+    readonly empty: "min-w-0 px-5 pb-5 pt-[0.875rem] text-[0.875rem] text-default-500 [overflow-wrap:anywhere]";
+    readonly emptyHeadless: "pt-5";
+};

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface RelatedRecordRow {
+    id: string;
+    primary: ReactNode;
+    chip?: ReactNode;
+    secondary?: ReactNode;
+    amount?: ReactNode;
+    amountTone?: 'positive' | 'negative' | 'neutral';
+    onSelect?: () => void;
+}
+export interface RelatedRecordListProps {
+    title?: ReactNode;
+    count?: number;
+    rows: RelatedRecordRow[];
+    emptyContent: ReactNode;
+    'data-testid'?: string;
+}

package/dist/patterns/ScrollToLatest/ScrollToLatest.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+import { ScrollToLatestProps } from './types';
+/**
+ * A scroll box that stays on its newest content, like a chat transcript. It
+ * follows the bottom until the person scrolls up, then offers a "Jump to
+ * newest" button; reaching the bottom again, by scrolling or the button,
+ * resumes following. Built on HeroUI's `ScrollShadow`.
+ *
+ * Only scrolling UP stops the following, so the box's own scrolling (and the
+ * browser clamping after content shrinks) never does.
+ */
+export declare function ScrollToLatest({ children, label, followKey, jumpLabel, onFollowChange, threshold, className, classNames, 'data-testid': dataTestId, }: ScrollToLatestProps): JSX.Element;
+export declare namespace ScrollToLatest {
+    var displayName: string;
+}
+export default ScrollToLatest;

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

@@ -0,0 +1,2 @@
+export { ScrollToLatest } from './ScrollToLatest';
+export type { ScrollToLatestClassNames, ScrollToLatestProps } from './types';

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

@@ -0,0 +1,11 @@
+/**
+ * Every slot class of `ScrollToLatest`. The box takes its height from its
+ * parent (`h-full` / `flex-1`), so give the parent one.
+ */
+export declare const scrollToLatestClass: {
+    readonly base: "relative flex min-h-0 w-full flex-col";
+    readonly scroller: "min-h-0 flex-1 overflow-y-auto overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-focus";
+    readonly content: "min-w-0";
+    readonly jumpBar: "pointer-events-none absolute inset-x-0 bottom-3 flex justify-center";
+    readonly jump: "pointer-events-auto border border-divider bg-content1 text-foreground shadow-medium";
+};

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export interface ScrollToLatestClassNames {
+    base?: string;
+    scroller?: string;
+    content?: string;
+    jump?: string;
+}
+export interface ScrollToLatestProps {
+    children: ReactNode;
+    /** Accessible name of the scrolling region, e.g. "Conversation". */
+    label: string;
+    /**
+     * Change it when new content arrives (a message count, the last id). While
+     * the person is following the bottom, the box scrolls to it. Growth inside
+     * the content (a group expanding) is followed without it.
+     */
+    followKey?: unknown;
+    /** Text of the button that returns to the bottom. Defaults to "Jump to newest". */
+    jumpLabel?: string;
+    /** Called when the person stops or starts following the bottom. */
+    onFollowChange?: (isFollowing: boolean) => void;
+    /** How close to the bottom, in px, still counts as "at the bottom". Defaults to 32. */
+    threshold?: number;
+    className?: string;
+    classNames?: ScrollToLatestClassNames;
+    'data-testid'?: string;
+}

package/dist/patterns/SessionExpiredCard/SessionExpiredCard.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from 'react';
+import { SessionExpiredCardProps } from './type';
+/**
+ * What a Salesforce Canvas widget shows once its session is gone. There is no
+ * reload button: the Canvas frame is loaded by a POST, so the reload has to
+ * come from the Salesforce tab, not from inside the frame.
+ * The card is `role="alert"` so the change is announced, and `min-h-52` (208px)
+ * keeps it tall enough to be the first height the Salesforce wrapper reveals
+ * (its threshold is 200px). Copy comes in as props; the caller owns i18n.
+ */
+export declare function SessionExpiredCard({ testId, title, description }: Readonly<SessionExpiredCardProps>): JSX.Element;
+export declare namespace SessionExpiredCard {
+    var displayName: string;
+}

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

@@ -0,0 +1,2 @@
+export { SessionExpiredCard } from './SessionExpiredCard';
+export type * from './type';

package/dist/patterns/SessionExpiredCard/type.d.ts

@@ -0,0 +1,6 @@
+export type SessionExpiredCardProps = {
+    /** Stable selector for the state this card stands in for (`…-state`). */
+    testId: string;
+    title: string;
+    description: string;
+};

package/dist/patterns/SourceList/SourceList.d.ts

@@ -0,0 +1,12 @@
+import { SourceListHandle, SourceListProps } from './types';
+/**
+ * The sources behind an assistant's answer, "Sources (n)", grouped by kind
+ * and closed by default. A HeroUI `Accordion` with one item; each source is a
+ * `SourcePill`.
+ *
+ * `reveal(id)` (through a ref) opens the list, moves focus to one source and
+ * scrolls it into view, so a `CitationMarker` can lead to the source it
+ * points at.
+ */
+export declare const SourceList: import('react').ForwardRefExoticComponent<SourceListProps & import('react').RefAttributes<SourceListHandle>>;
+export default SourceList;

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

@@ -0,0 +1,2 @@
+export { SourceList } from './SourceList';
+export type { SourceListHandle, SourceListItem, SourceListProps } from './types';

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

@@ -0,0 +1,20 @@
+/** Every slot class of `SourceList`. HeroUI semantic colours only. */
+export declare const sourceListClass: {
+    readonly base: "w-full px-0";
+    readonly item: "shadow-none";
+    readonly trigger: "gap-2 py-1.5 motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly title: "text-sm font-medium text-default-700";
+    readonly count: "ms-1 tabular-nums text-default-600";
+    readonly indicator: "text-default-500";
+    readonly content: "pb-2 pt-0";
+    readonly groups: "flex flex-col gap-3";
+    readonly group: "flex flex-col gap-1.5";
+    readonly groupLabel: "m-0 text-xs font-semibold uppercase tracking-wide text-default-600";
+    readonly list: "m-0 flex list-none flex-wrap gap-1.5 p-0";
+    /**
+     * The item takes focus only from `reveal()`, a script focus that follows a
+     * mouse click as often as a key, and `:focus-visible` would not match the
+     * click. So the ring is on `:focus`: the revealed source is marked either way.
+     */
+    readonly listItem: "max-w-full rounded-full outline-none focus:ring-2 focus:ring-ai-focus";
+};