@stacksjs/components 0.2.3

package/dist/Sidebar-gwxw8q38.stx

@@ -0,0 +1,288 @@
+<script>
+/**
+ * Sidebar Component - macOS Native Style
+ *
+ * A native-feeling sidebar component that integrates with Craft for true native rendering
+ * when running in a Craft desktop environment, with beautiful macOS Tahoe-style fallback
+ * for web environments.
+ *
+ * @example
+ * <Sidebar
+ *   :sections="sections"
+ *   :collapsed="false"
+ *   :width="240"
+ *   variant="tahoe"
+ * >
+ *   <template #header>
+ *     <SidebarHeader title="My App" />
+ *   </template>
+ *   <template #footer>
+ *     <SidebarFooter />
+ *   </template>
+ * </Sidebar>
+ */
+
+// Props
+export const sections = $props.sections || []
+export const collapsed = $props.collapsed ?? false
+export const collapsible = $props.collapsible ?? true
+export const width = $props.width || 240
+export const minWidth = $props.minWidth || 64
+export const variant = $props.variant || 'tahoe' // 'tahoe' | 'vibrancy' | 'solid' | 'transparent'
+export const position = $props.position || 'left' // 'left' | 'right'
+export const bordered = $props.bordered ?? true
+export const className = $props.className || ''
+export const onCollapse = $props.onCollapse
+export const onSectionToggle = $props.onSectionToggle
+export const onItemClick = $props.onItemClick
+
+// Internal state
+let isHovered = false
+let nativeSidebarId = null
+
+// Check if running in Craft environment with native sidebar enabled
+// When Craft uses --native-sidebar, it sets these flags and we should NOT render the web sidebar
+const hasNativeSidebar = typeof window !== 'undefined' && (
+  window.__craftNativeSidebar === true ||
+  window.craft?.hasNativeSidebar?.() ||
+  (window.webkit?.messageHandlers?.craft && document.body?.dataset?.nativeSidebar === 'true')
+)
+
+// Check if running in Craft environment (may not have native sidebar)
+const isCraft = typeof window !== 'undefined' && window.craft?.isCraft?.()
+
+// Variant styles - macOS Tahoe inspired
+// Native macOS sidebars use vibrancy where desktop background shines through
+const variantStyles = {
+  tahoe: {
+    // Translucent with warm tint overlay - desktop shows through
+    bg: 'bg-white/70 dark:bg-black/50',
+    border: 'border-black/5 dark:border-white/10',
+    backdrop: 'backdrop-blur-2xl backdrop-saturate-180',
+    // Warm tint is applied via pseudo-element in template
+    tint: true
+  },
+  vibrancy: {
+    bg: 'bg-white/50 dark:bg-black/40',
+    border: 'border-white/20 dark:border-white/10',
+    backdrop: 'backdrop-blur-3xl backdrop-saturate-200',
+    tint: false
+  },
+  solid: {
+    bg: 'bg-stone-100 dark:bg-neutral-900',
+    border: 'border-stone-200 dark:border-neutral-800',
+    backdrop: '',
+    tint: false
+  },
+  transparent: {
+    bg: 'bg-transparent',
+    border: 'border-transparent',
+    backdrop: '',
+    tint: false
+  }
+}
+
+// Get current variant style
+function getVariantStyle() {
+  return variantStyles[variant] || variantStyles.tahoe
+}
+
+// Calculate sidebar width
+function getSidebarWidth() {
+  if (collapsed && !isHovered) {
+    return `${minWidth}px`
+  }
+  return `${width}px`
+}
+
+// Check if showing expanded content
+function showExpanded() {
+  return !collapsed || isHovered
+}
+
+// Initialize Craft native sidebar if available
+async function initNativeSidebar() {
+  if (isCraft && window.craft?.components?.createSidebar) {
+    try {
+      const config = {
+        position,
+        width,
+        minWidth,
+        collapsible,
+        sections: sections.map(section => ({
+          id: section.id,
+          label: section.label,
+          items: section.items?.map(item => ({
+            id: item.id,
+            label: item.label,
+            icon: item.icon,
+            href: item.href,
+            badge: item.badge
+          }))
+        }))
+      }
+      nativeSidebarId = await window.craft.components.createSidebar(config)
+    } catch (err) {
+      console.warn('[Sidebar] Failed to create native sidebar, using web fallback:', err)
+    }
+  }
+}
+
+// Handle collapse toggle
+function handleCollapseToggle() {
+  if (onCollapse) {
+    onCollapse(!collapsed)
+  }
+}
+
+// Handle mouse enter/leave for hover expand
+function handleMouseEnter() {
+  if (collapsed && collapsible) {
+    isHovered = true
+  }
+}
+
+function handleMouseLeave() {
+  isHovered = false
+}
+
+// Handle section toggle
+function handleSectionToggle(sectionId) {
+  if (onSectionToggle) {
+    onSectionToggle(sectionId)
+  }
+}
+
+// Handle item click
+function handleItemClick(item, event) {
+  if (onItemClick) {
+    onItemClick(item, event)
+  }
+}
+
+// Build container classes
+const style = getVariantStyle()
+
+// Build border classes properly for Tailwind
+function getBorderClasses() {
+  if (!bordered) return ''
+  const borderSide = position === 'left' ? 'border-r' : 'border-l'
+  return `${borderSide} ${style.border}`
+}
+
+const containerClasses = [
+  'fixed inset-y-0 z-50 flex flex-col',
+  'transition-all duration-300 ease-out',
+  'overflow-hidden', // Contain the tint overlay
+  style.bg,
+  style.backdrop,
+  getBorderClasses(),
+  position === 'left' ? 'left-0' : 'right-0',
+  className
+].filter(Boolean).join(' ')
+
+// Initialize native sidebar on mount
+if (typeof window !== 'undefined') {
+  initNativeSidebar()
+}
+</script>
+
+<!-- Only render web sidebar when NOT running in Craft native sidebar mode -->
+@if(!hasNativeSidebar)
+<aside
+  class="{{ containerClasses }} sidebar-container"
+  style="width: {{ getSidebarWidth() }}"
+  @mouseenter="handleMouseEnter"
+  @mouseleave="handleMouseLeave"
+  role="navigation"
+  aria-label="Sidebar navigation"
+>
+  <!-- Warm tint overlay for macOS Tahoe effect - desktop shows through -->
+  @if(style.tint)
+    <div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-amber-50/30 via-orange-50/20 to-stone-100/30 dark:from-neutral-800/20 dark:via-neutral-900/10 dark:to-neutral-800/20 mix-blend-overlay"></div>
+  @endif
+
+  <!-- Header slot -->
+  @if($slots.header)
+    <div class="flex-shrink-0 relative z-10">
+      <slot name="header" />
+    </div>
+  @endif
+
+  <!-- Main content area with sections -->
+  <div class="flex-1 overflow-y-auto overflow-x-hidden relative z-10">
+    @if(sections.length > 0)
+      <nav class="px-3 py-2 space-y-1">
+        @foreach(sections as section)
+          <SidebarSection
+            :id="section.id"
+            :label="section.label"
+            :icon="section.icon"
+            :items="section.items"
+            :expanded="section.expanded !== false"
+            :collapsible="section.collapsible !== false"
+            :showLabel="showExpanded()"
+            @toggle="handleSectionToggle(section.id)"
+            @itemClick="handleItemClick"
+          />
+        @endforeach
+      </nav>
+    @else
+      <!-- Default slot for custom content -->
+      <div class="px-3 py-2">
+        <slot />
+      </div>
+    @endif
+  </div>
+
+  <!-- Footer slot -->
+  @if($slots.footer)
+    <div class="flex-shrink-0 relative z-10">
+      <slot name="footer" />
+    </div>
+  @endif
+
+  <!-- Collapse toggle button -->
+  @if(collapsible && showExpanded())
+    <button
+      type="button"
+      class="absolute top-4 {{ position === 'left' ? 'right-2' : 'left-2' }} p-1.5 rounded-lg text-stone-400 hover:text-stone-600 hover:bg-black/5 dark:hover:text-neutral-300 dark:hover:bg-white/10 transition-colors z-20"
+      @click="handleCollapseToggle"
+      aria-label="{{ collapsed ? 'Expand sidebar' : 'Collapse sidebar' }}"
+    >
+      <div class="{{ collapsed ? 'i-hugeicons-sidebar-right' : 'i-hugeicons-sidebar-left' }} w-5 h-5"></div>
+    </button>
+  @endif
+</aside>
+@endif
+
+<style scoped>
+/* Smooth scrollbar styling for macOS feel */
+.overflow-y-auto::-webkit-scrollbar {
+  width: 6px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.15);
+  border-radius: 3px;
+}
+
+.overflow-y-auto::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+/* Dark mode scrollbar */
+@media (prefers-color-scheme: dark) {
+  .overflow-y-auto::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.25);
+  }
+}
+</style>

