@stacksjs/components 0.2.27 → 0.2.53

package/dist/Sidebar-73vc78as.stx

@@ -0,0 +1,236 @@
+<script server>
+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'
+export const position = $props.position || 'left'
+export const placement = $props.placement || 'fixed'
+export const bordered = $props.bordered ?? true
+export const className = $props.className || ''
+
+const variantStyles = {
+  tahoe: {
+    bg: 'bg-white/70 dark:bg-black/50',
+    border: 'border-black/5 dark:border-white/10',
+    backdrop: 'backdrop-blur-2xl backdrop-saturate-180',
+    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,
+  },
+  workspace: {
+    bg: 'bg-[#f4f4f3] dark:bg-neutral-950',
+    border: 'border-transparent',
+    backdrop: '',
+    tint: false,
+    nav: 'px-5 py-5 space-y-1',
+    slot: 'px-5 py-5',
+  },
+  desktop: {
+    bg: 'bg-white/42 dark:bg-black/32',
+    border: 'border-white/30 dark:border-white/10',
+    backdrop: 'backdrop-blur-3xl backdrop-saturate-200',
+    tint: false,
+    shimmer: true,
+    nav: 'px-4 py-4 space-y-1',
+    slot: 'px-4 py-4',
+  },
+}
+
+const style = variantStyles[variant] || variantStyles.tahoe
+export const variantTint = style.tint
+export const variantShimmer = style.shimmer
+const borderSide = position === 'left' ? 'border-r' : 'border-l'
+const borderClasses = bordered ? `${borderSide} ${style.border}` : ''
+const positionClass = position === 'left' ? 'left-0' : 'right-0'
+const placementClasses = {
+  fixed: `fixed inset-y-0 z-50 ${positionClass}`,
+  sticky: 'sticky top-0 h-screen',
+  static: 'relative h-full',
+}
+
+export const containerClasses = [
+  placementClasses[placement] || placementClasses.fixed,
+  'flex flex-col',
+  'transition-all duration-300 ease-out',
+  'overflow-hidden',
+  style.bg,
+  style.backdrop,
+  borderClasses,
+  className,
+].filter(Boolean).join(' ')
+
+export const collapseBtnPosition = position === 'left' ? 'right-2' : 'left-2'
+export const navClasses = style.nav || 'px-3 py-2 space-y-1'
+export const slotClasses = style.slot || 'px-3 py-2'
+</script>
+
+<script client>
+const emit = defineEmits()
+const collapsedProp = {{ collapsed }}
+const collapsibleProp = {{ collapsible }}
+const widthProp = {{ width }}
+const minWidthProp = {{ minWidth }}
+const sectionsProp = {{ sections }}
+const positionProp = {{ position }}
+const variantProp = {{ variant }}
+
+const collapsed = state(collapsedProp)
+const isHovered = state(false)
+const hasNativeSidebar = state(false)
+
+const showExpanded = derived(() => !collapsed() || isHovered())
+const sidebarWidth = derived(() => {
+  if (collapsed() && !isHovered()) return `${minWidthProp}px`
+  return `${widthProp}px`
+})
+const collapseAriaLabel = derived(() => collapsed() ? 'Expand sidebar' : 'Collapse sidebar')
+const collapseIconClass = derived(() => collapsed() ? 'i-hugeicons-sidebar-right' : 'i-hugeicons-sidebar-left')
+
+function onMouseEnter() {
+  if (collapsed() && collapsibleProp) isHovered.set(true)
+}
+
+function onMouseLeave() {
+  isHovered.set(false)
+}
+
+function toggleCollapse() {
+  collapsed.set(!collapsed())
+  emit('collapse', collapsed())
+}
+
+function onSectionToggle(sectionId) {
+  emit('sectionToggle', sectionId)
+}
+
+function onItemClick(event) {
+  emit('itemClick', event.detail)
+}
+
+onMount(async () => {
+  hasNativeSidebar.set(
+    window.__craftNativeSidebar === true
+    || window.craft?.hasNativeSidebar?.()
+    || (window.webkit?.messageHandlers?.craft && document.body?.dataset?.nativeSidebar === 'true'),
+  )
+  if (window.craft?.isCraft?.() && window.craft?.components?.createSidebar) {
+    try {
+      await window.craft.components.createSidebar({
+        position: positionProp,
+        width: widthProp,
+        minWidth: minWidthProp,
+        collapsible: collapsibleProp,
+        variant: variantProp,
+        material: variantProp === 'desktop' ? 'sidebar' : undefined,
+        backgroundEffect: variantProp === 'desktop' ? 'shimmer' : undefined,
+        allowsVibrancy: variantProp === 'desktop' || variantProp === 'vibrancy' || variantProp === 'tahoe',
+        sections: sectionsProp.map(s => ({
+          id: s.id,
+          label: s.label,
+          items: s.items?.map(i => ({ id: i.id, label: i.label, icon: i.icon, href: i.href, badge: i.badge })),
+        })),
+      })
+    }
+    catch (err) {
+      console.warn('[Sidebar] Failed to create native sidebar, using web fallback:', err)
+    }
+  }
+})
+
+defineExpose({ collapsed, toggle: toggleCollapse })
+</script>
+
+<aside
+  :show="!hasNativeSidebar()"
+  class="{{ containerClasses }} sidebar-container"
+  :style="`width: ${sidebarWidth()}`"
+  @mouseenter="onMouseEnter()"
+  @mouseleave="onMouseLeave()"
+  role="navigation"
+  aria-label="Sidebar navigation"
+>
+  @if(variantTint)
+    <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
+  @if(variantShimmer)
+    <div class="absolute inset-0 pointer-events-none bg-[radial-gradient(circle_at_18%_12%,rgba(255,255,255,0.46),transparent_28%),linear-gradient(120deg,rgba(255,255,255,0.22),rgba(255,255,255,0.04)_42%,rgba(255,255,255,0.18))] dark:bg-[radial-gradient(circle_at_18%_12%,rgba(255,255,255,0.12),transparent_30%),linear-gradient(120deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02)_45%,rgba(255,255,255,0.08))]"></div>
+  @endif
+
+  @if($slots.header)
+    <div class="flex-shrink-0 relative z-10">
+      <slot name="header" />
+    </div>
+  @endif
+
+  <div class="flex-1 overflow-y-auto overflow-x-hidden relative z-10">
+    @if(sections.length > 0)
+      <nav class="{{ navClasses }}">
+        @foreach(section in sections)
+          <SidebarSection
+            :id="section.id"
+            :label="section.label"
+            :icon="section.icon"
+            :items="section.items"
+            :expanded="section.expanded !== false"
+            :collapsible="section.collapsible !== false"
+            :showLabel="showExpanded()"
+            :variant="variant"
+            @toggle="onSectionToggle(section.id)"
+            @itemClick="onItemClick($event)"
+          />
+        @endforeach
+      </nav>
+    @else
+      <div class="{{ slotClasses }}">
+        <slot />
+      </div>
+    @endif
+  </div>
+
+  @if($slots.footer)
+    <div class="flex-shrink-0 relative z-10">
+      <slot name="footer" />
+    </div>
+  @endif
+
+  @if(collapsible)
+    <button
+      :show="showExpanded()"
+      type="button"
+      class="absolute top-4 {{ collapseBtnPosition }} 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="toggleCollapse()"
+      :aria-label="collapseAriaLabel()"
+    >
+      <div :class="`${collapseIconClass()} w-5 h-5`"></div>
+    </button>
+  @endif
+</aside>
+
+<style scoped>
+.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); }
+@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-zsfsgcxb.stx

