windmill-components 1.60.4 → 1.83.1

package/components/apps/utils.js

@@ -1,7 +1,42 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
-import { emptySchema } from '../../utils';
-import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal } from 'lucide-svelte';
+import { emptySchema, sendUserToast } from '../../utils';
+import { twMerge } from 'tailwind-merge';
+import { get } from 'svelte/store';
+import { findGridItemParentGrid } from './editor/appUtils';
+export function selectId(e, id, selectedComponent, app) {
+    if (e.shiftKey) {
+        selectedComponent.update((old) => {
+            if (old && old?.[0]) {
+                if (findGridItemParentGrid(app, old[0]) != findGridItemParentGrid(app, id)) {
+                    sendUserToast('Cannot multi select items from different grids', true);
+                    return old;
+                }
+            }
+            if (old == undefined) {
+                return [id];
+            }
+            if (old.includes(id)) {
+                return old;
+            }
+            return [...old, id];
+        });
+    }
+    else {
+        if (get(selectedComponent)?.includes(id)) {
+            return;
+        }
+        else {
+            selectedComponent.set([id]);
+        }
+    }
+}
+export function allItems(grid, subgrids) {
+    if (subgrids == undefined) {
+        return grid;
+    }
+    return [...grid, ...Object.values(subgrids).flat()];
+}
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({
@@ -21,7 +56,9 @@ export async function loadSchema(workspace, path, runType) {
         const script = await ScriptService.getHubScriptByPath({
             path
         });
-        if (script.schema == undefined || Object.keys(script.schema).length == 0 || typeof script.schema != 'object') {
+        if (script.schema == undefined ||
+            Object.keys(script.schema).length == 0 ||
+            typeof script.schema != 'object') {
             script.schema = emptySchema();
         }
         await inferArgs(script.language, script.content, script.schema);
@@ -43,96 +80,6 @@ export function schemaToInputsSpec(schema, defaultUserInput) {
         return accu;
     }, {});
 }
-export const displayData = {
-    displaycomponent: {
-        name: 'Result',
-        icon: Monitor
-    },
-    textcomponent: {
-        name: 'Text',
-        icon: Type
-    },
-    buttoncomponent: {
-        name: 'Button',
-        icon: Inspect
-    },
-    formcomponent: {
-        name: 'Form',
-        icon: FormInput
-    },
-    piechartcomponent: {
-        name: 'Pie Chart',
-        icon: PieChart
-    },
-    barchartcomponent: {
-        name: 'Bar/Line Chart',
-        icon: BarChart4
-    },
-    htmlcomponent: {
-        name: 'Html',
-        icon: Code2
-    },
-    vegalitecomponent: {
-        name: 'Vega Lite',
-        icon: PieChart
-    },
-    timeseriescomponent: {
-        name: 'Timeseries',
-        icon: GripHorizontal
-    },
-    scatterchartcomponent: {
-        name: 'Scatter Chart',
-        icon: GripHorizontal
-    },
-    tablecomponent: {
-        name: 'Table',
-        icon: Table2
-    },
-    checkboxcomponent: {
-        name: 'Toggle',
-        icon: ToggleLeft
-    },
-    textinputcomponent: {
-        name: 'Text input',
-        icon: TextCursorInput
-    },
-    imagecomponent: {
-        name: 'Image',
-        icon: Image
-    },
-    inputcomponent: {
-        name: 'Input',
-        icon: FormInput
-    },
-    radiocomponent: {
-        name: 'Radio button',
-        icon: CircleDot
-    },
-    runformcomponent: {
-        name: 'Run form',
-        icon: Play
-    },
-    selectcomponent: {
-        name: 'Select',
-        icon: List
-    },
-    numberinputcomponent: {
-        name: 'Number',
-        icon: Binary
-    },
-    slidercomponent: {
-        name: 'Slider',
-        icon: SlidersHorizontal
-    },
-    passwordinputcomponent: {
-        name: 'Password',
-        icon: Lock
-    },
-    dateinputcomponent: {
-        name: 'Date input',
-        icon: Calendar
-    }
-};
 export function accessPropertyByPath(object, path) {
     // convert indexes to properties
     path = path.replace(/\[(\w+)\]/g, '.$1');
@@ -141,7 +88,7 @@ export function accessPropertyByPath(object, path) {
     let a = path.split('.');
     for (let i = 0, depth = a.length; i < depth; ++i) {
         let key = a[i];
-        if (object[key]) {
+        if (object[key] != undefined) {
             object = object[key];
         }
         else {
@@ -155,6 +102,8 @@ export function fieldTypeToTsType(inputType) {
     switch (inputType) {
         case 'number':
             return 'number';
+        case 'integer':
+            return 'number';
         case 'boolean':
             return 'boolean';
         case 'object':
@@ -163,6 +112,8 @@ export function fieldTypeToTsType(inputType) {
             return 'array';
         case 'any':
             return 'any';
+        case 'tab-select':
+            return 'Tab';
         default:
             return 'string';
     }
@@ -202,14 +153,71 @@ export function toStatic(app, staticExporter, summary) {
     });
     return { app: newApp, summary };
 }
-export function buildExtraLib(components, idToExclude, hasRows) {
-    return Object.entries(components)
+export function buildExtraLib(components, idToExclude, hasRows, state, goto) {
+    const cs = Object.entries(components)
         .filter(([k, v]) => k != idToExclude)
         .map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
-        .map(([k, v]) => `
-
-declare const ${k} = ${JSON.stringify(v)};
-
+        .map(([k, v]) => `declare const ${k}: ${JSON.stringify(v)};
 `)
-        .join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : '');
+        .join('\n');
+    return `${cs}
+${hasRows ? 'declare const row: Record<string, any>;' : ''}
+${goto
+        ? `declare async function goto(path: string, newTab?: boolean): Promise<void>;
+declare function setTab(id: string, index: string): void;
+declare function recompute(id: string): void;
+`
+        : ''}
+declare const state: ${JSON.stringify(state)};
+`;
+}
+export function getAllScriptNames(app) {
+    const names = app.grid.reduce((acc, gridItem) => {
+        const { componentInput } = gridItem.data;
+        if (componentInput?.type === 'runnable' &&
+            componentInput?.runnable?.type === 'runnableByName') {
+            acc.push(componentInput.runnable.name);
+        }
+        if (gridItem.data.type === 'tablecomponent') {
+            gridItem.data.actionButtons.forEach((actionButton) => {
+                if (actionButton.componentInput?.type === 'runnable') {
+                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
+                        acc.push(actionButton.componentInput.runnable.name);
+                    }
+                }
+            });
+        }
+        return acc;
+    }, []);
+    const unusedNames = app.unusedInlineScripts.map((x) => x.name);
+    const backgroundNames = app.hiddenInlineScripts?.map((x) => x.name) ?? [];
+    return [...names, ...unusedNames, ...backgroundNames];
+}
+function clearAndUpper(text) {
+    return text.replace(/-/, '').toUpperCase();
+}
+export function toPascalCase(text) {
+    return text.replace(/(^\w|-\w)/g, clearAndUpper);
+}
+export function toKebabCase(text) {
+    return text.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+export function concatCustomCss(appCss, componentCss) {
+    if (!componentCss)
+        return undefined;
+    return Object.fromEntries(Object.entries(componentCss).map(([key, v]) => {
+        // This is the general style of the component type
+        const appStyle = appCss?.[key]?.style?.trim() || '';
+        const appEnding = appStyle?.endsWith(';') || !appStyle ? ' ' : '; ';
+        // This is the custom style of the component instance
+        const compStyle = v?.style?.trim() || '';
+        const compEnding = compStyle?.endsWith(';') || !compStyle ? ' ' : ';';
+        return [
+            key,
+            {
+                style: (appStyle + appEnding + compStyle + compEnding).trim(),
+                class: twMerge(appCss?.[key]?.class, v?.class)
+            }
+        ];
+    }));
 }

package/components/common/CloseButton.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { faClose } from '@fortawesome/free-solid-svg-icons'
+	import { createEventDispatcher } from 'svelte'
+
+	import { Icon } from 'svelte-awesome'
+
+	export let noBg = false
+	const dispatch = createEventDispatcher()
+</script>
+
+<button
+	on:click={() => dispatch('close')}
+	class="hover:bg-gray-200 {noBg
+		? ''
+		: 'bg-gray-100'} rounded-full w-8 h-8 flex items-center justify-center transition-all"
+>
+	<Icon data={faClose} class="text-gray-500" />
+</button>

package/components/common/CloseButton.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  CloseButtonProps */
+/** @typedef {typeof __propDef.events}  CloseButtonEvents */
+/** @typedef {typeof __propDef.slots}  CloseButtonSlots */
+export default class CloseButton extends SvelteComponentTyped<{
+    noBg?: boolean | undefined;
+}, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CloseButtonProps = typeof __propDef.props;
+export type CloseButtonEvents = typeof __propDef.events;
+export type CloseButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        noBg?: boolean | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/common/badge/Badge.svelte

@@ -7,6 +7,7 @@ export let large = false;
 export let href = '';
 export let rounded = false;
 export let dismissable = false;
+export let wrapperClass = '';
 export let baseClass = 'text-center';
 export let capitalize = false;
 export let icon = undefined;
@@ -44,7 +45,11 @@ $: iconProps = icon ? { ...defaulIconProps, ...icon } : { data: undefined };
 const handleHide = () => (hidden = !hidden);
 </script>
 
-<span on:click on:keydown class="inline-flex justify-center items-center whitespace-nowrap">
+<span
+	on:click
+	on:keydown
+	class="inline-flex justify-center items-center whitespace-nowrap {wrapperClass}"
+>
 	<svelte:element
 		this={href ? 'a' : 'span'}
 		{href}

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         href?: string | undefined;
         rounded?: boolean | undefined;
         dismissable?: boolean | undefined;
+        wrapperClass?: string | undefined;
         baseClass?: string | undefined;
         capitalize?: boolean | undefined;
         icon?: BadgeIconProps | undefined;

package/components/common/button/Button.svelte

@@ -1,9 +1,9 @@
 <script>import { createEventDispatcher } from 'svelte';
-import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
 import { goto } from '$app/navigation';
 import { Loader2 } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
@@ -21,9 +21,14 @@ export let nonCaptureEvent = false;
 export let buttonType = 'button';
 export let loading = false;
 export let title = undefined;
+export let style = '';
 const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
+    none: {
+        border: '',
+        contained: ''
+    },
     blue: {
         border: 'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
         contained: 'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300'
@@ -51,12 +56,13 @@ const colorVariants = {
 };
 $: buttonProps = {
     id,
-    class: classNames(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-2 font-semibold', 'duration-200 rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''),
+    class: twMerge(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize][variant], 'focus:ring-2 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''),
     href,
     target,
     tabindex: disabled ? -1 : 0,
     type: buttonType,
-    title
+    title,
+    ...$$restProps
 };
 async function onClick(event) {
     if (!nonCaptureEvent) {
@@ -76,8 +82,8 @@ async function onClick(event) {
     }
 }
 $: isSmall = size === 'xs' || size === 'sm';
-$: startIconClass = classNames(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes);
-$: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes);
+$: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes);
+$: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes);
 </script>
 
 <svelte:element
@@ -90,6 +96,7 @@ $: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', e
 	{...buttonProps}
 	disabled={disabled || loading}
 	type="submit"
+	{style}
 >
 	{#if loading}
 		<Loader2 class="animate-spin mr-1" size={14} />

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

@@ -3,9 +3,10 @@ import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         size?: ButtonType.Size | undefined;
         spacingSize?: ButtonType.Size | undefined;
-        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
+        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         btnClasses?: string | undefined;
         disabled?: boolean | undefined;
@@ -20,6 +21,7 @@ declare const __propDef: {
         buttonType?: "reset" | "submit" | "button" | undefined;
         loading?: boolean | undefined;
         title?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         pointerdown: PointerEvent;

package/components/common/button/ButtonPopup.svelte

@@ -7,12 +7,14 @@ export let color = 'blue';
 export let variant = 'contained';
 export let mainClasses = '';
 export let toggleClasses = '';
+export let listClasses = '';
 export let disabled = false;
 export let href = undefined;
 export let target = '_self';
 export let startIcon = undefined;
 export let endIcon = undefined;
 export let spacingSize = size;
+export let loading = false;
 let ref;
 setContext(ButtonType.ItemContextKey, { size, color });
 $: separator = color === 'red' || color === 'blue' ? 'border-gray-200' : 'border-gray-400';
@@ -28,6 +30,7 @@ $: commonProps = {
 <div class="flex justy-start items-center">
 	{#if $$slots.main}
 		<Button
+			{loading}
 			{...commonProps}
 			{href}
 			{target}
@@ -57,14 +60,16 @@ $: commonProps = {
 {#if ref}
 	<Popup
 		{ref}
+		let:open
+		let:close
 		options={{
 			placement: $$slots.main ? 'bottom-end' : 'bottom',
 			strategy: 'absolute',
 			modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
 		}}
 	>
-		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto">
-			<slot />
+		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto {listClasses}">
+			<slot {open} {close} />
 		</ul>
 	</Popup>
 {/if}

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

@@ -4,16 +4,18 @@ import { ButtonType } from '..';
 declare const __propDef: {
     props: {
         size?: ButtonType.Size | undefined;
-        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
+        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         mainClasses?: string | undefined;
         toggleClasses?: string | undefined;
+        listClasses?: string | undefined;
         disabled?: boolean | undefined;
         href?: string | undefined;
         target?: ButtonType.Target | undefined;
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
         spacingSize?: ButtonType.Size | undefined;
+        loading?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;
@@ -23,7 +25,10 @@ declare const __propDef: {
     slots: {
         main: {};
         toggle: {};
-        default: {};
+        default: {
+            open: () => void;
+            close: () => void;
+        };
     };
 };
 export type ButtonPopupProps = typeof __propDef.props;

package/components/common/button/ButtonPopupItem.svelte

@@ -8,6 +8,7 @@ export let target = '_self';
 export let iconOnly = false;
 export let startIcon = undefined;
 export let endIcon = undefined;
+export let wrapperClasses = '';
 const props = getContext(ButtonType.ItemContextKey);
 const iconWidthClass = {
     xs: '!w-[12px]',
@@ -40,7 +41,7 @@ $: buttonProps = {
 };
 </script>
 
-<li class="mt-1">
+<li class="mt-1 {wrapperClasses}">
 	<Button {...buttonProps} on:click>
 		<slot />
 	</Button>

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         iconOnly?: boolean | undefined;
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
+        wrapperClasses?: string | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/common/button/UndoRedo.svelte

@@ -0,0 +1,32 @@
+<script>import { Redo, Undo } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { Button } from '..';
+export let undoProps = {};
+export let redoProps = {};
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex">
+	<Button
+		title="Undo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-r-none"
+		on:click={() => dispatch('undo')}
+		{...undoProps}
+	>
+		<Undo size={14} />
+	</Button>
+	<Button
+		title="Redo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
+		on:click={() => dispatch('redo')}
+		{...redoProps}
+	>
+		<Redo size={14} />
+	</Button>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        undoProps?: Record<string, any> | undefined;
+        redoProps?: Record<string, any> | undefined;
+    };
+    events: {
+        undo: CustomEvent<any>;
+        redo: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UndoRedoProps = typeof __propDef.props;
+export type UndoRedoEvents = typeof __propDef.events;
+export type UndoRedoSlots = typeof __propDef.slots;
+export default class UndoRedo extends SvelteComponentTyped<UndoRedoProps, UndoRedoEvents, UndoRedoSlots> {
+}
+export {};

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

@@ -1,4 +1,4 @@
-export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray"];
+export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray", "none"];
 export declare namespace ButtonType {
     type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     type Color = typeof BUTTON_COLORS[number];
@@ -10,7 +10,7 @@ export declare namespace ButtonType {
         classes?: string;
     }
     const FontSizeClasses: Record<ButtonType.Size, string>;
-    const SpacingClasses: Record<ButtonType.Size, string>;
+    const SpacingClasses: Record<ButtonType.Size, Record<ButtonType.Variant, string>>;
     const IconScale: Record<ButtonType.Size, number>;
     const ItemContextKey: "popupItemProps";
     interface ItemProps {

package/components/common/button/model.js

@@ -1,4 +1,4 @@
-export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray'];
+export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray', 'none'];
 export var ButtonType;
 (function (ButtonType) {
     ButtonType.FontSizeClasses = {
@@ -9,11 +9,26 @@ export var ButtonType;
         xl: 'text-xl'
     };
     ButtonType.SpacingClasses = {
-        xs: 'px-3 py-1.5',
-        sm: 'px-3 py-1.5',
-        md: 'px-3 py-1.5',
-        lg: 'px-4 py-2',
-        xl: 'px-4 py-2'
+        xs: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]'
+        },
+        sm: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]'
+        },
+        md: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]'
+        },
+        lg: {
+            border: 'px-4 py-[8px]',
+            contained: 'px-4 py-[9px]'
+        },
+        xl: {
+            border: 'px-4 py-[8px]',
+            contained: 'px-4 py-[9px]'
+        },
     };
     ButtonType.IconScale = {
         xs: 0.7,

package/components/common/clearableInput/ClearableInput.svelte

@@ -0,0 +1,56 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+import { X } from 'lucide-svelte';
+export let value = '';
+export let placeholder = '';
+export let type = 'text';
+export let inputClass = '';
+export let wrapperClass = '';
+export let buttonClass = '';
+const dispatch = createEventDispatcher();
+$: isNumeric = ['number', 'range'].includes(type);
+$: dispatch('change', value);
+function handleInput(e) {
+    value = isNumeric ? +e.target.value : e.target.value;
+}
+function clear() {
+    value = '';
+}
+</script>
+
+<div class="relative grow {wrapperClass}">
+	{#if type === 'textarea'}
+		<textarea
+			{value}
+			{placeholder}
+			rows="1"
+			class="resize-y duration-200 {inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{:else}
+		<input
+			{type}
+			{value}
+			{placeholder}
+			class="duration-200 {(type === 'number' && value ? '!pr-[26px] ' : '') + inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{/if}
+	{#if value}
+		<button
+			transition:fade|local={{ duration: 100 }}
+			class="absolute z-10 top-1.5 right-1 rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 {buttonClass}"
+			aria-label="Clear"
+			on:click|preventDefault|stopPropagation={clear}
+		>
+			<X size={14} />
+		</button>
+	{/if}
+	<slot />
+</div>