@hyvor/design 0.0.67 → 1.0.3

package/dist/components/ActionList/ActionList.svelte

@@ -1,19 +1,27 @@
-<script>import { setContext } from "svelte";
-export let selection = "none";
-export let selectionAlign = "start";
-$:
-  setContext("action-list-selection", selection);
-$:
-  setContext("action-list-selection-align", selectionAlign);
-</script>
-
+<script lang="ts">
+	import { run } from 'svelte/legacy';
 
+	import { setContext } from 'svelte';
 
+	interface Props {
+		selection?: 'none' | 'single' | 'multi';
+		selectionAlign?: 'start' | 'end';
+		children?: import('svelte').Snippet;
+		[key: string]: any;
+	}
 
-<div class="action-list" {...$$restProps}>
-    <slot />
-</div>
+	let { selection = 'none', selectionAlign = 'start', children, ...rest }: Props = $props();
 
+	run(() => {
+		setContext('action-list-selection', selection);
+	});
+	run(() => {
+		setContext('action-list-selection-align', selectionAlign);
+	});
+</script>
 
+<div class="action-list" {...rest}>
+	{@render children?.()}
+</div>
 
-<style></style>
+<style></style>

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        selection?: "none" | "single" | "multi" | undefined;
-        selectionAlign?: "start" | "end" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ActionListProps = typeof __propDef.props;
-export type ActionListEvents = typeof __propDef.events;
-export type ActionListSlots = typeof __propDef.slots;
-export default class ActionList extends SvelteComponent<ActionListProps, ActionListEvents, ActionListSlots> {
-}
-export {};
+declare const ActionList: import("svelte").Component<{
+    [key: string]: any;
+    selection?: "none" | "single" | "multi";
+    selectionAlign?: "start" | "end";
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type ActionList = ReturnType<typeof ActionList>;
+export default ActionList;

package/dist/components/ActionList/ActionListGroup.svelte

@@ -1,43 +1,48 @@
-<script>import { setContext } from "svelte";
-export let title = void 0;
-export let divider = false;
-export let selection = void 0;
-$:
-  if (selection !== void 0)
-    setContext("action-list-selection", selection);
-</script>
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
+	import { setContext } from 'svelte';
 
-<div 
-    class="action-list-group"
-    class:has-divider={divider}
->
+	interface Props {
+		title?: string | undefined;
+		divider?: boolean;
+		selection?: undefined | 'single' | 'multi';
+		children?: import('svelte').Snippet;
+	}
 
-    {#if divider}
-        <div class="divider"></div>
-    {/if}
+	let { title = undefined, divider = false, selection = undefined, children }: Props = $props();
+
+	run(() => {
+		if (selection !== undefined) setContext('action-list-selection', selection);
+	});
+</script>
 
-    {#if title}
-        <div class="title">{title}</div>
-    {/if}
+<div class="action-list-group" class:has-divider={divider}>
+	{#if divider}
+		<div class="divider"></div>
+	{/if}
 
-    <slot />
+	{#if title}
+		<div class="title">{title}</div>
+	{/if}
 
+	{@render children?.()}
 </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/ActionListGroup.svelte.d.ts

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        title?: string | undefined;
-        divider?: boolean | undefined;
-        selection?: undefined | 'single' | 'multi';
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ActionListGroupProps = typeof __propDef.props;
-export type ActionListGroupEvents = typeof __propDef.events;
-export type ActionListGroupSlots = typeof __propDef.slots;
-export default class ActionListGroup extends SvelteComponent<ActionListGroupProps, ActionListGroupEvents, ActionListGroupSlots> {
-}
-export {};
+declare const ActionListGroup: import("svelte").Component<{
+    title?: string | undefined;
+    divider?: boolean;
+    selection?: undefined | "single" | "multi";
+    children?: import("svelte").Snippet;
+}, {}, "">;
+type ActionListGroup = ReturnType<typeof ActionListGroup>;
+export default ActionListGroup;

package/dist/components/ActionList/ActionListItem.svelte

@@ -1,119 +1,141 @@
-<script>import { getContext, createEventDispatcher } from "svelte";
-import Checkbox from "../Checkbox/Checkbox.svelte";
-import { IconCheck } from "@hyvor/icons";
-import Selected from "./Selected.svelte";
-const selection = getContext("action-list-selection");
-const selectionAlign = getContext("action-list-selection-align");
-export let selected = false;
-selected = selection !== "none" && selected;
-export let disabled = false;
-export let type = "default";
-const dispatch = createEventDispatcher();
-function handleClick() {
-  dispatch("select");
-}
+<script lang="ts">
+	import { createBubbler, handlers } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+	import { getContext, createEventDispatcher } from 'svelte';
+	import Selected from './Selected.svelte';
+
+	const selection: 'none' | 'single' | 'multi' = getContext('action-list-selection');
+	const selectionAlign: 'start' | 'end' = getContext('action-list-selection-align');
+
+	interface Props {
+		selected?: boolean;
+		disabled?: boolean;
+		type?: 'default' | 'danger';
+		start?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		description?: import('svelte').Snippet;
+		end?: import('svelte').Snippet;
+		[key: string]: any;
+	}
+
+	let {
+		selected = $bindable(false),
+		disabled = false,
+		type = 'default',
+		start,
+		children,
+		description,
+		end,
+		...rest
+	}: Props = $props();
+
+	selected = selection !== 'none' && selected;
+
+	const dispatch = createEventDispatcher();
+
+	function handleClick() {
+		dispatch('select');
+	}
 </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'}
+	onclick={handlers(handleClick, bubble('click'))}
+	role="button"
+	tabindex="0"
+	onkeyup={(e) => {
+		if (e.key === 'Enter') {
+			handleClick();
+		}
+	}}
+	{...rest}
 >
+	{#if selectionAlign === 'start'}
+		<Selected {selection} bind:selected />
+	{/if}
 
-    {#if selectionAlign === 'start'}
-        <Selected {selection} bind:selected />
-    {/if}
+	{#if start}
+		<span class="start">
+			{@render start?.()}
+		</span>
+	{/if}
 
-    {#if $$slots.start}
-        <span class="start">
-            <slot name="start" />
-        </span>
-    {/if}
+	<span class="middle">
+		{@render children?.()}
 
-    <span class="middle">
-        <slot />
+		{#if description}
+			<div class="description">
+				{@render description?.()}
+			</div>
+		{/if}
+	</span>
 
-        {#if $$slots.description}
-            <div class="description">
-                <slot name="description" />
-            </div>
-        {/if}
-    </span>
-
-    {#if $$slots.end}
-        <span class="end">
-            <slot name="end" />
-        </span>
-    {/if}
-
-    {#if selectionAlign === 'end'}
-        <Selected {selection} bind:selected />
-    {/if}
+	{#if end}
+		<span class="end">
+			{@render 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;
-    }
-
-    .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;
-    }
-
-    .description {
-        font-size: 12px;
-        color: var(--text-light);
-    }
-
-     /*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>
+	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;
+	}
+
+	.middle {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.end {
+		margin-left: 8px;
+	}
+
+	.description {
+		font-size: 12px;
+		color: var(--text-light);
+	}
+
+	/*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/ActionListItem.svelte.d.ts

@@ -1,27 +1,29 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        selected?: boolean | undefined;
-        disabled?: boolean | undefined;
-        type?: "default" | "danger" | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        click: MouseEvent;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        start: {};
-        default: {};
-        description: {};
-        end: {};
-    };
-};
-export type ActionListItemProps = typeof __propDef.props;
-export type ActionListItemEvents = typeof __propDef.events;
-export type ActionListItemSlots = typeof __propDef.slots;
-export default class ActionListItem extends SvelteComponent<ActionListItemProps, ActionListItemEvents, ActionListItemSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ActionListItem: $$__sveltets_2_IsomorphicComponent<{
+    [key: string]: any;
+    selected?: boolean;
+    disabled?: boolean;
+    type?: "default" | "danger";
+    start?: import("svelte").Snippet;
+    children?: import("svelte").Snippet;
+    description?: import("svelte").Snippet;
+    end?: import("svelte").Snippet;
+}, {
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "selected">;
+type ActionListItem = InstanceType<typeof ActionListItem>;
+export default ActionListItem;

package/dist/components/ActionList/Selected.svelte

@@ -1,30 +1,33 @@
-<script>import Checkbox from "../Checkbox/Checkbox.svelte";
-import { IconCheck } from "@hyvor/icons";
-export let selection;
-export let selected;
+<script lang="ts">
+	import Checkbox from '../Checkbox/Checkbox.svelte';
+	import { IconCheck } from '@hyvor/icons';
+
+	interface Props {
+		selection: 'none' | 'single' | 'multi';
+		selected: boolean;
+	}
+
+	let { selection, selected = $bindable(false) }: Props = $props();
 </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/ActionList/Selected.svelte.d.ts

@@ -1,17 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        selection: 'none' | 'single' | 'multi';
-        selected: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SelectedProps = typeof __propDef.props;
-export type SelectedEvents = typeof __propDef.events;
-export type SelectedSlots = typeof __propDef.slots;
-export default class Selected extends SvelteComponent<SelectedProps, SelectedEvents, SelectedSlots> {
-}
-export {};
+declare const Selected: import("svelte").Component<{
+    selection: "none" | "single" | "multi";
+    selected: boolean;
+}, {}, "selected">;
+type Selected = ReturnType<typeof Selected>;
+export default Selected;

package/dist/components/Avatar/Avatar.svelte

@@ -1,23 +1,26 @@
-<script>export let size = "medium";
-export let alt = "";
-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';
+		alt?: string;
+		[key: string]: any;
+	}
+
+	let { size = $bindable('medium'), alt = '', ...rest }: Props = $props();
+
+	const sizes = {
+		small: 24,
+		medium: 32,
+		large: 48
+	};
+	size = typeof size === 'number' ? size : sizes[size];
 </script>
 
-<img 
-    {alt} 
-    {...$$restProps}
-    style={`width: ${size}px; height: ${size}px;`}
-/>
+<img {alt} {...rest} 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/Avatar.svelte.d.ts

@@ -1,18 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        size?: number | "small" | "medium" | "large" | undefined;
-        alt?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AvatarProps = typeof __propDef.props;
-export type AvatarEvents = typeof __propDef.events;
-export type AvatarSlots = typeof __propDef.slots;
-export default class Avatar extends SvelteComponent<AvatarProps, AvatarEvents, AvatarSlots> {
-}
-export {};
+declare const Avatar: import("svelte").Component<{
+    [key: string]: any;
+    size?: number | "small" | "medium" | "large";
+    alt?: string;
+}, {}, "size">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;