@navegarti/rn-design-system 0.2.0

package/src/components/Carousel/types.ts

@@ -0,0 +1,45 @@
+import type { PropsWithChildren, RefObject } from 'react';
+import type {
+  FlatList,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+} from 'react-native';
+
+/**
+ * Render item function type for Carousel
+ * @template T - The type of items in the data array
+ */
+type RenderCarouselItem<T> = (info: {
+  item: T;
+  index: number;
+}) => React.ReactElement | null;
+
+export type CarouselRootProps<T> = PropsWithChildren<{
+  data: T[];
+  itemWidth?: number;
+  gapBetweenItems?: number;
+  renderItem: RenderCarouselItem<T>;
+  onSnapToItem?: (index: number) => void;
+  defaultIndex?: number;
+  /** Enable auto play functionality */
+  autoPlay?: boolean;
+  /** Auto play interval in seconds */
+  autoPlaySeconds?: number;
+  /** Center items in the carousel (except first and last) */
+  centerItems?: boolean;
+}>;
+
+export type CarouselContextValue<T> = {
+  data: T[];
+  pageWidth: number;
+  gapBetweenItems: number;
+  activeIndex: number;
+  goTo: (index: number) => void;
+  onMomentumScrollEnd: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  listRef: RefObject<FlatList<T> | null>;
+  renderItem: RenderCarouselItem<T>;
+  itemWidth: number;
+  handleScrollBeginDrag: () => void;
+  calculateSnapOffset: (index: number) => number;
+  centerItems: boolean;
+};

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,42 @@
+import type { CheckboxProps } from 'expo-checkbox';
+import RNCheckBox from 'expo-checkbox';
+import type { ViewProps } from 'react-native';
+import { Text } from '../Text';
+import { Container } from './styles';
+
+type Props = {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  containerProps?: ViewProps;
+} & Omit<CheckboxProps, 'OnValueChange'>;
+
+const Checkbox = ({
+  value,
+  onValueChange,
+  children,
+  containerProps,
+  disabled,
+  ...props
+}: Props) => {
+  return (
+    <Container onPress={() => onValueChange(!value)} {...containerProps}>
+      <RNCheckBox
+        value={value}
+        onValueChange={onValueChange}
+        disabled={disabled}
+        color={value ? 'rgb(0, 140, 255)' : undefined}
+        {...props}
+      />
+      <Text
+        color={disabled ? '#888888' : '#000000'}
+        style={{
+          flexShrink: 1,
+        }}
+      >
+        {children}
+      </Text>
+    </Container>
+  );
+};
+
+export { Checkbox };

package/src/components/Checkbox/styles.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/native';
+
+export const Container = styled.Pressable(() => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 12,
+}));

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

@@ -0,0 +1,17 @@
+import {
+  ExtendedFABContainer,
+  type ExtendedFABProps,
+  FABText,
+} from '../styles';
+
+export const ExtendedFAB = ({
+  label,
+  labelColor,
+  children,
+  ...props
+}: ExtendedFABProps) => (
+  <ExtendedFABContainer {...props}>
+    {children}
+    <FABText color={labelColor}>{label}</FABText>
+  </ExtendedFABContainer>
+);

package/src/components/FAB/index.tsx

@@ -0,0 +1,22 @@
+import { ExtendedFAB } from './components/extended-fab';
+import { DefaultFABStyle, type FABProps, LargeFAB, SmallFAB } from './styles';
+
+const DefaultFAB = (props: FABProps) => (
+  <DefaultFABStyle activeOpacity={0.9} {...props} />
+);
+
+const SmallFABComponent = (props: FABProps) => (
+  <SmallFAB activeOpacity={0.9} {...props} />
+);
+
+const LargeFABComponent = (props: FABProps) => (
+  <LargeFAB activeOpacity={0.9} {...props} />
+);
+
+const FAB = Object.assign(DefaultFAB, {
+  Small: SmallFABComponent,
+  Large: LargeFABComponent,
+  Extended: ExtendedFAB,
+});
+
+export { FAB };

package/src/components/FAB/styles.ts

