@valerius_petrini/corekit-ui 0.1.48 → 0.1.51

package/dist/index.d.ts

@@ -1,13 +1,15 @@
-export { default as Button } from "./components/Button.svelte";
-export { default as Typewriter } from "./components/Typewriter.svelte";
-export { default as Analytics } from "./components/Analytics.svelte";
-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 { default as FloatingSelect } from "./components/FloatingSelect.svelte";
-export { default as Text } from "./components/Text.svelte";
-export { default as Card } from "./components/Card.svelte";
-export { fbmBackground } from "./actions/fbm.ts";
-export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.d.ts";
+export { default as Button } from "../components/Button.svelte";
+export { default as Typewriter } from "../components/Typewriter.svelte";
+export { default as Analytics } from "../components/Analytics.svelte";
+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 { default as FloatingSelect } from "../components/FloatingSelect.svelte";
+export { default as Text } from "../components/Text.svelte";
+export { default as Card } from "../components/Card.svelte";
+export { default as Checkbox } from "../components/Checkbox.svelte";
+export { default as Progress } from "../components/Progress.svelte";
+export { fbmBackground } from "../actions/fbm.ts";
+export type { TypewriterAction, DisplaySegment } from "../types/Typewriter.d.ts";

package/dist/index.js

@@ -1,12 +1,14 @@
-export { default as Button } from "./components/Button.svelte";
-export { default as Typewriter } from "./components/Typewriter.svelte";
-export { default as Analytics } from "./components/Analytics.svelte";
-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 { default as FloatingSelect } from "./components/FloatingSelect.svelte";
-export { default as Text } from "./components/Text.svelte";
-export { default as Card } from "./components/Card.svelte";
-export { fbmBackground } from "./actions/fbm.js";
+export { default as Button } from "../components/Button.svelte";
+export { default as Typewriter } from "../components/Typewriter.svelte";
+export { default as Analytics } from "../components/Analytics.svelte";
+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 { default as FloatingSelect } from "../components/FloatingSelect.svelte";
+export { default as Text } from "../components/Text.svelte";
+export { default as Card } from "../components/Card.svelte";
+export { default as Checkbox } from "../components/Checkbox.svelte";
+export { default as Progress } from "../components/Progress.svelte";
+export { fbmBackground } from "../actions/fbm.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.48",
+	"version": "0.1.51",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",
@@ -28,8 +28,7 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		},
-		"./layout.css": "./dist/styles/layout.css"
+		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
@@ -54,6 +53,7 @@
 		"svelte"
 	],
 	"dependencies": {
+		"@lucide/svelte": "^1.3.0",
 		"tailwind-merge": "^3.5.0"
 	}
 }

package/dist/actions/fbm.d.ts

@@ -1,10 +0,0 @@
-export interface FBMBackgroundOptions {
-    octaves?: number;
-    warps?: number;
-    scale?: number;
-    seed?: number;
-}
-export declare function fbmBackground(canvas: HTMLCanvasElement, options?: FBMBackgroundOptions): {
-    update(newOptions: FBMBackgroundOptions): void;
-    destroy(): void;
-} | undefined;

package/dist/actions/fbm.js

