@hyvor/design 2.0.6 → 2.0.7

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/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/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.7",
 	"license": "MIT",
 	"private": false,
 	"repository": {