@lyeve-labs/ui-kit 0.8.2

package/dist/components/NumberInput.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    error?: string;
+    class?: string;
+    onchange?: (v: number) => void;
+  }
+
+  let {
+    value = $bindable(0),
+    min = undefined,
+    max = undefined,
+    step = 1,
+    disabled = false,
+    id = undefined,
+    name = undefined,
+    error = undefined,
+    class: cls = '',
+    onchange = undefined,
+  }: Props = $props();
+
+  function dec() {
+    const next = value - step;
+    if (min !== undefined && next < min) return;
+    value = next;
+    onchange?.(value);
+  }
+
+  function inc() {
+    const next = value + step;
+    if (max !== undefined && next > max) return;
+    value = next;
+    onchange?.(value);
+  }
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+    const n = parseFloat(e.currentTarget.value);
+    if (!isNaN(n)) {
+      value = n;
+      onchange?.(n);
+    }
+  }
+
+  let canDec = $derived(!(disabled || (min !== undefined && value <= min)));
+  let canInc = $derived(!(disabled || (max !== undefined && value >= max)));
+</script>
+
+<div class="flex flex-col gap-1 {cls}">
+  <div class="flex h-9">
+    <button
+      type="button"
+      onclick={dec}
+      disabled={!canDec}
+      aria-label="Decrease"
+      class="flex w-9 shrink-0 items-center justify-center rounded-l-lg border border-r-0 border-line
+        bg-surface-2 text-lg leading-none text-muted transition-colors
+        hover:bg-line hover:text-fg
+        disabled:cursor-not-allowed disabled:opacity-40">−</button
+    >
+
+    <input
+      type="number"
+      {id}
+      {name}
+      {min}
+      {max}
+      {step}
+      {disabled}
+      {value}
+      oninput={handleInput}
+      class="min-w-0 flex-1 border-y bg-surface-2 text-center text-sm text-fg
+        focus:outline-none focus:border-brand transition-colors
+        disabled:cursor-not-allowed disabled:opacity-50
+        [appearance:textfield]
+        [&::-webkit-inner-spin-button]:appearance-none
+        [&::-webkit-outer-spin-button]:appearance-none
+        {error ? 'border-danger' : 'border-line'}"
+    />
+
+    <button
+      type="button"
+      onclick={inc}
+      disabled={!canInc}
+      aria-label="Increase"
+      class="flex w-9 shrink-0 items-center justify-center rounded-r-lg border border-l-0 border-line
+        bg-surface-2 text-lg leading-none text-muted transition-colors
+        hover:bg-line hover:text-fg
+        disabled:cursor-not-allowed disabled:opacity-40">+</button
+    >
+  </div>
+  {#if error}<p class="text-xs text-danger">{error}</p>{/if}
+</div>

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

@@ -0,0 +1,15 @@
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    error?: string;
+    class?: string;
+    onchange?: (v: number) => void;
+}
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/components/PageHeader.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    class?: string;
+    actions?: Snippet;
+  }
+
+  let { title, description = undefined, class: klass = '', actions }: Props = $props();
+</script>
+
+<header class="mb-8 flex flex-wrap items-start justify-between gap-4 {klass}">
+  <div class="min-w-0">
+    <h1 class="text-2xl font-bold text-fg">{title}</h1>
+    {#if description}<p class="mt-1 text-sm text-muted">{description}</p>{/if}
+  </div>
+  {#if actions}
+    <div class="flex shrink-0 items-center gap-2">{@render actions()}</div>
+  {/if}
+</header>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    class?: string;
+    actions?: Snippet;
+}
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/Pagination.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  let {
+    page,
+    total,
+    perPage = 20,
+    class: cls = '',
+    onchange,
+  }: {
+    page: number;
+    total: number;
+    perPage?: number;
+    class?: string;
+    onchange: (page: number) => void;
+  } = $props();
+
+  let safeTotal = $derived(isFinite(total) && total >= 0 ? total : 0);
+  let safePage = $derived(isFinite(page) && page >= 1 ? page : 1);
+  let totalPages = $derived(Math.max(1, Math.ceil(safeTotal / perPage)));
+  let from = $derived(Math.min((safePage - 1) * perPage + 1, safeTotal));
+  let to = $derived(Math.min(safePage * perPage, safeTotal));
+
+  function pageNumbers(current: number, last: number): (number | '…')[] {
+    if (last <= 7) return Array.from({ length: last }, (_, i) => i + 1);
+    const pages: (number | '…')[] = [1];
+    if (current > 3) pages.push('…');
+    for (let i = Math.max(2, current - 1); i <= Math.min(last - 1, current + 1); i++) {
+      pages.push(i);
+    }
+    if (current < last - 2) pages.push('…');
+    pages.push(last);
+    return pages;
+  }
+
+  let nums = $derived(pageNumbers(safePage, totalPages));
+
+  const btnBase =
+    'inline-flex items-center justify-center w-7 h-7 rounded text-xs font-medium transition-colors';
+</script>
+
+{#if totalPages > 1}
+  <div class="flex items-center gap-3 {cls}">
+    <span class="text-xs text-faint shrink-0">
+      {total === 0 ? 'No results' : `${from}–${to} of ${total}`}
+    </span>
+
+    <div class="flex items-center gap-0.5 ml-auto">
+      <button
+        type="button"
+        disabled={safePage <= 1}
+        onclick={() => onchange(safePage - 1)}
+        aria-label="Previous page"
+        class="{btnBase} text-muted hover:text-fg hover:bg-surface-2
+          disabled:opacity-30 disabled:cursor-not-allowed"
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M15 18l-6-6 6-6" />
+        </svg>
+      </button>
+
+      {#each nums as n, i (i)}
+        {#if n === '…'}
+          <span class="w-7 text-center text-xs text-faint">…</span>
+        {:else}
+          <button
+            type="button"
+            onclick={() => onchange(n as number)}
+            aria-current={safePage === n ? 'page' : undefined}
+            class="{btnBase}
+              {safePage === n
+              ? 'bg-brand text-ink'
+              : 'text-muted hover:text-fg hover:bg-surface-2'}"
+          >
+            {n}
+          </button>
+        {/if}
+      {/each}
+
+      <button
+        type="button"
+        disabled={safePage >= totalPages}
+        onclick={() => onchange(safePage + 1)}
+        aria-label="Next page"
+        class="{btnBase} text-muted hover:text-fg hover:bg-surface-2
+          disabled:opacity-30 disabled:cursor-not-allowed"
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M9 18l6-6-6-6" />
+        </svg>
+      </button>
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    page: number;
+    total: number;
+    perPage?: number;
+    class?: string;
+    onchange: (page: number) => void;
+};
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Progress.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  type Tone = 'brand' | 'violet' | 'success' | 'warn' | 'danger';
+  type Size = 'xs' | 'sm' | 'md';
+
+  interface Props {
+    value: number;
+    max?: number;
+    tone?: Tone;
+    size?: Size;
+    label?: string;
+    showValue?: boolean;
+    animated?: boolean;
+    class?: string;
+  }
+
+  let {
+    value,
+    max = 100,
+    tone = 'brand',
+    size = 'sm',
+    label = undefined,
+    showValue = false,
+    animated = false,
+    class: cls = '',
+  }: Props = $props();
+
+  let pct = $derived(
+    isFinite(value) && isFinite(max) && max > 0
+      ? Math.min(100, Math.max(0, (value / max) * 100))
+      : 0,
+  );
+
+  const tones: Record<Tone, string> = {
+    brand: 'bg-brand',
+    violet: 'bg-violet',
+    success: 'bg-success',
+    warn: 'bg-warn',
+    danger: 'bg-danger',
+  };
+
+  const sizes: Record<Size, string> = {
+    xs: 'h-1',
+    sm: 'h-1.5',
+    md: 'h-2.5',
+  };
+</script>
+
+<div class={cls}>
+  {#if label || showValue}
+    <div class="flex items-center justify-between mb-1.5">
+      {#if label}<span class="text-xs font-medium text-muted">{label}</span>{/if}
+      {#if showValue}<span class="text-xs tabular-nums text-faint">{Math.round(pct)}%</span>{/if}
+    </div>
+  {/if}
+  <div
+    class="w-full overflow-hidden rounded-full bg-surface-2 {sizes[size]}"
+    role="progressbar"
+    aria-valuenow={value}
+    aria-valuemin={0}
+    aria-valuemax={max}
+    aria-label={label}
+  >
+    <div
+      class="h-full rounded-full transition-[width] duration-500
+        {tones[tone]}
+        {animated ? 'animate-pulse' : ''}"
+      style="width: {pct}%"
+    ></div>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+type Tone = 'brand' | 'violet' | 'success' | 'warn' | 'danger';
+type Size = 'xs' | 'sm' | 'md';
+interface Props {
+    value: number;
+    max?: number;
+    tone?: Tone;
+    size?: Size;
+    label?: string;
+    showValue?: boolean;
+    animated?: boolean;
+    class?: string;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/Radio.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  interface Props {
+    value: string;
+    group?: string;
+    label?: string;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    onchange?: (value: string) => void;
+  }
+
+  let {
+    value,
+    group = $bindable(''),
+    label = undefined,
+    hint = undefined,
+    required = false,
+    disabled = false,
+    id = undefined,
+    name = undefined,
+    onchange = undefined,
+  }: Props = $props();
+
+  function handleChange() {
+    group = value;
+    onchange?.(value);
+  }
+</script>
+
+<label
+  class="inline-flex cursor-pointer select-none items-start gap-2.5
+    {disabled ? 'cursor-not-allowed opacity-50' : ''}"
+>
+  <span class="relative mt-0.5 flex shrink-0 items-center justify-center">
+    <input
+      type="radio"
+      {id}
+      {name}
+      {value}
+      {required}
+      {disabled}
+      checked={group === value}
+      onchange={handleChange}
+      class="peer sr-only"
+    />
+    <span
+      class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors
+        {group === value
+        ? 'border-brand bg-surface-2'
+        : 'border-line bg-surface-2 peer-focus-visible:border-brand'}"
+    >
+      {#if group === value}
+        <span class="h-2 w-2 rounded-full bg-brand"></span>
+      {/if}
+    </span>
+  </span>
+  {#if label || hint}
+    <span class="flex flex-col gap-0.5">
+      {#if label}<span class="text-sm text-fg">{label}</span>{/if}
+      {#if hint}<span class="text-xs text-faint">{hint}</span>{/if}
+    </span>
+  {/if}
+</label>

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

@@ -0,0 +1,14 @@
+interface Props {
+    value: string;
+    group?: string;
+    label?: string;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    onchange?: (value: string) => void;
+}
+declare const Radio: import("svelte").Component<Props, {}, "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/RadioGroup.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  // RadioGroup renders a managed set of radio options bound to a single value.
+  // Matches the visual of Radio.svelte; use this when you have a fixed option list.
+  interface Option {
+    value: string;
+    label: string;
+    hint?: string;
+    disabled?: boolean;
+  }
+
+  let {
+    value = $bindable(''),
+    options,
+    name = undefined,
+    label = undefined,
+    hint = undefined,
+    error = undefined,
+    required = false,
+    disabled = false,
+    orientation = 'vertical',
+    class: cls = '',
+    onchange = undefined,
+  }: {
+    value?: string;
+    options: Option[];
+    name?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+    onchange?: (value: string) => void;
+  } = $props();
+
+  const fallbackName = `rg-${Math.random().toString(36).slice(2, 9)}`;
+  const groupName = $derived(name ?? fallbackName);
+
+  function select(opt: Option) {
+    if (disabled || opt.disabled) return;
+    value = opt.value;
+    onchange?.(opt.value);
+  }
+</script>
+
+<fieldset class="flex flex-col gap-2 {cls}" {disabled}>
+  {#if label}
+    <legend class="text-sm font-medium text-fg mb-0.5">
+      {label}{#if required}<span class="text-danger ml-0.5">*</span>{/if}
+    </legend>
+  {/if}
+
+  <div
+    class="flex gap-x-5 gap-y-2 {orientation === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col'}"
+  >
+    {#each options as opt (opt.value)}
+      <label
+        class="inline-flex cursor-pointer select-none items-start gap-2.5
+          {disabled || opt.disabled ? 'cursor-not-allowed opacity-50' : ''}"
+      >
+        <span class="relative mt-0.5 flex shrink-0 items-center justify-center">
+          <input
+            type="radio"
+            name={groupName}
+            value={opt.value}
+            disabled={disabled || opt.disabled}
+            checked={value === opt.value}
+            onchange={() => select(opt)}
+            class="peer sr-only"
+          />
+          <span
+            class="flex h-4 w-4 items-center justify-center rounded-full border-2 transition-colors
+              {value === opt.value
+              ? 'border-brand bg-surface-2'
+              : 'border-line bg-surface-2 peer-focus-visible:border-brand'}"
+          >
+            {#if value === opt.value}
+              <span class="h-2 w-2 rounded-full bg-brand"></span>
+            {/if}
+          </span>
+        </span>
+        <span class="flex flex-col gap-0.5">
+          <span class="text-sm text-fg">{opt.label}</span>
+          {#if opt.hint}<span class="text-xs text-faint">{opt.hint}</span>{/if}
+        </span>
+      </label>
+    {/each}
+  </div>
+
+  {#if error}
+    <p class="text-xs text-danger">{error}</p>
+  {:else if hint}
+    <p class="text-xs text-faint">{hint}</p>
+  {/if}
+</fieldset>

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

@@ -0,0 +1,22 @@
+interface Option {
+    value: string;
+    label: string;
+    hint?: string;
+    disabled?: boolean;
+}
+type $$ComponentProps = {
+    value?: string;
+    options: Option[];
+    name?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    class?: string;
+    onchange?: (value: string) => void;
+};
+declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/SearchInput.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+    oninput?: (value: string) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = 'Search…',
+    disabled = false,
+    class: cls = '',
+    oninput = undefined,
+  }: Props = $props();
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+    value = e.currentTarget.value;
+    oninput?.(value);
+  }
+
+  function clear() {
+    value = '';
+    oninput?.('');
+  }
+</script>
+
+<div class="relative {cls}">
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-faint"
+    aria-hidden="true"
+  >
+    <circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
+  </svg>
+
+  <input
+    type="search"
+    {placeholder}
+    {disabled}
+    {value}
+    oninput={handleInput}
+    class="w-full rounded-lg border border-line bg-surface-2
+      py-2 pl-9 text-sm text-fg placeholder:text-faint
+      focus:border-brand focus:outline-none transition-colors
+      disabled:cursor-not-allowed disabled:opacity-50
+      [&::-webkit-search-cancel-button]:appearance-none
+      {value ? 'pr-8' : 'pr-3'}"
+  />
+
+  {#if value}
+    <button
+      type="button"
+      onclick={clear}
+      aria-label="Clear search"
+      class="absolute right-2.5 top-1/2 -translate-y-1/2 text-faint
+        transition-colors hover:text-fg"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        aria-hidden="true"
+      >
+        <path d="M18 6L6 18M6 6l12 12" />
+      </svg>
+    </button>
+  {/if}
+</div>

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

@@ -0,0 +1,10 @@
+interface Props {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    class?: string;
+    oninput?: (value: string) => void;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;