@finsweet/webflow-apps-utils 1.0.7 → 1.0.9

package/dist/index.d.ts

@@ -1,6 +1,3 @@
 export * from './ui';
-export * from './router';
-export * from './stores';
-export * from './providers';
 export * from './utils';
 export * from './types';

package/dist/index.js

@@ -1,6 +1,3 @@
 export * from './ui';
-export * from './router';
-export * from './stores';
-export * from './providers';
 export * from './utils';
 export * from './types';

package/dist/types/customCode.d.ts

@@ -2,7 +2,7 @@ interface CustomCodeAttributes {
     async: string;
     type: string;
     siteId: string;
-    finsweet: 'components' | 'cmp' | 'fast-search';
+    finsweet: 'components' | 'consentpro';
 }
 export interface CustomCodeBlock {
     id?: string;

package/dist/ui/components/Loader.svelte

@@ -16,7 +16,6 @@
 
 <div class="wrapper" style={`margin: ${margin};`}>
 	<svg class="loader-svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-		<!-- Background track circle with opacity -->
 		<circle
 			cx={center}
 			cy={center}
@@ -27,7 +26,6 @@
 			opacity="0.2"
 		/>
 
-		<!-- Animated quarter arc -->
 		<circle
 			cx={center}
 			cy={center}

package/dist/ui/components/button/Button.stories.svelte

@@ -56,7 +56,6 @@
 	});
 </script>
 
-<!-- Basic Variants -->
 <Story
 	name="Primary"
 	args={{
@@ -89,7 +88,6 @@
 	}}
 />
 
-<!-- States -->
 <Story
 	name="Loading"
 	args={{
@@ -107,7 +105,6 @@
 	}}
 />
 
-<!-- Full Width -->
 <Story
 	name="Full Width"
 	args={{
@@ -116,7 +113,6 @@
 	}}
 />
 
-<!-- With Icons using Component Props -->
 <Story
 	name="With Icon Left"
 	args={{
@@ -141,7 +137,6 @@
 	}}
 />
 
-<!-- Common Use Cases -->
 <Story
 	name="Play Button"
 	args={{
@@ -188,7 +183,6 @@
 	}}
 />
 
-<!-- Loading States with Icons -->
 <Story
 	name="Loading with Icon"
 	args={{
@@ -200,7 +194,6 @@
 	}}
 />
 
-<!-- Invalid State (Disabled with Tooltip) -->
 <Story
 	name="Invalid State"
 	args={{
@@ -216,7 +209,6 @@
 	}}
 />
 
