@valerius_petrini/corekit-ui 0.1.49 → 0.1.51

package/dist/components/NavbarElement.svelte

@@ -1,35 +0,0 @@
-<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={0} {href} color="none" class={combinedClass} {...restProps} aria-current={isActive ? 'page' : undefined}>
-    {@render children?.()}
-</Button>

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

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

package/dist/components/NavbarSeparator.svelte

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

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

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

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

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

package/dist/components/Text.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-    import { sizeStyleParts, textStyle, type SizeStyle } from "../styles/size.js";
-    import type { TextProps } from "../types/Text.js";
-    import { twMerge } from "tailwind-merge";
-
-    let { 
-        children = undefined, 
-        class: className = "", 
-        tag = "p",
-        shrink = false,
-        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: "", size: "text-sm" },
-        "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 SizeStyle]?.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, 12cqi, ${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]?.text || "",
-        className
-    ));
-</script>
-
-<svelte:element this={tag} style={shrinkStyle} class={combinedClass} {...restProps}>
-    {@render children?.()}
-</svelte:element>

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

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

@@ -1,86 +0,0 @@
-<script lang="ts">
-    import { twMerge } from "tailwind-merge";
-    import { onMount } from "svelte";
-
-    import type { DisplaySegment, TypewriterProps } from "../types/Typewriter.d.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

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

package/dist/styles/color.d.ts

@@ -1,4 +0,0 @@
-export type ColorStyle = "red" | "yellow" | "lightgreen" | "blue" | "pink" | "purple" | "gray" | "sub" | "none";
-export type ColorStyleType = "full" | "light" | "outline" | "ghost";
-export declare const colorStyleParts: Record<ColorStyle, Record<ColorStyleType, string>>;
-export declare function generateColorStyle(color: ColorStyle, variant: ColorStyleType): string;

package/dist/styles/color.js

@@ -1,62 +0,0 @@
-export const colorStyleParts = {
-    red: {
-        full: "bg-red-500 hover:bg-red-600",
-        light: "bg-red-500/35 hover:bg-red-600/35 text-white/60",
-        outline: "border border-red-500 hover:border-red-600 text-red-500 hover:text-red-600 hover:bg-red-500/10",
-        ghost: "hover:bg-red-500"
-    },
-    yellow: {
-        full: "bg-yellow-500 hover:bg-yellow-600",
-        light: "bg-yellow-500/35 hover:bg-yellow-600/35 text-white/60",
-        outline: "border border-yellow-500 hover:border-yellow-600 text-yellow-500 hover:text-yellow-600 hover:bg-yellow-500/10",
-        ghost: "hover:bg-yellow-500"
-    },
-    lightgreen: {
-        full: "bg-green-500 hover:bg-green-600",
-        light: "bg-green-500/35 hover:bg-green-600/35 text-white/60",
-        outline: "border border-green-500 hover:border-green-600 text-green-500 hover:text-green-600 hover:bg-green-500/10",
-        ghost: "hover:bg-green-500"
-    },
-    blue: {
-        full: "bg-blue-500 hover:bg-blue-600",
-        light: "bg-blue-500/35 hover:bg-blue-600/35 text-white/60",
-        outline: "border border-blue-500 hover:border-blue-600 text-blue-500 hover:text-blue-600 hover:bg-blue-500/10",
-        ghost: "hover:bg-blue-500"
-    },
-    pink: {
-        full: "bg-pink-500 hover:bg-pink-600",
-        light: "bg-pink-500/35 hover:bg-pink-600/35 text-white/60",
-        outline: "border border-pink-500 hover:border-pink-600 text-pink-500 hover:text-pink-600 hover:bg-pink-500/10",
-        ghost: "hover:bg-pink-500"
-    },
-    purple: {
-        full: "bg-purple-500 hover:bg-purple-600",
-        light: "bg-purple-500/35 hover:bg-purple-600/35 text-white/60",
-        outline: "border border-purple-500 hover:border-purple-600 text-purple-500 hover:text-purple-600 hover:bg-purple-500/10",
-        ghost: "hover:bg-purple-500"
-    },
-    gray: {
-        full: "bg-gray-500 hover:bg-gray-600",
-        light: "bg-gray-500/35 hover:bg-gray-600/35 text-white/60",
-        outline: "border border-gray-500 hover:border-gray-600 text-gray-500 hover:text-gray-600 hover:bg-gray-500/10",
-        ghost: "hover:bg-gray-500"
-    },
-    sub: {
-        full: "bg-sub-background hover:bg-sub-background-hover",
-        light: "bg-sub-background hover:bg-sub-background-hover text-white/60",
-        outline: "border border-sub-background hover:border-sub-background-hover text-sub-background hover:text-sub-background-hover hover:bg-sub-background/10",
-        ghost: "hover:bg-sub-background"
-    },
-    none: {
-        full: "",
-        light: "",
-        outline: "",
-        ghost: ""
-    }
-};
-export function generateColorStyle(color, variant) {
-    const styles = colorStyleParts[color];
-    if (!styles)
-        return "";
-    return styles[variant] || "";
-}

