@hyvor/design 1.0.9 → 1.0.11

package/dist/components/Button/Button.svelte

@@ -250,7 +250,11 @@
   background-color: var(--orange-light);
   color: var(--orange-dark);
   transition: 0.2s box-shadow;
-  --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
+  --local-hover-shadow-color: color-mix(
+  	in srgb,
+  	var(--orange-light) 40%,
+  	transparent
+  );
 }
 .button.outline {
   border: 1px solid;
@@ -305,7 +309,11 @@
   border-color: var(--accent);
   color: var(--accent);
   transition: 0.2s box-shadow;
-  --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
+  --local-hover-shadow-color: color-mix(
+  	in srgb,
+  	var(--accent-light) 40%,
+  	transparent
+  );
 }
 .button.outline-fill.gray {
   background-color: var(--gray-light);

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

@@ -1,11 +1,12 @@
-declare const Checkbox: import("svelte").Component<{
-    [key: string]: any;
+interface Props {
     checked?: boolean | undefined;
     group?: (number | string)[];
     value?: string | number;
     disabled?: boolean;
     input?: HTMLInputElement;
-    children?: import("svelte").Snippet;
-}, {}, "checked" | "group" | "input">;
+    children?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "group" | "input">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/Dropdown/DropdownContent.svelte

@@ -67,7 +67,8 @@
 				}
 			} else if (align === 'center') {
 				contentWrap.style.left =
-					Math.max(triggerRect.left + triggerRect.width / 2 - width / 2, SPACE_AROUND) + 'px';
+					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';
 			}
@@ -89,11 +90,11 @@
 		}
 	}
 
-	run(() => {
-		if (position || align) {
-			positionWrap();
-		}
-	});
+	$effect(() => {
+		position;
+		align;
+		positionWrap();
+	})
 
 	function debouncedPosition() {
 		debounce(positionWrap, 10)();
@@ -109,6 +110,10 @@
 			subtree: true,
 			childList: true
 		});
