@nexara/nativeflow 0.1.7 → 0.1.8

package/src/components/UserInput/UserInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo, useState } from 'react';
 import { TextInput, StyleSheet, type ViewStyle } from 'react-native';
 import type { TextStyle } from 'react-native';
 import { responsiveFontSize, verticalScale, horizontalScale } from '../../helpers/ResponsiveCalculations';
@@ -14,22 +14,22 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
     br = 10,
     stroke = 1,
     labelColor,
-    textVariant = {
-        label: 'h5',
-        inputText: 'h5',
-        helperText: 'h6',
+    textScale = {
+        label: 'sm',
+        inputText: 'sm',
+        helperText: 'xs',
     },
     inputTextColor,
     strokeColor,
     cursorColor,
     placeholderColor,
-    inputFs = 13,
+    inputFs,
     labelFs,
     helperTextFS,
     placeholder = 'Please enter...',
     disabled = false,
     isError = false,
-    helperText = '',
+    helperText,
     multiline = false,
     renderLeftIcon,
     renderRightIcon,
@@ -37,8 +37,9 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
     ...rest
 }, ref) => {
 
-    const theme: any = useTheme();
+    const [isFocused, setIsFocused] = useState(false);
 
+    const theme: any = useTheme();
     const STYLES = useMemo(Styles, []);
 
     const {
@@ -50,24 +51,24 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
     const dynamicStyles = {
         INPUT_CONT: {
             alignItems: multiline ? 'flex-start' : 'center' as ViewStyle['alignItems'],
-            backgroundColor: disabled ? theme.colors.disable : bg ?? theme.colors.inputBgColor,
-            borderColor: isError ? theme.colors.error : strokeColor ?? theme.colors.outline,
+            backgroundColor: disabled && theme.colors.states.disabled || isFocused && theme.colors.states.focus || (bg ?? theme.colors.background.default),
+            borderColor: isError && theme.colors.semantic.danger || isFocused && theme.colors.brand.primary || (strokeColor ?? theme.colors.border.default),
             borderWidth: variant === 'standard' ? 0 : stroke,
             borderBottomWidth: stroke,
             borderRadius: verticalScale(br),
-            height: multiline ? undefined : verticalScale(48),
+            height: multiline ? undefined : verticalScale(47),
             paddingVertical: multiline ? horizontalScale(10) : undefined,
         },
         INPUT: {
-            color: disabled ? theme.colors.textDisable : isError ? theme.colors.error : inputTextColor ?? theme.colors.textPrimary,
+            color: disabled ? theme.colors.typography.disabled : isError ? theme.colors.semantic.danger : inputTextColor ?? theme.colors.typography.primary,
             //@ts-ignore
-            fontSize: responsiveFontSize(theme.typography.variantSizes[textVariant.inputText] ?? inputFs),
+            fontSize: responsiveFontSize(inputFs ?? theme.sizes.typography[textScale.inputText]),
             textAlignVertical: (multiline ? 'top' : 'center') as TextStyle['textAlignVertical'],
             minHeight: multiline ? 100 : undefined,
             maxHeight: multiline ? 150 : undefined,
         },
         ERROR_HELPER_TEXT: {
-            color: theme.colors.error,
+            color: theme.colors.semantic.danger,
         }
     };
 
@@ -75,7 +76,7 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
         <StyledView gap={verticalScale(5)} style={styles?.mainContainer} w='100%'>
             {
                 label &&
-                <StyledText variant={textVariant?.label} fs={labelFs} color={computedLabelColor} style={styles?.label}>{label}</StyledText>
+                <StyledText fScale={textScale?.label} fs={labelFs} color={computedLabelColor} style={styles?.label}>{label}</StyledText>
             }
             <StyledView
                 style={[STYLES.INPUT_CONT, dynamicStyles.INPUT_CONT, styles?.inputContainer]}
@@ -91,6 +92,8 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
                     editable={!disabled}
                     multiline={multiline}
                     cursorColor={computedCursorColor}
+                    onFocus={() => setIsFocused(true)}
+                    onBlur={() => setIsFocused(false)}
                     {...rest}
                 />
                 {
@@ -100,7 +103,7 @@ const UserInput = forwardRef<TextInput, UserInputProps>(({
             {
                 (isError && helperText) &&
                 <StyledText
-                    variant={textVariant?.helperText}
+                    fScale={textScale?.helperText}
                     fs={helperTextFS}
                     style={[
                         STYLES.ERROR_HELPER_TEXT,

package/src/components/UserInput/generateColors.ts

@@ -2,9 +2,9 @@ import type { ThemeTypes } from "../../types";
 
 
 const generateColors = (theme: ThemeTypes, isError: boolean, cursorColor?: string, placeholderColor?: string, labelColor?: string) => {
-    const computedCursorColor = isError ? theme.colors.error : (cursorColor ?? theme.colors.cursorColor);
-    const computedPlaceholderColor = placeholderColor ?? theme.colors.placeholderColor;
-    const computedLabelColor = isError ? theme.colors.error : labelColor ?? theme.colors.textTertiary;
+    const computedCursorColor = isError ? theme.colors.semantic.danger : (cursorColor ?? theme.colors.brand.primary);
+    const computedPlaceholderColor = placeholderColor ?? theme.colors.typography.tertiary;
+    const computedLabelColor = isError ? theme.colors.semantic.danger : labelColor ?? theme.colors.typography.primary;
     return {
         computedCursorColor,
         computedPlaceholderColor,

package/src/constants/typographySizes.ts

@@ -1,21 +1,19 @@
 type typographySizeTypes = {
-    h1: number,
-    h2: number,
-    h3: number,
-    h4: number,
-    h6: number,
-    h5: number,
-    h7: number,
+    [key: string]: number
 }
 
-const typographySizes: typographySizeTypes = {
-    h1: 32,
-    h2: 24,
-    h3: 18,
-    h4: 16,
-    h5: 14,
-    h6: 12,
-    h7: 10,
+const typographySizes: Record<string, number> = {
+    xxs: 10,
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 24,
+    '2xl': 28,
+    '3xl': 32,
+    '4xl': 36,
+    '5xl': 45,
+    '6xl': 57,
 }
 
 export default typographySizes;

package/src/helpers/ResponsiveCalculations.ts

@@ -8,10 +8,7 @@ const {
     height: SCREEN_HEIGHT,
 } = Dimensions.get('window');
 
-// const GetScalingMode = () => getGlobalContext();
-// const scalingMode = useScalingMode();
-
-const isResponsive = true;
+// const isResponsive = true;
 const guidelineBaseWidth = 350;
 const guidelineBaseHeight = 680;
 const [shortDimension, longDimension] = SCREEN_WIDTH < SCREEN_HEIGHT ? [SCREEN_WIDTH, SCREEN_HEIGHT] : [SCREEN_HEIGHT, SCREEN_WIDTH];
@@ -20,10 +17,6 @@ type scalingCacheKey = 'hScale' | 'vScale' | 'fs';
 
 const scalingCache = new Map<scalingCacheKey, object>();
 
-// export const fun = () => {
-//     return scalingCache
-// }
-
 const checkIsPhone = (size: number): number => {
     if (SCREEN_WIDTH <= 430 && SCREEN_WIDTH >= 375) {
         return size;
@@ -41,7 +34,8 @@ const scale = (size: number, cacheKey: scalingCacheKey, mode: scalingModeTypes)
         return cacheScaleValue?.[size];
     }
     if (mode === 'partial') {
-        const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
+        // const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.40;
+        const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20;
         let scale = ((cacheKey === 'hScale' ? shortDimension : longDimension) / guidelineBaseHeight);
         scale = 1 + (scale - 1) * slowDownRate;
         let adjustedSize = size * Math.max(scale, 0.80);
@@ -52,35 +46,36 @@ const scale = (size: number, cacheKey: scalingCacheKey, mode: scalingModeTypes)
         finalSize = Math.round(PixelRatio.roundToNearestPixel(size * clampedScaleFactor))
     }
     cacheScaleValue[size] = finalSize;
+    cacheScaleValue[size] = finalSize;
     scalingCache.set(cacheKey, cacheScaleValue);
     return finalSize;
 }
 
 export const horizontalScale = (size: number): number => {
-    const scalingMode = getGlobalContext().scaling.mode
-    return scale(size, 'hScale', scalingMode);
+    const scalingMode = getGlobalContext().scaling.mode;
+    return scale(size, 'hScale', scalingMode ?? 0);
 }
 
 export const verticalScale = (size: number): number => {
-    const scalingMode = getGlobalContext().scaling.mode
-    return scale(size, 'vScale', scalingMode);
+    const scalingMode = getGlobalContext().scaling.mode;
+    return scale(size, 'vScale', scalingMode ?? 0);
 }
 
 
-export const moderateScale = (size: number, factor = 0.5): number => {
-    if (isResponsive) {
-        return size + ((shortDimension / guidelineBaseWidth * size) - size) * factor;
-    } else {
-        return size + factor + 1;
-    }
-}
-export const moderateVerticalScale = (size: number, factor = 0.5): number => {
-    if (isResponsive) {
-        return size + (longDimension / guidelineBaseHeight * size) * factor;
-    } else {
-        return size + factor + 5;
-    }
-}
+// export const moderateScale = (size: number, factor = 0.5): number => {
+//     if (isResponsive) {
+//         return size + ((shortDimension / guidelineBaseWidth * size) - size) * factor;
+//     } else {
+//         return size + factor + 1;
+//     }
+// }
+// export const moderateVerticalScale = (size: number, factor = 0.5): number => {
+//     if (isResponsive) {
+//         return size + (longDimension / guidelineBaseHeight * size) * factor;
+//     } else {
+//         return size + factor + 5;
+//     }
+// }
 
 export const responsiveFontSize = (fontSize: number): number => {
     if (checkIsPhone(fontSize)) {
@@ -90,7 +85,8 @@ export const responsiveFontSize = (fontSize: number): number => {
     if (fsCache?.[fontSize]) {
         return fsCache?.[fontSize];
     }
-    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20
+    // const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.20
+    const slowDownRate = SCREEN_WIDTH < 375 ? 2 : 0.15
     const screenDiagonal = Math.sqrt(SCREEN_WIDTH ** 2 + SCREEN_HEIGHT ** 2);
     const baseScreenDiagonal = Math.sqrt(360 ** 2 + 640 ** 2);
     let scale = screenDiagonal / baseScreenDiagonal;
@@ -98,7 +94,7 @@ export const responsiveFontSize = (fontSize: number): number => {
     let adjustedFontSize = fontSize * Math.max(scale, 0.85);
     const finalSize = Math.floor(PixelRatio.roundToNearestPixel(adjustedFontSize));
     fsCache[fontSize] = finalSize;
-    scalingCache.set('vScale', fsCache)
+    scalingCache.set('fs', fsCache)
     return finalSize;
 };
 

package/src/index.ts

@@ -1,7 +1,7 @@
 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 { 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';
@@ -9,7 +9,7 @@ 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 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';
@@ -22,14 +22,11 @@ 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';
@@ -50,4 +47,6 @@ 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 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: {
-        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'
+        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)",
+        }
     },
-    typography: {
-        variantSizes: typographySizes
-    },
-    dialogSizes,
-}
+    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;
+// export default DarkTheme;