@veevarts/design-system 2.21.0 → 2.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +14 -0
  2. package/dist/components/Drawer/Drawer.d.ts +17 -0
  3. package/dist/components/Drawer/index.d.ts +2 -0
  4. package/dist/components/Modal/CloseButton.d.ts +18 -0
  5. package/dist/components/Modal/Modal.d.ts +15 -0
  6. package/dist/components/Modal/index.d.ts +2 -0
  7. package/dist/components/Modal/useLabelledCloseButton.d.ts +13 -0
  8. package/dist/components/Table/Table.d.ts +7 -0
  9. package/dist/components/Table/index.d.ts +2 -0
  10. package/dist/components/index.d.ts +6 -0
  11. package/dist/index.cjs +5 -5
  12. package/dist/index.js +5194 -4607
  13. package/dist/patterns/DonationAmounts/index.d.ts +1 -1
  14. package/dist/patterns/DonationAmounts/styles.d.ts +32 -0
  15. package/dist/patterns/DonationAmounts/types.d.ts +55 -1
  16. package/dist/patterns/DonationAmounts/utils/currency.d.ts +7 -3
  17. package/dist/patterns/OutcomeView/index.d.ts +1 -1
  18. package/dist/patterns/OutcomeView/types.d.ts +110 -3
  19. package/dist/patterns/StepProgress/StepProgress.d.ts +4 -0
  20. package/dist/patterns/StepProgress/index.d.ts +2 -0
  21. package/dist/patterns/StepProgress/styles.d.ts +29 -0
  22. package/dist/patterns/StepProgress/types.d.ts +43 -0
  23. package/dist/patterns/Summary/types.d.ts +7 -0
  24. package/dist/patterns/TileSelect/TileSelect.d.ts +13 -0
  25. package/dist/patterns/TileSelect/index.d.ts +1 -1
  26. package/dist/patterns/TileSelect/styles.d.ts +14 -0
  27. package/dist/patterns/UnderlineTabs/UnderlineTabs.d.ts +20 -1
  28. package/dist/patterns/UnderlineTabs/index.d.ts +1 -1
  29. package/dist/patterns/UnderlineTabs/styles.d.ts +10 -0
  30. package/dist/patterns/index.d.ts +6 -4
  31. package/dist/providers/HeroUIProvider.d.ts +9 -1
  32. package/dist/providers/close-label-context.d.ts +18 -0
  33. package/dist/tailwind/index.cjs +8 -0
  34. package/dist/tailwind/index.mjs +8 -0
  35. package/dist/test/px-class-names.d.ts +1 -0
  36. package/dist/test/px-classes.d.ts +2 -1
  37. package/dist/tokens/pos-surface.d.ts +16 -4
  38. package/package.json +1 -1
@@ -5,5 +5,5 @@
5
5
  * Ensures exclusive selection (preset OR custom).
6
6
  */
7
7
  export { DonationAmounts } from './DonationAmounts';
8
- export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps } from './types';
8
+ export type { DonationAmount, SelectedDonation, DonationLabels, DonationAmountsProps, DonationAmountsVariant, } from './types';
9
9
  export { formatCurrency, parseCurrency } from './utils/currency';
@@ -0,0 +1,32 @@
1
+ import { DonationAmountsProps, DonationAmountsVariant } from './types';
2
+ type TiledVariant = Exclude<DonationAmountsVariant, 'pill'>;
3
+ type FieldSize = NonNullable<DonationAmountsProps['size']>;
4
+ interface VariantSlots {
5
+ root: string;
6
+ title: string;
7
+ eyebrow: string;
8
+ caption: string;
9
+ grid: string;
10
+ preset: string;
11
+ presetIdle: string;
12
+ presetSelected: string;
13
+ amount: string;
14
+ amountSelected: string;
15
+ sublabel: string;
16
+ customLabel: string;
17
+ inputBase: string;
18
+ inputWrapper: string;
19
+ inputWrapperActive: string;
20
+ input: string;
21
+ }
22
+ export declare const donationAmountsSlots: Record<TiledVariant, VariantSlots>;
23
+ /**
24
+ * What `size` changes in `tile` and `pos`: the custom field's height and text.
25
+ * `md` is the mockup's field (38px in `tile`, 40px in `pos`); `sm` and `lg`
26
+ * are HeroUI's 32px and 48px fields. The Add button takes `size` directly.
27
+ */
28
+ export declare const donationAmountsFieldSize: Record<TiledVariant, Record<FieldSize, {
29
+ wrapper: string;
30
+ input: string;
31
+ }>>;
32
+ export {};
@@ -18,7 +18,27 @@ export interface DonationAmount {
18
18
  * If not provided, the formatted currency will be used
19
19
  */
20
20
  label?: string;
21
+ /**
22
+ * Second line under the amount, e.g. `'+$0.56 donation'` on a round-up
23
+ * offer. Rendered by the `tile` and `pos` variants only; the `pill`
24
+ * variant has no room for it.
25
+ */
26
+ sublabel?: string;
21
27
  }
