@hyvor/design 0.0.68 → 1.0.3

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

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

package/dist/components/FormControl/Validation.svelte

@@ -1,13 +1,22 @@
-<script>import {
-  IconCheckCircleFill,
-  IconExclamationTriangleFill,
-  IconInfoCircleFill
-} from "@hyvor/icons";
-export let state = "error";
-export let role = "alert";
+<script lang="ts">
+	import {
+		IconCheckCircleFill,
+		IconExclamationTriangleFill,
+		IconInfoCircleFill
+	} from '@hyvor/icons';
+	import type { AriaRole } from 'svelte/elements';
+
+	interface Props {
+		state?: 'error' | 'warning' | 'success';
+		role?: AriaRole | undefined;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { state = 'error', role = 'alert', children, ...rest }: Props = $props();
 </script>
 
-<div class="validation {state}" {role} {...$$restProps}>
+<div class="validation {state}" {role} {...rest}>
 	<div class="icon">
 		{#if state === 'error'}
 			<IconExclamationTriangleFill style="color:var(--red)" />
@@ -18,7 +27,7 @@ export let role = "alert";
 		{/if}
 	</div>
 	<div class="message">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
 

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

@@ -1,21 +1,9 @@
-import { SvelteComponent } from "svelte";
 import type { AriaRole } from 'svelte/elements';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        state?: "error" | "success" | "warning" | undefined;
-        role?: AriaRole | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ValidationProps = typeof __propDef.props;
-export type ValidationEvents = typeof __propDef.events;
-export type ValidationSlots = typeof __propDef.slots;
-export default class Validation extends SvelteComponent<ValidationProps, ValidationEvents, ValidationSlots> {
-}
-export {};
+declare const Validation: import("svelte").Component<{
+    [key: string]: any;
+    state?: "error" | "warning" | "success";
+    role?: AriaRole | undefined;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Validation = ReturnType<typeof Validation>;
+export default Validation;

package/dist/components/HyvorBar/BarProducts.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	const PRODUCTS = {
 		talk: {
 			name: 'Hyvor Talk',
@@ -22,31 +22,50 @@
 	export { PRODUCTS };
 </script>
 
-<script>import LogoBlogs from "../../marketing/Logo/LogoBlogs.svelte";
-import LogoFortguard from "../../marketing/Logo/LogoFortguard.svelte";
-import LogoTalk from "../../marketing/Logo/LogoTalk.svelte";
-import { ActionList, ActionListItem, Button, Dropdown } from "../index.js";
-import { IconCaretDownFill, IconBoxArrowUpRight } from "@hyvor/icons";
-export let mobile = false;
+<script lang="ts">
+	import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
+	import LogoCore from '../../marketing/Logo/LogoCore.svelte';
+	import LogoFortguard from '../../marketing/Logo/LogoFortguard.svelte';
+	import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
+	import { ActionList, ActionListItem, Button, Dropdown } from '../index.js';
+	import { IconCaretDownFill, IconBoxArrowUpRight } from '@hyvor/icons';
+
+	interface Props {
+		mobile?: boolean;
+	}
+
+	let { mobile = false }: Props = $props();
 </script>
 
 <Dropdown align={mobile ? 'center' : 'end'} width={325}>
-	<Button slot="trigger" variant="invisible" color="input" size="small">
-		Products
-		<IconCaretDownFill size={10} slot="end" />
-	</Button>
-	<ActionList slot="content">
-		{#each Object.entries(PRODUCTS) as [key, product]}
-			<a href={`https://${product.url}`} target="_blank">
-				<ActionListItem>
-					{product.name}
-					<div slot="description">
-						{product.description}
-					</div>
-					<svelte:component this={product.logo} size={20} slot="start" />
-					<IconBoxArrowUpRight slot="end" size={12} />
-				</ActionListItem>
-			</a>
-		{/each}
-	</ActionList>
+	{#snippet trigger()}
+		<Button variant="invisible" color="input" size="small">
+			Products
+			{#snippet end()}
+				<IconCaretDownFill size={10} />
+			{/snippet}
+		</Button>
+	{/snippet}
+	{#snippet content()}
+		<ActionList>
+			{#each Object.entries(PRODUCTS) as [key, product]}
+				<a href={`https://${product.url}`} target="_blank">
+					<ActionListItem>
+						{product.name}
+						{#snippet description()}
+							<div>
+								{product.description}
+							</div>
+						{/snippet}
+						{#snippet start()}
+							<product.logo size={20} />
+						{/snippet}
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
+					</ActionListItem>
+				</a>
+			{/each}
+		</ActionList>
+	{/snippet}
 </Dropdown>

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

@@ -1,39 +1,32 @@
-import { SvelteComponent } from "svelte";
 declare const PRODUCTS: {
     talk: {
         name: string;
-        logo: typeof LogoTalk;
+        logo: import("svelte").Component<{
+            size?: number;
+        }, {}, "">;
         url: string;
         description: string;
     };
     blogs: {
         name: string;
-        logo: typeof LogoBlogs;
+        logo: import("svelte").Component<{
+            size?: number;
+        }, {}, "">;
         url: string;
         description: string;
     };
     fortguard: {
         name: string;
-        logo: typeof LogoFortguard;
+        logo: import("svelte").Component<{
+            size?: number;
+        }, {}, "">;
         url: string;
         description: string;
     };
 };
 export { PRODUCTS };
-import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
-import LogoFortguard from '../../marketing/Logo/LogoFortguard.svelte';
-import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
-declare const __propDef: {
-    props: {
-        mobile?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BarProductsProps = typeof __propDef.props;
-export type BarProductsEvents = typeof __propDef.events;
-export type BarProductsSlots = typeof __propDef.slots;
-export default class BarProducts extends SvelteComponent<BarProductsProps, BarProductsEvents, BarProductsSlots> {
-}
+declare const BarProducts: import("svelte").Component<{
+    mobile?: boolean;
+}, {}, "">;
+type BarProducts = ReturnType<typeof BarProducts>;
+export default BarProducts;

package/dist/components/HyvorBar/BarSupport.svelte

@@ -1,119 +1,183 @@
-<script>import { ActionList, ActionListItem, Button, Dropdown } from "../index.js";
-import {
-  IconCaretDownFill,
-  IconBoxArrowUpRight,
-  IconChat,
-  IconDiscord,
-  IconInfoCircle,
-  IconFileEarmark,
-  IconChatDots,
-  IconTwitterX,
-  IconLinkedin
-} from "@hyvor/icons";
-import ActionListGroup from "../ActionList/ActionListGroup.svelte";
-import { PRODUCTS } from "./BarProducts.svelte";
-import G2 from "./img/G2.svelte";
-import Trustpilot from "./img/Trustpilot.svelte";
-let supportDropdown = false;
-export let mobile = false;
-export let product;
-export let config;
-function openLiveChat(e) {
-  e.preventDefault();
-  if (window.$crisp) {
-    window.$crisp.push(["do", "chat:open"]);
-  }
-  supportDropdown = false;
-}
+<script lang="ts">
+	import { ActionList, ActionListItem, Button, Dropdown } from '../index.js';
+	import {
+		IconCaretDownFill,
+		IconBoxArrowUpRight,
+		IconChat,
+		IconDiscord,
+		IconInfoCircle,
+		IconFileEarmark,
+		IconChatDots,
+		IconTwitterX,
+		IconLinkedin
+	} from '@hyvor/icons';
+	import ActionListGroup from '../ActionList/ActionListGroup.svelte';
+	import { PRODUCTS } from './BarProducts.svelte';
+	import type { BarConfig, BarProduct } from './bar.js';
+	import G2 from './img/G2.svelte';
+	import Trustpilot from './img/Trustpilot.svelte';
+
+	let supportDropdown = $state(false);
+
+	interface Props {
+		mobile?: boolean;
+		product: BarProduct;
+		config: BarConfig;
+	}
+
+	let { mobile = false, product, config }: Props = $props();
+
+	function openLiveChat(e: any) {
+		e.preventDefault();
+		if ((window as any).$crisp) {
+			(window as any).$crisp.push(['do', 'chat:open']);
+		}
+		supportDropdown = false;
+	}
+
+	function getName() {
+		if (config.name) {
+			return config.name;
+		}
+		return PRODUCTS[product as keyof typeof PRODUCTS]?.name || '';
+	}
 </script>
 
 <Dropdown align={mobile ? 'center' : 'end'} width={325} bind:show={supportDropdown}>
-	<Button slot="trigger" variant="invisible" color="input" size="small">
-		Support
-		<IconCaretDownFill size={10} slot="end" />
-	</Button>
-	<ActionList slot="content">
-		<a href="https://hyvor.community" target="_blank">
-			<ActionListItem>
-				Community Forum
-				<div slot="description">hyvor.community</div>
-				<IconChat slot="start" />
-				<IconBoxArrowUpRight slot="end" size={12} />
-			</ActionListItem>
-		</a>
-		{#if config.docs}
-			<a href="/docs" target="_blank">
-				<ActionListItem>
-					Documentation
-					<div slot="description">
-						Learn how to use {PRODUCTS[product].name}
-					</div>
-					<IconFileEarmark slot="start" />
-					<IconBoxArrowUpRight slot="end" size={12} />
-				</ActionListItem>
-			</a>
-		{/if}
-		<a href="https://hyvor.com/support" target="_blank">
-			<ActionListItem>
-				Support Form
-				<div slot="description">Get help from our team</div>
-				<IconInfoCircle slot="start" />
-				<IconBoxArrowUpRight slot="end" size={12} />
-			</ActionListItem>
-		</a>
-		{#if config.chat}
-			<a href="/chat" on:click={openLiveChat}>
+	{#snippet trigger()}
+		<Button variant="invisible" color="input" size="small">
+			Support
+			{#snippet end()}
+				<IconCaretDownFill size={10} />
+			{/snippet}
+		</Button>
+	{/snippet}
+	{#snippet content()}
+		<ActionList>
+			<a href="https://hyvor.community" target="_blank">
 				<ActionListItem>
-					Live Chat
-					<div slot="description">Chat with our team</div>
-					<IconChatDots slot="start" />
+					Community Forum
+					{#snippet description()}
+						<div>hyvor.community</div>
+					{/snippet}
+					{#snippet start()}
+						<IconChat />
+					{/snippet}
+					{#snippet end()}
+						<IconBoxArrowUpRight size={12} />
+					{/snippet}
 				</ActionListItem>
 			</a>
-		{/if}
-
-		<ActionListGroup title="Social">
-			<a href="https://hyvor.com/api/go/discord" target="_blank">
-				<ActionListItem>
-					Discord
-					<IconDiscord slot="start" />
-					<IconBoxArrowUpRight slot="end" size={12} />
-				</ActionListItem>
-			</a>
-			{#if config.twitter}
-				<a href={config.twitter} target="_blank">
+			{#if config.docs}
+				<a href="/docs" target="_blank">
 					<ActionListItem>
-						Twitter
-						<IconTwitterX slot="start" />
-						<IconBoxArrowUpRight slot="end" size={12} />
+						Documentation
+						{#snippet description()}
+							<div>
+								Learn how to use {getName()}
+							</div>
+						{/snippet}
+						{#snippet start()}
+							<IconFileEarmark />
+						{/snippet}
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
 					</ActionListItem>
 				</a>
 			{/if}
-			<a href="https://www.linkedin.com/company/hyvor" target="_blank">
+			<a href="https://hyvor.com/support" target="_blank">
 				<ActionListItem>
-					Linkedin
-					<IconLinkedin slot="start" />
-					<IconBoxArrowUpRight slot="end" size={12} />
+					Support Form
+					{#snippet description()}
+						<div>Get help from our team</div>
+					{/snippet}
+					{#snippet start()}
+						<IconInfoCircle />
+					{/snippet}
+					{#snippet end()}
+						<IconBoxArrowUpRight size={12} />
+					{/snippet}
 				</ActionListItem>
 			</a>
-		</ActionListGroup>
-
-		<ActionListGroup title="Rate us">
-			<a href="https://www.trustpilot.com/review/hyvor.com" target="_blank">
-				<ActionListItem>
-					<Trustpilot slot="start" />
-					Trustpilot
-					<IconBoxArrowUpRight slot="end" size={12} />
-				</ActionListItem>
-			</a>
-			{#if config.g2}
-				<a href="https://www.g2.com/products/hyvor-talk/reviews" target="_blank">
+			{#if config.chat}
+				<a href="/chat" onclick={openLiveChat}>
 					<ActionListItem>
-						<G2 slot="start" />
-						G2
-						<IconBoxArrowUpRight slot="end" size={12} />
+						Live Chat
+						{#snippet description()}
+							<div>Chat with our team</div>
+						{/snippet}
+						{#snippet start()}
+							<IconChatDots />
+						{/snippet}
 					</ActionListItem>
 				</a>
 			{/if}
-		</ActionListGroup>
-	</ActionList>
+
+			<ActionListGroup title="Social">
+				<a href="https://hyvor.com/api/go/discord" target="_blank">
+					<ActionListItem>
+						Discord
+						{#snippet start()}
+							<IconDiscord />
+						{/snippet}
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
+					</ActionListItem>
+				</a>
+				{#if config.twitter}
+					<a href={config.twitter} target="_blank">
+						<ActionListItem>
+							Twitter
+							{#snippet start()}
+								<IconTwitterX />
+							{/snippet}
+							{#snippet end()}
+								<IconBoxArrowUpRight size={12} />
+							{/snippet}
+						</ActionListItem>
+					</a>
+				{/if}
+				<a href="https://www.linkedin.com/company/hyvor" target="_blank">
+					<ActionListItem>
+						Linkedin
+						{#snippet start()}
+							<IconLinkedin />
+						{/snippet}
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
+					</ActionListItem>
+				</a>
+			</ActionListGroup>
+
+			<ActionListGroup title="Rate us">
+				<a href="https://www.trustpilot.com/review/hyvor.com" target="_blank">
+					<ActionListItem>
+						{#snippet start()}
+							<Trustpilot />
+						{/snippet}
+						Trustpilot
+						{#snippet end()}
+							<IconBoxArrowUpRight size={12} />
+						{/snippet}
+					</ActionListItem>
+				</a>
+				{#if config.g2}
+					<a href="https://www.g2.com/products/hyvor-talk/reviews" target="_blank">
+						<ActionListItem>
+							{#snippet start()}
+								<G2 />
+							{/snippet}
+							G2
+							{#snippet end()}
+								<IconBoxArrowUpRight size={12} />
+							{/snippet}
+						</ActionListItem>
+					</a>
+				{/if}
+			</ActionListGroup>
+		</ActionList>
+	{/snippet}
 </Dropdown>

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

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

package/dist/components/HyvorBar/BarUpdates.svelte

@@ -1,24 +1,34 @@
-<script>import { IconButton, Dropdown } from "../index.js";
-import { IconMegaphone } from "@hyvor/icons";
-import BarUpdatesList from "./BarUpdatesList.svelte";
-import { barUnreadUpdates } from "./bar.js";
-export let instance;
-export let product;
+<script lang="ts">
+	import { IconButton, Dropdown } from '../index.js';
+	import { IconMegaphone } from '@hyvor/icons';
+	import BarUpdatesList from './BarUpdatesList.svelte';
+	import { type BarProduct, barUnreadUpdates } from './bar.js';
+
+	interface Props {
+		instance: string;
+		product: BarProduct;
+	}
+
+	let { instance, product }: Props = $props();
 </script>
 
 <div class="updates">
 	<Dropdown align="end" width={525}>
-		<IconButton color="input" variant="invisible" slot="trigger">
-			<IconMegaphone size={14} />
+		{#snippet trigger()}
+			<IconButton color="input" variant="invisible">
+				<IconMegaphone size={14} />
 
-			{#if $barUnreadUpdates > 0}
-				<span class="unread">{$barUnreadUpdates}</span>
-			{/if}
-		</IconButton>
+				{#if $barUnreadUpdates > 0}
+					<span class="unread">{$barUnreadUpdates}</span>
+				{/if}
+			</IconButton>
+		{/snippet}
 
-		<div slot="content" class="content-inner">
-			<BarUpdatesList {instance} {product} />
-		</div>
+		{#snippet content()}
+			<div class="content-inner">
+				<BarUpdatesList {instance} {product} />
+			</div>
+		{/snippet}
 	</Dropdown>
 </div>
 

package/dist/components/HyvorBar/BarUpdates.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 BarUpdatesProps = typeof __propDef.props;
-export type BarUpdatesEvents = typeof __propDef.events;
-export type BarUpdatesSlots = typeof __propDef.slots;
-export default class BarUpdates extends SvelteComponent<BarUpdatesProps, BarUpdatesEvents, BarUpdatesSlots> {
-}
-export {};
+declare const BarUpdates: import("svelte").Component<{
+    instance: string;
+    product: BarProduct;
+}, {}, "">;
+type BarUpdates = ReturnType<typeof BarUpdates>;
+export default BarUpdates;