@mhmo91/schmancy 0.8.6 → 0.9.3

package/ai/date-range-inline.md

@@ -1,262 +1,44 @@
-# Schmancy Date Range Inline - AI Reference
+# schmancy-date-range-inline
 
-```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
+> Smart inline from/to date picker with validation, auto-correction, and gap constraints. Simpler surface than the full `schmancy-date-range` popover.
 
+## Usage
 ```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
+  .dateFrom=${{ label: 'Check-in', value: '2026-05-01' }}
+  .dateTo=${{ label: 'Check-out', value: '2026-05-05' }}
+  min-date="2026-01-01"
+  max-date="2026-12-31"
+  .minGap=${1}
+  .maxGap=${30}
+  @change=${e => this.handleRange(e.detail)}
+></schmancy-date-range-inline>
+```
+
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `type` | `'date' \| 'datetime-local'` | `'date'` | Underlying input type |
+| `dateFrom` | `{ label, value }` | `{ label: 'From', value: '' }` | From-date configuration |
+| `dateTo` | `{ label, value }` | `{ label: 'To', value: '' }` | To-date configuration |
+| `minDate` | string | — | Minimum selectable date (ISO string) |
+| `maxDate` | string | — | Maximum selectable date (ISO string) |
+| `compact` | boolean | `false` | Tighter UI spacing |
+| `autoCorrect` | boolean | `true` | Auto-fix invalid ranges (e.g. swap if from > to) |
+| `minGap` | number | `0` | Minimum days between from and to |
+| `maxGap` | number | — | Maximum days between from and to |
+| `defaultGap` | number | `1` | Default gap when seeding the second date |
+| `allowSameDate` | boolean | `false` | Permit from === to |
+
+## Events
+| Event | Detail | When |
+|-------|--------|------|
+| `change` | `{ dateFrom, dateTo, isValid }` | Either input changes |
+
+## Behavior
+- Extends `SchmancyFormField()` — integrates with `schmancy-form` validation.
+- Auto-correction: invalid ranges flip, or the second date shifts to respect `minGap`/`maxGap`.
+- Inline (not a popover) — always visible, good for filters and trip-planning UIs.
+
+## Prefer full picker
+For a popup calendar with presets and visual selection, use [`schmancy-date-range`](./date-range.md).

package/ai/date-range.md

@@ -1,205 +1,50 @@
-# Schmancy Date Range - AI Reference
+# schmancy-date-range
 
-```js
-// Component Tag
-<schmancy-date-range
-  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?="string"                                     // Minimum selectable date
-  maxDate?="string"                                     // Maximum selectable date
-  .customPresets?="${Array<Preset>}"                    // Custom preset ranges
-  format?="string"                                      // Date format (auto-detected by type)
-  disabled?                                             // Disable the component
-  required?                                             // Mark as required field
-  placeholder?="string"                                 // Placeholder text (default: "Select date range")
-  clearable?                                            // Show clear button (default: true)
-  step?="day|week|month|year|number"                    // Navigation step (auto-detects if not set)
-  @change=${handler}>                                   // Fires when range changes
-</schmancy-date-range>
-
-// Import
-import '@schmancy/index'  // For all Schmancy components
-// Or specific import: import '@schmancy/date-range'
-
-// Types
-interface Preset {
-  label: string
-  dateFrom: string
-  dateTo: string
-}
-
-interface DateRangeChangeEvent {
-  detail: {
-    dateFrom: string
-    dateTo: string
-  }
-}
-
-// Examples
-// 1. Basic date range
-<schmancy-date-range 
-  .dateFrom="${{ label: 'Start', value: '2024-01-01' }}"
-  .dateTo="${{ label: 'End', value: '2024-12-31' }}"
-  @change="${(e) => console.log(e.detail)}"
-></schmancy-date-range>
-
-// 2. DateTime range with constraints
-<schmancy-date-range
-  type="datetime-local"
-  .dateFrom="${{ label: 'Event Start', value: '2024-03-15T09:00' }}"
-  .dateTo="${{ label: 'Event End', value: '2024-03-15T17:00' }}"
-  minDate="2024-01-01T00:00"
-  maxDate="2024-12-31T23:59"
-></schmancy-date-range>
-
-// 3. With custom presets
-<schmancy-date-range 
-  .customPresets="${[
-    { label: 'Last Sprint', dateFrom: '2024-01-01', dateTo: '2024-01-14' },
-    { label: 'Current Sprint', dateFrom: '2024-01-15', dateTo: '2024-01-28' },
-    { label: 'Holiday Season', dateFrom: '2023-11-24', dateTo: '2024-01-02' }
-  ]}"
-  @change="${updateAnalytics}"
-></schmancy-date-range>
-
-// 4. Form integration
-<schmancy-form @submit="${handleSubmit}">
-  <schmancy-date-range
-    name="project-timeline"
-    required
-    .dateFrom="${{ label: 'Project Start', value: '' }}"
-    .dateTo="${{ label: 'Project End', value: '' }}"
-  ></schmancy-date-range>
-  <schmancy-button type="submit" variant="filled">Submit</schmancy-button>
-</schmancy-form>
-
-// 5. Booking system example
-<schmancy-date-range
-  .dateFrom="${{ label: 'Check-in', value: '' }}"
-  .dateTo="${{ label: 'Check-out', value: '' }}"
-  minDate="${new Date().toISOString().split('T')[0]}"
-  required
-  placeholder="Select your travel dates"
-></schmancy-date-range>
-
-// 6. Analytics dashboard with navigation
-<schmancy-date-range
-  .dateFrom="${{ label: 'Period Start', value: startDate }}"
-  .dateTo="${{ label: 'Period End', value: endDate }}"
-  @change="${(e) => updateDashboard(e.detail)}"
-></schmancy-date-range>
-
-// 7. Fixed step navigation (calendar dialog disabled)
-<schmancy-date-range
-  step="week"
-  .dateFrom="${{ label: 'Week Start', value: weekStart }}"
-  .dateTo="${{ label: 'Week End', value: weekEnd }}"
-  minDate="2024-01-01"
-  maxDate="2024-12-31"
-  @change="${(e) => console.log('Week changed:', e.detail)}"
-></schmancy-date-range>
+> Date range selector with preset ranges, step navigation, and mobile sheet support.
 