@@ -0,0 +1,61 @@
+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;
+};
+
+export const DefaultFABStyle = styled.TouchableOpacity<FABProps>(
+  ({ position, size, color, offset }) => ({
+    ...getPositionStyle(position, offset),
+    ...getSizeStyle(size),
+    backgroundColor: color ?? '#fff',
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    boxShadow: '0px 3px 2px rgba(0, 0, 0, 0.28)',
+    elevation: 4,
+    zIndex: 1000,
+  }),
+);
+
+export const SmallFAB = styled(DefaultFABStyle)(() => getSizeStyle('small'));
+
+export const LargeFAB = styled(DefaultFABStyle)(() => getSizeStyle('large'));
+
+export const ExtendedFABContainer = styled(DefaultFABStyle)(() => ({
+  width: 'auto',
+  minWidth: 120,
+  paddingHorizontal: 16,
+  paddingVertical: 12,
+  flexDirection: 'row',
+  gap: 8,
+  borderRadius: 28, // Pill shape
+}));
+
+export const FABText = styled(Text)(({ color }) => ({
+  color: color ?? '#333',
+  fontSize: 14,
+  fontWeight: '600',
+}));

package/src/components/FAB/utils.ts

@@ -0,0 +1,45 @@
+import type { ViewStyle } from 'react-native';
+
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+type Size = 'small' | 'regular' | 'large';
+
+export type { Position, Size };
+
+export const getPositionStyle = (
+  position: Position = 'bottom-right',
+  offset?: { horizontal?: number; vertical?: number },
+): ViewStyle => {
+  const horizontalOffset = offset?.horizontal ?? 16;
+  const verticalOffset = offset?.vertical ?? 16;
+
+  const safeBottom = 80; // Tab navigation clearance
+  const safeTop = 60; // Header clearance
+
+  const positions = {
+    'top-left': { top: safeTop + verticalOffset, left: horizontalOffset },
+    'top-right': { top: safeTop + verticalOffset, right: horizontalOffset },
+    'bottom-left': {
+      bottom: safeBottom + verticalOffset,
+      left: horizontalOffset,
+    },
+    'bottom-right': {
+      bottom: safeBottom + verticalOffset,
+      right: horizontalOffset,
+    },
+  };
+
+  return {
+    position: 'absolute',
+    ...positions[position],
+  };
+};
+
+export const getSizeStyle = (size?: Size) => {
+  const sizes = {
+    small: { width: 40, height: 40 },
+    regular: { width: 56, height: 56 },
+    large: { width: 72, height: 72 },
+  };
+
+  return sizes[size ?? 'regular'];
+};

package/src/components/Flex/index.tsx

@@ -0,0 +1 @@
+export { Flex } from './styles';

package/src/components/Flex/styles.ts

@@ -0,0 +1,47 @@
+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'
+>;
+
+export const Flex = styled.View<FlexProps>(
+  ({
+    theme,
+    flex,
+    flexBasis,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    flexWrap,
+    alignContent,
+    alignItems,
+    alignSelf,
+    justifyContent,
+    gap,
+  }) => ({
+    theme,
+    flex,
+    flexBasis,
+    flexDirection,
+    flexGrow,
+    flexShrink,
+    flexWrap,
+    alignContent,
+    alignItems,
+    alignSelf,
+    justifyContent,
+    gap,
+  }),
+);

package/src/components/FormLabel/index.tsx

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

package/src/components/FormLabel/styles.ts

@@ -0,0 +1,8 @@
+import styled from '@emotion/native';
+import { Text } from '../Text';
+
+export const LabelText = styled(Text)({
+  color: '#333333',
+  marginBottom: 4,
+  fontWeight: '500',
+});

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

@@ -0,0 +1,20 @@
+import type { PressableProps } from 'react-native';
+
+import { useInputContext } from '../context';
+import { InputControlContainer } from '../styles';
+
+export const InputControl = ({ children, ...props }: PressableProps) => {
+  const { isFocused, handleFocus, hasError, disabled } = useInputContext();
+
+  return (
+    <InputControlContainer
+      isFocused={isFocused}
+      hasError={hasError}
+      onPress={handleFocus}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </InputControlContainer>
+  );
+};

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

