@finsweet/webflow-apps-utils 1.0.1

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

@@ -0,0 +1,94 @@
+import type { Placement } from '@floating-ui/dom';
+import type { Component, Snippet } from 'svelte';
+export type SelectValue = string & {
+    readonly brand: unique symbol;
+};
+export type SelectClassName = string & {
+    readonly brand: unique symbol;
+};
+export interface SelectOption {
+    label: string;
+    value: string;
+    description?: string;
+    labelIcon?: Component;
+    descriptionTitle?: string;
+    isDisabled?: boolean;
+    className?: string;
+}
+export interface SelectChangeEvent {
+    value: string | null;
+}
+export type SelectChangeHandler = (event: SelectChangeEvent) => void;
+export interface SelectProps {
+    id?: string;
+    defaultText?: string;
+    label?: string;
+    dialog?: boolean;
+    hide?: boolean;
+    enableSearch?: boolean;
+    tooltipMessage?: string;
+    ref?: string;
+    width?: string;
+    tooltipWidth?: string;
+    dropdownWidth?: string;
+    dropdownHeight?: string;
+    options: SelectOption[];
+    selected?: string | null;
+    preventNoSelection?: boolean;
+    disabled?: boolean;
+    placement?: Placement;
+    className?: string;
+    onchange?: SelectChangeHandler;
+    children?: Snippet;
+}
+export interface SelectState {
+    isOpen: boolean;
+    isFocused: boolean;
+    isHovered: boolean;
+    hasError: boolean;
+    showConfirmDialog: boolean;
+    selectedLabel: string;
+    lastHoveredItem: HTMLElement | null;
+    activeElement: HTMLElement | null;
+}
+export interface DropdownInstance {
+    toggle: HTMLElement;
+    tooltip: HTMLElement;
+    cleanup: () => void;
+}
+export interface DropdownConfig {
+    placement: Placement;
+    width: string;
+    height: string;
+    enableSearch: boolean;
+    preventNoSelection: boolean;
+}
+export interface SelectStyles {
+    borderRadius?: string;
+    background?: string;
+    boxShadow?: string;
+    border?: string;
+    opacity?: string;
+}
+export type NavigationKey = 'ArrowDown' | 'ArrowUp' | 'Enter' | 'Escape';
+export interface KeyboardNavigationEvent {
+    key: NavigationKey;
+    currentIndex: number;
+    items: HTMLElement[];
+}
+export interface SearchConfig {
+    enabled: boolean;
+    debounceMs: number;
+    placeholder: string;
+}
+export type FilterFunction = (options: SelectOption[], searchTerm: string) => SelectOption[];
+export interface SelectElementRefs {
+    confirmDialogElement?: HTMLElement;
+    dropdownWrapper?: HTMLElement;
+    target?: HTMLDivElement;
+    dropdownItems?: HTMLDivElement;
+}
+export interface SelectInstanceManager {
+    result: DropdownInstance[];
+    destroy(): void;
+}

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

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

package/dist/ui/components/switch/Switch.stories.d.ts

