@finsweet/webflow-apps-utils 1.0.1 → 1.0.3

package/dist/ui/components/Notification.svelte

@@ -1,193 +0,0 @@
-<script lang="ts">
-	import type { Component } from 'svelte';
-
-	import { TimesIcon, WarningCircleOutlineIcon } from '../icons';
-	import { Text } from '.';
-
-	/**
-	 * The class name to apply to the notification.
-	 */
-	export let className = '';
-	/**
-	 * The message to display.
-	 */
-	export let message = '';
-	/**
-	 * The link to navigate to.
-	 */
-	export let link = '';
-	/**
-	 * The title of the notification.
-	 */
-	export let title = '';
-	/**
-	 * Title font weight
-	 */
-	export let titleFontWeight = 600;
-	/**
-	 * The title of the link.
-	 */
-	export let linkTitle = '';
-	/**
-	 * Whether to show the close icon.
-	 */
-	export let closeIcon = true;
-	/**
-	 * The icon to display.
-	 */
-	export let defaultIcon: Component = WarningCircleOutlineIcon;
-	/**
-	 * The icon to display for the link.
-	 */
-	export let linkIcon: Component | null = null;
-	/**
-	 * The type of notification. Defaults to 'warning'.
-	 * You can pass a color string to use a custom color.
-	 */
-	export let type: 'warning' | 'error' | string = 'warning';
-	/**
-	 * Whether to show the richtext message
-	 */
-	export let richtextMessage = false;
-	/**
-	 * Whether to show the richtext title
-	 */
-	export let richTextTitle = false;
-	/**
-	 * Whether to show the border left
-	 */
-	export let borderLeft = true;
-
-	let colors: {
-		icon: string;
-		border: string;
-	};
-
-	$: {
-		if (type === 'warning') {
-			colors = {
-				icon: '#FFD301',
-				border: 'var(--yellowBorder)'
-			};
-		}
-
-		if (type === 'error') {
-			colors = {
-				icon: '#FF8A8A',
-				border: 'var(--redBorder)'
-			};
-		}
-
-		if (type === 'success') {
-			colors = {
-				icon: '#63D489',
-				border: 'var(--greenIcon)'
-			};
-		}
-
-		if (type !== 'warning' && type !== 'error' && type !== 'success') {
-			// accept string as color code
-			colors = {
-				icon: type,
-				border: type
-			};
-		}
-	}
-</script>
-
-<div
-	class="wrapper {className}"
-	style={!borderLeft ? '' : `border-left: 2px solid ${colors.border};`}
->
-	<span style="color:{colors.icon};">
-		<svelte:component this={defaultIcon} />
-	</span>
-	<div class="content">
-		{#if title}
-			<Text
-				label={title}
-				fontSize="normal"
-				fontWeight={titleFontWeight.toString()}
-				raw={richTextTitle}
-			/>
-		{/if}
-		<div class="message">
-			{#if message}
-				<Text label={message} fontColor="var(--text2)" raw={richtextMessage} />
-			{/if}
-
-			{#if link && linkTitle}
-				<a href={link} class="link" target="_blank"
-					><span>{linkTitle}</span>
-					<svelte:component this={linkIcon} />
-				</a>
-			{/if}
-		</div>
-		<slot name="actions" />
-	</div>
-	<div
-		style={!closeIcon ? 'display:none;' : ''}
-		on:click
-		on:keydown={() => {}}
-		tabindex="0"
-		role="button"
-		aria-label="Close"
-		class="close-icon"
-	>
-		<TimesIcon />
-	</div>
-</div>
-
-<style>
-	.content {
-		display: flex;
-		padding-right: var(--spacing-24, 24px);
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 4px;
-		flex: 1 0 0;
-	}
-	.close-icon {
-		cursor: pointer;
-	}
-	.link :global(svg) {
-		color: var(--blue-blue-text, #8ac2ff);
-	}
-	.link {
-		color: var(--blue-blue-text, #8ac2ff);
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-		cursor: pointer;
-		text-decoration: none;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: max-content;
-	}
-	.wrapper {
-		display: flex;
-		padding: 8px;
-		align-items: flex-start;
-		gap: 8px;
-		align-self: stretch;
-		border-radius: 4px;
-		background: var(--background-background-3, #363636);
-	}
-	.message {
-		color: var(--text-text-2, #bdbdbd);
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: flex-start;
-		gap: 4px;
-		align-self: stretch;
-	}
-</style>

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

@@ -1,64 +0,0 @@
-import type { Component } from '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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Notification: $$__sveltets_2_IsomorphicComponent<{
-    /**
-         * The class name to apply to the notification.
-         */ className?: string;
-    /**
-         * The message to display.
-         */ message?: string;
-    /**
-         * The link to navigate to.
-         */ link?: string;
-    /**
-         * The title of the notification.
-         */ title?: string;
-    /**
-         * Title font weight
-         */ titleFontWeight?: number;
-    /**
-         * The title of the link.
-         */ linkTitle?: string;
-    /**
-         * Whether to show the close icon.
-         */ closeIcon?: boolean;
-    /**
-         * The icon to display.
-         */ defaultIcon?: Component;
-    /**
-         * The icon to display for the link.
-         */ linkIcon?: Component | null;
-    /**
-         * The type of notification. Defaults to 'warning'.
-         * You can pass a color string to use a custom color.
-         */ type?: "warning" | "error" | string;
-    /**
-         * Whether to show the richtext message
-         */ richtextMessage?: boolean;
-    /**
-         * Whether to show the richtext title
-         */ richTextTitle?: boolean;
-    /**
-         * Whether to show the border left
-         */ borderLeft?: boolean;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    actions: {};
-}, {}, string>;
-type Notification = InstanceType<typeof Notification>;
-export default Notification;

package/dist/ui/components/PlusMinusButton.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	import { PlusIcon, SubtractIcon } from '../icons';
-
-	export let delta: -1 | 1;
-
-	type CustomEventDetail = {
-		click: typeof delta;
-	};
-
-	// Create the event dispatcher with typed events
-	const dispatch = createEventDispatcher<CustomEventDetail>();
-
-	/**
-	 * Handle the click event and dispatch the custom click event
-	 */
-	const handleClick = () => {
-		dispatch('click', delta);
-	};
-</script>
-
-<button class={delta === -1 ? 'input_left-button' : 'input_right-button'} on:click={handleClick}>
-	<div class="width-12">
-		{#if delta === -1}
-			<SubtractIcon />
-		{:else}
-			<PlusIcon />
-		{/if}
-	</div>
-</button>
-
-<style>
-	.input_left-button {
-		width: 100%;
-		border-color: var(--border2);
-		outline: 0px;
-		cursor: default;
-		user-select: none;
-		padding: var(--padding-tiny);
-		box-sizing: border-box;
-		font-family: inherit;
-		font-size: inherit;
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 24px;
-		border-radius: var(--border-radius) 0px 0px var(--border-radius);
-		color: var(--text1);
-		background: var(--actionSecondaryBackground);
-		border-width: 1px 0px 1px 1px;
-		border-style: solid;
-		align-self: center;
-	}
-
-	.input_right-button {
-		width: 100%;
-		border-color: var(--border2);
-		outline: 0px;
-		cursor: default;
-		user-select: none;
-		padding: var(--padding-tiny);
-		box-sizing: border-box;
-		font-family: inherit;
-		font-size: inherit;
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 24px;
-		border-radius: 0px var(--border-radius) var(--border-radius) 0px;
-		color: var(--text1);
-		background: var(--actionSecondaryBackground);
-		border-width: 1px 1px 1px 0px;
-		border-style: solid;
-		align-self: center;
-	}
-
-	.input_left-button:hover {
-		background: var(--actionSecondaryBackgroundHover);
-	}
-	.input_right-button:hover {
-		background: var(--actionSecondaryBackgroundHover);
-	}
-
-	.width-12 {
-		width: var(--font-size-large);
-		height: var(--font-size-large);
-	}
-</style>

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

@@ -1,22 +0,0 @@
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PlusMinusButton: $$__sveltets_2_IsomorphicComponent<{
-    delta: -1 | 1;
-}, {
-    click: CustomEvent<1 | -1>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PlusMinusButton = InstanceType<typeof PlusMinusButton>;
-export default PlusMinusButton;

package/dist/ui/components/PreviewBar.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { EyeIcon } from '../icons';
-
-	export let text = 'Preview';
-</script>
-
-<div class="preview-header">
-	<EyeIcon />
-	{text}
-</div>
-
-<style>
-	.preview-header {
-		display: flex;
-		align-self: stretch;
-		justify-content: start;
-		align-items: center;
-		background: var(--background1, #1e1e1e);
-		padding: 0px var(--spacing-12, 12px);
-		gap: 8px;
-		height: 40px;
-		min-height: 40px;
-		/* Make it stick to the top */
-		position: sticky;
-		right: 0;
-		left: 0;
-		z-index: 9999999;
-		top: 0;
-	}
-	.preview-header::after {
-		content: '';
-		display: block;
-		width: 100%;
-		height: 1px;
-		background-color: var(--border1, rgba(255, 255, 255, 0.13));
-		position: absolute;
-		bottom: 1px;
-		left: 0;
-	}
-</style>

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

@@ -1,20 +0,0 @@
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const PreviewBar: $$__sveltets_2_IsomorphicComponent<{
-    text?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type PreviewBar = InstanceType<typeof PreviewBar>;
-export default PreviewBar;

package/dist/ui/components/ScrollableContent.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import 'simplebar/dist/simplebar.min.css';
-	import 'simplebar';
-	export let className = '';
-</script>
-
-<div class={`scrollable-content ${className}`} data-simplebar>
-	<slot></slot>
-	<div class="scrollable-placeholder"></div>
-</div>
-
-<style>
-	.scrollable-placeholder {
-		height: 1px;
-		background-color: transparent;
-		width: 100%;
-	}
-</style>

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

@@ -1,31 +0,0 @@
-import 'simplebar/dist/simplebar.min.css';
-import 'simplebar';
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const ScrollableContent: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    className?: string;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type ScrollableContent = InstanceType<typeof ScrollableContent>;
-export default ScrollableContent;

package/dist/ui/components/Section.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">
-	/**
-	 * Whether to hide the section
-	 */
-	export let hide = false;
-
-	/**
-	 * Whether to show borders
-	 */
-	export let borders: Array<'top' | 'bottom' | 'left' | 'right'> = [];
-	/**
-	 * Whether to show a active state
-	 */
-	export let active = false;
-	/**
-	 * Whether to show a clickable state
-	 */
-	export let clickable = false;
-
-	/**
-	 * Custom class name
-	 */
-	export let className = '';
-	/**
-	 * Whether to show a disabled state
-	 */
-	export let disabled = false;
-</script>
-
-{#if !hide}
-	<div
-		class="section-wrap {active ? 'active' : ''} {clickable ? 'clickable' : ''} {className}"
-		on:click
-		on:mouseover
-		on:mouseleave
-		class:disabled
-		role="button"
-		tabindex="-1"
-		on:focus={() => {}}
-		on:keydown={() => {}}
-		class:border-top={borders.includes('top')}
-		class:border-bottom={borders.includes('bottom')}
-		class:border-left={borders.includes('left')}
-		class:border-right={borders.includes('right')}
-	>
-		<slot></slot>
-	</div>
-{/if}
-
-<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;
-	}
-
-	.section-wrap :global(.dropdown-wrapper) {
-		align-self: stretch;
-		justify-content: space-between;
-		width: 100%;
-	}
-
-	.section-wrap.border-top {
-		border-top: 1px solid var(--border1);
-	}
-	.section-wrap.border-left {
-		border-left: 1px solid var(--border1);
-	}
-	.section-wrap.border-right {
-		border-right: 1px solid var(--border1);
-	}
-	.section-wrap.border-bottom {
-		border-bottom: 1px solid var(--border1);
-	}
-
-	.clickable:hover {
-		background: var(--defaultLightHover);
-	}
-	.section-wrap.active {
-		border-bottom: 1px solid var(--background2);
-		background: var(--defaultLightActive);
-	}
-
-	.clickable {
-		cursor: pointer;
-	}
-
-	.section-wrap.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-</style>

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

@@ -1,50 +0,0 @@
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Section: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    /**
-         * Whether to hide the section
-         */ hide?: boolean;
-    /**
-         * Whether to show borders
-         */ borders?: Array<"top" | "bottom" | "left" | "right">;
-    /**
-         * Whether to show a active state
-         */ active?: boolean;
-    /**
-         * Whether to show a clickable state
-         */ clickable?: boolean;
-    /**
-         * Custom class name
-         */ className?: string;
-    /**
-         * Whether to show a disabled state
-         */ disabled?: boolean;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-    mouseover: MouseEvent;
-    mouseleave: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Section = InstanceType<typeof Section>;
-export default Section;

package/dist/ui/components/Spacer.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-	export let height = '100%';
-	export let width = '100%';
-	export let backgroundColor = '';
-</script>
-
-<div
-	style={`min-height: ${height}; min-width: ${width}; background-color: ${backgroundColor};`}
-></div>

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

@@ -1,22 +0,0 @@
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Spacer: $$__sveltets_2_IsomorphicComponent<{
-    height?: string;
-    width?: string;
-    backgroundColor?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Spacer = InstanceType<typeof Spacer>;
-export default Spacer;