@hoddy-ui/core 2.5.40 → 2.5.45

package/index.ts

@@ -3,7 +3,6 @@ import { initialize } from "./src/config";
 // Components
 export { default as AdaptiveStatusBar } from "./src/Components/AdaptiveStatusBar";
 export { default as AlertX } from "./src/Components/AlertX";
-export * from "./src/Components/Animators/Animator";
 export { default as Avatar } from "./src/Components/Avatar";
 export * from "./src/Components/Button";
 export { default as Button } from "./src/Components/Button";
@@ -25,9 +24,9 @@ export { default as Typography } from "./src/Components/Typography";
 
 // Animation hooks
 export * from "./src/Components/Animators/hooks";
+export * from "./src/Components/Animators/Animator";
 
 // Others
-// export * from "./src/config";
 export * from "./src/hooks";
 export * from "./src/theme";
 

package/next/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React, { ReactNode, FC } from 'react';
-import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, TextInput } from 'react-native';
+import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, ViewProps, ScrollView, View, TextInput } from 'react-native';
 
 type ThemeTypes = "dark" | "light";
 type ThemeModes = "dark" | "light" | "default";
@@ -231,6 +231,7 @@ interface TypographyProps extends TextProps {
     color?: colorTypes | (string & {});
     style?: StyleProp<TextStyle | ViewStyle>;
     textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
+    lineHeight?: number;
     variant?: "caption" | "body1" | "body2" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1";
     align?: "center" | "left" | "right";
     gutterBottom?: number;
@@ -240,9 +241,8 @@ interface TypographyProps extends TextProps {
     fontSize?: number;
     fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }
-interface SafeAreaViewProps {
+interface SafeAreaViewProps extends ViewProps {
     children: ReactNode;
-    style?: ViewStyle;
 }
 interface SelectMenuProps {
     open: boolean;
@@ -325,6 +325,7 @@ type AnimatorProps = (BaseAnimatorProps & {
     type: "thrownup";
 });
 
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "caption";
 /**
  * Configuration options for the Hoddy UI library
  *
@@ -344,6 +345,12 @@ type AnimatorProps = (BaseAnimatorProps & {
  *       500: "Inter-Medium",
  *       600: "Inter-SemiBold",
  *       700: "Inter-Bold"
+ *     },
+ *     fontSizes: {
+ *       h1: 48,
+ *       h2: 40,
+ *       body1: 16,
+ *       caption: 12
  *     }
  *   }
  * });
@@ -364,6 +371,10 @@ type configProps = {
         fontWeights?: {
             [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
         };
+        /** Custom font sizes for each typography variant (values in pixels, will be scaled with ms()) */
+        fontSizes?: {
+            [K in TypographyVariant]?: number;
+        };
     };
 };
 declare function initialize(config: configProps): void;
@@ -384,7 +395,7 @@ declare const CheckBox: FC<CheckboxProps>;
 
 declare const showFlashMessage: (msg: FlashMessageProps) => void;
 
-declare const FormWrapper: React.FC<FormWrapperProps>;
+declare const FormWrapper: React.ForwardRefExoticComponent<FormWrapperProps & React.RefAttributes<ScrollView>>;
 
 declare const RatingInput: FC<RatingInputProps>;
 declare const RatingStars: FC<RatingStarsProps>;
@@ -427,7 +438,7 @@ declare const Locator: React.FC<LocatorProps>;
 
 declare const Popup: React.FC<PopupProps>;
 
-declare const SafeAreaView: React.FC<SafeAreaViewProps>;
+declare const SafeAreaView: React.ForwardRefExoticComponent<SafeAreaViewProps & React.RefAttributes<View>>;
 
 declare const Divider: FC<DividerProps>;
 
@@ -702,8 +713,156 @@ declare const useNavScreenOptions: (type: "stack" | "tab" | "drawer") => any;
 declare const UIThemeContext: React.Context<ThemeContext>;
 declare const UIThemeProvider: ({ children }: ThemeProviderProps) => React.JSX.Element;
 
+declare const useAppState: () => {
+    isActive: boolean;
+};
+
+interface UseBlinkAnimationProps {
+    delay?: number;
+    blinkDuration?: number;
+    minOpacity?: number;
+    maxOpacity?: number;
+}
+declare const useBlinkAnimation: ({ delay, blinkDuration, minOpacity, maxOpacity, }?: UseBlinkAnimationProps) => {
+    animatedStyle: {
+        opacity: number;
+    };
+};
+
+interface UseFadeAnimationProps {
+    duration?: number;
+    delay?: number;
+    closeAfter?: number | null;
+}
+declare const useFadeAnimation: ({ duration, delay, closeAfter, }?: UseFadeAnimationProps) => {
+    animatedStyle: {
+        opacity: number;
+    };
+};
+
+interface UseFloatAnimationProps {
+    duration?: number;
+    delay?: number;
+    closeAfter?: number | null;
+    closeDuration?: number;
+    floatDistance?: number;
+    floatDuration?: number;
+}
+declare const useFloatAnimation: ({ duration, delay, closeAfter, closeDuration, floatDistance, floatDuration, }?: UseFloatAnimationProps) => {
+    animatedStyle: {
+        opacity: number;
+        transform: {
+            translateY: number;
+        }[];
+    };
+};
+
+interface UseGrowAnimationProps {
+    duration?: number;
+    delay?: number;
+    closeAfter?: number | null;
+    initialScale?: number;
+}
+declare const useGrowAnimation: ({ duration, delay, closeAfter, initialScale, }?: UseGrowAnimationProps) => {
+    animatedStyle: {
+        transform: {
+            scale: number;
+        }[];
+    };
+};
+
+interface UseRollAnimationProps {
+    duration?: number;
+    delay?: number;
+    closeAfter?: number | null;
+    initialTranslateY?: number;
+    initialRotate?: string;
+}
+declare const useRollAnimation: ({ duration, delay, closeAfter, initialTranslateY, initialRotate, }?: UseRollAnimationProps) => {
+    animatedStyle: {
+        transform: ({
+            translateY: number;
+            rotate?: undefined;
+        } | {
+            rotate: string;
+            translateY?: undefined;
+        })[];
+    };
+};
+
+interface UseSlideAnimationProps {
+    duration?: number;
+    delay?: number;
+    direction?: "up" | "down" | "left" | "right";
+    closeAfter?: number | null;
+    initialValue?: number;
+}
+declare const useSlideAnimation: ({ duration, delay, direction, closeAfter, initialValue, }?: UseSlideAnimationProps) => {
+    animatedStyle: {
+        transform: {
+            translateY: number;
+        }[];
+    } | {
+        transform: {
+            translateX: number;
+        }[];
+    };
+};
+
+interface UseThrownUpAnimationProps {
+    delay?: number;
+    closeAfter?: number | null;
+}
+declare const useThrownUpAnimation: ({ delay, closeAfter, }?: UseThrownUpAnimationProps) => {
+    animatedStyle: {
+        transform: {
+            translateY: number;
+        }[];
+        opacity: number;
+    };
+};
+
+/**
+ * Unified Animator component that handles multiple animation types with type-safe props.
+ *
+ * Each animation type only accepts its relevant props, ensuring type safety and better developer experience.
+ *
+ * @example
+ * // Fade animation - only accepts base props
+ * <Animator type="fade" duration={1000} closeAfter={3000}>
+ *   <Text>This will fade in and out</Text>
+ * </Animator>
+ *
+ * @example
+ * // Slide animation - only accepts direction and initialValue props
+ * <Animator type="slide" direction="up" duration={800} closeAfter={2000}>
+ *   <View>This will slide up from bottom</View>
+ * </Animator>
+ *
+ * @example
+ * // Grow animation - only accepts initialScale prop
+ * <Animator type="grow" initialScale={0.5} duration={600}>
+ *   <Button>This will grow from 50% scale</Button>
+ * </Animator>
+ *
+ * @example
+ * // Blink animation - only accepts blink-specific props
+ * <Animator type="blink" blinkDuration={1000} minOpacity={0.3}>
+ *   <Icon>This will blink continuously</Icon>
+ * </Animator>
+ *
+ * @example
+ * // TypeScript will show errors for invalid prop combinations:
+ * // ❌ This will cause a TypeScript error:
+ * // <Animator type="fade" direction="up"> // direction is not valid for fade
+ * //
+ * // ✅ This is correct:
+ * // <Animator type="slide" direction="up">
+ */
+declare const Animator: FC<AnimatorProps>;
+
 declare const HoddyUI: {
     initialize: typeof initialize;
 };
 
-export { AdaptiveStatusBar, AlertX, type AlertXProps, type AnimationType, type AnimatorProps, Avatar, type AvatarProps, Button, type ButtonProps, CheckBox, type CheckboxProps, Divider, type DividerProps, type FlashMessageProps, FormWrapper, type FormWrapperProps, Grid, GridItem, type GridItemProps, type GridProps, IconButton, type IconButtonProps, LinkButton, type LinkButtonProps, type ListItemProps, type ListItemTextProps, type ListProps, Locator, type LocatorInputProps, type LocatorProps, OTPInput, type OTPInputProps, Popup, type PopupProps, RatingInput, type RatingInputProps, RatingStars, type RatingStarsProps, SafeAreaView, type SafeAreaViewProps, SelectMenu, type SelectMenuProps, Spinner, type SpinnerProps, TextField, TextField2, type TextFieldProps, type ThemeActionTypes, type ThemeContext, type ThemeModes, type ThemeProviderProps, type ThemeState, type ThemeTypes, Typography, type TypographyProps, UIThemeContext, UIThemeProvider, type colorTypes, HoddyUI as default, type extraColorTypes, getLocationFromPlaceId, getPredictionsFromCoords, getPredictionsFromQuery, type locatorLocation, type predictionType, showFlashMessage, useColors, useNavScreenOptions, useTheme, useThemeContext };
+export { AdaptiveStatusBar, AlertX, type AlertXProps, type AnimationType, Animator, type AnimatorProps, Avatar, type AvatarProps, Button, type ButtonProps, CheckBox, type CheckboxProps, Divider, type DividerProps, type FlashMessageProps, FormWrapper, type FormWrapperProps, Grid, GridItem, type GridItemProps, type GridProps, IconButton, type IconButtonProps, LinkButton, type LinkButtonProps, type ListItemProps, type ListItemTextProps, type ListProps, Locator, type LocatorInputProps, type LocatorProps, OTPInput, type OTPInputProps, Popup, type PopupProps, RatingInput, type RatingInputProps, RatingStars, type RatingStarsProps, SafeAreaView, type SafeAreaViewProps, SelectMenu, type SelectMenuProps, Spinner, type SpinnerProps, TextField, TextField2, type TextFieldProps, type ThemeActionTypes, type ThemeContext, type ThemeModes, type ThemeProviderProps, type ThemeState, type ThemeTypes, Typography, type TypographyProps, UIThemeContext, UIThemeProvider, type colorTypes, HoddyUI as default, type extraColorTypes, getLocationFromPlaceId, getPredictionsFromCoords, getPredictionsFromQuery, type locatorLocation, type predictionType, showFlashMessage, useAppState, useBlinkAnimation, useColors, useFadeAnimation, useFloatAnimation, useGrowAnimation, useNavScreenOptions, useRollAnimation, useSlideAnimation, useTheme, useThemeContext, useThrownUpAnimation };

package/next/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, FC } from 'react';
-import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, TextInput } from 'react-native';
+import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, ViewProps, ScrollView, View, TextInput } from 'react-native';
 
 type ThemeTypes = "dark" | "light";
 type ThemeModes = "dark" | "light" | "default";
