@mhmo91/schmancy 0.2.193 → 0.2.195

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>
+```

package/dist/ai/select.md

@@ -0,0 +1,174 @@
+# Schmancy Select - AI Reference
+
+```js
+// Basic Select
+<schmancy-select
+  name="select-name"
+  label="Select Label"
+  value="selected-value"
+  placeholder="Choose an option"
+  required?
+  disabled?
+  error="Error message"
+  @change=${handleChange}>
+  
+  <schmancy-option value="option1">Option 1</schmancy-option>
+  <schmancy-option value="option2">Option 2</schmancy-option>
+  <schmancy-option value="option3" disabled>Option 3</schmancy-option>
+</schmancy-select>
+
+// Select with helper text
+<schmancy-select
+  label="Country"
+  helper-text="Select your country of residence"
+  required>
+  <!-- Options -->
+</schmancy-select>
+
+// Multiple select
+<schmancy-select
+  multiple
+  label="Select Skills"
+  .value=${['html', 'css']}
+  @change=${(e) => console.log('Selected:', e.detail.value)}>
+  
+  <schmancy-option value="html">HTML</schmancy-option>
+  <schmancy-option value="css">CSS</schmancy-option>
+  <schmancy-option value="js">JavaScript</schmancy-option>
+  <schmancy-option value="ts">TypeScript</schmancy-option>
+</schmancy-select>
+
+// Select with option groups
+<schmancy-select label="Programming Language">
+  <optgroup label="Frontend">
+    <schmancy-option value="html">HTML</schmancy-option>
+    <schmancy-option value="css">CSS</schmancy-option>
+    <schmancy-option value="js">JavaScript</schmancy-option>
+  </optgroup>
+  
+  <optgroup label="Backend">
+    <schmancy-option value="node">Node.js</schmancy-option>
+    <schmancy-option value="python">Python</schmancy-option>
+    <schmancy-option value="java">Java</schmancy-option>
+  </optgroup>
+</schmancy-select>
+
+// Select with search
+<schmancy-select
+  searchable
+  label="Search Countries"
+  placeholder="Type to search...">
+  <!-- Many options -->
+</schmancy-select>
+
+// Select Methods
+select.focus() -> void          // Focus the select
+select.blur() -> void           // Remove focus
+select.open() -> void           // Open the dropdown
+select.close() -> void          // Close the dropdown
+select.validate() -> boolean    // Validate and show error if invalid
+select.reset() -> void          // Reset to initial value
+
+// Select Properties
+value: string | string[]   // Currently selected value(s)
+name: string               // The name attribute
+label: string              // Label text
+placeholder: string        // Placeholder text
+multiple: boolean          // Whether multiple selection is allowed
+disabled: boolean          // Whether the select is disabled
+required: boolean          // Whether a selection is required
+error: string              // Error message to display
+searchable: boolean        // Whether to allow searching within options
+open: boolean              // Whether the dropdown is open
+
+// Option Properties
+value: string              // Value of this option
+disabled: boolean          // Whether this option is disabled
+selected: boolean          // Whether this option is selected
+
+// Select Events
+@change  // Fires when selection changes, with { detail: { value } }
+@input   // Fires during interaction
+@focus   // Fires when select gains focus
+@blur    // Fires when select loses focus
+@open    // Fires when dropdown opens
+@close   // Fires when dropdown closes
+@search  // Fires during search with { detail: { query } }
+
+// Examples
+// Basic usage
+<schmancy-select
+  name="category"
+  label="Category"
+  value="electronics"
+  @change=${(e) => console.log('Selected:', e.detail.value)}>
+  
+  <schmancy-option value="electronics">Electronics</schmancy-option>
+  <schmancy-option value="clothing">Clothing</schmancy-option>
+  <schmancy-option value="books">Books</schmancy-option>
+  <schmancy-option value="food">Food & Beverages</schmancy-option>
+</schmancy-select>
+
+// Multiple select with initial values
+<schmancy-select
+  name="interests"
+  label="Interests"
+  multiple
+  .value=${userInterests} // Array of selected values
+  @change=${(e) => updateInterests(e.detail.value)}>
+  
+  <schmancy-option value="tech">Technology</schmancy-option>
+  <schmancy-option value="sports">Sports</schmancy-option>
+  <schmancy-option value="music">Music</schmancy-option>
+  <schmancy-option value="movies">Movies</schmancy-option>
+  <schmancy-option value="travel">Travel</schmancy-option>
+  <schmancy-option value="food">Food</schmancy-option>
+</schmancy-select>
+
+// Searchable select with many options
+<schmancy-select
+  name="country"
+  label="Country"
+  searchable
+  placeholder="Search for a country">
+  
+  ${countries.map(country => html`
+    <schmancy-option value=${country.code}>${country.name}</schmancy-option>
+  `)}
+</schmancy-select>
+
+// Usage in a form
+<schmancy-form @submit=${handleSubmit}>
+  <schmancy-input name="name" label="Name" required></schmancy-input>
+  
+  <schmancy-select
+    name="department"
+    label="Department"
+    required>
+    
+    <schmancy-option value="hr">Human Resources</schmancy-option>
+    <schmancy-option value="engineering">Engineering</schmancy-option>
+    <schmancy-option value="marketing">Marketing</schmancy-option>
+    <schmancy-option value="finance">Finance</schmancy-option>
+  </schmancy-select>
+  
+  <schmancy-button type="submit">Submit</schmancy-button>
+</schmancy-form>
+
+// Select with custom rendering
+<schmancy-select
+  name="user"
+  label="Assign to User"
+  @change=${assignToUser}>
+  
+  ${users.map(user => html`
+    <schmancy-option value=${user.id}>
+      <div style="display: flex; align-items: center;">
+        <schmancy-avatar src=${user.avatar} size="small"></schmancy-avatar>
+        <span style="margin-left: 8px;">${user.name}</span>
+        <span style="margin-left: auto; color: gray; font-size: 0.8em;">${user.role}</span>
+      </div>
+    </schmancy-option>
+  `)}
+</schmancy-select>
+```

package/dist/ai/sheet.md

@@ -0,0 +1,122 @@
+# Schmancy Sheet - AI Reference
+
+```js
+// Sheet Service API
+import { $sheet } from 'schmancy';
+
+// Open a sheet
+$sheet.open({
+  title?: string,
+  content: TemplateResult|HTMLElement|Function,
+  width?: string|number, // default "600px"
+  height?: string|number, // default "auto"
+  position?: 'right'|'left'|'bottom'|'top', // default "right"
+  closable?: boolean, // default true
+  backdrop?: boolean, // default false
+  onClose?: Function,
+  hooks?: {
+    beforeOpen?: Function,
+    afterOpen?: Function,
+    beforeClose?: Function,
+    afterClose?: Function
+  }
+}) -> SheetRef
+
+// SheetRef object
+{
+  close(): Promise<void>, // Programmatically close the sheet
+  id: string,            // Unique ID of the sheet
+  element: HTMLElement   // The sheet element
+}
+
+// Sheet Component
+<schmancy-sheet
+  title="Sheet Title"
+  position="right|left|bottom|top"
+  width="600px"
+  height="auto"
+  closable?
+  backdrop?
+  @close=${handleClose}>
+  
+  <div slot="header">
+    <!-- Custom header content -->
+  </div>
+  
+  <!-- Main content -->
+  <div>Sheet content goes here</div>
+  
+  <div slot="footer">
+    <!-- Footer content -->
+    <schmancy-button @click=${closeSheet}>Close</schmancy-button>
+  </div>
+</schmancy-sheet>
+
+// Sheet Header Component
+<schmancy-sheet-header
+  title="Sheet Title"
+  closable?
+  @close=${handleClose}>
+  <!-- Optional additional header content -->
+</schmancy-sheet-header>
+
+// Sheet Hook (for programmatic usage)
+const [openSheet, SheetComponent] = useSheet({
+  title: "Sheet Title",
+  content: () => html`<div>Sheet content</div>`,
+  position: "right"
+});
+
+// Examples
+// Basic usage
+$sheet.open({
+  title: "User Details",
+  content: html`
+    <div>
+      <schmancy-form>
+        <schmancy-input label="Name" value="John Doe"></schmancy-input>
+        <schmancy-input label="Email" value="john@example.com"></schmancy-input>
+      </schmancy-form>
+    </div>
+  `,
+  onClose: () => console.log("Sheet closed")
+});
+
+// Using with form submission
+const sheetRef = $sheet.open({
+  title: "Add User",
+  content: html`
+    <schmancy-form @submit=${(e) => {
+      const values = e.detail.values;
+      saveUser(values);
+      sheetRef.close();
+    }}>
+      <schmancy-input name="name" label="Name" required></schmancy-input>
+      <schmancy-input name="email" label="Email" required></schmancy-input>
+      
+      <div slot="footer">
+        <schmancy-button type="submit">Save</schmancy-button>
+        <schmancy-button kind="secondary" @click=${() => sheetRef.close()}>Cancel</schmancy-button>
+      </div>
+    </schmancy-form>
+  `
+});
+
+// Using the sheet component directly
+<schmancy-sheet
+  title="Settings"
+  position="right"
+  width="400px"
+  @close=${() => this.sheetOpen = false}>
+  
+  <div>
+    <h3>Preferences</h3>
+    <schmancy-checkbox label="Enable notifications"></schmancy-checkbox>
+    <schmancy-checkbox label="Dark mode"></schmancy-checkbox>
+  </div>
+  
+  <div slot="footer">
+    <schmancy-button @click=${saveSettings}>Save</schmancy-button>
+  </div>
+</schmancy-sheet>
+```