@stacksjs/components 0.2.3

package/src/ui/textarea/Textarea.stx

@@ -0,0 +1,119 @@
+<script>
+export const value = $props.value || ''
+export const onChange = $props.onChange || (() => {})
+export const placeholder = $props.placeholder || ''
+export const disabled = $props.disabled || false
+export const readonly = $props.readonly || false
+export const rows = $props.rows || 4
+export const autoResize = $props.autoResize || false
+export const maxRows = $props.maxRows || 10
+export const error = $props.error || false
+export const label = $props.label || ''
+export const helperText = $props.helperText || ''
+export const required = $props.required || false
+export const maxLength = $props.maxLength
+export const showCount = $props.showCount || false
+export const resize = $props.resize || 'vertical' // 'none' | 'vertical' | 'horizontal' | 'both'
+export const className = $props.className || ''
+
+// Resize classes
+const resizeClasses = {
+  none: 'resize-none',
+  vertical: 'resize-y',
+  horizontal: 'resize-x',
+  both: 'resize',
+}
+
+// Base and state classes
+const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset px-4 py-2 text-base dark:bg-blue-gray-700 dark:text-gray-100'
+
+const stateClasses = error
+  ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
+  : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
+
+const disabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
+  : readonly
+    ? 'bg-gray-50 dark:bg-gray-800 cursor-default'
+    : 'bg-white dark:bg-blue-gray-700'
+
+export const textareaClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${resizeClasses[resize]} ${className}`.trim()
+export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
+export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+</script>
+
+<div class="w-full">
+  @if(label)
+    <label for="textarea-input" class="{{ labelClasses }}">
+      {{ label }}
+      @if(required)
+        <span class="text-red-500 ml-1">*</span>
+      @endif
+    </label>
+  @endif
+
+  <textarea
+    id="textarea-input"
+    class="{{ textareaClasses }}"
+    rows="{{ rows }}"
+    placeholder="{{ placeholder }}"
+    disabled="{{ disabled }}"
+    readonly="{{ readonly }}"
+    required="{{ required }}"
+    @if(maxLength)maxlength="{{ maxLength }}"@endif
+    oninput="handleInput(event)"
+    aria-invalid="{{ error ? 'true' : 'false' }}"
+    @if(helperText)aria-describedby="helper-text"@endif
+  >{{ value }}</textarea>
+
+  @if(helperText || (showCount && maxLength))
+    <div class="flex items-center justify-between mt-2">
+      @if(helperText)
+        <p id="helper-text" class="{{ helperClasses }}">
+          {{ helperText }}
+        </p>
+      @else
+        <span></span>
+      @endif
+
+      @if(showCount && maxLength)
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          {{ value.length }} / {{ maxLength }}
+        </p>
+      @endif
+    </div>
+  @endif
+</div>
+
+<script>
+function handleInput(event) {
+  const textarea = event.target
+  const newValue = textarea.value
+
+  if (autoResize && typeof window !== 'undefined') {
+    // Auto-resize functionality
+    textarea.style.height = 'auto'
+    const scrollHeight = textarea.scrollHeight
+    const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight)
+    const maxHeight = lineHeight * maxRows
+
+    textarea.style.height = Math.min(scrollHeight, maxHeight) + 'px'
+    textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden'
+  }
+
+  if (onChange) {
+    onChange(newValue)
+  }
+}
+
+// Initialize auto-resize on mount
+if (autoResize && typeof window !== 'undefined') {
+  window.addEventListener('DOMContentLoaded', () => {
+    const textarea = document.getElementById('textarea-input')
+    if (textarea && value) {
+      // Trigger initial resize
+      textarea.dispatchEvent(new Event('input'))
+    }
+  })
+}
+</script>

package/src/ui/textarea/index.ts

@@ -0,0 +1,20 @@
+export { default as Textarea } from './Textarea.stx'
+
+export interface TextareaProps {
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  rows?: number
+  autoResize?: boolean
+  maxRows?: number
+  error?: boolean
+  label?: string
+  helperText?: string
+  required?: boolean
+  maxLength?: number
+  showCount?: boolean
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+  className?: string
+}

package/src/ui/tooltip/Tooltip.stx

@@ -0,0 +1,76 @@
+<script>
+export const content = $props.content || ''
+export const position = $props.position || 'top'
+export const delay = $props.delay || 0
+export const className = $props.className || ''
+export const show = $props.show || false
+export const disabled = $props.disabled || false
+
+// Position classes
+const positionClasses = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+}
+
+// Arrow classes
+const arrowClasses = {
+  top: 'top-full left-1/2 -translate-x-1/2 border-t-gray-900 dark:border-t-gray-700',
+  bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-gray-900 dark:border-b-gray-700',
+  left: 'left-full top-1/2 -translate-y-1/2 border-l-gray-900 dark:border-l-gray-700',
+  right: 'right-full top-1/2 -translate-y-1/2 border-r-gray-900 dark:border-r-gray-700',
+}
+
+export const tooltipClasses = `absolute z-50 px-3 py-2 text-sm font-medium text-white bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg whitespace-nowrap pointer-events-none opacity-0 transition-opacity duration-200 ${positionClasses[position]} ${className}`.trim()
+export const arrowClass = `absolute w-0 h-0 border-4 border-transparent ${arrowClasses[position]}`.trim()
+
+let isVisible = show
+let timeoutId = null
+</script>
+
+<div class="relative inline-block {{ disabled ? 'cursor-not-allowed' : '' }}">
+  <!-- Trigger element (slot) -->
+  <div
+    onmouseenter="handleMouseEnter()"
+    onmouseleave="handleMouseLeave()"
+    onfocus="handleMouseEnter()"
+    onblur="handleMouseLeave()"
+  >
+    <slot />
+  </div>
+
+  <!-- Tooltip -->
+  @if(isVisible && !disabled)
+    <div
+      class="{{ tooltipClasses }}"
+      role="tooltip"
+      style="opacity: 1"
+    >
+      {{ content }}
+      <div class="{{ arrowClass }}"></div>
+    </div>
+  @endif
+</div>
+
+<script>
+function handleMouseEnter() {
+  if (disabled) return
+
+  if (delay > 0) {
+    timeoutId = setTimeout(() => {
+      isVisible = true
+    }, delay)
+  } else {
+    isVisible = true
+  }
+}
+
+function handleMouseLeave() {
+  if (timeoutId) {
+    clearTimeout(timeoutId)
+    timeoutId = null
+  }
+  isVisible = false
+}
+</script>

package/src/ui/tooltip/index.ts

@@ -0,0 +1,10 @@
+export { default as Tooltip } from './Tooltip.stx'
+
+export interface TooltipProps {
+  content: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  delay?: number
+  show?: boolean
+  disabled?: boolean
+  className?: string
+}

package/src/ui/transition/README.md

@@ -0,0 +1,30 @@
+# Transition Component
+
+Smooth enter/leave transitions for showing and hiding content.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+<script>
+export let isOpen = true
+</script>
+
+@component('Transition', { show: isOpen })
+  <div class="p-4 bg-white rounded-lg shadow-lg">
+    Content with fade transition
+  </div>
+@endcomponent
+```
+
+## Features
+
+- Enter/leave animations
+- Customizable transition classes
+- Dark mode support
+- Headwind utility classes

