@mhmo91/schmancy 0.2.193 → 0.2.194

package/ai/busy.md

@@ -0,0 +1,195 @@
+# Schmancy Busy - AI Reference
+
+```js
+// Basic Busy Indicator
+<schmancy-busy
+  active?
+  size="small|medium|large"
+  type="spinner|dots|bar"
+  label="Loading..."
+  overlay?
+  fullscreen?>
+</schmancy-busy>
+
+// Spinner Component
+<schmancy-spinner
+  size="small|medium|large"
+  color="primary|secondary|tertiary|currentColor">
+</schmancy-spinner>
+
+// Busy overlaying content
+<div style="position: relative; height: 200px;">
+  <div>
+    Content that will be overlaid when loading
+  </div>
+  
+  <schmancy-busy
+    active=${isLoading}
+    overlay>
+  </schmancy-busy>
+</div>
+
+// Fullscreen busy indicator
+<schmancy-busy
+  active=${isLoading}
+  fullscreen
+  label="Loading application...">
+</schmancy-busy>
+
+// Busy Properties
+active: boolean         // Whether the busy indicator is displayed
+size: string            // Size: "small", "medium", "large"
+type: string            // Indicator type: "spinner", "dots", "bar"
+label: string           // Text to display
+overlay: boolean        // Show as overlay on parent container
+fullscreen: boolean     // Show as fullscreen overlay
+color: string           // Color of the indicator
+opacity: number         // Background opacity for overlay
+persistent: boolean     // Prevent closing with escape key
+delay: number           // Delay in ms before showing (to prevent flashing)
+minDuration: number     // Minimum duration in ms to show
+
+// Spinner Properties
+size: string            // Size: "small" (16px), "medium" (24px), "large" (48px), or custom size
+color: string           // Color: "primary", "secondary", "tertiary", "currentColor" or CSS color
+thickness: number       // Thickness of the spinner stroke
+
+// Examples
+// Basic usage
+<schmancy-busy active=${loading} label="Loading..."></schmancy-busy>
+
+// Spinner with custom size and color
+<schmancy-spinner size="32px" color="#ff5722"></schmancy-spinner>
+
+// Busy indicator in a button
+<schmancy-button ?disabled=${loading}>
+  ${loading ? html`
+    <schmancy-spinner size="small" slot="prefix"></schmancy-spinner>
+    Loading...
+  ` : html`
+    Submit
+  `}
+</schmancy-button>
+
+// Overlay on a card
+<schmancy-card>
+  <schmancy-card-content>
+    <h3>User Details</h3>
+    <div>
+      <!-- User details content -->
+    </div>
+  </schmancy-card-content>
+  
+  <schmancy-busy
+    active=${loadingUser}
+    overlay
+    label="Loading user...">
+  </schmancy-busy>
+</schmancy-card>
+
+// Delayed busy indicator to prevent flashing for fast operations
+<schmancy-busy
+  active=${loading}
+  delay="300"
+  min-duration="500"
+  label="Processing...">
+</schmancy-busy>
+
+// Busy indicator with different types
+<div>
+  <div>
+    <h4>Spinner</h4>
+    <schmancy-busy active type="spinner"></schmancy-busy>
+  </div>
+  
+  <div>
+    <h4>Dots</h4>
+    <schmancy-busy active type="dots"></schmancy-busy>
+  </div>
+  
+  <div>
+    <h4>Bar</h4>
+    <schmancy-busy active type="bar"></schmancy-busy>
+  </div>
+</div>
+
+// Table with loading state
+<div style="position: relative;">
+  <schmancy-table>
+    <!-- Table content -->
+  </schmancy-table>
+  
+  <schmancy-busy
+    active=${loadingData}
+    overlay
+    opacity="0.7"
+    label="Loading data...">
+  </schmancy-busy>
+</div>
+
+// Form with busy state
+<schmancy-form @submit=${handleSubmit}>
+  <schmancy-input
+    name="username"
+    label="Username"
+    required
+    ?disabled=${submitting}>
+  </schmancy-input>
+  
+  <schmancy-input
+    name="password"
+    label="Password"
+    type="password"
+    required
+    ?disabled=${submitting}>
+  </schmancy-input>
+  
+  <schmancy-button
+    type="submit"
+    ?disabled=${submitting}>
+    ${submitting ? html`
+      <schmancy-spinner slot="prefix" size="small"></schmancy-spinner>
+      Signing In...
+    ` : html`
+      Sign In
+    `}
+  </schmancy-button>
+  
+  <schmancy-busy
+    active=${submitting}
+    overlay
+    opacity="0.3">
+  </schmancy-busy>
+</schmancy-form>
+
+// Fullscreen loading with custom styling
+<schmancy-busy
+  active=${initialLoading}
+  fullscreen
+  label="Loading application..."
+  style="--busy-backdrop-color: var(--color-primary); --busy-label-color: white;">
+</schmancy-busy>
+
+// Programmatic usage (service API)
+import { $busy } from 'schmancy';
+
+// Show busy indicator
+$busy.show({
+  label: 'Loading data...',
+  fullscreen: true
+});
+
+// Hide busy indicator
+$busy.hide();
+
+// For async operations
+async function fetchData() {
+  $busy.show({ label: 'Fetching data...' });
+  
+  try {
+    await api.getData();
+  } finally {
+    $busy.hide();
+  }
+}
+```

