@mhmo91/schmancy 0.8.6 → 0.9.3

package/ai/timezone.md

@@ -1,276 +0,0 @@
-# Schmancy Timezone Select - AI Reference
-
-## Quick Start
-
-```typescript
-import '@schmancy/index'  // For all Schmancy components
-// Or specific import: import '@schmancy/extra' // Timezone is part of extra
-```
-
-## Component Overview
-
-A timezone selection component with autocomplete functionality, providing a comprehensive list of global timezones with UTC offsets and region information.
-
-## API
-
-```typescript
-// Timezone Select Component
-<schmancy-select-timezones
-  value?="string"                    // Selected timezone ID
-  label?="string"                    // Label text (default: "Timezone")
-  hint?="string"                     // Helper text (default: "Please select a timezone")
-  placeholder?="string"              // Placeholder (default: "Select a timezone")
-  name?="string"                     // Form field name
-  required?="boolean"                // Required field
-  @change=${handleChange}>           // Selection change event
-</schmancy-select-timezones>
-
-// Component Properties
-value: string         // Timezone identifier (e.g., "America/New_York")
-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 timezone selection changes
-
-// Methods
-checkValidity() -> boolean      // Validate selection
-reportValidity() -> boolean     // Report validation state
-setCustomValidity(message) -> void  // Set custom error
-```
-
-## Examples
-
-### Basic Usage
-
-```typescript
-// Simple timezone selector
-<schmancy-select-timezones 
-  @change=${(e) => console.log('Selected:', e.detail.value)}>
-</schmancy-select-timezones>
-
-// With initial value
-<schmancy-select-timezones 
-  value="America/New_York"
-  @change=${handleTimezoneChange}>
-</schmancy-select-timezones>
-
-// Required field
-<schmancy-select-timezones 
-  required
-  name="timezone"
-  label="Your Timezone"
-  hint="Used for scheduling">
-</schmancy-select-timezones>
-```
-
-### Form Integration
-
-```typescript
-// User preferences form
-<schmancy-form @submit=${handleSavePreferences}>
-  <schmancy-select-timezones 
-    name="timezone" 
-    value=${this.userTimezone}
-    required>
-  </schmancy-select-timezones>
-  
-  <schmancy-select-countries 
-    name="country" 
-    value=${this.userCountry}>
-  </schmancy-select-countries>
-  
-  <schmancy-button type="submit" variant="filled">
-    Save Preferences
-  </schmancy-button>
-</schmancy-form>
-```
-
-### Real-World Examples
-
-```typescript
-// Meeting scheduler with timezone
-class MeetingScheduler extends LitElement {
-  @state() selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  @state() meetingTime = '';
-  
-  render() {
-    return html`
-      <schmancy-surface class="p-6">
-        <schmancy-typography type="headline" token="sm" class="mb-4 block">
-          Schedule Meeting
-        </schmancy-typography>
-        
-        <schmancy-form @submit=${this.scheduleMeeting}>
-          <div class="space-y-4">
-            <schmancy-input 
-              type="datetime-local"
-              label="Meeting Time"
-              name="time"
-              required
-              @change=${(e) => this.meetingTime = e.detail.value}>
-            </schmancy-input>
-            
-            <schmancy-select-timezones 
-              name="timezone"
-              value=${this.selectedTimezone}
-              @change=${this.handleTimezoneChange}>
-            </schmancy-select-timezones>
-            
-            <div class="bg-surface-container p-3 rounded">
-              <schmancy-typography type="body" token="sm">
-                ${this.getLocalTimeDisplay()}
-              </schmancy-typography>
-            </div>
-          </div>
-          
-          <schmancy-button type="submit" variant="filled" class="mt-4">
-            Schedule
-          </schmancy-button>
-        </schmancy-form>
-      </schmancy-surface>
-    `
-  }
-  
-  getLocalTimeDisplay() {
-    if (!this.meetingTime || !this.selectedTimezone) return '';
-    // Convert to different timezones for display
-    const date = new Date(this.meetingTime);
-    return `Local time: ${date.toLocaleString('en-US', { 
-      timeZone: this.selectedTimezone 
-    })}`;
-  }
-}
-
-// User profile with auto-detection
-class UserProfile extends LitElement {
-  @state() detectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  
-  connectedCallback() {
-    super.connectedCallback();
-    // Auto-detect user's timezone
-    this.requestUpdate();
-  }
-  
-  render() {
-    return html`
-      <div class="space-y-4">
-        <schmancy-typography type="body" token="sm" class="text-surface-onVariant">
-          Detected timezone: ${this.detectedTimezone}
-        </schmancy-typography>
-        
-        <schmancy-select-timezones 
-          value=${this.detectedTimezone}
-          label="Confirm your timezone"
-          hint="We'll use this for notifications and scheduling"
-          @change=${this.updateTimezone}>
-        </schmancy-select-timezones>
-        
-        <schmancy-button 
-          variant="filled" 
-          @click=${this.saveProfile}>
-          Save Profile
-        </schmancy-button>
-      </div>
-    `
-  }
-}
-```
-
-## Timezone Data Structure
-
-Each timezone in the dataset includes:
-
-```typescript
-interface Timezone {
-  text: string;   // Display text with offset (e.g., "(UTC-05:00) Eastern Time")
-  value: string;  // Timezone ID (e.g., "America/New_York")
-  offset: string; // UTC offset (e.g., "-05:00")
-  abbr: string;   // Abbreviation (e.g., "EST")
-}
-
-// Example:
-{
-  text: "(UTC-05:00) Eastern Time (US & Canada)",
-  value: "America/New_York",
-  offset: "-05:00",
-  abbr: "EST"
-}
-```
-
-## Features
-
-- **Comprehensive List**: All global timezones with regions
-- **UTC Offsets**: Visual offset display for easy identification
-- **Search**: Filter by timezone name, city, or offset
-- **Auto-detection**: Can detect user's current timezone
-- **Daylight Saving**: Handles DST automatically
-- **Form Integration**: Works with native forms
-- **Grouped Display**: Timezones grouped by offset
-
-## Common Use Cases
-
-1. **User Preferences**: Setting user's default timezone
-2. **Event Scheduling**: Selecting timezone for meetings/events
-3. **Notifications**: Configuring notification delivery times
-4. **Reports**: Setting timezone for data analysis
-5. **International Apps**: Multi-timezone support
-
-## Accessibility
-
-- Proper ARIA labels and roles
-- Keyboard navigation support
-- Screen reader friendly
-- High contrast mode support
-- Clear visual indicators
-
-## Best Practices
-
-1. **Auto-Detection**: Pre-select user's detected timezone
-2. **Display Format**: Show both offset and name
-3. **Validation**: Use required for mandatory fields
-4. **Updates**: Handle timezone database updates
-5. **DST Handling**: Account for daylight saving changes
-
-## Common Pitfalls
-
-- **ID vs Display**: Value is timezone ID, not display text
-- **DST Changes**: Offsets may vary with daylight saving
-- **Browser Support**: Intl API availability varies
-- **Historical Data**: Past dates may have different offsets
-
-## Related Components
-
-- **[Autocomplete](./autocomplete.md)**: Base component
-- **[Countries](./countries.md)**: Often used together
-- **[Form](./form.md)**: Form integration
-- **[Date Range](./date-range.md)**: Date/time selection
-
-## TypeScript Interface
-
-```typescript
-interface SchmancySelectTimezonesElement 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 TimezoneChangeEvent extends CustomEvent {
-  detail: {
-    value: string;  // Timezone ID
-  };
-}
-
-// Utility functions
-const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-```

