@stacksjs/components 0.2.3

package/dist/Checkbox-m8v46pmx.stx

@@ -0,0 +1,92 @@
+<script>
+export const checked = $props.checked || false
+export const onChange = $props.onChange || (() => {})
+export const disabled = $props.disabled || false
+export const indeterminate = $props.indeterminate || false
+export const size = $props.size || 'md'
+export const label = $props.label || ''
+export const description = $props.description || ''
+export const error = $props.error || false
+export const required = $props.required || false
+export const value = $props.value || ''
+export const name = $props.name || ''
+export const className = $props.className || ''
+
+// Size classes
+const sizeClasses = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+}
+
+// Base classes for checkbox
+const baseClasses = 'rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-500 focus:ring-indigo-600 dark:focus:ring-indigo-500 focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors'
+
+const stateClasses = error
+  ? 'border-red-300 dark:border-red-600 text-red-600 dark:text-red-500 focus:ring-red-500 dark:focus:ring-red-400'
+  : ''
+
+const disabledClasses = disabled
+  ? 'opacity-50 cursor-not-allowed'
+  : 'cursor-pointer'
+
+export const checkboxClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses}`.trim()
+export const labelClasses = `text-sm font-medium ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-gray-100'} ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`.trim()
+export const descriptionClasses = `text-sm ${error ? 'text-red-500 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
+</script>
+
+<div class="relative flex items-start {{ className }}">
+  <div class="flex h-6 items-center">
+    <input
+      id="checkbox-{{ value || label }}"
+      type="checkbox"
+      name="{{ name }}"
+      value="{{ value }}"
+      checked="{{ checked }}"
+      disabled="{{ disabled }}"
+      required="{{ required }}"
+      class="{{ checkboxClasses }}"
+      onchange="handleChange(event)"
+      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @if(description)aria-describedby="checkbox-description"@endif
+    />
+  </div>
+
+  @if(label || description)
+    <div class="ml-3 text-sm leading-6">
+      @if(label)
+        <label for="checkbox-{{ value || label }}" class="{{ labelClasses }}">
+          {{ label }}
+          @if(required)
+            <span class="text-red-500 ml-1">*</span>
+          @endif
+        </label>
+      @endif
+      @if(description)
+        <p id="checkbox-description" class="{{ descriptionClasses }}">
+          {{ description }}
+        </p>
+      @endif
+    </div>
+  @endif
+</div>
+
+<script>
+function handleChange(event) {
+  const isChecked = event.target.checked
+
+  if (!disabled && onChange) {
+    onChange(isChecked)
+  }
+}
+
+// Handle indeterminate state
+if (indeterminate && typeof window !== 'undefined') {
+  window.addEventListener('DOMContentLoaded', () => {
+    const checkbox = document.getElementById('checkbox-{{ value || label }}')
+    if (checkbox) {
+      checkbox.indeterminate = true
+    }
+  })
+}
+</script>

package/dist/Checkout-vcnnr176.stx

@@ -0,0 +1,39 @@
+<script>
+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
+@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.
+    </p>
+  </div>
+@endif

package/dist/CodeBlock-mwex82cm.stx

@@ -0,0 +1,57 @@
+<script>
+import { highlight, applyHeadwindClasses } from '../utils/highlighter'
+
+export const code = $props.code || ''
+export const language = $props.language || 'typescript'
+export const theme = $props.theme || 'auto'
+export const lineNumbers = $props.lineNumbers !== false
+export const copyable = $props.copyable !== false
+export const className = $props.className || ''
+
+export let highlightedCode = ''
+export let copied = false
+
+// Highlight the code
+const result = await highlight(code, { language, theme, lineNumbers })
+highlightedCode = applyHeadwindClasses(result.html, className)
+
+export async function copyToClipboard() {
+  try {
+    await navigator.clipboard.writeText(code)
+    copied = true
+    setTimeout(() => {
+      copied = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy code:', err)
+  }
+}
+</script>
+
+<div class="relative group">
+  {!! highlightedCode !!}
+
+  @if(copyable)
+    <button
+      @click="copyToClipboard"
+      class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 px-3 py-1.5 bg-neutral-800 hover:bg-neutral-700 text-white text-xs rounded-md font-medium"
+      aria-label="Copy code"
+    >
+      @if(copied)
+        <span class="flex items-center gap-1.5">
+          <svg class="w-4 h-4" 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>
+          Copied!
+        </span>
+      @else
+        <span class="flex items-center gap-1.5">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+          </svg>
+          Copy
+        </span>
+      @endif
+    </button>
+  @endif
+</div>

package/dist/Combobox-npb08vkp.stx

@@ -0,0 +1,13 @@
+<script>
+export const value = $props.value
+export const onChange = $props.onChange
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'relative'
+const comboboxClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ comboboxClasses }}">
+  <slot :value="value" :onChange="onChange" />
+</component>

package/dist/ComboboxButton-vcdyq4zw.stx

@@ -0,0 +1,13 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'button'
+
+const baseClasses = 'absolute inset-y-0 right-0 flex items-center pr-2'
+const buttonClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ buttonClasses }}" tabindex="-1">
+  <svg class="h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="none" stroke="currentColor">
+    <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+</component>

package/dist/ComboboxInput-c9d2p02m.stx

@@ -0,0 +1,25 @@
+<script>
+export const displayValue = $props.displayValue
+export const onChange = $props.onChange
+export const className = $props.className || ''
+export const placeholder = $props.placeholder || ''
+export const disabled = $props.disabled || false
+
+const baseClasses = 'w-full rounded-lg border-none bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-sm leading-5 text-neutral-900 dark:text-white focus:ring-0 focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2'
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
+const inputClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+
+export function handleChange(e) {
+  onChange?.(e.target.value)
+}
+</script>
+
+<input
+  type="text"
+  class="{{ inputClasses }}"
+  placeholder="{{ placeholder }}"
+  value="{{ displayValue }}"
+  @if(disabled)disabled@endif
+  @input="handleChange"
+  autocomplete="off"
+/>

package/dist/ComboboxOption-7d0h9ash.stx

@@ -0,0 +1,52 @@
+<script>
+export const value = $props.value
+export const disabled = $props.disabled || false
+export const className = $props.className || ''
+export const as = $props.as || 'li'
+export const currentValue = $props.currentValue
+export const onChange = $props.onChange
+
+export let active = false
+export const selected = currentValue === value
+
+const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4'
+const stateClasses = active
+  ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100'
+  : 'text-neutral-900 dark:text-neutral-100'
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
+const optionClasses = `${baseClasses} ${stateClasses} ${disabledClasses} ${className}`.trim()
+
+export function handleClick() {
+  if (disabled) return
+  onChange?.(value)
+}
+
+export function handleMouseEnter() {
+  if (!disabled) active = true
+}
+
+export function handleMouseLeave() {
+  active = false
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ optionClasses }}"
+  role="option"
+  aria-selected="{{ selected ? 'true' : 'false' }}"
+  @if(disabled)aria-disabled="true"@endif
+  @click="handleClick"
+  @mouseenter="handleMouseEnter"
+  @mouseleave="handleMouseLeave"
+>
+  @if(selected)
+    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400">
+      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+      </svg>
+    </span>
+  @endif
+
+  <slot :active="active" :selected="selected" :disabled="disabled" />
+</component>

package/dist/ComboboxOptions-4dtqc0qa.stx

@@ -0,0 +1,12 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'ul'
+export const static_ = $props.static || false
+
+const baseClasses = 'absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
+const optionsClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ optionsClasses }}" role="listbox">
+  <slot />
+</component>

package/dist/CommandPalette-ah00bf8v.stx

@@ -0,0 +1,39 @@
+<script>
+export const open = $props.open || false
+export const onClose = $props.onClose
+export const query = $props.query || ''
+export const onQueryChange = $props.onQueryChange
+export const className = $props.className || ''
+
+const baseClasses = 'fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6 md:p-20'
+const paletteClasses = `${baseClasses} ${className}`.trim()
+
+export function handleClose() {
+  onClose?.()
+}
+</script>
+
+@if(open)
+  <div class="{{ paletteClasses }}">
+    <div class="fixed inset-0 bg-neutral-500 bg-opacity-25 dark:bg-opacity-50 transition-opacity" @click="handleClose" />
+
+    <div class="mx-auto max-w-xl transform divide-y divide-neutral-100 dark:divide-neutral-800 overflow-hidden rounded-xl bg-white dark:bg-neutral-900 shadow-2xl ring-1 ring-black ring-opacity-5 transition-all">
+      <div class="relative">
+        <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-neutral-400" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+        </svg>
+        <input
+          type="text"
+          class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-neutral-900 dark:text-white placeholder-neutral-400 focus:ring-0 sm:text-sm"
+          placeholder="Search..."
+          value="{{ query }}"
+          @input="(e) => onQueryChange?.(e.target.value)"
+        />
+      </div>
+
+      <div class="max-h-96 overflow-y-auto py-2">
+        <slot :query="query" />
+      </div>
+    </div>
+  </div>
+@endif

package/dist/CommandPaletteItem-2yx0gvtj.stx

@@ -0,0 +1,32 @@
+<script>
+export const className = $props.className || ''
+export const onClick = $props.onClick
+export let active = false
+
+const baseClasses = 'flex cursor-pointer select-none items-center px-4 py-2'
+const activeClasses = active
+  ? 'bg-blue-600 text-white'
+  : 'text-neutral-900 dark:text-neutral-100'
+const itemClasses = `${baseClasses} ${activeClasses} ${className}`.trim()
+
+export function handleClick() {
+  onClick?.()
+}
+
+export function handleMouseEnter() {
+  active = true
+}
+
+export function handleMouseLeave() {
+  active = false
+}
+</script>
+
+<div
+  class="{{ itemClasses }}"
+  @click="handleClick"
+  @mouseenter="handleMouseEnter"
+  @mouseleave="handleMouseLeave"
+>
+  <slot :active="active" />
+</div>

package/dist/DefaultPaymentMethod-emw5fg8s.stx

@@ -0,0 +1,62 @@
+<script>
+export const paymentMethod = $props.paymentMethod
+export const isLoading = $props.isLoading || false
+export const className = $props.className || ''
+
+const brandIcons = {
+  visa: '💳',
+  mastercard: '💳',
+  amex: '💳',
+  discover: '💳',
+  default: '💳',
+}
+
+export const containerClasses = `mt-16 w-2/3 bg-white dark:bg-blue-gray-800 px-8 py-6 shadow ring-1 ring-black dark:ring-gray-700 ring-opacity-5 sm:rounded-lg ${className}`.trim()
+</script>
+
+<div class="{{ containerClasses }}">
+  <h2 class="text-lg text-gray-900 dark:text-gray-100 font-medium">
+    Payment Info
+  </h2>
+
+  @if(isLoading)
+    <!-- Loading skeleton -->
+    <div class="mt-8 animate-pulse">
+      <div class="h-20 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
+    </div>
+  @else
+    @if(paymentMethod)
+      <div class="col-span-1 mt-8 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+        <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[paymentMethod.brand.toLowerCase()] || brandIcons.default }}</span>
+              </div>
+
+              <!-- Card Details -->
+              <div>
+                <h2 class="text-sm text-gray-600 dark:text-gray-300">
+                  {{ paymentMethod.brand }} •••• {{ paymentMethod.last_four }}
+                  <span class="ml-4 inline-flex items-center rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-2 py-1 text-xs text-indigo-700 dark:text-indigo-300 font-medium ring-1 ring-indigo-700/10 dark:ring-indigo-300/20 ring-inset">Default</span>
+                  <br>
+                  <span class="text-xs text-gray-500 dark:text-gray-400 italic">Expires {{ paymentMethod.exp_month }} / {{ paymentMethod.exp_year }}</span>
+                </h2>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    @else
+      <!-- Empty state -->
+      <div class="col-span-1 mt-8 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-blue-gray-800 shadow divide-y divide-gray-200 dark:divide-gray-700">
+        <div class="w-full px-4 py-5">
+          <h2 class="text-center text-sm text-gray-600 dark:text-gray-300">
+            You haven't added any payment methods yet.
+          </h2>
+        </div>
+      </div>
+    @endif
+  @endif
+</div>

package/dist/Dialog-1w4rz7x0.stx

@@ -0,0 +1,19 @@
+<script>
+export const open = $props.open || false
+export const onClose = $props.onClose
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'relative z-50'
+const dialogClasses = `${baseClasses} ${className}`.trim()
+
+export function handleClose() {
+  onClose?.(false)
+}
+</script>
+
+@if(open)
+  <div class="{{ dialogClasses }}" role="dialog" aria-modal="true">
+    <slot />
+  </div>
+@endif

package/dist/DialogBackdrop-qbm3y5ab.stx

@@ -0,0 +1,9 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'fixed inset-0 bg-black bg-opacity-25 dark:bg-opacity-50 transition-opacity'
+const backdropClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ backdropClasses }}" aria-hidden="true" />

package/dist/DialogDescription-01w5j74b.stx

@@ -0,0 +1,11 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'p'
+
+const baseClasses = 'mt-2 text-sm text-neutral-500 dark:text-neutral-400'
+const descriptionClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ descriptionClasses }}">
+  <slot />
+</component>

package/dist/DialogPanel-brsszrrs.stx

@@ -0,0 +1,16 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'div'
+
+const baseClasses = 'fixed inset-0 overflow-y-auto'
+const panelWrapperClasses = 'flex min-h-full items-center justify-center p-4 text-center'
+const panelClasses = `transform overflow-hidden rounded-lg bg-white dark:bg-neutral-800 p-6 text-left align-middle shadow-xl transition-all ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ baseClasses }}">
+  <div class="{{ panelWrapperClasses }}">
+    <div class="{{ panelClasses }}">
+      <slot />
+    </div>
+  </div>
+</component>

