@webority-technologies/mobile 0.0.1

package/lib/module/components/Select/Select.js

@@ -0,0 +1,536 @@
+"use strict";
+
+/**
+ * Select — single + multi select with bottom-sheet picker.
+ *
+ * Self-contained: implements its own RN Modal-backed slide-up sheet so it has
+ * no internal dependency on the BottomSheet component. Supports optional
+ * client-side search, theme-aware styling, full a11y, and dark-mode auto.
+ */
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Dimensions, Easing, FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    minHeight: 38,
+    fontSize: 13,
+    borderRadius: 10,
+    iconSize: 16
+  },
+  md: {
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    minHeight: 46,
+    fontSize: 15,
+    borderRadius: 12,
+    iconSize: 18
+  },
+  lg: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    minHeight: 54,
+    fontSize: 16,
+    borderRadius: 14,
+    iconSize: 20
+  }
+};
+const Select = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    options,
+    placeholder,
+    searchable = false,
+    label,
+    error,
+    disabled = false,
+    size = 'md',
+    accessibilityLabel,
+    style,
+    triggerStyle,
+    textStyle,
+    testID
+  } = props;
+  const multi = props.multi === true;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeStyles = sizeMap[size];
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const screenHeight = Dimensions.get('window').height;
+  const sheetMaxHeight = Math.round(screenHeight * 0.7);
+
+  // Animations: backdrop fade + sheet slide-up.
+  const backdropAnim = useRef(new Animated.Value(0)).current;
+  const sheetAnim = useRef(new Animated.Value(sheetMaxHeight)).current;
+  useEffect(() => {
+    if (open) {
+      Animated.parallel([Animated.timing(backdropAnim, {
+        toValue: 1,
+        duration: theme.motion.duration.fast,
+        easing: Easing.bezier(...theme.motion.easing.standard),
+        useNativeDriver: true
+      }), Animated.spring(sheetAnim, {
+        toValue: 0,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      })]).start();
+    } else {
+      Animated.parallel([Animated.timing(backdropAnim, {
+        toValue: 0,
+        duration: theme.motion.duration.fast,
+        easing: Easing.bezier(...theme.motion.easing.standard),
+        useNativeDriver: true
+      }), Animated.timing(sheetAnim, {
+        toValue: sheetMaxHeight,
+        duration: theme.motion.duration.fast,
+        easing: Easing.bezier(...theme.motion.easing.accelerate),
+        useNativeDriver: true
+      })]).start();
+    }
+  }, [open, backdropAnim, sheetAnim, sheetMaxHeight, theme.motion.duration.fast, theme.motion.easing.standard, theme.motion.easing.accelerate, theme.motion.spring.snappy]);
+
+  // Selection helpers — typed to keep callbacks fully type-safe.
+  const isSelected = useCallback(optValue => {
+    if (multi) {
+      const arr = props.value ?? [];
+      return arr.includes(optValue);
+    }
+    return props.value === optValue;
+  }, [multi, props.value]);
+  const selectedOptions = useMemo(() => {
+    if (multi) {
+      const arr = props.value ?? [];
+      return options.filter(o => arr.includes(o.value));
+    }
+    const v = props.value;
+    if (v === undefined || v === null) return [];
+    const found = options.find(o => o.value === v);
+    return found ? [found] : [];
+  }, [multi, options, props.value]);
+  const filteredOptions = useMemo(() => {
+    if (!searchable || query.trim().length === 0) return options;
+    const q = query.trim().toLowerCase();
+    return options.filter(o => o.label.toLowerCase().includes(q) || (o.description ?? '').toLowerCase().includes(q));
+  }, [searchable, query, options]);
+  const handleOpen = useCallback(() => {
+    if (disabled) return;
+    triggerHaptic('selection');
+    setOpen(true);
+  }, [disabled]);
+  const handleClose = useCallback(() => {
+    setOpen(false);
+    setQuery('');
+  }, []);
+  const handleSelect = useCallback(option => {
+    if (option.disabled) return;
+    triggerHaptic('selection');
+    if (multi) {
+      const current = props.value ?? [];
+      const next = current.includes(option.value) ? current.filter(v => v !== option.value) : [...current, option.value];
+      props.onChange(next);
+      return;
+    }
+    props.onChange(option.value);
+    handleClose();
+  }, [multi, props, handleClose]);
+
+  // Trigger label / placeholder text.
+  const triggerText = selectedOptions.length === 0 ? placeholder ?? 'Select…' : selectedOptions.map(o => o.label).join(', ');
+  const showingPlaceholder = selectedOptions.length === 0;
+  const hasError = typeof error === 'string' && error.length > 0;
+  const borderColor = hasError ? theme.colors.border.error : theme.colors.border.primary;
+  const a11ySummary = selectedOptions.length === 0 ? placeholder ?? 'No selection' : `Selected: ${selectedOptions.map(o => o.label).join(', ')}`;
+  const a11yLabel = accessibilityLabel ?? `${label ?? 'Select'}. ${a11ySummary}`;
+  const renderOption = ({
+    item
+  }) => {
+    const selected = isSelected(item.value);
+    const optDisabled = item.disabled === true;
+    return /*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => handleSelect(item),
+      disabled: optDisabled,
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      accessibilityRole: "button",
+      accessibilityLabel: item.label,
+      accessibilityState: {
+        selected,
+        disabled: optDisabled
+      },
+      style: ({
+        pressed
+      }) => [styles.optionRow, {
+        backgroundColor: selected ? theme.colors.surface.selected : pressed ? theme.colors.surface.pressed : 'transparent',
+        opacity: optDisabled ? 0.5 : 1,
+        paddingHorizontal: theme.spacing.lg,
+        paddingVertical: theme.spacing.md
+      }],
+      children: [item.icon ? /*#__PURE__*/_jsx(View, {
+        style: styles.optionIcon,
+        children: item.icon
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: styles.optionTextWrap,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.optionLabel, {
+            color: selected ? theme.colors.primary : theme.colors.text.primary,
+            fontSize: theme.typography.fontSize.base,
+            fontWeight: selected ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
+          }],
+          numberOfLines: 1,
+          children: item.label
+        }), item.description ? /*#__PURE__*/_jsx(Text, {
+          style: [styles.optionDescription, {
+            color: theme.colors.text.tertiary,
+            fontSize: theme.typography.fontSize.sm
+          }],
+          numberOfLines: 2,
+          children: item.description
+        }) : null]
+      }), multi ? /*#__PURE__*/_jsx(View, {
+        style: [styles.checkbox, {
+          borderColor: selected ? theme.colors.primary : theme.colors.border.primary,
+          backgroundColor: selected ? theme.colors.primary : 'transparent'
+        }],
+        children: selected ? /*#__PURE__*/_jsx(View, {
+          style: styles.checkboxTick
+        }) : null
+      }) : selected ? /*#__PURE__*/_jsx(View, {
+        style: [styles.singleSelectedDot, {
+          backgroundColor: theme.colors.primary
+        }]
+      }) : null]
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, {
+        color: hasError ? theme.colors.error : theme.colors.text.secondary,
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: theme.typography.fontWeight.medium,
+        marginBottom: theme.spacing.xxs
+      }],
+      children: label
+    }) : null, /*#__PURE__*/_jsxs(Pressable, {
+      ref: ref,
+      onPress: handleOpen,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      accessibilityState: {
+        disabled,
+        expanded: open
+      },
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      style: ({
+        pressed
+      }) => [styles.trigger, {
+        minHeight: sizeStyles.minHeight,
+        paddingHorizontal: sizeStyles.paddingHorizontal,
+        paddingVertical: sizeStyles.paddingVertical,
+        borderRadius: sizeStyles.borderRadius,
+        borderColor,
+        borderWidth: 1.5,
+        backgroundColor: disabled ? theme.colors.surface.disabled : pressed ? theme.colors.surface.pressed : theme.colors.background.primary,
+        opacity: disabled ? 0.65 : 1
+      }, triggerStyle],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.triggerText, {
+          color: showingPlaceholder ? theme.colors.text.tertiary : theme.colors.text.primary,
+          fontSize: sizeStyles.fontSize,
+          fontWeight: theme.typography.fontWeight.medium
+        }, textStyle],
+        numberOfLines: 1,
+        children: triggerText
+      }), /*#__PURE__*/_jsx(Chevron, {
+        color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary,
+        size: sizeStyles.iconSize,
+        open: open
+      })]
+    }), hasError ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.errorText, {
+        color: theme.colors.error,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs
+      }],
+      accessibilityLiveRegion: "polite",
+      children: error
+    }) : null, /*#__PURE__*/_jsx(Modal, {
+      visible: open,
+      transparent: true,
+      animationType: "none",
+      onRequestClose: handleClose,
+      statusBarTranslucent: true,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: StyleSheet.absoluteFill,
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          style: [StyleSheet.absoluteFillObject, {
+            backgroundColor: theme.colors.background.overlay,
+            opacity: backdropAnim
+          }],
+          children: /*#__PURE__*/_jsx(Pressable, {
+            style: StyleSheet.absoluteFill,
+            onPress: handleClose,
+            accessibilityRole: "button",
+            accessibilityLabel: "Close picker"
+          })
+        }), /*#__PURE__*/_jsxs(Animated.View, {
+          accessibilityViewIsModal: true,
+          accessibilityLabel: label ?? placeholder ?? 'Options',
+          style: [styles.sheet, {
+            maxHeight: sheetMaxHeight,
+            backgroundColor: theme.colors.background.elevated,
+            borderTopLeftRadius: theme.radius.xl,
+            borderTopRightRadius: theme.radius.xl,
+            transform: [{
+              translateY: sheetAnim
+            }],
+            ...theme.shadows.xl
+          }],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.sheetHandleRow,
+            children: /*#__PURE__*/_jsx(View, {
+              style: [styles.sheetHandle, {
+                backgroundColor: theme.colors.border.primary
+              }]
+            })
+          }), label ? /*#__PURE__*/_jsx(Text, {
+            style: [styles.sheetTitle, {
+              color: theme.colors.text.primary,
+              fontSize: theme.typography.fontSize.lg,
+              fontWeight: theme.typography.fontWeight.semibold,
+              paddingHorizontal: theme.spacing.lg,
+              marginBottom: theme.spacing.sm
+            }],
+            children: label
+          }) : null, searchable ? /*#__PURE__*/_jsx(View, {
+            style: [styles.searchWrap, {
+              marginHorizontal: theme.spacing.lg,
+              marginBottom: theme.spacing.sm
+            }],
+            children: /*#__PURE__*/_jsx(TextInput, {
+              value: query,
+              onChangeText: setQuery,
+              placeholder: "Search\u2026",
+              placeholderTextColor: theme.colors.text.tertiary,
+              selectionColor: theme.colors.border.focus,
+              accessibilityLabel: "Search options",
+              style: [styles.searchInput, {
+                color: theme.colors.text.primary,
+                fontSize: theme.typography.fontSize.base,
+                backgroundColor: theme.colors.background.secondary,
+                borderColor: theme.colors.border.primary,
+                borderRadius: theme.radius.md,
+                paddingHorizontal: theme.spacing.md,
+                paddingVertical: theme.spacing.sm
+              }]
+            })
+          }) : null, /*#__PURE__*/_jsx(FlatList, {
+            data: filteredOptions,
+            keyExtractor: item => String(item.value),
+            renderItem: renderOption,
+            keyboardShouldPersistTaps: "handled",
+            showsVerticalScrollIndicator: true,
+            ListEmptyComponent: /*#__PURE__*/_jsx(Text, {
+              style: [styles.empty, {
+                color: theme.colors.text.tertiary,
+                fontSize: theme.typography.fontSize.sm,
+                paddingVertical: theme.spacing.xl
+              }],
+              children: "No options"
+            })
+          }), multi ? /*#__PURE__*/_jsx(View, {
+            style: [styles.sheetFooter, {
+              borderTopColor: theme.colors.border.secondary,
+              paddingHorizontal: theme.spacing.lg,
+              paddingVertical: theme.spacing.md
+            }],
+            children: /*#__PURE__*/_jsx(Pressable, {
+              onPress: handleClose,
+              accessibilityRole: "button",
+              accessibilityLabel: "Done",
+              style: ({
+                pressed
+              }) => [styles.doneButton, {
+                backgroundColor: pressed ? theme.colors.primaryPressed : theme.colors.primary,
+                borderRadius: theme.radius.md,
+                paddingVertical: theme.spacing.sm,
+                paddingHorizontal: theme.spacing.lg
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: {
+                  color: theme.colors.text.inverse,
+                  fontSize: theme.typography.fontSize.base,
+                  fontWeight: theme.typography.fontWeight.semibold
+                },
+                children: "Done"
+              })
+            })
+          }) : null]
+        })]
+      })
+    })]
+  });
+});
+Select.displayName = 'Select';
+const Chevron = ({
+  color,
+  size,
+  open
+}) => {
+  const rotate = useRef(new Animated.Value(open ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(rotate, {
+      toValue: open ? 1 : 0,
+      duration: 160,
+      useNativeDriver: true
+    }).start();
+  }, [open, rotate]);
+  const rotation = rotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg']
+  });
+  // Triangle constructed via borders so we don't pull in an icon dep.
+  const half = size / 2;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      marginLeft: 8,
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center',
+      transform: [{
+        rotate: rotation
+      }]
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: 0,
+        height: 0,
+        borderLeftWidth: half * 0.7,
+        borderRightWidth: half * 0.7,
+        borderTopWidth: half * 0.7,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderTopColor: color
+      }
+    })
+  });
+};
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    width: '100%'
+  },
+  label: {
+    includeFontPadding: false
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  triggerText: {
+    flex: 1,
+    includeFontPadding: false
+  },
+  errorText: {
+    includeFontPadding: false
+  },
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    paddingBottom: 16,
+    overflow: 'hidden'
+  },
+  sheetHandleRow: {
+    alignItems: 'center',
+    paddingTop: 10,
+    paddingBottom: 8
+  },
+  sheetHandle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  sheetTitle: {
+    includeFontPadding: false
+  },
+  searchWrap: {
+    width: 'auto'
+  },
+  searchInput: {
+    borderWidth: 1,
+    includeFontPadding: false
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  optionIcon: {
+    marginRight: 12
+  },
+  optionTextWrap: {
+    flex: 1
+  },
+  optionLabel: {
+    includeFontPadding: false
+  },
+  optionDescription: {
+    includeFontPadding: false,
+    marginTop: 2
+  },
+  checkbox: {
+    width: 22,
+    height: 22,
+    borderRadius: 6,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 12
+  },
+  checkboxTick: {
+    width: 10,
+    height: 6,
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    borderColor: '#fff',
+    transform: [{
+      rotate: '-45deg'
+    }, {
+      translateY: -1
+    }]
+  },
+  singleSelectedDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginLeft: 12
+  },
+  empty: {
+    textAlign: 'center'
+  },
+  sheetFooter: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    alignItems: 'flex-end'
+  },
+  doneButton: {
+    alignSelf: 'flex-end'
+  }
+});
+export { Select };
+export default Select;
+//# sourceMappingURL=Select.js.map

package/lib/module/components/Select/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Select, default } from "./Select.js";
+//# sourceMappingURL=index.js.map