@valerius_petrini/corekit-ui 0.1.72 → 0.1.74

package/dist/components/feedback/Modal/index.stories.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Button from "../../inputs/Button/index.svelte";
+    import Text from "../../typography/Text/index.svelte";
+    import Modal from "./index.svelte";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Feedback/Modal",
+		component: Modal,
+		argTypes: {
+			variant: {
+				control: "select",
+				options: ["bordered", "elevated"],
+			},
+			size: {
+				control: "select",
+				options: sizeStyles,
+			},
+			radius: {
+				control: "select",
+				options: sizeStyles,
+			},
+			href: { control: "text" },
+			external: { control: "boolean" },
+		},
+	});
+</script>
+
+<Story name="Default" args={{ variant: "bordered", size: "md" }}>
+    <Text tag="h2" class="text-2xl font-bold mb-4">Customizable Modal</Text>
+    <Text class="mb-4">This is a customizable modal component. You can add any content here and style it as needed.</Text>
+    <Button href="https://example.com" target="_blank">Learn More</Button>
+</Story>

package/dist/components/feedback/Modal/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/feedback/Modal/index.svelte

@@ -2,7 +2,8 @@
     import type { ModalProps } from "./types";
     import { fade, fly } from "svelte/transition";
     import Card from "../../display/Card/index.svelte";
-    import { positionParts } from "../../../styles/posititon.js";
+    import { modalPositionParts } from "../../../styles/posititon.js";
+    import { getSizeStyleClass } from "../../../styles/size.js";
     import { twMerge } from "tailwind-merge";
 
     let { 
@@ -11,26 +12,34 @@
         element = $bindable(),
         open = $bindable(), 
         position = "center",
+        size = "md",
         ...restProps
     }: ModalProps = $props();
 
-    const defaultOuterDivClass = "w-full h-screen fixed bg-black/50 z-200 flex items-center justify-center top-0 left-0 p-4";
-    const combinedOuterDivClass = $derived(twMerge(defaultOuterDivClass));
+    const outerClass = $derived(twMerge(
+        "fixed inset-0 z-300 flex flex-col bg-black/50 p-4",
+        modalPositionParts[position]
+    ));
 
-    const defaultInnerDivClass = "z-300 max-h-full absolute";
-    const positionInnerDivClass = $derived(positionParts[position] || "");
-    const combinedInnerDivClass = $derived(twMerge(defaultInnerDivClass, positionInnerDivClass));
-
-    const defaultCardClass = "overflow-y-auto max-h-[95vh]";
-    const combinedCardClass = $derived(twMerge(defaultCardClass, className));
+    const cardClass = $derived(twMerge(
+        "w-full max-h-[95vh] overflow-y-auto",
+        getSizeStyleClass(size, "card"),
+        className
+    ));
 </script>
 
 {#if open}
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class={combinedOuterDivClass} transition:fade={{ duration: 200 }} onclick={() => open = false} bind:this={element}>
-        <div class={combinedInnerDivClass} transition:fly={{ y: -20, duration: 200 }} onclick={(e) => e.stopPropagation()}>
-            <Card class={combinedCardClass} {...restProps}>
+    <div
+        class={outerClass}
+        transition:fade={{ duration: 200 }}
+        onclick={() => open = false}
+        bind:this={element}>
+        <div
+            transition:fly={{ y: -20, duration: 200 }}
+            onclick={(e) => e.stopPropagation()}>
+            <Card class={cardClass} {...restProps}>
                 {@render children()}
             </Card>
         </div>

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/Textarea/index.stories.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Textarea from "./index.svelte";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Inputs/Textarea",
+		component: Textarea,
+		argTypes: {
+			size: {
+				control: "select",
+				options: sizeStyles,
+			},
+			radius: {
+				control: "select",
+				options: sizeStyles,
+			}
+		},
+	});
+</script>
+
+<Story name="Default" args={{ label: "Input Label", placeholder: "Enter text here..." }}></Story>

package/dist/components/inputs/Textarea/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/inputs/Textarea/index.svelte

@@ -0,0 +1,82 @@
+<script module>
+    let count = 0;
+</script>
+
+<script lang="ts">
+    import type { TextareaProps } from "./types";
+    import { twMerge } from "tailwind-merge";
+    import { getSizeStyleClass } from "../../../styles/size.js";
+
+    import BaseInput from "../helper/BaseInput.svelte";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        element = $bindable(),
+        label = "",
+        labelClass = "",
+        divClass = "", 
+        outerDivClass = "",
+        icon = undefined,
+        placeholder = "",
+        value = $bindable(),
+        required = false,
+        disabled = false,
+        size = "md",
+        radius = "md",
+        id = `textarea-${count++}`,
+        ...restProps
+    }: TextareaProps = $props();
+
+    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 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 py-2.5!";
+
+    let combinedClass = $derived(twMerge(defaultClass, sizeClasses, labelSizeClass, className));
+    let combinedDivClass = $derived(twMerge(divClass));
+</script>
+
+<BaseInput
+    {children}
+    {className}
+    {label}
+    {labelClass}
+    divClass={combinedDivClass}
+    {outerDivClass}
+    {value}
+    {required}
+    {disabled}
+    {size}
+    {radius}
+    {id}
+    bind:wrapper={element}
+    {...restProps}>
+
+
+    {#snippet innerDivElement()}
+        <textarea
+            {id}
+            bind:value={value}
+            class={combinedClass}
+            {required}
+            {disabled}
+            placeholder={placeholder}
+            aria-disabled={disabled}
+            style={customStyle}
+            {...restProps}></textarea>
+    {/snippet}
+</BaseInput>
+

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

@@ -0,0 +1,4 @@
+import type { TextareaProps } from "./types";
+declare const Index: import("svelte").Component<TextareaProps, {}, "element" | "value">;
+type Index = ReturnType<typeof Index>;
+export default Index;

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

@@ -0,0 +1,3 @@
+import type { BaseInputProps } from "../../../types/BaseComponent";
+export interface TextareaProps extends BaseInputProps {
+}

package/dist/components/inputs/Textarea/types.js

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

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/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/styles/posititon.d.ts

@@ -1,3 +1,4 @@
 export type PositionStyle = "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center";
 export type TooltipPosition = "top" | "right" | "bottom" | "left";
 export declare const positionParts: Record<PositionStyle, string>;
+export declare const modalPositionParts: Record<PositionStyle, string>;

package/dist/styles/posititon.js

@@ -9,3 +9,14 @@ export const positionParts = {
     "bottom-right": "bottom-4 right-4",
     "center": "top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
 };
+export const modalPositionParts = {
+    "center": "items-center justify-center",
+    "top": "items-center justify-start pt-4",
+    "bottom": "items-center justify-end pb-4",
+    "left": "items-start justify-center pl-4",
+    "right": "items-end justify-center pr-4",
+    "top-left": "items-start justify-start p-4",
+    "top-right": "items-end justify-start p-4",
+    "bottom-left": "items-start justify-end p-4",
+    "bottom-right": "items-end justify-end p-4",
+};

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.72",
+	"version": "0.1.74",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",