@karbonjs/ui-svelte 0.2.4 → 0.3.0

package/src/image/Image.svelte

@@ -11,6 +11,7 @@
     fallback?: string
     imgbox?: boolean
     class?: string
+    classes?: { root?: string, img?: string }
     onclick?: () => void
   }
 
@@ -23,6 +24,7 @@
     fallback = '',
     imgbox = false,
     class: className = '',
+    classes = {},
     onclick
   }: Props = $props()
 
@@ -65,12 +67,12 @@
 </script>
 
 {#if isClickable}
-  <button type="button" onclick={handleClick} class="group overflow-hidden {roundedClasses[rounded]} {aspectClasses[aspect]} cursor-pointer bg-transparent border-none p-0 m-0 block {className}">
-    <img src={imgSrc} {alt} onerror={handleError} class="w-full h-full object-cover transition-all duration-300 {hoverClasses[hover]}" loading="lazy" />
+  <button type="button" onclick={handleClick} class="group overflow-hidden {roundedClasses[rounded]} {aspectClasses[aspect]} cursor-pointer bg-transparent border-none p-0 m-0 block {classes?.root ?? className}">
+    <img src={imgSrc} {alt} onerror={handleError} class="w-full h-full object-cover transition-all duration-300 {hoverClasses[hover]} {classes?.img ?? ''}" loading="lazy" />
   </button>
 {:else}
-  <div class="group overflow-hidden {roundedClasses[rounded]} {aspectClasses[aspect]} {className}">
-    <img src={imgSrc} {alt} onerror={handleError} class="w-full h-full object-cover transition-all duration-300 {hoverClasses[hover]}" loading="lazy" />
+  <div class="group overflow-hidden {roundedClasses[rounded]} {aspectClasses[aspect]} {classes?.root ?? className}">
+    <img src={imgSrc} {alt} onerror={handleError} class="w-full h-full object-cover transition-all duration-300 {hoverClasses[hover]} {classes?.img ?? ''}" loading="lazy" />
   </div>
 {/if}
 

package/src/image/ImageCompare.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { ButtonColor } from '@karbonjs/ui-core'
+
+  interface Props {
+    before: string
+    after: string
+    beforeLabel?: string
+    afterLabel?: string
+    initialPosition?: number
+    orientation?: 'horizontal' | 'vertical'
+    color?: ButtonColor
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+    showLabels?: boolean
+    showHandle?: boolean
+    width?: string
+    height?: string
+    class?: string
+    classes?: { root?: string, before?: string, after?: string, handle?: string, label?: string }
+  }
+
+  let {
+    before,
+    after,
+    beforeLabel = 'Avant',
+    afterLabel = 'Apres',
+    initialPosition = 50,
+    orientation = 'horizontal',
+    color,
+    rounded = 'lg',
+    showLabels = true,
+    showHandle = true,
+    width,
+    height,
+    class: className = '',
+    classes = {}
+  }: Props = $props()
+
+  let position = $state(initialPosition)
+  let dragging = $state(false)
+  let containerEl: HTMLDivElement
+
+  const accent = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+  const isHorizontal = $derived(orientation === 'horizontal')
+
+  const roundedMap: Record<string, string> = {
+    none: '0', sm: '0.25rem', md: '0.5rem', lg: '0.75rem', xl: '1rem'
+  }
+  const rad = $derived(roundedMap[rounded])
+
+  function updatePosition(e: MouseEvent | TouchEvent) {
+    if (!containerEl) return
+    const rect = containerEl.getBoundingClientRect()
+    let clientPos: number
+    let size: number
+
+    if ('touches' in e) {
+      clientPos = isHorizontal ? e.touches[0].clientX - rect.left : e.touches[0].clientY - rect.top
+    } else {
+      clientPos = isHorizontal ? e.clientX - rect.left : e.clientY - rect.top
+    }
+    size = isHorizontal ? rect.width : rect.height
+    position = Math.min(Math.max((clientPos / size) * 100, 0), 100)
+  }
+
+  function handleMouseDown(e: MouseEvent) {
+    e.preventDefault()
+    dragging = true
+    updatePosition(e)
+  }
+
+  function handleTouchStart(e: TouchEvent) {
+    dragging = true
+    updatePosition(e)
+  }
+
+  function handleMove(e: MouseEvent) {
+    if (dragging) updatePosition(e)
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (dragging) { e.preventDefault(); updatePosition(e) }
+  }
+
+  function handleEnd() {
+    dragging = false
+  }
+</script>
+
+<svelte:window
+  onmousemove={handleMove}
+  onmouseup={handleEnd}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleEnd}
+/>
+
+<div
+  bind:this={containerEl}
+  class="karbon-imgcompare relative select-none overflow-hidden {classes?.root ?? className}"
+  style="border-radius:{rad};{width ? `width:${width};` : 'width:100%;'}{height ? `height:${height};` : ''}aspect-ratio:{height ? 'auto' : '16/10'};cursor:{dragging ? 'grabbing' : 'col-resize'};"
+  onmousedown={handleMouseDown}
+  ontouchstart={handleTouchStart}
+  role="slider"
+  aria-valuenow={Math.round(position)}
+  aria-valuemin={0}
+  aria-valuemax={100}
+  aria-label="Comparateur d'images"
+  tabindex={0}
+  onkeydown={(e) => {
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); position = Math.max(position - 2, 0) }
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); position = Math.min(position + 2, 100) }
+  }}
+>
+  <!-- After image (background, full) -->
+  <img
+    src={after}
+    alt={afterLabel}
+    class="absolute inset-0 w-full h-full object-cover {classes?.after ?? ''}"
+    draggable="false"
+  />
+
+  <!-- Before image (clipped via clip-path) -->
+  <img
+    src={before}
+    alt={beforeLabel}
+    class="absolute inset-0 w-full h-full object-cover {classes?.before ?? ''}"
+    style="clip-path:{isHorizontal ? `inset(0 ${100 - position}% 0 0)` : `inset(0 0 ${100 - position}% 0)`};"
+    draggable="false"
+  />
+
+  <!-- Divider line -->
+  <div
+    class="absolute"
+    style="{isHorizontal
+      ? `left:${position}%;top:0;bottom:0;width:2px;transform:translateX(-1px);`
+      : `top:${position}%;left:0;right:0;height:2px;transform:translateY(-1px);`
+    }background:{accent};z-index:5;pointer-events:none;"
+  ></div>
+
+  <!-- Handle -->
+  {#if showHandle}
+    <div
+      class="absolute z-10"
+      style="{isHorizontal
+        ? `left:${position}%;top:50%;transform:translate(-50%,-50%);`
+        : `top:${position}%;left:50%;transform:translate(-50%,-50%);`
+      }pointer-events:none;"
+    >
+      <div
+        class="rounded-full flex items-center justify-center shadow-lg {classes?.handle ?? ''}"
+        style="width:36px;height:36px;background:{accent};color:white;box-shadow:0 2px 10px rgba(0,0,0,0.3),0 0 0 3px rgba(255,255,255,0.3);"
+      >
+        {#if isHorizontal}
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15-5-5 5-5"/><path d="m17 9 5 5-5 5"/></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.5" stroke-linecap="round" stroke-linejoin="round"><path d="m15 7-5-5-5 5"/><path d="m9 17 5 5 5-5"/></svg>
+        {/if}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Labels -->
+  {#if showLabels}
+    <div
+      class="absolute z-5 pointer-events-none {classes?.label ?? ''}"
+      style="{isHorizontal ? 'top:12px;left:12px;' : 'top:12px;left:12px;'}"
+    >
+      <span
+        class="rounded-md px-2 py-1 text-[11px] font-semibold"
+        style="background:rgba(0,0,0,0.5);color:white;backdrop-filter:blur(4px);"
+      >{beforeLabel}</span>
+    </div>
+    <div
+      class="absolute z-5 pointer-events-none {classes?.label ?? ''}"
+      style="{isHorizontal ? 'top:12px;right:12px;' : 'bottom:12px;right:12px;'}"
+    >
+      <span
+        class="rounded-md px-2 py-1 text-[11px] font-semibold"
+        style="background:rgba(0,0,0,0.5);color:white;backdrop-filter:blur(4px);"
+      >{afterLabel}</span>
+    </div>
+  {/if}
+</div>

package/src/image/ImgZoom.svelte

@@ -1,56 +1,76 @@
 <script lang="ts">
-  import type { ImageRounded, ImgZoomTrigger } from '@karbonjs/ui-core'
+  import type { ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     src: string
     zoomSrc?: string
     alt?: string
     zoom?: number
-    trigger?: ImgZoomTrigger
-    rounded?: ImageRounded
+    trigger?: 'hover' | 'click'
+    mode?: 'overlay' | 'lens' | 'side'
+    lensSize?: number
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+    showHint?: boolean
+    color?: ButtonColor
+    width?: string
+    height?: string
     class?: string
+    classes?: { root?: string, img?: string, lens?: string, overlay?: string }
   }
 
   let {
     src,
     zoomSrc,
     alt = '',
-    zoom = 2,
+    zoom = 2.5,
     trigger = 'hover',
+    mode = 'overlay',
+    lensSize = 120,
     rounded = 'md',
-    class: className = ''
+    showHint = true,
+    color,
+    width,
+    height,
+    class: className = '',
+    classes = {}
   }: Props = $props()
 
-  let container = $state<HTMLElement>(undefined!)
+  let container: HTMLElement
   let zooming = $state(false)
   let posX = $state(50)
   let posY = $state(50)
+  let mouseX = $state(0)
+  let mouseY = $state(0)
+  let hovered = $state(false)
 
-  const roundedClasses: Record<string, string> = {
-    none: 'rounded-none',
-    sm: 'rounded',
-    md: 'rounded-lg',
-    lg: 'rounded-xl',
-    full: 'rounded-full'
-  }
-
+  const accent = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
   const zoomImage = $derived(zoomSrc || src)
 
+  const roundedMap: Record<string, string> = {
+    none: '0', sm: '0.25rem', md: '0.5rem', lg: '0.75rem', xl: '1rem', full: '9999px'
+  }
+  const rad = $derived(roundedMap[rounded])
+
   function updatePosition(e: MouseEvent) {
+    if (!container) return
     const rect = container.getBoundingClientRect()
     posX = ((e.clientX - rect.left) / rect.width) * 100
     posY = ((e.clientY - rect.top) / rect.height) * 100
+    mouseX = e.clientX - rect.left
+    mouseY = e.clientY - rect.top
   }
 
   function handleMouseEnter(e: MouseEvent) {
+    hovered = true
     if (trigger === 'hover') { zooming = true; updatePosition(e) }
   }
 
   function handleMouseMove(e: MouseEvent) {
-    if (zooming) updatePosition(e)
+    if (zooming || hovered) updatePosition(e)
   }
 
   function handleMouseLeave() {
+    hovered = false
     if (trigger === 'hover') zooming = false
   }
 
@@ -58,39 +78,101 @@
     zooming = !zooming
     if (zooming) updatePosition(e)
   }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); zooming = !zooming }
