@nexara/nativeflow 0.1.7 → 0.1.9

package/src/index.ts

@@ -1,53 +1,52 @@
-export { default as NativeProvider } from './components/Provider/NativeProvider';
-export { horizontalScale, moderateScale, moderateVerticalScale, verticalScale, responsiveFontSize } from './helpers/ResponsiveCalculations';
-export { default as Header } from './components/Header/Header';
-export { default as Chip } from './components/Chip/Chip';
-export { default as Button } from './components/Button/Button';
-
-export { default as Stack } from './components/Stack';
-export { StyledText, StyledView } from './components/StyledComponents';
-export { default as UserInput } from './components/UserInput/UserInput';
-export { default as Grid } from './components/Grid/Grid';
-export { default as Progress } from './components/Progress/Progress';
-export { default as Slider } from './components/Slider/Slider';
-export { default as Surface } from './components/Surface/Surface';
-export { default as Switch } from './components/Switch/Switch';
-// export { default as TouchableRipple } from './components/TouchableRipple/TouchableRipple';
-export { Dialog, DialogHead, DialogBody, DialogFoot, DialogDescription } from './components/Dialog';
-export { default as CheckBox } from './components/CheckBox/CheckBox';
-export { default as Avatar } from './components/Avatar';
-export { default as Divider } from './components/Divider/Divider';
-export { Menu, MenuItem, MenuItemLabel } from './components/Menu';
-export { default as IconButton } from './components/IconButton/IconButton';
-export { default as Icon } from './components/Icon/Icon';
-export { default as PortalProvider } from './components/Portal/PortalProvider';
-export { default as Link } from './components/Link/Link';
-
-export { default as LightTheme } from './themes/LightTheme';
-export { default as DarkTheme } from './themes/DarkTheme';
-// export { default as createTheme } from './themes/createTheme';
-export { useColorScheme, useTheme } from './hooks';
-
-
-export type { HeaderProps } from './components/Header/Header';
-export type { ChipProps } from './components/Chip/Chip';
-export type { ButtonProps } from './components/Button/Button';
-export type { HStackProps } from './components/Stack';
-export type { VStackProps } from './components/Stack';
-export type { StyledTextProps, StyledViewProps } from './components/StyledComponents';
-export type { UserInputProps } from './components/UserInput/UserInput';
-export type { ProviderProps } from './components/Provider/NativeProvider';
-export type { GridProps } from './components/Grid/Grid';
-export type { ProgressProps } from './components/Progress/Progress';
-export type { SliderProps } from './components/Slider/Slider';
-export type { SurfaceProps } from './components/Surface/Surface';
-export type { SwitchProps } from './components/Switch/Switch';
-// export type { TouchableRippleProps } from './components/TouchableRipple/TouchableRipple';
-export type { DialogProps, DialogHeadProps, DialogBodyProps, DialogFootProps, DialogDescriptionProps } from './components/Dialog';
-export type { CheckBoxProps } from './components/CheckBox/CheckBox';
-export type { AvatarTextProps, AvatarImageProps } from './components/Avatar';
-export type { DividerProps } from './components/Divider/Divider';
-export type { MenuProps, MenuItemProps, MenuItemLabelProps } from './components/Menu';
-export type { IconButtonProps } from './components/IconButton/IconButton';
-export type { IconProps } from './components/Icon/Icon';
-// export type { PortalProviderProps } from './components/Portal/PortalProvider';
+export { default as NativeProvider } from './components/Provider/NativeProvider';
+export { horizontalScale, verticalScale, responsiveFontSize } from './helpers/ResponsiveCalculations';
+export { default as Chip } from './components/Chip/Chip';
+export { default as Radio } from './components/Radio';
+export { default as Button } from './components/Button/Button';
+
+export { default as Stack } from './components/Stack';
+export { StyledText, StyledView } from './components/StyledComponents';
+export { default as UserInput } from './components/UserInput/UserInput';
+export { default as Grid } from './components/Grid/Grid';
+export { default as Progress } from './components/Progress/Progress';
+// export { default as Slider } from './components/Slider/Slider';
+export { default as Surface } from './components/Surface/Surface';
+export { default as Switch } from './components/Switch/Switch';
+// export { default as TouchableRipple } from './components/TouchableRipple/TouchableRipple';
+export { Dialog, DialogHead, DialogBody, DialogFoot, DialogDescription } from './components/Dialog';
+export { default as CheckBox } from './components/CheckBox/CheckBox';
+export { default as Avatar } from './components/Avatar';
+export { default as Divider } from './components/Divider/Divider';
+export { Menu, MenuItem, MenuItemLabel } from './components/Menu';
+export { default as IconButton } from './components/IconButton/IconButton';
+export { default as Icon } from './components/Icon/Icon';
+export { default as PortalProvider } from './components/Portal/PortalProvider';
+export { default as Link } from './components/Link/Link';
+export { default as LightTheme } from './themes/LightTheme';
+export { default as DarkTheme } from './themes/DarkTheme';
+export { useColorScheme, useTheme } from './hooks';
+
+
+export type { ChipProps } from './components/Chip/Chip';
+export type { ButtonProps } from './components/Button/Button';
+export type { HStackProps } from './components/Stack';
+export type { VStackProps } from './components/Stack';
+export type { StyledTextProps, StyledViewProps } from './components/StyledComponents';
+export type { UserInputProps } from './components/UserInput/UserInput';
+export type { ProviderProps } from './components/Provider/NativeProvider';
+export type { GridProps } from './components/Grid/Grid';
+export type { ProgressProps } from './components/Progress/Progress';
+export type { SliderProps } from './components/Slider/Slider';
+export type { SurfaceProps } from './components/Surface/Surface';
+export type { SwitchProps } from './components/Switch/Switch';
+// export type { TouchableRippleProps } from './components/TouchableRipple/TouchableRipple';
+export type { DialogProps, DialogHeadProps, DialogBodyProps, DialogFootProps, DialogDescriptionProps } from './components/Dialog';
+export type { CheckBoxProps } from './components/CheckBox/CheckBox';
+export type { AvatarTextProps, AvatarImageProps } from './components/Avatar';
+export type { DividerProps } from './components/Divider/Divider';
+export type { MenuProps, MenuItemProps, MenuItemLabelProps } from './components/Menu';
+export type { IconButtonProps } from './components/IconButton/IconButton';
+export type { IconProps } from './components/Icon/Icon';
+export type { LinkProps } from './types/link.type';
+export type { RadioGroupProps, RadioItemProps } from './types/radio.type';
+// export type { PortalProviderProps } from './components/Portal/PortalProvider';

