@mhmo91/schmancy 0.8.6 → 0.9.3

package/ai/table.md

@@ -1,334 +1,60 @@
-# Schmancy Table - AI Reference
+# schmancy-table
 
-```js
-// Basic Table
-<schmancy-table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Email</th>
-      <th>Role</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>John Doe</td>
-      <td>john@example.com</td>
-      <td>Admin</td>
-    </tr>
-    <tr>
-      <td>Jane Smith</td>
-      <td>jane@example.com</td>
-      <td>User</td>
-    </tr>
-  </tbody>
-</schmancy-table>
-
-// Table with custom row component
-<schmancy-table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Email</th>
-      <th>Role</th>
-      <th>Actions</th>
-    </tr>
-  </thead>
-  <tbody>
-    <schmancy-row
-      .data=${{ name: 'John Doe', email: 'john@example.com', role: 'Admin' }}
-      @click=${handleRowClick}>
-      <td>${data.name}</td>
-      <td>${data.email}</td>
-      <td>${data.role}</td>
-      <td>
-        <schmancy-button kind="tertiary" size="small">Edit</schmancy-button>
-        <schmancy-button kind="danger" size="small">Delete</schmancy-button>
-      </td>
-    </schmancy-row>
-    <!-- More rows -->
-  </tbody>
-</schmancy-table>
-
-// Data Table with programmatic columns and custom sorting
-<schmancy-table
-  .columns=${[
-    { 
-      name: 'Name', 
-      key: 'name', 
-      sortable: true 
-    },
-    { 
-      name: 'Date Joined', 
-      key: 'dateJoined', 
-      sortable: true,
-      // Custom sort by Unix timestamp
-      value: (item) => new Date(item.dateJoined).getTime()
-    },
-    { 
-      name: 'Profile Completion', 
-      key: 'profile',
-      sortable: true,
-      // Sort by completion percentage 
-      value: (item) => item.profile.completionPercentage,
-      // Display with custom rendering
-      render: (item) => html`${item.profile.completionPercentage}%`
-    }
-  ]}
-  .data=${users}
-  sortable>
-</schmancy-table>
-
-// Table Properties
-striped: boolean          // Apply alternating row colors
-bordered: boolean         // Add borders to cells
-compact: boolean          // Reduce cell padding
-hover: boolean            // Highlight rows on hover
-responsive: boolean       // Make table horizontally scrollable on small screens
-sortable: boolean         // Enable column sorting
-selectable: boolean       // Enable row selection
-loading: boolean          // Show loading state
-
-// Column Configuration Properties (when using programmatic columns)
-name: string              // Display name for the column header
-key?: keyof T             // Object property to access for this column
-align?: string            // Text alignment ('left', 'right', 'center')
-weight?: string           // Font weight ('normal', 'bold')
-render?: function         // Custom render function for complex content: (item) => TemplateResult
-sortable?: boolean        // Whether this column supports sorting
-value?: function          // Custom value function for sorting: (item) => any
-
-// Row Properties
-selected: boolean         // Whether the row is selected
-data: object              // Data object for the row
-
-// Table Events
-@sort      // Fires when a sortable column is clicked, with { detail: { column, direction } }
-@selection // Fires when row selection changes, with { detail: { selected } }
-
-// Examples
-// Basic responsive table
-<schmancy-table
-  responsive
-  striped
-  hover>
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Name</th>
-      <th>Email</th>
-      <th>Created</th>
-      <th>Status</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>1</td>
-      <td>John Doe</td>
-      <td>john@example.com</td>
-      <td>2023-04-12</td>
-      <td>
-        <schmancy-badge variant="success">Active</schmancy-badge>
-      </td>
-    </tr>
-    <tr>
-      <td>2</td>
-      <td>Jane Smith</td>
-      <td>jane@example.com</td>
-      <td>2023-04-15</td>
-      <td>
-        <schmancy-badge variant="warning">Pending</schmancy-badge>
-      </td>
-    </tr>
-  </tbody>
-</schmancy-table>
-
-// Sortable table - standard HTML structure
-<schmancy-table
-  sortable
-  @sort=${(e) => sortData(e.detail.column, e.detail.direction)}>
-  <thead>
-    <tr>
-      <th data-sort="id">ID</th>
-      <th data-sort="name">Name</th>
-      <th data-sort="email">Email</th>
-      <th data-sort="created">Created</th>
-      <th>Actions</th>
-    </tr>
-  </thead>
-  <tbody>
-    ${sortedData.map(item => html`
-      <tr>
-        <td>${item.id}</td>
-        <td>${item.name}</td>
-        <td>${item.email}</td>
-        <td>${formatDate(item.created)}</td>
-        <td>
-          <schmancy-icon-button
-            icon="edit"
-            variant="tertiary"
-            @click=${() => editItem(item)}>
-          </schmancy-icon-button>
-          <schmancy-icon-button
-            icon="delete"
-            variant="danger"
-            @click=${() => deleteItem(item)}>
-          </schmancy-icon-button>
-        </td>
-      </tr>
-    `)}
-  </tbody>
-</schmancy-table>
+> Virtualized data table with sorting, custom column rendering, and sticky headers.
 
-// Sortable table - programmatic with custom value functions
+## Usage
+```typescript
+html`
 <schmancy-table
-  .data=${userData}
-  .columns=${[
-    {
-      name: 'ID', 
-      key: 'id', 
-      sortable: true
-    },
-    {
-      name: 'User', 
-      key: 'user', 
-      sortable: true,
-      // Sort by last name for "user" column
-      value: (item) => item.user.lastName,
-      // Custom render function for complex data
-      render: (item) => html`
-        <div class="flex items-center">
-          <schmancy-avatar src=${item.user.avatar} size="sm"></schmancy-avatar>
-          <div class="ml-2">
-            <div>${item.user.firstName} ${item.user.lastName}</div>
-            <div class="text-sm text-gray-500">${item.user.email}</div>
-          </div>
-        </div>
-      `
-    },
-    {
-      name: 'Status', 
-      key: 'status', 
-      sortable: true,
-      // Sort by status priority (numeric value) but display text
-      value: (item) => statusPriorities[item.status] || 0,
-      render: (item) => html`
-        <schmancy-badge variant=${getStatusVariant(item.status)}>
-          ${item.status}
-        </schmancy-badge>
-      `
-    },
-    {
-      name: 'Created', 
-      key: 'createdAt', 
-      sortable: true,
-      // Sort by timestamp but display formatted date
-      value: (item) => new Date(item.createdAt).getTime(),
-      render: (item) => formatDate(item.createdAt)
-    },
-    {
-      name: 'Actions',
-      render: (item) => html`
-        <div class="flex space-x-2">
-          <schmancy-icon-button icon="edit" @click=${() => editItem(item)}></schmancy-icon-button>
-          <schmancy-icon-button icon="delete" @click=${() => deleteItem(item)}></schmancy-icon-button>
-        </div>
-      `
-    }
-  ]}
+  .columns=${columns}
+  .data=${items}
+  keyField="id"
+  cols="1fr 2fr 1fr"
   sortable
-  @sort=${(e) => console.log('Sort changed:', e.detail)}>
-</schmancy-table>
-
-// Selectable table
-<schmancy-table
-  selectable
-  @selection=${(e) => handleSelectedRows(e.detail.selected)}>
-  <thead>
-    <tr>
-      <th>
-        <schmancy-checkbox
-          .checked=${allSelected}
-          .indeterminate=${someSelected && !allSelected}
-          @change=${toggleAllSelection}>
-        </schmancy-checkbox>
-      </th>
-      <th>Name</th>
-      <th>Email</th>
-      <th>Role</th>
-    </tr>
-  </thead>
-  <tbody>
-    ${data.map(item => html`
-      <schmancy-row
-        .data=${item}
-        .selected=${selectedRows.includes(item.id)}>
-        <td>
-          <schmancy-checkbox
-            .checked=${selectedRows.includes(item.id)}
-            @change=${(e) => toggleRowSelection(item.id, e.target.checked)}>
-          </schmancy-checkbox>
-        </td>
-        <td>${item.name}</td>
-        <td>${item.email}</td>
-        <td>${item.role}</td>
-      </schmancy-row>
-    `)}
-  </tbody>
-</schmancy-table>
-
-// Loading state
-<schmancy-table loading>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Email</th>
-      <th>Role</th>
-    </tr>
-  </thead>
-  <tbody>
-    <!-- Content will be dimmed and a loading indicator shown -->
-  </tbody>
-</schmancy-table>
-
-// Pagination (with external component)
-<div>
-  <schmancy-table>
-    <!-- Table content -->
-  </schmancy-table>
-  
-  <div style="display: flex; justify-content: space-between; margin-top: 16px;">
-    <div>
-      Showing ${startIndex + 1} to ${Math.min(endIndex, totalItems)} of ${totalItems} items
-    </div>
-    
-    <div>
-      <schmancy-button
-        variant="tertiary"
-        size="small"
-        ?disabled=${page === 1}
-        @click=${() => setPage(page - 1)}>
-        Previous
-      </schmancy-button>
-      
-      <!-- Page numbers -->
-      ${generatePageNumbers(page, totalPages).map(p => html`
-        <schmancy-button
-          variant=${p === page ? "primary" : "tertiary"}
-          size="small"
-          @click=${() => setPage(p)}>
-          ${p}
-        </schmancy-button>
-      `)}
-      
-      <schmancy-button
-        variant="tertiary"
-        size="small"
-        ?disabled=${page === totalPages}
-        @click=${() => setPage(page + 1)}>
-        Next
-      </schmancy-button>
-    </div>
-  </div>
-</div>
-```
+  @click=${(e) => selectRow(e.detail)}>
+</schmancy-table>
+`
+```
+
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| columns | `TableColumn[]` | `[]` | Column definitions |
+| data | `T[]` | `[]` | Data array |
+| keyField | string | `'id'` | Unique key property on each item |
+| cols | string | `'1fr'` | CSS grid-template-columns |
+| sortable | boolean | `false` | Enable column sorting |
+
+## TableColumn Interface
+```typescript
+interface TableColumn<T> {
+  name: string             // Column header text
+  key?: keyof T            // Data property key
+  align?: 'left' | 'right' | 'center'
+  weight?: 'normal' | 'bold'
+  render?: (item: T) => TemplateResult | string | number
+  sortable?: boolean       // Per-column sort toggle
+  value?: (item: T) => any // Custom sort value function
+}
+```
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| click | `{ item: T, index: number }` | Row clicked |
+| sort-change | `{ column, direction }` | Sort state changed |
+
+## Examples
+```typescript
+const columns = [
+  { name: 'Name', key: 'name', sortable: true },
+  { name: 'Status', key: 'status', render: (item) =>
+    html`<schmancy-badge color=${item.active ? 'success' : 'neutral'}>
+      ${item.active ? 'Active' : 'Inactive'}
+    </schmancy-badge>` },
+  { name: 'Created', key: 'createdAt', sortable: true,
+    value: (item) => new Date(item.createdAt).getTime() },
+]
+```
+
+Uses `lit-virtualizer` for efficient rendering of large datasets. Header is sticky with glass surface.

