@stacksjs/components 0.2.110 → 0.2.112

package/src/ui/switch/Switch.stx

@@ -0,0 +1,72 @@
+<script server>
+export const checked = $props.checked || false
+export const disabled = $props.disabled || false
+export const size = $props.size || 'md'
+export const className = $props.className || ''
+export const label = $props.label || ''
+
+const sizeConfig = {
+  sm: { track: 'h-5 w-9', thumb: 'h-4 w-4', translate: 'translate-x-4' },
+  md: { track: 'h-[38px] w-[74px]', thumb: 'h-[34px] w-[34px]', translate: 'translate-x-9' },
+  lg: { track: 'h-12 w-24', thumb: 'h-11 w-11', translate: 'translate-x-12' },
+}
+
+export const config = sizeConfig[size]
+
+export const trackBaseClasses = 'relative inline-flex shrink-0 cursor-pointer border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-300 dark:focus-visible:ring-offset-neutral-700'
+export const trackDisabledClasses = disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
+export const thumbBaseClasses = 'pointer-events-none inline-block transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const config = {{ config }}
+const trackBase = {{ trackBaseClasses }}
+const trackDisabled = {{ trackDisabledClasses }}
+const thumbBase = {{ thumbBaseClasses }}
+const extraClass = {{ className }}
+// Reactive prop binding so the parent can drive `checked` via signals.
+// See stacksjs/stx#1704.
+const isChecked = useReactiveProp('checked', {{ checked }})
+
+function toggle() {
+  if (isDisabled) return
+  isChecked.set(!isChecked())
+  emit('change', isChecked())
+}
+
+function trackClasses() {
+  const stateClass = isChecked()
+    ? 'bg-blue-500 dark:bg-blue-600'
+    : 'bg-neutral-400 dark:bg-neutral-600'
+  return `${trackBase} ${stateClass} ${trackDisabled} ${config.track} ${extraClass}`.trim()
+}
+
+function thumbClasses() {
+  const pos = isChecked() ? config.translate : 'translate-x-0'
+  return `${thumbBase} ${pos} ${config.thumb}`.trim()
+}
+
+defineExpose({ isChecked, toggle })
+</script>
+
+<label class="inline-flex items-center gap-3 cursor-pointer">
+  @if(label)
+    <span class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+      {{ label }}
+    </span>
+  @endif
+
+  <button
+    type="button"
+    role="switch"
+    :aria-checked="isChecked() ? 'true' : 'false'"
+    :class="trackClasses()"
+    @if(disabled)disabled aria-disabled="true"@endif
+    @click="toggle()"
+  >
+    <span class="sr-only">@if(label){{ label }}@else Toggle switch@endif</span>
+    <span aria-hidden="true" :class="thumbClasses()"></span>
+  </button>
+</label>

package/src/ui/switch/index.ts

@@ -0,0 +1,10 @@
+export { default as Switch } from './Switch.stx'
+
+export interface SwitchProps {
+  checked?: boolean
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+  onChange?: (checked: boolean) => void
+  label?: string
+}

package/src/ui/table/README.md

@@ -0,0 +1,39 @@
+# Table Component
+
+Responsive table component with sorting and styling options.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+<Table>
+  <TableHead>
+    <TableRow>
+      <TableHeader>Name</TableHeader>
+      <TableHeader>Email</TableHeader>
+      <TableHeader>Role</TableHeader>
+    </TableRow>
+  </TableHead>
+
+  <TableBody>
+    <TableRow>
+      <TableCell>John Doe</TableCell>
+      <TableCell>john@example.com</TableCell>
+      <TableCell>Admin</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## Features
+
+- Responsive design
+- Sortable columns
+- Striped rows
+- Hover effects
+- Dark mode support

package/src/ui/table/Table.stx

@@ -0,0 +1,14 @@
+<script server>
+export const className = $props.className || ''
+export const striped = $props.striped || false
+export const hoverable = $props.hoverable !== false
+
+const baseClasses = 'min-w-full divide-y divide-neutral-200 dark:divide-neutral-700'
+const tableClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<div class="overflow-x-auto">
+  <table class="{{ tableClasses }}">
+    <slot :striped="striped" :hoverable="hoverable" />
+  </table>
+</div>

package/src/ui/table/TableBody.stx

@@ -0,0 +1,10 @@
+<script server>
+export const className = $props.className || ''
+
+const baseClasses = 'bg-white divide-y divide-neutral-200 dark:bg-neutral-900 dark:divide-neutral-700'
+const bodyClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<tbody class="{{ bodyClasses }}">
+  <slot />
+</tbody>

package/src/ui/table/TableCell.stx

@@ -0,0 +1,10 @@
+<script server>
+export const className = $props.className || ''
+
+const baseClasses = 'px-6 py-4 whitespace-nowrap text-sm text-neutral-900 dark:text-neutral-100'
+const cellClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<td class="{{ cellClasses }}">
+  <slot />
+</td>

package/src/ui/table/TableHead.stx

@@ -0,0 +1,10 @@
+<script server>
+export const className = $props.className || ''
+
+const baseClasses = 'bg-neutral-50 dark:bg-neutral-800'
+const headClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<thead class="{{ headClasses }}">
+  <slot />
+</thead>

package/src/ui/table/TableHeader.stx

@@ -0,0 +1,20 @@
+<script server>
+export const className = $props.className || ''
+export const sortable = $props.sortable || false
+
+const baseClasses = 'px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider dark:text-neutral-400'
+const sortableClasses = sortable ? 'cursor-pointer hover:text-neutral-700 dark:hover:text-neutral-200' : ''
+export const headerClasses = `${baseClasses} ${sortableClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+
+function onClick() {
+  emit('click')
+}
+</script>
+
+<th class="{{ headerClasses }}" @if(sortable)@click="onClick()"@endif>
+  <slot />
+</th>

package/src/ui/table/TableRow.stx

@@ -0,0 +1,11 @@
+<script server>
+export const className = $props.className || ''
+export const hoverable = $props.hoverable !== false
+
+const hoverClasses = hoverable ? 'hover:bg-neutral-50 dark:hover:bg-neutral-800' : ''
+const rowClasses = `${hoverClasses} ${className}`.trim()
+</script>
+
+<tr class="{{ rowClasses }}">
+  <slot />
+</tr>

package/src/ui/table/index.ts

@@ -0,0 +1,35 @@
+export { default as Table } from './Table.stx'
+export { default as TableBody } from './TableBody.stx'
+export { default as TableCell } from './TableCell.stx'
+export { default as TableHead } from './TableHead.stx'
+export { default as TableHeader } from './TableHeader.stx'
+export { default as TableRow } from './TableRow.stx'
+
+export interface TableProps {
+  className?: string
+  striped?: boolean
+  hoverable?: boolean
+}
+
+export interface TableHeadProps {
+  className?: string
+}
+
+export interface TableBodyProps {
+  className?: string
+}
+
+export interface TableRowProps {
+  className?: string
+  hoverable?: boolean
+}
+
+export interface TableHeaderProps {
+  className?: string
+  sortable?: boolean
+  onClick?: () => void
+}
+
+export interface TableCellProps {
+  className?: string
+}

package/src/ui/tabs/TabPanel.stx

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

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

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

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

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