npm - react-native-mantine - Versions diffs - 0.1.15 → 0.3.0 - Mend

react-native-mantine 0.1.15 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (776) hide show

package/lib/commonjs/components/RingProgress/index.js ADDED Viewed

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RingProgress = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../BoxView/index.js");
+var _index2 = require("../Text/index.js");
+var _themeProvider = require("../../theme/theme-provider.js");
+var _index3 = require("../../theme/index.js");
+var _rem = require("../../theme/utils/rem.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * NOTE: This is a simplified version of RingProgress.
+ * For full SVG-based circular progress, install react-native-svg:
+ * yarn add react-native-svg
+ *
+ * This version uses View-based rendering with transform rotation.
+ * For production use, consider implementing with react-native-svg.
+ */
+const useStyles = (0, _index3.createStyles)((theme, {
+  size,
+  thickness,
+  rootColor
+}) => ({
+  root: {
+    width: size,
+    height: size,
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  track: {
+    position: 'absolute',
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    borderWidth: thickness,
+    borderColor: rootColor
+  },
+  label: {
+    position: 'absolute',
+    fontSize: (0, _rem.rem)(14),
+    fontWeight: '600',
+    color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black
+  },
+  // Simplified progress representation
+  progressContainer: {
+    position: 'absolute',
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    overflow: 'hidden'
+  }
+}));
+const defaultProps = {
+  size: 120,
+  thickness: 12,
+  roundCaps: false
+};
+const RingProgress = exports.RingProgress = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    sections,
+    size,
+    thickness,
+    label,
+    rootColor: customRootColor,
+    roundCaps,
+    style,
+    ...others
+  } = (0, _themeProvider.useComponentDefaultProps)('RingProgress', defaultProps, props);
+  const theme = (0, _themeProvider.useTheme)();
+  const rootColor = customRootColor || (theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[2]);
+  const {
+    styles,
+    sx
+  } = useStyles({
+    size,
+    thickness,
+    rootColor
+  }, {
+    name: 'RingProgress'
+  });
+  // Calculate total value and normalize sections
+  const normalizedSections = sections.map(section => ({
+    ...section,
+    percentage: section.value / 100 * 100
+  }));
+  // Render simplified ring using borders and transforms
+  // Note: This is a basic implementation. For full SVG support, use react-native-svg
+  const renderSections = () => {
+    let currentAngle = 0;
+    return normalizedSections.map((section, index) => {
+      const colors = theme.colors[section.color] || theme.colors[theme.primaryColor];
+      const sectionColor = colors?.[6] || colors?.[5] || theme.primaryBgColor;
+      const angle = section.percentage / 100 * 360;
+      const rotation = currentAngle;
+      currentAngle += angle;
+      // Simplified representation - just show colored arcs
+      // This is a placeholder implementation
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: 'absolute',
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth: thickness,
+          borderColor: 'transparent',
+          borderTopColor: sectionColor,
+          transform: [{
+            rotate: `${rotation}deg`
+          }]
+        }
+      }, index);
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.BoxView, {
+    ref: ref,
+    style: sx(styles.root, style),
+    ...others,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.track
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.progressContainer,
+      children: renderSections()
+    }), label && (typeof label === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+      style: styles.label,
+      children: label
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: 'absolute'
+      },
+      children: label
+    }))]
+  });
+});
+RingProgress.displayName = 'RingProgress';
+/**
+ * USAGE NOTE:
+ * This is a simplified implementation of RingProgress.
+ * For production-quality circular progress with accurate rendering,
+ * install react-native-svg and implement using SVG circles with
+ * stroke-dasharray and stroke-dashoffset.
+ *
+ * Example with react-native-svg:
+ * ```tsx
+ * import Svg, { Circle } from 'react-native-svg';
+ *
+ * const circumference = 2 * Math.PI * radius;
+ * const strokeDashoffset = circumference - (percentage / 100) * circumference;
+ *
+ * <Svg width={size} height={size}>
+ *   <Circle
+ *     cx={size / 2}
+ *     cy={size / 2}
+ *     r={radius}
+ *     stroke={color}
+ *     strokeWidth={thickness}
+ *     strokeDasharray={circumference}
+ *     strokeDashoffset={strokeDashoffset}
+ *     fill="none"
+ *   />
+ * </Svg>
+ * ```
+ */
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/RingProgress/index.js.map ADDED Viewed

@@ -0,0 +1 @@

package/lib/commonjs/components/SegmentedControl/index.js ADDED Viewed

