import * as flexium_jsx_runtime from 'flexium/jsx-runtime';
import { JSX } from 'flexium/jsx-runtime';
import { StyleObject } from 'flexium/css';
import { Context } from 'flexium/core';

/**
 * Common flex properties for Column/Row
 */
interface FlexProps {
    /** Flex grow/shrink value */
    flex?: number | string;
    /** Gap between children */
    gap?: number | string;
    /** Padding */
    padding?: number | string;
    /** Margin */
    margin?: number | string;
    /** Width */
    width?: number | string;
    /** Height */
    height?: number | string;
    /** Min width */
    minWidth?: number | string;
    /** Max width */
    maxWidth?: number | string;
    /** Min height */
    minHeight?: number | string;
    /** Max height */
    maxHeight?: number | string;
    /** Overflow behavior */
    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
    /** Background color */
    background?: string;
    /** Border radius */
    borderRadius?: number | string;
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
    /** Children */
    children?: any;
}
/**
 * Main axis alignment (justify-content)
 */
type MainAxisAlignment = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
/**
 * Cross axis alignment (align-items)
 */
type CrossAxisAlignment = 'start' | 'end' | 'center' | 'stretch' | 'baseline';
/**
 * Column props (vertical layout)
 */
interface ColumnProps extends FlexProps {
    /** Main axis alignment (vertical) */
    mainAxisAlignment?: MainAxisAlignment;
    /** Cross axis alignment (horizontal) */
    crossAxisAlignment?: CrossAxisAlignment;
}
/**
 * Row props (horizontal layout)
 */
interface RowProps extends FlexProps {
    /** Main axis alignment (horizontal) */
    mainAxisAlignment?: MainAxisAlignment;
    /** Cross axis alignment (vertical) */
    crossAxisAlignment?: CrossAxisAlignment;
    /** Wrap children */
    wrap?: boolean;
}

/**
 * Column - Vertical flex container
 *
 * @example
 * ```tsx
 * <Column gap={16} mainAxisAlignment="center">
 *   <Text>Item 1</Text>
 *   <Text>Item 2</Text>
 * </Column>
 * ```
 */
declare function Column(props: ColumnProps): flexium_jsx_runtime.JSX.Element;

/**
 * Row - Horizontal flex container
 *
 * @example
 * ```tsx
 * <Row gap={16} mainAxisAlignment="space-between">
 *   <Button>Cancel</Button>
 *   <Button>Save</Button>
 * </Row>
 * ```
 */
declare function Row(props: RowProps): flexium_jsx_runtime.JSX.Element;

interface TextProps {
    /** Text variant */
    variant?: 'body' | 'caption' | 'h1' | 'h2' | 'h3' | 'h4';
    /** Text color */
    color?: 'primary' | 'secondary' | 'disabled' | string;
    /** Font weight */
    weight?: 'normal' | 'medium' | 'bold';
    /** Text alignment */
    align?: 'left' | 'center' | 'right';
    /** Make text non-selectable */
    noSelect?: boolean;
    /** Truncate text with ellipsis */
    truncate?: boolean;
    /** Number of lines to show (requires truncate) */
    lines?: number;
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
    /** Children */
    children?: any;
}
/**
 * Text - Typography component
 *
 * @example
 * ```tsx
 * <Text variant="h1">Hello World</Text>
 * <Text color="secondary">Subtitle</Text>
 * <Text truncate lines={2}>Long text...</Text>
 * ```
 */
declare function Text(props: TextProps): flexium_jsx_runtime.JSX.Element;

interface ButtonProps {
    /** Button variant */
    variant?: 'filled' | 'outlined' | 'text';
    /** Button color */
    color?: 'primary' | 'secondary' | 'error';
    /** Button size */
    size?: 'sm' | 'md' | 'lg';
    /** Full width button */
    fullWidth?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Click handler */
    onClick?: (e: Event) => void;
    /** Button type */
    type?: 'button' | 'submit' | 'reset';
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
    /** Children */
    children?: any;
}
/**
 * Button - Interactive button component
 *
 * @example
 * ```tsx
 * <Button onClick={() => console.log('clicked')}>Click me</Button>
 * <Button variant="outlined" color="secondary">Cancel</Button>
 * <Button variant="text" size="sm">Learn more</Button>
 * ```
 */
declare function Button(props: ButtonProps): flexium_jsx_runtime.JSX.Element;

interface CardProps {
    /** Card content */
    children?: any;
    /** Padding size */
    padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
    /** Shadow elevation */
    shadow?: 'none' | 'sm' | 'md' | 'lg';
    /** Border radius */
    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
    /** Background color */
    background?: string;
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
}
/**
 * Card - Container component with elevation
 *
 * @example
 * ```tsx
 * <Card shadow="md" padding="lg">
 *   <Text variant="h3">Card Title</Text>
 *   <Text>Card content goes here</Text>
 * </Card>
 * ```
 */
declare function Card(props: CardProps): flexium_jsx_runtime.JSX.Element;

