august-design-system/dist/components/index.d.mts

A comprehensive React Native design system following Apple Human Interface Guidelines

import React, { ReactNode } from 'react';
import { ViewProps, ViewStyle, DimensionValue, View, GestureResponderEvent, LayoutChangeEvent, AccessibilityRole, AccessibilityState, TextStyle, ImageSourcePropType, TextInputProps } from 'react-native';
import { T as Theme } from '../theme.types-BF73i5o1.mjs';
import '../tokens.types-kLhwMiT-.mjs';

/**
 * AugustDesignSystem - Box Component
 *
 * A fundamental layout primitive that maps design tokens to View styles.
 * Provides a convenient API for spacing, colors, and layout.
 */

type SpacingValue = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | number;
type RadiusValue = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full' | number;
interface BoxProps extends Omit<ViewProps, 'style'> {
    /**
     * Child components.
     */
    children?: ReactNode;
    /**
     * Custom style overrides.
     */
    style?: ViewStyle | ViewStyle[];
    /**
     * Whether to show component.
     * @default true
     */
    visible?: boolean;
    /**
     * Background color token path or custom color.
     * @example 'background.primary' or '#FFFFFF'
     */
    backgroundColor?: string;
    /**
     * Padding on all sides.
     */
    padding?: SpacingValue;
    /**
     * Horizontal padding.
     */
    paddingHorizontal?: SpacingValue;
    /**
     * Vertical padding.
     */
    paddingVertical?: SpacingValue;
    /**
     * Top padding.
     */
    paddingTop?: SpacingValue;
    /**
     * Right padding.
     */
    paddingRight?: SpacingValue;
    /**
     * Bottom padding.
     */
    paddingBottom?: SpacingValue;
    /**
     * Left padding.
     */
    paddingLeft?: SpacingValue;
    /**
     * Margin on all sides.
     */
    margin?: SpacingValue;
    /**
     * Horizontal margin.
     */
    marginHorizontal?: SpacingValue;
    /**
     * Vertical margin.
     */
    marginVertical?: SpacingValue;
    /**
     * Top margin.
     */
    marginTop?: SpacingValue;
    /**
     * Right margin.
     */
    marginRight?: SpacingValue;
    /**
     * Bottom margin.
     */
    marginBottom?: SpacingValue;
    /**
     * Left margin.
     */
    marginLeft?: SpacingValue;
    /**
     * Border radius.
     */
    borderRadius?: RadiusValue;
    /**
     * Flex value.
     */
    flex?: number;
    /**
     * Flex direction.
     */
    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
    /**
     * Align items.
     */
    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
    /**
     * Justify content.
     */
    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
    /**
     * Gap between children (React Native 0.71+).
     */
    gap?: SpacingValue;
    /**
     * Width.
     */
    width?: DimensionValue;
    /**
     * Height.
     */
    height?: DimensionValue;
    /**
     * Min height.
     */
    minHeight?: DimensionValue;
    /**
     * Max width.
     */
    maxWidth?: DimensionValue;
    /**
     * Shadow elevation level.
     */
    shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
    /**
     * Border width.
     */
    borderWidth?: number;
    /**
     * Border color.
     */
    borderColor?: string;
    /**
     * Position type.
     */
    position?: 'relative' | 'absolute';
    /**
     * Overflow behavior.
     */
    overflow?: 'visible' | 'hidden' | 'scroll';
}
/**
 * Box is a fundamental layout component that provides:
 * - Direct access to spacing tokens via prop shortcuts
 * - Semantic color application
 * - Shadow presets
 * - Flexible layout options
 *
 * @example
 * ```tsx
 * // Basic usage with spacing tokens
 * <Box padding="lg" backgroundColor="background.primary">
 *   <Text>Content</Text>
 * </Box>
 *
 * // Card-like appearance
 * <Box
 *   padding="lg"
 *   borderRadius="md"
 *   shadow="sm"
 *   backgroundColor="background.primary"
 * >
 *   <Text>Card content</Text>
 * </Box>
 *
 * // Flex layout
 * <Box
 *   flexDirection="row"
 *   alignItems="center"
 *   justifyContent="space-between"
 *   gap="md"
 * >
 *   <Text>Left</Text>
 *   <Text>Right</Text>
 * </Box>
 * ```
 */
declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<View>>;

/**
 * AugustDesignSystem - Icon Component Types
 *
 * Type definitions for the Icon component with native-first approach.
 * Uses SF Symbols on iOS and Material Icons on Android/Web.
 */

/**
 * Icon size variants following design system standards.
 * Sizes are based on common icon dimensions in iOS HIG.
 */
type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
/**
 * Icon size values in points.
 */
declare const ICON_SIZES: Record<IconSize, number>;
/**
 * SF Symbol weight variants (iOS only).
 * Maps to SF Symbols weight values.
 */
type IconWeight = 'ultralight' | 'thin' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'heavy' | 'black';
/**
 * SF Symbol rendering modes (iOS only).
 * - monochrome: Single color
 * - hierarchical: Primary color with opacity variations
 * - palette: Multiple custom colors
 * - multicolor: System-defined multicolor
 */
type IconRenderingMode = 'monochrome' | 'hierarchical' | 'palette' | 'multicolor';
/**
 * SF Symbol effect animations (iOS 17+).
 */
type IconSymbolEffect = 'bounce' | 'pulse' | 'variableColor' | 'scale' | 'appear' | 'disappear';
/**
 * Semantic color options for icons.
 */
type IconColor = 'primary' | 'secondary' | 'tertiary' | 'tint' | 'error' | 'success' | 'warning' | 'info' | string;
/**
 * Common icon names that map across platforms.
 * These are the abstract names used in the component.
 */
