@valerius_petrini/corekit-ui 0.1.36 → 0.1.41

package/dist/actions/fbm.js

@@ -117,7 +117,7 @@ function initBuffers(gl) {
     };
 }
 export function fbmBackground(canvas, options = {}) {
-    let gl = canvas.getContext("webgl", { antialias: true });
+    let gl = canvas.getContext("webgl", { antialias: true, premultipliedAlpha: false, preserveDrawingBuffer: true });
     if (!gl) {
         console.error("WebGL not supported");
         return;
@@ -145,8 +145,14 @@ export function fbmBackground(canvas, options = {}) {
     const buffers = initBuffers(gl);
     function updateCanvasSize() {
         const DPR = window.devicePixelRatio || 1;
-        canvas.width = Math.floor(canvas.clientWidth * DPR);
-        canvas.height = Math.floor(canvas.clientHeight * DPR);
+        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();

package/dist/components/Card.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        ...restProps
+    } = $props();
+
+    let defaultClass = "text-main-text shadow-xl rounded-lg transition-colors bg-sub-background hover:bg-sub-background-hover p-4";    
+    let combinedClass = $derived(twMerge(defaultClass, className));
+</script>
+
+<div class={combinedClass}>
+    {@render children?.()}
+</div>

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

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

package/dist/components/FloatingInput.svelte

@@ -21,14 +21,14 @@
     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 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 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 invalidClass = "border 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));

package/dist/components/FloatingSelect.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        options = [],
+        id = crypto.randomUUID(),
+        ...restProps
+    } = $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 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 combinedLabelClass = $derived(twMerge(defaultLabelClass, selectedLabelClass, className));
+    let combinedSelectClass = $derived(twMerge(defaultSelectClass, className));
+</script>
+
+<div class={defaultDivClass}>
+    <label for={id} class={combinedLabelClass}>
+        {@render children?.()}
+    </label>
+    <select {id} class={combinedSelectClass} {...restProps}>
+        {#each options as option}
+            <option value={option.value}>{option.label}</option>
+        {/each}
+    </select>
+</div>

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

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

package/dist/components/Navbar.svelte

@@ -10,7 +10,7 @@
         ...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 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);
 

package/dist/components/Text.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        ...restProps
+    } = $props();
+
+    let defaultClass = "text-main-text";    
+    let combinedClass = $derived(twMerge(defaultClass, className));
+</script>
+
+<p class={combinedClass}>
+    {@render children?.()}
+</p>

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

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

package/dist/index.d.ts

@@ -6,5 +6,8 @@ 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";

package/dist/index.js

@@ -6,4 +6,7 @@ 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";

package/dist/styles/color.d.ts

@@ -6,5 +6,6 @@ export declare const colorStyles: {
     pink: string;
     purple: string;
     gray: string;
+    sub: string;
 };
 export type ColorStyle = keyof typeof colorStyles;

package/dist/styles/color.js

@@ -6,4 +6,5 @@ export const colorStyles = {
     pink: "bg-pink-500 hover:bg-pink-600",
     purple: "bg-purple-500 hover:bg-purple-600",
     gray: "bg-gray-500 hover:bg-gray-600",
+    sub: "bg-sub-background hover:bg-sub-background-hover"
 };

package/dist/styles/layout.css

@@ -1,6 +1,4 @@
 @import 'tailwindcss';
-@plugin '@tailwindcss/forms';
-@plugin '@tailwindcss/typography';
 
 @utility flex-center {
     @apply flex items-center justify-center;
@@ -11,27 +9,33 @@
 @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-stone-50);
-    --vpcui-color-sub-background: var(--color-stone-300);
+    --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-stone-100);
-    --vpcui-color-navbar-element-hover-background: var(--color-zinc-100);
+    --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: var(--color-stone-950);
-    --vpcui-color-sub-background: var(--color-stone-700);
+    --vpcui-color-main-background: #121212;
+    --vpcui-color-sub-background: #161616;
+    --vpcui-color-sub-background-hover: #1c1c1c;
     --vpcui-color-main-text: #fff;
     --vpcui-color-sub-text: #aaa;
-    --vpcui-color-form-input-background: var(--color-stone-800);
+    --vpcui-color-form-input-background: #1c1c1c;
+    --vpcui-color-form-input-hover: #2c2c2c;
     --vpcui-color-navbar-element-hover-background: var(--color-zinc-900);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.36",
+	"version": "0.1.41",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",
@@ -15,7 +15,6 @@
 	},
 	"files": [
 		"dist",
-		"src/lib/styles",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
@@ -29,7 +28,8 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		}
+		},
+		"./layout.css": "./dist/styles/layout.css"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/src/lib/styles/color.ts

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

package/src/lib/styles/layout.css

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