@valerius_petrini/corekit-ui 0.1.66 → 0.1.70

package/dist/components/inputs/FileInput/types.d.ts

@@ -0,0 +1,14 @@
+import type { SizeStyle } from "../../../styles/size";
+import type { BaseComponentProps } from "../../../types/BaseComponent";
+export interface FileInputProps extends BaseComponentProps {
+    label?: string;
+    labelClass?: string;
+    divClass?: string;
+    outerDivClass?: string;
+    files?: FileList;
+    required?: boolean;
+    disabled?: boolean;
+    size?: SizeStyle;
+    radius?: SizeStyle;
+    id?: `${string}-${string}-${string}-${string}-${string}`;
+}

package/dist/components/inputs/Input/index.stories.svelte

@@ -0,0 +1,27 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Input from "./index.svelte";
+	import { colorStyles, colorStyleTypes } from "../../../styles/color.js";
+    import { sizeStyles } from "../../../styles/size.js";
+
+	const { Story } = defineMeta({
+		title: "Components/Inputs/Input",
+		component: Input,
+		argTypes: {
+			size: {
+				control: "select",
+				options: sizeStyles,
+			},
+			radius: {
+				control: "select",
+				options: sizeStyles,
+			},
+            type: {
+                control: "select",
+                options: ["text", "password", "email", "number", "search", "tel", "url"],
+            },
+		},
+	});
+</script>
+
+<Story name="Default" args={{ label: "Input Label", placeholder: "Enter text here..." }}></Story>

package/dist/components/inputs/Input/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/{Input.svelte → inputs/Input/index.svelte}

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import type { InputProps } from "../types/Input.js";
+    import type { InputProps } from "./types";
     import { twMerge } from "tailwind-merge";
-    import Text from "./Text.svelte";
-    import { getSizeStyleClass } from "../styles/size.js";
+    import Text from "../../typography/Text/index.svelte";
+    import { getSizeStyleClass } from "../../../styles/size.js";
     import { type Component } from "svelte";
-    import Button from "./Button.svelte";
+    import Button from "../Button/index.svelte";
 
     import Mail from "@lucide/svelte/icons/mail";
     import Lock from "@lucide/svelte/icons/lock";
@@ -14,8 +14,8 @@
     import X from "@lucide/svelte/icons/x";
     import Check from "@lucide/svelte/icons/check";
     import { slide } from "svelte/transition";
-    import BaseInput from "./helper/BaseInput.svelte";
-    import NumberInput from "./helper/NumberInput.svelte";
+    import BaseInput from "../helper/BaseInput.svelte";
+    import NumberInput from "../helper/NumberInput.svelte";
 
     let { 
         children = undefined, 
@@ -43,8 +43,6 @@
         ...restProps
     }: InputProps = $props();
 
-    let isHovered = $state(false);
-
     const sizeClasses = $derived(getSizeStyleClass(size, "form"));
     const labelSizeClass = $derived(getSizeStyleClass(size, "formLabel"));
 
@@ -130,7 +128,6 @@
     {isFocused}
     {id}
     icon={Icon}
