@hyvor/design 0.0.68 → 1.0.3

package/dist/components/Loader/Loader.svelte

@@ -1,42 +1,69 @@
-<script>import { IconCheckCircleFill, IconXCircleFill } from "@hyvor/icons";
-export let block = false;
-export let full = false;
-export let padding = "medium";
-export let size = "medium";
-export let state = "loading";
-export let duration = 2e3;
-$: {
-  if (duration && (state === "success" || state === "error")) {
-    setTimeout(() => {
-      state = "none";
-    }, duration);
-  }
-}
-export let color = "var(--accent)";
-export let colorTrack = "var(--accent-lightest)";
-export let invert = false;
-if (invert) {
-  const colorCopy = color;
-  color = colorTrack;
-  colorTrack = colorCopy;
-}
-const sizes = {
-  small: 16,
-  medium: 24,
-  large: 32
-};
-size = typeof size === "number" ? size : sizes[size];
-const strokeWidth = size >= 32 ? 5 : size >= 24 ? 4 : size >= 16 ? 3 : 2;
-const r = size / 2 - strokeWidth / 2;
-const strokeDashArray = 2 * Math.PI * r;
-const strokeDashOffset = strokeDashArray - strokeDashArray * 0.25;
-const paddings = {
-  none: 0,
-  small: 60,
-  medium: 150,
-  large: 250
-};
-padding = typeof padding === "number" ? padding : paddings[padding];
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import { IconCheckCircleFill, IconXCircleFill } from '@hyvor/icons';
+
+	interface Props {
+		block?: boolean;
+		full?: boolean;
+		padding?: 'none' | 'small' | 'medium' | 'large' | number;
+		size?: 'small' | 'medium' | 'large' | number;
+		state?: 'loading' | 'success' | 'error' | 'none';
+		duration?: null | number;
+		color?: string;
+		colorTrack?: string;
+		invert?: boolean;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		block = false,
+		full = false,
+		padding = $bindable('medium'),
+		size = $bindable('medium'),
+		state = $bindable('loading'),
+		duration = 2000,
+		color = $bindable('var(--accent)'),
+		colorTrack = $bindable('var(--accent-lightest)'),
+		invert = false,
+		children,
+		...rest
+	}: Props = $props();
+
+	if (invert) {
+		const colorCopy = color;
+		color = colorTrack;
+		colorTrack = colorCopy;
+	}
+
+	const sizes = {
+		small: 16,
+		medium: 24,
+		large: 32
+	};
+
+	size = typeof size === 'number' ? size : sizes[size];
+
+	const strokeWidth = size >= 32 ? 5 : size >= 24 ? 4 : size >= 16 ? 3 : 2;
+	const r = size / 2 - strokeWidth / 2;
+	const strokeDashArray = 2 * Math.PI * r;
+	const strokeDashOffset = strokeDashArray - strokeDashArray * 0.25;
+
+	const paddings = {
+		none: 0,
+		small: 60,
+		medium: 150,
+		large: 250
+	};
+	padding = typeof padding === 'number' ? padding : paddings[padding];
+	run(() => {
+		if (duration && (state === 'success' || state === 'error')) {
+			setTimeout(() => {
+				state = 'none';
+			}, duration);
+		}
+	});
 </script>
 
 <div
@@ -47,7 +74,7 @@ padding = typeof padding === "number" ? padding : paddings[padding];
 	class:error={state === 'error'}
 	style:--local-size={size + 'px'}
 	style:padding={block ? padding + 'px' : undefined}
