@chem-po/react-native 0.0.38 → 0.0.40

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 (88) hide show
  1. package/lib/commonjs/components/button/ActionButton.js +103 -38
  2. package/lib/commonjs/components/button/ActionButton.js.map +1 -1
  3. package/lib/commonjs/components/button/ButtonText.js +52 -0
  4. package/lib/commonjs/components/button/ButtonText.js.map +1 -0
  5. package/lib/commonjs/components/button/DeleteButton.js +26 -80
  6. package/lib/commonjs/components/button/DeleteButton.js.map +1 -1
  7. package/lib/commonjs/components/button/LoadingButton.js +8 -107
  8. package/lib/commonjs/components/button/LoadingButton.js.map +1 -1
  9. package/lib/commonjs/components/button/hooks.js +56 -0
  10. package/lib/commonjs/components/button/hooks.js.map +1 -0
  11. package/lib/commonjs/components/button/index.js +11 -0
  12. package/lib/commonjs/components/button/index.js.map +1 -1
  13. package/lib/commonjs/components/form/input/hooks/useInputStyles.js +3 -15
  14. package/lib/commonjs/components/form/input/hooks/useInputStyles.js.map +1 -1
  15. package/lib/commonjs/components/loading/CircularProgress.js.map +1 -1
  16. package/lib/commonjs/components/loading/LoadingOverlay.js +8 -5
  17. package/lib/commonjs/components/loading/LoadingOverlay.js.map +1 -1
  18. package/lib/commonjs/contexts/fonts.js +29 -0
  19. package/lib/commonjs/contexts/fonts.js.map +1 -0
  20. package/lib/commonjs/contexts/root.js +35 -24
  21. package/lib/commonjs/contexts/root.js.map +1 -1
  22. package/lib/commonjs/hooks/useFadeIn.js +1 -1
  23. package/lib/commonjs/hooks/useFadeIn.js.map +1 -1
  24. package/lib/commonjs/hooks/useFont.js +26 -0
  25. package/lib/commonjs/hooks/useFont.js.map +1 -0
  26. package/lib/module/components/button/ActionButton.js +100 -35
  27. package/lib/module/components/button/ActionButton.js.map +1 -1
  28. package/lib/module/components/button/ButtonText.js +44 -0
  29. package/lib/module/components/button/ButtonText.js.map +1 -0
  30. package/lib/module/components/button/DeleteButton.js +28 -82
  31. package/lib/module/components/button/DeleteButton.js.map +1 -1
  32. package/lib/module/components/button/LoadingButton.js +10 -109
  33. package/lib/module/components/button/LoadingButton.js.map +1 -1
  34. package/lib/module/components/button/hooks.js +45 -0
  35. package/lib/module/components/button/hooks.js.map +1 -0
  36. package/lib/module/components/button/index.js +1 -0
  37. package/lib/module/components/button/index.js.map +1 -1
  38. package/lib/module/components/form/input/hooks/useInputStyles.js +3 -15
  39. package/lib/module/components/form/input/hooks/useInputStyles.js.map +1 -1
  40. package/lib/module/components/loading/CircularProgress.js.map +1 -1
  41. package/lib/module/components/loading/LoadingOverlay.js +8 -5
  42. package/lib/module/components/loading/LoadingOverlay.js.map +1 -1
  43. package/lib/module/contexts/fonts.js +20 -0
  44. package/lib/module/contexts/fonts.js.map +1 -0
  45. package/lib/module/contexts/root.js +35 -24
  46. package/lib/module/contexts/root.js.map +1 -1
  47. package/lib/module/hooks/useFadeIn.js +1 -1
  48. package/lib/module/hooks/useFadeIn.js.map +1 -1
  49. package/lib/module/hooks/useFont.js +19 -0
  50. package/lib/module/hooks/useFont.js.map +1 -0
  51. package/lib/typescript/components/button/ActionButton.d.ts +14 -5
  52. package/lib/typescript/components/button/ActionButton.d.ts.map +1 -1
  53. package/lib/typescript/components/button/ButtonText.d.ts +14 -0
  54. package/lib/typescript/components/button/ButtonText.d.ts.map +1 -0
  55. package/lib/typescript/components/button/DeleteButton.d.ts +4 -6
  56. package/lib/typescript/components/button/DeleteButton.d.ts.map +1 -1
  57. package/lib/typescript/components/button/LoadingButton.d.ts +4 -17
  58. package/lib/typescript/components/button/LoadingButton.d.ts.map +1 -1
  59. package/lib/typescript/components/button/hooks.d.ts +7 -0
  60. package/lib/typescript/components/button/hooks.d.ts.map +1 -0
  61. package/lib/typescript/components/button/index.d.ts +1 -0
  62. package/lib/typescript/components/button/index.d.ts.map +1 -1
  63. package/lib/typescript/components/form/input/hooks/useInputStyles.d.ts +0 -9
  64. package/lib/typescript/components/form/input/hooks/useInputStyles.d.ts.map +1 -1
  65. package/lib/typescript/components/loading/CircularProgress.d.ts +3 -2
  66. package/lib/typescript/components/loading/CircularProgress.d.ts.map +1 -1
  67. package/lib/typescript/components/loading/LoadingOverlay.d.ts +5 -2
  68. package/lib/typescript/components/loading/LoadingOverlay.d.ts.map +1 -1
  69. package/lib/typescript/contexts/fonts.d.ts +9 -0
  70. package/lib/typescript/contexts/fonts.d.ts.map +1 -0
  71. package/lib/typescript/contexts/root.d.ts +2 -1
  72. package/lib/typescript/contexts/root.d.ts.map +1 -1
  73. package/lib/typescript/hooks/useFont.d.ts +6 -0
  74. package/lib/typescript/hooks/useFont.d.ts.map +1 -0
  75. package/package.json +3 -3
  76. package/src/components/button/ActionButton.tsx +131 -45
  77. package/src/components/button/ButtonText.tsx +60 -0
  78. package/src/components/button/DeleteButton.tsx +49 -115
  79. package/src/components/button/LoadingButton.tsx +10 -156
  80. package/src/components/button/hooks.ts +66 -0
  81. package/src/components/button/index.ts +1 -0
  82. package/src/components/form/input/hooks/useInputStyles.ts +3 -16
  83. package/src/components/loading/CircularProgress.tsx +7 -5
  84. package/src/components/loading/LoadingOverlay.tsx +13 -4
  85. package/src/contexts/fonts.tsx +23 -0
  86. package/src/contexts/root.tsx +45 -30
  87. package/src/hooks/useFadeIn.ts +1 -1
  88. package/src/hooks/useFont.ts +25 -0
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ButtonText.d.ts","sourceRoot":"","sources":["../../../../src/components/button/ButtonText.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAGrE,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB;AAED,eAAO,MAAM,UAAU,GAAI,gFAQxB,eAAe,sBAiBjB,CAAA"}
@@ -1,6 +1,6 @@
1
1
  import { Ionicons } from '@expo/vector-icons';
