cpk-ui 0.4.0 → 0.4.2

package/components/modals/AlertDialog/AlertDialog.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { type ReactElement } from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+export type AlertDialogSizeType = 'small' | 'medium' | 'large' | number;
 export type AlertDialogProps = {
     style?: StyleProp<ViewStyle>;
 };
@@ -13,12 +14,13 @@ export type AlertDialogStyles = {
 };
 export type AlertDialogOptions = {
     styles?: AlertDialogStyles;
-    title?: string | React.JSX.Element;
-    body?: string | React.JSX.Element;
+    title?: string | ReactElement;
+    body?: string | ReactElement;
     backdropOpacity?: number;
     closeOnTouchOutside?: boolean;
-    actions?: React.JSX.Element[];
+    actions?: ReactElement[];
     showCloseButton?: boolean;
+    size?: AlertDialogSizeType;
 };
 export type AlertDialogContext = {
     open(alertDialogOptions?: AlertDialogOptions): void;

package/components/modals/AlertDialog/AlertDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AA8ClE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpD,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;;AAwNF,wBAAyF"}
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAQZ,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AA6DlE,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,kBAAkB,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACpD,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;;AA+PF,wBAAyF"}

package/components/modals/AlertDialog/AlertDialog.js

@@ -16,7 +16,26 @@ const Container = styled.View `
 const AlertDialogContainer = styled.View `
   flex: 0.87;
   background-color: ${({ theme }) => theme.bg.basic};
-  padding: 20px 20px 28px 24px;
+  padding-top: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 1.25;
+    return $size === 'small' ? 16 : $size === 'large' ? 24 : 20;
+}};
+  padding-right: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 1.25;
+    return $size === 'small' ? 16 : $size === 'large' ? 24 : 20;
+}};
+  padding-bottom: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 1.75;
+    return $size === 'small' ? 22 : $size === 'large' ? 32 : 28;
+}};
+  padding-left: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 1.5;
+    return $size === 'small' ? 18 : $size === 'large' ? 28 : 24;
+}};
   border-radius: 8px;
 `;
 const TitleRow = styled.View `
@@ -25,11 +44,11 @@ const TitleRow = styled.View `
   align-items: center;
 `;
 const BodyRow = styled.View `
-  margin-top: 12px;
-  margin-bottom: 8px;
+  margin-top: ${({ $marginTop }) => $marginTop};
+  margin-bottom: ${({ $marginBottom }) => $marginBottom};
 `;
 const ActionRow = styled.View `
-  margin-top: 20px;
+  margin-top: ${({ $marginTop }) => $marginTop};
   padding-right: 4px;
   flex-direction: row;
 `;
@@ -64,7 +83,49 @@ function AlertDialog({ style }, ref) {
         open: handleOpen,
         close: handleClose,
     }), [handleOpen, handleClose]);
-    const { backdropOpacity = 0.2, title, body, styles, actions, closeOnTouchOutside = true, showCloseButton = true, } = options ?? {};
+    const { backdropOpacity = 0.2, title, body, styles, actions, closeOnTouchOutside = true, showCloseButton = true, size = 'medium', } = options ?? {};
+    // Calculate sizes based on size prop
+    const sizeConfig = useMemo(() => {
+        if (typeof size === 'number') {
+            return {
+                titleFontSize: size,
+                bodyFontSize: size * 0.875,
+                iconSize: size * 1.125,
+                actionMarginTop: size * 1.25,
+                bodyMarginTop: size * 0.75,
+                bodyMarginBottom: size * 0.5,
+            };
+        }
+        switch (size) {
+            case 'small':
+                return {
+                    titleFontSize: 14,
+                    bodyFontSize: 12,
+                    iconSize: 16,
+                    actionMarginTop: 16,
+                    bodyMarginTop: 10,
+                    bodyMarginBottom: 6,
+                };
+            case 'large':
+                return {
+                    titleFontSize: 18,
+                    bodyFontSize: 16,
+                    iconSize: 20,
+                    actionMarginTop: 24,
+                    bodyMarginTop: 14,
+                    bodyMarginBottom: 10,
+                };
+            default: // 'medium'
+                return {
+                    titleFontSize: 16,
+                    bodyFontSize: 14,
+                    iconSize: 18,
+                    actionMarginTop: 20,
+                    bodyMarginTop: 12,
+                    bodyMarginBottom: 8,
+                };
+        }
+    }, [size]);
     // Memoize backdrop color calculation
     const backdropColor = useMemo(() => themeType === 'light'
         ? `rgba(0,0,0,${backdropOpacity})`
@@ -76,14 +137,6 @@ function AlertDialog({ style }, ref) {
     } : {}, [theme.text.basic]);
     // Memoize container styles
     const containerStyles = useMemo(() => StyleSheet.flatten([shadowStyles, styles?.container]), [shadowStyles, styles?.container]);
