@finsweet/webflow-apps-utils 1.0.1

package/dist/ui/components/button/Button.svelte.d.ts

@@ -0,0 +1,84 @@
+import { type Component, type Snippet } from 'svelte';
+import type { TooltipProps } from '../tooltip/types.js';
+import type { ButtonType, ButtonVariant } from './types.js';
+interface Props {
+    /**
+     * Button type for form submission
+     */
+    type?: ButtonType;
+    /**
+     * Visual variant of the button
+     */
+    variant?: ButtonVariant;
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show loading state
+     */
+    loading?: boolean;
+    /**
+     * Button text content
+     */
+    text?: string;
+    /**
+     * Left icon component
+     */
+    icon?: Component;
+    /**
+     * Right icon component
+     */
+    rightIcon?: Component;
+    /**
+     * Icon color (defaults to currentColor)
+     */
+    iconColor?: string;
+    /**
+     * Icon size
+     */
+    iconSize?: string;
+    /**
+     * Custom padding override
+     */
+    padding?: string;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Loading text override
+     */
+    loadingText?: string;
+    /**
+     * Whether button should take full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Tooltip configuration object with all tooltip props
+     */
+    tooltip?: Partial<TooltipProps>;
+    /**
+     * Whether button is in invalid state
+     */
+    invalid?: boolean;
+    /**
+     * Custom styles
+     */
+    style?: string;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * Custom content snippet
+     */
+    children?: Snippet;
+    /**
+     * Click event handler
+     */
+    onclick?: (event: MouseEvent) => void;
+}
+declare const Button: Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.svelte';
+export type { ButtonType, ButtonVariant, ButtonProps } from './types.js';

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

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

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

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'cms';
+export interface ButtonProps {
+    type?: ButtonType;
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    loading?: boolean;
+    text?: string;
+    icon?: Component | null;
+    rightIcon?: Component | null;
+    iconColor?: string;
+    iconSize?: string;
+    padding?: string;
+    class?: string;
+    loadingText?: string;
+    fullWidth?: boolean;
+    tooltipContent?: string;
+    invalid?: boolean;
+    style?: string;
+    ariaLabel?: string;
+    onclick?: (event: MouseEvent) => void;
+}

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

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

