@delightui/components 0.1.104 → 0.1.106

package/docs/components/molecules/RepeaterList.md

@@ -0,0 +1,185 @@
+# RepeaterList
+
+## Description
+
+A simple list rendering component that iterates over an array of data and renders each item using a specified component. It provides a minimal, lightweight approach to rendering collections without additional layout or styling, making it perfect for simple repetitive content rendering.
+
+## Aliases
+
+- RepeaterList
+- ItemRepeater
+- DataRepeater
+- ComponentRepeater
+
+## Props Breakdown
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `data` | `T[]` | - | Yes | Array of data items to render |
+| `component` | `React.ComponentType<T>` | - | Yes | Component to render for each data item |
+
+## Examples
+
+### Basic Usage
+```tsx
+import { RepeaterList } from '@delightui/components';
+
+const ListItem = ({ name, email }) => (
+  <div className="user-item">
+    <span>{name}</span>
+    <span>{email}</span>
+  </div>
+);
+
+function BasicRepeaterExample() {
+  const users = [
+    { name: 'John Doe', email: 'john@example.com' },
+    { name: 'Jane Smith', email: 'jane@example.com' },
+    { name: 'Bob Johnson', email: 'bob@example.com' },
+  ];
+
+  return (
+    <div className="user-list">
+      <RepeaterList data={users} component={ListItem} />
+    </div>
+  );
+}
+```
+
+### Simple Text List
+```tsx
+function SimpleTextExample() {
+  const items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
+  
+  const TextItem = ({ children }) => (
+    <li className="fruit-item">{children}</li>
+  );
+
+  // Transform strings to objects for the component
+  const data = items.map(item => ({ children: item }));
+
+  return (
+    <ul className="fruit-list">
+      <RepeaterList data={data} component={TextItem} />
+    </ul>
+  );
+}
+```
+
+### Card Repeater
+```tsx
+import { Card, Text, Button } from '@delightui/components';
+
+function CardRepeaterExample() {
+  const products = [
+    { id: 1, name: 'Laptop', price: 999, description: 'High-performance laptop' },
+    { id: 2, name: 'Phone', price: 699, description: 'Latest smartphone' },
+    { id: 3, name: 'Tablet', price: 399, description: 'Portable tablet device' },
+  ];
+
+  const ProductCard = ({ name, price, description, onAddToCart }) => (
+    <Card className="product-card">
+      <Text type="Heading" size="Medium">{name}</Text>
+      <Text type="Body" color="Secondary">{description}</Text>
+      <Text type="Heading" size="Small">${price}</Text>
+      <Button onClick={() => onAddToCart(id)}>Add to Cart</Button>
+    </Card>
+  );
+
+  const handleAddToCart = (productId) => {
+    console.log('Added to cart:', productId);
+  };
+
+  return (
+    <div className="product-grid">
+      <RepeaterList 
+        data={products.map(product => ({ 
+          ...product, 
+          onAddToCart: handleAddToCart 
+        }))} 
+        component={ProductCard} 
+      />
+    </div>
+  );
+}
+```
+
+### Navigation Menu
+```tsx
+function NavigationExample() {
+  const menuItems = [
+    { label: 'Home', href: '/', icon: 'Home' },
+    { label: 'Products', href: '/products', icon: 'ShoppingBag' },
+    { label: 'About', href: '/about', icon: 'Info' },
+    { label: 'Contact', href: '/contact', icon: 'Mail' },
+  ];
+
+  const MenuItem = ({ label, href, icon }) => (
+    <a href={href} className="menu-item">
+      <Icon icon={icon} size="Small" />
+      <span>{label}</span>
+    </a>
+  );
+
+  return (
+    <nav className="navigation">
+      <RepeaterList data={menuItems} component={MenuItem} />
+    </nav>
+  );
+}
+```
+
+### Status List
+```tsx
+function StatusListExample() {
+  const statuses = [
+    { id: 1, message: 'System is running normally', type: 'success', timestamp: '2024-01-15 10:30:00' },
+    { id: 2, message: 'Minor delay in processing', type: 'warning', timestamp: '2024-01-15 10:25:00' },
+    { id: 3, message: 'Maintenance completed', type: 'info', timestamp: '2024-01-15 10:20:00' },
+  ];
+
+  const StatusItem = ({ message, type, timestamp }) => (
+    <div className={`status-item status-${type}`}>
+      <div className="status-message">{message}</div>
+      <div className="status-timestamp">{timestamp}</div>
+    </div>
+  );
+
+  return (
+    <div className="status-feed">
+      <RepeaterList data={statuses} component={StatusItem} />
+    </div>
+  );
+}
+```
+
+### Comment Thread
+```tsx
+function CommentThreadExample() {
+  const comments = [
+    { id: 1, author: 'Alice', content: 'Great post!', likes: 5, timestamp: '2 hours ago' },
+    { id: 2, author: 'Bob', content: 'Thanks for sharing this.', likes: 2, timestamp: '1 hour ago' },
+    { id: 3, author: 'Charlie', content: 'Very informative.', likes: 8, timestamp: '30 minutes ago' },
+  ];
+
+  const CommentItem = ({ author, content, likes, timestamp }) => (
+    <div className="comment">
+      <div className="comment-header">
+        <strong>{author}</strong>
+        <span className="comment-time">{timestamp}</span>
+      </div>
+      <div className="comment-content">{content}</div>
+      <div className="comment-actions">
+        <button className="like-button">👍 {likes}</button>
+        <button className="reply-button">Reply</button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="comment-thread">
+      <RepeaterList data={comments} component={CommentItem} />
+    </div>
+  );
+}
+```

