@sudobility/components-rn 1.0.37 → 1.0.39

package/dist/ui/PopupSelect/PopupSelect.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+export interface PopupSelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface PopupSelectProps {
+    /** Currently selected value */
+    value?: string;
+    /** Callback when value changes */
+    onValueChange?: (value: string) => void;
+    /** Options to display */
+    options: PopupSelectOption[];
+    /** Placeholder text when no value selected */
+    placeholder?: string;
+    /** Title shown in the modal header */
+    title?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Style overrides for the trigger button */
+    triggerStyle?: object;
+    /** Style overrides for the trigger text */
+    triggerTextStyle?: object;
+}
+/**
+ * PopupSelect Component
+ *
+ * A select component that opens a pageSheet modal with a styled option list.
+ * Provides a native-feeling selection experience on iOS and Android.
+ *
+ * @example
+ * ```tsx
+ * <PopupSelect
+ *   value={selected}
+ *   onValueChange={setSelected}
+ *   options={[
+ *     { label: 'Option A', value: 'a' },
+ *     { label: 'Option B', value: 'b' },
+ *   ]}
+ *   placeholder="Choose..."
+ *   title="Select Option"
+ * />
+ * ```
+ */
+export declare const PopupSelect: React.FC<PopupSelectProps>;
+//# sourceMappingURL=PopupSelect.d.ts.map

package/dist/ui/PopupSelect/PopupSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupSelect.d.ts","sourceRoot":"","sources":["../../../src/ui/PopupSelect/PopupSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAYrD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yBAAyB;IACzB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkGlD,CAAC"}

package/dist/ui/PopupSelect/index.d.ts

@@ -0,0 +1,3 @@
+export { PopupSelect } from './PopupSelect';
+export type { PopupSelectProps, PopupSelectOption } from './PopupSelect';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/PopupSelect/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/PopupSelect/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudobility/components-rn",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "React Native UI components and design system - Ported from @sudobility/components",
   "type": "module",
   "main": "dist/index.esm.js",
