@hoddy-ui/core 1.1.4 → 2.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +155 -28
  2. package/next/dist/index.d.mts +113 -41
  3. package/next/dist/index.d.ts +113 -41
  4. package/next/dist/index.js +444 -297
  5. package/next/dist/index.js.map +1 -1
  6. package/next/dist/index.mjs +460 -307
  7. package/next/dist/index.mjs.map +1 -1
  8. package/next/package.json +7 -6
  9. package/package.json +7 -5
  10. package/src/Components/AlertX.tsx +4 -4
  11. package/src/Components/Animators/Animator.tsx +1 -1
  12. package/src/Components/Animators/hooks/useAppState.ts +4 -11
  13. package/src/Components/Animators/hooks/useBlinkAnimation.ts +31 -24
  14. package/src/Components/Animators/hooks/useFadeAnimation.ts +28 -26
  15. package/src/Components/Animators/hooks/useFloatAnimation.ts +67 -57
  16. package/src/Components/Animators/hooks/useGrowAnimation.ts +41 -28
  17. package/src/Components/Animators/hooks/useRollAnimation.ts +77 -57
  18. package/src/Components/Animators/hooks/useSlideAnimation.ts +44 -35
  19. package/src/Components/Animators/hooks/useThrownUpAnimation.ts +43 -50
  20. package/src/Components/Avatar.tsx +13 -7
  21. package/src/Components/Button.tsx +13 -12
  22. package/src/Components/FlashMessage.tsx +119 -42
  23. package/src/Components/FormWrapper.tsx +7 -2
  24. package/src/Components/Grid.tsx +5 -5
  25. package/src/Components/Locator.tsx +10 -2
  26. package/src/Components/OTPInput.tsx +0 -4
  27. package/src/Components/Popup.tsx +161 -83
  28. package/src/Components/SafeAreaView.tsx +11 -11
  29. package/src/Components/SelectMenu.tsx +34 -52
  30. package/src/Components/TextField.tsx +16 -6
  31. package/src/Components/Typography.tsx +19 -16
  32. package/src/config/KeyManager.ts +6 -1
  33. package/src/config/index.ts +37 -2
  34. package/src/hooks.ts +21 -14
  35. package/src/theme/index.tsx +14 -6
  36. package/src/types.ts +12 -3
  37. package/src/utility.ts +11 -0
  38. package/src/Components/Animators/README.md +0 -137
@@ -1,6 +1,5 @@
1
1
  import React, { ReactNode, FC } from 'react';
2
- import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, TextInput } from 'react-native';
3
- import * as index from 'index';
2
+ import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, StyleProp, TextInput } from 'react-native';
4
3
 
5
4
  type ThemeTypes = "dark" | "light";
6
5
  type ThemeModes = "dark" | "light" | "default";
@@ -35,7 +34,7 @@ interface ThemeState {
35
34
  }
36
35
  interface ThemeContext {
37
36
  themeState: ThemeState;
38
- themeDispatch?: any;
37
+ themeDispatch?: (action: ThemeActionTypes) => void;
39
38
  }
