@mhmo91/schmancy 0.2.193 → 0.2.195

package/ai/input.md

@@ -0,0 +1,167 @@
+# Schmancy Input - AI Reference
+
+```js
+// Text Input
+<schmancy-input
+  name="field-name"
+  label="Field Label"
+  value="initial value"
+  type="text|password|email|number|tel|url|search|date"
+  placeholder="Placeholder text"
+  required?
+  disabled?
+  readonly?
+  error="Error message"
+  success?
+  size="small|medium|large"
+  @input=${handleInput}
+  @change=${handleChange}
+  @focus=${handleFocus}
+  @blur=${handleBlur}>
+</schmancy-input>
+
+// Input v2 (enhanced version with formatting and validation)
+<schmancy-input-v2
+  name="field-name"
+  label="Field Label"
+  value="initial value"
+  type="text|password|email|number|tel|url|search|date"
+  placeholder="Placeholder text"
+  required?
+  disabled?
+  readonly?
+  error="Error message"
+  success?
+  size="small|medium|large"
+  .format=${(value) => formattedValue}
+  .parse=${(displayValue) => parsedValue}
+  .validate=${(value) => errorMessage}
+  @input=${handleInput}
+  @change=${handleChange}>
+</schmancy-input-v2>
+
+// Input Methods
+input.focus() -> void
+input.blur() -> void
+input.validate() -> boolean
+input.setCustomValidity(message) -> void
+input.select() -> void
+
+// Events
+@input // { target: { value: string } }
+@change // { target: { value: string } }
+@focus // { target: HTMLElement }
+@blur // { target: HTMLElement }
+
+// Examples
+// 1. Basic input with validation
+<schmancy-input 
+  name="email"
+  label="Email Address"
+  type="email"
+  required
+  placeholder="Enter your email"
+  @change=${(e) => console.log(e.target.value)}>
+</schmancy-input>
+
+// 2. Input with currency formatting
+<schmancy-input-v2
+  name="amount"
+  label="Amount"
+  type="number"
+  .format=${(value) => `$${value.toFixed(2)}`}
+  .parse=${(value) => parseFloat(value.replace('$', ''))}
+  .validate=${(value) => value < 0 ? 'Amount must be positive' : ''}>
+</schmancy-input-v2>
+
+// 3. Input with prefix/suffix
+<schmancy-input label="Price">
+  <span slot="prefix">$</span>
+  <span slot="suffix">.00</span>
+</schmancy-input>
+
+// 4. Input with icons
+<schmancy-input label="Search">
+  <schmancy-icon slot="prefix" icon="search"></schmancy-icon>
+  <schmancy-icon slot="suffix" icon="close" @click=${clearInput}></schmancy-icon>
+</schmancy-input>
+```
+
+## Related Components
+- **[Form](./form.md)**: Container for input and other form components
+- **[Textarea](./textarea.md)**: Multi-line text input fields
+- **[Icons](./icons.md)**: Can be used within input slots
+- **[Autocomplete](./autocomplete.md)**: Extended input with suggestions
+
+## Technical Details
+
+### Slots
+```html
+prefix: Content displayed before the input field
+suffix: Content displayed after the input field
+```
+
+### CSS Custom Properties
+```css
+--schmancy-input-height: /* Controls the input height */
+--schmancy-input-border-color: /* Controls the border color */
+--schmancy-input-focus-color: /* Controls the focus color */
+--schmancy-input-error-color: /* Controls the error state color */
+--schmancy-input-success-color: /* Controls the success state color */
+--schmancy-input-font-size: /* Controls the font size */
+```
+
+### Input v2 Interfaces
+```typescript
+interface InputValidator {
+  (value: any): string | null;
+}
+
+interface InputFormatter {
+  (value: any): string;
+}
+
+interface InputParser {
+  (displayValue: string): any;
+}
+```
+
+### Common Use Cases
+
+1. **Password input with toggle visibility**
+   ```html
+   <schmancy-input
+     type="password"
+     label="Password"
+     name="password">
+     <schmancy-icon 
+       slot="suffix" 
+       icon="eye" 
+       @click=${togglePasswordVisibility}>
+     </schmancy-icon>
+   </schmancy-input>
+   ```
+
+2. **Validating email format**
+   ```html
+   <schmancy-input-v2
+     type="email"
+     label="Email"
+     name="email"
+     .validate=${value => {
+       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+       return emailRegex.test(value) ? '' : 'Please enter a valid email';
+     }}>
+   </schmancy-input-v2>
+   ```
+
+3. **Input with character count**
+   ```html
+   <schmancy-input
+     label="Message"
+     name="message"
+     maxlength="100"
+     @input=${e => updateCharCount(e.target.value.length)}>
+     <span slot="suffix" id="charCount">0/100</span>
+   </schmancy-input>
+   ```

