@valerius_petrini/corekit-ui 0.1.66 → 0.1.69

package/dist/components/inputs/ColorInput/index.stories.svelte

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

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

@@ -0,0 +1,384 @@
+<script lang="ts">
+    import { getSizeStyle, getSizeStyleClass } from "../../../styles/size.js";
+    import type { ColorInputProps } from "./types";
+    import { twMerge } from "tailwind-merge";
+    import Text from "../../typography/Text/index.svelte";
+    import bytes from "bytes";
+    import { computePosition, flip, shift, offset, autoUpdate } from "@floating-ui/dom";
+
+    import Upload from "@lucide/svelte/icons/upload";
+    import File from "@lucide/svelte/icons/file";
+    import Button from "../Button/index.svelte";
+    import { fly } from "svelte/transition";
+    import { onMount, tick } from "svelte";
+    import { hexToHsl, hexToHsv, hexToRgb, hslToHex } from "../../../utils/color";
+    import { Input } from "..";
+
+    import Pipette from "@lucide/svelte/icons/pipette";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        label = undefined,
+        labelClass = "",
+        divClass = "",
+        outerDivClass = "",
+        value = $bindable("#ffffff"),
+        required = false,
+        disabled = false,
+        size = "md",
+        radius = "md",
+        variant = "full",
+        id = crypto.randomUUID(),
+        ...restProps
+    }: ColorInputProps = $props();
+
+    let inputElement: HTMLInputElement;
+    let dropdownX = $state(0);
+    let dropdownY = $state(0);
+    let referenceEl = $state<HTMLElement>();
+    let floatingEl = $state<HTMLDivElement>();
+    let canvasEl = $state<HTMLDivElement>();
+    let hueEl = $state<HTMLDivElement>();
+    let isOpen = $state(false);
+    let referenceWidth = $state(0);
+
+    let thumbX = $state(0);
+    let thumbY = $state(0);
+
+    let hue = $state(0);
+
+    const defaultClass = "text-main-text w-full flex items-center gap-1 rounded-full outline-none px-1.5 w-full bg-inherit border-0 py-0";
+    const defaultLabelClass = "block text-sub-text font-medium mb-1 pointer-events-none truncate w-fit";
+    const defaultDivClass = "relative flex-center gap-0 bg-form-background p-0";
+
+    const divFullClass = $derived(size === "full" ? "w-full" : "");
+    const disabledClass = $derived(disabled ? "opacity-50 pointer-events-none" : "");
+
+    const combinedOuterDivClass = $derived(twMerge(
+        "flex flex-col bg-transparent border-0 p-0",
+        divFullClass,
+        outerDivClass,
+        disabledClass
+    ));
+    const combinedLabelClass = $derived(twMerge(
+        defaultLabelClass, 
+        getSizeStyleClass(size, "formLabel"),
+        labelClass
+    ));
+    const combinedDivClass = $derived(twMerge(
+        defaultDivClass, 
+        getSizeStyleClass(radius, "radius"), 
+        divFullClass, 
+        divClass, 
+    ));
+    let combinedClass = $derived(twMerge(
+        getSizeStyleClass(size, "form"),
+        defaultClass, 
+        className, 
+    ));
+
+    async function updateDropdownPosition() {
+        if (!referenceEl || !floatingEl) return;
+
+        referenceWidth = referenceEl.offsetWidth;
+
+        const { x, y } = await computePosition(referenceEl, floatingEl, {
+            placement: "bottom-start",
+            middleware: [
+                offset(8),
+                flip(),
+                shift({ padding: 8 })
+            ]
+        });
+
+        dropdownX = x;
+        dropdownY = y;
+    }
+
+    async function handleClick() {
+        if (isOpen) {
+            isOpen = false;
+        } else {
+            isOpen = true;
+            await tick();
+            updateDropdownPosition();
+            updateHueAndThumb(hexToHsv(value));
+        }
+    }
+
+    async function handleMouseDown(e: MouseEvent) {
+        if (
+            isOpen &&
+            referenceEl && !referenceEl.contains(e.target as Node) &&
+            floatingEl && !floatingEl.contains(e.target as Node)
+        ) {
+            isOpen = false;
+            return;
+        }
+
+        if (canvasEl && canvasEl.contains(e.target as Node)) {
+            handleMouseMoveCanvas(e);
+            const onMove = (e: MouseEvent) => handleMouseMoveCanvas(e);
+            const onUp = () => {
+                window.removeEventListener("mousemove", onMove);
+                window.removeEventListener("mouseup", onUp);
+            };
+            window.addEventListener("mousemove", onMove);
+            window.addEventListener("mouseup", onUp);
+        }
+        if (hueEl && hueEl.contains(e.target as Node)) {
+            handleMouseMoveHue(e);
+            const onMove = (e: MouseEvent) => handleMouseMoveHue(e);
+            const onUp = () => {
+                window.removeEventListener("mousemove", onMove);
+                window.removeEventListener("mouseup", onUp);
+            };
+            window.addEventListener("mousemove", onMove);
+            window.addEventListener("mouseup", onUp);
+        }
+    }
+
+    async function handleMouseMoveHue(e: MouseEvent) {
+        if (!hueEl) return;
+
+        const rect = hueEl.getBoundingClientRect();
+        const y = Math.min(Math.max(e.clientY - rect.top, 0), rect.height);
+        hue = (y / rect.height) * 360;
+
+        const s = thumbX / canvasEl!.offsetWidth;
+        const v = 1 - thumbY / canvasEl!.offsetHeight;
+
+        const l = v * (1 - s / 2);
+        const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
+
+        value = hslToHex(hue, sl * 100, l * 100);
+    }
+
+    async function handleMouseMoveCanvas(e: MouseEvent) {
+        if (!canvasEl) return;
+
+        const rect = canvasEl.getBoundingClientRect();
+        thumbX = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
+        thumbY = Math.min(Math.max(e.clientY - rect.top, 0), rect.height);
+
+        const s = thumbX / rect.width;
+        const v = 1 - thumbY / rect.height;
+
+        const l = v * (1 - s / 2);
+        const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);
+
+        value = hslToHex(hue, sl * 100, l * 100);
+    }
+
+    $effect(() => {
+        if (isOpen && referenceEl && floatingEl) {
+            const cleanup = autoUpdate(
+                referenceEl,
+                floatingEl,
+                updateDropdownPosition
+            );
+            return () => cleanup();
+        }
+    });
+
+    function handleEnter(e: KeyboardEvent) {
+        if (e.key === "Enter")
+            (e.target as HTMLInputElement).blur();
+    }
+
+    function onBlurHexCode(e?: FocusEvent) {
+        if (!e) return;
+        let input = (e.target as HTMLInputElement).value.trim();
+        input = input.replace(/^#/, "");
+        
+        if (/^[0-9a-fA-F]{3}$/.test(input))
+            input = input.split("").map(c => c + c).join("");
+        
+        if (/^[0-9a-fA-F]{6}$/.test(input))
+            value = `#${input}`;
+        else
+            (e.target as HTMLInputElement).value = value;
+
+        const hsv = hexToHsv(value);
+        updateHueAndThumb(hsv);
+    }
+
+    function onBlueRGB(e?: FocusEvent) {
+        if (!e) return;
+        const input = (e.target as HTMLInputElement).value.trim();
+        const match = input.match(/^(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})$/);
+        if (match) {
+            const r = Math.min(255, parseInt(match[1]));
+            const g = Math.min(255, parseInt(match[2]));
+            const b = Math.min(255, parseInt(match[3]));
+            value = `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+            const hsv = hexToHsv(value);
+            updateHueAndThumb(hsv);
+        } else {
+            (e.target as HTMLInputElement).value = `${hexToRgb(value)?.r}, ${hexToRgb(value)?.g}, ${hexToRgb(value)?.b}`;
+        }
+    }
+
+    function onBlurHSV(e?: FocusEvent) {
+        if (!e) return;
+        const input = (e.target as HTMLInputElement).value.trim();
+        const match = input.match(/^(\d+\.?\d*)°?,\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?$/);
+        if (match) {
+            const h = Math.min(360, parseFloat(match[1]));
+            const s = Math.min(100, parseFloat(match[2]));
+            const v = Math.min(100, parseFloat(match[3]));
+            updateHueAndThumb({h, s, v});
+            (e.target as HTMLInputElement).value = `${h.toFixed(2)}°, ${s.toFixed(2)}%, ${v.toFixed(2)}%`;
+        } else {
+            const hsv = hexToHsv(value);
+            (e.target as HTMLInputElement).value = `${hsv.h.toFixed(2)}°, ${hsv.s.toFixed(2)}%, ${hsv.v.toFixed(2)}%`;
+        }
+    }
+
+    function onBlurHSL(e?: FocusEvent) {
+        if (!e) return;
+        const input = (e.target as HTMLInputElement).value.trim();
+        const match = input.match(/^(\d{1,3})°?,\s*(\d{1,3})%?,\s*(\d{1,3})%?$/);
+        if (match) {
+            const h = Math.min(360, parseInt(match[1]));
+            const s = Math.min(100, parseInt(match[2]));
+            const l = Math.min(100, parseInt(match[3]));
+            value = hslToHex(h, s, l);
+            const hsv = hexToHsv(value);
+            updateHueAndThumb(hsv);
+        } else {
+            const hsl = hexToHsl(value);
+            (e.target as HTMLInputElement).value = `${hsl.h.toFixed(2)}°, ${hsl.s.toFixed(2)}%, ${hsl.l.toFixed(2)}%`;
+        }
+    }
+
+    function updateHueAndThumb(hsv: { h: number; s: number; v: number }) {
+        hue = hsv.h;
+        thumbX = (hsv.s / 100) * canvasEl!.offsetWidth;
+        thumbY = (1 - hsv.v / 100) * canvasEl!.offsetHeight;
+    }
+</script>
+
+<svelte:window onmousedown={handleMouseDown}/>
+
+<div class={combinedOuterDivClass} bind:this={referenceEl}>
+    <Text tag="label" for={id} class={combinedLabelClass} style={getSizeStyle(size, "formLabel")}>
+        {label}
+        {#if required}
+            <span class="text-[#E05555]">*</span>
+        {/if}
+    </Text>
+    <Button color="none" class={combinedDivClass} onclick={handleClick} {disabled}>
+        <input
+            {id}
+            bind:value={value}
+            bind:this={inputElement}
+            class="hidden"
+            {required}
+            {disabled}
+            aria-disabled={disabled}
+            {...restProps}
+            type="color"
+        />
+
+        <div class="rounded-full border border-form-hover ml-2 w-6 h-6" style={`background-color: ${value || 'transparent'}`}></div>
+
+        <Text class={combinedClass}>
+            {value ? value : "Select color"}
+        </Text>
+    </Button>
+
+    {#if isOpen}
+        {@const rgb = hexToRgb(value || "#000000")}
+        {@const hsl = hexToHsl(value || "#000000")}
+        {@const hsv = hexToHsv(value || "#000000")}
+        <div
+            bind:this={floatingEl}
+            transition:fly={{ y: -10, duration: 200 }}
+            class="fixed z-999999 bg-sub-background rounded-md p-4 flex gap-2.5 flex-wrap"
+            style="top: {dropdownY}px; left: {dropdownX}px; min-width: {referenceWidth}px; max-width: calc(100vw - 16px);"
+        >
+            <div class="color-canvas relative rounded h-36 cursor-crosshair" style="background-color: hsl({hue}, 100%, 50%);" bind:this={canvasEl}>
+                <div 
+                    class="absolute w-3 h-3 rounded-full border border-white shadow thumb pointer-events-none"
+                    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-[160px]">
+                <Input
+                    type="text"
+                    variant="floating"
+                    label="Hex"
+                    size="sm"
+                    value={value}
+                    onblur={onBlurHexCode}
+                    onkeydown={handleEnter}
+                    placeholder="#ffffff"
+                />
+
+                <Input
+                    type="text"
+                    variant="floating"
+                    label="RGB"
+                    size="sm"
+                    value="{rgb.r}, {rgb.g}, {rgb.b}"
+                    onblur={onBlueRGB}
+                    onkeydown={handleEnter}
+                    placeholder="0, 0, 0"
+                />
+
+                <Input
+                    type="text"
+                    variant="floating"
+                    label="HSV"
+                    size="sm"
+                    value="{hue.toFixed(2)}°, {hsv.s.toFixed(2)}%, {hsv.v.toFixed(2)}%"
+                    onblur={onBlurHSV}
+                    onkeydown={handleEnter}
+                    placeholder="0, 0, 0"
+                />
+
+                <Input
+                    type="text"
+                    variant="floating"
+                    label="HSL"
+                    size="sm"
+                    value="{hue.toFixed(2)}°, {hsl.s.toFixed(2)}%, {hsl.l.toFixed(2)}%"
+                    onblur={onBlurHSL}
+                    onkeydown={handleEnter}
+                    placeholder="0, 0, 0"
+                />
+            </div>
+        </div>
+    {/if}
+</div>
+
+<style>
+    .color-canvas {
+        aspect-ratio: 1 / 0.75;
+        padding: 10;
+        background-color: hsl(0, 100%, 50%);
+        background-image:
+            linear-gradient(to bottom, transparent, #000),
+            linear-gradient(to right, #fff, transparent);
+        cursor: crosshair;
+    }
+
+    .hue-slider {
+        background: linear-gradient(to bottom, red, yellow, lime, cyan, blue, magenta, red);
+    }
+
+    .thumb {
+        transform: translate(-50%, -50%);
+    }
+
+    .slider {
+        transform: translate(-10%, -50%);
+    }
+</style>

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

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

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

@@ -0,0 +1,16 @@
+import type { SizeStyle } from "$styles/size";
+import type { BaseComponentProps } from "$types/BaseComponent";
+export type ColorInputVariant = "full" | "compact" | "input";
+export interface ColorInputProps extends BaseComponentProps {
+    label?: string;
+    labelClass?: string;
+    divClass?: string;
+    outerDivClass?: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    variant?: ColorInputVariant;
+    size?: SizeStyle;
+    radius?: SizeStyle;
+    id?: `${string}-${string}-${string}-${string}-${string}`;
+}

package/dist/components/inputs/Combobox/index.stories.svelte

@@ -0,0 +1,34 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Combobox from "./index.svelte";
+	import { colorStyles, colorStyleTypes } from "../../../styles/color.js";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Inputs/Combobox",
+		component: Combobox,
+		argTypes: {
+			size: {
+				control: "select",
+				options: sizeStyles,
+			},
+			radius: {
+				control: "select",
+				options: sizeStyles,
+			},
+		},
+	});
+</script>
+
+<Story name="Default" args={{ label: "Combobox", placeholder: "Select an option...", options: [
+    "USA",
+    "Canada",
+    "Mexico",
+    "United Kingdom",
+    "Germany",
+    "France",
+    "Italy",
+    "Spain",
+    "Australia",
+    "Japan"
+] }}></Story>

package/dist/components/inputs/Combobox/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/{Combobox.svelte → inputs/Combobox/index.svelte}

@@ -1,12 +1,14 @@
 <script lang="ts">
-    import type { ComboboxProps, InputProps } from "../types/Input.js";
+    import type { ComboboxProps } from "./types";
     import { twMerge } from "tailwind-merge";
-    import { getSizeStyleClass } from "../styles/size.js";
+    import { getSizeStyleClass } from "$styles/size";
+    import { computePosition, flip, shift, offset, autoUpdate } from "@floating-ui/dom";
 
-    import BaseInput from "./helper/BaseInput.svelte";
-    import Text from "./Text.svelte";
+    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 { debounce } from "../../../utils/debounce.js";
+    import { tick } from "svelte";
 
     let { 
         children = undefined, 
@@ -31,8 +33,14 @@
         ...restProps
     }: ComboboxProps = $props();
 
+    let isFocused = $state(false);
     let activeIndex = $state(0);
 
+    let dropdownX = $state(0);
+    let dropdownY = $state(0);
+    let referenceEl = $state<HTMLElement>();
+    let floatingEl = $state<HTMLDivElement>();
+
     let debouncedSearch = $state("");
 
     const updateSearch = debounce((v: string) => {
@@ -60,8 +68,6 @@
         return styles.join("; ");
     });
 
-    let isFocused = $state(false);
-
     function handleFocus(e: FocusEvent) {
         isFocused = true;
         onfocus?.(e);
@@ -74,12 +80,32 @@
         onblur?.(e);
     }
 
+    async function updateDropdownPosition() {
+        if (!referenceEl || !floatingEl) return;
+
+        referenceWidth = referenceEl.offsetWidth;
+
+        const { x, y } = await computePosition(referenceEl, 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;
@@ -145,8 +171,32 @@
     }
 
     let optionsContainerElement = $state<HTMLDivElement>();
+
+    $effect(() => {
+        if (isFocused && referenceEl && floatingEl) {
+            const cleanup = autoUpdate(
+                referenceEl,
+                floatingEl,
+                updateDropdownPosition
+            );
+            return () => cleanup();
+        }
+    });
+
+    function handleMouseDown(e: MouseEvent) {
+        if (
+            isFocused &&
+            referenceEl && !referenceEl.contains(e.target as Node) &&
+            floatingEl && !floatingEl.contains(e.target as Node)
+        ) {
+            isFocused = false;
+            return;
+        }
+    }
 </script>
 
+<svelte:window onmousedown={handleMouseDown}/>
+
 <BaseInput
     {children}
     {className}
@@ -161,7 +211,9 @@
     {size}
     {radius}
     {id}
-    {icon}>
+    {isFocused}
+    {icon}
+    bind:wrapper={referenceEl}>
 
     {#snippet innerDivElement()}
         <input
@@ -183,8 +235,13 @@
 
     {#snippet outerDivElementAfter()}        
         {#if isFocused}
-            <div transition:fly={{ y: -10, duration: 200 }} class="absolute z-100 top-full left-0 right-0 mt-2 border-2 overflow-hidden border-blue-500 bg-sub-background {getSizeStyleClass(radius, "radius")}">
-                {#if totalMatches > limit}
+            <div
+                bind:this={floatingEl}
+                transition:fly={{ y: -10, duration: 200 }}
+                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')}"
+            >
+                {#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">
                         Showing {limit} of {totalMatches} results for "{value}"
                     </Text>

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

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

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

@@ -0,0 +1,8 @@
+import type { BaseInputProps } from "$types/BaseComponent";
+export interface ComboboxProps extends BaseInputProps {
+    options?: string[];
+    placeholder?: string;
+    onfocus?: (e?: FocusEvent) => void;
+    onblur?: (e?: FocusEvent) => void;
+    limit?: number;
+}

package/dist/components/{FileInput.svelte → inputs/FileInput/index.svelte}

@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { getSizeStyle, getSizeStyleClass } from "../styles/size.js";
-    import type { FileInputProps } from "../types/Input.js";
+    import { getSizeStyle, getSizeStyleClass } from "../../../styles/size.js";
+    import type { FileInputProps } from "./types";
     import { twMerge } from "tailwind-merge";
-    import Text from "./Text.svelte";
+    import Text from "../../typography/Text/index.svelte";
     import bytes from "bytes";
 
     import Upload from "@lucide/svelte/icons/upload";
     import File from "@lucide/svelte/icons/file";
-    import Button from "./Button.svelte";
+    import Button from "../Button/index.svelte";
 
     let { 
         children = undefined, 

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

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