@karbonjs/ui-svelte 0.1.0

package/src/form/Checkbox.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  interface Props {
+    name: string
+    checked?: boolean
+    indeterminate?: boolean
+    label?: string
+    description?: string
+    disabled?: boolean
+    class?: string
+    onchange?: (e: Event) => void
+  }
+
+  let {
+    name,
+    checked = $bindable(false),
+    indeterminate = false,
+    label = '',
+    description = '',
+    disabled = false,
+    class: className = '',
+    onchange
+  }: Props = $props()
+
+  let inputEl: HTMLInputElement
+
+  $effect(() => {
+    if (inputEl) inputEl.indeterminate = indeterminate
+  })
+</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"
+  />
+  {#if label || description}
+    <div class="select-none">
+      {#if label}
+        <span class="text-sm font-medium text-[var(--karbon-text,#1a1635)]">{label}</span>
+      {/if}
+      {#if description}
+        <p class="text-xs text-[var(--karbon-text-3,#8e8aae)] mt-0.5">{description}</p>
+      {/if}
+    </div>
+  {/if}
+</label>

package/src/form/ColorPicker.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  interface Props {
+    name: string
+    value?: string
+    label?: string
+    presets?: string[]
+    disabled?: boolean
+    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,
+    class: className = '',
+    onchange
+  }: Props = $props()
+
+  let showPicker = $state(false)
+</script>
+
+<svelte:window onclick={() => showPicker = false} />
+
+<div class="space-y-1.5 {className}">
+  {#if label}
+    <label for={name} class="text-sm font-medium text-[var(--karbon-text,#1a1635)] block mb-1.5">{label}</label>
+  {/if}
+
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="relative" onclick={(e) => e.stopPropagation()}>
+    <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))]"
+      {disabled}
+    >
+      <span
+        class="w-6 h-6 rounded-md border border-[var(--karbon-border,rgba(0,0,0,0.07))] shrink-0"
+        style="background: {value}"
+      ></span>
+      <span class="text-sm font-mono text-[var(--karbon-text-2,#5a567e)]">{value}</span>
+    </button>
+
+    <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)]">
+        <!-- Native color input -->
+        <div class="mb-3">
+          <input
+            type="color"
+            bind:value
+            class="w-full h-10 rounded-lg cursor-pointer border-0 p-0"
+          />
+        </div>
+
+        <!-- Hex input -->
+        <div class="mb-3">
+          <input
+            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)]"
+          />
+        </div>
+
+        <!-- Presets -->
+        {#if presets.length > 0}
+          <div class="grid grid-cols-5 gap-1.5">
+            {#each presets as color}
+              <button
+                type="button"
+                onclick={() => value = color}
+                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}
+              ></button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>

package/src/form/DatePicker.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+  import type { FormVariant } from '@karbonjs/ui-core'
+
+  interface Props {
+    name: string
+    value?: string
+    label?: string
+    error?: string
+    placeholder?: string
+    min?: string
+    max?: string
+    required?: boolean
+    disabled?: boolean
+    variant?: FormVariant
+    class?: string
+    onchange?: (e: Event) => void
+  }
+
+  let {
+    name,
+    value = $bindable(''),
+    label = '',
+    error = '',
+    placeholder = '',
+    min = '',
+    max = '',
+    required = false,
+    disabled = false,
+    variant = 'dark',
+    class: className = '',
+    onchange
+  }: Props = $props()
+
+  let showCalendar = $state(false)
+
+  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',
+      error: 'text-red-400',
+      calendar: 'bg-[var(--karbon-bg-card,#0a0820)] border-white/10 text-white',
+      dayHover: 'hover:bg-white/10',
+      dayOther: 'text-gray-600'
+    },
+    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',
+      error: 'text-[var(--karbon-danger)]',
+      calendar: 'bg-white border-gray-200 text-gray-900',
+      dayHover: 'hover:bg-gray-100',
+      dayOther: 'text-gray-300'
+    }
+  } as const
+
+  const theme = $derived(themes[variant])
+
+  // Calendar state
+  const selectedDate = $derived(value ? new Date(value + 'T00:00:00') : null)
+  let viewYear = $state(selectedDate?.getFullYear() ?? new Date().getFullYear())
+  let viewMonth = $state(selectedDate?.getMonth() ?? new Date().getMonth())
+
+  const monthNames = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
+  const dayNames = ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di']
+
+  const calendarDays = $derived((() => {
+    const first = new Date(viewYear, viewMonth, 1)
+    const lastDay = new Date(viewYear, viewMonth + 1, 0).getDate()
+    let startDay = first.getDay() - 1
+    if (startDay < 0) startDay = 6
+
+    const days: { date: number; month: number; year: number; current: boolean }[] = []
+
+    // Previous month padding
+    const prevLastDay = new Date(viewYear, viewMonth, 0).getDate()
+    for (let i = startDay - 1; i >= 0; i--) {
+      days.push({ date: prevLastDay - i, month: viewMonth - 1, year: viewYear, current: false })
+    }
+
+    // Current month
+    for (let i = 1; i <= lastDay; i++) {
+      days.push({ date: i, month: viewMonth, year: viewYear, current: true })
+    }
+
+    // Next month padding
+    const remaining = 42 - days.length
+    for (let i = 1; i <= remaining; i++) {
+      days.push({ date: i, month: viewMonth + 1, year: viewYear, current: false })
+    }
+
+    return days
+  })())
+
+  function prevMonth() {
+    if (viewMonth === 0) { viewMonth = 11; viewYear-- }
+    else viewMonth--
+  }
+
+  function nextMonth() {
+    if (viewMonth === 11) { viewMonth = 0; viewYear++ }
+    else viewMonth++
+  }
+
+  function selectDay(day: { date: number; month: number; year: number }) {
+    const m = day.month < 0 ? 11 : day.month > 11 ? 0 : day.month
+    const y = day.month < 0 ? day.year - 1 : day.month > 11 ? day.year + 1 : day.year
+    const d = String(day.date).padStart(2, '0')
+    const mo = String(m + 1).padStart(2, '0')
+    value = `${y}-${mo}-${d}`
+    showCalendar = false
+  }
+
+  function isSelected(day: { date: number; month: number; year: number }) {
+    if (!selectedDate) return false
+    const m = day.month < 0 ? 11 : day.month > 11 ? 0 : day.month
+    return selectedDate.getDate() === day.date && selectedDate.getMonth() === m && selectedDate.getFullYear() === day.year
+  }
+
+  function isToday(day: { date: number; month: number; year: number; current: boolean }) {
+    if (!day.current) return false
+    const now = new Date()
+    return day.date === now.getDate() && viewMonth === now.getMonth() && viewYear === now.getFullYear()
+  }
+
+  function formatDisplay(val: string): string {
+    if (!val) return ''
+    const d = new Date(val + 'T00:00:00')
+    return d.toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', year: 'numeric' })
+  }
+</script>
+
+<svelte:window onclick={() => showCalendar = false} />
+
+<div class="space-y-1.5 {className}">
+  {#if label}
+    <label for={name} class="{theme.label} block mb-1.5">{label}</label>
+  {/if}
+
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="relative" onclick={(e) => e.stopPropagation()}>
+    <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"
+      {disabled}
+    >
+      {value ? formatDisplay(value) : placeholder || 'Sélectionner une date'}
+      <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="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>
+    </button>
+
+    <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}">
+        <!-- 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">
+            <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="m15 18-6-6 6-6"/></svg>
+          </button>
+          <span class="text-sm font-semibold">{monthNames[viewMonth]} {viewYear}</span>
+          <button type="button" onclick={nextMonth} aria-label="Mois suivant" class="p-1 rounded-lg {theme.dayHover} 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="m9 18 6-6-6-6"/></svg>
+          </button>
+        </div>
+
+        <!-- Day names -->
+        <div class="grid grid-cols-7 mb-1">
+          {#each dayNames as d}
+            <div class="text-center text-[10px] font-medium text-[var(--karbon-text-4,#b5b2cc)] py-1">{d}</div>
+          {/each}
+        </div>
+
+        <!-- Days grid -->
+        <div class="grid grid-cols-7">
+          {#each calendarDays as day}
+            <button
+              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)]' : ''}
+                {!day.current ? theme.dayOther : ''}
+                {!isSelected(day) ? theme.dayHover : ''}"
+            >
+              {day.date}
+            </button>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  {#if error}
+    <p class="text-xs {theme.error}">{error}</p>
+  {/if}
+</div>

package/src/form/FormInput.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { FormVariant } from '@karbonjs/ui-core'
+
+  interface Props {
+    name: string
+    type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number'
+    value?: string
+    placeholder?: string
+    label?: string
+    error?: string
+    required?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    autocomplete?: string
+    clearable?: boolean
+    icon?: Snippet
+    variant?: FormVariant
+    class?: string
+    inputClass?: string
+    labelClass?: string
+    wrapperClass?: string
+    oninput?: (e: Event) => void
+    onchange?: (e: Event) => void
+    onfocus?: (e: FocusEvent) => void
+    onblur?: (e: FocusEvent) => void
+    onkeydown?: (e: KeyboardEvent) => void
+  }
+
+  let {
+    name,
+    type = 'text',
+    value = $bindable(''),
+    placeholder = '',
+    label = '',
+    error = '',
+    required = false,
+    disabled = false,
+    readonly = false,
+    autocomplete = '',
+    clearable = false,
+    icon,
+    variant = 'dark',
+    class: className = '',
+    inputClass = '',
+    labelClass = '',
+    wrapperClass = '',
+    oninput,
+    onchange,
+    onfocus,
+    onblur,
+    onkeydown
+  }: Props = $props()
+
+  let focused = $state(false)
+  let showPassword = $state(false)
+
+  const isPassword = $derived(type === 'password')
+  const inputType = $derived(isPassword && showPassword ? 'text' : type)
+  const hasRightAction = $derived(isPassword || (clearable && value))
+  const hasIcon = $derived(!!icon)
+
+  function handleFocus(e: FocusEvent) {
+    focused = true
+    onfocus?.(e)
+  }
+
+  function handleBlur(e: FocusEvent) {
+    focused = false
+    onblur?.(e)
+  }
+
+  function handleClear() {
+    value = ''
+  }
+
+  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
+    },
+    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
+    }
+  } as const
+
+  const theme = $derived(themes[variant])
+</script>
+
+<div class="{wrapperClass || 'space-y-1.5'}">
+  {#if label}
+    <label for={name} class="{theme.label} block mb-1.5 {labelClass}">
+      {label}
+    </label>
+  {/if}
+
+  <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:z-10={variant === 'dark'}
+      >
+        {@render icon()}
+      </div>
+    {/if}
+
+    <input
+      id={name}
+      {name}
+      type={inputType}
+      bind:value
+      {placeholder}
+      {required}
+      {disabled}
+      {readonly}
+      {autocomplete}
+      {oninput}
+      {onchange}
+      {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}"
+    />
+
+    {#if variant === 'dark' && theme.glow}
+      <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%);"
+      ></div>
+    {/if}
+
+    {#if isPassword}
+      <button
+        type="button"
+        onclick={() => showPassword = !showPassword}
+        aria-label={showPassword ? 'Masquer le mot de passe' : 'Afficher le mot de passe'}
+        class="absolute right-3 top-1/2 -translate-y-1/2 {theme.action} transition-colors cursor-pointer z-10"
+        tabindex={-1}
+      >
+        {#if showPassword}
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>
+        {:else}
+          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
+        {/if}
+      </button>
+    {:else if clearable && value}
+      <button
+        type="button"
+        onclick={handleClear}
+        aria-label="Effacer"
+        class="absolute right-3 top-1/2 -translate-y-1/2 {theme.action} transition-colors cursor-pointer z-10"
+        tabindex={-1}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" 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 error}
+    <p class="text-xs {theme.error}">{error}</p>
+  {/if}
+</div>

package/src/form/Radio.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { RadioOption, RadioDirection } from '@karbonjs/ui-core'
+
+  interface Props {
+    name: string
+    options: RadioOption[]
+    value?: string
+    label?: string
+    direction?: RadioDirection
+    disabled?: boolean
+    class?: string
+    onchange?: (e: Event) => void
+  }
+
+  let {
+    name,
+    options,
+    value = $bindable(''),
+    label = '',
+    direction = 'column',
+    disabled = false,
+    class: className = '',
+    onchange
+  }: Props = $props()
+</script>
+
+<fieldset class={className} {disabled}>
+  {#if label}
+    <legend class="text-sm font-medium text-[var(--karbon-text,#1a1635)] mb-2">{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}
+          onchange={() => value = opt.value}
+          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>
+          {#if opt.description}
+            <p class="text-xs text-[var(--karbon-text-3,#8e8aae)] mt-0.5">{opt.description}</p>
+          {/if}
+        </div>
+      </label>
+    {/each}
+  </div>
+</fieldset>

package/src/form/Select.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { FormVariant, SelectOption } from '@karbonjs/ui-core'
+
+  interface Props {
+    name: string
+    options: SelectOption[]
+    value?: string
+    placeholder?: string
+    label?: string
+    error?: string
+    required?: boolean
+    disabled?: boolean
+    variant?: FormVariant
+    class?: string
+    onchange?: (e: Event) => void
+  }
+
+  let {
+    name,
+    options,
+    value = $bindable(''),
+    placeholder = '',
+    label = '',
+    error = '',
+    required = false,
+    disabled = false,
+    variant = 'dark',
+    class: className = '',
+    onchange
+  }: Props = $props()
+
+  const themes = {
+    dark: {
+      label: 'text-[11px] font-medium text-gray-500 uppercase tracking-wider',
+      select: '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',
+      error: 'text-red-400'
+    },
+    light: {
+      label: 'text-sm font-medium text-gray-700',
+      select: 'border-gray-300 bg-white text-gray-900 focus:border-[var(--karbon-primary)] focus:ring-2 focus:ring-[var(--karbon-primary)]/20',
+      error: 'text-[var(--karbon-danger)]'
+    }
+  } as const
+
+  const theme = $derived(themes[variant])
+</script>
+
+<div class="space-y-1.5 {className}">
+  {#if label}
+    <label for={name} class="{theme.label} block mb-1.5">{label}</label>
+  {/if}
+
+  <select
+    id={name}
+    {name}
+    bind:value
+    {required}
+    {disabled}
+    {onchange}
+    class="w-full rounded-lg border px-3 py-2.5 md:py-3 text-[13px] md:text-sm focus:outline-none transition-all appearance-none bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat bg-[url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%239ca3af%22 stroke-width=%222%22><path d=%22m6 9 6 6 6-6%22/></svg>')] {theme.select} {error ? 'border-red-500/50' : ''}"
+  >
+    {#if placeholder}
+      <option value="" disabled selected class="text-gray-500">{placeholder}</option>
+    {/if}
+    {#each options as opt}
+      <option value={opt.value} disabled={opt.disabled}>{opt.label}</option>
+    {/each}
+  </select>
+
+  {#if error}
+    <p class="text-xs {theme.error}">{error}</p>
+  {/if}
+</div>