@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,72 @@
+<script server>
+interface DropdownProps {
+  align?: 'left' | 'right'
+  width?: 'auto' | 'sm' | 'md' | 'lg' | 'full'
+  disabled?: boolean
+  id?: string
+}
+
+const { align = 'left', width = 'auto', disabled = false, id = 'dropdown-' + Math.random().toString(36).slice(2, 11) } = defineProps<DropdownProps>()
+
+const widthClasses = {
+  auto: 'min-w-[12rem]',
+  sm: 'w-48',
+  md: 'w-56',
+  lg: 'w-64',
+  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
+
+  const trigger = dropdown.querySelector('[data-dropdown-trigger]')
+  const menu = dropdown.querySelector('[data-dropdown-menu]')
+  let isOpen = false
+
+  function toggle() {
+    if ({{ disabled ? 'true' : 'false' }}) return
+    isOpen = !isOpen
+    menu.classList.toggle('hidden', !isOpen)
+  }
+
+  function close() {
+    isOpen = false
+    menu.classList.add('hidden')
+  }
+
+  trigger?.addEventListener('click', toggle)
+
+  document.body.addEventListener('click', function(e) {
+    if (isOpen && !dropdown.contains(e.target)) {
+      close()
+    }
+  })
+
+  document.body.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape' && isOpen) {
+      close()
+    }
+  })
+})
+</script>

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

@@ -0,0 +1,80 @@
+<script server>
+interface DropdownItemProps {
+  href?: string
+  disabled?: boolean
+  danger?: boolean
+  active?: boolean
+}
+
+const { href = '', disabled = false, danger = false, active = false } = defineProps<DropdownItemProps>()
+
+function getClasses() {
+  const base = [
+    'w-[calc(100%-8px)] mx-1 text-left px-2.5 py-1.5 text-[13px]',
+    'flex items-center gap-2.5',
+    'transition-colors duration-100',
+    'focus:outline-none',
+    'rounded-md',
+  ]
+
+  if (disabled) {
+    base.push('opacity-40 cursor-not-allowed')
+  } else if (danger) {
+    base.push(
+      'text-red-600 dark:text-red-400',
+      'hover:bg-red-500 hover:text-white',
+      'focus:bg-red-500 focus:text-white',
+    )
+  } else if (active) {
+    base.push('bg-blue-500 text-white')
+  } else {
+    base.push(
+      'text-neutral-700 dark:text-neutral-200',
+      'hover:bg-black/5 dark:hover:bg-white/10',
+      'focus:bg-black/5 dark:focus:bg-white/10',
+    )
+  }
+
+  return base.join(' ')
+}
+
+const classes = getClasses()
+</script>
+@if(href)
+    <a
+      href="{{ href }}"
+      class="{{ classes }}"
+    >
+      <!-- Leading icon slot -->
+      <span class="flex items-center justify-center h-4 w-4 text-current opacity-70">
+        {{ iconSlot }}
+      </span>
+
+      <!-- Content -->
+      <span class="flex-1 truncate">
+        <slot />
+      </span>
+
+      <!-- Trailing content slot (for shortcuts, badges, etc.) -->
+      {{ trailingSlot }}
+    </a>
+  @else
+    <button
+      type="button"
+      class="{{ classes }}"
+      @if(disabled) disabled @endif
+    >
+      <!-- Leading icon slot -->
+      <span class="flex items-center justify-center h-4 w-4 text-current opacity-70">
+        {{ iconSlot }}
+      </span>
+
+      <!-- Content -->
+      <span class="flex-1 truncate">
+        <slot />
+      </span>
+
+      <!-- Trailing content slot (for shortcuts, badges, etc.) -->
+      {{ trailingSlot }}
+    </button>
+  @endif

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

