@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,173 @@
+```vue
+<script lang="ts" setup>
+import { ref } from '@stacksjs/stx'
+import { Notification, notification } from '@stacksjs/notifications'
+
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'
+type Theme = 'light' | 'dark' | 'system'
+
+const position = ref<Position>('top-right')
+const theme = ref<Theme>('light')
+
+const showBasicNotification = () => {
+  notification('This is a basic notification')
+}
+
+const showSuccessNotification = () => {
+  notification.success('Operation completed successfully!', {
+    description: 'Your changes have been saved.',
+    duration: 3000
+  })
+}
+
+const showErrorNotification = () => {
+  notification.error('Error occurred', {
+    description: 'Please try again later.',
+    closeButton: true
+  })
+}
+
+const showLoadingNotification = () => {
+  const loadingId = notification.loading('Processing your request...', {
+    duration: 3000
+  })
+
+  // Simulate async operation
+  setTimeout(() => {
+    notification.success('Process completed!', {
+      id: loadingId
+    })
+  }, 3000)
+}
+
+const showPromiseNotification = () => {
+  const promise = new Promise((resolve, reject) => {
+    setTimeout(() => {
+      if (Math.random() > 0.5) {
+        resolve('Data successfully fetched!')
+      } else {
+        reject('Failed to fetch data')
+      }
+    }, 2000)
+  })
+
+  notification.promise(promise, {
+    loading: 'Fetching data...',
+    success: (data) => data,
+    error: (error) => error
+  })
+}
+
+const showCustomNotification = () => {
+  notification.custom('Custom Notification', {
+    description: 'This is a custom styled notification',
+    duration: 4000,
+    style: {
+      background: 'linear-gradient(to right, #00b09b, #96c93d)',
+      color: 'white'
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="p-6 space-y-6">
+    <h2 class="mb-4 font-bold text-2xl">Notification Demo</h2>
+
+    <div class="space-y-4">
+      <div class="flex flex-wrap gap-4">
+        <button
+          @click="showBasicNotification"
+          class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded"
+        >
+          Basic Notification
+        </button>
+
+        <button
+          @click="showSuccessNotification"
+          class="px-4 py-2 text-white bg-green-500 hover:bg-green-600 rounded"
+        >
+          Success Notification
+        </button>
+
+        <button
+          @click="showErrorNotification"
+          class="px-4 py-2 text-white bg-red-500 hover:bg-red-600 rounded"
+        >
+          Error Notification
+        </button>
+
+        <button
+          @click="showLoadingNotification"
+          class="px-4 py-2 text-white bg-yellow-500 hover:bg-yellow-600 rounded"
+        >
+          Loading Notification
+        </button>
+
+        <button
+          @click="showPromiseNotification"
+          class="px-4 py-2 text-white bg-purple-500 hover:bg-purple-600 rounded"
+        >
+          Promise Notification
+        </button>
+
+        <button
+          @click="showCustomNotification"
+          class="px-4 py-2 text-white bg-gray-500 hover:bg-gray-600 rounded"
+        >
+          Custom Notification
+        </button>
+      </div>
+
+      <div class="space-y-2">
+        <label class="block">
+          Position:
+          <select
+            v-model="position"
+            class="ml-2 p-1 border rounded"
+          >
+            <option value="top-right">Top Right</option>
+            <option value="top-left">Top Left</option>
+            <option value="bottom-right">Bottom Right</option>
+            <option value="bottom-left">Bottom Left</option>
+            <option value="top-center">Top Center</option>
+            <option value="bottom-center">Bottom Center</option>
+          </select>
+        </label>
+
+        <label class="block">
+          Theme:
+          <select
+            v-model="theme"
+            class="ml-2 p-1 border rounded"
+          >
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+            <option value="system">System</option>
+          </select>
+        </label>
+      </div>
+    </div>
+
+    <Notification
+    :position="position"
+    :theme="theme"
+    :close-button="true"
+  />
+  </div>
+</template>
+
+<style scoped>
+.space-y-6 > * + * {
+  margin-top: 1.5rem;
+}
+
+.space-y-4 > * + * {
+  margin-top: 1rem;
+}
+
+.space-y-2 > * + * {
+  margin-top: 0.5rem;
+}
+</style>
+```

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

