@veevarts/design-system 2.1.0-beta.6 → 2.1.0-beta.8

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

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

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

@@ -0,0 +1,2 @@
+export { StatTiles } from './StatTiles';
+export type { StatTilesProps, StatTileItem } from './types';

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

@@ -0,0 +1,8 @@
+export declare const STAT_TILES_PAIR_MIN = 560;
+export declare const statTilesClass: {
+    readonly base: "grid gap-3";
+    readonly tile: "min-w-0 rounded-[14px] border border-pos-line bg-white px-[18px] py-4 shadow-[0_1px_4px_rgba(0,0,0,.06),0_4px_12px_rgba(0,0,0,.06)]";
+    readonly value: "text-[23px] font-bold leading-[1.2] tracking-[-.02em] tabular-nums text-default-900 [overflow-wrap:anywhere]";
+    readonly label: "mt-[5px] text-[13.5px] text-default-500";
+    readonly caption: "mt-0.5 text-[12.5px] text-default-500";
+};

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { RecordTone } from '../shared/recordTone';
+export interface StatTileItem {
+    label: string;
+    value: ReactNode;
+    tone?: RecordTone;
+    caption?: ReactNode;
+}
+export interface StatTilesProps {
+    items: StatTileItem[];
+    'data-testid'?: string;
+}

package/dist/patterns/StatusChip/StatusChip.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ChipProps } from '../../components';
 /** Domain-agnostic lifecycle states an admin row can be in. */
-export type StatusChipStatus = 'active' | 'archived' | 'inactive' | 'draft' | 'pending' | 'success' | 'warning' | 'danger' | 'neutral';
+export type StatusChipStatus = 'active' | 'archived' | 'inactive' | 'draft' | 'pending' | 'success' | 'warning' | 'danger' | 'neutral' | 'info' | 'violet';
 export interface StatusChipProps {
     /** Lifecycle state — selects the colour/tone only, never the text. */
     status: StatusChipStatus;
@@ -12,12 +12,12 @@ export interface StatusChipProps {
      * `'dot'` variant: a soft, radius-full pill with a leading tone dot,
      * 12px / weight-600 text, tuned for dense admin lifecycle tables.
      */
-    variant?: ChipProps['variant'] | 'dot';
+    variant?: ChipProps['variant'] | 'dot' | 'plain';
     /** Chip size. Default `'sm'`. Ignored by `variant="dot"`. */
     size?: ChipProps['size'];
     /**
      * Override the colour derived from `status`. Escape hatch for the
-     * rare state not covered by `StatusChipStatus`. Ignored by `variant="dot"`.
+     * rare state not covered by `StatusChipStatus`. Ignored by `variant="dot"` and `variant="plain"`.
      */
     color?: ChipProps['color'];
     /** Optional leading element (dot, icon). Ignored by `variant="dot"`. */

package/dist/patterns/Summary/components/GrandTotalRow.d.ts

@@ -6,6 +6,7 @@ export interface GrandTotalRowProps {
         amount: Money;
     };
     locale: string;
+    compact?: boolean;
     className?: string;
 }
 export declare const GrandTotalRow: React.FC<GrandTotalRowProps>;

package/dist/patterns/Summary/components/ItemRow.d.ts

@@ -7,5 +7,6 @@ export interface ItemRowProps {
     removeAriaLabel: string;
     /** Show the per-item remove control. Defaults to `true`. */
     showRemoveButton?: boolean;
+    compact?: boolean;
 }
 export declare const ItemRow: React.FC<ItemRowProps>;

package/dist/patterns/Summary/components/SummaryBody.d.ts

@@ -9,9 +9,12 @@ export interface SummaryBodyProps {
     locale: string;
     onRemoveItem?: (id: string) => void;
     removeAriaLabel: string;
-    /** Show the per-item remove control. Defaults to `true`. */
+    onRemoveTotalRow?: (id: string) => void;
+    removeTotalRowAriaLabel: string;
+    /** Show the per-item and per-totals-row remove controls. Defaults to `true`. */
     showRemoveButton?: boolean;
     emptyState?: React.ReactNode;
+    compact?: boolean;
     classNames: SummaryClassNames;
 }
 export declare const SummaryBody: React.FC<SummaryBodyProps>;

package/dist/patterns/Summary/components/TotalsLineRow.d.ts

@@ -1,12 +1,13 @@
 import { default as React } from 'react';
-import { SummaryPostTotalRow } from '../types';
+import { SummaryTotalRow } from '../types';
 export interface TotalsLineRowProps {
-    row: SummaryPostTotalRow;
+    row: SummaryTotalRow;
     locale: string;
     emphasized: boolean;
     onRemove?: (id: string) => void;
     removeAriaLabel?: string;
     /** Show the per-row remove control. Defaults to `true`. */
     showRemoveButton?: boolean;
+    compact?: boolean;
 }
 export declare const TotalsLineRow: React.FC<TotalsLineRowProps>;

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Money } from '../../utils/money';
+import { RecordTone } from '../shared/recordTone';
 export type { Money } from '../../utils/money';
 /**
  * A generic, parametrizable detail row rendered under a line item — an icon +
@@ -56,6 +57,12 @@ export interface SummaryLineItem {
      * show an auto-renewal note and a pay-by-installments line.
      */
     details?: SummaryItemDetail[];
