related-ui-components 1.9.6 → 1.9.8

package/lib/commonjs/components/Filters/README.md

@@ -0,0 +1,212 @@
+# Filters Component
+
+A flexible, customizable bottom sheet filter component for React Native applications with support for sorting options, points range selection, brand filtering, and extensive styling options.
+
+![Filters Example](../../assets/components/Filters.png)
+
+## Basic Usage
+
+```jsx
+import React from 'react';
+import { View } from 'react-native';
+import { Filters } from '@your-org/component-library';
+
+const ExampleScreen = () => {
+  const sortOptions = [
+    { id: 1, name: 'Price: Low to High', value: 'price_asc' },
+    { id: 2, name: 'Price: High to Low', value: 'price_desc' },
+  ];
+  
+  const brands = [
+    { id: '1', name: 'Brand A', logo: require('../assets/brandA.png') },
+    { id: '2', name: 'Brand B', logo: require('../assets/brandB.png') },
+  ];
+  
+  const handleFilterApply = (result) => {
+    console.log('Applied filters:', result);
+  };
+  
+  return (
+    <View style={{ flex: 1 }}>
+      <Filters 
+        sortOptions={sortOptions}
+        brands={brands}
+        onActionButtonPress={handleFilterApply}
+      />
+    </View>
+  );
+};
+
+export default ExampleScreen;
+```
+
+## Props
+
+The `Filters` component provides extensive customization options through its props.
+
+### Core Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onActionButtonPress` | `(result: FilterResult) => void` | ❌ | - | Function called when Apply Filter button is pressed |
+| `sortOptions` | `SortOption[]` | ❌ | `[]` | Array of sorting options to display |
+| `brands` | `Brand[]` | ❌ | `[]` | Array of brand options to display |
+| `isRTL` | `boolean` | ❌ | `I18nManager.isRTL` | Whether to display in right-to-left mode |
+
+### Layout & Sections Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `sortSectionTitle` | `string` | ❌ | `"Sort"` | Title for the sorting section |
+| `pointsRangeSectionTitle` | `string` | ❌ | `"Points range"` | Title for the points range section |
+| `brandSectionTitle` | `string` | ❌ | `"Brands"` | Title for the brands section |
+| `showPointsRange` | `boolean` | ❌ | `true` | Whether to display the points range section |
+| `headerTitleText` | `string` | ❌ | `"Filter"` | Text for the header title |
+| `headerResetText` | `string` | ❌ | `"Reset All"` | Text for the reset button |
+| `applyButtonText` | `string` | ❌ | `"Apply Filter"` | Text for the apply button |
+
+### Points Range Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `rangeMinLimit` | `number` | ❌ | `0` | Minimum possible value for the range selector |
+| `rangeMaxLimit` | `number` | ❌ | `1000` | Maximum possible value for the range selector |
+| `rangeInitialMin` | `number` | ❌ | `0` | Initial minimum selected value |
+| `rangeInitialMax` | `number` | ❌ | `1000` | Initial maximum selected value |
+
+### Points Range Styling Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `pointsRangeContainerStyle` | `ViewStyle` | ❌ | - | Style for the main points range container |
+| `pointsRangeInputsContainerStyle` | `ViewStyle` | ❌ | - | Style for the inputs container in points range selector |
+| `pointsRangeCustomInputContainerStyle` | `ViewStyle` | ❌ | - | Style for the custom input containers |
+| `pointsRangeCustomInputFieldStyle` | `ViewStyle` | ❌ | - | Style for the input fields |
+| `pointsRangeSliderContainerStyle` | `ViewStyle` | ❌ | - | Style for the slider container |
+| `pointsRangeMultiSliderContainerStyle` | `ViewStyle` | ❌ | - | Style for the multi-slider container |
+| `pointsRangeTrackStyle` | `ViewStyle` | ❌ | - | Style for the slider track |
+| `pointsRangeSelectedTrackStyle` | `ViewStyle` | ❌ | - | Style for the selected portion of the track |
+| `pointsRangeUnselectedTrackStyle` | `ViewStyle` | ❌ | - | Style for the unselected portions of the track |
+| `pointsRangeMarkerStyle` | `ViewStyle` | ❌ | - | Style for slider markers |
+| `pointsRangeMarkerEnabledStyle` | `ViewStyle` | ❌ | - | Style for enabled slider markers |
+| `pointsRangeMarkerDisabledStyle` | `ViewStyle` | ❌ | - | Style for disabled slider markers |
+| `pointsRangeMarkerDotStyle` | `ViewStyle` | ❌ | - | Style for the marker dots |
+| `pointsRangeInputProps` | `Object` | ❌ | - | Additional props to pass to the range input fields |
+| `pointsRangeMultiSliderProps` | `Object` | ❌ | - | Additional props to pass to the MultiSlider component |
+
+### Brand Configuration Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `brandActiveIcon` | `React.ReactNode` | ❌ | `<Ionicons name="checkmark-outline" />` | Icon to show for selected brands |
+| `brandActiveIconStyle` | `ViewStyle` | ❌ | - | Style for the active brand icon |
+
+### Bottom Sheet Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `bottomSheetIndex` | `number` | ❌ | `0` | Initial index for the bottom sheet |
+| `snapPoints` | `string[]` | ❌ | `["50%", "90%"]` | Snap points for the bottom sheet |
+| `handleIndicatorStyle` | `ViewStyle` | ❌ | - | Style for the bottom sheet handle indicator |
+
+### Style Customization Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerStyle` | `ViewStyle` | ❌ | - | Style for the main container |
+| `headerStyle` | `ViewStyle` | ❌ | - | Style for the header |
+| `titleStyle` | `TextStyle` | ❌ | - | Style for the header title |
+| `resetTextStyle` | `TextStyle` | ❌ | - | Style for the reset text |
+| `sectionStyle` | `ViewStyle` | ❌ | - | Style for all filter sections |
+| `sortSectionStyle` | `ViewStyle` | ❌ | - | Style specifically for the sort section |
+| `sectionTitleStyle` | `TextStyle` | ❌ | - | Style for section titles |
+| `optionRowStyle` | `ViewStyle` | ❌ | - | Style for option rows in the sort section |
+| `optionTextStyle` | `TextStyle` | ❌ | - | Style for option text in the sort section |
+| `checkboxColor` | `string` | ❌ | `theme.secondary` | Color for checkboxes |
+| `brandContainerStyle` | `ViewStyle` | ❌ | - | Style for the brands grid container |
+| `applyButtonStyle` | `ViewStyle` | ❌ | - | Style for the apply button |
+| `applyButtonTextStyle` | `TextStyle` | ❌ | - | Style for the apply button text |
+| `bottomSheetStyle` | `ViewStyle` | ❌ | - | Style for the bottom sheet |
+
+## Types
+
+```typescript
+type SortOption = {
+  name: string;
+  value: string;
+  id: number;
+};
+
+type Brand = {
+  id: string;
+  name: string;
+  logo: ImageSourcePropType;
+};
+
+type FilterResult = {
+  sort: SortOption[];
+  pointsRange: { min: number; max: number };
+  selectedBrands: Brand[];
+};
+```
+
+## Examples
+
+### Basic Filter with Sort Options Only
+
+```jsx
+<Filters 
+  sortOptions={[
+    { id: 1, name: 'Newest First', value: 'newest' },
+    { id: 2, name: 'Oldest First', value: 'oldest' },
+    { id: 3, name: 'Highest Rated', value: 'rated_desc' }
+  ]}
+  showPointsRange={false}
+  onActionButtonPress={(result) => handleSort(result.sort)}
+/>
+```
+
+### Points Range Filter with Custom Limits
+
+```jsx
+<Filters 
+  showPointsRange={true}
+  rangeMinLimit={0}
+  rangeMaxLimit={5000}
+  rangeInitialMin={100}
+  rangeInitialMax={2000}
+  pointsRangeSectionTitle="Price Range"
+  onActionButtonPress={(result) => handlePriceRange(result.pointsRange)}
+/>
+```
+
+### Brand Selection with Custom Styling
+
+```jsx
+<Filters 
+  brands={[
+    { id: 'nike', name: 'Nike', logo: require('../assets/nike.png') },
+    { id: 'adidas', name: 'Adidas', logo: require('../assets/adidas.png') },
+    { id: 'puma', name: 'Puma', logo: require('../assets/puma.png') }
+  ]}
+  brandSectionTitle="Select Brands"
+  brandContainerStyle={{ justifyContent: 'space-between' }}
+  brandActiveIconStyle={{ backgroundColor: '#E0F7FA' }}
+  onActionButtonPress={(result) => handleBrandFilter(result.selectedBrands)}
+/>
+```
+
+### RTL Support with Custom Headers
+
+```jsx
+<Filters 
+  isRTL={true}
+  headerTitleText="فلتر"
+  headerResetText="إعادة تعيين الكل"
+  applyButtonText="تطبيق الفلتر"
+  sortSectionTitle="ترتيب"
+  pointsRangeSectionTitle="نطاق النقاط"
+  brandSectionTitle="العلامات التجارية"
+  onActionButtonPress={handleArabicFilters}
+/>
+```

