@runwisp/ui 0.4.0

package/src/lib/components/FeatureGrid.svelte

@@ -0,0 +1,37 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface Props {
+        columns?: 1 | 2 | 3 | 4;
+        gap?: "sm" | "md" | "lg";
+        children?: Snippet;
+        class?: string;
+    }
+
+    let { columns = 3, gap = "md", children, class: className = "" }: Props = $props();
+
+    const colClasses: Record<1 | 2 | 3 | 4, string> = {
+        1: "grid-cols-1",
+        2: "grid-cols-1 sm:grid-cols-2",
+        3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+    };
+
+    const gapClasses: Record<"sm" | "md" | "lg", string> = {
+        sm: "gap-3",
+        md: "gap-4",
+        lg: "gap-6",
+    };
+
+    const colClass = $derived(colClasses[columns]);
+    const gapClass = $derived(gapClasses[gap]);
+</script>
+
+<div class="grid {colClass} {gapClass} {className}">
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

package/src/lib/components/FormField.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";
+
+    interface Props {
+        label?: string;
+        hint?: string;
+        error?: string;
+        description?: string;
+        required?: boolean;
+        children: Snippet;
+        class?: string;
+    }
+
+    let {
+        label,
+        hint,
+        error,
+        description,
+        required = false,
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    const generatedId = `field-${Math.random().toString(36).slice(2, 10)}`;
+</script>
+
+<div class="space-y-1.5 {className}">
+    {#if label}
+        <label for={generatedId} class="block text-sm font-medium text-on-surface-muted">
+            {label}
+            {#if required}
+                <span class="text-danger-500">*</span>
+            {/if}
+        </label>
+    {/if}
+
+    {#if description}
+        <p class="text-sm text-on-surface-faint">{description}</p>
+    {/if}
+
+    {@render children()}
+
+    {#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}
+</div>

package/src/lib/components/Heading.svelte

@@ -0,0 +1,46 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+    type HeadingSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+
+    interface Props {
+        level: HeadingLevel;
+        size?: HeadingSize;
+        children: Snippet;
+        class?: string;
+    }
+
+    let { level, size, children, class: className = "" }: Props = $props();
+
+    const defaultSizeMap: Record<HeadingLevel, HeadingSize> = {
+        1: "4xl",
+        2: "3xl",
+        3: "2xl",
+        4: "xl",
+        5: "lg",
+        6: "base" as HeadingSize,
+    };
+
+    const sizeClasses: Record<string, string> = {
+        xs: "text-xs font-semibold",
+        sm: "text-sm font-semibold",
+        base: "text-base font-semibold",
+        md: "text-base font-semibold",
+        lg: "text-lg font-semibold",
+        xl: "text-xl font-bold",
+        "2xl": "text-2xl font-bold",
+        "3xl": "text-3xl font-bold",
+        "4xl": "text-4xl font-bold tracking-tight",
+    };
+
+    const resolvedSize = $derived(size ?? defaultSizeMap[level]);
+    const tag = $derived(`h${level}` as const);
+</script>
+
+<svelte:element this={tag} class="text-on-surface {sizeClasses[resolvedSize]} {className}">
+    {@render children()}
+</svelte:element>

package/src/lib/components/Input.svelte

@@ -0,0 +1,114 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import { CircleAlert } from "@lucide/svelte";
+
+    type InputSize = "sm" | "md" | "lg";
+
+    interface Props extends Omit<HTMLInputAttributes, "size"> {
+        size?: InputSize;
+        label?: string;
+        hint?: string;
+        error?: string | undefined;
+        leadingIcon?: Snippet;
+        trailingIcon?: Snippet;
+        class?: string;
+    }
+
+    let {
+        size = "md",
+        value = $bindable(),
+        id,
+        label,
+        hint,
+        error = $bindable(),
+        leadingIcon,
+        trailingIcon,
+        disabled = false,
+        class: className = "",
+        oninput,
+        ...restProps
+    }: Props = $props();
+
+    const generatedId = `input-${Math.random().toString(36).slice(2, 10)}`;
+    const inputId = $derived(id ?? generatedId);
+
+    const sizeClasses: Record<InputSize, string> = {
+        sm: "text-sm px-3 py-1.5",
+        md: "text-sm px-3.5 py-2",
+        lg: "text-base px-4 py-2.5",
+    };
+
+    const inputClasses = `
+		w-full rounded-lg border
+		bg-surface-raised text-on-surface placeholder:text-on-surface-faint
+		focus:outline-none focus:ring-4 focus:ring-ring/10 focus:border-ring
+		disabled:bg-surface-sunken disabled:text-on-surface-muted disabled:cursor-not-allowed
+		transition-all duration-normal ease-in-out
+	`;
+
+    const normalBorder = "border-outline hover:border-outline-hover shadow-sm";
+    const errorBorder = "border-danger-400 focus:border-danger-500 focus:ring-danger-500/20";
+</script>
+
+<div class="space-y-1.5 {className}">
+    {#if label}
+        <label for={inputId} class="block text-sm font-medium text-on-surface-muted">
+            {label}
+        </label>
+    {/if}
+
+    <div class="group relative">
+        {#if leadingIcon}
+            <div
+                class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-on-surface-faint transition-colors group-focus-within:text-on-surface-muted"
+            >
+                {@render leadingIcon()}
+            </div>
+        {/if}
+
+        <input
+            id={inputId}
+            class="
+				{inputClasses}
+				{sizeClasses[size]}
+				{error ? errorBorder : normalBorder}
+				{leadingIcon ? 'pl-10' : ''}
+				{trailingIcon || error ? 'pr-10' : ''}
+			"
+            {disabled}
+            bind:value
+            aria-invalid={error ? "true" : undefined}
+            oninput={(e) => {
+                if (error) error = undefined;
+                oninput?.(e);
+            }}
+            {...restProps}
+        />
+
+        {#if error}
+            <div
+                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-danger-500"
+            >
+                <CircleAlert size={18} />
+            </div>
+        {:else if trailingIcon}
+            <div
+                class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-on-surface-faint transition-colors group-focus-within:text-on-surface-muted"
+            >
+                {@render trailingIcon()}
+            </div>
+        {/if}
+    </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}
+</div>

package/src/lib/components/Kbd.svelte

@@ -0,0 +1,31 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    interface Props {
+        keys: string | string[];
+        class?: string;
+    }
+
+    let { keys, class: className = "" }: Props = $props();
+
+    const keyList = $derived(Array.isArray(keys) ? keys : [keys]);
+
+    const kbdClasses = `
+        inline-flex items-center justify-center
+        min-w-[1.5em] px-1.5 py-0.5
+        text-xs font-mono font-medium
+        bg-surface-sunken text-on-surface-muted
+        border border-outline rounded-md
+        shadow-sm
+    `;
+</script>
+
+<span class="inline-flex items-center gap-1 {className}">
+    {#each keyList as key, i (key)}
+        {#if i > 0}
+            <span class="text-xs text-on-surface-faint select-none">+</span>
+        {/if}
+        <kbd class={kbdClasses}>{key}</kbd>
+    {/each}
+</span>

package/src/lib/components/Link.svelte

@@ -0,0 +1,56 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    type LinkVariant = "default" | "muted" | "primary" | "danger";
+    type LinkUnderline = "always" | "hover" | "none";
+
+    interface Props {
+        href: string;
+        variant?: LinkVariant;
+        external?: boolean;
+        underline?: LinkUnderline;
+        children: Snippet;
+        class?: string;
+    }
+
+    let {
+        href,
+        variant = "default",
+        external = false,
+        underline = "hover",
+        children,
+        class: className = "",
+    }: Props = $props();
+
+    const baseClasses = `
+        inline-flex items-center gap-1
+        transition-colors duration-normal ease-out
+        focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/10 focus-visible:border-ring
+        rounded-sm
+    `;
+
+    const variantClasses: Record<LinkVariant, string> = {
+        default: "text-on-surface hover:text-primary",
+        muted: "text-on-surface-muted hover:text-on-surface",
+        primary: "text-primary hover:text-primary-hover",
+        danger: "text-danger-surface hover:text-danger-hover",
+    };
+
+    const underlineClasses: Record<LinkUnderline, string> = {
+        always: "underline underline-offset-2",
+        hover: "hover:underline underline-offset-2",
+        none: "no-underline",
+    };
+</script>
+
+<a
+    {href}
+    class="{baseClasses} {variantClasses[variant]} {underlineClasses[underline]} {className}"
+    target={external ? "_blank" : undefined}
+    rel={external ? "noopener noreferrer" : undefined}
+>
+    {@render children()}
+</a>

package/src/lib/components/LinkButton.svelte

@@ -0,0 +1,55 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAnchorAttributes } from "svelte/elements";
+    import {
+        BUTTON_BASE,
+        BUTTON_SIZES,
+        BUTTON_VARIANTS,
+        type ButtonSize,
+        type ButtonVariant,
+    } from "./button-styles.js";
+
+    interface Props extends HTMLAnchorAttributes {
+        variant?: ButtonVariant;
+        size?: ButtonSize;
+        fullWidth?: boolean;
+        icon?: Snippet;
+        iconRight?: Snippet;
+        children?: Snippet;
+    }
+
+    let {
+        variant = "primary",
+        size = "md",
+        fullWidth = false,
+        icon,
+        iconRight,
+        children,
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+</script>
+
+<a
+    class="{BUTTON_BASE} {BUTTON_VARIANTS[variant]} {BUTTON_SIZES[size]} {fullWidth
+        ? 'w-full'
+        : ''} {className}"
+    {...restProps}
+>
+    {#if icon}
+        <span class="shrink-0 transition-transform group-active:scale-95">
+            {@render icon()}
+        </span>
+    {/if}
+    {#if children}
+        {@render children()}
+    {/if}
+    {#if iconRight}
+        <span class="shrink-0 transition-transform group-active:scale-95">
+            {@render iconRight()}
+        </span>
+    {/if}
+</a>