@valerius_petrini/corekit-ui 0.1.57 → 0.1.59

package/dist/actions/toast.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ToastProps } from "../types/Toast.ts";
+export declare const toastState: {
+    items: (ToastProps & {
+        id: number;
+    })[];
+};
+export declare const toast: {
+    add(props: ToastProps): number;
+    dismiss(id: number): void;
+};

package/dist/actions/toast.svelte.js

@@ -0,0 +1,21 @@
+import { mount } from "svelte";
+import Toaster from "../components/Toaster.svelte";
+let count = 0;
+let toasterMounted = false;
+export const toastState = $state({
+    items: []
+});
+export const toast = {
+    add(props) {
+        if (!toasterMounted && typeof document !== "undefined") {
+            mount(Toaster, { target: document.body });
+            toasterMounted = true;
+        }
+        const id = count++;
+        toastState.items.push({ ...props, id });
+        return id;
+    },
+    dismiss(id) {
+        toastState.items = toastState.items.filter(t => t.id !== id);
+    }
+};

package/dist/components/Button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { generateColorStyle } from "../styles/color.js";
-    import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+    import { getSizeStyle, getSizeStyleClass, sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
     import type { ButtonProps } from "../types/Button.js";
     import { twMerge } from "tailwind-merge";
     import { getLinkProps } from "../utils/link.js";
@@ -21,49 +21,29 @@
         ...restProps
     }: ButtonProps = $props();
 
-    const sizeClasses = $derived.by(() => {
-        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
-        const radiusParts = typeof radius === "string" ? sizeStyleParts[radius as SizeStyleTheme] : null;
-
-        return twMerge(
-            icon ? "p-0 flex-none" : "h-fit",
-            parts?.[icon ? "buttonIcon" : "button"],
-            radiusParts?.radius,
-            pill || icon ? "rounded-full" : "",
-            square ? "aspect-square rounded-none" : ""
-        );
-    });
-
-    const customStyle = $derived.by(() => {
-        const styles: string[] = [];
-
-        if (typeof size === "number") {
-            styles.push(`height: ${size}px`);
-            styles.push(icon
-                ? `width: ${size}px; padding: ${size / 8}px`
-                : `padding: ${size / 4}px ${size / 8}px`
-            );
-        }
-
-        if (typeof radius === "number") {
-            styles.push(`border-radius: ${radius}px`);
-        }
-
-        return styles.join("; ");
-    });
-
     const defaultClass = "inline-flex items-center justify-center gap-2 transition-colors duration-300 ease-in-out text-white whitespace-nowrap";
     const disabledClass = $derived(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer");
+    const iconClass = $derived(icon ? "p-0 flex-none" : "h-fit");
+    const pillClass = $derived((pill || icon) && "rounded-full");
+    const squareClass = $derived(square && "aspect-square rounded-none");
 
     const mergedClass = $derived(twMerge(
         defaultClass, 
         generateColorStyle(color, variant),
         disabledClass,
-        sizeClasses,
+        getSizeStyleClass(size, icon ? "buttonIcon" : "button"),
+        getSizeStyleClass(radius, "radius"),
+        iconClass,
+        pillClass,
+        squareClass,
         className
     ));
 
-    const mergedStyle = $derived([customStyle, restProps.style].filter(Boolean).join("; "));
+    const mergedStyle = $derived([
+        getSizeStyle(size, icon ? "button" : "button"), 
+        getSizeStyle(radius, "radius"), 
+        restProps.style
+    ].filter(Boolean).join("; "));
 
     const anchorProps = $derived(getLinkProps(href, external));
 </script>

package/dist/components/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+    import { getLinkProps } from "../utils/link.js";
+    import { getSizeStyle, getSizeStyleClass } from "../styles/size.js";
     import { cardVariantStyles, type CardProps } from "../types/Card.js";
     import { twMerge } from "tailwind-merge";
 
@@ -14,49 +15,30 @@
         ...restProps
     }: CardProps = $props();
 
-    const sizeClasses = $derived.by(() => {
-        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
-        const radiusParts = typeof radius === "string" ? sizeStyleParts[radius as SizeStyleTheme] : null;
-
-        return twMerge(
-            parts?.card,
-            radiusParts?.radius,
-        );
-    });
-
-    const customStyle = $derived.by(() => {
-        const styles: string[] = [];
-
-        if (typeof size === "number")
-            styles.push(`width: ${size}px`);
-
-        if (typeof radius === "number")
-            styles.push(`border-radius: ${radius}px`);
-
-        return styles.join("; ");
-    });
-
     let defaultClass = "text-main-text rounded-lg transition-colors ease-in-out bg-sub-background p-4";
     let linkClass = "block hover:bg-sub-background-hover cursor-pointer";
     let combinedClass = $derived(twMerge(
         defaultClass, 
-        href ? linkClass : "",
+        href && linkClass,
         cardVariantStyles[variant],
-        sizeClasses,
+        getSizeStyleClass(size, "card"),
+        getSizeStyleClass(radius, "radius"),
         className
     ));
 