package/docs/components/molecules/Select.md

@@ -0,0 +1,402 @@
+# Select
+
+## Description
+
+A dropdown selection component that allows users to choose from a list of options. Supports single and multiple selections, custom icons, placeholder text, and integrates seamlessly with form validation. Built with accessibility and keyboard navigation in mind.
+
+## Aliases
+
+- Select
+- Dropdown
+- ComboBox
+- Picker
+- OptionList
+
+## Props Breakdown
+
+**Extends:** `HTMLAttributes<HTMLElement>` (excluding `style`, `children`, `onClick`) + `ControlledFormComponentProps<FieldValue>`
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactElement<OptionProps> \| ReactElement<OptionProps>[]` | - | Yes | Options to render in the dropdown |
+| `placeholder` | `string` | - | No | Placeholder text when no option is selected |
+| `leadingIcon` | `ReactNode` | - | No | Icon displayed before the select input |
+| `expandIcon` | `ReactNode` | - | No | Custom expand/collapse icon |
+| `selectedView` | `React.FC<any>` | - | No | Component to render selected items |
+| `popoverOffset` | `[number, number]` | - | No | Offset for the dropdown popover position |
+| `menuProps` | `ContentProps` | - | No | Additional props for the dropdown menu |
+| `multiple` | `boolean` | `false` | No | Whether multiple selection is allowed |
+| `hasDefaultOption` | `boolean` | `false` | No | Whether to include a default empty option |
+| `defaultOpen` | `boolean` | `false` | No | Whether the dropdown is open by default |
+| `open` | `boolean` | `false` | No | Controls the open state in controlled mode |
+| `state` | `'Default' \| 'Error'` | `'Default'` | No | Visual state of the select component |
+
+Plus all `ControlledFormComponentProps` (initialValue, value, onValueChange, disabled, required, invalid, id).
+
+## Examples
+
+### Basic Usage
+```tsx
+import { Select, Option } from '@delightui/components';
+
+function BasicExample() {
+  return (
+    <Select placeholder="Choose an option">
+      <Option value="option1">Option 1</Option>
+      <Option value="option2">Option 2</Option>
+      <Option value="option3">Option 3</Option>
+    </Select>
+  );
+}
+```
+
+### Controlled Select
+```tsx
+function ControlledExample() {
+  const [selectedValue, setSelectedValue] = useState('');
+
+  return (
+    <Select 
+      value={selectedValue}
+      onValueChange={setSelectedValue}
+      placeholder="Select a country"
+    >
+      <Option value="us">United States</Option>
+      <Option value="uk">United Kingdom</Option>
+      <Option value="ca">Canada</Option>
+      <Option value="au">Australia</Option>
+    </Select>
+  );
+}
+```
+
+### Multiple Selection
+```tsx
+function MultipleSelectionExample() {
+  const [selectedValues, setSelectedValues] = useState([]);
+
+  return (
+    <Select 
+      multiple
+      value={selectedValues}
+      onValueChange={setSelectedValues}
+      placeholder="Select multiple options"
+    >
+      <Option value="red">Red</Option>
+      <Option value="green">Green</Option>
+      <Option value="blue">Blue</Option>
+      <Option value="yellow">Yellow</Option>
+      <Option value="purple">Purple</Option>
+    </Select>
+  );
+}
+```
+
+### Select with Icons
+```tsx
+function IconSelectExample() {
+  return (
+    <div className="icon-selects">
+      <Select 
+        leadingIcon={<Icon icon="Location" />}
+        placeholder="Select location"
+      >
+        <Option value="ny">New York</Option>
+        <Option value="la">Los Angeles</Option>
+        <Option value="sf">San Francisco</Option>
+      </Select>
+      
+      <Select 
+        leadingIcon={<Icon icon="Person" />}
+        expandIcon={<Icon icon="ExpandMore" />}
+        placeholder="Select user"
+      >
+        <Option value="john">John Doe</Option>
+        <Option value="jane">Jane Smith</Option>
+        <Option value="bob">Bob Johnson</Option>
+      </Select>
+    </div>
+  );
+}
+```
+
+### Form Integration
+```tsx
+function FormSelectExample() {
+  const handleSubmit = (values, setError) => {
+    if (!values.category) {
+      setError('category', 'Please select a category');
+      return;
+    }
+    console.log('Form submitted:', values);
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <FormField name="title" label="Title" required>
+        <Input placeholder="Enter title" />
+      </FormField>
+      
+      <FormField name="category" label="Category" required>
+        <Select placeholder="Choose a category">
+          <Option value="tech">Technology</Option>
+          <Option value="business">Business</Option>
+          <Option value="design">Design</Option>
+          <Option value="marketing">Marketing</Option>
+        </Select>
+      </FormField>
+      
+      <FormField name="tags" label="Tags">
+        <Select multiple placeholder="Select tags">
+          <Option value="urgent">Urgent</Option>
+          <Option value="important">Important</Option>
+          <Option value="draft">Draft</Option>
+          <Option value="review">Needs Review</Option>
+        </Select>
+      </FormField>
+      
+      <Button actionType="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+### Select with Validation
+```tsx
+function ValidationSelectExample() {
+  const [selected, setSelected] = useState('');
+  const [error, setError] = useState('');
+
+  const handleChange = (value) => {
+    setSelected(value);
+    if (value) {
+      setError('');
+    }
+  };
+
+  const validateSelection = () => {
+    if (!selected) {
+      setError('Please make a selection');
+      return false;
+    }
+    return true;
+  };
+
+  return (
+    <div className="validation-select">
+      <Select 
+        value={selected}
+        onValueChange={handleChange}
+        placeholder="Select an option"
+        state={error ? 'Error' : 'Default'}
+      >
+        <Option value="option1">Option 1</Option>
+        <Option value="option2">Option 2</Option>
+        <Option value="option3">Option 3</Option>
+      </Select>
+      
+      {error && (
+        <Text type="BodySmall" className="error-message">
+          {error}
+        </Text>
+      )}
+      
+      <Button onClick={validateSelection}>
+        Validate Selection
+      </Button>
+    </div>
+  );
+}
+```
+
+### Disabled Select
+```tsx
+function DisabledSelectExample() {
+  return (
+    <div className="disabled-selects">
+      <Select disabled placeholder="Disabled select">
+        <Option value="option1">Option 1</Option>
+        <Option value="option2">Option 2</Option>
+      </Select>
+      
+      <Select 
+        disabled 
+        value="option1"
+        placeholder="Disabled with value"
+      >
+        <Option value="option1">Selected Option</Option>
+        <Option value="option2">Option 2</Option>
+      </Select>
+    </div>
+  );
+}
+```
+
+### Select with Groups
+```tsx
+function GroupedSelectExample() {
+  return (
+    <Select placeholder="Select a framework">
+      {/* Frontend Options */}
+      <Option disabled>Frontend</Option>
+      <Option value="react">React</Option>
+      <Option value="vue">Vue.js</Option>
+      <Option value="angular">Angular</Option>
+      
+      {/* Backend Options */}
+      <Option disabled>Backend</Option>
+      <Option value="node">Node.js</Option>
+      <Option value="python">Python</Option>
+      <Option value="ruby">Ruby</Option>
+      
+      {/* Database Options */}
+      <Option disabled>Database</Option>
+      <Option value="mongodb">MongoDB</Option>
+      <Option value="postgresql">PostgreSQL</Option>
+      <Option value="mysql">MySQL</Option>
+    </Select>
+  );
+}
+```
+
+### Searchable Select
+```tsx
+function SearchableSelectExample() {
+  const [searchTerm, setSearchTerm] = useState('');
+  const options = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' }
+  ];
+
+  const filteredOptions = options.filter(option =>
+    option.label.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const OptionComponent = ({ value, label }) => (
+    <Option value={value}>
+      {label}
+    </Option>
+  );
+
+  return (
+    <div className="searchable-select">
+      <Input 
+        placeholder="Search options..."
+        value={searchTerm}
+        onValueChange={setSearchTerm}
+        leadingIcon={<Icon icon="Search" />}
+      />
+      
+      <Select placeholder="Select a fruit">
+        <List
+          data={filteredOptions}
+          component={OptionComponent}
+          keyExtractor={(option) => option.value}
+        />
+      </Select>
+    </div>
+  );
+}
+```
+
+### Custom Selected View
+```tsx
+function CustomSelectedViewExample() {
+  const CustomSelectedView = ({ selectedItems }) => {
+    const ChipComponent = ({ value, label }) => (
+      <Chip size="Small">
+        {label}
+      </Chip>
+    );
+
+    return (
+      <div className="custom-selected">
+        {selectedItems.length > 0 ? (
+          <div className="selected-items">
+            <List
+              data={selectedItems.slice(0, 2)}
+              component={ChipComponent}
+              keyExtractor={(item) => item.value}
+            />
+            {selectedItems.length > 2 && (
+              <Text type="BodySmall">
+                +{selectedItems.length - 2} more
+              </Text>
+            )}
+          </div>
+        ) : (
+          <Text type="BodyMedium" className="placeholder">
+            Select items...
+          </Text>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Select 
+      multiple
+      selectedView={CustomSelectedView}
+      placeholder="Select multiple items"
+    >
+      <Option value="item1">Item 1</Option>
+      <Option value="item2">Item 2</Option>
+      <Option value="item3">Item 3</Option>
+      <Option value="item4">Item 4</Option>
+      <Option value="item5">Item 5</Option>
+    </Select>
+  );
+}
+```
+
+### Dynamic Options
+```tsx
+function DynamicOptionsExample() {
+  const [category, setCategory] = useState('');
+  const [subcategory, setSubcategory] = useState('');
+
+  const subcategories = {
+    tech: ['Frontend', 'Backend', 'Mobile', 'DevOps'],
+    business: ['Marketing', 'Sales', 'Operations', 'Strategy'],
+    design: ['UI/UX', 'Graphic', 'Product', 'Branding']
+  };
+
+  return (
+    <div className="dynamic-selects">
+      <Select 
+        value={category}
+        onValueChange={(value) => {
+          setCategory(value);
+          setSubcategory(''); // Reset subcategory when category changes
+        }}
+        placeholder="Select category"
+      >
+        <Option value="tech">Technology</Option>
+        <Option value="business">Business</Option>
+        <Option value="design">Design</Option>
+      </Select>
+      
+      {category && (
+        <Select 
+          value={subcategory}
+          onValueChange={setSubcategory}
+          placeholder="Select subcategory"
+        >
+          <List
+            data={subcategories[category].map(sub => ({ label: sub, value: sub.toLowerCase() }))}
+            component={({ label, value }) => (
+              <Option value={value}>
+                {label}
+              </Option>
+            )}
+            keyExtractor={(item) => item.value}
+          />
+        </Select>
+      )}
+    </div>
+  );
+}
+```

package/docs/components/molecules/SortableTrigger.md

@@ -0,0 +1,82 @@
+# SortableTrigger
+
+## Description
+
+A trigger component that initiates drag-and-drop functionality for sortable list items. It provides a dedicated draggable handle with proper visual feedback and accessibility features, allowing users to easily identify and interact with sortable elements.
+
+## Aliases
+
+- SortableTrigger
+- DragHandle
+- DragTrigger
+- SortHandle
+
+## Props Breakdown
+
+**Extends:** Standard HTML button attributes
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | - | No | Content to display within the trigger (usually an icon) |
+| `className` | `string` | - | No | Additional CSS class names |
+| `disabled` | `boolean` | `false` | No | Whether the drag trigger is disabled |
+| `onDragStart` | `(event: DragEvent) => void` | - | No | Callback fired when drag starts |
+
+## Examples
+
+### Basic Drag Handle
+```tsx
+import { SortableTrigger, Icon } from '@delightui/components';
+
+function BasicTriggerExample() {
+  return (
+    <div className="sortable-item">
+      <SortableTrigger>
+        <Icon icon="DragHandle" size="Small" />
+      </SortableTrigger>
+      <span>Draggable content</span>
+    </div>
+  );
+}
+```
+
+### Custom Styled Trigger
+```tsx
+function CustomStyledTriggerExample() {
+  return (
+    <div className="task-item">
+      <SortableTrigger className="custom-drag-handle">
+        ⋮⋮
+      </SortableTrigger>
+      
+      <div className="task-content">
+        <h4>Task Title</h4>
+        <p>Task description</p>
+      </div>
+    </div>
+  );
+}
+```
+
+### Conditional Trigger
+```tsx
+function ConditionalTriggerExample() {
+  const [canReorder, setCanReorder] = useState(true);
+
+  return (
+    <div className="item-with-conditional-trigger">
+      <SortableTrigger disabled={!canReorder}>
+        <Icon icon="DragHandle" size="Small" />
+      </SortableTrigger>
+      
+      <div className="item-content">
+        Content that can be reordered
+      </div>
+      
+      <button onClick={() => setCanReorder(!canReorder)}>
+        {canReorder ? 'Disable' : 'Enable'} Reordering
+      </button>
+    </div>
+  );
+}
+```