28
+ /**
29
+ * How the presets and the custom input are drawn.
30
+ *
31
+ * - `pill` (default): HeroUI bordered pill buttons; the selected one fills
32
+ * with the brand colour. The original look, unchanged.
33
+ * - `tile`: the Quick Donation / Quick Membership amount grid. Rectangular
34
+ * 12px tiles on the `pos-field` hairline; the selected tile takes a brand
35
+ * border, a 9% brand tint and brand digits.
36
+ * - `pos`: the register's donation modal and round-up offer. 14px chips on
37
+ * the `pos-line` hairline that auto-fit the row (min 96px), 19px digits
38
+ * that stay ink when selected over a 5% brand tint, an optional sublabel,
39
+ * and a visible label over the custom input.
40
+ */
41
+ export type DonationAmountsVariant = 'pill' | 'tile' | 'pos';
22
42
  /**
23
43
  * Selected donation value (can be preset or custom)
24
44
  */
@@ -57,6 +77,27 @@ export interface DonationLabels {
57
77
  * @default 'Add Donation'
58
78
  */
59
79
  addDonationButton?: string;
80
+ /**
81
+ * Small uppercase heading above the presets ("Round up your total").
82
+ * `tile` and `pos` variants only.
83
+ */
84
+ eyebrow?: string;
85
+ /**
86
+ * Muted line under the eyebrow or title ("Current total $19.44").
87
+ * `tile` and `pos` variants only.
88
+ */
89
+ caption?: string;
90
+ /**
91
+ * Visible label over the custom amount input ("Custom amount"). When set
92
+ * it also names the input, so `customAmountAriaLabel` is not needed.
93
+ * `tile` and `pos` variants only.
94
+ */
95
+ customAmountLabel?: string;
96
+ /**
97
+ * Accessible name of the preset group when no `title` is shown.
98
+ * @default 'Suggested amounts'
99
+ */
100
+ presetsAriaLabel?: string;
60
101
  }
61
102
  /**
62
103
  * Props for DonationAmounts component
@@ -145,10 +186,23 @@ export interface DonationAmountsProps {
145
186
  */
146
187
  inputVariant?: 'flat' | 'bordered' | 'faded' | 'underlined';
147
188
  /**
148
- * Size of the custom amount input and add button
189
+ * Size of the custom amount input and add button. In `tile` and `pos`,
190
+ * `md` is the mockup's field; the presets keep their size in every variant.
149
191
  * @default 'md'
150
192
  */
151
193
  size?: 'sm' | 'md' | 'lg';
194
+ /**
195
+ * Visual variant. See {@link DonationAmountsVariant}.
196
+ * @default 'pill'
197
+ */
198
+ variant?: DonationAmountsVariant;
199
+ /**
200
+ * Marks the title as required with a danger asterisk (`tile` and `pos`
201
+ * variants). The asterisk is decorative; announce the requirement through
202
+ * the form's own validation.
203
+ * @default false
204
+ */
205
+ isRequired?: boolean;
152
206
  /**
153
207
  * Additional CSS classes
154
208
  */
@@ -6,13 +6,17 @@
6
6
  * @param amount - The amount to format
7
7
  * @param locale - The locale to use for formatting (e.g., 'en-US', 'es-ES')
8
8
  * @param currency - The currency code (ISO 4217, e.g., 'USD', 'EUR')
9
+ * @param trimZeroCents - Drop the fraction of a whole amount ("$25" rather than
10
+ * "$25.00"). Default `true`; `false` keeps the currency's own digits, as a
11
+ * register price does.
9
12
  * @returns Formatted currency string
10
13
  *
11
14
  * @example
12
- * formatCurrency(1000, 'en-US', 'USD') // "$1,000.00"
13
- * formatCurrency(1000, 'es-ES', 'EUR') // "1.000,00 €"
15
+ * formatCurrency(1000, 'en-US', 'USD') // "$1,000"
16
+ * formatCurrency(1000.5, 'es-ES', 'EUR') // "1000,5 €"
17
+ * formatCurrency(5, 'en-US', 'USD', false) // "$5.00"
14
18
  */
