@dryanovski/react-native-components 1.0.6 → 1.0.8

package/lib/typescript/src/components/Button/style.d.ts

@@ -0,0 +1,64 @@
+export declare const DEFAULT_BUTTON: {
+    primary_background_color: string;
+    primary_text_color: string;
+    secondary_background_color: string;
+    secondary_text_color: string;
+    danger_background_color: string;
+    danger_text_color: string;
+    ghost_background_color: string;
+    ghost_text_color: string;
+};
+export type ButtonStyleVariables = typeof DEFAULT_BUTTON;
+export declare const Styles: {
+    _base: {
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+        flexDirection: "row";
+        gap: number;
+    };
+    _disabled: {
+        opacity: number;
+    };
+    small: {
+        paddingVertical: number;
+        paddingHorizontal: number;
+    };
+    medium: {
+        paddingVertical: number;
+        paddingHorizontal: number;
+    };
+    large: {
+        paddingVertical: number;
+        paddingHorizontal: number;
+    };
+    _text: {};
+    text_primary: {
+        color: string;
+    };
+    text_secondary: {
+        color: string;
+    };
+    text_danger: {
+        color: string;
+    };
+    text_ghost: {
+        color: string;
+    };
+    primary: {
+        backgroundColor: string;
+    };
+    secondary: {
+        backgroundColor: string;
+    };
+    danger: {
+        backgroundColor: string;
+    };
+    ghost: {
+        backgroundColor: string;
+    };
+};
+export default Styles;
+//# sourceMappingURL=style.d.ts.map

package/lib/typescript/src/components/Button/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;CAY1B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,OAAO,cAAc,CAAC;AAEzD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/typescript/src/components/Button/types.d.ts

