@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,31 @@
+<script server>
+interface QuickLinksProps {
+  title?: string
+  links?: any[]
+}
+
+const { title = 'Quick Links', links = [] } = defineProps<QuickLinksProps>()
+</script>
+<div class="bg-white dark:bg-neutral-800/90 border border-black/5 rounded-xl dark:border-white/5">
+  <div class="p-5 border-b border-neutral-200/60 dark:border-white/5">
+    <h3 class="font-semibold text-[14px] text-neutral-900 tracking-tight dark:text-white">{{ title }}</h3>
+  </div>
+  <div class="divide-neutral-100 divide-y dark:divide-white/5">
+    @foreach(links as link)
+      <a href="{{ link.href || '#' }}" class="flex gap-3.5 items-center px-5 py-3.5 hover:bg-neutral-50 dark:hover:bg-white/5 transition-colors group">
+        <div class="flex flex-shrink-0 items-center justify-center h-9 w-9 bg-neutral-100 dark:bg-white/10 rounded-lg">
+          @if(link.icon)
+            <div class="{{ link.icon }} w-4.5 h-4.5 text-neutral-500 dark:text-neutral-400"></div>
+          @else
+            <span class="font-semibold text-[13px] text-neutral-500 dark:text-neutral-400">{{ link.title.charAt(0) }}</span>
+          @endif
+        </div>
+        <div class="flex-1 min-w-0">
+          <div class="font-medium text-[13px] text-neutral-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{{ link.title }}</div>
+          <div class="text-[12px] text-neutral-500 truncate dark:text-neutral-400">{{ link.description }}</div>
+        </div>
+        <div class="flex-shrink-0 h-4 w-4 text-neutral-300 dark:text-neutral-600 group-hover:text-neutral-400 dark:group-hover:text-neutral-500 transition-colors i-hugeicons-arrow-right-01"></div>
+      </a>
+    @endforeach
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+<script server>
+/**
+ * RouterLink — bridge component for templates that use Vue Router-style
+ * `<RouterLink to="…">` syntax. The dashboard is server-rendered MPA, so
+ * there's no actual client router; this just maps the `to` prop to a
+ * standard `href` and forwards the rest. Keeps existing pages from
+ * breaking with `[Error loading component: 'router-link']` while we
+ * migrate them off the syntax.
+ *
+ * `replace` is accepted for parity with Vue's RouterLink; it has no
+ * effect under MPA navigation but makes drop-in usage error-free.
+ */
+interface RouterLinkProps {
+  to?: string
+  href?: string
+  replace?: boolean
+  target?: string
+  rel?: string
+}
+
+const { to = '', href = '', target = '', rel = '' } = defineProps<RouterLinkProps>()
+const finalHref = href || to
+const finalRel = rel || (target === '_blank' ? 'noopener' : '')
+</script>
+<a
+  href="{{ finalHref }}"
+  @if(target) target="{{ target }}" @endif
+  @if(finalRel) rel="{{ finalRel }}" @endif
+>
+  <slot />
+</a>

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

