@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,135 @@
+<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>()
+
+import { isCraftNative, useWindowControls } from '../../../../functions/craft'
+
+  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 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()
+
+  // Window control handlers
+  function handleClose() {
+    windowControls.close()
+  }
+
+  function handleMinimize() {
+    windowControls.minimize()
+  }
+
+  function handleMaximize() {
+    windowControls.toggle()
+  }
+
+  // Check if running in native app
+  const isNative = isCraftNative()
+</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 -->
+    <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"
+    >
+      <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>
+    </button>
+
+    <!-- Maximize 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-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
+      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>
+    </button>
+
+    <!-- Maximize -->
+    <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
+      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>
+    </button>
+
+    <!-- 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>

package/resources/components/Dashboard/Widget.stx

@@ -0,0 +1,89 @@
+<!--
+  Custom Dashboard Widget Component
+
+  Use this component to create reusable widgets for your dashboard.
+  Import this in your dashboard pages using:
+
+  <script>
+interface WidgetProps {
+  title: string
+  value: string
+  description?: string
+  trend?: string
+  icon?: string
+}
+
+const { title, value, description, trend, icon } = defineProps<WidgetProps>()
+</script>
+-->
+
+<script>
+interface WidgetProps {
+  title: string
+  value: string
+  description?: string
+  trend?: string
+  icon?: string
+}
+
+const { title, value, description = '', trend = '', icon = '' } = defineProps<WidgetProps>()
+</script>
+<div class="widget">
+    <div class="widget-header">
+      @if (icon)
+        <div class="widget-icon">{{ icon }}</div>
+      @endif
+      <h3 class="widget-title">{{ title }}</h3>
+    </div>
+    <div class="widget-value">{{ value }}</div>
+    @if (description)
+      <div class="widget-description">{{ description }}</div>
+    @endif
+    @if (trend)
+      <div class="widget-trend {{ trend.startsWith('+') ? 'positive' : 'negative' }}">
+        {{ trend }}
+      </div>
+    @endif
+  </div>
+<style>
+.widget {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  padding: 1.25rem;
+}
+.widget-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+.widget-icon {
+  font-size: 1.25rem;
+}
+.widget-title {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+.widget-value {
+  font-size: 1.75rem;
+  font-weight: 600;
+}
+.widget-description {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  margin-top: 0.25rem;
+}
+.widget-trend {
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-top: 0.5rem;
+}
+.widget-trend.positive {
+  color: var(--color-success);
+}
+.widget-trend.negative {
+  color: var(--color-error);
+}
+</style>

package/resources/components/Dashboard/WindowControls.stx

@@ -0,0 +1,119 @@
+<script>
+interface WindowControlsProps {
+  size?: string
+  variant?: string
+}
+
+const { size = 'sm', variant = 'macos' } = defineProps<WindowControlsProps>()
+
+/**
+ * WindowControls Component
+ * macOS-style traffic light window controls (close, minimize, maximize)
+ */
+
+const sizeClasses = {
+  xs: 'w-2 h-2',
+  sm: 'w-2.5 h-2.5',
+  md: 'w-3 h-3',
+  lg: 'w-3.5 h-3.5'
+}
+
+const gapClasses = {
+  xs: 'gap-1',
+  sm: 'gap-1.5',
+  md: 'gap-2',
+  lg: 'gap-2'
+}
+
+function getSizeClass() {
+  return sizeClasses[size || 'sm']
+}
+
+function getGapClass() {
+  return gapClasses[size || 'sm']
+}
+
+function getVariant() {
+  return variant || 'macos'
+}
+</script>
+@if(getVariant() === 'macos')
+    <!-- macOS-style traffic light controls -->
+    <div class="flex items-center {{ getGapClass() }} group">
+      <!-- Close button (red) -->
+      <button
+        type="button"
+        class="relative {{ getSizeClass() }} rounded-full bg-[#ff5f57] hover:bg-[#ff5f57] transition-colors focus:outline-none focus:ring-2 focus:ring-red-500/50"
+        data-action="window-close"
+        title="Close"
+      >
+        <span class="sr-only">Close</span>
+        <!-- X icon on hover -->
+        <svg class="absolute inset-0 m-auto h-1.5 w-1.5 text-[#4d0000] opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+
+      <!-- Minimize button (yellow) -->
+      <button
+        type="button"
+        class="relative {{ getSizeClass() }} rounded-full bg-[#febc2e] hover:bg-[#febc2e] transition-colors focus:outline-none focus:ring-2 focus:ring-yellow-500/50"
+        data-action="window-minimize"
+        title="Minimize"
+      >
+        <span class="sr-only">Minimize</span>
+        <!-- Minus icon on hover -->
+        <svg class="absolute inset-0 m-auto h-1.5 w-1.5 text-[#995700] opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M5 12h14"></path>
+        </svg>
+      </button>
+
+      <!-- Maximize button (green) -->
+      <button
+        type="button"
+        class="relative {{ getSizeClass() }} rounded-full bg-[#28c840] hover:bg-[#28c840] transition-colors focus:outline-none focus:ring-2 focus:ring-green-500/50"
+        data-action="window-maximize"
+        title="Maximize"
+      >
+        <span class="sr-only">Maximize</span>
+        <!-- Expand icon on hover -->
+        <svg class="absolute inset-0 m-auto h-1.5 w-1.5 text-[#006500] opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M4 14h6m0 0v6m0-6L3 21M20 10h-6m0 0V4m0 6l7-7"></path>
+        </svg>
+      </button>
+    </div>
+  @else
+    <!-- Windows-style controls -->
+    <div class="flex items-center">
+      <button
+        type="button"
+        class="p-1.5 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded transition-colors"
+        data-action="window-minimize"
+        title="Minimize"
+      >
+        <svg class="h-3 w-3 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M5 12h14"></path>
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="p-1.5 hover:bg-neutral-200 dark:hover:bg-neutral-700 rounded transition-colors"
+        data-action="window-maximize"
+        title="Maximize"
+      >
+        <svg class="h-3 w-3 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <rect x="4" y="4" width="16" height="16" rx="2"></rect>
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="p-1.5 hover:text-white hover:bg-red-500 rounded transition-colors"
+        data-action="window-close"
+        title="Close"
+      >
+        <svg class="h-3 w-3 text-neutral-600 dark:text-neutral-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+  @endif

package/resources/components/Dashboard/index.ts

@@ -0,0 +1,106 @@
+/**
+ * Dashboard Components
+ *
+ * Export all custom dashboard components for easy importing.
+ *
+ * Usage:
+ * import { Widget, Card, Table, Chart } 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 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 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'
+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
+}
+
+export interface TableColumn {
+  key: string
+  label: string
+  align?: 'left' | 'center' | 'right'
+  render?: (value: any, row: any) => string
+}
+
+export interface TableProps {
+  columns: TableColumn[]
+  data: any[]
+  striped?: boolean
+  hoverable?: boolean
+}
+
+export interface ChartProps {
+  type: 'line' | 'bar' | 'pie' | 'doughnut' | 'area'
+  data: object
+  options?: object
+  height?: string
+}
+
+export interface StatsCardProps {
+  title: string
+  value: string
+  subtitle?: string
+  trend?: number
+  trendLabel?: string
+  icon?: string
+  iconBg?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'
+  loading?: boolean
+}
+
+export interface BadgeProps {
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  rounded?: 'default' | 'full'
+  outline?: boolean
+  dot?: boolean
+  text?: string
+}
+
+export interface FilterBarProps {
+  searchPlaceholder?: string
+  searchValue?: string
+  showItemsPerPage?: boolean
+  itemsPerPage?: number
+  itemsPerPageOptions?: number[]
+}
+
+export interface ConfirmDialogProps {
+  isOpen?: boolean
+  title?: string
+  description?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: 'danger' | 'warning'
+}

package/resources/components/Docs/Demo/ComboboxCode.md

@@ -0,0 +1,114 @@
+```vue
+<script lang="ts" setup>
+import { ref, computed } from '@stacksjs/stx'
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+} from '@stacksjs/combobox'
+import { TransitionRoot } from '@stacksjs/transition'
+
+interface Person {
+  id: number
+  name: string
+}
+
+const defaultItems = [
+  { id: 1, name: 'Chris Breuer' },
+  { id: 2, name: 'Avery Hill' },
+  { id: 3, name: 'Glenn Michael' },
+  { id: 4, name: 'Michael Vincent' },
+  { id: 5, name: 'Blake Ayer' },
+]
+
+const listItems = ref(defaultItems)
+const selected = ref(null)
+const query = ref('')
+const isOpen = ref(false)
+
+const items = computed(() => {
+  return query.value === ''
+    ? listItems.value
+    : listItems.value.filter((item) =>
+        item.name.toLowerCase().includes(query.value.toLowerCase())
+      )
+})
+</script>
+
+<template>
+  <div class="relative">
+    <Combobox v-model="selected" as="div" class="relative">
+      <div class="relative">
+        <ComboboxInput
+          class="placeholder-gray-400 pl-3 pr-10 py-2.5 w-full text-base text-gray-900 bg-white border border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-sm duration-200 transition-all"
+          :display-value="(person) => person?.name"
+          placeholder="Search people..."
+          @change="query = $event.target.value"
+          @focus="isOpen = true"
+        />
+        <ComboboxButton
+          class="flex absolute inset-y-0 right-0 items-center pr-2 text-gray-400 hover:text-gray-500"
+        >
+          <div class="h-5 w-5 i-hugeicons-chevron-up-down-20-solid" />
+        </ComboboxButton>
+      </div>
+
+      <TransitionRoot
+        :show="isOpen"
+        leave="transition ease-in duration-100"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+        @after-leave="query = ''"
+      >
+        <ComboboxOptions
+          class="absolute overflow-auto z-10 mt-1 py-1 max-h-60 w-full text-base bg-white ring-1 ring-black/5 rounded-md focus:outline-none shadow-lg"
+        >
+          <div
+            v-if="items.length === 0"
+            class="relative px-4 py-2 text-gray-700 cursor-default select-none"
+          >
+            No results found.
+          </div>
+
+          <ComboboxOption
+            v-for="item in items"
+            :key="item.id"
+            :value="item"
+            v-slot="{ selected: isSelected, active }"
+            as="template"
+          >
+            <li
+              class="relative pl-10 pr-4 py-2 cursor-default select-none"
+              :class="!active, 'bg-indigo-600 'text-gray-900': { } active, text-white':"
+            >
+              <span
+                class="block truncate"
+                :class="!isSelected 'font-medium': 'font-normal': { } isSelected,"
+              >
+                {{ item.name }}
+              </span>
+              <span
+                v-if="isSelected"
+                class="flex absolute inset-y-0 left-0 items-center pl-3"
+                :class="!active 'text-indigo-600': 'text-white': { } active,"
+              >
+                <div class="h-5 w-5 i-hugeicons-check-20-solid" />
+              </span>
+            </li>
+          </ComboboxOption>
+        </ComboboxOptions>
+      </TransitionRoot>
+    </Combobox>
+
+    <div v-if="selected" class="mt-4 p-4 bg-gray-50 border border-gray-200 rounded-lg">
+      <span class="font-medium text-gray-500 text-sm">Selected Person</span>
+      <div class="flex gap-2 items-center">
+        <span class="font-semibold text-gray-900 text-lg">{{ selected.name }}</span>
+        <span class="text-gray-500 text-sm">(ID: {{ selected.id }})</span>
+      </div>
+    </div>
+  </div>
+</template>
+```

package/resources/components/Docs/Demo/ComboboxDemo.stx

@@ -0,0 +1,91 @@
+<script>
+interface ComboboxDemoProps {
+  listItems?: string
+  selected?: any
+  query?: string
+  isOpen?: boolean
+}
+
+const { listItems = [, selected = null, query = '', isOpen = false } = defineProps<ComboboxDemoProps>()
+
+{ id: 1, name: 'Chris Breuer' },
+  { id: 2, name: 'Avery Hill' },
+  { id: 3, name: 'Glenn Michael' },
+  { id: 4, name: 'Michael Vincent' },
+  { id: 5, name: 'Blake Ayer' },
+]
+function filterItems(items, query) {
+  if (query === '') return items
+  return items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()))
+}
+</script>
+<div class="demo-wrapper">
+  <DocsPlayground>
+    <div class="flex flex-col mx-auto py-10 max-w-full w-full">
+      <main class="grid gap-8 grid-cols-1 text-primary text-xs 2xl:text-sm">
+        <div class="relative items-center mx-auto w-1/2">
+          <div class="relative">
+            <div class="relative">
+              <input
+                type="text"
+                class="placeholder-gray-400 pl-3 pr-10 py-2.5 w-full text-base text-gray-900 bg-white border border-gray-300 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-sm duration-200 transition-all"
+                placeholder="Search people..."
+                value="{{ selected ? selected.name : '' }}"
+                data-action="combobox-input"
+              >
+              <button
+                class="flex absolute inset-y-0 right-0 items-center pr-2 text-gray-400 hover:text-gray-500"
+                data-action="toggle-dropdown"
+              >
+                <div class="h-5 w-5 i-hugeicons-chevron-up-down-20-solid"></div>
+              </button>
+            </div>
+
+            @if(isOpen)
+              <div class="absolute overflow-auto z-10 mt-1 py-1 max-h-60 w-full text-base bg-white ring-1 ring-black/5 rounded-md focus:outline-none shadow-lg">
+                @if(filterItems(listItems, query).length == 0)
+                  <div class="relative px-4 py-2 text-gray-700 cursor-default select-none">
+                    No results found.
+                  </div>
+                @endif
+
+                @foreach(filterItems(listItems, query) as item)
+                  <div
+                    class="relative pl-10 pr-4 py-2 text-gray-900 hover:text-white hover:bg-indigo-600 cursor-default select-none"
+                    data-action="select-item"
+                    data-item-id="{{ item.id }}"
+                    data-item-name="{{ item.name }}"
+                  >
+                    <span class="block truncate selected selected.id : ? 'font-medium' 'font-normal' {{ }} && == item.id">
+                      {{ item.name }}
+                    </span>
+                    @if(selected && selected.id == item.id)
+                      <span class="flex absolute inset-y-0 left-0 items-center pl-3 text-indigo-600">
+                        <div class="h-5 w-5 i-hugeicons-check-20-solid"></div>
+                      </span>
+                    @endif
+                  </div>
+                @endforeach
+              </div>
+            @endif
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <div slot="code">
+      <!-- ComboboxCode component would be rendered here -->
+    </div>
+  </DocsPlayground>
+</div>
+<style>
+.demo-wrapper {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+}
+
+button {
+  border: 0px solid #000;
+}
+</style>