type CommonIconName = 'checkmark' | 'close' | 'plus' | 'minus' | 'search' | 'edit' | 'delete' | 'share' | 'copy' | 'paste' | 'refresh' | 'download' | 'upload' | 'send' | 'reply' | 'forward' | 'back' | 'forward-nav' | 'up' | 'down' | 'menu' | 'more-horizontal' | 'more-vertical' | 'home' | 'settings' | 'chat' | 'chat-fill' | 'phone' | 'video' | 'mic' | 'mic-off' | 'speaker' | 'speaker-off' | 'camera' | 'image' | 'play' | 'pause' | 'stop' | 'volume' | 'volume-off' | 'person' | 'person-fill' | 'people' | 'people-fill' | 'info' | 'warning' | 'error' | 'success' | 'help' | 'attach' | 'link' | 'location' | 'calendar' | 'clock' | 'heart' | 'heart-fill' | 'star' | 'star-fill' | 'bookmark' | 'bookmark-fill' | 'bell' | 'bell-fill' | 'lock' | 'unlock' | 'eye' | 'eye-off' | string;
/**
 * Props for the Icon component.
 */
interface IconProps {
    /**
     * Icon name. Can be:
     * - Common name (e.g., 'checkmark') - mapped to platform-specific icon
     * - SF Symbol name (e.g., 'chevron.right') - used directly on iOS
     * - Material Icon name (e.g., 'check') - used directly on Android/Web
     */
    name?: CommonIconName;
    /**
     * Custom icon content. When provided, `name` is ignored.
     * Use this for custom SVG icons or other icon components.
     */
    children?: ReactNode;
    /**
     * Size of the icon.
     * @default 'md'
     */
    size?: IconSize | number;
    /**
     * Color of the icon. Can be:
     * - Semantic name (e.g., 'primary', 'error')
     * - Custom color string (e.g., '#FF0000', 'rgba(0,0,0,0.5)')
     * @default 'primary'
     */
    color?: IconColor;
    /**
     * SF Symbol weight (iOS only).
     * On Android/Web, this prop is ignored.
     * @default 'regular'
     */
    weight?: IconWeight;
    /**
     * SF Symbol rendering mode (iOS only).
     * On Android/Web, this prop is ignored.
     * @default 'monochrome'
     */
    renderingMode?: IconRenderingMode;
    /**
     * SF Symbol effect animation (iOS 17+ only).
     * On older iOS versions and other platforms, this prop is ignored.
     */
    symbolEffect?: IconSymbolEffect;
    /**
     * Whether the symbol effect is active.
     * @default true when symbolEffect is set
     */
    symbolEffectActive?: boolean;
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Accessibility label for screen readers.
     * If not provided, icon is treated as decorative.
     */
    accessibilityLabel?: string;
    /**
     * Whether the icon should be hidden from accessibility tree.
     * @default true (icons are decorative by default)
     */
    accessibilityHidden?: boolean;
    /**
     * Custom style for the icon container.
     */
    style?: ViewStyle;
}
/**
 * Platform-specific icon mapping.
 */
interface IconMapping {
    ios: string;
    android: string;
    web?: string;
}
/**
 * Icon map type for common icons.
 */
type IconMap = Record<string, IconMapping>;

/**
 * AugustDesignSystem - Icon Component
 *
 * A native-first icon component using SF Symbols on iOS and Material Icons
 * on Android/Web. Provides a unified API across platforms with automatic
 * icon name mapping.
 *
 * @example
 * ```tsx
 * // Basic usage - auto maps to platform icon
 * <Icon name="checkmark" size="md" color="success" />
 *
 * // Custom size and color
 * <Icon name="heart-fill" size={28} color="#FF0000" />
 *
 * // SF Symbol specific (iOS only features)
 * <Icon name="heart.fill" weight="semibold" renderingMode="hierarchical" />
 *
 * // Custom icon via children
 * <Icon size="lg" color="tint">
 *   <MyCustomSVGIcon />
 * </Icon>
 * ```
 */

/**
 * Icon component for displaying icons with platform-appropriate rendering.
 *
 * Features:
 * - Automatic platform icon mapping (SF Symbols on iOS, Material on Android/Web)
 * - Size variants: xs, sm, md, lg, xl (or custom number)
 * - Semantic color support: primary, secondary, tint, error, success, etc.
 * - SF Symbol features on iOS: weight, rendering mode (when using native module)
 * - Custom icon support via children prop
 * - Accessibility support
 */
declare function Icon({ name, children, size, color, weight, renderingMode, symbolEffect, symbolEffectActive, testID, accessibilityLabel, accessibilityHidden, style, }: IconProps): React.ReactElement | null;
declare namespace Icon {
    var displayName: string;
}

/**
 * AugustDesignSystem - Icon Mapping
 *
 * Maps common icon names to platform-specific icon names.
 * - iOS: SF Symbols names
 * - Android/Web: Material Icons names (from @expo/vector-icons)
 */

/**
 * Common icon name mappings across platforms.
 *
 * SF Symbols reference: https://developer.apple.com/sf-symbols/
 * Material Icons reference: https://fonts.google.com/icons
 */
declare const iconMap: IconMap;
/**
 * Get platform-specific icon name from common name.
 */
declare function getPlatformIconName(commonName: string, platform: 'ios' | 'android' | 'web'): string;
/**
 * Check if an icon name is a common name (has mapping).
 */
declare function isCommonIconName(name: string): boolean;

/**
 * AugustDesignSystem - Icon Component Styles
 *
 * Style utilities for the Icon component.
 */

/**
 * Get the numeric size value from IconSize or number.
 */
declare function getIconSize(size: IconSize | number): number;
/**
 * Resolve icon color from semantic name or custom value.
 */
declare function getIconColor(color: IconColor, theme: Theme): string;

/**
 * AugustDesignSystem - Pressable Component Types
 *
 * Type definitions for the enhanced Pressable component with haptics,
 * visual feedback, and accessibility support.
 */

/**
 * Haptic feedback intensity options.
 */
type HapticFeedbackType = 'light' | 'medium' | 'heavy' | 'selection' | 'success' | 'warning' | 'error' | 'none';
/**
 * Press animation style options.
 */
type PressAnimationType = 'opacity' | 'scale' | 'both' | 'none';
/**
 * Props for the Pressable component.
 */