@@ -0,0 +1,99 @@
+<script>
+interface NotificationDemoProps {
+  position?: string
+  theme?: string
+}
+
+const { position = 'top-right', theme = 'light' } = defineProps<NotificationDemoProps>()
+</script>
+<div class="max-w-4xl">
+  <DocsPlayground>
+    <div class="flex flex-wrap gap-3">
+      <button
+        class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded"
+        data-action="show-notification"
+        data-type="basic"
+      >
+        Basic Notification
+      </button>
+
+      <button
+        class="px-4 py-2 text-white bg-green-500 hover:bg-green-600 rounded"
+        data-action="show-notification"
+        data-type="success"
+      >
+        Success Notification
+      </button>
+
+      <button
+        class="px-4 py-2 text-white bg-red-500 hover:bg-red-600 rounded"
+        data-action="show-notification"
+        data-type="error"
+      >
+        Error Notification
+      </button>
+
+      <button
+        class="px-4 py-2 text-white bg-yellow-500 hover:bg-yellow-600 rounded"
+        data-action="show-notification"
+        data-type="loading"
+      >
+        Loading Notification
+      </button>
+
+      <button
+        class="px-4 py-2 text-white bg-purple-500 hover:bg-purple-600 rounded"
+        data-action="show-notification"
+        data-type="promise"
+      >
+        Promise Notification
+      </button>
+
+      <button
+        class="px-4 py-2 text-white bg-gray-500 hover:bg-gray-600 rounded"
+        data-action="show-notification"
+        data-type="custom"
+      >
+        Custom Notification
+      </button>
+    </div>
+
+    <div class="mt-3 space-y-2">
+      <label class="block">
+        Position:
+        <select
+          name="position"
+          class="ml-2 p-1 font-semibold text-center text-white bg-blue-500 border rounded"
+          data-action="change-position"
+        >
+          <option value="top-right" {{ position == 'top-right' ? 'selected' : '' }}>Top Right</option>
+          <option value="top-left" {{ position == 'top-left' ? 'selected' : '' }}>Top Left</option>
+          <option value="bottom-right" {{ position == 'bottom-right' ? 'selected' : '' }}>Bottom Right</option>
+          <option value="bottom-left" {{ position == 'bottom-left' ? 'selected' : '' }}>Bottom Left</option>
+          <option value="top-center" {{ position == 'top-center' ? 'selected' : '' }}>Top Center</option>
+          <option value="bottom-center" {{ position == 'bottom-center' ? 'selected' : '' }}>Bottom Center</option>
+        </select>
+      </label>
+
+      <label class="block">
+        Theme:
+        <select
+          name="theme"
+          class="ml-2 p-2 font-semibold text-center text-white bg-blue-500 border rounded"
+          data-action="change-theme"
+        >
+          <option value="light" {{ theme == 'light' ? 'selected' : '' }}>Light</option>
+          <option value="dark" {{ theme == 'dark' ? 'selected' : '' }}>Dark</option>
+          <option value="system" {{ theme == 'system' ? 'selected' : '' }}>System</option>
+        </select>
+      </label>
+    </div>
+
+    <div slot="code">
+      <!-- NotificationCode component would be rendered here -->
+    </div>
+  </DocsPlayground>
+</div>
+
+<!-- Notification container would be rendered here with position and theme props -->
+<div id="notification-container" data-position="{{ position }}" data-theme="{{ theme }}"></div>

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

