@veevarts/design-system 2.27.0 → 2.28.0

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.27.0",
+    "version": "2.28.0",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",