@veevarts/design-system 1.16.0 → 1.17.0-alpha.2

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

@@ -4,4 +4,4 @@
  * Total + CTA, and a compact mobile bottom-bar.
  */
 export { Summary } from './Summary';
-export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, Money, } from './types';
+export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPostTotalRow, SummaryPrimaryAction, SummaryLabels, Money, } from './types';

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

@@ -73,6 +73,16 @@ export interface SummaryTotalRow {
     label: ReactNode;
     amount: Money;
 }
+/**
+ * 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.
+ */
+export interface SummaryPostTotalRow extends SummaryTotalRow {
+    /** Stable id; when set and `onRemovePostTotalRow` exists, the row shows the remove control. */
+    id?: string;
+}
 /** The primary call-to-action (orange pill + arrow). */
 export interface SummaryPrimaryAction {
     label: ReactNode;
@@ -84,6 +94,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-post-total-row remove control. Default "Remove applied code". */
+    removePostTotalRowAriaLabel?: string;
     /** Aria label for the collapse/expand press target. Default "Toggle summary". */
     toggleAriaLabel?: string;
     /** Aria label for the mobile cart button. Default "View cart". */
@@ -146,9 +158,19 @@ export interface SummaryProps {
         amount: Money;
     };
     /**
-     * An optional secondary total rendered right under the Total, in the primary
-     * color (e.g. "Due Today"). Purely presentational — the host supplies both
-     * the label and the already-computed amount.
+     * Optional flat rows rendered BETWEEN the Total and the secondary total —
+     * e.g. applied gift cards as tenders ("Gift Card · …XWDG  −$50.00"). Same
+     * shape and flat style as `rows`; negative amounts are passed as data,
+     * exactly like a Discounts line. The Total itself is never affected. Rows
+     * with an `id` show the trash remove control when `onRemovePostTotalRow`
+     * is provided (same gating as the item remove, incl. `showRemoveButton`).
+     */
+    postTotalRows?: SummaryPostTotalRow[];
+    /**
+     * An optional secondary total rendered under the Total (after any
+     * `postTotalRows`), in the primary color (e.g. "Due Today"). Purely
+     * presentational — the host supplies both the label and the
+     * already-computed amount.
      */
     secondaryTotal?: {
         label: ReactNode;
@@ -160,9 +182,10 @@ export interface SummaryProps {
      */
     ctaCaption?: ReactNode;
     /**
-     * Whether the per-item remove (trash) control is shown. Defaults to `true`;
-     * pass `false` to hide it even when `onRemoveItem` is wired. Independent of
-     * `onRemoveItem` so a host can keep the handler but suppress the control.
+     * 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
+     * of the handlers so a host can keep them but suppress the controls.
      */
     showRemoveButton?: boolean;
     /**
@@ -190,6 +213,8 @@ export interface SummaryProps {
     primaryAction?: SummaryPrimaryAction;
     /** When provided, item rows show a red trash remove control. */
     onRemoveItem?: (id: string) => void;
+    /** When provided, post-total rows with an `id` show the same red trash remove control. */
+    onRemovePostTotalRow?: (id: string) => void;
     /**
      * Layout: full card (`'main'`) or the bottom-sheet / compact bar (`'mobile'`).
      * When OMITTED the layout is auto-detected from the viewport (below `md`

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

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+export interface TableSkeletonClassNames {
+    base?: string;
+    row?: string;
+    bar?: string;
+}
+export interface TableSkeletonProps {
+    /**
+     * One entry per column, giving that column's bar width.
+     *
+     * A number is a pixel width; `'fill'` makes the column take the remaining
+     * space, for the one text column that should stretch. Widths approximating
+     * the real content are what stop the layout shifting on load.
+     */
+    columns: Array<number | 'fill'>;
+    /** How many placeholder rows to draw. Default 6. */
+    rows?: number;
+    /**
+     * Announced while loading. Give it something specific ("Loading
+     * dimensions"); it is the only thing a screen reader gets from this
+     * component, since the bars themselves are hidden.
+     */
+    label?: string;
+    /** Height of each bar in pixels. Default 12. */
+    barHeight?: number;
+    /** Right-aligns the last column's bar, for a trailing numeric or actions column. */
+    alignLastRight?: boolean;
+    className?: string;
+    classNames?: TableSkeletonClassNames;
+    'data-testid'?: string;
+}
+export declare const TableSkeleton: React.FC<TableSkeletonProps>;

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

@@ -0,0 +1,2 @@
+export { TableSkeleton } from './TableSkeleton';
+export type { TableSkeletonProps, TableSkeletonClassNames } from './TableSkeleton';

package/dist/patterns/UnderlineTabs/UnderlineTabs.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+export interface UnderlineTabItem<K extends string = string> {
+    key: K;
+    label: React.ReactNode;
+}
+export interface UnderlineTabsProps<K extends string = string> {
+    items: UnderlineTabItem<K>[];
+    value: K;
+    onChange: (key: K) => void;
+    /** Names the tablist. Required — an unnamed tablist gives no context. */
+    ariaLabel: string;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare function UnderlineTabs<K extends string = string>({ items, value, onChange, ariaLabel, className, 'data-testid': dataTestId, }: UnderlineTabsProps<K>): import("react/jsx-runtime").JSX.Element;
+export declare namespace UnderlineTabs {
+    var displayName: string;
+}

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

@@ -0,0 +1,2 @@
+export { UnderlineTabs } from './UnderlineTabs';
+export type { UnderlineTabsProps, UnderlineTabItem } from './UnderlineTabs';

package/dist/patterns/grid-columns.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared responsive grid-column class maps for the card-picker patterns
+ * (TileSelect, and previously CheckboxCardGroup). Kept in one
+ * place so the two siblings never drift on breakpoints or column counts.
+ *
+ * The literal Tailwind classes must stay spelled out (not interpolated) so
+ * the JIT scanner keeps generating them.
+ */
+export declare const GRID_DESKTOP_COLS: Record<2 | 3 | 4, string>;
+export declare const GRID_MOBILE_COLS: Record<1 | 2, string>;

package/dist/patterns/index.d.ts

@@ -41,6 +41,32 @@ export { FilterPopover } from './FilterPopover';
 export type * from './FilterPopover';
 export { SessionTimeline } from './SessionTimeline';
 export type * from './SessionTimeline';
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps, PageHeaderClassNames } from './PageHeader';
+export { StatusChip } from './StatusChip';
+export type { StatusChipProps, StatusChipStatus } from './StatusChip';
+export { KeyValueChip } from './KeyValueChip';
+export type { KeyValueChipProps } from './KeyValueChip';
+export { DimensionChip } from './DimensionChip';
+export type { DimensionChipProps } from './DimensionChip';
+export { TableSkeleton } from './TableSkeleton';
+export type { TableSkeletonProps, TableSkeletonClassNames } from './TableSkeleton';
+export { AdminTable, adminRowClass, adminTableClass, adminTableFooterClass, adminTdClass, adminThClass, } from './AdminTable';
+export type { AdminTableProps, AdminTableColumn, AdminTableClassNames } from './AdminTable';
+export { AdminToolbar } from './AdminToolbar';
+export type { AdminToolbarProps } from './AdminToolbar';
+export { UnderlineTabs } from './UnderlineTabs';
+export type { UnderlineTabsProps, UnderlineTabItem } from './UnderlineTabs';
+export { AdminTextField, adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
+export type { AdminTextFieldProps } from './AdminTextField';
+export { RowActions } from './RowActions';
+export type { RowActionsProps, RowAction } from './RowActions';
+export { PickerRow } from './PickerRow';
+export type { PickerRowProps } from './PickerRow';
+export { PaginationSummary, pageRange } from './PaginationSummary';
+export type { PaginationSummaryProps, PaginationSummaryClassNames } from './PaginationSummary';
+export { ListPanel } from './ListPanel';
+export type { ListPanelProps, ListPanelClassNames } from './ListPanel';
 export { CashTenderForm } from './CashTenderForm';
 export type { CashTenderFormProps, CashTenderValue, CashTenderLabels, } from './CashTenderForm';
 export { CheckTenderForm } from './CheckTenderForm';
@@ -64,6 +90,6 @@ export type { PaymentCashChangeBannerProps } from './PaymentCashChangeBanner';
 export { PaymentSubAmountInput } from './PaymentSubAmountInput';
 export type { PaymentSubAmountInputProps } from './PaymentSubAmountInput';
 export { ConfirmDialog } from './ConfirmDialog';
-export type { ConfirmDialogProps } from './ConfirmDialog';
+export type { ConfirmDialogProps, ConfirmDialogVariant } from './ConfirmDialog';
 export { Summary } from './Summary';
-export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';
+export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPostTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';

package/dist/tailwind/index.d.ts

@@ -2,6 +2,7 @@ import { colors } from '../tokens/colors';
 import { typography } from '../tokens/typography';
 import { spacing } from '../tokens/spacing';
 export { colors, typography, spacing };
+export { adminSurfaceCss, adminSurfaceTokens, adminSurfaceTailwindColors } from '../tokens/admin-surface';
 export interface ColorPalette {
     50: string;
     100: string;
@@ -45,6 +46,7 @@ export interface HeroUIConfig {
  */
 export declare const tailwindTheme: {
     colors: {
+        acct: Record<string, string>;
         secondary: "#000000";
         success: "#057A54";
         warning: "#F5A524";
@@ -245,6 +247,7 @@ export declare const veevartPreset: {
     theme: {
         extend: {
             colors: {
+                acct: Record<string, string>;
                 secondary: "#000000";
                 success: "#057A54";
                 warning: "#F5A524";
@@ -475,6 +478,7 @@ export declare const tokens: {
     };
     tailwindTheme: {
         colors: {
+            acct: Record<string, string>;
             secondary: "#000000";
             success: "#057A54";
             warning: "#F5A524";

package/dist/tailwind/index.js

@@ -20,6 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/tailwind/index.ts
 var index_exports = {};
 __export(index_exports, {
+  adminSurfaceCss: () => adminSurfaceCss,
+  adminSurfaceTailwindColors: () => adminSurfaceTailwindColors,
+  adminSurfaceTokens: () => adminSurfaceTokens,
   colors: () => colors,
   createHeroUIConfig: () => createHeroUIConfig,
   deepMerge: () => deepMerge,
@@ -209,12 +212,73 @@ var spacing = {
   // 128px
 };
 
+// src/tokens/admin-surface.ts
+var { gray } = colors.neutral;
+var WARNING_TEXT = colors.palettes.warning[700];
+var WARNING_FILL = colors.palettes.warning[100];
+var SIGNED_OFF = {
+  rustFill: "#FBEBE4",
+  rustBorder: "#EBC3B1",
+  page: "#F6F7F8",
+  border: "#E7E9EC",
+  hair: "#EEF0F2",
+  okFill: "#E6F4EF",
+  dangerFill: "#FBEAE8",
+  infoFill: "#E8EEFC"
+};
+var adminSurfaceTokens = {
+  // Brand — the 500 already matches the scale exactly.
+  "--rust": colors.brand.primary[500],
+  "--rust-fill": SIGNED_OFF.rustFill,
+  "--rust-border": SIGNED_OFF.rustBorder,
+  // Chrome
+  "--page": SIGNED_OFF.page,
+  "--surface": colors.neutral.white,
+  "--border": SIGNED_OFF.border,
+  "--hair": SIGNED_OFF.hair,
+  // Text — all four match the scale's grays exactly.
+  "--ink": gray[900],
+  "--ink2": gray[700],
+  "--sub": gray[500],
+  "--muted": gray[400],
+  // Semantic — text tone paired with the tint it sits on.
+  "--ok": colors.semantic.success,
+  "--ok-fill": SIGNED_OFF.okFill,
+  "--warn": WARNING_TEXT,
+  "--warn-fill": WARNING_FILL,
+  "--danger": colors.semantic.danger,
+  "--danger-fill": SIGNED_OFF.dangerFill,
+  "--info": colors.semantic.info,
+  "--info-fill": SIGNED_OFF.infoFill
+};
+var adminSurfaceTailwindColors = Object.fromEntries(
+  Object.entries(adminSurfaceTokens).map(([name, value]) => [name.replace(/^--/, ""), value])
+);
+function adminSurfaceCss({
+  scope = ".acct",
+  fontFamily = "'NeueMontreal', system-ui, sans-serif"
+} = {}) {
+  const declarations = Object.entries(adminSurfaceTokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+  const typography2 = fontFamily ? `
+  font-family: ${fontFamily};
+  color: var(--ink);` : "";
+  return `${scope} {
+${declarations}${typography2}
+}
+`;
+}
+
 // src/tailwind/index.ts
 var tailwindTheme = {
   colors: {
     ...colors.brand,
     ...colors.neutral,
-    ...colors.semantic
+    ...colors.semantic,
+    // Back-office surface palette, namespaced so `border`/`page`/`info` do
+    // not collide with Tailwind's own utility grammar. Sourced from the
+    // same object that emits the CSS custom properties, so the utility and
+    // the property cannot disagree. See src/tokens/admin-surface.ts.
+    acct: adminSurfaceTailwindColors
   },
   fontFamily: typography.fontFamily,
   spacing,
@@ -298,6 +362,9 @@ var tokens = {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  adminSurfaceCss,
+  adminSurfaceTailwindColors,
+  adminSurfaceTokens,
   colors,
   createHeroUIConfig,
   deepMerge,

package/dist/tokens/admin-surface.d.ts

@@ -0,0 +1,58 @@
+/**
+ * The admin-surface palette, as CSS custom properties.
+ *
+ * WHY A SECOND OUTPUT FORMAT. The rest of the Design System reaches its colours
+ * through Tailwind utilities, which only works when the consuming app scans the
+ * DS `dist` in its Tailwind `content` globs. The domain packages that render
+ * back-office screens cannot rely on that: `@veevart/accounting` is absent from
+ * the portal's globs, so any utility class written there is purged from the
+ * bundle, and the Salesforce Canvas embed builds its CSS separately again. Those
+ * surfaces therefore style through inline styles over a scoped `<style>` block,
+ * and what they need from us is custom properties, not classes.
+ *
+ * The values come from `colors` — the same object that feeds the Tailwind
+ * preset. That is the whole point: before this existed, the admin palette lived
+ * inside `@veevart/accounting` as a hand-written block, got copied to a second
+ * screen, then a third and a fourth, and had already lost a token in one copy
+ * and forked `warning` away from ours. A palette owned by a domain package is a
+ * palette that forks.
+ *
+ * ```ts
+ * <style dangerouslySetInnerHTML={{ __html: adminSurfaceCss() }} />
+ * <div className="acct">…</div>
+ * ```
+ */
+/** Token name → value. Exported so tests and tooling can assert on it directly. */
+export declare const adminSurfaceTokens: Record<string, string>;
+/**
+ * Pairs whose contrast is NOT yet at WCAG AA, with the reason each is tolerated.
+ *
+ * `--info` on its tint measures 4.45:1 against the 4.5 threshold. It predates
+ * this module and no one has agreed to change it; raising the text to the
+ * scale's 700 would fix it the same way `--warn` was fixed, but that is a
+ * separate design call on a separate set of screens. Listed here rather than
+ * left to be rediscovered, so the guard below stays meaningful for the rest.
+ */
+export declare const KNOWN_CONTRAST_DEBT: readonly ["--info"];
+/**
+ * The same palette as a Tailwind colour scale, namespaced under `acct`.
+ *
+ * This is what the admin primitives actually style with — `text-acct-ink`,
+ * `bg-acct-surface`, `border-acct-hair`. Feeding it into the preset from the
+ * same object as {@link adminSurfaceTokens} is what keeps the utility and the
+ * custom property from ever disagreeing.
+ *
+ * Namespaced deliberately. Several of these names (`border`, `page`, `info`)
+ * would collide with Tailwind's own utility grammar unprefixed: a colour
+ * literally called `border` produces `border-border`, and `text-info` would
+ * read as a size to anyone skimming.
+ */
+export declare const adminSurfaceTailwindColors: Record<string, string>;
+export interface AdminSurfaceCssOptions {
+    /** Class the properties are scoped to. Defaults to `.acct`. */
+    scope?: string;
+    /** Base font stack for the surface. Pass `false` to leave typography alone. */
+    fontFamily?: string | false;
+}
+/** The palette as a `<style>`-ready rule. */
+export declare function adminSurfaceCss({ scope, fontFamily, }?: AdminSurfaceCssOptions): string;

package/dist/tokens/index.d.ts

@@ -1,4 +1,6 @@
 export { colors } from './colors';
 export { spacing } from './spacing';
 export { typography } from './typography';
+export { adminSurfaceCss, adminSurfaceTokens } from './admin-surface';
 export type { ColorToken } from './colors';
+export type { AdminSurfaceCssOptions } from './admin-surface';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "1.16.0",
+    "version": "1.17.0-alpha.2",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",