@nexara/nativeflow 0.1.1

package/src/types/stack.type.ts

@@ -0,0 +1,55 @@
+import type { FlexStyle, StyleProp, ViewStyle } from "react-native";
+
+export type HStackProps = ViewStyle & {
+    /** 
+     * Defines the alignment of children along the main axis. 
+     */
+    justify?: FlexStyle['justifyContent'];
+
+    /** 
+     * Defines the alignment of children along the cross axis. 
+     */
+    align?: FlexStyle['alignItems'];
+
+    /** 
+     * Determines whether the items should wrap onto multiple lines. 
+     */
+    fWrap?: FlexStyle['flexWrap'];
+
+    /** 
+     * Space between child components. 
+     */
+    gap?: number;
+
+    /** 
+     * Custom styles for the container. 
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** 
+     * Child components to be rendered inside the HStack. 
+     */
+    children?: React.ReactNode;
+};
+
+export type VStackProps = ViewStyle & {
+    /** 
+     * Child components to be rendered inside the VStack. 
+     */
+    children?: React.ReactNode;
+
+    /** 
+     * Defines the alignment of children along the cross axis. 
+     */
+    align?: FlexStyle['alignItems'];
+
+    /** 
+     * Space between child components. 
+     */
+    gap?: number;
+
+    /** 
+     * Custom styles for the container. 
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+};

package/src/types/styledComponents.type.ts

@@ -0,0 +1,111 @@
+import type { ColorValue, DimensionValue, StyleProp, TextProps, TextStyle, ViewProps, ViewStyle } from "react-native";
+import type { TypographyVariant } from "./common.type";
+
+export type StyledViewProps = ViewStyle & ViewProps & {
+    /** 
+     * Flex value to control the flex growth, shrink, and basis of the view. 
+     */
+    f?: number;
+
+    /** 
+     * Defines how children are aligned along the main axis. 
+     */
+    justify?: ViewStyle['justifyContent'];
+
+    /** 
+     * Defines how children are aligned along the cross axis. 
+     */
+    align?: ViewStyle['alignItems'];
+
+    /** 
+     * Determines whether the children should wrap if they exceed the container size. 
+     */
+    fWrap?: ViewStyle['flexWrap'];
+
+    /** 
+     * Background color of the view. 
+     */
+    bg?: string;
+
+    /** 
+     * Whether the background color should be derived from the theme. 
+     */
+    themeBg?: boolean;
+
+    /** 
+     * Height of the view, can be a number or a percentage string. 
+     */
+    h?: DimensionValue;
+
+    /** 
+     * Width of the view, can be a number or a percentage string. 
+     */
+    w?: DimensionValue;
+
+    /** 
+     * Child components to be rendered inside StyledView. 
+     */
+    children?: React.ReactNode;
+
+    /** 
+     * Custom styles for the view component. 
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+export type StyledTextProps = TextProps & {
+    /** 
+     * Defines the typography variant for the text. 
+     */
+    variant?: TypographyVariant;
+
+    /** 
+     * Text content to be rendered inside StyledText. 
+     */
+    children?: React.ReactNode;
+
+    /** 
+     * Custom styles for the text component. 
+     */
+    style?: StyleProp<TextStyle>;
+
+    /** 
+     * Font family for the text. 
+     */
+    ff?: string;
+
+    /** 
+     * Font size of the text. 
+     */
+    fs?: number;
+
+    /** 
+     * Font weight of the text. 
+     */
+    fw?: TextStyle['fontWeight'];
+
+    /** 
+     * Whether the text should be automatically capitalized or adjusted based on the theme. 
+     */
+    tas?: boolean;
+
+    /** 
+     * Color of the text. Accepts standard color values. 
+     */
+    color?: ColorValue;
+
+    /** 
+     * Whether the text color should be derived from the theme. 
+     */
+    themeColor?: boolean;
+
+    /** 
+     * Whether the text should use the primary theme color. 
+     */
+    primary?: boolean;
+
+    /** 
+     * Whether the text should use the secondary theme color. 
+     */
+    secondary?: boolean;
+};