package/src/ui/transition/Transition.stx

@@ -0,0 +1,174 @@
+<script>
+export const show = $props.show !== false
+export const enter = $props.enter || 'transition-opacity duration-300'
+export const enterFrom = $props.enterFrom || 'opacity-0'
+export const enterTo = $props.enterTo || 'opacity-100'
+export const leave = $props.leave || 'transition-opacity duration-200'
+export const leaveFrom = $props.leaveFrom || 'opacity-100'
+export const leaveTo = $props.leaveTo || 'opacity-0'
+export const appear = $props.appear || false
+export const appearFrom = $props.appearFrom || enterFrom
+export const appearTo = $props.appearTo || enterTo
+export const mode = $props.mode || 'in-out' // 'in-out' | 'out-in' | 'default'
+export const duration = $props.duration || 300
+export const delay = $props.delay || 0
+export const preset = $props.preset || ''
+export const onBeforeEnter = $props.onBeforeEnter
+export const onEnter = $props.onEnter
+export const onAfterEnter = $props.onAfterEnter
+export const onBeforeLeave = $props.onBeforeLeave
+export const onLeave = $props.onLeave
+export const onAfterLeave = $props.onAfterLeave
+export const className = $props.className || ''
+
+// Preset transitions
+const presets = {
+  fade: {
+    enter: 'transition-opacity',
+    enterFrom: 'opacity-0',
+    enterTo: 'opacity-100',
+    leave: 'transition-opacity',
+    leaveFrom: 'opacity-100',
+    leaveTo: 'opacity-0',
+  },
+  slide: {
+    enter: 'transition-transform',
+    enterFrom: 'translate-y-2',
+    enterTo: 'translate-y-0',
+    leave: 'transition-transform',
+    leaveFrom: 'translate-y-0',
+    leaveTo: 'translate-y-2',
+  },
+  slideLeft: {
+    enter: 'transition-transform',
+    enterFrom: 'translate-x-full',
+    enterTo: 'translate-x-0',
+    leave: 'transition-transform',
+    leaveFrom: 'translate-x-0',
+    leaveTo: '-translate-x-full',
+  },
+  slideRight: {
+    enter: 'transition-transform',
+    enterFrom: '-translate-x-full',
+    enterTo: 'translate-x-0',
+    leave: 'transition-transform',
+    leaveFrom: 'translate-x-0',
+    leaveTo: 'translate-x-full',
+  },
+  scale: {
+    enter: 'transition-transform',
+    enterFrom: 'scale-95',
+    enterTo: 'scale-100',
+    leave: 'transition-transform',
+    leaveFrom: 'scale-100',
+    leaveTo: 'scale-95',
+  },
+  rotate: {
+    enter: 'transition-transform',
+    enterFrom: 'rotate-12 scale-95',
+    enterTo: 'rotate-0 scale-100',
+    leave: 'transition-transform',
+    leaveFrom: 'rotate-0 scale-100',
+    leaveTo: '-rotate-12 scale-95',
+  },
+  zoom: {
+    enter: 'transition-all',
+    enterFrom: 'scale-0 opacity-0',
+    enterTo: 'scale-100 opacity-100',
+    leave: 'transition-all',
+    leaveFrom: 'scale-100 opacity-100',
+    leaveTo: 'scale-0 opacity-0',
+  },
+}
+
+// Apply preset if specified
+const presetTransition = preset && presets[preset] ? presets[preset] : {}
+const finalEnter = presetTransition.enter || enter
+const finalEnterFrom = presetTransition.enterFrom || enterFrom
+const finalEnterTo = presetTransition.enterTo || enterTo
+const finalLeave = presetTransition.leave || leave
+const finalLeaveFrom = presetTransition.leaveFrom || leaveFrom
+const finalLeaveTo = presetTransition.leaveTo || leaveTo
+
+export let isEntering = false
+export let isLeaving = false
+export let shouldRender = show
+export let hasAppeared = false
+
+const transitionClasses = show
+  ? isEntering
+    ? `${finalEnter} ${finalEnterFrom}`
+    : `${finalEnterTo}`
+  : isLeaving
+    ? `${finalLeave} ${finalLeaveFrom}`
+    : `${finalLeaveTo}`
+
+const componentClasses = `${transitionClasses} ${className}`.trim()
+const durationStyle = `transition-duration: ${duration}ms; transition-delay: ${delay}ms;`
+</script>
+
+@if(shouldRender)
+  <div class="{{ componentClasses }}" style="{{ durationStyle }}">
+    <slot />
+  </div>
+@endif
+
+<script>
+// Handle transitions with lifecycle callbacks
+if (typeof window !== 'undefined') {
+  let previousShow = show
+
+  // Watch for show changes
+  function checkTransition() {
+    if (show !== previousShow) {
+      if (show && !shouldRender) {
+        // Entering
+        if (onBeforeEnter) onBeforeEnter()
+
+        shouldRender = true
+        isEntering = true
+
+        setTimeout(() => {
+          if (onEnter) onEnter()
+        }, delay)
+
+        setTimeout(() => {
+          isEntering = false
+          if (onAfterEnter) onAfterEnter()
+        }, duration + delay)
+
+      } else if (!show && shouldRender) {
+        // Leaving
+        if (onBeforeLeave) onBeforeLeave()
+
+        isLeaving = true
+
+        setTimeout(() => {
+          if (onLeave) onLeave()
+        }, delay)
+
+        setTimeout(() => {
+          isLeaving = false
+          shouldRender = false
+          if (onAfterLeave) onAfterLeave()
+        }, duration + delay)
+      }
+
+      previousShow = show
+    }
+
+    requestAnimationFrame(checkTransition)
+  }
+
+  requestAnimationFrame(checkTransition)
+
+  // Handle initial appear
+  if (appear && show && !hasAppeared) {
+    hasAppeared = true
+    isEntering = true
+    setTimeout(() => {
+      isEntering = false
+    }, duration + delay)
+  }
+}
+</script>