@@ -0,0 +1,84 @@
+<script server>
+interface SelectProps {
+  value?: string
+  options?: any[]
+  placeholder?: string
+  label?: string
+  error?: string
+  hint?: string
+  disabled?: boolean
+  required?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  name?: string
+  id?: string
+}
+
+const { value = '', options = [], placeholder = 'Select an option', label = '', error = '', hint = '', disabled = false, required = false, size = 'md', name = '', id = '' } = defineProps<SelectProps>()
+
+const sizeClasses = {
+  xs: 'h-6 text-[11px] px-2',
+  sm: 'h-7 text-[12px] px-2.5',
+  md: 'h-8 text-[13px] px-3',
+  lg: 'h-9 text-[14px] px-3.5'
+}
+
+const borderClass = error
+  ? 'border-red-400/60 dark:border-red-500/60 focus:ring-red-500/30 focus:border-red-500'
+  : 'border-black/10 dark:border-white/15 focus:ring-blue-500/40 focus:border-blue-500/50 hover:border-black/20 dark:hover:border-white/25'
+
+const disabledClass = disabled
+  ? 'bg-black/5 dark:bg-white/5 text-neutral-400 cursor-not-allowed border-black/5 dark:border-white/10 opacity-40'
+  : 'bg-white dark:bg-white/10'
+
+const selectClass = [
+  'w-full flex items-center justify-between gap-2 rounded-md border transition-all duration-150',
+  'focus:outline-none focus:ring-2',
+  sizeClasses[size],
+  borderClass,
+  disabledClass
+].join(' ')
+
+const selectId = id || 'select-' + Math.random().toString(36).slice(2, 11)
+</script>
+<div class="relative">
+    @if(label)
+      <label for="{{ selectId }}" class="block mb-1.5 font-medium text-[13px] text-neutral-600 tracking-tight dark:text-neutral-400">
+        {{ label }}
+        @if(required)
+          <span class="text-red-500">*</span>
+        @endif
+      </label>
+    @endif
+
+    <div class="relative">
+      <select
+        id="{{ selectId }}"
+        name="{{ name }}"
+        class="{{ selectClass }} appearance-none pr-8"
+        @if(disabled) disabled @endif
+        @if(required) required @endif
+      >
+        @if(placeholder)
+          <option value="" disabled @if(!value) selected @endif>{{ placeholder }}</option>
+        @endif
+        @foreach(options as option)
+          <option
+            value="{{ typeof option === 'object' && option !== null ? (option.value ?? option.id ?? option.label ?? '') : option }}"
+            @if(option && option.disabled) disabled @endif
+            @if((typeof option === 'object' && option !== null ? option.value : option) == value) selected @endif
+          >
+            {{ typeof option === 'object' && option !== null ? (option.label ?? option.text ?? option.value ?? '') : option }}
+          </option>
+        @endforeach
+      </select>
+      <div class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+        <div class="h-3.5 w-3.5 text-neutral-400 i-hugeicons-arrow-down-01"></div>
+      </div>
+    </div>
+
+    @if(error)
+      <p class="mt-1.5 text-[12px] text-red-600 dark:text-red-400">{{ error }}</p>
+    @elseif(hint)
+      <p class="mt-1.5 text-[12px] text-neutral-500 dark:text-neutral-400">{{ hint }}</p>
+    @endif
+  </div>

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

@@ -0,0 +1,38 @@
+<script server>
+interface ServiceHealthProps {
+  services?: any[]
+}
+
+const { services = [] } = defineProps<ServiceHealthProps>()
+
+const allHealthy = services.every(s => s.status === 'healthy')
+</script>
+<div class="bg-white dark:bg-neutral-800/90 border border-black/5 rounded-xl dark:border-white/5">
+  <div class="flex items-center justify-between p-5 border-b border-neutral-200/60 dark:border-white/5">
+    <h3 class="font-semibold text-[14px] text-neutral-900 tracking-tight dark:text-white">System Health</h3>
+    @if(allHealthy)
+      <Badge variant="success" size="xs" dot>All Systems Operational</Badge>
+    @else
+      <Badge variant="warning" size="xs" dot>Degraded</Badge>
+    @endif
+  </div>
+  <div class="divide-neutral-100 divide-y dark:divide-white/5">
+    @foreach(services as service)
+      <div class="flex items-center justify-between px-5 py-3">
+        <div>
+          <div class="font-medium text-[13px] text-neutral-900 dark:text-white">{{ service.name }}</div>
+          @if(service.latency)
+            <div class="text-[12px] text-neutral-500 dark:text-neutral-400">{{ service.latency }}</div>
+          @endif
+        </div>
+        <Badge
+          variant="{{ service.status === 'healthy' ? 'success' : service.status === 'offline' ? 'danger' : 'warning' }}"
+          size="xs"
+          dot
+        >
+          {{ service.status }}
+        </Badge>
+      </div>
+    @endforeach
+  </div>
+</div>

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

