sangam-ui 1.0.3 → 1.0.5

package/dist/index.d.ts

@@ -61,7 +61,7 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
      */
     label?: React.ReactNode;
     /**
-     * Interaction state (Figma: **state** — Enabled / Disabled).
+     * Interaction state (Figma: **state** — Enabled / Disabled).
      * @default "enabled"
      */
     state?: "enabled" | "disabled";
@@ -101,7 +101,7 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
  *
  * Production-grade toggle following Figma design specs:
  * - Colors: semantic-colors (background, border, text) where available
- * - Sizes: Big (56×28px), Small (44×24px)
+ * - Sizes: Big (56×28px), Small (44×24px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
  *
@@ -118,7 +118,7 @@ declare const toggleVariants: (props?: ({
  * - Toggle + Title: title only (14px, #111111, weight 500, line-height 24px)
  * - Toggle + Title & Subtitle: title + subtitle (subtitle: 12px, #7C7C7C, weight 400, line-height 16px)
  */
-interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof toggleVariants> {
+interface ToggleProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, "asChild">, VariantProps<typeof toggleVariants> {
     /**
      * Size of the toggle
      * @default "big"
@@ -140,18 +140,10 @@ interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimit
      * 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
@@ -166,7 +158,7 @@ interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimit
  * <Toggle />
  *
  * @example Controlled
- * <Toggle isOn={isOn} onIsOnChange={setIsOn} />
+ * <Toggle isOn={isOn} onCheckedChange={setIsOn} />
  *
  * @example Small size
  * <Toggle size="small" />
@@ -193,33 +185,28 @@ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAtt
  *
  * Production-grade checkbox following Figma design specs:
  * - Colors: semantic-colors (border, background, text) where available
- * - Sizes: Big (24×24px), Small (20×20px)
+ * - Sizes: Big (24×24px), Small (20×20px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
  *
  * Built on Radix UI Checkbox for accessibility
  */
-/** Outer container: hit area only. Big 24×24, small 20×20. No border/bg here. */
+/** Outer container: hit area only. Big 24×24, small 20×20. No border/bg here. */
 declare const checkboxRootVariants: (props?: ({
     size?: "big" | "small" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 type CheckboxVisualState = "default" | "disabled" | "hover";
-interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked" | "onCheckedChange" | "disabled" | "title"> {
+interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "checked" | "onCheckedChange" | "disabled" | "title" | "asChild"> {
     size?: "big" | "small";
     /**
      * Selected state (Figma **isOn**).
      * Prefer over Radix `checked` for design-system alignment.
      */
     isOn?: boolean;
-    onIsOnChange?: (isOn: boolean) => void;
     /**
-     * @deprecated Use `isOn` / `onIsOnChange`.
+     * @deprecated Use `isOn`.
      */
     checked?: boolean;
-    /**
-     * @deprecated Use `onIsOnChange`.
-     */
-    onCheckedChange?: (checked: boolean | "indeterminate") => void;
     /**
      * Interaction / preview state (Figma **state**).
      * **hover** applies hover styling without a pointer (e.g. docs).
@@ -252,7 +239,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
     subtextText?: string;
 }
 /**
- * Sangam Checkbox — Radix Checkbox + CVA + Sangam tokens.
+ * Sangam Checkbox — Radix Checkbox + CVA + Sangam tokens.
  */
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
@@ -261,7 +248,7 @@ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.Re
  *
  * Production-grade radio button following Figma design specs:
  * - Colors: semantic-colors (background, border, text) where available
- * - Sizes: Big (24×24px), Small (20×20px)
+ * - Sizes: Big (24×24px), Small (20×20px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
  * - Circular shape (rounded-full)
@@ -284,7 +271,7 @@ interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGro
  * - Radio + Title: title only (14px, #111111, weight 500, line-height 24px)
  * - Radio + Title & Subtext: title + subtext (subtext: 12px, #7C7C7C, weight 400, line-height 16px)
  */
-interface RadioProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, VariantProps<typeof radioVariants> {
+interface RadioProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, "asChild">, VariantProps<typeof radioVariants> {
     /**
      * Size of the radio button
      * @default "big"
@@ -382,7 +369,15 @@ declare const inputVariants: (props?: ({
 /**
  * Input Props
  */
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "placeholder">, VariantProps<typeof inputVariants> {
+    /**
+     * Placeholder when the field is empty
+     */
+    inputText?: string;
+    /**
+     * @deprecated Use `inputText`.
+     */
+    placeholder?: string;
     /**
      * Error state - shows red border
      */
@@ -394,6 +389,10 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     /**
      * Label text
      */
+    labelText?: string;
+    /**
+     * @deprecated Use `labelText`.
+     */
     label?: string;
     /**
      * Whether the label is required (shows red asterisk)
@@ -485,14 +484,14 @@ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttri
  * - Accessible label and helper text
  *
  * @example Basic usage
- * <Input label="Email" placeholder="Enter your email" />
+ * <Input labelText="Email" inputText="Enter your email" />
  *
  * @example Required field
- * <Input label="Username" asterisk />
+ * <Input labelText="Username" asterisk />
  *
  * @example Error state
  * <Input
- *   label="Password"
+ *   labelText="Password"
  *   error
  *   supportText="Password must be at least 8 characters"
  *   supportingText
@@ -506,11 +505,11 @@ declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttri
  * />
  *
  * @example Disabled
- * <Input label="Username" disabled value="john.doe" />
+ * <Input labelText="Username" disabled value="john.doe" />
  *
  * @example With helper text
  * <Input
- *   label="Email"
+ *   labelText="Email"
  *   supportText="We'll never share your email"
  *   supportingText
  * />
@@ -531,6 +530,10 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
     /**
      * Label text (same as Input)
      */
+    labelText?: string;
+    /**
+     * @deprecated Use `labelText`.
+     */
     label?: string;
     /**
      * Required field (red asterisk)
@@ -543,6 +546,10 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
     /**
      * Placeholder when no value selected
      */
+    inputText?: string;
+    /**
+     * @deprecated Use `inputText`.
+     */
     placeholder?: string;
     /**
      * Options for the dropdown
@@ -600,15 +607,19 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
     selectAllLabel?: string;
 }
 /**
- * Dropdown (single select) — Input-style trigger with chevron, Radix Select content.
+ * Dropdown (single select) — Input-style trigger with chevron, Radix Select content.
  */
 declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;
 /** Multi-select dropdown: trigger bg white, border neutral-400; menu border neutral-200, divider neutral-200; padding 8, gap 8 */
 interface DropdownMultiProps {
+    labelText?: string;
+    /** @deprecated Use `labelText`. */
     label?: string;
     asterisk?: boolean;
     /** @deprecated Use `asterisk`. */
     required?: boolean;
+    inputText?: string;
+    /** @deprecated Use `inputText`. */
     placeholder?: string;
     options: DropdownOption[];
     value: string[];
@@ -652,30 +663,40 @@ declare const DropdownMulti: React.ForwardRefExoticComponent<DropdownMultiProps
  * - Border radius: 8px
  * - Padding: 4px 12px
  * - Gap: 8px
- * - Icon size: 16×16px
- * - Close icon: 16×16px (same as search icon)
+ * - Icon size: 16×16px
+ * - Close icon: 16×16px (same as search icon)
  * - Smooth transitions: 200ms ease-out
  */
 declare const searchFieldVariants: (props?: ({} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 /**
  * SearchField Props
  */
-interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    /**
-     * Width in pixels. If not provided, the search field will stretch to 100% width with a minimum of 296px.
-     * @default 100%
-     */
-    width?: number | string;
-    /**
-     * Callback when clear button is clicked
-     */
-    onClear?: () => void;
-    /**
-     * Whether to show the clear button when input has value
-     * @default true
-     */
-    showClearButton?: boolean;
+interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "placeholder"> {
+    /** Hint text shown when the field is empty */
+    text?: string;
 }
+/**
+ * Sangam SearchField Component
+ *
+ * Production-grade search input built with:
+ * - CVA (for type-safe variants)
+ * - Sangam tokens (for consistent styling)
+ * - Sangam icons (Search, Close)
+ * - 200ms ease-out transitions
+ * - Clear button functionality
+ *
+ * @example Basic usage
+ * <SearchField text="Search..." />
+ *
+ * @example Controlled
+ * <SearchField
+ *   value={query}
+ *   onChange={(e) => setQuery(e.target.value)}
+ * />
+ *
+ * @example Disabled
+ * <SearchField text="Search..." disabled />
+ */
 declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
 
 /**
@@ -700,19 +721,24 @@ declare const textareaVariants: (props?: ({
 /**
  * Textarea Props
  */
-interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, VariantProps<typeof textareaVariants> {
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "placeholder">, Omit<VariantProps<typeof textareaVariants>, "variant" | "filled"> {
     /**
-     * Error state - shows red border
+     * Visual state of the textarea.
+     * @default "default"
+     */
+    state?: "default" | "disabled" | "error" | "success";
+    /**
+     * @deprecated Use `state="error"`.
      */
     error?: boolean;
     /**
-     * Success state - shows green border
+     * @deprecated Use `state="success"`.
      */
     success?: boolean;
     /**
      * Label text
      */
-    label?: string;
+    labelText?: string;
     /**
      * Whether the label is required (shows red asterisk)
      */
@@ -734,9 +760,9 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
      */
     helperText?: string;
     /**
-     * Whether helper text is an error message
+     * Placeholder / input hint text
      */
-    helperError?: boolean;
+    inputText?: string;
     /**
      * Maximum character length
      * @default 250
@@ -786,56 +812,56 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
  * - Fixed height (96px)
  *
  * @example Basic usage
- * <Textarea label="Description" placeholder="Enter description..." />
+ * <Textarea labelText="Description" inputText="Enter description..." />
  *
  * @example Required field
- * <Textarea label="Comments" required />
+ * <Textarea labelText="Comments" required />
  *
  * @example Error state
  * <Textarea
- *   label="Message"
- *   error
+ *   labelText="Message"
+ *   state="error"
  *   helperText="Message must be at least 10 characters"
  * />
  *
  * @example Success state
  * <Textarea
- *   label="Feedback"
- *   success
+ *   labelText="Feedback"
+ *   state="success"
  *   value="Great product!"
  * />
  *
  * @example Disabled
- * <Textarea label="Notes" disabled value="Read-only notes" />
+ * <Textarea labelText="Notes" state="disabled" value="Read-only notes" />
  *
  * @example With helper text
  * <Textarea
- *   label="Bio"
+ *   labelText="Bio"
  *   helperText="Tell us about yourself (max 500 characters)"
  * />
  *
  * @example Label with info icon
- * <Textarea label="Description" showLabelIcon required />
+ * <Textarea labelText="Description" showLabelIcon required />
  *
  * @example With supporting text and icon
  * <Textarea
- *   label="Comments"
+ *   labelText="Comments"
  *   helperText="Supporting text"
  *   showHelperIcon
  * />
  *
  * @example Success with icon
  * <Textarea
- *   label="Feedback"
- *   success
+ *   labelText="Feedback"
+ *   state="success"
  *   helperText="Supporting text"
  *   value="Great product!"
  * />
  *
  * @example Error with icon
  * <Textarea
- *   label="Message"
- *   error
+ *   labelText="Message"
+ *   state="error"
  *   helperText="Supporting text"
  * />
  */
@@ -845,14 +871,14 @@ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.Re
  * Sangam Tooltip Component
  *
  * Production-grade tooltip following Figma design specs:
- * - Colors: semantic-colors (background neutralInverse primary, text neutralInverse primary)
+ * - Colors: semantic-colors (background neutral black, text neutral white)
  * - Fixed width: 7.5rem (120px at default)
  * - Fixed height: 2rem (32px at default), 3.25rem (52px with description)
  * - Border radius: 4px
  * - Padding: 16px
  * - Gap: 4px
  * - Title: 12px, 500 weight, 16px line-height
- * - Arrow: 12×8px (all directions)
+ * - Arrow: 12×8px (all directions)
  *
  * Uses rem for dimensions to respect user font size preferences (accessibility)
  *
@@ -946,35 +972,41 @@ declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProp
 
 interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /**
-     * Current progress value (0–100).
+     * Current progress value (0–100).
      */
     value: number;
     /**
      * Maximum value (default 100).
+     * @ignore Not part of Storybook testing surface.
      */
     max?: number;
     /**
      * When true, shows the percentage label on the right of the bar. When false, bar only (no label).
      * @default true
+     * @ignore Not part of Storybook testing surface.
      */
     showLabel?: boolean;
     /**
      * Track width in pixels. Ignored when fluid is true.
      * @default 476
+     * @ignore Not part of Storybook testing surface.
      */
     width?: number;
     /**
      * When true, track uses full width of container (responsive).
      * @default false
+     * @ignore Not part of Storybook testing surface.
      */
     fluid?: boolean;
     /**
      * Track height in pixels.
      * @default 6
+     * @ignore Not part of Storybook testing surface.
      */
     height?: number;
     /**
      * Accessible label for the progress bar.
+     * @ignore Not part of Storybook testing surface.
      */
     "aria-label"?: string;
 }
@@ -993,27 +1025,12 @@ declare const loaderVariants: (props?: ({
     size?: "big" | "medium" | "small" | "extraSmall" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface LoaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof loaderVariants> {
-    /**
-     * Accessible label for screen readers.
-     * @default "Loading"
-     */
-    "aria-label"?: string;
-    /**
-     * Gradient color (e.g. #FFFFFF for white on dark backgrounds).
-     * @default semantic background.neutralInverse.primary (neutral.1100)
-     */
-    color?: string;
-    /**
-     * Transparent end of gradient (e.g. #FFFFFF00). Defaults to `${color}00` when color is set.
-     */
-    colorTransparent?: string;
 }
 /**
  * Loader component for loading or processing states.
  *
  * @example
  * <Loader size="big" />
- * <Loader size="small" aria-label="Loading results" />
  */
 declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -1050,7 +1067,7 @@ declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.Re
  * States: Default, Hover, Selected, Disabled.
  * Colors: semantic-colors (background, border, text) where available.
  * Typography: 14px, weight 500, line-height 24px.
- * 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.
+ * 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.
  */
 declare const tabsListVariants: (props?: ({
     type?: "underline" | "iconOnly" | "container" | null | undefined;
@@ -1155,6 +1172,13 @@ 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>>;
 interface MenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item>, "children"> {
+    /**
+     * Menu item label text.
+     */
+    text?: React.ReactNode;
+    /**
+     * @deprecated Use `text` instead.
+     */
     children?: React.ReactNode;
     /**
      * Optional icon before the label (Figma **Leading icon** on single-select items).
@@ -1265,7 +1289,7 @@ interface PopupProps {
     cancelText?: string;
     ctaText?: string;
     /** Controls CTA button row visibility. @default true */
-    showCTA?: boolean;
+    showCta?: boolean;
     onCancelClick?: () => void;
     onCtaClick?: () => void;
     showClose?: boolean;
@@ -1288,7 +1312,7 @@ 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, showSubtext, children, showBodyBox, cancelText, ctaText, showCTA, 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;
@@ -1297,7 +1321,7 @@ interface PopupTriggerProps {
     cancelText?: string;
     ctaText?: string;
     /** Controls CTA button row visibility. @default true */
-    showCTA?: boolean;
+    showCta?: boolean;
     showClose?: boolean;
     showOverlay?: boolean;
     autoFocusClose?: boolean;
@@ -1322,7 +1346,7 @@ interface PopupTriggerProps {
  * - A centered Popup that opens on click
  * - Developer-friendly API for Storybook docs
  */
-declare function PopupTrigger({ title, subtext, showSubtext, cancelText, ctaText, showCTA, 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
@@ -1336,8 +1360,8 @@ declare function PopupTrigger({ title, subtext, showSubtext, cancelText, ctaText
  * Border radius: rounded variant uses 8px (tokens radius.sm = 0.5rem).
  *
  * Sizes:
- * - Big: Rounded/Pill 48×24px; Number 24×24px (circular)
- * - Small: Rounded/Pill 48×20px; Number 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.
@@ -1448,7 +1472,7 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
     subtext?: React.ReactNode;
     /** Optional status element (typically `Badge`). */
     status?: React.ReactNode;
-    /** Optional right-side icon slot (16×16; use `iconSize.xs` in layout). */
+    /** Optional right-side icon slot (16×16; use `iconSize.xs` in layout). Omit this prop to hide the icon. */
     icon?: React.ReactNode;
     /** Optional body content under title/subtext area. */
     children?: React.ReactNode;
@@ -1462,15 +1486,15 @@ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttribu
  *
  * Structural variants: 1) Only label, 2) Label + close icon, 3) Tick icon + label + close icon.
  * Token-based chip: Default, Hover, Selected, Disabled, Focused.
- * Sizes: Large (75×32, close 16×16), Small (67×24, close 12×12).
+ * Sizes: Large (75×32, close 16×16), Small (67×24, close 12×12).
  * Radius 999 (pill). Colors from @esds-sangam/tokens.
  *
  * States (semantic-colors):
- * - Default: bg neutral primary, text neutral primary, border neutral primary
- * - Hover: bg neutral tertiary, border transparent
- * - Selected: bg neutralInverse primary, text neutralInverse primary
- * - Disabled: bg neutral disabled, text neutral disabled
- * - Focused: bg neutral primary, text neutral primary, border 2px neutralInverse primary
+ * - Default: chips.background.default, chips.text.default, chips.border.default
+ * - Hover: chips.background.hover, chips.text.hover
+ * - Selected: chips.background.selected, chips.text.selected
+ * - Disabled: chips.background.disabled, chips.text.disabled
+ * - Focused: chips.border.focused
  */
 declare const chipVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
@@ -1481,9 +1505,13 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
     /**
      * Chip label (e.g. "Chip").
      */
+    text?: React.ReactNode;
+    /**
+     * @deprecated Use `text` instead.
+     */
     children?: React.ReactNode;
     /**
-     * Size: large (75×32, close 16×16) or small (67×24, close 12×12).
+     * Size: large (75×32, close 16×16) or small (67×24, close 12×12).
      */
     size?: "large" | "small";
     /**
@@ -1494,19 +1522,15 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
      * Disabled state: muted background and text.
      */
     disabled?: boolean;
-    /**
-     * 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
+     * @default false
      */
     closeIcon?: boolean;
     /**
-     * When true, show tick icon before the label. Use with onDismiss for variant: Tick + label + close.
+     * When true, show tick icon before the label. Use with `closeIcon` for the Tick + label + close variant.
      */
     leadingIcon?: boolean;
 }
@@ -1514,16 +1538,16 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
  * Chip for tags, filters, or removable items.
  *
  * @example Default
- * <Chip size="large">Chip</Chip>
+ * <Chip size="large" text="Chip" />
  *
- * @example With dismiss (Label + close)
- * <Chip size="large" onDismiss={() => {}}>Chip</Chip>
+ * @example Label + close
+ * <Chip size="large" text="Chip" closeIcon />
  *
  * @example Tick + label + close
- * <Chip size="large" onDismiss={() => {}} leadingIcon>Chip</Chip>
+ * <Chip size="large" text="Chip" closeIcon leadingIcon />
  *
  * @example Selected
- * <Chip size="large" selected>Chip</Chip>
+ * <Chip size="large" text="Chip" selected />
  */
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -1534,7 +1558,7 @@ interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
     totalPages: number;
     /** Called when page changes */
     onPageChange?: (page: number) => void;
-    /** Total records (optional; not shown in the bar — use in parent for range copy if needed) */
+    /** Total records (optional; not shown in the bar — use in parent for range copy if needed) */
     totalRecords?: number;
     /** Current page-size value for the entries selector */
     pageSize?: number;
@@ -1551,12 +1575,13 @@ interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
 declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
 
 /**
- * Vertical step list for multi-step flows.
+ * Step list for multi-step flows (vertical or horizontal).
  * - Completed steps use `Tickmark` (non-filled) at `iconSize` default (16px).
- * - Per step (when a connector runs to the next step): circle + connector column totals `h-7xl` (64px).
- * - Connector stroke width: 2px (matches prior spec).
+ * - Vertical: per step, circle + connector column totals `h-7xl` (64px); connector 2px wide.
+ * - Horizontal: with description, circle and connector align to the title/description boundary.
  */
 type StepperState = "default" | "inProgress" | "complete";
+type StepperType = "vertical" | "horizontal";
 /** @deprecated Use `StepperState`. */
 type StepperStepVariant = StepperState;
 interface StepperStep {
@@ -1576,6 +1601,8 @@ interface StepperStep {
     stepNumber?: number;
 }
 interface StepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Layout direction: `vertical` (default) or `horizontal`. */
+    type?: StepperType;
     /**
      * Preferred single-step API (playground-aligned).
      */
@@ -1662,7 +1689,8 @@ declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttri
  * - Optional subtext line below the title
  * - Optional up to three CTA buttons on the right
  * - Optional close icon button on the right
- * - Tabs: underline style, 14px/500/24px, active blue-600, border semantic neutral tertiary
+ * - Tabs (withTabs): fixed 64px height; labels vertically centered with ~20px below text (Figma)
+ * - Tabs (titleTabs): underline style below title row
  */
 interface PageHeaderTab {
     value: string;
@@ -1695,6 +1723,15 @@ declare const pageHeaderVariants: (props?: ({
     variant?: "withTitle" | "withTabs" | "titleTabs" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof pageHeaderVariants> {
+    /**
+     * Layout type.
+     * @default "withTitle"
+     */
+    type?: "withTitle" | "withTabs" | "titleTabs";
+    /**
+     * @deprecated Use `type` instead.
+     */
+    variant?: "withTitle" | "withTabs" | "titleTabs";
     /**
      * Page title. Required for withTitle and titleTabs variants.
      */
@@ -1732,7 +1769,7 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
      */
     onBackClick?: () => void;
     /**
-     * When true, hides the title even if provided.
+     * When false, hides the title and any inline `breadcrumbs` content.
      * Defaults to true (title shown).
      */
     showTitle?: boolean;
@@ -1802,7 +1839,7 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
      */
     onMaximiseClick?: () => void;
     /**
-     * Optional breadcrumbs content rendered above the title row.
+     * Optional breadcrumbs content rendered beside the title row.
      * Example: `<Breadcrumbs type="L2" title="Additional Details" l1="..." l2="..." />`
      */
     breadcrumbs?: React.ReactNode;
@@ -1827,6 +1864,27 @@ interface BreadcrumbsProps extends Omit<React.HTMLAttributes<HTMLElement>, "titl
 }
 declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
 
+/**
+ * PageFooter Pattern
+ *
+ * Composes primitives (Button) for page bottom layout.
+ * Spec: full width of container, height 64px, padding 16, gap 8, elevation top/small shadow.
+ * Default: primary small "Convert" button aligned right.
+ * Actions follow same pattern as PageHeader: primaryAction + secondaryAction.
+ *
+ * @example Default — built-in single primary button (no props)
+ * ```tsx
+ * <PageFooter />
+ * ```
+ *
+ * @example With secondary CTA — pass both `secondaryAction` (left) and `primaryAction` (right)
+ * ```tsx
+ * <PageFooter
+ *   secondaryAction={{ label: "Cancel", variant: "secondary", onClick: handleCancel }}
+ *   primaryAction={{ label: "Convert", variant: "primary", onClick: handleConvert }}
+ * />
+ * ```
+ */
 type PageFooterAction = {
     /**
      * Visible label for the button.
@@ -1863,15 +1921,6 @@ interface PageFooterProps extends React.HTMLAttributes<HTMLElement> {
      * Defaults to primary small "Convert" button when neither children nor actions are set.
      */
     children?: React.ReactNode;
-    /**
-     * Footer width in pixels.
-     * @default 532
-     */
-    width?: number;
-    /**
-     * Optional class name for the inner content wrapper (flex container).
-     */
-    contentClassName?: string;
 }
 declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & React.RefAttributes<HTMLElement>>;
 
@@ -1881,11 +1930,17 @@ declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & Reac
  * Collapsible side navigation. Default state shows icons only; hovering expands
  * to show labels (hover state). Selected items show a box highlight.
  *
- * - Default: collapsed 48×1024px, sticky left; hover expands to the right only.
- * - Hover/Selected: expanded 196×1024px, white bg, shadow-elevation-right-sm. Logo and items left-aligned.
- * - Selected item: 36×36 (collapsed) or 120×36 (expanded) box, radius 8px (rounded-sm), shadow-elevation-bottom-sm.
+ * - Full viewport height; outer slot reserves `h-screen`, nav clips overflow; bottom utilities pinned.
+ * - Default: collapsed 48px wide, sticky left; hover expands to the right only.
+ * - Hover: expanded 196px wide, navy rail bg, shadow-elevation-right-sm. Sticky: expanded without shadow.
+ * - Selected item: 36×36 (collapsed) or full-width (expanded), navy.700 surface, radius 8px (rounded-sm), shadow-elevation-bottom-sm.
  *
  * Logo 36×28. Text: 12px, weight 500, line-height 16px.
+ *
+ * Bottom utilities are fixed: Search, Notification, Settings, Profile
+ * ({@link SIDE_MENU_UTILITY_ITEM_IDS}). Pass only `topGroups` for navigation.
+ *
+ * Each nav row button exposes `data-sidemenu-item={id}` for anchoring submenus/flyouts in app code.
  */
 /**
  * Data for one row in a {@link SideMenuGroup}.
@@ -1914,13 +1969,14 @@ interface SideMenuItemGroup {
     items: SideMenuNavItem[];
     showGroup?: boolean;
 }
+/** Fixed utility row IDs rendered at the bottom of every {@link SideMenu}. */
+declare const SIDE_MENU_UTILITY_ITEM_IDS: readonly ["search", "notification", "settings", "profile"];
+type SideMenuUtilityItemId = (typeof SIDE_MENU_UTILITY_ITEM_IDS)[number];
 interface SideMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, VariantProps<typeof sideMenuVariants> {
     /** Logo element (e.g. img 36×28) */
     logo: React.ReactNode;
     /** 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. */
@@ -1928,8 +1984,7 @@ interface SideMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "childre
     /** 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`.
+     * @deprecated No longer used. Scrollbar appears only when expanded (hover/selected/sticky).
      */
     showScrollbar?: boolean;
     /** Callback when an item is clicked */
@@ -1975,7 +2030,7 @@ interface SideMenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
 declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
 
 /**
- * Upload Pattern – Stage 1: File uploader
+ * Upload Pattern – Stage 1: File uploader
  *
  * Token-based, accessible file uploader pattern with:
  * - Label (12px, weight 500, line-height 16)
@@ -2019,7 +2074,7 @@ interface UploadFileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     fileName: string;
     /** 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". */
+    /** Current progress 0–100 (for uploading/complete). Hidden when status is "failed". */
     process?: number;
     /** @deprecated Use `process`. */
     progress?: number;
@@ -2031,9 +2086,9 @@ interface UploadFileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     onDelete?: () => void;
 }
 /**
- * UploadFileItem – single file row in the upload pattern.
- * Box: 536×100 (min), border neutral-300 (red-800 when failed), radius 12px (tokens rounded-md), padding 16, gap 8.
- * Left: DocumentPdf 24×24, fileName (14/500/24 neutral-1100), fileSize or "Upload failed" (12/400/16).
+ * UploadFileItem – single file row in the upload pattern.
+ * Box: 536×100 (min), border neutral-300 (red-800 when failed), radius 12px (tokens rounded-md), padding 16, gap 8.
+ * Left: DocumentPdf 24×24, fileName (14/500/24 neutral-1100), fileSize or "Upload failed" (12/400/16).
  * Right: uploading = Close + %; complete = tickmarkFilled + Delete + 100%; failed = Retry + Delete.
  * Progress bar below when not failed (ProgressBar primitive, 10% / 50% / 100%).
  */
@@ -2058,4 +2113,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, 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 };
+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, SIDE_MENU_UTILITY_ITEM_IDS, SearchField, SideMenu, SideMenuItem, type SideMenuItemGroup, type SideMenuItemProps, type SideMenuNavItem, type SideMenuProps, type SideMenuUtilityItemId, type Size, Skeleton, Stepper, type StepperProps, type StepperState, type StepperStep, type StepperStepVariant, type StepperType, 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 };