@finsweet/webflow-apps-utils 1.0.8 → 1.0.10

package/dist/ui/components/color-picker/ColorSelect.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    color?: string;
+    onchange?: (color: string) => void;
+};
+declare const ColorSelect: import("svelte").Component<$$ComponentProps, {}, "color">;
+type ColorSelect = ReturnType<typeof ColorSelect>;
+export default ColorSelect;

package/dist/ui/components/color-picker/index.d.ts

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

package/dist/ui/components/color-picker/index.js

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

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

@@ -162,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)}
@@ -209,7 +208,6 @@
 		</div>
 	{/if}
 
-	<!-- Preview Bar -->
 	{#if showPreviewBar && showSidebar}
 		<div class="preview-bar" data-area="preview-bar">
 			{#if previewBar}
@@ -222,7 +220,6 @@
 		</div>
 	{/if}
 
-	<!-- Sidebar -->
 	{#if showSidebar}
 		<div class="sidebar" data-area="sidebar">
 			{#if sidebar}
@@ -239,7 +236,6 @@
 		</div>
 	{/if}
 
-	<!-- Main Content -->
 	<div class="main-content" data-area="main">
 		{#if main}
 			<div class="main-content-container" style="padding: {mainContentPadding}">
@@ -273,7 +269,6 @@
 		{/if}
 	</div>
 
-	<!-- Footer -->
 	{#if showFooter && footer}
 		<div class="footer" data-area="footer">
 			{@render footer()}

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

@@ -5,6 +5,7 @@
 
 	import { CheckCircleIcon, CodeIcon, InfoIcon, SettingsIcon } from '../../../icons';
 	import { Button } from '../../button';
+	import { ColorPicker } from '../../color-picker';
 	import { Input } from '../../input';
 	import { Section } from '../../section';
 	import { Switch } from '../../switch';
@@ -98,7 +99,6 @@
 </script>
 
 <div class="example-container">
-	<!-- Configuration Panel -->
 	<div class="configurator-panel">
 		<div class="config-panel">
 			<div class="config-header">
@@ -106,9 +106,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 +115,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 +123,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 +132,6 @@
 					</div>
 				</div>
 
-				<!-- Toggle Controls Section -->
 				<div class="config-section">
 					<div class="toggles-list">
 						<div class="toggle-control">
@@ -220,7 +215,6 @@
 		</div>
 	</div>
 
-	<!-- Layout Preview, 800px x 600px in dimension -->
 	<div class="layout-preview">
 		<Layout
 			{activeTab}
@@ -274,7 +268,14 @@
 							placeholder="Type here..."
 							width="130px"
 						/>
-						<!-- Examples with tooltip alerts -->
+
+						<ColorPicker
+							color="#8C4C4C"
+							onchange={(color) => {
+								console.log(color);
+							}}
+						/>
+
 						<Input
 							value="Error input"
 							invalid={true}

package/dist/ui/components/modal/Example.svelte

@@ -59,7 +59,6 @@
 		</div>
 	</div>
 
-	<!-- Basic Modal -->
 	<Modal
 		open={basicModalOpen}
 		width="400px"
@@ -89,7 +88,6 @@
 		</div>
 	</Modal>
 
-	<!-- Loading Modal -->
 	<Modal
 		open={loadingModalOpen}
 		width="400px"
@@ -112,7 +110,6 @@
 		</p>
 	</Modal>
 
-	<!-- No Header Modal -->
 	<Modal
 		open={noHeaderModalOpen}
 		width="400px"
@@ -131,7 +128,6 @@
 		</div>
 	</Modal>
 
-	<!-- Prevent Close Modal -->
 	<Modal
 		open={preventCloseModalOpen}
 		width="400px"
@@ -162,7 +158,6 @@
 		</p>
 	</Modal>
 
-	<!-- Custom Styled Modal -->
 	<Modal
 		open={customStyledModalOpen}
 		width="400px"
@@ -188,7 +183,6 @@
 		</div>
 	</Modal>
 
-	<!-- Long Content Modal -->
 	<Modal
 		open={longContentModalOpen}
 		width="400px"
@@ -222,7 +216,6 @@
 		</div>
 	</Modal>
 
-	<!-- Custom Footer Modal -->
 	<Modal
 		open={customFooterModalOpen}
 		width="400px"

package/dist/ui/components/modal/Modal.stories.svelte

@@ -1,4 +1,3 @@
-<!-- eslint-disable svelte/no-useless-children-snippet -->
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -12,7 +11,6 @@
 	});
 </script>
 
-<!-- Interactive Examples -->
 <Story name="Examples">
 	<Example />
 </Story>

package/dist/ui/components/modal/Modal.svelte

@@ -340,7 +340,7 @@
 			style={modalStyles}
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={trapFocus}
-			role="document"
+			role="banner"
 		>
 			{#if loading}
 				<LoadingScreen

package/dist/ui/components/notification/Notification.stories.svelte

@@ -69,7 +69,6 @@
 	});
 </script>
 
-<!-- Basic Variants -->
 <Story
 	name="Warning"
 	args={{
@@ -109,7 +108,6 @@
 	}}
 />
 
-<!-- Content Variations -->
 <Story
 	name="Message Only"
 	args={{
@@ -126,7 +124,6 @@
 	}}
 />
 
-<!-- Interactive Features -->
 <Story
 	name="With Link"
 	args={{
@@ -148,7 +145,6 @@
 	}}
 />
 
-<!-- Customization -->
 <Story
 	name="Custom Color"
 	args={{
@@ -179,7 +175,6 @@
 	}}
 />
 
-<!-- Rich Text Support -->
 <Story
 	name="Rich Text Content"
 	args={{
@@ -191,7 +186,6 @@
 	}}
 />
 
-<!-- Complex Content -->
 <Story
 	name="Long Content"
 	args={{
@@ -204,7 +198,6 @@
 	}}
 />
 
-<!-- Accessibility Test -->
 <Story
 	name="Accessibility Test"
 	args={{
@@ -227,7 +220,6 @@
 	}}
 />
 
-<!-- Custom Actions Info -->
 <Story
 	name="Custom Actions Support"
 	args={{

package/dist/ui/components/notification/Notification.svelte

@@ -158,7 +158,7 @@
 		<DefaultIcon />
 	</span>
 
-	<div class="content">
+	<div class="notification-content">
 		{#if title}
 			<Text
 				label={title}
@@ -222,7 +222,7 @@
 		flex-shrink: 0;
 	}
 
-	.content {
+	.notification-content {
 		display: flex;
 		padding-right: var(--spacing-24, 24px);
 		flex-direction: column;

package/dist/ui/components/section/Section.stories.svelte

@@ -68,7 +68,6 @@
 	};
 </script>
 
-<!-- Basic stories -->
 <Story
 	name="Default"
 	args={{

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

@@ -19,10 +19,8 @@ A versatile and modern text component built with Svelte 5 that provides comprehe
 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={{

package/dist/ui/components/text/Text.stories.svelte

@@ -80,7 +80,6 @@
 	});
 </script>
 
-<!-- Basic Examples -->
 <Story
 	name="Default"
 	args={{
@@ -112,7 +111,6 @@
 	}}
 />
 
-<!-- Alignment and Ellipsis -->
 <Story name="Text Alignment & Ellipsis">
 	<div
 		style="width: 300px; border: 1px solid #ddd; padding: 16px; display: flex; flex-direction: column; gap: 12px;"
@@ -149,7 +147,6 @@
 	</div>
 </Story>
 
-<!-- Tooltip Examples -->
 <Story
 	name="With Tooltip"
 	args={{
@@ -222,7 +219,6 @@
 	</div>
 </Story>
 
-<!-- Popup Example -->
 <Story
 	name="With Popup Action"
 	args={{
@@ -236,7 +232,6 @@
 	}}
 />
 
-<!-- Styling Examples -->
 <Story name="Styling Options">
 	<div style="display: flex; flex-direction: column; gap: 8px;">
 		<Text label="Large bold text" fontSize="large" fontWeight="bold" />
@@ -246,7 +241,6 @@
 	</div>
 </Story>
 
-<!-- Complex Example -->
 <Story
 	name="Complex Example"
 	args={{