@hyvor/design 0.0.67 → 1.0.3

package/dist/components/Tooltip/Tooltip.svelte

@@ -1,154 +1,169 @@
-<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 
-    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 />
-
-    {#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}
+	<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}
 </div>
 
 <style>
-    .tooltip-wrap {
-        display: inline-flex;
-        align-items: center;
-        position: relative;
-
-        --local-bg: #24292f;
-        --local-color: #fff;
-    }
-
-    .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.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: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.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;
-    }
-
-</style>
+	.tooltip-wrap {
+		display: inline-flex;
+		align-items: center;
+		position: relative;
+
+		--local-bg: #24292f;
+		--local-color: #fff;
+	}
+
+	.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.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: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.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;
+	}
+</style>

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

@@ -1,15 +1,21 @@
-<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>
-    .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/Container/Container.svelte.d.ts

@@ -1,18 +1,6 @@
-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> {
-}
-export {};
+declare const Container: import("svelte").Component<{
+    as?: string;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;