package/ai/button.md

@@ -0,0 +1,112 @@
+# Schmancy Button - AI Reference
+
+```js
+// Basic Button
+<schmancy-button
+  variant="elevated|filled|filled tonal|outlined|text"
+  width="full|auto"
+  type="button|submit|reset"
+  disabled?
+  href?
+  @click>
+  Button Text
+</schmancy-button>
+
+// Icon Button
+<schmancy-icon-button
+  variant="elevated|filled|filled tonal|outlined|text"
+  size="sm|md|lg"
+  width="full|auto"
+  type="button|submit|reset"
+  disabled?
+  href?
+  @click>
+  <!-- Icon content goes directly in the slot -->
+  <svg>...</svg> 
+</schmancy-icon-button>
+
+// Button with Icon
+<schmancy-button>
+  <schmancy-icon slot="prefix" icon="check"></schmancy-icon>
+  With Prefix Icon
+</schmancy-button>
+
+<schmancy-button>
+  With Suffix Icon
+  <schmancy-icon slot="suffix" icon="arrow-right"></schmancy-icon>
+</schmancy-button>
+
+// Button Properties
+variant: string       // "elevated", "filled", "filled tonal", "outlined", "text" (default: "text")
+width: string         // "full", "auto" (default: "auto")
+type: string          // "button", "submit", "reset" (default: "button")
+disabled: boolean     // Whether the button is disabled
+href: string          // If provided, renders as an anchor (<a>) element
+ariaLabel: string     // Accessible label for the button
+
+// Icon Button Properties
+variant: string       // "elevated", "filled", "filled tonal", "outlined", "text" (default: "text")
+size: string          // "sm", "md", "lg" (default: "md")
+width: string         // "full", "auto" (default: "auto")
+type: string          // "button", "submit", "reset" (default: "button")
+disabled: boolean     // Whether the button is disabled
+href: string          // If provided, renders as an anchor (<a>) element
+ariaLabel: string     // Accessible label for the button
+
+// Button Methods
+focus(options?) -> void  // Sets focus on the button
+blur() -> void           // Removes focus from the button
+click() -> void          // Programmatically clicks the button
+
+// Examples
+<schmancy-button variant="filled" @click=${() => console.log('clicked')}>
+  Filled Button
+</schmancy-button>
+
+<schmancy-button variant="outlined" disabled>
+  Disabled Button
+</schmancy-button>
+
+<schmancy-button variant="elevated">
+  Elevated Button
+</schmancy-button>
+
+<schmancy-button variant="text">
+  Text Button
+</schmancy-button>
+
+<schmancy-button variant="filled tonal">
+  Tonal Button
+</schmancy-button>
+
+<schmancy-button href="https://example.com" variant="outlined">
+  Link Button
+</schmancy-button>
+
+<schmancy-button width="full" variant="filled">
+  Full Width Button
+</schmancy-button>
+
+<schmancy-icon-button variant="filled" size="md">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+  </svg>
+</schmancy-icon-button>
+
+<schmancy-icon-button variant="text" size="sm">
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="18" cy="6" r="3"></circle>
+    <circle cx="6" cy="18" r="3"></circle>
+    <line x1="13" y1="6" x2="6" y2="14"></line>
+  </svg>
+</schmancy-icon-button>
+
+// Form submission button
+<schmancy-form @submit=${handleSubmit}>
+  <schmancy-input name="email" type="email" required></schmancy-input>
+  <schmancy-button type="submit" variant="filled">
+    Submit Form
+  </schmancy-button>
+</schmancy-form>
+```

