@stacksjs/defaults 0.70.54

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

@@ -0,0 +1,42 @@
+```vue
+<!-- App.vue -->
+<script lang="ts" setup>
+import { Dialog, DialogPanel } from '@stacksjs/dialog'
+
+const visible = ref(false)
+
+const handleClose = () => {
+  visible.value = false
+}
+</script>
+
+<template>
+  <Transition name="fade" appear>
+    <Dialog v-if="visible" @close="handleClose">
+
+      <Transition name="fade" appear>
+        <DialogPanel as="div">
+          <h2>Greetings! This is a dialog.</h2>
+        </DialogPanel>
+      </Transition>
+    </Dialog>
+  </Transition>
+
+  <button @click="visible = true">
+    Open Dialog
+  </button>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .4s linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
+
+```

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

@@ -0,0 +1,76 @@
+<script>
+interface DialogDemoProps {
+  visible?: boolean
+  currentTransition?: string
+}
+
+const { visible = false, currentTransition = 'fade' } = defineProps<DialogDemoProps>()
+</script>
+<div class="max-w-4xl">
+  <DocsPlayground>
+    <div class="flex flex-col items-center justify-center mb-12 space-y-4 h-[300px]">
+      <button
+        class="inline-flex items-center px-4 py-2 font-medium text-sm text-white bg-indigo-600 hover:bg-indigo-700 border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-sm duration-200 transition-colors"
+        data-action="open-dialog"
+      >
+        <div class="mr-2 h-5 w-5"></div>
+        <i class="hgi hgi-check hgi-stroke"></i> Show Dialog
+      </button>
+    </div>
+
+    <div slot="code">
+      <!-- DialogCode component would be rendered here -->
+    </div>
+  </DocsPlayground>
+
+  <!-- Dialog Component -->
+  @if(visible)
+    <div class="relative z-50">
+      <div class="fixed inset-0 bg-black/30" aria-hidden="true" data-action="close-dialog"></div>
+
+      <div class="flex fixed inset-0 items-center justify-center p-4">
+        <div class="mx-auto p-6 max-w-sm bg-white rounded-xl shadow-xl">
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="font-medium text-gray-900 text-lg">Dialog Title</h3>
+            <button
+              class="p-1 text-gray-400 hover:text-gray-500 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              data-action="close-dialog"
+            >
+              <div class="h-5 w-5 i-hugeicons-cancel-01-20-solid"></div>
+            </button>
+          </div>
+
+          <p class="text-gray-500 text-sm">
+            Here is the content of the dialog. You can customize this content to show any information you need.
+          </p>
+
+          <div class="flex gap-3 justify-end mt-6">
+            <button
+              class="inline-flex items-center px-3 py-2 font-medium text-gray-700 text-sm bg-white hover:bg-gray-50 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              data-action="close-dialog"
+            >
+              Cancel
+            </button>
+            <button
+              class="inline-flex items-center px-3 py-2 font-medium text-sm text-white bg-indigo-600 hover:bg-indigo-700 border border-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              data-action="close-dialog"
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  @endif
+</div>
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .4s linear;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,39 @@
+<script>
+interface DocsPlaygroundProps {
+  isPreviewMode?: boolean
+}
+
+const { isPreviewMode = true } = defineProps<DocsPlaygroundProps>()
+</script>
+<div class="flex flex-col gap-4">
+  <div class="flex flex-col gap-2">
+    <div class="relative bg-gray-100 dark:bg-neutral-800 rounded-lg">
+      <div class="flex items-stretch justify-end px-3 py-1 md:m-1 bg-gray-100 dark:bg-neutral-800 rounded-t-[10px] md:rounded-lg">
+        <button
+          class="flex mr-1 px-3 py-2 font-medium text-blue-500' text-xs dark:text-neutral-300 hover:bg-gray-300 dark:hover:bg-neutral-600' rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 pointer-events-auto : ? 'bg-white 'text-gray-600 {{ }} isPreviewMode"
+          data-action="toggle-preview"
+        >
+          Preview
+        </button>
+        <button
+          class="flex px-3 py-2 font-medium text-blue-500' text-xs dark:text-neutral-300 hover:bg-gray-300 dark:hover:bg-neutral-600' rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 pointer-events-auto : !isPreviewMode ? 'bg-white 'text-gray-600 {{ }}"
+          data-action="toggle-code"
+        >
+          Code
+        </button>
+      </div>
+
+      <div>
+        @if(isPreviewMode)
+          <div class="relative z-30 px-4 py-4 h-full">
+            <slot />
+          </div>
+        @else
+          <div class="overflow-auto relative z-30 h-[350px] text-sm">
+            <slot name="code" />
+          </div>
+        @endif
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,109 @@
+```vue
+<script lang="ts" setup>
+import { ref } from '@stacksjs/stx'
+import { Dropdown, DropdownButton, DropdownItem, DropdownItems } from '@stacksjs/dropdown'
+
+interface MenuItem {
+  icon?: string
+  label?: string
+  action?: () => void
+  divider?: boolean
+  variant?: 'danger' | 'default'
+}
+
+type MenuSection = (MenuItem | { divider: true })[]
+
+const menuItems: MenuSection = [
+  { icon: 'i-hugeicons-pencil-20-solid', label: 'Edit', action: () => console.log('Edit clicked') },
+  { icon: 'i-hugeicons-document-duplicate-20-solid', label: 'Duplicate', action: () => console.log('Duplicate clicked') },
+  { divider: true },
+  { icon: 'i-hugeicons-archive-box-20-solid', label: 'Archive', action: () => console.log('Archive clicked') },
+  { icon: 'i-hugeicons-arrow-path-20-solid', label: 'Move', action: () => console.log('Move clicked') },
+  { divider: true },
+  { icon: 'i-hugeicons-trash-20-solid', label: 'Delete', variant: 'danger', action: () => console.log('Delete clicked') },
+]
+
+const isOpen = ref(false)
+
+function groupMenuItems(items: MenuSection): MenuItem[][] {
+  return items.reduce((acc: MenuItem[][], item) => {
+    if ('divider' in item && item.divider && acc.length > 0) {
+      acc.push([])
+    } else if (!('divider' in item) || !item.divider) {
+      if (acc.length === 0) acc.push([])
+      acc[acc.length - 1].push(item as MenuItem)
+    }
+    return acc
+  }, [])
+}
+</script>
+
+<template>
+  <Dropdown v-model="isOpen" as="div" class="inline-block relative text-left">
+    <DropdownButton
+      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"
+    >
+      Options
+      <div
+        class="h-5 w-5 duration-200 transition-transform i-hugeicons-chevron-down-20-solid"
+        :class="'rotate-180': { } isOpen"
+      />
+    </DropdownButton>
+
+    <transition
+      enter-active-class="duration-100 ease-out transition"
+      enter-from-class="opacity-0 scale-95 transform"
+      enter-to-class="opacity-100 scale-100 transform"
+      leave-active-class="duration-75 ease-in transition"
+      leave-from-class="opacity-100 scale-100 transform"
+      leave-to-class="opacity-0 scale-95 transform"
+    >
+      <DropdownItems
+        class="absolute right-0 mt-2 w-56 bg-white divide-gray-100 divide-y ring-1 ring-black/5 rounded-lg focus:outline-none shadow-lg origin-top-right"
+      >
+        <div
+          v-for="(section, index) in groupMenuItems(menuItems)"
+          :key="index"
+          class="p-1"
+        >
+          <DropdownItem
+            v-for="(item, itemIndex) in section"
+            :key="itemIndex"
+            v-slot="{ active }"
+            @click="item.action?.()"
+          >
+            <button
+              type="button"
+              class="flex relative items-center px-2 py-2 w-full text-sm outline-none rounded-md transition-colors group"
+              :class="[
+                active
+                  ? item.variant === 'danger'
+                    ? 'bg-red-500 text-white'
+                    : 'bg-indigo-500 text-white'
+                  : item.variant === 'danger'
+                    ? 'text-red-600 hover:bg-red-50'
+                    : 'text-gray-700 hover:bg-gray-50',
+              ]"
+            >
+              <div
+                v-if="item.icon"
+                :class="[
+                  item.icon,
+                  'mr-2 h-5 w-5',
+                  active
+                    ? 'text-white'
+                    : item.variant === 'danger'
+                      ? 'text-red-600'
+                      : 'text-gray-500 group-hover:text-gray-700'
+                ]"
+              />
+              {{ item.label }}
+            </button>
+          </DropdownItem>
+        </div>
+      </DropdownItems>
+    </transition>
+  </Dropdown>
+</template>
+
+```

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

