@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/spinner/Spinner.stx

@@ -1,109 +0,0 @@
-<script server>
-export const variant = $props.variant || 'circle'
-export const size = $props.size || 'md'
-export const color = $props.color || 'primary'
-export const label = $props.label || ''
-export const className = $props.className || ''
-
-// Size classes
-const sizeClasses = {
-  xs: 'w-3 h-3',
-  sm: 'w-4 h-4',
-  md: 'w-6 h-6',
-  lg: 'w-8 h-8',
-  xl: 'w-12 h-12',
-}
-
-// Color classes
-const colorClasses = {
-  primary: 'text-blue-600 dark:text-blue-500',
-  secondary: 'text-purple-600 dark:text-purple-500',
-  success: 'text-green-600 dark:text-green-500',
-  warning: 'text-yellow-600 dark:text-yellow-500',
-  danger: 'text-red-600 dark:text-red-500',
-  info: 'text-cyan-600 dark:text-cyan-500',
-  white: 'text-white',
-  gray: 'text-gray-600 dark:text-gray-400',
-}
-
-export const containerClasses = `inline-flex flex-col items-center gap-2 ${className}`.trim()
-export const spinnerClasses = `${sizeClasses[size]} ${colorClasses[color]} animate-spin`.trim()
-export const labelClasses = `text-sm font-medium text-gray-700 dark:text-gray-300`.trim()
-
-// Dots size classes
-const dotsSizeClasses = {
-  xs: 'w-1 h-1',
-  sm: 'w-1.5 h-1.5',
-  md: 'w-2 h-2',
-  lg: 'w-2.5 h-2.5',
-  xl: 'w-3 h-3',
-}
-
-const dotsColorClasses = {
-  primary: 'bg-blue-600 dark:bg-blue-500',
-  secondary: 'bg-purple-600 dark:bg-purple-500',
-  success: 'bg-green-600 dark:bg-green-500',
-  warning: 'bg-yellow-600 dark:bg-yellow-500',
-  danger: 'bg-red-600 dark:bg-red-500',
-  info: 'bg-cyan-600 dark:bg-cyan-500',
-  white: 'bg-white',
-  gray: 'bg-gray-600 dark:bg-gray-400',
-}
-
-export const dotClasses = `${dotsSizeClasses[size]} ${dotsColorClasses[color]} rounded-full`.trim()
-</script>
-
-<div class="{{ containerClasses }}" role="status" aria-live="polite" aria-busy="true">
-  @if(variant === 'circle')
-    <!-- Circle spinner (default) -->
-    <svg class="{{ spinnerClasses }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-    </svg>
-  @elseif(variant === 'dots')
-    <!-- Dots spinner -->
-    <div class="flex items-center gap-1">
-      <div class="{{ dotClasses }}" style="animation: bounce 1.4s infinite ease-in-out both; animation-delay: -0.32s"></div>
-      <div class="{{ dotClasses }}" style="animation: bounce 1.4s infinite ease-in-out both; animation-delay: -0.16s"></div>
-      <div class="{{ dotClasses }}" style="animation: bounce 1.4s infinite ease-in-out both"></div>
-    </div>
-  @elseif(variant === 'bars')
-    <!-- Bars spinner -->
-    <div class="flex items-center gap-1">
-      <div class="w-1 bg-current rounded-full" style="height: {{ size === 'xs' ? '8px' : size === 'sm' ? '12px' : size === 'md' ? '16px' : size === 'lg' ? '20px' : '24px' }}; animation: bars 1.2s infinite ease-in-out; animation-delay: -0.24s"></div>
-      <div class="w-1 bg-current rounded-full" style="height: {{ size === 'xs' ? '8px' : size === 'sm' ? '12px' : size === 'md' ? '16px' : size === 'lg' ? '20px' : '24px' }}; animation: bars 1.2s infinite ease-in-out; animation-delay: -0.12s"></div>
-      <div class="w-1 bg-current rounded-full" style="height: {{ size === 'xs' ? '8px' : size === 'sm' ? '12px' : size === 'md' ? '16px' : size === 'lg' ? '20px' : '24px' }}; animation: bars 1.2s infinite ease-in-out"></div>
-    </div>
-  @elseif(variant === 'ring')
-    <!-- Ring spinner -->
-    <div class="{{ spinnerClasses }}" style="border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;"></div>
-  @endif
-
-  @if(label)
-    <span class="{{ labelClasses }}">{{ label }}</span>
-  @endif
-
-  <span class="sr-only">{{ label || 'Loading...' }}</span>
-</div>
-
-<style>
-@keyframes bounce {
-  0%, 80%, 100% {
-    transform: scale(0);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes bars {
-  0%, 40%, 100% {
-    transform: scaleY(0.4);
-  }
-  20% {
-    transform: scaleY(1);
-  }
-}
-</style>

package/src/ui/spinner/index.ts

@@ -1,9 +0,0 @@
-export { default as Spinner } from './Spinner.stx'
-
-export interface SpinnerProps {
-  variant?: 'circle' | 'dots' | 'bars' | 'ring'
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'white' | 'gray'
-  label?: string
-  className?: string
-}

package/src/ui/stepper/README.md

@@ -1,36 +0,0 @@
-# Stepper Component
-
-A step-by-step progress indicator for multi-step processes.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<script server>
-let currentStep = 0
-
-function handleStepClick(step) {
-  currentStep = step
-}
-</script>
-
-<Stepper :currentStep="currentStep">
-  <StepperStep :stepNumber="0" :currentStep="currentStep" label="Account" :onClick="handleStepClick" />
-  <StepperStep :stepNumber="1" :currentStep="currentStep" label="Profile" :onClick="handleStepClick" />
-  <StepperStep :stepNumber="2" :currentStep="currentStep" label="Confirmation" :onClick="handleStepClick" />
-</Stepper>
-```
-
-## Features
-
-- Horizontal and vertical orientation
-- Clickable steps
-- Complete/current/upcoming states
-- Dark mode support
-- Accessible
-- Customizable styling

package/src/ui/stepper/Stepper.stx

@@ -1,17 +0,0 @@
-<script server>
-export const currentStep = $props.currentStep || 0
-export const orientation = $props.orientation || 'horizontal'
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-const orientationClasses = orientation === 'horizontal'
-  ? 'flex flex-row'
-  : 'flex flex-col'
-
-const baseClasses = 'w-full'
-const stepperClasses = `${baseClasses} ${orientationClasses} ${className}`.trim()
-</script>
-
-<component :is="{{ as }}" class="{{ stepperClasses }}">
-  <slot :currentStep="currentStep" />
-</component>

package/src/ui/stepper/StepperStep.stx

@@ -1,57 +0,0 @@
-<script server>
-export const stepNumber = $props.stepNumber
-export const currentStep = $props.currentStep || 0
-export const label = $props.label || ''
-export const description = $props.description || ''
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-
-export const isComplete = stepNumber < currentStep
-export const isCurrent = stepNumber === currentStep
-export const isUpcoming = stepNumber > currentStep
-
-const baseClasses = 'flex items-center'
-export const stepClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const stepNumber = {{ stepNumber }}
-
-function onClick() {
-  emit('click', stepNumber)
-}
-</script>
-
-<component :is="{{ as }}" class="{{ stepClasses }}">
-  <button
-    type="button"
-    @click="onClick()"
-    class="flex items-center gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-lg p-2"
-  >
-    <div class="{{ isComplete ? 'bg-blue-600 dark:bg-blue-500' : isCurrent ? 'bg-blue-600 dark:bg-blue-500 ring-4 ring-blue-200 dark:ring-blue-800' : 'bg-neutral-300 dark:bg-neutral-600' }} w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold transition-all">
-      @if(isComplete)
-        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-        </svg>
-      @else
-        {{ stepNumber + 1 }}
-      @endif
-    </div>
-
-    @if(label)
-      <div class="text-left">
-        <div class="text-sm font-medium {{ isCurrent ? 'text-blue-600 dark:text-blue-400' : 'text-neutral-900 dark:text-white' }}">
-          {{ label }}
-        </div>
-        @if(description)
-          <div class="text-xs text-neutral-500 dark:text-neutral-400">
-            {{ description }}
-          </div>
-        @endif
-      </div>
-    @endif
-  </button>
-
-  <slot :isComplete="isComplete" :isCurrent="isCurrent" :isUpcoming="isUpcoming" />
-</component>

package/src/ui/stepper/index.ts

@@ -1,19 +0,0 @@
-export { default as Stepper } from './Stepper.stx'
-export { default as StepperStep } from './StepperStep.stx'
-
-export interface StepperProps {
-  currentStep?: number
-  orientation?: 'horizontal' | 'vertical'
-  className?: string
-  as?: string
-}
-
-export interface StepperStepProps {
-  stepNumber: number
-  currentStep?: number
-  label?: string
-  description?: string
-  className?: string
-  as?: string
-  onClick?: (step: number) => void
-}

package/src/ui/storage/README.md

@@ -1,193 +0,0 @@
-# Storage Utilities
-
-Type-safe utilities for localStorage and sessionStorage with expiration support.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-### Basic Usage
-
-```typescript
-import { localStorage, sessionStorage } from '@stacksjs/components'
-
-// Set a value
-localStorage.set('user', { name: 'John', age: 30 })
-
-// Get a value
-const user = localStorage.get('user')
-console.log(user) // { name: 'John', age: 30 }
-
-// Remove a value
-localStorage.remove('user')
-
-// Clear all
-localStorage.clear()
-```
-
-### With Expiration
-
-```typescript
-// Expire after 1 hour (3600000 ms)
-localStorage.set('token', 'abc123', { expire: 3600000 })
-
-// After 1 hour, get() returns null
-const token = localStorage.get('token') // null if expired
-```
-
-### With Namespace
-
-```typescript
-import { createStorage } from '@stacksjs/components'
-
-const userStorage = createStorage('local', 'user')
-const appStorage = createStorage('local', 'app')
-
-userStorage.set('preferences', { theme: 'dark' })
-appStorage.set('preferences', { language: 'en' })
-
-// These are stored as 'user:preferences' and 'app:preferences'
-```
-
-### Session Storage
-
-```typescript
-import { sessionStorage } from '@stacksjs/components'
-
-// Same API as localStorage
-sessionStorage.set('tempData', { value: 123 })
-const data = sessionStorage.get('tempData')
-```
-
-## API
-
-### Storage Methods
-
-#### `set(key: string, value: any, options?: StorageOptions): void`
-Store a value with optional expiration.
-
-#### `get<T>(key: string): T | null`
-Retrieve a value. Returns null if expired or not found.
-
-#### `remove(key: string): void`
-Remove a specific key.
-
-#### `clear(): void`
-Clear all items (or all namespaced items).
-
-#### `has(key: string): boolean`
-Check if a key exists and hasn't expired.
-
-#### `keys(): string[]`
-Get all keys (without namespace prefix).
-
-#### `size(): number`
-Get the number of stored items.
-
-## StorageOptions
-
-```typescript
-interface StorageOptions {
-  expire?: number // Expiration in milliseconds
-  namespace?: string // Prefix for keys (in createStorage)
-}
-```
-
-## Features
-
-- **Type-safe** - Full TypeScript support
-- **Expiration** - Automatic expiration handling
-- **Namespacing** - Prevent key collisions
-- **Error handling** - Graceful error handling
-- **JSON serialization** - Automatic serialization/deserialization
-- **Both storages** - localStorage and sessionStorage support
-
-## Examples
-
-### User Authentication Token
-
-```typescript
-import { localStorage } from '@stacksjs/components'
-
-// Store token with 24-hour expiration
-function login(token: string) {
-  localStorage.set('auth_token', token, {
-    expire: 24 * 60 * 60 * 1000, // 24 hours
-  })
-}
-
-// Get token (returns null if expired)
-function getToken(): string | null {
-  return localStorage.get('auth_token')
-}
-
-// Check if logged in
-function isLoggedIn(): boolean {
-  return localStorage.has('auth_token')
-}
-
-// Logout
-function logout() {
-  localStorage.remove('auth_token')
-}
-```
-
-### User Preferences
-
-```typescript
-import { createStorage } from '@stacksjs/components'
-
-const prefs = createStorage('local', 'preferences')
-
-interface UserPreferences {
-  theme: 'light' | 'dark'
-  language: string
-  notifications: boolean
-}
-
-// Save preferences
-function savePreferences(preferences: UserPreferences) {
-  prefs.set('user', preferences)
-}
-
-// Load preferences with defaults
-function loadPreferences(): UserPreferences {
-  const saved = prefs.get<UserPreferences>('user')
-  return saved || {
-    theme: 'light',
-    language: 'en',
-    notifications: true,
-  }
-}
-```
-
-### Shopping Cart
-
-```typescript
-import { localStorage } from '@stacksjs/components'
-
-interface CartItem {
-  id: string
-  name: string
-  quantity: number
-  price: number
-}
-
-function addToCart(item: CartItem) {
-  const cart = localStorage.get<CartItem[]>('cart') || []
-  cart.push(item)
-  localStorage.set('cart', cart)
-}
-
-function getCart(): CartItem[] {
-  return localStorage.get<CartItem[]>('cart') || []
-}
-
-function clearCart() {
-  localStorage.remove('cart')
-}
-```