@@ -0,0 +1,79 @@
+<script server>
+interface StatsCardProps {
+  title?: string
+  value?: string
+  subtitle?: string
+  trendLabel?: string
+  icon?: string
+  iconBg?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'
+  loading?: boolean
+  trend?: any
+}
+
+const { title = '', value = '', subtitle = '', trendLabel = '', icon = '', iconBg = 'primary', loading = false, trend = null } = defineProps<StatsCardProps>()
+
+const iconBgClasses = {
+  primary: 'bg-blue-500/15 text-blue-600 dark:bg-blue-400/20 dark:text-blue-400',
+  success: 'bg-green-500/15 text-green-600 dark:bg-green-400/20 dark:text-green-400',
+  warning: 'bg-orange-500/15 text-orange-600 dark:bg-orange-400/20 dark:text-orange-400',
+  danger: 'bg-red-500/15 text-red-600 dark:bg-red-400/20 dark:text-red-400',
+  info: 'bg-cyan-500/15 text-cyan-600 dark:bg-cyan-400/20 dark:text-cyan-400',
+  neutral: 'bg-black/[0.06] text-neutral-600 dark:bg-white/10 dark:text-neutral-400'
+}
+
+const trendDirection = trend === null || trend === 0 ? 'neutral' : (trend > 0 ? 'up' : 'down')
+
+const trendClasses = {
+  up: 'text-green-500 dark:text-green-400',
+  down: 'text-red-500 dark:text-red-400',
+  neutral: 'text-neutral-500 dark:text-neutral-400'
+}
+</script>
+<div class="p-5 bg-white dark:bg-neutral-800/90 border border-black/5 rounded-xl dark:border-white/5 hover:shadow-black/5 hover:shadow-md dark:hover:shadow-black/20 duration-150 transition-all">
+    <div class="flex items-start justify-between">
+      <div class="flex-1 min-w-0">
+        <p class="font-medium text-[13px] text-neutral-500 tracking-tight truncate dark:text-neutral-400">
+          {{ title }}
+        </p>
+
+        <div class="flex gap-2 items-baseline mt-1.5">
+          @if(loading)
+            <div class="h-7 w-20 bg-black/5 dark:bg-white/10 rounded-md animate-pulse"></div>
+          @else
+            <p class="font-semibold text-[22px] text-neutral-900 tracking-tight dark:text-white">
+              {{ value }}
+            </p>
+
+            @if(trend !== null)
+              <span class="inline-flex items-center text-[12px] font-medium {{ trendClasses[trendDirection] }}">
+                @if(trendDirection == 'up')
+                  <svg class="mr-0.5 h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 15l7-7 7 7"></path>
+                  </svg>
+                @elseif(trendDirection == 'down')
+                  <svg class="mr-0.5 h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"></path>
+                  </svg>
+                @endif
+                {{ Math.abs(trend) }}%
+              </span>
+            @endif
+          @endif
+        </div>
+
+        @if(subtitle || trendLabel)
+          <p class="mt-1 text-[12px] text-neutral-500 dark:text-neutral-400">
+            {{ trendLabel || subtitle }}
+          </p>
+        @endif
+      </div>
+
+      @if(icon)
+        <div class="p-2.5 rounded-lg flex-shrink-0 {{ iconBgClasses[iconBg] }}">
+          <div class="{{ icon }} h-5 w-5"></div>
+        </div>
+      @endif
+    </div>
+
+    <slot />
+  </div>

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