+
+		return () => {
+			mutationObserver.disconnect();
+		};
 	});
 
 	function slideIn(node: any) {

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

@@ -1,12 +1,13 @@
-declare const DropdownContent: import("svelte").Component<{
+interface Props {
     show: boolean;
     width: number;
     relative: boolean;
     closeOnOutsideClick?: boolean;
-    align: "start" | "center" | "end";
-    position: "left" | "right" | "bottom" | "top";
+    align: 'start' | 'center' | 'end';
+    position: 'left' | 'right' | 'bottom' | 'top';
     trigger: HTMLElement;
-    children?: import("svelte").Snippet;
-}, {}, "show">;
+    children?: import('svelte').Snippet;
+}
+declare const DropdownContent: import("svelte").Component<Props, {}, "show">;
 type DropdownContent = ReturnType<typeof DropdownContent>;
 export default DropdownContent;

package/dist/components/HyvorBar/BarUpdatesList.svelte

@@ -95,7 +95,9 @@
 									{update.content}
 								</div>
 								<div class="date">
-									{new Intl.DateTimeFormat('en-US').format(new Date(update.created_at * 1000))}
+									{new Intl.DateTimeFormat('en-US').format(
+										new Date(update.created_at * 1000)
+									)}
 								</div>
 							</div>
 						{/snippet}

package/dist/components/HyvorBar/HyvorBar.svelte

@@ -9,6 +9,8 @@
 	import LogoTalk from '../../marketing/Logo/LogoTalk.svelte';
 	import LogoBlogs from '../../marketing/Logo/LogoBlogs.svelte';
 	import LogoCore from '../../marketing/Logo/LogoCore.svelte';
+	import BarNotice from './Notice/BarNotice.svelte';
+	import BarLicense from './Notice/BarLicense.svelte';
 
 	interface Props {
 		instance?: string;
@@ -75,8 +77,11 @@
 					{getName()}
 				</span>
 			</a>
+			<BarLicense name={getName()} />
 		</div>
 		<div class="right">
+			<BarNotice {instance} />
+
 			<div class="hidden-on-mobile">
 				<BarSupport config={configComplete} {product} mobile={mobileShow} />
 				<BarProducts mobile={mobileShow} />

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

@@ -1,8 +1,9 @@
 import { type BarConfig, type BarProduct } from './bar.js';
-declare const HyvorBar: import("svelte").Component<{
+interface Props {
     instance?: string;
     product: BarProduct;
     config?: Partial<BarConfig>;
-}, {}, "">;
+}
+declare const HyvorBar: import("svelte").Component<Props, {}, "">;
 type HyvorBar = ReturnType<typeof HyvorBar>;
 export default HyvorBar;

package/dist/components/HyvorBar/Notice/BarLicense.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import Tag from '../../Tag/Tag.svelte';
+	import Tooltip from '../../Tooltip/Tooltip.svelte';
+	import { barLicense } from '../bar.js';
+
+	let { name } = $props();
+
+	function daysDiff(unix: number) {
+		const date = new Date(unix * 1000);
+		const now = new Date();
+
+		const diffTime = date.valueOf() - now.valueOf();
+		const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+		return Math.max(diffDays, 1);
+	}
+
+	function remainingTrialDays(endsAt: number | undefined | null) {
+		if (!endsAt) {
+			return 1;
+		}
+		return daysDiff(endsAt);
+	}
+
+	function remainingCancelAtDAys(cancelAt: number | undefined | null) : null | number {
+		if (!cancelAt) {
+			return null;
+		}
+		return daysDiff(cancelAt);
+	}
+
+	let trialDays = $derived(remainingTrialDays($barLicense?.trial_ends_at));
+	let cancelAtDays = $derived(remainingCancelAtDAys($barLicense?.subscription?.cancel_at));
+</script>
+
+{#if $barLicense}
+	<a class="wrap" href="/console/billing">
+		{#if $barLicense.type === 'subscription'}
+			<Tooltip
+				position="bottom"
+			>
+				{#snippet tooltip()}
+					Your current subscription plan for {name}. Click to manage it.
+				{/snippet}
+				<Tag color="blue" size="small">
+					{$barLicense.subscription!.plan_readable}
+					{#if cancelAtDays}
+						(until {cancelAtDays}d)
+					{/if}
+				</Tag>
+			</Tooltip>
+		{:else if $barLicense.type === 'custom'}
+			<Tooltip
+				text="A custom license is applied to your account for {name}."
+				position="bottom"
+			>
+				<Tag color="green" size="small">Custom License</Tag>
+			</Tooltip>
+		{:else if $barLicense.type === 'expired'}
+			<Tooltip
+				text="Your license for {name} has expired. Please renew or upgrade to continue using the service."
+				position="bottom"
+			>
+				<Tag color="red" size="small">License Expired</Tag>
+			</Tooltip>
+		{:else if $barLicense.type === 'trial'}
+			<Tooltip
+				text="You are currently using a trial license for {name}. It will expire in {trialDays} day{trialDays ===
+				1
+					? ''
+					: 's'}."
+				position="bottom"
+			>
+				<Tag color="orange" size="small">
+					Trial License ({trialDays}d)
+				</Tag>
+			</Tooltip>
+		{/if}
+	</a>
+{/if}
+
+<style>
+	.wrap {
+		display: inline-flex;
+		align-items: center;
+		margin-left: 15px;
+	}
+</style>

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

@@ -0,0 +1,5 @@
+declare const BarLicense: import("svelte").Component<{
+    name: any;
+}, {}, "">;
+type BarLicense = ReturnType<typeof BarLicense>;
+export default BarLicense;

package/dist/components/HyvorBar/Notice/BarNotice.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { barHasFailedInvoices } from '../bar.js';
+	import { Tag, Tooltip } from '../../index.js';
+	import IconExclamationCircle from '@hyvor/icons/IconExclamationCircle';
+
+	interface Props {
+		instance?: string;
+	}
+
+	let { instance = 'https://hyvor.com' }: Props = $props();
+</script>
+
+{#if $barHasFailedInvoices}
+	<Tooltip
+		text="You have an unpaid invoice. Please settle to avoid service interruption."
+		position="bottom"
+	>
+		<a href={instance + '/account/billing?pay-failed'}>
+			<Tag color="orange">
+				{#snippet start()}
+					<IconExclamationCircle size={14} />
+				{/snippet}
+				Unpaid Invoice
+			</Tag>
+		</a>
+	</Tooltip>
+{/if}

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

@@ -0,0 +1,6 @@
+interface Props {
+    instance?: string;
+}
+declare const BarNotice: import("svelte").Component<Props, {}, "">;
+type BarNotice = ReturnType<typeof BarNotice>;
+export default BarNotice;

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

@@ -21,8 +21,19 @@ export interface BarUpdate {
     url?: string;
 }
 export type BarUpdateType = 'company' | 'core' | 'talk' | 'blogs' | 'fortguard';
+export interface BarResolvedLicense {
+    type: 'subscription' | 'trial' | 'custom' | 'expired';
+    license: Record<string, number | boolean> | null;
+    subscription: null | {
+        plan_readable: string;
+        cancel_at: null | number;
+    };
+    trial_ends_at: null | number;
+}
 export declare const barUser: import("svelte/store").Writable<BarUser | null>;
 export declare const barUnreadUpdates: import("svelte/store").Writable<number>;
+export declare const barLicense: import("svelte/store").Writable<BarResolvedLicense | null>;
+export declare const barHasFailedInvoices: import("svelte/store").Writable<boolean>;
 export declare function loadBarUser(instance: string, product: BarProduct): void;
 export declare class UnreadUpdatesTimeLocalStorage {
     static KEY: string;

package/dist/components/HyvorBar/bar.js

@@ -1,6 +1,8 @@
 import { writable } from 'svelte/store';
 export const barUser = writable(null);
 export const barUnreadUpdates = writable(0);
+export const barLicense = writable(null);
+export const barHasFailedInvoices = writable(false);
 export function loadBarUser(instance, product) {
     const query = new URLSearchParams();
     query.set('product', product);
@@ -15,6 +17,8 @@ export function loadBarUser(instance, product) {
         .then((data) => {
         barUser.set(data.user);
         barUnreadUpdates.set(data.updates.unread);
+        barLicense.set(data.billing.license);
+        barHasFailedInvoices.set(data.billing.has_failed_invoices);
         if (lastUnreadTime === null) {
             UnreadUpdatesTimeLocalStorage.setNow();
         }

package/dist/components/IconButton/IconButton.svelte

@@ -144,7 +144,11 @@
 .button.fill-light.orange {
   background-color: var(--orange-light);
   color: var(--orange-dark);
-  --local-hover-shadow-color: color-mix(in srgb, var(--orange-light) 40%, transparent);
+  --local-hover-shadow-color: color-mix(
+  	in srgb,
+  	var(--orange-light) 40%,
+  	transparent
+  );
 }
 .button.outline {
   border: 1px solid;
@@ -186,7 +190,11 @@
   background-color: var(--accent-light);
   border-color: var(--accent);
   color: var(--accent);
-  --local-hover-shadow-color: color-mix(in srgb, var(--accent-light) 40%, transparent);
+  --local-hover-shadow-color: color-mix(
+  	in srgb,
+  	var(--accent-light) 40%,
+  	transparent
+  );
 }
 .button.outline-fill.gray {
   background-color: var(--gray-light);

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

@@ -1,6 +1,6 @@
 import { type Component, type Snippet } from 'svelte';
-declare const IconMessage: Component<{
-    size?: "small" | "medium" | "large";
+interface Props {
+    size?: 'small' | 'medium' | 'large';
     icon?: Component;
     iconSize?: number;
     padding?: number;
@@ -14,6 +14,7 @@ declare const IconMessage: Component<{
     } | Snippet;
     children?: Snippet;
     message?: Snippet | string;
-}, {}, "">;
+}
+declare const IconMessage: Component<Props, {}, "">;
 type IconMessage = ReturnType<typeof IconMessage>;
 export default IconMessage;

package/dist/components/Internationalization/T.svelte

@@ -83,7 +83,11 @@
 					newValue = (chunks: string | string[]) => {
 						const children = typeof chunks === 'string' ? chunks : chunks.join('');
 						const id =
-							key + '-' + Math.random().toString(36).substring(7) + '-' + Date.now().toString();
+							key +
+							'-' +
+							Math.random().toString(36).substring(7) +
+							'-' +
+							Date.now().toString();
 						componentBindings.set(id, {
 							component: component!,
 							props: {

package/dist/components/Loader/LoadButton.svelte.d.ts

@@ -1,6 +1,15 @@
 import type { ComponentProps } from 'svelte';
 import Button from '../Button/Button.svelte';
 import Loader from './Loader.svelte';
+interface Props {
+    text: string;
+    show: boolean;
+    loading: boolean;
+    height?: number;
+    divProps?: Record<string, any>;
+    loaderProps?: ComponentProps<typeof Loader>;
+    buttonProps?: ComponentProps<typeof Button>;
+}
 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;
@@ -14,15 +23,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const LoadButton: $$__sveltets_2_IsomorphicComponent<{
-    text: string;
-    show: boolean;
-    loading: boolean;
-    height?: number;
-    divProps?: Record<string, any>;
-    loaderProps?: ComponentProps<typeof Loader>;
-    buttonProps?: ComponentProps<typeof Button>;
-}, {
+declare const LoadButton: $$__sveltets_2_IsomorphicComponent<Props, {
     click: any;
 } & {
     [evt: string]: CustomEvent<any>;

package/dist/components/Modal/Modal.svelte

@@ -102,7 +102,11 @@
 				</div>
 
 				<div class="close-wrap">
-					<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
+					<IconButton
+						variant="invisible"
+						on:click={handleCancel}
+						aria-label="Close modal"
+					>
 						<IconX size={25} />
 					</IconButton>
 				</div>

package/dist/components/TextInput/TextInput.svelte

@@ -21,7 +21,7 @@
 		size = 'medium',
 		block = false,
 		value = $bindable(undefined),
-		input = $bindable({} as HTMLInputElement),
+		input = $bindable(),
 		start,
 		end,
 		select = false,

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

@@ -1,14 +1,15 @@
-declare const TextInput: import("svelte").Component<{
-    [key: string]: any;
-    state?: "default" | "error" | "success" | "warning";
-    size?: "small" | "medium" | "large" | "x-small";
+interface Props {
+    state?: 'default' | 'error' | 'success' | 'warning';
+    size?: 'small' | 'medium' | 'large' | 'x-small';
     block?: boolean;
     value?: any;
     input?: HTMLInputElement;
-    start?: import("svelte").Snippet;
-    end?: import("svelte").Snippet;
+    start?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
     select?: boolean;
     selectInput?: HTMLSelectElement;
-}, {}, "value" | "input" | "selectInput">;
+    [key: string]: any;
+}
+declare const TextInput: import("svelte").Component<Props, {}, "value" | "input" | "selectInput">;
 type TextInput = ReturnType<typeof TextInput>;
 export default TextInput;

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

@@ -1,13 +1,14 @@
-declare const Textarea: import("svelte").Component<{
-    [key: string]: any;
+interface Props {
     value?: any;
     block?: boolean;
     rows?: number;
     cols?: number;
-    state?: "default" | "success" | "warning" | "error";
+    state?: 'default' | 'success' | 'warning' | 'error';
     textarea?: HTMLTextAreaElement;
-    start?: import("svelte").Snippet;
-    end?: import("svelte").Snippet;
-}, {}, "value" | "textarea">;
+    start?: import('svelte').Snippet;
+    end?: import('svelte').Snippet;
+    [key: string]: any;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "value" | "textarea">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/marketing/Docs/Nav/Nav.svelte

@@ -27,7 +27,8 @@
 		}
 
 		const category =
-			(activeEl.closest('.nav-category')?.querySelector('.name') as HTMLElement)?.innerText || null;
+			(activeEl.closest('.nav-category')?.querySelector('.name') as HTMLElement)?.innerText ||
+			null;
 
 		active = {
 			name: activeEl.innerText,

package/dist/marketing/Footer/Footer.svelte

@@ -89,7 +89,8 @@
 						<a href={social.youtube} target="_blank" rel="nofollow"><IconYoutube /></a>
 					{/if}
 					{#if social.linkedin}
-						<a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a>
+						<a href={social.linkedin} target="_blank" rel="nofollow"><IconLinkedin /></a
+						>
 					{/if}
 				</div>
 			</div>

package/package.json

@@ -7,9 +7,11 @@
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
+		"package:watch": "svelte-package --watch",
 		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"check:prettier": "prettier --check ."
 	},
 	"exports": {
 		"./components": {
@@ -35,8 +37,8 @@
 		"@sveltejs/adapter-static": "^3.0.0",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"prettier": "^3.3.3",
-		"prettier-plugin-svelte": "^3.2.7",
+		"prettier": "3.4.2",
+		"prettier-plugin-svelte": "3.3.3",
 		"publint": "^0.1.9",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
@@ -57,5 +59,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.0.9"
+	"version": "1.0.11"
 }