@wireservers-ui/react-natives 2.0.2-rc.0 → 2.0.4

package/CHANGELOG.md

@@ -7,6 +7,38 @@ Versioning: [Semantic Versioning](https://semver.org/)
 
 ---
 
+## [2.0.4] - 2026-07-02
+
+### Added
+- `Select` now supports multi-select state with `isMulti`, `selectedValues`, `defaultValues`, `onValuesChange`, and configurable close-on-select behavior.
+- `SelectSearchInput` filters dropdown items using built-in text matching or a custom `filterOption` callback.
+- `SelectSelectedBadges` renders selected values as removable badges with class overrides, `maxVisible`, overflow labels, and custom badge rendering.
+
+### Changed
+- `SelectItem` toggles selected values in multi-select mode and preserves single-select behavior by default.
+- `SelectInput` now uses the root `Select` placeholder when no local placeholder override is provided.
+
+---
+
+## [2.0.3] - 2026-04-18
+
+### Fixed
+- Repository URL updated from `wireservers/wireservers-ui` to `wireservers/react-natives` following GitHub repo rename — resolves 404 on npmjs Release Notes link
+
+### Changed
+- CI workflows migrated from `dev`/`prod`/`sot` branch model to `develop`/`main` gitflow
+- `babel-preset-expo` added as explicit dependency to resolve peer dependency resolution failures in certain environments
+- Docs site Dockerfile and nginx config added for self-hosted deployment
+
+---
+
+## [2.0.2] - 2026-03-21
+
+### Changed
+- Promoted `2.0.2-rc.0` to stable `2.0.2` with no additional code changes
+
+---
+
 ## [2.0.2-rc.0] - 2026-03-21
 
 ### Added

package/README.md

@@ -2,24 +2,25 @@
 
 **A comprehensive React Native component library built with NativeWind and Tailwind Variants.**
 
-> **Note:** This project is in active development (v2.0.1). We're building out components, documentation, and tooling. Contributions and feedback are welcome!
+> **Note:** This project is in active development (v2.0.4). We're building out components, documentation, and tooling. Contributions and feedback are welcome!
 
 [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![npm version](https://img.shields.io/npm/v/@wireservers-ui/react-natives.svg)](https://www.npmjs.com/package/@wireservers-ui/react-natives)
 
 ---
 
-## Release Notes (v2.0.1)
+## Release Notes (v2.0.4)
 
 ### What was updated
 
-- Published package contents now include `bin/init.js` (packaging parity fix)
-- This ensures the installed npm artifact contains the same CLI helper file expected by local package contents
+- `Select` now supports searchable multi-select usage with controlled and uncontrolled selected values
+- `SelectSearchInput` filters dropdown items while keeping existing single-select usage unchanged
+- `SelectSelectedBadges` displays removable selected-value badges with styling and rendering overrides
 
 ### Changelog
 
 - Full changelog is included in the package at `CHANGELOG.md`
-- GitHub: https://github.com/wireservers/wireservers-ui/blob/dev/packages/react-natives/CHANGELOG.md
+- GitHub: https://github.com/wireservers/react-natives/blob/main/packages/react-natives/CHANGELOG.md
 - npm package page: open the `CHANGELOG.md` file from the package contents/files list
 
 ---
@@ -32,17 +33,8 @@ React-Natives is a collection of 70+ production-ready, accessible React Native c
 
 ### Key Features
 
-- **70+ Components** — Buttons, forms, modals, tables, calendars, color pickers, and more
-- **TypeScript First** — Fully typed with excellent IDE autocomplete
-- **NativeWind + Tailwind Variants** — Utility-first styling with type-safe variant APIs
-- **Themeable** — CSS variable-based color system with light/dark mode support
-- **Accessible** — Built with accessibility in mind
-- **Cross Platform** — iOS, Android, and Web via React Native
 
-### Tech Stack
-
-| Layer | Technology |
-| --- | --- |
+// ...existing code...
 | Components | React Native |
 | Styling | NativeWind v4, Tailwind CSS 3, Tailwind Variants |
 | Types | TypeScript |
@@ -55,16 +47,21 @@ React-Natives is a collection of 70+ production-ready, accessible React Native c
 
 Use this for the fastest first-time setup in a new Expo app.
 
+1. Create a new Expo app.
+2. Enter the app folder.
+3. Install `@wireservers-ui/react-natives`.
+4. Run `init`.
+5. Start Expo web.
+
 ```bash
-mkdir -p demos/react-natives
-npx create-expo-app@latest demos/react-natives/project --template blank-typescript
-cd demos/react-natives/project
-npm install @wireservers-ui/react-natives@2.0.1
-npx @wireservers-ui/react-natives@2.0.1 init
+npx create-expo-app@latest wsui --template blank-typescript
+cd wsui
+npm install @wireservers-ui/react-natives
+npx react-natives init
 npm exec expo -- start --clear --web
 ```
 
-This sequence keeps all generated files inside `demos/react-natives/project`.
+This sequence keeps all generated files inside `wsui`.
 No setup files are written outside the generated project folder when run exactly as above.
 
 If `npm exec` prompts to install `expo`, answer `y`.
@@ -86,8 +83,8 @@ npm exec expo -- start --clear --web
 Always run the init command from inside your generated project folder:
 
 ```bash
-cd demos/react-natives/project
-npx @wireservers-ui/react-natives@2.0.1 init
+cd wsui
+npx react-natives init
 ```
 
 Do not run `init` from the repository root.
@@ -99,6 +96,12 @@ What `init` does for you:
 - Creates setup files only if missing
 - Never overwrites existing files in your project
 
+To overwrite generated setup files intentionally, use:
+
+```bash
+npx react-natives init --force
+```
+
 ### 2. Manual Setup (Detailed)
 
 Use this path if you want full control over every file.
@@ -106,7 +109,7 @@ Use this path if you want full control over every file.
 #### Step A: Install packages
 
 ```bash
-npm install @wireservers-ui/react-natives@2.0.1
+npm install @wireservers-ui/react-natives
 npm install nativewind babel-preset-expo tailwindcss tailwind-variants tailwind-merge react-native-reanimated react-native-worklets react-native-svg react-native-web react-dom
 ```
 
@@ -598,7 +601,7 @@ react-natives/
 
 ```bash
 # Clone the repository
-git clone https://github.com/wireservers/wireservers-ui.git
+git clone https://github.com/wireservers/react-natives.git
 cd wireservers-ui/packages/react-natives
 
 # Install dependencies

package/bin/cli.js

@@ -44,7 +44,7 @@ if (!isExpoProject(cwd)) {
     "   npx create-expo-app@latest demos/react-natives/project --template blank-typescript",
   );
   console.error("   cd demos/react-natives/project");
-  console.error("   npx @wireservers-ui/react-natives@2.0.1 init\n");
+  console.error("   npx @wireservers-ui/react-natives@2.0.2 init\n");
   process.exit(1);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireservers-ui/react-natives",
-  "version": "2.0.2-rc.0",
+  "version": "2.0.4",
   "description": "A comprehensive React Native component library built with NativeWind and Tailwind Variants",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -11,7 +11,7 @@
     "CHANGELOG.md"
   ],
   "bin": {
-    "react-natives": "./bin/cli.js"
+    "react-natives": "bin/cli.js"
   },
   "scripts": {},
   "keywords": [
@@ -24,7 +24,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/wireservers/wireservers-ui.git",
+    "url": "git+https://github.com/wireservers/react-natives.git",
     "directory": "packages/react-natives"
   },
   "license": "MIT",
@@ -47,4 +47,4 @@
     "nativewind": "^4.2.3",
     "tailwind-variants": "^0.1.20"
   }
-}
+}

package/src/index.ts

@@ -255,11 +255,14 @@ export {
   SelectItemContext,
   useSelectItemContext,
   SelectItemText,
+  SelectSearchInput,
+  SelectSelectedBadges,
   SelectDragIndicator,
   SelectScrollView,
 } from './select';
 export type {
   SelectProps,
+  SelectOption,
   SelectTriggerProps,
   SelectInputProps,
   SelectIconProps,
@@ -268,6 +271,8 @@ export type {
   SelectContentProps,
   SelectItemProps,
   SelectItemTextProps,
+  SelectSearchInputProps,
+  SelectSelectedBadgesProps,
   SelectDragIndicatorProps,
   SelectScrollViewProps,
   SelectSize,

package/src/select/index.ts

@@ -7,10 +7,13 @@ export { SelectBackdrop } from './select-backdrop';
 export { SelectContent } from './select-content';
 export { SelectItem, SelectItemContext, useSelectItemContext } from './select-item';
 export { SelectItemText } from './select-item-text';
+export { SelectSearchInput } from './select-search-input';
+export { SelectSelectedBadges } from './select-selected-badges';
 export { SelectDragIndicator } from './select-drag-indicator';
 export { SelectScrollView } from './select-scroll-view';
 export type {
   SelectProps,
+  SelectOption,
   SelectTriggerProps,
   SelectInputProps,
   SelectIconProps,
@@ -19,6 +22,8 @@ export type {
   SelectContentProps,
   SelectItemProps,
   SelectItemTextProps,
+  SelectSearchInputProps,
+  SelectSelectedBadgesProps,
   SelectDragIndicatorProps,
   SelectScrollViewProps,
   SelectSize,

package/src/select/select-input.tsx

@@ -8,10 +8,10 @@ export const SelectInput = React.forwardRef<
   React.ElementRef<typeof Text>,
   SelectInputProps
 >(({ className, placeholder, ...props }, ref) => {
-  const { selectedLabel, size } = useSelectContext();
+  const { selectedLabel, size, placeholder: contextPlaceholder } = useSelectContext();
 
   const hasValue = !!selectedLabel;
-  const displayText = hasValue ? selectedLabel : (placeholder ?? 'Select...');
+  const displayText = hasValue ? selectedLabel : (placeholder ?? contextPlaceholder);
 
   return (
     <Text

package/src/select/select-item.tsx

@@ -25,17 +25,32 @@ export const SelectItem = React.forwardRef<
   React.ElementRef<typeof Pressable>,
   SelectItemProps
 >(({ className, label, value, isDisabled = false, children, ...props }, ref) => {
-  const { selectedValue, onValueChange, onClose, size } = useSelectContext();
+  const {
+    isMulti,
+    onValueChange,
+    size,
+    isValueSelected,
+    shouldShowItem,
+    registerItem,
+  } = useSelectContext();
 
-  const isSelected = selectedValue === value;
+  const isSelected = isValueSelected(value);
+  const isVisible = shouldShowItem(value, label);
+
+  React.useEffect(() => {
+    registerItem(value, label);
+  }, [label, registerItem, value]);
 
   const handlePress = () => {
     if (!isDisabled) {
       onValueChange(value, label);
-      onClose();
     }
   };
 
+  if (!isVisible) {
+    return null;
+  }
+
   return (
     <SelectItemContext.Provider value={{ label, value, isSelected, isDisabled }}>
       <Pressable
@@ -55,14 +70,27 @@ export const SelectItem = React.forwardRef<
         {...props}
       >
         {children ?? (
-          <Text
-            className={selectItemTextStyle({
-              size,
-              isSelected,
-            })}
-          >
-            {label}
-          </Text>
+          <>
+            {isMulti ? (
+              <Text
+                className={selectItemTextStyle({
+                  size,
+                  isSelected,
+                })}
+                style={{ width: 22 }}
+              >
+                {isSelected ? '\u2713' : ''}
+              </Text>
+            ) : null}
+            <Text
+              className={selectItemTextStyle({
+                size,
+                isSelected,
+              })}
+            >
+              {label}
+            </Text>
+          </>
         )}
       </Pressable>
     </SelectItemContext.Provider>

package/src/select/select-search-input.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Pressable, Text, TextInput, View } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectSearchInputProps } from './types';
+import {
+  selectSearchClearButtonStyle,
+  selectSearchInputFieldStyle,
+  selectSearchInputStyle,
+} from './styles';
+
+export const SelectSearchInput = React.forwardRef<
+  React.ElementRef<typeof TextInput>,
+  SelectSearchInputProps
+>(
+  (
+    {
+      className,
+      inputClassName,
+      clearButtonClassName,
+      clearLabel = 'Clear search',
+      isClearable = true,
+      placeholder = 'Search...',
+      value,
+      onChangeText,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const { size, searchValue, onSearchChange, isDisabled } = useSelectContext();
+    const resolvedValue = value ?? searchValue;
+
+    const handleChangeText = (nextValue: string) => {
+      onSearchChange(nextValue);
+      onChangeText?.(nextValue);
+    };
+
+    const handleClear = () => {
+      handleChangeText('');
+    };
+
+    return (
+      <View className={selectSearchInputStyle({ size, class: className })}>
+        <TextInput
+          ref={ref}
+          value={resolvedValue}
+          onChangeText={handleChangeText}
+          editable={!isDisabled}
+          readOnly={isDisabled}
+          placeholder={placeholder}
+          placeholderTextColor="rgb(var(--color-typography-400))"
+          className={selectSearchInputFieldStyle({
+            size,
+            class: inputClassName,
+          })}
+          {...props}
+          style={[{ backgroundColor: 'transparent' }, style]}
+        />
+        {isClearable && resolvedValue ? (
+          <Pressable
+            onPress={handleClear}
+            className={selectSearchClearButtonStyle({
+              size,
+              class: clearButtonClassName,
+            })}
+            accessibilityRole="button"
+            accessibilityLabel={clearLabel}
+          >
+            <Text className="text-typography-400">{'\u2715'}</Text>
+          </Pressable>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+SelectSearchInput.displayName = 'SelectSearchInput';

package/src/select/select-selected-badges.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Pressable, Text, View, type GestureResponderEvent } from 'react-native';
+import { useSelectContext } from './select';
+import type { SelectSelectedBadgesProps } from './types';
+import {
+  selectSelectedBadgeCloseButtonStyle,
+  selectSelectedBadgeStyle,
+  selectSelectedBadgeTextStyle,
+  selectSelectedBadgesStyle,
+} from './styles';
+
+export const SelectSelectedBadges = React.forwardRef<
+  React.ElementRef<typeof View>,
+  SelectSelectedBadgesProps
+>(
+  (
+    {
+      className,
+      badgeClassName,
+      badgeTextClassName,
+      badgeCloseButtonClassName,
+      maxVisible,
+      showRemoveButton = true,
+      overflowLabel = (count) => `+${count}`,
+      renderBadge,
+      ...props
+    },
+    ref,
+  ) => {
+    const { selectedItems, onValueRemove, size, isDisabled } = useSelectContext();
+    const visibleItems =
+      maxVisible === undefined ? selectedItems : selectedItems.slice(0, maxVisible);
+    const overflowCount =
+      maxVisible === undefined
+        ? 0
+        : Math.max(selectedItems.length - maxVisible, 0);
+
+    if (selectedItems.length === 0) {
+      return null;
+    }
+
+    return (
+      <View
+        ref={ref}
+        className={selectSelectedBadgesStyle({ class: className })}
+        {...props}
+      >
+        {visibleItems.map((item) => {
+          const remove = () => onValueRemove(item.value);
+          const handleRemove = (event: GestureResponderEvent) => {
+            event.stopPropagation?.();
+            remove();
+          };
+
+          if (renderBadge) {
+            return (
+              <React.Fragment key={item.value}>
+                {renderBadge(item, { remove, isDisabled })}
+              </React.Fragment>
+            );
+          }
+
+          return (
+            <View
+              key={item.value}
+              className={selectSelectedBadgeStyle({
+                isDisabled,
+                class: badgeClassName,
+              })}
+            >
+              <Text
+                numberOfLines={1}
+                className={selectSelectedBadgeTextStyle({
+                  size,
+                  class: badgeTextClassName,
+                })}
+              >
+                {item.label}
+              </Text>
+              {showRemoveButton ? (
+                <Pressable
+                  disabled={isDisabled}
+                  onPress={handleRemove}
+                  className={selectSelectedBadgeCloseButtonStyle({
+                    size,
+                    class: badgeCloseButtonClassName,
+                  })}
+                  accessibilityRole="button"
+                  accessibilityLabel={`Remove ${item.label}`}
+                >
+                  <Text className="text-typography-400">{'\u2715'}</Text>
+                </Pressable>
+              ) : null}
+            </View>
+          );
+        })}
+        {overflowCount > 0 ? (
+          <View
+            className={selectSelectedBadgeStyle({
+              isDisabled,
+              class: badgeClassName,
+            })}
+          >
+            <Text
+              className={selectSelectedBadgeTextStyle({
+                size,
+                class: badgeTextClassName,
+              })}
+            >
+              {overflowLabel(overflowCount)}
+            </Text>
+          </View>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+SelectSelectedBadges.displayName = 'SelectSelectedBadges';

package/src/select/select.tsx

@@ -1,7 +1,19 @@
-import React, { useState, useCallback, createContext, useContext } from 'react';
+import React, {
+  useState,
+  useCallback,
+  createContext,
+  useContext,
+  useMemo,
+} from 'react';
 import { View } from 'react-native';
 import { useFormControlContext } from '../form-control/form-control';
-import type { SelectProps, SelectContextValue, SelectSize, TriggerLayout } from './types';
+import type {
+  SelectProps,
+  SelectContextValue,
+  SelectSize,
+  TriggerLayout,
+  SelectOption,
+} from './types';
 
 export const SelectContext = createContext<SelectContextValue | null>(null);
 
@@ -22,9 +34,20 @@ export const Select = React.forwardRef<
   (
     {
       className,
+      isMulti = false,
       selectedValue: controlledValue,
       defaultValue,
       onValueChange: onValueChangeProp,
+      selectedValues: controlledValues,
+      defaultValues = [],
+      onValuesChange,
+      valueLabels = {},
+      closeOnSelect,
+      searchValue: controlledSearchValue,
+      defaultSearchValue = '',
+      onSearchChange,
+      filterOption,
+      formatSelectedLabel,
       size = 'md',
       variant = 'outline',
       isDisabled: isDisabledProp,
@@ -38,7 +61,12 @@ export const Select = React.forwardRef<
     const [internalValue, setInternalValue] = useState<string | null>(
       defaultValue ?? null,
     );
+    const [internalValues, setInternalValues] = useState<string[]>(defaultValues);
     const [internalLabel, setInternalLabel] = useState('');
+    const [registeredLabels, setRegisteredLabels] =
+      useState<Record<string, string>>({});
+    const [internalSearchValue, setInternalSearchValue] =
+      useState(defaultSearchValue);
     const [triggerLayout, setTriggerLayout] = useState<TriggerLayout | null>(null);
 
     const formControl = useFormControlContext();
@@ -49,8 +77,51 @@ export const Select = React.forwardRef<
 
     const isControlled = controlledValue !== undefined;
     const selectedValue = isControlled ? controlledValue : internalValue;
+    const isMultiControlled = controlledValues !== undefined;
+    const selectedValues = isMulti
+      ? isMultiControlled
+        ? controlledValues
+        : internalValues
+      : selectedValue
+        ? [selectedValue]
+        : [];
+    const isSearchControlled = controlledSearchValue !== undefined;
+    const searchValue = isSearchControlled
+      ? controlledSearchValue
+      : internalSearchValue;
+    const shouldCloseOnSelect = closeOnSelect ?? !isMulti;
 
-    const selectedLabel = selectedValue ? internalLabel || selectedValue : '';
+    const getLabel = useCallback(
+      (value: string) => valueLabels[value] ?? registeredLabels[value] ?? value,
+      [registeredLabels, valueLabels],
+    );
+
+    const selectedItems = useMemo<SelectOption[]>(
+      () => selectedValues.map((value) => ({ value, label: getLabel(value) })),
+      [getLabel, selectedValues],
+    );
+
+    const selectedLabel = useMemo(() => {
+      if (isMulti) {
+        if (formatSelectedLabel) {
+          return formatSelectedLabel(selectedItems);
+        }
+        if (selectedItems.length === 0) return '';
+        if (selectedItems.length === 1) return selectedItems[0]?.label ?? '';
+        return `${selectedItems.length} items selected`;
+      }
+
+      return selectedValue
+        ? internalLabel || getLabel(selectedValue)
+        : '';
+    }, [
+      formatSelectedLabel,
+      getLabel,
+      internalLabel,
+      isMulti,
+      selectedItems,
+      selectedValue,
+    ]);
 
     const onOpen = useCallback(() => {
       if (!isDisabled) {
@@ -64,21 +135,121 @@ export const Select = React.forwardRef<
 
     const onValueChange = useCallback(
       (value: string, label: string) => {
+        setRegisteredLabels((current) =>
+          current[value] === label ? current : { ...current, [value]: label },
+        );
+
+        if (isMulti) {
+          const nextValues = selectedValues.includes(value)
+            ? selectedValues.filter((selected) => selected !== value)
+            : [...selectedValues, value];
+
+          if (!isMultiControlled) {
+            setInternalValues(nextValues);
+          }
+          onValuesChange?.(nextValues);
+        } else {
+          if (!isControlled) {
+            setInternalValue(value);
+          }
+          setInternalLabel(label);
+          onValueChangeProp?.(value);
+        }
+
+        if (shouldCloseOnSelect) {
+          setIsOpen(false);
+        }
+      },
+      [
+        isControlled,
+        isMulti,
+        isMultiControlled,
+        onValueChangeProp,
+        onValuesChange,
+        selectedValues,
+        shouldCloseOnSelect,
+      ],
+    );
+
+    const onValueRemove = useCallback(
+      (value: string) => {
+        if (isMulti) {
+          const nextValues = selectedValues.filter((selected) => selected !== value);
+          if (!isMultiControlled) {
+            setInternalValues(nextValues);
+          }
+          onValuesChange?.(nextValues);
+          return;
+        }
+
         if (!isControlled) {
-          setInternalValue(value);
+          setInternalValue(null);
         }
-        setInternalLabel(label);
-        onValueChangeProp?.(value);
+        setInternalLabel('');
+        onValueChangeProp?.('');
+      },
+      [
+        isControlled,
+        isMulti,
+        isMultiControlled,
+        onValueChangeProp,
+        onValuesChange,
+        selectedValues,
+      ],
+    );
+
+    const handleSearchChange = useCallback(
+      (value: string) => {
+        if (!isSearchControlled) {
+          setInternalSearchValue(value);
+        }
+        onSearchChange?.(value);
+      },
+      [isSearchControlled, onSearchChange],
+    );
+
+    const isValueSelected = useCallback(
+      (value: string) => selectedValues.includes(value),
+      [selectedValues],
+    );
+
+    const shouldShowItem = useCallback(
+      (value: string, label: string) => {
+        const normalizedSearch = searchValue.trim().toLowerCase();
+        if (!normalizedSearch) return true;
+
+        if (filterOption) {
+          return filterOption(searchValue, { value, label });
+        }
+
+        return (
+          label.toLowerCase().includes(normalizedSearch) ||
+          value.toLowerCase().includes(normalizedSearch)
+        );
+      },
+      [filterOption, searchValue],
+    );
+
+    const registerItem = useCallback(
+      (value: string, label: string) => {
+        setRegisteredLabels((current) =>
+          current[value] === label ? current : { ...current, [value]: label },
+        );
       },
-      [isControlled, onValueChangeProp],
+      [],
     );
 
     return (
       <SelectContext.Provider
         value={{
           isOpen,
+          isMulti,
           selectedValue: selectedValue ?? null,
+          selectedValues,
           selectedLabel,
+          selectedItems,
+          searchValue,
+          placeholder,
           size: resolvedSize,
           variant,
           isDisabled,
@@ -87,6 +258,11 @@ export const Select = React.forwardRef<
           onOpen,
           onClose,
           onValueChange,
+          onValueRemove,
+          onSearchChange: handleSearchChange,
+          isValueSelected,
+          shouldShowItem,
+          registerItem,
           setTriggerLayout,
         }}
       >

package/src/select/styles.ts

@@ -56,6 +56,94 @@ export const selectInputStyle = tv({
   },
 });
 
+export const selectSelectedBadgesStyle = tv({
+  base: 'flex-row flex-wrap items-center gap-1.5 flex-1',
+});
+
+export const selectSelectedBadgeStyle = tv({
+  base: 'flex-row items-center rounded-full border border-outline-200 bg-background-0 px-2 py-1 shadow-soft-1',
+  variants: {
+    isDisabled: {
+      true: 'opacity-50',
+    },
+  },
+});
+
+export const selectSelectedBadgeTextStyle = tv({
+  base: 'font-medium text-typography-900',
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+      xl: 'text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const selectSelectedBadgeCloseButtonStyle = tv({
+  base: 'ml-1.5 rounded-full items-center justify-center',
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+      xl: 'h-6 w-6',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const selectSearchInputStyle = tv({
+  base: 'mx-2 my-2 flex-row items-center rounded-md border border-outline-200 bg-background-0 px-3',
+  variants: {
+    size: {
+      sm: 'h-8',
+      md: 'h-9',
+      lg: 'h-10',
+      xl: 'h-11',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const selectSearchInputFieldStyle = tv({
+  base: 'flex-1 text-typography-900',
+  variants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export const selectSearchClearButtonStyle = tv({
+  base: 'ml-2 rounded-full items-center justify-center',
+  variants: {
+    size: {
+      sm: 'h-5 w-5',
+      md: 'h-6 w-6',
+      lg: 'h-6 w-6',
+      xl: 'h-7 w-7',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
 export const selectIconStyle = tv({
   base: 'text-typography-400 ml-2',
   variants: {

package/src/select/types.ts

@@ -1,8 +1,19 @@
-import type { View, Text as RNText, Pressable, ScrollView } from 'react-native';
+import type {
+  View,
+  Text as RNText,
+  TextInput,
+  Pressable,
+  ScrollView,
+} from 'react-native';
 
 export type SelectSize = 'sm' | 'md' | 'lg' | 'xl';
 export type SelectVariant = 'outline' | 'filled' | 'underlined' | 'rounded';
 
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
 export interface TriggerLayout {
   pageX: number;
   pageY: number;
@@ -12,8 +23,13 @@ export interface TriggerLayout {
 
 export interface SelectContextValue {
   isOpen: boolean;
+  isMulti: boolean;
   selectedValue: string | null;
+  selectedValues: string[];
   selectedLabel: string;
+  selectedItems: SelectOption[];
+  searchValue: string;
+  placeholder: string;
   size: SelectSize;
   variant: SelectVariant;
   isDisabled: boolean;
@@ -22,14 +38,30 @@ export interface SelectContextValue {
   onOpen: () => void;
   onClose: () => void;
   onValueChange: (value: string, label: string) => void;
+  onValueRemove: (value: string) => void;
+  onSearchChange: (value: string) => void;
+  isValueSelected: (value: string) => boolean;
+  shouldShowItem: (value: string, label: string) => boolean;
+  registerItem: (value: string, label: string) => void;
   setTriggerLayout: (layout: TriggerLayout) => void;
 }
 
 export interface SelectProps {
   className?: string;
+  isMulti?: boolean;
   selectedValue?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
+  selectedValues?: string[];
+  defaultValues?: string[];
+  onValuesChange?: (values: string[]) => void;
+  valueLabels?: Record<string, string>;
+  closeOnSelect?: boolean;
+  searchValue?: string;
+  defaultSearchValue?: string;
+  onSearchChange?: (value: string) => void;
+  filterOption?: (searchValue: string, option: SelectOption) => boolean;
+  formatSelectedLabel?: (items: SelectOption[]) => string;
   size?: SelectSize;
   variant?: SelectVariant;
   isDisabled?: boolean;
@@ -81,6 +113,30 @@ export interface SelectItemTextProps
   className?: string;
 }
 
+export interface SelectSearchInputProps
+  extends React.ComponentPropsWithoutRef<typeof TextInput> {
+  className?: string;
+  inputClassName?: string;
+  clearButtonClassName?: string;
+  clearLabel?: string;
+  isClearable?: boolean;
+}
+
+export interface SelectSelectedBadgesProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  badgeClassName?: string;
+  badgeTextClassName?: string;
+  badgeCloseButtonClassName?: string;
+  maxVisible?: number;
+  showRemoveButton?: boolean;
+  overflowLabel?: (count: number) => string;
+  renderBadge?: (
+    item: SelectOption,
+    helpers: { remove: () => void; isDisabled: boolean },
+  ) => React.ReactNode;
+}
+
 export interface SelectDragIndicatorProps
   extends React.ComponentPropsWithoutRef<typeof View> {
   className?: string;