@veevarts/design-system 2.6.0 → 2.8.0

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

@@ -14,6 +14,7 @@ export interface AdminToolbarProps {
     trailing?: React.ReactNode;
     /** Search box width. `'md'` (280px) by default, `'lg'` (360px) for wide tables. */
     searchWidth?: 'md' | 'lg';
+    variant?: 'default' | 'framed';
     className?: string;
     'data-testid'?: string;
 }

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/CardList/CardList.d.ts

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

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

@@ -0,0 +1,2 @@
+export { CardList } from './CardList';
+export type { CardListProps, CardListItem } from './types';

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

@@ -0,0 +1,16 @@
+export declare const cardListClass: {
+    readonly base: "w-full";
+    readonly list: "m-0 list-none p-0";
+    readonly item: "border-b border-pos-hair last:border-b-0";
+    readonly card: "block w-full px-4 py-[0.875rem] text-left";
+    readonly cardInteractive: "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 headline: "flex items-baseline gap-2.5";
+    readonly title: "min-w-0 text-[0.90625rem] font-semibold text-primary [overflow-wrap:anywhere]";
+    readonly amount: "ml-auto shrink-0 whitespace-nowrap text-[0.9375rem] font-bold tabular-nums text-default-900";
+    readonly chips: "mt-[0.5625rem] flex flex-wrap gap-1.5";
+    readonly rows: "mt-[0.5625rem] block";
+    readonly row: "flex items-baseline gap-3 py-[0.1875rem] text-[0.8125rem]";
+    readonly rowLabel: "shrink-0 text-default-500";
+    readonly rowValue: "ml-auto min-w-0 text-right text-default-700 [overflow-wrap:anywhere]";
+    readonly skeletonRow: "border-b border-pos-hair p-4 last:border-b-0";
+};

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

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export interface CardListItem {
+    id: string;
+    title: ReactNode;
+    amount?: ReactNode;
+    chips?: ReactNode;
+    rows?: Array<{
+        label: string;
+        value: ReactNode;
+    }>;
+}
+export interface CardListProps {
+    items: CardListItem[];
+    ariaLabel: string;
+    onSelect?: (id: string) => void;
+    loading?: boolean;
+    skeletonCount?: number;
+    'data-testid'?: string;
+}

package/dist/patterns/CardStack/CardStack.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export type CardStackLayout = 'stack' | 'grid';
+export interface CardStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    layout?: CardStackLayout;
+    'data-testid'?: string;
+}
+export declare const CardStack: React.FC<CardStackProps>;

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

@@ -0,0 +1,2 @@
+export { CardStack } from './CardStack';
+export type { CardStackProps, CardStackLayout } from './CardStack';

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

@@ -0,0 +1,2 @@
+import { CardStackLayout } from './CardStack';
+export declare const cardStackClass: Record<CardStackLayout, string>;

