coral-ui/dist/index.es.js

Biblioteca de components criada pelo Design System para os produtos da Pulse criada em react-native

import { createTheme as createTheme$1, createRestyleFunction, createBox, createRestyleComponent, createText, useTheme } from '@shopify/restyle';
export { ThemeProvider, useTheme } from '@shopify/restyle';
import React, { forwardRef, useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
import { Image, Pressable, ActivityIndicator, StyleSheet, TouchableWithoutFeedback, Keyboard, TextInput, FlatList, TouchableHighlight, Animated, Easing, SafeAreaView } from 'react-native';
import Icon$1 from 'react-native-vector-icons/MaterialCommunityIcons';
import { TextInputMask } from 'react-native-masked-text';
import { Svg, Path } from 'react-native-svg';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */

function __rest(s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
}

function visit(level, parent, keys) {
    if (typeof level === 'object') {
        Object.keys(level).forEach((prop) => {
            visit(level[prop], `${parent}-${prop}`, keys);
        });
        return;
    }
    keys.set(parent, level);
}
function generateKeysPalette(colors) {
    const keys = new Map();
    Object.keys(colors).forEach((level) => {
        visit(colors[level], level, keys);
    });
    return Object.assign({}, Object.fromEntries(keys));
}
function checkHasTokensNull(tokens) {
    const { colors, spacing, screen, font, radius } = tokens;
    return !!colors && !!spacing && !!screen && !!font && !!radius;
}
function createTheme(tokens) {
    const hasNull = checkHasTokensNull(tokens);
    if (!hasNull) {
        throw new Error('Missing required Fields');
    }
    const { colors, spacing, screen, font, radius } = tokens;
    const palette = generateKeysPalette(colors);
    const theme = createTheme$1({
        colors: palette,
        spacing,
        breakpoints: screen.breakpoints,
        textVariants: font.variants,
        borderRadii: radius,
    });
    return theme;
}
function extendTheme(tokens, model) {
    const { colors, spacing, screen, font, radius } = tokens;
    const palette = generateKeysPalette(colors);
    const usefulTokens = {
        colors: palette || model.colors,
        spacing: spacing || model.spacing,
        breakpoints: (screen === null || screen === void 0 ? void 0 : screen.breakpoints) || model.breakpoints,
        textVariants: (font === null || font === void 0 ? void 0 : font.variants) || model.textVariants,
        borderRadii: radius || model.borderRadii,
    };
    const theme = createTheme$1(usefulTokens);
    return theme;
}

const tokens = {
    colors: {
        transparent: 'transparent',
        background: {
            default: '#FFFFFF',
            brand: '#1D5AF5',
        },
        fittings: {
            text: {
                primary: {
                    enabled: '#1A233D',
                    disabled: '#8F96A8',
                },
                secondary: {
                    enabled: '#58627F',
                    disabled: '#DADDE5',
                },
                inverse: {
                    enabled: '#FFFFFF',
                    disabled: '#8F96A8',
                },
            },
            border: {
                primary: {
                    enabled: '#58627F',
                    disabled: '#DADDE5',
                },
                inverse: {
                    enabled: '#FFFFFF',
                    disabled: '#8F96A8',
                },
            },
            icon: {
                primary: {
                    enabled: '#58627F',
                    disabled: '#DADDE5',
                },
                inverse: {
                    enabled: '#FFFFFF',
                    disabled: '#8F96A8',
                },
            },
            divider: '#BDBDBD',
        },
        surface: {
            default: '#FFFFFF',
            pressed: '#D1E3FE',
            select: '#E7F0FE',
            disabled: '#F0F2FA',
            overlay: '#58627F',
        },
        action: {
            main: {
                primary: '#1D5AF5',
                pressed: '#09238E',
            },
            confirm: {
                primary: '#15AB51',
                pressed: '#066347',
            },
            remove: {
                primary: '#D63429',
                pressed: '#7C0D21',
            },
            help: {
                primary: '#5487F9',
                pressed: '#1D5AF5',
            },
        },
        feedback: {
            positive: {
                fill: '#CEFACE',
                border: '#15AB51',
                icon: '#15AB51',
                text: '#15AB51',
            },
            negative: {
                fill: '#FCE4D4',
                border: '#D63429',
                icon: '#D63429',
                text: '#D63429',
            },
            notice: {
                fill: '#FFEECE',
                border: '#FF780E',
                icon: '#FF780E',
                text: '#FF780E',
            },
            informative: {
                fill: '#1D5AF5',
                border: '#1D5AF5',
                icon: '#1D5AF5',
                text: '#1D5AF5',
            },
        },
        accent: {
            fill: '#1D5AF5',
            border: '#1D5AF5',
            icon: '#1D5AF5',
            text: '#1D5AF5',
        },
        decorative: {
            one: {
                primary: '#FEF8CB',
                inverse: '#795300',
            },
            two: {
                primary: '#FFE3EF',
                inverse: '#65167A',
            },
            tree: {
                primary: '#F9E0FF',
                inverse: '#38137A',
            },
            four: {
                primary: '#E1FDF9',
                inverse: '#13436D',
            },
            five: {
                primary: '#F4FCCF',
                inverse: '#396504',
            },
        },
    },
    spacing: {
        quark: 4,
        nano: 8,
        xs: 16,
        sm: 24,
        md: 32,
        lg: 40,
    },
    screen: {
        breakpoints: {
            phone: 0,
            tablet: 768,
        },
    },
    font: {
        variants: {
            bold: {
                fontFamily: '"Public Sans", sans-serif',
                fontWeight: '700',
            },
            semibold: {
                fontFamily: '"Public Sans", sans-serif',
                fontWeight: '600',
            },
            medium: {
                fontFamily: '"Public Sans", sans-serif',
                fontWeight: '500',
            },
            regular: {
                fontFamily: '"Public Sans", sans-serif',
                fontWeight: '400',
            },
        },
    },
    radius: {
        none: 0,
        nano: 4,
        sm: 8,
        md: 16,
        lg: 24,
        pill: 500,
        circular: 9999,
    },
};
const theme = createTheme(tokens);

const borderWidthValues = {
    none: 0,
    xs: 1,
    sm: 2,
    md: 4,
    lg: 8,
};
const borderRadiusValues = {
    none: 0,
    nano: 4,
    sm: 8,
    md: 16,
    lg: 24,
    pill: 500,
    circular: 999,
};
const sizeHeightValues = {
    xs: 40,
    sm: 56,
    md: 64,
    lg: 108,
    xl: 140,
};
const fontSizeValues = {
    xs: 10,
    sm: 12,
    md: 14,
    lg: 16,
    xl: 20,
    '2xl': 24,
    '3xl': 32,
    '4xl': 40,
    '5xl': 48,
    '6xl': 56,
    '7xl': 64,
    '8xl': 72,
    '9xl': 80,
    '10xl': 96,
};
const lineHeightValues = {
    lg: 32,
    md: 25.6,
    sm: 19.2,
    xs: 16,
};
const letterSpacingValues = {
    lg: 1.5,
    md: 0.5,
    sm: 0,
    xs: -1.5,
};
const opacityValues = {
    'opacity-80': 0.8,
    'opacity-64': 0.64,
    'opacity-32': 0.32,
    'opacity-16': 0.16,
    'opacity-08': 0.08,
};
const shadowOffsetValues = {
    xs: { width: 0, height: 1.5 },
    sm: { width: 0, height: 4 },
    md: { width: 0, height: 10 },
    lg: { width: 0, height: 16 },
};
const shadowOpacityValues = {
    xs: 0.12,
    sm: 0.1,
    md: 0.1,
    lg: 0.1,
};
const shadowRadiusValues = {
    xs: 3.5,
    sm: 8,
    md: 16,
    lg: 32,
};
const spacingValues = {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
    '2xl': 40,
    '3xl': 48,
    '4xl': 56,
    '5xl': 64,
    '6xl': 80,
    '7xl': 120,
    '8xl': 160,
    '9xl': 200,
};
const sizeValues = {
    xs: 16,
    sm: 20,
    md: 24,
    lg: 32,
    xl: 48,
    '2xl': 96,
};
const borderWidth = createRestyleFunction({
    property: 'bw',
    styleProperty: 'borderWidth',
    transform: ({ value }) => borderWidthValues[value],
});
const borderBottomWidth = createRestyleFunction({
    property: 'bbw',
    styleProperty: 'borderBottomWidth',
    transform: ({ value }) => borderWidthValues[value],
});
const borderTopWidth = createRestyleFunction({
    property: 'btw',
    styleProperty: 'borderTopWidth',
    transform: ({ value }) => borderWidthValues[value],
});
const borderLeftWidth = createRestyleFunction({
    property: 'blw',
    styleProperty: 'borderLeftWidth',
    transform: ({ value }) => borderWidthValues[value],
});
const borderRightWidth = createRestyleFunction({
    property: 'brw',
    styleProperty: 'borderRightWidth',
    transform: ({ value }) => borderWidthValues[value],
});
const borderRadius = createRestyleFunction({
    property: 'br',
    styleProperty: 'borderRadius',
    transform: ({ value }) => borderRadiusValues[value],
});
const fontSize = createRestyleFunction({
    property: 'fs',
    styleProperty: 'fontSize',
    transform: ({ value }) => fontSizeValues[value],
});
const heightComponent = createRestyleFunction({
    property: 'h',
    styleProperty: 'height',
    transform: ({ value }) => sizeHeightValues[value],
});
const widthComponent = createRestyleFunction({
    property: 'w',
    styleProperty: 'width',
    transform: ({ value }) => sizeHeightValues[value],
});
const lineHeight = createRestyleFunction({
    property: 'lh',
    styleProperty: 'lineHeight',
    transform: ({ value }) => lineHeightValues[value],
});
const letterSpacing = createRestyleFunction({
    property: 'ls',
    styleProperty: 'letterSpacing',
    transform: ({ value }) => letterSpacingValues[value],
});
const opacity = createRestyleFunction({
    property: 'op',
    styleProperty: 'opacity',
    transform: ({ value }) => opacityValues[value],
});
const shadowOffset = createRestyleFunction({
    property: 'sof',
    styleProperty: 'shadowOffset',
    transform: ({ value }) => shadowOffsetValues[value],
});
const shadowRadius = createRestyleFunction({
    property: 'sr',
    styleProperty: 'shadowRadius',
    transform: ({ value }) => shadowRadiusValues[value],
});
const shadowOpacity = createRestyleFunction({
    property: 'sop',
    styleProperty: 'shadowOpacity',
    transform: ({ value }) => shadowOpacityValues[value],
});

const Box = createBox();
const CustomBox = (_a) => {
    var { children, testID } = _a, props = __rest(_a, ["children", "testID"]);
    return (React.createElement(Box, Object.assign({ testID: testID || 'Box' }, props), children));
};
var Box$1 = createRestyleComponent([
    borderRadius,
    borderWidth,
    borderBottomWidth,
    borderTopWidth,
    borderLeftWidth,
    borderRightWidth,
    opacity,
    shadowOffset,
    shadowRadius,
    shadowOpacity,
    heightComponent,
    widthComponent,
], CustomBox);

const Text = createText();
const CustomText = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    return (React.createElement(Text, Object.assign({ variant: "regular", color: "fittings-text-primary-enabled" }, props), children));
};
var Text$1 = createRestyleComponent([fontSize, lineHeight, letterSpacing], CustomText);

