@veevarts/design-system 2.26.0 → 2.28.0

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

@@ -0,0 +1,140 @@
+import { default as React } from 'react';
+export interface TileSelectOption {
+    /** Stable identifier returned via `onSelect`. */
+    key: string;
+    /** Visible label rendered under the icon. */
+    label: string;
+    /**
+     * Icon: iconify name (`'lucide:credit-card'`) or a `ReactNode` for
+     * fully-custom SVGs.
+     */
+    icon: string | React.ReactNode;
+    /**
+     * Disable the tile (greyed out, no click). The tile is `disabled`, so it
+     * also leaves the tab order. For an option that exists but cannot be
+     * picked yet, use `isLocked`.
+     */
+    isDisabled?: boolean;
+    /**
+     * One line of supporting copy. `variant="compact"` renders it for an
+     * option that ended up in the "More" menu, where the label alone
+     * ("Other") rarely says enough. `variant="tiles"` renders it only in a
+     * grid opted in to the detailed tile (some option has a `badge` or is
+     * `isLocked`): on the `size="md"` tile under the label, and as the item
+     * description in the small-viewport `<Select>`. On its own it changes
+     * nothing in the tile grid.
+     */
+    description?: string;
+    /**
+     * A short tag on the tile's top row: "Coming soon", "New".
+     * `variant="tiles"` at `size="md"`; also the end of its `<Select>` item.
+     * Opts the grid in to the detailed tile.
+     */
+    badge?: string;
+    /**
+     * Shown, not pickable: a dashed, muted tile that ignores presses. Unlike
+     * `isDisabled` it stays focusable and is `aria-disabled`, so keyboard and
+     * screen-reader users reach it and hear `lockedReason`. `variant="compact"`
+     * and the small-viewport `<Select>` treat it as disabled. Opts the grid in
+     * to the detailed tile.
+     */
+    isLocked?: boolean;
+    /** What a locked tile announces. Defaults to `badge`. */
+    lockedReason?: string;
+    /**
+     * `variant="compact"` only: keep this option in the "More" menu at
+     * every width, however much room the track has. For an action that is
+     * secondary by decision rather than by measurement — a payments picker
+     * that wants "Other" one click away so the methods people actually
+     * reach for own the row.
+     *
+     * The menu is rendered whenever an option asks for it, so this also
+     * overrides the rule that suppresses a menu holding a single option.
+     */
+    alwaysInMenu?: boolean;
+    /**
+     * `variant="compact"` only: what this option is worth keeping on the
+     * track. When the pill runs out of room the LOWEST priority folds into
+     * the menu first; equal priorities fold from the end of the list.
+     * Default `0`.
+     *
+     * Display order is untouched — this decides what survives a squeeze,
+     * not where anything sits. A payments picker can list "Other" before
+     * "Split payment" and still lose "Other" first, because splitting a
+     * payment is the rarer, weightier thing to reach for.
+     */
+    priority?: number;
+    /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
+    'data-testid'?: string;
+}
+/**
+ * `'tiles'` — the icon-over-label grid, with a `<Select>` dropdown under
+ * `md`. The picker is the subject of the step.
+ *
+ * `'compact'` — a segmented pill of label-only toggles at every width,
+ * keeping every option the track can hold and folding the rest into a
+ * "More" menu rather than scrolling. The picker is a control among others.
+ */
+export type TileSelectVariant = 'tiles' | 'compact';
+/**
+ * Tile size for `variant="tiles"`.
+ *
+ * `'md'` (default) — the 80px icon-over-label tile of the payments drop-in.
+ *
+ * `'sm'` — the 58px tender tile of the Quick Donation / Quick Membership
+ * mockups (`.tender-tile`): 17px icon over an 11.5px label, 10px/4px padding,
+ * 12px radius, 8px between tiles; the picked tile takes a brand border, a 9%
+ * brand tint and brand text. DS tokens only, rem only.
+ */
+export type TileSelectSize = 'md' | 'sm';
+export interface TileSelectProps {
+    /** Options to render in order. */
+    options: readonly TileSelectOption[];
+    /** Currently selected option `key`. `null` = no selection. */
+    selectedKey: string | null;
+    /** Fires when a tile is selected. */
+    onSelect: (key: string) => void;
+    /** Optional heading rendered above the grid. */
+    heading?: string;
+    /**
+     * `aria-label` for the wrapping group when `heading` is omitted.
+     * Translatable. Default `'Select an option'`. When `heading` is
+     * provided this prop is ignored — the grid is labelled by the
+     * heading element.
+     */
+    ariaLabel?: string;
+    /**
+     * How the options render. Default `'tiles'`.
+     * See {@link TileSelectVariant}.
+     */
+    variant?: TileSelectVariant;
+    /**
+     * `variant="compact"` only: a CAP on how many options stay on the pill.
+     * Unset by default, and normally best left that way — the pill already
+     * measures the track and keeps every option that fits, folding only
+     * what is left over. Set it when a surface wants a shorter row than
+     * its width allows.
+     *
+     * The cap gives way in one case: when honouring it would leave a single
+     * option in the menu that the track had room for. A "More" button is
+     * wider than most labels, so that fold costs space and buys a click.
+     */
+    maxVisible?: number;
+    /**
+     * `variant="compact"` only: label for the overflow trigger. Shown
+     * until an option inside the menu is selected, after which the
+     * trigger carries that option's label. Translatable. Default `'More'`.
+     */
+    moreLabel?: string;
+    /**
+     * Grid columns on >= sm. Default `3`. Mobile collapses to 2.
+     * `5` and `6` keep a full method set on one row on a wide surface.
+     * Ignored by `variant="compact"`, which is a single strip.
+     */
+    columnsDesktop?: 2 | 3 | 4 | 5 | 6;
+    columnsMobile?: 1 | 2;
+    /** `variant="tiles"` only. See {@link TileSelectSize}. Default `'md'`. */
+    size?: TileSelectSize;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/VerticalSteps/StepPager.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { StepPagerProps } from './types';
+export declare function StepPager({ steps, currentStep, onStepChange, progressLabel, nextLabel, previousLabel, finalActionLabel, onFinalAction, isFinalActionDisabled, className, 'data-testid': dataTestId, previousTestId, nextTestId, finalActionTestId, }: StepPagerProps): JSX.Element;
+export declare namespace StepPager {
+    var displayName: string;
+}

package/dist/patterns/VerticalSteps/StepsReadiness.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { StepsReadinessProps } from './types';
+/**
+ * The verdict that sits in `VerticalSteps`' `header`: ready to publish,
+ * N things to fix, or already live. Copy comes in as props.
+ *
+ * `role="status"` on every variant: the count changes while the user edits,
+ * and a polite announcement is the right weight for it. `data-ready` is
+ * `"true"` for `ready` and `live`, `"false"` for `fix`, so a test can wait on
+ * it without reading copy.
+ */
+export declare function StepsReadiness({ variant, title, description, className, 'data-testid': dataTestId, }: StepsReadinessProps): JSX.Element;
+export declare namespace StepsReadiness {
+    var displayName: string;
+}

package/dist/patterns/VerticalSteps/VerticalSteps.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { VerticalStepsProps } from './types';
+export declare function VerticalSteps({ steps, currentStep: currentStepProp, defaultStep, onStepChange, isStepReachable, ariaLabel, statusLabels, header, maxHeight, className, style, 'data-testid': dataTestId, ...rest }: VerticalStepsProps): JSX.Element;
+export declare namespace VerticalSteps {
+    var displayName: string;
+}

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

@@ -0,0 +1,4 @@
+export { VerticalSteps } from './VerticalSteps';
+export { StepsReadiness } from './StepsReadiness';
+export { StepPager } from './StepPager';
+export type { VerticalStep, VerticalStepStatus, VerticalStepsProps, VerticalStepsStatusLabels, StepsReadinessProps, StepsReadinessVariant, StepPagerProps, } from './types';

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

@@ -0,0 +1,54 @@
+import { StepsReadinessVariant, VerticalStepStatus } from './types';
+/** One glyph per status, so the state reads by shape before color. */
+export declare const STEP_STATUS_ICON: Record<VerticalStepStatus, string>;
+/**
+ * `icon` paints the glyph; `meta` the line under the label.
+ *
+ * The optional ring is `--muted` (gray-400, 2.54:1): it is decorative, the
+ * visible word "Optional" carries the state. Every text tone is `--sub`
+ * (gray-500, 4.83:1) or darker; `--warn` is warning-700, 5.02:1 on white.
+ */
+export declare const STEP_STATUS_TONE: Record<VerticalStepStatus, {
+    icon: string;
+    meta: string;
+}>;
+/** Label color for every row. */
+export declare const STEP_LABEL_COLOR: string;
+export declare const READINESS_ICON: Record<StepsReadinessVariant, string>;
+/** Fill plus the one text tone on it. Both pairs are held to 4.5:1 in `admin-surface.test.ts`. */
+export declare const READINESS_TONE: Record<StepsReadinessVariant, {
+    fill: string;
+    text: string;
+}>;
+export declare const verticalStepsClass: {
+    /** Scrolls inside once `maxHeight` (or the parent) caps it. */
+    readonly root: "flex min-h-0 flex-col gap-3 overflow-y-auto overscroll-contain";
+    readonly nav: "rounded-2xl border border-acct-border bg-acct-surface p-1.5";
+    readonly list: "m-0 flex list-none flex-col gap-0.5 p-0";
+    /**
+     * The DS Button supplies the hit target, the focus ring and press
+     * handling; its centered single-line box is undone so a row can wrap.
+     */
+    readonly row: string;
+    readonly rowCurrent: "bg-acct-hair data-[hover=true]:bg-acct-hair";
+    readonly icon: "mt-px size-5 shrink-0";
+    readonly text: "flex min-w-0 flex-1 flex-col gap-0.5";
+    readonly label: "text-sm leading-5";
+    readonly labelCurrent: "font-semibold";
+    readonly meta: "text-xs leading-4 [overflow-wrap:anywhere]";
+};
+export declare const stepsReadinessClass: {
+    readonly root: "flex items-start gap-2.5 rounded-2xl px-4 py-3";
+    readonly icon: "mt-0.5 size-5 shrink-0";
+    readonly text: "flex min-w-0 flex-col";
+    readonly title: "text-sm font-semibold leading-5";
+    readonly description: "text-xs leading-4";
+};
+export declare const stepPagerClass: {
+    readonly root: "flex flex-wrap items-center justify-between gap-3";
+    /** Keeps the progress text centered when one side has no button. */
+    readonly spacer: "min-w-0 flex-1 basis-0";
+    readonly progress: "shrink-0 text-xs text-acct-sub";
+    readonly endSlot: "flex min-w-0 flex-1 basis-0 justify-end";
+    readonly arrow: "size-4";
+};

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

@@ -0,0 +1,100 @@
+import { default as React, ReactNode } from 'react';
+/**
+ * Where a step stands. `done` and `optional` need nothing; `needs-fix` is
+ * what stops the page from being ready, and carries a `reason`.
+ */
+export type VerticalStepStatus = 'done' | 'needs-fix' | 'optional';
+/** One row of a {@link VerticalSteps} panel, and one page of a {@link StepPager}. */
+export interface VerticalStep {
+    /** Stable id. Keys the row and its default test id. */
+    key: string;
+    /** Step name. The row prefixes its 1-based number; the pager shows it bare. */
+    label: string;
+    /** One line under the label: "3 tickets", "Nov 1 – Dec 31". */
+    summary?: ReactNode;
+    status: VerticalStepStatus;
+    /** What to fix ("Add the end date"). Shown instead of `summary` while `needs-fix`. */
+    reason?: ReactNode;
+    /** Override the row's test id; defaults to `${data-testid}-step-${key}`. */
+    testId?: string;
+}
+/**
+ * The status words, translated by the host. `optional` is visible
+ * ("Optional · 2 rules"); `done` and `needsFix` are read out only, before the
+ * summary or the reason, so include the punctuation your language wants there
+ * (`'Done.'`, `'Needs a fix:'`).
+ */
+export interface VerticalStepsStatusLabels {
+    done: string;
+    needsFix: string;
+    optional: string;
+}
+/**
+ * Same position model as `HorizontalSteps`: an index, controlled or not,
+ * with `onStepChange` and an `isStepReachable` gate.
+ */
+export interface VerticalStepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    steps: VerticalStep[];
+    /** Controlled index of the active step. Omit for uncontrolled mode. */
+    currentStep?: number;
+    /** Starting index in uncontrolled mode. */
+    defaultStep?: number;
+    onStepChange?: (stepIndex: number) => void;
+    /**
+     * Steps for which this returns `false` render disabled and cannot be
+     * pressed. When omitted every step is reachable, which is the program
+     * page's case: no step is locked.
+     */
+    isStepReachable?: (stepIndex: number) => boolean;
+    /** Accessible name of the `<nav>` that holds the rows ("Program steps"). */
+    ariaLabel: string;
+    statusLabels: VerticalStepsStatusLabels;
+    /** Above the rows: a {@link StepsReadiness}, or anything else. */
+    header?: ReactNode;
+    /**
+     * Cap on the panel's height; past it the panel scrolls inside. Any CSS
+     * length (`'calc(100vh - 7rem)'`) or px number. The panel never sets
+     * `position: sticky` itself: the page that places it decides that.
+     */
+    maxHeight?: string | number;
+    'data-testid'?: string;
+}
+/**
+ * `ready` and `live` are the success tone and mark the panel ready
+ * (`data-ready="true"`); `fix` is the warning tone.
+ */
+export type StepsReadinessVariant = 'ready' | 'fix' | 'live';
+export interface StepsReadinessProps {
+    variant: StepsReadinessVariant;
+    /** "Ready to publish", "2 things to fix", "Live — visitors can buy". */
+    title: ReactNode;
+    /** The sub-line: "Fix them before you can publish." */
+    description?: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+}
+export interface StepPagerProps {
+    steps: VerticalStep[];
+    /** Index of the step on screen; the same index `VerticalSteps` uses. */
+    currentStep: number;
+    onStepChange: (stepIndex: number) => void;
+    /** The middle text: `(n, total) => \`Step ${n} of ${total}\``. `n` is 1-based. */
+    progressLabel: (stepNumber: number, total: number) => ReactNode;
+    /** The forward button: `(step) => \`Next: ${step.label}\``. */
+    nextLabel: (step: VerticalStep) => ReactNode;
+    /** The back button. Defaults to the previous step's label. */
+    previousLabel?: (step: VerticalStep) => ReactNode;
+    /**
+     * Shown in place of Next on the last step ("Review and publish"). Omit it,
+     * or `onFinalAction`, and the last step has no forward button.
+     */
+    finalActionLabel?: ReactNode;
+    onFinalAction?: () => void;
+    isFinalActionDisabled?: boolean;
+    className?: string;
+    /** Root test id. The buttons' ids default to `${data-testid}-prev` / `-next` / `-final`. */
+    'data-testid'?: string;
+    previousTestId?: string;
+    nextTestId?: string;
+    finalActionTestId?: string;
+}