@@ -0,0 +1,143 @@
+<script server>
+interface TableProps {
+  columns?: any[]
+  data?: any[]
+  loading?: boolean
+  selectable?: boolean
+  striped?: boolean
+  bordered?: boolean
+  compact?: boolean
+  stickyHeader?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
+  rowKey?: string
+  hoverable?: boolean
+}
+
+const { columns = [], data = [], loading = false, selectable = false, striped = false, bordered = false, compact = false, stickyHeader = false, emptyTitle = 'No data', emptyDescription = 'There are no items to display.', rowKey = 'id', hoverable = true } = defineProps<TableProps>()
+
+function getAlignClass(align) {
+    switch (align) {
+      case 'center': return 'text-center'
+      case 'right': return 'text-right'
+      default: return 'text-left'
+    }
+  }
+</script>
+<div class="overflow-hidden relative bg-white dark:bg-neutral-900 border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
+  <!-- Loading overlay -->
+  @if(loading)
+    <div class="flex absolute inset-0 z-10 items-center justify-center bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm">
+      <div class="flex gap-2 items-center text-neutral-500 dark:text-neutral-400">
+        <div class="h-5 w-5 animate-spin i-hugeicons-loading-03"></div>
+        <span class="text-sm">Loading...</span>
+      </div>
+    </div>
+  @endif
+
+  <div class="overflow-x-auto">
+    <table class="w-full">
+      <!-- Header -->
+      <thead class="bg-stone-50/80 dark:bg-neutral-800/50 {{ stickyHeader ? 'sticky top-0 z-10' : '' }}">
+        <tr>
+          <!-- Selection checkbox column -->
+          @if(selectable)
+            <th class="pl-6 pr-2 py-3 w-12">
+              <div class="flex items-center justify-center">
+                <input
+                  type="checkbox"
+                  class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-stone-300 rounded dark:border-neutral-600 focus:ring-blue-500"
+                  data-select-all
+                >
+              </div>
+            </th>
+          @endif
+
+          <!-- Data columns -->
+          @foreach(columns as column, index)
+            <th
+              class="{{ index === 0 && !selectable ? 'pl-6' : 'pl-4' }} pr-4 text-xs font-semibold uppercase tracking-wider text-stone-500 dark:text-neutral-400 {{ compact ? 'py-2' : 'py-3.5' }} {{ getAlignClass(column.align) }} {{ column.sortable ? 'cursor-pointer select-none hover:text-stone-700 dark:hover:text-neutral-200' : '' }} {{ column.class || '' }}"
+              @if(column.width) style="width: {{ column.width }}" @endif
+              data-column="{{ column.key }}"
+            >
+              <div class="inline-flex gap-1.5 items-center">
+                <span>{{ column.label }}</span>
+                @if(column.sortable)
+                  <div class="h-3.5 w-3.5 opacity-30 i-hugeicons-arrow-up-down-01"></div>
+                @endif
+              </div>
+            </th>
+          @endforeach
+
+          <!-- Actions column slot -->
+          @if($slots.actions)
+            <th class="px-4 py-3 w-12"></th>
+          @endif
+        </tr>
+      </thead>
+
+      <!-- Body -->
+      <tbody class="{{ striped ? 'divide-y-0' : 'divide-y divide-stone-100 dark:divide-neutral-700' }}">
+        @foreach(data as row, rowIndex)
+          <tr
+            class="{{ hoverable ? 'hover:bg-stone-50/50 dark:hover:bg-neutral-800/50' : '' }} {{ striped && rowIndex % 2 == 1 ? 'bg-stone-50/30 dark:bg-neutral-800/25' : '' }} transition-colors"
+            data-row-id="{{ row[rowKey] }}"
+          >
+            <!-- Selection checkbox -->
+            @if(selectable)
+              <td class="w-12 pl-6 pr-2 {{ compact ? 'py-2' : 'py-3.5' }}">
+                <div class="flex items-center justify-center">
+                  <input
+                    type="checkbox"
+                    class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-stone-300 rounded dark:border-neutral-600 focus:ring-blue-500"
+                    data-row-select
+                  >
+                </div>
+              </td>
+            @endif
+
+            <!-- Data cells -->
+            @foreach(columns as column, colIndex)
+              <td class="{{ colIndex === 0 && !selectable ? 'pl-6' : 'pl-4' }} pr-4 text-sm text-stone-700 dark:text-neutral-200 {{ compact ? 'py-2' : 'py-3.5' }} {{ getAlignClass(column.align) }} {{ column.class || '' }}">
+                {{ row[column.key] }}
+              </td>
+            @endforeach
+
+            <!-- Actions cell -->
+            @if($slots.actions)
+              <td class="w-12 px-4 {{ compact ? 'py-2' : 'py-3' }}">
+                <slot name="actions" />
+              </td>
+            @endif
+          </tr>
+        @endforeach
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Empty state -->
+  @if(data.length == 0 && !loading)
+    <div class="flex flex-col items-center justify-center px-4 py-12">
+      @if($slots.empty)
+        <slot name="empty" />
+      @else
+        <div class="mb-3 p-3 bg-neutral-100 dark:bg-neutral-800 rounded-full">
+          <div class="h-6 w-6 text-neutral-400 i-hugeicons-inbox-01"></div>
+        </div>
+        <p class="font-medium text-neutral-700 text-sm dark:text-neutral-200">
+          {{ emptyTitle }}
+        </p>
+        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
+          {{ emptyDescription }}
+        </p>
+      @endif
+    </div>
+  @endif
+
+  <!-- Footer slot -->
+  @if($slots.footer)
+    <div class="px-4 py-3 bg-neutral-50/50 dark:bg-neutral-800/25 border-neutral-200 border-t dark:border-neutral-700">
+      <slot name="footer" />
+    </div>
+  @endif
+</div>

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

