@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/storage/index.ts

@@ -1,347 +0,0 @@
-// Storage utilities for localStorage and sessionStorage
-
-export interface StorageOptions {
-  expire?: number // Expiration in milliseconds
-  namespace?: string // Prefix for keys
-  encrypt?: boolean // Encrypt data (basic XOR encryption)
-  compress?: boolean // Compress large objects
-}
-
-type StorageWatchCallback = (_newValue: any, _oldValue: any, _key: string) => void
-
-export class StorageManager {
-  private storage: globalThis.Storage
-  private namespace: string
-  private watchers: Map<string, Set<StorageWatchCallback>> = new Map()
-  private encryptionKey = 'stx-storage-key' // Simple encryption key
-
-  constructor(type: 'local' | 'session' = 'local', namespace = '') {
-    this.storage = type === 'local' ? globalThis.localStorage : globalThis.sessionStorage
-    this.namespace = namespace
-
-    // Listen for storage events from other tabs/windows
-    if (typeof window !== 'undefined') {
-      window.addEventListener('storage', this.handleStorageEvent.bind(this))
-    }
-  }
-
-  private handleStorageEvent(event: StorageEvent): void {
-    if (!event.key)
-      return
-
-    const key = this.namespace && event.key.startsWith(`${this.namespace}:`)
-      ? event.key.slice(this.namespace.length + 1)
-      : event.key
-
-    const callbacks = this.watchers.get(key)
-    if (callbacks) {
-      const oldValue = event.oldValue ? JSON.parse(event.oldValue).value : null
-      const newValue = event.newValue ? JSON.parse(event.newValue).value : null
-      callbacks.forEach(callback => callback(newValue, oldValue, key))
-    }
-  }
-
-  private encrypt(data: string): string {
-    // Simple XOR encryption (not cryptographically secure, just obfuscation)
-    let result = ''
-    for (let i = 0; i < data.length; i++) {
-      result += String.fromCharCode(data.charCodeAt(i) ^ this.encryptionKey.charCodeAt(i % this.encryptionKey.length))
-    }
-    return btoa(result) // Base64 encode
-  }
-
-  private decrypt(data: string): string {
-    try {
-      const decoded = atob(data) // Base64 decode
-      let result = ''
-      for (let i = 0; i < decoded.length; i++) {
-        result += String.fromCharCode(decoded.charCodeAt(i) ^ this.encryptionKey.charCodeAt(i % this.encryptionKey.length))
-      }
-      return result
-    }
-    catch {
-      return data // Return as-is if decryption fails
-    }
-  }
-
-  private compress(data: string): string {
-    // Simple LZ-based compression for large strings
-    if (data.length < 100)
-      return data // Don't compress small strings
-
-    const dict: Record<string, number> = {}
-    let dictSize = 256
-    const result: number[] = []
-    let w = ''
-
-    for (let i = 0; i < data.length; i++) {
-      const c = data.charAt(i)
-      const wc = w + c
-
-      if (dict[wc] !== undefined) {
-        w = wc
-      }
-      else {
-        result.push(w.length > 1 ? dict[w] : w.charCodeAt(0))
-        dict[wc] = dictSize++
-        w = c
-      }
-    }
-
-    if (w !== '') {
-      result.push(w.length > 1 ? dict[w] : w.charCodeAt(0))
-    }
-
-    return JSON.stringify(result)
-  }
-
-  private decompress(data: string): string {
-    try {
-      const compressed = JSON.parse(data)
-      if (!Array.isArray(compressed))
-        return data
-
-      const dict: Record<number, string> = {}
-      let dictSize = 256
-      let w = String.fromCharCode(compressed[0])
-      let result = w
-
-      for (let i = 1; i < compressed.length; i++) {
-        const k = compressed[i]
-        let entry: string
-
-        if (dict[k] !== undefined) {
-          entry = dict[k]
-        }
-        else if (k === dictSize) {
-          entry = w + w.charAt(0)
-        }
-        else {
-          return data // Decompression failed
-        }
-
-        result += entry
-        dict[dictSize++] = w + entry.charAt(0)
-        w = entry
-      }
-
-      return result
-    }
-    catch {
-      return data // Return as-is if decompression fails
-    }
-  }
-
-  private getKey(key: string): string {
-    return this.namespace ? `${this.namespace}:${key}` : key
-  }
-
-  set(key: string, value: any, options?: StorageOptions): void {
-    const fullKey = this.getKey(key)
-    const oldValue = this.get(key)
-
-    const data = {
-      value,
-      timestamp: Date.now(),
-      expire: options?.expire,
-      encrypted: options?.encrypt || false,
-      compressed: options?.compress || false,
-    }
-
-    try {
-      let serialized = JSON.stringify(data)
-
-      // Compress if enabled
-      if (options?.compress) {
-        serialized = this.compress(serialized)
-      }
-
-      // Encrypt if enabled
-      if (options?.encrypt) {
-        serialized = this.encrypt(serialized)
-      }
-
-      this.storage.setItem(fullKey, serialized)
-
-      // Notify watchers
-      this.notifyWatchers(key, value, oldValue)
-    }
-    catch (error) {
-      console.error('Storage set error:', error)
-    }
-  }
-
-  get<T = any>(key: string): T | null {
-    const fullKey = this.getKey(key)
-
-    try {
-      let item = this.storage.getItem(fullKey)
-      if (!item)
-        return null
-
-      // Try to decrypt if it looks encrypted (base64)
-      if (item.match(/^[A-Z0-9+/]+=*$/i)) {
-        try {
-          item = this.decrypt(item)
-        }
-        catch {
-          // Not encrypted, continue
-        }
-      }
-
-      // Try to decompress if it looks compressed (starts with [)
-      if (item.startsWith('[')) {
-        try {
-          item = this.decompress(item)
-        }
-        catch {
-          // Not compressed, continue
-        }
-      }
-
-      const data = JSON.parse(item)
-
-      // Check expiration
-      if (data.expire && Date.now() - data.timestamp > data.expire) {
-        this.remove(key)
-        return null
-      }
-
-      return data.value as T
-    }
-    catch (error) {
-      console.error('Storage get error:', error)
-      return null
-    }
-  }
-
-  watch(key: string, callback: StorageWatchCallback): () => void {
-    if (!this.watchers.has(key)) {
-      this.watchers.set(key, new Set())
-    }
-
-    this.watchers.get(key)!.add(callback)
-
-    // Return unwatch function
-    return () => {
-      const callbacks = this.watchers.get(key)
-      if (callbacks) {
-        callbacks.delete(callback)
-        if (callbacks.size === 0) {
-          this.watchers.delete(key)
-        }
-      }
-    }
-  }
-
-  private notifyWatchers(key: string, newValue: any, oldValue: any): void {
-    const callbacks = this.watchers.get(key)
-    if (callbacks) {
-      callbacks.forEach(callback => callback(newValue, oldValue, key))
-    }
-  }
-
-  remove(key: string): void {
-    const fullKey = this.getKey(key)
-    const oldValue = this.get(key)
-    this.storage.removeItem(fullKey)
-
-    // Notify watchers
-    this.notifyWatchers(key, null, oldValue)
-  }
-
-  clear(): void {
-    if (this.namespace) {
-      // Clear only namespaced items
-      const keys = this.keys()
-      keys.forEach(key => this.remove(key))
-    }
-    else {
-      this.storage.clear()
-    }
-  }
-
-  has(key: string): boolean {
-    return this.get(key) !== null
-  }
-
-  keys(): string[] {
-    const allKeys = Object.keys(this.storage)
-
-    if (this.namespace) {
-      const prefix = `${this.namespace}:`
-      return allKeys
-        .filter(key => key.startsWith(prefix))
-        .map(key => key.slice(prefix.length))
-    }
-
-    return allKeys
-  }
-
-  size(): number {
-    return this.keys().length
-  }
-
-  // Get storage quota information (if available)
-  getQuota(): { usage: number, quota: number, percentage: number } | null {
-    if ('storage' in navigator && 'estimate' in navigator.storage) {
-      // Use async/await pattern but return promise
-      return null // This would need to be async, but keeping sync API
-    }
-
-    // Fallback: estimate based on current data
-    try {
-      let totalSize = 0
-      for (let i = 0; i < this.storage.length; i++) {
-        const key = this.storage.key(i)
-        if (key) {
-          const value = this.storage.getItem(key) || ''
-          totalSize += key.length + value.length
-        }
-      }
-
-      // Typical localStorage quota is 5-10MB
-      const estimatedQuota = 5 * 1024 * 1024 // 5MB
-      return {
-        usage: totalSize * 2, // Multiply by 2 for UTF-16 encoding
-        quota: estimatedQuota,
-        percentage: (totalSize * 2 / estimatedQuota) * 100,
-      }
-    }
-    catch {
-      return null
-    }
-  }
-
-  // Batch operations
-  setMany(items: Record<string, any>, options?: StorageOptions): void {
-    Object.entries(items).forEach(([key, value]) => {
-      this.set(key, value, options)
-    })
-  }
-
-  getMany<T = any>(keys: string[]): Record<string, T | null> {
-    const result: Record<string, T | null> = {}
-    keys.forEach((key) => {
-      result[key] = this.get<T>(key)
-    })
-    return result
-  }
-
-  removeMany(keys: string[]): void {
-    keys.forEach(key => this.remove(key))
-  }
-}
-
-// Convenience exports
-export const storage: {
-  local: StorageManager
-  session: StorageManager
-} = {
-  local: new StorageManager('local'),
-  session: new StorageManager('session'),
-}
-
-export function createStorage(type: 'local' | 'session' = 'local', namespace?: string): StorageManager {
-  return new StorageManager(type, namespace)
-}