const DIMENSIONS = { width: '100%', height: '100%' };
const Avatar = (_a) => {
    var { image, label } = _a, props = __rest(_a, ["image", "label"]);
    const { borderRadii } = useTheme();
    const style = Object.assign(Object.assign({}, DIMENSIONS), { borderRadius: borderRadii.circular });
    const [fst, snd] = (label || '').split(' ');
    const initials = snd ? fst.replace(fst[1], snd) : fst;
    const [number] = ['one', 'two', 'tree', 'four', 'five'].sort(() => 0.5 - Math.random());
    return (React.createElement(Box$1, Object.assign({ h: "xs", w: "xs", borderRadius: "circular", alignItems: "center", justifyContent: "center", backgroundColor: `decorative-${number}-primary` }, props),
        image && !label && React.createElement(Image, { style: style, source: { uri: image } }),
        label && !image && React.createElement(Text$1, null, initials.substring(0, 2).toUpperCase())));
};

const Button = (_a) => {
    var { children, onPress, loading, textProps, variant = 'primary', disabled, icon } = _a, props = __rest(_a, ["children", "onPress", "loading", "textProps", "variant", "disabled", "icon"]);
    const { colors, borderRadii } = useTheme();
    const variantBgColor = {
        primary: !disabled ? 'action-main-primary' : 'surface-disabled',
        secondary: !disabled ? 'transparent' : 'surface-disabled',
        tertiary: 'transparent',
    };
    const variantPressedBgColor = {
        primary: colors['action-main-pressed'],
        secondary: colors.transparent,
        tertiary: colors.transparent,
    };
    const variantPressedTextColor = {
        primary: 'fittings-text-inverse-enabled',
        secondary: 'action-main-pressed',
        tertiary: 'action-main-pressed',
    };
    const variantPressedBorderColor = {
        primary: 'fittings-text-inverse-enabled',
        secondary: 'action-main-pressed',
        tertiary: 'action-main-pressed',
    };
    const variantBorderWidth = {
        primary: 'none',
        secondary: 'xs',
        tertiary: 'none',
    };
    const variantColor = {
        primary: !disabled
            ? 'fittings-text-inverse-enabled'
            : 'fittings-text-secondary-disabled',
        secondary: !disabled
            ? 'action-main-primary'
            : 'fittings-text-secondary-disabled',
        tertiary: !disabled
            ? 'action-main-primary'
            : 'fittings-text-secondary-disabled',
    };
    const variantIconColor = {
        primary: !disabled
            ? colors['fittings-icon-inverse-enabled']
            : colors['fittings-icon-inverse-disabled'],
        secondary: !disabled
            ? colors['action-main-primary']
            : colors['fittings-icon-primary-disabled'],
        tertiary: !disabled
            ? colors['action-main-primary']
            : colors['fittings-icon-primary-disabled'],
    };
    const variantLoadingColor = {
        primary: colors['fittings-icon-inverse-enabled'],
        secondary: colors['action-main-primary'],
        tertiary: colors['action-main-primary'],
    };
    return (React.createElement(Box$1, Object.assign({ backgroundColor: variantBgColor[variant], borderColor: variantPressedBorderColor[variant], bw: variantBorderWidth[variant], borderRadius: "nano", shadowColor: "fittings-text-primary-enabled", minHeight: { phone: 48, tablet: 48 }, alignItems: "center", justifyContent: "center", flexShrink: 5, testID: "button-box" }, props),
        React.createElement(Pressable, { android_disableSound: loading, onPress: () => (!loading ? onPress() : () => undefined), disabled: disabled, testID: "ds-button", style: ({ pressed }) => [
                {
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                    minWidth: '100%',
                    height: '100%',
                    opacity: disabled ? 0.5 : 1,
                    borderRadius: borderRadii.nano,
                },
                {
                    backgroundColor: pressed && !loading
                        ? variantPressedBgColor[variant]
                        : 'transparent',
                },
            ] }, ({ pressed }) => loading ? (React.createElement(ActivityIndicator, { size: 16, color: variantLoadingColor[variant] })) : (React.createElement(Box$1, { flexDirection: "row", alignItems: "center", justifyContent: "center" },
            icon && (React.createElement(Box$1, { mr: "quark" },
                React.createElement(Icon$1, { name: icon, size: 24, color: variantIconColor[variant] }))),
            React.createElement(Text$1, Object.assign({ fontWeight: "600", fs: "md", color: pressed
                    ? variantPressedTextColor[variant]
                    : variantColor[variant] }, textProps), children))))));
};
var Button$1 = createRestyleComponent([opacity, shadowOffset, shadowRadius, shadowOpacity], Button);