package/lib/commonjs/components/Filters/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Filters: true,
+  PointsRangeSelector: true
+};
+Object.defineProperty(exports, "Filters", {
+  enumerable: true,
+  get: function () {
+    return _Filters.default;
+  }
+});
+Object.defineProperty(exports, "PointsRangeSelector", {
+  enumerable: true,
+  get: function () {
+    return _PointsRangeSelector.default;
+  }
+});
+var _Filters = _interopRequireWildcard(require("./Filters.js"));
+Object.keys(_Filters).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Filters[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Filters[key];
+    }
+  });
+});
+var _PointsRangeSelector = _interopRequireWildcard(require("./PointsRangeSelector.js"));
+Object.keys(_PointsRangeSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PointsRangeSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PointsRangeSelector[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Filters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Filters","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_PointsRangeSelector","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Filters/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,QAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEAC,MAAA,CAAAC,IAAA,CAAAJ,QAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,QAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,QAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AADA,IAAAS,oBAAA,GAAAd,uBAAA,CAAAC,OAAA;AAEAC,MAAA,CAAAC,IAAA,CAAAW,oBAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,oBAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,oBAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AAAsC,SAAAU,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAhB,wBAAAgB,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAN,GAAA,CAAAG,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAApB,cAAA,CAAAC,IAAA,CAAAQ,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAf,GAAA,IAAAe,CAAA,CAAAC,GAAA,IAAA3B,MAAA,CAAAS,cAAA,CAAAY,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,CAAAF,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA","ignoreList":[]}

package/lib/commonjs/components/Input/Input.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const CustomInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  label,
+  error,
+  helper,
+  leftIcon,
+  rightIcon,
+  onRightIconPress,
+  containerStyle,
+  labelStyle,
+  inputStyle,
+  inputContainerStyle,
+  errorStyle,
+  helperStyle,
+  onChangeText,
+  onBlur,
+  onFocus,
+  isRTL = false,
+  ...rest
+}, ref) => {
+  const {
+    theme,
+    isRTL: rtl
+  } = (0, _index.useTheme)();
+  isRTL = rtl;
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus && onFocus();
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    onBlur && onBlur();
+  };
+
+  // Define styles using a function to access theme
+  const styles = createStyles(theme);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, containerStyle],
+    children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, {
+        textAlign: isRTL ? 'right' : 'left'
+      }, labelStyle],
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.inputContainer, inputContainerStyle, isFocused && styles.focusedInput, error && styles.errorInput, isRTL && {
+        flexDirection: 'row-reverse'
+      }],
+      children: [leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.leftIcon, isRTL && {
+          paddingRight: 12,
+          paddingLeft: 0
+        }],
+        children: leftIcon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        ref: ref,
+        style: [styles.input, leftIcon ? styles.inputWithLeftIcon : undefined, rightIcon ? styles.inputWithRightIcon : undefined, {
+          textAlign: isRTL ? 'right' : 'left'
+        }, inputStyle],
+        onChangeText: onChangeText,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        placeholderTextColor: theme.placeholderText // Use placeholderText
+        ,
+        ...rest
+      }), rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [styles.rightIcon, isRTL && {
+          paddingLeft: 12,
+          paddingRight: 0
+        }],
+        onPress: onRightIconPress,
+        disabled: !onRightIconPress,
+        children: rightIcon
+      })]
+    }), error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.error, {
+        textAlign: isRTL ? 'right' : 'left'
+      }, errorStyle],
+      children: error
+    }) : helper ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.helper, {
+        textAlign: isRTL ? 'right' : 'left'
+      }, helperStyle],
+      children: helper
+    }) : null]
+  });
+});
+
+// Function to create themed styles
+const createStyles = theme => _reactNative.StyleSheet.create({
+  container: {},
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 6,
+    color: theme.labelText // Use labelText
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: theme.border,
+    // Use border
+    borderRadius: 8,
+    backgroundColor: theme.inputBackground,
+    // Use inputBackground
+    alignItems: 'center'
+    // minHeight: 48,
+  },
+  focusedInput: {
+    borderColor: theme.primary // Use primary for focus indication
+  },
+  errorInput: {
+    borderColor: theme.error // Correctly uses error
+  },
+  input: {
+    flex: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    fontSize: 16,
+    color: theme.inputText,
+    // Use inputText
+    backgroundColor: 'transparent' // Keep transparent
+  },
+  inputWithLeftIcon: {
+    paddingLeft: 8
+  },
+  inputWithRightIcon: {
+    paddingRight: 8
+  },
+  leftIcon: {
+    paddingLeft: 12
+  },
+  rightIcon: {
+    paddingRight: 12
+  },
+  error: {
+    fontSize: 12,
+    color: theme.error,
+    // Correctly uses error
+    marginTop: 4
+  },
+  helper: {
+    fontSize: 12,
+    color: theme.helper,
+    // Correctly uses helper
+    marginTop: 4
+  }
+});
+var _default = exports.default = CustomInput;
+//# sourceMappingURL=Input.js.map

