@karbonjs/ui-svelte 0.2.5 → 0.3.0

package/src/layout/PageHeader.svelte

@@ -1,27 +1,127 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { ButtonColor } from '@karbonjs/ui-core'
+
   interface Props {
     title: string
     description?: string
-    icon?: any
-    iconColor?: string
+    icon?: Snippet
+    color?: ButtonColor
+    size?: 'sm' | 'md' | 'lg'
+    variant?: 'default' | 'bordered' | 'filled' | 'clean'
+    backHref?: string
+    backLabel?: string
+    badge?: string
+    breadcrumbs?: { label: string, href?: string }[]
+    actions?: Snippet
+    class?: string
+    classes?: { root?: string, title?: string, description?: string, icon?: string, actions?: string, breadcrumb?: string }
   }
 
   let {
     title,
     description = '',
-    icon: Icon,
-    iconColor = 'var(--karbon-primary, #cc1a1a)'
+    icon,
+    color,
+    size = 'md',
+    variant = 'default',
+    backHref,
+    backLabel = 'Retour',
+    badge,
+    breadcrumbs,
+    actions,
+    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-primary)')
+
+  const sizeMap = {
+    sm: { title: 'text-lg', desc: 'text-xs', iconBox: 32, iconSize: 16, pad: 'pb-3', gap: 'gap-2.5' },
+    md: { title: 'text-xl', desc: 'text-sm', iconBox: 40, iconSize: 20, pad: 'pb-4', gap: 'gap-3' },
+    lg: { title: 'text-2xl', desc: 'text-base', iconBox: 48, iconSize: 24, pad: 'pb-5', gap: 'gap-4' },
+  }
+  const s = $derived(sizeMap[size])
+
+  function rootStyle(): string {
+    switch (variant) {
+      case 'default': return `padding-bottom:${size === 'sm' ? '0.75rem' : size === 'lg' ? '1.25rem' : '1rem'};border-bottom:1px solid var(--karbon-border);margin-bottom:0.25rem;`
+      case 'bordered': return `padding:${size === 'sm' ? '0.75rem' : size === 'lg' ? '1.25rem' : '1rem'};border:1px solid var(--karbon-border);border-radius:0.75rem;background:var(--karbon-bg-card);`
+      case 'filled': return `padding:${size === 'sm' ? '0.75rem' : size === 'lg' ? '1.5rem' : '1rem'};border-radius:0.75rem;background:color-mix(in srgb,${accent} 8%,transparent);border:1px solid color-mix(in srgb,${accent} 15%,transparent);`
+      case 'clean': return ''
+      default: return ''
+    }
+  }
 </script>
 