@@ -0,0 +1,82 @@
+<script>
+interface DropdownDemoProps {
+  menuItems?: string
+  isOpen?: boolean
+}
+
+const { menuItems = [, isOpen = false } = defineProps<DropdownDemoProps>()
+
+{ icon: 'i-hugeicons-pencil-20-solid', label: 'Edit' },
+  { icon: 'i-hugeicons-document-duplicate-20-solid', label: 'Duplicate' },
+  { divider: true },
+  { icon: 'i-hugeicons-archive-box-20-solid', label: 'Archive' },
+  { icon: 'i-hugeicons-arrow-path-20-solid', label: 'Move' },
+  { divider: true },
+  { icon: 'i-hugeicons-trash-20-solid', label: 'Delete', variant: 'danger' },
+]
+function getMenuSections(items) {
+  const sections = []
+  let currentSection = []
+
+  for (const item of items) {
+    if (item.divider) {
+      if (currentSection.length > 0) {
+        sections.push(currentSection)
+        currentSection = []
+      }
+    } else {
+      currentSection.push(item)
+    }
+  }
+
+  if (currentSection.length > 0) {
+    sections.push(currentSection)
+  }
+
+  return sections
+}
+</script>
+<div class="max-w-4xl">
+  <DocsPlayground>
+    <div class="flex flex-col items-center justify-center mb-12 space-y-4 h-[200px]">
+      <div class="inline-block relative text-left">
+        <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"
+          data-action="toggle-dropdown"
+        >
+          Options
+          <div class="h-5 w-5 duration-200 transition-transform : ? '' 'rotate-180' {{ }} i-hugeicons-chevron-down-20-solid isOpen"></div>
+        </button>
+
+        @if(isOpen)
+          <div class="absolute right-0 mt-2 w-56 bg-white divide-gray-100 divide-y ring-1 ring-black/5 rounded-lg focus:outline-none shadow-lg origin-top-right">
+            @foreach(getMenuSections(menuItems) as section)
+              <div class="p-1">
+                @foreach(section as item)
+                  <button
+                    type="button"
+                    class="flex relative items-center px-2 py-2 w-full text-sm hover:bg-gray-50' hover:bg-red-50' outline-none rounded-md transition-colors : ? 'danger' 'text-gray-700 'text-red-600 {{ }} == group item.variant"
+                    data-action="menu-item"
+                    data-item-label="{{ item.label }}"
+                  >
+                    <div class="mr-2 h-5 w-5 group-hover:text-gray-700' : ? 'danger' 'text-gray-500 'text-red-600' {{ {{ }} }} == item.icon item.variant"></div>
+                    {{ item.label }}
+                  </button>
+                @endforeach
+              </div>
+            @endforeach
+          </div>
+        @endif
+      </div>
+    </div>
+
+    <div slot="code">
+      <!-- DropdownCode component would be rendered here -->
+    </div>
+  </DocsPlayground>
+</div>
+<style>
+.rotate-180 {
+  transform: rotate(180deg);
+}
+</style>

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