package/ai/layout.md

@@ -0,0 +1,166 @@
+# Schmancy Layout - AI Reference
+
+```js
+// Grid Layout
+<schmancy-grid
+  columns="3"                    // Number of columns or template
+  rows="auto"                    // Number of rows or template
+  gap="16px"                     // Gap between items
+  column-gap="16px"              // Column-specific gap
+  row-gap="16px"                 // Row-specific gap
+  justify-items="start|center|end|stretch"
+  align-items="start|center|end|stretch"
+  justify-content="start|center|end|space-between|space-around|space-evenly"
+  align-content="start|center|end|space-between|space-around|space-evenly">
+  
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</schmancy-grid>
+
+// Advanced grid with template
+<schmancy-grid
+  columns="repeat(12, 1fr)"
+  rows="auto auto 1fr"
+  template-areas="
+    'header header header header'
+    'sidebar content content content'
+    'footer footer footer footer'
+  ">
+  <div style="grid-area: header">Header</div>
+  <div style="grid-area: sidebar">Sidebar</div>
+  <div style="grid-area: content">Content</div>
+  <div style="grid-area: footer">Footer</div>
+</schmancy-grid>
+
+// Flex Layout
+<schmancy-flex
+  direction="row|column|row-reverse|column-reverse"
+  wrap="nowrap|wrap|wrap-reverse"
+  justify-content="start|center|end|space-between|space-around|space-evenly"
+  align-items="start|center|end|stretch|baseline"
+  align-content="start|center|end|space-between|space-around|space-evenly"
+  gap="16px"                     // Gap between items
+  column-gap="16px"              // Column-specific gap
+  row-gap="16px">                // Row-specific gap
+  
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div style="flex: 1">Flexible Item</div>
+</schmancy-flex>
+
+// Responsive layouts (using attributes)
+<schmancy-grid
+  columns="1"
+  columns-md="2"
+  columns-lg="3"
+  columns-xl="4"
+  gap="8px"
+  gap-md="16px"
+  gap-lg="24px">
+  
+  <!-- Content -->
+</schmancy-grid>
+
+<schmancy-flex
+  direction="column"
+  direction-md="row"
+  align-items="center"
+  justify-content-md="space-between">
+  
+  <!-- Content -->
+</schmancy-flex>
+
+// Scroll Container
+<schmancy-scroll
+  direction="vertical|horizontal|both"
+  scrollbar="auto|always|hover|none">
+  
+  <!-- Scrollable content -->
+</schmancy-scroll>
+
+// Layout v2 Components (enhanced versions)
+<schmancy-flex-v2
+  display="flex|inline-flex"
+  direction="row|column"
+  wrap="nowrap|wrap|wrap-reverse"
+  justify="flex-start|flex-end|center|space-between|space-around|space-evenly"
+  items="flex-start|flex-end|center|stretch|baseline"
+  content="flex-start|flex-end|center|space-between|space-around|space-evenly"
+  gap="none|xs|sm|md|lg|xl">
+  
+  <!-- Content -->
+</schmancy-flex-v2>
+
+<schmancy-grid-v2
+  display="grid|inline-grid"
+  template-columns="1fr 1fr|repeat(3, 1fr)"
+  template-rows="auto|1fr auto"
+  template-areas="'header header' 'sidebar content' 'footer footer'"
+  gap="none|xs|sm|md|lg|xl"
+  justify-content="start|end|center|stretch|space-around|space-between|space-evenly"
+  align-content="start|end|center|stretch|space-around|space-between|space-evenly"
+  justify-items="start|end|center|stretch"
+  align-items="start|end|center|stretch">
+  
+  <!-- Content -->
+</schmancy-grid-v2>
+
+// Examples
+// Responsive grid layout
+<schmancy-grid 
+  columns="1" 
+  columns-md="2" 
+  columns-lg="4" 
+  gap="16px">
+  <div>Card 1</div>
+  <div>Card 2</div>
+  <div>Card 3</div>
+  <div>Card 4</div>
+</schmancy-grid>
+
+// Flex layout for a form
+<schmancy-flex
+  direction="column"
+  gap="16px">
+  <h2>Contact Form</h2>
+  <schmancy-input label="Name"></schmancy-input>
+  <schmancy-input label="Email"></schmancy-input>
+  <schmancy-textarea label="Message"></schmancy-textarea>
+  
+  <schmancy-flex
+    direction="row"
+    justify-content="end"
+    gap="8px">
+    <schmancy-button kind="secondary">Cancel</schmancy-button>
+    <schmancy-button kind="primary">Submit</schmancy-button>
+  </schmancy-flex>
+</schmancy-flex>
+
+// App layout with header, sidebar and content
+<schmancy-grid
+  style="height: 100vh"
+  template-areas="
+    'header header'
+    'sidebar content'
+  "
+  template-rows="64px 1fr"
+  template-columns="250px 1fr">
+  
+  <div style="grid-area: header">
+    <schmancy-appbar>App Title</schmancy-appbar>
+  </div>
+  
+  <div style="grid-area: sidebar">
+    <schmancy-list>
+      <schmancy-list-item>Dashboard</schmancy-list-item>
+      <schmancy-list-item>Settings</schmancy-list-item>
+      <schmancy-list-item>Profile</schmancy-list-item>
+    </schmancy-list>
+  </div>
+  
+  <schmancy-scroll style="grid-area: content">
+    <!-- Main content -->
+  </schmancy-scroll>
+</schmancy-grid>
+```

