windmill-components 1.35.42 → 1.36.0

package/components/common/alert/Alert.svelte

@@ -0,0 +1,53 @@
+<script>import { classNames } from '../../../utils';
+import { faCheckCircle, faInfoCircle, faWarning } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+export let type = 'info';
+export let title;
+const icons = {
+    info: faInfoCircle,
+    warning: faWarning,
+    error: faWarning,
+    success: faCheckCircle
+};
+const classes = {
+    info: {
+        bgClass: 'bg-blue-50',
+        iconClass: 'text-blue-500',
+        titleClass: 'text-blue-800',
+        descriptionClass: 'text-blue-700'
+    },
+    warning: {
+        bgClass: 'bg-yellow-50',
+        iconClass: 'text-yellow-500',
+        titleClass: 'text-yellow-800',
+        descriptionClass: 'text-yellow-700'
+    },
+    error: {
+        bgClass: 'bg-red-50',
+        iconClass: 'text-red-500',
+        titleClass: 'text-red-800',
+        descriptionClass: 'text-red-700'
+    },
+    success: {
+        bgClass: 'bg-green-50',
+        iconClass: 'text-green-500',
+        titleClass: 'text-green-800',
+        descriptionClass: 'text-green-700'
+    }
+};
+</script>
+
+<div class={classNames('rounded-md p-4', classes[type].bgClass)}>
+	<div class="flex">
+		<div class="flex h-8 w-8 items-center justify-center rounded-full">
+			<Icon data={icons[type]} class={classes[type].iconClass} />
+		</div>
+
+		<div class="ml-2 w-full">
+			<span class={classNames('text-sm font-medium', classes[type].titleClass)}>{title}</span>
+			<div class={classNames('mt-2 text-sm', classes[type].descriptionClass)}>
+				<slot />
+			</div>
+		</div>
+	</div>
+</div>

