Drawer content goes here
*Modal content goes here
*` 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;
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 CompanyInfo {
name: LogoName;
displayName?: string;
}
interface UserProfileProps extends Omit, 'company' | 'userName' | 'userRole' | 'userLocation' | 'userBadge' | 'userAvatar' | 'companyName' | 'onClick'> {
company?: CompanyInfo;
userName?: string;
userRole?: string;
userLocation?: string;
userBadge?: string;
userAvatar?: string;
companyName?: boolean;
onClick?: () => void;
className?: string;
/** Glass morphism variant */
glass?: GlassVariant;
/**
* Override avatar size.
*/
avatarSize?: React__default.ComponentProps['size'];
/**
* Additional className for avatar container.
*/
avatarClassName?: string;
}
interface FooterProps extends ComposableProps<'footer'> {
/** Glassmorphism variant */
glass?: GlassVariant;
/**
* Footer content
*/
children?: React__default.ReactNode;
}
interface User {
name: string;
avatar?: string;
role?: string;
location?: string;
badge?: string;
}
type AppHeaderSize = 'xl' | 'lg' | 'md' | 'Default';
type AppHeaderDevice = 'Desktop' | 'Mobile';
interface AppHeaderProps extends Omit, 'children'> {
/** Glassmorphism variant */
glass?: GlassVariant;
size?: AppHeaderSize;
device?: AppHeaderDevice;
user?: User;
userCompany?: CompanyInfo;
onNotificationClick?: (type: 'rocket' | 'bell' | 'menu') => void;
onUserClick?: () => void;
onUserMenuItemClick?: (item: string) => void;
/** Click handler for optional theme icon shown on the right side. */
onThemeIconClick?: () => void;
/** Click handler for optional glass action icon shown on the right side. */
onGlassToggleClick?: () => void;
/** Called whenever the fullscreen/expand state changes. */
onExpandToggle?: (isExpanded: boolean) => void;
className?: string;
leftAddon?: () => React__default.ReactNode;
/**
* Pass-through props for UserProfile (e.g., avatarSize/avatarClassName)
*/
userProfileProps?: Partial;
/**
* Optional custom icon for desktop/tablet primary action slot (defaults to Rocket).
*/
rocketIcon?: React__default.ReactNode;
/**
* Optional custom icon for desktop/tablet secondary action slot (defaults to Bell).
*/
bellIcon?: React__default.ReactNode;
/**
* Optional custom icon for mobile action slot (defaults to ThreeDotMenu).
*/
menuIcon?: React__default.ReactNode;
/**
* Optional custom icon for theme action slot.
*/
themeIcon?: React__default.ReactNode;
/**
* Whether to show the theme action icon on the right side.
* @default false
*/
showThemeIcon?: boolean;
/**
* Whether to show the glass action icon on the right side.
* @default false
*/
showGlassToggle?: boolean;
/**
* Whether to show the expand/fullscreen action button on the right side.
* @default false
*/
showExpandButton?: boolean;
/**
* Controlled fullscreen/expanded state. When omitted, AppHeader manages
* fullscreen state from the browser Fullscreen API.
*/
isExpanded?: boolean;
/**
* Visual state for the glass action button.
* @default false
*/
isGlassActive?: boolean;
/**
* Optional custom icon for expand action slot.
*/
expandIcon?: React__default.ReactNode;
/**
* Optional custom icon for collapse action slot.
*/
compressIcon?: React__default.ReactNode;
}
type TabType = 'primary' | 'secondary' | 'tertiary';
type TabsOverflowBehavior = 'auto' | 'dropdown';
interface TabsProps extends Omit, 'onChange'> {
/** Glassmorphism variant */
glass?: GlassVariant;
/**
* Tabs content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Active tab index
*/
activeTab?: number;
/**
* Callback when tab changes
*/
onTabChange?: (index: number) => void;
/**
* Tab type/style variant
* @default 'primary'
*/
type?: TabType;
/**
* Show trailing line after the last tab (primary type only).
* The line fills remaining width with a bottom border.
* @default true
*/
showLine?: boolean;
/**
* Overflow behavior
* @default 'auto'
*/
overflowBehavior?: TabsOverflowBehavior;
/**
* Support asChild pattern
*/
asChild?: boolean;
}
type SortDirection = 'asc' | 'desc' | null;
type ColumnType = 'text' | 'number' | 'date' | 'actions';
type TableVariant = 'primary' | 'secondary';
type TableLayout = 'default' | 'simple';
interface TableColumn {
/**
* Unique key for the column (required)
* Used to access data from row objects
*/
key: string;
/**
* Column header text
* @alias label, header
*/
title?: string;
/**
* Column data type for sorting/formatting
* @default 'text'
*/
type?: ColumnType;
/**
* Enable column sorting
* @default false
*/
sortable?: boolean;
/**
* Column width (CSS value)
* Example: "12.5rem", "20%", "auto"
*/
width?: string;
/**
* Custom cell renderer function
* @param value - Cell value from row data
* @param row - Full row object
* @param index - Row index
* @returns React node to render in cell
*/
render?: (value: unknown, row: T, index: number) => ReactNode;
}
interface TableRow {
/**
* Unique row identifier (required)
*/
id: string | number;
/**
* Additional row data properties
*/
[key: string]: any;
}
/**
* Table component props
*
* @public
*
* @example
* ```tsx
*
*
* ```
*/
interface TableProps extends React__default.HTMLAttributes {
/**
* Table content (for composable API)
* Use TableHeader, TableBody, TableRow, TableCell components
*
* @example
* ```tsx
*
*
* ```
*/
children?: React__default.ReactNode;
/**
* Table visual variant
* @default 'primary'
*
* - `primary`: Main table style with borders
* - `secondary`: Alternative style
*/
variant?: TableVariant;
/**
* Table layout style
* @default 'default'
*
* - `default`: Standard table layout
* - `simple`: 2-column label-value pairs layout
*/
layout?: TableLayout;
/**
* Enable row selection with checkboxes
* @default false
*/
selectable?: boolean;
/**
* Currently selected row IDs
* Controlled selection state
*/
selectedRows?: (string | number)[];
/**
* Callback when selection changes
* @param selectedRows - Array of selected row IDs
*/
onSelectionChange?: (selectedRows: (string | number)[]) => void;
/**
* Callback when column is sorted
* @param column - Column key being sorted
* @param direction - Sort direction: 'asc', 'desc', or null
*/
onSort?: (column: string, direction: SortDirection) => void;
/**
* Currently sorted column key
* Controlled sort state
*/
sortColumn?: string;
/**
* Current sort direction
* Controlled sort state
*/
sortDirection?: SortDirection;
/**
* Custom accessory content for each row
* Rendered before row actions
* @param row - Row data object
* @param selected - Whether row is selected
* @returns React node
*/
rowAccessory?: (row: T, selected: boolean) => React__default.ReactNode;
/**
* Custom actions for each row
* Rendered in actions column
* @param row - Row data object
* @returns React node (typically action buttons)
*/
rowActions?: (row: T) => React__default.ReactNode;
/**
* Label for row actions column header
* @default 'Actions'
*/
rowActionsLabel?: string;
/**
* Show loading state
* @default false
*/
loading?: boolean;
/**
* Message displayed when table is empty
* @default 'No data available'
*/
emptyMessage?: string;
/**
* Table caption (accessibility)
*/
caption?: string;
/**
* Additional CSS classes
*/
className?: string;
/**
* Left header content (simple layout only)
*/
headerLeft?: React__default.ReactNode;
/**
* Right header content (simple layout only)
*/
headerRight?: React__default.ReactNode;
/**
* Enable striped row styling
* @default true
*/
striped?: boolean;
/**
* Enable column reordering via drag-and-drop
* @default false
*/
reorderable?: boolean;
/**
* Callback when columns are reordered
* @param columns - Reordered column definitions
*/
onColumnReorder?: (columns: TableColumn[]) => void;
/**
* Apply glassmorphism effect to the table header
*/
glass?: GlassVariant;
/**
* Enable sticky table header during vertical scroll
* When true, the outer wrapper becomes the scroll container
* and the thead sticks to the top.
* @default false
*/
stickyHeader?: boolean;
}
interface AddProps extends React__default.SVGProps {
width?: number | string;
height?: number | string;
}
interface IconProps$1 extends SVGProps {
size?: number;
}
declare const iconMap: {
add: React.FC;
'add-trip': React.FC<{}>;
aeroplane: React.FC<{}>;
airtel: React.FC<{}>;
'alert-critical-fill': React.FC<{}>;
'alert-critical': React.FC<{}>;
'alert-informational-fill': React.FC<{}>;
'alert-informational': React.FC<{}>;
'arrow-bottom-left': React.FC<{}>;
'arrow-left': React.FC<{}>;
'arrow-down-right': React.FC<{}>;
'arrow-down': React.FC<{}>;
'arrow-top-left': React.FC<{}>;
'arrow-top-right': React.FC<{}>;
'arrow-up': React.FC<{}>;
backward: React.ForwardRefExoticComponent & React.RefAttributes>;
bell: React.FC<{}>;
bsnl: React.FC<{}>;
'bulk-actions': React.FC<{}>;
'bulk-trip': React.FC<{}>;
bundle: React.ForwardRefExoticComponent & React.RefAttributes>;
'calendar-clock': React.FC<{}>;
calendar: React.FC<{}>;
cheap: React.FC<{}>;
'check-alt': React.FC<{}>;
'check-fill': React.FC<{}>;
check: React.FC<{}>;
'chevron-down': React.FC<{}>;
'chevron-left': React.FC<{}>;
'chevron-right': React.FC<{}>;
'chevron-up': React.FC<{}>;
clock: React.FC<{}>;
'clock-alert': React.FC<{}>;
'clock-cross': React.FC<{}>;
'clock-tick': React.FC<{}>;
'clock-warning': React.FC<{}>;
'close-filled': React.FC<{}>;
comment: React.FC<{}>;
compress: React.FC<{}>;
'consent-available': React.FC<{}>;
'consent-pending': React.FC<{}>;
'consent-rejected': React.FC<{}>;
'control-tower': React.FC<{}>;
copy: React.FC<{}>;
'cross-icon': React.FC<{}>;
cross: React.FC<{}>;
'cursor-pointer': React.FC<{}>;
dashboard: React.FC<{}>;
'data-stack': React.FC<{}>;
'default-icon': React.FC<{}>;
delete: React.FC<{}>;
'detention-at-destination': React.FC<{}>;
'detention-at-origin': React.FC<{}>;
diversion: React.FC<{}>;
division: React.FC<{}>;
'document-reuse': React.FC<{}>;
document: React.FC<{}>;
download: React.FC<{}>;
drag: React.FC<{}>;
edit: React.FC<{}>;
'eway-bill-expired': React.FC<{}>;
excel: React.FC<{}>;
expand: React.FC<{}>;
'export-file': React.FC<{}>;
'eye-invisible': React.FC<{}>;
'file-alt': React.FC<{}>;
'file-upload': React.FC<{}>;
'file-uploader': React.FC<{}>;
file: React.FC<{}>;
'fill-details': React.FC<{}>;
filter: React.FC<{}>;
flame: React.FC<{}>;
forward: React.ForwardRefExoticComponent & React.RefAttributes>;
'ft-colour': React.FC<{}>;
'ft-gray': React.FC<{}>;
glass: React.FC<{}>;
'google-colour': React.FC<{}>;
'google-gray': React.FC<{}>;
'gmail-logo': React.FC<{}>;
'google-drive': React.FC<{}>;
gps: React.FC<{}>;
gst: React.FC<{}>;
'hamburger-menu': React.FC<{}>;
hand: React.FC<{}>;
home: React.FC<{}>;
image: React.FC<{}>;
indent: React.FC<{}>;
jio: React.FC<{}>;
'light-bulb': React.FC<{}>;
link: React.FC<{}>;
loading: React.FC<{}>;
locate: React.FC<{}>;
location: React.FC<{}>;
lock: React.FC<{}>;
logout: React.FC<{}>;
'long-stoppage': React.FC<{}>;
mail: React.FC<{}>;
map: React.FC<{}>;
megaphone: React.FC<{}>;
more: React.FC<{}>;
'more-options': React.FC<{}>;
mtnl: React.FC<{}>;
'multiple-location': React.FC<{}>;
'multiple-time': React.FC<{}>;
'multiple-weight': React.FC<{}>;
'my-trip': React.FC<{}>;
navigator: React.FC<{}>;
'no-signal': React.FC<{}>;
noted: React.FC<{}>;
'octagon-alert-filled': React.FC<{}>;
'one-drive': React.FC<{}>;
notification: React.FC<{}>;
organisation: React.FC<{}>;
outbound: React.FC<{}>;
'parcel-check': React.FC<{}>;
password: React.FC<{}>;
pause: React.FC<{}>;
'pause-filled': React.FC<{}>;
pen: React.FC<{}>;
'phone-alt': React.FC<{}>;
phone: React.FC<{}>;
'plant-alt': React.FC<{}>;
plant: React.FC<{}>;
planning: React.FC<{}>;
'play-fill': React.FC<{}>;
play: React.FC<{}>;
'portable-tracking': React.FC<{}>;
'preview-fill': React.FC<{}>;
preview: React.FC<{}>;
recommended: React.FC<{}>;
refresh: React.FC<{}>;
remove: React.FC<{}>;
reports: React.FC<{}>;
road: React.FC<{}>;
rocket: React.FC<{}>;
'route-deviation': React.FC<{}>;
'round-trip': React.FC<{}>;
'rupee-coin': React.FC<{}>;
satellite: React.FC<{}>;
save: React.FC<{}>;
search: React.FC<{}>;
send: React.FC<{}>;
settlement: React.FC<{}>;
settings: React.FC<{}>;
'shake-hand': React.FC<{}>;
share: React.FC<{}>;
'shield-alert': React.FC<{}>;
ship: React.FC<{}>;
sim: React.FC<{}>;
'small-truck': React.FC<{}>;
sort: React.FC<{}>;
star: React.FC<{}>;
stop: React.FC<{}>;
streetview: React.FC<{}>;
'strength-high': React.FC<{}>;
'strength-low': React.FC<{}>;
'strength-medium': React.FC<{}>;
'strength-no-tracking': React.FC>;
subtract: React.FC<{}>;
success: React.FC<{}>;
tata: React.FC<{}>;
'temperature-cold': React.FC<{}>;
'temperature-default': React.FC<{}>;
'temperature-hot': React.FC<{}>;
'three-dot-menu': React.FC<{}>;
time: React.FC<{}>;
timer: React.FC<{}>;
tracker: React.FC<{}>;
'tracking-interrupted': React.FC<{}>;
train: React.FC<{}>;
'transit-delay': React.FC<{}>;
'triangle-alert': React.FC<{}>;
trolley: React.FC<{}>;
truck: React.FC<{}>;
untracked: React.FC<{}>;
user: React.FC<{}>;
vehicle: React.FC<{}>;
vodafone: React.FC<{}>;
warehouse: React.FC<{}>;
weight: React.FC<{}>;
whatsapp: React.FC<{}>;
'contracted-bill': React.FC<{}>;
'upload-document': React.FC<{}>;
'part-truck-load': React.FC<{}>;
reconciliation: React.FC<{}>;
burger: React.FC<{}>;
menu: React.FC<{}>;
'help-circle': React.FC<{}>;
close: React.FC<{}>;
trash: React.FC<{}>;
tick: React.FC<{}>;
'add-circle': React.FC;
info: React.FC<{}>;
warning: React.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;
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';
interface CascaderProps extends Omit, 'size' | 'onChange' | 'value'> {
/** Label text */
label?: string;
/** Whether the field is mandatory */
labelMandatory?: boolean;
/** Whether to show optional indicator */
labelOptional?: boolean;
/** Error message */
error?: string;
/** Helper text */
helperText?: string;
/** Component size */
size?: ComponentSize;
/** Selected value path */
value?: string[];
/** Default value path */
defaultValue?: string[];
/** Callback when selection changes */
onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
/** Placeholder text */
placeholder?: string;
/** Allow clearing selection */
allowClear?: boolean;
/** Expand trigger */
expandTrigger?: 'click' | 'hover';
/** Display render function */
displayRender?: (labels: React__default.ReactNode[], selectedOptions: CascaderOption[]) => React__default.ReactNode;
/** Change on select (not just leaf nodes) */
changeOnSelect?: boolean;
/** Show search */
showSearch?: boolean;
/**
* Cascader options (for composable API)
*/
children?: React__default.ReactNode;
/** Glass morphism variant */
glass?: GlassVariant;
}
interface CascaderOptionComponentProps {
/**
* Option value (required)
*/
value: string;
/**
* Option label/content
*/
children?: React__default.ReactNode;
/**
* Option label (alternative to children)
*/
label?: React__default.ReactNode;
/**
* Whether option is disabled
*/
disabled?: boolean;
/**
* Whether this is a leaf node (no children)
*/
isLeaf?: boolean;
}
interface CascaderOption {
value: string;
label: React__default.ReactNode;
disabled?: boolean;
children?: CascaderOption[];
isLeaf?: boolean;
}
/**
* CascaderOption Component
*
* A composable component for individual options in a Cascader component.
* Can be nested to create hierarchical structures.
*
* @public
*
* @example
* ```tsx
*
*
*
*
*
*
* ```
*/
declare const CascaderOption: React__default.FC;
interface TimePickerProps extends Omit, 'size' | 'onChange' | 'value'> {
/**
* Whether the time picker is disabled
*/
disabled?: boolean;
/** Label text */
label?: string;
/** Whether the field is mandatory */
labelMandatory?: boolean;
/** Whether to show optional indicator */
labelOptional?: boolean;
/** Whether to show suffix icon on label */
labelSuffixIcon?: boolean;
/** Custom label icon */
labelIcon?: React__default.ReactNode;
/** Error message */
error?: string;
/** Warning message */
warning?: string;
/** Success message */
success?: string;
/** Helper text */
helperText?: string;
/** Component size */
size?: ComponentSize;
/** Time value in HH:mm:ss or HH:mm format */
value?: string;
/** Default time value */
defaultValue?: string;
/** Called when time changes */
onChange?: (value: string) => void;
/** Time format (12 or 24 hour) */
use12Hours?: boolean;
/** Show seconds selector */
showSecond?: boolean;
/** Hour step */
hourStep?: number;
/** Minute step */
minuteStep?: number;
/** Second step */
secondStep?: number;
/** Placeholder text */
placeholder?: string;
/** Format string for display */
format?: string;
/** Allow clearing the value */
allowClear?: boolean;
/** Disabled hours (array of hours to disable) */
disabledHours?: () => number[];
/** Disabled minutes (array of minutes to disable for selected hour) */
disabledMinutes?: (selectedHour: number) => number[];
/** Disabled seconds (array of seconds to disable for selected hour and minute) */
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
/** Glass morphism variant */
glass?: GlassVariant;
}
interface SliderProps extends Omit, 'onChange' | 'defaultValue' | 'value' | 'onValueChange' | 'onValueCommit'> {
/**
* Current value (single or range) (controlled)
*/
value?: number | [number, number];
/**
* Default value (uncontrolled)
* @default 0
*/
defaultValue?: number | [number, number];
/**
* Minimum value
* @default 0
*/
min?: number;
/**
* Maximum value
* @default 100
*/
max?: number;
/**
* Step increment
* @default 1
*/
step?: number;
/**
* Enable range mode
* @default false
*/
range?: boolean;
/**
* Vertical orientation
* @default false
*/
vertical?: boolean;
/**
* Disabled state
* @default false
*/
disabled?: boolean;
/**
* Show tooltip
* @default true
*/
tooltip?: boolean | {
formatter?: (value: number) => React__default.ReactNode;
};
/**
* Track color
*/
trackColor?: string;
/**
* Rail color
*/
railColor?: string;
/**
* Change handler
*/
onChange?: (value: number | [number, number]) => void;
/**
* Change complete handler (on mouse up / keyboard commit)
*/
onChangeComplete?: (value: number | [number, number]) => void;
/**
* Slider content (for composable API)
*/
children?: React__default.ReactNode;
/**
* @deprecated Radix handles slot composition internally. Kept for API compatibility.
*/
asChild?: boolean;
}
type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
type TooltipAlignment = 'start' | 'center' | 'end';
type TooltipColor = 'white' | 'dark';
interface TooltipProps extends React__default.HTMLAttributes {
/**
* Tooltip content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Whether to show the close button
* @default false
*/
showClose?: boolean;
/**
* Callback when close button is clicked
*/
onClose?: () => void;
/**
* Tooltip placement relative to target
* @default 'top'
*/
placement?: TooltipPlacement;
/**
* Tooltip alignment along the placement edge
* @default 'center'
*/
align?: TooltipAlignment;
/**
* Color theme
* @default 'white'
*/
color?: TooltipColor;
/**
* Open state (controlled)
*/
open?: boolean;
/**
* Default open state (uncontrolled)
* @default false
*/
defaultOpen?: boolean;
}
interface PaginationProps extends Omit, 'onChange'> {
/**
* Pagination content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Current page number
*/
current: number;
/**
* Total number of items
*/
total: number;
/**
* Items per page
* @default 10
*/
pageSize?: number;
/**
* Callback when page changes
*/
onChange?: (page: number, pageSize?: number) => void;
/**
* Callback when page size changes
*/
onShowSizeChange?: (current: number, size: number) => void;
/**
* Pagination variant
* @default 'default'
*/
variant?: 'default' | 'compact';
/**
* Apply glassmorphism effect to the pagination container
*/
glass?: GlassVariant;
}
interface BreadcrumbProps extends Omit, 'onChange'> {
/**
* Breadcrumb content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Apply glassmorphism effect to the breadcrumb bar
*/
glass?: GlassVariant;
}
type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
type AlertRadius = 'none' | 'sm' | 'md' | 'lg';
interface AlertProps extends Omit, 'onChange'> {
/**
* Alert content (composable API)
*/
children?: React__default.ReactNode;
/**
* Alert variant/style
* @default 'info'
*/
variant?: AlertVariant;
/**
* Show close button
* @default false
*/
closable?: boolean;
/**
* Banner style (full width, no border radius)
* @default false
*/
banner?: boolean;
/**
* Border radius
*/
radius?: AlertRadius;
/**
* Glass morphism variant
*/
glass?: GlassVariant;
/**
* Close callback
*/
onClose?: () => void;
}
interface ButtonGroupProps extends ComposableProps<'div'> {
equalWidth?: boolean;
wrap?: boolean;
/** Glass morphism variant */
glass?: GlassVariant;
/**
* Button group content (for composable API)
*/
children?: React__default.ReactNode;
}
interface RadioSelectorProps extends Omit, 'onChange'> {
name: string;
value?: string;
defaultValue?: string;
onChange?: (value: string) => void;
/** Glass morphism variant */
glass?: GlassVariant;
/**
* Radio selector content (for composable API)
*/
children?: React__default.ReactNode;
}
interface StepsProps extends Omit, 'onChange'> {
/**
* Current step number (1-based)
* @default 1
*/
currentStep?: number;
/**
* Device type
* @default 'desktop'
*/
device?: 'desktop' | 'mobile';
/**
* Direction of steps
* @default 'horizontal'
*/
direction?: 'horizontal' | 'vertical';
/**
* Step type
* @default 'default'
*/
type?: 'default' | 'dot' | 'navigation';
/**
* Callback when step changes
*/
onChange?: (current: number) => void;
/**
* Steps content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Apply glassmorphism effect to the steps container
*/
glass?: GlassVariant;
}
interface SegmentedTabsProps extends Omit, 'onChange'> {
/** Glassmorphism variant */
glass?: GlassVariant;
value?: string;
defaultValue?: string;
onChange?: (value: string) => void;
variant?: 'default' | 'icon-only';
/**
* Segmented tabs content (for composable API)
*/
children?: React__default.ReactNode;
}
interface SegmentedTabItemProps extends React__default.ButtonHTMLAttributes {
/**
* Tab value (required)
*/
value: string;
/**
* Tab label
*/
label?: string;
/**
* Tab icon
*/
icon?: React__default.ReactNode;
/**
* Whether this tab is selected
*/
selected?: boolean;
/**
* Variant type
*/
variant?: 'default' | 'icon-only';
}
interface SegmentedTabItem {
label: string;
value: string;
icon?: React__default.ReactNode;
}
/**
* SegmentedTabItem Component
*
* A composable component for individual tabs in a SegmentedTabs.
*
* @public
*
* @example
* ```tsx
*
*
* ```
*/
declare const SegmentedTabItem: React__default.ForwardRefExoticComponent>;
type ProgressType = 'line' | 'circle' | 'dashboard';
type ProgressStatus = 'primary' | 'success' | 'warning' | 'danger' | 'active';
interface ProgressBarProps extends React__default.HTMLAttributes {
/** Progress value 0-100 */
value?: number;
/** 🆕 NEW: Progress type - line, circle, or dashboard */
type?: ProgressType;
/** Color variant */
variant?: ProgressStatus;
/** Size for line type */
size?: 'sm' | 'md' | 'lg';
/** 🆕 NEW: Width/diameter for circle/dashboard (default: 120) */
width?: number;
/** 🆕 NEW: Stroke width for circle/dashboard */
strokeWidth?: number;
/** 🆕 NEW: Trail (background) color */
trailColor?: string;
/** 🆕 NEW: Stroke color (overrides variant) */
strokeColor?: string;
/** 🆕 NEW: Custom format function for percentage */
format?: (percent: number) => React__default.ReactNode;
/** Enable animation */
animated?: boolean;
/** 🆕 NEW: Gap degree for dashboard type (0-295) */
gapDegree?: number;
/** 🆕 NEW: Gap position for dashboard */
gapPosition?: 'top' | 'bottom' | 'left' | 'right';
/** 🆕 NEW: Number of steps */
steps?: number;
}
declare const dropdownMenuVariants: (props?: ({
property?: "default" | "search" | "search-segmented" | "disabled-info" | "groups" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
interface DropdownMenuProps extends Omit, 'onSelect' | 'property'> {
/**
* Menu property type
* @default 'default'
*/
property?: VariantProps['property'];
/**
* Show scroll bar
* @default false
*/
showScrollBar?: boolean;
/**
* Additional CSS classes
*/
className?: string;
/**
* Select handler
*/
onSelect?: (value: string) => void;
/**
* Segments for segmented search
*/
segments?: SegmentedTabItem[];
/**
* Selected segment
*/
selectedSegment?: string;
/**
* Segment change handler
*/
onSegmentChange?: (value: string) => void;
/**
* DropdownMenu content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Glass morphism variant
*/
glass?: GlassVariant;
}
declare const dropdownFieldVariants: (props?: ({
size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | null | undefined;
state?: "default" | "disabled" | "error" | null | undefined;
type?: "normal" | "search" | "groups" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
interface DropdownProps extends VariantProps {
/**
* Selected value
*/
value?: string | number;
/**
* Placeholder text
*/
placeholder?: string;
/**
* Component size
* @default 'md'
*/
size?: ComponentSize;
/**
* Component state
* @default 'default'
*/
state?: 'default' | 'error' | 'disabled';
/**
* Dropdown type
* @default 'normal'
*/
type?: 'normal' | 'search' | 'groups';
/**
* Additional CSS classes
*/
className?: string;
/**
* Change handler
*/
onChange?: (value: string | number) => void;
/**
* Search handler
*/
onSearch?: (query: string) => void;
/**
* Label mandatory indicator
*/
labelMandatory?: boolean;
/**
* Label optional indicator
*/
labelOptional?: boolean;
/**
* Label suffix icon
*/
labelSuffixIcon?: boolean;
/**
* Label icon
*/
labelIcon?: React__default.ReactNode;
/**
* Label position
* @default 'top'
*/
labelPosition?: 'top' | 'left';
/**
* Error message
*/
error?: string;
/**
* Helper text
*/
helperText?: string;
/**
* Required indicator
*/
required?: boolean;
/**
* Segments for segmented search
*/
segments?: SegmentedTabItem[];
/**
* Selected segment
*/
selectedSegment?: string;
/**
* Segment change handler
*/
onSegmentChange?: (value: string) => void;
/**
* Dropdown content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Custom portal container for the dropdown menu.
* Use this when you need deterministic positioning (e.g., app-level portal node).
*/
portalContainer?: HTMLElement;
/**
* Optional ID assigned to the portal container.
*/
portalId?: string;
/**
* Extra class name applied to the portal wrapper.
*/
portalClassName?: string;
/**
* Additional inline styles applied to the portal wrapper.
*/
portalStyle?: React__default.CSSProperties;
/**
* Additional class name applied to the `DropdownMenu`.
*/
menuClassName?: string;
/**
* Additional inline styles applied to the `DropdownMenu`.
*/
menuStyle?: React__default.CSSProperties;
/**
* Glass morphism variant
*/
glass?: GlassVariant;
}
interface QuickSelectOption {
label: string;
value: string;
/**
* Custom range resolver for quick select options.
* If provided, this is used instead of built-in presets.
*/
getRange?: (today: Date) => [Date, Date] | {
start: Date;
end: Date;
};
}
declare const datePickerFieldVariants: (props?: ({
size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "m" | "l" | null | undefined;
state?: "default" | "filled" | "disabled" | "hover" | "focused" | "prefilled" | "typing" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
/**
* DatePicker component props
*
* @public
*
* @example
* ```tsx
* // Single date picker
* setDate(value)}
* />
*
* // Date range picker
* {
/**
* Label position relative to input
* @default 'top'
*/
labelPosition?: 'top' | 'left';
/**
* Placeholder text when no date is selected
*/
placeholder?: string;
/**
* Selected date value (ISO string format)
* Controlled component value
*/
value?: string;
/**
* Callback when date changes
* @param value - Selected date as ISO string
*/
onChange?: (value: string) => void;
/**
* Disable the date picker
* @default false
*/
disabled?: boolean;
/**
* Show error state styling
* @default false
*/
error?: boolean;
/**
* Enable date range selection
* @default false
*/
range?: boolean;
/**
* Start date value for range picker (ISO string)
*/
startValue?: string;
/**
* End date value for range picker (ISO string)
*/
endValue?: string;
/**
* Callback when start date changes
* @param value - Start date as ISO string
*/
onStartChange?: (value: string) => void;
/**
* Callback when end date changes
* @param value - End date as ISO string
*/
onEndChange?: (value: string) => void;
/**
* Additional CSS classes
*/
className?: string;
/**
* Include dropdown calendar picker
* @default false
*/
includeDropdown?: boolean;
/**
* Preset options shown in the range dropdown menu
*/
dropdownPresets?: string[];
/**
* Callback when dropdown preset changes (range mode only).
*/
onDropdownPresetChange?: (preset: string) => void;
/**
* CSS class applied to the portal container wrapping the calendar popup
*/
portalClassName?: string;
/**
* Inline styles applied to the portal container
*/
portalStyle?: React__default.CSSProperties;
/**
* Override the portal container element ID (defaults to 'datepicker-portal-container')
*/
portalContainerId?: string;
/**
* Quick select options shown in the left sidebar (range mode only)
* @default [{ label: 'This week', value: 'this-week' }, { label: 'Next week', value: 'next-week' }, { label: 'This month', value: 'this-month' }, { label: 'Next month', value: 'next-month' }]
* Use `getRange` to provide custom date ranges.
*/
quickSelectOptions?: QuickSelectOption[];
/**
* DatePicker content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Glass morphism variant
*/
glass?: GlassVariant;
}
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;
}
type SpinSize = 'sm' | 'md' | 'lg' | 'xl';
interface SpinProps extends ComposableProps<'div'> {
/** Size of the spinner */
size?: SpinSize;
/** Tip text shown below spinner */
tip?: string;
/** Whether to show spinner */
spinning?: boolean;
/** Delay before showing spinner (ms) */
delay?: number;
/** Custom spinner indicator */
indicator?: React__default.ReactNode;
/** Content to wrap with spinner */
children?: React__default.ReactNode;
/** Whether to use full screen mode */
fullscreen?: boolean;
}
interface SkeletonProps extends ComposableProps<'div'> {
variant?: 'text' | 'circular' | 'rectangular';
width?: string | number;
height?: string | number;
animation?: 'pulse' | 'wave' | 'none';
}
type ToggleSize = 'sm' | 'md' | 'lg';
type ToggleVariant = 'default' | 'outline';
interface ToggleProps extends ComposableProps<'button'> {
pressed?: boolean;
onPressedChange?: (pressed: boolean) => void;
defaultPressed?: boolean;
size?: ToggleSize;
variant?: ToggleVariant;
disabled?: boolean;
icon?: IconName;
/**
* Enable glassmorphism effect on toggle container background
* - `true`: Standard glass effect
* - `'subtle'`: Subtle glass effect
* - `'prominent'`: Prominent glass effect
*/
glass?: GlassVariant;
children?: React__default.ReactNode;
}
interface TextareaProps extends Omit, 'size'> {
/**
* Textarea content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Textarea size
* @default 'md'
*/
size?: ComponentSize;
}
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;
}
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;
}
interface SubTextProps {
/**
* Whether to show the check icon
*/
icon?: "Yes" | "No";
/**
* Additional CSS classes
*/
className?: string;
}
interface TextProps {
/**
* Whether to show sub text
*/
subText?: boolean;
/**
* Whether to show leading icon
*/
leadingIcon?: boolean;
/**
* Whether to show trailing icon
*/
trailingIcon?: boolean;
/**
* Text size variant
*/
size?: "sm" | "md" | "lg" | "xl" | "xx";
/**
* Additional CSS classes
*/
className?: string;
}
interface StatisticProps extends ComposableProps<'div'> {
/**
* Label placement relative to value
* @default "Below"
*/
labelPlacement?: "Below" | "Top";
/**
* Statistic content (for composable API)
*/
children?: React__default.ReactNode;
}
type TypographyVariant = 'title-primary' | 'title-secondary' | 'display-primary' | 'button' | 'body-primary-semibold' | 'body-primary-medium' | 'body-primary-italic' | 'body-primary-regular' | 'body-secondary-semibold' | 'body-secondary-medium' | 'body-secondary-regular';
type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'danger' | 'success' | 'warning';
interface TypographyProps extends Omit, 'as'> {
variant?: TypographyVariant;
color?: TypographyColor;
as?: keyof JSX.IntrinsicElements;
children: React__default.ReactNode;
}
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;
}
interface SwitchProps extends Omit, 'size'> {
/**
* Switch content (for composable API)
*/
children?: React__default.ReactNode;
/**
* Switch size
* @default 'md'
*/
size?: 'sm' | 'md';
}
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';
}
/**
* Badge component props
*
* @public
*
* @example
* ```tsx
* // Simple badge (Shadcn-style)
* Active
*
* // Composable API
*
* Active
*
*
* // Badge with count
* Notifications
*
* // Dot badge
*
* 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;
}
/**
* 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;
}
/**
* 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;
}
interface SelectProps {
/**
* Selected value
*/
value?: string;
/**
* Callback when value changes
*/
onValueChange?: (value: string) => void;
/**
* Select content
*/
children: React__default.ReactNode;
/**
* Default value (uncontrolled)
*/
defaultValue?: string;
/**
* Apply glassmorphism effect
*/
glass?: GlassVariant;
}
/**
* Select Component
*
* Shadcn-compatible composable select component.
* Provides context for SelectTrigger, SelectValue, SelectContent, and SelectItem components.
*
* @public
*
* @example
* ```tsx
*
* ```
*/
declare const Select: React__default.FC;
type Theme = 'light' | 'dark' | 'night' | 'origin-ui';
type ThemeInput = Theme | 'system';
type GlassMode = false | 'subtle' | true | 'prominent' | 'liquid';
interface FTProviderProps {
/**
* Child components to wrap
*/
children: React.ReactNode;
/**
* Theme mode to use. Pass `'system'` to follow the OS preference.
* @default 'system'
*/
theme?: ThemeInput;
/**
* Glassmorphism mode
* @default false
*/
glass?: GlassMode;
/**
* Whether to automatically inject CSS
* When true, injects styles via a tag if not already present
* @default true
*/
injectCSS?: boolean;
/**
* CDN URL for CSS (used when injectCSS is true)
* @default 'https://unpkg.com/ft-design-system@latest/dist/styles.css'
*/
cssUrl?: string;
/**
* Additional class names to apply to the wrapper
*/
className?: string;
/**
* localStorage key used to persist the theme
* @default 'ft-theme'
*/
themeStorageKey?: string;
/**
* localStorage key used to persist the glass mode
* @default 'ft-glass-mode'
*/
glassStorageKey?: string;
}
interface ThemeContextType {
theme: Theme;
setTheme: (theme: Theme) => void;
isLight: boolean;
isDark: boolean;
isNight: boolean;
isOriginUi: boolean;
}
interface GlassContextType {
glassMode: GlassMode;
setGlassMode: (mode: GlassMode) => void;
}
interface FTThemeContextType extends ThemeContextType, GlassContextType {
}
/**
* FT Design System Provider
*
* Unified provider that handles:
* - Automatic CSS injection (optional)
* - Theme management (light/dark/night/system) with localStorage persistence
* - Glassmorphism mode with localStorage persistence
* - Theme class on `` element
* - System theme detection and media-query listener
*
* @public
*
* @example
* ```tsx
* import { FTProvider } from 'ft-design-system';
*
* function App() {
* return (
*
*
* );
* }
* ```
*/
declare const FTProvider: React.FC;
/**
* Unified hook — returns theme + glass state.
* Works safely outside FTProvider (returns DOM-based defaults with dev warnings).
*/
declare function useFTTheme(): FTThemeContextType;
/**
* Backward-compatible hook matching the old ThemeContext shape.
*/
declare function useTheme(): ThemeContextType;
/**
* Backward-compatible hook matching the old GlassContext shape.
*/
declare function useGlass(): GlassContextType;
/** @deprecated Use `` instead. */
interface ThemeProviderProps {
children: React.ReactNode;
defaultTheme?: Theme;
storageKey?: string;
}
/**
* @deprecated Use `` instead. This component wraps FTProvider for
* backward compatibility only.
*/
declare const ThemeProvider: React.FC;
/** @deprecated Use `` instead. */
interface GlassProviderProps {
children: React.ReactNode;
defaultGlass?: GlassMode;
storageKey?: string;
}
/**
* @deprecated Use `` instead. This component wraps FTProvider for
* backward compatibility only.
*/
declare const GlassProvider: React.FC;
interface ThemeSwitchProps {
className?: string;
variant?: 'segmented' | 'dropdown';
showLabels?: boolean;
/** Glass morphism variant */
glass?: GlassVariant;
}
declare const ThemeSwitch: React__default.FC;
declare const designTokens: {
baseColors: {
lightMode: {
primary900: string;
primary800: string;
primary700: string;
primary600: string;
primary500: string;
primary400: string;
primary300: string;
primary200: string;
primary100: string;
secondary900: string;
secondary800: string;
secondary700: string;
secondary600: string;
secondary500: string;
secondary400: string;
secondary300: string;
secondary200: string;
secondary100: string;
tertiary900: string;
tertiary800: string;
tertiary700: string;
tertiary600: string;
tertiary500: string;
tertiary400: string;
tertiary300: string;
tertiary200: string;
tertiary100: string;
tertiary0: string;
neutral900: string;
neutral800: string;
neutral700: string;
neutral600: string;
neutral500: string;
neutral400: string;
neutral300: string;
neutral200: string;
neutral100: string;
positive900: string;
positive800: string;
positive700: string;
positive600: string;
positive500: string;
positive400: string;
positive300: string;
positive200: string;
positive100: string;
warning900: string;
warning800: string;
warning700: string;
warning600: string;
warning500: string;
warning400: string;
warning300: string;
warning200: string;
warning100: string;
danger900: string;
danger800: string;
danger700: string;
danger600: string;
danger500: string;
danger400: string;
danger300: string;
danger200: string;
danger100: string;
teal950: string;
teal900: string;
teal800: string;
teal700: string;
teal600: string;
teal500: string;
teal400: string;
teal300: string;
teal200: string;
teal100: string;
teal50: string;
indigo950: string;
indigo900: string;
indigo800: string;
indigo700: string;
indigo600: string;
indigo500: string;
indigo400: string;
indigo300: string;
indigo200: string;
indigo100: string;
indigo50: string;
blue950: string;
blue900: string;
blue800: string;
blue700: string;
blue600: string;
blue500: string;
blue400: string;
blue300: string;
blue200: string;
blue100: string;
blue50: string;
pink950: string;
pink900: string;
pink800: string;
pink700: string;
pink600: string;
pink500: string;
pink400: string;
pink300: string;
pink200: string;
pink100: string;
pink50: string;
};
darkMode: {
primary900: string;
primary800: string;
primary700: string;
primary600: string;
primary500: string;
primary400: string;
primary300: string;
primary200: string;
primary100: string;
secondary900: string;
secondary800: string;
secondary700: string;
secondary600: string;
secondary500: string;
secondary400: string;
secondary300: string;
secondary200: string;
secondary100: string;
tertiary900: string;
tertiary800: string;
tertiary700: string;
tertiary600: string;
tertiary500: string;
tertiary400: string;
tertiary300: string;
tertiary200: string;
tertiary100: string;
tertiary0: string;
neutral900: string;
neutral800: string;
neutral700: string;
neutral600: string;
neutral500: string;
neutral400: string;
neutral300: string;
neutral200: string;
neutral100: string;
positive900: string;
positive800: string;
positive700: string;
positive600: string;
positive500: string;
positive400: string;
positive300: string;
positive200: string;
positive100: string;
warning900: string;
warning800: string;
warning700: string;
warning600: string;
warning500: string;
warning400: string;
warning300: string;
warning200: string;
warning100: string;
danger900: string;
danger800: string;
danger700: string;
danger600: string;
danger500: string;
danger400: string;
danger300: string;
danger200: string;
danger100: string;
teal950: string;
teal900: string;
teal800: string;
teal700: string;
teal600: string;
teal500: string;
teal400: string;
teal300: string;
teal200: string;
teal100: string;
teal50: string;
indigo950: string;
indigo900: string;
indigo800: string;
indigo700: string;
indigo600: string;
indigo500: string;
indigo400: string;
indigo300: string;
indigo200: string;
indigo100: string;
indigo50: string;
blue950: string;
blue900: string;
blue800: string;
blue700: string;
blue600: string;
blue500: string;
blue400: string;
blue300: string;
blue200: string;
blue100: string;
blue50: string;
pink950: string;
pink900: string;
pink800: string;
pink700: string;
pink600: string;
pink500: string;
pink400: string;
pink300: string;
pink200: string;
pink100: string;
pink50: string;
};
nightMode: {
primary900: string;
primary800: string;
primary700: string;
primary600: string;
primary500: string;
primary400: string;
primary300: string;
primary200: string;
primary100: string;
secondary900: string;
secondary800: string;
secondary700: string;
secondary600: string;
secondary500: string;
secondary400: string;
secondary300: string;
secondary200: string;
secondary100: string;
tertiary900: string;
tertiary800: string;
tertiary700: string;
tertiary600: string;
tertiary500: string;
tertiary400: string;
tertiary300: string;
tertiary200: string;
tertiary100: string;
tertiary0: string;
neutral900: string;
neutral800: string;
neutral700: string;
neutral600: string;
neutral500: string;
neutral400: string;
neutral300: string;
neutral200: string;
neutral100: string;
positive900: string;
positive800: string;
positive700: string;
positive600: string;
positive500: string;
positive400: string;
positive300: string;
positive200: string;
positive100: string;
warning900: string;
warning800: string;
warning700: string;
warning600: string;
warning500: string;
warning400: string;
warning300: string;
warning200: string;
warning100: string;
danger900: string;
danger800: string;
danger700: string;
danger600: string;
danger500: string;
danger400: string;
danger300: string;
danger200: string;
danger100: string;
teal950: string;
teal900: string;
teal800: string;
teal700: string;
teal600: string;
teal500: string;
teal400: string;
teal300: string;
teal200: string;
teal100: string;
teal50: string;
indigo950: string;
indigo900: string;
indigo800: string;
indigo700: string;
indigo600: string;
indigo500: string;
indigo400: string;
indigo300: string;
indigo200: string;
indigo100: string;
indigo50: string;
blue950: string;
blue900: string;
blue800: string;
blue700: string;
blue600: string;
blue500: string;
blue400: string;
blue300: string;
blue200: string;
blue100: string;
blue50: string;
pink950: string;
pink900: string;
pink800: string;
pink700: string;
pink600: string;
pink500: string;
pink400: string;
pink300: string;
pink200: string;
pink100: string;
pink50: string;
};
originUiMode: {
primary900: string;
primary800: string;
primary700: string;
primary600: string;
primary500: string;
primary400: string;
primary300: string;
primary200: string;
primary100: string;
secondary900: string;
secondary800: string;
secondary700: string;
secondary600: string;
secondary500: string;
secondary400: string;
secondary300: string;
secondary200: string;
secondary100: string;
tertiary900: string;
tertiary800: string;
tertiary700: string;
tertiary600: string;
tertiary500: string;
tertiary400: string;
tertiary300: string;
tertiary200: string;
tertiary100: string;
tertiary0: string;
neutral900: string;
neutral800: string;
neutral700: string;
neutral600: string;
neutral500: string;
neutral400: string;
neutral300: string;
neutral200: string;
neutral100: string;
positive900: string;
positive800: string;
positive700: string;
positive600: string;
positive500: string;
positive400: string;
positive300: string;
positive200: string;
positive100: string;
warning900: string;
warning800: string;
warning700: string;
warning600: string;
warning500: string;
warning400: string;
warning300: string;
warning200: string;
warning100: string;
danger900: string;
danger800: string;
danger700: string;
danger600: string;
danger500: string;
danger400: string;
danger300: string;
danger200: string;
danger100: string;
teal950: string;
teal900: string;
teal800: string;
teal700: string;
teal600: string;
teal500: string;
teal400: string;
teal300: string;
teal200: string;
teal100: string;
teal50: string;
indigo950: string;
indigo900: string;
indigo800: string;
indigo700: string;
indigo600: string;
indigo500: string;
indigo400: string;
indigo300: string;
indigo200: string;
indigo100: string;
indigo50: string;
blue950: string;
blue900: string;
blue800: string;
blue700: string;
blue600: string;
blue500: string;
blue400: string;
blue300: string;
blue200: string;
blue100: string;
blue50: string;
pink950: string;
pink900: string;
pink800: string;
pink700: string;
pink600: string;
pink500: string;
pink400: string;
pink300: string;
pink200: string;
pink100: string;
pink50: string;
};
};
colors: {
primary: string;
secondary: string;
tertiary: string;
border: {
primary: string;
secondary: string;
};
bg: {
primary: string;
secondary: string;
};
themes: {
light: {
primary: string;
secondary: string;
tertiary: string;
border: {
primary: string;
secondary: string;
};
bg: {
primary: string;
secondary: string;
};
critical: string;
warning: string;
positive: string;
neutral: string;
white: string;
black: string;
};
dark: {
primary: string;
secondary: string;
tertiary: string;
border: {
primary: string;
secondary: string;
};
bg: {
primary: string;
secondary: string;
};
critical: string;
warning: string;
positive: string;
neutral: string;
white: string;
black: string;
};
night: {
primary: string;
secondary: string;
tertiary: string;
border: {
primary: string;
secondary: string;
};
bg: {
primary: string;
secondary: string;
};
critical: string;
warning: string;
positive: string;
neutral: string;
white: string;
black: string;
};
'origin-ui': {
primary: string;
secondary: string;
tertiary: string;
border: {
primary: string;
secondary: string;
};
bg: {
primary: string;
secondary: string;
};
critical: string;
warning: string;
positive: string;
neutral: string;
white: string;
black: string;
};
};
dark: {
100: string;
50: string;
25: string;
};
legacyBorder: string;
divider: string;
background: string;
white: string;
critical: {
default: string;
dark: string;
light: string;
};
warning: {
default: string;
dark: string;
light: string;
};
positive: {
default: string;
dark: string;
light: string;
};
neutral: {
default: string;
dark: string;
light: string;
};
overlay: {
light: {
strong: string;
medium: string;
light: string;
};
dark: {
strong: string;
medium: string;
light: string;
};
night: {
strong: string;
medium: string;
light: string;
};
'origin-ui': {
strong: string;
medium: string;
light: string;
};
controls: {
light: {
bg: string;
hover: string;
divider: string;
text: string;
};
dark: {
bg: string;
hover: string;
divider: string;
text: string;
};
night: {
bg: string;
hover: string;
divider: string;
text: string;
};
'origin-ui': {
bg: string;
hover: string;
divider: string;
text: string;
};
};
};
glass: {
light: {
bg: string;
bgSubtle: string;
bgProminent: string;
border: string;
borderSubtle: string;
shadow: string;
shadowLg: string;
blur: string;
blurLg: string;
blurSm: string;
saturate: string;
};
dark: {
bg: string;
bgSubtle: string;
bgProminent: string;
border: string;
borderSubtle: string;
shadow: string;
shadowLg: string;
blur: string;
blurLg: string;
blurSm: string;
saturate: string;
};
night: {
bg: string;
bgSubtle: string;
bgProminent: string;
border: string;
borderSubtle: string;
shadow: string;
shadowLg: string;
blur: string;
blurLg: string;
blurSm: string;
saturate: string;
};
'origin-ui': {
bg: string;
bgSubtle: string;
bgProminent: string;
border: string;
borderSubtle: string;
shadow: string;
shadowLg: string;
blur: string;
blurLg: string;
blurSm: string;
saturate: string;
};
};
};
typography: {
fontFamily: {
primary: string;
secondary: string;
};
fontWeight: {
regular: string;
medium: string;
semibold: string;
};
fontSize: {
desktop: {
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
tablet: {
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
rem: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
xxl: string;
};
};
lineHeight: {
tight: string;
normal: string;
relaxed: string;
};
};
spacing: {
x0: string;
x1: string;
x2: string;
x3: string;
x4: string;
x5: string;
x6: string;
x7: string;
x8: string;
x9: string;
x10: string;
x11: string;
x12: string;
x13: string;
x14: string;
x15: string;
x16: string;
x20: string;
x24: string;
x38: string;
rem: {
x0: string;
x1: string;
x2: string;
x3: string;
x4: string;
x5: string;
x6: string;
x7: string;
x8: string;
x9: string;
x10: string;
x11: string;
x12: string;
x13: string;
x14: string;
x15: string;
x16: string;
x20: string;
x24: string;
x38: string;
};
};
borderRadius: {
none: string;
sm: string;
md: string;
lg: string;
xl: string;
full: string;
circle: string;
};
shadows: {
sm: string;
md: string;
lg: string;
xl: string;
};
gradients: {
blushPeach: string;
lavenderPink: string;
peachLilac: string;
creamPeach: string;
honeyCoral: string;
pinkSky: string;
roseMist: string;
mintSky: string;
neonMint: string;
sandLavender: string;
};
chartGlow: {
blurSm: string;
blurMd: string;
blurLg: string;
alphaPrimary: string;
alphaSecondary: string;
};
transitions: {
fast: string;
normal: string;
slow: string;
};
layout: {
breakpoints: {
xxl: string;
xl: string;
lg: string;
md: string;
sm: string;
xs: string;
};
grid: {
desktop: {
columns: number;
gutter: string;
margin: string;
};
laptop: {
columns: number;
gutter: string;
margin: string;
};
mobile: {
columns: number;
gutter: string;
margin: string;
};
};
};
};
declare const cssVariables: string;
/**
* AI UTILITIES FOR FT DESIGN SYSTEM
*
* This module provides utilities for AI tools to work better with FT Design System.
* These utilities are separate from core components to keep them clean and lightweight.
*/
/**
* Filters out problematic classes that AI tools might add
* This prevents manual height overrides, border radius, and color overrides
* that would break the design system's consistency
*/
declare function filterAIClasses(className?: string): string;
/**
* Enhanced cn function that automatically filters AI-generated problematic classes
* Use this instead of regular cn for components that need AI protection
*/
declare function cnSafe(...inputs: ClassValue[]): string;
/**
* Filters out problematic inline styles that AI tools might add
* This prevents manual height, border-radius, and color overrides via style prop
*/
declare function filterAIStyles(style?: React__default.CSSProperties): React__default.CSSProperties | undefined;
/**
* Higher-order component that adds AI protection to any component
* This filters out problematic props that AI tools might add
*/
declare function withAIProtection
(Component: React__default.ComponentType
| React__default.ForwardRefExoticComponent
): {
(props: P): React__default.ReactElement