@veevarts/design-system 2.1.0-beta.22 → 2.1.0-beta.24

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

@@ -5,5 +5,5 @@
  * Ensures exclusive selection (preset OR custom).
  */
 export { DonationAmounts } from './DonationAmounts';
-export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps, DonationAmountsVariant, } from './types';
+export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps, DonationAmountsVariant, DonationAmountsCustomAmountPlacement, } from './types';
 export { formatCurrency, parseCurrency } from './utils/currency';

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

@@ -20,6 +20,25 @@ interface VariantSlots {
     input: string;
 }
 export declare const donationAmountsSlots: Record<TiledVariant, VariantSlots>;
+/**
+ * `customAmountPlacement="inline"` on `tile`: the Quick entry amount row
+ * (`Main.dc.html`, `QMDonation.dc.html`), merged over the `tile` slots.
+ *
+ * One wrapping flex row instead of the grid: tiles `flex: 1 1 4.5rem`, the
+ * field `flex: 2 1 10rem`, 8px apart, as the mockup lays them out. Tiles and
+ * field are both the mockup's 3rem (`min-h-12` drops the tile's own padding
+ * height, `h-12` the field's `size` height), so the row lines up. The field
+ * keeps the `tile` hairline, radius, padding and focus ring; its digits are
+ * the mockup's 15px and the symbol beside them 14px in the neutral tone.
+ */
+export declare const donationAmountsInline: {
+    row: string;
+    preset: string;
+    field: string;
+    inputWrapper: string;
+    input: string;
+    affix: string;
+};
 /**
  * What `size` changes in `tile` and `pos`: the custom field's height and text.
  * `md` is the mockup's field (38px in `tile`, 40px in `pos`); `sm` and `lg`

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

@@ -39,6 +39,18 @@ export interface DonationAmount {
  *   and a visible label over the custom input.
  */
 export type DonationAmountsVariant = 'pill' | 'tile' | 'pos';
+/**
+ * Where the `tile` variant puts the custom amount field.
+ *
+ * - `below` (default): a row of its own under the preset grid.
+ * - `inline`: the last item of the preset row, the Quick entry amount row
+ *   (`Main.dc.html`, `QMDonation.dc.html`). Tiles share the row evenly and
+ *   the field takes twice a tile's share; the row wraps, so in a narrow
+ *   column the field drops to a full-width line of its own. Tiles and field
+ *   are both 48px tall, and the currency symbol sits beside the digits on the
+ *   side the locale puts it, so the field shows "$ Other amount".
+ */
+export type DonationAmountsCustomAmountPlacement = 'below' | 'inline';
 /**
  * Selected donation value (can be preset or custom)
  */
@@ -196,6 +208,18 @@ export interface DonationAmountsProps {
      * @default 'pill'
      */
     variant?: DonationAmountsVariant;
+    /**
+     * Where the custom amount field sits. See
+     * {@link DonationAmountsCustomAmountPlacement}. `tile` variant only.
+     *
+     * `inline` lays the presets out as one wrapping row, so `mobileColumns`
+     * and `desktopColumns` do not apply, and it has no room for
+     * `labels.customAmountLabel` above the field: when set, that label names
+     * the field instead. The preset group then holds the field too, so name it
+     * for the whole amount (`labels.title` or `labels.presetsAriaLabel`).
+     * @default 'below'
+     */
+    customAmountPlacement?: DonationAmountsCustomAmountPlacement;
     /**
      * Marks the title as required with a danger asterisk (`tile` and `pos`
      * variants). The asterisk is decorative; announce the requirement through

package/dist/patterns/DonationAmounts/utils/currency.d.ts

@@ -17,6 +17,22 @@
  * formatCurrency(5, 'en-US', 'USD', false) // "$5.00"
  */
 export declare function formatCurrency(amount: number, locale?: string, currency?: string, trimZeroCents?: boolean): string;
+/**
+ * What a field that draws the currency symbol beside the digits needs: the
+ * symbol, the side of the digits `locale` puts it on ("$" before in en-US,
+ * "$" after in fr-CA), and number formatting with the currency's own fraction
+ * digits but no symbol, so the field never shows it twice.
+ *
+ * @example
+ * currencyAffix('en-US', 'USD') // { symbol: '$', position: 'start', formatOptions: { ..., minimumFractionDigits: 2 } }
+ * currencyAffix('fr-FR', 'EUR') // { symbol: '€', position: 'end', ... }
+ * currencyAffix('ja-JP', 'JPY') // { symbol: '￥', position: 'start', formatOptions: { ..., maximumFractionDigits: 0 } }
+ */
+export declare function currencyAffix(locale?: string, currency?: string): {
+    symbol: string;
+    position: 'start' | 'end';
+    formatOptions: Intl.NumberFormatOptions;
+};
 /**
  * Parses a currency string to a number
  * @param value - The currency string to parse

package/dist/patterns/EntityRow/EntityList.d.ts

@@ -5,5 +5,11 @@ export declare const EntityList: React.FC<EntityListProps>;
  * The list in skeleton form, at the same row height so nothing shifts when the
  * rows arrive. The placeholder rows are hidden from assistive tech; `label` is
  * announced once through a `role="status"` region instead.
+ *
+ * The root is `aria-busy`: the area is loading. `role="status"` stays on the
+ * label, not on the root, so the live region itself is never busy, which would
+ * let a screen reader hold its announcement back.
+ *
+ * The bars are the DS `Skeleton`, so their shimmer stops under reduced motion.
  */
 export declare const EntityListSkeleton: React.FC<EntityListSkeletonProps>;

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

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-export type UnderlineTabsSize = 'md' | 'sm';
+export type UnderlineTabsSize = 'md' | 'lg' | 'sm';
 /**
  * `primary`: the page's own tabs; the selected label turns ink.
  * `secondary`: tabs nested inside a section; flush, padded, semibold, the
@@ -37,14 +37,22 @@ export interface UnderlineTabsProps<K extends string = string> {
     onChange: (key: K) => void;
     /** Names the tablist. Required — an unnamed tablist gives no context. */
     ariaLabel: string;
-    /** `md` (default): the back-office strip. `sm`: the Quick Donation / Quick Membership strip. */
+    /**
+     * `md` (default): the back-office strip. `sm`: the Quick Donation / Quick
+     * Membership strip. `lg`: the Quick entry header strip.
+     */
     size?: UnderlineTabsSize;
     /** See {@link UnderlineTabsLevel}. Default `primary`. Read by `size="sm"` only. */
     level?: UnderlineTabsLevel;
+    /**
+     * `true` (default): the strip draws its hairline and keeps its gap to what
+     * follows. `false`: neither, for a strip at the foot of a card.
+     */
+    showDivider?: boolean;
     className?: string;
     'data-testid'?: string;
 }