interface PressableProps {
    /**
     * Content to render inside the pressable.
     */
    children?: ReactNode | ((state: PressableState) => ReactNode);
    /**
     * Handler called when the pressable is pressed.
     */
    onPress?: (event: GestureResponderEvent) => void;
    /**
     * Handler called when the pressable is long pressed.
     */
    onLongPress?: (event: GestureResponderEvent) => void;
    /**
     * Handler called when touch starts.
     */
    onPressIn?: (event: GestureResponderEvent) => void;
    /**
     * Handler called when touch ends.
     */
    onPressOut?: (event: GestureResponderEvent) => void;
    /**
     * Handler called when layout changes.
     */
    onLayout?: (event: LayoutChangeEvent) => void;
    /**
     * Delay before onLongPress is triggered (in milliseconds).
     * @default 500
     */
    delayLongPress?: number;
    /**
     * Delay before onPressIn is triggered (in milliseconds).
     * @default 0
     */
    delayPressIn?: number;
    /**
     * Delay before onPressOut is triggered (in milliseconds).
     * @default 0
     */
    delayPressOut?: number;
    /**
     * Whether the pressable is disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * Type of press animation.
     * @default 'opacity'
     */
    pressAnimation?: PressAnimationType;
    /**
     * Opacity when pressed (if pressAnimation includes opacity).
     * @default 0.7
     */
    pressedOpacity?: number;
    /**
     * Scale when pressed (if pressAnimation includes scale).
     * @default 0.98
     */
    pressedScale?: number;
    /**
     * Opacity when disabled.
     * @default 0.5
     */
    disabledOpacity?: number;
    /**
     * Enable Android ripple effect.
     * @default true on Android, false on iOS
     */
    enableRipple?: boolean;
    /**
     * Ripple color for Android.
     * Uses theme tint color by default.
     */
    rippleColor?: string;
    /**
     * Whether ripple should be bounded to the pressable bounds.
     * @default true
     */
    rippleBorderless?: boolean;
    /**
     * Type of haptic feedback to trigger on press.
     * @default 'light'
     */
    hapticFeedback?: HapticFeedbackType;
    /**
     * Whether to trigger haptic on press in (touch start).
     * @default true
     */
    hapticOnPressIn?: boolean;
    /**
     * Additional hit slop area around the pressable.
     * Useful for small touch targets.
     */
    hitSlop?: number | {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    };
    /**
     * Offset for press rect.
     */
    pressRetentionOffset?: number | {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    };
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Accessibility label for screen readers.
     */
    accessibilityLabel?: string;
    /**
     * Accessibility hint providing additional context.
     */
    accessibilityHint?: string;
    /**
     * Accessibility role.
     * @default 'button'
     */
    accessibilityRole?: AccessibilityRole;
    /**
     * Accessibility state.
     */
    accessibilityState?: AccessibilityState;
    /**
     * Style for the pressable container.
     * Can be a style object or a function that receives press state.
     */
    style?: ViewStyle | ((state: PressableState) => ViewStyle);
    /**
     * Additional style applied when pressed.
     */
    pressedStyle?: ViewStyle;
    /**
     * Additional style applied when disabled.
     */
    disabledStyle?: ViewStyle;
}
/**
 * State provided to children render function and style function.
 */
interface PressableState {
    /**
     * Whether the pressable is currently being pressed.
     */
    pressed: boolean;
}

/**
 * AugustDesignSystem - Pressable Component
 *
 * An enhanced touchable component with haptic feedback, visual animations,
 * and accessibility support. Serves as the foundation for interactive elements.
 *
 * @example
 * ```tsx
 * // Basic usage
 * <Pressable onPress={() => console.log('pressed')}>
 *   <Text>Press me</Text>
 * </Pressable>
 *
 * // With haptic feedback and scale animation
 * <Pressable
 *   onPress={handlePress}
 *   hapticFeedback="medium"
 *   pressAnimation="scale"
 *   pressedScale={0.95}
 * >
 *   <Text>Interactive Item</Text>
 * </Pressable>
 *
 * // Render prop for custom pressed state styling
 * <Pressable onPress={handlePress}>
 *   {({ pressed }) => (
 *     <View style={{ backgroundColor: pressed ? 'gray' : 'white' }}>
 *       <Text>Custom pressed state</Text>
 *     </View>
 *   )}
 * </Pressable>
 * ```
 */

/**
 * Enhanced Pressable component with haptics and animations.
 *
 * Features:
 * - Press animations (opacity, scale, or both)
 * - Haptic feedback support
 * - Android ripple effect
 * - Render prop support for custom pressed states
 * - Full accessibility support
 */
declare function Pressable({ children, onPress, onLongPress, onPressIn, onPressOut, onLayout, delayLongPress, delayPressIn, delayPressOut, disabled, pressAnimation, pressedOpacity, pressedScale, disabledOpacity, enableRipple, rippleColor, rippleBorderless, hapticFeedback, hapticOnPressIn, hitSlop, pressRetentionOffset, testID, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, style, pressedStyle, disabledStyle, }: PressableProps): React.ReactElement;
declare namespace Pressable {
    var displayName: string;
}

/**
 * AugustDesignSystem - Divider Component Types
 *
 * Type definitions for the Divider/Separator component.
 */

/**
 * Divider variant options.
 */
type DividerVariant = 'full' | 'inset' | 'middle' | 'withLabel';
/**
 * Divider orientation.
 */
type DividerOrientation = 'horizontal' | 'vertical';
/**
 * Props for the Divider component.
 */
interface DividerProps {
    /**
     * Visual variant of the divider.
     * - `full`: Edge-to-edge separator
     * - `inset`: Left inset (iOS list style)
     * - `middle`: Inset on both sides
     * - `withLabel`: Centered text with lines on sides
     * @default 'full'
     */
    variant?: DividerVariant;
    /**
     * Orientation of the divider.
     * @default 'horizontal'
     */
    orientation?: DividerOrientation;
    /**
     * Label text to display in the center (only for withLabel variant).
     */
    label?: string;
    /**
     * Thickness of the divider line.
     * @default StyleSheet.hairlineWidth (0.5pt on most devices)
     */
    thickness?: number;
    /**
     * Color of the divider line.
     * Uses theme separator color by default.
     */
    color?: string;
    /**
     * Left inset amount for 'inset' variant.
     * @default 16 (spacing.lg)
     */
    insetLeft?: number;
    /**
     * Right inset amount for 'middle' variant.
     * @default 16 (spacing.lg)
     */
    insetRight?: number;
    /**
     * Vertical spacing above and below the divider.
     * @default 0
     */
    spacing?: number;
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Whether the divider is decorative (hidden from screen readers).
     * @default true
     */
    decorative?: boolean;
    /**
     * Custom style for the divider container.
     */
    style?: ViewStyle;
    /**
     * Custom style for the label text (withLabel variant).
     */
    labelStyle?: TextStyle;
    /**
     * Custom style for the divider line.
     */
    lineStyle?: ViewStyle;
}

