@delightui/components 0.1.113 → 0.1.115

package/dist/index.d.ts

@@ -313,6 +313,8 @@ type FormProviderProps<T extends FormState = FormState> = {
     formValidator?: FormValidator<T>;
     onSubmit?: FormSubmitHandler<T>;
     validateOnChange?: boolean;
+    autosave?: boolean;
+    autosaveDelayMs?: number;
 };
 
 /**
@@ -1245,7 +1247,7 @@ type ListProps<T extends ListItemType> = Omit<HTMLAttributes<HTMLUListElement>,
      * @param data
      * @returns
      */
-    updateSortOrder?: (data: T[]) => void;
+    updateSortOrder?: (data: T[], oldIndex: number, newIndex: number) => void;
 };
 
 /**

package/docs/components/molecules/List.md

@@ -24,7 +24,7 @@ A flexible list component that renders collections of data with support for cust
 | `wrap` | `boolean` | - | No | Whether list content should wrap |
 | `align` | `'Horizontal' \| 'Vertical'` | `'Vertical'` | No | Layout direction for the list |
 | `sortable` | `boolean` | - | No | Enable drag-and-drop sorting |
-| `updateSortOrder` | `(data: T[]) => void` | - | No | Callback when sort order changes |
+| `updateSortOrder` | `(data: T[], oldIndex: number, newIndex: number) => void` | - | No | Callback when sort order changes |
 | `className` | `string` | - | No | Additional CSS class names |
 
 Plus all standard HTML ul attributes (role, aria-*, data-*, etc.).

package/docs/components/molecules/NavLink.md

@@ -26,7 +26,7 @@ A navigation link component that handles both internal routing and external link
 | `leadingIcon` | `ReactNode` | - | No | Icon displayed before the link text |
 | `trailingIcon` | `ReactNode` | - | No | Icon displayed after the link text |
 | `component-variant` | `string` | - | No | Override styling variant |
-| `children` | `ReactNode` | - | Yes | Link content (text, icons, etc.) |
+| `children` | `ReactNode` | - | Yes | Link content (text, icons, components like cards, etc.) |
 
 Plus all React Router Link props and Button styling props.
 
@@ -496,4 +496,158 @@ function LoadingStateLinksExample() {
     </div>
   );
 }
+```
+
+### Wrapping Complex Components (Cards)
+```tsx
+function CardNavigationExample() {
+  const dashboardCards = [
+    {
+      id: 'analytics',
+      title: 'Analytics Dashboard',
+      description: 'View detailed analytics and metrics',
+      icon: 'BarChart',
+      path: '/dashboard/analytics'
+    },
+    {
+      id: 'users',
+      title: 'User Management',
+      description: 'Manage users and permissions',
+      icon: 'People',
+      path: '/dashboard/users'
+    },
+    {
+      id: 'settings',
+      title: 'System Settings',
+      description: 'Configure application settings',
+      icon: 'Settings',
+      path: '/dashboard/settings'
+    }
+  ];
+
+  return (
+    <div className="card-navigation-grid">
+      {dashboardCards.map(card => (
+        <NavLink key={card.id} to={card.path} className="card-nav-link">
+          <Card className="dashboard-card">
+            <CardHeader>
+              <Icon icon={card.icon} size="Large" />
+              <Text type="Heading4">{card.title}</Text>
+            </CardHeader>
+            <CardContent>
+              <Text type="Body">{card.description}</Text>
+            </CardContent>
+          </Card>
+        </NavLink>
+      ))}
+    </div>
+  );
+}
+```
+
+### Wrapping Complex Components (List Items)
+```tsx
+function NavigableListExample() {
+  const projectItems = [
+    {
+      id: 1,
+      name: 'E-commerce Platform',
+      status: 'Active',
+      lastUpdated: '2024-01-15',
+      path: '/projects/ecommerce'
+    },
+    {
+      id: 2,
+      name: 'Mobile App Redesign',
+      status: 'In Progress',
+      lastUpdated: '2024-01-14',
+      path: '/projects/mobile-app'
+    },
+    {
+      id: 3,
+      name: 'Analytics Dashboard',
+      status: 'Completed',
+      lastUpdated: '2024-01-10',
+      path: '/projects/analytics'
+    }
+  ];
+
+  return (
+    <div className="navigable-list">
+      {projectItems.map(project => (
+        <NavLink key={project.id} to={project.path} className="list-nav-link">
+          <ListItem className="project-item">
+            <ListItemContent>
+              <div className="project-header">
+                <Text type="Heading5">{project.name}</Text>
+                <Chip type={project.status === 'Active' ? 'Success' : 'Default'}>
+                  {project.status}
+                </Chip>
+              </div>
+              <Text type="BodySmall" className="project-date">
+                Last updated: {project.lastUpdated}
+              </Text>
+            </ListItemContent>
+            <ListItemAction>
+              <Icon icon="ChevronRight" />
+            </ListItemAction>
+          </ListItem>
+        </NavLink>
+      ))}
+    </div>
+  );
+}
+```
+
+### Wrapping Complex Components (Panels)
+```tsx
+function PanelNavigationExample() {
+  const toolPanels = [
+    {
+      id: 'editor',
+      title: 'Code Editor',
+      description: 'Edit and manage your code files',
+      icon: 'Code',
+      path: '/tools/editor',
+      isActive: true
+    },
+    {
+      id: 'debugger',
+      title: 'Debugger',
+      description: 'Debug and troubleshoot your applications',
+      icon: 'Bug',
+      path: '/tools/debugger',
+      isActive: false
+    },
+    {
+      id: 'terminal',
+      title: 'Terminal',
+      description: 'Access command line interface',
+      icon: 'Terminal',
+      path: '/tools/terminal',
+      isActive: false
+    }
+  ];
+
+  return (
+    <div className="panel-navigation">
+      {toolPanels.map(panel => (
+        <NavLink key={panel.id} to={panel.path} className="panel-nav-link">
+          <Panel className={`tool-panel ${panel.isActive ? 'active' : ''}`}>
+            <PanelHeader>
+              <Icon icon={panel.icon} />
+              <Text type="Heading5">{panel.title}</Text>
+              {panel.isActive && (
+                <Chip type="Primary" size="Small">Active</Chip>
+              )}
+            </PanelHeader>
+            <PanelContent>
+              <Text type="Body">{panel.description}</Text>
+            </PanelContent>
+          </Panel>
+        </NavLink>
+      ))}
+    </div>
+  );
+}
 ```

package/docs/components/molecules/Search.md

@@ -18,7 +18,7 @@ A versatile search input component that supports both automatic and manual searc
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
-| `mode` | `'Auto' \| 'Manual'` | `'Auto'` | No | Search mode - 'Auto' for debounced search on input, 'Manual' for search on enter/submit |
+| `style` | `'Auto' \| 'Manual'` | `'Auto'` | No | Search mode - 'Auto' for debounced search on input, 'Manual' for search on enter/submit |
 | `onSearch` | `SearchCallback` | - | No | Callback function to handle search with the query string |
 | `debounceMs` | `number` | `300` | No | Debounce delay in milliseconds for auto mode |
 | `minCharacters` | `number` | `1` | No | Minimum characters required to trigger search in auto mode |
@@ -53,7 +53,7 @@ function BasicAutoSearch() {
   return (
     <div>
       <Search
-        mode="Auto"
+        style="Auto"
         onSearch={handleSearch}
         loading={loading}
         placeholder="Search products..."
@@ -100,7 +100,7 @@ function ManualSearchExample() {
   return (
     <div>
       <Search
-        mode="Manual"
+        style="Manual"
         value={query}
         onValueChange={setQuery}
         onSearch={handleSearch}
@@ -180,7 +180,7 @@ function AdvancedSearchExample() {
     <div className="advanced-search">
       <div className="search-header">
         <Search
-          mode="Auto"
+          style="Auto"
           value={searchState.query}
           onValueChange={(query) => setSearchState(prev => ({ ...prev, query }))}
           onSearch={performSearch}
@@ -298,7 +298,7 @@ function UserSearchExample() {
       <div className="search-section">
         <Text type="Heading6">Add Team Members</Text>
         <Search
-          mode="Auto"
+          style="Auto"
           onSearch={searchUsers}
           loading={searching}
           placeholder="Search by name or email..."
@@ -396,7 +396,7 @@ function DocumentSearchExample() {
     <div className="document-search">
       <div className="search-bar">
         <Search
-          mode="Auto"
+          style="Auto"
           value={searchState.query}
           onValueChange={(query) => setSearchState(prev => ({ ...prev, query }))}
           onSearch={searchDocuments}
@@ -508,7 +508,7 @@ function SearchWithHistoryExample() {
     <div className="search-with-history">
       <div className="search-container">
         <Search
-          mode="Manual"
+          style="Manual"
           value={currentQuery}
           onValueChange={setCurrentQuery}
           onSearch={performSearch}
@@ -626,7 +626,7 @@ function RealTimeSearchExample() {
     <div className="realtime-search">
       <div className="search-input-container">
         <Search
-          mode="Auto"
+          style="Auto"
           value={searchState.query}
           onValueChange={handleQueryChange}
           onSearch={performFullSearch}

package/docs/components/organisms/Form.md

@@ -24,6 +24,8 @@ A comprehensive form management component that provides state management, valida
 | `formValidator` | `FormValidator` | - | No | Function to validate entire form |
 | `onSubmit` | `FormSubmitHandler` | - | No | Form submission handler |
 | `validateOnChange` | `boolean` | - | No | Whether to validate on field changes |
+| `autosave` | `boolean` | `false` | No | Enable automatic form submission on value changes |
+| `autosaveDelayMs` | `number` | - | No | Delay in milliseconds before autosave triggers |
 
 Plus all standard HTML form attributes (method, action, encType, target, etc.) except `onSubmit`.
 
@@ -530,4 +532,129 @@ function AsyncFormExample() {
     </Form>
   );
 }
+```
+
+### Autosave Form
+```tsx
+function AutosaveFormExample() {
+  const [saveCount, setSaveCount] = useState(0);
+  const [lastSaved, setLastSaved] = useState(null);
+
+  const handleSubmit = async (values, setError) => {
+    try {
+      // Simulate API call to save draft
+      const response = await fetch('/api/drafts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(values)
+      });
+      
+      if (response.ok) {
+        setSaveCount(prev => prev + 1);
+        setLastSaved(new Date().toLocaleTimeString());
+        console.log('Draft auto-saved:', values);
+      }
+    } catch (error) {
+      console.error('Failed to save draft:', error);
+    }
+  };
+
+  return (
+    <div>
+      <Form 
+        onSubmit={handleSubmit}
+        autosave={true}
+        autosaveDelayMs={2000} // Wait 2 seconds after user stops typing
+      >
+        <FormField name="title" label="Title">
+          <Input placeholder="Enter title" />
+        </FormField>
+        
+        <FormField name="content" label="Content">
+          <TextArea 
+            placeholder="Start writing..." 
+            rows={10} 
+          />
+        </FormField>
+        
+        <FormField name="tags" label="Tags">
+          <ChipInput 
+            placeholder="Add tags" 
+            options={['react', 'typescript', 'design', 'tutorial']}
+          />
+        </FormField>
+        
+        {lastSaved && (
+          <Text type="BodySmall">
+            Auto-saved {saveCount} times. Last saved at {lastSaved}
+          </Text>
+        )}
+      </Form>
+    </div>
+  );
+}
+```
+
+### Autosave with Manual Submit
+```tsx
+function AutosaveWithManualSubmitExample() {
+  const [isDraft, setIsDraft] = useState(true);
+
+  const handleAutosave = (values, setError) => {
+    if (isDraft) {
+      console.log('Draft auto-saved:', values);
+      // Save to local storage or draft API
+      localStorage.setItem('formDraft', JSON.stringify(values));
+    }
+  };
+
+  const handlePublish = () => {
+    setIsDraft(false);
+    // Form will now submit normally
+  };
+
+  return (
+    <Form 
+      onSubmit={handleAutosave}
+      autosave={isDraft}
+      autosaveDelayMs={1000}
+      formState={{
+        title: localStorage.getItem('formDraft')?.title || '',
+        content: localStorage.getItem('formDraft')?.content || ''
+      }}
+    >
+      <FormField name="title" label="Article Title" required>
+        <Input placeholder="Enter title" />
+      </FormField>
+      
+      <FormField name="content" label="Article Content" required>
+        <TextArea placeholder="Write your article..." rows={15} />
+      </FormField>
+      
+      <FormField name="category" label="Category">
+        <Select>
+          <Option value="tech">Technology</Option>
+          <Option value="design">Design</Option>
+          <Option value="business">Business</Option>
+        </Select>
+      </FormField>
+      
+      <div className="form-actions">
+        <Button type="Outlined">Save as Draft</Button>
+        <Button 
+          actionType="submit" 
+          onClick={handlePublish}
+        >
+          Publish Article
+        </Button>
+      </div>
+      
+      {isDraft && (
+        <Text type="BodySmall" style={{ marginTop: '8px' }}>
+          Your changes are automatically saved as you type
+        </Text>
+      )}
+    </Form>
+  );
+}
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@delightui/components",
-  "version": "0.1.113",
+  "version": "0.1.115",
   "private": false,
   "scripts": {
     "start": "vite",