package/ai/list.md

@@ -0,0 +1,145 @@
+# Schmancy List - AI Reference
+
+```js
+// Basic List
+<schmancy-list>
+  <schmancy-list-item>Item 1</schmancy-list-item>
+  <schmancy-list-item>Item 2</schmancy-list-item>
+  <schmancy-list-item>Item 3</schmancy-list-item>
+</schmancy-list>
+
+// List Options
+<schmancy-list
+  size="small|medium|large"
+  dividers?                // Show dividers between items
+  interactive?             // Enable hover and focus states
+  dense?                   // More compact appearance
+  @select=${handleSelect}>
+  <!-- List items -->
+</schmancy-list>
+
+// List Item Options
+<schmancy-list-item
+  value="item-value"       // Value for selection
+  disabled?                // Disabled state
+  selected?                // Selected state
+  compact?                 // Compact appearance
+  clickable?               // Makes item clickable (implied if interactive list)
+  @click=${handleClick}>
+  
+  <!-- Content structure -->
+  <div slot="start">
+    <schmancy-icon icon="home"></schmancy-icon>
+  </div>
+  
+  <div slot="main">
+    <div>Primary Text</div>
+    <div>Secondary Text</div>
+  </div>
+  
+  <div slot="end">
+    <schmancy-badge>42</schmancy-badge>
+  </div>
+</schmancy-list-item>
+
+// List Events
+@select // Fires when item is selected, with { detail: { value, item } }
+@action // Fires when action is triggered, with { detail: { action, value, item } }
+
+// List Context
+// For creating controlled lists and handling selection
+import { ListContext } from 'schmancy/list';
+
+const listContext = new ListContext({
+  selectable: true,           // Enable selection
+  multiple: false,            // Allow multiple selection
+  selected: [],               // Initial selected values
+  onSelect: handleSelect      // Selection handler
+});
+
+// Examples
+// Simple navigation list
+<schmancy-list interactive>
+  <schmancy-list-item>
+    <schmancy-icon slot="start" icon="home"></schmancy-icon>
+    Dashboard
+  </schmancy-list-item>
+  <schmancy-list-item>
+    <schmancy-icon slot="start" icon="settings"></schmancy-icon>
+    Settings
+  </schmancy-list-item>
+  <schmancy-list-item>
+    <schmancy-icon slot="start" icon="person"></schmancy-icon>
+    Profile
+  </schmancy-list-item>
+</schmancy-list>
+
+// Selectable list
+<schmancy-list 
+  interactive 
+  @select=${(e) => console.log('Selected:', e.detail.value)}>
+  
+  <schmancy-list-item value="item1">
+    <div slot="main">
+      <div>Item One</div>
+      <div>Description for item one</div>
+    </div>
+  </schmancy-list-item>
+  
+  <schmancy-list-item value="item2">
+    <div slot="main">
+      <div>Item Two</div>
+      <div>Description for item two</div>
+    </div>
+    <div slot="end">
+      <schmancy-badge>New</schmancy-badge>
+    </div>
+  </schmancy-list-item>
+  
+  <schmancy-list-item value="item3" disabled>
+    <div slot="main">
+      <div>Item Three (Disabled)</div>
+      <div>Cannot be selected</div>
+    </div>
+  </schmancy-list-item>
+</schmancy-list>
+
+// Dynamic list from data
+<schmancy-list>
+  ${items.map(item => html`
+    <schmancy-list-item value=${item.id}>
+      ${item.icon ? html`
+        <schmancy-icon slot="start" icon=${item.icon}></schmancy-icon>
+      ` : ''}
+      
+      <div slot="main">
+        <div>${item.primary}</div>
+        ${item.secondary ? html`<div>${item.secondary}</div>` : ''}
+      </div>
+      
+      ${item.badge ? html`
+        <div slot="end">
+          <schmancy-badge>${item.badge}</schmancy-badge>
+        </div>
+      ` : ''}
+    </schmancy-list-item>
+  `)}
+</schmancy-list>
+
+// List with context (controlled selection)
+const selectedItems = ['item2'];
+
+<schmancy-list .context=${new ListContext({
+  selectable: true,
+  multiple: true,
+  selected: selectedItems,
+  onSelect: (values) => {
+    selectedItems = values;
+    console.log('Selected items:', values);
+  }
+})}>
+  <schmancy-list-item value="item1">Item 1</schmancy-list-item>
+  <schmancy-list-item value="item2">Item 2</schmancy-list-item>
+  <schmancy-list-item value="item3">Item 3</schmancy-list-item>
+</schmancy-list>
+```

