@valerius_petrini/corekit-ui 0.1.51 → 0.1.52

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

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { NavbarProps } from "../types/Navbar.js";
+    import { onMount } from "svelte";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        classTop = "",
+        threshold = 10,
+        ...restProps
+    }: NavbarProps = $props();
+
+    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);
+
+    const combinedClass = $derived(twMerge(
+        defaultClass,
+        className,
+        isAtTop ? classTop : ""
+    ));
+</script>
+
+<svelte:window bind:scrollY={scrollY}/>
+
+<nav class={combinedClass} {...restProps}>
+    {@render children?.()}
+</nav>

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import Button from "./Button.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 px-5 py-0 text-main-text";
+
+    let scrollY = $state(0);
+    let isAtTop = $derived(scrollY <= threshold);
+    let isActive = $derived(page.url.pathname === href);
+
+    const combinedClass = $derived(twMerge(
+        defaultClass,
+        className,
+        isActive ? activeClass : "",
+        isAtTop ? classTop : "",
+    ));
+</script>
+
+<svelte:window bind:scrollY={scrollY}/>
+
+<Button radius="none" {href} color="none" class={combinedClass} {...restProps} aria-current={isActive ? 'page' : undefined}>
+    {@render children?.()}
+</Button>

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

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

@@ -0,0 +1 @@
+<div class="ml-auto"></div>

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