-    // Memoize modal styles
-    const modalStyles = useMemo(() => [
-        css `
-      flex: 1;
-      align-self: stretch;
-    `,
-        style,
-    ], [style]);
     // Memoize backdrop press handler
     const handleBackdropPress = useCallback(() => {
         if (closeOnTouchOutside) {
@@ -93,29 +146,32 @@ function AlertDialog({ style }, ref) {
     // Memoize close button press handler
     const handleCloseButtonPress = useCallback(() => setVisible(false), []);
     // Memoize title content
-    const titleContent = useMemo(() => typeof title === 'string' ? (_jsx(Typography.Heading3, { style: styles?.title, children: title })) : (title), [title, styles?.title]);
+    const titleContent = useMemo(() => typeof title === 'string' ? (_jsx(Typography.Heading3, { style: [{ fontSize: sizeConfig.titleFontSize }, styles?.title], children: title })) : (title), [title, sizeConfig.titleFontSize, styles?.title]);
     // Memoize body content
-    const bodyContent = useMemo(() => typeof body === 'string' ? (_jsx(Typography.Body3, { style: styles?.body, children: body })) : (body), [body, styles?.body]);
+    const bodyContent = useMemo(() => typeof body === 'string' ? (_jsx(Typography.Body3, { style: [{ fontSize: sizeConfig.bodyFontSize }, styles?.body], children: body })) : (body), [body, sizeConfig.bodyFontSize, styles?.body]);
     // Memoize actions content
-    const actionsContent = useMemo(() => actions ? (_jsx(ActionRow, { style: styles?.actionContainer, children: actions.map((action, index) => cloneElement(action, {
+    const actionsContent = useMemo(() => actions ? (_jsx(ActionRow, { "$marginTop": sizeConfig.actionMarginTop, style: styles?.actionContainer, children: actions.map((action, index) => cloneElement(action, {
             key: `action-${index}`,
             style: {
                 flex: 1,
                 marginLeft: index !== 0 ? 12 : 0,
             },
-        })) })) : null, [actions, styles?.actionContainer]);
+        })) })) : null, [actions, sizeConfig.actionMarginTop, styles?.actionContainer]);
     // Memoize close button content
-    const closeButtonContent = useMemo(() => showCloseButton ? (_jsx(Button, { onPress: handleCloseButtonPress, borderRadius: 24, text: _jsx(Icon, { color: theme.text.basic, name: "X", size: 18 }), type: "text" })) : null, [showCloseButton, handleCloseButtonPress, theme.text.basic]);
+    const closeButtonContent = useMemo(() => showCloseButton ? (_jsx(Button, { onPress: handleCloseButtonPress, borderRadius: 24, text: _jsx(Icon, { color: theme.text.basic, name: "X", size: sizeConfig.iconSize }), type: "text" })) : null, [showCloseButton, handleCloseButtonPress, sizeConfig.iconSize, theme.text.basic]);
     const AlertDialogContent = useMemo(() => (_jsxs(Container, { style: css `
         background-color: ${backdropColor};
-      `, children: [_jsx(TouchableWithoutFeedback, { onPress: closeOnTouchOutside ? handleCloseButtonPress : undefined, children: _jsx(View, { style: StyleSheet.absoluteFill }) }), _jsxs(AlertDialogContainer, { accessibilityRole: "alert", accessibilityLabel: typeof title === 'string' ? title : 'Alert dialog', style: containerStyles, children: [_jsxs(TitleRow, { style: styles?.titleContainer, children: [titleContent, closeButtonContent] }), _jsx(BodyRow, { style: styles?.bodyContainer, children: bodyContent }), actionsContent] })] })), [
+      `, children: [_jsx(TouchableWithoutFeedback, { onPress: closeOnTouchOutside ? handleCloseButtonPress : undefined, children: _jsx(View, { style: StyleSheet.absoluteFill }) }), _jsxs(AlertDialogContainer, { "$size": size, accessibilityRole: "alert", accessibilityLabel: typeof title === 'string' ? title : 'Alert dialog', style: containerStyles, children: [_jsxs(TitleRow, { style: styles?.titleContainer, children: [titleContent, closeButtonContent] }), _jsx(BodyRow, { "$marginTop": sizeConfig.bodyMarginTop, "$marginBottom": sizeConfig.bodyMarginBottom, style: styles?.bodyContainer, children: bodyContent }), actionsContent] })] })), [
         backdropColor,
         closeOnTouchOutside,
         handleCloseButtonPress,
         title,
+        size,
         containerStyles,
         styles?.titleContainer,
         styles?.bodyContainer,
+        sizeConfig.bodyMarginTop,
+        sizeConfig.bodyMarginBottom,
         titleContent,
         closeButtonContent,
         bodyContent,
@@ -123,7 +179,7 @@ function AlertDialog({ style }, ref) {
     ]);
     return (
     // https://github.com/facebook/react-native/issues/48526#issuecomment-2579478884
-    _jsx(View, { children: _jsx(Modal, { animationType: "fade", style: modalStyles, transparent: true, visible: visible, children: closeOnTouchOutside ? (_jsx(TouchableWithoutFeedback, { onPress: handleBackdropPress, style: css `
+    _jsx(View, { style: style, children: _jsx(Modal, { animationType: "fade", transparent: true, visible: visible, children: closeOnTouchOutside ? (_jsx(TouchableWithoutFeedback, { onPress: handleBackdropPress, style: css `
               flex: 1;
             `, children: AlertDialogContent })) : (AlertDialogContent) }) }));
 }

package/components/modals/Snackbar/Snackbar.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { SnackbarTimer } from './const';
 import { ButtonColorType } from '../../uis/Button/Button';
+export type SnackbarSizeType = 'small' | 'medium' | 'large' | number;
 export type SnackbarProps = {
     style?: StyleProp<ViewStyle>;
 };
@@ -17,6 +18,7 @@ export type SnackbarOptions = {
     text?: string;
     actionText?: string;
     timer?: SnackbarTimer | number;
+    size?: SnackbarSizeType;
 };
 export type SnackbarContext = {
     open(snackbarOptions?: SnackbarOptions): void;

package/components/modals/Snackbar/Snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAC7F,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAIlE,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,EAAS,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAmChE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9C,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;;AA2JF,wBAAgF"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/modals/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2F,MAAM,OAAO,CAAC;AAChH,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAIlE,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AACtC,OAAO,EAAS,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAKhE,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAqCrE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,GAAG,MAAM,CAAC;IAC/B,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC9C,KAAK,IAAI,IAAI,CAAC;CACf,CAAC;;AA4LF,wBAAgF"}

package/components/modals/Snackbar/Snackbar.js

@@ -7,6 +7,11 @@ import { Button } from '../../uis/Button/Button';
 import { useTheme } from '../../../providers/ThemeProvider';
 import { Icon } from '../../uis/Icon/Icon';
 import { Typography } from '../../uis/Typography/Typography';
+const calculateSpacing = (size = 'medium') => {
+    if (typeof size === 'number')
+        return size * 0.75;
+    return size === 'small' ? 10 : size === 'large' ? 14 : 12;
+};
 const Container = styled(View) `
   flex: 1;
   align-self: stretch;
@@ -18,8 +23,8 @@ const SnackbarContainer = styled(SafeAreaView) `
   background-color: ${({ theme, $color }) => theme.button[$color].bg};
   border-radius: 8px;
   margin-bottom: 52px;
-  margin-left: 12px;
-  margin-right: 12px;
+  margin-left: ${({ $size }) => calculateSpacing($size)};
+  margin-right: ${({ $size }) => calculateSpacing($size)};
   align-self: flex-end;
 
   flex-direction: row;
@@ -31,7 +36,7 @@ const ActionContainer = styled(View) `
 const SnackbarText = styled(Typography.Body2) `
   color: ${({ theme, $color }) => theme.button[$color].text};
   flex: 1;
-  padding: 12px;
+  padding: ${({ $size }) => calculateSpacing($size)};
 `;
 let timer = null;
 function clearTimer() {
@@ -65,7 +70,33 @@ function Snackbar({ style }, ref) {
         open: handleOpen,
         close: handleClose,
     }), [handleOpen, handleClose]);
-    const { text, styles, actionText, color = 'primary' } = options ?? {};
+    const { text, styles, actionText, color = 'primary', size = 'medium' } = options ?? {};
+    // Calculate sizes based on size prop
+    const sizeConfig = useMemo(() => {
+        if (typeof size === 'number') {
+            return {
+                fontSize: size,
+                iconSize: size,
+            };
+        }
+        switch (size) {
+            case 'small':
+                return {
+                    fontSize: 12,
+                    iconSize: 14,
+                };
+            case 'large':
+                return {
+                    fontSize: 16,
+                    iconSize: 18,
+                };
+            default: // 'medium'
+                return {
+                    fontSize: 14,
+                    iconSize: 16,
+                };
+        }
+    }, [size]);
     // Memoize shadow styles
     const shadowStyles = useMemo(() => Platform.OS !== 'web' ? {
         shadowOffset: { width: 0, height: 4 },
@@ -77,9 +108,10 @@ function Snackbar({ style }, ref) {
     const textStyles = useMemo(() => StyleSheet.flatten([
         css `
         color: ${theme.button[color].text};
+        font-size: ${sizeConfig.fontSize}px;
       `,
         styles?.text,
-    ]), [theme.button, color, styles?.text]);
+    ]), [theme.button, color, sizeConfig.fontSize, styles?.text]);
     // Memoize action text styles
     const actionTextStyles = useMemo(() => StyleSheet.flatten([
         css `
@@ -97,10 +129,11 @@ function Snackbar({ style }, ref) {
     `,
         style,
     ], [style]);
-    const SnackbarContent = useMemo(() => (_jsx(Container, { children: _jsxs(SnackbarContainer, { "$color": color, style: containerStyles, children: [_jsx(SnackbarText, { "$color": color, style: textStyles, children: text }), _jsx(ActionContainer, { style: styles?.actionContainer, children: actionText ? (_jsx(Button, { onPress: handleActionPress, styles: {
+    const SnackbarContent = useMemo(() => (_jsx(Container, { children: _jsxs(SnackbarContainer, { "$color": color, "$size": size, style: containerStyles, children: [_jsx(SnackbarText, { "$color": color, "$size": size, style: textStyles, children: text }), _jsx(ActionContainer, { style: styles?.actionContainer, children: actionText ? (_jsx(Button, { onPress: handleActionPress, styles: {
                             text: actionTextStyles,
-                        }, text: actionText, type: "text" })) : (_jsx(Button, { onPress: handleActionPress, text: _jsx(Icon, { color: theme.button[color].text, name: "X" }), type: "text" })) })] }) })), [
+                        }, text: actionText, type: "text" })) : (_jsx(Button, { onPress: handleActionPress, text: _jsx(Icon, { color: theme.button[color].text, name: "X", size: sizeConfig.iconSize }), type: "text" })) })] }) })), [
         color,
+        size,
         containerStyles,
         textStyles,
         text,
@@ -108,6 +141,7 @@ function Snackbar({ style }, ref) {
         actionText,
         actionTextStyles,
         handleActionPress,
+        sizeConfig.iconSize,
         theme.button,
     ]);
     return (

package/components/uis/Accordion/Accordion.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { type ReactElement } from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { AccordionItemDataType } from './AccordionItem';
 type Styles = {
@@ -9,22 +9,24 @@ type Styles = {
     itemText?: StyleProp<TextStyle>;
     toggleElement?: StyleProp<ViewStyle>;
 };
+export type AccordionSizeType = 'small' | 'medium' | 'large' | number;
 export type AccordionBaseProps<T = string, K = string> = {
     data: AccordionItemDataType<T, K>[];
     style?: StyleProp<ViewStyle>;
     styles?: Styles;
+    size?: AccordionSizeType;
     shouldAnimate?: boolean;
     collapseOnStart?: boolean;
     animDuration?: number;
     activeOpacity?: number;
     toggleElementPosition?: 'left' | 'right';
-    toggleElement?: React.JSX.Element | null;
-    renderTitle?: (title: T) => React.JSX.Element;
-    renderItem?: (body: K) => React.JSX.Element;
+    toggleElement?: ReactElement | null;
+    renderTitle?: (title: T) => ReactElement;
+    renderItem?: (body: K) => ReactElement;
     onPressItem?: (title: T | string, body: K | string) => void;
 };
 export type AccordionProps<T = string, K = string> = AccordionBaseProps<T, K>;
-declare function Accordion<T, K>({ style, toggleElementPosition, data, ...rest }: AccordionProps<T, K>): React.JSX.Element;
+declare function Accordion<T, K>({ style, toggleElementPosition, size, data, ...rest }: AccordionProps<T, K>): ReactElement;
 declare const _default: typeof Accordion;
 export default _default;
 export { Accordion };

package/components/uis/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAIlE,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAO3D,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzC,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC9C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE9E,iBAAS,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,EACvB,KAAK,EACL,qBAA+B,EAC/B,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAoB1C;wBAGuC,OAAO,SAAS;AAAxD,wBAAyD;AACzD,OAAO,EAAC,SAAS,EAAC,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAU,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAIlE,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAO3D,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtE,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI;IACvD,IAAI,EAAE,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzC,aAAa,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,YAAY,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,YAAY,CAAC;IACvC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM,EAAE,IAAI,EAAE,CAAC,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,MAAM,IAAI,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE9E,iBAAS,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,EACvB,KAAK,EACL,qBAA+B,EAC/B,IAAe,EACf,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CAqBrC;wBAGuC,OAAO,SAAS;AAAxD,wBAAyD;AACzD,OAAO,EAAC,SAAS,EAAC,CAAC"}

package/components/uis/Accordion/Accordion.js

@@ -6,9 +6,9 @@ import { AccordionItem } from './AccordionItem';
 const Container = styled(View) `
   flex-direction: column;
 `;
-function Accordion({ style, toggleElementPosition = 'right', data, ...rest }) {
+function Accordion({ style, toggleElementPosition = 'right', size = 'medium', data, ...rest }) {
     // Memoize accordion items rendering
-    const accordionItems = useMemo(() => data.map((datum, titleKey) => (_jsx(AccordionItem, { data: datum, testID: `${titleKey}`, toggleElementPosition: toggleElementPosition, ...rest }, titleKey))), [data, toggleElementPosition, rest]);
+    const accordionItems = useMemo(() => data.map((datum, titleKey) => (_jsx(AccordionItem, { data: datum, testID: `${titleKey}`, toggleElementPosition: toggleElementPosition, size: size, ...rest }, titleKey))), [data, toggleElementPosition, size, rest]);
     return (_jsx(Container, { style: style, children: accordionItems }));
 }
 // Export memoized component for better performance

package/components/uis/Accordion/AccordionItem.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { type ReactElement } from 'react';
 import type { AccordionBaseProps } from './Accordion';
 export type AccordionItemDataType<T, K> = {
     title: T;
@@ -8,7 +8,7 @@ type Props<T, K> = Omit<AccordionBaseProps<T, K>, 'data' | 'style'> & {
     testID: string;
     data: AccordionItemDataType<string, string> | AccordionItemDataType<T, K>;
 };
-export declare function AccordionItem<T, K>({ testID, data: data, shouldAnimate, collapseOnStart, animDuration, activeOpacity, toggleElement, toggleElementPosition, onPressItem, renderTitle, renderItem, styles, }: Props<T, K>): React.JSX.Element;
+export declare function AccordionItem<T, K>({ testID, data: data, size, shouldAnimate, collapseOnStart, animDuration, activeOpacity, toggleElement, toggleElementPosition, onPressItem, renderTitle, renderItem, styles, }: Props<T, K>): ReactElement;
 declare const _default: typeof AccordionItem;
 export default _default;
 //# sourceMappingURL=AccordionItem.d.ts.map

package/components/uis/Accordion/AccordionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAQ/E,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AAwBpD,MAAM,MAAM,qBAAqB,CAAC,CAAC,EAAE,CAAC,IAAI;IACxC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC3E,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,EAClC,MAAM,EACN,IAAI,EAAE,IAAI,EACV,aAAoB,EACpB,eAAsB,EACtB,YAAkB,EAClB,aAAiB,EACjB,aAAyD,EACzD,qBAAqB,EACrB,WAAW,EACX,WAAW,EACX,UAAU,EACV,MAAM,GACP,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuLjC;wBAG2C,OAAO,aAAa;AAAhE,wBAAiE"}
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Accordion/AccordionItem.tsx"],"names":[],"mappings":"AACA,OAAc,EAAoD,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AAQlG,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,aAAa,CAAC;AA+DpD,MAAM,MAAM,qBAAqB,CAAC,CAAC,EAAE,CAAC,IAAI;IACxC,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,CAAC,EAAE,CAAC;CACZ,CAAC;AAEF,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CAC3E,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,EAAE,EAClC,MAAM,EACN,IAAI,EAAE,IAAI,EACV,IAAe,EACf,aAAoB,EACpB,eAAsB,EACtB,YAAkB,EAClB,aAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,WAAW,EACX,UAAU,EACV,MAAM,GACP,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,YAAY,CA8M5B;wBAG2C,OAAO,aAAa;AAAhE,wBAAiE"}

package/components/uis/Accordion/AccordionItem.js

@@ -6,25 +6,77 @@ import { styled, css } from 'kstyled';
 import { Icon } from '../Icon/Icon';
 import { Typography } from '../Typography/Typography';
 const TitleTouch = styled(TouchableOpacity) `
-  height: 48px;
+  height: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 2.4;
+    return $size === 'small' ? 40 : $size === 'large' ? 56 : 48;
+}};
   background-color: ${({ theme }) => theme.bg.basic};
 
   flex-direction: row;
   align-items: center;
-  padding: 8px 12px;
+  padding-top: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 0.4;
+    return $size === 'small' ? 6 : $size === 'large' ? 10 : 8;
+}};
+  padding-bottom: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 0.4;
+    return $size === 'small' ? 6 : $size === 'large' ? 10 : 8;
+}};
+  padding-left: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 0.6;
+    return $size === 'small' ? 10 : $size === 'large' ? 14 : 12;
+}};
+  padding-right: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 0.6;
+    return $size === 'small' ? 10 : $size === 'large' ? 14 : 12;
+}};
 `;
 const StyledIcon = styled(Icon) `
   color: ${({ theme }) => theme.text.basic};
   font-weight: bold;
