@mhmo91/schmancy 0.2.194 → 0.2.196

package/dist/ai/divider.md

@@ -0,0 +1,153 @@
+# Divider Component
+
+A sleek animated divider component that provides visual separation between content sections with customizable orientation and animation effects.
+
+## Quick Start
+
+```html
+<!-- Basic horizontal divider -->
+<schmancy-divider></schmancy-divider>
+
+<!-- Vertical divider -->
+<schmancy-divider orientation="vertical"></schmancy-divider>
+
+<!-- Animated from center -->
+<schmancy-divider grow="both"></schmancy-divider>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `outline` | `'default' \| 'variant'` | `'variant'` | Color style of the divider |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Divider direction |
+| `grow` | `'start' \| 'end' \| 'both'` | `'start'` | Animation growth direction |
+
+## Examples
+
+### Section Separators
+```html
+<schmancy-surface>
+  <h2>Section One</h2>
+  <p>Content for the first section...</p>
+  
+  <schmancy-divider class="my-6"></schmancy-divider>
+  
+  <h2>Section Two</h2>
+  <p>Content for the second section...</p>
+</schmancy-surface>
+```
+
+### Sidebar Layout
+```html
+<div class="flex">
+  <nav class="w-64 p-4">
+    <!-- Navigation items -->
+  </nav>
+  
+  <schmancy-divider orientation="vertical" class="h-screen"></schmancy-divider>
+  
+  <main class="flex-1 p-4">
+    <!-- Main content -->
+  </main>
+</div>
+```
+
+### Animated List Separators
+```html
+<schmancy-list>
+  ${items.map((item, index) => html`
+    <schmancy-list-item>${item.name}</schmancy-list-item>
+    ${index < items.length - 1 ? html`
+      <schmancy-divider 
+        grow="both" 
+        style="--animation-duration: 0.3s"
+      ></schmancy-divider>
+    ` : ''}
+  `)}
+</schmancy-list>
+```
+
+### Card with Sections
+```html
+<schmancy-card>
+  <div slot="header">
+    <h3>User Profile</h3>
+  </div>
+  
+  <div>
+    <p>Name: John Doe</p>
+    <p>Email: john@example.com</p>
+  </div>
+  
+  <schmancy-divider outline="default" class="my-4"></schmancy-divider>
+  
+  <div>
+    <h4>Recent Activity</h4>
+    <ul>
+      <li>Logged in - 2 hours ago</li>
+      <li>Updated profile - Yesterday</li>
+    </ul>
+  </div>
+</schmancy-card>
+```
+
+## Features
+
+### Animation Options
+
+**Growth Direction**:
+- `start`: Animates from start (left/top)
+- `end`: Animates from end (right/bottom)
+- `both`: Animates from center outward
+
+### RTL Support
+The component automatically adjusts animation direction for right-to-left layouts.
+
+### Color Variants
+- `variant`: Uses `outlineVariant` color (subtle)
+- `default`: Uses `outline` color (more prominent)
+
+## Styling
+
+### CSS Custom Properties
+```css
+schmancy-divider {
+  --divider-color: var(--schmancy-sys-color-outlineVariant);
+  --animation-duration: 1s;
+  --transform-origin: left; /* or right, center */
+}
+```
+
+### Animation Keyframes
+The component uses CSS animations for smooth drawing effects:
+- Horizontal dividers use `scaleX` transformation
+- Vertical dividers use `scaleY` transformation
+
+## Accessibility
+
+- Uses `aria-hidden="true"` on decorative connector lines
+- Semantic HTML structure
+- No interactive elements
+
+## Related Components
+
+- [Surface](./surface.md) - Container for divided content
+- [Card](./card.md) - Cards with divided sections
+- [List](./list.md) - Lists with dividers
+- [Layout](./layout.md) - Page layout divisions
+
+## Best Practices
+
+1. **Spacing**: Use consistent margin/padding around dividers
+2. **Animation**: Keep animations subtle (300-500ms)
+3. **Contrast**: Ensure sufficient contrast in both light/dark themes
+4. **Semantic HTML**: Use dividers for visual separation, not structural
+
+## Use Cases
+
+1. **Form Sections**: Separate form groups
+2. **Navigation**: Divide menu sections
+3. **Content**: Break up long text content
+4. **Lists**: Separate list items
+5. **Layouts**: Create visual boundaries in layouts

package/dist/ai/index.md

@@ -4,17 +4,57 @@ This directory contains concise reference documentation for the Schmancy compone
 
 ## Components
 
+### Core Components
+- [Animated Text](./animated-text.md) - Animated text effects with word and letter animations
 - [Area](./area.md) - Routing and subscription API for application areas
+- [Autocomplete](./autocomplete.md) - Searchable input with dropdown suggestions
+- [Avatar](./avatar.md) - User profile images with fallback initials
+- [Badge](./badge.md) - Status indicators and notification counts
+- [Busy](./busy.md) - Loading states and progress indicators
 - [Button](./button.md) - Primary, secondary, and tertiary buttons with various states
+- [Card](./card.md) - Content containers with headers and actions
+- [Checkbox](./checkbox.md) - Checkable input with indeterminate state
+- [Chips](./chips.md) - Compact elements for input or selection
+
+### Layout & Navigation
+- [Content Drawer](./content-drawer.md) - Sliding panel system for navigation and overlays
+- [Date Range](./date-range.md) - Date range selector with presets
+- [Delay](./delay.md) - Delayed content rendering with animations
 - [Dialog](./dialog.md) - Modal dialog boxes for confirmations and custom content
-- [Form](./form.md) - Form containers with validation capabilities
-- [Input](./input.md) - Text input fields with various types and features
+- [Divider](./divider.md) - Visual separators with animations
+- [Dropdown](./dropdown.md) - Floating dropdown menus
 - [Layout](./layout.md) - Flex and grid layout components
 - [List](./list.md) - Interactive lists with selection support
+- [Menu](./menu.md) - Context and dropdown menus
+- [Nav Drawer](./nav-drawer.md) - Responsive navigation drawer system
+
+### Form Elements
+- [Form](./form.md) - Form containers with validation capabilities
+- [Input](./input.md) - Text input fields with various types and features
+- [Option](./option.md) - Option elements for selects and autocomplete
+- [Radio Group](./radio-group.md) - Single-selection radio button groups
+- [Select](./select.md) - Dropdown selection components
+- [Textarea](./textarea.md) - Multi-line text input
+
+### Feedback & Interaction
 - [Notification](./notification.md) - Toast notifications and alerts
 - [Sheet](./sheet.md) - Side panels and drawers
-- [Store](./store.md) - State management system
+- [Slider](./slider.md) - Carousel component for content
+- [Steps](./steps.md) - Multi-step process indicators
 - [Tabs](./tabs.md) - Tabbed interface components
+- [Tooltip](./tooltip.md) - Contextual help text
+
+### Utilities
+- [Icons](./icons.md) - Material Design icon system
+- [Store](./store.md) - State management system
+- [Surface](./surface.md) - Elevation and container system
+- [Table](./table.md) - Data table components
+- [Teleport](./teleport.md) - FLIP animations between DOM positions
+- [Theme](./theme.md) - Material Design 3 theming system
+- [Theme Button](./theme-button.md) - Theme switching button
+- [Tree](./tree.md) - Hierarchical tree view
+- [Typography](./typography.md) - Text styling system
+- [Typewriter](./typewriter.md) - Typing animation effects
 
 ## Reference Format
 

package/dist/ai/nav-drawer.md

@@ -0,0 +1,206 @@
+# Navigation Drawer Component
+
+A responsive navigation drawer system that adapts between overlay and push modes based on screen size, providing flexible app navigation patterns.
+
+## Quick Start
+
+```html
+<!-- Basic navigation drawer -->
+<schmancy-nav-drawer>
+  <schmancy-nav-drawer-navbar>
+    <nav>
+      <schmancy-list>
+        <schmancy-list-item>Dashboard</schmancy-list-item>
+        <schmancy-list-item>Settings</schmancy-list-item>
+      </schmancy-list>
+    </nav>
+  </schmancy-nav-drawer-navbar>
+  
+  <schmancy-nav-drawer-content>
+    <schmancy-nav-drawer-appbar>
+      <h1>My App</h1>
+    </schmancy-nav-drawer-appbar>
+    <main>
+      <!-- Page content -->
+    </main>
+  </schmancy-nav-drawer-content>
+</schmancy-nav-drawer>
+```
+
+## Components
+
+### schmancy-nav-drawer
+The root container that manages drawer state and responsive behavior.
+
+**Properties:**
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `fullscreen` | `boolean` | `false` | Hide drawer in fullscreen mode |
+| `breakpoint` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Responsive breakpoint |
+| `open` | `'open' \| 'close'` | - | Drawer state |
+
+### schmancy-nav-drawer-navbar
+The navigation sidebar component.
+
+**Properties:**
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `width` | `string` | `'320px'` | Drawer width |
+
+### schmancy-nav-drawer-content
+Container for main content area.
+
+### schmancy-nav-drawer-appbar
+Optional app bar for the content area.
+
+## Examples
+
+### Complete App Layout
+```html
+<schmancy-nav-drawer breakpoint="lg">
+  <!-- Navigation Sidebar -->
+  <schmancy-nav-drawer-navbar width="280px">
+    <div class="p-4">
+      <h2 class="text-xl font-bold mb-4">My App</h2>
+    </div>
+    
+    <schmancy-list>
+      <schmancy-list-item @click="${() => navigate('/dashboard')}">
+        <schmancy-icon slot="start">dashboard</schmancy-icon>
+        Dashboard
+      </schmancy-list-item>
+      
+      <schmancy-list-item @click="${() => navigate('/users')}">
+        <schmancy-icon slot="start">people</schmancy-icon>
+        Users
+      </schmancy-list-item>
+      
+      <schmancy-divider class="my-2"></schmancy-divider>
+      
+      <schmancy-list-item @click="${() => navigate('/settings')}">
+        <schmancy-icon slot="start">settings</schmancy-icon>
+        Settings
+      </schmancy-list-item>
+    </schmancy-list>
+  </schmancy-nav-drawer-navbar>
+  
+  <!-- Main Content -->
+  <schmancy-nav-drawer-content>
+    <!-- App Bar -->
+    <schmancy-nav-drawer-appbar>
+      <schmancy-icon-button @click="${toggleDrawer}">
+        menu
+      </schmancy-icon-button>
+      <h1 class="text-xl">Dashboard</h1>
+    </schmancy-nav-drawer-appbar>
+    
+    <!-- Page Content -->
+    <main class="p-4">
+      <router-outlet></router-outlet>
+    </main>
+  </schmancy-nav-drawer-content>
+</schmancy-nav-drawer>
+```
+
+### With User Profile
+```html
+<schmancy-nav-drawer>
+  <schmancy-nav-drawer-navbar>
+    <!-- User Profile Section -->
+    <div class="p-4 border-b">
+      <schmancy-avatar 
+        src="/user-avatar.jpg" 
+        name="John Doe"
+      ></schmancy-avatar>
+      <div class="mt-2">
+        <div class="font-medium">John Doe</div>
+        <div class="text-sm opacity-70">john@example.com</div>
+      </div>
+    </div>
+    
+    <!-- Navigation -->
+    <schmancy-list class="py-2">
+      <!-- Menu items -->
+    </schmancy-list>
+  </schmancy-nav-drawer-navbar>
+  
+  <schmancy-nav-drawer-content>
+    <!-- Content -->
+  </schmancy-nav-drawer-content>
+</schmancy-nav-drawer>
+```
+
+## Features
+
+### Responsive Modes
+- **Push Mode**: Drawer pushes content (desktop)
+- **Overlay Mode**: Drawer overlays content (mobile)
+- Automatic switching based on breakpoint
+
+### Breakpoint Values
+- `sm`: 640px
+- `md`: 768px (default)
+- `lg`: 1024px
+- `xl`: 1280px
+
+### Events
+Toggle drawer programmatically:
+```javascript
+window.dispatchEvent(
+  new CustomEvent('schmancy-nav-drawer-toggle', {
+    detail: { state: 'open' } // or 'close'
+  })
+);
+```
+
+### Animation
+Smooth transitions with customizable easing:
+- Overlay fade: 200ms open, 150ms close
+- Drawer slide: 200ms
+- Cubic bezier easing for natural motion
+
+## Styling
+
+```css
+/* Custom drawer styling */
+schmancy-nav-drawer-navbar {
+  --drawer-width: 320px;
+  --animation-duration: 200ms;
+}
+
+/* Overlay customization */
+schmancy-nav-drawer {
+  --overlay-opacity: 0.4;
+  --overlay-color: var(--schmancy-sys-color-scrim);
+}
+```
+
+## Context System
+
+The component uses Lit Context API for state management:
+- `SchmancyDrawerNavbarMode`: Current mode (push/overlay)
+- `SchmancyDrawerNavbarState`: Open/close state
+
+## Best Practices
+
+1. **Navigation Structure**: Keep navigation hierarchy shallow
+2. **Mobile First**: Design for overlay mode first
+3. **Breakpoints**: Choose breakpoints based on content
+4. **Performance**: Use `fullscreen` prop for immersive experiences
+5. **Accessibility**: Include proper ARIA labels
+
+## Related Components
+
+- [List](./list.md) - Navigation menu items
+- [Icon](./icons.md) - Menu icons
+- [Avatar](./avatar.md) - User profiles
+- [Surface](./surface.md) - Content containers
+- [Button](./button.md) - Navigation triggers
+
+## Use Cases
+
+1. **Admin Dashboards**: Multi-section navigation
+2. **Mobile Apps**: Responsive app shells
+3. **Documentation Sites**: Side navigation
+4. **E-commerce**: Category navigation
+5. **Social Apps**: User navigation with profiles

package/dist/ai/option.md

@@ -0,0 +1,173 @@
+# Option Component
+
+A versatile option element designed for use with select dropdowns and autocomplete components, providing accessible and interactive selection items.
+
+## Quick Start
+
+```html
+<!-- Basic option -->
+<schmancy-option value="1">Option One</schmancy-option>
+
+<!-- Option with custom label -->
+<schmancy-option value="us" label="United States"></schmancy-option>
+
+<!-- Option with icon -->
+<schmancy-option value="email" icon="✉️">Email Notifications</schmancy-option>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `value` | `string` | `''` | The value when selected |
+| `label` | `string` | `''` | Display label (defaults to text content) |
+| `selected` | `boolean` | `false` | Whether option is selected |
+| `disabled` | `boolean` | `false` | Whether option is disabled |
+| `group` | `string` | `''` | Optional group name |
+| `icon` | `string` | `''` | Optional icon/emoji |
+
+## Events
+
+### option-select
+Fired when option is clicked or selected via keyboard.
+
+```typescript
+interface OptionSelectEvent {
+  detail: {
+    value: string;
+  }
+}
+```
+
+## Examples
+
+### In Select Component
+```html
+<schmancy-select placeholder="Choose country">
+  <schmancy-option value="us" icon="🇺🇸">United States</schmancy-option>
+  <schmancy-option value="uk" icon="🇬🇧">United Kingdom</schmancy-option>
+  <schmancy-option value="ca" icon="🇨🇦">Canada</schmancy-option>
+  <schmancy-option value="au" icon="🇦🇺">Australia</schmancy-option>
+</schmancy-select>
+```
+
+### Grouped Options
+```html
+<schmancy-select>
+  <!-- North America -->
+  <schmancy-option value="us" group="North America">United States</schmancy-option>
+  <schmancy-option value="ca" group="North America">Canada</schmancy-option>
+  <schmancy-option value="mx" group="North America">Mexico</schmancy-option>
+  
+  <!-- Europe -->
+  <schmancy-option value="uk" group="Europe">United Kingdom</schmancy-option>
+  <schmancy-option value="de" group="Europe">Germany</schmancy-option>
+  <schmancy-option value="fr" group="Europe">France</schmancy-option>
+</schmancy-select>
+```
+
+### With Status Indicators
+```html
+<schmancy-autocomplete>
+  <schmancy-option value="active" icon="🟢">Active</schmancy-option>
+  <schmancy-option value="pending" icon="🟡">Pending</schmancy-option>
+  <schmancy-option value="inactive" icon="🔴">Inactive</schmancy-option>
+  <schmancy-option value="archived" icon="📦" disabled>Archived</schmancy-option>
+</schmancy-autocomplete>
+```
+
+### Dynamic Options
+```html
+${users.map(user => html`
+  <schmancy-option 
+    value="${user.id}"
+    label="${user.name}"
+    ?disabled="${!user.active}"
+  >
+    <span class="flex items-center gap-2">
+      <schmancy-avatar size="xs" name="${user.name}"></schmancy-avatar>
+      <span>
+        <div>${user.name}</div>
+        <div class="text-xs opacity-70">${user.email}</div>
+      </span>
+    </span>
+  </schmancy-option>
+`)}
+```
+
+## Features
+
+### Automatic Value Assignment
+- If no value is provided, uses text content
+- If no label is provided, uses text content or value
+
+### Keyboard Navigation
+- `Space` or `Enter` to select
+- Full keyboard accessibility
+
+### Visual States
+- Hover highlighting
+- Selected state with checkmark
+- Disabled state with reduced opacity
+- Focus ring for keyboard navigation
+
+### Unique IDs
+Automatically generates unique IDs for accessibility if not provided.
+
+## Styling
+
+The component uses semantic design tokens:
+
+```css
+/* Default state */
+.hover:bg-surface-high
+
+/* Selected state */
+.bg-primary-container
+.text-primary-onContainer
+
+/* Custom styling */
+schmancy-option {
+  --option-padding-y: 0.5rem;
+  --option-padding-x: 0.75rem;
+  --option-border-radius: 0.25rem;
+}
+```
+
+## Accessibility
+
+- `role="option"` for semantic meaning
+- `aria-selected` state management
+- `aria-disabled` for disabled options
+- Keyboard event handling
+- Focus management
+
+## Integration
+
+Options are designed to work seamlessly with:
+- `schmancy-select` - Dropdown selection
+- `schmancy-autocomplete` - Filtered selection
+- Custom dropdown components
+
+## Best Practices
+
+1. **Clear Values**: Use meaningful, unique values
+2. **Icons**: Use icons to improve scannability
+3. **Groups**: Group related options together
+4. **Labels**: Provide clear, concise labels
+5. **Disabled State**: Clearly indicate why options are disabled
+
+## Related Components
+
+- [Select](./select.md) - Dropdown selector
+- [Autocomplete](./autocomplete.md) - Searchable selector
+- [List](./list.md) - Similar list item pattern
+- [Menu](./menu.md) - Menu items
+
+## Use Cases
+
+1. **Form Selects**: Country, state, category selection
+2. **Settings**: Preference options
+3. **Filters**: Data filtering options
+4. **Status Selection**: Workflow states
+5. **User Selection**: Team member pickers