@nexara/nativeflow 0.1.7 → 0.1.9

package/src/types/dialog.type.ts

@@ -1,89 +1,90 @@
-import type { ReactNode } from "react";
-import type { StyleProp, TextStyle, ViewStyle } from "react-native";
-import type { DialogVariant, TypographyVariant } from "./common.type";
-
-
-export type DialogRefProps = {
-    open: () => void;
-    close: () => void;
-}
-export type DialogProps = {
-    /** Defines the dialog style variant */
-    variant?: DialogVariant;
-
-    /** Defines the horizontal size of the dialog */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
-
-    /** If true, the dialog takes up the entire screen */
-    fullScreen?: boolean;
-
-    /** Background color of the backdrop */
-    backdropColor?: string;
-
-    /** Callback function triggered when the dialog is closed */
-    onClose?: () => void;
-
-    /** Custom styles for the dialog container */
-    containerStyle?: StyleProp<ViewStyle>;
-
-    /** Content to be displayed inside the dialog */
-    children?: ReactNode;
-};
-
-export type DialogBodyProps = {
-
-    /** Enables or disables scrolling within the dialog body */
-    scrollEnable?: boolean;
-
-    /** Custom styles for the dialog body container */
-    containerStyle?: StyleProp<ViewStyle>;
-
-    /** Content to be rendered inside the dialog body */
-    children?: ReactNode;
-};
-
-export type DialogDescriptionProps = {
-
-    /** Variant of the typography to be applied to the text */
-    textVariant?: TypographyVariant;
-
-    /** Font size for the dialog description text */
-    fs?: number;
-
-    /** Style for the container wrapping the dialog description */
-    containerStyle?: StyleProp<ViewStyle>;
-
-    /** Style for the text inside the dialog description */
-    textStyle?: StyleProp<TextStyle>;
-
-    /** Content to be rendered inside the dialog description */
-    children?: ReactNode;
-};
-
-export type DialogFootProps = {
-    /** Custom styles for the container wrapping the dialog footer */
-    containerStyle?: StyleProp<ViewStyle>;
-
-    /** Content to be rendered inside the dialog footer */
-    children?: ReactNode;
-};
-
-export type DialogHeadProps = {
-    /** Title text to be displayed in the dialog header */
-    title?: string;
-
-    /** Typography variant for styling the title text */
-    textVariant?: TypographyVariant;
-
-    /** Font size of the title text */
-    fs?: number;
-
-    /** Custom styles for the container wrapping the dialog header */
-    containerStyle?: StyleProp<ViewStyle>;
-
-    /** Custom styles for the title text */
-    textStyle?: StyleProp<TextStyle>;
-
-    /** Additional elements or components to be rendered inside the dialog header */
-    children?: React.ReactNode;
-};
+import type { ReactNode } from "react";
+import type { StyleProp, TextStyle, ViewStyle } from "react-native";
+import type { DialogVariant, TypographyScale } from "./common.type";
+import type { StyledTextProps, StyledViewProps } from "./styledComponents.type";
+
+
+export type DialogRefProps = {
+    open: () => void;
+    close: () => void;
+}
+export type DialogProps = {
+    /** Defines the dialog style variant */
+    variant?: DialogVariant;
+
+    /** Defines the horizontal size of the dialog */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+
+    /** If true, the dialog takes up the entire screen */
+    fullScreen?: boolean;
+
+    /** Background color of the backdrop */
+    backdropColor?: string;
+
+    /** Callback function triggered when the dialog is closed */
+    onClose?: () => void;
+
+    /** Custom styles for the dialog container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Content to be displayed inside the dialog */
+    children?: ReactNode;
+};
+
+export type DialogBodyProps = {
+
+    /** Enables or disables scrolling within the dialog body */
+    scrollEnable?: boolean;
+
+    /** Custom styles for the dialog body container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Content to be rendered inside the dialog body */
+    children?: ReactNode;
+};
+
+export type DialogDescriptionProps = StyledTextProps & {
+
+    /** Variant of the typography to be applied to the text */
+    fScale?: TypographyScale;
+
+    /** Style for the container wrapping the dialog description */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Style for the text inside the dialog description */
+    textStyle?: StyleProp<TextStyle>;
+
+    /** Content to be rendered inside the dialog description */
+    children?: ReactNode;
+};
+
+export type DialogFootProps = StyledViewProps & {
+    /** Custom styles for the container wrapping the dialog footer */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Content to be rendered inside the dialog footer */
+    children?: ReactNode;
+};
+
+export type DialogHeadProps = {
+    /** Title text to be displayed in the dialog header. If not provided, `children` will be rendered. */
+    title?: string;
+
+    /** Typography scale for the title text (e.g., xs, sm, md, lg, xl) */
+    fScale?: TypographyScale;
+
+    /** Font size of the title text (overrides fScale if provided) */
+    fs?: number;
+
+    /** Font family for the title text */
+    ff?: string;
+
+    /** Custom styles for the container wrapping the dialog header */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the title text */
+    titleStyle?: StyleProp<TextStyle>;
+
+    /** Additional elements or components to be rendered inside the dialog header */
+    children?: ReactNode;
+};

