@valerius_petrini/corekit-ui 0.1.71 → 0.1.73

package/dist/components/inputs/Checkbox/index.svelte

@@ -1,3 +1,7 @@
+<script module>
+    let count = 0;
+</script>
+
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
     import Text from "../../typography/Text/index.svelte";
@@ -11,7 +15,7 @@
         labelClass = "",
         divClass = "", 
         checked = $bindable(),
-        id = crypto.randomUUID(),
+        id = `checkbox-${count++}`,
         ...restProps
     }: CheckboxProps = $props();
 

package/dist/components/inputs/ColorInput/index.svelte

@@ -1,3 +1,7 @@
+<script module>
+    let count = 0;
+</script>
+
 <script lang="ts">
     import { getSizeStyle, getSizeStyleClass } from "../../../styles/size.js";
     import type { ColorInputProps } from "./types";
@@ -30,7 +34,7 @@
         size = "md",
         radius = "md",
         variant = "full",
-        id = crypto.randomUUID(),
+        id = `color-input-${count++}`,
         ...restProps
     }: ColorInputProps = $props();
 
@@ -263,12 +267,14 @@
 <svelte:window onmousedown={handleMouseDown}/>
 
 <div class={combinedOuterDivClass} bind:this={element}>
-    <Text tag="label" for={id} class={combinedLabelClass} style={getSizeStyle(size, "formLabel")}>
-        {label}
-        {#if required}
-            <span class="text-[#E05555]">*</span>
-        {/if}
-    </Text>
+    {#if label}
+        <Text tag="label" for={id} class={combinedLabelClass} style={getSizeStyle(size, "formLabel")}>
+            {label}
+            {#if required}
+                <span class="text-[#E05555]">*</span>
+            {/if}
+        </Text>
+    {/if}
     <Button color="none" class={combinedDivClass} onclick={handleClick} {disabled}>
         <input
             {id}
@@ -288,7 +294,6 @@
             {value ? value : "Select color"}
         </Text>
     </Button>
-
     {#if isOpen}
         {@const rgb = hexToRgb(value || "#000000")}
         {@const hsl = hexToHsl(value || "#000000")}
@@ -305,11 +310,11 @@
                     style="background-color: {value || 'transparent'}; left: {thumbX}px; top: {thumbY}px;"
                 ></div>
             </div>
-
+    
             <div class="h-36 w-4 hue-slider relative" bind:this={hueEl}>
                 <div class="slider absolute w-5 h-1 border border-white shadow" style="top: {(hue / 360) * 100}%"></div>
             </div>
-
+    
             <div class="grow flex flex-col gap-2 min-w-40">
                 <Input
                     type="text"
@@ -321,7 +326,7 @@
                     onkeydown={handleEnter}
                     placeholder="#ffffff"
                 />
-
+    
                 <Input
                     type="text"
                     variant="floating"
@@ -332,7 +337,7 @@
                     onkeydown={handleEnter}
                     placeholder="0, 0, 0"
                 />
-
+    
                 <Input
                     type="text"
                     variant="floating"
@@ -343,7 +348,7 @@
                     onkeydown={handleEnter}
                     placeholder="0, 0, 0"
                 />
-
+    
                 <Input
                     type="text"
                     variant="floating"

package/dist/components/inputs/ColorInput/types.d.ts

@@ -12,5 +12,5 @@ export interface ColorInputProps extends BaseComponentProps {
     variant?: ColorInputVariant;
     size?: SizeStyle;
     radius?: SizeStyle;
-    id?: `${string}-${string}-${string}-${string}-${string}`;
+    id?: string;
 }

package/dist/components/inputs/Combobox/index.svelte

@@ -1,3 +1,7 @@
+<script module>
+    let count = 0;
+</script>
+
 <script lang="ts">
     import type { ComboboxProps } from "./types";
     import { twMerge } from "tailwind-merge";
@@ -7,8 +11,6 @@
     import BaseInput from "../helper/BaseInput.svelte";
     import Text from "../../typography/Text/index.svelte";
     import { fly } from "svelte/transition";
-    import { debounce } from "../../../utils/debounce.js";
-    import { tick } from "svelte";
 
     let { 
         children = undefined, 
@@ -30,43 +32,28 @@
         radius = "md",
         options = [],
         limit = 10,
-        id = crypto.randomUUID(),
+        id = `combobox-${count++}`,
         ...restProps
     }: ComboboxProps = $props();
 
     let isFocused = $state(false);
     let activeIndex = $state(0);
 
+    let floatingEl = $state<HTMLDivElement>();
     let dropdownX = $state(0);
     let dropdownY = $state(0);
-    let floatingEl = $state<HTMLDivElement>();
-
-    let debouncedSearch = $state("");
-
-    const updateSearch = debounce((v: string) => {
-        debouncedSearch = v;
-    }, 150);
-
-    $effect(() => {
-        updateSearch(value ?? "");
-    });
+    let referenceWidth = $state(0);
+    let ready = $state(false);
 
     const sizeClasses = $derived(getSizeStyleClass(size, "form"));
     const labelSizeClass = $derived(getSizeStyleClass(size, "formLabel"));
 
     let inputElement = $state<HTMLInputElement>();
 
-    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("; ");
-    });
+    const customStyle = $derived([
+        typeof size === "number" ? `width: ${size}px` : "",
+        typeof radius === "number" ? `border-radius: ${radius}px` : "",
+    ].filter(Boolean).join("; "));
 
     function handleFocus(e: FocusEvent) {
         isFocused = true;
@@ -80,32 +67,12 @@
         onblur?.(e);
     }
 
-    async function updateDropdownPosition() {
-        if (!element || !floatingEl) return;
-
-        referenceWidth = element.offsetWidth;
-
-        const { x, y } = await computePosition(element, floatingEl, {
-            placement: "bottom-start",
-            middleware: [
-                offset(8),
-                flip(),
-                shift({ padding: 8 })
-            ]
-        });
-
-        dropdownX = x;
-        dropdownY = y;
-    }
-
     let defaultClass = "text-main-text w-full outline-none px-1.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0 rounded-none";
 
     let defaultInputClassCheck = $derived(variant !== "floating" ? "py-0" : "");
     let combinedClass = $derived(twMerge(defaultClass, sizeClasses, defaultInputClassCheck, labelSizeClass, className));
     let combinedDivClass = $derived(twMerge(divClass));
 
-    let referenceWidth = $state(0);
-
     function onClickItem(event: MouseEvent, option: string) {
         event.preventDefault();
         value = option;
@@ -113,6 +80,36 @@
         inputElement?.blur();
     }
 
+    function initFloating(node: HTMLDivElement) {
+        if (!element) return {};
+
+        let cleanup: (() => void) | null = null;
+
+        async function updatePosition() {
+            referenceWidth = element!.offsetWidth;
+
+            const { x, y } = await computePosition(element!, node, {
+                placement: "bottom-start",
+                middleware: [offset(8), flip(), shift({ padding: 8 })]
+            });
+
+            dropdownX = x;
+            dropdownY = y;
+            ready = true;
+        }
+
+        updatePosition().then(() => {
+            cleanup = autoUpdate(element!, node, updatePosition);
+        });
+
+        return {
+            destroy() {
+                cleanup?.();
+                ready = false;
+            }
+        };
+    }
+
     function highlight(label: string, search: string) {
         const index = label.toLowerCase().indexOf(search.toLowerCase());
         if (index === -1) return escapeHtml(label);
@@ -130,7 +127,7 @@
 
     let filteredOptions = $derived(
         options.filter(option =>
-            option.toLowerCase().includes(debouncedSearch.toLowerCase()))
+            option.toLowerCase().includes(value?.toLowerCase() ?? ""))
     );
 
     let validOptions = $derived(filteredOptions.slice(0, limit));
@@ -172,17 +169,6 @@
 
     let optionsContainerElement = $state<HTMLDivElement>();
 
-    $effect(() => {
-        if (isFocused && element && floatingEl) {
-            const cleanup = autoUpdate(
-                element,
-                floatingEl,
-                updateDropdownPosition
-            );
-            return () => cleanup();
-        }
-    });
-
     function handleMouseDown(e: MouseEvent) {
         if (
             isFocused &&
@@ -236,24 +222,25 @@
     {#snippet outerDivElementAfter()}        
         {#if isFocused}
             <div
-                bind:this={floatingEl}
-                transition:fly={{ y: -10, duration: 200 }}
+                use:initFloating
                 style="position: fixed; top: {dropdownY}px; left: {dropdownX}px; width: {referenceWidth}px;"
-                class="z-999999 border-2 overflow-hidden border-blue-500 bg-sub-background {getSizeStyleClass(radius, 'radius')}"
+                style:visibility={ready ? "visible" : "hidden"}
+                transition:fly={{ y: -10, duration: 200 }}
+                class="z-999999 overflow-hidden border border-white/10 bg-sub-background shadow-xl shadow-black/40 {getSizeStyleClass(radius, 'radius')}"
             >
                 {#if totalMatches > 0 && options.length > limit}
-                    <Text class="text-xs py-0.5 px-1 text-sub-text italic sticky top-0 bg-sub-background w-full">
+                    <Text class="text-xs py-1.5 px-2.5 text-sub-text italic sticky top-0 bg-sub-background w-full">
                         Showing {limit} of {totalMatches} results for "{value}"
                     </Text>
                 {/if}
                 {#if totalMatches === 0}
-                    <Text class="text-xs py-0.5 px-1 text-sub-text italic sticky top-0 bg-sub-background w-full">
+                    <Text class="text-xs py-1.5 px-2.5 text-sub-text italic sticky top-0 bg-sub-background w-full">
                         No results found for "{value}"
                     </Text>
                 {/if}
                 <div bind:this={optionsContainerElement} class="overflow-auto max-h-40">
                     {#each validOptions as option, index}
-                        <Text class="text-sm py-0.5 px-1 cursor-pointer hover:bg-sub-background-hover transition-colors {activeIndex === index ? 'bg-sub-background-hover' : ''}" onmousedown={(e: MouseEvent) => onClickItem(e, option)}>
+                        <Text class="text-sm py-1.5 px-2.5 cursor-pointer hover:bg-white/5 transition-colors {activeIndex === index ? 'bg-white/5' : ''}" onmousedown={(e: MouseEvent) => onClickItem(e, option)}>
                             {@html highlight(option, value ?? "")}
                         </Text>
                     {/each}

package/dist/components/inputs/FileInput/index.svelte

@@ -1,3 +1,7 @@
+<script module>
+    let count = 0;
+</script>
+
 <script lang="ts">
     import { getSizeStyle, getSizeStyleClass } from "../../../styles/size.js";
     import type { FileInputProps } from "./types";
@@ -22,7 +26,7 @@
         disabled = false,
         size = "md",
         radius = "md",
-        id = crypto.randomUUID(),
+        id = `file-input-${count++}`,
         ...restProps
     }: FileInputProps = $props();
 
@@ -77,12 +81,14 @@
 </script>
 
 <div class={combinedOuterDivClass} bind:this={element}>
-    <Text tag="label" for={id} class={combinedLabelClass} style={getSizeStyle(size, "formLabel")}>
-        {label}
-        {#if required}
-            <span class="text-[#E05555]">*</span>
-        {/if}
-    </Text>
+    {#if label}
+        <Text tag="label" for={id} class={combinedLabelClass} style={getSizeStyle(size, "formLabel")}>
+            {label}
+            {#if required}
+                <span class="text-[#E05555]">*</span>
+            {/if}
+        </Text>
+    {/if}
     <Button color="none" class={combinedDivClass} onclick={handleClick} {disabled}>
         <div class={iconContainerClass}>
             <Icon class={iconClass}></Icon>

package/dist/components/inputs/FileInput/types.d.ts

@@ -10,5 +10,5 @@ export interface FileInputProps extends BaseComponentProps {
     disabled?: boolean;
     size?: SizeStyle;
     radius?: SizeStyle;
-    id?: `${string}-${string}-${string}-${string}-${string}`;
+    id?: string;
 }

package/dist/components/inputs/Input/index.svelte

@@ -1,3 +1,7 @@
+<script module>
+    let count = 0;
+</script>
+
 <script lang="ts">
     import type { InputProps } from "./types";
     import { twMerge } from "tailwind-merge";
@@ -37,7 +41,7 @@
         valid = $bindable(true),
         size = "md",
         radius = "md",
-        id = crypto.randomUUID(),
+        id = `input-${count++}`,
         min = undefined,
         max = undefined,
         step = undefined,
@@ -85,11 +89,15 @@
         onblur?.(e);
     }
 
+    const isValid = $derived(
+        (requirements ?? []).every(req => testRequirement(req.requirements))
+    );
+
     let inputClassIcon = $derived(Icon !== null ? "pl-0 pr-1" : "");
 
     let defaultInputClassCheck = $derived(variant !== "floating" ? "py-0" : "");
     let combinedClass = $derived(twMerge(defaultClass, sizeClasses, defaultInputClassCheck, labelSizeClass, inputClassIcon, className));
-    let combinedDivClass = $derived(twMerge(divClass, (!isValidInput() && touched) && invalidClass));
+    let combinedDivClass = $derived(twMerge(divClass, (!isValid && touched) && invalidClass));
 
     let EyeComponent = $derived(canSeePassword ? Eye : EyeOff);
 
@@ -101,15 +109,8 @@
         return true;
     }
 
-    function isValidInput() {
-        for (const requirement of requirements || [])
-            if (!testRequirement(requirement.requirements))
-                return false;
-        return true;
-    }
-
     $effect(() => {
-        valid = isValidInput();
+        valid = isValid;
     });
 </script>
 

package/dist/components/inputs/Select/index.svelte

@@ -1,3 +1,7 @@
+<script module>
+    let count = 0;
+</script>
+
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
     import { getSizeStyleClass } from "../../../styles/size";
@@ -20,7 +24,7 @@
         disabled = false,
         size = "md",
         radius = "md",
-        id = crypto.randomUUID(),
+        id = `select-${count++}`,
         ...restProps
     }: SelectProps = $props();
 

package/dist/components/inputs/helper/BaseInput.svelte

@@ -1,3 +1,7 @@
+<script module>
+    let count = 0;
+</script>
+
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
     import type { BaseInputProps } from "../../../types/BaseComponent";
@@ -20,7 +24,7 @@
         isFocused = false,
         icon = undefined,
         wrapper = $bindable(),
-        id = crypto.randomUUID(),
+        id = `base-input-${count++}`,
 
         innerDivElement = undefined,
         outerDivElementAfter = undefined,
@@ -30,14 +34,9 @@
 
     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("; ");
-    });
+    const customLabelStyle = $derived(
+        typeof size === "number" ? `font-size: ${size / 4}px` : ""
+    );
 
     let labelClassIcon = $derived(icon != null && variant === "floating" ? "pl-[32px] pr-2" : "");
 
@@ -62,21 +61,21 @@
     ));
 
     const combinedDivClass = $derived(twMerge(
-        "vpcui-base-input-div-class 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",
+        "vpcui-base-input-div-class relative *:transition-all transition-colors flex-center bg-form-background border border-form-border focus-within:border-blue-400/40 overflow-hidden",
         getSizeStyleClass(radius, "radius"),
-        size === "full" ? "w-full" : "",
-        divClass,
-        disabled ? "opacity-50 pointer-events-none" : ""
+        divClass
     ));
 </script>
 
 {#snippet labelElement()}
-    <Text tag="label" for={id} class={combinedLabelClass} style={customLabelStyle}>
-        {label}
-        {#if required}
-            <span class="text-[#E05555]">*</span>
-        {/if}
-    </Text>
+    {#if label}
+        <Text tag="label" for={id} class={combinedLabelClass} style={customLabelStyle}>
+            {label}
+            {#if required}
+                <span class="text-[#E05555]">*</span>
+            {/if}
+        </Text>
+    {/if}
 {/snippet}
 
 {#snippet innerDivElementWrapper()}

package/dist/components/inputs/index.d.ts

@@ -4,9 +4,11 @@ export { default as Input } from "./Input/index.svelte";
 export { default as Select } from "./Select/index.svelte";
 export { default as FileInput } from "./FileInput/index.svelte";
 export { default as Combobox } from "./Combobox/index.svelte";
+export { default as ColorInput } from "./ColorInput/index.svelte";
 export type { ButtonProps } from "./Button/types.ts";
 export type { CheckboxProps } from "./Checkbox/types.ts";
 export type { InputProps } from "./Input/types.ts";
 export type { SelectProps } from "./Select/types.ts";
 export type { FileInputProps } from "./FileInput/types.ts";
 export type { ComboboxProps } from "./Combobox/types.ts";
+export type { ColorInputProps } from "./ColorInput/types.ts";

package/dist/components/inputs/index.js

@@ -4,3 +4,4 @@ export { default as Input } from "./Input/index.svelte";
 export { default as Select } from "./Select/index.svelte";
 export { default as FileInput } from "./FileInput/index.svelte";
 export { default as Combobox } from "./Combobox/index.svelte";
+export { default as ColorInput } from "./ColorInput/index.svelte";

package/dist/components/navigation/Navbar/NavbarDropdown.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
     import { fly } from "svelte/transition";
     import NavbarElement from "./NavbarElement.svelte";
-    import { tick } from "svelte";
     import type { NavbarDropdownProps } from "./types.js";
+    import {
+        computePosition,
+        flip,
+        shift,
+        offset,
+        autoUpdate,
+        type Placement,
+    } from "@floating-ui/dom";
+    import { tick } from "svelte";
 
     let {
-        children = undefined, 
-        class: className = "", 
+        children = undefined,
+        class: className = "",
         element = $bindable(),
         wrapperClass = "",
         label = "",
@@ -15,69 +23,92 @@
     }: 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);
+    let x = $state(0);
+    let y = $state(0);
+    let resolvedPlacement: Placement = $state("bottom-start");
+    let ready = $state(false);
+
+    const flyParams = $derived(
+        resolvedPlacement.startsWith("top")
+            ? { y: 5, duration: 150 }
+            : { y: -5, duration: 150 }
+    );
 
-    function calculateOverflow() {
-        if (!dropdownRef) return;
+    function initDropdown(node: HTMLElement) {
+        if (!element) return {};
 
-        offsetX = 0;
+        let cleanup: (() => void) | null = null;
 
-        const menuRect = dropdownRef.getBoundingClientRect();
-        const vw = window.innerWidth;
-        const padding = 12;
+        async function updatePosition() {
+            const { x: fx, y: fy, placement } = await computePosition(element!, node, {
+                placement: "bottom-start",
+                middleware: [offset(4), flip(), shift({ padding: 12 })],
+            });
+            x = fx;
+            y = fy;
+            resolvedPlacement = placement;
+            ready = true;
+        }
 
-        flipUp = menuRect.bottom > window.innerHeight - padding;
+        updatePosition().then(() => {
+            cleanup = autoUpdate(element!, node, updatePosition);
+        });
 
-        if (menuRect.right > vw - padding)
-            offsetX = -(menuRect.right - (vw - padding));
-        else if (menuRect.left < padding)
-            offsetX = padding - menuRect.left;
-        else
-            offsetX = 0;
+        return {
+            destroy() {
+                cleanup?.();
+                ready = false;
+            }
+        };
     }
 
     async function toggle() {
-        open = !open;
         if (open) {
-            await tick();
-            calculateOverflow();
+            open = false;
         } else {
-            offsetX = 0;
+            ready = false;
+            open = true;
         }
     }
 
     function handleClickOutside(event: MouseEvent) {
-        if (dropdownRef && !dropdownRef.contains(event.target as Node) && wrapperRef && !wrapperRef.contains(event.target as Node)) {
+        const target = event.target as Node;
+        if (element && !element.contains(target))
             open = false;
-            offsetX = 0;
-        }
     }
 </script>
 
-<svelte:window onclick={handleClickOutside}/>
+<svelte:window onclick={handleClickOutside} />
 
-<div class="relative" bind:this={wrapperRef} bind:this={element}>
-    <NavbarElement onclick={toggle} class={className} {...restProps} aria-haspopup="true" aria-expanded={open}>
+<div class="relative h-full {wrapperClass}" bind:this={element}>
+    <NavbarElement
+        onclick={toggle}
+        class={className}
+        {...restProps}
+        aria-haspopup="true"
+        aria-expanded={open}
+    >
         {label}
         {#if navelement}
             {@render navelement()}
         {/if}
     </NavbarElement>
+</div>
 
-    {#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}>
+{#if open}
+    <div
+        use:initDropdown
+        style="position: fixed; top: {y}px; left: {x}px;"
+        class="z-100 shadow-lg"
+        style:visibility={ready ? "visible" : "hidden"}
+    >
+        <div
+            transition:fly={flyParams}
+            class="bg-sub-background p-2 min-w-max flex flex-col *:px-0 rounded border-sub-background-hover border"
+        >
+            <button onclick={() => (open = false)} class="contents">
                 {@render children?.()}
             </button>
         </div>
-    {/if}
-</div>
+    </div>
+{/if}

package/dist/components/navigation/Navbar/NavbarElement.svelte

@@ -2,7 +2,6 @@
     import { twMerge } from "tailwind-merge";
     import Button from "../../inputs/Button/index.svelte";
     import type { NavbarElementProps } from "./types";
-    import { page } from "$app/state";
 
     let {
         children = undefined, 
@@ -10,6 +9,7 @@
         element = $bindable(),
         classTop = "",
         activeClass = "",
+        active = false,
         href = undefined,
         threshold = 10,
         ...restProps
@@ -19,18 +19,17 @@
 
     let scrollY = $state(0);
     let isAtTop = $derived(scrollY <= threshold);
-    let isActive = $derived(page.url.pathname === href);
 
     const combinedClass = $derived(twMerge(
         defaultClass,
         className,
-        isActive ? activeClass : "",
+        active ? activeClass : "",
         isAtTop ? classTop : "",
     ));
 </script>
 
 <svelte:window bind:scrollY={scrollY}/>
 
-<Button bind:element radius="none" {href} color="none" class={combinedClass} {...restProps} aria-current={isActive ? 'page' : undefined}>
+<Button bind:element radius="none" {href} color="sub" class={combinedClass} {...restProps} aria-current={active ? 'page' : undefined}>
     {@render children?.()}
 </Button>

package/dist/components/navigation/Navbar/index.stories.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Navbar from "./index.svelte";
+    import NavbarElement from "./NavbarElement.svelte";
+  import NavbarSeparator from "./NavbarSeparator.svelte";
+  import NavbarDropdown from "./NavbarDropdown.svelte";
+
+	const { Story } = defineMeta({
+		title: "Components/Navigation/Navbar",
+		component: Navbar,
+		argTypes: {
+
+		},
+	});
+</script>
+
+<Story name="Default" args={{ color: "primary", size: "md" }}>
+    <NavbarElement href="/">Home</NavbarElement>
+    <NavbarElement href="/library">Library</NavbarElement>
+    <NavbarElement>Data</NavbarElement>
+
+    <NavbarSeparator/>
+
+    <NavbarDropdown label="More">
+        <NavbarElement href="/about">About</NavbarElement>
+        <NavbarSeparator variant="horizontal"/>
+        <NavbarElement href="/contact">Contact</NavbarElement>
+    </NavbarDropdown>
+</Story>

package/dist/components/navigation/Navbar/index.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const Index: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Index = InstanceType<typeof Index>;
+export default Index;

package/dist/components/navigation/Navbar/types.d.ts

@@ -7,6 +7,7 @@ export interface NavbarProps extends BaseComponentProps {
 export interface NavbarElementProps extends BaseComponentProps {
     classTop?: string;
     activeClass?: string;
+    active?: boolean;
     href?: string;
     threshold?: number;
 }

package/dist/components/navigation/Navbar/types.js

@@ -1,6 +1,6 @@
 ;
 export const NavbarSeparatorClasses = {
     "vertical": "w-0.5 h-full py-3 bg-sub-background-hover bg-clip-content",
-    "horizontal": "h-0.5 w-full px-3 my-1 bg-sub-background-hover bg-clip-content",
+    "horizontal": "h-0.5 w-full my-1 bg-sub-background-hover bg-clip-content",
     "dynamic": "ml-auto"
 };

package/dist/components/navigation/SideNavbar/index.svelte

@@ -28,7 +28,7 @@
 <nav class={combinedClass} {...restProps} onmouseenter={() => expanded = true} onmouseleave={() => expanded = false} bind:this={element}>
     {#each items as item}
         {@const isActive = page.url.pathname === item.href}
-        <Button size="xs" class="{isActive ? 'bg-form-background text-main-text' : 'text-sub-text'} hover:text-main-text py-1 text-nowrap flex justify-start gap-2 overflow-hidden mx-1 w-[calc(100%-16px)] hover:bg-form-background px-1.5" href={item.href}>
+        <Button size="xs" color="none" class="{isActive ? 'bg-form-background text-main-text' : 'text-sub-text'} hover:text-main-text py-1 text-nowrap flex justify-start gap-2 overflow-hidden mx-1 w-[calc(100%-16px)] hover:bg-form-background px-1.5" href={item.href}>
             <item.icon class="w-5 h-5 shrink-0"/>
             <Text tag="span" class="transition-opacity duration-200 text-sm text-inherit {expanded ? 'w-auto opacity-100 pr-3' : 'w-0 opacity-0'}">
                 {item.label}

package/dist/types/BaseComponent.d.ts

@@ -20,5 +20,5 @@ export interface BaseInputProps extends BaseComponentProps {
     radius?: SizeStyle;
     icon?: Component;
     wrapper?: HTMLElement;
-    id?: `${string}-${string}-${string}-${string}-${string}`;
+    id?: string;
 }

package/package.json

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