package/dist/_commonjsHelpers-Dw9sPFZy.js

@@ -1,7 +0,0 @@
-function t(e) {
-  return e && e.t && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
-}
-export {
-  t as g
-};
-//# sourceMappingURL=_commonjsHelpers-Dw9sPFZy.js.map

package/dist/_commonjsHelpers-Dw9sPFZy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_commonjsHelpers-Dw9sPFZy.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/_commonjsHelpers-k2hpEU-q.cjs

@@ -1,2 +0,0 @@
-"use strict";exports.getDefaultExportFromCjs=function(t){return t&&t.t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t};
-//# sourceMappingURL=_commonjsHelpers-k2hpEU-q.cjs.map

package/dist/_commonjsHelpers-k2hpEU-q.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"_commonjsHelpers-k2hpEU-q.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/ai/animated-text.md

@@ -1,116 +0,0 @@
-# Schmancy Animated Text - AI Reference
-
-```js
-// Animated Text Component
-<schmancy-animated-text
-  ease="outExpo"
-  delay="0"
-  stagger="50"
-  duration="750"
-  scale="[0, 1]"
-  opacity="[0, 1]"
-  translateX="['0.55em', '0em']"
-  translateY="['1.1em', '0em']"
-  rotate3d="[0, 0, 1, 45]">
-  Text to animate
-</schmancy-animated-text>
-
-// Animation Properties
-ease: string           // Animation easing function (default: "outExpo")
-delay: number          // Initial delay in milliseconds (default: 0)
-stagger: number        // Delay between letter animations (default: 50)
-duration: number       // Animation duration in milliseconds (default: 750)
-scale: number[]        // Scale transformation [from, to] (default: [0, 1])
-opacity: number[]      // Opacity transition [from, to] (default: [0, 1])
-translateX: string[]   // X translation ["from", "to"] (default: ['0.55em', '0em'])
-translateY: string[]   // Y translation ["from", "to"] (default: ['1.1em', '0em'])
-rotate3d: number[]     // 3D rotation [x, y, z, angle] (default: [0, 0, 1, 45])
-
-// Examples
-// 1. Basic fade in
-<schmancy-animated-text>
-  Welcome to our application
-</schmancy-animated-text>
-
-// 2. Custom stagger effect
-<schmancy-animated-text
-  stagger="100"
-  duration="1000"
-  translateY="['2em', '0em']">
-  Cascading Letters
-</schmancy-animated-text>
-
-// 3. Scale and rotate effect
-<schmancy-animated-text
-  scale="[0.5, 1]"
-  rotate3d="[0, 1, 0, 180]"
-  duration="1500">
-  Dramatic Entrance
-</schmancy-animated-text>
-
-// 4. No translation effect
-<schmancy-animated-text
-  translateX="['0em', '0em']"
-  translateY="['0em', '0em']"
-  opacity="[0, 1]">
-  Fade Only
-</schmancy-animated-text>
-```
-
-## Related Components
-
-- **[Typography](./typography.md)**: Base text styling component
-- **[Typewriter](./typewriter.md)**: Alternative text animation with typing effect
-
-## Technical Details
-
-### Animation Behavior
-
-- Text is split into individual letter spans
-- Each letter animates with the specified stagger delay
-- Uses Web Animations API for performance
-- Animations trigger on component mount and when text changes
-- Responsive to viewport visibility
-
-### CSS Classes
-- `.ml7`: Main wrapper class
-- `.text-wrapper`: Container for animated text
-- `.letter`: Individual animated letter span
-
-## Common Use Cases
-
-1. **Hero Text**: Large headings with dramatic entrance animations
-   ```html
-   <h1>
-     <schmancy-animated-text duration="2000" scale="[0.3, 1]">
-       Welcome to Schmancy
-     </schmancy-animated-text>
-   </h1>
-   ```
-
-2. **Loading Messages**: Staggered letter animations for loading states
-   ```html
-   <schmancy-animated-text stagger="100" translateY="['1em', '0em']">
-     Loading...
-   </schmancy-animated-text>
-   ```
-
-3. **Notifications**: Subtle fade-in for status messages
-   ```html
-   <schmancy-animated-text 
-     duration="500" 
-     translateX="['0em', '0em']"
-     translateY="['0em', '0em']">
-     Operation completed successfully
-   </schmancy-animated-text>
-   ```
-
-4. **Interactive Reveals**: Combined with visibility triggers
-   ```html
-   <schmancy-animated-text 
-     delay="500"
-     stagger="75"
-     opacity="[0, 1]">
-     Scroll to reveal this text
-   </schmancy-animated-text>
-   ```

