@valerius_petrini/corekit-ui 0.1.29 → 0.1.31

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,33 @@
 <script lang="ts">
+    import type { NavbarProps } from "../types/Navbar.js";
+    import { onMount } from "svelte";
     import { twMerge } from "tailwind-merge";
 
     let { 
         children = undefined, 
         class: className = "", 
+        classTop = "",
         ...restProps
-    } = $props();
+    }: NavbarProps = $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,4 @@
-declare const Navbar: import("svelte").Component<{
-    children?: any;
-    class?: string;
-} & Record<string, any>, {}, "">;
+import type { NavbarProps } from "../types/Navbar.js";
+declare const Navbar: import("svelte").Component<NavbarProps, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;
 export default Navbar;

package/dist/components/NavbarElement.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import Button from "./Button.svelte";
+    import { onMount } from "svelte";
+    import type { NavbarElementProps } from "../types/Navbar.js";
+
+    let {
+        children = undefined, 
+        class: className = "", 
+        classTop = "",
+        href = undefined,
+        ...restProps
+    }: NavbarElementProps = $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,4 @@
+import type { NavbarElementProps } from "../types/Navbar.js";
+declare const NavbarElement: import("svelte").Component<NavbarElementProps, {}, "">;
+type NavbarElement = ReturnType<typeof NavbarElement>;
+export default NavbarElement;

package/dist/components/{NavbarSeperator.svelte.d.ts → NavbarSeparator.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default NavbarSeperator;
-type NavbarSeperator = SvelteComponent<{
+export default NavbarSeparator;
+type NavbarSeparator = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const NavbarSeperator: $$__sveltets_2_IsomorphicComponent<{
+declare const NavbarSeparator: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/index.d.ts

@@ -2,5 +2,8 @@ export { default as Button } from "./components/Button.svelte";
 export { default as Typewriter } from "./components/Typewriter.svelte";
 export { default as Analytics } from "./components/Analytics.svelte";
 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 { fbmBackground } from "./actions/fbm.ts";
 export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.d.ts";

package/dist/index.js

@@ -2,4 +2,7 @@ export { default as Button } from "./components/Button.svelte";
 export { default as Typewriter } from "./components/Typewriter.svelte";
 export { default as Analytics } from "./components/Analytics.svelte";
 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 { fbmBackground } from "./actions/fbm.js";

package/dist/types/Navbar.d.ts

@@ -0,0 +1,14 @@
+export interface NavbarProps {
+    children?: any;
+    class?: string;
+    classTop?: string;
+    [key: string]: any;
+};
+
+export interface NavbarElementProps {
+    children?: any;
+    class?: string;
+    classTop?: string;
+    href?: string;
+    [key: string]: any;
+}

package/package.json

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