sangam-ui 1.0.1 → 1.0.3

package/dist/index.d.ts

@@ -26,10 +26,13 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
  * CVA (Class Variance Authority) manages all variants
  */
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "link" | "secondary" | "danger" | null | undefined;
+    variant?: "primary" | "secondary" | "danger" | "tertiary" | null | undefined;
     size?: "big" | "small" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+type ButtonCvaVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+/** Public `type` prop: CVA styles plus **loader** (spinner; uses primary chrome). */
+type ButtonType = ButtonCvaVariant | "loader";
 /**
  * Button Props
  *
@@ -38,7 +41,35 @@ declare const buttonVariants: (props?: ({
  * Supports asChild for Radix composition pattern
  * Supports leading/trailing/icon-only layouts controlled by booleans
  */
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">, Omit<VariantProps<typeof buttonVariants>, "variant"> {
+    /**
+     * Visual style (Figma **type**: Primary, Secondary, Danger, Tertiary, Loader).
+     * **Loader** shows the button in a loading state (spinner). Distinct from native `<button type>`.
+     */
+    type?: ButtonType | "link";
+    /**
+     * Native `<button type>` (e.g. `submit`). Default `"button"`.
+     * Ignored when `asChild` is true (pass `type` on the child element).
+     */
+    htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
+    /**
+     * @deprecated Use `type` instead.
+     */
+    variant?: ButtonType | "link";
+    /**
+     * Button label (Figma: **label**). Prefer over `children` for string labels.
+     */
+    label?: React.ReactNode;
+    /**
+     * Interaction state (Figma: **state** — Enabled / Disabled).
+     * @default "enabled"
+     */
+    state?: "enabled" | "disabled";
+    /**
+     * When true, applies hover styling without pointer hover (e.g. Storybook / docs preview).
+     * @default false
+     */
+    hover?: boolean;
     /**
      * If true, renders as a Slot (for composition with other components)
      * @example
@@ -62,13 +93,6 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
      * When true, shows the icon after the button label.
      */
     trailingIcon?: boolean;