@@ -0,0 +1,161 @@
+```vue
+
+<script lang="ts" setup>
+import { Popover, PopoverButton, PopoverPanel } from '@stacksjs/popover'
+
+const solutions = [
+  {
+    name: 'Insights',
+    description: 'Measure actions your users take',
+    href: '##',
+    icon: `
+      <svg
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect width="48" height="48" rx="8" fill="#FFEDD5" />
+        <path
+          d="M24 11L35.2583 17.5V30.5L24 37L12.7417 30.5V17.5L24 11Z"
+          stroke="#FB923C"
+          stroke-width="2"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M16.7417 19.8094V28.1906L24 32.3812L31.2584 28.1906V19.8094L24 15.6188L16.7417 19.8094Z"
+          stroke="#FDBA74"
+          stroke-width="2"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M20.7417 22.1196V25.882L24 27.7632L27.2584 25.882V22.1196L24 20.2384L20.7417 22.1196Z"
+          stroke="#FDBA74"
+          stroke-width="2"
+        />
+      </svg>
+    `,
+  },
+  {
+    name: 'Automations',
+    description: 'Create your own targeted content',
+    href: '##',
+    icon: `
+      <svg
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect width="48" height="48" rx="8" fill="#FFEDD5" />
+        <path
+          d="M28.0413 20L23.9998 13L19.9585 20M32.0828 27.0001L36.1242 34H28.0415M19.9585 34H11.8755L15.9171 27"
+          stroke="#FB923C"
+          stroke-width="2"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M18.804 30H29.1963L24.0001 21L18.804 30Z"
+          stroke="#FDBA74"
+          stroke-width="2"
+        />
+      </svg>
+    `,
+  },
+  {
+    name: 'Reports',
+    description: 'Keep track of your growth',
+    href: '##',
+    icon: `
+      <svg
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <rect width="48" height="48" rx="8" fill="#FFEDD5" />
+        <rect x="13" y="32" width="2" height="4" fill="#FDBA74" />
+        <rect x="17" y="28" width="2" height="8" fill="#FDBA74" />
+        <rect x="21" y="24" width="2" height="12" fill="#FDBA74" />
+        <rect x="25" y="20" width="2" height="16" fill="#FDBA74" />
+        <rect x="29" y="16" width="2" height="20" fill="#FB923C" />
+        <rect x="33" y="12" width="2" height="24" fill="#FB923C" />
+      </svg>
+    `,
+  },
+]
+
+</script>
+
+<template>
+  <Popover v-slot="{ open }" class="relative">
+    <PopoverButton
+      :class=": ? 'text-white' 'text-white/90' open"
+      class="inline-flex gap-2 items-center justify-center px-4 py-2.5 font-medium text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-sm duration-200 transition-all group"
+    >
+      <span>Example</span>
+      <div class="h-5 w-5 i-hugeicons-arrow-down-01" />
+    </PopoverButton>
+
+    <transition
+      enter-active-class="duration-200 ease-out transition"
+      enter-from-class="opacity-0 translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="duration-150 ease-in transition"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <PopoverPanel
+        class="absolute left-1/2 z-50 mt-3 px-4 sm:px-0 max-w-sm w-screen transform -translate-x-1/2"
+      >
+        <div class="overflow-hidden ring-1 ring-black/5 rounded-lg shadow-lg">
+          <div class="flex relative flex-col gap-8 lg:grid-cols-2 p-7 bg-white">
+            <a
+              v-for="item in solutions"
+              :key="item.name"
+              :href="item.href"
+              class="flex items-center -m-3 p-2 hover:bg-gray-50 rounded-lg focus-visible:ring focus-visible:ring-orange-500/50 focus:outline-none duration-150 ease-in-out transition"
+            >
+              <div
+                class="flex items-center justify-center shrink-0 h-10 w-10 sm:h-12 sm:w-12 text-white"
+              >
+                <div v-html="item.icon" />
+              </div>
+              <div class="ml-4">
+                <p class="font-medium text-gray-900 text-sm">
+                  {{ item.name }}
+                </p>
+                <p class="text-gray-500 text-sm">
+                  {{ item.description }}
+                </p>
+              </div>
+            </a>
+          </div>
+          <div class="p-4 bg-gray-50">
+            <a
+              href="##"
+              class="flow-root px-2 py-2 hover:bg-gray-100 rounded-md focus-visible:ring focus-visible:ring-orange-500/50 focus:outline-none duration-150 ease-in-out transition"
+            >
+              <span class="flex items-center">
+                <span class="font-medium text-gray-900 text-sm">
+                  Documentation
+                </span>
+              </span>
+              <span class="block text-gray-500 text-sm">
+                Start integrating products and tools
+              </span>
+            </a>
+          </div>
+        </div>
+      </PopoverPanel>
+    </transition>
+  </Popover>
+</template>
+```

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

