@valerius_petrini/corekit-ui 0.1.66 → 0.1.70

package/dist/components/overlay/Tooltip/index.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const Index: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Index = InstanceType<typeof Index>;
+export default Index;

package/dist/components/overlay/Tooltip/index.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+    import type { TooltipPosition } from "../../../styles/posititon.js";
+    import type { TooltipProps } from "./types.js";
+    import { onMount, tick, type Snippet } from "svelte";
+    import { fly } from "svelte/transition";
+
+    import {
+        computePosition,
+        flip,
+        shift,
+        offset,
+        arrow as arrowMiddleware,
+        type Placement,
+
+        autoUpdate
+
+    } from "@floating-ui/dom";
+
+    let {
+        text,
+        position = "top",
+        delay = 150,
+        interactive = false,
+        children,
+        attachedTo
+    }: TooltipProps = $props();
+
+    let visible = $state(false);
+    let x = $state(0);
+    let y = $state(0);
+    // svelte-ignore state_referenced_locally
+    let resolvedPosition: Placement = $state(position);
+    let arrowX: number | undefined = $state(undefined);
+    let arrowY: number | undefined = $state(undefined);
+
+    let trigger: HTMLDivElement | null = $state(null);
+    let tooltipEl: HTMLDivElement | null = $state(null);
+    let arrowEl: HTMLDivElement | null = $state(null);
+    let timeout: ReturnType<typeof setTimeout>;
+
+    async function updatePosition() {
+        if (!trigger || !tooltipEl) return;
+
+        const { x: fx, y: fy, placement, middlewareData } = await computePosition(trigger, tooltipEl, {
+            placement: position,
+            middleware: [
+                offset(8),
+                flip(),
+                shift({ padding: 8 }),
+                arrowMiddleware({ element: arrowEl! })
+            ]
+        });
+
+        x = fx;
+        y = fy;
+        resolvedPosition = placement;
+
+        if (middlewareData.arrow) {
+            arrowX = middlewareData.arrow.x;
+            arrowY = middlewareData.arrow.y;
+        }
+    }
+
+    let hideTimeout: ReturnType<typeof setTimeout>;
+
+    function show() {
+        clearTimeout(hideTimeout);
+        timeout = setTimeout(async () => {
+            visible = true;
+            await tick();
+            await updatePosition();
+        }, delay);
+    }
+
+    function hide() {
+        clearTimeout(timeout);
+        if (interactive)
+            hideTimeout = setTimeout(() => { visible = false; }, 150);
+        else
+            visible = false;
+    }
+
+    const flyParams = $derived.by(() => {
+        const duration = 100;
+        const distance = 8;
+        if (resolvedPosition === "top") return { y: distance, duration };
+        if (resolvedPosition === "bottom") return { y: -distance, duration };
+        return { x: resolvedPosition === "right" ? -distance : distance, duration };
+    });
+
+    const arrowSide = $derived(({
+        top: "bottom",
+        bottom: "top",
+        left: "right",
+        right: "left"
+    } as Record<string, string>)[resolvedPosition.split("-")[0]] ?? "bottom");
+
+    const arrowPoints = $derived(({
+        top: "0,0 8,0 4,4",
+        bottom: "0,4 4,0 8,4",
+        right: "4,0 4,8 0,4",
+        left: "0,0 0,8 4,4"
+    } as Record<string, string>)[resolvedPosition.split("-")[0]]);
+
+    const isVertical = $derived(
+        resolvedPosition.startsWith("top") || resolvedPosition.startsWith("bottom")
+    );
+
+    $effect(() => {
+        if (visible && trigger && tooltipEl) {
+            const cleanup = autoUpdate(
+                trigger,
+                tooltipEl,
+                updatePosition
+            );
+            return () => cleanup();
+        }
+    });
+
+    function onTooltipEnter() {
+        clearTimeout(hideTimeout);
+    }
+
+    function onTooltipLeave() {
+        visible = false;
+    }
+
+    onMount(() => {
+        if (attachedTo) {
+            trigger = attachedTo;
+
+            attachedTo.addEventListener("mouseenter", show);
+            attachedTo.addEventListener("mouseleave", hide);
+
+            return () => {
+                attachedTo.removeEventListener("mouseenter", show);
+                attachedTo.removeEventListener("mouseleave", hide);
+            };
+        }
+    });
+</script>
+
+{#if !attachedTo}
+    <div
+        role="presentation"
+        bind:this={trigger}
+        class="inline-flex w-fit h-fit"
+        onmouseenter={show}
+        onmouseleave={hide}
+    >
+        {@render children()}
+    </div>
+{/if}
+
+{#if visible}
+    <div
+        bind:this={tooltipEl}
+        role="tooltip"
+        style="position: fixed; top: {y}px; left: {x}px;"
+        class="z-999999 {interactive ? 'pointer-events-auto' : 'pointer-events-none'}"
+        onmouseenter={onTooltipEnter}
+        onmouseleave={onTooltipLeave}
+    >
+        <div
+            bind:this={arrowEl}
+            style="
+                position: absolute;
+                {arrowSide}: -4px;
+                {arrowX != null ? `left: ${arrowX}px` : ''};
+                {arrowY != null ? `top: ${arrowY}px` : ''};
+            "
+        >
+            <svg
+                width={isVertical ? 8 : 4}
+                height={isVertical ? 4 : 8}
+                viewBox={isVertical ? "0 0 8 4" : "0 0 4 8"}
+            >
+                <polygon points={arrowPoints} fill="currentColor" class="text-form-background" />
+            </svg>
+        </div>
+
+        <div
+            transition:fly={flyParams}
+            class="px-2 py-1 text-xs text-main-text bg-form-background rounded whitespace-nowrap border border-white/10"
+        >
+            {#if attachedTo}
+                {@render children?.()}
+            {:else}
+                {text}
+            {/if}
+        </div>
+    </div>
+{/if}

package/dist/components/overlay/Tooltip/index.svelte.d.ts

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

package/dist/components/overlay/Tooltip/types.d.ts

@@ -0,0 +1,9 @@
+import type { TooltipPosition } from "../../../styles/posititon.js";
+import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
+export interface TooltipProps extends BaseComponentProps {
+    text?: string;
+    position?: TooltipPosition;
+    delay?: number;
+    interactive?: boolean;
+    attatchedTo?: HTMLElement;
+}

package/dist/components/overlay/Tooltip/types.js

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

package/dist/components/overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip/index.svelte";
+export type { TooltipProps } from "./Tooltip/types.ts";

package/dist/components/overlay/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from "./Tooltip/index.svelte";

package/dist/components/typography/Text/index.stories.svelte

@@ -0,0 +1,16 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Text from "../../typography/Text/index.svelte";
+
+	const { Story } = defineMeta({
+		title: "Components/Typography/Text",
+		component: Text,
+		argTypes: {
+			
+        }
+	});
+</script>
+
+<Story name="Default" args={{ tag: "p" }}>
+    The quick brown fox jumps over the lazy dog.
+</Story>

package/dist/components/typography/Text/index.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const Index: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Index = InstanceType<typeof Index>;
+export default Index;

package/dist/components/{Text.svelte → typography/Text/index.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { sizeStyleParts, textStyle, type SizeStyle, type SizeStyleTheme } from "../styles/size.js";
-    import type { TextProps } from "../types/Text.js";
+    import { sizeStyleParts, textStyle, type SizeStyleTheme } from "../../../styles/size";
+    import type { TextProps } from "./types.js";
     import { twMerge } from "tailwind-merge";
 
     let { 
@@ -16,7 +16,7 @@
         "p": { class: "", size: "text-base" },
         "div": { class: "", size: "text-base" },
         "span": { class: "", size: "text-base" },
-        "label": { class: "text-sub-text font-semibold cursor-default", size: "text-xs" },
+        "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" },
@@ -25,15 +25,15 @@
         "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" },
+        "code": { class: "font-mono bg-sub-background px-1 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" }
+        "h1": { class: "font-bold", size: "text-4xl" },
+        "h2": { class: "font-bold", size: "text-3xl" },
+        "h3": { class: "font-semibold", size: "text-2xl" },
+        "h4": { class: "font-semibold", size: "text-xl" },
+        "h5": { class: "font-medium", size: "text-lg" },
+        "h6": { class: "font-normal", size: "text-base" }
     };
 
     function getTextSizeInRem(): string {

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

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

package/dist/{types/Text.d.ts → components/typography/Text/types.d.ts}

@@ -1,5 +1,5 @@
-import type { SizeStyle } from "../styles/size.ts";
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { SizeStyle } from "../../../styles/size.ts";
+import type { BaseComponentProps } from "../../../types/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 extends BaseComponentProps {
     tag?: TextTagOptions;

package/dist/components/typography/Text/types.js

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

package/dist/components/{Typewriter.svelte → typography/Typewriter/index.svelte}

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

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

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

package/dist/{types/Typewriter.d.ts → components/typography/Typewriter/types.d.ts}

@@ -1,4 +1,4 @@
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
 export type TypewriterAction = {
     type: "write";
     value: string | (() => string);

package/dist/components/typography/Typewriter/types.js

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

package/dist/components/typography/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Text } from "./Text/index.svelte";
+export { default as Typewriter } from "./Typewriter/index.svelte";
+export type { TextProps } from "./Text/types.ts";
+export type { TypewriterAction, DisplaySegment } from "./Typewriter/types.ts";

package/dist/components/typography/index.js

@@ -0,0 +1,2 @@
+export { default as Text } from "./Text/index.svelte";
+export { default as Typewriter } from "./Typewriter/index.svelte";

package/dist/components/{Analytics.svelte → utility/Analytics/index.svelte}

@@ -4,7 +4,7 @@
 
 <script lang="ts">
     import { page } from '$app/state'
-    import type { AnalyticsProps } from '../types/Analytics.js';
+    import type { AnalyticsProps } from './types.js';
 
     let { measurementId }: AnalyticsProps = $props();
 

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

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

package/dist/components/utility/Analytics/types.js

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

package/dist/components/{SEO.svelte → utility/SEO/index.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import type { SEOProps } from '../types/SEO.js';
+    import type { SEOProps } from './types.js';
 
     const DEFAULT_TITLE = "My SvelteKit App";
     const DEFAULT_DESCRIPTION = "Description of your website.";

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

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

package/dist/components/utility/SEO/types.js

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

package/dist/components/utility/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Analytics } from "./Analytics/index.svelte";
+export { default as SEO } from "./SEO/index.svelte";
+export type { AnalyticsProps } from "./Analytics/types.ts";
+export type { SEOProps } from "./SEO/types.ts";

package/dist/components/utility/index.js

@@ -0,0 +1,2 @@
+export { default as Analytics } from "./Analytics/index.svelte";
+export { default as SEO } from "./SEO/index.svelte";

package/dist/index.d.ts

@@ -1,27 +1,10 @@
-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 NavbarDropdown } from "./components/NavbarDropdown.svelte";
-export { default as Input } from "./components/Input.svelte";
-export { default as FileInput } from "./components/FileInput.svelte";
-export { default as Select } from "./components/Select.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 { 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 { default as SideNavbar } from "./components/SideNavbar.svelte";
-export { default as Tooltip } from "./components/Tooltip.svelte";
-export { default as Loader } from "./components/Loader.svelte";
-export { default as Skeleton } from "./components/Skeleton.svelte";
-export { default as Combobox } from "./components/Combobox.svelte";
+export { default as Tooltip } from "./components/overlay/Tooltip/index.svelte";
+export * from "./components/display/index.ts";
+export * from "./components/inputs/index.ts";
+export * from "./components/feedback/index.ts";
+export * from "./components/typography/index.ts";
+export * from "./components/navigation/index.ts";
+export * from "./components/utility/index.ts";
+export * from "./components/overlay/index.ts";
 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

@@ -1,26 +1,10 @@
-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 NavbarDropdown } from "./components/NavbarDropdown.svelte";
-export { default as Input } from "./components/Input.svelte";
-export { default as FileInput } from "./components/FileInput.svelte";
-export { default as Select } from "./components/Select.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 { 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 { default as SideNavbar } from "./components/SideNavbar.svelte";
-export { default as Tooltip } from "./components/Tooltip.svelte";
-export { default as Loader } from "./components/Loader.svelte";
-export { default as Skeleton } from "./components/Skeleton.svelte";
-export { default as Combobox } from "./components/Combobox.svelte";
+export { default as Tooltip } from "./components/overlay/Tooltip/index.svelte";
+export * from "./components/display/index.js";
+export * from "./components/inputs/index.js";
+export * from "./components/feedback/index.js";
+export * from "./components/typography/index.js";
+export * from "./components/navigation/index.js";
+export * from "./components/utility/index.js";
+export * from "./components/overlay/index.js";
 export { fbmBackground } from "./actions/fbm.js";
 export { toast } from "./actions/toast.svelte.js";

package/dist/styles/color.d.ts

@@ -1,4 +1,7 @@
 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" | "text" | "full" | "light" | "outline" | "ghost" | "loader";
+export type ButtonColorStyleType = "full" | "light" | "outline" | "ghost";
+export type ColorStyleType = "base" | "text" | "loader" | ButtonColorStyleType;
+export declare const colorStyles: ["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 declare const colorStyleTypes: ["base", "text", "full", "light", "outline", "ghost", "loader"];
 export declare const colorStyleParts: Record<ColorStyle, Record<ColorStyleType, string>>;
 export declare function generateColorStyle(color: ColorStyle, variant: ColorStyleType): string;