package/src/ui/switch/README.md

@@ -1,114 +0,0 @@
-# Switch Component
-
-A modern toggle switch component built with STX and headwind utility classes, inspired by Headless UI.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<Switch checked label="Enable notifications" />
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `checked` | `boolean` | `false` | Whether the switch is checked |
-| `disabled` | `boolean` | `false` | Disable the switch |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Switch size |
-| `className` | `string` | `''` | Additional CSS classes |
-| `onChange` | `(checked: boolean) => void` | - | Change handler |
-| `label` | `string` | `''` | Optional label text |
-
-## Examples
-
-### Basic Switch
-
-```stx
-<script server>
-let enabled = false
-
-function handleChange(checked) {
-  enabled = checked
-  console.log('Switch is now:', checked)
-}
-</script>
-
-<Switch :checked="enabled" :onChange="handleChange" />
-```
-
-### With Label
-
-```stx
-<Switch checked label="Enable notifications" :onChange="handleChange" />
-```
-
-### Sizes
-
-```stx
-<Switch size="sm" checked />
-
-<Switch size="md" checked />
-
-<Switch size="lg" checked />
-```
-
-### Disabled State
-
-```stx
-<Switch checked disabled label="Cannot toggle" />
-```
-
-### Custom Styling
-
-```stx
-<Switch checked className="my-4" />
-```
-
-## Accessibility
-
-The Switch component follows WAI-ARIA best practices:
-
-- Proper `role="switch"` attribute
-- `aria-checked` reflects the current state
-- `aria-disabled` when disabled
-- Screen reader text via `sr-only` class
-- Keyboard accessible (can be toggled with Space/Enter)
-- Focus visible ring for keyboard navigation
-
-## Features
-
-- Smooth animations and transitions
-- Three size options (sm, md, lg)
-- Dark mode support
-- Disabled state
-- Optional label
-- Accessible by default
-- Headwind utility classes for easy customization
-- Inspired by Headless UI design
-
-## Styling
-
-The component uses headwind utility classes for styling. You can customize it by:
-
-1. Passing additional classes via `className` prop
-2. Modifying the component source
-3. Using headwind configuration to adjust the design system
-
-### Color Customization
-
-To customize colors, you can:
-
-- Override the checked state background color in your headwind config
-- Pass custom classes via `className` prop
-- Modify the component's source code
-
-Example:
-```stx
-<Switch checked className="!bg-green-500" />
-```