/**
 * AugustDesignSystem - Divider Component
 *
 * A visual separator component for dividing content sections.
 * Follows iOS list separator patterns with support for various inset styles.
 *
 * @example
 * ```tsx
 * // Full width divider
 * <Divider />
 *
 * // Inset divider (iOS list style)
 * <Divider variant="inset" />
 *
 * // Divider with label
 * <Divider variant="withLabel" label="OR" />
 *
 * // Custom inset
 * <Divider variant="inset" insetLeft={72} />
 *
 * // Vertical divider
 * <Divider orientation="vertical" />
 * ```
 */

/**
 * Divider component for visual separation of content.
 *
 * Features:
 * - Multiple variants: full, inset, middle, withLabel
 * - Horizontal and vertical orientation
 * - Customizable thickness and color
 * - Label support for section dividers
 * - Accessibility: decorative by default
 */
declare function Divider({ variant, orientation, label, thickness, color, insetLeft, insetRight, spacing, testID, decorative, style, labelStyle, lineStyle, }: DividerProps): React.ReactElement;
declare namespace Divider {
    var displayName: string;
}

/**
 * AugustDesignSystem - Spinner Component Types
 *
 * Type definitions for the loading spinner/activity indicator component.
 */

/**
 * Spinner size variants.
 */
type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
/**
 * Spinner size values in points.
 */
declare const SPINNER_SIZES: Record<SpinnerSize, number>;
/**
 * Spinner color variants (semantic).
 */
type SpinnerColor = 'primary' | 'secondary' | 'tint' | 'onPrimary' | 'onSurface' | string;
/**
 * Props for the Spinner component.
 */
interface SpinnerProps {
    /**
     * Size of the spinner.
     * @default 'md'
     */
    size?: SpinnerSize | number;
    /**
     * Color of the spinner.
     * Can be a semantic name or custom color string.
     * @default 'tint'
     */
    color?: SpinnerColor;
    /**
     * Optional label text displayed below the spinner.
     */
    label?: string;
    /**
     * Position of the label relative to the spinner.
     * @default 'bottom'
     */
    labelPosition?: 'bottom' | 'right';
    /**
     * Whether the spinner is animating.
     * @default true
     */
    animating?: boolean;
    /**
     * Whether to hide the spinner when not animating.
     * @default true
     */
    hidesWhenStopped?: boolean;
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Accessibility label for screen readers.
     * @default 'Loading'
     */
    accessibilityLabel?: string;
    /**
     * Custom style for the container.
     */
    style?: ViewStyle;
    /**
     * Custom style for the label text.
     */
    labelStyle?: TextStyle;
}

/**
 * AugustDesignSystem - Spinner Component
 *
 * A themed loading spinner/activity indicator with optional label support.
 * Uses the native ActivityIndicator for optimal performance.
 *
 * @example
 * ```tsx
 * // Basic spinner
 * <Spinner />
 *
 * // Large spinner with label
 * <Spinner size="lg" label="Loading..." />
 *
 * // Custom color
 * <Spinner color="success" />
 *
 * // Inline with label
 * <Spinner size="sm" label="Refreshing" labelPosition="right" />
 * ```
 */

/**
 * Spinner component for indicating loading states.
 *
 * Features:
 * - Multiple size variants
 * - Semantic color support
 * - Optional label with flexible positioning
 * - Respects reduced motion preferences
 * - Full accessibility support
 */
declare function Spinner({ size, color, label, labelPosition, animating, hidesWhenStopped, testID, accessibilityLabel, style, labelStyle, }: SpinnerProps): React.ReactElement | null;
declare namespace Spinner {
    var displayName: string;
}

/**
 * AugustDesignSystem - Toast Component Types
 *
 * Type definitions for the Toast/Snackbar notification component.
 */

/**
 * Toast variant for semantic styling.
 */
type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
/**
 * Toast position on screen.
 */
type ToastPosition = 'top' | 'bottom';
/**
 * Toast configuration for showing a toast.
 */
interface ToastConfig {
    /**
     * Unique identifier for the toast.
     * Auto-generated if not provided.
     */
    id?: string;
    /**
     * Main message text.
     */
    message: string;
    /**
     * Optional title/heading.
     */
    title?: string;
    /**
     * Visual variant.
     * @default 'default'
     */
    variant?: ToastVariant;
    /**
     * Duration in milliseconds before auto-dismiss.
     * Set to 0 for persistent toast.
     * @default 4000
     */
    duration?: number;
    /**
     * Position on screen.
     * @default 'bottom'
     */
    position?: ToastPosition;
    /**
     * Optional action button.
     */
    action?: {
        label: string;
        onPress: () => void;
    };
    /**
     * Custom icon to override default variant icon.
     */
    icon?: ReactNode;
    /**
     * Whether to show the default variant icon.
     * @default true for typed variants
     */
    showIcon?: boolean;
    /**
     * Callback when toast is dismissed.
     */
    onDismiss?: () => void;
    /**
     * Whether the toast can be dismissed by swiping.
     * @default true
     */
    swipeToDismiss?: boolean;
}
/**
 * Props for the Toast component.
 */
interface ToastProps extends ToastConfig {
    /**
     * Whether the toast is visible.
     */
    visible: boolean;
    /**
     * Handler to hide the toast.
     */
    onHide: () => void;
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Custom style for the toast container.
     */
    style?: ViewStyle;
    /**
     * Custom style for the message text.
     */
    messageStyle?: TextStyle;
    /**
     * Custom style for the title text.
     */
    titleStyle?: TextStyle;
}
/**
 * Toast context value for imperative API.
 */
interface ToastContextValue {
    /**
     * Show a toast with the given configuration.
     * Returns the toast ID.
     */
    show: (config: ToastConfig) => string;
    /**
     * Hide a specific toast by ID.
     */
    hide: (id: string) => void;
    /**
     * Hide all toasts.
     */
    hideAll: () => void;
    /**
     * Update an existing toast.
     */
    update: (id: string, config: Partial<ToastConfig>) => void;
}
/**
 * Props for ToastProvider.
 */
