@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

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

@@ -0,0 +1,114 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { TooltipProps } from '../tooltip/types.js';
+export type BorderPosition = 'top' | 'right' | 'bottom' | 'left';
+export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether to hide the section completely
+     */
+    hide?: boolean;
+    /**
+     * Array of border positions to apply
+     */
+    borders?: BorderPosition[];
+    /**
+     * Whether the section is in active state
+     */
+    active?: boolean;
+    /**
+     * Whether the section should be clickable with keyboard support
+     */
+    clickable?: boolean;
+    /**
+     * Whether the section is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the section content should be scrollable with simplebar
+     */
+    scrollable?: boolean;
+    /**
+     * Width of the section (CSS value)
+     */
+    width?: string;
+    /**
+     * Height of the section (CSS value)
+     */
+    height?: string;
+    /**
+     * 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
+     */
+    class?: string;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipProps;
+    /**
+     * Message to show when section is disabled in edit mode
+     */
+    disabledMessage?: string;
+    /**
+     * Width of the disabled tooltip
+     */
+    disabledTooltipWidth?: string;
+    /**
+     * Content to render inside the section
+     */
+    children?: Snippet;
+    /**
+     * Click event handler
+     */
+    onclick?: (event: MouseEvent) => void;
+    /**
+     * Keydown event handler
+     */
+    onkeydown?: (event: KeyboardEvent) => void;
+    /**
+     * Mouse over event handler
+     */
+    onmouseover?: (event: MouseEvent) => void;
+    /**
+     * Mouse leave event handler
+     */
+    onmouseleave?: (event: MouseEvent) => void;
+    /**
+     * Focus event handler
+     */
+    onfocus?: (event: FocusEvent) => void;
+    /**
+     * Blur event handler
+     */
+    onblur?: (event: FocusEvent) => void;
+}
+export interface SectionEvents {
+    click: {
+        detail: MouseEvent;
+    };
+    keydown: {
+        detail: KeyboardEvent;
+    };
+    mouseover: {
+        detail: MouseEvent;
+    };
+    mouseleave: {
+        detail: MouseEvent;
+    };
+    focus: {
+        detail: FocusEvent;
+    };
+    blur: {
+        detail: FocusEvent;
+    };
+}

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

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

package/dist/ui/components/{ImageUpload.svelte → shared/ImageUpload.svelte}

@@ -2,9 +2,9 @@
 	import { createEventDispatcher } from 'svelte';
 	import { onDestroy } from 'svelte';
 
-	import { DeleteOutlinedIcon, FileUploadIcon, RefreshIcon } from '../icons';
-	import { Button } from './button';
-	import { Text } from './text';
+	import { DeleteOutlinedIcon, FileUploadIcon, RefreshIcon } from '../../icons';
+	import { Button } from '../button';
+	import { Text } from '../text';
 
 	type FileChangeEvent = {
 		file: File | null;

package/dist/ui/components/{SelectBodyOrDivBlock.svelte → shared/SelectBodyOrDivBlock.svelte}

@@ -1,5 +1,5 @@
 <script>
-	import { BodyIcon, DivBlock, SelectIcon } from '../icons';
+	import { BodyIcon, DivBlock, SelectIcon } from '../../icons';
 </script>
 
 <div class="select-msg-wrap">

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

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

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

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

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/ui/index.css

@@ -11,6 +11,7 @@
 	--black: #000000;
 	--background2: #353535;
 	--background3: #404040;
+	--background-background-3: #363636;
 	--background4: #373737;
 	--background5: #404040;
 	--backgroundInactive: #292929;
@@ -266,13 +267,40 @@ label {
 	opacity: 0.75 !important;
 }
 
-/* simplebar */
-.simplebar-content {
-	position: relative;
+/* OverlayScrollbars Global Theme */
+:root {
+	/* OverlayScrollbars theme variables using design system colors */
+	--os-size: var(--sb-size, 6px);
+	--os-padding-perpendicular: 0px;
+	--os-padding-axis: 0px;
+	--os-track-bg: var(--background1);
+	--os-handle-bg: var(--background4);
+	--os-handle-bg-hover: var(--background3);
+	--os-handle-bg-active: var(--background2);
+}
+
+/* OverlayScrollbars global dark theme */
+.os-theme-dark .os-scrollbar {
+	--os-size: var(--sb-size, 6px);
+}
+
+.os-theme-dark .os-scrollbar-track {
+	background: var(--background1);
+	border-radius: 4px;
+}
+
+.os-theme-dark .os-scrollbar-handle {
+	background: var(--background4);
+	border-radius: 4px;
+	transition: background-color 0.2s ease;
+}
+
+.os-theme-dark .os-scrollbar-handle:hover {
+	background: var(--background3);
 }
 
-.simplebar-mask {
-	z-index: auto !important;
+.os-theme-dark .os-scrollbar-handle:active {
+	background: var(--background2);
 }
 
 input {

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;