@hyvor/design 0.0.66 → 0.0.68

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>;

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;

package/dist/components/Tooltip/Tooltip.svelte

@@ -55,100 +55,99 @@ onMount(() => {
 });
 </script>
 
-<div 
-    class="tooltip-wrap  {color}"
-    on:mouseenter={handleMouseEnter}
-    on:mouseleave={handleMouseLeave}
-    role="tooltip"
-    bind:this={wrap}
-    {...$$restProps}
+<div
+	class="tooltip-wrap {color}"
+	on:mouseenter={handleMouseEnter}
+	on:mouseleave={handleMouseLeave}
+	role="tooltip"
+	bind:this={wrap}
+	{...$$restProps}
 >
-    <slot />
+	<slot />
 
-    {#if !disabled && show}
-        <div 
-            class="tooltip {position}" 
-            style:max-width={maxWidth + 'px'}
-            bind:this={tooltip}
-            transition:fade={{duration: 100}}
-        >
-            {#if $$slots.tooltip}
-                <slot name="tooltip" />
-            {:else}
-                {text}
-            {/if}
-        </div>
-    {/if}
+	{#if !disabled && show}
+		<div
+			class="tooltip {position}"
+			style:max-width={maxWidth + 'px'}
+			bind:this={tooltip}
+			transition:fade={{ duration: 100 }}
+		>
+			{#if $$slots.tooltip}
+				<slot name="tooltip" />
+			{:else}
+				{text}
+			{/if}
+		</div>
+	{/if}
 </div>
 
 <style>
-    .tooltip-wrap {
-        display: inline-flex;
-        align-items: center;
-        position: relative;
+	.tooltip-wrap {
+		display: inline-flex;
+		align-items: center;
+		position: relative;
 
-        --local-bg: #24292f;
-        --local-color: #fff;
-    }
+		--local-bg: #24292f;
+		--local-color: #fff;
+	}
 
-    .tooltip-wrap.soft {
-        --local-bg: var(--accent-light);
-        --local-color: var(--accent);
-    }
+	.tooltip-wrap.soft {
+		--local-bg: var(--accent-light);
+		--local-color: var(--accent);
+	}
 
-    .tooltip-wrap.accent {
-        --local-bg: var(--accent);
-        --local-color: var(--accent-text);
-    }
+	.tooltip-wrap.accent {
+		--local-bg: var(--accent);
+		--local-color: var(--accent-text);
+	}
 
-    .tooltip-wrap.danger {
-        --local-bg: var(--red-dark);
-        --local-color: var(--text-white);
-    }
+	.tooltip-wrap.danger {
+		--local-bg: var(--red-dark);
+		--local-color: var(--text-white);
+	}
 
-    .tooltip {
-        position: fixed;
-        background-color: var(--local-bg);
-        color: var(--local-color);
-        padding: 8px 20px;
-        border-radius: 20px;
-        font-size: 14px;
-        z-index: 10000;
-    }
+	.tooltip {
+		position: fixed;
+		background-color: var(--local-bg);
+		color: var(--local-color);
+		padding: 8px 20px;
+		border-radius: 20px;
+		font-size: 14px;
+		z-index: 10000;
+	}
 
-    .tooltip:after {
-        content: '';
-        position: absolute;
-        border: 4px solid transparent;
-    }
-    .tooltip.top:after {
-        top: 100%;
-        border-top-color: var(--local-bg);
-        left: 50%;
-        transform: translateX(-50%);
-    }
+	.tooltip:after {
+		content: '';
+		position: absolute;
+		border: 4px solid transparent;
+	}
+	.tooltip.top:after {
+		top: 100%;
+		border-top-color: var(--local-bg);
+		left: 50%;
+		transform: translateX(-50%);
+	}
 
-    .tooltip.bottom:after {
-        bottom: 100%;
-        border-bottom-color: var(--local-bg);
-        left: 50%;
-        transform: translateX(-50%);
-    }
+	.tooltip.bottom:after {
+		bottom: 100%;
+		border-bottom-color: var(--local-bg);
+		left: 50%;
+		transform: translateX(-50%);
+	}
 
-    .tooltip.left:after {
-        left: 100%;
-        top: 50%;
-        transform: translateY(-50%);
-        border-left-color: var(--local-bg);
-        margin-left: -1px;
-    }
-
-    .tooltip.right:after {
-        right: 100%;
-        top: 50%;
-        transform: translateY(-50%);
-        border-right-color: var(--local-bg);
-        margin-right: -1px;
-    }
+	.tooltip.left:after {
+		left: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		border-left-color: var(--local-bg);
+		margin-left: -1px;
+	}
 
-</style>
+	.tooltip.right:after {
+		right: 100%;
+		top: 50%;
+		transform: translateY(-50%);
+		border-right-color: var(--local-bg);
+		margin-right: -1px;
+	}
+</style>

package/dist/components/directives/clickOutside.js

@@ -1,5 +1,5 @@
 export function clickOutside(node, input) {
-    const options = (typeof input === "function" ? { callback: input } : input);
+    const options = typeof input === 'function' ? { callback: input } : input;
     const enabled = options.enabled === undefined ? true : options.enabled;
     if (!enabled)
         return;
@@ -11,11 +11,11 @@ export function clickOutside(node, input) {
         }
     };
     setTimeout(() => {
-        document.addEventListener("click", handleClick);
+        document.addEventListener('click', handleClick);
     }, 0);
     return {
         destroy() {
-            document.removeEventListener("click", handleClick);
-        },
+            document.removeEventListener('click', handleClick);
+        }
     };
 }

package/dist/components/directives/debounce.d.ts

@@ -0,0 +1 @@
+export default function debounce(func: Function, wait: number): (this: any, ...args: any[]) => void;

package/dist/components/directives/debounce.js

@@ -0,0 +1,8 @@
+export default function debounce(func, wait) {
+    let timeout;
+    return function (...args) {
+        const context = this;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(context, args), wait);
+    };
+}

package/dist/components/index.d.ts

@@ -19,6 +19,7 @@ export { default as FormControl } from './FormControl/FormControl.svelte';
 export { default as InputGroup } from './FormControl/InputGroup.svelte';
 export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
+export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';

package/dist/components/index.js

@@ -19,6 +19,7 @@ export { default as FormControl } from './FormControl/FormControl.svelte';
 export { default as InputGroup } from './FormControl/InputGroup.svelte';
 export { default as Label } from './FormControl/Label.svelte';
 export { default as Validation } from './FormControl/Validation.svelte';
+export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { default as IconButton } from './IconButton/IconButton.svelte';
 export { default as Link } from './Link/Link.svelte';
 export { default as Loader } from './Loader/Loader.svelte';

package/dist/index.css

@@ -1,53 +1,51 @@
-
 /* font */
 :root {
-    font-family: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
+	font-family: 'Readex Pro', Avenir, Inter, Helvetica, Arial, sans-serif;
 	font-size: 16px;
-    font-weight: 400;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-text-size-adjust: 100%;
+	font-weight: 400;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
 }
 
 body {
-    background-color: var(--background, var(--accent-lightest));
-    color: var(--text);
-    margin: 0;
-    padding: 0;
+	background-color: var(--background, var(--accent-lightest));
+	color: var(--text);
+	margin: 0;
+	padding: 0;
 }
 
-button, a {
-    background-color: transparent;
-    border: none;
-    color: inherit;
-    appearance: none;
-    padding: 0;
-    text-decoration: none;
-    cursor: pointer;
-    font-family: inherit;
-    font-size: inherit;
+button,
+a {
+	background-color: transparent;
+	border: none;
+	color: inherit;
+	appearance: none;
+	padding: 0;
+	text-decoration: none;
+	cursor: pointer;
+	font-family: inherit;
+	font-size: inherit;
 }
 
 :focus-visible {
-    outline: 2px solid var(--accent-light);
+	outline: 2px solid var(--accent-light);
 }
 
-
 * {
-    box-sizing: border-box;
+	box-sizing: border-box;
 }
 
-
 .hds-box {
-    box-shadow: var(--box-shadow);
-    border-radius: var(--box-radius);
-    background-color: var(--box-background);
+	box-shadow: var(--box-shadow);
+	border-radius: var(--box-radius);
+	background-color: var(--box-background);
 }
 
 .hds-container {
-    width: 1000px;
-    max-width: 100%;
-    padding: 0 15px;
-    margin: auto;
-}
+	width: 1000px;
+	max-width: 100%;
+	padding: 0 15px;
+	margin: auto;
+}

package/dist/marketing/Container/Container.svelte

@@ -2,14 +2,14 @@
 </script>
 
 <svelte:element this={as} class="container">
-    <slot />
+	<slot />
 </svelte:element>
 
 <style>
-    .container {
-        width: 1000px;
-        max-width: 100%;
-        padding: 0 15px;
-        margin: auto;
-    }
-</style>
+	.container {
+		width: 1000px;
+		max-width: 100%;
+		padding: 0 15px;
+		margin: auto;
+	}
+</style>

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

@@ -29,11 +29,11 @@ onMount(() => {
 </script>
 
 <div class="content-wrap">
-    <Box>
-        <content>
-            <slot />
-        </content>
-    </Box>
+	<Box>
+		<content>
+			<slot />
+		</content>
+	</Box>
 </div>
 
 <style>.content-wrap {
@@ -48,7 +48,8 @@ content {
   padding: 30px 50px;
 }
 
-content :global(p), content :global(li) {
+content :global(p),
+content :global(li) {
   line-height: var(--line-height-content);
 }
 
@@ -161,4 +162,4 @@ content :global(h6 a:not(.heading-anchor-link)) {
   content {
     padding: 20px 25px;
   }
-}</style>
+}</style>

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

@@ -8,72 +8,62 @@ let open = 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} {...$$restProps} {width} on:click={() => (open = true)} class="preview" />
 </div>
 
 {#if open}
-    <div 
-        class="modal"
-    >
-        <img 
-            {src} 
-            {alt}
-            {...modalImageProps}
-            use:clickOutside={{
-                callback: () => open = false
-            }}
-            transition:scale={{ duration: 100, opacity: 0.5, start: 0.95 }}
-        />
-    </div>
+	<div class="modal">
+		<img
+			{src}
+			{alt}
+			{...modalImageProps}
+			use:clickOutside={{
+				callback: () => (open = false)
+			}}
+			transition:scale={{ duration: 100, opacity: 0.5, start: 0.95 }}
+		/>
+	</div>
 {/if}
 
 <style>
-    img.preview {
-        display: block;
-        max-width: 100%;
-        max-height: 100%;
-        margin: 0 auto;
-        border-radius: 5px;
-        box-shadow: 0 0 10px rgba(0,0,0,0.2);
-        cursor: pointer;
-        transition: .1s box-shadow;
-    }
-    img.preview:hover {
-        box-shadow: 0 0 15px rgba(0,0,0,0.3);
-    }
+	img.preview {
+		display: block;
+		max-width: 100%;
+		max-height: 100%;
+		margin: 0 auto;
+		border-radius: 5px;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+		cursor: pointer;
+		transition: 0.1s box-shadow;
+	}
+	img.preview:hover {
+		box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+	}
 
-    .modal {
-        position: fixed;
-        z-index: 1000000;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0,0,0,0.5);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 40px;
-        overflow: hidden;
-    }
-    .modal-content {
-        min-height: 0;
-    }
-    .modal img {
-        max-width: 100%;
-        max-height: 100%;
-        border-radius: 5px;
-    }
-    .wrap {
-        padding: 25px 0;
-    }
-
-</style>
+	.modal {
+		position: fixed;
+		z-index: 1000000;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 40px;
+		overflow: hidden;
+	}
+	.modal-content {
+		min-height: 0;
+	}
+	.modal img {
+		max-width: 100%;
+		max-height: 100%;
+		border-radius: 5px;
+	}
+	.wrap {
+		padding: 25px 0;
+	}
+</style>

package/dist/marketing/Docs/Docs.svelte

@@ -1,31 +1,28 @@
 <script>
-	import Sidebar from "./Sidebar/Sidebar.svelte";
+	import Sidebar from './Sidebar/Sidebar.svelte';
 </script>
-<div class="docs">
 
-    <slot name="nav" />
-    <slot name="content" />
-    <Sidebar />
+<div class="docs">
+	<slot name="nav" />
+	<slot name="content" />
+	<Sidebar />
 </div>
 
 <style>
+	.docs {
+		display: flex;
+		flex-direction: row;
+		margin: auto;
+		width: 1150px;
+		max-width: 100%;
+		padding-bottom: 40px;
+		/* min-height: calc(100vh - var(--header-height)); */
+	}
 
-    .docs {
-        display: flex;
-        flex-direction: row;
-        margin: auto;
-        width: 1150px;
-        max-width: 100%;
-        padding-bottom: 40px;
-        /* min-height: calc(100vh - var(--header-height)); */
-    }
-
-
-    @media (max-width: 992px) {
-        .docs {
-            flex-direction: column;
-            width: 100%;
-        }
-    }
-
-</style>
+	@media (max-width: 992px) {
+		.docs {
+			flex-direction: column;
+			width: 100%;
+		}
+	}
+</style>