@finsweet/webflow-apps-utils 1.0.42 → 1.0.44

package/dist/ui/components/Loader.stories.js

@@ -0,0 +1,163 @@
+import Loader from './Loader.svelte';
+const meta = {
+    title: 'Ui/Loader',
+    component: Loader,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A customizable loading spinner component with proportional sizing, configurable colors, and adjustable animation speed.'
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: { type: 'range', min: 16, max: 200, step: 4 },
+            description: 'The size of the loader in pixels'
+        },
+        color: {
+            control: 'color',
+            description: 'The color of the spinning arc'
+        },
+        speed: {
+            control: { type: 'range', min: 0.5, max: 3, step: 0.1 },
+            description: 'Animation speed in seconds (lower is faster)'
+        },
+        margin: {
+            control: 'text',
+            description: 'CSS margin value for the loader wrapper'
+        },
+        trackColor: {
+            control: 'color',
+            description: 'The color of the background track circle'
+        }
+    }
+};
+export default meta;
+// Basic stories
+export const Default = {
+    args: {}
+};
+export const Small = {
+    args: {
+        size: 24
+    }
+};
+export const Medium = {
+    args: {
+        size: 48
+    }
+};
+export const Large = {
+    args: {
+        size: 96
+    }
+};
+export const ExtraLarge = {
+    args: {
+        size: 150
+    }
+};
+// Color variants
+export const Primary = {
+    args: {
+        color: '#3b82f6',
+        size: 64
+    }
+};
+export const Success = {
+    args: {
+        color: '#22c55e',
+        size: 64
+    }
+};
+export const Warning = {
+    args: {
+        color: '#f59e0b',
+        size: 64
+    }
+};
+export const Error = {
+    args: {
+        color: '#ef4444',
+        size: 64
+    }
+};
+export const CustomColors = {
+    args: {
+        color: '#8b5cf6',
+        trackColor: '#c084fc',
+        size: 64
+    }
+};
+// Speed variants
+export const Slow = {
+    args: {
+        speed: 2,
+        size: 64
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Slower animation speed (2 seconds per rotation)'
+            }
+        }
+    }
+};
+export const Fast = {
+    args: {
+        speed: 0.5,
+        size: 64
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Faster animation speed (0.5 seconds per rotation)'
+            }
+        }
+    }
+};
+// With margin
+export const WithMargin = {
+    args: {
+        margin: '20px',
+        size: 64
+    }
+};
+// Dark background showcase
+export const OnDarkBackground = {
+    args: {
+        color: 'white',
+        trackColor: 'rgba(255, 255, 255, 0.2)',
+        size: 64
+    },
+    parameters: {
+        backgrounds: { default: 'dark' }
+    }
+};
+// Light background showcase
+export const OnLightBackground = {
+    args: {
+        color: '#1e293b',
+        trackColor: 'rgba(30, 41, 59, 0.2)',
+        size: 64
+    },
+    parameters: {
+        backgrounds: { default: 'light' }
+    }
+};
+// Multiple sizes comparison
+export const SizeComparison = {
+    render: () => ({
+        Component: Loader,
+        props: {}
+    }),
+    parameters: {
+        docs: {
+            description: {
+                story: 'Visual comparison of different loader sizes'
+            }
+        }
+    }
+};

package/dist/ui/components/LoadingScreen.stories.js