interface ToastProviderProps {
    children: ReactNode;
    /**
     * Default position for all toasts.
     * @default 'bottom'
     */
    defaultPosition?: ToastPosition;
    /**
     * Default duration for all toasts.
     * @default 4000
     */
    defaultDuration?: number;
    /**
     * Maximum number of toasts to show at once.
     * @default 3
     */
    maxToasts?: number;
    /**
     * Offset from the edge of the screen.
     * @default { top: 50, bottom: 50 }
     */
    offset?: {
        top?: number;
        bottom?: number;
    };
}

/**
 * AugustDesignSystem - Toast Component
 *
 * A notification toast component with slide animations.
 *
 * @example
 * ```tsx
 * // In your app root
 * <ToastProvider>
 *   <App />
 * </ToastProvider>
 *
 * // Using the toast
 * const { show } = useToast();
 * show({ message: 'Message sent!', variant: 'success' });
 * ```
 */

/**
 * Individual Toast component.
 */
declare function Toast({ message, title, variant, icon, showIcon, visible, duration, position, action, onHide, onDismiss, testID, style, messageStyle, titleStyle, }: ToastProps): React.ReactElement | null;
declare namespace Toast {
    var displayName: string;
}

/**
 * AugustDesignSystem - Toast Provider
 *
 * Context provider for managing toasts with an imperative API.
 */

/**
 * ToastProvider component for managing toast notifications.
 *
 * @example
 * ```tsx
 * // Wrap your app
 * <ToastProvider>
 *   <App />
 * </ToastProvider>
 *
 * // Use in components
 * function MyComponent() {
 *   const toast = useToast();
 *
 *   const handleSuccess = () => {
 *     toast.show({
 *       message: 'Operation successful!',
 *       variant: 'success',
 *     });
 *   };
 *
 *   return <Button onPress={handleSuccess} title="Do Something" />;
 * }
 * ```
 */
declare function ToastProvider({ children, defaultPosition, defaultDuration, maxToasts, offset, }: ToastProviderProps): React.ReactElement;
declare namespace ToastProvider {
    var displayName: string;
}
/**
 * Hook to access toast API.
 *
 * @example
 * ```tsx
 * const { show, hide, hideAll } = useToast();
 *
 * // Show a toast
 * const id = show({ message: 'Hello!', variant: 'success' });
 *
 * // Hide specific toast
 * hide(id);
 *
 * // Hide all toasts
 * hideAll();
 * ```
 */
declare function useToast(): ToastContextValue;

/**
 * AugustDesignSystem - Button Component Types
 *
 * Type definitions for the Button component following Apple HIG.
 */

/**
 * Button visual variants following iOS button styles.
 *
 * - `filled`: Primary action button with solid background (iOS "Filled" style)
 * - `tinted`: Subtle button with tinted background (iOS "Tinted" style)
 * - `gray`: Neutral button with gray background
 * - `outlined`: Button with border, no fill (iOS "Bordered" style)
 * - `ghost`: Transparent button, text only (iOS "Plain" style)
 */
type ButtonVariant = 'filled' | 'tinted' | 'gray' | 'outlined' | 'ghost';
/**
 * Button sizes following Apple HIG touch target guidelines.
 *
 * - `sm`: Small button (32pt height) - for compact layouts
 * - `md`: Medium button (44pt height) - default, meets minimum touch target
 * - `lg`: Large button (50pt height) - prominent CTAs
 */
type ButtonSize = 'sm' | 'md' | 'lg';
/**
 * Button color schemes for semantic meaning.
 */
type ButtonColorScheme = 'primary' | 'destructive' | 'success' | 'neutral';
/**
 * Button loading indicator position.
 */
type LoadingPosition = 'left' | 'center' | 'right';
/**
 * Props for the Button component.
 */
interface ButtonProps {
    /**
     * Button label text.
     * Either `title` or `children` must be provided.
     */
    title?: string;
    /**
     * Custom button content.
     * If provided, `title` is ignored.
     */
    children?: ReactNode;
    /**
     * Visual variant of the button.
     * @default 'filled'
     */
    variant?: ButtonVariant;
    /**
     * Size of the button.
     * @default 'md'
     */
    size?: ButtonSize;
    /**
     * Color scheme for the button.
     * @default 'primary'
     */
    colorScheme?: ButtonColorScheme;
    /**
     * Whether the button should take full width of its container.
     * @default false
     */
    fullWidth?: boolean;
    /**
     * Icon to display on the left side of the button text.
     */
    leftIcon?: ReactNode;
    /**
     * Icon to display on the right side of the button text.
     */
    rightIcon?: ReactNode;
    /**
     * When true, renders only the icon without text.
     * Requires `leftIcon` or `rightIcon` to be set.
     * @default false
     */
    iconOnly?: boolean;
    /**
     * Whether the button is disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * Whether the button is in a loading state.
     * When true, shows a loading indicator and disables interaction.
     * @default false
     */
    loading?: boolean;
    /**
     * Position of the loading indicator.
     * @default 'center'
     */
    loadingPosition?: LoadingPosition;
    /**
     * Text to display while loading.
     * If not provided, the original title is hidden.
     */
    loadingText?: string;
    /**
     * Handler called when the button is pressed.
     */
    onPress?: (event: GestureResponderEvent) => void;
    /**
     * Handler called when the button is long pressed.
     */
    onLongPress?: (event: GestureResponderEvent) => void;
    /**
     * Handler called when touch starts.
     */
    onPressIn?: (event: GestureResponderEvent) => void;
    /**
     * Handler called when touch ends.
     */
    onPressOut?: (event: GestureResponderEvent) => void;
    /**
     * Delay before onLongPress is triggered (in milliseconds).
     * @default 500
     */
    delayLongPress?: number;
    /**
     * Type of haptic feedback to trigger on press.
     * Set to 'none' to disable haptic feedback.
     * @default 'light'
     */
    hapticFeedback?: 'light' | 'medium' | 'heavy' | 'selection' | 'none';
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Accessibility label for screen readers.
     * Defaults to `title` if not provided.
     */
    accessibilityLabel?: string;
    /**
     * Accessibility hint providing additional context.
     */
    accessibilityHint?: string;
    /**
     * Accessibility role.
     * @default 'button'
     */
    accessibilityRole?: AccessibilityRole;
    /**
     * Accessibility state.
     */
    accessibilityState?: AccessibilityState;
    /**
     * Custom style for the button container.
     */
    style?: ViewStyle;
    /**
     * Custom style for the button text.
     */
    textStyle?: TextStyle;
    /**
     * Custom style for the pressed state.
     */
    pressedStyle?: ViewStyle;
    /**
     * Custom style for the disabled state.
     */
    disabledStyle?: ViewStyle;
}
/**
 * Style props derived from Button state.
 */
