@mhmo91/schmancy 0.8.6 → 0.9.2

package/dist/ai/payment-card-form.md

@@ -1,242 +0,0 @@
-# Schmancy Payment Card Form - AI Reference
-
-## Quick Start
-
-```typescript
-import '@schmancy/index'  // For all Schmancy components
-// Payment card form is included in the main components
-```
-
-## Component Overview
-
-A mobile-friendly payment card form component with real-time validation and formatting for credit card information. Uses Cleave.js for intelligent input formatting.
-
-## API
-
-```typescript
-// Payment Card Form Component
-<schmancy-payment-card-form
-  value?="{
-    cardName: string,
-    cardNumber: string,
-    expirationDate: string,
-    cvv: string
-  }"
-  @change=${handleChange}>
-  <!-- Optional additional content -->
-</schmancy-payment-card-form>
-
-// Component Properties
-value: {
-  cardName: string        // Cardholder name
-  cardNumber: string      // Card number (formatted)
-  expirationDate: string  // MM/YY format
-  cvv: string            // 3-4 digits
-}
-
-// Events
-@change  // Fires when any field changes with complete form data
-
-// Methods
-form.checkValidity() -> boolean  // Check if all fields are valid
-form.submit() -> void           // Submit the form
-```
-
-## Examples
-
-### Basic Usage
-
-```typescript
-// Simple payment form
-<schmancy-payment-card-form 
-  @change=${(e) => console.log('Form data:', e.detail)}>
-</schmancy-payment-card-form>
-
-// With initial values
-<schmancy-payment-card-form 
-  .value=${{
-    cardName: 'John Doe',
-    cardNumber: '',
-    expirationDate: '',
-    cvv: ''
-  }}
-  @change=${handlePaymentChange}>
-</schmancy-payment-card-form>
-```
-
-### Form Integration
-
-```typescript
-// Inside a larger form
-<schmancy-form @submit=${handleCheckout}>
-  <schmancy-typography type="headline" token="sm" class="mb-4 block">
-    Payment Information
-  </schmancy-typography>
-  
-  <schmancy-payment-card-form 
-    @change=${(e) => this.paymentData = e.detail}>
-  </schmancy-payment-card-form>
-  
-  <schmancy-button type="submit" variant="filled" class="mt-4">
-    Complete Purchase
-  </schmancy-button>
-</schmancy-form>
-
-// Handling submission
-handleCheckout(e) {
-  const formData = e.detail;
-  const payment = this.paymentData;
-  
-  // Process payment...
-}
-```
-
-### Real-World Examples
-
-```typescript
-// E-commerce checkout
-render() {
-  return html`
-    <schmancy-surface class="p-6 rounded-lg">
-      <schmancy-payment-card-form 
-        .value=${this.paymentInfo}
-        @change=${this.handlePaymentUpdate}>
-        
-        <!-- Additional fields can be added via slot -->
-        <schmancy-input
-          label="Billing ZIP Code"
-          name="zipCode"
-          required
-          pattern="[0-9]{5}"
-          class="mt-4">
-        </schmancy-input>
-      </schmancy-payment-card-form>
-      
-      <div class="flex gap-4 mt-6">
-        <schmancy-button variant="text" @click=${this.goBack}>
-          Back
-        </schmancy-button>
-        <schmancy-button 
-          variant="filled" 
-          @click=${this.processPayment}
-          ?disabled=${!this.isValid}>
-          Pay $${this.total}
-        </schmancy-button>
-      </div>
-    </schmancy-surface>
-  `
-}
-
-// With validation feedback
-class CheckoutForm extends LitElement {
-  @state() errors = {};
-  
-  async processPayment() {
-    const form = this.shadowRoot.querySelector('schmancy-payment-card-form');
-    
-    if (!form.checkValidity()) {
-      this.errors = {
-        payment: 'Please complete all payment fields correctly'
-      };
-      return;
-    }
-    
-    // Process payment...
-  }
-}
-```
-
-## Features
-
-### Automatic Formatting
-- **Card Number**: Spaces added automatically (e.g., "4242 4242 4242 4242")
-- **Expiration Date**: MM/YY format enforced
-- **CVV**: Length adjusted based on card type (3 for most, 4 for Amex)
-
-### Card Type Detection
-- Automatically detects card type from number
-- Supports: Visa, Mastercard, Amex, Discover, JCB, Diners, etc.
-- Shows appropriate card icon
-- Adjusts validation rules per card type
-
-### Real-time Validation
-- Card number validity (Luhn algorithm)
-- Expiration date must be future date
-- CVV length based on card type
-- Name field required
-
-### Mobile Optimized
-- Appropriate input modes for virtual keyboards
-- Large touch targets
-- Clear error states
-- Smooth animations
-
-## Validation Rules
-
-1. **Card Name**: Required, min 2 characters
-2. **Card Number**: 
-   - Valid card number format
-   - Passes Luhn check
-   - Supported card type
-3. **Expiration Date**:
-   - MM/YY format
-   - Must be current or future month
-4. **CVV**:
-   - 3 digits (most cards)
-   - 4 digits (American Express)
-
-## Accessibility
-
-- Proper label associations
-- ARIA attributes for validation states
-- Keyboard navigation support
-- Screen reader announcements for errors
-- High contrast error states
-
-## Best Practices
-
-1. **Security**: Never store raw card data - tokenize on backend
-2. **PCI Compliance**: Use HTTPS and follow PCI-DSS guidelines
-3. **Error Handling**: Show clear, specific error messages
-4. **Loading States**: Disable form during payment processing
-5. **Confirmation**: Show summary before final submission
-
-## Common Pitfalls
-
-- **Test Cards**: Component validates real card numbers only
-- **Date Validation**: MM/YY not MM/YYYY
-- **Auto-submit**: Don't auto-submit on completion
-- **Browser Autofill**: May conflict with Cleave.js formatting
-
-## Related Components
-
-- **[Form](./form.md)**: Parent form container
-- **[Input](./input.md)**: Base input component used internally
-- **[Button](./button.md)**: Submit buttons
-- **[Surface](./surface.md)**: Card containers
-
-## Dependencies
-
-- **Cleave.js**: Handles input formatting and validation
-- Automatically included with component
-
-## TypeScript Interface
-
-```typescript
-interface PaymentCardData {
-  cardName: string;
-  cardNumber: string;
-  expirationDate: string;
-  cvv: string;
-}
-
-interface SchmancyPaymentCardFormElement extends HTMLElement {
-  value: PaymentCardData;
-  checkValidity(): boolean;
-}
-
-// Change event
-interface PaymentCardChangeEvent extends CustomEvent {
-  detail: PaymentCardData;
-}
-```