package/dist/DialogTitle-3rxhwg21.stx

@@ -0,0 +1,11 @@
+<script>
+export const className = $props.className || ''
+export const as = $props.as || 'h3'
+
+const baseClasses = 'text-lg font-medium leading-6 text-neutral-900 dark:text-white'
+const titleClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<component :is="{{ as }}" class="{{ titleClasses }}">
+  <slot />
+</component>

package/dist/Drawer-yfaz8q7f.stx

@@ -0,0 +1,137 @@
+<script>
+export const open = $props.open ?? false
+export const onClose = $props.onClose || (() => {})
+export const position = $props.position || 'right'
+export const title = $props.title || ''
+export const className = $props.className || ''
+
+// Position classes
+const positionClasses = {
+  right: 'inset-y-0 right-0 pl-10 sm:pl-16',
+  left: 'inset-y-0 left-0 pr-10 sm:pr-16',
+  top: 'inset-x-0 top-0 pb-10',
+  bottom: 'inset-x-0 bottom-0 pt-10',
+}
+
+// Slide animation classes
+const slideClasses = {
+  right: {
+    enter: 'translate-x-full',
+    leave: 'translate-x-0',
+  },
+  left: {
+    enter: '-translate-x-full',
+    leave: 'translate-x-0',
+  },
+  top: {
+    enter: '-translate-y-full',
+    leave: 'translate-y-0',
+  },
+  bottom: {
+    enter: 'translate-y-full',
+    leave: 'translate-y-0',
+  },
+}
+
+// Size classes based on position
+const sizeClasses = {
+  right: 'max-w-md w-screen',
+  left: 'max-w-md w-screen',
+  top: 'max-h-[90vh] w-full',
+  bottom: 'max-h-[90vh] w-full',
+}
+
+// Close button position
+const closeButtonPosition = {
+  right: 'left-0 -ml-8 sm:-ml-10',
+  left: 'right-0 -mr-8 sm:-mr-10',
+  top: 'right-0 -mr-8',
+  bottom: 'right-0 -mr-8',
+}
+
+export const containerClasses = `pointer-events-none fixed ${positionClasses[position]} flex max-w-full`.trim()
+export const panelClasses = `pointer-events-auto relative ${sizeClasses[position]} ${className}`.trim()
+export const slideAnimation = slideClasses[position]
+export const closeButtonClasses = `absolute top-0 ${closeButtonPosition[position]} flex pt-4 pr-2 sm:pr-4`.trim()
+</script>
+
+@if(open)
+  <!-- Backdrop -->
+  <div
+    class="fixed inset-0 z-50 bg-gray-500/75 dark:bg-gray-900/75 transition-opacity duration-500"
+    style="animation: fadeIn 0.5s ease-in-out"
+    onclick="handleBackdropClick()"
+  ></div>
+
+  <!-- Drawer Container -->
+  <div class="fixed inset-0 z-50 overflow-hidden">
+    <div class="absolute inset-0 overflow-hidden">
+      <div class="{{ containerClasses }}">
+        <!-- Drawer Panel -->
+        <div
+          class="{{ panelClasses }}"
+          style="animation: slideIn 0.5s ease-in-out"
+        >
+          <!-- Close Button -->
+          <div class="{{ closeButtonClasses }}">
+            <button
+              type="button"
+              class="relative rounded-md text-gray-300 dark:text-gray-400 hover:text-white dark:hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+              onclick="handleClose()"
+            >
+              <span class="absolute -inset-2.5"></span>
+              <span class="sr-only">Close panel</span>
+              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Drawer Content -->
+          <div class="relative flex h-full flex-col overflow-y-auto bg-white dark:bg-blue-gray-800 py-6 shadow-xl">
+            @if(title)
+              <div class="px-4 sm:px-6">
+                <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                  {{ title }}
+                </h2>
+              </div>
+            @endif
+            <div class="relative mt-6 flex-1 px-4 sm:px-6">
+              <slot />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endif
+
+<style>
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideIn {
+  from {
+    transform: {{ position === 'right' ? 'translateX(100%)' : position === 'left' ? 'translateX(-100%)' : position === 'top' ? 'translateY(-100%)' : 'translateY(100%)' }};
+  }
+  to {
+    transform: translate(0, 0);
+  }
+}
+</style>
+
+<script>
+function handleClose() {
+  if (onClose) {
+    onClose()
+  }
+}
+
+function handleBackdropClick() {
+  if (onClose) {
+    onClose()
+  }
+}
+</script>