package/dist/SidebarFooter-887kxret.stx

@@ -0,0 +1,95 @@
+<script>
+/**
+ * SidebarFooter Component
+ *
+ * A footer component for the sidebar with quick actions and settings.
+ *
+ * @example
+ * <SidebarFooter
+ *   :showSettings="true"
+ *   :showThemeToggle="true"
+ *   settingsHref="/settings"
+ * />
+ */
+
+// Props
+export const showSettings = $props.showSettings ?? true
+export const showThemeToggle = $props.showThemeToggle ?? true
+export const settingsHref = $props.settingsHref || '/settings'
+export const settingsLabel = $props.settingsLabel || 'Settings'
+export const collapsed = $props.collapsed ?? false
+export const onThemeToggle = $props.onThemeToggle
+
+// Quick action items
+export const actions = $props.actions || []
+
+// Handle theme toggle
+function handleThemeToggle() {
+  if (onThemeToggle) {
+    onThemeToggle()
+  } else {
+    // Default theme toggle behavior
+    document.documentElement.classList.toggle('dark')
+  }
+}
+</script>
+
+<div class="border-t border-black/5 dark:border-white/10 p-3 space-y-2">
+  <!-- Custom actions slot -->
+  <slot />
+
+  <!-- Quick actions row -->
+  @if(!collapsed && actions.length > 0)
+    <div class="flex items-center gap-2">
+      @foreach(actions as action)
+        @if(action.href)
+          <a
+            href="{{ action.href }}"
+            class="flex-1 flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-black/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+          >
+            @if(action.icon)
+              <div class="{{ action.icon }} w-4 h-4"></div>
+            @endif
+            <span>{{ action.label }}</span>
+          </a>
+        @else
+          <button
+            type="button"
+            class="flex-1 flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-black/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+            @click="action.onClick"
+          >
+            @if(action.icon)
+              <div class="{{ action.icon }} w-4 h-4"></div>
+            @endif
+            <span>{{ action.label }}</span>
+          </button>
+        @endif
+      @endforeach
+
+      @if(showThemeToggle)
+        <button
+          type="button"
+          class="p-2 rounded-lg text-black/50 hover:text-black/80 hover:bg-black/5 dark:text-white/50 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors"
+          @click="handleThemeToggle"
+          aria-label="Toggle dark mode"
+        >
+          <div class="i-hugeicons-moon-02 w-4 h-4 dark:hidden"></div>
+          <div class="i-hugeicons-sun-02 w-4 h-4 hidden dark:block"></div>
+        </button>
+      @endif
+    </div>
+  @endif
+
+  <!-- Settings link -->
+  @if(showSettings)
+    <a
+      href="{{ settingsHref }}"
+      class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors duration-150 text-black/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/10"
+    >
+      <div class="i-hugeicons-settings-02 w-5 h-5 text-black/50 dark:text-white/50"></div>
+      @if(!collapsed)
+        <span>{{ settingsLabel }}</span>
+      @endif
+    </a>
+  @endif
+</div>