package/src/ui/switch/Switch.stx

@@ -1,72 +0,0 @@
-<script server>
-export const checked = $props.checked || false
-export const disabled = $props.disabled || false
-export const size = $props.size || 'md'
-export const className = $props.className || ''
-export const label = $props.label || ''
-
-const sizeConfig = {
-  sm: { track: 'h-5 w-9', thumb: 'h-4 w-4', translate: 'translate-x-4' },
-  md: { track: 'h-[38px] w-[74px]', thumb: 'h-[34px] w-[34px]', translate: 'translate-x-9' },
-  lg: { track: 'h-12 w-24', thumb: 'h-11 w-11', translate: 'translate-x-12' },
-}
-
-export const config = sizeConfig[size]
-
-export const trackBaseClasses = 'relative inline-flex shrink-0 cursor-pointer border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-300 dark:focus-visible:ring-offset-neutral-700'
-export const trackDisabledClasses = disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
-export const thumbBaseClasses = 'pointer-events-none inline-block transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
-</script>
-
-<script client>
-const emit = defineEmits()
-const isDisabled = {{ disabled }}
-const config = {{ config }}
-const trackBase = {{ trackBaseClasses }}
-const trackDisabled = {{ trackDisabledClasses }}
-const thumbBase = {{ thumbBaseClasses }}
-const extraClass = {{ className }}
-// Reactive prop binding so the parent can drive `checked` via signals.
-// See stacksjs/stx#1704.
-const isChecked = useReactiveProp('checked', {{ checked }})
-
-function toggle() {
-  if (isDisabled) return
-  isChecked.set(!isChecked())
-  emit('change', isChecked())
-}
-
-function trackClasses() {
-  const stateClass = isChecked()
-    ? 'bg-blue-500 dark:bg-blue-600'
-    : 'bg-neutral-400 dark:bg-neutral-600'
-  return `${trackBase} ${stateClass} ${trackDisabled} ${config.track} ${extraClass}`.trim()
-}
-
-function thumbClasses() {
-  const pos = isChecked() ? config.translate : 'translate-x-0'
-  return `${thumbBase} ${pos} ${config.thumb}`.trim()
-}
-
-defineExpose({ isChecked, toggle })
-</script>
-
-<label class="inline-flex items-center gap-3 cursor-pointer">
-  @if(label)
-    <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
-      {{ label }}
-    </span>
-  @endif
-
-  <button
-    type="button"
-    role="switch"
-    :aria-checked="isChecked() ? 'true' : 'false'"
-    :class="trackClasses()"
-    @if(disabled)disabled aria-disabled="true"@endif
-    @click="toggle()"
-  >
-    <span class="sr-only">@if(label){{ label }}@else Toggle switch@endif</span>
-    <span aria-hidden="true" :class="thumbClasses()"></span>
-  </button>
-</label>

