@hyvor/design 0.0.68 → 1.0.3

package/dist/components/HyvorBar/BarUpdatesList.svelte

@@ -1,38 +1,57 @@
-<script>import { onMount } from "svelte";
-import Loader from "../Loader/Loader.svelte";
-import ActionList from "../ActionList/ActionList.svelte";
-import ActionListItem from "../ActionList/ActionListItem.svelte";
-import {
-  barUnreadUpdates,
-  UnreadUpdatesTimeLocalStorage
-} from "./bar.js";
-import { IconBoxArrowUpRight } from "@hyvor/icons";
-import Button from "../Button/Button.svelte";
-import Tag from "../Tag/Tag.svelte";
-import IconMessage from "../IconMessage/IconMessage.svelte";
-export let instance;
-export let product;
-let updates = [];
-let loading = true;
-let error = false;
-let lastReadTime = null;
-function fetchUpdates() {
-  error = false;
-  lastReadTime = UnreadUpdatesTimeLocalStorage.get();
-  loading = true;
-  fetch(instance + "/api/public/updates?types=company," + product).then((response) => response.json()).then((data) => {
-    updates = data;
-    barUnreadUpdates.set(0);
-    UnreadUpdatesTimeLocalStorage.setNow();
-  }).catch(() => {
-    error = true;
-  }).finally(() => {
-    loading = false;
-  });
-}
-onMount(() => {
-  fetchUpdates();
-});
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Loader from '../Loader/Loader.svelte';
+	import ActionList from '../ActionList/ActionList.svelte';
+	import ActionListItem from '../ActionList/ActionListItem.svelte';
+	import {
+		barUnreadUpdates,
+		UnreadUpdatesTimeLocalStorage,
+		type BarProduct,
+		type BarUpdate
+	} from './bar.js';
+	import { IconBoxArrowUpRight } from '@hyvor/icons';
+	import Button from '../Button/Button.svelte';
+	import Tag from '../Tag/Tag.svelte';
+	import IconMessage from '../IconMessage/IconMessage.svelte';
+
+	interface Props {
+		instance: string;
+		product: BarProduct;
+	}
+
+	let { instance, product }: Props = $props();
+
+	let updates: BarUpdate[] = $state([]);
+	let loading = $state(true);
+	let error = $state(false);
+
+	let lastReadTime: null | number = $state(null);
+
+	function fetchUpdates() {
+		error = false;
+		lastReadTime = UnreadUpdatesTimeLocalStorage.get();
+		loading = true;
+
+		fetch(instance + '/api/public/updates?types=company,' + product)
+			.then((response) => response.json())
+			.then((data) => {
+				updates = data;
+
+				barUnreadUpdates.set(0);
+				// set as last read now
+				UnreadUpdatesTimeLocalStorage.setNow();
+			})
+			.catch(() => {
+				error = true;
+			})
+			.finally(() => {
+				loading = false;
+			});
+	}
+
+	onMount(() => {
+		fetchUpdates();
+	});
 </script>
 
 {#if loading}
@@ -70,19 +89,23 @@ onMount(() => {
 						<div class="title">
 							{update.title}
 						</div>
-						<div slot="description">
-							<div class="description">
-								{update.content}
+						{#snippet description()}
+							<div>
+								<div class="description">
+									{update.content}
+								</div>
+								<div class="date">
+									{new Intl.DateTimeFormat('en-US').format(new Date(update.created_at * 1000))}
+								</div>
 							</div>
-							<div class="date">
-								{new Intl.DateTimeFormat('en-US').format(new Date(update.created_at * 1000))}
-							</div>
-						</div>
-						<span slot="end">
-							{#if update.url}
-								<IconBoxArrowUpRight size={12} />
-							{/if}
-						</span>
+						{/snippet}
+						{#snippet end()}
+							<span>
+								{#if update.url}
+									<IconBoxArrowUpRight size={12} />
+								{/if}
+							</span>
+						{/snippet}
 					</ActionListItem>
 				</a>
 			{/each}
@@ -93,7 +116,9 @@ onMount(() => {
 <div class="top">
 	<Button size="small" color="input" as="a" href={instance + '/updates'} target="_blank">
 		View all updates
-		<IconBoxArrowUpRight size={12} slot="end" />
+		{#snippet end()}
+			<IconBoxArrowUpRight size={12} />
+		{/snippet}
 	</Button>
 </div>
 

package/dist/components/HyvorBar/BarUpdatesList.svelte.d.ts

@@ -1,18 +1,7 @@
-import { SvelteComponent } from "svelte";
 import { type BarProduct } from './bar.js';
-declare const __propDef: {
-    props: {
-        instance: string;
-        product: BarProduct;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BarUpdatesListProps = typeof __propDef.props;
-export type BarUpdatesListEvents = typeof __propDef.events;
-export type BarUpdatesListSlots = typeof __propDef.slots;
-export default class BarUpdatesList extends SvelteComponent<BarUpdatesListProps, BarUpdatesListEvents, BarUpdatesListSlots> {
-}
-export {};
+declare const BarUpdatesList: import("svelte").Component<{
+    instance: string;
+    product: BarProduct;
+}, {}, "">;
+type BarUpdatesList = ReturnType<typeof BarUpdatesList>;
+export default BarUpdatesList;

package/dist/components/HyvorBar/BarUser.svelte

@@ -1,33 +1,45 @@
-<script>import ActionList from "../ActionList/ActionList.svelte";
-import ActionListItem from "../ActionList/ActionListItem.svelte";
-import Dropdown from "../Dropdown/Dropdown.svelte";
-import { IconBoxArrowUpRight } from "@hyvor/icons";
-import { barUser } from "./bar.js";
-import BarUserPreview from "./BarUserPreview.svelte";
-export let instance;
+<script lang="ts">
+	import ActionList from '../ActionList/ActionList.svelte';
+	import ActionListItem from '../ActionList/ActionListItem.svelte';
+	import Dropdown from '../Dropdown/Dropdown.svelte';
+	import { IconBoxArrowUpRight } from '@hyvor/icons';
+	import { barUser } from './bar.js';
+	import BarUserPreview from './BarUserPreview.svelte';
+
+	interface Props {
+		instance: string;
+	}
+
+	let { instance }: Props = $props();
 </script>
 
 <div class="wrap">
 	<Dropdown align="end" width={325}>
-		<button class="user-wrap" slot="trigger">
-			{#if $barUser}
-				<img class="user-picture" src={$barUser?.picture_url} alt={$barUser?.name} />
-			{/if}
-		</button>
+		{#snippet trigger()}
+			<button class="user-wrap">
+				{#if $barUser}
+					<img class="user-picture" src={$barUser?.picture_url} alt={$barUser?.name} />
+				{/if}
+			</button>
+		{/snippet}
 
-		<ActionList slot="content">
-			<BarUserPreview />
+		{#snippet content()}
+			<ActionList>
+				<BarUserPreview />
 
-			<a href="{instance}/account" target="_blank">
-				<ActionListItem>
-					Manage Account
-					<IconBoxArrowUpRight slot="end" size={12} />
-				</ActionListItem>
-			</a>
-			<a href="{instance}/account/logout">
-				<ActionListItem>Logout</ActionListItem>
-			</a>
-		</ActionList>
+				<a href="{instance}/account" target="_blank">
+					<ActionListItem>
+						Manage Account
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
+					</ActionListItem>
+				</a>
+				<a href="{instance}/account/logout">
+					<ActionListItem>Logout</ActionListItem>
+				</a>
+			</ActionList>
+		{/snippet}
 	</Dropdown>
 </div>
 

package/dist/components/HyvorBar/BarUser.svelte.d.ts

@@ -1,16 +1,5 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        instance: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BarUserProps = typeof __propDef.props;
-export type BarUserEvents = typeof __propDef.events;
-export type BarUserSlots = typeof __propDef.slots;
-export default class BarUser extends SvelteComponent<BarUserProps, BarUserEvents, BarUserSlots> {
-}
-export {};
+declare const BarUser: import("svelte").Component<{
+    instance: string;
+}, {}, "">;
+type BarUser = ReturnType<typeof BarUser>;
+export default BarUser;

package/dist/components/HyvorBar/BarUserPreview.svelte

@@ -1,4 +1,5 @@
-<script>import { barUser } from "./bar.js";
+<script lang="ts">
+	import { barUser } from './bar.js';
 </script>
 
 {#if $barUser}

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

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -1,45 +1,78 @@
-<script>import BarUser from "./BarUser.svelte";
-import { onMount } from "svelte";
-import BarProducts, { PRODUCTS } from "./BarProducts.svelte";
-import BarSupport from "./BarSupport.svelte";
-import { loadBarUser } from "./bar.js";
-import BarUpdates from "./BarUpdates.svelte";
-import { IconCaretDownFill } from "@hyvor/icons";
-export let instance = "https://hyvor.com";
-export let product;
-export let config = {};
-let mobileShow = false;
-const configComplete = {
-  ...{
-    docs: true,
-    chat: true,
-    twitter: null,
-    g2: null
-  },
-  ...config
-};
-function handleBarClick(e) {
-  if (mobileShow && e.target instanceof Element && e.target.closest(".dropdown .trigger")) {
-    return;
-  }
-  if (window.innerWidth <= 600) {
-    mobileShow = !mobileShow;
-  }
-}
-onMount(() => {
-  loadBarUser(instance, product);
-});
+<script lang="ts">
+	import BarUser from './BarUser.svelte';
+	import { onMount } from 'svelte';
+	import BarProducts, { PRODUCTS } from './BarProducts.svelte';
+	import BarSupport from './BarSupport.svelte';
+	import { loadBarUser, type BarConfig, type BarProduct } from './bar.js';
+	import BarUpdates from './BarUpdates.svelte';
+	import { IconCaretDownFill } from '@hyvor/icons';
+	import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
+	import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
+	import LogoCore from '../../marketing/Logo/LogoCore.svelte';
+
+	interface Props {
+		instance?: string;
+		product: BarProduct;
+		config?: Partial<BarConfig>;
+	}
+
+	let { instance = 'https://hyvor.com', product, config = {} }: Props = $props();
+
+	let mobileShow = $state(false);
+
+	const configComplete: BarConfig = {
+		...{
+			name: null,
+			docs: true,
+			chat: true,
+			twitter: null,
+			g2: null
+		},
+		...config
+	};
+
+	function handleBarClick(e: MouseEvent) {
+		if (mobileShow && e.target instanceof Element && e.target.closest('.dropdown .trigger')) {
+			return;
+		}
+		if (window.innerWidth <= 600) {
+			mobileShow = !mobileShow;
+		}
+	}
+
+	onMount(() => {
+		loadBarUser(instance, product);
+	});
+
+	function getLogo() {
+		if (product === 'talk') {
+			return LogoTalk;
+		} else if (product === 'blogs') {
+			return LogoBlogs;
+		} else {
+			return LogoCore;
+		}
+	}
+
+	function getName() {
+		if (config.name) {
+			return config.name;
+		}
+		return (PRODUCTS as any)[product]?.name || 'HYVOR';
+	}
+
+	const LogoComponent = getLogo();
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div id="bar" on:click={handleBarClick} class:mobile-show={mobileShow}>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div id="bar" onclick={handleBarClick} class:mobile-show={mobileShow}>
 	<div class="inner hds-box">
 		<div class="left">
 			<a class="logo" href="/">
-				<svelte:component this={PRODUCTS[product].logo} size={20} />
+				<LogoComponent size={20} />
 				<span class="name">
-					{PRODUCTS[product].name}
+					{getName()}
 				</span>
 			</a>
 		</div>

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

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
 import { type BarConfig, type BarProduct } from './bar.js';
-declare const __propDef: {
-    props: {
-        instance?: string | undefined;
-        product: BarProduct;
-        config?: Partial<BarConfig> | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type HyvorBarProps = typeof __propDef.props;
-export type HyvorBarEvents = typeof __propDef.events;
-export type HyvorBarSlots = typeof __propDef.slots;
-export default class HyvorBar extends SvelteComponent<HyvorBarProps, HyvorBarEvents, HyvorBarSlots> {
-}
-export {};
+declare const HyvorBar: import("svelte").Component<{
+    instance?: string;
+    product: BarProduct;
+    config?: Partial<BarConfig>;
+}, {}, "">;
+type HyvorBar = ReturnType<typeof HyvorBar>;
+export default HyvorBar;

package/dist/components/HyvorBar/bar.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="svelte" />
-export type BarProduct = 'talk' | 'blogs';
+export type BarProduct = 'core' | 'talk' | 'blogs';
 export interface BarConfig {
+    name: string | null;
     docs: boolean;
     chat: boolean;
     twitter: string | null;

package/dist/components/HyvorBar/img/G2.svelte.d.ts

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  G2Props */
-/** @typedef {typeof __propDef.events}  G2Events */
-/** @typedef {typeof __propDef.slots}  G2Slots */
-export default class G2 extends SvelteComponent<{
+export default G2;
+type G2 = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type G2Props = typeof __propDef.props;
-export type G2Events = typeof __propDef.events;
-export type G2Slots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const G2: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/HyvorBar/img/Trustpilot.svelte.d.ts

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  TrustpilotProps */
-/** @typedef {typeof __propDef.events}  TrustpilotEvents */
-/** @typedef {typeof __propDef.slots}  TrustpilotSlots */
-export default class Trustpilot extends SvelteComponent<{
+export default Trustpilot;
+type Trustpilot = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TrustpilotProps = typeof __propDef.props;
-export type TrustpilotEvents = typeof __propDef.events;
-export type TrustpilotSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Trustpilot: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/IconButton/IconButton.svelte

@@ -1,13 +1,34 @@
-<script>export let size = "medium";
-export let color = "accent";
-export let variant = "fill";
-export let as = "button";
-const sizes = {
-  small: 26,
-  medium: 30,
-  large: 36
-};
-size = (typeof size === "number" ? size : sizes[size]) + "px";
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+
+	interface Props {
+		size?: 'small' | 'medium' | 'large' | number;
+		// export let color : 'accent' | 'soft' | 'invisible' | 'danger' = 'accent';
+		color?: 'accent' | 'gray' | 'input' | 'green' | 'red' | 'blue' | 'orange';
+		variant?: 'fill' | 'fill-light' | 'outline' | 'outline-fill' | 'invisible';
+		as?: 'button' | 'a';
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		size = $bindable('medium'),
+		color = 'accent',
+		variant = 'fill',
+		as = 'button',
+		children,
+		...rest
+	}: Props = $props();
+
+	const sizes = {
+		small: 26,
+		medium: 30,
+		large: 36
+	};
+
+	size = (typeof size === 'number' ? size : sizes[size]) + 'px';
 </script>
 
 <svelte:element
@@ -15,21 +36,21 @@ size = (typeof size === "number" ? size : sizes[size]) + "px";
 	class="button {color} {variant}"
 	style:width={size}
 	style:height={size}
-	on:keyup
-	on:keydown
-	on:keypress
-	on:focus
-	on:blur
-	on:click
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:change
+	onkeyup={bubble('keyup')}
+	onkeydown={bubble('keydown')}
+	onkeypress={bubble('keypress')}
+	onfocus={bubble('focus')}
+	onblur={bubble('blur')}
+	onclick={bubble('click')}
+	onmouseover={bubble('mouseover')}
+	onmouseenter={bubble('mouseenter')}
+	onmouseleave={bubble('mouseleave')}
+	onchange={bubble('change')}
 	role="button"
 	tabindex="0"
-	{...$$restProps}
+	{...rest}
 >
-	<slot />
+	{@render children?.()}
 </svelte:element>
 
 <style>.button {