@valerius_petrini/corekit-ui 0.1.48 → 0.1.49

package/dist/components/Card.svelte

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

package/dist/components/Navbar.svelte

@@ -7,31 +7,24 @@
         children = undefined, 
         class: className = "", 
         classTop = "",
+        threshold = 10,
         ...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 defaultClass = "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-box border-b";
 
     let scrollY = $state(0);
+    let isAtTop = $derived(scrollY <= threshold);
 
-    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);
-        };
-    });
+    const combinedClass = $derived(twMerge(
+        defaultClass,
+        className,
+        isAtTop ? classTop : ""
+    ));
 </script>
 
+<svelte:window bind:scrollY={scrollY}/>
+
 <nav class={combinedClass} {...restProps}>
     {@render children?.()}
 </nav>

package/dist/components/NavbarElement.svelte

@@ -1,39 +1,35 @@
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
     import Button from "./Button.svelte";
-    import { onMount } from "svelte";
     import type { NavbarElementProps } from "../types/Navbar.js";
+    import { page } from "$app/state";
 
     let {
         children = undefined, 
         class: className = "", 
         classTop = "",
+        activeClass = "",
         href = undefined,
+        threshold = 10,
         ...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 defaultClass = "navbar-element w-fit h-full px-5 py-0 text-main-text";
 
     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);
-        };
-    });
+    let isAtTop = $derived(scrollY <= threshold);
+    let isActive = $derived(page.url.pathname === href);
+
+    const combinedClass = $derived(twMerge(
+        defaultClass,
+        className,
+        isActive ? activeClass : "",
+        isAtTop ? classTop : "",
+    ));
 </script>
 
-<Button radius={0} {href} class={combinedClass} {...restProps}>
+<svelte:window bind:scrollY={scrollY}/>
+
+<Button radius={0} {href} color="none" class={combinedClass} {...restProps} aria-current={isActive ? 'page' : undefined}>
     {@render children?.()}
 </Button>

package/dist/components/Text.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { sizeStyleParts, textStyle, type SizeStyle } from "../styles/size.js";
     import type { TextProps } from "../types/Text.js";
     import { twMerge } from "tailwind-merge";
 
@@ -6,34 +7,59 @@
         children = undefined, 
         class: className = "", 
         tag = "p",
+        shrink = false,
+        size = "none",
         ...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"
+    const tagStyles: Record<string, { class: string; size: keyof typeof textStyle }> = {
+        "p": { class: "", size: "text-base" },
+        "div": { class: "", size: "text-base" },
+        "span": { class: "", size: "text-base" },
+        "label": { class: "", size: "text-sm" },
+        "strong": { class: "font-bold", size: "text-base" },
+        "b": { class: "font-bold", size: "text-base" },
+        "em": { class: "italic", size: "text-base" },
+        "i": { class: "italic", size: "text-base" },
+        "u": { class: "underline", size: "text-base" },
+        "small": { class: "", size: "text-sm" },
+        "blockquote": { class: "border-l-4 border-gray-500 pl-2 opacity-70", size: "text-base" },
+        "pre": { class: "font-mono bg-sub-background px-3 py-2 radius overflow-x-auto whitespace-pre", size: "text-base" },
+        "code": { class: "font-mono bg-sub-background px-3 py-2 radius inline-block", size: "text-base" },
+        "a": { class: "text-blue-400 hover:text-blue-500 hover:underline transition-colors cursor-pointer", size: "text-base" },
+        "li": { class: "text-base list-disc list-inside", size: "text-base" },
+        "h1": { class: "font-extrabold", size: "text-6xl" },
+        "h2": { class: "font-bold", size: "text-5xl" },
+        "h3": { class: "font-semibold", size: "text-4xl" },
+        "h4": { class: "font-medium", size: "text-3xl" },
+        "h5": { class: "font-medium", size: "text-2xl" },
+        "h6": { class: "font-medium", size: "text-xl" }
     };
 
+    function getTextSizeInRem(): string {
+        if (size !== "none") {
+            const sizeKey = (sizeStyleParts[size as SizeStyle]?.text ?? "text-base") as keyof typeof textStyle;
+            return textStyle[sizeKey] ?? textStyle["text-base"];
+        }
+
+        return textStyle[tagStyles[tag]?.size || "text-base"] ?? textStyle["text-base"];
+    }
+
+    let shrinkStyle = $derived(shrink 
+        ? `font-size: clamp(8px, 12cqi, ${getTextSizeInRem()}); white-space: nowrap; display: block; width: fit-content;` 
+        : ""
+    );
+
     let defaultClass = "text-main-text";    
-    let combinedClass = $derived(twMerge(defaultClass, tagStyles[tag] || "", className));
+    let combinedClass = $derived(twMerge(
+        defaultClass, 
+        tagStyles[tag]?.class || "", 
+        tagStyles[tag]?.size || "",
+        sizeStyleParts[size]?.text || "",
+        className
+    ));
 </script>
 
