@stacksjs/components 0.2.35 → 0.2.53

package/dist/RadioGroupOption-cpdwgnhw.stx

@@ -1,51 +0,0 @@
-<script server>
-export const value = $props.value
-export const disabled = $props.disabled || false
-export const className = $props.className || ''
-export const as = $props.as || 'div'
-export const currentValue = $props.currentValue
-export const onChange = $props.onChange
-
-export let active = false
-export const checked = currentValue === value
-
-const baseClasses = 'relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none transition-all'
-const stateClasses = checked
-  ? 'bg-blue-900 bg-opacity-75 text-white dark:bg-blue-800'
-  : 'bg-white dark:bg-neutral-800'
-const activeClasses = active
-  ? 'ring-2 ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-300 dark:ring-offset-blue-700'
-  : ''
-const disabledClasses = disabled
-  ? 'opacity-50 cursor-not-allowed'
-  : ''
-
-const optionClasses = `${baseClasses} ${stateClasses} ${activeClasses} ${disabledClasses} ${className}`.trim()
-
-export function handleClick() {
-  if (disabled) return
-  onChange?.(value)
-}
-
-export function handleFocus() {
-  if (!disabled) active = true
-}
-
-export function handleBlur() {
-  active = false
-}
-</script>
-
-<component
-  :is="{{ as }}"
-  class="{{ optionClasses }}"
-  role="radio"
-  aria-checked="{{ checked ? 'true' : 'false' }}"
-  @if(disabled)aria-disabled="true"@endif
-  tabindex="{{ disabled ? '-1' : '0' }}"
-  @click="handleClick"
-  @focus="handleFocus"
-  @blur="handleBlur"
->
-  <slot :active="active" :checked="checked" :disabled="disabled" />
-</component>

package/dist/SearchInput-2521m475.stx

@@ -1,63 +0,0 @@
-<script server>
-export const value = $props.value || ''
-export const onChange = $props.onChange || (() => {})
-export const onSearch = $props.onSearch || (() => {})
-export const placeholder = $props.placeholder || 'Search...'
-export const disabled = $props.disabled || false
-export const size = $props.size || 'md'
-export const error = $props.error || false
-export const label = $props.label || ''
-export const helperText = $props.helperText || ''
-export const loading = $props.loading || false
-export const className = $props.className || ''
-
-// Search icon SVG
-const searchIcon = '<svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>'
-
-// Loading spinner SVG
-const spinnerIcon = '<svg class="animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>'
-
-export const rightIcon = loading ? spinnerIcon : undefined
-</script>
-
-@component('TextInput', {
-  value,
-  onChange,
-  placeholder,
-  disabled,
-  size,
-  error,
-  label,
-  helperText,
-  leftIcon: searchIcon,
-  rightIcon,
-  clearable: !loading,
-  className,
-  inputClassName: 'pr-20'
-})
-@endcomponent
-
-<script>
-// Debounce search to avoid excessive calls
-let searchTimeout = null
-
-function handleSearchInput(newValue) {
-  if (onChange) {
-    onChange(newValue)
-  }
-
-  // Debounce the onSearch callback
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
-
-  searchTimeout = setTimeout(() => {
-    if (onSearch) {
-      onSearch(newValue)
-    }
-  }, 300) // 300ms debounce
-}
-
-// Expose enhanced onChange handler
-export const enhancedOnChange = handleSearchInput
-</script>

package/dist/Sidebar-40ckbzh8.stx

@@ -1,288 +0,0 @@
-<script server>
-/**
- * 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-hnth56mg.stx

@@ -1,95 +0,0 @@
-<script server>
-/**
- * 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-3wrte2p2.stx

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