@veevarts/design-system 2.1.0-beta.13 → 2.1.0-beta.15

package/dist/patterns/ModalPanels/useModalPanels.d.ts

@@ -0,0 +1,30 @@
+/** One panel on the stack. `key` is unique per visit, so pushing the same panel twice mounts it twice. */
+export interface ModalPanelEntry<TPanel> {
+    readonly key: string;
+    readonly panel: TPanel;
+}
+export interface ModalPanelsController<TPanel> {
+    /** The panel on top — the one on screen. */
+    readonly current: TPanel;
+    /** Bottom to top. Every entry stays mounted; only the last one is shown. */
+    readonly entries: readonly ModalPanelEntry<TPanel>[];
+    /** True when there is a panel beneath the current one. */
+    readonly canGoBack: boolean;
+    /** Opens `panel` on top; Back returns to the one showing now. */
+    push: (panel: TPanel) => void;
+    /** Returns to the panel beneath. No-op on the first panel. */
+    back: () => void;
+    /** Swaps the top panel for `panel` (e.g. a saved form for its detail); Back skips the old one. */
+    replace: (panel: TPanel) => void;
+    /** Starts over with a single fresh panel — `initial` unless another is given. */
+    reset: (panel?: TPanel) => void;
+}
+/**
+ * The back-stack behind `ModalPanels`: which panel is on screen, and where Back
+ * goes from it. Back goes where the operator came from because the stack
+ * remembers it — no per-panel "return to" flags to keep in step.
+ *
+ * Owned by the component that owns the modal, so it outlives the modal's
+ * content; call `reset()` when the modal closes to start the next visit fresh.
+ */
+export declare function useModalPanels<TPanel>(initial: TPanel): ModalPanelsController<TPanel>;

package/dist/patterns/PaginationSummary/PaginationSummary.d.ts

@@ -3,6 +3,12 @@ export interface PaginationSummaryClassNames {
     base?: string;
     emphasis?: string;
 }
