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

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.14",
+    "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",