package/dist/patterns/CellText/CellText.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { SignedAmountTone } from '../shared/recordTone';
+export type CellTextVariant = 'text' | 'reference' | 'amount';
+export interface CellTextProps {
+    variant?: CellTextVariant;
+    tone?: SignedAmountTone;
+    secondary?: React.ReactNode;
+    children: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare const CellText: React.FC<CellTextProps>;
+export interface ChipStackProps {
+    children: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare const ChipStack: React.FC<ChipStackProps>;

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

@@ -0,0 +1,2 @@
+export { CellText, ChipStack } from './CellText';
+export type { CellTextProps, CellTextVariant, ChipStackProps } from './CellText';

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

@@ -0,0 +1,7 @@
+import { CellTextVariant } from './CellText';
+export declare const cellTextClass: {
+    readonly base: "whitespace-nowrap text-[0.875rem]";
+    readonly secondary: "text-default-500";
+    readonly chipStack: "inline-flex flex-col items-start gap-[0.3125rem]";
+};
+export declare const cellTextVariantClass: Record<CellTextVariant, string>;

package/dist/patterns/FilterSelect/FilterSelect.d.ts

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

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

@@ -0,0 +1,2 @@
+export { FilterSelect } from './FilterSelect';
+export type { FilterSelectProps, FilterSelectOption } from './types';

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

@@ -0,0 +1,14 @@
+export declare const filterSelectClass: {
+    readonly base: "relative inline-grid min-w-[10.75rem] grid-cols-[minmax(0,1fr)]";
+    readonly baseActive: "max-w-[20rem]";
+    readonly cell: "[grid-area:1/1]";
+    readonly sizer: "invisible h-0 overflow-hidden whitespace-nowrap border-x-2 border-transparent pl-2 pr-[4.8125rem] text-[0.875rem] font-semibold";
+    readonly select: "w-full";
+    readonly trigger: "h-[2.375rem] min-h-[2.375rem] rounded-[0.625rem] border-medium border-pos-field bg-white px-2 shadow-none data-[hover=true]:border-default-300 data-[focus=true]:border-primary data-[open=true]:border-primary data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-primary data-[focus-visible=true]:ring-offset-1";
+    readonly triggerActive: "!border-acct-rust-border !bg-acct-rust-fill pr-[3.25rem]";
+    readonly value: "text-[0.875rem] !text-default-900";
+    readonly valueActive: "font-semibold !text-primary-600";
+    readonly iconActive: "!text-primary-600";
+    readonly clear: "absolute right-[1.875rem] top-1/2 z-20 inline-flex size-[1.25rem] -translate-y-1/2 items-center justify-center rounded-md text-primary-600 outline-none hover:bg-white/70 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary";
+    readonly clearIcon: "size-[0.8125rem]";
+};

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

@@ -0,0 +1,13 @@
+export interface FilterSelectOption {
+    value: string;
+    label: string;
+}
+export interface FilterSelectProps {
+    label: string;
+    value: string | null;
+    options: FilterSelectOption[];
+    onChange: (value: string | null) => void;
+    clearLabel: string;
+    minWidth?: number;
+    'data-testid'?: string;
+}

package/dist/patterns/KeyValueChip/KeyValueChip.d.ts

@@ -6,6 +6,7 @@ export interface KeyValueChipProps {
     value: React.ReactNode;
     /** Chip size. `'sm'` (default) for dense tables, `'md'` for detail panels. */
     size?: 'sm' | 'md';
+    variant?: 'default' | 'record';
     className?: string;
     'data-testid'?: string;
 }

package/dist/patterns/KeyValueRows/KeyValueRows.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface KeyValueRow {
+    id?: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+}
+export type KeyValueRowsDensity = 'regular' | 'compact';
+export interface KeyValueRowsProps {
+    rows: KeyValueRow[];
+    density?: KeyValueRowsDensity;
+    'data-testid'?: string;
+}
+export declare const KeyValueRows: React.FC<KeyValueRowsProps>;

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

@@ -0,0 +1,2 @@
+export { KeyValueRows } from './KeyValueRows';
+export type { KeyValueRowsProps, KeyValueRow, KeyValueRowsDensity } from './KeyValueRows';

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

@@ -0,0 +1,8 @@
+import { KeyValueRowsDensity } from './KeyValueRows';
+export declare const keyValueRowsClass: {
+    readonly list: "m-0 divide-y divide-pos-hair";
+    readonly row: "flex items-baseline gap-3";
+    readonly label: "min-w-0 text-[0.84375rem] text-default-500";
+    readonly value: "m-0 ml-auto flex min-w-0 flex-wrap justify-end gap-[0.3125rem] text-right text-[0.875rem] text-default-900 [overflow-wrap:anywhere]";
+};
+export declare const keyValueRowPadding: Record<KeyValueRowsDensity, string>;

package/dist/patterns/LineItemRows/LineItemRows.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface LineItemRow {
+    id: string;
+    name: React.ReactNode;
+    details?: React.ReactNode[];
+    amount: React.ReactNode;
+    originalAmount?: React.ReactNode;
+    chip?: React.ReactNode;
+    tone?: 'violet';
+}
+export interface LineItemRowsProps {
+    items: LineItemRow[];
+    ariaLabel?: string;
+    originalAmountLabel?: string;
+    'data-testid'?: string;
+}
+export declare const LineItemRows: React.FC<LineItemRowsProps>;

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

@@ -0,0 +1,2 @@
+export { LineItemRows } from './LineItemRows';
+export type { LineItemRowsProps, LineItemRow } from './LineItemRows';

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

@@ -0,0 +1,13 @@
+export declare const lineItemRowsClass: {
+    readonly list: "m-0 list-none p-0";
+    readonly row: "flex items-start gap-[0.875rem] border-t border-pos-hair px-5 py-3";
+    readonly body: "min-w-0 flex-1";
+    readonly name: "text-[0.90625rem] font-semibold text-default-900 [overflow-wrap:anywhere] [text-wrap:pretty]";
+    readonly details: "mt-[0.3125rem] flex flex-wrap items-center gap-[0.4375rem] text-[0.8125rem] text-default-500";
+    readonly separator: "text-default-400";
+    readonly detail: "tabular-nums";
+    readonly trailing: "flex shrink-0 flex-col items-end gap-1.5 text-right";
+    readonly amounts: "inline-flex items-baseline gap-2";
+    readonly original: "text-[0.8125rem] tabular-nums text-default-500 line-through";
+    readonly amount: "whitespace-nowrap text-[0.9375rem] font-bold tabular-nums text-default-900";
+};

package/dist/patterns/ListPanel/ListPanel.d.ts

@@ -38,6 +38,8 @@ export interface ListPanelProps {
     emptyContent?: React.ReactNode;
     /** The table/list rendered when none of the async states apply. */
     children?: React.ReactNode;
+    toolbar?: React.ReactNode;
+    variant?: 'default' | 'framed';
     className?: string;
     classNames?: ListPanelClassNames;
     'data-testid'?: string;

package/dist/patterns/LoadMoreFooter/LoadMoreFooter.d.ts

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

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

@@ -0,0 +1,2 @@
+export { LoadMoreFooter } from './LoadMoreFooter';
+export type { LoadMoreFooterProps, LoadMoreStatus } from './types';

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

@@ -0,0 +1,7 @@
+export declare const loadMoreFooterClass: {
+    readonly base: "flex flex-wrap items-center justify-center gap-2.5 border-t border-pos-hair px-5 py-[0.875rem] text-[0.84375rem] text-default-500";
+    readonly idle: "w-full";
+    readonly sentinel: "h-px w-full";
+    readonly spinner: "inline-flex";
+    readonly error: "text-pos-danger";
+};

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

@@ -0,0 +1,10 @@
+export type LoadMoreStatus = 'idle' | 'loading' | 'error' | 'end';
+export interface LoadMoreFooterProps {
+    status: LoadMoreStatus;
+    onLoadMore: () => void;
+    loadingLabel: string;
+    errorLabel: string;
+    retryLabel: string;
+    endLabel?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/PageHeader/PageHeader.d.ts

@@ -26,6 +26,7 @@ export interface PageHeaderProps {
     actions?: React.ReactNode;
     /** Heading level for the title element. Default `'h1'`. */
     titleAs?: 'h1' | 'h2' | 'h3';
+    variant?: 'default' | 'list';
     className?: string;
     classNames?: PageHeaderClassNames;
     'data-testid'?: string;

package/dist/patterns/PillTabs/PillTabs.d.ts

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

package/dist/patterns/PillTabs/ids.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_PILL_TABS_ID = "pill-tabs";
+export declare const pillTabId: (key: string, idPrefix?: string) => string;
+export declare const pillTabPanelId: (key: string, idPrefix?: string) => string;
+export declare const pillTabPanelProps: (key: string, idPrefix?: string) => {
+    role: "tabpanel";
+    id: string;
+    'aria-labelledby': string;
+    tabIndex: number;
+};

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

@@ -0,0 +1,3 @@
+export { PillTabs } from './PillTabs';
+export { pillTabId, pillTabPanelId, pillTabPanelProps } from './ids';
+export type { PillTabsProps, PillTabItem } from './types';

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

@@ -0,0 +1,10 @@
+export declare const pillTabsClass: {
+    readonly base: "mb-3.5 w-full";
+    readonly tabList: "w-full gap-1 rounded-full border border-pos-line bg-default-100 p-1";
+    readonly cursor: "rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,.10)]";
+    readonly tab: "h-auto flex-1 px-[0.875rem] py-[0.5625rem] data-[hover-unselected=true]:opacity-100";
+    readonly tabStill: "rounded-full data-[selected=true]:bg-white data-[selected=true]:shadow-[0_1px_3px_rgba(0,0,0,.10)]";
+    readonly tabContent: "text-[0.84375rem] leading-[1.5] font-normal text-default-600 group-data-[selected=true]:font-semibold group-data-[selected=true]:text-default-900";
+    readonly title: "inline-flex items-center gap-[0.4375rem] whitespace-nowrap";
+    readonly count: "rounded-full bg-default-200 px-[0.4375rem] py-px text-[0.71875rem] leading-[1.5] font-semibold text-default-600 group-data-[selected=true]:bg-acct-rust-fill group-data-[selected=true]:text-primary-600";
+};

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

@@ -0,0 +1,13 @@
+export interface PillTabItem {
+    key: string;
+    label: string;
+    count?: number;
+}
+export interface PillTabsProps {
+    items: PillTabItem[];
+    value: string;
+    onChange: (key: string) => void;
+    ariaLabel: string;
+    idPrefix?: string;
+    'data-testid'?: string;
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { RecordCardBody, 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 shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    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 recordCardHeaderClass: Record<RecordCardVariant, string>;
+export declare const recordCardBodyClass: Record<RecordCardVariant, Record<RecordCardBody, string>>;

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export type RecordCardVariant = 'section' | 'aside';
+export type RecordCardBody = 'padded' | 'rows' | 'flush' | 'none';
+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;
+    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';