@mapples/ui 1.0.2

package/README.md

@@ -0,0 +1,297 @@
+# @mapples/ui
+
+A comprehensive React Native UI component library with built-in styling support and visual editor integration.
+
+## Overview
+
+The `@mapples/ui` package provides a complete set of customizable React Native components that integrate seamlessly with the Mapples styling system. Each component is designed to work both in traditional React Native applications and in visual editors for drag-and-drop interface building.
+
+## Features
+
+- 🎨 **Built-in Styling**: All components support the `@mapples/style` system for consistent theming
+- 🖱️ **Visual Editor Ready**: Components include schematics for visual editor integration
+- 📱 **React Native Compatible**: Built on top of React Native and Expo components
+- 🔧 **TypeScript Support**: Full TypeScript definitions and IntelliSense support
+- 🎯 **Accessible**: Components follow accessibility best practices
+- 🚀 **Performance Optimized**: Uses React.forwardRef for optimal performance
+
+## Installation
+
+```bash
+npm install @mapples/ui
+# or
+yarn add @mapples/ui
+```
+
+## Component Categories
+
+### Views
+
+Container components for layout and structure:
+
+- **View**: Basic container component with styling support
+- **SafeAreaView**: Container that respects device safe areas
+- **ScrollView**: Scrollable container with styling support
+- **FlatList**: Optimized list component with styling support
+- **ImageBackgroundView**: Container with background image support
+
+### Typography
+
+Text display components:
+
+- **Text**: Customizable text component with styling support
+- **Typography**: Advanced typography component with variant support
+
+### Inputs
+
+Interactive input components:
+
+- **Button**: Customizable button with label and styling support
+- **TextInput**: Text input with styling support
+- **IconButton**: Button with icon support
+- **Pressable**: Enhanced pressable component with styling
+
+### Media
+
+Media display components:
+
+- **Image**: Image component with styling support (uses Expo Image)
+- **Video**: Video component with styling support
+- **Icon**: Icon component with SVG support
+
+## Usage Examples
+
+### Basic Button
+
+```tsx
+import { Button } from '@mapples/ui';
+
+function MyComponent() {
+  return (
+    <Button
+      label="Click me"
+      onPress={() => console.log('Button pressed')}
+      styled={{
+        style: {
+          backgroundColor: 'blue',
+          padding: 16,
+          borderRadius: 8,
+        },
+        styleTypography: {
+          color: 'white',
+          fontSize: 16,
+          fontWeight: 'bold',
+        },
+      }}
+    />
+  );
+}
+```
+
+### Styled View Container
+
+```tsx
+import { View, Text } from '@mapples/ui';
+
+function MyContainer() {
+  return (
+    <View
+      styled={{
+        style: {
+          backgroundColor: 'lightblue',
+          padding: 20,
+          borderRadius: 12,
+          margin: 16,
+        },
+      }}
+    >
+      <Text
+        text="Hello, World!"
+        styled={{
+          style: {
+            fontSize: 18,
+            color: 'darkblue',
+            textAlign: 'center',
+          },
+        }}
+      />
+    </View>
+  );
+}
+```
+
+### Image with Styling
+
+```tsx
+import { Image } from '@mapples/ui';
+
+function MyImage() {
+  return (
+    <Image
+      source={{ uri: 'https://example.com/image.jpg' }}
+      alt="Example image"
+      styled={{
+        style: {
+          width: 200,
+          height: 200,
+          borderRadius: 8,
+        },
+        styleImage: {
+          resizeMode: 'cover',
+        },
+      }}
+    />
+  );
+}
+```
+
+### Text Input
+
+```tsx
+import { TextInput } from '@mapples/ui';
+
+function MyInput() {
+  const [text, setText] = useState('');
+
+  return (
+    <TextInput
+      placeholder="Enter your text"
+      value={text}
+      onChangeText={setText}
+      styled={{
+        style: {
+          borderWidth: 1,
+          borderColor: 'gray',
+          padding: 12,
+          borderRadius: 8,
+          fontSize: 16,
+        },
+      }}
+    />
+  );
+}
+```
+
+## Visual Editor Integration
+
+The UI package includes comprehensive schematics for visual editor integration:
+
+```tsx
+import { Components, Groups } from '@mapples/ui';
+
+// Components registry for visual editors
+console.log(Components); // All available components
+console.log(Groups); // Component groups for organization
+```
+
+### Component Groups
+
+Components are organized into logical groups:
+
+- **View Group**: Container and layout components
+- **Typography Group**: Text and typography components
+- **Input Group**: Interactive input components
+- **Media Group**: Image, video, and media components
+
+## Styling System Integration
+
+All components support the `@mapples/style` system through the `styled` prop:
+
+```tsx
+<Component
+  styled={{
+    style: {
+      // Container styling
+      backgroundColor: 'white',
+      padding: 16,
+    },
+    styleTypography: {
+      // Typography-specific styling (for text components)
+      fontSize: 18,
+      color: 'black',
+    },
+    styleImage: {
+      // Image-specific styling (for image components)
+      resizeMode: 'cover',
+    },
+  }}
+/>
+```
+
+## System Palette
+
+The package includes a system color palette for consistent theming:
+
+```tsx
+import { SystemPalette } from '@mapples/ui';
+
+// Available colors
+SystemPalette.text; // '#000000'
+SystemPalette.background; // '#fafafa'
+```
+
+## TypeScript Support
+
+All components are fully typed with TypeScript:
+
+```tsx
+import { ButtonProps, ViewProps, TextProps } from '@mapples/ui';
+
+// Props are fully typed
+const buttonProps: ButtonProps = {
+  label: 'My Button',
+  onPress: () => {},
+  styled: {
+    style: { backgroundColor: 'blue' },
+  },
+};
+```
+
+## Icons
+
+The package includes SVG icons for visual editors:
+
+```tsx
+import Icon from '@mapples/ui/assets';
+
+// Available icons
+<Icon.Button />
+<Icon.Text />
+<Icon.Image />
+<Icon.View />
+// ... and many more
+```
+
+## Development
+
+### Building
+
+```bash
+npm run build
+```
+
+### Linting
+
+```bash
+npm run lint
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+MIT © [Mapples](https://mapples.org)
+
+## Support
+
+For support and questions:
+
+- 📧 Email: support@mapples.org
+- 🌐 Website: https://mapples.org
+- 📖 Documentation: https://docs.mapples.org

package/dist/components/inputs/Button/Button.d.ts

@@ -0,0 +1,44 @@
+import { StyledProp, StyledProps } from '@mapples/style';
+import { PressableProps, TextStyle, View } from 'react-native';
+/**
+ * Props for the Button component.
+ *
+ * @public
+ */
+export interface ButtonProps extends PressableProps {
+    /** The text label to display on the button */
+    label?: string;
+    /** Styling configuration for the button and its typography */
+    styled?: StyledProps<PressableProps> & {
+        /** Typography-specific styling for the button label */
+        styleTypography?: StyledProp<TextStyle>;
+    };
+    /** Typography variant to apply to the button label */
+    typographyVariant?: string;
+}
+/**
+ * A customizable button component with built-in styling support.
+ *
+ * The Button component extends React Native's Pressable with additional styling
+ * capabilities and typography support. It can display a text label and supports
+ * all standard pressable interactions.
+ *
+ * @example
+ * ```tsx
+ * <Button
+ *   label="Click me"
+ *   onPress={() => console.log('Button pressed')}
+ *   styled={{
+ *     style: { backgroundColor: 'blue', padding: 16 },
+ *     styleTypography: { color: 'white', fontSize: 16 }
+ *   }}
+ * />
+ * ```
+ *
+ * @public
+ */
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/inputs/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,UAAU,EACV,WAAW,EAEZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAE/D;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG;QACrC,uDAAuD;QACvD,eAAe,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KACzC,CAAC;IACF,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,MAAM;;wCAiBX,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/dist/components/inputs/Button/Button.js

@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+import { StyledPressable, Typography, } from '@mapples/style';
+/**
+ * A customizable button component with built-in styling support.
+ *
+ * The Button component extends React Native's Pressable with additional styling
+ * capabilities and typography support. It can display a text label and supports
+ * all standard pressable interactions.
+ *
+ * @example
+ * ```tsx
+ * <Button
+ *   label="Click me"
+ *   onPress={() => console.log('Button pressed')}
+ *   styled={{
+ *     style: { backgroundColor: 'blue', padding: 16 },
+ *     styleTypography: { color: 'white', fontSize: 16 }
+ *   }}
+ * />
+ * ```
+ *
+ * @public
+ */
+const Button = forwardRef(({ label, styled = {}, typographyVariant, ...props }, ref) => {
+    const { styleTypography, ...styledPressableProps } = styled;
+    return (<StyledPressable ref={ref} styled={styledPressableProps} {...props}>
+        {label && (<Typography style={styled?.styleTypography} variant={typographyVariant}>
+            {label}
+          </Typography>)}
+      </StyledPressable>);
+});
+Button.displayName = 'Button';
+export default Button;
+//# sourceMappingURL=Button.js.map

package/dist/components/inputs/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/inputs/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EACL,eAAe,EAGf,UAAU,GACX,MAAM,gBAAgB,CAAC;AAoBxB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,GAAG,UAAU,CACvB,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,EAAE,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3D,MAAM,EAAE,eAAe,EAAE,GAAG,oBAAoB,EAAE,GAAG,MAAM,CAAC;IAE5D,OAAO,CACL,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,oBAAoB,CAAC,CAAC,IAAI,KAAK,CAAC,CACjE;QAAA,CAAC,KAAK,IAAI,CACR,CAAC,UAAU,CACT,KAAK,CAAC,CAAC,MAAM,EAAE,eAAe,CAAC,CAC/B,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAE3B;YAAA,CAAC,KAAK,CACR;UAAA,EAAE,UAAU,CAAC,CACd,CACH;MAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,eAAe,MAAM,CAAC"}

package/dist/components/inputs/Button/index.d.ts

@@ -0,0 +1,5 @@
+import Button from './Button';
+export * from './schematics';
+export * from './Button';
+export default Button;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAEzB,eAAe,MAAM,CAAC"}

package/dist/components/inputs/Button/index.js

@@ -0,0 +1,5 @@
+import Button from './Button';
+export * from './schematics';
+export * from './Button';
+export default Button;
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AAEzB,eAAe,MAAM,CAAC"}

package/dist/components/inputs/Button/schematics.d.ts

@@ -0,0 +1,11 @@
+import { RegisteredComponent } from '@mapples/types';
+/**
+ * Schematic configuration for the Button component.
+ *
+ * This configuration defines how the Button component appears in visual editors,
+ * including its properties, styling options, and default values.
+ *
+ * @public
+ */
+export declare const ButtonSchematic: RegisteredComponent;
+//# sourceMappingURL=schematics.d.ts.map

package/dist/components/inputs/Button/schematics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Button/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,mBAG7B,CAAC"}

package/dist/components/inputs/Button/schematics.js

@@ -0,0 +1,14 @@
+import Button from './Button';
+/**
+ * Schematic configuration for the Button component.
+ *
+ * This configuration defines how the Button component appears in visual editors,
+ * including its properties, styling options, and default values.
+ *
+ * @public
+ */
+export const ButtonSchematic = {
+    type: 'Button',
+    Component: Button,
+};
+//# sourceMappingURL=schematics.js.map

package/dist/components/inputs/Button/schematics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/inputs/Button/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAwB;IAClD,IAAI,EAAE,QAAQ;IACd,SAAS,EAAE,MAAM;CAClB,CAAC"}

package/dist/components/inputs/IconButton/IconButton.d.ts

@@ -0,0 +1,62 @@
+import { PropsWithChildren } from 'react';
+import { StyledProp, StyledProps, WithStyledProps } from '@mapples/style';
+import { PressableProps, TextStyle, View, ViewProps } from 'react-native';
+/**
+ * Props for the IconButton component.
+ *
+ * @public
+ */
+export type IconProps = PropsWithChildren<Omit<WithStyledProps<PressableProps>, 'styled'> & {
+    /** Styling configuration for the button container and SVG icon */
+    styled?: StyledProps<ViewProps> & {
+        /** SVG-specific styling */
+        styleSvg?: StyledProp<TextStyle>;
+    };
+}> & {
+    /** URI for the SVG icon to display */
+    uri?: string;
+};
+/**
+ * A customizable icon button component with SVG support.
+ *
+ * The IconButton component displays an SVG icon that can be pressed.
+ * It supports both remote SVG URIs and fallback mock icons, with
+ * comprehensive styling support for both the button container and the icon.
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   uri="https://example.com/icon.svg"
+ *   onPress={() => console.log('Icon pressed')}
+ *   styled={{
+ *     style: {
+ *       width: 48,
+ *       height: 48,
+ *       backgroundColor: 'lightblue',
+ *       borderRadius: 24,
+ *     },
+ *     styleSvg: {
+ *       width: 24,
+ *       height: 24,
+ *       color: 'blue',
+ *     },
+ *   }}
+ * />
+ * ```
+ *
+ * @public
+ */
+declare const IconButton: import("react").ForwardRefExoticComponent<Omit<WithStyledProps<PressableProps>, "styled"> & {
+    /** Styling configuration for the button container and SVG icon */
+    styled?: StyledProps<ViewProps> & {
+        /** SVG-specific styling */
+        styleSvg?: StyledProp<TextStyle>;
+    };
+} & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    /** URI for the SVG icon to display */
+    uri?: string;
+} & import("react").RefAttributes<View>>;
+export default IconButton;
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/inputs/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAGL,UAAU,EACV,WAAW,EAEX,eAAe,EAChB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAK1E;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC,GAAG;IAChD,kEAAkE;IAClE,MAAM,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KAClC,CAAC;CACH,CACF,GAAG;IACF,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,UAAU;IA3CZ,kEAAkE;aACzD,WAAW,CAAC,SAAS,CAAC,GAAG;QAChC,2BAA2B;QAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;KAClC;;;;IAGH,sCAAsC;UAChC,MAAM;wCAkEb,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/dist/components/inputs/IconButton/IconButton.js

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react';
+import { styled, StyledPressable, Styler, } from '@mapples/style';
+import { SvgUri } from 'react-native-svg';
+import MockIcon from './MockIcon';
+const StyledSvgUri = styled(SvgUri);
+/**
+ * A customizable icon button component with SVG support.
+ *
+ * The IconButton component displays an SVG icon that can be pressed.
+ * It supports both remote SVG URIs and fallback mock icons, with
+ * comprehensive styling support for both the button container and the icon.
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   uri="https://example.com/icon.svg"
+ *   onPress={() => console.log('Icon pressed')}
+ *   styled={{
+ *     style: {
+ *       width: 48,
+ *       height: 48,
+ *       backgroundColor: 'lightblue',
+ *       borderRadius: 24,
+ *     },
+ *     styleSvg: {
+ *       width: 24,
+ *       height: 24,
+ *       color: 'blue',
+ *     },
+ *   }}
+ * />
+ * ```
+ *
+ * @public
+ */
+const IconButton = forwardRef(({ styled, uri, ...props }, ref) => {
+    const { styleSvg, ...styledViewProps } = styled || {};
+    const ejectStyle = Styler.flatten(styleSvg);
+    return (<StyledPressable ref={ref} styled={styledViewProps} {...props}>
+        {uri ? (<StyledSvgUri uri={uri} styled={{
+                width: ejectStyle?.width,
+                height: ejectStyle?.height,
+                color: ejectStyle?.color,
+                style: styleSvg,
+            }}/>) : (<MockIcon styled={{
+                width: ejectStyle?.width,
+                height: ejectStyle?.height,
+                color: ejectStyle?.color,
+                style: styleSvg,
+            }}/>)}
+      </StyledPressable>);
+});
+IconButton.displayName = 'IconButton';
+export default IconButton;
+//# sourceMappingURL=IconButton.js.map