package/dist/ai/slider.md

@@ -1,227 +0,0 @@
-# Slider Component
-
-A smooth, touch-friendly carousel component for displaying content in slides with navigation controls and indicators.
-
-## Quick Start
-
-```html
-<!-- Basic image slider -->
-<schmancy-slider>
-  <schmancy-slide type="image" src="/image1.jpg" alt="Slide 1"></schmancy-slide>
-  <schmancy-slide type="image" src="/image2.jpg" alt="Slide 2"></schmancy-slide>
-  <schmancy-slide type="image" src="/image3.jpg" alt="Slide 3"></schmancy-slide>
-</schmancy-slider>
-
-<!-- Content slider -->
-<schmancy-slider showArrows>
-  <schmancy-slide>
-    <schmancy-card>
-      <h3>Feature One</h3>
-      <p>Description of the first feature...</p>
-    </schmancy-card>
-  </schmancy-slide>
-  <schmancy-slide>
-    <schmancy-card>
-      <h3>Feature Two</h3>
-      <p>Description of the second feature...</p>
-    </schmancy-card>
-  </schmancy-slide>
-</schmancy-slider>
-```
-
-## Components
-
-### schmancy-slider
-The main container that handles slide navigation and controls.
-
-**Properties:**
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `showArrows` | `boolean` | `true` | Show navigation arrows |
-
-**Events:**
-- `slide-changed`: Fired when active slide changes with `{ detail: { index: number } }`
-
-### schmancy-slide
-Individual slide component supporting various content types.
-
-**Properties:**
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `type` | `'image' \| 'video' \| 'content'` | `'content'` | Slide content type |
-| `src` | `string` | `''` | Source for image/video |
-| `alt` | `string` | `''` | Alt text for images |
-| `controls` | `boolean` | `true` | Show video controls |
-| `autoplay` | `boolean` | `false` | Autoplay video |
-| `loop` | `boolean` | `false` | Loop video |
-| `muted` | `boolean` | `false` | Mute video |
-| `fit` | `'cover' \| 'contain' \| 'fill' \| 'scale-down' \| 'none'` | `'cover'` | Object fit style |
-
-## Examples
-
-### Product Gallery
-```html
-<schmancy-slider class="h-96">
-  ${products.map(product => html`
-    <schmancy-slide type="image" 
-      src="${product.image}" 
-      alt="${product.name}"
-      fit="contain"
-    ></schmancy-slide>
-  `)}
-</schmancy-slider>
-```
-
-### Testimonials Carousel
-```html
-<schmancy-slider showArrows>
-  ${testimonials.map(testimonial => html`
-    <schmancy-slide>
-      <div class="p-8 text-center">
-        <schmancy-avatar 
-          src="${testimonial.avatar}" 
-          name="${testimonial.name}"
-          size="lg"
-          class="mx-auto mb-4"
-        ></schmancy-avatar>
-        <blockquote class="text-lg italic mb-4">
-          "${testimonial.quote}"
-        </blockquote>
-        <cite class="text-sm">
-          - ${testimonial.name}, ${testimonial.role}
-        </cite>
-      </div>
-    </schmancy-slide>
-  `)}
-</schmancy-slider>
-```
-
-### Video Showcase
-```html
-<schmancy-slider>
-  <schmancy-slide 
-    type="video" 
-    src="/demo-video-1.mp4"
-    controls
-    muted
-    autoplay
-  ></schmancy-slide>
-  <schmancy-slide 
-    type="video" 
-    src="/demo-video-2.mp4"
-    controls
-  ></schmancy-slide>
-</schmancy-slider>
-```
-
-### Mixed Content Slider
-```html
-<schmancy-slider>
-  <!-- Welcome slide -->
-  <schmancy-slide>
-    <div class="flex items-center justify-center h-full p-8">
-      <div class="text-center">
-        <h1 class="text-4xl mb-4">Welcome</h1>
-        <p>Swipe to explore our features</p>
-      </div>
-    </div>
-  </schmancy-slide>
-  
-  <!-- Feature image -->
-  <schmancy-slide type="image" src="/feature.jpg" alt="Main Feature"></schmancy-slide>
-  
-  <!-- Video demo -->
-  <schmancy-slide type="video" src="/demo.mp4" controls></schmancy-slide>
-  
-  <!-- Call to action -->
-  <schmancy-slide>
-    <div class="flex items-center justify-center h-full">
-      <schmancy-button variant="filled" size="lg">
-        Get Started
-      </schmancy-button>
-    </div>
-  </schmancy-slide>
-</schmancy-slider>
-```
-
-## Features
-
-### Smooth Scrolling
-- Native scroll behavior with CSS scroll-snap
-- Touch and mouse support
-- Keyboard navigation ready
-
-### Navigation Controls
-- Previous/Next arrow buttons
-- Automatic disable at bounds
-- Dot indicators showing current position
-
-### Responsive Design
-- Slides automatically fill container width
-- Hidden scrollbars for clean appearance
-- Works on all device sizes
-
-### Performance
-- Lazy loading for images
-- Throttled scroll events
-- Efficient slide position detection
-
-## Styling
-
-```css
-/* Container styling */
-schmancy-slider {
-  height: 400px; /* Set explicit height */
-}
-
-/* Custom arrow positioning */
-schmancy-slider::part(prev-button) {
-  left: 1rem;
-}
-
-schmancy-slider::part(next-button) {
-  right: 1rem;
-}
-
-/* Indicator customization */
-schmancy-slider::part(indicators) {
-  bottom: 2rem;
-}
-```
-
-## Navigation Methods
-
-```javascript
-// Get slider element
-const slider = document.querySelector('schmancy-slider');
-
-// Listen for slide changes
-slider.addEventListener('slide-changed', (e) => {
-  console.log('Current slide:', e.detail.index);
-});
-
-// Programmatically navigate (if exposed)
-// slider.goToSlide(2);
-```
-
-## Best Practices
-
-1. **Height**: Always set explicit height on slider container
-2. **Images**: Optimize images for web delivery
-3. **Accessibility**: Provide meaningful alt text
-4. **Performance**: Limit number of slides for better performance
-5. **Touch**: Ensure adequate touch targets on mobile
-
-## Related Components
-
-- [Card](./card.md) - Content containers for slides
-- [Button](./button.md) - Navigation controls
-- [Surface](./surface.md) - Slide backgrounds
-
-## Use Cases
-
-1. **Product Galleries**: E-commerce product images
-2. **Hero Sections**: Landing page carousels
-3. **Testimonials**: Customer feedback showcase
-4. **Tutorials**: Step-by-step guides
-5. **Media Galleries**: Photo and video collections

