@stacksjs/defaults 0.70.229 → 0.70.231

package/resources/components/Dashboard/UI/Dropdown.stx

@@ -1,14 +1,17 @@
-<script server>
-interface DropdownProps {
-  align?: 'left' | 'right'
-  width?: 'auto' | 'sm' | 'md' | 'lg' | 'full'
-  disabled?: boolean
-  id?: string
-}
+<script client>
+type DropdownAlign = 'left' | 'right'
+type DropdownWidth = 'auto' | 'sm' | 'md' | 'lg' | 'full'
 
-const { align = 'left', width = 'auto', disabled = false, id = 'dropdown-' + Math.random().toString(36).slice(2, 11) } = defineProps<DropdownProps>()
+const requestedOpen = useReactiveProp('open', false)
+const align = useReactiveProp('align', 'left' as DropdownAlign)
+const width = useReactiveProp('width', 'auto' as DropdownWidth)
+const disabled = useReactiveProp('disabled', false)
+const isOpen = state(requestedOpen())
+const root = useRef('dropdownRoot')
+const menu = useRef('dropdownMenu')
+const emit = defineEmits()
 
-const widthClasses = {
+const widthClasses: Record<DropdownWidth, string> = {
   auto: 'min-w-[12rem]',
   sm: 'w-48',
   md: 'w-56',
@@ -16,57 +19,54 @@ const widthClasses = {
   full: 'w-full',
 }
 
-const alignClass = align === 'right' ? 'right-0' : 'left-0'
-</script>
-<div ref="pageRoot" class="inline-block relative text-left" data-dropdown="{{ id }}">
-    <!-- Trigger -->
-    <div data-dropdown-trigger>
-      {{ triggerSlot }}
-    </div>
-
-    <!-- Menu - macOS popover style -->
-    <div
-      data-dropdown-menu
-      class="absolute z-50 mt-1.5 {{ widthClasses[width] }} {{ alignClass }} origin-top-right bg-white/95 dark:bg-neutral-800/95 backdrop-blur-xl backdrop-saturate-150 rounded-lg shadow-lg shadow-black/10 dark:shadow-black/30 border border-black/10 dark:border-white/10 py-1 focus:outline-none hidden"
-    >
-      <slot />
-    </div>
-  </div>
-<script client>
-var _root = useRef('pageRoot')
-onMount(function() {
-  var el = _root.current;
-  if (!el) return;
-  const dropdown = el
-  if (!dropdown) return
+effect(() => {
+  isOpen.set(requestedOpen())
+})
 
-  const trigger = dropdown.querySelector('[data-dropdown-trigger]')
-  const menu = dropdown.querySelector('[data-dropdown-menu]')
-  let isOpen = false
+function setOpen(next: boolean): void {
+  if (disabled() && next)
+    return
+  if (isOpen() === next)
+    return
+  isOpen.set(next)
+  emit('update:open', next)
+  emit(next ? 'open' : 'close')
+  if (next)
+    void nextTick(() => menu.current?.focus())
+}
 
-  function toggle() {
-    if ({{ disabled ? 'true' : 'false' }}) return
-    isOpen = !isOpen
-    menu.classList.toggle('hidden', !isOpen)
-  }
+function toggle(): void {
+  setOpen(!isOpen())
+}
 
-  function close() {
-    isOpen = false
-    menu.classList.add('hidden')
-  }
+function menuClass(): string {
+  const side = align() === 'right' ? 'right-0' : 'left-0'
+  return `${widthClasses[width()] || widthClasses.auto} ${side}`
+}
 
-  trigger?.addEventListener('click', toggle)
+useClickOutside(root, () => setOpen(false))
+</script>
 
-  document.body.addEventListener('click', function(e) {
-    if (isOpen && !dropdown.contains(e.target)) {
-      close()
-    }
-  })
+<div ref="dropdownRoot" class="inline-block relative text-left" @keydown.escape="setOpen(false)">
+  <button
+    type="button"
+    class="contents disabled:opacity-50 disabled:cursor-not-allowed"
+    :aria-expanded="String(isOpen())"
+    aria-haspopup="menu"
+    :disabled="disabled()"
+    @click="toggle"
+  >
+    <slot name="trigger" />
+  </button>
 
-  document.body.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape' && isOpen) {
-      close()
-    }
-  })
-})
-</script>
+  <div
+    :if="isOpen()"
+    ref="dropdownMenu"
+    role="menu"
+    tabindex="-1"
+    class="absolute z-50 mt-1.5 py-1 bg-white/95 dark:bg-neutral-800/95 border border-black/10 rounded-lg dark:border-white/10 focus:outline-none shadow-black/10 shadow-lg dark:shadow-black/30 backdrop-blur-xl backdrop-saturate-150 origin-top"
+    :class="menuClass()"
+  >
+    <slot />
+  </div>
+</div>