@@ -0,0 +1,96 @@
+<script>
+interface PopoverDemoProps {
+  solutions?: string
+  isOpen?: boolean
+}
+
+const { solutions = [, isOpen = false } = defineProps<PopoverDemoProps>()
+
+{
+    name: 'Insights',
+    description: 'Measure actions your users take',
+    href: '##',
+    iconBg: '#FFEDD5',
+    iconStroke: '#FB923C',
+  },
+  {
+    name: 'Automations',
+    description: 'Create your own targeted content',
+    href: '##',
+    iconBg: '#FFEDD5',
+    iconStroke: '#FB923C',
+  },
+  {
+    name: 'Reports',
+    description: 'Keep track of your growth',
+    href: '##',
+    iconBg: '#FFEDD5',
+    iconStroke: '#FB923C',
+  },
+]
+</script>
+<div class="max-w-4xl">
+  <DocsPlayground>
+    <div class="items-center mx-auto my-12 space-y-4 h-[150px] w-3/5">
+      <div class="relative">
+        <button
+          class="inline-flex gap-2 items-center justify-center px-4 py-2.5 font-medium text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-sm duration-200 transition-all : ? 'text-white' 'text-white/90' {{ }} group isOpen"
+          data-action="toggle-popover"
+        >
+          <span>Example</span>
+          <div class="h-5 w-5 i-hugeicons-arrow-down-01"></div>
+        </button>
+
+        @if(isOpen)
+          <div class="absolute left-1/2 z-50 mt-3 px-4 sm:px-0 max-w-sm w-screen transform -translate-x-1/2">
+            <div class="overflow-hidden ring-1 ring-black/5 rounded-lg shadow-lg">
+              <div class="flex relative flex-col gap-8 lg:grid-cols-2 p-7 bg-white">
+                @foreach(solutions as item)
+                  <a
+                    href="{{ item.href }}"
+                    class="flex items-center -m-3 p-2 hover:bg-gray-50 rounded-lg focus-visible:ring focus-visible:ring-orange-500/50 focus:outline-none duration-150 ease-in-out transition"
+                  >
+                    <div class="flex items-center justify-center shrink-0 h-10 w-10 sm:h-12 sm:w-12 text-white">
+                      <div class="h-12 w-12 rounded-lg" style="background: {{ item.iconBg }}">
+                        <svg class="p-2 h-full w-full" viewBox="0 0 24 24" fill="none" stroke="{{ item.iconStroke }}" stroke-width="1.5">
+                          <circle cx="12" cy="12" r="8" />
+                        </svg>
+                      </div>
+                    </div>
+                    <div class="ml-4">
+                      <p class="font-medium text-gray-900 text-sm">
+                        {{ item.name }}
+                      </p>
+                      <p class="text-gray-500 text-sm">
+                        {{ item.description }}
+                      </p>
+                    </div>
+                  </a>
+                @endforeach
+              </div>
+              <div class="p-4 bg-gray-50">
+                <a
+                  href="##"
+                  class="flow-root px-2 py-2 hover:bg-gray-100 rounded-md focus-visible:ring focus-visible:ring-orange-500/50 focus:outline-none duration-150 ease-in-out transition"
+                >
+                  <span class="flex items-center">
+                    <span class="font-medium text-gray-900 text-sm">
+                      Documentation
+                    </span>
+                  </span>
+                  <span class="block text-gray-500 text-sm">
+                    Start integrating products and tools
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        @endif
+      </div>
+    </div>
+
+    <div slot="code">
+      <!-- PopoverCode component would be rendered here -->
+    </div>
+  </DocsPlayground>
+</div>

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

