@valerius_petrini/corekit-ui 0.1.49 → 0.1.52

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

@@ -1,4 +1,4 @@
-import type { AnalyticsProps } from '../types/Analytics.js';
+import type { AnalyticsProps } from '../types/Analytics.ts';
 declare const Analytics: import("svelte").Component<AnalyticsProps, {}, "">;
 type Analytics = ReturnType<typeof Analytics>;
 export default Analytics;

package/dist/components/Button.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
     import { generateColorStyle } from "../styles/color.js";
-    import { sizeStyleParts, type SizeStyle } from "../styles/size.js";
+    import { 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";
 
     let { 
         children = undefined, 
         class: className = "", 
         pill = false,
         icon = false,
+        square = false,
         href = undefined,
         color = "none",
         variant = "full",
@@ -20,21 +22,37 @@
     }: ButtonProps = $props();
 
     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";
+        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(
-        typeof size === "number" 
-            ? `width: ${size}px; height: ${size}px; flex: none;` 
-            : ""
-    );
+    const customStyle = $derived.by(() => {
+        const styles: string[] = [];
 
-    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);
+        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 mergedClass = $derived(twMerge(
@@ -42,11 +60,12 @@
         generateColorStyle(color, variant),
         disabledClass,
         sizeClasses,
-        radiusClass,
         className
     ));
 
     const mergedStyle = $derived([customStyle, restProps.style].filter(Boolean).join("; "));
+
+    const anchorProps = $derived(getLinkProps(href, external));
 </script>
 
 <svelte:element 
@@ -56,9 +75,7 @@
     aria-disabled={disabled}
     type={href ? undefined : (restProps.type || "button")}
     style={mergedStyle}
-    target={external ? "_blank" : undefined}
-    rel={external ? "noopener noreferrer" : undefined}
-    {...(href ? { href } : {})}
+    {...anchorProps}
     {...restProps}>
     {@render children?.()}
-</svelte:element>
+</svelte:element>

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

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "../types/Button.js";
+import type { ButtonProps } from "../types/Button.ts";
 declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/Card.svelte

@@ -1,24 +1,64 @@
 <script lang="ts">
-    import type { CardProps } from "../types/Card.js";
-    import type { SvelteComponent } from "svelte";
+    import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+    import { cardVariantStyles, type CardProps } from "../types/Card.js";
     import { twMerge } from "tailwind-merge";
 
     let { 
         children = undefined, 
         class: className = "", 
         href = undefined,
+        external = false,
+        variant = "bordered",
+        size = "md",
+        radius = "md",
         ...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 combinedClass = $derived(twMerge(defaultClass, className));
+    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 = "hover:bg-sub-background-hover cursor-pointer";
+    let combinedClass = $derived(twMerge(
+        defaultClass, 
+        href ? linkClass : "",
+        cardVariantStyles[variant],
+        sizeClasses,
+        className
+    ));
+
+    const anchorProps = $derived(href ? {
+        href,
+        target: external ? "_blank" : undefined,
+        rel: external ? "noopener noreferrer" : undefined,
+    } : {});
 </script>
 
 <svelte:element
     this={href ? "a" : "div"}
     class={combinedClass}
-    {...(href ? { href } : {})}
+    style={customStyle}
+    {...anchorProps}
     {...restProps}
 >
     {@render children?.()}
-</svelte:element>
+</svelte:element>

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

@@ -1,4 +1,4 @@
-import type { CardProps } from "../types/Card.js";
+import { type CardProps } from "../types/Card.ts";
 declare const Card: import("svelte").Component<CardProps, {}, "">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/Checkbox.svelte

@@ -6,6 +6,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        label = "",
         labelClass = "",
         divClass = "", 
         checked = $bindable(),
@@ -30,6 +31,6 @@
         class={combinedClass}
         {...restProps}/>
     <Text tag="label" for={id} class={combinedLabelClass}>
-        {@render children?.()}
+        {label}
     </Text>
 </div>

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

@@ -1,4 +1,4 @@
-import type { CheckboxProps } from "../types/Checkbox.js";
+import type { CheckboxProps } from "../types/Checkbox.ts";
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/FloatingInput.svelte

@@ -2,43 +2,116 @@
     import type { FloatingInputProps } from "../types/FloatingInput.js";
     import { twMerge } from "tailwind-merge";
     import Text from "./Text.svelte";
+    import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+    import { type Component } from "svelte";
+    import Button from "./Button.svelte";
+
+    import Mail from "@lucide/svelte/icons/mail";
+    import Lock from "@lucide/svelte/icons/lock";
+    import Phone from "@lucide/svelte/icons/phone";
+    import Eye from "@lucide/svelte/icons/eye";
+    import EyeOff from "@lucide/svelte/icons/eye-off";
 
     let { 
         children = undefined, 
         class: className = "",
+        label = "",
         labelClass = "",
         divClass = "", 
+        icon = undefined,
+        variant = "default",
+        placeholder = "",
         value = $bindable(),
         onfocus = undefined,
         onblur = undefined,
-        isTextArea = false,
+        required = false,
+        disabled = false,
         validInputRegex = undefined,
+        size = "md",
+        radius = "md",
         id = crypto.randomUUID(),
         ...restProps
     }: FloatingInputProps = $props();
 
+    const sizeParts = $derived(typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null);
+    const radiusParts = $derived(typeof radius === "string" ? sizeStyleParts[radius as SizeStyleTheme] : null);
+
+    const sizeClasses = $derived.by(() => {
+        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
+
+        return twMerge(
+            parts?.form
+        );
+    });
+
+    const labelSizeClass = $derived.by(() => {
+        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
+        return parts?.formLabel || "";
+    });
+
+    const divSizeClass = $derived.by(() => {
+        const radiusParts = typeof radius === "string" ? sizeStyleParts[radius as SizeStyleTheme] : null;
+        return twMerge(
+            radiusParts?.radius
+        );
+    });
+
+    const selectedLabelSizeClass = $derived.by(() => {
+        const parts = typeof size === "string" ? sizeStyleParts[size as SizeStyleTheme] : null;
+        return parts?.formLabelSelected || "";
+    });
+
+    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("; ");
+    });
+
+    const customLabelStyle = $derived.by(() => {
+        const styles: string[] = [];
+
+        if (typeof size === "number")
+            styles.push(`font-size: ${size / 4}px`);
+
+        return styles.join("; ");
+    });
+
     let isFocused = $state(false);
     let touched = $state(false);
 
-    let hasContent = $derived(value !== undefined && value !== null && value.toString().length > 0);
-    let isValid = $derived(!touched || !validInputRegex || validInputRegex.test(value || ""));
+    let canSeePassword = $state(false);
 
-    let defaultClass = "z-20 bg-form-input-background text-main-text w-full rounded px-2 pt-4 pb-1 text-xs outline-none focus:ring-2 focus:ring-blue-500 transition-all";
-    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";
+    const isFloating = $derived(variant === "floating");
+    const hasContent = $derived(value !== undefined && value !== null && value.toString().length > 0);
+    const isValid = $derived(!touched || !validInputRegex || validInputRegex.test(value || ""));
+    const lifted = $derived(isFloating && (isFocused || hasContent));
 
-    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]!";
+    const Icon = $derived(icon ?? ({
+        mail: 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";
+    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!";
+    let floatingLabelClass = "absolute w-full";
+    let iconClass = "h-full aspect-square text-sub-text";
 
-    let invalidClass = "border border-red-500 focus:ring-red-500";
+    let originalLabelClass = "z-0";
+    let originalLabelClassInput = "top-1/2 transform -translate-y-1/2";
+    let originalSelectedLabelClass = "z-30";
 
-    let labelClassFull = $derived(twMerge(isTextArea ? originalLabelClassTextArea : originalLabelClassInput, originalLabelClass));
+    let invalidClass = "border border-red-500 focus:ring-red-500 bg-[#2E1F1F]";
 
-    let combinedLabelClass = $derived(twMerge(defaultLabelClass, isFocused || hasContent ? selectedLabelClass : labelClassFull, labelClass));
-    let combinedClass = $derived(twMerge(defaultClass, className, isValid ? "" : invalidClass));
-    let combinedDivClass = $derived(twMerge(defaultDivClass, divClass));
+    let floatingLabelClassFull = $derived(twMerge(originalLabelClassInput, originalLabelClass, floatingLabelClass));
+    let divFullClass = $derived(size === "full" ? "w-full" : "");
+    let disabledClass = $derived(disabled ? "opacity-50 pointer-events-none" : "cursor-pointer");
 
     function handleFocus(e: FocusEvent) {
         isFocused = true;
@@ -50,29 +123,68 @@
         touched = true;
         onblur?.(e);
     }
+
+    let labelClassIcon = $derived(Icon !== null ? "pl-[32px] pr-2" : "px-1.5");
+    let inputClassIcon = $derived(Icon !== null ? "pl-0 pr-1" : "");
+
+    let defaultInputClassCheck = $derived(variant !== "floating" ? "py-0" : "");
+    let floatingLabelClassCheck = $derived(variant === "floating" ? floatingLabelClassFull : "");
+    let defaultLabelClassCheck = $derived(variant !== "floating" ? "px-1.5" : "");
+    let selectedLabelClass = $derived(twMerge((isFocused || hasContent) && variant === "floating" ? `${originalSelectedLabelClass} ${selectedLabelSizeClass}` : ""));
+    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 EyeComponent = $derived(canSeePassword ? Eye : EyeOff);
 </script>
 
-<div class={combinedDivClass}>
-    <Text tag="label" for={id} class={combinedLabelClass}>
-        {@render children?.()}
+{#snippet labelElement()}
+    <Text tag="label" for={id} class={combinedLabelClass} style={customLabelStyle}>
+        {label}
+        {#if required}
+            <span class="text-[#E05555]">*</span>
+        {/if}
     </Text>
-    {#if isTextArea}
-        <textarea
-            {id}
-            bind:value={value}
-            onfocus={handleFocus}
-            onblur={handleBlur}
-            class={combinedClass}
-            {...restProps}
-        ></textarea>
-    {:else}
+{/snippet}
+
+{#snippet innerDivElement()}
+    <div class={combinedDivClass}>
+        {#if Icon}
+            <div class={iconContainerClass}>
+                <Icon class={iconClass}></Icon>
+            </div>
+        {/if}
+        {#if variant === "floating"}
+            {@render labelElement()}
+        {/if}
         <input
             {id}
             bind:value={value}
             onfocus={handleFocus}
             onblur={handleBlur}
             class={combinedClass}
+            {required}
+            {disabled}
+            placeholder={variant === "floating" ? "" : placeholder}
+            aria-disabled={disabled}
+            style={customStyle}
             {...restProps}
+            type={canSeePassword ? "text" : restProps.type}
         />
-    {/if}
-</div>
+        {#if restProps.type === "password"}
+            <Button class={iconContainerClass} onclick={() => { canSeePassword = !canSeePassword; }}>
+                <EyeComponent class={iconClass}></EyeComponent>
+            </Button>
+        {/if}
+    </div>
+{/snippet}
+
+{#if variant !== "floating"}
+    <div class={combinedOuterDivClass}>
+        {@render labelElement()}
+        {@render innerDivElement()}
+    </div>
+{:else}
+    {@render innerDivElement()}
+{/if}

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

@@ -1,4 +1,5 @@
-import type { FloatingInputProps } from "../types/FloatingInput.js";
-declare const FloatingInput: import("svelte").Component<FloatingInputProps, {}, "value">;
+import type { FloatingInputProps } from "../types/FloatingInput.ts";
+import { type Component } from "svelte";
+declare const FloatingInput: Component<FloatingInputProps, {}, "value">;
 type FloatingInput = ReturnType<typeof FloatingInput>;
 export default FloatingInput;

package/dist/components/FloatingSelect.svelte

@@ -6,6 +6,7 @@
     let { 
         children = undefined, 
         class: className = "",
+        label = "",
         divClass = "",
         optionClass = "", 
         value = $bindable(),
@@ -14,7 +15,7 @@
         ...restProps
     }: FloatingSelectProps = $props();
 
-    let defaultSelectClass = "cursor-pointer bg-form-input-background text-main-text z-20 w-full rounded px-1 pt-4 pb-1 text-xs outline-none focus:ring-2 focus:ring-blue-500 transition-all";
+    let defaultSelectClass = "cursor-pointer bg-form-background border-[1px] border-form-border text-main-text z-20 w-full rounded px-1 pt-4 pb-1 text-xs outline-none focus:ring-2 focus:ring-blue-500 transition-all";
     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";
 
@@ -27,7 +28,7 @@
 
 <div class={combinedDivClass}>
     <Text tag="label" for={id} class={combinedLabelClass}>
-        {@render children?.()}
+        {label}
     </Text>
     <select {id} class={combinedSelectClass} {...restProps} bind:value={value}>
         {#each options as option}

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

@@ -1,4 +1,4 @@
-import type { FloatingSelectProps } from "../types/FloatingSelect.js";
+import type { FloatingSelectProps } from "../types/FloatingSelect.ts";
 declare const FloatingSelect: import("svelte").Component<FloatingSelectProps, {}, "value">;
 type FloatingSelect = ReturnType<typeof FloatingSelect>;
 export default FloatingSelect;

package/dist/components/Navbar.svelte

@@ -11,7 +11,7 @@
         ...restProps
     }: NavbarProps = $props();
 
-    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 defaultClass = "transition-colors duration-300 fixed top-0 left-0 w-full h-14 z-[100] flex items-center bg-sub-background/99 border-b border-box border-b-sub-background-hover";
 
     let scrollY = $state(0);
     let isAtTop = $derived(scrollY <= threshold);
@@ -27,4 +27,4 @@
 
 <nav class={combinedClass} {...restProps}>
     {@render children?.()}
-</nav>
+</nav>

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

@@ -1,4 +1,4 @@
-import type { NavbarProps } from "../types/Navbar.js";
+import type { NavbarProps } from "../types/Navbar.ts";
 declare const Navbar: import("svelte").Component<NavbarProps, {}, "">;
 type Navbar = ReturnType<typeof Navbar>;
 export default Navbar;

package/dist/components/NavbarElement.svelte

@@ -30,6 +30,6 @@
 
 <svelte:window bind:scrollY={scrollY}/>
 
-<Button radius={0} {href} color="none" class={combinedClass} {...restProps} aria-current={isActive ? 'page' : undefined}>
+<Button radius="none" {href} color="none" class={combinedClass} {...restProps} aria-current={isActive ? 'page' : undefined}>
     {@render children?.()}
 </Button>

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

@@ -1,4 +1,4 @@
-import type { NavbarElementProps } from "../types/Navbar.js";
+import type { NavbarElementProps } from "../types/Navbar.ts";
 declare const NavbarElement: import("svelte").Component<NavbarElementProps, {}, "">;
 type NavbarElement = ReturnType<typeof NavbarElement>;
 export default NavbarElement;

package/dist/components/Progress.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { ProgressProps } from "../types/Progress.js";
+    import { twMerge } from "tailwind-merge";
+    import { colorStyleParts } from "../styles/color.js";
+    import { sizeStyleParts, type SizeStyleTheme } from "../styles/size.js";
+
+    let { 
+        children = undefined, 
+        class: className = "",
+        divClass = "",
+        progress = 100,
+        animate = undefined,
+        color = "blue",
+        size = "md",
+        radius = "full",
+        ...restProps
+    }: ProgressProps = $props();
+
+    let currentProgress = $state(0);
+
+    let defaultDivClass = "w-full bg-sub-background overflow-hidden";
+
+    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?.progress,
+            radiusParts?.radius
+        );
+    });
+
+    const customStyle = $derived.by(() => {
+        const styles: string[] = [];
+
+        if (typeof size === "number")
+            styles.push(`height: ${size}px`);
+
+        if (typeof radius === "number")
+            styles.push(`border-radius: ${radius}px`);
+
+        return styles.join("; ");
+    });
+
+
+    let combinedDivClass = $derived(twMerge(
+        defaultDivClass,
+        sizeClasses,
+        divClass
+    ));
+
+    let combinedInnerClass = $derived(twMerge(
+        "h-full",
+        colorStyleParts[color]?.base,
+        className
+    ))
+
+    onMount(() => {
+        if (!animate) return;
+        currentProgress = animate.from;
+        requestAnimationFrame(() => currentProgress = animate.to);
+        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>

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

@@ -0,0 +1,4 @@
+import type { ProgressProps } from "../types/Progress.ts";
+declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

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

@@ -1,4 +1,4 @@
-import type { SEOProps } from '../types/SEO.js';
+import type { SEOProps } from '../types/SEO.ts';
 declare const SEO: import("svelte").Component<SEOProps, {}, "">;
 type SEO = ReturnType<typeof SEO>;
 export default SEO;

package/dist/components/Text.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { sizeStyleParts, textStyle, type SizeStyle } from "../styles/size.js";
+    import { sizeStyleParts, textStyle, type SizeStyle, type SizeStyleTheme } from "../styles/size.js";
     import type { TextProps } from "../types/Text.js";
     import { twMerge } from "tailwind-merge";
 
@@ -7,7 +7,7 @@
         children = undefined, 
         class: className = "", 
         tag = "p",
-        shrink = false,
+        shrink = undefined,
         size = "none",
         ...restProps
     }: TextProps = $props();
@@ -16,7 +16,7 @@
         "p": { class: "", size: "text-base" },
         "div": { class: "", size: "text-base" },
         "span": { class: "", size: "text-base" },
-        "label": { class: "", size: "text-sm" },
+        "label": { class: "text-sub-text font-semibold", size: "text-xs" },
         "strong": { class: "font-bold", size: "text-base" },
         "b": { class: "font-bold", size: "text-base" },
         "em": { class: "italic", size: "text-base" },
@@ -38,7 +38,7 @@
 
     function getTextSizeInRem(): string {
         if (size !== "none") {
-            const sizeKey = (sizeStyleParts[size as SizeStyle]?.text ?? "text-base") as keyof typeof textStyle;
+            const sizeKey = (sizeStyleParts[size as SizeStyleTheme]?.text ?? "text-base") as keyof typeof textStyle;
             return textStyle[sizeKey] ?? textStyle["text-base"];
         }
 
@@ -46,7 +46,7 @@
     }
 
     let shrinkStyle = $derived(shrink 
-        ? `font-size: clamp(8px, 12cqi, ${getTextSizeInRem()}); white-space: nowrap; display: block; width: fit-content;` 
+        ? `font-size: clamp(8px, ${shrink}cqi, ${getTextSizeInRem()}); white-space: nowrap; display: block; width: fit-content;` 
         : ""
     );
 
@@ -55,7 +55,7 @@
         defaultClass, 
         tagStyles[tag]?.class || "", 
         tagStyles[tag]?.size || "",
-        sizeStyleParts[size]?.text || "",
+        sizeStyleParts[size as SizeStyleTheme]?.text || "",
         className
     ));
 </script>

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

@@ -1,4 +1,4 @@
-import type { TextProps } from "../types/Text.js";
+import type { TextProps } from "../types/Text.ts";
 declare const Text: import("svelte").Component<TextProps, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/components/Typewriter.svelte

@@ -2,7 +2,7 @@
     import { twMerge } from "tailwind-merge";
     import { onMount } from "svelte";
 
-    import type { DisplaySegment, TypewriterProps } from "../types/Typewriter.d.js";
+    import type { DisplaySegment, TypewriterProps } from "../types/Typewriter.js";
     import Text from "./Text.svelte";
 
     let {