@valerius_petrini/corekit-ui 0.1.62 → 0.1.64

package/dist/components/NavbarDropdown.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { fly } from "svelte/transition";
+    import NavbarElement from "./NavbarElement.svelte";
+    import { tick } from "svelte";
+    import type { NavbarDropdownProps } from "../types/Navbar.js";
+
+    let {
+        children = undefined, 
+        class: className = "", 
+        wrapperClass = "",
+        label = "",
+        element = undefined,
+        ...restProps
+    }: NavbarDropdownProps = $props();
+
+    let open = $state(false);
+    let dropdownRef: HTMLButtonElement | null = $state(null);
+    let wrapperRef: HTMLDivElement | null = $state(null);
+    let offsetX = $state(0);
+    let flipUp = $state(false);
+
+    function calculateOverflow() {
+        if (!dropdownRef) return;
+
+        offsetX = 0;
+
+        const menuRect = dropdownRef.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const padding = 12;
+
+        flipUp = menuRect.bottom > window.innerHeight - padding;
+
+        if (menuRect.right > vw - padding)
+            offsetX = -(menuRect.right - (vw - padding));
+        else if (menuRect.left < padding)
+            offsetX = padding - menuRect.left;
+        else
+            offsetX = 0;
+    }
+
+    async function toggle() {
+        open = !open;
+        if (open) {
+            await tick();
+            calculateOverflow();
+        } else {
+            offsetX = 0;
+        }
+    }
+
+    function handleClickOutside(event: MouseEvent) {
+        if (dropdownRef && !dropdownRef.contains(event.target as Node) && wrapperRef && !wrapperRef.contains(event.target as Node)) {
+            open = false;
+            offsetX = 0;
+        }
+    }
+</script>
+
+<svelte:window onclick={handleClickOutside}/>
+
+<div class="relative" bind:this={wrapperRef}>
+    <NavbarElement onclick={toggle} class={className} {...restProps} aria-haspopup="true" aria-expanded={open}>
+        {label}
+        {#if element}
+            {@render element()}
+        {/if}
+    </NavbarElement>
+
+    {#if open}
+        <div 
+            class="absolute {flipUp ? 'bottom-full' : 'top-full'} left-0 z-100 mt-1 overflow-hidden shadow-lg"
+            style="transform: translateX({offsetX}px); visibility: {open ? 'visible' : 'hidden'};">
+            <button 
+                bind:this={dropdownRef}
+                transition:fly={{ y: flipUp ? 5 : -5, duration: 200 }} 
+                class="bg-sub-background p-2 min-w-max flex flex-col *:px-0 rounded border-sub-background-hover border"
+                onclick={() => open = false}>
+                {@render children?.()}
+            </button>
+        </div>
+    {/if}
+</div>

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

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

package/dist/components/NavbarSeparator.svelte

@@ -1 +1,11 @@
-<div class="ml-auto"></div>
+<script lang="ts">
+    import { NavbarSeparatorClasses, type NavbarSeparatorProps } from "../types/Navbar.js";
+
+    let {
+        variant = "dynamic",
+        class: className = "",
+        ...restProps
+    }: NavbarSeparatorProps = $props();
+</script>
+
+<div class={NavbarSeparatorClasses[variant]} {...restProps}></div>

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

@@ -1,26 +1,4 @@
+import { type NavbarSeparatorProps } from "../types/Navbar.js";
+declare const NavbarSeparator: import("svelte").Component<NavbarSeparatorProps, {}, "">;
+type NavbarSeparator = ReturnType<typeof NavbarSeparator>;
 export default NavbarSeparator;
-type NavbarSeparator = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const NavbarSeparator: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/SEO.svelte

@@ -7,37 +7,47 @@
     const DEFAULT_IMAGE = "/favicon.png";
 
 	let { 
-        websiteName, 
         title = DEFAULT_TITLE, 
         description = DEFAULT_DESCRIPTION, 
-        image = DEFAULT_IMAGE 
+        image = DEFAULT_IMAGE,
+        noindex = false,
     }: SEOProps = $props();
 
-    let fullUrl = $derived(`${websiteName}${page.url.pathname.toString()}`);
+    let origin = $derived(page.url.origin);
+    let fullUrl = $derived(page.url.href);
+    let fullImage = $derived(image.startsWith("http") ? image : `${origin}${image}`);
+
+    let jsonLd = $derived(JSON.stringify({
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        "name": title,
+        "url": fullUrl,
+        "logo": fullImage
+    }));
 </script>
   
 <svelte:head>
     <title>{title}</title>
+    <link rel="canonical" href={fullUrl}>
     <meta name="description" content={description}>
-    <meta property="og_site_name" content={websiteName}>
+    {#if noindex}
+        <meta name="robots" content="noindex,nofollow">
+    {/if}
+
+    <meta property="og:site_name" content={title}>
     <meta property="og:url" content={fullUrl}>
     <meta property="og:type" content="website">
-    <meta property="og:title" content="{title}">
+    <meta property="og:title" content={title}>
     <meta property="og:description" content={description}>
-    <meta property="og:image" content={websiteName + image}>
-  
+    <meta property="og:image" content={fullImage}>
+    <meta property="og:locale" content="en_US">
+
     <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content={websiteName}>
+    <meta property="twitter:domain" content={page.url.hostname}>
     <meta property="twitter:url" content={fullUrl}>
-    <meta name="twitter:title" content="{title}">
+    <meta name="twitter:title" content={title}>
     <meta name="twitter:description" content={description}>
-    <meta name="twitter:image" content={websiteName + image}>
-    {@html `  <script type="application/ld+json">{
-     "@context": "https://schema.org",
-     "@type": "Website",
-     "name": "${title}",
-     "url": "${fullUrl}",
-     "logo": "${websiteName}${image}"  }</script>`}
+    <meta name="twitter:image" content={fullImage}>
 
-    <meta name="google-site-verification" content="F6vDzwDyZfebc9kWIZlhzpsAm5zhanaPkOArdCZdDSU" />
+    {@html `<script type="application/ld+json">${jsonLd}</script>`}
 </svelte:head>

package/dist/components/Select.svelte

@@ -1,40 +1,80 @@
 <script lang="ts">
-    import type { SelectProps } from "../types/Select.js";
     import { twMerge } from "tailwind-merge";
     import Text from "./Text.svelte";
+    import { getSizeStyleClass } from "../styles/size.js";
+
+    import type { SelectProps } from "../types/Input.js";
+    import BaseInput from "./helper/BaseInput.svelte";
 
     let { 
         children = undefined, 
         class: className = "",
         label = "",
-        divClass = "",
-        optionClass = "", 
-        value = $bindable(),
+        labelClass = "",
+        divClass = "", 
+        outerDivClass = "",
         options = [],
+        variant = "default",
+        value = $bindable(),
+        required = false,
+        disabled = false,
+        size = "md",
+        radius = "md",
         id = crypto.randomUUID(),
         ...restProps
     }: SelectProps = $props();
 
-    let defaultSelectClass = "cursor-pointer bg-form-background border-[1px] border-form-border text-main-text z-20 w-full rounded px-1 pt-4 pb-1 text-xs outline-none focus:ring-2 focus:ring-blue-500 transition-all";
-    let defaultLabelClass = "block text-sub-text rounded-md text-sm font-medium mb-1 absolute transition-all duration-100 pointer-events-none";
-    let defaultDivClass = "relative w-fit";
 
-    let selectedLabelClass = "left-2 z-30 top-0.5 text-[10px]!";
+    const sizeClasses = $derived(getSizeStyleClass(size, "form"));
+    const labelSizeClass = $derived(getSizeStyleClass(size, "formLabel"));
+
+    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(true);
+
+    let defaultClass = "text-main-text w-full outline-none px-0.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0 rounded-full";
 
-    let combinedLabelClass = $derived(twMerge(defaultLabelClass, selectedLabelClass, className));
-    let combinedSelectClass = $derived(twMerge(defaultSelectClass, className));
-    let combinedDivClass = $derived(twMerge(defaultDivClass, divClass));
+    let defaultInputClassCheck = $derived(variant !== "floating" ? "py-0" : "");
+    let combinedClass = $derived(twMerge(defaultClass, sizeClasses, defaultInputClassCheck, labelSizeClass, className));
 </script>
 
-<div class={combinedDivClass}>
-    <Text tag="label" for={id} class={combinedLabelClass}>
-        {label}
-    </Text>
-    <select {id} class={combinedSelectClass} {...restProps} bind:value={value}>
-        {#each options as option}
-            <option value={option.value} class={optionClass}>
-                {option.label}
-            </option>
-        {/each}
-    </select>
-</div>
+<BaseInput
+    {children}
+    {className}
+    {label}
+    {labelClass}
+    {divClass}
+    {outerDivClass}
+    {value}
+    {required}
+    {disabled}
+    {variant}
+    {size}
+    {radius}
+    {isFocused}
+    {id}
+    {...restProps}>
+    {#snippet innerDivElement()}
+        <select 
+            id={id} 
+            class={combinedClass} 
+            disabled={disabled} 
+            bind:value={value}
+            style={customStyle}
+            {...restProps}>
+            {#each options as option}
+                <option value={option.value}>{option.label}</option>
+            {/each}
+        </select>
+    {/snippet}
+</BaseInput>

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

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

package/dist/components/Tooltip.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+    import type { TooltipComponent } from "../types/Tooltip.js";
+    import { type Snippet } from "svelte";
+    import { fly } from "svelte/transition";
+
+    let {
+        text,
+        position = "top",
+        delay = 0,
+        children
+    }: TooltipComponent = $props();
+
+    let visible = $state(false);
+    let resolvedPosition: string | null = $state(null);
+    let offsetX = $state(0);
+    let trigger: HTMLDivElement;
+    let tooltip: HTMLDivElement | null = $state(null);
+    let timeout: ReturnType<typeof setTimeout>;
+    let arrowX = $derived(-offsetX);
+
+    function calculatePosition() {
+        resolvedPosition = position;
+        if (!trigger) return;
+
+        const rect = trigger.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+
+        if (position === "top" && rect.top < 40) resolvedPosition = "bottom";
+        else if (position === "bottom" && rect.bottom > vh - 40) resolvedPosition = "top";
+        else if (position === "left" && rect.left < 120) resolvedPosition = "right";
+        else if (position === "right" && rect.right > vw - 120) resolvedPosition = "left";
+        else resolvedPosition = position;
+    }
+
+    function calculateOverflow() {
+        if (!tooltip || !trigger) return;
+
+        const triggerRect = trigger.getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const vw = window.innerWidth;
+
+        const triggerCenter = triggerRect.left + triggerRect.width / 2;
+
+        const tooltipLeft = triggerCenter - tooltipRect.width / 2;
+        const tooltipRight = triggerCenter + tooltipRect.width / 2;
+
+        const padding = 8;
+
+        if (tooltipRight > vw - padding)
+            offsetX = -(tooltipRight - (vw - padding));
+        else if (tooltipLeft < padding)
+            offsetX = padding - tooltipLeft;
+        else
+            offsetX = 0;
+    }
+
+    function show() {
+        calculatePosition();
+        timeout = setTimeout(() => {
+            visible = true;
+            requestAnimationFrame(calculateOverflow);
+        }, delay);
+    }
+
+    function hide() {
+        clearTimeout(timeout);
+        visible = false;
+    }
+
+    const positionClasses: Record<string, string> = {
+        top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+        bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+        left: "right-full top-1/2 -translate-y-1/2 mr-2",
+        right: "left-full top-1/2 -translate-y-1/2 ml-2"
+    };
+
+    const arrowClasses: Record<string, string> = {
+        top: "top-full left-1/2 -translate-x-1/2 border-t-form-background",
+        bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-form-background",
+        left: "left-full top-1/2 -translate-y-1/2 border-l-form-background",
+        right: "right-full top-1/2 -translate-y-1/2 border-r-form-background"
+    };
+
+    const flyParams = $derived.by(() => {
+        const pos = resolvedPosition || position;
+
+        const duration = 100;
+        const distance = 8;
+        if (pos == "top")
+            return { y: distance, duration };
+        else if (pos == "bottom")
+            return { y: -distance, duration };
+        const x = pos == "right" ? -distance : distance;
+        return { x, duration };
+    });
+</script>
+
+<div
+    bind:this={trigger}
+    class="relative inline-flex w-fit h-fit"
+    onmouseenter={show}
+    onmouseleave={hide}
+    role="tooltip">
+    {@render children()}
+
+    {#if visible}
+        <div
+            bind:this={tooltip}
+            style="transform: translateX(calc(-50% + {offsetX}px));"
+            class="absolute z-999999 {positionClasses[resolvedPosition || position]} translate-x-0! pointer-events-none">
+            <div 
+                transition:fly={flyParams}
+                class="px-2 py-1 text-xs text-main-text bg-form-background rounded whitespace-nowrap">
+                {text}
+
+                <div 
+                    class="absolute {arrowClasses[resolvedPosition || position]} border-4 border-transparent w-0 h-0"
+                    style="transform: translateX(calc(-50% + {arrowX}px));"
+                ></div>
+            </div>
+        </div>
+    {/if}
+</div>

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

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

package/dist/components/helper/BaseInput.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import type { BaseInputProps } from "../../types/Input.js";
+    import Text from "../Text.svelte";
+    import { getSizeStyleClass } from "../../styles/size.js";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        label = "",
+        labelClass = "",
+        divClass = "",
+        outerDivClass = "",
+        value = $bindable(),
+        required = false,
+        disabled = false,
+        variant = "default",
+        size = "md",
+        radius = "md",
+        isFocused = false,
+        icon = undefined,
+        id = crypto.randomUUID(),
+
+        isHovered = $bindable(false),
+
+        innerDivElement = undefined,
+        outerDivElementAfter = undefined,
+
+        ...restProps
+    }: BaseInputProps = $props();
+
+    const hasContent = $derived(value !== undefined && value !== null && value.toString().length > 0);
+
+    const customLabelStyle = $derived.by(() => {
+        const styles: string[] = [];
+
+        if (typeof size === "number")
+            styles.push(`font-size: ${size / 4}px`);
+
+        return styles.join("; ");
+    });
+
+    let labelClassIcon = $derived(icon != null && variant === "floating" ? "pl-[32px] pr-2" : "");
+
+    const defaultLabelClass = "block text-sub-text font-medium mb-1 duration-100 pointer-events-none truncate w-fit";
+    const floatingLabelClass = "absolute w-full z-30 top-1/2 transform -translate-y-1/2 px-1.5";
+
+    const combinedLabelClass = $derived(twMerge(
+        defaultLabelClass, 
+        (variant === "floating") ? floatingLabelClass : "px-0", 
+        labelClassIcon,
+        getSizeStyleClass(size, "formLabel"), 
+        ((isFocused || hasContent) && variant === "floating") && getSizeStyleClass(size, "formLabelSelected"),
+        labelClass
+    ));
+
+    const combinedOuterDivClass = $derived(twMerge(
+        "relative flex flex-col bg-transparent border-0 p-0",
+        getSizeStyleClass(radius, "radius"),
+        size === "full" ? "w-full" : "",
+        outerDivClass,
+        disabled ? "opacity-50 pointer-events-none" : ""
+    ));
+
+    const combinedDivClass = $derived(twMerge(
+        "relative *:transition-all transition-colors flex-center bg-form-background border-[1px] border-form-border focus-within:ring-1 focus-within:ring-blue-500 overflow-hidden",
+        getSizeStyleClass(radius, "radius"),
+        size === "full" ? "w-full" : "",
+        divClass,
+        disabled ? "opacity-50 pointer-events-none" : ""
+    ));
+</script>
+
+{#snippet labelElement()}
+    <Text tag="label" for={id} class={combinedLabelClass} style={customLabelStyle}>
+        {label}
+        {#if required}
+            <span class="text-[#E05555]">*</span>
+        {/if}
+    </Text>
+{/snippet}
+
+{#snippet innerDivElementWrapper()}
+    <div role="button" tabindex="0" class={combinedDivClass} onmouseenter={() => isHovered = true} onmouseleave={() => isHovered = false}>
+        {#if variant === "floating"}
+            {@render labelElement()}
+        {/if}
+        {#if icon}
+            {@const Icon = icon}
+            <div class="h-5 aspect-square px-1 py-0!">
+                <Icon class="h-full aspect-square text-sub-text"></Icon>
+            </div>
+        {/if}
+        {@render innerDivElement?.()}
+    </div>
+{/snippet}
+
+<div class={combinedOuterDivClass}>
+    {#if variant !== "floating"}
+        {@render labelElement()}
+    {/if}
+    {@render innerDivElementWrapper()}
+
+    {@render outerDivElementAfter?.()}
+</div>

package/dist/components/helper/BaseInput.svelte.d.ts

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

package/dist/components/helper/NumberInput.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import Button from "../Button.svelte";
+    import ChevronUp from "@lucide/svelte/icons/chevron-up";
+    import ChevronDown from "@lucide/svelte/icons/chevron-down";
+    import { twMerge } from "tailwind-merge";
+    import { getSizeStyleClass, type SizeStyle } from "../../styles/size.js";
+
+    let {
+        max = undefined,
+        min = undefined,
+        step = undefined,
+        value = $bindable(),
+        isHovered = false,
+        size = "md" as SizeStyle,
+        ...restProps
+    } = $props();
+
+    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;
+        }
+    }
+
+    const numberIconClass = $derived(twMerge(
+        getSizeStyleClass(size, "form"), 
+        "text-sub-text/70 w-fit aspect-auto p-0 flex-center flex-col transition-all duration-150"
+    ));
+    const numberButtonClass = "py-0! h-1/2 gap-0 px-0.5 hover:bg-form-border aspect-square rounded-none";
+</script>
+
+<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>

package/dist/components/helper/NumberInput.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type SizeStyle } from "../../styles/size.js";
+declare const NumberInput: import("svelte").Component<{
+    max?: any;
+    min?: any;
+    step?: any;
+    value?: any;
+    isHovered?: boolean;
+    size?: SizeStyle;
+} & Record<string, any>, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { default as SEO } from "./components/SEO.svelte";
 export { default as Navbar } from "./components/Navbar.svelte";
 export { default as NavbarSeparator } from "./components/NavbarSeparator.svelte";
 export { default as NavbarElement } from "./components/NavbarElement.svelte";
+export { default as NavbarDropdown } from "./components/NavbarDropdown.svelte";
 export { default as Input } from "./components/Input.svelte";
 export { default as FileInput } from "./components/FileInput.svelte";
 export { default as Select } from "./components/Select.svelte";
@@ -17,6 +18,8 @@ export { default as Table } from "./components/Table.svelte";
 export { default as Toast } from "./components/Toast.svelte";
 export { default as Toaster } from "./components/Toaster.svelte";
 export { default as SideNavbar } from "./components/SideNavbar.svelte";
+export { default as Tooltip } from "./components/Tooltip.svelte";
+export { default as Loader } from "./components/Loader.svelte";
 export { fbmBackground } from "./actions/fbm.ts";
 export { toast } from "./actions/toast.svelte.ts";
 export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.ts";