@@ -0,0 +1,50 @@
+<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>
+<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>
+
+    <!-- Title -->
+    <h3 class="mb-1 font-medium text-lg text-neutral-900 dark:text-white">
+      {{ title }}
+    </h3>
+
+    <!-- Description -->
+    @if(description)
+      <p class="mb-6 max-w-sm text-neutral-500 text-sm dark:text-neutral-400">
+        {{ description }}
+      </p>
+    @endif
+
+    <!-- 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
+
+    <!-- Custom action slot -->
+    {{ actionSlot }}
+  </div>

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

@@ -0,0 +1,48 @@
+<script server>
+interface FilterBarProps {
+  searchPlaceholder?: string
+  searchValue?: string
+  itemsPerPage?: number
+  itemsPerPageOptions?: string
+  showItemsPerPage?: boolean
+}
+
+const { searchPlaceholder = 'Search...', searchValue = '', itemsPerPage = 10, itemsPerPageOptions = [10, 25, 50, 100], showItemsPerPage = true } = defineProps<FilterBarProps>()
+</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>
+    <input
+      type="search"
+      value="{{ searchValue }}"
+      placeholder="{{ 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
+    >
+  </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
+</div>

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

@@ -0,0 +1,77 @@
+<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
+}
+
+const { value = '', type = 'text', placeholder = '', disabled = false, readonly = false, required = false, error = '', hint = '', label = '', id = '', size = 'md', name = '', fullWidth = true } = defineProps<InputProps>()
+
+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 borderClass = error
+    ? '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'
+
+  const disabledClass = disabled ? 'opacity-40 cursor-not-allowed bg-stone-50 dark:bg-white/5' : ''
+
+  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(' ')
+
+  const inputId = id || 'input-' + Math.random().toString(36).slice(2, 11)
+</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
+    </label>
+  @endif
+
+  <div class="relative">
+    <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
+    >
+  </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
+</div>

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

@@ -0,0 +1,75 @@
+<script server>
+interface ModalProps {
+  isOpen?: boolean
+  title?: string
+  description?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  closable?: boolean
+}
+
+const { isOpen = false, title = '', description = '', size = 'md', closable = true } = defineProps<ModalProps>()
+
+const sizeClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+  xl: 'max-w-4xl',
+  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">
+    <!-- Overlay -->
+    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" data-modal-overlay></div>
+
+    <!-- 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] }}">
+        <!-- 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>
+              @endif
+              @if(description)
+                <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
+                  {{ description }}
+                </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
+              >
+                <div class="h-5 w-5 i-hugeicons-cancel-01"></div>
+              </button>
+            @endif
+          </div>
+        @endif
+
+        <!-- Body -->
+        <div class="p-6">
+          <slot />
+        </div>
+      </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>

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

@@ -0,0 +1,69 @@
+<script server>
+interface PageHeaderProps {
+  title?: string
+  description?: string
+  backLink?: string
+  backLabel?: string
+}
+
+const { title = '', description = '', backLink = '', backLabel = 'Back' } = defineProps<PageHeaderProps>()
+</script>
+<div class="mb-6">
+  <!-- Back link -->
+  @if(backLink)
+    <a
+      href="{{ backLink }}"
+      class="inline-flex gap-1.5 items-center mb-3 text-sm text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 transition-colors"
+    >
+      <div class="h-4 w-4 i-hugeicons-arrow-left-01"></div>
+      <span>{{ backLabel }}</span>
+    </a>
+  @endif
+
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div class="flex-1 min-w-0">
+      <!-- Title row -->
+      <div class="flex gap-3 items-center">
+        <slot name="icon" />
+        <div>
+          <h1 class="font-semibold text-2xl text-stone-900 truncate dark:text-white">
+            {{ title }}
+          </h1>
+          @if(description)
+            <p class="mt-1 text-sm text-stone-500 dark:text-neutral-400">
+              {{ description }}
+            </p>
+          @endif
+        </div>
+      </div>
+
+      <!-- Tags/badges slot -->
+      @if($slots.tags)
+        <div class="flex flex-wrap gap-2 mt-2">
+          <slot name="tags" />
+        </div>
+      @endif
+    </div>
+
+    <!-- Actions -->
+    @if($slots.actions)
+      <div class="flex flex-shrink-0 gap-2 items-center">
+        <slot name="actions" />
+      </div>
+    @endif
+  </div>
+
+  <!-- Tabs slot -->
+  @if($slots.tabs)
+    <div class="mt-4 border-b border-stone-200 dark:border-neutral-700">
+      <slot name="tabs" />
+    </div>
+  @endif
+
+  <!-- Filters slot -->
+  @if($slots.filters)
+    <div class="mt-4">
+      <slot name="filters" />
+    </div>
+  @endif
+</div>

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