-    bind:isHovered
     {...restProps}>
     {#snippet outerDivElementAfter()}
         {#if touched && requirements}
@@ -169,11 +166,11 @@
             type={canSeePassword ? "text" : restProps.type}
         />
         {#if restProps.type === "password"}
-            <Button class={iconContainerClass} onclick={() => { canSeePassword = !canSeePassword; }}>
+            <Button color="none" class={iconContainerClass} onclick={() => { canSeePassword = !canSeePassword; }}>
                 <EyeComponent class={iconClass}></EyeComponent>
             </Button>
         {:else if restProps.type === "number"}
-            <NumberInput {max} {min} {step} bind:value {isHovered} {size}/>
+            <NumberInput {max} {min} {step} bind:value {size}/>
         {/if}
     {/snippet}
 </BaseInput>

package/dist/components/inputs/Input/index.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { InputProps } from "./types";
+import { type Component } from "svelte";
+declare const Index: Component<InputProps, {}, "value" | "valid">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/inputs/Input/types.d.ts

@@ -0,0 +1,15 @@
+import type { BaseInputProps } from "../../../types/BaseComponent";
+export interface InputRequirements {
+    label: string;
+    requirements: RegExp | ((value: any) => boolean);
+}
+export interface InputProps extends BaseInputProps {
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    onfocus?: (e?: FocusEvent) => void;
+    onblur?: (e?: FocusEvent) => void;
+    requirements?: InputRequirements[];
+    valid?: boolean;
+}

package/dist/components/inputs/Input/types.js

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

package/dist/components/{Select.svelte → inputs/Select/index.svelte}

@@ -1,10 +1,9 @@
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
-    import Text from "./Text.svelte";
-    import { getSizeStyleClass } from "../styles/size.js";
+    import { getSizeStyleClass } from "../../../styles/size";
 
-    import type { SelectProps } from "../types/Input.js";
-    import BaseInput from "./helper/BaseInput.svelte";
+    import type { SelectProps } from "../../../types/Input.js";
+    import BaseInput from "../helper/BaseInput.svelte";
 
     let { 
         children = undefined, 

package/dist/components/inputs/Select/index.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Index: import("svelte").Component<SelectProps, {}, "value">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/inputs/Select/types.d.ts

@@ -0,0 +1,7 @@
+import type { BaseInputProps } from "../../../types/BaseComponent";
+export interface SelectProps extends BaseInputProps {
+    options: {
+        value: any;
+        label: string;
+    }[];
+}

package/dist/components/inputs/Select/types.js

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

package/dist/components/{helper → inputs/helper}/BaseInput.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
-    import type { BaseInputProps } from "../../types/Input.js";
-    import Text from "../Text.svelte";
-    import { getSizeStyleClass } from "../../styles/size.js";
+    import type { BaseInputProps } from "../../../types/BaseComponent";
+    import Text from "../../typography/Text/index.svelte";
+    import { getSizeStyleClass } from "../../../styles/size.js";
 
     let { 
         children = undefined, 
@@ -19,10 +19,9 @@
         radius = "md",
         isFocused = false,
         icon = undefined,
+        wrapper = $bindable(),
         id = crypto.randomUUID(),
 
-        isHovered = $bindable(false),
-
         innerDivElement = undefined,
         outerDivElementAfter = undefined,
 
@@ -63,7 +62,7 @@
     ));
 
     const combinedDivClass = $derived(twMerge(
-        "relative *:transition-all transition-colors flex-center bg-form-background border-[1px] border-form-border focus-within:ring-1 focus-within:ring-blue-500 overflow-hidden",
+        "vpcui-base-input-div-class relative *:transition-all transition-colors flex-center bg-form-background border-[1px] border-form-border focus-within:ring-1 focus-within:ring-blue-500 overflow-hidden",
         getSizeStyleClass(radius, "radius"),
         size === "full" ? "w-full" : "",
         divClass,
@@ -81,7 +80,7 @@
 {/snippet}
 
 {#snippet innerDivElementWrapper()}
-    <div role="button" tabindex="0" class={combinedDivClass} onmouseenter={() => isHovered = true} onmouseleave={() => isHovered = false}>
+    <div class={combinedDivClass} bind:this={wrapper}>
         {#if variant === "floating"}
             {@render labelElement()}
         {/if}
@@ -102,4 +101,11 @@
     {@render innerDivElementWrapper()}
 
     {@render outerDivElementAfter?.()}
-</div>
+</div>
+
+<style>
+    :global(.vpcui-base-input-div-class:hover .vpcui-number-input-icon-class) {
+        opacity: 1 !important;
+        scale: 1 !important;
+    }
+</style>

package/dist/components/{helper → inputs/helper}/BaseInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { BaseInputProps } from "../../types/Input.js";
-declare const BaseInput: import("svelte").Component<BaseInputProps, {}, "value" | "isHovered">;
+import type { BaseInputProps } from "../../../types/BaseComponent";
+declare const BaseInput: import("svelte").Component<BaseInputProps, {}, "value" | "wrapper">;
 type BaseInput = ReturnType<typeof BaseInput>;
 export default BaseInput;

package/dist/components/{helper → inputs/helper}/NumberInput.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-    import Button from "../Button.svelte";
+    import Button from "../Button/index.svelte";
     import ChevronUp from "@lucide/svelte/icons/chevron-up";
     import ChevronDown from "@lucide/svelte/icons/chevron-down";
     import { twMerge } from "tailwind-merge";
-    import { getSizeStyleClass, type SizeStyle } from "../../styles/size.js";
+    import { getSizeStyleClass, type SizeStyle } from "../../../styles/size.js";
 
     let {
         max = undefined,
         min = undefined,
         step = undefined,
         value = $bindable(),
-        isHovered = false,
         size = "md" as SizeStyle,
         ...restProps
     } = $props();
@@ -52,14 +51,15 @@
 
     const numberIconClass = $derived(twMerge(
         getSizeStyleClass(size, "form"), 
-        "text-sub-text/70 w-fit aspect-auto p-0 flex-center flex-col transition-all duration-150"
+        "vpcui-number-input-icon-class text-sub-text/70 w-fit aspect-auto p-0 flex-center flex-col transition-all duration-150 opacity-0 scale-75"
     ));
     const numberButtonClass = "py-0! h-1/2 gap-0 px-0.5 hover:bg-form-border aspect-square rounded-none";
 </script>
 
-<div class={twMerge(numberIconClass, isHovered ? "opacity-100 scale-100" : "opacity-0 scale-75")}>
+<div class={numberIconClass}>
     <Button 
-        size="none" radius="none" 
+        size="none" radius="none" color="none"
+        aria-label="Increment"
         class={numberButtonClass} 
         onmousedown={startIncrement}
         onmouseup={stopIncrement}
@@ -68,7 +68,8 @@
         <ChevronUp class="w-full h-full"/>
     </Button>
     <Button 
-        size="none" radius="none" 
+        size="none" radius="none" color="none"
+        aria-label="Decrement"
         class={numberButtonClass} 
         onmousedown={startDecrement}
         onmouseup={stopDecrement}

package/dist/components/{helper → inputs/helper}/NumberInput.svelte.d.ts

@@ -1,10 +1,9 @@
-import { type SizeStyle } from "../../styles/size.js";
+import { type SizeStyle } from "../../../styles/size.js";
 declare const NumberInput: import("svelte").Component<{
     max?: any;
     min?: any;
     step?: any;
     value?: any;
-    isHovered?: boolean;
     size?: SizeStyle;
 } & Record<string, any>, {}, "value">;
 type NumberInput = ReturnType<typeof NumberInput>;

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

@@ -0,0 +1,12 @@
+export { default as Button } from "./Button/index.svelte";
+export { default as Checkbox } from "./Checkbox/index.svelte";
+export { default as Input } from "./Input/index.svelte";
+export { default as Select } from "./Select/index.svelte";
+export { default as FileInput } from "./FileInput/index.svelte";
+export { default as Combobox } from "./Combobox/index.svelte";
+export type { ButtonProps } from "./Button/types.ts";
+export type { CheckboxProps } from "./Checkbox/types.ts";
+export type { InputProps } from "./Input/types.ts";
+export type { SelectProps } from "./Select/types.ts";
+export type { FileInputProps } from "./FileInput/types.ts";
+export type { ComboboxProps } from "./Combobox/types.ts";

package/dist/components/inputs/index.js

@@ -0,0 +1,6 @@
+export { default as Button } from "./Button/index.svelte";
+export { default as Checkbox } from "./Checkbox/index.svelte";
+export { default as Input } from "./Input/index.svelte";
+export { default as Select } from "./Select/index.svelte";
+export { default as FileInput } from "./FileInput/index.svelte";
+export { default as Combobox } from "./Combobox/index.svelte";

package/dist/components/navigation/Breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import type { BreadcrumbItemProps } from "./types";
+    import { Text } from "../../typography";
+
+    let {
+        children = undefined, 
+        class: className = "",
+        href = undefined,
+        ...restProps
+    }: BreadcrumbItemProps = $props();
+
+    const combinedClass = $derived(twMerge(
+        "vpcui-breadcrumb-item text-main-text",
+        className
+    ));
+</script>
+
+<li class={combinedClass} {...restProps} aria-current={href ? undefined : 'page'}>
+    {#if href}
+        <a class="hover:underline hover:text-sub-text transition-colors" href={href}>
+            {@render children?.()}
+        </a>
+    {:else}
+        <span class="font-medium text-main-text opacity-100 cursor-default">
+            {@render children?.()}
+        </span>
+    {/if}
+</li>
+
+<style>
+    :global(li.vpcui-breadcrumb-item + li.vpcui-breadcrumb-item::before) {
+        content: "›";
+        margin: 0 0.25rem;
+        color: var(--color-main-text);
+    }
+</style>

package/dist/components/navigation/Breadcrumb/BreadcrumbItem.svelte.d.ts

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

package/dist/components/navigation/Breadcrumb/index.stories.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Breadcrumb from "./index.svelte";
+    import BreadcrumbItem from "./BreadcrumbItem.svelte";
+
+	const { Story } = defineMeta({
+		title: "Components/Navigation/Breadcrumb",
+		component: Breadcrumb,
+		argTypes: {
+
+		},
+	});
+</script>
+
+<Story name="Default" args={{ color: "primary", size: "md" }}>
+    <BreadcrumbItem href="/">Home</BreadcrumbItem>
+    <BreadcrumbItem href="/library">Library</BreadcrumbItem>
+    <BreadcrumbItem>Data</BreadcrumbItem>
+</Story>

package/dist/components/navigation/Breadcrumb/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/navigation/Breadcrumb/index.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { twMerge } from "tailwind-merge";
+    import type { BreadcrumbProps } from "./types";
+
+    let {
+        children = undefined, 
+        class: className = "",
+        ...restProps
+    }: BreadcrumbProps = $props();
+
+    const combinedClass = $derived(twMerge(
+        "vpcui-breadcrumb",
+        className
+    ));
+</script>
+
+<nav aria-label="Breadcrumb" class={combinedClass} {...restProps}>
+    <ol class="flex flex-wrap items-center">
+        {@render children?.()}
+    </ol>
+</nav>

package/dist/components/navigation/Breadcrumb/index.svelte.d.ts

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

package/dist/components/navigation/Breadcrumb/types.d.ts

@@ -0,0 +1,6 @@
+import type { BaseComponentProps } from "../../../types/BaseComponent";
+export interface BreadcrumbProps extends BaseComponentProps {
+}
+export interface BreadcrumbItemProps extends BaseComponentProps {
+    href?: string;
+}

package/dist/components/{NavbarDropdown.svelte → navigation/Navbar/NavbarDropdown.svelte}

@@ -2,7 +2,7 @@
     import { fly } from "svelte/transition";
     import NavbarElement from "./NavbarElement.svelte";
     import { tick } from "svelte";
-    import type { NavbarDropdownProps } from "../types/Navbar.js";
+    import type { NavbarDropdownProps } from "./types.js";
 
     let {
         children = undefined, 

package/dist/components/{NavbarDropdown.svelte.d.ts → navigation/Navbar/NavbarDropdown.svelte.d.ts}

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

package/dist/components/{NavbarElement.svelte → navigation/Navbar/NavbarElement.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { twMerge } from "tailwind-merge";
-    import Button from "./Button.svelte";
-    import type { NavbarElementProps } from "../types/Navbar.js";
+    import Button from "../../inputs/Button/index.svelte";
+    import type { NavbarElementProps } from "./types";
     import { page } from "$app/state";
 
     let {

package/dist/components/{NavbarElement.svelte.d.ts → navigation/Navbar/NavbarElement.svelte.d.ts}

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

package/dist/components/{NavbarSeparator.svelte → navigation/Navbar/NavbarSeparator.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { NavbarSeparatorClasses, type NavbarSeparatorProps } from "../types/Navbar.js";
+    import { NavbarSeparatorClasses, type NavbarSeparatorProps } from "./types.js";
 
     let {
         variant = "dynamic",

package/dist/components/{NavbarSeparator.svelte.d.ts → navigation/Navbar/NavbarSeparator.svelte.d.ts}

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

package/dist/components/{Navbar.svelte → navigation/Navbar/index.svelte}

@@ -1,6 +1,5 @@
 <script lang="ts">
-    import type { NavbarProps } from "../types/Navbar.js";
-    import { onMount } from "svelte";
+    import type { NavbarProps } from "./types.js";
     import { twMerge } from "tailwind-merge";
 
     let { 

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

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

package/dist/{types/Navbar.d.ts → components/navigation/Navbar/types.d.ts}

@@ -1,5 +1,5 @@
-import type { Component, Snippet } from "svelte";
-import type { BaseComponentProps } from "./BaseComponent.ts";
+import type { Snippet } from "svelte";
+import type { BaseComponentProps } from "../../../types/BaseComponent.ts";
 export interface NavbarProps extends BaseComponentProps {
     classTop?: string;
     threshold?: number;
@@ -10,19 +10,11 @@ export interface NavbarElementProps extends BaseComponentProps {
     href?: string;
     threshold?: number;
 }
-export interface SideNavbarProps extends BaseComponentProps {
-    items?: SideNavbarItem[];
-}
 export type NavbarSeparatorVariant = "vertical" | "horizontal" | "dynamic";
 export declare const NavbarSeparatorClasses: Record<NavbarSeparatorVariant, string>;
 export interface NavbarSeparatorProps extends BaseComponentProps {
     variant?: NavbarSeparatorVariant;
 }
-export interface SideNavbarItem {
-    href: string;
-    label: string;
-    icon: Component;
-}
 export interface NavbarDropdownProps extends BaseComponentProps {
     label?: string;
     element?: Snippet;

package/dist/{types/Navbar.js → components/navigation/Navbar/types.js}

@@ -1,5 +1,4 @@
 ;
-;
 export const NavbarSeparatorClasses = {
     "vertical": "w-0.5 h-full py-3 bg-sub-background-hover bg-clip-content",
     "horizontal": "h-0.5 w-full px-3 my-1 bg-sub-background-hover bg-clip-content",

package/dist/components/{SideNavbar.svelte → navigation/SideNavbar/index.svelte}

@@ -1,8 +1,8 @@
 <script lang="ts">
-    import type { SideNavbarProps } from "../types/Navbar.js";
+    import type { SideNavbarProps } from "./types";
     import { twMerge } from "tailwind-merge";
-    import Button from "./Button.svelte";
-    import Text from "./Text.svelte";
+    import Button from "../../inputs/Button/index.svelte";
+    import Text from "../../typography/Text/index.svelte";
     import { page } from '$app/state';
 
     let { 

package/dist/components/navigation/SideNavbar/index.svelte.d.ts

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

package/dist/components/navigation/SideNavbar/types.d.ts

@@ -0,0 +1,10 @@
+import type { BaseComponentProps } from "../../../types/BaseComponent";
+import type { Component } from "svelte";
+export interface SideNavbarProps extends BaseComponentProps {
+    items?: SideNavbarItem[];
+}
+export interface SideNavbarItem {
+    href: string;
+    label: string;
+    icon: Component;
+}

package/dist/components/navigation/SideNavbar/types.js

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

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

@@ -0,0 +1,10 @@
+export { default as Navbar } from "./Navbar/index.svelte";
+export { default as NavbarSeparator } from "./Navbar/NavbarSeparator.svelte";
+export { default as NavbarElement } from "./Navbar/NavbarElement.svelte";
+export { default as NavbarDropdown } from "./Navbar/NavbarDropdown.svelte";
+export { default as SideNavbar } from "./SideNavbar/index.svelte";
+export { default as Breadcrumb } from "./Breadcrumb/index.svelte";
+export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem.svelte";
+export type { NavbarProps, NavbarElementProps, NavbarSeparatorProps, NavbarDropdownProps } from "./Navbar/types.ts";
+export type { SideNavbarProps, SideNavbarItem } from "./SideNavbar/types.ts";
+export type { BreadcrumbProps, BreadcrumbItemProps } from "./Breadcrumb/types.ts";

package/dist/components/navigation/index.js

@@ -0,0 +1,7 @@
+export { default as Navbar } from "./Navbar/index.svelte";
+export { default as NavbarSeparator } from "./Navbar/NavbarSeparator.svelte";
+export { default as NavbarElement } from "./Navbar/NavbarElement.svelte";
+export { default as NavbarDropdown } from "./Navbar/NavbarDropdown.svelte";
+export { default as SideNavbar } from "./SideNavbar/index.svelte";
+export { default as Breadcrumb } from "./Breadcrumb/index.svelte";
+export { default as BreadcrumbItem } from "./Breadcrumb/BreadcrumbItem.svelte";

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

@@ -0,0 +1,20 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import Tooltip from "./index.svelte";
+    import Button from "../../inputs/Button/index.svelte";
+    import { Text } from "../../typography";
+
+	const { Story } = defineMeta({
+		title: "Components/Overlay/Tooltip",
+		component: Tooltip
+	});
+</script>
+
+<Story name="Default" args={{ color: "primary", size: "md", text: "This is a tooltip", position: "top" }}>
+    <Button>Hover me</Button>
+</Story>
+
+<Story name="Attached to Element" args={{ color: "primary", size: "md", text: "This is a tooltip", position: "top", attachedTo: document }}>
+    <Text tag="h1">Tooltip attached to document</Text>
+	<Text>This is a tooltip with the <Text tag="code">attachedTo</Text> prop.</Text>
+</Story>