@finsweet/webflow-apps-utils 1.0.50 → 1.0.52

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/select/Select.stories.d.ts

@@ -108,3 +108,4 @@ export declare const InvalidState: Story;
 export declare const InvalidWithAlert: Story;
 export declare const ValidationStates: Story;
 export declare const FormValidationExample: Story;
+export declare const WithFooter: Story;

package/dist/ui/components/select/Select.stories.js

@@ -1,5 +1,6 @@
 import { CheckIcon, UndoIcon } from '../../icons';
 import Select from './Select.svelte';
+import SelectWithFooterStory from './SelectWithFooterStory.svelte';
 // Mock options for stories
 const basicOptions = [
     { label: 'Option 1', value: 'option1' },
@@ -567,3 +568,37 @@ export const FormValidationExample = {
         }
     }
 };
+// Footer snippet example
+const providerOptions = [
+    { label: 'Facebook', value: 'facebook' },
+    { label: 'Google', value: 'google' },
+    { label: 'Cloudflare', value: 'cloudflare' },
+    { label: 'Youtube', value: 'youtube' },
+    { label: 'Swiper', value: 'swiper' },
+    { label: 'GSAP', value: 'gsap' }
+];
+export const WithFooter = {
+    render: () => ({
+        Component: SelectWithFooterStory,
+        props: {
+            options: providerOptions,
+            defaultText: 'Providers',
+            dropdownWidth: '250px',
+            dropdownHeight: '200px',
+            selected: 'facebook'
+        }
+    }),
+    args: {
+        options: providerOptions,
+        defaultText: 'Providers',
+        dropdownWidth: '250px',
+        dropdownHeight: '200px'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Select with a sticky footer action. The footer stays visible while scrolling through options. Click the footer to trigger a custom action and close the dropdown.'
+            }
+        }
+    }
+};

package/dist/ui/components/select/Select.svelte

@@ -14,7 +14,12 @@
 
 	import { Tooltip } from '..';
 	import { Text } from '../text';
-	import type { DropdownInstance, SelectInstanceManager, SelectProps } from './types.js';
+	import type {
+		DropdownInstance,
+		SelectFooterProps,
+		SelectInstanceManager,
+		SelectProps
+	} from './types.js';
 
 	let {
 		id = uuidv4(),
@@ -38,7 +43,8 @@
 		invalid = false,
 		className = '',
 		onchange,
-		children
+		children,
+		footer
 	}: SelectProps = $props();
 
 	// State variables
@@ -274,6 +280,17 @@
 		lastHoveredItem = target;
 	};
 