interface SpinnerProps {
    /** Spinner size */
    size?: 'sm' | 'md' | 'lg';
    /** Spinner color */
    color?: 'primary' | 'secondary' | string;
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
}
/**
 * Spinner - Loading spinner component
 *
 * @example
 * ```tsx
 * <Spinner />
 * <Spinner size="lg" color="primary" />
 * <Spinner color="#ff0000" />
 * ```
 */
declare function Spinner(props: SpinnerProps): flexium_jsx_runtime.JSX.Element;

interface ModalProps {
    /** Whether the modal is open */
    open?: boolean;
    /** Close handler */
    onClose?: () => void;
    /** Modal content */
    children?: any;
    /** Modal title */
    title?: string;
    /** Modal size */
    size?: 'sm' | 'md' | 'lg';
    /** Custom className for modal content */
    className?: string;
    /** Custom styles for modal content */
    style?: StyleObject;
}
/**
 * Modal - Modal dialog component
 *
 * @example
 * ```tsx
 * <Modal open={isOpen} onClose={() => setOpen(false)} title="Confirm Action">
 *   <Text>Are you sure you want to proceed?</Text>
 *   <Button onClick={() => setOpen(false)}>Cancel</Button>
 * </Modal>
 * ```
 */
declare function Modal(props: ModalProps): flexium_jsx_runtime.JSX.Element;

interface AvatarProps {
    /** Image source URL */
    src?: string;
    /** Alt text for image */
    alt?: string;
    /** Name for fallback initials */
    name?: string;
    /** Avatar size - preset or custom number in pixels */
    size?: 'sm' | 'md' | 'lg' | number;
    /** Avatar shape */
    shape?: 'circle' | 'square';
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
}
/**
 * Avatar - User avatar component
 *
 * @example
 * ```tsx
 * <Avatar src="/user.jpg" alt="John Doe" />
 * <Avatar name="John Doe" size="lg" />
 * <Avatar name="Jane Smith" shape="square" size={60} />
 * ```
 */
declare function Avatar(props: AvatarProps): flexium_jsx_runtime.JSX.Element;

interface BadgeProps {
    /** Badge content - string or number */
    content?: string | number;
    /** Badge color */
    color?: 'primary' | 'secondary' | 'error';
    /** Badge size */
    size?: 'sm' | 'md' | 'lg';
    /** Dot mode - show only a dot without content */
    dot?: boolean;
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
}
/**
 * Badge - Badge/counter component
 *
 * @example
 * ```tsx
 * <Badge content={5} />
 * <Badge content="NEW" color="primary" />
 * <Badge dot color="error" />
 * <Badge content={99} size="lg" />
 * ```
 */
declare function Badge(props: BadgeProps): flexium_jsx_runtime.JSX.Element;

interface ChipProps {
    /** Chip label text */
    label: string;
    /** Delete handler - shows X button when provided */
    onDelete?: (e: Event) => void;
    /** Chip color */
    color?: 'primary' | 'secondary' | 'error';
    /** Chip variant */
    variant?: 'filled' | 'outlined';
    /** Chip size */
    size?: 'sm' | 'md' | 'lg';
    /** Disabled state */
    disabled?: boolean;
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
}
/**
 * Chip - Tag/chip component
 *
 * @example
 * ```tsx
 * <Chip label="React" />
 * <Chip label="TypeScript" color="primary" onDelete={() => {}} />
 * <Chip label="Disabled" variant="outlined" disabled />
 * <Chip label="Large" size="lg" />
 * ```
 */
declare function Chip(props: ChipProps): flexium_jsx_runtime.JSX.Element;

interface TextFieldProps {
    /** Input value */
    value?: string;
    /** Change handler */
    onChange?: (e: Event) => void;
    /** Placeholder text */
    placeholder?: string;
    /** Field label */
    label?: string;
    /** Error message */
    error?: string;
    /** Disabled state */
    disabled?: boolean;
    /** Input type */
    type?: 'text' | 'password' | 'email';
    /** Input size */
    size?: 'sm' | 'md' | 'lg';
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
    /** Additional input props */
    [key: string]: any;
}
/**
 * TextField - Text input component
 *
 * @example
 * ```tsx
 * <TextField
 *   label="Email"
 *   type="email"
 *   placeholder="Enter your email"
 *   onChange={(e) => console.log(e.target.value)}
 * />
 * <TextField
 *   label="Password"
 *   type="password"
 *   error="Password is required"
 * />
 * ```
 */
declare function TextField(props: TextFieldProps): flexium_jsx_runtime.JSX.Element;

interface CheckboxProps {
    /** Checked state */
    checked?: boolean;
    /** Change handler */
    onChange?: (e: Event) => void;
    /** Checkbox label */
    label?: string;
    /** Disabled state */
    disabled?: boolean;
    /** Checkbox size */
    size?: 'sm' | 'md' | 'lg';
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
    /** Additional input props */
    [key: string]: any;
}
/**
 * Checkbox - Custom styled checkbox component
 *
 * @example
 * ```tsx
 * <Checkbox
 *   label="Accept terms"
 *   checked={accepted}
 *   onChange={(e) => setAccepted(e.target.checked)}
 * />
 * <Checkbox
 *   label="Subscribe to newsletter"
 *   size="lg"
 * />
 * ```
 */
