@valerius_petrini/corekit-ui 0.1.63 → 0.1.64

package/dist/components/Analytics.svelte

@@ -1,3 +1,7 @@
+<script module>
+    declare function gtag(...args: unknown[]): void;
+</script>
+
 <script lang="ts">
     import { page } from '$app/state'
     import type { AnalyticsProps } from '../types/Analytics.js';

package/dist/components/Button.svelte

@@ -4,6 +4,7 @@
     import type { ButtonProps } from "../types/Button.js";
     import { twMerge } from "tailwind-merge";
     import { getLinkProps } from "../utils/link.js";
+  import Loader from "./Loader.svelte";
 
     let { 
         children = undefined, 
@@ -18,11 +19,12 @@
         external = false,
         size = "md",
         radius = "md",
+        loading = false,
         ...restProps
     }: ButtonProps = $props();
 
     const defaultClass = "inline-flex items-center justify-center gap-2 transition-colors duration-300 ease-in-out text-white whitespace-nowrap";
-    const disabledClass = $derived(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer");
+    const disabledClass = $derived(disabled || loading ? "opacity-50 pointer-events-none" : "cursor-pointer");
     const iconClass = $derived(icon ? "p-0 flex-none" : "h-fit");
     const pillClass = $derived((pill || icon) && "rounded-full");
     const squareClass = $derived(square && "aspect-square rounded-none");
@@ -40,22 +42,25 @@
     ));
 
     const mergedStyle = $derived([
-        getSizeStyle(size, icon ? "button" : "button"), 
+        getSizeStyle(size, icon ? "buttonIcon" : "button"), 
         getSizeStyle(radius, "radius"), 
         restProps.style
     ].filter(Boolean).join("; "));
 
-    const anchorProps = $derived(getLinkProps(href, external));
+    const anchorProps = $derived(getLinkProps(href, external, disabled || loading));
 </script>
 
 <svelte:element 
     this={href ? "a" : "button"} 
     class={mergedClass} 
-    {disabled}
-    aria-disabled={disabled}
+    disabled={disabled || loading}
+    aria-disabled={disabled || loading}
     type={href ? undefined : (restProps.type || "button")}
     style={mergedStyle}
     {...anchorProps}
     {...restProps}>
+    {#if loading}
+        <Loader color="white" class="border-2 border-loader-btn-color {getSizeStyleClass(size, "buttonLoader")}"/>
+    {/if}
     {@render children?.()}
 </svelte:element>

package/dist/components/Card.svelte

@@ -32,7 +32,7 @@
         restProps.style
     ].filter(Boolean).join("; "));
 
-    const anchorProps = $derived(getLinkProps(href, external));
+    const anchorProps = $derived(getLinkProps(href, external, false));
 </script>
 
 <svelte:element

