sangam-ui 0.1.10 → 1.0.0

package/dist/index.d.ts

@@ -9,6 +9,9 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _radix_ui_react_context from '@radix-ui/react-context';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 /**
  * Sangam Button Component
@@ -23,7 +26,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * CVA (Class Variance Authority) manages all variants
  */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "danger" | null | undefined;
+    variant?: "primary" | "link" | "secondary" | "danger" | null | undefined;
     size?: "big" | "small" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
@@ -73,7 +76,7 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
  * Sangam Toggle (Switch) Component
  *
  * Production-grade toggle following Figma design specs:
- * - Colors: Neutral palette from colors.json
+ * - Colors: semantic-colors (background, border, text) where available
  * - Sizes: Big (56×28px), Small (44×24px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
@@ -145,7 +148,7 @@ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAtt
  * Sangam Checkbox Component
  *
  * Production-grade checkbox following Figma design specs:
- * - Colors: Neutral palette from colors.json
+ * - Colors: semantic-colors (border, background, text) where available
  * - Sizes: Big (24×24px), Small (20×20px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
@@ -219,7 +222,7 @@ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.Re
  * Sangam Radio Component
  *
  * Production-grade radio button following Figma design specs:
- * - Colors: Neutral palette from colors.json
+ * - Colors: semantic-colors (background, border, text) where available
  * - Sizes: Big (24×24px), Small (20×20px)
  * - States: Default, Hover, Disabled
  * - Smooth transitions: 200ms ease-out
@@ -323,7 +326,7 @@ declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttri
  * Sangam Input Component
  *
  * Production-grade text input following Figma design specs:
- * - Colors: Neutral, Red, Green from colors.json
+ * - Colors: semantic-colors (background, border, text) where available
  * - Multiple states: Default, Hover, Active, Typing, Filled, Error, Success, Disabled
  * - Consistent padding: 4px 12px
  * - Smooth transitions: 200ms ease-out
@@ -473,6 +476,10 @@ interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof Selec
      * @default 100%
      */
     width?: number;
+    /**
+     * Minimum trigger width in pixels (e.g. compact toolbars). Defaults to the standard dropdown trigger width.
+     */
+    triggerMinWidth?: number;
     /**
      * Error state (red border, red-800)
      */
@@ -537,7 +544,7 @@ declare const DropdownMulti: React.ForwardRefExoticComponent<DropdownMultiProps
  *
  * Production-grade search input following Figma design specs:
  * - Width: Fixed 400px
- * - Colors: Neutral palette from colors.json
+ * - Colors: semantic-colors (background, border, text) where available
  * - Multiple states: Default, Hover, Active, Typing, Filled, Disabled
  * - Border radius: 8px
  * - Padding: 4px 12px
@@ -574,7 +581,7 @@ declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & Re
  * Production-grade textarea following Figma design specs:
  * - Width: 100% with min-width 450px (responsive, matches Input pattern)
  * - Height: Fixed 96px
- * - Colors: Neutral, Red, Green from colors.json
+ * - Colors: semantic-colors (background, border, text) where available
  * - Multiple states: Default, Hover, Active, Typing, Filled, Error, Success, Disabled
  * - Padding: 4px 12px
  * - Border radius: 8px (sm)
@@ -706,7 +713,7 @@ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.Re
  * Sangam Tooltip Component
  *
  * Production-grade tooltip following Figma design specs:
- * - Colors: Background #111111, Text #FFFFFF
+ * - Colors: semantic-colors (background neutralInverse primary, text neutralInverse primary)
  * - Fixed width: 7.5rem (120px at default)
  * - Fixed height: 2rem (32px at default), 3.25rem (52px with description)
  * - Border radius: 4px
@@ -792,10 +799,10 @@ interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "c
      */
     max?: number;
     /**
-     * Show percentage label: "left" | "right" | "both" | "none".
-     * @default "both"
+     * When true, shows the percentage label on the right of the bar. When false, bar only (no label).
+     * @default true
      */
-    showLabel?: "left" | "right" | "both" | "none";
+    showLabel?: boolean;
     /**
      * Track width in pixels. Ignored when fluid is true.
      * @default 476
@@ -819,11 +826,11 @@ interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "c
 /**
  * ProgressBar for completion or loading states.
  *
- * @example With labels
- * <ProgressBar value={50} showLabel="both" />
+ * @example With label on the right (default)
+ * <ProgressBar value={50} />
  *
- * @example Bar only
- * <ProgressBar value={75} showLabel="none" />
+ * @example Bar only (no label)
+ * <ProgressBar value={75} showLabel={false} />
  */
 declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -838,7 +845,7 @@ interface LoaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
     "aria-label"?: string;
     /**
      * Gradient color (e.g. #FFFFFF for white on dark backgrounds).
-     * @default blue-600 from tokens
+     * @default semantic background.neutralInverse.primary (neutral.1100)
      */
     color?: string;
     /**
@@ -860,9 +867,9 @@ declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAtt
  *
  * Lightweight, token-friendly loading placeholder.
  * Uses tokens from @esds-sangam/tokens:
- * - Base bg: neutral-200 (colors.json)
+ * - Base bg: semantic background.neutral.tertiary (neutral.200)
  * - Border radius: rounded-sm = tokens radius.sm (0.5rem / 8px)
- * - Shimmer: gradient neutral-200 → neutral-100 → neutral-50 → neutral-200
+ * - Shimmer: animate-pulse (Tailwind built-in)
  * - Animation: ease-out, 1s duration, 800ms delay, loops infinitely.
  *
  * By default the component is layout-flexible — width/height
@@ -886,8 +893,9 @@ declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.Re
  *
  * Types: Container, Underline, Icon only.
  * 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 blue-600; 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;
@@ -939,7 +947,7 @@ declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttribu
  *
  * Two variants: Image (photo or placeholder silhouette) and Letter (initials).
  * Sizes: large (32×32), medium (24×24), small (20×20).
- * Letter: bg neutral-200, text neutral-600 (tokens); weight 500.
+ * Letter: bg/text from semantic-colors (neutral tertiary); weight 500.
  * Letter typography: large tokens base (16px)/leading-6; medium/small tokens 3xs (10px).
  * Token-based, circular (rounded-full).
  */
@@ -949,7 +957,7 @@ declare const avatarVariants: (props?: ({
 interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof avatarVariants> {
     /**
      * Variant: "image" (photo or placeholder silhouette) or "letter" (initials).
-     * Letter uses bg neutral-200, text neutral-600 (tokens); typography per size (Big: tokens base, Medium/Small: tokens 3xs = 10px).
+     * Letter uses semantic-colors: bg neutral tertiary, text neutral tertiary; typography per size (Big: tokens base, Medium/Small: tokens 3xs = 10px).
      */
     variant?: "image" | "letter";
     /**
@@ -967,6 +975,176 @@ interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "child
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Sangam Menu (Menubar) Primitive
+ *
+ * Token-based styling (no hardcoded hex colors).
+ * Compose this primitive to build menus with optional nested submenus.
+ */
+declare const Menu: React.ForwardRefExoticComponent<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>>;
+declare const MenuMenu: {
+    (props: MenubarPrimitive.MenubarMenuProps & {
+        __scopeMenubar?: _radix_ui_react_context.Scope;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+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>>;
+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>>;
+declare const MenuSubContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+type DrawerDirection = "right";
+interface DrawerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+    /**
+     * Drawer direction. Current Sangam spec: right-aligned drawers.
+     * @default "right"
+     */
+    direction?: DrawerDirection;
+}
+declare function Drawer({ direction, children, ...props }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface DrawerCloseProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close> {
+    /**
+     * When true, focuses the close icon when opened.
+     * @default true (matches keyboard interaction guidance)
+     */
+    autoFocusClose?: boolean;
+}
+declare const DrawerClose: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare function DrawerSurface({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+/** Header region: column with `gap-2xs` between the title row and optional description. */
+declare const DrawerHeader: ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+/** One row for title + close (`items-center` so the icon lines up with the title). */
+declare const DrawerHeaderTop: ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const DrawerTitle: ({ children, className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
+declare const DrawerDescription: ({ children, className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => react_jsx_runtime.JSX.Element;
+declare const DrawerFooter: ({ children, className, ...props }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Controls whether the dimmed backdrop is rendered.
+     * @default true
+     */
+    showOverlay?: boolean;
+}
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Sangam Table Primitive
+ *
+ * Built on top of shadcn table markup and tokenized Sangam classes.
+ * Use this primitive for tabular layouts; compose rich cell content
+ * (links, badges, avatars, actions) in consuming components/stories.
+ */
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+
+interface PopupContentProps {
+    title: string;
+    subtext?: string;
+    children: React.ReactNode;
+    /**
+     * When true, renders the body inside the subtle blue "content box".
+     * Use this for Design guidelines screenshots.
+     * @default false
+     */
+    showBodyBox?: boolean;
+    cancelText?: string;
+    ctaText?: string;
+    onCancelClick?: () => void;
+    onCtaClick?: () => void;
+    showClose?: boolean;
+    onClose?: () => void;
+    autoFocusClose?: boolean;
+    /**
+     * Used to wire up `aria-labelledby` from the Dialog wrapper.
+     * When used outside of Radix, you can omit these.
+     */
+    titleId?: string;
+    descriptionId?: string;
+    className?: string;
+}
+/**
+ * Inline "surface" for the popup.
+ * - Does NOT include overlay/backdrop or fixed centering.
+ * - Useful for Storybook design guideline cards where we don't want a full-screen overlay.
+ */
+declare function PopupContent({ title, subtext, children, showBodyBox, cancelText, ctaText, onCancelClick, onCtaClick, showClose, onClose, autoFocusClose, titleId, descriptionId, className, }: PopupContentProps): react_jsx_runtime.JSX.Element;
+interface PopupProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    subtext?: string;
+    children: React.ReactNode;
+    /**
+     * When true, renders the body inside the subtle blue "content box".
+     * @default false
+     */
+    showBodyBox?: boolean;
+    cancelText?: string;
+    ctaText?: string;
+    onCancelClick?: () => void;
+    onCtaClick?: () => void;
+    showClose?: boolean;
+    showOverlay?: boolean;
+    /**
+     * If true, focuses the close icon when opened (helps with keyboard guidance).
+     * @default true
+     */
+    autoFocusClose?: boolean;
+    /**
+     * Styling overrides for the fixed dialog content wrapper.
+     * Note: the popup surface styling is applied inside `PopupContent`.
+     */
+    contentClassName?: string;
+    surfaceClassName?: string;
+}
+/**
+ * Popup dialog:
+ * - Centers in the viewport
+ * - 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;
+interface PopupTriggerProps {
+    title: string;
+    subtext?: string;
+    cancelText?: string;
+    ctaText?: string;
+    showClose?: boolean;
+    showOverlay?: boolean;
+    autoFocusClose?: boolean;
+    showBodyBox?: boolean;
+    /**
+     * Label for the trigger button. Default matches your spec: "Click me".
+     */
+    triggerLabel?: string;
+    /**
+     * Trigger action callbacks. Both close the popup by default.
+     */
+    onCancelClick?: () => void;
+    onCtaClick?: () => void;
+    /**
+     * Popup body content.
+     */
+    children: React.ReactNode;
+}
+/**
+ * Convenience wrapper that provides:
+ * - A trigger button (defaults to "Click me")
+ * - 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;
+
 /**
  * Sangam Badge Component
  *
@@ -1033,6 +1211,45 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
  */
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Sangam Card Component
+ *
+ * A clickable information card used in lists and selection flows.
+ * - Width/height are dynamic (content-driven)
+ * - Default: 1px border (neutral-200), no shadow
+ * - Hover/Selected: border removed, subtle elevation shadow
+ *
+ * Figma typography:
+ * - Title: 14px / 500 / 24px, black via palette `neutral.1100`
+ * - Subtext: 14px / 400 / 24px, Text–Neutral–Tertiary (#7C7C7C)
+ * - Spacing: `mb-md` (12px) badge → title block; `mt-lg` (16px) title block → body
+ * - Right icon slot: `iconSize.xs` (16px)
+ */
+declare const cardVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    interactive?: boolean | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof cardVariants> {
+    /**
+     * Renders the card as a child component (Radix Slot pattern).
+     * Use when you want the Card to render as a link, button, etc.
+     */
+    asChild?: boolean;
+    /** Title text (ORD - 1234). */
+    title: React.ReactNode;
+    /** Optional secondary text (Subtext). */
+    subtext?: React.ReactNode;
+    /** Optional status element (typically `Badge`). */
+    status?: React.ReactNode;
+    /** Optional right-side icon slot (16×16; use `iconSize.xs` in layout). */
+    icon?: React.ReactNode;
+    /** Optional body content under title/subtext area. */
+    children?: React.ReactNode;
+    /** Class for the content/body region. */
+    contentClassName?: string;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+
 /**
  * Sangam Chip Component
  *
@@ -1041,12 +1258,12 @@ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttri
  * Sizes: Large (75×32, close 16×16), Small (67×24, close 12×12).
  * Radius 999 (pill). Colors from @esds-sangam/tokens.
  *
- * States:
- * - Default: bg white, text neutral-1100, border neutral-400
- * - Hover: bg neutral-200, text neutral-1100
- * - Selected: bg neutral-1100, text white
- * - Disabled: bg neutral-200, text neutral-500
- * - Focused: bg white, text neutral-1100, border 2px neutral-700
+ * 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
  */
 declare const chipVariants: (props?: ({
     size?: "small" | "large" | null | undefined;
@@ -1096,6 +1313,49 @@ interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children
  */
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 
+interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+    /** Current active page (1-indexed) */
+    page: number;
+    /** Total pages count */
+    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) */
+    totalRecords?: number;
+    /** Current page-size value for the entries selector */
+    pageSize?: number;
+    /** Selectable page-size options */
+    pageSizeOptions?: number[];
+    /** Called when page-size changes */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Pages shown on each side of the current page (excluding first/last), like MUI `siblingCount`.
+     * @default 1
+     */
+    siblingCount?: number;
+}
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+
+/**
+ * Vertical step list for multi-step flows.
+ * - 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).
+ */
+type StepperStepVariant = "default" | "inProgress" | "complete";
+interface StepperStep {
+    /** Step title */
+    title: React.ReactNode;
+    /** Optional step subtext */
+    subtext?: React.ReactNode;
+    /** Visual state for this step */
+    variant: StepperStepVariant;
+}
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    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;
@@ -1155,7 +1415,7 @@ 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 neutral-200
+ * - Tabs: underline style, 14px/500/24px, active blue-600, border semantic neutral tertiary
  */
 interface PageHeaderTab {
     value: string;
@@ -1265,9 +1525,40 @@ interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title
 }
 declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
 
+type PageFooterAction = {
+    /**
+     * Visible label for the button.
+     */
+    label: string;
+    /**
+     * Click handler for the button.
+     */
+    onClick?: () => void;
+    /**
+     * Visual style of the button. Defaults to primary.
+     */
+    variant?: "primary" | "secondary";
+    /**
+     * Optional icon to render alongside the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Position of the icon relative to the label. Defaults to leading.
+     */
+    iconPosition?: "leading" | "trailing";
+};
 interface PageFooterProps extends React.HTMLAttributes<HTMLElement> {
     /**
-     * Action buttons or content. Defaults to primary small "Convert" button when omitted.
+     * Primary CTA button (rightmost). When set with secondaryAction, renders as props-based actions.
+     */
+    primaryAction?: PageFooterAction;
+    /**
+     * Secondary CTA button (left of primary). Renders before primaryAction when both are set.
+     */
+    secondaryAction?: PageFooterAction;
+    /**
+     * Action buttons or content. When provided, overrides primaryAction/secondaryAction.
+     * Defaults to primary small "Convert" button when neither children nor actions are set.
      */
     children?: React.ReactNode;
     /**
@@ -1289,7 +1580,7 @@ declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & Reac
  * 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 132×1024px, white bg, shadow-elevation-right-sm. Logo and items left-aligned.
+ * - 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.
  *
  * Logo 36×28. Text: 12px, weight 500, line-height 16px.
@@ -1317,9 +1608,20 @@ interface SideMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "childre
     expanded?: boolean;
     /** Callback when an item is clicked */
     onItemClick?: (id: string) => void;
+    /**
+     * Project switcher shown below the logo.
+     * Collapsed: shows a `P` badge. Expanded: shows a dropdown with project options.
+     */
+    projects?: DropdownOption[];
+    /** Controlled selected project value. */
+    project?: string;
+    /** Initial selected project when uncontrolled. */
+    defaultProject?: string;
+    /** Callback when project changes. */
+    onProjectChange?: (value: string) => void;
 }
 declare const sideMenuVariants: (props?: ({
-    variant?: "default" | "selected" | "hover" | null | undefined;
+    variant?: "default" | "sticky" | "selected" | "hover" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>>;
 
@@ -1350,7 +1652,7 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "childr
 }
 declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
 declare const uploadFileItemBoxVariants: (props?: ({
-    status?: "uploading" | "complete" | "failed" | null | undefined;
+    status?: "complete" | "uploading" | "failed" | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 type UploadFileItemStatus = "uploading" | "complete" | "failed";
 interface UploadFileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof uploadFileItemBoxVariants> {
@@ -1395,4 +1697,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, Checkbox, Chip, type ColorScheme, Dropdown, DropdownMulti, type DropdownMultiProps, type DropdownOption, type DropdownProps, Input, Label, Loader, PageFooter, type PageFooterProps, PageHeader, type PageHeaderAction, type PageHeaderProps, type PageHeaderTab, ProgressBar, Radio, RadioGroup, SearchField, SideMenu, type SideMenuItem, type SideMenuProps, type Size, Skeleton, 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, 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, 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, type SideMenuItem, 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 };