@mhmo91/schmancy 0.2.200 → 0.2.202

package/ai/boat.md

@@ -0,0 +1,118 @@
+# Boat Component
+
+## Overview
+The boat component is a bottom sheet that slides up from the bottom of the screen. It can be in one of three states: hidden, minimized, or expanded. This component is perfect for displaying additional content or actions while keeping the main interface accessible.
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `state` | `'hidden' \| 'minimized' \| 'expanded'` | `'hidden'` | The current state of the boat component |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `change` | `'hidden' \| 'minimized' \| 'expanded'` | Fired when the state changes |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `header` | Content to display in the header area (visible in both minimized and expanded states) |
+| Default | Main content displayed when the boat is expanded |
+
+## Usage
+
+### Basic Example
+```html
+<schmancy-boat state="minimized">
+  <schmancy-typography slot="header" variant="title">
+    Boat Title
+  </schmancy-typography>
+  
+  <schmancy-flex direction="column" gap="md" class="p-4">
+    <schmancy-typography>
+      This is the main content of the boat component.
+    </schmancy-typography>
+  </schmancy-flex>
+</schmancy-boat>
+```
+
+### With Icon in Header
+```html
+<schmancy-boat state="minimized" @change="${(e) => console.log(e.detail)}">
+  <schmancy-flex slot="header" gap="sm" content="center">
+    <schmancy-icon>info</schmancy-icon>
+    <schmancy-typography variant="title">Settings</schmancy-typography>
+  </schmancy-flex>
+  
+  <schmancy-flex direction="column" gap="md" class="p-4">
+    <!-- Settings content -->
+  </schmancy-flex>
+</schmancy-boat>
+```
+
+### Controlling State
+```typescript
+// Get reference to boat
+const boat = document.querySelector('schmancy-boat');
+
+// Show minimized
+boat.state = 'minimized';
+
+// Show expanded
+boat.state = 'expanded';
+
+// Hide
+boat.state = 'hidden';
+
+// Listen for state changes
+boat.addEventListener('change', (e) => {
+  console.log('New state:', e.detail);
+});
+```
+
+## Features
+
+- **Three States**: Hidden (completely off-screen), minimized (shows only header), and expanded (shows all content)
+- **Smooth Transitions**: Animated transitions between states using CSS transforms
+- **Responsive Design**: Different widths on various screen sizes:
+  - Mobile: 100% width
+  - Tablet: 70% width
+  - Desktop: 60% width
+  - Large screens: 40% width
+- **Fixed Positioning**: Always appears at the bottom-right of the viewport
+- **Overflow Handling**: Content scrolls when it exceeds 80vh max height
+- **Sticky Header**: Header remains visible when scrolling through content
+
+## CSS Classes
+
+The component uses internal CSS classes for styling:
+- `.translate-y-full`: Positions the boat completely off-screen (hidden state)
+- `.translate-y-full-minus-64`: Shows only the header (minimized state)
+- `.translate-y-0`: Shows the entire boat (expanded state)
+
+## Use Cases
+
+- **Chat Interfaces**: Keep a chat window accessible while browsing
+- **Media Players**: Minimize music/video controls while using other features
+- **Quick Settings**: Provide easy access to frequently used settings
+- **Notifications**: Show important information that users can minimize
+- **Form Wizards**: Multi-step forms that can be minimized during the process
+- **Help/Support**: Keep help documentation accessible while working
+
+## Accessibility
+
+- The component uses semantic HTML structure
+- State changes are announced via events
+- Keyboard navigation is supported through the button controls
+- Focus management is handled automatically
+
+## Best Practices
+
+1. **Header Content**: Keep header content concise and descriptive
+2. **State Management**: Store the boat state in your application state if persistence is needed
+3. **Content Height**: Design content to work well within the max-height constraint
+4. **Mobile Considerations**: Test thoroughly on mobile devices where the boat takes full width
+5. **Z-Index**: The component uses `z-[100]` - ensure this works with your app's z-index hierarchy

