@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/tabs/TabPanel.stx

@@ -1,25 +0,0 @@
-<script server>
-// Slot wrapper that the parent <Tabs> discovers via DOM walk. The parent
-// reads `data-label` (and optional `data-icon`) to build the tab list and
-// toggles the `hidden` attribute as the active tab changes. Hidden by
-// default — the parent flips the active one visible after mount. See
-// stacksjs/stx#1703.
-export const label = $props.label || ''
-export const icon = $props.icon || ''
-export const className = $props.className || ''
-
-const baseClasses = 'p-4 focus:outline-none'
-export const panelClasses = `${baseClasses} ${className}`.trim()
-</script>
-
-<div
-  data-stx-tab-panel
-  data-label="{{ label }}"
-  data-icon="{{ icon }}"
-  class="{{ panelClasses }}"
-  role="tabpanel"
-  tabindex="0"
-  hidden
->
-  <slot />
-</div>

package/src/ui/tabs/Tabs.stx

@@ -1,202 +0,0 @@
-<script server>
-// Two modes (see stacksjs/stx#1703):
-//   1. Legacy prop API — pass `tabs={[{label, content, icon}, …]}` for
-//      simple string-content tabs (kept for backward compatibility with
-//      existing visual snapshots and consumers).
-//   2. Slot API — drop `<TabPanel label="…">` children for arbitrary
-//      content (components, forms, tables, etc.). The parent enumerates
-//      [data-stx-tab-panel] descendants on mount and builds the tab list
-//      dynamically.
-export const tabs = $props.tabs || []
-export const defaultTab = $props.defaultTab || 0
-export const orientation = $props.orientation || 'horizontal'
-export const variant = $props.variant || 'line'
-export const className = $props.className || ''
-
-const orientationClasses = {
-  horizontal: 'flex-col',
-  vertical: 'flex-row',
-}
-
-const tabListOrientationClasses = {
-  horizontal: 'flex-row border-b',
-  vertical: 'flex-col border-r',
-}
-
-const variantClasses = {
-  line: 'border-gray-200 dark:border-gray-700',
-  pills: 'gap-2 border-0 bg-gray-100 dark:bg-gray-800 p-1 rounded-lg',
-  enclosed: 'border-gray-200 dark:border-gray-700',
-}
-
-export const containerClasses = `flex ${orientationClasses[orientation]} ${className}`.trim()
-export const tabListClasses = `flex ${tabListOrientationClasses[orientation]} ${variantClasses[variant]}`.trim()
-export const tabPanelClasses = `p-4 focus:outline-none`.trim()
-// True when the parent passes a non-empty `tabs` array — switches to the
-// legacy render path so existing snapshots stay byte-identical.
-export const hasPropTabs = Array.isArray(tabs) && tabs.length > 0
-</script>
-
-<script client>
-const emit = defineEmits()
-const tabs = {{ tabs }}
-const variant = {{ variant }}
-const orientation = {{ orientation }}
-const hasPropTabs = {{ hasPropTabs }}
-const containerRef = useRef()
-// In slot mode, `discoveredTabs` is populated from child <TabPanel> data
-// attributes on mount. In prop mode, it mirrors the `tabs` prop so the
-// rendering loop works the same in both modes.
-const discoveredTabs = state(hasPropTabs ? tabs : [])
-const activeTab = state({{ defaultTab }})
-
-// Walk only direct descendants of THIS container (not nested Tabs').
-function findOwnPanels() {
-  const root = containerRef.value
-  if (!root) return []
-  // Closest ancestor with data-stx-tabs must be this container's root —
-  // protects against nested <Tabs> contamination.
-  return Array.from(root.querySelectorAll('[data-stx-tab-panel]'))
-    .filter(p => p.closest('[data-stx-tabs]') === root)
-}
-
-onMount(() => {
-  if (hasPropTabs) return  // legacy mode: prop array already in discoveredTabs
-  const panels = findOwnPanels()
-  const list = panels.map(p => ({
-    label: p.dataset.label || '',
-    icon: p.dataset.icon || '',
-  }))
-  discoveredTabs.set(list)
-})
-
-// In slot mode, toggle each panel's `hidden` attribute as activeTab changes.
-// Prop mode is handled inline by the @foreach loop's :show binding below.
-effect(() => {
-  if (hasPropTabs) return
-  const panels = findOwnPanels()
-  const idx = activeTab()
-  panels.forEach((p, i) => {
-    if (i === idx) p.removeAttribute('hidden')
-    else p.setAttribute('hidden', '')
-  })
-})
-
-function selectTab(index) {
-  activeTab.set(index)
-  const list = discoveredTabs()
-  emit('change', { index, tab: list[index] })
-}
-
-function isActive(index) {
-  return activeTab() === index
-}
-
-function getTabClasses(index) {
-  const isActiveTab = isActive(index)
-  const base = 'px-4 py-2 font-medium text-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
-  if (variant === 'line') {
-    const border = orientation === 'horizontal' ? 'border-b-2' : 'border-r-2'
-    return `${base} ${border} ${isActiveTab ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'}`
-  }
-  if (variant === 'pills') {
-    return `${base} rounded-md ${isActiveTab ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'}`
-  }
-  if (variant === 'enclosed') {
-    const borders = orientation === 'horizontal' ? 'border-t border-l border-r rounded-t-md' : 'border-t border-l border-b rounded-l-md'
-    return `${base} ${borders} ${isActiveTab ? 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 -mb-px' : 'bg-gray-50 dark:bg-gray-900 border-transparent hover:border-gray-200 dark:hover:border-gray-700'}`
-  }
-  return base
-}
-
-function onTabKey(event, index) {
-  const tabCount = discoveredTabs().length
-  let next = index
-  if (orientation === 'horizontal') {
-    if (event.key === 'ArrowRight') { event.preventDefault(); next = (index + 1) % tabCount }
-    else if (event.key === 'ArrowLeft') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
-  }
-  else {
-    if (event.key === 'ArrowDown') { event.preventDefault(); next = (index + 1) % tabCount }
-    else if (event.key === 'ArrowUp') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
-  }
-  if (event.key === 'Home') { event.preventDefault(); next = 0 }
-  else if (event.key === 'End') { event.preventDefault(); next = tabCount - 1 }
-  if (next !== index) {
-    selectTab(next)
-    document.getElementById(`tab-${next}`)?.focus()
-  }
-}
-
-defineExpose({ activeTab, selectTab })
-</script>
-
-<div x-ref="containerRef" data-stx-tabs class="{{ containerClasses }}">
-  <div
-    class="{{ tabListClasses }}"
-    role="tablist"
-    aria-orientation="{{ orientation }}"
-  >
-    @if(hasPropTabs)
-      {{-- Legacy mode: server-side iterate the prop tabs array. Buttons --}}
-      {{-- get static class names so existing visual snapshots stay      --}}
-      {{-- byte-identical.                                                 --}}
-      @foreach(tab in tabs)
-        <button
-          type="button"
-          :class="getTabClasses({{ $loop.index }})"
-          role="tab"
-          :aria-selected="isActive({{ $loop.index }}) ? 'true' : 'false'"
-          aria-controls="tab-panel-{{ $loop.index }}"
-          id="tab-{{ $loop.index }}"
-          :tabindex="isActive({{ $loop.index }}) ? '0' : '-1'"
-          @click="selectTab({{ $loop.index }})"
-          @keydown="onTabKey($event, {{ $loop.index }})"
-        >
-          @if(tab.icon)
-            <span class="inline-flex items-center gap-2">
-              <span x-html="{!! JSON.stringify(tab.icon) !!}"></span>
-              <span>{{ tab.label }}</span>
-            </span>
-          @else
-            {{ tab.label }}
-          @endif
-        </button>
-      @endforeach
-    @else
-      {{-- Slot mode: render the tab list dynamically from --}}
-      {{-- discoveredTabs() which is populated in onMount. --}}
-      <button
-        :for="(tab, idx) in discoveredTabs()"
-        :key="idx"
-        type="button"
-        x-class="getTabClasses(idx)"
-        role="tab"
-        :aria-selected="isActive(idx) ? 'true' : 'false'"
-        :tabindex="isActive(idx) ? 0 : -1"
-        @click="selectTab(idx)"
-        @keydown="onTabKey($event, idx)"
-      >
-        <span :if="tab.icon" class="inline-flex items-center gap-2" x-html="tab.icon"></span>
-        <span :text="tab.label"></span>
-      </button>
-    @endif
-  </div>
-
-  @if(hasPropTabs)
-    @foreach(tab in tabs)
-      <div
-        :show="isActive({{ $loop.index }})"
-        id="tab-panel-{{ $loop.index }}"
-        class="{{ tabPanelClasses }}"
-        role="tabpanel"
-        aria-labelledby="tab-{{ $loop.index }}"
-        tabindex="0"
-      >
-        {!! tab.content !!}
-      </div>
-    @endforeach
-  @else
-    <slot />
-  @endif
-</div>

