@stacksjs/components 0.2.35 → 0.2.54

package/dist/ListboxOption-e0dtv1gc.stx

@@ -0,0 +1,49 @@
+<script server>
+export const value = $props.value
+export const disabled = $props.disabled || false
+export const className = $props.className || ''
+export const as = $props.as || 'li'
+
+const baseClasses = 'relative cursor-pointer select-none py-2 pl-10 pr-4 text-neutral-900 dark:text-neutral-100 hover:bg-blue-100 dark:hover:bg-blue-900'
+const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : ''
+export const optionClasses = `${baseClasses} ${disabledClasses} ${className}`.trim()
+export const valueJson = JSON.stringify(value === undefined ? null : value)
+</script>
+
+<script client>
+const isDisabled = {{ disabled }}
+const optionValue = {{ value === undefined ? 'null' : value }}
+
+function onClick(event) {
+  if (isDisabled) return
+  event.currentTarget.dispatchEvent(
+    new CustomEvent('stx:listbox-select', { bubbles: true, detail: optionValue }),
+  )
+}
+</script>
+
+<component
+  :is="{{ as }}"
+  class="{{ optionClasses }}"
+  data-stx-listbox-option
+  data-option-value="{{ valueJson }}"
+  role="option"
+  aria-selected="false"
+  @if(disabled)aria-disabled="true"@endif
+  @click="onClick($event)"
+>
+  <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-blue-600 dark:text-blue-400" data-stx-listbox-check>
+    <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>
+
+  <slot :disabled="disabled" />
+</component>
+
+<style>
+[data-stx-listbox-option][data-selected="false"] [data-stx-listbox-check],
+[data-stx-listbox-option]:not([data-selected]) [data-stx-listbox-check] {
+  display: none;
+}
+</style>

package/dist/{ComboboxOptions-6b5ywc5x.stx → ListboxOptions-ejkatcfg.stx}

@@ -1,12 +1,16 @@
 <script server>
 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()
+export const optionsClasses = `${baseClasses} ${className}`.trim()
 </script>
 
-<component :is="{{ as }}" class="{{ optionsClasses }}" role="listbox">
+<component
+  :is="{{ as }}"
+  class="{{ optionsClasses }}"
+  data-stx-listbox-options
+  role="listbox"
+>
   <slot />
 </component>

package/dist/{Login-rx9gyqhx.stx → Login-gepemsth.stx}

@@ -6,12 +6,27 @@ export const showRememberMe = $props.showRememberMe ?? true
 export const showForgotPassword = $props.showForgotPassword ?? true
 export const showSignup = $props.showSignup ?? true
 export const signupText = $props.signupText || 'Start a 14 day free trial'
-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>
 
+<script client>
+const emit = defineEmits()
+
+function onSubmit(event) {
+  event.preventDefault()
+  const formData = new FormData(event.target)
+  const email = formData.get('email')
+  const password = formData.get('password')
+  emit('submit', { email, password })
+  setTimeout(() => {
+    const pw = event.target.querySelector('#password')
+    if (pw) pw.value = ''
+  }, 1000)
+}
+</script>
+
 <div class="{{ containerClasses }}">
   <div class="sm:mx-auto sm:max-w-md sm:w-full">
     @if(showLogo)
@@ -22,7 +37,7 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
     </h2>
   </div>
 
-  <form onsubmit="event.preventDefault(); handleSubmit(event)">
+  <form @submit="onSubmit($event)">
     <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">
         <div class="space-y-6">
@@ -144,20 +159,3 @@ export const containerClasses = `min-h-full flex flex-col justify-center py-12 l
     </div>
   </form>
 </div>
-
-<script>
-function handleSubmit(event) {
-  const formData = new FormData(event.target)
-  const email = formData.get('email')
-  const password = formData.get('password')
-
-  if (onSubmit) {
-    onSubmit({ email, password })
-  }
-
-  // Clear password after submission
-  setTimeout(() => {
-    event.target.querySelector('#password').value = ''
-  }, 1000)
-}
-</script>

package/dist/Navigator-rk2a5wvk.stx

@@ -0,0 +1,113 @@
+<script server>
+export const items = $props.items || []
+export const active = $props.active || ''
+export const orientation = $props.orientation || 'horizontal'
+export const variant = $props.variant || 'default'
+export const size = $props.size || 'md'
+export const className = $props.className || ''
+
+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) {
+  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 === a) return true
+  return false
+}
+
+function getItemClasses(item) {
+  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') {
+    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') {
+    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') {
+    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') {
+    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'
+  }
+  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()
+}
+
+function onClickItem(item, event) {
+  if (item.disabled) {
+    event.preventDefault()
+    return
+  }
+  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">
+  @foreach(item in items)
+    @if(item.href)
+      <a
+        href="{{ item.href }}"
+        :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">{!! item.icon !!}</span>
+        @endif
+        <span>{{ item.label }}</span>
+        @if(item.badge)
+          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+            {{ item.badge }}
+          </span>
+        @endif
+      </a>
+    @else
+      <button
+        type="button"
+        :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">{!! item.icon !!}</span>
+        @endif
+        <span>{{ item.label }}</span>
+        @if(item.badge)
+          <span class="ml-auto px-2 py-0.5 text-xs font-semibold rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
+            {{ item.badge }}
+          </span>
+        @endif
+      </button>
+    @endif
+  @endforeach
+</nav>

package/dist/Notification-tb9b525s.stx

@@ -0,0 +1,78 @@
+<script server>
+export const show = $props.show !== false
+export const title = $props.title || ''
+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 className = $props.className || ''
+
+const typeColors = {
+  info: 'bg-blue-50 text-blue-900 dark:bg-blue-900 dark:text-blue-100',
+  success: 'bg-green-50 text-green-900 dark:bg-green-900 dark:text-green-100',
+  warning: 'bg-yellow-50 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100',
+  error: 'bg-red-50 text-red-900 dark:bg-red-900 dark:text-red-100',
+}
+
+const positions = {
+  'top-left': 'top-0 left-0',
+  'top-right': 'top-0 right-0',
+  'top-center': 'top-0 left-1/2 -translate-x-1/2',
+  'bottom-left': 'bottom-0 left-0',
+  'bottom-right': 'bottom-0 right-0',
+  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+}
+
+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'
+export const notificationClasses = `${baseClasses} ${typeColors[type]} ${positions[position]} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const duration = {{ duration }}
+const isVisible = state({{ show }})
+
+function close() {
+  isVisible.set(false)
+  emit('close')
+}
+
+onMount(() => {
+  if (duration > 0 && isVisible()) {
+    setTimeout(close, duration)
+  }
+})
+
+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>
+
+    <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/dist/{NumberInput-nzpkx1ry.stx → NumberInput-drnvtqej.stx}