-	{...$$restProps}
+	{...rest}
 >
 	{#if state !== 'none'}
 		<span class="loader-wrap">
@@ -87,9 +114,9 @@ padding = typeof padding === "number" ? padding : paddings[padding];
 		</span>
 	{/if}
 
-	{#if $$slots.default}
+	{#if children}
 		<div class="message">
-			<slot></slot>
+			{@render children?.()}
 		</div>
 	{/if}
 </div>

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

@@ -1,27 +1,15 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        block?: boolean | undefined;
-        full?: boolean | undefined;
-        padding?: number | "none" | "small" | "medium" | "large" | undefined;
-        size?: number | "small" | "medium" | "large" | undefined;
-        state?: "none" | "error" | "loading" | "success" | undefined;
-        duration?: number | null | undefined;
-        color?: string | undefined;
-        colorTrack?: string | undefined;
-        invert?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type LoaderProps = typeof __propDef.props;
-export type LoaderEvents = typeof __propDef.events;
-export type LoaderSlots = typeof __propDef.slots;
-export default class Loader extends SvelteComponent<LoaderProps, LoaderEvents, LoaderSlots> {
-}
-export {};
+declare const Loader: import("svelte").Component<{
+    [key: string]: any;
+    block?: boolean;
+    full?: boolean;
+    padding?: "none" | "small" | "medium" | "large" | number;
+    size?: "small" | "medium" | "large" | number;
+    state?: "loading" | "success" | "error" | "none";
+    duration?: null | number;
+    color?: string;
+    colorTrack?: string;
+    invert?: boolean;
+    children?: import("svelte").Snippet;
+}, {}, "size" | "color" | "padding" | "state" | "colorTrack">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;

package/dist/components/Modal/ConfirmModalProvider.svelte

@@ -1,20 +1,27 @@
-<script>import Modal from "./Modal.svelte";
-import { confirmStore } from "./confirm.js";
-import Button from "./../Button/Button.svelte";
-import ButtonGroup from "./../Button/ButtonGroup.svelte";
-let show = true;
-function handleCancel() {
-  $confirmStore.onCancel();
-}
-function handleConfirm() {
-  $confirmStore.onConfirm();
-}
-$: {
-  if (!show) {
-    handleCancel();
-    show = true;
-  }
-}
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import Modal from './Modal.svelte';
+	import { confirmStore } from './confirm.js';
+	import Button from './../Button/Button.svelte';
+	import ButtonGroup from './../Button/ButtonGroup.svelte';
+
+	let show = $state(true);
+
+	function handleCancel() {
+		$confirmStore!.onCancel();
+	}
+
+	function handleConfirm() {
+		$confirmStore!.onConfirm();
+	}
+
+	run(() => {
+		if (!show) {
+			handleCancel();
+			show = true;
+		}
+	});
 </script>
 
 {#if $confirmStore}
@@ -22,10 +29,11 @@ $: {
 		{#if typeof $confirmStore.content === 'string'}
 			{$confirmStore.content}
 		{:else}
-			<svelte:component this={$confirmStore.content} {...$confirmStore.contentProps || {}} />
+			{@const SvelteComponent = $confirmStore.content}
+			<SvelteComponent {...$confirmStore.contentProps || {}} />
 		{/if}
 
-		<svelte:fragment slot="footer">
+		{#snippet footer()}
 			<ButtonGroup>
 				<Button variant="invisible" on:click={handleCancel}>
 					{$confirmStore.cancelText || 'Cancel'}
@@ -34,6 +42,6 @@ $: {
 					{$confirmStore.confirmText || 'Confirm'}
 				</Button>
 			</ButtonGroup>
-		</svelte:fragment>
+		{/snippet}
 	</Modal>
 {/if}

package/dist/components/Modal/ConfirmModalProvider.svelte.d.ts

@@ -1,14 +1,3 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ConfirmModalProviderProps = typeof __propDef.props;
-export type ConfirmModalProviderEvents = typeof __propDef.events;
-export type ConfirmModalProviderSlots = typeof __propDef.slots;
-export default class ConfirmModalProvider extends SvelteComponent<ConfirmModalProviderProps, ConfirmModalProviderEvents, ConfirmModalProviderSlots> {
-}
-export {};
+declare const ConfirmModalProvider: import("svelte").Component<Record<string, never>, {}, "">;
+type ConfirmModalProvider = ReturnType<typeof ConfirmModalProvider>;
+export default ConfirmModalProvider;

package/dist/components/Modal/Modal.svelte

@@ -1,42 +1,71 @@
-<script>import ModalFooter from "./ModalFooter.svelte";
-import { clickOutside } from "../directives/clickOutside.js";
-import { IconX } from "@hyvor/icons";
-import IconButton from "./../IconButton/IconButton.svelte";
-import { fade, scale } from "svelte/transition";
-import { onMount, tick } from "svelte";
-import Loader from "../Loader/Loader.svelte";
-import { createEventDispatcher } from "svelte";
-export let show = false;
-export let title = "";
-export let size = "medium";
-export let id = "modal";
-export let role = "alertdialog";
-export let closeOnOutsideClick = true;
-export let closeOnEscape = true;
-export let loading = false;
-const dispatch = createEventDispatcher();
-const titleId = id + "-title";
-const descId = id + "-desc";
-export let footer = null;
-let wrapEl;
-let innerEl;
-function handleCancel() {
-  show = false;
-  dispatch("cancel");
-}
-async function setFlex() {
-  await tick();
-  if (!wrapEl || !innerEl)
-    return;
-  if (innerEl.offsetHeight > wrapEl.offsetHeight - 60) {
-    wrapEl.style.alignItems = "flex-start";
-  } else {
-    wrapEl.style.alignItems = "center";
-  }
-}
-onMount(setFlex);
-$:
-  show, setFlex();
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
+<script lang="ts">
+	import ModalFooter from './ModalFooter.svelte';
+	import type { Footer } from './modal-types.js';
+	import { clickOutside } from '../directives/clickOutside.js';
+	import { IconX } from '@hyvor/icons';
+	import IconButton from './../IconButton/IconButton.svelte';
+	import { fade, scale } from 'svelte/transition';
+	import { onMount, tick, type Snippet } from 'svelte';
+	import Loader from '../Loader/Loader.svelte';
+	import { createEventDispatcher } from 'svelte';
+
+	interface Props {
+		show?: boolean;
+		title?: string | Snippet;
+		size?: 'small' | 'medium' | 'large';
+		id?: string;
+		role?: 'dialog' | 'alertdialog';
+		closeOnOutsideClick?: boolean;
+		closeOnEscape?: boolean;
+		loading?: boolean | string;
+
+		footer?: Footer | Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		show = $bindable(false),
+		title,
+		size = 'medium',
+		id = 'modal',
+		role = 'alertdialog',
+		closeOnOutsideClick = true,
+		closeOnEscape = true,
+		loading = false,
+		footer,
+		children
+	}: Props = $props();
+
+	const dispatch = createEventDispatcher();
+
+	const titleId = id + '-title';
+	const descId = id + '-desc';
+
+	let wrapEl: HTMLDivElement | undefined = $state();
+	let innerEl: HTMLDivElement | undefined = $state();
+
+	function handleCancel() {
+		show = false;
+		dispatch('cancel');
+	}
+
+	async function setFlex() {
+		await tick();
+		if (!wrapEl || !innerEl) return;
+		if (innerEl.offsetHeight > wrapEl.offsetHeight - 60) {
+			wrapEl.style.alignItems = 'flex-start';
+		} else {
+			wrapEl.style.alignItems = 'center';
+		}
+	}
+
+	onMount(setFlex);
+
+	$effect(() => {
+		show;
+		setFlex();
+	});
 </script>
 
 <svelte:window
@@ -65,10 +94,10 @@ $:
 		>
 			<div class="header">
 				<div class="title" id={titleId}>
-					{#if $$slots.title}
-						<slot name="title" />
-					{:else}
+					{#if typeof title === 'string'}
 						<span>{title}</span>
+					{:else}
+						{@render title?.()}
 					{/if}
 				</div>
 
@@ -80,15 +109,15 @@ $:
 			</div>
 
 			<div class="content" id={descId}>
-				<slot />
+				{@render children?.()}
 			</div>
 
-			{#if $$slots.footer || footer}
+			{#if footer}
 				<div class="footer">
-					{#if $$slots.footer}
-						<slot name="footer" />
-					{:else if footer}
+					{#if typeof footer === 'object'}
 						<ModalFooter {footer} bind:show on:cancel on:confirm />
+					{:else}
+						{@render footer()}
 					{/if}
 				</div>
 			{/if}

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

@@ -1,32 +1,34 @@
-import { SvelteComponent } from "svelte";
 import type { Footer } from './modal-types.js';
-declare const __propDef: {
-    props: {
-        show?: boolean | undefined;
-        title?: string | undefined;
-        size?: "small" | "medium" | "large" | undefined;
-        id?: string | undefined;
-        role?: "dialog" | "alertdialog" | undefined;
-        closeOnOutsideClick?: boolean | undefined;
-        closeOnEscape?: boolean | undefined;
-        loading?: string | boolean | undefined;
-        footer?: Footer | null | undefined;
+import { type Snippet } from 'svelte';
+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: {
-        cancel: CustomEvent<any>;
-        confirm: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        default: {};
-        footer: {};
-    };
-};
-export type ModalProps = typeof __propDef.props;
-export type ModalEvents = typeof __propDef.events;
-export type ModalSlots = typeof __propDef.slots;
-export default class Modal extends SvelteComponent<ModalProps, ModalEvents, ModalSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Modal: $$__sveltets_2_IsomorphicComponent<{
+    show?: boolean;
+    title?: string | Snippet;
+    size?: "small" | "medium" | "large";
+    id?: string;
+    role?: "dialog" | "alertdialog";
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    loading?: boolean | string;
+    footer?: Footer | Snippet;
+    children?: Snippet;
+}, {
+    cancel: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "show">;
+type Modal = InstanceType<typeof Modal>;
+export default Modal;

package/dist/components/Modal/ModalFooter.svelte

@@ -1,9 +1,17 @@
-<script>import { createEventDispatcher } from "svelte";
-import Button from "../Button/Button.svelte";
-import ButtonGroup from "../Button/ButtonGroup.svelte";
-export let show;
-export let footer;
-const dispatch = createEventDispatcher();
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import Button from '../Button/Button.svelte';
+	import ButtonGroup from '../Button/ButtonGroup.svelte';
+	import type { Footer } from './modal-types.ts';
+
+	interface Props {
+		show: boolean;
+		footer: Footer;
+	}
+
+	let { show = $bindable(), footer }: Props = $props();
+
+	const dispatch = createEventDispatcher();
 </script>
 
 <ButtonGroup>

package/dist/components/Modal/ModalFooter.svelte.d.ts

@@ -1,21 +1,25 @@
-import { SvelteComponent } from "svelte";
 import type { Footer } from './modal-types.ts';
-declare const __propDef: {
-    props: {
-        show: boolean;
-        footer: Footer;
+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: {
-        cancel: CustomEvent<any>;
-        confirm: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ModalFooterProps = typeof __propDef.props;
-export type ModalFooterEvents = typeof __propDef.events;
-export type ModalFooterSlots = typeof __propDef.slots;
-export default class ModalFooter extends SvelteComponent<ModalFooterProps, ModalFooterEvents, ModalFooterSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ModalFooter: $$__sveltets_2_IsomorphicComponent<{
+    show: boolean;
+    footer: Footer;
+}, {
+    cancel: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "show">;
+type ModalFooter = InstanceType<typeof ModalFooter>;
+export default ModalFooter;

package/dist/components/Modal/confirm.d.ts

@@ -1,7 +1,7 @@
-import { type ComponentType } from 'svelte';
+import { type Component } from 'svelte';
 interface ConfirmConfig {
     title: string;
-    content: string | ComponentType;
+    content: string | Component<any>;
     contentProps?: Record<string, any>;
     confirmText?: string;
     cancelText?: string;

package/dist/components/Modal/modal-types.d.ts

@@ -8,11 +8,11 @@ export interface Footer {
      */
     cancel?: false | {
         text?: string;
-        props?: ComponentProps<Button>;
+        props?: ComponentProps<typeof Button>;
     };
     confirm?: false | {
         danger?: boolean;
         text?: string;
-        props?: ComponentProps<Button>;
+        props?: ComponentProps<typeof Button>;
     };
 }

package/dist/components/NavLink/NavLink.svelte

@@ -1,36 +1,49 @@
-<script>export let href;
-export let active = false;
-export let disabled = false;
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	type Props = {
+		href: string;
+		active?: boolean;
+		disabled?: boolean;
+		start?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		[key: string]: any;
+	};
+
+	let { href, active = false, disabled = false, start, children, end }: Props = $props();
 </script>
 
 <a
 	{href}
 	class:active
 	class:disabled
-	on:keyup
-	on:keydown
-	on:keypress
-	on:focus
-	on:blur
-	on:click
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:change
+	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')}
 >
-	{#if $$slots.start}
+	{#if start}
 		<span class="start">
-			<slot name="start" />
+			{@render start?.()}
 		</span>
 	{/if}
 
 	<span class="middle">
-		<slot />
+		{@render children?.()}
 	</span>
 
-	{#if $$slots.end}
+	{#if end}
 		<span class="end">
-			<slot name="end" />
+			{@render end?.()}
 		</span>
 	{/if}
 </a>