@stacksjs/components 0.2.3

package/dist/SidebarSection-kh92fk4m.stx

@@ -0,0 +1,108 @@
+<script>
+/**
+ * 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/Signup-3nxq5zag.stx

@@ -0,0 +1,161 @@
+<script>
+export const headingText = $props.headingText || 'Sign up for Stacks'
+export const showSocialSignup = $props.showSocialSignup ?? true
+export const onSubmit = $props.onSubmit || (() => {})
+export const className = $props.className || ''
+
+export const containerClasses = `min-h-full flex flex-col justify-center py-12 lg:px-8 sm:px-6 dark:bg-blue-gray-900 ${className}`.trim()
+</script>
+
+<div class="{{ containerClasses }}">
+  <div class="sm:mx-auto sm:max-w-md sm:w-full">
+    <h2 class="mt-6 text-center text-2xl text-gray-900 dark:text-gray-100 font-bold leading-9 tracking-tight">
+      {{ headingText }}
+    </h2>
+  </div>
+
+  <div class="mt-10 sm:mx-auto sm:max-w-[480px] sm:w-full">
+    <div class="bg-white dark:bg-blue-gray-800 px-6 py-12 shadow sm:rounded-lg sm:px-12">
+      <form class="space-y-6" onsubmit="event.preventDefault(); handleSubmit(event)">
+        <div>
+          <label for="name" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            Full Name
+          </label>
+          <div class="mt-2">
+            <input
+              id="name"
+              name="name"
+              type="text"
+              autocomplete="name"
+              required
+              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label for="email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            Email address
+          </label>
+          <div class="mt-2">
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autocomplete="email"
+              required
+              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label for="confirm_email" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            Confirm Email
+          </label>
+          <div class="mt-2">
+            <input
+              id="confirm_email"
+              name="confirm_email"
+              type="email"
+              autocomplete="email"
+              required
+              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm text-gray-900 dark:text-gray-100 font-medium leading-6">
+            Password
+          </label>
+          <div class="mt-2">
+            <input
+              id="password"
+              name="password"
+              type="password"
+              autocomplete="new-password"
+              required
+              class="block w-full border-0 rounded-md p-2 py-1.5 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset sm:text-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 sm:leading-6 focus:ring-2 focus:ring-teal-600 focus:ring-inset dark:bg-blue-gray-700"
+            />
+          </div>
+        </div>
+
+        <div>
+          <button
+            type="submit"
+            class="w-full flex justify-center rounded-md bg-teal-600 px-3 py-1.5 text-sm text-white font-semibold leading-6 shadow-sm hover:bg-teal-500 focus-visible:outline-2 focus-visible:outline-teal-600 focus-visible:outline-offset-2 focus-visible:outline"
+          >
+            Sign up
+          </button>
+        </div>
+      </form>
+
+      @if(showSocialSignup)
+        <div>
+          <div class="relative mt-10">
+            <div class="absolute inset-0 flex items-center" aria-hidden="true">
+              <div class="w-full border-t border-gray-200 dark:border-gray-600"></div>
+            </div>
+            <div class="relative flex justify-center text-sm font-medium leading-6">
+              <span class="bg-white dark:bg-blue-gray-800 px-6 text-gray-900 dark:text-gray-100">
+                Or signup with
+              </span>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2 mt-6 gap-4">
+            <a
+              href="#"
+              class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
+            >
+              <svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M12.0003 4.75C13.7703 4.75 15.3553 5.36002 16.6053 6.54998L20.0303 3.125C17.9502 1.19 15.2353 0 12.0003 0C7.31028 0 3.25527 2.69 1.28027 6.60998L5.27028 9.70498C6.21525 6.86002 8.87028 4.75 12.0003 4.75Z" fill="#EA4335" />
+                <path d="M23.49 12.275C23.49 11.49 23.415 10.73 23.3 10H12V14.51H18.47C18.18 15.99 17.34 17.25 16.08 18.1L19.945 21.1C22.2 19.01 23.49 15.92 23.49 12.275Z" fill="#4285F4" />
+                <path d="M5.26498 14.2949C5.02498 13.5699 4.88501 12.7999 4.88501 11.9999C4.88501 11.1999 5.01998 10.4299 5.26498 9.7049L1.275 6.60986C0.46 8.22986 0 10.0599 0 11.9999C0 13.9399 0.46 15.7699 1.28 17.3899L5.26498 14.2949Z" fill="#FBBC05" />
+                <path d="M12.0004 24.0001C15.2404 24.0001 17.9654 22.935 19.9454 21.095L16.0804 18.095C15.0054 18.82 13.6204 19.245 12.0004 19.245C8.8704 19.245 6.21537 17.135 5.2654 14.29L1.27539 17.385C3.25539 21.31 7.3104 24.0001 12.0004 24.0001Z" fill="#34A853" />
+              </svg>
+              <span class="text-sm font-semibold leading-6">Google</span>
+            </a>
+
+            <a
+              href="#"
+              class="w-full flex items-center justify-center gap-3 rounded-md bg-white dark:bg-blue-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 font-semibold shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 ring-inset hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:ring-transparent"
+            >
+              <svg class="h-5 w-5 fill-[#24292F] dark:fill-white" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+                <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clip-rule="evenodd" />
+              </svg>
+              <span class="text-sm font-semibold leading-6">GitHub</span>
+            </a>
+          </div>
+        </div>
+      @endif
+    </div>
+  </div>
+</div>
+
+<script>
+function handleSubmit(event) {
+  const formData = new FormData(event.target)
+  const name = formData.get('name')
+  const email = formData.get('email')
+  const confirmEmail = formData.get('confirm_email')
+  const password = formData.get('password')
+
+  // Basic email confirmation validation
+  if (email !== confirmEmail) {
+    alert('Emails do not match!')
+    return
+  }
+
+  if (onSubmit) {
+    onSubmit({ name, email, password })
+  }
+
+  // Clear sensitive fields after submission
+  setTimeout(() => {
+    event.target.querySelector('#password').value = ''
+    event.target.querySelector('#confirm_email').value = ''
+  }, 1000)
+}
+</script>

package/dist/Skeleton-g0nx1njm.stx

@@ -0,0 +1,48 @@
+<script>
+export const variant = $props.variant || 'text'
+export const count = $props.count || 1
+export const width = $props.width || ''
+export const height = $props.height || ''
+export const circle = $props.circle || false
+export const className = $props.className || ''
+export const animate = $props.animate ?? true
+
+// Variant classes
+const variantClasses = {
+  text: 'h-4 rounded',
+  title: 'h-8 rounded',
+  avatar: 'w-10 h-10 rounded-full',
+  thumbnail: 'w-24 h-24 rounded-md',
+  button: 'h-10 w-32 rounded-md',
+  card: 'h-64 rounded-lg',
+  rect: 'rounded-md',
+}
+
+// Animation classes
+const animationClasses = animate ? 'animate-pulse' : ''
+
+// Build base classes
+const baseClasses = circle ? 'rounded-full' : variantClasses[variant]
+
+// Build style object
+let styleString = ''
+if (width) {
+  styleString += `width: ${typeof width === 'number' ? width + 'px' : width};`
+}
+if (height) {
+  styleString += `height: ${typeof height === 'number' ? height + 'px' : height};`
+}
+
+export const skeletonClasses = `bg-gray-200 dark:bg-gray-700 ${baseClasses} ${animationClasses} ${className}`.trim()
+export const containerClasses = count > 1 ? 'space-y-3' : ''
+</script>
+
+@if(count > 1)
+  <div class="{{ containerClasses }}">
+    @for(i = 0; i < count; i++)
+      <div class="{{ skeletonClasses }}" style="{{ styleString }}" aria-busy="true" aria-live="polite"></div>
+    @endfor
+  </div>
+@else
+  <div class="{{ skeletonClasses }}" style="{{ styleString }}" aria-busy="true" aria-live="polite"></div>
+@endif

package/dist/Spinner-w4zj58xp.stx

@@ -0,0 +1,109 @@
+<script>
+export const variant = $props.variant || 'circle'
+export const size = $props.size || 'md'
+export const color = $props.color || 'primary'
+export const label = $props.label || ''
+export const className = $props.className || ''
+
+// Size classes
+const sizeClasses = {
+  xs: 'w-3 h-3',
+  sm: 'w-4 h-4',
+  md: 'w-6 h-6',
+  lg: 'w-8 h-8',
+  xl: 'w-12 h-12',
+}
+
+// Color classes
+const colorClasses = {
+  primary: 'text-blue-600 dark:text-blue-500',
+  secondary: 'text-purple-600 dark:text-purple-500',
+  success: 'text-green-600 dark:text-green-500',
+  warning: 'text-yellow-600 dark:text-yellow-500',
+  danger: 'text-red-600 dark:text-red-500',
+  info: 'text-cyan-600 dark:text-cyan-500',
+  white: 'text-white',
+  gray: 'text-gray-600 dark:text-gray-400',
+}
+
+export const containerClasses = `inline-flex flex-col items-center gap-2 ${className}`.trim()
+export const spinnerClasses = `${sizeClasses[size]} ${colorClasses[color]} animate-spin`.trim()
+export const labelClasses = `text-sm font-medium text-gray-700 dark:text-gray-300`.trim()
+
+// Dots size classes
+const dotsSizeClasses = {
+  xs: 'w-1 h-1',
+  sm: 'w-1.5 h-1.5',
+  md: 'w-2 h-2',
+  lg: 'w-2.5 h-2.5',
+  xl: 'w-3 h-3',
+}
+
+const dotsColorClasses = {
+  primary: 'bg-blue-600 dark:bg-blue-500',
+  secondary: 'bg-purple-600 dark:bg-purple-500',
+  success: 'bg-green-600 dark:bg-green-500',
+  warning: 'bg-yellow-600 dark:bg-yellow-500',
+  danger: 'bg-red-600 dark:bg-red-500',
+  info: 'bg-cyan-600 dark:bg-cyan-500',
+  white: 'bg-white',
+  gray: 'bg-gray-600 dark:bg-gray-400',
+}
+
+export const dotClasses = `${dotsSizeClasses[size]} ${dotsColorClasses[color]} rounded-full`.trim()
+</script>
+
+<div class="{{ containerClasses }}" role="status" aria-live="polite" aria-busy="true">
+  @if(variant === 'circle')
+    <!-- Circle spinner (default) -->
+    <svg class="{{ spinnerClasses }}" xmlns="http://www.w3.org/2000/svg" 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>
+  @elseif(variant === 'dots')
+    <!-- Dots spinner -->
+    <div class="flex items-center gap-1">
+      <div class="{{ dotClasses }}" style="animation: bounce 1.4s infinite ease-in-out both; animation-delay: -0.32s"></div>
+      <div class="{{ dotClasses }}" style="animation: bounce 1.4s infinite ease-in-out both; animation-delay: -0.16s"></div>
+      <div class="{{ dotClasses }}" style="animation: bounce 1.4s infinite ease-in-out both"></div>
+    </div>
+  @elseif(variant === 'bars')
+    <!-- Bars spinner -->
+    <div class="flex items-center gap-1">
+      <div class="w-1 bg-current rounded-full" style="height: {{ size === 'xs' ? '8px' : size === 'sm' ? '12px' : size === 'md' ? '16px' : size === 'lg' ? '20px' : '24px' }}; animation: bars 1.2s infinite ease-in-out; animation-delay: -0.24s"></div>
+      <div class="w-1 bg-current rounded-full" style="height: {{ size === 'xs' ? '8px' : size === 'sm' ? '12px' : size === 'md' ? '16px' : size === 'lg' ? '20px' : '24px' }}; animation: bars 1.2s infinite ease-in-out; animation-delay: -0.12s"></div>
+      <div class="w-1 bg-current rounded-full" style="height: {{ size === 'xs' ? '8px' : size === 'sm' ? '12px' : size === 'md' ? '16px' : size === 'lg' ? '20px' : '24px' }}; animation: bars 1.2s infinite ease-in-out"></div>
+    </div>
+  @elseif(variant === 'ring')
+    <!-- Ring spinner -->
+    <div class="{{ spinnerClasses }}" style="border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;"></div>
+  @endif
+
+  @if(label)
+    <span class="{{ labelClasses }}">{{ label }}</span>
+  @endif
+
+  <span class="sr-only">{{ label || 'Loading...' }}</span>
+</div>
+
+<style>
+@keyframes bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes bars {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}
+</style>

package/dist/Stepper-rwc5actp.stx

@@ -0,0 +1,17 @@
+<script>
+export const currentStep = $props.currentStep || 0
+export const orientation = $props.orientation || 'horizontal'
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const orientationClasses = orientation === 'horizontal'
+  ? 'flex flex-row'
+  : 'flex flex-col'
+
+const baseClasses = 'w-full'
+const stepperClasses = `${baseClasses} ${orientationClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ stepperClasses }}">
+  <slot :currentStep="currentStep" />
+</component>

package/dist/StepperStep-h0k657nm.stx

@@ -0,0 +1,53 @@
+<script>
+export const stepNumber = $props.stepNumber
+export const currentStep = $props.currentStep || 0
+export const label = $props.label || ''
+export const description = $props.description || ''
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+export const onClick = $props.onClick
+
+export const isComplete = stepNumber < currentStep
+export const isCurrent = stepNumber === currentStep
+export const isUpcoming = stepNumber > currentStep
+
+const baseClasses = 'flex items-center'
+const stepClasses = `${baseClasses} ${className}`.trim()
+
+export function handleClick() {
+  onClick?.(stepNumber)
+}
+</script>
+
+<component :is="{{ as }}" class="{{ stepClasses }}">
+  <button
+    type="button"
+    @click="handleClick"
+    class="flex items-center gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-lg p-2"
+  >
+    <div class="{{ isComplete ? 'bg-blue-600 dark:bg-blue-500' : isCurrent ? 'bg-blue-600 dark:bg-blue-500 ring-4 ring-blue-200 dark:ring-blue-800' : 'bg-neutral-300 dark:bg-neutral-600' }} w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold transition-all">
+      @if(isComplete)
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>
+      @else
+        {{ stepNumber + 1 }}
+      @endif
+    </div>
+
+    @if(label)
+      <div class="text-left">
+        <div class="text-sm font-medium {{ isCurrent ? 'text-blue-600 dark:text-blue-400' : 'text-neutral-900 dark:text-white' }}">
+          {{ label }}
+        </div>
+        @if(description)
+          <div class="text-xs text-neutral-500 dark:text-neutral-400">
+            {{ description }}
+          </div>
+        @endif
+      </div>
+    @endif
+  </button>
+
+  <slot :isComplete="isComplete" :isCurrent="isCurrent" :isUpcoming="isUpcoming" />
+</component>