package/components/common/alert/Alert.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AlertType } from './model';
+declare const __propDef: {
+    props: {
+        type?: AlertType | undefined;
+        title: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AlertProps = typeof __propDef.props;
+export declare type AlertEvents = typeof __propDef.events;
+export declare type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/components/common/alert/model.d.ts

@@ -0,0 +1 @@
+export declare type AlertType = 'success' | 'error' | 'warning' | 'info';

package/components/common/alert/model.js

@@ -0,0 +1 @@
+export {};

package/components/common/badge/Badge.svelte

@@ -0,0 +1,76 @@
+<script>import { classNames } from '../../../utils';
+import { CloseButton } from 'flowbite-svelte';
+import Icon from 'svelte-awesome';
+import { ColorModifier } from './model';
+export let color = 'gray';
+export let large = false;
+export let href = '';
+export let rounded = false;
+export let index = false;
+export let dismissable = false;
+export let baseClass = 'text-center -mb-0.5';
+export let capitalize = false;
+export let icon = undefined;
+let defaulIconProps = {
+    data: undefined,
+    position: 'left',
+    scale: 0.7
+};
+let hidden = false;
+const colors = {
+    gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
+    red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
+    green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
+    ['dark-gray']: 'bg-gray-500 text-gray-100',
+    ['dark-blue']: 'bg-blue-500 text-blue-100',
+    ['dark-red']: 'bg-red-500 text-white',
+    ['dark-green']: 'bg-green-500 text-green-100',
+    ['dark-yellow']: 'bg-yellow-300 text-yellow-800',
+    ['dark-indigo']: 'bg-indigo-500 text-indigo-100'
+};
+const hovers = {
+    gray: 'hover:bg-gray-200 dark:hover:bg-gray-300',
+    blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
+    red: 'hover:bg-red-200 dark:hover:bg-red-300',
+    green: 'hover:bg-green-200 dark:hover:bg-green-300',
+    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
+    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300'
+};
+$: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href &&
+    (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', index
+    ? 'absolute flex justify-center items-center font-bold overflow-hidden border-2 border-white dark:border-gray-900 ' +
+        (large ? 'w-7 h-7 -top-3.5 -right-3.5' : 'w-6 h-6 -top-3 -right-3')
+    : '', $$props.class);
+$: iconProps = icon ? { ...defaulIconProps, ...icon } : { data: undefined };
+const handleHide = () => (hidden = !hidden);
+</script>
+
+<span class="inline-flex justify-center items-center">
+	<svelte:element
+		this={href ? 'a' : 'span'}
+		{href}
+		{...$$restProps}
+		class={badgeClass}
+		class:hidden
+		class:capitalize
+	>
+		{#if iconProps.data && iconProps.position === 'left'}
+			<Icon {...iconProps} />
+		{/if}
+		<slot />
+		{#if iconProps.data && iconProps.position === 'right'}
+			<Icon {...iconProps} />
+		{/if}
+		{#if dismissable}
+			<CloseButton
+				{color}
+				on:click={handleHide}
+				size={large ? 'sm' : 'xs'}
+				class="ml-1.5 -mr-1.5"
+			/>
+		{/if}
+	</svelte:element>
+</span>

package/components/common/badge/Badge.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import { type BadgeColor, type BadgeIconProps } from './model';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: BadgeColor | undefined;
+        large?: boolean | undefined;
+        href?: string | undefined;
+        rounded?: boolean | undefined;
+        index?: boolean | undefined;
+        dismissable?: boolean | undefined;
+        baseClass?: string | undefined;
+        capitalize?: boolean | undefined;
+        icon?: BadgeIconProps | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type BadgeProps = typeof __propDef.props;
+export declare type BadgeEvents = typeof __propDef.events;
+export declare type BadgeSlots = typeof __propDef.slots;
+export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
+}
+export {};

package/components/common/badge/model.d.ts

@@ -0,0 +1,8 @@
+import type { IconProps } from 'svelte-awesome/components/Icon.svelte';
+declare type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo';
+export declare const ColorModifier = "dark-";
+export declare type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
+export interface BadgeIconProps extends IconProps {
+    position?: 'left' | 'right';
+}
+export {};

package/components/common/badge/model.js

@@ -0,0 +1 @@
+export const ColorModifier = 'dark-';

package/components/common/button/Button.svelte

@@ -0,0 +1,110 @@
+<script>import { goto } from '$app/navigation';
+import { classNames } from '../../../utils';
+import Icon from 'svelte-awesome';
+export let size = 'md';
+export let spacingSize = size;
+export let color = 'blue';
+export let variant = 'contained';
+export let btnClasses = '';
+export let disabled = false;
+export let href = undefined;
+export let target = '_self';
+export let iconOnly = false;
+export let id = '';
+export let startIcon = undefined;
+export let endIcon = undefined;
+// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
+const colorVariants = {
+    blue: {
+        border: 'border-blue-500 hover:border-blue-700 bg-white hover:bg-blue-100 text-blue-500 hover:text-blue-700 focus:ring-blue-300',
+        contained: 'bg-blue-500 hover:bg-blue-700 text-white focus:ring-blue-300'
+    },
+    red: {
+        border: 'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
+        contained: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-300'
+    },
+    dark: {
+        border: 'border-gray-800 hover:border-gray-900 bg-white hover:bg-gray-200 text-gray-800 hover:text-gray-900 focus:ring-gray-300',
+        contained: 'bg-gray-700 hover:bg-gray-900 text-white focus:ring-gray-300'
+    },
+    light: {
+        border: 'border bg-white hover:bg-gray-100 text-gray-700 hover:text-gray-800 focus:ring-gray-300',
+        contained: 'bg-white hover:bg-gray-100 text-gray-700 focus:ring-gray-300'
+    }
+};
+const fontSizeClasses = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-md',
+    lg: 'text-lg',
+    xl: 'text-xl'
+};
+const spacingClasses = {
+    xs: 'px-3 py-1.5',
+    sm: 'px-3 py-1.5',
+    md: 'px-4 py-2',
+    lg: 'px-4 py-2',
+    xl: 'px-4 py-2'
+};
+const iconScale = {
+    xs: 0.6,
+    sm: 0.8,
+    md: 1,
+    lg: 1.1,
+    xl: 1.2
+};
+$: buttonProps = {
+    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', fontSizeClasses[size], spacingClasses[spacingSize], 'focus:ring-4 font-medium', 'rounded-md', 'flex justify-center items-center text-center whitespace-nowrap', btnClasses, disabled ? 'pointer-events-none cursor-default filter grayscale' : ''),
+    disabled
+};
+$: isSmall = size === 'xs' || size === 'sm';
+</script>
+
+{#if href}
+	<button
+		{id}
+		type="button"
+		on:click|stopPropagation={() => goto(href ?? '#')}
+		{target}
+		tabindex={disabled ? -1 : 0}
+		{...buttonProps}
+	>
+		{#if startIcon}
+			<Icon
+				data={startIcon.icon}
+				class={classNames(iconOnly ? undefined : 'mr-2', startIcon.classes)}
+				scale={iconScale[size]}
+			/>
+		{/if}
+		{#if !iconOnly}
+			<slot />
+		{/if}
+		{#if endIcon}
+			<Icon
+				data={endIcon.icon}
+				class={classNames(iconOnly ? undefined : 'ml-2', endIcon.classes)}
+				scale={iconScale[size]}
+			/>
+		{/if}
+	</button>
+{:else}
+	<button {id} type="button" on:click|stopPropagation {...buttonProps} {...$$restProps}>
+		{#if startIcon}
+			<Icon
+				data={startIcon.icon}
+				class={classNames(iconOnly ? undefined : 'mr-2', startIcon.classes)}
+				scale={iconScale[size]}
+			/>
+		{/if}
+		{#if !iconOnly}
+			<slot />
+		{/if}
+		{#if endIcon}
+			<Icon
+				data={endIcon.icon}
+				class={classNames(iconOnly ? undefined : 'ml-2', endIcon.classes)}
+				scale={iconScale[size]}
+			/>
+		{/if}
+	</button>
+{/if}

package/components/common/button/Button.svelte.d.ts

@@ -0,0 +1,39 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Button } from './model';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: Button.Size | undefined;
+        spacingSize?: Button.Size | undefined;
+        color?: Button.Color | undefined;
+        variant?: Button.Variant | undefined;
+        btnClasses?: string | undefined;
+        disabled?: boolean | undefined;
+        href?: string | undefined;
+        target?: Button.Target | undefined;
+        iconOnly?: boolean | undefined;
+        id?: string | undefined;
+        startIcon?: {
+            icon: any;
+            classes?: string;
+        } | undefined;
+        endIcon?: {
+            icon: any;
+            classes?: string;
+        } | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ButtonProps = typeof __propDef.props;
+export declare type ButtonEvents = typeof __propDef.events;
+export declare type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/components/common/button/model.d.ts

@@ -0,0 +1,6 @@
+export declare namespace Button {
+    type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    type Color = 'blue' | 'red' | 'dark' | 'light';
+    type Variant = 'contained' | 'border';
+    type Target = '_self' | '_blank';
+}

package/components/common/button/model.js

@@ -0,0 +1 @@
+export {};

package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -0,0 +1,72 @@
+<script>import { classNames } from '../../../utils';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import { fade } from 'svelte/transition';
+import Button from '../button/Button.svelte';
+import Badge from '../badge/Badge.svelte';
+export let title;
+export let confirmationText;
+export let open = false;
+const dispatch = createEventDispatcher();
+function onKeyDown(event) {
+    if (open) {
+        switch (event.key) {
+            case 'Enter':
+                dispatch('confirmed');
+                break;
+            case 'Escape':
+                dispatch('canceled');
+                break;
+        }
+    }
+}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if open}
+	<div transition:fade={{ duration: 100 }} class={'relative  z-50'} role="dialog">
+		<div
+			class={classNames(
+				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
+				open ? 'ease-out duration-300 opacity-100' : 'ease-in duration-200 opacity-0'
+			)}
+		/>
+
+		<div class="fixed inset-0 z-10 overflow-y-auto">
+			<div class="flex min-h-full items-center justify-center p-4">
+				<div
+					class={classNames(
+						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						open
+							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
+							: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+					)}
+				>
+					<div class="flex">
+						<div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+							<Icon data={faWarning} class="text-red-500" />
+						</div>
+						<div class="ml-4 text-left flex-1">
+							<h3 class="text-lg font-medium text-gray-900">
+								{title}
+							</h3>
+							<div class="mt-2 text-sm text-gray-500">
+								<slot />
+							</div>
+						</div>
+					</div>
+					<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
+						<Button on:click={() => dispatch('confirmed')} color="red" size="sm">
+							<span>{confirmationText} <Badge>Enter</Badge></span>
+						</Button>
+						<Button on:click={() => dispatch('canceled')} color="light" size="sm">
+							<span>Cancel <Badge color="dark-gray">Escape</Badge></span>
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

package/components/common/confirmationModal/ConfirmationModal.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        confirmationText: string;
+        open?: boolean | undefined;
+    };
+    events: {
+        confirmed: CustomEvent<any>;
+        canceled: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ConfirmationModalProps = typeof __propDef.props;
+export declare type ConfirmationModalEvents = typeof __propDef.events;
+export declare type ConfirmationModalSlots = typeof __propDef.slots;
+export default class ConfirmationModal extends SvelteComponentTyped<ConfirmationModalProps, ConfirmationModalEvents, ConfirmationModalSlots> {
+}
+export {};

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -0,0 +1,41 @@
+<script>import ConfirmationModal from './ConfirmationModal.svelte';
+import { beforeNavigate, goto } from '$app/navigation';
+import { onDestroy } from 'svelte/internal';
+import { dirtyStore } from './dirtyStore';
+let navigationState = undefined;
+$: open = Boolean(navigationState);
+beforeNavigate((newNavigationState) => {
+    if (!navigationState &&
+        $dirtyStore &&
+        newNavigationState.to?.pathname !== newNavigationState.from.pathname) {
+        navigationState = newNavigationState;
+        newNavigationState.cancel();
+    }
+});
+onDestroy(() => {
+    $dirtyStore = false;
+});
+</script>
+
+<ConfirmationModal
+	{open}
+	title="Unsaved changes detected"
+	confirmationText="Discard changes"
+	on:canceled={() => {
+		if (navigationState) {
+			navigationState.cancel()
+		}
+		navigationState = undefined
+	}}
+	on:confirmed={() => {
+		if (navigationState?.to) {
+			goto(navigationState.to)
+		}
+		$dirtyStore = false
+		navigationState = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to discard change you have made?</span>
+	</div>
+</ConfirmationModal>

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type UnsavedConfirmationModalProps = typeof __propDef.props;
+export declare type UnsavedConfirmationModalEvents = typeof __propDef.events;
+export declare type UnsavedConfirmationModalSlots = typeof __propDef.slots;
+export default class UnsavedConfirmationModal extends SvelteComponentTyped<UnsavedConfirmationModalProps, UnsavedConfirmationModalEvents, UnsavedConfirmationModalSlots> {
+}
+export {};

package/components/common/confirmationModal/dirtyStore.d.ts

@@ -0,0 +1 @@
+export declare const dirtyStore: import("svelte/store").Writable<boolean>;

package/components/common/confirmationModal/dirtyStore.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const dirtyStore = writable(false);

package/components/common/drawer/Drawer.svelte

@@ -4,6 +4,9 @@ export let open = false;
 export let duration = 0.3;
 export let placement = 'right';
 export let size = '600px';
+export function toggleDrawer() {
+    open = !open;
+}
 let mounted = false;
 const dispatch = createEventDispatcher();
 $: style = `--duration: ${duration}s; --size: ${size};`;

package/components/common/drawer/Drawer.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         duration?: number | undefined;
         placement?: string | undefined;
         size?: string | undefined;
+        toggleDrawer?: (() => void) | undefined;
     };
     events: {
         clickAway: CustomEvent<any>;
@@ -19,5 +20,6 @@ export declare type DrawerProps = typeof __propDef.props;
 export declare type DrawerEvents = typeof __propDef.events;
 export declare type DrawerSlots = typeof __propDef.slots;
 export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
+    get toggleDrawer(): () => void;
 }
 export {};

package/components/common/index.d.ts

@@ -0,0 +1,14 @@
+export { default as ActionRow } from './actionRow/ActionRow.svelte';
+export { default as Badge } from './badge/Badge.svelte';
+export { default as Button } from './button/Button.svelte';
+export { default as Drawer } from './drawer/Drawer.svelte';
+export { default as DrawerContent } from './drawer/DrawerContent.svelte';
+export { default as Menu } from './menu/Menu.svelte';
+export { default as MenuItem } from './menu/MenuItem.svelte';
+export { default as Tab } from './tabs/Tab.svelte';
+export { default as TabContent } from './tabs/TabContent.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
+export { default as ToggleButton } from './toggleButton/ToggleButton.svelte';
+export { default as ToggleButtonGroup } from './toggleButton/ToggleButtonGroup.svelte';
+export * from './badge/model';
+export * from './button/model';

package/components/common/index.js

@@ -0,0 +1,14 @@
+export { default as ActionRow } from './actionRow/ActionRow.svelte';
+export { default as Badge } from './badge/Badge.svelte';
+export { default as Button } from './button/Button.svelte';
+export { default as Drawer } from './drawer/Drawer.svelte';
+export { default as DrawerContent } from './drawer/DrawerContent.svelte';
+export { default as Menu } from './menu/Menu.svelte';
+export { default as MenuItem } from './menu/MenuItem.svelte';
+export { default as Tab } from './tabs/Tab.svelte';
+export { default as TabContent } from './tabs/TabContent.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
+export { default as ToggleButton } from './toggleButton/ToggleButton.svelte';
+export { default as ToggleButtonGroup } from './toggleButton/ToggleButtonGroup.svelte';
+export * from './badge/model';
+export * from './button/model';

package/components/common/tabs/TabContent.svelte

@@ -1,12 +1,13 @@
 <script>import { getContext } from 'svelte';
 export let value;
+export let alwaysMounted = false;
 let clazz = '';
 export { clazz as class };
 const { selected } = getContext('Tabs');
 </script>
 
-{#if value === $selected}
-	<div class={clazz}>
+{#if value === $selected || alwaysMounted}
+	<div class={`${clazz} ${value === $selected ? 'visible' : 'hidden'}`}>
 		<slot />
 	</div>
 {/if}

package/components/common/tabs/TabContent.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         value: string;
+        alwaysMounted?: boolean | undefined;
         class?: string | undefined;
     };
     events: {

package/components/common/tabs/Tabs.svelte

@@ -3,8 +3,12 @@
 
 <script>import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
+import { createEventDispatcher } from 'svelte';
+const dispatch = createEventDispatcher();
 export let selected;
+$: selected && updateSelected();
 const selectedContent = writable(selected);
+$: $selectedContent && dispatch('selected', $selectedContent);
 setContext('Tabs', {
     selected: selectedContent,
     update: (value) => {
@@ -12,9 +16,12 @@ setContext('Tabs', {
         selected = value;
     }
 });
+function updateSelected() {
+    selectedContent.set(selected);
+}
 </script>
 
-<div class="border-b border-gray-200 flex flex-row mb-4">
+<div class="border-b border-gray-200 flex flex-row">
 	<slot />
 </div>
 <slot name="content" />

package/components/common/tabs/Tabs.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         selected: string;
     };
     events: {
+        selected: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/common/toggleButton/ToggleButton.svelte

@@ -0,0 +1,20 @@
+<script>import { classNames } from '../../../utils';
+import { getContext } from 'svelte';
+export let value;
+export let position;
+const { select, selected } = getContext('ToggleButtonGroup');
+</script>
+
+<button
+	type="button"
+	on:click={() => select(value)}
+	class={classNames(
+		'py-1 px-2 text-sm font-medium border-gray-200 ',
+		position === 'left' ? 'rounded-l-lg border' : '',
+		position === 'center' ? 'border-t border-b' : '',
+		position === 'right' ? 'rounded-r-md border border-l-0' : '',
+		$selected.includes(value) ? 'text-white bg-gray-900 ' : 'text-gray-900 bg-white '
+	)}
+>
+	<slot />
+</button>