@@ -0,0 +1,100 @@
+<script>
+interface HeroProps {
+  title?: string
+  description?: string
+  link?: string
+}
+
+const { title = '', description = '', link = '' } = defineProps<HeroProps>()
+</script>
+<div class="flex flex-col gap-3 items-center">
+  <div class="dropdownWrapper">
+    <div class="toast"></div>
+    <div class="toast"></div>
+    <div class="toast"></div>
+  </div>
+  <h1 class="-mt-5 mb-3 font-bold text-5xl text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-blue-700 dark:to-blue-300">
+    {{ title }}
+  </h1>
+  <p class="mb-3 mt-0 text-lg">
+    {{ description }}
+  </p>
+
+  <a
+    class="btn-secondary button"
+    href="{{ link }}"
+    target="_blank"
+  >
+    Github
+  </a>
+</div>
+<style>
+.dropdownWrapper {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  width: 400px;
+  height: 100px;
+  position: relative;
+  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 35%);
+  mask-image: linear-gradient(to top, transparent 0%, black 35%);
+  opacity: 1;
+}
+
+.toast {
+  width: 356px;
+  height: 40px;
+  background: #ffffff;
+  box-shadow: 0 4px 12px #00000068;
+  border: 1px solid #f5f5f5;
+  border-radius: 6px;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.toast:nth-child(1) {
+  transform: translateY(-60%) translateX(-50%) scale(0.9);
+}
+
+.toast:nth-child(2) {
+  transform: translateY(-30%) translateX(-50%) scale(0.95);
+}
+
+.button {
+  height: 40px;
+  border-radius: 6px;
+  border: none;
+  padding: 0 30px;
+  font-weight: 600;
+  flex-shrink: 0;
+  font-family: inherit;
+  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06),
+    0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.04),
+    0px 3px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 4px 0px rgba(0, 0, 0, 0.01);
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  text-decoration: none;
+  color: hsl(0, 0%, 9%);
+  font-size: 13px;
+  display: inline-flex;
+  align-items: center;
+  transition: box-shadow 200ms, background 200ms;
+}
+
+.btn-secondary {
+  background: linear-gradient(
+    156deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(240, 240, 240, 1) 100%
+  );
+}
+
+@media (max-width: 600px) {
+  .dropdownWrapper {
+    width: 100%;
+  }
+}
+</style>

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

