@hyvor/design 2.0.15 → 2.0.16

package/dist/cloud/HyvorBar/BarSupport.svelte

@@ -12,7 +12,6 @@
 	import IconDiscord from '@hyvor/icons/IconDiscord';
 	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
 	import IconFileEarmark from '@hyvor/icons/IconFileEarmark';
-	import IconChatDots from '@hyvor/icons/IconChatDots';
 	import IconBluesky from '@hyvor/icons/IconBluesky';
 	import IconLinkedin from '@hyvor/icons/IconLinkedin';
 	import type { BarConfig } from './bar.js';
@@ -34,14 +33,6 @@
 
 	const cloudContext = $derived(getCloudContext());
 
-	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;
@@ -107,19 +98,6 @@
 					</ActionListItem>
 				</a>
 			{/if}
-			{#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={SOCIAL_LINKS.discord} target="_blank">

package/dist/components/ConsoleLoader/ConsoleLoader.svelte

@@ -4,7 +4,7 @@
 		size?: number;
 	}
 
-	let { logo, size = 100 }: Props = $props();
+	let { logo, size = 80 }: Props = $props();
 </script>
 
 <div class="loader">

package/dist/components/TernaryStatus/TernaryStatus.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+	import IconXCircleFill from '@hyvor/icons/IconXCircleFill';
+	import IconDashCircleFill from '@hyvor/icons/IconDashCircleFill';
+
+	interface Props {
+		status: 'positive' | 'negative' | 'neutral';
+		text?: string;
+		iconSize?: number;
+		fontSize?: string;
+		color?: string;
+		icon?: Snippet | false;
+	}
+
+	let {
+		status,
+		text = undefined,
+		iconSize = 20,
+		fontSize = undefined,
+		color = undefined,
+		icon = undefined
+	}: Props = $props();
+
+	let resolvedText = $derived(
+		text ?? (status === 'positive' ? 'Yes' : status === 'negative' ? 'No' : '')
+	);
+
+	let resolvedColor = $derived(
+		color ??
+			(status === 'positive'
+				? 'var(--green)'
+				: status === 'negative'
+					? 'var(--red)'
+					: 'var(--text-light)')
+	);
+</script>
+
+<span class="ternary-status" style:color={resolvedColor} style:font-size={fontSize}>
+	{#if icon !== false}
+		<span class="icon">
+			{#if icon}
+				{@render icon()}
+			{:else if status === 'positive'}
+				<IconCheckCircleFill size={iconSize} />
+			{:else if status === 'negative'}
+				<IconXCircleFill size={iconSize} />
+			{:else}
+				<IconDashCircleFill size={iconSize} />
+			{/if}
+		</span>
+	{/if}
+	{#if resolvedText}
+		<span class="text">{resolvedText}</span>
+	{/if}
+</span>
+
+<style>
+	.ternary-status {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.icon {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    status: 'positive' | 'negative' | 'neutral';
+    text?: string;
+    iconSize?: number;
+    fontSize?: string;
+    color?: string;
+    icon?: Snippet | false;
+}
+declare const TernaryStatus: import("svelte").Component<Props, {}, "">;
+type TernaryStatus = ReturnType<typeof TernaryStatus>;
+export default TernaryStatus;

package/dist/components/index.d.ts

@@ -49,6 +49,7 @@ export { default as TableCell } from './Table/TableCell.svelte';
 export { default as TabNav } from './TabNav/TabNav.svelte';
 export { default as TabNavItem } from './TabNav/TabNavItem.svelte';
 export { default as Tag } from './Tag/Tag.svelte';
+export { default as TernaryStatus } from './TernaryStatus/TernaryStatus.svelte';
 export { default as Textarea } from './Textarea/Textarea.svelte';
 export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';

package/dist/components/index.js

@@ -49,6 +49,7 @@ export { default as TableCell } from './Table/TableCell.svelte';
 export { default as TabNav } from './TabNav/TabNav.svelte';
 export { default as TabNavItem } from './TabNav/TabNavItem.svelte';
 export { default as Tag } from './Tag/Tag.svelte';
+export { default as TernaryStatus } from './TernaryStatus/TernaryStatus.svelte';
 export { default as Textarea } from './Textarea/Textarea.svelte';
 export { default as Text } from './Text/Text.svelte';
 export { default as TextInput } from './TextInput/TextInput.svelte';

package/dist/variables.scss

@@ -22,11 +22,11 @@
     * In most cases, no need to extend these colors
     */
 	--green-light: #cadfca;
-	--green: #5d995d;
+	--green: #4b874b;
 	--green-dark: #335c33;
 
 	--red-dark: #ab2525;
-	--red: #db7474;
+	--red: #c05959;
 	--red-light: #ffdfdf;
 
 	--blue-dark: #334b81;
@@ -34,7 +34,7 @@
 	--blue-light: #dae5ff;
 
 	--orange-dark: #8b5b04;
-	--orange: #e2b500;
+	--orange: #a98526;
 	--orange-light: #efe3b4;
 
 	--gray-light: #ddd;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.0.15",
+	"version": "2.0.16",
 	"license": "MIT",
 	"private": false,
 	"repository": {