Menu

<script lang="ts">
  import {
    Popover,
    PopoverTrigger,
    PopoverContent,
    PopoverHeader,
    PopoverTitle,
    PopoverDescription,
    PopoverClose
  } from '$lib/menus/popover';
  import { X } from '@lucide/svelte';
</script>

<Popover>
  <PopoverTrigger
    class="rounded-kleri border-2 border-border bg-card px-4 py-2
           text-sm font-medium text-foreground transition-colors
           hover:border-kleri-2"
  >
    Open Popover
  </PopoverTrigger>
  <PopoverContent sideOffset={4} align="center">
    <PopoverHeader>
      <PopoverTitle>About Kleri</PopoverTitle>
      <PopoverDescription>
        Kleri is a modern UI toolkit built with Svelte 5 and Tailwind CSS.
      </PopoverDescription>
    </PopoverHeader>
    <div class="flex flex-col gap-2">
      <div class="h-px bg-border/50"></div>
      <div class="flex items-center gap-2 px-1">
        <span class="font-spacemono text-xs text-muted-foreground">v1.0.0</span>
      </div>
    </div>
    <PopoverClose
      class="absolute top-2 right-2 rounded-sm p-1
             text-muted-foreground transition-colors
             hover:text-foreground"
    >
      <X class="h-4 w-4" />
    </PopoverClose>
  </PopoverContent>
</Popover>