@runwisp/ui 0.4.0

package/src/lib/components/Select.svelte

@@ -0,0 +1,454 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module lang="ts">
+    import type { Component } from "svelte";
+
+    export interface SelectOption {
+        value: unknown;
+        label: string;
+        description?: string | undefined;
+        icon?: Component | undefined;
+        disabled?: boolean | undefined;
+        group?: string | undefined;
+        [key: string]: unknown;
+    }
+</script>
+
+<script lang="ts">
+    import { tick, onDestroy } from "svelte";
+    import { ChevronDown, Check, Search } from "@lucide/svelte";
+    import { fade } from "svelte/transition";
+    import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
+    import { generateUlid } from "@runwisp/common";
+
+    type SelectSize = "sm" | "md" | "lg";
+
+    interface Props {
+        value?: unknown;
+        options?: SelectOption[];
+        label?: string;
+        placeholder?: string;
+        disabled?: boolean;
+        searchable?: boolean;
+        size?: SelectSize;
+        error?: string;
+        hint?: string;
+        class?: string;
+        id?: string;
+        name?: string;
+        onchange?: (value: unknown) => void;
+    }
+
+    let {
+        value = $bindable(),
+        options = [],
+        label,
+        placeholder = "Select...",
+        disabled = false,
+        searchable = false,
+        size = "md",
+        error,
+        hint,
+        class: className = "",
+        id = `select-${generateUlid()}`,
+        name,
+        onchange,
+        onsearch, // New prop
+    }: Props & { onsearch?: (query: string) => void } = $props();
+
+    let isOpen = $state(false);
+    let searchQuery = $state("");
+    let triggerEl = $state<HTMLElement | null>(null);
+    let menuEl = $state<HTMLElement | null>(null);
+    let searchInputEl = $state<HTMLInputElement | null>(null);
+    let focusedIndex = $state(-1);
+    let cleanupFloating = $state<(() => void) | null>(null);
+
+    $effect(() => {
+        if (searchable && onsearch) {
+            onsearch(searchQuery);
+        }
+    });
+
+    const selectedOption = $derived(options.find((o) => o.value === value));
+
+    const filteredOptions = $derived.by(() => {
+        if (onsearch) return options; // If external search, trust options are already filtered/updated
+        if (!searchable || !searchQuery) return options;
+        const q = searchQuery.toLowerCase();
+        return options.filter(
+            (o) =>
+                o.label.toLowerCase().includes(q) ||
+                o.description?.toLowerCase().includes(q) ||
+                o.group?.toLowerCase().includes(q),
+        );
+    });
+
+    const groupedOptions = $derived.by(() => {
+        const groups: Record<string, SelectOption[]> = {};
+        const noGroup: SelectOption[] = [];
+
+        filteredOptions.forEach((opt) => {
+            const group = opt.group;
+            if (group) {
+                if (!groups[group]) groups[group] = [];
+                groups[group]!.push(opt);
+            } else {
+                noGroup.push(opt);
+            }
+        });
+
+        return { groups, noGroup };
+    });
+
+    const flattenedVisibleOptions = $derived.by(() => {
+        const list: SelectOption[] = [...groupedOptions.noGroup];
+        Object.values(groupedOptions.groups).forEach((g) => list.push(...g));
+        return list;
+    });
+
+    import { portal } from "../actions/portal.js";
+
+    async function setupFloating() {
+        if (!triggerEl || !menuEl) return;
+
+        menuEl.style.width = `${triggerEl.offsetWidth}px`;
+
+        cleanupFloating = autoUpdate(triggerEl, menuEl, () => {
+            if (!triggerEl || !menuEl) return;
+            void computePosition(triggerEl, menuEl, {
+                placement: "bottom-start",
+                middleware: [offset(6), flip(), shift({ padding: 10 })],
+            }).then(({ x, y }) => {
+                if (menuEl) {
+                    Object.assign(menuEl.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                        position: "absolute",
+                    });
+                }
+            });
+        });
+    }
+
+    function toggle() {
+        if (disabled) return;
+        isOpen = !isOpen;
+        if (isOpen) {
+            searchQuery = "";
+            focusedIndex = flattenedVisibleOptions.findIndex((o) => o.value === value);
+            if (focusedIndex === -1) focusedIndex = 0;
+
+            void tick().then(() => {
+                void setupFloating();
+                if (searchable && searchInputEl) {
+                    searchInputEl.focus();
+                }
+            });
+        } else {
+            cleanupFloating?.();
+            cleanupFloating = null;
+        }
+    }
+
+    function select(option: SelectOption) {
+        if (option.disabled) return;
+        value = option.value;
+        onchange?.(value);
+        isOpen = false;
+        cleanupFloating?.(); // Cleanup immediately on select
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (!isOpen) {
+            if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+                e.preventDefault();
+                toggle();
+            }
+            return;
+        }
+
+        switch (e.key) {
+            case "Escape":
+                isOpen = false;
+                cleanupFloating?.();
+                triggerEl?.focus();
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                focusedIndex = (focusedIndex + 1) % flattenedVisibleOptions.length;
+                scrollToOption(focusedIndex);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                focusedIndex =
+                    (focusedIndex - 1 + flattenedVisibleOptions.length) %
+                    flattenedVisibleOptions.length;
+                scrollToOption(focusedIndex);
+                break;
+            case "Enter":
+                e.preventDefault();
+                if (focusedIndex >= 0 && focusedIndex < flattenedVisibleOptions.length) {
+                    const selectedOpt = flattenedVisibleOptions[focusedIndex];
+                    if (selectedOpt) select(selectedOpt);
+                }
+                break;
+        }
+    }
+
+    function scrollToOption(index: number) {
+        const el = menuEl?.querySelector(`[data-index="${index}"]`);
+        if (!el || !menuEl) return;
+
+        const menuRect = menuEl.getBoundingClientRect();
+        const optionRect = el.getBoundingClientRect();
+
+        if (optionRect.bottom > menuRect.bottom) {
+            el.scrollIntoView({ block: "end", behavior: "smooth" });
+        } else if (optionRect.top < menuRect.top) {
+            el.scrollIntoView({ block: "start", behavior: "smooth" });
+        }
+    }
+
+    function handleOutsideClick(e: MouseEvent) {
+        if (
+            isOpen &&
+            triggerEl &&
+            !triggerEl.contains(e.target as Node) &&
+            menuEl &&
+            !menuEl.contains(e.target as Node)
+        ) {
+            isOpen = false;
+            cleanupFloating?.();
+        }
+    }
+
+    onDestroy(() => {
+        cleanupFloating?.();
+    });
+
+    const sizeClasses = {
+        sm: "px-2.5 py-1.5 text-xs",
+        md: "px-3.5 py-2 text-sm",
+        lg: "px-4 py-2.5 text-base",
+    };
+
+    const triggerBase = `
+        relative w-full text-left cursor-pointer
+        rounded-lg border bg-surface-raised
+        transition-all duration-normal ease-out
+        flex items-center justify-between
+        focus:outline-none focus:ring-4 focus:ring-ring/10 focus:border-ring
+    `;
+
+    const borderClass = $derived(
+        error
+            ? "border-danger-300 ring-danger-500/20"
+            : isOpen
+              ? "border-ring ring-4 ring-ring/10"
+              : "border-outline hover:border-outline-hover shadow-sm hover:shadow-md",
+    );
+</script>
+
+<svelte:window onclick={handleOutsideClick} />
+
+<div class="relative w-full {className}">
+    {#if label}
+        <label for={id} class="mb-1.5 block text-sm font-medium text-on-surface-muted">
+            {label}
+        </label>
+    {/if}
+
+    <button
+        type="button"
+        bind:this={triggerEl}
+        {id}
+        {disabled}
+        onclick={toggle}
+        onkeydown={handleKeydown}
+        class="
+            {triggerBase}
+            {sizeClasses[size]}
+            {borderClass}
+            {disabled
+            ? 'cursor-not-allowed bg-surface-sunken text-on-surface-faint shadow-none'
+            : ''}
+        "
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+    >
+        <div class="flex items-center gap-2 truncate pr-6">
+            {#if selectedOption?.icon}
+                <div class="text-on-surface-muted">
+                    <selectedOption.icon size={size === "sm" ? 14 : 18} />
+                </div>
+            {/if}
+            {#if selectedOption}
+                <span class="truncate font-medium text-on-surface">
+                    {selectedOption.label}
+                </span>
+            {:else}
+                <span class="truncate text-on-surface-faint">{placeholder}</span>
+            {/if}
+        </div>
+
+        <div
+            class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-on-surface-faint"
+        >
+            <ChevronDown
+                size={16}
+                class="transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
+            />
+        </div>
+    </button>
+
+    <!-- Hidden input for form submission if needed -->
+    {#if name}
+        <input type="hidden" {name} {value} />
+    {/if}
+
+    <!-- Dropdown Menu -->
+    {#if isOpen}
+        <div
+            use:portal
+            bind:this={menuEl}
+            transition:fade={{ duration: 100 }}
+            class="z-[9999] min-w-[200px]"
+        >
+            <div
+                class="
+                overflow-hidden rounded-xl border border-outline bg-surface-overlay shadow-xl
+                ring-1 shadow-on-surface/5 ring-black/5
+            "
+            >
+                {#if searchable}
+                    <div class="border-b border-outline-faint bg-surface-sunken/50 p-2">
+                        <div class="relative">
+                            <Search
+                                size={14}
+                                class="absolute top-1/2 left-2.5 -translate-y-1/2 text-on-surface-faint"
+                            />
+                            <input
+                                bind:this={searchInputEl}
+                                bind:value={searchQuery}
+                                onkeydown={handleKeydown}
+                                placeholder="Search..."
+                                class="
+                                    w-full rounded-lg border border-outline bg-surface-raised py-1.5 pr-3 pl-8 text-xs
+                                    text-on-surface placeholder:text-on-surface-faint focus:border-ring focus:ring-1
+                                    focus:ring-ring focus:outline-none
+                                "
+                            />
+                        </div>
+                    </div>
+                {/if}
+
+                <div
+                    class="scrollbar-thin scrollbar-thumb-mist-200 scrollbar-track-transparent max-h-60 overflow-x-hidden overflow-y-auto p-1"
+                >
+                    {#if flattenedVisibleOptions.length === 0}
+                        <div class="px-4 py-8 text-center text-sm text-on-surface-muted">
+                            No results found
+                        </div>
+                    {/if}
+
+                    {#each groupedOptions.noGroup as option (option.value)}
+                        {@const index = flattenedVisibleOptions.indexOf(option)}
+                        {@render OptionItem({
+                            option,
+                            active: index === focusedIndex,
+                            selected: option.value === value,
+                            onclick: () => select(option),
+                            onsemiactive: () => (focusedIndex = index),
+                            "data-index": index,
+                        })}
+                    {/each}
+
+                    {#each Object.entries(groupedOptions.groups) as [groupName, groupOptions] (groupName)}
+                        <div
+                            class="sticky top-0 z-10 mt-1 bg-surface-sunken/50 px-2 py-1.5 text-xs font-semibold tracking-wider text-on-surface-faint uppercase backdrop-blur-sm first:mt-0"
+                        >
+                            {groupName}
+                        </div>
+                        {#each groupOptions as option (option.value)}
+                            {@const index = flattenedVisibleOptions.indexOf(option)}
+                            {@render OptionItem({
+                                option,
+                                active: index === focusedIndex,
+                                selected: option.value === value,
+                                onclick: () => select(option),
+                                onsemiactive: () => (focusedIndex = index),
+                                "data-index": index,
+                            })}
+                        {/each}
+                    {/each}
+                </div>
+            </div>
+        </div>
+    {/if}
+
+    {#if error}
+        <p class="animate-in slide-in-from-top-1 fade-in mt-1.5 text-sm text-danger-600">
+            {error}
+        </p>
+    {:else if hint}
+        <p class="mt-1.5 text-xs text-on-surface-muted">
+            {hint}
+        </p>
+    {/if}
+</div>
+
+<!-- Helper Component for items -->
+{#snippet OptionItem({
+    option,
+    active,
+    selected,
+    onclick,
+    onsemiactive,
+    ...rest
+}: {
+    option: SelectOption;
+    active: boolean;
+    selected: boolean;
+    onclick: () => void;
+    onsemiactive: () => void;
+    [key: string]: unknown;
+})}
+    <button
+        type="button"
+        {onclick}
+        onmouseenter={onsemiactive}
+        class="
+            flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-left transition-colors
+            {active ? 'bg-surface-sunken' : 'hover:bg-surface-sunken/50'}
+            {selected ? 'bg-primary-soft/50 font-medium text-on-surface' : 'text-on-surface-muted'}
+            {option.disabled
+            ? 'pointer-events-none cursor-not-allowed opacity-50'
+            : 'cursor-pointer'}
+        "
+        {...rest}
+    >
+        {#if option.icon}
+            <div class="mt-0.5 shrink-0 {selected ? 'text-primary' : 'text-on-surface-faint'}">
+                <option.icon size={16} />
+            </div>
+        {/if}
+
+        <div class="min-w-0 flex-1">
+            <div class="flex items-center justify-between gap-2">
+                <span class="block truncate text-sm font-medium">{option.label}</span>
+                {#if selected}
+                    <Check size={14} class="shrink-0 text-primary" />
+                {/if}
+            </div>
+            {#if option.description}
+                <div
+                    class="mt-0.5 line-clamp-2 text-xs leading-normal text-wrap text-on-surface-muted"
+                >
+                    {option.description}
+                </div>
+            {/if}
+        </div>
+    </button>
+{/snippet}

package/src/lib/components/Separator.svelte

@@ -0,0 +1,30 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    type SeparatorOrientation = "horizontal" | "vertical";
+
+    interface Props {
+        orientation?: SeparatorOrientation;
+        label?: string;
+        class?: string;
+    }
+
+    let { orientation = "horizontal", label, class: className = "" }: Props = $props();
+</script>
+
+{#if orientation === "vertical"}
+    <div
+        role="separator"
+        aria-orientation="vertical"
+        class="inline-block w-px self-stretch bg-outline {className}"
+    ></div>
+{:else if label}
+    <div role="separator" class="flex items-center gap-3 {className}">
+        <div class="h-px flex-1 bg-outline"></div>
+        <span class="text-xs font-medium text-on-surface-faint select-none">{label}</span>
+        <div class="h-px flex-1 bg-outline"></div>
+    </div>
+{:else}
+    <hr class="border-outline {className}" />
+{/if}

package/src/lib/components/Skeleton.svelte

@@ -0,0 +1,75 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    type SkeletonShape = "line" | "circle" | "rect";
+
+    interface Props {
+        /** Shape variant */
+        shape?: SkeletonShape;
+        /** Number of skeleton rows (only for shape="line") */
+        rows?: number;
+        /** Show a header skeleton block (only for shape="line") */
+        header?: boolean;
+        /** Width (for circle/rect) */
+        width?: string;
+        /** Height (for circle/rect) */
+        height?: string;
+        class?: string;
+    }
+
+    let {
+        shape = "line",
+        rows = 3,
+        header = true,
+        width,
+        height,
+        class: className = "",
+    }: Props = $props();
+</script>
+
+{#if shape === "circle"}
+    <div
+        class="animate-pulse rounded-full bg-outline {className}"
+        style="width: {width ?? '2.5rem'}; height: {height ?? width ?? '2.5rem'}"
+        role="status"
+        aria-label="Loading"
+    >
+        <span class="sr-only">Loading...</span>
+    </div>
+{:else if shape === "rect"}
+    <div
+        class="animate-pulse rounded-lg bg-outline {className}"
+        style="width: {width ?? '100%'}; height: {height ?? '2rem'}"
+        role="status"
+        aria-label="Loading"
+    >
+        <span class="sr-only">Loading...</span>
+    </div>
+{:else}
+    <div class="animate-pulse space-y-6 p-6 {className}" role="status" aria-label="Loading content">
+        {#if header}
+            <div class="space-y-3">
+                <div class="h-7 w-48 rounded-lg bg-outline"></div>
+                <div class="h-4 w-72 rounded bg-outline-faint"></div>
+            </div>
+        {/if}
+
+        <div class="space-y-4">
+            {#each Array.from({ length: rows }, (_, i) => i) as i (i)}
+                <div class="space-y-2">
+                    <div
+                        class="h-4 rounded bg-outline-faint"
+                        style="width: {70 + ((i * 17) % 30)}%"
+                    ></div>
+                    <div
+                        class="h-4 rounded bg-surface-sunken"
+                        style="width: {40 + ((i * 23) % 40)}%"
+                    ></div>
+                </div>
+            {/each}
+        </div>
+
+        <span class="sr-only">Loading...</span>
+    </div>
+{/if}

package/src/lib/components/Sparkline.svelte

@@ -0,0 +1,58 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    interface Props {
+        data: number[];
+        color?: string;
+        fillColor?: string;
+        height?: number;
+        class?: string;
+    }
+
+    let {
+        data,
+        color = "#6366f1",
+        fillColor,
+        height = 40,
+        class: className = "",
+    }: Props = $props();
+
+    const viewBoxW = 200;
+
+    let pathD = $derived.by(() => {
+        if (data.length < 2) return "";
+
+        const max = 100;
+        const step = viewBoxW / (data.length - 1);
+
+        return data
+            .map((v: number, i: number) => {
+                const x = i * step;
+                const y = height - (v / max) * height;
+                return `${i === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`;
+            })
+            .join(" ");
+    });
+
+    let fillD = $derived.by(() => {
+        if (data.length < 2 || !pathD) return "";
+        const step = viewBoxW / (data.length - 1);
+        const lastX = (data.length - 1) * step;
+        return `${pathD} L${lastX.toFixed(1)},${height} L0,${height} Z`;
+    });
+
+    let resolvedFill = $derived(fillColor ?? color + "18");
+</script>
+
+<svg
+    viewBox="0 0 {viewBoxW} {height}"
+    preserveAspectRatio="none"
+    class="w-full {className}"
+    style="height: {height}px"
+>
+    {#if data.length >= 2}
+        <path d={fillD} fill={resolvedFill} />
+        <path d={pathD} fill="none" stroke={color} stroke-width="1.5" stroke-linejoin="round" />
+    {/if}
+</svg>

package/src/lib/components/Spinner.svelte

@@ -0,0 +1,44 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    type SpinnerSize = "xs" | "sm" | "md" | "lg";
+
+    interface Props {
+        size?: SpinnerSize;
+        color?: string;
+        label?: string;
+        class?: string;
+    }
+
+    let {
+        size = "md",
+        color = "currentColor",
+        label = "Loading",
+        class: className = "",
+    }: Props = $props();
+
+    const sizeClasses: Record<SpinnerSize, string> = {
+        xs: "h-3 w-3",
+        sm: "h-4 w-4",
+        md: "h-6 w-6",
+        lg: "h-8 w-8",
+    };
+</script>
+
+<div role="status" class="inline-flex {className}">
+    <svg
+        class="animate-spin {sizeClasses[size]}"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke={color} stroke-width="4"></circle>
+        <path
+            class="opacity-75"
+            fill={color}
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+    </svg>
+    <span class="sr-only">{label}</span>
+</div>