@@ -0,0 +1,58 @@
+import type { StoryObj } from '@storybook/sveltekit';
+import type { SwitchProps } from './types';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<SwitchProps, {}, "checked">;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        checked: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        id: {
+            control: string;
+            description: string;
+        };
+        ariaLabel: {
+            control: string;
+            description: string;
+        };
+        class: {
+            control: string;
+            description: string;
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+        name: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const DisabledChecked: Story;
+export declare const WithAriaLabel: Story;
+export declare const Required: Story;
+export declare const InteractiveExample: Story;
+export declare const InForm: Story;
+export declare const TwoWayBinding: Story;
+export declare const AccessibilityTest: Story;
+export declare const KeyboardNavigationDemo: Story;

package/dist/ui/components/switch/Switch.stories.js

@@ -0,0 +1,198 @@
+import Switch from './Switch.svelte';
+const meta = {
+    title: 'Ui/Switch',
+    component: Switch,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A modern Svelte 5 toggle switch component for binary choices. Features two-way binding, keyboard navigation, and comprehensive accessibility support.'
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        checked: {
+            control: 'boolean',
+            description: 'Whether the switch is in the on/checked state'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the switch is disabled'
+        },
+        id: {
+            control: 'text',
+            description: 'Unique identifier for the switch'
+        },
+        ariaLabel: {
+            control: 'text',
+            description: 'Accessible label for screen readers'
+        },
+        class: {
+            control: 'text',
+            description: 'Additional CSS classes'
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the switch is required in forms'
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute for form submission'
+        }
+    }
+};
+export default meta;
+// Basic states
+export const Default = {
+    args: {
+        checked: false
+    }
+};
+export const Checked = {
+    args: {
+        checked: true
+    }
+};
+export const Disabled = {
+    args: {
+        checked: false,
+        disabled: true
+    }
+};
+export const DisabledChecked = {
+    args: {
+        checked: true,
+        disabled: true
+    }
+};
+// With labels and accessibility
+export const WithAriaLabel = {
+    args: {
+        checked: false,
+        ariaLabel: 'Enable notifications'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Switch with an accessible label for screen readers.'
+            }
+        }
+    }
+};
+export const Required = {
+    args: {
+        checked: false,
+        required: true,
+        ariaLabel: 'Accept terms and conditions (required)'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Switch that is required in form contexts.'
+            }
+        }
+    }
+};
+// Interactive examples
+export const InteractiveExample = {
+    render: (args) => ({
+        Component: Switch,
+        props: {
+            ...args,
+            onchange: (event) => {
+                console.log('Switch toggled:', event);
+                alert(`Switch is now ${event.checked ? 'ON' : 'OFF'}`);
+            }
+        }
+    }),
+    args: {
+        checked: false,
+        ariaLabel: 'Click to see change event'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive switch that demonstrates the modern onchange event handler.'
+            }
+        }
+    }
+};
+// Form integration
+export const InForm = {
+    render: (args) => ({
+        Component: Switch,
+        props: {
+            ...args,
+            name: 'user-preferences',
+            id: 'notifications-toggle'
+        }
+    }),
+    args: {
+        checked: false,
+        ariaLabel: 'Enable email notifications',
+        required: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Switch configured for use in forms with proper name and id attributes.'
+            }
+        }
+    }
+};
+// Two-way binding example
+export const TwoWayBinding = {
+    render: () => ({
+        Component: () => `
+			<script>
+				import Switch from './Switch.svelte';
+				let isEnabled = $state(false);
+			</script>
+			
+			<div style="display: flex; flex-direction: column; gap: 16px; align-items: flex-start;">
+				<Switch bind:checked={isEnabled} ariaLabel="Toggle feature" />
+				<p>Feature is currently: <strong>{isEnabled ? 'ENABLED' : 'DISABLED'}</strong></p>
+				<button onclick={() => isEnabled = !isEnabled}>
+					{isEnabled ? 'Disable' : 'Enable'} via button
+				</button>
+			</div>
+		`
+    }),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates two-way binding with bind:checked directive.'
+            }
+        }
+    }
+};
+// Accessibility testing
+export const AccessibilityTest = {
+    args: {
+        checked: false,
+        ariaLabel: 'Accessibility test switch',
+        id: 'a11y-test-switch'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Switch configured for accessibility testing with proper ARIA attributes.'
+            }
+        }
+    }
+};
+// Keyboard navigation demo
+export const KeyboardNavigationDemo = {
+    args: {
+        checked: false,
+        ariaLabel: 'Use Tab to focus, Space or Enter to toggle'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates keyboard navigation. Use Tab to focus, then Space or Enter to toggle.'
+            }
+        }
+    }
+};