package/dist/components/inputs/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EACL,MAAM,EACN,eAAe,EAGf,MAAM,GAEP,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAoBlC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,GAAG,UAAU,CAC3B,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,EAAE,QAAQ,EAAE,GAAG,eAAe,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAEtD,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE5C,OAAO,CACL,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,eAAe,CAAC,CAAC,IAAI,KAAK,CAAC,CAC5D;QAAA,CAAC,GAAG,CAAC,CAAC,CAAC,CACL,CAAC,YAAY,CACX,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,MAAM,CAAC,CAAC;gBACN,KAAK,EAAE,UAAU,EAAE,KAAwB;gBAC3C,MAAM,EAAE,UAAU,EAAE,MAAyB;gBAC7C,KAAK,EAAE,UAAU,EAAE,KAAK;gBACxB,KAAK,EAAE,QAAQ;aAChB,CAAC,EACF,CACH,CAAC,CAAC,CAAC,CACF,CAAC,QAAQ,CACP,MAAM,CAAC,CAAC;gBACN,KAAK,EAAE,UAAU,EAAE,KAAwB;gBAC3C,MAAM,EAAE,UAAU,EAAE,MAAyB;gBAC7C,KAAK,EAAE,UAAU,EAAE,KAAK;gBACxB,KAAK,EAAE,QAAQ;aAChB,CAAC,EACF,CACH,CACH;MAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,eAAe,UAAU,CAAC"}

