` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Declarative API is deprecated but still functional for backward compatibility.
*/
declare const AvatarBase: React__default.ForwardRefExoticComponent>;
type AvatarWithSubcomponents = typeof AvatarBase & {
AvatarImage: typeof AvatarImage;
AvatarFallback: typeof AvatarFallback;
};
declare const Avatar: AvatarWithSubcomponents;
declare const AvatarGroup: React__default.ForwardRefExoticComponent>;
interface AddProps extends React__default.SVGProps {
width?: number | string;
height?: number | string;
}
interface IconProps$1 extends SVGProps {
size?: number;
}
declare const iconMap: {
add: React$1.FC;
'add-trip': React$1.FC<{}>;
aeroplane: React$1.FC<{}>;
airtel: React$1.FC<{}>;
'alert-critical-fill': React$1.FC<{}>;
'alert-critical': React$1.FC<{}>;
'alert-informational-fill': React$1.FC<{}>;
'alert-informational': React$1.FC<{}>;
'arrow-bottom-left': React$1.FC<{}>;
'arrow-left': React$1.FC<{}>;
'arrow-down-right': React$1.FC<{}>;
'arrow-down': React$1.FC<{}>;
'arrow-top-left': React$1.FC<{}>;
'arrow-top-right': React$1.FC<{}>;
'arrow-up': React$1.FC<{}>;
backward: React$1.ForwardRefExoticComponent & React$1.RefAttributes>;
bell: React$1.FC<{}>;
bsnl: React$1.FC<{}>;
'bulk-actions': React$1.FC<{}>;
'bulk-trip': React$1.FC<{}>;
bundle: React$1.ForwardRefExoticComponent & React$1.RefAttributes>;
'calendar-clock': React$1.FC<{}>;
calendar: React$1.FC<{}>;
cheap: React$1.FC<{}>;
'check-alt': React$1.FC<{}>;
'check-fill': React$1.FC<{}>;
check: React$1.FC<{}>;
'chevron-down': React$1.FC<{}>;
'chevron-left': React$1.FC<{}>;
'chevron-right': React$1.FC<{}>;
'chevron-up': React$1.FC<{}>;
clock: React$1.FC<{}>;
'clock-alert': React$1.FC<{}>;
'clock-cross': React$1.FC<{}>;
'clock-tick': React$1.FC<{}>;
'clock-warning': React$1.FC<{}>;
'close-filled': React$1.FC<{}>;
comment: React$1.FC<{}>;
compress: React$1.FC<{}>;
'consent-available': React$1.FC<{}>;
'consent-pending': React$1.FC<{}>;
'consent-rejected': React$1.FC<{}>;
'control-tower': React$1.FC<{}>;
copy: React$1.FC<{}>;
'cross-icon': React$1.FC<{}>;
cross: React$1.FC<{}>;
'cursor-pointer': React$1.FC<{}>;
dashboard: React$1.FC<{}>;
'data-stack': React$1.FC<{}>;
'default-icon': React$1.FC<{}>;
delete: React$1.FC<{}>;
'detention-at-destination': React$1.FC<{}>;
'detention-at-origin': React$1.FC<{}>;
diversion: React$1.FC<{}>;
division: React$1.FC<{}>;
'document-reuse': React$1.FC<{}>;
document: React$1.FC<{}>;
download: React$1.FC<{}>;
drag: React$1.FC<{}>;
edit: React$1.FC<{}>;
'eway-bill-expired': React$1.FC<{}>;
excel: React$1.FC<{}>;
expand: React$1.FC<{}>;
'export-file': React$1.FC<{}>;
'eye-invisible': React$1.FC<{}>;
'file-alt': React$1.FC<{}>;
'file-upload': React$1.FC<{}>;
'file-uploader': React$1.FC<{}>;
file: React$1.FC<{}>;
'fill-details': React$1.FC<{}>;
filter: React$1.FC<{}>;
flame: React$1.FC<{}>;
forward: React$1.ForwardRefExoticComponent & React$1.RefAttributes>;
'ft-colour': React$1.FC<{}>;
'ft-gray': React$1.FC<{}>;
glass: React$1.FC<{}>;
'google-colour': React$1.FC<{}>;
'google-gray': React$1.FC<{}>;
'gmail-logo': React$1.FC<{}>;
'google-drive': React$1.FC<{}>;
gps: React$1.FC<{}>;
gst: React$1.FC<{}>;
'hamburger-menu': React$1.FC<{}>;
hand: React$1.FC<{}>;
home: React$1.FC<{}>;
image: React$1.FC<{}>;
indent: React$1.FC<{}>;
jio: React$1.FC<{}>;
'light-bulb': React$1.FC<{}>;
link: React$1.FC<{}>;
loading: React$1.FC<{}>;
locate: React$1.FC<{}>;
location: React$1.FC<{}>;
lock: React$1.FC<{}>;
logout: React$1.FC<{}>;
'long-stoppage': React$1.FC<{}>;
mail: React$1.FC<{}>;
map: React$1.FC<{}>;
megaphone: React$1.FC<{}>;
more: React$1.FC<{}>;
'more-options': React$1.FC<{}>;
mtnl: React$1.FC<{}>;
'multiple-location': React$1.FC<{}>;
'multiple-time': React$1.FC<{}>;
'multiple-weight': React$1.FC<{}>;
'my-trip': React$1.FC<{}>;
navigator: React$1.FC<{}>;
'no-signal': React$1.FC<{}>;
noted: React$1.FC<{}>;
'octagon-alert-filled': React$1.FC<{}>;
'one-drive': React$1.FC<{}>;
notification: React$1.FC<{}>;
organisation: React$1.FC<{}>;
outbound: React$1.FC<{}>;
'parcel-check': React$1.FC<{}>;
password: React$1.FC<{}>;
pause: React$1.FC<{}>;
'pause-filled': React$1.FC<{}>;
pen: React$1.FC<{}>;
'phone-alt': React$1.FC<{}>;
phone: React$1.FC<{}>;
'plant-alt': React$1.FC<{}>;
plant: React$1.FC<{}>;
planning: React$1.FC<{}>;
'play-fill': React$1.FC<{}>;
play: React$1.FC<{}>;
'portable-tracking': React$1.FC<{}>;
'preview-fill': React$1.FC<{}>;
preview: React$1.FC<{}>;
recommended: React$1.FC<{}>;
refresh: React$1.FC<{}>;
remove: React$1.FC<{}>;
reports: React$1.FC<{}>;
road: React$1.FC<{}>;
rocket: React$1.FC<{}>;
'route-deviation': React$1.FC<{}>;
'round-trip': React$1.FC<{}>;
'rupee-coin': React$1.FC<{}>;
satellite: React$1.FC<{}>;
save: React$1.FC<{}>;
search: React$1.FC<{}>;
send: React$1.FC<{}>;
settlement: React$1.FC<{}>;
settings: React$1.FC<{}>;
'shake-hand': React$1.FC<{}>;
share: React$1.FC<{}>;
'shield-alert': React$1.FC<{}>;
ship: React$1.FC<{}>;
sim: React$1.FC<{}>;
'small-truck': React$1.FC<{}>;
sort: React$1.FC<{}>;
star: React$1.FC<{}>;
stop: React$1.FC<{}>;
streetview: React$1.FC<{}>;
'strength-high': React$1.FC<{}>;
'strength-low': React$1.FC<{}>;
'strength-medium': React$1.FC<{}>;
'strength-no-tracking': React$1.FC>;
subtract: React$1.FC<{}>;
success: React$1.FC<{}>;
tata: React$1.FC<{}>;
'temperature-cold': React$1.FC<{}>;
'temperature-default': React$1.FC<{}>;
'temperature-hot': React$1.FC<{}>;
'three-dot-menu': React$1.FC<{}>;
time: React$1.FC<{}>;
timer: React$1.FC<{}>;
tracker: React$1.FC<{}>;
'tracking-interrupted': React$1.FC<{}>;
train: React$1.FC<{}>;
'transit-delay': React$1.FC<{}>;
'triangle-alert': React$1.FC<{}>;
trolley: React$1.FC<{}>;
truck: React$1.FC<{}>;
untracked: React$1.FC<{}>;
user: React$1.FC<{}>;
vehicle: React$1.FC<{}>;
vodafone: React$1.FC<{}>;
warehouse: React$1.FC<{}>;
weight: React$1.FC<{}>;
whatsapp: React$1.FC<{}>;
'contracted-bill': React$1.FC<{}>;
'upload-document': React$1.FC<{}>;
'part-truck-load': React$1.FC<{}>;
reconciliation: React$1.FC<{}>;
burger: React$1.FC<{}>;
menu: React$1.FC<{}>;
'help-circle': React$1.FC<{}>;
close: React$1.FC<{}>;
trash: React$1.FC<{}>;
tick: React$1.FC<{}>;
'add-circle': React$1.FC;
info: React$1.FC<{}>;
warning: React$1.FC<{}>;
};
type IconName = keyof typeof iconMap;
interface IconProps extends Omit, 'children'> {
name: IconName;
size?: number | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
color?: string;
className?: string;
style?: React__default.CSSProperties;
}
declare const Icon: React__default.FC;
type GlassVariant = boolean | 'subtle' | 'prominent' | 'liquid';
/**
* Returns the appropriate CSS class(es) for a glass prop value.
* When glass is falsy, returns the solid background + border classes.
* When glass is truthy, returns the corresponding glass utility class.
*/
declare function getGlassClasses(glass: GlassVariant | undefined, solidBg?: string, solidBorder?: string): string;
/**
* Resolves the effective glass variant for a component.
* Component prop takes priority over global glass mode (read from classes).
* Works without GlassProvider (backward compatible — reads DOM directly).
*/
declare function useResolvedGlass(propGlass?: GlassVariant): GlassVariant | undefined;
/**
* Badge component props
*
* @public
*
* @example
* ```tsx
* // Simple badge (Shadcn-style)
* Active
*
* // Composable API
*
*
* Active
*
*
* // Badge with count
* Notifications
*
* // Dot badge
*
*
* // With asChild
*
* Custom Badge
*
* ```
*/
interface BadgeProps extends ComposableProps<'div'> {
/**
* Badge variant for semantic coloring
* @default 'default'
*
* - `default`: Neutral gray badge
* - `error` / `danger`: Red badge for errors
* - `success`: Green badge for success states
* - `warning`: Orange badge for warnings
* - `info` / `neutral`: Blue badge for informational content
* - `normal`: Default neutral styling
*/
variant?: 'default' | 'error' | 'success' | 'warning' | 'info' | 'neutral' | 'normal' | 'danger';
/**
* Count number or custom React node to display
* When number exceeds overflowCount, shows "overflowCount+"
*/
count?: number | React__default.ReactNode;
/**
* Maximum count to display before showing "overflowCount+"
* @default 99
*/
overflowCount?: number;
/**
* Display as a dot instead of count/text
* @default false
*/
dot?: boolean;
/**
* Offset position [x, y] in pixels
* Useful for positioning badge on corners
*/
offset?: [number, number];
/**
* Status indicator variant
* Alternative to variant prop for status badges
*/
status?: 'success' | 'processing' | 'default' | 'error' | 'warning';
/**
* Badge text content
* Alternative to children prop
*/
text?: React__default.ReactNode;
/**
* Badge size
* @default 'md'
*
* Available sizes: `xs`, `sm`, `md`, `lg`
*/
size?: 'xs' | 'sm' | 'md' | 'lg';
/**
* Icon displayed before badge content
* @see {@link IconName} for available icons
*/
leadingIcon?: IconName;
/**
* Icon displayed after badge content
* @see {@link IconName} for available icons
*/
trailingIcon?: IconName;
/**
* Enable glassmorphism effect on badge background
* - `true`: Standard glass effect
* - `'subtle'`: Subtle glass effect
* - `'prominent'`: Prominent glass effect
*/
glass?: GlassVariant;
/**
* Enable hover interaction styles
* @default false
*/
interaction?: boolean;
/**
* Badge content (text or React nodes)
*/
children?: React__default.ReactNode;
}
interface BadgeRibbonProps {
className?: string;
text?: React__default.ReactNode;
placement?: 'start' | 'end';
color?: string;
children?: React__default.ReactNode;
}
declare const Ribbon: React__default.FC;
/**
* Badge Component
*
* A composable badge component for displaying status, labels, and notifications.
* Supports Shadcn-style simple API and composable API with BadgeIcon and BadgeText.
*
* @public
*
* @example
* ```tsx
* // Simple API (Shadcn-style)
* Active
*
* // Composable API
*
*
* Active
*
*
* // With asChild
*
* Custom Badge
*
* ```
*
* @remarks
* - Supports `asChild` prop for custom element composition
* - Use composable API with BadgeIcon and BadgeText for maximum flexibility
* - Automatically handles notification badges when used as wrapper
* - Accessible: maintains proper semantics
*/
declare const Badge: React__default.ForwardRefExoticComponent>;
/**
* BadgeIcon component props
*
* @public
*/
interface BadgeIconProps extends Omit, 'children'> {
/**
* Icon name from FT Design System icon library or custom React component
*/
icon?: IconName | React__default.ReactNode;
/**
* Icon size
* @default 14
*/
iconSize?: number;
/**
* Icon content (for custom icons)
*/
children?: React__default.ReactNode;
}
/**
* BadgeIcon Component
*
* A composable icon wrapper for badges.
* Can be used within Badge or standalone with asChild.
*
* @public
*
* @example
* ```tsx
* // Within Badge
*
*
* Active
*
*
* // With asChild
*
*
*
* ```
*
* @remarks
* - Supports FT Design System icons or custom React components
* - Supports `asChild` prop for custom element composition
* - Use with BadgeText for complete badge composition
*/
declare const BadgeIcon: React__default.ForwardRefExoticComponent>;
/**
* BadgeText component props
*
* @public
*/
interface BadgeTextProps extends ComposableProps<'span'> {
/**
* Text content
*/
children: React__default.ReactNode;
}
/**
* BadgeText Component
*
* A composable text wrapper for badges.
* Can be used within Badge or standalone with asChild.
*
* @public
*
* @example
* ```tsx
* // Within Badge
*
*
* Active
*
*
* // With asChild
*
* Bold Text
*
* ```
*
* @remarks
* - Wraps badge text content with consistent styling
* - Supports `asChild` prop for custom element composition
* - Use with BadgeIcon for complete badge composition
*/
declare const BadgeText: React__default.ForwardRefExoticComponent>;
interface BadgeDotProps extends Omit, 'children'> {
/** Dot color variant */
color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
/** Animate the dot (pulsing) */
pulse?: boolean;
/** Children are not supported for BadgeDot */
children?: never;
}
/**
* BadgeDot - Simple dot indicator
*
* Renders a small circular dot for notification or status indication.
*
* @public
*
* @example
* ```tsx
*
*
* New
*
* ```
*/
declare const BadgeDot: React__default.ForwardRefExoticComponent>;
interface BadgeCountProps extends ComposableProps<'span'> {
/** Count value */
count?: number;
/** Max count before showing + suffix */
overflowCount?: number;
/** Show zero count */
showZero?: boolean;
}
/**
* BadgeCount - Numeric count indicator
*
* Displays a count badge, typically for notifications or item quantities.
*
* @public
*
* @example
* ```tsx
*
*
*
*
* // Shows "99+" when count > 99
*
* ```
*/
declare const BadgeCount: React__default.ForwardRefExoticComponent>;
type BadgeStatusType = 'default' | 'success' | 'processing' | 'warning' | 'error';
interface BadgeStatusProps extends ComposableProps<'span'> {
/** Status type */
status?: BadgeStatusType;
/** Status text */
text?: React__default.ReactNode;
}
/**
* BadgeStatus - Status indicator with optional text
*
* Displays a colored status dot with optional text label.
*
* @public
*
* @example
* ```tsx
*
*
*
* ```
*/
declare const BadgeStatus: React__default.ForwardRefExoticComponent>;
declare function cn(...inputs: ClassValue[]): string;
/**
* UNIFIED COMPONENT DESIGN SYSTEM
* All components inherit from this system to ensure perfect consistency
*/
type ComponentSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
/**
* Button variant options
* @public
*/
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'text' | 'link' | 'ghost' | 'dashed';
/**
* Button size options - uses unified ComponentSize
* @public
*/
type ButtonSize = ComponentSize;
/**
* Button shape options
* @public
*/
type ButtonShape = 'default' | 'rounded';
/**
* Icon position relative to button text
* @public
*/
type IconPosition = 'leading' | 'trailing' | 'only';
/**
* Button component props
*
* @public
*
* @example
* ```tsx
* // Primary button (default variant)
*
*
* // Primary button with icon
*
*
* // Composable API with ButtonIcon and ButtonText
*
*
* // Icon-only button
*
*
* // Loading state
*
*
* // Link variant
*
*
* // With asChild
*
* ```
*/
interface ButtonProps extends Omit, 'children'> {
/**
* Visual style variant
* @default 'primary'
*
* - `primary`: Main call-to-action, dark background
* - `secondary`: Secondary actions, outlined style
* - `destructive`: Delete/dangerous actions, red
* - `text`: Text-only button, minimal styling
* - `link`: Link-style button with underline
* - `ghost`: Transparent with border, fills on hover
* - `dashed`: Dashed border style
*/
variant?: ButtonVariant;
/**
* Button size
* @default 'md'
*
* Available sizes: `xxs` (x6), `xs` (x8), `sm` (x9), `md` (x10),
* `lg` (x12), `xl` (x14), `xxl` (x16)
*/
size?: ButtonSize;
/**
* Icon name from FT Design System icon library or custom React component
* Can be an IconName string or a custom React component
* @see {@link IconName} for available icon names
*/
icon?: IconName | React__default.ReactNode;
/**
* Icon size (only applies when icon is IconName string)
* @default Based on button size
*/
iconSize?: number;
/**
* Custom className for icon wrapper (only applies when icon is IconName string)
*/
iconClassName?: string;
/**
* Icon position relative to text
* @default 'leading'
*
* - `leading`: Icon before text
* - `trailing`: Icon after text
* - `only`: Icon-only button (no text)
*/
iconPosition?: IconPosition;
/**
* Button shape
* @default 'default'
*
* - `default`: Component radius token
* - `rounded`: Rounded corners (x3)
*/
shape?: ButtonShape;
/**
* Enable glassmorphism effect (applies to secondary, text, and ghost variants)
* - `true`: Standard glass effect
* - `'subtle'`: Subtle glass effect
* - `'prominent'`: Prominent glass effect
*/
glass?: GlassVariant;
/**
* Shows loading spinner and disables button
* @default false
*/
loading?: boolean;
/**
* Button content (text or React nodes)
* Not required for icon-only buttons (`iconPosition="only"`)
*/
children?: React__default.ReactNode;
}
/**
* Button Component
*
* A versatile, composable button component with multiple variants, sizes, and icon support.
* Supports all standard HTML button attributes and accessibility features.
* Defaults to primary variant for better developer experience.
*
* @public
*
* @example
* ```tsx
* import { Button, ButtonIcon, ButtonText } from 'ft-design-system';
*
* function MyComponent() {
* return (
*
* // Default primary button
*
*
* // Composable API
*
*
* // Secondary with icon
*
*
* // Loading state
*
*
* // With asChild
*
*
* );
* }
* ```
*
* @remarks
* - Defaults to `variant="primary"` for better DX
* - Supports composable API with ButtonIcon and ButtonText sub-components
* - Supports `asChild` prop to merge props with child element
* - Automatically adapts to light/dark/night themes via CSS variables
* - Icon-only buttons are square by default, circular if `rounded-full` class is added
* - Loading state shows spinner and disables interaction
* - Accessible: includes ARIA labels and keyboard navigation support
* - AI-protected by default. Use `ft-design-system/core` for unprotected version
*/
declare const Button: React__default.ForwardRefExoticComponent>;
/**
* ButtonIcon component props
*
* @public
*/
interface ButtonIconProps extends Omit, 'children'> {
/**
* Icon name from FT Design System icon library or custom React component
* Can be an IconName string or a custom React component
*/
icon?: IconName | React__default.ReactNode;
/**
* Icon size (only applies when icon is IconName string)
*/
iconSize?: number;
/**
* Custom className for icon wrapper (only applies when icon is IconName string)
*/
iconClassName?: string;
/**
* Icon content (for custom icons)
*/
children?: React__default.ReactNode;
}
/**
* ButtonIcon Component
*
* A composable icon wrapper for buttons.
* Can be used within Button or standalone with asChild.
*
* @public
*
* @example
* ```tsx
* // Within Button
*
*
* // With asChild
*
*
*
* ```
*
* @remarks
* - Supports FT Design System icons or custom React components
* - Supports `asChild` prop for custom element composition
* - Automatically sizes icons based on button size when used within Button
*/
declare const ButtonIcon: React__default.ForwardRefExoticComponent>;
/**
* ButtonText component props
*
* @public
*/
interface ButtonTextProps extends ComposableProps<'span'> {
/**
* Text content
*/
children: React__default.ReactNode;
}
/**
* ButtonText Component
*
* A composable text wrapper for buttons.
* Can be used within Button or standalone with asChild.
*
* @public
*
* @example
* ```tsx
* // Within Button
*
*
* // With asChild
*
* Bold Text
*
* ```
*
* @remarks
* - Wraps button text content with consistent styling
* - Supports `asChild` prop for custom element composition
* - Use with ButtonIcon for complete button composition
*/
declare const ButtonText: React__default.ForwardRefExoticComponent>;
interface ButtonSpinnerProps extends ComposableProps<'span'> {
/** Icon size (defaults to 18) */
size?: number;
}
/**
* ButtonSpinner - Loading spinner for Button loading state
*
* Renders an animated spinner icon for indicating loading states.
*
* @public
*
* @example
* ```tsx
*
* ```
*
* @remarks
* - Supports `asChild` for custom spinner elements
* - Includes aria-label for accessibility
* - Automatically uses rotating animation
*/
declare const ButtonSpinner: React__default.ForwardRefExoticComponent>;
interface CheckboxProps extends Omit, 'size'> {
/**
* Checkbox content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Indeterminate state (shows minus icon instead of check)
* @default false
*/
indeterminate?: boolean;
/**
* Checkbox size
* @default 'md'
*/
size?: 'sm' | 'md';
}
/**
* Checkbox Component
*
* A versatile checkbox component with label, validation states, and helper text.
* Uses composable API with CheckboxInput, CheckboxLabel, CheckboxHelper, and CheckboxError sub-components.
*
* @public
*
* @example
* ```tsx
* // Composable API (recommended)
*
*
* Accept terms and conditions
* You can change this later
*
*
* ```
*
* @remarks
* - Composable API provides maximum flexibility and control
* - All sub-components (CheckboxInput, CheckboxLabel, CheckboxHelper, etc.) support `asChild`
* - Supports checked, unchecked, and indeterminate states
* - Automatically generates accessible IDs for labels and descriptions
* - Accessible: includes ARIA attributes and keyboard navigation
*/
declare const Checkbox: React__default.ForwardRefExoticComponent>;
interface CheckboxWrapperProps extends ComposableProps<'div'> {
/**
* The content of the checkbox wrapper.
*/
children?: React__default.ReactNode;
}
/**
* CheckboxWrapper Component
*
* A composable wrapper component that contains all Checkbox sub-components.
* Provides spacing and layout for the checkbox and its associated elements.
*
* @public
*
* @example
* ```tsx
*
*
*
* Accept terms
* Required
*
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Provides default spacing between checkbox elements.
*/
declare const CheckboxWrapper: React__default.ForwardRefExoticComponent>;
interface CheckboxInputProps extends Omit, 'type' | 'size'> {
/**
* Indeterminate state (shows minus icon instead of check)
* @default false
*/
indeterminate?: boolean;
/**
* Enable glassmorphism effect on checkbox background
* - `true`: Standard glass effect
* - `'subtle'`: Subtle glass effect
* - `'prominent'`: Prominent glass effect
*/
glass?: GlassVariant;
}
/**
* CheckboxInput Component
*
* A composable checkbox input component with custom visual styling.
* Supports checked, unchecked, and indeterminate states.
*
* @public
*
* @example
* ```tsx
*
*
* Accept terms
*
* ```
*
* @remarks
* - Wraps the HTML `` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically applies validation state styling based on context.
* - Accessible: includes ARIA attributes and keyboard navigation.
*/
declare const CheckboxInput: React__default.ForwardRefExoticComponent>;
interface CheckboxLabelProps extends ComposableProps<'span'> {
/**
* The label text.
*/
children: React__default.ReactNode;
}
/**
* CheckboxLabel Component
*
* A composable label component for Checkbox inputs.
* Automatically associates with the checkbox for accessibility.
*
* @public
*
* @example
* ```tsx
*
*
* Accept terms and conditions
*
* ```
*
* @remarks
* - Wraps the HTML `` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically styled based on checkbox state and context.
* - Accessible: maintains proper label-checkbox association.
*/
declare const CheckboxLabel: React__default.ForwardRefExoticComponent>;
interface CheckboxHelperProps extends ComposableProps<'p'> {
/**
* The helper text content.
*/
children: React__default.ReactNode;
}
/**
* CheckboxHelper Component
*
* A composable component for displaying helper text below a Checkbox.
* Provides additional context or instructions for the user.
*
* @public
*
* @example
* ```tsx
*
*
* Subscribe to newsletter
* You can unsubscribe at any time
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically sets ID for accessibility.
* - Styled with helper text color from design system.
*/
declare const CheckboxHelper: React__default.ForwardRefExoticComponent>;
interface CheckboxErrorProps extends ComposableProps<'p'> {
/**
* The error message content.
*/
children: React__default.ReactNode;
}
/**
* CheckboxError Component
*
* A composable component for displaying error messages below a Checkbox.
* Automatically applies error styling and accessibility attributes.
*
* @public
*
* @example
* ```tsx
*
*
* Accept terms
* You must accept the terms
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically sets ID and role for accessibility.
* - Styled with error color from design system.
*/
declare const CheckboxError: React__default.ForwardRefExoticComponent>;
interface CheckboxContextType {
checkboxId: string;
size: 'sm' | 'md';
disabled?: boolean;
hasError?: boolean;
descriptionId?: string;
}
declare const useCheckboxContext: () => CheckboxContextType;
interface CheckboxProviderProps {
value: CheckboxContextType;
children: React__default.ReactNode;
}
declare const CheckboxProvider: React__default.FC;
type ChipVariant = 'filled' | 'outlined';
type ChipSize = 'sm' | 'md' | 'lg';
interface ChipProps {
/** Text label */
label: string;
/** Whether the chip is selected */
selected?: boolean;
/** Visual variant */
variant?: ChipVariant;
/** Size */
size?: ChipSize;
/** Leading icon name */
icon?: IconName;
/** Whether the chip is disabled */
disabled?: boolean;
/** Callback when clicked */
onClick?: () => void;
/** Callback when close/remove is clicked */
onRemove?: (e: React__default.MouseEvent) => void;
/** Glass morphism variant */
glass?: GlassVariant;
/** Value identifier (used by ChipGroup for selection) */
value?: string;
/** Additional CSS classes */
className?: string;
}
declare const Chip: React__default.ForwardRefExoticComponent>;
interface ChipGroupProps {
/** Currently selected value(s) */
value: string | string[];
/** Callback when selection changes */
onChange: (value: string) => void;
/** Whether multiple chips can be selected */
multiple?: boolean;
/** Chip variant for all children */
variant?: ChipVariant;
/** Chip size for all children */
size?: ChipSize;
/** Glass morphism variant */
glass?: GlassVariant;
/** Whether all chips are disabled */
disabled?: boolean;
/** Additional CSS classes */
className?: string;
children: React__default.ReactNode;
}
declare const ChipGroup: React__default.ForwardRefExoticComponent>;
declare function Colors(): react_jsx_runtime.JSX.Element;
type DividerType = 'primary' | 'secondary' | 'tertiary' | 'with-label';
type DividerOrientation = 'left' | 'right' | 'center';
interface DividerProps extends ComposableProps<'div'> {
/**
* The type of divider to display
* @default 'primary'
*/
type?: DividerType;
/**
* Label to display in the middle of the divider (only for type='with-label')
*/
label?: React__default.ReactNode;
/**
* Direction of divider
* @default 'horizontal'
*/
direction?: 'horizontal' | 'vertical';
/**
* Whether line is dashed
*/
dashed?: boolean;
/**
* Position of title inside divider
* @default 'center'
*/
orientation?: DividerOrientation;
/**
* Margin for orientation
*/
orientationMargin?: string | number;
/**
* Whether to be a normal text without line if plain
*/
plain?: boolean;
children?: React__default.ReactNode;
}
/**
* Divider Component
*
* A divider component for separating content sections.
*
* @public
*
* @example
* ```tsx
*
*
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Supports horizontal and vertical orientations.
* - Supports labels for section dividers.
*/
declare const Divider: React__default.ForwardRefExoticComponent>;
declare const illustrationSources: {
overview: string;
insights: string;
workspace: string;
reports: string;
};
type IllustrationVariant = keyof typeof illustrationSources;
type IllustrationSize = 'sm' | 'md' | 'lg' | 'xl';
interface IllustrationProps extends ComposableProps<'figure'> {
variant?: IllustrationVariant;
src?: string;
alt?: string;
size?: IllustrationSize;
rounded?: 'none' | 'sm' | 'md' | 'lg';
background?: 'transparent' | 'subtle';
className?: string;
}
declare const Illustration: React__default.FC;
type SpacerSize = 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x7' | 'x8' | 'x9' | 'x10' | 'x11' | 'x12';
interface SpacerProps extends Omit, 'children'> {
/**
* Size of the spacer
* @default 'x1'
*/
size?: SpacerSize;
/**
* Whether the spacer is horizontal (width) or vertical (height)
* @default false (vertical)
*/
horizontal?: boolean;
}
/**
* Spacer Component
*
* A spacer component for adding consistent spacing between elements.
*
* @public
*
* @example
* ```tsx
*
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Supports horizontal and vertical orientations.
* - Uses FT Design System spacing tokens.
*/
declare const Spacer: React__default.ForwardRefExoticComponent>;
interface StatisticProps extends ComposableProps<'div'> {
/**
* Label placement relative to value
* @default "Below"
*/
labelPlacement?: "Below" | "Top";
/**
* Statistic content (for composable API)
*/
children?: React__default.ReactNode;
}
/**
* Statistic Component
*
* A composable component for displaying statistics with labels and values.
*
* @public
*
* @example
* ```tsx
*
* 100
* Users
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
*/
declare const Statistic: React__default.ForwardRefExoticComponent>;
interface StatisticTitleProps extends ComposableProps<'div'> {
/**
* Title text
*/
children: React__default.ReactNode;
}
/**
* StatisticTitle Component
*
* A composable component for the title/label of a statistic.
* Typically used within Statistic.
*
* @public
*
* @example
* ```tsx
*
* 100
* Users
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
*/
declare const StatisticTitle: React__default.ForwardRefExoticComponent>;
interface StatisticValueProps extends ComposableProps<'div'> {
/**
* Value text
*/
children: React__default.ReactNode;
}
/**
* StatisticValue Component
*
* A composable component for the value of a statistic.
* Typically used within Statistic.
*
* @public
*
* @example
* ```tsx
*
* 100
* Users
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
*/
declare const StatisticValue: React__default.ForwardRefExoticComponent>;
/**
* Input component props
*
* @public
*
* @example
* ```tsx
* // Composable API (recommended)
*
* Email
*
* Invalid email
*
*
* // Declarative API (deprecated)
*
* ```
*/
interface InputProps extends Omit, 'size'> {
/**
* Input content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Label text displayed above the input
*/
label?: string;
/**
* Shows mandatory indicator (*) next to label
* @default false
*/
labelMandatory?: boolean;
/**
* Shows optional indicator next to label
* @default false
*/
labelOptional?: boolean;
/**
* Shows suffix icon in label
* @default false
*/
labelSuffixIcon?: boolean;
/**
* Custom icon component for label
*/
labelIcon?: React__default.ReactNode;
/**
* Error message displayed below input
* When provided, input shows error styling
*/
error?: string;
/**
* Warning message displayed below input
* When provided, input shows warning styling
*/
warning?: string;
/**
* Success message displayed below input
* When provided, input shows success styling
*/
success?: string;
/**
* Helper text displayed below input
* Provides additional context or instructions
*/
helperText?: string;
/**
* Icon displayed on the left side of input
* Can be an IconName string or a custom React component
* @see {@link IconName} for available icon names
*/
leadingIcon?: IconName | React__default.ReactNode;
/**
* Icon displayed on the right side of input
* Can be an IconName string or a custom React component
* @see {@link IconName} for available icon names
*/
trailingIcon?: IconName | React__default.ReactNode;
/**
* Size for leading icon (only applies when leadingIcon is IconName string)
* @default Based on input size
*/
leadingIconSize?: number;
/**
* Size for trailing icon (only applies when trailingIcon is IconName string)
* @default Based on input size
*/
trailingIconSize?: number;
/**
* Additional CSS classes for leading icon container
*/
leadingIconClassName?: string;
/**
* Additional CSS classes for trailing icon container
*/
trailingIconClassName?: string;
/**
* Additional CSS classes for InputField wrapper div
*/
wrapperClassName?: string;
/**
* Additional inline styles for InputField wrapper div
*/
wrapperStyle?: React__default.CSSProperties;
/**
* Input size
* @default 'md'
*
* Available sizes: `xxs` (x4), `xs` (x6), `sm` (x8), `md` (x10),
* `lg` (x12), `xl` (x14), `xxl` (x16)
*/
size?: ComponentSize;
/**
* Visual style variant
* @default 'default'
*
* - `default`: Standard input with border
* - `filled`: Filled background style
* - `outlined`: Outlined border style
*/
variant?: 'default' | 'filled' | 'outlined';
/**
* Enable glassmorphism effect on input background
* - `true`: Standard glass effect
* - `'subtle'`: Subtle glass effect
* - `'prominent'`: Prominent glass effect
*/
glass?: GlassVariant;
}
/**
* Input Component
*
* A versatile text input component with label, validation states, icons, and helper text.
* Supports both composable API (recommended) and declarative API (deprecated).
*
* @public
*
* @example
* ```tsx
* // Composable API (recommended)
* import { Input, InputLabel, InputField, InputError, InputHelper } from 'ft-design-system';
*
* function MyForm() {
* const [email, setEmail] = useState('');
* const [error, setError] = useState('');
*
* return (
*
* Email Address
* setEmail(e.target.value)}
* leadingIcon="mail"
* placeholder="Enter your email"
* />
* {error && {error}}
* We'll never share your email
*
* );
* }
* ```
*
* @remarks
* - Composable API provides maximum flexibility and control
* - All sub-components (InputLabel, InputField, InputError, etc.) support `asChild`
* - Automatically generates accessible IDs for labels and error messages
* - Supports validation states: error, warning, success
* - Icon positioning adapts to input size
* - Accessible: includes ARIA attributes and keyboard navigation
* - Declarative API is deprecated but still functional for backward compatibility
*/
declare const Input: React__default.ForwardRefExoticComponent>;
interface InputWrapperProps extends ComposableProps<'div'> {
/**
* The content of the input wrapper.
*/
children?: React__default.ReactNode;
}
/**
* InputWrapper Component
*
* A composable wrapper component that contains all Input sub-components.
* Provides spacing and layout for the input field and its associated elements.
*
* @public
*
* @example
* ```tsx
*
*
* Email
*
* Invalid email
*
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Provides default spacing between input elements.
*/
declare const InputWrapper: React__default.ForwardRefExoticComponent>;
interface InputLabelProps extends Omit, 'htmlFor'> {
/**
* The label text.
*/
children: React__default.ReactNode;
/**
* Shows mandatory indicator (*) next to label
* @default false
*/
mandatory?: boolean;
/**
* Shows optional indicator next to label
* @default false
*/
optional?: boolean;
/**
* Shows suffix icon in label
* @default false
*/
suffixIcon?: boolean;
/**
* Custom icon component for label
*/
icon?: React__default.ReactNode;
}
/**
* InputLabel Component
*
* A composable label component for Input fields.
* Automatically associates with the input field for accessibility.
*
* @public
*
* @example
* ```tsx
*
* Email Address
*
*
* ```
*
* @remarks
* - Wraps the Label component by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically sets `htmlFor` to match the input field ID.
* - Accessible: maintains proper label-input association.
*/
declare const InputLabel: React__default.ForwardRefExoticComponent>;
interface InputFieldProps extends Omit, 'size'> {
/**
* Icon displayed on the left side of input
* Can be an IconName string or a custom React component
*/
leadingIcon?: IconName | React__default.ReactNode;
/**
* Icon displayed on the right side of input
* Can be an IconName string or a custom React component
*/
trailingIcon?: IconName | React__default.ReactNode;
/**
* Size for leading icon
*/
leadingIconSize?: number;
/**
* Size for trailing icon
*/
trailingIconSize?: number;
/**
* Additional CSS classes for leading icon container
*/
leadingIconClassName?: string;
/**
* Additional CSS classes for trailing icon container
*/
trailingIconClassName?: string;
/**
* Additional CSS classes for the wrapper div
*/
wrapperClassName?: string;
/**
* Additional inline styles for the wrapper div
*/
wrapperStyle?: React__default.CSSProperties;
/**
* Enable glassmorphism effect on input background
* - `true`: Standard glass effect
* - `'subtle'`: Subtle glass effect
* - `'prominent'`: Prominent glass effect
*/
glass?: GlassVariant;
}
/**
* InputField Component
*
* A composable input field component that wraps the HTML `` element.
* Supports icons, validation states, and all standard input attributes.
*
* @public
*
* @example
* ```tsx
*
* Email
*
*
* ```
*
* @remarks
* - Wraps the HTML `` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically applies validation state styling based on context.
* - Supports leading and trailing icons.
* - Accessible: includes ARIA attributes and keyboard navigation.
*/
declare const InputField: React__default.ForwardRefExoticComponent>;
interface InputHelperProps extends ComposableProps<'p'> {
/**
* The helper text content.
*/
children: React__default.ReactNode;
}
/**
* InputHelper Component
*
* A composable component for displaying helper text below an Input field.
* Provides additional context or instructions for the user.
*
* @public
*
* @example
* ```tsx
*
* Username
*
* Choose a unique username
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically sets ID for accessibility.
* - Styled with helper text color from design system.
*/
declare const InputHelper: React__default.ForwardRefExoticComponent>;
interface InputErrorProps extends ComposableProps<'p'> {
/**
* The error message content.
*/
children: React__default.ReactNode;
}
/**
* InputError Component
*
* A composable component for displaying error messages below an Input field.
* Automatically applies error styling and accessibility attributes.
*
* @public
*
* @example
* ```tsx
*
* Password
*
* Password must be at least 8 characters
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically sets ID and role for accessibility.
* - Styled with error color from design system.
*/
declare const InputError: React__default.ForwardRefExoticComponent>;
interface InputWarningProps extends ComposableProps<'p'> {
/**
* The warning message content.
*/
children: React__default.ReactNode;
}
/**
* InputWarning Component
*
* A composable component for displaying warning messages below an Input field.
* Automatically applies warning styling and accessibility attributes.
*
* @public
*
* @example
* ```tsx
*
* Email
*
* Please verify your email address
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically sets ID and role for accessibility.
* - Styled with warning color from design system.
*/
declare const InputWarning: React__default.ForwardRefExoticComponent>;
interface InputSuccessProps extends ComposableProps<'p'> {
/**
* The success message content.
*/
children: React__default.ReactNode;
}
/**
* InputSuccess Component
*
* A composable component for displaying success messages below an Input field.
* Automatically applies success styling and accessibility attributes.
*
* @public
*
* @example
* ```tsx
*
* Email
*
* Email verified successfully
*
* ```
*
* @remarks
* - Wraps the HTML `
` element by default.
* - Supports `asChild` prop to merge props with a custom child element.
* - Automatically sets ID and role for accessibility.
* - Styled with success color from design system.
*/
declare const InputSuccess: React__default.ForwardRefExoticComponent>;
interface InputContextType {
inputId: string;
size: ComponentSize;
variant: 'default' | 'filled' | 'outlined';
disabled?: boolean;
hasError?: boolean;
hasWarning?: boolean;
hasSuccess?: boolean;
errorId?: string;
warningId?: string;
successId?: string;
helperId?: string;
glass?: GlassVariant;
}
declare const useInputContext: () => InputContextType;
interface InputProviderProps {
value: InputContextType;
children: React__default.ReactNode;
}
declare const InputProvider: React__default.FC;
interface LabelProps extends Omit, 'as'> {
/**
* The text content of the label
*/
children: React__default.ReactNode;
/**
* Whether the field is mandatory (shows red asterisk)
*/
mandatory?: boolean;
/**
* Whether the field is optional (shows "(Optional)" text)
*/
optional?: boolean;
/**
* Whether to show a suffix icon (info/alert icon)
*/
suffixIcon?: boolean;
/**
* Custom icon to use instead of default AlertTriangle
*/
icon?: React__default.ReactNode;
/**
* HTML element to render as (default: 'label')
*/
as?: 'label' | 'span' | 'div';
/**
* Additional CSS classes
*/
className?: string;
/**
* HTML attributes for the label element
*/
htmlFor?: string;
/**
* Click handler
*/
onClick?: () => void;
}
declare const Label: React__default.FC;
type LogoName = 'ft' | 'ft-white' | 'tata-motors' | 'mdc-labs' | 'shakthi-logistics' | 'gati' | 'birla-pivot' | 'diageo' | 'diageo-white' | 'jsw-one' | 'shadowfax' | 'delhivery' | 'dhl' | 'kgc' | 'avikam' | 'safexpress' | 'bluedart' | 'tvs' | 'criticalog' | 'mec' | 'om-logistics' | 'apollo-tyres';
interface LogoProps extends ComposableProps<'div'> {
name: LogoName;
width?: number;
height?: number;
className?: string;
}
declare const Logo: React__default.FC;
interface FTLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const FTLogo: React__default.FC;
interface FTLogoWhiteProps {
width?: number;
height?: number;
className?: string;
}
declare const FTLogoWhite: React__default.FC;
interface TataMotorsLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const TataMotorsLogo: React__default.FC;
interface MDCLabsLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const MDCLabsLogo: React__default.FC;
interface ShakthiLogisticsLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const ShakthiLogisticsLogo: React__default.FC;
interface GatiLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const GatiLogo: React__default.FC;
interface BirlaPivotLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const BirlaPivotLogo: React__default.FC;
interface DiageoLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const DiageoLogo: React__default.FC;
interface DiageoWhiteLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const DiageoWhiteLogo: React__default.FC;
interface JSWOneLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const JSWOneLogo: React__default.FC;
interface ShadowfaxLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const ShadowfaxLogo: React__default.FC;
interface DelhiveryLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const DelhiveryLogo: React__default.FC;
interface DHLLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const DHLLogo: React__default.FC;
interface KGCLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const KGCLogo: React__default.FC;
interface AvikamLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const AvikamLogo: React__default.FC;
interface SafexpressLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const SafexpressLogo: React__default.FC;
interface BluedartLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const BluedartLogo: React__default.FC;
interface TVSLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const TVSLogo: React__default.FC;
interface CriticalogLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const CriticalogLogo: React__default.FC;
interface MECLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const MECLogo: React__default.FC;
interface OMLogisticsLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const OMLogisticsLogo: React__default.FC;
interface ApolloTyresLogoProps {
width?: number;
height?: number;
className?: string;
}
declare const ApolloTyresLogo: React__default.FC;
interface RadioGroupProps {
/**
* Radio group name (required for form submission)
*/
name: string;
/**
* Controlled value
*/
value?: string;
/**
* Default value (uncontrolled)
*/
defaultValue?: string;
/**
* Callback when value changes
*/
onChange?: (value: string) => void;
/**
* Callback when value changes (alias for onChange)
*/
onValueChange?: (value: string) => void;
/**
* Radio group content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Custom className
*/
className?: string;
/**
* Radio group size
* @default 'md'
*/
size?: 'sm' | 'md';
/**
* Orientation of radio items
* @default 'vertical'
*/
orientation?: 'horizontal' | 'vertical';
/**
* Disable all radio items
* @default false
*/
disabled?: boolean;
}
/**
* RadioGroup Component
*
* A versatile radio group component that allows users to select one option from a set.
* Supports both composable API (recommended) and declarative API (deprecated).
*
* @public
*
* @example
* ```tsx
* // Composable API (recommended)
*
* Select an option
*
*
* Option 1
*
*
*
* Option 2
*
* Please select an option
*
*
* ```
*
* @remarks
* - Composable API provides maximum flexibility and control
* - All sub-components (RadioItem, RadioItemInput, RadioItemLabel, etc.) support `asChild`
* - Supports controlled and uncontrolled modes
* - Automatically generates accessible IDs for labels and error messages
* - Accessible: includes ARIA attributes and keyboard navigation
*/
declare const RadioGroup: React__default.ForwardRefExoticComponent>;
declare const RadioGroupItem: ({ children, ...props }: {
children?: React__default.ReactNode;
[key: string]: any;
}) => react_jsx_runtime.JSX.Element;
interface RadioGroupLabelProps extends ComposableProps<'label'> {
/**
* The label text for the radio group.
*/
children: React__default.ReactNode;
}
/**
* RadioGroupLabel Component
*
* A composable label component for RadioGroup.
* Provides a label for the entire radio group.
*
* @public
*
* @example
* ```tsx
*
* Select an option
*
*
* Option 1
*
*
* ```
*
* @remarks
* - Wraps the HTML `