interface ButtonStyleProps {
    variant: ButtonVariant;
    size: ButtonSize;
    colorScheme: ButtonColorScheme;
    disabled: boolean;
    loading: boolean;
    pressed: boolean;
    fullWidth: boolean;
    iconOnly: boolean;
}

/**
 * AugustDesignSystem - Button Component
 *
 * A versatile button component following Apple Human Interface Guidelines.
 * Supports multiple variants, sizes, and states with proper accessibility.
 *
 * @example
 * ```tsx
 * // Primary filled button (default)
 * <Button title="Continue" onPress={handlePress} />
 *
 * // Destructive action
 * <Button
 *   title="Delete"
 *   variant="filled"
 *   colorScheme="destructive"
 *   onPress={handleDelete}
 * />
 *
 * // Outlined secondary button
 * <Button
 *   title="Cancel"
 *   variant="outlined"
 *   colorScheme="neutral"
 *   onPress={handleCancel}
 * />
 *
 * // With loading state
 * <Button
 *   title="Save"
 *   loading={isSaving}
 *   loadingText="Saving..."
 *   onPress={handleSave}
 * />
 *
 * // With icons
 * <Button
 *   title="Add to Cart"
 *   leftIcon={<CartIcon />}
 *   onPress={handleAddToCart}
 * />
 * ```
 */

/**
 * Button component following Apple HIG design patterns.
 *
 * Features:
 * - Five visual variants (filled, tinted, gray, outlined, ghost)
 * - Three sizes (sm, md, lg) - all meeting touch target guidelines
 * - Four color schemes (primary, destructive, success, neutral)
 * - Loading state with customizable indicator position
 * - Left and right icon support
 * - Full accessibility support
 * - Haptic feedback (when available)
 */
declare function Button({ title, children, variant, size, colorScheme, fullWidth, leftIcon, rightIcon, iconOnly, disabled, loading, loadingPosition, loadingText, onPress, onLongPress, onPressIn, onPressOut, delayLongPress, hapticFeedback, testID, accessibilityLabel, accessibilityHint, accessibilityRole, accessibilityState, style, textStyle, pressedStyle, disabledStyle, }: ButtonProps): React.ReactElement;
declare namespace Button {
    var displayName: string;
}

/**
 * AugustDesignSystem - SearchBar Component Types
 *
 * Type definitions for the iOS-style SearchBar component.
 */

/**
 * Props for the SearchBar component.
 */
interface SearchBarProps {
    /**
     * Current search text value.
     */
    value?: string;
    /**
     * Placeholder text when empty.
     * @default 'Search'
     */
    placeholder?: string;
    /**
     * Callback when text changes.
     */
    onChangeText?: (text: string) => void;
    /**
     * Callback when search is submitted (keyboard return pressed).
     */
    onSubmit?: (text: string) => void;
    /**
     * Callback when search bar gains focus.
     */
    onFocus?: () => void;
    /**
     * Callback when search bar loses focus.
     */
    onBlur?: () => void;
    /**
     * Callback when clear button is pressed.
     */
    onClear?: () => void;
    /**
     * Callback when cancel button is pressed.
     */
    onCancel?: () => void;
    /**
     * Whether the search bar is in loading state.
     * Shows a spinner in place of the search icon.
     * @default false
     */
    loading?: boolean;
    /**
     * Whether the search bar is disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * Whether to auto-focus on mount.
     * @default false
     */
    autoFocus?: boolean;
    /**
     * Whether to show the cancel button when focused.
     * @default true
     */
    showCancelButton?: boolean;
    /**
     * Cancel button text.
     * @default 'Cancel'
     */
    cancelButtonText?: string;
    /**
     * Debounce delay for onChangeText in milliseconds.
     * Set to 0 to disable debouncing.
     * @default 0
     */
    debounceDelay?: number;
    /**
     * Keyboard return key type.
     * @default 'search'
     */
    returnKeyType?: 'search' | 'done' | 'go' | 'send';
    /**
     * Auto-capitalize behavior.
     * @default 'none'
     */
    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
    /**
     * Auto-correct behavior.
     * @default true
     */
    autoCorrect?: boolean;
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Accessibility label for the search input.
     */
    accessibilityLabel?: string;
    /**
     * Accessibility hint for the search input.
     */
    accessibilityHint?: string;
    /**
     * Custom style for the container.
     */
    style?: ViewStyle;
    /**
     * Custom style for the input container.
     */
    inputContainerStyle?: ViewStyle;
    /**
     * Custom style for the input text.
     */
    inputStyle?: TextStyle;
    /**
     * Custom style for the cancel button text.
     */
    cancelButtonStyle?: TextStyle;
}

/**
 * AugustDesignSystem - SearchBar Component
 *
 * An iOS-style search bar with animated cancel button, clear functionality,
 * and loading state support.
 *
 * @example
 * ```tsx
 * // Basic usage
 * <SearchBar
 *   value={query}
 *   onChangeText={setQuery}
 *   placeholder="Search conversations..."
 * />
 *
 * // With loading state
 * <SearchBar
 *   value={query}
 *   onChangeText={setQuery}
 *   loading={isSearching}
 * />
 *
 * // With callbacks
 * <SearchBar
 *   value={query}
 *   onChangeText={setQuery}
 *   onSubmit={handleSearch}
 *   onCancel={handleCancel}
 * />
 * ```
 */

