@hyvor/design 0.0.67 → 1.0.3

package/dist/components/Dark/DarkToggle.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 DarkToggleProps = typeof __propDef.props;
-export type DarkToggleEvents = typeof __propDef.events;
-export type DarkToggleSlots = typeof __propDef.slots;
-export default class DarkToggle extends SvelteComponent<DarkToggleProps, DarkToggleEvents, DarkToggleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const DarkToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DarkToggle = InstanceType<typeof DarkToggle>;
+export default DarkToggle;

package/dist/components/Divider/Divider.svelte

@@ -1,14 +1,24 @@
-<script>export let color = "var(--accent-lightest)";
-export let height = 1;
-export let width = 100;
-export let margin = 0;
-export let align = "center";
-</script>
+<script lang="ts">
+	interface Props {
+		color?: string;
+		height?: number;
+		width?: number;
+		margin?: number;
+		align?: 'start' | 'center' | 'end';
+	}
 
+	let {
+		color = 'var(--accent-lightest)',
+		height = 1,
+		width = 100,
+		margin = 0,
+		align = 'center'
+	}: Props = $props();
+</script>
 
 <div
-    class="line"
-    style="
+	class="line"
+	style="
     background-color: {color};
         height: {height}px;
         width: {width}%;
@@ -18,10 +28,10 @@ export let align = "center";
         margin-right: {align === 'center' ? 'auto' : 0};
         display: flex;
     "
-/>
+></div>
 
 <style>
-    .line {
-        display: block;
-    }
-</style>
+	.line {
+		display: block;
+	}
+</style>

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

@@ -1,20 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        color?: string | undefined;
-        height?: number | undefined;
-        width?: number | undefined;
-        margin?: number | undefined;
-        align?: "start" | "end" | "center" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DividerProps = typeof __propDef.props;
-export type DividerEvents = typeof __propDef.events;
-export type DividerSlots = typeof __propDef.slots;
-export default class Divider extends SvelteComponent<DividerProps, DividerEvents, DividerSlots> {
-}
-export {};
+declare const Divider: import("svelte").Component<{
+    color?: string;
+    height?: number;
+    width?: number;
+    margin?: number;
+    align?: "start" | "center" | "end";
+}, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/Dropdown/Dropdown.svelte

@@ -1,46 +1,61 @@
-<script>import { clickOutside } from "../directives/clickOutside.js";
-import Box from "./../Box/Box.svelte";
-export let show = false;
-export let width = 225;
-export let relative = false;
-export let closeOnOutsideClick = true;
-export let align = "start";
-export let position = "bottom";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import DropdownContent from './DropdownContent.svelte';
+
+	interface Props {
+		show?: boolean;
+		width?: number;
+		relative?: boolean;
+		closeOnOutsideClick?: boolean;
+		align?: 'start' | 'center' | 'end';
+		position?: 'left' | 'right' | 'bottom' | 'top';
+		trigger?: Snippet;
+		content?: Snippet;
+	}
+
+	let {
+		show = $bindable(false),
+		width = 225,
+		relative = false,
+		closeOnOutsideClick = true,
+		align = 'start',
+		position = 'bottom',
+		trigger,
+		content
+	}: Props = $props();
+
+	let triggerEl: HTMLElement | undefined = $state();
 </script>
 