package/resources/components/Dashboard/UI/EmptyState.stx

@@ -1,50 +1,31 @@
-<script server>
-interface EmptyStateProps {
-  icon?: string
-  title?: string
-  description?: string
-  actionLabel?: string
-  actionIcon?: string
-  actionHref?: string
-}
-
-const { icon = 'i-hugeicons-folder-02', title = '', description = '', actionLabel = '', actionIcon = '', actionHref = '' } = defineProps<EmptyStateProps>()
+<script client>
+const icon = useReactiveProp('icon', 'i-hugeicons-folder-02')
+const title = useReactiveProp('title', '')
+const description = useReactiveProp('description', '')
+const actionLabel = useReactiveProp('actionLabel', '')
+const actionIcon = useReactiveProp('actionIcon', '')
+const actionHref = useReactiveProp('actionHref', '')
 </script>
+
 <div class="flex flex-col items-center justify-center px-4 py-12 text-center">
-    <!-- Icon -->
-    <div class="mb-4 p-4 bg-neutral-100 dark:bg-neutral-800 rounded-full">
-      @if(iconSlot)
-        {{ iconSlot }}
-      @else
-        <div class="{{ icon }} w-8 h-8 text-neutral-400 dark:text-neutral-500"></div>
-      @endif
-    </div>
+  <div class="mb-4 p-4 bg-neutral-100 dark:bg-neutral-800 rounded-full">
+    <slot name="icon">
+      <span :class="icon() + ' block h-8 w-8 text-neutral-400 dark:text-neutral-500'"></span>
+    </slot>
+  </div>
 
-    <!-- Title -->
-    <h3 class="mb-1 font-medium text-lg text-neutral-900 dark:text-white">
-      {{ title }}
-    </h3>
+  <h3 class="mb-1 font-medium text-lg text-neutral-900 dark:text-white" :text="title()"></h3>
 
-    <!-- Description -->
-    @if(description)
-      <p class="mb-6 max-w-sm text-neutral-500 text-sm dark:text-neutral-400">
-        {{ description }}
-      </p>
-    @endif
+  <p :if="description()" class="mb-6 max-w-sm text-neutral-500 text-sm dark:text-neutral-400" :text="description()"></p>
 
-    <!-- Action button -->
-    @if(actionLabel)
-      <a
-        href="{{ actionHref || '#' }}"
-        class="inline-flex gap-2 items-center px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-neutral-900 transition-colors"
-      >
-        @if(actionIcon)
-          <div class="{{ actionIcon }} w-4 h-4"></div>
-        @endif
-        {{ actionLabel }}
-      </a>
-    @endif
+  <Button
+    :if="actionLabel()"
+    tag="a"
+    :href="actionHref() || '#'"
+  >
+    <span :if="actionIcon()" :class="actionIcon() + ' h-4 w-4'"></span>
+    <span :text="actionLabel()"></span>
+  </Button>
 
-    <!-- Custom action slot -->
-    {{ actionSlot }}
-  </div>
+  <slot name="action" />
+</div>

package/resources/components/Dashboard/UI/FilterBar.stx