-    const anchorProps = $derived(href ? {
-        href,
-        target: external ? "_blank" : undefined,
-        rel: external ? "noopener noreferrer" : undefined,
-    } : {});
+    const mergedStyle = $derived([
+        getSizeStyle(size, "card"), 
+        getSizeStyle(radius, "radius"), 
+        restProps.style
+    ].filter(Boolean).join("; "));
+
+    const anchorProps = $derived(getLinkProps(href, external));
 </script>
 
 <svelte:element
     this={href ? "a" : "div"}
     class={combinedClass}
-    style={customStyle}
+    style={mergedStyle}
     {...anchorProps}
     {...restProps}
 >

package/dist/components/Input.svelte

@@ -20,6 +20,7 @@
         label = "",
         labelClass = "",
         divClass = "", 
+        outerDivClass = "",
         icon = undefined,
         variant = "default",
         placeholder = "",
@@ -103,7 +104,7 @@
         email: Mail, password: Lock, tel: Phone
     }[restProps.type as string] as Component ?? null));
 
-    let defaultClass = "text-main-text w-full rounded outline-none px-1.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0";
+    let defaultClass = "text-main-text w-full rounded-full outline-none px-1.5 w-full bg-inherit border-0 focus:ring-0 focus-visible:ring-0";
     let defaultLabelClass = "block text-sub-text rounded-md font-medium mb-1 duration-100 pointer-events-none truncate w-fit";
     let defaultDivClass = "relative *:transition-all flex-center bg-form-background border-[1px] border-form-border focus-within:ring-1 focus-within:ring-blue-500";
     let iconContainerClass = "h-5 aspect-square px-1 py-0!";
@@ -141,7 +142,7 @@
     let combinedLabelClass = $derived(twMerge(defaultLabelClass, floatingLabelClassCheck, labelSizeClass, selectedLabelClass, labelClassIcon, defaultLabelClassCheck, labelClass));
     let combinedClass = $derived(twMerge(defaultClass, sizeClasses, defaultInputClassCheck, labelSizeClass, inputClassIcon, className, isValid ? "" : invalidClass));
     let combinedDivClass = $derived(twMerge(defaultDivClass, divSizeClass, divFullClass, divClass, disabledClass));
-    let combinedOuterDivClass = $derived(twMerge("flex flex-col bg-transparent border-0 p-0", divSizeClass, divFullClass, divClass, disabledClass));
+    let combinedOuterDivClass = $derived(twMerge("flex flex-col bg-transparent border-0 p-0", divSizeClass, divFullClass, outerDivClass, disabledClass));
 
     let EyeComponent = $derived(canSeePassword ? Eye : EyeOff);
 

package/dist/components/Modal.svelte

@@ -13,11 +13,12 @@
         ...restProps
     }: ModalProps = $props();
 
-    const defaultOuterDivClass = "w-full h-screen absolute bg-black/50 z-200 flex items-center justify-center top-0 left-0 p-4";
-    const positionOuterDivClass = $derived(positionParts[position] || "");
-    const combinedOuterDivClass = $derived(twMerge(defaultOuterDivClass, positionOuterDivClass));
+    const defaultOuterDivClass = "w-full h-screen fixed bg-black/50 z-200 flex items-center justify-center top-0 left-0 p-4";
+    const combinedOuterDivClass = $derived(twMerge(defaultOuterDivClass));
 
-    const defaultInnerDivClass = "z-300 max-h-full";
+    const defaultInnerDivClass = "z-300 max-h-full absolute";
+    const positionInnerDivClass = $derived(positionParts[position] || "");
+    const combinedInnerDivClass = $derived(twMerge(defaultInnerDivClass, positionInnerDivClass));
 
     const defaultCardClass = "overflow-y-auto max-h-[95vh]";
     const combinedCardClass = $derived(twMerge(defaultCardClass, className));
@@ -27,7 +28,7 @@
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div class={combinedOuterDivClass} transition:fade={{ duration: 200 }} onclick={() => open = false}>
-        <div class={defaultInnerDivClass} transition:fly={{ y: -20, duration: 200 }} onclick={(e) => e.stopPropagation()}>
+        <div class={combinedInnerDivClass} transition:fly={{ y: -20, duration: 200 }} onclick={(e) => e.stopPropagation()}>
             <Card class={combinedCardClass} {...restProps}>
                 {@render children()}
             </Card>

package/dist/components/Progress.svelte

@@ -17,7 +17,7 @@
         ...restProps
     }: ProgressProps = $props();
 
-    let currentProgress = $state(0);
+    let mounted = $state(false);
 
     let defaultDivClass = "w-full bg-sub-background overflow-hidden";
 