-<span 
-class="dropdown"
-class:relative
->
-
-    <span 
-        class="trigger"
-        on:click={() => show = !show}
-        role="listbox"
-        tabindex="0"
-        on:keyup={e => {
-            if (e.key === 'Escape') {
-                show = false;
-            }
-        }}
-    >
-        <slot name="trigger" />
-    </span>
-
-    {#if show}
-        <div
-            class="content-wrap {align} {position}"
-            use:clickOutside={{
-                enabled: closeOnOutsideClick,
-                callback: () => show = false
-            }}
-        >
-            <Box class="content" style="width:{width}px">
-                <slot name="content" />
-            </Box>
-        </div>
-    {/if}
-
+<span class="dropdown" class:relative>
+	<span
+		class="trigger"
+		onclick={() => (show = !show)}
+		role="listbox"
+		tabindex="0"
+		onkeyup={(e) => {
+			if (e.key === 'Escape') {
+				show = false;
+			}
+		}}
+		bind:this={triggerEl}
+	>
+		{@render trigger?.()}
+	</span>
+
+	{#if show}
+		<DropdownContent
+			bind:show
+			{width}
+			{closeOnOutsideClick}
+			{align}
+			{position}
+			{relative}
+			trigger={triggerEl}
+		>
+			{@render content?.()}
+		</DropdownContent>
+	{/if}
 </span>
 
 <style>.dropdown {
@@ -48,77 +63,6 @@ class:relative
   display: inline-block;
 }
 
-.dropdown .content-wrap {
-  position: absolute;
-  left: 0;
-  z-index: 1;
-}
-
-.content-wrap.bottom {
-  top: 100%;
-  margin-top: 5px;
-}
-.content-wrap.bottom.end {
-  left: auto;
-  right: 0;
-}
-.content-wrap.bottom.center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.content-wrap.top {
-  bottom: 100%;
-  margin-bottom: 5px;
-}
-.content-wrap.top.end {
-  left: auto;
-  right: 0;
-}
-.content-wrap.top.center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.content-wrap.left {
-  right: 100%;
-  left: auto;
-  margin-right: 5px;
-  top: 0;
-  bottom: auto;
-}
-.content-wrap.left.end {
-  top: auto;
-  bottom: 0;
-}
-.content-wrap.left.center {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.content-wrap.right {
-  left: 100%;
-  margin-left: 5px;
-  top: 0;
-  bottom: auto;
-}
-.content-wrap.right.end {
-  bottom: 0;
-  top: auto;
-}
-.content-wrap.right.center {
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.content-wrap > :global(.content) {
-  padding: 10px;
-}
-
-.dropdown.relative > .content-wrap {
-  position: relative;
+.dropdown.relative > :global(.content-wrap) {
+  position: relative !important;
 }</style>
-
-
-
-

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

@@ -1,24 +1,13 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        show?: boolean | undefined;
-        width?: number | undefined;
-        relative?: boolean | undefined;
-        closeOnOutsideClick?: boolean | undefined;
-        align?: "start" | "end" | "center" | undefined;
-        position?: "left" | "right" | "bottom" | "top" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        trigger: {};
-        content: {};
-    };
-};
-export type DropdownProps = typeof __propDef.props;
-export type DropdownEvents = typeof __propDef.events;
-export type DropdownSlots = typeof __propDef.slots;
-export default class Dropdown extends SvelteComponent<DropdownProps, DropdownEvents, DropdownSlots> {
-}
-export {};
+import type { Snippet } from 'svelte';
+declare const Dropdown: import("svelte").Component<{
+    show?: boolean;
+    width?: number;
+    relative?: boolean;
+    closeOnOutsideClick?: boolean;
+    align?: "start" | "center" | "end";
+    position?: "left" | "right" | "bottom" | "top";
+    trigger?: Snippet;
+    content?: Snippet;
+}, {}, "show">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/Dropdown/DropdownContent.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import { onMount } from 'svelte';
+	import { clickOutside } from '../directives/clickOutside.js';
+	import debounce from '../directives/debounce.js';
+	import { cubicIn } from 'svelte/easing';
+
+	interface Props {
+		show: boolean;
+		width: number;
+		relative: boolean;
+		closeOnOutsideClick?: boolean;
+		align: 'start' | 'center' | 'end';
+		position: 'left' | 'right' | 'bottom' | 'top';
+		trigger: HTMLElement;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		show = $bindable(),
+		width,
+		relative,
+		closeOnOutsideClick = true,
+		align,
+		position,
+		trigger,
+		children
+	}: Props = $props();
+
+	let contentWrap: HTMLElement | undefined = $state();
+
+	function positionWrap() {
+		if (!trigger) return;
+		if (!contentWrap) return;
+		if (relative) return;
+
+		const triggerRect = trigger.getBoundingClientRect();
+		const contentRect = contentWrap.getBoundingClientRect();
+
+		const documentWidth = document.documentElement.clientWidth;
+
+		const GAP = 5;
+		const SPACE_AROUND = 15;
+
+		if (position === 'bottom') {
+			contentWrap.style.top = triggerRect.bottom + GAP + 'px';
+			if (contentRect.height + triggerRect.bottom > window.innerHeight) {
+				contentWrap.style.bottom = SPACE_AROUND + 'px';
+			} else {
+				contentWrap.style.bottom = 'auto';
+			}
+		} else if (position === 'top') {
+			contentWrap.style.top = triggerRect.top - contentRect.height - GAP + 'px';
+		} else if (position === 'left') {
+			contentWrap.style.left = triggerRect.left - width - GAP + 'px';
+		} else if (position === 'right') {
+			contentWrap.style.left = triggerRect.right + GAP + 'px';
+		}
+
+		if (position === 'bottom' || position === 'top') {
+			if (align === 'start') {
+				if (triggerRect.left + width < documentWidth) {
+					contentWrap.style.left = triggerRect.left + 'px';
+				} else {
+					contentWrap.style.right = SPACE_AROUND + 'px';
+				}
+			} else if (align === 'center') {
+				contentWrap.style.left =
+					Math.max(triggerRect.left + triggerRect.width / 2 - width / 2, SPACE_AROUND) + 'px';
+			} else if (align === 'end') {
+				contentWrap.style.left = Math.max(triggerRect.right - width, SPACE_AROUND) + 'px';
+			}
+		} else {
+			if (align === 'start') {
+				contentWrap.style.top = triggerRect.top + 'px';
+			} else if (align === 'center') {
+				contentWrap.style.top =
+					triggerRect.top + triggerRect.height / 2 - contentRect.height / 2 + 'px';
+			} else if (align === 'end') {
+				contentWrap.style.top = triggerRect.bottom - contentRect.height + 'px';
+			}
+		}
+
+		if (width >= documentWidth - SPACE_AROUND * 2) {
+			contentWrap.style.width = documentWidth - SPACE_AROUND * 2 + 'px';
+		} else {
+			contentWrap.style.width = width + 'px';
+		}
+	}
+
+	run(() => {
+		if (position || align) {
+			positionWrap();
+		}
+	});
+
+	function debouncedPosition() {
+		debounce(positionWrap, 10)();
+	}
+
+	onMount(() => {
+		if (!contentWrap) return;
+
+		positionWrap();
+
+		const mutationObserver = new MutationObserver(positionWrap);
+		mutationObserver.observe(contentWrap, {
+			subtree: true,
+			childList: true
+		});
+	});
+
+	function slideIn(node: any) {
+		return {
+			duration: 100,
+			easing: cubicIn,
+			css: (t: number) => {
+				return `
+                    opacity: ${0.2 + t * 0.8};
+                    transform: translateY(-${(1 - t) * 5}px) scale(${0.95 + t * 0.05});
+                `;
+			}
+		};
+	}
+</script>
+
+<svelte:window onresize={debouncedPosition} onscroll={debouncedPosition} />
+
+<div
+	class="content-wrap {align} {position}"
+	use:clickOutside={{
+		enabled: closeOnOutsideClick,
+		callback: () => (show = false)
+	}}
+	bind:this={contentWrap}
+	style="width: {width}px"
+	transition:slideIn
+>
+	<div class="hds-box content">
+		{@render children?.()}
+	</div>
+</div>
+
+<style>.content-wrap {
+  position: fixed;
+  z-index: 1000000;
+}
+
+.content-wrap > .content {
+  padding: 10px;
+}</style>

package/dist/components/Dropdown/DropdownContent.svelte.d.ts

@@ -0,0 +1,12 @@
+declare const DropdownContent: import("svelte").Component<{
+    show: boolean;
+    width: number;
+    relative: boolean;
+    closeOnOutsideClick?: boolean;
+    align: "start" | "center" | "end";
+    position: "left" | "right" | "bottom" | "top";
+    trigger: HTMLElement;
+    children?: import("svelte").Snippet;
+}, {}, "show">;
+type DropdownContent = ReturnType<typeof DropdownContent>;
+export default DropdownContent;

package/dist/components/FormControl/Caption.svelte

@@ -1,16 +1,23 @@
-<script>export let bold = false;
+<script lang="ts">
+	interface Props {
+		bold?: boolean;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { bold = false, children, ...rest }: Props = $props();
 </script>
 
-<div class="caption" class:bold {...$$restProps}>
-    <slot /> 
+<div class="caption" class:bold {...rest}>
+	{@render children?.()}
 </div>
 
 <style>
-    .caption {
-        font-size: 14px;
-        color: var(--text-light);
-    }
-    .caption.bold {
-        font-weight: 600;
-    }
-</style>
+	.caption {
+		font-size: 14px;
+		color: var(--text-light);
+	}
+	.caption.bold {
+		font-weight: 600;
+	}
+</style>

package/dist/components/FormControl/Caption.svelte.d.ts

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        bold?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type CaptionProps = typeof __propDef.props;
-export type CaptionEvents = typeof __propDef.events;
-export type CaptionSlots = typeof __propDef.slots;
-export default class Caption extends SvelteComponent<CaptionProps, CaptionEvents, CaptionSlots> {
-}
-export {};
+declare const Caption: import("svelte").Component<{
+    [key: string]: any;
+    bold?: boolean;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Caption = ReturnType<typeof Caption>;
+export default Caption;

package/dist/components/FormControl/FormControl.svelte

@@ -1,27 +1,36 @@
-<div class="form-control" {...$$restProps}>
-    <slot />
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { children, ...rest }: Props = $props();
+</script>
+
+<div class="form-control" {...rest}>
+	{@render children?.()}
 </div>
 
 <style>
-    .form-control {
-        display: flex;
-        flex-direction: column;
-    }
+	.form-control {
+		display: flex;
+		flex-direction: column;
+	}
 
-    .form-control :global(.caption) {
-        margin-bottom: 8px;
-    }
+	.form-control :global(.caption) {
+		margin-bottom: 8px;
+	}
 
-    .form-control > :global(label) {
-        margin-bottom: 8px;
-        font-weight: 600;
-    }
+	.form-control > :global(label) {
+		margin-bottom: 8px;
+		font-weight: 600;
+	}
 
-    .form-control :global(label + .caption) {
-        margin-top: -8px;
-    }
+	.form-control :global(label + .caption) {
+		margin-top: -8px;
+	}
 
-    .form-control :global(.validation) {
-        margin-top: 8px;
-    }
+	.form-control :global(.validation) {
+		margin-top: 8px;
+	}
 </style>

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

@@ -1,27 +1,6 @@
-/** @typedef {typeof __propDef.props}  FormControlProps */
-/** @typedef {typeof __propDef.events}  FormControlEvents */
-/** @typedef {typeof __propDef.slots}  FormControlSlots */
-export default class FormControl extends SvelteComponent<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type FormControlProps = typeof __propDef.props;
-export type FormControlEvents = typeof __propDef.events;
-export type FormControlSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+declare const FormControl: import("svelte").Component<{
+    [key: string]: any;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type FormControl = ReturnType<typeof FormControl>;
+export default FormControl;