@hyvor/design 0.0.67 → 0.0.68

package/dist/components/TabNav/TabNavItem.svelte

@@ -9,49 +9,42 @@ function handleClick() {
 }
 </script>
 
-<button 
-    class="tab"
-    class:active={isActive}
-    on:click={handleClick}
-    {...$$restProps}
-
-    on:click
->
-    {#if $$slots.start}
-        <span class="start">
-            <slot name="start" />
-        </span>
-    {/if}
-    <slot />
-    {#if $$slots.end}
-        <span class="end">
-            <slot name="end" />
-        </span>
-    {/if}
+<button class="tab" class:active={isActive} on:click={handleClick} {...$$restProps} on:click>
+	{#if $$slots.start}
+		<span class="start">
+			<slot name="start" />
+		</span>
+	{/if}
+	<slot />
+	{#if $$slots.end}
+		<span class="end">
+			<slot name="end" />
+		</span>
+	{/if}
 </button>
 
 <style>
-    .tab {
-        position: relative;
-        padding: 10px 15px;
-        border-bottom: 3px solid #f1f1f1;
-        cursor: pointer;
-        font-weight: 600;
-        display: flex;
-        align-items: center;
-    }
-    .tab.active {
-        border-bottom-color: var(--accent);
-        color: var(--accent);
-    }
-    .start {
-        display: inline-flex;
-        margin-right: 7px;
-        align-items: center;
-    }
-    .end {
-        display: inline-flex;
-        margin-left: 4px;
-        align-items: center;
-    }
-</style>
+	.tab {
+		position: relative;
+		padding: 10px 15px;
+		border-bottom: 3px solid #f1f1f1;
+		cursor: pointer;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+	}
+	.tab.active {
+		border-bottom-color: var(--accent);
+		color: var(--accent);
+	}
+	.start {
+		display: inline-flex;
+		margin-right: 7px;
+		align-items: center;
+	}
+	.end {
+		display: inline-flex;
+		margin-left: 4px;
+		align-items: center;
+	}
+</style>

package/dist/components/Table/Table.svelte

@@ -3,9 +3,12 @@ export let hover = false;
 const hoverCss = hover ? "--local-hover-color: var(--hover);" : "";
 </script>
 
-<div class="table" style="
+<div
+	class="table"
+	style="
     --local-columns: {columns};
     {hoverCss}
-">
-    <slot />
-</div>
+"
+>
+	<slot />
+</div>

package/dist/components/Table/TableRow.svelte

@@ -1,28 +1,28 @@
 <script>export let head = false;
 </script>
 
+<div class:head {...$$props}>
+	<slot />
+</div>
+
 <style>
-    div {
-        display: grid;
-        padding: 8px 18px;
-        border-radius: 20px;
-        align-items: flex-start;
-        grid-template-columns: var(--local-columns);
-    }
-    div.head {
-        font-weight: 600;
-        background: var(--accent-lightest);
-        margin-bottom: 5px;
-    }
-    div:hover:not(.head) {
-        background-color: var(--local-hover-color);
-    }
-    div > :global(*) {
-        padding-right: 5px;
-        word-wrap: break-word;
-    }
+	div {
+		display: grid;
+		padding: 8px 18px;
+		border-radius: 20px;
+		align-items: flex-start;
+		grid-template-columns: var(--local-columns);
+	}
+	div.head {
+		font-weight: 600;
+		background: var(--accent-lightest);
+		margin-bottom: 5px;
+	}
+	div:hover:not(.head) {
+		background-color: var(--local-hover-color);
+	}
+	div > :global(*) {
+		padding-right: 5px;
+		word-wrap: break-word;
+	}
 </style>
-
-<div class:head={head} {...$$props}>
-    <slot />
-</div>

package/dist/components/Tag/Tag.svelte

@@ -13,47 +13,39 @@ if (outline) {
 let tabindex = interactive ? 0 : void 0;
 </script>
 
-
 <svelte:element
-    this={as}
-    role={interactive ? 'button' : undefined}
-    tabindex={tabindex}
-    class="button color-{color} style-{styleClass} size-{size}"
-    class:interactive
-    class:has-start={$$slots.start}
-    class:has-end={$$slots.end}
-    {...$$restProps}
-
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
-    
-    style:background-color={bg}
-    style:color={fg}
+	this={as}
+	role={interactive ? 'button' : undefined}
+	{tabindex}
+	class="button color-{color} style-{styleClass} size-{size}"
+	class:interactive
+	class:has-start={$$slots.start}
+	class:has-end={$$slots.end}
+	{...$$restProps}
+	on:keyup
+	on:keydown
+	on:keypress
+	on:focus
+	on:blur
+	on:click
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:change
+	style:background-color={bg}
+	style:color={fg}
 >
+	{#if $$slots.start}
+		<slot name="start" />
+	{/if}
 
-    {#if $$slots.start}
-        <slot name="start" />
-    {/if}
-
-    <slot />
-
-    {#if $$slots.end}
-        <slot name="end" />
-    {/if}
+	<slot />
 
+	{#if $$slots.end}
+		<slot name="end" />
+	{/if}
 </svelte:element>
 
-
-
-
 <style>span {
   vertical-align: middle;
   border-radius: 20px;
@@ -183,4 +175,4 @@ span.style-outline-fill.color-orange {
   opacity: 0.5 !important;
   cursor: not-allowed;
   box-shadow: none !important;
-}</style>
+}</style>

package/dist/components/Text/Text.svelte

@@ -4,28 +4,21 @@ export let normal = false;
 export let bold = false;
 </script>
 
-<span
-    class:light
-    class:small
-    class:normal
-    class:bold
-
-    {...$$restProps}
->
-    <slot />
+<span class:light class:small class:normal class:bold {...$$restProps}>
+	<slot />
 </span>
 
 <style>
-    span.light {
-        color: var(--text-light);
-    }
-    span.small {
-        font-size: 0.8em;
-    }
-    span.normal {
-        font-weight: 400;
-    }
-    span.bold {
-        font-weight: 600;
-    }
-</style>
+	span.light {
+		color: var(--text-light);
+	}
+	span.small {
+		font-size: 0.8em;
+	}
+	span.normal {
+		font-weight: 400;
+	}
+	span.bold {
+		font-weight: 600;
+	}
+</style>

package/dist/components/TextInput/TextInput.svelte

@@ -6,34 +6,34 @@ export let input = {};
 </script>
 
 <label class="input-wrap state-{state} size-{size}" class:block>
-    {#if $$slots.start}
-        <span class="slot start">
-            <slot name="start" />
-        </span>
-    {/if}
+	{#if $$slots.start}
+		<span class="slot start">
+			<slot name="start" />
+		</span>
+	{/if}
 
-    <input
-        {...$$restProps}
-        bind:value
-        bind:this={input}
-        on:keyup
-        on:keydown
-        on:keypress
-        on:focus
-        on:blur
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-        on:change
-        on:input
-    />
+	<input
+		{...$$restProps}
+		bind:value
+		bind:this={input}
+		on:keyup
+		on:keydown
+		on:keypress
+		on:focus
+		on:blur
+		on:click
+		on:mouseover
+		on:mouseenter
+		on:mouseleave
+		on:change
+		on:input
+	/>
 
-    {#if $$slots.end}
-        <span class="slot end">
-            <slot name="end" />
-        </span>
-    {/if}
+	{#if $$slots.end}
+		<span class="slot end">
+			<slot name="end" />
+		</span>
+	{/if}
 </label>
 
 <style>.slot {

package/dist/components/Textarea/Textarea.svelte

@@ -7,47 +7,47 @@ export let textarea = {};
 </script>
 
 <span
-    class="input-wrap state-{state}"
-    class:block
-    on:click={() => textarea.focus()}
-    on:keydown={(e) => {
-        if (e.key === "Enter") {
-            textarea.focus();
-        }
-    }}
-    role="textbox"
-    tabindex="0"
+	class="input-wrap state-{state}"
+	class:block
+	on:click={() => textarea.focus()}
+	on:keydown={(e) => {
+		if (e.key === 'Enter') {
+			textarea.focus();
+		}
+	}}
+	role="textbox"
+	tabindex="0"
 >
-    {#if $$slots.start}
-        <span class="slot start">
-            <slot name="start" />
-        </span>
-    {/if}
+	{#if $$slots.start}
+		<span class="slot start">
+			<slot name="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
-        {rows}
-        {cols}
-        {...$$restProps}
-    ></textarea>
+	<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
+		{rows}
+		{cols}
+		{...$$restProps}
+	></textarea>
 
-    {#if $$slots.end}
-        <span class="slot end">
-            <slot name="end" />
-        </span>
-    {/if}
+	{#if $$slots.end}
+		<span class="slot end">
+			<slot name="end" />
+		</span>
+	{/if}
 </span>
 
 <style>.input-wrap {

package/dist/components/Toast/ToastIcon.svelte

@@ -15,38 +15,36 @@ $:
   }[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/ToastMessage.svelte

@@ -3,46 +3,40 @@ import { fade } from "svelte/transition";
 export let toast;
 </script>
 
-<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}
-            <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}
+			<svelte:component this={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/ToastProvider.svelte

@@ -5,22 +5,22 @@ 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/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 { SvelteComponent } from 'svelte';
 export interface Toast {
     id: number;
     type: ToastType;
@@ -6,7 +6,7 @@ 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 ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'blank';
 export type ToastMessageType = typeof SvelteComponent<Record<string, any>> | string | null;
 declare function createHandler(type: ToastType): (message: ToastMessageType, options?: Partial<Toast>) => number;
 type ToastFunctionSignature = ReturnType<typeof createHandler>;