@mhmo91/schmancy 0.4.3 → 0.4.4

package/dist/ai/date-range.md

@@ -1,142 +1,178 @@
-# Date Range Component
+# Schmancy Date Range - AI Reference
 
-A sophisticated date range selector that supports both date and datetime selection with presets, manual input, and intelligent range navigation.
+```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)
+  @change=${handler}>                                   // Fires when range changes
+</schmancy-date-range>
+
+// Import
+import '@mhmo91/schmancy/date-range'
+
+// Types
+interface Preset {
+  label: string
+  dateFrom: string
+  dateTo: string
+}
 
-## Quick Start
+interface DateRangeChangeEvent {
+  detail: {
+    dateFrom: string
+    dateTo: string
+  }
+}
 
-```html
-<!-- Basic date range selector -->
+// 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>
 
-<!-- DateTime selector with custom presets -->
-<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: '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>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `type` | `'date' \| 'datetime-local'` | `'date'` | Date input type |
-| `dateFrom` | `{ label: string, value: string }` | `{ label: 'From', value: '' }` | Start date configuration |
-| `dateTo` | `{ label: string, value: string }` | `{ label: 'To', value: '' }` | End date configuration |
-| `minDate` | `string` | - | Minimum selectable date |
-| `maxDate` | `string` | - | Maximum selectable date |
-| `customPresets` | `Array<{ label, dateFrom, dateTo }>` | `[]` | Custom preset ranges |
-| `format` | `string` | - | Date format (defaults based on type) |
-| `disabled` | `boolean` | `false` | Disable the component |
-| `required` | `boolean` | `false` | Mark as required field |
-| `placeholder` | `string` | `'Select date range'` | Placeholder text |
-| `clearable` | `boolean` | `true` | Show clear button |
-
-## Events
-
-### change
-Fired when date range changes.
-
-```typescript
-interface DateRangeChangeEvent {
-  detail: {
-    dateFrom: string;
-    dateTo: string;
-  }
-}
-```
-
-## Examples
 
-### With Form Integration
-```html
-<schmancy-form>
+// 4. Form integration
+<schmancy-form @submit="${handleSubmit}">
   <schmancy-date-range
     name="project-timeline"
     required
     .dateFrom="${{ label: 'Project Start', value: '' }}"
     .dateTo="${{ label: 'Project End', value: '' }}"
-    @change="${(e) => console.log('Timeline:', e.detail)}"
   ></schmancy-date-range>
+  <schmancy-button type="submit" variant="filled">Submit</schmancy-button>
 </schmancy-form>
-```
 
-### Analytics Dashboard
-```html
-<!-- Date range for analytics with custom presets -->
+// 5. Booking system example
 <schmancy-date-range
-  .customPresets="${[
-    { label: 'Holiday Season', dateFrom: '2023-11-24', dateTo: '2024-01-02' },
-    { label: 'Q4 2023', dateFrom: '2023-10-01', dateTo: '2023-12-31' }
-  ]}"
-  @change="${updateAnalytics}"
+  .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>
-```
 
-### DateTime Range for Events
-```html
+// 6. Analytics dashboard with navigation
 <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"
+  .dateFrom="${{ label: 'Period Start', value: startDate }}"
+  .dateTo="${{ label: 'Period End', value: endDate }}"
+  @change="${(e) => updateDashboard(e.detail)}"
 ></schmancy-date-range>
 ```
 
-## Features
-
-### Built-in Presets
-The component includes intelligent preset categories:
-- **Days**: Today, Yesterday, Last 7/30/90 Days
-- **Weeks**: This Week, Last Week
-- **Months**: This Month, Last Month
-- **Quarters**: This Quarter, Last Quarter
-- **Years**: This Year, Last Year, Year to Date
-- **Hours** (datetime-local): Last 12/24 Hours
-
-### Smart Navigation
-- Arrow buttons shift ranges intelligently based on duration
-- Maintains full period boundaries (weeks, months, quarters)
-- Automatically detects and preserves preset selections
-
-### Responsive Dropdown
-- Floating UI positioning with automatic adjustments
-- Categorized preset display
-- Manual date inputs with validation
-
-## Styling
-
-The component uses semantic color tokens and supports theming:
-
-```css
-schmancy-date-range {
-  --animation-duration: 200ms;
-  --dropdown-min-width: 16rem;
-  --dropdown-max-width: 24rem;
-}
-```
-
-## Accessibility
-
-- Full keyboard navigation support
-- ARIA labels and roles
-- Focus management
-- Screen reader announcements
-
 ## Related Components
