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

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/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/package.json

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