@stacksjs/defaults 0.70.229 → 0.70.230

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

@@ -1,93 +1,113 @@
-<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
-}
+<script client>
+type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both'
 
-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 liveValue = useReactiveProp('value', '')
+const liveLabel = useReactiveProp('label', '')
+const livePlaceholder = useReactiveProp('placeholder', '')
+const liveError = useReactiveProp('error', '')
+const liveHint = useReactiveProp('hint', '')
+const liveDisabled = useReactiveProp('disabled', false)
+const liveReadonly = useReactiveProp('readonly', false)
+const liveRequired = useReactiveProp('required', false)
+const liveRows = useReactiveProp('rows', 3)
+const liveMaxLength = useReactiveProp('maxLength', 0)
+const liveShowCount = useReactiveProp('showCount', false)
+const liveResize = useReactiveProp('resize', 'vertical' as TextareaResize)
+const liveName = useReactiveProp('name', '')
+const liveId = useReactiveProp('id', '')
+const liveAriaLabel = useReactiveProp('ariaLabel', '')
+const liveClass = useReactiveProp('class', '')
+const emit = defineEmits()
+const generatedId = useId('textarea')
 
-const resizeClasses = {
+const resizeClasses: Record<TextareaResize, string> = {
   none: 'resize-none',
   vertical: 'resize-y',
   horizontal: 'resize-x',
-  both: 'resize'
+  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 textareaId = derived(() => liveId() || generatedId)
+const valueLength = derived(() => String(liveValue() || '').length)
+const headerVisible = derived(() => Boolean(liveLabel() || (liveShowCount() && liveMaxLength())))
+const textareaClass = derived(() => [
+  'block w-full rounded-lg border px-3 py-2.5 text-sm transition-all duration-150',
+  'text-neutral-900 placeholder:text-neutral-400 focus:outline-none focus:ring-2',
+  'dark:text-white dark:placeholder:text-neutral-500',
+  resizeClasses[liveResize()] || resizeClasses.vertical,
+  liveError()
+    ? 'border-red-300 focus:border-red-500 focus:ring-red-500/20 dark:border-red-700'
+    : 'border-neutral-300 hover:border-neutral-400 focus:border-blue-500 focus:ring-blue-500/20 dark:border-neutral-600 dark:hover:border-neutral-500',
+  liveDisabled()
+    ? 'cursor-not-allowed border-neutral-200 bg-neutral-100 text-neutral-400 dark:border-neutral-700 dark:bg-neutral-800'
+    : 'bg-white dark:bg-neutral-900',
+  liveClass(),
+].join(' '))
+const limitedCountLabel = derived(() => `${valueLength()}/${liveMaxLength()}`)
+const openCountLabel = derived(() => `${valueLength()} characters`)
 
-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'
+function textareaValue(event: Event): string {
+  return (event.target as HTMLTextAreaElement).value
+}
 
-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(' ')
+function handleInput(event: Event): void {
+  const value = textareaValue(event)
+  emit('update:value', value)
+  emit('input', value)
+}
+
+function handleChange(event: Event): void {
+  emit('change', textareaValue(event))
+}
 
-const textareaId = id || 'textarea-' + Math.random().toString(36).slice(2, 11)
+function handleBlur(event: Event): void {
+  emit('blur', textareaValue(event))
+}
 </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>
+<div>
+  <div :if="headerVisible()" class="flex items-center justify-between mb-1.5">
+    <label
+      :if="liveLabel()"
+      :for="textareaId()"
+      class="block font-medium text-neutral-700 text-sm dark:text-neutral-200"
+    >
+      <span :text="liveLabel()"></span>
+      <span :if="liveRequired()" class="text-red-500">*</span>
+    </label>
+    <span
+      :if="liveShowCount() && liveMaxLength()"
+      class="text-neutral-400 text-xs dark:text-neutral-500"
+      :text="limitedCountLabel()"
+    ></span>
+  </div>
 
-      @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>
+  <div class="relative">
+    <textarea
+      :id="textareaId()"
+      :name="liveName() || null"
+      :rows="liveRows()"
+      :placeholder="livePlaceholder()"
+      :aria-label="liveAriaLabel() || liveLabel() || null"
+      :aria-invalid="liveError() ? 'true' : null"
+      :maxlength="liveMaxLength() || null"
+      :class="textareaClass()"
+      x-model="liveValue"
+      :disabled="liveDisabled()"
+      :readonly="liveReadonly()"
+      :required="liveRequired()"
+      @input="handleInput"
+      @change="handleChange"
+      @blur="handleBlur"
+    ></textarea>
 
-    @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
+    <span
+      :if="liveShowCount() && !liveMaxLength()"
+      class="absolute bottom-2 right-2 px-1 text-neutral-400 text-xs dark:text-neutral-500 bg-white dark:bg-neutral-900"
+      :text="openCountLabel()"
+    ></span>
   </div>
+
+  <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-neutral-500 text-sm dark:text-neutral-400" :text="liveHint()"></p>
+</div>

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

@@ -1,84 +1,89 @@
-<script server>
-interface ToggleProps {
-  checked?: boolean
-  label?: string
-  description?: string
-  disabled?: boolean
-  size?: 'sm' | 'md' | 'lg'
-  labelPosition?: 'left' | 'right'
-  name?: string
-  id?: string
-}
+<script client>
+type ToggleSize = 'sm' | 'md' | 'lg'
+type ToggleLabelPosition = 'left' | 'right'
 
-const { checked = false, label = '', description = '', disabled = false, size = 'md', labelPosition = 'right', name = '', id = '' } = defineProps<ToggleProps>()
+const liveChecked = useReactiveProp('checked', false)
+const liveLabel = useReactiveProp('label', '')
+const liveDescription = useReactiveProp('description', '')
+const liveDisabled = useReactiveProp('disabled', false)
+const liveSize = useReactiveProp('size', 'md' as ToggleSize)
+const liveLabelPosition = useReactiveProp('labelPosition', 'right' as ToggleLabelPosition)
+const liveName = useReactiveProp('name', '')
+const liveId = useReactiveProp('id', '')
+const liveAriaLabel = useReactiveProp('ariaLabel', '')
+const emit = defineEmits()
+const generatedId = useId('toggle')
 
-const trackSizes = {
+const trackSizes: Record<ToggleSize, string> = {
   sm: 'h-4 w-7',
   md: 'h-5 w-9',
-  lg: 'h-6 w-11'
+  lg: 'h-6 w-11',
 }
-
-const thumbSizes = {
+const thumbSizes: Record<ToggleSize, string> = {
   sm: 'h-3 w-3',
   md: 'h-4 w-4',
-  lg: 'h-5 w-5'
+  lg: 'h-5 w-5',
 }
-
-const translateSizes = {
+const checkedTranslations: Record<ToggleSize, string> = {
   sm: 'translate-x-3',
   md: 'translate-x-4',
-  lg: 'translate-x-5'
+  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>
+const toggleId = derived(() => liveId() || generatedId)
+const hasCopy = derived(() => Boolean(liveLabel() || liveDescription()))
+const wrapperClass = derived(() => [
+  'flex items-center gap-3',
+  liveLabelPosition() === 'left' ? 'flex-row-reverse justify-end' : '',
+  liveDisabled() ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+].join(' '))
+const trackClass = derived(() => [
+  trackSizes[liveSize()] || trackSizes.md,
+  'relative inline-flex shrink-0 rounded-full transition-colors duration-150',
+  'focus-within:ring-2 focus-within:ring-blue-500/40',
+  liveChecked() ? 'bg-green-500' : 'bg-black/15 dark:bg-white/20',
+  liveDisabled() ? 'opacity-40' : '',
+].join(' '))
+const thumbClass = derived(() => [
+  thumbSizes[liveSize()] || thumbSizes.md,
+  'pointer-events-none inline-block translate-x-0.5 rounded-full bg-white shadow-sm transition-transform duration-150 ease-in-out',
+  liveChecked() ? checkedTranslations[liveSize()] || checkedTranslations.md : '',
+].join(' '))
+const labelClass = derived(() => [
+  'text-[13px] font-medium tracking-tight',
+  liveDisabled() ? 'text-neutral-400 dark:text-neutral-600' : 'text-neutral-700 dark:text-neutral-200',
+].join(' '))
+const descriptionClass = derived(() => [
+  'mt-0.5 text-[12px]',
+  liveDisabled() ? 'text-neutral-300 dark:text-neutral-600' : 'text-neutral-500 dark:text-neutral-400',
+].join(' '))
 
-    @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);
+function handleChange(event: Event): void {
+  const checked = (event.target as HTMLInputElement).checked
+  emit('update:checked', checked)
+  emit('change', checked)
 }
-input:checked + label span[class*="lg"] {
-  transform: translateX(1.25rem);
-}
-</style>
+</script>
+
+<label :class="wrapperClass()">
+  <input
+    :id="toggleId()"
+    type="checkbox"
+    role="switch"
+    :name="liveName() || null"
+    :aria-label="liveAriaLabel() || liveLabel() || 'Toggle'"
+    class="sr-only"
+    x-model="liveChecked"
+    :disabled="liveDisabled()"
+    @change="handleChange"
+  >
+
+  <span aria-hidden="true" :class="trackClass()">
+    <span :class="thumbClass()"></span>
+  </span>
+
+  <span :if="hasCopy()" class="flex-1 min-w-0">
+    <span :if="liveLabel()" class="block" :class="labelClass()" :text="liveLabel()"></span>
+    <span :if="liveDescription()" class="block" :class="descriptionClass()" :text="liveDescription()"></span>
+  </span>
+</label>

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

@@ -1,135 +1,119 @@
-<script server>
-interface WindowControlsProps {
-  variant?: 'macos' | 'windows'
-  size?: 'sm' | 'md' | 'lg'
-  showLabels?: boolean
-  disabled?: boolean
-}
-
-const { variant = 'macos', size = 'md', showLabels = false, disabled = false } = defineProps<WindowControlsProps>()
+<script client>
+import { useWindowControls } from '../../../../functions/craft'
 
-import { isCraftNative, useWindowControls } from '../../../../functions/craft'
+type WindowControlVariant = 'macos' | 'windows'
+type WindowControlSize = 'sm' | 'md' | 'lg'
 
-  const sizeConfig = {
-    sm: { button: 'w-3 h-3', gap: 'gap-1.5', iconSize: 'w-2 h-2' },
-    md: { button: 'w-3.5 h-3.5', gap: 'gap-2', iconSize: 'w-2.5 h-2.5' },
-    lg: { button: 'w-4 h-4', gap: 'gap-2.5', iconSize: 'w-3 h-3' },
-  }
+const liveVariant = useReactiveProp('variant', 'macos' as WindowControlVariant)
+const liveSize = useReactiveProp('size', 'md' as WindowControlSize)
+const liveShowLabels = useReactiveProp('showLabels', false)
+const liveDisabled = useReactiveProp('disabled', false)
+const emit = defineEmits()
+const windowControls = useWindowControls()
 
-  const defaultColors = {
-    close: { bg: '#ff5f57', hover: '#ff4136', icon: '#4c0002' },
-    minimize: { bg: '#febc2e', hover: '#ffa500', icon: '#995700' },
-    maximize: { bg: '#28c840', hover: '#00b300', icon: '#006400' },
-  }
-
-  const config = sizeConfig[size]
-  const windowControls = useWindowControls()
+const sizeConfig: Record<WindowControlSize, { button: string, gap: string, icon: string }> = {
+  sm: { button: 'h-3 w-3', gap: 'gap-1.5', icon: 'h-2 w-2' },
+  md: { button: 'h-3.5 w-3.5', gap: 'gap-2', icon: 'h-2.5 w-2.5' },
+  lg: { button: 'h-4 w-4', gap: 'gap-2.5', icon: 'h-3 w-3' },
+}
 
-  // Window control handlers
-  function handleClose() {
-    windowControls.close()
-  }
+const config = derived(() => sizeConfig[liveSize()] || sizeConfig.md)
+const macButtonClass = (color: string) => [
+  config().button,
+  color,
+  'group relative rounded-full transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-1',
+  liveDisabled() ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
+].join(' ')
 
-  function handleMinimize() {
-    windowControls.minimize()
-  }
+async function handleClose(): Promise<void> {
+  emit('close')
+  await windowControls.close()
+}
 
-  function handleMaximize() {
-    windowControls.toggle()
-  }
+async function handleMinimize(): Promise<void> {
+  emit('minimize')
+  await windowControls.minimize()
+}
 
-  // Check if running in native app
-  const isNative = isCraftNative()
+async function handleMaximize(): Promise<void> {
+  emit('maximize')
+  await windowControls.toggle()
+}
 </script>
-@if(variant == 'macos')
-  <div class="flex items-center {{ config.gap }}" data-window-controls>
-    <!-- Close button -->
-    <button
-      type="button"
-      class="{{ config.button }} rounded-full transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-red-500/50 {{ disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' }} group"
-      style="background-color: {{ defaultColors.close.bg }}"
-      @if(disabled) disabled @endif
-      title="{{ showLabels ? '' : 'Close' }}"
-      @click="handleClose"
-    >
-      <svg class="{{ config.iconSize }} mx-auto hidden group-hover:block" viewBox="0 0 12 12" fill="none" stroke="currentColor" style="color: {{ defaultColors.close.icon }}">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3l6 6M9 3l-6 6"></path>
-      </svg>
-    </button>
 
-    <!-- Minimize button -->
+<div :if="liveVariant() === 'macos'" class="flex items-center" :class="config().gap" data-window-controls>
+  <span class="flex gap-1.5 items-center">
     <button
       type="button"
-      class="{{ config.button }} rounded-full transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-yellow-500/50 {{ disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' }} group"
-      style="background-color: {{ defaultColors.minimize.bg }}"
-      @if(disabled) disabled @endif
-      title="{{ showLabels ? '' : 'Minimize' }}"
-      @click="handleMinimize"
+      :class="macButtonClass('bg-[#ff5f57] focus:ring-red-500/50')"
+      :disabled="liveDisabled()"
+      aria-label="Close window"
+      title="Close"
+      @click="handleClose"
     >
-      <svg class="{{ config.iconSize }} mx-auto hidden group-hover:block" viewBox="0 0 12 12" fill="none" stroke="currentColor" style="color: {{ defaultColors.minimize.icon }}">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 6h8"></path>
-      </svg>
+      <span aria-hidden="true" class="hidden group-hover:block absolute inset-0 m-auto h-1.5 w-1.5 text-[#4c0002] i-hugeicons-cancel-01"></span>
     </button>
+    <span :if="liveShowLabels()" class="text-neutral-500 text-xs dark:text-neutral-400">Close</span>
+  </span>
 
-    <!-- Maximize button -->
+  <span class="flex gap-1.5 items-center">
     <button
       type="button"
-      class="{{ config.button }} rounded-full transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-green-500/50 {{ disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' }} group"
-      style="background-color: {{ defaultColors.maximize.bg }}"
-      @if(disabled) disabled @endif
-      title="{{ showLabels ? '' : 'Maximize' }}"
-      @click="handleMaximize"
-    >
-      <svg class="{{ config.iconSize }} mx-auto hidden group-hover:block" viewBox="0 0 12 12" fill="none" stroke="currentColor" style="color: {{ defaultColors.maximize.icon }}">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2 2l3 3M10 10l-3-3M10 2l-3 3M2 10l3-3"></path>
-      </svg>
-    </button>
-  </div>
-@else
-  <!-- Windows style -->
-  <div class="flex items-center">
-    <!-- Minimize -->
-    <button
-      type="button"
-      class="flex items-center justify-center h-8 w-12 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
-      @if(disabled) disabled @endif
+      :class="macButtonClass('bg-[#febc2e] focus:ring-yellow-500/50')"
+      :disabled="liveDisabled()"
+      aria-label="Minimize window"
       title="Minimize"
       @click="handleMinimize"
     >
-      <svg class="h-0.5 w-3" fill="currentColor" viewBox="0 0 12 2">
-        <rect width="12" height="2"></rect>
-      </svg>
+      <span aria-hidden="true" class="hidden group-hover:block absolute inset-0 m-auto h-1.5 w-1.5 text-[#995700] i-hugeicons-minus-sign"></span>
     </button>
+    <span :if="liveShowLabels()" class="text-neutral-500 text-xs dark:text-neutral-400">Minimize</span>
+  </span>
 
-    <!-- Maximize -->
+  <span class="flex gap-1.5 items-center">
     <button
       type="button"
-      class="flex items-center justify-center h-8 w-12 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
-      @if(disabled) disabled @endif
+      :class="macButtonClass('bg-[#28c840] focus:ring-green-500/50')"
+      :disabled="liveDisabled()"
+      aria-label="Maximize window"
       title="Maximize"
       @click="handleMaximize"
     >
-      <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 12 12">
-        <rect x="1" y="1" width="10" height="10" stroke-width="1.5"></rect>
-      </svg>
+      <span aria-hidden="true" class="hidden group-hover:block absolute inset-0 m-auto h-1.5 w-1.5 text-[#006400] i-hugeicons-arrow-expand-01"></span>
     </button>
+    <span :if="liveShowLabels()" class="text-neutral-500 text-xs dark:text-neutral-400">Maximize</span>
+  </span>
+</div>
 
-    <!-- Close -->
-    <button
-      type="button"
-      class="flex items-center justify-center h-8 w-12 text-neutral-600 dark:text-neutral-400 hover:text-white hover:bg-red-600 transition-colors"
-      @if(disabled) disabled @endif
-      title="Close"
-      @click="handleClose"
-    >
-      <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 12 12">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1 1l10 10M11 1l-10 10"></path>
-      </svg>
-    </button>
-  </div>
-@endif
-<style>
-[data-window-controls]:hover button svg {
-  display: block;
-}
-</style>
+<div :else class="flex items-center">
+  <button
+    type="button"
+    class="flex items-center justify-center h-8 w-12 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+    :disabled="liveDisabled()"
+    aria-label="Minimize window"
+    title="Minimize"
+    @click="handleMinimize"
+  >
+    <span aria-hidden="true" class="h-3 w-3 i-hugeicons-minus-sign"></span>
+  </button>
+  <button
+    type="button"
+    class="flex items-center justify-center h-8 w-12 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+    :disabled="liveDisabled()"
+    aria-label="Maximize window"
+    title="Maximize"
+    @click="handleMaximize"
+  >
+    <span aria-hidden="true" class="h-3 w-3 i-hugeicons-square"></span>
+  </button>
+  <button
+    type="button"
+    class="flex items-center justify-center h-8 w-12 text-neutral-600 dark:text-neutral-400 hover:text-white hover:bg-red-600 transition-colors"
+    :disabled="liveDisabled()"
+    aria-label="Close window"
+    title="Close"
+    @click="handleClose"
+  >
+    <span aria-hidden="true" class="h-3 w-3 i-hugeicons-cancel-01"></span>
+  </button>
+</div>

package/resources/components/Dashboard/index.ts

@@ -4,27 +4,23 @@
  * Export all custom dashboard components for easy importing.
  *
  * Usage:
- * import { Widget, Card, Table, Chart } from '@/components/Dashboard'
+ * import { StatsCard, Card, Table, ChartCard } from '@/components/Dashboard'
  */
 
-export { default as Widget } from './Widget.stx'
-export { default as Card } from './Card.stx'
-export { default as Table } from './Table.stx'
-export { default as Chart } from './Chart.stx'
-
 // UI Components
 export { default as Badge } from './UI/Badge.stx'
 export { default as Button } from './UI/Button.stx'
+export { default as Card } from './UI/Card.stx'
 export { default as Input } from './UI/Input.stx'
 export { default as Select } from './UI/Select.stx'
 export { default as Modal } from './UI/Modal.stx'
 export { default as Tabs } from './UI/Tabs.stx'
+export { default as Table } from './UI/Table.stx'
 export { default as Pagination } from './UI/Pagination.stx'
 export { default as StatsCard } from './UI/StatsCard.stx'
 export { default as PageHeader } from './UI/PageHeader.stx'
 export { default as EmptyState } from './UI/EmptyState.stx'
 export { default as FilterBar } from './UI/FilterBar.stx'
-export { default as DataTable } from './UI/DataTable.stx'
 export { default as ChartCard } from './UI/ChartCard.stx'
 export { default as ConfirmDialog } from './UI/ConfirmDialog.stx'
 export { default as ActivityTable } from './UI/ActivityTable.stx'
@@ -32,19 +28,14 @@ export { default as ServiceHealth } from './UI/ServiceHealth.stx'
 export { default as QuickLinks } from './UI/QuickLinks.stx'
 
 // Re-export types
-export interface WidgetProps {
-  title: string
-  value: string
-  description?: string
-  trend?: string
-  icon?: string
-}
-
 export interface CardProps {
   title?: string
   subtitle?: string
-  actions?: Array<{ label: string, onClick: () => void }>
-  padding?: boolean
+  variant?: 'default' | 'elevated' | 'outline' | 'ghost' | 'vibrancy'
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+  rounded?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
+  hoverable?: boolean
+  clickable?: boolean
 }
 
 export interface TableColumn {
@@ -61,13 +52,6 @@ export interface TableProps {
   hoverable?: boolean
 }
 
-export interface ChartProps {
-  type: 'line' | 'bar' | 'pie' | 'doughnut' | 'area'
-  data: object
-  options?: object
-  height?: string
-}
-
 export interface StatsCardProps {
   title: string
   value: string