@finsweet/webflow-apps-utils 1.0.50 → 1.0.51

package/dist/ui/components/index.d.ts

@@ -17,6 +17,7 @@ export * from './section';
 export * from './select';
 export * from './shared';
 export * from './switch';
+export * from './tags';
 export * from './text';
 export * from './tooltip';
 export { default as Loader } from './Loader.svelte';

package/dist/ui/components/index.js

@@ -17,6 +17,7 @@ export * from './section';
 export * from './select';
 export * from './shared';
 export * from './switch';
+export * from './tags';
 export * from './text';
 export * from './tooltip';
 export { default as Loader } from './Loader.svelte';

package/dist/ui/components/tags/TagsInput.stories.d.ts

@@ -0,0 +1,103 @@
+import type { StoryObj } from '@storybook/sveltekit';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<import("./types.js").TagsInputProps, {}, "value">;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        width: string;
+        height: string;
+    };
+    tags: string[];
+    argTypes: {
+        value: {
+            control: "object";
+            description: string;
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        loading: {
+            control: "boolean";
+            description: string;
+        };
+        invalid: {
+            control: "boolean";
+            description: string;
+        };
+        readonly: {
+            control: "boolean";
+            description: string;
+        };
+        maxTags: {
+            control: "number";
+            description: string;
+        };
+        minTags: {
+            control: "number";
+            description: string;
+        };
+        maxTagLength: {
+            control: "number";
+            description: string;
+        };
+        allowDuplicates: {
+            control: "boolean";
+            description: string;
+        };
+        trimTags: {
+            control: "boolean";
+            description: string;
+        };
+        width: {
+            control: "text";
+            description: string;
+        };
+        height: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithInitialTags: Story;
+export declare const WithPlaceholder: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const Invalid: Story;
+export declare const ReadOnly: Story;
+export declare const MaxTags: Story;
+export declare const MaxTagLength: Story;
+export declare const NoDuplicates: Story;
+export declare const AllowDuplicates: Story;
+export declare const ErrorAlert: Story;
+export declare const SuccessAlert: Story;
+export declare const InfoAlert: Story;
+export declare const WarningAlert: Story;
+export declare const CustomWidth: Story;
+export declare const CustomHeight: Story;
+export declare const FullWidth: Story;
+export declare const InteractiveExample: Story;
+export declare const CustomValidation: Story;
+export declare const EmailValidation: Story;
+export declare const CategoryTags: Story;
+export declare const SkillsTags: Story;
+export declare const KeywordsTags: Story;
+export declare const FormIntegration: Story;
+export declare const ManyTags: Story;
+export declare const LongTags: Story;
+export declare const SpecialCharacters: Story;
+export declare const UnicodeSupport: Story;

package/dist/ui/components/tags/TagsInput.stories.js

@@ -0,0 +1,435 @@
+import TagsInput from './TagsInput.svelte';
+const meta = {
+    title: 'Ui/TagsInput',
+    component: TagsInput,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A versatile tags input component with support for various states, validation, and customization. Similar to shadcn tags input but styled for our design system.'
+            }
+        }
+    },
+    args: {
+        width: '420px',
+        height: '70px'
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'object',
+            description: 'Array of tag values'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text when no tags and input is empty'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables the entire component'
+        },
+        loading: {
+            control: 'boolean',
+            description: 'Shows loading state'
+        },
+        invalid: {
+            control: 'boolean',
+            description: 'Applies invalid styling'
+        },
+        readonly: {
+            control: 'boolean',
+            description: 'Makes tags read-only (no adding/removing)'
+        },
+        maxTags: {
+            control: 'number',
+            description: 'Maximum number of tags allowed'
+        },
+        minTags: {
+            control: 'number',
+            description: 'Minimum number of tags required'
+        },
+        maxTagLength: {
+            control: 'number',
+            description: 'Maximum length of each tag'
+        },
+        allowDuplicates: {
+            control: 'boolean',
+            description: 'Whether to allow duplicate tags'
+        },
+        trimTags: {
+            control: 'boolean',
+            description: 'Whether to trim whitespace from tags'
+        },
+        width: {
+            control: 'text',
+            description: 'Custom width for the component'
+        },
+        height: {
+            control: 'text',
+            description: 'Custom height for the component'
+        }
+    }
+};
+export default meta;
+// Basic stories
+export const Default = {
+    args: {
+        placeholder: 'Add tags...'
+    }
+};
+export const WithInitialTags = {
+    args: {
+        value: ['JavaScript', 'TypeScript', 'Svelte'],
+        placeholder: 'Add more tags...'
+    }
+};
+export const WithPlaceholder = {
+    args: {
+        placeholder: 'Type and press Enter to add tags...'
+    }
+};
+// States
+export const Disabled = {
+    args: {
+        value: ['Disabled', 'Tag'],
+        disabled: true
+    }
+};
+export const Loading = {
+    args: {
+        value: ['Loading', 'Tags'],
+        loading: true
+    }
+};
+export const Invalid = {
+    args: {
+        value: ['Invalid', 'Input'],
+        invalid: true
+    }
+};
+export const ReadOnly = {
+    args: {
+        value: ['Read', 'Only', 'Tags'],
+        readonly: true
+    }
+};
+// Constraints
+export const MaxTags = {
+    args: {
+        value: ['Tag 1', 'Tag 2', 'Tag 3'],
+        maxTags: 3,
+        placeholder: 'Max 3 tags reached'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Maximum of 3 tags allowed. Input is hidden when limit is reached.'
+            }
+        }
+    }
+};
+export const MaxTagLength = {
+    args: {
+        value: ['short'],
+        maxTagLength: 10,
+        placeholder: 'Max 10 chars per tag...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags cannot exceed 10 characters.'
+            }
+        }
+    }
+};
+export const NoDuplicates = {
+    args: {
+        value: ['unique', 'tags'],
+        allowDuplicates: false,
+        placeholder: 'Try adding "unique" again...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Duplicate tags are not allowed (default behavior).'
+            }
+        }
+    }
+};
+export const AllowDuplicates = {
+    args: {
+        value: ['duplicate', 'duplicate'],
+        allowDuplicates: true,
+        placeholder: 'Duplicates allowed here...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Duplicate tags are allowed when allowDuplicates is true.'
+            }
+        }
+    }
+};
+// Alert states
+export const ErrorAlert = {
+    args: {
+        value: ['Invalid'],
+        invalid: true,
+        alert: {
+            type: 'error',
+            message: 'Please add at least 3 tags'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags input with error state. Hover to see the error tooltip.'
+            }
+        }
+    }
+};
+export const SuccessAlert = {
+    args: {
+        value: ['Valid', 'Tags', 'Added'],
+        alert: {
+            type: 'success',
+            message: 'Tags are valid!'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags input with success state. Hover to see the success tooltip.'
+            }
+        }
+    }
+};
+export const InfoAlert = {
+    args: {
+        value: ['Info'],
+        alert: {
+            type: 'info',
+            message: 'Add tags separated by comma or Enter'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags input with info state. Hover to see the info tooltip.'
+            }
+        }
+    }
+};
+export const WarningAlert = {
+    args: {
+        value: ['Warning', 'Tag'],
+        alert: {
+            type: 'warning',
+            message: 'Some tags may need review'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags input with warning state. Hover to see the warning tooltip.'
+            }
+        }
+    }
+};
+// Sizing
+export const CustomWidth = {
+    args: {
+        value: ['Custom', 'Width'],
+        width: '400px',
+        placeholder: 'Wide input...'
+    }
+};
+export const CustomHeight = {
+    args: {
+        value: ['Custom', 'Height', 'With', 'Multiple', 'Tags'],
+        height: '80px',
+        placeholder: 'Taller input...'
+    }
+};
+export const FullWidth = {
+    args: {
+        value: ['Full'],
+        width: '100%',
+        placeholder: 'Full width input...'
+    }
+};
+// Interactive examples
+export const InteractiveExample = {
+    args: {
+        value: ['React', 'Vue'],
+        placeholder: 'Add a framework...',
+        onValueChange: (tags) => console.log('Tags changed:', tags),
+        onTagAdd: (tag) => console.log('Tag added:', tag),
+        onTagRemove: (tag, index) => console.log('Tag removed:', tag, 'at index', index),
+        onInvalidTag: (tag, reason) => console.log('Invalid tag:', tag, 'Reason:', reason)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive example with all event handlers. Check the console for events.'
+            }
+        }
+    }
+};
+// Validation examples
+export const CustomValidation = {
+    args: {
+        value: ['#valid'],
+        placeholder: 'Tags must start with #...',
+        validateTag: (tag) => {
+            if (!tag.startsWith('#')) {
+                return 'Tags must start with #';
+            }
+            return true;
+        },
+        onInvalidTag: (tag, reason) => console.log('Invalid:', tag, reason)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Custom validation requiring tags to start with #. Try adding a tag without #.'
+            }
+        }
+    }
+};
+export const EmailValidation = {
+    args: {
+        value: ['user@example.com'],
+        placeholder: 'Add email addresses...',
+        validateTag: (tag) => {
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(tag)) {
+                return 'Please enter a valid email';
+            }
+            return true;
+        },
+        onInvalidTag: (tag, reason) => console.log('Invalid:', tag, reason)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Email validation example. Only valid email addresses are accepted.'
+            }
+        }
+    }
+};
+// Real-world examples
+export const CategoryTags = {
+    args: {
+        value: ['Technology', 'Design', 'Marketing'],
+        placeholder: 'Add categories...',
+        maxTags: 5
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Category tagging with a maximum of 5 tags.'
+            }
+        }
+    }
+};
+export const SkillsTags = {
+    args: {
+        value: ['JavaScript', 'React', 'Node.js', 'CSS'],
+        placeholder: 'Add your skills...',
+        maxTagLength: 20
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Skills input with max tag length of 20 characters.'
+            }
+        }
+    }
+};
+export const KeywordsTags = {
+    args: {
+        value: ['seo', 'marketing', 'content'],
+        placeholder: 'Add keywords for SEO...',
+        maxTags: 10,
+        onValueChange: (tags) => console.log('Keywords:', tags)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'SEO keywords input with up to 10 tags.'
+            }
+        }
+    }
+};
+export const FormIntegration = {
+    args: {
+        id: 'form-tags',
+        value: ['tag1'],
+        placeholder: 'Add tags for form...',
+        alert: {
+            type: 'info',
+            message: 'Tags will be submitted with the form'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Example showing tags input in a form context. Compatible with Zod validation schemas.'
+            }
+        }
+    }
+};
+// Edge cases
+export const ManyTags = {
+    args: {
+        value: Array.from({ length: 20 }, (_, i) => `Tag ${i + 1}`),
+        placeholder: 'Lots of tags...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Performance test with 20 tags.'
+            }
+        }
+    }
+};
+export const LongTags = {
+    args: {
+        value: ['This is a very long tag name', 'Another extremely long tag'],
+        placeholder: 'Long tags get truncated...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Long tags are truncated with ellipsis.'
+            }
+        }
+    }
+};
+export const SpecialCharacters = {
+    args: {
+        value: ['C++', 'C#', '.NET', '@angular', '#svelte'],
+        placeholder: 'Special characters work...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tags with special characters are supported.'
+            }
+        }
+    }
+};
+export const UnicodeSupport = {
+    args: {
+        value: ['日本語', '中文', '한국어', '🎉', '✨'],
+        placeholder: 'Unicode support...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Full Unicode support including CJK characters and emoji.'
+            }
+        }
+    }
+};

