@adiraku/react-native-ui 1.2.3-snapshot.4 → 1.2.3-snapshot.6

package/src/components/CheckBoxInput/CheckBoxInput.style.tsx

@@ -1,106 +1,106 @@
-import type { TextStyle } from 'react-native';
-import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import type { CheckboxInputProps } from './CheckBoxInput.type';
-import { Palettes, Radius, Spacing } from '../../themes';
-
-interface ComputedStyleProps {
-  fieldWrapper?: ViewStyle;
-  fieldContainer?: ViewStyle;
-  labelContainer?: ViewStyle;
-  label?: TextStyle;
-  inputWrapper?: ViewStyle;
-  textField?: TextStyle;
-  messageHelper?: TextStyle;
-  counter?: TextStyle;
-  inputIconWrapper?: ViewStyle;
-  checkboxItemWrapper?: ViewStyle;
-}
-
-export const getStyle = (props: CheckboxInputProps) => {
-  const { editable = true, disabled = false, isError, errorMessage } = props;
-
-  const stateColor =
-    isError || errorMessage
-      ? { text: Palettes.red[500], border: Palettes.red[500] }
-      : {
-          text: Palettes.black[900],
-          border: Palettes.grey[200],
-        };
-
-  const computedStyle: ComputedStyleProps = {};
-
-  computedStyle.fieldWrapper = {
-    width: '100%',
-  };
-
-  computedStyle.fieldContainer = {
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-    width: '100%',
-  };
-
-  computedStyle.labelContainer = {
-    zIndex: 99,
-    position: 'absolute',
-  };
-
-  computedStyle.label = {
-    color: stateColor.text,
-    backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
-    paddingHorizontal: Spacing[4],
-    borderRadius: Radius[4],
-    marginLeft: Spacing[8],
-  };
-
-  computedStyle.inputWrapper = {
-    height: 48,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    borderWidth: Radius.border,
-    borderColor: stateColor.border,
-    backgroundColor:
-      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
-    borderRadius: Radius[8],
-    padding: Spacing[8],
-    width: '100%',
-  };
-
-  computedStyle.textField = {
-    flex: 1,
-    color: Palettes.black[900],
-    padding: 0,
-    margin: 0,
-    overflow: 'visible',
-    fontSize: 14,
-    lineHeight: 21,
-    fontFamily: 'Montserrat-Regular',
-  };
-
-  computedStyle.messageHelper = {
-    alignSelf: 'flex-start',
-    marginLeft: 12,
-    color: stateColor.text,
-  };
-
-  computedStyle.counter = {
-    marginLeft: Spacing[4],
-    color: Palettes.grey[500],
-  };
-
-  computedStyle.inputIconWrapper = {
-    marginLeft: Spacing[4],
-  };
-
-  computedStyle.checkboxItemWrapper = {
-    paddingVertical: Spacing[16],
-    borderRadius: Radius[8],
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { TextStyle } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { CheckboxInputProps } from './CheckBoxInput.type';
+import { Palettes, Radius, Spacing } from '../../themes';
+
+interface ComputedStyleProps {
+  fieldWrapper?: ViewStyle;
+  fieldContainer?: ViewStyle;
+  labelContainer?: ViewStyle;
+  label?: TextStyle;
+  inputWrapper?: ViewStyle;
+  textField?: TextStyle;
+  messageHelper?: TextStyle;
+  counter?: TextStyle;
+  inputIconWrapper?: ViewStyle;
+  checkboxItemWrapper?: ViewStyle;
+}
+
+export const getStyle = (props: CheckboxInputProps) => {
+  const { editable = true, disabled = false, isError, errorMessage } = props;
+
+  const stateColor =
+    isError || errorMessage
+      ? { text: Palettes.red[500], border: Palettes.red[500] }
+      : {
+          text: Palettes.black[900],
+          border: Palettes.grey[200],
+        };
+
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.fieldWrapper = {
+    width: '100%',
+  };
+
+  computedStyle.fieldContainer = {
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    width: '100%',
+  };
+
+  computedStyle.labelContainer = {
+    zIndex: 99,
+    position: 'absolute',
+  };
+
+  computedStyle.label = {
+    color: stateColor.text,
+    backgroundColor:
+      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
+    paddingHorizontal: Spacing[4],
+    borderRadius: Radius[4],
+    marginLeft: Spacing[8],
+  };
+
+  computedStyle.inputWrapper = {
+    height: 48,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: Radius.border,
+    borderColor: stateColor.border,
+    backgroundColor:
+      !editable || disabled ? Palettes.grey[50] : Palettes.whiteDark[50],
+    borderRadius: Radius[8],
+    padding: Spacing[8],
+    width: '100%',
+  };
+
+  computedStyle.textField = {
+    flex: 1,
+    color: Palettes.black[900],
+    padding: 0,
+    margin: 0,
+    overflow: 'visible',
+    fontSize: 14,
+    lineHeight: 21,
+    fontFamily: 'Montserrat-Regular',
+  };
+
+  computedStyle.messageHelper = {
+    alignSelf: 'flex-start',
+    marginLeft: 12,
+    color: stateColor.text,
+  };
+
+  computedStyle.counter = {
+    marginLeft: Spacing[4],
+    color: Palettes.grey[500],
+  };
+
+  computedStyle.inputIconWrapper = {
+    marginLeft: Spacing[4],
+  };
+
+  computedStyle.checkboxItemWrapper = {
+    paddingVertical: Spacing[16],
+    borderRadius: Radius[8],
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/CheckBoxInput/CheckBoxInput.type.ts

@@ -1,75 +1,75 @@
-import type { ReactNode } from 'react';
-
-import type { TouchableHighlightProps } from 'react-native';
-import type { TouchableWithoutFeedbackProps } from 'react-native';
-
-import type { BottomSheetProps } from '../BottomSheet/BottomSheet.type';
-import type { ButtonProps } from '../button/button.type';
-
-export interface CheckboxInputProps extends TouchableWithoutFeedbackProps {
-  /**
-   * A string that specifies the label text for the input field.
-   */
-  label: string;
-
-  /**
-   * A string that specifies a helper message to be displayed below the input field.
-   * This message can be used to provide additional information or
-   * guidance to the user, such as formatting requirements or error messages.
-   */
-  helperMessage?: string;
-
-  /**
-   * Indicate error state
-   */
-  isError?: boolean;
-
-  /**
-   * A string that specifies an error message to be displayed below the input field.
-   * When this prop is present, it will replace the helperMessage prop with the
-   * specified error message, regardless of the value of the isError prop.
-   */
-  errorMessage?: string;
-
-  /**
-   * Show Icon at the end of TextInput.
-   */
-  inputIcon?: ReactNode;
-
-  value?: CheckboxItemProps[];
-
-  editable?: boolean;
-  disabled?: boolean;
-
-  data?: CheckboxItemProps[];
-
-  onSaveInput?: (selectedValue?: CheckboxItemProps[]) => void;
-
-  saveInputLabel: string;
-
-  saveInputProps?: ButtonProps;
-
-  bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
-
-  selectionLimit?: number;
-
-  onInputDismiss?: () => void;
-
-  customCheckboxInput?: (props: CheckboxItemPropsComponent) => any;
-
-  customItemSeparator?: any;
-}
-
-export type CheckboxItemProps = {
-  label: string;
-  value: string;
-  disabled?: boolean;
-} & TouchableHighlightProps;
-
-export interface CheckboxItemPropsComponent extends TouchableHighlightProps {
-  data: {
-    item: CheckboxItemProps;
-  };
-  selectedValue?: CheckboxItemProps[];
-  onItemPress?: (value: CheckboxItemProps) => void;
-}
+import type { ReactNode } from 'react';
+
+import type { TouchableHighlightProps } from 'react-native';
+import type { TouchableWithoutFeedbackProps } from 'react-native';
+
+import type { BottomSheetProps } from '../BottomSheet/BottomSheet.type';
+import type { ButtonProps } from '../button/button.type';
+
+export interface CheckboxInputProps extends TouchableWithoutFeedbackProps {
+  /**
+   * A string that specifies the label text for the input field.
+   */
+  label: string;
+
+  /**
+   * A string that specifies a helper message to be displayed below the input field.
+   * This message can be used to provide additional information or
+   * guidance to the user, such as formatting requirements or error messages.
+   */
+  helperMessage?: string;
+
+  /**
+   * Indicate error state
+   */
+  isError?: boolean;
+
+  /**
+   * A string that specifies an error message to be displayed below the input field.
+   * When this prop is present, it will replace the helperMessage prop with the
+   * specified error message, regardless of the value of the isError prop.
+   */
+  errorMessage?: string;
+
+  /**
+   * Show Icon at the end of TextInput.
+   */
+  inputIcon?: ReactNode;
+
+  value?: CheckboxItemProps[];
+
+  editable?: boolean;
+  disabled?: boolean;
+
+  data?: CheckboxItemProps[];
+
+  onSaveInput?: (selectedValue?: CheckboxItemProps[]) => void;
+
+  saveInputLabel: string;
+
+  saveInputProps?: ButtonProps;
+
+  bottomSheetOpt: Omit<BottomSheetProps, 'visibility' | 'onDismiss'>;
+
+  selectionLimit?: number;
+
+  onInputDismiss?: () => void;
+
+  customCheckboxInput?: (props: CheckboxItemPropsComponent) => any;
+
+  customItemSeparator?: any;
+}
+
+export type CheckboxItemProps = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+} & TouchableHighlightProps;
+
+export interface CheckboxItemPropsComponent extends TouchableHighlightProps {
+  data: {
+    item: CheckboxItemProps;
+  };
+  selectedValue?: CheckboxItemProps[];
+  onItemPress?: (value: CheckboxItemProps) => void;
+}

package/src/components/Checkbox/Checkbox.component.tsx

@@ -1,37 +1,37 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { getStyle } from './Checkbox.style';
-
-import type { CheckboxProps } from './Checkbox.type';
-import { IconTick } from '../../icons';
-import { Palettes } from '../../themes';
-
-const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {
-  const { selected, disabled, ...rest } = props;
-
-  const computedStyle = getStyle();
-
-  return (
-    <>
-      <View
-        style={[
-          computedStyle.outer,
-          selected && computedStyle.outerSelected,
-          disabled && computedStyle.outerDisabled,
-        ]}
-        {...rest}
-      >
-        {selected && (
-          <IconTick
-            height={14}
-            width={14}
-            fill={disabled ? Palettes.white[50] : Palettes.black[900]}
-          />
-        )}
-      </View>
-    </>
-  );
-};
-
-export { Checkbox };
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { getStyle } from './Checkbox.style';
+
+import type { CheckboxProps } from './Checkbox.type';
+import { IconTick } from '../../icons';
+import { Palettes } from '../../themes';
+
+const Checkbox: React.FunctionComponent<CheckboxProps> = (props) => {
+  const { selected, disabled, ...rest } = props;
+
+  const computedStyle = getStyle();
+
+  return (
+    <>
+      <View
+        style={[
+          computedStyle.outer,
+          selected && computedStyle.outerSelected,
+          disabled && computedStyle.outerDisabled,
+        ]}
+        {...rest}
+      >
+        {selected && (
+          <IconTick
+            height={14}
+            width={14}
+            fill={disabled ? Palettes.white[50] : Palettes.black[900]}
+          />
+        )}
+      </View>
+    </>
+  );
+};
+
+export { Checkbox };

package/src/components/Checkbox/Checkbox.style.tsx

@@ -1,39 +1,39 @@
-import { StyleSheet } from 'react-native';
-import { Palettes, Radius } from '../../themes';
-
-import type { ViewStyle } from 'react-native';
-
-interface ComputedStyleProps {
-  outer?: ViewStyle;
-  inner?: ViewStyle;
-  outerSelected?: ViewStyle;
-  innerSelected?: ViewStyle;
-  outerDisabled?: ViewStyle;
-  innerDisabled?: ViewStyle;
-}
-
-export const getStyle = () => {
-  const computedStyle: ComputedStyleProps = {};
-
-  computedStyle.outer = {
-    height: 18,
-    width: 18,
-    borderRadius: Radius[4],
-    borderWidth: 2,
-    borderColor: Palettes.black[900],
-    justifyContent: 'center',
-    alignItems: 'center',
-  };
-
-  computedStyle.outerSelected = {
-    backgroundColor: Palettes.yellow[600],
-    borderColor: Palettes.yellow[600],
-  };
-
-  computedStyle.outerDisabled = {
-    borderColor: Palettes.grey[100],
-    backgroundColor: Palettes.grey[100],
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import { StyleSheet } from 'react-native';
+import { Palettes, Radius } from '../../themes';
+
+import type { ViewStyle } from 'react-native';
+
+interface ComputedStyleProps {
+  outer?: ViewStyle;
+  inner?: ViewStyle;
+  outerSelected?: ViewStyle;
+  innerSelected?: ViewStyle;
+  outerDisabled?: ViewStyle;
+  innerDisabled?: ViewStyle;
+}
+
+export const getStyle = () => {
+  const computedStyle: ComputedStyleProps = {};
+
+  computedStyle.outer = {
+    height: 18,
+    width: 18,
+    borderRadius: Radius[4],
+    borderWidth: 2,
+    borderColor: Palettes.black[900],
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+
+  computedStyle.outerSelected = {
+    backgroundColor: Palettes.yellow[600],
+    borderColor: Palettes.yellow[600],
+  };
+
+  computedStyle.outerDisabled = {
+    borderColor: Palettes.grey[100],
+    backgroundColor: Palettes.grey[100],
+  };
+
+  return StyleSheet.create(computedStyle);
+};

package/src/components/Checkbox/Checkbox.type.ts

@@ -1,7 +1,7 @@
-import { type ViewProps } from 'react-native';
-
-export interface CheckboxProps extends ViewProps {
-  selected?: boolean;
-
-  disabled?: boolean;
-}
+import { type ViewProps } from 'react-native';
+
+export interface CheckboxProps extends ViewProps {
+  selected?: boolean;
+
+  disabled?: boolean;
+}

package/src/components/Divider/Divider.component.tsx

@@ -1,23 +1,23 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import { getStyle } from './Divider.style';
-import type { DividerProps } from './Divider.type';
-
-const Divider: React.FunctionComponent<DividerProps> = (props) => {
-  const { orientation = 'horizontal', style, ...rest } = props;
-
-  const computedStyle = getStyle(props);
-
-  return (
-    <View
-      style={[
-        computedStyle.base,
-        computedStyle[orientation] || computedStyle.horizontal,
-        style,
-      ]}
-      {...rest}
-    />
-  );
-};
-
-export { Divider };
+import * as React from 'react';
+import { View } from 'react-native';
+import { getStyle } from './Divider.style';
+import type { DividerProps } from './Divider.type';
+
+const Divider: React.FunctionComponent<DividerProps> = (props) => {
+  const { orientation = 'horizontal', style, ...rest } = props;
+
+  const computedStyle = getStyle(props);
+
+  return (
+    <View
+      style={[
+        computedStyle.base,
+        computedStyle[orientation] || computedStyle.horizontal,
+        style,
+      ]}
+      {...rest}
+    />
+  );
+};
+
+export { Divider };

package/src/components/Divider/Divider.style.tsx

@@ -1,34 +1,34 @@
-import type { ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
-import type { DividerProps } from './Divider.type';
-import { Palettes } from '../../themes';
-
-interface ComputedStyleProps {
-  base?: ViewStyle;
-  vertical?: ViewStyle;
-  horizontal?: ViewStyle;
-}
-
-export const getStyle = (props: DividerProps) => {
-  const { thickness = null, color = Palettes.grey[100] } = props;
-
-  const computedStyle: ComputedStyleProps = {};
-
-  const dividerThickness = thickness || 1;
-
-  computedStyle.base = {
-    backgroundColor: color,
-  };
-
-  computedStyle.vertical = {
-    width: dividerThickness,
-    height: '100%',
-  };
-
-  computedStyle.horizontal = {
-    width: '100%',
-    height: dividerThickness,
-  };
-
-  return StyleSheet.create(computedStyle);
-};
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { DividerProps } from './Divider.type';
+import { Palettes } from '../../themes';
+
+interface ComputedStyleProps {
+  base?: ViewStyle;
+  vertical?: ViewStyle;
+  horizontal?: ViewStyle;
+}
+
+export const getStyle = (props: DividerProps) => {
+  const { thickness = null, color = Palettes.grey[100] } = props;
+
+  const computedStyle: ComputedStyleProps = {};
+
+  const dividerThickness = thickness || 1;
+
+  computedStyle.base = {
+    backgroundColor: color,
+  };
+
+  computedStyle.vertical = {
+    width: dividerThickness,
+    height: '100%',
+  };
+
+  computedStyle.horizontal = {
+    width: '100%',
+    height: dividerThickness,
+  };
+
+  return StyleSheet.create(computedStyle);
+};