package/src/themes/DarkTheme.ts

@@ -1,39 +1,178 @@
-import { dialogSizes, typographySizes } from "../constants";
-import type { ThemeTypes } from "../types";
-
-
-const DarkTheme: ThemeTypes = {
-    isDark: true,
-    colors: {
-        primary: '#ffffff',
-        secondary: '#000000',
-        disable: 'rgba(180, 180, 180, 0.20)',
-        // outline: '#8080805e',
-        outline: '#9090905e',
-        textPrimary: '#ffffff',
-        textSecondary: '#000000',
-        // textTertiary: 'gray',
-        textTertiary: '#A0A0A0',
-        textDisable: '#808080',
-        cursorColor: '#ffffff',
-        placeholderColor: '#808080',
-
-
-        iconPrimary: '#E0E0E0',
-        iconSecondary: '#000000',
-        iconDisable: '#808080',
-
-        dividerColor: "#3A3A3A",
-        inputBgColor: 'transparent',
-        chipBgColor: 'transparent',
-
-        switchColor: '#ffffff',
-        error: '#ED2939'
-    },
-    typography: {
-        variantSizes: typographySizes
-    },
-    dialogSizes,
-}
-
-export default DarkTheme;
+import Color from "color";
+import { dialogSizes, typographySizes } from "../constants";
+import type { ThemeTypes } from "../types";
+
+const darkColorPalette = {
+    natural: {
+        0: "#000000",   // pure black
+        50: "#0D1117",  // GitHub-inspired dark background
+        100: "#161B22", // elevated surfaces
+        200: "#21262D", // card backgrounds
+        300: "#30363D", // borders and dividers
+        400: "#484F58", // muted elements
+        500: "#6E7681", // tertiary text
+        600: "#8B949E", // secondary text
+        700: "#C9D1D9", // primary text
+        800: "#F0F6FC", // high contrast text
+        900: "#FFFFFF", // pure white
+    }
+};
+
+// Option 1: Purple & Emerald (Elegant & Professional)
+const DarkTheme: ThemeTypes = {
+    isDark: true,
+    colors: {
+        palette: darkColorPalette,
+        brand: {
+            primary: "#8B5CF6",        // Rich violet - elegant and professional
+            onPrimary: "#FFFFFF",
+            secondary: "#10B981",      // Emerald green - fresh and modern  
+            onSecondary: "#FFFFFF",
+            tertiary: "#F59E0B",       // Amber - warm and inviting
+            onTertiary: "#000000",
+        },
+        semantic: {
+            success: "#34D399",        // Bright emerald success
+            onSuccess: "#000000",
+            warning: "#FBBF24",        // Warm amber warning
+            onWarning: "#000000",
+            danger: "#F87171",         // Soft red - less harsh than bright red
+            onDanger: "#000000",
+            info: "#60A5FA",           // Sky blue info
+            onInfo: "#000000",
+        },
+        background: {
+            default: "#0D1117",        // Deep professional background
+            surface: "#161B22",        // Card surfaces
+            elevated: "#21262D",       // Modal and elevated components
+            backdrop: "rgba(13,17,23,0.8)",
+        },
+        border: {
+            subtle: "#21262D",
+            default: "#30363D",
+            strong: "#484F58",
+            focus: "#8B5CF6",          // Primary violet focus
+        },
+        typography: {
+            primary: "#F0F6FC",        // Crisp white text
+            secondary: "#C9D1D9",      // Soft gray text
+            tertiary: "#8B949E",       // Muted text
+            disabled: "#484F58",
+            inverse: "#0D1117"
+        },
+        states: {
+            hover: "rgba(139, 92, 246, 0.1)",      // Subtle violet hover
+            pressed: "rgba(139, 92, 246, 0.2)",    // Stronger violet press
+            focus: '',
+            disabled: "rgba(72, 79, 88, 0.6)"
+        },
+        elevation: {
+            level0: "none",
+            level1: "0px 2px 4px rgba(0,0,0,0.55), 0px 1px 2px rgba(139,92,246,0.08)",
+            level2: "0px 4px 8px rgba(0,0,0,0.65), 0px 2px 4px rgba(139,92,246,0.07)",
+            level3: "0px 8px 16px rgba(0,0,0,0.75), 0px 4px 8px rgba(139,92,246,0.05)",
+            level4: "0px 16px 32px rgba(0,0,0,0.85), 0px 8px 16px rgba(139,92,246,0.03)",
+        }
+    },
+    sizes: {
+        typography: typographySizes,
+        dialog: dialogSizes
+    }
+};
+
+DarkTheme.colors.states.focus = Color(DarkTheme.colors.brand.primary)
+    .alpha(0.05)
+    .rgb()
+    .string();
+
+
+export default DarkTheme;
+// import Color from "color";
+// import { dialogSizes, typographySizes } from "../constants";
+// import type { ThemeTypes } from "../types";
+
+// const colorPalette = {
+//     natural: {
+//        0: "#FFFFFF",   // pure white
+//         50: "#F9FAFB",  // very light gray (default page background)
+//         100: "#F3F4F6", // light gray (elevated surfaces)
+//         200: "#E5E7EB", // subtle borders, dividers
+//         300: "#D1D5DB", // default borders, secondary text
+//         400: "#9CA3AF", // strong borders, muted text
+//         500: "#6B7280", // tertiary text
+//         600: "#4B5563", // secondary text
+//         700: "#374151", // primary text on light backgrounds
+//         800: "#1F2937", // strong primary text
+//         900: "#111827", // almost black
+//     }
+// }
+
+// const DarkTheme: ThemeTypes = {
+//     isDark: true,
+//     colors: {
+//         palette: colorPalette,
+//         brand: {
+//             primary: "#22D3EE",      // teal accent
+//             onPrimary: "#111827",
+//             secondary: "#818CF8",    // indigo
+//             onSecondary: "#111827",
+//             tertiary: "#F59E0B",     // amber
+//             onTertiary: "#111827",
+//         },
+//         semantic: {
+//             success: "#22C55E",
+//             onSuccess: "#111827",
+//             warning: "#FACC15",
+//             onWarning: "#111827",
+//             danger: "#EF4444",
+//             onDanger: "#FFFFFF",
+//             info: "#3B82F6",
+//             onInfo: "#FFFFFF",
+//         },
+//         background: {
+//             default: "#111827",  // app background
+//             surface: "#1F2937",  // cards, sections
+//             elevated: "#272B33", // menus, dialogs
+//             backdrop: "rgba(0,0,0,0.6)", // darker scrim
+//         },
+//         border: {
+//             subtle: "#272B33",
+//             default: "#374151",
+//             strong: "#4B5563",
+//             focus: "#22D3EE", // brand primary
+//         },
+//         typography: {
+//             primary: "#F9FAFB",   // main text
+//             secondary: "#D1D5DB", // muted text
+//             tertiary: "#9CA3AF",  // tertiary text
+//             disabled: "#808892",  // disabled gray
+//             inverse: "#111827",   // inverse on bright backgrounds
+//         },
+//         states: {
+//             hover: "rgba(255, 255, 255, 0.04)",
+//             pressed: "rgba(255, 255, 255, 0.08)",
+//             focus: "",
+//             active: "",
+//             disabled: "rgba(255, 255, 255, 0.3)"
+//         },
+//         elevation: {
+//             level0: "none",
+//             level1: "0px 1px 3px rgba(0,0,0,0.4), 0px 1px 1px rgba(0,0,0,0.24), 0px 2px 1px -1px rgba(0,0,0,0.2)",
+//             level2: "0px 2px 4px rgba(0,0,0,0.36), 0px 2px 3px rgba(0,0,0,0.32)",
+//             level4: "0px 4px 6px rgba(0,0,0,0.3), 0px 2px 4px rgba(0,0,0,0.28)",
+//             level8: "0px 8px 12px rgba(0,0,0,0.28), 0px 4px 8px rgba(0,0,0,0.24)",
+//             level12: "0px 12px 17px rgba(0,0,0,0.26), 0px 5px 12px rgba(0,0,0,0.22)",
+//             level16: "0px 16px 24px rgba(0,0,0,0.25), 0px 6px 16px rgba(0,0,0,0.2)",
+//             level24: "0px 24px 38px rgba(0,0,0,0.24), 0px 9px 46px rgba(0,0,0,0.18)",
+//         }
+//     },
+//     sizes: {
+//         typography: typographySizes,
+//         dialog: dialogSizes
+//     }
+// };
+
+// DarkTheme.colors.states.focus = Color(DarkTheme.colors.brand.primary).mix(Color("white"), 0.8).alpha(0.1).rgb().string();
+// DarkTheme.colors.states.active = Color(DarkTheme.colors.brand.primary).lighten(0).alpha(0.3).rgb().string();
+
+// export default DarkTheme;

