@idealyst/components 1.0.82 → 1.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.0.82",
+  "version": "1.0.83",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -41,17 +41,17 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.0.82",
-    "@mdi/js": "^7.4.47",
-    "@mdi/react": "^1.6.1",
-    "@react-native-vector-icons/common": "^12.0.1",
-    "@react-native-vector-icons/material-design-icons": "^12.0.1",
+    "@idealyst/theme": "^1.0.83",
+    "@mdi/js": ">=7.0.0",
+    "@mdi/react": ">=1.0.0",
+    "@react-native-vector-icons/common": ">=12.0.0",
+    "@react-native-vector-icons/material-design-icons": ">=12.0.0",
     "@react-native/normalize-colors": "*",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-edge-to-edge": "*",
     "react-native-nitro-modules": "*",
-    "react-native-unistyles": "^3.0.4"
+    "react-native-unistyles": ">=3.0.0"
   },
   "peerDependenciesMeta": {
     "@idealyst/theme": {

package/src/Select/README.md

@@ -0,0 +1,166 @@
+# Select Component
+
+A cross-platform Select component for choosing from a list of options.
+
+## Features
+
+- **Cross-platform**: Works on both web and React Native
+- **iOS ActionSheet support**: Native presentation mode on iOS
+- **Searchable**: Optional search/filter functionality
+- **Keyboard navigation**: Full keyboard support on web
+- **Customizable styling**: Variants, intents, and sizes
+- **Accessibility**: Proper ARIA attributes and screen reader support
+
+## Basic Usage
+
+```tsx
+import { Select } from '@idealyst/components';
+
+const options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+];
+
+function MyComponent() {
+  const [value, setValue] = useState('');
+
+  return (
+    <Select
+      options={options}
+      value={value}
+      onValueChange={setValue}
+      placeholder="Choose a fruit"
+    />
+  );
+}
+```
+
+## With Icons
+
+```tsx
+const options = [
+  {
+    value: 'user',
+    label: 'User Profile',
+    icon: <Icon name="user" />
+  },
+  {
+    value: 'settings',
+    label: 'Settings',
+    icon: <Icon name="settings" />
+  },
+];
+
+<Select
+  options={options}
+  value={value}
+  onValueChange={setValue}
+  placeholder="Choose an option"
+/>
+```
+
+## Searchable Select
+
+```tsx
+<Select
+  options={largeOptionsList}
+  value={value}
+  onValueChange={setValue}
+  searchable
+  placeholder="Search and select..."
+/>
+```
+
+## iOS ActionSheet (Native only)
+
+```tsx
+<Select
+  options={options}
+  value={value}
+  onValueChange={setValue}
+  presentationMode="actionSheet" // iOS only
+  label="Choose an option"
+/>
+```
+
+## Form Integration
+
+```tsx
+<View spacing="md">
+  <Select
+    label="Country"
+    options={countryOptions}
+    value={country}
+    onValueChange={setCountry}
+    error={!!errors.country}
+    helperText={errors.country || "Select your country"}
+    variant="outlined"
+    intent="primary"
+  />
+</View>
+```
+
+## API Reference
+
+### SelectProps
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `SelectOption[]` | - | Array of options to display |
+| `value` | `string` | - | Currently selected value |
+| `onValueChange` | `(value: string) => void` | - | Called when selection changes |
+| `placeholder` | `string` | `"Select an option"` | Placeholder text |
+| `disabled` | `boolean` | `false` | Whether the select is disabled |
+| `error` | `boolean` | `false` | Whether to show error state |
+| `helperText` | `string` | - | Helper text below select |
+| `label` | `string` | - | Label text above select |
+| `variant` | `'outlined' \| 'filled'` | `'outlined'` | Visual variant |
+| `intent` | `IntentVariant` | `'neutral'` | Color scheme |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
+| `searchable` | `boolean` | `false` | Enable search functionality |
+| `filterOption` | `(option, searchTerm) => boolean` | - | Custom filter function |
+| `presentationMode` | `'dropdown' \| 'actionSheet'` | `'dropdown'` | Native presentation mode (iOS) |
+| `maxHeight` | `number` | `240` | Max height for dropdown |
+
+### SelectOption
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | Unique value for the option |
+| `label` | `string` | Display label |
+| `disabled` | `boolean` | Whether option is disabled |
+| `icon` | `ReactNode` | Optional icon or custom content |
+
+## Platform Differences
+
+### Web
+- Uses a custom dropdown overlay
+- Full keyboard navigation support
+- Hover effects and focus states
+- Searchable with text input
+
+### React Native
+- Modal-based dropdown by default
+- iOS ActionSheet support via `presentationMode="actionSheet"`
+- Touch-optimized interactions
+- Native keyboard handling
+
+## Styling
+
+The Select component uses Unistyles v3 for cross-platform styling with support for:
+
+- Variants (`outlined`, `filled`)
+- Intents (`primary`, `neutral`, `success`, `error`, `warning`, `info`)
+- Sizes (`small`, `medium`, `large`)
+- Error states
+- Disabled states
+- Focus states
+
+## Accessibility
+
+- Proper ARIA roles and attributes
+- Keyboard navigation (web)
+- Screen reader support
+- Focus management
+- Touch target sizing (44px minimum)

package/src/Select/Select.native.tsx

@@ -0,0 +1,270 @@
+import React, { useState, useRef } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  ScrollView,
+  TextInput,
+  ActionSheetIOS,
+  Platform,
+  Animated,
+} from 'react-native';
+import { SelectProps, SelectOption } from './types';
+import { selectStyles } from './Select.styles';
+
+const Select: React.FC<SelectProps> = ({
+  options,
+  value,
+  onValueChange,
+  placeholder = 'Select an option',
+  disabled = false,
+  error = false,
+  helperText,
+  label,
+  variant = 'outlined',
+  intent = 'neutral',
+  size = 'medium',
+  searchable = false,
+  filterOption,
+  presentationMode = 'dropdown',
+  maxHeight = 240,
+  style,
+  testID,
+  accessibilityLabel,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const scaleAnim = useRef(new Animated.Value(0)).current;
+
+  const selectedOption = options.find(option => option.value === value);
+
+  // Filter options based on search term
+  const filteredOptions = searchable && searchTerm
+    ? options.filter(option => {
+        if (filterOption) {
+          return filterOption(option, searchTerm);
+        }
+        return option.label.toLowerCase().includes(searchTerm.toLowerCase());
+      })
+    : options;
+
+  // Apply styles with variants
+  selectStyles.useVariants({
+    variant: variant as any,
+    size,
+    intent,
+    disabled,
+    error,
+    focused: isOpen,
+  });
+
+  const handleTriggerPress = () => {
+    if (disabled) return;
+
+    if (Platform.OS === 'ios' && presentationMode === 'actionSheet') {
+      showIOSActionSheet();
+    } else {
+      setIsOpen(true);
+      setSearchTerm('');
+      // Animate dropdown appearance
+      Animated.spring(scaleAnim, {
+        toValue: 1,
+        useNativeDriver: true,
+        tension: 300,
+        friction: 20,
+      }).start();
+    }
+  };
+
+  const showIOSActionSheet = () => {
+    const actionOptions = options.map(option => option.label);
+    const cancelButtonIndex = actionOptions.length;
+    actionOptions.push('Cancel');
+
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: actionOptions,
+        cancelButtonIndex,
+        title: label || 'Select an option',
+        message: helperText,
+      },
+      (buttonIndex) => {
+        if (buttonIndex !== cancelButtonIndex && buttonIndex < options.length) {
+          const selectedOption = options[buttonIndex];
+          if (!selectedOption.disabled) {
+            onValueChange?.(selectedOption.value);
+          }
+        }
+      }
+    );
+  };
+
+  const handleOptionSelect = (option: SelectOption) => {
+    if (!option.disabled) {
+      onValueChange?.(option.value);
+      closeDropdown();
+    }
+  };
+
+  const closeDropdown = () => {
+    Animated.spring(scaleAnim, {
+      toValue: 0,
+      useNativeDriver: true,
+      tension: 300,
+      friction: 20,
+    }).start(() => {
+      setIsOpen(false);
+      setSearchTerm('');
+    });
+  };
+
+  const handleSearchChange = (text: string) => {
+    setSearchTerm(text);
+  };
+
+  const renderChevron = () => (
+    <View style={selectStyles.chevron}>
+      <Text style={{ color: 'currentColor' }}>▼</Text>
+    </View>
+  );
+
+  const renderDropdown = () => (
+    <Modal
+      visible={isOpen}
+      transparent
+      animationType="none"
+      onRequestClose={closeDropdown}
+    >
+      <Pressable style={selectStyles.overlay} onPress={closeDropdown}>
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+          <Animated.View
+            style={[
+              selectStyles.dropdown,
+              {
+                maxHeight,
+                transform: [{ scale: scaleAnim }],
+                minWidth: 280,
+                maxWidth: '90%',
+              },
+            ]}
+          >
+            {searchable && (
+              <View style={selectStyles.searchContainer}>
+                <TextInput
+                  style={selectStyles.searchInput}
+                  placeholder="Search options..."
+                  value={searchTerm}
+                  onChangeText={handleSearchChange}
+                  autoFocus
+                />
+              </View>
+            )}
+
+            <ScrollView style={selectStyles.optionsList} showsVerticalScrollIndicator={false}>
+              {filteredOptions.map((option) => {
+                const isSelected = option.value === value;
+
+                selectStyles.useVariants({
+                  selected: isSelected,
+                  disabled: option.disabled,
+                });
+
+                return (
+                  <Pressable
+                    key={option.value}
+                    style={selectStyles.option}
+                    onPress={() => handleOptionSelect(option)}
+                    disabled={option.disabled}
+                    android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
+                  >
+                    <View style={selectStyles.optionContent}>
+                      {option.icon && (
+                        <View style={selectStyles.optionIcon}>
+                          {option.icon}
+                        </View>
+                      )}
+                      <Text
+                        style={[
+                          selectStyles.optionText,
+                          option.disabled && selectStyles.optionTextDisabled,
+                        ]}
+                      >
+                        {option.label}
+                      </Text>
+                    </View>
+                  </Pressable>
+                );
+              })}
+
+              {filteredOptions.length === 0 && (
+                <View style={selectStyles.option}>
+                  <Text style={selectStyles.optionText}>
+                    No options found
+                  </Text>
+                </View>
+              )}
+            </ScrollView>
+          </Animated.View>
+        </View>
+      </Pressable>
+    </Modal>
+  );
+
+  return (
+    <View style={[selectStyles.container, style]} testID={testID}>
+      {label && (
+        <Text style={selectStyles.label}>
+          {label}
+        </Text>
+      )}
+
+      <Pressable
+        style={selectStyles.trigger}
+        onPress={handleTriggerPress}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel || label}
+        accessibilityRole="button"
+        accessibilityState={{
+          expanded: isOpen,
+          disabled,
+        }}
+        android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
+      >
+        <View style={selectStyles.triggerContent}>
+          {selectedOption?.icon && (
+            <View style={selectStyles.icon}>
+              {selectedOption.icon}
+            </View>
+          )}
+          <Text
+            style={[
+              selectedOption ? selectStyles.triggerText : selectStyles.placeholder,
+            ]}
+            numberOfLines={1}
+          >
+            {selectedOption ? selectedOption.label : placeholder}
+          </Text>
+        </View>
+
+        {renderChevron()}
+      </Pressable>
+
+      {/* Only render dropdown modal if not using iOS ActionSheet */}
+      {!(Platform.OS === 'ios' && presentationMode === 'actionSheet') && renderDropdown()}
+
+      {helperText && (
+        <Text
+          style={[
+            selectStyles.helperText,
+            error && selectStyles.helperText.variants?.error?.true,
+          ]}
+        >
+          {helperText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default Select;