@karbonjs/ui-svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KarbonJS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@karbonjs/ui-svelte",
+  "version": "0.1.0",
+  "description": "Karbon UI components for Svelte 5",
+  "type": "module",
+  "svelte": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "svelte": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@karbonjs/ui-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "echo 'svelte components ship as source'"
+  }
+}

package/src/accordion/Accordion.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { AccordionItem } from '@karbonjs/ui-core'
+
+  interface Props {
+    items: AccordionItem[]
+    multiple?: boolean
+    class?: string
+    children?: Snippet<[{ item: AccordionItem; index: number }]>
+  }
+
+  let {
+    items,
+    multiple = false,
+    class: className = '',
+    children
+  }: Props = $props()
+
+  let openIds = $state<Set<string>>(new Set())
+
+  function toggle(id: string) {
+    const next = new Set(openIds)
+    if (next.has(id)) {
+      next.delete(id)
+    } else {
+      if (!multiple) next.clear()
+      next.add(id)
+    }
+    openIds = next
+  }
+</script>
+
+<div class="rounded-xl border border-[var(--karbon-border,rgba(0,0,0,0.07))] overflow-hidden divide-y divide-[var(--karbon-border,rgba(0,0,0,0.07))] {className}">
+  {#each items as item, index}
+    <div>
+      <button
+        type="button"
+        onclick={() => { if (!item.disabled) toggle(item.id) }}
+        disabled={item.disabled}
+        class="w-full flex items-center justify-between px-4 py-3 text-sm font-medium text-left transition-colors
+          text-[var(--karbon-text,#1a1635)] hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))]
+          disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+      >
+        <span>{item.title}</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="shrink-0 text-[var(--karbon-text-4,#b5b2cc)] transition-transform duration-200 {openIds.has(item.id) ? 'rotate-180' : ''}"
+        ><path d="m6 9 6 6 6-6"/></svg>
+      </button>
+
+      {#if openIds.has(item.id)}
+        <div class="px-4 pb-3 text-sm text-[var(--karbon-text-2,#5a567e)]">
+          {#if children}
+            {@render children({ item, index })}
+          {:else if item.content}
+            <p>{item.content}</p>
+          {/if}
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>

package/src/alert/AlertMessage.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { AlertType } from '@karbonjs/ui-core'
+
+  interface Props {
+    type?: AlertType
+    message?: string
+    class?: string
+    children?: Snippet
+  }
+
+  let {
+    type = 'error',
+    message = '',
+    class: className = '',
+    children
+  }: Props = $props()
+
+  const variants: Record<string, string> = {
+    error: 'bg-red-500/8 border border-red-500/20 text-red-400',
+    success: 'bg-green-500/8 border border-green-500/20 text-green-400',
+    warning: 'bg-amber-500/8 border border-amber-500/20 text-amber-300',
+    info: 'bg-blue-500/8 border border-blue-500/20 text-blue-400'
+  }
+</script>
+
+{#if message || children}
+  <div class="flex items-center gap-2.5 px-4 py-3 rounded-[0.625rem] text-[0.825rem] font-medium {variants[type]} {className}">
+    {#if type === 'error'}
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
+    {:else if type === 'success'}
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
+    {:else if type === 'warning'}
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
+    {:else}
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+    {/if}
+    {#if children}
+      {@render children()}
+    {:else}
+      <span>{message}</span>
+    {/if}
+  </div>
+{/if}

package/src/avatar/Avatar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { AvatarSize } from '@karbonjs/ui-core'
+
+  interface Props {
+    src?: string
+    alt?: string
+    name?: string
+    size?: AvatarSize
+    class?: string
+  }
+
+  let {
+    src = '',
+    alt = '',
+    name = '',
+    size = 'md',
+    class: className = ''
+  }: Props = $props()
+
+  let errored = $state(false)
+
+  const sizeClasses: Record<string, string> = {
+    xs: 'w-6 h-6 text-[10px]',
+    sm: 'w-8 h-8 text-xs',
+    md: 'w-10 h-10 text-sm',
+    lg: 'w-14 h-14 text-lg',
+    xl: 'w-20 h-20 text-2xl'
+  }
+
+  const initials = $derived(
+    (name || alt || 'A').split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
+  )
+
+  const showImage = $derived(src && !errored)
+</script>
+
+<div class="relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--karbon-bg-2,#e8e6f0)] text-[var(--karbon-text-2,#5a567e)] font-semibold {sizeClasses[size]} {className}">
+  {#if showImage}
+    <img
+      {src}
+      alt={alt || name}
+      onerror={() => errored = true}
+      class="w-full h-full object-cover"
+    />
+  {:else}
+    <span>{initials}</span>
+  {/if}
+</div>

package/src/badge/Badge.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { BadgeVariant } from '@karbonjs/ui-core'
+
+  interface Props {
+    variant?: BadgeVariant
+    class?: string
+    children: Snippet
+  }
+
+  let { variant = 'default', class: className = '', children }: Props = $props()
+
+  const variants: Record<string, string> = {
+    default: 'bg-[var(--karbon-bg-2,rgba(255,255,255,0.08))] text-[var(--karbon-text-2,#a1a1aa)]',
+    success: 'bg-emerald-500/15 text-emerald-500',
+    warning: 'bg-amber-500/15 text-amber-500',
+    danger: 'bg-red-500/15 text-red-500',
+    info: 'bg-blue-500/15 text-blue-500'
+  }
+</script>
+
+<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {variants[variant]} {className}">
+  {@render children()}
+</span>

package/src/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { BreadcrumbItem } from '@karbonjs/ui-core'
+
+  interface Props {
+    items: BreadcrumbItem[]
+    separator?: string
+    class?: string
+  }
+
+  let {
+    items,
+    separator = '/',
+    class: className = ''
+  }: Props = $props()
+</script>
+
+<nav aria-label="Breadcrumb" class={className}>
+  <ol class="flex items-center gap-1.5 text-sm">
+    {#each items as item, i}
+      {#if i > 0}
+        <li class="text-[var(--karbon-text-4,#b5b2cc)] select-none" aria-hidden="true">{separator}</li>
+      {/if}
+      <li>
+        {#if item.href && i < items.length - 1}
+          <a href={item.href} class="text-[var(--karbon-text-3,#8e8aae)] hover:text-[var(--karbon-text,#1a1635)] transition-colors">
+            {item.label}
+          </a>
+        {:else}
+          <span class="text-[var(--karbon-text,#1a1635)] font-medium">{item.label}</span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>

package/src/button/Button.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { ButtonVariant, ButtonSize } from '@karbonjs/ui-core'
+
+  interface Props {
+    variant?: ButtonVariant
+    size?: ButtonSize
+    type?: 'button' | 'submit'
+    disabled?: boolean
+    loading?: boolean
+    loadingText?: string
+    arrow?: boolean
+    fullWidth?: boolean
+    class?: string
+    onclick?: () => void
+    children: Snippet
+  }
+
+  let {
+    variant = 'primary',
+    size = 'md',
+    type = 'button',
+    disabled = false,
+    loading = false,
+    loadingText = '',
+    arrow = false,
+    fullWidth = false,
+    class: className = '',
+    onclick,
+    children
+  }: Props = $props()
+
+  const isDisabled = $derived(disabled || loading)
+
+  const variantClasses: Record<string, string> = {
+    primary: 'bg-[var(--karbon-primary)] text-white hover:bg-[var(--karbon-primary-hover)] focus:ring-[var(--karbon-primary)]',
+    secondary: 'bg-[var(--karbon-bg-2)] text-[var(--karbon-text-2)] hover:bg-[var(--karbon-border)] focus:ring-[var(--karbon-primary)]',
+    danger: 'bg-[var(--karbon-danger)] text-white hover:bg-red-600 focus:ring-[var(--karbon-danger)]',
+    ghost: 'text-[var(--karbon-text-3)] hover:bg-[var(--karbon-nav-hover-bg)] focus:ring-[var(--karbon-primary)]',
+    outline: 'border border-[var(--karbon-border)] text-[var(--karbon-text-2)] hover:bg-[var(--karbon-nav-hover-bg)] focus:ring-[var(--karbon-primary)]'
+  }
+
+  const sizeClasses: Record<string, string> = {
+    sm: 'px-3 py-1.5 text-sm',
+    md: 'px-4 py-2 text-sm',
+    lg: 'px-6 py-3 text-base'
+  }
+</script>
+
+<button
+  {type}
+  disabled={isDisabled}
+  {onclick}
+  class="
+    inline-flex items-center justify-center font-semibold rounded-lg
+    transition-all duration-300 ease-out
+    focus:outline-none focus:ring-2 focus:ring-offset-0
+    cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed
+    {variantClasses[variant]}
+    {arrow || fullWidth ? 'relative overflow-hidden py-3 md:py-3.5 px-4 text-[0.8125rem] md:text-sm' : sizeClasses[size]}
+    {fullWidth ? 'w-full' : ''}
+    {arrow ? 'group' : ''}
+    active:enabled:scale-[0.97]
+    {className}
+  "
+>
+  {#if arrow}
+    <span class="flex items-center gap-2 transition-transform duration-300 group-hover:enabled:-translate-x-2.5">
+      {#if loading}
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+        {#if loadingText}<span>{loadingText}</span>{/if}
+      {:else}
+        {@render children()}
+      {/if}
+    </span>
+    {#if !loading}
+      <span class="absolute right-4 flex items-center opacity-0 -translate-x-2 transition-all duration-300 group-hover:enabled:opacity-100 group-hover:enabled:translate-x-0">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+      </span>
+    {/if}
+  {:else}
+    {#if loading}
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin mr-2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+      {#if loadingText}<span>{loadingText}</span>{:else}{@render children()}{/if}
+    {:else}
+      {@render children()}
+    {/if}
+  {/if}
+</button>

package/src/carousel/Carousel.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    images?: string[]
+    autoplay?: number
+    loop?: boolean
+    arrows?: boolean
+    indicators?: boolean
+    class?: string
+    children?: Snippet
+  }
+
+  let {
+    images = [],
+    autoplay = 0,
+    loop = false,
+    arrows = true,
+    indicators = true,
+    class: className = '',
+    children
+  }: Props = $props()
+
+  let current = $state(0)
+  let timer: ReturnType<typeof setInterval> | null = null
+
+  const hasSlots = $derived(!!children)
+  const total = $derived(hasSlots ? 0 : images.length)
+  const hasPrev = $derived(loop || current > 0)
+  const hasNext = $derived(loop || current < total - 1)
+
+  function goTo(i: number) {
+    if (total === 0) return
+    if (loop) {
+      current = ((i % total) + total) % total
+    } else {
+      current = Math.max(0, Math.min(i, total - 1))
+    }
+  }
+
+  function prev() { goTo(current - 1) }
+  function next() { goTo(current + 1) }
+
+  function startAutoplay() {
+    if (autoplay > 0 && total > 1) {
+      timer = setInterval(next, autoplay)
+    }
+  }
+
+  function stopAutoplay() {
+    if (timer) { clearInterval(timer); timer = null }
+  }
+
+  $effect(() => {
+    startAutoplay()
+    return stopAutoplay
+  })
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="relative overflow-hidden rounded-xl {className}"
+  onmouseenter={stopAutoplay}
+  onmouseleave={startAutoplay}
+>
+  {#if hasSlots}
+    {@render children()}
+  {:else}
+    <div
+      class="flex transition-transform duration-500 ease-out"
+      style="transform: translateX(-{current * 100}%)"
+    >
+      {#each images as src, i}
+        <div class="w-full shrink-0">
+          <img
+            {src}
+            alt="Slide {i + 1}"
+            class="w-full h-full object-cover"
+            loading="lazy"
+          />
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if arrows && total > 1}
+    {#if hasPrev}
+      <button
+        onclick={prev}
+        aria-label="Slide précédent"
+        class="absolute left-3 top-1/2 -translate-y-1/2 z-10 rounded-full p-2 bg-black/30 text-white/80 hover:bg-black/50 hover:text-white transition-colors cursor-pointer"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+      </button>
+    {/if}
+    {#if hasNext}
+      <button
+        onclick={next}
+        aria-label="Slide suivant"
+        class="absolute right-3 top-1/2 -translate-y-1/2 z-10 rounded-full p-2 bg-black/30 text-white/80 hover:bg-black/50 hover:text-white transition-colors cursor-pointer"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+      </button>
+    {/if}
+  {/if}
+
+  {#if indicators && total > 1}
+    <div class="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex items-center gap-1.5">
+      {#each images as _, i}
+        <button
+          onclick={() => goTo(i)}
+          aria-label="Aller au slide {i + 1}"
+          class="w-2 h-2 rounded-full transition-all cursor-pointer {i === current ? 'bg-white w-4' : 'bg-white/40 hover:bg-white/60'}"
+        ></button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/data/DataTable.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    class?: string
+    children: Snippet
+  }
+
+  let { class: className = '', children }: Props = $props()
+</script>
+
+<div class="overflow-hidden rounded-xl bg-[var(--karbon-bg-card,#fff)] border border-[var(--karbon-border,rgba(0,0,0,0.07))] {className}">
+  <div class="overflow-x-auto">
+    <table class="min-w-full [&_thead_tr]:bg-[var(--karbon-bg-2,#e8e6f0)] [&_thead_tr]:border-b [&_thead_tr]:border-[var(--karbon-border,rgba(0,0,0,0.07))] [&_thead_th]:text-[var(--karbon-text-3,#8e8aae)] [&_thead_th]:text-xs [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-wider [&_thead_th]:px-4 [&_thead_th]:py-3 [&_thead_th]:text-left [&_tbody_tr]:border-b [&_tbody_tr]:border-[var(--karbon-border,rgba(0,0,0,0.07))] [&_tbody_tr]:transition-colors [&_tbody_tr]:duration-150 [&_tbody_tr:last-child]:border-b-0 [&_tbody_tr:hover]:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))] [&_td]:px-4 [&_td]:py-3 [&_td]:text-sm [&_td]:text-[var(--karbon-text-2,#5a567e)]">
+      {@render children()}
+    </table>
+  </div>
+</div>

package/src/data/Pagination.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  interface Props {
+    page: number
+    total: number
+    perPage: number
+    baseUrl: string
+  }
+
+  let { page, total, perPage, baseUrl }: Props = $props()
+
+  const totalPages = $derived(Math.ceil(total / perPage))
+  const pages = $derived((() => {
+    const p: number[] = []
+    const start = Math.max(1, page - 2)
+    const end = Math.min(totalPages, page + 2)
+    for (let i = start; i <= end; i++) p.push(i)
+    return p
+  })())
+</script>
+
+{#if totalPages > 1}
+  <nav class="flex items-center gap-1">
+    {#if page > 1}
+      <a href="{baseUrl}?page={page - 1}" aria-label="Page précédente" class="rounded-lg p-2 transition-colors text-[var(--karbon-text-3,#8e8aae)] hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))] hover:text-[var(--karbon-text,#1a1635)]">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+      </a>
+    {/if}
+
+    {#each pages as p}
+      {#if p === page}
+        <span class="rounded-lg bg-[var(--karbon-primary)] px-3 py-1.5 text-sm font-medium text-white">{p}</span>
+      {:else}
+        <a href="{baseUrl}?page={p}" class="rounded-lg px-3 py-1.5 text-sm transition-colors text-[var(--karbon-text-2,#5a567e)] hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))] hover:text-[var(--karbon-text,#1a1635)]">{p}</a>
+      {/if}
+    {/each}
+
+    {#if page < totalPages}
+      <a href="{baseUrl}?page={page + 1}" aria-label="Page suivante" class="rounded-lg p-2 transition-colors text-[var(--karbon-text-3,#8e8aae)] hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))] hover:text-[var(--karbon-text,#1a1635)]">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+      </a>
+    {/if}
+
+    <span class="ml-2 text-sm text-[var(--karbon-text-4,#b5b2cc)]">{total} résultats</span>
+  </nav>
+{/if}

package/src/divider/Divider.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { DividerDirection } from '@karbonjs/ui-core'
+
+  interface Props {
+    direction?: DividerDirection
+    label?: string
+    class?: string
+  }
+
+  let {
+    direction = 'horizontal',
+    label = '',
+    class: className = ''
+  }: Props = $props()
+</script>
+
+{#if direction === 'vertical'}
+  <div class="inline-block w-px self-stretch bg-[var(--karbon-border,rgba(0,0,0,0.07))] {className}"></div>
+{:else if label}
+  <div class="flex items-center gap-3 {className}">
+    <div class="flex-1 h-px bg-[var(--karbon-border,rgba(0,0,0,0.07))]"></div>
+    <span class="text-xs text-[var(--karbon-text-4,#b5b2cc)] font-medium shrink-0">{label}</span>
+    <div class="flex-1 h-px bg-[var(--karbon-border,rgba(0,0,0,0.07))]"></div>
+  </div>
+{:else}
+  <div class="w-full h-px bg-[var(--karbon-border,rgba(0,0,0,0.07))] {className}"></div>
+{/if}

package/src/dropdown/Dropdown.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { DropdownEntry, DropdownAlign } from '@karbonjs/ui-core'
+
+  interface Props {
+    items: DropdownEntry[]
+    align?: DropdownAlign
+    class?: string
+    trigger: Snippet
+    onselect?: (value: string) => void
+  }
+
+  let {
+    items,
+    align = 'left',
+    class: className = '',
+    trigger,
+    onselect
+  }: Props = $props()
+
+  let open = $state(false)
+
+  function handleSelect(item: DropdownEntry) {
+    if ('divider' in item) return
+    if (item.disabled) return
+    onselect?.(item.value ?? item.label)
+    open = false
+  }
+</script>
+
+<svelte:window onclick={() => open = false} />
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="relative inline-block {className}" onclick={(e) => e.stopPropagation()}>
+  <div onclick={() => open = !open} class="cursor-pointer">
+    {@render trigger()}
+  </div>
+
+  {#if open}
+    <div class="absolute z-50 mt-1 min-w-[12rem] rounded-xl border border-[var(--karbon-border,rgba(0,0,0,0.07))] bg-[var(--karbon-bg-card,#fff)] shadow-xl py-1
+      {align === 'right' ? 'right-0' : 'left-0'}">
+      {#each items as item}
+        {#if 'divider' in item}
+          <div class="my-1 border-t border-[var(--karbon-border,rgba(0,0,0,0.07))]"></div>
+        {:else}
+          <button
+            type="button"
+            onclick={() => handleSelect(item)}
+            disabled={item.disabled}
+            class="w-full flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors
+              {item.danger ? 'text-red-400 hover:bg-red-500/8' : 'text-[var(--karbon-text,#1a1635)] hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))]'}
+              disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+          >
+            {item.label}
+          </button>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+</div>