@@ -59,12 +59,11 @@
 
     onMount(() => {
         if (!animate) return;
-        currentProgress = animate.from;
-        requestAnimationFrame(() => currentProgress = animate.to);
+        requestAnimationFrame(() => mounted = true);
         if (animate.onend) setTimeout(animate.onend, animate.duration);
     });
 </script>
 
-<div class={combinedDivClass} {...restProps} style={customStyle}>
-    <div class={combinedInnerClass} style="width: {animate ? currentProgress : progress}%; transition: width {animate?.duration ?? 500}ms ease;"></div>
+<div class={combinedDivClass} {...restProps} style="--duration: {animate?.duration}ms; {customStyle}">
+    <div class={combinedInnerClass} style="width: {animate ? (mounted ? animate?.to : animate?.from) : progress}%; transition: width var(--duration) linear;"></div>
 </div>

package/dist/components/Toast.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import type { ToastProps } from "../types/Toast.js";
+    import Text from "./Text.svelte";
+    import Progress from "./Progress.svelte";
+    import type { Component } from "svelte";
+
+    import CircleCheck from "@lucide/svelte/icons/circle-check";
+    import CircleX from "@lucide/svelte/icons/circle-x";
+    import X from "@lucide/svelte/icons/x";
+    import Info from "@lucide/svelte/icons/info";
+    import TriangleAlert from "@lucide/svelte/icons/triangle-alert";
+    import { colorStyleParts, type ColorStyle } from "../styles/color.js";
+    import Button from "./Button.svelte";
+    import { getSizeStyleClass } from "../styles/size.js";
+    import { fly } from "svelte/transition";
+    import { backOut } from "svelte/easing";
+
+
+    let { 
+        message = "", 
+        duration = 3000, 
+        type = "info", 
+        position = "top-right",
+        class: className = "",
+        size = "md",
+        radius = "md",
+        onclose = undefined,
+        ...restProps
+    }: ToastProps = $props();
+
+    const defaultToastClass = "px-4 py-4 overflow-hidden rounded shadow text-white flex justify-center items-start gap-2 relative bg-sub-background border-[1px]";
+    const defaultProgressClass = "absolute bottom-1 left-1 right-1 w-[calc(100%-8px)]";
+    const defualtIconClass = $derived(`${colorStyleParts[type as ColorStyle]?.text} w-5 h-5`);
+
+    const Icon = $derived({
+        success: CircleCheck,
+        error: CircleX,
+        warning: TriangleAlert,
+        info: Info
+    }[type] as Component ?? null);
+
+    const combinedToastClass = $derived(twMerge(
+        defaultToastClass,
+        colorStyleParts[type as ColorStyle]?.text,
+        getSizeStyleClass(size, "card"),
+        getSizeStyleClass(radius, "radius"),
+        className,
+    ));
+
+    const flyParams = $derived.by(() => {
+        if (position == "top" || position == "center")
+            return { y: -20, duration: 400, easing: backOut };
+        else if (position == "bottom")
+            return { y: 20, duration: 400, easing: backOut };
+        const x = position.includes("right") ? 20 : -20;
+        return { x, duration: 400, easing: backOut };
+    });
+</script>
+
+<div transition:fly={flyParams} class={combinedToastClass} {...restProps}>
+    <div class="w-8 h-8 flex-center">
+        <Icon class={defualtIconClass}/>
+    </div>
+    <Text class="px-1 grow flex self-center">{message}</Text>
+    <Button onclick={onclose} variant="ghost" class="hover:bg-form-background" icon><X size={16}/></Button>
+    <Progress 
+        size="sm" 
+        divClass={defaultProgressClass} 
+        color={type} 
+        animate={{ duration: duration, from: 100, to: 0, onend: onclose }}/>
+</div>

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