package/ai/card.md

@@ -0,0 +1,155 @@
+# Schmancy Card - AI Reference
+
+```js
+// Basic Card
+<schmancy-card>
+  <div>Card content goes here</div>
+</schmancy-card>
+
+// Card with title and content
+<schmancy-card>
+  <schmancy-card-content>
+    <h2>Card Title</h2>
+    <p>Card description text goes here.</p>
+  </schmancy-card-content>
+</schmancy-card>
+
+// Card with media
+<schmancy-card>
+  <schmancy-card-media
+    image="path/to/image.jpg"
+    alt="Image description"
+    height="200px">
+  </schmancy-card-media>
+  
+  <schmancy-card-content>
+    <h2>Card with Media</h2>
+    <p>Card content below the image.</p>
+  </schmancy-card-content>
+</schmancy-card>
+
+// Card with actions
+<schmancy-card>
+  <schmancy-card-content>
+    <h2>Card Title</h2>
+    <p>Card content with action buttons.</p>
+  </schmancy-card-content>
+  
+  <schmancy-card-actions>
+    <schmancy-button>Action 1</schmancy-button>
+    <schmancy-button>Action 2</schmancy-button>
+  </schmancy-card-actions>
+</schmancy-card>
+
+// Complete card with all components
+<schmancy-card>
+  <schmancy-card-media
+    image="path/to/image.jpg"
+    alt="Image description">
+  </schmancy-card-media>
+  
+  <schmancy-card-content>
+    <h2>Card Title</h2>
+    <p>Card description text goes here. This can contain any content.</p>
+  </schmancy-card-content>
+  
+  <schmancy-card-actions>
+    <schmancy-button kind="tertiary">Cancel</schmancy-button>
+    <schmancy-button kind="primary">Submit</schmancy-button>
+  </schmancy-card-actions>
+</schmancy-card>
+
+// Card Properties
+outlined: boolean        // Shows an outline instead of elevation
+elevation: number        // Shadow elevation level (1-5)
+interactive: boolean     // Enables hover and click effects
+
+// Card Media Properties
+image: string           // URL of the image
+alt: string             // Alt text for the image
+height: string          // Height of the media area
+title: string           // Title to display over the media
+
+// Card Actions Properties
+align: string           // Alignment of actions: "start", "end", "space-between", "center"
+direction: string       // Direction of actions: "row", "column"
+
+// Examples
+// Basic card with content
+<schmancy-card>
+  <schmancy-card-content>
+    <h2>Welcome to Schmancy</h2>
+    <p>A modern component library for web applications.</p>
+  </schmancy-card-content>
+</schmancy-card>
+
+// Interactive card
+<schmancy-card 
+  interactive
+  @click=${handleCardClick}>
+  <schmancy-card-content>
+    <h3>Click Me</h3>
+    <p>This entire card is clickable.</p>
+  </schmancy-card-content>
+</schmancy-card>
+
+// Outlined card
+<schmancy-card outlined>
+  <schmancy-card-content>
+    <h3>Outlined Card</h3>
+    <p>This card has an outline instead of elevation.</p>
+  </schmancy-card-content>
+</schmancy-card>
+
+// Product card
+<schmancy-card>
+  <schmancy-card-media
+    image="/products/headphones.jpg"
+    alt="Wireless Headphones"
+    height="180px">
+  </schmancy-card-media>
+  
+  <schmancy-card-content>
+    <h3>Wireless Headphones</h3>
+    <p>Premium sound quality with noise cancellation.</p>
+    <p><strong>$149.99</strong></p>
+  </schmancy-card-content>
+  
+  <schmancy-card-actions>
+    <schmancy-button kind="tertiary">Details</schmancy-button>
+    <schmancy-button kind="primary">Add to Cart</schmancy-button>
+  </schmancy-card-actions>
+</schmancy-card>
+
+// Card grid layout
+<schmancy-grid
+  columns="1"
+  columns-md="2"
+  columns-lg="3"
+  gap="16px">
+  
+  ${products.map(product => html`
+    <schmancy-card>
+      <schmancy-card-media
+        image=${product.image}
+        alt=${product.name}>
+      </schmancy-card-media>
+      
+      <schmancy-card-content>
+        <h3>${product.name}</h3>
+        <p>${product.description}</p>
+        <p><strong>${product.price}</strong></p>
+      </schmancy-card-content>
+      
+      <schmancy-card-actions>
+        <schmancy-button @click=${() => viewProduct(product)}>
+          View
+        </schmancy-button>
+        <schmancy-button kind="primary" @click=${() => addToCart(product)}>
+          Add to Cart
+        </schmancy-button>
+      </schmancy-card-actions>
+    </schmancy-card>
+  `)}
+</schmancy-grid>
+```

