@hyvor/design 2.1.0 → 2.1.2

package/dist/components/Base/Base.svelte

@@ -14,7 +14,7 @@
 	let { dark = false, children }: Props = $props();
 </script>
 
-<div id="base">
+<div id="hds-base">
 	{@render children?.()}
 </div>
 

package/dist/components/Callout/Callout.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import IconCheckCircle from '@hyvor/icons/IconCheckCircle';
+	import IconExclamationCircle from '@hyvor/icons/IconExclamationCircle';
+	import IconExclamationTriangle from '@hyvor/icons/IconExclamationTriangle';
+	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
+
+	const defaultIcons = {
+		soft: undefined,
+		info: IconInfoCircle,
+		success: IconCheckCircle,
+		warning: IconExclamationCircle,
+		danger: IconExclamationTriangle
+	};
 
 	const {
 		type = 'soft',
@@ -7,34 +19,59 @@
 		children = undefined,
 		text = undefined,
 		icon = undefined,
-		...rest
+		showIcon = true,
+		fg = undefined,
+		bg = undefined
 	}: {
 		type?: 'info' | 'success' | 'warning' | 'danger' | 'soft';
 		title?: string | Snippet;
 		icon?: Snippet;
+		/** Whether to show an icon. Defaults to the icon matching `type`, unless a custom `icon` snippet is given. */
+		showIcon?: boolean;
 		text?: string | Snippet;
 		children?: Snippet;
-		[key: string]: any;
+		/** Custom text color. Overrides `type`. If `bg` is not set, a matching background is derived from it. */
+		fg?: string;
+		/** Custom background color. Overrides `type`. If `fg` is not set, a matching text color is derived from it. */
+		bg?: string;
 	} = $props();
+
+	const DefaultIcon = $derived(defaultIcons[type]);
+
+	const style = $derived.by(() => {
+		if (fg === undefined && bg === undefined) {
+			return undefined;
+		}
+
+		const finalFg = fg ?? `color-mix(in srgb, ${bg} 55%, black)`;
+		const finalBg = bg ?? `color-mix(in srgb, ${fg} 15%, white)`;
+
+		return `color: ${finalFg}; background-color: ${finalBg};`;
+	});
 </script>
 
