pure-react-ui 1.5.4 → 1.5.6

package/README.md

@@ -1,505 +1,558 @@
-# Pure React UI
-
-A pure React UI component library built with TypeScript. No external dependencies required (except React and ReactDOM as peer dependencies).
-
-## Installation
-
-```bash
-npm install pure-react-ui
-```
-
-## Components
-
-### Button
-
-A versatile button component with multiple variants and sizes.
-
-```tsx
-import { Button } from 'pure-react-ui';
-
-<Button variant="primary" size="medium" onClick={handleClick}>
-  Click Me
-</Button>
-```
-
-**Props:**
-- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' (default: 'primary')
-- `size`: 'small' | 'medium' | 'large' (default: 'medium')
-- `fullWidth`: boolean (default: false)
-- `loading`: boolean (default: false)
-- All standard button HTML attributes
-
-### Card
-
-A flexible card component for displaying content.
-
-```tsx
-import { Card } from 'pure-react-ui';
-
-<Card
-  title="Card Title"
-  subtitle="Card Subtitle"
-  image="/path/to/image.jpg"
-  hoverable
-  shadow="medium"
->
-  Card content goes here
-</Card>
-```
-
-**Props:**
-- `title`: string (optional)
-- `subtitle`: string (optional)
-- `image`: string (optional)
-- `imageAlt`: string (optional)
-- `footer`: React.ReactNode (optional)
-- `hoverable`: boolean (default: false)
-- `shadow`: 'none' | 'small' | 'medium' | 'large' (default: 'medium')
-- `onClick`: () => void (optional)
-
-### Modal
-
-A modal dialog component with overlay and keyboard support.
-
-```tsx
-import { Modal } from 'pure-react-ui';
-
-<Modal
-  isOpen={isOpen}
-  onClose={() => setIsOpen(false)}
-  title="Modal Title"
-  size="medium"
->
-  Modal content goes here
-</Modal>
-```
-
-**Props:**
-- `isOpen`: boolean (required)
-- `onClose`: () => void (required)
-- `title`: string | React.ReactNode (optional) - Modal title or custom header content
-- `size`: 'small' | 'medium' | 'large' | 'fullscreen' (default: 'medium')
-- `position`: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' (default: 'center')
-- `variant`: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'gradient-primary' | 'gradient-success' | 'gradient-danger' | 'gradient-info' (default: 'default')
-- `closeOnOverlayClick`: boolean (default: true)
-- `closeOnEscape`: boolean (default: true)
-- `showCloseButton`: boolean (default: true)
-- `scrollable`: boolean (default: true) - Enable scrolling for modal body
-- `topMargin`: number | string (optional) - Custom top margin for modal
-- `className`: string (optional) - Additional CSS classes
-- `overlayClassName`: string (optional) - Additional CSS classes for overlay
-- `headerClassName`: string (optional) - Additional CSS classes for header
-- `bodyClassName`: string (optional) - Additional CSS classes for body
-
-### Icon
-
-A comprehensive icon component library with 100+ SVG icons.
-
-```tsx
-import { Icon } from 'pure-react-ui';
-
-<Icon name="Home" size={24} color="#007bff" />
-<Icon name="Search" size={32} onClick={handleClick} />
-```
-
-**Props:**
-- `name`: IconName (required) - Name of the icon to display
-- `size`: number | string (default: 24) - Size of the icon
-- `color`: string (default: 'currentColor') - Color of the icon
-- `className`: string (optional) - Additional CSS classes
-- `onClick`: () => void (optional) - Click handler (makes icon clickable)
-
-**Available Icons:**
-
-**Arrows & Navigation:**
-ArrowLeft, ArrowRight, ArrowUp, ArrowDown, ArrowUpRight, ArrowDownRight, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, DoubleChevronLeft, DoubleChevronRight, Home, Menu, Close, Search, Filter
-
-**Actions:**
-Plus, Minus, Check, X, Edit, Trash, Save, Download, Upload, Copy, Share
-
-**Media:**
-Play, Pause, Stop, VolumeUp, VolumeDown, VolumeOff, Image, Video, Camera
-
-**Communication:**
-Mail, Message, Phone, Bell, Notification
-
-**Files:**
-File, Folder, FolderOpen, FileText, FilePdf
-
-**User:**
-User, Users, UserPlus, UserMinus, Settings, Logout
-
-**Status:**
-CheckCircle, XCircle, AlertCircle, Info, Warning, Star, Heart, Bookmark
-
-**Social:**
-Facebook, Twitter, Instagram, Linkedin, Github, Youtube
-
-**Technology:**
-Wifi, Bluetooth, Battery, Zap, Lock, Unlock, Shield
-
-**Shopping:**
-ShoppingCart, ShoppingBag, CreditCard, Gift
-
-**Time:**
-Clock, Calendar, Timer
-
-**Location:**
-MapPin, Globe, Navigation
-
-**Weather:**
-Sun, Moon, Cloud
-
-**Utility:**
-Eye, EyeOff, Refresh, MoreVertical, MoreHorizontal, Grid, List
-
-You can also import individual icons directly:
-```tsx
-import { Home, Search, User } from 'pure-react-ui';
-
-<Home size={24} color="#007bff" />
-```
-
-### Space
-
-A layout component for adding consistent spacing between elements.
-
-```tsx
-import { Space } from 'pure-react-ui';
-
-<Space size="medium" direction="horizontal">
-  <Button>Button 1</Button>
-  <Button>Button 2</Button>
-  <Button>Button 3</Button>
-</Space>
-
-<Space size={20} direction="vertical" align="start">
-  <Card>Card 1</Card>
-  <Card>Card 2</Card>
-</Space>
-```
-
-**Props:**
-- `size`: 'small' | 'medium' | 'large' | number (default: 'medium') - Spacing size between items
-- `direction`: 'horizontal' | 'vertical' (default: 'horizontal') - Direction of spacing
-- `align`: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'center') - Alignment of items
-- `wrap`: boolean (default: false) - Whether items should wrap to next line
-- `className`: string (optional) - Additional CSS classes
-
-### Flex
-
-A flexible container component based on CSS Flexbox.
-
-```tsx
-import { Flex } from 'pure-react-ui';
-
-<Flex direction="row" justify="between" align="center" gap="medium">
-  <Button>Left</Button>
-  <Button>Center</Button>
-  <Button>Right</Button>
-</Flex>
-
-<Flex direction="column" justify="start" align="stretch" gap={16}>
-  <Card>Card 1</Card>
-  <Card>Card 2</Card>
-</Flex>
-```
-
-**Props:**
-- `direction`: 'row' | 'column' | 'row-reverse' | 'column-reverse' (default: 'row') - Flex direction
-- `justify`: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' (default: 'start') - Justify content
-- `align`: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'start') - Align items
-- `wrap`: boolean | 'wrap' | 'nowrap' | 'wrap-reverse' (default: false) - Flex wrap behavior
-- `gap`: 'none' | 'small' | 'medium' | 'large' | number (default: 'none') - Gap between items
-- `className`: string (optional) - Additional CSS classes
-- `style`: React.CSSProperties (optional) - Additional inline styles
-
-### Text
-
-A typography component for consistent text styling with various options.
-
-```tsx
-import { Text } from 'pure-react-ui';
-
-<Text as="h1" size="2xl" weight="bold" color="primary">
-  Heading Text
-</Text>
-
-<Text size="lg" color="muted" align="center">
-  Centered paragraph text
-</Text>
-
-<Text as="span" size="sm" decoration="underline" transform="uppercase">
-  Styled Text
-</Text>
-```
-
-**Props:**
-- `as`: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'small' | 'strong' | 'em' | 'code' | 'pre' (default: 'p') - HTML element to render
-- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' (default: 'md') - Font size
-- `weight`: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' (default: 'normal') - Font weight
-- `color`: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'muted' (default: 'default') - Text color
-- `align`: 'left' | 'center' | 'right' | 'justify' (default: 'left') - Text alignment
-- `transform`: 'none' | 'uppercase' | 'lowercase' | 'capitalize' (default: 'none') - Text transform
-- `decoration`: 'none' | 'underline' | 'line-through' | 'overline' (default: 'none') - Text decoration
-- `truncate`: boolean (default: false) - Truncate text with ellipsis
-- `className`: string (optional) - Additional CSS classes
-
-### Form Components
-
-A comprehensive form component system with all form elements.
-
-#### Form
-
-The main form container component.
-
-```tsx
-import { Form } from 'pure-react-ui';
-
-<Form layout="vertical" onSubmit={handleSubmit}>
-  {/* Form fields */}
-</Form>
-```
-
-**Props:**
-- `layout`: 'vertical' | 'horizontal' | 'inline' (default: 'vertical')
-- `size`: 'small' | 'medium' | 'large' (default: 'medium')
-- `onSubmit`: (e: React.FormEvent) => void (optional)
-- All standard form HTML attributes
-
-#### Input
-
-Text input field with validation and icons.
-
-```tsx
-import { Input } from 'pure-react-ui';
-
-<Input
-  label="Email"
-  type="email"
-  placeholder="Enter email"
-  error={errors.email}
-  helpText="We'll never share your email"
-  leftIcon={<Icon name="Mail" />}
-  fullWidth
-/>
-```
-
-**Props:**
-- `label`: string (optional)
-- `error`: string (optional) - Error message
-- `helpText`: string (optional) - Help text
-- `leftIcon`: React.ReactNode (optional)
-- `rightIcon`: React.ReactNode (optional)
-- `fullWidth`: boolean (default: false)
-- `size`: 'small' | 'medium' | 'large' (default: 'medium')
-- All standard input HTML attributes
-
-#### Textarea
-
-Multi-line text input.
-
-```tsx
-import { Textarea } from 'pure-react-ui';
-
-<Textarea
-  label="Message"
-  placeholder="Enter your message"
-  rows={4}
-  resize="vertical"
-  fullWidth
-/>
-```
-
-**Props:**
-- `label`: string (optional)
-- `error`: string (optional)
-- `helpText`: string (optional)
-- `fullWidth`: boolean (default: false)
-- `size`: 'small' | 'medium' | 'large' (default: 'medium')
-- `rows`: number (default: 4)
-- `resize`: 'none' | 'both' | 'horizontal' | 'vertical' (default: 'vertical')
-- All standard textarea HTML attributes
-
-#### Select
-
-Dropdown select component.
-
-```tsx
-import { Select } from 'pure-react-ui';
-
-<Select
-  label="Country"
-  options={[
-    { value: 'us', label: 'United States' },
-    { value: 'uk', label: 'United Kingdom' }
-  ]}
-  placeholder="Choose a country"
-  fullWidth
-/>
-```
-
-**Props:**
-- `label`: string (optional)
-- `error`: string (optional)
-- `helpText`: string (optional)
-- `options`: SelectOption[] (required)
-- `placeholder`: string (optional)
-- `fullWidth`: boolean (default: false)
-- `size`: 'small' | 'medium' | 'large' (default: 'medium')
-- All standard select HTML attributes
-
-#### Checkbox
-
-Checkbox input with custom styling.
-
-```tsx
-import { Checkbox } from 'pure-react-ui';
-
-<Checkbox
-  label="I agree to terms"
-  checked={checked}
-  onChange={(e) => setChecked(e.target.checked)}
-/>
-```
-
-**Props:**
-- `label`: string (optional)
-- `error`: string (optional)
-- `helpText`: string (optional)
-- `fullWidth`: boolean (default: false)
-- `size`: 'small' | 'medium' | 'large' (default: 'medium')
-- All standard checkbox HTML attributes
-
-#### Radio
-
-Radio button input.
-
-```tsx
-import { Radio } from 'pure-react-ui';
-
-<Radio
-  label="Option 1"
-  name="option"
-  value="1"
-  checked={selected === '1'}
-  onChange={(e) => setSelected(e.target.value)}
-/>
-```
-
-**Props:**
-- `label`: string (optional)
-- `error`: string (optional)
-- `helpText`: string (optional)
-- `fullWidth`: boolean (default: false)
-- `size`: 'small' | 'medium' | 'large' (default: 'medium')
-- All standard radio HTML attributes
-
-#### Switch
-
-Toggle switch component.
-
-```tsx
-import { Switch } from 'pure-react-ui';
-
-<Switch
-  label="Enable notifications"
-  checked={enabled}
-  onChange={(e) => setEnabled(e.target.checked)}
-/>
-```
-
-**Props:**
-- `label`: string (optional)
-- `error`: string (optional)
-- `helpText`: string (optional)
-- `fullWidth`: boolean (default: false)
-- `size`: 'small' | 'medium' | 'large' (default: 'medium')
-- All standard checkbox HTML attributes (used as switch)
-
-#### FormGroup
-
-Container for grouping form fields.
-
-```tsx
-import { FormGroup } from 'pure-react-ui';
-
-<FormGroup label="Personal Information" required>
-  <Input label="Name" />
-  <Input label="Email" />
-</FormGroup>
-```
-
-**Props:**
-- `label`: string (optional)
-- `error`: string (optional)
-- `helpText`: string (optional)
-- `required`: boolean (default: false)
-- `className`: string (optional)
-
-#### FormRow
-
-Horizontal row for form fields.
-
-```tsx
-import { FormRow } from 'pure-react-ui';
-
-<FormRow gap="medium">
-  <Input label="First Name" fullWidth />
-  <Input label="Last Name" fullWidth />
-</FormRow>
-```
-
-**Props:**
-- `gap`: 'small' | 'medium' | 'large' | number (default: 'medium')
-- `className`: string (optional)
-
-## Styling
-
-All components include their own CSS files and use CSS classes with the `pure-` prefix. The CSS files are automatically imported with each component. You can also style them by targeting these classes:
-
-- **Button**: `pure-button`, `pure-button--primary`, `pure-button--secondary`, etc.
-- **Card**: `pure-card`, `pure-card--hoverable`, `pure-card--shadow-medium`, etc.
-- **Modal**: `pure-modal`, `pure-modal__overlay`, `pure-modal__header`, etc.
-- **Icon**: `pure-icon`, `pure-icon--clickable`, `pure-icon--small`, etc.
-- **Space**: `pure-space`, `pure-space--horizontal`, `pure-space--vertical`, etc.
-- **Flex**: `pure-flex`, `pure-flex--row`, `pure-flex--column`, etc.
-- **Text**: `pure-text`, `pure-text--lg`, `pure-text--bold`, etc.
-- **Form**: `pure-form`, `pure-form--vertical`, `pure-form--horizontal`, etc.
-- **Input**: `pure-input`, `pure-input--error`, `pure-input--small`, etc.
-- **Textarea**: `pure-textarea`, `pure-textarea--error`, etc.
-- **Select**: `pure-select`, `pure-select--error`, etc.
-- **Checkbox**: `pure-checkbox`, `pure-checkbox--error`, etc.
-- **Radio**: `pure-radio`, `pure-radio--error`, etc.
-- **Switch**: `pure-switch`, `pure-switch--error`, etc.
-
-Each component has its own CSS file located in:
-- `lib/components/Button/Button.css`
-- `lib/components/Card/Card.css`
-- `lib/components/Modal/Modal.css`
-- `lib/components/Icon/Icon.css`
-- `lib/components/Space/Space.css`
-- `lib/components/Flex/Flex.css`
-- `lib/components/Text/Text.css`
-- `lib/components/Form/Form.css`
-
-## Examples
-
-A complete example application is available in the `example` directory. To run it:
-
-```bash
-# From the root directory, build the package first
-npm run build
-
-# Then navigate to example directory
-cd example
-npm install
-npm run dev
-```
-
-Or check out `EXAMPLES.md` for code examples and usage patterns.
-
-## License
-
-MIT
-
+# Pure React UI
+
+A pure React UI component library built with TypeScript. No external dependencies required (except React and ReactDOM as peer dependencies).
+
+## Installation
+
+```bash
+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
+
+A versatile button component with multiple variants and sizes.
+
+```tsx
+import { Button } from 'pure-react-ui';
+
+<Button variant="primary" size="medium" onClick={handleClick}>
+  Click Me
+</Button>
+```
+
+**Props:**
+- `variant`: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' (default: 'primary')
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- `fullWidth`: boolean (default: false)
+- `loading`: boolean (default: false)
+- All standard button HTML attributes
+
+### Card
+
+A flexible card component for displaying content.
+
+```tsx
+import { Card } from 'pure-react-ui';
+
+<Card
+  title="Card Title"
+  subtitle="Card Subtitle"
+  image="/path/to/image.jpg"
+  hoverable
+  shadow="medium"
+>
+  Card content goes here
+</Card>
+```
+
+**Props:**
+- `title`: string (optional)
+- `subtitle`: string (optional)
+- `image`: string (optional)
+- `imageAlt`: string (optional)
+- `footer`: React.ReactNode (optional)
+- `hoverable`: boolean (default: false)
+- `shadow`: 'none' | 'small' | 'medium' | 'large' (default: 'medium')
+- `onClick`: () => void (optional)
+
+### Modal
+
+A modal dialog component with overlay and keyboard support.
+
+```tsx
+import { Modal } from 'pure-react-ui';
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  title="Modal Title"
+  size="medium"
+>
+  Modal content goes here
+</Modal>
+```
+
+**Props:**
+- `isOpen`: boolean (required)
+- `onClose`: () => void (required)
+- `title`: string | React.ReactNode (optional) - Modal title or custom header content
+- `size`: 'small' | 'medium' | 'large' | 'fullscreen' (default: 'medium')
+- `position`: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' (default: 'center')
+- `variant`: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'gradient-primary' | 'gradient-success' | 'gradient-danger' | 'gradient-info' (default: 'default')
+- `closeOnOverlayClick`: boolean (default: true)
+- `closeOnEscape`: boolean (default: true)
+- `showCloseButton`: boolean (default: true)
+- `scrollable`: boolean (default: true) - Enable scrolling for modal body
+- `topMargin`: number | string (optional) - Custom top margin for modal
+- `className`: string (optional) - Additional CSS classes
+- `overlayClassName`: string (optional) - Additional CSS classes for overlay
+- `headerClassName`: string (optional) - Additional CSS classes for header
+- `bodyClassName`: string (optional) - Additional CSS classes for body
+
+### Icon
+
+A comprehensive icon component library with 100+ SVG icons.
+
+```tsx
+import { Icon } from 'pure-react-ui';
+
+<Icon name="Home" size={24} color="#007bff" />
+<Icon name="Search" size={32} onClick={handleClick} />
+```
+
+**Props:**
+- `name`: IconName (required) - Name of the icon to display
+- `size`: number | string (default: 24) - Size of the icon
+- `color`: string (default: 'currentColor') - Color of the icon
+- `className`: string (optional) - Additional CSS classes
+- `onClick`: () => void (optional) - Click handler (makes icon clickable)
+
+**Available Icons:**
+
+**Arrows & Navigation:**
+ArrowLeft, ArrowRight, ArrowUp, ArrowDown, ArrowUpRight, ArrowDownRight, ChevronLeft, ChevronRight, ChevronUp, ChevronDown, DoubleChevronLeft, DoubleChevronRight, Home, Menu, Close, Search, Filter
+
+**Actions:**
+Plus, Minus, Check, X, Edit, Trash, Save, Download, Upload, Copy, Share
+
+**Media:**
+Play, Pause, Stop, VolumeUp, VolumeDown, VolumeOff, Image, Video, Camera
+
+**Communication:**
+Mail, Message, Phone, Bell, Notification
+
+**Files:**
+File, Folder, FolderOpen, FileText, FilePdf
+
+**User:**
+User, Users, UserPlus, UserMinus, Settings, Logout
+
+**Status:**
+CheckCircle, XCircle, AlertCircle, Info, Warning, Star, Heart, Bookmark
+
+**Social:**
+Facebook, Twitter, Instagram, Linkedin, Github, Youtube
+
+**Technology:**
+Wifi, Bluetooth, Battery, Zap, Lock, Unlock, Shield
+
+**Shopping:**
+ShoppingCart, ShoppingBag, CreditCard, Gift
+
+**Time:**
+Clock, Calendar, Timer
+
+**Location:**
+MapPin, Globe, Navigation
+
+**Weather:**
+Sun, Moon, Cloud
+
+**Utility:**
+Eye, EyeOff, Refresh, MoreVertical, MoreHorizontal, Grid, List
+
+You can also import individual icons directly:
+```tsx
+import { Home, Search, User } from 'pure-react-ui';
+
+<Home size={24} color="#007bff" />
+```
+
+### Space
+
+A layout component for adding consistent spacing between elements.
+
+```tsx
+import { Space } from 'pure-react-ui';
+
+<Space size="medium" direction="horizontal">
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+  <Button>Button 3</Button>
+</Space>
+
+<Space size={20} direction="vertical" align="start">
+  <Card>Card 1</Card>
+  <Card>Card 2</Card>
+</Space>
+```
+
+**Props:**
+- `size`: 'small' | 'medium' | 'large' | number (default: 'medium') - Spacing size between items
+- `direction`: 'horizontal' | 'vertical' (default: 'horizontal') - Direction of spacing
+- `align`: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'center') - Alignment of items
+- `wrap`: boolean (default: false) - Whether items should wrap to next line
+- `className`: string (optional) - Additional CSS classes
+
+### Flex
+
+A flexible container component based on CSS Flexbox.
+
+```tsx
+import { Flex } from 'pure-react-ui';
+
+<Flex direction="row" justify="between" align="center" gap="medium">
+  <Button>Left</Button>
+  <Button>Center</Button>
+  <Button>Right</Button>
+</Flex>
+
+<Flex direction="column" justify="start" align="stretch" gap={16}>
+  <Card>Card 1</Card>
+  <Card>Card 2</Card>
+</Flex>
+```
+
+**Props:**
+- `direction`: 'row' | 'column' | 'row-reverse' | 'column-reverse' (default: 'row') - Flex direction
+- `justify`: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly' (default: 'start') - Justify content
+- `align`: 'start' | 'end' | 'center' | 'baseline' | 'stretch' (default: 'start') - Align items
+- `wrap`: boolean | 'wrap' | 'nowrap' | 'wrap-reverse' (default: false) - Flex wrap behavior
+- `gap`: 'none' | 'small' | 'medium' | 'large' | number (default: 'none') - Gap between items
+- `className`: string (optional) - Additional CSS classes
+- `style`: React.CSSProperties (optional) - Additional inline styles
+
+### Text
+
+A typography component for consistent text styling with various options.
+
+```tsx
+import { Text } from 'pure-react-ui';
+
+<Text as="h1" size="2xl" weight="bold" color="primary">
+  Heading Text
+</Text>
+
+<Text size="lg" color="muted" align="center">
+  Centered paragraph text
+</Text>
+
+<Text as="span" size="sm" decoration="underline" transform="uppercase">
+  Styled Text
+</Text>
+```
+
+**Props:**
+- `as`: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'small' | 'strong' | 'em' | 'code' | 'pre' (default: 'p') - HTML element to render
+- `size`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' (default: 'md') - Font size
+- `weight`: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' (default: 'normal') - Font weight
+- `color`: 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'muted' (default: 'default') - Text color
+- `align`: 'left' | 'center' | 'right' | 'justify' (default: 'left') - Text alignment
+- `transform`: 'none' | 'uppercase' | 'lowercase' | 'capitalize' (default: 'none') - Text transform
+- `decoration`: 'none' | 'underline' | 'line-through' | 'overline' (default: 'none') - Text decoration
+- `truncate`: boolean (default: false) - Truncate text with ellipsis
+- `className`: string (optional) - Additional CSS classes
+
+### Form Components
+
+A comprehensive form component system with all form elements.
+
+#### Form
+
+The main form container component.
+
+```tsx
+import { Form } from 'pure-react-ui';
+
+<Form layout="vertical" onSubmit={handleSubmit}>
+  {/* Form fields */}
+</Form>
+```
+
+**Props:**
+- `layout`: 'vertical' | 'horizontal' | 'inline' (default: 'vertical')
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- `onSubmit`: (e: React.FormEvent) => void (optional)
+- All standard form HTML attributes
+
+#### Input
+
+Text input field with validation and icons.
+
+```tsx
+import { Input } from 'pure-react-ui';
+
+<Input
+  label="Email"
+  type="email"
+  placeholder="Enter email"
+  error={errors.email}
+  helpText="We'll never share your email"
+  leftIcon={<Icon name="Mail" />}
+  fullWidth
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional) - Error message
+- `helpText`: string (optional) - Help text
+- `leftIcon`: React.ReactNode (optional)
+- `rightIcon`: React.ReactNode (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- All standard input HTML attributes
+
+#### Textarea
+
+Multi-line text input.
+
+```tsx
+import { Textarea } from 'pure-react-ui';
+
+<Textarea
+  label="Message"
+  placeholder="Enter your message"
+  rows={4}
+  resize="vertical"
+  fullWidth
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- `rows`: number (default: 4)
+- `resize`: 'none' | 'both' | 'horizontal' | 'vertical' (default: 'vertical')
+- All standard textarea HTML attributes
+
+#### Select
+
+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={[
+    { value: 'us', label: 'United States' },
+    { value: 'uk', label: 'United Kingdom' }
+  ]}
+  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) - 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')
+- `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
+
+Checkbox input with custom styling.
+
+```tsx
+import { Checkbox } from 'pure-react-ui';
+
+<Checkbox
+  label="I agree to terms"
+  checked={checked}
+  onChange={(e) => setChecked(e.target.checked)}
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- All standard checkbox HTML attributes
+
+#### Radio
+
+Radio button input.
+
+```tsx
+import { Radio } from 'pure-react-ui';
+
+<Radio
+  label="Option 1"
+  name="option"
+  value="1"
+  checked={selected === '1'}
+  onChange={(e) => setSelected(e.target.value)}
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- All standard radio HTML attributes
+
+#### Switch
+
+Toggle switch component.
+
+```tsx
+import { Switch } from 'pure-react-ui';
+
+<Switch
+  label="Enable notifications"
+  checked={enabled}
+  onChange={(e) => setEnabled(e.target.checked)}
+/>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `fullWidth`: boolean (default: false)
+- `size`: 'small' | 'medium' | 'large' (default: 'medium')
+- All standard checkbox HTML attributes (used as switch)
+
+#### FormGroup
+
+Container for grouping form fields.
+
+```tsx
+import { FormGroup } from 'pure-react-ui';
+
+<FormGroup label="Personal Information" required>
+  <Input label="Name" />
+  <Input label="Email" />
+</FormGroup>
+```
+
+**Props:**
+- `label`: string (optional)
+- `error`: string (optional)
+- `helpText`: string (optional)
+- `required`: boolean (default: false)
+- `className`: string (optional)
+
+#### FormRow
+
+Horizontal row for form fields.
+
+```tsx
+import { FormRow } from 'pure-react-ui';
+
+<FormRow gap="medium">
+  <Input label="First Name" fullWidth />
+  <Input label="Last Name" fullWidth />
+</FormRow>
+```
+
+**Props:**
+- `gap`: 'small' | 'medium' | 'large' | number (default: 'medium')
+- `className`: string (optional)
+
+## Styling
+
+All components include their own CSS files and use CSS classes with the `pure-` prefix. The CSS files are automatically imported with each component. You can also style them by targeting these classes:
+
+- **Button**: `pure-button`, `pure-button--primary`, `pure-button--secondary`, etc.
+- **Card**: `pure-card`, `pure-card--hoverable`, `pure-card--shadow-medium`, etc.
+- **Modal**: `pure-modal`, `pure-modal__overlay`, `pure-modal__header`, etc.
+- **Icon**: `pure-icon`, `pure-icon--clickable`, `pure-icon--small`, etc.
+- **Space**: `pure-space`, `pure-space--horizontal`, `pure-space--vertical`, etc.
+- **Flex**: `pure-flex`, `pure-flex--row`, `pure-flex--column`, etc.
+- **Text**: `pure-text`, `pure-text--lg`, `pure-text--bold`, etc.
+- **Form**: `pure-form`, `pure-form--vertical`, `pure-form--horizontal`, etc.
+- **Input**: `pure-input`, `pure-input--error`, `pure-input--small`, etc.
+- **Textarea**: `pure-textarea`, `pure-textarea--error`, etc.
+- **Select**: `pure-select`, `pure-select--error`, etc.
+- **Checkbox**: `pure-checkbox`, `pure-checkbox--error`, etc.
+- **Radio**: `pure-radio`, `pure-radio--error`, etc.
+- **Switch**: `pure-switch`, `pure-switch--error`, etc.
+
+Each component has its own CSS file located in:
+- `lib/components/Button/Button.css`
+- `lib/components/Card/Card.css`
+- `lib/components/Modal/Modal.css`
+- `lib/components/Icon/Icon.css`
+- `lib/components/Space/Space.css`
+- `lib/components/Flex/Flex.css`
+- `lib/components/Text/Text.css`
+- `lib/components/Form/Form.css`
+
+## Examples
+
+A complete example application is available in the `example` directory. To run it:
+
+```bash
+# From the root directory, build the package first
+npm run build
+
+# Then navigate to example directory
+cd example
+npm install
+npm run dev
+```
+
+Or check out `EXAMPLES.md` for code examples and usage patterns.
+
+## License
+
+MIT
+