@mhmo91/schmancy 0.8.6 → 0.9.2

package/dist/ai/notification.md

@@ -1,194 +1,60 @@
-# Schmancy Notification - AI Reference
+# $notify
 
-## Core Notification Service
+> Notification service with type-colored luminous glow, progress bar countdown, and arc-path entry animation.
 
-```js
-import { $notify } from '@schmancy/index'
-// Or specific import: import { $notify } from '@schmancy/notification'
+## Usage
+```typescript
+import { $notify } from '@mhmo91/schmancy'
 
-// Display notification methods
-$notify.info(message?, options?) -> string    // Returns notification ID
-$notify.success(message?, options?) -> string
-$notify.warning(message?, options?) -> string
-$notify.error(message?, options?) -> string
-
-// Custom notification
-$notify.show({
-  message: string,
-  type?: 'info'|'success'|'warning'|'error',
-  title?: string,
-  duration?: number,      // milliseconds, default 1000
-  closable?: boolean,     // default true
-  playSound?: boolean,    // default true
-  showProgress?: boolean, // show progress bar
-  id?: string            // custom ID
-}) -> string
-
-// Dismiss notifications
-$notify.dismiss(id?)     // Dismisses specific notification or latest if no ID
-
-// Update notification content
-$notify.update(id, options)  // Update existing notification
-
-// Persistent notification
-$notify.persistent(message, options)  // Won't auto-dismiss (duration: 0)
-
-// Custom duration
-$notify.customDuration(message, duration, options)
-```
-
-## API Integration with notify()
-
-The `notify()` operator wraps observables with automatic notification lifecycle management.
-
-```js
-import { notify } from '@schmancy/index'
-// Or specific import: import { notify } from '@schmancy/notification'
-
-// Basic usage - minimal configuration
-someApiCall().pipe(
-  notify({
-    loadingMessage: 'Loading data...',
-    successMessage: 'Data loaded!',
-    errorMessage: 'Failed to load'
-  })
-).subscribe()
-
-// With custom durations
-saveData().pipe(
-  notify({
-    loadingMessage: 'Saving...',
-    successMessage: 'Saved!',
-    successDuration: 5000,  // Success stays 5 seconds
-    errorMessage: 'Save failed',
-    errorDuration: 0        // Error is persistent
-  })
-).subscribe()
-
-// Full configuration
-uploadFile().pipe(
-  notify({
-    // Loading state
-    loadingMessage: 'Uploading file...',
-    loadingType: 'info',
-    
-    // Success state
-    successMessage: 'Upload complete!',
-    successType: 'success',
-    successDuration: 3000,
-    
-    // Error state
-    errorMessage: (err) => `Upload failed: ${err.message}`,
-    errorType: 'error',
-    errorDuration: 10000,
-    
-    // Options
-    autoDismissLoading: true
-  })
-).subscribe()
-
-// With progress tracking
-// Automatically detects { progress: number } or { loaded, total } in emissions
-fileUpload().pipe(
-  notify({
-    loadingMessage: 'Uploading...',  // Updates to "Uploading... (50%)"
-    successMessage: 'Upload complete!',
-    errorMessage: 'Upload failed'
-  })
-).subscribe()
-```
-
-### notify() Options
-
-| Option | Type | Description |
-|--------|------|-------------|
-| `loadingMessage` | string | Message during loading |
-| `loadingType` | NotificationType | Type for loading notification |
-| `successMessage` | string | Message on success |
-| `successType` | NotificationType | Type for success notification |
-| `successDuration` | number | Duration for success (ms, 0 = persistent) |
-| `errorMessage` | string \| (err) => string | Message on error |
-| `errorType` | NotificationType | Type for error notification |
-| `errorDuration` | number | Duration for error (ms, 0 = persistent) |
-| `autoDismissLoading` | boolean | Auto-dismiss loading on complete |
-
-## Components
-
-### Notification Container
-
-```html
-<schmancy-notification-container
-  position="top-right|top-left|bottom-right|bottom-left|top-center|bottom-center"
-  max-visible-notifications="2"
-  play-sound="true|false"
-  audio-volume="0.1">
-</schmancy-notification-container>
+$notify.success('Item saved')
+$notify.error('Failed to connect')
 ```
 
-### Individual Notification (used internally)
-
-```html
-<schmancy-notification
-  title="Title"
-  message="Message text"
-  type="info|success|warning|error"
-  duration="5000"
-  closable="true"
-  play-sound="true"
-  show-progress="false"
-  @close>
-</schmancy-notification>
-```
+## $notify API
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `success(message?, options?)` | `string` (id) | Green glow, 1.5s duration |
+| `error(message?, options?)` | `string` (id) | Red glow, 2.5s duration |
+| `warning(message?, options?)` | `string` (id) | Orange glow, 2.5s duration |
+| `info(message?, options?)` | `string` (id) | Blue glow, 2s duration |
+| `show(options)` | `string` (id) | Full options control |
+| `persistent(message, options?)` | `string` (id) | No auto-dismiss (duration: 0) |
+| `customDuration(msg, ms, options?)` | `string` (id) | Custom duration in ms |
+| `dismiss(id?)` | `void` | Dismiss by id or most recent |
+| `update(id, options)` | `void` | Update existing notification content |
+
+## Options
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `message` | `string` | required | Notification body text |
+| `title` | `string` | `undefined` | Optional title line |
+| `type` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | Notification type |
+| `duration` | `number` | Type-specific | Auto-dismiss ms (0 = persistent) |
+| `closable` | `boolean` | `true` | Show close button |
+| `playSound` | `boolean` | `true` | Play type-specific sound |
+| `showProgress` | `boolean` | `false` | Show indeterminate progress bar |
+
+## Physics
+- Type-colored luminous glow shadow (18% intensity, 28% on hover)
+- Arc-path entry animation from last click position to top-right corner
+- Hover: glow intensifies + `translateY(-2px)` lift
+- Progress bar shows countdown timer; pauses on hover
+- Only one notification visible at a time (replaces previous)
 
 ## Examples
+```typescript
+// Success with title
+$notify.success('Changes saved', { title: 'Success' })
 