package/src/themes/LightTheme.ts

@@ -1,96 +1,89 @@
-import { dialogSizes, typographySizes } from "../constants";
-import type { ThemeTypes } from "../types";
-
-// const base = Color(theme.colors.primary);
-
-// const createTheme = (theme: { primary: string; secondary: string }) => {
-//     return {
-//         isDark: false,
-//         colors: {
-//             ...theme,
-//             outline: '#8080805e',
-//             disable: Color(theme.primary).mix(Color("white"), 0.4).hex(),
-
-//             textPrimary: '#000000',
-//             textSecondary: '#ffffff',
-//             textTertiary: 'gray',
-//             textDisable: '#9E9E9E',
-//             cursorColor: '#000000',
-//             placeholderColor: '#808080',
-
-//             iconPrimary: '#000000',
-//             iconSecondary: '#E0E0E0',
-//             iconDisable: '#9E9E9E',
-
-//             dividerColor: "#DCDBDB",
-
-//             switchColor: '#353935',
-//             error: '#ED2939',
-//         },
-//         typography: {
-//             variantSizes: typographySizes
-//         },
-//         // screenBreakpoints: BreakPoints,
-//         dialogSizes
-//     }
-// }
-
-// const LightTheme = createTheme({
-//     primary: '#000000',
-//     secondary: '#ffffff',
-//     textPrimary: '#000000',
-
-//     textSecondary: '#ffffff',
-//     textTertiary: 'gray',
-//     textDisable: '#9E9E9E',
-//     cursorColor: '#000000',
-//     placeholderColor: '#808080',
-
-//     iconPrimary: '#000000',
-//     iconSecondary: '#E0E0E0',
-//     iconDisable: '#9E9E9E',
-
-//     dividerColor: "#DCDBDB",
-
-//     switchColor: '#353935',
-//     error: '#ED2939',
-// })
-// console.log(Color('rgba(0, 0, 0, 1)').alpha(0.12).rgb().string())
-const LightTheme: ThemeTypes = {
-    isDark: false,
-    colors: {
-        primary: '#000000',
-        secondary: '#ffffff',
-        // tertiary: '#8080805e',
-        // outline: '#8080805e',
-        outline: '#cbd5e1',
-        // disable: '#E0E0E0',
-        disable: 'rgba(100, 100, 100, 0.15)',
-
-        textPrimary: '#000000',
-        textSecondary: '#ffffff',
-        textTertiary: '#808080',
-        textDisable: '#9E9E9E',
-        cursorColor: '#000000',
-        // placeholderColor: '#808080',
-        placeholderColor: '#cbd5e1',
-
-        iconPrimary: '#000000',
-        iconSecondary: '#E0E0E0',
-        iconDisable: '#9E9E9E',
-
-        dividerColor: "#DCDBDB",
-
-        inputBgColor: '#f9fbfd',
-        chipBgColor: '#f9fbfd',
-
-        switchColor: '#353935',
-        error: '#ED2939',
-    },
-    typography: {
-        variantSizes: typographySizes
-    },
-    dialogSizes
-}
-
+import Color from "color";
+import { dialogSizes, typographySizes } from "../constants";
+import type { ThemeTypes } from "../types";
+
+const colorPalette = {
+    natural: {
+        0: "#FFFFFF",   // pure white
+        50: "#F9FAFB",  // very light gray (default page background)
+        100: "#F3F4F6", // light gray (elevated surfaces)
+        200: "#E5E7EB", // subtle borders, dividers
+        300: "#D1D5DB", // default borders, secondary text
+        400: "#9CA3AF", // strong borders, muted text
+        500: "#6B7280", // tertiary text
+        600: "#4B5563", // secondary text
+        700: "#374151", // primary text on light backgrounds
+        800: "#1F2937", // strong primary text
+        900: "#111827", // almost black
+    }
+}
+
+const LightTheme: ThemeTypes = {
+    isDark: false,
+    colors: {
+        palette: colorPalette,
+        brand: {
+            primary: "#034C53",
+            onPrimary: "#FFFFFF",
+            secondary: "#6366F1",
+            onSecondary: "#FFFFFF",
+            tertiary: "#F59E0B",
+            onTertiary: "#111827",
+        },
+        semantic: {
+            success: "#22C55E",
+            onSuccess: "#FFFFFF",
+            warning: "#FACC15",
+            onWarning: "#111827",
+            danger: "#EF4444",
+            onDanger: "#FFFFFF",
+            info: "#3B82F6",
+            onInfo: "#FFFFFF",
+        },
+        background: {
+            default: "#F9FAFB",
+            // default: "#FFFFFF",
+            surface: "#FFFFFF",
+            // elevated: "#F3F4F6",
+            // elevated: "#FAFAFA",
+            elevated: "#FFFFFF",
+            backdrop: "rgba(0,0,0,0.4)",
+        },
+        border: {
+            subtle: "#E5E7EB",
+            default: "#D1D5DB",
+            // default: colorPalette.natural[300],
+            strong: "#9CA3AF",
+            focus: "#F97316",
+        },
+        typography: {
+            primary: "#1A1A1A",
+            secondary: "#4D4D4D",
+            tertiary: "#808080",
+            // disabled: "#B3B3B3",
+            disabled: "#808080",
+            inverse: "#FFFFFF"
+        },
+        states: {
+            hover: "rgba(0, 0, 0, 0.04)",
+            pressed: "rgba(0, 0, 0, 0.08)",
+            focus: '',
+            // disabled: "rgba(0, 0, 0, 0.26)"
+            disabled: "rgb(184, 184, 184)"
+        },
+        elevation: {
+            level0: "none",
+            level1: "0px 1px 3px rgba(0,0,0,0.2), 0px 1px 1px rgba(0,0,0,0.14), 0px 2px 1px -1px rgba(0,0,0,0.12)",
+            level2: "0px 2px 4px rgba(0,0,0,0.12), 0px 2px 3px rgba(0,0,0,0.18)",
+            level3: "0px 4px 6px rgba(0,0,0,0.15), 0px 2px 4px rgba(0,0,0,0.12)",
+            level4: "0px 8px 12px rgba(0,0,0,0.16), 0px 4px 8px rgba(0,0,0,0.12)"
+        }
+    },
+    sizes: {
+        typography: typographySizes,
+        dialog: dialogSizes
+    }
+}
+LightTheme.colors.states.focus = Color(LightTheme.colors.brand.primary).mix(Color("white"), 0.8).alpha(0.3).rgb().string();
+
 export default LightTheme;