+  font-size: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 0.7;
+    return $size === 'small' ? 12 : $size === 'large' ? 16 : 14;
+}};
 `;
 const ItemTouch = styled(TouchableOpacity) `
   background-color: ${({ theme }) => theme.bg.paper};
-  padding: 8px 12px;
+  padding-top: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 0.4;
+    return $size === 'small' ? 6 : $size === 'large' ? 10 : 8;
+}};
+  padding-bottom: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 0.4;
+    return $size === 'small' ? 6 : $size === 'large' ? 10 : 8;
+}};
+  padding-left: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 0.6;
+    return $size === 'small' ? 10 : $size === 'large' ? 14 : 12;
+}};
+  padding-right: ${({ $size = 'medium' }) => {
+    if (typeof $size === 'number')
+        return $size * 0.6;
+    return $size === 'small' ? 10 : $size === 'large' ? 14 : 12;
+}};
 
   flex-direction: row;
   align-items: center;
 `;
-export function AccordionItem({ testID, data: data, shouldAnimate = true, collapseOnStart = true, animDuration = 200, activeOpacity = 1, toggleElement = _jsx(StyledIcon, { name: "CaretDown", size: 14 }), toggleElementPosition, onPressItem, renderTitle, renderItem, styles, }) {
+export function AccordionItem({ testID, data: data, size = 'medium', shouldAnimate = true, collapseOnStart = true, animDuration = 200, activeOpacity = 1, toggleElement, toggleElementPosition, onPressItem, renderTitle, renderItem, styles, }) {
+    // Calculate icon size based on accordion size
+    const iconSize = typeof size === 'number'
+        ? size * 0.7
+        : size === 'small' ? 12 : size === 'large' ? 16 : 14;
+    const defaultToggleElement = _jsx(StyledIcon, { name: "CaretDown", "$size": size, size: iconSize });
     const dropDownAnimValueRef = useRef(new Animated.Value(0));
     const rotateAnimValueRef = useRef(new Animated.Value(0));
     const fadeItemAnim = useRef(new Animated.Value(0)).current;
@@ -69,10 +121,14 @@ export function AccordionItem({ testID, data: data, shouldAnimate = true, collap
     const handleLayout = useCallback((e) => {
         setItemHeight(e.nativeEvent.layout.height);
     }, []);
+    // Calculate margin based on size
+    const toggleMargin = typeof size === 'number'
+        ? size * 0.6
+        : size === 'small' ? 10 : size === 'large' ? 14 : 12;
     // Memoize toggle element container
     const toggleElContainer = useMemo(() => (_jsx(Animated.View, { style: [
             css `
