sangam-ui 0.1.5

package/dist/index.d.ts

@@ -0,0 +1,1434 @@
+import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+/**
+ * Sangam Button Component
+ *
+ * Production-grade button following Figma design specs:
+ * - Colors: From updated color palette (no purple/pink)
+ * - Spacing: Token-based padding (spacing/sm, spacing/lg)
+ * - Radius: radius/sm
+ * - Typography: font-medium, sizes from tokens
+ * - Transitions: 200ms ease-out (smart animate)
+ *
+ * CVA (Class Variance Authority) manages all variants
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "danger" | null | undefined;
+    size?: "big" | "small" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+/**
+ * Button Props
+ *
+ * Extends native HTML button attributes
+ * Adds variant and size from CVA
+ * Supports asChild for Radix composition pattern
+ * Supports leading/trailing/icon-only layouts controlled by booleans
+ */
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /**
+     * If true, renders as a Slot (for composition with other components)
+     * @example
+     * <Button asChild>
+     *   <Link to="/home">Go Home</Link>
+     * </Button>
+     */
+    asChild?: boolean;
+    /**
+     * Icon element to render.
+     * Used together with `leadingIcon`, `trailingIcon`, or `iconOnly` booleans.
+     * @example
+     * <Button leadingIcon icon={<PlusIcon />}>Add Item</Button>
+     */
+    icon?: React.ReactNode;
+    /**
+     * When true, shows the icon before the button label.
+     */
+    leadingIcon?: boolean;
+    /**
+     * 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>>;
+
+/**
+ * Sangam Toggle (Switch) Component
+ *
+ * Production-grade toggle following Figma design specs:
+ * - Colors: Neutral palette from colors.json
+ * - Sizes: Big (56×28px), Small (44×24px)
+ * - States: Default, Hover, Disabled
+ * - Smooth transitions: 200ms ease-out
+ *
+ * Built on Radix UI Switch for accessibility
+ */
+declare const toggleVariants: (props?: ({
+    size?: "big" | "small" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+/**
+ * Toggle Props
+ *
+ * Extends Radix Switch props. Adds size variants and optional label variants:
+ * - Only toggle: no title/subtext
+ * - Toggle + Title: title only (14px, #111111, weight 500, line-height 24px)
+ * - Toggle + Title & Subtext: title + subtext (subtext: 12px, #7C7C7C, weight 400, line-height 16px)
+ */
+interface ToggleProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof toggleVariants> {
+    /**
+     * Size of the toggle
+     * @default "big"
+     */
+    size?: "big" | "small";
+    /**
+     * Title shown to the right of the toggle. 14px, neutral-1100, font-medium, leading-6.
+     */
+    title?: string;
+    /**
+     * Subtext shown below title. 12px, neutral-600, font-normal, leading-4.
+     */
+    subtext?: string;
+}
+/**
+ * Sangam Toggle Component
+ *
+ * Production-grade toggle switch built on:
+ * - Radix UI Switch (for accessibility)
+ * - CVA (for type-safe size variants)
+ * - Sangam tokens (for consistent styling)
+ * - 200ms ease-out transitions
+ *
+ * @example Basic usage
+ * <Toggle />
+ *
+ * @example Controlled
+ * <Toggle checked={isOn} onCheckedChange={setIsOn} />
+ *
+ * @example Small size
+ * <Toggle size="small" />
+ *
+ * @example Disabled
+ * <Toggle disabled />
+ *
+ * @example With label
+ * <label className="flex items-center gap-2">
+ *   <Toggle />
+ *   <span>Enable notifications</span>
+ * </label>
+ *
+ * @example Toggle + Title
+ * <Toggle title="Write label text here" />
+ *
+ * @example Toggle + Title & Subtext
+ * <Toggle title="Write label text here" subtext="Some helper text here" />
+ */
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Sangam Checkbox Component
+ *
+ * Production-grade checkbox following Figma design specs:
+ * - Colors: Neutral palette from colors.json
+ * - 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. */
+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> {
+    /**
+     * Size of the checkbox
+     * @default "big"
+     */
+    size?: "big" | "small";
+    /**
+     * Title shown to the right of the checkbox. 14px, neutral-1100, font-medium, leading-6.
+     */
+    title?: string;
+    /**
+     * Subtext shown below title. 12px, neutral-600, font-normal, leading-4.
+     */
+    subtext?: 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" />
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Sangam Radio Component
+ *
+ * Production-grade radio button following Figma design specs:
+ * - Colors: Neutral palette from colors.json
+ * - Sizes: Big (24×24px), Small (20×20px)
+ * - States: Default, Hover, Disabled
+ * - Smooth transitions: 200ms ease-out
+ * - Circular shape (rounded-full)
+ *
+ * Built on Radix UI Radio Group for accessibility
+ */
+declare const radioVariants: (props?: ({
+    size?: "big" | "small" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+/**
+ * Radio Group Props
+ */
+interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+}
+/**
+ * Radio Group Item Props
+ *
+ * Extends Radix Radio props. Adds size variants and optional label variants:
+ * - Only radio button: no title/subtext
+ * - 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> {
+    /**
+     * Size of the radio button
+     * @default "big"
+     */
+    size?: "big" | "small";
+    /**
+     * Title shown to the right of the radio. 14px, neutral-1100, font-medium, leading-6.
+     */
+    title?: string;
+    /**
+     * Subtext shown below title. 12px, neutral-600, font-normal, leading-4.
+     */
+    subtext?: string;
+}
+/**
+ * Sangam Radio Group Component
+ *
+ * Container for radio buttons - ensures only one can be selected at a time
+ *
+ * @example Basic usage
+ * <RadioGroup defaultValue="option1">
+ *   <Radio value="option1" />
+ *   <Radio value="option2" />
+ * </RadioGroup>
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Sangam Radio Component
+ *
+ * Production-grade radio button built on:
+ * - Radix UI Radio Group (for accessibility and mutual exclusivity)
+ * - CVA (for type-safe size variants)
+ * - Sangam tokens (for consistent styling)
+ * - 200ms ease-out transitions
+ *
+ * @example Basic usage
+ * <RadioGroup defaultValue="option1">
+ *   <Radio value="option1" id="r1" />
+ *   <label htmlFor="r1">Option 1</label>
+ * </RadioGroup>
+ *
+ * @example Controlled
+ * <RadioGroup value={selected} onValueChange={setSelected}>
+ *   <Radio value="option1" />
+ *   <Radio value="option2" />
+ * </RadioGroup>
+ *
+ * @example Small size
+ * <RadioGroup defaultValue="option1">
+ *   <Radio value="option1" size="small" />
+ * </RadioGroup>
+ *
+ * @example Disabled
+ * <Radio value="option1" disabled />
+ *
+ * @example With label
+ * <RadioGroup defaultValue="option1">
+ *   <div className="flex items-center gap-2">
+ *     <Radio value="option1" id="option1" />
+ *     <label htmlFor="option1">Option 1</label>
+ *   </div>
+ * </RadioGroup>
+ *
+ * @example Radio + Title
+ * <RadioGroup defaultValue="a">
+ *   <Radio value="a" title="Write label text here" />
+ * </RadioGroup>
+ *
+ * @example Radio + Title & Subtext
+ * <RadioGroup defaultValue="a">
+ *   <Radio value="a" title="Write label text here" subtext="Some helper text here" />
+ * </RadioGroup>
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Sangam Input Component
+ *
+ * Production-grade text input following Figma design specs:
+ * - Colors: Neutral, Red, Green from colors.json
+ * - Multiple states: Default, Hover, Active, Typing, Filled, Error, Success, Disabled
+ * - Consistent padding: 4px 12px
+ * - Smooth transitions: 200ms ease-out
+ *
+ * Built with compound component pattern (Input + Label)
+ */
+declare const inputVariants: (props?: ({
+    variant?: "default" | "error" | "success" | null | undefined;
+    filled?: boolean | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+/**
+ * Input Props
+ */
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    /**
+     * Error state - shows red border
+     */
+    error?: boolean;
+    /**
+     * Success state - shows green border
+     */
+    success?: boolean;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Whether the label is required (shows red asterisk)
+     */
+    required?: boolean;
+    /**
+     * Helper text below input (for errors, hints, etc.)
+     */
+    helperText?: string;
+    /**
+     * Whether helper text is an error message
+     */
+    helperError?: boolean;
+    /**
+     * Show info icon next to label (after required asterisk)
+     * @default false
+     */
+    showLabelIcon?: boolean;
+    /**
+     * Show icon with supporting/helper text
+     * @default false
+     */
+    showHelperIcon?: boolean;
+    /**
+     * Trailing icon (e.g. dropdown chevron) - renders inside input wrapper on the right with border
+     */
+    trailingIcon?: React.ReactNode;
+    /**
+     * CTA label (e.g. "Button") - renders as link at end of input
+     */
+    ctaLabel?: string;
+    /**
+     * Callback when CTA is clicked
+     */
+    onCtaClick?: () => void;
+}
+/**
+ * Label Component
+ *
+ * Displays label with optional required asterisk
+ */
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /**
+     * Shows red asterisk for required fields
+     */
+    required?: boolean;
+    /**
+     * Optional content after the asterisk (e.g. info icon)
+     */
+    endAdornment?: React.ReactNode;
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * Sangam Input Component
+ *
+ * Production-grade text input built with:
+ * - CVA (for type-safe variants)
+ * - Sangam tokens (for consistent styling)
+ * - 200ms ease-out transitions
+ * - Accessible label and helper text
+ *
+ * @example Basic usage
+ * <Input label="Email" placeholder="Enter your email" />
+ *
+ * @example Required field
+ * <Input label="Username" required />
+ *
+ * @example Error state
+ * <Input
+ *   label="Password"
+ *   error
+ *   helperText="Password must be at least 8 characters"
+ * />
+ *
+ * @example Success state
+ * <Input
+ *   label="Email"
+ *   success
+ *   value="user@example.com"
+ * />
+ *
+ * @example Disabled
+ * <Input label="Username" disabled value="john.doe" />
+ *
+ * @example With helper text
+ * <Input
+ *   label="Email"
+ *   helperText="We'll never share your email"
+ * />
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const dropdownTriggerVariants: (props?: ({
+    error?: boolean | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+declare const dropdownContentVariants: (props?: class_variance_authority_dist_types.ClassProp | undefined) => string;
+declare const dropdownItemVariants: (props?: class_variance_authority_dist_types.ClassProp | undefined) => string;
+interface DropdownOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface DropdownProps extends Omit<React.ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, "children">, VariantProps<typeof dropdownTriggerVariants> {
+    /**
+     * Label text (same as Input)
+     */
+    label?: string;
+    /**
+     * Required field (red asterisk)
+     */
+    required?: boolean;
+    /**
+     * Placeholder when no value selected
+     */
+    placeholder?: string;
+    /**
+     * Options for the dropdown
+     */
+    options: DropdownOption[];
+    /**
+     * Trigger width (in pixels). If not provided, the trigger will stretch to 100% width of its container.
+     * @default 100%
+     */
+    width?: number;
+    /**
+     * Error state (red border, red-800)
+     */
+    error?: boolean;
+    /**
+     * Filled disabled state (bg/border neutral-200, text neutral-1100, not editable)
+     */
+    /**
+     * Show info icon next to label (after required asterisk)
+     * @default false
+     */
+    showLabelIcon?: boolean;
+    /**
+     * Helper/supporting text below dropdown
+     */
+    helperText?: string;
+    /**
+     * Show icon with helper text (Info when neutral, InfoFilled when error)
+     * @default false
+     */
+    showHelperIcon?: boolean;
+    /**
+     * Label for "Select all" option; set to empty to hide
+     */
+    selectAllLabel?: string;
+}
+/**
+ * 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 {
+    label?: string;
+    required?: boolean;
+    placeholder?: string;
+    options: DropdownOption[];
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    /**
+     * Trigger width (in pixels). If not provided, the trigger will stretch to 100% width of its container.
+     * @default 100%
+     */
+    width?: number;
+    /**
+     * Error state (red border and red helper text)
+     */
+    error?: boolean;
+    disabled?: boolean;
+    /** Label for "Select all" option; set to empty to hide */
+    selectAllLabel?: string;
+    /** Show info icon next to label (after required asterisk) */
+    showLabelIcon?: boolean;
+    /** Helper/supporting text below dropdown */
+    helperText?: string;
+    /** Show icon with helper text */
+    showHelperIcon?: boolean;
+}
+declare const DropdownMulti: React.ForwardRefExoticComponent<DropdownMultiProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Sangam SearchField Component
+ *
+ * Production-grade search input following Figma design specs:
+ * - Width: Fixed 400px
+ * - Colors: Neutral palette from colors.json
+ * - Multiple states: Default, Hover, Active, Typing, Filled, Disabled
+ * - Border radius: 8px
+ * - Padding: 4px 12px
+ * - Gap: 8px
+ * - 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;
+}
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Sangam Textarea Component
+ *
+ * Production-grade textarea following Figma design specs:
+ * - Width: Fixed 450px
+ * - Height: Fixed 96px
+ * - Colors: Neutral, Red, Green from colors.json
+ * - Multiple states: Default, Hover, Active, Typing, Filled, Error, Success, Disabled
+ * - Padding: 4px 12px
+ * - Border radius: 8px (sm)
+ * - Character counter: X/250 format
+ * - Smooth transitions: 200ms ease-out
+ *
+ * Built with compound component pattern (Textarea + Label)
+ */
+declare const textareaVariants: (props?: ({
+    variant?: "default" | "error" | "success" | null | undefined;
+    filled?: boolean | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+/**
+ * Textarea Props
+ */
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, VariantProps<typeof textareaVariants> {
+    /**
+     * Error state - shows red border
+     */
+    error?: boolean;
+    /**
+     * Success state - shows green border
+     */
+    success?: boolean;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Whether the label is required (shows red asterisk)
+     */
+    required?: boolean;
+    /**
+     * Helper text below textarea (for errors, hints, etc.)
+     */
+    helperText?: string;
+    /**
+     * Whether helper text is an error message
+     */
+    helperError?: boolean;
+    /**
+     * Maximum character length
+     * @default 250
+     */
+    maxLength?: number;
+    /**
+     * Show character counter
+     * @default true
+     */
+    showCounter?: boolean;
+    /**
+     * Show info icon next to label
+     * @default false
+     */
+    showLabelIcon?: boolean;
+    /**
+     * Show icon with supporting text
+     * @default false
+     */
+    showHelperIcon?: boolean;
+}
+/**
+ * Sangam Textarea Component
+ *
+ * Production-grade textarea built with:
+ * - CVA (for type-safe variants)
+ * - Sangam tokens (for consistent styling)
+ * - 200ms ease-out transitions
+ * - Accessible label and helper text
+ * - Fixed height (96px)
+ *
+ * @example Basic usage
+ * <Textarea label="Description" placeholder="Enter description..." />
+ *
+ * @example Required field
+ * <Textarea label="Comments" required />
+ *
+ * @example Error state
+ * <Textarea
+ *   label="Message"
+ *   error
+ *   helperText="Message must be at least 10 characters"
+ * />
+ *
+ * @example Success state
+ * <Textarea
+ *   label="Feedback"
+ *   success
+ *   value="Great product!"
+ * />
+ *
+ * @example Disabled
+ * <Textarea label="Notes" disabled value="Read-only notes" />
+ *
+ * @example With helper text
+ * <Textarea
+ *   label="Bio"
+ *   helperText="Tell us about yourself (max 500 characters)"
+ * />
+ *
+ * @example Label with info icon
+ * <Textarea label="Description" showLabelIcon required />
+ *
+ * @example With supporting text and icon
+ * <Textarea
+ *   label="Comments"
+ *   helperText="Supporting text"
+ *   showHelperIcon
+ * />
+ *
+ * @example Success with icon
+ * <Textarea
+ *   label="Feedback"
+ *   success
+ *   helperText="Supporting text"
+ *   value="Great product!"
+ * />
+ *
+ * @example Error with icon
+ * <Textarea
+ *   label="Message"
+ *   error
+ *   helperText="Supporting text"
+ * />
+ */
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+/**
+ * Sangam Tooltip Component
+ *
+ * Production-grade tooltip following Figma design specs:
+ * - Colors: Background #111111, Text #FFFFFF
+ * - 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)
+ *
+ * Uses rem for dimensions to respect user font size preferences (accessibility)
+ *
+ * Three variants:
+ * 1. Default - Just title (32px height)
+ * 2. With Description - Title + description (52px height)
+ * 3. With Close Icon - Title + description + close icon (52px height)
+ *
+ * Built on Radix UI Tooltip for accessibility
+ *
+ * @example Basic usage (Default)
+ * <TooltipProvider>
+ *   <Tooltip>
+ *     <TooltipTrigger>Hover me</TooltipTrigger>
+ *     <TooltipContent title="Title" />
+ *   </Tooltip>
+ * </TooltipProvider>
+ *
+ * @example With Description
+ * <TooltipContent title="Title" description="Description" />
+ *
+ * @example With Close Icon
+ * <TooltipContent title="Title" description="Description" showCloseIcon />
+ */
+declare const tooltipContentVariants: (props?: ({
+    variant?: "default" | "withDescription" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface TooltipContentProps extends Omit<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, "title">, VariantProps<typeof tooltipContentVariants> {
+    /**
+     * Title text (required)
+     */
+    title: string;
+    /**
+     * Description text (optional)
+     * When provided, tooltip height becomes 52px
+     */
+    description?: string;
+    /**
+     * Whether to show close icon in top-right
+     * @default false
+     */
+    showCloseIcon?: boolean;
+    /**
+     * Callback when close icon is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Whether to show the arrow
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * Offset from the trigger element (gap between trigger and arrow)
+     * @default 12
+     */
+    sideOffset?: number;
+}
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * TooltipContent component with caret
+ *
+ * Renders tooltip content with appropriate caret based on side and alignment
+ * Supports three variants: default, with description, with close icon
+ */
+declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Current progress value (0–100).
+     */
+    value: number;
+    /**
+     * Maximum value (default 100).
+     */
+    max?: number;
+    /**
+     * Show percentage label: "left" | "right" | "both" | "none".
+     * @default "both"
+     */
+    showLabel?: "left" | "right" | "both" | "none";
+    /**
+     * Track width in pixels. Ignored when fluid is true.
+     * @default 476
+     */
+    width?: number;
+    /**
+     * When true, track uses full width of container (responsive).
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Track height in pixels.
+     * @default 6
+     */
+    height?: number;
+    /**
+     * Accessible label for the progress bar.
+     */
+    "aria-label"?: string;
+}
+/**
+ * ProgressBar for completion or loading states.
+ *
+ * @example With labels
+ * <ProgressBar value={50} showLabel="both" />
+ *
+ * @example Bar only
+ * <ProgressBar value={75} showLabel="none" />
+ */
+declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+
+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 blue-600 from tokens
+     */
+    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>>;
+
+/**
+ * Skeleton Loader
+ *
+ * Lightweight, token-friendly loading placeholder.
+ * Uses tokens from @esds-sangam/tokens:
+ * - Base bg: neutral-200 (colors.json)
+ * - Border radius: rounded-sm = tokens radius.sm (0.5rem / 8px)
+ * - Shimmer: gradient neutral-200 → neutral-100 → neutral-50 → neutral-200
+ * - Animation: ease-out, 1s duration, 800ms delay, loops infinitely.
+ *
+ * By default the component is layout-flexible — width/height
+ * are controlled by the parent (via className or style).
+ * In stories we showcase 113×17px as per Figma.
+ */
+declare const skeletonVariants: (props?: ({
+    variant?: "rectangular" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
+    /**
+     * Accessible label for screen readers.
+     * If omitted, skeleton is aria-hidden.
+     */
+    "aria-label"?: string;
+}
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Sangam Tabs Component
+ *
+ * Types: Container, Underline, Icon only.
+ * States: Default, Hover, Selected, Disabled.
+ * 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.
+ */
+declare const tabsListVariants: (props?: ({
+    type?: "underline" | "iconOnly" | "container" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+declare const tabsTriggerVariants: (props?: ({
+    type?: "underline" | "iconOnly" | "container" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface TabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
+    /**
+     * Visual type: container (boxed), underline, or icon only.
+     */
+    type?: "container" | "underline" | "iconOnly";
+}
+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?: ({
+    type?: "underline" | "iconOnly" | "container" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string> & {
+    type?: "container" | "underline" | "iconOnly";
+} & React.RefAttributes<HTMLDivElement>>;
+interface TabsTriggerOption {
+    value: string;
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+interface TabsTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, "children" | "type"> {
+    /** Visual tab type (inherited from Tabs if not set). */
+    type?: "container" | "underline" | "iconOnly";
+    /**
+     * For iconOnly type, render this icon (e.g. tickmark). If omitted, tickmark is used.
+     */
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
+    List: React.ForwardRefExoticComponent<Omit<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref">, "type"> & VariantProps<(props?: ({
+        type?: "underline" | "iconOnly" | "container" | null | undefined;
+    } & class_variance_authority_dist_types.ClassProp) | undefined) => string> & {
+        type?: "container" | "underline" | "iconOnly";
+    } & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Sangam Avatar Component
+ *
+ * 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 typography: large 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;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+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).
+     */
+    variant?: "image" | "letter";
+    /**
+     * Image URL for the avatar. When not provided or on error, placeholder is shown (image variant only).
+     */
+    src?: string | null;
+    /**
+     * Alt text for the image.
+     */
+    alt?: string;
+    /**
+     * For letter variant: initials (e.g. "AB"). For image variant: optional fallback when src fails.
+     */
+    children?: React.ReactNode;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Sangam Badge Component
+ *
+ * Token-based badges with two sizes (big/small), three shapes (rounded/pill/notification),
+ * 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.
+ * Colors from @esds-sangam/tokens colors.json.
+ *
+ * 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)
+ *
+ * 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;
+    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.
+     */
+    children?: React.ReactNode;
+    /**
+     * When true, Badge uses solid styling tokens for the given state.
+     * This takes precedence over the `appearance` prop.
+     * @default false
+     */
+    isSolid?: boolean;
+    /**
+     * When true, renders a fixed leading status icon chosen by `state`.
+     * @default false
+     */
+    leadingIcon?: boolean;
+    /**
+     * When true, renders a fixed dropdown chevron icon on the trailing edge.
+     * @default false
+     */
+    dropdownIcon?: boolean;
+    /**
+     * When true, renders a fixed close icon on the trailing edge.
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * Optional callback invoked when the close icon is clicked.
+     */
+    onClose?: () => void;
+}
+/**
+ * Badge component for status and count indicators.
+ * For Icon+Label, Dismissal, or Dropdown variants, compose icons/controls as children
+ * (see Badge stories for recommended patterns).
+ *
+ * @example Only Label
+ * <Badge size="big" variant="rounded" state="info" appearance="outlined">Label</Badge>
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Sangam Chip Component
+ *
+ * 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).
+ * 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
+ */
+declare const chipVariants: (props?: ({
+    size?: "small" | "large" | null | undefined;
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface ChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Chip label (e.g. "Chip").
+     */
+    children?: React.ReactNode;
+    /**
+     * Size: large (75×32, close 16×16) or small (67×24, close 12×12).
+     */
+    size?: "large" | "small";
+    /**
+     * Selected state: filled black, white text.
+     */
+    selected?: boolean;
+    /**
+     * 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;
+    /**
+     * When true, show tick icon before the label. Use with onDismiss for variant: Tick + label + close.
+     */
+    showLeadingIcon?: boolean;
+}
+/**
+ * Chip for tags, filters, or removable items.
+ *
+ * @example Default
+ * <Chip size="large">Chip</Chip>
+ *
+ * @example With dismiss (Label + close)
+ * <Chip size="large" onDismiss={() => {}}>Chip</Chip>
+ *
+ * @example Tick + label + close
+ * <Chip size="large" onDismiss={() => {}} showLeadingIcon>Chip</Chip>
+ *
+ * @example Selected
+ * <Chip size="large" selected>Chip</Chip>
+ */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Sangam Toast Component
+ *
+ * Production-grade toast notification following Figma design specs:
+ * - Fixed width: 384px
+ * - Height: 56px (default), 84px (with description or CTA)
+ * - Border radius: 8px
+ * - Left border width: 3px
+ * - Padding: 16px
+ * - Background: white (neutral-50)
+ * - Title: 16px, 500 weight, 24px line-height, neutral-1100 color
+ * - Description: 14px, 400 weight, 24px line-height, neutral-600 color
+ * - Shadow: 0px 4px 10px 0px
+ * - Close icon: 16x16
+ * - Status icon: 20x20
+ * - CTA Button: radius 8px, padding 4px 16px
+ *
+ * Four color variants (token-based):
+ * 1. Info - blue-600 border/icon
+ * 2. Success - green-800 border/icon
+ * 3. Warning - orange-700 border/icon
+ * 4. Error - red-800 border/icon
+ *
+ * Three layout variants:
+ * 1. Default - Title only (56px height)
+ * 2. With Description - Title + description + close (84px height)
+ * 3. With CTA - Title + button (84px height, no description)
+ *
+ * @example Basic usage
+ * <Toast variant="info" title="Info message" />
+ *
+ * @example With description
+ * <Toast variant="success" title="Success!" description="Your changes have been saved" />
+ *
+ * @example With CTA button
+ * <Toast variant="info" title="New update" ctaText="Update" onCtaClick={() => {}} />
+ */
+declare const toastVariants: (props?: ({
+    variant?: "error" | "success" | "info" | "warning" | null | undefined;
+    layout?: "default" | "withDescription" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toastVariants> {
+    /**
+     * Toast variant type
+     * @default "info"
+     */
+    variant?: "info" | "success" | "warning" | "error";
+    /**
+     * Title text (required)
+     */
+    title: string;
+    /**
+     * Description text (optional)
+     * When provided, toast height becomes 84px
+     */
+    description?: string;
+    /**
+     * Whether to show close button
+     * @default true (false when CTA is provided)
+     */
+    showClose?: boolean;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * CTA button text (optional)
+     * When provided, replaces close button and height becomes 84px
+     */
+    ctaText?: string;
+    /**
+     * Callback when CTA button is clicked
+     */
+    onCtaClick?: () => void;
+}
+/**
+ * Toast component with icon, title, optional description, and close/CTA
+ *
+ * Displays status-based notification with appropriate icon and border color
+ * Supports three layouts: default (56px), with description (84px), with CTA (84px)
+ */
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * PageHeader Pattern
+ *
+ * Composes primitives (Tabs) for page top layout.
+ * Variants: With Title, With Tabs, Title+Tabs.
+ *
+ * From the Figma Page Header component:
+ * - Title: 20px, weight 600, line-height 28px, color neutral-1100
+ * - Optional back icon (ArrowLeft) before the title
+ * - Optional badge after the title (Planning / status label)
+ * - 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
+ */
+interface PageHeaderTab {
+    value: string;
+    label: string;
+}
+type PageHeaderAction = {
+    /**
+     * Visible label for the CTA button.
+     */
+    label: string;
+    /**
+     * Click handler for the CTA button.
+     */
+    onClick?: () => void;
+    /**
+     * Visual style of the CTA. 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";
+};
+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> {
+    /**
+     * Page title. Required for withTitle and titleTabs variants.
+     */
+    title?: string;
+    /**
+     * Tab items for withTabs and titleTabs. Each has value and label.
+     */
+    tabs?: PageHeaderTab[];
+    /**
+     * Default/initial selected tab value (uncontrolled).
+     */
+    defaultTab?: string;
+    /**
+     * Controlled selected tab value.
+     */
+    tab?: string;
+    /**
+     * Callback when tab selection changes.
+     */
+    onTabChange?: (value: string) => void;
+    /**
+     * Optional class name for the title element.
+     */
+    titleClassName?: string;
+    /**
+     * Optional class name for the tabs wrapper.
+     */
+    tabsClassName?: string;
+    /**
+     * When true, shows a back icon button before the title.
+     */
+    backIcon?: boolean;
+    /**
+     * Callback when the back icon is clicked.
+     */
+    onBackClick?: () => void;
+    /**
+     * When true, hides the title even if provided.
+     * Defaults to true (title shown).
+     */
+    showTitle?: boolean;
+    /**
+     * Optional badge label rendered after the title.
+     * When provided, a neutral/info badge is shown.
+     */
+    badgeLabel?: string;
+    /**
+     * When true, shows a second line of descriptive text below the title.
+     */
+    showSubtext?: boolean;
+    /**
+     * Subtext content shown below the title when showSubtext is true.
+     */
+    subtext?: string;
+    /**
+     * Primary CTA button (right side).
+     */
+    primaryAction?: PageHeaderAction;
+    /**
+     * Secondary CTA button (right side, before primary).
+     */
+    secondaryAction?: PageHeaderAction;
+    /**
+     * Optional third CTA button (rightmost or leftmost depending on usage).
+     */
+    tertiaryAction?: PageHeaderAction;
+    /**
+     * When true, shows a close icon button on the right.
+     */
+    closeIcon?: boolean;
+    /**
+     * Callback when the close icon is clicked.
+     */
+    onCloseClick?: () => void;
+}
+declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
+
+interface PageFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Action buttons or content. Defaults to primary small "Convert" button when omitted.
+     */
+    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>>;
+
+/**
+ * SideMenu Pattern
+ *
+ * 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 132×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.
+ */
+interface SideMenuItem {
+    id: string;
+    label: string;
+    /** Icon for collapsed state (and expanded when iconExpanded not provided) */
+    icon: React.ReactNode;
+    /** Icon for expanded state. Use when icon needs different styling on white bg (e.g. Profile/avtarimg). */
+    iconExpanded?: React.ReactNode;
+}
+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: SideMenuItem[];
+    /** Bottom nav items: Search, Settings, Profile */
+    bottomItems: SideMenuItem[];
+    /** 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;
+    /** Callback when an item is clicked */
+    onItemClick?: (id: string) => void;
+}
+declare const sideMenuVariants: (props?: ({
+    variant?: "default" | "selected" | "hover" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>>;
+
+/**
+ * Upload Pattern – Stage 1: File uploader
+ *
+ * Token-based, accessible file uploader pattern with:
+ * - Label (12px, weight 500, line-height 16)
+ * - Dashed dropzone with hover state
+ * - Cloud upload icon, primary/secondary text, and helper text
+ *
+ * Drag & drop support is basic; consumers should wire onFilesSelected for uploads.
+ */
+declare const uploadBoxVariants: (props?: class_variance_authority_dist_types.ClassProp | undefined) => string;
+interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Field label shown above the uploader (12/500/16). */
+    label: string;
+    /** Whether to show the red asterisk after the label. */
+    required?: boolean;
+    /** Accept string for underlying file input, e.g. \"image/*,.pdf\". */
+    accept?: string;
+    /** Allow selecting multiple files. */
+    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). */
+    helperText?: string;
+}
+declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
+declare const uploadFileItemBoxVariants: (props?: ({
+    status?: "uploading" | "complete" | "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> {
+    /** File name (e.g. "File name.pdf"). 14px, weight 500, line-height 24, neutral-1100. */
+    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". */
+    progress?: number;
+    /** Callback when user cancels (close icon during uploading). */
+    onCancel?: () => void;
+    /** Callback when user retries (failed state). */
+    onRetry?: () => void;
+    /** Callback when user deletes (complete or failed). */
+    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).
+ * Right: uploading = Close + %; complete = tickmarkFilled + Delete + 100%; failed = Retry + Delete.
+ * Progress bar below when not failed (ProgressBar primitive, 10% / 50% / 100%).
+ */
+declare const UploadFileItem: React.ForwardRefExoticComponent<UploadFileItemProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Types Layer
+ *
+ * Shared TypeScript types and interfaces for:
+ * - Component props
+ * - Variant definitions
+ * - Public contracts
+ *
+ * This prevents breaking changes and ensures consistency
+ */
+
+interface BaseComponentProps {
+    children?: ReactNode;
+    className?: string;
+}
+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, 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 };