package/src/themes/index.ts

@@ -1,4 +1,3 @@
-export { default as LightTheme } from './LightTheme';
-export { default as DarkTheme } from './DarkTheme';
-// export { default as createTheme } from './createTheme';
-
+export { default as LightTheme } from './LightTheme';
+export { default as DarkTheme } from './DarkTheme';
+

package/src/types/avatar.type.ts

@@ -1,43 +1,40 @@
-import type { ImageProps, StyleProp, ViewStyle, ImageStyle, TextStyle } from "react-native";
-
-/** Props for the AvatarImage component */
-export type AvatarImageProps = {
-    /** Size of the avatar (width & height) */
-    size?: number;
-
-    /** Image source (can be a remote URI or a local asset reference) */
-    source?: { uri?: string } | number;
-
-    /** Background color of the avatar */
-    bg?: string;
-
-    /** Defines how the image should be resized to fit its container */
-    resizeMode?: NonNullable<ImageProps['resizeMode']>;
-
-    /** Custom styles for the avatar container */
-    containerStyle?: StyleProp<ViewStyle>;
-
-    /** Custom styles for the image inside the avatar */
-    imageStyle?: StyleProp<ImageStyle>;
-};
-
-/** Props for the AvatarText component */
-export type AvatarTextProps = {
-    /** Size of the avatar (width & height) */
-    size?: number;
-
-    /** Font size of the text inside the avatar */
-    fs?: number;
-
-    /** Text to be displayed inside the avatar (e.g., initials) */
-    text?: string;
-
-    /** Background color of the avatar */
-    bg?: string;
-
-    /** Custom styles for the avatar container */
-    containerStyle?: StyleProp<ViewStyle>;
-
-    /** Custom styles for the text inside the avatar */
-    textStyle?: StyleProp<TextStyle>;
-};
+import type { ImageProps, StyleProp, ViewStyle, ImageStyle, TextStyle } from "react-native";
+
+/** Props for the AvatarImage component */
+export type AvatarImageProps = {
+    /** Size of the avatar (width & height) */
+    size?: number;
+
+    /** Image source (can be a remote URI or a local asset reference) */
+    source?: { uri?: string } | number;
+
+    /** Defines how the image should be resized to fit its container */
+    resizeMode?: NonNullable<ImageProps['resizeMode']>;
+
+    /** Custom styles for the avatar container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the image inside the avatar */
+    imageStyle?: StyleProp<ImageStyle>;
+};
+
+/** Props for the AvatarText component */
+export type AvatarTextProps = {
+    /** Size of the avatar (width & height) */
+    size?: number;
+
+    /** Font size of the text inside the avatar */
+    fs?: number;
+
+    /** Text to be displayed inside the avatar (e.g., initials) */
+    text?: string;
+
+    /** Background color of the avatar */
+    bg?: string;
+
+    /** Custom styles for the avatar container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Custom styles for the text inside the avatar */
+    textStyle?: StyleProp<TextStyle>;
+};