@karbonjs/ui-svelte 0.2.5 → 0.3.0

package/src/overlay/Toast.svelte

@@ -1,91 +1,188 @@
 <script lang="ts">
-  import type { ToastVariant, ToastPosition } from '@karbonjs/ui-core'
+  import type { Snippet } from 'svelte'
+  import type { ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
-    message: string
-    variant?: ToastVariant
+    type?: 'success' | 'error' | 'warning' | 'info'
+    variant?: 'default' | 'filled' | 'bordered'
+    color?: ButtonColor
+    title?: string
+    message?: string
     duration?: number
     dismissible?: boolean
-    position?: ToastPosition
-    visible?: boolean
+    showProgress?: boolean
+    position?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'
+    icon?: Snippet | false
+    action?: Snippet
     class?: string
-    ondismiss?: () => void
+    classes?: { root?: string, icon?: string, close?: string, progress?: string }
+    onclose?: () => void
+    children?: Snippet
   }
 
   let {
-    message,
-    variant = 'info',
-    duration = 4000,
+    type = 'info',
+    variant = 'default',
+    color,
+    title = '',
+    message = '',
+    duration = 5000,
     dismissible = true,
+    showProgress = true,
     position = 'top-right',
-    visible = $bindable(true),
+    icon,
+    action,
     class: className = '',
-    ondismiss
+    classes = {},
+    onclose,
+    children
   }: 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'
+  let visible = $state(false)
+  let alive = $state(true)
+  let progress = $state(100)
+  let paused = $state(false)
+
+  const typeColors: Record<string, { bg: string, text: string, border: string }> = {
+    success: { bg: 'var(--karbon-emerald-500)', text: 'var(--karbon-emerald-400)', border: 'var(--karbon-emerald-500)' },
+    error:   { bg: 'var(--karbon-red-500)', text: 'var(--karbon-red-400)', border: 'var(--karbon-red-500)' },
+    warning: { bg: 'var(--karbon-amber-500)', text: 'var(--karbon-amber-400)', border: 'var(--karbon-amber-500)' },
+    info:    { bg: 'var(--karbon-blue-500)', text: 'var(--karbon-blue-400)', border: 'var(--karbon-blue-500)' },
   }
 
-  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'
+  const tc = $derived(color
+    ? { bg: `var(--karbon-${color}-500)`, text: `var(--karbon-${color}-400)`, border: `var(--karbon-${color}-500)` }
+    : typeColors[type]
+  )
+
+  const typeIcons: Record<string, string> = {
+    success: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',
+    error: '<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"/>',
+    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"/>',
+    info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
   }
 