/**
 * iOS-style SearchBar component.
 *
 * Features:
 * - Animated cancel button on focus
 * - Clear button when has text
 * - Loading state with spinner
 * - Debounced onChange (optional)
 * - Full accessibility support
 */
declare function SearchBar({ value, placeholder, onChangeText, onSubmit, onFocus, onBlur, onClear, onCancel, loading, disabled, autoFocus, showCancelButton, cancelButtonText, debounceDelay, returnKeyType, autoCapitalize, autoCorrect, testID, accessibilityLabel, accessibilityHint, style, inputContainerStyle, inputStyle, cancelButtonStyle, }: SearchBarProps): React.ReactElement;
declare namespace SearchBar {
    var displayName: string;
}

/**
 * AugustDesignSystem - EmptyState Component Types
 *
 * Type definitions for the EmptyState component used to display
 * placeholder content when lists or views have no data.
 */

/**
 * EmptyState size variants.
 */
type EmptyStateSize = 'sm' | 'md' | 'lg';
/**
 * EmptyState layout variants.
 */
type EmptyStateLayout = 'vertical' | 'horizontal';
/**
 * Action button configuration for EmptyState.
 */
interface EmptyStateAction {
    /**
     * Button label text.
     */
    label: string;
    /**
     * Callback when button is pressed.
     */
    onPress: () => void;
    /**
     * Button variant.
     * @default 'primary'
     */
    variant?: 'primary' | 'secondary' | 'tertiary';
}
/**
 * Props for the EmptyState component.
 */
interface EmptyStateProps {
    /**
     * Title text displayed prominently.
     */
    title: string;
    /**
     * Description text providing more context.
     */
    description?: string;
    /**
     * Icon name to display above the title.
     */
    icon?: CommonIconName;
    /**
     * Custom icon element (overrides icon prop).
     */
    customIcon?: ReactNode;
    /**
     * Custom illustration element (larger than icon).
     */
    illustration?: ReactNode;
    /**
     * Primary action button.
     */
    action?: EmptyStateAction;
    /**
     * Secondary action button.
     */
    secondaryAction?: EmptyStateAction;
    /**
     * Size variant affecting spacing and text sizes.
     * @default 'md'
     */
    size?: EmptyStateSize;
    /**
     * Layout direction.
     * @default 'vertical'
     */
    layout?: EmptyStateLayout;
    /**
     * Whether the component should fill available space.
     * @default true
     */
    fillContainer?: boolean;
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Accessibility label for the entire component.
     */
    accessibilityLabel?: string;
    /**
     * Custom style for the container.
     */
    style?: ViewStyle;
    /**
     * Custom style for the title text.
     */
    titleStyle?: TextStyle;
    /**
     * Custom style for the description text.
     */
    descriptionStyle?: TextStyle;
    /**
     * Custom style for the icon container.
     */
    iconContainerStyle?: ViewStyle;
    /**
     * Custom style for the actions container.
     */
    actionsStyle?: ViewStyle;
}

/**
 * AugustDesignSystem - EmptyState Component
 *
 * A component for displaying placeholder content when lists or views have no data.
 * Follows iOS HIG and Material Design 3 empty state patterns.
 *
 * @example
 * ```tsx
 * // Basic usage
 * <EmptyState
 *   title="No Messages"
 *   description="Start a conversation to see messages here."
 *   icon="message"
 * />
 *
 * // With action
 * <EmptyState
 *   title="No Results"
 *   description="Try adjusting your search terms."
 *   icon="search"
 *   action={{
 *     label: "Clear Search",
 *     onPress: handleClear,
 *   }}
 * />
 *
 * // With illustration
 * <EmptyState
 *   title="Welcome!"
 *   description="Get started by creating your first project."
 *   illustration={<WelcomeIllustration />}
 *   action={{
 *     label: "Create Project",
 *     onPress: handleCreate,
 *   }}
 * />
 * ```
 */

/**
 * EmptyState component for displaying placeholder content.
 */
declare function EmptyState({ title, description, icon, customIcon, illustration, action, secondaryAction, size, layout, fillContainer, testID, accessibilityLabel, style, titleStyle, descriptionStyle, iconContainerStyle, actionsStyle, }: EmptyStateProps): React.ReactElement;
declare namespace EmptyState {
    var displayName: string;
}

/**
 * AugustDesignSystem - Switch Component Types
 *
 * Type definitions for the iOS-style toggle switch component.
 * Follows Apple Human Interface Guidelines for switch dimensions and behavior.
 */

/**
 * Switch size variants.
 * - sm: Compact size for dense UIs
 * - md: Default iOS switch size (51x31)
 */
type SwitchSize = 'sm' | 'md';
/**
 * Props for the Switch component.
 */
interface SwitchProps {
    /**
     * Whether the switch is on.
     */
    value: boolean;
    /**
     * Callback when the switch is toggled.
     */
    onValueChange: (value: boolean) => void;
    /**
     * Whether the switch is disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * Size of the switch.
     * @default 'md'
     */
    size?: SwitchSize;
    /**
     * Color of the track when switch is on.
     * Uses theme's interactive.tint by default.
     */
    trackColorOn?: string;
    /**
     * Color of the track when switch is off.
     * Uses theme's fill.secondary by default.
     */
    trackColorOff?: string;
    /**
     * Color of the thumb (the circular knob).
     * @default '#FFFFFF'
     */
    thumbColor?: string;
    /**
     * Whether to trigger haptic feedback on toggle.
     * @default true
     */
    hapticFeedback?: boolean;
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Accessibility label for screen readers.
     */
    accessibilityLabel?: string;
    /**
     * Accessibility hint providing additional context.
     */
    accessibilityHint?: string;
    /**
     * Custom style for the switch container.
     */
    style?: ViewStyle;
}
/**
 * Switch size configuration.
 */
interface SwitchSizeConfig {
    /**
     * Width of the track.
     */
    trackWidth: number;
    /**
     * Height of the track.
     */
    trackHeight: number;
    /**
     * Diameter of the thumb.
     */
    thumbSize: number;
    /**
     * Padding inside the track.
     */
    trackPadding: number;
}

