@finsweet/webflow-apps-utils 1.0.9 → 1.0.11

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/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;
+}