@hoddy-ui/core 1.1.4 → 2.0.35

package/README.md

@@ -27,15 +27,17 @@ yarn add @hoddy-ui/core
 Install the required peer dependencies:
 
 ```bash
-npm install @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters
+npm install @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters react-native-reanimated
 ```
 
 Or with yarn:
 
 ```bash
-yarn add @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters
+yarn add @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters react-native-reanimated
 ```
 
+**Important**: Make sure to follow the [react-native-reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/3.x/fundamentals/getting-started) for platform-specific setup as it requires additional configuration for iOS and Android.
+
 ## 🚀 Quick Start
 
 ### Basic Setup
@@ -46,9 +48,6 @@ yarn add @expo/vector-icons @react-native-async-storage/async-storage @react-nav
 import { initialize } from "@hoddy-ui/core";
 
 initialize({
-  // Custom font family
-  fontFamily: "Inter-Regular",
-
   // Google Maps API key for Locator component
   googleMapApiKey: "your-google-maps-api-key",
 
@@ -63,6 +62,17 @@ initialize({
       dark: "#4f46e5",
     },
   },
+
+  // Typography settings
+  typography: {
+    fontFamily: "Inter-Regular",
+    fontWeights: {
+      400: "Inter-Regular",
+      500: "Inter-Medium",
+      600: "Inter-SemiBold",
+      700: "Inter-Bold",
+    },
+  },
 });
 ```
 
@@ -139,24 +149,64 @@ Use the `initialize` function to configure the library globally:
 import { initialize } from "@hoddy-ui/core";
 
 initialize({
-  // Font family for all typography components
-  fontFamily?: string;
-
-  // Google Maps API key for Locator component
+  // Google Maps API key for map components
   googleMapApiKey?: string;
 
-  // Edge-to-edge display (skips Android navigation bar styling)
-  edgeToEdge?: boolean;
-
-  // Custom color overrides
+  // Custom color palette overrides
   colors?: {
     primary?: { main: string; light?: string; dark?: string };
     secondary?: { main: string; light?: string; dark?: string };
-    // ... and more
+    // ... and more color options
+  };
+
+  // Enable edge-to-edge display mode
+  edgeToEdge?: boolean;
+
+  // Typography settings
+  typography?: {
+    // Primary font family
+    fontFamily?: string;
+
+    // Font family mappings for each weight (Android support)
+    fontWeights?: {
+      100?: string;
+      200?: string;
+      300?: string;
+      400?: string;
+      500?: string;
+      600?: string;
+      700?: string;
+      800?: string;
+      900?: string;
+    };
   };
 });
 ```
 
+### Configuration Example
+
+```tsx
+initialize({
+  googleMapApiKey: "AIzaSyBxxxxxxxxxxxxxxxxxxxxxx",
+  edgeToEdge: true,
+  colors: {
+    primary: "#007AFF",
+    secondary: "#34C759",
+  },
+  typography: {
+    fontFamily: "Inter",
+    fontWeights: {
+      400: "Inter-Regular",
+      500: "Inter-Medium",
+      600: "Inter-SemiBold",
+      700: "Inter-Bold",
+    },
+  },
+});
+```
+
+**Note:** The `fontWeights` property is particularly useful for Android devices where different font weights require separate font family files. This allows you to map each weight (100-900) to its corresponding font family name.
+
 ### Theme Configuration
 
 The theme system automatically detects system preferences and can be controlled programmatically:
