@sudobility/components-rn 1.0.36 → 1.0.38

package/dist/index.d.ts

@@ -25,6 +25,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';
 export * from './ui/Text';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.esm.js

@@ -1,10 +1,11 @@
 import { clsx } from "clsx";
 import * as React from "react";
 import React__default, { useState, useRef, useCallback, useEffect, createContext, useContext } from "react";
-import { Animated, View, Text as Text$1, Pressable, ActivityIndicator, TextInput, Dimensions, Modal as Modal$1, SafeAreaView, FlatList, Image, KeyboardAvoidingView, ScrollView, Platform, PanResponder, Linking, TouchableWithoutFeedback, useWindowDimensions, StyleSheet, RefreshControl, UIManager, LayoutAnimation, Alert as Alert$1 } from "react-native";
+import { Animated, View, Text as Text$1, Pressable, ActivityIndicator, TextInput, Dimensions, Modal as Modal$1, SafeAreaView, FlatList, StyleSheet, TouchableOpacity, Image, KeyboardAvoidingView, ScrollView, Platform, PanResponder, Linking, TouchableWithoutFeedback, useWindowDimensions, RefreshControl, UIManager, LayoutAnimation, Alert as Alert$1 } from "react-native";
 import { cva } from "class-variance-authority";
 import { variants, getCardVariantColors, textVariants } from "@sudobility/design";
 import { colors, designTokens, textVariants as textVariants2, variants as variants2 } from "@sudobility/design";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 function cn(...inputs) {
   return clsx(inputs);
 }
@@ -2836,6 +2837,203 @@ const SelectTrigger = Select;
 const SelectValue = ({
   placeholder = "Select..."
 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { className: "text-gray-400 dark:text-gray-500", children: placeholder });
+const ItemSeparator = () => /* @__PURE__ */ jsxRuntimeExports.jsx(View, { style: styles$4.separator });
+const PopupSelect = ({
+  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) => {
+      onValueChange == null ? void 0 : onValueChange(optionValue);
+      setModalVisible(false);
+    },
+    [onValueChange]
+  );
+  const renderOption = ({ item }) => {
+    const isSelected = item.value === value;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      TouchableOpacity,
+      {
+        style: [styles$4.optionItem, isSelected && styles$4.optionItemSelected],
+        onPress: () => !item.disabled && handleSelect(item.value),
+        disabled: item.disabled,
+        activeOpacity: 0.7,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text$1,
+            {
+              style: [
+                styles$4.optionLabel,
+                isSelected && styles$4.optionLabelSelected,
+                item.disabled && styles$4.optionDisabled
+              ],
+              children: item.label
+            }
+          ),
+          isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { style: styles$4.checkmark, children: "✓" })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      TouchableOpacity,
+      {
+        style: [
+          styles$4.trigger,
+          disabled && styles$4.triggerDisabled,
+          triggerStyle
+        ],
+        onPress: () => !disabled && setModalVisible(true),
+        activeOpacity: 0.7,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Text$1,
+            {
+              style: [
+                styles$4.triggerText,
+                !selectedOption && styles$4.triggerPlaceholder,
+                triggerTextStyle
+              ],
+              numberOfLines: 1,
+              children: (selectedOption == null ? void 0 : selectedOption.label) ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { style: styles$4.triggerArrow, children: "▼" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Modal$1,
+      {
+        visible: modalVisible,
+        animationType: "slide",
+        presentationStyle: "pageSheet",
+        onRequestClose: () => setModalVisible(false),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { style: [styles$4.modalContainer, { paddingTop: insets.top }], children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(View, { style: styles$4.modalHeader, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { style: styles$4.modalTitle, children: title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Pressable,
+              {
+                style: styles$4.closeButton,
+                onPress: () => setModalVisible(false),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text$1, { style: styles$4.closeButtonText, children: "Done" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FlatList,
+            {
+              data: options,
+              keyExtractor: (item) => item.value,
+              renderItem: renderOption,
+              contentContainerStyle: styles$4.listContent,
+              ItemSeparatorComponent: ItemSeparator
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+const styles$4 = 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
+  }
+});
 const SearchInput = ({
   value: controlledValue,
   onChangeText,
@@ -10625,7 +10823,7 @@ function VirtualList({
     },
     [renderItem]
   );
-  const ItemSeparator = React.useCallback(() => {
+  const ItemSeparator2 = React.useCallback(() => {
     if (!showSeparator) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       View,
@@ -10667,7 +10865,7 @@ function VirtualList({
           horizontal,
           showsVerticalScrollIndicator: !horizontal,
           showsHorizontalScrollIndicator: horizontal,
-          ItemSeparatorComponent: showSeparator ? ItemSeparator : void 0,
+          ItemSeparatorComponent: showSeparator ? ItemSeparator2 : void 0,
           ListEmptyComponent: ListEmpty,
           onRefresh,
           refreshing,
@@ -10829,6 +11027,7 @@ export {
   Pagination,
   PhoneInput,
   Popover,
+  PopupSelect,
   Progress,
   ProgressBar,
   ProgressCircle,