@lyeve-labs/ui-kit 0.8.2

package/dist/components/Avatar.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  let {
+    name,
+    src,
+    size = 'md',
+    class: cls = '',
+  }: {
+    name: string;
+    src?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    class?: string;
+  } = $props();
+
+  const sizes: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', { wrap: string; text: string }> = {
+    xs: { wrap: 'w-6 h-6', text: 'text-[9px]' },
+    sm: { wrap: 'w-7 h-7', text: 'text-[10px]' },
+    md: { wrap: 'w-8 h-8', text: 'text-xs' },
+    lg: { wrap: 'w-10 h-10', text: 'text-sm' },
+    xl: { wrap: 'w-14 h-14', text: 'text-base' },
+  };
+
+  const hues = [
+    'bg-violet/80',
+    'bg-brand/60',
+    'bg-success/70',
+    'bg-warn/60',
+    'bg-danger/60',
+    'bg-violet/50',
+    'bg-brand/40',
+    'bg-success/50',
+  ];
+
+  let imgError = $state(false);
+
+  let initials = $derived(
+    (name ?? '')
+      .trim()
+      .split(/\s+/)
+      .slice(0, 2)
+      .map((w) => w[0]?.toUpperCase() ?? '')
+      .join(''),
+  );
+
+  let hue = $derived(hues[(name.charCodeAt(0) || 0) % hues.length]);
+  let s = $derived(sizes[size]);
+</script>
+
+<span
+  class="inline-flex items-center justify-center rounded-full font-semibold shrink-0
+    {s.wrap} {hue} text-ink {cls}"
+  title={name}
+>
+  {#if src && !imgError}
+    <img
+      {src}
+      alt={name}
+      class="w-full h-full rounded-full object-cover"
+      onerror={() => {
+        imgError = true;
+      }}
+    />
+  {:else}
+    <span class={s.text}>{initials}</span>
+  {/if}
+</span>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    name: string;
+    src?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/AvatarGroup.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import Avatar from './Avatar.svelte';
+
+  type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+
+  interface User {
+    name: string;
+    src?: string;
+  }
+
+  interface Props {
+    users: User[];
+    max?: number;
+    size?: AvatarSize;
+    class?: string;
+  }
+
+  let { users, max = 4, size = 'sm', class: cls = '' }: Props = $props();
+
+  let visible = $derived(users.slice(0, max));
+  let overflow = $derived(users.length - max);
+
+  const overflowSizes: Record<AvatarSize, string> = {
+    xs: 'w-6 h-6 text-[9px]',
+    sm: 'w-7 h-7 text-[10px]',
+    md: 'w-8 h-8 text-xs',
+    lg: 'w-10 h-10 text-sm',
+  };
+</script>
+
+<div class="flex items-center {cls}">
+  {#each visible as user}
+    <span class="-ml-1.5 inline-block rounded-full ring-2 ring-ink first:ml-0">
+      <Avatar name={user.name} src={user.src} {size} />
+    </span>
+  {/each}
+
+  {#if overflow > 0}
+    <span
+      class="-ml-1.5 inline-flex shrink-0 items-center justify-center rounded-full
+        bg-surface-2 font-semibold text-faint ring-2 ring-ink
+        {overflowSizes[size]}">+{overflow}</span
+    >
+  {/if}
+</div>

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

@@ -0,0 +1,14 @@
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg';
+interface User {
+    name: string;
+    src?: string;
+}
+interface Props {
+    users: User[];
+    max?: number;
+    size?: AvatarSize;
+    class?: string;
+}
+declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/Badge.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Tone = 'neutral' | 'brand' | 'violet' | 'success' | 'warn' | 'danger';
+  type Size = 'sm' | 'md';
+
+  interface Props {
+    tone?: Tone;
+    size?: Size;
+    dot?: boolean;
+    class?: string;
+    children: Snippet;
+  }
+
+  let { tone = 'neutral', size = 'sm', dot = false, class: klass = '', children }: 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',
+  };
+
+  const dotColor: Record<Tone, string> = {
+    neutral: 'bg-muted',
+    brand: 'bg-brand',
+    violet: 'bg-violet',
+    success: 'bg-success',
+    warn: 'bg-warn',
+    danger: 'bg-danger',
+  };
+
+  const sizes: Record<Size, string> = {
+    sm: 'text-xs px-2 py-0.5 gap-1.5',
+    md: 'text-sm px-2.5 py-1 gap-1.5',
+  };
+</script>
+
+<span
+  class="inline-flex items-center font-medium rounded-full border {tones[tone]} {sizes[
+    size
+  ]} {klass}"
+>
+  {#if dot}<span class="w-1.5 h-1.5 rounded-full {dotColor[tone]}"></span>{/if}
+  {@render children()}
+</span>

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

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

package/dist/components/Banner.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Tone = 'info' | 'success' | 'warn' | 'danger' | 'neutral';
+
+  interface Props {
+    tone?: Tone;
+    dismissible?: boolean;
+    ondismiss?: () => void;
+    class?: string;
+    children: Snippet;
+    action?: Snippet;
+  }
+
+  let {
+    tone = 'info',
+    dismissible = false,
+    ondismiss = undefined,
+    class: cls = '',
+    children,
+    action,
+  }: Props = $props();
+
+  let visible = $state(true);
+
+  function dismiss() {
+    visible = false;
+    ondismiss?.();
+  }
+
+  const tones: Record<Tone, string> = {
+    info: 'bg-brand/10 border-brand/20',
+    success: 'bg-success/10 border-success/20',
+    warn: 'bg-warn/10 border-warn/20',
+    danger: 'bg-danger/10 border-danger/20',
+    neutral: 'bg-surface-2 border-line',
+  };
+</script>
+
+{#if visible}
+  <div
+    role="status"
+    class="relative flex items-center gap-3 border-b px-4 py-3 text-sm {tones[tone]} {cls}"
+  >
+    <div class="flex flex-1 items-center justify-center gap-3 text-fg">
+      {@render children()}
+    </div>
+
+    {#if action}
+      <div class="shrink-0">{@render action()}</div>
+    {/if}
+
+    {#if dismissible}
+      <button
+        type="button"
+        onclick={dismiss}
+        aria-label="Dismiss"
+        class="shrink-0 text-faint transition-colors hover:text-fg"
+      >
+        <svg
+          width="16"
+          height="16"
+          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>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Tone = 'info' | 'success' | 'warn' | 'danger' | 'neutral';
+interface Props {
+    tone?: Tone;
+    dismissible?: boolean;
+    ondismiss?: () => void;
+    class?: string;
+    children: Snippet;
+    action?: Snippet;
+}
+declare const Banner: import("svelte").Component<Props, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/components/Breadcrumb.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  let {
+    items,
+    class: cls = '',
+  }: {
+    items: { label: string; href?: string }[];
+    class?: string;
+  } = $props();
+
+  function safeUrl(url: string | undefined): string | undefined {
+    return url && !/^(javascript|data):/i.test(url) ? url : undefined;
+  }
+</script>
+
+<nav aria-label="Breadcrumb" class="flex items-center gap-1 text-xs {cls}">
+  {#each items as item, i}
+    {#if i > 0}
+      <svg
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="text-faint shrink-0"
+        aria-hidden="true"
+      >
+        <path d="M9 18l6-6-6-6" />
+      </svg>
+    {/if}
+
+    {#if item.href && i < items.length - 1}
+      <a href={safeUrl(item.href)} class="text-muted hover:text-fg transition-colors truncate">
+        {item.label}
+      </a>
+    {:else}
+      <span
+        class="text-fg font-medium truncate"
+        aria-current={i === items.length - 1 ? 'page' : undefined}
+      >
+        {item.label}
+      </span>
+    {/if}
+  {/each}
+</nav>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    items: {
+        label: string;
+        href?: string;
+    }[];
+    class?: string;
+};
+declare const Breadcrumb: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/components/Button.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Spinner from './Spinner.svelte';
+
+  type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
+  type Size = 'sm' | 'md' | 'lg';
+
+  interface Props {
+    variant?: Variant;
+    size?: Size;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    href?: string;
+    full?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    children: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    loading = false,
+    type = 'button',
+    href = undefined,
+    full = false,
+    onclick,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const variants: Record<Variant, string> = {
+    primary: 'bg-brand text-ink hover:bg-brand-light active:bg-brand shadow-sm shadow-brand/20',
+    violet:
+      'bg-violet text-ink hover:brightness-110 active:brightness-100 shadow-sm shadow-violet/20',
+    secondary: 'bg-surface-2 text-fg border border-line hover:bg-line',
+    danger: 'bg-danger text-ink hover:brightness-110 active:brightness-100',
+    ghost: 'text-muted hover:bg-surface-2 hover:text-fg',
+    outline: 'border border-line text-fg hover:border-brand hover:text-brand',
+  };
+
+  const sizes: Record<Size, string> = {
+    sm: 'px-3 py-1.5 text-sm gap-1.5 rounded-md',
+    md: 'px-4 py-2 text-sm gap-2 rounded-lg',
+    lg: 'px-5 py-2.5 text-base gap-2 rounded-lg',
+  };
+
+  const spinnerSize = $derived(size === 'lg' ? 18 : 15);
+  const cls = $derived(
+    `inline-flex items-center justify-center font-medium transition-all duration-150 ` +
+      `disabled:opacity-50 disabled:cursor-not-allowed select-none ` +
+      `${full ? 'w-full' : ''} ${variants[variant]} ${sizes[size]}`,
+  );
+
+  // Reject javascript: and data: URIs - only allow standard schemes and relative URLs.
+  let safeHref = $derived(href && !/^(javascript|data):/i.test(href) ? href : undefined);
+</script>
+
+{#if href}
+  <a href={safeHref} class={cls} {...rest}>
+    {#if loading}<Spinner size={spinnerSize} />{/if}
+    {@render children()}
+  </a>
+{:else}
+  <button {type} disabled={disabled || loading} {onclick} class={cls} {...rest}>
+    {#if loading}<Spinner size={spinnerSize} />{/if}
+    {@render children()}
+  </button>
+{/if}

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+type Variant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'violet';
+type Size = 'sm' | 'md' | 'lg';
+interface Props {
+    variant?: Variant;
+    size?: Size;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    href?: string;
+    full?: boolean;
+    onclick?: (e: MouseEvent) => void;
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/ButtonGroup.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    children: Snippet;
+  }
+
+  let { orientation = 'horizontal', class: cls = '', children }: Props = $props();
+</script>
+
+{#if orientation === 'horizontal'}
+  <div
+    class="inline-flex
+      [&>*:not(:first-child)]:rounded-l-none
+      [&>*:not(:last-child)]:rounded-r-none
+      [&>*:not(:first-child)]:-ml-px
+      {cls}"
+  >
+    {@render children()}
+  </div>
+{:else}
+  <div
+    class="inline-flex flex-col
+      [&>*:not(:first-child)]:rounded-t-none
+      [&>*:not(:last-child)]:rounded-b-none
+      [&>*:not(:first-child)]:-mt-px
+      {cls}"
+  >
+    {@render children()}
+  </div>
+{/if}

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

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

package/dist/components/Card.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type Pad = 'none' | 'sm' | 'md' | 'lg';
+
+  interface Props {
+    title?: string;
+    description?: string;
+    pad?: Pad;
+    hover?: boolean;
+    class?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    onclick?: (e: MouseEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    children: Snippet;
+  }
+
+  let {
+    title = undefined,
+    description = undefined,
+    pad = 'md',
+    hover = false,
+    class: klass = '',
+    header,
+    footer,
+    onclick,
+    onkeydown,
+    children,
+  }: Props = $props();
+
+  const pads: Record<Pad, string> = {
+    none: '',
+    sm: 'p-4',
+    md: 'p-5',
+    lg: 'p-6',
+  };
+</script>
+
+<!-- tabindex is only set alongside role="button" (when onclick is provided),
+     so the element is interactive; the compiler can't narrow the dynamic role. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="bg-surface border border-line rounded-xl overflow-hidden transition-colors {hover
+    ? 'hover:border-line/0 hover:ring-1 hover:ring-brand/30'
+    : ''} {onclick ? 'cursor-pointer' : ''} {klass}"
+  role={onclick ? 'button' : undefined}
+  tabindex={onclick ? 0 : undefined}
+  {onclick}
+  {onkeydown}
+>
+  {#if header || title}
+    <div class="px-5 py-4 border-b border-line">
+      {#if header}
+        {@render header()}
+      {:else}
+        <h3 class="font-semibold text-fg">{title}</h3>
+        {#if description}<p class="text-sm text-muted mt-0.5">{description}</p>{/if}
+      {/if}
+    </div>
+  {/if}
+
+  <div class={pads[pad]}>
+    {@render children()}
+  </div>
+
+  {#if footer}
+    <div class="px-5 py-3 border-t border-line bg-surface-2/40">
+      {@render footer()}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+type Pad = 'none' | 'sm' | 'md' | 'lg';
+interface Props {
+    title?: string;
+    description?: string;
+    pad?: Pad;
+    hover?: boolean;
+    class?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    onclick?: (e: MouseEvent) => void;
+    onkeydown?: (e: KeyboardEvent) => void;
+    children: Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/Checkbox.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  let {
+    checked = $bindable(false),
+    label,
+    hint,
+    required = false,
+    disabled = false,
+    id,
+    name,
+    value,
+    onchange,
+  }: {
+    checked?: boolean;
+    label?: string;
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    value?: string;
+    onchange?: (checked: boolean) => void;
+  } = $props();
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    checked = e.currentTarget.checked;
+    onchange?.(checked);
+  }
+</script>
+
+<label
+  class="flex items-start gap-2.5 cursor-pointer select-none {disabled
+    ? 'opacity-50 cursor-not-allowed'
+    : ''}"
+>
+  <span class="relative flex items-center justify-center mt-0.5 shrink-0">
+    <input
+      type="checkbox"
+      {id}
+      {name}
+      {value}
+      {required}
+      {disabled}
+      {checked}
+      onchange={handleChange}
+      class="peer sr-only"
+    />
+    <span
+      class="w-4 h-4 rounded border transition-colors flex items-center justify-center
+        {checked
+        ? 'bg-brand border-brand'
+        : 'bg-surface-2 border-line peer-focus-visible:border-brand'}"
+    >
+      {#if checked}
+        <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>
+  {#if label || hint}
+    <span class="flex flex-col gap-0.5">
+      {#if label}
+        <span class="text-sm text-fg">
+          {label}
+          {#if required}<span class="text-danger ml-0.5" aria-label="required">*</span>{/if}
+        </span>
+      {/if}
+      {#if hint}
+        <span class="text-xs text-faint">{hint}</span>
+      {/if}
+    </span>
+  {/if}
+</label>

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

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