@valerius_petrini/corekit-ui 0.1.65 → 0.1.69

package/dist/styles/size.js

@@ -1,10 +1,11 @@
+export const sizeStyles = [
+    "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full", "none"
+];
 export const sizeStyleParts = {
     xs: {
-        button: "text-xs h-4 px-1 py-0.5",
-        buttonIcon: "text-xs h-4 w-4 p-0.5",
         radius: "rounded-xs",
         text: "text-xs",
-        card: "w-xs",
+        card: "max-w-xs",
         form: "h-5 pt-1 pb-0.25",
         formLabel: "text-[8px]",
         formLabelSelected: "text-[6px] top-1",
@@ -13,11 +14,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-2 w-2"
     },
     sm: {
-        button: "text-sm h-6 px-2 py-1",
-        buttonIcon: "text-sm h-6 w-6 p-1",
         radius: "rounded-sm",
         text: "text-sm",
-        card: "w-sm",
+        card: "max-w-sm",
         form: "h-7 pt-3 pb-0.5",
         formLabel: "text-[10px]",
         formLabelSelected: "text-[8px] top-1.5",
@@ -26,11 +25,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-3 w-3"
     },
     md: {
-        button: "text-base h-8 px-3 py-1.5",
-        buttonIcon: "text-base h-8 w-8 p-1.5",
         radius: "rounded-md",
         text: "text-base",
-        card: "w-md",
+        card: "max-w-md",
         form: "h-9 pt-4 pb-1",
         formLabel: "text-xs",
         formLabelSelected: "text-[10px] top-2",
@@ -39,11 +36,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-4 w-4"
     },
     lg: {
-        button: "text-lg h-10 px-4 py-2",
-        buttonIcon: "text-lg h-10 w-10 p-2",
         radius: "rounded-lg",
         text: "text-lg",
-        card: "w-lg",
+        card: "max-w-lg",
         form: "h-[44px] pt-5 pb-2",
         formLabel: "text-sm",
         formLabelSelected: "text-xs top-2.5",
@@ -52,11 +47,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-5 w-5"
     },
     xl: {
-        button: "text-xl h-12 px-5 py-2.5",
-        buttonIcon: "text-xl h-12 w-12 p-2.5",
         radius: "rounded-xl",
         text: "text-xl",
-        card: "w-xl",
+        card: "max-w-xl",
         form: "h-[52px] pt-6 pb-3",
         formLabel: "text-base",
         formLabelSelected: "text-sm top-3",
@@ -65,11 +58,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-6 w-6"
     },
     "2xl": {
-        button: "text-2xl h-14 px-6 py-3",
-        buttonIcon: "text-2xl h-14 w-14 p-3",
         radius: "rounded-2xl",
         text: "text-2xl",
-        card: "w-2xl",
+        card: "max-w-2xl",
         form: "h-[60px] pt-7 pb-4",
         formLabel: "text-lg",
         formLabelSelected: "text-base top-3.5",
@@ -78,11 +69,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-7 w-7"
     },
     "3xl": {
-        button: "text-3xl h-16 px-7 py-3.5",
-        buttonIcon: "text-3xl h-16 w-16 p-3.5",
         radius: "rounded-3xl",
         text: "text-3xl",
-        card: "w-3xl",
+        card: "max-w-3xl",
         form: "h-[68px] pt-8 pb-5",
         formLabel: "text-xl",
         formLabelSelected: "text-lg top-4",
@@ -91,11 +80,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-8 w-8"
     },
     "4xl": {
-        button: "text-4xl h-18 px-8 py-4",
-        buttonIcon: "text-4xl h-18 w-18 p-4",
         radius: "rounded-4xl",
         text: "text-4xl",
-        card: "w-4xl",
+        card: "max-w-4xl",
         form: "h-[76px] pt-9 pb-6",
         formLabel: "text-2xl",
         formLabelSelected: "text-xl top-4.5",
@@ -104,11 +91,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-9 w-9"
     },
     "5xl": {
-        button: "text-5xl h-20 px-9 py-4.5",
-        buttonIcon: "text-5xl h-20 w-20 p-4.5",
         radius: "rounded-[2.5rem]",
         text: "text-5xl",
-        card: "w-5xl",
+        card: "max-w-5xl",
         form: "h-[84px] pt-10 pb-5",
         formLabel: "text-3xl",
         formLabelSelected: "text-2xl top-5",
@@ -117,11 +102,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-10 w-10"
     },
     "6xl": {
-        button: "text-6xl h-24 px-10 py-5",
-        buttonIcon: "text-6xl h-24 w-24 p-5",
         radius: "rounded-[3rem]",
         text: "text-6xl",
-        card: "w-6xl",
+        card: "max-w-6xl",
         form: "h-[92px] pt-12 pb-6",
         formLabel: "text-4xl",
         formLabelSelected: "text-3xl top-[22px]",
@@ -130,11 +113,9 @@ export const sizeStyleParts = {
         buttonLoader: "h-11 w-11"
     },
     full: {
-        button: "w-full text-base h-8 px-3 py-1",
-        buttonIcon: "w-full aspect-square text-base p-1",
         radius: "rounded-full",
         text: "w-full text-base",
-        card: "w-full",
+        card: "max-w-full",
         form: "h-9 pt-4 pb-1",
         formLabel: "text-xs",
         formLabelSelected: "text-[10px] top-2",
@@ -143,8 +124,6 @@ export const sizeStyleParts = {
         buttonLoader: "h-4 w-4"
     },
     none: {
-        button: "p-0 h-auto text-base",
-        buttonIcon: "p-0 h-auto w-auto text-base",
         radius: "rounded-none",
         text: "",
         card: "",
@@ -161,13 +140,14 @@ export function getSizeStyleClass(size, type) {
         return sizeStyleParts[size][type];
     return "";
 }
+export function getSizeStyleClassRecord(size, record) {
+    if (typeof size === "string")
+        return record[size];
+    return "";
+}
 export function getSizeStyle(size, type) {
     if (typeof size === "number") {
         switch (type) {
-            case "button":
-                return `height: ${size}px; padding: ${size / 4}px ${size / 8}px`;
-            case "buttonIcon":
-                return `height: ${size}px; width: ${size}px; padding: ${size / 4}px`;
             case "card":
                 return `width: ${size}px`;
             case "radius":

package/dist/types/BaseComponent.d.ts

@@ -1,5 +1,23 @@
+import type { SizeStyle } from "$styles/size";
+import type { Component } from "svelte";
 export interface BaseComponentProps {
     children?: any;
     class?: string;
     [key: string]: any;
 }
+export type InputVariant = "default" | "floating";
+export interface BaseInputProps extends BaseComponentProps {
+    label?: string;
+    labelClass?: string;
+    divClass?: string;
+    outerDivClass?: string;
+    value?: any;
+    required?: boolean;
+    disabled?: boolean;
+    variant?: InputVariant;
+    size?: SizeStyle;
+    radius?: SizeStyle;
+    icon?: Component;
+    wrapper?: HTMLElement;
+    id?: `${string}-${string}-${string}-${string}-${string}`;
+}

package/dist/utils/color.d.ts

@@ -0,0 +1,16 @@
+export declare function hslToHex(h: number, s: number, l: number): string;
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function hexToHsv(hex: string): {
+    h: number;
+    s: number;
+    v: number;
+};
+export declare function hexToHsl(hex: string): {
+    h: number;
+    s: number;
+    l: number;
+};

package/dist/utils/color.js

@@ -0,0 +1,70 @@
+export function hslToHex(h, s, l) {
+    s /= 100;
+    l /= 100;
+    const k = (n) => (n + h / 30) % 12;
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+    const r = Math.round(f(0) * 255);
+    const g = Math.round(f(8) * 255);
+    const b = Math.round(f(4) * 255);
+    return '#' + [r, g, b]
+        .map(v => v.toString(16).padStart(2, '0'))
+        .join('');
+}
+export function hexToRgb(hex) {
+    const bigint = parseInt(hex.replace('#', ''), 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return { r, g, b };
+}
+export function hexToHsv(hex) {
+    const { r, g, b } = hexToRgb(hex);
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    let h = 0, s = 0, v = max;
+    if (max !== min) {
+        s = (max - min) / max;
+        switch (max) {
+            case rNorm:
+                h = (gNorm - bNorm) / (max - min) + (gNorm < bNorm ? 6 : 0);
+                break;
+            case gNorm:
+                h = (bNorm - rNorm) / (max - min) + 2;
+                break;
+            case bNorm:
+                h = (rNorm - gNorm) / (max - min) + 4;
+                break;
+        }
+        h *= 60;
+    }
+    return { h, s: s * 100, v: v * 100 };
+}
+export function hexToHsl(hex) {
+    const { r, g, b } = hexToRgb(hex);
+    const rNorm = r / 255;
+    const gNorm = g / 255;
+    const bNorm = b / 255;
+    const max = Math.max(rNorm, gNorm, bNorm);
+    const min = Math.min(rNorm, gNorm, bNorm);
+    let h = 0, s = 0, l = (max + min) / 2;
+    if (max !== min) {
+        s = l > 0.5 ? (max - min) / (2 - max - min) : (max - min) / (max + min);
+        switch (max) {
+            case rNorm:
+                h = (gNorm - bNorm) / (max - min) + (gNorm < bNorm ? 6 : 0);
+                break;
+            case gNorm:
+                h = (bNorm - rNorm) / (max - min) + 2;
+                break;
+            case bNorm:
+                h = (rNorm - gNorm) / (max - min) + 4;
+                break;
+        }
+        h *= 60;
+    }
+    return { h, s: s * 100, l: l * 100 };
+}

package/package.json

@@ -1,17 +1,17 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.65",
+	"version": "0.1.69",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",
 	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+		"dev": "storybook dev -p 6006",
+		"build": "svelte-package -i src/lib && publint",
+		"prepack": "svelte-package -i src/lib && publint",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"files": [
 		"dist",
@@ -35,26 +35,38 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.50.2",
+		"@chromatic-com/storybook": "^5.1.2",
+		"@storybook/addon-a11y": "^10.3.6",
+		"@storybook/addon-docs": "^10.3.6",
+		"@storybook/addon-svelte-csf": "^5.1.2",
+		"@storybook/addon-vitest": "^10.3.6",
+		"@storybook/svelte-vite": "^10.3.6",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.1.18",
 		"@types/bytes": "^3.1.5",
+		"@types/node": "^25.6.0",
+		"@vitest/browser-playwright": "^4.1.5",
+		"@vitest/coverage-v8": "^4.1.5",
+		"playwright": "^1.59.1",
 		"publint": "^0.3.17",
+		"storybook": "^10.3.6",
+		"storybook-dark-mode": "^5.0.0",
 		"svelte": "^5.51.0",
 		"svelte-check": "^4.4.2",
 		"tailwindcss": "^4.1.18",
 		"typescript": "^5.9.3",
-		"vite": "^7.3.1"
+		"vite": "^7.3.1",
+		"vitest": "^4.1.5"
 	},
 	"keywords": [
 		"components",
 		"svelte"
 	],
 	"dependencies": {
+		"@floating-ui/dom": "^1.7.6",
 		"@lucide/svelte": "^1.3.0",
 		"@valerius_petrini/corekit-scripts": "^1.0.0",
 		"bytes": "^3.1.2",

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

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

package/dist/components/Button.svelte

@@ -1,66 +0,0 @@
-<script lang="ts">
-    import { generateColorStyle } from "../styles/color.js";
-    import { getSizeStyle, getSizeStyleClass, sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
-    import type { ButtonProps } from "../types/Button.js";
-    import { twMerge } from "tailwind-merge";
-    import { getLinkProps } from "../utils/link.js";
-  import Loader from "./Loader.svelte";
-
-    let { 
-        children = undefined, 
-        class: className = "", 
-        pill = false,
-        icon = false,
-        square = false,
-        href = undefined,
-        color = "none",
-        variant = "full",
-        disabled = false,
-        external = false,
-        size = "md",
-        radius = "md",
-        loading = false,
-        ...restProps
-    }: ButtonProps = $props();
-
-    const defaultClass = "inline-flex items-center justify-center gap-2 transition-colors duration-300 ease-in-out text-white whitespace-nowrap";
-    const disabledClass = $derived(disabled || loading ? "opacity-50 pointer-events-none" : "cursor-pointer");
-    const iconClass = $derived(icon ? "p-0 flex-none" : "h-fit");
-    const pillClass = $derived((pill || icon) && "rounded-full");
-    const squareClass = $derived(square && "aspect-square rounded-none");
-
-    const mergedClass = $derived(twMerge(
-        defaultClass, 
-        generateColorStyle(color, variant),
-        disabledClass,
-        getSizeStyleClass(size, icon ? "buttonIcon" : "button"),
-        getSizeStyleClass(radius, "radius"),
-        iconClass,
-        pillClass,
-        squareClass,
-        className
-    ));
-
-    const mergedStyle = $derived([
-        getSizeStyle(size, icon ? "buttonIcon" : "button"), 
-        getSizeStyle(radius, "radius"), 
-        restProps.style
-    ].filter(Boolean).join("; "));
-
-    const anchorProps = $derived(getLinkProps(href, external, disabled || loading));
-</script>
-
-<svelte:element 
-    this={href ? "a" : "button"} 
-    class={mergedClass} 
-    disabled={disabled || loading}
-    aria-disabled={disabled || loading}
-    type={href ? undefined : (restProps.type || "button")}
-    style={mergedStyle}
-    {...anchorProps}
-    {...restProps}>
-    {#if loading}
-        <Loader color="white" class="border-2 border-loader-btn-color {getSizeStyleClass(size, "buttonLoader")}"/>
-    {/if}
-    {@render children?.()}
-</svelte:element>

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,3 +0,0 @@
-declare const KBD: import("svelte").Component<any, {}, "">;
-type KBD = ReturnType<typeof KBD>;
-export default KBD;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-import type { ToastProps } from "../types/Toast.ts";
-import type { Component } from "svelte";
-declare const Toast: Component<ToastProps, {}, "">;
-type Toast = ReturnType<typeof Toast>;
-export default Toast;

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

@@ -1,3 +0,0 @@
-declare const Toaster: import("svelte").Component<Record<string, never>, {}, "">;
-type Toaster = ReturnType<typeof Toaster>;
-export default Toaster;

package/dist/components/Tooltip.svelte

@@ -1,124 +0,0 @@
-<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>