@@ -0,0 +1,51 @@
+import type { ComponentRef } from 'react';
+import type { StyleProp, TextStyle, TouchableOpacity, TouchableOpacityProps, ViewStyle } from 'react-native';
+import type Button from './Button';
+/**
+ * Ref type for the Button component
+ */
+export type ButtonRef = ComponentRef<typeof TouchableOpacity>;
+/**
+ * The root ref type for the Button component
+ */
+export type ButtonBaseRef = ComponentRef<typeof Button>;
+/**
+ * The variant types for the Button component
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+/**
+ * Button size types
+ */
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface ButtonBaseProps extends Omit<TouchableOpacityProps, 'style'> {
+    /**
+     * The title of the button.
+     */
+    title: string;
+    /**
+     * The style of the button container.
+     * Optional.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The text style of the button title.
+     * Optional.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * The size of the button.
+     * @default 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * The variant of the button.
+     * @default 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/Button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,qBAAqB,EACrB,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC;IAC3E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/lib/typescript/src/components/Divider/Divider.d.ts

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+import type { DividerProps } from './types';
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<View>>;
+export default Divider;
+//# sourceMappingURL=Divider.d.ts.map

package/lib/typescript/src/components/Divider/Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAEpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,+FAkBlB,CAAC;AAIH,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/components/Divider/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Divider/styles.ts"],"names":[],"mappings":""}

package/lib/typescript/src/components/Divider/types.d.ts

@@ -0,0 +1,31 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type DividerThickness = 1 | 5 | 10;
+export type DividerOrientation = 'horizontal' | 'vertical';
+export interface DividerProps extends ViewProps {
+    /**
+     * Style for the divider component.
+     * Optional.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * The thickness of the divider.
+     * @default 1
+     */
+    thickness?: DividerThickness;
+    /**
+     * The color of the divider.
+     * @default '#000'
+     */
+    color?: string;
+    /**
+     * The orientation of the divider.
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * The length of the divider.
+     * @default '100%'
+     */
+    length?: number | string;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/components/Divider/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Divider/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAE1C,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAEjC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B"}

package/lib/typescript/src/components/Layout/HStack.d.ts

@@ -0,0 +1,4 @@
+import { View } from 'react-native';
+import type { HStackProps } from './layout.types';
+export declare const HStack: import("react").ForwardRefExoticComponent<HStackProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=HStack.d.ts.map

package/lib/typescript/src/components/Layout/HStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/HStack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,8FAIjB,CAAC"}

package/lib/typescript/src/components/Layout/VStack.d.ts

@@ -0,0 +1,4 @@
+import { View } from 'react-native';
+import type { VStackProps } from './layout.types';
+export declare const VStack: import("react").ForwardRefExoticComponent<VStackProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=VStack.d.ts.map

package/lib/typescript/src/components/Layout/VStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/VStack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,8FAIjB,CAAC"}

package/lib/typescript/src/components/Layout/layout.types.d.ts

@@ -0,0 +1,8 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export type VStackProps = {
+    style?: StyleProp<ViewStyle>;
+};
+export type HStackProps = {
+    style?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=layout.types.d.ts.map

package/lib/typescript/src/components/Layout/layout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Layout/layout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -1,3 +1,18 @@
+export * from './components/Button/Button';
+export * from './components/Button/DangerButton';
+export * from './components/Button/GhostButton';
+export * from './components/Button/PrimaryButton';
+export * from './components/Button/SecondaryButton';
 export * from './components/Card/Card';
+export * from './components/Divider/Divider';
+export * from './components/Layout/HStack';
+export * from './components/Layout/VStack';
+export * from './components/Surface/Surface';
+export * from './components/Button/types';
+export * from './components/Card/types';
+export * from './components/Divider/types';
+export * from './components/Layout/layout.types';
+export * from './components/Surface/types';
+export * from './types/general.types';
 export * from './providers/ThemeProvider';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AAGvC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAG7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AAGtC,cAAc,2BAA2B,CAAC"}

package/lib/typescript/src/providers/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAQjB;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,wBAMpB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+BtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAUjB;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,wBAMpB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiDtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/utils/fontScale.d.ts

@@ -0,0 +1,2 @@
+export declare function fontScale(size: number): number;
+//# sourceMappingURL=fontScale.d.ts.map

package/lib/typescript/src/utils/fontScale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontScale.d.ts","sourceRoot":"","sources":["../../../../src/utils/fontScale.ts"],"names":[],"mappings":"AAuBA,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,UA2BrC"}

package/lib/typescript/src/utils/getDeviceType.d.ts

@@ -0,0 +1,2 @@
+export declare const getDeviceType: () => "phone" | "tablet";
+//# sourceMappingURL=getDeviceType.d.ts.map

package/lib/typescript/src/utils/getDeviceType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDeviceType.d.ts","sourceRoot":"","sources":["../../../../src/utils/getDeviceType.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,QAAO,OAAO,GAAG,QAe1C,CAAC"}

package/lib/typescript/src/utils/getScreenSizeCategory.d.ts

@@ -0,0 +1,2 @@
+export declare const getScreenSizeCategory: () => "small" | "medium" | "large";
+//# sourceMappingURL=getScreenSizeCategory.d.ts.map

package/lib/typescript/src/utils/getScreenSizeCategory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScreenSizeCategory.d.ts","sourceRoot":"","sources":["../../../../src/utils/getScreenSizeCategory.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,qBAAqB,QAAO,OAAO,GAAG,QAAQ,GAAG,OAI7D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryanovski/react-native-components",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Collection of reusable React Native components for building mobile applications.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -39,6 +39,7 @@
     "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.12",
+    "expo-font": "~14.0.10",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-transform-remove-imports": "^1.8.0",
     "del-cli": "^5.1.0",
@@ -48,7 +49,7 @@
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "react": "19.1.0",
+    "react": "19.2.3",
     "react-native": "0.81.5",
     "react-native-builder-bob": "^0.40.12",
     "react-native-gesture-handler": "^2.28.0",
@@ -57,7 +58,7 @@
     "react-native-screens": "~4.16.0",
     "react-native-svg": "15.12.1",
     "react-native-worklets": "0.5.1",
-    "react-test-renderer": "19.1.0",
+    "react-test-renderer": "19.2.3",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {

package/src/components/Button/Button.tsx

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import Styles from './style';
+import type {
+  ButtonBaseProps,
+  ButtonRef,
+  ButtonSize,
+  ButtonVariant,
+} from './types';
+
+/**
+ * A customizable button component that supports different variants and sizes.
+ * @return A TouchableOpacity button with text.
+ */
+export const Button = forwardRef<ButtonRef, ButtonBaseProps>((props, ref) => {
+  const {
+    variant = 'primary',
+    title,
+    size = 'medium',
+    onPress = () => undefined,
+    style,
+    disabled = false,
+    textStyle,
+    ...rest
+  } = props;
+
+  /**
+   * Derives the text style variant based on the button variant.
+   */
+  const textVariant = ('text_' + variant) as `text_${ButtonVariant}`;
+
+  return (
+    <TouchableOpacity
+      ref={ref}
+      onPress={onPress}
+      disabled={disabled}
+      style={[
+        Styles._base,
+        Styles[size as ButtonSize],
+        Styles[variant as ButtonVariant],
+        disabled && Styles._disabled,
+        style,
+      ]}
+      {...rest}
+    >
+      <Text style={[Styles._text, Styles[textVariant], textStyle]}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+});
+
+Button.displayName = 'ButtonBase';
+
+export default Button;

package/src/components/Button/DangerButton.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import { Button } from './Button';
+import type { ButtonBaseProps, ButtonBaseRef } from './types';
+
+/**
+ * A button component styled for dangerous actions, such as deletions.
+ * @returns A ButtonBase component with the "danger" variant.
+ */
+export const DangerButton = forwardRef<ButtonBaseRef, ButtonBaseProps>(
+  (props, ref) => {
+    return <Button ref={ref} variant="danger" {...props} />;
+  }
+);
+
+DangerButton.displayName = 'DangerButton';
+
+export default DangerButton;

package/src/components/Button/GhostButton.tsx

@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+import { Button } from './Button';
+import type { ButtonBaseProps, ButtonBaseRef } from './types';
+
+export const GhostButton = forwardRef<ButtonBaseRef, ButtonBaseProps>(
+  (props, ref) => {
+    return <Button ref={ref} variant="ghost" {...props} />;
+  }
+);
+
+GhostButton.displayName = 'GhostButton';
+
+export default GhostButton;

package/src/components/Button/PrimaryButton.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+import { Button } from './Button';
+import type { ButtonBaseProps, ButtonBaseRef } from './types';
+
+/**
+ * A button component styled for primary actions.
+ */
+export const PrimaryButton = forwardRef<ButtonBaseRef, ButtonBaseProps>(
+  (props, ref) => {
+    return <Button ref={ref} variant="primary" {...props} />;
+  }
+);
+
+PrimaryButton.displayName = 'PrimaryButton';
+
+export default PrimaryButton;

package/src/components/Button/SecondaryButton.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+import { Button } from './Button';
+import type { ButtonBaseProps, ButtonBaseRef } from './types';
+
+/**
+ * A button component styled for secondary actions.
+ */
+export const SecondaryButton = forwardRef<ButtonBaseRef, ButtonBaseProps>(
+  (props, ref) => {
+    return <Button ref={ref} variant="secondary" {...props} />;
+  }
+);
+
+SecondaryButton.displayName = 'SecondaryButton';
+
+export default SecondaryButton;

package/src/components/Button/style.ts

@@ -0,0 +1,76 @@
+import Style from '../../utils/Style';
+
+export const DEFAULT_BUTTON = {
+  primary_background_color: '#007bff',
+  primary_text_color: '#ffffff',
+
+  secondary_background_color: '#6c757d',
+  secondary_text_color: '#ffffff',
+
+  danger_background_color: '#dc3545',
+  danger_text_color: '#ffffff',
+
+  ghost_background_color: 'transparent',
+  ghost_text_color: '#007bff',
+};
+
+export type ButtonStyleVariables = typeof DEFAULT_BUTTON;
+
+export const Styles = Style.create({
+  _base: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: 10,
+  },
+
+  _disabled: {
+    opacity: 0.6,
+  },
+
+  small: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  medium: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+  },
+  large: {
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+  },
+
+  _text: {},
+
+  text_primary: {
+    color: DEFAULT_BUTTON.primary_text_color,
+  },
+  text_secondary: {
+    color: DEFAULT_BUTTON.secondary_text_color,
+  },
+  text_danger: {
+    color: DEFAULT_BUTTON.danger_text_color,
+  },
+  text_ghost: {
+    color: DEFAULT_BUTTON.ghost_text_color,
+  },
+
+  primary: {
+    backgroundColor: DEFAULT_BUTTON.primary_background_color,
+  },
+  secondary: {
+    backgroundColor: DEFAULT_BUTTON.secondary_background_color,
+  },
+  danger: {
+    backgroundColor: DEFAULT_BUTTON.danger_background_color,
+  },
+  ghost: {
+    backgroundColor: DEFAULT_BUTTON.ghost_background_color,
+  },
+});
+
+export default Styles;

package/src/components/Button/types.ts

@@ -0,0 +1,62 @@
+import type { ComponentRef } from 'react';
+import type {
+  StyleProp,
+  TextStyle,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  ViewStyle,
+} from 'react-native';
+import type Button from './Button';
+
+/**
+ * Ref type for the Button component
+ */
+export type ButtonRef = ComponentRef<typeof TouchableOpacity>;
+
+/**
+ * The root ref type for the Button component
+ */
+export type ButtonBaseRef = ComponentRef<typeof Button>;
+
+/**
+ * The variant types for the Button component
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost';
+
+/**
+ * Button size types
+ */
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+export interface ButtonBaseProps extends Omit<TouchableOpacityProps, 'style'> {
+  /**
+   * The title of the button.
+   */
+  title: string;
+  /**
+   * The style of the button container.
+   * Optional.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The text style of the button title.
+   * Optional.
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * The size of the button.
+   * @default 'medium'
+   */
+  size?: ButtonSize;
+  /**
+   * The variant of the button.
+   * @default 'primary'
+   */
+  variant?: ButtonVariant;
+
+  /**
+   * Whether the button is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+}

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import type { DividerProps } from './types';
+
+export const Divider = forwardRef<ViewRef, DividerProps>((props, ref) => {
+  const {
+    thickness = 1,
+    color = '#c4c4c4',
+    orientation = 'horizontal',
+    length = '100%',
+    style,
+    ...rest
+  } = props;
+
+  const dividerStyle = {
+    backgroundColor: color,
+    ...(orientation === 'vertical'
+      ? { width: thickness, height: length }
+      : { height: thickness, width: length }),
+  } as ViewStyle;
+
+  return <View ref={ref} style={[dividerStyle, style]} {...rest} />;
+});
+
+Divider.displayName = 'Divider';
+
+export default Divider;

package/src/components/Divider/types.ts

@@ -0,0 +1,36 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+export type DividerThickness = 1 | 5 | 10;
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+export interface DividerProps extends ViewProps {
+  /**
+   * Style for the divider component.
+   * Optional.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The thickness of the divider.
+   * @default 1
+   */
+  thickness?: DividerThickness;
+
+  /**
+   * The color of the divider.
+   * @default '#000'
+   */
+  color?: string;
+
+  /**
+   * The orientation of the divider.
+   * @default 'horizontal'
+   */
+  orientation?: DividerOrientation;
+
+  /**
+   * The length of the divider.
+   * @default '100%'
+   */
+  length?: number | string;
+}