package/src/types/switch.type.ts

@@ -0,0 +1,39 @@
+import type { SwitchProps as NativeSwitchProps } from "react-native";
+
+export type SwitchProps = NativeSwitchProps & {
+    /** 
+     * Determines whether the switch is turned on or off.
+     */
+    checked?: boolean;
+
+    /** 
+     * The color of the switch thumb.
+     */
+    color?: string;
+
+    /** 
+     * If true, the switch will be disabled and not interactable.
+     */
+    disabled?: boolean;
+
+    /** 
+     * The size of the switch thumb and track.
+     */
+    size?: number;
+
+    /** 
+     * The color of the track when the switch is in the "on" position.
+     */
+    activeTrackColor?: string;
+
+    /** 
+     * The color of the track when the switch is in the "off" position.
+     */
+    inactiveTrackColor?: string;
+
+    /** 
+     * Callback function triggered when the switch state changes.
+     * @param newValue - The updated boolean value of the switch.
+     */
+    onChange?: (newValue: boolean) => void;
+};

package/src/types/userInput.type.ts

@@ -0,0 +1,95 @@
+import type { StyleProp, TextInputProps, TextStyle, ViewStyle } from "react-native";
+import type { TypographyVariant, UserInputVariant } from "./common.type";
+
+export type UserInputProps = TextInputProps & {
+    /** 
+     * Defines the input style variant.
+     * - 'outlined': Input has a border around it.
+     * - 'standard': Only the bottom border is visible.
+     * @default 'standard'
+     */
+    variant?: UserInputVariant;
+
+    /** Label text displayed above the input field. */
+    label?: string;
+
+    /** Background color of the input container. */
+    bg?: string;
+
+    /** Border radius of the input field. */
+    br?: number;
+
+    /** Border stroke width (thickness). */
+    stroke?: number;
+
+    /** Color of the label text. */
+    labelColor?: string;
+
+    /**
+     * Defines typography styles for text elements.
+     * - `label`: Typography variant for the label.
+     * - `helperText`: Typography variant for the helper text.
+     */
+    textVariant?: {
+        label?: TypographyVariant;
+        helperText?: TypographyVariant;
+    };
+
+    /** Color of the text inside the input field. */
+    inputTextColor?: string;
+
+    /** Border color of the input field. */
+    strokeColor?: string;
+
+    /** Cursor color when typing in the input field. */
+    cursorColor?: string;
+
+    /** Color of the placeholder text. */
+    placeholderColor?: string;
+
+    /** Font size of the input text. */
+    inputFs?: number;
+
+    /** Font size of the label text. */
+    labelFs?: number;
+
+    /** Font size of the helper text. */
+    helperTextFS?: number;
+
+    /** Placeholder text displayed when input is empty. */
+    placeholder?: string;
+
+    /** If `true`, the input field is marked as an error (e.g., invalid input). */
+    isError?: boolean;
+
+    /** Helper text displayed below the input field (e.g., validation message). */
+    helperText?: string;
+
+    /** If `true`, the input field is disabled and cannot be interacted with. */
+    disabled?: boolean;
+
+    /** If `true`, the input field allows multiple lines of text. */
+    multiline?: boolean;
+
+    /** Renders a custom left icon inside the input field. */
+    renderLeftIcon?: JSX.Element;
+
+    /** Renders a custom right icon inside the input field. */
+    renderRightIcon?: JSX.Element;
+
+    /**
+     * Custom styles for different parts of the component.
+     * - `mainContainer`: Styles for the outermost wrapper.
+     * - `inputContainer`: Styles for the input field container.
+     * - `input`: Styles for the actual text input.
+     * - `label`: Styles for the label text.
+     * - `helperText`: Styles for the helper text.
+     */
+    styles?: {
+        mainContainer?: StyleProp<ViewStyle>;
+        inputContainer?: StyleProp<ViewStyle>;
+        input?: StyleProp<TextStyle>;
+        label?: StyleProp<TextStyle>;
+        helperText?: StyleProp<TextStyle>;
+    };
+};