package/ai/chips.md

@@ -3,178 +3,144 @@
 ```js
 // Single Chip
 <schmancy-chip
-  text="Chip Text"
-  variant="default|primary|secondary|success|warning|danger|info"
-  size="small|medium|large"
-  closable?
+  value="chip-value"
+  selected?
+  icon="emoji-icon"
+  readOnly?
   disabled?
-  @close=${handleClose}
+  @change=${handleChange}
   @click=${handleClick}>
+  Chip Text
 </schmancy-chip>
 
 // Chip with icon
-<schmancy-chip text="JavaScript">
-  <schmancy-icon slot="prefix" icon="code"></schmancy-icon>
+<schmancy-chip icon="📝" value="javascript">
+  JavaScript
 </schmancy-chip>
 
-// Chip with avatar
-<schmancy-chip text="John Doe">
-  <schmancy-avatar slot="prefix" src="path/to/avatar.jpg" size="small"></schmancy-avatar>
-</schmancy-chip>
-
-// Chips Container
+// Chips Container - Single Selection
 <schmancy-chips
+  .value=${selectedValue}
   @change=${handleSelectionChange}>
-  <schmancy-chip text="Option 1" value="1"></schmancy-chip>
-  <schmancy-chip text="Option 2" value="2"></schmancy-chip>
-  <schmancy-chip text="Option 3" value="3"></schmancy-chip>
+  <schmancy-chip value="1">Option 1</schmancy-chip>
+  <schmancy-chip value="2">Option 2</schmancy-chip>
+  <schmancy-chip value="3">Option 3</schmancy-chip>
 </schmancy-chips>
 
-// Chips Container with selection mode
+// Chips Container - Multiple Selection
 <schmancy-chips
-  selection="single|multiple|none"
-  .value=${selectedValues}
+  multi
+  .values=${selectedValues}
   @change=${handleSelectionChange}>
-  <schmancy-chip text="Red" value="red"></schmancy-chip>
-  <schmancy-chip text="Green" value="green"></schmancy-chip>
-  <schmancy-chip text="Blue" value="blue"></schmancy-chip>
+  <schmancy-chip value="red">Red</schmancy-chip>
+  <schmancy-chip value="green">Green</schmancy-chip>
+  <schmancy-chip value="blue">Blue</schmancy-chip>
 </schmancy-chips>
 
-// Input with chip creation
-<schmancy-chips
-  input?
-  placeholder="Add tag..."
-  @add=${handleAddChip}
-  @remove=${handleRemoveChip}>
-  <schmancy-chip text="React" closable></schmancy-chip>
-  <schmancy-chip text="Vue" closable></schmancy-chip>
-  <schmancy-chip text="Angular" closable></schmancy-chip>
+// Horizontal scrolling chips
+<schmancy-chips wrap="false">
+  <schmancy-chip value="mon">Monday</schmancy-chip>
+  <schmancy-chip value="tue">Tuesday</schmancy-chip>
+  <schmancy-chip value="wed">Wednesday</schmancy-chip>
+  <schmancy-chip value="thu">Thursday</schmancy-chip>
+  <schmancy-chip value="fri">Friday</schmancy-chip>
 </schmancy-chips>
 
 // Chip Properties
-text: string            // Text content of the chip
 value: string           // Value for selection purposes
-variant: string         // Visual style: "default", "primary", "secondary", etc.
-size: string            // Size: "small", "medium", "large"
-closable: boolean       // Show close button
-disabled: boolean       // Disable the chip
 selected: boolean       // Whether the chip is selected
+icon: string            // Emoji icon to display
+readOnly: boolean       // Makes chip non-interactive
+disabled: boolean       // Disable the chip
 
 // Chips Container Properties
-selection: string       // Selection mode: "none", "single", "multiple"
-value: string[]         // Selected values
-input: boolean          // Show input for adding new chips
-placeholder: string     // Placeholder for the input
-max: number             // Maximum number of chips allowed
-disabled: boolean       // Disable the entire container
+multi: boolean          // Enable multiple selection mode
+value: string           // Selected value (single selection)
+values: string[]        // Selected values (multiple selection)
+wrap: boolean           // Whether chips wrap to new lines (default: true)
 
 // Chip Events
 @click   // Fires when chip is clicked
-@close   // Fires when close button is clicked
-@keydown // Fires on keydown events
+@change  // Fires when selection changes, with { detail: { value: string, selected: boolean } }
 
 // Chips Container Events
-@change  // Fires when selection changes, with { detail: { value } }
-@add     // Fires when a chip is added, with { detail: { text, value } }
-@remove  // Fires when a chip is removed, with { detail: { text, value } }
+@change  // Fires when selection changes, with detail being string (single) or string[] (multi)
 
 // Examples
 // Basic chips
 <div>
-  <schmancy-chip text="Basic"></schmancy-chip>
-  <schmancy-chip text="Primary" variant="primary"></schmancy-chip>
-  <schmancy-chip text="Success" variant="success"></schmancy-chip>
-  <schmancy-chip text="Warning" variant="warning"></schmancy-chip>
-  <schmancy-chip text="Danger" variant="danger"></schmancy-chip>
-</div>
-
-// Closable chips
-<div>
-  <schmancy-chip 
-    text="JavaScript" 
-    closable
-    @close=${() => removeTag('javascript')}>
-    <schmancy-icon slot="prefix" icon="code"></schmancy-icon>
-  </schmancy-chip>
-  
-  <schmancy-chip 
-    text="TypeScript" 
-    closable
-    @close=${() => removeTag('typescript')}>
-    <schmancy-icon slot="prefix" icon="code"></schmancy-icon>
-  </schmancy-chip>
+  <schmancy-chip value="basic">Basic</schmancy-chip>
+  <schmancy-chip value="javascript" icon="📝">JavaScript</schmancy-chip>
+  <schmancy-chip value="react" icon="⚛️">React</schmancy-chip>
+  <schmancy-chip value="vue" icon="💚">Vue</schmancy-chip>
+  <schmancy-chip value="angular" icon="🅰️">Angular</schmancy-chip>
 </div>
 
 // Single selection chips
 <schmancy-chips
-  selection="single"
-  .value=${[selectedSize]}
-  @change=${(e) => selectedSize = e.detail.value[0]}>
-  <schmancy-chip text="Small" value="sm"></schmancy-chip>
-  <schmancy-chip text="Medium" value="md"></schmancy-chip>
-  <schmancy-chip text="Large" value="lg"></schmancy-chip>
+  .value=${selectedSize}
+  @change=${(e) => selectedSize = e.detail}>
+  <schmancy-chip value="sm">Small</schmancy-chip>
+  <schmancy-chip value="md">Medium</schmancy-chip>
+  <schmancy-chip value="lg">Large</schmancy-chip>
 </schmancy-chips>
 
 // Multiple selection chips
 <schmancy-chips
-  selection="multiple"
-  .value=${selectedToppings}
-  @change=${(e) => selectedToppings = e.detail.value}>
-  <schmancy-chip text="Cheese" value="cheese"></schmancy-chip>
-  <schmancy-chip text="Pepperoni" value="pepperoni"></schmancy-chip>
-  <schmancy-chip text="Mushrooms" value="mushrooms"></schmancy-chip>
-  <schmancy-chip text="Onions" value="onions"></schmancy-chip>
-  <schmancy-chip text="Peppers" value="peppers"></schmancy-chip>
+  multi
+  .values=${selectedToppings}
+  @change=${(e) => selectedToppings = e.detail}>
+  <schmancy-chip value="cheese">Cheese</schmancy-chip>
+  <schmancy-chip value="pepperoni">Pepperoni</schmancy-chip>
+  <schmancy-chip value="mushrooms">Mushrooms</schmancy-chip>
+  <schmancy-chip value="onions">Onions</schmancy-chip>
+  <schmancy-chip value="peppers">Peppers</schmancy-chip>
 </schmancy-chips>
 
-// Input chips for tags
+// Date selector with horizontal scrolling
 <schmancy-chips
-  input
-  placeholder="Add tag..."
-  @add=${(e) => addTag(e.detail.text)}
-  @remove=${(e) => removeTag(e.detail.text)}>
-  ${tags.map(tag => html`
-    <schmancy-chip 
-      text=${tag} 
-      closable>
-    </schmancy-chip>
-  `)}
+  wrap="false"
+  .value=${selectedDate}
+  @change=${(e) => selectedDate = e.detail}>
+  <schmancy-chip value="2024-01-15">Mon 15</schmancy-chip>
+  <schmancy-chip value="2024-01-16">Tue 16</schmancy-chip>
+  <schmancy-chip value="2024-01-17">Wed 17</schmancy-chip>
+  <schmancy-chip value="2024-01-18">Thu 18</schmancy-chip>
+  <schmancy-chip value="2024-01-19">Fri 19</schmancy-chip>
+  <schmancy-chip value="2024-01-20">Sat 20</schmancy-chip>
+  <schmancy-chip value="2024-01-21">Sun 21</schmancy-chip>
+</schmancy-chips>
+
+// Category filters
+<schmancy-chips
+  multi
+  .values=${selectedCategories}
+  @change=${(e) => selectedCategories = e.detail}>
+  <schmancy-chip value="electronics" icon="💻">Electronics</schmancy-chip>
+  <schmancy-chip value="clothing" icon="👕">Clothing</schmancy-chip>
+  <schmancy-chip value="books" icon="📚">Books</schmancy-chip>
+  <schmancy-chip value="home" icon="🏠">Home & Garden</schmancy-chip>
+  <schmancy-chip value="sports" icon="⚽">Sports</schmancy-chip>
 </schmancy-chips>
 
-// Email recipient chips
+// Skills/Tags selection
 <schmancy-chips
-  input
-  placeholder="Add recipient..."
-  @add=${addRecipient}
-  @remove=${removeRecipient}>
-  ${recipients.map(recipient => html`
-    <schmancy-chip text=${recipient.name} closable>
-      <schmancy-avatar
-        slot="prefix"
-        src=${recipient.avatar}
-        size="small">
-      </schmancy-avatar>
+  multi
+  .values=${selectedSkills}
+  @change=${(e) => selectedSkills = e.detail}>
+  ${availableSkills.map(skill => html`
+    <schmancy-chip 
+      value=${skill.id}
+      icon=${skill.icon}>
+      ${skill.name}
     </schmancy-chip>
   `)}
 </schmancy-chips>
 