package/ai/checkbox.md

@@ -0,0 +1,108 @@
+# Schmancy Checkbox - AI Reference
+
+```js
+// Basic Checkbox
+<schmancy-checkbox
+  name="checkbox-name"
+  label="Checkbox Label"
+  value="checkbox-value"
+  checked?
+  indeterminate?
+  disabled?
+  required?
+  @change=${handleChange}>
+</schmancy-checkbox>
+
+// Checkbox with helper text
+<schmancy-checkbox
+  label="Subscribe to newsletter"
+  helper-text="You'll receive weekly updates">
+</schmancy-checkbox>
+
+// Checkbox with error
+<schmancy-checkbox
+  label="Accept terms"
+  error="You must accept the terms to continue"
+  required>
+</schmancy-checkbox>
+
+// Checkbox Methods
+checkbox.check() -> void       // Programmatically check
+checkbox.uncheck() -> void     // Programmatically uncheck
+checkbox.toggle() -> void      // Toggle current state
+checkbox.focus() -> void       // Focus the checkbox
+checkbox.blur() -> void        // Remove focus
+checkbox.validate() -> boolean // Validate and show error if invalid
+
+// Checkbox Properties
+checked: boolean       // The checked state
+indeterminate: boolean // Indeterminate state (neither checked nor unchecked)
+value: string          // The value attribute of the checkbox
+name: string           // The name attribute
+disabled: boolean      // Whether the checkbox is disabled
+required: boolean      // Whether the checkbox is required
+error: string          // Error message to display
+
+// Checkbox Events
+@change  // Fires when checked state changes, with { detail: { checked, value } }
+@input   // Fires when value changes during interaction
+@focus   // Fires when checkbox gains focus
+@blur    // Fires when checkbox loses focus
+
+// Examples
+// Basic usage
+<schmancy-checkbox
+  name="agree"
+  label="I agree to the terms and conditions"
+  required
+  @change=${(e) => console.log('Agreed:', e.detail.checked)}>
+</schmancy-checkbox>
+
+// Indeterminate state example
+<schmancy-checkbox
+  label="Select all"
+  .indeterminate=${someChecked && !allChecked}
+  .checked=${allChecked}
+  @change=${selectAll}>
+</schmancy-checkbox>
+
+// Checkbox group
+<div>
+  <schmancy-checkbox
+    name="roles"
+    value="admin"
+    label="Admin"
+    .checked=${roles.includes('admin')}
+    @change=${updateRoles}>
+  </schmancy-checkbox>
+  
+  <schmancy-checkbox
+    name="roles"
+    value="editor"
+    label="Editor"
+    .checked=${roles.includes('editor')}
+    @change=${updateRoles}>
+  </schmancy-checkbox>
+  
+  <schmancy-checkbox
+    name="roles"
+    value="viewer"
+    label="Viewer"
+    .checked=${roles.includes('viewer')}
+    @change=${updateRoles}>
+  </schmancy-checkbox>
+</div>
+
+// Usage in a form
+<schmancy-form @submit=${handleSubmit}>
+  <schmancy-input name="name" label="Name" required></schmancy-input>
+  
+  <schmancy-checkbox
+    name="subscribe"
+    label="Subscribe to newsletter"
+    value="yes">
+  </schmancy-checkbox>
+  
+  <schmancy-button type="submit">Submit</schmancy-button>
+</schmancy-form>
+```