Menu

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

<Popover>
  <PopoverTrigger
    class="py-2 px-4 border rounded-kleri border-border bg-card
           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 gap-2 items-center px-1">
        <span class="text-xs font-spacemono text-muted-foreground">v1.0.0</span>
      </div>
    </div>
    <PopoverClose
      class="absolute top-2 right-2 p-1 rounded-sm
             text-muted-foreground transition-colors
             hover:text-foreground"
    >
      <X class="w-4 h-4" />
    </PopoverClose>
  </PopoverContent>
</Popover>

<script lang="ts">
  import { KleriMorphDialog } from '@kleri/ui';
  import { Settings } from '@lucide/svelte';
</script>

<KleriMorphDialog
  buttonText="Open Dialog"
  ButtonIcon={Settings}
>
  {#snippet title()}
    <span class="text-lg font-semibold">Settings</span>
  {/snippet}
  {#snippet description()}
    Configure your preferences and application settings.
  {/snippet}

  <div class="space-y-4">
    <p class="text-sm text-muted-foreground">
      This dialog morphs from the trigger button, creating a seamless
      transition effect. The animation captures the trigger position
      and smoothly expands to the dialog dimensions.
    </p>
  </div>
</KleriMorphDialog>