useDebounce

<script lang="ts">
  import { Input, Badge, FormField } from 'sv5ui';
  import { useDebounce } from 'sv5ui';

  let search = $state('');
  let debouncedValue = $state('');
  const debounce = useDebounce({ delay: 300 });
</script>

<FormField label="Search" size="sm">
  <Input value={search} placeholder="Type something..." icon="lucide:search" size="sm"
    oninput={(e) => { search = e.target.value; debounce.run(() => debouncedValue = search); }} />
</FormField>

<p>Debounced: <strong>{debouncedValue || '(empty)'}</strong></p>
{#if debounce.pending}
  <Badge label="Pending..." variant="soft" color="warning" size="xs" />
{/if}

<script lang="ts">
  import { Input, Button, Badge, FormField } from 'sv5ui';
  import { useDebounce } from 'sv5ui';

  let query = $state('');
  let savedQuery = $state('');
  const saveDeb = useDebounce({ delay: 500 });
</script>

<FormField label="Auto-save query" size="sm">
  <Input value={query} placeholder="Type to auto-save..." size="sm"
    oninput={(e) => { query = e.target.value; saveDeb.run(() => savedQuery = query); }} />
</FormField>

<Button label="Cancel" variant="outline" size="xs" onclick={() => saveDeb.cancel()} disabled={!saveDeb.pending} />
<Button label="Save Now" variant="soft" size="xs" onclick={() => saveDeb.flush(() => savedQuery = query)} disabled={!saveDeb.pending} />

<p>Saved: <strong>{savedQuery || '(nothing)'}</strong>
  {#if saveDeb.pending}<Badge label="Saving..." variant="soft" color="info" size="xs" />{/if}
</p>