package/src/ui/tabs/index.ts

@@ -1,50 +0,0 @@
-export { default as TabPanel } from './TabPanel.stx'
-export { default as Tabs } from './Tabs.stx'
-
-/**
- * Legacy prop API — pass `tabs` as an array of `{ label, content, icon? }`
- * where `content` is a HTML string. Kept for backward compatibility; prefer
- * the slot API below for any tab whose content needs to be a component tree.
- *
- * See stacksjs/stx#1703.
- */
-export interface Tab {
-  label: string
-  content: string
-  icon?: string
-}
-
-export interface TabsProps {
-  /** Legacy: array of tab definitions with string content. */
-  tabs?: Tab[]
-  defaultTab?: number
-  orientation?: 'horizontal' | 'vertical'
-  variant?: 'line' | 'pills' | 'enclosed'
-  onChange?: (index: number, tab: Tab) => void
-  className?: string
-}
-
-/**
- * Slot API — wrap each tab's content in a `<TabPanel label="…">`. The parent
- * `<Tabs>` discovers panels on mount via `[data-stx-tab-panel]` data
- * attributes, builds the tab list dynamically, and toggles each panel's
- * `hidden` attribute as the active tab changes.
- *
- * @example
- * ```html
- * <Tabs defaultTab="0" variant="pills">
- *   <TabPanel label="Drivers">
- *     <DriversTable :drivers="drivers()" />
- *   </TabPanel>
- *   <TabPanel label="Notifications" icon="bell">
- *     <NotificationsTable />
- *   </TabPanel>
- * </Tabs>
- * ```
- */
-export interface TabPanelProps {
-  label: string
-  /** Optional icon HTML (rendered via `x-html`) for the tab button. */
-  icon?: string
-  className?: string
-}

