@valerius_petrini/corekit-ui 0.1.61 → 0.1.63

package/dist/components/Input.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import type { InputProps } from "../types/Input.js";
+    import type { InputProps, InputRequirements } from "../types/Input.js";
     import { twMerge } from "tailwind-merge";
     import Text from "./Text.svelte";
-    import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+    import { getSizeStyleClass, sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
     import { type Component } from "svelte";
     import Button from "./Button.svelte";
 
@@ -13,6 +13,9 @@
     import EyeOff from "@lucide/svelte/icons/eye-off";
     import ChevronUp from "@lucide/svelte/icons/chevron-up";
     import ChevronDown from "@lucide/svelte/icons/chevron-down";
+    import X from "@lucide/svelte/icons/x";
+    import Check from "@lucide/svelte/icons/check";
+  import { slide } from "svelte/transition";
 
     let { 
         children = undefined, 
@@ -29,7 +32,8 @@
         onblur = undefined,
         required = false,
         disabled = false,
-        validInputRegex = undefined,
+        requirements = undefined,
+        valid = $bindable(true),
         size = "md",
         radius = "md",
         id = crypto.randomUUID(),
@@ -41,33 +45,10 @@
 
     let isHovered = $state(false);
 
-    const sizeParts = $derived(typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null);
-    const radiusParts = $derived(typeof radius === "string" ? sizeStyleParts[radius as SizeStyleTheme] : null);
-
-    const sizeClasses = $derived.by(() => {
-        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
-
-        return twMerge(
-            parts?.form
-        );
-    });
-
-    const labelSizeClass = $derived.by(() => {
-        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
-        return parts?.formLabel || "";
-    });
-
-    const divSizeClass = $derived.by(() => {
-        const radiusParts = typeof radius === "string" ? sizeStyleParts[radius as SizeStyleTheme] : null;
-        return twMerge(
-            radiusParts?.radius
-        );
-    });
-
-    const selectedLabelSizeClass = $derived.by(() => {
-        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
-        return parts?.formLabelSelected || "";
-    });
+    const sizeClasses = $derived(getSizeStyleClass(size, "form"));
+    const labelSizeClass = $derived(getSizeStyleClass(size, "formLabel"));
+    const divSizeClass = $derived(getSizeStyleClass(radius, "radius"));
+    const selectedLabelSizeClass = $derived(getSizeStyleClass(size, "formLabelSelected"));
 
     const customStyle = $derived.by(() => {
         const styles: string[] = [];
@@ -97,20 +78,25 @@
 
     const isFloating = $derived(variant === "floating");
     const hasContent = $derived(value !== undefined && value !== null && value.toString().length > 0);
-    const isValid = $derived(!touched || !validInputRegex || validInputRegex.test(value || ""));
     const lifted = $derived(isFloating && (isFocused || hasContent));
 
     const Icon = $derived(icon ?? ({
         email: Mail, password: Lock, tel: Phone
     }[restProps.type as string] as Component ?? null));
 
-    let defaultClass = "text-main-text w-full rounded-full outline-none px-1.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0";
+    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";
     let defaultLabelClass = "block text-sub-text font-medium mb-1 duration-100 pointer-events-none truncate w-fit";
-    let defaultDivClass = "relative *:transition-all flex-center bg-form-background border-[1px] border-form-border focus-within:ring-1 focus-within:ring-blue-500";
+    let defaultDivClass = "relative *:transition-all transition-colors flex-center bg-form-background border-[1px] border-form-border focus-within:ring-1 focus-within:ring-blue-500";
     let iconContainerClass = "h-5 aspect-square px-1 py-0!";
     let floatingLabelClass = "absolute w-full";
     let iconClass = "h-full aspect-square text-sub-text";
 
+    let inputRadius = $derived.by(() => {
+        if (restProps.type === "password") return "rounded-none";
+        if (Icon !== null) return "rounded-r-full"
+        else return "rounded-full";
+    });
+
     let originalLabelClass = "z-0";
     let originalLabelClassInput = "top-1/2 transform -translate-y-1/2";
     let originalSelectedLabelClass = "z-30";
@@ -123,12 +109,12 @@
 
     function handleFocus(e: FocusEvent) {
         isFocused = true;
+        touched = true;
         onfocus?.(e);
     }
 
     function handleBlur(e: FocusEvent) {
         isFocused = false;
-        touched = true;
         onblur?.(e);
     }
 
@@ -140,8 +126,8 @@
     let defaultLabelClassCheck = $derived(variant !== "floating" ? "px-0" : "");
     let selectedLabelClass = $derived(twMerge((isFocused || hasContent) && variant === "floating" ? `${originalSelectedLabelClass} ${selectedLabelSizeClass}` : ""));
     let combinedLabelClass = $derived(twMerge(defaultLabelClass, floatingLabelClassCheck, labelSizeClass, selectedLabelClass, labelClassIcon, defaultLabelClassCheck, labelClass));
-    let combinedClass = $derived(twMerge(defaultClass, sizeClasses, defaultInputClassCheck, labelSizeClass, inputClassIcon, className, isValid ? "" : invalidClass));
-    let combinedDivClass = $derived(twMerge(defaultDivClass, divSizeClass, divFullClass, divClass, disabledClass));
+    let combinedClass = $derived(twMerge(defaultClass, inputRadius, sizeClasses, defaultInputClassCheck, labelSizeClass, inputClassIcon, className));
+    let combinedDivClass = $derived(twMerge(defaultDivClass, divSizeClass, divFullClass, divClass, disabledClass, !isValidInput() && touched && invalidClass));
     let combinedOuterDivClass = $derived(twMerge("flex flex-col bg-transparent border-0 p-0", divSizeClass, divFullClass, outerDivClass, disabledClass));
 
     let EyeComponent = $derived(canSeePassword ? Eye : EyeOff);
@@ -183,6 +169,25 @@
             decrementInterval = null;
         }
     }
+
+    function testRequirement(requirement: RegExp | ((value: any) => boolean)) {
+        if (typeof requirement === "function")
+            return requirement(value || "");
+        else if (requirement instanceof RegExp)
+            return requirement.test(value || "");
+        return true;
+    }
+
+    function isValidInput() {
+        for (const requirement of requirements || [])
+            if (!testRequirement(requirement.requirements))
+                return false;
+        return true;
+    }
+
+    $effect(() => {
+        valid = isValidInput();
+    });
 </script>
 
 {#snippet labelElement()}
@@ -251,11 +256,27 @@
     </div>
 {/snippet}
 
-{#if variant !== "floating"}
-    <div class={combinedOuterDivClass}>
+<div class={combinedOuterDivClass}>
+    {#if variant !== "floating"}
         {@render labelElement()}
         {@render innerDivElement()}
-    </div>
-{:else}
-    {@render innerDivElement()}
-{/if}
+    {:else}
+        {@render innerDivElement()}
+    {/if}
+
+    {#if touched && requirements}
+        <div class="mt-1 text-xs" transition:slide={{ duration: 300 }}>
+            {#each requirements as req}
+                {@const isReqMet = testRequirement(req.requirements)}
+                {@const reqClass = isReqMet ? "text-green-500" : "text-red-500"}
+                <div class="flex w-full items-center gap-1 transition-colors {reqClass}">
+                    <div class="relative w-4 h-4">
+                        <Check class="w-4 h-4 absolute transition-all duration-150 {isReqMet ? 'opacity-100 scale-100' : 'opacity-0 scale-0'}"/>
+                        <X     class="w-4 h-4 absolute transition-all duration-150 {isReqMet ? 'opacity-0 scale-0' : 'opacity-100 scale-100'}"/>
+                    </div>
+                    <Text tag="span" class="text-xs text-inherit">{req.label}</Text>
+                </div>
+            {/each}
+        </div>
+    {/if}
+</div>

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

@@ -1,5 +1,5 @@
 import type { InputProps } from "../types/Input.ts";
 import { type Component } from "svelte";
-declare const Input: Component<InputProps, {}, "value">;
+declare const Input: Component<InputProps, {}, "value" | "valid">;
 type Input = ReturnType<typeof Input>;
 export default Input;

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

@@ -2,6 +2,10 @@ import type { Component } from "svelte";
 import type { SizeStyle } from "../styles/size.ts";
 import type { BaseComponentProps } from "./BaseComponent.ts";
 export type InputVariant = "default" | "floating";
+export interface InputRequirements {
+    label: string;
+    requirements: RegExp | ((value: any) => boolean);
+}
 export interface InputProps extends BaseComponentProps {
     label?: string;
     labelClass?: string;
@@ -18,7 +22,8 @@ export interface InputProps extends BaseComponentProps {
     step?: number;
     onfocus?: (e?: FocusEvent) => void;
     onblur?: (e?: FocusEvent) => void;
-    validInputRegex?: RegExp;
+    requirements?: InputRequirements[];
+    valid?: boolean;
     size?: SizeStyle;
     radius?: SizeStyle;
     id?: `${string}-${string}-${string}-${string}-${string}`;

package/dist/types/Input.js

@@ -1,3 +1,4 @@
 ;
 ;
+;
 export {};

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