@finsweet/webflow-apps-utils 1.0.1

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

@@ -0,0 +1,93 @@
+<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

@@ -0,0 +1,4 @@
+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

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

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

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

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

@@ -0,0 +1,17 @@
+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/ui/components/clickable/types.js

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

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

@@ -0,0 +1,46 @@
+/**
+ * All Re-usable Components
+ */
+import BreakpointItem from './breakpoints/BreakpointItem.svelte';
+import ButtonGroup from './ButtonGroup.svelte';
+import Checkbox from './Checkbox.svelte';
+import { Clickable } from './clickable';
+import Copy from './Copy.svelte';
+import CustomModal from './CustomModal.svelte';
+import DisableInEditMode from './DisableInEditMode.svelte';
+import Divider from './Divider.svelte';
+import Header from './Header.svelte';
+import Iframe from './Iframe.svelte';
+import ImageUpload from './ImageUpload.svelte';
+import InjectComponent from './InjectComponent.svelte';
+import { Input } from './input';
+import { Layout } from './layout';
+import Loader from './Loader.svelte';
+import LoadingScreen from './LoadingScreen.svelte';
+import Modal from './Modal.svelte';
+import Navbar from './Navbar.svelte';
+import NoSettingsNeeded from './NoSettingsNeeded.svelte';
+import Notification from './Notification.svelte';
+import PreviewBar from './PreviewBar.svelte';
+import ScrollableContent from './ScrollableContent.svelte';
+import Section from './Section.svelte';
+import SelectBodyOrDivBlock from './SelectBodyOrDivBlock.svelte';
+import Spacer from './Spacer.svelte';
+import SpinnerPlusMinus from './SpinnerPlusMinus.svelte';
+import SpinnerUpDown from './SpinnerUpDown.svelte';
+import Switch from './switch/Switch.svelte';
+import Tabs from './Tabs.svelte';
+import { Text } from './text';
+import ToggleItem from './ToggleItem.svelte';
+import ToggleList from './ToggleList.svelte';
+import { Tooltip } from './tooltip';
+export { BreakpointItem, ButtonGroup, Checkbox, Clickable, Copy, CustomModal, DisableInEditMode, Notification, Divider, Header, Iframe, ImageUpload, InjectComponent, Layout, Loader, LoadingScreen, Modal, Navbar, NoSettingsNeeded, PreviewBar, ScrollableContent, Section, SelectBodyOrDivBlock, Spacer, SpinnerPlusMinus, SpinnerUpDown, Switch, Tabs, Text, ToggleItem, ToggleList, Tooltip, Input };
+export * from './breakpoints';
+export * from './clickable';
+export * from './input';
+export * from './layout';
+export * from './select';
+export * from './switch';
+export * from './text';
+export * from './tooltip';
+export * from './buttons';

package/dist/ui/components/index.js

@@ -0,0 +1,46 @@
+/**
+ * All Re-usable Components
+ */
+import BreakpointItem from './breakpoints/BreakpointItem.svelte';
+import ButtonGroup from './ButtonGroup.svelte';
+import Checkbox from './Checkbox.svelte';
+import { Clickable } from './clickable';
+import Copy from './Copy.svelte';
+import CustomModal from './CustomModal.svelte';
+import DisableInEditMode from './DisableInEditMode.svelte';
+import Divider from './Divider.svelte';
+import Header from './Header.svelte';
+import Iframe from './Iframe.svelte';
+import ImageUpload from './ImageUpload.svelte';
+import InjectComponent from './InjectComponent.svelte';
+import { Input } from './input';
+import { Layout } from './layout';
+import Loader from './Loader.svelte';
+import LoadingScreen from './LoadingScreen.svelte';
+import Modal from './Modal.svelte';
+import Navbar from './Navbar.svelte';
+import NoSettingsNeeded from './NoSettingsNeeded.svelte';
+import Notification from './Notification.svelte';
+import PreviewBar from './PreviewBar.svelte';
+import ScrollableContent from './ScrollableContent.svelte';
+import Section from './Section.svelte';
+import SelectBodyOrDivBlock from './SelectBodyOrDivBlock.svelte';
+import Spacer from './Spacer.svelte';
+import SpinnerPlusMinus from './SpinnerPlusMinus.svelte';
+import SpinnerUpDown from './SpinnerUpDown.svelte';
+import Switch from './switch/Switch.svelte';
+import Tabs from './Tabs.svelte';
+import { Text } from './text';
+import ToggleItem from './ToggleItem.svelte';
+import ToggleList from './ToggleList.svelte';
+import { Tooltip } from './tooltip';
+export { BreakpointItem, ButtonGroup, Checkbox, Clickable, Copy, CustomModal, DisableInEditMode, Notification, Divider, Header, Iframe, ImageUpload, InjectComponent, Layout, Loader, LoadingScreen, Modal, Navbar, NoSettingsNeeded, PreviewBar, ScrollableContent, Section, SelectBodyOrDivBlock, Spacer, SpinnerPlusMinus, SpinnerUpDown, Switch, Tabs, Text, ToggleItem, ToggleList, Tooltip, Input };
+export * from './breakpoints';
+export * from './clickable';
+export * from './input';
+export * from './layout';
+export * from './select';
+export * from './switch';
+export * from './text';
+export * from './tooltip';
+export * from './buttons';

