@karbonjs/ui-svelte 0.2.5 → 0.3.0

package/src/tabs/Tabs.svelte

@@ -1,59 +1,170 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
-  import type { TabItem } from '@karbonjs/ui-core'
+  import type { ButtonColor } from '@karbonjs/ui-core'
+
+  interface TabItem {
+    id: string
+    label: string
+    icon?: string
+    badge?: string | number
+    disabled?: boolean
+  }
 
   interface Props {
     tabs: TabItem[]
     active?: string
+    variant?: 'underline' | 'pills' | 'bordered' | 'segment'
+    color?: ButtonColor
+    size?: 'sm' | 'md' | 'lg'
+    fullWidth?: boolean
+    vertical?: boolean
     class?: string
+    classes?: { root?: string, list?: string, tab?: string, panel?: string, indicator?: string }
     onchange?: (id: string) => void
-    children?: Snippet<[{ tab: TabItem }]>
+    panel?: Snippet<[string]>
   }
 
   let {
     tabs,
     active = $bindable(tabs[0]?.id ?? ''),
+    variant = 'underline',
+    color,
+    size = 'md',
+    fullWidth = false,
+    vertical = false,
     class: className = '',
+    classes = {},
     onchange,
-    children
+    panel
   }: Props = $props()
 
+  let listEl: HTMLElement
+
+  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: { px: 'px-3', py: 'py-1.5', text: 'text-xs', badge: 'text-[9px] px-1 py-px', gap: 'gap-1.5' },
+    md: { px: 'px-4', py: 'py-2.5', text: 'text-sm', badge: 'text-[10px] px-1.5 py-px', gap: 'gap-2' },
+    lg: { px: 'px-5', py: 'py-3', text: 'text-base', badge: 'text-xs px-1.5 py-0.5', gap: 'gap-2' },
+  }
+  const s = $derived(sizeMap[size])
+
+  function sanitizeSvg(html: string): string {
+    return html.replace(/on\w+\s*=/gi, '').replace(/<script/gi, '&lt;script')
+  }
+
   function select(id: string) {
     active = id
     onchange?.(id)
   }
+
+  function tabStyle(isActive: boolean): string {
+    switch (variant) {
+      case 'underline':
+        return isActive
+          ? `color:${accent};`
+          : 'color:var(--karbon-text-3);'
+      case 'pills':
+        return isActive
+          ? `background:${accent};color:white;`
+          : 'color:var(--karbon-text-3);background:transparent;'
+      case 'bordered':
+        return isActive
+          ? `background:var(--karbon-bg-card);color:${accent};border-color:var(--karbon-border);border-bottom-color:var(--karbon-bg-card);`
+          : 'color:var(--karbon-text-3);border-color:transparent;'
+      case 'segment':
+        return isActive
+          ? `background:var(--karbon-bg-card);color:${accent};box-shadow:0 1px 3px rgba(0,0,0,0.1);`
+          : 'color:var(--karbon-text-3);background:transparent;'
+      default: return ''
+    }
+  }
+
+  function listStyle(): string {
+    switch (variant) {
+      case 'underline': return `border-bottom:1px solid var(--karbon-border);`
+      case 'pills': return ''
+      case 'bordered': return `border-bottom:1px solid var(--karbon-border);`
+      case 'segment': return `background:var(--karbon-bg-2);padding:3px;border-radius:0.625rem;`
+      default: return ''
+    }
+  }
+
+  function tabShapeClass(): string {
+    switch (variant) {
+      case 'pills': return 'rounded-lg'
+      case 'bordered': return 'rounded-t-lg border border-b-0'
+      case 'segment': return 'rounded-lg'
+      default: return ''
+    }
+  }
 </script>
 
