@runwisp/ui 0.4.0

package/src/lib/components/AccordionItem.svelte

@@ -0,0 +1,74 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { ChevronDown } from "@lucide/svelte";
+
+    interface Props {
+        title?: Snippet | string;
+        children?: Snippet;
+        open?: boolean;
+        disabled?: boolean;
+        class?: string;
+    }
+
+    let {
+        title,
+        children,
+        open = $bindable(false),
+        disabled = false,
+        class: className = "",
+    }: Props = $props();
+
+    function toggle() {
+        if (!disabled) {
+            open = !open;
+        }
+    }
+
+    const isSnippet = $derived(typeof title === "function");
+</script>
+
+<div class="group {className}">
+    <button
+        type="button"
+        onclick={toggle}
+        {disabled}
+        class="
+            flex w-full items-center justify-between gap-3 py-4 text-left text-sm font-medium
+            text-on-surface transition-colors
+            hover:text-on-surface-muted
+            disabled:cursor-not-allowed disabled:opacity-50
+        "
+        aria-expanded={open}
+    >
+        <span class="flex-1">
+            {#if isSnippet && title}
+                {@render (title as Snippet)()}
+            {:else if title}
+                {title}
+            {/if}
+        </span>
+        <ChevronDown
+            size={16}
+            class="shrink-0 text-on-surface-faint transition-transform duration-200 {open
+                ? 'rotate-180'
+                : ''}"
+        />
+    </button>
+
+    <div
+        class="grid transition-[grid-template-rows] duration-200 ease-out {open
+            ? 'grid-rows-[1fr]'
+            : 'grid-rows-[0fr]'}"
+    >
+        <div class="overflow-hidden">
+            {#if children}
+                <div class="pb-4 text-sm text-on-surface-muted">
+                    {@render children()}
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>

package/src/lib/components/Alert.svelte

@@ -0,0 +1,107 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { Info, CircleCheckBig, TriangleAlert, CircleX, X } from "@lucide/svelte";
+
+    type AlertVariant = "info" | "success" | "warning" | "danger";
+
+    interface Props {
+        variant?: AlertVariant;
+        title?: string;
+        dismissible?: boolean;
+        onDismiss?: () => void;
+        icon?: Snippet;
+        actions?: Snippet;
+        children?: Snippet;
+        class?: string;
+    }
+
+    let {
+        variant = "info",
+        title,
+        dismissible = false,
+        onDismiss,
+        icon,
+        actions,
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    const variantConfig: Record<
+        AlertVariant,
+        { bg: string; border: string; icon: typeof Info; iconColor: string }
+    > = {
+        info: {
+            bg: "bg-info-soft",
+            border: "border-aurora-200",
+            icon: Info,
+            iconColor: "text-info",
+        },
+        success: {
+            bg: "bg-success-soft",
+            border: "border-success-200",
+            icon: CircleCheckBig,
+            iconColor: "text-success-surface",
+        },
+        warning: {
+            bg: "bg-warning-soft",
+            border: "border-warning-200",
+            icon: TriangleAlert,
+            iconColor: "text-warning-surface",
+        },
+        danger: {
+            bg: "bg-danger-soft",
+            border: "border-danger-200",
+            icon: CircleX,
+            iconColor: "text-danger-surface",
+        },
+    };
+
+    const config = $derived(variantConfig[variant]);
+</script>
+
+<div
+    class="
+		flex gap-3 rounded-xl border p-4
+		{config.bg} {config.border}
+		{className}
+	"
+    role="alert"
+>
+    <div class="shrink-0">
+        {#if icon}
+            {@render icon()}
+        {:else}
+            {@const IconComponent = config.icon}
+            <IconComponent size={20} class={config.iconColor} />
+        {/if}
+    </div>
+
+    <div class="min-w-0 flex-1">
+        {#if title}
+            <h4 class="mb-1 text-sm font-semibold text-on-surface">{title}</h4>
+        {/if}
+        {#if children}
+            <div class="text-sm text-on-surface-muted">
+                {@render children()}
+            </div>
+        {/if}
+        {#if actions}
+            <div class="mt-3">
+                {@render actions()}
+            </div>
+        {/if}
+    </div>
+
+    {#if dismissible}
+        <button
+            onclick={onDismiss}
+            class="shrink-0 rounded-lg p-1 text-on-surface-faint transition-colors hover:bg-surface-raised/50 hover:text-on-surface-muted"
+            aria-label="Dismiss"
+        >
+            <X size={16} />
+        </button>
+    {/if}
+</div>

package/src/lib/components/AlertDialog.svelte

@@ -0,0 +1,63 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import Modal from "./Modal.svelte";
+    import Button from "./Button.svelte";
+
+    type AlertVariant = "danger" | "warning" | "info";
+
+    interface Props {
+        open?: boolean;
+        title: string;
+        description?: string | undefined;
+        confirmLabel?: string;
+        cancelLabel?: string;
+        variant?: AlertVariant;
+        onConfirm?: () => void;
+        onCancel?: () => void;
+        loading?: boolean;
+        class?: string;
+    }
+
+    let {
+        open = $bindable(false),
+        title,
+        description,
+        confirmLabel = "Confirm",
+        cancelLabel = "Cancel",
+        variant = "danger",
+        onConfirm,
+        onCancel,
+        loading = false,
+        class: className = "",
+    }: Props = $props();
+
+    const confirmVariantMap: Record<AlertVariant, "danger" | "primary"> = {
+        danger: "danger",
+        warning: "primary",
+        info: "primary",
+    };
+
+    function handleCancel() {
+        open = false;
+        onCancel?.();
+    }
+
+    function handleConfirm() {
+        onConfirm?.();
+    }
+</script>
+
+<Modal bind:open {title} {description} size="sm" closable onClose={handleCancel} class={className}>
+    {#snippet footer()}
+        <div class="flex items-center justify-end gap-3">
+            <Button variant="secondary" onclick={handleCancel} disabled={loading}>
+                {cancelLabel}
+            </Button>
+            <Button variant={confirmVariantMap[variant]} onclick={handleConfirm} {loading}>
+                {confirmLabel}
+            </Button>
+        </div>
+    {/snippet}
+</Modal>

package/src/lib/components/Avatar.svelte

@@ -0,0 +1,88 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    interface Props {
+        name?: string;
+        src?: string;
+        size?: "xs" | "sm" | "md" | "lg" | "xl";
+        status?: "online" | "offline" | "busy" | "away";
+        class?: string;
+    }
+
+    let { name = "", src, size = "md", status, class: className = "" }: Props = $props();
+
+    const initials = $derived(
+        name
+            .split(" ")
+            .map((n) => n[0])
+            .slice(0, 2)
+            .join("")
+            .toUpperCase(),
+    );
+
+    const sizeClasses: Record<string, string> = {
+        xs: "h-6 w-6 text-xs",
+        sm: "h-8 w-8 text-xs",
+        md: "h-10 w-10 text-sm",
+        lg: "h-12 w-12 text-base",
+        xl: "h-16 w-16 text-lg",
+    };
+
+    const statusClasses: Record<string, string> = {
+        online: "bg-success-500",
+        offline: "bg-on-surface-faint",
+        busy: "bg-danger-500",
+        away: "bg-warning-500",
+    };
+
+    const statusSizes: Record<string, string> = {
+        xs: "h-1.5 w-1.5",
+        sm: "h-2 w-2",
+        md: "h-2.5 w-2.5",
+        lg: "h-3 w-3",
+        xl: "h-4 w-4",
+    };
+
+    // Generate a consistent color based on name
+    const colors = [
+        "bg-wisp-500",
+        "bg-aurora-500",
+        "bg-success-500",
+        "bg-warning-500",
+        "bg-danger-500",
+    ];
+
+    const colorIndex = $derived(
+        name.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % colors.length,
+    );
+</script>
+
+<div class="relative inline-flex {className}">
+    {#if src}
+        <img {src} alt={name} class="{sizeClasses[size]} rounded-full object-cover shadow-sm" />
+    {:else}
+        <div
+            class="
+				{sizeClasses[size]}
+				{colors[colorIndex]}
+				flex
+				items-center justify-center rounded-full
+				font-medium text-white shadow-sm
+			"
+        >
+            {initials || "?"}
+        </div>
+    {/if}
+
+    {#if status}
+        <span
+            class="
+				absolute right-0 bottom-0
+				{statusSizes[size]}
+				{statusClasses[status]}
+				rounded-full ring-2 ring-surface-raised
+			"
+        ></span>
+    {/if}
+</div>

package/src/lib/components/Badge.svelte

@@ -0,0 +1,131 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type BadgeVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";
+    type BadgeSize = "sm" | "md" | "lg";
+
+    interface Props {
+        variant?: BadgeVariant;
+        size?: BadgeSize;
+        dot?: boolean;
+        loading?: boolean;
+        outline?: boolean;
+        children?: Snippet;
+        class?: string;
+    }
+
+    let {
+        variant = "default",
+        size = "md",
+        dot = false,
+        loading = false,
+        outline = false,
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    const baseClasses = `
+		inline-flex items-center gap-1.5
+		font-medium rounded-full
+		whitespace-nowrap
+	`;
+
+    const variantClasses: Record<BadgeVariant, { solid: string; outline: string }> = {
+        default: {
+            solid: "bg-mist-100 text-mist-700",
+            outline: "bg-transparent border border-mist-300 text-mist-700",
+        },
+        primary: {
+            solid: "bg-wisp-100 text-wisp-700",
+            outline: "bg-transparent border border-wisp-300 text-wisp-700",
+        },
+        success: {
+            solid: "bg-success-100 text-success-700",
+            outline: "bg-transparent border border-success-300 text-success-700",
+        },
+        warning: {
+            solid: "bg-warning-100 text-warning-700",
+            outline: "bg-transparent border border-warning-400 text-warning-700",
+        },
+        danger: {
+            solid: "bg-danger-100 text-danger-700",
+            outline: "bg-transparent border border-danger-300 text-danger-700",
+        },
+        info: {
+            solid: "bg-aurora-100 text-aurora-700",
+            outline: "bg-transparent border border-aurora-300 text-aurora-700",
+        },
+    };
+
+    const sizeClasses: Record<BadgeSize, string> = {
+        sm: "text-2xs px-1.5 py-0.5",
+        md: "text-xs px-2 py-0.5",
+        lg: "text-sm px-2.5 py-1",
+    };
+
+    const dotColors: Record<BadgeVariant, string> = {
+        default: "bg-mist-500",
+        primary: "bg-wisp-500",
+        success: "bg-success-500",
+        warning: "bg-warning-500",
+        danger: "bg-danger-500",
+        info: "bg-aurora-500",
+    };
+
+    const indicatorTextColors: Record<BadgeVariant, string> = {
+        default: "text-mist-500",
+        primary: "text-wisp-500",
+        success: "text-success-500",
+        warning: "text-warning-500",
+        danger: "text-danger-500",
+        info: "text-aurora-500",
+    };
+
+    const spinnerSizeClasses: Record<BadgeSize, string> = {
+        sm: "h-3 w-3",
+        md: "h-3.5 w-3.5",
+        lg: "h-4 w-4",
+    };
+
+    let safeVariant = $derived(
+        (Object.hasOwn(variantClasses, variant) ? variant : "default") as BadgeVariant,
+    );
+</script>
+
+<span
+    class="{baseClasses} {outline
+        ? variantClasses[safeVariant].outline
+        : variantClasses[safeVariant].solid} {sizeClasses[size]} {className}"
+>
+    {#if dot}
+        {#if loading}
+            <svg
+                class="{spinnerSizeClasses[size]} animate-spin {indicatorTextColors[safeVariant]}"
+                viewBox="0 0 24 24"
+                fill="none"
+            >
+                <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+                ></circle>
+                <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    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>
+        {:else}
+            <span class="h-1.5 w-1.5 rounded-full {dotColors[safeVariant]}"></span>
+        {/if}
+    {/if}
+    {#if children}
+        {@render children()}
+    {/if}
+</span>

package/src/lib/components/Breadcrumb.svelte

@@ -0,0 +1,58 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { ChevronRight, House } from "@lucide/svelte";
+
+    interface BreadcrumbItem {
+        label: string;
+        href?: string;
+        icon?: typeof House;
+    }
+
+    interface Props {
+        items: BreadcrumbItem[];
+        separator?: Snippet;
+        class?: string;
+    }
+
+    let { items, separator, class: className = "" }: Props = $props();
+</script>
+
+<nav aria-label="Breadcrumb" class={className}>
+    <ol class="flex items-center gap-1.5 text-sm">
+        {#each items as item, idx (idx)}
+            <li class="flex items-center gap-1.5">
+                {#if idx > 0}
+                    {#if separator}
+                        {@render separator()}
+                    {:else}
+                        <ChevronRight size={14} class="text-on-surface-faint" />
+                    {/if}
+                {/if}
+
+                {#if item.href && idx < items.length - 1}
+                    <a
+                        href={item.href}
+                        class="flex items-center gap-1.5 text-on-surface-muted transition-colors hover:text-on-surface"
+                    >
+                        {#if item.icon}
+                            {@const Icon = item.icon}
+                            <Icon size={14} />
+                        {/if}
+                        <span>{item.label}</span>
+                    </a>
+                {:else}
+                    <span class="flex items-center gap-1.5 font-medium text-on-surface">
+                        {#if item.icon}
+                            {@const Icon = item.icon}
+                            <Icon size={14} />
+                        {/if}
+                        <span>{item.label}</span>
+                    </span>
+                {/if}
+            </li>
+        {/each}
+    </ol>
+</nav>

package/src/lib/components/Button.svelte

@@ -0,0 +1,69 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLButtonAttributes } from "svelte/elements";
+    import {
+        BUTTON_BASE,
+        BUTTON_SIZES,
+        BUTTON_VARIANTS,
+        type ButtonSize,
+        type ButtonVariant,
+    } from "./button-styles.js";
+
+    interface Props extends HTMLButtonAttributes {
+        variant?: ButtonVariant;
+        size?: ButtonSize;
+        fullWidth?: boolean;
+        loading?: boolean;
+        icon?: Snippet;
+        iconRight?: Snippet;
+        children?: Snippet;
+    }
+
+    let {
+        variant = "primary",
+        size = "md",
+        fullWidth = false,
+        loading = false,
+        disabled = false,
+        icon,
+        iconRight,
+        children,
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+</script>
+
+<button
+    class="{BUTTON_BASE} {BUTTON_VARIANTS[variant]} {BUTTON_SIZES[size]} {fullWidth
+        ? 'w-full'
+        : ''} {className}"
+    disabled={disabled || loading}
+    {...restProps}
+>
+    {#if loading}
+        <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+            ></circle>
+            <path
+                class="opacity-75"
+                fill="currentColor"
+                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>
+    {:else if icon}
+        <span class="shrink-0 transition-transform group-active:scale-95">
+            {@render icon()}
+        </span>
+    {/if}
+    {#if children}
+        {@render children()}
+    {/if}
+    {#if iconRight && !loading}
+        <span class="shrink-0 transition-transform group-active:scale-95">
+            {@render iconRight()}
+        </span>
+    {/if}
+</button>

package/src/lib/components/Card.svelte

@@ -0,0 +1,70 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        padding?: "none" | "sm" | "md" | "lg";
+        hover?: boolean;
+        border?: boolean;
+        shadow?: "none" | "sm" | "md" | "lg";
+        header?: Snippet;
+        footer?: Snippet;
+        children?: Snippet;
+        class?: string;
+    }
+
+    let {
+        padding = "md",
+        hover = false,
+        border = true,
+        shadow = "sm",
+        header,
+        footer,
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    const paddingClasses: Record<string, string> = {
+        none: "",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+    };
+
+    const shadowClasses: Record<string, string> = {
+        none: "",
+        sm: "shadow-sm",
+        md: "shadow-md",
+        lg: "shadow-lg",
+    };
+</script>
+
+<div
+    class="
+		overflow-hidden rounded-xl bg-surface-raised
+		{border ? 'border border-outline' : ''}
+		{shadowClasses[shadow]}
+		{hover ? 'duration-fast transition-shadow hover:border-outline-hover hover:shadow-md' : ''}
+		{className}
+	"
+>
+    {#if header}
+        <div class="border-b border-outline-faint bg-surface-sunken/50 px-4 py-3">
+            {@render header()}
+        </div>
+    {/if}
+
+    <div class={paddingClasses[padding]}>
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+
+    {#if footer}
+        <div class="border-t border-outline-faint bg-surface-sunken/50 px-4 py-3">
+            {@render footer()}
+        </div>
+    {/if}
+</div>