@hyvor/design 2.0.6 → 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/ActionList/ActionListItem.svelte

@@ -20,7 +20,7 @@
 	}
 
 	let {
-		selected = $bindable(false),
+		selected = $bindable(),
 		disabled = false,
 		type = 'default',
 		start,
@@ -30,8 +30,6 @@
 		...rest
 	}: Props = $props();
 
-	selected = selection() !== 'none' && selected;
-
 	const dispatch = createEventDispatcher();
 
 	function handleClick() {

package/dist/components/ActionList/Selected.svelte

@@ -4,13 +4,13 @@
 
 	interface Props {
 		selection: 'none' | 'single' | 'multi';
-		selected: boolean;
+		selected?: boolean | undefined;
 	}
 
-	let { selection, selected = $bindable(false) }: Props = $props();
+	let { selection, selected = $bindable() }: Props = $props();
 </script>
 
-{#if selection !== 'none'}
+{#if selection !== 'none' && selected !== undefined}
 	<span class="selected">
 		{#if selection === 'multi'}
 			<span style="transform:scale(0.9);transform-origin:top">

package/dist/components/ActionList/Selected.svelte.d.ts

@@ -1,6 +1,6 @@
 interface Props {
     selection: 'none' | 'single' | 'multi';
-    selected: boolean;
+    selected?: boolean | undefined;
 }
 declare const Selected: import("svelte").Component<Props, {}, "selected">;
 type Selected = ReturnType<typeof Selected>;

package/dist/components/Button/Button.svelte

@@ -121,6 +121,7 @@
   font-weight: 600;
   font-size: 14px;
   border-radius: 20px;
+  line-height: 1;
   cursor: pointer;
   --local-hover-shadow-size: 2.5px;
   --local-hover-shadow-color: var(--accent-light);
@@ -160,8 +161,7 @@
 
 /* Sizes */
 .button.x-small {
-  height: 20px;
-  padding: 0 8px;
+  padding: 4px 8px;
   font-size: 12px;
   --local-hover-shadow-size: 1px;
 }
@@ -170,8 +170,7 @@
 }
 
 .button.small {
-  height: 26px;
-  padding: 0 12px;
+  padding: 6px 12px;
   --local-hover-shadow-size: 2px;
 }
 .button.small:active {
@@ -185,13 +184,11 @@
 }
 
 .button.medium {
-  height: 30px;
-  padding: 0 14px;
+  padding: 8px 14px;
 }
 
 .button.large {
-  height: 36px;
-  padding: 0 20px;
+  padding: 11px 20px;
   --local-hover-shadow-size: 3px;
 }
 .button.large:active {
@@ -199,8 +196,7 @@
 }
 
 .button.x-large {
-  height: 40px;
-  padding: 0 26px;
+  padding: 12px 26px;
   font-size: 16px;
 }
 

package/dist/components/ConsoleLoader/ConsoleLoader.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	interface Props {
+		logo: string;
+		size?: number;
+	}
+
+	let { logo, size = 100 }: Props = $props();
+</script>
+
+<div class="loader">
+	<div class="hyvor-icon">
+		<img src={logo} alt="Logo" width={size} height={size} />
+	</div>
+	<div class="shadow-wrap">
+		<div class="shadow" style="width: calc({size}px * 0.95); height: calc({size}px * 0.12);"></div>
+	</div>
+</div>
+
+<style>
+	@keyframes bounce {
+		0% {
+			transform: translateY(0);
+		}
+		50% {
+			transform: translateY(-24px);
+		}
+		100% {
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes shadowPulse {
+		0%,
+		100% {
+			transform: scale(1.2);
+			opacity: 1;
+		}
+		50% {
+			transform: scale(0.8);
+			opacity: 0.4;
+		}
+	}
+
+	.loader {
+		position: fixed;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		inset: 0;
+	}
+
+	.hyvor-icon {
+		animation: bounce 1.2s infinite;
+		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.shadow-wrap {
+		height: 20px;
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+	}
+
+	.shadow {
+		background: rgba(0, 0, 0, 0.2);
+		border-radius: 50%;
+		filter: blur(8px);
+		will-change: transform, opacity;
+		animation: shadowPulse 1.2s infinite;
+		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    logo: string;
+    size?: number;
+}
+declare const ConsoleLoader: import("svelte").Component<Props, {}, "">;
+type ConsoleLoader = ReturnType<typeof ConsoleLoader>;
+export default ConsoleLoader;

package/dist/components/FileUploader/FileUploader.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import IconCardImage from '@hyvor/icons/IconCardImage';
 	import IconCaretLeft from '@hyvor/icons/IconCaretLeft';
 	import IconCloudUpload from '@hyvor/icons/IconCloudUpload';
 	import Button from '../Button/Button.svelte';
@@ -46,8 +45,8 @@
 						Back
 					</Button>
 				{:else}
-					<TabNav bind:active={tab}>
-						<TabNavItem name="upload">
+					<TabNav>
+						<TabNavItem name="upload" active>
 							{#snippet start()}
 								<IconCloudUpload />
 							{/snippet}

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/TabNav/TabNav.svelte

@@ -1,31 +1,23 @@
 <script lang="ts">
-	import { onMount, setContext } from 'svelte';
-	import { writable } from 'svelte/store';
+	import { setContext } from 'svelte';
 
 	interface Props {
-		active: string;
+		basePath?: string;
+		replaceState?: boolean;
 		children?: import('svelte').Snippet;
-		[key: string]: any;
 	}
 
-	let { active = $bindable(), children, ...rest }: Props = $props();
+	let { children, basePath, replaceState = false }: Props = $props();
 
-	const activeStore = writable(active);
-	setContext('tab-nav-active', activeStore);
+	const tabNavState = {
+		basePath,
+		replaceState
+	};
 
-	$effect(() => {
-		activeStore.set(active);
-	});
-
-	onMount(() => {
-		const unsubscribe = activeStore.subscribe((value) => {
-			active = value;
-		});
-		return unsubscribe;
-	});
+	setContext('tab-nav-state', tabNavState);
 </script>
 
-<div class="tab-nav" {...rest}>
+<div class="tab-nav">
 	{@render children?.()}
 </div>
 

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

@@ -1,8 +1,8 @@
 interface Props {
-    active: string;
+    basePath?: string;
+    replaceState?: boolean;
     children?: import('svelte').Snippet;
-    [key: string]: any;
 }
-declare const TabNav: import("svelte").Component<Props, {}, "active">;
+declare const TabNav: import("svelte").Component<Props, {}, "">;
 type TabNav = ReturnType<typeof TabNav>;
 export default TabNav;

package/dist/components/TabNav/TabNavItem.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { createBubbler, handlers } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	import { getContext } from 'svelte';
-	import type { Writable } from 'svelte/store';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import type { TabNavState } from './tabnav.js';
 
 	interface Props {
 		active?: boolean;
@@ -11,26 +10,40 @@
 		start?: import('svelte').Snippet;
 		children?: import('svelte').Snippet;
 		end?: import('svelte').Snippet;
-		[key: string]: any;
+		index?: boolean; // index for path-based activation
+
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let { active = false, name, start, children, end, index, onclick }: Props = $props();
+
+	const tabNavState = getContext('tab-nav-state') as TabNavState;
+
+	function getTabPath() {
+		if (!tabNavState.basePath) return '';
+		return index ? `${tabNavState.basePath}` : `${tabNavState.basePath}/${name}`;
 	}
 
-	let { active = false, name, start, children, end, ...rest }: Props = $props();
+	let isActive = $derived.by(() => {
+		if (active) return true;
 
-	const activeStore = getContext('tab-nav-active') as Writable<string>;
+		if (tabNavState.basePath) {
+			const currentUrl = page.url.pathname;
+			return currentUrl === getTabPath();
+		}
 
-	let isActive = $derived($activeStore === name || active);
+		return false;
+	});
 
-	function handleClick() {
-		activeStore.set(name);
+	function handleClick(event: MouseEvent) {
+		if (tabNavState.basePath) {
+			goto(getTabPath());
+		}
+		onclick?.(event);
 	}
 </script>
 
-<button
-	class="tab"
-	class:active={isActive}
-	onclick={handlers(handleClick, bubble('click'))}
-	{...rest}
->
+<button class="tab" class:active={isActive} onclick={handleClick}>
 	{#if start}
 		<span class="start">
 			{@render start?.()}

package/dist/components/TabNav/TabNavItem.svelte.d.ts

@@ -4,7 +4,8 @@ interface Props {
     start?: import('svelte').Snippet;
     children?: import('svelte').Snippet;
     end?: import('svelte').Snippet;
-    [key: string]: any;
+    index?: boolean;
+    onclick?: (event: MouseEvent) => void;
 }
 declare const TabNavItem: import("svelte").Component<Props, {}, "">;
 type TabNavItem = ReturnType<typeof TabNavItem>;

package/dist/components/TabNav/tabnav.d.ts

@@ -0,0 +1,4 @@
+export interface TabNavState {
+    basePath: string | undefined;
+    replaceState: boolean;
+}

package/dist/components/TabNav/tabnav.js

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

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/dist/components/index.d.ts

@@ -14,6 +14,7 @@ export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
 export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as ConsoleLoader } from './ConsoleLoader/ConsoleLoader.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as DetailCard } from './DetailCard/DetailCard.svelte';

package/dist/components/index.js

@@ -14,6 +14,7 @@ export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
 export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
+export { default as ConsoleLoader } from './ConsoleLoader/ConsoleLoader.svelte';
 export { default as DarkProvider } from './Dark/DarkProvider.svelte';
 export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 export { default as DetailCard } from './DetailCard/DetailCard.svelte';

package/package.json

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