package/dist/ui/components/input/Input.stories.d.ts

@@ -0,0 +1,109 @@
+import type { StoryObj } from '@storybook/sveltekit';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<import("./types.js").InputProps, {}, "">;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        value: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        type: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        readonly: {
+            control: string;
+            description: string;
+        };
+        invalid: {
+            control: string;
+            description: string;
+        };
+        autofocus: {
+            control: string;
+            description: string;
+        };
+        units: {
+            control: string;
+            description: string;
+        };
+        pill: {
+            control: {
+                type: string;
+            };
+            options: (string | null)[];
+            description: string;
+        };
+        fontSize: {
+            control: string;
+            description: string;
+        };
+        width: {
+            control: string;
+            description: string;
+        };
+        height: {
+            control: string;
+            description: string;
+        };
+        maxLength: {
+            control: string;
+            description: string;
+        };
+        minLength: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const WithPlaceholder: Story;
+export declare const EmailInput: Story;
+export declare const PasswordInput: Story;
+export declare const NumberInput: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
+export declare const Autofocus: Story;
+export declare const WithPixelUnits: Story;
+export declare const WithPercentageUnits: Story;
+export declare const WithEmUnits: Story;
+export declare const BluePill: Story;
+export declare const GrayPill: Story;
+export declare const PillWithUnits: Story;
+export declare const ErrorAlert: Story;
+export declare const SuccessAlert: Story;
+export declare const InfoAlert: Story;
+export declare const WarningAlert: Story;
+export declare const LongErrorMessage: Story;
+export declare const CustomSize: Story;
+export declare const SmallInput: Story;
+export declare const LargeInput: Story;
+export declare const WithMaxLength: Story;
+export declare const WithMinLength: Story;
+export declare const InteractiveExample: Story;
+export declare const ComplexExample: Story;
+export declare const FormFieldExample: Story;

package/dist/ui/components/input/Input.stories.js

