@stacksjs/components 0.2.111 → 0.2.112

package/src/ui/textarea/Textarea.stx

@@ -0,0 +1,108 @@
+<script server>
+export const value = $props.value || ''
+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'
+export const className = $props.className || ''
+
+const resizeClasses = { none: 'resize-none', vertical: 'resize-y', horizontal: 'resize-x', both: 'resize' }
+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>
+
+<script client>
+const emit = defineEmits()
+const autoResize = {{ autoResize }}
+const maxRows = {{ maxRows }}
+// Reactive prop binding — parent can drive `value` via signals. See #1704.
+const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
+
+function resizeTextarea(el) {
+  if (!autoResize) return
+  el.style.height = 'auto'
+  const scrollHeight = el.scrollHeight
+  const lineHeight = Number.parseInt(window.getComputedStyle(el).lineHeight) || 20
+  const maxHeight = lineHeight * maxRows
+  el.style.height = `${Math.min(scrollHeight, maxHeight)}px`
+  el.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden'
+}
+
+function onInput(event) {
+  inputValue.set(event.target.value)
+  resizeTextarea(event.target)
+  emit('input', inputValue())
+}
+
+onMount(() => {
+  if (autoResize) {
+    const el = document.getElementById('textarea-input')
+    if (el) resizeTextarea(el)
+  }
+})
+
+const charCount = derived(() => `${inputValue().length} / {{ maxLength || 0 }}`)
+
+defineExpose({ value: inputValue })
+</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 }}"
+    @if(disabled)disabled@endif
+    @if(readonly)readonly@endif
+    @if(required)required@endif
+    @if(maxLength)maxlength="{{ maxLength }}"@endif
+    @input="onInput($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" x-text="charCount()"></p>
+      @endif
+    </div>
+  @endif
+</div>

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,71 @@
+<script server>
+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
+
+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',
+}
+
+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 transition-opacity duration-200 ${positionClasses[position]} ${className}`.trim()
+export const arrowClass = `absolute w-0 h-0 border-4 border-transparent ${arrowClasses[position]}`.trim()
+</script>
+
+<script client>
+const delay = {{ delay }}
+const isDisabled = {{ disabled }}
+// Reactive prop binding — parent can drive `show` via signals. See #1704.
+const isVisible = useReactiveProp('show', {{ show }})
+let timeoutId = null
+
+function showTooltip() {
+  if (isDisabled) return
+  if (delay > 0) {
+    timeoutId = setTimeout(() => isVisible.set(true), delay)
+  }
+  else {
+    isVisible.set(true)
+  }
+}
+
+function hideTooltip() {
+  if (timeoutId) {
+    clearTimeout(timeoutId)
+    timeoutId = null
+  }
+  isVisible.set(false)
+}
+</script>
+
+<div class="relative inline-block {{ disabled ? 'cursor-not-allowed' : '' }}">
+  <div
+    @mouseenter="showTooltip()"
+    @mouseleave="hideTooltip()"
+    @focusin="showTooltip()"
+    @focusout="hideTooltip()"
+  >
+    <slot />
+  </div>
+
+  <div
+    :show="isVisible() && !{{ disabled }}"
+    class="{{ tooltipClasses }}"
+    role="tooltip"
+  >
+    {{ content }}
+    <div class="{{ arrowClass }}"></div>
+  </div>
+</div>

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 server>
+let isOpen = true
+</script>
+
+<Transition :show="isOpen">
+  <div class="p-4 bg-white rounded-lg shadow-lg">
+    Content with fade transition
+  </div>
+</Transition>
+```
+
+## Features
+
+- Enter/leave animations
+- Customizable transition classes
+- Dark mode support
+- Headwind utility classes

package/src/ui/transition/Transition.stx

