@mhmo91/schmancy 0.9.2 → 0.9.4

package/src/icons/readme.md

@@ -1,37 +0,0 @@
-# Schmancy-Icon Usage Guide
-
-## Introduction
-
-This README provides guidance on how to use the `<schmancy-icon>` element in your web projects, utilizing the icon library from Google Fonts.
-
-## Implementation Steps
-
-### Using `<schmancy-icon>`
-
-To use the `<schmancy-icon>` element, insert it into your HTML structure and pass the icon name from Google Fonts as a slot. For example:
-
-```html
-<schmancy-icon> delete </schmancy-icon>
-```
-
-Here, `delete` is the name of the icon from Google Fonts.
-
-## Example
-
-Here's a full example of using `<schmancy-icon>` with the Google Fonts icon library:
-
-```html
-<schmancy-icon> delete </schmancy-icon>
-```
-
-## Additional Resources
-
-- [Google Fonts Icons](https://fonts.google.com/icons)
-
-## Conclusion
-
-With this simple guide, you can now incorporate stylish icons from Google Fonts into your web projects using the `<schmancy-icon>` element. Experiment with different icons to enhance your web designs!
-
----
-
-Feel free to modify or expand upon this README as needed for your specific use case or project requirements.

package/src/list/readme.md

@@ -1,62 +0,0 @@
-Creating a README for a custom HTML component like `<schmancy-list>` involves providing detailed instructions and explanations about how to use the component, its features, and its structure. Here's a sample README for the `<schmancy-list>` component:
-
----
-
-# Schmancy List Component
-
-## Overview
-
-The `<schmancy-list>` is a custom HTML component designed to create visually appealing and interactive lists. Each list item can include icons, quotes, and additional elements, making it ideal for displaying quotes, user profiles, or similar content.
-
-## Features
-
-- Customizable leading and trailing icons.
-- Support for multi-line text in the main content area.
-- Slot-based structure for easy customization.
-
-## Usage
-
-### Basic Structure
-
-The `<schmancy-list>` contains individual `<schmancy-list-item>` elements. Each list item supports three slots:
-
-- `leading`: For leading icons or images.
-- `support`: For the main content, such as text or quotes.
-- `trailing`: For trailing icons or interactive elements.
-
-### Example
-
-```html
-<schmancy-list>
-	<schmancy-list-item>
-		<div slot="leading"><img src="path_to_icon.svg" /></div>
-		Main Content Here
-		<div slot="support">Additional supporting text or quote.</div>
-		<div slot="trailing"><img src="path_to_icon.svg" /></div>
-	</schmancy-list-item>
-</schmancy-list>
-```
-
-### Icons and Images
-
-The component allows the use of SVG or other image formats for icons. These can be placed in the `leading` and `trailing` slots.
-
-### Styling
-
-You can apply custom CSS styles to `<schmancy-list>` and `<schmancy-list-item>` for further customization. This includes changing the font, color, size, and layout of the list and its items.
-
-## Dependencies
-
-This component has no external dependencies but requires a modern browser that supports custom HTML elements.
-
-## Browser Support
-
-The component is tested and works in the latest versions of Chrome, Firefox, Safari, and Edge.
-
-## License
-
-This component is released under the [MIT License](link_to_license).
-
----
-
-This README provides a clear overview of the component, its structure, and how to use it effectively. You can customize it further based on the specific functionalities and styles of your `<schmancy-list>` component.

package/src/radio-group/readme.md

@@ -1,315 +0,0 @@
-# Schmancy Radio Group Component
-
-A flexible radio button group component with support for both declarative options and slotted radio buttons, built with reactive state management.
-
-## Overview
-
-The `schmancy-radio-group` component provides two usage patterns:
-- **Declarative options**: Pass an array of options for automatic radio button generation
-- **Slotted radio buttons**: Use individual `schmancy-radio-button` components for maximum flexibility
-- **Form integration**: Full HTML form support with validation
-- **Reactive state management**: Built with RxJS for predictable state updates
-- **TypeScript support**: Complete type safety with proper interfaces
-
-## Installation
-
-```typescript
-import '@schmancy/radio-group'
-// or
-import { RadioGroup, RadioButton } from '@schmancy/radio-group'
-```
-
-## Basic Usage
-
-### Declarative Options
-
-```html
-<schmancy-radio-group
-  name="fruit"
-  label="Select your favorite fruit"
-  value="apple"
-  required
-  .options=${[
-    { label: 'Apple', value: 'apple' },
-    { label: 'Banana', value: 'banana' },
-    { label: 'Orange', value: 'orange' }
-  ]}
-></schmancy-radio-group>
-```
-
-```typescript
-// Setting value programmatically
-const radioGroup = document.querySelector('schmancy-radio-group')
-radioGroup.value = 'banana'
-
-// Getting selected value
-console.log(radioGroup.value) // 'banana'
-```
-
-### Slotted Radio Buttons
-
-For more control over individual radio buttons:
-
-```html
-<schmancy-radio-group name="size" label="Select size" value="medium">
-  <schmancy-radio-button value="small">
-    <span slot="label">Small (S)</span>
-  </schmancy-radio-button>
-  <schmancy-radio-button value="medium">
-    <span slot="label">Medium (M)</span>
-  </schmancy-radio-button>
-  <schmancy-radio-button value="large">
-    <span slot="label">Large (L)</span>
-  </schmancy-radio-button>
-</schmancy-radio-group>
-```
-
-## Properties
-
-### SchmancyRadioGroup
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `name` | `string` | `''` | Form field name for submission |
-| `value` | `string` | `''` | Currently selected value |
-| `label` | `string` | `''` | Group label displayed above options |
-| `options` | `SchmancyRadioGroupOption[]` | `[]` | Array of options for declarative mode |
-| `required` | `boolean` | `false` | Make field required for form validation |
-
-### SchmancyRadioButton
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `value` | `string` | `''` | Value of this radio button |
-| `checked` | `boolean` | `false` | Whether this button is selected |
-| `disabled` | `boolean` | `false` | Disable this radio button |
-| `name` | `string` | `''` | Form field name (usually inherited from group) |
-
-## Types
-
-```typescript
-interface SchmancyRadioGroupOption {
-  label: string
-  value: string
-}
-
-interface SchmancyRadioGroupChangeEvent extends CustomEvent {
-  detail: {
-    value: string
-  }
-}
-```
-
-## Events
-
-### SchmancyRadioGroupChangeEvent
-
-The component dispatches a `change` event when the selection changes:
-
-```typescript
-// Event handling
-radioGroup.addEventListener('change', (e: SchmancyRadioGroupChangeEvent) => {
-  console.log('Selected value:', e.detail.value)
-})
-```
-
-## Form Integration
-
-The component fully supports HTML form integration:
-
-```html
-<form id="preferencesForm">
-  <schmancy-radio-group
-    name="theme"
-    label="Theme Preference"
-    required
-    .options=${[
-      { label: 'Light Mode', value: 'light' },
-      { label: 'Dark Mode', value: 'dark' },
-      { label: 'Auto (System)', value: 'auto' }
-    ]}
-  ></schmancy-radio-group>
-
-  <schmancy-radio-group
-    name="notifications"
-    label="Notification Frequency"
-    value="daily"
-    .options=${[
-      { label: 'Immediate', value: 'immediate' },
-      { label: 'Daily Digest', value: 'daily' },
-      { label: 'Weekly Summary', value: 'weekly' },
-      { label: 'Disabled', value: 'never' }
-    ]}
-  ></schmancy-radio-group>
-
-  <button type="submit">Save Preferences</button>
-</form>
-```
-
-```typescript
-// Form submission handling
-document.getElementById('preferencesForm').addEventListener('submit', (e) => {
-  e.preventDefault()
-  const formData = new FormData(e.target)
-
-  console.log({
-    theme: formData.get('theme'),
-    notifications: formData.get('notifications')
-  })
-})
-```
-
-## Advanced Examples
-
-### Mixed Usage Pattern
-
-```html
-<schmancy-radio-group name="plan" label="Select Plan" value="pro">
-  <!-- Custom radio button with rich content -->
-  <schmancy-radio-button value="free">
-    <div slot="label" class="flex items-center justify-between w-full">
-      <div>
-        <div class="font-semibold">Free Plan</div>
-        <div class="text-sm text-gray-500">Basic features</div>
-      </div>
-      <div class="text-lg font-bold">$0</div>
-    </div>
-  </schmancy-radio-button>
-
-  <!-- Another custom radio button -->
-  <schmancy-radio-button value="pro">
-    <div slot="label" class="flex items-center justify-between w-full">
-      <div>
-        <div class="font-semibold">Pro Plan</div>
-        <div class="text-sm text-gray-500">Advanced features</div>
-      </div>
-      <div class="text-lg font-bold">$19/mo</div>
-    </div>
-  </schmancy-radio-button>
-
-  <schmancy-radio-button value="enterprise">
-    <div slot="label" class="flex items-center justify-between w-full">
-      <div>
-        <div class="font-semibold">Enterprise Plan</div>
-        <div class="text-sm text-gray-500">All features + support</div>
-      </div>
-      <div class="text-lg font-bold">$99/mo</div>
-    </div>
-  </schmancy-radio-button>
-</schmancy-radio-group>
-```
-
-### Dynamic Options
-
-```typescript
-// Populate options dynamically
-const radioGroup = document.querySelector<RadioGroup>('schmancy-radio-group')
-
-async function loadCategories() {
-  const categories = await fetch('/api/categories').then(r => r.json())
-
-  radioGroup.options = categories.map(cat => ({
-    label: cat.name,
-    value: cat.id
-  }))
-}
-
-// Set initial selection
-radioGroup.value = 'default-category'
-
-// Listen for changes
-radioGroup.addEventListener('change', (e: SchmancyRadioGroupChangeEvent) => {
-  console.log('Category selected:', e.detail.value)
-  updateContentForCategory(e.detail.value)
-})
-```
-
-### Standalone Radio Button
-
-Radio buttons can also be used independently outside of a radio group:
-
-```html
-<schmancy-radio-button
-  name="standalone"
-  value="option1"
-  checked
->
-  <span slot="label">I agree to the terms and conditions</span>
-</schmancy-radio-button>
-```
-
-```typescript
-const standaloneRadio = document.querySelector('schmancy-radio-button')
-standaloneRadio.addEventListener('change', (e) => {
-  console.log('Checkbox changed:', e.detail.value)
-})
-```
-
-## Accessibility Features
-
-The component implements comprehensive accessibility features:
-
-### Keyboard Navigation
-- **Tab**: Move focus between radio buttons
-- **Arrow Keys**: Navigate between options within a group
-- **Space**: Select the focused radio button
-
-### ARIA Attributes
-The component automatically manages ARIA attributes:
-- `role="radiogroup"` on the container
-- `role="radio"` on individual buttons
-- `aria-checked` state management
-- `aria-required` for required groups
-- `aria-disabled` for disabled buttons
-
-### Screen Reader Support
-Full screen reader compatibility with proper announcements for:
-- Group labels and descriptions
-- Selected values
-- Required field states
-
-## TypeScript Usage
-
-```typescript
-import {
-  RadioGroup,
-  RadioButton,
-  SchmancyRadioGroupChangeEvent,
-  SchmancyRadioGroupOption
-} from '@schmancy/radio-group'
-
-// Create options with type safety
-const themeOptions: SchmancyRadioGroupOption[] = [
-  { label: 'Light', value: 'light' },
-  { label: 'Dark', value: 'dark' }
-]
-
-// Get typed reference
-const radioGroup = document.querySelector<RadioGroup>('schmancy-radio-group')
-
-// Type-safe value setting
-radioGroup.options = themeOptions
-radioGroup.value = 'light'
-
-// Typed event handling
-radioGroup?.addEventListener('change', (event: SchmancyRadioGroupChangeEvent) => {
-  const selectedValue: string = event.detail.value
-  console.log('Selected:', selectedValue)
-})
-```
-
-## Browser Support
-
-The component uses modern web standards and requires browsers that support:
-- Custom Elements v1
-- Shadow DOM v1
-- ES2015+
-- CSS Custom Properties
-
-For older browsers, consider using appropriate polyfills.
-
-## Related Components
-
-- `schmancy-radio-button` - Individual radio button component
-- `schmancy-checkbox` - Checkbox component for multi-select scenarios
-- `schmancy-select` - Dropdown selection component