@valerius_petrini/corekit-ui 0.1.51 → 0.1.53

package/dist/actions/fbm.d.ts

@@ -0,0 +1,10 @@
+export interface FBMBackgroundOptions {
+    octaves?: number;
+    warps?: number;
+    scale?: number;
+    seed?: number;
+}
+export declare function fbmBackground(canvas: HTMLCanvasElement, options?: FBMBackgroundOptions): {
+    update(newOptions: FBMBackgroundOptions): void;
+    destroy(): void;
+} | undefined;

package/dist/actions/fbm.js

@@ -0,0 +1,199 @@
+const FBM_VERTEX_SHADER_SOURCE = `
+attribute vec4 aVertexPosition;
+
+void main() {
+    gl_Position = aVertexPosition;
+}`;
+const FBM_FRAGMENT_SHADER_SOURCE = `
+precision mediump float;
+
+uniform vec2 u_resolution;
+uniform float u_seed;
+uniform float u_scale;
+uniform int u_octaves;
+uniform int u_warp;
+
+const int maxOctaves = 20;
+const int maxWarps = 5;
+
+float rand(vec2 n) { 
+    return fract(sin(dot(n.xy + u_seed, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+float noise(vec2 p){
+    vec2 i = floor(p);
+    vec2 f = fract(p);
+
+    // Four corners in 2D of a tile
+    float a = rand(i);
+    float b = rand(i + vec2(1.0, 0.0));
+    float c = rand(i + vec2(0.0, 1.0));
+    float d = rand(i + vec2(1.0, 1.0));
+
+    vec2 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0);
+    
+    return mix(a, b, u.x) +
+            (c - a)*  u.y * (1.0 - u.x) +
+            (d - b) * u.x * u.y;
+}
+
+float fbm( in vec2 x, in float H ) {
+    float v = 00.0000;
+    float a = 0.5;
+    vec2 shift = vec2(100);
+    // Rotate to reduce axial bias
+    mat2 rot = mat2(0.877, 0.479, -0.479, 0.877);
+    for (int i = 0; i < maxOctaves; ++i) {
+        v += a * noise(x);
+        x = rot * x * 2.0 + shift;
+        a *= 0.5;
+        if (i > u_octaves) break;
+    }
+    return v;
+}
+
+void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    uv.x *= u_resolution.x / u_resolution.y;
+
+    float baseNoise = fbm(uv * u_scale, 1.2);
+
+    vec2 warp = uv;
+    for (int i = 0; i < maxWarps; ++i) {
+        warp += vec2(fbm(warp * 2.0, 1.0), fbm(warp * 4.0 + vec2(10.2), 1.0));
+        if (i > u_warp) break;
+    }
+
+    baseNoise = fbm(warp * u_scale, 1.2);
+
+    gl_FragColor = vec4(vec3(baseNoise), 1.0);
+}`;
+function loadShaders(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader) {
+        console.error("Unable to create shader");
+        return null;
+    }
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
+        gl.deleteShader(shader);
+        return null;
+    }
+    return shader;
+}
+function initializeShaders(gl, vertexSource, fragmentSource) {
+    const vertexShader = loadShaders(gl, gl.VERTEX_SHADER, vertexSource);
+    const fragmentShader = loadShaders(gl, gl.FRAGMENT_SHADER, fragmentSource);
+    if (!vertexShader || !fragmentShader)
+        return null;
+    const shaderProgram = gl.createProgram();
+    if (!shaderProgram) {
+        console.error("Unable to create shader program");
+        return null;
+    }
+    gl.attachShader(shaderProgram, vertexShader);
+    gl.attachShader(shaderProgram, fragmentShader);
+    gl.linkProgram(shaderProgram);
+    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        console.error("Unable to initialize the shader program: " + gl.getProgramInfoLog(shaderProgram));
+        return null;
+    }
+    return shaderProgram;
+}
+function initBuffers(gl) {
+    const positionBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    const vertices = new Float32Array([
+        -1.0, -1.0,
+        1.0, -1.0,
+        -1.0, 1.0,
+        1.0, 1.0,
+    ]);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    return {
+        position: positionBuffer,
+    };
+}
+export function fbmBackground(canvas, options = {}) {
+    let gl = canvas.getContext("webgl", { antialias: true, premultipliedAlpha: false, preserveDrawingBuffer: true });
+    if (!gl) {
+        console.error("WebGL not supported");
+        return;
+    }
+    let currentOptions = { ...options };
+    let internalSeed = options.seed ?? Math.random() * 1000;
+    const shaderProgram = initializeShaders(gl, FBM_VERTEX_SHADER_SOURCE, FBM_FRAGMENT_SHADER_SOURCE);
+    if (!shaderProgram) {
+        console.error("Failed to initialize shaders");
+        return;
+    }
+    const programInfo = {
+        program: shaderProgram,
+        attribLocations: {
+            vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
+        },
+        uniformLocations: {
+            resolution: gl.getUniformLocation(shaderProgram, "u_resolution"),
+            seed: gl.getUniformLocation(shaderProgram, "u_seed"),
+            scale: gl.getUniformLocation(shaderProgram, "u_scale"),
+            octaves: gl.getUniformLocation(shaderProgram, "u_octaves"),
+            warp: gl.getUniformLocation(shaderProgram, "u_warp"),
+        }
+    };
+    const buffers = initBuffers(gl);
+    function updateCanvasSize() {
+        const DPR = window.devicePixelRatio || 1;
+        const newWidth = Math.floor(canvas.offsetWidth * DPR);
+        const newHeight = Math.floor(canvas.offsetHeight * DPR);
+        if (canvas.width !== newWidth || canvas.height !== newHeight) {
+            canvas.width = newWidth;
+            canvas.height = newHeight;
+            if (gl)
+                gl.viewport(0, 0, canvas.width, canvas.height);
+        }
+    }
+    function render() {
+        updateCanvasSize();
+        if (!gl)
+            return;
+        gl.viewport(0, 0, canvas.width, canvas.height);
+        gl.clearColor(0, 0, 0, 1);
+        gl.clearDepth(1.0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        gl.enable(gl.DEPTH_TEST);
+        gl.depthFunc(gl.LEQUAL);
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+        gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
+        gl.useProgram(programInfo.program);
+        gl.uniform2f(programInfo.uniformLocations.resolution, canvas.width, canvas.height);
+        gl.uniform1f(programInfo.uniformLocations.seed, currentOptions.seed ?? internalSeed);
+        gl.uniform1i(programInfo.uniformLocations.octaves, currentOptions.octaves ?? 4);
+        gl.uniform1i(programInfo.uniformLocations.warp, currentOptions.warps ?? 2);
+        gl.uniform1f(programInfo.uniformLocations.scale, currentOptions.scale ?? 2);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    }
+    const resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(render);
+    });
+    resizeObserver.observe(canvas);
+    render();
+    return {
+        update(newOptions) {
+            const changed = JSON.stringify(currentOptions) !== JSON.stringify(newOptions);
+            if (changed) {
+                currentOptions = { ...newOptions };
+                render();
+            }
+        },
+        destroy() {
+            resizeObserver.disconnect();
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.deleteBuffer(buffers.position);
+            gl.deleteProgram(shaderProgram);
+            gl.getExtension("WEBGL_lose_context")?.loseContext();
+        }
+    };
+}