@@ -0,0 +1,5 @@
+import type { ToastProps } from "../types/Toast.ts";
+import type { Component } from "svelte";
+declare const Toast: Component<ToastProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/Toaster.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { positionParts, type PositionStyle } from "../styles/posititon.js";
+    import { flip } from "svelte/animate";
+    import { toastState, toast } from "../actions/toast.svelte.js";
+    import Toast from "./Toast.svelte";
+
+    const getItems = $derived((pos: PositionStyle) => {
+        return toastState.items.filter(i => (i.position ?? 'top-right') === pos);
+    });
+</script>
+
+{#each Object.keys(positionParts) as pos (pos)}
+    <div class="fixed z-9999 flex flex-col gap-2 pointer-events-none {positionParts[pos as PositionStyle]}">
+        {#each getItems(pos as PositionStyle) as item (item.id)}
+            <div class="pointer-events-auto" animate:flip={{ duration: 300 }}>
+                <Toast 
+                    {...item} 
+                    onclose={() => toast.dismiss(item.id)} 
+                />
+            </div>
+        {/each}
+    </div>
+{/each}

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

@@ -0,0 +1,3 @@
+declare const Toaster: import("svelte").Component<Record<string, never>, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/index.d.ts

@@ -12,5 +12,9 @@ export { default as Card } from "./components/Card.svelte";
 export { default as Checkbox } from "./components/Checkbox.svelte";
 export { default as Progress } from "./components/Progress.svelte";
 export { default as Modal } from "./components/Modal.svelte";
+export { default as Table } from "./components/Table.svelte";
+export { default as Toast } from "./components/Toast.svelte";
+export { default as Toaster } from "./components/Toaster.svelte";
 export { fbmBackground } from "./actions/fbm.ts";
+export { toast } from "./actions/toast.svelte.ts";
 export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.ts";

package/dist/index.js

@@ -12,4 +12,8 @@ export { default as Card } from "./components/Card.svelte";
 export { default as Checkbox } from "./components/Checkbox.svelte";
 export { default as Progress } from "./components/Progress.svelte";
 export { default as Modal } from "./components/Modal.svelte";
+export { default as Table } from "./components/Table.svelte";
+export { default as Toast } from "./components/Toast.svelte";
+export { default as Toaster } from "./components/Toaster.svelte";
 export { fbmBackground } from "./actions/fbm.js";
+export { toast } from "./actions/toast.svelte.js";

package/dist/styles/color.d.ts

@@ -1,4 +1,4 @@
 export type ColorStyle = "rose" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "gray" | "sub" | "none" | "white" | "black" | "primary" | "secondary" | "accent" | "error" | "warning" | "success" | "info";
-export type ColorStyleType = "base" | "full" | "light" | "outline" | "ghost";
+export type ColorStyleType = "base" | "text" | "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,6 +1,7 @@
 export const colorStyleParts = {
     rose: {
         base: "bg-rose-500",
+        text: "text-rose-500",
         full: "bg-rose-500 hover:bg-rose-600",
         light: "bg-rose-500/35 hover:bg-rose-600/35 text-white/60",
         outline: "border border-rose-500 hover:border-rose-600 text-rose-500 hover:text-rose-600 hover:bg-rose-500/10",
@@ -8,6 +9,7 @@ export const colorStyleParts = {
     },
     red: {
         base: "bg-red-500",
+        text: "text-red-500",
         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",
@@ -15,6 +17,7 @@ export const colorStyleParts = {
     },
     orange: {
         base: "bg-orange-500",
+        text: "text-orange-500",
         full: "bg-orange-500 hover:bg-orange-600",
         light: "bg-orange-500/35 hover:bg-orange-600/35 text-white/60",
         outline: "border border-orange-500 hover:border-orange-600 text-orange-500 hover:text-orange-600 hover:bg-orange-500/10",
@@ -22,6 +25,7 @@ export const colorStyleParts = {
     },
     amber: {
         base: "bg-amber-500",
+        text: "text-amber-500",
         full: "bg-amber-500 hover:bg-amber-600",
         light: "bg-amber-500/35 hover:bg-amber-600/35 text-white/60",
         outline: "border border-amber-500 hover:border-amber-600 text-amber-500 hover:text-amber-600 hover:bg-amber-500/10",
@@ -29,6 +33,7 @@ export const colorStyleParts = {
     },
     yellow: {
         base: "bg-yellow-500",
+        text: "text-yellow-500",
         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",
@@ -36,6 +41,7 @@ export const colorStyleParts = {
     },
     lime: {
         base: "bg-lime-500",
+        text: "text-lime-500",
         full: "bg-lime-500 hover:bg-lime-600",
         light: "bg-lime-500/35 hover:bg-lime-600/35 text-white/60",
         outline: "border border-lime-500 hover:border-lime-600 text-lime-500 hover:text-lime-600 hover:bg-lime-500/10",
@@ -43,6 +49,7 @@ export const colorStyleParts = {
     },
     green: {
         base: "bg-green-500",
+        text: "text-green-500",
         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",
@@ -50,6 +57,7 @@ export const colorStyleParts = {
     },
     emerald: {
         base: "bg-emerald-500",
+        text: "text-emerald-500",
         full: "bg-emerald-500 hover:bg-emerald-600",
         light: "bg-emerald-500/35 hover:bg-emerald-600/35 text-white/60",
         outline: "border border-emerald-500 hover:border-emerald-600 text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10",
@@ -57,6 +65,7 @@ export const colorStyleParts = {
     },
     teal: {
         base: "bg-teal-500",
+        text: "text-teal-500",
         full: "bg-teal-500 hover:bg-teal-600",
         light: "bg-teal-500/35 hover:bg-teal-600/35 text-white/60",
         outline: "border border-teal-500 hover:border-teal-600 text-teal-500 hover:text-teal-600 hover:bg-teal-500/10",
@@ -64,6 +73,7 @@ export const colorStyleParts = {
     },
     cyan: {
         base: "bg-cyan-500",
+        text: "text-cyan-500",
         full: "bg-cyan-500 hover:bg-cyan-600",
         light: "bg-cyan-500/35 hover:bg-cyan-600/35 text-white/60",
         outline: "border border-cyan-500 hover:border-cyan-600 text-cyan-500 hover:text-cyan-600 hover:bg-cyan-500/10",
@@ -71,6 +81,7 @@ export const colorStyleParts = {
     },
     blue: {
         base: "bg-blue-500",
+        text: "text-blue-500",
         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",
@@ -78,6 +89,7 @@ export const colorStyleParts = {
     },
     indigo: {
         base: "bg-indigo-500",
+        text: "text-indigo-500",
         full: "bg-indigo-500 hover:bg-indigo-600",
         light: "bg-indigo-500/35 hover:bg-indigo-600/35 text-white/60",
         outline: "border border-indigo-500 hover:border-indigo-600 text-indigo-500 hover:text-indigo-600 hover:bg-indigo-500/10",
@@ -85,6 +97,7 @@ export const colorStyleParts = {
     },
     violet: {
         base: "bg-violet-500",
+        text: "text-violet-500",
         full: "bg-violet-500 hover:bg-violet-600",
         light: "bg-violet-500/35 hover:bg-violet-600/35 text-white/60",
         outline: "border border-violet-500 hover:border-violet-600 text-violet-500 hover:text-violet-600 hover:bg-violet-500/10",
@@ -92,6 +105,7 @@ export const colorStyleParts = {
     },
     purple: {
         base: "bg-purple-500",
+        text: "text-purple-500",
         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",
@@ -99,6 +113,7 @@ export const colorStyleParts = {
     },
     pink: {
         base: "bg-pink-500",
+        text: "text-pink-500",
         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",
@@ -106,6 +121,7 @@ export const colorStyleParts = {
     },
     fuchsia: {
         base: "bg-fuchsia-500",
+        text: "text-fuchsia-500",
         full: "bg-fuchsia-500 hover:bg-fuchsia-600",
         light: "bg-fuchsia-500/35 hover:bg-fuchsia-600/35 text-white/60",
         outline: "border border-fuchsia-500 hover:border-fuchsia-600 text-fuchsia-500 hover:text-fuchsia-600 hover:bg-fuchsia-500/10",
@@ -113,6 +129,7 @@ export const colorStyleParts = {
     },
     gray: {
         base: "bg-gray-500",
+        text: "text-gray-500",
         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",
@@ -120,6 +137,7 @@ export const colorStyleParts = {
     },
     sub: {
         base: "bg-sub-background",
+        text: "text-sub-background",
         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",
@@ -127,6 +145,7 @@ export const colorStyleParts = {
     },
     none: {
         base: "",
+        text: "",
         full: "",
         light: "",
         outline: "",
@@ -134,6 +153,7 @@ export const colorStyleParts = {
     },
     white: {
         base: "bg-white text-contrast-text",
+        text: "text-white",
         full: "bg-white hover:bg-gray-100 text-contrast-text hover:text-contrast-text",
         light: "bg-white/35 hover:bg-white/35 text-gray-700",
         outline: "border border-white hover:border-gray-300 text-white hover:text-gray-300 hover:bg-white/10",
@@ -141,6 +161,7 @@ export const colorStyleParts = {
     },
     black: {
         base: "bg-black",
+        text: "text-black",
         full: "bg-black hover:bg-stone-950",
         light: "bg-black/35 hover:bg-black/35 text-gray-500",
         outline: "border border-black hover:border-gray-700 text-black hover:text-gray-700 hover:bg-black/10",
@@ -148,6 +169,7 @@ export const colorStyleParts = {
     },
     primary: {
         base: "bg-primary",
+        text: "text-primary",
         full: "bg-primary hover:bg-primary/90",
         light: "bg-primary/35 hover:bg-primary/35 text-white/60",
         outline: "border border-primary hover:border-primary/90 text-primary hover:text-primary/90 hover:bg-primary/10",
@@ -155,6 +177,7 @@ export const colorStyleParts = {
     },
     secondary: {
         base: "bg-secondary",
+        text: "text-secondary",
         full: "bg-secondary hover:bg-secondary/90",
         light: "bg-secondary/35 hover:bg-secondary/35 text-white/60",
         outline: "border border-secondary hover:border-secondary/90 text-secondary hover:text-secondary/90 hover:bg-secondary/10",
@@ -162,6 +185,7 @@ export const colorStyleParts = {
     },
     accent: {
         base: "bg-accent",
+        text: "text-accent",
         full: "bg-accent hover:bg-accent/90",
         light: "bg-accent/35 hover:bg-accent/35 text-white/60",
         outline: "border border-accent hover:border-accent/90 text-accent hover:text-accent/90 hover:bg-accent/10",
@@ -169,6 +193,7 @@ export const colorStyleParts = {
     },
     error: {
         base: "bg-red-500",
+        text: "text-red-500",
         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",
@@ -176,6 +201,7 @@ export const colorStyleParts = {
     },
     warning: {
         base: "bg-amber-500",
+        text: "text-amber-500",
         full: "bg-amber-500 hover:bg-amber-600",
         light: "bg-amber-500/35 hover:bg-amber-600/35 text-white/60",
         outline: "border border-amber-500 hover:border-amber-600 text-amber-500 hover:text-amber-600 hover:bg-amber-500/10",
@@ -183,6 +209,7 @@ export const colorStyleParts = {
     },
     success: {
         base: "bg-emerald-500",
+        text: "text-emerald-500",
         full: "bg-emerald-500 hover:bg-emerald-600",
         light: "bg-emerald-500/35 hover:bg-emerald-600/35 text-white/60",
         outline: "border border-emerald-500 hover:border-emerald-600 text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10",
@@ -190,6 +217,7 @@ export const colorStyleParts = {
     },
     info: {
         base: "bg-sky-500",
+        text: "text-sky-500",
         full: "bg-sky-500 hover:bg-sky-600",
         light: "bg-sky-500/35 hover:bg-sky-600/35 text-white/60",
         outline: "border border-sky-500 hover:border-sky-600 text-sky-500 hover:text-sky-600 hover:bg-sky-500/10",

package/dist/styles/layout.css

@@ -16,35 +16,52 @@
     --color-form-background: var(--vpcui-form-background);
     --color-form-hover: var(--vpcui-form-hover);
     --color-form-border: var(--vpcui-form-border);
-    --color-navbar-element-hover-background: var(--vpcui-navbar-element-hover-background);
+
     --color-primary: var(--vpcui-primary);
     --color-secondary: var(--vpcui-secondary);
     --color-accent: var(--vpcui-accent);
 }
 
 :root {
-    --vpcui-main-background: #FFFFFF;
-    --vpcui-sub-background: #F5F5F5;
-    --vpcui-sub-background-hover: #EEE;
-    --vpcui-main-text: #111;
-    --vpcui-sub-text: #6B6B6B ;
-    --vpcui-contrast-text: #F5F5F5;
-    --vpcui-form-background: #FFFFFF;
-    --vpcui-form-hover: #D4D4D4;
-    --vpcui-form-border: #C4C4C4;
-    --vpcui-color-navbar-element-hover-background: var(--color-mist-100);
+    --vpcui-light-50: #FFFFFF;
+    --vpcui-light-100: #F5F5F5;
+    --vpcui-light-150: #EEEEEE;
+    --vpcui-light-200: #D4D4D4;
+    --vpcui-light-250: #C4C4C4;
+    --vpcui-light-300: #6B6B6B;
+
+    --vpcui-light-950: #111;
+
+    --vpcui-main-background: var(--vpcui-light-50);
+    --vpcui-sub-background: var(--vpcui-light-100);
+    --vpcui-sub-background-hover: var(--vpcui-light-150);
+    --vpcui-main-text: var(--vpcui-light-950);
+    --vpcui-sub-text: var(--vpcui-light-300);
+    --vpcui-contrast-text: var(--vpcui-light-50);
+    --vpcui-form-background: var(--vpcui-light-50);
+    --vpcui-form-hover: var(--vpcui-light-200);
+    --vpcui-form-border: var(--vpcui-light-250);
 }
 
 html.dark {
-    --vpcui-main-background: #121212;
-    --vpcui-sub-background: #1E1E1E;
-    --vpcui-sub-background-hover: #2A2A2A;
-    --vpcui-main-text: #F5F5F5;
-    --vpcui-sub-text: #A0A0A0;
-    --vpcui-contrast-text: #111;
-    --vpcui-form-background: #2A2A2A;
-    --vpcui-form-border: #4A4A4A;
-    --vpcui-navbar-element-hover-background: var(--color-zinc-900);
+    --vpcui-dark-50: #121212;
+    --vpcui-dark-100: #1E1E1E;
+    --vpcui-dark-150: #2A2A2A;
+    --vpcui-dark-200: #2A2A2A;
+    --vpcui-dark-250: #4A4A4A;
+    --vpcui-dark-300: #A0A0A0;
+
+    --vpcui-dark-950: #F5F5F5;
+
+    --vpcui-main-background: var(--vpcui-dark-50);
+    --vpcui-sub-background: var(--vpcui-dark-100);
+    --vpcui-sub-background-hover: var(--vpcui-dark-150);
+    --vpcui-main-text: var(--vpcui-dark-950);
+    --vpcui-sub-text: var(--vpcui-dark-300);
+    --vpcui-contrast-text: var(--vpcui-dark-950);
+    --vpcui-form-background: var(--vpcui-dark-150);
+    --vpcui-form-border: var(--vpcui-dark-250);
+    --vpcui-form-hover: var(--vpcui-dark-150);
 }
 
 html {

package/dist/styles/posititon.js

@@ -1,11 +1,11 @@
 export const positionParts = {
-    "top": "flex items-start justify-center",
-    "right": "flex items-center justify-end",
-    "bottom": "flex items-end justify-center",
-    "left": "flex items-center justify-start",
-    "top-left": "flex items-start justify-start",
-    "top-right": "flex items-start justify-end",
-    "bottom-left": "flex items-end justify-start",
-    "bottom-right": "flex items-end justify-end",
-    "center": "flex-center"
+    "top": "top-4 left-1/2 -translate-x-1/2",
+    "right": "top-1/2 right-4 transform -translate-y-1/2 flex-col",
+    "bottom": "bottom-4 left-1/2 transform -translate-x-1/2 flex-col-reverse",
+    "left": "top-1/2 left-4 transform -translate-y-1/2 flex-col",
+    "top-left": "top-4 left-4",
+    "top-right": "top-4 right-4",
+    "bottom-left": "bottom-4 left-4",
+    "bottom-right": "bottom-4 right-4",
+    "center": "top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
 };

package/dist/styles/size.d.ts

@@ -2,6 +2,8 @@ export type SizeStyleTheme = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" |
 export type SizeStyleType = "button" | "buttonIcon" | "radius" | "text" | "card" | "form" | "formLabel" | "formLabelSelected" | "progress";
 export type SizeStyle = SizeStyleTheme | number;
 export declare const sizeStyleParts: Record<SizeStyleTheme, Record<SizeStyleType, string>>;
+export declare function getSizeStyleClass(size: SizeStyle, type: SizeStyleType): string;
+export declare function getSizeStyle(size: SizeStyle, type: SizeStyleType): string;
 export declare const textStyle: {
     "text-xs": string;
     "text-sm": string;

package/dist/styles/size.js

@@ -132,6 +132,26 @@ export const sizeStyleParts = {
         progress: ""
     }
 };
+export function getSizeStyleClass(size, type) {
+    if (typeof size === "string")
+        return sizeStyleParts[size][type];
+    return "";
+}
+export function getSizeStyle(size, type) {
+    if (typeof size === "number") {
+        switch (type) {
+            case "button":
+                return `height: ${size}px; padding: ${size / 4}px ${size / 8}px`;
+            case "buttonIcon":
+                return `height: ${size}px; width: ${size}px; padding: ${size / 4}px`;
+            case "card":
+                return `width: ${size}px`;
+            case "radius":
+                return `border-radius: ${size}px`;
+        }
+    }
+    return "";
+}
 export const textStyle = {
     "text-xs": "0.75rem",
     "text-sm": "0.875rem",

package/dist/types/BaseComponent.d.ts

@@ -0,0 +1,5 @@
+export interface BaseComponentProps {
+    children?: any;
+    class?: string;
+    [key: string]: any;
+}

package/dist/types/BaseComponent.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/types/Button.d.ts

@@ -1,9 +1,7 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
 import type { ColorStyle, ColorStyleType } from "../styles/color.ts";
 import type { SizeStyle } from "../styles/size.ts";
-export interface ButtonProps extends Omit<HTMLButtonAttributes, 'size'> {
-    children?: any;
-    class?: string;
+import type { BaseComponentProps } from "./BaseComponent.ts";
+export interface ButtonProps extends BaseComponentProps {
     pill?: boolean;
     icon?: boolean;
     square?: boolean;
@@ -14,5 +12,4 @@ export interface ButtonProps extends Omit<HTMLButtonAttributes, 'size'> {
     external?: boolean;
     size?: SizeStyle;
     radius?: SizeStyle;
-    [key: string]: any;
 }

package/dist/types/Card.d.ts

@@ -1,14 +1,11 @@
-import type { HTMLAttributes } from "svelte/elements";
 import type { SizeStyle } from "../styles/size.ts";
+import type { BaseComponentProps } from "./BaseComponent.ts";
 export type CardVariant = "bordered" | "elevated";
 export declare const cardVariantStyles: Record<CardVariant, string>;
-export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
-    children?: any;
-    class?: string;
+export interface CardProps extends BaseComponentProps {
     href?: string;
     external?: boolean;
     variant?: CardVariant;
     size?: SizeStyle;
     radius?: SizeStyle;
-    [key: string]: any;
 }

package/dist/types/Checkbox.d.ts

@@ -1,10 +1,8 @@
-export interface CheckboxProps {
-    children?: any;
-    class?: string;
+import type { BaseComponentProps } from "./BaseComponent.ts";
+export interface CheckboxProps extends BaseComponentProps {
     label?: string;
     labelClass?: string;
     divClass?: string;
     checked?: boolean;
     id?: string;
-    [key: string]: any;
 }

package/dist/types/Input.d.ts

@@ -1,13 +1,12 @@
 import type { Component } from "svelte";
 import type { SizeStyle } from "../styles/size.ts";
-import type { HTMLInputAttributes } from "svelte/elements";
+import type { BaseComponentProps } from "./BaseComponent.ts";
 export type InputVariant = "default" | "floating";
-export interface InputProps extends Omit<HTMLInputAttributes, 'size'> {
-    children?: any;
-    class?: string;
+export interface InputProps extends BaseComponentProps {
     label?: string;
     labelClass?: string;
     divClass?: string;
+    outerDivClass?: string;
     icon?: Component;
     value?: any;
     required?: boolean;
@@ -23,5 +22,4 @@ export interface InputProps extends Omit<HTMLInputAttributes, 'size'> {
     size?: SizeStyle;
     radius?: SizeStyle;
     id?: `${string}-${string}-${string}-${string}-${string}`;
-    [key: string]: any;
 }

package/dist/types/Navbar.d.ts

@@ -1,16 +1,11 @@
-export interface NavbarProps {
-    children?: any;
-    class?: string;
+import type { BaseComponentProps } from "./BaseComponent.ts";
+export interface NavbarProps extends BaseComponentProps {
     classTop?: string;
     threshold?: number;
-    [key: string]: any;
 }
-export interface NavbarElementProps {
-    children?: any;
-    class?: string;
+export interface NavbarElementProps extends BaseComponentProps {
     classTop?: string;
     activeClass?: string;
     href?: string;
     threshold?: number;
-    [key: string]: any;
 }

package/dist/types/Progress.d.ts

@@ -1,20 +1,18 @@
 import type { ColorStyle } from "../styles/color.ts";
 import type { SizeStyle } from "../styles/size.ts";
+import type { BaseComponentProps } from "./BaseComponent.ts";
 interface AnimateProps {
     from: number;
     to: number;
     duration: number;
     onend?: () => void;
 }
-export interface ProgressProps {
-    children?: any;
-    class?: string;
+export interface ProgressProps extends BaseComponentProps {
     divClass?: string;
     progress?: number;
     animate?: AnimateProps;
     color?: ColorStyle;
     size?: SizeStyle;
     radius?: SizeStyle;
-    [key: string]: any;
 }
 export {};

package/dist/types/Select.d.ts

@@ -1,6 +1,5 @@
-export interface SelectProps {
-    children?: any;
-    class?: string;
+import type { BaseComponentProps } from "./BaseComponent.ts";
+export interface SelectProps extends BaseComponentProps {
     label?: string;
     divClass?: string;
     optionClass?: string;
@@ -10,5 +9,4 @@ export interface SelectProps {
         label: string;
     }[];
     id?: `${string}-${string}-${string}-${string}-${string}`;
-    [key: string]: any;
 }

package/dist/types/Table.d.ts

@@ -1,14 +1,12 @@
 import type { SizeStyle } from "../styles/size.js";
+import type { BaseComponentProps } from "./BaseComponent.ts";
 export interface TableHeaders {
     key: string;
     label: string;
 }
-export interface TableProps {
-    children?: any;
-    class?: string;
+export interface TableProps extends BaseComponentProps {
     tableHeaders?: TableHeaders[];
     tableData?: any[];
     size?: SizeStyle;
     radius?: SizeStyle;
-    [key: string]: any;
 }

package/dist/types/Text.d.ts

@@ -1,11 +1,9 @@
 import type { SizeStyle } from "../styles/size.ts";
+import type { BaseComponentProps } from "./BaseComponent.ts";
 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;
+export interface TextProps extends BaseComponentProps {
     tag?: TextTagOptions;
     shrink?: number;
     size?: SizeStyle;
-    [key: string]: any;
 }
 export {};

package/dist/types/Toast.d.ts

@@ -0,0 +1,13 @@
+import type { PositionStyle } from "../styles/posititon.js";
+import type { SizeStyle } from "../styles/size.js";
+import type { BaseComponentProps } from "./BaseComponent.ts";
+export type ToastType = "success" | "error" | "info" | "warning";
+export interface ToastProps extends BaseComponentProps {
+    message: string;
+    duration?: number;
+    position?: PositionStyle;
+    type?: ToastType;
+    size?: SizeStyle;
+    radius?: SizeStyle;
+    onclose?: () => void;
+}

package/dist/types/Toast.js

@@ -0,0 +1 @@
+export {};

package/dist/types/Typewriter.d.ts

@@ -1,3 +1,4 @@
+import type { BaseComponentProps } from "./BaseComponent.ts";
 export type TypewriterAction = {
     type: "write";
     value: string | (() => string);
@@ -25,9 +26,7 @@ export interface DisplaySegment {
     color?: string;
     label?: string;
 }
-export interface TypewriterProps {
+export interface TypewriterProps extends BaseComponentProps {
     actions: TypewriterAction[];
-    class?: string;
     textClass?: string;
-    [key: string]: any;
 }

package/package.json

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