@delightui/components 0.1.104 → 0.1.106

package/docs/components/atoms/CheckboxItem.md

@@ -0,0 +1,314 @@
+# CheckboxItem
+
+## Description
+
+Enhanced checkbox component with integrated label styling and an optional right-side action button. Extends the base Checkbox functionality with additional interactive elements for more complex use cases.
+
+## Aliases
+
+- Checkbox List Item
+- Enhanced Checkbox
+- Action Checkbox
+- Checkbox with Button
+
+## Props Breakdown
+
+Inherits all props from [Checkbox](./Checkbox.md) plus:
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `showRightButton` | `boolean` | `false` | No | Whether to show an action button on the right side |
+| `onRightButtonClick` | `() => void` | - | No | Callback function when the right button is clicked |
+| `rightButtonIcon` | `ReactNode` | - | No | Custom icon for the right button |
+
+### Inherited Props from Checkbox
+- `children` - Label content for the checkbox
+- `size` - Size variant ('Small', 'Medium', 'Large')
+- `type` - Visual theme ('Default', 'Inverse')
+- `checked`/`value` - Controlled state
+- `onValueChange` - Change handler
+- `disabled` - Disabled state
+- `required` - Required field
+- `invalid` - Invalid state
+- All standard HTML input attributes
+
+## Examples
+
+### Basic Usage
+```tsx
+import { CheckboxItem } from '@delightui/components';
+
+function BasicExample() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <CheckboxItem
+      checked={checked}
+      onValueChange={setChecked}
+    >
+      Enable notifications
+    </CheckboxItem>
+  );
+}
+```
+
+### With Right Action Button
+```tsx
+import { CogIcon } from '@heroicons/react/24/outline';
+
+function ActionButtonExample() {
+  const [checked, setChecked] = useState(false);
+
+  const handleSettings = () => {
+    console.log('Opening notification settings');
+  };
+
+  return (
+    <CheckboxItem
+      checked={checked}
+      onValueChange={setChecked}
+      showRightButton={true}
+      onRightButtonClick={handleSettings}
+      rightButtonIcon={<CogIcon />}
+    >
+      Email notifications
+    </CheckboxItem>
+  );
+}
+```
+
+### Settings List
+```tsx
+import { CogIcon, InfoIcon, BellIcon } from '@heroicons/react/24/outline';
+
+function SettingsListExample() {
+  const [settings, setSettings] = useState({
+    notifications: true,
+    marketing: false,
+    updates: true
+  });
+
+  const updateSetting = (key, value) => {
+    setSettings(prev => ({ ...prev, [key]: value }));
+  };
+
+  const openSettingsDetail = (settingKey) => {
+    console.log(`Opening ${settingKey} settings`);
+  };
+
+  return (
+    <div className="settings-list">
+      <CheckboxItem
+        checked={settings.notifications}
+        onValueChange={(value) => updateSetting('notifications', value)}
+        showRightButton={true}
+        onRightButtonClick={() => openSettingsDetail('notifications')}
+        rightButtonIcon={<CogIcon />}
+      >
+        Push Notifications
+      </CheckboxItem>
+
+      <CheckboxItem
+        checked={settings.marketing}
+        onValueChange={(value) => updateSetting('marketing', value)}
+        showRightButton={true}
+        onRightButtonClick={() => openSettingsDetail('marketing')}
+        rightButtonIcon={<InfoIcon />}
+      >
+        Marketing Communications
+      </CheckboxItem>
+
+      <CheckboxItem
+        checked={settings.updates}
+        onValueChange={(value) => updateSetting('updates', value)}
+        showRightButton={true}
+        onRightButtonClick={() => openSettingsDetail('updates')}
+        rightButtonIcon={<BellIcon />}
+      >
+        Product Updates
+      </CheckboxItem>
+    </div>
+  );
+}
+```
+
+### Different Sizes
+```tsx
+function SizesExample() {
+  return (
+    <div className="checkbox-item-sizes">
+      <CheckboxItem 
+        size="Small"
+        showRightButton={true}
+        rightButtonIcon={<CogIcon />}
+      >
+        Small checkbox item
+      </CheckboxItem>
+
+      <CheckboxItem 
+        size="Medium"
+        showRightButton={true}
+        rightButtonIcon={<CogIcon />}
+      >
+        Medium checkbox item
+      </CheckboxItem>
+
+      <CheckboxItem 
+        size="Large"
+        showRightButton={true}
+        rightButtonIcon={<CogIcon />}
+      >
+        Large checkbox item
+      </CheckboxItem>
+    </div>
+  );
+}
+```
+
+### Form Integration
+```tsx
+import { CheckboxItem, Form, FormField, Button } from '@delightui/components';
+
+function FormExample() {
+  const handleSubmit = (values, setError) => {
+    console.log('Form submitted:', values);
+  };
+
+  const openPrivacySettings = () => {
+    console.log('Opening privacy settings');
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <FormField name="terms" required>
+        <CheckboxItem>
+          I accept the terms and conditions
+        </CheckboxItem>
+      </FormField>
+
+      <FormField name="privacy">
+        <CheckboxItem
+          showRightButton={true}
+          onRightButtonClick={openPrivacySettings}
+          rightButtonIcon={<CogIcon />}
+        >
+          Configure privacy settings
+        </CheckboxItem>
+      </FormField>
+
+      <FormField name="newsletter">
+        <CheckboxItem>
+          Subscribe to newsletter
+        </CheckboxItem>
+      </FormField>
+
+      <Button actionType="submit">
+        Create Account
+      </Button>
+    </Form>
+  );
+}
+```
+
+### Permission Management
+```tsx
+import { 
+  EyeIcon, 
+  PencilIcon, 
+  TrashIcon, 
+  CogIcon 
+} from '@heroicons/react/24/outline';
+
+function PermissionExample() {
+  const [permissions, setPermissions] = useState({
+    read: true,
+    write: false,
+    delete: false,
+    admin: false
+  });
+
+  const updatePermission = (key, value) => {
+    setPermissions(prev => ({ ...prev, [key]: value }));
+  };
+
+  const configurePermission = (permissionType) => {
+    console.log(`Configuring ${permissionType} permission`);
+  };
+
+  return (
+    <div className="permission-manager">
+      <h3>User Permissions</h3>
+      
+      <CheckboxItem
+        checked={permissions.read}
+        onValueChange={(value) => updatePermission('read', value)}
+        showRightButton={true}
+        onRightButtonClick={() => configurePermission('read')}
+        rightButtonIcon={<EyeIcon />}
+      >
+        Read Access
+      </CheckboxItem>
+
+      <CheckboxItem
+        checked={permissions.write}
+        onValueChange={(value) => updatePermission('write', value)}
+        showRightButton={true}
+        onRightButtonClick={() => configurePermission('write')}
+        rightButtonIcon={<PencilIcon />}
+      >
+        Write Access
+      </CheckboxItem>
+
+      <CheckboxItem
+        checked={permissions.delete}
+        onValueChange={(value) => updatePermission('delete', value)}
+        showRightButton={true}
+        onRightButtonClick={() => configurePermission('delete')}
+        rightButtonIcon={<TrashIcon />}
+        invalid={permissions.delete && !permissions.write}
+      >
+        Delete Access
+      </CheckboxItem>
+
+      <CheckboxItem
+        checked={permissions.admin}
+        onValueChange={(value) => updatePermission('admin', value)}
+        showRightButton={true}
+        onRightButtonClick={() => configurePermission('admin')}
+        rightButtonIcon={<CogIcon />}
+        disabled={!permissions.read || !permissions.write}
+      >
+        Admin Access
+      </CheckboxItem>
+    </div>
+  );
+}
+```
+
+### Disabled States
+```tsx
+function DisabledStatesExample() {
+  return (
+    <div className="disabled-states">
+      <CheckboxItem disabled>
+        Disabled without button
+      </CheckboxItem>
+
+      <CheckboxItem 
+        disabled
+        checked={true}
+      >
+        Disabled and checked
+      </CheckboxItem>
+
+      <CheckboxItem
+        disabled
+        showRightButton={true}
+        rightButtonIcon={<CogIcon />}
+      >
+        Disabled with button
+      </CheckboxItem>
+    </div>
+  );
+}
+```

