@hyvor/design 2.0.7 → 2.0.8-beta.1

package/dist/cloud/HyvorBar/BarNotice/BarLicense.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
-	import { getCloudContext } from '../../CloudContext/cloudContextState.svelte.js';
+	import { getCloudContext, type ResolvedLicense } from '../../CloudContext/cloudContextState.svelte.js';
 	import Tag from '../../../components/Tag/Tag.svelte';
+	import type { TagSize } from '../../../components/Tag/tag.types.js';
 	import Tooltip from '../../../components/Tooltip/Tooltip.svelte';
 	import IconBuilding from '@hyvor/icons/IconBuilding';
 	import type { Component } from 'svelte';
 
-	let { name } = $props();
+	interface Props {
+		name: string; // product name like Hyvor Talk
+		customLicense?: ResolvedLicense;
+		size?: TagSize;
+		tooltip?: boolean;
+		href?: string | null;
+	}
+
+	let { name, customLicense, size = 'medium', tooltip: showTooltip = true, href = "/console/billing" }: Props = $props();
 
-	const { license } = $derived(getCloudContext());
+	const license = $derived(customLicense || getCloudContext().license);
 
 	function daysDiff(unix: number) {
 		const date = new Date(unix * 1000);
@@ -72,7 +81,7 @@
 			const s = trialDays === 1 ? '' : 's';
 
 			return {
-				name: `Trial License (${trialDays}d)`,
+				name: `Trial (${trialDays}d)`,
 				tooltip: `You organization is currently using a trial license for ${name}. It will expire in ${trialDays} day${s}.`,
 				tagColor: 'orange'
 			};
@@ -91,12 +100,12 @@
 </script>
 
 {#if config}
-	<a class="wrap" href="/console/billing">
-		<Tooltip position="bottom">
+	<a class="wrap" href={href}>
+		<Tooltip position="bottom" disabled={showTooltip === false}>
 			{#snippet tooltip()}
 				{config.tooltip}
 			{/snippet}
-			<Tag color={config.tagColor}>
+			<Tag color={config.tagColor} {size}>
 				{#snippet start()}
 					{#if config.tagIcon}
 						<config.tagIcon size={10} />

package/dist/cloud/HyvorBar/BarNotice/BarLicense.svelte.d.ts

@@ -1,6 +1,13 @@
+import { type ResolvedLicense } from '../../CloudContext/cloudContextState.svelte.js';
+import type { TagSize } from '../../../components/Tag/tag.types.js';
 import type { Component } from 'svelte';
-declare const BarLicense: Component<{
-    name: any;
-}, {}, "">;
+interface Props {
+    name: string;
+    customLicense?: ResolvedLicense;
+    size?: TagSize;
+    tooltip?: boolean;
+    href?: string | null;
+}
+declare const BarLicense: Component<Props, {}, "">;
 type BarLicense = ReturnType<typeof BarLicense>;
 export default BarLicense;

package/dist/cloud/index.d.ts

@@ -2,6 +2,7 @@ export { default as CloudContext } from './CloudContext/CloudContext.svelte';
 export { getCloudContext, setCloudContext, type CloudContext as CloudContextType, type CloudContextUser, type CloudContextOrganization, type OrganizationRole, type OrganizationMember, type ResolvedLicense } from './CloudContext/cloudContextState.svelte.js';
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { bar as hyvorBar } from './HyvorBar/bar.js';
+export { default as BarLicense } from './HyvorBar/BarNotice/BarLicense.svelte';
 export { default as ResourceCreator } from './ResourceCreator/ResourceCreator.svelte';
 export { default as OrganizationMemberSearch } from './OrganizationMembers/OrganizationMembersSearch.svelte';
 export { default as OrganizationCreator } from './OrganizationCreator/OrganizationCreator.svelte';

package/dist/cloud/index.js

@@ -2,6 +2,7 @@ export { default as CloudContext } from './CloudContext/CloudContext.svelte';
 export { getCloudContext, setCloudContext } from './CloudContext/cloudContextState.svelte.js';
 export { default as HyvorBar } from './HyvorBar/HyvorBar.svelte';
 export { bar as hyvorBar } from './HyvorBar/bar.js';
+export { default as BarLicense } from './HyvorBar/BarNotice/BarLicense.svelte';
 export { default as ResourceCreator } from './ResourceCreator/ResourceCreator.svelte';
 export { default as OrganizationMemberSearch } from './OrganizationMembers/OrganizationMembersSearch.svelte';
 export { default as OrganizationCreator } from './OrganizationCreator/OrganizationCreator.svelte';

package/dist/components/Modal/modal-types.d.ts

@@ -8,10 +8,12 @@ export interface Footer {
      */
     cancel?: false | {
         text?: string;
+        disabled?: boolean;
         props?: ComponentProps<typeof Button>;
     };
     confirm?: false | {
         danger?: boolean;
+        disabled?: boolean;
         text?: string;
         props?: ComponentProps<typeof Button>;
     };

package/dist/components/Tag/Tag.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { createBubbler } from 'svelte/legacy';
+	import type { TagSize } from './tag.types.js';
 
 	const bubble = createBubbler();
 
 	interface Props {
 		as?: 'button' | 'a' | 'span';
-		size?: 'x-small' | 'small' | 'medium' | 'large';
+		size?: TagSize;
 		color?:
 			| 'default' // default tag (categories)
 			| 'accent'

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

@@ -1,6 +1,7 @@
+import type { TagSize } from './tag.types.js';
 interface Props {
     as?: 'button' | 'a' | 'span';
-    size?: 'x-small' | 'small' | 'medium' | 'large';
+    size?: TagSize;
     color?: 'default' | 'accent' | 'green' | 'red' | 'blue' | 'orange';
     interactive?: boolean;
     outline?: boolean;

package/dist/components/Tag/tag.types.d.ts

@@ -0,0 +1 @@
+export type TagSize = 'x-small' | 'small' | 'medium' | 'large';

package/dist/components/Tag/tag.types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.0.7",
+	"version": "2.0.8-beta.1",
 	"license": "MIT",
 	"private": false,
 	"repository": {