coral-ui
Version:
Biblioteca de components criada pelo Design System para os produtos da Pulse criada em react-native
1,100 lines (1,067 loc) • 48.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var restyle = require('@shopify/restyle');
var React = require('react');
var reactNative = require('react-native');
var Icon$1 = require('react-native-vector-icons/MaterialCommunityIcons');
var reactNativeMaskedText = require('react-native-masked-text');
var reactNativeSvg = require('react-native-svg');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon$1);
/*! *****************************************************************************
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 = restyle.createTheme({
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 = restyle.createTheme(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 = restyle.createRestyleFunction({
property: 'bw',
styleProperty: 'borderWidth',
transform: ({ value }) => borderWidthValues[value],
});
const borderBottomWidth = restyle.createRestyleFunction({
property: 'bbw',
styleProperty: 'borderBottomWidth',
transform: ({ value }) => borderWidthValues[value],
});
const borderTopWidth = restyle.createRestyleFunction({
property: 'btw',
styleProperty: 'borderTopWidth',
transform: ({ value }) => borderWidthValues[value],
});
const borderLeftWidth = restyle.createRestyleFunction({
property: 'blw',
styleProperty: 'borderLeftWidth',
transform: ({ value }) => borderWidthValues[value],
});
const borderRightWidth = restyle.createRestyleFunction({
property: 'brw',
styleProperty: 'borderRightWidth',
transform: ({ value }) => borderWidthValues[value],
});
const borderRadius = restyle.createRestyleFunction({
property: 'br',
styleProperty: 'borderRadius',
transform: ({ value }) => borderRadiusValues[value],
});
const fontSize = restyle.createRestyleFunction({
property: 'fs',
styleProperty: 'fontSize',
transform: ({ value }) => fontSizeValues[value],
});
const heightComponent = restyle.createRestyleFunction({
property: 'h',
styleProperty: 'height',
transform: ({ value }) => sizeHeightValues[value],
});
const widthComponent = restyle.createRestyleFunction({
property: 'w',
styleProperty: 'width',
transform: ({ value }) => sizeHeightValues[value],
});
const lineHeight = restyle.createRestyleFunction({
property: 'lh',
styleProperty: 'lineHeight',
transform: ({ value }) => lineHeightValues[value],
});
const letterSpacing = restyle.createRestyleFunction({
property: 'ls',
styleProperty: 'letterSpacing',
transform: ({ value }) => letterSpacingValues[value],
});
const opacity = restyle.createRestyleFunction({
property: 'op',
styleProperty: 'opacity',
transform: ({ value }) => opacityValues[value],
});
const shadowOffset = restyle.createRestyleFunction({
property: 'sof',
styleProperty: 'shadowOffset',
transform: ({ value }) => shadowOffsetValues[value],
});
const shadowRadius = restyle.createRestyleFunction({
property: 'sr',
styleProperty: 'shadowRadius',
transform: ({ value }) => shadowRadiusValues[value],
});
const shadowOpacity = restyle.createRestyleFunction({
property: 'sop',
styleProperty: 'shadowOpacity',
transform: ({ value }) => shadowOpacityValues[value],
});
const Box = restyle.createBox();
const CustomBox = (_a) => {
var { children, testID } = _a, props = __rest(_a, ["children", "testID"]);
return (React__default["default"].createElement(Box, Object.assign({ testID: testID || 'Box' }, props), children));
};
var Box$1 = restyle.createRestyleComponent([
borderRadius,
borderWidth,
borderBottomWidth,
borderTopWidth,
borderLeftWidth,
borderRightWidth,
opacity,
shadowOffset,
shadowRadius,
shadowOpacity,
heightComponent,
widthComponent,
], CustomBox);
const Text = restyle.createText();
const CustomText = (_a) => {
var { children } = _a, props = __rest(_a, ["children"]);
return (React__default["default"].createElement(Text, Object.assign({ variant: "regular", color: "fittings-text-primary-enabled" }, props), children));
};
var Text$1 = restyle.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 } = restyle.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__default["default"].createElement(Box$1, Object.assign({ h: "xs", w: "xs", borderRadius: "circular", alignItems: "center", justifyContent: "center", backgroundColor: `decorative-${number}-primary` }, props),
image && !label && React__default["default"].createElement(reactNative.Image, { style: style, source: { uri: image } }),
label && !image && React__default["default"].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 } = restyle.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__default["default"].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__default["default"].createElement(reactNative.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__default["default"].createElement(reactNative.ActivityIndicator, { size: 16, color: variantLoadingColor[variant] })) : (React__default["default"].createElement(Box$1, { flexDirection: "row", alignItems: "center", justifyContent: "center" },
icon && (React__default["default"].createElement(Box$1, { mr: "quark" },
React__default["default"].createElement(Icon__default["default"], { name: icon, size: 24, color: variantIconColor[variant] }))),
React__default["default"].createElement(Text$1, Object.assign({ fontWeight: "600", fs: "md", color: pressed
? variantPressedTextColor[variant]
: variantColor[variant] }, textProps), children))))));
};
var Button$1 = restyle.createRestyleComponent([opacity, shadowOffset, shadowRadius, shadowOpacity], Button);
const useStyles$3 = () => {
const { colors, borderRadii } = restyle.useTheme();
return reactNative.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 } = restyle.useTheme();
const pressableProps = {
onPress,
onPressIn,
onPressOut,
onLongPress,
onBlur,
onFocus,
delayLongPress,
disabled,
hitSlop,
pressRetentionOffset,
android_disableSound,
android_ripple,
testOnly_pressed,
flexDirection,
justifyContent,
alignItems,
};
return (React__default["default"].createElement(Box$1, Object.assign({ bg: "surface-default", minHeight: "auto", minWidth: "auto", br: "md", overflow: "scroll", testID: "pressable-box" }, props),
React__default["default"].createElement(reactNative.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 = restyle.createRestyleComponent([
borderRadius,
borderWidth,
opacity,
shadowOffset,
shadowRadius,
shadowOpacity,
heightComponent,
], CustomPaper);
const useStyles$2 = ({ checked, disabled, required, }) => {
const { colors } = restyle.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 reactNative.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__default["default"].createElement(Box$1, Object.assign({ flexDirection: "row", alignItems: "center" }, props),
React__default["default"].createElement(reactNative.Pressable, { style: styles.checkBox, onPress: handleChange, disabled: disabled, testID: "checkbox" }, value ? React__default["default"].createElement(Icon__default["default"], { name: "check", size: 16, color: "#fff" }) : React__default["default"].createElement(Box$1, null)),
React__default["default"].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] = React.useState(false);
const inputElementRef = React.useRef(null);
const [text, setText] = React.useState('');
const [rawText, setRawText] = React.useState('');
const { colors } = restyle.useTheme();
const handleChange = React.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 = React.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 = React.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]);
React.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 = React.useCallback(() => {
if (renderRightIcon) {
return renderRightIcon();
}
if (isFilled) {
return (React__default["default"].createElement(reactNative.TouchableWithoutFeedback, { onPress: handleClear },
React__default["default"].createElement(reactNativeSvg.Svg, { width: 24, height: 24, viewBox: "0 0 24 24" },
React__default["default"].createElement(reactNativeSvg.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__default["default"].createElement(React__default["default"].Fragment, null);
}, [colors, handleClear, isFilled, renderRightIcon]);
return (React__default["default"].createElement(Box$1, Object.assign({ flexDirection: "row", alignItems: "center", testID: "input-box", bg: "surface-default" }, props),
type ? (React__default["default"].createElement(reactNativeMaskedText.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: () => {
reactNative.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__default["default"].createElement(reactNative.TextInput, { textContentType: "password", testID: "Input", ref: inputElementRef, placeholder: placeholder, placeholderTextColor: colors['fittings-text-secondary-enabled'], onChangeText: handleChange, onSubmitEditing: () => {
reactNative.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 = React.forwardRef(Input);
const Icon = (_a) => {
var { name, color, size } = _a, props = __rest(_a, ["name", "color", "size"]);
const { colors } = restyle.useTheme();
return (React__default["default"].createElement(Box$1, Object.assign({ alignItems: "center", justifyContent: "center", borderRadius: "circular", backgroundColor: "transparent" }, props),
React__default["default"].createElement(Icon__default["default"], { 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 } = restyle.useTheme();
return (React__default["default"].createElement(Box$1, Object.assign({ py: "quark", px: "nano", borderRadius: "sm", flexDirection: "row", justifyContent: "center", alignItems: "center" }, props),
icon && (React__default["default"].createElement(Icon, { color: colors[color || 'fittings-text-primary-enabled'], name: icon, size: 16 })),
React__default["default"].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__default["default"].createElement(Avatar, { label: avatar === null || avatar === void 0 ? void 0 : avatar.label });
}
if (avatar === null || avatar === void 0 ? void 0 : avatar.image) {
return React__default["default"].createElement(Avatar, { image: avatar === null || avatar === void 0 ? void 0 : avatar.image });
}
return React__default["default"].createElement(React__default["default"].Fragment, null);
};
const renderTitle = React.useCallback((txt) => inverse ? (React__default["default"].createElement(Text$1, { fs: "md", fontWeight: "400", color: "fittings-text-secondary-enabled" }, txt)) : (React__default["default"].createElement(Text$1, { fs: "md", fontWeight: "500", color: "fittings-text-primary-enabled" }, txt)), [inverse]);
const renderInfo = React.useCallback((txt) => inverse ? (React__default["default"].createElement(Text$1, { fs: "md", fontWeight: "500", color: "fittings-text-primary-enabled" }, txt)) : (React__default["default"].createElement(Text$1, { fs: "md", fontWeight: "400", color: "fittings-text-secondary-enabled" }, txt)), [inverse]);
return (React__default["default"].createElement(reactNative.TouchableWithoutFeedback, { onPress: onPress },
React__default["default"].createElement(Box$1, Object.assign({ backgroundColor: "transparent" }, props),
React__default["default"].createElement(Box$1, { py: "xs", px: "xs", flexDirection: "row", alignItems: "center" },
avatar && renderAvatar(),
icon && !avatar && React__default["default"].createElement(Icon, { h: "xs", w: "xs", name: icon, size: 32 }),
React__default["default"].createElement(Box$1, { ml: "xs", flexDirection: "column", justifyContent: "center" },
renderTitle(title),
text && renderInfo(text),
tags && (React__default["default"].createElement(Box$1, { flexDirection: "row", mt: "quark" }, tags.map((tag, i) => (React__default["default"].createElement(Box$1, { key: tag + i, mr: "quark" },
React__default["default"].createElement(Tag, { label: tag, size: "small", backgroundColor: "decorative-two-primary", color: "decorative-two-inverse" }))))))),
rightComponent && (React__default["default"].createElement(Box$1, { position: "absolute", right: 0, mx: "xs", alignItems: "flex-end" }, rightComponent))),
bottomComponent,
React__default["default"].createElement(Box$1, { borderColor: "fittings-divider", borderBottomWidth: 1 }))));
};
const List = (_a) => {
var { inverse } = _a, props = __rest(_a, ["inverse"]);
return (React__default["default"].createElement(reactNative.FlatList, Object.assign({}, props, { keyExtractor: (item, i) => item.title + i.toString(), renderItem: ({ item }) => (React__default["default"].createElement(ListItem, Object.assign({ inverse: inverse }, item))) })));
};
const useStyles$1 = ({ checked, disabled, required, }) => {
const theme = restyle.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 reactNative.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] = React.useState(value === selectedValue);
const styles = useStyles$1({
checked: isMarked,
disabled: !!disabled,
required: !!required,
});
const toogle = () => setSelectedValue(value);
React.useEffect(() => {
setIsMarked(value === selectedValue);
}, [selectedValue, value]);
return (React__default["default"].createElement(Box$1, { flexDirection: "row", alignItems: "center", my: "quark" },
React__default["default"].createElement(reactNative.TouchableHighlight, { style: styles.radioButtonItem, onPress: toogle },
React__default["default"].createElement(Box$1, null)),
React__default["default"].createElement(reactNative.TouchableWithoutFeedback, { onPress: toogle },
React__default["default"].createElement(Text$1, { ml: "nano" }, label))));
};
const RadioButton = ({ label, options, initial = '' }, ref) => {
const [selectedValue, setSelectedValue] = React.useState(initial);
React.useImperativeHandle(ref, () => ({
value: selectedValue,
}), [selectedValue]);
return (React__default["default"].createElement(React__default["default"].Fragment, null,
React__default["default"].createElement(Text$1, { fs: "md", fontWeight: "700", color: "fittings-text-primary-enabled", mb: "nano" }, label),
options.map(item => (React__default["default"].createElement(RadioButtonItem, { key: item.label, value: item.value, label: item.label, required: item.required, disabled: item.disabled, selectedValue: selectedValue, setSelectedValue: setSelectedValue })))));
};
var RadioButton$1 = React.forwardRef(RadioButton);
const useStyles = ({ disabled }) => {
const theme = restyle.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 = React.useRef(new reactNative.Animated.Value(value ? 1 : 0)).current;
const [toggled, setToggled] = React.useState(value);
const { basicStyles, dynamicStyles } = useStyles({ disabled });
const animate = React.useCallback(() => {
reactNative.Animated.timing(animation, {
duration: 200,
toValue: +!value,
easing: reactNative.Easing.ease,
useNativeDriver: false,
}).start();
}, [animation, value]);
return (React__default["default"].createElement(Box$1, Object.assign({}, props),
React__default["default"].createElement(reactNative.TouchableWithoutFeedback, { onPress: () => {
setToggled(!toggled);
animate();
onChange();
}, testID: "ds-switch", disabled: disabled },
React__default["default"].createElement(reactNative.Animated.View, { style: [dynamicStyles.container(animation)] },
React__default["default"].createElement(reactNative.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] = React.useState(false);
const [countChar, setCountChar] = React.useState(0);
const { colors, textVariants } = restyle.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 = React.useCallback(() => {
setIsFocused(true);
}, []);
const handleBlur = React.useCallback(() => {
setIsFocused(false);
}, []);
return (React__default["default"].createElement(reactNative.SafeAreaView, null,
!!label && (React__default["default"].createElement(Text$1, { fs: "md", fontWeight: "700", color: "fittings-text-secondary-enabled" }, label)),
React__default["default"].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__default["default"].createElement(Box$1, { flexDirection: "row", justifyContent: assistiveText ? 'space-between' : 'flex-end', height: 16 },
!!assistiveText && (React__default["default"].createElement(Box$1, { flexDirection: "row", alignItems: "center" },
status === 'success' && (React__default["default"].createElement(Icon__default["default"], { name: "check-circle", size: 16, color: statusKeyPair[status || 'default'] })),
status === 'error' && (React__default["default"].createElement(Icon__default["default"], { name: "alert-circle", size: 16, color: statusKeyPair[status || 'default'] })),
React__default["default"].createElement(Text$1, { ml: "quark", fs: "sm", color: "fittings-text-primary-enabled" }, assistiveText))),
!!maxLength && (React__default["default"].createElement(Text$1, { color: "fittings-text-primary-enabled" },
countChar,
"/",
maxLength)))));
};
var TextArea$1 = React.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] = React.useState(false);
const { colors } = restyle.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 = React.useCallback(() => {
setIsFocused(true);
}, []);
const handleBlur = React.useCallback(() => {
setIsFocused(false);
}, []);
const renderIconPerStatus = () => {
if (status === 'success') {
return (React__default["default"].createElement(Icon__default["default"], { name: "check-circle", size: 16, color: statusKeyPair[status] }));
}
if (status === 'error') {
return (React__default["default"].createElement(Icon__default["default"], { name: "alert-circle", size: 16, color: statusKeyPair[status] }));
}
return React__default["default"].createElement(React__default["default"].Fragment, null);
};
return (React__default["default"].createElement(reactNative.SafeAreaView, null,
!!label && (React__default["default"].createElement(Text$1, { fs: "md", fontWeight: "700", color: "fittings-text-secondary-enabled" }, label)),
React__default["default"].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__default["default"].createElement(Box$1, { flexDirection: "row", alignItems: "center", height: 16 },
renderIconPerStatus(),
!!assistiveText && (React__default["default"].createElement(Text$1, { ml: "quark", fs: "sm", color: "fittings-text-primary-enabled" }, assistiveText)))));
};
var TextField$1 = React.forwardRef(TextField);
Object.defineProperty(exports, 'ThemeProvider', {
enumerable: true,
get: function () { return restyle.ThemeProvider; }
});
Object.defineProperty(exports, 'useTheme', {
enumerable: true,
get: function () { return restyle.useTheme; }
});
exports.Avatar = Avatar;
exports.Box = Box$1;
exports.Button = Button$1;
exports.Checkbox = Checkbox;
exports.Input = Input$1;
exports.List = List;
exports.ListItem = ListItem;
exports.Paper = Paper;
exports.RadioButton = RadioButton$1;
exports.Switch = DSSwitch;
exports.Text = Text$1;
exports.TextArea = TextArea$1;
exports.TextField = TextField$1;
exports.borderBottomWidth = borderBottomWidth;
exports.borderLeftWidth = borderLeftWidth;
exports.borderRadius = borderRadius;
exports.borderRadiusValues = borderRadiusValues;
exports.borderRightWidth = borderRightWidth;
exports.borderTopWidth = borderTopWidth;
exports.borderWidth = borderWidth;
exports.borderWidthValues = borderWidthValues;
exports.createTheme = createTheme;
exports.extendTheme = extendTheme;
exports.fontSize = fontSize;
exports.fontSizeValues = fontSizeValues;
exports.heightComponent = heightComponent;
exports.letterSpacing = letterSpacing;
exports.letterSpacingValues = letterSpacingValues;
exports.lineHeight = lineHeight;
exports.lineHeightValues = lineHeightValues;
exports.opacity = opacity;
exports.opacityValues = opacityValues;
exports.shadowOffset = shadowOffset;
exports.shadowOffsetValues = shadowOffsetValues;
exports.shadowOpacity = shadowOpacity;
exports.shadowOpacityValues = shadowOpacityValues;
exports.shadowRadius = shadowRadius;
exports.shadowRadiusValues = shadowRadiusValues;
exports.sizeHeightValues = sizeHeightValues;
exports.sizeValues = sizeValues;
exports.spacingValues = spacingValues;
exports.themeInstitucional = theme;
exports.widthComponent = widthComponent;