@hyvor/design 0.0.68 → 1.0.5

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,8 +1,19 @@
-<script>export let color = "var(--accent-lightest)";
-export let height = 1;
-export let width = 100;
-export let margin = 0;
-export let align = "center";
+<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
@@ -17,7 +28,7 @@ export let align = "center";
         margin-right: {align === 'center' ? 'auto' : 0};
         display: flex;
     "
-/>
+></div>
 
 <style>
 	.line {

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

@@ -1,20 +1,10 @@
-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> {
+interface Props {
+    color?: string;
+    height?: number;
+    width?: number;
+    margin?: number;
+    align?: 'start' | 'center' | 'end';
 }
-export {};
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/Dropdown/Dropdown.svelte

@@ -1,27 +1,46 @@
-<script>import DropdownContent from "./DropdownContent.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";
-let trigger;
+<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)}
+		onclick={() => (show = !show)}
 		role="listbox"
 		tabindex="0"
-		on:keyup={(e) => {
+		onkeyup={(e) => {
 			if (e.key === 'Escape') {
 				show = false;
 			}
 		}}
-		bind:this={trigger}
+		bind:this={triggerEl}
 	>
-		<slot name="trigger" />
+		{@render trigger?.()}
 	</span>
 
 	{#if show}
@@ -32,9 +51,9 @@ let trigger;
 			{align}
 			{position}
 			{relative}
-			{trigger}
+			trigger={triggerEl}
 		>
-			<slot name="content" />
+			{@render content?.()}
 		</DropdownContent>
 	{/if}
 </span>

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

@@ -1,24 +1,14 @@
-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> {
+import type { Snippet } from 'svelte';
+interface Props {
+    show?: boolean;
+    width?: number;
+    relative?: boolean;
+    closeOnOutsideClick?: boolean;
+    align?: 'start' | 'center' | 'end';
+    position?: 'left' | 'right' | 'bottom' | 'top';
+    trigger?: Snippet;
+    content?: Snippet;
 }
-export {};
+declare const Dropdown: import("svelte").Component<Props, {}, "show">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/Dropdown/DropdownContent.svelte

@@ -1,99 +1,131 @@
-<script>import { onMount } from "svelte";
-import { clickOutside } from "../directives/clickOutside.js";
-import debounce from "../directives/debounce.js";
-import { slide } from "svelte/transition";
-import { cubicIn } from "svelte/easing";
-export let show;
-export let width;
-export let relative;
-export let closeOnOutsideClick = true;
-export let align;
-export let position;
-export let trigger;
-let contentWrap;
-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";
-  }
-}
-$:
-  if (position, align) {
-    positionWrap();
-  }
-function debouncedPosition() {
-  debounce(positionWrap, 10)();
-}
-onMount(() => {
-  positionWrap();
-  const mutationObserver = new MutationObserver(positionWrap);
-  mutationObserver.observe(contentWrap, {
-    subtree: true,
-    childList: true
-  });
-});
-function slideIn(node) {
-  return {
-    duration: 100,
-    easing: cubicIn,
-    css: (t) => {
-      return `
+<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 on:resize={debouncedPosition} on:scroll={debouncedPosition} />
+<svelte:window onresize={debouncedPosition} onscroll={debouncedPosition} />
 
 <div
 	class="content-wrap {align} {position}"
@@ -106,7 +138,7 @@ function slideIn(node) {
 	transition:slideIn
 >
 	<div class="hds-box content">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

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

@@ -1,24 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        show: boolean;
-        width: number;
-        relative: boolean;
-        closeOnOutsideClick?: boolean | undefined;
-        align: 'start' | 'center' | 'end';
-        position: 'left' | 'right' | 'bottom' | 'top';
-        trigger: HTMLElement;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DropdownContentProps = typeof __propDef.props;
-export type DropdownContentEvents = typeof __propDef.events;
-export type DropdownContentSlots = typeof __propDef.slots;
-export default class DropdownContent extends SvelteComponent<DropdownContentProps, DropdownContentEvents, DropdownContentSlots> {
-}
-export {};
+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,8 +1,15 @@
-<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>

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

@@ -1,19 +1,8 @@
-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> {
+interface Props {
+    bold?: boolean;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
 }
-export {};
+declare const Caption: import("svelte").Component<Props, {}, "">;
+type Caption = ReturnType<typeof Caption>;
+export default Caption;

package/dist/components/FormControl/FormControl.svelte

@@ -1,5 +1,14 @@
-<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>

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

@@ -1,27 +1,7 @@
-/** @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: {};
-}> {
+interface Props {
+    children?: import('svelte').Snippet;
+    [key: string]: any;
 }
-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<Props, {}, "">;
+type FormControl = ReturnType<typeof FormControl>;
+export default FormControl;

package/dist/components/FormControl/InputGroup.svelte

@@ -1,14 +1,22 @@
-<script>export let gap = "medium";
-const gaps = {
-  small: 4,
-  medium: 8,
-  large: 16
-};
-gap = typeof gap === "number" ? gap : gaps[gap];
+<script lang="ts">
+	interface Props {
+		gap?: number | 'small' | 'medium' | 'large';
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { gap = $bindable('medium'), children, ...rest }: Props = $props();
+
+	const gaps = {
+		small: 4,
+		medium: 8,
+		large: 16
+	};
+	gap = typeof gap === 'number' ? gap : gaps[gap];
 </script>
 
-<div class="checkbox-group" style:gap={gap + 'px'} {...$$restProps}>
-	<slot />
+<div class="checkbox-group" style:gap={gap + 'px'} {...rest}>
+	{@render children?.()}
 </div>
 
 <style>

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

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        gap?: number | "small" | "medium" | "large" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type InputGroupProps = typeof __propDef.props;
-export type InputGroupEvents = typeof __propDef.events;
-export type InputGroupSlots = typeof __propDef.slots;
-export default class InputGroup extends SvelteComponent<InputGroupProps, InputGroupEvents, InputGroupSlots> {
+interface Props {
+    gap?: number | 'small' | 'medium' | 'large';
+    children?: import('svelte').Snippet;
+    [key: string]: any;
 }
-export {};
+declare const InputGroup: import("svelte").Component<Props, {}, "gap">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/components/FormControl/Label.svelte

@@ -1,5 +1,14 @@
-<label {...$$restProps}>
-	<slot />
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { children, ...rest }: Props = $props();
+</script>
+
+<label {...rest}>
+	{@render children?.()}
 </label>
 
 <style>