@@ -0,0 +1,45 @@
+<script server>
+interface TabsProps {
+  tabs?: any[]
+  activeTab?: string
+  variant?: 'underline' | 'pills' | 'boxed'
+  size?: 'sm' | 'md' | 'lg'
+  fullWidth?: boolean
+}
+
+const { tabs = [], activeTab = '', variant = 'underline', size = 'md', fullWidth = false } = defineProps<TabsProps>()
+
+const sizeClasses = {
+  sm: 'text-sm py-2 px-3',
+  md: 'text-sm py-2.5 px-4',
+  lg: 'text-base py-3 px-5'
+}
+
+const containerClasses = {
+  underline: 'border-b border-neutral-200 dark:border-neutral-700',
+  pills: 'gap-2 bg-neutral-100 dark:bg-neutral-800 p-1 rounded-lg',
+  boxed: 'border border-neutral-200 dark:border-neutral-700 rounded-lg p-1'
+}
+</script>
+<div class="flex {{ fullWidth ? 'w-full' : '' }} {{ containerClasses[variant] }}" role="tablist">
+    @foreach(tabs as tab)
+      <button
+        type="button"
+        role="tab"
+        aria-selected="{{ activeTab == tab.id ? 'true' : 'false' }}"
+        class="inline-flex items-center justify-center gap-2 font-medium transition-all duration-150 {{ sizeClasses[size] }} {{ fullWidth ? 'flex-1' : '' }} {{ tab.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' }} @if(variant == 'underline') -mb-px {{ activeTab == tab.id ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400' : 'border-b-2 border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 dark:text-neutral-400 dark:hover:text-neutral-200' }} @elseif(variant == 'pills') rounded-md {{ activeTab == tab.id ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm' : 'text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200' }} @elseif(variant == 'boxed') rounded-md {{ activeTab == tab.id ? 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white' : 'text-neutral-500 hover:text-neutral-700 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:text-neutral-200 dark:hover:bg-neutral-800/50' }} @endif"
+        data-tab-id="{{ tab.id }}"
+        @if(tab.disabled) disabled @endif
+      >
+        @if(tab.icon)
+          <div class="{{ tab.icon }} w-4 h-4"></div>
+        @endif
+        <span>{{ tab.label }}</span>
+        @if(tab.badge !== undefined)
+          <span class="inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 text-xs font-medium rounded-full {{ activeTab == tab.id ? 'bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400' : 'bg-neutral-200 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300' }}">
+            {{ tab.badge }}
+          </span>
+        @endif
+      </button>
+    @endforeach
+  </div>

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

@@ -0,0 +1,93 @@
+<script server>
+interface TextareaProps {
+  value?: string
+  label?: string
+  placeholder?: string
+  error?: string
+  hint?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  rows?: number
+  maxLength?: number
+  showCount?: boolean
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+  name?: string
+  id?: string
+}
+
+const { value = '', label = '', placeholder = '', error = '', hint = '', disabled = false, readonly = false, required = false, rows = 3, maxLength = 0, showCount = false, resize = 'vertical', name = '', id = '' } = defineProps<TextareaProps>()
+
+const resizeClasses = {
+  none: 'resize-none',
+  vertical: 'resize-y',
+  horizontal: 'resize-x',
+  both: 'resize'
+}
+
+const borderClass = error
+  ? 'border-red-300 dark:border-red-700 focus:ring-red-500/20 focus:border-red-500'
+  : 'border-neutral-300 dark:border-neutral-600 hover:border-neutral-400 dark:hover:border-neutral-500 focus:ring-blue-500/20 focus:border-blue-500'
+
+const disabledClass = disabled
+  ? 'bg-neutral-100 dark:bg-neutral-800 text-neutral-400 cursor-not-allowed border-neutral-200 dark:border-neutral-700'
+  : 'bg-white dark:bg-neutral-900'
+
+const textareaClass = [
+  'block w-full rounded-lg border transition-all duration-150',
+  'text-sm text-neutral-900 dark:text-white',
+  'placeholder:text-neutral-400 dark:placeholder:text-neutral-500',
+  'focus:outline-none focus:ring-2',
+  'px-3 py-2.5',
+  resizeClasses[resize],
+  borderClass,
+  disabledClass
+].join(' ')
+
+const textareaId = id || 'textarea-' + Math.random().toString(36).slice(2, 11)
+</script>
+<div>
+    @if(label || (showCount && maxLength))
+      <div class="flex items-center justify-between mb-1.5">
+        @if(label)
+          <label for="{{ textareaId }}" class="block font-medium text-neutral-700 text-sm dark:text-neutral-200">
+            {{ label }}
+            @if(required)
+              <span class="text-red-500">*</span>
+            @endif
+          </label>
+        @endif
+        @if(showCount && maxLength)
+          <span class="text-neutral-400 text-xs dark:text-neutral-500">
+            <span data-char-count>{{ value.length || 0 }}</span>/{{ maxLength }}
+          </span>
+        @endif
+      </div>
+    @endif
+
+    <div class="relative">
+      <textarea
+        id="{{ textareaId }}"
+        name="{{ name }}"
+        rows="{{ rows }}"
+        placeholder="{{ placeholder }}"
+        class="{{ textareaClass }}"
+        @if(disabled) disabled @endif
+        @if(readonly) readonly @endif
+        @if(required) required @endif
+        @if(maxLength) maxlength="{{ maxLength }}" @endif
+      >{{ value }}</textarea>
+
+      @if(showCount && !maxLength)
+        <span class="absolute bottom-2 right-2 px-1 text-neutral-400 text-xs dark:text-neutral-500 bg-white dark:bg-neutral-900">
+          <span data-char-count>{{ value.length || 0 }}</span> characters
+        </span>
+      @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-neutral-500 text-sm dark:text-neutral-400">{{ hint }}</p>
+    @endif
+  </div>

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

