sangam-ui 1.0.2 → 1.0.4

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 (3) hide show
  1. package/dist/index.d.ts +451 -132
  2. package/dist/index.js +733 -450
  3. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -26,10 +26,13 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
26
26
  * CVA (Class Variance Authority) manages all variants
27
27
  */
28
28
  declare const buttonVariants: (props?: ({
29
- variant?: "primary" | "link" | "secondary" | "danger" | null | undefined;
29
+ variant?: "primary" | "secondary" | "danger" | "tertiary" | null | undefined;
30
30
  size?: "big" | "small" | null | undefined;
31
31
  iconOnly?: boolean | null | undefined;
32
32
  } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
33
+ type ButtonCvaVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
34
+ /** Public `type` prop: CVA styles plus **loader** (spinner; uses primary chrome). */
35
+ type ButtonType = ButtonCvaVariant | "loader";
33
36
  /**
34
37
  * Button Props
35
38
  *
@@ -38,7 +41,35 @@ declare const buttonVariants: (props?: ({
38
41
  * Supports asChild for Radix composition pattern
39
42
  * Supports leading/trailing/icon-only layouts controlled by booleans
40
43
  */
41
- interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
44
+ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">, Omit<VariantProps<typeof buttonVariants>, "variant"> {
45
+ /**
46
+ * Visual style (Figma **type**: Primary, Secondary, Danger, Tertiary, Loader).
47
+ * **Loader** shows the button in a loading state (spinner). Distinct from native `<button type>`.
48
+ */
49
+ type?: ButtonType | "link";
50
+ /**
51
+ * Native `<button type>` (e.g. `submit`). Default `"button"`.
52
+ * Ignored when `asChild` is true (pass `type` on the child element).
53
+ */
54
+ htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
55
+ /**
56
+ * @deprecated Use `type` instead.
57
+ */
58
+ variant?: ButtonType | "link";
59
+ /**
60
+ * Button label (Figma: **label**). Prefer over `children` for string labels.
61
+ */
62
+ label?: React.ReactNode;
63
+ /**
64
+ * Interaction state (Figma: **state** — Enabled / Disabled).
65
+ * @default "enabled"
66
+ */
67
+ state?: "enabled" | "disabled";
68
+ /**
69
+ * When true, applies hover styling without pointer hover (e.g. Storybook / docs preview).
70
+ * @default false
71
+ */
72
+ hover?: boolean;
42
73
  /**
43
74
  * If true, renders as a Slot (for composition with other components)
44
75
  * @example
@@ -62,13 +93,6 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
62
93
  * When true, shows the icon after the button label.
63
94
  */
64
95
  trailingIcon?: boolean;
65
- /**
66
- * Loading state: shows spinner, disables interaction, sets aria-busy.
67
- * Big/icon buttons use 24×24 loader; small uses 16×16. White spinner on dark variants.
68
- * @example
69
- * <Button loading>Submit</Button>
70
- */
71
- loading?: boolean;
72
96
  }
73
97
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
74
98
 
@@ -77,7 +101,7 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
77
101
  *
78
102
  * Production-grade toggle following Figma design specs:
79
103
  * - Colors: semantic-colors (background, border, text) where available
80
- * - Sizes: Big (56×28px), Small (44×24px)
104
+ * - Sizes: Big (56×28px), Small (44×24px)
81
105
  * - States: Default, Hover, Disabled
82
106
  * - Smooth transitions: 200ms ease-out
83
107
  *
@@ -90,9 +114,9 @@ declare const toggleVariants: (props?: ({
90
114
  * Toggle Props
91
115
  *
92
116
  * Extends Radix Switch props. Adds size variants and optional label variants:
93
- * - Only toggle: no title/subtext
117
+ * - Only toggle: no title/subtitle
94
118
  * - Toggle + Title: title only (14px, #111111, weight 500, line-height 24px)
95
- * - Toggle + Title & Subtext: title + subtext (subtext: 12px, #7C7C7C, weight 400, line-height 16px)
119
+ * - Toggle + Title & Subtitle: title + subtitle (subtitle: 12px, #7C7C7C, weight 400, line-height 16px)
96
120
  */
97
121
  interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof toggleVariants> {
98
122
  /**
@@ -107,7 +131,27 @@ interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimit
107
131
  /**
108
132
  * Subtext shown below title. 12px, neutral-600, font-normal, leading-4.
109
133
  */
134
+ subtitle?: string;
135
+ /**
136
+ * @deprecated Use `subtitle`.
137
+ */
110
138
  subtext?: string;
139
+ /**
140
+ * Toggle state (Figma **isOn**).
141
+ */
142
+ isOn?: boolean;
143
+ /**
144
+ * Callback when `isOn` changes.
145
+ */
146
+ onIsOnChange?: (isOn: boolean) => void;
147
+ /**
148
+ * @deprecated Use `isOn`.
149
+ */
150
+ checked?: boolean;
151
+ /**
152
+ * @deprecated Use `onIsOnChange`.
153
+ */
154
+ onCheckedChange?: (checked: boolean) => void;
111
155
  }
112
156
  /**
113
157
  * Sangam Toggle Component
@@ -122,7 +166,7 @@ interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimit
122
166
  * <Toggle />
123
167
  *
124
168
  * @example Controlled
125
- * <Toggle checked={isOn} onCheckedChange={setIsOn} />
169
+ * <Toggle isOn={isOn} onIsOnChange={setIsOn} />
126
170
  *
127
171
  * @example Small size
128
172
  * <Toggle size="small" />
@@ -140,7 +184,7 @@ interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimit
140
184
  * <Toggle title="Write label text here" />
141
185
  *
142
186
  * @example Toggle + Title & Subtext
143
- * <Toggle title="Write label text here" subtext="Some helper text here" />
187
+ * <Toggle title="Write label text here" subtitle="Some helper text here" />
144
188
  */
145
189
  declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
146
190
 
@@ -149,72 +193,66 @@ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAtt
149
193
  *
150
194
  * Production-grade checkbox following Figma design specs:
151
195
  * - Colors: semantic-colors (border, background, text) where available
152
- * - Sizes: Big (24×24px), Small (20×20px)
196
+ * - Sizes: Big (24×24px), Small (20×20px)
153
197
  * - States: Default, Hover, Disabled
154
198
  * - Smooth transitions: 200ms ease-out
155
199
  *
156
200
  * Built on Radix UI Checkbox for accessibility
157
201
  */
158
- /** Outer container: hit area only. Big 24×24, small 20×20. No border/bg here. */
202
+ /** Outer container: hit area only. Big 24×24, small 20×20. No border/bg here. */
159
203
  declare const checkboxRootVariants: (props?: ({
160
204
  size?: "big" | "small" | null | undefined;
161
205
  } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
162
- /**
163
- * Checkbox Props
164
- *
165
- * Extends Radix Checkbox props. Adds size variants and optional label variants:
166
- * - Only checkbox: no title/subtext
167
- * - Checkbox + Title: title only (14px, #111111, weight 500, line-height 24px)
168
- * - Checkbox + Title & Subtext: title + subtext (subtext: 12px, #7C7C7C, weight 400, line-height 16px)
169
- */
170
- interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxRootVariants> {
206
+ type CheckboxVisualState = "default" | "disabled" | "hover";
207
+ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked" | "onCheckedChange" | "disabled" | "title"> {
208
+ size?: "big" | "small";
171
209
  /**
172
- * Size of the checkbox
173
- * @default "big"
210
+ * Selected state (Figma **isOn**).
211
+ * Prefer over Radix `checked` for design-system alignment.
174
212
  */
175
- size?: "big" | "small";
213
+ isOn?: boolean;
214
+ onIsOnChange?: (isOn: boolean) => void;
176
215
  /**
177
- * Title shown to the right of the checkbox. 14px, neutral-1100, font-medium, leading-6.
216
+ * @deprecated Use `isOn` / `onIsOnChange`.
178
217
  */
179
- title?: string;
218
+ checked?: boolean;
180
219
  /**
181
- * Subtext shown below title. 12px, neutral-600, font-normal, leading-4.
220
+ * @deprecated Use `onIsOnChange`.
182
221
  */
183
- subtext?: string;
222
+ onCheckedChange?: (checked: boolean | "indeterminate") => void;
223
+ /**
224
+ * Interaction / preview state (Figma **state**).
225
+ * **hover** applies hover styling without a pointer (e.g. docs).
226
+ */
227
+ state?: CheckboxVisualState;
228
+ /**
229
+ * @deprecated Use `state="disabled"`.
230
+ */
231
+ disabled?: boolean;
232
+ /**
233
+ * Show the text block beside the control (Figma **text**).
234
+ * When `false`, only the checkbox is rendered.
235
+ */
236
+ text?: boolean;
237
+ /**
238
+ * Show the title line (Figma **title** toggle). Uses `titletext`.
239
+ */
240
+ title?: boolean;
241
+ /**
242
+ * Title / label copy (Figma **titletext**).
243
+ */
244
+ titletext?: string;
245
+ /**
246
+ * Show the helper line (Figma **subtext** toggle). Uses `subtextText`.
247
+ */
248
+ subtext?: boolean;
249
+ /**
250
+ * Helper copy below the title (Figma **subtextText**).
251
+ */
252
+ subtextText?: string;
184
253
  }
185
254
  /**
186
- * Sangam Checkbox Component
187
- *
188
- * Production-grade checkbox built on:
189
- * - Radix UI Checkbox (for accessibility)
190
- * - CVA (for type-safe size variants)
191
- * - Sangam tokens (for consistent styling)
192
- * - 200ms ease-out transitions
193
- * - Lucide React icons for checkmark
194
- *
195
- * @example Basic usage
196
- * <Checkbox />
197
- *
198
- * @example Controlled
199
- * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} />
200
- *
201
- * @example Small size
202
- * <Checkbox size="small" />
203
- *
204
- * @example Disabled
205
- * <Checkbox disabled />
206
- *
207
- * @example With label
208
- * <div className="flex items-center gap-2">
209
- * <Checkbox id="terms" />
210
- * <label htmlFor="terms">Accept terms and conditions</label>
211
- * </div>
212
- *
213
- * @example Checkbox + Title
214
- * <Checkbox title="Write label text here" />
215
- *
216
- * @example Checkbox + Title & Subtext
217
- * <Checkbox title="Write label text here" subtext="Some helper text here" />
255
+ * Sangam Checkbox — Radix Checkbox + CVA + Sangam tokens.
218
256
  */
219
257
  declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
220
258
 
@@ -223,7 +261,7 @@ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.Re
223
261
  *
224
262
  * Production-grade radio button following Figma design specs:
225
263
  * - Colors: semantic-colors (background, border, text) where available
226
- * - Sizes: Big (24×24px), Small (20×20px)
264
+ * - Sizes: Big (24×24px), Small (20×20px)
227
265
  * - States: Default, Hover, Disabled
228
266
  * - Smooth transitions: 200ms ease-out
229
267
  * - Circular shape (rounded-full)
@@ -260,6 +298,10 @@ interface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPri
260
298
  * Subtext shown below title. 12px, neutral-600, font-normal, leading-4.
261
299
  */
262
300
  subtext?: string;
301
+ /**
302
+ * Alias for `subtext`.
303
+ */
304
+ subText?: string;
263
305
  }
264
306
  /**
265
307
  * Sangam Radio Group Component
@@ -356,11 +398,15 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
356
398
  /**
357
399
  * Whether the label is required (shows red asterisk)
358
400
  */
359
- required?: boolean;
401
+ asterisk?: boolean;
360
402
  /**
361
403
  * Helper text below input (for errors, hints, etc.)
362
404
  */
363
- helperText?: string;
405
+ supportText?: string;
406
+ /**
407
+ * Toggle supporting text row.
408
+ */
409
+ supportingText?: boolean;
364
410
  /**
365
411
  * Whether helper text is an error message
366
412
  */
@@ -369,12 +415,12 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
369
415
  * Show info icon next to label (after required asterisk)
370
416
  * @default false
371
417
  */
372
- showLabelIcon?: boolean;
418
+ infoIcon?: boolean;
373
419
  /**
374
420
  * Show icon with supporting/helper text
375
421
  * @default false
376
422
  */
377
- showHelperIcon?: boolean;
423
+ supportIcon?: boolean;
378
424
  /**
379
425
  * Trailing icon (e.g. dropdown chevron) - renders inside input wrapper on the right with border
380
426
  */
@@ -382,6 +428,31 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
382
428
  /**
383
429
  * CTA label (e.g. "Button") - renders as link at end of input
384
430
  */
431
+ cta?: string | boolean;
432
+ /**
433
+ * CTA button type.
434
+ * @default "tertiary"
435
+ */
436
+ ctaType?: "primary" | "tertiary";
437
+ /**
438
+ * @deprecated Use `asterisk`.
439
+ */
440
+ required?: boolean;
441
+ /**
442
+ * @deprecated Use `supportText`.
443
+ */
444
+ helperText?: string;
445
+ /**
446
+ * @deprecated Use `infoIcon`.
447
+ */
448
+ showLabelIcon?: boolean;
449
+ /**
450
+ * @deprecated Use `supportIcon`.
451
+ */
452
+ showHelperIcon?: boolean;
453
+ /**
454
+ * @deprecated Use `cta`.
455
+ */
385
456
  ctaLabel?: string;
386
457
  /**
387
458
  * Callback when CTA is clicked
@@ -417,13 +488,14 @@ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttri
417
488
  * <Input label="Email" placeholder="Enter your email" />
418
489
  *
419
490
  * @example Required field
420
- * <Input label="Username" required />
491
+ * <Input label="Username" asterisk />
421
492
  *
422
493
  * @example Error state
423
494
  * <Input
424
495
  * label="Password"
425
496
  * error
426
- * helperText="Password must be at least 8 characters"
497
+ * supportText="Password must be at least 8 characters"
498
+ * supportingText
427
499
  * />
428
500
  *
429
501
  * @example Success state
@@ -439,7 +511,8 @@ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttri
439
511
  * @example With helper text
440
512
  * <Input
441
513
  * label="Email"
442
- * helperText="We'll never share your email"
514
+ * supportText="We'll never share your email"
515
+ * supportingText
443
516
  * />
444
517
  */
445
518
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -462,6 +535,10 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
462
535
  /**
463
536
  * Required field (red asterisk)
464
537
  */
538
+ asterisk?: boolean;
539
+ /**
540
+ * @deprecated Use `asterisk`.
541
+ */
465
542
  required?: boolean;
466
543
  /**
467
544
  * Placeholder when no value selected
@@ -491,15 +568,31 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
491
568
  * Show info icon next to label (after required asterisk)
492
569
  * @default false
493
570
  */
571
+ infoIcon?: boolean;
572
+ /**
573
+ * @deprecated Use `infoIcon`.
574
+ */
494
575
  showLabelIcon?: boolean;
495
576
  /**
496
- * Helper/supporting text below dropdown
577
+ * Supporting text below dropdown
578
+ */
579
+ supportText?: string;
580
+ /**
581
+ * Toggle supporting text row.
582
+ */
583
+ supportingText?: boolean;
584
+ /**
585
+ * @deprecated Use `supportText`.
497
586
  */
498
587
  helperText?: string;
499
588
  /**
500
- * Show icon with helper text (Info when neutral, InfoFilled when error)
589
+ * Show icon with supporting text (Info when neutral, WarningFilled when error)
501
590
  * @default false
502
591
  */
592
+ supportIcon?: boolean;
593
+ /**
594
+ * @deprecated Use `supportIcon`.
595
+ */
503
596
  showHelperIcon?: boolean;
504
597
  /**
505
598
  * Label for "Select all" option; set to empty to hide
@@ -507,12 +600,14 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
507
600
  selectAllLabel?: string;
508
601
  }
509
602
  /**
510
- * Dropdown (single select) Input-style trigger with chevron, Radix Select content.
603
+ * Dropdown (single select) — Input-style trigger with chevron, Radix Select content.
511
604
  */
512
605
  declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;
513
606
  /** Multi-select dropdown: trigger bg white, border neutral-400; menu border neutral-200, divider neutral-200; padding 8, gap 8 */
514
607
  interface DropdownMultiProps {
515
608
  label?: string;
609
+ asterisk?: boolean;
610
+ /** @deprecated Use `asterisk`. */
516
611
  required?: boolean;
517
612
  placeholder?: string;
518
613
  options: DropdownOption[];
@@ -531,10 +626,18 @@ interface DropdownMultiProps {
531
626
  /** Label for "Select all" option; set to empty to hide */
532
627
  selectAllLabel?: string;
533
628
  /** Show info icon next to label (after required asterisk) */
629
+ infoIcon?: boolean;
630
+ /** @deprecated Use `infoIcon`. */
534
631
  showLabelIcon?: boolean;
535
- /** Helper/supporting text below dropdown */
632
+ /** Supporting text below dropdown */
633
+ supportText?: string;
634
+ /** Toggle supporting text row. */
635
+ supportingText?: boolean;
636
+ /** @deprecated Use `supportText`. */
536
637
  helperText?: string;
537
- /** Show icon with helper text */
638
+ /** Show icon with supporting text */
639
+ supportIcon?: boolean;
640
+ /** @deprecated Use `supportIcon`. */
538
641
  showHelperIcon?: boolean;
539
642
  }
540
643
  declare const DropdownMulti: React.ForwardRefExoticComponent<DropdownMultiProps & React.RefAttributes<HTMLButtonElement>>;
@@ -549,8 +652,8 @@ declare const DropdownMulti: React.ForwardRefExoticComponent<DropdownMultiProps
549
652
  * - Border radius: 8px
550
653
  * - Padding: 4px 12px
551
654
  * - Gap: 8px
552
- * - Icon size: 16×16px
553
- * - Close icon: 16×16px (same as search icon)
655
+ * - Icon size: 16×16px
656
+ * - Close icon: 16×16px (same as search icon)
554
657
  * - Smooth transitions: 200ms ease-out
555
658
  */
556
659
  declare const searchFieldVariants: (props?: ({} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
@@ -613,9 +716,21 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
613
716
  /**
614
717
  * Whether the label is required (shows red asterisk)
615
718
  */
719
+ asterisk?: boolean;
720
+ /**
721
+ * @deprecated Use `asterisk`.
722
+ */
616
723
  required?: boolean;
617
724
  /**
618
- * Helper text below textarea (for errors, hints, etc.)
725
+ * Supporting text value shown below textarea.
726
+ */
727
+ supportText?: string;
728
+ /**
729
+ * Toggle supporting text row.
730
+ */
731
+ supportingText?: boolean;
732
+ /**
733
+ * @deprecated Use `supportText`.
619
734
  */
620
735
  helperText?: string;
621
736
  /**
@@ -628,19 +743,36 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
628
743
  */
629
744
  maxLength?: number;
630
745
  /**
631
- * Show character counter
746
+ * Toggle character counter visibility.
632
747
  * @default true
633
748
  */
749
+ characterCount?: boolean;
750
+ /**
751
+ * Count text shown when `characterCount` is true.
752
+ * If omitted, computed value `${currentLength}/${maxLength}` is shown.
753
+ */
754
+ count?: string;
755
+ /**
756
+ * @deprecated Use `characterCount`.
757
+ */
634
758
  showCounter?: boolean;
635
759
  /**
636
760
  * Show info icon next to label
637
761
  * @default false
638
762
  */
763
+ infoIcon?: boolean;
764
+ /**
765
+ * @deprecated Use `infoIcon`.
766
+ */
639
767
  showLabelIcon?: boolean;
640
768
  /**
641
769
  * Show icon with supporting text
642
770
  * @default false
643
771
  */
772
+ supportIcon?: boolean;
773
+ /**
774
+ * @deprecated Use `supportIcon`.
775
+ */
644
776
  showHelperIcon?: boolean;
645
777
  }
646
778
  /**
@@ -720,7 +852,7 @@ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.Re
720
852
  * - Padding: 16px
721
853
  * - Gap: 4px
722
854
  * - Title: 12px, 500 weight, 16px line-height
723
- * - Arrow: 12×8px (all directions)
855
+ * - Arrow: 12×8px (all directions)
724
856
  *
725
857
  * Uses rem for dimensions to respect user font size preferences (accessibility)
726
858
  *
@@ -754,19 +886,42 @@ interface TooltipContentProps extends Omit<React.ComponentPropsWithoutRef<typeof
754
886
  */
755
887
  title: string;
756
888
  /**
757
- * Description text (optional)
758
- * When provided, tooltip height becomes 52px
889
+ * Description toggle/text. Use `description={true}` with `descriptionText`,
890
+ * or pass the text directly as `description="..."`.
759
891
  */
760
- description?: string;
892
+ description?: string | boolean;
893
+ /**
894
+ * Description value used when `description` is a boolean toggle.
895
+ */
896
+ descriptionText?: string;
761
897
  /**
762
898
  * Whether to show close icon in top-right
763
899
  * @default false
764
900
  */
765
- showCloseIcon?: boolean;
901
+ closeIcon?: boolean;
902
+ /**
903
+ * @deprecated Use `closeIcon`.
904
+ */
766
905
  /**
767
906
  * Callback when close icon is clicked
768
907
  */
769
908
  onClose?: () => void;
909
+ /**
910
+ * Tooltip direction relative to trigger.
911
+ */
912
+ direction?: "bottom" | "top" | "right" | "left";
913
+ /**
914
+ * Tooltip alignment relative to trigger.
915
+ */
916
+ alignment?: "end" | "middle" | "start";
917
+ /**
918
+ * @deprecated Use `direction`.
919
+ */
920
+ side?: "bottom" | "top" | "right" | "left";
921
+ /**
922
+ * @deprecated Use `alignment`.
923
+ */
924
+ align?: "start" | "center" | "end";
770
925
  /**
771
926
  * Whether to show the arrow
772
927
  * @default true
@@ -791,7 +946,7 @@ declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProp
791
946
 
792
947
  interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
793
948
  /**
794
- * Current progress value (0100).
949
+ * Current progress value (0–100).
795
950
  */
796
951
  value: number;
797
952
  /**
@@ -845,7 +1000,7 @@ interface LoaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
845
1000
  "aria-label"?: string;
846
1001
  /**
847
1002
  * Gradient color (e.g. #FFFFFF for white on dark backgrounds).
848
- * @default semantic background.neutralInverse.primary (neutral.1100)
1003
+ * @default semantic background.primary.default
849
1004
  */
850
1005
  color?: string;
851
1006
  /**
@@ -895,7 +1050,7 @@ declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.Re
895
1050
  * States: Default, Hover, Selected, Disabled.
896
1051
  * Colors: semantic-colors (background, border, text) where available.
897
1052
  * Typography: 14px, weight 500, line-height 24px.
898
- * Spec: Container selected box 178×32, shadow 0 2px 6px; Underline selected 2px info; Icon only 24×24 box, radius 4, padding 4, gap 8.
1053
+ * Spec: Container selected box 178×32, shadow 0 2px 6px; Underline selected 2px info; Icon only 24×24 box, radius 4, padding 4, gap 8.
899
1054
  */
900
1055
  declare const tabsListVariants: (props?: ({
901
1056
  type?: "underline" | "iconOnly" | "container" | null | undefined;
@@ -908,6 +1063,11 @@ interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.
908
1063
  * Visual type: container (boxed), underline, or icon only.
909
1064
  */
910
1065
  type?: "container" | "underline" | "iconOnly";
1066
+ /**
1067
+ * Number of tab items when you build triggers/content dynamically (e.g. map over `count`).
1068
+ * Stored in tabs context for consumers; does not render tabs by itself.
1069
+ */
1070
+ count?: number;
911
1071
  }
912
1072
  declare const TabsRoot: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
913
1073
  declare const TabsList: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref">, "type"> & VariantProps<(props?: ({
@@ -945,23 +1105,27 @@ declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttribu
945
1105
  /**
946
1106
  * Sangam Avatar Component
947
1107
  *
948
- * Two variants: Image (photo or placeholder silhouette) and Letter (initials).
949
- * Sizes: large (32×32), medium (24×24), small (20×20).
1108
+ * Two types: Icon (placeholder silhouette/image) and Letter (initials).
1109
+ * Sizes: big (32×32), medium (24×24), small (20×20).
950
1110
  * Letter: bg/text from semantic-colors (neutral tertiary); weight 500.
951
- * Letter typography: large tokens base (16px)/leading-6; medium/small tokens 3xs (10px).
1111
+ * Letter typography: big tokens base (16px)/leading-6; medium/small tokens 3xs (10px).
952
1112
  * Token-based, circular (rounded-full).
953
1113
  */
954
1114
  declare const avatarVariants: (props?: ({
955
- size?: "medium" | "small" | "large" | null | undefined;
1115
+ size?: "big" | "medium" | "small" | null | undefined;
956
1116
  } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
957
- interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof avatarVariants> {
1117
+ interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, Omit<VariantProps<typeof avatarVariants>, "size"> {
958
1118
  /**
959
- * Variant: "image" (photo or placeholder silhouette) or "letter" (initials).
1119
+ * Type: "icon" (photo or placeholder silhouette) or "letter" (initials).
960
1120
  * Letter uses semantic-colors: bg neutral tertiary, text neutral tertiary; typography per size (Big: tokens base, Medium/Small: tokens 3xs = 10px).
961
1121
  */
962
- variant?: "image" | "letter";
1122
+ type?: "icon" | "letter";
1123
+ /** @deprecated Use `type` instead. Kept for backward compatibility. */
1124
+ variant?: "icon" | "letter" | "image";
1125
+ /** @deprecated Use `size=\"big\"` instead. Kept for backward compatibility. */
1126
+ size?: "big" | "medium" | "small" | "large";
963
1127
  /**
964
- * Image URL for the avatar. When not provided or on error, placeholder is shown (image variant only).
1128
+ * Image URL for the avatar. When not provided or on error, placeholder is shown (icon type only).
965
1129
  */
966
1130
  src?: string | null;
967
1131
  /**
@@ -969,7 +1133,7 @@ interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "child
969
1133
  */
970
1134
  alt?: string;
971
1135
  /**
972
- * For letter variant: initials (e.g. "AB"). For image variant: optional fallback when src fails.
1136
+ * For letter type: initials (e.g. "AB"). For icon type: optional fallback when src fails.
973
1137
  */
974
1138
  children?: React.ReactNode;
975
1139
  }
@@ -990,7 +1154,14 @@ declare const MenuMenu: {
990
1154
  };
991
1155
  declare const MenuTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
992
1156
  declare const MenuContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
993
- declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
1157
+ interface MenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>, "children"> {
1158
+ children?: React.ReactNode;
1159
+ /**
1160
+ * Optional icon before the label (Figma **Leading icon** on single-select items).
1161
+ */
1162
+ leadingIcon?: React.ReactNode;
1163
+ }
1164
+ declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
994
1165
  declare const MenuSeparator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
995
1166
  declare const MenuSub: React.FC<MenubarPrimitive.MenubarSubProps>;
996
1167
  declare const MenuSubTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -1083,6 +1254,8 @@ interface PopupProps {
1083
1254
  onOpenChange: (open: boolean) => void;
1084
1255
  title: string;
1085
1256
  subtext?: string;
1257
+ /** Controls subtext visibility below title. @default true */
1258
+ showSubtext?: boolean;
1086
1259
  children: React.ReactNode;
1087
1260
  /**
1088
1261
  * When true, renders the body inside the subtle blue "content box".
@@ -1091,6 +1264,8 @@ interface PopupProps {
1091
1264
  showBodyBox?: boolean;
1092
1265
  cancelText?: string;
1093
1266
  ctaText?: string;
1267
+ /** Controls CTA button row visibility. @default true */
1268
+ showCTA?: boolean;
1094
1269
  onCancelClick?: () => void;
1095
1270
  onCtaClick?: () => void;
1096
1271
  showClose?: boolean;
@@ -1113,12 +1288,16 @@ interface PopupProps {
1113
1288
  * - Uses Radix Dialog for focus trap + ESC/overlay dismiss
1114
1289
  * - Matches Sangam modal geometry (min-width 520px, 16px padding, 16px gaps, 12px between actions)
1115
1290
  */
1116
- declare function Popup({ open, onOpenChange, title, subtext, children, showBodyBox, cancelText, ctaText, onCancelClick, onCtaClick, showClose, showOverlay, autoFocusClose, contentClassName, surfaceClassName, }: PopupProps): react_jsx_runtime.JSX.Element;
1291
+ declare function Popup({ open, onOpenChange, title, subtext, showSubtext, children, showBodyBox, cancelText, ctaText, showCTA, onCancelClick, onCtaClick, showClose, showOverlay, autoFocusClose, contentClassName, surfaceClassName, }: PopupProps): react_jsx_runtime.JSX.Element;
1117
1292
  interface PopupTriggerProps {
1118
1293
  title: string;
1119
1294
  subtext?: string;
1295
+ /** Controls subtext visibility below title. @default true */
1296
+ showSubtext?: boolean;
1120
1297
  cancelText?: string;
1121
1298
  ctaText?: string;
1299
+ /** Controls CTA button row visibility. @default true */
1300
+ showCTA?: boolean;
1122
1301
  showClose?: boolean;
1123
1302
  showOverlay?: boolean;
1124
1303
  autoFocusClose?: boolean;
@@ -1143,12 +1322,12 @@ interface PopupTriggerProps {
1143
1322
  * - A centered Popup that opens on click
1144
1323
  * - Developer-friendly API for Storybook docs
1145
1324
  */
1146
- declare function PopupTrigger({ title, subtext, cancelText, ctaText, showClose, showOverlay, autoFocusClose, triggerLabel, showBodyBox, onCancelClick, onCtaClick, children, }: PopupTriggerProps): react_jsx_runtime.JSX.Element;
1325
+ declare function PopupTrigger({ title, subtext, showSubtext, cancelText, ctaText, showCTA, showClose, showOverlay, autoFocusClose, triggerLabel, showBodyBox, onCancelClick, onCtaClick, children, }: PopupTriggerProps): react_jsx_runtime.JSX.Element;
1147
1326
 
1148
1327
  /**
1149
1328
  * Sangam Badge Component
1150
1329
  *
1151
- * Token-based badges with two sizes (big/small), three shapes (rounded/pill/notification),
1330
+ * Token-based badges with two sizes (big/small), three shapes (rounded/pill/number),
1152
1331
  * semantic states (info/success/warning/error/neutral/process/action), and outlined/solid styles.
1153
1332
  * Content variants (Only Label, Icon+Label, Dismissal, Dropdown) are controlled via boolean
1154
1333
  * props for leading icons, dropdown chevron, and close icon.
@@ -1157,29 +1336,49 @@ declare function PopupTrigger({ title, subtext, cancelText, ctaText, showClose,
1157
1336
  * Border radius: rounded variant uses 8px (tokens radius.sm = 0.5rem).
1158
1337
  *
1159
1338
  * Sizes:
1160
- * - Big: Rounded/Pill 48×24px; Notification 24×24px (circular)
1161
- * - Small: Rounded/Pill 48×20px; Notification 20×20px (circular)
1339
+ * - Big: Rounded/Pill 48×24px; Number 24×24px (circular)
1340
+ * - Small: Rounded/Pill 48×20px; Number 20×20px (circular)
1162
1341
  *
1163
1342
  * Label typography (both sizes): weight 500, size 12px, line-height 16px.
1164
1343
  * Padding (rounded/pill): Big top=4 bottom=4 left=8 right=8; Small top=2 bottom=2 left=8 right=8.
1165
1344
  */
1166
1345
  declare const badgeVariants: (props?: ({
1167
1346
  size?: "big" | "small" | null | undefined;
1168
- variant?: "rounded" | "pill" | "notification" | null | undefined;
1347
+ variant?: "number" | "rounded" | "pill" | "notification" | null | undefined;
1169
1348
  state?: "action" | "error" | "success" | "info" | "warning" | "neutral" | "process" | null | undefined;
1170
1349
  appearance?: "solid" | "outlined" | null | undefined;
1171
1350
  } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
1172
1351
  interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
1173
1352
  /**
1174
- * Badge content. Use text for rounded/pill, number for notification.
1175
- * For Icon+Label or Dismissal, compose icon/close as children in the consuming layer.
1353
+ * Badge label text for rounded/pill types.
1354
+ * For `type="number"`, prefer `number` prop.
1355
+ */
1356
+ text?: React.ReactNode;
1357
+ /**
1358
+ * Number content used for `type="number"`.
1359
+ */
1360
+ number?: number;
1361
+ /**
1362
+ * @deprecated Use `text` or `number` instead.
1176
1363
  */
1177
1364
  children?: React.ReactNode;
1365
+ /**
1366
+ * Type of badge shape.
1367
+ */
1368
+ type?: "rounded" | "pill" | "number";
1369
+ /**
1370
+ * @deprecated Use `type` instead.
1371
+ */
1372
+ variant?: "rounded" | "pill" | "number" | "notification";
1178
1373
  /**
1179
1374
  * When true, Badge uses solid styling tokens for the given state.
1180
1375
  * This takes precedence over the `appearance` prop.
1181
1376
  * @default false
1182
1377
  */
1378
+ solid?: boolean;
1379
+ /**
1380
+ * @deprecated Use `solid` instead.
1381
+ */
1183
1382
  isSolid?: boolean;
1184
1383
  /**
1185
1384
  * When true, renders a fixed leading status icon chosen by `state`.
@@ -1190,11 +1389,19 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
1190
1389
  * When true, renders a fixed dropdown chevron icon on the trailing edge.
1191
1390
  * @default false
1192
1391
  */
1392
+ dropdown?: boolean;
1393
+ /**
1394
+ * @deprecated Use `dropdown` instead.
1395
+ */
1193
1396
  dropdownIcon?: boolean;
1194
1397
  /**
1195
1398
  * When true, renders a fixed close icon on the trailing edge.
1196
1399
  * @default false
1197
1400
  */
1401
+ closeIcon?: boolean;
1402
+ /**
1403
+ * @deprecated Use `closeIcon` instead.
1404
+ */
1198
1405
  closable?: boolean;
1199
1406
  /**
1200
1407
  * Optional callback invoked when the close icon is clicked.
@@ -1255,15 +1462,15 @@ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttribu
1255
1462
  *
1256
1463
  * Structural variants: 1) Only label, 2) Label + close icon, 3) Tick icon + label + close icon.
1257
1464
  * Token-based chip: Default, Hover, Selected, Disabled, Focused.
1258
- * Sizes: Large (75×32, close 16×16), Small (67×24, close 12×12).
1465
+ * Sizes: Large (75×32, close 16×16), Small (67×24, close 12×12).
1259
1466
  * Radius 999 (pill). Colors from @esds-sangam/tokens.
1260
1467
  *
1261
1468
  * States (semantic-colors):
1262
- * - Default: bg neutral primary, text neutral primary, border neutral primary
1263
- * - Hover: bg neutral tertiary, border transparent
1264
- * - Selected: bg neutralInverse primary, text neutralInverse primary
1265
- * - Disabled: bg neutral disabled, text neutral disabled
1266
- * - Focused: bg neutral primary, text neutral primary, border 2px neutralInverse primary
1469
+ * - Default: chips.background.default, chips.text.default, chips.border.default
1470
+ * - Hover: chips.background.hover, chips.text.hover
1471
+ * - Selected: chips.background.selected, chips.text.selected
1472
+ * - Disabled: chips.background.disabled, chips.text.disabled
1473
+ * - Focused: chips.border.focused
1267
1474
  */
1268
1475
  declare const chipVariants: (props?: ({
1269
1476
  size?: "small" | "large" | null | undefined;
@@ -1276,7 +1483,7 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
1276
1483
  */
1277
1484
  children?: React.ReactNode;
1278
1485
  /**
1279
- * Size: large (75×32, close 16×16) or small (67×24, close 12×12).
1486
+ * Size: large (75×32, close 16×16) or small (67×24, close 12×12).
1280
1487
  */
1281
1488
  size?: "large" | "small";
1282
1489
  /**
@@ -1291,10 +1498,17 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
1291
1498
  * Callback when close icon is clicked. When provided, close icon is shown (variant: Label + close).
1292
1499
  */
1293
1500
  onDismiss?: () => void;
1501
+ /**
1502
+ * Controls close icon visibility.
1503
+ * - true: close icon visible
1504
+ * - false: close icon hidden
1505
+ * @default true when onDismiss is provided, otherwise false
1506
+ */
1507
+ closeIcon?: boolean;
1294
1508
  /**
1295
1509
  * When true, show tick icon before the label. Use with onDismiss for variant: Tick + label + close.
1296
1510
  */
1297
- showLeadingIcon?: boolean;
1511
+ leadingIcon?: boolean;
1298
1512
  }
1299
1513
  /**
1300
1514
  * Chip for tags, filters, or removable items.
@@ -1306,7 +1520,7 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
1306
1520
  * <Chip size="large" onDismiss={() => {}}>Chip</Chip>
1307
1521
  *
1308
1522
  * @example Tick + label + close
1309
- * <Chip size="large" onDismiss={() => {}} showLeadingIcon>Chip</Chip>
1523
+ * <Chip size="large" onDismiss={() => {}} leadingIcon>Chip</Chip>
1310
1524
  *
1311
1525
  * @example Selected
1312
1526
  * <Chip size="large" selected>Chip</Chip>
@@ -1320,7 +1534,7 @@ interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
1320
1534
  totalPages: number;
1321
1535
  /** Called when page changes */
1322
1536
  onPageChange?: (page: number) => void;
1323
- /** Total records (optional; not shown in the bar use in parent for range copy if needed) */
1537
+ /** Total records (optional; not shown in the bar — use in parent for range copy if needed) */
1324
1538
  totalRecords?: number;
1325
1539
  /** Current page-size value for the entries selector */
1326
1540
  pageSize?: number;
@@ -1342,26 +1556,53 @@ declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & Reac
1342
1556
  * - Per step (when a connector runs to the next step): circle + connector column totals `h-7xl` (64px).
1343
1557
  * - Connector stroke width: 2px (matches prior spec).
1344
1558
  */
1345
- type StepperStepVariant = "default" | "inProgress" | "complete";
1559
+ type StepperState = "default" | "inProgress" | "complete";
1560
+ /** @deprecated Use `StepperState`. */
1561
+ type StepperStepVariant = StepperState;
1346
1562
  interface StepperStep {
1347
1563
  /** Step title */
1348
1564
  title: React.ReactNode;
1349
- /** Optional step subtext */
1565
+ /** Optional step description/subtext */
1566
+ description?: React.ReactNode;
1567
+ /** @deprecated Use `description`. */
1350
1568
  subtext?: React.ReactNode;
1351
1569
  /** Visual state for this step */
1352
- variant: StepperStepVariant;
1570
+ states: StepperState;
1571
+ /** @deprecated Use `states`. */
1572
+ variant?: StepperState;
1573
+ /** Show connector line for this step. Overrides component-level `showLine`. */
1574
+ showLine?: boolean;
1575
+ /** Optional explicit step number (falls back to index + 1). */
1576
+ stepNumber?: number;
1353
1577
  }
1354
- interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
1355
- steps: StepperStep[];
1578
+ interface StepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
1579
+ /**
1580
+ * Preferred single-step API (playground-aligned).
1581
+ */
1582
+ states?: StepperState;
1583
+ showLine?: boolean;
1584
+ title?: React.ReactNode;
1585
+ description?: React.ReactNode;
1586
+ stepNumber?: number;
1587
+ /**
1588
+ * Optional multi-step API for advanced flows.
1589
+ */
1590
+ steps?: StepperStep[];
1356
1591
  }
1357
1592
  declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
1358
1593
 
1359
1594
  /** Toast entry for the provider (id, content, optional duration in ms; default 4000) */
1360
1595
  interface ToastEntryOptions {
1361
1596
  title: string;
1597
+ types?: "info" | "success" | "warning" | "error";
1598
+ /** @deprecated Use `types`. */
1362
1599
  variant?: "info" | "success" | "warning" | "error";
1363
- description?: string;
1600
+ description?: string | boolean;
1601
+ descriptionText?: string;
1602
+ cta?: boolean | string;
1364
1603
  ctaText?: string;
1604
+ close?: boolean;
1605
+ /** @deprecated Use `close`. */
1365
1606
  onCtaClick?: () => void;
1366
1607
  showClose?: boolean;
1367
1608
  /** Duration in ms before auto-dismiss. @default 4000 */
@@ -1392,11 +1633,17 @@ declare const toastVariants: (props?: ({
1392
1633
  layout?: "default" | "withDescription" | null | undefined;
1393
1634
  } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
1394
1635
  interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toastVariants> {
1636
+ types?: "info" | "success" | "warning" | "error";
1637
+ /** @deprecated Use `types`. */
1395
1638
  variant?: "info" | "success" | "warning" | "error";
1396
1639
  title: string;
1397
- description?: string;
1640
+ description?: string | boolean;
1641
+ descriptionText?: string;
1642
+ close?: boolean;
1643
+ /** @deprecated Use `close`. */
1398
1644
  showClose?: boolean;
1399
1645
  onClose?: () => void;
1646
+ cta?: boolean | string;
1400
1647
  ctaText?: string;
1401
1648
  onCtaClick?: () => void;
1402
1649
  }
@@ -1494,6 +1741,14 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
1494
1741
  * When provided, a neutral/info badge is shown.
1495
1742
  */
1496
1743
  badgeLabel?: string;
1744
+ /**
1745
+ * Figma playground badge toggle. When true, renders badge using `badgeName` (or `badgeLabel` fallback).
1746
+ */
1747
+ badge?: boolean;
1748
+ /**
1749
+ * Figma playground badge text. Used when `badge` is true.
1750
+ */
1751
+ badgeName?: string;
1497
1752
  /**
1498
1753
  * When true, shows a second line of descriptive text below the title.
1499
1754
  */
@@ -1514,6 +1769,22 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
1514
1769
  * Optional third CTA button (rightmost or leftmost depending on usage).
1515
1770
  */
1516
1771
  tertiaryAction?: PageHeaderAction;
1772
+ /**
1773
+ * Figma playground CTA toggle. When enabled, CTA buttons are derived from `firstCta` / `secondCta` / `thirdCta`.
1774
+ */
1775
+ ctas?: boolean;
1776
+ /** Toggle first CTA button (left-most). */
1777
+ firstCta?: boolean;
1778
+ /** Label for first CTA button. */
1779
+ firstCtaLabel?: string;
1780
+ /** Toggle second CTA button (middle). */
1781
+ secondCta?: boolean;
1782
+ /** Label for second CTA button. */
1783
+ secondCtaLabel?: string;
1784
+ /** Toggle third CTA button (right-most). */
1785
+ thirdCta?: boolean;
1786
+ /** Label for third CTA button. */
1787
+ thirdCtaLabel?: string;
1517
1788
  /**
1518
1789
  * When true, shows a close icon button on the right.
1519
1790
  */
@@ -1522,9 +1793,40 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
1522
1793
  * Callback when the close icon is clicked.
1523
1794
  */
1524
1795
  onCloseClick?: () => void;
1796
+ /**
1797
+ * When true, shows maximize icon on the right.
1798
+ */
1799
+ showMaximise?: boolean;
1800
+ /**
1801
+ * Callback when maximize icon is clicked.
1802
+ */
1803
+ onMaximiseClick?: () => void;
1804
+ /**
1805
+ * Optional breadcrumbs content rendered above the title row.
1806
+ * Example: `<Breadcrumbs type="L2" title="Additional Details" l1="..." l2="..." />`
1807
+ */
1808
+ breadcrumbs?: React.ReactNode;
1525
1809
  }
1526
1810
  declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
1527
1811
 
1812
+ type BreadcrumbsType = "onlyTitle" | "L1" | "L2";
1813
+ interface BreadcrumbsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
1814
+ /**
1815
+ * Breadcrumb depth type:
1816
+ * - onlyTitle: Title only
1817
+ * - L1: L1 / Title
1818
+ * - L2: L1 / L2 / Title
1819
+ */
1820
+ type?: BreadcrumbsType;
1821
+ /** Current page title (active breadcrumb). */
1822
+ title: string;
1823
+ /** First level breadcrumb text. */
1824
+ l1?: string;
1825
+ /** Second level breadcrumb text. */
1826
+ l2?: string;
1827
+ }
1828
+ declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
1829
+
1528
1830
  type PageFooterAction = {
1529
1831
  /**
1530
1832
  * Visible label for the button.
@@ -1625,6 +1927,11 @@ interface SideMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "childre
1625
1927
  defaultSelectedId?: string;
1626
1928
  /** Controlled expanded state. When undefined and variant is default, expands on hover. */
1627
1929
  expanded?: boolean;
1930
+ /**
1931
+ * Shows vertical scrollbar for long content.
1932
+ * Applies only when `state` is `hover`, `selected`, or `sticky`.
1933
+ */
1934
+ showScrollbar?: boolean;
1628
1935
  /** Callback when an item is clicked */
1629
1936
  onItemClick?: (id: string) => void;
1630
1937
  /**
@@ -1640,7 +1947,7 @@ interface SideMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "childre
1640
1947
  onProjectChange?: (value: string) => void;
1641
1948
  }
1642
1949
  declare const sideMenuVariants: (props?: ({
1643
- variant?: "default" | "sticky" | "selected" | "hover" | null | undefined;
1950
+ state?: "default" | "sticky" | "hover" | "selected" | null | undefined;
1644
1951
  } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
1645
1952
  declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>>;
1646
1953
 
@@ -1668,7 +1975,7 @@ interface SideMenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
1668
1975
  declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
1669
1976
 
1670
1977
  /**
1671
- * Upload Pattern Stage 1: File uploader
1978
+ * Upload Pattern – Stage 1: File uploader
1672
1979
  *
1673
1980
  * Token-based, accessible file uploader pattern with:
1674
1981
  * - Label (12px, weight 500, line-height 16)
@@ -1682,6 +1989,8 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
1682
1989
  /** Field label shown above the uploader (12/500/16). */
1683
1990
  label: string;
1684
1991
  /** Whether to show the red asterisk after the label. */
1992
+ asterisk?: boolean;
1993
+ /** @deprecated Use `asterisk`. */
1685
1994
  required?: boolean;
1686
1995
  /** Accept string for underlying file input, e.g. \"image/*,.pdf\". */
1687
1996
  accept?: string;
@@ -1689,8 +1998,16 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
1689
1998
  multiple?: boolean;
1690
1999
  /** Callback when user selects or drops files. */
1691
2000
  onFilesSelected?: (files: File[]) => void;
1692
- /** Helper text under the primary line (defaults to PNG/JPG/PDF/EXCEL). */
2001
+ /** Text under the primary line in dropzone (defaults to PNG/JPG/PDF/EXCEL). */
2002
+ subtext?: string;
2003
+ /** @deprecated Use `subtext`. */
1693
2004
  helperText?: string;
2005
+ /** Toggle supporting row below the upload box. */
2006
+ supportingText?: boolean;
2007
+ /** Supporting row text. */
2008
+ supportText?: string;
2009
+ /** Show icon before supporting row text. */
2010
+ supportIcon?: boolean;
1694
2011
  }
1695
2012
  declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
1696
2013
  declare const uploadFileItemBoxVariants: (props?: ({
@@ -1702,7 +2019,9 @@ interface UploadFileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
1702
2019
  fileName: string;
1703
2020
  /** File size or status line (e.g. "5.5MB"). 12px, weight 400, line-height 16, neutral-600. When failed, show "Upload failed" in red-800. */
1704
2021
  fileSize?: string;
1705
- /** Current progress 0100 (for uploading/complete). Hidden when status is "failed". */
2022
+ /** Current progress 0–100 (for uploading/complete). Hidden when status is "failed". */
2023
+ process?: number;
2024
+ /** @deprecated Use `process`. */
1706
2025
  progress?: number;
1707
2026
  /** Callback when user cancels (close icon during uploading). */
1708
2027
  onCancel?: () => void;
@@ -1712,9 +2031,9 @@ interface UploadFileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
1712
2031
  onDelete?: () => void;
1713
2032
  }
1714
2033
  /**
1715
- * UploadFileItem single file row in the upload pattern.
1716
- * Box: 536×100 (min), border neutral-300 (red-800 when failed), radius 12px (tokens rounded-md), padding 16, gap 8.
1717
- * Left: DocumentPdf 24×24, fileName (14/500/24 neutral-1100), fileSize or "Upload failed" (12/400/16).
2034
+ * UploadFileItem – single file row in the upload pattern.
2035
+ * Box: 536×100 (min), border neutral-300 (red-800 when failed), radius 12px (tokens rounded-md), padding 16, gap 8.
2036
+ * Left: DocumentPdf 24×24, fileName (14/500/24 neutral-1100), fileSize or "Upload failed" (12/400/16).
1718
2037
  * Right: uploading = Close + %; complete = tickmarkFilled + Delete + 100%; failed = Retry + Delete.
1719
2038
  * Progress bar below when not failed (ProgressBar primitive, 10% / 50% / 100%).
1720
2039
  */
@@ -1739,4 +2058,4 @@ type Size = "sm" | "md" | "lg";
1739
2058
  type Variant = "primary" | "secondary" | "outline" | "ghost";
1740
2059
  type ColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info";
1741
2060
 
1742
- export { Avatar, Badge, type BaseComponentProps, Button, Card, Checkbox, Chip, type ColorScheme, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerHeaderTop, DrawerSurface, DrawerTitle, DrawerTrigger, Dropdown, DropdownMulti, type DropdownMultiProps, type DropdownOption, type DropdownProps, Input, Label, Loader, Menu, MenuContent, MenuItem, MenuMenu, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, PageFooter, type PageFooterAction, type PageFooterProps, PageHeader, type PageHeaderAction, type PageHeaderProps, type PageHeaderTab, Pagination, Popup, PopupContent, PopupTrigger, ProgressBar, Radio, RadioGroup, SearchField, SideMenu, SideMenuItem, type SideMenuItemGroup, type SideMenuItemProps, type SideMenuNavItem, type SideMenuProps, type Size, Skeleton, Stepper, type StepperProps, type StepperStep, type StepperStepVariant, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, type TabsTriggerOption, type TabsTriggerProps, Textarea, Toast, type ToastEntryOptions, ToastProvider, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Upload, UploadFileItem, type UploadFileItemProps, type UploadFileItemStatus, type UploadProps, type Variant, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxRootVariants as checkboxVariants, chipVariants, dropdownContentVariants, dropdownItemVariants, dropdownTriggerVariants, inputVariants, loaderVariants, pageHeaderVariants, radioVariants, searchFieldVariants, sideMenuVariants, skeletonVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipContentVariants, uploadBoxVariants, uploadFileItemBoxVariants, useToast };
2061
+ export { Avatar, Badge, type BaseComponentProps, Breadcrumbs, type BreadcrumbsProps, type BreadcrumbsType, Button, Card, Checkbox, Chip, type ColorScheme, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerHeaderTop, DrawerSurface, DrawerTitle, DrawerTrigger, Dropdown, DropdownMulti, type DropdownMultiProps, type DropdownOption, type DropdownProps, Input, Label, Loader, Menu, MenuContent, MenuItem, type MenuItemProps, MenuMenu, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, PageFooter, type PageFooterAction, type PageFooterProps, PageHeader, type PageHeaderAction, type PageHeaderProps, type PageHeaderTab, Pagination, Popup, PopupContent, PopupTrigger, ProgressBar, Radio, RadioGroup, SearchField, SideMenu, SideMenuItem, type SideMenuItemGroup, type SideMenuItemProps, type SideMenuNavItem, type SideMenuProps, type Size, Skeleton, Stepper, type StepperProps, type StepperState, type StepperStep, type StepperStepVariant, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, type TabsTriggerOption, type TabsTriggerProps, Textarea, Toast, type ToastEntryOptions, ToastProvider, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Upload, UploadFileItem, type UploadFileItemProps, type UploadFileItemStatus, type UploadProps, type Variant, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxRootVariants as checkboxVariants, chipVariants, dropdownContentVariants, dropdownItemVariants, dropdownTriggerVariants, inputVariants, loaderVariants, pageHeaderVariants, radioVariants, searchFieldVariants, sideMenuVariants, skeletonVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipContentVariants, uploadBoxVariants, uploadFileItemBoxVariants, useToast };