@lyeve-labs/ui-kit 0.8.2

package/dist/components/FileInput.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  interface Props {
+    id?: string;
+    name?: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    label?: string;
+    class?: string;
+    onchange?: (files: FileList | null) => void;
+  }
+
+  let {
+    id = undefined,
+    name = undefined,
+    accept = undefined,
+    multiple = false,
+    disabled = false,
+    error = undefined,
+    hint = undefined,
+    label = undefined,
+    class: cls = '',
+    onchange = undefined,
+  }: Props = $props();
+
+  let dragOver = $state(false);
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    onchange?.(e.currentTarget.files);
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    dragOver = false;
+    if (disabled) return;
+    onchange?.(e.dataTransfer?.files ?? null);
+  }
+</script>
+
+<div class="flex flex-col gap-1.5 {cls}">
+  {#if label}
+    <label for={id} class="text-sm font-medium text-fg">{label}</label>
+  {/if}
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <label
+    class="flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl
+      border-2 border-dashed px-4 py-8 text-center transition-colors
+      {error
+      ? 'border-danger bg-danger/5 hover:bg-danger/8'
+      : dragOver
+        ? 'border-brand bg-brand/8'
+        : 'border-line bg-surface-2/40 hover:border-brand/50 hover:bg-brand/5'}
+      {disabled ? 'cursor-not-allowed opacity-50' : ''}"
+    ondragover={(e) => {
+      e.preventDefault();
+      dragOver = true;
+    }}
+    ondragleave={() => (dragOver = false)}
+    ondrop={handleDrop}
+  >
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class={error ? 'text-danger' : 'text-faint'}
+      aria-hidden="true"
+    >
+      <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </svg>
+    <div class="text-sm">
+      <span class="{error ? 'text-danger' : 'text-brand'} font-medium">Click to upload</span>
+      <span class="text-muted"> or drag & drop</span>
+      {#if accept}<p class="mt-0.5 text-xs text-faint">{accept}</p>{/if}
+    </div>
+    <input
+      type="file"
+      {id}
+      {name}
+      {accept}
+      {multiple}
+      {disabled}
+      onchange={handleChange}
+      class="sr-only"
+    />
+  </label>
+
+  {#if error}
+    <p class="text-xs text-danger">{error}</p>
+  {:else if hint}
+    <p class="text-xs text-faint">{hint}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,15 @@
+interface Props {
+    id?: string;
+    name?: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    error?: string;
+    hint?: string;
+    label?: string;
+    class?: string;
+    onchange?: (files: FileList | null) => void;
+}
+declare const FileInput: import("svelte").Component<Props, {}, "">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;

package/dist/components/Indicator.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  type Tone = 'brand' | 'success' | 'warn' | 'danger' | 'neutral' | 'violet';
+  type Size = 'xs' | 'sm' | 'md' | 'lg';
+
+  interface Props {
+    tone?: Tone;
+    pulse?: boolean;
+    size?: Size;
+    class?: string;
+  }
+
+  let { tone = 'success', pulse = false, size = 'sm', class: cls = '' }: Props = $props();
+
+  const tones: Record<Tone, string> = {
+    brand: 'bg-brand',
+    success: 'bg-success',
+    warn: 'bg-warn',
+    danger: 'bg-danger',
+    neutral: 'bg-muted',
+    violet: 'bg-violet',
+  };
+
+  const sizes: Record<Size, string> = {
+    xs: 'w-1.5 h-1.5',
+    sm: 'w-2 h-2',
+    md: 'w-2.5 h-2.5',
+    lg: 'w-3.5 h-3.5',
+  };
+</script>
+
+<span class="relative inline-flex {cls}" aria-hidden="true">
+  {#if pulse}
+    <span
+      class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-60 {tones[tone]}"
+    ></span>
+  {/if}
+  <span class="relative inline-flex rounded-full {sizes[size]} {tones[tone]}"></span>
+</span>

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

@@ -0,0 +1,11 @@
+type Tone = 'brand' | 'success' | 'warn' | 'danger' | 'neutral' | 'violet';
+type Size = 'xs' | 'sm' | 'md' | 'lg';
+interface Props {
+    tone?: Tone;
+    pulse?: boolean;
+    size?: Size;
+    class?: string;
+}
+declare const Indicator: import("svelte").Component<Props, {}, "">;
+type Indicator = ReturnType<typeof Indicator>;
+export default Indicator;

package/dist/components/Input.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  interface Props {
+    value?: string;
+    label?: string;
+    type?: string;
+    placeholder?: string;
+    hint?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    name?: string;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = $bindable(''),
+    label = undefined,
+    type = 'text',
+    placeholder = '',
+    hint = undefined,
+    error = undefined,
+    disabled = false,
+    required = false,
+    id = undefined,
+    class: klass = '',
+    ...rest
+  }: Props = $props();
+
+  const fieldId = $derived(id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : undefined));
+</script>
+
+<div class="flex flex-col gap-1.5 {klass}">
+  {#if label}
+    <label for={fieldId} class="text-sm font-medium text-fg">
+      {label}{#if required}<span class="text-danger ml-0.5">*</span>{/if}
+    </label>
+  {/if}
+
+  <input
+    id={fieldId}
+    {type}
+    {placeholder}
+    {disabled}
+    {required}
+    bind:value
+    aria-invalid={error ? 'true' : undefined}
+    class="w-full rounded-lg bg-surface-2 border px-3 py-2 text-sm text-fg placeholder:text-faint
+           transition-colors outline-none disabled:opacity-50 disabled:cursor-not-allowed
+           {error ? 'border-danger focus:border-danger' : 'border-line focus:border-brand'}"
+    {...rest}
+  />
+
+  {#if error}
+    <p class="text-xs text-danger">{error}</p>
+  {:else if hint}
+    <p class="text-xs text-faint">{hint}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,17 @@
+interface Props {
+    value?: string;
+    label?: string;
+    type?: string;
+    placeholder?: string;
+    hint?: string;
+    error?: string;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    name?: string;
+    class?: string;
+    [key: string]: unknown;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/Kbd.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children: Snippet;
+  }
+
+  let { class: cls = '', children }: Props = $props();
+</script>
+
+<kbd
+  class="inline-flex items-center justify-center rounded border border-line bg-surface-2
+    px-1.5 py-0.5 font-mono text-[11px] text-muted
+    shadow-[inset_0_-1px_0] shadow-line {cls}"
+>
+  {@render children()}
+</kbd>

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

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

package/dist/components/Label.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    for: htmlFor,
+    required = false,
+    hint,
+    class: cls = '',
+    children,
+  }: {
+    for?: string;
+    required?: boolean;
+    hint?: string;
+    class?: string;
+    children: Snippet;
+  } = $props();
+</script>
+
+<label
+  for={htmlFor}
+  class="flex items-center gap-1 text-xs font-medium text-muted uppercase tracking-wider {cls}"
+>
+  {@render children()}
+  {#if required}
+    <span class="text-danger font-bold leading-none" aria-label="required">*</span>
+  {/if}
+  {#if hint}
+    <span class="text-faint normal-case font-normal ml-0.5">({hint})</span>
+  {/if}
+</label>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    for?: string;
+    required?: boolean;
+    hint?: string;
+    class?: string;
+    children: Snippet;
+};
+declare const Label: import("svelte").Component<$$ComponentProps, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/Modal.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Size = 'sm' | 'md' | 'lg';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    size?: Size;
+    onclose?: () => void;
+    children: Snippet;
+    footer?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title = undefined,
+    description = undefined,
+    size = 'md',
+    onclose = undefined,
+    children,
+    footer,
+  }: Props = $props();
+
+  const widths: Record<Size, string> = {
+    sm: 'max-w-sm',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+  };
+
+  function close() {
+    open = false;
+    onclose?.();
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      close();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={open ? onkeydown : undefined} />
+
+{#if open}
+  <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+    <button
+      type="button"
+      class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
+      aria-label="Close"
+      onclick={close}
+    ></button>
+
+    <div
+      class="relative w-full {widths[size]} rounded-xl border border-line bg-surface shadow-2xl
+             animate-[modal-in_120ms_ease-out]"
+      role="dialog"
+      aria-modal="true"
+    >
+      {#if title}
+        <div class="flex items-start justify-between gap-4 px-5 py-4 border-b border-line">
+          <div>
+            <h2 class="font-semibold text-fg">{title}</h2>
+            {#if description}<p class="text-sm text-muted mt-0.5">{description}</p>{/if}
+          </div>
+          <button
+            type="button"
+            onclick={close}
+            class="text-faint hover:text-fg transition-colors text-xl leading-none -mt-1"
+            aria-label="Close"
+          >
+            ×
+          </button>
+        </div>
+      {/if}
+
+      <div class="px-5 py-4">
+        {@render children()}
+      </div>
+
+      {#if footer}
+        <div
+          class="flex items-center justify-end gap-2 px-5 py-3 border-t border-line bg-surface-2/40"
+        >
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  @keyframes modal-in {
+    from {
+      opacity: 0;
+      transform: translateY(6px) scale(0.98);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type Size = 'sm' | 'md' | 'lg';
+interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    size?: Size;
+    onclose?: () => void;
+    children: Snippet;
+    footer?: Snippet;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/MultiSelect.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+  // MultiSelect: pick several options, shown as removable chips, with an optional
+  // search box. Binds to a string[] of selected values.
+  interface Option {
+    value: string;
+    label: string;
+    disabled?: boolean;
+  }
+
+  let {
+    value = $bindable<string[]>([]),
+    options,
+    label = undefined,
+    hint = undefined,
+    error = undefined,
+    placeholder = 'Select…',
+    searchable = true,
+    disabled = false,
+    required = false,
+    id = undefined,
+    class: cls = '',
+    onchange = undefined,
+  }: {
+    value?: string[];
+    options: Option[];
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    searchable?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    class?: string;
+    onchange?: (value: string[]) => void;
+  } = $props();
+
+  let open = $state(false);
+  let query = $state('');
+  let containerEl: HTMLDivElement | undefined = $state();
+
+  const selected = $derived(options.filter((o) => value.includes(o.value)));
+  const filtered = $derived(
+    options.filter((o) => o.label.toLowerCase().includes(query.trim().toLowerCase())),
+  );
+
+  function isSelected(v: string) {
+    return value.includes(v);
+  }
+
+  function toggle(opt: Option) {
+    if (opt.disabled) return;
+    value = isSelected(opt.value) ? value.filter((v) => v !== opt.value) : [...value, opt.value];
+    onchange?.(value);
+  }
+
+  function remove(v: string) {
+    value = value.filter((x) => x !== v);
+    onchange?.(value);
+  }
+
+  function open_() {
+    if (!disabled) open = true;
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (containerEl && !containerEl.contains(e.target as Node)) {
+      open = false;
+      query = '';
+    }
+  }
+  function handleKey(e: KeyboardEvent) {
+    if (e.key === 'Escape') open = false;
+  }
+
+  $effect(() => {
+    if (open) {
+      document.addEventListener('click', handleOutside, { capture: true });
+      document.addEventListener('keydown', handleKey);
+    }
+    return () => {
+      document.removeEventListener('click', handleOutside, { capture: true });
+      document.removeEventListener('keydown', handleKey);
+    };
+  });
+</script>
+
+<div class="flex flex-col gap-1.5 {cls}" bind:this={containerEl}>
+  {#if label}
+    <label for={id} class="text-sm font-medium text-fg">
+      {label}{#if required}<span class="text-danger ml-0.5">*</span>{/if}
+    </label>
+  {/if}
+
+  <div class="relative">
+    <!-- Trigger (a div, not a button, so the chip remove-buttons are valid children) -->
+    <div
+      {id}
+      role="button"
+      tabindex={disabled ? -1 : 0}
+      aria-haspopup="listbox"
+      aria-expanded={open}
+      aria-disabled={disabled}
+      onclick={() => (open ? (open = false) : open_())}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          open ? (open = false) : open_();
+        }
+      }}
+      class="w-full min-h-[2.375rem] flex flex-wrap items-center gap-1.5 rounded-lg border bg-surface-2
+        px-2.5 py-1.5 text-left text-sm transition-colors outline-none cursor-pointer
+        focus-visible:border-brand
+        {disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        {error ? 'border-danger focus:border-danger' : 'border-line focus:border-brand'}"
+    >
+      {#if selected.length === 0}
+        <span class="text-faint px-0.5">{placeholder}</span>
+      {:else}
+        {#each selected as opt (opt.value)}
+          <span
+            class="inline-flex items-center gap-1 rounded-md bg-brand/10 text-brand px-2 py-0.5 text-xs"
+          >
+            {opt.label}
+            <button
+              type="button"
+              aria-label="Remove {opt.label}"
+              onclick={(e) => {
+                e.stopPropagation();
+                remove(opt.value);
+              }}
+              class="hover:text-brand-light leading-none">×</button
+            >
+          </span>
+        {/each}
+      {/if}
+      <span class="ml-auto shrink-0 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>
+
+    <!-- Panel -->
+    {#if open}
+      <div
+        role="listbox"
+        aria-multiselectable="true"
+        class="absolute z-50 mt-1 w-full rounded-xl border border-line bg-surface shadow-2xl overflow-hidden"
+      >
+        {#if searchable}
+          <div class="p-2 border-b border-line">
+            <!-- svelte-ignore a11y_autofocus -->
+            <input
+              autofocus
+              bind:value={query}
+              placeholder="Search…"
+              class="w-full rounded-md bg-surface-2 border border-line px-2.5 py-1.5 text-sm text-fg
+                placeholder:text-faint outline-none focus:border-brand"
+            />
+          </div>
+        {/if}
+        <div class="max-h-60 overflow-y-auto py-1">
+          {#each filtered as opt (opt.value)}
+            <button
+              type="button"
+              role="option"
+              aria-selected={isSelected(opt.value)}
+              disabled={opt.disabled}
+              onclick={() => toggle(opt)}
+              class="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-fg transition-colors
+                hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed"
+            >
+              <span
+                class="flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors
+                  {isSelected(opt.value) ? 'bg-brand border-brand' : 'bg-surface-2 border-line'}"
+              >
+                {#if isSelected(opt.value)}
+                  <svg width="10" height="8" viewBox="0 0 10 8" fill="none" aria-hidden="true">
+                    <path
+                      d="M1 4l3 3 5-6"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="text-ink"
+                    />
+                  </svg>
+                {/if}
+              </span>
+              <span class="text-left">{opt.label}</span>
+            </button>
+          {:else}
+            <p class="px-3 py-2 text-sm text-faint">No matches</p>
+          {/each}
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  {#if error}
+    <p class="text-xs text-danger">{error}</p>
+  {:else if hint}
+    <p class="text-xs text-faint">{hint}</p>
+  {/if}
+</div>

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

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