@@ -0,0 +1,242 @@
+import LoadingScreen from './LoadingScreen.svelte';
+const meta = {
+    title: 'Ui/LoadingScreen',
+    component: LoadingScreen,
+    parameters: {
+        layout: 'fullscreen',
+        docs: {
+            description: {
+                component: 'A full-screen loading overlay component with customizable messaging, error states, and support for both fixed and absolute positioning.'
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        message: {
+            control: 'text',
+            description: 'The message to display below the loader or error icon'
+        },
+        position: {
+            control: { type: 'select' },
+            options: ['fixed', 'absolute'],
+            description: 'CSS position property for the loading screen'
+        },
+        active: {
+            control: 'boolean',
+            description: 'Controls visibility of the loading screen'
+        },
+        error: {
+            control: 'boolean',
+            description: 'If true, displays error state with warning icon'
+        },
+        raw: {
+            control: 'boolean',
+            description: 'If true, renders HTML in the message (use with caution)'
+        },
+        backgroundColor: {
+            control: 'color',
+            description: 'Background color of the overlay'
+        },
+        spinnerSize: {
+            control: { type: 'range', min: 24, max: 120, step: 4 },
+            description: 'Size of the spinner in pixels'
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class for the main loader container'
+        }
+    }
+};
+export default meta;
+// Basic stories
+export const Default = {
+    args: {
+        active: true,
+        message: 'Loading...'
+    }
+};
+export const WithCustomMessage = {
+    args: {
+        active: true,
+        message: 'Please wait while we fetch your data'
+    }
+};
+export const LongMessage = {
+    args: {
+        active: true,
+        message: 'This might take a few moments. Please do not close this window or navigate away.'
+    }
+};
+export const NoMessage = {
+    args: {
+        active: true,
+        message: ''
+    }
+};
+// Spinner sizes
+export const SmallSpinner = {
+    args: {
+        active: true,
+        message: 'Loading...',
+        spinnerSize: 30
+    }
+};
+export const LargeSpinner = {
+    args: {
+        active: true,
+        message: 'Loading...',
+        spinnerSize: 80
+    }
+};
+// Position variants
+export const FixedPosition = {
+    args: {
+        active: true,
+        message: 'Fixed position loading screen',
+        position: 'fixed'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Fixed positioning covers the entire viewport regardless of scroll position'
+            }
+        }
+    }
+};
+export const AbsolutePosition = {
+    args: {
+        active: true,
+        message: 'Absolute position loading screen',
+        position: 'absolute'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Absolute positioning is relative to the nearest positioned ancestor'
+            }
+        }
+    }
+};
+// Error states
+export const ErrorState = {
+    args: {
+        active: true,
+        error: true,
+        message: 'Something went wrong while loading your data.'
+    }
+};
+export const ErrorWithDetails = {
+    args: {
+        active: true,
+        error: true,
+        message: 'Failed to connect to the server. Please check your internet connection and try again.'
+    }
+};
+export const ErrorMinimal = {
+    args: {
+        active: true,
+        error: true,
+        message: 'An error occurred.'
+    }
+};
+// Background colors
+export const LightBackground = {
+    args: {
+        active: true,
+        message: 'Loading with light background',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)'
+    }
+};
+export const DarkBackground = {
+    args: {
+        active: true,
+        message: 'Loading with dark background',
+        backgroundColor: 'rgba(0, 0, 0, 0.9)'
+    }
+};
+export const SemiTransparent = {
+    args: {
+        active: true,
+        message: 'Semi-transparent overlay',
+        backgroundColor: 'rgba(30, 30, 30, 0.7)'
+    }
+};
+export const ColoredBackground = {
+    args: {
+        active: true,
+        message: 'Custom colored background',
+        backgroundColor: 'rgba(59, 130, 246, 0.9)'
+    }
+};
+// HTML message with raw prop
+export const RawHTMLMessage = {
+    args: {
+        active: true,
+        raw: true,
+        message: 'Loading <strong>important</strong> data<br/>Please wait...'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Using raw=true to render HTML in the message. Use with caution and only with trusted content.'
+            }
+        }
+    }
+};
+// Inactive (hidden)
+export const Inactive = {
+    args: {
+        active: false,
+        message: 'This should not be visible'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'When active is false, the loading screen is hidden'
+            }
+        }
+    }
+};
+// Use cases
+export const InitialPageLoad = {
+    args: {
+        active: true,
+        message: 'Initializing application...',
+        spinnerSize: 60
+    }
+};
+export const DataFetch = {
+    args: {
+        active: true,
+        message: 'Fetching data from server...',
+        spinnerSize: 50
+    }
+};
+export const FileUpload = {
+    args: {
+        active: true,
+        message: 'Uploading files... This may take a moment.',
+        spinnerSize: 50
+    }
+};
+export const Processing = {
+    args: {
+        active: true,
+        message: 'Processing your request...',
+        spinnerSize: 50
+    }
+};
+export const NetworkError = {
+    args: {
+        active: true,
+        error: true,
+        message: 'Unable to connect to the server. Please check your network connection.'
+    }
+};
+export const ServerError = {
+    args: {
+        active: true,
+        error: true,
+        message: 'The server encountered an error. Our team has been notified.'
+    }
+};

package/dist/ui/components/checkbox/Checkbox.svelte

