@valerius_petrini/corekit-ui 0.1.46 → 0.1.48

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/Card.svelte

@@ -10,7 +10,7 @@
         ...restProps
     }: CardProps = $props();
 
-    let defaultClass = "text-main-text shadow-xl rounded-lg transition-colors bg-sub-background hover:bg-sub-background-hover p-4";    
+    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>
 

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/NavbarElement.svelte

@@ -12,7 +12,7 @@
         ...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 hover:bg-navbar-element-hover-background";
 
     let scrollY = $state(0);
 
@@ -34,6 +34,6 @@
     });
 </script>
 
-<Button {href} class={combinedClass} {...restProps}>
+<Button radius={0} {href} class={combinedClass} {...restProps}>
     {@render children?.()}
 </Button>

package/dist/components/Text.svelte

@@ -18,8 +18,8 @@
         "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",
+        "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",
@@ -31,7 +31,7 @@
     };
 
     let defaultClass = "text-main-text";    
-    let combinedClass = $derived(twMerge(defaultClass, className, tagStyles[tag] || ""));
+    let combinedClass = $derived(twMerge(defaultClass, tagStyles[tag] || "", className));
 </script>
 
 <svelte:element this={tag} class={combinedClass} {...restProps}>

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,3 @@
+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

@@ -0,0 +1,57 @@
+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/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/package.json

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