-```js
-// Basic notifications
-$notify.success("Operation completed")
-$notify.error("Failed to save", { duration: 5000 })
-$notify.info() // Just icon, no message
+// Persistent loading indicator
+const id = $notify.persistent('Processing...', { showProgress: true })
+// Later: dismiss it
+$notify.dismiss(id)
 
-// Persistent notification
-const id = $notify.persistent("Processing...")
-// Later: $notify.dismiss(id)
+// Error with longer duration
+$notify.error('Connection lost', { duration: 5000 })
 
-// API with loading state
-fetchData().pipe(
-  notify({
-    loadingMessage: 'Fetching...',
-    successMessage: 'Data loaded!',
-    errorMessage: 'Failed'
-  })
-).subscribe()
-
-// File upload with progress
-upload(file).pipe(
-  notify({
-    loadingMessage: 'Uploading file...',
-    successMessage: 'Upload complete!',
-    successDuration: 3000,
-    errorMessage: (err) => `Upload failed: ${err.message}`,
-    errorDuration: 0  // Persistent error
-  })
-).subscribe()
+// Update existing notification
+const nid = $notify.info('Uploading...')
+$notify.update(nid, { message: 'Upload complete', type: 'success' })
 ```
-
-## Setup
-
-Add the notification container once in your app layout:
-
-```html
-<schmancy-notification-container
-  position="top-right"
-  max-visible-notifications="3"
-  play-sound="true">
-</schmancy-notification-container>
-```
-
-## Progress Indication
-
-- Notifications automatically show a progress bar when `duration > 0` (countdown)
-- When using `notify()` operator, shows indeterminate progress during loading
-- Detects progress in observable emissions:
-  - `{ progress: 50 }` - Shows "Loading... (50%)"
-  - `{ loaded: 500, total: 1000 }` - Shows "Loading... (50%)"

package/dist/ai/progress.md

@@ -1,69 +1,30 @@
-# Schmancy Progress - AI Reference
+# schmancy-progress
 
-Linear progress indicator showing task completion status.
+> Linear progress bar with determinate and indeterminate modes, color variants, and glass effect.
 