package/dist/ai/component-relationships.md

@@ -1,93 +0,0 @@
-# Schmancy Component Relationships
-
-This document maps the relationships between Schmancy components to provide a holistic understanding of the library.
-
-## Component Categories
-
-### Core Infrastructure
-- **Area**: Routing and application area management
-- **Store**: State management system
-- **Teleport**: Component transportation across DOM
-- **RxJS Utils**: Reactive programming utilities
-
-### Layout Components
-- **Layout**: Container layout (flex, grid)
-- **Surface**: Style-able container with consistent theming
-- **Card**: Content containers with various layouts
-- **Divider**: Visual separation element
-
-### Navigation & Structure
-- **Tabs**: Tabbed interface components
-- **Menu**: Dropdown/contextual menus
-- **Nav-Drawer**: Navigation drawer with app bar
-- **Content-Drawer**: Side panel content drawers
-- **Sheet**: Modal slide-up panels
-- **Dialog**: Modal dialog boxes
-
-### Form Controls
-- **Form**: Form container with validation
-- **Input**: Text input fields
-- **Textarea**: Multi-line text input
-- **Select**: Dropdown selection
-- **Autocomplete**: Text input with suggestions
-- **Checkbox**: Boolean selection control
-- **Radio-Group**: Exclusive option selection
-- **Option**: Selection option item
-
-### Interactive Elements
-- **Button**: Action triggers (primary, secondary, tertiary)
-- **Dropdown**: Togglable content containers
-- **Chips**: Compact interactive elements
-- **List**: Interactive list items
-- **Tree**: Hierarchical data display
-- **Table**: Tabular data display
-
-### Feedback & Status
-- **Notification**: Toast messages and alerts
-- **Tooltip**: Contextual information on hover
-- **Badge**: Numeric/status indicators
-- **Busy**: Loading indicators
-- **Avatar**: User/entity visual representation
-
-### Typography & Visual
-- **Typography**: Text styling system
-- **Icons**: Iconography system
-- **Animated-Text**: Text animation utilities
-- **Typewriter**: Typing animation effect
-
-### Utilities
-- **Directives**: DOM behavior extensions
-- **Theme**: Theming system
-- **Theme-Button**: Theme toggle control
-- **Utils**: General utility functions
-- **Types**: TypeScript type definitions
-- **Delay**: Timing utilities
-- **Date-Range**: Date selection utilities
-- **Steps**: Multi-step process visualization
-
-## Key Component Interactions
-
-### Form System Interactions
-- **Form** → Contains and validates: Input, Textarea, Select, Checkbox, Radio-Group
-- **Input/Select/Autocomplete** → Can contain: Icons
-- **Option** → Used by: Select, Autocomplete
-
-### Layout System Interactions
-- **Surface** → Used by: Card, Dialog, Sheet, Table
-- **Layout** → Container for: most visible components
-- **Card** → Contains: Card-Media, Card-Content, Card-Actions
-
-### Navigation System Interactions
-- **Area** → Controls routing for: any component
-- **Tabs** → Contains: Tab components
-- **Nav-Drawer** → Contains: AppBar, Drawer, Content
-- **Content-Drawer** → Specialized Sheet with context
-
-### State Management
-- **Store** → Can be used with: any component
-- **Area** → Manages routing state via reactive observables
-
-### Notification System
-- **Notification** → Uses: Surface
-- **Dialog** → Uses: Surface
-- **Tooltip** → Can attach to: any component