@@ -41,7 +41,7 @@
   ],
   "author": "Sudobility",
   "peerDependencies": {
-    "@sudobility/design": "^1.1.24",
+    "@sudobility/design": "^1.1.25",
     "@sudobility/types": "^1.9.61",
     "nativewind": ">=4.0.0",
     "react": "^18.0.0 || ^19.0.0",
@@ -64,7 +64,7 @@
     "@react-native/babel-preset": "^0.84.0",
     "@react-native/js-polyfills": "^0.84.0",
     "@react-native/normalize-colors": "^0.84.0",
-    "@sudobility/design": "^1.1.24",
+    "@sudobility/design": "^1.1.25",
     "@sudobility/types": "^1.9.61",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^13.3.3",

package/src/index.ts

@@ -33,6 +33,7 @@ export * from './ui/Checkbox';
 export * from './ui/Switch';
 export * from './ui/HelperText';
 export * from './ui/Select';
+export * from './ui/PopupSelect';
 export * from './ui/SearchInput';
 export * from './ui/NumberInput';
 

package/src/ui/PopupSelect/PopupSelect.tsx

@@ -0,0 +1,247 @@
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Modal,
+  FlatList,
+  StyleSheet,
+  Pressable,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export interface PopupSelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface PopupSelectProps {
+  /** Currently selected value */
+  value?: string;
+  /** Callback when value changes */
+  onValueChange?: (value: string) => void;
+  /** Options to display */
+  options: PopupSelectOption[];
+  /** Placeholder text when no value selected */
+  placeholder?: string;
+  /** Title shown in the modal header */
+  title?: string;
+  /** Whether the select is disabled */
+  disabled?: boolean;
+  /** Style overrides for the trigger button */
+  triggerStyle?: object;
+  /** Style overrides for the trigger text */
+  triggerTextStyle?: object;
+}
+
+const ItemSeparator = () => <View style={styles.separator} />;
+
+/**
+ * PopupSelect Component
+ *
+ * A select component that opens a pageSheet modal with a styled option list.
+ * Provides a native-feeling selection experience on iOS and Android.
+ *
+ * @example
+ * ```tsx
+ * <PopupSelect
+ *   value={selected}
+ *   onValueChange={setSelected}
+ *   options={[
+ *     { label: 'Option A', value: 'a' },
+ *     { label: 'Option B', value: 'b' },
+ *   ]}
+ *   placeholder="Choose..."
+ *   title="Select Option"
+ * />
+ * ```
+ */
+export const PopupSelect: React.FC<PopupSelectProps> = ({
+  value,
+  onValueChange,
+  options,
+  placeholder = 'Select...',
+  title = 'Select',
+  disabled = false,
+  triggerStyle,
+  triggerTextStyle,
+}) => {
+  const insets = useSafeAreaInsets();
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const selectedOption = options.find(opt => opt.value === value);
+
+  const handleSelect = useCallback(
+    (optionValue: string) => {
+      onValueChange?.(optionValue);
+      setModalVisible(false);
+    },
+    [onValueChange]
+  );
+
+  const renderOption = ({ item }: { item: PopupSelectOption }) => {
+    const isSelected = item.value === value;
+    return (
+      <TouchableOpacity
+        style={[styles.optionItem, isSelected && styles.optionItemSelected]}
+        onPress={() => !item.disabled && handleSelect(item.value)}
+        disabled={item.disabled}
+        activeOpacity={0.7}
+      >
+        <Text
+          style={[
+            styles.optionLabel,
+            isSelected && styles.optionLabelSelected,
+            item.disabled && styles.optionDisabled,
+          ]}
+        >
+          {item.label}
+        </Text>
+        {isSelected && <Text style={styles.checkmark}>✓</Text>}
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        style={[
+          styles.trigger,
+          disabled && styles.triggerDisabled,
+          triggerStyle,
+        ]}
+        onPress={() => !disabled && setModalVisible(true)}
+        activeOpacity={0.7}
+      >
+        <Text
+          style={[
+            styles.triggerText,
+            !selectedOption && styles.triggerPlaceholder,
+            triggerTextStyle,
+          ]}
+          numberOfLines={1}
+        >
+          {selectedOption?.label ?? placeholder}
+        </Text>
+        <Text style={styles.triggerArrow}>▼</Text>
+      </TouchableOpacity>
+
+      <Modal
+        visible={modalVisible}
+        animationType='slide'
+        presentationStyle='pageSheet'
+        onRequestClose={() => setModalVisible(false)}
+      >
+        <View style={[styles.modalContainer, { paddingTop: insets.top }]}>
+          <View style={styles.modalHeader}>
+            <Text style={styles.modalTitle}>{title}</Text>
+            <Pressable
+              style={styles.closeButton}
+              onPress={() => setModalVisible(false)}
+            >
+              <Text style={styles.closeButtonText}>Done</Text>
+            </Pressable>
+          </View>
+
+          <FlatList
+            data={options}
+            keyExtractor={(item: PopupSelectOption) => item.value}
+            renderItem={renderOption}
+            contentContainerStyle={styles.listContent}
+            ItemSeparatorComponent={ItemSeparator}
+          />
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: '#d1d5db',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: '#ffffff',
+  },
+  triggerDisabled: {
+    opacity: 0.5,
+  },
+  triggerText: {
+    flex: 1,
+    fontSize: 16,
+    color: '#1a1a1a',
+  },
+  triggerPlaceholder: {
+    color: '#9ca3af',
+  },
+  triggerArrow: {
+    fontSize: 10,
+    color: '#9ca3af',
+    marginLeft: 8,
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: '#ffffff',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e9ecef',
+  },
+  modalTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#1a1a1a',
+  },
+  closeButton: {
+    padding: 8,
+  },
+  closeButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#3b82f6',
+  },
+  listContent: {
+    padding: 16,
+  },
+  optionItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    backgroundColor: '#f8f9fa',
+    borderRadius: 12,
+  },
+  optionItemSelected: {
+    backgroundColor: '#e0f2fe',
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: 16,
+    color: '#1a1a1a',
+  },
+  optionLabelSelected: {
+    fontWeight: '600',
+    color: '#3b82f6',
+  },
+  optionDisabled: {
+    opacity: 0.5,
+  },
+  checkmark: {
+    fontSize: 18,
+    color: '#3b82f6',
+    fontWeight: 'bold',
+  },
+  separator: {
+    height: 8,
+  },
+});

package/src/ui/PopupSelect/index.ts

@@ -0,0 +1,2 @@
+export { PopupSelect } from './PopupSelect';
+export type { PopupSelectProps, PopupSelectOption } from './PopupSelect';