@lyeve-labs/ui-kit 0.8.2

package/dist/components/DatePicker.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+  // DatePicker: a text trigger + calendar popover. Binds `value` to an ISO date
+  // string ("YYYY-MM-DD"). Pure local-date math (no timezone surprises).
+  let {
+    value = $bindable(''),
+    label = undefined,
+    hint = undefined,
+    error = undefined,
+    placeholder = 'Select a date',
+    min = undefined,
+    max = undefined,
+    disabled = false,
+    required = false,
+    id = undefined,
+    class: cls = '',
+    onchange = undefined,
+  }: {
+    value?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+  } = $props();
+
+  const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  const MONTHS = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+
+  let open = $state(false);
+  let containerEl: HTMLDivElement | undefined = $state();
+
+  function parseISO(s?: string): { y: number; m: number; d: number } | null {
+    if (!s) return null;
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+    if (!m) return null;
+    return { y: +m[1], m: +m[2], d: +m[3] };
+  }
+  function pad(n: number) {
+    return n < 10 ? `0${n}` : `${n}`;
+  }
+  function toISO(y: number, m: number, d: number) {
+    return `${y}-${pad(m)}-${pad(d)}`;
+  }
+
+  const today = new Date();
+  const initial = parseISO(value) ?? {
+    y: today.getFullYear(),
+    m: today.getMonth() + 1,
+    d: today.getDate(),
+  };
+  let viewYear = $state(initial.y);
+  let viewMonth = $state(initial.m); // 1-12
+
+  const display = $derived.by(() => {
+    const p = parseISO(value);
+    if (!p) return '';
+    return new Date(p.y, p.m - 1, p.d).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  });
+
+  // Grid of day numbers (null = leading blank) for the viewed month.
+  const cells = $derived.by(() => {
+    const firstDow = new Date(viewYear, viewMonth - 1, 1).getDay();
+    const days = new Date(viewYear, viewMonth, 0).getDate();
+    const out: (number | null)[] = [];
+    for (let i = 0; i < firstDow; i++) out.push(null);
+    for (let d = 1; d <= days; d++) out.push(d);
+    return out;
+  });
+
+  const todayISO = toISO(today.getFullYear(), today.getMonth() + 1, today.getDate());
+
+  function isDisabled(d: number) {
+    const iso = toISO(viewYear, viewMonth, d);
+    if (min && iso < min) return true;
+    if (max && iso > max) return true;
+    return false;
+  }
+
+  function pick(d: number) {
+    if (isDisabled(d)) return;
+    value = toISO(viewYear, viewMonth, d);
+    onchange?.(value);
+    open = false;
+  }
+
+  function prevMonth() {
+    if (viewMonth === 1) {
+      viewMonth = 12;
+      viewYear -= 1;
+    } else {
+      viewMonth -= 1;
+    }
+  }
+  function nextMonth() {
+    if (viewMonth === 12) {
+      viewMonth = 1;
+      viewYear += 1;
+    } else {
+      viewMonth += 1;
+    }
+  }
+
+  function openCal() {
+    if (disabled) return;
+    const p = parseISO(value);
+    if (p) {
+      viewYear = p.y;
+      viewMonth = p.m;
+    }
+    open = true;
+  }
+
+  function handleOutside(e: MouseEvent) {
+    if (containerEl && !containerEl.contains(e.target as Node)) open = false;
+  }
+  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">
+    <button
+      type="button"
+      {id}
+      {disabled}
+      onclick={() => (open ? (open = false) : openCal())}
+      class="w-full flex items-center justify-between rounded-lg border bg-surface-2 px-3 py-2 text-sm
+        transition-colors outline-none disabled:opacity-50 disabled:cursor-not-allowed
+        {error ? 'border-danger focus:border-danger' : 'border-line focus:border-brand'}"
+    >
+      <span class={display ? 'text-fg' : 'text-faint'}>{display || placeholder}</span>
+      <span class="text-faint shrink-0" aria-hidden="true">
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+          <rect
+            x="2.5"
+            y="3.5"
+            width="11"
+            height="10"
+            rx="1.5"
+            stroke="currentColor"
+            stroke-width="1.3"
+          />
+          <path
+            d="M2.5 6.5h11M5.5 2v3M10.5 2v3"
+            stroke="currentColor"
+            stroke-width="1.3"
+            stroke-linecap="round"
+          />
+        </svg>
+      </span>
+    </button>
+
+    {#if open}
+      <div
+        class="absolute z-50 mt-1 w-[17rem] rounded-xl border border-line bg-surface shadow-2xl p-3"
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between mb-2">
+          <button
+            type="button"
+            aria-label="Previous month"
+            onclick={prevMonth}
+            class="p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors"
+          >
+            <svg width="14" height="14" viewBox="0 0 12 12" fill="none"
+              ><path
+                d="M7.5 2L4 6l3.5 4"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              /></svg
+            >
+          </button>
+          <span class="text-sm font-medium text-fg">{MONTHS[viewMonth - 1]} {viewYear}</span>
+          <button
+            type="button"
+            aria-label="Next month"
+            onclick={nextMonth}
+            class="p-1.5 rounded-md text-muted hover:bg-surface-2 hover:text-fg transition-colors"
+          >
+            <svg width="14" height="14" viewBox="0 0 12 12" fill="none"
+              ><path
+                d="M4.5 2L8 6l-3.5 4"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              /></svg
+            >
+          </button>
+        </div>
+
+        <!-- Weekday labels -->
+        <div class="grid grid-cols-7 mb-1">
+          {#each WEEKDAYS as wd}
+            <span class="text-center text-[0.65rem] font-medium text-faint py-1">{wd}</span>
+          {/each}
+        </div>
+
+        <!-- Day grid -->
+        <div class="grid grid-cols-7 gap-0.5">
+          {#each cells as d}
+            {#if d === null}
+              <span></span>
+            {:else}
+              {@const iso = toISO(viewYear, viewMonth, d)}
+              <button
+                type="button"
+                disabled={isDisabled(d)}
+                onclick={() => pick(d)}
+                aria-current={iso === todayISO ? 'date' : undefined}
+                aria-label={iso}
+                class="h-8 w-8 mx-auto flex items-center justify-center rounded-md text-sm transition-colors
+                  disabled:opacity-30 disabled:cursor-not-allowed
+                  {iso === value
+                  ? 'bg-brand text-ink font-medium'
+                  : iso === todayISO
+                    ? 'text-brand font-medium hover:bg-surface-2'
+                    : 'text-fg hover:bg-surface-2'}">{d}</button
+              >
+            {/if}
+          {/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/DatePicker.svelte.d.ts

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    value?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    class?: string;
+    onchange?: (value: string) => void;
+};
+declare const DatePicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/Divider.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  let {
+    class: cls = '',
+    children,
+  }: {
+    class?: string;
+    children?: Snippet;
+  } = $props();
+</script>
+
+{#if children}
+  <div class="flex items-center gap-3 {cls}">
+    <span class="flex-1 border-t border-line"></span>
+    <span class="text-xs text-faint font-medium uppercase tracking-wider whitespace-nowrap">
+      {@render children()}
+    </span>
+    <span class="flex-1 border-t border-line"></span>
+  </div>
+{:else}
+  <hr class="border-t border-line {cls}" />
+{/if}

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

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

package/dist/components/Drawer.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Side = 'left' | 'right';
+  type Size = 'sm' | 'md' | 'lg' | 'xl';
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    side?: Side;
+    size?: Size;
+    onclose?: () => void;
+    children: Snippet;
+    footer?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title = undefined,
+    description = undefined,
+    side = 'right',
+    size = 'md',
+    onclose = undefined,
+    children,
+    footer,
+  }: Props = $props();
+
+  const widths: Record<Size, string> = {
+    sm: 'w-72',
+    md: 'w-80',
+    lg: 'w-96',
+    xl: 'w-[480px]',
+  };
+
+  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 {side === 'right' ? 'justify-end' : 'justify-start'}">
+    <button
+      type="button"
+      class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
+      aria-label="Close"
+      onclick={close}
+    ></button>
+
+    <div
+      class="relative flex h-full flex-col {widths[size]} bg-surface shadow-2xl
+        {side === 'right' ? 'border-l' : 'border-r'} border-line
+        {side === 'right'
+        ? 'animate-[drawer-in-right_150ms_ease-out]'
+        : 'animate-[drawer-in-left_150ms_ease-out]'}"
+      role="dialog"
+      aria-modal="true"
+    >
+      {#if title}
+        <div class="flex shrink-0 items-start justify-between gap-4 border-b border-line px-5 py-4">
+          <div>
+            <h2 class="font-semibold text-fg">{title}</h2>
+            {#if description}<p class="mt-0.5 text-sm text-muted">{description}</p>{/if}
+          </div>
+          <button
+            type="button"
+            onclick={close}
+            class="-mt-0.5 text-xl leading-none text-faint transition-colors hover:text-fg"
+            aria-label="Close">×</button
+          >
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-y-auto px-5 py-4">
+        {@render children()}
+      </div>
+
+      {#if footer}
+        <div
+          class="flex shrink-0 items-center justify-end gap-2 border-t border-line bg-surface-2/40 px-5 py-3"
+        >
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  @keyframes drawer-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  @keyframes drawer-in-left {
+    from {
+      opacity: 0;
+      transform: translateX(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+</style>

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

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

package/dist/components/Dropdown.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import type { Component, Snippet } from 'svelte';
+
+  interface DropdownItem {
+    label: string;
+    icon?: Component<{ size?: number; class?: string }>;
+    variant?: 'default' | 'danger';
+    disabled?: boolean;
+    onclick: () => void;
+  }
+
+  let {
+    items,
+    align = 'right',
+    class: cls = '',
+    trigger,
+  }: {
+    items: DropdownItem[];
+    align?: 'left' | 'right';
+    class?: string;
+    trigger: Snippet<[{ open: boolean; toggle: () => void }]>;
+  } = $props();
+
+  let open = $state(false);
+  let containerEl: HTMLDivElement | undefined = $state();
+
+  function toggle() {
+    open = !open;
+  }
+
+  function handleItemClick(item: DropdownItem) {
+    if (item.disabled) return;
+    open = false;
+    item.onclick();
+  }
+
+  function handleOutsideClick(e: MouseEvent) {
+    if (containerEl && !containerEl.contains(e.target as Node)) open = false;
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') open = false;
+  }
+
+  $effect(() => {
+    if (open) {
+      document.addEventListener('click', handleOutsideClick, { capture: true });
+      document.addEventListener('keydown', handleKeydown);
+    }
+    return () => {
+      document.removeEventListener('click', handleOutsideClick, { capture: true });
+      document.removeEventListener('keydown', handleKeydown);
+    };
+  });
+</script>
+
+<div bind:this={containerEl} class="relative inline-block {cls}">
+  {@render trigger({ open, toggle })}
+
+  {#if open}
+    <div
+      role="menu"
+      class="absolute z-50 mt-1 py-1 min-w-36 rounded-xl border border-line
+        bg-surface shadow-2xl
+        {align === 'right' ? 'right-0' : 'left-0'}"
+    >
+      {#each items as item}
+        <button
+          type="button"
+          role="menuitem"
+          disabled={item.disabled}
+          onclick={() => handleItemClick(item)}
+          class="w-full flex items-center gap-2.5 px-3 py-2 text-sm transition-colors
+            disabled:opacity-40 disabled:cursor-not-allowed
+            {item.variant === 'danger'
+            ? 'text-danger hover:bg-danger/10'
+            : 'text-fg hover:bg-surface-2'}"
+        >
+          {#if item.icon}
+            {@const Icon = item.icon}
+            <Icon size={14} class="shrink-0" />
+          {/if}
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,23 @@
+import type { Component, Snippet } from 'svelte';
+interface DropdownItem {
+    label: string;
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+    variant?: 'default' | 'danger';
+    disabled?: boolean;
+    onclick: () => void;
+}
+type $$ComponentProps = {
+    items: DropdownItem[];
+    align?: 'left' | 'right';
+    class?: string;
+    trigger: Snippet<[{
+        open: boolean;
+        toggle: () => void;
+    }]>;
+};
+declare const Dropdown: Component<$$ComponentProps, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/EmptyState.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    icon?: string;
+    iconSnippet?: Snippet;
+    title: string;
+    description?: string;
+    class?: string;
+    action?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    icon = undefined,
+    iconSnippet = undefined,
+    title,
+    description = undefined,
+    class: klass = '',
+    action,
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="flex flex-col items-center justify-center text-center rounded-xl border border-dashed border-line bg-surface/40 px-6 py-12 {klass}"
+>
+  {#if iconSnippet}
+    <div
+      class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-muted"
+      aria-hidden="true"
+    >
+      {@render iconSnippet()}
+    </div>
+  {:else if icon}
+    <div
+      class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-2 text-2xl"
+      aria-hidden="true"
+    >
+      {icon}
+    </div>
+  {/if}
+  <h3 class="text-base font-semibold text-fg">{title}</h3>
+  {#if description}
+    <p class="mt-1 max-w-sm text-sm text-muted">{description}</p>
+  {/if}
+  {#if children}<div class="mt-1 max-w-sm text-sm text-muted">{@render children()}</div>{/if}
+  {#if action}
+    <div class="mt-5">{@render action()}</div>
+  {/if}
+</div>

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

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