@@ -0,0 +1,87 @@
+```vue
+<script lang="ts" setup>
+import { ref } from '@stacksjs/stx'
+import {
+  Listbox,
+  ListboxButton,
+  ListboxOption,
+  ListboxOptions,
+} from '@stacksjs/listbox'
+
+interface Person {
+  id: number
+  name: string
+  unavailable: boolean
+}
+
+const people: Person[] = [
+  { id: 1, name: 'Chris Breuer', unavailable: false },
+  { id: 2, name: 'Avery Hill', unavailable: false },
+  { id: 3, name: 'Glenn Michael', unavailable: false },
+  { id: 4, name: 'Michael Vincent', unavailable: true },
+  { id: 5, name: 'Blake Ayer', unavailable: false },
+]
+
+const selectedPerson = ref<Person>(people[0] as Person)
+
+</script>
+
+<template>
+  <div class="max-w-4xl">
+    <div class="items-center mx-auto my-12 space-y-4 h-[150px] w-[300px] w-3/5">
+      <Listbox v-model="selectedPerson">
+        <div class="relative mt-1">
+          <ListboxButton
+            class="relative pl-3 pr-10 py-2 w-full text-left sm:text-sm bg-white rounded-lg focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 focus-visible:ring-white/75 focus:outline-none shadow-md cursor-default"
+          >
+            <span class="block truncate">{{ selectedPerson.name }}</span>
+            <span
+              class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none"
+            >
+              <div class="i-hugeicons-chevron-up-down-20-solid" />
+            </span>
+          </ListboxButton>
+
+          <transition
+            leave-active-class="duration-100 ease-in transition"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+          >
+            <ListboxOptions
+              class="absolute overflow-auto mt-1 py-1 max-h-60 w-full text-base sm:text-sm bg-white outline-none ring-1 ring-black/5 rounded-md focus:outline-none shadow-lg"
+            >
+              <ListboxOption
+                v-for="person in people"
+                class="-ml-4 list-none"
+                v-slot="{ active, selected }"
+                :key="person.name"
+                :value="person"
+                as="template"
+              >
+                <li
+                  class="relative pl-10 pr-4 py-2 cursor-default select-none" :class="[
+                    active ? 'bg-amber-100 text-amber-900' : 'text-gray-900',
+                  ]"
+                >
+                  <span
+                    class="block truncate" :class="[
+                      selected ? 'font-medium' : 'font-normal',
+                    ]"
+                  >{{ person.name }}</span>
+                  <span
+                    v-if="selected"
+                    class="flex absolute inset-y-0 left-0 items-center pl-3 text-amber-600"
+                  >
+                    <div class="i-hugeicons-check-20-solid" />
+                  </span>
+                </li>
+              </ListboxOption>
+            </ListboxOptions>
+          </transition>
+        </div>
+      </Listbox>
+    </div>
+  </div>
+</template>
+
+```

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