-<div class={'callout ' + type} {...rest}>
+{#snippet iconContent()}
+	{#if icon}
+		{@render icon()}
+	{:else}
+		<DefaultIcon />
+	{/if}
+{/snippet}
+
+<div class={'callout ' + type} {style}>
 	{#if typeof title === 'string'}
 		<div class="title-wrap">
-			{#if icon}
-				<span
-					class="title-icon
-		"
-				>
-					{@render icon()}
+			{#if showIcon}
+				<span class="title-icon">
+					{@render iconContent()}
 				</span>
 			{/if}
 			<div class="title">{title}</div>
 		</div>
 	{:else if title !== undefined}
 		<div class="title-wrap">
-			{#if icon}
-				<span class="title-icon">{@render icon()}</span>
+			{#if showIcon}
+				<span class="title-icon">{@render iconContent()}</span>
 			{/if}
 
 			<div class="title">{@render title?.()}</div>
@@ -42,8 +79,8 @@
 	{/if}
 
 	<div class="text-wrap">
-		{#if icon && !title}
-			<span class="icon">{@render icon()}</span>
+		{#if showIcon && !title}
+			<span class="icon">{@render iconContent()}</span>
 		{/if}
 
 		<div class="text">
@@ -61,7 +98,7 @@
 
 <style>
 	.callout {
-		padding: 15px 25px;
+		padding: 10px 20px;
 		border-radius: var(--box-radius);
 		line-height: var(--line-height-content);
 	}
@@ -92,16 +129,16 @@
 	}
 
 	.title-wrap {
-		margin-bottom: 4px;
 		display: flex;
 		align-items: center;
 		font-weight: 600;
-		font-size: 18px;
 	}
 
 	.title-icon {
-		vertical-align: middle;
-		margin-right: 8px;
+		margin-right: 6px;
+		display: inline-flex;
+		height: var(--line-height-content);
+		align-items: center;
 	}
 
 	.text-wrap {
@@ -110,7 +147,22 @@
 	}
 
 	.icon {
-		margin-right: 8px;
-		font-size: 18px;
+		margin-right: 6px;
+		font-size: 16px;
+		display: inline-flex;
+		height: var(--line-height-content);
+		align-items: center;
+	}
+
+	.text :global(p) {
+		margin: 0.5em 0;
+	}
+
+	.text :global(p:first-child) {
+		margin-top: 0;
+	}
+
+	.text :global(p:last-child) {
+		margin-bottom: 0;
 	}
 </style>

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

@@ -3,9 +3,14 @@ type $$ComponentProps = {
     type?: 'info' | 'success' | 'warning' | 'danger' | 'soft';
     title?: string | Snippet;
     icon?: Snippet;
+    /** Whether to show an icon. Defaults to the icon matching `type`, unless a custom `icon` snippet is given. */
+    showIcon?: boolean;
     text?: string | Snippet;
     children?: Snippet;
-    [key: string]: any;
+    /** Custom text color. Overrides `type`. If `bg` is not set, a matching background is derived from it. */
+    fg?: string;
+    /** Custom background color. Overrides `type`. If `fg` is not set, a matching text color is derived from it. */
+    bg?: string;
 };
 declare const Callout: import("svelte").Component<$$ComponentProps, {}, "">;
 type Callout = ReturnType<typeof Callout>;

package/dist/components/Modal/Modal.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ModalFooter from './ModalFooter.svelte';
 	import type { Footer } from './modal-types.js';
+	import { portal } from './portal.js';
 	import IconX from '@hyvor/icons/IconX';
 	import IconButton from './../IconButton/IconButton.svelte';
 	import { fade, scale } from 'svelte/transition';
@@ -12,6 +13,10 @@
 		show?: boolean;
 		title?: string | Snippet;
 		size?: 'small' | 'medium' | 'large';
+		width?: string;
+		height?: string;
+		bare?: boolean;
+		appendToBody?: boolean;
 		id?: string;
 		role?: 'dialog' | 'alertdialog';
 		closeOnOutsideClick?: boolean;
@@ -28,6 +33,10 @@
 		show = $bindable(false),
 		title,
 		size = 'medium',
+		width,
+		height,
+		bare = false,
+		appendToBody = false,
 		id = 'modal',
 		role = 'alertdialog',
 		closeOnOutsideClick = true,
@@ -44,6 +53,10 @@
 	const titleId = id + '-title';
 	const descId = id + '-desc';
 
+	const innerStyle = $derived(
+		[width ? `width: ${width}` : '', height ? `height: ${height}` : ''].filter(Boolean).join('; ')
+	);
+
 	let wrapEl: HTMLDivElement | undefined = $state();
 	let innerEl: HTMLDivElement | undefined = $state();
 
@@ -91,41 +104,46 @@
 		role="presentation"
 		class="wrap"
 		bind:this={wrapEl}
+		use:portal={appendToBody ? '#hds-base' : false}
 		transition:fade|global={{ duration: 100 }}
 		onclick={(e) => handleClose(e)}
 	>
 		<div
 			class="inner {size}"
+			class:bare
+			style={innerStyle || undefined}
 			transition:scale|global={{ duration: 100, start: 0.9, opacity: 0.9 }}
 			bind:this={innerEl}
 			{role}
 			aria-modal="true"
-			aria-labelledby={titleId}
+			aria-labelledby={bare ? undefined : titleId}
 			aria-describedby={descId}
 		>
-			<div class="header">
-				<div class="title" id={titleId}>
-					{#if typeof title === 'string'}
-						<span>{title}</span>
-					{:else}
-						{@render title?.()}
-					{/if}
-				</div>
+			{#if !bare}
+				<div class="header">
+					<div class="title" id={titleId}>
+						{#if typeof title === 'string'}
+							<span>{title}</span>
+						{:else}
+							{@render title?.()}
+						{/if}
+					</div>
 
-				<div class="close-wrap">
-					{#if hasClose}
-						<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
-							<IconX size={25} />
-						</IconButton>
-					{/if}
+					<div class="close-wrap">
+						{#if hasClose}
+							<IconButton variant="invisible" on:click={handleCancel} aria-label="Close modal">
+								<IconX size={25} />
+							</IconButton>
+						{/if}
+					</div>
 				</div>
-			</div>
+			{/if}
 
 			<div class="content" id={descId}>
 				{@render children?.()}
 			</div>
 
-			{#if footer}
+			{#if footer && !bare}
 				<div class="footer">
 					{#if typeof footer === 'object'}
 						<ModalFooter {footer} bind:show on:cancel on:confirm />
@@ -168,7 +186,7 @@
 		z-index: 10000000;
 		width: 100%;
 		height: 100%;
-		background: rgba(0, 0, 0, 0.5);
+		background: rgba(0, 0, 0, 0.15);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -209,6 +227,14 @@
 	.content {
 		padding: 20px 25px;
 	}
+	.inner.bare {
+		display: flex;
+		flex-direction: column;
+	}
+	.inner.bare .content {
+		padding: 0;
+		flex: 1;
+	}
 
 	.footer {
 		padding: 20px 25px;

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

@@ -4,6 +4,10 @@ interface Props {
     show?: boolean;
     title?: string | Snippet;
     size?: 'small' | 'medium' | 'large';
+    width?: string;
+    height?: string;
+    bare?: boolean;
+    appendToBody?: boolean;
     id?: string;
     role?: 'dialog' | 'alertdialog';
     closeOnOutsideClick?: boolean;

package/dist/components/Modal/portal.d.ts

@@ -0,0 +1,4 @@
+export declare function portal(node: HTMLElement, target?: string | HTMLElement | false): {
+    update: (t: string | HTMLElement | false) => void;
+    destroy(): void;
+};

package/dist/components/Modal/portal.js

@@ -0,0 +1,25 @@
+export function portal(node, target = false) {
+    const originalParent = node.parentNode;
+    const originalNextSibling = node.nextSibling;
+    function resolveTarget(t) {
+        if (typeof t !== 'string')
+            return t;
+        return document.querySelector(t) ?? document.body;
+    }
+    function place(t) {
+        if (t === false) {
+            if (originalParent && node.parentNode !== originalParent) {
+                originalParent.insertBefore(node, originalNextSibling);
+            }
+            return;
+        }
+        resolveTarget(t).appendChild(node);
+    }
+    place(target);
+    return {
+        update: place,
+        destroy() {
+            node.remove();
+        }
+    };
+}

package/package.json

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