package/ai/menu.md

@@ -0,0 +1,217 @@
+# Schmancy Menu - AI Reference
+
+```js
+// Basic Menu
+<schmancy-menu @select=${handleSelect}>
+  <schmancy-menu-item value="item1">Item 1</schmancy-menu-item>
+  <schmancy-menu-item value="item2">Item 2</schmancy-menu-item>
+  <schmancy-menu-item value="item3" disabled>Item 3</schmancy-menu-item>
+  <schmancy-divider></schmancy-divider>
+  <schmancy-menu-item value="item4">Item 4</schmancy-menu-item>
+</schmancy-menu>
+
+// Menu with icons
+<schmancy-menu>
+  <schmancy-menu-item value="copy">
+    <schmancy-icon slot="prefix" icon="copy"></schmancy-icon>
+    Copy
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="cut">
+    <schmancy-icon slot="prefix" icon="scissors"></schmancy-icon>
+    Cut
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="paste">
+    <schmancy-icon slot="prefix" icon="clipboard"></schmancy-icon>
+    Paste
+  </schmancy-menu-item>
+</schmancy-menu>
+
+// Menu with checkable items
+<schmancy-menu multiple>
+  <schmancy-menu-item value="bold" checkable>
+    <schmancy-icon slot="prefix" icon="bold"></schmancy-icon>
+    Bold
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="italic" checkable>
+    <schmancy-icon slot="prefix" icon="italic"></schmancy-icon>
+    Italic
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="underline" checkable>
+    <schmancy-icon slot="prefix" icon="underline"></schmancy-icon>
+    Underline
+  </schmancy-menu-item>
+</schmancy-menu>
+
+// Menu in a dropdown
+<schmancy-dropdown>
+  <schmancy-button slot="trigger">
+    Options
+  </schmancy-button>
+  
+  <schmancy-menu slot="content" @select=${handleMenuSelect}>
+    <schmancy-menu-item value="edit">Edit</schmancy-menu-item>
+    <schmancy-menu-item value="duplicate">Duplicate</schmancy-menu-item>
+    <schmancy-menu-item value="archive">Archive</schmancy-menu-item>
+    <schmancy-divider></schmancy-divider>
+    <schmancy-menu-item value="delete" variant="danger">Delete</schmancy-menu-item>
+  </schmancy-menu>
+</schmancy-dropdown>
+
+// Menu Properties
+multiple: boolean         // Allow selecting multiple items
+value: string|string[]    // Selected item value(s)
+size: string              // Size: "small", "medium", "large"
+dense: boolean            // More compact appearance
+
+// Menu Item Properties
+value: string             // Value for selection
+disabled: boolean         // Disable the item
+selected: boolean         // Whether the item is selected
+checkable: boolean        // Show checkbox/radio indicator
+checked: boolean          // Checked state for checkable items
+variant: string           // Variant: "default", "primary", "danger", etc.
+
+// Menu Events
+@select   // Fires when item is selected, with { detail: { value, item } }
+@change   // Fires when selection changes, with { detail: { value } }
+
+// Examples
+// Context menu
+<schmancy-dropdown>
+  <div 
+    slot="trigger"
+    @contextmenu=${(e) => {
+      e.preventDefault();
+      dropdown.open({ x: e.clientX, y: e.clientY });
+    }}
+    style="width: 300px; height: 200px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center;">
+    Right-click me
+  </div>
+  
+  <schmancy-menu slot="content" @select=${handleContextMenuSelect}>
+    <schmancy-menu-item value="view">
+      <schmancy-icon slot="prefix" icon="eye"></schmancy-icon>
+      View
+    </schmancy-menu-item>
+    
+    <schmancy-menu-item value="edit">
+      <schmancy-icon slot="prefix" icon="edit"></schmancy-icon>
+      Edit
+    </schmancy-menu-item>
+    
+    <schmancy-menu-item value="share">
+      <schmancy-icon slot="prefix" icon="share"></schmancy-icon>
+      Share
+      <schmancy-icon slot="suffix" icon="external-link"></schmancy-icon>
+    </schmancy-menu-item>
+    
+    <schmancy-divider></schmancy-divider>
+    
+    <schmancy-menu-item value="delete" variant="danger">
+      <schmancy-icon slot="prefix" icon="trash"></schmancy-icon>
+      Delete
+    </schmancy-menu-item>
+  </schmancy-menu>
+</schmancy-dropdown>
+
+// Multi-select menu
+<schmancy-menu
+  multiple
+  .value=${selectedOptions}
+  @change=${(e) => selectedOptions = e.detail.value}>
+  
+  <schmancy-menu-item value="wifi" checkable>
+    <schmancy-icon slot="prefix" icon="wifi"></schmancy-icon>
+    Wi-Fi
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="bluetooth" checkable>
+    <schmancy-icon slot="prefix" icon="bluetooth"></schmancy-icon>
+    Bluetooth
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="airplane" checkable>
+    <schmancy-icon slot="prefix" icon="airplane"></schmancy-icon>
+    Airplane Mode
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="location" checkable>
+    <schmancy-icon slot="prefix" icon="map-pin"></schmancy-icon>
+    Location
+  </schmancy-menu-item>
+</schmancy-menu>
+
+// Menu with keyboard shortcuts
+<schmancy-menu>
+  <schmancy-menu-item value="new">
+    <schmancy-icon slot="prefix" icon="file"></schmancy-icon>
+    New File
+    <span slot="suffix">Ctrl+N</span>
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="open">
+    <schmancy-icon slot="prefix" icon="folder-open"></schmancy-icon>
+    Open...
+    <span slot="suffix">Ctrl+O</span>
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="save">
+    <schmancy-icon slot="prefix" icon="save"></schmancy-icon>
+    Save
+    <span slot="suffix">Ctrl+S</span>
+  </schmancy-menu-item>
+  
+  <schmancy-menu-item value="saveAs">
+    <schmancy-icon slot="prefix" icon="save"></schmancy-icon>
+    Save As...
+    <span slot="suffix">Ctrl+Shift+S</span>
+  </schmancy-menu-item>
+  
+  <schmancy-divider></schmancy-divider>
+  
+  <schmancy-menu-item value="exit">
+    <schmancy-icon slot="prefix" icon="x"></schmancy-icon>
+    Exit
+    <span slot="suffix">Alt+F4</span>
+  </schmancy-menu-item>
+</schmancy-menu>
+
+// Menu with nested items (using dropdown)
+<schmancy-menu>
+  <schmancy-menu-item value="file">File</schmancy-menu-item>
+  <schmancy-menu-item value="edit">Edit</schmancy-menu-item>
+  <schmancy-menu-item value="view">View</schmancy-menu-item>
+  
+  <schmancy-dropdown position="right-start">
+    <schmancy-menu-item slot="trigger" value="insert">
+      Insert
+      <schmancy-icon slot="suffix" icon="chevron-right"></schmancy-icon>
+    </schmancy-menu-item>
+    
+    <schmancy-menu slot="content">
+      <schmancy-menu-item value="insert-image">
+        <schmancy-icon slot="prefix" icon="image"></schmancy-icon>
+        Image
+      </schmancy-menu-item>
+      
+      <schmancy-menu-item value="insert-table">
+        <schmancy-icon slot="prefix" icon="grid"></schmancy-icon>
+        Table
+      </schmancy-menu-item>
+      
+      <schmancy-menu-item value="insert-chart">
+        <schmancy-icon slot="prefix" icon="bar-chart"></schmancy-icon>
+        Chart
+      </schmancy-menu-item>
+    </schmancy-menu>
+  </schmancy-dropdown>
+  
+  <schmancy-menu-item value="format">Format</schmancy-menu-item>
+  <schmancy-menu-item value="tools">Tools</schmancy-menu-item>
+  <schmancy-menu-item value="help">Help</schmancy-menu-item>
+</schmancy-menu>
+```