@stacksjs/components 0.2.3

package/src/ui/switch/README.md

@@ -0,0 +1,133 @@
+# Switch Component
+
+A modern toggle switch component built with STX and headwind utility classes, inspired by Headless UI.
+
+## Installation
+
+```bash
+bun add @stacksjs/components
+```
+
+## Usage
+
+```stx
+@component('Switch', { checked: true, label: 'Enable notifications' })
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean` | `false` | Whether the switch is checked |
+| `disabled` | `boolean` | `false` | Disable the switch |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Switch size |
+| `className` | `string` | `''` | Additional CSS classes |
+| `onChange` | `(checked: boolean) => void` | - | Change handler |
+| `label` | `string` | `''` | Optional label text |
+
+## Examples
+
+### Basic Switch
+
+```stx
+<script>
+let enabled = false
+
+function handleChange(checked) {
+  enabled = checked
+  console.log('Switch is now:', checked)
+}
+
+module.exports = { enabled, handleChange }
+</script>
+
+@component('Switch', {
+  checked: enabled,
+  onChange: handleChange
+})
+```
+
+### With Label
+
+```stx
+@component('Switch', {
+  checked: true,
+  label: 'Enable notifications',
+  onChange: handleChange
+})
+```
+
+### Sizes
+
+```stx
+@component('Switch', { size: 'sm', checked: true })
+
+@component('Switch', { size: 'md', checked: true })
+
+@component('Switch', { size: 'lg', checked: true })
+```
+
+### Disabled State
+
+```stx
+@component('Switch', {
+  checked: true,
+  disabled: true,
+  label: 'Cannot toggle'
+})
+```
+
+### Custom Styling
+
+```stx
+@component('Switch', {
+  checked: true,
+  className: 'my-4'
+})
+```
+
+## Accessibility
+
+The Switch component follows WAI-ARIA best practices:
+
+- Proper `role="switch"` attribute
+- `aria-checked` reflects the current state
+- `aria-disabled` when disabled
+- Screen reader text via `sr-only` class
+- Keyboard accessible (can be toggled with Space/Enter)
+- Focus visible ring for keyboard navigation
+
+## Features
+
+- Smooth animations and transitions
+- Three size options (sm, md, lg)
+- Dark mode support
+- Disabled state
+- Optional label
+- Accessible by default
+- Headwind utility classes for easy customization
+- Inspired by Headless UI design
+
+## Styling
+
+The component uses headwind utility classes for styling. You can customize it by:
+
+1. Passing additional classes via `className` prop
+2. Modifying the component source
+3. Using headwind configuration to adjust the design system
+
+### Color Customization
+
+To customize colors, you can:
+
+- Override the checked state background color in your headwind config
+- Pass custom classes via `className` prop
+- Modify the component's source code
+
+Example:
+```stx
+@component('Switch', {
+  checked: true,
+  className: '!bg-green-500'
+})
+```

package/src/ui/switch/Switch.stx

