@finsweet/webflow-apps-utils 1.0.2 → 1.0.3

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

@@ -1,213 +0,0 @@
-<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.svelte

@@ -1,93 +0,0 @@
-<script lang="ts">
-	import type { ClickableProps } from './types';
-
-	let {
-		class: className = '',
-		disabled = false,
-		children,
-		onclick,
-		onkeydown,
-		...restProps
-	}: ClickableProps = $props();
-
-	// Generate unique ID using $state for reactivity
-	let uniqueId = $state(crypto.randomUUID());
-
-	// Handle click events
-	function handleClick(event: MouseEvent) {
-		if (disabled) return;
-		onclick?.(event);
-	}
-
-	// Handle keyboard events
-	function handleKeydown(event: KeyboardEvent) {
-		if (disabled) return;
-
-		// Activate on Enter or Space
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault();
-			// Call the click handler directly for better test compatibility
-			handleClick(new MouseEvent('click', { bubbles: true, cancelable: true }));
-		}
-
-		onkeydown?.(event);
-	}
-
-	// Computed classes using $derived
-	let computedClasses = $derived(`clickable ${className} ${disabled ? 'disabled' : ''}`);
-</script>
-
-<div
-	id={uniqueId}
-	class={computedClasses}
-	role="button"
-	tabindex={disabled ? -1 : 0}
-	aria-disabled={disabled}
-	onclick={handleClick}
-	onkeydown={handleKeydown}
-	{...restProps}
->
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
-
-<style>
-	.clickable {
-		all: unset;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		transition: opacity 0.2s ease;
-	}
-
-	.clickable:focus-visible {
-		outline: 2px solid var(--color-focus, #007bff);
-		outline-offset: 2px;
-	}
-
-	.clickable.disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-		pointer-events: none;
-	}
-
-	/* Make sure disabled state overrides any other cursor styles */
-	.clickable.disabled,
-	.clickable.disabled:hover,
-	.clickable.disabled:active,
-	.clickable.disabled:focus {
-		cursor: not-allowed !important;
-		pointer-events: none !important;
-		opacity: 0.6 !important;
-	}
-
-	.clickable:hover:not(.disabled) {
-		opacity: 0.8;
-	}
-
-	.clickable:active:not(.disabled) {
-		transform: translateY(1px);
-	}
-</style>

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

@@ -1,4 +0,0 @@
-import type { ClickableProps } from './types';
-declare const Clickable: import("svelte").Component<ClickableProps, {}, "">;
-type Clickable = ReturnType<typeof Clickable>;
-export default Clickable;

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

@@ -1,2 +0,0 @@
-export { default as Clickable } from './Clickable.svelte';
-export type * from './types';

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

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

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

@@ -1,17 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-export interface ClickableProps extends HTMLAttributes<HTMLDivElement> {
-    class?: string;
-    disabled?: boolean;
-    children?: Snippet;
-    onclick?: (event: MouseEvent) => void;
-    onkeydown?: (event: KeyboardEvent) => void;
-}
-export interface ClickableEvents {
-    click: {
-        detail: MouseEvent;
-    };
-    keydown: {
-        detail: KeyboardEvent;
-    };
-}

package/dist/utils/api/copyPaste/index.d.ts

@@ -1,18 +0,0 @@
-export type CopyPasteComponent = {
-    meta: object;
-    type: string;
-    payload: {
-        nodes: PastedNodes[];
-        styles: PastedStyles[];
-    };
-};
-type PastedStyles = {
-    name: string;
-    comb: '&' | string;
-};
-type PastedNodes = {
-    data: {
-        xattr: Attr[];
-    };
-};
-export {};