@hyvor/design 0.0.68 → 1.0.3

package/dist/components/Toast/ToastIcon.svelte

@@ -1,18 +1,29 @@
-<script>import Loader from "../Loader/Loader.svelte";
-import {
-  IconCheckCircleFill,
-  IconXCircleFill,
-  IconExclamationCircleFill,
-  IconInfoCircleFill
-} from "@hyvor/icons";
-export let toast;
-$:
-  color = {
-    success: "var(--green)",
-    error: "var(--red)",
-    warning: "var(--orange)",
-    info: "var(--blue)"
-  }[toast.type] || "inherit";
+<script lang="ts">
+	import type { Toast } from './toast.ts';
+	import Loader from '../Loader/Loader.svelte';
+	import {
+		IconCheckCircleFill,
+		IconXCircleFill,
+		IconExclamationCircleFill,
+		IconInfoCircleFill
+	} from '@hyvor/icons';
+
+	interface Props {
+		toast: Toast;
+	}
+
+	let { toast }: Props = $props();
+
+	let color = $derived(
+		(
+			{
+				success: 'var(--green)',
+				error: 'var(--red)',
+				warning: 'var(--orange)',
+				info: 'var(--blue)'
+			} as any
+		)[toast.type] || 'inherit'
+	);
 </script>
 
 <span style:color>

package/dist/components/Toast/ToastIcon.svelte.d.ts

@@ -1,17 +1,6 @@
-import { SvelteComponent } from "svelte";
 import type { Toast } from './toast.ts';