@@ -0,0 +1,337 @@
+import Input from './Input.svelte';
+const meta = {
+    title: 'Ui/Input',
+    component: Input,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A versatile input component with support for various states, validation alerts, pill styling, and units display.'
+            }
+        }
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'Input field value'
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Input field placeholder text'
+        },
+        type: {
+            control: { type: 'select' },
+            options: ['text', 'email', 'password', 'number', 'tel', 'url'],
+            description: 'Input field type'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables the input field'
+        },
+        readonly: {
+            control: 'boolean',
+            description: 'Makes the input field read-only'
+        },
+        invalid: {
+            control: 'boolean',
+            description: 'Applies invalid styling to the input'
+        },
+        autofocus: {
+            control: 'boolean',
+            description: 'Focuses the input when component mounts'
+        },
+        units: {
+            control: 'text',
+            description: 'Units display text (e.g., "px", "em", "%")'
+        },
+        pill: {
+            control: { type: 'select' },
+            options: [null, 'blue', 'gray'],
+            description: 'Pill background variant'
+        },
+        fontSize: {
+            control: 'text',
+            description: 'Custom font size'
+        },
+        width: {
+            control: 'text',
+            description: 'Input width'
+        },
+        height: {
+            control: 'text',
+            description: 'Input height'
+        },
+        maxLength: {
+            control: 'number',
+            description: 'Maximum input length'
+        },
+        minLength: {
+            control: 'number',
+            description: 'Minimum input length'
+        }
+    }
+};
+export default meta;
+// Basic stories
+export const Default = {
+    args: {
+        placeholder: 'Enter text...'
+    }
+};
+export const WithValue = {
+    args: {
+        value: 'Sample text',
+        placeholder: 'Enter text...'
+    }
+};
+export const WithPlaceholder = {
+    args: {
+        placeholder: 'Type something here...'
+    }
+};
+// Input types
+export const EmailInput = {
+    args: {
+        type: 'email',
+        placeholder: 'Enter your email...'
+    }
+};
+export const PasswordInput = {
+    args: {
+        type: 'password',
+        placeholder: 'Enter password...'
+    }
+};
+export const NumberInput = {
+    args: {
+        type: 'number',
+        placeholder: 'Enter a number...'
+    }
+};
+// States
+export const Disabled = {
+    args: {
+        value: 'Disabled input',
+        disabled: true
+    }
+};
+export const ReadOnly = {
+    args: {
+        value: 'Read-only input',
+        readonly: true
+    }
+};
+export const Invalid = {
+    args: {
+        value: 'Invalid input',
+        invalid: true
+    }
+};
+export const Autofocus = {
+    args: {
+        autofocus: true,
+        placeholder: 'This input has autofocus'
+    }
+};
+// With units
+export const WithPixelUnits = {
+    args: {
+        value: '20',
+        units: 'px',
+        placeholder: 'Enter pixels...'
+    }
+};
+export const WithPercentageUnits = {
+    args: {
+        value: '50',
+        units: '%',
+        placeholder: 'Enter percentage...'
+    }
+};
+export const WithEmUnits = {
+    args: {
+        value: '1.5',
+        units: 'em',
+        placeholder: 'Enter em value...'
+    }
+};
+// Pills
+export const BluePill = {
+    args: {
+        value: 'Blue pill text',
+        pill: 'blue'
+    }
+};
+export const GrayPill = {
+    args: {
+        value: 'Gray pill text',
+        pill: 'gray'
+    }
+};
+export const PillWithUnits = {
+    args: {
+        value: '100',
+        pill: 'blue',
+        units: 'px'
+    }
+};
+// Alert states (now using Tooltip component)
+export const ErrorAlert = {
+    args: {
+        value: 'Input with error',
+        invalid: true,
+        alert: {
+            type: 'error',
+            message: 'This field contains an error'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with error state. Hover over the input to see the error tooltip.'
+            }
+        }
+    }
+};
+export const SuccessAlert = {
+    args: {
+        value: 'Valid input',
+        alert: {
+            type: 'success',
+            message: 'Input is valid!'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with success state. Hover to see the success tooltip.'
+            }
+        }
+    }
+};
+export const InfoAlert = {
+    args: {
+        value: 'Info message',
+        alert: {
+            type: 'info',
+            message: 'Additional information about this field'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with info state. Hover to see the info tooltip.'
+            }
+        }
+    }
+};
+export const WarningAlert = {
+    args: {
+        value: 'Warning input',
+        alert: {
+            type: 'warning',
+            message: 'Please review this input'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with warning state. Hover to see the warning tooltip.'
+            }
+        }
+    }
+};
+export const LongErrorMessage = {
+    args: {
+        value: 'Invalid email format',
+        invalid: true,
+        alert: {
+            type: 'error',
+            message: 'Please enter a valid email address. The format should be user@domain.com'
+        }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with a longer error message. The tooltip automatically adjusts to fit the content.'
+            }
+        }
+    }
+};
+// Sizing
+export const CustomSize = {
+    args: {
+        placeholder: 'Custom sized input',
+        width: '300px',
+        height: '40px',
+        fontSize: '16px'
+    }
+};
+export const SmallInput = {
+    args: {
+        placeholder: 'Small input',
+        width: '150px',
+        height: '28px',
+        fontSize: '12px'
+    }
+};
+export const LargeInput = {
+    args: {
+        placeholder: 'Large input',
+        width: '400px',
+        height: '48px',
+        fontSize: '18px'
+    }
+};
+// Length constraints
+export const WithMaxLength = {
+    args: {
+        placeholder: 'Max 10 characters',
+        maxLength: 10
+    }
+};
+export const WithMinLength = {
+    args: {
+        placeholder: 'Min 5 characters',
+        minLength: 5
+    }
+};
+// Interactive examples
+export const InteractiveExample = {
+    args: {
+        placeholder: 'Type to see events',
+        oninput: (value) => console.log('Input event:', value),
+        onblur: (value) => console.log('Blur event:', value),
+        onfocus: (event) => console.log('Focus event:', event),
+        onkeydown: (event) => console.log('Keydown event:', event)
+    }
+};
+// Complex combinations
+export const ComplexExample = {
+    args: {
+        value: '42',
+        pill: 'blue',
+        units: 'px',
+        maxLength: 4,
+        type: 'number',
+        width: '200px',
+        alert: {
+            type: 'info',
+            message: 'Enter a pixel value'
+        }
+    }
+};
+export const FormFieldExample = {
+    args: {
+        id: 'email-field',
+        type: 'email',
+        placeholder: 'your.email@example.com',
+        width: '300px',
+        alert: {
+            type: 'error',
+            message: 'Please enter a valid email address'
+        },
+        invalid: true
+    }
+};