@navegarti/rn-design-system 0.8.2 → 0.8.5

package/src/components/Switch/types.ts

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

package/src/components/Text/index.tsx

@@ -1,2 +1,2 @@
-export type { TextComponentProps, TextStyleProps } from './styles';
 export { Text } from './styles';
+export type { TextComponentProps, TextStyleProps } from './types';

package/src/components/Text/styles.ts

@@ -1,23 +1,6 @@
 import styled from '@emotion/native';
-import type {
-  DimensionValue,
-  TextProps as RNTextProps,
-  TextProps,
-} from 'react-native';
 
-export type TextStyleProps = TextProps & {
-  flex?: number;
-  weight?: 'light' | 'regular' | 'medium' | 'bold';
-  size?: number;
-  margin?: DimensionValue | string;
-  width?: string;
-  color?: string;
-  textAlign?: 'left' | 'center' | 'right' | 'justify';
-  textTransform?: 'none' | 'uppercase' | 'capitalize' | 'lowercase';
-  textDecorationLine?: 'none' | 'underline' | 'line-through';
-};
-
-export interface TextComponentProps extends RNTextProps, TextStyleProps {}
+import type { TextStyleProps } from './types';
 
 export const Text = styled.Text<TextStyleProps>(
   ({
@@ -30,9 +13,11 @@ export const Text = styled.Text<TextStyleProps>(
     textTransform,
     textDecorationLine,
     margin,
+    fontFamily,
   }) => ({
     fontSize: size ? size : 14,
     fontWeight: weight ?? 'semibold',
+    fontFamily,
     color: color ?? '#333',
     textAlign,
     flex,

package/src/components/Text/types.ts

@@ -0,0 +1,16 @@
+import type { DimensionValue, TextProps } from 'react-native';
+
+export type TextStyleProps = {
+  flex?: number;
+  weight?: 'light' | 'regular' | 'medium' | 'bold';
+  size?: number;
+  margin?: DimensionValue;
+  width?: string;
+  color?: string;
+  textAlign?: 'left' | 'center' | 'right' | 'justify';
+  textTransform?: 'none' | 'uppercase' | 'capitalize' | 'lowercase';
+  textDecorationLine?: 'none' | 'underline' | 'line-through';
+  fontFamily?: string;
+};
+
+export type TextComponentProps = TextStyleProps & TextProps;

package/src/components.tsx

@@ -10,19 +10,30 @@ export { Card } from './components/Card';
 export type { CarouselRootProps } from './components/Carousel';
 export { Carousel } from './components/Carousel';
 
+export type { CheckboxProps } from './components/Checkbox';
 export { Checkbox } from './components/Checkbox';
 export type { ExtendedFABProps, FABProps } from './components/FAB';
 export { FAB } from './components/FAB';
 
+export type { FlexProps } from './components/Flex';
 export { Flex } from './components/Flex';
+export type { FormLabelProps } from './components/FormLabel';
 export { FormLabel } from './components/FormLabel';
+export type { InputFieldProps, InputRootProps } from './components/Input';
 export { Input } from './components/Input';
+export type { MarginProps } from './components/Margin';
 export { Margin } from './components/Margin';
+export type { OTPInputProps } from './components/OTPInput';
 export { OTPInput } from './components/OTPInput';
+export type { PaddingProps } from './components/Padding';
 export { Padding } from './components/Padding';
+export type { RadioGroupProps, RadioItemProps } from './components/Radio';
 export { Radio } from './components/Radio';
+export type { SelectFieldProps, SelectRootProps } from './components/Select';
 export { Select } from './components/Select';
+export type { SkeletonProps } from './components/Skeleton';
 export { Skeleton } from './components/Skeleton';
+export type { SwitchProps } from './components/Switch';
 export { Switch } from './components/Switch';
 export type { TextComponentProps, TextStyleProps } from './components/Text';
 export { Text } from './components/Text';

package/src/index.tsx

@@ -32,19 +32,30 @@ export { Card } from './components/Card';
 export type { CarouselRootProps } from './components/Carousel';
 export { Carousel } from './components/Carousel';
 
+export type { CheckboxProps } from './components/Checkbox';
 export { Checkbox } from './components/Checkbox';
 export type { ExtendedFABProps, FABProps } from './components/FAB';
 export { FAB } from './components/FAB';
 
+export type { FlexProps } from './components/Flex';
 export { Flex } from './components/Flex';
+export type { FormLabelProps } from './components/FormLabel';
 export { FormLabel } from './components/FormLabel';
+export type { InputFieldProps, InputRootProps } from './components/Input';
 export { Input } from './components/Input';
+export type { MarginProps } from './components/Margin';
 export { Margin } from './components/Margin';
+export type { OTPInputProps } from './components/OTPInput';
 export { OTPInput } from './components/OTPInput';
+export type { PaddingProps } from './components/Padding';
 export { Padding } from './components/Padding';
+export type { RadioGroupProps, RadioItemProps } from './components/Radio';
 export { Radio } from './components/Radio';
+export type { SelectFieldProps, SelectRootProps } from './components/Select';
 export { Select } from './components/Select';
+export type { SkeletonProps } from './components/Skeleton';
 export { Skeleton } from './components/Skeleton';
+export type { SwitchProps } from './components/Switch';
 export { Switch } from './components/Switch';
 export type { TextComponentProps, TextStyleProps } from './components/Text';
 export { Text } from './components/Text';

package/lib/module/components/OTPInput/styles.js

@@ -1,23 +0,0 @@
-"use strict";
-
-import styled from '@emotion/native';
-import { getInputBorderColor, getInputShadow } from "./utils.js";
-export const InputBox = styled.TextInput(({
-  isFocused,
-  hasError,
-  disabled,
-  hasValue
-}) => ({
-  width: 48,
-  height: 56,
-  borderWidth: isFocused || hasError ? 1.5 : 1,
-  borderColor: getInputBorderColor(!!hasError, isFocused, hasValue),
-  borderRadius: 8,
-  textAlign: 'center',
-  fontSize: 24,
-  fontWeight: '600',
-  color: disabled ? '#888' : '#000',
-  backgroundColor: disabled ? '#f2f2f2' : '#fff',
-  boxShadow: getInputShadow(!!hasError, isFocused)
-}));
-//# sourceMappingURL=styles.js.map

package/lib/module/components/OTPInput/utils.js

@@ -1,24 +0,0 @@
-"use strict";
-
-export const getInputBorderColor = (hasError, isFocused, hasValue) => {
-  if (hasError) {
-    return '#d13033';
-  }
-  if (isFocused) {
-    return 'rgb(0, 140, 255)';
-  }
-  if (hasValue) {
-    return '#666';
-  }
-  return '#ccc';
-};
-export const getInputShadow = (hasError, isFocused) => {
-  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';
-};
-//# sourceMappingURL=utils.js.map

package/lib/typescript/src/components/OTPInput/styles.d.ts

@@ -1,214 +0,0 @@
-export declare const InputBox: import("@emotion/native").StyledComponent<Omit<Readonly<Omit<Omit<Readonly<Omit<Readonly<{
-    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => unknown) | undefined;
-    onAccessibilityTap?: (() => unknown) | undefined;
-    onLayout?: ((event: import("react-native").LayoutChangeEvent) => unknown) | undefined;
-    onMagicTap?: (() => unknown) | undefined;
-    onAccessibilityEscape?: (() => unknown) | undefined;
-}>, "children" | "id" | "nativeID" | "onResponderGrant" | "onResponderMove" | "onResponderRelease" | "onResponderTerminate" | "onResponderTerminationRequest" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "role" | "style" | "testID" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "pointerEvents" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "hitSlop" | "onBlur" | "onFocus" | "onMoveShouldSetResponderCapture" | "onResponderReject" | "onResponderStart" | "onResponderEnd" | "onStartShouldSetResponderCapture" | "onMouseEnter" | "onMouseLeave" | "onClick" | "onClickCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlurCapture" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "tabIndex" | "shouldRasterizeIOS" | "collapsable" | "collapsableChildren" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
-    onMoveShouldSetResponder?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
-    onMoveShouldSetResponderCapture?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
-    onResponderGrant?: ((e: import("react-native").GestureResponderEvent) => void | boolean) | undefined;
-    onResponderMove?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onResponderReject?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onResponderRelease?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onResponderStart?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onResponderEnd?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onResponderTerminate?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onResponderTerminationRequest?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
-    onStartShouldSetResponder?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
-    onStartShouldSetResponderCapture?: ((e: import("react-native").GestureResponderEvent) => boolean) | undefined;
-}>, "children" | "id" | "nativeID" | "role" | "style" | "testID" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "pointerEvents" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "hitSlop" | "onBlur" | "onFocus" | "onMouseEnter" | "onMouseLeave" | "onClick" | "onClickCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlurCapture" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "tabIndex" | "shouldRasterizeIOS" | "collapsable" | "collapsableChildren" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
-    onMouseEnter?: ((event: import("react-native").MouseEvent) => void) | undefined;
-    onMouseLeave?: ((event: import("react-native").MouseEvent) => void) | undefined;
-}>, "children" | "id" | "nativeID" | "role" | "style" | "testID" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "onPointerEnter" | "onPointerLeave" | "onPointerMove" | "pointerEvents" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "hitSlop" | "onBlur" | "onFocus" | "onClick" | "onClickCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onBlurCapture" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "tabIndex" | "shouldRasterizeIOS" | "collapsable" | "collapsableChildren" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
-    onClick?: ((event: import("react-native").PointerEvent) => void) | undefined;
-    onClickCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
-    onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
-    onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
-    onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
-    onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
-    onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
-    onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
-    onPointerCancel?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onPointerCancelCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onPointerDown?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onPointerDownCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onPointerUp?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onPointerUpCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onPointerOver?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onPointerOverCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onPointerOut?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onPointerOutCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onGotPointerCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onGotPointerCaptureCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onLostPointerCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
-    onLostPointerCaptureCapture?: ((e: import("react-native").PointerEvent) => void) | undefined;
-}>, "children" | "id" | "nativeID" | "role" | "style" | "testID" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "pointerEvents" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "hitSlop" | "onBlur" | "onFocus" | "onClick" | "onBlurCapture" | "onFocusCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "tabIndex" | "shouldRasterizeIOS" | "collapsable" | "collapsableChildren" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
-    onBlur?: ((event: import("react-native").BlurEvent) => void) | undefined;
-    onBlurCapture?: ((event: import("react-native").BlurEvent) => void) | undefined;
-    onFocus?: ((event: import("react-native").FocusEvent) => void) | undefined;
-    onFocusCapture?: ((event: import("react-native").FocusEvent) => void) | undefined;
-}>, "children" | "id" | "nativeID" | "role" | "style" | "testID" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "pointerEvents" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "hitSlop" | "onClick" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "tabIndex" | "shouldRasterizeIOS" | "collapsable" | "collapsableChildren" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
-    onTouchCancel?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onTouchCancelCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onTouchEnd?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onTouchEndCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onTouchMove?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onTouchMoveCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onTouchStart?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-    onTouchStartCapture?: ((e: import("react-native").GestureResponderEvent) => void) | undefined;
-}>, "children" | "id" | "nativeID" | "role" | "style" | "testID" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "pointerEvents" | "hasTVPreferredFocus" | "nextFocusDown" | "nextFocusForward" | "nextFocusLeft" | "nextFocusRight" | "nextFocusUp" | "focusable" | "hitSlop" | "onClick" | "nativeBackgroundAndroid" | "nativeForegroundAndroid" | "renderToHardwareTextureAndroid" | "tabIndex" | "shouldRasterizeIOS" | "collapsable" | "collapsableChildren" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
-    nativeBackgroundAndroid?: import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").AndroidDrawable | undefined;
-    nativeForegroundAndroid?: import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").AndroidDrawable | undefined;
-    renderToHardwareTextureAndroid?: boolean | undefined;
-    hasTVPreferredFocus?: boolean | undefined;
-    nextFocusDown?: number | undefined;
-    nextFocusForward?: number | undefined;
-    nextFocusLeft?: number | undefined;
-    nextFocusRight?: number | undefined;
-    nextFocusUp?: number | undefined;
-    focusable?: boolean | undefined;
-    tabIndex?: 0 | -1;
-    onClick?: ((event: import("react-native").GestureResponderEvent) => unknown) | undefined;
-}>, "children" | "id" | "nativeID" | "role" | "style" | "testID" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "pointerEvents" | "hitSlop" | "shouldRasterizeIOS" | "collapsable" | "collapsableChildren" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
-    shouldRasterizeIOS?: boolean | undefined;
-}>, "children" | "id" | "nativeID" | "role" | "style" | "testID" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "importantForAccessibility" | "screenReaderFocusable" | "pointerEvents" | "hitSlop" | "collapsable" | "collapsableChildren" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<Omit<Readonly<{
-    accessibilityLabelledBy?: (string | undefined) | (Array<string> | undefined);
-    "aria-labelledby"?: string | undefined;
-    accessibilityLiveRegion?: ("none" | "polite" | "assertive") | undefined;
-    "aria-live"?: ("polite" | "assertive" | "off") | undefined;
-    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined;
-    screenReaderFocusable?: boolean;
-}>, "role" | "accessibilityIgnoresInvertColors" | "accessibilityViewIsModal" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "aria-modal" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityRespondsToUserInteraction" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden"> & Omit<Readonly<{
-    accessibilityIgnoresInvertColors?: boolean | undefined;
-    accessibilityViewIsModal?: boolean | undefined;
-    accessibilityShowsLargeContentViewer?: boolean | undefined;
-    accessibilityLargeContentTitle?: string | undefined;
-    "aria-modal"?: boolean | undefined;
-    accessibilityElementsHidden?: boolean | undefined;
-    accessibilityLanguage?: string | undefined;
-    accessibilityRespondsToUserInteraction?: boolean | undefined;
-}>, "role" | "accessible" | "accessibilityLabel" | "accessibilityHint" | "aria-label" | "accessibilityRole" | "accessibilityState" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "accessibilityActions" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "aria-hidden"> & {
-    accessible?: boolean | undefined;
-    accessibilityLabel?: string | undefined;
-    accessibilityHint?: string | undefined;
-    "aria-label"?: string | undefined;
-    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
-    role?: import("react-native").Role | undefined;
-    accessibilityState?: import("react-native").AccessibilityState | undefined;
-    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
-    "aria-valuemax"?: import("react-native").AccessibilityValue["max"] | undefined;
-    "aria-valuemin"?: import("react-native").AccessibilityValue["min"] | undefined;
-    "aria-valuenow"?: import("react-native").AccessibilityValue["now"] | undefined;
-    "aria-valuetext"?: import("react-native").AccessibilityValue["text"] | undefined;
-    accessibilityActions?: ReadonlyArray<import("react-native/types_generated/Libraries/Components/View/ViewAccessibility").AccessibilityActionInfo> | undefined;
-    "aria-busy"?: boolean | undefined;
-    "aria-checked"?: (boolean | undefined) | "mixed";
-    "aria-disabled"?: boolean | undefined;
-    "aria-expanded"?: boolean | undefined;
-    "aria-selected"?: boolean | undefined;
-    "aria-hidden"?: boolean | undefined;
-}>, "children" | "id" | "nativeID" | "style" | "testID" | "pointerEvents" | "hitSlop" | "collapsable" | "collapsableChildren" | "needsOffscreenAlphaCompositing" | "removeClippedSubviews" | "experimental_accessibilityOrder"> & Omit<Readonly<{
-    children?: React.ReactNode;
-    style?: import("react-native/types_generated/Libraries/StyleSheet/StyleSheet").ViewStyleProp | undefined;
-    collapsable?: boolean | undefined;
-    collapsableChildren?: boolean | undefined;
-    id?: string;
-    testID?: string | undefined;
-    nativeID?: string | undefined;
-    needsOffscreenAlphaCompositing?: boolean | undefined;
-    hitSlop?: import("react-native/types_generated/Libraries/StyleSheet/EdgeInsetsPropType").EdgeInsetsOrSizeProp | undefined;
-    pointerEvents?: ("auto" | "box-none" | "box-only" | "none") | undefined;
-    removeClippedSubviews?: boolean | undefined;
-    experimental_accessibilityOrder?: Array<string> | undefined;
-}>, never>>, "style" | "experimental_accessibilityOrder">, "lineBreakStrategyIOS" | "selectionColor" | "textBreakStrategy" | "allowFontScaling" | "maxFontSizeMultiplier" | "numberOfLines" | "onPress" | "onPressIn" | "onPressOut" | "style" | "textAlign" | "onBlur" | "onFocus" | "rejectResponderTermination" | "onScroll" | "onContentSizeChange" | "scrollEnabled" | "rows" | "value" | "onChange" | "disableKeyboardShortcuts" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "inputAccessoryViewID" | "inputAccessoryViewButtonLabel" | "keyboardAppearance" | "passwordRules" | "spellCheck" | "textContentType" | "lineBreakModeIOS" | "smartInsertDelete" | "cursorColor" | "selectionHandleColor" | "disableFullscreenUI" | "importantForAutofill" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "showSoftInputOnFocus" | "underlineColorAndroid" | "experimental_acceptDragAndDropTypes" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "forwardedRef" | "enterKeyHint" | "inputMode" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onKeyPress" | "onSelectionChange" | "onSubmitEditing" | "placeholder" | "placeholderTextColor" | "readOnly" | "returnKeyType" | "secureTextEntry" | "selection" | "selectTextOnFocus" | "blurOnSubmit" | "submitBehavior"> & Omit<Readonly<{
-    disableKeyboardShortcuts?: boolean | undefined;
-    clearButtonMode?: ("never" | "while-editing" | "unless-editing" | "always") | undefined;
-    clearTextOnFocus?: boolean | undefined;
-    dataDetectorTypes?: (import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").DataDetectorTypesType | undefined) | ReadonlyArray<import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").DataDetectorTypesType>;
-    enablesReturnKeyAutomatically?: boolean | undefined;
-    inputAccessoryViewID?: string | undefined;
-    inputAccessoryViewButtonLabel?: string | undefined;
-    keyboardAppearance?: ("default" | "light" | "dark") | undefined;
-    passwordRules?: import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").PasswordRules | undefined;
-    rejectResponderTermination?: boolean | undefined;
-    scrollEnabled?: boolean | undefined;
-    spellCheck?: boolean | undefined;
-    textContentType?: import("react-native").TextContentType | undefined;
-    lineBreakStrategyIOS?: ("none" | "standard" | "hangul-word" | "push-out") | undefined;
-    lineBreakModeIOS?: ("wordWrapping" | "char" | "clip" | "head" | "middle" | "tail") | undefined;
-    smartInsertDelete?: boolean | undefined;
-}>, "selectionColor" | "textBreakStrategy" | "allowFontScaling" | "maxFontSizeMultiplier" | "numberOfLines" | "onPress" | "onPressIn" | "onPressOut" | "style" | "textAlign" | "onBlur" | "onFocus" | "onScroll" | "onContentSizeChange" | "rows" | "value" | "onChange" | "cursorColor" | "selectionHandleColor" | "disableFullscreenUI" | "importantForAutofill" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "showSoftInputOnFocus" | "underlineColorAndroid" | "experimental_acceptDragAndDropTypes" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "forwardedRef" | "enterKeyHint" | "inputMode" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onKeyPress" | "onSelectionChange" | "onSubmitEditing" | "placeholder" | "placeholderTextColor" | "readOnly" | "returnKeyType" | "secureTextEntry" | "selection" | "selectTextOnFocus" | "blurOnSubmit" | "submitBehavior"> & Omit<Readonly<{
-    cursorColor?: import("react-native").ColorValue | undefined;
-    selectionHandleColor?: import("react-native").ColorValue | undefined;
-    disableFullscreenUI?: boolean | undefined;
-    importantForAutofill?: ("auto" | "no" | "noExcludeDescendants" | "yes" | "yesExcludeDescendants") | undefined;
-    inlineImageLeft?: string | undefined;
-    inlineImagePadding?: number | undefined;
-    numberOfLines?: number | undefined;
-    returnKeyLabel?: string | undefined;
-    rows?: number | undefined;
-    showSoftInputOnFocus?: boolean | undefined;
-    textBreakStrategy?: ("simple" | "highQuality" | "balanced") | undefined;
-    underlineColorAndroid?: import("react-native").ColorValue | undefined;
-}>, "selectionColor" | "allowFontScaling" | "maxFontSizeMultiplier" | "onPress" | "onPressIn" | "onPressOut" | "style" | "textAlign" | "onBlur" | "onFocus" | "onScroll" | "onContentSizeChange" | "value" | "onChange" | "experimental_acceptDragAndDropTypes" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "autoFocus" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "forwardedRef" | "enterKeyHint" | "inputMode" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onKeyPress" | "onSelectionChange" | "onSubmitEditing" | "placeholder" | "placeholderTextColor" | "readOnly" | "returnKeyType" | "secureTextEntry" | "selection" | "selectTextOnFocus" | "blurOnSubmit" | "submitBehavior"> & Omit<Readonly<{
-    experimental_acceptDragAndDropTypes?: ReadonlyArray<string> | undefined;
-    autoCapitalize?: import("react-native").AutoCapitalize | undefined;
-    autoComplete?: ("additional-name" | "address-line1" | "address-line2" | "birthdate-day" | "birthdate-full" | "birthdate-month" | "birthdate-year" | "cc-csc" | "cc-exp" | "cc-exp-day" | "cc-exp-month" | "cc-exp-year" | "cc-number" | "cc-name" | "cc-given-name" | "cc-middle-name" | "cc-family-name" | "cc-type" | "country" | "current-password" | "email" | "family-name" | "gender" | "given-name" | "honorific-prefix" | "honorific-suffix" | "name" | "name-family" | "name-given" | "name-middle" | "name-middle-initial" | "name-prefix" | "name-suffix" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "password" | "password-new" | "postal-address" | "postal-address-country" | "postal-address-extended" | "postal-address-extended-postal-code" | "postal-address-locality" | "postal-address-region" | "postal-code" | "street-address" | "sms-otp" | "tel" | "tel-country-code" | "tel-national" | "tel-device" | "url" | "username" | "username-new" | "off") | undefined;
-    autoCorrect?: boolean | undefined;
-    autoFocus?: boolean | undefined;
-    allowFontScaling?: boolean | undefined;
-    caretHidden?: boolean | undefined;
-    contextMenuHidden?: boolean | undefined;
-    defaultValue?: string | undefined;
-    editable?: boolean | undefined;
-    forwardedRef?: React.Ref<import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").TextInputInstance> | undefined;
-    enterKeyHint?: import("react-native").EnterKeyHintTypeOptions | undefined;
-    inputMode?: import("react-native").InputModeOptions | undefined;
-    keyboardType?: import("react-native").KeyboardTypeOptions | undefined;
-    maxFontSizeMultiplier?: number | undefined;
-    maxLength?: number | undefined;
-    multiline?: boolean | undefined;
-    onBlur?: ((e: import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").TextInputBlurEvent) => unknown) | undefined;
-    onChange?: ((e: import("react-native").TextInputChangeEvent) => unknown) | undefined;
-    onChangeText?: ((text: string) => unknown) | undefined;
-    onContentSizeChange?: ((e: import("react-native").TextInputContentSizeChangeEvent) => unknown) | undefined;
-    onEndEditing?: ((e: import("react-native").TextInputEndEditingEvent) => unknown) | undefined;
-    onFocus?: ((e: import("react-native").TextInputFocusEvent) => unknown) | undefined;
-    onKeyPress?: ((e: import("react-native").TextInputKeyPressEvent) => unknown) | undefined;
-    onPress?: ((event: import("react-native").GestureResponderEvent) => unknown) | undefined;
-    onPressIn?: ((event: import("react-native").GestureResponderEvent) => unknown) | undefined;
-    onPressOut?: ((event: import("react-native").GestureResponderEvent) => unknown) | undefined;
-    onSelectionChange?: ((e: import("react-native").TextInputSelectionChangeEvent) => unknown) | undefined;
-    onSubmitEditing?: ((e: import("react-native").TextInputSubmitEditingEvent) => unknown) | undefined;
-    onScroll?: ((e: import("react-native").ScrollEvent) => unknown) | undefined;
-    placeholder?: string | undefined;
-    placeholderTextColor?: import("react-native").ColorValue | undefined;
-    readOnly?: boolean | undefined;
-    returnKeyType?: import("react-native").ReturnKeyTypeOptions | undefined;
-    secureTextEntry?: boolean | undefined;
-    selection?: Readonly<{
-        start: number;
-        end?: number | undefined;
-    }> | undefined;
-    selectionColor?: import("react-native").ColorValue | undefined;
-    selectTextOnFocus?: boolean | undefined;
-    blurOnSubmit?: boolean | undefined;
-    submitBehavior?: import("react-native").SubmitBehavior | undefined;
-    style?: import("react-native/types_generated/Libraries/StyleSheet/StyleSheet").TextStyleProp | undefined;
-    value?: string | undefined;
-    textAlign?: ("left" | "center" | "right") | undefined;
-}>, never>>, "ref"> & {
-    ref?: React.Ref<import("react-native/types_generated/Libraries/Components/TextInput/TextInput.flow").TextInputInstance>;
-} & {
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    isFocused: boolean;
-    hasError?: boolean;
-    disabled?: boolean;
-    hasValue: boolean;
-}, {}, {
-    ref?: import("react").Ref<any> | undefined;
-}>;
-//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/OTPInput/utils.d.ts

@@ -1,3 +0,0 @@
-export declare const getInputBorderColor: (hasError: boolean, isFocused: boolean, hasValue: boolean) => "#666" | "rgb(0, 140, 255)" | "#ccc" | "#d13033";
-export declare const getInputShadow: (hasError: boolean, isFocused: boolean) => "none" | "0px 0px 3px 0px rgba(255,0,0,0.5)" | "0px 0px 3px 0px rgba(0,4,255,0.5)";
-//# sourceMappingURL=utils.d.ts.map

package/src/components/OTPInput/styles.ts

@@ -1,23 +0,0 @@
-import styled from '@emotion/native';
-
-import { getInputBorderColor, getInputShadow } from './utils';
-
-export const InputBox = styled.TextInput<{
-  isFocused: boolean;
-  hasError?: boolean;
-  disabled?: boolean;
-  hasValue: boolean;
-}>(({ isFocused, hasError, disabled, hasValue }) => ({
-  width: 48,
-  height: 56,
-  borderWidth: isFocused || hasError ? 1.5 : 1,
-  borderColor: getInputBorderColor(!!hasError, isFocused, hasValue),
-  borderRadius: 8,
-  textAlign: 'center',
-  fontSize: 24,
-  fontWeight: '600',
-  color: disabled ? '#888' : '#000',
-  backgroundColor: disabled ? '#f2f2f2' : '#fff',
-
-  boxShadow: getInputShadow(!!hasError, isFocused),
-}));

package/src/components/OTPInput/utils.ts

@@ -1,31 +0,0 @@
-export const getInputBorderColor = (
-  hasError: boolean,
-  isFocused: boolean,
-  hasValue: boolean,
-) => {
-  if (hasError) {
-    return '#d13033';
-  }
-
-  if (isFocused) {
-    return 'rgb(0, 140, 255)';
-  }
-
-  if (hasValue) {
-    return '#666';
-  }
-
-  return '#ccc';
-};
-
-export const getInputShadow = (hasError: boolean, isFocused: boolean) => {
-  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';
-};