@karbonjs/ui-svelte 0.1.0

package/src/overlay/Dialog.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { DialogVariant, OverlayBackdrop } from '@karbonjs/ui-core'
+
+  interface Props {
+    open: boolean
+    title: string
+    description?: string
+    variant?: DialogVariant
+    backdrop?: OverlayBackdrop
+    confirmLabel?: string
+    cancelLabel?: string
+    loading?: boolean
+    class?: string
+    onconfirm: () => void
+    oncancel: () => void
+    icon?: Snippet
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    description = '',
+    variant = 'info',
+    backdrop = 'none',
+    confirmLabel = 'Confirmer',
+    cancelLabel = 'Annuler',
+    loading = false,
+    class: className = '',
+    onconfirm,
+    oncancel,
+    icon
+  }: Props = $props()
+
+  const backdropClasses: Record<string, string> = {
+    blur: 'bg-black/30 backdrop-blur-sm',
+    dark: 'bg-black/50',
+    transparent: 'bg-transparent',
+    none: 'hidden'
+  }
+
+  const variantIcon: Record<string, string> = {
+    info: 'bg-blue-500/10 text-blue-500',
+    warning: 'bg-amber-500/10 text-amber-500',
+    danger: 'bg-red-500/10 text-red-500',
+    success: 'bg-emerald-500/10 text-emerald-500'
+  }
+
+  const confirmClasses: Record<string, string> = {
+    info: 'bg-[var(--karbon-primary)] hover:bg-[var(--karbon-primary-hover)]',
+    warning: 'bg-amber-500 hover:bg-amber-600',
+    danger: 'bg-red-500 hover:bg-red-600',
+    success: 'bg-emerald-500 hover:bg-emerald-600'
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') oncancel()
+  }
+</script>
+
+<svelte:window onkeydown={open ? handleKeydown : undefined} />
+
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    {#if backdrop !== 'none'}
+      <div class="fixed inset-0 {backdropClasses[backdrop]}" onclick={oncancel}></div>
+    {/if}
+    <div
+      class="relative z-10 w-full max-w-md rounded-xl shadow-xl bg-[var(--karbon-bg-card,#fff)] p-6 {className}"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="karbon-dialog-title"
+      aria-describedby={description ? 'karbon-dialog-desc' : undefined}
+    >
+      <div class="flex flex-col items-center text-center">
+        {#if icon}
+          <div class="w-12 h-12 rounded-full {variantIcon[variant]} flex items-center justify-center mb-4">
+            {@render icon()}
+          </div>
+        {:else}
+          <div class="w-12 h-12 rounded-full {variantIcon[variant]} flex items-center justify-center mb-4">
+            {#if variant === 'danger'}
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 if variant === 'warning'}
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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 variant === 'success'}
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
+            {:else}
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+            {/if}
+          </div>
+        {/if}
+
+        <h3 id="karbon-dialog-title" class="text-lg font-semibold text-[var(--karbon-text,#1a1635)]">
+          {title}
+        </h3>
+
+        {#if description}
+          <p id="karbon-dialog-desc" class="mt-2 text-sm text-[var(--karbon-text-3,#8e8aae)]">
+            {description}
+          </p>
+        {/if}
+      </div>
+
+      <div class="mt-6 flex gap-3">
+        <button
+          onclick={oncancel}
+          disabled={loading}
+          class="flex-1 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors
+            border border-[var(--karbon-border,rgba(0,0,0,0.07))]
+            text-[var(--karbon-text-2,#5a567e)]
+            hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))]
+            disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+        >
+          {cancelLabel}
+        </button>
+        <button
+          onclick={onconfirm}
+          disabled={loading}
+          class="flex-1 px-4 py-2.5 rounded-lg text-sm font-semibold text-white transition-colors
+            {confirmClasses[variant]}
+            disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer
+            inline-flex items-center justify-center gap-2"
+        >
+          {#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}
+          {confirmLabel}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}

package/src/overlay/ImgBox.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  import type { OverlayBackdrop } from '@karbonjs/ui-core'
+
+  interface Props {
+    images: string[]
+    index?: number
+    open: boolean
+    backdrop?: OverlayBackdrop
+    captions?: string[]
+    class?: string
+    onclose: () => void
+  }
+
+  let {
+    images,
+    index = $bindable(0),
+    open = $bindable(false),
+    backdrop = 'dark',
+    captions = [],
+    class: className = '',
+    onclose
+  }: Props = $props()
+
+  let scale = $state(1)
+  let translateX = $state(0)
+  let translateY = $state(0)
+  let dragging = $state(false)
+  let startX = 0
+  let startY = 0
+
+  const backdropClasses: Record<string, string> = {
+    blur: 'bg-black/80 backdrop-blur-md',
+    dark: 'bg-black/90',
+    transparent: 'bg-transparent',
+    none: ''
+  }
+
+  const hasPrev = $derived(index > 0)
+  const hasNext = $derived(index < images.length - 1)
+  const caption = $derived(captions[index] ?? '')
+
+  function prev() {
+    if (hasPrev) { index--; resetTransform() }
+  }
+
+  function next() {
+    if (hasNext) { index++; resetTransform() }
+  }
+
+  function zoomIn() {
+    scale = Math.min(scale + 0.5, 4)
+  }
+
+  function zoomOut() {
+    scale = Math.max(scale - 0.5, 0.5)
+    if (scale <= 1) resetTransform()
+  }
+
+  function resetTransform() {
+    scale = 1
+    translateX = 0
+    translateY = 0
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!open) return
+    if (e.key === 'Escape') onclose()
+    if (e.key === 'ArrowLeft') prev()
+    if (e.key === 'ArrowRight') next()
+    if (e.key === '+' || e.key === '=') zoomIn()
+    if (e.key === '-') zoomOut()
+  }
+
+  function handleMouseDown(e: MouseEvent) {
+    if (scale <= 1) return
+    dragging = true
+    startX = e.clientX - translateX
+    startY = e.clientY - translateY
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (!dragging) return
+    translateX = e.clientX - startX
+    translateY = e.clientY - startY
+  }
+
+  function handleMouseUp() {
+    dragging = false
+  }
+
+  function handleWheel(e: WheelEvent) {
+    e.preventDefault()
+    if (e.deltaY < 0) zoomIn()
+    else zoomOut()
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} onmouseup={handleMouseUp} onmousemove={handleMouseMove} />
+
+{#if open && images.length > 0}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="fixed inset-0 z-[70] flex items-center justify-center {backdropClasses[backdrop]} {className}">
+    <!-- Close button -->
+    <button
+      onclick={onclose}
+      aria-label="Fermer"
+      class="absolute top-4 right-4 z-10 rounded-full p-2 text-white/60 hover:text-white hover:bg-white/10 transition-colors cursor-pointer"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>
+
+    <!-- Zoom controls -->
+    <div class="absolute top-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2 bg-black/40 rounded-full px-3 py-1.5">
+      <button onclick={zoomOut} aria-label="Dézoomer" class="text-white/60 hover:text-white transition-colors cursor-pointer p-1">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
+      </button>
+      <span class="text-white/80 text-xs font-medium min-w-[3rem] text-center">{Math.round(scale * 100)}%</span>
+      <button onclick={zoomIn} aria-label="Zoomer" class="text-white/60 hover:text-white transition-colors cursor-pointer p-1">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>
+      </button>
+    </div>
+
+    <!-- Prev -->
+    {#if hasPrev}
+      <button
+        onclick={prev}
+        aria-label="Image précédente"
+        class="absolute left-4 z-10 rounded-full p-2 text-white/60 hover:text-white hover:bg-white/10 transition-colors cursor-pointer"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" 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}
+
+    <!-- Next -->
+    {#if hasNext}
+      <button
+        onclick={next}
+        aria-label="Image suivante"
+        class="absolute right-4 z-10 rounded-full p-2 text-white/60 hover:text-white hover:bg-white/10 transition-colors cursor-pointer"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" 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}
+
+    <!-- Image -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <div
+      class="flex items-center justify-center w-full h-full p-16 {scale > 1 ? 'cursor-grab' : ''} {dragging ? 'cursor-grabbing' : ''}"
+      onclick={(e) => { if (e.target === e.currentTarget && scale <= 1) onclose() }}
+      onmousedown={handleMouseDown}
+      onwheel={handleWheel}
+    >
+      <img
+        src={images[index]}
+        alt={caption || `Image ${index + 1}`}
+        class="max-w-full max-h-full object-contain select-none transition-transform duration-150"
+        style="transform: scale({scale}) translate({translateX / scale}px, {translateY / scale}px)"
+        draggable="false"
+      />
+    </div>
+
+    <!-- Caption + counter -->
+    {#if caption || images.length > 1}
+      <div class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 text-center">
+        {#if caption}
+          <p class="text-white/80 text-sm mb-1">{caption}</p>
+        {/if}
+        {#if images.length > 1}
+          <span class="text-white/40 text-xs">{index + 1} / {images.length}</span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}

package/src/overlay/Modal.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { ModalSize, OverlayBackdrop } from '@karbonjs/ui-core'
+
+  interface Props {
+    open: boolean
+    title?: string
+    size?: ModalSize
+    backdrop?: OverlayBackdrop
+    closable?: boolean
+    closeOnOverlay?: boolean
+    class?: string
+    onclose: () => void
+    children: Snippet
+    footer?: Snippet
+  }
+
+  let {
+    open = $bindable(false),
+    title = '',
+    size = 'md',
+    backdrop = 'none',
+    closable = true,
+    closeOnOverlay = true,
+    class: className = '',
+    onclose,
+    children,
+    footer
+  }: Props = $props()
+
+  const sizeClasses: Record<string, string> = {
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+    full: 'max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)]'
+  }
+
+  const backdropClasses: Record<string, string> = {
+    blur: 'bg-black/30 backdrop-blur-sm',
+    dark: 'bg-black/50',
+    transparent: 'bg-transparent',
+    none: 'hidden'
+  }
+
+  function handleOverlayClick() {
+    if (closeOnOverlay) onclose()
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape' && closable) onclose()
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    {#if backdrop !== 'none'}
+      <div class="fixed inset-0 {backdropClasses[backdrop]}" onclick={handleOverlayClick}></div>
+    {/if}
+    <div
+      class="relative z-10 w-full {sizeClasses[size]} rounded-xl shadow-xl bg-[var(--karbon-bg-card,#fff)] flex flex-col {className}"
+      role="dialog"
+      aria-modal="true"
+      aria-label={title || undefined}
+    >
+      {#if title || closable}
+        <div class="flex items-center justify-between px-6 pt-6 {title ? 'mb-4' : ''}">
+          {#if title}
+            <h3 class="text-lg font-semibold text-[var(--karbon-text,#1a1635)]">{title}</h3>
+          {/if}
+          {#if closable}
+            <button
+              onclick={onclose}
+              aria-label="Fermer"
+              class="rounded-lg p-1 ml-auto text-[var(--karbon-text-4,#b5b2cc)] transition-colors duration-150 hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))] hover:text-[var(--karbon-text-2,#5a567e)]"
+            >
+              <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+            </button>
+          {/if}
+        </div>
+      {/if}
+
+      <div class="px-6 {footer ? 'pb-4' : 'pb-6'} {!title && !closable ? 'pt-6' : ''} overflow-y-auto">
+        {@render children()}
+      </div>
+
+      {#if footer}
+        <div class="px-6 pb-6 pt-2 flex items-center justify-end gap-3">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/overlay/Toast.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { ToastVariant, ToastPosition } from '@karbonjs/ui-core'
+
+  interface Props {
+    message: string
+    variant?: ToastVariant
+    duration?: number
+    dismissible?: boolean
+    position?: ToastPosition
+    visible?: boolean
+    class?: string
+    ondismiss?: () => void
+  }
+
+  let {
+    message,
+    variant = 'info',
+    duration = 4000,
+    dismissible = true,
+    position = 'top-right',
+    visible = $bindable(true),
+    class: className = '',
+    ondismiss
+  }: Props = $props()
+
+  const variantClasses: Record<string, string> = {
+    success: 'border-emerald-500/20 text-emerald-400',
+    error: 'border-red-500/20 text-red-400',
+    warning: 'border-amber-500/20 text-amber-300',
+    info: 'border-blue-500/20 text-blue-400'
+  }
+
+  const positionClasses: Record<string, string> = {
+    'top-right': 'top-4 right-4',
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2'
+  }
+
+  function dismiss() {
+    visible = false
+    ondismiss?.()
+  }
+
+  $effect(() => {
+    if (visible && duration > 0) {
+      const timer = setTimeout(dismiss, duration)
+      return () => clearTimeout(timer)
+    }
+  })
+</script>
+
+{#if visible}
+  <div
+    class="fixed z-[60] {positionClasses[position]} w-full max-w-sm"
+    role="alert"
+    aria-live="assertive"
+  >
+    <div
+      class="
+        flex items-start gap-3 px-4 py-3 rounded-xl border shadow-lg
+        bg-[var(--karbon-bg-card,#fff)]
+        {variantClasses[variant]}
+        {className}
+      "
+    >
+      {#if variant === 'success'}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 mt-0.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
+      {:else if variant === 'error'}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 mt-0.5"><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 variant === 'warning'}
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 mt-0.5"><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="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 mt-0.5"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+      {/if}
+
+      <span class="flex-1 text-sm font-medium text-[var(--karbon-text,#1a1635)]">{message}</span>
+
+      {#if dismissible}
+        <button
+          onclick={dismiss}
+          aria-label="Fermer"
+          class="shrink-0 rounded-lg p-0.5 text-[var(--karbon-text-4,#b5b2cc)] transition-colors duration-150 hover:text-[var(--karbon-text-2,#5a567e)] cursor-pointer"
+        >
+          <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+        </button>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/progress/Progress.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { ProgressVariant, ProgressSize } from '@karbonjs/ui-core'
+
+  interface Props {
+    value: number
+    max?: number
+    variant?: ProgressVariant
+    size?: ProgressSize
+    showLabel?: boolean
+    class?: string
+  }
+
+  let {
+    value,
+    max = 100,
+    variant = 'primary',
+    size = 'md',
+    showLabel = false,
+    class: className = ''
+  }: Props = $props()
+
+  const percent = $derived(Math.min(Math.max((value / max) * 100, 0), 100))
+
+  const variantClasses: Record<string, string> = {
+    primary: 'bg-[var(--karbon-primary)]',
+    success: 'bg-emerald-500',
+    warning: 'bg-amber-500',
+    danger: 'bg-red-500'
+  }
+
+  const sizeClasses: Record<string, string> = {
+    sm: 'h-1',
+    md: 'h-2',
+    lg: 'h-3'
+  }
+</script>
+
+<div class={className}>
+  {#if showLabel}
+    <div class="flex items-center justify-between mb-1">
+      <span class="text-xs font-medium text-[var(--karbon-text-2,#5a567e)]">{Math.round(percent)}%</span>
+    </div>
+  {/if}
+  <div class="w-full rounded-full bg-[var(--karbon-border,rgba(0,0,0,0.07))] overflow-hidden {sizeClasses[size]}" role="progressbar" aria-valuenow={value} aria-valuemax={max}>
+    <div
+      class="h-full rounded-full transition-all duration-300 ease-out {variantClasses[variant]}"
+      style="width: {percent}%"
+    ></div>
+  </div>
+</div>

package/src/skeleton/Skeleton.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { SkeletonVariant } from '@karbonjs/ui-core'
+
+  interface Props {
+    variant?: SkeletonVariant
+    width?: string
+    height?: string
+    lines?: number
+    class?: string
+  }
+
+  let {
+    variant = 'text',
+    width = '100%',
+    height,
+    lines = 1,
+    class: className = ''
+  }: Props = $props()
+
+  const baseClass = 'animate-pulse bg-[var(--karbon-border,rgba(0,0,0,0.07))]'
+
+  const variantDefaults: Record<string, { h: string; rounded: string }> = {
+    text: { h: '0.875rem', rounded: 'rounded' },
+    circle: { h: '3rem', rounded: 'rounded-full' },
+    rect: { h: '8rem', rounded: 'rounded-lg' }
+  }
+
+  const v = $derived(variantDefaults[variant])
+</script>
+
+{#if variant === 'text' && lines > 1}
+  <div class="space-y-2 {className}">
+    {#each Array(lines) as _, i}
+      <div
+        class="{baseClass} {v.rounded}"
+        style="width: {i === lines - 1 ? '66%' : width}; height: {height ?? v.h}"
+      ></div>
+    {/each}
+  </div>
+{:else if variant === 'circle'}
+  <div
+    class="{baseClass} {v.rounded} aspect-square {className}"
+    style="width: {width === '100%' ? height ?? v.h : width}; height: {height ?? v.h}"
+  ></div>
+{:else}
+  <div
+    class="{baseClass} {v.rounded} {className}"
+    style="width: {width}; height: {height ?? v.h}"
+  ></div>
+{/if}

package/src/tabs/Tabs.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { TabItem } from '@karbonjs/ui-core'
+
+  interface Props {
+    tabs: TabItem[]
+    active?: string
+    class?: string
+    onchange?: (id: string) => void
+    children?: Snippet<[{ tab: TabItem }]>
+  }
+
+  let {
+    tabs,
+    active = $bindable(tabs[0]?.id ?? ''),
+    class: className = '',
+    onchange,
+    children
+  }: Props = $props()
+
+  function select(id: string) {
+    active = id
+    onchange?.(id)
+  }
+</script>
+
+<div class={className}>
+  <div class="flex border-b border-[var(--karbon-border,rgba(0,0,0,0.07))]" role="tablist">
+    {#each tabs as tab}
+      <button
+        type="button"
+        role="tab"
+        aria-selected={active === tab.id}
+        onclick={() => { if (!tab.disabled) select(tab.id) }}
+        disabled={tab.disabled}
+        class="px-4 py-2.5 text-sm font-medium transition-colors relative cursor-pointer
+          disabled:opacity-40 disabled:cursor-not-allowed
+          {active === tab.id
+            ? 'text-[var(--karbon-primary)]'
+            : 'text-[var(--karbon-text-3,#8e8aae)] hover:text-[var(--karbon-text,#1a1635)]'}"
+      >
+        {tab.label}
+        {#if active === tab.id}
+          <span class="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--karbon-primary)]"></span>
+        {/if}
+      </button>
+    {/each}
+  </div>
+
+  {#if children}
+    {#each tabs as tab}
+      {#if active === tab.id}
+        <div class="pt-4" role="tabpanel">
+          {@render children({ tab })}
+        </div>
+      {/if}
+    {/each}
+  {/if}
+</div>