@mhmo91/schmancy 0.8.6 → 0.9.2

package/dist/ai/countries.md

@@ -1,271 +0,0 @@
-# Schmancy Countries Select - AI Reference
-
-## Quick Start
-
-```typescript
-import '@schmancy/index'  // For all Schmancy components
-// Or specific import: import '@schmancy/extra' // Countries are part of extra
-```
-
-## Component Overview
-
-A specialized country selection component with autocomplete, built on top of schmancy-autocomplete with a comprehensive list of countries including flags and dial codes.
-
-## API
-
-```typescript
-// Countries Select Component
-<schmancy-select-countries
-  value?="string"                    // Selected country code
-  label?="string"                    // Label text (default: "Country")
-  hint?="string"                     // Helper text (default: "Please select a country")
-  placeholder?="string"              // Placeholder (default: "Select a country")
-  name?="string"                     // Form field name
-  required?="boolean"                // Required field
-  @change=${handleChange}>           // Selection change event
-</schmancy-select-countries>
-
-// Component Properties
-value: string         // ISO country code (e.g., "US", "GB")
-label: string        // Field label
-hint: string         // Helper text below field
-placeholder: string  // Placeholder text
-name: string         // Form field name
-required: boolean    // Required validation
-
-// Events
-@change  // Fires when country selection changes
-
-// Methods
-checkValidity() -> boolean      // Validate selection
-reportValidity() -> boolean     // Report validation state
-setCustomValidity(message) -> void  // Set custom error
-```
-
-## Examples
-
-### Basic Usage
-
-```typescript
-// Simple country selector
-<schmancy-select-countries 
-  @change=${(e) => console.log('Selected:', e.detail.value)}>
-</schmancy-select-countries>
-
-// With initial value
-<schmancy-select-countries 
-  value="US"
-  @change=${handleCountryChange}>
-</schmancy-select-countries>
-
-// Required field
-<schmancy-select-countries 
-  required
-  name="country"
-  label="Your Country"
-  hint="Required for shipping">
-</schmancy-select-countries>
-```
-
-### Form Integration
-
-```typescript
-// In a registration form
-<schmancy-form @submit=${handleSubmit}>
-  <schmancy-input 
-    label="Full Name" 
-    name="name" 
-    required>
-  </schmancy-input>
-  
-  <schmancy-select-countries 
-    name="country" 
-    required
-    @change=${updatePhoneFormat}>
-  </schmancy-select-countries>
-  
-  <schmancy-input 
-    label="Phone" 
-    name="phone" 
-    type="tel">
-  </schmancy-input>
-  
-  <schmancy-button type="submit" variant="filled">
-    Register
-  </schmancy-button>
-</schmancy-form>
-```
-
-### Real-World Examples
-
-```typescript
-// Address form with country
-class AddressForm extends LitElement {
-  @state() selectedCountry = '';
-  
-  render() {
-    return html`
-      <schmancy-surface class="p-6">
-        <schmancy-typography type="headline" token="sm" class="mb-4 block">
-          Shipping Address
-        </schmancy-typography>
-        
-        <schmancy-form @submit=${this.handleSubmit}>
-          <div class="grid gap-4">
-            <schmancy-input 
-              label="Street Address" 
-              name="street" 
-              required>
-            </schmancy-input>
-            
-            <div class="grid grid-cols-2 gap-4">
-              <schmancy-input 
-                label="City" 
-                name="city" 
-                required>
-              </schmancy-input>
-              
-              <schmancy-input 
-                label="Postal Code" 
-                name="postalCode" 
-                required>
-              </schmancy-input>
-            </div>
-            
-            <schmancy-select-countries 
-              name="country" 
-              required
-              value=${this.selectedCountry}
-              @change=${(e) => this.selectedCountry = e.detail.value}>
-            </schmancy-select-countries>
-            
-            ${this.selectedCountry === 'US' ? html`
-              <schmancy-select 
-                label="State" 
-                name="state" 
-                required>
-                <!-- State options -->
-              </schmancy-select>
-            ` : ''}
-          </div>
-          
-          <schmancy-button type="submit" variant="filled" class="mt-4">
-            Save Address
-          </schmancy-button>
-        </schmancy-form>
-      </schmancy-surface>
-    `
-  }
-}
-
-// Phone number with country code
-class PhoneInput extends LitElement {
-  @state() countryCode = '';
-  @state() dialCode = '';
-  
-  handleCountryChange(e) {
-    const country = countriesData.find(c => c.code === e.detail.value);
-    this.dialCode = country?.dial_code || '';
-  }
-  
-  render() {
-    return html`
-      <div class="space-y-4">
-        <schmancy-select-countries 
-          @change=${this.handleCountryChange}>
-        </schmancy-select-countries>
-        
-        <schmancy-input 
-          label="Phone Number"
-          .value=${this.dialCode}
-          placeholder="${this.dialCode} ">
-        </schmancy-input>
-      </div>
-    `
-  }
-}
-```
-
-## Country Data Structure
-
-Each country in the dataset includes:
-
-```typescript
-interface Country {
-  name: string;       // Full country name
-  code: string;       // ISO 3166-1 alpha-2 code
-  dial_code: string;  // International dialing code
-  flag: string;       // Flag emoji
-}
-
-// Example:
-{
-  name: "United States",
-  code: "US",
-  dial_code: "+1",
-  flag: "🇺🇸"
-}
-```
-
-## Features
-
-- **Comprehensive List**: All countries with ISO codes
-- **Flag Emojis**: Visual country identification
-- **Dial Codes**: International phone codes included
-- **Search**: Type to filter countries by name
-- **Keyboard Navigation**: Full keyboard support
-- **Form Integration**: Works with native forms
-- **Validation**: Built-in required field validation
-
-## Accessibility
-
-- Proper ARIA labels and roles
-- Keyboard navigation (arrow keys, enter, escape)
-- Screen reader announcements
-- High contrast mode support
-- Focus management
-
-## Best Practices
-
-1. **Default Selection**: Consider pre-selecting based on user's location
-2. **Validation**: Use required attribute for mandatory fields
-3. **Phone Integration**: Use dial_code for phone number inputs
-4. **Localization**: Country names are in English by default
-5. **Performance**: Virtual scrolling for large lists
-
-## Common Pitfalls
-
-- **Code vs Name**: Value is country code, not full name
-- **Case Sensitivity**: Country codes are uppercase
-- **Missing Countries**: Some territories may not be included
-- **Flag Display**: Emoji flags may not work on all systems
-
-## Related Components
-
-- **[Autocomplete](./autocomplete.md)**: Base component for country select
-- **[Form](./form.md)**: Form integration
-- **[Input](./input.md)**: Often used with phone inputs
-- **[Timezone](./timezone.md)**: Related location selector
-
-## TypeScript Interface
-
-```typescript
-interface SchmancySelectCountriesElement extends HTMLElement {
-  value: string;
-  label: string;
-  hint: string;
-  placeholder: string;
-  name: string;
-  required: boolean;
-  checkValidity(): boolean;
-  reportValidity(): boolean;
-  setCustomValidity(message: string): void;
-}
-
-// Change event
-interface CountryChangeEvent extends CustomEvent {
-  detail: {
-    value: string;  // Country code
-  };
-}
-```