-<div class={className}>
-  <div class="flex border-b border-[var(--karbon-border,rgba(0,0,0,0.07))]" role="tablist">
+<div class="{vertical ? 'flex gap-4' : ''} {classes?.root ?? className}">
+  <!-- Tab list -->
+  <div
+    bind:this={listEl}
+    class="{vertical ? 'flex flex-col shrink-0' : 'flex'} {fullWidth && !vertical ? '[&>*]:flex-1' : ''} {s.gap} {classes?.list ?? ''}"
+    style={listStyle()}
+    role="tablist"
+    aria-orientation={vertical ? 'vertical' : 'horizontal'}
+  >
     {#each tabs as tab}
+      {@const isActive = active === tab.id}
       <button
         type="button"
         role="tab"
-        aria-selected={active === tab.id}
+        aria-selected={isActive}
         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)]'}"
+        class="relative {s.px} {s.py} {s.text} font-medium transition-all cursor-pointer
+          disabled:opacity-30 disabled:cursor-not-allowed
+          {tabShapeClass()}
+          {fullWidth ? 'text-center' : ''}
+          inline-flex items-center {s.gap} whitespace-nowrap
+          {classes?.tab ?? ''}"
+        style={tabStyle(isActive)}
+        onmouseenter={(e) => { if (!isActive && !tab.disabled) (e.currentTarget as HTMLElement).style.color = 'var(--karbon-text-2)' }}
+        onmouseleave={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.cssText = tabStyle(isActive) }}
       >
