@whitemordred/react-native-bootstrap5/lib/components/Utilities.d.ts

A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode

import React from 'react';
import { TextProps, ViewProps } from 'react-native';
import { bootstrapUtilities } from '../theme/bootstrapTheme';
export type ColorUtility = keyof typeof bootstrapUtilities.text;
export type BackgroundUtility = keyof typeof bootstrapUtilities.bg;
export type BorderUtility = keyof typeof bootstrapUtilities.border;
interface TextUtilityProps extends Omit<TextProps, 'children'> {
    color?: ColorUtility;
    children: React.ReactNode;
}
export declare const TextUtility: React.FC<TextUtilityProps>;
interface BackgroundUtilityProps extends ViewProps {
    bg?: BackgroundUtility;
    children?: React.ReactNode;
}
export declare const BackgroundUtility: React.FC<BackgroundUtilityProps>;
interface BorderUtilityProps extends ViewProps {
    border?: BorderUtility;
    borderWidth?: number;
    borderStyle?: 'solid' | 'dotted' | 'dashed';
    rounded?: boolean | 'sm' | 'lg' | 'xl' | 'pill' | 'circle';
    children?: React.ReactNode;
}
export declare const BorderUtility: React.FC<BorderUtilityProps>;
interface UtilityBoxProps extends ViewProps {
    bg?: BackgroundUtility;
    border?: BorderUtility;
    borderWidth?: number;
    rounded?: boolean | 'sm' | 'lg' | 'xl' | 'pill' | 'circle';
    p?: number | string;
    m?: number | string;
    px?: number | string;
    py?: number | string;
    mx?: number | string;
    my?: number | string;
    shadow?: boolean | 'sm' | 'lg' | 'xl';
    children?: React.ReactNode;
}
export declare const UtilityBox: React.FC<UtilityBoxProps>;
export declare const TextPrimary: React.FC<TextUtilityProps>;
export declare const TextSecondary: React.FC<TextUtilityProps>;
export declare const TextSuccess: React.FC<TextUtilityProps>;
export declare const TextDanger: React.FC<TextUtilityProps>;
export declare const TextWarning: React.FC<TextUtilityProps>;
export declare const TextInfo: React.FC<TextUtilityProps>;
export declare const TextMuted: React.FC<TextUtilityProps>;
export declare const BgPrimary: React.FC<ViewProps>;
export declare const BgSecondary: React.FC<ViewProps>;
export declare const BgSuccess: React.FC<ViewProps>;
export declare const BgDanger: React.FC<ViewProps>;
export declare const BgWarning: React.FC<ViewProps>;
export declare const BgInfo: React.FC<ViewProps>;
export declare const BgLight: React.FC<ViewProps>;
export declare const BgDark: React.FC<ViewProps>;
interface UtilityViewProps {
    children: React.ReactNode;
    style?: ViewProps['style'];
    m?: number | string;
    mt?: number | string;
    mb?: number | string;
    ml?: number | string;
    mr?: number | string;
    mx?: number | string;
    my?: number | string;
    p?: number | string;
    pt?: number | string;
    pb?: number | string;
    pl?: number | string;
    pr?: number | string;
    px?: number | string;
    py?: number | string;
    display?: 'flex' | 'none';
    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
    alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
    flex?: number;
    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
    position?: 'absolute' | 'relative';
    top?: number | string;
    bottom?: number | string;
    left?: number | string;
    right?: number | string;
    width?: number | string;
    height?: number | string;
    minWidth?: number | string;
    minHeight?: number | string;
    maxWidth?: number | string;
    maxHeight?: number | string;
    border?: boolean;
    borderTop?: boolean;
    borderBottom?: boolean;
    borderLeft?: boolean;
    borderRight?: boolean;
    borderRadius?: number;
    borderColor?: string;
    borderWidth?: number;
    backgroundColor?: string;
    shadow?: boolean;
    shadowColor?: string;
    shadowOpacity?: number;
    shadowRadius?: number;
    elevation?: number;
}
export declare const UtilityView: React.FC<UtilityViewProps>;
export declare const DFlex: React.FC<{
    children: React.ReactNode;
    style?: ViewProps['style'];
}>;
export declare const DFlexRow: React.FC<{
    children: React.ReactNode;
    style?: ViewProps['style'];
}>;
export declare const DFlexColumn: React.FC<{
    children: React.ReactNode;
    style?: ViewProps['style'];
}>;
export declare const JustifyCenter: React.FC<{
    children: React.ReactNode;
    style?: ViewProps['style'];
}>;
export declare const JustifyBetween: React.FC<{
    children: React.ReactNode;
    style?: ViewProps['style'];
}>;
export declare const AlignCenter: React.FC<{
    children: React.ReactNode;
    style?: ViewProps['style'];
}>;
export declare const TextCenter: React.FC<{
    children: React.ReactNode;
    style?: ViewProps['style'];
}>;
export declare const Spacer: React.FC<{
    size?: number | string;
    horizontal?: boolean;
}>;
export declare const Divider: React.FC<{
    style?: ViewProps['style'];
    color?: string;
    thickness?: number;
    vertical?: boolean;
}>;
declare const _default: {
    UtilityView: React.FC<UtilityViewProps>;
    DFlex: React.FC<{
        children: React.ReactNode;
        style?: ViewProps["style"];
    }>;
    DFlexRow: React.FC<{
        children: React.ReactNode;
        style?: ViewProps["style"];
    }>;
    DFlexColumn: React.FC<{
        children: React.ReactNode;
        style?: ViewProps["style"];
    }>;
    JustifyCenter: React.FC<{
        children: React.ReactNode;
        style?: ViewProps["style"];
    }>;
    JustifyBetween: React.FC<{
        children: React.ReactNode;
        style?: ViewProps["style"];
    }>;
    AlignCenter: React.FC<{
        children: React.ReactNode;
        style?: ViewProps["style"];
    }>;
    TextCenter: React.FC<{
        children: React.ReactNode;
        style?: ViewProps["style"];
    }>;
    Spacer: React.FC<{
        size?: number | string;
        horizontal?: boolean;
    }>;
    Divider: React.FC<{
        style?: ViewProps["style"];
        color?: string;
        thickness?: number;
        vertical?: boolean;
    }>;
    TextUtility: React.FC<TextUtilityProps>;
    BackgroundUtility: React.FC<BackgroundUtilityProps>;
    BorderUtility: React.FC<BorderUtilityProps>;
    UtilityBox: React.FC<UtilityBoxProps>;
    TextPrimary: React.FC<TextUtilityProps>;
    TextSecondary: React.FC<TextUtilityProps>;
    TextSuccess: React.FC<TextUtilityProps>;
    TextDanger: React.FC<TextUtilityProps>;
    TextWarning: React.FC<TextUtilityProps>;
    TextInfo: React.FC<TextUtilityProps>;
    TextMuted: React.FC<TextUtilityProps>;
    BgPrimary: React.FC<ViewProps>;
    BgSecondary: React.FC<ViewProps>;
    BgSuccess: React.FC<ViewProps>;
    BgDanger: React.FC<ViewProps>;
    BgWarning: React.FC<ViewProps>;
    BgInfo: React.FC<ViewProps>;
    BgLight: React.FC<ViewProps>;
    BgDark: React.FC<ViewProps>;
};
export default _default;
//# sourceMappingURL=Utilities.d.ts.map