package/dist/ai/date-range-inline.md

@@ -1,262 +0,0 @@
-# Schmancy Date Range Inline - AI Reference
-
-```js
-// Import
-import '@schmancy/index'  // For all Schmancy components
-// Or specific import: import '@schmancy/date-range-inline'
-
-// Date Range Inline Component
-<schmancy-date-range-inline
-  type="date|datetime-local"                       // Input type (default: "date")
-  .dateFrom="${{ label: string, value: string }}"  // Start date config (default: { label: 'From', value: '' })
-  .dateTo="${{ label: string, value: string }}"    // End date config (default: { label: 'To', value: '' })
-  minDate?="YYYY-MM-DD"                           // Minimum selectable date
-  maxDate?="YYYY-MM-DD"                           // Maximum selectable date
-  compact?                                        // Compact mode for smaller UI (default: false)
-  autoCorrect?                                    // Auto-correct invalid ranges (default: true)
-  minGap?="number"                                // Minimum gap between dates in days (default: 0)
-  maxGap?="number"                                // Maximum gap between dates in days
-  defaultGap?="number"                            // Default gap when auto-setting dates (default: 1)
-  allowSameDate?                                  // Allow same date selection (default: false)
-  disabled?                                       // Disable the component
-  required?                                       // Mark as required field
-  @change=${handleChange}>                        // Fires when range changes
-</schmancy-date-range-inline>
-
-// Events
-@change  // CustomEvent<{ dateFrom: string, dateTo: string, isValid: boolean }>
-
-// Component automatically provides:
-// - Smart default dates (today to tomorrow)
-// - Auto-correction of invalid ranges
-// - Real-time validation
-// - Minimum/maximum gap enforcement
-```
-
-## Key Features
-
-### Smart Auto-Correction
-- Automatically corrects invalid date ranges (e.g., end date before start date)
-- Respects minimum and maximum gap constraints
-- Provides intelligent defaults when no dates are set
-
-### Validation
-- Real-time validation with error messages
-- Enforces date range constraints
-- Validates against min/max date boundaries
-
-### Flexible Configuration
-- Support for both date and datetime-local inputs
-- Customizable labels and gap constraints
-- Compact mode for space-constrained layouts
-
-## Usage Examples
-
-### Basic Date Range
-```html
-<schmancy-date-range-inline
-  @change=${(e) => {
-    console.log('Range:', e.detail.dateFrom, 'to', e.detail.dateTo)
-    console.log('Valid:', e.detail.isValid)
-  }}>
-</schmancy-date-range-inline>
-```
-
-### Event Booking
-```html
-<schmancy-date-range-inline
-  .dateFrom="${{ label: 'Check-in', value: '' }}"
-  .dateTo="${{ label: 'Check-out', value: '' }}"
-  minDate="${new Date().toISOString().split('T')[0]}"  // Today or later
-  minGap="1"                                           // At least 1 day stay
-  maxGap="30"                                          // Maximum 30 days
-  @change=${handleBookingDateChange}>
-</schmancy-date-range-inline>
-```
-
-### Project Timeline
-```html
-<schmancy-date-range-inline
-  type="datetime-local"
-  .dateFrom="${{ label: 'Start Time', value: '' }}"
-  .dateTo="${{ label: 'End Time', value: '' }}"
-  defaultGap="7"                                       // Default 1 week
-  allowSameDate="true"                                 // Allow same day events
-  @change=${handleTimelineChange}>
-</schmancy-date-range-inline>
-```
-
-### Compact Mode
-```html
-<div class="w-64">
-  <schmancy-date-range-inline
-    compact
-    .dateFrom="${{ label: 'From', value: '2024-01-01' }}"
-    .dateTo="${{ label: 'To', value: '2024-01-31' }}">
-  </schmancy-date-range-inline>
-</div>
-```
-
-### Vacation Planner
-```html
-<schmancy-form @submit=${handleVacationSubmit}>
-  <schmancy-input
-    label="Destination"
-    name="destination"
-    required>
-  </schmancy-input>
-
-  <schmancy-date-range-inline
-    label="Travel Dates"
-    .dateFrom="${{ label: 'Departure', value: '' }}"
-    .dateTo="${{ label: 'Return', value: '' }}"
-    minDate="${new Date().toISOString().split('T')[0]}"
-    minGap="2"                                         // Minimum 2-day trip
-    maxGap="365"                                       // Maximum 1 year
-    required
-    @change=${handleTravelDatesChange}>
-  </schmancy-date-range-inline>
-
-  <schmancy-button type="submit" variant="filled">
-    Plan Vacation
-  </schmancy-button>
-</schmancy-form>
-```
-
-### Custom Validation
-```html
-<schmancy-date-range-inline
-  .dateFrom="${{ label: 'Start', value: '' }}"
-  .dateTo="${{ label: 'End', value: '' }}"
-  autoCorrect="false"                                  // Disable auto-correction
-  @change=${(e) => {
-    if (!e.detail.isValid) {
-      // Handle validation errors manually
-      console.error('Invalid date range selected')
-    } else {
-      // Process valid range
-      updateDateRange(e.detail.dateFrom, e.detail.dateTo)
-    }
-  }}>
-</schmancy-date-range-inline>
-```
-
-## Programmatic Control
-
-```typescript
-// Get component reference
-const dateRange = document.querySelector('schmancy-date-range-inline')
-
-// Set dates programmatically
-dateRange.dateFrom = { label: 'Start', value: '2024-06-01' }
-dateRange.dateTo = { label: 'End', value: '2024-06-15' }
-
-// Listen for changes
-dateRange.addEventListener('change', (e) => {
-  const { dateFrom, dateTo, isValid } = e.detail
-  if (isValid) {
-    // Handle valid date range
-    saveBooking(dateFrom, dateTo)
-  }
-})
-```
-
-## Auto-Correction Behavior
-
-When `autoCorrect` is enabled (default), the component will:
-
-1. **Swap dates** if end date is before start date
-2. **Enforce minimum gap** by adjusting the end date
-3. **Respect maximum gap** by constraining the end date
-4. **Apply date boundaries** from minDate/maxDate properties
-
-```html
-<!-- Example: User selects end date before start date -->
-<schmancy-date-range-inline
-  .dateFrom="${{ label: 'From', value: '2024-06-15' }}"
-  .dateTo="${{ label: 'To', value: '2024-06-10' }}"
-  autoCorrect="true">
-  <!-- Component automatically corrects to: From: 2024-06-10, To: 2024-06-15 -->
-</schmancy-date-range-inline>
-```
-
-## Validation States
-
-The component provides detailed validation information:
-
-```typescript
-// Listen for validation changes
-dateRange.addEventListener('change', (e) => {
-  const { dateFrom, dateTo, isValid } = e.detail
-
-  if (isValid) {
-    console.log('✅ Valid range selected')
-  } else {
-    console.log('❌ Invalid range - check constraints')
-  }
-})
-```
-
-## Integration with Forms
-
-```html
-<schmancy-form @submit=${handleSubmit}>
-  <schmancy-date-range-inline
-    name="dateRange"
-    label="Select Date Range"
-    required
-    .dateFrom="${{ label: 'Start Date', value: this.booking.startDate }}"
-    .dateTo="${{ label: 'End Date', value: this.booking.endDate }}"
-    @change=${(e) => {
-      this.booking = {
-        ...this.booking,
-        startDate: e.detail.dateFrom,
-        endDate: e.detail.dateTo,
-        isValidRange: e.detail.isValid
-      }
-    }}>
-  </schmancy-date-range-inline>
-
-  <schmancy-button
-    type="submit"
-    variant="filled"
-    ?disabled=${!this.booking.isValidRange}>
-    Submit Booking
-  </schmancy-button>
-</schmancy-form>
-```
-
-## Styling and Theming
-
-The component inherits from `SchmancyFormField` and supports all standard form field theming:
-
-```css
-/* Custom styling */
-schmancy-date-range-inline {
-  --field-border-color: var(--schmancy-sys-color-primary-default);
-  --field-focus-color: var(--schmancy-sys-color-secondary-default);
-}
-
-/* Compact mode adjustments */
-schmancy-date-range-inline[compact] {
-  --field-padding: 0.5rem;
-  --field-font-size: 0.875rem;
-}
-```
-
-## Related Components
-
-- **[Date Range](./date-range.md)** - Dropdown-style date range picker
-- **[Input](./input.md)** - Base input component for single dates
-- **[Form](./form.md)** - Form integration and validation
-- **[Calendar](./calendar.md)** - Full calendar view for date selection
-
-## Common Use Cases
-
-1. **Booking Systems** - Hotel, flight, car rental date ranges
-2. **Project Management** - Task and milestone date ranges
-3. **Event Planning** - Event start and end times
-4. **Report Generation** - Date range filtering
-5. **Vacation Planning** - Travel date selection
-6. **Analytics Dashboards** - Time period selection
-7. **Subscription Management** - Billing period configuration

