@valerius_petrini/corekit-ui 0.1.63 → 0.1.65

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/Skeleton.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { getSizeStyleClass } from "../styles/size.js";
+    import type { SkeletonProps } from "../types/Skeleton.js";
+    import Image from "@lucide/svelte/icons/image";
+    import Play from "@lucide/svelte/icons/play";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        variant = "text", 
+        class: className = "",
+        count = 19, 
+        size = "md" 
+    }: SkeletonProps = $props();
+
+    const defaultWidths = [21, 19, 24, 15, 10, 30, 22, 17, 26, 20, 28, 10, 22, 45, 16, 23, 37, 25, 25];
+    const widths = $derived(Array.from({ length: count }, (_, i) => defaultWidths[i % defaultWidths.length]));
+
+    const defaultContainerClass = "animate-pulse duration-100 w-lg flex flex-col gap-2";
+    const combinedContainerClass = $derived(twMerge(
+        defaultContainerClass,
+        getSizeStyleClass(size, "card"),
+        className
+    ));
+</script>
+
+{#snippet image()}
+    <div class="h-48 bg-sub-background rounded w-full flex-center">
+        <Image size={48} class="text-form-border"/>
+    </div>
+{/snippet}
+
+{#snippet text()}
+    <div class="pt-4 flex flex-wrap gap-2">            
+        {#each widths as width}
+            <div class="h-4 rounded even:bg-sub-background odd:bg-sub-background-hover" 
+                    style="width: {width}%;"></div>
+        {/each}
+    </div>
+{/snippet}
+
+<div class={combinedContainerClass}>
+    {#if variant === "default"}
+        <div class="h-4 bg-sub-background rounded w-3/4"></div>
+        <div class="h-4 bg-sub-background rounded w-full"></div>
+        <div class="h-4 bg-sub-background rounded w-5/6"></div>
+        <div class="h-4 bg-sub-background rounded w-2/3"></div>
+        <div class="h-4 bg-sub-background rounded w-5/6"></div>
+        <div class="h-4 bg-sub-background rounded w-11/12"></div>
+    {:else if variant === "text"}
+        {@render text()}
+    {:else if variant === "image"}
+        {@render image()}
+    {:else if variant === "video"}
+        <div class="h-48 bg-sub-background rounded w-full flex-center">
+            <Play size={48} class="text-form-border"/>
+        </div>
+    {:else if variant === "card"}
+        <div class="w-full h-full border-sub-background border-2 rounded p-4 gap-2">
+            {@render image()}
+            {@render text()}
+        </div>
+    {/if}
+</div>

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

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

package/dist/components/Table.svelte

@@ -15,7 +15,7 @@
     const defaultTableClass = "w-full border-collapse text-main-text border border-form-border border-l-0";
     const defaultTableHeaderClass = "text-left border-b border-b-1 border-b-form-border bg-sub-background font-medium";
     const defaultTableCellClass = "p-2 text-sm border-l border-l-[1px] border-l-form-border";
-    const defaultTableBodyClass = "even:bg-sub-background odd:bg-form-background";
+    const defaultTableBodyClass = "even:bg-sub-background odd:bg-sub-background-hover";
 
     const combinedTableClass = $derived(twMerge(
         defaultTableClass,

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

@@ -19,6 +19,9 @@ 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 { default as Skeleton } from "./components/Skeleton.svelte";
+export { default as Combobox } from "./components/Combobox.svelte";
 export { fbmBackground } from "./actions/fbm.ts";
 export { toast } from "./actions/toast.svelte.ts";
 export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.ts";

package/dist/index.js

@@ -19,5 +19,8 @@ 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 { default as Skeleton } from "./components/Skeleton.svelte";
+export { default as Combobox } from "./components/Combobox.svelte";
 export { fbmBackground } from "./actions/fbm.js";
 export { toast } from "./actions/toast.svelte.js";

package/dist/styles/color.d.ts

@@ -1,4 +1,4 @@
 export type ColorStyle = "rose" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "gray" | "sub" | "none" | "white" | "black" | "primary" | "secondary" | "accent" | "error" | "warning" | "success" | "info";
-export type ColorStyleType = "base" | "text" | "full" | "light" | "outline" | "ghost";
+export type ColorStyleType = "base" | "text" | "full" | "light" | "outline" | "ghost" | "loader";
 export declare const colorStyleParts: Record<ColorStyle, Record<ColorStyleType, string>>;
 export declare function generateColorStyle(color: ColorStyle, variant: ColorStyleType): string;