package/ai/tabs.md

@@ -1,194 +1,49 @@
-# Schmancy Tabs - AI Reference
+# schmancy-tab-group / schmancy-tab
 
-## Components
+> Tab container with tab navigation and scroll-spy mode.
 
-### schmancy-tab-group
-Container component that manages tab navigation and content display. Supports two modes: "tabs" (traditional tab interface) and "scroll" (scrollspy navigation).
-
-### schmancy-tab
-Individual tab component that must be placed inside schmancy-tab-group. Contains the content for each tab.
-
-## API Reference
-
-### schmancy-tab-group
-
-```typescript
-// Properties
-mode: 'tabs' | 'scroll' = 'tabs' // Navigation mode
-rounded: boolean = true // Apply rounded styling to tab navigation
-activeTab: string // Currently active tab value
-
-// Events
-@tab-changed // Fired when active tab changes, detail contains the active tab value
-
-// Slots
-default // Place schmancy-tab components here
-```
-
-### schmancy-tab
-
-```typescript
-// Properties
-label: string // Tab label displayed in navigation
-value: string // Unique identifier for the tab
-active: boolean // Whether tab is currently active (managed by tab-group)
-
-// Slots
-default // Tab content
-```
-
-## Usage Examples
-
-### Basic Tabs Mode (Default)
-```html
-<schmancy-tab-group activeTab="tab1" @tab-changed=${(e) => console.log('Active tab:', e.detail)}>
-  <schmancy-tab value="tab1" label="Profile">
-    <div class="p-4">
-      <h3>Profile Content</h3>
-      <p>User profile information goes here.</p>
-    </div>
-  </schmancy-tab>
-  
-  <schmancy-tab value="tab2" label="Settings">
-    <div class="p-4">
-      <h3>Settings Content</h3>
-      <p>Application settings go here.</p>
-    </div>
-  </schmancy-tab>
-  
-  <schmancy-tab value="tab3" label="Security">
-    <div class="p-4">
-      <h3>Security Content</h3>
-      <p>Security options go here.</p>
-    </div>
-  </schmancy-tab>
-</schmancy-tab-group>
-```
-
-### Scroll Mode (Scrollspy)
+## Usage
 ```html
-<!-- Navigation stays sticky at top, highlights active section while scrolling -->
-<schmancy-tab-group mode="scroll" activeTab="intro">
-  <schmancy-tab value="intro" label="Introduction">
-    <section class="min-h-screen p-8">
-      <h2>Introduction</h2>
-      <p>Long content that requires scrolling...</p>
-    </section>
+<schmancy-tab-group activeTab="overview">
+  <schmancy-tab label="Overview" value="overview">
+    <p>Overview content</p>
   </schmancy-tab>
-  
-  <schmancy-tab value="features" label="Features">
-    <section class="min-h-screen p-8">
-      <h2>Features</h2>
-      <p>Feature descriptions...</p>
-    </section>
+  <schmancy-tab label="Details" value="details">
+    <p>Details content</p>
   </schmancy-tab>
-  
-  <schmancy-tab value="pricing" label="Pricing">
-    <section class="min-h-screen p-8">
-      <h2>Pricing</h2>
-      <p>Pricing information...</p>
-    </section>
-  </schmancy-tab>
-</schmancy-tab-group>
-```
-
-### Without Rounded Navigation
-```html
-<schmancy-tab-group rounded=${false} activeTab="tab1">
-  <schmancy-tab value="tab1" label="Tab 1">Content 1</schmancy-tab>
-  <schmancy-tab value="tab2" label="Tab 2">Content 2</schmancy-tab>
 </schmancy-tab-group>
 ```
 