15
- export declare function formatCurrency(amount: number, locale?: string, currency?: string): string;
19
+ export declare function formatCurrency(amount: number, locale?: string, currency?: string, trimZeroCents?: boolean): string;
16
20
  /**
17
21
  * Parses a currency string to a number
18
22
  * @param value - The currency string to parse
@@ -1,2 +1,2 @@
1
1
  export { OutcomeView } from './OutcomeView';
2
- export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel } from './types';
2
+ export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel, OutcomeViewKind, OutcomePaidWithLine, OutcomeGroup, OutcomeReceiptAction, OutcomeEmailReceipt, OutcomeChangeDue, } from './types';
@@ -3,6 +3,77 @@ import { Money } from '../../utils/money';
3
3
  export type { DestinationLine, DestinationStatus } from '..';
4
4
  export type { Money } from '../../utils/money';
5
5
  export type ReceiptChannel = 'email' | 'print';
6
+ /**
7
+ * Which settled screen this is. Both are the POS `ex` screen's done stage
8
+ * (`.excard .exdone`); they differ in their default copy and in the top
9
+ * block's spacing.
10
+ *
11
+ * - `refund` (default): "Refund complete", `Reason · …`, "Done". Keeps the
12
+ * refund wizard's `4px 0 2px` top block.
13
+ * - `payment`: "Payment complete", "New sale", "Handled by …". Top block
14
+ * flush with the card padding, as `veevart-2-pos-latest` draws it.
15
+ */
16
+ export type OutcomeViewKind = 'refund' | 'payment';
17
+ /** One tender in "Paid with": icon box, method, amount, status pill. */
18
+ export interface OutcomePaidWithLine {
19
+ /** Method name ("Card", "Cash", "Visa •••4242"). */
20
+ label: string;
21
+ amount: Money;
22
+ /** Iconify name for the 34px icon box (`'solar:card-outline'`). Omit for no box. */
23
+ icon?: string;
24
+ /** Pill at the row's end ("Paid", "Pending"). Omit for none. */
25
+ status?: string;
26
+ }
27
+ /** One "Outcome" group: an eyebrow over the things the sale produced. */
28
+ export interface OutcomeGroup {
29
+ /** Eyebrow ("Purchased", "Returned"). */
30
+ label: string;
31
+ /** One chip each ("Observer", "Donation"). */
32
+ items: string[];
33
+ }
34
+ /**
35
+ * A receipt button in the `.rc-row` (Email receipt / Print receipt / Send
36
+ * digital card). The host decides which ones a sale offers.
37
+ */
38
+ export interface OutcomeReceiptAction {
39
+ /** Stable key; also the testid suffix (`-receipt-action-<key>`). */
40
+ key: string;
41
+ label: string;
42
+ /** Iconify name, 16px, before the label. */
43
+ icon?: string;
44
+ onPress: () => void;
45
+ /**
46
+ * The action opens a panel under the row (the email box). `true` draws it
47
+ * pressed and sets `aria-expanded`. Leave `undefined` for a plain action.
48
+ */
49
+ expanded?: boolean;
50
+ isDisabled?: boolean;
51
+ }
52
+ /**
53
+ * The email box under the receipt row (`.rc-emailbox`): recipients as
54
+ * removable chips, a free-text field, and the send button. Controlled: the
55
+ * host owns the list, the draft and the validation.
56
+ */
57
+ export interface OutcomeEmailReceipt {
58
+ emails: string[];
59
+ draft: string;
60
+ onDraftChange: (draft: string) => void;
61
+ /** Enter in the field. The host validates and adds (or flags `isInvalid`). */
62
+ onAddEmail: (draft: string) => void;
63
+ onRemoveEmail: (email: string) => void;
64
+ onSend: () => void;
65
+ /** Danger border on the recipients box. */
66
+ isInvalid?: boolean;
67
+ isSending?: boolean;
68
+ /** Default: disabled while there is no recipient. */
69
+ isSendDisabled?: boolean;
70
+ }
71
+ /** Cash paid over the total: the screen leads with the change instead of the total. */
72
+ export interface OutcomeChangeDue {
73
+ amount: Money;
74
+ /** Muted line under the amount ("Total $19.44 · Cash tendered $20.00"). */
75
+ caption?: string;
76
+ }
6
77
  export interface OutcomeViewLabels {
7
78
  processing?: string;
8
79
  title?: string;
@@ -17,19 +88,55 @@ export interface OutcomeViewLabels {
17
88
  reason?: string;
18
89
  /** `{name}` is replaced with the `authorizedBy` prop. */
19
90
  authorizedBy?: string;
91
+ /** Eyebrow over `paidWith`. Default `'Paid with'`. */
92
+ paidWithTitle?: string;
93
+ /** Eyebrow over `outcomeGroups`. Default `'Outcome'`. */
94
+ outcomeTitle?: string;
95
+ /** Label over the change amount. Default `'Change due'`. */
96
+ changeDue?: string;
97
+ /** Placeholder of the email field. Default `'Add email…'`. */
98
+ emailPlaceholder?: string;
99
+ /** Accessible name of the email field. Default `'Add email address'`. */
100
+ emailAriaLabel?: string;
101
+ /** `{email}` is replaced with the address. Default `'Remove {email}'`. */
102
+ removeEmail?: string;
103
+ /** Send button of the email box. Default `'Send receipt'`. */
104
+ sendEmail?: string;
20
105
  }
21
106
  export interface OutcomeViewProps {
22
107
  state: 'processing' | 'complete';
23
- /** Amount refunded — shown under the spinner, then as the receipt headline. */
108
+ /** See {@link OutcomeViewKind}. Default `'refund'`. */
109
+ kind?: OutcomeViewKind;
110
+ /** Amount refunded or paid — shown under the spinner, then as the receipt headline. */
24
111
  total?: Money;
25
- destinations: DestinationLine[];
112
+ /**
113
+ * Where a refund went, with a per-line status chip. A payment omits it:
114
+ * the section is drawn only when the prop is given.
115
+ */
116
+ destinations?: DestinationLine[];
117
+ /** Muted line under the total ("TXN-10483 · Marcus Chen"). */
118
+ subtitle?: string;
26
119
  /** Refund reason, printed under the total as `Reason · …`. */
27
120
  reason?: string;
28
- /** Who authorized the refund, printed as the receipt's footer line. */
121
+ /** "Paid with" rows. */
122
+ paidWith?: OutcomePaidWithLine[];
123
+ /** "Outcome" groups: what the sale produced, as chips. */
124
+ outcomeGroups?: OutcomeGroup[];
125
+ /** Cash change to hand back. Replaces the title + total block. */
126
+ changeDue?: OutcomeChangeDue;
127
+ /** Who authorized the refund or handled the sale, printed as the footer line. */
29
128
  authorizedBy?: string;
30
129
  /** Receipt channels already chosen, reflected in the row checkboxes. */
31
130
  selectedReceipts?: ReceiptChannel[];
131
+ /** The refund's receipt checkbox rows. Ignored when `receiptActions` is given. */
32
132
  onSendReceipt?: (channel: ReceiptChannel) => void;
133
+ /**
134
+ * Receipt buttons in one row (`.rc-row`), the payment screen's
135
+ * Email / Print / Send digital card. Takes the place of the checkbox rows.
136
+ */
137
+ receiptActions?: OutcomeReceiptAction[];
138
+ /** The email box under the receipt row. Pass it while the email action is expanded. */
139
+ emailReceipt?: OutcomeEmailReceipt;
33
140
  onDone: () => void;
34
141
  /**
35
142
  * Drops the settled state's own `.excard` frame, for hosts that already
@@ -0,0 +1,4 @@
1
+ import { default as React } from 'react';
2
+ import { StepProgressProps } from './types';
3
+ export declare const StepProgress: React.FC<StepProgressProps>;
4
+ export default StepProgress;
@@ -0,0 +1,2 @@
1
+ export { StepProgress } from './StepProgress';
2
+ export type { StepProgressProps, StepProgressStep, StepProgressLabels } from './types';
@@ -0,0 +1,29 @@
1
+ /**
2
+ * Slot classes for `StepProgress`, measured off `veevart-2-pos-latest`
3
+ * (`.stepbar` and `.exprog`, read with `getComputedStyle` on 2026-10-21).
4
+ *
5
+ * Segment colours are the screen's own: done is `pos-ok` (#3B6D11), active the
6
+ * brand, upcoming the `pos-line` hairline. Names are 12px/600 on an 18px line:
7
+ * upcoming in `pos-muted`, active in `pos-ink`, done in `pos-ok` behind a 13px
8
+ * filled check with a 5px gap. DS tokens only, no stock HeroUI colours.
9
+ *
10
+ * Every size is rem (the 4px segment is `h-1`), so the POS "Text size"
11
+ * setting, which scales the root font size, scales the bar with the screen.
12
+ * Nothing here animates, so reduced motion has nothing to turn off.
13
+ */
14
+ export declare const stepProgressClass: {
15
+ /** `.stepbar`: bare segments, 6px apart. */
16
+ readonly bare: "flex gap-1.5";
17
+ /** `.exprog`: labelled steps, 16px apart. */
18
+ readonly list: "m-0 flex list-none gap-4 p-0";
19
+ readonly item: "flex min-w-0 flex-1 flex-col";
20
+ readonly step: "flex min-w-0 flex-1 flex-col items-stretch gap-1.5 text-left";
21
+ readonly button: "cursor-pointer rounded-md border-none bg-transparent p-0 font-[inherit] outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[0.1875rem] focus-visible:outline-primary disabled:cursor-default";
22
+ readonly segment: "block h-1 rounded-full";
23
+ readonly name: "flex min-w-0 items-center gap-[0.3125rem] truncate text-xs font-semibold leading-[1.125rem]";
24
+ /** The 13px filled check in front of a finished step's name. */
25
+ readonly check: "flex h-[0.8125rem] w-[0.8125rem] shrink-0";
26
+ };
27
+ export type StepTone = 'done' | 'active' | 'upcoming';
28
+ export declare const segmentToneClass: Record<StepTone, string>;
29
+ export declare const nameToneClass: Record<StepTone, string>;
@@ -0,0 +1,43 @@
1
+ import { WizardStepState } from '../WizardShell/types';
2
+ export interface StepProgressStep {
3
+ id: string;
4
+ /** Step name, printed under its segment when `showLabels` is on. */
5
+ label: string;
6
+ /**
7
+ * Only `'skipped'` is read: a skipped step gets no segment. Every other
8
+ * state is derived from the step's position against `activeStepId`, so a
9
+ * `WizardStep[]` can be passed as is.
10
+ */
11
+ state?: WizardStepState;
12
+ }
13
+ export interface StepProgressLabels {
14
+ /** Accessible name of the step list. Default `'Progress'`. */
15
+ ariaLabel?: string;
16
+ /** Screen-reader suffix on a finished step. Default `'completed'`. */
17
+ completed?: string;
18
+ }
19
+ export interface StepProgressProps {
20
+ steps: readonly StepProgressStep[];
21
+ /** The step the host is on. Steps before it read as done, steps after it as upcoming. */
22
+ activeStepId: string;
23
+ /**
24
+ * `true` (default) prints each step's name under its segment, with a check
25
+ * on finished steps: the POS "Sell a membership" bar (`.exprog`).
26
+ * `false` draws the bare segments only, as `WizardShell` does (`.stepbar`).
27
+ */
28
+ showLabels?: boolean;
29
+ /**
30
+ * Makes the labelled steps buttons. Fires with the step's `id` when a
31
+ * reachable step is pressed. Without it the bar is display-only.
32
+ */
33
+ onStepPress?: (stepId: string) => void;
34
+ /**
35
+ * Which steps `onStepPress` may go to. Default: the finished ones (before
36
+ * the active step). Unreachable steps render as disabled buttons.
37
+ */
38
+ isStepReachable?: (stepId: string, index: number) => boolean;
39
+ labels?: StepProgressLabels;
40
+ /** Padding and placement belong to the host: the bar draws none of its own. */
41
+ className?: string;
42
+ 'data-testid'?: string;
43
+ }
@@ -65,6 +65,13 @@ export interface SummaryLineItem {
65
65
  tone?: RecordTone;
66
66
  /** Dims the price while it is being recalculated (e.g. a quantity change not yet confirmed). */
67
67
  pending?: boolean;
68
+ /**
69
+ * `false` hides this row's remove (trash) control even when `onRemoveItem`
70
+ * is wired and `showRemoveButton` is on — for a line the host changes
71
+ * through another flow (the register's own membership line goes through
72
+ * "Change membership"). Applies to nested rows one by one. Default `true`.
73
+ */
74
+ removable?: boolean;
68
75
  }
69
76
  /** The "Pay Service fee" radio-toggle row. */
70
77
  export interface SummaryServiceFee {
@@ -52,6 +52,17 @@ export interface TileSelectOption {
52
52
  * "More" menu rather than scrolling. The picker is a control among others.
53
53
  */
54
54
  export type TileSelectVariant = 'tiles' | 'compact';
55
+ /**
56
+ * Tile size for `variant="tiles"`.
57
+ *
58
+ * `'md'` (default) — the 80px icon-over-label tile of the payments drop-in.
59
+ *
60
+ * `'sm'` — the 58px tender tile of the Quick Donation / Quick Membership
61
+ * mockups (`.tender-tile`): 17px icon over an 11.5px label, 10px/4px padding,
62
+ * 12px radius, 8px between tiles; the picked tile takes a brand border, a 9%
63
+ * brand tint and brand text. DS tokens only, rem only.
64
+ */
65
+ export type TileSelectSize = 'md' | 'sm';
55
66
  export interface TileSelectProps {
56
67
  /** Options to render in order. */
57
68
  options: readonly TileSelectOption[];
@@ -98,6 +109,8 @@ export interface TileSelectProps {
98
109
  */
99
110
  columnsDesktop?: 2 | 3 | 4 | 5 | 6;
100
111
  columnsMobile?: 1 | 2;
112
+ /** `variant="tiles"` only. See {@link TileSelectSize}. Default `'md'`. */
113
+ size?: TileSelectSize;
101
114
  className?: string;
102
115
  'data-testid'?: string;
103
116
  }
@@ -1,2 +1,2 @@
1
1
  export { TileSelect } from './TileSelect';
2
- export type { TileSelectProps, TileSelectOption, TileSelectVariant } from './TileSelect';
2
+ export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './TileSelect';
@@ -0,0 +1,14 @@
1
+ /**
2
+ * `size="sm"` tile classes (`.tender-tile`). rem only: 1px border + `py-2.5` +
3
+ * 17px icon + 5px gap + 14px label line + `py-2.5` + 1px border = the
4
+ * mockup's 58px. Reduced motion (OS or the POS override on `<html>`) drops
5
+ * the colour easing and the press scale.
6
+ */
7
+ export declare const smallTileClass: {
8
+ readonly grid: "gap-2";
9
+ readonly tile: "flex flex-col items-center justify-center gap-[0.3125rem] h-auto min-h-0 min-w-0 rounded-xl border px-1 py-2.5 transition-colors motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none motion-reduce:data-[pressed=true]:scale-100 [html[data-pos-reduce-motion=true]_&]:data-[pressed=true]:scale-100";
10
+ readonly idle: "border-pos-field bg-white text-pos-ink data-[hover=true]:border-pos-line-strong data-[hover=true]:bg-white";
11
+ readonly active: "border-primary bg-primary/[.09] text-primary data-[hover=true]:bg-primary/[.09]";
12
+ readonly icon: "flex h-[1.0625rem] w-[1.0625rem] items-center justify-center";
13
+ readonly label: "text-[0.71875rem] font-medium leading-[0.875rem]";
14
+ };
@@ -1,4 +1,11 @@
1
1
  import { default as React } from 'react';
2
+ export type UnderlineTabsSize = 'md' | 'sm';
3
+ /**
4
+ * `primary`: the page's own tabs; the selected label turns ink.
5
+ * `secondary`: tabs nested inside a section; flush, padded, semibold, the
6
+ * selected label turns brand. Read by `size="sm"` only.
7
+ */
8
+ export type UnderlineTabsLevel = 'primary' | 'secondary';
2
9
  export interface UnderlineTabItem<K extends string = string> {
3
10
  key: K;
4
11
  label: React.ReactNode;
@@ -15,6 +22,14 @@ export interface UnderlineTabItem<K extends string = string> {
15
22
  * the DOM does not contain; passing `content` is the fix.
16
23
  */
17
24
  content?: React.ReactNode;
25
+ /** Not selectable: drawn at 40% and skipped by the arrow keys. */
26
+ isDisabled?: boolean;
27
+ /**
28
+ * The browser tooltip on the tab (its `title`), read out as its
29
+ * description: why a disabled tab is out of reach ("Corporate memberships
30
+ * cannot be gifted").
31
+ */
32
+ hint?: string;
18
33
  }
19
34
  export interface UnderlineTabsProps<K extends string = string> {
20
35
  items: UnderlineTabItem<K>[];
@@ -22,10 +37,14 @@ export interface UnderlineTabsProps<K extends string = string> {
22
37
  onChange: (key: K) => void;
23
38
  /** Names the tablist. Required — an unnamed tablist gives no context. */
24
39
  ariaLabel: string;
40
+ /** `md` (default): the back-office strip. `sm`: the Quick Donation / Quick Membership strip. */
41
+ size?: UnderlineTabsSize;
42
+ /** See {@link UnderlineTabsLevel}. Default `primary`. Read by `size="sm"` only. */
43
+ level?: UnderlineTabsLevel;
25
44
  className?: string;
26
45
  'data-testid'?: string;
27
46
  }
28
- export declare function UnderlineTabs<K extends string = string>({ items, value, onChange, ariaLabel, className, 'data-testid': dataTestId, }: UnderlineTabsProps<K>): import("react/jsx-runtime").JSX.Element;
47
+ 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;
29
48
  export declare namespace UnderlineTabs {
30
49
  var displayName: string;
31
50
  }
@@ -1,2 +1,2 @@
1
1
  export { UnderlineTabs } from './UnderlineTabs';
2
- export type { UnderlineTabsProps, UnderlineTabItem } from './UnderlineTabs';
2
+ export type { UnderlineTabsProps, UnderlineTabItem, UnderlineTabsSize, UnderlineTabsLevel } from './UnderlineTabs';
@@ -0,0 +1,10 @@
1
+ export interface UnderlineTabsSlots {
2
+ base: string;
3
+ tabList: string;
4
+ cursor: string;
5
+ tab: string;
6
+ tabContent: string;
7
+ }
8
+ export declare const underlineTabsSlots: Record<'md' | 'sm-primary' | 'sm-secondary', UnderlineTabsSlots>;
9
+ /** Added to the `md` cursor under reduced motion: it jumps instead of sliding. */
10
+ export declare const stillCursorClass = "data-[animated=true]:transition-none";
@@ -10,7 +10,7 @@ export type { MultiselectProps } from './Multiselect';
10
10
  export { RichTextArea, RICH_TEXT_PRESETS } from './RichText';
11
11
  export type { RichTextAreaProps } from './RichText';
12
12
  export { DonationAmounts } from './DonationAmounts';
13
- export type { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels } from './DonationAmounts';
13
+ export type { DonationAmountsProps, DonationAmount, SelectedDonation, DonationLabels, DonationAmountsVariant, } from './DonationAmounts';
14
14
  export { ExpireCartTimer } from './ExpireCartTimer';
15
15
  export type { ExpireCartTimerProps } from './ExpireCartTimer';
16
16
  export { EventDetails } from './Programs/EventDetails';
@@ -62,7 +62,7 @@ export type { AdminToolbarProps, AdminToolbarSearchWidth, AdminToolbarSize } fro
62
62
  export { ToolbarButton } from './ToolbarButton';
63
63
  export type { ToolbarButtonProps } from './ToolbarButton';
64
64
  export { UnderlineTabs } from './UnderlineTabs';
65
- export type { UnderlineTabsProps, UnderlineTabItem } from './UnderlineTabs';
65
+ export type { UnderlineTabsProps, UnderlineTabItem, UnderlineTabsSize, UnderlineTabsLevel } from './UnderlineTabs';
66
66
  export { AdminFieldLabel, AdminTextField, adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './AdminTextField';
67
67
  export type { AdminTextFieldProps } from './AdminTextField';
68
68
  export { RowActions } from './RowActions';
@@ -86,7 +86,7 @@ export type { SplitPaymentSummaryProps, SplitPaymentSummaryLabels, SplitPaymentS
86
86
  export { ModalShell, ModalShellHeader, ModalShellFooter } from './ModalShell';
87
87
  export type { ModalShellProps, ModalShellHeaderProps, ModalShellFooterProps } from './ModalShell';
88
88
  export { TileSelect } from './TileSelect';
89
- export type { TileSelectProps, TileSelectOption, TileSelectVariant } from './TileSelect';
89
+ export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './TileSelect';
90
90
  export { PaymentTotalBanner } from './PaymentTotalBanner';
91
91
  export type { PaymentTotalBannerProps } from './PaymentTotalBanner';
92
92
  export { LoadingOverlay } from './LoadingOverlay';
@@ -107,6 +107,8 @@ export { DiscardGuard, useDiscardGuard, useDiscardGuardActions, useReportUnsaved
107
107
  export type { DiscardGuardProps, DiscardGuardController, DiscardGuardActions } from './DiscardGuard';
108
108
  export { Summary } from './Summary';
109
109
  export type { SummaryProps, SummaryLineItem, SummaryItemDetail, SummaryServiceFee, SummaryTotalRow, SummaryPostTotalRow, SummaryPrimaryAction, SummaryLabels, } from './Summary';
110
+ export { StepProgress } from './StepProgress';
111
+ export type { StepProgressProps, StepProgressStep, StepProgressLabels } from './StepProgress';
110
112
  export { WizardShell } from './WizardShell';
111
113
  export type { WizardShellProps, WizardStep, WizardStepState, WizardShellPrimaryAction, WizardShellSecondaryAction, WizardShellTotalRow, WizardShellTotalBadge, WizardShellLabels, } from './WizardShell';
112
114
  export type { TenderError, DestinationLine, DestinationStatus, RecordTone } from './shared';
@@ -133,7 +135,7 @@ export type { RefundProgressListProps, RefundProgressListLabels, RefundProgressP
133
135
  export { PinField } from './PinField';
134
136
  export type { PinFieldProps, PinFieldLabels } from './PinField';
135
137
  export { OutcomeView } from './OutcomeView';
136
- export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel } from './OutcomeView';
138
+ export type { OutcomeViewProps, OutcomeViewLabels, ReceiptChannel, OutcomeViewKind, OutcomePaidWithLine, OutcomeGroup, OutcomeReceiptAction, OutcomeEmailReceipt, OutcomeChangeDue, } from './OutcomeView';
137
139
  export { FilterSelect, FilterSelectGroup } from './FilterSelect';
138
140
  export type { FilterSelectProps, FilterSelectOption, FilterSelectGroupProps } from './FilterSelect';
139
141
  export { LoadMoreFooter } from './LoadMoreFooter';
@@ -1,6 +1,14 @@
1
1
  import { ReactNode } from 'react';
2
2
  interface HeroUIProviderProps {
3
3
  children: ReactNode;
4
+ /**
5
+ * App-wide accessible name for the corner close button of every DS `Modal` and `Drawer`, e.g. `"Fermer"`.
6
+ * HeroUI hard-codes `"Close"`, so a localized app sets this once instead of on each overlay.
7
+ *
8
+ * A `closeLabel` on a `Modal` / `Drawer` wins over it. A nested provider without one inherits the
9
+ * outer provider's. With none anywhere, HeroUI's own button is rendered untouched.
10
+ */
11
+ closeLabel?: string;
4
12
  }
5
- export declare function HeroUIProvider({ children }: HeroUIProviderProps): import("react/jsx-runtime").JSX.Element;
13
+ export declare function HeroUIProvider({ children, closeLabel }: HeroUIProviderProps): import("react/jsx-runtime").JSX.Element;
6
14
  export {};
@@ -0,0 +1,18 @@
1
+ /**
2
+ * The app-wide default accessible name of an overlay's corner close button.
3
+ *
4
+ * HeroUI renders that button with the literal `aria-label="Close"`, so a French
5
+ * or Spanish screen announces English. `HeroUIProvider` carries a translated
6
+ * label here and the DS `Modal` / `Drawer` read it.
7
+ *
8
+ * A leaf file on purpose: `providers/` and `components/` never import each
9
+ * other. Both import this context, and neither imports the other's barrel.
10
+ * Split from `HeroUIProvider.tsx` so that file exports a component only (fast
11
+ * refresh), as `density.ts` does for the density context.
12
+ *
13
+ * `undefined` means "no app-wide label": the overlay keeps HeroUI's own button
14
+ * and its `"Close"` name untouched.
15
+ */
16
+ export declare const CloseLabelContext: import('react').Context<string | undefined>;
17
+ /** The label of the nearest `HeroUIProvider` that set `closeLabel`; `undefined` outside one. */
18
+ export declare function useCloseLabel(): string | undefined;
@@ -277,6 +277,14 @@ var posSurfaceTokens = {
277
277
  hair: "#F0F0F1",
278
278
  page: "#FBFBFB",
279
279
  field: "#E5E5E5",
280
+ /** A hairline under the pointer (`default-300`). */
281
+ "line-strong": "#D4D4D8",
282
+ /** `--ink`: body text (`default-900`). */
283
+ ink: "#18181B",
284
+ /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
285
+ muted: "#71717A",
286
+ /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
287
+ faint: "#A1A1AA",
280
288
  /** `--okb` / `--okf` */
281
289
  "ok-fill": "#EAF3DE",
282
290
  ok: "#3B6D11",
@@ -238,6 +238,14 @@ var posSurfaceTokens = {
238
238
  hair: "#F0F0F1",
239
239
  page: "#FBFBFB",
240
240
  field: "#E5E5E5",
241
+ /** A hairline under the pointer (`default-300`). */
242
+ "line-strong": "#D4D4D8",
243
+ /** `--ink`: body text (`default-900`). */
244
+ ink: "#18181B",
245
+ /** `--muted`: secondary text and eyebrows, 4.83:1 on white (`default-500`). */
246
+ muted: "#71717A",
247
+ /** Placeholder text (`default-400`). Never for content: 2.56:1 on white. */
248
+ faint: "#A1A1AA",
241
249
  /** `--okb` / `--okf` */
242
250
  "ok-fill": "#EAF3DE",
243
251
  ok: "#3B6D11",
@@ -0,0 +1 @@
1
+ export declare const pxClasses: (root: Element) => string[];
@@ -1,2 +1,3 @@
1
- export declare const pxClasses: (root: Element) => string[];
1
+ import { pxClasses } from './px-class-names';
2
+ export { pxClasses };
2
3
  export declare const expectNoPxClasses: (root: Element) => void;