+/** The range `format` receives; `from` and `to` are both 0 when there is nothing to show. */
+export interface PaginationSummaryRange {
+    from: number;
+    to: number;
+    total: number;
+}
 export interface PaginationSummaryProps {
     /** Current page, 1-based. */
     page: number;
@@ -19,6 +25,12 @@ export interface PaginationSummaryProps {
      * avoid reading the change twice.
      */
     announce?: boolean;
+    /**
+     * Writes the sentence instead of the built-in English "Showing {range} of
+     * {total} {unit}". Use it to translate; `unit` and `classNames.emphasis`
+     * do not apply, since the returned node is the whole sentence.
+     */
+    format?: (range: PaginationSummaryRange) => React.ReactNode;
     className?: string;
     classNames?: PaginationSummaryClassNames;
     'data-testid'?: string;

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

@@ -1,3 +1,3 @@
 export { PaginationSummary } from './PaginationSummary';
-export type { PaginationSummaryProps, PaginationSummaryClassNames } from './PaginationSummary';
+export type { PaginationSummaryProps, PaginationSummaryClassNames, PaginationSummaryRange } from './PaginationSummary';
 export { pageRange } from './page-range';

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

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

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

@@ -1,10 +1,20 @@
+import { PillTabsSize } from './types';
 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 tab: "h-auto flex-1 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";
+    readonly tabContent: "leading-[1.5] font-normal text-default-600 group-data-[selected=true]:font-semibold group-data-[selected=true]:text-default-900";
+    readonly title: "flex items-center whitespace-nowrap";
+    readonly icon: "flex shrink-0";
+    readonly count: "rounded-full bg-default-200 py-px leading-[1.5] font-semibold text-default-600 group-data-[selected=true]:bg-acct-rust-fill group-data-[selected=true]:text-primary-600";
 };
+/** `lg`: 12px above and below a 24px line (16px text) is a 48px tab, in rem so it scales. */
+export declare const pillTabsSizeClass: Record<PillTabsSize, {
+    tab: string;
+    tabContent: string;
+    title: string;
+    icon: string;
+    count: string;
+}>;

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

@@ -1,7 +1,13 @@
+import { ReactNode } from 'react';
+export type PillTabsSize = 'md' | 'lg';
 export interface PillTabItem {
     key: string;
     label: string;
     count?: number;
+    /** Decorative glyph before the label; hidden from assistive tech, the label names the tab. */
+    icon?: ReactNode;
+    /** Replaces the derived `<data-testid>-<key>`; the count becomes `<this>-count`. */
+    'data-testid'?: string;
 }
 export interface PillTabsProps {
     items: PillTabItem[];
@@ -9,5 +15,7 @@ export interface PillTabsProps {
     onChange: (key: string) => void;
     ariaLabel: string;
     idPrefix?: string;
+    /** `md` (default) is the 38px record-page tab; `lg` is the 48px touch target, with larger text. */
+    size?: PillTabsSize;
     'data-testid'?: string;
 }

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

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

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

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

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

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

package/dist/patterns/index.d.ts

@@ -58,7 +58,7 @@ export type { TableSkeletonProps, TableSkeletonClassNames } from './TableSkeleto
 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 type { AdminToolbarProps, AdminToolbarSearchWidth, AdminToolbarSize } from './AdminToolbar';
 export { ToolbarButton } from './ToolbarButton';
 export type { ToolbarButtonProps } from './ToolbarButton';
 export { UnderlineTabs } from './UnderlineTabs';
@@ -69,8 +69,10 @@ export { RowActions } from './RowActions';
 export type { RowActionsProps, RowAction } from './RowActions';
 export { PickerRow } from './PickerRow';
 export type { PickerRowProps } from './PickerRow';
+export { EntityRow, EntityList, EntityListSkeleton } from './EntityRow';
+export type { EntityRowProps, EntityRowSize, EntityRowVariant, EntityRowTag, EntityRowTagTone, EntityRowLeading, EntityRowAction, EntityListProps, EntityListSkeletonProps, } from './EntityRow';
 export { PaginationSummary, pageRange } from './PaginationSummary';
-export type { PaginationSummaryProps, PaginationSummaryClassNames } from './PaginationSummary';
+export type { PaginationSummaryProps, PaginationSummaryClassNames, PaginationSummaryRange } from './PaginationSummary';
 export { ListPanel } from './ListPanel';
 export type { ListPanelProps, ListPanelClassNames } from './ListPanel';
 export { CashTenderForm } from './CashTenderForm';
@@ -97,6 +99,12 @@ export { PaymentSubAmountInput } from './PaymentSubAmountInput';
 export type { PaymentSubAmountInputProps } from './PaymentSubAmountInput';
 export { ConfirmDialog } from './ConfirmDialog';
 export type { ConfirmDialogProps, ConfirmDialogVariant } from './ConfirmDialog';
+export { InlineConfirm } from './InlineConfirm';
+export type { InlineConfirmProps, InlineConfirmVariant, InlineConfirmSize } from './InlineConfirm';
+export { ModalPanels, ModalPanelHeader, useModalPanel, useModalPanels } from './ModalPanels';
+export type { ModalPanelsProps, ModalPanelHeaderProps, ModalPanelState, ModalPanelsController, ModalPanelEntry, } from './ModalPanels';
+export { DiscardGuard, useDiscardGuard, useDiscardGuardActions, useReportUnsavedChanges } from './DiscardGuard';
+export type { DiscardGuardProps, DiscardGuardController, DiscardGuardActions } from './DiscardGuard';
 export { Summary } from './Summary';
 export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPostTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';
 export { WizardShell } from './WizardShell';
@@ -135,7 +143,7 @@ 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 type { PillTabsProps, PillTabItem, PillTabsSize } from './PillTabs';
 export { AmountList } from './AmountList';
 export type { AmountListProps, AmountListRow } from './AmountList';
 export { ActivityTimeline } from './ActivityTimeline';
@@ -143,7 +151,7 @@ export type { ActivityTimelineProps, ActivityTimelineEvent } from './ActivityTim
 export { RelatedRecordList } from './RelatedRecordList';
 export type { RelatedRecordListProps, RelatedRecordRow } from './RelatedRecordList';
 export { RecordCard } from './RecordCard';
-export type { RecordCardProps, RecordCardVariant, RecordCardBody } from './RecordCard';
+export type { RecordCardProps, RecordCardVariant, RecordCardBody, RecordCardSurface } from './RecordCard';
 export { CardStack } from './CardStack';
 export type { CardStackProps, CardStackLayout } from './CardStack';
 export { KeyValueRows } from './KeyValueRows';

package/dist/providers/DensityProvider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { Density } from './density';
+export interface DensityProviderProps {
+    density: Density;
+    children: ReactNode;
+}
+export declare function DensityProvider({ density, children }: DensityProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/providers/density.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The density context and the hooks that read it. Split from
+ * `DensityProvider.tsx` so that file exports a component only (fast refresh).
+ */
+export type Density = 'default' | 'touch';
+/** The HeroUI control sizes a density maps onto. */
+export type ControlSize = 'sm' | 'md' | 'lg';
+export declare const DensityContext: import('react').Context<Density>;
+/** The density of the nearest `DensityProvider`; `'default'` outside one. */
+export declare function useDensity(): Density;
+/**
+ * The HeroUI size for a control whose everyday size is `base`.
+ *
+ * A component passes the size it has always had and gets `lg` back only under
+ * `touch`, so a page that never mounts the provider is untouched.
+ */
+export declare function useControlSize<TBase extends ControlSize>(base: TBase): TBase | 'lg';

package/dist/providers/index.d.ts

@@ -1 +1,5 @@
 export { HeroUIProvider } from './HeroUIProvider';
+export { DensityProvider } from './DensityProvider';
+export type { DensityProviderProps } from './DensityProvider';
+export { useDensity, useControlSize } from './density';
+export type { Density, ControlSize } from './density';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.1.0-beta.13",
+    "version": "2.1.0-beta.15",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -104,7 +104,7 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "eslint-plugin-storybook": "^10.0.8",
-        "framer-motion": "^11.15.0",
+        "framer-motion": "^12.43.0",
         "globals": "^16.5.0",
         "jsdom": "^27.4.0",
         "lucide-react": "^0.562.0",