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

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

@@ -0,0 +1,40 @@
+import { Money } from '../../utils/money';
+export type { Money } from '../../utils/money';
+export type RefundItemState = 'selectable' | 'already_refunded' | 'non_refundable';
+export interface RefundItemRestockView {
+    available: boolean;
+    unavailableHint?: string;
+    on: boolean;
+}
+export interface RefundItemView {
+    id: string;
+    name: string;
+    quantity: number;
+    paidAmount: Money;
+    state: RefundItemState;
+    warning?: string;
+    restock: RefundItemRestockView;
+}
+export interface ItemSelection {
+    selected: boolean;
+    mode: 'full' | 'partial';
+    partialAmount?: number;
+}
+export interface RefundItemListLabels {
+    refunded?: string;
+    ineligible?: string;
+    partialLink?: string;
+    partialOf?: string;
+    partialCancel?: string;
+    restockTitle?: string;
+    restockHint?: string;
+}
+export interface RefundItemListProps {
+    items: RefundItemView[];
+    selections: Record<string, ItemSelection>;
+    onSelectionChange: (itemId: string, selection: ItemSelection) => void;
+    onRestockToggle: (itemId: string, on: boolean) => void;
+    labels?: RefundItemListLabels;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/RefundTotalBar/RefundTotalBar.d.ts

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

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

@@ -0,0 +1,2 @@
+export { RefundTotalBar } from './RefundTotalBar';
+export type { RefundTotalBarProps, RefundTotalBarLabels } from './types';

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

@@ -0,0 +1,13 @@
+import { Money } from '../../utils/money';
+export type { Money } from '../../utils/money';
+export interface RefundTotalBarLabels {
+    title?: string;
+    partialBadge?: string;
+}
+export interface RefundTotalBarProps {
+    total: Money;
+    isPartial: boolean;
+    labels?: RefundTotalBarLabels;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/RowActions/RowActions.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface RowAction {
+    key: string;
+    /** Accessible name AND tooltip. Include the subject: "Edit Annual Fund", not "Edit". */
+    label: string;
+    icon: React.ReactNode;
+    onPress: () => void;
+    disabled?: boolean;
+}
+export interface RowActionsProps {
+    actions: RowAction[];
+    /** Button edge length. `'md'` (30px) by default, `'sm'` (24px) for dense rows. */
+    size?: 'sm' | 'md';
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const RowActions: React.FC<RowActionsProps>;

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

@@ -0,0 +1,2 @@
+export { RowActions } from './RowActions';
+export type { RowActionsProps, RowAction } from './RowActions';

package/dist/patterns/SplitRefundPanel/SplitRefundPanel.d.ts

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

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

@@ -0,0 +1,2 @@
+export { SplitRefundPanel } from './SplitRefundPanel';
+export type { SplitRefundPanelProps, SplitRefundPanelLabels, SplitPartView } from './types';

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

@@ -0,0 +1,51 @@
+import { Money } from '../../utils/money';
+import { MoneyBackError } from '..';
+export type { Money } from '../../utils/money';
+export interface SplitPartView {
+    /** Stable identifier for the tender this part refunds to. */
+    tenderId: string;
+    /** One-line description, e.g. `'Visa •••4242'` or `'Cash'`. */
+    label: string;
+    /** Amount already refunded for this part. `null` = not executed yet. */
+    refunded: Money | null;
+}
+export interface SplitRefundPanelLabels {
+    title?: string;
+    refundedSoFar?: string;
+    remaining?: string;
+    amountForPart?: string;
+    submit?: string;
+    back?: string;
+    partDeclinedBody?: string;
+    partNetworkBody?: string;
+    retry?: string;
+    chooseDifferent?: string;
+}
+export interface SplitRefundPanelProps {
+    /** Every part of the split, executed and pending, in entry order. */
+    parts: SplitPartView[];
+    /** Sum already refunded across executed parts. */
+    refundedSoFar: Money;
+    /** Amount left to refund across the remaining parts. */
+    remaining: Money;
+    /** The part currently being entered. */
+    current: {
+        /** Tender selected for the part being entered. `null` = not chosen yet. */
+        tenderId: string | null;
+        /** Amount typed so far, in major units. */
+        amount: number;
+        /** Fires on every keystroke with the parsed major-unit amount. */
+        onAmountChange: (next: number) => void;
+    };
+    /** Fires when the cashier submits the current part. */
+    onRefundPart: () => void;
+    /** Processor-declined / network-error banner for the current part. */
+    partError?: MoneyBackError;
+    /** Fires when the cashier navigates back out of the split flow. */
+    onBack: () => void;
+    /** Disables the submit action and shows its loading state. */
+    busy?: boolean;
+    labels?: SplitRefundPanelLabels;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/SupervisorPinField/SupervisorPinField.d.ts

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

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

@@ -0,0 +1,2 @@
+export { SupervisorPinField } from './SupervisorPinField';
+export type { SupervisorPinFieldProps, SupervisorPinFieldLabels } from './types';

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

@@ -0,0 +1,12 @@
+export interface SupervisorPinFieldLabels {
+    label?: string;
+    placeholder?: string;
+}
+export interface SupervisorPinFieldProps {
+    pin: string;
+    onChange: (pin: string) => void;
+    error?: string;
+    labels?: SupervisorPinFieldLabels;
+    className?: string;
+    'data-testid'?: string;
+}

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

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

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

@@ -0,0 +1,2 @@
+export { WizardShell } from './WizardShell';
+export type { WizardShellProps, WizardStep, WizardStepState, WizardShellPrimaryAction, WizardShellLabels, } from './types';

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export type WizardStepState = 'upcoming' | 'active' | 'done' | 'skipped';
+export interface WizardStep {
+    id: string;
+    label: string;
+    state: WizardStepState;
+}
+export interface WizardShellPrimaryAction {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+}
+export interface WizardShellLabels {
+    back?: string;
+    close?: string;
+}
+export interface WizardShellProps {
+    onClose?: () => void;
+    steps: WizardStep[];
+    activeStepId: string;
+    onBack?: () => void;
+    primaryAction: WizardShellPrimaryAction;
+    footerSummary?: ReactNode;
+    labels?: WizardShellLabels;
+    className?: string;
+    'data-testid'?: string;
+    children: ReactNode;
+}

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

@@ -1,6 +1,6 @@
 /**
  * Shared responsive grid-column class maps for the card-picker patterns
- * (TileSelect single-select, CheckboxCardGroup multi-select). Kept in one
+ * (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

package/dist/patterns/index.d.ts

@@ -45,14 +45,30 @@ 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 { CheckboxCardGroup } from './CheckboxCardGroup';
-export type { CheckboxCardGroupProps, CheckboxCardOption } from './CheckboxCardGroup';
+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 type { CashTenderFormProps, CashTenderValue, CashTenderLabels } from './CashTenderForm';
 export { CheckTenderForm } from './CheckTenderForm';
 export type { CheckTenderFormProps, CheckTenderValue, CheckTenderLabels } from './CheckTenderForm';
 export { OtherTenderForm } from './OtherTenderForm';
@@ -60,7 +76,7 @@ export type { OtherTenderFormProps, OtherTenderValue, OtherTenderLabels, OtherTe
 export { SplitPaymentSummary } from './SplitPaymentSummary';
 export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, TenderRow, TenderRowStatus, TenderRowType, } from './SplitPaymentSummary';
 export { ModalShell, ModalShellHeader, ModalShellFooter } from './ModalShell';
-export type { ModalShellProps, ModalShellHeaderProps, ModalShellFooterProps, } from './ModalShell';
+export type { ModalShellProps, ModalShellHeaderProps, ModalShellFooterProps } from './ModalShell';
 export { TileSelect } from './TileSelect';
 export type { TileSelectProps, TileSelectOption } from './TileSelect';
 export { PaymentTotalBanner } from './PaymentTotalBanner';
@@ -77,3 +93,26 @@ export { ConfirmDialog } from './ConfirmDialog';
 export type { ConfirmDialogProps, ConfirmDialogVariant } from './ConfirmDialog';
 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, WizardShellLabels, } from './WizardShell';
+export type { MoneyBackError, RefundDestinationLine, RefundDestinationStatus } from './refund-shared';
+export { RefundItemList } from './RefundItemList';
+export type { RefundItemListProps, RefundItemView, ItemSelection, RefundItemState, RefundItemRestockView, RefundItemListLabels, } from './RefundItemList';
+export { CustomAmountField } from './CustomAmountField';
+export type { CustomAmountFieldProps, CustomAmountFieldLabels, CustomAmountFieldValue } from './CustomAmountField';
+export { RefundTotalBar } from './RefundTotalBar';
+export type { RefundTotalBarProps, RefundTotalBarLabels } from './RefundTotalBar';
+export { ReasonSelect } from './ReasonSelect';
+export type { ReasonSelectProps, ReasonOption, ReasonSelectLabels } from './ReasonSelect';
+export { NotesField } from './NotesField';
+export type { NotesFieldProps, NotesFieldLabels } from './NotesField';
+export { ActingAsToggle } from './ActingAsToggle';
+export type { ActingAsToggleProps, ActingRole, ActingAsToggleLabels } from './ActingAsToggle';
+export { MoneyBackMethods } from './MoneyBackMethods';
+export type { MoneyBackMethodsProps, TenderView, TenderKind, MoneyBackMethodsLabels } from './MoneyBackMethods';
+export { SplitRefundPanel } from './SplitRefundPanel';
+export type { SplitRefundPanelProps, SplitPartView, SplitRefundPanelLabels } from './SplitRefundPanel';
+export { SupervisorPinField } from './SupervisorPinField';
+export type { SupervisorPinFieldProps, SupervisorPinFieldLabels } from './SupervisorPinField';
+export { RefundCompleteView } from './RefundCompleteView';
+export type { RefundCompleteViewProps, RefundCompleteViewLabels } from './RefundCompleteView';

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

@@ -0,0 +1 @@
+export type { MoneyBackError, RefundDestinationLine, RefundDestinationStatus } from './types';

package/dist/patterns/refund-shared/types.d.ts

@@ -0,0 +1,12 @@
+import { Money } from '../../utils/money';
+export interface MoneyBackError {
+    kind: 'processor_declined' | 'network';
+    onRetry: () => void;
+    onChooseDifferent: () => void;
+}
+export type RefundDestinationStatus = 'succeeded' | 'pending';
+export interface RefundDestinationLine {
+    label: string;
+    amount: Money;
+    status: RefundDestinationStatus;
+}

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.17.0-beta.6",
+    "version": "1.17.0-beta.8",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",

package/dist/patterns/CheckboxCardGroup/CheckboxCardGroup.d.ts

@@ -1,53 +0,0 @@
-import { default as React } from 'react';
-export interface CheckboxCardOption {
-    /** Stable identifier surfaced through `onChange`. */
-    key: string;
-    /** Visible label. */
-    label: string;
-    /** Optional secondary line under the label. */
-    description?: string;
-    /** Iconify name (`'solar:ticket-outline'`) or a custom node. */
-    icon?: string | React.ReactNode;
-    /** Disable just this card. */
-    isDisabled?: boolean;
-    /** Override per-card test id; defaults to `${dataTestId}-${key}`. */
-    'data-testid'?: string;
-}
-export interface CheckboxCardGroupClassNames {
-    base?: string;
-    grid?: string;
-    card?: string;
-    hint?: string;
-}
-export interface CheckboxCardGroupProps {
-    /** Options to render in order. */
-    options: readonly CheckboxCardOption[];
-    /** Currently selected option keys. */
-    selectedKeys: readonly string[];
-    /** Fires with the next full selection whenever a card is toggled. Keys are emitted in the original option order (not selection order); any selected key not present in `options` is preserved. */
-    onChange: (keys: string[]) => void;
-    /** Optional heading rendered above the grid (labels the group). */
-    heading?: string;
-    /** `aria-label` for the group when `heading` is omitted. Default `'Select options'`. */
-    ariaLabel?: string;
-    /** Grid columns on >= sm. Default `2`. */
-    columnsDesktop?: 2 | 3 | 4;
-    /** Grid columns on mobile. Default `1`. */
-    columnsMobile?: 1 | 2;
-    /**
-     * Minimum number of selections. When set, the group auto-derives its
-     * invalid state (`selectedKeys.length < minSelected`) and a default hint,
-     * unless `isInvalid` / `hint` are explicitly supplied.
-     */
-    minSelected?: number;
-    /** Helper text under the grid. Overrides the `minSelected` default hint. */
-    hint?: React.ReactNode;
-    /** Error styling + `aria-invalid`. Overrides the `minSelected`-derived state. */
-    isInvalid?: boolean;
-    /** Disable every card. */
-    isDisabled?: boolean;
-    className?: string;
-    classNames?: CheckboxCardGroupClassNames;
-    'data-testid'?: string;
-}
-export declare const CheckboxCardGroup: React.FC<CheckboxCardGroupProps>;

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

@@ -1,2 +0,0 @@
-export { CheckboxCardGroup } from './CheckboxCardGroup';
-export type { CheckboxCardGroupProps, CheckboxCardGroupClassNames, CheckboxCardOption, } from './CheckboxCardGroup';