-<!-- Tooltip Examples -->
 <Story
 	name="Basic Tooltip"
 	args={{

package/dist/ui/components/button/Button.svelte

@@ -163,45 +163,41 @@
 			>
 				{#if children}
 					{@render children()}
+				{:else if loading}
+					<div class="button__content">
+						<Loader size={parseInt(computedIconSize)} color="currentColor" />
+						{#if currentText}
+							<span class="button__text">{currentText}</span>
+						{/if}
+					</div>
 				{:else}
-					<!-- Loading state -->
-					{#if loading}
-						<div class="button__content">
-							<Loader size={parseInt(computedIconSize)} color="currentColor" />
-							{#if currentText}
-								<span class="button__text">{currentText}</span>
-							{/if}
-						</div>
-					{:else}
-						<!-- Normal state -->
-						<div class="button__content">
-							{#if hasLeftIcon}
-								<div
-									class="button__icon button__icon--left"
-									style:color={iconColor}
-									style:width={computedIconSize}
-									style:height={computedIconSize}
-								>
-									<LeftIcon />
-								</div>
-							{/if}
-
-							{#if hasText}
-								<span class="button__text">{currentText}</span>
-							{/if}
-
-							{#if hasRightIcon}
-								<div
-									class="button__icon button__icon--right"
-									style:color={iconColor}
-									style:width={computedIconSize}
-									style:height={computedIconSize}
-								>
-									<RightIcon />
-								</div>
-							{/if}
-						</div>
-					{/if}
+					<div class="button__content">
+						{#if hasLeftIcon}
+							<div
+								class="button__icon button__icon--left"
+								style:color={iconColor}
+								style:width={computedIconSize}
+								style:height={computedIconSize}
+							>
+								<LeftIcon />
+							</div>
+						{/if}
+
+						{#if hasText}
+							<span class="button__text">{currentText}</span>
+						{/if}
+
+						{#if hasRightIcon}
+							<div
+								class="button__icon button__icon--right"
+								style:color={iconColor}
+								style:width={computedIconSize}
+								style:height={computedIconSize}
+							>
+								<RightIcon />
+							</div>
+						{/if}
+					</div>
 				{/if}
 			</button>
 		{/snippet}
@@ -220,45 +216,41 @@
 	>
 		{#if children}
 			{@render children()}
+		{:else if loading}
+			<div class="button__content">
+				<Loader size={parseInt(computedIconSize)} color="currentColor" />
+				{#if currentText}
+					<span class="button__text">{currentText}</span>
+				{/if}
+			</div>
 		{:else}
-			<!-- Loading state -->
-			{#if loading}
-				<div class="button__content">
-					<Loader size={parseInt(computedIconSize)} color="currentColor" />
-					{#if currentText}
-						<span class="button__text">{currentText}</span>
-					{/if}
-				</div>
-			{:else}
-				<!-- Normal state -->
-				<div class="button__content">
-					{#if hasLeftIcon}
-						<div
-							class="button__icon button__icon--left"
-							style:color={iconColor}
-							style:width={computedIconSize}
-							style:height={computedIconSize}
-						>
-							<LeftIcon />
-						</div>
-					{/if}
-
-					{#if hasText}
-						<span class="button__text">{currentText}</span>
-					{/if}
-
-					{#if hasRightIcon}
-						<div
-							class="button__icon button__icon--right"
-							style:color={iconColor}
-							style:width={computedIconSize}
-							style:height={computedIconSize}
-						>
-							<RightIcon />
-						</div>
-					{/if}
-				</div>
-			{/if}
+			<div class="button__content">
+				{#if hasLeftIcon}
+					<div
+						class="button__icon button__icon--left"
+						style:color={iconColor}
+						style:width={computedIconSize}
+						style:height={computedIconSize}
+					>
+						<LeftIcon />
+					</div>
+				{/if}
+
+				{#if hasText}
+					<span class="button__text">{currentText}</span>
+				{/if}
+
+				{#if hasRightIcon}
+					<div
+						class="button__icon button__icon--right"
+						style:color={iconColor}
+						style:width={computedIconSize}
+						style:height={computedIconSize}
+					>
+						<RightIcon />
+					</div>
+				{/if}
+			</div>
 		{/if}
 	</button>
 {/if}

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

@@ -1,2 +1,2 @@
 export { default as Button } from './Button.svelte';
-export type { ButtonType, ButtonVariant, ButtonProps } from './types.js';
+export * from './types.js';

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

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

package/dist/ui/components/controlled-buttons/ControlledButtons.svelte

@@ -13,7 +13,6 @@
 	<div class="controlled-buttons">
 		{#each buttons as button, index (button.id || index)}
 			{#if button.show !== false}
-				<!-- Button with popup menu -->
 				{#if button?.popupButtons?.length}
 					<Tooltip
 						position="fixed"
@@ -42,6 +41,7 @@
 										{#if popupButton.show !== false}
 											<Section
 												class="link"
+												padding="4px var(--Spacing-8, 8px)"
 												clickable
 												disabled={popupButton.disabled || popupButton.loading}
 												onclick={(e: MouseEvent) => {
@@ -60,12 +60,13 @@
 													<Text
 														label={popupButton.text}
 														fontWeight="500"
-														fontColor="var(--text2)"
+														fontColor="var(--text1)"
 														fontSize="normal"
 													/>
 													<Text
 														label={popupButton.description || ''}
-														fontColor="#BDBDBD"
+														raw={true}
+														fontColor="var(--text2)"
 														fontSize="normal"
 													/>
 												</div>
@@ -76,8 +77,6 @@
 							</div>
 						{/snippet}
 					</Tooltip>
-
-					<!-- Button with tooltip -->
 				{:else if button.tooltip}
 					<Tooltip
 						padding="0"
@@ -109,8 +108,6 @@
 							</div>
 						{/snippet}
 					</Tooltip>
-
-					<!-- Simple button -->
 				{:else}
 					<Button
 						text={button.text}
@@ -160,6 +157,7 @@
 		gap: var(--Spacing-8, 8px);
 		padding: 6px;
 	}
+
 	.tooltip-content.invalid-selection :global(svg) {
 		color: var(--yellowText);
 	}
@@ -189,6 +187,18 @@
 		background: var(--background);
 		border-radius: 4px;
 	}
+	.popup-content-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		color: var(--text1);
+	}
+	.popup-content-icon :global(svg) {
+		width: 16px;
+		height: 16px;
+	}
 
 	.popup-content-list {
 		display: flex;

package/dist/ui/components/copy-text/CopyText.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import ClipboardJS from 'clipboard';
 	import type { Snippet } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	import { CopyIcon, EyeIcon } from '../../icons';
@@ -27,8 +29,9 @@
 	// Component state
 	let isCopied = $state(false);
 	let isCooldown = $state(false);
+	let copyButtonElement: HTMLDivElement | undefined = $state();
+	let clipboard: ClipboardJS | null = null;
 
-	// Simple computed values to avoid infinite loops
 	function getProcessedContent() {
 		if (raw) {
 			return comment ? `<!-- ${comment} -->\n${content}` : content;
@@ -60,38 +63,50 @@
 		}
 	};
 
-	// Simple click handler without reactive effects to avoid infinite loops
-	function handleClick() {
-		if (disabled) return;
-
-		// Use modern clipboard API instead of ClipboardJS to avoid issues
-		const textToCopy = getProcessedContent();
-
-		if (navigator.clipboard) {
-			navigator.clipboard
-				.writeText(textToCopy)
-				.then(() => {
-					isCopied = true;
-					handleNotification('Success', 'Copied to clipboard!');
-					onCopy?.(textToCopy);
-
-					// Reset copied state after 2 seconds
-					setTimeout(() => {
-						isCopied = false;
-					}, 2000);
-				})
-				.catch(() => {
-					const errorMessage = 'Failed to copy. Please try again.';
-					handleNotification('Error', errorMessage);
-					onError?.(errorMessage);
-				});
-		} else {
-			// Fallback for browsers that don't support navigator.clipboard
-			const errorMessage = 'Clipboard not supported in this browser';
-			handleNotification('Error', errorMessage);
-			onError?.(errorMessage);
+	// Initialize ClipboardJS when the element is available and not disabled
+	$effect(() => {
+		// Cleanup previous instance
+		clipboard?.destroy();
+		clipboard = null;
+
+		if (copyButtonElement && !disabled) {
+			clipboard = new ClipboardJS(copyButtonElement, {
+				text: () => {
+					if (disabled) {
+						const errorMessage = 'Copy is disabled';
+						handleNotification('Error', errorMessage);
+						onError?.(errorMessage);
+						return '';
+					}
+
+					return getProcessedContent();
+				}
+			});
+
+			clipboard.on('success', (e) => {
+				const copiedText = getProcessedContent();
+				isCopied = true;
+				handleNotification('Success', 'Copied to clipboard!');
+				onCopy?.(copiedText);
+				e.clearSelection();
+
+				// Reset copied state after 2 seconds
+				setTimeout(() => {
+					isCopied = false;
+				}, 2000);
+			});
+
+			clipboard.on('error', () => {
+				const errorMessage = 'Failed to copy. Please try again.';
+				handleNotification('Error', errorMessage);
+				onError?.(errorMessage);
+			});
 		}
-	}
+	});
+
+	onDestroy(() => {
+		clipboard?.destroy();
+	});
 </script>
 
 {#if !hidden}
@@ -107,18 +122,12 @@
 		{/if}
 
 		<div
+			bind:this={copyButtonElement}
 			class={getCopyButtonClasses()}
 			role="button"
 			tabindex="0"
 			aria-label={disabled ? 'Copy disabled' : tooltip}
 			title={tooltip}
-			onclick={handleClick}
-			onkeydown={(e) => {
-				if ((e.key === 'Enter' || e.key === ' ') && !disabled) {
-					e.preventDefault();
-					handleClick();
-				}
-			}}
 		>
 			<div class="copy-button__content" id="copy-content">
 				{getProcessedContent()}

package/dist/ui/components/divider/Divider.stories.svelte

@@ -53,7 +53,6 @@
 	});
 </script>
 
-<!-- Basic variants -->
 <Story name="Default" />
 
 <Story
@@ -88,7 +87,6 @@
 	}}
 />
 
-<!-- Color variants -->
 <Story
 	name="Success"
 	args={{
@@ -113,7 +111,6 @@
 	}}
 />
 
-<!-- Complex example with content context -->
 <Story name="In Content">
 	<div style="padding: 20px; background: var(--background1); border-radius: 8px;">
 		<p style="margin: 0 0 16px 0; color: var(--text1);">Content above divider</p>
@@ -122,7 +119,6 @@
 	</div>
 </Story>
 
-<!-- Playground -->
 <Story
 	name="Playground"
 	args={{

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

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

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

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

package/dist/ui/components/layout/Layout.svelte

@@ -2,7 +2,6 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	import { useAppContext } from '../../../providers';
 	import {
 		CheckCircleOutlinedIcon,
 		WarningCircleIcon,
@@ -163,7 +162,6 @@
 	style="{containerStyles} --grid-template-areas: {gridTemplateAreas()}; --grid-template-columns: {gridTemplateColumns}; --grid-template-rows: {gridTemplateRows()};"
 	{...restProps}
 >
-	<!-- Navbar/Tab Switcher -->
 	{#if showTabs}
 		<div class="navbar" data-area="navbar">
 			{#each tabs as tab (tab.path)}
@@ -210,7 +208,6 @@
 		</div>
 	{/if}
 
-	<!-- Preview Bar -->
 	{#if showPreviewBar && showSidebar}
 		<div class="preview-bar" data-area="preview-bar">
 			{#if previewBar}
@@ -223,7 +220,6 @@
 		</div>
 	{/if}
 
-	<!-- Sidebar -->
 	{#if showSidebar}
 		<div class="sidebar" data-area="sidebar">
 			{#if sidebar}
@@ -240,7 +236,6 @@
 		</div>
 	{/if}
 
-	<!-- Main Content -->
 	<div class="main-content" data-area="main">
 		{#if main}
 			<div class="main-content-container" style="padding: {mainContentPadding}">
@@ -274,7 +269,6 @@
 		{/if}
 	</div>
 
-	<!-- Footer -->
 	{#if showFooter && footer}
 		<div class="footer" data-area="footer">
 			{@render footer()}

package/dist/ui/components/layout/common/EditModeMessage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { useAppContext } from '../../../../providers';
 	import { Pencil, WarningTriangleOutlineIcon } from '../../../icons';
+	import { useAppContext } from '../../../providers';
 	import { BRAND } from '../../../../utils';
 
 	import { Notification } from '../../notification';

package/dist/ui/components/layout/examples/ExampleLayout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	import { useAppContext } from '../../../../providers';
+	import { useAppContext } from '../../../providers';
 
 	import { CheckCircleIcon, CodeIcon, InfoIcon, SettingsIcon } from '../../../icons';
 	import { Button } from '../../button';
@@ -98,7 +98,6 @@
 </script>
 
 <div class="example-container">
-	<!-- Configuration Panel -->
 	<div class="configurator-panel">
 		<div class="config-panel">
 			<div class="config-header">
@@ -106,9 +105,7 @@
 			</div>
 
 			<div class="config-content">
-				<!-- Controls Section -->
 				<div class="config-section">
-					<!-- Active Tab Selector -->
 					<div class="control-group">
 						<label for="active-tab" class="control-label">Active Tab</label>
 						<select id="active-tab" bind:value={activeTab} class="select-input">
@@ -117,7 +114,6 @@
 						</select>
 					</div>
 
-					<!-- Sidebar Width -->
 					<div class="control-group">
 						<label for="sidebar-width" class="control-label">Sidebar Width</label>
 						<select id="sidebar-width" bind:value={sidebarWidth} class="select-input">
@@ -126,7 +122,6 @@
 						</select>
 					</div>
 
-					<!-- Footer Size -->
 					<div class="control-group">
 						<label for="footer-size" class="control-label">Footer Size</label>
 						<select id="footer-size" bind:value={footerSize} class="select-input">
@@ -136,7 +131,6 @@
 					</div>
 				</div>
 
-				<!-- Toggle Controls Section -->
 				<div class="config-section">
 					<div class="toggles-list">
 						<div class="toggle-control">
@@ -220,7 +214,6 @@
 		</div>
 	</div>
 
-	<!-- Layout Preview, 800px x 600px in dimension -->
 	<div class="layout-preview">
 		<Layout
 			{activeTab}
@@ -274,7 +267,7 @@
 							placeholder="Type here..."
 							width="130px"
 						/>
-						<!-- Examples with tooltip alerts -->
+
 						<Input
 							value="Error input"
 							invalid={true}

package/dist/ui/components/layout/examples/Wrapper.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { GlobalProvider } from '../../../../providers';
+	import { GlobalProvider } from '../../../providers';
 
 	import ExampleLayout from './ExampleLayout.svelte';
 </script>