package/dist/patterns/index.d.ts

@@ -4,6 +4,8 @@ export { Stepper } from './Stepper';
 export type { StepperProps } from './Stepper';
 export { HorizontalSteps } from './HorizontalSteps';
 export type { HorizontalStepsProps, HorizontalStepProps } from './HorizontalSteps';
+export { VerticalSteps, StepsReadiness, StepPager } from './VerticalSteps';
+export type { VerticalStep, VerticalStepStatus, VerticalStepsProps, VerticalStepsStatusLabels, StepsReadinessProps, StepsReadinessVariant, StepPagerProps, } from './VerticalSteps';
 export { Footer } from './Footer';
 export { Multiselect } from './Multiselect';
 export type { MultiselectProps } from './Multiselect';
@@ -63,8 +65,8 @@ export { ToolbarButton } from './ToolbarButton';
 export type { ToolbarButtonProps } from './ToolbarButton';
 export { UnderlineTabs } from './UnderlineTabs';
 export type { UnderlineTabsProps, UnderlineTabItem, UnderlineTabsSize, UnderlineTabsLevel } from './UnderlineTabs';
-export { AdminFieldLabel, AdminTextField, adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
-export type { AdminTextFieldProps } from './AdminTextField';
+export { AdminFieldLabel, AdminTextField, adminFieldErrorClass, adminFieldHelpButtonClass, adminFieldHelpContentClass, adminFieldHelpIconClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelNoAutoMarkClass, adminFieldLabelRowClass, adminFieldLabelSuffixClass, adminFieldRequiredClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
+export type { AdminTextFieldProps, AdminFieldLabelProps, AdminFieldRequiredProps, AdminFieldHelpProps, } from './AdminTextField';
 export { RowActions } from './RowActions';
 export type { RowActionsProps, RowAction } from './RowActions';
 export { PickerRow } from './PickerRow';
@@ -170,3 +172,5 @@ export { CellText, ChipStack } from './CellText';
 export type { CellTextProps, CellTextVariant, ChipStackProps } from './CellText';
 export { SessionExpiredCard } from './SessionExpiredCard';
 export type { SessionExpiredCardProps } from './SessionExpiredCard';
+export { Notice } from './Notice';
+export type { NoticeProps, NoticeTone, NoticeVariant } from './Notice';

package/dist/providers/HeroUIProvider.d.ts

@@ -14,6 +14,12 @@ interface HeroUIProviderProps {
      * buttons of overlays, date and number formatting. Without it HeroUI uses `"en-US"`.
      */
     locale?: string;
+    /**
+     * How framer-motion animations (overlays, toasts, tabs) treat the OS "reduce motion" setting.
+     * Defaults to `"user"`: follow the OS. HeroUI's own default is `"never"`, which animates regardless.
+     * `"always"` drops them everywhere, e.g. for an app-level reduce-motion preference.
+     */
+    reducedMotion?: 'user' | 'always' | 'never';
 }
-export declare function HeroUIProvider({ children, closeLabel, locale }: HeroUIProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeroUIProvider({ children, closeLabel, locale, reducedMotion }: HeroUIProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/providers/ToastProvider.d.ts

@@ -0,0 +1,16 @@
+import { ToastProvider as BaseToastProvider } from '@heroui/react';
+import { ComponentProps, JSX } from 'react';
+export type ToastProviderProps = ComponentProps<typeof BaseToastProvider>;
+/**
+ * Drop-in for HeroUI's `ToastProvider` (same props, same `addToast` queue).
+ *
+ * - Titles wrap instead of truncating. A `toastProps.classNames.title` you pass
+ *   is merged after the default, so it can still restyle the title.
+ * - Animation is off when the OS or the POS asks for reduced motion, unless
+ *   `disableAnimation` is passed.
+ *
+ * HeroUI merges an `addToast({ classNames })` over the provider's `classNames`
+ * as a whole object, so a per-toast `classNames` without a `title` key brings
+ * the truncation back for that toast.
+ */
+export declare function ToastProvider({ toastProps, disableAnimation, ...props }: ToastProviderProps): JSX.Element;

package/dist/providers/index.d.ts

@@ -1,4 +1,6 @@
 export { HeroUIProvider } from './HeroUIProvider';
+export { ToastProvider } from './ToastProvider';
+export type { ToastProviderProps } from './ToastProvider';
 export { DensityProvider } from './DensityProvider';
 export type { DensityProviderProps } from './DensityProvider';
 export { useDensity, useControlSize } from './density';

package/package.json

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