-```js
-// Component Tag
-<schmancy-progress
-  value="number"
-  max="number"
-  size="sm|md|lg"
-  color="primary|secondary|tertiary|error|success"
-  indeterminate?>
-</schmancy-progress>
-
-// Examples
-// 1. Basic progress
-<schmancy-progress value="30" max="100"></schmancy-progress>
-
-// 2. Different sizes
-<schmancy-progress value="50" max="100" size="sm"></schmancy-progress>
-<schmancy-progress value="50" max="100" size="md"></schmancy-progress>
-<schmancy-progress value="50" max="100" size="lg"></schmancy-progress>
-
-// 3. Color variants
-<schmancy-progress value="60" max="100" color="primary"></schmancy-progress>
-<schmancy-progress value="60" max="100" color="success"></schmancy-progress>
-<schmancy-progress value="60" max="100" color="error"></schmancy-progress>
-
-// 4. Indeterminate progress
-<schmancy-progress indeterminate></schmancy-progress>
-
-// 5. Custom max value
-<schmancy-progress value="750" max="1000"></schmancy-progress>
-
-// 6. With labels
-<div class="space-y-2">
-  <div class="flex justify-between mb-1">
-    <schmancy-typography type="label" token="sm">Upload Progress</schmancy-typography>
-    <schmancy-typography type="label" token="sm">75%</schmancy-typography>
-  </div>
-  <schmancy-progress value="75" max="100" color="success"></schmancy-progress>
-</div>
+## Usage
+```html
+<schmancy-progress value="60" max="100"></schmancy-progress>
 ```
 
-## Related Components
-- **[Circular Progress](./circular-progress.md)**: For circular progress indicators
-- **[Typography](./typography.md)**: For progress labels
-
-## Technical Details
-### Properties
-- `value`: Current progress value (0 to max)
-- `max`: Maximum value (default: 100)
-- `size`: Height variant - sm (2px), md (4px), lg (8px)
-- `color`: Theme color variant
-- `indeterminate`: Shows animated progress when value unknown
-
-### CSS Implementation
-Uses Tailwind classes:
-- Container: `bg-surface-container rounded-full`
-- Bar: `bg-[color] transition-all duration-300`
-- Sizes: `h-0.5` (sm), `h-1` (md), `h-2` (lg)
-- Indeterminate: Custom animation for continuous movement
-
-## Common Use Cases
-1. **File Upload**: Show upload progress with percentage
-2. **Form Completion**: Display multi-step form progress
-3. **Loading States**: Indeterminate mode for unknown duration
-4. **Data Processing**: Track batch operation progress
-5. **Download Progress**: Show download completion status
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| value | number | `0` | Current progress value |
+| max | number | `100` | Maximum value |
+| indeterminate | boolean | `false` | Show indeterminate animation |
+| size | `'xs'\|'sm'\|'md'\|'lg'` | `'md'` | Track height (1px, 2px, 4px, 8px) |
+| color | `'primary'\|'secondary'\|'tertiary'\|'error'\|'success'` | `'primary'` | Bar color |
+| glass | boolean | `false` | Glass/frosted effect |
+
+## Examples
+```html
+<!-- Indeterminate loading -->
+<schmancy-progress indeterminate color="secondary"></schmancy-progress>
+
+<!-- Glass effect progress -->
+<schmancy-progress value="75" glass size="lg" color="success"></schmancy-progress>
+
+<!-- Thin track -->
+<schmancy-progress value="30" size="xs"></schmancy-progress>
+```

package/dist/ai/radio-group.md

@@ -1,194 +1,50 @@
-# Schmancy Radio Group - AI Reference
+# schmancy-radio-group
 
-```js
-// Basic Radio Group with options array
-<schmancy-radio-group
-  name="radio-group-name"
-  label="Group Label"
-  value="selected-value"
-  .options=${[
-    { value: "option1", label: "Option 1" },
-    { value: "option2", label: "Option 2" },
-    { value: "option3", label: "Option 3" }
-  ]}
-  required?
-  @change=${handleChange}>
-</schmancy-radio-group>
+> Radio button group with options array or slotted radio buttons.
 