@@ -231,6 +231,7 @@ interface TypographyProps extends TextProps {
     color?: colorTypes | (string & {});
     style?: StyleProp<TextStyle | ViewStyle>;
     textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
+    lineHeight?: number;
     variant?: "caption" | "body1" | "body2" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1";
     align?: "center" | "left" | "right";
     gutterBottom?: number;
@@ -240,9 +241,8 @@ interface TypographyProps extends TextProps {
     fontSize?: number;
     fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }
-interface SafeAreaViewProps {
+interface SafeAreaViewProps extends ViewProps {
     children: ReactNode;
-    style?: ViewStyle;
 }
 interface SelectMenuProps {
     open: boolean;
@@ -325,6 +325,7 @@ type AnimatorProps = (BaseAnimatorProps & {
     type: "thrownup";
 });
 
+type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "caption";
 /**
  * Configuration options for the Hoddy UI library
  *
@@ -344,6 +345,12 @@ type AnimatorProps = (BaseAnimatorProps & {
  *       500: "Inter-Medium",
  *       600: "Inter-SemiBold",
  *       700: "Inter-Bold"
+ *     },
+ *     fontSizes: {
+ *       h1: 48,
+ *       h2: 40,
+ *       body1: 16,
+ *       caption: 12
  *     }
  *   }
  * });
@@ -364,6 +371,10 @@ type configProps = {
         fontWeights?: {
             [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
         };
+        /** Custom font sizes for each typography variant (values in pixels, will be scaled with ms()) */
+        fontSizes?: {
+            [K in TypographyVariant]?: number;
+        };
     };
 };
 declare function initialize(config: configProps): void;
@@ -384,7 +395,7 @@ declare const CheckBox: FC<CheckboxProps>;
 
 declare const showFlashMessage: (msg: FlashMessageProps) => void;
 
-declare const FormWrapper: React.FC<FormWrapperProps>;
+declare const FormWrapper: React.ForwardRefExoticComponent<FormWrapperProps & React.RefAttributes<ScrollView>>;
 
 declare const RatingInput: FC<RatingInputProps>;
 declare const RatingStars: FC<RatingStarsProps>;
@@ -427,7 +438,7 @@ declare const Locator: React.FC<LocatorProps>;
 
 declare const Popup: React.FC<PopupProps>;
 
-declare const SafeAreaView: React.FC<SafeAreaViewProps>;
+declare const SafeAreaView: React.ForwardRefExoticComponent<SafeAreaViewProps & React.RefAttributes<View>>;
 
 declare const Divider: FC<DividerProps>;
 
@@ -702,8 +713,156 @@ declare const useNavScreenOptions: (type: "stack" | "tab" | "drawer") => any;
 declare const UIThemeContext: React.Context<ThemeContext>;
 declare const UIThemeProvider: ({ children }: ThemeProviderProps) => React.JSX.Element;
 
+declare const useAppState: () => {
+    isActive: boolean;
+};
+
+interface UseBlinkAnimationProps {
+    delay?: number;
+    blinkDuration?: number;
+    minOpacity?: number;
+    maxOpacity?: number;
+}
+declare const useBlinkAnimation: ({ delay, blinkDuration, minOpacity, maxOpacity, }?: UseBlinkAnimationProps) => {
+    animatedStyle: {
+        opacity: number;
+    };
+};
+
+interface UseFadeAnimationProps {
+    duration?: number;
+    delay?: number;
+    closeAfter?: number | null;
+}
+declare const useFadeAnimation: ({ duration, delay, closeAfter, }?: UseFadeAnimationProps) => {
+    animatedStyle: {
+        opacity: number;
+    };
+};
+
+interface UseFloatAnimationProps {
+    duration?: number;
+    delay?: number;
+    closeAfter?: number | null;
+    closeDuration?: number;
+    floatDistance?: number;
+    floatDuration?: number;
+}
+declare const useFloatAnimation: ({ duration, delay, closeAfter, closeDuration, floatDistance, floatDuration, }?: UseFloatAnimationProps) => {
+    animatedStyle: {
+        opacity: number;
+        transform: {
+            translateY: number;
+        }[];
+    };
+};
+
+interface UseGrowAnimationProps {
+    duration?: number;
+    delay?: number;
+    closeAfter?: number | null;
+    initialScale?: number;
+}
+declare const useGrowAnimation: ({ duration, delay, closeAfter, initialScale, }?: UseGrowAnimationProps) => {
+    animatedStyle: {
+        transform: {
+            scale: number;
+        }[];
+    };
+};
+
+interface UseRollAnimationProps {
+    duration?: number;
+    delay?: number;
+    closeAfter?: number | null;
+    initialTranslateY?: number;
+    initialRotate?: string;
+}
+declare const useRollAnimation: ({ duration, delay, closeAfter, initialTranslateY, initialRotate, }?: UseRollAnimationProps) => {
+    animatedStyle: {
+        transform: ({
+            translateY: number;
+            rotate?: undefined;
+        } | {
+            rotate: string;
+            translateY?: undefined;
+        })[];
+    };
+};
+
+interface UseSlideAnimationProps {
+    duration?: number;
+    delay?: number;
+    direction?: "up" | "down" | "left" | "right";
+    closeAfter?: number | null;
+    initialValue?: number;
+}
+declare const useSlideAnimation: ({ duration, delay, direction, closeAfter, initialValue, }?: UseSlideAnimationProps) => {
+    animatedStyle: {
+        transform: {
+            translateY: number;
+        }[];
+    } | {
+        transform: {
+            translateX: number;
+        }[];
+    };
+};
+
+interface UseThrownUpAnimationProps {
+    delay?: number;
+    closeAfter?: number | null;
+}
+declare const useThrownUpAnimation: ({ delay, closeAfter, }?: UseThrownUpAnimationProps) => {
+    animatedStyle: {
+        transform: {
+            translateY: number;
+        }[];
+        opacity: number;
+    };
+};
+
+/**
+ * Unified Animator component that handles multiple animation types with type-safe props.
+ *
+ * Each animation type only accepts its relevant props, ensuring type safety and better developer experience.
+ *
+ * @example
+ * // Fade animation - only accepts base props
+ * <Animator type="fade" duration={1000} closeAfter={3000}>
+ *   <Text>This will fade in and out</Text>
+ * </Animator>
+ *
+ * @example
+ * // Slide animation - only accepts direction and initialValue props
+ * <Animator type="slide" direction="up" duration={800} closeAfter={2000}>
+ *   <View>This will slide up from bottom</View>
+ * </Animator>
+ *
+ * @example
+ * // Grow animation - only accepts initialScale prop
+ * <Animator type="grow" initialScale={0.5} duration={600}>
+ *   <Button>This will grow from 50% scale</Button>
+ * </Animator>
+ *
+ * @example
+ * // Blink animation - only accepts blink-specific props
+ * <Animator type="blink" blinkDuration={1000} minOpacity={0.3}>
+ *   <Icon>This will blink continuously</Icon>
+ * </Animator>
+ *
+ * @example
+ * // TypeScript will show errors for invalid prop combinations:
+ * // ❌ This will cause a TypeScript error:
+ * // <Animator type="fade" direction="up"> // direction is not valid for fade
+ * //
+ * // ✅ This is correct:
+ * // <Animator type="slide" direction="up">
+ */
+declare const Animator: FC<AnimatorProps>;
+
 declare const HoddyUI: {
     initialize: typeof initialize;
 };
 
-export { AdaptiveStatusBar, AlertX, type AlertXProps, type AnimationType, type AnimatorProps, Avatar, type AvatarProps, Button, type ButtonProps, CheckBox, type CheckboxProps, Divider, type DividerProps, type FlashMessageProps, FormWrapper, type FormWrapperProps, Grid, GridItem, type GridItemProps, type GridProps, IconButton, type IconButtonProps, LinkButton, type LinkButtonProps, type ListItemProps, type ListItemTextProps, type ListProps, Locator, type LocatorInputProps, type LocatorProps, OTPInput, type OTPInputProps, Popup, type PopupProps, RatingInput, type RatingInputProps, RatingStars, type RatingStarsProps, SafeAreaView, type SafeAreaViewProps, SelectMenu, type SelectMenuProps, Spinner, type SpinnerProps, TextField, TextField2, type TextFieldProps, type ThemeActionTypes, type ThemeContext, type ThemeModes, type ThemeProviderProps, type ThemeState, type ThemeTypes, Typography, type TypographyProps, UIThemeContext, UIThemeProvider, type colorTypes, HoddyUI as default, type extraColorTypes, getLocationFromPlaceId, getPredictionsFromCoords, getPredictionsFromQuery, type locatorLocation, type predictionType, showFlashMessage, useColors, useNavScreenOptions, useTheme, useThemeContext };
+export { AdaptiveStatusBar, AlertX, type AlertXProps, type AnimationType, Animator, type AnimatorProps, Avatar, type AvatarProps, Button, type ButtonProps, CheckBox, type CheckboxProps, Divider, type DividerProps, type FlashMessageProps, FormWrapper, type FormWrapperProps, Grid, GridItem, type GridItemProps, type GridProps, IconButton, type IconButtonProps, LinkButton, type LinkButtonProps, type ListItemProps, type ListItemTextProps, type ListProps, Locator, type LocatorInputProps, type LocatorProps, OTPInput, type OTPInputProps, Popup, type PopupProps, RatingInput, type RatingInputProps, RatingStars, type RatingStarsProps, SafeAreaView, type SafeAreaViewProps, SelectMenu, type SelectMenuProps, Spinner, type SpinnerProps, TextField, TextField2, type TextFieldProps, type ThemeActionTypes, type ThemeContext, type ThemeModes, type ThemeProviderProps, type ThemeState, type ThemeTypes, Typography, type TypographyProps, UIThemeContext, UIThemeProvider, type colorTypes, HoddyUI as default, type extraColorTypes, getLocationFromPlaceId, getPredictionsFromCoords, getPredictionsFromQuery, type locatorLocation, type predictionType, showFlashMessage, useAppState, useBlinkAnimation, useColors, useFadeAnimation, useFloatAnimation, useGrowAnimation, useNavScreenOptions, useRollAnimation, useSlideAnimation, useTheme, useThemeContext, useThrownUpAnimation };