package/dist/components/inputs/IconButton/MockIcon.d.ts

@@ -0,0 +1,6 @@
+import { SvgProps } from 'react-native-svg';
+declare const _default: import("react").ForwardRefExoticComponent<{
+    styled?: import("@mapples/style").StyledProps<Partial<SvgProps>> | undefined;
+} & SvgProps & import("react").RefAttributes<unknown>>;
+export default _default;
+//# sourceMappingURL=MockIcon.d.ts.map

package/dist/components/inputs/IconButton/MockIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MockIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/MockIcon.tsx"],"names":[],"mappings":"AAGA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;;;;AAUvD,wBAAgC"}

package/dist/components/inputs/IconButton/MockIcon.js

@@ -0,0 +1,9 @@
+import { styled } from '@mapples/style';
+import Svg, { Path } from 'react-native-svg';
+const MockIcon = (props) => {
+    return (<Svg {...props} viewBox="0 0 256 256">
+      <Path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16h64a8,8,0,0,0,7.59-5.47l14.83-44.48L163,151.43a8.07,8.07,0,0,0,4.46-4.46l14.62-36.55,44.48-14.83A8,8,0,0,0,232,88V56A16,16,0,0,0,216,40ZM112.41,157.47,98.23,200H40V172l52-52,30.42,30.42L117,152.57A8,8,0,0,0,112.41,157.47ZM216,82.23,173.47,96.41a8,8,0,0,0-4.9,4.62l-14.72,36.82L138.58,144l-35.27-35.27a16,16,0,0,0-22.62,0L40,149.37V56H216Zm12.68,33a8,8,0,0,0-7.21-1.1l-23.8,7.94a8,8,0,0,0-4.9,4.61l-14.31,35.77-35.77,14.31a8,8,0,0,0-4.61,4.9l-7.94,23.8A8,8,0,0,0,137.73,216H216a16,16,0,0,0,16-16V121.73A8,8,0,0,0,228.68,115.24ZM216,200H148.83l3.25-9.75,35.51-14.2a8.07,8.07,0,0,0,4.46-4.46l14.2-35.51,9.75-3.25Z"></Path>
+    </Svg>);
+};
+export default styled(MockIcon);
+//# sourceMappingURL=MockIcon.js.map