-// Radio Group with slotted radio buttons
-<schmancy-radio-group
-  label="Select payment method"
-  value="credit"
-  @change=${handleChange}>
-  
-  <schmancy-radio-button
-    value="credit"
-    name="payment">
-    <span slot="label">Credit Card</span>
-  </schmancy-radio-button>
-  
-  <schmancy-radio-button
-    value="paypal"
-    name="payment">
-    <span slot="label">PayPal</span>
-  </schmancy-radio-button>
-  
-  <schmancy-radio-button
-    value="bank"
-    name="payment"
-    disabled>
-    <span slot="label">Bank Transfer</span>
-  </schmancy-radio-button>
+## Usage
+```html
+<!-- With options array -->
+<schmancy-radio-group label="Size" name="size"
+  .options=${[{label: 'Small', value: 's'}, {label: 'Large', value: 'l'}]}
+  @change=${(e) => handle(e.detail.value)}>
 </schmancy-radio-group>
-
-// Standalone radio button (without group)
-<schmancy-radio-button 
-  value="standalone" 
-  name="standalone-radio"
-  checked
-  @change=${handleChange}>
-  <span slot="label">Standalone Option</span>
-</schmancy-radio-button>
-
-// Radio Group Properties
-name: string           // Form field name
-label: string          // Group label
-value: string          // Currently selected value
-options: Array<{       // Options array (alternative to slotted content)
-  value: string,
-  label: string
-}>
-required: boolean      // Whether selection is required
-
-// Radio Button Properties
-value: string          // The value of this option
-name: string           // Form field name (for standalone use)
-checked: boolean       // Whether this option is selected
-disabled: boolean      // Whether this option is disabled
-
-// Events
-@change  // CustomEvent<{ value: string }> - Fired when selection changes
-@radio-button-click  // Internal event for group communication
-
-// Radio Group Methods
-radioGroup.focus() -> void       // Focus the first/selected radio button
-radioGroup.validate() -> boolean // Validate and show error if invalid
-radioGroup.reset() -> void       // Reset to initial value
-
-// Radio Group Properties
-value: string        // Currently selected value
-name: string         // Name attribute for the radio buttons
-disabled: boolean    // Whether the entire group is disabled
-required: boolean    // Whether a selection is required
-error: string        // Error message to display
-
-// Radio Button Properties
-value: string        // Value of this option
-label: string        // Label text
-disabled: boolean    // Whether this option is disabled
-checked: boolean     // Whether this option is selected (set by group)
-
-// Radio Group Events
-@change  // Fires when selection changes, with { detail: { value } }
-@input   // Fires during interaction
-@focus   // Fires when group gains focus
-@blur    // Fires when group loses focus
-
-// Examples
-// Basic usage
-<schmancy-radio-group
-  name="flavor"
-  label="Select flavor"
-  value="vanilla"
-  @change=${(e) => console.log('Selected:', e.detail.value)}>
-  
-  <schmancy-radio-button
-    value="vanilla"
-    label="Vanilla">
-  </schmancy-radio-button>
-  
-  <schmancy-radio-button
-    value="chocolate"
-    label="Chocolate">
-  </schmancy-radio-button>
-  
-  <schmancy-radio-button
-    value="strawberry"
-    label="Strawberry">
-  </schmancy-radio-button>
-</schmancy-radio-group>
-
-// Radio buttons with descriptions
-<schmancy-radio-group
-  name="plan"
-  label="Select subscription plan"
-  value="basic">
-  
-  <schmancy-radio-button
-    value="basic"
-    label="Basic Plan">
-    <div slot="description">
-      $9.99/month - Access to basic features
-    </div>
+```
+
+## Properties (schmancy-radio-group)
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| value | string | `''` | Currently selected value |
+| label | string | `''` | Group label |
+| name | string | `''` | Form submission name |
+| options | `{label: string, value: string}[]` | `[]` | Radio options |
+| required | boolean | `false` | Whether selection is required |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| change | `{ value: string }` | When selection changes |
+
+## Properties (schmancy-radio-button)
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| value | string | `''` | Button value |
+| checked | boolean | `false` | Whether selected |
+| disabled | boolean | `false` | Whether disabled |
+| name | string | `''` | Group name |
+
+## Examples
+```html
+<!-- With slotted radio buttons -->
+<schmancy-radio-group label="Priority" name="priority" value="medium">
+  <schmancy-radio-button value="low">
+    <span slot="label">Low</span>
+  </schmancy-radio-button>
+  <schmancy-radio-button value="medium">
+    <span slot="label">Medium</span>
+  </schmancy-radio-button>
+  <schmancy-radio-button value="high">
+    <span slot="label">High</span>
   </schmancy-radio-button>
-  
-  <schmancy-radio-button
-    value="pro"
-    label="Pro Plan">
-    <div slot="description">
-      $19.99/month - Access to all features
-    </div>
-  </schmancy-radio-button>
-  
-  <schmancy-radio-button
-    value="enterprise"
-    label="Enterprise Plan">
-    <div slot="description">
-      $49.99/month - Priority support and advanced features
-    </div>
-  </schmancy-radio-button>
-</schmancy-radio-group>
-
-// Usage in a form
-<schmancy-form @submit=${handleSubmit}>
-  <schmancy-input name="name" label="Name" required></schmancy-input>
-  
-  <schmancy-radio-group
-    name="gender"
-    label="Gender"
-    required>
-    
-    <schmancy-radio-button
-      value="male"
-      label="Male">
-    </schmancy-radio-button>
-    
-    <schmancy-radio-button
-      value="female"
-      label="Female">
-    </schmancy-radio-button>
-    
-    <schmancy-radio-button
-      value="other"
-      label="Other">
-    </schmancy-radio-button>
-  </schmancy-radio-group>
-  
-  <schmancy-button type="submit">Submit</schmancy-button>
-</schmancy-form>
-
-// Dynamic radio options from data
-<schmancy-radio-group
-  name="country"
-  label="Select country"
-  value=${selectedCountry}
-  @change=${(e) => selectedCountry = e.detail.value}>
-  
-  ${countries.map(country => html`
-    <schmancy-radio-button
-      value=${country.code}
-      label=${country.name}>
-    </schmancy-radio-button>
-  `)}
 </schmancy-radio-group>
-```
+```