pure-react-ui 1.5.5 → 1.5.6

package/README.md

@@ -8,6 +8,12 @@ A pure React UI component library built with TypeScript. No external dependencie
 npm install pure-react-ui
 ```
 
+**Note:** The `Select` component requires `react-select` as a peer dependency. If you're using the Select component, make sure to install it:
+
+```bash
+npm install react-select
+```
+
 ## Components
 
 ### Button
@@ -323,11 +329,17 @@ import { Textarea } from 'pure-react-ui';
 
 #### Select
 
-Dropdown select component.
+Advanced dropdown select component powered by react-select with search, multi-select, and more features.
+
+**Note:** This component requires `react-select` to be installed as a peer dependency:
+```bash
+npm install react-select
+```
 
 ```tsx
 import { Select } from 'pure-react-ui';
 
+// Basic Select
 <Select
   label="Country"
   options={[
@@ -337,17 +349,58 @@ import { Select } from 'pure-react-ui';
   placeholder="Choose a country"
   fullWidth
 />
+
+// Searchable Select
+<Select
+  label="Search Country"
+  options={countries}
+  placeholder="Search and select"
+  isSearchable
+  isClearable
+  fullWidth
+/>
+
+// Multi Select
+<Select
+  label="Select Frameworks"
+  options={frameworks}
+  placeholder="Select multiple"
+  isMulti
+  isSearchable
+  fullWidth
+/>
+
+// Select with Icons
+<Select
+  label="Framework"
+  options={[
+    { value: 'react', label: 'React', icon: <Icon name="Zap" /> },
+    { value: 'vue', label: 'Vue.js', icon: <Icon name="Zap" /> }
+  ]}
+  placeholder="Choose framework"
+  fullWidth
+/>
 ```
 
 **Props:**
 - `label`: string (optional)
 - `error`: string (optional)
 - `helpText`: string (optional)
-- `options`: SelectOption[] (required)
-- `placeholder`: string (optional)
+- `options`: SelectOption[] (required) - Array of options with `value`, `label`, optional `disabled`, and optional `icon`
+- `placeholder`: string (optional, default: 'Select...')
+- `value`: string | number | (string | number)[] (optional) - Controlled value
+- `defaultValue`: string | number | (string | number)[] (optional) - Uncontrolled default value
+- `multiple` or `isMulti`: boolean (default: false) - Enable multi-select
+- `searchable` or `isSearchable`: boolean (default: false) - Enable search functionality
+- `allowClear` or `isClearable`: boolean (default: false) - Show clear button
+- `disabled`: boolean (default: false)
 - `fullWidth`: boolean (default: false)
 - `size`: 'small' | 'medium' | 'large' (default: 'medium')
-- All standard select HTML attributes
+- `onChange`: (value: string | number | (string | number)[]) => void (optional)
+- `onSearch`: (searchText: string) => void (optional) - Callback when search text changes
+- `name`: string (optional) - Form field name
+- `id`: string (optional) - Custom ID for the select
+- `className`: string (optional)
 
 #### Checkbox
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pure-react-ui",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "description": "A pure React UI component library with Button, Card, Modal, Icon, Space, Flex, Text, and Form components",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -30,12 +30,15 @@
   "license": "MIT",
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "react-select": ">=5.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "react-select": "^5.8.0",
+    "@types/react-select": "^5.0.0"
   }
 }