-        {tab.label}
-        {#if active === tab.id}
-          <span class="absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--karbon-primary)]"></span>
+        {#if tab.icon}
+          <span class="shrink-0">{@html sanitizeSvg(tab.icon)}</span>
+        {/if}
+        <span>{tab.label}</span>
+        {#if tab.badge != null}
+          <span
+            class="rounded-full font-semibold {s.badge}"
+            style="background:{isActive ? `color-mix(in srgb,${accent} 20%,transparent)` : 'var(--karbon-bg-2)'};color:{isActive ? accent : 'var(--karbon-text-3)'};"
+          >{tab.badge}</span>
+        {/if}
+
+        <!-- Underline indicator -->
+        {#if variant === 'underline' && isActive}
+          <span
+            class="absolute {vertical ? 'right-0 top-0 bottom-0 w-0.5' : 'bottom-0 left-0 right-0 h-0.5'} {classes?.indicator ?? ''}"
+            style="background:{accent};border-radius:1px;animation:karbon-tab-indicator 0.2s ease;"
+          ></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}
+  <!-- Panel -->
+  {#if panel}
+    <div class="{vertical ? 'flex-1' : 'mt-4'} {classes?.panel ?? ''}" role="tabpanel" style="animation:karbon-tab-panel 0.2s ease;">
+      {@render panel(active)}
+    </div>
   {/if}
 </div>
+
+<style>
+  @keyframes karbon-tab-indicator {
+    from { transform: scaleX(0); }
+    to { transform: scaleX(1); }
+  }
+  @keyframes karbon-tab-panel {
+    from { opacity: 0; transform: translateY(4px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+</style>

package/src/tooltip/Tooltip.svelte

@@ -1,49 +1,139 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
-  import type { TooltipPosition } from '@karbonjs/ui-core'
+  import type { ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
-    text: string
-    position?: TooltipPosition
+    text?: string
+    position?: 'top' | 'bottom' | 'left' | 'right'
+    color?: ButtonColor
+    variant?: 'dark' | 'light' | 'colored'
+    size?: 'sm' | 'md' | 'lg'
+    delay?: number
+    arrow?: boolean
+    maxWidth?: string
+    nowrap?: boolean
+    content?: Snippet
     class?: string
+    classes?: { root?: string, content?: string }
     children: Snippet
   }
 
   let {
-    text,
+    text = '',
     position = 'top',
+    color,
+    variant = 'dark',
+    size = 'md',
+    delay = 200,
+    arrow = true,
+    maxWidth = '250px',
+    nowrap = false,
+    content,
     class: className = '',
+    classes = {},
     children
   }: Props = $props()
 
   let visible = $state(false)
+  let timeout: ReturnType<typeof setTimeout> | null = null
 
-  const posClasses: Record<string, string> = {
-    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
-    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
-    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
-    right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+  function show() {
+    if (delay > 0) {
+      timeout = setTimeout(() => { visible = true }, delay)
+    } else {
+      visible = true
+    }
+  }
+
+  function hide() {
+    if (timeout) { clearTimeout(timeout); timeout = null }
+    visible = false
+  }
+
+  const sizeMap = {
+    sm: { px: '6px 10px', text: '11px', arrow: 4 },
+    md: { px: '8px 12px', text: '12px', arrow: 5 },
+    lg: { px: '10px 14px', text: '13px', arrow: 6 },
+  }
+  const s = $derived(sizeMap[size])
+
+  const accent = $derived(color ? `var(--karbon-${color}-500)` : '')
+
+  const bgColor = $derived.by(() => {
+    switch (variant) {
+      case 'dark': return 'rgba(15,10,30,0.95)'
+      case 'light': return 'rgba(255,255,255,0.97)'
+      case 'colored': return accent || 'var(--karbon-primary)'
+      default: return 'rgba(15,10,30,0.95)'
+    }
+  })
+
+  const textColor = $derived.by(() => {
+    switch (variant) {
+      case 'dark': return 'rgba(255,255,255,0.92)'
+      case 'light': return 'rgba(15,10,30,0.85)'
+      case 'colored': return 'white'
+      default: return 'rgba(255,255,255,0.92)'
+    }
+  })
+
+  // Position styles
+  const posStyle: Record<string, string> = {
+    top: 'bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;',
+    bottom: 'top:100%;left:50%;transform:translateX(-50%);margin-top:8px;',
+    left: 'right:100%;top:50%;transform:translateY(-50%);margin-right:8px;',
+    right: 'left:100%;top:50%;transform:translateY(-50%);margin-left:8px;',
+  }
+
+  // Arrow position
+  const arrowPos: Record<string, string> = {
+    top: 'top:100%;left:50%;transform:translateX(-50%);',
+    bottom: 'bottom:100%;left:50%;transform:translateX(-50%) rotate(180deg);',
+    left: 'left:100%;top:50%;transform:translateY(-50%) rotate(-90deg);',
+    right: 'right:100%;top:50%;transform:translateY(-50%) rotate(90deg);',
   }
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  role="group"
-  class="relative inline-block {className}"
-  onmouseenter={() => visible = true}
-  onmouseleave={() => visible = false}
-  onfocusin={() => visible = true}
-  onfocusout={() => visible = false}
+  class="relative inline-flex {classes?.root ?? className}"
+  onmouseenter={show}
+  onmouseleave={hide}
+  onfocusin={show}
+  onfocusout={hide}
 >
   {@render children()}
 
-  {#if visible}
+  {#if visible && (text || content)}
     <div
-      class="absolute z-50 px-2.5 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap pointer-events-none
-        bg-[var(--karbon-text,#1a1635)] text-white shadow-lg
-        {posClasses[position]}"
+      class="absolute z-50 pointer-events-none {classes?.content ?? ''}"
+      style="{posStyle[position]}animation:karbon-tooltip-in 0.15s ease;"
       role="tooltip"
     >
-      {text}
+      <div
+        class="relative rounded-lg font-medium {nowrap ? 'whitespace-nowrap' : 'whitespace-normal'}"
+        style="padding:{s.px};font-size:{s.text};background:{bgColor};color:{textColor};max-width:{maxWidth};box-shadow:0 4px 14px rgba(0,0,0,0.25);backdrop-filter:blur(8px);"
+      >
+        {#if content}
+          {@render content()}
+        {:else}
+          {text}
+        {/if}
+
+        {#if arrow}
+          <div
+            class="absolute"
+            style="{arrowPos[position]}width:0;height:0;border-left:{s.arrow}px solid transparent;border-right:{s.arrow}px solid transparent;border-top:{s.arrow}px solid {bgColor};"
+          ></div>
+        {/if}
+      </div>
     </div>
   {/if}
 </div>
+
+<style>
+  @keyframes karbon-tooltip-in {
+    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
+    to { opacity: 1; transform: translateX(-50%) translateY(0); }
+  }
+</style>