package/lib/commonjs/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CustomInput","forwardRef","label","error","helper","leftIcon","rightIcon","onRightIconPress","containerStyle","labelStyle","inputStyle","inputContainerStyle","errorStyle","helperStyle","onChangeText","onBlur","onFocus","isRTL","rest","ref","theme","rtl","useTheme","isFocused","setIsFocused","useState","handleFocus","handleBlur","styles","createStyles","jsxs","View","style","container","children","jsx","Text","textAlign","inputContainer","focusedInput","errorInput","flexDirection","paddingRight","paddingLeft","TextInput","input","inputWithLeftIcon","undefined","inputWithRightIcon","placeholderTextColor","placeholderText","TouchableOpacity","onPress","disabled","StyleSheet","create","fontSize","fontWeight","marginBottom","color","labelText","borderWidth","borderColor","border","borderRadius","backgroundColor","inputBackground","alignItems","primary","flex","paddingHorizontal","paddingVertical","inputText","marginTop","_default","exports"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/Input.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Input/README.md

@@ -0,0 +1,128 @@
+# CustomInput Component
+
+A flexible, themeable text input component for React Native applications with support for labels, icons, error messages, and helper text.
+
+## Basic Usage
+
+```jsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { CustomInput } from '@your-org/component-library';
+
+const MyForm = () => {
+  const [name, setName] = useState('');
+  
+  return (
+    <View style={{ padding: 16 }}>
+      <CustomInput
+        label="Full Name"
+        placeholder="Enter your full name"
+        value={name}
+        onChangeText={setName}
+      />
+    </View>
+  );
+};
+
+export default MyForm;
+```
+
+## Props
+
+The `CustomInput` component extends React Native's `TextInputProps` (except for the `style` prop which is replaced with more specific styling props) and adds the following:
+
+### Core Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `label` | `string` | ❌ | - | Text to display above the input field |
+| `error` | `string` | ❌ | - | Error message to display below the input (turns border red) |
+| `helper` | `string` | ❌ | - | Helper text to display below the input (hidden if error is present) |
+
+### Icon Properties
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `leftIcon` | `React.ReactNode` | ❌ | - | Icon component to display on the left side of the input |
+| `rightIcon` | `React.ReactNode` | ❌ | - | Icon component to display on the right side of the input |
+| `onRightIconPress` | `() => void` | ❌ | - | Function to call when the right icon is pressed |
+
+### Style Customization
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the outer container |
+| `labelStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the label text |
+| `inputStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the text input itself |
+| `inputContainerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the container around the input and icons |
+| `errorStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the error message text |
+| `helperStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the helper text |
+
+### Behavior Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `onChangeText` | `(text: string) => void` | ❌ | - | Function to call when text changes |
+| `onBlur` | `() => void` | ❌ | - | Function to call when input loses focus |
+| `onFocus` | `() => void` | ❌ | - | Function to call when input gains focus |
+
+## Examples
+
+### Basic Input with Label
+
+```jsx
+<CustomInput
+  label="Username"
+  placeholder="Enter your username"
+  onChangeText={(text) => console.log(text)}
+/>
+```
+
+### Input with Error State
+
+```jsx
+<CustomInput
+  label="Email"
+  placeholder="Enter your email"
+  value={email}
+  onChangeText={setEmail}
+  error={!isValidEmail(email) ? "Please enter a valid email address" : ""}
+/>
+```
+
+### Input with Helper Text
+
+```jsx
+<CustomInput
+  label="Password"
+  placeholder="Enter your password"
+  secureTextEntry
+  helper="Password must be at least 8 characters long"
+  onChangeText={setPassword}
+/>
+```
+
+### Input with Icons
+
+```jsx
+import { Ionicons } from '@expo/vector-icons';
+
+// Password input with toggle icon
+const [showPassword, setShowPassword] = useState(false);
+
+<CustomInput
+  label="Password"
+  placeholder="Enter your password"
+  secureTextEntry={!showPassword}
+  leftIcon={<Ionicons name="lock-closed" size={20} color="#888" />}
+  rightIcon={
+    <Ionicons 
+      name={showPassword ? "eye-off" : "eye"} 
+      size={20} 
+      color="#888" 
+    />
+  }
+  onRightIconPress={() => setShowPassword(!showPassword)}
+  onChangeText={setPassword}
+/>
+```

package/lib/commonjs/components/Input/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Input: true
+};
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () {
+    return _Input.default;
+  }
+});
+var _Input = _interopRequireWildcard(require("./Input.js"));
+Object.keys(_Input).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Input[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Input[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_Input","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Input/index.ts"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,MAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,MAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAAwB,SAAAS,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAf,wBAAAe,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAL,GAAA,CAAAE,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAtB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAuB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAAnB,cAAA,CAAAC,IAAA,CAAAO,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAtB,MAAA,CAAAuB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAd,GAAA,IAAAc,CAAA,CAAAC,GAAA,IAAA1B,MAAA,CAAAS,cAAA,CAAAW,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,CAAAF,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA","ignoreList":[]}

package/lib/commonjs/components/LockOverlay/LockOverlay.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _vectorIcons = require("@expo/vector-icons");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LockOverlay = ({
+  visible = true,
+  containerStyle,
+  iconStyle,
+  textStyle,
+  text = 'Unlock',
+  iconSize = 50,
+  iconColor = 'white',
+  overlayOpacity = 0.7,
+  contentVerticalAlign = "center",
+  ...touchableProps
+}) => {
+  if (!visible) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    style: [styles.overlay, {
+      backgroundColor: `rgba(0, 0, 0, ${overlayOpacity})`
+    }, contentVerticalAlign == "top" && {
+      justifyContent: "flex-start",
+      paddingTop: 50
+    }, containerStyle],
+    activeOpacity: 0.8,
+    ...touchableProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
+      name: "lock-closed",
+      size: iconSize,
+      color: iconColor
+      // style={iconStyle}
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.text, {
+        color: iconColor
+      }, textStyle],
+      children: text
+    })]
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginTop: 12
+  }
+});
+var _default = exports.default = LockOverlay;
+//# sourceMappingURL=LockOverlay.js.map