-### Programmatic Tab Selection
-```javascript
-// In component
-@query('schmancy-tab-group') tabGroup: any;
-
-selectTab(tabValue: string) {
-  this.tabGroup.activeTab = tabValue;
-}
-
-handleTabChange(e: CustomEvent) {
-  console.log('Tab changed to:', e.detail);
-  // Update application state, router, etc.
-}
-
-// In template
-html`
-  <schmancy-tab-group 
-    activeTab=${this.currentTab} 
-    @tab-changed=${this.handleTabChange}
-  >
-    <!-- tabs -->
-  </schmancy-tab-group>
-`
-```
-
-### Dynamic Tabs from Data
-```javascript
-const tabs = [
-  { value: 'overview', label: 'Overview', content: 'Overview content...' },
-  { value: 'details', label: 'Details', content: 'Detailed information...' },
-  { value: 'history', label: 'History', content: 'Historical data...' }
-];
+## Properties (schmancy-tab-group)
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| activeTab | string | first tab | Currently active tab value |
+| mode | `'tabs'\|'scroll'` | `'tabs'` | Display mode (tabs or scroll-spy) |
+| rounded | boolean | `true` | Rounded tab bar |
 
-html`
-  <schmancy-tab-group activeTab=${tabs[0].value}>
-    ${tabs.map(tab => html`
-      <schmancy-tab value=${tab.value} label=${tab.label}>
-        <div class="p-4">${tab.content}</div>
-      </schmancy-tab>
-    `)}
-  </schmancy-tab-group>
-`
-```
-
-## Important Notes
-
-1. **Tab Structure**: Each schmancy-tab must have a unique `value` and a `label` for display
-2. **Active Tab**: The `activeTab` property on tab-group controls which tab is visible
-3. **Scroll Mode**: In scroll mode, the navigation becomes sticky and highlights based on scroll position
-4. **Event Handling**: Listen to `@tab-changed` event to react to tab changes
-5. **Styling**: The tab navigation uses theme colors and can be rounded or rectangular
+## Properties (schmancy-tab)
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| label | string | - | Tab label text |
+| value | string | - | Unique tab identifier |
+| active | boolean | `false` | Whether this tab is active |
 
