@valerius_petrini/corekit-ui 0.1.62 → 0.1.63

package/dist/components/NavbarDropdown.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    import { fly } from "svelte/transition";
+    import NavbarElement from "./NavbarElement.svelte";
+    import { tick } from "svelte";
+    import type { NavbarDropdownProps } from "../types/Navbar.js";
+
+    let {
+        children = undefined, 
+        class: className = "", 
+        wrapperClass = "",
+        label = "",
+        element = undefined,
+        ...restProps
+    }: 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);
+
+    function calculateOverflow() {
+        if (!dropdownRef) return;
+
+        offsetX = 0;
+
+        const menuRect = dropdownRef.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const padding = 12;
+
+        flipUp = menuRect.bottom > window.innerHeight - padding;
+
+        if (menuRect.right > vw - padding)
+            offsetX = -(menuRect.right - (vw - padding));
+        else if (menuRect.left < padding)
+            offsetX = padding - menuRect.left;
+        else
+            offsetX = 0;
+    }
+
+    async function toggle() {
+        open = !open;
+        if (open) {
+            await tick();
+            calculateOverflow();
+        } else {
+            offsetX = 0;
+        }
+    }
+
+    function handleClickOutside(event: MouseEvent) {
+        if (dropdownRef && !dropdownRef.contains(event.target as Node) && wrapperRef && !wrapperRef.contains(event.target as Node)) {
+            open = false;
+            offsetX = 0;
+        }
+    }
+</script>
+
+<svelte:window onclick={handleClickOutside}/>
+
+<div class="relative" bind:this={wrapperRef}>
+    <NavbarElement onclick={toggle} class={className} {...restProps} aria-haspopup="true" aria-expanded={open}>
+        {label}
+        {#if element}
+            {@render element()}
+        {/if}
+    </NavbarElement>
+
+    {#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}>
+                {@render children?.()}
+            </button>
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { NavbarDropdownProps } from "../types/Navbar.js";
+declare const NavbarDropdown: import("svelte").Component<NavbarDropdownProps, {}, "">;
+type NavbarDropdown = ReturnType<typeof NavbarDropdown>;
+export default NavbarDropdown;

package/dist/components/NavbarSeparator.svelte

@@ -1 +1,11 @@
-<div class="ml-auto"></div>
+<script lang="ts">
+    import { NavbarSeparatorClasses, type NavbarSeparatorProps } from "../types/Navbar.js";
+
+    let {
+        variant = "dynamic",
+        class: className = "",
+        ...restProps
+    }: NavbarSeparatorProps = $props();
+</script>
+
+<div class={NavbarSeparatorClasses[variant]} {...restProps}></div>

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

@@ -1,26 +1,4 @@
+import { type NavbarSeparatorProps } from "../types/Navbar.js";
+declare const NavbarSeparator: import("svelte").Component<NavbarSeparatorProps, {}, "">;
+type NavbarSeparator = ReturnType<typeof NavbarSeparator>;
 export default NavbarSeparator;
-type NavbarSeparator = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const NavbarSeparator: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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;
-}

package/dist/components/Tooltip.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+    import type { TooltipComponent } from "../types/Tooltip.js";
+    import { type Snippet } from "svelte";
+    import { fly } from "svelte/transition";
+
+    let {
+        text,
+        position = "top",
+        delay = 0,
+        children
+    }: TooltipComponent = $props();
+
+    let visible = $state(false);
+    let resolvedPosition: string | null = $state(null);
+    let offsetX = $state(0);
+    let trigger: HTMLDivElement;
+    let tooltip: HTMLDivElement | null = $state(null);
+    let timeout: ReturnType<typeof setTimeout>;
+    let arrowX = $derived(-offsetX);
+
+    function calculatePosition() {
+        resolvedPosition = position;
+        if (!trigger) return;
+
+        const rect = trigger.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+
+        if (position === "top" && rect.top < 40) resolvedPosition = "bottom";
+        else if (position === "bottom" && rect.bottom > vh - 40) resolvedPosition = "top";
+        else if (position === "left" && rect.left < 120) resolvedPosition = "right";
+        else if (position === "right" && rect.right > vw - 120) resolvedPosition = "left";
+        else resolvedPosition = position;
+    }
+
+    function calculateOverflow() {
+        if (!tooltip || !trigger) return;
+
+        const triggerRect = trigger.getBoundingClientRect();
+        const tooltipRect = tooltip.getBoundingClientRect();
+        const vw = window.innerWidth;
+
+        const triggerCenter = triggerRect.left + triggerRect.width / 2;
+
+        const tooltipLeft = triggerCenter - tooltipRect.width / 2;
+        const tooltipRight = triggerCenter + tooltipRect.width / 2;
+
+        const padding = 8;
+
+        if (tooltipRight > vw - padding)
+            offsetX = -(tooltipRight - (vw - padding));
+        else if (tooltipLeft < padding)
+            offsetX = padding - tooltipLeft;
+        else
+            offsetX = 0;
+    }
+
+    function show() {
+        calculatePosition();
+        timeout = setTimeout(() => {
+            visible = true;
+            requestAnimationFrame(calculateOverflow);
+        }, delay);
+    }
+
+    function hide() {
+        clearTimeout(timeout);
+        visible = false;
+    }
+
+    const positionClasses: Record<string, string> = {
+        top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+        bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+        left: "right-full top-1/2 -translate-y-1/2 mr-2",
+        right: "left-full top-1/2 -translate-y-1/2 ml-2"
+    };
+
+    const arrowClasses: Record<string, string> = {
+        top: "top-full left-1/2 -translate-x-1/2 border-t-form-background",
+        bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-form-background",
+        left: "left-full top-1/2 -translate-y-1/2 border-l-form-background",
+        right: "right-full top-1/2 -translate-y-1/2 border-r-form-background"
+    };
+
+    const flyParams = $derived.by(() => {
+        const pos = resolvedPosition || position;
+
+        const duration = 100;
+        const distance = 8;
+        if (pos == "top")
+            return { y: distance, duration };
+        else if (pos == "bottom")
+            return { y: -distance, duration };
+        const x = pos == "right" ? -distance : distance;
+        return { x, duration };
+    });
+</script>
+
+<div
+    bind:this={trigger}
+    class="relative inline-flex w-fit h-fit"
+    onmouseenter={show}
+    onmouseleave={hide}
+    role="tooltip">
+    {@render children()}
+
+    {#if visible}
+        <div
+            bind:this={tooltip}
+            style="transform: translateX(calc(-50% + {offsetX}px));"
+            class="absolute z-999999 {positionClasses[resolvedPosition || position]} translate-x-0! pointer-events-none">
+            <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}
+</div>

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

@@ -0,0 +1,4 @@
+import type { TooltipComponent } from "../types/Tooltip.js";
+declare const Tooltip: import("svelte").Component<TooltipComponent, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ 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 { default as NavbarDropdown } from "./components/NavbarDropdown.svelte";
 export { default as Input } from "./components/Input.svelte";
 export { default as FileInput } from "./components/FileInput.svelte";
 export { default as Select } from "./components/Select.svelte";
@@ -17,6 +18,7 @@ export { default as Table } from "./components/Table.svelte";
 export { default as Toast } from "./components/Toast.svelte";
 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 { fbmBackground } from "./actions/fbm.ts";
 export { toast } from "./actions/toast.svelte.ts";
 export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.ts";

package/dist/index.js

@@ -5,6 +5,7 @@ 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 { default as NavbarDropdown } from "./components/NavbarDropdown.svelte";
 export { default as Input } from "./components/Input.svelte";
 export { default as FileInput } from "./components/FileInput.svelte";
 export { default as Select } from "./components/Select.svelte";
@@ -17,5 +18,6 @@ export { default as Table } from "./components/Table.svelte";
 export { default as Toast } from "./components/Toast.svelte";
 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 { fbmBackground } from "./actions/fbm.js";
 export { toast } from "./actions/toast.svelte.js";

package/dist/styles/layout.css

@@ -99,4 +99,5 @@ input[type="number"]::-webkit-inner-spin-button {
 
 input[type="number"] {
     -moz-appearance: textfield;
+    appearance: textfield;
 }

package/dist/styles/posititon.d.ts

@@ -1,2 +1,3 @@
 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>;

package/dist/types/Navbar.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from "svelte";
+import type { Component, Snippet } from "svelte";
 import type { BaseComponentProps } from "./BaseComponent.ts";
 export interface NavbarProps extends BaseComponentProps {
     classTop?: string;
@@ -13,8 +13,21 @@ export interface NavbarElementProps extends BaseComponentProps {
 export interface SideNavbarProps extends BaseComponentProps {
     items?: SideNavbarItem[];
 }
+export type NavbarSeparatorVariant = "vertical" | "horizontal" | "dynamic";
+export declare const NavbarSeparatorClasses: Record<NavbarSeparatorVariant, string>;
+export interface NavbarSeparatorProps extends BaseComponentProps {
+    variant?: NavbarSeparatorVariant;
+}
 export interface SideNavbarItem {
     href: string;
     label: string;
     icon: Component;
 }
+export interface NavbarDropdownProps extends BaseComponentProps {
+    label?: string;
+    element?: Snippet;
+    classTop?: string;
+    wrapperClass?: string;
+    activeClass?: string;
+    threshold?: number;
+}

package/dist/types/Navbar.js

@@ -1,3 +1,7 @@
 ;
 ;
-export {};
+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",
+    "dynamic": "ml-auto"
+};

package/dist/types/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import type { TooltipPosition } from "../styles/posititon.js";
+import type { BaseComponentProps } from "./BaseComponent.ts";
+export interface TooltipComponent extends BaseComponentProps {
+    text?: string;
+    position?: TooltipPosition;
+    delay?: number;
+}

package/dist/types/Tooltip.js

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

package/package.json

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