@hyvor/design 0.0.67 → 1.0.3

package/dist/components/Avatar/AvatarStack.svelte

@@ -1,32 +1,34 @@
-<script>export let size = "medium";
-const sizes = {
-  small: 24,
-  medium: 32,
-  large: 48
-};
-size = typeof size === "number" ? size : sizes[size];
+<script lang="ts">
+	interface Props {
+		size?: number | 'small' | 'medium' | 'large';
+		children?: import('svelte').Snippet;
+	}
+
+	let { size = $bindable('medium'), children }: Props = $props();
+	const sizes = {
+		small: 24,
+		medium: 32,
+		large: 48
+	};
+	size = typeof size === 'number' ? size : sizes[size];
 </script>
 
-<div 
-    class="stack"
-    style:--local-size={size + "px"}
->
-    <slot />
+<div class="stack" style:--local-size={size + 'px'}>
+	{@render children?.()}
 </div>
 
-
 <style>
-    .stack {
-        display: inline-flex;
-        cursor: pointer;
-    }
-    .stack :global(img) {
-        transition: .2s;
-    }
-    .stack :global(img:not(:first-child)) {
-        margin-left: calc(var(--local-size) * -0.5);
-    }
-    .stack:hover :global(img:not(:first-child)) {
-        margin-left: 3px;
-    }
-</style>
+	.stack {
+		display: inline-flex;
+		cursor: pointer;
+	}
+	.stack :global(img) {
+		transition: 0.2s;
+	}
+	.stack :global(img:not(:first-child)) {
+		margin-left: calc(var(--local-size) * -0.5);
+	}
+	.stack:hover :global(img:not(:first-child)) {
+		margin-left: 3px;
+	}
+</style>

package/dist/components/Avatar/AvatarStack.svelte.d.ts

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        size?: number | "small" | "medium" | "large" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type AvatarStackProps = typeof __propDef.props;
-export type AvatarStackEvents = typeof __propDef.events;
-export type AvatarStackSlots = typeof __propDef.slots;
-export default class AvatarStack extends SvelteComponent<AvatarStackProps, AvatarStackEvents, AvatarStackSlots> {
-}
-export {};
+declare const AvatarStack: import("svelte").Component<{
+    size?: number | "small" | "medium" | "large";
+    children?: import("svelte").Snippet;
+}, {}, "size">;
+type AvatarStack = ReturnType<typeof AvatarStack>;
+export default AvatarStack;

package/dist/components/Base/Base.svelte

