# Ambar UI — Full Component Sources for LLMs
# Generated automatically from src/lib/components/
# Every component is a single .svelte file — copy, own, modify.
#
# Quick reference: /llms.txt
# Docs: https://ambarui.vercel.app
---
## Accordion
```svelte
{#each items as item, i}
{@const isOpen = open.has(item.value)}
{@render item.children()}
{/each}
![{name]()
(imgError = true)}
/>
{:else if showInit}
{initials(name)}
{:else}
{/if}
{#if status !== 'none'}
{/if}
```
---
## AvatarGroup
```svelte
{#each visible as av, i}
{/each}
{#if overflow > 0}
+{overflow}
{/if}
(hoverIdx = null)}
>
{#if svgW > 0}
{#if hoverIdx !== null}
{@const flip = tip.x > svgW * 0.6}
{labels[hoverIdx]}
{#if stacked}
{@const total = stackedMaxes[hoverIdx] ?? 0}
{#each series as s, i}
{@const c = s.color ?? COLORS[i % COLORS.length]}
{s.label}
{fmt(s.data[hoverIdx] ?? 0)}
{/each}
Total
{fmt(total)}
{:else}
{#each series as s, i}
{@const c = s.color ?? COLORS[i % COLORS.length]}
{s.label}
{fmt(s.data[hoverIdx] ?? 0)}
{/each}
{/if}
{/if}
{#if series.length > 1}
{#each series as s, i}
{@const c = s.color ?? COLORS[i % COLORS.length]}
{s.label}
{/each}
{/if}
{/if}
(hoverIdx = null)}
>
{#if svgW > 0}
{/if}
```
---
## Checkbox
```svelte
```
---
## Dialog
```svelte
{#if visible}
{#if variant !== 'fullscreen'}
{/if}
{#if variant === 'fullscreen'}
{:else if bottomVariants.has(variant)}
{:else if topVariants.has(variant)}
{:else}
{/if}
{/if}
{#if hoverIdx !== null}
{@const sl = computed[hoverIdx]}
{fmt(sl.value)}
{sl.label}
{(sl.pct * 100).toFixed(1)}%
{:else if centerValue}
{centerValue}
{#if centerLabel}
{centerLabel}
{/if}
{:else if centerLabel}
{centerLabel}
{/if}
{#each computed as sl, i}
(hoverIdx = i)}
onmouseleave={() => (hoverIdx = null)}
>
{sl.label}
{fmt(sl.value)}
{/each}
```
---
## Drawer
```svelte
{#if visible}
{#if side === 'bottom' || side === 'top'}
{/if}
{#if title}
{/if}
{@render children()}
{#if footer}
{/if}
{/if}
{#if open}
{ if (e.target === e.currentTarget) closeMenu(); }}
>
{#if subIdx >= 0 && items[subIdx]?.children}
{/if}
{/if}
{#if icon}
{@render icon()}
{:else if preset !== 'custom'}
{/if}
{#if title}
{title}
{/if}
{#if description}
{description}
{/if}
{#if children}
{@render children()}
{/if}
{#if action}
{/if}
```
---
## Flex
```svelte
{@render children()}
```
---
## GlobeChart
```svelte
{#if loading}
Loading…
{/if}
Drag to rotate
{#if hoverId !== null}
{@const name = COUNTRY_NAMES[hoverId] ?? 'Unknown'}
{@const nd = buildNumericData()}
{@const val = nd[hoverId]}
{@const flip = tipX > size * 0.6}
{name}
{#if val !== undefined}
{fmt(val)}
{:else}
No data
{/if}
{/if}
Less
{#each legendSteps as t}
{/each}
More
{#if hoverCell !== null}
{@const val = data[hoverCell.key]}
{@const flip = tipX > svgW * 0.6}
{fmtDate(hoverCell.date)}
{#if val !== undefined && val > 0}
{label}{fmt(val)}
{:else}
No activity
{/if}
{/if}
```
---
## Input
```svelte
{#if label}
{/if}
{#if start}
{@render start()}
{:else if type === 'search'}
{/if}
{#if prefix}
{prefix}
{/if}
(focused = true)}
onblur={() => (focused = false)}
oninput={handleInput}
/>
{#if suffix}
{suffix}
{/if}
{#if clearable && value && !disabled}
{/if}
{#if type === 'password'}
{/if}
{#if end}
{@render end()}
{/if}
{#if error}
{error}
{:else if hint}
{hint}
{/if}
(hoverIdx = null)}
>
{#if svgW > 0}
{#if hoverIdx !== null}
{@const flip = tip.x > svgW * 0.6}
{labels[hoverIdx]}
{#each series as s, i}
{@const c = s.color ?? COLORS[i % COLORS.length]}
{s.label}
{fmt(s.data[hoverIdx] ?? 0)}
{/each}
{/if}
{#if series.length > 1}
{#each series as s, i}
{@const c = s.color ?? COLORS[i % COLORS.length]}
{s.label}
{/each}
{/if}
{/if}
{#each items as item (item.id)}
{/each}
```
---
## OtpInput
```svelte
{#each Array(length) as _, i}
onInput(i, e)}
onkeydown={(e) => onKeydown(i, e)}
onfocus={(e) => (e.target as HTMLInputElement).select()}
onpaste={onPaste}
aria-label="Digit {i + 1}"
/>
{/each}
{#if error}
{error}
{/if}
```
---
## Popover
```svelte
{@render trigger({ toggle, open })}
{#if open}
{ if (e.target === e.currentTarget) closePop(); }}
>
e.stopPropagation()}
onkeydown={(e) => { if (e.key === 'Escape') { e.preventDefault(); closePop(); } }}
>
{#if arrow}
{#if pos.side === 'bottom'}
{:else if pos.side === 'top'}
{:else if pos.side === 'right'}
{:else}
{/if}
{/if}
{@render children()}
{/if}
{#if indeterminate}
{:else}
{/if}
{#each options as opt}
{@const checked = value === opt.value}
{/each}
{:else if variant === 'card'}
{#each options as opt}
{@const checked = value === opt.value}
{/each}
{:else if variant === 'button'}
{#each options as opt}
{@const checked = value === opt.value}
{/each}
{/if}
```
---
## RealtimeLineChart
```svelte
(hoverIdx = null)}
>
{#if svgW > 0}
{label}
{fmt(current)}
{change >= 0 ? '+' : ''}{fmt(change)}
({pct >= 0 ? '+' : ''}{pct.toFixed(2)}%)
LIVE
{#if hoverIdx !== null}
{@const hx = sx(hoverIdx)}
{#if hx >= P.l && hx <= P.l + cW}
{@const flip = tipX > svgW * 0.55}
{fmt(renderPrices[hoverIdx])}
{/if}
{/if}
{/if}
{#if loading}
{:else}
{/if}
{#if !collapsed}
{ focused = true; if (shouldOpen()) openDrop(); }}
onblur={() => {
focused = false;
if (expandable && !value.trim()) {
setTimeout(() => { expanded = false; closeDrop(); }, 150);
}
}}
oninput={handleInput}
/>
{#if command && !value && !focused}
{shortcut}
{/if}
{#if value}
{/if}
{/if}
{#if open}
{ if (e.target === e.currentTarget) closeDrop(); }}
>
e.stopPropagation()}
>
{#if !value && recent.length > 0}
Son Aramalar
{#each recent as q, i}
(focusIdx = i)}
onclick={() => selectRecent(q)}
>
{q}
removeRecent(q, e)}
>
{/each}
{:else if value && loading}
{:else if value && !loading && items.length === 0}
{emptyText}
"{value}" için sonuç yok
{:else if value && items.length > 0}
{#each grouped as [cat, catItems], gi}
{#if cat}
{cat}
{/if}
{#each catItems as item}
{@const idx = items.indexOf(item)}
(focusIdx = idx)}
onclick={() => selectItem(item)}
>
{#if item.icon}
{@render item.icon()}
{:else}
{/if}
{@html hl(item.label, value)}
{#if item.description}
{item.description}
{/if}
{#if item.badge}
{item.badge}
{/if}
{/each}
{#if gi < grouped.length - 1}
{/if}
{/each}
{/if}
{/if}
{#if label}
{/if}
{#if error}
{error}
{:else if hint}
{hint}
{/if}
{#if open}
{ if (e.target === e.currentTarget) closeDrop(); }}>
e.stopPropagation()}
>
{#if searchable}
{/if}
{#if flatFiltered.length === 0}
Sonuç bulunamadı.
{:else}
{#each filteredGroups as item}
{#if isGroup(item)}
{item.group}
{#each item.options as opt}
{@const isActive = flatFiltered.indexOf(opt) === activeIdx}
{/each}
{:else}
{@const isActive = flatFiltered.indexOf(item) === activeIdx}
{/if}
{/each}
{/if}
{/if}
{#if visible}
{#if title}
{/if}
{@render children()}
{#if footer}
{/if}
{/if}
{#each Array(lines) as _, i}
{/each}
{#if label || showValue}
{#if label}
{label}
{/if}
{#if showValue}
{display}
{/if}
{/if}
{#if dragging}
{display}
{/if}
{#if hint}
{hint}
{/if}
{#if value}
{current % 1 === 0 ? current : current.toFixed(2)}
{/if}
{#if hoverIdx !== null}
{vals[hoverIdx] % 1 === 0 ? vals[hoverIdx] : vals[hoverIdx].toFixed(2)}
{/if}
```
---
## Spinner
```svelte
{#if variant === 'ring'}
{:else if variant === 'ring-dual'}
{:else if variant === 'ring-split'}
{:else if variant === 'ring-track'}
{:else if variant === 'dots'}
{:else if variant === 'bounce'}
{:else if variant === 'pulse'}
{:else if variant === 'bars'}
{:else if variant === 'wave'}
{:else if variant === 'ripple'}
{:else if variant === 'orbit'}
{/if}
```
---
## Switch
```svelte
```
---
## Tabs
```svelte
{#if variant === 'line'}
{:else if variant === 'pill'}
{/if}
{#each tabs as tab}
{/each}
{#if label}
{/if}
{#if error}
{error}
{:else if hint}
{hint}
{:else}
{/if}
{#if maxlength}
{value.length}/{maxlength}
{/if}
{#each toastStore.toasts as toast (toast.id)}
{toast.message}
{/each}
{#if visible}
{#if typeof content === 'function'}
{@render (content as Snippet)()}
{:else}
{content}
{/if}
{/if}