@valerius_petrini/corekit-ui 0.1.47 → 0.1.49

package/dist/components/Button.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { colorStyles } from "../styles/color.js";
+    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";
 
@@ -9,26 +10,55 @@
         pill = false,
         icon = false,
         href = undefined,
-        color = undefined,
-        size = undefined,
+        color = "none",
+        variant = "full",
+        disabled = false,
+        external = false,
+        size = "md",
+        radius = "md",
         ...restProps
     }: ButtonProps = $props();
 
-    function getSizeStyles(size?: number | string) {
-        if (typeof size === "number")
-            return `w-${size} h-${size}`;
-        return "";
-    }
+    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";
+    });
 
-    let pillClass = "rounded-full";
-    let iconClass = "rounded-full p-2 flex-center";
-    let defaultClass = $derived(twMerge(
-        "text-white cursor-pointer px-2 py-1 transition-colors duration-300 rounded-md", 
-        (pill ? pillClass : ""), (icon ? iconClass : ""), color ? colorStyles[color] : "", getSizeStyles(size)));
+    const customStyle = $derived(
+        typeof size === "number" 
+            ? `width: ${size}px; height: ${size}px; flex: none;` 
+            : ""
+    );
 
-    let combinedClass = $derived(twMerge(defaultClass, className));
+    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={combinedClass} {href} {...restProps}>
+<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/Checkbox.svelte

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

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

@@ -6,7 +6,7 @@
     let { 
         children = undefined, 
         class: className = "",
-        divName = "",
+        divClass = "",
         optionClass = "", 
         value = $bindable(),
         options = [],
@@ -22,7 +22,7 @@
 
     let combinedLabelClass = $derived(twMerge(defaultLabelClass, selectedLabelClass, className));
     let combinedSelectClass = $derived(twMerge(defaultSelectClass, className));
-    let combinedDivClass = $derived(twMerge(defaultDivClass, divName));
+    let combinedDivClass = $derived(twMerge(defaultDivClass, divClass));
 </script>
 
 <div class={combinedDivClass}>

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 flex items-center px-5 py-0 text-main-text hover:bg-navbar-element-hover-background rounded-none";
+    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 {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 rounded overflow-x-auto whitespace-pre",
-        "code": "font-mono bg-sub-background px-3 py-2 rounded 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/color.d.ts

@@ -1,11 +1,4 @@
-export declare const colorStyles: {
-    red: string;
-    yellow: string;
-    lightgreen: string;
-    blue: string;
-    pink: string;
-    purple: string;
-    gray: string;
-    sub: string;
-};
-export type ColorStyle = keyof typeof colorStyles;
+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,10 +1,62 @@
-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",
-    sub: "bg-sub-background hover:bg-sub-background-hover"
+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/size.d.ts

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

@@ -0,0 +1,92 @@
+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",
+        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",
+        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",
+        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",
+        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",
+        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",
+        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",
+        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",
+        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",
+        text: "w-full text-base"
+    },
+    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",
+        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/Button.d.ts

@@ -1,4 +1,5 @@
-import type { ColorStyle } from "../styles/color.ts";
+import type { ColorStyle, ColorStyleType } from "../styles/color.ts";
+import type { SizeStyle } from "../styles/size.ts";
 
 export interface ButtonProps {
     children?: any;
@@ -7,6 +8,10 @@ export interface ButtonProps {
     icon?: boolean;
     href?: string;
     color?: ColorStyle;
-    size?: number | string;
+    variant?: ColorStyleType;
+    disabled?: boolean;
+    external?: boolean;
+    size?: SizeStyle;
+    radius?: SizeStyle;
     [key: string]: any;
 }

package/dist/types/Checkbox.d.ts

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

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.47",
+	"version": "0.1.49",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",