@chem-po/react-native 0.0.39 → 0.0.41

package/lib/module/hooks/useFont.js

@@ -0,0 +1,19 @@
+import { useChempoFonts } from '../contexts/fonts';
+const getFontKeySize = fontSize => {
+  switch (fontSize) {
+    case 'lg':
+      return 'Large';
+    case 'md':
+      return 'Medium';
+    default:
+      return 'Small';
+  }
+};
+const getFontKey = (fontFamily, fontSize) => `${fontFamily}${getFontKeySize(fontSize)}`;
+export const useFont = (fontFamily, fontSize) => {
+  const {
+    fonts
+  } = useChempoFonts();
+  return fonts[getFontKey(fontFamily, fontSize)];
+};
+//# sourceMappingURL=useFont.js.map

package/lib/module/hooks/useFont.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useChempoFonts","getFontKeySize","fontSize","getFontKey","fontFamily","useFont","fonts"],"sourceRoot":"..\\..\\..\\src","sources":["hooks/useFont.ts"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAOlD,MAAMC,cAAc,GAAIC,QAAkB,IAAkB;EAC1D,QAAQA,QAAQ;IACd,KAAK,IAAI;MACP,OAAO,OAAO;IAChB,KAAK,IAAI;MACP,OAAO,QAAQ;IACjB;MACE,OAAO,OAAO;EAClB;AACF,CAAC;AAED,MAAMC,UAAU,GAAGA,CAACC,UAA0B,EAAEF,QAAkB,KAChE,GAAGE,UAAU,GAAGH,cAAc,CAACC,QAAQ,CAAC,EAAE;AAE5C,OAAO,MAAMG,OAAO,GAAGA,CAACD,UAA0B,EAAEF,QAAkB,KAAK;EACzE,MAAM;IAAEI;EAAM,CAAC,GAAGN,cAAc,CAAC,CAAC;EAClC,OAAOM,KAAK,CAACH,UAAU,CAACC,UAAU,EAAEF,QAAQ,CAAC,CAAC;AAChD,CAAC","ignoreList":[]}

package/lib/typescript/components/button/ActionButton.d.ts