package/src/types/divider.type.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from "react-native";
+
+  /** Props for the Divider component */
+
+export type DividerProps = {
+    
+    /** Thickness of the divider line */
+    thickness?: number;
+
+    /** Custom styles to apply to the divider */
+    style?: StyleProp<ViewStyle>;
+
+    /** Color of the divider line; defaults to theme's subtle border color if not provided */
+    color?: string;
+}

package/src/types/grid.type.ts

@@ -1,70 +1,71 @@
-import type { StyleProp, ViewStyle } from "react-native";
-
-export type GridProps = ViewStyle & {
-    /**
-     * If true, the component will act as a grid container.
-     * Similar to CSS flex/grid container.
-     */
-    container?: boolean;
-
-    /**
-     * If true, the component will act as a grid item.
-     * Should be used inside a container.
-     */
-    item?: boolean;
-
-    /**
-     * Defines the spacing (margin) between grid items.
-     */
-    spacing?: number;
-
-    /**
-     * Defines the horizontal spacing (paddingLeft & paddingRight).
-     */
-    spacingH?: number;
-
-    /**
-     * Defines the vertical spacing (paddingTop & paddingBottom).
-     */
-    spacingV?: number;
-
-    /**
-     * Specifies the number of columns inside grid.
-     */
-    size?: number;
-
-    /** 
-        * Number of columns the grid item should take on extra-small screens (mobile phones). 
-    */
-    xs?: number;
-
-    /** 
-     * Number of columns the grid item should take on small screens (tablets). 
-     */
-    sm?: number;
-
-    /** 
-     * Number of columns the grid item should take on medium screens (small laptops). 
-     */
-    md?: number;
-
-    /** 
-     * Number of columns the grid item should take on large screens (desktops). 
-     */
-    lg?: number;
-
-    /** 
-     * Number of columns the grid item should take on extra-large screens (big monitors). 
-     */
-    xl?: number;
-
-    /**
-     * Custom styles for the grid container.
-     */
-    containerStyle?: StyleProp<ViewStyle>;
-
-    /**
-     * Children components inside the Grid.
-     */
-    children?: React.ReactNode;
-};
+import type { StyleProp, ViewStyle } from "react-native";
+import type { StyledViewProps } from "./styledComponents.type";
+
+export type GridProps = StyledViewProps & {
+    /**
+     * If true, the component will act as a grid container.
+     * Similar to CSS flex/grid container.
+     */
+    container?: boolean;
+
+    /**
+     * If true, the component will act as a grid item.
+     * Should be used inside a container.
+     */
+    item?: boolean;
+
+    /**
+     * Defines the spacing (margin) between grid items.
+     */
+    spacing?: number;
+
+    /**
+     * Defines the horizontal spacing (paddingLeft & paddingRight).
+     */
+    spacingH?: number;
+
+    /**
+     * Defines the vertical spacing (paddingTop & paddingBottom).
+     */
+    spacingV?: number;
+
+    /**
+     * Specifies the number of columns inside grid.
+     */
+    size?: number;
+
+    /** 
+        * Number of columns the grid item should take on extra-small screens (mobile phones). 
+    */
+    xs?: number;
+
+    /** 
+     * Number of columns the grid item should take on small screens (tablets). 
+     */
+    sm?: number;
+
+    /** 
+     * Number of columns the grid item should take on medium screens (small laptops). 
+     */
+    md?: number;
+
+    /** 
+     * Number of columns the grid item should take on large screens (desktops). 
+     */
+    lg?: number;
+
+    /** 
+     * Number of columns the grid item should take on extra-large screens (big monitors). 
+     */
+    xl?: number;
+
+    /**
+     * Custom styles for the grid container.
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Children components inside the Grid.
+     */
+    children?: React.ReactNode;
+};