@@ -0,0 +1,102 @@
+<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 duration = $props.duration || 300
+export const delay = $props.delay || 0
+export const preset = $props.preset || ''
+export const className = $props.className || ''
+
+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' },
+}
+
+const p = preset && presets[preset] ? presets[preset] : {}
+export const enterClass = p.enter || enter
+export const enterFromClass = p.enterFrom || enterFrom
+export const enterToClass = p.enterTo || enterTo
+export const leaveClass = p.leave || leave
+export const leaveFromClass = p.leaveFrom || leaveFrom
+export const leaveToClass = p.leaveTo || leaveTo
+
+export const durationStyle = `transition-duration: ${duration}ms; transition-delay: ${delay}ms;`
+export const extraClass = className
+</script>
+
+<script client>
+const emit = defineEmits()
+const showProp = {{ show }}
+const appear = {{ appear }}
+const duration = {{ duration }}
+const delay = {{ delay }}
+const enterClass = {{ enterClass }}
+const enterFromClass = {{ enterFromClass }}
+const enterToClass = {{ enterToClass }}
+const leaveClass = {{ leaveClass }}
+const leaveFromClass = {{ leaveFromClass }}
+const leaveToClass = {{ leaveToClass }}
+const extraClass = {{ extraClass }}
+
+const visible = state(showProp)
+const isEntering = state(appear && showProp)
+const isLeaving = state(false)
+const shouldRender = state(showProp)
+
+const transitionClass = derived(() => {
+  if (visible()) {
+    return isEntering() ? `${enterClass} ${enterFromClass}` : enterToClass
+  }
+  return isLeaving() ? `${leaveClass} ${leaveFromClass}` : leaveToClass
+})
+
+const componentClass = derived(() => `${transitionClass()} ${extraClass}`.trim())
+
+function setShow(next) {
+  if (next === visible()) return
+  if (next) {
+    emit('beforeEnter')
+    shouldRender.set(true)
+    visible.set(true)
+    isEntering.set(true)
+    setTimeout(() => emit('enter'), delay)
+    setTimeout(() => {
+      isEntering.set(false)
+      emit('afterEnter')
+    }, duration + delay)
+  }
+  else {
+    emit('beforeLeave')
+    visible.set(false)
+    isLeaving.set(true)
+    setTimeout(() => emit('leave'), delay)
+    setTimeout(() => {
+      isLeaving.set(false)
+      shouldRender.set(false)
+      emit('afterLeave')
+    }, duration + delay)
+  }
+}
+
+onMount(() => {
+  if (appear && showProp) {
+    setTimeout(() => isEntering.set(false), duration + delay)
+  }
+})
+
+defineExpose({ visible, setShow })
+</script>
+
+<div :show="shouldRender()" :class="componentClass()" style="{{ durationStyle }}">
+  <slot />
+</div>

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,47 @@
+# Video Component
+
+A responsive video player with aspect ratio support and poster images.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+<Video
+  src="/videos/demo.mp4"
+  poster="/images/video-thumbnail.jpg"
+  title="Product Demo"
+  aspectRatio="16/9"
+  controls
+/>
+```
+
+## 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 server>
+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 }}"
+      @if(controls)controls@endif
+      @if(autoplay)autoplay@endif
+      @if(loop)loop@endif
+      @if(muted)muted@endif
+      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,67 @@
+<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 className = $props.className || ''
+
+export const totalHeight = items.length * itemHeight
+export const containerClasses = `overflow-auto ${className}`.trim()
+</script>
+
+<script client>
+const items = {{ items }}
+const itemHeight = {{ itemHeight }}
+const height = {{ height }}
+const overscan = {{ overscan }}
+
+const scrollTop = state(0)
+
+const visibleRange = derived(() => {
+  const top = scrollTop()
+  const startIndex = Math.max(0, Math.floor(top / itemHeight) - overscan)
+  const endIndex = Math.min(items.length - 1, Math.floor((top + height) / itemHeight) + overscan)
+  return { startIndex, endIndex }
+})
+
+const visibleItems = derived(() => {
+  const { startIndex, endIndex } = visibleRange()
+  return items.slice(startIndex, endIndex + 1).map((item, i) => ({
+    item,
+    index: startIndex + i,
+    top: (startIndex + i) * itemHeight,
+  }))
+})
+
+let ticking = false
+function onScroll(event) {
+  const target = event.target
+  if (!ticking) {
+    requestAnimationFrame(() => {
+      scrollTop.set(target.scrollTop)
+      ticking = false
+    })
+    ticking = true
+  }
+}
+
+defineExpose({ scrollTop, scrollTo: (top) => scrollTop.set(top) })
+</script>
+
+<div
+  class="{{ containerClasses }}"
+  style="height: {{ height }}px"
+  @scroll="onScroll($event)"
+>
+  <div class="relative" style="height: {{ totalHeight }}px">
+    <div
+      :for="entry in visibleItems()"
+      :key="entry.index"
+      class="absolute left-0 right-0"
+      :style="`top: ${entry.top}px; height: {{ itemHeight }}px`"
+      :data-index="entry.index"
+    >
+      <slot :item="entry.item" :index="entry.index" />
+    </div>
+  </div>
+</div>

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
+}

package/src/ui/virtual-table/VirtualTable.stx

@@ -0,0 +1,103 @@
+<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 || ''
+
+export const totalHeight = data.length * rowHeight
+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 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>
+
+<script client>
+const data = {{ data }}
+const columns = {{ columns }}
+const rowHeight = {{ rowHeight }}
+const height = {{ height }}
+const headerHeight = {{ headerHeight }}
+const overscan = {{ overscan }}
+const striped = {{ striped }}
+
+const scrollTop = state(0)
+
+const visibleRows = derived(() => {
+  const top = scrollTop()
+  const startIndex = Math.max(0, Math.floor(top / rowHeight) - overscan)
+  const endIndex = Math.min(data.length - 1, Math.floor((top + height - headerHeight) / rowHeight) + overscan)
+  const out = []
+  for (let i = startIndex; i <= endIndex; i++) {
+    out.push({
+      row: data[i],
+      index: i,
+      top: i * rowHeight,
+      striped: striped && (i % 2 === 1),
+    })
+  }
+  return out
+})
+
+function getCellValue(row, column) {
+  if (column.render) return column.render(row[column.key], row)
+  return row[column.key]
+}
+
+let ticking = false
+function onScroll(event) {
+  const target = event.target
+  if (!ticking) {
+    requestAnimationFrame(() => {
+      scrollTop.set(target.scrollTop)
+      ticking = false
+    })
+    ticking = true
+  }
+}
+
+defineExpose({ scrollTop })
+</script>
+
+<div class="{{ containerClasses }}">
+  <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>
+
+  <div
+    class="{{ bodyClasses }}"
+    style="height: {{ height - headerHeight }}px"
+    @scroll="onScroll($event)"
+  >
+    <div class="relative" style="height: {{ totalHeight }}px">
+      <div
+        :for="entry in visibleRows()"
+        :key="entry.index"
+        :class="entry.striped ? '{{ rowClasses }} bg-gray-50 dark:bg-gray-800' : '{{ rowClasses }}'"
+        :style="`top: ${entry.top}px; height: {{ rowHeight }}px`"
+        :data-index="entry.index"
+      >
+        <div
+          :for="column in columns"
+          :key="column.key"
+          class="{{ cellClasses }}"
+          :style="`flex: ${column.width || 1}; min-width: ${column.minWidth || 'auto'}`"
+          x-html="getCellValue(entry.row, column)"
+        ></div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+export { default as VirtualTable } from './VirtualTable.stx'
+
+export interface VirtualTableColumn<T = any> {
+  key: string
+  label?: string
+  width?: number
+  minWidth?: string
+  render?: (value: any, row: T) => string
+}
+
+export interface VirtualTableProps<T = any> {
+  columns: VirtualTableColumn<T>[]
+  data: T[]
+  rowHeight?: number
+  height?: number
+  headerHeight?: number
+  overscan?: number
+  striped?: boolean
+  hoverable?: boolean
+  className?: string
+}