@finsweet/webflow-apps-utils 1.0.3 → 1.0.4

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

@@ -41,22 +41,14 @@
 		{ path: 'code', name: 'Code', icon: CodeIcon, isActive: false }
 	];
 
-	// Dummy footer buttons
-	const dummyFooterButtons = [
-		{
-			id: 'save' as const,
-			text: 'Save Changes',
-			variant: 'secondary' as const,
-			icon: CheckCircleIcon,
-			onClick: () => console.log('Save clicked')
-		},
-		{
-			id: 'main' as const,
-			text: 'Apply Settings',
-			variant: 'primary' as const,
-			onClick: () => console.log('Apply clicked')
-		}
-	];
+	// Footer button handlers
+	function handleSaveClick() {
+		console.log('Save clicked');
+	}
+
+	function handleApplyClick() {
+		console.log('Apply clicked');
+	}
 
 	// Create tabs with active state
 	let tabs = $derived(
@@ -234,7 +226,6 @@
 			{activeTab}
 			{tabs}
 			{switchTab}
-			footer={{ buttons: dummyFooterButtons }}
 			formKey="dummy-layout"
 			{editMode}
 			{showFooter}
@@ -332,6 +323,20 @@
 			{#snippet previewBar()}
 				<Text fontSize="md" fontWeight="normal">Preview bar content</Text>
 			{/snippet}
+
+			{#snippet footer()}
+				<Button
+					variant="secondary"
+					icon={CheckCircleIcon}
+					onclick={handleSaveClick}
+					disabled={editMode}
+				>
+					Save Changes
+				</Button>
+				<Button variant="primary" onclick={handleApplyClick} disabled={editMode}>
+					Apply Settings
+				</Button>
+			{/snippet}
 		</Layout>
 	</div>
 </div>

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

@@ -1,4 +1,4 @@
 export { default as Layout } from './Layout.svelte';
 export * from './examples';
 export * from './common';
-export type { LayoutProps, LayoutTab, LayoutFooter } from './types';
+export type { LayoutProps, LayoutTab } from './types';

package/dist/ui/components/layout/test-helpers/TestLayoutWithFooter.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { CodeIcon, SettingsIcon } from '../../../icons';
+	import { Button } from '../../button';
+	import Layout from '../Layout.svelte';
+	import type { LayoutProps } from '../types';
+
+	interface TestLayoutWithFooterProps extends Omit<LayoutProps, 'footer'> {
+		footerText?: string;
+	}
+
+	let { footerText = 'Test Button', ...layoutProps }: TestLayoutWithFooterProps = $props();
+</script>
+
+<Layout {...layoutProps}>
+	{#snippet footer()}
+		<Button variant="primary" onclick={() => {}}>
+			{footerText}
+		</Button>
+	{/snippet}
+</Layout>

package/dist/ui/components/layout/test-helpers/TestLayoutWithFooter.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LayoutProps } from '../types';
+interface TestLayoutWithFooterProps extends Omit<LayoutProps, 'footer'> {
+    footerText?: string;
+}
+declare const TestLayoutWithFooter: import("svelte").Component<TestLayoutWithFooterProps, {}, "">;
+type TestLayoutWithFooter = ReturnType<typeof TestLayoutWithFooter>;
+export default TestLayoutWithFooter;

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

@@ -7,15 +7,6 @@ export interface LayoutTab {
     isActive: boolean;
     hidden?: boolean;
 }
-export interface LayoutFooter {
-    buttons: Array<{
-        id: string;
-        text: string;
-        variant: 'primary' | 'secondary';
-        icon?: Component;
-        onClick?: () => void;
-    }>;
-}
 export interface LayoutNotification {
     path: string;
     success: boolean;
@@ -29,7 +20,7 @@ export interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
     main?: Snippet;
     sidebar?: Snippet;
     previewBar?: Snippet;
-    footer?: LayoutFooter;
+    footer?: Snippet;
     formKey: string;
     editMode?: boolean;
     showFooter?: boolean;

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

@@ -6,6 +6,7 @@
 		ArrowIcon,
 		CheckCircleIcon,
 		CloseCircleIcon,
+		InfoIcon,
 		WarningCircleOutlineIcon,
 		WarningTriangleIcon
 	} from '../../icons';
@@ -21,7 +22,7 @@
 		argTypes: {
 			variant: {
 				control: { type: 'select' },
-				options: ['warning', 'error', 'success'],
+				options: ['warning', 'error', 'success', 'info'],
 				description: 'The type of notification or custom color string'
 			},
 			message: {
@@ -98,6 +99,16 @@
 	}}
 />
 
+<Story
+	name="Info"
+	args={{
+		variant: 'info',
+		title: 'Information Notification',
+		message: 'Here is some important information you should know.',
+		icon: InfoIcon
+	}}
+/>
+
 <!-- Content Variations -->
 <Story
 	name="Message Only"

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

@@ -4,7 +4,7 @@
 	import { TimesIcon, WarningCircleOutlineIcon } from '../../icons';
 	import { Text } from '../';
 
-	type NotificationType = 'warning' | 'error' | 'success';
+	type NotificationType = 'warning' | 'error' | 'success' | 'info';
 
 	interface NotificationProps {
 		/**
@@ -93,18 +93,23 @@
 		switch (variant) {
 			case 'warning':
 				return {
-					icon: '#FFD301',
+					icon: 'var(--yellowIcon)',
 					border: 'var(--yellowBorder)'
 				};
 			case 'error':
 				return {
-					icon: '#FF8A8A',
+					icon: 'var(--redIcon)',
 					border: 'var(--redBorder)'
 				};
 			case 'success':
 				return {
-					icon: '#63D489',
-					border: 'var(--greenIcon)'
+					icon: 'var(--greenIcon)',
+					border: 'var(--greenBorder)'
+				};
+			case 'info':
+				return {
+					icon: 'var(--blueIcon)',
+					border: 'var(--blueBorder)'
 				};
 			default:
 				// Custom color string

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

@@ -1,5 +1,5 @@
 import type { Component, Snippet } from 'svelte';
-type NotificationType = 'warning' | 'error' | 'success';
+type NotificationType = 'warning' | 'error' | 'success' | 'info';
 interface NotificationProps {
     /**
      * Additional CSS classes to apply

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

@@ -1,5 +1,5 @@
 import type { Component, Snippet } from 'svelte';
-export type NotificationType = 'warning' | 'error' | 'success';
+export type NotificationType = 'warning' | 'error' | 'success' | 'info';
 export interface NotificationProps {
     /**
      * Additional CSS classes to apply

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

@@ -20,6 +20,8 @@
 		width,
 		height,
 		backgroundColor,
+		padding = 'var(--Spacing-12, 12px)',
+		gap = 'var(--Spacing-8, 8px)',
 		class: className = '',
 		tooltip,
 		disabledMessage,
@@ -107,6 +109,8 @@
 		if (width) styles.width = width;
 		if (height) styles.height = height;
 		if (backgroundColor) styles['background-color'] = backgroundColor;
+		if (padding) styles.padding = padding;
+		if (gap) styles.gap = gap;
 
 		return styles;
 	});
@@ -201,10 +205,8 @@
 <style>
 	.section-wrap {
 		display: flex;
-		padding: var(--Spacing-12, 12px);
 		flex-direction: column;
 		align-items: flex-start;
-		gap: var(--Spacing-8, 8px);
 		align-self: stretch;
 		position: relative;
 		border: 1px solid transparent;

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

@@ -39,6 +39,14 @@ export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
      * Background color of the section (CSS color value)
      */
     backgroundColor?: string;
+    /**
+     * Padding of the section (CSS value) - defaults to var(--Spacing-12, 12px)
+     */
+    padding?: string;
+    /**
+     * Gap between child elements (CSS value) - defaults to var(--Spacing-8, 8px)
+     */
+    gap?: string;
     /**
      * Additional CSS classes to apply
      */

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

@@ -63,6 +63,11 @@
 				control: { type: 'object' },
 				description: 'Tooltip configuration'
 			},
+			tooltipTarget: {
+				control: { type: 'select' },
+				options: ['text', 'icon'],
+				description: 'Specifies whether to show tooltip on text or icon'
+			},
 			popup: {
 				control: { type: 'object' },
 				description: 'Popup action configuration'
@@ -144,7 +149,7 @@
 	</div>
 </Story>
 
-<!-- Tooltip Example -->
+<!-- Tooltip Examples -->
 <Story
 	name="With Tooltip"
 	args={{
@@ -156,6 +161,67 @@
 	}}
 />
 
+<Story
+	name="Tooltip on Icon"
+	args={{
+		label: 'Text with tooltip on icon',
+		icon: ToolTipInfoCircleIcon,
+		tooltip: {
+			message: 'This tooltip appears on the icon',
+			placement: 'top'
+		},
+		tooltipTarget: 'icon'
+	}}
+/>
+
+<Story name="Tooltip Target Examples">
+	<div style="display: flex; flex-direction: column; gap: 16px; padding: 16px;">
+		<div style="border: 1px dashed #ccc; padding: 12px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">Tooltip on Text (default):</h4>
+			<Text
+				label="Hover over this text"
+				icon={AccountIcon}
+				tooltip={{ message: 'Tooltip on the text', placement: 'top' }}
+				tooltipTarget="text"
+			/>
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 12px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">Tooltip on Icon:</h4>
+			<Text
+				label="Hover over the icon"
+				icon={ToolTipInfoCircleIcon}
+				tooltip={{ message: 'Tooltip on the icon', placement: 'top' }}
+				tooltipTarget="icon"
+			/>
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 12px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">
+				With Ellipsis + Icon Tooltip:
+			</h4>
+			<Text
+				label="Long text that will be truncated with ellipsis"
+				icon={ToolTipInfoCircleIcon}
+				tooltip={{ message: 'Icon tooltip with ellipsis', placement: 'top' }}
+				tooltipTarget="icon"
+				ellipsisOnWidth="200px"
+			/>
+		</div>
+
+		<div style="border: 1px dashed #ccc; padding: 12px;">
+			<h4 style="margin: 0 0 8px 0; font-size: 12px; color: #666;">
+				Invalid Configuration (no icon for icon target):
+			</h4>
+			<Text
+				label="No icon but tooltipTarget is icon"
+				tooltip={{ message: 'This tooltip should not show', placement: 'top' }}
+				tooltipTarget="icon"
+			/>
+		</div>
+	</div>
+</Story>
+
 <!-- Popup Example -->
 <Story
 	name="With Popup Action"

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

@@ -32,6 +32,7 @@
 
 		// Tooltip configuration - pass any tooltip props
 		tooltip,
+		tooltipTarget = 'icon',
 
 		// Popup configuration - for action popups (reset, delete, etc.)
 		popup,
@@ -87,6 +88,7 @@
 		disabled: popup?.disabled ?? false,
 		title: popup?.title ?? 'Remove',
 		subtitle: popup?.subtitle ?? 'Alt + click',
+		onclick: popup?.onclick ?? null,
 		description: popup?.description ?? 'This action will remove the current selection.',
 		icon: popup?.icon ?? DeleteIcon,
 		active: popup?.active ?? false
@@ -114,6 +116,8 @@
 			wrapperElement.dispatchEvent(new CustomEvent('popupAction', actionEvent));
 		}
 
+		popup?.onclick?.();
+
 		isPopupHidden = true;
 	}
 
@@ -280,11 +284,26 @@
 			!disabled &&
 			(isPopupHidden || !hasPopup)
 	);
+
+	// Validate tooltipTarget - if 'icon' is specified, icon must be present and not loading
+	let isValidTooltipTarget = $derived(
+		tooltipTarget === 'text' || (tooltipTarget === 'icon' && !!icon && !loading)
+	);
+
+	// Determine if tooltip should show on text (default behavior or when explicitly set to 'text')
+	let shouldShowTooltipOnText = $derived(
+		shouldShowTooltip && isValidTooltipTarget && tooltipTarget === 'text'
+	);
+
+	// Determine if tooltip should show on icon (when explicitly set to 'icon' and icon is present)
+	let shouldShowTooltipOnIcon = $derived(
+		shouldShowTooltip && isValidTooltipTarget && tooltipTarget === 'icon' && !!icon && !loading
+	);
 </script>
 
 {#if label || tooltip || icon || children}
-	{#if !hasPopup && shouldShowTooltip}
-		<!-- Simple text with tooltip -->
+	{#if !hasPopup && shouldShowTooltipOnText}
+		<!-- Simple text with tooltip on text -->
 		<Tooltip {...tooltip}>
 			{#snippet target()}
 				<div
@@ -314,8 +333,14 @@
 										<div class="loading" style="flex-shrink: 0;">
 											<Loader size={16} />
 										</div>
-									{:else if icon}
+									{:else if icon && !shouldShowTooltipOnIcon}
 										<IconComponent style="flex-shrink: 0;" />
+									{:else if icon && shouldShowTooltipOnIcon}
+										<Tooltip {...tooltip}>
+											{#snippet target()}
+												<IconComponent style="flex-shrink: 0;" />
+											{/snippet}
+										</Tooltip>
 									{/if}
 								{/if}
 								<div class={textClasses()} style={textStyles()}>
@@ -336,8 +361,14 @@
 										<div class="loading">
 											<Loader size={16} />
 										</div>
-									{:else if icon}
+									{:else if icon && !shouldShowTooltipOnIcon}
 										<IconComponent />
+									{:else if icon && shouldShowTooltipOnIcon}
+										<Tooltip {...tooltip}>
+											{#snippet target()}
+												<IconComponent />
+											{/snippet}
+										</Tooltip>
 									{/if}
 								{/if}
 
@@ -358,6 +389,85 @@
 				</div>
 			{/snippet}
 		</Tooltip>
+	{:else if !hasPopup && shouldShowTooltipOnIcon}
+		<!-- Simple text with tooltip on icon -->
+		<div
+			class={labelClasses()}
+			data-component="Text"
+			{...isInteractive ? { tabindex: 0 } : {}}
+			role={isInteractive ? 'button' : undefined}
+			onclick={handleClick}
+			{title}
+			style={labelStyles()}
+			{...restProps}
+		>
+			{#if label?.trim() || icon || children}
+				{#if ellipsisOnWidth && (icon || loading)}
+					<!-- handling ellipsis with icons -->
+					<div
+						class="text-with-icon"
+						style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
+						'center'
+							? 'center'
+							: textAlign === 'right'
+								? 'flex-end'
+								: 'flex-start'};"
+					>
+						{#if icon || loading}
+							{#if loading}
+								<div class="loading" style="flex-shrink: 0;">
+									<Loader size={16} />
+								</div>
+							{:else if icon}
+								<Tooltip {...tooltip}>
+									{#snippet target()}
+										<IconComponent style="flex-shrink: 0;" />
+									{/snippet}
+								</Tooltip>
+							{/if}
+						{/if}
+						<div class={textClasses()} style={textStyles()}>
+							{#if children}
+								{@render children()}
+							{:else if raw}
+								{@html label}
+							{:else}
+								{label}
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<!-- Normal text handling -->
+					<div class={textClasses()} style={textStyles()}>
+						{#if icon || loading}
+							{#if loading}
+								<div class="loading">
+									<Loader size={16} />
+								</div>
+							{:else if icon}
+								<Tooltip {...tooltip}>
+									{#snippet target()}
+										<IconComponent />
+									{/snippet}
+								</Tooltip>
+							{/if}
+						{/if}
+
+						{#if children}
+							{@render children()}
+						{:else if raw}
+							{@html label}
+						{:else}
+							{label}
+						{/if}
+					</div>
+				{/if}
+			{/if}
+
+			{#if pill}
+				{@render pill()}
+			{/if}
+		</div>
 	{:else if !hasPopup}
 		<!-- Simple text without tooltip -->
 		<div
@@ -451,8 +561,8 @@
 			>
 				{#snippet target()}
 					<span class="dropdown-label item {popupConfig.active ? 'active' : ''}">
-						{#if shouldShowTooltip}
-							<!-- Text with popup and tooltip -->
+						{#if shouldShowTooltipOnText}
+							<!-- Text with popup and tooltip on text -->
 							<Tooltip {...tooltip}>
 								{#snippet target()}
 									<div
@@ -482,8 +592,14 @@
 															<div class="loading" style="flex-shrink: 0;">
 																<Loader size={16} />
 															</div>
-														{:else if icon}
+														{:else if icon && !shouldShowTooltipOnIcon}
 															<IconComponent style="flex-shrink: 0;" />
+														{:else if icon && shouldShowTooltipOnIcon}
+															<Tooltip {...tooltip}>
+																{#snippet target()}
+																	<IconComponent style="flex-shrink: 0;" />
+																{/snippet}
+															</Tooltip>
 														{/if}
 													{/if}
 													<div class={textClasses()} style={textStyles()}>
@@ -504,8 +620,14 @@
 															<div class="loading">
 																<Loader size={16} />
 															</div>
-														{:else if icon}
+														{:else if icon && !shouldShowTooltipOnIcon}
 															<IconComponent />
+														{:else if icon && shouldShowTooltipOnIcon}
+															<Tooltip {...tooltip}>
+																{#snippet target()}
+																	<IconComponent />
+																{/snippet}
+															</Tooltip>
 														{/if}
 													{/if}
 
@@ -526,6 +648,85 @@
 									</div>
 								{/snippet}
 							</Tooltip>
+						{:else if shouldShowTooltipOnIcon}
+							<!-- Text with popup and tooltip on icon -->
+							<div
+								class={labelClasses()}
+								data-component="Text"
+								{...isInteractive ? { tabindex: 0 } : {}}
+								role={isInteractive ? 'button' : undefined}
+								onclick={handleClick}
+								{title}
+								style={labelStyles()}
+								{...restProps}
+							>
+								{#if label?.trim() || icon || children}
+									{#if ellipsisOnWidth && (icon || loading)}
+										<!-- handling ellipsis with icons -->
+										<div
+											class="text-with-icon"
+											style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
+											'center'
+												? 'center'
+												: textAlign === 'right'
+													? 'flex-end'
+													: 'flex-start'};"
+										>
+											{#if icon || loading}
+												{#if loading}
+													<div class="loading" style="flex-shrink: 0;">
+														<Loader size={16} />
+													</div>
+												{:else if icon}
+													<Tooltip {...tooltip}>
+														{#snippet target()}
+															<IconComponent style="flex-shrink: 0;" />
+														{/snippet}
+													</Tooltip>
+												{/if}
+											{/if}
+											<div class={textClasses()} style={textStyles()}>
+												{#if children}
+													{@render children()}
+												{:else if raw}
+													{@html label}
+												{:else}
+													{label}
+												{/if}
+											</div>
+										</div>
+									{:else}
+										<!-- Normal text handling -->
+										<div class={textClasses()} style={textStyles()}>
+											{#if icon || loading}
+												{#if loading}
+													<div class="loading">
+														<Loader size={16} />
+													</div>
+												{:else if icon}
+													<Tooltip {...tooltip}>
+														{#snippet target()}
+															<IconComponent />
+														{/snippet}
+													</Tooltip>
+												{/if}
+											{/if}
+
+											{#if children}
+												{@render children()}
+											{:else if raw}
+												{@html label}
+											{:else}
+												{label}
+											{/if}
+										</div>
+									{/if}
+								{/if}
+
+								{#if pill}
+									{@render pill()}
+								{/if}
+							</div>
 						{:else}
 							<!-- Text with popup without tooltip -->
 							<div

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

@@ -21,6 +21,8 @@ export interface PopupConfig {
     icon?: Component | null;
     /** Whether the popup trigger is currently active */
     active?: boolean;
+    /** Event handler for popup action */
+    onclick?: () => void;
 }
 export interface TextProps {
     label?: string;
@@ -37,6 +39,8 @@ export interface TextProps {
     height?: string;
     ellipsisOnWidth?: string;
     tooltip?: Partial<TooltipProps>;
+    /** Specifies whether to show tooltip on the text or icon. Requires icon prop when set to 'icon' */
+    tooltipTarget?: 'text' | 'icon';
     popup?: PopupConfig;
     icon?: Component | null;
     loading?: boolean;

package/dist/utils/animations/factory.d.ts

@@ -0,0 +1,7 @@
+import type { AnimationFunctions, AnimationProps } from './types';
+/**
+ * Creates a new Animation.
+ * @param props The animaiton props.
+ * @returns A new `in` and `out` Animation functions.
+ */
+export declare const createAnimation: ({ initialStyles, keyframes }: AnimationProps) => AnimationFunctions;