@@ -0,0 +1,84 @@
+<script server>
+interface PageLayoutProps {
+  /**
+   * Visual variant.
+   *
+   * - `default` — standard centered column with `mx-auto` + max-width
+   *   gutter. Use for almost every page.
+   * - `centered` — vertically centered hero block on a min-height
+   *   container. Use for splash / 404 / empty-route pages.
+   * - `bare` — no container at all. Use when the page wants to own
+   *   its own gutter (e.g. a settings page with side-by-side panels
+   *   that already pad themselves).
+   */
+  variant?: 'default' | 'centered' | 'bare'
+  maxWidth?: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full'
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+  spacing?: 'none' | 'sm' | 'md' | 'lg'
+  /** Optional min-height utility for the `centered` variant. */
+  minHeight?: 'screen' | '70vh' | '80vh' | '90vh'
+}
+
+const {
+  variant = 'default',
+  maxWidth = '7xl',
+  padding = 'md',
+  spacing = 'md',
+  minHeight = '80vh',
+} = defineProps<PageLayoutProps>()
+
+const widthClasses = {
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  full: 'max-w-full',
+}
+
+const paddingClasses = {
+  none: '',
+  sm: 'px-4 pt-4 pb-8',
+  md: 'px-6 pt-6 pb-12',
+  lg: 'px-8 pt-8 pb-16',
+}
+
+const spacingClasses = {
+  none: '',
+  sm: 'space-y-3',
+  md: 'space-y-6',
+  lg: 'space-y-8',
+}
+
+const minHeightClasses = {
+  'screen': 'min-h-screen',
+  '70vh': 'min-h-[70vh]',
+  '80vh': 'min-h-[80vh]',
+  '90vh': 'min-h-[90vh]',
+}
+
+const widthClass = widthClasses[maxWidth] || widthClasses['7xl']
+const paddingClass = paddingClasses[padding] || paddingClasses.md
+const spacingClass = spacingClasses[spacing] || spacingClasses.md
+const minHeightClass = minHeightClasses[minHeight] || minHeightClasses['80vh']
+
+const defaultClass = ['mx-auto', widthClass, paddingClass, spacingClass].filter(Boolean).join(' ')
+const centeredClass = ['flex items-center justify-center', minHeightClass, paddingClass].filter(Boolean).join(' ')
+</script>
+@if(variant === 'bare')
+  <slot />
+@elseif(variant === 'centered')
+  <div class="{{ centeredClass }}">
+    <div class="mx-auto w-full {{ widthClass }} {{ spacingClass }}">
+      <slot />
+    </div>
+  </div>
+@else
+  <div class="{{ defaultClass }}">
+    <slot />
+  </div>
+@endif

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

