@evlop/native-components 1.0.253 → 1.0.255

package/README.md

@@ -0,0 +1,456 @@
+# Native Components
+
+A collection of React Native components with styled-system integration for building beautiful, consistent UI. These components are designed for use with AI-powered code generation tools.
+
+## Installation
+
+```bash
+npm install @evlop/native-components
+```
+
+## Quick Start
+
+```tsx
+import { Box, Flexbox, Text, Icon, Button, Actionable, Image, ImageBackground, Swiper, triggerHapticFeedback } from 'types-for-ai';
+```
+
+---
+
+## Components & Use Cases
+
+### 📦 Box
+
+A styled `View` component with support for layout, spacing, borders, colors, and positioning.
+
+```tsx
+// Basic container
+<Box padding={16} backgroundColor="white" borderRadius={8}>
+  <Text>Content</Text>
+</Box>
+
+// Card with shadow effect
+<Box 
+  margin={16}
+  padding={20}
+  backgroundColor="white"
+  borderRadius={12}
+  borderWidth={1}
+  borderColor="gray-200"
+>
+  <Text>Card Content</Text>
+</Box>
+
+// Absolute positioned overlay
+<Box position="absolute" top={0} left={0} right={0} bottom={0} opacity={0.5} backgroundColor="black" />
+```
+
+**Props:** All React Native `ViewProps` + `flexbox`, `border`, `layout`, `color`, `background`, `space`, `opacity`, `position`
+
+---
+
+### 🧩 Flexbox
+
+A flexbox container with default `flexDirection: 'row'` and gap support.
+
+```tsx
+// Horizontal row with items
+<Flexbox flexDirection="row" justifyContent="space-between" alignItems="center" gap={12}>
+  <Icon icon="home" />
+  <Text>Home</Text>
+</Flexbox>
+
+// Vertical stack
+<Flexbox flexDirection="column" gap={8} padding={16}>
+  <Text>Item 1</Text>
+  <Text>Item 2</Text>
+  <Text>Item 3</Text>
+</Flexbox>
+
+// Grid-like layout
+<Flexbox flexWrap="wrap" gap={16} rowGap={8} columnGap={12}>
+  {items.map(item => <Box key={item.id} width="48%">{item.name}</Box>)}
+</Flexbox>
+```
+
+**Props:** All `Box` props + `gap`, `rowGap`, `columnGap`
+
+---
+
+### ✏️ Text
+
+A styled text component with typography support, theme variants, and template rendering.
+
+```tsx
+// Basic text
+<Text color="gray-900" fontSize={16}>Hello World</Text>
+
+// Styled heading
+<Text fontWeight="Bold" fontSize={24} color="primary">
+  Welcome Back!
+</Text>
+
+// Using theme variants
+<Text variant="heading">Heading Text</Text>
+<Text variant="body">Body text content</Text>
+
+// Font scaling (relative to base font size)
+<Text fontScale={1.5}>Larger Text</Text>
+
+// Dynamic template content (supports handlebars)
+<Text content="Hello, {{user.name}}!" />
+```
+
+**Props:** `color`, `fontSize`, `fontWeight`, `fontScale`, `textAlign`, `variant`, `content` + standard `TextProps`
+
+---
+
+### 🎨 Icon
+
+Display icons from various icon libraries with RTL support.
+
+```tsx
+// Basic icon
+<Icon icon="home" size={24} color="primary" />
+
+// Different sizes
+<Icon icon="settings" size={32} color="gray-600" />
+
+// With press handler
+<Icon icon="close" onPress={() => navigation.goBack()} />
+
+// RTL flip support (for directional icons like arrows)
+<Icon icon="arrow-right" flipOnRTL />
+
+// Supported icon libraries:
+// - material-icons
+// - material-community-icons
+// - font-awesome-6
+// - ionicons
+// - simple-line-icons
+// - evilicons
+// - octicons
+// - svg (custom SVG URLs)
+```
+
+**Props:** `icon`, `size`, `color`, `flipOnRTL`, `onPress`
+
+---
+
+### 🔘 Button
+
+A styled button with multiple variants, sizes, loading states, and icon support.
+
+```tsx
+// Filled button (default)
+<Button label="Get Started" color="primary" action={myAction} />
+
+// Outlined button
+<Button label="Learn More" variant="outlined" color="secondary" />
+
+// Ghost button (no background)
+<Button label="Cancel" variant="ghost" color="gray-600" />
+
+// Dim outlined (subtle border)
+<Button label="Optional" variant="dim-outlined" color="primary" />
+
+// Dim filled outlined (subtle background + border)
+<Button label="Soft CTA" variant="dim-filled-outlined" color="primary" />
+
+// With icon
+<Button label="Add Item" icon="plus" iconPosition="left" color="primary" />
+<Button label="Next" icon="arrow-right" iconPosition="right" />
+
+// Different sizes
+<Button label="Small" size="sm" />
+<Button label="Medium" size="md" />
+<Button label="Large" size="lg" />
+<Button label="Extra Large" size="xl" />
+<Button label="2X Large" size="2xl" />
+
+// Loading state
+<Button label="Submitting..." loading={true} />
+
+// Disabled state
+<Button label="Unavailable" disabled={true} />
+```
+
+**Variants:** `filled`, `outlined`, `dim-outlined`, `dim-filled-outlined`, `ghost`  
+**Sizes:** `sm`, `md`, `lg`, `xl`, `2xl`  
+**Props:** `label`, `variant`, `size`, `color`, `textColor`, `icon`, `iconPosition`, `loading`, `disabled`, `action`
+
+---
+
+### 👆 Actionable
+
+A pressable wrapper with press effects and haptic feedback support.
+
+```tsx
+// Basic actionable area
+<Actionable action={navigateAction}>
+  <Text>Tap me</Text>
+</Actionable>
+
+// With scale press effect
+<Actionable action={myAction} pressEffect="scale">
+  <Box padding={16}><Text>Press to scale</Text></Box>
+</Actionable>
+
+// With opacity press effect
+<Actionable pressEffect="opacity" action={myAction}>
+  <Image src="card-image.jpg" />
+</Actionable>
+
+// With haptic feedback
+<Actionable action={myAction} hapticFeedback="impactMedium">
+  <Text>Haptic button</Text>
+</Actionable>
+
+// Combined effects
+<Actionable 
+  action={addToCartAction}
+  pressEffect="bounce"
+  hapticFeedback="impactLight"
+>
+  <Box backgroundColor="primary" padding={12} borderRadius={8}>
+    <Text color="white">Add to Cart</Text>
+  </Box>
+</Actionable>
+```
+
+**Press Effects:**
+- `none` - No visual effect
+- `opacity` - Fades on press
+- `scale` - Shrinks slightly on press
+- `scale-opacity` - Combines scale and opacity
+- `bounce` - Bouncy spring effect
+- `tilt-left` / `tilt-right` - Tilts on press
+- `pulse` - Pulsing animation
+- `jelly` - Elastic jelly effect
+- `rubberBand` - Rubber band stretch effect
+- `glow` - Glowing highlight effect
+- `press-in` - 3D press-in effect
+- `swing` - Swinging rotation
+
+**Haptic Types:** `impactLight`, `impactMedium`, `impactHeavy`, `rigid`, `soft`, `notificationSuccess`, `notificationWarning`, `notificationError`
+
+---
+
+### 🖼️ Image
+
+A styled image component with preset sizes and template URL support.
+
+```tsx
+// Basic image
+<Image src="https://example.com/image.jpg" />
+
+// Using preset sizes
+<Image src="product.jpg" size="md" />
+<Image src="avatar.jpg" size="xs" />
+<Image src="banner.jpg" size="fluid" />
+
+// Custom dimensions
+<Image src="photo.jpg" width={200} height={150} />
+
+// With aspect ratio
+<Image src="video-thumb.jpg" aspectRatio={16/9} />
+
+// Resize modes
+<Image src="cover.jpg" resizeMode="cover" />
+<Image src="contain.jpg" resizeMode="contain" />
+
+// With placeholder fallback
+<Image src="{{product.image}}" placeholder="default-product.jpg" />
+
+// Dynamic URL with template
+<Image src="{{baseUrl}}/images/{{product.id}}.jpg" />
+```
+
+**Preset Sizes:** `3xs` (15px), `2xs` (35px), `xs` (50px), `sm` (75px), `md` (150px), `lg` (275px), `xl` (300px), `2xl` (400px), `3xl` (480px), `fluid` (100%)
+
+**Props:** `src`, `placeholder`, `size`, `width`, `height`, `aspectRatio`, `resizeMode`
+
+---
+
+### 🖼️ ImageBackground
+
+An image that can contain child elements, perfect for hero sections and cards.
+
+```tsx
+// Hero section
+<ImageBackground 
+  src="hero-bg.jpg" 
+  height={300}
+  justifyContent="center"
+  alignItems="center"
+>
+  <Text color="white" fontSize={32} fontWeight="Bold">
+    Welcome
+  </Text>
+</ImageBackground>
+
+// Card with background
+<ImageBackground 
+  src="{{product.coverImage}}"
+  aspectRatio={16/9}
+  borderRadius={12}
+  overflow="hidden"
+>
+  <Box position="absolute" bottom={0} left={0} right={0} padding={16} backgroundColor="rgba(0,0,0,0.5)">
+    <Text color="white">Product Name</Text>
+  </Box>
+</ImageBackground>
+
+// With template URL and placeholder
+<ImageBackground 
+  src="{{user.coverPhoto}}"
+  placeholder="default-cover.jpg"
+  height={200}
+>
+  {children}
+</ImageBackground>
+```
+
+**Props:** `src`, `placeholder`, all `Box` layout/styling props
+
+---
+
+### 🎠 Swiper
+
+A horizontal carousel/slider with multiple pagination styles and autoplay support.
+
+```tsx
+// Basic swiper
+<Swiper
+  data={slides}
+  renderItem={({ item }) => (
+    <Image src={item.image} width="100%" aspectRatio={16/9} />
+  )}
+/>
+
+// With autoplay
+<Swiper
+  data={banners}
+  autoplay
+  autoplayInterval={3000}
+  renderItem={({ item }) => <BannerCard banner={item} />}
+/>
+
+// Different pagination styles
+<Swiper data={items} paginationType="dot" />
+<Swiper data={items} paginationType="dash" />
+<Swiper data={items} paginationType="line" />
+<Swiper data={items} paginationType="number" />
+
+// Custom item width
+<Swiper
+  data={cards}
+  itemWidth={280}
+  renderItem={({ item }) => <ProductCard product={item} />}
+/>
+
+// With index change callback
+<Swiper
+  data={onboardingScreens}
+  onIndexChange={(index) => setCurrentStep(index)}
+  renderItem={({ item }) => <OnboardingSlide {...item} />}
+/>
+
+// Using ref for programmatic control
+const swiperRef = useRef();
+<Swiper ref={swiperRef} data={items} />
+<Button label="Next" action={() => swiperRef.current.scrollToIndex(2)} />
+```
+
+**Pagination Types:** `dash`, `dot`, `line`, `number`  
+**Props:** `data`, `renderItem`, `autoplay`, `autoplayInterval`, `paginationType`, `paginationStyle`, `itemWidth`, `onIndexChange`
+
+---
+
+### 📳 triggerHapticFeedback
+
+A utility function to trigger haptic feedback on supported devices.
+
+```tsx
+import { triggerHapticFeedback } from 'types-for-ai';
+
+// On button press
+const handlePress = () => {
+  triggerHapticFeedback('impactMedium');
+  // ... do something
+};
+
+// Success notification
+const onSuccess = () => {
+  triggerHapticFeedback('notificationSuccess');
+};
+
+// Error feedback
+const onError = () => {
+  triggerHapticFeedback('notificationError');
+};
+
+// Light tap feedback
+triggerHapticFeedback('impactLight');
+
+// Heavy impact
+triggerHapticFeedback('impactHeavy');
+```
+
+**Haptic Types:**
+- `impactLight` - Light tap
+- `impactMedium` - Medium tap
+- `impactHeavy` - Heavy tap
+- `rigid` - Rigid impact
+- `soft` - Soft impact
+- `notificationSuccess` - Success notification pattern
+- `notificationWarning` - Warning notification pattern
+- `notificationError` - Error notification pattern
+
+---
+
+## Styled System Props Reference
+
+All components support [styled-system](https://styled-system.com/) props:
+
+| Category | Props |
+|----------|-------|
+| **Space** | `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `m`, `mt`, `mr`, `mb`, `ml`, `p`, `pt`, `pr`, `pb`, `pl` |
+| **Layout** | `width`, `height`, `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `overflow` |
+| **Flexbox** | `flex`, `flexDirection`, `flexWrap`, `justifyContent`, `alignItems`, `alignSelf` |
+| **Border** | `border`, `borderWidth`, `borderColor`, `borderRadius`, `borderTop`, `borderRight`, `borderBottom`, `borderLeft` |
+| **Color** | `color`, `backgroundColor`, `bg`, `opacity` |
+| **Position** | `position`, `top`, `right`, `bottom`, `left`, `zIndex` |
+| **Typography** | `fontSize`, `fontWeight`, `textAlign`, `lineHeight`, `fontFamily` |
+
+---
+
+## Theme Integration
+
+Components automatically use theme values from your styled-components `ThemeProvider`:
+
+```tsx
+const theme = {
+  colors: {
+    primary: '#6366f1',
+    secondary: '#8b5cf6',
+    'gray-100': '#f3f4f6',
+    'gray-900': '#111827',
+  },
+  space: [0, 4, 8, 16, 24, 32, 48, 64],
+  fontWeights: {
+    Regular: '400',
+    Medium: '500',
+    Bold: '700',
+  },
+};
+
+<ThemeProvider theme={theme}>
+  <App />
+</ThemeProvider>
+```
+
+---
+
+## License
+
+MIT

package/dist/cjs/src/Actionable.d.ts

@@ -2,7 +2,7 @@ import { Action } from '@evlop/commons';
 import React from 'react';
 import { PressableProps } from 'react-native';
 import { HapticType } from './utils/haptic';
-declare type EffectType = 'none' | 'shrink' | 'dim' | 'shrink-dim' | 'push-down' | 'gentle-shrink' | 'tilt' | 'bounce' | 'squeeze' | 'pop' | 'wobble';
+import { EffectType } from './hooks/useAnimatedPress';
 export interface BaseActionableProps extends PressableProps {
     pressEffect?: EffectType;
     hapticFeedback?: HapticType;

package/dist/cjs/src/Actionable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Actionable.d.ts","sourceRoot":"","sources":["../../../src/Actionable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA2B,MAAM,gBAAgB,CAAC;AACjE,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAA8C,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAyB,MAAM,gBAAgB,CAAC;AAInE,aAAK,UAAU,GACT,MAAM,GACN,QAAQ,GACR,KAAK,GACL,YAAY,GACZ,WAAW,GACX,eAAe,GACf,MAAM,GACN,QAAQ,GACR,SAAS,GACT,KAAK,GACL,QAAQ,CAAC;AAEf,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACvD,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAmLD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAsBnE,CAAA;;;;;;;;;;AAED,wBAImB"}
+{"version":3,"file":"Actionable.d.ts","sourceRoot":"","sources":["../../../src/Actionable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAA2B,MAAM,gBAAgB,CAAC;AACjE,OAAO,KAAsB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAA8C,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAyB,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAoB,MAAM,0BAA0B,CAAC;AAIxE,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACvD,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAWD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAsBnE,CAAA;;;;;;;;;;AAED,wBAImB"}

package/dist/cjs/src/Actionable.js

@@ -42,176 +42,15 @@ const commons_1 = require("@evlop/commons");
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const haptic_1 = require("./utils/haptic");
+const useAnimatedPress_1 = require("./hooks/useAnimatedPress");
 const native_1 = __importDefault(require("styled-components/native"));
 const styled_system_1 = require("styled-system");
 const AnimatedPressable = react_native_1.Animated.createAnimatedComponent(react_native_1.Pressable);
 const StyledPressable = (0, native_1.default)(AnimatedPressable)(styled_system_1.border, styled_system_1.background, styled_system_1.layout, styled_system_1.space);
-// Hook to create animated press effect
-const useAnimatedPress = (effect) => {
-    return (0, react_1.useMemo)(() => {
-        if (effect === 'none') {
-            return {};
-        }
-        const animatedValue = new react_native_1.Animated.Value(1);
-        const handlePressIn = () => {
-            react_native_1.Animated.spring(animatedValue, {
-                toValue: 0,
-                useNativeDriver: true,
-                speed: 50,
-                bounciness: 4,
-            }).start();
-        };
-        const handlePressOut = () => {
-            react_native_1.Animated.spring(animatedValue, {
-                toValue: 1,
-                useNativeDriver: true,
-                speed: 20,
-                bounciness: 6,
-            }).start();
-        };
-        const getAnimatedStyle = () => {
-            switch (effect) {
-                case 'shrink':
-                    return {
-                        transform: [{
-                                scale: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [0.95, 1],
-                                }),
-                            }],
-                    };
-                case 'dim':
-                    return {
-                        opacity: animatedValue.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [0.7, 1],
-                        }),
-                    };
-                case 'shrink-dim':
-                    return {
-                        transform: [{
-                                scale: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [0.95, 1],
-                                }),
-                            }],
-                        opacity: animatedValue.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [0.7, 1],
-                        }),
-                    };
-                case 'push-down':
-                    return {
-                        transform: [
-                            {
-                                scale: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [0.97, 1],
-                                }),
-                            },
-                            {
-                                translateY: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [2, 0],
-                                }),
-                            },
-                        ],
-                    };
-                case 'gentle-shrink':
-                    return {
-                        transform: [{
-                                scale: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [0.98, 1],
-                                }),
-                            }],
-                    };
-                case 'tilt':
-                    return {
-                        transform: [
-                            {
-                                scale: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [0.97, 1],
-                                }),
-                            },
-                            {
-                                rotateZ: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: ['-2deg', '0deg'],
-                                }),
-                            },
-                            {
-                                perspective: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [800, 1000],
-                                }),
-                            },
-                        ],
-                    };
-                case 'bounce':
-                    return {
-                        transform: [{
-                                scale: animatedValue.interpolate({
-                                    inputRange: [0, 0.5, 1],
-                                    outputRange: [0.9, 0.95, 1],
-                                }),
-                            }],
-                    };
-                case 'squeeze':
-                    return {
-                        transform: [
-                            {
-                                scaleX: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [0.92, 1],
-                                }),
-                            },
-                            {
-                                scaleY: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [1.04, 1],
-                                }),
-                            },
-                        ],
-                    };
-                case 'pop':
-                    return {
-                        transform: [{
-                                scale: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [1.05, 1],
-                                }),
-                            }],
-                    };
-                case 'wobble':
-                    return {
-                        transform: [
-                            {
-                                scale: animatedValue.interpolate({
-                                    inputRange: [0, 1],
-                                    outputRange: [0.97, 1],
-                                }),
-                            },
-                            {
-                                rotateZ: animatedValue.interpolate({
-                                    inputRange: [0, 0.25, 0.5, 0.75, 1],
-                                    outputRange: ['0deg', '-1deg', '1deg', '-0.5deg', '0deg'],
-                                }),
-                            },
-                        ],
-                    };
-                default:
-                    return {};
-            }
-        };
-        return { handlePressIn, handlePressOut, animatedStyle: getAnimatedStyle() };
-    }, [effect]);
-};
 const BaseActionable = (_a) => {
     var { action, pressEffect = 'none', hapticFeedback: hapticFeedbackType, style } = _a, props = __rest(_a, ["action", "pressEffect", "hapticFeedback", "style"]);
     const onPress = (0, commons_1.useAction)(action);
-    const { handlePressIn, handlePressOut, animatedStyle } = useAnimatedPress(pressEffect);
+    const { handlePressIn, handlePressOut, animatedStyle } = (0, useAnimatedPress_1.useAnimatedPress)(pressEffect);
     const handlePress = (0, react_1.useCallback)((event) => {
         if (hapticFeedbackType) {
             (0, haptic_1.triggerHapticFeedback)(hapticFeedbackType);

package/dist/cjs/src/Actionable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actionable.js","sourceRoot":"","sources":["../../../src/Actionable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Actionable.js","sourceRoot":"","sources":["../../../src/Actionable.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4CAAiE;AACjE,+CAA2C;AAC3C,+CAA0F;AAC1F,2CAAmE;AACnE,+DAAwE;AACxE,sEAA8C;AAC9C,iDAAkE;AASlE,MAAM,iBAAiB,GAAG,uBAAQ,CAAC,uBAAuB,CAAC,wBAAS,CAAC,CAAC;AAEtE,MAAM,eAAe,GAAG,IAAA,gBAAM,EAAC,iBAAiB,CAAC,CAC7C,sBAAM,EACN,0BAAU,EACV,sBAAM,EACN,qBAAK,CACR,CAAA;AAEM,MAAM,cAAc,GAA6C,CAAC,EAAqF,EAAE,EAAE;QAAzF,EAAE,MAAM,EAAE,WAAW,GAAG,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,KAAK,OAAY,EAAP,KAAK,cAAnF,oDAAqF,CAAF;IACxJ,MAAM,OAAO,GAAG,IAAA,mBAAS,EAAC,MAAM,CAAC,CAAC;IAClC,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,GAAG,IAAA,mCAAgB,EAAC,WAAW,CAAC,CAAC;IAEvF,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAC,CAAC,KAA4B,EAAE,EAAE;QAC7D,IAAI,kBAAkB,EAAE;YACpB,IAAA,8BAAqB,EAAC,kBAAkB,CAAC,CAAC;SAC7C;QACD,YAAY,CAAC,GAAG,EAAE;YACd,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC,CAAC;IAElC,OAAO,CACH,8BAAC,eAAe,kBACZ,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACzC,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,KAAK,EAAE,CAAC,aAAa,EAAE,KAAK,CAAQ,IAChC,KAAK,EACX,CACL,CAAC;AACN,CAAC,CAAA;AAtBY,QAAA,cAAc,kBAsB1B;AAED,kBAAe,IAAA,sBAAY,EAAC;IACxB,IAAI,EAAE,YAAY;IAClB,oBAAoB,EAAE,EAAE;IACxB,YAAY,EAAE,EAAE;CACnB,CAAC,CAAC,sBAAc,CAAC,CAAC"}

package/dist/cjs/src/Button.d.ts

@@ -2,6 +2,7 @@ import { Action, Color, IconIdentifier, Theme } from '@evlop/commons';
 import React from 'react';
 import { TextStyle, ViewProps } from 'react-native';
 import { BackgroundColorProps, BorderProps, FontSizeProps, FontWeightProps, LayoutProps, SpaceProps } from 'styled-system';
+import { EffectType } from './hooks/useAnimatedPress';
 declare type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export interface BaseButtonProps extends ViewProps, FontWeightProps<Theme>, FontSizeProps<Theme>, LayoutProps<Theme>, SpaceProps<Theme>, BackgroundColorProps<Theme>, BorderProps<Theme> {
     disabled?: boolean;
@@ -15,6 +16,8 @@ export interface BaseButtonProps extends ViewProps, FontWeightProps<Theme>, Font
     action?: Action;
     icon?: IconIdentifier;
     iconPosition?: 'left' | 'right';
+    iconSize?: number;
+    pressEffect?: EffectType;
 }
 export declare const BaseButton: React.FC<BaseButtonProps>;
 declare const ButtonWithSettings: (props: BaseButtonProps & {

package/dist/cjs/src/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAgC,MAAM,gBAAgB,CAAC;AAEpG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAgC,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAExF,OAAO,EAAmB,oBAAoB,EAAU,WAAW,EAAE,aAAa,EAAE,eAAe,EAAU,WAAW,EAAS,UAAU,EAAuB,MAAM,eAAe,CAAC;AAWxL,aAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEpD,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC;IACtL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,qBAAqB,GAAG,OAAO,CAAC;IACnF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACjC;AAkHD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsDhD,CAAC;AAEF,QAAA,MAAM,kBAAkB;;;;;;;;uBAIV,CAAC;AAEf,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAgC,MAAM,gBAAgB,CAAC;AAEpG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0C,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAElG,OAAO,EAAmB,oBAAoB,EAAU,WAAW,EAAE,aAAa,EAAE,eAAe,EAAU,WAAW,EAAS,UAAU,EAAuB,MAAM,eAAe,CAAC;AAIxL,OAAO,EAAE,UAAU,EAAoB,MAAM,0BAA0B,CAAC;AAQxE,aAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEpD,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC;IACtL,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,qBAAqB,GAAG,OAAO,CAAC;IACnF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,UAAU,CAAC;CAC1B;AAyHD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiEhD,CAAC;AAEF,QAAA,MAAM,kBAAkB;;;;;;;;uBAIV,CAAC;AAEf,eAAe,kBAAkB,CAAC"}