@mhmo91/schmancy 0.4.73 → 0.4.75

package/ai/busy.md

@@ -170,7 +170,8 @@ color: string           // Currently not used - spinner always uses secondary co
 </schmancy-busy>
 
 // Programmatic usage (service API)
-import { $busy } from 'schmancy';
+import { $busy } from '@schmancy/index';
+// Or specific import: import { $busy } from '@schmancy/busy';
 
 // Show busy indicator
 $busy.show({

package/ai/button.md

@@ -1,6 +1,10 @@
 # Schmancy Button - AI Reference
 
 ```js
+// Import
+import '@schmancy/index'  // For all Schmancy components
+// Or specific import: import '@schmancy/button'
+
 // Component Tags
 <schmancy-button
   variant="elevated|filled|filled tonal|outlined|text"  // Visual style (default: "text")

package/ai/code-highlight.md

@@ -3,7 +3,8 @@
 ## Quick Start
 
 ```typescript
-import '@mhmo91/schmancy/code-highlight'
+import '@schmancy/index'  // For all Schmancy components
+// Or specific import: import '@schmancy/code-highlight'
 ```
 
 ## Component Overview

package/ai/content-drawer.md

@@ -30,7 +30,8 @@ Sliding panel system for navigation, overlays, and responsive layouts.
 ## Context API
 
 ```js
-import { contentDrawerContext } from '@schmancy/content-drawer'
+import { contentDrawerContext } from '@schmancy/index'
+// Or specific import: import { contentDrawerContext } from '@schmancy/content-drawer'
 
 // Create drawer controller
 const drawer = contentDrawerContext.create('drawer-id')

package/ai/context.md

@@ -28,7 +28,8 @@ A context is a reactive container that:
 ### Basic Syntax
 
 ```typescript
-import { createContext } from '@mhmo91/schmancy'
+import { createContext } from '@schmancy/index'
+// Or specific import: import { createContext } from '@schmancy/store'
 
 export const contextName = createContext<Type>(
   initialValue,    // Default value
@@ -131,7 +132,11 @@ user: AuthUser | null | undefined
 ### Basic Component Integration
 
 ```typescript
-import { $LitElement, select } from '@mhmo91/schmancy'
+import { select } from '@schmancy/index'
+import { $LitElement } from '@mixins/index'
+// Or specific imports:
+// import { select } from '@schmancy/store'
+// import { $LitElement } from '@mixins/litElement'
 import { userContext, productsContext } from './contexts'
 
 @customElement('my-component')

package/ai/countries.md

@@ -3,7 +3,8 @@
 ## Quick Start
 
 ```typescript
-import '@mhmo91/schmancy/extra/countries'
+import '@schmancy/index'  // For all Schmancy components
+// Or specific import: import '@schmancy/extra' // Countries are part of extra
 ```
 
 ## Component Overview

package/ai/date-range-inline.md

@@ -0,0 +1,262 @@
+# 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/ai/date-range.md

@@ -19,7 +19,8 @@
 </schmancy-date-range>
 
 // Import
-import '@mhmo91/schmancy/date-range'
+import '@schmancy/index'  // For all Schmancy components
+// Or specific import: import '@schmancy/date-range'
 
 // Types
 interface Preset {

package/ai/details.md

@@ -0,0 +1,194 @@
+# Schmancy Details - AI Reference
+
+```js
+// Import
+import '@schmancy/index'  // For all Schmancy components
+// Or specific import: import '@schmancy/details'
+
+// Basic Details Component
+<schmancy-details
+  summary="Section Title"                          // Summary text (also via slot)
+  open?                                           // Whether details is expanded (default: false)
+  variant="default|outlined|filled|elevated"      // Visual variant (default: "default")
+  @toggle=${handleToggle}>                        // Fires when expanded/collapsed
+  <!-- Content goes here -->
+  <p>This content is shown when the details are expanded.</p>
+</schmancy-details>
+
+// Events
+@toggle    // CustomEvent<{ open: boolean }> - Fires when toggling open/closed state
+
+// Methods
+details.open -> boolean     // Get/set open state
+details.variant -> string   // Get/set visual variant
+details.summary -> string   // Get/set summary text
+```
+
+## Visual Variants
+
+### Default
+```html
+<schmancy-details summary="Default Details">
+  <p>Plain details with no special styling.</p>
+</schmancy-details>
+```
+
+### Outlined
+```html
+<schmancy-details variant="outlined" summary="Outlined Details">
+  <p>Details with a border outline.</p>
+</schmancy-details>
+```
+
+### Filled
+```html
+<schmancy-details variant="filled" summary="Filled Details">
+  <p>Details with a filled background.</p>
+</schmancy-details>
+```
+
+### Elevated
+```html
+<schmancy-details variant="elevated" summary="Elevated Details">
+  <p>Details with elevation shadow that increases when opened.</p>
+</schmancy-details>
+```
+
+## Usage Examples
+
+### FAQ Section
+```html
+<div class="space-y-4">
+  <schmancy-details
+    variant="outlined"
+    summary="How do I get started?">
+    <p>To get started, simply install the package and import the components you need.</p>
+    <schmancy-button variant="text" href="/docs">View Documentation</schmancy-button>
+  </schmancy-details>
+
+  <schmancy-details
+    variant="outlined"
+    summary="What browsers are supported?">
+    <p>We support all modern browsers including Chrome, Firefox, Safari, and Edge.</p>
+  </schmancy-details>
+
+  <schmancy-details
+    variant="outlined"
+    summary="Is this free to use?">
+    <p>Yes! This library is open source and free to use in your projects.</p>
+  </schmancy-details>
+</div>
+```
+
+### Settings Panel
+```html
+<schmancy-details
+  variant="filled"
+  summary="Advanced Settings"
+  @toggle=${(e) => console.log('Settings panel:', e.detail.open ? 'opened' : 'closed')}>
+
+  <div class="space-y-4 mt-4">
+    <schmancy-checkbox label="Enable notifications"></schmancy-checkbox>
+    <schmancy-checkbox label="Auto-save drafts"></schmancy-checkbox>
+    <schmancy-select label="Theme preference">
+      <schmancy-option value="light">Light</schmancy-option>
+      <schmancy-option value="dark">Dark</schmancy-option>
+      <schmancy-option value="auto">Auto</schmancy-option>
+    </schmancy-select>
+  </div>
+</schmancy-details>
+```
+
+### Product Information
+```html
+<schmancy-card>
+  <div slot="content">
+    <h2>Product Name</h2>
+    <p>Basic product description...</p>
+
+    <div class="space-y-2 mt-4">
+      <schmancy-details variant="elevated" summary="Technical Specifications">
+        <div class="grid grid-cols-2 gap-4 text-sm">
+          <div><strong>Dimensions:</strong> 10" x 8" x 2"</div>
+          <div><strong>Weight:</strong> 2.5 lbs</div>
+          <div><strong>Material:</strong> Aluminum</div>
+          <div><strong>Color:</strong> Space Gray</div>
+        </div>
+      </schmancy-details>
+
+      <schmancy-details variant="elevated" summary="Shipping & Returns">
+        <div class="text-sm space-y-2">
+          <p><strong>Free shipping</strong> on orders over $50</p>
+          <p><strong>30-day return policy</strong> - no questions asked</p>
+          <p><strong>2-year warranty</strong> included</p>
+        </div>
+      </schmancy-details>
+
+      <schmancy-details variant="elevated" summary="Customer Reviews">
+        <div class="space-y-3">
+          <div class="border-l-2 border-primary-default pl-3">
+            <p class="text-sm">"Great quality product, exactly as described."</p>
+            <p class="text-xs text-surface-onVariant">- Sarah M.</p>
+          </div>
+          <div class="border-l-2 border-primary-default pl-3">
+            <p class="text-sm">"Fast shipping and excellent customer service."</p>
+            <p class="text-xs text-surface-onVariant">- Mike R.</p>
+          </div>
+        </div>
+      </schmancy-details>
+    </div>
+  </div>
+</schmancy-card>
+```
+
+## Customization with Slots
+
+You can use slots for more complex summary content:
+
+```html
+<schmancy-details variant="outlined">
+  <div slot="summary" class="flex items-center gap-3">
+    <schmancy-avatar src="/user.jpg" size="sm"></schmancy-avatar>
+    <div>
+      <div class="font-medium">User Profile</div>
+      <div class="text-xs text-surface-onVariant">Last updated 2 hours ago</div>
+    </div>
+    <schmancy-badge color="success">Online</schmancy-badge>
+  </div>
+
+  <!-- Content -->
+  <div class="mt-4">
+    <p>User profile information and settings...</p>
+  </div>
+</schmancy-details>
+```
+
+## Accessibility
+
+- Uses semantic HTML `<details>` and `<summary>` elements
+- Keyboard navigation fully supported (Enter/Space to toggle)
+- Screen reader compatible with proper ARIA attributes
+- Focus management with visible focus indicators
+
+## Animation
+
+The component includes a smooth slide-down animation when content is revealed:
+- 200ms duration with ease-out timing
+- Slight upward translation and fade-in effect
+- No animation when collapsing (native browser behavior)
+
+## Related Components
+
+- **[Card](./card.md)** - Container for details in card layouts
+- **[List](./list.md)** - Use with list items for expandable content
+- **[Typography](./typography.md)** - For summary and content text styling
+- **[Surface](./surface.md)** - Background surface theming
+
+## Common Use Cases
+
+1. **FAQ Sections** - Collapsible question/answer pairs
+2. **Settings Panels** - Group related configuration options
+3. **Product Details** - Specifications, shipping, reviews
+4. **Documentation** - Code examples, detailed explanations
+5. **Form Sections** - Group related form fields
+6. **Navigation** - Collapsible menu sections

package/ai/dialog.md

@@ -4,7 +4,8 @@
 
 ### Service API (Recommended)
 ```js
-import { $dialog } from '@mhmo91/schmancy'
+import { $dialog } from '@schmancy/index'
+// Or specific import: import { $dialog } from '@schmancy/dialog'
 
 // Simple confirmation
 const confirmed = await $dialog.ask("Save changes?")

package/ai/directives.md

@@ -3,7 +3,8 @@
 ## Quick Start
 
 ```typescript
-import { ripple, color, height, visibility } from '@mhmo91/schmancy'
+import { ripple, color, height, visibility } from '@schmancy/index'
+// Or specific import: import { ripple, color, height, visibility } from '@schmancy/directives'
 ```
 
 ## Directives Overview

package/ai/form.md

@@ -2,12 +2,12 @@
 
 ```js
 // Form Container
-<sch-form
+<schmancy-form
   novalidate?                              // Skip form validation on submit
   @submit=${handleSubmit}                  // Form submission event
   @reset=${handleReset}>                   // Form reset event
   <!-- Form fields go here -->
-</sch-form>
+</schmancy-form>
 
 // Form Methods
 form.submit() -> boolean                   // Submit the form programmatically
@@ -22,7 +22,7 @@ form.checkValidity() -> boolean           // Check validity without showing mess
 
 // Examples
 // 1. Basic form with validation
-<sch-form @submit=${(e) => {
+<schmancy-form @submit=${(e) => {
   const formData = e.detail;
   console.log('Form submitted:', formData);
   // Convert FormData to object if needed
@@ -37,10 +37,10 @@ form.checkValidity() -> boolean           // Check validity without showing mess
   </schmancy-input>
   
   <schmancy-button type="submit">Submit</schmancy-button>
-</sch-form>
+</schmancy-form>
 
 // 2. Form with multiple fields and validation
-<sch-form 
+<schmancy-form 
   @submit=${async (e) => {
     const formData = e.detail;
     // Send to server
@@ -55,7 +55,7 @@ form.checkValidity() -> boolean           // Check validity without showing mess
   <schmancy-checkbox name="remember" label="Remember me"></schmancy-checkbox>
   
   <schmancy-button type="submit">Login</schmancy-button>
-</sch-form>
+</schmancy-form>
 ```
 
 ## Related Components
@@ -93,13 +93,13 @@ placeholder="Text"      // Placeholder text (where applicable)
 
 1. **Multi-step forms**: Create wizard-like experiences
    ```html
-   <sch-form id="step1" @submit=${nextStep}>
+   <schmancy-form id="step1" @submit=${nextStep}>
      <!-- Step 1 fields -->
-   </sch-form>
+   </schmancy-form>
    
-   <sch-form id="step2" @submit=${submitAll} style="display: none;">
+   <schmancy-form id="step2" @submit=${submitAll} style="display: none;">
      <!-- Step 2 fields -->
-   </sch-form>
+   </schmancy-form>
    ```
 
 2. **Programmatic form submission**