@valerius_petrini/corekit-ui 0.1.44 → 0.1.45

package/dist/components/Button.svelte

@@ -29,12 +29,6 @@
     let combinedClass = $derived(twMerge(defaultClass, className));
 </script>
 
-{#if href}
-    <a class={combinedClass} {href} {...restProps}>
-        {@render children?.()}
-    </a>
-{:else}
-    <button class={combinedClass} {...restProps}>
-        {@render children?.()} 
-    </button>
-{/if}
+<svelte:element this={href ? "a" : "button"} class={combinedClass} {href} {...restProps}>
+    {@render children?.()}
+</svelte:element>

package/dist/components/Card.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
+    import type { CardProps } from "../types/Card.js";
+    import type { SvelteComponent } from "svelte";
     import { twMerge } from "tailwind-merge";
 
     let { 
         children = undefined, 
         class: className = "", 
+        href = undefined,
         ...restProps
-    } = $props();
+    }: CardProps = $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}>
+<svelte:element
+    this={href ? "a" : "div"}
+    class={combinedClass}
+    {...(href ? { href } : {})}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</svelte:element>

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

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

package/dist/components/FloatingInput.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { FloatingInputProps } from "../types/FloatingInput.js";
     import { twMerge } from "tailwind-merge";
+    import Text from "./Text.svelte";
 
     let { 
         children = undefined, 
@@ -29,7 +30,7 @@
     let originalLabelClass = "left-2 z-0";
     let originalLabelClassInput = "top-1/2 transform -translate-y-1/2";
     let originalLabelClassTextArea = "top-2";
-    let selectedLabelClass = "left-2 z-30 top-0.5 text-[10px]";
+    let selectedLabelClass = "left-2 z-30 top-0.5 text-[10px]!";
 
     let invalidClass = "border border-red-500 focus:ring-red-500";
 
@@ -52,9 +53,9 @@
 </script>
 
 <div class={combinedDivClass}>
-    <label for={id} class={combinedLabelClass}>
+    <Text tag="label" for={id} class={combinedLabelClass}>
         {@render children?.()}
-    </label>
+    </Text>
     {#if isTextArea}
         <textarea
             {id}
@@ -70,7 +71,7 @@
             bind:value={value}
             onfocus={handleFocus}
             onblur={handleBlur}
-            class={combinedClass} 
+            class={combinedClass}
             {...restProps}
         />
     {/if}

package/dist/components/FloatingSelect.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { FloatingSelectProps } from "../types/FloatingSelect.js";
     import { twMerge } from "tailwind-merge";
+    import Text from "./Text.svelte";
 
     let { 
         children = undefined, 
@@ -17,8 +18,7 @@
     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 selectedLabelClass = "left-2 z-30 top-0.5 text-[10px]!";
 
     let combinedLabelClass = $derived(twMerge(defaultLabelClass, selectedLabelClass, className));
     let combinedSelectClass = $derived(twMerge(defaultSelectClass, className));
@@ -26,9 +26,9 @@
 </script>
 
 <div class={combinedDivClass}>
-    <label for={id} class={combinedLabelClass}>
+    <Text tag="label" for={id} class={combinedLabelClass}>
         {@render children?.()}
-    </label>
+    </Text>
     <select {id} class={combinedSelectClass} {...restProps} bind:value={value}>
         {#each options as option}
             <option value={option.value} class={optionClass}>

package/dist/components/Text.svelte

@@ -1,16 +1,39 @@
 <script lang="ts">
+    import type { TextProps } from "../types/Text.js";
     import { twMerge } from "tailwind-merge";
 
     let { 
         children = undefined, 
         class: className = "", 
+        tag = "p",
         ...restProps
-    } = $props();
+    }: 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"
+    };
 
     let defaultClass = "text-main-text";    
-    let combinedClass = $derived(twMerge(defaultClass, className));
+    let combinedClass = $derived(twMerge(defaultClass, className, tagStyles[tag] || ""));
 </script>
 
-<p class={combinedClass}>
+<svelte:element this={tag} class={combinedClass} {...restProps}>
     {@render children?.()}
-</p>
+</svelte:element>

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

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

package/dist/components/Typewriter.svelte

@@ -3,6 +3,7 @@
     import { onMount } from "svelte";
 
     import type { DisplaySegment, TypewriterProps } from "../types/Typewriter.d.js";
+    import Text from "./Text.svelte";
 
     let { 
         actions, 
@@ -66,7 +67,7 @@
 <div class={combinedClass} {...restProps}>
     {#each displaySegments as segment}
         {#key segment}
-            <span style="color: {segment.color}">{segment.text}</span>
+            <Text tag="span" style="color: {segment.color}">{segment.text}</Text>
         {/key}
     {/each}
 </div>

package/dist/styles/layout.css

@@ -30,8 +30,8 @@
 
 html.dark {
     --vpcui-color-main-background: #121212;
-    --vpcui-color-sub-background: #161616;
-    --vpcui-color-sub-background-hover: #1c1c1c;
+    --vpcui-color-sub-background: #1c1c1c;
+    --vpcui-color-sub-background-hover: #242424;
     --vpcui-color-main-text: #fff;
     --vpcui-color-sub-text: #aaa;
     --vpcui-color-form-input-background: #1c1c1c;

package/dist/types/Card.d.ts

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

package/dist/types/Text.d.ts

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

package/package.json

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