const useStyles$3 = () => {
    const { colors, borderRadii } = useTheme();
    return StyleSheet.create({
        customStyle: {
            shadowOffset: shadowOffsetValues.lg,
            shadowColor: colors['fittings-icon-primary-enabled'],
            shadowRadius: shadowRadiusValues.sm,
            shadowOpacity: 0.3,
            backgroundColor: colors['surface-default'],
            minHeight: 'auto',
            minWidth: 'auto',
            padding: 0,
            borderRadius: borderRadii.md,
            width: '100%',
        },
    });
};

const CustomPaper = (_a) => {
    var { children, style, testID, onPress, onPressIn, onPressOut, onLongPress, onBlur, onFocus, delayLongPress, disabled, hitSlop, pressRetentionOffset, android_disableSound, android_ripple, testOnly_pressed, px, py, p, padding, pb, paddingBottom, pl, paddingLeft, pr, paddingRight, pt, paddingTop, height, width, flexDirection, justifyContent, alignItems } = _a, props = __rest(_a, ["children", "style", "testID", "onPress", "onPressIn", "onPressOut", "onLongPress", "onBlur", "onFocus", "delayLongPress", "disabled", "hitSlop", "pressRetentionOffset", "android_disableSound", "android_ripple", "testOnly_pressed", "px", "py", "p", "padding", "pb", "paddingBottom", "pl", "paddingLeft", "pr", "paddingRight", "pt", "paddingTop", "height", "width", "flexDirection", "justifyContent", "alignItems"]);
    const styles = useStyles$3();
    const { spacing } = useTheme();
    const pressableProps = {
        onPress,
        onPressIn,
        onPressOut,
        onLongPress,
        onBlur,
        onFocus,
        delayLongPress,
        disabled,
        hitSlop,
        pressRetentionOffset,
        android_disableSound,
        android_ripple,
        testOnly_pressed,
        flexDirection,
        justifyContent,
        alignItems,
    };
    return (React.createElement(Box$1, Object.assign({ bg: "surface-default", minHeight: "auto", minWidth: "auto", br: "md", overflow: "scroll", testID: "pressable-box" }, props),
        React.createElement(Pressable, Object.assign({ testID: testID || 'pressable', style: ({ pressed }) => [
                {
                    elevation: pressed ? 1 : 3,
                },
                Object.assign({}, styles.customStyle),
                {
                    padding: spacing[(padding || p)],
                    paddingTop: spacing[(paddingTop || pt || py)],
                    paddingBottom: spacing[(paddingBottom || pb || py)],
                    paddingRight: spacing[(paddingRight || pr || px)],
                    paddingLeft: spacing[(paddingLeft || pl || px)],
                    flexDirection: flexDirection,
                    justifyContent: justifyContent,
                    alignItems: alignItems,
                    height: height,
                    width: width,
                },
                Object.assign({}, style),
            ] }, pressableProps), children)));
};
var Paper = createRestyleComponent([
    borderRadius,
    borderWidth,
    opacity,
    shadowOffset,
    shadowRadius,
    shadowOpacity,
    heightComponent,
], CustomPaper);