@@ -257,6 +307,7 @@ const colors = {
 
 - **`TextField`** - Material Design text input with variants
 - **`TextField2`** - Alternative text field design
+- **`OTPInput`** - One-Time Password input with auto-advance and paste support
 - **`Locator`** - Location picker with Google Maps integration
 
 ### Interactive Elements
@@ -433,6 +484,57 @@ A Material Design text input component with comprehensive features.
 />
 ```
 
+### OTPInput
+
+A specialized input component for One-Time Password entry with auto-advance, paste support, and backspace handling.
+
+**Props:**
+
+| Prop       | Type                                  | Default      | Description                      |
+| ---------- | ------------------------------------- | ------------ | -------------------------------- |
+| `length`   | `number`                              | `6`          | Number of OTP digits             |
+| `onChange` | `(value: string) => void`             | -            | Change handler for OTP value     |
+| `value`    | `string`                              | `""`         | Current OTP value                |
+| `variant`  | `"outlined" \| "text" \| "contained"` | `"outlined"` | Input variant style              |
+| `spacing`  | `number`                              | `1`          | Spacing between input boxes      |
+| `size`     | `number`                              | `45`         | Size of each input box in pixels |
+
+**Features:**
+
+- **Auto-advance**: Automatically moves to next input after digit entry
+- **Paste support**: Handles pasting of complete OTP codes
+- **Backspace handling**: Moves to previous input on backspace
+- **Number-only input**: Automatically filters non-numeric characters
+- **Customizable styling**: Supports different variants and sizes
+
+**Example:**
+
+```tsx
+const [otp, setOtp] = useState('');
+
+<OTPInput
+  length={6}
+  value={otp}
+  onChange={setOtp}
+  variant="outlined"
+  size={50}
+  spacing={2}
+/>
+
+// Usage with form validation
+<OTPInput
+  length={4}
+  value={otp}
+  onChange={(value) => {
+    setOtp(value);
+    if (value.length === 4) {
+      verifyOTP(value);
+    }
+  }}
+  variant="contained"
+/>
+```
+
 ### Locator
 
 A location picker component with Google Maps integration.
@@ -674,6 +776,8 @@ A modal component for overlays, dialogs, and bottom sheets.
 | `sheet`                  | `boolean \| number` | `false` | Bottom sheet mode/height  |
 | `bare`                   | `boolean`           | `false` | Hide header and padding   |
 | `keyboardVerticalOffset` | `number`            | -       | Keyboard avoidance offset |
+| `onModalShow`            | `() => void`        | -       | Callback when modal shows |
+| `onModalHide`            | `() => void`        | -       | Callback when modal hides |
 | `style`                  | `ViewStyle`         | `{}`    | Container style overrides |
 
 **Example:**
@@ -684,6 +788,8 @@ A modal component for overlays, dialogs, and bottom sheets.
   onClose={() => setIsOpen(false)}
   title="Confirm Action"
   sheet={400}
+  onModalShow={() => console.log("Modal is now visible")}
+  onModalHide={() => console.log("Modal is now hidden")}
 >
   <Typography>Are you sure you want to delete this item?</Typography>
   <Button title="Delete" color="error" />
@@ -713,7 +819,7 @@ A loading indicator component with customizable appearance.
 
 ### Animator
 
-A unified component that provides a single interface for all animation types with generic props.
+A unified component that provides a single interface for all animation types with generic props. Built with **react-native-reanimated** for optimal performance and smooth animations.
 
 **Features:**
 
@@ -721,7 +827,12 @@ A unified component that provides a single interface for all animation types wit
 - **Generic Props**: Consistent prop naming across all animations (e.g., `closeAfter` instead of animation-specific names)
 - **Modular Hooks**: Animation logic is separated into individual custom hooks
 - **Type Safety**: Full TypeScript support with proper typing
-- **Performance**: Only the specified animation runs, others are not loaded
+- **Performance**: Built with react-native-reanimated for native performance
+- **Smooth Animations**: Runs on the UI thread for 60fps animations
+
+**Requirements:**
+
+Requires `react-native-reanimated` as peer dependencies. Make sure to follow the [react-native-reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/3.x/fundamentals/getting-started) for platform-specific setup.
 
 **Generic Props:**
 
@@ -804,20 +915,23 @@ All animation types support these generic props:
 
 **Available Animation Types:**
 
-1. **fade**: Simple fade in/out
-2. **grow**: Scale-based growth animation
-3. **slide**: Directional slide animations
-4. **blink**: Continuous opacity blinking
-5. **float**: Floating up/down motion with fade
-6. **roll**: Combined rotation and translation
-7. **thrownup**: Spring-based upward animation
+1. **fade**: Simple fade in/out using opacity (native performance)
+2. **grow**: Scale-based growth animation with easing
+3. **slide**: Directional slide animations from screen edges
+4. **blink**: Continuous opacity blinking with repeat
+5. **float**: Floating up/down motion with fade effects
+6. **roll**: Combined rotation and translation effects
+7. **thrownup**: Spring-based upward animation with physics
+
+All animations run on the UI thread for optimal performance and smooth 60fps animations.
 
 **Using Animation Hooks Directly:**
 
-You can also use the animation hooks directly for custom implementations:
+You can also use the animation hooks directly for custom implementations with react-native-reanimated:
 
 ```tsx
 import { useFadeAnimation, useSlideAnimation } from "@hoddy-ui/core";
+import Animated from "react-native-reanimated";
 
 const MyComponent = () => {
   const { animatedStyle } = useFadeAnimation({
@@ -833,7 +947,17 @@ const MyComponent = () => {
 };
 ```
 
-**Migration from Old Components:**
+**Performance Benefits:**
+
+With react-native-reanimated, all animations:
+
+- **Run on the UI thread** for better performance
+- **Maintain 60fps** even during JavaScript thread blocking
+- **Use native drivers** automatically
+- **Support worklets** for complex animation logic
+- **Provide smooth gestures** and interactions
+
+**Migration from Legacy API:**
 
 Replace old individual animation components:
 
@@ -933,12 +1057,13 @@ function MyScreen() {
 
 ### Animation Hooks
 
-Access animation logic directly for custom implementations:
+Access animation logic directly for custom implementations using react-native-reanimated:
 
 #### useFadeAnimation
 
 ```tsx
 import { useFadeAnimation } from "@hoddy-ui/core";
+import Animated from "react-native-reanimated";
 
 function FadeComponent() {
   const { animatedStyle } = useFadeAnimation({
@@ -958,6 +1083,7 @@ function FadeComponent() {
 
 ```tsx
 import { useSlideAnimation } from "@hoddy-ui/core";
+import Animated from "react-native-reanimated";
 
 function SlideComponent() {
   const { animatedStyle } = useSlideAnimation({
@@ -978,6 +1104,7 @@ function SlideComponent() {
 
 ```tsx
 import { useGrowAnimation } from "@hoddy-ui/core";
+import Animated from "react-native-reanimated";
 
 function GrowComponent() {
   const { animatedStyle } = useGrowAnimation({
@@ -1000,7 +1127,7 @@ function GrowComponent() {
 - `useRollAnimation` - For rotation and translation effects
 - `useThrownUpAnimation` - For spring-based upward animations
 
-All animation hooks accept similar configuration objects with properties like `duration`, `delay`, and animation-specific options.
+All animation hooks accept similar configuration objects with properties like `duration`, `delay`, and animation-specific options. They return `animatedStyle` objects that work with `Animated.View` from react-native-reanimated for optimal performance.
 
 ## 🎯 Advanced Usage
 
@@ -1110,4 +1237,4 @@ MIT © [Hoddy Inc](https://github.com/kinghoddy)
 
 ---
 
-**Need help?** [Open an issue](https://github.com/kinghoddy/hoddy-ui/issues) or check out our [examples](../../test/hoddyui).
+**Need help?** [Open an issue](https://github.com/kinghoddy/hoddy-ui/issues) or check out our [examples](../../test/my-app).

package/next/dist/index.d.mts

@@ -1,6 +1,5 @@
 import React, { ReactNode, FC } from 'react';
-import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, TextInput } from 'react-native';
-import * as index from 'index';
+import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, TextInput } from 'react-native';
 
 type ThemeTypes = "dark" | "light";
 type ThemeModes = "dark" | "light" | "default";
@@ -35,7 +34,7 @@ interface ThemeState {
 }
 interface ThemeContext {
     themeState: ThemeState;
-    themeDispatch?: any;
+    themeDispatch?: (action: ThemeActionTypes) => void;
 }
 interface ThemeProviderProps {
     children: ReactNode;
@@ -56,14 +55,6 @@ interface AvatarProps {
     size?: number;
     style?: ViewStyle;
 }
-interface AnimatorProps {
-    style?: ViewStyle;
-    duration?: number;
-    children: ReactNode;
-    delay?: number;
-    animationType?: "easeInEaseOut" | "linear" | "spring";
-    type?: "fade" | "slideInLeft" | "slideInRight" | "slideInUp" | "slideInDown";
-}
 interface ButtonProps {
     color?: colorTypes;
     variant?: "text" | "outlined" | "contained";
@@ -104,7 +95,7 @@ interface LinkButtonProps {
     style?: TextStyle & ViewStyle;
     color?: colorTypes;
     fontSize?: number;
-    fontWeight?: string;
+    fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
     disabled?: boolean;
     onPress?: () => void;
 }
@@ -197,6 +188,9 @@ interface PopupProps {
     open: boolean;
     onClose?: () => void;
     style?: ViewStyle;
+    disableAutoKeyboardManagement?: boolean;
+    onModalShow?: () => void;
+    onModalHide?: () => void;
 }
 interface SpinnerProps {
     label?: string;
@@ -207,6 +201,7 @@ interface SpinnerProps {
 }
 interface TextFieldProps extends TextInputProps {
     label?: string;
+    labelProps?: TypographyProps;
     variant?: "outlined" | "text" | "contained";
     color?: colorTypes;
     size?: "small" | "normal" | "large";
@@ -229,11 +224,12 @@ interface TextFieldProps extends TextInputProps {
     }[];
     onFocus?: () => void;
     onBlur?: () => void;
+    selectMenuProps?: Partial<SelectMenuProps>;
 }
 interface TypographyProps extends TextProps {
     children: ReactNode;
     color?: colorTypes | (string & {});
-    style?: TextStyle | ViewStyle;
+    style?: StyleProp<TextStyle | ViewStyle>;
     textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
     variant?: "caption" | "body1" | "body2" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1";
     align?: "center" | "left" | "right";
@@ -241,6 +237,7 @@ interface TypographyProps extends TextProps {
     numberOfLines?: number;
     adjustsFontSizeToFit?: boolean;
     fontFamily?: string;
+    fontSize?: number;
     fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 }
 interface SafeAreaViewProps {
@@ -261,6 +258,8 @@ interface SelectMenuProps {
     label?: string;
     secondary?: string;
     helperText?: string;
+    searchEnabled?: boolean;
+    searchPlaceholder?: string;
 }
 interface OTPInputProps {
     length?: number;
@@ -289,12 +288,81 @@ interface DividerProps {
     style?: ViewStyle;
     height?: number;
 }
+type AnimationType = "fade" | "grow" | "slide" | "blink" | "float" | "roll" | "thrownup";
+interface BaseAnimatorProps {
+    children: ReactNode;
+    duration?: number;
+    delay?: number;
+    closeAfter?: number | null;
+    style?: ViewStyle;
+}
+type AnimatorProps = (BaseAnimatorProps & {
+    type: "fade";
+}) | (BaseAnimatorProps & {
+    type: "grow";
+    initialScale?: number;
+}) | (BaseAnimatorProps & {
+    type: "slide";
+    direction?: "up" | "down" | "left" | "right";
+    initialValue?: number;
+}) | (BaseAnimatorProps & {
+    type: "blink";
+    blinkDuration?: number;
+    minOpacity?: number;
+    maxOpacity?: number;
+}) | (BaseAnimatorProps & {
+    type: "float";
+    closeDuration?: number;
+    floatDistance?: number;
+    floatDuration?: number;
+}) | (BaseAnimatorProps & {
+    type: "roll";
+    initialTranslateY?: number;
+    initialRotate?: string;
+}) | (BaseAnimatorProps & {
+    type: "thrownup";
+});
 
+/**
+ * Configuration options for the Hoddy UI library
+ *
+ * @example
+ * ```typescript
+ * initialize({
+ *   googleMapApiKey: "AIzaSyBxxxxxxxxxxxxxxxxxxxxxx",
+ *   edgeToEdge: true,
+ *   colors: {
+ *     primary: "#007AFF",
+ *     secondary: "#34C759"
+ *   },
+ *   typography: {
+ *     fontFamily: "Inter",
+ *     fontWeights: {
+ *       400: "Inter-Regular",
+ *       500: "Inter-Medium",
+ *       600: "Inter-SemiBold",
+ *       700: "Inter-Bold"
+ *     }
+ *   }
+ * });
+ * ```
+ */
 type configProps = {
+    /** Google Maps API key for map components */
     googleMapApiKey?: string;
+    /** Custom color palette overrides */
     colors?: extraColorTypes;
-    fontFamily?: string;
+    /** Enable edge-to-edge display mode */
     edgeToEdge?: boolean;
+    /** Typography settings */
+    typography?: {
+        /** Primary font family */
+        fontFamily?: string;
+        /** Font family mappings for each weight (Android support) */
+        fontWeights?: {
+            [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
+        };
+    };
 };
 declare function initialize(config: configProps): void;
 
@@ -312,7 +380,7 @@ declare const Button: React.FC<ButtonProps>;
 
 declare const CheckBox: FC<CheckboxProps>;
 
-declare let showFlashMessage: (msg: FlashMessageProps) => void;
+declare const showFlashMessage: (msg: FlashMessageProps) => void;
 
 declare const FormWrapper: React.FC<FormWrapperProps>;
 
@@ -371,10 +439,10 @@ declare const OTPInput: FC<OTPInputProps>;
 
 declare const useColors: () => {
     white: {
-        main?: string | undefined;
-        light?: string | undefined;
-        dark?: string | undefined;
-        text?: string | undefined;
+        main?: string;
+        light?: string;
+        dark?: string;
+        text?: string;
         1: string;
         2: string;
         3: string;
@@ -382,10 +450,10 @@ declare const useColors: () => {
         5: string;
     };
     black: {
-        main?: string | undefined;
-        light?: string | undefined;
-        dark?: string | undefined;
-        text?: string | undefined;
+        main?: string;
+        light?: string;
+        dark?: string;
+        text?: string;
         1: string;
         2: string;
         3: string;
@@ -454,10 +522,10 @@ declare const useColors: () => {
     };
 } | {
     white: {
-        main?: string | undefined;
-        light?: string | undefined;
-        dark?: string | undefined;
-        text?: string | undefined;
+        main?: string;
+        light?: string;
+        dark?: string;
+        text?: string;
         1: string;
         2: string;
         3: string;
@@ -465,10 +533,10 @@ declare const useColors: () => {
         5: string;
     };
     black: {
-        main?: string | undefined;
-        light?: string | undefined;
-        dark?: string | undefined;
-        text?: string | undefined;
+        main?: string;
+        light?: string;
+        dark?: string;
+        text?: string;
         1: string;
         2: string;
         3: string;
@@ -537,10 +605,10 @@ declare const useColors: () => {
     };
 } | {
     white: {
-        main?: string | undefined;
-        light?: string | undefined;
-        dark?: string | undefined;
-        text?: string | undefined;
+        main?: string;
+        light?: string;
+        dark?: string;
+        text?: string;
         1: string;
         2: string;
         3: string;
@@ -548,10 +616,10 @@ declare const useColors: () => {
         5: string;
     };
     black: {
-        main?: string | undefined;
-        light?: string | undefined;
-        dark?: string | undefined;
-        text?: string | undefined;
+        main?: string;
+        light?: string;
+        dark?: string;
+        text?: string;
         1: string;
         2: string;
         3: string;
@@ -619,7 +687,11 @@ declare const useColors: () => {
         text: string;
     };
 };
-declare const useTheme: () => index.ThemeTypes;
+declare const useTheme: () => ThemeTypes;
+declare const useThemeContext: () => {
+    theme: ThemeState;
+    setTheme: (theme: ThemeModes) => void;
+};
 declare const useNavScreenOptions: (type: "stack" | "tab" | "drawer") => any;
 
 declare const UIThemeContext: React.Context<ThemeContext>;
@@ -629,4 +701,4 @@ declare const HoddyUI: {
     initialize: typeof initialize;
 };
 
-export { AdaptiveStatusBar, AlertX, type AlertXProps, 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 };
+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 };