package/dist/ai/spinner.md

@@ -1,165 +0,0 @@
-# Schmancy Spinner - AI Reference
-
-A modern circular loading spinner with contextual color inheritance and optional glass morphism effect.
-
-```js
-// Component Tag
-<schmancy-spinner
-  color="primary|on-primary|secondary|on-secondary|tertiary|on-tertiary|error|on-error|success|on-success|surface|on-surface|surface-variant|on-surface-variant"
-  size="number"
-  glass?>
-</schmancy-spinner>
-
-// Examples
-// 1. Basic spinner (inherits parent color)
-<schmancy-spinner></schmancy-spinner>
-
-// 2. Different sizes (using Tailwind sizing system)
-<schmancy-spinner size="4"></schmancy-spinner>  // 16px (1rem)
-<schmancy-spinner size="6"></schmancy-spinner>  // 24px (1.5rem) - default
-<schmancy-spinner size="8"></schmancy-spinner>  // 32px (2rem)
-<schmancy-spinner size="12"></schmancy-spinner> // 48px (3rem)
-
-// 3. Color variants
-<schmancy-spinner color="primary"></schmancy-spinner>
-<schmancy-spinner color="on-primary"></schmancy-spinner>
-<schmancy-spinner color="error"></schmancy-spinner>
-<schmancy-spinner color="success"></schmancy-spinner>
-
-// 4. Glass morphism effect
-<schmancy-spinner glass></schmancy-spinner>
-<schmancy-spinner glass size="10" color="primary"></schmancy-spinner>
-
-// 5. Inside buttons (inherits button text color)
-<schmancy-button variant="filled">
-  <schmancy-spinner size="5"></schmancy-spinner>
-  Loading...
-</schmancy-button>
-
-// 6. Inside surfaces with contextual colors
-<schmancy-surface type="filled" color="primary">
-  <schmancy-spinner color="on-primary"></schmancy-spinner>
-</schmancy-surface>
-
-// 7. Loading states
-<div class="flex items-center gap-2">
-  <schmancy-spinner size="5"></schmancy-spinner>
-  <schmancy-typography>Loading data...</schmancy-typography>
-</div>
-
-// 8. Overlay loading indicator with glass effect
-<div class="relative">
-  <div class="absolute inset-0 flex items-center justify-center bg-surface/50 backdrop-blur-sm">
-    <schmancy-spinner glass size="10"></schmancy-spinner>
-  </div>
-  <!-- Content being loaded -->
-</div>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `color` | `string` | `inherit` | Theme color variant or 'inherit' for contextual color |
-| `size` | `number` | `6` | Size in Tailwind units (4 = 16px, 6 = 24px, 8 = 32px, etc.) |
-| `glass` | `boolean` | `false` | Apply glass morphism effect with backdrop blur |
-
-## Color System
-
-The spinner intelligently inherits colors from its context by default:
-- Inside buttons: Inherits button text color
-- Inside colored surfaces: Inherits appropriate contrast color
-- Standalone: Uses current text color
-
-Available explicit colors:
-- **Primary colors**: `primary`, `on-primary`
-- **Secondary colors**: `secondary`, `on-secondary`
-- **Tertiary colors**: `tertiary`, `on-tertiary`
-- **Status colors**: `error`, `on-error`, `success`, `on-success`
-- **Surface colors**: `surface`, `on-surface`, `surface-variant`, `on-surface-variant`
-
-## Glass Effect
-
-The `glass` attribute adds a modern glass morphism effect:
-- Semi-transparent background with backdrop blur
-- Subtle border and inner shadow
-- Perfect for overlay loading indicators
-- Works well on image or complex backgrounds
-
-## Size System
-
-Uses Tailwind's sizing convention where each unit = 0.25rem:
-- `size="4"` = 16px (1rem)
-- `size="5"` = 20px (1.25rem)
-- `size="6"` = 24px (1.5rem) - **default**
-- `size="8"` = 32px (2rem)
-- `size="10"` = 40px (2.5rem)
-- `size="12"` = 48px (3rem)
-
-## Common Use Cases
-
-### 1. Button Loading State
-```html
-<schmancy-button variant="filled" disabled>
-  <schmancy-spinner size="5"></schmancy-spinner>
-  <span class="ml-2">Processing...</span>
-</schmancy-button>
-```
-
-### 2. Page Loading Overlay
-```html
-<div class="fixed inset-0 flex items-center justify-center bg-black/30 backdrop-blur-sm z-50">
-  <schmancy-spinner glass size="12"></schmancy-spinner>
-</div>
-```
-
-### 3. Inline Loading Indicator
-```html
-<schmancy-list-item>
-  <span>Fetching user data</span>
-  <schmancy-spinner slot="end" size="5"></schmancy-spinner>
-</schmancy-list-item>
-```
-
-### 4. Card Loading State
-```html
-<schmancy-card>
-  <div class="flex flex-col items-center justify-center py-8">
-    <schmancy-spinner size="8" color="primary"></schmancy-spinner>
-    <schmancy-typography type="body" token="sm" class="mt-2">
-      Loading content...
-    </schmancy-typography>
-  </div>
-</schmancy-card>
-```
-
-### 5. Status Indicators
-```html
-<div class="flex items-center gap-2">
-  <schmancy-spinner size="4" color="success"></schmancy-spinner>
-  <schmancy-typography>Syncing...</schmancy-typography>
-</div>
-```
-
-## Accessibility
-
-- The spinner is automatically marked with `aria-hidden="true"` since it's decorative
-- Always provide textual context for screen readers:
-  ```html
-  <div role="status">
-    <schmancy-spinner></schmancy-spinner>
-    <span class="sr-only">Loading...</span>
-  </div>
-  ```
-
-## Animation
-
-- Continuous rotation at 1 second per revolution
-- Smooth animation with reverse direction for visual appeal
-- No performance impact with CSS animations
-- Respects `prefers-reduced-motion` for accessibility
-
-## Related Components
-- **[Progress](./progress.md)**: For determinate linear progress
-- **[Busy](./busy.md)**: For full-page loading states
-- **[Button](./button.md)**: Often used with spinners for loading states