package/dist/components/Analytics.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { page } from '$app/state'
+    import type { AnalyticsProps } from '../types/Analytics.js';
+
+    let { measurementId }: AnalyticsProps = $props();
+
+    const ANALYTICS_URL = $derived(`https://www.googletagmanager.com/gtag/js?id=${measurementId}`);
+
+    $effect(() => {
+        if (typeof gtag !== 'undefined') {
+            gtag('config', measurementId, {
+                page_title: document.title,
+                page_path: page.url.pathname,
+            })
+        }
+    })
+</script>
+  
+<svelte:head>
+    {#if measurementId}
+        <script async src={ANALYTICS_URL}></script>
+        <script>
+            window.dataLayer = window.dataLayer || [];
+            function gtag() { dataLayer.push(arguments); }
+            gtag('js', new Date());
+        </script>
+    {/if}
+</svelte:head>

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

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import { generateColorStyle } from "../styles/color.js";
+    import { 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";
+
+    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",
+        ...restProps
+    }: ButtonProps = $props();
+
+    const sizeClasses = $derived.by(() => {
+        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
+        const radiusParts = typeof radius === "string" ? sizeStyleParts[radius as SizeStyleTheme] : null;
+
+        return twMerge(
+            icon ? "p-0 flex-none" : "h-fit",
+            parts?.[icon ? "buttonIcon" : "button"],
+            radiusParts?.radius,
+            pill || icon ? "rounded-full" : "",
+            square ? "aspect-square rounded-none" : ""
+        );
+    });
+
+    const customStyle = $derived.by(() => {
+        const styles: string[] = [];
+
+        if (typeof size === "number") {
+            styles.push(`height: ${size}px`);
+            styles.push(icon
+                ? `width: ${size}px; padding: ${size / 8}px`
+                : `padding: ${size / 4}px ${size / 8}px`
+            );
+        }
+
+        if (typeof radius === "number") {
+            styles.push(`border-radius: ${radius}px`);
+        }
+
+        return styles.join("; ");
+    });
+
+    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 ? "opacity-50 pointer-events-none" : "cursor-pointer");
+
+    const mergedClass = $derived(twMerge(
+        defaultClass, 
+        generateColorStyle(color, variant),
+        disabledClass,
+        sizeClasses,
+        className
+    ));
+
+    const mergedStyle = $derived([customStyle, restProps.style].filter(Boolean).join("; "));
+
+    const anchorProps = $derived(getLinkProps(href, external));
+</script>
+
+<svelte:element 
+    this={href ? "a" : "button"} 
+    class={mergedClass} 
+    {disabled}
+    aria-disabled={disabled}
+    type={href ? undefined : (restProps.type || "button")}
+    style={mergedStyle}
+    {...anchorProps}
+    {...restProps}>
+    {@render children?.()}
+</svelte:element>

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

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+    import { cardVariantStyles, type CardProps } from "../types/Card.js";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        href = undefined,
+        external = false,
+        variant = "bordered",
+        size = "md",
+        radius = "md",
+        ...restProps
+    }: CardProps = $props();
+
+    const sizeClasses = $derived.by(() => {
+        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
+        const radiusParts = typeof radius === "string" ? sizeStyleParts[radius as SizeStyleTheme] : null;
+
+        return twMerge(
+            parts?.card,
+            radiusParts?.radius,
+        );
+    });
+
+    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 rounded-lg transition-colors ease-in-out bg-sub-background p-4";
+    let linkClass = "hover:bg-sub-background-hover cursor-pointer";
+    let combinedClass = $derived(twMerge(
+        defaultClass, 
+        href ? linkClass : "",
+        cardVariantStyles[variant],
+        sizeClasses,
+        className
+    ));
+
+    const anchorProps = $derived(href ? {
+        href,
+        target: external ? "_blank" : undefined,
+        rel: external ? "noopener noreferrer" : undefined,
+    } : {});
+</script>
+
+<svelte:element
+    this={href ? "a" : "div"}
+    class={combinedClass}
+    style={customStyle}
+    {...anchorProps}
+    {...restProps}
+>
+    {@render children?.()}
+</svelte:element>

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

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import Text from "./Text.svelte";
+    import type { CheckboxProps } from "../types/Checkbox.js";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        label = "",
+        labelClass = "",
+        divClass = "", 
+        checked = $bindable(),
+        id = crypto.randomUUID(),
+        ...restProps
+    }: CheckboxProps = $props();
+
+    let defaultClass = "z-20 bg-form-input-background text-main-text rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all";
+    let defaultLabelClass = "block text-sub-text font-medium";
+    let defaultDivClass = "relative flex items-center gap-2";
+
+    let combinedLabelClass = $derived(twMerge(defaultLabelClass, labelClass));
+    let combinedClass = $derived(twMerge(defaultClass, className));
+    let combinedDivClass = $derived(twMerge(defaultDivClass, divClass));
+</script>
+
+<div class={combinedDivClass}>
+    <input
+        type="checkbox"
+        id={id}
+        bind:checked={checked}
+        class={combinedClass}
+        {...restProps}/>
+    <Text tag="label" for={id} class={combinedLabelClass}>
+        {label}
+    </Text>
+</div>

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