+    /** Pre-formatted list price, rendered struck through before `amount`. */
+    originalAmount?: string;
+    /** Node rendered under the amount, right-aligned (e.g. a `StatusChip`). */
+    trailing?: ReactNode;
+    /** Tints the whole row with the tone's fill. */
+    tone?: RecordTone;
 }
 /** The "Pay Service fee" radio-toggle row. */
 export interface SummaryServiceFee {
@@ -66,18 +73,18 @@ export interface SummaryServiceFee {
     /** Fires when the row/radio is toggled. */
     onToggle?: () => void;
 }
-/** A plain totals row (Subtotal, Taxes). */
+/** A plain totals row (Subtotal, Discounts, Taxes). */
 export interface SummaryTotalRow {
     /** Stable key for `data-testid` (e.g. 'subtotal', 'taxes'). */
     key: string;
     label: ReactNode;
     amount: Money;
+    /** Stable id; when set and `onRemoveTotalRow` exists, the row shows the remove control (e.g. one row per removable discount). */
+    id?: string;
 }
 /**
- * A post-total row — the same flat shape as {@link SummaryTotalRow}, plus an
- * optional `id` that (together with `onRemovePostTotalRow`) enables the same
- * trash remove control the line items use. Kept as its own interface so the
- * pre-total `rows` — where an id/remove has no meaning — stay untouched.
+ * A post-total row — the same flat shape as {@link SummaryTotalRow}; rows with
+ * an `id` show the trash remove control when `onRemovePostTotalRow` exists.
  */
 export interface SummaryPostTotalRow extends SummaryTotalRow {
     /** Stable id; when set and `onRemovePostTotalRow` exists, the row shows the remove control. */
@@ -94,6 +101,8 @@ export interface SummaryPrimaryAction {
 export interface SummaryLabels {
     /** Aria label for the per-item remove control. Default "Remove item". */
     removeAriaLabel?: string;
+    /** Aria label for the per-totals-row remove control. Default "Remove discount". */
+    removeTotalRowAriaLabel?: string;
     /** Aria label for the per-post-total-row remove control. Default "Remove applied code". */
     removePostTotalRowAriaLabel?: string;
     /** Aria label for the collapse/expand press target. Default "Toggle summary". */
@@ -150,7 +159,11 @@ export interface SummaryProps {
     items?: SummaryLineItem[];
     /** Optional "Pay Service fee" radio-toggle row. */
     serviceFee?: SummaryServiceFee;
-    /** Plain totals rows rendered above the Total (Subtotal, Taxes). */
+    /**
+     * Plain totals rows rendered above the Total (Subtotal, Discounts, Taxes).
+     * Rows with an `id` show the trash remove control when `onRemoveTotalRow`
+     * is provided (same gating as the item remove, incl. `showRemoveButton`).
+     */
     rows?: SummaryTotalRow[];
     /** The emphasized Total row (label default "Total"). */
     total: {
@@ -182,9 +195,9 @@ export interface SummaryProps {
      */
     ctaCaption?: ReactNode;
     /**
-     * Whether the remove (trash) controls are shown — per-item and
-     * per-post-total-row alike. Defaults to `true`; pass `false` to hide them
-     * even when `onRemoveItem` / `onRemovePostTotalRow` are wired. Independent
+     * Whether the remove (trash) controls are shown — per-item, per-totals-row
+     * and per-post-total-row alike. Defaults to `true`; pass `false` to hide them
+     * even when `onRemoveItem` / `onRemoveTotalRow` / `onRemovePostTotalRow` are wired. Independent
      * of the handlers so a host can keep them but suppress the controls.
      */
     showRemoveButton?: boolean;
@@ -213,6 +226,8 @@ export interface SummaryProps {
     primaryAction?: SummaryPrimaryAction;
     /** When provided, item rows show a red trash remove control. */
     onRemoveItem?: (id: string) => void;
+    /** When provided, totals rows (above the Total) with an `id` show the same red trash remove control. */
+    onRemoveTotalRow?: (id: string) => void;
     /** When provided, post-total rows with an `id` show the same red trash remove control. */
     onRemovePostTotalRow?: (id: string) => void;
     /**
@@ -231,6 +246,13 @@ export interface SummaryProps {
     /** Rendered when there are no items. */
     emptyState?: ReactNode;
     labels?: SummaryLabels;
+    /**
+     * Visual density. `'compact'` drops the card's title and the prices row, removes the
+     * `{qty} x` prefix, separates items with dividers, renders the totals rows
+     * small and muted and a smaller Total without a divider above it (e.g. a POS
+     * cart panel). Defaults to `'default'`.
+     */
+    density?: 'default' | 'compact';
     'data-testid'?: string;
     className?: string;
     /** Per-slot class overrides (Design-System `classNames` convention). */

package/dist/patterns/TableSkeleton/TableSkeleton.d.ts

@@ -25,6 +25,7 @@ export interface TableSkeletonProps {
     barHeight?: number;
     /** Right-aligns the last column's bar, for a trailing numeric or actions column. */
     alignLastRight?: boolean;
+    appearance?: 'pulse' | 'shimmer';
     className?: string;
     classNames?: TableSkeletonClassNames;
     'data-testid'?: string;

package/dist/patterns/ToolbarButton/ToolbarButton.d.ts

@@ -10,6 +10,7 @@ export type ToolbarButtonProps = Omit<ComponentPropsWithoutRef<typeof Button>, '
      * count straight through without guarding it.
      */
     count?: number;
+    appearance?: 'pill' | 'outline';
     /** Forwarded as `data-testid`. */
     testId?: string;
 };
@@ -23,6 +24,7 @@ export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<Omit<Om
      * count straight through without guarding it.
      */
     count?: number;
+    appearance?: "pill" | "outline";
     /** Forwarded as `data-testid`. */
     testId?: string;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/patterns/index.d.ts

@@ -99,7 +99,7 @@ export { Summary } from './Summary';
 export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPostTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';
 export { WizardShell } from './WizardShell';
 export type { WizardShellProps, WizardStep, WizardStepState, WizardShellPrimaryAction, WizardShellSecondaryAction, WizardShellTotalRow, WizardShellLabels, } from './WizardShell';
-export type { TenderError, DestinationLine, DestinationStatus } from './shared';
+export type { TenderError, DestinationLine, DestinationStatus, RecordTone } from './shared';
 export { LineItemList } from './LineItemList';
 export type { LineItemListProps, LineItemView, ItemSelection, LineItemState, LineItemRestockView, ItemDisposition, AmountOnlyView, LineItemListLabels, } from './LineItemList';
 export { MetaCard } from './MetaCard';
@@ -120,3 +120,35 @@ export { PinField } from './PinField';
 export type { PinFieldProps, PinFieldLabels } from './PinField';
 export { OutcomeView } from './OutcomeView';
 export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel } from './OutcomeView';
+export { FilterSelect } from './FilterSelect';
+export type { FilterSelectProps, FilterSelectOption } from './FilterSelect';
+export { LoadMoreFooter } from './LoadMoreFooter';
+export type { LoadMoreFooterProps, LoadMoreStatus } from './LoadMoreFooter';
+export { CardList } from './CardList';
+export type { CardListProps, CardListItem } from './CardList';
+export { RecordHeader } from './RecordHeader';
+export type { RecordHeaderProps, RecordHeaderStat } from './RecordHeader';
+export { RecordLayout } from './RecordLayout';
+export type { RecordLayoutProps } from './RecordLayout';
+export { StatTiles } from './StatTiles';
+export type { StatTilesProps, StatTileItem } from './StatTiles';
+export { PillTabs, pillTabId, pillTabPanelId, pillTabPanelProps } from './PillTabs';
+export type { PillTabsProps, PillTabItem } from './PillTabs';
+export { AmountList } from './AmountList';
+export type { AmountListProps, AmountListRow } from './AmountList';
+export { ActivityTimeline } from './ActivityTimeline';
+export type { ActivityTimelineProps, ActivityTimelineEvent } from './ActivityTimeline';
+export { RelatedRecordList } from './RelatedRecordList';
+export type { RelatedRecordListProps, RelatedRecordRow } from './RelatedRecordList';
+export { RecordCard } from './RecordCard';
+export type { RecordCardProps, RecordCardVariant, RecordCardBody } from './RecordCard';
+export { CardStack } from './CardStack';
+export type { CardStackProps, CardStackLayout } from './CardStack';
+export { KeyValueRows } from './KeyValueRows';
+export type { KeyValueRowsProps, KeyValueRow, KeyValueRowsDensity } from './KeyValueRows';
+export { LineItemRows } from './LineItemRows';
+export type { LineItemRowsProps, LineItemRow } from './LineItemRows';
+export { RecordTotals } from './RecordTotals';
+export type { RecordTotalsProps, RecordTotalsRow } from './RecordTotals';
+export { CellText, ChipStack } from './CellText';
+export type { CellTextProps, CellTextVariant, ChipStackProps } from './CellText';

package/dist/patterns/shared/hasContent.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare function hasContent(node: ReactNode): boolean;

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

@@ -1 +1,2 @@
 export type { TenderError, DestinationLine, DestinationStatus } from './types';
+export type { RecordTone } from './recordTone';

package/dist/patterns/shared/motion.d.ts

@@ -0,0 +1,6 @@
+export declare const POS_REDUCE_MOTION_ATTRIBUTE = "data-pos-reduce-motion";
+export declare const stillTransitionClass = "motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+export declare const stillAnimationClass = "motion-reduce:animate-none [html[data-pos-reduce-motion=true]_&]:animate-none";
+export declare const shimmerClass = "rounded-[0.375rem] bg-[linear-gradient(90deg,#F0F0F1_0,#F9F9FA_12.5rem,#F0F0F1_25rem)] bg-[length:50rem_100%] animate-record-shimmer motion-reduce:animate-none [html[data-pos-reduce-motion=true]_&]:animate-none";
+export declare function prefersReducedMotion(): boolean;
+export declare function useReducedMotion(): boolean;

package/dist/patterns/shared/recordTone.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+export type RecordTone = 'ok' | 'warn' | 'danger' | 'info' | 'violet' | 'neutral';
+export interface RecordTonePair {
+    fg: string;
+    bg: string;
+}
+export declare const RECORD_TONE: Record<RecordTone, RecordTonePair>;
+export type SignedAmountTone = 'positive' | 'negative' | 'neutral';
+export declare function amountToneStyle(tone: SignedAmountTone | undefined): CSSProperties | undefined;

package/dist/patterns/shared/rem.d.ts

@@ -0,0 +1,4 @@
+export declare const ROOT_FONT_PX = 16;
+export declare const rem: (px: number) => string;
+export declare function rootFontSizePx(): number;
+export declare const atLeastRem: (widthPx: number, rems: number) => boolean;

package/dist/patterns/shared/useContainerWidth.d.ts

@@ -0,0 +1,6 @@
+export declare const CONTAINER_MEDIUM = 768;
+export declare const CONTAINER_WIDE = 1120;
+export declare function useContainerWidth<T extends HTMLElement>(): {
+    ref: import('react').RefObject<T | null>;
+    width: number;
+};

package/dist/patterns/shared/useDecimalDraft.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Keeps the text a cashier typed into a money input separate from the number
+ * the host holds.
+ *
+ * A money input whose display is `String(value)` loses what the cashier is
+ * mid-way through typing: `'40.'` parses to `40` and is re-rendered as `'40'`,
+ * so the next `0` produces `'400'` and `'40.00'` ends up read as 4000. The hook
+ * keeps the typed string and shows it while it still parses to `value` (the
+ * echo of the cashier's own keystroke). When the host holds a number the draft
+ * does not represent (a reset, a prefill, a host that ignores the keystroke),
+ * the input shows `format(value)` instead, so the host stays in control.
+ */
+/**
+ * Whether `text` is one amount, possibly partial, in a currency with
+ * `fractionDigits` minor digits: digits, then at most one `.` or `,` followed
+ * by at most `fractionDigits` digits (`''`, `'40'`, `'40.'`, `'40,5'`, `'.5'`).
+ * Anything else would show one amount while emitting another, because
+ * `parseFloat` reads only a prefix and `,` is the decimal separator: `'40.5.9'`
+ * and `'4a'` would emit 40.5 and 4, and `'1,000'` would emit 1. Callers reject
+ * such a keystroke instead of storing it, so the input keeps what it showed.
+ */
+export declare const isDecimalDraft: (text: string, fractionDigits: number) => boolean;
+/** Parses a typed amount (`'40.5'`, `'40,5'`, `'40.'`); `null` when there is no number yet (`''`, `'.'`, `','`). */
+export declare const parseDecimalDraft: (draft: string) => number | null;
+export interface DecimalDraft {
+    /** The text to show in the input. */
+    draft: string;
+    /** Stores the text the cashier typed. */
+    setDraft: (next: string) => void;
+    /** Rewrites the draft in its canonical form (`'40.'` → `'40'`) without changing its value. */
+    normalize: () => void;
+}
+export declare const useDecimalDraft: (value: number | null | undefined, format: (value: number | null | undefined) => string) => DecimalDraft;

package/dist/tailwind/index.cjs

@@ -274,6 +274,9 @@ var posSurfaceTokens = {
   line: "#E7E7E9",
   /** `--line2`: the lighter hairline under list rows and above the role bar. */
   "line-2": "#F1F1F3",
+  hair: "#F0F0F1",
+  page: "#FBFBFB",
+  field: "#E5E5E5",
   /** `--okb` / `--okf` */
   "ok-fill": "#EAF3DE",
   ok: "#3B6D11",
@@ -288,6 +291,10 @@ var posSurfaceTokens = {
   /** `--ib` / `--if` */
   "info-fill": "#EAF1FC",
   info: "#1D4FA8",
+  "violet-fill": "#F1ECFB",
+  violet: "#6D28D9",
+  "neutral-fill": "#F4F4F5",
+  neutral: "#52525B",
   /** `.btn-dstr` — the fill behind an irreversible confirmation. */
   destructive: "#A32D2D"
 };
@@ -314,7 +321,16 @@ var tailwindTheme = {
   spacing,
   fontSize: typography.fontSize,
   fontWeight: typography.fontWeight,
-  lineHeight: typography.lineHeight
+  lineHeight: typography.lineHeight,
+  keyframes: {
+    "record-shimmer": {
+      "0%": { backgroundPosition: "-25rem 0" },
+      "100%": { backgroundPosition: "25rem 0" }
+    }
+  },
+  animation: {
+    "record-shimmer": "record-shimmer 1.3s linear infinite"
+  }
 };
 function deepMerge(target, source) {
   if (!source || typeof source !== "object") {