package/dist/components/Combobox.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+    import type { ComboboxProps, InputProps } from "../types/Input.js";
+    import { twMerge } from "tailwind-merge";
+    import { getSizeStyleClass } from "../styles/size.js";
+
+    import BaseInput from "./helper/BaseInput.svelte";
+    import Text from "./Text.svelte";
+    import { fly } from "svelte/transition";
+    import { debounce } from "../utils/debounce.js";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        label = "",
+        labelClass = "",
+        divClass = "", 
+        outerDivClass = "",
+        icon = undefined,
+        variant = "default",
+        placeholder = "",
+        value = $bindable(),
+        onfocus = undefined,
+        onblur = undefined,
+        required = false,
+        disabled = false,
+        size = "md",
+        radius = "md",
+        options = [],
+        limit = 10,
+        id = crypto.randomUUID(),
+        ...restProps
+    }: ComboboxProps = $props();
+
+    let activeIndex = $state(0);
+
+    let debouncedSearch = $state("");
+
+    const updateSearch = debounce((v: string) => {
+        debouncedSearch = v;
+    }, 150);
+
+    $effect(() => {
+        updateSearch(value ?? "");
+    });
+
+    const sizeClasses = $derived(getSizeStyleClass(size, "form"));
+    const labelSizeClass = $derived(getSizeStyleClass(size, "formLabel"));
+
+    let inputElement = $state<HTMLInputElement>();
+
+    const customStyle = $derived.by(() => {
+        const styles: string[] = [];
+
+        if (typeof size === "number")
+            styles.push(`width: ${size}px`);
+
+        if (typeof radius === "number")
+            styles.push(`border-radius: ${radius}px`);
+
+        return styles.join("; ");
+    });
+
+    let isFocused = $state(false);
+
+    function handleFocus(e: FocusEvent) {
+        isFocused = true;
+        onfocus?.(e);
+    }
+
+    function handleBlur(e: FocusEvent) {
+        const match = options.find(o => o.toLowerCase() === (value ?? "").toString().toLowerCase());
+        if (!match) value = "";
+        isFocused = false;
+        onblur?.(e);
+    }
+
+    let defaultClass = "text-main-text w-full outline-none px-1.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0 rounded-none";
+
+    let defaultInputClassCheck = $derived(variant !== "floating" ? "py-0" : "");
+    let combinedClass = $derived(twMerge(defaultClass, sizeClasses, defaultInputClassCheck, labelSizeClass, className));
+    let combinedDivClass = $derived(twMerge(divClass));
+
+    function onClickItem(event: MouseEvent, option: string) {
+        event.preventDefault();
+        value = option;
+        isFocused = false;
+        inputElement?.blur();
+    }
+
+    function highlight(label: string, search: string) {
+        const index = label.toLowerCase().indexOf(search.toLowerCase());
+        if (index === -1) return escapeHtml(label);
+
+        return [
+            label.slice(0, index),
+            `<span class="font-bold">${escapeHtml(label.slice(index, index + search.length))}</span>`,
+            label.slice(index + search.length)
+        ].join("");
+    }
+
+    function escapeHtml(str: string) {
+        return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    }
+
+    let filteredOptions = $derived(
+        options.filter(option =>
+            option.toLowerCase().includes(debouncedSearch.toLowerCase()))
+    );
+
+    let validOptions = $derived(filteredOptions.slice(0, limit));
+    let totalMatches = $derived(filteredOptions.length);
+
+    function onKeyDown(event: KeyboardEvent) {
+        if (!isFocused) return;
+
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            activeIndex = (activeIndex + 1) % validOptions.length;
+            scrollToActiveElement();
+        } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            activeIndex = (activeIndex - 1 + validOptions.length) % validOptions.length;
+            scrollToActiveElement();
+        } else if (event.key === "Enter" || event.key === "Tab") {
+            event.preventDefault();
+            const option = validOptions[activeIndex];
+            if (option) {
+                value = option;
+                isFocused = false;
+                inputElement?.blur();
+            }
+            activeIndex = 0;
+        } else if (event.key === "Escape") {
+            event.preventDefault();
+            isFocused = false;
+            inputElement?.blur();
+        } else {
+            activeIndex = 0;
+        }
+    }
+
+    function scrollToActiveElement() {
+        const optionElement = optionsContainerElement?.children[activeIndex] as HTMLElement;
+        optionElement?.scrollIntoView({ block: "nearest" });
+    }
+
+    let optionsContainerElement = $state<HTMLDivElement>();
+</script>
+
+<BaseInput
+    {children}
+    {className}
+    {label}
+    {labelClass}
+    divClass={combinedDivClass}
+    {outerDivClass}
+    {value}
+    {required}
+    {disabled}
+    {variant}
+    {size}
+    {radius}
+    {id}
+    {icon}>
+
+    {#snippet innerDivElement()}
+        <input
+            {id}
+            bind:value={value}
+            bind:this={inputElement}
+            class={combinedClass}
+            {required}
+            {disabled}
+            onfocus={handleFocus}
+            onblur={handleBlur}
+            onkeydown={onKeyDown}
+            placeholder={variant === "floating" ? "" : placeholder}
+            aria-disabled={disabled}
+            style={customStyle}
+            {...restProps}
+        />
+    {/snippet}
+
+    {#snippet outerDivElementAfter()}        
+        {#if isFocused}
+            <div transition:fly={{ y: -10, duration: 200 }} class="absolute top-full left-0 right-0 mt-2 border-2 overflow-hidden border-blue-500 bg-sub-background {getSizeStyleClass(radius, "radius")}">
+                {#if totalMatches > limit}
+                    <Text class="text-xs py-0.5 px-1 text-sub-text italic sticky top-0 bg-sub-background w-full">
+                        Showing {limit} of {totalMatches} results for "{value}"
+                    </Text>
+                {/if}
+                {#if totalMatches === 0}
+                    <Text class="text-xs py-0.5 px-1 text-sub-text italic sticky top-0 bg-sub-background w-full">
+                        No results found for "{value}"
+                    </Text>
+                {/if}
+                <div bind:this={optionsContainerElement} class="overflow-auto max-h-40">
+                    {#each validOptions as option, index}
+                        <Text class="text-sm py-0.5 px-1 cursor-pointer hover:bg-sub-background-hover transition-colors {activeIndex === index ? 'bg-sub-background-hover' : ''}" onmousedown={(e: MouseEvent) => onClickItem(e, option)}>
+                            {@html highlight(option, value ?? "")}
+                        </Text>
+                    {/each}
+                </div>
+            </div>
+        {/if}
+    {/snippet}
+</BaseInput>

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

@@ -0,0 +1,4 @@
+import type { ComboboxProps } from "../types/Input.ts";
+declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/components/Input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import type { InputProps, InputRequirements } from "../types/Input.js";
+    import type { InputProps } from "../types/Input.js";
     import { twMerge } from "tailwind-merge";
     import Text from "./Text.svelte";
-    import { getSizeStyleClass, sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+    import { getSizeStyleClass } from "../styles/size.js";
     import { type Component } from "svelte";
     import Button from "./Button.svelte";
 
@@ -11,11 +11,11 @@
     import Phone from "@lucide/svelte/icons/phone";
     import Eye from "@lucide/svelte/icons/eye";
     import EyeOff from "@lucide/svelte/icons/eye-off";
-    import ChevronUp from "@lucide/svelte/icons/chevron-up";
-    import ChevronDown from "@lucide/svelte/icons/chevron-down";
     import X from "@lucide/svelte/icons/x";
     import Check from "@lucide/svelte/icons/check";
-  import { slide } from "svelte/transition";
+    import { slide } from "svelte/transition";
+    import BaseInput from "./helper/BaseInput.svelte";
+    import NumberInput from "./helper/NumberInput.svelte";
 
     let { 
         children = undefined, 
@@ -47,8 +47,6 @@
 
     const sizeClasses = $derived(getSizeStyleClass(size, "form"));
     const labelSizeClass = $derived(getSizeStyleClass(size, "formLabel"));
-    const divSizeClass = $derived(getSizeStyleClass(radius, "radius"));
-    const selectedLabelSizeClass = $derived(getSizeStyleClass(size, "formLabelSelected"));
 
     const customStyle = $derived.by(() => {
         const styles: string[] = [];
@@ -62,51 +60,21 @@
         return styles.join("; ");
     });
 
-    const customLabelStyle = $derived.by(() => {
-        const styles: string[] = [];
-
-        if (typeof size === "number")
-            styles.push(`font-size: ${size / 4}px`);
-
-        return styles.join("; ");
-    });
-
     let isFocused = $state(false);
     let touched = $state(false);
 
     let canSeePassword = $state(false);
 
-    const isFloating = $derived(variant === "floating");
-    const hasContent = $derived(value !== undefined && value !== null && value.toString().length > 0);
-    const lifted = $derived(isFloating && (isFocused || hasContent));
-
     const Icon = $derived(icon ?? ({
         email: Mail, password: Lock, tel: Phone
     }[restProps.type as string] as Component ?? null));
 
-    let defaultClass = "text-main-text w-full outline-none px-1.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0";
-    let defaultLabelClass = "block text-sub-text font-medium mb-1 duration-100 pointer-events-none truncate w-fit";
-    let defaultDivClass = "relative *:transition-all transition-colors flex-center bg-form-background border-[1px] border-form-border focus-within:ring-1 focus-within:ring-blue-500";
+    let defaultClass = "text-main-text w-full outline-none px-1.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0 rounded-none";
     let iconContainerClass = "h-5 aspect-square px-1 py-0!";
-    let floatingLabelClass = "absolute w-full";
     let iconClass = "h-full aspect-square text-sub-text";
 
-    let inputRadius = $derived.by(() => {
-        if (restProps.type === "password") return "rounded-none";
-        if (Icon !== null) return "rounded-r-full"
-        else return "rounded-full";
-    });
-
-    let originalLabelClass = "z-0";
-    let originalLabelClassInput = "top-1/2 transform -translate-y-1/2";
-    let originalSelectedLabelClass = "z-30";
-
     let invalidClass = "border border-red-500 focus:ring-red-500 bg-[#2E1F1F]";
 
-    let floatingLabelClassFull = $derived(twMerge(originalLabelClassInput, originalLabelClass, floatingLabelClass));
-    let divFullClass = $derived(size === "full" ? "w-full" : "");
-    let disabledClass = $derived(disabled ? "opacity-50 pointer-events-none" : "");
-
     function handleFocus(e: FocusEvent) {
         isFocused = true;
         touched = true;
@@ -118,58 +86,14 @@
         onblur?.(e);
     }
 
-    let labelClassIcon = $derived(Icon !== null ? "pl-[32px] pr-2" : "px-1.5");
     let inputClassIcon = $derived(Icon !== null ? "pl-0 pr-1" : "");
 
     let defaultInputClassCheck = $derived(variant !== "floating" ? "py-0" : "");
-    let floatingLabelClassCheck = $derived(variant === "floating" ? floatingLabelClassFull : "");
-    let defaultLabelClassCheck = $derived(variant !== "floating" ? "px-0" : "");
-    let selectedLabelClass = $derived(twMerge((isFocused || hasContent) && variant === "floating" ? `${originalSelectedLabelClass} ${selectedLabelSizeClass}` : ""));
-    let combinedLabelClass = $derived(twMerge(defaultLabelClass, floatingLabelClassCheck, labelSizeClass, selectedLabelClass, labelClassIcon, defaultLabelClassCheck, labelClass));
-    let combinedClass = $derived(twMerge(defaultClass, inputRadius, sizeClasses, defaultInputClassCheck, labelSizeClass, inputClassIcon, className));
-    let combinedDivClass = $derived(twMerge(defaultDivClass, divSizeClass, divFullClass, divClass, disabledClass, !isValidInput() && touched && invalidClass));
-    let combinedOuterDivClass = $derived(twMerge("flex flex-col bg-transparent border-0 p-0", divSizeClass, divFullClass, outerDivClass, disabledClass));
+    let combinedClass = $derived(twMerge(defaultClass, sizeClasses, defaultInputClassCheck, labelSizeClass, inputClassIcon, className));
+    let combinedDivClass = $derived(twMerge(divClass, (!isValidInput() && touched) && invalidClass));
 
     let EyeComponent = $derived(canSeePassword ? Eye : EyeOff);
 
-    let numberIconClass = $derived(twMerge(iconClass, sizeClasses, "text-sub-text/70 w-fit aspect-auto p-0 flex-center flex-col transition-all duration-150"));
-    let numberButtonClass = $derived(twMerge(iconContainerClass, "h-1/2 gap-0 px-0.5 hover:bg-form-border aspect-square rounded-none"));
-
-    function increment() {
-        if (max === undefined || value < max) value = (value || 0) + (step || 1);
-    }
-
-    function decrement() {
-        if (min === undefined || value > min) value = (value || 0) - (step || 1);
-    }
-
-    let incrementInterval: ReturnType<typeof setInterval> | null = null;
-    let decrementInterval: ReturnType<typeof setInterval> | null = null;
-
-    function startIncrement() {
-        increment();
-        incrementInterval = setInterval(increment, 100);
-    }
-
-    function stopIncrement() {
-        if (incrementInterval) {
-            clearInterval(incrementInterval);
-            incrementInterval = null;
-        }
-    }
-
-    function startDecrement() {
-        decrement();
-        decrementInterval = setInterval(decrement, 100);
-    }
-
-    function stopDecrement() {
-        if (decrementInterval) {
-            clearInterval(decrementInterval);
-            decrementInterval = null;
-        }
-    }
-
     function testRequirement(requirement: RegExp | ((value: any) => boolean)) {
         if (typeof requirement === "function")
             return requirement(value || "");
@@ -190,26 +114,43 @@
     });
 </script>
 
-{#snippet labelElement()}
-    <Text tag="label" for={id} class={combinedLabelClass} style={customLabelStyle}>
-        {label}
-        {#if required}
-            <span class="text-[#E05555]">*</span>
-        {/if}
-    </Text>
-{/snippet}
-
-{#snippet innerDivElement()}
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class={combinedDivClass} onmouseenter={() => isHovered = true} onmouseleave={() => isHovered = false}>
-        {#if Icon}
-            <div class={iconContainerClass}>
-                <Icon class={iconClass}></Icon>
+<BaseInput
+    {children}
+    {className}
+    {label}
+    {labelClass}
+    divClass={combinedDivClass}
+    {outerDivClass}
+    {value}
+    {required}
+    {disabled}
+    {variant}
+    {size}
+    {radius}
+    {isFocused}
+    {id}
+    icon={Icon}
+    bind:isHovered
+    {...restProps}>
+    {#snippet outerDivElementAfter()}
+        {#if touched && requirements}
+            <div class="mt-1 text-xs" transition:slide={{ duration: 300 }}>
+                {#each requirements as req}
+                    {@const isReqMet = testRequirement(req.requirements)}
+                    {@const reqClass = isReqMet ? "text-green-500" : "text-red-500"}
+                    <div class="flex w-full items-center gap-1 transition-colors {reqClass}">
+                        <div class="relative w-4 h-4">
+                            <Check class="w-4 h-4 absolute transition-all duration-150 {isReqMet ? 'opacity-100 scale-100' : 'opacity-0 scale-0'}"/>
+                            <X     class="w-4 h-4 absolute transition-all duration-150 {isReqMet ? 'opacity-0 scale-0' : 'opacity-100 scale-100'}"/>
+                        </div>
+                        <Text tag="span" class="text-xs text-inherit">{req.label}</Text>
+                    </div>
+                {/each}
             </div>
         {/if}
-        {#if variant === "floating"}
-            {@render labelElement()}
-        {/if}
+    {/snippet}
+
+    {#snippet innerDivElement()}
         <input
             {id}
             bind:value={value}
@@ -232,51 +173,8 @@
                 <EyeComponent class={iconClass}></EyeComponent>
             </Button>
         {:else if restProps.type === "number"}
-            <div class={twMerge(numberIconClass, isHovered ? "opacity-100 scale-100" : "opacity-0 scale-75")}>
-                <Button 
-                    size="none" radius="none" 
-                    class={numberButtonClass} 
-                    onmousedown={startIncrement}
-                    onmouseup={stopIncrement}
-                    onmouseleave={stopIncrement}
-                    disabled={max !== undefined && value >= max}>
-                    <ChevronUp class="w-full h-full"/>
-                </Button>
-                <Button 
-                    size="none" radius="none" 
-                    class={numberButtonClass} 
-                    onmousedown={startDecrement}
-                    onmouseup={stopDecrement}
-                    onmouseleave={stopDecrement}
-                    disabled={min !== undefined && value <= min}>
-                    <ChevronDown class="w-full h-full"/>
-                </Button>
-            </div>
+            <NumberInput {max} {min} {step} bind:value {isHovered} {size}/>
         {/if}
-    </div>
-{/snippet}
+    {/snippet}
+</BaseInput>
 
-<div class={combinedOuterDivClass}>
-    {#if variant !== "floating"}
-        {@render labelElement()}
-        {@render innerDivElement()}
-    {:else}
-        {@render innerDivElement()}
-    {/if}
-
-    {#if touched && requirements}
-        <div class="mt-1 text-xs" transition:slide={{ duration: 300 }}>
-            {#each requirements as req}
-                {@const isReqMet = testRequirement(req.requirements)}
-                {@const reqClass = isReqMet ? "text-green-500" : "text-red-500"}
-                <div class="flex w-full items-center gap-1 transition-colors {reqClass}">
-                    <div class="relative w-4 h-4">
-                        <Check class="w-4 h-4 absolute transition-all duration-150 {isReqMet ? 'opacity-100 scale-100' : 'opacity-0 scale-0'}"/>
-                        <X     class="w-4 h-4 absolute transition-all duration-150 {isReqMet ? 'opacity-0 scale-0' : 'opacity-100 scale-100'}"/>
-                    </div>
-                    <Text tag="span" class="text-xs text-inherit">{req.label}</Text>
-                </div>
-            {/each}
-        </div>
-    {/if}
-</div>

package/dist/components/KBD.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        subtext = undefined,
+        ...restProps
+    }: any = $props();
+
+    const defaultClass = "inline-flex flex-col items-center justify-center rounded bg-sub-background px-1.5 py-0.5 text-xs font-mono text-main-text border-sub-background-hover border-1";
+
+    const combinedClass = $derived(twMerge(defaultClass, className));
+</script>
+
+<span class={combinedClass} {...restProps}>
+    {@render children?.()}
+    {#if subtext}        
+        <span class="text-sub-text text-[10px] mt-0.5">
+            {@render subtext?.()}
+        </span>
+    {/if}
+</span>

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

@@ -0,0 +1,3 @@
+declare const KBD: import("svelte").Component<any, {}, "">;
+type KBD = ReturnType<typeof KBD>;
+export default KBD;

package/dist/components/Loader.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { getSizeStyleClass } from "../styles/size.js";
+    import { twMerge } from "tailwind-merge";
+    import type { LoaderProps } from "../types/Loader.js";
+    import { generateColorStyle } from "../styles/color.js";
+
+    let { 
+        class: className = "",
+        size = "md",
+        color = "blue",
+        ...restProps
+    }: LoaderProps = $props();
+
+    const defaultClass = "loader rounded-full border-main-text border-4";
+
+    let sizeClass = $derived(twMerge(
+        defaultClass, 
+        getSizeStyleClass(size, "loader"), 
+        className,
+        generateColorStyle(color, "loader"),
+    ));
+</script>
+
+<div class={sizeClass} {...restProps}></div>
+
+<style>
+    .loader {
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>

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

@@ -0,0 +1,4 @@
+import type { LoaderProps } from "../types/Loader.ts";
+declare const Loader: import("svelte").Component<LoaderProps, {}, "">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;