@veevarts/design-system 2.1.0-beta.20 → 2.1.0-beta.23

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

@@ -5,6 +5,12 @@ export interface UnderlineTabsSlots {
     tab: string;
     tabContent: string;
 }
-export declare const underlineTabsSlots: Record<'md' | 'sm-primary' | 'sm-secondary', UnderlineTabsSlots>;
+export declare const underlineTabsSlots: Record<'md' | 'lg' | 'sm-primary' | 'sm-secondary', UnderlineTabsSlots>;
+/**
+ * Merged over any look by `showDivider={false}`: no hairline under the strip
+ * and no gap after it. `md` draws its hairline on the list, the other looks on
+ * `base`, so both slots drop theirs (and `-mb-px`, which only overlapped it).
+ */
+export declare const underlineTabsNoDivider: Pick<UnderlineTabsSlots, 'base' | 'tabList'>;
 /** Added to the `md` cursor under reduced motion: it jumps instead of sliding. */
 export declare const stillCursorClass = "data-[animated=true]:transition-none";

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,13 +4,15 @@ 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';
 export { RichTextArea, RICH_TEXT_PRESETS } from './RichText';
 export type { RichTextAreaProps } from './RichText';
 export { DonationAmounts } from './DonationAmounts';
-export type { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels, DonationAmountsVariant, } from './DonationAmounts';
+export type { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels, DonationAmountsVariant, DonationAmountsCustomAmountPlacement, } from './DonationAmounts';
 export { ExpireCartTimer } from './ExpireCartTimer';
 export type { ExpireCartTimerProps } from './ExpireCartTimer';
 export { EventDetails } from './Programs/EventDetails';
@@ -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';

package/package.json

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