package/src/ui/transition/index.ts

@@ -0,0 +1,25 @@
+export { default as Transition } from './Transition.stx'
+
+export interface TransitionProps {
+  show?: boolean
+  enter?: string
+  enterFrom?: string
+  enterTo?: string
+  leave?: string
+  leaveFrom?: string
+  leaveTo?: string
+  appear?: boolean
+  appearFrom?: string
+  appearTo?: string
+  mode?: 'in-out' | 'out-in' | 'default'
+  duration?: number
+  delay?: number
+  preset?: 'fade' | 'slide' | 'slideLeft' | 'slideRight' | 'scale' | 'rotate' | 'zoom' | ''
+  onBeforeEnter?: () => void
+  onEnter?: () => void
+  onAfterEnter?: () => void
+  onBeforeLeave?: () => void
+  onLeave?: () => void
+  onAfterLeave?: () => void
+  className?: string
+}

package/src/ui/video/README.md

@@ -0,0 +1,48 @@
+# Video Component
+
+A responsive video player with aspect ratio support and poster images.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+@component('Video', {
+  src: '/videos/demo.mp4',
+  poster: '/images/video-thumbnail.jpg',
+  title: 'Product Demo',
+  aspectRatio: '16/9',
+  controls: true
+})
+@endcomponent
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string` | - | Video file URL (required) |
+| `poster` | `string` | `''` | Poster image URL |
+| `autoplay` | `boolean` | `false` | Auto-play on load |
+| `loop` | `boolean` | `false` | Loop playback |
+| `muted` | `boolean` | `false` | Start muted |
+| `controls` | `boolean` | `true` | Show native controls |
+| `preload` | `'none' \| 'metadata' \| 'auto'` | `'metadata'` | Preload strategy |
+| `width` | `number \| string` | - | Video width |
+| `height` | `number \| string` | - | Video height |
+| `aspectRatio` | `'16/9' \| '4/3' \| '1/1' \| string` | `'16/9'` | Aspect ratio |
+| `className` | `string` | `''` | Additional CSS classes |
+| `title` | `string` | `''` | Optional title above player |
+
+## Features
+
+- **Aspect ratios** - 16:9, 4:3, 1:1 built-in
+- **Poster images** - Show thumbnail before play
+- **Native controls** - Uses browser's native video controls
+- **Dark mode** - Styled for dark mode
+- **Responsive** - Full-width with aspect ratio
+- **Accessible** - Proper fallback text

package/src/ui/video/Video.stx

@@ -0,0 +1,45 @@
+<script>
+export const src = $props.src || ''
+export const poster = $props.poster || ''
+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 width = $props.width
+export const height = $props.height
+export const aspectRatio = $props.aspectRatio || '16/9'
+export const className = $props.className || ''
+export const title = $props.title || ''
+
+export const containerClasses = `relative w-full overflow-hidden rounded-lg ${className}`.trim()
+export const videoClasses = 'w-full h-full object-cover bg-gray-900 dark:bg-gray-950'
+export const aspectRatioClass = aspectRatio === '16/9' ? 'aspect-video' : aspectRatio === '4/3' ? 'aspect-[4/3]' : aspectRatio === '1/1' ? 'aspect-square' : ''
+</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
+
+  <div class="{{ aspectRatioClass }}">
+    <video
+      class="{{ videoClasses }}"
+      src="{{ src }}"
+      poster="{{ poster }}"
+      controls="{{ controls }}"
+      autoplay="{{ autoplay }}"
+      loop="{{ loop }}"
+      muted="{{ muted }}"
+      preload="{{ preload }}"
+      width="{{ width }}"
+      height="{{ height }}"
+    >
+      Your browser does not support the video element.
+    </video>
+  </div>
+</div>

package/src/ui/video/index.ts

@@ -0,0 +1,16 @@
+export { default as Video } from './Video.stx'
+
+export interface VideoProps {
+  src: string
+  poster?: string
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+  controls?: boolean
+  preload?: 'none' | 'metadata' | 'auto'
+  width?: number | string
+  height?: number | string
+  aspectRatio?: '16/9' | '4/3' | '1/1' | string
+  className?: string
+  title?: string
+}

package/src/ui/virtual-list/VirtualList.stx

@@ -0,0 +1,83 @@
+<script>
+export const items = $props.items || []
+export const itemHeight = $props.itemHeight || 50
+export const height = $props.height || 400
+export const overscan = $props.overscan || 3
+export const renderItem = $props.renderItem
+export const className = $props.className || ''
+
+// Calculate visible range
+let scrollTop = 0
+const visibleCount = Math.ceil(height / itemHeight)
+const totalHeight = items.length * itemHeight
+
+// Calculate start and end indices with overscan
+function getVisibleRange() {
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan)
+  const endIndex = Math.min(items.length - 1, Math.floor((scrollTop + height) / itemHeight) + overscan)
+  return { startIndex, endIndex }
+}
+
+const { startIndex, endIndex } = getVisibleRange()
+const visibleItems = items.slice(startIndex, endIndex + 1)
+const offsetY = startIndex * itemHeight
+
+// Handle scroll
+function handleScroll(event) {
+  const target = event.target
+  scrollTop = target.scrollTop
+}
+
+export const containerClasses = `overflow-auto ${className}`.trim()
+export const innerClasses = `relative`.trim()
+export const itemClasses = `absolute left-0 right-0`.trim()
+</script>
+
+<div
+  class="{{ containerClasses }}"
+  style="height: {{ height }}px"
+  onscroll="handleScroll(event)"
+>
+  <div
+    class="{{ innerClasses }}"
+    style="height: {{ totalHeight }}px"
+  >
+    @foreach(item in visibleItems)
+      <div
+        class="{{ itemClasses }}"
+        style="top: {{ (startIndex + $loop.index) * itemHeight }}px; height: {{ itemHeight }}px"
+        data-index="{{ startIndex + $loop.index }}"
+      >
+        @if(renderItem)
+          {!! renderItem(item, startIndex + $loop.index) !!}
+        @else
+          <slot item="{{ item }}" index="{{ startIndex + $loop.index }}" />
+        @endif
+      </div>
+    @endforeach
+  </div>
+</div>
+
+<script>
+// Re-render on scroll (simplified reactivity)
+if (typeof window !== 'undefined') {
+  let ticking = false
+
+  function updateVisibleItems() {
+    const range = getVisibleRange()
+    // Trigger re-render by updating visible range
+    // In a real implementation, this would update reactive state
+    ticking = false
+  }
+
+  const scrollContainer = document.querySelector('.overflow-auto')
+  if (scrollContainer) {
+    scrollContainer.addEventListener('scroll', () => {
+      if (!ticking) {
+        window.requestAnimationFrame(updateVisibleItems)
+        ticking = true
+      }
+    })
+  }
+}
+</script>

package/src/ui/virtual-list/index.ts

@@ -0,0 +1,10 @@
+export { default as VirtualList } from './VirtualList.stx'
+
+export interface VirtualListProps<T = any> {
+  items: T[]
+  itemHeight: number
+  height: number
+  overscan?: number
+  renderItem?: (item: T, index: number) => string
+  className?: string
+}