@stacksjs/defaults 0.70.54

package/resources/components/Dashboard/Transaction/index.stx

@@ -0,0 +1,88 @@
+<script>
+interface indexProps {
+  transactionHistory?: any[]
+}
+
+const { transactionHistory = [] } = defineProps<indexProps>()
+
+function formatTimestampDate(timestamp) {
+    if (!timestamp) return ''
+    const date = new Date(timestamp * 1000)
+    return date.toLocaleDateString()
+  }
+
+  function getTransactionType(lineData) {
+    return lineData[0]?.plan?.interval || ''
+  }
+
+  function getUnitPrice(lineData) {
+    return (Number(lineData[0]?.price?.unit_amount || 0) / 100).toFixed(2)
+  }
+
+  function getLastDigits(paymentIntent) {
+    return paymentIntent?.payment_method?.card?.last4 || ''
+  }
+</script>
+<div class="sm:flex sm:items-center">
+  <div class="sm:flex-auto">
+    <h1 class="font-semibold leading-6 text-base text-gray-900">
+      Transaction History
+    </h1>
+    <p class="mt-2 text-gray-700 text-sm">
+      A list with all your Stacks-relating transactions.
+    </p>
+  </div>
+</div>
+
+<div class="flow-root mt-8">
+  <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+    <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+      <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+        <table class="min-w-full divide-gray-300 divide-y">
+          <thead class="bg-gray-50">
+            <tr>
+              <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm">
+                Transaction
+              </th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                Date
+              </th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                Amount
+              </th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">
+                Payment Method
+              </th>
+              <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6">
+                <span class="sr-only">Edit</span>
+              </th>
+            </tr>
+          </thead>
+
+          <tbody class="bg-white divide-gray-200 divide-y">
+            @foreach(transactionHistory as transaction, index)
+              <tr>
+                <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap">
+                  Dashboard Subscription <em class="italic">({{ getTransactionType(transaction.name) }}ly)</em>
+                </td>
+                <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">
+                  {{ formatTimestampDate(transaction.created_at) }}
+                </td>
+                <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">
+                  ${{ getUnitPrice(transaction.unit_price) }}
+                </td>
+                <td class="flex items-center px-3 py-4 space-x-2 text-gray-500 text-sm whitespace-nowrap">
+                  <slot name="cardBrand" />
+                  <span>**** **** **** {{ getLastDigits(transaction.payment_intent) }}</span>
+                </td>
+                <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                  <a href="#" class="text-blue-600 hover:text-blue-900">View<span class="sr-only">, Transaction</span></a>
+                </td>
+              </tr>
+            @endforeach
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,54 @@
+<script server>
+interface ActivityTableProps {
+  activities?: any[]
+  title?: string
+}
+
+const { activities = [], title = 'Recent Activity' } = defineProps<ActivityTableProps>()
+</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">{{ title }}</h3>
+    <slot name="actions" />
+  </div>
+
+  @if(activities.length > 0)
+    <div class="overflow-x-auto">
+      <table class="min-w-full">
+        <thead>
+          <tr class="border-b border-neutral-200/60 dark:border-white/5">
+            <th class="px-5 py-3 font-semibold text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Type</th>
+            <th class="px-5 py-3 font-semibold text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Activity</th>
+            <th class="px-5 py-3 font-semibold text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Source</th>
+            <th class="px-5 py-3 font-semibold text-[11px] text-left text-neutral-500 tracking-wider uppercase dark:text-neutral-400">Time</th>
+          </tr>
+        </thead>
+        <tbody class="divide-neutral-100 divide-y dark:divide-white/5">
+          @foreach(activities as activity)
+            <tr class="hover:bg-neutral-50 dark:hover:bg-white/[0.02] transition-colors">
+              <td class="px-5 py-3.5">
+                <Badge
+                  variant="{{ activity.type === 'error' ? 'danger' : activity.type === 'order' ? 'primary' : activity.type === 'user' ? 'success' : 'default' }}"
+                  size="xs"
+                >
+                  {{ activity.type }}
+                </Badge>
+              </td>
+              <td class="px-5 py-3.5 text-[13px] text-neutral-900 dark:text-white">{{ activity.message }}</td>
+              <td class="px-5 py-3.5 text-[13px] text-neutral-500 dark:text-neutral-400">{{ activity.user }}</td>
+              <td class="px-5 py-3.5 text-[12px] text-neutral-400 dark:text-neutral-500">{{ activity.time }}</td>
+            </tr>
+          @endforeach
+        </tbody>
+      </table>
+    </div>
+  @else
+    <div class="py-12 text-center">
+      <div class="inline-flex mb-3 p-3 bg-neutral-100 dark:bg-neutral-800 rounded-full">
+        <div class="h-6 w-6 text-neutral-400 dark:text-neutral-500 i-hugeicons-activity-01"></div>
+      </div>
+      <p class="font-medium text-neutral-900 text-sm dark:text-white">No recent activity</p>
+      <p class="mt-1 text-[12px] text-neutral-500 dark:text-neutral-400">Activity will appear here as your app is used</p>
+    </div>
+  @endif
+</div>

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