2
2
  import React, { ReactNode } from 'react';
3
- import { ViewStyle } from 'react-native';
3
+ import { ActionButtonProps } from './ActionButton';
4
4
  export declare const DeleteConfirmAlert: ({ confirmActive, onCancel, onConfirm, body, actionName, actionLoading, itemName, color, cancelText, }: {
5
5
  confirmActive: boolean;
6
6
  onCancel: () => void;
@@ -12,17 +12,15 @@ export declare const DeleteConfirmAlert: ({ confirmActive, onCancel, onConfirm,
12
12
  cancelText?: string;
13
13
  itemName: string;
14
14
  }) => React.JSX.Element;
15
- export declare const DeleteButton: React.FC<{
15
+ export interface DeleteButtonProps extends Omit<ActionButtonProps, 'onPress' | 'loading'> {
16
16
  onDelete: (() => Promise<any>) | (() => void);
17
17
  itemName: string;
18
18
  actionName?: string;
19
19
  noConfirm?: boolean;
20
20
  text?: string;
21
21
  alertBody?: string | ReactNode;
22
- style?: ViewStyle;
23
- color?: string;
24
- variant?: 'outline' | 'solid';
25
22
  iconSize?: number;
26
23
  iconProps?: React.ComponentProps<typeof Ionicons>;
27
- }>;
24
+ }
25
+ export declare const DeleteButton: React.FC<DeleteButtonProps>;
28
26
  //# sourceMappingURL=DeleteButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/DeleteButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAqD,MAAM,OAAO,CAAA;AAC3F,OAAO,EAAuD,SAAS,EAAE,MAAM,cAAc,CAAA;AAO7F,eAAO,MAAM,kBAAkB,GAAI,uGAUhC;IACD,aAAa,EAAE,OAAO,CAAA;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;CACjB,sBA+BA,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC7C,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;CAClD,CAiKA,CAAA"}
1
+ {"version":3,"file":"DeleteButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/DeleteButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAKlF,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAKhE,eAAO,MAAM,kBAAkB,GAAI,uGAUhC;IACD,aAAa,EAAE,OAAO,CAAA;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;CACjB,sBA+BA,CAAA;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,SAAS,CAAC;IACvF,QAAQ,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC7C,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;CAClD;AACD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyGpD,CAAA"}
@@ -1,20 +1,7 @@
1
- import { Ionicons } from '@expo/vector-icons';
2
- import React, { ReactNode } from 'react';
3
- import { StyleProp, TextStyle, ViewStyle } from 'react-native';
4
- export interface LoadingButtonProps {
5
- onPress: (() => Promise<any>) | (() => void);
6
- children: ReactNode;
7
- style?: StyleProp<ViewStyle>;
8
- contentStyle?: StyleProp<ViewStyle>;
9
- textStyle?: StyleProp<TextStyle>;
10
- color?: string;
11
- variant?: 'outline' | 'solid';
12
- icon?: {
13
- name: React.ComponentProps<typeof Ionicons>['name'];
14
- size?: number;
15
- };
16
- disabled?: boolean;
17
- iconProps?: React.ComponentProps<typeof Ionicons>;
1
+ import React from 'react';
2
+ import { ActionButtonProps } from './ActionButton';
3
+ export interface LoadingButtonProps<ReturnType = any> extends Omit<ActionButtonProps, 'onPress' | 'loading'> {
4
+ onPress: () => Promise<ReturnType>;
18
5
  }
19
6
  export declare const LoadingButton: React.FC<LoadingButtonProps>;
20
7
  //# sourceMappingURL=LoadingButton.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/LoadingButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,KAAK,EAAE,EAAE,SAAS,EAAqD,MAAM,OAAO,CAAA;AAC3F,OAAO,EAGL,SAAS,EAGT,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAA;AAGrB,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC5C,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;QACnD,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;CAClD;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsHtD,CAAA"}
1
+ {"version":3,"file":"LoadingButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/LoadingButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AACvE,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAEhE,MAAM,WAAW,kBAAkB,CAAC,UAAU,GAAG,GAAG,CAClD,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,GAAG,SAAS,CAAC;IACtD,OAAO,EAAE,MAAM,OAAO,CAAC,UAAU,CAAC,CAAA;CACnC;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6BtD,CAAA"}
@@ -0,0 +1,7 @@
1
+ import { ButtonColors } from '@chem-po/core';
2
+ export declare const useButtonFont: (size: "lg" | "md" | "sm" | "xs") => import("react-native-paper/lib/typescript/types").MD3Type;
3
+ export declare const useButtonColors: (variant: "solid" | "outline") => ButtonColors;
4
+ export declare const useButtonTextColor: (colors: ButtonColors, variant: "solid" | "outline", buttonColor: string | undefined, disabled: boolean, disabledColor: string | undefined) => string;
5
+ export declare const useButtonBackgroundColor: (colors: ButtonColors, variant: "solid" | "outline", buttonColor: string | undefined, disabled: boolean, disabledColor: string | undefined) => string;
6
+ export declare const useButtonBorderColor: (colors: ButtonColors, variant: "solid" | "outline", buttonColor: string | undefined, disabled: boolean, disabledColor: string | undefined) => string;
7
+ //# sourceMappingURL=hooks.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/button/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAK5C,eAAO,MAAM,aAAa,GAAI,MAAM,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,8DAI5D,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,SAAS,OAAO,GAAG,SAAS,iBAG3D,CAAA;AAED,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,YAAY,EACpB,SAAS,OAAO,GAAG,SAAS,EAC5B,aAAa,MAAM,GAAG,SAAS,EAC/B,UAAU,OAAO,EACjB,eAAe,MAAM,GAAG,SAAS,WAUlC,CAAA;AAED,eAAO,MAAM,wBAAwB,GACnC,QAAQ,YAAY,EACpB,SAAS,OAAO,GAAG,SAAS,EAC5B,aAAa,MAAM,GAAG,SAAS,EAC/B,UAAU,OAAO,EACjB,eAAe,MAAM,GAAG,SAAS,WAUlC,CAAA;AAED,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,YAAY,EACpB,SAAS,OAAO,GAAG,SAAS,EAC5B,aAAa,MAAM,GAAG,SAAS,EAC/B,UAAU,OAAO,EACjB,eAAe,MAAM,GAAG,SAAS,WAUlC,CAAA"}
@@ -1,4 +1,5 @@
1
1
  export * from './ActionButton';
2
+ export * from './ButtonText';
2
3
  export * from './DeleteButton';
3
4
  export * from './LoadingButton';
4
5
  export * from './Toggle';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA"}
@@ -23,15 +23,6 @@ export declare const inputStyles: {
23
23
  padding: number;
24
24
  borderRadius: number;
25
25
  };
26
- inputTextSmall: {
27
- fontSize: number;
28
- };
29
- inputTextMedium: {
30
- fontSize: number;
31
- };
32
- inputTextLarge: {
33
- fontSize: number;
34
- };
35
26
  buttonContainer: {
36
27
  flexDirection: "row";
37
28
  alignItems: "center";
@@ -1 +1 @@
1
- {"version":3,"file":"useInputStyles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/hooks/useInputStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAGzC,OAAO,EAAE,SAAS,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE1E,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CtB,CAAA;AAsCF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CACtC;AACD,eAAO,MAAM,cAAc,GACzB,YAAY,OAAO,GAAG,SAAS,EAC/B,MAAM,SAAS,GAAG,SAAS,EAC3B,WAAU,SAAgB,KACzB,cA0BF,CAAA"}
1
+ {"version":3,"file":"useInputStyles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/input/hooks/useInputStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAGzC,OAAO,EAAE,SAAS,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAG1E,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCtB,CAAA;AAgCF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,SAAS,EAAE,SAAS,CAAA;IACpB,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CACtC;AACD,eAAO,MAAM,cAAc,GACzB,YAAY,OAAO,GAAG,SAAS,EAC/B,MAAM,SAAS,GAAG,SAAS,EAC3B,WAAU,SAAgB,KACzB,cA2BF,CAAA"}
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
2
  import { ActivityIndicatorProps, StyleProp, ViewStyle } from 'react-native';
3
- export declare const CircularProgress: ({ color, trackColor, animating, visible, viewStyle, ...props }: ActivityIndicatorProps & {
3
+ export interface CircularProgressProps extends ActivityIndicatorProps {
4
4
  trackColor?: string;
5
5
  viewStyle?: StyleProp<ViewStyle>;
6
6
  visible?: boolean;
7
- }) => React.JSX.Element;
7
+ }
8
+ export declare const CircularProgress: ({ color, trackColor, animating, visible, viewStyle, ...props }: CircularProgressProps) => React.JSX.Element;
8
9
  //# sourceMappingURL=CircularProgress.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/CircularProgress.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAEL,sBAAsB,EAEtB,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAA;AAErB,eAAO,MAAM,gBAAgB,GAAI,gEAO9B,sBAAsB,GAAG;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,sBAuBA,CAAA"}
1
+ {"version":3,"file":"CircularProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/CircularProgress.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAEL,sBAAsB,EAEtB,SAAS,EAET,SAAS,EACV,MAAM,cAAc,CAAA;AAErB,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,gBAAgB,GAAI,gEAO9B,qBAAqB,sBAuBvB,CAAA"}
@@ -1,17 +1,20 @@
1
1
  import React from 'react';
2
2
  import { StyleProp, ViewStyle } from 'react-native';
3
3
  import { FadeInOptions } from '../../hooks/useFadeIn';
4
+ import { CircularProgressProps } from './CircularProgress';
4
5
  interface LoadingOverlayProps {
5
6
  loading: boolean;
6
7
  fadeOptions?: FadeInOptions;
7
8
  style?: StyleProp<ViewStyle>;
9
+ indicatorProps?: CircularProgressProps;
8
10
  }
9
- export declare const LoadingOverlay: ({ loading, fadeOptions, style }: LoadingOverlayProps) => React.JSX.Element;
10
- export declare const WithLoadingOverlay: ({ loading, children, style, overlayStyle, }: {
11
+ export declare const LoadingOverlay: ({ loading, fadeOptions, style, indicatorProps, }: LoadingOverlayProps) => React.JSX.Element;
12
+ export declare const WithLoadingOverlay: ({ loading, children, style, overlayStyle, indicatorProps, }: {
11
13
  loading: boolean;
12
14
  children: React.ReactNode;
13
15
  style?: StyleProp<ViewStyle>;
14
16
  overlayStyle?: StyleProp<ViewStyle>;
17
+ indicatorProps?: CircularProgressProps;
15
18
  }) => React.JSX.Element;
16
19
  export {};
17
20
  //# sourceMappingURL=LoadingOverlay.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"LoadingOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/LoadingOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAY,SAAS,EAAc,SAAS,EAAE,MAAM,cAAc,CAAA;AACzE,OAAO,EAAE,aAAa,EAAa,MAAM,uBAAuB,CAAA;AAOhE,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,aAAa,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B;AACD,eAAO,MAAM,cAAc,GAAI,iCAAiC,mBAAmB,sBAUlF,CAAA;AAKD,eAAO,MAAM,kBAAkB,GAAI,6CAKhC;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CACpC,sBAYA,CAAA"}
1
+ {"version":3,"file":"LoadingOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/loading/LoadingOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAY,SAAS,EAAc,SAAS,EAAE,MAAM,cAAc,CAAA;AACzE,OAAO,EAAE,aAAa,EAAa,MAAM,uBAAuB,CAAA;AAChE,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAM5E,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,aAAa,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,cAAc,CAAC,EAAE,qBAAqB,CAAA;CACvC;AACD,eAAO,MAAM,cAAc,GAAI,kDAK5B,mBAAmB,sBAUrB,CAAA;AAKD,eAAO,MAAM,kBAAkB,GAAI,6DAMhC;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACnC,cAAc,CAAC,EAAE,qBAAqB,CAAA;CACvC,sBAaA,CAAA"}
@@ -0,0 +1,9 @@
1
+ import React, { PropsWithChildren } from 'react';
2
+ import { MD3Typescale } from 'react-native-paper/lib/typescript/types';
3
+ export interface ChempoFontsProviderProps {
4
+ fonts: MD3Typescale;
5
+ }
6
+ export declare const ChempoFontsContext: React.Context<ChempoFontsProviderProps | null>;
7
+ export declare const ChempoFontsProvider: ({ children, fonts, }: PropsWithChildren<ChempoFontsProviderProps>) => React.JSX.Element;
8
+ export declare const useChempoFonts: () => ChempoFontsProviderProps;
9
+ //# sourceMappingURL=fonts.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../src/contexts/fonts.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAc,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAA;AAEtE,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,YAAY,CAAA;CACpB;AAED,eAAO,MAAM,kBAAkB,gDAAuD,CAAA;AAEtF,eAAO,MAAM,mBAAmB,GAAI,sBAGjC,iBAAiB,CAAC,wBAAwB,CAAC,sBAE7C,CAAA;AAED,eAAO,MAAM,cAAc,gCAM1B,CAAA"}
@@ -1,7 +1,8 @@
1
1
  import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core';
2
2
  import { ChempoProps } from '@chem-po/react';
3
3
  import React, { FC, PropsWithChildren } from 'react';
4
- import { MD3Type, MD3TypescaleKey } from 'react-native-paper/lib/typescript/types';
4
+ import { MD3TypescaleKey } from 'react-native-paper';
5
+ import { MD3Type } from 'react-native-paper/lib/typescript/types';
5
6
  export type FontConfig = Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>;
6
7
  export type MiddlewareProvider = FC<PropsWithChildren>;
7
8
  export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapterInterface> extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
@@ -1 +1 @@
1
- {"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/contexts/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAA4B,MAAM,gBAAgB,CAAA;AACtE,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAK7D,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAA;AAQlF,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAC3E,MAAM,MAAM,kBAAkB,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAA;AACtD,MAAM,WAAW,yBAAyB,CAAC,cAAc,SAAS,uBAAuB,CACvF,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AA6GD,eAAO,MAAM,oBAAoB,GAAI,cAAc,SAAS,uBAAuB,EAAE,iIASlF,yBAAyB,CAAC,cAAc,CAAC,sBA0B3C,CAAA"}
1
+ {"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../src/contexts/root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,WAAW,EAA4B,MAAM,gBAAgB,CAAA;AACtE,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAG7D,OAAO,EAEL,eAAe,EAGhB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAE,OAAO,EAAgB,MAAM,yCAAyC,CAAA;AAS/E,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAC3E,MAAM,MAAM,kBAAkB,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAA;AACtD,MAAM,WAAW,yBAAyB,CAAC,cAAc,SAAS,uBAAuB,CACvF,SAAQ,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,EAAE,gBAAgB,GAAG,QAAQ,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;IACvC,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAsHD,eAAO,MAAM,oBAAoB,GAAI,cAAc,SAAS,uBAAuB,EAAE,iIASlF,yBAAyB,CAAC,cAAc,CAAC,sBA0B3C,CAAA"}
@@ -0,0 +1,6 @@
1
+ export type FontFamilyType = 'display' | 'body' | 'label' | 'headline' | 'title';
2
+ export type FontSize = 'lg' | 'md' | 'sm';
3
+ export type FontSizeKey = 'Small' | 'Medium' | 'Large';
4
+ export type FontKey = `${FontFamilyType}${FontSizeKey}`;
5
+ export declare const useFont: (fontFamily: FontFamilyType, fontSize: FontSize) => import("react-native-paper/lib/typescript/types").MD3Type;
6
+ //# sourceMappingURL=useFont.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useFont.d.ts","sourceRoot":"","sources":["../../../src/hooks/useFont.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAA;AAChF,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AACzC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AACtD,MAAM,MAAM,OAAO,GAAG,GAAG,cAAc,GAAG,WAAW,EAAE,CAAA;AAgBvD,eAAO,MAAM,OAAO,GAAI,YAAY,cAAc,EAAE,UAAU,QAAQ,8DAGrE,CAAA"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@chem-po/react-native",
3
3
  "author": "Elan Canfield",
4
4
  "license": "MIT",
5
- "version": "0.0.38",
5
+ "version": "0.0.40",
6
6
  "main": "lib/commonjs/index.js",
7
7
  "types": "lib/typescript/index.d.ts",
8
8
  "source": "src/index.ts",
@@ -53,8 +53,8 @@
53
53
  "react-native-paper-dates": "^0.22.42",
54
54
  "react-native-svg": "15.11.2",
55
55
  "zustand": "^4.3.3",
56
- "@chem-po/core": "0.0.38",
57
- "@chem-po/react": "0.0.38"
56
+ "@chem-po/core": "0.0.40",
57
+ "@chem-po/react": "0.0.40"
58
58
  },
59
59
  "devDependencies": {
60
60
  "@babel/core": "^7.26.0",
@@ -1,21 +1,58 @@
1
- import { palette } from '@chem-po/core'
2
- import { useBackgroundColor } from '@chem-po/react'
3
- import React, { PropsWithChildren } from 'react'
4
- import { Pressable, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
1
+ import { ElementSize } from '@chem-po/core'
2
+ import { Ionicons } from '@expo/vector-icons'
3
+ import React, { PropsWithChildren, useMemo } from 'react'
4
+ import { StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
5
+ import { Pressable } from 'react-native-gesture-handler'
6
+ import { CircularProgressProps } from '../loading'
5
7
  import { WithLoadingOverlay } from '../loading/LoadingOverlay'
6
- import { Txt } from '../text'
8
+ import { ButtonText } from './ButtonText'
9
+ import {
10
+ useButtonBackgroundColor,
11
+ useButtonBorderColor,
12
+ useButtonColors,
13
+ useButtonTextColor,
14
+ } from './hooks'
7
15
 
8
- export interface ActionButtonProps
9
- extends PropsWithChildren<{
10
- onPress: () => void
11
- style?: StyleProp<ViewStyle>
12
- disabled?: boolean
13
- size?: 'lg' | 'md' | 'sm' | 'xs'
14
- }> {
16
+ export interface ActionButtonProps extends PropsWithChildren {
17
+ icon?: {
18
+ name: React.ComponentProps<typeof Ionicons>['name']
19
+ size?: number
20
+ }
21
+ iconProps?: React.ComponentProps<typeof Ionicons>
22
+ style?: StyleProp<ViewStyle>
23
+ onPress: () => void
24
+ disabled?: boolean
15
25
  textStyle?: StyleProp<TextStyle>
26
+ size?: ElementSize
27
+ color?: string
28
+ rippleColor?: string
29
+ variant?: 'outline' | 'solid'
16
30
  disabledColor?: string
17
31
  loading?: boolean
18
32
  }
33
+
34
+ const getIndicatorSize = (size: ElementSize) => {
35
+ switch (size) {
36
+ case 'sm':
37
+ return 18
38
+ case 'md':
39
+ return 22
40
+ case 'lg':
41
+ return 26
42
+ }
43
+ }
44
+
45
+ const getContentGap = (size: ElementSize) => {
46
+ switch (size) {
47
+ case 'sm':
48
+ return 4
49
+ case 'lg':
50
+ return 8
51
+ default:
52
+ return 6
53
+ }
54
+ }
55
+
19
56
  export const ActionButton = ({
20
57
  children,
21
58
  onPress,
@@ -24,32 +61,79 @@ export const ActionButton = ({
24
61
  disabled = false,
25
62
  loading,
26
63
  size = 'md',
27
- disabledColor = palette.gray.medium,
64
+ disabledColor,
65
+ color: colorProp,
66
+ icon,
67
+ iconProps,
68
+ variant = 'solid',
69
+ rippleColor: rippleColorProp,
28
70
  }: ActionButtonProps) => {
29
- const defaultBackgroundColor = useBackgroundColor(300)
30
- const backgroundColor = disabled ? disabledColor : defaultBackgroundColor
71
+ const colors = useButtonColors(variant)
72
+ const rippleColor = useMemo(
73
+ () => rippleColorProp ?? colors.ripple,
74
+ [rippleColorProp, colors.ripple],
75
+ )
76
+ const textColor = useButtonTextColor(colors, variant, colorProp, disabled, disabledColor)
77
+ const backgroundColor = useButtonBackgroundColor(
78
+ colors,
79
+ variant,
80
+ colorProp,
81
+ disabled,
82
+ disabledColor,
83
+ )
84
+ const borderColor = useButtonBorderColor(colors, variant, colorProp, disabled, disabledColor)
85
+ const indicatorProps = useMemo<CircularProgressProps>(() => {
86
+ return { color: textColor, size: getIndicatorSize(size) }
87
+ }, [textColor, size])
88
+
31
89
  const body =
32
90
  typeof children === 'string' ? (
33
- <Txt
34
- style={[
35
- textStyles[size],
36
- { color: disabled ? disabledColor : defaultBackgroundColor },
37
- textStyle,
38
- ]}>
91
+ <ButtonText
92
+ variant={variant}
93
+ color={colorProp}
94
+ disabledColor={disabledColor}
95
+ disabled={disabled}
96
+ size={size}
97
+ style={textStyle}>
39
98
  {children}
40
- </Txt>
99
+ </ButtonText>
41
100
  ) : (
42
101
  children
43
102
  )
103
+
104
+ const content = (
105
+ <View style={[styles.content, { gap: getContentGap(size) }]}>
106
+ {icon ? (
107
+ <Ionicons
108
+ name={icon.name}
109
+ size={icon.size ?? 20}
110
+ color={textColor}
111
+ {...iconProps}
112
+ style={[variant === 'solid' ? styles.iconShadow : {}, iconProps?.style]}
113
+ />
114
+ ) : null}
115
+ {body}
116
+ </View>
117
+ )
118
+
44
119
  return (
45
120
  <Pressable
46
- style={[containerStyles.base, containerStyles[size], { backgroundColor }, style]}
121
+ style={[
122
+ containerStyles.base,
123
+ containerStyles[size],
124
+ variant === 'solid' ? styles.buttonShadow : { borderWidth: 1 },
125
+ { backgroundColor, borderColor },
126
+ style,
127
+ ]}
47
128
  onPress={onPress}
48
- disabled={disabled}>
129
+ android_ripple={{ color: rippleColor }}
130
+ disabled={disabled || loading}>
49
131
  {loading !== undefined ? (
50
- <WithLoadingOverlay loading={loading}>{body}</WithLoadingOverlay>
132
+ <WithLoadingOverlay loading={loading} indicatorProps={indicatorProps}>
133
+ {content}
134
+ </WithLoadingOverlay>
51
135
  ) : (
52
- body
136
+ content
53
137
  )}
54
138
  </Pressable>
55
139
  )
@@ -63,6 +147,23 @@ const styles = StyleSheet.create({
63
147
  rounded: {
64
148
  borderRadius: 100,
65
149
  },
150
+ content: {
151
+ flexDirection: 'row',
152
+ alignItems: 'center',
153
+ justifyContent: 'center',
154
+ },
155
+ buttonShadow: {
156
+ shadowColor: '#000000',
157
+ shadowOffset: { width: 1, height: 1 },
158
+ shadowRadius: 6,
159
+ shadowOpacity: 0.25,
160
+ elevation: 2,
161
+ },
162
+ iconShadow: {
163
+ textShadowColor: 'rgba(0, 0, 0, 0.3)',
164
+ textShadowOffset: { width: 1, height: 1 },
165
+ textShadowRadius: 4,
166
+ },
66
167
  })
67
168
 
68
169
  const containerStyles = StyleSheet.create({
@@ -76,13 +177,13 @@ const containerStyles = StyleSheet.create({
76
177
  borderRadius: 5,
77
178
  },
78
179
  md: {
79
- paddingVertical: 8,
80
- paddingHorizontal: 16,
180
+ paddingVertical: 6,
181
+ paddingHorizontal: 12,
81
182
  borderRadius: 4,
82
183
  },
83
184
  sm: {
84
- paddingVertical: 6,
85
- paddingHorizontal: 12,
185
+ paddingVertical: 4,
186
+ paddingHorizontal: 8,
86
187
  borderRadius: 3,
87
188
  },
88
189
  xs: {
@@ -91,18 +192,3 @@ const containerStyles = StyleSheet.create({
91
192
  borderRadius: 2,
92
193
  },
93
194
  })
94
-
95
- const textStyles = StyleSheet.create({
96
- lg: {
97
- fontSize: 18,
98
- },
99
- md: {
100
- fontSize: 16,
101
- },
102
- sm: {
103
- fontSize: 14,
104
- },
105
- xs: {
106
- fontSize: 12,
107
- },
108
- })
@@ -0,0 +1,60 @@
1
+ import { ElementSize } from '@chem-po/core'
2
+ import React from 'react'
3
+ import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native'
4
+ import { useButtonColors, useButtonFont, useButtonTextColor } from './hooks'
5
+
6
+ export interface ButtonTextProps {
7
+ children: string
8
+ style?: StyleProp<TextStyle>
9
+ variant?: 'outline' | 'solid'
10
+ color?: string
11
+ disabledColor?: string
12
+ disabled?: boolean
13
+ size?: ElementSize
14
+ }
15
+
16
+ export const ButtonText = ({
17
+ children,
18
+ style,
19
+ disabled = false,
20
+ size = 'md',
21
+ disabledColor,
22
+ color: colorProp,
23
+ variant = 'solid',
24
+ }: ButtonTextProps) => {
25
+ const colors = useButtonColors(variant)
26
+ const fontStyle = useButtonFont(size)
27
+ const textColor = useButtonTextColor(colors, variant, colorProp, disabled, disabledColor)
28
+
29
+ return (
30
+ <Text
31
+ style={[
32
+ styles[size],
33
+ fontStyle,
34
+ variant === 'solid' ? styles.textShadow : {},
35
+ { color: textColor },
36
+ style,
37
+ ]}>
38
+ {children}
39
+ </Text>
40
+ )
41
+ }
42
+ const styles = StyleSheet.create({
43
+ lg: {
44
+ fontSize: 18,
45
+ },
46
+ md: {
47
+ fontSize: 16,
48
+ },
49
+ sm: {
50
+ fontSize: 14,
51
+ },
52
+ xs: {
53
+ fontSize: 12,
54
+ },
55
+ textShadow: {
56
+ textShadowColor: 'rgba(0, 0, 0, 0.25)',
57
+ textShadowOffset: { width: 1, height: 1 },
58
+ textShadowRadius: 3,
59
+ },
60
+ })