@@ -0,0 +1,74 @@
+<script>
+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 onChange = $props.onChange
+export const label = $props.label || ''
+
+// Size configurations using headwind
+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',
+  },
+}
+
+const config = sizeConfig[size]
+
+// Track classes
+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'
+const trackStateClasses = checked
+  ? 'bg-blue-500 dark:bg-blue-600'
+  : 'bg-neutral-400 dark:bg-neutral-600'
+const trackDisabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed pointer-events-none'
+  : ''
+
+export const trackClasses = `${trackBaseClasses} ${trackStateClasses} ${trackDisabledClasses} ${config.track} ${className}`.trim()
+
+// Thumb classes
+const thumbBaseClasses = 'pointer-events-none inline-block transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out'
+const thumbPositionClasses = checked ? config.translate : 'translate-x-0'
+export const thumbClasses = `${thumbBaseClasses} ${thumbPositionClasses} ${config.thumb}`.trim()
+
+// Toggle function
+export function toggle() {
+  if (disabled) return
+  onChange?.(!checked)
+}
+</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="{{ checked ? '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 }}"
+    />
+  </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
+@component('Table')
+  @component('TableHead')
+    @component('TableRow')
+      @component('TableHeader') Name @endcomponent
+      @component('TableHeader') Email @endcomponent
+      @component('TableHeader') Role @endcomponent
+    @endcomponent
+  @endcomponent
+
+  @component('TableBody')
+    @component('TableRow')
+      @component('TableCell') John Doe @endcomponent
+      @component('TableCell') john@example.com @endcomponent
+      @component('TableCell') Admin @endcomponent
+    @endcomponent
+  @endcomponent
+@endcomponent
+```
+
+## Features
+
+- Responsive design
+- Sortable columns
+- Striped rows
+- Hover effects
+- Dark mode support

package/src/ui/table/Table.stx

@@ -0,0 +1,14 @@
+<script>
+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>
+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>
+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>
+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,13 @@
+<script>
+export const className = $props.className || ''
+export const sortable = $props.sortable || false
+export const onClick = $props.onClick
+
+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' : ''
+const headerClasses = `${baseClasses} ${sortableClasses} ${className}`.trim()
+</script>
+
+<th class="{{ headerClasses }}" @if(sortable)@click="onClick"@endif>
+  <slot />
+</th>

package/src/ui/table/TableRow.stx

@@ -0,0 +1,11 @@
+<script>
+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/Tabs.stx

@@ -0,0 +1,145 @@
+<script>
+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 || ''
+export const onChange = $props.onChange
+
+let activeTab = defaultTab
+
+function selectTab(index) {
+  activeTab = index
+  if (onChange) {
+    onChange(index, tabs[index])
+  }
+}
+
+// Orientation classes
+const orientationClasses = {
+  horizontal: 'flex-col',
+  vertical: 'flex-row',
+}
+
+// Tab list orientation classes
+const tabListOrientationClasses = {
+  horizontal: 'flex-row border-b',
+  vertical: 'flex-col border-r',
+}
+
+// Variant classes for tab list
+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',
+}
+
+// Tab button classes based on variant
+function getTabClasses(index, variant, orientation) {
+  const isActive = index === activeTab
+  const baseClasses = '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 borderPosition = orientation === 'horizontal' ? 'border-b-2' : 'border-r-2'
+    return `${baseClasses} ${borderPosition} ${isActive ? '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'}`
+  } else if (variant === 'pills') {
+    return `${baseClasses} rounded-md ${isActive ? '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'}`
+  } else if (variant === 'enclosed') {
+    const borderClasses = orientation === 'horizontal' ? 'border-t border-l border-r rounded-t-md' : 'border-t border-l border-b rounded-l-md'
+    return `${baseClasses} ${borderClasses} ${isActive ? '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'}`
+  }
+}
+
+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()
+</script>
+
+<div class="{{ containerClasses }}">
+  <!-- Tab List -->
+  <div
+    class="{{ tabListClasses }}"
+    role="tablist"
+    aria-orientation="{{ orientation }}"
+  >
+    @foreach(tab in tabs)
+      <button
+        type="button"
+        class="{{ getTabClasses($loop.index, variant, orientation) }}"
+        role="tab"
+        aria-selected="{{ activeTab === $loop.index ? 'true' : 'false' }}"
+        aria-controls="tab-panel-{{ $loop.index }}"
+        id="tab-{{ $loop.index }}"
+        tabindex="{{ activeTab === $loop.index ? '0' : '-1' }}"
+        onclick="selectTab({{ $loop.index }})"
+        onkeydown="handleKeyDown(event, {{ $loop.index }})"
+      >
+        @if(tab.icon)
+          <span class="inline-flex items-center gap-2">
+            <span innerHTML="{!! tab.icon !!}"></span>
+            <span>{{ tab.label }}</span>
+          </span>
+        @else
+          {{ tab.label }}
+        @endif
+      </button>
+    @endforeach
+  </div>
+
+  <!-- Tab Panels -->
+  @foreach(tab in tabs)
+    @if(activeTab === $loop.index)
+      <div
+        id="tab-panel-{{ $loop.index }}"
+        class="{{ tabPanelClasses }}"
+        role="tabpanel"
+        aria-labelledby="tab-{{ $loop.index }}"
+        tabindex="0"
+      >
+        {!! tab.content !!}
+      </div>
+    @endif
+  @endforeach
+</div>
+
+<script>
+function handleKeyDown(event, currentIndex) {
+  const tabCount = tabs.length
+  let newIndex = currentIndex
+
+  if (orientation === 'horizontal') {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault()
+      newIndex = (currentIndex + 1) % tabCount
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault()
+      newIndex = (currentIndex - 1 + tabCount) % tabCount
+    }
+  } else {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      newIndex = (currentIndex + 1) % tabCount
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      newIndex = (currentIndex - 1 + tabCount) % tabCount
+    }
+  }
+
+  if (event.key === 'Home') {
+    event.preventDefault()
+    newIndex = 0
+  } else if (event.key === 'End') {
+    event.preventDefault()
+    newIndex = tabCount - 1
+  }
+
+  if (newIndex !== currentIndex) {
+    selectTab(newIndex)
+    // Focus the new tab
+    if (typeof window !== 'undefined') {
+      const newTab = document.getElementById(`tab-${newIndex}`)
+      if (newTab) newTab.focus()
+    }
+  }
+}
+</script>

package/src/ui/tabs/index.ts

@@ -0,0 +1,16 @@
+export { default as Tabs } from './Tabs.stx'
+
+export interface Tab {
+  label: string
+  content: string
+  icon?: string
+}
+
+export interface TabsProps {
+  tabs: Tab[]
+  defaultTab?: number
+  orientation?: 'horizontal' | 'vertical'
+  variant?: 'line' | 'pills' | 'enclosed'
+  onChange?: (index: number, tab: Tab) => void
+  className?: string
+}

package/src/ui/teleport/Teleport.stx

@@ -0,0 +1,101 @@
+<script>
+export const to = $props.to || 'body'
+export const disabled = $props.disabled || false
+export const defer = $props.defer || false
+
+let teleportContainer = null
+let teleportId = `teleport-${Math.random().toString(36).substr(2, 9)}`
+
+// Teleport content to target
+function teleport() {
+  if (typeof window === 'undefined' || disabled)
+    return
+
+  // Get target element
+  const targetElement = typeof to === 'string'
+    ? document.querySelector(to)
+    : to
+
+  if (!targetElement) {
+    console.warn(`Teleport target "${to}" not found`)
+    return
+  }
+
+  // Get source element
+  const sourceElement = document.getElementById(teleportId)
+  if (!sourceElement)
+    return
+
+  // Create teleport container if needed
+  if (!teleportContainer) {
+    teleportContainer = document.createElement('div')
+    teleportContainer.setAttribute('data-teleport-id', teleportId)
+  }
+
+  // Move all child nodes to container
+  while (sourceElement.firstChild) {
+    teleportContainer.appendChild(sourceElement.firstChild)
+  }
+
+  // Append to target
+  targetElement.appendChild(teleportContainer)
+}
+
+// Return content back to original location
+function returnContent() {
+  if (!teleportContainer || !teleportContainer.parentNode)
+    return
+
+  const sourceElement = document.getElementById(teleportId)
+  if (!sourceElement)
+    return
+
+  // Move content back
+  while (teleportContainer.firstChild) {
+    sourceElement.appendChild(teleportContainer.firstChild)
+  }
+
+  // Remove container
+  teleportContainer.parentNode.removeChild(teleportContainer)
+  teleportContainer = null
+}
+
+// Initialize teleport
+if (typeof window !== 'undefined') {
+  if (defer) {
+    // Defer until next tick
+    window.addEventListener('DOMContentLoaded', () => {
+      setTimeout(teleport, 0)
+    })
+  }
+  else {
+    // Immediate
+    window.addEventListener('DOMContentLoaded', teleport)
+  }
+
+  // Cleanup on page unload
+  window.addEventListener('beforeunload', returnContent)
+}
+</script>
+
+@if(disabled)
+  <!-- Render in place if disabled -->
+  <slot />
+@else
+  <!-- Source container -->
+  <div id="{{ teleportId }}" data-teleport-source="true">
+    <slot />
+  </div>
+@endif
+
+<script>
+// Trigger teleport after render
+if (typeof window !== 'undefined' && document.readyState === 'complete') {
+  if (defer) {
+    setTimeout(teleport, 0)
+  }
+  else {
+    teleport()
+  }
+}
+</script>

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