@karbonjs/ui-svelte 0.2.5 → 0.3.1

package/src/form/Checkbox.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import type { CheckboxClasses, ButtonColor } from '@karbonjs/ui-core'
+
   interface Props {
     name: string
     checked?: boolean
@@ -6,8 +8,14 @@
     label?: string
     description?: string
     disabled?: boolean
+    color?: ButtonColor
+    size?: 'sm' | 'md' | 'lg'
+    shape?: 'square' | 'rounded' | 'circle'
+    icon?: 'check' | 'cross' | 'dash' | 'heart' | 'star' | 'circle' | 'eye'
+    variant?: 'filled' | 'outlined' | 'ghost' | 'elegant'
+    classes?: CheckboxClasses
     class?: string
-    onchange?: (e: Event) => void
+    onchange?: (checked: boolean) => void
   }
 
   let {
@@ -17,35 +25,119 @@
     label = '',
     description = '',
     disabled = false,
+    color,
+    size = 'md',
+    shape = 'rounded',
+    icon = 'check',
+    variant = 'filled',
+    classes,
     class: className = '',
     onchange
   }: Props = $props()
 
-  let inputEl: HTMLInputElement
+  const accentColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+  const accentHover = $derived(color ? `var(--karbon-${color}-400)` : 'var(--karbon-primary-hover, var(--karbon-primary))')
+
+  const sizeMap = {
+    sm: { box: 'w-3.5 h-3.5', icon: 10, text: 'text-xs', desc: 'text-[11px]', gap: 'gap-2' },
+    md: { box: 'w-4.5 h-4.5', icon: 13, text: 'text-sm', desc: 'text-xs', gap: 'gap-2.5' },
+    lg: { box: 'w-5.5 h-5.5', icon: 16, text: 'text-base', desc: 'text-sm', gap: 'gap-3' },
+  }
+  const s = $derived(sizeMap[size])
+
+  const shapeMap = { square: 'rounded-none', rounded: 'rounded', circle: 'rounded-full' }
+  const shapeClass = $derived(shapeMap[shape])
+
+  const isActive = $derived(checked || indeterminate)
+
+  const boxStyle = $derived.by(() => {
+    switch (variant) {
+      case 'filled':
+        return `background:${isActive ? accentColor : 'var(--karbon-bg-input,rgba(255,255,255,0.06))'};border:${isActive ? 'none' : '1.5px solid var(--karbon-border-input,rgba(255,255,255,0.12))'};box-shadow:${isActive ? `0 0 0 2px color-mix(in srgb,${accentColor} 20%,transparent)` : 'none'};`
+      case 'outlined':
+        return `background:transparent;border:2px solid ${isActive ? accentColor : 'var(--karbon-border-input,rgba(255,255,255,0.12))'};box-shadow:none;`
+      case 'ghost':
+        return `background:transparent;border:none;box-shadow:none;`
+      case 'elegant':
+        return `background:${isActive ? `color-mix(in srgb,${accentColor} 12%,transparent)` : 'transparent'};border:1.5px solid ${isActive ? accentColor : 'var(--karbon-border-input,rgba(255,255,255,0.12))'};box-shadow:${isActive ? `0 0 8px color-mix(in srgb,${accentColor} 15%,transparent)` : 'none'};`
+      default: return ''
+    }
+  })
 
