@valerius_petrini/corekit-ui 0.1.29 → 0.1.30

package/dist/components/Button.svelte

@@ -14,7 +14,7 @@
     let pillClass = "rounded-full";
     let iconClass = "rounded-full p-2 flex-center";
     let defaultClass = $derived(twMerge(
-        "text-white cursor-pointer px-2 py-1 transition-colors ", 
+        "text-white cursor-pointer px-2 py-1 transition-colors duration-300", 
         (pill ? pillClass : ""), (icon ? iconClass : "")));
 
     let combinedClass = $derived(twMerge(defaultClass, className));

package/dist/components/Navbar.svelte

@@ -1,15 +1,32 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import { twMerge } from "tailwind-merge";
 
     let { 
         children = undefined, 
         class: className = "", 
+        classTop = "",
         ...restProps
     } = $props();
 
-    let defaultClass = "bg-transparent transition-colors duration-300 backdrop-blur-[3px] fixed top-0 left-0 w-full z-50 flex items-center";
+    let defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-50 flex items-center";
 
     let combinedClass = $derived(twMerge(defaultClass, className));
+
+    function onScroll() {
+        combinedClass = window.scrollY === 0 
+            ? twMerge(defaultClass, className, classTop)
+            : twMerge(defaultClass, className);
+    }
+
+    onMount(() => {
+        window.addEventListener('scroll', onScroll);
+        onScroll(); 
+
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+        };
+    });
 </script>
 
 <nav class={combinedClass} {...restProps}>

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

@@ -1,6 +1,7 @@
 declare const Navbar: import("svelte").Component<{
     children?: any;
     class?: string;
+    classTop?: string;
 } & Record<string, any>, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;
 export default Navbar;

package/dist/components/NavbarElement.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import Button from "./Button.svelte";
+    import { onMount } from "svelte";
+
+    let {
+        children = undefined, 
+        class: className = "", 
+        classTop = "",
+        href = undefined,
+        ...restProps
+    } = $props();
+
+    let defaultClass = "navbar-element w-fit h-full flex items-center px-5 py-0";
+
+    let combinedClass = $derived(twMerge(defaultClass, className));
+
+    function onScroll() {
+        combinedClass = window.scrollY === 0 
+            ? twMerge(defaultClass, className, classTop)
+            : twMerge(defaultClass, className);
+    }
+
+    onMount(() => {
+        window.addEventListener('scroll', onScroll);
+        onScroll(); 
+
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+        };
+    });
+</script>
+
+<Button {href} class={combinedClass} {...restProps}>
+    {@render children?.()}
+</Button>

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

@@ -0,0 +1,8 @@
+declare const NavbarElement: import("svelte").Component<{
+    children?: any;
+    class?: string;
+    classTop?: string;
+    href?: any;
+} & Record<string, any>, {}, "">;
+type NavbarElement = ReturnType<typeof NavbarElement>;
+export default NavbarElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.29",
+	"version": "0.1.30",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",