-<div class="flex items-start gap-3 pb-4 border-b border-[var(--karbon-border,rgba(0,0,0,0.07))] mb-1">
-  {#if Icon}
-    <Icon class="w-5 h-5 shrink-0" style="color: {iconColor}" />
+<div class="{classes?.root ?? className}" style={rootStyle()}>
+  <!-- Breadcrumbs -->
+  {#if breadcrumbs && breadcrumbs.length > 0}
+    <nav class="flex items-center gap-1.5 mb-2 {classes?.breadcrumb ?? ''}" aria-label="Breadcrumb">
+      {#each breadcrumbs as crumb, i}
+        {#if i > 0}
+          <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" style="color:var(--karbon-text-4);"><path d="m9 18 6-6-6-6"/></svg>
+        {/if}
+        {#if crumb.href && i < breadcrumbs.length - 1}
+          <a href={crumb.href} class="text-xs transition-colors" style="color:var(--karbon-text-3);"
+            onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.color = accent }}
+            onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.color = 'var(--karbon-text-3)' }}
+          >{crumb.label}</a>
+        {:else}
+          <span class="text-xs font-medium" style="color:var(--karbon-text-2);">{crumb.label}</span>
+        {/if}
+      {/each}
+    </nav>
   {/if}
-  <div>
-    <h1 class="text-[var(--karbon-text,#1a1635)] text-[1.1rem] font-bold m-0">{title}</h1>
-    {#if description}
-      <p class="text-[var(--karbon-text-3,#8e8aae)] text-[0.8rem] mt-0.5">{description}</p>
+
+  <!-- Back button -->
+  {#if backHref}
+    <a
+      href={backHref}
+      class="inline-flex items-center gap-1.5 text-xs font-medium mb-2 transition-colors"
+      style="color:var(--karbon-text-3);"
+      onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.color = accent }}
+      onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.color = 'var(--karbon-text-3)' }}
+    >
+      <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"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
+      {backLabel}
+    </a>
+  {/if}
+
+  <!-- Main row -->
+  <div class="flex items-start {s.gap}">
+    <!-- Icon -->
+    {#if icon}
+      <div
+        class="shrink-0 rounded-xl flex items-center justify-center {classes?.icon ?? ''}"
+        style="width:{s.iconBox}px;height:{s.iconBox}px;background:color-mix(in srgb,{accent} 12%,transparent);color:{accentLight};"
+      >
+        {@render icon()}
+      </div>
+    {/if}
+
+    <!-- Title + description -->
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2">
+        <h1 class="{s.title} font-bold {classes?.title ?? ''}" style="color:var(--karbon-text);margin:0;">{title}</h1>
+        {#if badge}
+          <span
+            class="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+            style="background:color-mix(in srgb,{accent} 15%,transparent);color:{accentLight};"
+          >{badge}</span>
+        {/if}
+      </div>
+      {#if description}
+        <p class="{s.desc} mt-1 {classes?.description ?? ''}" style="color:var(--karbon-text-3);margin:0;">{description}</p>
+      {/if}
+    </div>
+
+    <!-- Actions -->
+    {#if actions}
+      <div class="shrink-0 flex items-center gap-2 {classes?.actions ?? ''}">
+        {@render actions()}
+      </div>
     {/if}
   </div>
 </div>

package/src/overlay/Dialog.svelte

@@ -1,128 +1,208 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
-  import type { DialogVariant, OverlayBackdrop } from '@karbonjs/ui-core'
+  import type { ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     open: boolean
     title: string
-    description?: string
-    variant?: DialogVariant
-    backdrop?: OverlayBackdrop
+    message?: string
+    variant?: 'info' | 'warning' | 'danger' | 'success'
+    backdrop?: 'blur' | 'dark' | 'transparent'
+    color?: ButtonColor
     confirmLabel?: string
     cancelLabel?: string
+    confirmInput?: string
+    confirmInputLabel?: string
+    confirmInputPlaceholder?: string
     loading?: boolean
     class?: string
+    classes?: { overlay?: string, content?: string }
     onconfirm: () => void
     oncancel: () => void
     icon?: Snippet
+    children?: Snippet
   }
 
   let {
     open = $bindable(false),
     title,
-    description = '',
+    message = '',
     variant = 'info',
-    backdrop = 'none',
+    backdrop = 'blur',
+    color,
     confirmLabel = 'Confirmer',
     cancelLabel = 'Annuler',
+    confirmInput,
+    confirmInputLabel,
+    confirmInputPlaceholder,
     loading = false,
     class: className = '',
+    classes = {},
     onconfirm,
     oncancel,
-    icon
+    icon,
+    children
   }: Props = $props()
 
-  const backdropClasses: Record<string, string> = {
-    blur: 'bg-black/30 backdrop-blur-sm',
-    dark: 'bg-black/50',
-    transparent: 'bg-transparent',
-    none: 'hidden'
+  let visible = $state(false)
+  let inputValue = $state('')
+
+  $effect(() => {
+    if (open) {
+      inputValue = ''
+      requestAnimationFrame(() => { visible = true })
+      document.body.style.overflow = 'hidden'
+    } else {
+      visible = false
+      document.body.style.overflow = ''
+    }
+    return () => { document.body.style.overflow = '' }
+  })
+
+  const confirmInputLabelText = $derived(confirmInputLabel ?? `Tapez "${confirmInput}" pour confirmer`)
+  const isConfirmDisabled = $derived(loading || (confirmInput ? inputValue !== confirmInput : false))
+
+  // Variant colors
+  const variantColors: Record<string, { bg: string, text: string, btn: string, btnHover: string }> = {
+    info:    { bg: 'var(--karbon-blue-500)', text: 'var(--karbon-blue-400)', btn: 'var(--karbon-blue-500)', btnHover: 'var(--karbon-blue-600)' },
+    warning: { bg: 'var(--karbon-amber-500)', text: 'var(--karbon-amber-400)', btn: 'var(--karbon-amber-500)', btnHover: 'var(--karbon-amber-600)' },
+    danger:  { bg: 'var(--karbon-red-500)', text: 'var(--karbon-red-400)', btn: 'var(--karbon-red-500)', btnHover: 'var(--karbon-red-600)' },
+    success: { bg: 'var(--karbon-emerald-500)', text: 'var(--karbon-emerald-400)', btn: 'var(--karbon-emerald-500)', btnHover: 'var(--karbon-emerald-600)' },
   }
 
-  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 vc = $derived(color
+    ? { bg: `var(--karbon-${color}-500)`, text: `var(--karbon-${color}-400)`, btn: `var(--karbon-${color}-500)`, btnHover: `var(--karbon-${color}-600)` }
+    : variantColors[variant]
+  )
+
+  // SVG icons per variant
+  const variantIcons: Record<string, string> = {
+    info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+    warning: '<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"/>',
+    danger: '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
+    success: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',
+  }
+
+  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);',
+    transparent: 'background:transparent;',
+  }
+
+  let btnHovered = $state(false)
+
+  function cancel() {
+    visible = false
+    setTimeout(() => oncancel(), 150)
   }
 
-  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 confirm() {
+    if (isConfirmDisabled) return
+    onconfirm()
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') oncancel()
+    if (e.key === 'Escape' && open) cancel()
+    if (e.key === 'Enter' && open && !isConfirmDisabled) confirm()
   }
 </script>
 
-<svelte:window onkeydown={open ? handleKeydown : undefined} />
+<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 items-center justify-center p-4"
+    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={oncancel}></div>
-    {/if}
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      class="relative z-10 w-full max-w-md rounded-xl shadow-xl bg-[var(--karbon-bg-card,#fff)] p-6 {className}"
+      class="fixed inset-0 {classes?.overlay ?? ''}"
+      style="{backdropStyles[backdrop]}transition:opacity 0.15s ease;opacity:{visible ? 1 : 0};"
+      onclick={cancel}
+    ></div>
+
+    <!-- Content -->
+    <div
+      class="relative z-10 w-full max-w-md rounded-2xl p-6 {classes?.content ?? className}"
+      style="background:var(--karbon-bg-card);border:1px solid var(--karbon-border);
+        box-shadow:0 25px 60px -12px rgba(0,0,0,0.4);
+        transform:{visible ? 'scale(1)' : 'scale(0.95)'};
+        transition:transform 0.2s cubic-bezier(0.16,1,0.3,1);
+        opacity:{visible ? 1 : 0};"
       role="alertdialog"
       aria-modal="true"
-      aria-labelledby="karbon-dialog-title"
-      aria-describedby={description ? 'karbon-dialog-desc' : undefined}
     >
+      <!-- Icon + Title -->
       <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}
+        <div
+          class="w-14 h-14 rounded-2xl flex items-center justify-center mb-4"
+          style="background:color-mix(in srgb,{vc.bg} 12%,transparent);"
+        >
+          {#if icon}
+            <span style="color:{vc.text};">{@render icon()}</span>
+          {:else}
+            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke={vc.text} stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{@html variantIcons[variant] || variantIcons.info}</svg>
+          {/if}
+        </div>
 
-        <h3 id="karbon-dialog-title" class="text-lg font-semibold text-[var(--karbon-text,#1a1635)]">
-          {title}
-        </h3>
+        <h3 class="text-lg font-semibold" style="color:var(--karbon-text);">{title}</h3>
 
-        {#if description}
-          <p id="karbon-dialog-desc" class="mt-2 text-sm text-[var(--karbon-text-3,#8e8aae)]">
-            {description}
-          </p>
+        {#if message}
+          <p class="mt-2 text-sm leading-relaxed" style="color:var(--karbon-text-3);">{message}</p>
         {/if}
       </div>
 
+      <!-- Custom children -->
+      {#if children}
+        <div class="mt-4">
+          {@render children()}
+        </div>
+      {/if}
+
+      <!-- Confirm input -->
+      {#if confirmInput}
+        <div class="mt-5 text-left">
+          <label class="block text-xs font-medium mb-1.5" style="color:var(--karbon-text-2);">
+            {confirmInputLabelText}
+          </label>
+          <input
+            type="text"
+            bind:value={inputValue}
+            placeholder={confirmInputPlaceholder ?? confirmInput}
+            class="w-full px-3 py-2.5 rounded-lg text-sm outline-none transition-colors"
+            style="background:var(--karbon-bg-input);border:1px solid {inputValue === confirmInput ? vc.bg : 'var(--karbon-border-input)'};color:var(--karbon-text);"
+            onfocus={(e) => { (e.currentTarget as HTMLElement).style.boxShadow = `0 0 0 3px color-mix(in srgb, ${vc.bg} 15%, transparent)` }}
+            onblur={(e) => { (e.currentTarget as HTMLElement).style.boxShadow = 'none' }}
+          />
+          {#if confirmInput && inputValue && inputValue !== confirmInput}
+            <p class="mt-1 text-[11px]" style="color:var(--karbon-red-400);">Le texte ne correspond pas</p>
+          {/if}
+        </div>
+      {/if}
+
+      <!-- Buttons -->
       <div class="mt-6 flex gap-3">
         <button
-          onclick={oncancel}
+          onclick={cancel}
           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"
+          class="flex-1 px-4 py-2.5 rounded-xl text-sm font-medium transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+          style="color:var(--karbon-text-2);border:1px solid var(--karbon-border);"
+          onmouseenter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--karbon-nav-hover-bg)' }}
+          onmouseleave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent' }}
         >
           {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
+          onclick={confirm}
+          disabled={isConfirmDisabled}
+          onmouseenter={() => btnHovered = true}
+          onmouseleave={() => btnHovered = false}
+          class="flex-1 px-4 py-2.5 rounded-xl text-sm font-semibold text-white transition-all cursor-pointer
+            disabled:opacity-40 disabled:cursor-not-allowed
             inline-flex items-center justify-center gap-2"
+          style="background:{btnHovered && !isConfirmDisabled ? vc.btnHover : vc.btn};"
         >
           {#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>