@delightui/components 0.1.105 → 0.1.107

package/docs/components/molecules/ButtonGroup.md

@@ -0,0 +1,383 @@
+# ButtonGroup
+
+## Description
+
+A container component that groups related buttons together with consistent spacing and styling. Supports horizontal and vertical layouts with different visual treatments to create cohesive button collections for actions, navigation, and selection interfaces.
+
+## Aliases
+
+- ButtonGroup
+- ActionGroup
+- ButtonSet
+- ToolbarGroup
+- ButtonCluster
+
+## Props Breakdown
+
+**Extends:** Standalone interface (no HTML element inheritance)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode \| ReactNode[]` | - | Yes | Button components to group together |
+| `align` | `'Horizontal' \| 'Vertical'` | `'Horizontal'` | No | Layout direction for the button group |
+| `type` | `'Outlined' \| 'Ghost'` | `'Filled'` | No | Visual style variant for the group |
+| `className` | `string` | - | No | Additional CSS class names |
+
+## Examples
+
+### Basic Usage
+```tsx
+import { ButtonGroup, Button } from '@delightui/components';
+
+function BasicExample() {
+  return (
+    <ButtonGroup>
+      <Button>First</Button>
+      <Button>Second</Button>
+      <Button>Third</Button>
+    </ButtonGroup>
+  );
+}
+```
+
+### Horizontal vs Vertical Layout
+```tsx
+function LayoutExample() {
+  return (
+    <div className="layout-examples">
+      <div className="horizontal-group">
+        <Text type="Heading6">Horizontal Group</Text>
+        <ButtonGroup align="Horizontal">
+          <Button>Save</Button>
+          <Button type="Outlined">Cancel</Button>
+          <Button style="Destructive">Delete</Button>
+        </ButtonGroup>
+      </div>
+      
+      <div className="vertical-group">
+        <Text type="Heading6">Vertical Group</Text>
+        <ButtonGroup align="Vertical">
+          <Button>Edit Profile</Button>
+          <Button>Change Password</Button>
+          <Button>Privacy Settings</Button>
+          <Button style="Destructive">Delete Account</Button>
+        </ButtonGroup>
+      </div>
+    </div>
+  );
+}
+```
+
+### Button Group Types
+```tsx
+function TypesExample() {
+  return (
+    <div className="button-group-types">
+      <ButtonGroup type="Outlined">
+        <Button>Option A</Button>
+        <Button>Option B</Button>
+        <Button>Option C</Button>
+      </ButtonGroup>
+      
+      <ButtonGroup type="Ghost">
+        <Button>Home</Button>
+        <Button>About</Button>
+        <Button>Contact</Button>
+      </ButtonGroup>
+    </div>
+  );
+}
+```
+
+### Action Groups
+```tsx
+function ActionGroupExample() {
+  const [selectedAction, setSelectedAction] = useState('edit');
+
+  return (
+    <div className="action-groups">
+      <ButtonGroup>
+        <Button 
+          type={selectedAction === 'edit' ? 'Filled' : 'Outlined'}
+          onClick={() => setSelectedAction('edit')}
+          leadingIcon={<Icon icon="Edit" />}
+        >
+          Edit
+        </Button>
+        <Button 
+          type={selectedAction === 'copy' ? 'Filled' : 'Outlined'}
+          onClick={() => setSelectedAction('copy')}
+          leadingIcon={<Icon icon="Copy" />}
+        >
+          Copy
+        </Button>
+        <Button 
+          type={selectedAction === 'delete' ? 'Filled' : 'Outlined'}
+          onClick={() => setSelectedAction('delete')}
+          leadingIcon={<Icon icon="Delete" />}
+          style="Destructive"
+        >
+          Delete
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+}
+```
+
+### Navigation Group
+```tsx
+function NavigationGroupExample() {
+  const [currentPage, setCurrentPage] = useState('dashboard');
+
+  const navItems = [
+    { id: 'dashboard', label: 'Dashboard', icon: 'Dashboard' },
+    { id: 'projects', label: 'Projects', icon: 'Folder' },
+    { id: 'team', label: 'Team', icon: 'People' },
+    { id: 'settings', label: 'Settings', icon: 'Settings' }
+  ];
+
+  return (
+    <ButtonGroup align="Vertical" type="Ghost">
+      <List
+        data={navItems}
+        component={({ id, label, icon }) => (
+          <Button 
+            type={currentPage === id ? 'Filled' : 'Ghost'}
+            onClick={() => setCurrentPage(id)}
+            leadingIcon={<Icon icon={icon} />}
+          >
+            {label}
+          </Button>
+        )}
+        keyExtractor={(item) => item.id}
+      />
+    </ButtonGroup>
+  );
+}
+```
+
+### Toggle Group
+```tsx
+function ToggleGroupExample() {
+  const [selectedOptions, setSelectedOptions] = useState(['bold']);
+
+  const toggleOption = (option) => {
+    setSelectedOptions(prev => 
+      prev.includes(option)
+        ? prev.filter(o => o !== option)
+        : [...prev, option]
+    );
+  };
+
+  return (
+    <div className="toggle-groups">
+      <Text type="Heading6">Text Formatting</Text>
+      <ButtonGroup type="Outlined">
+        <Button 
+          type={selectedOptions.includes('bold') ? 'Filled' : 'Outlined'}
+          onClick={() => toggleOption('bold')}
+          leadingIcon={<Icon icon="FormatBold" />}
+        >
+          Bold
+        </Button>
+        <Button 
+          type={selectedOptions.includes('italic') ? 'Filled' : 'Outlined'}
+          onClick={() => toggleOption('italic')}
+          leadingIcon={<Icon icon="FormatItalic" />}
+        >
+          Italic
+        </Button>
+        <Button 
+          type={selectedOptions.includes('underline') ? 'Filled' : 'Outlined'}
+          onClick={() => toggleOption('underline')}
+          leadingIcon={<Icon icon="FormatUnderline" />}
+        >
+          Underline
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+}
+```
+
+### Form Button Groups
+```tsx
+function FormButtonGroupExample() {
+  const handleSave = () => {
+    console.log('Saving...');
+  };
+
+  const handleCancel = () => {
+    console.log('Cancelling...');
+  };
+
+  const handleReset = () => {
+    console.log('Resetting...');
+  };
+
+  return (
+    <Form>
+      <FormField name="title" label="Title" required>
+        <Input placeholder="Enter title" />
+      </FormField>
+      
+      <FormField name="description" label="Description">
+        <TextArea placeholder="Enter description" rows={4} />
+      </FormField>
+      
+      <ButtonGroup>
+        <Button onClick={handleSave}>Save</Button>
+        <Button type="Outlined" onClick={handleCancel}>Cancel</Button>
+        <Button type="Ghost" onClick={handleReset}>Reset</Button>
+      </ButtonGroup>
+    </Form>
+  );
+}
+```
+
+### Icon Button Groups
+```tsx
+function IconButtonGroupExample() {
+  const [view, setView] = useState('grid');
+
+  return (
+    <div className="icon-button-groups">
+      <Text type="Heading6">View Options</Text>
+      <ButtonGroup type="Outlined">
+        <Button 
+          type={view === 'list' ? 'Filled' : 'Outlined'}
+          onClick={() => setView('list')}
+          aria-label="List view"
+        >
+          <Icon icon="List" />
+        </Button>
+        <Button 
+          type={view === 'grid' ? 'Filled' : 'Outlined'}
+          onClick={() => setView('grid')}
+          aria-label="Grid view"
+        >
+          <Icon icon="Grid" />
+        </Button>
+        <Button 
+          type={view === 'card' ? 'Filled' : 'Outlined'}
+          onClick={() => setView('card')}
+          aria-label="Card view"
+        >
+          <Icon icon="Card" />
+        </Button>
+      </ButtonGroup>
+    </div>
+  );
+}
+```
+
+### Loading States
+```tsx
+function LoadingStatesExample() {
+  const [loadingStates, setLoadingStates] = useState({
+    save: false,
+    publish: false,
+    delete: false
+  });
+
+  const handleAction = async (action) => {
+    setLoadingStates(prev => ({ ...prev, [action]: true }));
+    
+    // Simulate async operation
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    
+    setLoadingStates(prev => ({ ...prev, [action]: false }));
+  };
+
+  return (
+    <ButtonGroup>
+      <Button 
+        loading={loadingStates.save}
+        onClick={() => handleAction('save')}
+        disabled={Object.values(loadingStates).some(Boolean)}
+      >
+        Save Draft
+      </Button>
+      <Button 
+        loading={loadingStates.publish}
+        onClick={() => handleAction('publish')}
+        disabled={Object.values(loadingStates).some(Boolean)}
+      >
+        Publish
+      </Button>
+      <Button 
+        style="Destructive"
+        loading={loadingStates.delete}
+        onClick={() => handleAction('delete')}
+        disabled={Object.values(loadingStates).some(Boolean)}
+      >
+        Delete
+      </Button>
+    </ButtonGroup>
+  );
+}
+```
+
+### Responsive Button Groups
+```tsx
+function ResponsiveButtonGroupExample() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
+
+  return (
+    <ButtonGroup align={isMobile ? 'Vertical' : 'Horizontal'}>
+      <Button>Action 1</Button>
+      <Button>Action 2</Button>
+      <Button>Action 3</Button>
+    </ButtonGroup>
+  );
+}
+```
+
+### Button Group with Dropdowns
+```tsx
+function DropdownButtonGroupExample() {
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  return (
+    <div className="dropdown-button-group">
+      <ButtonGroup>
+        <Button onClick={() => console.log('Primary action')}>
+          Save
+        </Button>
+        <Button 
+          type="Outlined"
+          onClick={() => setShowDropdown(!showDropdown)}
+          trailingIcon={<Icon icon="ExpandMore" />}
+        >
+          Options
+        </Button>
+      </ButtonGroup>
+      
+      {showDropdown && (
+        <div className="dropdown-menu">
+          <Button type="Ghost" onClick={() => console.log('Save as...')}>
+            Save as...
+          </Button>
+          <Button type="Ghost" onClick={() => console.log('Save and publish')}>
+            Save and Publish
+          </Button>
+          <Button type="Ghost" onClick={() => console.log('Save template')}>
+            Save as Template
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+```

package/docs/components/molecules/Card.md

@@ -0,0 +1,298 @@
+# Card
+
+## Description
+
+A flexible container component that groups related content and actions in a coherent unit. Cards provide structure and visual hierarchy for presenting information, making them ideal for displaying content blocks, product information, user profiles, and interactive elements.
+
+## Aliases
+
+- Card
+- Panel
+- Container
+- Content Block
+- Info Card
+
+## Props Breakdown
+
+**Extends:** Standalone interface (no HTML element inheritance)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `children` | `ReactNode` | - | Yes | The content to be displayed within the card |
+| `className` | `string` | - | No | Additional CSS class names |
+
+## Examples
+
+### Basic Usage
+```tsx
+import { Card, Text } from '@delightui/components';
+
+function BasicExample() {
+  return (
+    <Card>
+      <Text type="Heading3">Welcome</Text>
+      <Text>This is a simple card with some content inside.</Text>
+    </Card>
+  );
+}
+```
+
+### Card with Header and Content
+```tsx
+import { Card, Text, Button } from '@delightui/components';
+
+function HeaderContentExample() {
+  return (
+    <Card>
+      <div className="card-header">
+        <Text type="Heading4">Project Overview</Text>
+        <Text type="BodySmall" className="card-subtitle">
+          Last updated 2 hours ago
+        </Text>
+      </div>
+      
+      <div className="card-content">
+        <Text>
+          This project includes a comprehensive component library 
+          with design system integration and accessibility features.
+        </Text>
+      </div>
+      
+      <div className="card-actions">
+        <Button size="Small">View Details</Button>
+        <Button size="Small" type="Outlined">Edit</Button>
+      </div>
+    </Card>
+  );
+}
+```
+
+### Product Card
+```tsx
+import { Card, Image, Text, Button, Chip } from '@delightui/components';
+
+function ProductCardExample() {
+  return (
+    <Card className="product-card">
+      <Image 
+        src="/product-image.jpg"
+        alt="Product"
+        aspectRatio="16/9"
+      />
+      
+      <div className="card-body">
+        <div className="card-header">
+          <Text type="Heading5">Premium Headphones</Text>
+          <Chip size="Small" style="A">New</Chip>
+        </div>
+        
+        <Text type="BodySmall" className="card-description">
+          Wireless noise-cancelling headphones with premium sound quality
+          and 30-hour battery life.
+        </Text>
+        
+        <div className="card-pricing">
+          <Text type="Heading6">$299.99</Text>
+          <Text type="BodySmall" className="original-price">$399.99</Text>
+        </div>
+        
+        <div className="card-actions">
+          <Button>Add to Cart</Button>
+          <Button type="Outlined">View Details</Button>
+        </div>
+      </div>
+    </Card>
+  );
+}
+```
+
+### User Profile Card
+```tsx
+import { Card, Image, Text, Button, Icon } from '@delightui/components';
+
+function UserProfileExample() {
+  return (
+    <Card className="profile-card">
+      <div className="profile-header">
+        <Image 
+          src="/avatar.jpg"
+          alt="User Avatar"
+          className="profile-avatar"
+        />
+        
+        <div className="profile-info">
+          <Text type="Heading5">John Doe</Text>
+          <Text type="BodySmall">Senior Developer</Text>
+          <Text type="BodySmall" className="profile-location">
+            <Icon icon="Location" size="Small" />
+            San Francisco, CA
+          </Text>
+        </div>
+      </div>
+      
+      <div className="profile-stats">
+        <div className="stat">
+          <Text type="Heading6">127</Text>
+          <Text type="BodySmall">Projects</Text>
+        </div>
+        <div className="stat">
+          <Text type="Heading6">1.2k</Text>
+          <Text type="BodySmall">Followers</Text>
+        </div>
+        <div className="stat">
+          <Text type="Heading6">89</Text>
+          <Text type="BodySmall">Following</Text>
+        </div>
+      </div>
+      
+      <div className="card-actions">
+        <Button>Follow</Button>
+        <Button type="Outlined">Message</Button>
+      </div>
+    </Card>
+  );
+}
+```
+
+### Interactive Card
+```tsx
+function InteractiveCardExample() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <Card className="interactive-card">
+      <div 
+        className="card-clickable-header"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <Text type="Heading5">Expandable Content</Text>
+        <Icon 
+          icon={isExpanded ? "ExpandLess" : "ExpandMore"} 
+          className="expand-icon"
+        />
+      </div>
+      
+      {isExpanded && (
+        <div className="card-expandable-content">
+          <Text>
+            This content is revealed when the card header is clicked.
+            You can include any content here including forms, lists,
+            or other interactive elements.
+          </Text>
+          
+          <div className="card-actions">
+            <Button size="Small">Action 1</Button>
+            <Button size="Small" type="Outlined">Action 2</Button>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}
+```
+
+### Card Grid Layout
+```tsx
+function CardGridExample() {
+  const items = [
+    { title: "Analytics", description: "View detailed analytics", icon: "BarChart" },
+    { title: "Settings", description: "Manage your preferences", icon: "Settings" },
+    { title: "Help", description: "Get support and documentation", icon: "Help" },
+    { title: "Profile", description: "Update your profile information", icon: "Person" }
+  ];
+
+  return (
+    <div className="card-grid">
+      {items.map((item, index) => (
+        <Card key={index} className="feature-card">
+          <div className="card-icon">
+            <Icon icon={item.icon} size="Large" />
+          </div>
+          
+          <div className="card-content">
+            <Text type="Heading6">{item.title}</Text>
+            <Text type="BodySmall">{item.description}</Text>
+          </div>
+          
+          <div className="card-action">
+            <Button size="Small" type="Ghost">
+              <Icon icon="ArrowForward" size="Small" />
+            </Button>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}
+```
+
+### Card with Form
+```tsx
+import { Card, Text, FormField, Input, Button, Form } from '@delightui/components';
+
+function FormCardExample() {
+  const handleSubmit = (values, setError) => {
+    console.log('Form submitted:', values);
+  };
+
+  return (
+    <Card className="form-card">
+      <div className="card-header">
+        <Text type="Heading4">Contact Us</Text>
+        <Text type="BodySmall">
+          We'd love to hear from you. Send us a message!
+        </Text>
+      </div>
+      
+      <Form onSubmit={handleSubmit}>
+        <FormField name="name" label="Name" required>
+          <Input placeholder="Your name" />
+        </FormField>
+        
+        <FormField name="email" label="Email" required>
+          <Input inputType="Email" placeholder="your@email.com" />
+        </FormField>
+        
+        <FormField name="message" label="Message" required>
+          <TextArea 
+            placeholder="Your message..." 
+            rows={4}
+          />
+        </FormField>
+        
+        <div className="card-actions">
+          <Button actionType="submit">Send Message</Button>
+          <Button type="Outlined" actionType="reset">Clear</Button>
+        </div>
+      </Form>
+    </Card>
+  );
+}
+```
+
+### Custom Styled Cards
+```tsx
+function CustomStyledExample() {
+  return (
+    <div className="custom-cards">
+      <Card className="success-card">
+        <Icon icon="Check" className="status-icon" />
+        <Text type="Heading6">Success!</Text>
+        <Text type="BodySmall">Your action was completed successfully.</Text>
+      </Card>
+      
+      <Card className="warning-card">
+        <Icon icon="Warning" className="status-icon" />
+        <Text type="Heading6">Warning</Text>
+        <Text type="BodySmall">Please review before proceeding.</Text>
+      </Card>
+      
+      <Card className="error-card">
+        <Icon icon="Error" className="status-icon" />
+        <Text type="Heading6">Error</Text>
+        <Text type="BodySmall">Something went wrong. Please try again.</Text>
+      </Card>
+    </div>
+  );
+}
+```