@valerius_petrini/corekit-ui 0.1.59 → 0.1.60

package/dist/components/FileInput.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    import { getSizeStyle, getSizeStyleClass } from "../styles/size.js";
+    import type { FileInputProps } from "../types/Input.js";
+    import { twMerge } from "tailwind-merge";
+    import Text from "./Text.svelte";
+    import bytes from "bytes";
+
+    import Upload from "@lucide/svelte/icons/upload";
+    import File from "@lucide/svelte/icons/file";
+    import Button from "./Button.svelte";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        label = undefined,
+        labelClass = "",
+        divClass = "",
+        outerDivClass = "",
+        files = $bindable(undefined),
+        required = false,
+        disabled = false,
+        size = "md",
+        radius = "md",
+        id = crypto.randomUUID(),
+        ...restProps
+    }: FileInputProps = $props();
+
+    let inputElement: HTMLInputElement;
+
+    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 border-[1px] border-form-border p-0";
+
+    const divFullClass = $derived(size === "full" ? "w-full" : "");
+    const disabledClass = $derived(disabled ? "opacity-50 pointer-events-none" : "");
+
+    const iconContainerClass = "h-5 aspect-square px-1 py-0!";
+    const iconClass = "h-full aspect-square text-sub-text";
+
+    const selectedDivClass = $derived(files ? "border-blue-500 cursor-default" : "hover:bg-form-hover cursor-pointer");
+
+    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, 
+        selectedDivClass,
+        getSizeStyleClass(radius, "radius"), 
+        divFullClass, 
+        divClass, 
+    ));
+    let combinedClass = $derived(twMerge(
+        getSizeStyleClass(size, "form"),
+        defaultClass, 
+        className, 
+    ));
+
+    const Icon = $derived(files ? File : Upload);
+
+    function handleClick() {
+        if (!files) inputElement.click();
+    }
+
+    function handleClear(e: MouseEvent) {
+        e.stopPropagation();
+        files = undefined;
+    }
+</script>
+
+<div class={combinedOuterDivClass}>
+    <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}>
+        <div class={iconContainerClass}>
+            <Icon class={iconClass}></Icon>
+        </div>
+        <input
+            {id}
+            bind:files={files}
+            bind:this={inputElement}
+            class="hidden"
+            {required}
+            {disabled}
+            aria-disabled={disabled}
+            {...restProps}
+            type="file"
+        />
+        <Text class={combinedClass}>
+            {files ? files[0]?.name : "Upload File"}
+            <Text tag="span" class="text-sub-text text-xs pt-0.75">
+                {files ? bytes(files[0]?.size || 0) : ""}
+            </Text>
+        </Text>
+
+        {#if files}
+            <Button color="blue" variant="outline" size="xs" class="ml-auto mr-2" onclick={handleClear} {disabled}>
+                Clear
+            </Button>
+        {/if}
+    </Button>
+</div>

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

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

@@ -105,7 +105,7 @@
     }[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 defaultLabelClass = "block text-sub-text rounded-md font-medium mb-1 duration-100 pointer-events-none truncate w-fit";
+    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 iconContainerClass = "h-5 aspect-square px-1 py-0!";
     let floatingLabelClass = "absolute w-full";
@@ -119,7 +119,7 @@
 
     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");
+    let disabledClass = $derived(disabled ? "opacity-50 pointer-events-none" : "");
 
     function handleFocus(e: FocusEvent) {
         isFocused = true;
@@ -137,7 +137,7 @@
 
     let defaultInputClassCheck = $derived(variant !== "floating" ? "py-0" : "");
     let floatingLabelClassCheck = $derived(variant === "floating" ? floatingLabelClassFull : "");
-    let defaultLabelClassCheck = $derived(variant !== "floating" ? "px-1.5" : "");
+    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));

package/dist/components/Toaster.svelte

@@ -9,15 +9,17 @@
     });
 </script>
 
-{#each Object.keys(positionParts) as pos (pos)}
-    <div class="fixed z-9999 flex flex-col gap-2 pointer-events-none {positionParts[pos as PositionStyle]}">
-        {#each getItems(pos as PositionStyle) as item (item.id)}
-            <div class="pointer-events-auto" animate:flip={{ duration: 300 }}>
-                <Toast 
-                    {...item} 
-                    onclose={() => toast.dismiss(item.id)} 
-                />
-            </div>
-        {/each}
-    </div>
-{/each}
+<div>
+    {#each Object.keys(positionParts) as pos (pos)}
+        <div class="fixed z-9999 flex flex-col gap-2 pointer-events-none {positionParts[pos as PositionStyle]}">
+            {#each getItems(pos as PositionStyle) as item (item.id)}
+                <div class="pointer-events-auto" animate:flip={{ duration: 300 }}>
+                    <Toast 
+                        {...item} 
+                        onclose={() => toast.dismiss(item.id)} 
+                    />
+                </div>
+            {/each}
+        </div>
+    {/each}
+</div>

package/dist/index.d.ts

@@ -6,6 +6,7 @@ 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 Input } from "./components/Input.svelte";
+export { default as FileInput } from "./components/FileInput.svelte";
 export { default as Select } from "./components/Select.svelte";
 export { default as Text } from "./components/Text.svelte";
 export { default as Card } from "./components/Card.svelte";

package/dist/index.js

@@ -6,6 +6,7 @@ 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 Input } from "./components/Input.svelte";
+export { default as FileInput } from "./components/FileInput.svelte";
 export { default as Select } from "./components/Select.svelte";
 export { default as Text } from "./components/Text.svelte";
 export { default as Card } from "./components/Card.svelte";

package/dist/styles/layout.css

@@ -47,7 +47,7 @@ html.dark {
     --vpcui-dark-50: #121212;
     --vpcui-dark-100: #1E1E1E;
     --vpcui-dark-150: #2A2A2A;
-    --vpcui-dark-200: #2A2A2A;
+    --vpcui-dark-200: #3A3A3A;
     --vpcui-dark-250: #4A4A4A;
     --vpcui-dark-300: #A0A0A0;
 
@@ -61,7 +61,7 @@ html.dark {
     --vpcui-contrast-text: var(--vpcui-dark-950);
     --vpcui-form-background: var(--vpcui-dark-150);
     --vpcui-form-border: var(--vpcui-dark-250);
-    --vpcui-form-hover: var(--vpcui-dark-150);
+    --vpcui-form-hover: var(--vpcui-dark-200);
 }
 
 html {

package/dist/types/Input.d.ts

@@ -23,3 +23,15 @@ export interface InputProps extends BaseComponentProps {
     radius?: SizeStyle;
     id?: `${string}-${string}-${string}-${string}-${string}`;
 }
+export interface FileInputProps extends BaseComponentProps {
+    label?: string;
+    labelClass?: string;
+    divClass?: string;
+    outerDivClass?: string;
+    files?: FileList;
+    required?: boolean;
+    disabled?: boolean;
+    size?: SizeStyle;
+    radius?: SizeStyle;
+    id?: `${string}-${string}-${string}-${string}-${string}`;
+}

package/dist/types/Input.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.59",
+	"version": "0.1.60",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",
@@ -42,6 +42,7 @@
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/typography": "^0.5.19",
 		"@tailwindcss/vite": "^4.1.18",
+		"@types/bytes": "^3.1.5",
 		"publint": "^0.3.17",
 		"svelte": "^5.51.0",
 		"svelte-check": "^4.4.2",
@@ -55,6 +56,7 @@
 	],
 	"dependencies": {
 		"@lucide/svelte": "^1.3.0",
+		"bytes": "^3.1.2",
 		"tailwind-merge": "^3.5.0"
 	}
 }