@@ -0,0 +1,14 @@
+import type { TextProps } from 'react-native';
+
+import { useInputContext } from '../context';
+import { InputErrorText } from '../styles';
+
+export const InputError = (props: TextProps) => {
+  const { hasError } = useInputContext();
+
+  if (!hasError) {
+    return null;
+  }
+
+  return <InputErrorText {...props} />;
+};

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

@@ -0,0 +1,55 @@
+import { memo, useState } from 'react';
+import type { MaskInputProps } from 'react-native-mask-input';
+
+import { useInputContext } from '../context';
+import { ErrorExclamation, StyledMaskInput } from '../styles';
+import { InputIcon } from './input-icon';
+
+type InputProps = {
+  onChangeText?: (unmasked: string, masked: string) => void;
+} & MaskInputProps;
+
+export const InputField = memo(
+  ({ value, onChangeText, ...props }: InputProps) => {
+    const {
+      inputRef,
+      handleFocus,
+      handleBlur,
+      isPassword,
+      showPassword,
+      hasError,
+      disabled,
+    } = useInputContext();
+    const [internalValue, setInternalValue] = useState(value ?? '');
+
+    return (
+      <>
+        <StyledMaskInput
+          ref={inputRef}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          secureTextEntry={isPassword && !showPassword}
+          value={internalValue}
+          onChangeText={(masked, unmasked) => {
+            setInternalValue(unmasked);
+
+            if (onChangeText) {
+              onChangeText(unmasked, masked);
+            }
+          }}
+          cursorColor="#000"
+          editable={!disabled}
+          {...props}
+        />
+        {hasError && (
+          <InputIcon>
+            <ErrorExclamation>!</ErrorExclamation>
+          </InputIcon>
+        )}
+      </>
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.value === nextProps.value;
+  },
+);

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

@@ -0,0 +1,7 @@
+import type { ViewProps } from 'react-native';
+
+import { InputIconContainer } from '../styles';
+
+export const InputIcon = (props: ViewProps) => {
+  return <InputIconContainer {...props} />;
+};

package/src/components/Input/components/input-password-toggle.tsx

@@ -0,0 +1,19 @@
+import { EyeIcon, EyeOffIcon } from 'lucide-react-native';
+import { Pressable } from 'react-native';
+
+import { useInputContext } from '../context';
+import { InputIcon } from './input-icon';
+
+export const InputPasswordToggle = () => {
+  const { toggleShowPassword, showPassword } = useInputContext();
+  return (
+    <InputIcon>
+      <Pressable
+        hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
+        onPress={toggleShowPassword}
+      >
+        {showPassword ? <EyeOffIcon size={20} /> : <EyeIcon size={20} />}
+      </Pressable>
+    </InputIcon>
+  );
+};

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

@@ -0,0 +1,55 @@
+import { useRef, useState } from 'react';
+
+import { InputContext } from '../context';
+import { InputRootContainer } from '../styles';
+
+type InputRootProps = {
+  children: React.ReactNode;
+  isPassword?: boolean;
+  hasError?: boolean;
+  disabled?: boolean;
+};
+
+export const InputRoot = ({
+  children,
+  isPassword,
+  hasError = false,
+  disabled = false,
+}: InputRootProps) => {
+  // biome-ignore lint/suspicious/noExplicitAny: For any reason, TextInput type does not has focus and blur methods
+  const inputRef = useRef<any>(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(!isPassword);
+
+  const handleFocus = () => {
+    inputRef.current?.focus();
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    inputRef.current?.blur();
+    setIsFocused(false);
+  };
+
+  const toggleShowPassword = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  return (
+    <InputContext.Provider
+      value={{
+        inputRef,
+        handleFocus,
+        handleBlur,
+        isFocused,
+        isPassword: !!isPassword,
+        showPassword,
+        toggleShowPassword,
+        hasError,
+        disabled,
+      }}
+    >
+      <InputRootContainer>{children}</InputRootContainer>
+    </InputContext.Provider>
+  );
+};

package/src/components/Input/context.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+import type { TextInput } from 'react-native';
+
+export type InputContextType = {
+  inputRef: React.RefObject<TextInput | null>;
+  handleFocus: () => void;
+  handleBlur: () => void;
+  isFocused: boolean;
+  isPassword: boolean;
+  showPassword: boolean;
+  hasError: boolean;
+  disabled: boolean;
+  toggleShowPassword: () => void;
+};
+
+export const InputContext = createContext<InputContextType | null>(null);
+
+export const useInputContext = () => {
+  const context = useContext(InputContext);
+
+  if (!context) {
+    throw new Error('Input components must be used within an Input.Root');
+  }
+
+  return context;
+};

package/src/components/Input/index.tsx

@@ -0,0 +1,17 @@
+import { InputControl } from './components/input-control';
+import { InputError } from './components/input-error';
+import { InputField } from './components/input-field';
+import { InputIcon } from './components/input-icon';
+import { InputPasswordToggle } from './components/input-password-toggle';
+import { InputRoot } from './components/input-root';
+
+const Input = {
+  Root: InputRoot,
+  Field: InputField,
+  Error: InputError,
+  Control: InputControl,
+  Icon: InputIcon,
+  PasswordToggle: InputPasswordToggle,
+};
+
+export { Input };

package/src/components/Input/styles.ts

@@ -0,0 +1,45 @@
+import styled from '@emotion/native';
+import RNMaskInput from 'react-native-mask-input';
+
+import { Text } from '../Text';
+import { getInputBorderColor, getInputShadow } from './utils';
+
+export const InputRootContainer = styled.View({
+  width: '100%',
+});
+
+export const InputErrorText = styled(Text)({
+  color: '#d13033',
+  marginTop: 4,
+});
+
+export const StyledMaskInput = styled(RNMaskInput)({
+  flex: 1,
+});
+
+export const ErrorExclamation = styled(InputErrorText)({
+  fontWeight: 'bold',
+  fontSize: 16,
+});
+
+export const InputControlContainer = styled.Pressable<{
+  isFocused: boolean;
+  hasError?: boolean;
+  disabled?: boolean;
+}>(({ isFocused, hasError, disabled }) => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 8,
+  borderWidth: isFocused || hasError ? 1.5 : 1,
+  borderColor: getInputBorderColor(!!hasError, isFocused),
+  borderRadius: 4,
+  boxShadow: getInputShadow(!!hasError, isFocused),
+  paddingInline: 8,
+  paddingBlock: 4,
+
+  backgroundColor: disabled ? '#f2f2f2' : '#fff',
+}));
+
+export const InputIconContainer = styled.View({
+  marginInline: 4,
+});

