<!-- Use Button as Popover trigger -->
<Popover.Trigger base={Button} variant="outline">
  Open Settings
</Popover.Trigger>

<!-- Use Input as Dropdown trigger -->
<Dropdown.Trigger base={Input.Root}>
  <Input.Control placeholder="Select option..." />
</Dropdown.Trigger>

<script lang="ts">
  import { Button, Dialog } from '@svelte-atoms/core';
  
  let dialogOpen = $state(false);
  let inputValue = $state('');
</script>

<Button onclick={() => (dialogOpen = true)}>Open Dialog</Button>

<Dialog.Root bind:open={dialogOpen}>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Welcome</Dialog.Title>
    </Dialog.Header>
    <Dialog.Body>
      <p>This dialog uses Svelte 5 runes for reactive state management.</p>
    </Dialog.Body>
  </Dialog.Content>
</Dialog.Root>

<script lang="ts">
  import { List, Button } from '@svelte-atoms/core';
  import { flip } from 'svelte/animate';
  
  let items = $state([
    { id: 1, text: 'Task 1' },
    { id: 2, text: 'Task 2' },
    { id: 3, text: 'Task 3' }
  ]);
</script>

<List.Root>
  {#each items as item (item.id)}
    <div animate:flip={{ duration: 300 }}>
      <List.Item>{item.text}</List.Item>
    </div>
  {/each}
</List.Root>