@valerius_petrini/corekit-ui 0.1.64 → 0.1.66

package/dist/components/Combobox.svelte

@@ -183,7 +183,7 @@
 
     {#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")}">
+            <div transition:fly={{ y: -10, duration: 200 }} class="absolute z-100 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}"

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

@@ -109,15 +109,14 @@
             bind:this={tooltip}
             style="transform: translateX(calc(-50% + {offsetX}px));"
             class="absolute z-999999 {positionClasses[resolvedPosition || position]} translate-x-0! pointer-events-none">
+
+            <div class="absolute {arrowClasses[resolvedPosition || position]} border-4 border-transparent w-0 h-0"
+                 style="transform: translateX(calc(-50% + {arrowX}px));"></div>
+
             <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}

package/dist/index.d.ts

@@ -20,6 +20,8 @@ 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

@@ -20,5 +20,7 @@ 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/types/Skeleton.d.ts

@@ -0,0 +1,6 @@
+import type { BaseComponentProps } from "./BaseComponent.ts";
+export type SkeletonVariant = "default" | "text" | "image" | "video" | "card";
+export interface SkeletonProps extends BaseComponentProps {
+    variant?: SkeletonVariant;
+    count?: number;
+}

package/dist/types/Skeleton.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.64",
+	"version": "0.1.66",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",
@@ -56,6 +56,7 @@
 	],
 	"dependencies": {
 		"@lucide/svelte": "^1.3.0",
+		"@valerius_petrini/corekit-scripts": "^1.0.0",
 		"bytes": "^3.1.2",
 		"tailwind-merge": "^3.5.0"
 	}