@mhmo91/schmancy 0.2.192 → 0.2.194

package/dist/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/dist/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>
+```

package/dist/ai/notification.md

@@ -0,0 +1,93 @@
+# Schmancy Notification - AI Reference
+
+```js
+// Notification Service API
+import { $notification } from 'schmancy';
+
+// Display notification methods
+$notification.info(message, options?) -> NotificationRef
+$notification.success(message, options?) -> NotificationRef
+$notification.warning(message, options?) -> NotificationRef
+$notification.error(message, options?) -> NotificationRef
+
+// Custom notification
+$notification.show({
+  message: string,
+  type: 'info'|'success'|'warning'|'error',
+  title?: string,
+  duration?: number, // milliseconds, default 5000
+  closable?: boolean, // default true
+  actions?: [{
+    label: string,
+    onClick: Function
+  }],
+  position?: 'top-right'|'top-left'|'bottom-right'|'bottom-left'|'top'|'bottom',
+  onClose?: Function
+}) -> NotificationRef
+
+// NotificationRef object
+{
+  close(): void,  // Programmatically close the notification
+  id: string      // Unique ID of the notification
+}
+
+// Notification Container Component
+<schmancy-notification-container
+  position="top-right|top-left|bottom-right|bottom-left|top|bottom"
+  max-count="5">
+</schmancy-notification-container>
+
+// Notification Outlet (place notifications in specific locations)
+<schmancy-notification-outlet name="custom-location"></schmancy-notification-outlet>
+// Use with:
+$notification.show({ message: "Alert", outlet: "custom-location" });
+
+// Notification Audio
+$notification.setAudio(type, audioUrl) // Configure audio for notification types
+
+// Examples
+// Basic usage
+$notification.success("Operation completed successfully");
+
+// With options
+$notification.error("Failed to save changes", {
+  title: "Error",
+  duration: 10000,
+  closable: true
+});
+
+// With actions
+$notification.info("New update available", {
+  actions: [
+    {
+      label: "Update Now",
+      onClick: () => performUpdate()
+    },
+    {
+      label: "Remind Later",
+      onClick: () => scheduleReminder()
+    }
+  ]
+});
+
+// Custom notification
+$notification.show({
+  type: "info",
+  message: "Custom message with HTML content",
+  title: "Information",
+  duration: 0, // won't auto-close
+  position: "bottom",
+  actions: [{
+    label: "Dismiss",
+    onClick: (ref) => ref.close()
+  }]
+});
+
+// With HTML content (using lit-html)
+$notification.info(html`
+  <div>
+    <strong>Hello</strong>
+    <p>This is a notification with <em>HTML</em> content</p>
+  </div>
+`);
+```

package/dist/ai/radio-group.md

@@ -0,0 +1,176 @@
+# Schmancy Radio Group - AI Reference
+
+```js
+// Basic Radio Group
+<schmancy-radio-group
+  name="radio-group-name"
+  label="Group Label"
+  value="selected-value"
+  required?
+  disabled?
+  error="Error message"
+  @change=${handleChange}>
+  
+  <schmancy-radio-button
+    value="option1"
+    label="Option 1">
+  </schmancy-radio-button>
+  
+  <schmancy-radio-button
+    value="option2"
+    label="Option 2">
+  </schmancy-radio-button>
+  
+  <schmancy-radio-button
+    value="option3"
+    label="Option 3"
+    disabled>
+  </schmancy-radio-button>
+</schmancy-radio-group>
+
+// Radio Group with helper text
+<schmancy-radio-group
+  label="Select payment method"
+  helper-text="Choose your preferred payment option"
+  value="credit">
+  
+  <schmancy-radio-button
+    value="credit"
+    label="Credit Card">
+  </schmancy-radio-button>
+  
+  <schmancy-radio-button
+    value="paypal"
+    label="PayPal">
+  </schmancy-radio-button>
+</schmancy-radio-group>
+
+// Radio Button with custom content
+<schmancy-radio-button value="custom" label="Custom Option">
+  <div slot="description">
+    Additional description text that appears below the label
+  </div>
+</schmancy-radio-button>
+
+// Radio Group Methods
+radioGroup.focus() -> void       // Focus the first/selected radio button
+radioGroup.validate() -> boolean // Validate and show error if invalid
+radioGroup.reset() -> void       // Reset to initial value
+
+// Radio Group Properties
+value: string        // Currently selected value
+name: string         // Name attribute for the radio buttons
+disabled: boolean    // Whether the entire group is disabled
+required: boolean    // Whether a selection is required
+error: string        // Error message to display
+
+// Radio Button Properties
+value: string        // Value of this option
+label: string        // Label text
+disabled: boolean    // Whether this option is disabled
+checked: boolean     // Whether this option is selected (set by group)
+
+// Radio Group Events
+@change  // Fires when selection changes, with { detail: { value } }
+@input   // Fires during interaction
+@focus   // Fires when group gains focus
+@blur    // Fires when group loses focus
+
+// Examples
+// Basic usage
+<schmancy-radio-group
+  name="flavor"
+  label="Select flavor"
+  value="vanilla"
+  @change=${(e) => console.log('Selected:', e.detail.value)}>
+  
+  <schmancy-radio-button
+    value="vanilla"
+    label="Vanilla">
+  </schmancy-radio-button>
+  
+  <schmancy-radio-button
+    value="chocolate"
+    label="Chocolate">
+  </schmancy-radio-button>
+  
+  <schmancy-radio-button
+    value="strawberry"
+    label="Strawberry">
+  </schmancy-radio-button>
+</schmancy-radio-group>
+
+// Radio buttons with descriptions
+<schmancy-radio-group
+  name="plan"
+  label="Select subscription plan"
+  value="basic">
+  
+  <schmancy-radio-button
+    value="basic"
+    label="Basic Plan">
+    <div slot="description">
+      $9.99/month - Access to basic features
+    </div>
+  </schmancy-radio-button>
+  
+  <schmancy-radio-button
+    value="pro"
+    label="Pro Plan">
+    <div slot="description">
+      $19.99/month - Access to all features
+    </div>
+  </schmancy-radio-button>
+  
+  <schmancy-radio-button
+    value="enterprise"
+    label="Enterprise Plan">
+    <div slot="description">
+      $49.99/month - Priority support and advanced features
+    </div>
+  </schmancy-radio-button>
+</schmancy-radio-group>
+
+// Usage in a form
+<schmancy-form @submit=${handleSubmit}>
+  <schmancy-input name="name" label="Name" required></schmancy-input>
+  
+  <schmancy-radio-group
+    name="gender"
+    label="Gender"
+    required>
+    
+    <schmancy-radio-button
+      value="male"
+      label="Male">
+    </schmancy-radio-button>
+    
+    <schmancy-radio-button
+      value="female"
+      label="Female">
+    </schmancy-radio-button>
+    
+    <schmancy-radio-button
+      value="other"
+      label="Other">
+    </schmancy-radio-button>
+  </schmancy-radio-group>
+  
+  <schmancy-button type="submit">Submit</schmancy-button>
+</schmancy-form>
+
+// Dynamic radio options from data
+<schmancy-radio-group
+  name="country"
+  label="Select country"
+  value=${selectedCountry}
+  @change=${(e) => selectedCountry = e.detail.value}>
+  
+  ${countries.map(country => html`
+    <schmancy-radio-button
+      value=${country.code}
+      label=${country.name}>
+    </schmancy-radio-button>
+  `)}
+</schmancy-radio-group>
+```