@stacksjs/components 0.2.35 → 0.2.54

package/src/ui/navigator/Navigator.stx

@@ -1,91 +1,74 @@
 <script server>
-// Navigator Component Props
 export const items = $props.items || []
 export const active = $props.active || ''
-export const orientation = $props.orientation || 'horizontal' // 'horizontal' | 'vertical'
-export const variant = $props.variant || 'default' // 'default' | 'pills' | 'underline' | 'sidebar'
-export const size = $props.size || 'md' // 'sm' | 'md' | 'lg'
-export const onNavigate = $props.onNavigate
+export const orientation = $props.orientation || 'horizontal'
+export const variant = $props.variant || 'default'
+export const size = $props.size || 'md'
 export const className = $props.className || ''
 
-// Helper function to check if item is active
+const containerBaseClasses = orientation === 'horizontal' ? 'flex items-center' : 'flex flex-col'
+export const containerClasses = `${containerBaseClasses} ${className}`.trim()
+export const gapClasses = orientation === 'horizontal' ? 'gap-1' : 'gap-0.5'
+</script>
+
+<script client>
+const emit = defineEmits()
+const items = {{ items }}
+const variant = {{ variant }}
+const size = {{ size }}
+const initialActive = {{ active }}
+const activeKey = state(initialActive)
+
 function isActive(item) {
-  if (typeof item.href === 'string' && typeof active === 'string') {
-    // Exact match
-    if (item.href === active) return true
-    // Match with query params/hash
-    if (active.startsWith(item.href)) return true
+  const a = activeKey()
+  if (typeof item.href === 'string' && typeof a === 'string') {
+    if (item.href === a) return true
+    if (a.startsWith(item.href)) return true
   }
-  if (item.id && item.id === active) return true
+  if (item.id && item.id === a) return true
   return false
 }
 
-// Base classes
-const containerBaseClasses = orientation === 'horizontal'
-  ? 'flex items-center'
-  : 'flex flex-col'
-
-const containerClasses = `${containerBaseClasses} ${className}`.trim()
-
-// Item classes based on variant and size
 function getItemClasses(item) {
-  const active = isActive(item)
-  let classes = ''
-
-  // Size classes
-  const sizeClasses = {
-    sm: 'px-2 py-1 text-sm',
-    md: 'px-3 py-2 text-base',
-    lg: 'px-4 py-3 text-lg',
-  }
-
-  classes += sizeClasses[size] || sizeClasses.md
-
-  // Variant classes
+  const isActiveItem = isActive(item)
+  const sizeClasses = { sm: 'px-2 py-1 text-sm', md: 'px-3 py-2 text-base', lg: 'px-4 py-3 text-lg' }
+  let cls = sizeClasses[size] || sizeClasses.md
   if (variant === 'default') {
-    classes += active
+    cls += isActiveItem
       ? ' text-gray-900 dark:text-gray-100 font-medium'
       : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-  } else if (variant === 'pills') {
-    classes += active
+  }
+  else if (variant === 'pills') {
+    cls += isActiveItem
       ? ' bg-blue-600 text-white font-medium rounded-full'
       : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full'
-  } else if (variant === 'underline') {
-    classes += active
+  }
+  else if (variant === 'underline') {
+    cls += isActiveItem
       ? ' text-blue-600 dark:text-blue-400 font-medium border-b-2 border-blue-600 dark:border-blue-400'
       : ' text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border-b-2 border-transparent'
-  } else if (variant === 'sidebar') {
-    classes += active
+  }
+  else if (variant === 'sidebar') {
+    cls += isActiveItem
       ? ' bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 font-medium border-l-4 border-blue-600 dark:border-blue-400'
       : ' text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 border-l-4 border-transparent'
   }
-
-  // Common classes
-  classes += ' transition-all duration-200 cursor-pointer flex items-center gap-2'
-
-  if (item.disabled) {
-    classes += ' opacity-50 cursor-not-allowed pointer-events-none'
-  }
-
-  return classes.trim()
+  cls += ' transition-all duration-200 cursor-pointer flex items-center gap-2'
+  if (item.disabled) cls += ' opacity-50 cursor-not-allowed pointer-events-none'
+  return cls.trim()
 }
 
-// Gap classes between items
-const gapClasses = orientation === 'horizontal'
-  ? 'gap-1'
-  : 'gap-0.5'
-
-function handleClick(item, event) {
+function onClickItem(item, event) {
   if (item.disabled) {
     event.preventDefault()
     return
   }
-
-  if (onNavigate) {
-    event.preventDefault()
-    onNavigate(item)
-  }
+  event.preventDefault()
+  activeKey.set(item.href || item.id || activeKey())
+  emit('navigate', item)
 }
+
+defineExpose({ activeKey })
 </script>
 
 <nav class="{{ containerClasses }} {{ gapClasses }}" role="navigation" aria-label="Main navigation">
@@ -93,18 +76,13 @@ function handleClick(item, event) {
     @if(item.href)
       <a
         href="{{ item.href }}"
-        class="{{ getItemClasses(item) }}"
-        @click="handleClick(item, event)"
-        @if(isActive(item))
-          aria-current="page"
-        @endif
-        @if(item.disabled)
-          aria-disabled="true"
-          tabindex="-1"
-        @endif
+        :class="getItemClasses({{ JSON.stringify(item) }})"
+        @click="onClickItem({{ JSON.stringify(item) }}, $event)"
+        :aria-current="isActive({{ JSON.stringify(item) }}) ? 'page' : null"
+        @if(item.disabled)aria-disabled="true" tabindex="-1"@endif
       >
         @if(item.icon)
-          <span class="flex-shrink-0" innerHTML="{!! item.icon !!}"></span>
+          <span class="flex-shrink-0">{!! item.icon !!}</span>
         @endif
         <span>{{ item.label }}</span>
         @if(item.badge)
@@ -116,15 +94,12 @@ function handleClick(item, event) {
     @else
       <button
         type="button"
-        class="{{ getItemClasses(item) }}"
-        @click="handleClick(item, event)"
-        @if(item.disabled)
-          disabled
-          aria-disabled="true"
-        @endif
+        :class="getItemClasses({{ JSON.stringify(item) }})"
+        @click="onClickItem({{ JSON.stringify(item) }}, $event)"
+        @if(item.disabled)disabled aria-disabled="true"@endif
       >
         @if(item.icon)
-          <span class="flex-shrink-0" innerHTML="{!! item.icon !!}"></span>
+          <span class="flex-shrink-0">{!! item.icon !!}</span>
         @endif
         <span>{{ item.label }}</span>
         @if(item.badge)

package/src/ui/notification/Notification.stx

@@ -5,7 +5,6 @@ export const message = $props.message || ''
 export const type = $props.type || 'info'
 export const position = $props.position || 'top-right'
 export const duration = $props.duration || 5000
-export const onClose = $props.onClose
 export const className = $props.className || ''
 
 const typeColors = {
@@ -25,47 +24,55 @@ const positions = {
 }
 
 const baseClasses = 'fixed z-50 m-4 max-w-md w-full pointer-events-auto rounded-lg p-4 shadow-lg ring-1 ring-black ring-opacity-5 transition-all'
-const notificationClasses = `${baseClasses} ${typeColors[type]} ${positions[position]} ${className}`.trim()
+export const notificationClasses = `${baseClasses} ${typeColors[type]} ${positions[position]} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const duration = {{ duration }}
+const isVisible = state({{ show }})
 
-export function handleClose() {
-  onClose?.()
+function close() {
+  isVisible.set(false)
+  emit('close')
 }
-</script>
 
-@if(show)
-  <div class="{{ notificationClasses }}" role="alert">
-    <div class="flex items-start">
-      <div class="flex-1">
-        @if(title)
-          <p class="text-sm font-medium">{{ title }}</p>
-        @endif
-        @if(message)
-          <p class="mt-1 text-sm {{ title ? 'opacity-90' : '' }}">{{ message }}</p>
-        @endif
-        @if(!title && !message)
-          <slot />
-        @endif
-      </div>
+onMount(() => {
+  if (duration > 0 && isVisible()) {
+    setTimeout(close, duration)
+  }
+})
 
-      <button
-        type="button"
-        @click="handleClose"
-        class="ml-4 inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
-      >
-        <span class="sr-only">Close</span>
-        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
-        </svg>
-      </button>
+defineExpose({
+  show: () => isVisible.set(true),
+  close,
+  isVisible,
+})
+</script>
+
+<div :show="isVisible()" class="{{ notificationClasses }}" role="alert">
+  <div class="flex items-start">
+    <div class="flex-1">
+      @if(title)
+        <p class="text-sm font-medium">{{ title }}</p>
+      @endif
+      @if(message)
+        <p class="mt-1 text-sm {{ title ? 'opacity-90' : '' }}">{{ message }}</p>
+      @endif
+      @if(!title && !message)
+        <slot />
+      @endif
     </div>
-  </div>
 
-  <script>
-  // Auto-hide after duration (client-side only)
-  if (typeof window !== 'undefined' && duration > 0) {
-    setTimeout(() => {
-      handleClose()
-    }, duration)
-  }
-  </script>
-@endif
+    <button
+      type="button"
+      @click="close()"
+      class="ml-4 inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
+    >
+      <span class="sr-only">Close</span>
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+      </svg>
+    </button>
+  </div>
+</div>

package/src/ui/pagination/Pagination.stx

@@ -5,99 +5,84 @@ export const siblingCount = $props.siblingCount || 1
 export const showFirstLast = $props.showFirstLast ?? true
 export const showPrevNext = $props.showPrevNext ?? true
 export const className = $props.className || ''
-export const onChange = $props.onChange
 
-// Generate page numbers to display
-function generatePageNumbers() {
-  const pages = []
-  const totalNumbers = siblingCount * 2 + 3 // siblings on each side + current + first + last
-  const totalBlocks = totalNumbers + 2 // + 2 for ellipsis
-
-  if (totalPages <= totalBlocks) {
-    // Show all pages
-    for (let i = 1; i <= totalPages; i++) {
-      pages.push(i)
-    }
-  } else {
-    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1)
-    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages)
+export const paginationClasses = `flex items-center gap-1 ${className}`.trim()
+export const buttonClasses = `px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 transition-colors duration-150`.trim()
+export const activeButtonClasses = `px-3 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 border border-blue-600 dark:border-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
+export const ellipsisClasses = `px-3 py-2 text-sm font-medium text-gray-400 dark:text-gray-600`.trim()
+export const iconClasses = `w-5 h-5`.trim()
+</script>
 
-    const showLeftEllipsis = leftSiblingIndex > 2
-    const showRightEllipsis = rightSiblingIndex < totalPages - 1
+<script client>
+const emit = defineEmits()
+const totalPages = {{ totalPages }}
+const siblingCount = {{ siblingCount }}
+const page = state({{ currentPage }})
 
-    if (!showLeftEllipsis && showRightEllipsis) {
-      // Show left pages + ellipsis + last
-      const leftCount = 3 + 2 * siblingCount
-      for (let i = 1; i <= leftCount; i++) {
-        pages.push(i)
-      }
-      pages.push('ellipsis-right')
-      pages.push(totalPages)
-    } else if (showLeftEllipsis && !showRightEllipsis) {
-      // Show first + ellipsis + right pages
-      pages.push(1)
-      pages.push('ellipsis-left')
-      const rightCount = 3 + 2 * siblingCount
-      for (let i = totalPages - rightCount + 1; i <= totalPages; i++) {
-        pages.push(i)
-      }
-    } else {
-      // Show first + ellipsis + middle + ellipsis + last
-      pages.push(1)
-      pages.push('ellipsis-left')
-      for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
-        pages.push(i)
-      }
-      pages.push('ellipsis-right')
-      pages.push(totalPages)
-    }
+function goToPage(target) {
+  if (target >= 1 && target <= totalPages && target !== page()) {
+    page.set(target)
+    emit('change', target)
   }
-
-  return pages
 }
 
-const pageNumbers = generatePageNumbers()
+function goToPrevious() { goToPage(page() - 1) }
+function goToNext() { goToPage(page() + 1) }
+function goToFirst() { goToPage(1) }
+function goToLast() { goToPage(totalPages) }
 
-function goToPage(page) {
-  if (page >= 1 && page <= totalPages && page !== currentPage) {
-    if (onChange) {
-      onChange(page)
-    }
-  }
-}
+const pageNumbers = derived(() => {
+  const cur = page()
+  const pages = []
+  const totalNumbers = siblingCount * 2 + 3
+  const totalBlocks = totalNumbers + 2
 
-function goToPrevious() {
-  goToPage(currentPage - 1)
-}
+  if (totalPages <= totalBlocks) {
+    for (let i = 1; i <= totalPages; i++) pages.push(i)
+    return pages
+  }
 
-function goToNext() {
-  goToPage(currentPage + 1)
-}
+  const leftSibling = Math.max(cur - siblingCount, 1)
+  const rightSibling = Math.min(cur + siblingCount, totalPages)
+  const showLeftEllipsis = leftSibling > 2
+  const showRightEllipsis = rightSibling < totalPages - 1
 
-function goToFirst() {
-  goToPage(1)
-}
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const leftCount = 3 + 2 * siblingCount
+    for (let i = 1; i <= leftCount; i++) pages.push(i)
+    pages.push('ellipsis-right')
+    pages.push(totalPages)
+  }
+  else if (showLeftEllipsis && !showRightEllipsis) {
+    pages.push(1)
+    pages.push('ellipsis-left')
+    const rightCount = 3 + 2 * siblingCount
+    for (let i = totalPages - rightCount + 1; i <= totalPages; i++) pages.push(i)
+  }
+  else {
+    pages.push(1)
+    pages.push('ellipsis-left')
+    for (let i = leftSibling; i <= rightSibling; i++) pages.push(i)
+    pages.push('ellipsis-right')
+    pages.push(totalPages)
+  }
+  return pages
+})
 
-function goToLast() {
-  goToPage(totalPages)
-}
+const isFirstPage = derived(() => page() === 1)
+const isLastPage = derived(() => page() === totalPages)
 
-export const paginationClasses = `flex items-center gap-1 ${className}`.trim()
-export const buttonClasses = `px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white dark:disabled:hover:bg-gray-800 transition-colors duration-150`.trim()
-export const activeButtonClasses = `px-3 py-2 text-sm font-medium text-white bg-blue-600 dark:bg-blue-500 border border-blue-600 dark:border-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
-export const ellipsisClasses = `px-3 py-2 text-sm font-medium text-gray-400 dark:text-gray-600`.trim()
-export const iconClasses = `w-5 h-5`.trim()
+defineExpose({ page, goToPage })
 </script>
 
 <nav class="{{ paginationClasses }}" role="navigation" aria-label="Pagination">
-  <!-- First page button -->
   @if(showFirstLast)
     <button
       type="button"
       @click="goToFirst()"
       class="{{ buttonClasses }}"
       aria-label="Go to first page"
-      disabled="{{ currentPage === 1 }}"
+      :disabled="isFirstPage()"
     >
       <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
@@ -105,14 +90,13 @@ export const iconClasses = `w-5 h-5`.trim()
     </button>
   @endif
 
-  <!-- Previous button -->
   @if(showPrevNext)
     <button
       type="button"
       @click="goToPrevious()"
       class="{{ buttonClasses }}"
       aria-label="Go to previous page"
-      disabled="{{ currentPage === 1 }}"
+      :disabled="isFirstPage()"
     >
       <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
@@ -120,45 +104,27 @@ export const iconClasses = `w-5 h-5`.trim()
     </button>
   @endif
 
-  <!-- Page numbers -->
-  @foreach(page in pageNumbers)
-    @if(typeof page === 'string')
-      <!-- Ellipsis -->
-      <span class="{{ ellipsisClasses }}" aria-hidden="true">...</span>
-    @else
-      @if(page === currentPage)
-        <!-- Current page -->
-        <button
-          type="button"
-          class="{{ activeButtonClasses }}"
-          aria-label="Page {{ page }}"
-          aria-current="page"
-          disabled
-        >
-          {{ page }}
-        </button>
-      @else
-        <!-- Other pages -->
-        <button
-          type="button"
-          @click="goToPage({{ page }})"
-          class="{{ buttonClasses }}"
-          aria-label="Go to page {{ page }}"
-        >
-          {{ page }}
-        </button>
-      @endif
-    @endif
-  @endforeach
+  <span :for="p in pageNumbers()" :key="p" class="contents">
+    <span :if="typeof p === 'string'" class="{{ ellipsisClasses }}" aria-hidden="true">...</span>
+    <button
+      :if="typeof p !== 'string'"
+      type="button"
+      :class="p === page() ? '{{ activeButtonClasses }}' : '{{ buttonClasses }}'"
+      :aria-label="`Go to page ${p}`"
+      :aria-current="p === page() ? 'page' : null"
+      :disabled="p === page()"
+      @click="goToPage(p)"
+      x-text="p"
+    ></button>
+  </span>
 
-  <!-- Next button -->
   @if(showPrevNext)
     <button
       type="button"
       @click="goToNext()"
       class="{{ buttonClasses }}"
       aria-label="Go to next page"
-      disabled="{{ currentPage === totalPages }}"
+      :disabled="isLastPage()"
     >
       <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
@@ -166,14 +132,13 @@ export const iconClasses = `w-5 h-5`.trim()
     </button>
   @endif
 
-  <!-- Last page button -->
   @if(showFirstLast)
     <button
       type="button"
       @click="goToLast()"
       class="{{ buttonClasses }}"
       aria-label="Go to last page"
-      disabled="{{ currentPage === totalPages }}"
+      :disabled="isLastPage()"
     >
       <svg class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />

package/src/ui/payment/Checkout.stx

@@ -1,36 +1,28 @@
 <script server>
 export const products = $props.products || []
-export const redirectUrl = $props.redirectUrl || ''
 export const mode = $props.mode || 'subscription'
 export const stripePublicKey = $props.stripePublicKey || ''
 export const apiUrl = $props.apiUrl || ''
-export const onSubmit = $props.onSubmit
-export const onRemoveProduct = $props.onRemoveProduct
 export const shipping = $props.shipping || 0
 export const taxes = $props.taxes || 0
 export const className = $props.className || ''
 
-// For future expansion - one-time payment support
 export const isSubscription = mode === 'subscription'
 export const isOneTime = mode === 'one-time'
 </script>
 
 @if(isSubscription)
-  @component('SubscriptionCheckout', {
-    products,
-    stripePublicKey,
-    apiUrl,
-    onSubmit,
-    onRemoveProduct,
-    shipping,
-    taxes,
-    className
-  })
-  @endcomponent
+  <SubscriptionCheckout
+    :products="products"
+    :stripePublicKey="stripePublicKey"
+    :apiUrl="apiUrl"
+    :shipping="shipping"
+    :taxes="taxes"
+    :className="className"
+  />
 @endif
 
 @if(isOneTime)
-  <!-- One-time payment component can be implemented here in the future -->
   <div class="p-8 text-center">
     <p class="text-gray-600 dark:text-gray-400">
       One-time payment mode is not yet implemented.