@hyvor/design 0.0.66 → 0.0.68

package/dist/components/ActionList/ActionList.svelte

@@ -7,13 +7,8 @@ $:
   setContext("action-list-selection-align", selectionAlign);
 </script>
 
-
-
-
 <div class="action-list" {...$$restProps}>
-    <slot />
+	<slot />
 </div>
 
-
-
-<style></style>
+<style></style>

package/dist/components/ActionList/ActionListGroup.svelte

@@ -7,37 +7,32 @@ $:
     setContext("action-list-selection", selection);
 </script>
 
-<div 
-    class="action-list-group"
-    class:has-divider={divider}
->
+<div class="action-list-group" class:has-divider={divider}>
+	{#if divider}
+		<div class="divider"></div>
+	{/if}
 
-    {#if divider}
-        <div class="divider"></div>
-    {/if}
-
-    {#if title}
-        <div class="title">{title}</div>
-    {/if}
-
-    <slot />
+	{#if title}
+		<div class="title">{title}</div>
+	{/if}
 
+	<slot />
 </div>
 
 <style>
-    .divider {
-        border-bottom: 2px solid var(--border);
-        margin-bottom: 14px;
-    }
-    .title {
-        font-size: 12px;
-        font-weight: 600;
-        text-transform: uppercase;
-        color: var(--text-light);
-        padding: 0 14px;
-        margin-bottom: 6px;
-    }
-    .action-list-group:not(:first-child) {
-        margin-top: 12px;
-    }
-</style>
+	.divider {
+		border-bottom: 2px solid var(--border);
+		margin-bottom: 14px;
+	}
+	.title {
+		font-size: 12px;
+		font-weight: 600;
+		text-transform: uppercase;
+		color: var(--text-light);
+		padding: 0 14px;
+		margin-bottom: 6px;
+	}
+	.action-list-group:not(:first-child) {
+		margin-top: 12px;
+	}
+</style>

package/dist/components/ActionList/ActionListItem.svelte

@@ -15,105 +15,103 @@ function handleClick() {
 </script>
 
 <div
-    class="action-list-item"
-    class:disabled={disabled}
-    class:danger={type === 'danger'}
-    on:click={handleClick}
-    role="button"
-    tabindex="0"
-    on:keyup={e => {
-        if (e.key === 'Enter') {
-            handleClick();
-        }
-    }}
-    {...$$restProps}
-
-    on:click
+	class="action-list-item"
+	class:disabled
+	class:danger={type === 'danger'}
+	on:click={handleClick}
+	role="button"
+	tabindex="0"
+	on:keyup={(e) => {
+		if (e.key === 'Enter') {
+			handleClick();
+		}
+	}}
+	{...$$restProps}
+	on:click
 >
+	{#if selectionAlign === 'start'}
+		<Selected {selection} bind:selected />
+	{/if}
 
-    {#if selectionAlign === 'start'}
-        <Selected {selection} bind:selected />
-    {/if}
-
-    {#if $$slots.start}
-        <span class="start">
-            <slot name="start" />
-        </span>
-    {/if}
-
-    <span class="middle">
-        <slot />
+	{#if $$slots.start}
+		<span class="start">
+			<slot name="start" />
+		</span>
+	{/if}
 
-        {#if $$slots.description}
-            <div class="description">
-                <slot name="description" />
-            </div>
-        {/if}
-    </span>
+	<span class="middle">
+		<slot />
 
-    {#if $$slots.end}
-        <span class="end">
-            <slot name="end" />
-        </span>
-    {/if}
+		{#if $$slots.description}
+			<div class="description">
+				<slot name="description" />
+			</div>
+		{/if}
+	</span>
 
-    {#if selectionAlign === 'end'}
-        <Selected {selection} bind:selected />
-    {/if}
+	{#if $$slots.end}
+		<span class="end">
+			<slot name="end" />
+		</span>
+	{/if}
 
+	{#if selectionAlign === 'end'}
+		<Selected {selection} bind:selected />
+	{/if}
 </div>
 
 <style>
-    div.action-list-item {
-        padding: 6px 14px;
-        display: flex;
-        align-items: center;
-        border-radius: var(--box-radius);
-        cursor: pointer;
-        position: relative;
-        font-size: 14px;
-    }
-    div.action-list-item:hover {
-        background-color: var(--hover);
-    }
-    div.action-list-item.danger {
-        color: var(--red-dark);
-    }
-    div.action-list-item.danger:hover {
-        background-color: #fffafa;
-    }
+	div.action-list-item {
+		padding: 6px 14px;
+		display: flex;
+		align-items: center;
+		border-radius: var(--box-radius);
+		cursor: pointer;
+		position: relative;
+		font-size: 14px;
+	}
+	div.action-list-item:hover {
+		background-color: var(--hover);
+	}
+	div.action-list-item.danger {
+		color: var(--red-dark);
+	}
+	div.action-list-item.danger:hover {
+		background-color: #fffafa;
+	}
 
-    .start, .middle, .end {
-        display: inline-flex;
-        align-items: center;
-    }
-    .start {
-        margin-right: 8px;
-    }
+	.start,
+	.middle,
+	.end {
+		display: inline-flex;
+		align-items: center;
+	}
+	.start {
+		margin-right: 8px;
+	}
 
-    .middle {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    
-    .end {
-        margin-left: 8px;
-    }
+	.middle {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
 
-    .description {
-        font-size: 12px;
-        color: var(--text-light);
-    }
+	.end {
+		margin-left: 8px;
+	}
 
-     /*styles for disabled state*/
-    div.action-list-item.disabled {
-        color: var(--text-light);
-        cursor: not-allowed;
-    }
-    div.action-list-item.disabled:hover {
-        background-color: transparent;
-    }
+	.description {
+		font-size: 12px;
+		color: var(--text-light);
+	}
 
-</style>
+	/*styles for disabled state*/
+	div.action-list-item.disabled {
+		color: var(--text-light);
+		cursor: not-allowed;
+	}
+	div.action-list-item.disabled:hover {
+		background-color: transparent;
+	}
+</style>

package/dist/components/ActionList/Selected.svelte

@@ -5,26 +5,23 @@ export let selected;
 </script>
 
 {#if selection !== 'none'}
-    <span class="selected">
-        {#if selection === 'multi'}
-            <span style="transform:scale(0.9);transform-origin:top">
-                <Checkbox checked={selected} 
-                tabindex="-1" />
-            </span>
-        {:else}
-            {#if selected}
-                <IconCheck />
-            {/if}
-        {/if}
-    </span>
+	<span class="selected">
+		{#if selection === 'multi'}
+			<span style="transform:scale(0.9);transform-origin:top">
+				<Checkbox checked={selected} tabindex="-1" />
+			</span>
+		{:else if selected}
+			<IconCheck />
+		{/if}
+	</span>
 {/if}
 
 <style>
-    .selected {
-        width: 30px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-    }
-</style>
+	.selected {
+		width: 30px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+	}
+</style>

package/dist/components/Avatar/Avatar.svelte

@@ -8,16 +8,12 @@ const sizes = {
 size = typeof size === "number" ? size : sizes[size];
 </script>
 
-<img 
-    {alt} 
-    {...$$restProps}
-    style={`width: ${size}px; height: ${size}px;`}
-/>
+<img {alt} {...$$restProps} style={`width: ${size}px; height: ${size}px;`} />
 
 <style>
-    img {
-        border-radius: 50%;
-        display: inline-block;
-        overflow: hidden;
-    }
-</style>
+	img {
+		border-radius: 50%;
+		display: inline-block;
+		overflow: hidden;
+	}
+</style>

package/dist/components/Avatar/AvatarStack.svelte

@@ -7,26 +7,22 @@ const sizes = {
 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'}>
+	<slot />
 </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/Base/Base.svelte

@@ -6,12 +6,12 @@ export let dark = false;
 </script>
 
 <div id="base">
-    <slot />
+	<slot />
 </div>
 
 {#if dark}
-    <DarkProvider />
+	<DarkProvider />
 {/if}
 
 <ToastProvider />
-<ConfirmModalProvider />
+<ConfirmModalProvider />

package/dist/components/Box/Box.svelte

@@ -1,12 +1,12 @@
 <script>export let as = "div";
 </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)"
+	{...$$restProps}
 >
-    <slot />
-</svelte:element>
+	<slot />
+</svelte:element>

package/dist/components/Button/Button.svelte

@@ -7,53 +7,44 @@ export let align = "center";
 export let button = {};
 </script>
 
-<svelte:element 
-    this={as}
-    class="button {size} {color} {variant} {align}"
-    class:block={block}
-
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:change
-
-    role="button"
-    tabindex="0"
-
-    bind:this={button}
-
-    {...$$restProps}
+<svelte:element
+	this={as}
+	class="button {size} {color} {variant} {align}"
+	class:block
+	on:keyup
+	on:keydown
+	on:keypress
+	on:focus
+	on:blur
+	on:click
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:change
+	role="button"
+	tabindex="0"
+	bind:this={button}
+	{...$$restProps}
 >
+	<span class="button-content">
+		{#if $$slots.start}
+			<span class="slot start"><slot name="start" /></span>
+		{/if}
 
-    <span class="button-content">
-
-        {#if $$slots.start}
-            <span class="slot start"><slot name="start" /></span>
-        {/if}
+		<slot></slot>
 
-        <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 $$slots.end}
+			<span class="slot end"><slot name="end" /></span>
+		{/if}
+	</span>
 
+	{#if $$slots.action}
+		<span class="action">
+			<slot name="action" />
+		</span>
+	{/if}
 </svelte:element>
 
-
 <style>.slot.start {
   margin-right: 6px;
   display: inline-flex;
@@ -398,4 +389,4 @@ export let button = {};
 }
 .button[disabled]:hover {
   box-shadow: none !important;
-}</style>
+}</style>

package/dist/components/Button/ButtonGroup.svelte

@@ -1,10 +1,10 @@
 <div class="button-group">
-    <slot />
+	<slot />
 </div>
 
 <style>
-    .button-group {
-        display: inline-flex;
-        gap: 6px;
-    }
-</style>
+	.button-group {
+		display: inline-flex;
+		gap: 6px;
+	}
+</style>