@@ -0,0 +1,109 @@
+<script server>
+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 actions = $props.actions || []
+export const variant = $props.variant || 'tahoe'
+
+const footerVariants = {
+  workspace: {
+    container: 'p-5 space-y-2',
+    action: 'flex-1 flex items-center gap-3 rounded-[18px] px-4 py-3 text-[17px] text-zinc-700 transition-colors hover:bg-[#ececea] hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
+    icon: 'w-5 h-5 text-zinc-500 dark:text-zinc-400',
+  },
+  desktop: {
+    container: 'p-4 space-y-2',
+    action: 'flex-1 flex items-center gap-3 rounded-[16px] px-3.5 py-2.5 text-[15px] text-zinc-700 transition-colors hover:bg-white/34 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
+    icon: 'w-5 h-5 text-zinc-500 dark:text-zinc-400',
+  },
+  default: {
+    container: 'border-t border-black/5 dark:border-white/10 p-3 space-y-2',
+    action: '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',
+    icon: 'w-4 h-4',
+  },
+}
+
+const footerStyle = footerVariants[variant] || footerVariants.default
+export const footerClasses = footerStyle.container
+export const actionClasses = footerStyle.action
+export const footerIconClasses = footerStyle.icon
+export const settingsIconClasses = `i-hugeicons-settings-02 ${footerStyle.icon}`
+export const themeButtonClasses = variant === 'workspace' || variant === 'desktop'
+  ? 'p-3 rounded-[16px] text-zinc-500 hover:text-zinc-900 hover:bg-white/50 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-white/10 transition-colors'
+  : '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'
+</script>
+
+<script client>
+const emit = defineEmits()
+
+function onThemeToggle() {
+  document.documentElement.classList.toggle('dark')
+  emit('themeToggle')
+}
+
+function onActionClick(index) {
+  emit('actionClick', index)
+}
+</script>
+
+<div class="{{ footerClasses }}">
+  <!-- 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="{{ actionClasses }}"
+          >
+            @if(action.icon)
+              <div class="{{ action.icon }} {{ footerIconClasses }}"></div>
+            @endif
+            <span>{{ action.label }}</span>
+          </a>
+        @else
+          <button
+            type="button"
+            class="{{ actionClasses }}"
+            @click="onActionClick({{ $loop.index }})"
+          >
+            @if(action.icon)
+              <div class="{{ action.icon }} {{ footerIconClasses }}"></div>
+            @endif
+            <span>{{ action.label }}</span>
+          </button>
+        @endif
+      @endforeach
+
+      @if(showThemeToggle)
+        <button
+          type="button"
+          class="{{ themeButtonClasses }}"
+          @click="onThemeToggle()"
+          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="{{ actionClasses }}"
+    >
+      <div class="{{ settingsIconClasses }}"></div>
+      @if(!collapsed)
+        <span>{{ settingsLabel }}</span>
+      @endif
+    </a>
+  @endif
+</div>

