@hyvor/design 2.1.8 → 2.1.9

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

@@ -12,7 +12,7 @@
 		text="You have an unpaid invoice. Please settle to avoid service interruption."
 		position="bottom"
 	>
-		<a href={instance + '/account/billing?pay-failed'}>
+		<a href={instance + '/account/org/billing?pay-failed'}>
 			<Tag color="orange">
 				{#snippet start()}
 					<IconExclamationCircle size={14} />

package/dist/components/ButtonGroup/ButtonGroup.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	interface Props {
+		column?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { column = false, children }: Props = $props();
+</script>
+
+<div class="button-group" class:column>
+	{@render children?.()}
+</div>
+
+<style>.button-group {
+  display: inline-flex;
+}
+
+.button-group.column {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.button-group :global(> .button) {
+  position: relative;
+}
+
+.button-group :global(> .button:hover),
+.button-group :global(> .button:focus-visible) {
+  z-index: 1;
+}
+
+.button-group:not(.column) :global(> .button:not(:first-child)) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.button-group:not(.column) :global(> .button:not(:last-child)) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.button-group.column :global(> .button:not(:first-child)) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.button-group.column :global(> .button:not(:last-child)) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.button-group:not(.column) :global(> .button:not(:first-child)) {
+  margin-left: -1px;
+}
+
+.button-group.column :global(> .button:not(:first-child)) {
+  margin-top: -1px;
+}
+
+.button-group:not(.column) :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+  content: "";
+  position: absolute;
+  top: 22%;
+  bottom: 22%;
+  left: 0;
+  width: 1px;
+  background-color: currentColor;
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+.button-group.column :global(> .button:not(.outline):not(.outline-fill):not(:first-child))::before {
+  content: "";
+  position: absolute;
+  left: 22%;
+  right: 22%;
+  top: 0;
+  height: 1px;
+  background-color: currentColor;
+  opacity: 0.25;
+  pointer-events: none;
+}</style>

package/dist/components/{Button → ButtonGroup}/ButtonGroup.svelte.d.ts

@@ -1,4 +1,5 @@
 interface Props {
+    column?: boolean;
     children?: import('svelte').Snippet;
 }
 declare const ButtonGroup: import("svelte").Component<Props, {}, "">;

package/dist/components/Modal/ConfirmModalProvider.svelte

@@ -2,7 +2,6 @@
 	import Modal from './Modal.svelte';
 	import { confirmStore } from './confirm.js';
 	import Button from './../Button/Button.svelte';
-	import ButtonGroup from './../Button/ButtonGroup.svelte';
 
 	let show = $state(true);
 
@@ -32,14 +31,12 @@
 		{/if}
 
 		{#snippet footer()}
-			<ButtonGroup>
-				<Button variant="invisible" on:click={handleCancel}>
-					{$confirmStore.cancelText || 'Cancel'}
-				</Button>
-				<Button color={$confirmStore.danger ? 'red' : 'accent'} on:click={handleConfirm}>
-					{$confirmStore.confirmText || 'Confirm'}
-				</Button>
-			</ButtonGroup>
+			<Button variant="invisible" on:click={handleCancel}>
+				{$confirmStore.cancelText || 'Cancel'}
+			</Button>
+			<Button color={$confirmStore.danger ? 'red' : 'accent'} on:click={handleConfirm}>
+				{$confirmStore.confirmText || 'Confirm'}
+			</Button>
 		{/snippet}
 	</Modal>
 {/if}

package/dist/components/Modal/ModalFooter.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import Button from '../Button/Button.svelte';
-	import ButtonGroup from '../Button/ButtonGroup.svelte';
 	import type { Footer } from './modal-types.ts';
 
 	interface Props {
@@ -14,30 +13,28 @@
 	const dispatch = createEventDispatcher();
 </script>
 
-<ButtonGroup>
-	{#if footer.cancel !== false}
-		<Button
-			variant="invisible"
-			on:click={() => {
-				show = false;
-				dispatch('cancel');
-			}}
-			{...footer.cancel?.props}
-			disabled={footer.cancel?.disabled}
-		>
-			{footer.cancel?.text || 'Cancel'}
-		</Button>
-	{/if}
+{#if footer.cancel !== false}
+	<Button
+		variant="invisible"
+		on:click={() => {
+			show = false;
+			dispatch('cancel');
+		}}
+		{...footer.cancel?.props}
+		disabled={footer.cancel?.disabled}
+	>
+		{footer.cancel?.text || 'Cancel'}
+	</Button>
+{/if}
 
-	{#if footer.confirm !== false}
-		<Button
-			variant="fill"
-			color={footer.confirm?.danger ? 'red' : 'accent'}
-			on:click={() => dispatch('confirm')}
-			{...footer.confirm?.props}
-			disabled={footer.confirm?.disabled}
-		>
-			{footer.confirm?.text || 'Confirm'}
-		</Button>
-	{/if}
-</ButtonGroup>
+{#if footer.confirm !== false}
+	<Button
+		variant="fill"
+		color={footer.confirm?.danger ? 'red' : 'accent'}
+		on:click={() => dispatch('confirm')}
+		{...footer.confirm?.props}
+		disabled={footer.confirm?.disabled}
+	>
+		{footer.confirm?.text || 'Confirm'}
+	</Button>
+{/if}

package/dist/components/Toast/ToastMessage.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import ToastIcon from './ToastIcon.svelte';
 	import type { Toast } from './toast.ts';
-	import { fade } from 'svelte/transition';
+	import { fade, fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 
 	interface Props {
 		toast: Toast;
@@ -10,7 +11,7 @@
 	let { toast }: Props = $props();
 </script>
 
-<div class="toast" out:fade={{ duration: 200 }} in:fade={{ duration: 50 }}>
+<div class="toast" in:fly={{ y: 20, duration: 250, easing: cubicOut }} out:fade={{ duration: 150 }}>
 	{#if toast.type !== 'blank'}
 		<div class="icon-wrap">
 			<ToastIcon {toast} />
@@ -28,7 +29,6 @@
 
 <style>
 	.toast {
-		margin-bottom: 10px;
 		box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
 		border-radius: var(--box-radius);
 		background-color: var(--box-background);
@@ -38,9 +38,6 @@
 		max-width: 350px;
 		pointer-events: initial;
 	}
-	.toast:first-child {
-		margin-top: 10px;
-	}
 	.icon-wrap {
 		margin-right: 8px;
 		display: inline-flex;

package/dist/components/Toast/ToastProvider.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { flip } from 'svelte/animate';
 	import ToastMessage from './ToastMessage.svelte';
 	import { toastStore } from './toast.js';
 	import { useCleaner } from './cleaner.js';
@@ -8,21 +9,24 @@
 
 <div id="toasts-wrap">
 	{#each $toastStore as toast (toast.id)}
-		<ToastMessage {toast} />
+		<div class="toast-item" animate:flip={{ duration: 200 }}>
+			<ToastMessage {toast} />
+		</div>
 	{/each}
 </div>
 
 <style>
 	#toasts-wrap {
 		position: fixed;
-		top: 0;
+		bottom: 0;
 		left: 0;
 		width: 100%;
 		z-index: 20000000;
 		display: flex;
-		flex-direction: column;
+		flex-direction: column-reverse;
 		align-items: center;
-		justify-content: center;
+		gap: 10px;
+		padding: 10px 0 24px;
 		pointer-events: none;
 	}
 </style>

package/dist/components/index.d.ts

@@ -7,7 +7,7 @@ export { default as AvatarStack } from './Avatar/AvatarStack.svelte';
 export { default as Base } from './Base/Base.svelte';
 export { default as Box } from './Box/Box.svelte';
 export { default as Button } from './Button/Button.svelte';
-export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
+export { default as ButtonGroup } from './ButtonGroup/ButtonGroup.svelte';
 export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';

package/dist/components/index.js

@@ -7,7 +7,7 @@ export { default as AvatarStack } from './Avatar/AvatarStack.svelte';
 export { default as Base } from './Base/Base.svelte';
 export { default as Box } from './Box/Box.svelte';
 export { default as Button } from './Button/Button.svelte';
-export { default as ButtonGroup } from './Button/ButtonGroup.svelte';
+export { default as ButtonGroup } from './ButtonGroup/ButtonGroup.svelte';
 export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.svelte';
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';

package/package.json

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

package/dist/components/Button/ButtonGroup.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	interface Props {
-		children?: import('svelte').Snippet;
-	}
-
-	let { children }: Props = $props();
-</script>
-
-<div class="button-group">
-	{@render children?.()}
-</div>
-
-<style>
-	.button-group {
-		display: inline-flex;
-		gap: 6px;
-	}
-</style>