@valerius_petrini/corekit-ui 0.1.34 → 0.1.36

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/styles/layout.css

@@ -0,0 +1,40 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+
+@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-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-navbar-element-hover-background: var(--vpcui-color-navbar-element-hover-background);
+}
+
+:root {
+    --vpcui-color-main-background: var(--color-stone-50);
+    --vpcui-color-sub-background: var(--color-stone-300);
+    --vpcui-color-main-text: #000;
+    --vpcui-color-sub-text: #555;
+    --vpcui-color-form-input-background: var(--color-stone-100);
+    --vpcui-color-navbar-element-hover-background: var(--color-zinc-100);
+}
+
+html.dark {
+    --vpcui-color-main-background: var(--color-stone-950);
+    --vpcui-color-sub-background: var(--color-stone-700);
+    --vpcui-color-main-text: #fff;
+    --vpcui-color-sub-text: #aaa;
+    --vpcui-color-form-input-background: var(--color-stone-800);
+    --vpcui-color-navbar-element-hover-background: var(--color-zinc-900);
+}
+
+html {
+    background-color: var(--color-main-background);
+}

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,59 @@
-{
-	"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.36",
+	"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",
+		"src/lib/styles",
+		"!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"
+	}
+}

package/src/lib/styles/color.ts

@@ -0,0 +1,11 @@
+export const colorStyles = {
+    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",
+};
+
+export type ColorStyle = keyof typeof colorStyles;