-  $effect(() => {
-    if (inputEl) inputEl.indeterminate = indeterminate
+  const iconColor = $derived.by(() => {
+    switch (variant) {
+      case 'filled': return 'white'
+      case 'outlined': return accentColor
+      case 'ghost': return isActive ? accentColor : 'var(--karbon-text-4)'
+      case 'elegant': return accentColor
+      default: return 'white'
+    }
   })
+
+  function toggle() {
+    if (disabled) return
+    checked = !checked
+    onchange?.(checked)
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault()
+      toggle()
+    }
+  }
 </script>
 
-<label class="inline-flex items-start gap-3 {disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} {className}">
-  <input
-    bind:this={inputEl}
-    type="checkbox"
-    {name}
-    bind:checked
-    {disabled}
-    {onchange}
-    class="mt-0.5 h-4 w-4 shrink-0 rounded border-[var(--karbon-border-input,rgba(255,255,255,0.10))] bg-[var(--karbon-bg-input,rgba(255,255,255,0.06))] text-[var(--karbon-primary)] focus:ring-2 focus:ring-[var(--karbon-primary)]/20 focus:ring-offset-0 transition-colors cursor-pointer disabled:cursor-not-allowed"
-  />
+<!-- Hidden real input for form submission -->
+<input type="hidden" {name} value={checked ? 'on' : ''} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="inline-flex items-start {s.gap} {disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'} {classes?.root ?? ''} {className}"
+  onclick={toggle}
+  onkeydown={handleKeydown}
+  role="checkbox"
+  aria-checked={indeterminate ? 'mixed' : checked}
+  aria-disabled={disabled}
+  tabindex={disabled ? -1 : 0}
+>
+  <!-- Custom checkbox box -->
+  <div
+    class="shrink-0 {s.box} {shapeClass} flex items-center justify-center transition-all duration-150 mt-0.5"
+    style={boxStyle}
+  >
+    {#if indeterminate}
+      <svg xmlns="http://www.w3.org/2000/svg" width={s.icon} height={s.icon} viewBox="0 0 24 24" fill="none" stroke={iconColor} stroke-width="3" stroke-linecap="round">
+        <line x1="5" y1="12" x2="19" y2="12"/>
+      </svg>
+    {:else if checked}
+      {#if icon === 'check'}
+        <svg xmlns="http://www.w3.org/2000/svg" width={s.icon} height={s.icon} viewBox="0 0 24 24" fill="none" stroke={iconColor} stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+      {:else if icon === 'cross'}
+        <svg xmlns="http://www.w3.org/2000/svg" width={s.icon} height={s.icon} viewBox="0 0 24 24" fill="none" stroke={iconColor} stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      {:else if icon === 'dash'}
+        <svg xmlns="http://www.w3.org/2000/svg" width={s.icon} height={s.icon} viewBox="0 0 24 24" fill="none" stroke={iconColor} stroke-width="3" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      {:else if icon === 'heart'}
+        <svg xmlns="http://www.w3.org/2000/svg" width={s.icon} height={s.icon} viewBox="0 0 24 24" fill={iconColor} stroke="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+      {:else if icon === 'star'}
+        <svg xmlns="http://www.w3.org/2000/svg" width={s.icon} height={s.icon} viewBox="0 0 24 24" fill={iconColor} stroke="none"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/></svg>
+      {:else if icon === 'circle'}
+        <svg xmlns="http://www.w3.org/2000/svg" width={Math.round(s.icon * 0.6)} height={Math.round(s.icon * 0.6)} viewBox="0 0 24 24" fill={iconColor} stroke="none"><circle cx="12" cy="12" r="12"/></svg>
+      {:else if icon === 'eye'}
+        <svg xmlns="http://www.w3.org/2000/svg" width={s.icon} height={s.icon} viewBox="0 0 24 24" fill="none" stroke={iconColor} stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
+      {/if}
+    {/if}
+  </div>
+
+  <!-- Label + description -->
   {#if label || description}
-    <div class="select-none">
+    <div class="select-none min-w-0">
       {#if label}
-        <span class="text-sm font-medium text-[var(--karbon-text,#1a1635)]">{label}</span>
+        <span class="{s.text} font-medium text-[var(--karbon-text)] {classes?.label ?? ''}">{label}</span>
       {/if}
       {#if description}
-        <p class="text-xs text-[var(--karbon-text-3,#8e8aae)] mt-0.5">{description}</p>
+        <p class="{s.desc} text-[var(--karbon-text-3)] mt-0.5 leading-relaxed {classes?.description ?? ''}">{description}</p>
       {/if}
     </div>
   {/if}
-</label>
+</div>

package/src/form/ColorPicker.svelte

@@ -1,38 +1,47 @@
 <script lang="ts">
+  import type { ColorPickerClasses, ButtonColor } from '@karbonjs/ui-core'
+
+  const defaultPresets = [
+    '#cc1a1a', '#ef4444', '#f59e0b', '#22c55e', '#10b981',
+    '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#ec4899',
+    '#f43f5e', '#14b8a6', '#000000', '#6b7280', '#ffffff'
+  ]
+
   interface Props {
     name: string
     value?: string
     label?: string
     presets?: string[]
     disabled?: boolean
+    color?: ButtonColor
+    classes?: ColorPickerClasses
     class?: string
     onchange?: (e: Event) => void
   }
 
-  const defaultPresets = [
-    '#cc1a1a', '#ef4444', '#f59e0b', '#22c55e', '#10b981',
-    '#0ea5e9', '#3b82f6', '#6366f1', '#8b5cf6', '#ec4899',
-    '#f43f5e', '#14b8a6', '#000000', '#6b7280', '#ffffff'
-  ]
-
   let {
     name,
     value = $bindable('#cc1a1a'),
     label = '',
     presets = defaultPresets,
     disabled = false,
+    color,
+    classes,
     class: className = '',
     onchange
   }: Props = $props()
 
   let showPicker = $state(false)
+  let hexFocused = $state(false)
+
+  const focusColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
 </script>
 
 <svelte:window onclick={() => showPicker = false} />
 
-<div class="space-y-1.5 {className}">
+<div class="space-y-1.5 {classes?.root ?? ''} {className}">
   {#if label}
-    <label for={name} class="text-sm font-medium text-[var(--karbon-text,#1a1635)] block mb-1.5">{label}</label>
+    <label for={name} class="text-sm font-medium text-[var(--karbon-text,#1a1635)] block mb-1.5 {classes?.label ?? ''}">{label}</label>
   {/if}
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -41,7 +50,7 @@
     <button
       type="button"
       onclick={() => { if (!disabled) showPicker = !showPicker }}
-      class="flex items-center gap-2.5 rounded-lg border border-[var(--karbon-border,rgba(0,0,0,0.07))] px-3 py-2 transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))]"
+      class="flex items-center gap-2.5 rounded-lg border border-[var(--karbon-border,rgba(0,0,0,0.07))] px-3 py-2 transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-[var(--karbon-nav-hover-bg,rgba(0,0,0,0.04))] {classes?.trigger ?? ''}"
       {disabled}
     >
       <span
@@ -54,7 +63,7 @@
     <input type="hidden" {name} bind:value {onchange} />
 
     {#if showPicker}
-      <div class="absolute z-50 mt-1 w-64 rounded-xl border border-[var(--karbon-border,rgba(0,0,0,0.07))] shadow-xl p-4 bg-[var(--karbon-bg-card,#fff)]">
+      <div class="absolute z-50 mt-1 w-64 rounded-xl border border-[var(--karbon-border,rgba(0,0,0,0.07))] shadow-xl p-4 bg-[var(--karbon-bg-card,#fff)] {classes?.dropdown ?? ''}">
         <!-- Native color input -->
         <div class="mb-3">
           <input
@@ -70,21 +79,24 @@
             type="text"
             bind:value
             maxlength="7"
-            class="w-full rounded-lg border border-[var(--karbon-border,rgba(0,0,0,0.07))] px-3 py-1.5 text-sm font-mono text-center focus:outline-none focus:ring-2 focus:ring-[var(--karbon-primary)]/20 bg-[var(--karbon-bg-input,rgba(255,255,255,0.06))] text-[var(--karbon-text,#1a1635)]"
+            onfocus={() => hexFocused = true}
+            onblur={() => hexFocused = false}
+            class="w-full rounded-lg border border-[var(--karbon-border,rgba(0,0,0,0.07))] px-3 py-1.5 text-sm font-mono text-center focus:outline-none bg-[var(--karbon-bg-input,rgba(255,255,255,0.06))] text-[var(--karbon-text,#1a1635)] {classes?.hexInput ?? ''}"
+            style={hexFocused ? `border-color: ${focusColor}; box-shadow: 0 0 0 3px color-mix(in srgb, ${focusColor} 12%, transparent);` : ''}
           />
         </div>
 
         <!-- Presets -->
         {#if presets.length > 0}
           <div class="grid grid-cols-5 gap-1.5">
-            {#each presets as color}
+            {#each presets as presetColor}
               <button
                 type="button"
-                onclick={() => value = color}
+                onclick={() => value = presetColor}
                 class="w-full aspect-square rounded-lg border transition-transform cursor-pointer hover:scale-110
-                  {value === color ? 'border-[var(--karbon-primary)] ring-2 ring-[var(--karbon-primary)]/20 scale-110' : 'border-[var(--karbon-border,rgba(0,0,0,0.07))]'}"
-                style="background: {color}"
-                aria-label={color}
+                  {value === presetColor ? 'scale-110' : 'border-[var(--karbon-border,rgba(0,0,0,0.07))]'}"
+                style={value === presetColor ? `border-color: ${focusColor}; box-shadow: 0 0 0 2px color-mix(in srgb, ${focusColor} 20%, transparent); background: ${presetColor}` : `background: ${presetColor}`}
+                aria-label={presetColor}
               ></button>
             {/each}
           </div>

package/src/form/DatePicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { FormVariant } from '@karbonjs/ui-core'
+  import type { FormVariant, DatePickerClasses, ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     name: string
@@ -12,6 +12,8 @@
     required?: boolean
     disabled?: boolean
     variant?: FormVariant
+    color?: ButtonColor
+    classes?: DatePickerClasses
     class?: string
     onchange?: (e: Event) => void
   }
@@ -27,16 +29,21 @@
     required = false,
     disabled = false,
     variant = 'dark',
+    color,
+    classes,
     class: className = '',
     onchange
   }: Props = $props()
 
   let showCalendar = $state(false)
+  let focused = $state(false)
+
+  const focusColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
 
   const themes = {
     dark: {
       label: 'text-[11px] font-medium text-gray-500 uppercase tracking-wider',
-      input: 'border-white/8 bg-white/3 text-white focus:border-[var(--karbon-primary)]/50 focus:bg-white/5 focus:ring-[3px] focus:ring-[var(--karbon-primary)]/8',
+      input: 'border-white/8 bg-white/3 text-white',
       error: 'text-red-400',
       calendar: 'bg-[var(--karbon-bg-card,#0a0820)] border-white/10 text-white',
       dayHover: 'hover:bg-white/10',
@@ -44,7 +51,7 @@
     },
     light: {
       label: 'text-sm font-medium text-gray-700',
-      input: 'border-gray-300 bg-white text-gray-900 focus:border-[var(--karbon-primary)] focus:ring-2 focus:ring-[var(--karbon-primary)]/20',
+      input: 'border-gray-300 bg-white text-gray-900',
       error: 'text-[var(--karbon-danger)]',
       calendar: 'bg-white border-gray-200 text-gray-900',
       dayHover: 'hover:bg-gray-100',
@@ -137,9 +144,9 @@
 
 <svelte:window onclick={() => showCalendar = false} />
 
-<div class="space-y-1.5 {className}">
+<div class="space-y-1.5 {classes?.root ?? ''} {className}">
   {#if label}
-    <label for={name} class="{theme.label} block mb-1.5">{label}</label>
+    <label for={name} class="{theme.label} block mb-1.5 {classes?.label ?? ''}">{label}</label>
   {/if}
 
   <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -148,7 +155,10 @@
     <button
       type="button"
       onclick={() => { if (!disabled) showCalendar = !showCalendar }}
-      class="w-full rounded-lg border px-3 py-2.5 md:py-3 text-[13px] md:text-sm text-left focus:outline-none transition-all {theme.input} {error ? 'border-red-500/50' : ''} {!value ? 'text-gray-500' : ''} cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+      onfocus={() => focused = true}
+      onblur={() => focused = false}
+      class="w-full rounded-lg border px-3 py-2.5 md:py-3 text-[13px] md:text-sm text-left focus:outline-none transition-all {theme.input} {error ? 'border-red-500/50' : ''} {!value ? 'text-gray-500' : ''} cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed {classes?.trigger ?? ''}"
+      style={focused ? `border-color: ${focusColor}; box-shadow: 0 0 0 3px color-mix(in srgb, ${focusColor} 12%, transparent);` : ''}
       {disabled}
     >
       {value ? formatDisplay(value) : placeholder || 'Sélectionner une date'}
@@ -158,7 +168,7 @@
     <input type="hidden" {name} bind:value {required} {onchange} />
 
     {#if showCalendar}
-      <div class="absolute z-50 mt-1 w-72 rounded-xl border shadow-xl p-3 {theme.calendar}">
+      <div class="absolute z-50 mt-1 w-72 rounded-xl border shadow-xl p-3 {theme.calendar} {classes?.calendar ?? ''}">
         <!-- Header -->
         <div class="flex items-center justify-between mb-3">
           <button type="button" onclick={prevMonth} aria-label="Mois précédent" class="p-1 rounded-lg {theme.dayHover} cursor-pointer">
@@ -184,10 +194,10 @@
               type="button"
               onclick={() => selectDay(day)}
               class="h-8 w-full rounded-lg text-xs font-medium transition-colors cursor-pointer
-                {isSelected(day) ? 'bg-[var(--karbon-primary)] text-white' : ''}
-                {isToday(day) && !isSelected(day) ? 'ring-1 ring-[var(--karbon-primary)]' : ''}
+                {isToday(day) && !isSelected(day) ? 'ring-1' : ''}
                 {!day.current ? theme.dayOther : ''}
                 {!isSelected(day) ? theme.dayHover : ''}"
+              style={isSelected(day) ? `background-color: ${focusColor}; color: white;` : isToday(day) ? `--tw-ring-color: ${focusColor};` : ''}
             >
               {day.date}
             </button>
@@ -198,6 +208,6 @@
   </div>
 
   {#if error}
-    <p class="text-xs {theme.error}">{error}</p>
+    <p class="text-xs {theme.error} {classes?.error ?? ''}">{error}</p>
   {/if}
 </div>

package/src/form/{FormInput.svelte → Input.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte'
-  import type { FormVariant } from '@karbonjs/ui-core'
+  import type { FormVariant, FormInputVariant, FormInputClasses, ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     name: string
@@ -9,6 +9,7 @@
     placeholder?: string
     label?: string
     error?: string
+    errorIcon?: boolean
     required?: boolean
     disabled?: boolean
     readonly?: boolean
@@ -16,6 +17,9 @@
     clearable?: boolean
     icon?: Snippet
     variant?: FormVariant
+    inputVariant?: FormInputVariant
+    color?: ButtonColor
+    classes?: FormInputClasses
     class?: string
     inputClass?: string
     labelClass?: string
@@ -34,6 +38,7 @@
     placeholder = '',
     label = '',
     error = '',
+    errorIcon = true,
     required = false,
     disabled = false,
     readonly = false,
@@ -41,6 +46,9 @@
     clearable = false,
     icon,
     variant = 'dark',
+    inputVariant = 'outlined',
+    color,
+    classes,
     class: className = '',
     inputClass = '',
     labelClass = '',
@@ -60,6 +68,9 @@
   const hasRightAction = $derived(isPassword || (clearable && value))
   const hasIcon = $derived(!!icon)
 
+  const focusColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+  const focusRingColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+
   function handleFocus(e: FocusEvent) {
     focused = true
     onfocus?.(e)
@@ -77,30 +88,39 @@
   const themes = {
     dark: {
       label: 'text-[11px] font-medium text-gray-500 uppercase tracking-wider',
-      input: 'border-white/8 bg-white/3 text-white placeholder-gray-700 focus:border-[var(--karbon-primary)]/50 focus:bg-white/5 focus:ring-[3px] focus:ring-[var(--karbon-primary)]/8',
       icon: 'text-gray-600',
-      iconFocused: 'text-[var(--karbon-primary)]',
       action: 'text-gray-600 hover:text-gray-400',
       error: 'text-red-400',
-      glow: true
+      glow: true,
+      base: 'text-white placeholder-gray-700',
+      variants: {
+        outlined: 'border border-white/8 bg-white/3',
+        filled: 'border-0 bg-white/8',
+        underline: 'rounded-none bg-transparent'
+      }
     },
     light: {
       label: 'text-sm font-medium text-gray-700',
-      input: 'border-gray-300 bg-white text-gray-900 placeholder-gray-400 focus:border-[var(--karbon-primary)] focus:ring-2 focus:ring-[var(--karbon-primary)]/20',
       icon: 'text-gray-400',
-      iconFocused: 'text-[var(--karbon-primary)]',
       action: 'text-gray-400 hover:text-gray-600',
       error: 'text-[var(--karbon-danger)]',
-      glow: false
+      glow: false,
+      base: 'text-gray-900 placeholder-gray-400',
+      variants: {
+        outlined: 'border border-gray-300 bg-white',
+        filled: 'border-0 bg-gray-100',
+        underline: 'rounded-none bg-transparent'
+      }
     }
   } as const
 
   const theme = $derived(themes[variant])
+  const variantClass = $derived(theme.variants[inputVariant])
 </script>
 
-<div class="{wrapperClass || 'space-y-1.5'}">
+<div class="{classes?.root ?? ''} {wrapperClass || 'space-y-1.5'}">
   {#if label}
-    <label for={name} class="{theme.label} block mb-1.5 {labelClass}">
+    <label for={name} class="{theme.label} block mb-1.5 {classes?.label ?? ''} {labelClass}">
       {label}
     </label>
   {/if}
@@ -108,8 +128,9 @@
   <div class="relative {className}">
     {#if icon}
       <div
-        class="absolute left-3 top-1/2 -translate-y-1/2 transition-colors {focused ? theme.iconFocused : theme.icon}"
+        class="absolute left-3 top-1/2 -translate-y-1/2 transition-colors {classes?.icon ?? ''} {focused ? '' : theme.icon}"
         class:z-10={variant === 'dark'}
+        style={focused ? `color: ${focusColor}` : ''}
       >
         {@render icon()}
       </div>
@@ -130,14 +151,15 @@
       {onkeydown}
       onfocus={handleFocus}
       onblur={handleBlur}
-      class="w-full rounded-lg border {hasIcon ? 'pl-9' : 'pl-3'} {hasRightAction ? 'pr-10' : 'pr-3'} py-2.5 md:py-3 text-[13px] md:text-sm focus:outline-none transition-all {theme.input} {error ? 'border-red-500/50' : ''} {variant === 'dark' ? 'relative z-[1]' : ''} {inputClass}"
+      class="w-full {inputVariant !== 'underline' ? 'rounded-lg' : ''} {hasIcon ? 'pl-9' : 'pl-3'} {hasRightAction ? 'pr-10' : 'pr-3'} py-2.5 md:py-3 text-[13px] md:text-sm focus:outline-none transition-all {theme.base} {variantClass} {error ? 'border-red-500/50' : ''} {disabled ? 'opacity-40 cursor-not-allowed pointer-events-none' : ''} {variant === 'dark' ? 'relative z-[1]' : ''} {classes?.input ?? ''} {inputClass}"
+      style="{inputVariant === 'underline' ? 'border:none;border-bottom:1px solid ' + (focused ? focusColor : error ? 'var(--karbon-danger)' : 'var(--karbon-border-input)') + ';border-radius:0;' : ''}{focused ? (inputVariant === 'underline' ? 'box-shadow:none;' : 'border-color:' + focusColor + ';box-shadow:0 0 0 3px color-mix(in srgb,' + focusRingColor + ' 12%,transparent);') : ''}"
     />
 
-    {#if variant === 'dark' && theme.glow}
+    {#if variant === 'dark' && theme.glow && inputVariant === 'outlined'}
       <div
         class="absolute -inset-px rounded-lg opacity-0 transition-opacity duration-300 pointer-events-none"
         class:opacity-100={focused}
-        style="background: linear-gradient(135deg, rgba(204, 26, 26, 0.1), transparent 50%);"
+        style="background: linear-gradient(135deg, color-mix(in srgb, {focusColor} 10%, transparent), transparent 50%);"
       ></div>
     {/if}
 
@@ -169,6 +191,11 @@
   </div>
 
   {#if error}
-    <p class="text-xs {theme.error}">{error}</p>
+    <p class="flex items-center gap-1.5 text-xs {theme.error} {classes?.error ?? ''}">
+      {#if errorIcon}
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><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>
+      {/if}
+      <span>{error}</span>
+    </p>
   {/if}
 </div>

package/src/form/Radio.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { RadioOption, RadioDirection } from '@karbonjs/ui-core'
+  import type { RadioOption, RadioDirection, RadioClasses, ButtonColor } from '@karbonjs/ui-core'
 
   interface Props {
     name: string
@@ -8,8 +8,12 @@
     label?: string
     direction?: RadioDirection
     disabled?: boolean
+    color?: ButtonColor
+    size?: 'sm' | 'md' | 'lg'
+    variant?: 'filled' | 'outlined' | 'ghost' | 'elegant'
+    classes?: RadioClasses
     class?: string
-    onchange?: (e: Event) => void
+    onchange?: (value: string) => void
   }
 
   let {
@@ -19,35 +23,99 @@
     label = '',
     direction = 'column',
     disabled = false,
+    color,
+    size = 'md',
+    variant = 'filled',
+    classes,
     class: className = '',
     onchange
   }: Props = $props()
+
+  const accentColor = $derived(color ? `var(--karbon-${color}-500)` : 'var(--karbon-primary)')
+
+  const sizeMap = {
+    sm: { box: 16, dot: 8, text: 'text-xs', desc: 'text-[11px]', gap: 'gap-2' },
+    md: { box: 20, dot: 11, text: 'text-sm', desc: 'text-xs', gap: 'gap-2.5' },
+    lg: { box: 24, dot: 13, text: 'text-base', desc: 'text-sm', gap: 'gap-3' },
+  }
+  const s = $derived(sizeMap[size])
+
+  function boxStyle(selected: boolean): string {
+    switch (variant) {
+      case 'filled':
+        return `background:${selected ? accentColor : 'var(--karbon-bg-input,rgba(255,255,255,0.06))'};border:${selected ? 'none' : '1.5px solid var(--karbon-border-input,rgba(255,255,255,0.12))'};box-shadow:${selected ? `0 0 0 2px color-mix(in srgb,${accentColor} 20%,transparent)` : 'none'};`
+      case 'outlined':
+        return `background:transparent;border:2px solid ${selected ? accentColor : 'var(--karbon-border-input,rgba(255,255,255,0.12))'};`
+      case 'ghost':
+        return `background:transparent;border:none;`
+      case 'elegant':
+        return `background:${selected ? `color-mix(in srgb,${accentColor} 12%,transparent)` : 'transparent'};border:1.5px solid ${selected ? accentColor : 'var(--karbon-border-input,rgba(255,255,255,0.12))'};box-shadow:${selected ? `0 0 8px color-mix(in srgb,${accentColor} 15%,transparent)` : 'none'};`
+      default: return ''
+    }
+  }
+
+  function dotColor(selected: boolean): string {
+    switch (variant) {
+      case 'filled': return 'white'
+      case 'outlined': return accentColor
+      case 'ghost': return selected ? accentColor : 'var(--karbon-text-4)'
+      case 'elegant': return accentColor
+      default: return 'white'
+    }
+  }
+
+  function select(val: string) {
+    if (disabled) return
+    value = val
+    onchange?.(val)
+  }
 </script>
 
-<fieldset class={className} {disabled}>
+<fieldset class="{classes?.root ?? ''} {className}" {disabled}>
   {#if label}
-    <legend class="text-sm font-medium text-[var(--karbon-text,#1a1635)] mb-2">{label}</legend>
+    <legend class="{s.text} font-medium text-[var(--karbon-text)] mb-2 {classes?.legend ?? ''}">{label}</legend>
   {/if}
 
   <div class="{direction === 'row' ? 'flex flex-wrap items-center gap-4' : 'flex flex-col gap-2.5'}">
     {#each options as opt}
-      <label class="inline-flex items-start gap-2.5 {opt.disabled || disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}">
-        <input
-          type="radio"
-          {name}
-          value={opt.value}
-          checked={value === opt.value}
-          disabled={opt.disabled || disabled}
-          onchange={(e) => { value = opt.value; onchange?.(e) }}
-          class="mt-0.5 h-4 w-4 shrink-0 border-[var(--karbon-border-input,rgba(255,255,255,0.10))] bg-[var(--karbon-bg-input,rgba(255,255,255,0.06))] text-[var(--karbon-primary)] focus:ring-2 focus:ring-[var(--karbon-primary)]/20 focus:ring-offset-0 transition-colors cursor-pointer disabled:cursor-not-allowed"
-        />
-        <div class="select-none">
-          <span class="text-sm font-medium text-[var(--karbon-text,#1a1635)]">{opt.label}</span>
+      {@const selected = value === opt.value}
+      {@const isDisabled = opt.disabled || disabled}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div
+        class="inline-flex items-center {s.gap} {isDisabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}"
+        onclick={() => { if (!isDisabled) select(opt.value) }}
+        onkeydown={(e) => { if (!isDisabled && (e.key === ' ' || e.key === 'Enter')) { e.preventDefault(); select(opt.value) } }}
+        role="radio"
+        aria-checked={selected}
+        aria-disabled={isDisabled}
+        tabindex={isDisabled ? -1 : 0}
+      >
+        <!-- Custom radio circle -->
+        <div
+          class="shrink-0 rounded-full transition-all duration-150"
+          style="width:{s.box}px;height:{s.box}px;display:grid;place-items:center;box-sizing:border-box;{boxStyle(selected)}"
+        >
+          {#if selected}
+            <div
+              class="rounded-full"
+              style="width:{s.dot}px;height:{s.dot}px;background:{dotColor(selected)};"
+            ></div>
+          {:else if variant === 'ghost'}
+            <div
+              class="rounded-full"
+              style="width:{s.dot}px;height:{s.dot}px;background:var(--karbon-border-input,rgba(255,255,255,0.12));"
+            ></div>
+          {/if}
+        </div>
+
+        <!-- Label + description -->
+        <div class="select-none min-w-0">
+          <span class="{s.text} font-medium text-[var(--karbon-text)] {classes?.label ?? ''}">{opt.label}</span>
           {#if opt.description}
-            <p class="text-xs text-[var(--karbon-text-3,#8e8aae)] mt-0.5">{opt.description}</p>
+            <p class="{s.desc} text-[var(--karbon-text-3)] mt-0.5 leading-relaxed {classes?.description ?? ''}">{opt.description}</p>
           {/if}
         </div>
-      </label>
+      </div>
     {/each}
   </div>
 </fieldset>