const useStyles$2 = ({ checked, disabled, required, }) => {
    const { colors } = useTheme();
    let borderColor;
    if (disabled)
        borderColor = colors['fittings-border-primary-disabled'];
    else if (required)
        borderColor = colors['feedback-negative-border'];
    else
        borderColor = colors['fittings-border-primary-enabled'];
    let bg;
    if (disabled)
        bg = colors['surface-disabled'];
    else if (checked)
        bg = colors['feedback-informative-fill'];
    else
        bg = colors.transparent;
    return StyleSheet.create({
        checkBox: {
            width: 24,
            height: 24,
            borderWidth: checked ? 0 : 2,
            borderRadius: 4,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: bg,
            borderColor,
        },
    });
};

const Checkbox = (_a) => {
    var { label, onChange, value, disabled, required } = _a, props = __rest(_a, ["label", "onChange", "value", "disabled", "required"]);
    const styles = useStyles$2({
        checked: value,
        disabled: !!disabled,
        required: !!required,
    });
    const handleChange = () => {
        if (onChange) {
            onChange();
        }
    };
    return (React.createElement(Box$1, Object.assign({ flexDirection: "row", alignItems: "center" }, props),
        React.createElement(Pressable, { style: styles.checkBox, onPress: handleChange, disabled: disabled, testID: "checkbox" }, value ? React.createElement(Icon$1, { name: "check", size: 16, color: "#fff" }) : React.createElement(Box$1, null)),
        React.createElement(Text$1, { fs: "md", color: disabled
                ? 'fittings-text-primary-disabled'
                : 'fittings-text-primary-enabled', ml: { phone: 'nano', tablet: 'nano' }, testID: "checkbox-label" }, label)));
};

