@stacksjs/components 0.2.27 → 0.2.53

package/dist/Transition-0hmr6zxb.stx

@@ -1,174 +0,0 @@
-<script server>
-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/dist/VirtualList-cndhjejh.stx

@@ -1,83 +0,0 @@
-<script server>
-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/dist/VirtualTable-ng0b48yp.stx

@@ -1,113 +0,0 @@
-<script server>
-export const columns = $props.columns || []
-export const data = $props.data || []
-export const rowHeight = $props.rowHeight || 48
-export const height = $props.height || 600
-export const headerHeight = $props.headerHeight || 56
-export const overscan = $props.overscan || 5
-export const striped = $props.striped || false
-export const hoverable = $props.hoverable ?? true
-export const className = $props.className || ''
-
-// Calculate visible range
-let scrollTop = 0
-const visibleCount = Math.ceil((height - headerHeight) / rowHeight)
-const totalHeight = data.length * rowHeight
-
-function getVisibleRange() {
-  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan)
-  const endIndex = Math.min(data.length - 1, Math.floor((scrollTop + height - headerHeight) / rowHeight) + overscan)
-  return { startIndex, endIndex }
-}
-
-const { startIndex, endIndex } = getVisibleRange()
-const visibleRows = data.slice(startIndex, endIndex + 1)
-const offsetY = startIndex * rowHeight
-
-function handleScroll(event) {
-  const target = event.target
-  scrollTop = target.scrollTop
-}
-
-// Get cell value
-function getCellValue(row, column) {
-  if (column.render) {
-    return column.render(row[column.key], row)
-  }
-  return row[column.key]
-}
-
-export const containerClasses = `border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden ${className}`.trim()
-export const headerClasses = `bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 flex`.trim()
-export const headerCellClasses = `px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider`.trim()
-export const bodyClasses = `overflow-auto bg-white dark:bg-gray-900`.trim()
-export const innerClasses = `relative`.trim()
-export const rowClasses = `absolute left-0 right-0 flex border-b border-gray-200 dark:border-gray-700 ${hoverable ? 'hover:bg-gray-50 dark:hover:bg-gray-800' : ''}`.trim()
-export const cellClasses = `px-6 py-4 text-sm text-gray-900 dark:text-gray-100`.trim()
-</script>
-
-<div class="{{ containerClasses }}">
-  <!-- Header -->
-  <div class="{{ headerClasses }}" style="height: {{ headerHeight }}px">
-    @foreach(column in columns)
-      <div
-        class="{{ headerCellClasses }}"
-        style="flex: {{ column.width || 1 }}; min-width: {{ column.minWidth || 'auto' }}"
-      >
-        {{ column.label || column.key }}
-      </div>
-    @endforeach
-  </div>
-
-  <!-- Body -->
-  <div
-    class="{{ bodyClasses }}"
-    style="height: {{ height - headerHeight }}px"
-    onscroll="handleScroll(event)"
-  >
-    <div
-      class="{{ innerClasses }}"
-      style="height: {{ totalHeight }}px"
-    >
-      @foreach(row in visibleRows)
-        <div
-          class="{{ rowClasses }} {{ striped && ($loop.index % 2 === 1) ? 'bg-gray-50 dark:bg-gray-800' : '' }}"
-          style="top: {{ (startIndex + $loop.index) * rowHeight }}px; height: {{ rowHeight }}px"
-          data-index="{{ startIndex + $loop.index }}"
-        >
-          @foreach(column in columns)
-            <div
-              class="{{ cellClasses }}"
-              style="flex: {{ column.width || 1 }}; min-width: {{ column.minWidth || 'auto' }}"
-            >
-              {!! getCellValue(row, column) !!}
-            </div>
-          @endforeach
-        </div>
-      @endforeach
-    </div>
-  </div>
-</div>
-
-<script>
-// Re-render on scroll (simplified reactivity)
-if (typeof window !== 'undefined') {
-  let ticking = false
-
-  function updateVisibleRows() {
-    const range = getVisibleRange()
-    // Trigger re-render
-    ticking = false
-  }
-
-  const bodyContainer = document.querySelector('.overflow-auto')
-  if (bodyContainer) {
-    bodyContainer.addEventListener('scroll', () => {
-      if (!ticking) {
-        window.requestAnimationFrame(updateVisibleRows)
-        ticking = true
-      }
-    })
-  }
-}
-</script>