@urbint/cl 1.0.1

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,908 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select, SelectOption } from './Select';
+import { VStack } from '../VStack';
+import { HStack } from '../HStack';
+import { Text } from '../Text';
+import { View, StyleSheet } from 'react-native';
+import { colors, spacing, borderRadius } from '../../styles/tokens';
+
+const meta: Meta<typeof Select> = {
+  title: 'Forms/Select',
+  component: Select,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['outline', 'filled'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    isInvalid: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isRequired: { control: 'boolean' },
+    isMultiple: { control: 'boolean' },
+    isSearchable: { control: 'boolean' },
+  },
+  args: {
+    placeholder: 'Select an option',
+    variant: 'outline',
+    size: 'md',
+    options: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  render: (args) => (
+    <View style={{ width: 300 }}>
+      <Select {...args} />
+    </View>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Select
+        label="Country"
+        placeholder="Select a country"
+        options={[
+          { label: 'United States', value: 'us' },
+          { label: 'Canada', value: 'ca' },
+          { label: 'United Kingdom', value: 'uk' },
+          { label: 'Australia', value: 'au' },
+        ]}
+      />
+      <Select
+        label="Language"
+        placeholder="Select a language"
+        helperText="Choose your preferred language"
+        options={[
+          { label: 'English', value: 'en' },
+          { label: 'Spanish', value: 'es' },
+          { label: 'French', value: 'fr' },
+          { label: 'German', value: 'de' },
+        ]}
+      />
+    </VStack>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Select Variants</Text>
+      <Select
+        label="Outline"
+        variant="outline"
+        placeholder="Select..."
+        options={[
+          { label: 'Option A', value: 'a' },
+          { label: 'Option B', value: 'b' },
+        ]}
+      />
+      <Select
+        label="Filled"
+        variant="filled"
+        placeholder="Select..."
+        options={[
+          { label: 'Option A', value: 'a' },
+          { label: 'Option B', value: 'b' },
+        ]}
+      />
+    </VStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Select Sizes</Text>
+      <Select
+        label="Small"
+        size="sm"
+        placeholder="Small select..."
+        options={[
+          { label: 'Small Option', value: 'sm' },
+        ]}
+      />
+      <Select
+        label="Medium"
+        size="md"
+        placeholder="Medium select..."
+        options={[
+          { label: 'Medium Option', value: 'md' },
+        ]}
+      />
+      <Select
+        label="Large"
+        size="lg"
+        placeholder="Large select..."
+        options={[
+          { label: 'Large Option', value: 'lg' },
+        ]}
+      />
+    </VStack>
+  ),
+};
+
+export const States: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Select States</Text>
+      <Select
+        label="Normal"
+        placeholder="Select..."
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ]}
+      />
+      <Select
+        label="With Default Value"
+        defaultValue="2"
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ]}
+      />
+      <Select
+        label="Disabled"
+        placeholder="Select..."
+        isDisabled
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ]}
+      />
+      <Select
+        label="Required"
+        placeholder="Select..."
+        isRequired
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ]}
+      />
+    </VStack>
+  ),
+};
+
+export const Validation: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Validation States</Text>
+      <Select
+        label="Valid Selection"
+        defaultValue="approved"
+        helperText="Your selection has been saved"
+        options={[
+          { label: 'Approved', value: 'approved' },
+          { label: 'Pending', value: 'pending' },
+        ]}
+      />
+      <Select
+        label="Invalid Selection"
+        placeholder="Select..."
+        isInvalid
+        errorMessage="Please select an option"
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ]}
+      />
+    </VStack>
+  ),
+};
+
+export const WithDisabledOptions: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Disabled Options</Text>
+      <Select
+        label="Plan"
+        placeholder="Select a plan"
+        options={[
+          { label: 'Free', value: 'free' },
+          { label: 'Pro', value: 'pro' },
+          { label: 'Enterprise', value: 'enterprise', disabled: true },
+        ]}
+        helperText="Enterprise plan is currently unavailable"
+      />
+    </VStack>
+  ),
+};
+
+export const ManyOptions: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Many Options</Text>
+      <Select
+        label="State/Province"
+        placeholder="Select a state"
+        options={[
+          { label: 'Alabama', value: 'AL' },
+          { label: 'Alaska', value: 'AK' },
+          { label: 'Arizona', value: 'AZ' },
+          { label: 'Arkansas', value: 'AR' },
+          { label: 'California', value: 'CA' },
+          { label: 'Colorado', value: 'CO' },
+          { label: 'Connecticut', value: 'CT' },
+          { label: 'Delaware', value: 'DE' },
+          { label: 'Florida', value: 'FL' },
+          { label: 'Georgia', value: 'GA' },
+          { label: 'Hawaii', value: 'HI' },
+          { label: 'Idaho', value: 'ID' },
+          { label: 'Illinois', value: 'IL' },
+          { label: 'Indiana', value: 'IN' },
+          { label: 'Iowa', value: 'IA' },
+        ]}
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// SEARCHABLE SELECT STORIES
+// ============================================================================
+
+const countryOptions = [
+  { label: 'United States', value: 'us' },
+  { label: 'United Kingdom', value: 'uk' },
+  { label: 'Canada', value: 'ca' },
+  { label: 'Australia', value: 'au' },
+  { label: 'Germany', value: 'de' },
+  { label: 'France', value: 'fr' },
+  { label: 'Spain', value: 'es' },
+  { label: 'Italy', value: 'it' },
+  { label: 'Japan', value: 'jp' },
+  { label: 'China', value: 'cn' },
+  { label: 'India', value: 'in' },
+  { label: 'Brazil', value: 'br' },
+  { label: 'Mexico', value: 'mx' },
+  { label: 'Argentina', value: 'ar' },
+  { label: 'South Korea', value: 'kr' },
+  { label: 'Netherlands', value: 'nl' },
+  { label: 'Sweden', value: 'se' },
+  { label: 'Norway', value: 'no' },
+  { label: 'Denmark', value: 'dk' },
+  { label: 'Finland', value: 'fi' },
+];
+
+export const Searchable: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Searchable Select</Text>
+      <Text size="caption" color="secondary">
+        Type to filter options. Search is case-insensitive.
+      </Text>
+      <Select
+        label="Country"
+        placeholder="Select a country..."
+        isSearchable
+        searchPlaceholder="Search countries..."
+        options={countryOptions}
+        helperText="Start typing to filter the list"
+      />
+    </VStack>
+  ),
+};
+
+export const SearchableWithDefaultValue: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Searchable with Default Value</Text>
+      <Select
+        label="Country"
+        placeholder="Select a country..."
+        isSearchable
+        defaultValue="us"
+        options={countryOptions}
+      />
+    </VStack>
+  ),
+};
+
+export const SearchableMultiSelect: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Searchable Multi-Select</Text>
+      <Text size="caption" color="secondary">
+        Combine search with multi-select for powerful filtering.
+      </Text>
+      <Select
+        label="Countries"
+        placeholder="Select countries..."
+        isSearchable
+        isMultiple
+        searchPlaceholder="Search countries..."
+        options={countryOptions}
+        helperText="Select multiple countries"
+      />
+    </VStack>
+  ),
+};
+
+export const SearchableMultiSelectWithDefaults: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Searchable Multi-Select with Defaults</Text>
+      <Select
+        label="Countries"
+        placeholder="Select countries..."
+        isSearchable
+        isMultiple
+        defaultValue={['us', 'uk', 'ca']}
+        options={countryOptions}
+        helperText="Pre-selected: United States, United Kingdom, Canada"
+      />
+    </VStack>
+  ),
+};
+
+const technologyOptions = [
+  { label: 'React', value: 'react', category: 'frontend' },
+  { label: 'Vue.js', value: 'vue', category: 'frontend' },
+  { label: 'Angular', value: 'angular', category: 'frontend' },
+  { label: 'Svelte', value: 'svelte', category: 'frontend' },
+  { label: 'Node.js', value: 'nodejs', category: 'backend' },
+  { label: 'Python', value: 'python', category: 'backend' },
+  { label: 'Go', value: 'go', category: 'backend' },
+  { label: 'Rust', value: 'rust', category: 'backend' },
+  { label: 'PostgreSQL', value: 'postgres', category: 'database' },
+  { label: 'MongoDB', value: 'mongodb', category: 'database' },
+  { label: 'Redis', value: 'redis', category: 'database' },
+  { label: 'MySQL', value: 'mysql', category: 'database' },
+  { label: 'Docker', value: 'docker', category: 'devops' },
+  { label: 'Kubernetes', value: 'kubernetes', category: 'devops' },
+  { label: 'AWS', value: 'aws', category: 'cloud' },
+  { label: 'Google Cloud', value: 'gcp', category: 'cloud' },
+  { label: 'Azure', value: 'azure', category: 'cloud' },
+];
+
+export const SearchableWithCustomFilter: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Custom Filter Function</Text>
+      <Text size="caption" color="secondary">
+        Search by label or category (e.g., try "frontend", "backend", "database")
+      </Text>
+      <Select
+        label="Technologies"
+        placeholder="Search technologies..."
+        isSearchable
+        isMultiple
+        searchPlaceholder="Search by name or category..."
+        options={technologyOptions}
+        filterOption={(option, query) => {
+          const searchLower = query.toLowerCase();
+          return (
+            option.label.toLowerCase().includes(searchLower) ||
+            option.category?.toLowerCase().includes(searchLower)
+          );
+        }}
+        helperText="Try searching 'frontend' or 'database'"
+      />
+    </VStack>
+  ),
+};
+
+export const SearchableNoResults: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Custom No Results Text</Text>
+      <Text size="caption" color="secondary">
+        Customize the message shown when no options match the search.
+      </Text>
+      <Select
+        label="Country"
+        placeholder="Select a country..."
+        isSearchable
+        noResultsText="No countries match your search"
+        options={[
+          { label: 'United States', value: 'us' },
+          { label: 'Canada', value: 'ca' },
+          { label: 'Mexico', value: 'mx' },
+        ]}
+        helperText='Try typing "xyz" to see the no results message'
+      />
+    </VStack>
+  ),
+};
+
+export const SearchableControlled: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string>('');
+    
+    return (
+      <VStack space={16}>
+        <Text weight="semiBold">Controlled Searchable Select</Text>
+        <Select
+          label="Country"
+          placeholder="Select a country..."
+          isSearchable
+          value={selected}
+          onChange={(value) => setSelected(value as string)}
+          options={countryOptions}
+        />
+        <Text size="caption" color="secondary">
+          Selected: {selected || 'None'}
+        </Text>
+      </VStack>
+    );
+  },
+};
+
+export const SearchableSizes: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Searchable Select Sizes</Text>
+      <Select
+        label="Small"
+        size="sm"
+        isSearchable
+        placeholder="Search..."
+        options={countryOptions.slice(0, 8)}
+      />
+      <Select
+        label="Medium"
+        size="md"
+        isSearchable
+        placeholder="Search..."
+        options={countryOptions.slice(0, 8)}
+      />
+      <Select
+        label="Large"
+        size="lg"
+        isSearchable
+        placeholder="Search..."
+        options={countryOptions.slice(0, 8)}
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// MULTISELECT STORIES
+// ============================================================================
+
+export const MultiSelect: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Multi-Select</Text>
+      <Select
+        label="Dropdown Test"
+        placeholder="Select options..."
+        isMultiple
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+          { label: 'Option 3', value: '3' },
+          { label: 'Option 4', value: '4' },
+          { label: 'Option 5', value: '5' },
+          { label: 'Other', value: 'other' },
+        ]}
+        helperText="You can select multiple options"
+      />
+    </VStack>
+  ),
+};
+
+export const MultiSelectWithDefaultValues: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Multi-Select with Default Values</Text>
+      <Select
+        label="Select Skills"
+        placeholder="Choose your skills..."
+        isMultiple
+        defaultValue={['react', 'typescript', 'nodejs']}
+        options={[
+          { label: 'React', value: 'react' },
+          { label: 'TypeScript', value: 'typescript' },
+          { label: 'Node.js', value: 'nodejs' },
+          { label: 'Python', value: 'python' },
+          { label: 'Go', value: 'go' },
+          { label: 'Rust', value: 'rust' },
+        ]}
+        helperText="Pre-selected skills: React, TypeScript, Node.js"
+      />
+    </VStack>
+  ),
+};
+
+export const MultiSelectControlled: Story = {
+  render: () => {
+    const [selectedValues, setSelectedValues] = useState<string[]>(['frontend', 'backend']);
+    
+    return (
+      <VStack space={16}>
+        <Text weight="semiBold">Controlled Multi-Select</Text>
+        <Select
+          label="Team Roles"
+          placeholder="Assign roles..."
+          isMultiple
+          value={selectedValues}
+          onChange={(value) => setSelectedValues(value as string[])}
+          options={[
+            { label: 'Frontend', value: 'frontend' },
+            { label: 'Backend', value: 'backend' },
+            { label: 'DevOps', value: 'devops' },
+            { label: 'Design', value: 'design' },
+            { label: 'QA', value: 'qa' },
+            { label: 'Product', value: 'product' },
+          ]}
+        />
+        <Text size="caption" color="secondary">
+          Selected: {selectedValues.join(', ') || 'None'}
+        </Text>
+      </VStack>
+    );
+  },
+};
+
+export const MultiSelectWithDisabledOptions: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Multi-Select with Disabled Options</Text>
+      <Select
+        label="Subscription Features"
+        placeholder="Choose features..."
+        isMultiple
+        defaultValue={['basic']}
+        options={[
+          { label: 'Basic Analytics', value: 'basic' },
+          { label: 'Advanced Analytics', value: 'advanced' },
+          { label: 'Custom Reports', value: 'reports', disabled: true },
+          { label: 'API Access', value: 'api' },
+          { label: 'Priority Support', value: 'support', disabled: true },
+          { label: 'Team Collaboration', value: 'team' },
+        ]}
+        helperText="Some features require a higher subscription tier"
+      />
+    </VStack>
+  ),
+};
+
+export const MultiSelectSizes: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Multi-Select Sizes</Text>
+      <Select
+        label="Small"
+        size="sm"
+        isMultiple
+        placeholder="Select categories..."
+        defaultValue={['tech']}
+        options={[
+          { label: 'Technology', value: 'tech' },
+          { label: 'Business', value: 'business' },
+          { label: 'Design', value: 'design' },
+        ]}
+      />
+      <Select
+        label="Medium"
+        size="md"
+        isMultiple
+        placeholder="Select categories..."
+        defaultValue={['tech', 'design']}
+        options={[
+          { label: 'Technology', value: 'tech' },
+          { label: 'Business', value: 'business' },
+          { label: 'Design', value: 'design' },
+        ]}
+      />
+      <Select
+        label="Large"
+        size="lg"
+        isMultiple
+        placeholder="Select categories..."
+        defaultValue={['tech', 'business', 'design']}
+        options={[
+          { label: 'Technology', value: 'tech' },
+          { label: 'Business', value: 'business' },
+          { label: 'Design', value: 'design' },
+        ]}
+      />
+    </VStack>
+  ),
+};
+
+export const MultiSelectValidation: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Multi-Select Validation</Text>
+      <Select
+        label="Required Tags"
+        placeholder="Select at least one tag..."
+        isMultiple
+        isRequired
+        isInvalid
+        errorMessage="Please select at least one tag"
+        options={[
+          { label: 'Important', value: 'important' },
+          { label: 'Urgent', value: 'urgent' },
+          { label: 'Review', value: 'review' },
+          { label: 'Follow-up', value: 'followup' },
+        ]}
+      />
+      <Select
+        label="Selected Tags"
+        placeholder="Select tags..."
+        isMultiple
+        defaultValue={['important', 'urgent']}
+        helperText="Tags applied successfully"
+        options={[
+          { label: 'Important', value: 'important' },
+          { label: 'Urgent', value: 'urgent' },
+          { label: 'Review', value: 'review' },
+          { label: 'Follow-up', value: 'followup' },
+        ]}
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// FORM EXAMPLES
+// ============================================================================
+
+export const FormExample: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Shipping Information</Text>
+      <VStack space={12}>
+        <Select
+          label="Country"
+          placeholder="Select country"
+          isRequired
+          isSearchable
+          options={countryOptions}
+        />
+        <Select
+          label="Shipping Method"
+          placeholder="Select method"
+          isRequired
+          options={[
+            { label: 'Standard (5-7 days)', value: 'standard' },
+            { label: 'Express (2-3 days)', value: 'express' },
+            { label: 'Next Day', value: 'next_day' },
+          ]}
+          helperText="Delivery times are estimates"
+        />
+        <Select
+          label="Package Size"
+          placeholder="Select size"
+          options={[
+            { label: 'Small (up to 1 lb)', value: 'small' },
+            { label: 'Medium (1-5 lbs)', value: 'medium' },
+            { label: 'Large (5-20 lbs)', value: 'large' },
+            { label: 'Extra Large (20+ lbs)', value: 'xl' },
+          ]}
+        />
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const MultiSelectFormExample: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Project Settings</Text>
+      <VStack space={12}>
+        <Select
+          label="Project Type"
+          placeholder="Select type"
+          isRequired
+          options={[
+            { label: 'Web Application', value: 'web' },
+            { label: 'Mobile App', value: 'mobile' },
+            { label: 'API Service', value: 'api' },
+            { label: 'Desktop App', value: 'desktop' },
+          ]}
+        />
+        <Select
+          label="Technologies"
+          placeholder="Select technologies..."
+          isMultiple
+          isSearchable
+          isRequired
+          options={technologyOptions}
+          helperText="Select all technologies used in this project"
+        />
+        <Select
+          label="Team Members"
+          placeholder="Assign team members..."
+          isMultiple
+          isSearchable
+          options={[
+            { label: 'John Doe', value: 'john' },
+            { label: 'Jane Smith', value: 'jane' },
+            { label: 'Bob Johnson', value: 'bob' },
+            { label: 'Alice Williams', value: 'alice' },
+            { label: 'Charlie Brown', value: 'charlie' },
+          ]}
+          helperText="Optional: Assign team members to this project"
+        />
+        <Select
+          label="Priority"
+          placeholder="Select priority"
+          defaultValue="medium"
+          options={[
+            { label: 'Low', value: 'low' },
+            { label: 'Medium', value: 'medium' },
+            { label: 'High', value: 'high' },
+            { label: 'Critical', value: 'critical' },
+          ]}
+        />
+      </VStack>
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// CUSTOM RENDERING
+// ============================================================================
+
+const colorOptions = [
+  { label: 'Red', value: 'red', color: '#EF4444' },
+  { label: 'Green', value: 'green', color: '#22C55E' },
+  { label: 'Blue', value: 'blue', color: '#3B82F6' },
+  { label: 'Yellow', value: 'yellow', color: '#EAB308' },
+  { label: 'Purple', value: 'purple', color: '#A855F7' },
+  { label: 'Pink', value: 'pink', color: '#EC4899' },
+];
+
+const customStyles = StyleSheet.create({
+  colorSwatch: {
+    width: 16,
+    height: 16,
+    borderRadius: 4,
+    marginRight: 8,
+  },
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+});
+
+export const CustomRendering: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Custom Option Rendering</Text>
+      <Select
+        label="Select Color"
+        placeholder="Choose a color..."
+        options={colorOptions}
+        renderOption={({ option, isSelected }) => (
+          <View style={customStyles.optionRow}>
+            <View style={[customStyles.colorSwatch, { backgroundColor: option.color }]} />
+            <Text style={{ color: isSelected ? colors.brand.blue : colors.text.default }}>
+              {option.label}
+            </Text>
+          </View>
+        )}
+        renderSelectedValue={({ option, placeholder }) => (
+          <View style={customStyles.optionRow}>
+            {option ? (
+              <>
+                <View style={[customStyles.colorSwatch, { backgroundColor: option.color }]} />
+                <Text>{option.label}</Text>
+              </>
+            ) : (
+              <Text style={{ color: colors.text.disabled }}>{placeholder}</Text>
+            )}
+          </View>
+        )}
+      />
+      <Select
+        label="Select Colors (Multi)"
+        placeholder="Choose colors..."
+        isMultiple
+        options={colorOptions}
+        renderOption={({ option, isSelected, isHovered }) => (
+          <View style={customStyles.optionRow}>
+            <View style={[customStyles.colorSwatch, { backgroundColor: option.color }]} />
+            <Text style={{ color: isSelected ? colors.brand.blue : colors.text.default }}>
+              {option.label}
+            </Text>
+          </View>
+        )}
+        renderSelectedValue={({ selectedOptions, placeholder, isMultiple }) => (
+          <View style={[customStyles.optionRow, { gap: 4 }]}>
+            {selectedOptions.length > 0 ? (
+              selectedOptions.map((opt) => (
+                <View 
+                  key={opt.value}
+                  style={[
+                    customStyles.colorSwatch, 
+                    { backgroundColor: opt.color, marginRight: 0 }
+                  ]} 
+                />
+              ))
+            ) : (
+              <Text style={{ color: colors.text.disabled }}>{placeholder}</Text>
+            )}
+          </View>
+        )}
+      />
+    </VStack>
+  ),
+};
+
+export const CustomRenderingWithSearch: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Searchable with Custom Rendering</Text>
+      <Select
+        label="Select Colors"
+        placeholder="Search colors..."
+        isSearchable
+        isMultiple
+        options={colorOptions}
+        renderOption={({ option, isSelected, searchQuery }) => (
+          <View style={customStyles.optionRow}>
+            <View style={[customStyles.colorSwatch, { backgroundColor: option.color }]} />
+            <Text style={{ color: isSelected ? colors.brand.blue : colors.text.default }}>
+              {option.label}
+            </Text>
+          </View>
+        )}
+        renderSelectedValue={({ selectedOptions, placeholder }) => (
+          <View style={[customStyles.optionRow, { gap: 4 }]}>
+            {selectedOptions.length > 0 ? (
+              selectedOptions.map((opt) => (
+                <View 
+                  key={opt.value}
+                  style={[
+                    customStyles.colorSwatch, 
+                    { backgroundColor: opt.color, marginRight: 0 }
+                  ]} 
+                />
+              ))
+            ) : (
+              <Text style={{ color: colors.text.disabled }}>{placeholder}</Text>
+            )}
+          </View>
+        )}
+      />
+    </VStack>
+  ),
+};
+
+// ============================================================================
+// HOVER STATE DEMO
+// ============================================================================
+
+export const HoverStateDemo: Story = {
+  render: () => (
+    <VStack space={16}>
+      <Text weight="semiBold">Hover State Demo</Text>
+      <Text size="caption" color="secondary">
+        On web, hover over the select trigger and dropdown options to see hover states.
+      </Text>
+      <Select
+        label="Hover over me"
+        placeholder="Hover to see border change..."
+        options={[
+          { label: 'Option 1 - Hover to highlight', value: '1' },
+          { label: 'Option 2 - Hover to highlight', value: '2' },
+          { label: 'Option 3 - Hover to highlight', value: '3' },
+          { label: 'Option 4 - Hover to highlight', value: '4' },
+          { label: 'Option 5 - Hover to highlight', value: '5' },
+        ]}
+        helperText="Hover states provide visual feedback on web"
+      />
+    </VStack>
+  ),
+};