-// Filter chips
+// Read-only chips display
 <div>
-  <div>Filters:</div>
-  <schmancy-chips>
-    ${filters.map(filter => html`
-      <schmancy-chip
-        text=${filter.label}
-        closable
-        @close=${() => removeFilter(filter.id)}>
-      </schmancy-chip>
-    `)}
-    
-    <schmancy-chip
-      text="Add Filter"
-      @click=${openFilterDialog}>
-      <schmancy-icon slot="prefix" icon="add"></schmancy-icon>
-    </schmancy-chip>
-  </schmancy-chips>
+  <schmancy-chip value="completed" icon="✅" readOnly>Completed</schmancy-chip>
+  <schmancy-chip value="pending" icon="⏳" readOnly>Pending</schmancy-chip>
+  <schmancy-chip value="cancelled" icon="❌" readOnly>Cancelled</schmancy-chip>
 </div>
 ```

package/dist/ai/boat.md

@@ -0,0 +1,118 @@
+# Boat Component
+
+## Overview
+The boat component is a bottom sheet that slides up from the bottom of the screen. It can be in one of three states: hidden, minimized, or expanded. This component is perfect for displaying additional content or actions while keeping the main interface accessible.
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `state` | `'hidden' \| 'minimized' \| 'expanded'` | `'hidden'` | The current state of the boat component |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `change` | `'hidden' \| 'minimized' \| 'expanded'` | Fired when the state changes |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `header` | Content to display in the header area (visible in both minimized and expanded states) |
+| Default | Main content displayed when the boat is expanded |
+
+## Usage
+
+### Basic Example
+```html
+<schmancy-boat state="minimized">
+  <schmancy-typography slot="header" variant="title">
+    Boat Title
+  </schmancy-typography>
+  
+  <schmancy-flex direction="column" gap="md" class="p-4">
+    <schmancy-typography>
+      This is the main content of the boat component.
+    </schmancy-typography>
+  </schmancy-flex>
+</schmancy-boat>
+```
+
+### With Icon in Header
+```html
+<schmancy-boat state="minimized" @change="${(e) => console.log(e.detail)}">
+  <schmancy-flex slot="header" gap="sm" content="center">
+    <schmancy-icon>info</schmancy-icon>
+    <schmancy-typography variant="title">Settings</schmancy-typography>
+  </schmancy-flex>
+  
+  <schmancy-flex direction="column" gap="md" class="p-4">
+    <!-- Settings content -->
+  </schmancy-flex>
+</schmancy-boat>
+```
+
+### Controlling State
+```typescript
+// Get reference to boat
+const boat = document.querySelector('schmancy-boat');
+
+// Show minimized
+boat.state = 'minimized';
+
+// Show expanded
+boat.state = 'expanded';
+
+// Hide
+boat.state = 'hidden';
+
+// Listen for state changes
+boat.addEventListener('change', (e) => {
+  console.log('New state:', e.detail);
+});
+```
+
+## Features
+
+- **Three States**: Hidden (completely off-screen), minimized (shows only header), and expanded (shows all content)
+- **Smooth Transitions**: Animated transitions between states using CSS transforms
+- **Responsive Design**: Different widths on various screen sizes:
+  - Mobile: 100% width
+  - Tablet: 70% width
+  - Desktop: 60% width
+  - Large screens: 40% width
+- **Fixed Positioning**: Always appears at the bottom-right of the viewport
+- **Overflow Handling**: Content scrolls when it exceeds 80vh max height
+- **Sticky Header**: Header remains visible when scrolling through content
+
+## CSS Classes
+
+The component uses internal CSS classes for styling:
+- `.translate-y-full`: Positions the boat completely off-screen (hidden state)
+- `.translate-y-full-minus-64`: Shows only the header (minimized state)
+- `.translate-y-0`: Shows the entire boat (expanded state)
+
+## Use Cases
+
+- **Chat Interfaces**: Keep a chat window accessible while browsing
+- **Media Players**: Minimize music/video controls while using other features
+- **Quick Settings**: Provide easy access to frequently used settings
+- **Notifications**: Show important information that users can minimize
+- **Form Wizards**: Multi-step forms that can be minimized during the process
+- **Help/Support**: Keep help documentation accessible while working
+
+## Accessibility
+
+- The component uses semantic HTML structure
+- State changes are announced via events
+- Keyboard navigation is supported through the button controls
+- Focus management is handled automatically
+
+## Best Practices
+
+1. **Header Content**: Keep header content concise and descriptive
+2. **State Management**: Store the boat state in your application state if persistence is needed
+3. **Content Height**: Design content to work well within the max-height constraint
+4. **Mobile Considerations**: Test thoroughly on mobile devices where the boat takes full width
+5. **Z-Index**: The component uses `z-[100]` - ensure this works with your app's z-index hierarchy