-  function dismiss() {
-    visible = false
-    ondismiss?.()
+  const posStyles: Record<string, string> = {
+    'top-right': 'top:1rem;right:1rem;',
+    'top-left': 'top:1rem;left:1rem;',
+    'top-center': 'top:1rem;left:50%;transform:translateX(-50%);',
+    'bottom-right': 'bottom:1rem;right:1rem;',
+    'bottom-left': 'bottom:1rem;left:1rem;',
+    'bottom-center': 'bottom:1rem;left:50%;transform:translateX(-50%);',
   }
 
+  const isTop = $derived(position.startsWith('top'))
+  const slideFrom = $derived(isTop ? '-20px' : '20px')
+
+  const toastStyle = $derived.by(() => {
+    switch (variant) {
+      case 'filled':
+        return `background:${tc.bg};color:white;border:none;`
+      case 'bordered':
+        return `background:var(--karbon-bg-card);color:var(--karbon-text);border-left:3px solid ${tc.border};border-top:1px solid var(--karbon-border);border-right:1px solid var(--karbon-border);border-bottom:1px solid var(--karbon-border);`
+      default:
+        return `background:var(--karbon-bg-card);color:var(--karbon-text);border:1px solid var(--karbon-border);`
+    }
+  })
+
+  const iconColor = $derived(variant === 'filled' ? 'white' : tc.text)
+
+  // Animation + countdown
   $effect(() => {
-    if (visible && duration > 0) {
-      const timer = setTimeout(dismiss, duration)
-      return () => clearTimeout(timer)
+    if (alive) {
+      requestAnimationFrame(() => { visible = true })
+
+      if (duration > 0) {
+        const interval = 30
+        const step = (100 / duration) * interval
+        const timer = setInterval(() => {
+          if (!paused) {
+            progress -= step
+            if (progress <= 0) {
+              clearInterval(timer)
+              dismiss()
+            }
+          }
+        }, interval)
+        return () => clearInterval(timer)
+      }
     }
   })
+
+  function dismiss() {
+    visible = false
+    setTimeout(() => {
+      alive = false
+      onclose?.()
+    }, 200)
+  }
 </script>
 
-{#if visible}
+{#if alive}
   <div
-    class="fixed z-[60] {positionClasses[position]} w-full max-w-sm"
+    class="fixed z-[60] w-full max-w-sm pointer-events-auto"
+    style={posStyles[position]}
     role="alert"
     aria-live="assertive"
+    onmouseenter={() => paused = true}
+    onmouseleave={() => paused = false}
   >
     <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}
-      "
+      class="rounded-xl shadow-xl overflow-hidden {classes?.root ?? className}"
+      style="{toastStyle}
+        opacity:{visible ? 1 : 0};
+        transform:translateY({visible ? '0' : slideFrom});
+        transition:transform 0.25s cubic-bezier(0.16,1,0.3,1),opacity 0.2s ease;"
     >
-      {#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}
+      <div class="flex items-start gap-3 px-4 py-3">
+        <!-- Icon -->
+        {#if icon !== false}
+          <div class="shrink-0 mt-0.5 {classes?.icon ?? ''}">
+            {#if icon}
+              {@render icon()}
+            {:else}
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={iconColor} stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{@html typeIcons[type] || typeIcons.info}</svg>
+            {/if}
+          </div>
+        {/if}
+
+        <!-- Content -->
+        <div class="flex-1 min-w-0">
+          {#if title}
+            <p class="text-sm font-semibold {message || children ? 'mb-0.5' : ''}"
+              style="color:white;"
+            >{title}</p>
+          {/if}
+          {#if children}
+            <div class="text-[13px]" style="color:rgba(255,255,255,0.75);">{@render children()}</div>
+          {:else if message}
+            <p class="text-[13px]" style="color:rgba(255,255,255,0.75);">{message}</p>
+          {/if}
+          {#if action}
+            <div class="mt-2">{@render action()}</div>
+          {/if}
+        </div>
 
-      <span class="flex-1 text-sm font-medium text-[var(--karbon-text,#1a1635)]">{message}</span>
+        <!-- Close -->
+        {#if dismissible}
+          <button
+            onclick={dismiss}
+            aria-label="Fermer"
+            class="shrink-0 rounded-md p-0.5 transition-opacity opacity-50 hover:opacity-100 cursor-pointer {classes?.close ?? ''}"
+          >
+            <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>
 
-      {#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>
+      <!-- Progress bar -->
+      {#if showProgress && duration > 0}
+        <div class="h-[2px] w-full {classes?.progress ?? ''}" style="background:color-mix(in srgb,{tc.bg} 15%,transparent);">
+          <div
+            class="h-full transition-none"
+            style="width:{progress}%;background:{variant === 'filled' ? 'rgba(255,255,255,0.4)' : tc.bg};"
+          ></div>
+        </div>
       {/if}
     </div>
   </div>

package/src/progress/Progress.svelte

@@ -1,50 +1,161 @@
 <script lang="ts">
-  import type { ProgressVariant, ProgressSize } from '@karbonjs/ui-core'
+  import type { Snippet } from 'svelte'
+  import type { ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     value: number
     max?: number
-    variant?: ProgressVariant
-    size?: ProgressSize
-    showLabel?: boolean
+    color?: ButtonColor
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    variant?: 'default' | 'striped' | 'gradient' | 'glow'
+    shape?: 'rounded' | 'square' | 'pill'
+    label?: boolean | 'inside' | 'outside' | 'top'
+    labelFormat?: (value: number, max: number) => string
+    indeterminate?: boolean
+    animated?: boolean
+    segments?: { value: number, color?: ButtonColor, label?: string }[]
     class?: string
+    classes?: { root?: string, track?: string, bar?: string, label?: string }
+    children?: Snippet
   }
 
   let {
-    value,
+    value = 0,
     max = 100,
-    variant = 'primary',
+    color,
     size = 'md',
-    showLabel = false,
-    class: className = ''
+    variant = 'default',
+    shape = 'rounded',
+    label = false,
+    labelFormat,
+    indeterminate = false,
+    animated = false,
+    segments,
+    class: className = '',
+    classes = {},
+    children
   }: Props = $props()
 
   const percent = $derived(Math.min(Math.max((value / max) * 100, 0), 100))
+  const accent = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+  const accentLight = $derived(color ? `var(--karbon-${color}-400)` : 'var(--karbon-primary)')
 
-  const variantClasses: Record<string, string> = {
-    primary: 'bg-[var(--karbon-primary)]',
-    success: 'bg-emerald-500',
-    warning: 'bg-amber-500',
-    danger: 'bg-red-500'
+  const sizeMap = {
+    xs: { track: 2, fontSize: '9px', showInside: false },
+    sm: { track: 4, fontSize: '10px', showInside: false },
+    md: { track: 8, fontSize: '11px', showInside: false },
+    lg: { track: 12, fontSize: '11px', showInside: true },
+    xl: { track: 20, fontSize: '12px', showInside: true },
   }
+  const s = $derived(sizeMap[size])
 
-  const sizeClasses: Record<string, string> = {
-    sm: 'h-1',
-    md: 'h-2',
-    lg: 'h-3'
+  const shapeMap = { rounded: '9999px', square: '0', pill: '9999px' }
+  const radius = $derived(shapeMap[shape])
+
+  function formatLabel(v: number, m: number): string {
+    if (labelFormat) return labelFormat(v, m)
+    return `${Math.round((v / m) * 100)}%`
+  }
+
+  function barStyle(clr?: string): string {
+    const bg = clr ? `var(--karbon-${clr}-500)` : accent
+    const bgLight = clr ? `var(--karbon-${clr}-400)` : accentLight
+    switch (variant) {
+      case 'striped':
+        return `background:repeating-linear-gradient(45deg,${bg},${bg} 10px,color-mix(in srgb,${bg} 70%,transparent) 10px,color-mix(in srgb,${bg} 70%,transparent) 20px);`
+      case 'gradient':
+        return `background:linear-gradient(90deg,color-mix(in srgb,${bg} 60%,transparent),${bg},${bgLight});`
+      case 'glow':
+        return `background:${bg};box-shadow:0 0 8px color-mix(in srgb,${bg} 50%,transparent),0 0 20px color-mix(in srgb,${bg} 20%,transparent);`
+      default:
+        return `background:${bg};`
+    }
   }
+
+  const showLabel = $derived(label === true || label === 'outside' || label === 'top' || label === 'inside')
+  const labelPos = $derived(label === 'inside' ? 'inside' : label === 'top' ? 'top' : 'outside')
 </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 class="{classes?.root ?? className}">
+  <!-- Top label -->
+  {#if showLabel && labelPos === 'top'}
+    <div class="flex items-center justify-between mb-1.5">
+      {#if children}
+        <span class="text-xs font-medium {classes?.label ?? ''}" style="color:var(--karbon-text-2);">{@render children()}</span>
+      {:else}
+        <span></span>
+      {/if}
+      <span class="text-xs font-semibold {classes?.label ?? ''}" style="color:{accent};">{formatLabel(value, max)}</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>
+
+  <!-- Track -->
+  <div
+    class="w-full overflow-hidden relative {classes?.track ?? ''}"
+    style="height:{s.track}px;border-radius:{radius};background:var(--karbon-border,rgba(255,255,255,0.08));"
+    role="progressbar"
+    aria-valuenow={indeterminate ? undefined : value}
+    aria-valuemax={max}
+  >
+    {#if indeterminate}
+      <!-- Indeterminate animation -->
+      <div
+        class="absolute h-full {classes?.bar ?? ''}"
+        style="{barStyle()};border-radius:{radius};animation:karbon-progress-indeterminate 1.5s ease-in-out infinite;width:40%;"
+      ></div>
+    {:else if segments && segments.length > 0}
+      <!-- Multi-segments -->
+      <div class="flex h-full">
+        {#each segments as seg}
+          {@const segPercent = Math.min(Math.max((seg.value / max) * 100, 0), 100)}
+          <div
+            class="h-full transition-all duration-500 ease-out first:rounded-l-inherit last:rounded-r-inherit {classes?.bar ?? ''}"
+            style="width:{segPercent}%;{barStyle(seg.color)}"
+            title={seg.label || `${Math.round(segPercent)}%`}
+          ></div>
+        {/each}
+      </div>
+    {:else}
+      <!-- Single bar -->
+      <div
+        class="h-full transition-all duration-500 ease-out {classes?.bar ?? ''} {animated ? 'karbon-progress-animated' : ''}"
+        style="width:{percent}%;border-radius:{radius};{barStyle()}"
+      ></div>
+
+      <!-- Inside label -->
+      {#if showLabel && labelPos === 'inside' && s.showInside && percent > 10}
+        <span
+          class="absolute right-2 top-1/2 -translate-y-1/2 font-bold {classes?.label ?? ''}"
+          style="font-size:{s.fontSize};color:white;text-shadow:0 1px 2px rgba(0,0,0,0.3);"
+        >{formatLabel(value, max)}</span>
+      {/if}
+    {/if}
   </div>
+
+  <!-- Outside label -->
+  {#if showLabel && labelPos === 'outside'}
+    <div class="flex items-center justify-between mt-1.5">
+      {#if children}
+        <span class="text-xs {classes?.label ?? ''}" style="color:var(--karbon-text-3);">{@render children()}</span>
+      {:else}
+        <span></span>
+      {/if}
+      <span class="text-xs font-semibold {classes?.label ?? ''}" style="color:{accent};">{formatLabel(value, max)}</span>
+    </div>
+  {/if}
 </div>
+
+<style>
+  @keyframes karbon-progress-indeterminate {
+    0% { left: -40%; }
+    100% { left: 100%; }
+  }
+  .karbon-progress-animated {
+    background-size: 30px 30px !important;
+    animation: karbon-progress-stripe 1s linear infinite;
+  }
+  @keyframes karbon-progress-stripe {
+    0% { background-position: 30px 0; }
+    100% { background-position: 0 0; }
+  }
+</style>

package/src/skeleton/Skeleton.svelte

@@ -7,6 +7,7 @@
     height?: string
     lines?: number
     class?: string
+    classes?: { root?: string }
   }
 
   let {
@@ -14,7 +15,8 @@
     width = '100%',
     height,
     lines = 1,
-    class: className = ''
+    class: className = '',
+    classes = {}
   }: Props = $props()
 
   const baseClass = 'animate-pulse bg-[var(--karbon-border,rgba(0,0,0,0.07))]'
@@ -29,7 +31,7 @@
 </script>
 
 {#if variant === 'text' && lines > 1}
-  <div class="space-y-2 {className}">
+  <div class="space-y-2 {classes?.root ?? className}">
     {#each Array(lines) as _, i}
       <div
         class="{baseClass} {v.rounded}"
@@ -39,12 +41,12 @@
   </div>
 {:else if variant === 'circle'}
   <div
-    class="{baseClass} {v.rounded} aspect-square {className}"
+    class="{baseClass} {v.rounded} aspect-square {classes?.root ?? className}"
     style="width: {width === '100%' ? height ?? v.h : width}; height: {height ?? v.h}"
   ></div>
 {:else}
   <div
-    class="{baseClass} {v.rounded} {className}"
+    class="{baseClass} {v.rounded} {classes?.root ?? className}"
     style="width: {width}; height: {height ?? v.h}"
   ></div>
 {/if}