@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/transition/Transition.stx

@@ -1,102 +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 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

@@ -1,25 +0,0 @@
-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

@@ -1,47 +0,0 @@
-# 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

@@ -1,45 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-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

@@ -1,67 +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 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

@@ -1,10 +0,0 @@
-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

@@ -1,103 +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 || ''
-
-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

@@ -1,21 +0,0 @@
-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
-}