@@ -1,17 +1,25 @@
-<script>import ConfirmModalProvider from "./../Modal/ConfirmModalProvider.svelte";
-import DarkProvider from "./../Dark/DarkProvider.svelte";
-import "../../index.js";
-import ToastProvider from "../Toast/ToastProvider.svelte";
-export let dark = false;
+<script lang="ts">
+	import ConfirmModalProvider from './../Modal/ConfirmModalProvider.svelte';
+	// import InternationalizationProvider from './../Internationalization/InternationalizationProvider.svelte';
+	import DarkProvider from './../Dark/DarkProvider.svelte';
+	import '../../index.js';
+	import ToastProvider from '../Toast/ToastProvider.svelte';
+
+	interface Props {
+		dark?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { dark = false, children }: Props = $props();
 </script>
 
 <div id="base">
-    <slot />
+	{@render children?.()}
 </div>
 
 {#if dark}
-    <DarkProvider />
+	<DarkProvider />
 {/if}
 
 <ToastProvider />
-<ConfirmModalProvider />
+<ConfirmModalProvider />

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
 import '../../index.js';
-declare const __propDef: {
-    props: {
-        dark?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type BaseProps = typeof __propDef.props;
-export type BaseEvents = typeof __propDef.events;
-export type BaseSlots = typeof __propDef.slots;
-export default class Base extends SvelteComponent<BaseProps, BaseEvents, BaseSlots> {
-}
-export {};
+declare const Base: import("svelte").Component<{
+    dark?: boolean;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Base = ReturnType<typeof Base>;
+export default Base;

package/dist/components/Box/Box.svelte

@@ -1,12 +1,19 @@
-<script>export let as = "div";
+<script lang="ts">
+	interface Props {
+		as?: string;
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let { as = 'div', children, ...rest }: Props = $props();
 </script>
 
-<svelte:element 
-    this={as}
-    style:box-shadow="var(--box-shadow)"
-    style:border-radius="var(--box-radius)"
-    style:background-color="var(--box-background)"
-    {...$$restProps}
+<svelte:element
+	this={as}
+	style:box-shadow="var(--box-shadow)"
+	style:border-radius="var(--box-radius)"
+	style:background-color="var(--box-background)"
+	{...rest}
 >
-    <slot />
-</svelte:element>
+	{@render children?.()}
+</svelte:element>

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        as?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type BoxProps = typeof __propDef.props;
-export type BoxEvents = typeof __propDef.events;
-export type BoxSlots = typeof __propDef.slots;
-export default class Box extends SvelteComponent<BoxProps, BoxEvents, BoxSlots> {
-}
-export {};
+declare const Box: import("svelte").Component<{
+    [key: string]: any;
+    as?: string;
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type Box = ReturnType<typeof Box>;
+export default Box;

package/dist/components/Button/Button.svelte

@@ -1,59 +1,77 @@
-<script>export let as = "button";
-export let size = "medium";
-export let color = "accent";
-export let block = false;
-export let variant = "fill";
-export let align = "center";
-export let button = {};
-</script>
-
-<svelte:element 
-    this={as}
-    class="button {size} {color} {variant} {align}"
-    class:block={block}
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
 
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
+	const bubble = createBubbler();
 
-    role="button"
-    tabindex="0"
+	interface Props {
+		as?: 'button' | 'a';
+		size?: 'x-small' | 'small' | 'medium' | 'large';
+		color?: 'accent' | 'gray' | 'green' | 'red' | 'blue' | 'orange' | 'input';
+		block?: boolean;
+		variant?: 'fill' | 'fill-light' | 'outline' | 'invisible' | 'outline-fill';
+		align?: 'start' | 'center';
+		button?: any;
+		start?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		action?: import('svelte').Snippet;
+		[key: string]: any;
+	}
 
-    bind:this={button}
+	let {
+		as = 'button',
+		size = 'medium',
+		color = 'accent',
+		block = false,
+		variant = 'fill',
+		align = 'center',
+		button = $bindable({} as HTMLButtonElement | HTMLAnchorElement),
+		start,
+		children,
+		end,
+		action,
+		...rest
+	}: Props = $props();
+</script>
 
-    {...$$restProps}
+<svelte:element
+	this={as}
+	class="button {size} {color} {variant} {align}"
+	class:block
+	onkeyup={bubble('keyup')}
+	onkeydown={bubble('keydown')}
+	onkeypress={bubble('keypress')}
+	onfocus={bubble('focus')}
+	onblur={bubble('blur')}
+	onclick={bubble('click')}
+	onmouseover={bubble('mouseover')}
+	onmouseenter={bubble('mouseenter')}
+	onmouseleave={bubble('mouseleave')}
+	onchange={bubble('change')}
+	role="button"
+	tabindex="0"
+	bind:this={button}
+	{...rest}
 >
+	<span class="button-content">
+		{#if start}
+			<span class="slot start">{@render start?.()}</span>
+		{/if}
 
-    <span class="button-content">
-
-        {#if $$slots.start}
-            <span class="slot start"><slot name="start" /></span>
-        {/if}
+		{@render children?.()}
 
-        <slot></slot>
-
-        {#if $$slots.end}
-            <span class="slot end"><slot name="end" /></span>
-        {/if}
-
-    </span>
-
-    {#if $$slots.action}
-        <span class="action">
-            <slot name="action" />
-        </span>
-    {/if}
+		{#if end}
+			<span class="slot end">{@render end?.()}</span>
+		{/if}
+	</span>
 
+	{#if action}
+		<span class="action">
+			{@render action?.()}
+		</span>
+	{/if}
 </svelte:element>
 
-
 <style>.slot.start {
   margin-right: 6px;
   display: inline-flex;
@@ -398,4 +416,4 @@ export let button = {};
 }
 .button[disabled]:hover {
   box-shadow: none !important;
-}</style>
+}</style>

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

@@ -1,39 +1,16 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        as?: "button" | "a" | undefined;
-        size?: "small" | "medium" | "large" | "x-small" | undefined;
-        color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
-        block?: boolean | undefined;
-        variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
-        align?: "start" | "center" | undefined;
-        button?: HTMLButtonElement | HTMLAnchorElement | undefined;
-    };
-    events: {
-        keyup: KeyboardEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        mouseover: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        start: {};
-        default: {};
-        end: {};
-        action: {};
-    };
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};
+declare const Button: import("svelte").Component<{
+    [key: string]: any;
+    as?: "button" | "a";
+    size?: "x-small" | "small" | "medium" | "large";
+    color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | "input";
+    block?: boolean;
+    variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill";
+    align?: "start" | "center";
+    button?: any;
+    start?: import("svelte").Snippet;
+    children?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+    action?: import("svelte").Snippet;
+}, {}, "button">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Button/ButtonGroup.svelte

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

package/dist/components/Button/ButtonGroup.svelte.d.ts

@@ -1,27 +1,5 @@
-/** @typedef {typeof __propDef.props}  ButtonGroupProps */
-/** @typedef {typeof __propDef.events}  ButtonGroupEvents */
-/** @typedef {typeof __propDef.slots}  ButtonGroupSlots */
-export default class ButtonGroup extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ButtonGroupProps = typeof __propDef.props;
-export type ButtonGroupEvents = typeof __propDef.events;
-export type ButtonGroupSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+declare const ButtonGroup: import("svelte").Component<{
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/Callout/Callout.svelte

@@ -1,92 +1,115 @@
-<script>export let type = "soft";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	const {
+		type = 'soft',
+		title = undefined,
+		children = undefined,
+		text = undefined,
+		icon = undefined,
+		...rest
+	}: {
+		type?: 'info' | 'success' | 'warning' | 'danger' | 'soft';
+		title?: string | Snippet;
+		icon?: Snippet;
+		text?: string | Snippet;
+		children?: Snippet;
+		[key: string]: any;
+	} = $props();
 </script>
 
-
-<div class={"callout " + type} {...$$restProps}>
-
-    {#if $$slots.title}
-
-        <div class="title-wrap">
-
-            {#if $$slots.icon}
-                <span class="title-icon"><slot name="icon" /></span>
-            {/if}
-
-            <div class="title"><slot name="title" /></div>
-
-        </div>
-
-    {/if}
-
-    <div class="text-wrap">
-        {#if $$slots.icon && !$$slots.title}
-            <span class="icon"><slot name="icon" /></span>
-        {/if}
-
-        <div class="text">
-            {#if $$slots.default}
-                <slot />
-            {/if}
-            <slot name="text" />
-        </div>
-    </div>
-
+<div class={'callout ' + type} {...rest}>
+	{#if typeof title === 'string'}
+		<div class="title-wrap">
+			{#if icon}
+				<span
+					class="title-icon
+		"
+				>
+					{@render icon()}
+				</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}
+
+			<div class="title">{@render title?.()}</div>
+		</div>
+	{/if}
+
+	<div class="text-wrap">
+		{#if icon && !title}
+			<span class="icon">{@render icon()}</span>
+		{/if}
+
+		<div class="text">
+			{#if children}
+				{@render children()}
+			{/if}
+			{#if typeof text === 'string'}
+				{text}
+			{:else}
+				{@render text?.()}
+			{/if}
+		</div>
+	</div>
 </div>
 
-
 <style>
-
-    .callout {
-        padding: 15px 25px;
-        border-radius: var(--box-radius);    
-        /* line-height: var(--line-height-content); */
-    }
-
-    .callout.soft {
-        background-color: var(--accent-light);
-    }
-
-    .callout.info {
-        background-color: var(--blue-light);
-        color: var(--blue-dark);
-    }
-
-    .callout.warning {
-        background-color: var(--orange-light);
-        color: var(--orange-dark)
-    }
-
-    .callout.danger {
-        background-color: var(--red-light);
-        color: var(--red-dark);
-    }
-
-    .callout.success {
-        background-color: var(--green-light);
-        color: var(--green-dark);
-    }
-
-    .title-wrap {
-        margin-bottom: 4px;
-        display: flex;
-        align-items: center;
-        font-weight: 600;
-        font-size: 18px;
-    }
-
-    .title-icon {
-        vertical-align: middle;
-        margin-right: 8px;
-    }
-
-    .text-wrap {
-        display: flex;
-        align-items: flex-start;
-    }
-
-    .icon {
-        margin-right: 8px;
-        font-size: 18px;
-    }
-
-</style>
+	.callout {
+		padding: 15px 25px;
+		border-radius: var(--box-radius);
+		/* line-height: var(--line-height-content); */
+	}
+
+	.callout.soft {
+		background-color: var(--accent-light);
+	}
+
+	.callout.info {
+		background-color: var(--blue-light);
+		color: var(--blue-dark);
+	}
+
+	.callout.warning {
+		background-color: var(--orange-light);
+		color: var(--orange-dark);
+	}
+
+	.callout.danger {
+		background-color: var(--red-light);
+		color: var(--red-dark);
+	}
+
+	.callout.success {
+		background-color: var(--green-light);
+		color: var(--green-dark);
+	}
+
+	.title-wrap {
+		margin-bottom: 4px;
+		display: flex;
+		align-items: center;
+		font-weight: 600;
+		font-size: 18px;
+	}
+
+	.title-icon {
+		vertical-align: middle;
+		margin-right: 8px;
+	}
+
+	.text-wrap {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.icon {
+		margin-right: 8px;
+		font-size: 18px;
+	}
+</style>