@@ -0,0 +1,126 @@
+<script server>
+interface PaginationProps {
+  currentPage?: number
+  totalPages?: number
+  totalItems?: number
+  itemsPerPage?: number
+  showItemsPerPage?: boolean
+  maxVisiblePages?: number
+  itemsPerPageOptions?: string
+  baseUrl?: string
+  showTotalItems?: boolean
+}
+
+const { currentPage = 1, totalPages = 1, totalItems = 0, itemsPerPage = 10, showItemsPerPage = false, maxVisiblePages = 5, itemsPerPageOptions = [10, 25, 50, 100], baseUrl = '', showTotalItems = true } = defineProps<PaginationProps>()
+
+// Calculate visible page numbers
+function getVisiblePages() {
+  const pages = []
+  const total = totalPages
+  const current = currentPage
+  const max = maxVisiblePages
+
+  if (total <= max) {
+    for (let i = 1; i <= total; i++) {
+      pages.push(i)
+    }
+  } else {
+    pages.push(1)
+    let start = Math.max(2, current - Math.floor((max - 3) / 2))
+    let end = Math.min(total - 1, start + max - 4)
+    if (end === total - 1) {
+      start = Math.max(2, end - (max - 4))
+    }
+    if (start > 2) {
+      pages.push('...')
+    }
+    for (let i = start; i <= end; i++) {
+      pages.push(i)
+    }
+    if (end < total - 1) {
+      pages.push('...')
+    }
+    pages.push(total)
+  }
+  return pages
+}
+
+const visiblePages = getVisiblePages()
+
+// Calculate item range
+const itemRangeStart = (currentPage - 1) * itemsPerPage + 1
+const itemRangeEnd = Math.min(currentPage * itemsPerPage, totalItems)
+
+function getPageUrl(page) {
+  return baseUrl ? `${baseUrl}?page=${page}` : `?page=${page}`
+}
+</script>
+<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+    <!-- Left: Items info & per page selector -->
+    <div class="flex gap-4 items-center text-neutral-500 text-sm dark:text-neutral-400">
+      <!-- Items per page -->
+      @if(showItemsPerPage && itemsPerPage)
+        <div class="flex gap-2 items-center">
+          <span>Show</span>
+          <select
+            class="text-neutral-700 text-sm dark:text-neutral-200 bg-white dark:bg-neutral-800 border-neutral-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500"
+            data-items-per-page
+          >
+            @foreach(itemsPerPageOptions as option)
+              <option value="{{ option }}" @if(option == itemsPerPage) selected @endif>
+                {{ option }}
+              </option>
+            @endforeach
+          </select>
+          <span>per page</span>
+        </div>
+      @endif
+
+      <!-- Total items info -->
+      @if(showTotalItems && totalItems > 0)
+        <div>
+          <span class="font-medium text-neutral-700 dark:text-neutral-200">
+            {{ itemRangeStart }}-{{ itemRangeEnd }}
+          </span>
+          of
+          <span class="font-medium text-neutral-700 dark:text-neutral-200">
+            {{ totalItems }}
+          </span>
+          items
+        </div>
+      @endif
+    </div>
+
+    <!-- Right: Page navigation -->
+    <nav class="flex gap-1 items-center" aria-label="Pagination">
+      <!-- Previous button -->
+      <a
+        href="{{ currentPage > 1 ? getPageUrl(currentPage - 1) : '#' }}"
+        class="p-2 rounded-lg text-sm font-medium transition-colors {{ currentPage == 1 ? 'text-neutral-300 dark:text-neutral-600 cursor-not-allowed pointer-events-none' : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800' }}"
+      >
+        <div class="h-5 w-5 i-hugeicons-arrow-left-01"></div>
+      </a>
+
+      <!-- Page numbers -->
+      @foreach(visiblePages as page)
+        @if(page == '...')
+          <span class="px-2 text-neutral-400 dark:text-neutral-500">...</span>
+        @else
+          <a
+            href="{{ getPageUrl(page) }}"
+            class="min-w-[2.25rem] h-9 px-3 rounded-lg text-sm font-medium transition-colors flex items-center justify-center {{ page == currentPage ? 'bg-blue-600 text-white' : 'text-neutral-600 hover:text-neutral-800 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800' }}"
+          >
+            {{ page }}
+          </a>
+        @endif
+      @endforeach
+
+      <!-- Next button -->
+      <a
+        href="{{ currentPage < totalPages ? getPageUrl(currentPage + 1) : '#' }}"
+        class="p-2 rounded-lg text-sm font-medium transition-colors {{ currentPage == totalPages ? 'text-neutral-300 dark:text-neutral-600 cursor-not-allowed pointer-events-none' : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800' }}"
+      >
+        <div class="h-5 w-5 i-hugeicons-arrow-right-01"></div>
+      </a>
+    </nav>
+  </div>