package/src/ui/teleport/Teleport.stx

@@ -1,65 +0,0 @@
-<script server>
-export const to = $props.to || 'body'
-export const disabled = $props.disabled || false
-export const defer = $props.defer || false
-
-export const teleportId = `teleport-${Math.random().toString(36).slice(2, 11)}`
-</script>
-
-<script client>
-const to = {{ to }}
-const isDisabled = {{ disabled }}
-const shouldDefer = {{ defer }}
-const teleportId = {{ teleportId }}
-
-let teleportContainer = null
-
-function teleport() {
-  if (isDisabled) return
-  const targetElement = typeof to === 'string' ? document.querySelector(to) : to
-  if (!targetElement) {
-    console.warn(`Teleport target "${to}" not found`)
-    return
-  }
-  const sourceElement = document.getElementById(teleportId)
-  if (!sourceElement) return
-  if (!teleportContainer) {
-    teleportContainer = document.createElement('div')
-    teleportContainer.setAttribute('data-teleport-id', teleportId)
-  }
-  while (sourceElement.firstChild) {
-    teleportContainer.appendChild(sourceElement.firstChild)
-  }
-  targetElement.appendChild(teleportContainer)
-}
-
-function returnContent() {
-  if (!teleportContainer || !teleportContainer.parentNode) return
-  const sourceElement = document.getElementById(teleportId)
-  if (!sourceElement) return
-  while (teleportContainer.firstChild) {
-    sourceElement.appendChild(teleportContainer.firstChild)
-  }
-  teleportContainer.parentNode.removeChild(teleportContainer)
-  teleportContainer = null
-}
-
-onMount(() => {
-  if (shouldDefer) setTimeout(teleport, 0)
-  else teleport()
-  window.addEventListener('beforeunload', returnContent)
-})
-
-onDestroy(() => {
-  returnContent()
-  window.removeEventListener('beforeunload', returnContent)
-})
-</script>
-
-@if(disabled)
-  <slot />
-@else
-  <div id="{{ teleportId }}" data-teleport-source="true">
-    <slot />
-  </div>
-@endif

package/src/ui/teleport/index.ts

@@ -1,7 +0,0 @@
-export { default as Teleport } from './Teleport.stx'
-
-export interface TeleportProps {
-  to?: string | HTMLElement
-  disabled?: boolean
-  defer?: boolean
-}

package/src/ui/textarea/Textarea.stx

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

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

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

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

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