@stacksjs/components 0.2.35 → 0.2.53

package/dist/SidebarItem-zqtvvzpc.stx

@@ -1,118 +0,0 @@
-<script server>
-/**
- * SidebarItem Component
- *
- * An individual navigation item within a sidebar section.
- * Supports icons, badges, active states, and keyboard navigation.
- *
- * @example
- * <SidebarItem
- *   id="home"
- *   label="Home"
- *   icon="i-hugeicons-home-02"
- *   href="/"
- *   :active="true"
- * />
- */
-
-// Props
-export const id = $props.id || ''
-export const label = $props.label || ''
-export const icon = $props.icon || ''
-export const href = $props.href || ''
-export const badge = $props.badge || ''
-export const active = $props.active ?? false
-export const disabled = $props.disabled ?? false
-export const indent = $props.indent ?? false
-export const onClick = $props.onClick
-
-// Handle click
-function handleClick(event) {
-  if (disabled) {
-    event.preventDefault()
-    return
-  }
-
-  if (onClick) {
-    onClick(event)
-  }
-}
-
-// Build item classes - macOS Tahoe style with translucent-friendly colors
-function getItemClasses() {
-  const baseClasses = [
-    'flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13px]',
-    'transition-all duration-150',
-    indent ? 'ml-2' : ''
-  ]
-
-  if (disabled) {
-    baseClasses.push('opacity-50 cursor-not-allowed')
-  } else if (active) {
-    // Active state - subtle blue highlight like macOS
-    baseClasses.push(
-      'bg-blue-500/20 text-blue-600 dark:bg-blue-400/25 dark:text-blue-300 font-medium'
-    )
-  } else {
-    // Default state - works with translucent backgrounds
-    baseClasses.push(
-      'text-black/80 dark:text-white/80',
-      'hover:bg-black/5 dark:hover:bg-white/10'
-    )
-  }
-
-  return baseClasses.filter(Boolean).join(' ')
-}
-
-// Icon classes
-function getIconClasses() {
-  const baseClasses = 'w-4 h-4 flex-shrink-0'
-
-  if (active) {
-    return `${icon} ${baseClasses} text-blue-600 dark:text-blue-300`
-  }
-
-  return `${icon} ${baseClasses} text-black/50 dark:text-white/50`
-}
-</script>
-
-@if(href && !disabled)
-  <a
-    href="{{ href }}"
-    class="{{ getItemClasses() }}"
-    @click="handleClick"
-    @if(active)
-      aria-current="page"
-    @endif
-  >
-    @if(icon)
-      <div class="{{ getIconClasses() }}"></div>
-    @endif
-    <span class="flex-1 truncate">{{ label }}</span>
-    @if(badge)
-      <span class="ml-auto px-2 py-0.5 text-xs font-medium rounded-full bg-black/10 text-black/70 dark:bg-white/15 dark:text-white/70">
-        {{ badge }}
-      </span>
-    @endif
-  </a>
-@else
-  <button
-    type="button"
-    class="{{ getItemClasses() }}"
-    @click="handleClick"
-    @if(disabled)
-      disabled
-      aria-disabled="true"
-    @endif
-  >
-    @if(icon)
-      <div class="{{ getIconClasses() }}"></div>
-    @endif
-    <span class="flex-1 truncate text-left">{{ label }}</span>
-    @if(badge)
-      <span class="ml-auto px-2 py-0.5 text-xs font-medium rounded-full bg-black/10 text-black/70 dark:bg-white/15 dark:text-white/70">
-        {{ badge }}
-      </span>
-    @endif
-  </button>
-@endif

package/dist/SidebarSection-3etwnbjr.stx

@@ -1,108 +0,0 @@
-<script server>
-/**
- * SidebarSection Component
- *
- * A collapsible section within the sidebar containing navigation items.
- * Follows macOS Finder sidebar conventions.
- *
- * @example
- * <SidebarSection
- *   id="favorites"
- *   label="Favorites"
- *   icon="i-hugeicons-star"
- *   :items="favoriteItems"
- *   :expanded="true"
- * />
- */
-
-// Props
-export const id = $props.id || ''
-export const label = $props.label || ''
-export const icon = $props.icon || ''
-export const items = $props.items || []
-export const expanded = $props.expanded ?? true
-export const collapsible = $props.collapsible ?? true
-export const showLabel = $props.showLabel ?? true
-export const onToggle = $props.onToggle
-export const onItemClick = $props.onItemClick
-
-// Handle section header click
-function handleHeaderClick() {
-  if (collapsible && onToggle) {
-    onToggle(id)
-  }
-}
-
-// Handle item click
-function handleItemClick(item, event) {
-  if (onItemClick) {
-    onItemClick(item, event)
-  }
-}
-
-// Section header classes - macOS Finder style
-const headerClasses = [
-  'w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-left',
-  'transition-all duration-150',
-  'text-black/60 dark:text-white/60',
-  collapsible ? 'hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer' : ''
-].filter(Boolean).join(' ')
-</script>
-
-<div class="py-1">
-  <!-- Section header -->
-  @if(collapsible)
-    <button
-      type="button"
-      class="{{ headerClasses }}"
-      @click="handleHeaderClick"
-      aria-expanded="{{ expanded }}"
-      aria-controls="sidebar-section-{{ id }}"
-    >
-      @if(icon)
-        <div class="{{ icon }} w-4 h-4 flex-shrink-0 opacity-70"></div>
-      @endif
-      @if(showLabel)
-        <span class="flex-1 text-[13px] font-semibold tracking-tight truncate">
-          {{ label }}
-        </span>
-        <div class="i-hugeicons-arrow-right-01 w-3 h-3 transition-transform duration-200 opacity-50 {{ expanded ? 'rotate-90' : '' }}"></div>
-      @endif
-    </button>
-  @else
-    <div class="{{ headerClasses }}">
-      @if(icon)
-        <div class="{{ icon }} w-4 h-4 flex-shrink-0 opacity-70"></div>
-      @endif
-      @if(showLabel)
-        <span class="flex-1 text-[13px] font-semibold tracking-tight truncate">
-          {{ label }}
-        </span>
-      @endif
-    </div>
-  @endif
-
-  <!-- Section items -->
-  @if(expanded && showLabel && items.length > 0)
-    <div
-      id="sidebar-section-{{ id }}"
-      class="mt-1 space-y-0.5 overflow-hidden"
-      role="group"
-      aria-label="{{ label }}"
-    >
-      @foreach(items as item)
-        <SidebarItem
-          :id="item.id"
-          :label="item.label"
-          :icon="item.icon"
-          :href="item.href"
-          :badge="item.badge"
-          :active="item.active"
-          :disabled="item.disabled"
-          :indent="true"
-          @click="handleItemClick(item, $event)"
-        />
-      @endforeach
-    </div>
-  @endif
-</div>

package/dist/Switch-036j9vm1.stx

@@ -1,74 +0,0 @@
-<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 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/dist/Tabs-svh721m0.stx

@@ -1,145 +0,0 @@
-<script server>
-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' }}"
-        @click="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/dist/Teleport-qfch3w0b.stx

@@ -1,101 +0,0 @@
-<script server>
-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>