package/docs/components/atoms/Chip.md

@@ -0,0 +1,380 @@
+# Chip
+
+## Description
+
+Small, compact elements used for tags, filters, categories, and interactive selections. Supports multiple visual styles, sizes, icons, and dismissible functionality for versatile use cases.
+
+## Aliases
+
+- Tag
+- Badge
+- Label
+- Token
+- Filter Chip
+
+## Props Breakdown
+
+**Extends:** `HTMLAttributes<HTMLDivElement>` (excluding `style`)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `type` | `'Bright' \| 'BrightOutline' \| 'Subdued' \| 'SubduedOutline'` | `'Bright'` | No | Visual style variant of the chip |
+| `style` | `'A' \| 'B' \| 'C' \| 'D' \| 'E' \| 'F'` | `'A'` | No | Color scheme of the chip |
+| `size` | `'Small' \| 'Medium' \| 'Large'` | `'Medium'` | No | Size variant of the chip |
+| `corner` | `'Rounded' \| 'Squared'` | `'Rounded'` | No | Corner style of the chip |
+| `isDisabled` | `boolean` | `false` | No | Whether the chip is disabled |
+| `isDismissible` | `boolean` | `false` | No | Whether the chip can be dismissed/removed |
+| `leadingIcon` | `ReactNode` | - | No | Icon displayed before the chip content |
+| `trailingIcon` | `ReactNode` | - | No | Icon displayed after the chip content |
+| `closeIcon` | `ReactNode` | - | No | Custom close icon for dismissible chips |
+| `onClick` | `(event?: MouseEvent<HTMLDivElement>) => void` | - | No | Click event handler |
+| `onClose` | `(event?: MouseEvent<HTMLElement>) => void` | - | No | Close event handler for dismissible chips |
+| `className` | `string` | - | No | Additional CSS class names |
+| `children` | `ReactNode` | - | No | Content of the chip |
+
+Plus all standard HTML div attributes (id, role, aria-*, data-*, etc.) except `style`.
+
+## Examples
+
+### Basic Usage
+```tsx
+import { Chip } from '@delightui/components';
+
+function BasicExample() {
+  return (
+    <div className="chip-examples">
+      <Chip>JavaScript</Chip>
+      <Chip>React</Chip>
+      <Chip>TypeScript</Chip>
+    </div>
+  );
+}
+```
+
+### Chip Types
+```tsx
+function TypesExample() {
+  return (
+    <div className="chip-types">
+      <Chip type="Bright">Bright</Chip>
+      <Chip type="BrightOutline">Bright Outline</Chip>
+      <Chip type="Subdued">Subdued</Chip>
+      <Chip type="SubduedOutline">Subdued Outline</Chip>
+    </div>
+  );
+}
+```
+
+### Chip Styles (Colors)
+```tsx
+function StylesExample() {
+  return (
+    <div className="chip-styles">
+      <Chip style="A">Style A</Chip>
+      <Chip style="B">Style B</Chip>
+      <Chip style="C">Style C</Chip>
+      <Chip style="D">Style D</Chip>
+      <Chip style="E">Style E</Chip>
+      <Chip style="F">Style F</Chip>
+    </div>
+  );
+}
+```
+
+### Chip Sizes
+```tsx
+function SizesExample() {
+  return (
+    <div className="chip-sizes">
+      <Chip size="Small">Small</Chip>
+      <Chip size="Medium">Medium</Chip>
+      <Chip size="Large">Large</Chip>
+    </div>
+  );
+}
+```
+
+### Corner Styles
+```tsx
+function CornersExample() {
+  return (
+    <div className="chip-corners">
+      <Chip corner="Rounded">Rounded</Chip>
+      <Chip corner="Squared">Squared</Chip>
+    </div>
+  );
+}
+```
+
+### With Icons
+```tsx
+import { 
+  TagIcon, 
+  UserIcon, 
+  CalendarIcon,
+  HeartIcon
+} from '@heroicons/react/24/outline';
+
+function IconsExample() {
+  return (
+    <div className="chip-icons">
+      <Chip leadingIcon={<TagIcon />}>
+        Category
+      </Chip>
+      
+      <Chip trailingIcon={<UserIcon />}>
+        User
+      </Chip>
+      
+      <Chip 
+        leadingIcon={<CalendarIcon />}
+        trailingIcon={<HeartIcon />}
+      >
+        Event
+      </Chip>
+    </div>
+  );
+}
+```
+
+### Dismissible Chips
+```tsx
+import { XMarkIcon } from '@heroicons/react/24/outline';
+
+function DismissibleExample() {
+  const [tags, setTags] = useState([
+    { id: 1, label: 'React' },
+    { id: 2, label: 'JavaScript' },
+    { id: 3, label: 'TypeScript' },
+    { id: 4, label: 'CSS' }
+  ]);
+
+  const removeTag = (tagId) => {
+    setTags(tags.filter(tag => tag.id !== tagId));
+  };
+
+  return (
+    <div className="dismissible-chips">
+      {tags.map(tag => (
+        <Chip
+          key={tag.id}
+          isDismissible={true}
+          onClose={() => removeTag(tag.id)}
+          closeIcon={<XMarkIcon />}
+        >
+          {tag.label}
+        </Chip>
+      ))}
+    </div>
+  );
+}
+```
+
+### Interactive Filter Chips
+```tsx
+function FilterChipsExample() {
+  const [selectedFilters, setSelectedFilters] = useState(['all']);
+  
+  const filters = [
+    { id: 'all', label: 'All Items' },
+    { id: 'active', label: 'Active' },
+    { id: 'completed', label: 'Completed' },
+    { id: 'pending', label: 'Pending' }
+  ];
+
+  const toggleFilter = (filterId) => {
+    if (filterId === 'all') {
+      setSelectedFilters(['all']);
+    } else {
+      setSelectedFilters(prev => {
+        const newFilters = prev.filter(f => f !== 'all');
+        return prev.includes(filterId)
+          ? newFilters.filter(f => f !== filterId)
+          : [...newFilters, filterId];
+      });
+    }
+  };
+
+  return (
+    <div className="filter-chips">
+      {filters.map(filter => (
+        <Chip
+          key={filter.id}
+          type={selectedFilters.includes(filter.id) ? 'Bright' : 'SubduedOutline'}
+          onClick={() => toggleFilter(filter.id)}
+          style={selectedFilters.includes(filter.id) ? 'A' : 'B'}
+        >
+          {filter.label}
+        </Chip>
+      ))}
+    </div>
+  );
+}
+```
+
+### Status Chips
+```tsx
+import { 
+  CheckCircleIcon, 
+  ExclamationCircleIcon, 
+  ClockIcon,
+  XCircleIcon 
+} from '@heroicons/react/24/solid';
+
+function StatusChipsExample() {
+  const statusItems = [
+    { 
+      status: 'success', 
+      label: 'Completed', 
+      icon: <CheckCircleIcon />,
+      style: 'C' 
+    },
+    { 
+      status: 'warning', 
+      label: 'Pending', 
+      icon: <ClockIcon />,
+      style: 'E' 
+    },
+    { 
+      status: 'error', 
+      label: 'Failed', 
+      icon: <XCircleIcon />,
+      style: 'D' 
+    },
+    { 
+      status: 'info', 
+      label: 'In Progress', 
+      icon: <ExclamationCircleIcon />,
+      style: 'B' 
+    }
+  ];
+
+  return (
+    <div className="status-chips">
+      {statusItems.map(item => (
+        <Chip
+          key={item.status}
+          leadingIcon={item.icon}
+          style={item.style}
+          type="Bright"
+        >
+          {item.label}
+        </Chip>
+      ))}
+    </div>
+  );
+}
+```
+
+### Tag Input System
+```tsx
+import { Input, Button } from '@delightui/components';
+
+function TagInputExample() {
+  const [tags, setTags] = useState(['React', 'JavaScript']);
+  const [inputValue, setInputValue] = useState('');
+
+  const addTag = () => {
+    if (inputValue.trim() && !tags.includes(inputValue.trim())) {
+      setTags([...tags, inputValue.trim()]);
+      setInputValue('');
+    }
+  };
+
+  const removeTag = (tagToRemove) => {
+    setTags(tags.filter(tag => tag !== tagToRemove));
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      addTag();
+    }
+  };
+
+  return (
+    <div className="tag-input-system">
+      <div className="tags-container">
+        {tags.map(tag => (
+          <Chip
+            key={tag}
+            isDismissible={true}
+            onClose={() => removeTag(tag)}
+            type="BrightOutline"
+            style="A"
+          >
+            {tag}
+          </Chip>
+        ))}
+      </div>
+      
+      <div className="tag-input">
+        <Input
+          value={inputValue}
+          onValueChange={setInputValue}
+          onKeyPress={handleKeyPress}
+          placeholder="Add a tag..."
+        />
+        <Button onClick={addTag}>Add</Button>
+      </div>
+    </div>
+  );
+}
+```
+
+### Disabled States
+```tsx
+function DisabledExample() {
+  return (
+    <div className="disabled-chips">
+      <Chip isDisabled>Disabled Chip</Chip>
+      
+      <Chip 
+        isDisabled
+        leadingIcon={<TagIcon />}
+      >
+        Disabled with Icon
+      </Chip>
+      
+      <Chip 
+        isDisabled
+        isDismissible={true}
+      >
+        Disabled Dismissible
+      </Chip>
+    </div>
+  );
+}
+```
+
+### Complex Combination
+```tsx
+function ComplexExample() {
+  return (
+    <div className="complex-chips">
+      <Chip
+        type="Bright"
+        style="A"
+        size="Large"
+        corner="Rounded"
+        leadingIcon={<UserIcon />}
+        trailingIcon={<HeartIcon />}
+        onClick={() => console.log('Chip clicked')}
+      >
+        Featured User
+      </Chip>
+
+      <Chip
+        type="SubduedOutline"
+        style="D"
+        size="Small"
+        corner="Squared"
+        isDismissible={true}
+        onClose={() => console.log('Chip dismissed')}
+        leadingIcon={<TagIcon />}
+      >
+        Remove Me
+      </Chip>
+    </div>
+  );
+}
+```