@mhmo91/schmancy 0.8.6 → 0.9.3

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/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

package/dist/ai/template.md

@@ -1,144 +0,0 @@
-# Schmancy AI Documentation Guidelines
-
-This document provides a template and guidelines for creating consistent AI-friendly documentation for Schmancy components.
-
-## Documentation Format
-
-Each component's documentation should follow this structure:
-
-1. **Component Title**: `# Schmancy [Component] - AI Reference`
-2. **Code Block**: Main syntax reference with component usage patterns
-3. **Related Components**: List of related components with links and relationship descriptions
-4. **Technical Details**: Interfaces, types, CSS custom properties, etc.
-5. **Common Use Cases**: Practical examples with explanations
-
-## Code Block Template
-
-```js
-// Component Tag
-<schmancy-[component]
-  [primary-attribute]="value"
-  [boolean-attribute]?
-  @[event-name]=${handler}>
-  <!-- Content/children if applicable -->
-</schmancy-[component]>
-
-// Component Variations (if applicable)
-<schmancy-[component] 
-  variant="[variant]"
-  size="small|medium|large">
-</schmancy-[component]>
-
-// Component Methods
-component.method() -> returnType
-component.property = value
-
-// Event details
-@event-name // { detail: { relevantData } }
-
-// Examples (always number examples for clarity)
-// 1. Basic example
-<schmancy-[component] [primary-attribute]="value">
-  Content
-</schmancy-[component]>
-
-// 2. Advanced example
-<schmancy-[component]
-  [attribute]="value"
-  @[event]=${() => handleEvent()}>
-  <!-- Structured content -->
-</schmancy-[component]>
-```
-
-## Related Components Section
-
-Always include a "Related Components" section that links to other relevant components:
-
-```markdown
-## Related Components
-- **[Related-1](./related-1.md)**: Brief description of relationship
-- **[Related-2](./related-2.md)**: Brief description of relationship
-- **[Related-3](./related-3.md)**: Brief description of relationship
-```
-
-## Technical Details Section
-
-Include relevant technical information:
-
-```markdown
-## Technical Details
-
-### Interfaces
-```typescript
-interface ComponentProps {
-  property: type;
-  optionalProperty?: type;
-}
-```
-
-### CSS Custom Properties (if applicable)
-```css
---schmancy-component-color: /* Controls the component color */
---schmancy-component-spacing: /* Controls internal spacing */
-```
-```
-
-## Common Use Cases Section
-
-Provide 2-4 practical use cases with code examples:
-
-```markdown
-### Common Use Cases
-
-1. **Use Case 1**: Brief description
-   ```html
-   <schmancy-[component] specific-attribute="value"></schmancy-[component]>
-   ```
-
-2. **Use Case 2**: Brief description
-   ```html
-   <schmancy-[component] with="specific-configuration"></schmancy-[component]>
-   ```
-```
-
-## Style Guide
-
-1. **Code Examples**:
-   - Number all examples sequentially (e.g., `// 1. Basic example`)
-   - Include descriptive comments
-   - Ensure examples are realistic and complete
-
-2. **Component Descriptions**:
-   - Focus on functionality and API usage
-   - Avoid marketing language
-   - Provide context for when and why to use the component
-
-3. **Cross-Referencing**:
-   - Always link to related components
-   - Explain the relationship (e.g., "Used within", "Alternative to", "Extends")
-
-4. **Formatting**:
-   - Use backticks for inline code references
-   - Use proper markdown headers for sections
-   - Use TypeScript for type definitions
-
-## Component Categories
-
-Organize components according to these categories for better cross-referencing:
-
-1. **Core Infrastructure**: Area, Store, Teleport, RxJS Utils
-2. **Layout Components**: Layout, Surface, Card, Divider
-3. **Navigation & Structure**: Tabs, Menu, Nav-Drawer, Content-Drawer, Sheet, Dialog
-4. **Form Controls**: Form, Input, Textarea, Select, Autocomplete, Checkbox, Radio-Group, Option
-5. **Interactive Elements**: Button, Dropdown, Chips, List, Tree, Table
-6. **Feedback & Status**: Notification, Tooltip, Badge, Busy, Avatar
-7. **Typography & Visual**: Typography, Icons, Animated-Text, Typewriter
-8. **Utilities**: Directives, Theme, Theme-Button, Utils, Types, Delay, Date-Range, Steps
-
-## Examples
-
-See these files for examples of well-formatted component documentation:
-- [area.md](./area.md): Complex service component
-- [form.md](./form.md): Container component
-- [input.md](./input.md): Form field component
-- [store.md](./store.md): State management