@finsweet/webflow-apps-utils 1.0.8 → 1.0.10

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/LoadingScreen.svelte

@@ -10,10 +10,14 @@
 	export let raw = false;
 	export let backgroundColor = 'rgba(30, 30, 30, 0.96)';
 	export let spinnerSize = 50;
+	export let className: string = '';
 </script>
 
 {#if active}
-	<div class="loading-screen" style="position:{position}; background-color: {backgroundColor};">
+	<div
+		class="main-loader {className}"
+		style="position:{position}; background-color: {backgroundColor};"
+	>
 		<div class="loading-info {error ? 'error' : ''}">
 			{#if error}
 				<WarningTriangleOutlineIcon />
@@ -32,7 +36,7 @@
 {/if}
 
 <style>
-	.loading-screen {
+	.main-loader {
 		top: 0;
 		bottom: 0;
 		left: 0;

package/dist/ui/components/LoadingScreen.svelte.d.ts

@@ -19,6 +19,7 @@ declare const LoadingScreen: $$__sveltets_2_IsomorphicComponent<{
     raw?: boolean;
     backgroundColor?: string;
     spinnerSize?: number;
+    className?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/ui/components/breakpoints/BreakpointItem.svelte

@@ -31,7 +31,7 @@
 		<Switch {disabled} bind:checked={enabled} onchange={handleSwitchChange} />
 	</div>
 
-	<div class="content" style="display: {enabled ? 'flex' : 'none'}">
+	<div class="breakpoint-content" style="display: {enabled ? 'flex' : 'none'}">
 		<slot />
 	</div>
 </div>
@@ -46,7 +46,7 @@
 		gap: var(--Spacing-8, 8px);
 		align-self: stretch;
 	}
-	.content {
+	.breakpoint-content {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;

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/color-picker/ColorPicker.stories.svelte

@@ -0,0 +1,42 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import ColorPicker from './ColorPicker.svelte';
+
+	let controlledColor = $state('#00ff00');
+	const handleChange = (color: string) => (controlledColor = color);
+
+	const { Story } = defineMeta({
+		title: 'UI/ColorPicker',
+		component: ColorPicker,
+		tags: ['autodocs'],
+		argTypes: {
+			color: {
+				control: { type: 'color' },
+				description: 'Selected color (hex string or writable store)'
+			},
+			onchange: { action: 'colorChanged' }
+		},
+		parameters: {
+			layout: 'centered',
+			viewport: {
+				defaultViewport: 'responsive'
+			}
+		},
+		args: {
+			color: '#ff0000',
+			onchange: fn()
+		}
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="With Initial Color" args={{ color: '#00ff00' }} />
+
+<Story name="Store Controlled" args={{ color: controlledColor, onchange: handleChange }} />
+
+<Story name="Edge: Invalid Color" args={{ color: '#xyzxyz' }} />
+
+<Story name="Edge: No Color" args={{ color: undefined }} />

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

@@ -0,0 +1,19 @@
+import ColorPicker from './ColorPicker.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ColorPicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ColorPicker = InstanceType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/ui/components/color-picker/ColorPicker.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import Tooltip from '../tooltip/Tooltip.svelte';
+	import ColorSelect from './ColorSelect.svelte';
+
+	let {
+		color = $bindable('#fff'),
+		onchange,
+		width = '80px'
+	} = $props<{
+		color?: string;
+		onchange?: (color: string) => void;
+		width?: string;
+	}>();
+
+	function normalizeHex(value: string): string {
+		let v = value.trim();
+
+		if (!v.startsWith('#')) v = `#${v}`;
+
+		return v.toUpperCase();
+	}
+
+	function isValidColor(value: string): boolean {
+		const hexRegex = /^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
+		return hexRegex.test(value.startsWith('#') ? value.slice(1) : value);
+	}
+
+	function handleInputPaste(event: ClipboardEvent) {
+		event.preventDefault();
+
+		const pastedText = event.clipboardData?.getData('text') || '';
+		let cleanText = pastedText.replace(/[^0-9A-Fa-f#]/g, '');
+		if (!cleanText.startsWith('#')) cleanText = '#' + cleanText;
+
+		cleanText = cleanText.substring(0, 9);
+
+		if (isValidColor(cleanText)) {
+			const normalizedValue = normalizeHex(cleanText);
+			color = normalizedValue;
+			onchange?.(normalizedValue);
+		}
+	}
+
+	function handleInputChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		const value = target.value.trim();
+
+		if (isValidColor(value)) {
+			const normalizedValue = normalizeHex(value);
+
+			color = normalizedValue;
+
+			onchange?.(normalizedValue);
+		}
+	}
+
+	function handleInputKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter') {
+			(event.target as HTMLInputElement).blur();
+		}
+	}
+
+	function handleColorChange(newColor: string) {
+		const normalizedValue = normalizeHex(newColor);
+
+		color = normalizedValue;
+		onchange?.(normalizedValue);
+	}
+</script>
+
+<div class="color-picker">
+	<Tooltip
+		listener="click"
+		listenerout="click"
+		showArrow={false}
+		padding="0"
+		stopPropagation={true}
+		width="241px"
+		placement="bottom"
+		fallbackPlacements={['top-end', 'top', 'bottom-end', 'bottom', 'top-start', 'bottom-start']}
+	>
+		{#snippet target()}
+			<div class="color-picker__swatch" data-testid="color-swatch">
+				<div class="color-swatch" style="background-color: {color || '#000000'}"></div>
+			</div>
+		{/snippet}
+		{#snippet tooltipContent()}
+			<ColorSelect {color} onchange={handleColorChange} />
+		{/snippet}
+	</Tooltip>
+
+	<input
+		type="text"
+		class="color-picker__input"
+		bind:value={color}
+		oninput={handleInputChange}
+		onkeydown={handleInputKeydown}
+		onpaste={handleInputPaste}
+		placeholder="#ffffff"
+		aria-label="Color hex value"
+		style="width: {width}"
+	/>
+</div>
+
+<style>
+	.color-picker {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		height: 24px;
+		border: 1px solid var(--border1);
+		border-radius: 4px;
+		overflow: hidden;
+		background: var(--background1);
+		box-shadow:
+			0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset,
+			0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset,
+			0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset,
+			0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset,
+			0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
+			0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset;
+	}
+
+	.color-picker__swatch {
+		position: relative;
+		width: 24px;
+		height: 24px;
+		overflow: hidden;
+		cursor: pointer;
+	}
+
+	.color-swatch {
+		width: 100%;
+		height: 100%;
+	}
+
+	.color-picker__input {
+		width: 80px;
+		padding: 4px 8px 4px 0px;
+		border-radius: 4px;
+		font-family: monospace;
+		font-size: 12px;
+		border: none;
+		background: transparent;
+	}
+
+	.color-picker:has(.color-picker__input:focus) {
+		outline: none;
+		border-color: var(--blueBorder);
+	}
+
+	.color-picker:global(:has(.tooltip[aria-hidden='false'])) {
+		border-color: var(--blueBorder);
+	}
+</style>

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

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

package/dist/ui/components/color-picker/ColorSelect.stories.svelte

@@ -0,0 +1,61 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import ColorSelect from './ColorSelect.svelte';
+
+	const { Story } = defineMeta({
+		title: 'UI/ColorSelect',
+		component: ColorSelect,
+		tags: ['autodocs'],
+		argTypes: {
+			color: {
+				control: { type: 'color' },
+				description: 'Initial color value (hex)'
+			},
+			onchange: { action: 'colorChanged' }
+		},
+		args: {
+			color: '#ff0000',
+			onchange: fn()
+		}
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="With Initial Color" args={{ color: '#00ff00' }} />
+
+<Story
+	name="Alpha Channel"
+	args={{ color: '#0000ff' }}
+	story={{
+		parameters: {
+			docs: { description: { story: 'Shows alpha slider and allows changing opacity.' } }
+		}
+	}}
+/>
+
+<Story
+	name="HSB/RGB Toggle"
+	args={{ color: '#ff00ff' }}
+	story={{
+		parameters: {
+			docs: { description: { story: 'Toggle between HSB and RGB modes using the mode switch.' } }
+		}
+	}}
+/>
+
+<Story
+	name="With EyeDropper"
+	args={{ color: '#123456' }}
+	story={{
+		parameters: {
+			docs: {
+				description: {
+					story: 'Use the EyeDropper button to pick a color from the screen (if supported).'
+				}
+			}
+		}
+	}}
+/>

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

@@ -0,0 +1,27 @@
+export default ColorSelect;
+type ColorSelect = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ColorSelect: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ColorSelect from './ColorSelect.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}