+	/**
+	 * Clears the hover state when mouse leaves the items area.
+	 */
+	const clearHoverState = (): void => {
+		if (lastHoveredItem) {
+			lastHoveredItem.classList.remove('hover-state');
+			lastHoveredItem.setAttribute('tabindex', '-1');
+			lastHoveredItem = null;
+		}
+	};
+
 	type EventOption = [string, () => void];
 
 	/**
@@ -403,14 +420,14 @@
 	const getTooltipColor = (alertType: string) => {
 		switch (alertType) {
 			case 'error':
-				return 'var(--redBackground, #ff4d4d)';
+				return 'var(--redBackground)';
 			case 'warning':
-				return 'var(--orangeBackground, #ff9933)';
+				return 'var(--orangeBackground)';
 			case 'success':
-				return 'var(--greenBackground, #00cc66)';
+				return 'var(--greenBackground)';
 			case 'info':
 			default:
-				return 'var(--blueBackground, #4d9fff)';
+				return 'var(--actionPrimaryBackground)';
 		}
 	};
 
@@ -458,8 +475,9 @@
 			<div
 				tabindex={disabled || isOpen ? -1 : 0}
 				class="dropdown-list"
+				class:has-footer={footer}
 				role="listbox"
-				style="width:{dropdownWidth}; max-height:{dropdownHeight};"
+				style="width:{dropdownWidth};"
 				onkeydown={(e) => {
 					e.stopPropagation();
 					e.preventDefault();
@@ -467,85 +485,98 @@
 				}}
 				bind:this={dropdownItems}
 			>
-				{#if selectedLabel}
-					<div class="selected">
-						<div class="label">
-							<Text label={selectedLabel} fontSize="normal" fontColor="var(--text1)" />
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div
+					class="dropdown-items-scroll"
+					style="max-height:{dropdownHeight};"
+					onmouseleave={clearHoverState}
+				>
+					{#if selectedLabel}
+						<div class="selected">
+							<div class="label">
+								<Text label={selectedLabel} fontSize="normal" fontColor="var(--text1)" />
+							</div>
 						</div>
-					</div>
-				{/if}
-
-				{#if enableSearch}
-					<div class="search-container">
-						<input
-							type="text"
-							placeholder="Search"
-							oninput={(e) => {
+					{/if}
+
+					{#if enableSearch}
+						<div class="search-container">
+							<input
+								type="text"
+								placeholder="Search"
+								oninput={(e) => {
+									e.stopPropagation();
+									e.preventDefault();
+									handleSearch(e);
+								}}
+								onkeydown={(e) => e.stopPropagation()}
+							/>
+						</div>
+					{/if}
+
+					{#each optionsStore?.length > 0 ? optionsStore : options as { label, value, className = null, description = null, labelIcon = null, descriptionTitle = null, isDisabled = false }, index (index)}
+						{@const indexId = index + 1}
+						{@const itemId = ref ? ref.replace(' ', '-') : 'dropdown'}
+						<button
+							aria-posinset={indexId}
+							aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
+							id={`${itemId}-list-${indexId}-${id}`}
+							data-value={value}
+							class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
+							role="option"
+							onclick={(e) => {
+								e.stopPropagation();
+								if (isDisabled) return;
+								handleSelect(value, label, e.currentTarget);
+							}}
+							onkeydown={(e) => {
 								e.stopPropagation();
 								e.preventDefault();
-								handleSearch(e);
 							}}
-							onkeydown={(e) => e.stopPropagation()}
-						/>
+							onmouseenter={handleMouseEnter}
+							aria-hidden={!isOpen}
+							tabindex={value === selected ? 0 : -1}
+							style={description ? 'align-items:start;' : ''}
+						>
+							<div class="icon" aria-label={label}>
+								{#if value === selected && selected?.trim() !== ''}
+									<CheckIcon />
+								{/if}
+							</div>
+							<div class="label">
+								{#if description || descriptionTitle || labelIcon}
+									<div class="label-content">
+										<div class="label-name">
+											<Text {label} />
+											{#if labelIcon}
+												{@const IconComponent = labelIcon}
+												<IconComponent />
+											{/if}
+										</div>
+										<div class="label-description-title">
+											<Text
+												label={descriptionTitle || ''}
+												fontColor="var(--greenText)"
+												fontSize="10px"
+											/>
+										</div>
+										<div class="label-description">
+											<Text label={description || ''} fontColor="var(--text2)" fontSize="10px" />
+										</div>
+									</div>
+								{:else}
+									<Text {label} fontSize="normal" />
+								{/if}
+							</div>
+						</button>
+					{/each}
+				</div>
+
+				{#if footer}
+					<div class="dropdown-footer">
+						{@render footer({ close: closeDropdown })}
 					</div>
 				{/if}
-
-				{#each optionsStore?.length > 0 ? optionsStore : options as { label, value, className = null, description = null, labelIcon = null, descriptionTitle = null, isDisabled = false }, index (index)}
-					{@const indexId = index + 1}
-					{@const itemId = ref ? ref.replace(' ', '-') : 'dropdown'}
-					<button
-						aria-posinset={indexId}
-						aria-selected={value === selected && selected?.trim() !== '' ? 'true' : 'false'}
-						id={`${itemId}-list-${indexId}-${id}`}
-						data-value={value}
-						class="dropdown-item {isDisabled ? 'disabled' : ''} {className}"
-						role="option"
-						onclick={(e) => {
-							e.stopPropagation();
-							if (isDisabled) return;
-							handleSelect(value, label, e.currentTarget);
-						}}
-						onkeydown={(e) => {
-							e.stopPropagation();
-							e.preventDefault();
-						}}
-						onmouseenter={handleMouseEnter}
-						aria-hidden={!isOpen}
-						tabindex={value === selected ? 0 : -1}
-						style={description ? 'align-items:start;' : ''}
-					>
-						<div class="icon" aria-label={label}>
-							{#if value === selected && selected?.trim() !== ''}
-								<CheckIcon />
-							{/if}
-						</div>
-						<div class="label">
-							{#if description || descriptionTitle || labelIcon}
-								<div class="label-content">
-									<div class="label-name">
-										<Text {label} />
-										{#if labelIcon}
-											{@const IconComponent = labelIcon}
-											<IconComponent />
-										{/if}
-									</div>
-									<div class="label-description-title">
-										<Text
-											label={descriptionTitle || ''}
-											fontColor="var(--greenText)"
-											fontSize="10px"
-										/>
-									</div>
-									<div class="label-description">
-										<Text label={description || ''} fontColor="var(--text2)" fontSize="10px" />
-									</div>
-								</div>
-							{:else}
-								<Text {label} fontSize="normal" />
-							{/if}
-						</div>
-					</button>
-				{/each}
 			</div>
 		</div>
 	</div>
@@ -675,14 +706,30 @@
 		position: absolute;
 		flex-direction: column;
 		align-items: flex-start;
-		gap: 4px;
+		gap: 0;
 		border-radius: 4px;
 		border: 1px solid var(--border1);
 		background: var(--background3);
 		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
+		z-index: 99999;
+	}
 
+	.dropdown-items-scroll {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 4px;
+		width: 100%;
 		overflow-y: auto;
-		z-index: 99999;
+	}
+
+	.dropdown-footer {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border-top: 1px solid var(--border1);
+		background: var(--background3);
+		flex-shrink: 0;
 	}
 	.dropdown-list .selected {
 		display: flex;

package/dist/ui/components/select/SelectWithFooterStory.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import Select from './Select.svelte';
+	import type { SelectOption } from './types.js';
+
+	interface Props {
+		options: SelectOption[];
+		defaultText?: string;
+		dropdownWidth?: string;
+		dropdownHeight?: string;
+		selected?: string | null;
+	}
+
+	let {
+		options,
+		defaultText = 'Select',
+		dropdownWidth = '200px',
+		dropdownHeight = '200px',
+		selected = $bindable(null)
+	}: Props = $props();
+
+	const handleFooterClick = (close: () => void) => {
+		console.log('Footer action clicked - adding a new provider manually');
+		close();
+	};
+</script>
+
+<Select {options} {defaultText} {dropdownWidth} {dropdownHeight} bind:selected>
+	{#snippet footer({ close })}
+		<button type="button" class="footer-action" onclick={() => handleFooterClick(close)}>
+			+ Add manually a provider
+		</button>
+	{/snippet}
+</Select>
+
+<style>
+	.footer-action {
+		all: unset;
+		display: flex;
+		align-items: center;
+		padding: 8px;
+		width: 100%;
+		color: var(--blueText);
+		font-size: 11.5px;
+		font-weight: 400;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		cursor: pointer;
+		box-sizing: border-box;
+	}
+
+	.footer-action:hover {
+		background: var(--background5);
+	}
+</style>

package/dist/ui/components/select/SelectWithFooterStory.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { SelectOption } from './types.js';
+interface Props {
+    options: SelectOption[];
+    defaultText?: string;
+    dropdownWidth?: string;
+    dropdownHeight?: string;
+    selected?: string | null;
+}
+declare const SelectWithFooterStory: import("svelte").Component<Props, {}, "selected">;
+type SelectWithFooterStory = ReturnType<typeof SelectWithFooterStory>;
+export default SelectWithFooterStory;

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

@@ -1,2 +1,2 @@
 export { default as Select } from './Select.svelte';
-export type { SelectOption, SelectProps, SelectChangeEvent, SelectChangeHandler, SelectState, DropdownInstance, DropdownConfig, SelectStyles, NavigationKey, KeyboardNavigationEvent, SearchConfig, FilterFunction, SelectElementRefs, SelectInstanceManager } from './types.js';
+export type { SelectOption, SelectProps, SelectFooterProps, SelectChangeEvent, SelectChangeHandler, SelectState, DropdownInstance, DropdownConfig, SelectStyles, NavigationKey, KeyboardNavigationEvent, SearchConfig, FilterFunction, SelectElementRefs, SelectInstanceManager } from './types.js';

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

@@ -24,6 +24,9 @@ export interface SelectChangeEvent {
     value: string | null;
 }
 export type SelectChangeHandler = (event: SelectChangeEvent) => void;
+export interface SelectFooterProps {
+    close: () => void;
+}
 export interface SelectProps {
     id?: string;
     defaultText?: string;
@@ -53,6 +56,11 @@ export interface SelectProps {
     className?: string;
     onchange?: SelectChangeHandler;
     children?: Snippet;
+    /**
+     * Footer snippet for custom actions at the bottom of the dropdown.
+     * Receives { close } function to close the dropdown.
+     */
+    footer?: Snippet<[SelectFooterProps]>;
 }
 export interface SelectState {
     isOpen: boolean;

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;