@karbonjs/ui-svelte 0.2.5 → 0.3.1

package/src/overlay/ImgBox.svelte

@@ -8,6 +8,7 @@
     backdrop?: OverlayBackdrop
     captions?: string[]
     class?: string
+    classes?: { root?: string, backdrop?: string, image?: string }
     onclose: () => void
   }
 
@@ -18,6 +19,7 @@
     backdrop = 'blur',
     captions = [],
     class: className = '',
+    classes = {},
     onclose
   }: Props = $props()
 
@@ -27,6 +29,8 @@
   let dragging = $state(false)
   let visible = $state(false)
   let portal: HTMLDivElement | null = $state(null)
+  let transitioning = $state(false)
+  let showThumbs = $state(false)
 
   const backdropClasses: Record<string, string> = {
     blur: 'bg-black/70 backdrop-blur-xl',
@@ -58,15 +62,32 @@
 
   function close() {
     visible = false
-    setTimeout(() => onclose(), 200)
+    setTimeout(() => onclose(), 350)
   }
 
   function prev() {
-    if (hasPrev) { index--; resetTransform() }
+    if (hasPrev && !transitioning) {
+      transitioning = true
+      setTimeout(() => { index--; resetTransform(); transitioning = false }, 150)
+    }
   }
 
   function next() {
-    if (hasNext) { index++; resetTransform() }
+    if (hasNext && !transitioning) {
+      transitioning = true
+      setTimeout(() => { index++; resetTransform(); transitioning = false }, 150)
+    }
+  }
+
+  function goTo(i: number) {
+    if (i === index || transitioning) return
+    transitioning = true
+    setTimeout(() => { index = i; resetTransform(); transitioning = false }, 150)
+  }
+
+  function handleDblClick() {
+    if (scale > 1) resetTransform()
+    else scale = 2.5
   }
 
   function zoomIn() {
@@ -128,21 +149,22 @@
   <div
     use:teleport
     data-imgbox-root
-    class="imgbox-root {className}"
+    class="imgbox-root {classes?.root ?? className}"
     style="opacity: {visible ? 1 : 0};"
   >
-    <!-- Backdrop — click here to close, captures all stray events -->
+    <!-- Backdrop -->
     <div
-      class="imgbox-backdrop {backdropClasses[backdrop]}"
+      class="imgbox-backdrop {backdropClasses[backdrop]} {classes?.backdrop ?? ''}"
       onclick={() => { if (scale <= 1) close() }}
       role="presentation"
     ></div>
 
-    <!-- Close button — top right -->
+    <!-- Close button -->
     <button
       onclick={close}
       aria-label="Fermer"
       class="imgbox-close"
+      style="opacity:{visible ? 1 : 0};transition:opacity 0.3s ease 0.15s,background 0.15s ease,color 0.15s ease;"
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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>
@@ -151,8 +173,9 @@
     {#if hasPrev}
       <button
         onclick={prev}
-        aria-label="Image précédente"
+        aria-label="Image precedente"
         class="imgbox-nav imgbox-nav-prev"
+        style="opacity:{visible ? 1 : 0};transition:opacity 0.3s ease 0.2s,background 0.15s ease,color 0.15s ease;"
       >
         <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="m15 18-6-6 6-6"/></svg>
       </button>
@@ -164,6 +187,7 @@
         onclick={next}
         aria-label="Image suivante"
         class="imgbox-nav imgbox-nav-next"
+        style="opacity:{visible ? 1 : 0};transition:opacity 0.3s ease 0.2s,background 0.15s ease,color 0.15s ease;"
       >
         <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="m9 18 6-6-6-6"/></svg>
       </button>
@@ -179,30 +203,69 @@
       <img
         src={images[index]}
         alt={caption || `Image ${index + 1}`}
-        class="imgbox-image"
-        style="transform: scale({visible ? scale : 0.9}) translate({translateX / scale}px, {translateY / scale}px); opacity: {visible ? 1 : 0};"
+        class="imgbox-image {classes?.image ?? ''}"
+        style="
+          transform: scale({visible ? scale : 0.7}) translate({translateX / scale}px, {translateY / scale}px);
+          opacity: {visible && !transitioning ? 1 : 0};
+          filter: {visible ? 'blur(0)' : 'blur(8px)'};
+          transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease, filter 0.3s ease;
+        "
         draggable="false"
+        ondblclick={handleDblClick}
       />
     </div>
 
-    <!-- Counter -->
+    <!-- Caption -->
+    {#if caption}
+      <div class="imgbox-caption">
+        <span style="background:rgba(0,0,0,0.5);color:rgba(255,255,255,0.85);backdrop-filter:blur(8px);padding:6px 14px;border-radius:8px;font-size:13px;">{caption}</span>
+      </div>
+    {/if}
+
+    <!-- Counter + thumbnails toggle -->
     {#if images.length > 1}
       <div class="imgbox-counter">
-        <span class="text-white/40 text-xs bg-black/30 rounded-full px-2 py-0.5">{index + 1} / {images.length}</span>
+        <div style="display:flex;align-items:center;gap:8px;background:rgba(0,0,0,0.4);border-radius:9999px;padding:4px 12px;backdrop-filter:blur(8px);">
+          <span style="color:rgba(255,255,255,0.5);font-size:12px;">{index + 1} / {images.length}</span>
+          <button
+            onclick={() => showThumbs = !showThumbs}
+            style="color:rgba(255,255,255,{showThumbs ? '0.9' : '0.4'});cursor:pointer;background:none;border:none;padding:2px;"
+            aria-label="Afficher les miniatures"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/></svg>
+          </button>
+        </div>
       </div>
     {/if}
 
-    <!-- Zoom controls — bottom center, full-width wrapper -->
+    <!-- Thumbnails strip -->
+    {#if showThumbs && images.length > 1}
+      <div class="imgbox-thumbs">
+        <div style="display:flex;gap:6px;padding:8px 12px;background:rgba(0,0,0,0.5);border-radius:12px;backdrop-filter:blur(12px);">
+          {#each images as img, i}
+            <button
+              onclick={() => goTo(i)}
+              style="width:48px;height:36px;border-radius:6px;overflow:hidden;border:{i === index ? '2px solid white' : '2px solid transparent'};opacity:{i === index ? 1 : 0.5};cursor:pointer;padding:0;transition:all 0.15s ease;flex-shrink:0;"
+              aria-label="Image {i + 1}"
+            >
+              <img src={img} alt="" style="width:100%;height:100%;object-fit:cover;" draggable="false" />
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <!-- Zoom controls -->
     <div class="imgbox-controls" style="opacity: {visible ? 1 : 0};">
       <div class="flex items-center gap-1 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">
+        <button onclick={zoomOut} aria-label="Dezoomer" class="text-white/60 hover:text-white transition-colors cursor-pointer p-1">
           <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"><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="16" height="16" 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>
-        <button onclick={resetTransform} aria-label="Réinitialiser" class="text-white/60 hover:text-white transition-colors cursor-pointer p-1 ml-1 border-l border-white/20 pl-2">
+        <button onclick={resetTransform} aria-label="Reinitialiser" class="text-white/60 hover:text-white transition-colors cursor-pointer p-1 ml-1 border-l border-white/20 pl-2">
           <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="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
         </button>
       </div>
@@ -219,7 +282,7 @@
     align-items: center;
     justify-content: center;
     pointer-events: auto;
-    transition: opacity 0.2s ease;
+    transition: opacity 0.3s ease;
   }
 
   .imgbox-backdrop {
@@ -228,10 +291,16 @@
     z-index: 0;
     pointer-events: auto;
     cursor: default;
+    transition: opacity 0.4s ease;
   }
 
   .imgbox-close {
-    @apply rounded-full p-2.5 text-white/70 bg-black/30 transition-all cursor-pointer;
+    border-radius: 9999px;
+    padding: 0.625rem;
+    color: rgba(255, 255, 255, 0.7);
+    background: rgba(0, 0, 0, 0.3);
+    transition: all 0.15s ease;
+    cursor: pointer;
     position: absolute;
     top: 16px;
     right: 16px;
@@ -241,11 +310,17 @@
   }
 
   .imgbox-close:hover {
-    @apply text-white bg-black/50;
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
   }
 
   .imgbox-nav {
-    @apply rounded-full p-3 text-white/60 bg-black/20 transition-all cursor-pointer;
+    border-radius: 9999px;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(0, 0, 0, 0.2);
+    transition: all 0.15s ease;
+    cursor: pointer;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -255,7 +330,8 @@
   }
 
   .imgbox-nav:hover {
-    @apply text-white bg-black/50;
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
   }
 
   .imgbox-nav-prev { left: 16px; }
@@ -282,7 +358,29 @@
     pointer-events: none;
   }
 
+  .imgbox-caption {
+    position: absolute;
+    top: 16px;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    z-index: 10;
+    pointer-events: none;
+  }
+
   .imgbox-counter {
+    position: absolute;
+    bottom: 80px;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    z-index: 10;
+    pointer-events: auto;
+  }
+
+  .imgbox-thumbs {
     position: absolute;
     bottom: 56px;
     left: 0;
@@ -290,7 +388,13 @@
     display: flex;
     justify-content: center;
     z-index: 10;
-    pointer-events: none;
+    pointer-events: auto;
+    animation: karbon-imgbox-thumbs-in 0.2s ease;
+  }
+
+  @keyframes karbon-imgbox-thumbs-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
   }
 
   .imgbox-controls {

package/src/overlay/Modal.svelte

@@ -1,16 +1,21 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
-  import type { ModalSize, OverlayBackdrop } from '@karbonjs/ui-core'
+  import type { ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     open: boolean
     title?: string
-    size?: ModalSize
-    backdrop?: OverlayBackdrop
+    description?: string
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+    position?: 'center' | 'top' | 'right' | 'bottom'
+    backdrop?: 'blur' | 'dark' | 'light' | 'transparent'
     closable?: boolean
     closeOnOverlay?: boolean
+    color?: ButtonColor
     class?: string
+    classes?: { overlay?: string, content?: string, header?: string, body?: string, footer?: string }
     onclose: () => void
+    icon?: Snippet
     children: Snippet
     footer?: Snippet
   }
@@ -18,78 +23,155 @@
   let {
     open = $bindable(false),
     title = '',
+    description = '',
     size = 'md',
-    backdrop = 'none',
+    position = 'center',
+    backdrop = 'blur',
     closable = true,
     closeOnOverlay = true,
+    color,
     class: className = '',
+    classes = {},
     onclose,
+    icon,
     children,
     footer
   }: Props = $props()
 
-  const sizeClasses: Record<string, string> = {
+  let visible = $state(false)
+  let contentEl: HTMLDivElement | undefined = $state()
+
+  const accent = $derived(color ? `var(--karbon-${color}-500)` : '')
+
+  $effect(() => {
+    if (open) {
+      requestAnimationFrame(() => { visible = true })
+      document.body.style.overflow = 'hidden'
+    } else {
+      visible = false
+      document.body.style.overflow = ''
+    }
+    return () => { document.body.style.overflow = '' }
+  })
+
+  const sizeMap: Record<string, string> = {
+    xs: 'max-w-xs',
     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)]'
+    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'
+  const backdropStyles: Record<string, string> = {
+    blur: 'background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);',
+    dark: 'background:rgba(0,0,0,0.6);',
+    light: 'background:rgba(255,255,255,0.4);backdrop-filter:blur(4px);',
+    transparent: 'background:transparent;',
+  }
+
+  const positionClasses: Record<string, string> = {
+    center: 'items-center justify-center',
+    top: 'items-start justify-center pt-16',
+    right: 'items-stretch justify-end',
+    bottom: 'items-end justify-center pb-4',
+  }
+
+  const contentPosition: Record<string, string> = {
+    center: 'rounded-xl',
+    top: 'rounded-xl',
+    right: 'rounded-l-xl rounded-r-none min-h-full',
+    bottom: 'rounded-t-xl rounded-b-none',
+  }
+
+  function close() {
+    if (!closable) return
+    visible = false
+    setTimeout(() => onclose(), 150)
   }
 
   function handleOverlayClick() {
-    if (closeOnOverlay) onclose()
+    if (closeOnOverlay) close()
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape' && closable) onclose()
+    if (e.key === 'Escape' && closable && open) close()
   }
 </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">
+  <div
+    class="fixed inset-0 z-50 flex p-4 {positionClasses[position]}"
+    style="opacity:{visible ? 1 : 0};transition:opacity 0.15s ease;"
+  >
+    <!-- Backdrop -->
     <!-- svelte-ignore a11y_click_events_have_key_events -->
-    {#if backdrop !== 'none'}
-      <div class="fixed inset-0 {backdropClasses[backdrop]}" onclick={handleOverlayClick}></div>
-    {/if}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="fixed inset-0 {classes?.overlay ?? ''}"
+      style="{backdropStyles[backdrop]}transition:opacity 0.15s ease;opacity:{visible ? 1 : 0};"
+      onclick={handleOverlayClick}
+    ></div>
+
+    <!-- Content -->
     <div
-      class="relative z-10 w-full {sizeClasses[size]} rounded-xl shadow-xl bg-[var(--karbon-bg-card,#fff)] flex flex-col {className}"
+      bind:this={contentEl}
+      class="relative z-10 w-full {sizeMap[size]} {contentPosition[position]} flex flex-col {classes?.content ?? className}"
+      style="background:var(--karbon-bg-card);box-shadow:0 25px 60px -12px rgba(0,0,0,0.4);border:1px solid var(--karbon-border);
+        transform:{visible ? 'scale(1) translateY(0)' : 'scale(0.95) translateY(8px)'};
+        transition:transform 0.2s cubic-bezier(0.16,1,0.3,1),opacity 0.15s ease;
+        opacity:{visible ? 1 : 0};"
       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>
+      <!-- Header -->
+      {#if title || closable || icon || description}
+        <div class="flex gap-4 px-6 pt-6 pb-2 {classes?.header ?? ''}">
+          {#if icon}
+            <div class="shrink-0 mt-0.5">
+              {#if color}
+                <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background:color-mix(in srgb,{accent} 12%,transparent);color:{accent};">
+                  {@render icon()}
+                </div>
+              {:else}
+                {@render icon()}
+              {/if}
+            </div>
           {/if}
+          <div class="flex-1 min-w-0">
+            {#if title}
+              <h3 class="text-lg font-semibold" style="color:var(--karbon-text);">{title}</h3>
+            {/if}
+            {#if description}
+              <p class="text-sm mt-0.5" style="color:var(--karbon-text-3);">{description}</p>
+            {/if}
+          </div>
           {#if closable}
             <button
-              onclick={onclose}
+              onclick={close}
               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)]"
+              class="shrink-0 rounded-lg p-1.5 transition-colors cursor-pointer"
+              style="color:var(--karbon-text-4);"
+              onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--karbon-nav-hover-bg)'; (e.currentTarget as HTMLElement).style.color = 'var(--karbon-text-2)' }}
+              onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; (e.currentTarget as HTMLElement).style.color = 'var(--karbon-text-4)' }}
             >
-              <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>
+              <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"><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">
+      <!-- Body -->
+      <div class="px-6 py-4 flex-1 overflow-y-auto text-sm {classes?.body ?? ''}" style="color:var(--karbon-text-2);">
         {@render children()}
       </div>
 
+      <!-- Footer -->
       {#if footer}
-        <div class="px-6 pb-6 pt-2 flex items-center justify-end gap-3">
+        <div class="px-6 py-4 flex items-center justify-end gap-2 {classes?.footer ?? ''}" style="border-top:1px solid var(--karbon-border);">
           {@render footer()}
         </div>
       {/if}