@navegarti/rn-design-system 0.8.2 → 0.8.5

package/src/components/Checkbox/types.ts

@@ -0,0 +1,8 @@
+import type { CheckboxProps as ExpoCheckboxProps } from 'expo-checkbox';
+import type { ViewProps } from 'react-native';
+
+export type CheckboxProps = {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  containerProps?: ViewProps;
+} & Omit<ExpoCheckboxProps, 'OnValueChange'>;

package/src/components/FAB/components/extended-fab.tsx

@@ -1,8 +1,5 @@
-import {
-  ExtendedFABContainer,
-  type ExtendedFABProps,
-  FABText,
-} from '../styles';
+import { ExtendedFABContainer, FABText } from '../styles';
+import type { ExtendedFABProps } from '../types';
 
 export const ExtendedFAB = ({
   label,

package/src/components/FAB/index.tsx

@@ -1,7 +1,8 @@
 import { ExtendedFAB } from './components/extended-fab';
-import { DefaultFABStyle, type FABProps, LargeFAB, SmallFAB } from './styles';
+import { DefaultFABStyle, LargeFAB, SmallFAB } from './styles';
+import type { FABProps } from './types';
 
-export type { ExtendedFABProps, FABProps } from './styles';
+export type { ExtendedFABProps, FABProps } from './types';
 
 const DefaultFAB = (props: FABProps) => (
   <DefaultFABStyle activeOpacity={0.9} {...props} />

package/src/components/FAB/styles.ts

@@ -1,30 +1,8 @@
 import styled from '@emotion/native';
-import type { TouchableOpacityProps } from 'react-native';
 
 import { Text } from '../Text';
-import {
-  getPositionStyle,
-  getSizeStyle,
-  type Position,
-  type Size,
-} from './utils';
-
-type FABProps = {
-  position?: Position;
-  size?: Size;
-  color?: string;
-  offset?: {
-    horizontal?: number;
-    vertical?: number;
-  };
-} & TouchableOpacityProps;
-
-export type { FABProps };
-
-export type ExtendedFABProps = FABProps & {
-  label: string;
-  labelColor?: string;
-};
+import type { FABProps } from './types';
+import { getPositionStyle, getSizeStyle } from './utils';
 
 export const DefaultFABStyle = styled.TouchableOpacity<FABProps>(
   ({ position, size, color, offset }) => ({

package/src/components/FAB/types.ts

@@ -0,0 +1,18 @@
+import type { TouchableOpacityProps } from 'react-native';
+
+import type { Position, Size } from './utils';
+
+export type FABProps = {
+  position?: Position;
+  size?: Size;
+  color?: string;
+  offset?: {
+    horizontal?: number;
+    vertical?: number;
+  };
+} & TouchableOpacityProps;
+
+export type ExtendedFABProps = FABProps & {
+  label: string;
+  labelColor?: string;
+};

package/src/components/Flex/index.tsx

@@ -1 +1,2 @@
 export { Flex } from './styles';
+export type { FlexProps } from './types';

package/src/components/Flex/styles.ts

@@ -1,20 +1,6 @@
 import styled from '@emotion/native';
-import type { ViewStyle } from 'react-native';
 
-type FlexProps = Pick<
-  ViewStyle,
-  | 'flex'
-  | 'flexDirection'
-  | 'flexGrow'
-  | 'flexShrink'
-  | 'flexWrap'
-  | 'alignContent'
-  | 'alignItems'
-  | 'alignSelf'
-  | 'justifyContent'
-  | 'gap'
-  | 'flexBasis'
->;
+import type { FlexProps } from './types';
 
 export const Flex = styled.View<FlexProps>(
   ({

package/src/components/Flex/types.ts

@@ -0,0 +1,16 @@
+import type { ViewStyle } from 'react-native';
+
+export type FlexProps = Pick<
+  ViewStyle,
+  | 'flex'
+  | 'flexDirection'
+  | 'flexGrow'
+  | 'flexShrink'
+  | 'flexWrap'
+  | 'alignContent'
+  | 'alignItems'
+  | 'alignSelf'
+  | 'justifyContent'
+  | 'gap'
+  | 'flexBasis'
+>;

package/src/components/FormLabel/index.tsx

@@ -1,6 +1,8 @@
-import type { TextProps } from 'react-native';
 import { LabelText } from './styles';
+import type { FormLabelProps } from './types';
 
-export const FormLabel = (props: TextProps) => {
+export type { FormLabelProps } from './types';
+
+export const FormLabel = (props: FormLabelProps) => {
   return <LabelText {...props} />;
 };

package/src/components/FormLabel/types.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from 'react-native';
+
+export type FormLabelProps = TextProps;

package/src/components/Input/components/input-field.tsx

@@ -1,16 +1,12 @@
 import { memo, useState } from 'react';
-import type { MaskInputProps } from 'react-native-mask-input';
 
 import { useInputContext } from '../context';
 import { ErrorExclamation, StyledMaskInput } from '../styles';
+import type { InputFieldProps } from '../types';
 import { InputIcon } from './input-icon';
 
-type InputProps = {
-  onChangeText?: (unmasked: string, masked: string) => void;
-} & Omit<MaskInputProps, 'onBlur' | 'onFocus'>;
-
 export const InputField = memo(
-  ({ value, onChangeText, ...props }: InputProps) => {
+  ({ value, onChangeText, ...props }: InputFieldProps) => {
     const {
       inputRef,
       handleFocus,

package/src/components/Input/components/input-root.tsx

@@ -2,13 +2,7 @@ import { useRef, useState } from 'react';
 
 import { InputContext } from '../context';
 import { InputRootContainer } from '../styles';
-
-type InputRootProps = {
-  children: React.ReactNode;
-  isPassword?: boolean;
-  hasError?: boolean;
-  disabled?: boolean;
-};
+import type { InputRootProps } from '../types';
 
 export const InputRoot = ({
   children,

package/src/components/Input/index.tsx

@@ -5,6 +5,8 @@ import { InputIcon } from './components/input-icon';
 import { InputPasswordToggle } from './components/input-password-toggle';
 import { InputRoot } from './components/input-root';
 
+export type { InputFieldProps, InputRootProps } from './types';
+
 const Input = {
   Root: InputRoot,
   Field: InputField,

package/src/components/Input/styles.ts

@@ -35,12 +35,15 @@ export const InputControlContainer = styled.Pressable<{
   borderColor: getInputBorderColor(!!hasError, isFocused),
   borderRadius: 4,
   boxShadow: getInputShadow(!!hasError, isFocused),
-  paddingInline: 8,
-  paddingBlock: 4,
+  paddingLeft: 8,
+  paddingRight: 8,
+  paddingTop: 4,
+  paddingBottom: 4,
 
   backgroundColor: disabled ? '#f2f2f2' : '#fff',
 }));
 
 export const InputIconContainer = styled.View({
-  marginInline: 4,
+  marginLeft: 4,
+  marginRight: 4,
 });

package/src/components/Input/types.ts

@@ -0,0 +1,12 @@
+import type { MaskInputProps } from 'react-native-mask-input';
+
+export type InputRootProps = {
+  children: React.ReactNode;
+  isPassword?: boolean;
+  hasError?: boolean;
+  disabled?: boolean;
+};
+
+export type InputFieldProps = {
+  onChangeText?: (unmasked: string, masked: string) => void;
+} & Omit<MaskInputProps, 'onBlur' | 'onFocus'>;

package/src/components/Margin/index.tsx

@@ -1 +1,2 @@
 export { Margin } from './styles';
+export type { MarginProps } from './types';

package/src/components/Margin/styles.ts

@@ -1,23 +1,11 @@
 import styled from '@emotion/native';
 
-type MarginTypes = {
-  insets: {
-    all?: number | 'auto';
-    block?: number | 'auto';
-    inline?: number | 'auto';
-    top?: number | 'auto';
-    right?: number | 'auto';
-    bottom?: number | 'auto';
-    left?: number | 'auto';
-  };
-};
+import type { MarginProps } from './types';
 
-export const Margin = styled.View<MarginTypes>(({ insets }) => ({
+export const Margin = styled.View<MarginProps>(({ insets }) => ({
   margin: insets.all,
-  marginBlock: insets.block,
-  marginInline: insets.inline,
-  marginBottom: insets.bottom,
-  marginLeft: insets.left,
-  marginRight: insets.right,
-  marginTop: insets.top,
+  marginTop: insets.vertical ?? insets.top,
+  marginBottom: insets.vertical ?? insets.bottom,
+  marginLeft: insets.horizontal ?? insets.left,
+  marginRight: insets.horizontal ?? insets.right,
 }));

package/src/components/Margin/types.ts

@@ -0,0 +1,11 @@
+export type MarginProps = {
+  insets: {
+    all?: number | 'auto';
+    vertical?: number | 'auto';
+    horizontal?: number | 'auto';
+    top?: number | 'auto';
+    right?: number | 'auto';
+    bottom?: number | 'auto';
+    left?: number | 'auto';
+  };
+};

package/src/components/OTPInput/index.tsx

@@ -1,114 +1,69 @@
-import { type ComponentProps, useEffect, useRef, useState } from 'react';
-import type { TextInputKeyPressEvent, TextInputProps } from 'react-native';
+import type { OTPInputProps } from './types';
 
-import { Flex } from '../Flex';
-import { InputBox } from './styles';
+export type { OTPInputProps } from './types';
 
-type OTPInputProps = {
-  length?: number;
-  defaultValue?: string;
-  onComplete: (code: string[]) => void;
-  hasError?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  onlyNumbers?: boolean;
-  containerProps?: ComponentProps<typeof Flex>;
-} & Omit<TextInputProps, 'value' | 'onChangeText' | 'maxLength'>;
+import { OtpInput as OtpEntry } from 'react-native-otp-entry';
 
 export const OTPInput = ({
   length = 6,
-  defaultValue = '',
   onComplete,
-  hasError = false,
   disabled = false,
   autoFocus = false,
   onlyNumbers = true,
   containerProps,
   ...props
 }: OTPInputProps) => {
-  const [otp, setOtp] = useState<string[]>(
-    Array(length)
-      .fill('')
-      .map((_, i) => defaultValue[i] || ''),
-  );
-  const [focusedIndex, setFocusedIndex] = useState<number | null>(
-    autoFocus ? 0 : null,
-  );
-  const inputRefs = useRef<any[]>([]);
-
-  const handleChangeText = (text: string, index: number) => {
-    if (disabled) return;
-
-    setOtp((prevOtp) => {
-      const newOtp = [...prevOtp];
-      newOtp[index] = text;
-
-      const newOtpLength = newOtp.join('').length;
-
-      if (newOtpLength === length) {
-        onComplete(newOtp);
-        inputRefs.current[index]?.blur();
-      }
-
-      return newOtp;
-    });
-
-    if (index < length - 1 && text) {
-      inputRefs.current[index + 1]?.focus();
-    }
-  };
-
-  const handleKeyPress = (e: TextInputKeyPressEvent, index: number) => {
-    if (e.nativeEvent.key === 'Backspace' && !otp[index] && index > 0) {
-      inputRefs.current[index - 1]?.focus();
-    }
-  };
-
-  const handleFocus = (index: number) => {
-    setFocusedIndex(index);
-  };
-
-  const handleBlur = () => {
-    setFocusedIndex(null);
-  };
-
-  useEffect(() => {
-    if (autoFocus && inputRefs.current[0]) {
-      inputRefs.current[0]?.focus();
-    }
-  }, [autoFocus]);
-
   return (
-    <Flex
-      alignContent="center"
-      gap={8}
-      flexWrap="wrap"
-      flexDirection="row"
-      {...containerProps}
-    >
-      {Array.from({ length }).map((_, index) => (
-        <InputBox
-          key={index}
-          ref={(ref: any) => {
-            inputRefs.current[index] = ref;
-          }}
-          value={otp[index]}
-          onChangeText={(text) => handleChangeText(text, index)}
-          onKeyPress={(e) => handleKeyPress(e, index)}
-          onFocus={() => handleFocus(index)}
-          onBlur={handleBlur}
-          isFocused={focusedIndex === index}
-          hasError={hasError}
-          disabled={disabled}
-          hasValue={!!otp[index]}
-          keyboardType={onlyNumbers ? 'number-pad' : 'default'}
-          maxLength={1}
-          selectTextOnFocus
-          editable={!disabled}
-          cursorColor="#000"
-          {...props}
-        />
-      ))}
-    </Flex>
+    <OtpEntry
+      numberOfDigits={length}
+      focusColor="rgb(0, 140, 255)"
+      onFilled={onComplete}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      type="alphanumeric"
+      blurOnFilled={true}
+      textInputProps={{
+        accessibilityLabel: 'Código de verificação',
+      }}
+      textProps={{
+        accessibilityRole: 'text',
+        accessibilityLabel: 'Dígito do código de verificação',
+        allowFontScaling: false,
+      }}
+      theme={{
+        containerStyle: {
+          gap: 10,
+          justifyContent: 'flex-start',
+        },
+        pinCodeContainerStyle: {
+          backgroundColor: 'rgb(242,242,242)',
+          borderWidth: 1,
+          borderRadius: 4,
+          width: 50,
+          height: 50,
+          borderColor: 'transparent',
+        },
+        pinCodeTextStyle: {
+          color: disabled ? '#555' : '#333',
+          fontSize: 20,
+          fontWeight: 500,
+        },
+        focusedPinCodeContainerStyle: {
+          borderColor: 'rgb(50,50,50)',
+        },
+        focusStickStyle: {
+          backgroundColor: '#555',
+          height: 24,
+        },
+        disabledPinCodeContainerStyle: {
+          backgroundColor: 'rgb(220,220,220)',
+          borderColor: 'rgb(100,100,100)',
+        },
+        filledPinCodeContainerStyle: {
+          borderColor: 'transparent',
+        },
+      }}
+      {...props}
+    />
   );
 };

package/src/components/OTPInput/types.ts

@@ -0,0 +1,13 @@
+import type { OtpInputProps } from 'react-native-otp-entry';
+
+import type { FlexProps } from '../Flex';
+
+export type OTPInputProps = {
+  length?: number;
+  onComplete: (code: string) => void;
+  hasError?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onlyNumbers?: boolean;
+  containerProps?: FlexProps;
+} & OtpInputProps;

package/src/components/Padding/index.tsx

@@ -1 +1,2 @@
 export { Padding } from './styles';
+export type { PaddingProps } from './types';

package/src/components/Padding/styles.ts

@@ -1,23 +1,11 @@
 import styled from '@emotion/native';
 
-type PaddingTypes = {
-  insets: {
-    all?: number | 'auto';
-    block?: number | 'auto';
-    inline?: number | 'auto';
-    top?: number | 'auto';
-    right?: number | 'auto';
-    bottom?: number | 'auto';
-    left?: number | 'auto';
-  };
-};
+import type { PaddingProps } from './types';
 
-export const Padding = styled.View<PaddingTypes>(({ insets }) => ({
+export const Padding = styled.View<PaddingProps>(({ insets }) => ({
   padding: insets.all,
-  paddingBlock: insets.block,
-  paddingInline: insets.inline,
-  paddingBottom: insets.bottom,
-  paddingLeft: insets.left,
-  paddingRight: insets.right,
-  paddingTop: insets.top,
+  paddingTop: insets.vertical ?? insets.top,
+  paddingBottom: insets.vertical ?? insets.bottom,
+  paddingLeft: insets.horizontal ?? insets.left,
+  paddingRight: insets.horizontal ?? insets.right,
 }));

package/src/components/Padding/types.ts

@@ -0,0 +1,11 @@
+export type PaddingProps = {
+  insets: {
+    all?: number | 'auto';
+    vertical?: number | 'auto';
+    horizontal?: number | 'auto';
+    top?: number | 'auto';
+    right?: number | 'auto';
+    bottom?: number | 'auto';
+    left?: number | 'auto';
+  };
+};

package/src/components/Radio/components/radio-item.tsx

@@ -1,15 +1,9 @@
-import type { PropsWithChildren } from 'react';
 import { useContext } from 'react';
-import type { TouchableOpacityProps } from 'react-native';
 
 import { Text } from '../../Text';
 import { RadioContext } from '../context';
 import { RadioButton, RadioInner, RadioTouchable } from '../styles';
-
-type RadioItemProps = PropsWithChildren<{
-  value: string;
-}> &
-  Omit<TouchableOpacityProps, 'onPress'>;
+import type { RadioItemProps } from '../types';
 
 export const RadioItem = ({ value, children, ...props }: RadioItemProps) => {
   const context = useContext(RadioContext);

package/src/components/Radio/index.tsx

@@ -1,15 +1,9 @@
-import type { PropsWithChildren } from 'react';
-
 import { Flex } from '../Flex';
 import { RadioItem } from './components/radio-item';
 import { RadioContext } from './context';
+import type { RadioGroupProps } from './types';
 
-type RadioGroupProps = PropsWithChildren<{
-  value: string;
-  onValueChange: (value: string) => void;
-  disabled?: boolean;
-  hasError?: boolean;
-}>;
+export type { RadioGroupProps, RadioItemProps } from './types';
 
 const RadioGroup = ({
   value,

package/src/components/Radio/types.ts

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from 'react';
+import type { TouchableOpacityProps } from 'react-native';
+
+export type RadioGroupProps = PropsWithChildren<{
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+  hasError?: boolean;
+}>;
+
+export type RadioItemProps = PropsWithChildren<{
+  value: string;
+}> &
+  Omit<TouchableOpacityProps, 'onPress'>;

package/src/components/Select/components/select-field.tsx

@@ -1,17 +1,15 @@
-import type { PickerSelectProps } from 'react-native-picker-select';
 import RNPickerSelect from 'react-native-picker-select';
 
 import { useSelectContext } from '../context';
+import type { SelectFieldProps } from '../types';
 import { ErrorIcon } from './error-icon';
 
-type FormSelectProps = PickerSelectProps;
-
 export const SelectField = ({
   placeholder,
   style,
   disabled,
   ...props
-}: FormSelectProps) => {
+}: SelectFieldProps) => {
   const { hasError } = useSelectContext();
 
   const {

package/src/components/Select/index.tsx

@@ -1,13 +1,11 @@
-import type { PropsWithChildren } from 'react';
 import { View } from 'react-native';
 
 import { SelectError } from './components/select-error';
 import { SelectField } from './components/select-field';
 import { SelectContext } from './context';
+import type { SelectRootProps } from './types';
 
-type SelectRootProps = PropsWithChildren & {
-  hasError?: boolean;
-};
+export type { SelectFieldProps, SelectRootProps } from './types';
 
 const SelectRoot = ({ children, hasError }: SelectRootProps) => {
   return (

package/src/components/Select/types.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+import type { PickerSelectProps } from 'react-native-picker-select';
+
+export type SelectRootProps = PropsWithChildren & {
+  hasError?: boolean;
+};
+
+export type SelectFieldProps = PickerSelectProps;

package/src/components/Skeleton/index.tsx

@@ -1,12 +1,9 @@
-import { type PropsWithChildren, useEffect, useRef } from 'react';
-import { Animated, type DimensionValue } from 'react-native';
-
-type SkeletonProps = {
-  width: DimensionValue;
-  height: DimensionValue;
-  radius?: number;
-  isLoading?: boolean;
-} & PropsWithChildren;
+import { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+
+import type { SkeletonProps } from './types';
+
+export type { SkeletonProps } from './types';
 
 export const Skeleton = ({
   width,

package/src/components/Skeleton/types.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from 'react';
+import type { DimensionValue } from 'react-native';
+
+export type SkeletonProps = {
+  width: DimensionValue;
+  height: DimensionValue;
+  radius?: number;
+  isLoading?: boolean;
+} & PropsWithChildren;

package/src/components/Switch/index.tsx

@@ -1,17 +1,11 @@
-import type { PropsWithChildren } from 'react';
 import { useEffect, useRef } from 'react';
-import { Animated, type TouchableOpacityProps } from 'react-native';
+import { Animated } from 'react-native';
 
 import { Text } from '../Text';
 import { SwitchContainer, SwitchThumb, SwitchTrack } from './styles';
+import type { SwitchProps } from './types';
 
-type SwitchProps = PropsWithChildren<{
-  value: boolean;
-  onValueChange: (value: boolean) => void;
-  disabled?: boolean;
-  hasError?: boolean;
-}> &
-  Omit<TouchableOpacityProps, 'onPress'>;
+export type { SwitchProps } from './types';
 
 export const Switch = ({
   value,