package/dist/SidebarHeader-qjeyx0hv.stx

@@ -0,0 +1,100 @@
+<script>
+/**
+ * SidebarHeader Component
+ *
+ * A header component for the sidebar with logo, title, and optional search.
+ *
+ * @example
+ * <SidebarHeader
+ *   title="My App"
+ *   subtitle="Professional"
+ *   :showSearch="true"
+ * />
+ */
+
+// Props
+export const title = $props.title || ''
+export const subtitle = $props.subtitle || ''
+export const logo = $props.logo || ''
+export const logoIcon = $props.logoIcon || ''
+export const showSearch = $props.showSearch ?? false
+export const searchPlaceholder = $props.searchPlaceholder || 'Search...'
+export const searchValue = $props.searchValue || ''
+export const collapsed = $props.collapsed ?? false
+export const onSearch = $props.onSearch
+
+// Handle search input
+function handleSearchInput(event) {
+  if (onSearch) {
+    onSearch(event.target.value)
+  }
+}
+</script>
+
+<div class="flex-shrink-0">
+  <!-- Title bar area -->
+  <div class="h-13 flex items-center justify-between px-4 border-b border-black/5 dark:border-white/10">
+    @if(!collapsed)
+      <div class="flex items-center gap-3 min-w-0">
+        <!-- Logo -->
+        @if(logo)
+          <img src="{{ logo }}" alt="{{ title }}" class="w-8 h-8 rounded-lg object-cover" />
+        @elseif(logoIcon)
+          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
+            <div class="{{ logoIcon }} w-5 h-5 text-white"></div>
+          </div>
+        @else
+          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm">
+            {{ title.charAt(0) }}
+          </div>
+        @endif
+
+        <!-- Title & Subtitle -->
+        <div class="min-w-0">
+          @if(title)
+            <div class="text-sm font-semibold text-black/90 dark:text-white truncate">
+              {{ title }}
+            </div>
+          @endif
+          @if(subtitle)
+            <div class="text-xs text-black/50 dark:text-white/50 truncate">
+              {{ subtitle }}
+            </div>
+          @endif
+        </div>
+      </div>
+    @else
+      <!-- Collapsed state - just logo -->
+      @if(logo)
+        <img src="{{ logo }}" alt="{{ title }}" class="w-8 h-8 rounded-lg object-cover mx-auto" />
+      @elseif(logoIcon)
+        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center mx-auto">
+          <div class="{{ logoIcon }} w-5 h-5 text-white"></div>
+        </div>
+      @else
+        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm mx-auto">
+          {{ title.charAt(0) }}
+        </div>
+      @endif
+    @endif
+
+    <!-- Slot for custom header actions -->
+    <slot name="actions" />
+  </div>
+
+  <!-- Search (only when expanded) -->
+  @if(showSearch && !collapsed)
+    <div class="px-3 py-3">
+      <div class="relative">
+        <div class="i-hugeicons-search-01 absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-black/40 dark:text-white/40"></div>
+        <input
+          type="text"
+          placeholder="{{ searchPlaceholder }}"
+          value="{{ searchValue }}"
+          class="w-full pl-9 pr-3 py-2 text-sm bg-black/5 dark:bg-white/10 border border-black/10 dark:border-white/10 rounded-lg text-black/90 dark:text-white placeholder:text-black/40 dark:placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-400/50 transition-colors"
+          @input="handleSearchInput"
+        />
+      </div>
+    </div>
+  @endif
+</div>

package/dist/SidebarItem-4dpwtmb4.stx

@@ -0,0 +1,118 @@
+<script>
+/**
+ * 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