-// 8. Custom day step navigation
+## Usage
+```html
 <schmancy-date-range
-  .step="${7}"  // Navigate by 7 days
-  .dateFrom="${{ label: 'From', value: startDate }}"
-  .dateTo="${{ label: 'To', value: endDate }}"
-></schmancy-date-range>
+  .dateFrom=${{label: 'From', value: '2024-01-01'}}
+  .dateTo=${{label: 'To', value: '2024-12-31'}}
+  @change=${(e) => handleRange(e.detail)}>
+</schmancy-date-range>
 ```
 
-## Related Components
-- **[Input](./input.md)**: Base input component for single date selection
-- **[Dialog](./dialog.md)**: Used internally for date picker modal
-- **[Button](./button.md)**: Navigation and action buttons
-- **[Surface](./surface.md)**: Container for dropdown interface
-- **[Form](./form.md)**: Form integration and validation
-- **[Icon](./icon.md)**: Navigation arrows and UI elements
-
-## Technical Details
-
-### Built-in Preset Categories
-The component includes intelligent presets organized by time period:
-
-**Days**: Today, Yesterday, Last 7/14/30/60/90 Days
-**Weeks**: This Week, Last Week, Last 2/4 Weeks  
-**Months**: This Month, Last Month, Last 3/6 Months
-**Quarters**: This Quarter, Last Quarter, Last 2/4 Quarters
-**Years**: This Year, Last Year, Year to Date
-**Hours** (datetime-local only): Last 12/24 Hours
-
-### Smart Navigation Features
-- Arrow buttons intelligently shift ranges based on detected period type or step property
-- Auto-detects appropriate step when not specified:
-  - Full year range → shifts by year
-  - Full month range → shifts by month  
-  - Full week range → shifts by week
-  - Single day → shifts by 1 day
-  - Custom range → shifts by range duration
-- When step is provided, calendar dialog becomes read-only (not disabled)
-- Preserves full period boundaries (weeks start on Monday, months on 1st)
-- Automatically detects and maintains preset selections
-- Respects min/max date boundaries during navigation
-- Keyboard shortcuts for power users
-
-### Keyboard Shortcuts
-- `PageUp`: Navigate to previous date range
-- `PageDown`: Navigate to next date range
-- `Ctrl+Home`: Jump to start of current month
-- `Ctrl+End`: Jump to end of current month
-- `Escape`: Close date picker dialog
-
-### Dialog Integration
-Uses `$dialog.component()` service to display picker in modal. Automatically finds nearest `schmancy-theme` component for proper theming context.
-
-### Date Validation
-- Ensures dateFrom is before dateTo
-- Respects min/max date constraints
-- Handles invalid input gracefully
-- Validates format based on type
-
-### Performance Optimizations
-- Memoized preset calculations
-- Efficient RxJS event handling
-- Minimal re-renders through reactive state
-- Lazy-loaded dialog content
-
-## Common Use Cases
-
-1. **Analytics Dashboard**
-   ```html
-   <schmancy-date-range
-     .customPresets="${analyticsPresets}"
-     @change="${refreshDashboard}"
-   ></schmancy-date-range>
-   ```
-
-2. **Booking/Reservation System**
-   ```html
-   <schmancy-date-range
-     .dateFrom="${{ label: 'Check-in', value: '' }}"
-     .dateTo="${{ label: 'Check-out', value: '' }}"
-     minDate="${today}"
-     required
-   ></schmancy-date-range>
-   ```
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| type | `'date'\|'datetime-local'` | `'date'` | Date input type |
+| dateFrom | `{label: string, value: string}` | `{label:'From',value:''}` | Start date |
+| dateTo | `{label: string, value: string}` | `{label:'To',value:''}` | End date |
+| minDate | string | `undefined` | Minimum selectable date |
+| maxDate | string | `undefined` | Maximum selectable date |
+| step | `'day'\|'week'\|'month'\|'year'\|number` | `undefined` | Navigation step size |
+| placeholder | string | `'Select date range'` | Display placeholder |
+| disabled | boolean | `false` | Whether disabled |
+| required | boolean | `false` | Whether required |
+| clearable | boolean | `true` | Allow clearing selection |
+| collapse | boolean | `false` | Icon-only on mobile |
+| customPresets | array | `[]` | Additional preset ranges |
+| format | string | auto | Date format string |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| change | `{ dateFrom: string, dateTo: string }` | When date range changes |
+
+## Examples
+```html
+<!-- With step navigation (arrows shift by week) -->
+<schmancy-date-range step="week"
+  .dateFrom=${{label:'From', value:'2024-03-01'}}
+  .dateTo=${{label:'To', value:'2024-03-07'}}>
+</schmancy-date-range>
 
-3. **Report Generation**
-   ```html
-   <schmancy-date-range
-     type="datetime-local"
-     .dateFrom="${{ label: 'Report Start', value: lastMonth }}"
-     .dateTo="${{ label: 'Report End', value: today }}"
-     @change="${generateReport}"
-   ></schmancy-date-range>
-   ```
+<!-- Collapsed on mobile, custom presets -->
+<schmancy-date-range collapse
+  .customPresets=${[{label:'Q1',dateFrom:'2024-01-01',dateTo:'2024-03-31'}]}>
+</schmancy-date-range>
+```
 
-4. **Event Scheduling**
-   ```html
-   <schmancy-date-range
-     type="datetime-local"
-     placeholder="Select event duration"
-     required
-     @change="${updateEventSchedule}"
-   ></schmancy-date-range>
-   ```
+Built-in presets include Today, Yesterday, This Week, This Month, This Year, and more.