package/dist/ui/components/buttons/FooterButton.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">
+	import { type Component, onDestroy } from 'svelte';
+
+	import { createFormSubscription, globalStore } from '../../../stores';
+	import { canAccessFeature, finsweetUser } from '../../../utils';
+
+	import { ChevronIcon } from '../../icons';
+	import { Button, Text, Tooltip } from '..';
+	import Section from '../Section.svelte';
+	import type { ButtonItem } from './types';
+
+	/**
+	 * Accept individual buttons
+	 */
+	let {
+		editMode = false,
+		formKey,
+		buttons
+	}: {
+		buttons: ButtonItem[];
+		editMode: boolean;
+		formKey: string;
+	} = $props();
+
+	// Create reactive state for selected element
+	let selectedElement = $state<AnyElement | null>(null);
+
+	/**
+	 * Check if user is logged in
+	 */
+	const isLoggedIn = $derived(!!$finsweetUser?.user?.userId);
+	const form = createFormSubscription(formKey);
+
+	const unsubscribe =
+		typeof webflow !== 'undefined'
+			? webflow?.subscribe?.('selectedelement', (el) => {
+					selectedElement = el;
+				})
+			: () => {};
+
+	onDestroy(() => unsubscribe());
+
+	const buttonItems = $derived(() => {
+		const isEditting = editMode || !!$globalStore?.editMode;
+		const needsRepair = $globalStore?.repairMode && isEditting;
+
+		const hasAccess = canAccessFeature(isLoggedIn, $finsweetUser?.user?.libraryAccess, [
+			'canManageLibrary'
+		]);
+
+		return buttons.filter((item: ButtonItem) => {
+			// validation is handled in parent component
+			if (item.escapeValidation) return true;
+
+			//if not logged in remove library
+			if (!hasAccess?.granted) return item.type !== 'library';
+
+			// Filter out library buttons in create mode
+			if (isEditting && !needsRepair) return true;
+			return item.id !== 'save' && item.type !== 'library';
+		});
+	});
+</script>
+
+<div class="footer">
+	<div class="grouped-buttons">
+		{#each buttonItems() as button, index (button.id || index)}
+			{#if button.show !== false}
+				<!-- Button with popup menu -->
+				{#if button?.popupButtons?.length}
+					<Tooltip
+						position="fixed"
+						placement="top-start"
+						offsetVal={8}
+						showArrow={false}
+						listener={button.popupTrigger || 'click'}
+						listenerout={button.popupTrigger || 'click'}
+						width="210px"
+					>
+						{#snippet target()}
+							<Button
+								text={button.text}
+								variant={button.variant || 'primary'}
+								disabled={button.disabled || false}
+								loading={button.loading || false}
+								rightIcon={ChevronIcon}
+								class="popup-button-chevron"
+							/>
+						{/snippet}
+						{#snippet tooltipContent()}
+							<div role="button" tabindex="0" class="popup-content">
+								<div class="popup-content-list">
+									{#each button.popupButtons || [] as popupButton, popupIndex (popupIndex)}
+										{#if popupButton.show !== false}
+											<Section
+												className="link"
+												clickable
+												disabled={popupButton.disabled || popupButton.loading}
+												on:click={(e: MouseEvent) => {
+													e.stopPropagation();
+													e.preventDefault();
+													if (popupButton.disabled || popupButton.loading) return;
+													if (typeof popupButton.onClick === 'function') popupButton.onClick();
+												}}
+											>
+												{#if popupButton.icon}
+													<span class="popup-content-icon">
+														<popupButton.icon />
+													</span>
+												{/if}
+												<div class="popup-content-item">
+													<Text
+														label={popupButton.text}
+														fontWeight="500"
+														fontColor="var(--text2)"
+														fontSize="normal"
+													/>
+													<Text
+														label={popupButton.description || ''}
+														fontColor="#BDBDBD"
+														fontSize="normal"
+													/>
+												</div>
+											</Section>
+										{/if}
+									{/each}
+								</div>
+							</div>
+						{/snippet}
+					</Tooltip>
+
+					<!-- Button with tooltip -->
+				{:else if button.tooltip}
+					<Tooltip
+						width={button.tooltip?.width || '160px'}
+						placement={button.tooltip?.placement || 'top'}
+						offsetVal={10}
+						showArrow={button.tooltip?.showArrow !== false}
+					>
+						{#snippet target()}
+							<Button
+								text={button.text}
+								variant={button.variant || 'primary'}
+								disabled={button.disabled || false}
+								loading={button.loading || false}
+								onclick={button.onClick || (() => {})}
+							/>
+						{/snippet}
+						{#snippet tooltipContent()}
+							<div
+								class="tooltip-content {button.tooltip?.className || ''}"
+								style="display: {button.tooltip?.icon ? 'grid' : 'inline-block'}"
+							>
+								{#if button.tooltip?.icon}
+									<span class="icon">
+										<button.tooltip.icon />
+									</span>
+								{/if}
+								<Text label={button.tooltip?.content || ''} fontColor="var(--text2)" />
+							</div>
+						{/snippet}
+					</Tooltip>
+
+					<!-- Simple button -->
+				{:else}
+					<Button
+						text={button.text}
+						variant={button.variant || 'primary'}
+						disabled={button.disabled || button.loading || false}
+						loading={button.loading || false}
+						onclick={button.onClick || (() => {})}
+					/>
+				{/if}
+			{/if}
+		{/each}
+	</div>
+</div>
+
+<style>
+	.footer :global(.w-button svg) {
+		transform: rotate(270deg);
+	}
+	.grouped-buttons :global(.target:not(:has(.dropdown-label))) {
+		width: max-content !important;
+	}
+	.grouped-buttons :global(.target .tooltip) {
+		padding: 8px 0;
+		gap: 0;
+	}
+	.footer :global(.button-link.blocked .icon svg) {
+		color: var(--yellowText);
+	}
+	.footer :global(.tooltip) {
+		padding: 0;
+		width: 100%;
+	}
+	.footer :global(.tooltip) {
+		padding: 0 !important;
+		flex-direction: column;
+		gap: 0;
+	}
+	.tooltip-content {
+		display: grid;
+		grid-template-columns: 14px 1fr;
+		width: 100%;
+		height: 100%;
+		align-items: start;
+		gap: var(--Spacing-8, 8px);
+		padding: 6px;
+	}
+	.tooltip-content.invalid-selection :global(svg) {
+		color: var(--yellowText);
+	}
+	.grouped-buttons {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 4px;
+	}
+	.icon :global(svg) {
+		width: 14px;
+		height: 14px;
+		color: var(--text2);
+		margin-top: 2px;
+	}
+	.icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.popup-content {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		min-width: 150px;
+		background: var(--background);
+		border-radius: 4px;
+		padding: 4px;
+	}
+
+	.popup-content-list {
+		display: flex;
+		width: 100%;
+		padding: 4px 0px;
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.popup-content-list :global(svg) {
+		height: 16px;
+		width: 16px;
+		color: var(--text1);
+	}
+
+	.popup-content-list :global(.section-wrap.link) {
+		display: flex;
+		padding: 4px var(--Spacing-8, 8px);
+		align-items: flex-start;
+		gap: 4px;
+		align-self: stretch;
+		flex-direction: row;
+	}
+
+	.popup-content-list .popup-content-item {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		flex: 1 0 0;
+	}
+
+	.footer :global(.popup-button-chevron svg) {
+		transform: rotate(90deg);
+		width: 16px;
+		height: 16px;
+	}
+</style>

package/dist/ui/components/buttons/FooterButton.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Component } from 'svelte';
+import type { ButtonItem } from './types';
+type $$ComponentProps = {
+    buttons: ButtonItem[];
+    editMode: boolean;
+    formKey: string;
+};
+declare const FooterButton: Component<$$ComponentProps, {}, "">;
+type FooterButton = ReturnType<typeof FooterButton>;
+export default FooterButton;

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

@@ -0,0 +1,5 @@
+import FooterButton from './FooterButton.svelte';
+export * from './types';
+export { FooterButton };
+export { default as Button } from '../button/Button.svelte';
+export type * from '../button/types.js';

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

@@ -0,0 +1,5 @@
+import FooterButton from './FooterButton.svelte';
+export * from './types';
+export { FooterButton };
+// Export Button component
+export { default as Button } from '../button/Button.svelte';

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

@@ -0,0 +1,28 @@
+import type { Placement } from '@floating-ui/dom';
+import type { Component } from 'svelte';
+/**
+ * Individual button item properties
+ */
+export interface ButtonItem {
+    id?: 'main' | 'update-single' | 'update-all' | 'save';
+    text: string;
+    escapeValidation?: boolean;
+    variant?: 'primary' | 'secondary' | 'cms';
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'library' | 'component' | 'popup';
+    onClick?: () => void;
+    show?: boolean;
+    popupButtons?: ButtonItem[];
+    popupTrigger?: 'click' | 'hover';
+    icon?: Component;
+    description?: string;
+    tooltip?: {
+        content: string;
+        className?: string;
+        width?: string;
+        placement?: Placement;
+        showArrow?: boolean;
+        icon?: Component;
+    };
+}

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

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

package/dist/ui/components/clickable/Clickable.stories.svelte

@@ -0,0 +1,213 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from 'storybook/test';
+
+	import { CheckIcon, PlusIcon } from '../../icons';
+	import Clickable from './Clickable.svelte';
+
+	const { Story } = defineMeta({
+		title: 'UI/Clickable',
+		component: Clickable,
+		tags: ['autodocs'],
+		parameters: {
+			docs: {
+				description: {
+					component:
+						'A versatile clickable wrapper component that provides keyboard accessibility and interactive states. Use this when you need to make any content clickable with proper focus management and ARIA support.'
+				}
+			}
+		},
+		argTypes: {
+			disabled: {
+				control: { type: 'boolean' },
+				description: 'Whether the clickable element is disabled'
+			},
+			class: {
+				control: { type: 'text' },
+				description: 'Additional CSS classes to apply'
+			},
+			onclick: {
+				action: 'clicked',
+				description: 'Click event handler'
+			},
+			onkeydown: {
+				action: 'keydown',
+				description: 'Keydown event handler'
+			}
+		},
+		args: {
+			onclick: fn(),
+			onkeydown: fn()
+		}
+	});
+</script>
+
+<Story
+	name="Card"
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'A card-style clickable element using design system colors and shadows. Perfect for dashboard items, settings panels, or any card-based UI.'
+			}
+		}
+	}}
+>
+	<Clickable class="story-card">
+		<div class="card-content">
+			<div class="card-header">
+				<CheckIcon />
+				<h3>Task Completed</h3>
+			</div>
+			<p class="card-description">
+				Click anywhere on this card to view details. Uses design system colors and proper hover
+				states.
+			</p>
+			<span class="card-timestamp">2 hours ago</span>
+		</div>
+	</Clickable>
+</Story>
+
+<Story
+	name="Action Button"
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'A button-style clickable element that follows the design system styling. Use when you need custom button behavior or complex button content.'
+			}
+		}
+	}}
+>
+	<Clickable class="story-action-button">
+		<div class="action-content">
+			<PlusIcon />
+			<span>Add New Item</span>
+		</div>
+	</Clickable>
+</Story>
+
+<Story
+	name="Disabled"
+	parameters={{
+		docs: {
+			description: {
+				story:
+					'Shows the disabled state with reduced opacity and no pointer events. Maintains accessibility by setting proper ARIA attributes.'
+			}
+		}
+	}}
+>
+	<Clickable disabled class="story-card">
+		<div class="card-content">
+			<div class="card-header">
+				<PlusIcon />
+				<h3>Disabled Card</h3>
+			</div>
+			<p class="card-description">This card is disabled and cannot be clicked.</p>
+		</div>
+	</Clickable>
+</Story>
+
+<style>
+	:global(.story-card) {
+		display: block;
+		width: 100%;
+		max-width: 320px;
+		background: var(--background2, #353535);
+		border: 1px solid var(--border1, rgba(255, 255, 255, 0.13));
+		border-radius: var(--border-radius, 4px);
+		transition: all 0.2s ease;
+	}
+
+	:global(.story-card:not(.disabled)) {
+		cursor: pointer;
+	}
+
+	:global(.story-card:hover:not(.disabled)) {
+		background: var(--background3, #404040);
+		border-color: var(--border2, rgba(255, 255, 255, 0.16));
+	}
+
+	:global(.story-card:focus-visible) {
+		outline: 2px solid var(--blueBorder, #007df0);
+		outline-offset: 2px;
+	}
+
+	.card-content {
+		padding: var(--spacing-16, 16px);
+	}
+
+	.card-header {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-8, 8px);
+		margin-bottom: var(--spacing-8, 8px);
+	}
+
+	.card-header h3 {
+		margin: 0;
+		color: var(--text1, #ffffff);
+		font-size: var(--font-size-large, 12.5px);
+		font-weight: var(--font-weight-medium, 600);
+	}
+
+	.card-description {
+		margin: 0 0 var(--spacing-8, 8px) 0;
+		color: var(--text2, rgba(255, 255, 255, 0.67));
+		font-size: var(--font-size-small, 11.5px);
+		line-height: 1.4;
+	}
+
+	.card-timestamp {
+		color: var(--text3, rgba(255, 255, 255, 0.67));
+		font-size: var(--font-size-small, 11.5px);
+	}
+
+	:global(.story-action-button) {
+		display: inline-flex;
+		background: var(
+			--actionSecondaryBackground,
+			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
+			#404040
+		);
+		border: 1px solid var(--border2, rgba(255, 255, 255, 0.16));
+		border-radius: var(--border-radius, 4px);
+		transition: all 0.2s ease;
+		box-shadow:
+			0px 0.5px 1px rgba(0, 0, 0, 0.8),
+			inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.12);
+	}
+
+	:global(.story-action-button:not(.disabled)) {
+		cursor: pointer;
+	}
+
+	:global(.story-action-button:hover:not(.disabled)) {
+		background: var(
+			--actionSecondaryBackgroundHover,
+			linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.16) 100%)
+		);
+		border-color: var(--border3, rgba(255, 255, 255, 0.19));
+	}
+
+	:global(.story-action-button:focus-visible) {
+		outline: 2px solid var(--blueBorder, #007df0);
+		outline-offset: 2px;
+	}
+
+	:global(.story-action-button:active:not(.disabled)) {
+		background: var(--defaultLightActive, rgba(255, 255, 255, 0.03));
+	}
+
+	.action-content {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-8, 8px);
+		padding: var(--spacing-8, 8px) var(--spacing-12, 12px);
+		color: var(--actionSecondaryText, #e0e0e0);
+		font-size: var(--font-size-small, 11.5px);
+		font-weight: var(--font-weight-normal, 400);
+		letter-spacing: var(--font-size-small-letter-spacing, -0.115px);
+	}
+</style>

package/dist/ui/components/clickable/Clickable.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Clickable;
+type Clickable = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Clickable: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Clickable from './Clickable.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;
+}