package/dist/components/inputs/IconButton/MockIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MockIcon.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/MockIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,GAAG,EAAE,EAAY,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,QAAQ,GAAiB,CAAC,KAAK,EAAE,EAAE;IACvC,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,OAAO,CAAC,aAAa,CACnC;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,spBAAspB,CAAC,EAAE,IAAI,CACvqB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC,QAAQ,CAAC,CAAC"}

package/dist/components/inputs/IconButton/index.d.ts

@@ -0,0 +1,4 @@
+import IconButton from './IconButton';
+export * from './schematics';
+export default IconButton;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/IconButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,cAAc,cAAc,CAAC;AAE7B,eAAe,UAAU,CAAC"}

package/dist/components/inputs/IconButton/index.js

@@ -0,0 +1,4 @@
+import IconButton from './IconButton';
+export * from './schematics';
+export default IconButton;
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/IconButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,cAAc,cAAc,CAAC;AAE7B,eAAe,UAAU,CAAC"}

package/dist/components/inputs/IconButton/schematics.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponent } from '@mapples/types';
+export declare const IconButtonSchematics: RegisteredComponent;
+//# sourceMappingURL=schematics.d.ts.map

package/dist/components/inputs/IconButton/schematics.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematics.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/schematics.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAIrD,eAAO,MAAM,oBAAoB,EAAE,mBAGlC,CAAC"}