package/dist/ui/components/switch/Switch.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import type { SwitchChangeEvent, SwitchProps } from './types';
+
+	let {
+		checked = $bindable(false),
+		disabled = false,
+		id = '',
+		ariaLabel,
+		class: className = '',
+		required = false,
+		name,
+		onchange
+	}: SwitchProps = $props();
+
+	// Generate unique ID if not provided
+	let switchId = $derived(id || `switch-${Math.random().toString(36).substr(2, 9)}`);
+
+	// State for tracking focus
+	let isFocused = $state(false);
+
+	// Computed values
+	let isDisabled = $derived(disabled);
+	let isChecked = $derived(checked);
+
+	/**
+	 * Handles input events on the toggle checkbox
+	 */
+	const handleInput = (event: Event): void => {
+		if (isDisabled) return;
+
+		const target = event.target as HTMLInputElement;
+		const newChecked = target.checked;
+
+		// Update bindable prop
+		checked = newChecked;
+
+		// Create event object
+		const changeEvent: SwitchChangeEvent = {
+			checked: newChecked,
+			id: switchId
+		};
+
+		// Call event handler
+		onchange?.(changeEvent);
+	};
+
+	/**
+	 * Handle focus events
+	 */
+	const handleFocus = (): void => {
+		if (isDisabled) return;
+		isFocused = true;
+	};
+
+	/**
+	 * Handle blur events
+	 */
+	const handleBlur = (): void => {
+		isFocused = false;
+	};
+
+	/**
+	 * Handle keyboard navigation
+	 */
+	const handleKeydown = (event: KeyboardEvent): void => {
+		if (isDisabled) return;
+
+		// Space or Enter toggles the switch
+		if (event.key === ' ' || event.key === 'Enter') {
+			event.preventDefault();
+			const newChecked = !checked;
+			checked = newChecked;
+
+			const changeEvent: SwitchChangeEvent = {
+				checked: newChecked,
+				id: switchId
+			};
+
+			onchange?.(changeEvent);
+		}
+	};
+
+	// Computed classes for styling
+	let labelClasses = $derived.by(() => {
+		const classes = ['switch'];
+		if (isDisabled) classes.push('switch--disabled');
+		if (isFocused) classes.push('switch--focused');
+		if (className) classes.push(className);
+		return classes.join(' ');
+	});
+</script>
+
+<label class={labelClasses} for={switchId}>
+	<input
+		class="switch__input"
+		type="checkbox"
+		id={switchId}
+		name={name || switchId}
+		bind:checked
+		disabled={isDisabled}
+		{required}
+		aria-label={ariaLabel}
+		aria-checked={isChecked}
+		role="switch"
+		tabindex={isDisabled ? -1 : 0}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		oninput={handleInput}
+		onkeydown={handleKeydown}
+	/>
+	<div class="switch__track">
+		<div class="switch__handle"></div>
+	</div>
+</label>
+
+<style>
+	/* Reset */
+	*,
+	*:before,
+	*:after {
+		box-sizing: border-box;
+	}
+
+	/* Switch container */
+	.switch {
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		position: relative;
+		user-select: none;
+	}
+
+	.switch--disabled {
+		cursor: not-allowed;
+		opacity: 0.4;
+		pointer-events: none;
+	}
+
+	/* Hidden checkbox input */
+	.switch__input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+		opacity: 0;
+	}
+
+	/* Track (background) */
+	.switch__track {
+		display: inline-block;
+		background-color: var(--background3, #383838);
+		border: 1px solid var(--border3, #525252);
+		border-radius: 9px;
+		width: 27px;
+		height: 18px;
+		position: relative;
+		vertical-align: middle;
+		transition:
+			background-color 0.2s ease,
+			border-color 0.2s ease;
+	}
+
+	/* Handle (the moving circle) */
+	.switch__handle {
+		display: block;
+		background-color: var(--actionPrimaryText, #ffffff);
+		border-radius: 50%;
+		width: 14px;
+		height: 14px;
+		position: absolute;
+		top: 1px;
+		left: 1px;
+		transition: transform 0.2s ease;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+	}
+
+	/* Checked state */
+	.switch__input:checked + .switch__track {
+		background-color: var(--actionPrimaryBackground, #006acc);
+		border-color: var(--actionPrimaryBackground, #006acc);
+	}
+
+	.switch__input:checked + .switch__track .switch__handle {
+		transform: translateX(10px);
+	}
+
+	/* Hover states */
+	.switch:hover:not(.switch--disabled) .switch__track {
+		border-color: var(--border2, #6b6b6b);
+	}
+
+	.switch:hover:not(.switch--disabled) .switch__input:checked + .switch__track {
+		background-color: var(--actionPrimaryBackgroundHover, #187cd9);
+		border-color: var(--actionPrimaryBackgroundHover, #187cd9);
+	}
+
+	/* High contrast mode support */
+	@media (prefers-contrast: high) {
+		.switch__track {
+			border-width: 2px;
+		}
+
+		.switch__handle {
+			border: 1px solid var(--text1, #d9d9d9);
+		}
+	}
+
+	/* Reduced motion support */
+	@media (prefers-reduced-motion: reduce) {
+		.switch__track,
+		.switch__handle {
+			transition: none;
+		}
+	}
+</style>

package/dist/ui/components/switch/Switch.svelte.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch.svelte';
+export type { SwitchChangeEvent, SwitchChangeHandler, SwitchProps, SwitchState, SwitchAccessibilityConfig, SwitchAnimationConfig, SwitchThemeConfig } from './types';

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

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.svelte';

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

@@ -0,0 +1,47 @@
+export interface SwitchChangeEvent {
+    checked: boolean;
+    id?: string;
+}
+export type SwitchChangeHandler = (event: SwitchChangeEvent) => void;
+export interface SwitchProps {
+    checked?: boolean;
+    disabled?: boolean;
+    id?: string;
+    ariaLabel?: string;
+    class?: string;
+    required?: boolean;
+    name?: string;
+    onchange?: SwitchChangeHandler;
+}
+export interface SwitchState {
+    checked: boolean;
+    disabled: boolean;
+    focused: boolean;
+}
+export interface SwitchAccessibilityConfig {
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
+    role?: string;
+}
+export interface SwitchAnimationConfig {
+    duration: number;
+    easing: string;
+    enabled: boolean;
+}
+export interface SwitchThemeConfig {
+    size: 'sm' | 'md' | 'lg';
+    variant: 'default' | 'success' | 'warning' | 'danger';
+    customColors?: {
+        background?: string;
+        checkedBackground?: string;
+        border?: string;
+        checkedBorder?: string;
+        handle?: string;
+    };
+}
+export interface SwitchEvents {
+    change: SwitchChangeEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+}

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

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

package/dist/ui/components/text/README.md

@@ -0,0 +1,73 @@
+# Text Component
+
+A versatile and modern text component built with Svelte 5 that provides comprehensive styling options, tooltip support, and interactive popup functionality that matches the original popup design.
+
+## Features
+
+- ✅ **Modern Svelte 5**: Built with the latest Svelte 5 runes system (`$state`, `$derived`, `$props`)
+- ✅ **Flexible Styling**: Font size, weight, color, alignment, and more
+- ✅ **Tooltip Integration**: Full tooltip support with customizable options
+- ✅ **Original Popup Design**: Interactive popup system matching the exact original popup styling
+- ✅ **Accessibility**: Full keyboard navigation and ARIA support
+- ✅ **Loading States**: Built-in loading spinner support
+- ✅ **Icon Support**: Display icons alongside text
+- ✅ **Raw HTML**: Render HTML content when needed
+- ✅ **TypeScript**: Full type safety with comprehensive interfaces
+
+## Action Popups
+
+The popup system uses the exact same design and layout as the original popup component:
+
+```svelte
+<!-- Default popup (matches original exactly) -->
+<Text label="Remove item" popup={{}} on:popupAction={handleRemove} />
+
+<!-- Custom popup -->
+<Text
+	label="Delete item"
+	popup={{
+		title: 'Delete Item',
+		subtitle: 'Alt + click',
+		description: 'This action cannot be undone.',
+		icon: DeleteIcon,
+		active: true
+	}}
+	on:popupAction={handleDelete}
+/>
+```
+
+### Popup Styling Features
+
+The popup matches the original design with:
+
+- **Grid Layout**: 3-column grid layout for icon, title, and subtitle
+- **Exact Dimensions**: 200px width, minimum 80px height
+- **Original Colors**: `#353535` background, `#363636` borders
+- **Typography**: Same font sizes, weights, and colors
+- **Hover Effects**: Original hover styling with `var(--hoverColor)`
+- **Spacing**: Exact padding and gap values (8px, 12px)
+
+### Default Popup Configuration
+
+When you provide an empty `popup={}` object, you get these defaults:
+
+- **Title**: "Remove" (matches original)
+- **Subtitle**: "Alt + click"
+- **Description**: "This action will remove the current selection."
+- **Icon**: DeleteIcon (matches original default)
+
+## Storybook Examples
+
+View the popup examples in Storybook:
+
+- **Default Popup**: Shows exact original styling
+- **Original Popup Style**: Minimal configuration matching original
+- **Custom Popup**: Demonstrates customization options
+- **Active Popup**: Shows active state styling
+
+```bash
+npm run storybook
+# Navigate to UI/Text to see all popup examples
+```
+
+The popup component now provides pixel-perfect matching with the original popup design while maintaining the modern Svelte 5 architecture and flexible configuration options.