package/dist/ai/delay.md

@@ -1,158 +0,0 @@
-# Delay Component
-
-A utility component that delays the rendering of its content with sophisticated animation support and session-based memory.
-
-## Quick Start
-
-```html
-<!-- Basic delay -->
-<schmancy-delay delay="300">
-  <schmancy-card>Welcome!</schmancy-card>
-</schmancy-delay>
-
-<!-- Staggered delays for list items -->
-<div>
-  <schmancy-delay delay="100">
-    <div>First item</div>
-  </schmancy-delay>
-  <schmancy-delay delay="100">
-    <div>Second item (200ms total)</div>
-  </schmancy-delay>
-  <schmancy-delay delay="100">
-    <div>Third item (300ms total)</div>
-  </schmancy-delay>
-</div>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `delay` | `number` | `0` | Delay in milliseconds |
-| `motion` | `string` | `'flyBelow'` | Animation type: 'flyBelow', 'flyAbove', or 'fadeIn' |
-| `once` | `boolean` | `true` | Only animate once per session |
-
-## Context Integration
-
-The component participates in a delay context system, allowing nested delays to accumulate:
-
-```html
-<!-- Parent provides 500ms base delay -->
-<schmancy-delay delay="500">
-  <div>
-    <!-- Child adds 200ms (700ms total) -->
-    <schmancy-delay delay="200">
-      <schmancy-card>Nested content</schmancy-card>
-    </schmancy-delay>
-  </div>
-</schmancy-delay>
-```
-
-## Examples
-
-### Hero Section Animation
-```html
-<schmancy-delay delay="0" motion="fadeIn">
-  <h1>Welcome to Our App</h1>
-</schmancy-delay>
-<schmancy-delay delay="300" motion="flyBelow">
-  <p>Discover amazing features</p>
-</schmancy-delay>
-<schmancy-delay delay="600" motion="flyBelow">
-  <schmancy-button variant="filled">Get Started</schmancy-button>
-</schmancy-delay>
-```
-
-### Staggered List Animation
-```html
-<schmancy-list>
-  ${items.map((item, index) => html`
-    <schmancy-delay delay="${index * 100}" motion="flyBelow">
-      <schmancy-list-item>
-        ${item.title}
-      </schmancy-list-item>
-    </schmancy-delay>
-  `)}
-</schmancy-list>
-```
-
-### Dashboard Cards
-```html
-<div class="grid grid-cols-3 gap-4">
-  <schmancy-delay delay="0">
-    <schmancy-card>
-      <h3>Total Sales</h3>
-      <p>$45,231</p>
-    </schmancy-card>
-  </schmancy-delay>
-  
-  <schmancy-delay delay="150">
-    <schmancy-card>
-      <h3>New Users</h3>
-      <p>1,234</p>
-    </schmancy-card>
-  </schmancy-delay>
-  
-  <schmancy-delay delay="300">
-    <schmancy-card>
-      <h3>Active Sessions</h3>
-      <p>892</p>
-    </schmancy-card>
-  </schmancy-delay>
-</div>
-```
-
-## Features
-
-### Session Memory
-When `once` is true, the component remembers if content has been shown and skips the delay on subsequent visits within the same session.
-
-### Intelligent Staggering
-Sibling delay components automatically accumulate delays, creating smooth staggered animations without manual calculation.
-
-### Motion Types
-- `flyBelow`: Content slides up from below with fade
-- `flyAbove`: Content slides down from above with fade
-- `fadeIn`: Simple opacity fade
-
-### Performance Optimized
-- Uses native Web Animations API
-- Cleans up observers on disconnect
-- Efficient session storage usage
-
-## Animation Customization
-
-The component uses Lit's `@lit-labs/motion` for animations:
-
-```typescript
-// Animation duration and easing are configurable
-${animate({
-  in: this.motionLit,
-  keyframeOptions: { 
-    duration: 300, 
-    easing: 'ease-out' 
-  }
-})}
-```
-
-## Best Practices
-
-1. **Performance**: Use reasonable delays (typically under 1000ms)
-2. **Accessibility**: Respect `prefers-reduced-motion`
-3. **UX**: Don't delay critical content
-4. **Staggering**: Keep increments small (50-150ms) for smooth effects
-
-## Related Components
-
-- [Animated Text](./animated-text.md) - For text-specific animations
-- [Typewriter](./typewriter.md) - For typing animations
-- [Card](./card.md) - Common content to delay
-- [List](./list.md) - For staggered list animations
-
-## Use Cases
-
-1. **Landing Pages**: Create engaging hero sections
-2. **Dashboards**: Stagger widget appearances
-3. **Onboarding**: Guide user attention
-4. **Data Loading**: Smooth transitions for async content
-5. **Navigation**: Animate route transitions