@@ -0,0 +1,102 @@
+<script server>
+interface AvatarProps {
+  src?: string
+  alt?: string
+  name?: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  rounded?: 'sm' | 'md' | 'lg' | 'full'
+  status?: 'online' | 'offline' | 'away' | 'busy'
+}
+
+const { src = '', alt = '', name = '', size = 'md', rounded = 'full', status = '' } = defineProps<AvatarProps>()
+
+const sizeClasses = {
+  xs: 'h-5 w-5 text-[10px]',
+  sm: 'h-7 w-7 text-[11px]',
+  md: 'h-8 w-8 text-[12px]',
+  lg: 'h-10 w-10 text-[13px]',
+  xl: 'h-12 w-12 text-[14px]',
+  '2xl': 'h-14 w-14 text-[16px]'
+}
+
+const radiusClasses = {
+  sm: 'rounded-md',
+  md: 'rounded-lg',
+  lg: 'rounded-xl',
+  full: 'rounded-full'
+}
+
+const statusColors = {
+  online: 'bg-green-500',
+  offline: 'bg-neutral-400',
+  away: 'bg-orange-500',
+  busy: 'bg-red-500'
+}
+
+const statusSizes = {
+  xs: 'h-1.5 w-1.5',
+  sm: 'h-2 w-2',
+  md: 'h-2 w-2',
+  lg: 'h-2.5 w-2.5',
+  xl: 'h-3 w-3',
+  '2xl': 'h-3.5 w-3.5'
+}
+
+// Generate initials from name
+function getInitials(fullName) {
+  if (!fullName) return ''
+  const parts = fullName.trim().split(/\s+/)
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
+const initials = getInitials(name)
+
+// Background colors for initials (consistent based on name)
+const bgColors = [
+  'bg-red-500/15 text-red-600 dark:bg-red-400/20 dark:text-red-400',
+  'bg-orange-500/15 text-orange-600 dark:bg-orange-400/20 dark:text-orange-400',
+  'bg-yellow-500/15 text-yellow-600 dark:bg-yellow-400/20 dark:text-yellow-400',
+  'bg-green-500/15 text-green-600 dark:bg-green-400/20 dark:text-green-400',
+  'bg-teal-500/15 text-teal-600 dark:bg-teal-400/20 dark:text-teal-400',
+  'bg-cyan-500/15 text-cyan-600 dark:bg-cyan-400/20 dark:text-cyan-400',
+  'bg-blue-500/15 text-blue-600 dark:bg-blue-400/20 dark:text-blue-400',
+  'bg-indigo-500/15 text-indigo-600 dark:bg-indigo-400/20 dark:text-indigo-400',
+  'bg-purple-500/15 text-purple-600 dark:bg-purple-400/20 dark:text-purple-400',
+  'bg-pink-500/15 text-pink-600 dark:bg-pink-400/20 dark:text-pink-400'
+]
+
+function getBgColorIndex(fullName) {
+  if (!fullName) return 0
+  let hash = 0
+  for (let i = 0; i < fullName.length; i++) {
+    hash = fullName.charCodeAt(i) + ((hash << 5) - hash)
+  }
+  return Math.abs(hash) % bgColors.length
+}
+
+const bgColor = name ? bgColors[getBgColorIndex(name)] : 'bg-black/[0.06] text-neutral-500 dark:bg-white/10 dark:text-neutral-400'
+</script>
+<div class="inline-flex relative flex-shrink-0">
+    @if(src)
+      <img
+        src="{{ src }}"
+        alt="{{ alt || name || 'Avatar' }}"
+        class="object-cover {{ sizeClasses[size] }} {{ radiusClasses[rounded] }}"
+      >
+    @else
+      <div class="inline-flex items-center justify-center font-medium {{ sizeClasses[size] }} {{ radiusClasses[rounded] }} {{ bgColor }}">
+        @if(initials)
+          <span>{{ initials }}</span>
+        @else
+          <svg class="h-1/2 w-1/2 text-neutral-400" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+          </svg>
+        @endif
+      </div>
+    @endif
+
+    @if(status)
+      <span class="absolute bottom-0 right-0 rounded-full ring-2 ring-white dark:ring-neutral-900 {{ statusColors[status] }} {{ statusSizes[size] }}"></span>
+    @endif
+  </div>

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

@@ -0,0 +1,66 @@
+<script server>
+interface BadgeProps {
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  rounded?: 'default' | 'full'
+  outline?: boolean
+  dot?: boolean
+}
+
+const { variant = 'default', size = 'sm', rounded = 'full', outline = false, dot = false } = defineProps<BadgeProps>()
+// `text` was removed as a prop because `text` is auto-imported as a
+// global from @stacksjs/validation (the schema text() validator). Even
+// when no caller passes `text`, the global shadows the prop default and
+// `{{ text }}` rendered the validator function source into every Badge.
+// Use the slot for the badge label instead.
+
+const sizeClasses = {
+  xs: 'text-[10px] px-1.5 py-0.5',
+  sm: 'text-[11px] px-2 py-0.5',
+  md: 'text-[12px] px-2.5 py-0.5',
+  lg: 'text-[13px] px-3 py-1'
+}
+
+const solidVariants = {
+  default: 'bg-black/[0.06] text-neutral-600 dark:bg-white/10 dark:text-neutral-300',
+  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'
+}
+
+const outlineVariants = {
+  default: 'border border-black/15 text-neutral-600 dark:border-white/20 dark:text-neutral-300',
+  primary: 'border border-blue-500/40 text-blue-600 dark:border-blue-400/50 dark:text-blue-400',
+  success: 'border border-green-500/40 text-green-600 dark:border-green-400/50 dark:text-green-400',
+  warning: 'border border-orange-500/40 text-orange-600 dark:border-orange-400/50 dark:text-orange-400',
+  danger: 'border border-red-500/40 text-red-600 dark:border-red-400/50 dark:text-red-400',
+  info: 'border border-cyan-500/40 text-cyan-600 dark:border-cyan-400/50 dark:text-cyan-400'
+}
+
+const dotColors = {
+  default: 'bg-neutral-400 dark:bg-neutral-500',
+  primary: 'bg-blue-500 dark:bg-blue-400',
+  success: 'bg-green-500 dark:bg-green-400',
+  warning: 'bg-orange-500 dark:bg-orange-400',
+  danger: 'bg-red-500 dark:bg-red-400',
+  info: 'bg-cyan-500 dark:bg-cyan-400'
+}
+
+const badgeClass = [
+  'inline-flex items-center font-medium tracking-tight',
+  'transition-all duration-150',
+  sizeClasses[size],
+  rounded === 'full' ? 'rounded-full' : 'rounded-md',
+  outline ? outlineVariants[variant] : solidVariants[variant]
+].join(' ')
+
+const dotClass = 'w-1.5 h-1.5 rounded-full mr-1.5 ' + dotColors[variant]
+</script>
+<span class="{{ badgeClass }}">
+    @if(dot)
+      <span class="{{ dotClass }}"></span>
+    @endif
+    <slot />
+  </span>

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

@@ -0,0 +1,73 @@
+<script server>
+interface ButtonProps {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  disabled?: boolean
+  loading?: boolean
+  fullWidth?: boolean
+  iconOnly?: boolean
+  href?: string
+  type?: string
+}
+
+const { variant = 'primary', size = 'md', disabled = false, loading = false, fullWidth = false, iconOnly = false, href = '', type = 'button' } = defineProps<ButtonProps>()
+
+// Variant classes
+const variantClasses = {
+  primary: 'bg-gradient-to-b from-blue-500 to-blue-600 text-white shadow-sm shadow-blue-600/25 hover:from-blue-400 hover:to-blue-500 active:from-blue-600 active:to-blue-700 dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-500 dark:hover:to-blue-600',
+  secondary: 'bg-white/80 dark:bg-white/10 text-neutral-800 dark:text-neutral-100 border border-black/10 dark:border-white/10 shadow-sm hover:bg-white dark:hover:bg-white/15 active:bg-neutral-100 dark:active:bg-white/5',
+  outline: 'bg-transparent text-neutral-700 dark:text-neutral-200 border border-black/15 dark:border-white/15 hover:bg-black/5 dark:hover:bg-white/8 active:bg-black/10 dark:active:bg-white/10',
+  ghost: 'bg-transparent text-neutral-600 dark:text-neutral-300 hover:bg-black/5 dark:hover:bg-white/8 active:bg-black/10 dark:active:bg-white/12',
+  danger: 'bg-gradient-to-b from-red-500 to-red-600 text-white shadow-sm shadow-red-600/25 hover:from-red-400 hover:to-red-500 active:from-red-600 active:to-red-700',
+  success: 'bg-gradient-to-b from-green-500 to-green-600 text-white shadow-sm shadow-green-600/25 hover:from-green-400 hover:to-green-500 active:from-green-600 active:to-green-700'
+}
+
+// Size classes
+const sizeClasses = {
+  xs: 'text-[11px] px-2 py-1 rounded-md gap-1 h-6',
+  sm: 'text-[12px] px-2.5 py-1 rounded-md gap-1.5 h-7',
+  md: 'text-[13px] px-3 py-1.5 rounded-lg gap-1.5 h-8',
+  lg: 'text-[14px] px-4 py-2 rounded-lg gap-2 h-9'
+}
+
+const iconOnlySizes = {
+  xs: 'h-6 w-6 rounded-md',
+  sm: 'h-7 w-7 rounded-md',
+  md: 'h-8 w-8 rounded-lg',
+  lg: 'h-9 w-9 rounded-lg'
+}
+
+const buttonClass = [
+  'inline-flex items-center justify-center',
+  'font-medium tracking-tight',
+  'transition-all duration-150',
+  'select-none',
+  'focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/40 focus-visible:ring-offset-0',
+  'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none',
+  'active:scale-[0.98]',
+  fullWidth ? 'w-full' : '',
+  iconOnly ? iconOnlySizes[size] : sizeClasses[size],
+  variantClasses[variant]
+].join(' ')
+</script>
+@if(href && href.length > 0)
+    <a href="{{ href }}" class="{{ buttonClass }}" aria-disabled="{{ disabled ? 'true' : 'false' }}">
+      @if(loading)
+        <svg class="animate-spin h-3.5 w-3.5 {{ iconOnly ? '' : '-ml-0.5 mr-1.5' }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      @endif
+      <slot />
+    </a>
+  @else
+    <button type="{{ type }}" class="{{ buttonClass }}" {{ (disabled || loading) ? 'disabled' : '' }}>
+      @if(loading)
+        <svg class="animate-spin h-3.5 w-3.5 {{ iconOnly ? '' : '-ml-0.5 mr-1.5' }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      @endif
+      <slot />
+    </button>
+  @endif

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

@@ -0,0 +1,51 @@
+<script server>
+interface CardProps {
+  variant?: 'default' | 'elevated' | 'outline' | 'ghost' | 'vibrancy'
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+  rounded?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  hoverable?: boolean
+  clickable?: boolean
+}
+
+const { variant = 'default', padding = 'md', rounded = 'lg', hoverable = false, clickable = false } = defineProps<CardProps>()
+
+const variantClasses = {
+  default: 'bg-white dark:bg-neutral-800/90 border border-stone-200/80 dark:border-white/5 shadow-sm shadow-stone-200/50 dark:shadow-black/20',
+  elevated: 'bg-white dark:bg-neutral-800 shadow-lg shadow-stone-200/60 dark:shadow-black/30 border border-stone-200/60 dark:border-white/10',
+  outline: 'bg-transparent border border-stone-200/80 dark:border-white/10',
+  ghost: 'bg-stone-50/50 dark:bg-white/[0.05] border border-transparent',
+  vibrancy: 'bg-white/60 dark:bg-neutral-800/60 backdrop-blur-xl backdrop-saturate-150 border border-stone-200/60 dark:border-white/10 shadow-sm shadow-stone-200/50'
+}
+
+const paddingClasses = {
+  none: '',
+  sm: 'p-2.5',
+  md: 'p-4',
+  lg: 'p-5',
+  xl: 'p-6'
+}
+
+const roundedClasses = {
+  sm: 'rounded-md',
+  md: 'rounded-lg',
+  lg: 'rounded-xl',
+  xl: 'rounded-2xl',
+  '2xl': 'rounded-[20px]',
+  '3xl': 'rounded-[24px]'
+}
+
+const hoverClass = (hoverable || clickable) ? 'hover:shadow-md hover:shadow-stone-300/60 dark:hover:shadow-black/25 hover:border-stone-300/80 dark:hover:border-white/15' : ''
+const clickableClass = clickable ? 'cursor-pointer active:scale-[0.98] active:shadow-sm' : ''
+
+const cardClass = [
+  'transition-all duration-150',
+  variantClasses[variant],
+  paddingClasses[padding],
+  roundedClasses[rounded],
+  hoverClass,
+  clickableClass
+].join(' ')
+</script>
+<div class="{{ cardClass }}">
+  <slot />
+</div>

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

@@ -0,0 +1,36 @@
+<script server>
+interface ChartCardProps {
+  title?: string
+  subtitle?: string
+  height?: string
+  loading?: boolean
+}
+
+const { title = '', subtitle = '', height = '300px', loading = false } = defineProps<ChartCardProps>()
+</script>
+<div class="bg-white dark:bg-neutral-800/90 border border-black/5 rounded-xl dark:border-white/5">
+  @if(title)
+    <div class="flex items-center justify-between p-5 border-b border-neutral-200/60 dark:border-white/5">
+      <div>
+        <h3 class="font-semibold text-[14px] text-neutral-900 tracking-tight dark:text-white">{{ title }}</h3>
+        @if(subtitle)
+          <p class="mt-0.5 text-[12px] text-neutral-500 dark:text-neutral-400">{{ subtitle }}</p>
+        @endif
+      </div>
+      <div class="flex gap-2 items-center">
+        <slot name="controls" />
+      </div>
+    </div>
+  @endif
+  <div class="relative p-5" style="height: {{ height }}">
+    @if(loading)
+      <div class="flex absolute inset-0 z-10 items-center justify-center bg-white/80 dark:bg-neutral-800/80 rounded-b-xl">
+        <svg class="h-6 w-6 text-blue-500 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+      </div>
+    @endif
+    <slot />
+  </div>
+</div>

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

@@ -0,0 +1,74 @@
+<script server>
+interface CheckboxProps {
+  checked?: boolean
+  label?: string
+  description?: string
+  disabled?: boolean
+  indeterminate?: boolean
+  size?: 'sm' | 'md' | 'lg'
+  error?: string
+  name?: string
+  id?: string
+}
+
+const { checked = false, label = '', description = '', disabled = false, indeterminate = false, size = 'md', error = '', name = '', id = '' } = defineProps<CheckboxProps>()
+
+const sizeClasses = {
+  sm: { checkbox: 'h-4 w-4', text: 'text-sm', desc: 'text-xs' },
+  md: { checkbox: 'h-5 w-5', text: 'text-sm', desc: 'text-sm' },
+  lg: { checkbox: 'h-6 w-6', text: 'text-base', desc: 'text-sm' }
+}
+
+const checkboxId = id || 'checkbox-' + Math.random().toString(36).slice(2, 11)
+</script>
+<div class="relative flex {{ label || description ? 'gap-3' : '' }} {{ disabled ? 'opacity-60 cursor-not-allowed' : '' }}">
+    <div class="flex items-start pt-0.5">
+      <input
+        type="checkbox"
+        id="{{ checkboxId }}"
+        name="{{ name }}"
+        class="sr-only peer"
+        @if(checked) checked @endif
+        @if(disabled) disabled @endif
+      >
+      <label
+        for="{{ checkboxId }}"
+        class="{{ sizeClasses[size].checkbox }} relative rounded transition-all duration-150 flex items-center justify-center border-2 {{ disabled ? '' : 'cursor-pointer' }} peer-checked:bg-blue-600 peer-checked:border-blue-600 bg-white dark:bg-neutral-900 border-neutral-300 dark:border-neutral-600 hover:border-blue-400 dark:hover:border-blue-500 {{ error ? 'border-red-500' : '' }}"
+      >
+        <svg class="{{ sizeClasses[size].checkbox }} text-white hidden peer-checked:block" 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"></path>
+        </svg>
+      </label>
+    </div>
+
+    @if(label || description)
+      <div class="flex-1 min-w-0">
+        @if(label)
+          <label
+            for="{{ checkboxId }}"
+            class="{{ sizeClasses[size].text }} font-medium {{ disabled ? 'text-neutral-400 dark:text-neutral-500 cursor-not-allowed' : 'text-neutral-700 dark:text-neutral-200 cursor-pointer' }}"
+          >
+            {{ label }}
+          </label>
+        @endif
+        @if(description)
+          <p class="{{ sizeClasses[size].desc }} mt-0.5 {{ disabled ? 'text-neutral-300 dark:text-neutral-600' : 'text-neutral-500 dark:text-neutral-400' }}">
+            {{ description }}
+          </p>
+        @endif
+      </div>
+    @endif
+  </div>
+
+  @if(error)
+    <p class="mt-1.5 text-red-600 text-sm dark:text-red-400">{{ error }}</p>
+  @endif
+<style>
+input:checked + label {
+  background-color: rgb(37 99 235);
+  border-color: rgb(37 99 235);
+}
+input:checked + label svg {
+  display: block;
+}
+</style>

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

@@ -0,0 +1,74 @@
+<script server>
+interface ConfirmDialogProps {
+  isOpen?: boolean
+  title?: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: 'danger' | 'warning'
+}
+
+const { isOpen = false, title = 'Are you sure?', description = 'This action cannot be undone.', confirmLabel = 'Delete', cancelLabel = 'Cancel', variant = 'danger' } = defineProps<ConfirmDialogProps>()
+
+const iconClasses = {
+  danger: 'bg-red-500/15 text-red-600 dark:bg-red-400/20 dark:text-red-400',
+  warning: 'bg-orange-500/15 text-orange-600 dark:bg-orange-400/20 dark:text-orange-400'
+}
+
+const iconNames = {
+  danger: 'i-hugeicons-alert-02',
+  warning: 'i-hugeicons-alert-circle'
+}
+</script>
+@if(isOpen)
+  <div ref="pageRoot" class="fixed inset-0 overflow-y-auto z-50">
+    <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" data-modal-overlay></div>
+
+    <div class="flex items-center justify-center p-4 min-h-full">
+      <div class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-900 rounded-xl shadow-2xl">
+        <div class="flex gap-4 items-start">
+          <div class="p-2.5 rounded-lg flex-shrink-0 {{ iconClasses[variant] }}">
+            <div class="{{ iconNames[variant] }} w-5 h-5"></div>
+          </div>
+          <div class="flex-1 min-w-0">
+            <h3 class="font-semibold text-lg text-neutral-900 dark:text-white">
+              {{ title }}
+            </h3>
+            <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">
+              {{ description }}
+            </p>
+          </div>
+        </div>
+
+        <div class="flex gap-2 items-center justify-end mt-6">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center px-3 py-1.5 font-medium text-[13px] text-neutral-800 tracking-tight dark:text-neutral-100 bg-white/80 dark:bg-white/10 hover:bg-white dark:hover:bg-white/15 border border-black/10 rounded-lg dark:border-white/10 shadow-sm duration-150 transition-all"
+            data-modal-close
+          >
+            {{ cancelLabel }}
+          </button>
+          <button
+            type="button"
+            class="inline-flex items-center justify-center px-3 py-1.5 font-medium text-[13px] text-white tracking-tight bg-gradient-to-b from-red-500 to-red-600 hover:from-red-400 hover:to-red-500 rounded-lg shadow-red-600/25 shadow-sm duration-150 transition-all"
+            data-confirm-action
+          >
+            {{ confirmLabel }}
+          </button>
+        </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(function(item) {
+    item.addEventListener('click', function() {
+      item.closest('.fixed.inset-0')?.remove()
+    })
+  })
+})
+</script>

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

