@runwisp/ui 0.4.0

package/src/lib/components/Pagination.svelte

@@ -0,0 +1,96 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import Button from "./Button.svelte";
+    import { ChevronDown } from "@lucide/svelte";
+
+    interface Props {
+        page: number;
+        pageSize: number;
+        totalItems: number;
+        pageSizeOptions?: number[] | undefined;
+        onPageChange?: ((page: number) => void) | undefined;
+        onPageSizeChange?: ((pageSize: number) => void) | undefined;
+        class?: string | undefined;
+    }
+
+    let {
+        page,
+        pageSize,
+        totalItems,
+        pageSizeOptions = [10, 20, 50, 100],
+        onPageChange,
+        onPageSizeChange,
+        class: className = "",
+    }: Props = $props();
+
+    const totalPages = $derived(Math.max(1, Math.ceil(totalItems / Math.max(1, pageSize))));
+    const safePage = $derived(Math.min(Math.max(1, page), totalPages));
+
+    const start = $derived(totalItems === 0 ? 0 : (safePage - 1) * pageSize + 1);
+    const end = $derived(totalItems === 0 ? 0 : Math.min(totalItems, safePage * pageSize));
+
+    function goTo(nextPage: number) {
+        const clamped = Math.min(Math.max(1, nextPage), totalPages);
+        onPageChange?.(clamped);
+    }
+
+    function handlePageSizeChange(e: Event) {
+        const newSize = Number((e.target as HTMLSelectElement).value);
+        onPageSizeChange?.(newSize);
+    }
+</script>
+
+<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between {className}">
+    <div class="flex items-center gap-4 text-sm text-on-surface-muted">
+        {#if totalItems === 0}
+            <span>No results</span>
+        {:else}
+            <span>Showing {start}–{end} of {totalItems}</span>
+        {/if}
+
+        <div class="flex items-center gap-2">
+            <span class="text-on-surface-muted">Rows per page</span>
+            <div class="relative">
+                <select
+                    value={pageSize}
+                    onchange={handlePageSizeChange}
+                    class="
+                        appearance-none rounded-lg border border-outline bg-surface-raised py-1 pr-7 pl-2 text-sm
+                        font-medium text-on-surface-muted shadow-sm focus:border-ring focus:ring-1 focus:ring-ring focus:outline-none
+                    "
+                >
+                    {#each pageSizeOptions as size (size)}
+                        <option value={size}>{size}</option>
+                    {/each}
+                </select>
+                <div
+                    class="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-on-surface-faint"
+                >
+                    <ChevronDown size={14} />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="flex items-center gap-2">
+        <Button
+            variant="secondary"
+            size="xs"
+            disabled={safePage <= 1}
+            onclick={() => goTo(safePage - 1)}>Prev</Button
+        >
+        <div class="min-w-[4rem] text-center text-xs text-on-surface-muted">
+            Page {safePage} of {totalPages}
+        </div>
+        <Button
+            variant="secondary"
+            size="xs"
+            disabled={safePage >= totalPages}
+            onclick={() => goTo(safePage + 1)}
+        >
+            Next
+        </Button>
+    </div>
+</div>

package/src/lib/components/Popover.svelte

@@ -0,0 +1,130 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { Placement } from "@floating-ui/dom";
+    import { tick, onDestroy } from "svelte";
+    import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
+    import { scale } from "svelte/transition";
+    import { quintOut } from "svelte/easing";
+    import { portal } from "../actions/portal.js";
+
+    interface Props {
+        open?: boolean;
+        placement?: Placement;
+        trigger?: Snippet;
+        children?: Snippet;
+        class?: string;
+    }
+
+    let {
+        open = $bindable(false),
+        placement = "bottom",
+        trigger,
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    let triggerEl = $state<HTMLElement | null>(null);
+    let contentEl = $state<HTMLElement | null>(null);
+    let cleanupFloating = $state<(() => void) | null>(null);
+
+    async function setupFloating() {
+        if (!triggerEl || !contentEl) return;
+
+        cleanupFloating = autoUpdate(triggerEl, contentEl, () => {
+            if (!triggerEl || !contentEl) return;
+
+            void computePosition(triggerEl, contentEl, {
+                placement,
+                middleware: [offset(8), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                if (contentEl) {
+                    Object.assign(contentEl.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                        position: "absolute",
+                    });
+                }
+            });
+        });
+    }
+
+    function toggle() {
+        open = !open;
+        if (open) {
+            void tick().then(() => {
+                void setupFloating();
+            });
+        } else {
+            cleanupFloating?.();
+            cleanupFloating = null;
+        }
+    }
+
+    function handleOutsideClick(e: MouseEvent) {
+        const target = e.target as HTMLElement;
+        if (triggerEl?.contains(target)) return;
+        if (contentEl?.contains(target)) return;
+        if (open) {
+            open = false;
+            cleanupFloating?.();
+            cleanupFloating = null;
+        }
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+        if (e.key === "Escape" && open) {
+            open = false;
+            cleanupFloating?.();
+            cleanupFloating = null;
+        }
+    }
+
+    onDestroy(() => {
+        cleanupFloating?.();
+    });
+</script>
+
+<svelte:window onclick={handleOutsideClick} onkeydown={handleKeyDown} />
+
+<div class="inline-block {className}">
+    <div
+        bind:this={triggerEl}
+        role="button"
+        tabindex="0"
+        onclick={(e) => {
+            e.stopPropagation();
+            toggle();
+        }}
+        onkeydown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                toggle();
+            }
+        }}
+    >
+        {#if trigger}
+            {@render trigger()}
+        {/if}
+    </div>
+
+    {#if open}
+        <div
+            use:portal
+            bind:this={contentEl}
+            transition:scale={{ duration: 150, start: 0.95, easing: quintOut }}
+            class="
+                z-[9999]
+                rounded-xl
+                border border-outline bg-surface-overlay p-4 shadow-xl shadow-on-surface/5
+            "
+        >
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+    {/if}
+</div>

package/src/lib/components/Progress.svelte

@@ -0,0 +1,68 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    type ProgressVariant = "default" | "success" | "warning" | "danger";
+    type ProgressSize = "sm" | "md" | "lg";
+
+    interface Props {
+        value: number;
+        max?: number;
+        variant?: ProgressVariant;
+        size?: ProgressSize;
+        showLabel?: boolean;
+        label?: string;
+        class?: string;
+    }
+
+    let {
+        value,
+        max = 100,
+        variant = "default",
+        size = "md",
+        showLabel = false,
+        label,
+        class: className = "",
+    }: Props = $props();
+
+    const percentage = $derived(Math.min(Math.max((value / max) * 100, 0), 100));
+
+    const variantClasses: Record<ProgressVariant, string> = {
+        default: "bg-wisp-500",
+        success: "bg-success-500",
+        warning: "bg-warning-500",
+        danger: "bg-danger-500",
+    };
+
+    const sizeClasses: Record<ProgressSize, string> = {
+        sm: "h-1",
+        md: "h-2",
+        lg: "h-3",
+    };
+</script>
+
+<div class={className}>
+    {#if showLabel || label}
+        <div class="mb-1.5 flex items-center justify-between">
+            {#if label}
+                <span class="text-sm font-medium text-on-surface-muted">{label}</span>
+            {/if}
+            {#if showLabel}
+                <span class="text-sm text-on-surface-muted">{Math.round(percentage)}%</span>
+            {/if}
+        </div>
+    {/if}
+
+    <div class="w-full {sizeClasses[size]} overflow-hidden rounded-full bg-outline">
+        <div
+            class="{sizeClasses[size]} {variantClasses[
+                variant
+            ]} rounded-full transition-all duration-300"
+            style="width: {percentage}%"
+            role="progressbar"
+            aria-valuenow={value}
+            aria-valuemin={0}
+            aria-valuemax={max}
+        ></div>
+    </div>
+</div>

package/src/lib/components/Prose.svelte

@@ -0,0 +1,43 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type ProseSize = "sm" | "base" | "lg";
+
+    interface Props {
+        size?: ProseSize;
+        children: Snippet;
+        class?: string;
+    }
+
+    let { size = "base", children, class: className = "" }: Props = $props();
+
+    const sizeClasses: Record<ProseSize, string> = {
+        sm: "prose-sm",
+        base: "prose-base",
+        lg: "prose-lg",
+    };
+</script>
+
+<div
+    class="
+        prose {sizeClasses[size]}
+        max-w-none
+        prose-headings:text-on-surface
+        prose-p:text-on-surface-muted prose-a:text-primary prose-a:no-underline
+        hover:prose-a:underline
+        prose-blockquote:border-outline prose-blockquote:text-on-surface-muted prose-strong:text-on-surface prose-code:rounded prose-code:bg-surface-sunken
+        prose-code:px-1 prose-code:py-0.5 prose-code:text-on-surface
+        prose-pre:border prose-pre:border-outline
+        prose-pre:bg-surface-sunken
+        prose-li:text-on-surface-muted
+        prose-th:text-on-surface
+        prose-td:text-on-surface-muted
+        prose-hr:border-outline-faint
+        {className}
+    "
+>
+    {@render children()}
+</div>

package/src/lib/components/Radio.svelte

@@ -0,0 +1,82 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    type RadioSize = "sm" | "md" | "lg";
+
+    interface Props {
+        value: string;
+        groupValue?: string;
+        name: string;
+        label: string;
+        description?: string;
+        disabled?: boolean;
+        size?: RadioSize;
+        class?: string;
+    }
+
+    let {
+        value,
+        groupValue = $bindable(""),
+        name,
+        label,
+        description,
+        disabled = false,
+        size = "md",
+        class: className = "",
+    }: Props = $props();
+
+    const sizeClasses: Record<RadioSize, { radio: string; dot: string; text: string }> = {
+        sm: { radio: "h-4 w-4", dot: "h-1.5 w-1.5", text: "text-sm" },
+        md: { radio: "h-5 w-5", dot: "h-2 w-2", text: "text-sm" },
+        lg: { radio: "h-6 w-6", dot: "h-2.5 w-2.5", text: "text-base" },
+    };
+
+    const isChecked = $derived(groupValue === value);
+</script>
+
+<label
+    class="inline-flex items-start gap-3 {disabled
+        ? 'cursor-not-allowed opacity-50'
+        : 'cursor-pointer'} {className}"
+>
+    <div class="relative flex shrink-0 items-center justify-center">
+        <input
+            type="radio"
+            {name}
+            {value}
+            {disabled}
+            checked={isChecked}
+            onchange={() => (groupValue = value)}
+            class="
+                peer {sizeClasses[size].radio} duration-fast
+                cursor-pointer appearance-none rounded-full
+                border-2 border-outline-hover
+                bg-surface-raised transition-colors
+                checked:border-primary checked:bg-primary
+                hover:border-on-surface-faint
+                checked:hover:border-primary-hover checked:hover:bg-primary-hover
+                focus:ring-2 focus:ring-ring/20
+                focus:ring-offset-0 focus:outline-none
+                disabled:cursor-not-allowed disabled:hover:border-outline-hover
+                disabled:checked:hover:bg-primary
+            "
+        />
+        <div
+            class="duration-fast pointer-events-none absolute rounded-full bg-on-primary opacity-0 transition-opacity peer-checked:opacity-100 {sizeClasses[
+                size
+            ].dot}"
+        ></div>
+    </div>
+
+    {#if label || description}
+        <div class="flex flex-col gap-0.5">
+            {#if label}
+                <span class="{sizeClasses[size].text} font-medium text-on-surface">{label}</span>
+            {/if}
+            {#if description}
+                <span class="text-sm text-on-surface-muted">{description}</span>
+            {/if}
+        </div>
+    {/if}
+</label>

package/src/lib/components/RadioGroup.svelte

@@ -0,0 +1,53 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type Orientation = "horizontal" | "vertical";
+
+    interface Props {
+        value?: string;
+        name: string;
+        label?: string;
+        error?: string;
+        hint?: string;
+        orientation?: Orientation;
+        children: Snippet;
+        class?: string;
+    }
+
+    let {
+        value = $bindable(""),
+        name: _name,
+        label,
+        error,
+        hint,
+        orientation = "vertical",
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    const orientationClasses: Record<Orientation, string> = {
+        horizontal: "flex flex-row flex-wrap gap-x-6 gap-y-3",
+        vertical: "flex flex-col gap-3",
+    };
+</script>
+
+<fieldset class="space-y-3 {className}" role="radiogroup" aria-label={label}>
+    {#if label}
+        <legend class="text-sm font-medium text-on-surface-muted">{label}</legend>
+    {/if}
+
+    <div class={orientationClasses[orientation]}>
+        {@render children()}
+    </div>
+
+    {#if error}
+        <p class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-600 duration-200">
+            {error}
+        </p>
+    {:else if hint}
+        <p class="text-sm text-on-surface-muted">{hint}</p>
+    {/if}
+</fieldset>