@hyvor/design 0.0.67 → 1.0.3

package/dist/components/FormControl/InputGroup.svelte

@@ -1,20 +1,27 @@
-<script>export let gap = "medium";
-const gaps = {
-  small: 4,
-  medium: 8,
-  large: 16
-};
-gap = typeof gap === "number" ? gap : gaps[gap];
-</script>
+<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>
-    .checkbox-group {
-        display: flex;
-        flex-direction: column;
-    }
-</style>
+	.checkbox-group {
+		display: flex;
+		flex-direction: column;
+	}
+</style>

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

@@ -1,19 +1,7 @@
-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> {
-}
-export {};
+declare const InputGroup: import("svelte").Component<{
+    [key: string]: any;
+    gap?: number | "small" | "medium" | "large";
+    children?: import("svelte").Snippet;
+}, {}, "gap">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/components/FormControl/Label.svelte

@@ -1,9 +1,18 @@
-<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>
-    label {
-        font-weight: 600;
-    }
-</style>
+	label {
+		font-weight: 600;
+	}
+</style>

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,23 +1,34 @@
-<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="icon">
-
-        {#if state === 'error'}
-            <IconExclamationTriangleFill style="color:var(--red)" />
-        {:else if state === 'warning'}
-            <IconInfoCircleFill style="color:var(--orange)" />
-        {:else}
-            <IconCheckCircleFill style="color:var(--green)" />
-        {/if}
-
-    </div>
-    <div class="message">
-        <slot />
-    </div>
+<div class="validation {state}" {role} {...rest}>
+	<div class="icon">
+		{#if state === 'error'}
+			<IconExclamationTriangleFill style="color:var(--red)" />
+		{:else if state === 'warning'}
+			<IconInfoCircleFill style="color:var(--orange)" />
+		{:else}
+			<IconCheckCircleFill style="color:var(--green)" />
+		{/if}
+	</div>
+	<div class="message">
+		{@render children?.()}
+	</div>
 </div>
 
 <style>.validation {
@@ -50,4 +61,4 @@ export let role = "alert";
 }
 :global(:root.dark) .validation.success {
   color: var(--green);
-}</style>
+}</style>

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 {};
+import type { AriaRole } from 'svelte/elements';
+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

@@ -0,0 +1,71 @@
+<script module>
+	const PRODUCTS = {
+		talk: {
+			name: 'Hyvor Talk',
+			logo: LogoTalk,
+			url: 'talk.hyvor.com',
+			description: 'Comments, Newsletters, Memberships'
+		},
+		blogs: {
+			name: 'Hyvor Blogs',
+			logo: LogoBlogs,
+			url: 'blogs.hyvor.com',
+			description: 'Blogging Platform'
+		},
+		fortguard: {
+			name: 'FortGuard',
+			logo: LogoFortguard,
+			url: 'fortguard.io',
+			description: 'Spam Detection API'
+		}
+	};
+	export { PRODUCTS };
+</script>
+
+<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}>
+	{#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

@@ -0,0 +1,32 @@
+declare const PRODUCTS: {
+    talk: {
+        name: string;
+        logo: import("svelte").Component<{
+            size?: number;
+        }, {}, "">;
+        url: string;
+        description: string;
+    };
+    blogs: {
+        name: string;
+        logo: import("svelte").Component<{
+            size?: number;
+        }, {}, "">;
+        url: string;
+        description: string;
+    };
+    fortguard: {
+        name: string;
+        logo: import("svelte").Component<{
+            size?: number;
+        }, {}, "">;
+        url: string;
+        description: string;
+    };
+};
+export { PRODUCTS };
+declare const BarProducts: import("svelte").Component<{
+    mobile?: boolean;
+}, {}, "">;
+type BarProducts = ReturnType<typeof BarProducts>;
+export default BarProducts;

package/dist/components/HyvorBar/BarSupport.svelte

@@ -0,0 +1,183 @@
+<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}>
+	{#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>
+					Community Forum
+					{#snippet description()}
+						<div>hyvor.community</div>
+					{/snippet}
+					{#snippet start()}
+						<IconChat />
+					{/snippet}
+					{#snippet end()}
+						<IconBoxArrowUpRight size={12} />
+					{/snippet}
+				</ActionListItem>
+			</a>
+			{#if config.docs}
+				<a href="/docs" target="_blank">
+					<ActionListItem>
+						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://hyvor.com/support" target="_blank">
+				<ActionListItem>
+					Support Form
+					{#snippet description()}
+						<div>Get help from our team</div>
+					{/snippet}
+					{#snippet start()}
+						<IconInfoCircle />
+					{/snippet}
+					{#snippet end()}
+						<IconBoxArrowUpRight size={12} />
+					{/snippet}
+				</ActionListItem>
+			</a>
+			{#if config.chat}
+				<a href="/chat" onclick={openLiveChat}>
+					<ActionListItem>
+						Live Chat
+						{#snippet description()}
+							<div>Chat with our team</div>
+						{/snippet}
+						{#snippet start()}
+							<IconChatDots />
+						{/snippet}
+					</ActionListItem>
+				</a>
+			{/if}
+
+			<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

@@ -0,0 +1,8 @@
+import type { BarConfig, BarProduct } from './bar.js';
+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

@@ -0,0 +1,68 @@
+<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}>
+		{#snippet trigger()}
+			<IconButton color="input" variant="invisible">
+				<IconMegaphone size={14} />
+
+				{#if $barUnreadUpdates > 0}
+					<span class="unread">{$barUnreadUpdates}</span>
+				{/if}
+			</IconButton>
+		{/snippet}
+
+		{#snippet content()}
+			<div class="content-inner">
+				<BarUpdatesList {instance} {product} />
+			</div>
+		{/snippet}
+	</Dropdown>
+</div>
+
+<style>
+	.updates {
+		height: 100%;
+	}
+	.content-inner {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.updates :global(.dropdown .content) {
+		padding: 0;
+		height: 100%;
+	}
+	.unread {
+		position: absolute;
+		top: 0;
+		right: 0;
+		font-size: 8px;
+		width: 15px;
+		height: 15px;
+		display: inline-flex;
+		border-radius: 50%;
+		margin-right: -5px;
+		margin-top: -3px;
+		background: var(--accent);
+		align-items: center;
+		justify-content: center;
+		color: var(--accent-text);
+		font-weight: 600;
+	}
+	.updates :global(.trigger) {
+		position: relative;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import { type BarProduct } from './bar.js';
+declare const BarUpdates: import("svelte").Component<{
+    instance: string;
+    product: BarProduct;
+}, {}, "">;
+type BarUpdates = ReturnType<typeof BarUpdates>;
+export default BarUpdates;