@@ -0,0 +1,59 @@
+<script>
+interface ListboxDemoProps {
+  people?: string
+  selectedPerson?: boolean
+  isOpen?: boolean
+}
+
+const { people = [, selectedPerson = people[0], isOpen = false } = defineProps<ListboxDemoProps>()
+
+{ id: 1, name: 'Chris Breuer', unavailable: false },
+  { id: 2, name: 'Avery Hill', unavailable: false },
+  { id: 3, name: 'Glenn Michael', unavailable: false },
+  { id: 4, name: 'Michael Vincent', unavailable: true },
+  { id: 5, name: 'Blake Ayer', unavailable: false },
+]
+</script>
+<div class="max-w-4xl">
+  <DocsPlayground>
+    <div class="items-center mx-auto my-12 space-y-4 h-[150px] w-[300px] w-3/5">
+      <div class="relative mt-1">
+        <button
+          class="relative pl-3 pr-10 py-2 w-full text-left sm:text-sm bg-white rounded-lg focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 focus-visible:ring-white/75 focus:outline-none shadow-md cursor-default"
+          data-action="toggle-listbox"
+        >
+          <span class="block truncate">{{ selectedPerson.name }}</span>
+          <span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
+            <div class="i-hugeicons-chevron-up-down-20-solid"></div>
+          </span>
+        </button>
+
+        @if(isOpen)
+          <div class="absolute overflow-auto mt-1 py-1 max-h-60 w-full text-base sm:text-sm bg-white outline-none ring-1 ring-black/5 rounded-md focus:outline-none shadow-lg">
+            @foreach(people as person)
+              <div
+                class="relative pl-10 pr-4 py-2 list-none text-amber-900' hover:text-amber-900 hover:bg-amber-100 cursor-default select-none selectedPerson.id : ? 'bg-amber-100 'text-gray-900' {{ }} == person.id"
+                data-action="select-person"
+                data-person-id="{{ person.id }}"
+                data-person-name="{{ person.name }}"
+              >
+                <span class="block truncate selectedPerson.id : ? 'font-medium' 'font-normal' {{ }} == person.id">
+                  {{ person.name }}
+                </span>
+                @if(selectedPerson.id == person.id)
+                  <span class="flex absolute inset-y-0 left-0 items-center pl-3 text-amber-600">
+                    <div class="i-hugeicons-check-20-solid"></div>
+                  </span>
+                @endif
+              </div>
+            @endforeach
+          </div>
+        @endif
+      </div>
+    </div>
+
+    <div slot="code">
+      <!-- ListboxCode component would be rendered here -->
+    </div>
+  </DocsPlayground>
+</div>