@valerius_petrini/corekit-ui 0.1.32 → 0.1.34

package/dist/components/Button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { colorStyles } from "../styles/color.js";
     import type { ButtonProps } from "../types/Button.js";
     import { twMerge } from "tailwind-merge";
 
@@ -8,14 +9,22 @@
         pill = false,
         icon = false,
         href = undefined,
+        color = undefined,
+        size = undefined,
         ...restProps
     }: ButtonProps = $props();
 
+    function getSizeStyles(size?: number | string) {
+        if (typeof size === "number")
+            return `w-${size} h-${size}`;
+        return "";
+    }
+
     let pillClass = "rounded-full";
     let iconClass = "rounded-full p-2 flex-center";
     let defaultClass = $derived(twMerge(
-        "text-white cursor-pointer px-2 py-1 transition-colors duration-300", 
-        (pill ? pillClass : ""), (icon ? iconClass : "")));
+        "text-white cursor-pointer px-2 py-1 transition-colors duration-300 rounded-md", 
+        (pill ? pillClass : ""), (icon ? iconClass : ""), color ? colorStyles[color] : "", getSizeStyles(size)));
 
     let combinedClass = $derived(twMerge(defaultClass, className));
 </script>

package/dist/components/FloatingInput.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import type { FloatingInputProps } from "../types/FloatingInput.js";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        labelClass = "",
+        divClass = "", 
+        value = $bindable(),
+        onfocus = undefined,
+        onblur = undefined,
+        validInputRegex = undefined,
+        id = crypto.randomUUID(),
+        ...restProps
+    }: FloatingInputProps = $props();
+
+    let isFocused = $state(false);
+    let touched = $state(false);
+
+    let hasContent = $derived(value !== undefined && value !== null && value.toString().length > 0);
+    let isValid = $derived(!touched || !validInputRegex || validInputRegex.test(value || ""));
+
+    let defaultClass = "z-20 w-full border rounded px-3 py-2 outline-none focus:ring-2 focus:ring-blue-500 transition-all";
+    let defaultLabelClass = "block text-sm font-medium text-gray-700 mb-1 absolute transition-all duration-100 pointer-events-none";
+    let defaultDivClass = "relative";
+
+    let originalLabelClass = "left-3 top-1/2 transform -translate-y-1/2 z-0";
+    let selectedLabelClass = "left-2 z-30 bg-white px-1 top-0 transform -translate-y-1/2 text-xs";
+
+    let invalidClass = "border-red-500 focus:ring-red-500";
+
+    let combinedLabelClass = $derived(twMerge(defaultLabelClass, isFocused || hasContent ? selectedLabelClass : originalLabelClass, labelClass));
+    let combinedClass = $derived(twMerge(defaultClass, className, isValid ? "" : invalidClass));
+    let combinedDivClass = $derived(twMerge(defaultDivClass, divClass));
+
+    function handleFocus(e: FocusEvent) {
+        isFocused = true;
+        onfocus?.(e);
+    }
+
+    function handleBlur(e: FocusEvent) {
+        isFocused = false;
+        touched = true;
+        onblur?.(e);
+    }
+</script>
+
+<div class={combinedDivClass}>
+    <label for={id} class={combinedLabelClass}>
+        {@render children?.()}
+    </label>
+    <input 
+        {id}
+        bind:value={value}
+        onfocus={handleFocus}
+        onblur={handleBlur}
+        class={combinedClass} 
+        {...restProps}
+    />
+</div>

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

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

package/dist/components/Navbar.svelte

@@ -10,7 +10,7 @@
         ...restProps
     }: NavbarProps = $props();
 
-    let defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-50 flex items-center";
+    let defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-[100] flex items-center";
 
     let scrollY = $state(0);
 

package/dist/index.d.ts

@@ -5,5 +5,6 @@ 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 FloatingInput } from "./components/FloatingInput.svelte";
 export { fbmBackground } from "./actions/fbm.ts";
 export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.d.ts";

package/dist/index.js

@@ -5,4 +5,5 @@ 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 FloatingInput } from "./components/FloatingInput.svelte";
 export { fbmBackground } from "./actions/fbm.js";

package/dist/styles/color.d.ts

@@ -0,0 +1,10 @@
+export declare const colorStyles: {
+    red: string;
+    yellow: string;
+    lightgreen: string;
+    blue: string;
+    pink: string;
+    purple: string;
+    gray: string;
+};
+export type ColorStyle = keyof typeof colorStyles;

package/dist/styles/color.js

@@ -0,0 +1,9 @@
+export const colorStyles = {
+    red: "bg-red-500 hover:bg-red-600 focus:ring-red-300",
+    yellow: "bg-yellow-500 hover:bg-yellow-600 focus:ring-yellow-300",
+    lightgreen: "bg-green-500 hover:bg-green-600 focus:ring-green-300",
+    blue: "bg-blue-500 hover:bg-blue-600 focus:ring-blue-300",
+    pink: "bg-pink-500 hover:bg-pink-600 focus:ring-pink-300",
+    purple: "bg-purple-500 hover:bg-purple-600 focus:ring-purple-300",
+    gray: "bg-gray-500 hover:bg-gray-600 focus:ring-gray-300",
+};

package/dist/types/Button.d.ts

@@ -1,8 +1,12 @@
+import type { ColorStyle } from "../styles/color.ts";
+
 export interface ButtonProps {
     children?: any;
     class?: string;
     pill?: boolean;
     icon?: boolean;
     href?: string;
+    color?: ColorStyle;
+    size?: number | string;
     [key: string]: any;
 }

package/dist/types/FloatingInput.d.ts

@@ -0,0 +1,12 @@
+export interface FloatingInputProps {
+    children?: any;
+    class?: string;
+    labelClass?: string;
+    divClass?: string;
+    value?: string;
+    onfocus?: (e?: FocusEvent) => void;
+    onblur?: (e?: FocusEvent) => void;
+    validInputRegex?: RegExp;
+    id?: `${string}-${string}-${string}-${string}-${string}`;
+    [key: string]: any; 
+};  

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.32",
+	"version": "0.1.34",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",