@@ -0,0 +1,45 @@
+<script server>
+interface DataTableProps {
+  columns?: any[]
+  data?: any[]
+  striped?: boolean
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyIcon?: string
+  hoverable?: boolean
+}
+
+const { columns = [], data = [], striped = false, emptyTitle = 'No data found', emptyDescription = '', emptyIcon = 'i-hugeicons-folder-02', hoverable = true } = defineProps<DataTableProps>()
+</script>
+<div class="overflow-x-auto">
+  <table class="min-w-full">
+    <thead>
+      <tr class="border-b border-neutral-200/60 dark:border-white/5">
+        @foreach(columns as col)
+          <th class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400 {{ col.class || '' }}">
+            {{ col.label }}
+          </th>
+        @endforeach
+      </tr>
+    </thead>
+    <tbody class="divide-neutral-100 divide-y dark:divide-white/5">
+      @if(data.length > 0)
+        <slot />
+      @else
+        <tr>
+          <td colspan="{{ columns.length }}" class="px-4 py-12">
+            <div class="flex flex-col items-center justify-center text-center">
+              <div class="mb-3 p-3 bg-neutral-100 dark:bg-neutral-800 rounded-full">
+                <div class="{{ emptyIcon }} w-6 h-6 text-neutral-400 dark:text-neutral-500"></div>
+              </div>
+              <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ emptyTitle }}</p>
+              @if(emptyDescription)
+                <p class="mt-1 text-[12px] text-neutral-500 dark:text-neutral-400">{{ emptyDescription }}</p>
+              @endif
+            </div>
+          </td>
+        </tr>
+      @endif
+    </tbody>
+  </table>
+</div>