@valerius_petrini/corekit-ui 0.1.34 → 0.1.35

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Valerius Petrini
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Valerius Petrini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,65 +1,65 @@
-# Svelte library
-
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-To recreate this project with the same configuration:
-
-```sh
-# recreate this project
-npx sv@0.12.5 create --template library --types ts --add tailwindcss="plugins:typography,forms" --install npm ./
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```sh
-npm pack
-```
-
-To create a production version of your showcase app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
-```
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.12.5 create --template library --types ts --add tailwindcss="plugins:typography,forms" --install npm ./
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/actions/fbm.js

@@ -1,72 +1,72 @@
-const FBM_VERTEX_SHADER_SOURCE = `
-attribute vec4 aVertexPosition;
-
-void main() {
-    gl_Position = aVertexPosition;
+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);
+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);

package/dist/components/Analytics.svelte

@@ -1,28 +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}
+<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/Button.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-    import { colorStyles } from "../styles/color.js";
-    import type { ButtonProps } from "../types/Button.js";
-    import { twMerge } from "tailwind-merge";
-
-    let { 
-        children = undefined, 
-        class: className = "", 
-        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 rounded-md", 
-        (pill ? pillClass : ""), (icon ? iconClass : ""), color ? colorStyles[color] : "", getSizeStyles(size)));
-
-    let combinedClass = $derived(twMerge(defaultClass, className));
-</script>
-
-{#if href}
-    <a class={combinedClass} {href} {...restProps}>
-        {@render children?.()}
-    </a>
-{:else}
-    <button class={combinedClass} {...restProps}>
-        {@render children?.()} 
-    </button>
+<script lang="ts">
+    import { colorStyles } from "../styles/color.js";
+    import type { ButtonProps } from "../types/Button.js";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        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 rounded-md", 
+        (pill ? pillClass : ""), (icon ? iconClass : ""), color ? colorStyles[color] : "", getSizeStyles(size)));
+
+    let combinedClass = $derived(twMerge(defaultClass, className));
+</script>
+
+{#if href}
+    <a class={combinedClass} {href} {...restProps}>
+        {@render children?.()}
+    </a>
+{:else}
+    <button class={combinedClass} {...restProps}>
+        {@render children?.()} 
+    </button>
 {/if}

package/dist/components/FloatingInput.svelte

@@ -1,61 +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}
-    />
+<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 bg-form-input-background text-main-text w-full border rounded px-2 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";
+
+    let originalLabelClass = "left-2 top-1/2 transform -translate-y-1/2 z-0";
+    let selectedLabelClass = "left-2 z-30 top-0.5 text-[10px]";
+
+    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/Navbar.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-    import type { NavbarProps } from "../types/Navbar.js";
-    import { onMount } from "svelte";
-    import { twMerge } from "tailwind-merge";
-
-    let { 
-        children = undefined, 
-        class: className = "", 
-        classTop = "",
-        ...restProps
-    }: NavbarProps = $props();
-
-    let defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-[100] flex items-center";
-
-    let scrollY = $state(0);
-
-    let combinedClass = $derived(scrollY === 0 
-        ? twMerge(defaultClass, className, classTop)
-        : twMerge(defaultClass, className));
-
-    function onScroll() {
-        scrollY = window.scrollY;
-    }
-
-    onMount(() => {
-        window.addEventListener('scroll', onScroll);
-        onScroll(); 
-
-        return () => {
-            window.removeEventListener('scroll', onScroll);
-        };
-    });
-</script>
-
-<nav class={combinedClass} {...restProps}>
-    {@render children?.()}
+<script lang="ts">
+    import type { NavbarProps } from "../types/Navbar.js";
+    import { onMount } from "svelte";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        classTop = "",
+        ...restProps
+    }: NavbarProps = $props();
+
+    let defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-[100] flex items-center bg-main-background border-b-sub-background border-b";
+
+    let scrollY = $state(0);
+
+    let combinedClass = $derived(scrollY === 0 
+        ? twMerge(defaultClass, className, classTop)
+        : twMerge(defaultClass, className));
+
+    function onScroll() {
+        scrollY = window.scrollY;
+    }
+
+    onMount(() => {
+        window.addEventListener('scroll', onScroll);
+        onScroll(); 
+
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+        };
+    });
+</script>
+
+<nav class={combinedClass} {...restProps}>
+    {@render children?.()}
 </nav>

package/dist/components/NavbarElement.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-    import { twMerge } from "tailwind-merge";
-    import Button from "./Button.svelte";
-    import { onMount } from "svelte";
-    import type { NavbarElementProps } from "../types/Navbar.js";
-
-    let {
-        children = undefined, 
-        class: className = "", 
-        classTop = "",
-        href = undefined,
-        ...restProps
-    }: NavbarElementProps = $props();
-
-    let defaultClass = "navbar-element w-fit h-full flex items-center px-5 py-0";
-
-    let scrollY = $state(0);
-
-    let combinedClass = $derived(scrollY === 0 
-        ? twMerge(defaultClass, className, classTop)
-        : twMerge(defaultClass, className));
-
-    function onScroll() {
-        scrollY = window.scrollY;
-    }
-
-    onMount(() => {
-        window.addEventListener('scroll', onScroll);
-        onScroll(); 
-
-        return () => {
-            window.removeEventListener('scroll', onScroll);
-        };
-    });
-</script>
-
-<Button {href} class={combinedClass} {...restProps}>
-    {@render children?.()}
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import Button from "./Button.svelte";
+    import { onMount } from "svelte";
+    import type { NavbarElementProps } from "../types/Navbar.js";
+
+    let {
+        children = undefined, 
+        class: className = "", 
+        classTop = "",
+        href = undefined,
+        ...restProps
+    }: NavbarElementProps = $props();
+
+    let defaultClass = "navbar-element w-fit h-full flex items-center px-5 py-0 text-main-text hover:bg-navbar-element-hover-background rounded-none";
+
+    let scrollY = $state(0);
+
+    let combinedClass = $derived(scrollY === 0 
+        ? twMerge(defaultClass, className, classTop)
+        : twMerge(defaultClass, className));
+
+    function onScroll() {
+        scrollY = window.scrollY;
+    }
+
+    onMount(() => {
+        window.addEventListener('scroll', onScroll);
+        onScroll(); 
+
+        return () => {
+            window.removeEventListener('scroll', onScroll);
+        };
+    });
+</script>
+
+<Button {href} class={combinedClass} {...restProps}>
+    {@render children?.()}
 </Button>

package/dist/components/SEO.svelte

@@ -1,43 +1,43 @@
-<script lang="ts">
-    import { page } from '$app/state';
-    import type { SEOProps } from '../types/SEO.js';
-
-    const DEFAULT_TITLE = "My SvelteKit App";
-    const DEFAULT_DESCRIPTION = "Description of your website.";
-    const DEFAULT_IMAGE = "/favicon.png";
-
-	let { 
-        websiteName, 
-        title = DEFAULT_TITLE, 
-        description = DEFAULT_DESCRIPTION, 
-        image = DEFAULT_IMAGE 
-    }: SEOProps = $props();
-
-    let fullUrl = $derived(`${websiteName}${page.url.pathname.toString()}`);
-</script>
-  
-<svelte:head>
-    <title>{title}</title>
-    <meta name="description" content={description}>
-    <meta property="og_site_name" content={websiteName}>
-    <meta property="og:url" content={fullUrl}>
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="{title}">
-    <meta property="og:description" content={description}>
-    <meta property="og:image" content={websiteName + image}>
-  
-    <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content={websiteName}>
-    <meta property="twitter:url" content={fullUrl}>
-    <meta name="twitter:title" content="{title}">
-    <meta name="twitter:description" content={description}>
-    <meta name="twitter:image" content={websiteName + image}>
-    {@html `  <script type="application/ld+json">{
-     "@context": "https://schema.org",
-     "@type": "Website",
-     "name": "${title}",
-     "url": "${fullUrl}",
-     "logo": "${websiteName}${image}"  }</script>`}
-
-    <meta name="google-site-verification" content="F6vDzwDyZfebc9kWIZlhzpsAm5zhanaPkOArdCZdDSU" />
+<script lang="ts">
+    import { page } from '$app/state';
+    import type { SEOProps } from '../types/SEO.js';
+
+    const DEFAULT_TITLE = "My SvelteKit App";
+    const DEFAULT_DESCRIPTION = "Description of your website.";
+    const DEFAULT_IMAGE = "/favicon.png";
+
+	let { 
+        websiteName, 
+        title = DEFAULT_TITLE, 
+        description = DEFAULT_DESCRIPTION, 
+        image = DEFAULT_IMAGE 
+    }: SEOProps = $props();
+
+    let fullUrl = $derived(`${websiteName}${page.url.pathname.toString()}`);
+</script>
+  
+<svelte:head>
+    <title>{title}</title>
+    <meta name="description" content={description}>
+    <meta property="og_site_name" content={websiteName}>
+    <meta property="og:url" content={fullUrl}>
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="{title}">
+    <meta property="og:description" content={description}>
+    <meta property="og:image" content={websiteName + image}>
+  
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="twitter:domain" content={websiteName}>
+    <meta property="twitter:url" content={fullUrl}>
+    <meta name="twitter:title" content="{title}">
+    <meta name="twitter:description" content={description}>
+    <meta name="twitter:image" content={websiteName + image}>
+    {@html `  <script type="application/ld+json">{
+     "@context": "https://schema.org",
+     "@type": "Website",
+     "name": "${title}",
+     "url": "${fullUrl}",
+     "logo": "${websiteName}${image}"  }</script>`}
+
+    <meta name="google-site-verification" content="F6vDzwDyZfebc9kWIZlhzpsAm5zhanaPkOArdCZdDSU" />
 </svelte:head>

package/dist/components/Typewriter.svelte

@@ -1,84 +1,84 @@
-<script lang="ts">
-    import { twMerge } from "tailwind-merge";
-    import { onMount } from "svelte";
-
-    import type { DisplaySegment, TypewriterProps } from "../types/Typewriter.d.js";
-
-    let { 
-        actions, 
-        class: className = "",
-        ...restProps
-    }: TypewriterProps = $props();
-
-    let displaySegments = $state<DisplaySegment[]>([]);
-
-    async function execute() {
-        for (let i = 0; i < actions.length; i++) {
-            const action = actions[i];
-            switch (action.type) {
-                case "write":
-                    const segment = { text: "", color: "", label: action.label };
-                    displaySegments.push(segment);
-
-                    const segmentProxy = displaySegments[displaySegments.length - 1];
-
-                    const resolvedValue = typeof action.value === "function" ? action.value() : action.value;
-                    const resolvedColor = typeof action.color === "function" ? action.color() : action.color;
-                    segmentProxy.color = resolvedColor;
-                    for (const char of resolvedValue) {
-                        segmentProxy.text += char;
-                        const speed = Math.random() * ((action.maxspeed || 100) - (action.minspeed || 50)) + (action.minspeed || 50);
-                        await new Promise(resolve => setTimeout(resolve, speed));
-                    }
-                    break;
-                case "delete":
-                    const index = displaySegments.findIndex(s => s.label === action.to);
-                    if (index === -1) break;
-                    for (let j = displaySegments.length - 1; j >= index; j--) {                        
-                        const deleteSegment = displaySegments[j];
-                        while (deleteSegment.text.length > 0) {
-                            deleteSegment.text = deleteSegment.text.slice(0, -1);
-                            const speed = Math.random() * ((action.maxspeed || 100) - (action.minspeed || 50)) + (action.minspeed || 50);
-                            await new Promise(resolve => setTimeout(resolve, speed));
-                        }
-                    }
-                    displaySegments.splice(index, 1);
-                    break;
-                case "pause":
-                    await new Promise(resolve => setTimeout(resolve, action.duration || 1000));
-                    break;
-                case "jump":
-                    const position = actions.findIndex(a => a.label === action.position);
-                    if (position !== -1)
-                        i = position - 1;
-                    break;
-            }
-        }
-    }
-
-    onMount(() => {
-        execute();
-    });
-
-    let combinedClass = $derived(twMerge("typewriter w-fit", className));
-</script>
-
-<div class={combinedClass} {...restProps}>
-    {#each displaySegments as segment}
-        {#key segment}
-            <span style="color: {segment.color}">{segment.text}</span>
-        {/key}
-    {/each}
-</div>
-
-<style>
-    .typewriter::after {
-        content: "\00a0";
-        animation: blink .7s step-start infinite;
-        text-decoration: underline;
-    }
-
-    @keyframes blink {
-        50% { opacity: 0; }
-    }
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import { onMount } from "svelte";
+
+    import type { DisplaySegment, TypewriterProps } from "../types/Typewriter.d.js";
+
+    let { 
+        actions, 
+        class: className = "",
+        ...restProps
+    }: TypewriterProps = $props();
+
+    let displaySegments = $state<DisplaySegment[]>([]);
+
+    async function execute() {
+        for (let i = 0; i < actions.length; i++) {
+            const action = actions[i];
+            switch (action.type) {
+                case "write":
+                    const segment = { text: "", color: "", label: action.label };
+                    displaySegments.push(segment);
+
+                    const segmentProxy = displaySegments[displaySegments.length - 1];
+
+                    const resolvedValue = typeof action.value === "function" ? action.value() : action.value;
+                    const resolvedColor = typeof action.color === "function" ? action.color() : action.color;
+                    segmentProxy.color = resolvedColor;
+                    for (const char of resolvedValue) {
+                        segmentProxy.text += char;
+                        const speed = Math.random() * ((action.maxspeed || 100) - (action.minspeed || 50)) + (action.minspeed || 50);
+                        await new Promise(resolve => setTimeout(resolve, speed));
+                    }
+                    break;
+                case "delete":
+                    const index = displaySegments.findIndex(s => s.label === action.to);
+                    if (index === -1) break;
+                    for (let j = displaySegments.length - 1; j >= index; j--) {                        
+                        const deleteSegment = displaySegments[j];
+                        while (deleteSegment.text.length > 0) {
+                            deleteSegment.text = deleteSegment.text.slice(0, -1);
+                            const speed = Math.random() * ((action.maxspeed || 100) - (action.minspeed || 50)) + (action.minspeed || 50);
+                            await new Promise(resolve => setTimeout(resolve, speed));
+                        }
+                    }
+                    displaySegments.splice(index, 1);
+                    break;
+                case "pause":
+                    await new Promise(resolve => setTimeout(resolve, action.duration || 1000));
+                    break;
+                case "jump":
+                    const position = actions.findIndex(a => a.label === action.position);
+                    if (position !== -1)
+                        i = position - 1;
+                    break;
+            }
+        }
+    }
+
+    onMount(() => {
+        execute();
+    });
+
+    let combinedClass = $derived(twMerge("typewriter w-fit text-main-text", className));
+</script>
+
+<div class={combinedClass} {...restProps}>
+    {#each displaySegments as segment}
+        {#key segment}
+            <span style="color: {segment.color}">{segment.text}</span>
+        {/key}
+    {/each}
+</div>
+
+<style>
+    .typewriter::after {
+        content: "\00a0";
+        animation: blink .7s step-start infinite;
+        text-decoration: underline;
+    }
+
+    @keyframes blink {
+        50% { opacity: 0; }
+    }
 </style>

package/dist/styles/color.js

@@ -1,9 +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",
+    red: "bg-red-500 hover:bg-red-600",
+    yellow: "bg-yellow-500 hover:bg-yellow-600",
+    lightgreen: "bg-green-500 hover:bg-green-600",
+    blue: "bg-blue-500 hover:bg-blue-600",
+    pink: "bg-pink-500 hover:bg-pink-600",
+    purple: "bg-purple-500 hover:bg-purple-600",
+    gray: "bg-gray-500 hover:bg-gray-600",
 };

package/dist/types/Analytics.d.ts

@@ -1,3 +1,3 @@
-export interface AnalyticsProps {
-    measurementId: string;
+export interface AnalyticsProps {
+    measurementId: string;
 }

package/dist/types/Button.d.ts

@@ -1,12 +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;
+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

@@ -1,12 +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; 
+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/dist/types/Navbar.d.ts

@@ -1,14 +1,14 @@
-export interface NavbarProps {
-    children?: any;
-    class?: string;
-    classTop?: string;
-    [key: string]: any;
-};
-
-export interface NavbarElementProps {
-    children?: any;
-    class?: string;
-    classTop?: string;
-    href?: string;
-    [key: string]: any;
+export interface NavbarProps {
+    children?: any;
+    class?: string;
+    classTop?: string;
+    [key: string]: any;
+};
+
+export interface NavbarElementProps {
+    children?: any;
+    class?: string;
+    classTop?: string;
+    href?: string;
+    [key: string]: any;
 }

package/dist/types/SEO.d.ts

@@ -1,6 +1,6 @@
-export interface SEOProps {
-    websiteName: string;
-    title?: string;
-    description?: string;
-    image?: any;
+export interface SEOProps {
+    websiteName: string;
+    title?: string;
+    description?: string;
+    image?: any;
 }

package/dist/types/Typewriter.d.ts

@@ -1,17 +1,17 @@
-export type TypewriterAction =
-    | { type: "write", value: string | (() => string), color?: string | (() => string), minspeed?: number, maxspeed?: number, label?: string }
-    | { type: "delete", to: string, minspeed?: number, maxspeed?: number, label?: string }    
-    | { type: "pause", duration: number, label?: string }
-    | { type: "jump", position: string, label?: string };
-
-export interface DisplaySegment {
-    text: string;
-    color?: string;
-    label?: string;
-};
-
-export interface TypewriterProps {
-    actions: TypewriterAction[];
-    class?: string;
-    [key: string]: any;
+export type TypewriterAction =
+    | { type: "write", value: string | (() => string), color?: string | (() => string), minspeed?: number, maxspeed?: number, label?: string }
+    | { type: "delete", to: string, minspeed?: number, maxspeed?: number, label?: string }    
+    | { type: "pause", duration: number, label?: string }
+    | { type: "jump", position: string, label?: string };
+
+export interface DisplaySegment {
+    text: string;
+    color?: string;
+    label?: string;
+};
+
+export interface TypewriterProps {
+    actions: TypewriterAction[];
+    class?: string;
+    [key: string]: any;
 }

package/package.json

@@ -1,58 +1,58 @@
-{
-	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.34",
-	"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"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.50.2",
-		"@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",
-		"publint": "^0.3.17",
-		"svelte": "^5.51.0",
-		"svelte-check": "^4.4.2",
-		"tailwindcss": "^4.1.18",
-		"typescript": "^5.9.3",
-		"vite": "^7.3.1"
-	},
-	"keywords": [
-		"components",
-		"svelte"
-	],
-	"dependencies": {
-		"tailwind-merge": "^3.5.0"
-	}
-}
+{
+	"name": "@valerius_petrini/corekit-ui",
+	"version": "0.1.35",
+	"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"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.2",
+		"@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",
+		"publint": "^0.3.17",
+		"svelte": "^5.51.0",
+		"svelte-check": "^4.4.2",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
+	},
+	"keywords": [
+		"components",
+		"svelte"
+	],
+	"dependencies": {
+		"tailwind-merge": "^3.5.0"
+	}
+}