/**
 * AugustDesignSystem - Switch Component
 *
 * An iOS-style toggle switch with smooth animations and haptic feedback.
 * Follows Apple Human Interface Guidelines for dimensions and behavior.
 *
 * @example
 * ```tsx
 * // Basic usage
 * const [isEnabled, setIsEnabled] = useState(false);
 * <Switch value={isEnabled} onValueChange={setIsEnabled} />
 *
 * // With custom colors
 * <Switch
 *   value={isEnabled}
 *   onValueChange={setIsEnabled}
 *   trackColorOn="#34C759"
 *   trackColorOff="#E5E5EA"
 * />
 *
 * // Small size
 * <Switch value={isEnabled} onValueChange={setIsEnabled} size="sm" />
 *
 * // Disabled state
 * <Switch value={isEnabled} onValueChange={setIsEnabled} disabled />
 * ```
 */

/**
 * iOS-style toggle switch component.
 *
 * Features:
 * - Smooth spring animations
 * - Haptic feedback support
 * - Custom track and thumb colors
 * - Two size variants (sm, md)
 * - Full accessibility support
 */
declare function Switch({ value, onValueChange, disabled, size, trackColorOn, trackColorOff, thumbColor, hapticFeedback, testID, accessibilityLabel, accessibilityHint, style, }: SwitchProps): React.ReactElement;
declare namespace Switch {
    var displayName: string;
}

/**
 * AugustDesignSystem - Badge Component Types
 *
 * Type definitions for the generic badge component.
 * Supports count, dot, and label variants with position anchoring.
 */

/**
 * Badge visual variants.
 */
type BadgeVariant = 'count' | 'dot' | 'label';
/**
 * Badge color schemes.
 */
type BadgeColor = 'primary' | 'error' | 'success' | 'warning' | 'info' | 'neutral';
/**
 * Badge size variants.
 */
type BadgeSize = 'sm' | 'md';
/**
 * Badge position when used as an overlay on another element.
 */
type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
/**
 * Props for the Badge component.
 */
interface BadgeProps {
    /**
     * Badge variant type.
     * @default 'count'
     */
    variant?: BadgeVariant;
    /**
     * Count value for 'count' variant.
     * Will show max+ when exceeding maxCount (e.g., "99+").
     */
    count?: number;
    /**
     * Text label for 'label' variant.
     */
    label?: string;
    /**
     * Maximum count to display before showing overflow.
     * @default 99
     */
    maxCount?: number;
    /**
     * Show zero count (when count is 0).
     * @default false
     */
    showZero?: boolean;
    /**
     * Color scheme of the badge.
     * @default 'error' (red, standard notification color)
     */
    color?: BadgeColor;
    /**
     * Size of the badge.
     * @default 'md'
     */
    size?: BadgeSize;
    /**
     * Whether the badge is visible.
     * @default true
     */
    visible?: boolean;
    /**
     * Content to wrap with the badge.
     * When provided, badge will be positioned relative to this content.
     */
    children?: ReactNode;
    /**
     * Position of the badge relative to children.
     * Only applies when children are provided.
     * @default 'top-right'
     */
    position?: BadgePosition;
    /**
     * Offset from the corner in pixels.
     * @default { x: 0, y: 0 }
     */
    offset?: {
        x?: number;
        y?: number;
    };
    /**
     * Test ID for testing frameworks.
     */
    testID?: string;
    /**
     * Accessibility label for screen readers.
     */
    accessibilityLabel?: string;
    /**
     * Custom style for the badge container.
     */
    style?: ViewStyle;
    /**
     * Custom style for the badge text.
     */
    textStyle?: TextStyle;
    /**
     * Custom style for the wrapper when children are provided.
     */
    containerStyle?: ViewStyle;
}
/**
 * Badge size configuration.
 */
interface BadgeSizeConfig {
    /**
     * Minimum width of the badge.
     */
    minWidth: number;
    /**
     * Height of the badge.
     */
    height: number;
    /**
     * Horizontal padding.
     */
    paddingHorizontal: number;
    /**
     * Font size for count/label.
     */
    fontSize: number;
    /**
     * Dot size (diameter).
     */
    dotSize: number;
}

/**
 * AugustDesignSystem - Badge Component
 *
 * A versatile badge component for counts, dots, and labels.
 * Can be used standalone or as an overlay on other elements.
 *
 * @example
 * ```tsx
 * // Count badge (standalone)
 * <Badge count={5} />
 *
 * // Count badge with max overflow
 * <Badge count={150} maxCount={99} /> // Shows "99+"
 *
 * // Dot badge (indicator only)
 * <Badge variant="dot" color="error" />
 *
 * // Label badge
 * <Badge variant="label" label="New" color="primary" />
 *
 * // Badge wrapping an icon (overlay)
 * <Badge count={3} position="top-right">
 *   <Icon name="bell" size="lg" />
 * </Badge>
 *
 * // Different colors
 * <Badge count={5} color="success" />
 * <Badge count={5} color="warning" />
 * ```
 */

/**
 * Badge component for notifications, counts, and status indicators.
 *
 * Features:
 * - Count variant with max overflow (99+)
 * - Dot variant for simple indicators
 * - Label variant for text badges
 * - Position anchoring when wrapping children
 * - Multiple color schemes
 * - Two size variants
 */
declare function Badge({ variant, count, label, maxCount, showZero, color, size, visible, children, position, offset, testID, accessibilityLabel, style, textStyle, containerStyle, }: BadgeProps): React.ReactElement | null;
declare namespace Badge {
    var displayName: string;
}

/**
 * AugustDesignSystem - Progress Component Types
 *
 * Type definitions for the progress indicator component.
 * Supports linear and circular variants with determinate/indeterminate modes.
 */

/**
 * Progress visual variants.
 */
type ProgressVariant = 'linear' | 'circular';
/**
 * Progress size variants.
 */
type ProgressSize = 'sm' | 'md' | 'lg';
/**
 * Progress color schemes.
 */
type ProgressColor = 'primary' | 'success' | 'warning' | 'error' | 'info';
/**
 * Props for the Progress component.
 */
interface ProgressProps {
    /**
     * Progress value between 0 and 100.
     * When not provided, progress is indeterminate (animated).
     */
    value?: number;
    /**
     * Whether the progress is indeterminate (continuously animating).
     * Automatically true when value is not provided.
     * @default false when value is provided
     */
    indeterminate?: boolean;
    /**
     * Progress varia