package/src/types/index.ts

@@ -1,13 +1,17 @@
-export * from './common.type';
-export * from './button.type';
-export * from './checkbox.type';
-export * from './dialog.type';
-export * from './avatar.type';
-export * from './chip.type';
-export * from './grid.type';
-export * from './menu.type';
-export * from './stack.type';
-export * from './styledComponents.type';
-export * from './switch.type';
-export * from './userInput.type';
-export * from './progress.type'
+export * from './common.type';
+export * from './button.type';
+export * from './checkbox.type';
+export * from './dialog.type';
+export * from './avatar.type';
+export * from './chip.type';
+export * from './grid.type';
+export * from './menu.type';
+export * from './stack.type';
+export * from './styledComponents.type';
+export * from './switch.type';
+export * from './userInput.type';
+export * from './progress.type'
+export * from './surface.type'
+export * from './radio.type'
+export * from './divider.type'
+export * from './link.type'

package/src/types/link.type.ts

@@ -0,0 +1,15 @@
+import type { TextStyle } from "react-native";
+import type { StyledTextProps } from "./styledComponents.type";
+
+/** Props for the Link component */
+
+export type LinkProps = StyledTextProps & {
+    /** The visible text of the link */
+    title: string;
+
+    /** The URL to be opened when the link is pressed */
+    href: string;
+
+    /** Optional custom styles for the text */
+    style?: TextStyle;
+}

package/src/types/menu.type.ts