@@ -1,6 +1,5 @@
 <script server>
 export const value = $props.value || ''
-export const onChange = $props.onChange || (() => {})
 export const placeholder = $props.placeholder || '0'
 export const disabled = $props.disabled || false
 export const readonly = $props.readonly || false
@@ -16,26 +15,16 @@ export const showControls = $props.showControls ?? true
 export const className = $props.className || ''
 export const inputClassName = $props.inputClassName || ''
 
-// Size classes
-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',
-}
-
-// Base and state classes
+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 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'
-
 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'
-
 const paddingClasses = showControls ? 'pr-10' : ''
 
 export const inputClasses = `${baseClasses} ${sizeClasses[size]} ${stateClasses} ${disabledClasses} ${paddingClasses} ${inputClassName}`.trim()
@@ -43,6 +32,37 @@ export const labelClasses = `block text-sm font-medium leading-6 mb-2 ${error ?
 export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`.trim()
 </script>
 
+<script client>
+const emit = defineEmits()
+const stepSize = {{ step }}
+const minVal = {{ min === undefined ? 'undefined' : min }}
+const maxVal = {{ max === undefined ? 'undefined' : max }}
+const inputValue = state({{ value }})
+
+function onInput(event) {
+  inputValue.set(event.target.value)
+  emit('input', inputValue())
+}
+
+function increment() {
+  const current = Number.parseFloat(inputValue()) || 0
+  const next = current + stepSize
+  if (maxVal !== undefined && next > maxVal) return
+  inputValue.set(String(next))
+  emit('input', String(next))
+}
+
+function decrement() {
+  const current = Number.parseFloat(inputValue()) || 0
+  const next = current - stepSize
+  if (minVal !== undefined && next < minVal) return
+  inputValue.set(String(next))
+  emit('input', String(next))
+}
+
+defineExpose({ value: inputValue, increment, decrement })
+</script>
+
 <div class="w-full {{ className }}">
   @if(label)
     <label for="number-input" class="{{ labelClasses }}">
@@ -58,25 +78,24 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
       type="number"
       id="number-input"
       class="{{ inputClasses }}"
-      value="{{ value }}"
+      :value="inputValue()"
       placeholder="{{ placeholder }}"
-      disabled="{{ disabled }}"
-      readonly="{{ readonly }}"
-      required="{{ required }}"
+      @if(disabled)disabled@endif
+      @if(readonly)readonly@endif
+      @if(required)required@endif
       @if(min !== undefined)min="{{ min }}"@endif
       @if(max !== undefined)max="{{ max }}"@endif
       step="{{ step }}"
-      oninput="handleInput(event)"
-      aria-invalid="{{ error ? 'true' : 'false' }}"
+      @input="onInput($event)"
+      :aria-invalid="{{ error ? 'true' : 'false' }}"
       @if(helperText)aria-describedby="helper-text"@endif
     />
 
     @if(showControls && !disabled && !readonly)
-      <!-- Increment/Decrement controls -->
       <div class="absolute inset-y-0 right-0 flex flex-col">
         <button
           type="button"
-          @click="handleIncrement()"
+          @click="increment()"
           class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none border-b border-gray-300 dark:border-gray-600"
           aria-label="Increment"
         >
@@ -86,7 +105,7 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
         </button>
         <button
           type="button"
-          @click="handleDecrement()"
+          @click="decrement()"
           class="flex items-center justify-center w-8 h-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none"
           aria-label="Decrement"
         >
@@ -104,35 +123,3 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
     </p>
   @endif
 </div>
-
-<script>
-function handleInput(event) {
-  const newValue = event.target.value
-
-  if (onChange) {
-    onChange(newValue)
-  }
-}
-
-function handleIncrement() {
-  const currentValue = parseFloat(value) || 0
-  const newValue = currentValue + step
-
-  if (max !== undefined && newValue > max) return
-
-  if (onChange) {
-    onChange(String(newValue))
-  }
-}
-
-function handleDecrement() {
-  const currentValue = parseFloat(value) || 0
-  const newValue = currentValue - step
-
-  if (min !== undefined && newValue < min) return
-
-  if (onChange) {
-    onChange(String(newValue))
-  }
-}
-</script>