@@ -0,0 +1,84 @@
+<script server>
+interface ToggleProps {
+  checked?: boolean
+  label?: string
+  description?: string
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  labelPosition?: 'left' | 'right'
+  name?: string
+  id?: string
+}
+
+const { checked = false, label = '', description = '', disabled = false, size = 'md', labelPosition = 'right', name = '', id = '' } = defineProps<ToggleProps>()
+
+const trackSizes = {
+  sm: 'h-4 w-7',
+  md: 'h-5 w-9',
+  lg: 'h-6 w-11'
+}
+
+const thumbSizes = {
+  sm: 'h-3 w-3',
+  md: 'h-4 w-4',
+  lg: 'h-5 w-5'
+}
+
+const translateSizes = {
+  sm: 'translate-x-3',
+  md: 'translate-x-4',
+  lg: 'translate-x-5'
+}
+
+const toggleId = id || 'toggle-' + Math.random().toString(36).slice(2, 11)
+</script>
+<div class="flex items-center gap-3 {{ labelPosition === 'left' ? 'flex-row-reverse justify-end' : '' }} {{ disabled ? 'opacity-60 cursor-not-allowed' : '' }}">
+    <input
+      type="checkbox"
+      id="{{ toggleId }}"
+      name="{{ name }}"
+      class="sr-only peer"
+      @if(checked) checked @endif
+      @if(disabled) disabled @endif
+    >
+    <label
+      for="{{ toggleId }}"
+      class="relative inline-flex shrink-0 rounded-full transition-all duration-150 focus-within:ring-2 focus-within:ring-blue-500/40 {{ trackSizes[size] }} {{ disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer' }} peer-checked:bg-green-500 bg-black/15 dark:bg-white/20"
+    >
+      <span
+        class="pointer-events-none inline-block rounded-full bg-white shadow-sm ring-0 transition-transform duration-150 ease-in-out {{ thumbSizes[size] }} peer-checked:{{ translateSizes[size] }} translate-x-0.5"
+      ></span>
+    </label>
+
+    @if(label || description)
+      <div class="flex-1 min-w-0">
+        @if(label)
+          <label
+            for="{{ toggleId }}"
+            class="text-[13px] font-medium tracking-tight {{ disabled ? 'text-neutral-400 dark:text-neutral-600' : 'text-neutral-700 dark:text-neutral-200' }} {{ disabled ? '' : 'cursor-pointer' }}"
+          >
+            {{ label }}
+          </label>
+        @endif
+        @if(description)
+          <p class="text-[12px] mt-0.5 {{ disabled ? 'text-neutral-300 dark:text-neutral-600' : 'text-neutral-500 dark:text-neutral-400' }}">
+            {{ description }}
+          </p>
+        @endif
+      </div>
+    @endif
+  </div>
+<style>
+input:checked + label {
+  background-color: rgb(34 197 94);
+}
+input:checked + label span {
+  transform: translateX(1rem);
+}
+input:checked + label span[class*="sm"] {
+  transform: translateX(0.75rem);
+}
+input:checked + label span[class*="lg"] {
+  transform: translateX(1.25rem);
+}
+</style>