@@ -0,0 +1,98 @@
+```vue
+<script lang="ts" setup>
+import { ref } from '@stacksjs/stx'
+import { RadioGroup, RadioGroupLabel, RadioGroupOption, RadioGroupDescription } from '@stacksjs/radio-group'
+
+const plans = [
+  {
+    name: 'Startup',
+    ram: '12GB',
+    cpus: '6 CPUs',
+    disk: '160 GB SSD disk',
+  },
+  {
+    name: 'Business',
+    ram: '16GB',
+    cpus: '8 CPUs',
+    disk: '512 GB SSD disk',
+  },
+  {
+    name: 'Enterprise',
+    ram: '32GB',
+    cpus: '12 CPUs',
+    disk: '1024 GB SSD disk',
+  },
+]
+
+const selected = ref(plans[0])
+</script>
+
+<template>
+  <RadioGroup v-model="selected">
+    <RadioGroupLabel class="sr-only">
+      Server size
+    </RadioGroupLabel>
+    <div class="space-y-2">
+      <RadioGroupOption
+        v-for="plan in plans"
+        :key="plan.name"
+        v-slot="{ active, checked }"
+        as="template"
+        :value="plan"
+      >
+        <div
+          :class="[
+            active
+              ? 'ring-2 ring-white/60 ring-offset-2 ring-offset-sky-300'
+              : '',
+            checked ? 'bg-sky-900/75 text-white ' : 'bg-white ',
+          ]"
+          class="flex relative px-5 py-4 rounded-lg focus:outline-none shadow-md cursor-pointer"
+        >
+          <div class="flex items-center justify-between w-full">
+            <div class="flex items-center">
+              <div class="text-sm">
+                <RadioGroupLabel
+                  as="p"
+                  :class=": ? 'text-gray-900' 'text-white' checked"
+                  class="font-medium"
+                >
+                  {{ plan.name }}
+                </RadioGroupLabel>
+                <RadioGroupDescription
+                  as="span"
+                  :class=": ? 'text-gray-500' 'text-sky-100' checked"
+                  class="inline"
+                >
+                  <span> {{ plan.ram }}/{{ plan.cpus }}</span>
+                  <span aria-hidden="true"> &middot; </span>
+                  <span>{{ plan.disk }}</span>
+                </RadioGroupDescription>
+              </div>
+            </div>
+            <div v-show="checked" class="shrink-0 text-white">
+              <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="12"
+                  fill="#fff"
+                  fill-opacity="0.2"
+                />
+                <path
+                  d="M7 13l3 3 7-7"
+                  stroke="#fff"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </RadioGroupOption>
+    </div>
+  </RadioGroup>
+</template>
+
+```

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

@@ -0,0 +1,53 @@
+<script>
+interface RadioGroupDemoProps {
+  plans?: string
+  selected?: boolean
+}
+
+const { plans = [, selected = plans[0] } = defineProps<RadioGroupDemoProps>()
+
+{ name: 'Startup', ram: '12GB', cpus: '6 CPUs', disk: '160 GB SSD disk' },
+  { name: 'Business', ram: '16GB', cpus: '8 CPUs', disk: '512 GB SSD disk' },
+  { name: 'Enterprise', ram: '32GB', cpus: '12 CPUs', disk: '1024 GB SSD disk' },
+]
+</script>
+<div class="max-w-4xl">
+    <DocsPlayground>
+      <div class="space-y-2">
+        @foreach(plans as plan)
+          <div
+            class="flex relative px-5 py-4 text-white ring-2 ring-offset-2 ring-offset-sky-300' ring-white/60 rounded-lg focus:outline-none shadow-md cursor-pointer selected.name : ? 'bg-sky-900/75 'bg-white' {{ }} == plan.name"
+            data-action="select-plan"
+            data-plan-name="{{ plan.name }}"
+          >
+            <div class="flex items-center justify-between w-full">
+              <div class="flex items-center">
+                <div class="text-sm">
+                  <p class="font-medium selected.name : ? 'text-gray-900' 'text-white' {{ }} == plan.name">
+                    {{ plan.name }}
+                  </p>
+                  <span class="inline selected.name : ? 'text-gray-500' 'text-sky-100' {{ }} == plan.name">
+                    <span>{{ plan.ram }}/{{ plan.cpus }}</span>
+                    <span aria-hidden="true"> &middot; </span>
+                    <span>{{ plan.disk }}</span>
+                  </span>
+                </div>
+              </div>
+              @if(selected.name == plan.name)
+                <div class="shrink-0 text-white">
+                  <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
+                    <circle cx="12" cy="12" r="12" fill="#fff" fill-opacity="0.2" />
+                    <path d="M7 13l3 3 7-7" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                  </svg>
+                </div>
+              @endif
+            </div>
+          </div>
+        @endforeach
+      </div>
+
+      <div slot="code">
+        <!-- RadioGroupDemoCode component would be rendered here -->
+      </div>
+    </DocsPlayground>
+  </div>