@@ -1,199 +0,0 @@
-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);
-}`;
-function loadShaders(gl, type, source) {
-    const shader = gl.createShader(type);
-    if (!shader) {
-        console.error("Unable to create shader");
-        return null;
-    }
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        console.error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
-        gl.deleteShader(shader);
-        return null;
-    }
-    return shader;
-}
-function initializeShaders(gl, vertexSource, fragmentSource) {
-    const vertexShader = loadShaders(gl, gl.VERTEX_SHADER, vertexSource);
-    const fragmentShader = loadShaders(gl, gl.FRAGMENT_SHADER, fragmentSource);
-    if (!vertexShader || !fragmentShader)
-        return null;
-    const shaderProgram = gl.createProgram();
-    if (!shaderProgram) {
-        console.error("Unable to create shader program");
-        return null;
-    }
-    gl.attachShader(shaderProgram, vertexShader);
-    gl.attachShader(shaderProgram, fragmentShader);
-    gl.linkProgram(shaderProgram);
-    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-        console.error("Unable to initialize the shader program: " + gl.getProgramInfoLog(shaderProgram));
-        return null;
-    }
-    return shaderProgram;
-}
-function initBuffers(gl) {
-    const positionBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-    const vertices = new Float32Array([
-        -1.0, -1.0,
-        1.0, -1.0,
-        -1.0, 1.0,
-        1.0, 1.0,
-    ]);
-    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-    return {
-        position: positionBuffer,
-    };
-}
-export function fbmBackground(canvas, options = {}) {
-    let gl = canvas.getContext("webgl", { antialias: true, premultipliedAlpha: false, preserveDrawingBuffer: true });
-    if (!gl) {
-        console.error("WebGL not supported");
-        return;
-    }
-    let currentOptions = { ...options };
-    let internalSeed = options.seed ?? Math.random() * 1000;
-    const shaderProgram = initializeShaders(gl, FBM_VERTEX_SHADER_SOURCE, FBM_FRAGMENT_SHADER_SOURCE);
-    if (!shaderProgram) {
-        console.error("Failed to initialize shaders");
-        return;
-    }
-    const programInfo = {
-        program: shaderProgram,
-        attribLocations: {
-            vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
-        },
-        uniformLocations: {
-            resolution: gl.getUniformLocation(shaderProgram, "u_resolution"),
-            seed: gl.getUniformLocation(shaderProgram, "u_seed"),
-            scale: gl.getUniformLocation(shaderProgram, "u_scale"),
-            octaves: gl.getUniformLocation(shaderProgram, "u_octaves"),
-            warp: gl.getUniformLocation(shaderProgram, "u_warp"),
-        }
-    };
-    const buffers = initBuffers(gl);
-    function updateCanvasSize() {
-        const DPR = window.devicePixelRatio || 1;
-        const newWidth = Math.floor(canvas.offsetWidth * DPR);
-        const newHeight = Math.floor(canvas.offsetHeight * DPR);
-        if (canvas.width !== newWidth || canvas.height !== newHeight) {
-            canvas.width = newWidth;
-            canvas.height = newHeight;
-            if (gl)
-                gl.viewport(0, 0, canvas.width, canvas.height);
-        }
-    }
-    function render() {
-        updateCanvasSize();
-        if (!gl)
-            return;
-        gl.viewport(0, 0, canvas.width, canvas.height);
-        gl.clearColor(0, 0, 0, 1);
-        gl.clearDepth(1.0);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-        gl.enable(gl.DEPTH_TEST);
-        gl.depthFunc(gl.LEQUAL);
-        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
-        gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, 2, gl.FLOAT, false, 0, 0);
-        gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
-        gl.useProgram(programInfo.program);
-        gl.uniform2f(programInfo.uniformLocations.resolution, canvas.width, canvas.height);
-        gl.uniform1f(programInfo.uniformLocations.seed, currentOptions.seed ?? internalSeed);
-        gl.uniform1i(programInfo.uniformLocations.octaves, currentOptions.octaves ?? 4);
-        gl.uniform1i(programInfo.uniformLocations.warp, currentOptions.warps ?? 2);
-        gl.uniform1f(programInfo.uniformLocations.scale, currentOptions.scale ?? 2);
-        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-    }
-    const resizeObserver = new ResizeObserver(() => {
-        requestAnimationFrame(render);
-    });
-    resizeObserver.observe(canvas);
-    render();
-    return {
-        update(newOptions) {
-            const changed = JSON.stringify(currentOptions) !== JSON.stringify(newOptions);
-            if (changed) {
-                currentOptions = { ...newOptions };
-                render();
-            }
-        },
-        destroy() {
-            resizeObserver.disconnect();
-            gl.bindBuffer(gl.ARRAY_BUFFER, null);
-            gl.deleteBuffer(buffers.position);
-            gl.deleteProgram(shaderProgram);
-            gl.getExtension("WEBGL_lose_context")?.loseContext();
-        }
-    };
-}

package/dist/components/Analytics.svelte

@@ -1,28 +0,0 @@
-<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/Analytics.svelte.d.ts

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

package/dist/components/Button.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-    import { generateColorStyle } from "../styles/color.js";
-    import { sizeStyleParts, type SizeStyle } from "../styles/size.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 = "none",
-        variant = "full",
-        disabled = false,
-        external = false,
-        size = "md",
-        radius = "md",
-        ...restProps
-    }: ButtonProps = $props();
-
-    const sizeClasses = $derived.by(() => {
-        if (typeof size === "string") {
-            const parts = sizeStyleParts[size as SizeStyle];
-            return icon ? parts.buttonIcon : parts.button;
-        }
-        return icon ? "p-0 flex-none" : "h-fit";
-    });
-
-    const customStyle = $derived(
-        typeof size === "number" 
-            ? `width: ${size}px; height: ${size}px; flex: none;` 
-            : ""
-    );
-
-    const defaultClass = "inline-flex items-center justify-center gap-2 transition-colors duration-300 text-white whitespace-nowrap";
-    const radiusClass = $derived(pill || icon ? "rounded-full" : sizeStyleParts[radius as SizeStyle].radius);
-    const disabledClass = $derived(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer");
-
-    const mergedClass = $derived(twMerge(
-        defaultClass, 
-        generateColorStyle(color, variant),
-        disabledClass,
-        sizeClasses,
-        radiusClass,
-        className
-    ));
-
-    const mergedStyle = $derived([customStyle, restProps.style].filter(Boolean).join("; "));
-</script>
-
-<svelte:element 
-    this={href ? "a" : "button"} 
-    class={mergedClass} 
-    {disabled}
-    aria-disabled={disabled}
-    type={href ? undefined : (restProps.type || "button")}
-    style={mergedStyle}
-    target={external ? "_blank" : undefined}
-    rel={external ? "noopener noreferrer" : undefined}
-    {...(href ? { href } : {})}
-    {...restProps}>
-    {@render children?.()}
-</svelte:element>

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

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

package/dist/components/Card.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-    import type { CardProps } from "../types/Card.js";
-    import type { SvelteComponent } from "svelte";
-    import { twMerge } from "tailwind-merge";
-
-    let { 
-        children = undefined, 
-        class: className = "", 
-        href = undefined,
-        ...restProps
-    }: CardProps = $props();
-
-    let defaultClass = "text-main-text shadow-xl radius-lg transition-colors bg-sub-background hover:bg-sub-background-hover p-4";    
-    let combinedClass = $derived(twMerge(defaultClass, className));
-</script>
-
-<svelte:element
-    this={href ? "a" : "div"}
-    class={combinedClass}
-    {...(href ? { href } : {})}
-    {...restProps}
->
-    {@render children?.()}
-</svelte:element>

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

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

package/dist/components/Checkbox.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-    import { twMerge } from "tailwind-merge";
-    import Text from "./Text.svelte";
-    import type { CheckboxProps } from "../types/Checkbox.js";
-
-    let { 
-        children = undefined, 
-        class: className = "",
-        labelClass = "",
-        divClass = "", 
-        checked = $bindable(),
-        id = crypto.randomUUID(),
-        ...restProps
-    }: CheckboxProps = $props();
-
-    let defaultClass = "z-20 bg-form-input-background text-main-text rounded-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all";
-    let defaultLabelClass = "block text-sub-text font-medium";
-    let defaultDivClass = "relative flex items-center gap-2";
-
-    let combinedLabelClass = $derived(twMerge(defaultLabelClass, labelClass));
-    let combinedClass = $derived(twMerge(defaultClass, className));
-    let combinedDivClass = $derived(twMerge(defaultDivClass, divClass));
-</script>
-
-<div class={combinedDivClass}>
-    <input
-        type="checkbox"
-        id={id}
-        bind:checked={checked}
-        class={combinedClass}
-        {...restProps}/>
-    <Text tag="label" for={id} class={combinedLabelClass}>
-        {@render children?.()}
-    </Text>
-</div>

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

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

package/dist/components/FloatingInput.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-    import type { FloatingInputProps } from "../types/FloatingInput.js";
-    import { twMerge } from "tailwind-merge";
-    import Text from "./Text.svelte";
-
-    let { 
-        children = undefined, 
-        class: className = "",
-        labelClass = "",
-        divClass = "", 
-        value = $bindable(),
-        onfocus = undefined,
-        onblur = undefined,
-        isTextArea = false,
-        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 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 z-0";
-    let originalLabelClassInput = "top-1/2 transform -translate-y-1/2";
-    let originalLabelClassTextArea = "top-2";
-    let selectedLabelClass = "left-2 z-30 top-0.5 text-[10px]!";
-
-    let invalidClass = "border border-red-500 focus:ring-red-500";
-
-    let labelClassFull = $derived(twMerge(isTextArea ? originalLabelClassTextArea : originalLabelClassInput, originalLabelClass));
-
-    let combinedLabelClass = $derived(twMerge(defaultLabelClass, isFocused || hasContent ? selectedLabelClass : labelClassFull, 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}>
-    <Text tag="label" for={id} class={combinedLabelClass}>
-        {@render children?.()}
-    </Text>
-    {#if isTextArea}
-        <textarea
-            {id}
-            bind:value={value}
-            onfocus={handleFocus}
-            onblur={handleBlur}
-            class={combinedClass}
-            {...restProps}
-        ></textarea>
-    {:else}
-        <input
-            {id}
-            bind:value={value}
-            onfocus={handleFocus}
-            onblur={handleBlur}
-            class={combinedClass}
-            {...restProps}
-        />
-    {/if}
-</div>

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

@@ -1,4 +0,0 @@
-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/FloatingSelect.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-    import type { FloatingSelectProps } from "../types/FloatingSelect.js";
-    import { twMerge } from "tailwind-merge";
-    import Text from "./Text.svelte";
-
-    let { 
-        children = undefined, 
-        class: className = "",
-        divClass = "",
-        optionClass = "", 
-        value = $bindable(),
-        options = [],
-        id = crypto.randomUUID(),
-        ...restProps
-    }: FloatingSelectProps = $props();
-
-    let defaultSelectClass = "cursor-pointer bg-form-input-background text-main-text z-20 w-full rounded px-1 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 w-fit";
-
-    let selectedLabelClass = "left-2 z-30 top-0.5 text-[10px]!";
-
-    let combinedLabelClass = $derived(twMerge(defaultLabelClass, selectedLabelClass, className));
-    let combinedSelectClass = $derived(twMerge(defaultSelectClass, className));
-    let combinedDivClass = $derived(twMerge(defaultDivClass, divClass));
-</script>
-
-<div class={combinedDivClass}>
-    <Text tag="label" for={id} class={combinedLabelClass}>
-        {@render children?.()}
-    </Text>
-    <select {id} class={combinedSelectClass} {...restProps} bind:value={value}>
-        {#each options as option}
-            <option value={option.value} class={optionClass}>
-                {option.label}
-            </option>
-        {/each}
-    </select>
-</div>

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

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

package/dist/components/Navbar.svelte

@@ -1,37 +0,0 @@
-<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 = "box-border transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-[100] flex items-center bg-main-background/99 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/Navbar.svelte.d.ts

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

package/dist/components/NavbarElement.svelte

@@ -1,39 +0,0 @@
-<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 px-5 py-0 text-main-text hover:bg-navbar-element-hover-background";
-
-    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 radius={0} {href} class={combinedClass} {...restProps}>
-    {@render children?.()}
-</Button>

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

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

package/dist/components/NavbarSeparator.svelte

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

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

@@ -1,26 +0,0 @@
-export default NavbarSeparator;
-type NavbarSeparator = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const NavbarSeparator: $$__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,43 +0,0 @@
-<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/SEO.svelte.d.ts

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

package/dist/components/Text.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-    import type { TextProps } from "../types/Text.js";
-    import { twMerge } from "tailwind-merge";
-
-    let { 
-        children = undefined, 
-        class: className = "", 
-        tag = "p",
-        ...restProps
-    }: TextProps = $props();
-
-    const tagStyles = {
-        "p": "text-base",
-        "div": "text-base",
-        "span": "text-base",
-        "label": "text-sm",
-        "strong": "text-base font-bold",
-        "em": "text-base italic",
-        "small": "text-sm",
-        "blockquote": "border-l-4 border-gray-500 pl-2 opacity-70",
-        "pre": "font-mono bg-sub-background px-3 py-2 radius overflow-x-auto whitespace-pre",
-        "code": "font-mono bg-sub-background px-3 py-2 radius inline-block",
-        "a": "text-blue-400 hover:text-blue-500 hover:underline",
-        "li": "text-base list-disc list-inside",
-        "h1": "text-6xl font-extrabold",
-        "h2": "text-5xl font-bold",
-        "h3": "text-4xl font-semibold",
-        "h4": "text-3xl font-medium",
-        "h5": "text-2xl font-medium",
-        "h6": "text-xl font-medium"
-    };
-
-    let defaultClass = "text-main-text";    
-    let combinedClass = $derived(twMerge(defaultClass, tagStyles[tag] || "", className));
-</script>
-
-<svelte:element this={tag} class={combinedClass} {...restProps}>
-    {@render children?.()}
-</svelte:element>

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

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

package/dist/components/Typewriter.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-    import { twMerge } from "tailwind-merge";
-    import { onMount } from "svelte";
-
-    import type { DisplaySegment, TypewriterProps } from "../types/Typewriter.d.js";
-    import Text from "./Text.svelte";
-
-    let { 
-        actions, 
-        class: className = "",
-        textClass = "",
-        ...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}
-            <Text tag="span" class={textClass} style="color: {segment.color}">{segment.text}</Text>
-        {/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

@@ -1,4 +0,0 @@
-import type { TypewriterProps } from "../types/Typewriter.d.ts";
-declare const Typewriter: import("svelte").Component<TypewriterProps, {}, "">;
-type Typewriter = ReturnType<typeof Typewriter>;
-export default Typewriter;

package/dist/styles/color.d.ts

@@ -1,4 +0,0 @@
-export type ColorStyle = "red" | "yellow" | "lightgreen" | "blue" | "pink" | "purple" | "gray" | "sub" | "none";
-export type ColorStyleType = "full" | "light" | "outline" | "ghost";
-export declare const colorStyleParts: Record<ColorStyle, Record<ColorStyleType, string>>;
-export declare function generateColorStyle(color: ColorStyle, variant: ColorStyleType): string;

package/dist/styles/color.js

@@ -1,62 +0,0 @@
-export const colorStyleParts = {
-    red: {
-        full: "bg-red-500 hover:bg-red-600",
-        light: "bg-red-500/35 hover:bg-red-600/35 text-white/60",
-        outline: "border border-red-500 hover:border-red-600 text-red-500 hover:text-red-600 hover:bg-red-500/10",
-        ghost: "hover:bg-red-500"
-    },
-    yellow: {
-        full: "bg-yellow-500 hover:bg-yellow-600",
-        light: "bg-yellow-500/35 hover:bg-yellow-600/35 text-white/60",
-        outline: "border border-yellow-500 hover:border-yellow-600 text-yellow-500 hover:text-yellow-600 hover:bg-yellow-500/10",
-        ghost: "hover:bg-yellow-500"
-    },
-    lightgreen: {
-        full: "bg-green-500 hover:bg-green-600",
-        light: "bg-green-500/35 hover:bg-green-600/35 text-white/60",
-        outline: "border border-green-500 hover:border-green-600 text-green-500 hover:text-green-600 hover:bg-green-500/10",
-        ghost: "hover:bg-green-500"
-    },
-    blue: {
-        full: "bg-blue-500 hover:bg-blue-600",
-        light: "bg-blue-500/35 hover:bg-blue-600/35 text-white/60",
-        outline: "border border-blue-500 hover:border-blue-600 text-blue-500 hover:text-blue-600 hover:bg-blue-500/10",
-        ghost: "hover:bg-blue-500"
-    },
-    pink: {
-        full: "bg-pink-500 hover:bg-pink-600",
-        light: "bg-pink-500/35 hover:bg-pink-600/35 text-white/60",
-        outline: "border border-pink-500 hover:border-pink-600 text-pink-500 hover:text-pink-600 hover:bg-pink-500/10",
-        ghost: "hover:bg-pink-500"
-    },
-    purple: {
-        full: "bg-purple-500 hover:bg-purple-600",
-        light: "bg-purple-500/35 hover:bg-purple-600/35 text-white/60",
-        outline: "border border-purple-500 hover:border-purple-600 text-purple-500 hover:text-purple-600 hover:bg-purple-500/10",
-        ghost: "hover:bg-purple-500"
-    },
-    gray: {
-        full: "bg-gray-500 hover:bg-gray-600",
-        light: "bg-gray-500/35 hover:bg-gray-600/35 text-white/60",
-        outline: "border border-gray-500 hover:border-gray-600 text-gray-500 hover:text-gray-600 hover:bg-gray-500/10",
-        ghost: "hover:bg-gray-500"
-    },
-    sub: {
-        full: "bg-sub-background hover:bg-sub-background-hover",
-        light: "bg-sub-background hover:bg-sub-background-hover text-white/60",
-        outline: "border border-sub-background hover:border-sub-background-hover text-sub-background hover:text-sub-background-hover hover:bg-sub-background/10",
-        ghost: "hover:bg-sub-background"
-    },
-    none: {
-        full: "",
-        light: "",
-        outline: "",
-        ghost: ""
-    }
-};
-export function generateColorStyle(color, variant) {
-    const styles = colorStyleParts[color];
-    if (!styles)
-        return "";
-    return styles[variant] || "";
-}

package/dist/styles/layout.css

@@ -1,44 +0,0 @@
-@import 'tailwindcss';
-
-@utility flex-center {
-    @apply flex items-center justify-center;
-}
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-    --color-main-background: var(--vpcui-color-main-background);
-    --color-sub-background: var(--vpcui-color-sub-background);
-    --color-sub-background-hover: var(--vpcui-color-sub-background-hover);
-    --color-main-text: var(--vpcui-color-main-text);
-    --color-sub-text: var(--vpcui-color-sub-text);
-    --color-form-input-background: var(--vpcui-color-form-input-background);
-    --color-form-input-hover: var(--vpcui-color-form-input-hover);
-    --color-navbar-element-hover-background: var(--vpcui-color-navbar-element-hover-background);
-}
-
-:root {
-    --vpcui-color-main-background: var(--color-mist-50);
-    --vpcui-color-sub-background: var(--color-mist-300);
-    --vpcui-color-sub-background-hover: var(--color-mist-400);
-    --vpcui-color-main-text: #000;
-    --vpcui-color-sub-text: #555;
-    --vpcui-color-form-input-background: var(--color-mist-100);
-    --vpcui-color-form-input-hover: var(--color-mist-200);
-    --vpcui-color-navbar-element-hover-background: var(--color-mist-100);
-}
-
-html.dark {
-    --vpcui-color-main-background: #121212;
-    --vpcui-color-sub-background: #1c1c1c;
-    --vpcui-color-sub-background-hover: #242424;
-    --vpcui-color-main-text: #fff;
-    --vpcui-color-sub-text: #aaa;
-    --vpcui-color-form-input-background: #1c1c1c;
-    --vpcui-color-form-input-hover: #2c2c2c;
-    --vpcui-color-navbar-element-hover-background: var(--color-zinc-900);
-}
-
-html {
-    background-color: var(--color-main-background);
-}

package/dist/styles/size.d.ts

@@ -1,3 +0,0 @@
-export type SizeStyle = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "none" | number;
-export type SizeStyleType = "button" | "buttonIcon" | "radius";
-export declare const sizeStyleParts: Record<SizeStyle, Record<SizeStyleType, string>>;

package/dist/styles/size.js

@@ -1,57 +0,0 @@
-export const sizeStyleParts = {
-    xs: {
-        button: "text-xs h-4 px-1 py-0.5",
-        buttonIcon: "text-xs h-4 w-4 p-0.5",
-        radius: "rounded-xs"
-    },
-    sm: {
-        button: "text-sm h-6 px-2 py-1",
-        buttonIcon: "text-sm h-6 w-6 p-1",
-        radius: "rounded-sm"
-    },
-    md: {
-        button: "text-base h-8 px-3 py-1.5",
-        buttonIcon: "text-base h-8 w-8 p-1.5",
-        radius: "rounded-md"
-    },
-    lg: {
-        button: "text-lg h-10 px-4 py-2",
-        buttonIcon: "text-lg h-10 w-10 p-2",
-        radius: "rounded-lg"
-    },
-    xl: {
-        button: "text-xl h-12 px-5 py-2.5",
-        buttonIcon: "text-xl h-12 w-12 p-2.5",
-        radius: "rounded-xl"
-    },
-    "2xl": {
-        button: "text-2xl h-14 px-6 py-3",
-        buttonIcon: "text-2xl h-14 w-14 p-3",
-        radius: "rounded-2xl"
-    },
-    "3xl": {
-        button: "text-3xl h-16 px-7 py-3.5",
-        buttonIcon: "text-3xl h-16 w-16 p-3.5",
-        radius: "rounded-3xl"
-    },
-    "4xl": {
-        button: "text-4xl h-18 px-8 py-4",
-        buttonIcon: "text-4xl h-18 w-18 p-4",
-        radius: "rounded-4xl"
-    },
-    full: {
-        button: "w-full text-base h-8 px-3 py-1",
-        buttonIcon: "w-full aspect-square text-base p-1",
-        radius: "rounded-full"
-    },
-    none: {
-        button: "",
-        buttonIcon: "",
-        radius: "rounded-none"
-    },
-    0: {
-        button: "",
-        buttonIcon: "",
-        radius: "rounded-none"
-    }
-};

package/dist/types/Analytics.d.ts

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

package/dist/types/Button.d.ts

@@ -1,17 +0,0 @@
-import type { ColorStyle, ColorStyleType } from "../styles/color.ts";
-import type { SizeStyle } from "../styles/size.ts";
-
-export interface ButtonProps {
-    children?: any;
-    class?: string;
-    pill?: boolean;
-    icon?: boolean;
-    href?: string;
-    color?: ColorStyle;
-    variant?: ColorStyleType;
-    disabled?: boolean;
-    external?: boolean;
-    size?: SizeStyle;
-    radius?: SizeStyle;
-    [key: string]: any;
-}

package/dist/types/Card.d.ts

@@ -1,6 +0,0 @@
-export interface CardProps {
-    children?: any;
-    class?: string;
-    href?: string;
-    [key: string]: any;
-}

package/dist/types/Checkbox.d.ts

@@ -1,9 +0,0 @@
-export interface CheckboxProps {
-    children?: any;
-    class?: string;
-    labelClass?: string;
-    divClass?: string;
-    checked?: boolean;
-    id?: string;
-    [key: string]: any;
-};

package/dist/types/FloatingInput.d.ts

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

package/dist/types/FloatingSelect.d.ts

@@ -1,10 +0,0 @@
-export interface FloatingSelectProps {
-    children?: any;
-    class?: string;
-    divClass?: string;
-    optionClass?: string;
-    value?: any;
-    options: { value: any; label: string }[];
-    id?: `${string}-${string}-${string}-${string}-${string}`;
-    [key: string]: any; 
-};  

package/dist/types/Navbar.d.ts

@@ -1,14 +0,0 @@
-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 +0,0 @@
-export interface SEOProps {
-    websiteName: string;
-    title?: string;
-    description?: string;
-    image?: any;
-}

package/dist/types/Text.d.ts

@@ -1,8 +0,0 @@
-type TextTagOptions = "p" | "div" | "span" | "label" | "strong" | "em" | "small" | "blockquote" | "pre" | "code" | "a" | "li" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-
-export interface TextProps {
-    children?: any;
-    class?: string;
-    tag?: TextTagOptions;
-    [key: string]: any; 
-};  

package/dist/types/Typewriter.d.ts

@@ -1,18 +0,0 @@
-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;
-    textClass?: string;
-    [key: string]: any;
-}