@@ -1,15 +1,24 @@
+import { ElementSize } from '@chem-po/core';
+import { Ionicons } from '@expo/vector-icons';
 import React, { PropsWithChildren } from 'react';
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-export interface ActionButtonProps extends PropsWithChildren<{
-    onPress: () => void;
+export interface ActionButtonProps extends PropsWithChildren {
+    icon?: {
+        name: React.ComponentProps<typeof Ionicons>['name'];
+        size?: number;
+    };
+    iconProps?: React.ComponentProps<typeof Ionicons>;
     style?: StyleProp<ViewStyle>;
+    onPress: () => void;
     disabled?: boolean;
-    size?: 'lg' | 'md' | 'sm' | 'xs';
-}> {
     textStyle?: StyleProp<TextStyle>;
+    size?: ElementSize;
+    color?: string;
+    rippleColor?: string;
+    variant?: 'outline' | 'solid';
     disabledColor?: string;
     loading?: boolean;
 }
-export declare const ActionButton: ({ children, onPress, style, textStyle, disabled, loading, size, disabledColor, }: ActionButtonProps) => React.JSX.Element;
+export declare const ActionButton: ({ children, onPress, style, textStyle, disabled, loading, size, disabledColor, color: colorProp, icon, iconProps, variant, rippleColor: rippleColorProp, }: ActionButtonProps) => React.JSX.Element;
 export declare const RoundedButton: ({ style, ...props }: ActionButtonProps) => React.JSX.Element;
 //# sourceMappingURL=ActionButton.d.ts.map

package/lib/typescript/components/button/ActionButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/ActionButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAa,SAAS,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAIrF,MAAM,WAAW,iBACf,SAAQ,iBAAiB,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACjC,CAAC;IACF,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AACD,eAAO,MAAM,YAAY,GAAI,kFAS1B,iBAAiB,sBA4BnB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,qBAAqB,iBAAiB,sBAEnE,CAAA"}
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../../src/components/button/ActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,SAAS,EAAc,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAA;AAYhF,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,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,SAAS,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAA;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAwBD,eAAO,MAAM,YAAY,GAAI,4JAc1B,iBAAiB,sBAsEnB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,qBAAqB,iBAAiB,sBAEnE,CAAA"}

package/lib/typescript/components/button/ButtonText.d.ts

@@ -0,0 +1,14 @@
+import { ElementSize } from '@chem-po/core';
+import React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
+export interface ButtonTextProps {
+    children: string;
+    style?: StyleProp<TextStyle>;
+    variant?: 'outline' | 'solid';
+    color?: string;
+    disabledColor?: string;
+    disabled?: boolean;
+    size?: ElementSize;
+}
+export declare const ButtonText: ({ children, style, disabled, size, disabledColor, color: colorProp, variant, }: ButtonTextProps) => React.JSX.Element;
+//# sourceMappingURL=ButtonText.d.ts.map

package/lib/typescript/components/button/ButtonText.d.ts.map

@@ -0,0 +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"}

package/lib/typescript/components/button/DeleteButton.d.ts

@@ -1,6 +1,6 @@
 import { Ionicons } from '@expo/vector-icons';
 import React, { ReactNode } from 'react';
-import { ViewStyle } from 'react-native';
+import { ActionButtonProps } from './ActionButton';
 export declare const DeleteConfirmAlert: ({ confirmActive, onCancel, onConfirm, body, actionName, actionLoading, itemName, color, cancelText, }: {
     confirmActive: boolean;
     onCancel: () => void;
@@ -12,17 +12,15 @@ export declare const DeleteConfirmAlert: ({ confirmActive, onCancel, onConfirm,
     cancelText?: string;
     itemName: string;
 }) => React.JSX.Element;
-export declare const DeleteButton: React.FC<{
+export interface DeleteButtonProps extends Omit<ActionButtonProps, 'onPress' | 'loading'> {
     onDelete: (() => Promise<any>) | (() => void);
     itemName: string;
     actionName?: string;
     noConfirm?: boolean;
     text?: string;
     alertBody?: string | ReactNode;
-    style?: ViewStyle;
-    color?: string;
-    variant?: 'outline' | 'solid';
     iconSize?: number;
     iconProps?: React.ComponentProps<typeof Ionicons>;
-}>;
+}
+export declare const DeleteButton: React.FC<DeleteButtonProps>;
 //# sourceMappingURL=DeleteButton.d.ts.map

package/lib/typescript/components/button/DeleteButton.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/components/button/LoadingButton.d.ts

@@ -1,20 +1,7 @@
-import { Ionicons } from '@expo/vector-icons';
-import React, { ReactNode } from 'react';
-import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-export interface LoadingButtonProps {
-    onPress: (() => Promise<any>) | (() => void);
-    children: ReactNode;
-    style?: StyleProp<ViewStyle>;
-    contentStyle?: StyleProp<ViewStyle>;
-    textStyle?: StyleProp<TextStyle>;
-    color?: string;
-    variant?: 'outline' | 'solid';
-    icon?: {
-        name: React.ComponentProps<typeof Ionicons>['name'];
-        size?: number;
-    };
-    disabled?: boolean;
-    iconProps?: React.ComponentProps<typeof Ionicons>;
+import React from 'react';
+import { ActionButtonProps } from './ActionButton';
+export interface LoadingButtonProps<ReturnType = any> extends Omit<ActionButtonProps, 'onPress' | 'loading'> {
+    onPress: () => Promise<ReturnType>;
 }
 export declare const LoadingButton: React.FC<LoadingButtonProps>;
 //# sourceMappingURL=LoadingButton.d.ts.map

package/lib/typescript/components/button/LoadingButton.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/components/button/hooks.d.ts

@@ -0,0 +1,7 @@
+import { ButtonColors } from '@chem-po/core';
+export declare const useButtonFont: (size: "lg" | "md" | "sm" | "xs") => import("react-native-paper/lib/typescript/types").MD3Type;
+export declare const useButtonColors: (variant: "solid" | "outline") => ButtonColors;
+export declare const useButtonTextColor: (colors: ButtonColors, variant: "solid" | "outline", buttonColor: string | undefined, disabled: boolean, disabledColor: string | undefined) => string;
+export declare const useButtonBackgroundColor: (colors: ButtonColors, variant: "solid" | "outline", buttonColor: string | undefined, disabled: boolean, disabledColor: string | undefined) => string;
+export declare const useButtonBorderColor: (colors: ButtonColors, variant: "solid" | "outline", buttonColor: string | undefined, disabled: boolean, disabledColor: string | undefined) => string;
+//# sourceMappingURL=hooks.d.ts.map

package/lib/typescript/components/button/hooks.d.ts.map

@@ -0,0 +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"}

package/lib/typescript/components/button/index.d.ts

@@ -1,4 +1,5 @@
 export * from './ActionButton';
+export * from './ButtonText';
 export * from './DeleteButton';
 export * from './LoadingButton';
 export * from './Toggle';

package/lib/typescript/components/button/index.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/components/form/input/hooks/useInputStyles.d.ts

@@ -23,15 +23,6 @@ export declare const inputStyles: {
         padding: number;
         borderRadius: number;
     };
-    inputTextSmall: {
-        fontSize: number;
-    };
-    inputTextMedium: {
-        fontSize: number;
-    };
-    inputTextLarge: {
-        fontSize: number;
-    };
     buttonContainer: {
         flexDirection: "row";
         alignItems: "center";

package/lib/typescript/components/form/input/hooks/useInputStyles.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/components/form/input/index.d.ts

@@ -1,3 +1,5 @@
 export * from './Editable';
+export * from './hooks';
+export * from './input';
 export * from './StandaloneInput';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/form/input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA"}

package/lib/typescript/components/loading/CircularProgress.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { ActivityIndicatorProps, StyleProp, ViewStyle } from 'react-native';
-export declare const CircularProgress: ({ color, trackColor, animating, visible, viewStyle, ...props }: ActivityIndicatorProps & {
+export interface CircularProgressProps extends ActivityIndicatorProps {
     trackColor?: string;
     viewStyle?: StyleProp<ViewStyle>;
     visible?: boolean;
-}) => React.JSX.Element;
+}
+export declare const CircularProgress: ({ color, trackColor, animating, visible, viewStyle, ...props }: CircularProgressProps) => React.JSX.Element;
 //# sourceMappingURL=CircularProgress.d.ts.map

package/lib/typescript/components/loading/CircularProgress.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/components/loading/LoadingOverlay.d.ts

@@ -1,17 +1,20 @@
 import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { FadeInOptions } from '../../hooks/useFadeIn';
+import { CircularProgressProps } from './CircularProgress';
 interface LoadingOverlayProps {
     loading: boolean;
     fadeOptions?: FadeInOptions;
     style?: StyleProp<ViewStyle>;
+    indicatorProps?: CircularProgressProps;
 }
-export declare const LoadingOverlay: ({ loading, fadeOptions, style }: LoadingOverlayProps) => React.JSX.Element;
-export declare const WithLoadingOverlay: ({ loading, children, style, overlayStyle, }: {
+export declare const LoadingOverlay: ({ loading, fadeOptions, style, indicatorProps, }: LoadingOverlayProps) => React.JSX.Element;
+export declare const WithLoadingOverlay: ({ loading, children, style, overlayStyle, indicatorProps, }: {
     loading: boolean;
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
     overlayStyle?: StyleProp<ViewStyle>;
+    indicatorProps?: CircularProgressProps;
 }) => React.JSX.Element;
 export {};
 //# sourceMappingURL=LoadingOverlay.d.ts.map

package/lib/typescript/components/loading/LoadingOverlay.d.ts.map

@@ -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"}
+{"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"}

package/lib/typescript/contexts/fonts.d.ts

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from 'react';
+import { MD3Typescale } from 'react-native-paper/lib/typescript/types';
+export interface ChempoFontsProviderProps {
+    fonts: MD3Typescale;
+}
+export declare const ChempoFontsContext: React.Context<ChempoFontsProviderProps | null>;
+export declare const ChempoFontsProvider: ({ children, fonts, }: PropsWithChildren<ChempoFontsProviderProps>) => React.JSX.Element;
+export declare const useChempoFonts: () => ChempoFontsProviderProps;
+//# sourceMappingURL=fonts.d.ts.map

package/lib/typescript/contexts/fonts.d.ts.map

@@ -0,0 +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"}

package/lib/typescript/contexts/root.d.ts

@@ -1,7 +1,8 @@
 import { BackendAdapterInterface, ColorMode, Theme } from '@chem-po/core';
 import { ChempoProps } from '@chem-po/react';
 import React, { FC, PropsWithChildren } from 'react';
-import { MD3Type, MD3TypescaleKey } from 'react-native-paper/lib/typescript/types';
+import { MD3TypescaleKey } from 'react-native-paper';
+import { MD3Type } from 'react-native-paper/lib/typescript/types';
 export type FontConfig = Partial<Record<MD3TypescaleKey, Partial<MD3Type>>>;
 export type MiddlewareProvider = FC<PropsWithChildren>;
 export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapterInterface> extends PropsWithChildren<Pick<ChempoProps<BackendAdapter>, 'backendAdapter' | 'assets'>> {
@@ -12,5 +13,5 @@ export interface ChempoNativeProviderProps<BackendAdapter extends BackendAdapter
     middlewareProvider?: MiddlewareProvider;
     insetNotifier?: boolean;
 }
-export declare const ChempoNativeProvider: <BackendAdapter extends BackendAdapterInterface>({ theme: themeProp, initialColorMode, children, fonts, colorModeProp, middlewareProvider: Middleware, insetNotifier, ...props }: ChempoNativeProviderProps<BackendAdapter>) => React.JSX.Element;
+export declare const ChempoNativeProvider: <BackendAdapter extends BackendAdapterInterface>({ theme: themeProp, initialColorMode, children, fonts: fontConfig, colorModeProp, middlewareProvider: Middleware, insetNotifier, ...props }: ChempoNativeProviderProps<BackendAdapter>) => React.JSX.Element;
 //# sourceMappingURL=root.d.ts.map

package/lib/typescript/contexts/root.d.ts.map

@@ -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"}
+{"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,EAAgC,MAAM,gBAAgB,CAAA;AAC1E,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAA;AAG7D,OAAO,EAEL,eAAe,EAGhB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAE,OAAO,EAA2B,MAAM,yCAAyC,CAAA;AAS1F,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;AA+GD,eAAO,MAAM,oBAAoB,GAAI,cAAc,SAAS,uBAAuB,EAAE,6IASlF,yBAAyB,CAAC,cAAc,CAAC,sBAiC3C,CAAA"}

package/lib/typescript/hooks/index.d.ts

@@ -1,2 +1,4 @@
+export * from './useFadeIn';
+export * from './useFont';
 export * from './useThemeState';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA"}

package/lib/typescript/hooks/useFont.d.ts

@@ -0,0 +1,6 @@
+export type FontFamilyType = 'display' | 'body' | 'label' | 'headline' | 'title';
+export type FontSize = 'lg' | 'md' | 'sm';
+export type FontSizeKey = 'Small' | 'Medium' | 'Large';
+export type FontKey = `${FontFamilyType}${FontSizeKey}`;
+export declare const useFont: (fontFamily: FontFamilyType, fontSize: FontSize) => import("react-native-paper/lib/typescript/types").MD3Type;
+//# sourceMappingURL=useFont.d.ts.map

package/lib/typescript/hooks/useFont.d.ts.map

@@ -0,0 +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

@@ -2,7 +2,7 @@
   "name": "@chem-po/react-native",
   "author": "Elan Canfield",
   "license": "MIT",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "source": "src/index.ts",
@@ -53,8 +53,8 @@
     "react-native-paper-dates": "^0.22.42",
     "react-native-svg": "15.11.2",
     "zustand": "^4.3.3",
-    "@chem-po/core": "0.0.39",
-    "@chem-po/react": "0.0.39"
+    "@chem-po/core": "0.0.41",
+    "@chem-po/react": "0.0.41"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package/src/components/button/ActionButton.tsx

@@ -1,21 +1,58 @@
-import { palette } from '@chem-po/core'
-import { useBackgroundColor } from '@chem-po/react'
-import React, { PropsWithChildren } from 'react'
-import { Pressable, StyleProp, StyleSheet, TextStyle, ViewStyle } from 'react-native'
+import { ElementSize } from '@chem-po/core'
+import { Ionicons } from '@expo/vector-icons'
+import React, { PropsWithChildren, useMemo } from 'react'
+import { StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
+import { Pressable } from 'react-native-gesture-handler'
+import { CircularProgressProps } from '../loading'
 import { WithLoadingOverlay } from '../loading/LoadingOverlay'
-import { Txt } from '../text'
+import { ButtonText } from './ButtonText'
+import {
+  useButtonBackgroundColor,
+  useButtonBorderColor,
+  useButtonColors,
+  useButtonTextColor,
+} from './hooks'
 
-export interface ActionButtonProps
-  extends PropsWithChildren<{
-    onPress: () => void
-    style?: StyleProp<ViewStyle>
-    disabled?: boolean
-    size?: 'lg' | 'md' | 'sm' | 'xs'
-  }> {
+export interface ActionButtonProps extends PropsWithChildren {
+  icon?: {
+    name: React.ComponentProps<typeof Ionicons>['name']
+    size?: number
+  }
+  iconProps?: React.ComponentProps<typeof Ionicons>
+  style?: StyleProp<ViewStyle>
+  onPress: () => void
+  disabled?: boolean
   textStyle?: StyleProp<TextStyle>
+  size?: ElementSize
+  color?: string
+  rippleColor?: string
+  variant?: 'outline' | 'solid'
   disabledColor?: string
   loading?: boolean
 }
+
+const getIndicatorSize = (size: ElementSize) => {
+  switch (size) {
+    case 'sm':
+      return 18
+    case 'md':
+      return 22
+    case 'lg':
+      return 26
+  }
+}
+
+const getContentGap = (size: ElementSize) => {
+  switch (size) {
+    case 'sm':
+      return 4
+    case 'lg':
+      return 8
+    default:
+      return 6
+  }
+}
+
 export const ActionButton = ({
   children,
   onPress,
@@ -24,32 +61,79 @@ export const ActionButton = ({
   disabled = false,
   loading,
   size = 'md',
-  disabledColor = palette.gray.medium,
+  disabledColor,
+  color: colorProp,
+  icon,
+  iconProps,
+  variant = 'solid',
+  rippleColor: rippleColorProp,
 }: ActionButtonProps) => {
-  const defaultBackgroundColor = useBackgroundColor(300)
-  const backgroundColor = disabled ? disabledColor : defaultBackgroundColor
+  const colors = useButtonColors(variant)
+  const rippleColor = useMemo(
+    () => rippleColorProp ?? colors.ripple,
+    [rippleColorProp, colors.ripple],
+  )
+  const textColor = useButtonTextColor(colors, variant, colorProp, disabled, disabledColor)
+  const backgroundColor = useButtonBackgroundColor(
+    colors,
+    variant,
+    colorProp,
+    disabled,
+    disabledColor,
+  )
+  const borderColor = useButtonBorderColor(colors, variant, colorProp, disabled, disabledColor)
+  const indicatorProps = useMemo<CircularProgressProps>(() => {
+    return { color: textColor, size: getIndicatorSize(size) }
+  }, [textColor, size])
+
   const body =
     typeof children === 'string' ? (
-      <Txt
-        style={[
-          textStyles[size],
-          { color: disabled ? disabledColor : defaultBackgroundColor },
-          textStyle,
-        ]}>
+      <ButtonText
+        variant={variant}
+        color={colorProp}
+        disabledColor={disabledColor}
+        disabled={disabled}
+        size={size}
+        style={textStyle}>
         {children}
-      </Txt>
+      </ButtonText>
     ) : (
       children
     )
+
+  const content = (
+    <View style={[styles.content, { gap: getContentGap(size) }]}>
+      {icon ? (
+        <Ionicons
+          name={icon.name}
+          size={icon.size ?? 20}
+          color={textColor}
+          {...iconProps}
+          style={[variant === 'solid' ? styles.iconShadow : {}, iconProps?.style]}
+        />
+      ) : null}
+      {body}
+    </View>
+  )
+
   return (
     <Pressable
-      style={[containerStyles.base, containerStyles[size], { backgroundColor }, style]}
+      style={[
+        containerStyles.base,
+        containerStyles[size],
+        variant === 'solid' ? styles.buttonShadow : { borderWidth: 1 },
+        { backgroundColor, borderColor },
+        style,
+      ]}
       onPress={onPress}
-      disabled={disabled}>
+      android_ripple={{ color: rippleColor }}
+      disabled={disabled || loading}>
       {loading !== undefined ? (
-        <WithLoadingOverlay loading={loading}>{body}</WithLoadingOverlay>
+        <WithLoadingOverlay loading={loading} indicatorProps={indicatorProps}>
+          {content}
+        </WithLoadingOverlay>
       ) : (
-        body
+        content
       )}
     </Pressable>
   )
@@ -63,6 +147,23 @@ const styles = StyleSheet.create({
   rounded: {
     borderRadius: 100,
   },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonShadow: {
+    shadowColor: '#000000',
+    shadowOffset: { width: 1, height: 1 },
+    shadowRadius: 6,
+    shadowOpacity: 0.25,
+    elevation: 2,
+  },
+  iconShadow: {
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 4,
+  },
 })
 
 const containerStyles = StyleSheet.create({
@@ -76,13 +177,13 @@ const containerStyles = StyleSheet.create({
     borderRadius: 5,
   },
   md: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
     borderRadius: 4,
   },
   sm: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
     borderRadius: 3,
   },
   xs: {
@@ -91,18 +192,3 @@ const containerStyles = StyleSheet.create({
     borderRadius: 2,
   },
 })
-
-const textStyles = StyleSheet.create({
-  lg: {
-    fontSize: 18,
-  },
-  md: {
-    fontSize: 16,
-  },
-  sm: {
-    fontSize: 14,
-  },
-  xs: {
-    fontSize: 12,
-  },
-})

package/src/components/button/ButtonText.tsx

@@ -0,0 +1,60 @@
+import { ElementSize } from '@chem-po/core'
+import React from 'react'
+import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native'
+import { useButtonColors, useButtonFont, useButtonTextColor } from './hooks'
+
+export interface ButtonTextProps {
+  children: string
+  style?: StyleProp<TextStyle>
+  variant?: 'outline' | 'solid'
+  color?: string
+  disabledColor?: string
+  disabled?: boolean
+  size?: ElementSize
+}
+
+export const ButtonText = ({
+  children,
+  style,
+  disabled = false,
+  size = 'md',
+  disabledColor,
+  color: colorProp,
+  variant = 'solid',
+}: ButtonTextProps) => {
+  const colors = useButtonColors(variant)
+  const fontStyle = useButtonFont(size)
+  const textColor = useButtonTextColor(colors, variant, colorProp, disabled, disabledColor)
+
+  return (
+    <Text
+      style={[
+        styles[size],
+        fontStyle,
+        variant === 'solid' ? styles.textShadow : {},
+        { color: textColor },
+        style,
+      ]}>
+      {children}
+    </Text>
+  )
+}
+const styles = StyleSheet.create({
+  lg: {
+    fontSize: 18,
+  },
+  md: {
+    fontSize: 16,
+  },
+  sm: {
+    fontSize: 14,
+  },
+  xs: {
+    fontSize: 12,
+  },
+  textShadow: {
+    textShadowColor: 'rgba(0, 0, 0, 0.25)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 3,
+  },
+})