package/dist/SidebarHeader-7v174a9c.stx

@@ -0,0 +1,122 @@
+<script server>
+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 variant = $props.variant || 'tahoe'
+
+const headerVariants = {
+  workspace: {
+    titlebar: 'h-18 flex items-center justify-between px-5',
+    logo: 'w-9 h-9 rounded-[12px] bg-black text-white flex items-center justify-center font-semibold text-sm',
+    title: 'text-[18px] font-semibold text-zinc-950 dark:text-white truncate',
+    subtitle: 'text-sm text-zinc-500 dark:text-zinc-400 truncate',
+    searchWrap: 'px-5 pb-4',
+    searchInput: 'w-full rounded-[16px] border border-zinc-200/70 bg-white/70 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-300/80 dark:border-white/10 dark:bg-white/10 dark:text-white',
+  },
+  desktop: {
+    titlebar: 'h-16 flex items-center justify-between px-4',
+    logo: 'w-9 h-9 rounded-[12px] bg-black/80 text-white flex items-center justify-center font-semibold text-sm shadow-sm dark:bg-white/14',
+    title: 'text-[17px] font-semibold text-zinc-950 dark:text-white truncate',
+    subtitle: 'text-sm text-zinc-500 dark:text-zinc-400 truncate',
+    searchWrap: 'px-4 pb-4',
+    searchInput: 'w-full rounded-[16px] border border-white/40 bg-white/45 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-500 shadow-sm focus:outline-none focus:ring-2 focus:ring-white/70 dark:border-white/10 dark:bg-white/10 dark:text-white',
+  },
+  default: {
+    titlebar: 'h-13 flex items-center justify-between px-4 border-b border-black/5 dark:border-white/10',
+    logo: '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: 'text-sm font-semibold text-black/90 dark:text-white truncate',
+    subtitle: 'text-xs text-black/50 dark:text-white/50 truncate',
+    searchWrap: 'px-3 py-3',
+    searchInput: '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',
+  },
+}
+
+const headerStyle = headerVariants[variant] || headerVariants.default
+export const titlebarClasses = headerStyle.titlebar
+export const logoClasses = headerStyle.logo
+export const titleClasses = headerStyle.title
+export const subtitleClasses = headerStyle.subtitle
+export const searchWrapClasses = headerStyle.searchWrap
+export const searchInputClasses = headerStyle.searchInput
+</script>
+
+<script client>
+const emit = defineEmits()
+
+function onSearchInput(event) {
+  emit('search', event.target.value)
+}
+</script>
+
+<div class="flex-shrink-0">
+  <!-- Title bar area -->
+  <div class="{{ titlebarClasses }}">
+    @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="{{ logoClasses }}">
+            <div class="{{ logoIcon }} w-5 h-5 text-white"></div>
+          </div>
+        @else
+          <div class="{{ logoClasses }}">
+            {{ title.charAt(0) }}
+          </div>
+        @endif
+
+        <!-- Title & Subtitle -->
+        <div class="min-w-0">
+          @if(title)
+            <div class="{{ titleClasses }}">
+              {{ title }}
+            </div>
+          @endif
+          @if(subtitle)
+            <div class="{{ subtitleClasses }}">
+              {{ 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="{{ logoClasses }} mx-auto">
+          <div class="{{ logoIcon }} w-5 h-5 text-white"></div>
+        </div>
+      @else
+        <div class="{{ logoClasses }} 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="{{ searchWrapClasses }}">
+      <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="{{ searchInputClasses }}"
+          @input="onSearchInput($event)"
+        />
+      </div>
+    </div>
+  @endif
+</div>

package/dist/SidebarItem-3y3e8g2t.stx

@@ -0,0 +1,92 @@
+<script server>
+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 variant = $props.variant || 'tahoe'
+
+const itemVariants = {
+  workspace: {
+    base: 'flex w-full items-center gap-3 rounded-[18px] px-4 py-3 text-[17px] leading-tight transition-colors duration-150',
+    indent: '',
+    active: 'bg-[#e7e7e5] text-zinc-950',
+    inactive: 'text-zinc-700 hover:bg-[#ececea] hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
+    icon: active ? 'text-zinc-900 dark:text-zinc-100' : 'text-zinc-500 dark:text-zinc-500',
+    badge: 'ml-auto rounded-full bg-white/70 px-2.5 py-0.5 text-[13px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
+  },
+  desktop: {
+    base: 'flex w-full items-center gap-3 rounded-[16px] px-3.5 py-2.5 text-[15px] leading-tight transition-colors duration-150',
+    indent: '',
+    active: 'bg-white/55 text-zinc-950 shadow-sm ring-1 ring-white/50 dark:bg-white/12 dark:text-white dark:ring-white/10',
+    inactive: 'text-zinc-700 hover:bg-white/34 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
+    icon: active ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400',
+    badge: 'ml-auto rounded-full bg-white/55 px-2.5 py-0.5 text-xs font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
+  },
+  default: {
+    base: 'flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13px] transition-all duration-150',
+    indent: indent ? 'ml-2' : '',
+    active: 'bg-blue-500/20 text-blue-600 dark:bg-blue-400/25 dark:text-blue-300 font-medium',
+    inactive: 'text-black/80 dark:text-white/80 hover:bg-black/5 dark:hover:bg-white/10',
+    icon: active ? 'text-blue-600 dark:text-blue-300' : 'text-black/50 dark:text-white/50',
+    badge: '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',
+  },
+}
+
+const itemStyle = itemVariants[variant] || itemVariants.default
+const baseItemList = [itemStyle.base, itemStyle.indent]
+const stateClasses = disabled ? 'opacity-50 cursor-not-allowed' : active ? itemStyle.active : itemStyle.inactive
+
+export const itemClasses = [...baseItemList, stateClasses].filter(Boolean).join(' ')
+export const iconClasses = `${icon} w-5 h-5 flex-shrink-0 ${itemStyle.icon}`
+export const badgeClasses = itemStyle.badge
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const itemPayload = { id: {{ id }}, label: {{ label }}, href: {{ href }} }
+
+function onClick(event) {
+  if (isDisabled) {
+    event.preventDefault()
+    return
+  }
+  emit('click', { item: itemPayload, event })
+}
+</script>
+
+@if(href && !disabled)
+  <a
+    href="{{ href }}"
+    class="{{ itemClasses }}"
+    @click="onClick($event)"
+    @if(active)aria-current="page"@endif
+  >
+    @if(icon)
+      <div class="{{ iconClasses }}"></div>
+    @endif
+    <span class="flex-1 truncate">{{ label }}</span>
+    @if(badge)
+      <span class="{{ badgeClasses }}">{{ badge }}</span>
+    @endif
+  </a>
+@else
+  <button
+    type="button"
+    class="{{ itemClasses }}"
+    @click="onClick($event)"
+    @if(disabled)disabled aria-disabled="true"@endif
+  >
+    @if(icon)
+      <div class="{{ iconClasses }}"></div>
+    @endif
+    <span class="flex-1 truncate text-left">{{ label }}</span>
+    @if(badge)
+      <span class="{{ badgeClasses }}">{{ badge }}</span>
+    @endif
+  </button>
+@endif

package/dist/SidebarSection-z5ey6awe.stx

@@ -0,0 +1,113 @@
+<script server>
+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 variant = $props.variant || 'tahoe'
+
+const headerVariants = {
+  workspace: {
+    base: 'w-full flex items-center gap-2.5 px-4 pb-2 pt-5 rounded-[14px] text-left transition-colors duration-150 text-[13px] font-semibold uppercase tracking-[0.12em] text-zinc-400 dark:text-zinc-500',
+    hover: 'hover:text-zinc-600 dark:hover:text-zinc-300 cursor-pointer',
+  },
+  desktop: {
+    base: 'w-full flex items-center gap-2.5 px-3.5 pb-2 pt-4 rounded-[14px] text-left transition-colors duration-150 text-[12px] font-semibold uppercase tracking-[0.10em] text-zinc-500/80 dark:text-zinc-400/80',
+    hover: 'hover:bg-white/25 dark:hover:bg-white/10 cursor-pointer',
+  },
+  default: {
+    base: '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',
+    hover: 'hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer',
+  },
+}
+
+const headerStyle = headerVariants[variant] || headerVariants.default
+const headerClasses = [headerStyle.base, collapsible ? headerStyle.hover : ''].filter(Boolean).join(' ')
+export const headerClassesValue = headerClasses
+export const sectionClasses = variant === 'workspace' || variant === 'desktop' ? 'py-1.5' : 'py-1'
+export const groupClasses = variant === 'workspace' || variant === 'desktop' ? 'space-y-1 overflow-hidden' : 'mt-1 space-y-0.5 overflow-hidden'
+export const labelClasses = variant === 'workspace' || variant === 'desktop'
+  ? 'flex-1 truncate'
+  : 'flex-1 text-[13px] font-semibold tracking-tight truncate'
+</script>
+
+<script client>
+const emit = defineEmits()
+const sectionId = {{ id }}
+const collapsibleProp = {{ collapsible }}
+const isExpanded = state({{ expanded }})
+
+function onHeaderClick() {
+  if (!collapsibleProp) return
+  isExpanded.set(!isExpanded())
+  emit('toggle', sectionId)
+}
+
+function onItemClick(event) {
+  emit('itemClick', event.detail)
+}
+
+const arrowClass = derived(() => `i-hugeicons-arrow-right-01 w-3 h-3 transition-transform duration-200 opacity-50 ${isExpanded() ? 'rotate-90' : ''}`)
+
+defineExpose({ isExpanded })
+</script>
+
+<div class="{{ sectionClasses }}">
+  @if(collapsible)
+    <button
+      type="button"
+      class="{{ headerClassesValue }}"
+      @click="onHeaderClick()"
+      :aria-expanded="isExpanded() ? 'true' : 'false'"
+      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="{{ labelClasses }}">
+          {{ label }}
+        </span>
+        <div :class="arrowClass()"></div>
+      @endif
+    </button>
+  @else
+    <div class="{{ headerClassesValue }}">
+      @if(icon)
+        <div class="{{ icon }} w-4 h-4 flex-shrink-0 opacity-70"></div>
+      @endif
+      @if(showLabel)
+        <span class="{{ labelClasses }}">
+          {{ label }}
+        </span>
+      @endif
+    </div>
+  @endif
+
+  @if(showLabel && items.length > 0)
+    <div
+      :show="isExpanded()"
+      id="sidebar-section-{{ id }}"
+      class="{{ groupClasses }}"
+      role="group"
+      aria-label="{{ label }}"
+    >
+      @foreach(item in items)
+        <SidebarItem
+          :id="item.id"
+          :label="item.label"
+          :icon="item.icon"
+          :href="item.href"
+          :badge="item.badge"
+          :active="item.active"
+          :disabled="item.disabled"
+          :indent="variant !== 'workspace' && variant !== 'desktop'"
+          :variant="variant"
+          @click="onItemClick($event)"
+        />
+      @endforeach
+    </div>
+  @endif
+</div>