package/dist/styles/layout.css

@@ -1,44 +0,0 @@
-@import 'tailwindcss';
-
-@utility flex-center {
-    @apply flex items-center justify-center;
-}
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme {
-    --color-main-background: var(--vpcui-color-main-background);
-    --color-sub-background: var(--vpcui-color-sub-background);
-    --color-sub-background-hover: var(--vpcui-color-sub-background-hover);
-    --color-main-text: var(--vpcui-color-main-text);
-    --color-sub-text: var(--vpcui-color-sub-text);
-    --color-form-input-background: var(--vpcui-color-form-input-background);
-    --color-form-input-hover: var(--vpcui-color-form-input-hover);
-    --color-navbar-element-hover-background: var(--vpcui-color-navbar-element-hover-background);
-}
-
-:root {
-    --vpcui-color-main-background: var(--color-mist-50);
-    --vpcui-color-sub-background: var(--color-mist-300);
-    --vpcui-color-sub-background-hover: var(--color-mist-400);
-    --vpcui-color-main-text: #000;
-    --vpcui-color-sub-text: #555;
-    --vpcui-color-form-input-background: var(--color-mist-100);
-    --vpcui-color-form-input-hover: var(--color-mist-200);
-    --vpcui-color-navbar-element-hover-background: var(--color-mist-100);
-}
-
-html.dark {
-    --vpcui-color-main-background: #121212;
-    --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;
-    --vpcui-color-form-input-hover: #2c2c2c;
-    --vpcui-color-navbar-element-hover-background: var(--color-zinc-900);
-}
-
-html {
-    background-color: var(--color-main-background);
-}

package/dist/styles/size.d.ts

@@ -1,15 +0,0 @@
-export type SizeStyle = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full" | "none" | number;
-export type SizeStyleType = "button" | "buttonIcon" | "radius" | "text";
-export declare const sizeStyleParts: Record<SizeStyle, Record<SizeStyleType, string>>;
-export declare const textStyle: {
-    "text-xs": string;
-    "text-sm": string;
-    "text-base": string;
-    "text-lg": string;
-    "text-xl": string;
-    "text-2xl": string;
-    "text-3xl": string;
-    "text-4xl": string;
-    "text-5xl": string;
-    "text-6xl": string;
-};

package/dist/styles/size.js

@@ -1,92 +0,0 @@
-export const sizeStyleParts = {
-    xs: {
-        button: "text-xs h-4 px-1 py-0.5",
-        buttonIcon: "text-xs h-4 w-4 p-0.5",
-        radius: "rounded-xs",
-        text: "text-xs"
-    },
-    sm: {
-        button: "text-sm h-6 px-2 py-1",
-        buttonIcon: "text-sm h-6 w-6 p-1",
-        radius: "rounded-sm",
-        text: "text-sm"
-    },
-    md: {
-        button: "text-base h-8 px-3 py-1.5",
-        buttonIcon: "text-base h-8 w-8 p-1.5",
-        radius: "rounded-md",
-        text: "text-base"
-    },
-    lg: {
-        button: "text-lg h-10 px-4 py-2",
-        buttonIcon: "text-lg h-10 w-10 p-2",
-        radius: "rounded-lg",
-        text: "text-lg"
-    },
-    xl: {
-        button: "text-xl h-12 px-5 py-2.5",
-        buttonIcon: "text-xl h-12 w-12 p-2.5",
-        radius: "rounded-xl",
-        text: "text-xl"
-    },
-    "2xl": {
-        button: "text-2xl h-14 px-6 py-3",
-        buttonIcon: "text-2xl h-14 w-14 p-3",
-        radius: "rounded-2xl",
-        text: "text-2xl"
-    },
-    "3xl": {
-        button: "text-3xl h-16 px-7 py-3.5",
-        buttonIcon: "text-3xl h-16 w-16 p-3.5",
-        radius: "rounded-3xl",
-        text: "text-3xl"
-    },
-    "4xl": {
-        button: "text-4xl h-18 px-8 py-4",
-        buttonIcon: "text-4xl h-18 w-18 p-4",
-        radius: "rounded-4xl",
-        text: "text-4xl"
-    },
-    "5xl": {
-        button: "text-5xl h-20 px-9 py-4.5",
-        buttonIcon: "text-5xl h-20 w-20 p-4.5",
-        radius: "rounded-[2.5rem]",
-        text: "text-5xl"
-    },
-    "6xl": {
-        button: "text-6xl h-24 px-10 py-5",
-        buttonIcon: "text-6xl h-24 w-24 p-5",
-        radius: "rounded-[3rem]",
-        text: "text-6xl"
-    },
-    full: {
-        button: "w-full text-base h-8 px-3 py-1",
-        buttonIcon: "w-full aspect-square text-base p-1",
-        radius: "rounded-full",
-        text: "w-full text-base"
-    },
-    none: {
-        button: "p-0 h-auto text-base",
-        buttonIcon: "p-0 h-auto w-auto text-base",
-        radius: "rounded-none",
-        text: ""
-    },
-    0: {
-        button: "",
-        buttonIcon: "",
-        radius: "rounded-none",
-        text: ""
-    }
-};
-export const textStyle = {
-    "text-xs": "0.75rem",
-    "text-sm": "0.875rem",
-    "text-base": "1rem",
-    "text-lg": "1.125rem",
-    "text-xl": "1.25rem",
-    "text-2xl": "1.5rem",
-    "text-3xl": "1.875rem",
-    "text-4xl": "2.25rem",
-    "text-5xl": "3rem",
-    "text-6xl": "3.75rem"
-};

