@valerius_petrini/corekit-ui 0.1.34 → 0.1.36

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>