@@ -88,13 +88,12 @@
 	.checkbox {
 		width: 16px;
 		height: 16px;
-		border-radius: 4px;
-		border: 2px solid #ffffff1a;
+		border-radius: 1px;
+		border: 2px solid var(--actionSecondaryBorder);
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		cursor: pointer;
-		transition: all 0.2s ease-in-out;
 	}
 
 	.checkbox--radio {
@@ -107,14 +106,15 @@
 	}
 
 	.checkbox--checked {
-		color: white;
+		color: var(--text1);
 		border: none;
 	}
 
 	.checkbox--checked :global(svg) {
-		color: white;
-		background: #006acc;
-		border-radius: 4px;
+		color: var(--text1);
+		background: var(--actionPrimaryBackground);
+		border-radius: 1px;
+		padding: 2px;
 	}
 
 	.checkbox--checked.checkbox--radio :global(svg) {
@@ -127,15 +127,15 @@
 	}
 
 	.checkbox:focus-visible {
-		outline: 2px solid var(--color-focus, #006acc);
+		outline: 2px solid var(--actionPrimaryBackground);
 		outline-offset: 2px;
 	}
 
 	.checkbox:hover:not(.checkbox--disabled) {
-		border-color: #ffffff33;
+		border-color: var(--actionSecondaryBorder);
 	}
 
 	.checkbox--checked:hover:not(.checkbox--disabled) :global(svg) {
-		background: #0056a3;
+		background: var(--actionPrimaryBackground);
 	}
 </style>

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

@@ -132,7 +132,7 @@
 				{#if disabled}
 					<EyeIcon />
 				{:else}
-					<CopyIcon size={16} />
+					<CopyIcon />
 				{/if}
 			</div>
 		</div>

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

@@ -2,7 +2,7 @@
 	import type { Component, Snippet } from 'svelte';
 	import { onMount, tick } from 'svelte';
 
-	import { CloseIcon } from '../../icons';
+	import { TimesIcon } from '../../icons';
 	import { Button, LoadingScreen, Text } from '../';
 
 	interface Props {
@@ -158,7 +158,7 @@
 		header,
 		children,
 		footer,
-		closeIcon = CloseIcon,
+		closeIcon = TimesIcon,
 		onOpenChange,
 		onOverlayClick,
 		onEscapeKeyDown,

package/dist/ui/components/select/Select.svelte

@@ -748,4 +748,8 @@
 		justify-content: center;
 		align-items: center;
 	}
+	.arrow :global(svg) {
+		width: 10px;
+		height: 10px;
+	}
 </style>

package/dist/ui/components/shared/ImageUpload.svelte

@@ -2,7 +2,7 @@
 	import { createEventDispatcher } from 'svelte';
 	import { onDestroy } from 'svelte';
 
-	import { DeleteOutlinedIcon, FileUploadIcon, RefreshIcon } from '../../icons';
+	import { DeleteIcon, FileUploadIcon, RefreshIcon } from '../../icons';
 	import { Button } from '../button';
 	import { Text } from '../text';
 
@@ -134,7 +134,7 @@
 	{#if previewUrl}
 		<div class="action-buttons">
 			<Button text="Replace" variant="secondary" onclick={triggerFileInput} icon={RefreshIcon} />
-			<Button text="Delete" variant="secondary" onclick={reset} icon={DeleteOutlinedIcon} />
+			<Button text="Delete" variant="secondary" onclick={reset} icon={DeleteIcon} />
 		</div>
 	{/if}
 

package/dist/ui/icons/AccordionDownArrow.svelte

@@ -1,8 +1,8 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M4.99996 4.29293L8.64641 0.646484L9.35352 1.35359L4.99996 5.70714L0.646408 1.35359L1.35352 0.646484L4.99996 4.29293Z"
-		fill="#EBEBEB"
+		fill="currentColor"
 	/>
 </svg>

package/dist/ui/icons/AccordionUpArrow.svelte

@@ -1,8 +1,8 @@
-<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M5.00004 1.70707L1.35359 5.35352L0.646484 4.64641L5.00004 0.292855L9.35359 4.64641L8.64648 5.35351L5.00004 1.70707Z"
-		fill="#EBEBEB"
+		fill="currentColor"
 	/>
 </svg>

package/dist/ui/icons/AccountIcon.svelte

@@ -1,13 +1,13 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="100%" height="100%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<g id="Account">
 		<g id="icon">
 			<path
 				d="M11 5.5C11 7.15685 9.65685 8.5 8 8.5C6.34315 8.5 5 7.15685 5 5.5C5 3.84315 6.34315 2.5 8 2.5C9.65685 2.5 11 3.84315 11 5.5Z"
-				fill="#D9D9D9"
+				fill="currentColor"
 			/>
 			<path
 				d="M6.54545 10H9.45455C9.95455 10 10.6909 10.243 11.0909 10.54L13.2727 12.16C13.6727 12.457 14 13.105 14 13.6V14.5H2V13.6C2 13.105 2.32727 12.457 2.72727 12.16L4.90909 10.54C5.30909 10.243 6.04546 10 6.54545 10Z"
-				fill="#D9D9D9"
+				fill="currentColor"
 			/>
 		</g>
 	</g>

package/dist/ui/icons/AiIcon.svelte

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 10 10" fill="none">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M0 5.08696V4.30435C2.37723 4.30435 4.30435 2.37723 4.30435 0H5.08696C5.08696 2.37723 7.01405 4.30435 9.3913 4.30435V5.08696C7.01405 5.08696 5.08696 7.01405 5.08696 9.3913H4.30435C4.30435 7.01405 2.37723 5.08696 0 5.08696ZM4.69565 7.43134C5.21102 6.19807 6.19807 5.21102 7.43134 4.69565C6.19807 4.18029 5.21102 3.19323 4.69565 1.95996C4.18029 3.19323 3.19323 4.18029 1.95996 4.69565C3.19323 5.21102 4.18029 6.19807 4.69565 7.43134Z"
+		fill="currentColor"
+	/>
+</svg>

package/dist/ui/icons/{CloseIcon.svelte.d.ts → AiIcon.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default CloseIcon;
-type CloseIcon = SvelteComponent<{
+export default AiIcon;
+type AiIcon = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const CloseIcon: $$__sveltets_2_IsomorphicComponent<{
+declare const AiIcon: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/ui/icons/AnalyticsIcon.svelte

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
+	<g opacity="0.4">
+		<path
+			d="M8.00033 4.5C8.00033 4.22386 8.22418 4 8.50033 4H9.50033C9.77647 4 10.0003 4.22386 10.0003 4.5V7L8.00033 9V4.5Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M4.66699 11.5C4.66699 11.7761 4.89085 12 5.16699 12H6.66699V11.6667L4.66699 9.66667V11.5Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M10.0003 11.5C10.0003 11.7761 9.77647 12 9.50033 12H8.33366L10.0003 10.3333V11.5Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M6.66699 7.16667C6.66699 6.89052 6.44313 6.66667 6.16699 6.66667H5.00033L6.66699 8.33333V7.16667Z"
+			fill="currentColor"
+		/>
+	</g>
+	<path
+		d="M3.33366 8.19559V2.66699H2.66699V12.3337C2.66699 12.8859 3.11471 13.3337 3.66699 13.3337H13.3337V12.667H3.66699C3.4829 12.667 3.33366 12.5178 3.33366 12.3337V9.1384L4.33366 8.1384L7.43129 11.236C7.56146 11.3662 7.77252 11.3662 7.90269 11.236L13.3337 5.80506V8.00033H14.0003V4.66699H10.667V5.33366H12.8623L7.66699 10.5289L4.56936 7.43129C4.43919 7.30112 4.22813 7.30112 4.09796 7.43129L3.33366 8.19559Z"
+		fill="currentColor"
+	/>
+</svg>

package/dist/ui/icons/{DeleteOutlinedIcon.svelte.d.ts → AnalyticsIcon.svelte.d.ts}

@@ -1,12 +1,12 @@
-export default DeleteOutlinedIcon;
-type DeleteOutlinedIcon = SvelteComponent<{
+export default AnalyticsIcon;
+type AnalyticsIcon = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const DeleteOutlinedIcon: $$__sveltets_2_IsomorphicComponent<{
+declare const AnalyticsIcon: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/ui/icons/ArrowIcon.svelte

@@ -1,4 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="100%"
+	height="100%"
+	viewBox="4.5 4.5 8 7.5"
+	fill="none"
+>
 	<path
 		d="M10.2929 5.5L5.99998 5.5V4.5L12 4.5L12 10.5L11 10.5V6.20711L5.35353 11.8536L4.64642 11.1464L10.2929 5.5Z"
 		fill="currentColor"

package/dist/ui/icons/BackIcon.svelte

@@ -1,4 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" fill="none">
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="100%"
+	height="100%"
+	viewBox="2.4 1.7 4.2 7.6"
+	fill="none"
+>
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"

package/dist/ui/icons/BodyIcon.svelte

@@ -1,4 +1,4 @@
-<svg width="12" height="12" viewBox="0 1 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"
+<svg width="100%" height="100%" viewBox="0 1 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"
 	><path
 		fill-rule="evenodd"
 		clip-rule="evenodd"

package/dist/ui/icons/BookmarkIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
 	<g clip-path="url(#clip0_4033_5074)">
 		<path
 			d="M12.6666 2H3.33325V14L7.99992 12L12.6666 14V2ZM11.3333 12L7.99992 10.5467L4.66659 12V3.33333H11.3333V12Z"

package/dist/ui/icons/BoxAddIcon.svelte

@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M3 2C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H3ZM7 4H9V7H12V9H9V12H7V9H4V7H7V4Z"
-		fill="#D9D9D9"
+		fill="currentColor"
 	/>
 </svg>

package/dist/ui/icons/BrushIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
 	<g>
 		<path
 			fill-rule="evenodd"