package/dist/types/Analytics.d.ts

@@ -1,3 +0,0 @@
-export interface AnalyticsProps {
-    measurementId: string;
-}

package/dist/types/Button.d.ts

@@ -1,17 +0,0 @@
-import type { ColorStyle, ColorStyleType } from "../styles/color.ts";
-import type { SizeStyle } from "../styles/size.ts";
-
-export interface ButtonProps {
-    children?: any;
-    class?: string;
-    pill?: boolean;
-    icon?: boolean;
-    href?: string;
-    color?: ColorStyle;
-    variant?: ColorStyleType;
-    disabled?: boolean;
-    external?: boolean;
-    size?: SizeStyle;
-    radius?: SizeStyle;
-    [key: string]: any;
-}

package/dist/types/Card.d.ts

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

package/dist/types/Checkbox.d.ts

@@ -1,9 +0,0 @@
-export interface CheckboxProps {
-    children?: any;
-    class?: string;
-    labelClass?: string;
-    divClass?: string;
-    checked?: boolean;
-    id?: string;
-    [key: string]: any;
-};

package/dist/types/FloatingInput.d.ts

@@ -1,13 +0,0 @@
-export interface FloatingInputProps {
-    children?: any;
-    class?: string;
-    labelClass?: string;
-    divClass?: string;
-    value?: string;
-    isTextArea?: boolean;
-    onfocus?: (e?: FocusEvent) => void;
-    onblur?: (e?: FocusEvent) => void;
-    validInputRegex?: RegExp;
-    id?: `${string}-${string}-${string}-${string}-${string}`;
-    [key: string]: any; 
-};  

package/dist/types/FloatingSelect.d.ts

@@ -1,10 +0,0 @@
-export interface FloatingSelectProps {
-    children?: any;
-    class?: string;
-    divClass?: string;
-    optionClass?: string;
-    value?: any;
-    options: { value: any; label: string }[];
-    id?: `${string}-${string}-${string}-${string}-${string}`;
-    [key: string]: any; 
-};  

package/dist/types/Navbar.d.ts

@@ -1,17 +0,0 @@
-export interface NavbarProps {
-    children?: any;
-    class?: string;
-    classTop?: string;
-    threshold?: number;
-    [key: string]: any;
-};
-
-export interface NavbarElementProps {
-    children?: any;
-    class?: string;
-    classTop?: string;
-    activeClass?: string;
-    href?: string;
-    threshold?: number;
-    [key: string]: any;
-}

package/dist/types/SEO.d.ts

@@ -1,6 +0,0 @@
-export interface SEOProps {
-    websiteName: string;
-    title?: string;
-    description?: string;
-    image?: any;
-}

package/dist/types/Text.d.ts

@@ -1,10 +0,0 @@
-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;
-    tag?: TextTagOptions;
-    shrink?: boolean;
-    size?: SizeStyle;
-    [key: string]: any; 
-};  

package/dist/types/Typewriter.d.ts

@@ -1,18 +0,0 @@
-export type TypewriterAction =
-    | { type: "write", value: string | (() => string), color?: string | (() => string), minspeed?: number, maxspeed?: number, label?: string }
-    | { type: "delete", to: string, minspeed?: number, maxspeed?: number, label?: string }    
-    | { type: "pause", duration: number, label?: string }
-    | { type: "jump", position: string, label?: string };
-
-export interface DisplaySegment {
-    text: string;
-    color?: string;
-    label?: string;
-};
-
-export interface TypewriterProps {
-    actions: TypewriterAction[];
-    class?: string;
-    textClass?: string;
-    [key: string]: any;
-}