package/src/components/Input/utils.ts

@@ -0,0 +1,27 @@
+export const getInputShadow = (hasError: boolean, isFocused: boolean) => {
+  if (!hasError && !isFocused) {
+    return '2px 2px 0 2px rgba(0, 0, 0, 0.06) inset';
+  }
+
+  if (hasError) {
+    return '0px 0px 3px 0px rgba(255,0,0,0.5)';
+  }
+
+  if (isFocused) {
+    return '0px 0px 3px 0px rgba(0,4,255,0.5)';
+  }
+
+  return 'none';
+};
+
+export const getInputBorderColor = (hasError: boolean, isFocused: boolean) => {
+  if (hasError) {
+    return '#dc4548';
+  }
+
+  if (isFocused) {
+    return 'rgb(0, 140, 255)';
+  }
+
+  return '#ccc';
+};

package/src/components/Margin/index.tsx

@@ -0,0 +1 @@
+export { Margin } from './styles';

package/src/components/Margin/styles.ts

@@ -0,0 +1,23 @@
+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';
+  };
+};
+
+export const Margin = styled.View<MarginTypes>(({ insets }) => ({
+  margin: insets.all,
+  marginBlock: insets.block,
+  marginInline: insets.inline,
+  marginBottom: insets.bottom,
+  marginLeft: insets.left,
+  marginRight: insets.right,
+  marginTop: insets.top,
+}));