-  }
 </script>
 
-{#if trigger === 'click'}
-  <button
-    type="button"
-    bind:this={container}
-    class="relative overflow-hidden {roundedClasses[rounded]} bg-transparent border-none p-0 m-0 block {zooming ? 'cursor-zoom-out' : 'cursor-zoom-in'} {className}"
-    onmousemove={handleMouseMove}
-    onmouseleave={handleMouseLeave}
-    onclick={handleClick}
-  >
-    <img {src} {alt} class="w-full h-full object-cover block" loading="lazy" />
-    {#if zooming}
-      <span class="absolute inset-0 pointer-events-none" style="background-image: url({zoomImage}); background-size: {zoom * 100}%; background-position: {posX}% {posY}%; background-repeat: no-repeat;"></span>
-    {/if}
-  </button>
-{:else}
-  <div
-    bind:this={container}
-    role="img"
-    aria-label={alt || 'Zoomable image'}
-    class="relative overflow-hidden {roundedClasses[rounded]} {className}"
-    onmouseenter={handleMouseEnter}
-    onmousemove={handleMouseMove}
-    onmouseleave={handleMouseLeave}
-  >
-    <img {src} {alt} class="w-full h-full object-cover block" loading="lazy" />
-    {#if zooming}
-      <div class="absolute inset-0 pointer-events-none" style="background-image: url({zoomImage}); background-size: {zoom * 100}%; background-position: {posX}% {posY}%; background-repeat: no-repeat;"></div>
-    {/if}
-  </div>
-{/if}
+<div
+  bind:this={container}
+  class="karbon-imgzoom relative overflow-hidden inline-block {classes?.root ?? className}"
+  style="border-radius:{rad};{width ? `width:${width};` : ''}{height ? `height:${height};` : ''}cursor:{zooming ? 'crosshair' : trigger === 'click' ? 'zoom-in' : 'crosshair'};"
+  role="img"
+  aria-label={alt || 'Image zoomable'}
+  tabindex={0}
+  onmouseenter={handleMouseEnter}
+  onmousemove={handleMouseMove}
+  onmouseleave={handleMouseLeave}
+  onclick={trigger === 'click' ? handleClick : undefined}
+  onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); zooming = !zooming } }}
+>
+  <!-- Base image -->
+  <img
+    {src}
+    {alt}
+    class="w-full h-full object-cover block transition-transform duration-200 {classes?.img ?? ''}"
+    style={zooming && mode === 'overlay' ? `transform:scale(${zoom});transform-origin:${posX}% ${posY}%;` : ''}
+    loading="lazy"
+    draggable="false"
+  />
+
+  <!-- Hint icon -->
+  {#if showHint && !zooming && hovered}
+    <div
+      class="absolute top-3 right-3 rounded-full px-2 py-1 flex items-center gap-1 pointer-events-none"
+      style="background:rgba(0,0,0,0.5);color:white;font-size:11px;backdrop-filter:blur(4px);opacity:0.8;"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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"/><path d="m21 21-4.3-4.3"/><path d="M11 8v6"/><path d="M8 11h6"/></svg>
+      <span>Zoom</span>
+    </div>
+  {/if}
+
+  <!-- Lens mode -->
+  {#if mode === 'lens' && zooming}
+    <div
+      class="absolute rounded-full pointer-events-none shadow-xl {classes?.lens ?? ''}"
+      style="
+        width:{lensSize}px;height:{lensSize}px;
+        left:{mouseX - lensSize / 2}px;top:{mouseY - lensSize / 2}px;
+        background-image:url({zoomImage});
+        background-size:{zoom * 100}%;
+        background-position:{posX}% {posY}%;
+        background-repeat:no-repeat;
+        border:3px solid {accent};
+        box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 8px 25px rgba(0,0,0,0.3);
+        z-index:10;
+      "
+    ></div>
+    <!-- Crosshair on source -->
+    <div
+      class="absolute pointer-events-none"
+      style="
+        width:{lensSize / zoom}px;height:{lensSize / zoom}px;
+        left:{mouseX - lensSize / zoom / 2}px;top:{mouseY - lensSize / zoom / 2}px;
+        border:1.5px solid {accent};
+        border-radius:2px;
+        background:color-mix(in srgb,{accent} 8%,transparent);
+        z-index:5;
+      "
+    ></div>
+  {/if}
+
+  <!-- Overlay mode zoom layer (CSS transform on img handles this) -->
+
+  <!-- Side mode -->
+  {#if mode === 'side' && zooming}
+    <div
+      class="absolute top-0 shadow-2xl pointer-events-none {classes?.overlay ?? ''}"
+      style="
+        left:calc(100% + 12px);
+        width:{container?.offsetWidth || 300}px;
+        height:{container?.offsetHeight || 300}px;
+        background-image:url({zoomImage});
+        background-size:{zoom * 100}%;
+        background-position:{posX}% {posY}%;
+        background-repeat:no-repeat;
+        border-radius:{rad};
+        border:1px solid var(--karbon-border);
+        z-index:10;
+      "
+    ></div>
+    <!-- Crosshair indicator -->
+    <div
+      class="absolute pointer-events-none"
+      style="
+        width:{100 / zoom}%;height:{100 / zoom}%;
+        left:{posX - 50 / zoom}%;top:{posY - 50 / zoom}%;
+        border:2px solid {accent};
+        background:color-mix(in srgb,{accent} 10%,transparent);
+        z-index:5;
+      "
+    ></div>
+  {/if}
+</div>

package/src/index.ts

@@ -1,8 +1,10 @@
 // button
 export { default as Button } from './button/Button.svelte'
+export { default as ButtonBrand } from './button/ButtonBrand.svelte'
 
 // form
-export { default as FormInput } from './form/FormInput.svelte'
+export { default as Input } from './form/Input.svelte'
+export { default as FormInput } from './form/Input.svelte' // alias retro-compat
 export { default as Select } from './form/Select.svelte'
 export { default as Checkbox } from './form/Checkbox.svelte'
 export { default as Toggle } from './form/Toggle.svelte'
@@ -30,8 +32,12 @@ export { default as PageHeader } from './layout/PageHeader.svelte'
 export { default as EmptyState } from './layout/EmptyState.svelte'
 
 // image
+// code
+export { default as CodeBlock } from './code/CodeBlock.svelte'
+
 export { default as Image } from './image/Image.svelte'
 export { default as ImgZoom } from './image/ImgZoom.svelte'
+export { default as ImageCompare } from './image/ImageCompare.svelte'
 
 // carousel
 export { default as Carousel } from './carousel/Carousel.svelte'

package/src/kbd/Kbd.svelte

@@ -2,17 +2,18 @@
   interface Props {
     keys: string[]
     class?: string
+    classes?: { root?: string, key?: string }
   }
 
-  let { keys, class: className = '' }: Props = $props()
+  let { keys, class: className = '', classes = {} }: Props = $props()
 </script>
 
-<span class="inline-flex items-center gap-1 {className}">
+<span class="inline-flex items-center gap-1 {classes?.root ?? className}">
   {#each keys as key, i}
     {#if i > 0}
       <span class="text-[var(--karbon-text-4,#b5b2cc)] text-xs">+</span>
     {/if}
-    <kbd class="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-1.5 rounded-md border border-[var(--karbon-border,rgba(0,0,0,0.07))] bg-[var(--karbon-bg-2,#e8e6f0)] text-[var(--karbon-text-2,#5a567e)] text-[11px] font-mono font-medium shadow-sm">
+    <kbd class="inline-flex items-center justify-center min-w-[1.5rem] h-6 px-1.5 rounded-md border border-[var(--karbon-border,rgba(0,0,0,0.07))] bg-[var(--karbon-bg-2,#e8e6f0)] text-[var(--karbon-text-2,#5a567e)] text-[11px] font-mono font-medium shadow-sm {classes?.key ?? ''}">
       {key}
     </kbd>
   {/each}

package/src/layout/Card.svelte

@@ -6,9 +6,11 @@
     variant?: CardVariant
     padding?: CardPadding
     hoverable?: boolean
+    noPadding?: boolean
     title?: string
     icon?: any
     class?: string
+    classes?: { root?: string, header?: string, body?: string }
     children: Snippet
     header?: Snippet
     footer?: Snippet
@@ -18,17 +20,19 @@
     variant = 'default',
     padding = 'md',
     hoverable = false,
+    noPadding = false,
     title = '',
     icon: Icon,
     class: className = '',
+    classes = {},
     children,
     header,
     footer
   }: Props = $props()
 
   const variantClasses: Record<string, string> = {
-    default: 'bg-[var(--karbon-bg-card,#fff)] border border-[var(--karbon-border,rgba(0,0,0,0.07))]',
-    elevated: 'bg-[var(--karbon-bg-card,#fff)] shadow-lg',
+    default: 'bg-[var(--karbon-bg-card,#fff)] border border-[var(--karbon-border,rgba(0,0,0,0.07))] shadow-sm',
+    elevated: 'bg-[var(--karbon-bg-card,#fff)] border border-[var(--karbon-border,rgba(0,0,0,0.07))] shadow-lg',
     outlined: 'border-2 border-[var(--karbon-border,rgba(0,0,0,0.07))]',
     ghost: 'bg-transparent'
   }
@@ -39,15 +43,17 @@
     md: 'p-5',
     lg: 'p-8'
   }
+
+  const bodyPadding = $derived(noPadding ? '' : paddingClasses[padding])
 </script>
 
-<div class="rounded-xl overflow-hidden {variantClasses[variant]} {hoverable ? 'transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5' : ''} {className}">
+<div class="rounded-xl overflow-hidden {variantClasses[variant]} {hoverable ? 'transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5' : ''} {classes?.root ?? className}">
   {#if header}
-    <div class="px-5 py-3.5 border-b border-[var(--karbon-border,rgba(0,0,0,0.07))]">
+    <div class="px-5 py-3.5 border-b border-[var(--karbon-border,rgba(0,0,0,0.07))] {classes?.header ?? ''}">
       {@render header()}
     </div>
   {:else if title}
-    <div class="flex items-center gap-2 px-5 py-3.5 border-b border-[var(--karbon-border,rgba(0,0,0,0.07))] text-[var(--karbon-text-2,#5a567e)] text-[0.825rem] font-semibold">
+    <div class="flex items-center gap-2 px-5 py-3.5 border-b border-[var(--karbon-border,rgba(0,0,0,0.07))] text-[var(--karbon-text-2,#5a567e)] text-[0.825rem] font-semibold {classes?.header ?? ''}">
       {#if Icon}
         <Icon class="w-4 h-4" />
       {/if}
@@ -55,7 +61,7 @@
     </div>
   {/if}
 
-  <div class={paddingClasses[padding]}>
+  <div class="{bodyPadding} {classes?.body ?? ''}">
     {@render children()}
   </div>
 

package/src/layout/EmptyState.svelte

@@ -1,25 +1,92 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { ButtonColor } from '@karbonjs/ui-core'
+
   interface Props {
     title: string
     description?: string
-    icon?: any
+    icon?: Snippet
+    color?: ButtonColor
+    size?: 'sm' | 'md' | 'lg'
+    variant?: 'default' | 'bordered' | 'filled' | 'minimal'
+    actions?: Snippet
+    illustration?: Snippet
+    class?: string
+    classes?: { root?: string, icon?: string, title?: string, description?: string, actions?: string }
   }
 
   let {
     title,
     description = '',
-    icon: Icon
+    icon,
+    color,
+    size = 'md',
+    variant = 'default',
+    actions,
+    illustration,
+    class: className = '',
+    classes = {}
   }: Props = $props()
+
+  const accent = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+  const accentLight = $derived(color ? `var(--karbon-${color}-400)` : 'var(--karbon-text-4)')
+
+  const sizeMap = {
+    sm: { py: 'py-8', title: 'text-sm', desc: 'text-xs', iconBox: 40, iconSize: 20, maxW: '18rem', gap: 'gap-2' },
+    md: { py: 'py-12', title: 'text-base', desc: 'text-sm', iconBox: 52, iconSize: 24, maxW: '22rem', gap: 'gap-3' },
+    lg: { py: 'py-16', title: 'text-lg', desc: 'text-base', iconBox: 64, iconSize: 28, maxW: '26rem', gap: 'gap-4' },
+  }
+  const s = $derived(sizeMap[size])
+
+  function rootStyle(): string {
+    switch (variant) {
+      case 'bordered': return `border:1px solid var(--karbon-border);border-radius:0.75rem;background:var(--karbon-bg-card);`
+      case 'filled': return `border-radius:0.75rem;background:color-mix(in srgb,${accent} 5%,transparent);border:1px solid color-mix(in srgb,${accent} 10%,transparent);`
+      case 'minimal': return ''
+      default: return ''
+    }
+  }
 </script>
 
-<div class="text-center py-12 px-6">
-  {#if Icon}
-    <div class="w-14 h-14 rounded-2xl bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))] text-[var(--karbon-text-4,#b5b2cc)] flex items-center justify-center mx-auto mb-4">
-      <Icon class="w-8 h-8" />
+<div
+  class="text-center {s.py} px-6 {classes?.root ?? className}"
+  style={rootStyle()}
+>
+  <!-- Illustration -->
+  {#if illustration}
+    <div class="mb-4 flex justify-center">
+      {@render illustration()}
+    </div>
+  {:else if icon}
+    <!-- Icon -->
+    <div
+      class="mx-auto mb-4 rounded-2xl flex items-center justify-center {classes?.icon ?? ''}"
+      style="width:{s.iconBox}px;height:{s.iconBox}px;background:color-mix(in srgb,{accent} 10%,transparent);color:{accentLight};"
+    >
+      {@render icon()}
+    </div>
+  {:else}
+    <!-- Default icon -->
+    <div
+      class="mx-auto mb-4 rounded-2xl flex items-center justify-center {classes?.icon ?? ''}"
+      style="width:{s.iconBox}px;height:{s.iconBox}px;background:var(--karbon-nav-hover-bg);color:var(--karbon-text-4);"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width={s.iconSize} height={s.iconSize} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
     </div>
   {/if}
-  <p class="text-[var(--karbon-text-2,#5a567e)] font-semibold text-[0.95rem] m-0">{title}</p>
+
+  <!-- Title -->
+  <p class="{s.title} font-semibold {classes?.title ?? ''}" style="color:var(--karbon-text);margin:0;">{title}</p>
+
+  <!-- Description -->
   {#if description}
-    <p class="text-[var(--karbon-text-3,#8e8aae)] text-[0.8rem] mt-1.5 mx-auto max-w-[22rem]">{description}</p>
+    <p class="{s.desc} mt-1.5 mx-auto {classes?.description ?? ''}" style="color:var(--karbon-text-3);margin-top:0.375rem;max-width:{s.maxW};">{description}</p>
+  {/if}
+
+  <!-- Actions -->
+  {#if actions}
+    <div class="mt-5 flex items-center justify-center {s.gap} {classes?.actions ?? ''}">
+      {@render actions()}
+    </div>
   {/if}
 </div>