@stacksjs/components 0.2.35 → 0.2.54

package/dist/{Pagination-h61eq390.stx → Pagination-n3d31cns.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/dist/PasswordInput-n02x6053.stx

@@ -0,0 +1,142 @@
+<script server>
+export const value = $props.value || ''
+export const placeholder = $props.placeholder || 'Enter your password'
+export const disabled = $props.disabled || false
+export const readonly = $props.readonly || 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 required = $props.required || false
+export const showStrength = $props.showStrength || false
+export const className = $props.className || ''
+export const inputClassName = $props.inputClassName || ''
+
+const sizeClasses = { sm: 'px-3 py-1.5 text-sm h-8', md: 'px-4 py-2 text-base h-10', lg: 'px-5 py-3 text-lg h-12' }
+const iconSizeClasses = { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6' }
+
+const baseClasses = 'block w-full border-0 rounded-md shadow-sm ring-1 ring-inset transition-colors duration-200 focus:ring-2 focus:ring-inset dark:bg-blue-gray-700 dark:text-gray-100 pr-10'
+const stateClasses = error
+  ? 'ring-red-300 dark:ring-red-600 text-red-900 dark:text-red-300 placeholder-red-300 dark:placeholder-red-500 focus:ring-red-500 dark:focus:ring-red-400'
+  : 'ring-gray-300 dark:ring-gray-600 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-indigo-600 dark:focus:ring-indigo-400'
+const disabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed bg-gray-50 dark:bg-gray-800'
+  : readonly
+    ? 'bg-gray-50 dark:bg-gray-800 cursor-default'
+    : 'bg-white dark:bg-blue-gray-700'
+
+export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${inputClassName}`.trim()
+export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'}`.trim()
+export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+export const iconClasses = iconSizeClasses[size]
+</script>
+
+<script client>
+const emit = defineEmits()
+const showPassword = state(false)
+const inputValue = state({{ value }})
+
+function onInput(event) {
+  inputValue.set(event.target.value)
+  emit('input', inputValue())
+}
+
+function toggleVisibility() {
+  showPassword.set(!showPassword())
+}
+
+function calcStrength(pw) {
+  if (!pw) return 0
+  let s = 0
+  if (pw.length >= 8) s += 25
+  if (pw.length >= 12) s += 25
+  if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) s += 25
+  if (/\d/.test(pw)) s += 15
+  if (/[^a-zA-Z\d]/.test(pw)) s += 10
+  return Math.min(s, 100)
+}
+
+const strength = derived(() => calcStrength(inputValue()))
+const strengthText = derived(() => {
+  const s = strength()
+  return s < 40 ? 'Weak' : s < 70 ? 'Medium' : 'Strong'
+})
+const strengthColor = derived(() => {
+  const s = strength()
+  return s < 40 ? 'bg-red-500' : s < 70 ? 'bg-yellow-500' : 'bg-green-500'
+})
+const strengthLabelColor = derived(() => {
+  const s = strength()
+  return s < 40 ? 'text-red-600' : s < 70 ? 'text-yellow-600' : 'text-green-600'
+})
+const inputType = derived(() => showPassword() ? 'text' : 'password')
+const toggleAriaLabel = derived(() => showPassword() ? 'Hide password' : 'Show password')
+
+defineExpose({ value: inputValue })
+</script>
+
+<div class="w-full {{ className }}">
+  @if(label)
+    <label for="password-input" class="{{ labelClasses }}">
+      {{ label }}
+      @if(required)
+        <span class="text-red-500 ml-1">*</span>
+      @endif
+    </label>
+  @endif
+
+  <div class="relative">
+    <input
+      :type="inputType()"
+      id="password-input"
+      class="{{ inputClasses }}"
+      :value="inputValue()"
+      placeholder="{{ placeholder }}"
+      @if(disabled)disabled@endif
+      @if(readonly)readonly@endif
+      @if(required)required@endif
+      @input="onInput($event)"
+      :aria-invalid="{{ error ? 'true' : 'false' }}"
+      @if(helperText)aria-describedby="helper-text"@endif
+    />
+
+    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
+      <button
+        type="button"
+        @click="toggleVisibility()"
+        class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
+        :aria-label="toggleAriaLabel()"
+      >
+        <svg :show="showPassword()" class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+        </svg>
+        <svg :show="!showPassword()" class="{{ iconClasses }}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  @if(showStrength)
+    <div :show="inputValue().length > 0" class="mt-2">
+      <div class="flex items-center justify-between mb-1">
+        <span class="text-xs text-gray-600 dark:text-gray-400">Password strength</span>
+        <span class="text-xs font-medium" :class="strengthLabelColor()" x-text="strengthText()"></span>
+      </div>
+      <div class="w-full h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+        <div
+          class="h-full transition-all duration-300 rounded-full"
+          :class="strengthColor()"
+          :style="`width: ${strength()}%`"
+        ></div>
+      </div>
+    </div>
+  @endif
+
+  @if(helperText)
+    <p id="helper-text" class="{{ helperClasses }}">
+      {{ helperText }}
+    </p>
+  @endif
+</div>

package/dist/{PaymentMethods-j42jsk5x.stx → PaymentMethods-x4vrx9yb.stx}

@@ -1,12 +1,11 @@
 <script server>
 export const paymentMethods = $props.paymentMethods || []
-export const onDeletePaymentMethod = $props.onDeletePaymentMethod
-export const onMakeDefault = $props.onMakeDefault
 export const isLoading = $props.isLoading || false
+export const showMakeDefault = $props.showMakeDefault ?? true
+export const showDelete = $props.showDelete ?? true
 export const className = $props.className || ''
 
-// Card brand icon mapping
-const brandIcons = {
+export const brandIcons = {
   visa: '💳',
   mastercard: '💳',
   amex: '💳',
@@ -17,9 +16,22 @@ const brandIcons = {
 export const containerClasses = `mt-4 ${className}`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+
+function onMakeDefault(methodId) {
+  emit('makeDefault', methodId)
+}
+
+function onDelete(methodId) {
+  if (confirm('Are you sure you want to delete this payment method?')) {
+    emit('deletePaymentMethod', methodId)
+  }
+}
+</script>
+
 <div class="{{ containerClasses }}">
   @if(isLoading)
-    <!-- Loading state -->
     <div class="animate-pulse">
       <div class="h-24 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
     </div>
@@ -31,12 +43,10 @@ export const containerClasses = `mt-4 ${className}`.trim()
             <div class="w-full p-3">
               <div class="flex items-center justify-between">
                 <div class="flex items-center space-x-4">
-                  <!-- Card Brand Icon -->
                   <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded-md">
                     <span class="text-2xl">{{ brandIcons[method.brand.toLowerCase()] || brandIcons.default }}</span>
                   </div>
 
-                  <!-- Card Details -->
                   <div>
                     <h2 class="text-sm text-gray-600 dark:text-gray-300">
                       {{ method.brand }} •••• {{ method.last_four }}
@@ -48,12 +58,11 @@ export const containerClasses = `mt-4 ${className}`.trim()
                 </div>
 
                 <div class="flex justify-end space-x-4">
-                  <!-- Make Default Button -->
-                  @if(onMakeDefault)
+                  @if(showMakeDefault)
                     <button
                       type="button"
                       class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 font-semibold shadow-sm hover:bg-gray-50 dark:hover:bg-blue-gray-600 focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
-                      @click="handleMakeDefault('{{ method.id }}')"
+                      @click="onMakeDefault('{{ method.id }}')"
                       title="Make default"
                     >
                       <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -62,12 +71,11 @@ export const containerClasses = `mt-4 ${className}`.trim()
                     </button>
                   @endif
 
-                  <!-- Delete Button -->
-                  @if(onDeletePaymentMethod)
+                  @if(showDelete)
                     <button
                       type="button"
                       class="border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-blue-gray-700 px-2 py-1 text-sm text-red-600 dark:text-red-400 font-semibold shadow-sm hover:bg-red-50 dark:hover:bg-red-900/20 focus-visible:outline-2 focus-visible:outline-red-600 focus-visible:outline-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
-                      @click="handleDelete('{{ method.id }}')"
+                      @click="onDelete('{{ method.id }}')"
                       title="Delete payment method"
                     >
                       <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -82,7 +90,6 @@ export const containerClasses = `mt-4 ${className}`.trim()
         @endforeach
       </ul>
     @else
-      <!-- Empty state -->
       <div class="text-center py-12 bg-white dark:bg-blue-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
         <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
@@ -95,19 +102,3 @@ export const containerClasses = `mt-4 ${className}`.trim()
     @endif
   @endif
 </div>
-
-<script>
-function handleMakeDefault(methodId) {
-  if (onMakeDefault) {
-    onMakeDefault(methodId)
-  }
-}
-
-function handleDelete(methodId) {
-  if (onDeletePaymentMethod) {
-    if (confirm('Are you sure you want to delete this payment method?')) {
-      onDeletePaymentMethod(methodId)
-    }
-  }
-}
-</script>

package/dist/Popover-et2q44m7.stx

@@ -0,0 +1,60 @@
+<script server>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'relative'
+export const popoverClasses = `${baseClasses} ${className}`.trim()
+export const popoverInstanceId = `stx-pop-${Math.random().toString(36).slice(2, 11)}`
+</script>
+
+<script client>
+const emit = defineEmits()
+const popoverInstanceId = {{ popoverInstanceId }}
+const isOpen = state(false)
+let rootEl = null
+let outsideHandler = null
+
+function open() { if (!isOpen()) { isOpen.set(true); emit('change', true) } }
+function close() { if (isOpen()) { isOpen.set(false); emit('change', false) } }
+function toggle() { isOpen() ? close() : open() }
+
+function onToggle(event) { event.stopPropagation(); toggle() }
+function onClose(event) { event.stopPropagation(); close() }
+function onOpen(event) { event.stopPropagation(); open() }
+
+onMount(() => {
+  rootEl = document.querySelector(`[data-popover-id="${popoverInstanceId}"]`)
+  outsideHandler = (event) => {
+    if (!isOpen()) return
+    if (rootEl && !rootEl.contains(event.target)) close()
+  }
+  document.addEventListener('click', outsideHandler, true)
+})
+
+onDestroy(() => {
+  if (outsideHandler) document.removeEventListener('click', outsideHandler, true)
+})
+
+const dataState = derived(() => isOpen() ? 'open' : 'closed')
+
+defineExpose({ isOpen, toggle, open, close })
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ popoverClasses }}"
+  data-stx-popover
+  data-popover-id="{{ popoverInstanceId }}"
+  :data-state="dataState()"
+  @stx:popover-toggle="onToggle($event)"
+  @stx:popover-open="onOpen($event)"
+  @stx:popover-close="onClose($event)"
+>
+  <slot />
+</component>
+
+<style>
+[data-stx-popover][data-state="closed"] [data-stx-popover-panel] {
+  display: none;
+}
+</style>

package/dist/{PopoverButton-fnaqc77g.stx → PopoverButton-mffzc9pr.stx}

@@ -2,22 +2,28 @@
 export const className = $props.className || ''
 export const as = $props.as || 'button'
 export const disabled = $props.disabled || false
-export const onClick = $props.onClick
 
 const baseClasses = 'inline-flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'
-const buttonClasses = `${baseClasses} ${className}`.trim()
+export const buttonClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
 
-export function handleClick(e) {
-  if (disabled) return
-  onClick?.(e)
+function onClick(event) {
+  if (isDisabled) return
+  emit('click', event)
+  event.currentTarget.dispatchEvent(new CustomEvent('stx:popover-toggle', { bubbles: true }))
 }
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ buttonClasses }}"
+  data-stx-popover-button
   @if(disabled)disabled aria-disabled="true"@endif
-  @click="handleClick"
+  @click="onClick($event)"
 >
   <slot />
 </component>

package/dist/{PopoverPanel-y0vtf5w9.stx → PopoverPanel-054yh38h.stx}

@@ -1,23 +1,23 @@
 <script server>
 export const className = $props.className || ''
 export const as = $props.as || 'div'
-export const static_ = $props.static || false
 export const position = $props.position || 'bottom'
 
 const positionClasses = {
-  'top': 'bottom-full mb-2',
-  'bottom': 'top-full mt-2',
-  'left': 'right-full mr-2',
-  'right': 'left-full ml-2',
+  top: 'bottom-full mb-2',
+  bottom: 'top-full mt-2',
+  left: 'right-full mr-2',
+  right: 'left-full ml-2',
 }
 
 const baseClasses = 'absolute z-10 rounded-lg bg-white dark:bg-neutral-800 p-4 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
-const panelClasses = `${baseClasses} ${positionClasses[position]} ${className}`.trim()
+export const panelClasses = `${baseClasses} ${positionClasses[position]} ${className}`.trim()
 </script>
 
 <component
   :is="{{ as }}"
   class="{{ panelClasses }}"
+  data-stx-popover-panel
 >
   <slot />
 </component>