@stacksjs/components 0.2.90 → 0.2.92

package/dist/SidebarFooter-zsfsgcxb.stx

@@ -1,109 +0,0 @@
-<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-ywpmx14d.stx

@@ -1,199 +0,0 @@
-<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'
-export const showWindowControls = $props.showWindowControls ?? (variant === 'desktop' ? 'auto' : false)
-export const showNavigationControls = $props.showNavigationControls ?? variant === 'desktop'
-
-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-14 flex items-center gap-5 px-5 border-b border-black/5 dark:border-white/10',
-    chrome: 'flex shrink-0 items-center justify-start gap-5 min-h-7',
-    trafficLight: 'h-3.5 w-3.5 rounded-full shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]',
-    navButton: 'inline-flex h-7 w-7 items-center justify-center rounded-full text-zinc-500/80 transition-colors hover:bg-white/35 hover:text-zinc-900 disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-zinc-500/80 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white',
-    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-[15px] leading-[22px] font-medium text-zinc-950 dark:text-white truncate',
-    subtitle: 'text-xs 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 chromeClasses = headerStyle.chrome || ''
-export const trafficLightClasses = headerStyle.trafficLight || ''
-export const navButtonClasses = headerStyle.navButton || ''
-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
-export const hasDesktopChrome = variant === 'desktop' && (showWindowControls || showNavigationControls)
-export const windowControlsClasses = showWindowControls === 'auto' ? 'hidden items-center gap-2' : 'flex items-center gap-2'
-</script>
-
-<script client>
-const emit = defineEmits()
-
-function isCraftRuntime() {
-  return window.__craftNativeSidebar === true
-    || window.craft?.__craft_bridge_loaded === true
-    || !!window.craft?.window
-    || !!window.webkit?.messageHandlers?.craft
-}
-
-function usesCustomWindowControls() {
-  return window.__craftCustomWindowControls === true
-    || document.documentElement.classList.contains('has-custom-window-controls')
-    || document.body?.dataset?.customWindowControls === 'true'
-}
-
-function syncWindowControls() {
-  document.querySelectorAll('[data-stx-native-window-controls]').forEach((element) => {
-    const show = element.dataset.stxNativeWindowControls === 'auto'
-      ? isCraftRuntime() && usesCustomWindowControls()
-      : true
-    element.classList.toggle('hidden', !show)
-    element.classList.toggle('flex', show)
-  })
-}
-
-function onSearchInput(event) {
-  emit('search', event.target.value)
-}
-
-function goBack() {
-  window.history.back()
-  emit('back')
-}
-
-function goForward() {
-  window.history.forward()
-  emit('forward')
-}
-
-onMount(() => {
-  syncWindowControls()
-  window.addEventListener('craft:ready', syncWindowControls)
-  window.addEventListener('stx:load', syncWindowControls)
-
-  return () => {
-    window.removeEventListener('craft:ready', syncWindowControls)
-    window.removeEventListener('stx:load', syncWindowControls)
-  }
-})
-</script>
-
-<div class="flex-shrink-0">
-  <!-- Title bar area -->
-  <div class="{{ titlebarClasses }}">
-    @if(hasDesktopChrome)
-      <div class="{{ chromeClasses }}" data-stx-sidebar-web-chrome>
-        @if(showWindowControls)
-          <div class="{{ windowControlsClasses }}" aria-hidden="true" data-stx-native-window-controls="{{ showWindowControls === 'auto' ? 'auto' : 'always' }}">
-            <span class="{{ trafficLightClasses }} bg-[#ff5f57]"></span>
-            <span class="{{ trafficLightClasses }} bg-[#ffbd2e]"></span>
-            <span class="{{ trafficLightClasses }} bg-[#28c840]"></span>
-          </div>
-        @endif
-
-        @if(showNavigationControls)
-          <div class="flex items-center gap-2">
-            <button type="button" class="{{ navButtonClasses }}" @click="goBack()" aria-label="Go back">
-              <span class="h-5 w-5 i-hugeicons-arrow-left-02" aria-hidden="true"></span>
-            </button>
-            <button type="button" class="{{ navButtonClasses }}" @click="goForward()" aria-label="Go forward">
-              <span class="h-5 w-5 i-hugeicons-arrow-right-02" aria-hidden="true"></span>
-            </button>
-          </div>
-        @endif
-      </div>
-    @endif
-
-    @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-h53sgqzz.stx

@@ -1,92 +0,0 @@
-<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-[16px] px-3.5 py-2 text-[14px] 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 grid h-5 min-w-5 place-items-center rounded-full bg-white/70 px-1.5 text-[11px] 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-[14px] px-3 py-1.5 text-[13.5px] leading-tight transition-colors duration-150',
-    indent: '',
-    active: 'bg-[#e8e8e6]/90 text-zinc-950 dark:bg-white/12 dark:text-white',
-    inactive: 'text-zinc-700 hover:bg-white/38 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
-    icon: active ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400',
-    badge: 'ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-white/72 px-1.5 text-[11px] 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} h-[18px] w-[18px] 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-g195cb4f.stx

@@ -1,114 +0,0 @@
-<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 pb-1.5 pt-3 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' ? 'py-1.5' : variant === 'desktop' ? 'py-1' : '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 }}
-// Reactive prop binding — parent can drive `expanded` via signals. See #1704.
-const isExpanded = useReactiveProp('expanded', {{ 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>