-## Common Patterns
-
-### Tabs with Icons (using label slot)
-```html
-<schmancy-tab-group activeTab="home">
-  <schmancy-tab value="home" label="🏠 Home">
-    Home content
-  </schmancy-tab>
-  <schmancy-tab value="settings" label="⚙️ Settings">
-    Settings content
-  </schmancy-tab>
-</schmancy-tab-group>
-```
+## Events (schmancy-tab-group)
+| Event | Detail | Description |
+|-------|--------|-------------|
+| tab-changed | string | Active tab value when changed |
 
-### Full Page Scroll Navigation
+## Examples
 ```html
+<!-- Scroll-spy mode (tabs follow scroll position) -->
 <schmancy-tab-group mode="scroll">
-  <schmancy-tab value="section1" label="Section 1">
-    <div style="height: 100vh;">Full height section 1</div>
+  <schmancy-tab label="Section 1" value="s1">
+    <div style="height: 500px">Long content</div>
   </schmancy-tab>
-  <schmancy-tab value="section2" label="Section 2">
-    <div style="height: 100vh;">Full height section 2</div>
+  <schmancy-tab label="Section 2" value="s2">
+    <div style="height: 500px">More content</div>
   </schmancy-tab>
 </schmancy-tab-group>
 ```
 
-### Integration with Router
-```javascript
-// React to route changes
-connectedCallback() {
-  super.connectedCallback();
-  // Set active tab based on route
-  this.activeTab = this.getTabFromRoute();
-}
-
-handleTabChange(e: CustomEvent) {
-  // Update route when tab changes
-  this.updateRoute(e.detail);
-}
-```
+In `tabs` mode, only the active tab renders content. In `scroll` mode, all tabs render and the nav highlights the visible section.