const optionsPerType = {
    date: {
        mask: '99/99/9999',
    },
    money: {
        unit: 'R$ ',
    },
};
const Input = (_a, ref) => {
    var { placeholder, editable, multiline, numberOfLines, maxLength, keyboardType, keyboardAppearance, autoCapitalize, style, returnKeyType, onChangeText, type, options, value, secureTextEntry, renderRightIcon } = _a, props = __rest(_a, ["placeholder", "editable", "multiline", "numberOfLines", "maxLength", "keyboardType", "keyboardAppearance", "autoCapitalize", "style", "returnKeyType", "onChangeText", "type", "options", "value", "secureTextEntry", "renderRightIcon"]);
    const [isFilled, setIsFilled] = useState(false);
    const inputElementRef = useRef(null);
    const [text, setText] = useState('');
    const [rawText, setRawText] = useState('');
    const { colors } = useTheme();
    const handleChange = useCallback((newValue, rawValue) => {
        var _a;
        setText(newValue);
        setRawText(rawValue);
        if (onChangeText && rawValue) {
            onChangeText(newValue, rawValue);
        }
        else if (onChangeText) {
            onChangeText(newValue);
        }
        if (inputElementRef.current) {
            inputElementRef.current.value = rawValue || newValue;
        }
        setIsFilled(!!((_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.value));
    }, [onChangeText]);
    const handleChangeMaskedText = useCallback((maskedText, unmaskedText) => {
        if (maskedText || unmaskedText) {
            setIsFilled(true);
        }
        setText(maskedText);
        setRawText(unmaskedText);
        if (onChangeText && unmaskedText) {
            onChangeText(maskedText, unmaskedText);
        }
        else if (onChangeText) {
            onChangeText(unmaskedText);
        }
    }, [onChangeText]);
    const handleClear = useCallback(() => {
        var _a, _b;
        handleChange('', '');
        (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.clear) === null || _b === void 0 ? void 0 : _b.call(_a);
        setIsFilled(false);
    }, [handleChange]);
    useImperativeHandle(ref, () => {
        var _a;
        return ({
            value: (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.value,
            clear: () => handleClear(),
            focus: () => {
                var _a, _b, _c, _d;
                (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
                (_d = (_c = inputElementRef.current) === null || _c === void 0 ? void 0 : _c._inputElement) === null || _d === void 0 ? void 0 : _d.focus();
            },
            blur: () => { var _a, _b; return (_b = (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a); },
        });
    });
    const renderRightComponent = useCallback(() => {
        if (renderRightIcon) {
            return renderRightIcon();
        }
        if (isFilled) {
            return (React.createElement(TouchableWithoutFeedback, { onPress: handleClear },
                React.createElement(Svg, { width: 24, height: 24, viewBox: "0 0 24 24" },
                    React.createElement(Path, { fill: colors['fittings-icon-primary-enabled'], d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" }))));
        }
        return React.createElement(React.Fragment, null);
    }, [colors, handleClear, isFilled, renderRightIcon]);
    return (React.createElement(Box$1, Object.assign({ flexDirection: "row", alignItems: "center", testID: "input-box", bg: "surface-default" }, props),
        type ? (React.createElement(TextInputMask, { type: type === 'date' ? 'custom' : type, value: text || rawText, options: optionsPerType[type] || options, testID: "Input", placeholder: placeholder, placeholderTextColor: colors['fittings-text-secondary-enabled'], includeRawValueInChangeText: true, onChangeText: handleChangeMaskedText, onSubmitEditing: () => {
                Keyboard.dismiss();
            }, editable: editable, multiline: multiline, maxLength: maxLength, keyboardType: keyboardType, keyboardAppearance: keyboardAppearance, returnKeyType: returnKeyType, numberOfLines: numberOfLines, autoCapitalize: autoCapitalize, selectionColor: colors['fittings-text-secondary-enabled'], style: style, secureTextEntry: secureTextEntry })) : (React.createElement(TextInput, { textContentType: "password", testID: "Input", ref: inputElementRef, placeholder: placeholder, placeholderTextColor: colors['fittings-text-secondary-enabled'], onChangeText: handleChange, onSubmitEditing: () => {
                Keyboard.dismiss();
            }, value: value, editable: editable, multiline: multiline, maxLength: maxLength, keyboardType: keyboardType, keyboardAppearance: keyboardAppearance, returnKeyType: returnKeyType, numberOfLines: numberOfLines, autoCapitalize: autoCapitalize, selectionColor: colors['fittings-text-secondary-enabled'], style: style, secureTextEntry: secureTextEntry })),
        renderRightComponent()));
};
var Input$1 = forwardRef(Input);

const Icon = (_a) => {
    var { name, color, size } = _a, props = __rest(_a, ["name", "color", "size"]);
    const { colors } = useTheme();
    return (React.createElement(Box$1, Object.assign({ alignItems: "center", justifyContent: "center", borderRadius: "circular", backgroundColor: "transparent" }, props),
        React.createElement(Icon$1, { name: name, size: size || 16, color: color || colors['fittings-icon-primary-enabled'] })));
};

const Tag = (_a) => {
    var { label, size, icon, color } = _a, props = __rest(_a, ["label", "size", "icon", "color"]);
    const { colors } = useTheme();
    return (React.createElement(Box$1, Object.assign({ py: "quark", px: "nano", borderRadius: "sm", flexDirection: "row", justifyContent: "center", alignItems: "center" }, props),
        icon && (React.createElement(Icon, { color: colors[color || 'fittings-text-primary-enabled'], name: icon, size: 16 })),
        React.createElement(Text$1, { fs: size === 'small' ? 'xs' : 'sm', fontWeight: "500", color: color || 'fittings-text-primary-enabled', m: "quark" }, label)));
};

const ListItem = (_a) => {
    var { title, icon, avatar, text, tags, rightComponent, bottomComponent, onPress, inverse } = _a, props = __rest(_a, ["title", "icon", "avatar", "text", "tags", "rightComponent", "bottomComponent", "onPress", "inverse"]);
    const renderAvatar = () => {
        if (avatar === null || avatar === void 0 ? void 0 : avatar.label) {
            return React.createElement(Avatar, { label: avatar === null || avatar === void 0 ? void 0 : avatar.label });
        }
        if (avatar === null || avatar === void 0 ? void 0 : avatar.image) {
            return React.createElement(Avatar, { image: avatar === null || avatar === void 0 ? void 0 : avatar.image });
        }
        return React.createElement(React.Fragment, null);
    };
    const renderTitle = useCallback((txt) => inverse ? (React.createElement(Text$1, { fs: "md", fontWeight: "400", color: "fittings-text-secondary-enabled" }, txt)) : (React.createElement(Text$1, { fs: "md", fontWeight: "500", color: "fittings-text-primary-enabled" }, txt)), [inverse]);
    const renderInfo = useCallback((txt) => inverse ? (React.createElement(Text$1, { fs: "md", fontWeight: "500", color: "fittings-text-primary-enabled" }, txt)) : (React.createElement(Text$1, { fs: "md", fontWeight: "400", color: "fittings-text-secondary-enabled" }, txt)), [inverse]);
    return (React.createElement(TouchableWithoutFeedback, { onPress: onPress },
        React.createElement(Box$1, Object.assign({ backgroundColor: "transparent" }, props),
            React.createElement(Box$1, { py: "xs", px: "xs", flexDirection: "row", alignItems: "center" },
                avatar && renderAvatar(),
                icon && !avatar && React.createElement(Icon, { h: "xs", w: "xs", name: icon, size: 32 }),
                React.createElement(Box$1, { ml: "xs", flexDirection: "column", justifyContent: "center" },
                    renderTitle(title),
                    text && renderInfo(text),
                    tags && (React.createElement(Box$1, { flexDirection: "row", mt: "quark" }, tags.map((tag, i) => (React.createElement(Box$1, { key: tag + i, mr: "quark" },
                        React.createElement(Tag, { label: tag, size: "small", backgroundColor: "decorative-two-primary", color: "decorative-two-inverse" }))))))),
                rightComponent && (React.createElement(Box$1, { position: "absolute", right: 0, mx: "xs", alignItems: "flex-end" }, rightComponent))),
            bottomComponent,
            React.createElement(Box$1, { borderColor: "fittings-divider", borderBottomWidth: 1 }))));
};

const List = (_a) => {
    var { inverse } = _a, props = __rest(_a, ["inverse"]);
    return (React.createElement(FlatList, Object.assign({}, props, { keyExtractor: (item, i) => item.title + i.toString(), renderItem: ({ item }) => (React.createElement(ListItem, Object.assign({ inverse: inverse }, item))) })));
};

const useStyles$1 = ({ checked, disabled, required, }) => {
    const theme = useTheme();
    let borderColor;
    if (disabled)
        borderColor = theme.colors['fittings-border-primary-disabled'];
    else if (checked)
        borderColor = theme.colors['feedback-informative-border'];
    else if (required)
        borderColor = theme.colors['feedback-negative-border'];
    else
        borderColor = theme.colors['fittings-border-primary-enabled'];
    let bg;
    if (disabled)
        bg = theme.colors['surface-disabled'];
    else
        bg = theme.colors.transparent;
    return StyleSheet.create({
        radioButtonItem: {
            width: 24,
            height: 24,
            borderWidth: checked ? 5 : 2,
            borderRadius: 12,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: bg,
            borderColor,
        },
    });
};

const RadioButtonItem = ({ value, label, required, disabled, selectedValue, setSelectedValue, }) => {
    const [isMarked, setIsMarked] = useState(value === selectedValue);
    const styles = useStyles$1({
        checked: isMarked,
        disabled: !!disabled,
        required: !!required,
    });
    const toogle = () => setSelectedValue(value);
    useEffect(() => {
        setIsMarked(value === selectedValue);
    }, [selectedValue, value]);
    return (React.createElement(Box$1, { flexDirection: "row", alignItems: "center", my: "quark" },
        React.createElement(TouchableHighlight, { style: styles.radioButtonItem, onPress: toogle },
            React.createElement(Box$1, null)),
        React.createElement(TouchableWithoutFeedback, { onPress: toogle },
            React.createElement(Text$1, { ml: "nano" }, label))));
};

const RadioButton = ({ label, options, initial = '' }, ref) => {
    const [selectedValue, setSelectedValue] = useState(initial);
    useImperativeHandle(ref, () => ({
        value: selectedValue,
    }), [selectedValue]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Text$1, { fs: "md", fontWeight: "700", color: "fittings-text-primary-enabled", mb: "nano" }, label),
        options.map(item => (React.createElement(RadioButtonItem, { key: item.label, value: item.value, label: item.label, required: item.required, disabled: item.disabled, selectedValue: selectedValue, setSelectedValue: setSelectedValue })))));
};
var RadioButton$1 = forwardRef(RadioButton);

const useStyles = ({ disabled }) => {
    const theme = useTheme();
    const dynamicStyles = {
        container: (anim) => ({
            alignItems: 'center',
            backgroundColor: disabled
                ? theme.colors['surface-disabled']
                : anim.interpolate({
                    inputRange: [0, 1],
                    outputRange: [
                        theme.colors.transparent,
                        theme.colors['feedback-informative-fill'],
                    ],
                }),
            borderRadius: 25,
            height: 24,
            width: 40,
            justifyContent: 'center',
            borderWidth: disabled
                ? borderWidthValues.none
                : anim.interpolate({
                    inputRange: [0, 1],
                    outputRange: [borderWidthValues.sm, 0],
                }),
            borderColor: disabled
                ? theme.colors['fittings-border-primary-disabled']
                : theme.colors['fittings-border-primary-enabled'],
        }),
        circle: (anim) => ({
            transform: [
                {
                    translateX: anim.interpolate({
                        inputRange: [0, 1],
                        outputRange: [-8, 8],
                    }),
                },
            ],
            backgroundColor: disabled
                ? theme.colors['fittings-icon-primary-disabled']
                : anim.interpolate({
                    inputRange: [0, 1],
                    outputRange: [
                        theme.colors['fittings-icon-primary-enabled'],
                        theme.colors['fittings-icon-inverse-enabled'],
                    ],
                }),
        }),
    };
    const basicStyles = {
        circle: {
            width: 16,
            height: 16,
            backgroundColor: 'red',
            borderRadius: 8,
        },
    };
    return {
        dynamicStyles,
        basicStyles,
    };
};

const DSSwitch = (_a) => {
    var { onChange, value, disabled } = _a, props = __rest(_a, ["onChange", "value", "disabled"]);
    const animation = useRef(new Animated.Value(value ? 1 : 0)).current;
    const [toggled, setToggled] = useState(value);
    const { basicStyles, dynamicStyles } = useStyles({ disabled });
    const animate = useCallback(() => {
        Animated.timing(animation, {
            duration: 200,
            toValue: +!value,
            easing: Easing.ease,
            useNativeDriver: false,
        }).start();
    }, [animation, value]);
    return (React.createElement(Box$1, Object.assign({}, props),
        React.createElement(TouchableWithoutFeedback, { onPress: () => {
                setToggled(!toggled);
                animate();
                onChange();
            }, testID: "ds-switch", disabled: disabled },
            React.createElement(Animated.View, { style: [dynamicStyles.container(animation)] },
                React.createElement(Animated.View, { style: [basicStyles.circle, dynamicStyles.circle(animation)] })))));
};

const TextArea = (_a, ref) => {
    var _b;
    var { label, placeholder, variant, status, maxLength, assistiveText, autoCapitalize, keyboardType, value } = _a, props = __rest(_a, ["label", "placeholder", "variant", "status", "maxLength", "assistiveText", "autoCapitalize", "keyboardType", "value"]);
    const [isFocused, setIsFocused] = useState(false);
    const [countChar, setCountChar] = useState(0);
    const { colors, textVariants } = useTheme();
    const statusKeyPair = {
        error: colors['feedback-negative-icon'],
        success: colors['feedback-positive-icon'],
        default: colors['fittings-icon-primary-enabled'],
    };
    const variantHeight = {
        small: 'lg',
        medium: 'xl',
    };
    const statusBorderColor = {
        error: 'feedback-negative-border',
        success: 'feedback-positive-border',
        default: 'fittings-border-primary-enabled',
    };
    const handleFocus = useCallback(() => {
        setIsFocused(true);
    }, []);
    const handleBlur = useCallback(() => {
        setIsFocused(false);
    }, []);
    return (React.createElement(SafeAreaView, null,
        !!label && (React.createElement(Text$1, { fs: "md", fontWeight: "700", color: "fittings-text-secondary-enabled" }, label)),
        React.createElement(Input$1, Object.assign({ ref: ref, placeholder: placeholder, h: variantHeight[variant], bw: "sm", borderColor: isFocused
                ? 'feedback-informative-border'
                : statusBorderColor[status || 'default'], borderRadius: "sm", multiline: true, keyboardType: keyboardType, autoCapitalize: autoCapitalize, maxLength: maxLength, numberOfLines: 7, my: "quark", px: "xs", py: "nano", value: value, onChangeText: newValue => setCountChar(newValue.length), onFocus: handleFocus, onBlur: handleBlur, style: {
                flex: 1,
                fontFamily: (_b = textVariants === null || textVariants === void 0 ? void 0 : textVariants.regular) === null || _b === void 0 ? void 0 : _b.fontFamily,
                textAlignVertical: 'top',
                color: colors['fittings-text-primary-enabled'],
            } }, props)),
        React.createElement(Box$1, { flexDirection: "row", justifyContent: assistiveText ? 'space-between' : 'flex-end', height: 16 },
            !!assistiveText && (React.createElement(Box$1, { flexDirection: "row", alignItems: "center" },
                status === 'success' && (React.createElement(Icon$1, { name: "check-circle", size: 16, color: statusKeyPair[status || 'default'] })),
                status === 'error' && (React.createElement(Icon$1, { name: "alert-circle", size: 16, color: statusKeyPair[status || 'default'] })),
                React.createElement(Text$1, { ml: "quark", fs: "sm", color: "fittings-text-primary-enabled" }, assistiveText))),
            !!maxLength && (React.createElement(Text$1, { color: "fittings-text-primary-enabled" },
                countChar,
                "/",
                maxLength)))));
};
var TextArea$1 = forwardRef(TextArea);

const TextField = (_a, ref) => {
    var { label, placeholder, variant, assistiveText, status, keyboardType, autoCapitalize, returnKeyType, value } = _a, props = __rest(_a, ["label", "placeholder", "variant", "assistiveText", "status", "keyboardType", "autoCapitalize", "returnKeyType", "value"]);
    const [isFocused, setIsFocused] = useState(false);
    const { colors } = useTheme();
    const statusKeyPair = {
        error: colors['feedback-negative-icon'],
        success: colors['feedback-positive-icon'],
        default: colors['fittings-icon-primary-enabled'],
    };
    const statusBorderColor = {
        error: 'feedback-negative-border',
        success: 'feedback-positive-border',
        default: 'fittings-border-primary-enabled',
    };
    const variantHeight = {
        small: 'xs',
        medium: 'sm',
    };
    const handleFocus = useCallback(() => {
        setIsFocused(true);
    }, []);
    const handleBlur = useCallback(() => {
        setIsFocused(false);
    }, []);
    const renderIconPerStatus = () => {
        if (status === 'success') {
            return (React.createElement(Icon$1, { name: "check-circle", size: 16, color: statusKeyPair[status] }));
        }
        if (status === 'error') {
            return (React.createElement(Icon$1, { name: "alert-circle", size: 16, color: statusKeyPair[status] }));
        }
        return React.createElement(React.Fragment, null);
    };
    return (React.createElement(SafeAreaView, null,
        !!label && (React.createElement(Text$1, { fs: "md", fontWeight: "700", color: "fittings-text-secondary-enabled" }, label)),
        React.createElement(Input$1, Object.assign({ ref: ref, placeholder: placeholder, h: variantHeight[variant], keyboardType: keyboardType, autoCapitalize: autoCapitalize, returnKeyType: returnKeyType, borderColor: isFocused
                ? 'feedback-informative-border'
                : statusBorderColor[status || 'default'], bw: "sm", value: value, borderRadius: "sm", my: "quark", px: "xs", onFocus: handleFocus, onBlur: handleBlur, style: {
                flex: 1,
                color: colors['fittings-text-primary-enabled'],
            } }, props)),
        React.createElement(Box$1, { flexDirection: "row", alignItems: "center", height: 16 },
            renderIconPerStatus(),
            !!assistiveText && (React.createElement(Text$1, { ml: "quark", fs: "sm", color: "fittings-text-primary-enabled" }, assistiveText)))));
};
var TextField$1 = forwardRef(TextField);

export { Avatar, Box$1 as Box, Button$1 as Button, Checkbox, Input$1 as Input, List, ListItem, Paper, RadioButton$1 as RadioButton, DSSwitch as Switch, Text$1 as Text, TextArea$1 as TextArea, TextField$1 as TextField, borderBottomWidth, borderLeftWidth, borderRadius, borderRadiusValues, borderRightWidth, borderTopWidth, borderWidth, borderWidthValues, createTheme, extendTheme, fontSize, fontSizeValues, heightComponent, letterSpacing, letterSpacingValues, lineHeight, lineHeightValues, opacity, opacityValues, shadowOffset, shadowOffsetValues, shadowOpacity, shadowOpacityValues, shadowRadius, shadowRadiusValues, sizeHeightValues, sizeValues, spacingValues, theme as themeInstitucional, widthComponent };