@mhmo91/schmancy 0.8.4 → 0.9.2

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/ai/typewriter.md

@@ -1,335 +0,0 @@
-# Typewriter Component
-
-An engaging text animation component that simulates typing effects with customizable speed, delays, and advanced sequencing capabilities. Features a simple API for cycling through text with automatic character deletion.
-
-## Quick Start
-
-```html
-<!-- Basic typewriter effect -->
-<schmancy-typewriter>
-  Hello, World! This text will be typed out character by character.
-</schmancy-typewriter>
-
-<!-- Cycling through words (auto-calculates delete counts) -->
-<schmancy-typewriter>
-  We are <span cycle="developers | designers | innovators"></span>
-</schmancy-typewriter>
-
-<!-- With custom speed and cursor -->
-<schmancy-typewriter speed="30" delay="500" cursorChar="|">
-  Fast typing with a blinking cursor.
-</schmancy-typewriter>
-
-<!-- Infinite loop -->
-<schmancy-typewriter loop>
-  This will type and delete forever!
-  <span cycle="Amazing | Incredible | Fantastic"></span>
-</schmancy-typewriter>
-```
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `speed` | `number` | `50` | Typing speed (ms per character) |
-| `delay` | `number` | `0` | Initial delay before typing starts |
-| `autoStart` | `boolean` | `true` | Start typing automatically |
-| `cursorChar` | `string` | `''` | Custom cursor character (empty = no cursor) |
-| `deleteSpeed` | `number` | `25` | Speed for deletion (ms per character) |
-| `cyclePause` | `number` | `1500` | Default pause between cycle items (ms) |
-| `once` | `boolean` | `true` | Only animate once per session |
-| `loop` | `boolean` | `false` | Loop animation infinitely (overrides `once`) |
-
-## Events
-
-### typeit-complete
-Fired when typing animation completes.
-
-```javascript
-element.addEventListener('typeit-complete', () => {
-  console.log('Typing finished!');
-});
-```
-
-## Examples
-
-### Hero Section with Cycling
-```html
-<div class="hero">
-  <h1>
-    <schmancy-typewriter speed="100" delay="300">
-      Welcome to the <span cycle="Future | Innovation | Revolution"></span>
-    </schmancy-typewriter>
-  </h1>
-  <p>
-    <schmancy-typewriter delay="2000" speed="40">
-      Where innovation meets possibility.
-    </schmancy-typewriter>
-  </p>
-</div>
-```
-
-### Rotating Value Propositions
-```html
-<schmancy-typewriter speed="80" cyclePause="1200">
-  Building systems that are
-  <br />
-  <span cycle="Trustless | Permissionless | Transparent | Borderless | Resilient" pause="1500"></span>
-  <br />
-  empowering everyone to operate freely.
-</schmancy-typewriter>
-```
-
-### Multi-line Typing
-```html
-<schmancy-typewriter speed="60">
-  <p>First paragraph of text.</p>
-  <p>Second paragraph appears on a new line.</p>
-  <p>Third paragraph continues the story.</p>
-</schmancy-typewriter>
-```
-
-### Terminal Effect
-```html
-<div class="terminal">
-  <schmancy-typewriter cursorChar="|" speed="30">
-    $ npm install schmancy-ui
-    <span action="pause" value="500"></span>
-    <p>Installing dependencies...</p>
-    <span action="pause" value="1000"></span>
-    <p>✓ Installation complete!</p>
-  </schmancy-typewriter>
-</div>
-```
-
-### Product Features Carousel
-```html
-<schmancy-typewriter loop cursorChar="_">
-  <span cycle="Lightning Fast ⚡ | Fully Typed 📘 | Zero Config 🎯 | Production Ready 🚀"></span>
-</schmancy-typewriter>
-```
-
-### Dynamic Job Titles
-```html
-<h2>
-  We're hiring <span cycle="Frontend Developers | Backend Engineers | UI/UX Designers | DevOps Specialists"></span>
-</h2>
-```
-
-### Code Tutorial
-```html
-<schmancy-typewriter speed="40">
-  <code>
-    function greet(name) {
-      <span action="pause" value="300"></span>
-      return `Hello, ${name}!`;
-      <span action="pause" value="300"></span>
-    }
-  </code>
-</schmancy-typewriter>
-```
-
-## Cycling API (NEW!)
-
-The `cycle` attribute makes it effortless to rotate through text with **automatic character deletion**. No need to manually count characters!
-
-### Basic Usage
-
-```html
-<!-- Simple cycling -->
-<span cycle="Option 1 | Option 2 | Option 3"></span>
-
-<!-- With custom pause duration -->
-<span cycle="Fast | Quick | Rapid" pause="800"></span>
-
-<!-- In context -->
-<schmancy-typewriter>
-  We are <span cycle="developers | designers | innovators"></span>
-</schmancy-typewriter>
-```
-
-### Cycle Attributes
-
-| Attribute | Type | Description |
-|-----------|------|-------------|
-| `cycle` | `string` | Pipe-separated list of text items to cycle through |
-| `pause` | `number` | Override default pause between items (milliseconds) |
-
-### Benefits
-
-- ✅ **Auto-calculated deletes** - no manual character counting
-- ✅ **Clean syntax** - just list your items with `|` separator
-- ✅ **Consistent timing** - uses `cyclePause` property or custom `pause`
-- ✅ **Works with `loop`** - infinite cycling made simple
-
-### Advanced Cycling
-
-```html
-<!-- Hero headline that cycles forever -->
-<schmancy-typewriter loop cyclePause="2000">
-  <h1>Welcome to <span cycle="the Future | Innovation | Tomorrow"></span></h1>
-</schmancy-typewriter>
-
-<!-- Mixed static and cycling text -->
-<schmancy-typewriter>
-  Our product is
-  <span action="pause" value="500"></span>
-  <span cycle="Fast ⚡ | Secure 🔒 | Reliable ✅ | Modern 🚀" pause="1800"></span>
-  for your business.
-</schmancy-typewriter>
-```
-
-## Actions System
-
-Special action elements for fine-grained control:
-
-| Action | Value | Description |
-|--------|-------|-------------|
-| `pause` | milliseconds | Pause typing for specified duration |
-| `delete` | character count | Delete specified number of characters (manual) |
-
-```html
-<span action="pause" value="1000"></span> <!-- 1 second pause -->
-<span action="delete" value="5"></span> <!-- Delete 5 characters manually -->
-```
-
-**Note:** For cycling text with automatic deletion, use the `cycle` attribute instead!
-
-## Features
-
-### Session Memory
-When `once` is true, remembers completion state per session:
-- Uses sessionStorage with content hash
-- Skips animation on repeat views
-- Clears on session end
-
-### Context Integration
-Inherits delay from parent `schmancy-delay` components:
-
-```html
-<schmancy-delay delay="1000">
-  <schmancy-typewriter> <!-- Inherits 1000ms delay -->
-    This starts typing after 1 second
-  </schmancy-typewriter>
-</schmancy-delay>
-```
-
-### Intersection Observer
-Only starts typing when element is in viewport:
-- Efficient performance
-- Better user experience
-- Automatic trigger on scroll
-
-### TypeIt Integration
-Powered by the TypeIt library for smooth, reliable animations.
-
-## Styling
-
-```css
-/* Hide cursor after completion */
-schmancy-typewriter {
-  --ti-cursor-display: none;
-}
-
-/* Custom cursor styling */
-schmancy-typewriter .ti-cursor {
-  color: var(--schmancy-sys-color-primary-default);
-  font-weight: normal;
-}
-```
-
-## Advanced Configuration
-
-```javascript
-// TypeIt options passed through
-const typeItOptions = {
-  speed: this.speed,
-  startDelay: this.delay,
-  cursor: !!this.cursorChar,
-  cursorChar: this.cursorChar,
-  deleteSpeed: this.deleteSpeed,
-  afterComplete: () => {
-    // Custom completion logic
-  }
-};
-```
-
-## Accessibility
-
-- Uses `aria-live="polite"` for screen reader support
-- Completed text remains in DOM
-- Semantic HTML structure maintained
-
-## Best Practices
-
-1. **Speed**: 40-80ms for comfortable reading speed
-2. **Delays**: Use pauses for emphasis
-3. **Content**: Keep animations short and meaningful
-4. **Performance**: Limit concurrent typewriters
-5. **Mobile**: Test on various devices
-
-## Related Components
-
-- [Animated Text](./animated-text.md) - Word/letter animations
-- [Delay](./delay.md) - Coordinated delays
-- [Typography](./typography.md) - Text styling
-
-## Use Cases
-
-### Perfect for:
-
-1. **Hero Headlines**: Rotating value propositions and key messages
-   ```html
-   <span cycle="Fast | Secure | Reliable"></span>
-   ```
-
-2. **Product Features**: Cycling through benefits and capabilities
-   ```html
-   <span cycle="Zero Config 🎯 | Type-Safe 📘 | Lightning Fast ⚡"></span>
-   ```
-
-3. **Job Postings**: Dynamic role descriptions
-   ```html
-   We're hiring <span cycle="Developers | Designers | Engineers"></span>
-   ```
-
-4. **Testimonials**: Rotating customer quotes
-   ```html
-   <span cycle="Amazing product! | Best tool ever! | Game changer!"></span>
-   ```
-
-5. **Tutorials**: Step-by-step code examples with timing
-6. **Storytelling**: Narrative experiences with dramatic pauses
-7. **Loading States**: Entertaining wait messages that cycle
-8. **Terminal UIs**: Command-line interface simulations
-
-## Migration Guide
-
-### From Manual Deletes to Cycle API
-
-**Before (Manual counting - error prone!):**
-```html
-<schmancy-typewriter>
-  We are
-  developers
-  <span action="delete" value="10"></span>
-  designers
-  <span action="delete" value="9"></span>
-  innovators
-</schmancy-typewriter>
-```
-
-**After (Automatic - clean & simple!):**
-```html
-<schmancy-typewriter>
-  We are <span cycle="developers | designers | innovators"></span>
-</schmancy-typewriter>
-```
-
-### Benefits of the New API
-
-- 🚫 **No more counting characters** - automatic deletion
-- ✨ **Cleaner markup** - one line instead of many
-- 🛡️ **Less error-prone** - no typos in character counts
-- 🔄 **Easy updates** - just add/remove words from the list
-- 🎨 **Better readability** - see all options at a glance

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":""}