package/src/ui/switch/index.ts

@@ -1,10 +0,0 @@
-export { default as Switch } from './Switch.stx'
-
-export interface SwitchProps {
-  checked?: boolean
-  disabled?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  className?: string
-  onChange?: (checked: boolean) => void
-  label?: string
-}

package/src/ui/table/README.md

@@ -1,39 +0,0 @@
-# Table Component
-
-Responsive table component with sorting and styling options.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<Table>
-  <TableHead>
-    <TableRow>
-      <TableHeader>Name</TableHeader>
-      <TableHeader>Email</TableHeader>
-      <TableHeader>Role</TableHeader>
-    </TableRow>
-  </TableHead>
-
-  <TableBody>
-    <TableRow>
-      <TableCell>John Doe</TableCell>
-      <TableCell>john@example.com</TableCell>
-      <TableCell>Admin</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>
-```
-
-## Features
-
-- Responsive design
-- Sortable columns
-- Striped rows
-- Hover effects
-- Dark mode support

package/src/ui/table/Table.stx

@@ -1,14 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const striped = $props.striped || false
-export const hoverable = $props.hoverable !== false
-
-const baseClasses = 'min-w-full divide-y divide-neutral-200 dark:divide-neutral-700'
-const tableClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<div class="overflow-x-auto">
-  <table class="{{ tableClasses }}">
-    <slot :striped="striped" :hoverable="hoverable" />
-  </table>
-</div>

package/src/ui/table/TableBody.stx

@@ -1,10 +0,0 @@
-<script server>
-export const className = $props.className || ''
-
-const baseClasses = 'bg-white divide-y divide-neutral-200 dark:bg-neutral-900 dark:divide-neutral-700'
-const bodyClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<tbody class="{{ bodyClasses }}">
-  <slot />
-</tbody>

package/src/ui/table/TableCell.stx

@@ -1,10 +0,0 @@
-<script server>
-export const className = $props.className || ''
-
-const baseClasses = 'px-6 py-4 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100'
-const cellClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<td class="{{ cellClasses }}">
-  <slot />
-</td>

package/src/ui/table/TableHead.stx

@@ -1,10 +0,0 @@
-<script server>
-export const className = $props.className || ''
-
-const baseClasses = 'bg-neutral-50 dark:bg-neutral-800'
-const headClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<thead class="{{ headClasses }}">
-  <slot />
-</thead>

package/src/ui/table/TableHeader.stx

@@ -1,20 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const sortable = $props.sortable || false
-
-const baseClasses = 'px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider dark:text-neutral-400'
-const sortableClasses = sortable ? 'cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-200' : ''
-export const headerClasses = `${baseClasses} ${sortableClasses} ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-
-function onClick() {
-  emit('click')
-}
-</script>
-
-<th class="{{ headerClasses }}" @if(sortable)@click="onClick()"@endif>
-  <slot />
-</th>

package/src/ui/table/TableRow.stx

@@ -1,11 +0,0 @@
-<script server>
-export const className = $props.className || ''
-export const hoverable = $props.hoverable !== false
-
-const hoverClasses = hoverable ? 'hover:bg-neutral-50 dark:hover:bg-neutral-800' : ''
-const rowClasses = `${hoverClasses} ${className}`.trim()
-</script>
-
-<tr class="{{ rowClasses }}">
-  <slot />
-</tr>

package/src/ui/table/index.ts

@@ -1,35 +0,0 @@
-export { default as Table } from './Table.stx'
-export { default as TableBody } from './TableBody.stx'
-export { default as TableCell } from './TableCell.stx'
-export { default as TableHead } from './TableHead.stx'
-export { default as TableHeader } from './TableHeader.stx'
-export { default as TableRow } from './TableRow.stx'
-
-export interface TableProps {
-  className?: string
-  striped?: boolean
-  hoverable?: boolean
-}
-
-export interface TableHeadProps {
-  className?: string
-}
-
-export interface TableBodyProps {
-  className?: string
-}
-
-export interface TableRowProps {
-  className?: string
-  hoverable?: boolean
-}
-
-export interface TableHeaderProps {
-  className?: string
-  sortable?: boolean
-  onClick?: () => void
-}
-
-export interface TableCellProps {
-  className?: string
-}