declare function Checkbox(props: CheckboxProps): flexium_jsx_runtime.JSX.Element;

interface SwitchProps {
    /** Checked state */
    checked?: boolean;
    /** Change handler */
    onChange?: (e: Event) => void;
    /** Switch label */
    label?: string;
    /** Disabled state */
    disabled?: boolean;
    /** Switch size */
    size?: 'sm' | 'md' | 'lg';
    /** Custom className */
    className?: string;
    /** Custom styles */
    style?: StyleObject;
    /** Additional input props */
    [key: string]: any;
}
/**
 * Switch - Animated toggle switch component
 *
 * @example
 * ```tsx
 * <Switch
 *   label="Enable notifications"
 *   checked={enabled}
 *   onChange={(e) => setEnabled(e.target.checked)}
 * />
 * <Switch
 *   label="Dark mode"
 *   size="lg"
 * />
 * ```
 */
declare function Switch(props: SwitchProps): flexium_jsx_runtime.JSX.Element;

interface PortalProps {
    /** Target element or CSS selector to render children into */
    target: HTMLElement | string;
    /** Children to render in the portal */
    children?: any;
}
/**
 * Portal - Renders children into a different DOM node
 *
 * Useful for modals, tooltips, and dropdowns that need to escape
 * their parent's overflow or z-index stacking context.
 *
 * @example
 * ```tsx
 * function Modal({ open, onClose, children }) {
 *   if (!open) return null
 *
 *   return (
 *     <Portal target={document.body}>
 *       <div class="modal-backdrop" onClick={onClose}>
 *         <div class="modal-content" onClick={e => e.stopPropagation()}>
 *           {children}
 *         </div>
 *       </div>
 *     </Portal>
 *   )
 * }
 * ```
 *
 * @example
 * ```tsx
 * // Using CSS selector
 * <Portal target="#modal-root">
 *   <Dialog />
 * </Portal>
 * ```
 */
declare function Portal(props: PortalProps): null;

/**
 * Theme type definitions
 */
interface ThemeColors {
    primary: string;
    secondary: string;
    background: string;
    surface: string;
    error: string;
    text: {
        primary: string;
        secondary: string;
        disabled: string;
    };
    border: string;
}
interface ThemeSpacing {
    xs: number;
    sm: number;
    md: number;
    lg: number;
    xl: number;
}
interface ThemeTypography {
    fontFamily: string;
    fontSize: {
        xs: number;
        sm: number;
        md: number;
        lg: number;
        xl: number;
    };
    fontWeight: {
        normal: number;
        medium: number;
        bold: number;
    };
    lineHeight: {
        tight: number;
        normal: number;
        relaxed: number;
    };
}
interface ThemeBorderRadius {
    none: number;
    sm: number;
    md: number;
    lg: number;
    full: number;
}
interface ThemeShadows {
    none: string;
    sm: string;
    md: string;
    lg: string;
}
interface Theme {
    colors: ThemeColors;
    spacing: ThemeSpacing;
    typography: ThemeTypography;
    borderRadius: ThemeBorderRadius;
    shadows: ThemeShadows;
}
type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

/**
 * Create a custom theme by extending the default theme
 *
 * @example
 * ```ts
 * const darkTheme = createTheme({
 *   colors: {
 *     background: '#1a1a1a',
 *     text: { primary: '#ffffff' }
 *   }
 * })
 * ```
 */
declare function createTheme(overrides?: DeepPartial<Theme>): Theme;

declare const defaultTheme: Theme;

type FlexiumProviderComponent = (props: {
    value: Theme;
    children: unknown;
}) => JSX.Element;
/**
 * Theme Context
 */
declare const RawThemeContext: Context<Theme>;
declare const ThemeContext: Omit<typeof RawThemeContext, 'Provider'> & {
    Provider: FlexiumProviderComponent;
};
/**
 * Theme Provider component
 *
 * @example
 * ```tsx
 * import { ThemeProvider, createTheme } from 'flexium-ui'
 *
 * const customTheme = createTheme({
 *   colors: { primary: '#ff0000' }
 * })
 *
 * function App() {
 *   return (
 *     <ThemeProvider theme={customTheme}>
 *       <MyComponents />
 *     </ThemeProvider>
 *   )
 * }
 * ```
 */
interface ThemeProviderProps {
    theme?: Theme;
    children?: any;
}
declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
/**
 * Hook to get the current theme from context
 *
 * @example
 * ```tsx
 * function MyComponent() {
 *   const theme = useTheme()
 *   return <div style={{ color: theme.colors.primary }}>Hello</div>
 * }
 * ```
 */
declare function useTheme(): Theme;

export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Column, type ColumnProps, type CrossAxisAlignment, type DeepPartial, type FlexProps, type MainAxisAlignment, Modal, type ModalProps, Portal, type PortalProps, Row, type RowProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Text, TextField, type TextFieldProps, type TextProps, type Theme, type ThemeBorderRadius, type ThemeColors, ThemeContext, ThemeProvider, type ThemeProviderProps, type ThemeShadows, type ThemeSpacing, type ThemeTypography, createTheme, defaultTheme, useTheme };