@valerius_petrini/corekit-ui 0.1.22 → 0.1.24

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,27 +1,27 @@
-<script lang="ts">
-    import { page } from '$app/stores'
-
-    let { measurementId } = $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'
+
+    let { measurementId } = $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,28 +1,30 @@
-<script lang="ts">
-    import { twMerge } from "tailwind-merge";
-
-    let { 
-        children, 
-        class: className, 
-        pill = false,
-        icon = false,
-        href = undefined,
-        ...restProps
-    } = $props();
-
-    let pillClass = "rounded-full";
-    let iconClass = "rounded-full p-2";
-    let defaultClass = $derived(twMerge("text-white cursor-pointer px-2 py-1 ", (pill ? pillClass : ""), (icon ? iconClass : "")));
-
-    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 { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        pill = false,
+        icon = false,
+        href = undefined,
+        ...restProps
+    } = $props();
+
+    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 ", 
+        (pill ? pillClass : ""), (icon ? iconClass : "")));
+
+    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/Button.svelte.d.ts

@@ -1,6 +1,6 @@
 declare const Button: import("svelte").Component<{
-    children: any;
-    class: any;
+    children?: any;
+    class?: string;
     pill?: boolean;
     icon?: boolean;
     href?: any;

package/dist/components/Navbar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        ...restProps
+    } = $props();
+
+    let defaultClass = "bg-transparent transition-colors duration-300 backdrop-blur-[3px] fixed top-0 left-0 w-full z-50 flex items-center";
+
+    let combinedClass = $derived(twMerge(defaultClass, className));
+</script>
+
+<nav class={combinedClass} {...restProps}>
+    {@render children?.()}
+</nav>

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

@@ -0,0 +1,6 @@
+declare const Navbar: import("svelte").Component<{
+    children?: any;
+    class?: string;
+} & Record<string, any>, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/components/NavbarSeperator.svelte

@@ -0,0 +1 @@
+<div class="ml-auto"></div>

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

@@ -0,0 +1,26 @@
+export default NavbarSeperator;
+type NavbarSeperator = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const NavbarSeperator: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/SEO.svelte

@@ -1,44 +1,44 @@
-<script lang="ts">
-    import { page } from '$app/state';
-
-    const DEFAULT_TITLE = "My SvelteKit App";
-    const DEFAULT_DESCRIPTION = "Description of your website.";
-    const DEFAULT_IMAGE = "/favicon.png";
-      
-	interface SEOProps {
-        websiteName: string;
-		title?: string;
-		description?: string;
-		image?: any;
-	}
-
-	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={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={image}>
-    {@html `  <script type="application/ld+json">{
-     "@context": "https://schema.org",
-     "@type": "Website",
-     "name": "${title}",
-     "url": "${fullUrl}",
-     "logo": "${image}"  }</script>`}
-
-    <meta name="google-site-verification" content="F6vDzwDyZfebc9kWIZlhzpsAm5zhanaPkOArdCZdDSU" />
+<script lang="ts">
+    import { page } from '$app/state';
+
+    const DEFAULT_TITLE = "My SvelteKit App";
+    const DEFAULT_DESCRIPTION = "Description of your website.";
+    const DEFAULT_IMAGE = "/favicon.png";
+      
+	interface SEOProps {
+        websiteName: string;
+		title?: string;
+		description?: string;
+		image?: any;
+	}
+
+	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={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={image}>
+    {@html `  <script type="application/ld+json">{
+     "@context": "https://schema.org",
+     "@type": "Website",
+     "name": "${title}",
+     "url": "${fullUrl}",
+     "logo": "${image}"  }</script>`}
+
+    <meta name="google-site-verification" content="F6vDzwDyZfebc9kWIZlhzpsAm5zhanaPkOArdCZdDSU" />
 </svelte:head>

package/dist/components/Typewriter.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import { onMount } from "svelte";
+
+    import type { DisplaySegment, TypewriterAction } from "../types.js";
+
+    let { actions = [] as TypewriterAction[], class: className = "" } = $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: typeof action.color === "function" ? action.color() : action.color, label: action.label };
+                    displaySegments.push(segment);
+
+                    const segmentProxy = displaySegments[displaySegments.length - 1];
+
+                    const resolvedValue = typeof action.value === "function" ? action.value() : action.value;
+                    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;
+                    const deleteSegment = displaySegments[index];
+                    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}>
+    {#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/components/Typewriter.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TypewriterAction } from "../types.js";
+declare const Typewriter: import("svelte").Component<{
+    actions?: TypewriterAction[];
+    class?: string;
+}, {}, "">;
+type Typewriter = ReturnType<typeof Typewriter>;
+export default Typewriter;

package/dist/index.d.ts

@@ -1,3 +1,6 @@
 import Button from "./components/Button.svelte";
+import Typewriter from "./components/Typewriter.svelte";
+import Analytics from "./components/Analytics.svelte";
+import SEO from "./components/SEO.svelte";
 import { fbmBackground } from "./actions/fbm.ts";
-export { Button, fbmBackground };
+export { Button, Typewriter, Analytics, SEO, fbmBackground };

package/dist/index.js

@@ -1,4 +1,7 @@
 // Reexport your entry components here
 import Button from "./components/Button.svelte";
+import Typewriter from "./components/Typewriter.svelte";
+import Analytics from "./components/Analytics.svelte";
+import SEO from "./components/SEO.svelte";
 import { fbmBackground } from "./actions/fbm.js";
-export { Button, fbmBackground };
+export { Button, Typewriter, Analytics, SEO, fbmBackground };

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+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;
+};

package/package.json

@@ -1,58 +1,58 @@
-{
-	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.22",
-	"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.24",
+	"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"
+	}
+}