@hyvor/design 0.0.68 → 1.0.5

package/dist/components/Textarea/Textarea.svelte

@@ -1,16 +1,38 @@
-<script>export let value = void 0;
-export let block = false;
-export let rows = 5;
-export let cols = 40;
-export let state = "default";
-export let textarea = {};
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props {
+		value?: any;
+		block?: boolean;
+		rows?: number;
+		cols?: number;
+		state?: 'default' | 'success' | 'warning' | 'error';
+		textarea?: HTMLTextAreaElement;
+		start?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		value = $bindable(undefined),
+		block = false,
+		rows = 5,
+		cols = 40,
+		state = 'default',
+		textarea = $bindable({} as HTMLTextAreaElement),
+		start,
+		end,
+		...rest
+	}: Props = $props();
 </script>
 
 <span
 	class="input-wrap state-{state}"
 	class:block
-	on:click={() => textarea.focus()}
-	on:keydown={(e) => {
+	onclick={() => textarea.focus()}
+	onkeydown={(e) => {
 		if (e.key === 'Enter') {
 			textarea.focus();
 		}
@@ -18,34 +40,34 @@ export let textarea = {};
 	role="textbox"
 	tabindex="0"
 >
-	{#if $$slots.start}
+	{#if start}
 		<span class="slot start">
-			<slot name="start" />
+			{@render start?.()}
 		</span>
 	{/if}
 
 	<textarea
 		bind:value
 		bind:this={textarea}
-		on:keyup
-		on:keydown
-		on:keypress
-		on:focus
-		on:blur
-		on:click
-		on:mouseover
-		on:mouseenter
-		on:mouseleave
-		on:change
-		on:input
+		onkeyup={bubble('keyup')}
+		onkeydown={bubble('keydown')}
+		onkeypress={bubble('keypress')}
+		onfocus={bubble('focus')}
+		onblur={bubble('blur')}
+		onclick={bubble('click')}
+		onmouseover={bubble('mouseover')}
+		onmouseenter={bubble('mouseenter')}
+		onmouseleave={bubble('mouseleave')}
+		onchange={bubble('change')}
+		oninput={bubble('input')}
 		{rows}
 		{cols}
-		{...$$restProps}
+		{...rest}
 	></textarea>
 
-	{#if $$slots.end}
+	{#if end}
 		<span class="slot end">
-			<slot name="end" />
+			{@render end?.()}
 		</span>
 	{/if}
 </span>

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

@@ -1,37 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: any;
-        block?: boolean | undefined;
-        rows?: number | undefined;
-        cols?: number | undefined;
-        state?: "default" | "error" | "success" | "warning" | undefined;
-        textarea?: HTMLTextAreaElement | undefined;
-    };
-    events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        change: Event;
-        input: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        start: {};
-        end: {};
-    };
-};
-export type TextareaProps = typeof __propDef.props;
-export type TextareaEvents = typeof __propDef.events;
-export type TextareaSlots = typeof __propDef.slots;
-export default class Textarea extends SvelteComponent<TextareaProps, TextareaEvents, TextareaSlots> {
-}
-export {};
+declare const Textarea: import("svelte").Component<{
+    [key: string]: any;
+    value?: any;
+    block?: boolean;
+    rows?: number;
+    cols?: number;
+    state?: "default" | "success" | "warning" | "error";
+    textarea?: HTMLTextAreaElement;
+    start?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+}, {}, "value" | "textarea">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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,7 @@
-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> {
+interface Props {
+    toast: Toast;
 }
-export {};
+declare const ToastIcon: import("svelte").Component<Props, {}, "">;
+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,7 @@
-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> {
+interface Props {
+    toast: Toast;
 }
-export {};
+declare const ToastMessage: import("svelte").Component<Props, {}, "">;
+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,7 @@
-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> {
+interface Props {
+    as?: string;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const Container: import("svelte").Component<Props, {}, "">;
+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>