-export declare function UnderlineTabs<K extends string = string>({ items, value, onChange, ariaLabel, size, level, className, 'data-testid': dataTestId, }: UnderlineTabsProps<K>): import("react/jsx-runtime").JSX.Element;
+export declare function UnderlineTabs<K extends string = string>({ items, value, onChange, ariaLabel, size, level, showDivider, className, 'data-testid': dataTestId, }: UnderlineTabsProps<K>): import("react/jsx-runtime").JSX.Element;
 export declare namespace UnderlineTabs {
     var displayName: string;
 }

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/index.d.ts

@@ -12,7 +12,7 @@ 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';

package/dist/providers/ToastProvider.d.ts

@@ -4,13 +4,18 @@ 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.
+ * - Titles wrap instead of truncating.
+ * - From `sm` up the toast takes the width its text needs, between 356px and
+ *   `min(32rem, 100vw - 11rem)`, so it keeps up with a larger root font size.
+ * - The close button sits inside the toast, beside the title, always visible,
+ *   as a 44px target.
+ * - A `toastProps.classNames` you pass is merged after these defaults, slot by
+ *   slot, so it can still restyle any of them.
  * - 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.
+ * as a whole object, so a per-toast `classNames` drops these defaults for that
+ * toast: its title truncates again and its close button floats on the corner.
  */
 export declare function ToastProvider({ toastProps, disableAnimation, ...props }: ToastProviderProps): JSX.Element;

package/dist/test/reducedMotionCss.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Story helpers for checking a `motion-reduce:` utility in a real browser without changing the
+ * browser's media.
+ *
+ * A page cannot turn `prefers-reduced-motion` on for itself, and emulating it through the
+ * runner's CDP session changes the whole page, which Vitest shares between story files running
+ * in parallel: another story measuring its own animation in that window would read `none`. So
+ * the reduced-motion half is proved from the page's compiled CSS instead, which is what the
+ * browser applies anyway:
+ *
+ * 1. the element carries the still class;
+ * 2. that class sets `animation-name: none` inside `@media (prefers-reduced-motion: reduce)`;
+ * 3. it comes later in the stylesheet than the rule that starts the animation. Both are one class
+ *    (plus the same pseudo-element), so at equal specificity the later rule wins.
+ *
+ * The motion-allowed half is read straight off `getComputedStyle`.
+ */
+export interface ReducedMotionCascade {
+    /** The element carries both classes. */
+    carriesBoth: boolean;
+    /** `animation-name` of the rule that starts the motion (e.g. `shimmer`), or `undefined`. */
+    movingAnimation: string | undefined;
+    /** `animation-name` the still class sets under reduced motion (`none`), or `undefined`. */
+    stillAnimation: string | undefined;
+    /** The still rule is later in the cascade than the moving one, so it wins. */
+    stillComesLater: boolean;
+}
+/**
+ * What the stylesheets say happens to `movingClass`'s animation on `element` (or its `pseudo`)
+ * when the OS asks for reduced motion and `stillClass` is the utility meant to stop it.
+ */
+export declare function reducedMotionCascade(element: Element, { movingClass, stillClass, pseudo }: {
+    movingClass: string;
+    stillClass: string;
+    pseudo?: '' | '::before';
+}): ReducedMotionCascade;
+/** Whether the reader's OS currently asks for reduced motion (the Storybook UI is theirs). */
+export declare function osReducesMotion(): boolean;
+/** The `animation-name` running on an element's `::before`, where HeroUI draws the skeleton shimmer. */
+export declare function beforeAnimationName(element: Element): string;

package/package.json

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