@hyvor/design 0.0.67 → 1.0.3

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,52 +1,61 @@
-<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={color}
->
-    {#if toast.type === 'success'}
-        <IconCheckCircleFill />
-    {:else if toast.type === 'error'}
-        <IconXCircleFill />
-    {:else if toast.type === 'warning'}
-        <IconExclamationCircleFill />
-    {:else if toast.type === 'info'}
-        <IconInfoCircleFill />
-    {:else if toast.type === 'loading'}
-        <Loader size="small" />
-    {/if}
+<span style:color>
+	{#if toast.type === 'success'}
+		<IconCheckCircleFill />
+	{:else if toast.type === 'error'}
+		<IconXCircleFill />
+	{:else if toast.type === 'warning'}
+		<IconExclamationCircleFill />
+	{:else if toast.type === 'info'}
+		<IconInfoCircleFill />
+	{:else if toast.type === 'loading'}
+		<Loader size="small" />
+	{/if}
 </span>
 
 <style>
-    span {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        animation: scale 0.2s ease-in-out;
-    }
+	span {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		animation: scale 0.2s ease-in-out;
+	}
 
-    @keyframes scale {
-        0% {
-            transform: scale(0.5);
-            opacity: 0.4;
-        }
-        100% {
-            transform: scale(1);
-            opacity: 1;
-        }
-    }
-</style>
+	@keyframes scale {
+		0% {
+			transform: scale(0.5);
+			opacity: 0.4;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+</style>

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,48 +1,49 @@
-<script>import ToastIcon from "./ToastIcon.svelte";
-import { fade } from "svelte/transition";
-export let toast;
-</script>
+<script lang="ts">
+	import ToastIcon from './ToastIcon.svelte';
+	import type { Toast } from './toast.ts';
+	import { fade } from 'svelte/transition';
 
-<div 
-    class="toast" 
-    out:fade={{ duration: 200 }}
-    in:fade={{duration: 50}}
->
+	interface Props {
+		toast: Toast;
+	}
 
-    {#if toast.type !== 'blank'}
-        <div class="icon-wrap">
-            <ToastIcon {toast} />
-        </div>
-    {/if}
+	let { toast }: Props = $props();
+</script>
 
-    <div class="message-wrap">
-        {#if typeof toast.message === 'string' || toast.message === null}
-            {@html toast.message }
-        {:else}
-            <svelte:component this={toast.message} {toast} />
-        {/if}
-    </div>
+<div class="toast" out:fade={{ duration: 200 }} in:fade={{ duration: 50 }}>
+	{#if toast.type !== 'blank'}
+		<div class="icon-wrap">
+			<ToastIcon {toast} />
+		</div>
+	{/if}
 
+	<div class="message-wrap">
+		{#if typeof toast.message === 'string' || toast.message === null}
+			{@html toast.message}
+		{:else}
+			<toast.message {toast} />
+		{/if}
+	</div>
 </div>
 
 <style>
-    .toast {
-        margin-bottom: 10px;
-        box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
-        border-radius: var(--box-radius);
-        background-color: var(--box-background);
-        padding: 8px 20px;
-        display: flex;
-        align-items: center;
-        max-width: 350px;
-        pointer-events: initial;
-    }
-    .toast:first-child {
-        margin-top: 10px;
-    }
-    .icon-wrap {
-        margin-right: 8px;
-        display: inline-flex;
-        align-items: center;
-    }
-</style>
+	.toast {
+		margin-bottom: 10px;
+		box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
+		border-radius: var(--box-radius);
+		background-color: var(--box-background);
+		padding: 8px 20px;
+		display: flex;
+		align-items: center;
+		max-width: 350px;
+		pointer-events: initial;
+	}
+	.toast:first-child {
+		margin-top: 10px;
+	}
+	.icon-wrap {
+		margin-right: 8px;
+		display: inline-flex;
+		align-items: center;
+	}
+</style>

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,26 +1,28 @@
-<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">
-    {#each $toastStore as toast (toast.id)}
-        <ToastMessage {toast} />
-    {/each}
+	{#each $toastStore as toast (toast.id)}
+		<ToastMessage {toast} />
+	{/each}
 </div>
 
 <style>
-    #toasts-wrap {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 20000000;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-    }
-</style>
+	#toasts-wrap {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 20000000;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+	}
+</style>

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/cleaner.js

@@ -1,13 +1,13 @@
-import { onDestroy } from "svelte";
-import { default as toastService, toastStore } from "./toast.js";
+import { onDestroy } from 'svelte';
+import { default as toastService, toastStore } from './toast.js';
 const DEFAULT_DURATIONS = {
     success: 2000,
-    loading: Infinity,
+    loading: Infinity
 };
 export function useCleaner() {
     const timeouts = new Map();
-    const unsubscribe = toastStore.subscribe(toasts => {
-        toasts.forEach(toast => {
+    const unsubscribe = toastStore.subscribe((toasts) => {
+        toasts.forEach((toast) => {
             if (timeouts.has(toast.id)) {
                 return;
             }

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;
@@ -6,8 +6,8 @@ export interface Toast {
     duration?: number;
 }
 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 ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'blank';
+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/Toast/toast.js

@@ -1,4 +1,4 @@
-import { get, writable } from "svelte/store";
+import { get, writable } from 'svelte/store';
 const MAX_TOASTS = 10;
 export const toastStore = writable([]);
 const storeHelper = {
@@ -6,10 +6,10 @@ const storeHelper = {
         toastStore.update((toasts) => [toast, ...toasts].slice(0, MAX_TOASTS));
     },
     update: (toast) => {
-        toastStore.update((toasts) => toasts.map(t => t.id === toast.id ? { ...t, ...toast } : t));
+        toastStore.update((toasts) => toasts.map((t) => (t.id === toast.id ? { ...t, ...toast } : t)));
     },
     upsert: (toast) => {
-        if (get(toastStore).find(t => t.id === toast.id)) {
+        if (get(toastStore).find((t) => t.id === toast.id)) {
             storeHelper.update(toast);
         }
         else {
@@ -17,7 +17,7 @@ const storeHelper = {
         }
     },
     remove: (id) => {
-        toastStore.update((toasts) => toasts.filter(t => t.id !== id));
+        toastStore.update((toasts) => toasts.filter((t) => t.id !== id));
     }
 };
 let id = 0;
@@ -33,11 +33,11 @@ function createHandler(type) {
         return newId;
     };
 }
-const toast = createHandler("blank");
-toast.success = createHandler("success");
-toast.error = createHandler("error");
-toast.warning = createHandler("warning");
-toast.info = createHandler("info");
-toast.loading = createHandler("loading");
+const toast = createHandler('blank');
+toast.success = createHandler('success');
+toast.error = createHandler('error');
+toast.warning = createHandler('warning');
+toast.info = createHandler('info');
+toast.loading = createHandler('loading');
 toast.close = (id) => storeHelper.remove(id);
 export default toast;