@@ -0,0 +1,4 @@
+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/FloatingInput.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+    import type { FloatingInputProps } from "../types/FloatingInput.js";
+    import { twMerge } from "tailwind-merge";
+    import Text from "./Text.svelte";
+    import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+    import { type Component } from "svelte";
+    import Button from "./Button.svelte";
+
+    import Mail from "@lucide/svelte/icons/mail";
+    import Lock from "@lucide/svelte/icons/lock";
+    import Phone from "@lucide/svelte/icons/phone";
+    import Eye from "@lucide/svelte/icons/eye";
+    import EyeOff from "@lucide/svelte/icons/eye-off";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        label = "",
+        labelClass = "",
+        divClass = "", 
+        icon = undefined,
+        variant = "default",
+        placeholder = "",
+        value = $bindable(),
+        onfocus = undefined,
+        onblur = undefined,
+        required = false,
+        disabled = false,
+        validInputRegex = undefined,
+        size = "md",
+        radius = "md",
+        id = crypto.randomUUID(),
+        ...restProps
+    }: FloatingInputProps = $props();
+
+    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 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 customLabelStyle = $derived.by(() => {
+        const styles: string[] = [];
+
+        if (typeof size === "number")
+            styles.push(`font-size: ${size / 4}px`);
+
+        return styles.join("; ");
+    });
+
+    let isFocused = $state(false);
+    let touched = $state(false);
+
+    let canSeePassword = $state(false);
+
+    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 ?? ({
+        mail: Mail, password: Lock, tel: Phone
+    }[restProps.type as string] as Component ?? null));
+
+    let defaultClass = "text-main-text w-full rounded outline-none px-1.5 w-full";
+    let defaultLabelClass = "block text-sub-text rounded-md 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 iconContainerClass = "h-5 aspect-square px-1 py-0!";
+    let floatingLabelClass = "absolute w-full";
+    let iconClass = "h-full aspect-square text-sub-text";
+
+    let originalLabelClass = "z-0";
+    let originalLabelClassInput = "top-1/2 transform -translate-y-1/2";
+    let originalSelectedLabelClass = "z-30";
+
+    let invalidClass = "border border-red-500 focus:ring-red-500 bg-[#2E1F1F]";
+
+    let floatingLabelClassFull = $derived(twMerge(originalLabelClassInput, originalLabelClass, floatingLabelClass));
+    let divFullClass = $derived(size === "full" ? "w-full" : "");
+    let disabledClass = $derived(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer");
+
+    function handleFocus(e: FocusEvent) {
+        isFocused = true;
+        onfocus?.(e);
+    }
+
+    function handleBlur(e: FocusEvent) {
+        isFocused = false;
+        touched = true;
+        onblur?.(e);
+    }
+
+    let labelClassIcon = $derived(Icon !== null ? "pl-[32px] pr-2" : "px-1.5");
+    let inputClassIcon = $derived(Icon !== null ? "pl-0 pr-1" : "");
+
+    let defaultInputClassCheck = $derived(variant !== "floating" ? "py-0" : "");
+    let floatingLabelClassCheck = $derived(variant === "floating" ? floatingLabelClassFull : "");
+    let defaultLabelClassCheck = $derived(variant !== "floating" ? "px-1.5" : "");
+    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 combinedOuterDivClass = $derived(twMerge("flex flex-col bg-transparent border-0 p-0", divSizeClass, divFullClass, divClass, disabledClass));
+
+    let EyeComponent = $derived(canSeePassword ? Eye : EyeOff);
+</script>
+
+{#snippet labelElement()}
+    <Text tag="label" for={id} class={combinedLabelClass} style={customLabelStyle}>
+        {label}
+        {#if required}
+            <span class="text-[#E05555]">*</span>
+        {/if}
+    </Text>
+{/snippet}
+
+{#snippet innerDivElement()}
+    <div class={combinedDivClass}>
+        {#if Icon}
+            <div class={iconContainerClass}>
+                <Icon class={iconClass}></Icon>
+            </div>
+        {/if}
+        {#if variant === "floating"}
+            {@render labelElement()}
+        {/if}
+        <input
+            {id}
+            bind:value={value}
+            onfocus={handleFocus}
+            onblur={handleBlur}
+            class={combinedClass}
+            {required}
+            {disabled}
+            placeholder={variant === "floating" ? "" : placeholder}
+            aria-disabled={disabled}
+            style={customStyle}
+            {...restProps}
+            type={canSeePassword ? "text" : restProps.type}
+        />
+        {#if restProps.type === "password"}
+            <Button class={iconContainerClass} onclick={() => { canSeePassword = !canSeePassword; }}>
+                <EyeComponent class={iconClass}></EyeComponent>
+            </Button>
+        {/if}
+    </div>
+{/snippet}
+
+{#if variant !== "floating"}
+    <div class={combinedOuterDivClass}>
+        {@render labelElement()}
+        {@render innerDivElement()}
+    </div>
+{:else}
+    {@render innerDivElement()}
+{/if}

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

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

package/dist/components/FloatingSelect.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { FloatingSelectProps } from "../types/FloatingSelect.js";
+    import { twMerge } from "tailwind-merge";
+    import Text from "./Text.svelte";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        label = "",
+        divClass = "",
+        optionClass = "", 
+        value = $bindable(),
+        options = [],
+        id = crypto.randomUUID(),
+        ...restProps
+    }: FloatingSelectProps = $props();
+
+    let defaultSelectClass = "cursor-pointer bg-form-background border-[1px] border-form-border text-main-text z-20 w-full rounded px-1 pt-4 pb-1 text-xs outline-none focus:ring-2 focus:ring-blue-500 transition-all";
+    let defaultLabelClass = "block text-sub-text rounded-md text-sm font-medium mb-1 absolute transition-all duration-100 pointer-events-none";
+    let defaultDivClass = "relative w-fit";
+
+    let selectedLabelClass = "left-2 z-30 top-0.5 text-[10px]!";
+
+    let combinedLabelClass = $derived(twMerge(defaultLabelClass, selectedLabelClass, className));
+    let combinedSelectClass = $derived(twMerge(defaultSelectClass, className));
+    let combinedDivClass = $derived(twMerge(defaultDivClass, divClass));
+</script>
+
+<div class={combinedDivClass}>
+    <Text tag="label" for={id} class={combinedLabelClass}>
+        {label}
+    </Text>
+    <select {id} class={combinedSelectClass} {...restProps} bind:value={value}>
+        {#each options as option}
+            <option value={option.value} class={optionClass}>
+                {option.label}
+            </option>
+        {/each}
+    </select>
+</div>