-    /**
-     * Loading state: shows spinner, disables interaction, sets aria-busy.
-     * Big/icon buttons use 24×24 loader; small uses 16×16. White spinner on dark variants.
-     * @example
-     * <Button loading>Submit</Button>
-     */
-    loading?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -90,9 +114,9 @@ declare const toggleVariants: (props?: ({
  * Toggle Props
  *
  * Extends Radix Switch props. Adds size variants and optional label variants:
- * - Only toggle: no title/subtext
+ * - Only toggle: no title/subtitle
  * - Toggle + Title: title only (14px, #111111, weight 500, line-height 24px)
- * - Toggle + Title & Subtext: title + subtext (subtext: 12px, #7C7C7C, weight 400, line-height 16px)
+ * - Toggle + Title & Subtitle: title + subtitle (subtitle: 12px, #7C7C7C, weight 400, line-height 16px)
  */
 interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof toggleVariants> {
     /**
@@ -107,7 +131,27 @@ interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimit
     /**
      * Subtext shown below title. 12px, neutral-600, font-normal, leading-4.
      */
+    subtitle?: string;
+    /**
+     * @deprecated Use `subtitle`.
+     */
     subtext?: string;
+    /**
+     * Toggle state (Figma **isOn**).
+     */
+    isOn?: boolean;
+    /**
+     * Callback when `isOn` changes.
+     */
+    onIsOnChange?: (isOn: boolean) => void;
+    /**
+     * @deprecated Use `isOn`.
+     */
+    checked?: boolean;
+    /**
+     * @deprecated Use `onIsOnChange`.
+     */
+    onCheckedChange?: (checked: boolean) => void;
 }
 /**
  * Sangam Toggle Component
@@ -122,7 +166,7 @@ interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimit
  * <Toggle />
  *
  * @example Controlled
- * <Toggle checked={isOn} onCheckedChange={setIsOn} />
+ * <Toggle isOn={isOn} onIsOnChange={setIsOn} />
  *
  * @example Small size
  * <Toggle size="small" />
@@ -140,7 +184,7 @@ interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimit
  * <Toggle title="Write label text here" />
  *
  * @example Toggle + Title & Subtext
- * <Toggle title="Write label text here" subtext="Some helper text here" />
+ * <Toggle title="Write label text here" subtitle="Some helper text here" />
  */
 declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -159,62 +203,56 @@ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAtt
 declare const checkboxRootVariants: (props?: ({
     size?: "big" | "small" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-/**
- * Checkbox Props
- *
- * Extends Radix Checkbox props. Adds size variants and optional label variants:
- * - Only checkbox: no title/subtext
- * - Checkbox + Title: title only (14px, #111111, weight 500, line-height 24px)
- * - Checkbox + Title & Subtext: title + subtext (subtext: 12px, #7C7C7C, weight 400, line-height 16px)
- */
-interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxRootVariants> {
+type CheckboxVisualState = "default" | "disabled" | "hover";
+interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked" | "onCheckedChange" | "disabled" | "title"> {
+    size?: "big" | "small";
     /**
-     * Size of the checkbox
-     * @default "big"
+     * Selected state (Figma **isOn**).
+     * Prefer over Radix `checked` for design-system alignment.
      */
-    size?: "big" | "small";
+    isOn?: boolean;
+    onIsOnChange?: (isOn: boolean) => void;
     /**
-     * Title shown to the right of the checkbox. 14px, neutral-1100, font-medium, leading-6.
+     * @deprecated Use `isOn` / `onIsOnChange`.
      */
-    title?: string;
+    checked?: boolean;
     /**
-     * Subtext shown below title. 12px, neutral-600, font-normal, leading-4.
+     * @deprecated Use `onIsOnChange`.
      */
-    subtext?: string;
+    onCheckedChange?: (checked: boolean | "indeterminate") => void;
+    /**
+     * Interaction / preview state (Figma **state**).
+     * **hover** applies hover styling without a pointer (e.g. docs).
+     */
+    state?: CheckboxVisualState;
+    /**
+     * @deprecated Use `state="disabled"`.
+     */
+    disabled?: boolean;
+    /**
+     * Show the text block beside the control (Figma **text**).
+     * When `false`, only the checkbox is rendered.
+     */
+    text?: boolean;
+    /**
+     * Show the title line (Figma **title** toggle). Uses `titletext`.
+     */
+    title?: boolean;
+    /**
+     * Title / label copy (Figma **titletext**).
+     */
+    titletext?: string;
+    /**
+     * Show the helper line (Figma **subtext** toggle). Uses `subtextText`.
+     */
+    subtext?: boolean;
+    /**
+     * Helper copy below the title (Figma **subtextText**).
+     */
+    subtextText?: string;
 }
 /**
- * Sangam Checkbox Component
- *
- * Production-grade checkbox built on:
- * - Radix UI Checkbox (for accessibility)
- * - CVA (for type-safe size variants)
- * - Sangam tokens (for consistent styling)
- * - 200ms ease-out transitions
- * - Lucide React icons for checkmark
- *
- * @example Basic usage
- * <Checkbox />
- *
- * @example Controlled
- * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} />
- *
- * @example Small size
- * <Checkbox size="small" />
- *
- * @example Disabled
- * <Checkbox disabled />
- *
- * @example With label
- * <div className="flex items-center gap-2">
- *   <Checkbox id="terms" />
- *   <label htmlFor="terms">Accept terms and conditions</label>
- * </div>
- *
- * @example Checkbox + Title
- * <Checkbox title="Write label text here" />
- *
- * @example Checkbox + Title & Subtext
- * <Checkbox title="Write label text here" subtext="Some helper text here" />
+ * Sangam Checkbox — Radix Checkbox + CVA + Sangam tokens.
  */
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -260,6 +298,10 @@ interface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPri
      * Subtext shown below title. 12px, neutral-600, font-normal, leading-4.
      */
     subtext?: string;
+    /**
+     * Alias for `subtext`.
+     */
+    subText?: string;
 }
 /**
  * Sangam Radio Group Component
@@ -356,11 +398,15 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     /**
      * Whether the label is required (shows red asterisk)
      */
-    required?: boolean;
+    asterisk?: boolean;
     /**
      * Helper text below input (for errors, hints, etc.)
      */
-    helperText?: string;
+    supportText?: string;
+    /**
+     * Toggle supporting text row.
+     */
+    supportingText?: boolean;
     /**
      * Whether helper text is an error message
      */
@@ -369,12 +415,12 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
      * Show info icon next to label (after required asterisk)
      * @default false
      */
-    showLabelIcon?: boolean;
+    infoIcon?: boolean;
     /**
      * Show icon with supporting/helper text
      * @default false
      */
-    showHelperIcon?: boolean;
+    supportIcon?: boolean;
     /**
      * Trailing icon (e.g. dropdown chevron) - renders inside input wrapper on the right with border
      */
@@ -382,6 +428,31 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     /**
      * CTA label (e.g. "Button") - renders as link at end of input
      */
+    cta?: string | boolean;
+    /**
+     * CTA button type.
+     * @default "tertiary"
+     */
+    ctaType?: "primary" | "tertiary";
+    /**
+     * @deprecated Use `asterisk`.
+     */
+    required?: boolean;
+    /**
+     * @deprecated Use `supportText`.
+     */
+    helperText?: string;
+    /**
+     * @deprecated Use `infoIcon`.
+     */
+    showLabelIcon?: boolean;
+    /**
+     * @deprecated Use `supportIcon`.
+     */
+    showHelperIcon?: boolean;
+    /**
+     * @deprecated Use `cta`.
+     */
     ctaLabel?: string;
     /**
      * Callback when CTA is clicked
@@ -417,13 +488,14 @@ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttri
  * <Input label="Email" placeholder="Enter your email" />
  *
  * @example Required field
- * <Input label="Username" required />
+ * <Input label="Username" asterisk />
  *
  * @example Error state
  * <Input
  *   label="Password"
  *   error
- *   helperText="Password must be at least 8 characters"
+ *   supportText="Password must be at least 8 characters"
+ *   supportingText
  * />
  *
  * @example Success state
@@ -439,7 +511,8 @@ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttri
  * @example With helper text
  * <Input
  *   label="Email"
- *   helperText="We'll never share your email"
+ *   supportText="We'll never share your email"
+ *   supportingText
  * />
  */
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -462,6 +535,10 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
     /**
      * Required field (red asterisk)
      */
+    asterisk?: boolean;
+    /**
+     * @deprecated Use `asterisk`.
+     */
     required?: boolean;
     /**
      * Placeholder when no value selected
@@ -491,15 +568,31 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
      * Show info icon next to label (after required asterisk)
      * @default false
      */
+    infoIcon?: boolean;
+    /**
+     * @deprecated Use `infoIcon`.
+     */
     showLabelIcon?: boolean;
     /**
-     * Helper/supporting text below dropdown
+     * Supporting text below dropdown
+     */
+    supportText?: string;
+    /**
+     * Toggle supporting text row.
+     */
+    supportingText?: boolean;
+    /**
+     * @deprecated Use `supportText`.
      */
     helperText?: string;
     /**
-     * Show icon with helper text (Info when neutral, InfoFilled when error)
+     * Show icon with supporting text (Info when neutral, WarningFilled when error)
      * @default false
      */
+    supportIcon?: boolean;
+    /**
+     * @deprecated Use `supportIcon`.
+     */
     showHelperIcon?: boolean;
     /**
      * Label for "Select all" option; set to empty to hide
@@ -513,6 +606,8 @@ declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.Re
 /** Multi-select dropdown: trigger bg white, border neutral-400; menu border neutral-200, divider neutral-200; padding 8, gap 8 */
 interface DropdownMultiProps {
     label?: string;
+    asterisk?: boolean;
+    /** @deprecated Use `asterisk`. */
     required?: boolean;
     placeholder?: string;
     options: DropdownOption[];
@@ -531,10 +626,18 @@ interface DropdownMultiProps {
     /** Label for "Select all" option; set to empty to hide */
     selectAllLabel?: string;
     /** Show info icon next to label (after required asterisk) */
+    infoIcon?: boolean;
+    /** @deprecated Use `infoIcon`. */
     showLabelIcon?: boolean;
-    /** Helper/supporting text below dropdown */
+    /** Supporting text below dropdown */
+    supportText?: string;
+    /** Toggle supporting text row. */
+    supportingText?: boolean;
+    /** @deprecated Use `supportText`. */
     helperText?: string;
-    /** Show icon with helper text */
+    /** Show icon with supporting text */
+    supportIcon?: boolean;
+    /** @deprecated Use `supportIcon`. */
     showHelperIcon?: boolean;
 }
 declare const DropdownMulti: React.ForwardRefExoticComponent<DropdownMultiProps & React.RefAttributes<HTMLButtonElement>>;
@@ -613,9 +716,21 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
     /**
      * Whether the label is required (shows red asterisk)
      */
+    asterisk?: boolean;
+    /**
+     * @deprecated Use `asterisk`.
+     */
     required?: boolean;
     /**
-     * Helper text below textarea (for errors, hints, etc.)
+     * Supporting text value shown below textarea.
+     */
+    supportText?: string;
+    /**
+     * Toggle supporting text row.
+     */
+    supportingText?: boolean;
+    /**
+     * @deprecated Use `supportText`.
      */
     helperText?: string;
     /**
@@ -628,19 +743,36 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
      */
     maxLength?: number;
     /**
-     * Show character counter
+     * Toggle character counter visibility.
      * @default true
      */
+    characterCount?: boolean;
+    /**
+     * Count text shown when `characterCount` is true.
+     * If omitted, computed value `${currentLength}/${maxLength}` is shown.
+     */
+    count?: string;
+    /**
+     * @deprecated Use `characterCount`.
+     */
     showCounter?: boolean;
     /**
      * Show info icon next to label
      * @default false
      */
+    infoIcon?: boolean;
+    /**
+     * @deprecated Use `infoIcon`.
+     */
     showLabelIcon?: boolean;
     /**
      * Show icon with supporting text
      * @default false
      */
+    supportIcon?: boolean;
+    /**
+     * @deprecated Use `supportIcon`.
+     */
     showHelperIcon?: boolean;
 }
 /**
@@ -754,19 +886,42 @@ interface TooltipContentProps extends Omit<React.ComponentPropsWithoutRef<typeof
      */
     title: string;
     /**
-     * Description text (optional)
-     * When provided, tooltip height becomes 52px
+     * Description toggle/text. Use `description={true}` with `descriptionText`,
+     * or pass the text directly as `description="..."`.
+     */
+    description?: string | boolean;
+    /**
+     * Description value used when `description` is a boolean toggle.
      */
-    description?: string;
+    descriptionText?: string;
     /**
      * Whether to show close icon in top-right
      * @default false
      */
-    showCloseIcon?: boolean;
+    closeIcon?: boolean;
+    /**
+     * @deprecated Use `closeIcon`.
+     */
     /**
      * Callback when close icon is clicked
      */
     onClose?: () => void;
+    /**
+     * Tooltip direction relative to trigger.
+     */
+    direction?: "bottom" | "top" | "right" | "left";
+    /**
+     * Tooltip alignment relative to trigger.
+     */
+    alignment?: "end" | "middle" | "start";
+    /**
+     * @deprecated Use `direction`.
+     */
+    side?: "bottom" | "top" | "right" | "left";
+    /**
+     * @deprecated Use `alignment`.
+     */
+    align?: "start" | "center" | "end";
     /**
      * Whether to show the arrow
      * @default true
@@ -908,6 +1063,11 @@ interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.
      * Visual type: container (boxed), underline, or icon only.
      */
     type?: "container" | "underline" | "iconOnly";
+    /**
+     * Number of tab items when you build triggers/content dynamically (e.g. map over `count`).
+     * Stored in tabs context for consumers; does not render tabs by itself.
+     */
+    count?: number;
 }
 declare const TabsRoot: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 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
 /**
  * Sangam Avatar Component
  *
- * Two variants: Image (photo or placeholder silhouette) and Letter (initials).
- * Sizes: large (32×32), medium (24×24), small (20×20).
+ * Two types: Icon (placeholder silhouette/image) and Letter (initials).
+ * Sizes: big (32×32), medium (24×24), small (20×20).
  * Letter: bg/text from semantic-colors (neutral tertiary); weight 500.
- * Letter typography: large tokens base (16px)/leading-6; medium/small tokens 3xs (10px).
+ * Letter typography: big tokens base (16px)/leading-6; medium/small tokens 3xs (10px).
  * Token-based, circular (rounded-full).
  */
 declare const avatarVariants: (props?: ({
-    size?: "medium" | "small" | "large" | null | undefined;
+    size?: "big" | "medium" | "small" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
-interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof avatarVariants> {
+interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, Omit<VariantProps<typeof avatarVariants>, "size"> {
     /**
-     * Variant: "image" (photo or placeholder silhouette) or "letter" (initials).
+     * Type: "icon" (photo or placeholder silhouette) or "letter" (initials).
      * Letter uses semantic-colors: bg neutral tertiary, text neutral tertiary; typography per size (Big: tokens base, Medium/Small: tokens 3xs = 10px).
      */
-    variant?: "image" | "letter";
+    type?: "icon" | "letter";
+    /** @deprecated Use `type` instead. Kept for backward compatibility. */
+    variant?: "icon" | "letter" | "image";
+    /** @deprecated Use `size=\"big\"` instead. Kept for backward compatibility. */
+    size?: "big" | "medium" | "small" | "large";
     /**
-     * Image URL for the avatar. When not provided or on error, placeholder is shown (image variant only).
+     * Image URL for the avatar. When not provided or on error, placeholder is shown (icon type only).
      */
     src?: string | null;
     /**
@@ -969,7 +1133,7 @@ interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "child
      */
     alt?: string;
     /**
-     * For letter variant: initials (e.g. "AB"). For image variant: optional fallback when src fails.
+     * For letter type: initials (e.g. "AB"). For icon type: optional fallback when src fails.
      */
     children?: React.ReactNode;
 }
@@ -990,7 +1154,14 @@ declare const MenuMenu: {
 };
 declare const MenuTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const MenuContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface MenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>, "children"> {
+    children?: React.ReactNode;
+    /**
+     * Optional icon before the label (Figma **Leading icon** on single-select items).
+     */
+    leadingIcon?: React.ReactNode;
+}
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLDivElement>>;
 declare const MenuSeparator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const MenuSub: React.FC<MenubarPrimitive.MenubarSubProps>;
 declare const MenuSubTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -1083,6 +1254,8 @@ interface PopupProps {
     onOpenChange: (open: boolean) => void;
     title: string;
     subtext?: string;
+    /** Controls subtext visibility below title. @default true */
+    showSubtext?: boolean;
     children: React.ReactNode;
     /**
      * When true, renders the body inside the subtle blue "content box".
@@ -1091,6 +1264,8 @@ interface PopupProps {
     showBodyBox?: boolean;
     cancelText?: string;
     ctaText?: string;
+    /** Controls CTA button row visibility. @default true */
+    showCTA?: boolean;
     onCancelClick?: () => void;
     onCtaClick?: () => void;
     showClose?: boolean;
@@ -1113,12 +1288,16 @@ interface PopupProps {
  * - Uses Radix Dialog for focus trap + ESC/overlay dismiss
  * - Matches Sangam modal geometry (min-width 520px, 16px padding, 16px gaps, 12px between actions)
  */
-declare function Popup({ open, onOpenChange, title, subtext, children, showBodyBox, cancelText, ctaText, onCancelClick, onCtaClick, showClose, showOverlay, autoFocusClose, contentClassName, surfaceClassName, }: PopupProps): react_jsx_runtime.JSX.Element;
+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;
 interface PopupTriggerProps {
     title: string;
     subtext?: string;
+    /** Controls subtext visibility below title. @default true */
+    showSubtext?: boolean;
     cancelText?: string;
     ctaText?: string;
+    /** Controls CTA button row visibility. @default true */
+    showCTA?: boolean;
     showClose?: boolean;
     showOverlay?: boolean;
     autoFocusClose?: boolean;
@@ -1143,12 +1322,12 @@ interface PopupTriggerProps {
  * - A centered Popup that opens on click
  * - Developer-friendly API for Storybook docs
  */
-declare function PopupTrigger({ title, subtext, cancelText, ctaText, showClose, showOverlay, autoFocusClose, triggerLabel, showBodyBox, onCancelClick, onCtaClick, children, }: PopupTriggerProps): react_jsx_runtime.JSX.Element;
+declare function PopupTrigger({ title, subtext, showSubtext, cancelText, ctaText, showCTA, showClose, showOverlay, autoFocusClose, triggerLabel, showBodyBox, onCancelClick, onCtaClick, children, }: PopupTriggerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Sangam Badge Component
  *
- * Token-based badges with two sizes (big/small), three shapes (rounded/pill/notification),
+ * Token-based badges with two sizes (big/small), three shapes (rounded/pill/number),
  * semantic states (info/success/warning/error/neutral/process/action), and outlined/solid styles.
  * Content variants (Only Label, Icon+Label, Dismissal, Dropdown) are controlled via boolean
  * props for leading icons, dropdown chevron, and close icon.
@@ -1157,29 +1336,49 @@ declare function PopupTrigger({ title, subtext, cancelText, ctaText, showClose,
  * Border radius: rounded variant uses 8px (tokens radius.sm = 0.5rem).
  *
  * Sizes:
- * - Big: Rounded/Pill 48×24px; Notification 24×24px (circular)
- * - Small: Rounded/Pill 48×20px; Notification 20×20px (circular)
+ * - Big: Rounded/Pill 48×24px; Number 24×24px (circular)
+ * - Small: Rounded/Pill 48×20px; Number 20×20px (circular)
  *
  * Label typography (both sizes): weight 500, size 12px, line-height 16px.
  * Padding (rounded/pill): Big top=4 bottom=4 left=8 right=8; Small top=2 bottom=2 left=8 right=8.
  */
 declare const badgeVariants: (props?: ({
     size?: "big" | "small" | null | undefined;
-    variant?: "rounded" | "pill" | "notification" | null | undefined;
+    variant?: "number" | "rounded" | "pill" | "notification" | null | undefined;
     state?: "action" | "error" | "success" | "info" | "warning" | "neutral" | "process" | null | undefined;
     appearance?: "solid" | "outlined" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
     /**
-     * Badge content. Use text for rounded/pill, number for notification.
-     * For Icon+Label or Dismissal, compose icon/close as children in the consuming layer.
+     * Badge label text for rounded/pill types.
+     * For `type="number"`, prefer `number` prop.
+     */
+    text?: React.ReactNode;
+    /**
+     * Number content used for `type="number"`.
+     */
+    number?: number;
+    /**
+     * @deprecated Use `text` or `number` instead.
      */
     children?: React.ReactNode;
+    /**
+     * Type of badge shape.
+     */
+    type?: "rounded" | "pill" | "number";
+    /**
+     * @deprecated Use `type` instead.
+     */
+    variant?: "rounded" | "pill" | "number" | "notification";
     /**
      * When true, Badge uses solid styling tokens for the given state.
      * This takes precedence over the `appearance` prop.
      * @default false
      */
+    solid?: boolean;
+    /**
+     * @deprecated Use `solid` instead.
+     */
     isSolid?: boolean;
     /**
      * When true, renders a fixed leading status icon chosen by `state`.
@@ -1190,11 +1389,19 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
      * When true, renders a fixed dropdown chevron icon on the trailing edge.
      * @default false
      */
+    dropdown?: boolean;
+    /**
+     * @deprecated Use `dropdown` instead.
+     */
     dropdownIcon?: boolean;
     /**
      * When true, renders a fixed close icon on the trailing edge.
      * @default false
      */
+    closeIcon?: boolean;
+    /**
+     * @deprecated Use `closeIcon` instead.
+     */
     closable?: boolean;
     /**
      * Optional callback invoked when the close icon is clicked.
@@ -1291,10 +1498,17 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
      * Callback when close icon is clicked. When provided, close icon is shown (variant: Label + close).
      */
     onDismiss?: () => void;
+    /**
+     * Controls close icon visibility.
+     * - true: close icon visible
+     * - false: close icon hidden
+     * @default true when onDismiss is provided, otherwise false
+     */
+    closeIcon?: boolean;
     /**
      * When true, show tick icon before the label. Use with onDismiss for variant: Tick + label + close.
      */
-    showLeadingIcon?: boolean;
+    leadingIcon?: boolean;
 }
 /**
  * Chip for tags, filters, or removable items.
@@ -1306,7 +1520,7 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
  * <Chip size="large" onDismiss={() => {}}>Chip</Chip>
  *
  * @example Tick + label + close
- * <Chip size="large" onDismiss={() => {}} showLeadingIcon>Chip</Chip>
+ * <Chip size="large" onDismiss={() => {}} leadingIcon>Chip</Chip>
  *
  * @example Selected
  * <Chip size="large" selected>Chip</Chip>
@@ -1342,26 +1556,53 @@ declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & Reac
  * - Per step (when a connector runs to the next step): circle + connector column totals `h-7xl` (64px).
  * - Connector stroke width: 2px (matches prior spec).
  */
-type StepperStepVariant = "default" | "inProgress" | "complete";
+type StepperState = "default" | "inProgress" | "complete";
+/** @deprecated Use `StepperState`. */
+type StepperStepVariant = StepperState;
 interface StepperStep {
     /** Step title */
     title: React.ReactNode;
-    /** Optional step subtext */
+    /** Optional step description/subtext */
+    description?: React.ReactNode;
+    /** @deprecated Use `description`. */
     subtext?: React.ReactNode;
     /** Visual state for this step */
-    variant: StepperStepVariant;
+    states: StepperState;
+    /** @deprecated Use `states`. */
+    variant?: StepperState;
+    /** Show connector line for this step. Overrides component-level `showLine`. */
+    showLine?: boolean;
+    /** Optional explicit step number (falls back to index + 1). */
+    stepNumber?: number;
 }
-interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
-    steps: StepperStep[];
+interface StepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Preferred single-step API (playground-aligned).
+     */
+    states?: StepperState;
+    showLine?: boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    stepNumber?: number;
+    /**
+     * Optional multi-step API for advanced flows.
+     */
+    steps?: StepperStep[];
 }
 declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
 
 /** Toast entry for the provider (id, content, optional duration in ms; default 4000) */
 interface ToastEntryOptions {
     title: string;
+    types?: "info" | "success" | "warning" | "error";
+    /** @deprecated Use `types`. */
     variant?: "info" | "success" | "warning" | "error";
-    description?: string;
+    description?: string | boolean;
+    descriptionText?: string;
+    cta?: boolean | string;
     ctaText?: string;
+    close?: boolean;
+    /** @deprecated Use `close`. */
     onCtaClick?: () => void;
     showClose?: boolean;
     /** Duration in ms before auto-dismiss. @default 4000 */
@@ -1392,11 +1633,17 @@ declare const toastVariants: (props?: ({
     layout?: "default" | "withDescription" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toastVariants> {
+    types?: "info" | "success" | "warning" | "error";
+    /** @deprecated Use `types`. */
     variant?: "info" | "success" | "warning" | "error";
     title: string;
-    description?: string;
+    description?: string | boolean;
+    descriptionText?: string;
+    close?: boolean;
+    /** @deprecated Use `close`. */
     showClose?: boolean;
     onClose?: () => void;
+    cta?: boolean | string;
     ctaText?: string;
     onCtaClick?: () => void;
 }
@@ -1494,6 +1741,14 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
      * When provided, a neutral/info badge is shown.
      */
     badgeLabel?: string;
+    /**
+     * Figma playground badge toggle. When true, renders badge using `badgeName` (or `badgeLabel` fallback).
+     */
+    badge?: boolean;
+    /**
+     * Figma playground badge text. Used when `badge` is true.
+     */
+    badgeName?: string;
     /**
      * When true, shows a second line of descriptive text below the title.
      */
@@ -1514,6 +1769,22 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
      * Optional third CTA button (rightmost or leftmost depending on usage).
      */
     tertiaryAction?: PageHeaderAction;
+    /**
+     * Figma playground CTA toggle. When enabled, CTA buttons are derived from `firstCta` / `secondCta` / `thirdCta`.
+     */
+    ctas?: boolean;
+    /** Toggle first CTA button (left-most). */
+    firstCta?: boolean;
+    /** Label for first CTA button. */
+    firstCtaLabel?: string;
+    /** Toggle second CTA button (middle). */
+    secondCta?: boolean;
+    /** Label for second CTA button. */
+    secondCtaLabel?: string;
+    /** Toggle third CTA button (right-most). */
+    thirdCta?: boolean;
+    /** Label for third CTA button. */
+    thirdCtaLabel?: string;
     /**
      * When true, shows a close icon button on the right.
      */
@@ -1522,9 +1793,40 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
      * Callback when the close icon is clicked.
      */
     onCloseClick?: () => void;
+    /**
+     * When true, shows maximize icon on the right.
+     */
+    showMaximise?: boolean;
+    /**
+     * Callback when maximize icon is clicked.
+     */
+    onMaximiseClick?: () => void;
+    /**
+     * Optional breadcrumbs content rendered above the title row.
+     * Example: `<Breadcrumbs type="L2" title="Additional Details" l1="..." l2="..." />`
+     */
+    breadcrumbs?: React.ReactNode;
 }
 declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
 
+type BreadcrumbsType = "onlyTitle" | "L1" | "L2";
+interface BreadcrumbsProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /**
+     * Breadcrumb depth type:
+     * - onlyTitle: Title only
+     * - L1: L1 / Title
+     * - L2: L1 / L2 / Title
+     */
+    type?: BreadcrumbsType;
+    /** Current page title (active breadcrumb). */
+    title: string;
+    /** First level breadcrumb text. */
+    l1?: string;
+    /** Second level breadcrumb text. */
+    l2?: string;
+}
+declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+
 type PageFooterAction = {
     /**
      * Visible label for the button.
@@ -1586,8 +1888,8 @@ declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & Reac
  * Logo 36×28. Text: 12px, weight 500, line-height 16px.
  */
 /**
- * Data for one row in {@link SideMenu} `topItems` / `bottomItems`.
- * Each entry is rendered exclusively with {@link SideMenuItem} (Dashboard, Orders, Projects, Search, Settings, Profile, etc.).
+ * Data for one row in a {@link SideMenuGroup}.
+ * Each entry is rendered exclusively with {@link SideMenuItem}.
  */
 interface SideMenuNavItem {
     id: string;
@@ -1599,19 +1901,37 @@ interface SideMenuNavItem {
     /** When the menu is expanded, show a trailing chevron (submenu affordance). */
     hasSubmenu?: boolean;
 }
+/**
+ * Group wrapper config for SideMenu rows.
+ * Label behavior:
+ * - Expanded: shows `groupName`
+ * - Collapsed: shows `--`
+ * - `showGroup: false`: hides label, still renders items
+ */
+interface SideMenuItemGroup {
+    id: string;
+    groupName: string;
+    items: SideMenuNavItem[];
+    showGroup?: boolean;
+}
 interface SideMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, VariantProps<typeof sideMenuVariants> {
     /** Logo element (e.g. img 36×28) */
     logo: React.ReactNode;
-    /** Top nav items: Dashboard, Orders, Projects */
-    topItems: SideMenuNavItem[];
-    /** Bottom nav items: Search, Settings, Profile */
-    bottomItems: SideMenuNavItem[];
+    /** Top groups of nav rows (e.g., AI Services, Compute, Storage). */
+    topGroups: SideMenuItemGroup[];
+    /** Bottom groups of nav rows (e.g., utilities/profile section). */
+    bottomGroups: SideMenuItemGroup[];
     /** ID of currently selected item (controlled). Omit for uncontrolled; use defaultSelectedId for initial. */
     selectedId?: string;
     /** Initial selected ID when uncontrolled. Ignored if selectedId is provided. */
     defaultSelectedId?: string;
     /** Controlled expanded state. When undefined and variant is default, expands on hover. */
     expanded?: boolean;
+    /**
+     * Shows vertical scrollbar for long content.
+     * Applies only when `state` is `hover`, `selected`, or `sticky`.
+     */
+    showScrollbar?: boolean;
     /** Callback when an item is clicked */
     onItemClick?: (id: string) => void;
     /**
@@ -1627,13 +1947,13 @@ interface SideMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "childre
     onProjectChange?: (value: string) => void;
 }
 declare const sideMenuVariants: (props?: ({
-    variant?: "default" | "sticky" | "selected" | "hover" | null | undefined;
+    state?: "default" | "sticky" | "hover" | "selected" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>>;
 
 /**
  * Single row for {@link SideMenu}: leading icon, optional label, optional submenu chevron.
- * Use inside `SideMenu` via `topItems` / `bottomItems`, or alone for layout/testing.
+ * Use inside `SideMenu` via grouped sections, or alone for layout/testing.
  */
 interface SideMenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /** Visible label (hidden when `iconOnly` is true). */
@@ -1669,6 +1989,8 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
     /** Field label shown above the uploader (12/500/16). */
     label: string;
     /** Whether to show the red asterisk after the label. */
+    asterisk?: boolean;
+    /** @deprecated Use `asterisk`. */
     required?: boolean;
     /** Accept string for underlying file input, e.g. \"image/*,.pdf\". */
     accept?: string;
@@ -1676,8 +1998,16 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
     multiple?: boolean;
     /** Callback when user selects or drops files. */
     onFilesSelected?: (files: File[]) => void;
-    /** Helper text under the primary line (defaults to PNG/JPG/PDF/EXCEL). */
+    /** Text under the primary line in dropzone (defaults to PNG/JPG/PDF/EXCEL). */
+    subtext?: string;
+    /** @deprecated Use `subtext`. */
     helperText?: string;
+    /** Toggle supporting row below the upload box. */
+    supportingText?: boolean;
+    /** Supporting row text. */
+    supportText?: string;
+    /** Show icon before supporting row text. */
+    supportIcon?: boolean;
 }
 declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
 declare const uploadFileItemBoxVariants: (props?: ({
@@ -1690,6 +2020,8 @@ interface UploadFileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     /** 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. */
     fileSize?: string;
     /** Current progress 0–100 (for uploading/complete). Hidden when status is "failed". */
+    process?: number;
+    /** @deprecated Use `process`. */
     progress?: number;
     /** Callback when user cancels (close icon during uploading). */
     onCancel?: () => void;
@@ -1726,4 +2058,4 @@ type Size = "sm" | "md" | "lg";
 type Variant = "primary" | "secondary" | "outline" | "ghost";
 type ColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info";
 
-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 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 };
+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 };