@@ -1,117 +1,101 @@
-import type { JSX, ReactNode } from "react";
-import type { StyleProp, TextStyle, TouchableOpacityProps, View, ViewStyle } from "react-native";
-import type { TypographyVariant } from "./common.type";
-import type { StyledTextProps } from "./styledComponents.type";
-
-
-export type MenuProps = {
-    /** 
-     * Defines the placement of the menu relative to the anchor element. 
-     * Options: 'top' | 'bottom'. 
-     */
-    placement?: 'top' | 'bottom';
-
-    /** 
-     * The element that triggers the menu when interacted with. 
-     */
-    anchor?: JSX.Element;
-
-    /** 
-     * Disables the built-in state management of the menu. 
-     * If true, you must control the open state manually. 
-     */
-    disableBuiltInState?: boolean;
-
-    /** 
-     * Controls whether the menu is open. 
-     * Used when `disableBuiltInState` is true. 
-     */
-    isOpen?: boolean;
-
-    /** 
-     * Callback triggered when the menu is requested to open. 
-     */
-    onRequestOpen?: () => void;
-
-    /** 
-     * Callback triggered when the menu is requested to close. 
-     */
-    onRequestClose?: () => void;
-
-    /** 
-     * Callback triggered when an item is selected. 
-     * Receives the name of the selected item. 
-     */
-    onSelect?: (name: string | undefined) => void;
-
-    /** 
-     * Custom styles for the menu container. 
-     */
-    style?: StyleProp<ViewStyle>;
-
-    /** 
-     * Child components to be rendered inside the menu. 
-     */
-    children?: ReactNode;
-
-    /**  
-     * A ref to access the underlying View component.  
-     * This can be used for measuring layout, animations, or imperative interactions.  
-     */
-    ref?: React.RefObject<View | null>
-};
-
-
-export type MenuItemProps = TouchableOpacityProps & {
-    /** 
-     * Vertical padding inside the menu item. 
-     */
-    paddingV?: number;
-
-    /** 
-     * Horizontal padding inside the menu item. 
-     */
-    paddingH?: number;
-
-    /** 
-     * Space between elements inside the menu item. 
-     */
-    gap?: number;
-
-    /** 
-     * The name or identifier of the menu item. 
-     */
-    name?: string;
-
-    /** 
-     * Custom styles for the menu item container. 
-     */
-    style?: StyleProp<ViewStyle>;
-
-    /** 
-     * Child components to be rendered inside the menu item. 
-     */
-    children?: ReactNode;
-};
-
-export type MenuItemLabelProps = StyledTextProps & {
-    /** 
-     * Font size of the label text. 
-     */
-    fs?: number;
-
-    /** 
-     * Typography variant for the label text. 
-     */
-    textVariant?: TypographyVariant;
-
-    /** 
-     * Custom styles for the text component. 
-     */
-    style?: StyleProp<TextStyle>;
-
-    /** 
-     * Text to be displayed inside the label. 
-     */
-    children?: ReactNode;
+import type { JSX, ReactNode } from "react";
+import type { StyleProp, TouchableOpacityProps, View, ViewStyle } from "react-native";
+import type { StyledTextProps } from "./styledComponents.type";
+
+
+export type MenuProps = {
+    /** 
+     * Defines the placement of the menu relative to the anchor element. 
+     * Options: 'top' | 'bottom'. 
+     */
+    placement?: 'top' | 'bottom';
+
+    /** 
+     * The element that triggers the menu when interacted with. 
+     */
+    anchor?: JSX.Element;
+
+    /** 
+     * Disables the built-in state management of the menu. 
+     * If true, you must control the open state manually. 
+     */
+    disableBuiltInState?: boolean;
+
+    /** 
+     * Controls whether the menu is open. 
+     * Used when `disableBuiltInState` is true. 
+     */
+    isOpen?: boolean;
+
+    /** 
+     * Callback triggered when the menu is requested to open. 
+     */
+    onRequestOpen?: () => void;
+
+    /** 
+     * Callback triggered when the menu is requested to close. 
+     */
+    onRequestClose?: () => void;
+
+    /** 
+     * Callback triggered when an item is selected. 
+     * Receives the name of the selected item. 
+     */
+    onSelect?: (name: string | undefined) => void;
+
+    /** 
+     * Custom styles for the menu container. 
+     */
+    style?: StyleProp<ViewStyle>;
+
+    /** 
+     * Child components to be rendered inside the menu. 
+     */
+    children?: ReactNode;
+
+    /**  
+     * A ref to access the underlying View component.  
+     * This can be used for measuring layout, animations, or imperative interactions.  
+     */
+    ref?: React.RefObject<View | null>
+};
+
+
+export type MenuItemProps = TouchableOpacityProps & {
+    /** 
+     * Vertical padding inside the menu item. 
+     */
+    paddingV?: number;
+
+    /** 
+     * Horizontal padding inside the menu item. 
+     */
+    paddingH?: number;
+
+    /** 
+     * Space between elements inside the menu item. 
+     */
+    gap?: number;
+
+    /** 
+     * The name or identifier of the menu item. 
+     */
+    name?: string;
+
+    /** 
+     * Custom styles for the menu item container. 
+     */
+    itemStyle?: StyleProp<ViewStyle>;
+
+    /** 
+     * Child components to be rendered inside the menu item. 
+     */
+    children?: ReactNode;
+};
+
+export type MenuItemLabelProps = StyledTextProps & {
+    /** 
+     * Text to be displayed inside the label. 
+     */
+    children?: ReactNode;
 };

package/src/types/progress.type.ts

@@ -1,16 +1,16 @@
-export type ProgressProps = {
-    /** Current progress value (0-100) */
-    value?: number;
-
-    /** Thickness of the progress bar */
-    thickness?: number;
-
-    /** Border radius of the progress bar */
-    br?: number;
-
-    /** Background color of the track (unfilled part) */
-    trackColor?: string;
-
-    /** Color of the progress (filled part) */
-    progressColor?: string;
+export type ProgressProps = {
+    /** Current progress value (0-100) */
+    value?: number;
+
+    /** Thickness of the progress bar */
+    thickness?: number;
+
+    /** Border radius of the progress bar */
+    br?: number;
+
+    /** Background color of the track (unfilled part) */
+    trackColor?: string;
+
+    /** Color of the progress (filled part) */
+    progressColor?: string;
 }