@@ -0,0 +1,26 @@
+export default NavbarSeparator;
+type NavbarSeparator = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const NavbarSeparator: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import type { SEOProps } from '../types/SEO.js';
+
+    const DEFAULT_TITLE = "My SvelteKit App";
+    const DEFAULT_DESCRIPTION = "Description of your website.";
+    const DEFAULT_IMAGE = "/favicon.png";
+
+	let { 
+        websiteName, 
+        title = DEFAULT_TITLE, 
+        description = DEFAULT_DESCRIPTION, 
+        image = DEFAULT_IMAGE 
+    }: SEOProps = $props();
+
+    let fullUrl = $derived(`${websiteName}${page.url.pathname.toString()}`);
+</script>
+  
+<svelte:head>
+    <title>{title}</title>
+    <meta name="description" content={description}>
+    <meta property="og_site_name" content={websiteName}>
+    <meta property="og:url" content={fullUrl}>
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="{title}">
+    <meta property="og:description" content={description}>
+    <meta property="og:image" content={websiteName + image}>
+  
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="twitter:domain" content={websiteName}>
+    <meta property="twitter:url" content={fullUrl}>
+    <meta name="twitter:title" content="{title}">
+    <meta name="twitter:description" content={description}>
+    <meta name="twitter:image" content={websiteName + image}>
+    {@html `  <script type="application/ld+json">{
+     "@context": "https://schema.org",
+     "@type": "Website",
+     "name": "${title}",
+     "url": "${fullUrl}",
+     "logo": "${websiteName}${image}"  }</script>`}
+
+    <meta name="google-site-verification" content="F6vDzwDyZfebc9kWIZlhzpsAm5zhanaPkOArdCZdDSU" />
+</svelte:head>

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

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { sizeStyleParts, textStyle, type SizeStyle, type SizeStyleTheme } from "../styles/size.js";
+    import type { TextProps } from "../types/Text.js";
+    import { twMerge } from "tailwind-merge";
+
+    let { 
+        children = undefined, 
+        class: className = "", 
+        tag = "p",
+        shrink = undefined,
+        size = "none",
+        ...restProps
+    }: TextProps = $props();
+
+    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: "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" },
+        "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 SizeStyleTheme]?.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, ${shrink}cqi, ${getTextSizeInRem()}); white-space: nowrap; display: block; width: fit-content;` 
+        : ""
+    );
+
+    let defaultClass = "text-main-text";    
+    let combinedClass = $derived(twMerge(
+        defaultClass, 
+        tagStyles[tag]?.class || "", 
+        tagStyles[tag]?.size || "",
+        sizeStyleParts[size as SizeStyleTheme]?.text || "",
+        className
+    ));
+</script>
+
+<svelte:element this={tag} style={shrinkStyle} class={combinedClass} {...restProps}>
+    {@render children?.()}
+</svelte:element>

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

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import { onMount } from "svelte";
+
+    import type { DisplaySegment, TypewriterProps } from "../types/Typewriter.js";
+    import Text from "./Text.svelte";
+
+    let { 
+        actions, 
+        class: className = "",
+        textClass = "",
+        ...restProps
+    }: TypewriterProps = $props();
+
+    let displaySegments = $state<DisplaySegment[]>([]);
+
+    async function execute() {
+        for (let i = 0; i < actions.length; i++) {
+            const action = actions[i];
+            switch (action.type) {
+                case "write":
+                    const segment = { text: "", color: "", label: action.label };
+                    displaySegments.push(segment);
+
+                    const segmentProxy = displaySegments[displaySegments.length - 1];
+
+                    const resolvedValue = typeof action.value === "function" ? action.value() : action.value;
+                    const resolvedColor = typeof action.color === "function" ? action.color() : action.color;
+                    segmentProxy.color = resolvedColor;
+                    for (const char of resolvedValue) {
+                        segmentProxy.text += char;
+                        const speed = Math.random() * ((action.maxspeed || 100) - (action.minspeed || 50)) + (action.minspeed || 50);
+                        await new Promise(resolve => setTimeout(resolve, speed));
+                    }
+                    break;
+                case "delete":
+                    const index = displaySegments.findIndex(s => s.label === action.to);
+                    if (index === -1) break;
+                    for (let j = displaySegments.length - 1; j >= index; j--) {                        
+                        const deleteSegment = displaySegments[j];
+                        while (deleteSegment.text.length > 0) {
+                            deleteSegment.text = deleteSegment.text.slice(0, -1);
+                            const speed = Math.random() * ((action.maxspeed || 100) - (action.minspeed || 50)) + (action.minspeed || 50);
+                            await new Promise(resolve => setTimeout(resolve, speed));
+                        }
+                    }
+                    displaySegments.splice(index, 1);
+                    break;
+                case "pause":
+                    await new Promise(resolve => setTimeout(resolve, action.duration || 1000));
+                    break;
+                case "jump":
+                    const position = actions.findIndex(a => a.label === action.position);
+                    if (position !== -1)
+                        i = position - 1;
+                    break;
+            }
+        }
+    }
+
+    onMount(() => {
+        execute();
+    });
+
+    let combinedClass = $derived(twMerge("typewriter w-fit text-main-text", className));
+</script>
+
+<div class={combinedClass} {...restProps}>
+    {#each displaySegments as segment}
+        {#key segment}
+            <Text tag="span" class={textClass} style="color: {segment.color}">{segment.text}</Text>
+        {/key}
+    {/each}
+</div>
+
+<style>
+    .typewriter::after {
+        content: "\00a0";
+        animation: blink .7s step-start infinite;
+        text-decoration: underline;
+    }
+
+    @keyframes blink {
+        50% { opacity: 0; }
+    }
+</style>

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

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

package/dist/index.d.ts

@@ -1,15 +1,15 @@
-export { default as Button } from "../components/Button.svelte";
-export { default as Typewriter } from "../components/Typewriter.svelte";
-export { default as Analytics } from "../components/Analytics.svelte";
-export { default as SEO } from "../components/SEO.svelte";
-export { default as Navbar } from "../components/Navbar.svelte";
-export { default as NavbarSeparator } from "../components/NavbarSeparator.svelte";
-export { default as NavbarElement } from "../components/NavbarElement.svelte";
-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 { default as Progress } from "../components/Progress.svelte";
-export { fbmBackground } from "../actions/fbm.ts";
-export type { TypewriterAction, DisplaySegment } from "../types/Typewriter.d.ts";
+export { default as Button } from "./components/Button.svelte";
+export { default as Typewriter } from "./components/Typewriter.svelte";
+export { default as Analytics } from "./components/Analytics.svelte";
+export { default as SEO } from "./components/SEO.svelte";
+export { default as Navbar } from "./components/Navbar.svelte";
+export { default as NavbarSeparator } from "./components/NavbarSeparator.svelte";
+export { default as NavbarElement } from "./components/NavbarElement.svelte";
+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 { default as Progress } from "./components/Progress.svelte";
+export { fbmBackground } from "./actions/fbm.ts";
+export type { TypewriterAction, DisplaySegment } from "./types/Typewriter.ts";

package/dist/index.js

@@ -1,14 +1,14 @@
-export { default as Button } from "../components/Button.svelte";
-export { default as Typewriter } from "../components/Typewriter.svelte";
-export { default as Analytics } from "../components/Analytics.svelte";
-export { default as SEO } from "../components/SEO.svelte";
-export { default as Navbar } from "../components/Navbar.svelte";
-export { default as NavbarSeparator } from "../components/NavbarSeparator.svelte";
-export { default as NavbarElement } from "../components/NavbarElement.svelte";
-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 { default as Progress } from "../components/Progress.svelte";
-export { fbmBackground } from "../actions/fbm.js";
+export { default as Button } from "./components/Button.svelte";
+export { default as Typewriter } from "./components/Typewriter.svelte";
+export { default as Analytics } from "./components/Analytics.svelte";
+export { default as SEO } from "./components/SEO.svelte";
+export { default as Navbar } from "./components/Navbar.svelte";
+export { default as NavbarSeparator } from "./components/NavbarSeparator.svelte";
+export { default as NavbarElement } from "./components/NavbarElement.svelte";
+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 { default as Progress } from "./components/Progress.svelte";
+export { fbmBackground } from "./actions/fbm.js";

package/dist/styles/color.d.ts

@@ -0,0 +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 declare const colorStyleParts: Record<ColorStyle, Record<ColorStyleType, string>>;
+export declare function generateColorStyle(color: ColorStyle, variant: ColorStyleType): string;