-          margin-right: ${toggleElementPosition === 'left' ? '12px' : 0};
+          margin-right: ${toggleElementPosition === 'left' ? toggleMargin : 0}px;
         `,
             {
                 transform: [
@@ -85,7 +141,7 @@ export function AccordionItem({ testID, data: data, shouldAnimate = true, collap
                 ],
             },
             styles?.toggleElement,
-        ], children: toggleElement })), [toggleElement, toggleElementPosition, styles?.toggleElement]);
+        ], children: toggleElement || defaultToggleElement })), [toggleElement, defaultToggleElement, toggleElementPosition, toggleMargin, styles?.toggleElement]);
     // Memoize container styles
     const containerStyles = useMemo(() => [
         css `
@@ -113,10 +169,17 @@ export function AccordionItem({ testID, data: data, shouldAnimate = true, collap
             }),
         },
     ], [fadeItemAnim, itemHeight]);
+    // Calculate font sizes based on size prop
+    const titleFontSize = typeof size === 'number'
+        ? size
+        : size === 'small' ? 14 : size === 'large' ? 18 : 16;
+    const itemFontSize = typeof size === 'number'
+        ? size * 0.875
+        : size === 'small' ? 12 : size === 'large' ? 16 : 14;
     return (_jsxs(Animated.View, { style: containerStyles, children: [_jsx(View, { onLayout: handleLayout, style: css `
           position: absolute;
           opacity: 0;
-        `, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, onPress: () => handleItemPress(body), children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: styles?.itemText, children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsx(Animated.View, { accessibilityState: { expanded: !collapsed }, style: animatedItemStyles, testID: `body-${testID}`, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, onPress: () => handleItemPress(body), style: styles?.itemContainer, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: styles?.itemText, children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsxs(TitleTouch, { activeOpacity: activeOpacity, onPress: handleToggle, accessibilityRole: "button", accessibilityLabel: typeof data.title === 'string' ? data.title : 'Accordion section', accessibilityState: { expanded: !collapsed }, accessibilityHint: collapsed ? 'Double tap to expand' : 'Double tap to collapse', style: titleContainerStyles, testID: `title-${testID}`, children: [toggleElementPosition === 'left' ? toggleElContainer : null, typeof data.title === 'string' && !renderTitle ? (_jsx(Typography.Heading4, { style: styles?.titleText, children: data.title })) : (renderTitle?.(data.title)), toggleElementPosition === 'right' ? toggleElContainer : null] })] }));
+        `, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, onPress: () => handleItemPress(body), "$size": size, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: [{ fontSize: itemFontSize }, styles?.itemText], children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsx(Animated.View, { accessibilityState: { expanded: !collapsed }, style: animatedItemStyles, testID: `body-${testID}`, children: data.items.map((body, index) => (_jsx(ItemTouch, { activeOpacity: activeOpacity, onPress: () => handleItemPress(body), style: styles?.itemContainer, "$size": size, children: typeof body === 'string' && !renderItem ? (_jsx(Typography.Body3, { style: [{ fontSize: itemFontSize }, styles?.itemText], children: body })) : (renderItem?.(body)) }, `body-${index}`))) }), _jsxs(TitleTouch, { activeOpacity: activeOpacity, onPress: handleToggle, accessibilityRole: "button", accessibilityLabel: typeof data.title === 'string' ? data.title : 'Accordion section', accessibilityState: { expanded: !collapsed }, accessibilityHint: collapsed ? 'Double tap to expand' : 'Double tap to collapse', style: titleContainerStyles, testID: `title-${testID}`, "$size": size, children: [toggleElementPosition === 'left' ? toggleElContainer : null, typeof data.title === 'string' && !renderTitle ? (_jsx(Typography.Heading4, { style: [{ fontSize: titleFontSize }, styles?.titleText], children: data.title })) : (renderTitle?.(data.title)), toggleElementPosition === 'right' ? toggleElContainer : null] })] }));
 }
 // Export memoized component for better performance
 export default React.memo(AccordionItem);

package/components/uis/Button/Button.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+import { type ReactElement } from 'react';
 import type { Insets, StyleProp, TextStyle, TouchableHighlightProps, ViewStyle } from 'react-native';
 import * as Haptics from 'expo-haptics';
 export type ButtonType = 'text' | 'solid' | 'outlined';
 export type ButtonColorType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light';
-export type ButtonSizeType = 'small' | 'medium' | 'large';
+export type ButtonSizeType = 'small' | 'medium' | 'large' | number;
 export type Props = {
     testID?: string;
     type?: ButtonType;
@@ -12,11 +12,11 @@ export type Props = {
     disabled?: boolean;
     loading?: boolean;
     loadingColor?: string;
-    loadingElement?: React.JSX.Element;
-    text?: string | React.JSX.Element;
+    loadingElement?: ReactElement;
+    text?: string | ReactElement;
     borderRadius?: number;
-    startElement?: React.JSX.Element;
-    endElement?: React.JSX.Element;
+    startElement?: ReactElement;
+    endElement?: ReactElement;
     style?: StyleProp<Omit<ViewStyle, 'borderRadius' | 'padding'>>;
     styles?: Styles;
     onPress?: TouchableHighlightProps['onPress'];
@@ -34,7 +34,7 @@ type Styles = {
     disabledText?: StyleProp<TextStyle>;
     hovered?: StyleProp<ViewStyle>;
 };
-export declare function Button({ testID, type, color, size, disabled, loading, loadingElement, text, startElement, endElement, style, styles, onPress, activeOpacity, touchableHighlightProps, borderRadius, loadingColor, hitSlop, hapticFeedback, }: Props): React.JSX.Element;
+export declare function Button({ testID, type, color, size, disabled, loading, loadingElement, text, startElement, endElement, style, styles, onPress, activeOpacity, touchableHighlightProps, borderRadius, loadingColor, hitSlop, hapticFeedback, }: Props): ReactElement;
 declare const _default: typeof Button;
 export default _default;
 //# sourceMappingURL=Button.d.ts.map

package/components/uis/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EACV,MAAM,EACN,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,SAAS,EACV,MAAM,cAAc,CAAC;AAUtB,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AACvD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACzD,uBAAuB,CAAC,EAAE,IAAI,CAC5B,uBAAuB,EACvB,SAAS,GAAG,eAAe,GAAG,OAAO,CACtC,CAAC;IACF,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC;CAC9C,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AA8JF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,IAAc,EACd,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,OAAe,EACf,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAmB,EACnB,uBAAuB,EACvB,YAAgB,EAChB,YAAY,EACZ,OAAgD,EAChD,cAAc,GACf,EAAE,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA6L3B;wBAGoC,OAAO,MAAM;AAAlD,wBAAmD"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/uis/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAc,EAA+B,KAAK,YAAY,EAAC,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EACV,MAAM,EACN,SAAS,EACT,SAAS,EACT,uBAAuB,EACvB,SAAS,EACV,MAAM,cAAc,CAAC;AAUtB,OAAO,KAAK,OAAO,MAAM,cAAc,CAAC;AAExC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;AACvD,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACzD,uBAAuB,CAAC,EAAE,IAAI,CAC5B,uBAAuB,EACvB,SAAS,GAAG,eAAe,GAAG,OAAO,CACtC,CAAC;IACF,OAAO,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC;CAC9C,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAChC,CAAC;AAgKF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,IAAc,EACd,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,OAAe,EACf,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,OAAO,EACP,aAAmB,EACnB,uBAAuB,EACvB,YAAgB,EAChB,YAAY,EACZ,OAAgD,EAChD,cAAc,GACf,EAAE,KAAK,GAAG,YAAY,CA6LtB;wBAGoC,OAAO,MAAM;AAAlD,wBAAmD"}

package/components/uis/Button/Button.js

@@ -19,13 +19,15 @@ const calculateStyles = ({ theme, type, color, size, loading, disabled, borderRa
     const isDisabled = disabled || loading;
     const padding = type === 'text'
         ? '8px'
-        : size === 'large'
-            ? '16px 24px'
-            : size === 'medium'
-                ? '12px 24px'
-                : size === 'small'
-                    ? '8px 16px'
-                    : '12px 24px';
+        : typeof size === 'number'
+            ? `${size * 0.6}px ${size * 1.2}px`
+            : size === 'large'
+                ? '16px 24px'
+                : size === 'medium'
+                    ? '12px 24px'
+                    : size === 'small'
+                        ? '8px 16px'
+                        : '12px 24px';
     const borderWidth = type === 'outlined' ? 1 : 0;
     const backgroundColor = type === 'solid'
         ? isDisabled

package/components/uis/Checkbox/Checkbox.d.ts

@@ -1,22 +1,25 @@
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { type ReactElement } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 type Styles = {
     container?: StyleProp<ViewStyle>;
     checkbox?: StyleProp<ViewStyle>;
     check?: ViewStyle;
+    text?: StyleProp<TextStyle>;
 };
 export type CheckboxColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+export type CheckboxSizeType = 'small' | 'medium' | 'large' | number;
 export interface CheckboxProps {
     onPress?: () => void;
     style?: StyleProp<ViewStyle>;
     styles?: Styles;
     color?: CheckboxColor;
+    size?: CheckboxSizeType;
     disabled?: boolean;
     checked?: boolean;
-    endElement?: React.JSX.Element;
-    startElement?: React.JSX.Element;
+    text?: string | ReactElement;
+    direction?: 'left' | 'right';
 }
-export declare function Checkbox({ style, styles, endElement, startElement, color, disabled, checked, onPress, }: CheckboxProps): React.JSX.Element;
+export declare function Checkbox({ style, styles, text, direction, color, size, disabled, checked, onPress, }: CheckboxProps): ReactElement;
 declare const _default: typeof Checkbox;
 export default _default;
 //# sourceMappingURL=Checkbox.d.ts.map