arco-clone-react 1.3.0

package/dist/index.d.ts

@@ -0,0 +1,1383 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1, { SVGProps, ReactNode, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+
+interface ColorScale {
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+}
+interface ColorPalette {
+    primary: ColorScale;
+    blue: ColorScale;
+    cyan: ColorScale;
+    gold: ColorScale;
+    gray: ColorScale;
+    green: ColorScale;
+    lime: ColorScale;
+    magenta: ColorScale;
+    orange: ColorScale;
+    'orange-red': ColorScale;
+    'pink-purple': ColorScale;
+    purple: ColorScale;
+    red: ColorScale;
+    yellow: ColorScale;
+    black: string;
+    white: string;
+}
+declare const lightColors: ColorPalette;
+declare const darkColors: ColorPalette;
+type ThemeMode = 'light' | 'dark';
+declare const colors: {
+    light: ColorPalette;
+    dark: ColorPalette;
+};
+
+interface TypographyStyle {
+    fontSize: number;
+    fontFamily: string;
+    fontWeight: number;
+    lineHeight: number;
+    letterSpacing: number;
+}
+interface FontSizeScale {
+    regular?: TypographyStyle;
+    medium?: TypographyStyle;
+    bold?: TypographyStyle;
+}
+interface TypographyTokens {
+    fontFamily: {
+        base: string;
+        heading: string;
+        monospace: string;
+    };
+    fontSize: {
+        xs: FontSizeScale;
+        sm: FontSizeScale;
+        base: FontSizeScale;
+        md: FontSizeScale;
+        lg: FontSizeScale;
+        xl: FontSizeScale;
+        '2xl': FontSizeScale;
+        '3xl': FontSizeScale;
+        '4xl': FontSizeScale;
+    };
+}
+declare const typography: TypographyTokens;
+declare const fontWeights: {
+    readonly regular: 400;
+    readonly medium: 600;
+    readonly bold: 700;
+};
+declare function pxToRem(px: number): string;
+declare function getLineHeight(lineHeight: number, fontSize: number): number;
+declare function createTypographyStyle(style: TypographyStyle): {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: number;
+    letterSpacing: string;
+};
+
+/**
+ * Design System Shadow Tokens
+ * Generated from Figma design tokens
+ */
+interface Shadow {
+    offsetX: number;
+    offsetY: number;
+    blur: number;
+    spread: number;
+    color: string;
+    inset?: boolean;
+}
+interface ShadowTokens {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+}
+/**
+ * Elevation-based shadow system
+ * Following a consistent elevation scale for UI depth
+ */
+declare const shadows: ShadowTokens;
+/**
+ * Component-specific shadows from Figma
+ * These are exact shadows defined in the design system
+ */
+declare const componentShadows: {
+    dropdown: {
+        level1: string;
+        level2: string;
+    };
+    backToTop: string;
+    handle: string;
+    tabs: {
+        innerTop: string;
+        innerBottom: string;
+        innerLeft: string;
+        innerRight: string;
+        dividerTop: string;
+        dividerBottom: string;
+        dividerLeft: string;
+        dividerRight: string;
+    };
+    dropShadow: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+};
+/**
+ * Helper function to create a custom shadow
+ */
+declare function createShadow(shadow: Shadow): string;
+/**
+ * Helper function to combine multiple shadows
+ */
+declare function combineShadows(...shadows: string[]): string;
+/**
+ * Helper to convert hex color with alpha to rgba
+ */
+declare function hexToRgba(hex: string): string;
+/**
+ * Raw shadow values from Figma
+ * These preserve the exact values from the design tokens
+ */
+declare const rawShadows: {
+    dropdown: {
+        level1: {
+            offsetX: number;
+            offsetY: number;
+            blur: number;
+            spread: number;
+            color: string;
+        };
+        level2: {
+            offsetX: number;
+            offsetY: number;
+            blur: number;
+            spread: number;
+            color: string;
+        };
+    };
+    backToTop: {
+        offsetX: number;
+        offsetY: number;
+        blur: number;
+        spread: number;
+        color: string;
+    };
+    handle: {
+        offsetX: number;
+        offsetY: number;
+        blur: number;
+        spread: number;
+        color: string;
+    };
+};
+
+/**
+ * Spacing Tokens
+ * Based on Arco Design System 4px baseline grid
+ *
+ * Spacing scale derived from Arco's Space component sizes:
+ * - mini (xs): 4px
+ * - small (sm): 8px
+ * - medium (md): 16px
+ * - large (lg): 24px
+ *
+ * Extended with additional scales for larger spacing needs.
+ */
+interface SpacingTokens {
+    0: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+    '5xl': number;
+}
+/**
+ * Spacing scale values in pixels
+ */
+declare const spacing: SpacingTokens;
+type SpacingKey = keyof SpacingTokens;
+type SpacingValue = SpacingTokens[SpacingKey];
+/**
+ * Get spacing value in pixels
+ * @param key - The spacing key
+ * @returns The spacing value in pixels
+ *
+ * @example
+ * ```ts
+ * getSpacing('md') // 16
+ * getSpacing('lg') // 24
+ * ```
+ */
+declare function getSpacing(key: SpacingKey): number;
+/**
+ * Get spacing value in rem units (base 16px)
+ * @param key - The spacing key
+ * @returns The spacing value in rem
+ *
+ * @example
+ * ```ts
+ * getSpacingRem('md') // '1rem'
+ * getSpacingRem('lg') // '1.5rem'
+ * ```
+ */
+declare function getSpacingRem(key: SpacingKey): string;
+/**
+ * Create a spacing style object for a given property
+ * @param property - The CSS property (margin or padding)
+ * @param value - The spacing key or number value
+ * @returns A style object with the spacing applied
+ *
+ * @example
+ * ```ts
+ * createSpacingStyle('margin', 'md') // { margin: '16px' }
+ * createSpacingStyle('padding', 32) // { padding: '32px' }
+ * ```
+ */
+declare function createSpacingStyle(property: 'margin' | 'padding', value: SpacingKey | number): Record<string, string>;
+
+/**
+ * Breakpoint Tokens
+ * Based on Arco Design System responsive breakpoints
+ *
+ * Breakpoint values:
+ * - xs: < 576px (Extra small devices - phones)
+ * - sm: ≥ 576px (Small devices - large phones, small tablets)
+ * - md: ≥ 768px (Medium devices - tablets)
+ * - lg: ≥ 992px (Large devices - small desktops)
+ * - xl: ≥ 1200px (Extra large devices - desktops)
+ * - xxl: ≥ 1600px (Extra extra large devices - large desktops)
+ * - xxxl: ≥ 2000px (Triple extra large devices - ultra-wide displays)
+ */
+interface BreakpointTokens {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+}
+/**
+ * Breakpoint values in pixels
+ * Following Arco Design System's 7-level responsive system
+ */
+declare const breakpoints: BreakpointTokens;
+type Breakpoint = keyof BreakpointTokens;
+type BreakpointValue = BreakpointTokens[Breakpoint];
+/**
+ * Breakpoint order from smallest to largest
+ * Used for resolving responsive values
+ */
+declare const breakpointOrder: Breakpoint[];
+/**
+ * Get a media query string for a given breakpoint
+ * @param breakpoint - The breakpoint key
+ * @returns A media query string, or empty string for 'xs'
+ *
+ * @example
+ * ```ts
+ * getMediaQuery('md') // '@media (min-width: 768px)'
+ * getMediaQuery('xs') // ''
+ * ```
+ */
+declare function getMediaQuery(breakpoint: Breakpoint): string;
+/**
+ * Check if a breakpoint is currently active (client-side only)
+ * @param breakpoint - The breakpoint key
+ * @returns Whether the breakpoint is active
+ *
+ * @example
+ * ```ts
+ * isBreakpointActive('md') // true if window width >= 768px
+ * ```
+ */
+declare function isBreakpointActive(breakpoint: Breakpoint): boolean;
+/**
+ * Get the current active breakpoint (client-side only)
+ * Returns the largest breakpoint that matches the current window width
+ *
+ * @returns The current breakpoint
+ *
+ * @example
+ * ```ts
+ * getCurrentBreakpoint() // 'lg' if window width is 1100px
+ * ```
+ */
+declare function getCurrentBreakpoint(): Breakpoint;
+
+/**
+ * Layout Tokens
+ * Container max-widths, padding, and grid configuration
+ * Based on Arco Design System grid specifications
+ */
+
+interface ContainerTokens {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+}
+/**
+ * Container max-widths at each breakpoint
+ * Values are slightly smaller than breakpoint to provide comfortable margins
+ *
+ * Strategy:
+ * - xs: Full width on mobile
+ * - sm: 540px (576 - 36px margin)
+ * - md: 720px (768 - 48px margin)
+ * - lg: 960px (992 - 32px margin)
+ * - xl: 1152px (1200 - 48px margin)
+ * - xxl: 1536px (1600 - 64px margin)
+ * - xxxl: 1920px (2000 - 80px margin)
+ */
+declare const containerMaxWidths: ContainerTokens;
+/**
+ * Container padding at each breakpoint (in pixels)
+ * Provides breathing room on smaller screens
+ */
+declare const containerPadding: BreakpointTokens;
+/**
+ * Grid configuration interface
+ */
+interface GridConfig {
+    columns: number;
+    gutterBase: number;
+    gutterSizes: Record<string, number>;
+}
+/**
+ * Grid configuration
+ * Arco Design uses a 24-column grid system
+ */
+declare const gridConfig: GridConfig;
+
+/**
+ * Responsive Type Definitions
+ * Types for responsive properties and layout system
+ */
+
+/**
+ * Responsive value type
+ * Can be a single value or an object with breakpoint-specific values
+ *
+ * @example
+ * ```ts
+ * // Single value
+ * const gutter: ResponsiveValue<number> = 16;
+ *
+ * // Responsive object
+ * const gutter: ResponsiveValue<number> = { xs: 8, md: 16, lg: 24 };
+ * ```
+ */
+type ResponsiveValue<T> = T | Partial<Record<Breakpoint, T>>;
+/**
+ * Responsive number type
+ * For numeric values that can be responsive (span, offset, etc.)
+ */
+type ResponsiveNumber = ResponsiveValue<number>;
+/**
+ * Responsive spacing type
+ * For spacing values using spacing tokens or numbers
+ */
+type ResponsiveSpacing = ResponsiveValue<SpacingKey | number>;
+/**
+ * Responsive boolean type
+ * For boolean flags that can be responsive
+ */
+type ResponsiveBoolean = ResponsiveValue<boolean>;
+/**
+ * Alignment types for flexbox and grid
+ */
+type AlignItems = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/**
+ * Justify content types for flexbox and grid
+ */
+type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+/**
+ * Flex direction types
+ */
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+/**
+ * Flex wrap types
+ */
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+/**
+ * Common props interface for layout components
+ */
+interface ResponsiveProps {
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+
+/**
+ * Responsive Utilities
+ * Helper functions for working with responsive values
+ */
+
+/**
+ * Resolve a responsive value to a single value based on current breakpoint
+ * Finds the nearest defined value at or below the current breakpoint
+ *
+ * @param value - The responsive value to resolve
+ * @param currentBreakpoint - Optional specific breakpoint to resolve for (defaults to current)
+ * @returns The resolved value
+ *
+ * @example
+ * ```ts
+ * resolveResponsiveValue({ xs: 8, md: 16, lg: 24 }, 'lg') // 24
+ * resolveResponsiveValue({ xs: 8, lg: 24 }, 'md') // 8 (nearest defined)
+ * resolveResponsiveValue(16) // 16 (not responsive)
+ * ```
+ */
+declare function resolveResponsiveValue<T>(value: ResponsiveValue<T>, currentBreakpoint?: Breakpoint): T;
+/**
+ * Generate responsive CSS properties with media queries
+ *
+ * @param property - The CSS property name
+ * @param value - The responsive value
+ * @param formatter - Optional formatter function to convert value to CSS string
+ * @returns An object with the base value and responsive properties
+ *
+ * @example
+ * ```ts
+ * generateResponsiveStyles('gap', { xs: 8, md: 16 }, (v) => `${v}px`)
+ * // Returns: { 'gap-xs': '8px', 'gap-md': '16px' }
+ * ```
+ */
+declare function generateResponsiveStyles<T>(property: string, value: ResponsiveValue<T>, formatter?: (val: T) => string): Record<string, string>;
+/**
+ * Get all defined breakpoints from a responsive value
+ *
+ * @param value - The responsive value
+ * @returns Array of breakpoints that have defined values
+ *
+ * @example
+ * ```ts
+ * getDefinedBreakpoints({ xs: 8, md: 16, xl: 24 })
+ * // Returns: ['xs', 'md', 'xl']
+ * ```
+ */
+declare function getDefinedBreakpoints<T>(value: ResponsiveValue<T>): Breakpoint[];
+
+/**
+ * Classname Utilities
+ * Helper functions for working with CSS class names
+ */
+/**
+ * Combine multiple class names, filtering out falsy values
+ * Similar to the popular 'classnames' or 'clsx' libraries
+ *
+ * @param classes - Array of class names (can include undefined, null, false)
+ * @returns A single space-separated string of valid class names
+ *
+ * @example
+ * ```ts
+ * classNames('foo', 'bar') // 'foo bar'
+ * classNames('foo', undefined, 'bar', null, false) // 'foo bar'
+ * classNames('foo', condition && 'bar') // 'foo bar' or 'foo'
+ * ```
+ */
+declare function classNames(...classes: (string | undefined | null | false)[]): string;
+/**
+ * Create responsive class names by appending breakpoint modifiers
+ *
+ * @param baseClass - The base class name
+ * @param breakpoints - Array of breakpoint suffixes
+ * @returns A space-separated string of responsive class names
+ *
+ * @example
+ * ```ts
+ * responsiveClassName('grid', ['xs', 'md'])
+ * // Returns: 'grid grid--xs grid--md'
+ * ```
+ */
+declare function responsiveClassName(baseClass: string, breakpoints: string[]): string;
+
+/**
+ * Style Utilities
+ * Helper functions for working with CSS styles
+ */
+
+/**
+ * Convert spacing key or number to pixel string
+ *
+ * @param value - Spacing token key or number
+ * @returns Pixel value as a string
+ *
+ * @example
+ * ```ts
+ * toPixels('md') // '16px'
+ * toPixels(32) // '32px'
+ * ```
+ */
+declare function toPixels(value: SpacingKey | number): string;
+/**
+ * Merge multiple style objects into one
+ * Later objects override earlier ones
+ *
+ * @param styles - Array of style objects (can include undefined)
+ * @returns Merged style object
+ *
+ * @example
+ * ```ts
+ * mergeStyles({ color: 'red' }, { fontSize: '16px' })
+ * // Returns: { color: 'red', fontSize: '16px' }
+ *
+ * mergeStyles({ color: 'red' }, undefined, { color: 'blue' })
+ * // Returns: { color: 'blue' }
+ * ```
+ */
+declare function mergeStyles(...styles: (React.CSSProperties | undefined)[]): React.CSSProperties;
+/**
+ * Create a CSS custom property (CSS variable) object
+ *
+ * @param name - The variable name (without -- prefix)
+ * @param value - The variable value
+ * @returns An object with the CSS variable
+ *
+ * @example
+ * ```ts
+ * cssVar('grid-gutter', 16)
+ * // Returns: { '--grid-gutter': '16' }
+ * ```
+ */
+declare function cssVar(name: string, value: string | number): Record<string, string>;
+
+/**
+ * Container Component Types
+ */
+interface ContainerProps {
+    /** Content to be contained */
+    children: React.ReactNode;
+    /** Full width without max-width constraint */
+    fluid?: boolean;
+    /** Custom max-width (overrides responsive max-widths) */
+    maxWidth?: string | number;
+    /** Remove default padding */
+    disablePadding?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Element type to render as */
+    as?: React.ElementType;
+}
+
+declare function Container({ children, fluid, maxWidth, disablePadding, className, style, as: Component, }: ContainerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Grid Component Types
+ */
+
+interface GridProps {
+    /** Grid items */
+    children: React.ReactNode;
+    /**
+     * Gutter spacing between grid items
+     * Can be a single value or [horizontal, vertical] tuple
+     */
+    gutter?: ResponsiveSpacing | [ResponsiveSpacing, ResponsiveSpacing];
+    /** Vertical alignment of grid items */
+    align?: AlignItems;
+    /** Horizontal distribution of grid items */
+    justify?: JustifyContent;
+    /** Full width without constraints */
+    fluid?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Element type to render as */
+    as?: React.ElementType;
+}
+interface GridItemProps {
+    /** Grid item content */
+    children?: React.ReactNode;
+    /**
+     * Number of columns to span (out of 24)
+     * Can be responsive: { xs: 24, md: 12, lg: 8 }
+     */
+    span?: ResponsiveNumber;
+    /**
+     * Number of columns to offset
+     * Can be responsive: { xs: 0, md: 2 }
+     */
+    offset?: ResponsiveNumber;
+    /**
+     * Order of the grid item
+     * Can be responsive: { xs: 2, md: 1 }
+     */
+    order?: ResponsiveNumber;
+    /** Flex property override */
+    flex?: string | number;
+    /** Responsive span shortcuts */
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    xxl?: number;
+    xxxl?: number;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Element type to render as */
+    as?: React.ElementType;
+}
+
+declare function Grid({ children, gutter, align, justify, className, style, as: Component, }: GridProps): react_jsx_runtime.JSX.Element;
+
+declare function GridItem({ children, span, offset, order, flex, xs, sm, md, lg, xl, xxl, xxxl, className, style, as: Component, }: GridItemProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Stack Component Types
+ */
+
+interface StackProps {
+    /** Stack items */
+    children: React.ReactNode;
+    /** Stack direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Spacing between items */
+    spacing?: ResponsiveSpacing;
+    /** Vertical alignment of items */
+    align?: AlignItems;
+    /** Horizontal distribution of items */
+    justify?: JustifyContent;
+    /** Allow items to wrap */
+    wrap?: boolean;
+    /** Divider to render between items */
+    divider?: React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Element type to render as */
+    as?: React.ElementType;
+}
+
+declare function Stack({ children, direction, spacing, align, justify, wrap, divider, className, style, as: Component, }: StackProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Inline Component Types
+ */
+
+interface InlineProps {
+    /** Inline items */
+    children: React.ReactNode;
+    /** Spacing between items */
+    spacing?: ResponsiveSpacing;
+    /** Vertical alignment of items */
+    align?: AlignItems;
+    /** Horizontal distribution of items */
+    justify?: JustifyContent;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Element type to render as */
+    as?: React.ElementType;
+}
+
+declare function Inline({ children, spacing, align, justify, className, style, as: Component, }: InlineProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Flex Component Types
+ */
+
+interface FlexProps {
+    /** Flex items */
+    children: React.ReactNode;
+    /** Flex direction */
+    direction?: FlexDirection;
+    /** Flex wrap behavior */
+    wrap?: FlexWrap;
+    /** Vertical alignment of items */
+    align?: AlignItems;
+    /** Horizontal distribution of items */
+    justify?: JustifyContent;
+    /** Gap between items */
+    gap?: ResponsiveSpacing;
+    /** Render as inline-flex instead of flex */
+    inline?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Element type to render as */
+    as?: React.ElementType;
+}
+
+declare function Flex({ children, direction, wrap, align, justify, gap, inline, className, style, as: Component, }: FlexProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Icon Component Types
+ *
+ * Shared types for all icon components in the design system.
+ */
+
+/**
+ * Supported icon sizes based on design system specifications
+ */
+type IconSize = 10 | 12 | 14 | 16 | 18 | 20 | 22 | 24 | 32 | 48;
+/**
+ * Props for icon components
+ */
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> {
+    /**
+     * Size of the icon in pixels
+     * @default 24
+     */
+    size?: IconSize;
+    /**
+     * Fill color for the icon
+     * @default '#4E5969'
+     */
+    color?: string;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+
+/**
+ * Generic Icon Component
+ *
+ * A higher-order component that accepts an icon name and renders
+ * the corresponding icon component with dynamic size and color props.
+ *
+ * Usage:
+ * <Icon name="ArrowDown" size={32} color="#FF5733" />
+ */
+
+/**
+ * All available icon names
+ */
+type IconName = 'ArrowDown' | 'ArrowFall' | 'ArrowLeft' | 'ArrowRight' | 'ArrowRise' | 'ArrowUp' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'DoubleDown' | 'DoubleLeft' | 'DoubleRight' | 'DoubleUp' | 'Down' | 'DownCircle' | 'DragArrow' | 'Expand' | 'Left' | 'LeftCircle' | 'MenuFold' | 'MenuUnfold' | 'Right' | 'RightCircle' | 'RotateLeft' | 'RotateRight' | 'Shrink' | 'Swap' | 'ToBottom' | 'ToLeft' | 'ToRight' | 'ToTop' | 'Up' | 'UpCircle' | 'AlignCenter' | 'AlignLeft' | 'AlignRight' | 'BgColors' | 'Bold' | 'Brush' | 'Circular' | 'Copy' | 'Delete' | 'Edit' | 'Eraser' | 'Filter' | 'FindReplace' | 'FontColors' | 'Formula' | 'H1' | 'H2' | 'H3' | 'H4' | 'H5' | 'H6' | 'H7' | 'Highlight' | 'Italic' | 'LineHeight' | 'Link' | 'ObliqueLine' | 'OrderedList' | 'OriginalSize' | 'Paste' | 'Quote' | 'Redo' | 'Scissor' | 'Sort' | 'SortAscending' | 'SortDescending' | 'Strikethrough' | 'Underline' | 'Undo' | 'UnorderedList' | 'ZoomIn' | 'ZoomOut' | 'Application' | 'Apps' | 'Archive' | 'Book' | 'Branch' | 'Bug' | 'Bulb' | 'Calendar' | 'Camera' | 'Cloud' | 'Command' | 'Common' | 'Compass' | 'Copyright' | 'Dashboard' | 'Desktop' | 'Dice' | 'DragDot' | 'DragDotVertical' | 'DriveFile' | 'Ear' | 'Email' | 'Empty' | 'Experiment' | 'FaceFrownFill' | 'FaceMehFill' | 'File' | 'FileAudio' | 'FileImage' | 'FilePdf' | 'FileVideo' | 'Fire' | 'Folder' | 'FolderAdd' | 'FolderDelete' | 'Gift' | 'Idcard' | 'Image' | 'ImageClose' | 'Interaction' | 'Language' | 'Layout' | 'Loading' | 'Location' | 'Lock' | 'Loop' | 'Man' | 'Menu' | 'MindMapping' | 'Mobile' | 'Moon' | 'MoonFill' | 'Mosaic' | 'Nav' | 'Notification' | 'NotificationClose' | 'OldVersion' | 'Pen' | 'PenFill' | 'Phone' | 'Printer' | 'Public' | 'Pushpin' | 'Qrcode' | 'Robot' | 'RobotAdd' | 'Safe' | 'Schedule' | 'Shake' | 'Skin' | 'Stamp' | 'Storage' | 'Subscribe' | 'SubscribeAdd' | 'Subscribed' | 'Sun' | 'SunFill' | 'Tag' | 'Tags' | 'Thunderbolt' | 'Tool' | 'Trophy' | 'Unlock' | 'User' | 'UserAdd' | 'UserGroup' | 'VideoCamera' | 'Wifi' | 'Woman' | 'At' | 'CloudDownload' | 'Code' | 'CodeBlock' | 'CodeSquare' | 'CustomerService' | 'Download' | 'Export' | 'Eye' | 'EyeInvisible' | 'Heart' | 'History' | 'Home' | 'Import' | 'Launch' | 'List' | 'Message' | 'MessageBanned' | 'More' | 'MoreVertical' | 'Poweroff' | 'Refresh' | 'Reply' | 'Save' | 'Scan' | 'Search' | 'SelectAll' | 'Send' | 'Settings' | 'ShareAlt' | 'ShareExternal' | 'ShareInternal' | 'Star' | 'StarFill' | 'Sync' | 'ThumbDown' | 'ThumbDownFill' | 'ThumbUp' | 'ThumbUpFill' | 'Translate' | 'Upload' | 'Voice' | 'Backward' | 'Forward' | 'Fullscreen' | 'FullscreenExit' | 'LiveBroadcast' | 'Music' | 'Mute' | 'MuteFill' | 'PauseCircle' | 'PauseCircleFill' | 'PlayArrow' | 'PlayArrowFill' | 'PlayCircle' | 'PlayCircleFill' | 'Record' | 'RecordStop' | 'SkipNextFill' | 'SkipPreviousFill' | 'Sound' | 'SoundFill' | 'Check' | 'CheckCircle' | 'CheckCircleFill' | 'CheckSquare' | 'ClockCircle' | 'Close' | 'CloseCircle' | 'CloseCircleFill' | 'Exclamation' | 'ExclamationCircle' | 'ExclamationCircleFill' | 'ExclamationPolygonFill' | 'Info' | 'InfoCircle' | 'InfoCircleFill' | 'Minus' | 'MinusCircle' | 'MinusCircleFill' | 'Plus' | 'PlusCircle' | 'PlusCircleFill' | 'Question' | 'QuestionCircle' | 'QuestionCircleFill' | 'Stop';
+/**
+ * Props for the generic Icon component
+ */
+interface GenericIconProps extends IconProps {
+    /**
+     * Name of the icon to render
+     */
+    name: IconName;
+}
+/**
+ * Icon Component
+ *
+ * Generic icon component that dynamically renders the specified icon.
+ *
+ * @example
+ * // Basic usage
+ * <Icon name="ArrowDown" />
+ *
+ * @example
+ * // With custom size and color
+ * <Icon name="Settings" size={32} color="#FF5733" />
+ */
+declare const Icon: React$1.FC<GenericIconProps>;
+
+/**
+ * Badge Component Types
+ *
+ * Types for the Badge component based on design system specifications.
+ */
+
+/**
+ * Badge color variants based on semantic design tokens
+ */
+type BadgeVariant = 'primary' | 'success' | 'warning' | 'danger' | 'default';
+/**
+ * Badge size options
+ */
+type BadgeSize = 'small' | 'medium' | 'large';
+/**
+ * Props for the Badge component
+ */
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Content to display inside the badge
+     */
+    children?: ReactNode;
+    /**
+     * Visual variant of the badge
+     * @default 'default'
+     */
+    variant?: BadgeVariant;
+    /**
+     * Size of the badge
+     * @default 'medium'
+     */
+    size?: BadgeSize;
+    /**
+     * Whether to show the badge as a dot (without text)
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+}
+
+/**
+ * Badge Component
+ *
+ * A badge component for displaying status, counts, or labels.
+ */
+
+/**
+ * Badge component for displaying status indicators, counts, or labels
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="primary">New</Badge>
+ * <Badge variant="success" size="small">99+</Badge>
+ * <Badge variant="danger" dot />
+ * ```
+ */
+declare const Badge: React$1.FC<BadgeProps>;
+
+/**
+ * Button Component Types
+ *
+ * Types for the Button component based on design system specifications.
+ */
+
+/**
+ * Button variants based on semantic design tokens
+ */
+type ButtonVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'ghost';
+/**
+ * Button size options
+ */
+type ButtonSize = 'small' | 'medium' | 'large';
+/**
+ * Props for the Button component
+ */
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * Content to display inside the button
+     */
+    children?: ReactNode;
+    /**
+     * Visual variant of the button
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Size of the button
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should take full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is in loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * HTML button type
+     * @default 'button'
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Click event handler
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+/**
+ * Button Component
+ *
+ * A button component for user interactions with various styles and states.
+ */
+
+/**
+ * Button component for user interactions
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" onClick={() => console.log('clicked')}>
+ *   Click me
+ * </Button>
+ * <Button variant="success" size="large" fullWidth>
+ *   Submit
+ * </Button>
+ * <Button variant="danger" loading>
+ *   Loading...
+ * </Button>
+ * ```
+ */
+declare const Button: React$1.FC<ButtonProps>;
+
+/**
+ * Collapse Component Types
+ *
+ * Types for the Collapse component based on design system specifications.
+ */
+
+/**
+ * Collapse size options
+ */
+type CollapseSize = 'small' | 'medium' | 'large';
+/**
+ * Props for the Collapse component
+ */
+interface CollapseProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> {
+    /**
+     * Content to display in the collapse header
+     */
+    header: ReactNode;
+    /**
+     * Content to display when expanded
+     */
+    children: ReactNode;
+    /**
+     * Whether the collapse is expanded (controlled mode)
+     */
+    expanded?: boolean;
+    /**
+     * Default expanded state (uncontrolled mode)
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Whether the collapse is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Size of the collapse
+     * @default 'medium'
+     */
+    size?: CollapseSize;
+    /**
+     * Whether to show the border
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Callback when expand state changes
+     */
+    onChange?: (expanded: boolean) => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional CSS class name for header
+     */
+    headerClassName?: string;
+    /**
+     * Additional CSS class name for content
+     */
+    contentClassName?: string;
+}
+
+/**
+ * Collapse Component
+ *
+ * A collapse/accordion component for expandable content sections.
+ */
+
+/**
+ * Collapse component for expandable content sections
+ *
+ * @example
+ * ```tsx
+ * <Collapse header="Click to expand">
+ *   Hidden content here
+ * </Collapse>
+ * <Collapse header="Controlled" expanded={isOpen} onChange={setIsOpen}>
+ *   Controlled content
+ * </Collapse>
+ * <Collapse header="Large size" size="large" defaultExpanded>
+ *   Pre-expanded content
+ * </Collapse>
+ * ```
+ */
+declare const Collapse: React$1.FC<CollapseProps>;
+
+/**
+ * Tabs Component Types
+ *
+ * Types for the Tabs component based on design system specifications.
+ */
+
+/**
+ * Tabs size options
+ */
+type TabsSize = 'small' | 'medium' | 'large';
+/**
+ * Tabs variant options
+ */
+type TabsVariant = 'line' | 'card' | 'pill';
+/**
+ * Tab item configuration
+ */
+interface TabItem {
+    /**
+     * Unique key for the tab
+     */
+    key: string;
+    /**
+     * Label to display in the tab
+     */
+    label: ReactNode;
+    /**
+     * Content to display when tab is active
+     */
+    content: ReactNode;
+    /**
+     * Whether the tab is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon to display in the tab (optional)
+     */
+    icon?: ReactNode;
+}
+/**
+ * Props for the Tabs component
+ */
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Array of tab items
+     */
+    items: TabItem[];
+    /**
+     * Active tab key (controlled mode)
+     */
+    activeKey?: string;
+    /**
+     * Default active tab key (uncontrolled mode)
+     */
+    defaultActiveKey?: string;
+    /**
+     * Callback when active tab changes
+     */
+    onChange?: (activeKey: string) => void;
+    /**
+     * Size of the tabs
+     * @default 'medium'
+     */
+    size?: TabsSize;
+    /**
+     * Visual variant of the tabs
+     * @default 'line'
+     */
+    variant?: TabsVariant;
+    /**
+     * Whether tabs should take full width
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional CSS class name for tab list
+     */
+    tabListClassName?: string;
+    /**
+     * Additional CSS class name for tab content
+     */
+    contentClassName?: string;
+    /**
+     * Whether to animate tab changes
+     * @default true
+     */
+    animated?: boolean;
+}
+
+/**
+ * Tabs Component
+ *
+ * A tabs component for organizing content into switchable panels.
+ */
+
+/**
+ * Tabs component for organizing content into switchable panels
+ *
+ * @example
+ * ```tsx
+ * <Tabs items={[
+ *   { key: '1', label: 'Tab 1', content: <div>Content 1</div> },
+ *   { key: '2', label: 'Tab 2', content: <div>Content 2</div> }
+ * ]} />
+ *
+ * <Tabs
+ *   variant="card"
+ *   size="large"
+ *   activeKey={activeKey}
+ *   onChange={setActiveKey}
+ *   items={items}
+ * />
+ * ```
+ */
+declare const Tabs: React$1.FC<TabsProps>;
+
+/**
+ * Carousel Component Types
+ *
+ * Types for the Carousel component based on design system specifications.
+ */
+
+/**
+ * Carousel size options
+ */
+type CarouselSize = 'small' | 'medium' | 'large';
+/**
+ * Carousel item configuration
+ */
+interface CarouselItem {
+    /**
+     * Unique key for the carousel item
+     */
+    key: string;
+    /**
+     * Content to display in the carousel item
+     */
+    content: ReactNode;
+    /**
+     * Alternative text for accessibility
+     */
+    alt?: string;
+}
+/**
+ * Props for the Carousel component
+ */
+interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Array of carousel items
+     */
+    items: CarouselItem[];
+    /**
+     * Active item index (controlled mode)
+     */
+    activeIndex?: number;
+    /**
+     * Default active item index (uncontrolled mode)
+     * @default 0
+     */
+    defaultActiveIndex?: number;
+    /**
+     * Callback when active item changes
+     */
+    onChange?: (index: number) => void;
+    /**
+     * Size of the carousel
+     * @default 'medium'
+     */
+    size?: CarouselSize;
+    /**
+     * Whether to show navigation arrows
+     * @default true
+     */
+    showArrows?: boolean;
+    /**
+     * Whether to show dot indicators
+     * @default true
+     */
+    showDots?: boolean;
+    /**
+     * Whether to enable infinite loop
+     * @default true
+     */
+    infinite?: boolean;
+    /**
+     * Whether to enable autoplay
+     * @default false
+     */
+    autoplay?: boolean;
+    /**
+     * Autoplay interval in milliseconds
+     * @default 3000
+     */
+    autoplayInterval?: number;
+    /**
+     * Whether to pause autoplay on hover
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Whether to enable swipe/drag gestures
+     * @default true
+     */
+    swipeable?: boolean;
+    /**
+     * Whether to animate transitions
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Animation duration in milliseconds
+     * @default 300
+     */
+    animationDuration?: number;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional CSS class name for carousel items
+     */
+    itemClassName?: string;
+    /**
+     * Additional CSS class name for navigation arrows
+     */
+    arrowClassName?: string;
+    /**
+     * Additional CSS class name for dot indicators
+     */
+    dotsClassName?: string;
+}
+
+/**
+ * Carousel Component
+ *
+ * A carousel component for displaying a rotating set of content.
+ */
+
+/**
+ * Carousel component for displaying a rotating set of content
+ *
+ * @example
+ * ```tsx
+ * <Carousel items={[
+ *   { key: '1', content: <div>Slide 1</div>, alt: 'First slide' },
+ *   { key: '2', content: <div>Slide 2</div>, alt: 'Second slide' }
+ * ]} />
+ *
+ * <Carousel
+ *   items={items}
+ *   autoplay
+ *   infinite
+ *   showArrows
+ *   showDots
+ * />
+ * ```
+ */
+declare const Carousel: React$1.FC<CarouselProps>;
+
+/**
+ * useSwipe Hook
+ *
+ * A reusable hook for handling swipe/drag gestures on both touch and mouse devices.
+ */
+interface UseSwipeOptions {
+    /**
+     * Whether swipe/drag is enabled
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Minimum distance in pixels to trigger a swipe
+     * @default 50
+     */
+    threshold?: number;
+    /**
+     * Callback when swiping/dragging left
+     */
+    onSwipeLeft?: () => void;
+    /**
+     * Callback when swiping/dragging right
+     */
+    onSwipeRight?: () => void;
+    /**
+     * Callback when swiping/dragging up
+     */
+    onSwipeUp?: () => void;
+    /**
+     * Callback when swiping/dragging down
+     */
+    onSwipeDown?: () => void;
+    /**
+     * Whether to prevent default behavior during swipe
+     * @default false
+     */
+    preventDefault?: boolean;
+}
+interface UseSwipeReturn {
+    /**
+     * Whether the user is currently dragging
+     */
+    isDragging: boolean;
+    /**
+     * Handlers for touch events
+     */
+    handlers: {
+        onTouchStart: (e: React.TouchEvent) => void;
+        onTouchMove: (e: React.TouchEvent) => void;
+        onTouchEnd: () => void;
+        onMouseDown: (e: React.MouseEvent) => void;
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseUp: (e: React.MouseEvent) => void;
+        onMouseLeave: () => void;
+    };
+    /**
+     * Reset the swipe state
+     */
+    reset: () => void;
+}
+/**
+ * Hook for handling swipe/drag gestures
+ *
+ * @example
+ * ```tsx
+ * const { handlers, isDragging } = useSwipe({
+ *   onSwipeLeft: () => console.log('Swiped left'),
+ *   onSwipeRight: () => console.log('Swiped right'),
+ *   threshold: 50,
+ * });
+ *
+ * return <div {...handlers}>Swipeable content</div>;
+ * ```
+ */
+declare const useSwipe: (options?: UseSwipeOptions) => UseSwipeReturn;
+
+export { type AlignItems, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type Breakpoint, type BreakpointTokens, type BreakpointValue, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Carousel, type CarouselItem, type CarouselProps, type CarouselSize, Collapse, type CollapseProps, type CollapseSize, type ColorPalette, type ColorScale, Container, type ContainerProps, type ContainerTokens, Flex, type FlexDirection, type FlexProps, type FlexWrap, type FontSizeScale, type GenericIconProps, Grid, type GridConfig, GridItem, type GridItemProps, type GridProps, Icon, type IconName, type IconProps, type IconSize, Inline, type InlineProps, type JustifyContent, type ResponsiveBoolean, type ResponsiveNumber, type ResponsiveProps, type ResponsiveSpacing, type ResponsiveValue, type Shadow, type ShadowTokens, type SpacingKey, type SpacingTokens, type SpacingValue, Stack, type StackProps, type TabItem, Tabs, type TabsProps, type TabsSize, type TabsVariant, type ThemeMode, type TypographyStyle, type TypographyTokens, type UseSwipeOptions, type UseSwipeReturn, breakpointOrder, breakpoints, classNames, colors, combineShadows, componentShadows, containerMaxWidths, containerPadding, createShadow, createSpacingStyle, createTypographyStyle, cssVar, darkColors, fontWeights, generateResponsiveStyles, getCurrentBreakpoint, getDefinedBreakpoints, getLineHeight, getMediaQuery, getSpacing, getSpacingRem, gridConfig, hexToRgba, isBreakpointActive, lightColors, mergeStyles, pxToRem, rawShadows, resolveResponsiveValue, responsiveClassName, shadows, spacing, toPixels, typography, useSwipe };