-<svelte:element this={tag} class={combinedClass} {...restProps}>
+<svelte:element this={tag} style={shrinkStyle} class={combinedClass} {...restProps}>
     {@render children?.()}
 </svelte:element>

package/dist/index.d.ts

@@ -9,5 +9,6 @@ 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 { fbmBackground } from "./actions/fbm.ts";
 export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.d.ts";

package/dist/index.js

@@ -9,4 +9,5 @@ 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 { fbmBackground } from "./actions/fbm.js";

package/dist/styles/size.d.ts

@@ -1,3 +1,15 @@
-export type SizeStyle = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "none" | number;
-export type SizeStyleType = "button" | "buttonIcon" | "radius";
+export type SizeStyle = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full" | "none" | number;
+export type SizeStyleType = "button" | "buttonIcon" | "radius" | "text";
 export declare const sizeStyleParts: Record<SizeStyle, Record<SizeStyleType, string>>;
+export declare const textStyle: {
+    "text-xs": string;
+    "text-sm": string;
+    "text-base": string;
+    "text-lg": string;
+    "text-xl": string;
+    "text-2xl": string;
+    "text-3xl": string;
+    "text-4xl": string;
+    "text-5xl": string;
+    "text-6xl": string;
+};

package/dist/styles/size.js

@@ -2,56 +2,91 @@ 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"
+        radius: "rounded-xs",
+        text: "text-xs"
     },
     sm: {
         button: "text-sm h-6 px-2 py-1",
         buttonIcon: "text-sm h-6 w-6 p-1",
-        radius: "rounded-sm"
+        radius: "rounded-sm",
+        text: "text-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"
+        radius: "rounded-md",
+        text: "text-base"
     },
     lg: {
         button: "text-lg h-10 px-4 py-2",
         buttonIcon: "text-lg h-10 w-10 p-2",
-        radius: "rounded-lg"
+        radius: "rounded-lg",
+        text: "text-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"
+        radius: "rounded-xl",
+        text: "text-xl"
     },
     "2xl": {
         button: "text-2xl h-14 px-6 py-3",
         buttonIcon: "text-2xl h-14 w-14 p-3",
-        radius: "rounded-2xl"
+        radius: "rounded-2xl",
+        text: "text-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"
+        radius: "rounded-3xl",
+        text: "text-3xl"
     },
     "4xl": {
         button: "text-4xl h-18 px-8 py-4",
         buttonIcon: "text-4xl h-18 w-18 p-4",
-        radius: "rounded-4xl"
+        radius: "rounded-4xl",
+        text: "text-4xl"
+    },
+    "5xl": {
+        button: "text-5xl h-20 px-9 py-4.5",
+        buttonIcon: "text-5xl h-20 w-20 p-4.5",
+        radius: "rounded-[2.5rem]",
+        text: "text-5xl"
+    },
+    "6xl": {
+        button: "text-6xl h-24 px-10 py-5",
+        buttonIcon: "text-6xl h-24 w-24 p-5",
+        radius: "rounded-[3rem]",
+        text: "text-6xl"
     },
     full: {
         button: "w-full text-base h-8 px-3 py-1",
         buttonIcon: "w-full aspect-square text-base p-1",
-        radius: "rounded-full"
+        radius: "rounded-full",
+        text: "w-full text-base"
     },
     none: {
-        button: "",
-        buttonIcon: "",
-        radius: "rounded-none"
+        button: "p-0 h-auto text-base",
+        buttonIcon: "p-0 h-auto w-auto text-base",
+        radius: "rounded-none",
+        text: ""
     },
     0: {
         button: "",
         buttonIcon: "",
-        radius: "rounded-none"
+        radius: "rounded-none",
+        text: ""
     }
 };
+export const textStyle = {
+    "text-xs": "0.75rem",
+    "text-sm": "0.875rem",
+    "text-base": "1rem",
+    "text-lg": "1.125rem",
+    "text-xl": "1.25rem",
+    "text-2xl": "1.5rem",
+    "text-3xl": "1.875rem",
+    "text-4xl": "2.25rem",
+    "text-5xl": "3rem",
+    "text-6xl": "3.75rem"
+};

package/dist/types/Navbar.d.ts

@@ -2,6 +2,7 @@ export interface NavbarProps {
     children?: any;
     class?: string;
     classTop?: string;
+    threshold?: number;
     [key: string]: any;
 };
 
@@ -9,6 +10,8 @@ export interface NavbarElementProps {
     children?: any;
     class?: string;
     classTop?: string;
+    activeClass?: string;
     href?: string;
+    threshold?: number;
     [key: string]: any;
 }

package/dist/types/Text.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.48",
+	"version": "0.1.49",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",