@sudobility/components-rn 1.0.36 → 1.0.38

package/dist/index.cjs.js

@@ -5,6 +5,7 @@ const React = require("react");
 const reactNative = require("react-native");
 const classVarianceAuthority = require("class-variance-authority");
 const design = require("@sudobility/design");
+const reactNativeSafeAreaContext = require("react-native-safe-area-context");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -2853,6 +2854,203 @@ const SelectTrigger = Select;
 const SelectValue = ({
   placeholder = "Select..."
 }) => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { className: "text-gray-400 dark:text-gray-500", children: placeholder });
+const ItemSeparator = () => /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.View, { style: styles$4.separator });
+const PopupSelect = ({
+  value,
+  onValueChange,
+  options,
+  placeholder = "Select...",
+  title = "Select",
+  disabled = false,
+  triggerStyle,
+  triggerTextStyle
+}) => {
+  const insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  const [modalVisible, setModalVisible] = React.useState(false);
+  const selectedOption = options.find((opt) => opt.value === value);
+  const handleSelect = React.useCallback(
+    (optionValue) => {
+      onValueChange == null ? void 0 : onValueChange(optionValue);
+      setModalVisible(false);
+    },
+    [onValueChange]
+  );
+  const renderOption = ({ item }) => {
+    const isSelected = item.value === value;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      reactNative.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(
+            reactNative.Text,
+            {
+              style: [
+                styles$4.optionLabel,
+                isSelected && styles$4.optionLabelSelected,
+                item.disabled && styles$4.optionDisabled
+              ],
+              children: item.label
+            }
+          ),
+          isSelected && /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { style: styles$4.checkmark, children: "✓" })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      reactNative.TouchableOpacity,
+      {
+        style: [
+          styles$4.trigger,
+          disabled && styles$4.triggerDisabled,
+          triggerStyle
+        ],
+        onPress: () => !disabled && setModalVisible(true),
+        activeOpacity: 0.7,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            reactNative.Text,
+            {
+              style: [
+                styles$4.triggerText,
+                !selectedOption && styles$4.triggerPlaceholder,
+                triggerTextStyle
+              ],
+              numberOfLines: 1,
+              children: (selectedOption == null ? void 0 : selectedOption.label) ?? placeholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { style: styles$4.triggerArrow, children: "▼" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      reactNative.Modal,
+      {
+        visible: modalVisible,
+        animationType: "slide",
+        presentationStyle: "pageSheet",
+        onRequestClose: () => setModalVisible(false),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { style: [styles$4.modalContainer, { paddingTop: insets.top }], children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(reactNative.View, { style: styles$4.modalHeader, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { style: styles$4.modalTitle, children: title }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              reactNative.Pressable,
+              {
+                style: styles$4.closeButton,
+                onPress: () => setModalVisible(false),
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(reactNative.Text, { style: styles$4.closeButtonText, children: "Done" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            reactNative.FlatList,
+            {
+              data: options,
+              keyExtractor: (item) => item.value,
+              renderItem: renderOption,
+              contentContainerStyle: styles$4.listContent,
+              ItemSeparatorComponent: ItemSeparator
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+const styles$4 = reactNative.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,
@@ -10642,7 +10840,7 @@ function VirtualList({
     },
     [renderItem]
   );
-  const ItemSeparator = React__namespace.useCallback(() => {
+  const ItemSeparator2 = React__namespace.useCallback(() => {
     if (!showSeparator) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       reactNative.View,
@@ -10684,7 +10882,7 @@ function VirtualList({
           horizontal,
           showsVerticalScrollIndicator: !horizontal,
           showsHorizontalScrollIndicator: horizontal,
-          ItemSeparatorComponent: showSeparator ? ItemSeparator : void 0,
+          ItemSeparatorComponent: showSeparator ? ItemSeparator2 : void 0,
           ListEmptyComponent: ListEmpty,
           onRefresh,
           refreshing,
@@ -10861,6 +11059,7 @@ exports.PageSectionHeader = PageSectionHeader;
 exports.Pagination = Pagination;
 exports.PhoneInput = PhoneInput;
 exports.Popover = Popover;
+exports.PopupSelect = PopupSelect;
 exports.Progress = Progress;
 exports.ProgressBar = ProgressBar;
 exports.ProgressCircle = ProgressCircle;