-declare const __propDef: {
-    props: {
-        toast: Toast;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ToastIconProps = typeof __propDef.props;
-export type ToastIconEvents = typeof __propDef.events;
-export type ToastIconSlots = typeof __propDef.slots;
-export default class ToastIcon extends SvelteComponent<ToastIconProps, ToastIconEvents, ToastIconSlots> {
-}
-export {};
+declare const ToastIcon: import("svelte").Component<{
+    toast: Toast;
+}, {}, "">;
+type ToastIcon = ReturnType<typeof ToastIcon>;
+export default ToastIcon;

package/dist/components/Toast/ToastMessage.svelte

@@ -1,6 +1,13 @@
-<script>import ToastIcon from "./ToastIcon.svelte";
-import { fade } from "svelte/transition";
-export let toast;
+<script lang="ts">
+	import ToastIcon from './ToastIcon.svelte';
+	import type { Toast } from './toast.ts';
+	import { fade } from 'svelte/transition';
+
+	interface Props {
+		toast: Toast;
+	}
+
+	let { toast }: Props = $props();
 </script>
 
 <div class="toast" out:fade={{ duration: 200 }} in:fade={{ duration: 50 }}>
@@ -14,7 +21,7 @@ export let toast;
 		{#if typeof toast.message === 'string' || toast.message === null}
 			{@html toast.message}
 		{:else}
-			<svelte:component this={toast.message} {toast} />
+			<toast.message {toast} />
 		{/if}
 	</div>
 </div>

package/dist/components/Toast/ToastMessage.svelte.d.ts

@@ -1,17 +1,6 @@
-import { SvelteComponent } from "svelte";
 import type { Toast } from './toast.ts';
-declare const __propDef: {
-    props: {
-        toast: Toast;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ToastMessageProps = typeof __propDef.props;
-export type ToastMessageEvents = typeof __propDef.events;
-export type ToastMessageSlots = typeof __propDef.slots;
-export default class ToastMessage extends SvelteComponent<ToastMessageProps, ToastMessageEvents, ToastMessageSlots> {
-}
-export {};
+declare const ToastMessage: import("svelte").Component<{
+    toast: Toast;
+}, {}, "">;
+type ToastMessage = ReturnType<typeof ToastMessage>;
+export default ToastMessage;

package/dist/components/Toast/ToastProvider.svelte

@@ -1,7 +1,9 @@
-<script>import ToastMessage from "./ToastMessage.svelte";
-import { toastStore } from "./toast.js";
-import { useCleaner } from "./cleaner.js";
-useCleaner();
+<script lang="ts">
+	import ToastMessage from './ToastMessage.svelte';
+	import { toastStore } from './toast.js';
+	import { useCleaner } from './cleaner.js';
+
+	useCleaner();
 </script>
 
 <div id="toasts-wrap">

package/dist/components/Toast/ToastProvider.svelte.d.ts

@@ -1,14 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
+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;
     };
-    slots: {};
-};
-export type ToastProviderProps = typeof __propDef.props;
-export type ToastProviderEvents = typeof __propDef.events;
-export type ToastProviderSlots = typeof __propDef.slots;
-export default class ToastProvider extends SvelteComponent<ToastProviderProps, ToastProviderEvents, ToastProviderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ToastProvider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ToastProvider = InstanceType<typeof ToastProvider>;
+export default ToastProvider;

package/dist/components/Toast/toast.d.ts

@@ -1,4 +1,4 @@
-import type { SvelteComponent } from 'svelte';
+import type { Component } from 'svelte';
 export interface Toast {
     id: number;
     type: ToastType;
@@ -7,7 +7,7 @@ export interface Toast {
 }
 export declare const toastStore: import("svelte/store").Writable<Toast[]>;
 export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'blank';
-export type ToastMessageType = typeof SvelteComponent<Record<string, any>> | string | null;
+export type ToastMessageType = Component<any> | string | null;
 declare function createHandler(type: ToastType): (message: ToastMessageType, options?: Partial<Toast>) => number;
 type ToastFunctionSignature = ReturnType<typeof createHandler>;
 interface ToastSignature {

package/dist/components/Tooltip/Tooltip.svelte

@@ -1,58 +1,74 @@
-<script>import { tick, onMount, onDestroy } from "svelte";
-import { fade } from "svelte/transition";
-export let text = "";
-export let position = "top";
-export let color = "black";
-export let show = false;
-export let maxWidth = 300;
-export let disabled = false;
-let wrap;
-let tooltip;
-function positionTooltip() {
-  if (wrap && tooltip && show) {
-    const wrapRect = wrap.getBoundingClientRect();
-    const tooltipRect = tooltip.getBoundingClientRect();
-    let top, left;
-    if (position === "top" || position === "bottom") {
-      const topVal = wrapRect.top - tooltipRect.height - 10;
-      const leftVal = wrapRect.left + wrapRect.width / 2 - tooltipRect.width / 2;
-      top = position === "top" ? topVal : wrapRect.bottom + 10;
-      left = leftVal;
-    }
-    if (position === "left" || position === "right") {
-      const topVal = wrapRect.top + wrapRect.height / 2 - tooltipRect.height / 2;
-      const leftVal = wrapRect.left - tooltipRect.width - 10;
-      top = topVal;
-      left = position === "left" ? leftVal : wrapRect.right + 10;
-    }
-    tooltip.style.top = top + "px";
-    tooltip.style.left = left + "px";
-  }
-}
-async function handleMouseEnter() {
-  if (!disabled) {
-    show = true;
-    await tick();
-    positionTooltip();
-  }
-}
-function handleMouseLeave() {
-  show = false;
-}
-$: {
-  if (text) {
-    tick().then(() => {
-      positionTooltip();
-    });
-  }
-}
-onMount(() => {
-  positionTooltip();
-  document.addEventListener("scroll", positionTooltip);
-  return () => {
-    document.removeEventListener("scroll", positionTooltip);
-  };
-});
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<script lang="ts">
+	import { tick, onMount, onDestroy } from 'svelte';
+	import { fade } from 'svelte/transition';
+
+	export let text: string = '';
+	export let position: 'top' | 'bottom' | 'left' | 'right' = 'top';
+	export let color: 'black' | 'accent' | 'soft' | 'danger' = 'black';
+	export let show = false;
+	export let maxWidth: number = 300;
+	export let disabled = false;
+
+	let wrap: HTMLDivElement;
+	let tooltip: HTMLDivElement;
+
+	function positionTooltip() {
+		if (wrap && tooltip && show) {
+			const wrapRect = wrap.getBoundingClientRect();
+			const tooltipRect = tooltip.getBoundingClientRect();
+
+			let top, left;
+
+			if (position === 'top' || position === 'bottom') {
+				const topVal = wrapRect.top - tooltipRect.height - 10;
+				const leftVal = wrapRect.left + wrapRect.width / 2 - tooltipRect.width / 2;
+
+				top = position === 'top' ? topVal : wrapRect.bottom + 10;
+				left = leftVal;
+			}
+
+			if (position === 'left' || position === 'right') {
+				const topVal = wrapRect.top + wrapRect.height / 2 - tooltipRect.height / 2;
+				const leftVal = wrapRect.left - tooltipRect.width - 10;
+
+				top = topVal;
+				left = position === 'left' ? leftVal : wrapRect.right + 10;
+			}
+
+			tooltip.style.top = top + 'px';
+			tooltip.style.left = left + 'px';
+		}
+	}
+
+	async function handleMouseEnter() {
+		if (!disabled) {
+			show = true;
+			await tick();
+			positionTooltip();
+		}
+	}
+
+	function handleMouseLeave() {
+		show = false;
+	}
+
+	$: {
+		if (text) {
+			tick().then(() => {
+				positionTooltip();
+			});
+		}
+	}
+
+	onMount(() => {
+		positionTooltip();
+		document.addEventListener('scroll', positionTooltip);
+
+		return () => {
+			document.removeEventListener('scroll', positionTooltip);
+		};
+	});
 </script>
 
 <div

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

@@ -1,25 +1,37 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        text?: string | undefined;
-        position?: "left" | "right" | "bottom" | "top" | undefined;
-        color?: "danger" | "accent" | "soft" | "black" | undefined;
-        show?: boolean | undefined;
-        maxWidth?: number | undefined;
-        disabled?: boolean | undefined;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        tooltip: {};
-    };
-};
-export type TooltipProps = typeof __propDef.props;
-export type TooltipEvents = typeof __propDef.events;
-export type TooltipSlots = typeof __propDef.slots;
-export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    text?: string | undefined;
+    position?: ("top" | "bottom" | "left" | "right") | undefined;
+    color?: ("black" | "accent" | "soft" | "danger") | undefined;
+    show?: boolean | undefined;
+    maxWidth?: number | undefined;
+    disabled?: boolean | undefined;
+}, {
+    default: {};
+    tooltip: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    tooltip: {};
+}, {}, string>;
+type Tooltip = InstanceType<typeof Tooltip>;
+export default Tooltip;

package/dist/marketing/Container/Container.svelte

@@ -1,8 +1,14 @@
-<script>export let as = "div";
+<script lang="ts">
+	interface Props {
+		as?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { as = 'div', children }: Props = $props();
 </script>
 
 <svelte:element this={as} class="container">
-	<slot />
+	{@render children?.()}
 </svelte:element>
 
 <style>

package/dist/marketing/Container/Container.svelte.d.ts

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        as?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ContainerProps = typeof __propDef.props;
-export type ContainerEvents = typeof __propDef.events;
-export type ContainerSlots = typeof __propDef.slots;
-export default class Container extends SvelteComponent<ContainerProps, ContainerEvents, ContainerSlots> {
-}
-export {};
+declare const Container: import("svelte").Component<{
+    as?: string;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/marketing/Docs/Content/Content.svelte

@@ -1,37 +1,49 @@
-<script>import Box from "../../../components/Box/Box.svelte";
-import { page } from "$app/stores";
-import { onMount } from "svelte";
-function linkifyHeadings() {
-  var hs = document.querySelectorAll("h2[id],h3[id],h4[id]");
-  for (var i = 0; i < hs.length; i++) {
-    var h = hs[i];
-    var icon = document.createElement("a");
-    icon.className = "heading-anchor-link";
-    icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>';
-    icon.tabIndex = -1;
-    h.appendChild(icon);
-    var id = h.getAttribute("id");
-    var link = document.createElement("a");
-    link.className = "heading-anchor";
-    link.setAttribute("href", "#" + id);
-    link.innerHTML = h.innerHTML;
-    h.innerHTML = link.outerHTML;
-  }
-}
-onMount(() => {
-  const unsubscribe = page.subscribe(() => {
-    linkifyHeadings();
-  });
-  return () => {
-    unsubscribe();
-  };
-});
+<script lang="ts">
+	import Box from '../../../components/Box/Box.svelte';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	function linkifyHeadings() {
+		var hs = document.querySelectorAll('h2[id],h3[id],h4[id]');
+		for (var i = 0; i < hs.length; i++) {
+			var h = hs[i];
+
+			var icon = document.createElement('a');
+			icon.className = 'heading-anchor-link';
+			icon.innerHTML =
+				'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>';
+			icon.tabIndex = -1;
+			h.appendChild(icon);
+
+			var id = h.getAttribute('id');
+			var link = document.createElement('a');
+			link.className = 'heading-anchor';
+			link.setAttribute('href', '#' + id);
+			link.innerHTML = h.innerHTML;
+			h.innerHTML = link.outerHTML;
+		}
+	}
+
+	onMount(() => {
+		const unsubscribe = page.subscribe(() => {
+			linkifyHeadings();
+		});
+
+		return () => {
+			unsubscribe();
+		};
+	});
 </script>
 
 <div class="content-wrap">
 	<Box>
 		<content>
-			<slot />
+			{@render children?.()}
 		</content>
 	</Box>
 </div>

package/dist/marketing/Docs/Content/Content.svelte.d.ts

@@ -1,16 +1,5 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ContentProps = typeof __propDef.props;
-export type ContentEvents = typeof __propDef.events;
-export type ContentSlots = typeof __propDef.slots;
-export default class Content extends SvelteComponent<ContentProps, ContentEvents, ContentSlots> {
-}
-export {};
+declare const Content: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/marketing/Docs/Content/DocsImage.svelte

@@ -1,15 +1,23 @@
-<script>import { scale } from "svelte/transition";
-import { clickOutside } from "../../../components/index.js";
-export let src;
-export let alt;
-export let width = void 0;
-export let modalImageProps = {};
-let open = false;
+<script lang="ts">
+	import { scale } from 'svelte/transition';
+	import { clickOutside } from '../../../components/index.js';
+
+	interface Props {
+		src: string;
+		alt: string;
+		width?: undefined | number;
+		modalImageProps?: any;
+		[key: string]: any;
+	}
+
+	let { src, alt, width = undefined, modalImageProps = {}, ...rest }: Props = $props();
+
+	let open = $state(false);
 </script>
 
 <div class="wrap">
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-	<img {src} {alt} {...$$restProps} {width} on:click={() => (open = true)} class="preview" />
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<img {src} {alt} {...rest} {width} onclick={() => (open = true)} class="preview" />
 </div>
 
 {#if open}

package/dist/marketing/Docs/Content/DocsImage.svelte.d.ts

@@ -1,20 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        src: string;
-        alt: string;
-        width?: undefined | number;
-        modalImageProps?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DocsImageProps = typeof __propDef.props;
-export type DocsImageEvents = typeof __propDef.events;
-export type DocsImageSlots = typeof __propDef.slots;
-export default class DocsImage extends SvelteComponent<DocsImageProps, DocsImageEvents, DocsImageSlots> {
-}
-export {};
+declare const DocsImage: import("svelte").Component<{
+    [key: string]: any;
+    src: string;
+    alt: string;
+    width?: undefined | number;
+    modalImageProps?: any;
+}, {}, "">;
+type DocsImage = ReturnType<typeof DocsImage>;
+export default DocsImage;

package/dist/marketing/Docs/Docs.svelte

@@ -1,10 +1,16 @@
-<script>
+<script lang="ts">
 	import Sidebar from './Sidebar/Sidebar.svelte';
+	interface Props {
+		nav?: import('svelte').Snippet;
+		content?: import('svelte').Snippet;
+	}
+
+	let { nav, content }: Props = $props();
 </script>
 
 <div class="docs">
-	<slot name="nav" />
-	<slot name="content" />
+	{@render nav?.()}
+	{@render content?.()}
 	<Sidebar />
 </div>
 

package/dist/marketing/Docs/Docs.svelte.d.ts

@@ -1,29 +1,6 @@
-/** @typedef {typeof __propDef.props}  DocsProps */
-/** @typedef {typeof __propDef.events}  DocsEvents */
-/** @typedef {typeof __propDef.slots}  DocsSlots */
-export default class Docs extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    nav: {};
-    content: {};
-}> {
-}
-export type DocsProps = typeof __propDef.props;
-export type DocsEvents = typeof __propDef.events;
-export type DocsSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        nav: {};
-        content: {};
-    };
-};
-export {};
+declare const Docs: import("svelte").Component<{
+    nav?: import("svelte").Snippet;
+    content?: import("svelte").Snippet;
+}, {}, "">;
+type Docs = ReturnType<typeof Docs>;
+export default Docs;