@stacksjs/components 0.2.3

package/README.md

@@ -0,0 +1,477 @@
+# @stacksjs/components
+
+A modern, accessible component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.
+
+## Features
+
+- 🚀 Built with STX templating engine
+- 🎨 Styled with headwind utility-first CSS
+- 🎯 TypeScript syntax highlighting with ts-syntax-highlighter
+- ♿ Accessible by default (WAI-ARIA compliant)
+- 🌙 Dark mode support
+- 📦 Tree-shakeable
+- 🔧 Fully customizable
+- ⚡ Optimized for performance
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+Or with other package managers:
+
+```bash
+npm install @stacksjs/components
+pnpm add @stacksjs/components
+yarn add @stacksjs/components
+```
+
+## Components
+
+### UI Components (35)
+
+- **Accordion** - Expandable content sections with keyboard navigation
+- **Auth** - Login, Signup, and 2FA components
+- **Audio** - Audio player with waveform visualization
+- **Avatar** - User avatars with fallback initials and status indicators
+- **Badge** - Labels and tags with color variants and removable option
+- **Breadcrumb** - Navigation breadcrumbs with collapse support
+- **Button** - Versatile button with loading, icons, 5 sizes (xs-xl), full-width
+- **Calendar** - Date picker with localization, min/max dates, disabled dates, dark mode ✨ NEW
+- **Card** - Content cards with images, variants, and hover effects
+- **Drawer** - Slide-out panel from any direction
+- **Form** - Form wrapper with validation, error handling, and submit management
+- **Image** - Optimized images with lazy loading, srcset, WebP, blur placeholder
+- **Pagination** - Page navigation with customizable display
+- **Portal** - Render content outside DOM hierarchy
+- **Teleport** - Move content to different DOM nodes
+- **Payment** - Stripe checkout and payment management (3 components)
+- **Progress** - Linear and circular progress indicators
+- **Select** - Native-style select dropdown
+- **Skeleton** - Loading placeholders with multiple variants
+- **Spinner** - Loading spinners with multiple styles (circle, dots, bars, ring)
+- **Storage** - Enhanced storage with watch, compression, encryption, batch operations, quota checking
+- **Switch** - Modern toggle switch component
+- **Tabs** - Tabbed content with horizontal/vertical layouts and multiple variants
+- **Tooltip** - Contextual tooltips with positioning options
+- **Video** - Video player with aspect ratio support
+- **VirtualList** - Windowed list for rendering large datasets efficiently
+- **VirtualTable** - Windowed table with columns for large datasets
+- **Dropdown** - Menu dropdown component with keyboard navigation
+- **Dialog** - Modal dialog component with backdrop
+- **Radio Group** - Radio button group with single selection
+- **Popover** - Floating panel component with positioning
+- **Listbox** - Custom select component with keyboard support
+- **Combobox** - Searchable select with filtering
+- **Navigator** - Navigation component with 4 variants (default, pills, underline, sidebar), icons, badges ✨ NEW
+- **Notification** - Toast notifications with auto-hide
+- **Stepper** - Multi-step progress indicator
+- **Transition** - Enter/leave animations with 7 presets, lifecycle hooks, and custom timing
+- **Table** - Responsive table with sorting/filtering
+- **Command Palette** - Searchable command menu
+
+### Input Components (5)
+
+- **TextInput** - Base input with icons, clear button, character counter
+- **EmailInput** - Email input with validation
+- **PasswordInput** - Password input with show/hide toggle & strength indicator
+- **NumberInput** - Number input with increment/decrement controls
+- **SearchInput** - Search with debounced callback
+
+### Form Components (3)
+
+- **Textarea** - Multi-line input with auto-resize
+- **Checkbox** - Checkbox with indeterminate state
+- **Radio** - Radio button with descriptions
+
+### Utility Components
+
+- **CodeBlock** - Syntax highlighted code blocks with copy functionality
+- **Hero** - Hero section component
+- **Footer** - Footer component with social links
+- **Installation** - Installation instructions component
+
+## Component Syntax
+
+stx provides multiple ways to use components, giving you flexibility to choose the syntax that best fits your project:
+
+### 1. @component Directive with Object Shorthand (Recommended)
+
+The most concise syntax using ES6 object shorthand:
+
+```stx
+<script>
+export const title = 'Welcome'
+export const variant = 'primary'
+export const onClick = () => console.log('clicked')
+</script>
+
+@component('Button', {
+  title,
+  variant,
+  onClick
+})
+@endcomponent
+```
+
+### 2. @component Directive with Full Props
+
+Traditional explicit prop mapping:
+
+```stx
+@component('Button', {
+  title: title,
+  variant: variant,
+  onClick: onClick
+})
+@endcomponent
+```
+
+### 3. PascalCase Component Tags with Dynamic Binding (Vue-like)
+
+Use `:prop` syntax for dynamic values from context:
+
+```stx
+<script>
+export const title = 'Welcome'
+export const variant = 'primary'
+</script>
+
+<Button
+  :title="title"
+  :variant="variant"
+  :onClick="onClick"
+/>
+```
+
+### 4. PascalCase Component Tags with Static Values
+
+Use regular attributes for static strings:
+
+```stx
+<Button
+  title="Welcome"
+  variant="primary"
+/>
+```
+
+### 5. Mixed Static and Dynamic Props
+
+Combine static strings and dynamic bindings:
+
+```stx
+<Button
+  title="Static Title"
+  :variant="dynamicVariant"
+  size="large"
+/>
+```
+
+All these syntaxes are equivalent and fully interchangeable. Choose the one that fits your coding style!
+
+## Usage
+
+### Basic Example
+
+```stx
+<script>
+import { Button, Switch } from '@stacksjs/components'
+
+let notifications = true
+
+function handleNotificationChange(checked) {
+  notifications = checked
+}
+
+module.exports = { notifications, handleNotificationChange }
+</script>
+
+<div class="p-6">
+  <h1 class="text-2xl font-bold mb-4">Settings</h1>
+
+  @component('Switch', {
+    checked: notifications,
+    label: 'Enable notifications',
+    onChange: handleNotificationChange
+  })
+
+  <div class="mt-4">
+    @component('Button', { variant: 'primary' })
+      Save Changes
+    @endcomponent
+  </div>
+</div>
+```
+
+### With Code Highlighting
+
+```stx
+<script>
+import { CodeBlock } from '@stacksjs/components'
+
+const code = `
+function greet(name: string) {
+  console.log(\`Hello, \${name}!\`)
+}
+`
+
+module.exports = { code }
+</script>
+
+@component('CodeBlock', {
+  code: code,
+  language: 'typescript',
+  copyable: true
+})
+```
+
+### Using Composables
+
+```stx
+<script>
+import { useDarkMode, useCopyCode } from '@stacksjs/components'
+
+const { isDark, toggle } = useDarkMode()
+
+module.exports = { isDark, toggle }
+</script>
+
+<button @click="toggle">
+  @if(isDark)
+    Switch to Light Mode
+  @else
+    Switch to Dark Mode
+  @endif
+</button>
+```
+
+## Configuration
+
+### Headwind Configuration
+
+The components use headwind for utility classes. You can customize the design system by creating a `headwind.config.ts` file:
+
+```typescript
+import type { HeadwindConfig } from '@stacksjs/headwind'
+
+export default {
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          500: '#your-color',
+        },
+      },
+    },
+  },
+} satisfies HeadwindConfig
+```
+
+### Syntax Highlighting Themes
+
+Configure syntax highlighting themes for code blocks:
+
+```typescript
+import { createHighlighter } from 'ts-syntax-highlighter'
+
+const highlighter = await createHighlighter({
+  themes: ['github-light', 'github-dark'],
+  languages: ['typescript', 'javascript', 'html'],
+})
+```
+
+## Component APIs
+
+### Button
+
+```typescript
+interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+  size?: 'sm' | 'md' | 'lg'
+  disabled?: boolean
+  type?: 'button' | 'submit' | 'reset'
+  className?: string
+  onClick?: () => void
+}
+```
+
+### Switch
+
+```typescript
+interface SwitchProps {
+  checked?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+  onChange?: (checked: boolean) => void
+  label?: string
+}
+```
+
+### CodeBlock
+
+```typescript
+interface CodeBlockProps {
+  code: string
+  language?: string
+  theme?: 'light' | 'dark' | 'auto'
+  lineNumbers?: boolean
+  copyable?: boolean
+  className?: string
+}
+```
+
+## Composables
+
+### Core Composables
+
+#### useDarkMode
+
+```typescript
+const { isDark, theme, toggle, setTheme } = useDarkMode({
+  storageKey: 'theme',
+  defaultTheme: 'system',
+})
+```
+
+#### useCopyCode
+
+```typescript
+const { copied, copy, reset } = useCopyCode({
+  code: 'const foo = "bar"',
+  onSuccess: () => console.log('Copied!'),
+  timeout: 2000,
+})
+```
+
+#### useSEO
+
+```typescript
+useSEO({
+  title: 'My Page',
+  description: 'Page description',
+  ogImage: 'https://example.com/og.png',
+})
+```
+
+### Utility Composables (5 new)
+
+#### useClickOutside
+
+```typescript
+const cleanup = useClickOutside(
+  elementRef,
+  () => console.log('Clicked outside!'),
+  { enabled: true, ignore: ['.modal'] }
+)
+```
+
+#### useKeyboard
+
+```typescript
+useKeyboard([
+  { key: 'Escape', handler: () => closeModal() },
+  { key: 's', ctrl: true, handler: () => save() },
+])
+```
+
+#### useFocusTrap
+
+```typescript
+const { activate, deactivate } = useFocusTrap(containerRef, {
+  initialFocus: firstInputRef,
+  returnFocus: true,
+})
+```
+
+#### useMediaQuery
+
+```typescript
+const { matches } = useMediaQuery('(min-width: 768px)')
+const { matches: isDark } = useIsDarkMode()
+const { matches: isMobile } = useIsMobile()
+```
+
+#### useLocalStorage
+
+```typescript
+const { value, setValue, removeValue } = useLocalStorage('key', 'initial')
+setValue('new value')
+```
+
+## Animation Utilities (3 modules)
+
+### Easing Functions (33 functions)
+
+```typescript
+import { Easing } from '@stacksjs/components'
+
+// Linear, Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back, Bounce
+const value = Easing.easeInOutCubic(time, start, change, duration)
+```
+
+### Keyframe Animations (15 presets)
+
+```typescript
+import { animate, KeyframeAnimations } from '@stacksjs/components'
+
+// Predefined animations: fadeIn, fadeOut, slideInUp, slideInDown, zoom, bounce, pulse, shake, etc.
+animate(element, 'fadeIn', { duration: 500 })
+```
+
+### CSS Animation Helpers
+
+```typescript
+import { applyAnimation, staggerAnimation, sequenceAnimations } from '@stacksjs/components'
+
+applyAnimation(element, 'slide-in', { duration: '300ms' })
+staggerAnimation(elements, 'fade-in', { stagger: 100 })
+```
+
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Build the library
+bun run build
+
+# Run tests
+bun test
+
+# Watch mode
+bun run dev
+```
+
+## Contributing
+
+Contributions are welcome! Please read our [contributing guidelines](../../CONTRIBUTING.md) before submitting a PR.
+
+## Migration Status
+
+This library is actively being migrated from Vue to STX. Check our [TODO.md](../../TODO.md) for the complete migration roadmap and progress.
+
+**Completed:**
+
+- ✅ Infrastructure setup
+- ✅ Composables (useDarkMode, useCopyCode, useSEO)
+- ✅ Base components (CodeBlock, Hero, Footer, Installation)
+- ✅ 35 UI Components (Accordion, Auth, Audio, Avatar, Badge, Breadcrumb, Button, Card, Drawer, Form, Image, Pagination, Portal, Teleport, Payment, Progress, Select, Skeleton, Spinner, Storage, Switch, Tabs, Tooltip, Video, VirtualList, VirtualTable, Dropdown, Dialog, Radio Group, Popover, Listbox, Combobox, Notification, Stepper, Transition, Table, Command Palette)
+- ✅ 5 Input Components (TextInput, EmailInput, PasswordInput, NumberInput, SearchInput)
+- ✅ 3 Form Components (Textarea, Checkbox, Radio)
+- ✅ 8 Composables (useDarkMode, useCopyCode, useSEO, useClickOutside, useKeyboard, useFocusTrap, useMediaQuery, useLocalStorage)
+- ✅ Animation Utilities (33 easing functions, 15 keyframe presets, CSS helpers)
+- ✅ **Total: 47 Components + 8 Composables + Animation Utils**
+
+## License
+
+MIT © [Chris Breuer](https://github.com/chrisbbreuer)
+
+## Credits
+
+- Built with [STX](https://github.com/stacksjs/stx)
+- Styled with [Headwind](https://github.com/stacksjs/headwind)
+- Syntax highlighting by [ts-syntax-highlighter](https://github.com/stacksjs/ts-syntax-highlighter)
+- Inspired by [Headless UI](https://headlessui.com)

package/dist/Accordion-x2gjedap.stx

@@ -0,0 +1,108 @@
+<script>
+export const items = $props.items || []
+export const allowMultiple = $props.allowMultiple || false
+export const defaultOpen = $props.defaultOpen || []
+export const className = $props.className || ''
+export const onChange = $props.onChange
+
+// Track which items are open
+let openItems = defaultOpen
+
+// Toggle an item
+function toggleItem(index) {
+  if (allowMultiple) {
+    // Multiple items can be open
+    if (openItems.includes(index)) {
+      openItems = openItems.filter(i => i !== index)
+    } else {
+      openItems = [...openItems, index]
+    }
+  } else {
+    // Only one item can be open
+    if (openItems.includes(index)) {
+      openItems = []
+    } else {
+      openItems = [index]
+    }
+  }
+
+  if (onChange) {
+    onChange(openItems)
+  }
+}
+
+// Check if item is open
+function isOpen(index) {
+  return openItems.includes(index)
+}
+
+export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg ${className}`.trim()
+export const itemClasses = ``.trim()
+export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const iconClasses = `w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200`.trim()
+export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim()
+</script>
+
+<div class="{{ accordionClasses }}" role="region">
+  @foreach(item in items)
+    <div class="{{ itemClasses }}">
+      <button
+        type="button"
+        class="{{ headerClasses }}"
+        onclick="toggleItem({{ $loop.index }})"
+        aria-expanded="{{ isOpen($loop.index) ? 'true' : 'false' }}"
+        aria-controls="accordion-content-{{ $loop.index }}"
+      >
+        <span>{{ item.title }}</span>
+        <svg
+          class="{{ iconClasses }}"
+          style="transform: rotate({{ isOpen($loop.index) ? '180' : '0' }}deg)"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      @if(isOpen($loop.index))
+        <div
+          id="accordion-content-{{ $loop.index }}"
+          class="{{ contentClasses }}"
+          role="region"
+        >
+          {!! item.content !!}
+        </div>
+      @endif
+    </div>
+  @endforeach
+</div>
+
+<script>
+// Keyboard navigation
+if (typeof window !== 'undefined') {
+  window.addEventListener('DOMContentLoaded', () => {
+    const buttons = document.querySelectorAll('[aria-expanded]')
+
+    buttons.forEach((button, index) => {
+      button.addEventListener('keydown', (event) => {
+        if (event.key === 'ArrowDown') {
+          event.preventDefault()
+          const nextButton = buttons[index + 1]
+          if (nextButton) nextButton.focus()
+        } else if (event.key === 'ArrowUp') {
+          event.preventDefault()
+          const prevButton = buttons[index - 1]
+          if (prevButton) prevButton.focus()
+        } else if (event.key === 'Home') {
+          event.preventDefault()
+          buttons[0].focus()
+        } else if (event.key === 'End') {
+          event.preventDefault()
+          buttons[buttons.length - 1].focus()
+        }
+      })
+    })
+  })
+}
+</script>

package/dist/Audio-0fk6p9tn.stx

@@ -0,0 +1,50 @@
+<script>
+export const src = $props.src || ''
+export const autoplay = $props.autoplay || false
+export const loop = $props.loop || false
+export const muted = $props.muted || false
+export const controls = $props.controls ?? true
+export const preload = $props.preload || 'metadata'
+export const className = $props.className || ''
+export const showWaveform = $props.showWaveform || false
+export const title = $props.title || ''
+
+export const containerClasses = `relative w-full ${className}`.trim()
+export const audioClasses = 'w-full rounded-md bg-gray-100 dark:bg-gray-800'
+</script>
+
+<div class="{{ containerClasses }}">
+  @if(title)
+    <div class="mb-2 px-1">
+      <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">
+        {{ title }}
+      </h3>
+    </div>
+  @endif
+
+  <audio
+    class="{{ audioClasses }}"
+    src="{{ src }}"
+    controls="{{ controls }}"
+    autoplay="{{ autoplay }}"
+    loop="{{ loop }}"
+    muted="{{ muted }}"
+    preload="{{ preload }}"
+  >
+    Your browser does not support the audio element.
+  </audio>
+
+  @if(showWaveform)
+    <div class="mt-2 h-16 bg-gray-100 dark:bg-gray-800 rounded-md flex items-center justify-center">
+      <svg class="w-full h-full px-4" viewBox="0 0 100 40" preserveAspectRatio="none">
+        <path
+          d="M 0,20 L 10,15 L 20,10 L 30,5 L 40,15 L 50,20 L 60,25 L 70,30 L 80,20 L 90,15 L 100,20"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          class="text-indigo-500 dark:text-indigo-400"
+        />
+      </svg>
+    </div>
+  @endif
+</div>