@@ -1,48 +1,62 @@
-<script server>
-interface FilterBarProps {
-  searchPlaceholder?: string
-  searchValue?: string
-  itemsPerPage?: number
-  itemsPerPageOptions?: string
-  showItemsPerPage?: boolean
+<script client>
+const searchPlaceholder = useReactiveProp('searchPlaceholder', 'Search...')
+const requestedSearch = useReactiveProp('searchValue', '')
+const requestedItemsPerPage = useReactiveProp('itemsPerPage', 10)
+const itemsPerPageOptions = useReactiveProp<number[]>('itemsPerPageOptions', [10, 25, 50, 100])
+const showItemsPerPage = useReactiveProp('showItemsPerPage', true)
+const searchValue = state(requestedSearch())
+const itemsPerPage = state(requestedItemsPerPage())
+const emit = defineEmits()
+
+effect(() => {
+  searchValue.set(requestedSearch())
+})
+
+effect(() => {
+  itemsPerPage.set(requestedItemsPerPage())
+})
+
+function emitSearch(event: Event): void {
+  const value = (event.target as HTMLInputElement).value
+  emit('update:searchValue', value)
+  emit('search', value)
 }
 
-const { searchPlaceholder = 'Search...', searchValue = '', itemsPerPage = 10, itemsPerPageOptions = [10, 25, 50, 100], showItemsPerPage = true } = defineProps<FilterBarProps>()
+function emitItemsPerPage(event: Event): void {
+  const value = Number((event.target as HTMLSelectElement).value)
+  emit('update:itemsPerPage', value)
+  emit('per-page', value)
+}
 </script>
+
 <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-  <!-- Search -->
   <div class="relative flex-1 max-w-sm">
-    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
-      <div class="h-4 w-4 text-neutral-400 dark:text-neutral-500 i-hugeicons-search-01"></div>
-    </div>
+    <span aria-hidden="true" class="absolute inset-y-0 left-3 my-auto h-4 w-4 text-neutral-400 dark:text-neutral-500 i-hugeicons-search-01"></span>
     <input
+      x-model="searchValue"
       type="search"
-      value="{{ searchValue }}"
-      placeholder="{{ searchPlaceholder }}"
+      :placeholder="searchPlaceholder()"
+      :aria-label="searchPlaceholder()"
       class="block pl-9 pr-3 py-1.5 w-full text-[13px] text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 bg-white dark:bg-white/10 border border-black/10 rounded-lg dark:border-white/15 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500/20 hover:border-black/20 dark:hover:border-white/25 duration-150 transition-all"
-      data-filter-search
-    >
+      @input="emitSearch($event)"
+    />
   </div>
 
-  <!-- Filter slots -->
   <div class="flex flex-wrap gap-2 items-center">
     <slot />
   </div>
 
-  <!-- Items per page -->
-  @if(showItemsPerPage)
-    <div class="flex gap-2 items-center ml-auto text-[12px] text-neutral-500 dark:text-neutral-400">
-      <span>Show</span>
-      <select
-        class="px-2 h-7 text-[12px] text-neutral-700 dark:text-neutral-200 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 focus:border-blue-500/50 focus:ring-blue-500/40"
-        data-items-per-page
-      >
-        @foreach(itemsPerPageOptions as option)
-          <option value="{{ option }}" @if(option == itemsPerPage) selected @endif>
-            {{ option }}
-          </option>
-        @endforeach
-      </select>
-    </div>
-  @endif
+  <label :if="showItemsPerPage()" class="flex gap-2 items-center ml-auto text-[12px] text-neutral-500 dark:text-neutral-400">
+    <span>Show</span>
+    <select
+      x-model.number="itemsPerPage"
+      aria-label="Items per page"
+      class="px-2 h-7 text-[12px] text-neutral-700 dark:text-neutral-200 bg-white dark:bg-white/10 border border-black/10 rounded-md dark:border-white/15 focus:border-blue-500/50 focus:ring-blue-500/40"
+      @change="emitItemsPerPage($event)"
+    >
+      <template :for="option in itemsPerPageOptions()">
+        <option :value="option">{{ option }}</option>
+      </template>
+    </select>
+  </label>
 </div>

package/resources/components/Dashboard/UI/Input.stx

@@ -1,77 +1,100 @@
-<script server>
-interface InputProps {
-  value?: string
-  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
-  placeholder?: string
-  disabled?: boolean
-  readonly?: boolean
-  required?: boolean
-  error?: string
-  hint?: string
-  label?: string
-  id?: string
-  size?: 'xs' | 'sm' | 'md' | 'lg'
-  name?: string
-  fullWidth?: boolean
-}
+<script client>
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local'
+type InputSize = 'xs' | 'sm' | 'md' | 'lg'
 
-const { value = '', type = 'text', placeholder = '', disabled = false, readonly = false, required = false, error = '', hint = '', label = '', id = '', size = 'md', name = '', fullWidth = true } = defineProps<InputProps>()
+const liveValue = useReactiveProp('value', '')
+const liveType = useReactiveProp('type', 'text' as InputType)
+const livePlaceholder = useReactiveProp('placeholder', '')
+const liveDisabled = useReactiveProp('disabled', false)
+const liveReadonly = useReactiveProp('readonly', false)
+const liveRequired = useReactiveProp('required', false)
+const liveError = useReactiveProp('error', '')
+const liveHint = useReactiveProp('hint', '')
+const liveLabel = useReactiveProp('label', '')
+const liveAriaLabel = useReactiveProp('ariaLabel', '')
+const liveAutocomplete = useReactiveProp('autocomplete', '')
+const liveId = useReactiveProp('id', '')
+const liveSize = useReactiveProp('size', 'md' as InputSize)
+const liveName = useReactiveProp('name', '')
+const liveFullWidth = useReactiveProp('fullWidth', true)
+const emit = defineEmits()
+const generatedId = useId('input')
 
-const sizeClasses = {
-    xs: 'px-2 py-1 text-[11px] h-6',
-    sm: 'px-2.5 py-1 text-[12px] h-7',
-    md: 'px-3 py-1.5 text-[13px] h-8',
-    lg: 'px-3.5 py-2 text-[14px] h-9'
-  }
+const sizeClasses: Record<InputSize, string> = {
+  xs: 'px-2 py-1 text-[11px] h-6',
+  sm: 'px-2.5 py-1 text-[12px] h-7',
+  md: 'px-3 py-1.5 text-[13px] h-8',
+  lg: 'px-3.5 py-2 text-[14px] h-9',
+}
 
-  const borderClass = error
+const inputId = derived(() => liveId() || generatedId)
+const inputClass = derived(() => [
+  'block w-full',
+  'bg-white dark:bg-white/10',
+  'border rounded-lg',
+  'text-stone-900 dark:text-neutral-100',
+  'placeholder:text-stone-400 dark:placeholder:text-neutral-500',
+  'transition-all duration-150',
+  'focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:ring-offset-0',
+  sizeClasses[liveSize()] || sizeClasses.md,
+  liveError()
     ? 'border-red-400/60 dark:border-red-500/60 focus:border-red-500 focus:ring-red-500/30'
-    : 'border-stone-200/80 dark:border-white/15 focus:border-blue-400 hover:border-stone-300 dark:hover:border-white/25'
+    : 'border-stone-200/80 dark:border-white/15 focus:border-blue-400 hover:border-stone-300 dark:hover:border-white/25',
+  liveDisabled() ? 'opacity-40 cursor-not-allowed bg-stone-50 dark:bg-white/5' : '',
+].join(' '))
+
+function inputValue(event: Event): string {
+  return (event.target as HTMLInputElement).value
+}
 
-  const disabledClass = disabled ? 'opacity-40 cursor-not-allowed bg-stone-50 dark:bg-white/5' : ''
+function handleInput(event: Event): void {
+  const nextValue = inputValue(event)
+  emit('update:value', nextValue)
+  emit('input', nextValue)
+}
 
-  const inputClass = [
-    'block w-full',
-    'bg-white dark:bg-white/10',
-    'border rounded-lg',
-    'text-stone-900 dark:text-neutral-100',
-    'placeholder:text-stone-400 dark:placeholder:text-neutral-500',
-    'transition-all duration-150',
-    'focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:ring-offset-0',
-    sizeClasses[size],
-    borderClass,
-    disabledClass
-  ].join(' ')
+function handleChange(event: Event): void {
+  emit('change', inputValue(event))
+}
 
-  const inputId = id || 'input-' + Math.random().toString(36).slice(2, 11)
+function handleBlur(event: Event): void {
+  emit('blur', inputValue(event))
+}
 </script>
-<div class="{{ fullWidth ? 'w-full' : '' }}">
-  @if(label)
-    <label for="{{ inputId }}" class="block text-[13px] font-medium mb-1.5 tracking-tight {{ error ? 'text-red-600 dark:text-red-400' : 'text-stone-600 dark:text-neutral-400' }}">
-      {{ label }}
-      @if(required)
-        <span class="ml-0.5 text-red-500">*</span>
-      @endif
+
+<div :class="liveFullWidth() ? 'w-full' : ''">
+  <template :if="liveLabel()">
+    <label :for="inputId()" class="block mb-1.5 font-medium text-[13px] tracking-tight" :class="liveError() ? 'text-red-600 dark:text-red-400' : 'text-stone-600 dark:text-neutral-400'">
+      <span :text="liveLabel()"></span>
+      <span :if="liveRequired()" class="ml-0.5 text-red-500">*</span>
     </label>
-  @endif
+  </template>
 
   <div class="relative">
+    @if($slots.iconLeft)
+      <div class="flex absolute inset-y-0 left-0 items-center pl-2.5 text-neutral-400 pointer-events-none">
+        <slot name="iconLeft" />
+      </div>
+    @endif
     <input
-      id="{{ inputId }}"
-      type="{{ type }}"
-      value="{{ value }}"
-      placeholder="{{ placeholder }}"
-      name="{{ name }}"
-      class="{{ inputClass }}"
-      @if(disabled) disabled @endif
-      @if(readonly) readonly @endif
-      @if(required) required @endif
+      :id="inputId()"
+      :type="liveType()"
+      x-model="liveValue"
+      :placeholder="livePlaceholder()"
+      :aria-label="liveAriaLabel() || liveLabel() || null"
+      :autocomplete="liveAutocomplete() || null"
+      :name="liveName() || null"
+      class="{{ $slots.iconLeft ? 'pl-8' : '' }}"
+      :class="inputClass()"
+      @input="handleInput"
+      @change="handleChange"
+      @blur="handleBlur"
+      :disabled="liveDisabled()"
+      :readonly="liveReadonly()"
+      :required="liveRequired()"
     >
   </div>
 
-  @if(error)
-    <p class="mt-1.5 text-red-600 text-sm dark:text-red-400">{{ error }}</p>
-  @elseif(hint)
-    <p class="mt-1.5 text-sm text-stone-500 dark:text-neutral-400">{{ hint }}</p>
-  @endif
+  <p :if="liveError()" class="mt-1.5 text-red-600 text-sm dark:text-red-400" :text="liveError()"></p>
+  <p :if="!liveError() && liveHint()" class="mt-1.5 text-sm text-stone-500 dark:text-neutral-400" :text="liveHint()"></p>
 </div>

package/resources/components/Dashboard/UI/Modal.stx

@@ -17,38 +17,51 @@ const sizeClasses = {
   full: 'max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]'
 }
 </script>
-@if(isOpen)
-  <div ref="pageRoot" class="fixed inset-0 overflow-y-auto z-50">
+<script client>
+const open = useReactiveProp('isOpen', false)
+const liveTitle = useReactiveProp('title', '')
+const liveDescription = useReactiveProp('description', '')
+const emit = defineEmits()
+
+function closeModal(): void {
+  emit('close')
+}
+</script>
+  <div :if="open()" class="fixed inset-y-0 overflow-y-auto right-0 z-[55] dashboard-modal-layer">
     <!-- Overlay -->
-    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" data-modal-overlay></div>
+    <button type="button" class="absolute inset-0 w-full bg-black/50 backdrop-blur-sm" aria-label="Close modal" @click="closeModal"></button>
 
     <!-- Modal container -->
     <div class="flex items-center justify-center p-4 min-h-full">
-      <div class="relative w-full rounded-xl bg-white dark:bg-neutral-900 shadow-2xl {{ sizeClasses[size] }}">
+      <div
+        role="dialog"
+        aria-modal="true"
+        :aria-label="liveTitle() || 'Dialog'"
+        tabindex="-1"
+        class="relative w-full rounded-xl bg-white dark:bg-neutral-900 shadow-2xl {{ sizeClasses[size] }}"
+      >
         <!-- Header -->
         @if(title || closable)
           <div class="flex gap-4 items-start justify-between p-6 border-b border-neutral-200 dark:border-neutral-700">
             <div class="min-w-0">
-              @if(title)
-                <h3 class="font-semibold text-lg text-neutral-900 dark:text-white">
-                  {{ title }}
+                <h3 :if="liveTitle()" class="font-semibold text-lg text-neutral-900 dark:text-white">
+                  {{ liveTitle() }}
                 </h3>
-              @endif
-              @if(description)
-                <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
-                  {{ description }}
+                <p :if="liveDescription()" class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
+                  {{ liveDescription() }}
                 </p>
-              @endif
             </div>
 
             @if(closable)
-              <button
-                type="button"
-                class="-m-2 p-2 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
-                data-modal-close
+              <Button
+                variant="ghost"
+                size="sm"
+                iconOnly
+                ariaLabel="Close modal"
+                @click="closeModal"
               >
                 <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
-              </button>
+              </Button>
             @endif
           </div>
         @endif
@@ -57,19 +70,12 @@ const sizeClasses = {
         <div class="p-6">
           <slot />
         </div>
+
+        @if($slots.footer)
+          <div class="flex items-center justify-end px-6 py-4 border-neutral-200 border-t dark:border-neutral-700">
+            <slot name="footer" />
+          </div>
+        @endif
       </div>
     </div>
   </div>
-  @endif
-<script client>
-var _root = useRef('pageRoot')
-onMount(function() {
-  var el = _root.current;
-  if (!el) return;
-  el.querySelectorAll('[data-modal-overlay], [data-modal-close]').forEach(item => {
-    item.addEventListener('click', () => {
-      item.closest('.fixed.inset-0')?.remove();
-    });
-  });
-});
-</script>