40
39
  interface ThemeProviderProps {
41
40
  children: ReactNode;
@@ -56,14 +55,6 @@ interface AvatarProps {
56
55
  size?: number;
57
56
  style?: ViewStyle;
58
57
  }
59
- interface AnimatorProps {
60
- style?: ViewStyle;
61
- duration?: number;
62
- children: ReactNode;
63
- delay?: number;
64
- animationType?: "easeInEaseOut" | "linear" | "spring";
65
- type?: "fade" | "slideInLeft" | "slideInRight" | "slideInUp" | "slideInDown";
66
- }
67
58
  interface ButtonProps {
68
59
  color?: colorTypes;
69
60
  variant?: "text" | "outlined" | "contained";
@@ -104,7 +95,7 @@ interface LinkButtonProps {
104
95
  style?: TextStyle & ViewStyle;
105
96
  color?: colorTypes;
106
97
  fontSize?: number;
107
- fontWeight?: string;
98
+ fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
108
99
  disabled?: boolean;
109
100
  onPress?: () => void;
110
101
  }
@@ -197,6 +188,9 @@ interface PopupProps {
197
188
  open: boolean;
198
189
  onClose?: () => void;
199
190
  style?: ViewStyle;
191
+ disableAutoKeyboardManagement?: boolean;
192
+ onModalShow?: () => void;
193
+ onModalHide?: () => void;
200
194
  }
201
195
  interface SpinnerProps {
202
196
  label?: string;
@@ -207,6 +201,7 @@ interface SpinnerProps {
207
201
  }
208
202
  interface TextFieldProps extends TextInputProps {
209
203
  label?: string;
204
+ labelProps?: TypographyProps;
210
205
  variant?: "outlined" | "text" | "contained";
211
206
  color?: colorTypes;
212
207
  size?: "small" | "normal" | "large";
@@ -229,11 +224,12 @@ interface TextFieldProps extends TextInputProps {
229
224
  }[];
230
225
  onFocus?: () => void;
231
226
  onBlur?: () => void;
227
+ selectMenuProps?: Partial<SelectMenuProps>;
232
228
  }
233
229
  interface TypographyProps extends TextProps {
234
230
  children: ReactNode;
235
231
  color?: colorTypes | (string & {});
236
- style?: TextStyle | ViewStyle;
232
+ style?: StyleProp<TextStyle | ViewStyle>;
237
233
  textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
238
234
  variant?: "caption" | "body1" | "body2" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1";
239
235
  align?: "center" | "left" | "right";
@@ -241,6 +237,7 @@ interface TypographyProps extends TextProps {
241
237
  numberOfLines?: number;
242
238
  adjustsFontSizeToFit?: boolean;
243
239
  fontFamily?: string;
240
+ fontSize?: number;
244
241
  fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
245
242
  }
246
243
  interface SafeAreaViewProps {
@@ -261,6 +258,8 @@ interface SelectMenuProps {
261
258
  label?: string;
262
259
  secondary?: string;
263
260
  helperText?: string;
261
+ searchEnabled?: boolean;
262
+ searchPlaceholder?: string;
264
263
  }
265
264
  interface OTPInputProps {
266
265
  length?: number;
@@ -289,12 +288,81 @@ interface DividerProps {
289
288
  style?: ViewStyle;
290
289
  height?: number;
291
290
  }
291
+ type AnimationType = "fade" | "grow" | "slide" | "blink" | "float" | "roll" | "thrownup";
292
+ interface BaseAnimatorProps {
293
+ children: ReactNode;
294
+ duration?: number;
295
+ delay?: number;
296
+ closeAfter?: number | null;
297
+ style?: ViewStyle;
298
+ }
299
+ type AnimatorProps = (BaseAnimatorProps & {
300
+ type: "fade";
301
+ }) | (BaseAnimatorProps & {
302
+ type: "grow";
303
+ initialScale?: number;
304
+ }) | (BaseAnimatorProps & {
305
+ type: "slide";
306
+ direction?: "up" | "down" | "left" | "right";
307
+ initialValue?: number;
308
+ }) | (BaseAnimatorProps & {
309
+ type: "blink";
310
+ blinkDuration?: number;
311
+ minOpacity?: number;
312
+ maxOpacity?: number;
313
+ }) | (BaseAnimatorProps & {
314
+ type: "float";
315
+ closeDuration?: number;
316
+ floatDistance?: number;
317
+ floatDuration?: number;
318
+ }) | (BaseAnimatorProps & {
319
+ type: "roll";
320
+ initialTranslateY?: number;
321
+ initialRotate?: string;
322
+ }) | (BaseAnimatorProps & {
323
+ type: "thrownup";
324
+ });
292
325
 
326
+ /**
327
+ * Configuration options for the Hoddy UI library
328
+ *
329
+ * @example
330
+ * ```typescript
331
+ * initialize({
332
+ * googleMapApiKey: "AIzaSyBxxxxxxxxxxxxxxxxxxxxxx",
333
+ * edgeToEdge: true,
334
+ * colors: {
335
+ * primary: "#007AFF",
336
+ * secondary: "#34C759"
337
+ * },
338
+ * typography: {
339
+ * fontFamily: "Inter",
340
+ * fontWeights: {
341
+ * 400: "Inter-Regular",
342
+ * 500: "Inter-Medium",
343
+ * 600: "Inter-SemiBold",
344
+ * 700: "Inter-Bold"
345
+ * }
346
+ * }
347
+ * });
348
+ * ```
349
+ */
293
350
  type configProps = {
351
+ /** Google Maps API key for map components */
294
352
  googleMapApiKey?: string;
353
+ /** Custom color palette overrides */
295
354
  colors?: extraColorTypes;
296
- fontFamily?: string;
355
+ /** Enable edge-to-edge display mode */
297
356
  edgeToEdge?: boolean;
357
+ /** Typography settings */
358
+ typography?: {
359
+ /** Primary font family */
360
+ fontFamily?: string;
361
+ /** Font family mappings for each weight (Android support) */
362
+ fontWeights?: {
363
+ [K in 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]?: string;
364
+ };
365
+ };
298
366
  };
299
367
  declare function initialize(config: configProps): void;
300
368
 
@@ -312,7 +380,7 @@ declare const Button: React.FC<ButtonProps>;
312
380
 
313
381
  declare const CheckBox: FC<CheckboxProps>;
314
382
 
315
- declare let showFlashMessage: (msg: FlashMessageProps) => void;
383
+ declare const showFlashMessage: (msg: FlashMessageProps) => void;
316
384
 
317
385
  declare const FormWrapper: React.FC<FormWrapperProps>;
318
386
 
@@ -371,10 +439,10 @@ declare const OTPInput: FC<OTPInputProps>;
371
439
 
372
440
  declare const useColors: () => {
373
441
  white: {
374
- main?: string | undefined;
375
- light?: string | undefined;
376
- dark?: string | undefined;
377
- text?: string | undefined;
442
+ main?: string;
443
+ light?: string;
444
+ dark?: string;
445
+ text?: string;
378
446
  1: string;
379
447
  2: string;
380
448
  3: string;
@@ -382,10 +450,10 @@ declare const useColors: () => {
382
450
  5: string;
383
451
  };
384
452
  black: {
385
- main?: string | undefined;
386
- light?: string | undefined;
387
- dark?: string | undefined;
388
- text?: string | undefined;
453
+ main?: string;
454
+ light?: string;
455
+ dark?: string;
456
+ text?: string;
389
457
  1: string;
390
458
  2: string;
391
459
  3: string;
@@ -454,10 +522,10 @@ declare const useColors: () => {
454
522
  };
455
523
  } | {
456
524
  white: {
457
- main?: string | undefined;
458
- light?: string | undefined;
459
- dark?: string | undefined;
460
- text?: string | undefined;
525
+ main?: string;
526
+ light?: string;
527
+ dark?: string;
528
+ text?: string;
461
529
  1: string;
462
530
  2: string;
463
531
  3: string;
@@ -465,10 +533,10 @@ declare const useColors: () => {
465
533
  5: string;
466
534
  };
467
535
  black: {
468
- main?: string | undefined;
469
- light?: string | undefined;
470
- dark?: string | undefined;
471
- text?: string | undefined;
536
+ main?: string;
537
+ light?: string;
538
+ dark?: string;
539
+ text?: string;
472
540
  1: string;
473
541
  2: string;
474
542
  3: string;
@@ -537,10 +605,10 @@ declare const useColors: () => {
537
605
  };
538
606
  } | {
539
607
  white: {
540
- main?: string | undefined;
541
- light?: string | undefined;
542
- dark?: string | undefined;
543
- text?: string | undefined;
608
+ main?: string;
609
+ light?: string;
610
+ dark?: string;
611
+ text?: string;
544
612
  1: string;
545
613
  2: string;
546
614
  3: string;
@@ -548,10 +616,10 @@ declare const useColors: () => {
548
616
  5: string;
549
617
  };
550
618
  black: {
551
- main?: string | undefined;
552
- light?: string | undefined;
553
- dark?: string | undefined;
554
- text?: string | undefined;
619
+ main?: string;
620
+ light?: string;
621
+ dark?: string;
622
+ text?: string;
555
623
  1: string;
556
624
  2: string;
557
625
  3: string;
@@ -619,7 +687,11 @@ declare const useColors: () => {
619
687
  text: string;
620
688
  };
621
689
  };
622
- declare const useTheme: () => index.ThemeTypes;
690
+ declare const useTheme: () => ThemeTypes;
691
+ declare const useThemeContext: () => {
692
+ theme: ThemeState;
693
+ setTheme: (theme: ThemeModes) => void;
694
+ };
623
695
  declare const useNavScreenOptions: (type: "stack" | "tab" | "drawer") => any;
624
696
 
625
697
  declare const UIThemeContext: React.Context<ThemeContext>;
@@ -629,4 +701,4 @@ declare const HoddyUI: {
629
701
  initialize: typeof initialize;
630
702
  };
631
703
 
632
- 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 };
704
+ 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 };