@urbint/cl 1.0.1

package/src/components/Select/Select.tsx

@@ -0,0 +1,659 @@
+/**
+ * Select Component
+ * Dropdown selection component with popover-style dropdown
+ * Supports single and multi-select modes with hover states and search
+ */
+
+import React, { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import { View, ViewProps, Pressable, Text, Modal, ScrollView, StyleSheet, Platform, LayoutRectangle, TextInput } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, spacing, borderRadius, typography, elevation } from '../../styles/tokens';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  /** Any additional data for custom rendering */
+  [key: string]: any;
+}
+
+export interface RenderOptionProps {
+  option: SelectOption;
+  isSelected: boolean;
+  isDisabled: boolean;
+  isHovered?: boolean;
+  /** Search query for highlighting matches */
+  searchQuery?: string;
+}
+
+export interface RenderSelectedValueProps {
+  /** Single selected option (when isMultiple is false) */
+  option: SelectOption | undefined;
+  /** Multiple selected options (when isMultiple is true) */
+  selectedOptions: SelectOption[];
+  placeholder: string;
+  isMultiple: boolean;
+}
+
+export interface SelectProps extends Omit<ViewProps, 'children'> {
+  /** Select options */
+  options: SelectOption[];
+  /** Selected value (string for single, string[] for multiple) */
+  value?: string | string[];
+  /** Default value (string for single, string[] for multiple) */
+  defaultValue?: string | string[];
+  /** On change handler */
+  onChange?: (value: string | string[]) => void;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Label text */
+  label?: string;
+  /** Helper text */
+  helperText?: string;
+  /** Error message */
+  errorMessage?: string;
+  /** Is invalid */
+  isInvalid?: boolean;
+  /** Is disabled */
+  isDisabled?: boolean;
+  /** Is required */
+  isRequired?: boolean;
+  /** Enable multiple selection */
+  isMultiple?: boolean;
+  /** Enable search/filter functionality */
+  isSearchable?: boolean;
+  /** Placeholder text for search input */
+  searchPlaceholder?: string;
+  /** Text to display when no results match search */
+  noResultsText?: string;
+  /** Select size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Select variant */
+  variant?: 'outline' | 'filled';
+  /** Custom render function for dropdown options */
+  renderOption?: (props: RenderOptionProps) => React.ReactNode;
+  /** Custom render function for the selected value display */
+  renderSelectedValue?: (props: RenderSelectedValueProps) => React.ReactNode;
+  /** Custom filter function for search */
+  filterOption?: (option: SelectOption, searchQuery: string) => boolean;
+}
+
+export const Select = forwardRef<View, SelectProps>(
+  (
+    {
+      style,
+      options,
+      value: controlledValue,
+      defaultValue,
+      onChange,
+      placeholder = 'Select an option',
+      label,
+      helperText,
+      errorMessage,
+      isInvalid = false,
+      isDisabled = false,
+      isRequired = false,
+      isMultiple = false,
+      isSearchable = false,
+      searchPlaceholder = 'Search...',
+      noResultsText = 'No results found',
+      size = 'md',
+      variant = 'outline',
+      renderOption,
+      renderSelectedValue,
+      filterOption,
+      ...props
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState<string | string[]>(
+      defaultValue ?? (isMultiple ? [] : '')
+    );
+    const [dropdownPosition, setDropdownPosition] = useState<LayoutRectangle | null>(null);
+    const [hoveredOption, setHoveredOption] = useState<string | null>(null);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [searchFocused, setSearchFocused] = useState(false);
+    const selectRef = useRef<View>(null);
+    const searchInputRef = useRef<TextInput>(null);
+
+    const isControlled = controlledValue !== undefined;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    
+    // Normalize to array for easier handling
+    const selectedValues: string[] = isMultiple 
+      ? (Array.isArray(currentValue) ? currentValue : [currentValue].filter(Boolean))
+      : (currentValue ? [currentValue as string] : []);
+    
+    const selectedOptions = options.filter((opt) => selectedValues.includes(opt.value));
+    const selectedOption = selectedOptions[0]; // For single select backward compatibility
+    const hasError = isInvalid || !!errorMessage;
+
+    // Default filter function
+    const defaultFilterOption = (option: SelectOption, query: string): boolean => {
+      return option.label.toLowerCase().includes(query.toLowerCase());
+    };
+
+    // Filter options based on search query
+    const filteredOptions = isSearchable && searchQuery
+      ? options.filter((option) => 
+          filterOption 
+            ? filterOption(option, searchQuery)
+            : defaultFilterOption(option, searchQuery)
+        )
+      : options;
+
+    // Reset search when dropdown closes
+    useEffect(() => {
+      if (!isOpen) {
+        setSearchQuery('');
+      }
+    }, [isOpen]);
+
+    // Focus search input when dropdown opens
+    useEffect(() => {
+      if (isOpen && isSearchable && Platform.OS === 'web') {
+        // Small delay to ensure modal is rendered
+        setTimeout(() => {
+          searchInputRef.current?.focus();
+        }, 100);
+      }
+    }, [isOpen, isSearchable]);
+
+    const handleOpen = useCallback(() => {
+      if (isDisabled) return;
+      
+      selectRef.current?.measureInWindow((x, y, width, height) => {
+        setDropdownPosition({ x, y, width, height });
+        setIsOpen(true);
+      });
+    }, [isDisabled]);
+
+    const handleSelect = (optionValue: string) => {
+      if (isMultiple) {
+        const newValues = selectedValues.includes(optionValue)
+          ? selectedValues.filter(v => v !== optionValue)
+          : [...selectedValues, optionValue];
+        
+        if (!isControlled) {
+          setInternalValue(newValues);
+        }
+        onChange?.(newValues);
+        // Don't close on multi-select
+      } else {
+        if (!isControlled) {
+          setInternalValue(optionValue);
+        }
+        onChange?.(optionValue);
+        setIsOpen(false);
+      }
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+      setHoveredOption(null);
+    };
+
+    // Get display text for selected value(s)
+    const getDisplayText = () => {
+      if (selectedOptions.length === 0) {
+        return placeholder;
+      }
+      if (isMultiple) {
+        return selectedOptions.map(opt => opt.label).join(', ');
+      }
+      return selectedOption?.label || placeholder;
+    };
+
+    // Calculate dropdown max height based on number of options and search
+    const searchInputHeight = isSearchable ? 48 : 0;
+    const dropdownMaxHeight = Math.min(filteredOptions.length * 48 + 16 + searchInputHeight, 300);
+
+    // Clear button for multiselect
+    const handleClear = (e: any) => {
+      e.stopPropagation();
+      if (!isControlled) {
+        setInternalValue(isMultiple ? [] : '');
+      }
+      onChange?.(isMultiple ? [] : '');
+    };
+
+    const showClearButton = isMultiple && selectedValues.length > 0 && !isDisabled;
+
+    return (
+      <View ref={ref} style={[styles.container, style]} {...props}>
+        {label && (
+          <Text style={[styles.label, isDisabled && styles.labelDisabled]}>
+            {label}
+            {isRequired && <Text style={styles.required}> *</Text>}
+          </Text>
+        )}
+        <Pressable
+          ref={selectRef}
+          onPress={handleOpen}
+          style={({ hovered }: any) => [
+            styles.select,
+            styles[variant],
+            styles[size],
+            hasError && styles.error,
+            isDisabled && styles.disabled,
+            isOpen && styles.selectOpen,
+            Platform.OS === 'web' && hovered && !isDisabled && styles.selectHovered,
+          ]}
+        >
+          {renderSelectedValue ? (
+            <View style={styles.customSelectedValue}>
+              {renderSelectedValue({ 
+                option: selectedOption, 
+                selectedOptions,
+                placeholder,
+                isMultiple 
+              })}
+            </View>
+          ) : (
+            <Text
+              style={[
+                styles.selectText,
+                selectedOptions.length === 0 && styles.placeholder,
+                isDisabled && styles.disabledText,
+              ]}
+              numberOfLines={1}
+            >
+              {getDisplayText()}
+            </Text>
+          )}
+          <View style={styles.iconContainer}>
+            {showClearButton && (
+              <Pressable 
+                onPress={handleClear}
+                style={({ hovered }: any) => [
+                  styles.clearButton,
+                  Platform.OS === 'web' && hovered && styles.clearButtonHovered,
+                ]}
+                hitSlop={8}
+              >
+                <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+                  <Path
+                    d="M18 6L6 18M6 6l12 12"
+                    stroke={colors.text.secondary}
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </Svg>
+              </Pressable>
+            )}
+            <Svg 
+              width={20} 
+              height={20} 
+              viewBox="0 0 24 24" 
+              fill="none"
+              style={{ transform: [{ rotate: isOpen ? '180deg' : '0deg' }] }}
+            >
+              <Path
+                d="M6 9l6 6 6-6"
+                stroke={isDisabled ? colors.text.disabled : colors.text.secondary}
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </Svg>
+          </View>
+        </Pressable>
+        {(helperText || errorMessage) && (
+          <Text style={[styles.helperText, hasError && styles.errorText]}>
+            {errorMessage || helperText}
+          </Text>
+        )}
+
+        <Modal
+          visible={isOpen}
+          transparent
+          animationType="fade"
+          onRequestClose={handleClose}
+        >
+          <Pressable style={styles.modalOverlay} onPress={handleClose}>
+            <View
+              style={[
+                styles.dropdown,
+                dropdownPosition && {
+                  position: 'absolute',
+                  top: dropdownPosition.y + dropdownPosition.height + 4,
+                  left: dropdownPosition.x,
+                  width: dropdownPosition.width,
+                  maxHeight: dropdownMaxHeight,
+                },
+              ]}
+              // Prevent closing when clicking inside dropdown
+              onStartShouldSetResponder={() => true}
+            >
+              {isSearchable && (
+                <View style={styles.searchContainer}>
+                  <View style={[
+                    styles.searchInputWrapper,
+                    searchFocused && styles.searchInputWrapperFocused,
+                  ]}>
+                    <Svg 
+                      width={16} 
+                      height={16} 
+                      viewBox="0 0 24 24" 
+                      fill="none"
+                      style={styles.searchIcon}
+                    >
+                      <Path
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                        stroke={searchFocused ? colors.brand.blue : colors.text.secondary}
+                        strokeWidth={2}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </Svg>
+                    <TextInput
+                      ref={searchInputRef}
+                      style={styles.searchInput}
+                      placeholder={searchPlaceholder}
+                      placeholderTextColor={colors.text.disabled}
+                      value={searchQuery}
+                      onChangeText={setSearchQuery}
+                      onFocus={() => setSearchFocused(true)}
+                      onBlur={() => setSearchFocused(false)}
+                      autoCapitalize="none"
+                      autoCorrect={false}
+                    />
+                    {searchQuery.length > 0 && (
+                      <Pressable 
+                        onPress={() => setSearchQuery('')}
+                        style={({ hovered }: any) => [
+                          styles.searchClearButton,
+                          Platform.OS === 'web' && hovered && styles.clearButtonHovered,
+                        ]}
+                        hitSlop={8}
+                      >
+                        <Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+                          <Path
+                            d="M18 6L6 18M6 6l12 12"
+                            stroke={colors.text.secondary}
+                            strokeWidth={2}
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </Svg>
+                      </Pressable>
+                    )}
+                  </View>
+                </View>
+              )}
+              <ScrollView 
+                style={styles.optionsList} 
+                showsVerticalScrollIndicator={true}
+                nestedScrollEnabled
+                keyboardShouldPersistTaps="handled"
+              >
+                {filteredOptions.length === 0 ? (
+                  <View style={styles.noResults}>
+                    <Text style={styles.noResultsText}>{noResultsText}</Text>
+                  </View>
+                ) : (
+                  filteredOptions.map((option) => {
+                    const isSelected = selectedValues.includes(option.value);
+                    const isOptionDisabled = !!option.disabled;
+                    const isHovered = hoveredOption === option.value;
+
+                    return (
+                      <Pressable
+                        key={option.value}
+                        onPress={() => !isOptionDisabled && handleSelect(option.value)}
+                        onHoverIn={() => Platform.OS === 'web' && setHoveredOption(option.value)}
+                        onHoverOut={() => Platform.OS === 'web' && setHoveredOption(null)}
+                        style={({ pressed }) => [
+                          styles.option,
+                          isSelected && styles.optionSelected,
+                          isOptionDisabled && styles.optionDisabled,
+                          pressed && !isOptionDisabled && styles.optionPressed,
+                          Platform.OS === 'web' && isHovered && !isOptionDisabled && styles.optionHovered,
+                        ]}
+                      >
+                        {renderOption ? (
+                          renderOption({ option, isSelected, isDisabled: isOptionDisabled, isHovered, searchQuery })
+                        ) : (
+                          <>
+                            <Text
+                              style={[
+                                styles.optionText,
+                                isSelected && styles.optionTextSelected,
+                                isOptionDisabled && styles.optionTextDisabled,
+                              ]}
+                            >
+                              {option.label}
+                            </Text>
+                            {isSelected && (
+                              <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
+                                <Path
+                                  d="M20 6L9 17l-5-5"
+                                  stroke={colors.brand.blue}
+                                  strokeWidth={2}
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                />
+                              </Svg>
+                            )}
+                          </>
+                        )}
+                      </Pressable>
+                    );
+                  })
+                )}
+              </ScrollView>
+            </View>
+          </Pressable>
+        </Modal>
+      </View>
+    );
+  }
+);
+
+Select.displayName = 'Select';
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  label: {
+    fontSize: typography.fontSize.componentLabel,
+    fontWeight: typography.fontWeight.semiBold,
+    color: colors.text.default,
+    marginBottom: spacing.base,
+  },
+  labelDisabled: {
+    color: colors.text.disabled,
+  },
+  required: {
+    color: colors.feedback.error.content,
+  },
+  select: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: borderRadius.md,
+  },
+  selectOpen: {
+    borderColor: colors.brand.blue,
+  },
+  selectHovered: {
+    borderColor: colors.brand.blue,
+    backgroundColor: colors.background.hover,
+  },
+  outline: {
+    borderWidth: 1,
+    borderColor: colors.border.default,
+    backgroundColor: colors.background.default,
+  },
+  filled: {
+    backgroundColor: colors.background.secondary,
+  },
+  sm: {
+    height: 32,
+    paddingHorizontal: spacing['2x'],
+  },
+  md: {
+    height: 40,
+    paddingHorizontal: spacing['3x'],
+  },
+  lg: {
+    height: 48,
+    paddingHorizontal: spacing['4x'],
+  },
+  error: {
+    borderColor: colors.border.danger,
+  },
+  disabled: {
+    backgroundColor: colors.background.secondary,
+    borderColor: colors.border.disabled,
+  },
+  selectText: {
+    flex: 1,
+    color: colors.text.default,
+    fontSize: typography.fontSize.body,
+  },
+  customSelectedValue: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  placeholder: {
+    color: colors.text.disabled,
+  },
+  disabledText: {
+    color: colors.text.disabled,
+  },
+  iconContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.base,
+  },
+  clearButton: {
+    padding: spacing['0.5x'],
+    borderRadius: borderRadius.sm,
+  },
+  clearButtonHovered: {
+    backgroundColor: colors.background.secondary,
+  },
+  helperText: {
+    fontSize: typography.fontSize.caption,
+    color: colors.text.secondary,
+    marginTop: spacing.base,
+  },
+  errorText: {
+    color: colors.feedback.error.content,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+  dropdown: {
+    backgroundColor: colors.background.default,
+    borderRadius: borderRadius.md,
+    borderWidth: 1,
+    borderColor: colors.border.default,
+    minWidth: 200,
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+      },
+      android: {
+        elevation: 8,
+      },
+      web: {
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+      } as any,
+    }),
+  },
+  searchContainer: {
+    padding: spacing['2x'],
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border.disabled,
+    backgroundColor: colors.background.default,
+  },
+  searchInputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: colors.background.secondary,
+    borderWidth: 1,
+    borderColor: colors.border.default,
+    borderRadius: borderRadius.md,
+    paddingHorizontal: spacing['2x'],
+    height: 36,
+  },
+  searchInputWrapperFocused: {
+    borderColor: colors.brand.blue,
+    backgroundColor: colors.background.default,
+  },
+  searchIcon: {
+    marginRight: spacing['2x'],
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: typography.fontSize.body,
+    color: colors.text.default,
+    padding: 0,
+    margin: 0,
+    height: '100%',
+    ...Platform.select({
+      web: {
+        outlineStyle: 'none',
+      } as any,
+    }),
+  },
+  searchClearButton: {
+    padding: spacing.base,
+    borderRadius: borderRadius.sm,
+    marginLeft: spacing.base,
+  },
+  optionsList: {
+    paddingVertical: spacing.base,
+    paddingHorizontal: spacing['2x'],
+  },
+  noResults: {
+    paddingVertical: spacing['4x'],
+    paddingHorizontal: spacing['2x'],
+    alignItems: 'center',
+  },
+  noResultsText: {
+    fontSize: typography.fontSize.body,
+    color: colors.text.secondary,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: spacing['2x'],
+    paddingHorizontal: spacing['2x'],
+    borderRadius: borderRadius.sm,
+  },
+  optionSelected: {
+    backgroundColor: `${colors.brand.blue}10`,
+  },
+  optionHovered: {
+    backgroundColor: colors.background.hover,
+  },
+  optionPressed: {
+    backgroundColor: colors.background.secondary,
+  },
+  optionDisabled: {
+    opacity: 0.5,
+  },
+  optionText: {
+    fontSize: typography.fontSize.body,
+    color: colors.text.default,
+  },
+  optionTextSelected: {
+    color: colors.brand.blue,
+    fontWeight: typography.fontWeight.medium,
+  },
+  optionTextDisabled: {
+    color: colors.text.disabled,
+  },
+});

package/src/components/Select/index.ts

@@ -0,0 +1,8 @@
+export { 
+  Select, 
+  type SelectProps, 
+  type SelectOption, 
+  type RenderOptionProps, 
+  type RenderSelectedValueProps 
+} from './Select';
+