package/dist/components/inputs/IconButton/schematics.js

@@ -0,0 +1,6 @@
+import IconButton from './IconButton';
+export const IconButtonSchematics = {
+    type: 'IconButton',
+    Component: IconButton,
+};
+//# sourceMappingURL=schematics.js.map

package/dist/components/inputs/IconButton/schematics.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schematics.js","sourceRoot":"","sources":["../../../../src/components/inputs/IconButton/schematics.ts"],"names":[],"mappings":"AAEA,OAAO,UAAU,MAAM,cAAc,CAAC;AAEtC,MAAM,CAAC,MAAM,oBAAoB,GAAwB;IACvD,IAAI,EAAE,YAAY;IAClB,SAAS,EAAE,UAAU;CACtB,CAAC"}

package/dist/components/inputs/Pressable/Pressable.d.ts

@@ -0,0 +1,9 @@
+import { PressableProps as RNPressableProps, View } from 'react-native';
+export interface PressableProps extends RNPressableProps {
+    label?: string;
+}
+declare const Pressable: import("react").ForwardRefExoticComponent<PressableProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<View>>;
+export default Pressable;
+//# sourceMappingURL=Pressable.d.ts.map

package/dist/components/inputs/Pressable/Pressable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/Pressable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,IAAI,gBAAgB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAExE,MAAM,WAAW,cAAe,SAAQ,gBAAgB;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,SAAS;;wCAQd,CAAC;AAGF,eAAe,SAAS,CAAC"}

package/dist/components/inputs/Pressable/Pressable.js

@@ -0,0 +1,10 @@
+import { forwardRef } from 'react';
+import { StyledPressable } from '@mapples/style';
+const Pressable = forwardRef(({ label, children, ...props }, ref) => {
+    return (<StyledPressable onPress={console.log} ref={ref} {...props}>
+        {children}
+      </StyledPressable>);
+});
+Pressable.displayName = 'Pressable';
+export default Pressable;
+//# sourceMappingURL=Pressable.js.map

package/dist/components/inputs/Pressable/Pressable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.js","sourceRoot":"","sources":["../../../../src/components/inputs/Pressable/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAOjD,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrC,OAAO,CACL,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CACzD;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,eAAe,CAAC,CACnB,CAAC;AACJ,CAAC,CACF,CAAC;AACF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,eAAe,SAAS,CAAC"}