@@ -0,0 +1,225 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentedControl = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../BoxView/index.js");
+var _index2 = require("../Text/index.js");
+var _themeProvider = require("../../theme/theme-provider.js");
+var _index3 = require("../../theme/index.js");
+var _rem = require("../../theme/utils/rem.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const sizes = {
+  xs: {
+    fontSize: (0, _rem.rem)(10),
+    padding: (0, _rem.rem)(4),
+    height: (0, _rem.rem)(24)
+  },
+  sm: {
+    fontSize: (0, _rem.rem)(12),
+    padding: (0, _rem.rem)(6),
+    height: (0, _rem.rem)(28)
+  },
+  md: {
+    fontSize: (0, _rem.rem)(14),
+    padding: (0, _rem.rem)(8),
+    height: (0, _rem.rem)(32)
+  },
+  lg: {
+    fontSize: (0, _rem.rem)(16),
+    padding: (0, _rem.rem)(10),
+    height: (0, _rem.rem)(38)
+  },
+  xl: {
+    fontSize: (0, _rem.rem)(18),
+    padding: (0, _rem.rem)(12),
+    height: (0, _rem.rem)(44)
+  }
+};
+const useStyles = (0, _index3.createStyles)((theme, {
+  radius,
+  disabled,
+  orientation,
+  fullWidth
+}, {
+  size
+}) => {
+  const sizeStyles = sizes[size] || sizes.md;
+  return {
+    root: {
+      position: 'relative',
+      flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[1],
+      borderRadius: theme.fn.radius(radius),
+      padding: (0, _rem.rem)(4),
+      opacity: disabled ? 0.5 : 1,
+      ...(fullWidth && {
+        width: '100%'
+      })
+    },
+    indicator: {
+      position: 'absolute',
+      backgroundColor: theme.white,
+      borderRadius: theme.fn.radius(radius),
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 1
+      },
+      shadowOpacity: 0.05,
+      shadowRadius: 1,
+      elevation: 1,
+      ...(theme.colorScheme === 'dark' && {
+        backgroundColor: theme.colors.dark?.[5]
+      })
+    },
+    segment: {
+      flex: 1,
+      paddingHorizontal: sizeStyles.padding,
+      paddingVertical: sizeStyles.padding,
+      minHeight: sizeStyles.height,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: theme.fn.radius(radius),
+      zIndex: 1
+    },
+    label: {
+      fontSize: sizeStyles.fontSize,
+      fontWeight: '500',
+      textAlign: 'center'
+    },
+    activeLabel: {
+      color: theme.colorScheme === 'dark' ? theme.white : theme.black
+    },
+    inactiveLabel: {
+      color: theme.colorScheme === 'dark' ? theme.colors.dark?.[1] : theme.colors.gray?.[7]
+    },
+    disabledLabel: {
+      color: theme.colorScheme === 'dark' ? theme.colors.dark?.[3] : theme.colors.gray?.[5]
+    }
+  };
+});
+const defaultProps = {
+  size: 'md',
+  color: 'blue',
+  radius: 'sm',
+  disabled: false,
+  orientation: 'horizontal',
+  fullWidth: false,
+  transitionDuration: 200
+};
+const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    data,
+    size,
+    color,
+    radius,
+    disabled,
+    orientation,
+    fullWidth,
+    transitionDuration,
+    style,
+    ...others
+  } = (0, _themeProvider.useComponentDefaultProps)('SegmentedControl', defaultProps, props);
+  const {
+    styles,
+    sx
+  } = useStyles({
+    color,
+    radius,
+    disabled,
+    orientation,
+    fullWidth
+  }, {
+    name: 'SegmentedControl',
+    size
+  });
+  // Normalize data to SegmentedControlItem[]
+  const normalizedData = data.map(item => typeof item === 'string' ? {
+    label: item,
+    value: item,
+    disabled: false
+  } : item);
+  const [uncontrolledValue, setUncontrolledValue] = (0, _react.useState)(defaultValue ?? normalizedData[0]?.value ?? '');
+  const [segmentLayouts, setSegmentLayouts] = (0, _react.useState)([]);
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+  const activeIndex = normalizedData.findIndex(item => item.value === value);
+  const indicatorPosition = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const indicatorSize = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    if (segmentLayouts[activeIndex]) {
+      const layout = segmentLayouts[activeIndex];
+      _reactNative.Animated.parallel([_reactNative.Animated.timing(indicatorPosition, {
+        toValue: orientation === 'horizontal' ? layout.x : layout.y,
+        duration: transitionDuration,
+        useNativeDriver: false
+      }), _reactNative.Animated.timing(indicatorSize, {
+        toValue: orientation === 'horizontal' ? layout.width : layout.height,
+        duration: transitionDuration,
+        useNativeDriver: false
+      })]).start();
+    }
+  }, [activeIndex, segmentLayouts, orientation, transitionDuration, indicatorPosition, indicatorSize]);
+  const handleSegmentLayout = (index, event) => {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setSegmentLayouts(prev => {
+      const newLayouts = [...prev];
+      newLayouts[index] = {
+        x,
+        y,
+        width,
+        height
+      };
+      return newLayouts;
+    });
+  };
+  const handlePress = item => {
+    if (disabled || item.disabled) return;
+    if (controlledValue === undefined) {
+      setUncontrolledValue(item.value);
+    }
+    onChange?.(item.value);
+  };
+  const indicatorStyle = {
+    [orientation === 'horizontal' ? 'left' : 'top']: indicatorPosition,
+    [orientation === 'horizontal' ? 'width' : 'height']: indicatorSize,
+    [orientation === 'horizontal' ? 'height' : 'width']: '100%'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.BoxView, {
+    ref: ref,
+    style: sx(styles.root, style),
+    ...others,
+    children: [segmentLayouts.length === normalizedData.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.indicator, indicatorStyle]
+    }), normalizedData.map((item, index) => {
+      const isActive = item.value === value;
+      const isDisabled = disabled || item.disabled;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.segment,
+        onPress: () => handlePress(item),
+        disabled: isDisabled,
+        activeOpacity: 0.7,
+        onLayout: event => handleSegmentLayout(index, event),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+          style: [styles.label, isActive ? styles.activeLabel : styles.inactiveLabel, isDisabled && styles.disabledLabel],
+          children: item.label
+        })
+      }, item.value);
+    })]
+  });
+});
+SegmentedControl.displayName = 'SegmentedControl';
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/SegmentedControl/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_index2","_themeProvider","_index3","_rem","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","sizes","xs","fontSize","rem","padding","height","sm","md","lg","xl","useStyles","createStyles","theme","radius","disabled","orientation","fullWidth","size","sizeStyles","root","position","flexDirection","backgroundColor","colorScheme","colors","dark","gray","borderRadius","fn","opacity","width","indicator","white","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","segment","flex","paddingHorizontal","paddingVertical","minHeight","justifyContent","alignItems","zIndex","label","fontWeight","textAlign","activeLabel","color","black","inactiveLabel","disabledLabel","defaultProps","transitionDuration","SegmentedControl","exports","forwardRef","props","ref","value","controlledValue","defaultValue","onChange","data","style","others","useComponentDefaultProps","styles","sx","name","normalizedData","map","item","uncontrolledValue","setUncontrolledValue","useState","segmentLayouts","setSegmentLayouts","undefined","activeIndex","findIndex","indicatorPosition","useRef","Animated","Value","current","indicatorSize","useEffect","layout","parallel","timing","toValue","x","y","duration","useNativeDriver","start","handleSegmentLayout","index","event","nativeEvent","prev","newLayouts","handlePress","indicatorStyle","jsxs","BoxView","children","length","jsx","View","isActive","isDisabled","TouchableOpacity","onPress","activeOpacity","onLayout","Text","displayName"],"sourceRoot":"../../../../src","sources":["components/SegmentedControl/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Select/index.js ADDED Viewed

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../BoxView/index.js");
+var _index2 = require("../Text/index.js");
+var _index3 = require("../TextInput/index.js");
+var _themeProvider = require("../../theme/theme-provider.js");
+var _index4 = require("../../theme/index.js");
+var _rem = require("../../theme/utils/rem.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const useStyles = (0, _index4.createStyles)((theme, {
+  color
+}) => {
+  const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+  return {
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'flex-end'
+    },
+    modalContent: {
+      backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[7] : theme.white,
+      borderTopLeftRadius: theme.radius.lg,
+      borderTopRightRadius: theme.radius.lg,
+      maxHeight: '80%'
+    },
+    searchContainer: {
+      padding: theme.spacing.md,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[2]
+    },
+    listContainer: {
+      paddingVertical: (0, _rem.rem)(8)
+    },
+    item: {
+      paddingVertical: (0, _rem.rem)(12),
+      paddingHorizontal: theme.spacing.md,
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    itemSelected: {
+      backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : colors?.[0] || (theme.colors.gray || [])[0]
+    },
+    itemDisabled: {
+      opacity: 0.4
+    },
+    itemText: {
+      fontSize: (0, _rem.rem)(14),
+      color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black
+    },
+    itemTextSelected: {
+      fontWeight: '600',
+      color: colors?.[6] || colors?.[5] || theme.primaryBgColor
+    },
+    groupLabel: {
+      paddingVertical: (0, _rem.rem)(8),
+      paddingHorizontal: theme.spacing.md,
+      fontSize: (0, _rem.rem)(12),
+      fontWeight: '600',
+      color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+      textTransform: 'uppercase'
+    },
+    emptyState: {
+      padding: theme.spacing.xl,
+      alignItems: 'center'
+    },
+    emptyText: {
+      color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6]
+    }
+  };
+});
+const defaultProps = {
+  size: 'md',
+  radius: 'sm',
+  color: 'blue',
+  disabled: false,
+  searchable: false,
+  clearable: false,
+  maxDropdownHeight: 400,
+  searchPlaceholder: 'Search...',
+  clearButtonLabel: 'Clear'
+};
+const normalizeData = data => {
+  return data.map(item => typeof item === 'string' ? {
+    value: item,
+    label: item
+  } : item);
+};
+const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    data,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    placeholder,
+    label,
+    description,
+    error,
+    size,
+    radius,
+    color,
+    disabled,
+    searchable,
+    searchPlaceholder,
+    clearable,
+    clearButtonLabel,
+    maxDropdownHeight,
+    icon,
+    rightSection,
+    style,
+    ...others
+  } = (0, _themeProvider.useComponentDefaultProps)('Select', defaultProps, props);
+  const [opened, setOpened] = (0, _react.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, _react.useState)('');
+  const [value, setValue] = (0, _react.useState)(defaultValue || '');
+  const {
+    styles
+  } = useStyles({
+    color,
+    size
+  }, {
+    name: 'Select'
+  });
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : value;
+  const normalizedData = normalizeData(data);
+  const selectedItem = normalizedData.find(item => item.value === currentValue);
+  const filteredData = searchable ? normalizedData.filter(item => item.label.toLowerCase().includes(searchQuery.toLowerCase())) : normalizedData;
+  const handleSelect = itemValue => {
+    if (!isControlled) {
+      setValue(itemValue);
+    }
+    onChange?.(itemValue);
+    setOpened(false);
+    setSearchQuery('');
+  };
+  const handleClear = () => {
+    if (!isControlled) {
+      setValue('');
+    }
+    onChange?.('');
+  };
+  const groupedData = {};
+  let ungroupedItems = [];
+  filteredData.forEach(item => {
+    if (item.group) {
+      if (!groupedData[item.group]) {
+        groupedData[item.group] = [];
+      }
+      groupedData[item.group].push(item);
+    } else {
+      ungroupedItems.push(item);
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.TextInput, {
+      ref: ref,
+      label: label,
+      description: description,
+      error: error,
+      size: size,
+      radius: radius,
+      icon: icon,
+      rightSection: rightSection,
+      value: selectedItem?.label || '',
+      placeholder: placeholder,
+      editable: !disabled,
+      onPress: () => !disabled && setOpened(true),
+      style: style,
+      ...others
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      visible: opened,
+      transparent: true,
+      animationType: "slide",
+      onRequestClose: () => setOpened(false),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        activeOpacity: 1,
+        style: styles.modalOverlay,
+        onPress: () => setOpened(false),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          activeOpacity: 1,
+          style: styles.modalContent,
+          children: [searchable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxView, {
+            style: styles.searchContainer,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.TextInput, {
+              placeholder: searchPlaceholder,
+              value: searchQuery,
+              onChange: e => setSearchQuery(e.nativeEvent.text),
+              autoFocus: true
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+            style: {
+              maxHeight: maxDropdownHeight
+            },
+            contentContainerStyle: styles.listContainer,
+            children: [clearable && currentValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              style: styles.item,
+              onPress: handleClear,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+                style: styles.itemText,
+                children: clearButtonLabel
+              })
+            }), ungroupedItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              style: [styles.item, currentValue === item.value && styles.itemSelected, item.disabled && styles.itemDisabled],
+              onPress: () => !item.disabled && handleSelect(item.value),
+              disabled: item.disabled,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+                style: [styles.itemText, currentValue === item.value && styles.itemTextSelected],
+                children: item.label
+              })
+            }, item.value)), Object.keys(groupedData).map(group => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+                style: styles.groupLabel,
+                children: group
+              }), (groupedData[group] || []).map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                style: [styles.item, currentValue === item.value && styles.itemSelected, item.disabled && styles.itemDisabled],
+                onPress: () => !item.disabled && handleSelect(item.value),
+                disabled: item.disabled,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+                  style: [styles.itemText, currentValue === item.value && styles.itemTextSelected],
+                  children: item.label
+                })
+              }, item.value))]
+            }, group)), filteredData.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.BoxView, {
+              style: styles.emptyState,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+                style: styles.emptyText,
+                children: "No options found"
+              })
+            })]
+          })]
+        })
+      })
+    })]
+  });
+});
+Select.displayName = 'Select';
+//# sourceMappingURL=index.js.map