-
-- [Input](./input.md) - For single date inputs
-- [Form](./form.md) - Form integration
-- [Button](./button.md) - Used for triggers and actions
-- [Surface](./surface.md) - Dropdown container
-
-## Best Practices
-
-1. **Validation**: Always validate date ranges on the backend
-2. **Timezones**: Consider timezone handling for datetime-local inputs
-3. **Presets**: Add domain-specific presets for better UX
-4. **Loading States**: Show loading indicators when fetching data based on range changes
+- **[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
+- Preserves full period boundaries (weeks start on Monday, months on 1st)
+- Automatically detects and maintains preset selections
+- 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>
+   ```
+
+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>
+   ```
+
+4. **Event Scheduling**
+   ```html
+   <schmancy-date-range
+     type="datetime-local"
+     placeholder="Select event duration"
+     required
+     @change="${updateEventSchedule}"
+   ></schmancy-date-range>
+   ```

package/dist/ai/typography.md

@@ -1,170 +1,186 @@
 # Schmancy Typography - AI Reference
 
 ```js
-// Basic Typography
+// Component Tag
 <schmancy-typography
-  variant="h1|h2|h3|h4|h5|h6|subtitle1|subtitle2|body1|body2|button|caption|overline"
-  color="primary|secondary|tertiary|error|text-primary|text-secondary|text-disabled"
-  align="left|center|right|justify"
-  weight="thin|light|regular|medium|bold"
-  transform="none|uppercase|lowercase|capitalize"
-  truncate?
-  no-wrap?
-  gutter-bottom?>
-  Text content goes here
+  type="display|headline|title|label|body"                // Typography scale type
+  token="lg|md|sm"                                        // Size token within type
+  class?="additional-tailwind-classes"                    // Additional styling
+  tag?="h1|h2|h3|h4|h5|h6|p|span|div"                   // HTML element (auto-determined by type/token)
+  @click=${handler}>                                      // Click handler
+  <!-- Text content or HTML -->
 </schmancy-typography>
 
-// Typography heading variants
-<schmancy-typography variant="h1">Heading 1</schmancy-typography>
-<schmancy-typography variant="h2">Heading 2</schmancy-typography>
-<schmancy-typography variant="h3">Heading 3</schmancy-typography>
-<schmancy-typography variant="h4">Heading 4</schmancy-typography>
-<schmancy-typography variant="h5">Heading 5</schmancy-typography>
-<schmancy-typography variant="h6">Heading 6</schmancy-typography>
-
-// Typography body variants
-<schmancy-typography variant="subtitle1">Subtitle 1</schmancy-typography>
-<schmancy-typography variant="subtitle2">Subtitle 2</schmancy-typography>
-<schmancy-typography variant="body1">Body 1 text</schmancy-typography>
-<schmancy-typography variant="body2">Body 2 text</schmancy-typography>
-<schmancy-typography variant="button">Button text</schmancy-typography>
-<schmancy-typography variant="caption">Caption text</schmancy-typography>
-<schmancy-typography variant="overline">Overline text</schmancy-typography>
-
-// Typography Properties
-variant: string        // Text style variant
-color: string          // Text color
-align: string          // Text alignment
-weight: string         // Font weight
-transform: string      // Text transformation
-truncate: boolean      // Truncate overflow with ellipsis
-noWrap: boolean        // Prevent text wrapping
-gutterBottom: boolean  // Add margin at the bottom
-italic: boolean        // Italic style
-underline: boolean     // Underline text
-lineHeight: string     // Line height
-letterSpacing: string  // Letter spacing
-fontFamily: string     // Font family
-size: string           // Custom font size (overrides variant)
-responsive: boolean    // Apply responsive sizing
+// Import
+import '@mhmo91/schmancy/typography'
+
+// Typography Scale Reference
+// Display: lg (57/64), md (45/52), sm (36/44)
+// Headline: lg (32/40), md (28/36), sm (24/32)
+// Title: lg (22/28), md (16/24), sm (14/20)
+// Label: lg (14/20), md (12/16), sm (11/16)
+// Body: lg (16/24), md (14/20), sm (12/16)
 
 // Examples
-// Basic usage
-<schmancy-typography variant="h2" color="primary">
-  Welcome to Our Application
+// 1. Page heading (Display)
+<schmancy-typography type="display" token="lg">
+  Welcome to Schmancy
 </schmancy-typography>
 
-<schmancy-typography variant="body1">
-  This is a paragraph of text that demonstrates the body1 typography variant.
-  It's commonly used for the main content text on a page.
+// 2. Section heading (Headline)
+<schmancy-typography type="headline" token="md">
+  Getting Started
 </schmancy-typography>
 
-// Styled text
-<schmancy-typography
-  variant="subtitle1"
-  weight="bold"
-  color="secondary"
-  transform="uppercase">
-  Important Notice
+// 3. Card title
+<schmancy-typography type="title" token="lg">
+  User Profile Settings
 </schmancy-typography>
 
-// Truncated text
-<schmancy-typography
-  variant="body2"
-  truncate
-  style="max-width: 200px;">
-  This is a very long text that will be truncated with an ellipsis when it exceeds the container width.
+// 4. Form label
+<schmancy-typography type="label" token="md">
+  Email Address
 </schmancy-typography>
 
-// Responsive headings
-<schmancy-typography
-  variant="h1"
-  responsive
-  align="center"
-  gutter-bottom>
-  Responsive Heading
+// 5. Body text
+<schmancy-typography type="body" token="md">
+  This is the main content paragraph with medium body text.
 </schmancy-typography>
 
-// Text with custom styling
-<schmancy-typography
-  variant="body1"
-  italic
-  letter-spacing="0.5px"
-  line-height="1.8">
-  This text has custom letter spacing and line height, with italic styling.
+// 6. With additional styling
+<schmancy-typography type="headline" token="sm" class="text-primary mb-4">
+  Highlighted Section
 </schmancy-typography>
 
-// Text with different weights
-<div>
-  <schmancy-typography variant="body1" weight="thin">
-    This text has thin weight.
-  </schmancy-typography>
-  
-  <schmancy-typography variant="body1" weight="light">
-    This text has light weight.
-  </schmancy-typography>
-  
-  <schmancy-typography variant="body1" weight="regular">
-    This text has regular weight.
+// 7. Custom tag usage
+<schmancy-typography type="display" token="md" tag="h1">
+  Main Page Title
+</schmancy-typography>
+
+// 8. Clickable text
+<schmancy-typography type="body" token="md" class="cursor-pointer hover:text-primary" @click="${handleClick}">
+  Click me for more information
+</schmancy-typography>
+
+// 9. Mixed content with HTML
+<schmancy-typography type="body" token="lg">
+  This text contains <strong>bold</strong> and <em>italic</em> elements.
+</schmancy-typography>
+
+// 10. Multiple typography in a card
+<schmancy-card class="p-6">
+  <schmancy-typography type="headline" token="sm" class="mb-2 block">
+    Card Title
   </schmancy-typography>
-  
-  <schmancy-typography variant="body1" weight="medium">
-    This text has medium weight.
+  <schmancy-typography type="body" token="md" class="text-surface-onVariant mb-4 block">
+    This is a description that provides more context about the card content.
   </schmancy-typography>
-  
-  <schmancy-typography variant="body1" weight="bold">
-    This text has bold weight.
+  <schmancy-typography type="label" token="lg" class="text-primary">
+    View Details →
   </schmancy-typography>
-</div>
-
-// Typography in a card
-<schmancy-card>
-  <schmancy-card-content>
-    <schmancy-typography variant="h4" gutter-bottom>
-      Card Title
-    </schmancy-typography>
-    
-    <schmancy-typography variant="body2" color="text-secondary" gutter-bottom>
-      Posted on January 1, 2023
-    </schmancy-typography>
-    
-    <schmancy-typography variant="body1">
-      This is the main content of the card. It uses the body1 typography variant
-      which is suitable for longer text content.
-    </schmancy-typography>
-  </schmancy-card-content>
-  
-  <schmancy-card-actions>
-    <schmancy-button>
-      <schmancy-typography variant="button">
-        Read More
-      </schmancy-typography>
-    </schmancy-button>
-  </schmancy-card-actions>
 </schmancy-card>
+```
 
-// Error message
-<schmancy-typography
-  variant="body2"
-  color="error"
-  gutter-bottom>
-  The username or password you entered is incorrect.
-</schmancy-typography>
+## Related Components
+- **[Card](./card.md)**: Often used within cards for titles and content
+- **[Button](./button.md)**: Typography can be used within buttons for custom text
+- **[Surface](./surface.md)**: Typography inherits color from surface containers
+- **[Form](./form.md)**: Labels and helper text in forms
+- **[Table](./table.md)**: Headers and cell content formatting
 
-// Caption with custom size
-<schmancy-typography
-  variant="caption"
-  color="text-secondary"
-  size="10px">
-  * Terms and conditions apply
-</schmancy-typography>
+## Technical Details
 
-// Paragraph with custom font family
-<schmancy-typography
-  variant="body1"
-  font-family="'Georgia', serif"
-  line-height="1.7">
-  This paragraph uses a serif font for a more traditional typographic style.
-  Custom font families can be specified when needed for special sections.
-</schmancy-typography>
-```
+### Typography Scale System
+Material Design 3 typography scale with 5 scales, each with 3 sizes:
+
+**Display** - Largest text for big statements
+- `lg`: 57px/64px line-height
+- `md`: 45px/52px line-height
+- `sm`: 36px/44px line-height
+
+**Headline** - Section headers and important titles
+- `lg`: 32px/40px line-height
+- `md`: 28px/36px line-height
+- `sm`: 24px/32px line-height
+
+**Title** - Smaller titles and subtitles
+- `lg`: 22px/28px line-height
+- `md`: 16px/24px line-height
+- `sm`: 14px/20px line-height
+
+**Label** - UI labels and buttons
+- `lg`: 14px/20px line-height
+- `md`: 12px/16px line-height
+- `sm`: 11px/16px line-height
+
+**Body** - Main content text
+- `lg`: 16px/24px line-height
+- `md`: 14px/20px line-height
+- `sm`: 12px/16px line-height
+
+### Automatic Tag Selection
+The component automatically selects appropriate HTML tags:
+- Display: `h1`, `h2`, `h3`
+- Headline: `h3`, `h4`, `h5`
+- Title: `h5`, `h6`, `p`
+- Label: `span`
+- Body: `p`
+
+### Theme Integration
+Typography automatically inherits colors from the theme:
+- Uses `color: var(--schmancy-sys-color-surface-on)` by default
+- Respects surface container colors
+- Can be overridden with Tailwind classes
+
+### CSS Custom Properties
+The component uses Material Design 3 type scale tokens:
+```css
+--schmancy-sys-typescale-[type]-[token]-size
+--schmancy-sys-typescale-[type]-[token]-line-height
+--schmancy-sys-typescale-[type]-[token]-weight
+--schmancy-sys-typescale-[type]-[token]-letter-spacing
+```
+
+## Common Use Cases
+
+1. **Page Layout**
+   ```html
+   <schmancy-typography type="display" token="md" class="mb-4 block">
+     Dashboard
+   </schmancy-typography>
+   <schmancy-typography type="body" token="lg" class="text-surface-onVariant block">
+     Welcome back! Here's your activity summary.
+   </schmancy-typography>
+   ```
+
+2. **Form Fields**
+   ```html
+   <schmancy-typography type="label" token="md" class="mb-2 block">
+     Username
+   </schmancy-typography>
+   <schmancy-input placeholder="Enter username"></schmancy-input>
+   ```
+
+3. **Data Display**
+   ```html
+   <schmancy-typography type="headline" token="md" class="text-primary block">
+     $1,234.56
+   </schmancy-typography>
+   <schmancy-typography type="label" token="sm" class="text-surface-onVariant">
+     Total Revenue
+   </schmancy-typography>
+   ```
+
+4. **List Items**
+   ```html
+   <div class="space-y-4">
+     <div>
+       <schmancy-typography type="title" token="md" class="block">
+         Feature One
+       </schmancy-typography>
+       <schmancy-typography type="body" token="sm" class="text-surface-onVariant block">
+         Description of the first feature
+       </schmancy-typography>
+     </div>
+   </div>
+   ```

package/dist/{animated-text-C63wwL5H.js → animated-text-C14QnAsk.js}

@@ -1,8 +1,8 @@
 import { concat as u, interval as g, startWith as y, filter as h, take as d, fromEvent as f, throttleTime as w, map as b, distinctUntilChanged as $, tap as c } from "rxjs";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { $ as x } from "./litElement.mixin-BC40ZfGG.js";
-import "./tailwind.mixin-Ba46CZMW.js";
+import { $ as x } from "./litElement.mixin-DJxjDwEr.js";
+import "./tailwind.mixin-DauVaFKt.js";
 import { css as S, html as Z } from "lit";
 import { property as a, queryAssignedNodes as v, query as m, customElement as A } from "lit/decorators.js";
 var E = Object.defineProperty, O = Object.getOwnPropertyDescriptor, e = (r, s, n, i) => {
@@ -72,4 +72,4 @@ let t = class extends x(S`
   }
 };
 e([a({ type: String })], t.prototype, "ease", 2), e([a({ type: Number })], t.prototype, "delay", 2), e([a({ type: Number })], t.prototype, "stagger", 2), e([a({ type: Number })], t.prototype, "duration", 2), e([a({ type: Array })], t.prototype, "scale", 2), e([a({ type: Array })], t.prototype, "opacity", 2), e([a({ type: Array })], t.prototype, "translateX", 2), e([a({ type: Array })], t.prototype, "translateY", 2), e([a({ type: Array })], t.prototype, "translateZ", 2), e([a({ type: Array })], t.prototype, "rotateZ", 2), e([a({ type: Boolean })], t.prototype, "resetOnScroll", 2), e([v()], t.prototype, "defaultSlot", 2), e([m(".letters")], t.prototype, "letters", 2), e([m(".ml7")], t.prototype, "ml7", 2), t = e([A("schmancy-animated-text")], t);
-//# sourceMappingURL=animated-text-C63wwL5H.js.map
+//# sourceMappingURL=animated-text-C14QnAsk.js.map