package/dist/ui/components/tags/TagsInput.svelte

@@ -0,0 +1,478 @@
+<script lang="ts">
+	import { TimesIcon } from '../../icons';
+
+	import Loader from '../Loader.svelte';
+	import { Tooltip } from '../tooltip';
+	import type { TagsInputProps } from './types.js';
+
+	let {
+		value = $bindable([]),
+		placeholder = 'Add tag...',
+		id = 'tags-input',
+		disabled = false,
+		loading = false,
+		invalid = false,
+		readonly = false,
+		alert = null,
+		maxTags = null,
+		minTags = null,
+		maxTagLength = null,
+		separatorKeys = ['Enter', ','],
+		allowDuplicates = false,
+		validateTag,
+		trimTags = true,
+		width = '100%',
+		height = 'auto',
+		class: className = '',
+		onValueChange,
+		onTagAdd,
+		onTagRemove,
+		onInvalidTag,
+		onfocus,
+		onblur,
+		onkeydown,
+		children,
+		...restProps
+	}: TagsInputProps = $props();
+
+	// Component state
+	let inputElement: HTMLInputElement | undefined = $state();
+	let inputValue = $state('');
+	let isFocused = $state(false);
+
+	// Derived states
+	let isDisabled = $derived(disabled || loading);
+	let canAddMore = $derived(maxTags === null || value.length < maxTags);
+	let showPlaceholder = $derived(value.length === 0 && !inputValue);
+	let hasAlert = $derived(alert?.message);
+
+	// Validation state
+	let isMinTagsInvalid = $derived.by(() => {
+		if (minTags === null) return false;
+		return value.length < minTags;
+	});
+
+	// CSS classes
+	let wrapperClasses = $derived(
+		`
+		tags-input-wrapper
+		${isDisabled ? 'disabled' : ''}
+		${invalid || hasAlert || isMinTagsInvalid ? 'invalid' : ''}
+		${isFocused ? 'focused' : ''}
+		${loading ? 'loading' : ''}
+		${className}
+	`
+			.trim()
+			.replace(/\s+/g, ' ')
+	);
+
+	/**
+	 * Focus the input element
+	 */
+	const focusInput = () => {
+		if (inputElement && !readonly && !isDisabled) {
+			inputElement.focus();
+		}
+	};
+
+	/**
+	 * Validates a tag before adding
+	 */
+	const validateTagValue = (tag: string): { valid: boolean; reason?: string } => {
+		const trimmedTag = trimTags ? tag.trim() : tag;
+
+		if (!trimmedTag) {
+			return { valid: false, reason: 'Tag cannot be empty' };
+		}
+
+		if (maxTagLength !== null && trimmedTag.length > maxTagLength) {
+			return { valid: false, reason: `Tag exceeds maximum length of ${maxTagLength}` };
+		}
+
+		if (!allowDuplicates && value.includes(trimmedTag)) {
+			return { valid: false, reason: 'Duplicate tag' };
+		}
+
+		if (!canAddMore) {
+			return { valid: false, reason: `Maximum of ${maxTags} tags allowed` };
+		}
+
+		if (validateTag) {
+			const customValidation = validateTag(trimmedTag);
+			if (customValidation === false) {
+				return { valid: false, reason: 'Invalid tag' };
+			}
+			if (typeof customValidation === 'string') {
+				return { valid: false, reason: customValidation };
+			}
+		}
+
+		return { valid: true };
+	};
+
+	/**
+	 * Adds a new tag
+	 */
+	const addTag = (rawTag: string) => {
+		if (readonly || isDisabled) return;
+
+		const tag = trimTags ? rawTag.trim() : rawTag;
+		const validation = validateTagValue(tag);
+
+		if (!validation.valid) {
+			onInvalidTag?.(tag, validation.reason || 'Invalid tag');
+			return false;
+		}
+
+		inputValue = '';
+		value = [...value, tag];
+
+		onTagAdd?.(tag);
+		onValueChange?.(value);
+
+		return true;
+	};
+
+	/**
+	 * Removes a tag at the specified index
+	 */
+	const removeTag = (index: number) => {
+		if (readonly || isDisabled) return;
+
+		const removedTag = value[index];
+		value = value.filter((_, i) => i !== index);
+
+		onTagRemove?.(removedTag, index);
+		onValueChange?.(value);
+
+		// Focus back to input after removal
+		focusInput();
+	};
+
+	/**
+	 * Handles input changes
+	 */
+	const handleInput = (event: Event) => {
+		const target = event.target as HTMLInputElement;
+		const newValue = target.value;
+
+		// Check if a separator key was typed (e.g., comma)
+		for (const separator of separatorKeys) {
+			if (separator.length === 1 && newValue.includes(separator)) {
+				const parts = newValue.split(separator);
+				for (let i = 0; i < parts.length - 1; i++) {
+					if (parts[i].trim()) {
+						addTag(parts[i]);
+					}
+				}
+				inputValue = parts[parts.length - 1];
+				return;
+			}
+		}
+
+		inputValue = newValue;
+	};
+
+	/**
+	 * Handles keydown events
+	 */
+	const handleKeydown = (event: KeyboardEvent) => {
+		// Check for separator keys (e.g., Enter)
+		if (separatorKeys.includes(event.key)) {
+			event.preventDefault();
+			if (inputValue.trim()) {
+				addTag(inputValue);
+			}
+			return;
+		}
+
+		// Handle Backspace to remove last tag when input is empty
+		if (event.key === 'Backspace' && inputValue === '' && value.length > 0) {
+			removeTag(value.length - 1);
+			return;
+		}
+
+		// Handle Tab to add tag if there's input
+		if (event.key === 'Tab' && inputValue.trim()) {
+			event.preventDefault();
+			addTag(inputValue);
+			return;
+		}
+
+		onkeydown?.(event);
+	};
+
+	/**
+	 * Handles focus events
+	 */
+	const handleFocus = (event: FocusEvent) => {
+		isFocused = true;
+		onfocus?.(event);
+	};
+
+	/**
+	 * Handles blur events
+	 */
+	const handleBlur = (event: FocusEvent) => {
+		isFocused = false;
+
+		// Add any remaining input as a tag on blur
+		if (inputValue.trim()) {
+			addTag(inputValue);
+		}
+
+		onblur?.(event);
+	};
+
+	/**
+	 * Handles wrapper click to focus input
+	 */
+	const handleWrapperClick = () => {
+		focusInput();
+	};
+
+	/**
+	 * Gets the tooltip background color based on alert type
+	 */
+	const getTooltipColor = (alertType: string) => {
+		switch (alertType) {
+			case 'error':
+				return 'var(--redBackground, #cf313b)';
+			case 'warning':
+				return 'var(--orangeBackground, #bf4704)';
+			case 'success':
+				return 'var(--greenBackground, #007a41)';
+			case 'info':
+			default:
+				return 'var(--actionPrimaryBackground, #006acc)';
+		}
+	};
+</script>
+
+{#snippet tagsInputContent()}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		class={wrapperClasses}
+		style="width: {width}; min-height: {height};"
+		role="group"
+		aria-labelledby="{id}-label"
+		onclick={handleWrapperClick}
+		onkeydown={(e) => e.key === 'Enter' && handleWrapperClick()}
+	>
+		<div class="tags-input-content">
+			{#each value as tag, index (tag)}
+				<span class="tag" role="listitem">
+					<span class="tag-text">{tag}</span>
+					{#if !readonly && !isDisabled}
+						<button
+							type="button"
+							class="tag-remove"
+							onclick={(e) => {
+								e.stopPropagation();
+								removeTag(index);
+							}}
+							aria-label="Remove tag {tag}"
+							tabindex={-1}
+						>
+							<TimesIcon />
+						</button>
+					{/if}
+				</span>
+			{/each}
+
+			{#if !readonly}
+				<input
+					bind:this={inputElement}
+					{id}
+					type="text"
+					class="tags-input-field"
+					placeholder={showPlaceholder ? placeholder : ''}
+					value={inputValue}
+					disabled={isDisabled || !canAddMore}
+					oninput={handleInput}
+					onkeydown={handleKeydown}
+					onfocus={handleFocus}
+					onblur={handleBlur}
+					aria-label="Add new tag"
+					{...restProps}
+				/>
+			{/if}
+
+			{#if loading}
+				<div class="tags-input-loader">
+					<Loader size={14} color="var(--text2)" />
+				</div>
+			{/if}
+		</div>
+
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/snippet}
+
+<Tooltip
+	message={hasAlert ? alert?.message || '' : ''}
+	placement="top"
+	listener="hover"
+	listenerout="hover"
+	showArrow={true}
+	hidden={!hasAlert}
+	disabled={!hasAlert || !alert?.message}
+	fontColor="var(--actionPrimaryText)"
+	width="max-content"
+	padding="6px"
+	bgColor={getTooltipColor(alert?.type || 'info')}
+	class="tags-input-tooltip"
+>
+	{#snippet target()}
+		{@render tagsInputContent()}
+	{/snippet}
+</Tooltip>
+
+<style>
+	:global(.tags-input-tooltip) {
+		padding: 0;
+	}
+
+	.tags-input-wrapper {
+		position: relative;
+		border: 1px solid var(--border3, rgba(255, 255, 255, 0.19));
+		border-radius: var(--border-radius, 4px);
+		padding: 4px;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		align-content: flex-start;
+		background: var(--background1, #1e1e1e);
+		min-height: 32px;
+		box-shadow:
+			0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset,
+			0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset,
+			0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset,
+			0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset,
+			0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
+			0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset;
+		cursor: text;
+	}
+
+	.tags-input-wrapper.focused {
+		border-color: var(--blueBorder, #007df0);
+	}
+
+	.tags-input-wrapper.invalid {
+		border-color: var(--redBorder, #e42f3a);
+	}
+
+	.tags-input-wrapper.disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+		border-color: var(--border1, rgba(255, 255, 255, 0.1));
+	}
+
+	.tags-input-wrapper.loading {
+		cursor: wait;
+	}
+
+	.tags-input-content {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		align-content: flex-start;
+		gap: 4px;
+		width: 100%;
+	}
+
+	.tag {
+		position: relative;
+		display: flex;
+		padding: 4px 8px;
+		justify-content: center;
+		align-items: center;
+		border-radius: var(--border-radius, 4px);
+		background: var(--actionSecondaryBackground);
+		color: var(--text1, #ebebeb);
+		font-size: var(--font-size-small, 11.5px);
+		font-weight: var(--font-weight-normal, 400);
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		box-shadow:
+			0 0.5px 1px 0 #000,
+			0 0.5px 0.5px 0 rgba(255, 255, 255, 0.12) inset;
+		user-select: none;
+	}
+
+	.tag-text {
+		max-width: 150px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.tag-remove {
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: max-content;
+		padding: 4px;
+		border: none;
+		background: #464646;
+		color: var(--text2);
+		cursor: pointer;
+		border-radius: 0 var(--border-radius, 4px) var(--border-radius, 4px) 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.tags-input-wrapper:not(.disabled) .tag:hover .tag-remove {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.tag-remove:not(:disabled) {
+		color: var(--text1, #ebebeb);
+	}
+
+	.tag-remove:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.tag-remove :global(svg) {
+		width: 10px;
+		height: 10px;
+	}
+
+	.tags-input-field {
+		flex: 1;
+		min-width: 60px;
+		padding: 4px 8px;
+		border: none;
+		background: transparent;
+		color: var(--text1, #ebebeb);
+		font-size: var(--font-size-small, 11.5px);
+		font-family: inherit;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		outline: none;
+	}
+
+	.tags-input-field::placeholder {
+		color: var(--text3, #a3a3a3);
+	}
+
+	.tags-input-field:disabled {
+		cursor: not-allowed;
+	}
+
+	.tags-input-loader {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 4px;
+	}
+</style>

package/dist/ui/components/tags/TagsInput.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TagsInputProps } from './types.js';
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "value">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;

package/dist/ui/components/tags/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TagsInput } from './TagsInput.svelte';
+export * from './types.js';

package/dist/ui/components/tags/index.js

@@ -0,0 +1,2 @@
+export { default as TagsInput } from './TagsInput.svelte';
+export * from './types.js';

package/dist/ui/components/tags/types.d.ts

@@ -0,0 +1,123 @@
+import type { Snippet } from 'svelte';
+import type { AlertConfig } from '../input/types.js';
+export interface TagsInputProps {
+    /**
+     * Array of tag values
+     */
+    value?: string[];
+    /**
+     * Placeholder text when no tags and input is empty
+     */
+    placeholder?: string;
+    /**
+     * Input field id
+     */
+    id?: string;
+    /**
+     * If true, the input field will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * If true, the component will show loading state
+     */
+    loading?: boolean;
+    /**
+     * If true, the input field will be invalid
+     */
+    invalid?: boolean;
+    /**
+     * If true, the input field will be readonly (no adding/removing tags)
+     */
+    readonly?: boolean;
+    /**
+     * Defines the alert message to show
+     */
+    alert?: AlertConfig | null;
+    /**
+     * Maximum number of tags allowed
+     */
+    maxTags?: number | null;
+    /**
+     * Minimum number of tags required (for validation display)
+     */
+    minTags?: number | null;
+    /**
+     * Maximum length of each tag
+     */
+    maxTagLength?: number | null;
+    /**
+     * Separator keys to trigger tag creation (default: ['Enter', ','])
+     */
+    separatorKeys?: string[];
+    /**
+     * Whether to allow duplicate tags (default: false)
+     */
+    allowDuplicates?: boolean;
+    /**
+     * Custom validation function for tags
+     * Return true if valid, false or error message string if invalid
+     */
+    validateTag?: (tag: string) => boolean | string;
+    /**
+     * Whether to trim whitespace from tags (default: true)
+     */
+    trimTags?: boolean;
+    /**
+     * Custom width for the component
+     */
+    width?: string;
+    /**
+     * Custom height for the component
+     */
+    height?: string;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Event handler for value changes
+     */
+    onValueChange?: (tags: string[]) => void;
+    /**
+     * Event handler for individual tag addition
+     */
+    onTagAdd?: (tag: string) => void;
+    /**
+     * Event handler for individual tag removal
+     */
+    onTagRemove?: (tag: string, index: number) => void;
+    /**
+     * Event handler for invalid tag attempt
+     */
+    onInvalidTag?: (tag: string, reason: string) => void;
+    /**
+     * Event handler for focus events
+     */
+    onfocus?: (event: FocusEvent) => void;
+    /**
+     * Event handler for blur events
+     */
+    onblur?: (event: FocusEvent) => void;
+    /**
+     * Event handler for keydown events
+     */
+    onkeydown?: (event: KeyboardEvent) => void;
+    /**
+     * Children content (if any)
+     */
+    children?: Snippet;
+}
+export interface TagAddEvent {
+    tag: string;
+}
+export interface TagRemoveEvent {
+    tag: string;
+    index: number;
+}
+export interface InvalidTagEvent {
+    tag: string;
+    reason: string;
+}
+export interface TagsValueChangeEvent {
+    tags: string[];
+}

package/dist/ui/components/tags/types.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {