@lyeve-labs/ui-kit 0.8.2

package/dist/components/Select.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type SE = Event & { currentTarget: HTMLSelectElement };
+
+  let {
+    value,
+    id,
+    name,
+    required = false,
+    disabled = false,
+    error,
+    class: cls = '',
+    onchange,
+    children,
+  }: {
+    value?: string | null;
+    id?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    class?: string;
+    onchange?: (e: SE) => void;
+    children?: Snippet;
+  } = $props();
+
+  const base =
+    'w-full bg-surface-2 rounded-lg px-3 py-2 text-sm text-fg ' +
+    'focus:outline-none transition-colors appearance-none cursor-pointer ' +
+    'disabled:opacity-50 disabled:cursor-not-allowed';
+</script>
+
+<div class="flex flex-col gap-1 {cls}">
+  <div class="relative">
+    <select
+      {id}
+      {name}
+      {required}
+      {disabled}
+      value={value ?? ''}
+      {onchange}
+      class="{base}
+        {error
+        ? 'border border-danger focus:border-danger/70'
+        : 'border border-line focus:border-brand/50'}
+        pr-8"
+    >
+      {@render children?.()}
+    </select>
+    <span
+      class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-faint"
+      aria-hidden="true"
+    >
+      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path
+          d="M2 4l4 4 4-4"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </span>
+  </div>
+  {#if error}
+    <p class="text-xs text-danger">{error}</p>
+  {/if}
+</div>

package/dist/components/Select.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type SE = Event & {
+    currentTarget: HTMLSelectElement;
+};
+type $$ComponentProps = {
+    value?: string | null;
+    id?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    class?: string;
+    onchange?: (e: SE) => void;
+    children?: Snippet;
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Skeleton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props {
+    width?: string;
+    height?: string;
+    rounded?: string;
+    class?: string;
+  }
+  let {
+    width = '100%',
+    height = '1rem',
+    rounded = 'rounded-md',
+    class: klass = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="animate-pulse bg-surface-2 {rounded} {klass}"
+  style="width: {width}; height: {height};"
+  aria-hidden="true"
+></div>

package/dist/components/Skeleton.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    width?: string;
+    height?: string;
+    rounded?: string;
+    class?: string;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Spinner.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  interface Props {
+    size?: number;
+    class?: string;
+  }
+  let { size = 16, class: klass = '' }: Props = $props();
+</script>
+
+<svg
+  class="animate-spin shrink-0 {klass}"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  aria-hidden="true"
+>
+  <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" opacity="0.25" />
+  <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+</svg>

package/dist/components/Spinner.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: number;
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/Stat.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  type Trend = 'up' | 'down' | 'flat';
+  type Accent = 'brand' | 'violet' | 'success' | 'neutral';
+
+  interface Props {
+    label: string;
+    value: string | number;
+    sub?: string;
+    trend?: Trend;
+    change?: string;
+    accent?: Accent;
+    class?: string;
+  }
+
+  let {
+    label,
+    value,
+    sub = undefined,
+    trend = undefined,
+    change = undefined,
+    accent = 'brand',
+    class: klass = '',
+  }: Props = $props();
+
+  const accents = {
+    brand: 'text-brand',
+    violet: 'text-violet',
+    success: 'text-success',
+    neutral: 'text-fg',
+  } as const;
+
+  const trendColor = { up: 'text-success', down: 'text-danger', flat: 'text-muted' } as const;
+  const trendMark = { up: '↑', down: '↓', flat: '→' } as const;
+</script>
+
+<div class="rounded-xl border border-line bg-surface p-5 {klass}">
+  <p class="text-xs font-medium uppercase tracking-wide text-faint">{label}</p>
+  <p class="mt-2 text-2xl font-bold {accents[accent]}">{value}</p>
+  <div class="mt-1 flex items-center gap-2">
+    {#if trend && change}
+      <span class="text-xs font-medium {trendColor[trend]}">{trendMark[trend]} {change}</span>
+    {/if}
+    {#if sub}<span class="text-xs text-muted">{sub}</span>{/if}
+  </div>
+</div>

package/dist/components/Stat.svelte.d.ts

@@ -0,0 +1,14 @@
+type Trend = 'up' | 'down' | 'flat';
+type Accent = 'brand' | 'violet' | 'success' | 'neutral';
+interface Props {
+    label: string;
+    value: string | number;
+    sub?: string;
+    trend?: Trend;
+    change?: string;
+    accent?: Accent;
+    class?: string;
+}
+declare const Stat: import("svelte").Component<Props, {}, "">;
+type Stat = ReturnType<typeof Stat>;
+export default Stat;

package/dist/components/StepIndicator.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  interface Step {
+    label: string;
+    description?: string;
+  }
+
+  interface Props {
+    steps: Step[];
+    current: number; // 1-based
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+  }
+
+  let { steps, current, orientation = 'horizontal', class: cls = '' }: Props = $props();
+</script>
+
+{#if orientation === 'horizontal'}
+  <nav aria-label="Progress" class="w-full {cls}">
+    <ol class="flex items-start">
+      {#each steps as step, i}
+        {@const idx = i + 1}
+        {@const done = idx < current}
+        {@const active = idx === current}
+        <li class="flex flex-1 flex-col items-center">
+          <div class="flex w-full items-center">
+            <!-- Left connector -->
+            <div
+              class="flex-1 {i === 0
+                ? ''
+                : done || active
+                  ? 'bg-brand'
+                  : 'bg-line'} h-px transition-colors"
+            ></div>
+
+            <!-- Step circle -->
+            <div
+              class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2
+                font-bold text-sm transition-all
+                {done
+                ? 'border-brand bg-brand text-ink'
+                : active
+                  ? 'border-brand bg-surface text-brand'
+                  : 'border-line bg-surface text-faint'}"
+            >
+              {#if done}
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  aria-hidden="true"><path d="M20 6L9 17l-5-5" /></svg
+                >
+              {:else}{idx}{/if}
+            </div>
+
+            <!-- Right connector -->
+            <div
+              class="flex-1 {i === steps.length - 1
+                ? ''
+                : done
+                  ? 'bg-brand'
+                  : 'bg-line'} h-px transition-colors"
+            ></div>
+          </div>
+
+          <div class="mt-2 px-1 text-center">
+            <p
+              class="text-xs font-medium {active
+                ? 'text-fg'
+                : done
+                  ? 'text-muted'
+                  : 'text-faint'} transition-colors"
+            >
+              {step.label}
+            </p>
+            {#if step.description}
+              <p class="mt-0.5 text-[10px] text-faint">{step.description}</p>
+            {/if}
+          </div>
+        </li>
+      {/each}
+    </ol>
+  </nav>
+{:else}
+  <nav aria-label="Progress" class={cls}>
+    <ol class="flex flex-col">
+      {#each steps as step, i}
+        {@const idx = i + 1}
+        {@const done = idx < current}
+        {@const active = idx === current}
+        <li class="flex gap-4">
+          <div class="flex flex-col items-center">
+            <div
+              class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2
+                font-bold text-sm transition-all
+                {done
+                ? 'border-brand bg-brand text-ink'
+                : active
+                  ? 'border-brand bg-surface text-brand'
+                  : 'border-line bg-surface text-faint'}"
+            >
+              {#if done}
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2.5"
+                  stroke-linecap="round"
+                  aria-hidden="true"><path d="M20 6L9 17l-5-5" /></svg
+                >
+              {:else}{idx}{/if}
+            </div>
+            {#if i < steps.length - 1}
+              <div
+                class="my-1 w-px flex-1 {done ? 'bg-brand/40' : 'bg-line'} transition-colors"
+              ></div>
+            {/if}
+          </div>
+          <div class="pb-6 pt-1">
+            <p
+              class="text-sm font-medium {active
+                ? 'text-fg'
+                : done
+                  ? 'text-muted'
+                  : 'text-faint'} transition-colors"
+            >
+              {step.label}
+            </p>
+            {#if step.description}
+              <p class="mt-0.5 text-xs text-faint">{step.description}</p>
+            {/if}
+          </div>
+        </li>
+      {/each}
+    </ol>
+  </nav>
+{/if}

package/dist/components/StepIndicator.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Step {
+    label: string;
+    description?: string;
+}
+interface Props {
+    steps: Step[];
+    current: number;
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+}
+declare const StepIndicator: import("svelte").Component<Props, {}, "">;
+type StepIndicator = ReturnType<typeof StepIndicator>;
+export default StepIndicator;

package/dist/components/Table.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    striped?: boolean;
+    hoverable?: boolean;
+    fixed?: boolean;
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    striped = false,
+    hoverable = true,
+    fixed = false,
+    class: cls = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div class="w-full overflow-x-auto rounded-xl border border-line {cls}">
+  <table
+    class="w-full text-sm text-left
+      {fixed ? 'table-fixed' : ''}
+      [&_thead_tr]:border-b [&_thead_tr]:border-line
+      [&_thead_th]:px-4 [&_thead_th]:py-3 [&_thead_th]:text-xs
+        [&_thead_th]:font-medium [&_thead_th]:text-faint
+        [&_thead_th]:uppercase [&_thead_th]:tracking-wider [&_thead_th]:whitespace-nowrap
+      [&_tbody_td]:px-4 [&_tbody_td]:py-3 [&_tbody_td]:text-fg [&_tbody_td]:align-middle
+      [&_tbody_tr]:border-b [&_tbody_tr]:border-line [&_tbody_tr:last-child]:border-0
+      {striped ? '[&_tbody_tr:nth-child(even)]:bg-surface-2/40' : ''}
+      {hoverable ? '[&_tbody_tr:hover]:bg-surface-2/60 [&_tbody_tr]:transition-colors' : ''}"
+  >
+    {@render children()}
+  </table>
+</div>

package/dist/components/Table.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    striped?: boolean;
+    hoverable?: boolean;
+    fixed?: boolean;
+    class?: string;
+    children: Snippet;
+}
+declare const Table: import("svelte").Component<Props, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Tabs.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  let {
+    items,
+    active,
+    class: cls = '',
+    onchange,
+  }: {
+    items: { id: string; label: string; count?: number }[];
+    active: string;
+    class?: string;
+    onchange: (id: string) => void;
+  } = $props();
+</script>
+
+<div role="tablist" class="flex gap-0.5 border-b border-line {cls}">
+  {#each items as tab (tab.id)}
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active === tab.id}
+      onclick={() => onchange(tab.id)}
+      class="relative px-4 py-2.5 text-sm font-medium transition-colors whitespace-nowrap
+        {active === tab.id
+        ? 'text-fg after:absolute after:bottom-0 after:inset-x-0 after:h-0.5 after:bg-brand after:rounded-t'
+        : 'text-faint hover:text-fg'}"
+    >
+      {tab.label}
+      {#if tab.count !== undefined}
+        <span
+          class="ml-1.5 inline-flex items-center justify-center min-w-4.5 h-4.5 px-1
+            rounded-full text-[10px] font-semibold
+            {active === tab.id ? 'bg-brand/40 text-brand' : 'bg-surface-2 text-faint'}"
+        >
+          {tab.count}
+        </span>
+      {/if}
+    </button>
+  {/each}
+</div>

package/dist/components/Tabs.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    items: {
+        id: string;
+        label: string;
+        count?: number;
+    }[];
+    active: string;
+    class?: string;
+    onchange: (id: string) => void;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/Tag.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  type Tone = 'neutral' | 'brand' | 'violet' | 'success' | 'warn' | 'danger';
+
+  interface Props {
+    label: string;
+    tone?: Tone;
+    removable?: boolean;
+    onremove?: () => void;
+    class?: string;
+  }
+
+  let {
+    label,
+    tone = 'neutral',
+    removable = false,
+    onremove = undefined,
+    class: cls = '',
+  }: Props = $props();
+
+  const tones: Record<Tone, string> = {
+    neutral: 'bg-surface-2 text-muted border-line',
+    brand: 'bg-brand/10 text-brand border-brand/20',
+    violet: 'bg-violet/10 text-violet border-violet/20',
+    success: 'bg-success/10 text-success border-success/20',
+    warn: 'bg-warn/10 text-warn border-warn/20',
+    danger: 'bg-danger/10 text-danger border-danger/20',
+  };
+</script>
+
+<span
+  class="inline-flex items-center gap-1 rounded-md border px-2 py-0.5
+    text-xs font-medium {tones[tone]} {cls}"
+>
+  {label}
+  {#if removable}
+    <button
+      type="button"
+      onclick={onremove}
+      aria-label="Remove {label}"
+      class="ml-0.5 rounded transition-opacity hover:opacity-60 leading-none"
+    >
+      <svg
+        width="10"
+        height="10"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M18 6L6 18M6 6l12 12" />
+      </svg>
+    </button>
+  {/if}
+</span>

package/dist/components/Tag.svelte.d.ts

@@ -0,0 +1,11 @@
+type Tone = 'neutral' | 'brand' | 'violet' | 'success' | 'warn' | 'danger';
+interface Props {
+    label: string;
+    tone?: Tone;
+    removable?: boolean;
+    onremove?: () => void;
+    class?: string;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/Textarea.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  type TA = HTMLTextAreaElement;
+  type TAE = Event & { currentTarget: TA };
+
+  let {
+    value = $bindable(''),
+    id,
+    name,
+    placeholder,
+    rows = 4,
+    maxlength,
+    required = false,
+    disabled = false,
+    readonly = false,
+    resize = true,
+    error,
+    hint,
+    class: cls = '',
+    oninput,
+    onblur,
+  }: {
+    value?: string;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    rows?: number;
+    maxlength?: number;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    resize?: boolean;
+    error?: string;
+    hint?: string;
+    class?: string;
+    oninput?: (e: TAE) => void;
+    onblur?: (e: FocusEvent & { currentTarget: TA }) => void;
+  } = $props();
+
+  const base =
+    'w-full bg-surface-2 rounded-lg px-3 py-2 text-sm text-fg ' +
+    'focus:outline-none transition-colors ' +
+    'placeholder:text-faint ' +
+    'disabled:opacity-50 disabled:cursor-not-allowed';
+
+  function handleInput(e: TAE) {
+    value = e.currentTarget.value;
+    oninput?.(e);
+  }
+</script>
+
+<div class="flex flex-col gap-1 {cls}">
+  <textarea
+    {id}
+    {name}
+    {rows}
+    {maxlength}
+    {required}
+    {disabled}
+    {readonly}
+    {placeholder}
+    class="{base}
+      {error
+      ? 'border border-danger focus:border-danger/70'
+      : 'border border-line focus:border-brand/50'}
+      {resize ? 'resize-y' : 'resize-none'}"
+    oninput={handleInput}
+    {onblur}>{value}</textarea
+  >
+  {#if error}
+    <p class="text-xs text-danger">{error}</p>
+  {/if}
+  {#if hint}
+    <p class="text-xs text-faint">{hint}</p>
+  {/if}
+</div>

package/dist/components/Textarea.svelte.d.ts

@@ -0,0 +1,26 @@
+type TA = HTMLTextAreaElement;
+type TAE = Event & {
+    currentTarget: TA;
+};
+type $$ComponentProps = {
+    value?: string;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    rows?: number;
+    maxlength?: number;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    resize?: boolean;
+    error?: string;
+    hint?: string;
+    class?: string;
+    oninput?: (e: TAE) => void;
+    onblur?: (e: FocusEvent & {
+        currentTarget: TA;
+    }) => void;
+};
+declare const Textarea: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/ThemeToggle.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Moon, Sun } from '@lucide/svelte';
+  import { getTheme, toggleTheme, type Theme } from '../utils/theme.js';
+
+  interface Props {
+    class?: string;
+  }
+
+  let { class: klass = '' }: Props = $props();
+
+  let theme = $state<Theme>('dark');
+
+  $effect(() => {
+    theme = getTheme();
+  });
+
+  function flip() {
+    theme = toggleTheme();
+  }
+</script>
+
+<button
+  type="button"
+  onclick={flip}
+  aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+  class="rounded-lg p-2 text-faint transition-colors hover:bg-surface-2 hover:text-fg {klass}"
+>
+  {#if theme === 'dark'}
+    <Sun size={16} aria-hidden="true" />
+  {:else}
+    <Moon size={16} aria-hidden="true" />
+  {/if}
+</button>

package/dist/components/ThemeToggle.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;