@finsweet/webflow-apps-utils 1.0.1 → 1.0.3

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

@@ -74,6 +74,22 @@ declare const meta: {
             control: string;
             description: string;
         };
+        showSteppers: {
+            control: string;
+            description: string;
+        };
+        step: {
+            control: string;
+            description: string;
+        };
+        min: {
+            control: string;
+            description: string;
+        };
+        max: {
+            control: string;
+            description: string;
+        };
     };
 };
 export default meta;
@@ -84,6 +100,14 @@ export declare const WithPlaceholder: Story;
 export declare const EmailInput: Story;
 export declare const PasswordInput: Story;
 export declare const NumberInput: Story;
+export declare const NumberWithSteppers: Story;
+export declare const SteppersWithCustomStep: Story;
+export declare const SteppersWithMinMax: Story;
+export declare const SteppersWithDecimals: Story;
+export declare const SteppersAtMinValue: Story;
+export declare const SteppersAtMaxValue: Story;
+export declare const SteppersDisabled: Story;
+export declare const SteppersReadonly: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Invalid: Story;

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

@@ -69,6 +69,22 @@ const meta = {
         minLength: {
             control: 'number',
             description: 'Minimum input length'
+        },
+        showSteppers: {
+            control: 'boolean',
+            description: 'Shows increment/decrement buttons for number inputs (requires type="number")'
+        },
+        step: {
+            control: 'number',
+            description: 'Step value for increment/decrement (default: 1)'
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum value for number input'
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum value for number input'
         }
     }
 };
@@ -109,6 +125,88 @@ export const NumberInput = {
         placeholder: 'Enter a number...'
     }
 };
+// Stepper functionality
+export const NumberWithSteppers = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '10',
+        placeholder: 'Enter a number...'
+    }
+};
+export const SteppersWithCustomStep = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '5',
+        step: 5,
+        placeholder: 'Increments by 5...'
+    }
+};
+export const SteppersWithMinMax = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '50',
+        min: 0,
+        max: 100,
+        step: 10,
+        placeholder: 'Range: 0-100, Step: 10'
+    }
+};
+export const SteppersWithDecimals = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '1.5',
+        step: 0.5,
+        min: 0,
+        max: 10,
+        placeholder: 'Decimal steps...'
+    }
+};
+export const SteppersAtMinValue = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '0',
+        min: 0,
+        max: 100,
+        step: 1,
+        placeholder: 'At minimum value'
+    }
+};
+export const SteppersAtMaxValue = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '100',
+        min: 0,
+        max: 100,
+        step: 1,
+        placeholder: 'At maximum value'
+    }
+};
+export const SteppersDisabled = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '25',
+        disabled: true,
+        step: 5,
+        placeholder: 'Disabled with steppers'
+    }
+};
+export const SteppersReadonly = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '75',
+        readonly: true,
+        step: 5,
+        placeholder: 'Readonly with steppers'
+    }
+};
 // States
 export const Disabled = {
     args: {

package/dist/ui/components/input/Input.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { onMount } from 'svelte';
 
+	import { ChevronIcon } from '../../icons';
 	import { Text, Tooltip } from '..';
 	import type { InputProps } from './types.js';
 
@@ -23,33 +24,80 @@
 		type = 'text',
 		alert = null,
 		pill = null,
+		showSteppers = false,
+		step = 1,
+		min = undefined,
+		max = undefined,
 		oninput,
 		onblur,
 		onfocus,
 		onkeydown,
+		onValueChange,
 		class: className = '',
 		children,
 		...restProps
 	}: InputProps = $props();
 
+	// Validation: showSteppers can only be used with type="number"
+	if (showSteppers && type !== 'number') {
+		throw new Error('showSteppers can only be used when type="number"');
+	}
+
+	// Validation: showSteppers and units cannot be used together
+	if (showSteppers && units) {
+		throw new Error('showSteppers and units cannot be used together');
+	}
+
 	// Component state using Svelte 5 runes
 	let inputElement: HTMLInputElement | undefined = $state();
 	let pillElement: HTMLSpanElement | undefined = $state();
 	let pillWidth = $state(0);
 
-	// Use writable derived for reactive state management
-	let currInputValue = $derived.by(() => value);
+	// Internal reactive state for input value that updates with steppers
+	let internalValue = $derived(value);
+
+	// Track HTML5 validation state
+	let isValidationInvalid = $state(false);
+
+	// Use internal value for reactive state management
+	let currInputValue = $derived(internalValue);
 	let computedColor = $derived(currInputValue ? 'var(--actionPrimaryText)' : 'var(--text3)');
 
 	let hasPill = $derived(currInputValue && pill);
 	let hasAlert = $derived(alert?.message);
 
+	// Parse numeric value for stepper operations
+	let numericValue = $derived.by(() => {
+		if (!showSteppers || !currInputValue) return 0;
+		const parsed = parseFloat(currInputValue);
+		return isNaN(parsed) ? 0 : parsed;
+	});
+
+	// Check if increment/decrement buttons should be disabled
+	let canIncrement = $derived.by(() => {
+		if (!showSteppers || disabled || readonly) return false;
+		if (max !== undefined) return numericValue < max;
+		return true;
+	});
+
+	let canDecrement = $derived.by(() => {
+		if (!showSteppers || disabled || readonly) return false;
+		if (min !== undefined) return numericValue > min;
+		return true;
+	});
+
+	// Sync external value prop changes to internal state
+	$effect(() => {
+		internalValue = value;
+	});
+
 	let wrapperClasses = $derived(
 		`
 		webflow-input-wrapper
 		${units ? 'units' : ''}
+		${showSteppers ? 'steppers' : ''}
 		${disabled ? 'disabled' : ''}
-		${invalid || hasAlert ? 'invalid' : ''}
+		${invalid || hasAlert || isValidationInvalid ? 'invalid' : ''}
 		${className}
 	`
 			.trim()
@@ -134,6 +182,51 @@
 		}
 	});
 
+	/**
+	 * Updates validation state based on HTML5 input validity
+	 */
+	const updateValidationState = () => {
+		if (inputElement && type === 'number') {
+			// Check if the input has any validation errors
+			isValidationInvalid = !inputElement.validity.valid;
+		} else {
+			isValidationInvalid = false;
+		}
+	};
+
+	// Update validation state when input value changes
+	$effect(() => {
+		if (inputElement) {
+			// Use setTimeout to ensure the input element has been updated
+			setTimeout(updateValidationState, 0);
+		}
+	});
+
+	// Listen for form reset events to update internal state
+	$effect(() => {
+		if (inputElement) {
+			const form = inputElement.closest('form');
+			if (form) {
+				const handleFormReset = () => {
+					// Use setTimeout to allow the form reset to complete first
+					setTimeout(() => {
+						if (inputElement) {
+							const resetValue = inputElement.value;
+							internalValue = resetValue;
+							updateValidationState();
+						}
+					}, 0);
+				};
+
+				form.addEventListener('reset', handleFormReset);
+
+				return () => {
+					form.removeEventListener('reset', handleFormReset);
+				};
+			}
+		}
+	});
+
 	/**
 	 * Handles input events
 	 */
@@ -141,10 +234,24 @@
 		const target = event.target as HTMLInputElement;
 		const inputValue = target?.value?.trim() || '';
 
+		// Update internal state for reactivity
+		internalValue = inputValue;
+
 		if (pill) {
 			setTimeout(updatePillPosition, 0);
 		}
 
+		// Call numeric value change handler for any number input when value is numeric
+		if (type === 'number' && inputValue) {
+			const parsed = parseFloat(inputValue);
+			if (!isNaN(parsed)) {
+				onValueChange?.(parsed);
+			}
+		}
+
+		// Update validation state for real-time feedback
+		updateValidationState();
+
 		oninput?.(inputValue);
 	};
 
@@ -169,9 +276,78 @@
 	 * Handles keydown events
 	 */
 	const handleKeydown = (event: KeyboardEvent) => {
+		// Handle arrow key increments/decrements when steppers are enabled
+		if (showSteppers && !disabled && !readonly) {
+			if (event.key === 'ArrowUp') {
+				event.preventDefault();
+				handleIncrement();
+			} else if (event.key === 'ArrowDown') {
+				event.preventDefault();
+				handleDecrement();
+			}
+		}
+
 		onkeydown?.(event);
 	};
 
+	/**
+	 * Handles increment button click
+	 */
+	const handleIncrement = () => {
+		if (!canIncrement) return;
+
+		const currentNum = numericValue;
+		let newValue = currentNum + step;
+
+		// Apply max constraint
+		if (max !== undefined && newValue > max) {
+			newValue = max;
+		}
+
+		const newStringValue = newValue.toString();
+
+		// Update internal state for reactivity
+		internalValue = newStringValue;
+
+		// Update the input element value directly
+		if (inputElement) {
+			inputElement.value = newStringValue;
+		}
+
+		// Trigger change events
+		onValueChange?.(newValue);
+		oninput?.(newStringValue);
+	};
+
+	/**
+	 * Handles decrement button click
+	 */
+	const handleDecrement = () => {
+		if (!canDecrement) return;
+
+		const currentNum = numericValue;
+		let newValue = currentNum - step;
+
+		// Apply min constraint
+		if (min !== undefined && newValue < min) {
+			newValue = min;
+		}
+
+		const newStringValue = newValue.toString();
+
+		// Update internal state for reactivity
+		internalValue = newStringValue;
+
+		// Update the input element value directly
+		if (inputElement) {
+			inputElement.value = newStringValue;
+		}
+
+		// Trigger change events
+		onValueChange?.(newValue);
+		oninput?.(newStringValue);
+	};
+
 	/**
 	 * Gets the tooltip background color based on alert type
 	 */
@@ -190,6 +366,78 @@
 	};
 </script>
 
+{#snippet inputField()}
+	<input
+		bind:this={inputElement}
+		{id}
+		class={inputClasses}
+		{placeholder}
+		{readonly}
+		{disabled}
+		{type}
+		{min}
+		{max}
+		{step}
+		maxlength={maxLength}
+		minlength={minLength}
+		value={currInputValue}
+		defaultValue={value}
+		oninput={handleInput}
+		onfocus={handleFocus}
+		onkeydown={handleKeydown}
+		onblur={handleBlur}
+		style="font-size: {fontSize}; color: {computedColor};"
+		{...restProps}
+	/>
+{/snippet}
+
+{#snippet inputWrapper()}
+	<div class={wrapperClasses} style="height: {height}; width: {width};" role="group">
+		{#if currInputValue && pill}
+			<span
+				class="pill"
+				class:blue={pill === 'blue'}
+				class:gray={pill === 'gray'}
+				bind:this={pillElement}
+				style="width: {pillWidth}px;"
+			></span>
+		{/if}
+
+		{@render inputField()}
+
+		{#if units && !showSteppers}
+			<div class="input-units-steppers">{units}</div>
+		{/if}
+
+		{#if showSteppers && !units}
+			<div class="input-units-steppers steppers">
+				<button
+					type="button"
+					class="stepper-button stepper-up"
+					disabled={!canIncrement}
+					onclick={handleIncrement}
+					aria-label="Increment value"
+				>
+					<span class="stepper-button-icon">&#8963;</span>
+				</button>
+				<button
+					type="button"
+					class="stepper-button stepper-down"
+					disabled={!canDecrement}
+					onclick={handleDecrement}
+					aria-label="Decrement value"
+				>
+					<span class="stepper-button-icon">&#8963;</span>
+				</button>
+			</div>
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/snippet}
+
 {#if hasAlert}
 	<Tooltip
 		message={alert?.message || ''}
@@ -206,85 +454,11 @@
 		class="input-tooltip"
 	>
 		{#snippet target()}
-			<div class={wrapperClasses} style="height: {height}; width: {width};" role="group">
-				{#if currInputValue && pill}
-					<span
-						class="pill"
-						class:blue={pill === 'blue'}
-						class:gray={pill === 'gray'}
-						bind:this={pillElement}
-						style="width: {pillWidth}px;"
-					></span>
-				{/if}
-
-				<input
-					bind:this={inputElement}
-					{id}
-					class={inputClasses}
-					{placeholder}
-					{readonly}
-					{disabled}
-					{type}
-					maxlength={maxLength}
-					minlength={minLength}
-					value={currInputValue}
-					oninput={handleInput}
-					onfocus={handleFocus}
-					onkeydown={handleKeydown}
-					onblur={handleBlur}
-					style="font-size: {fontSize}; color: {computedColor};"
-					{...restProps}
-				/>
-
-				{#if units}
-					<div class="input-units">{units}</div>
-				{/if}
-
-				{#if children}
-					{@render children()}
-				{/if}
-			</div>
+			{@render inputWrapper()}
 		{/snippet}
 	</Tooltip>
 {:else}
-	<div class={wrapperClasses} style="height: {height}; width: {width};" role="group">
-		{#if currInputValue && pill}
-			<span
-				class="pill"
-				class:blue={pill === 'blue'}
-				class:gray={pill === 'gray'}
-				bind:this={pillElement}
-				style="width: {pillWidth}px;"
-			></span>
-		{/if}
-
-		<input
-			bind:this={inputElement}
-			{id}
-			class={inputClasses}
-			{placeholder}
-			{readonly}
-			{disabled}
-			{type}
-			maxlength={maxLength}
-			minlength={minLength}
-			value={currInputValue}
-			oninput={handleInput}
-			onfocus={handleFocus}
-			onkeydown={handleKeydown}
-			onblur={handleBlur}
-			style="font-size: {fontSize}; color: {computedColor};"
-			{...restProps}
-		/>
-
-		{#if units}
-			<div class="input-units">{units}</div>
-		{/if}
-
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
+	{@render inputWrapper()}
 {/if}
 
 <style>
@@ -324,10 +498,21 @@
 		grid-template-columns: 1fr auto;
 		padding: 0 0 0 4px;
 	}
+
+	.webflow-input-wrapper.steppers {
+		grid-template-columns: 1fr auto;
+		padding: 0 0 0 4px;
+	}
+
 	.webflow-input-wrapper.units .webflow-input {
 		padding-right: 4px;
 	}
-	.input-units {
+
+	.webflow-input-wrapper.steppers .webflow-input {
+		padding-right: 4px;
+	}
+
+	.input-units-steppers {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -346,6 +531,62 @@
 		text-align: center;
 		opacity: 0.75;
 	}
+
+	.input-units-steppers.steppers {
+		justify-content: center;
+		flex-direction: column;
+		width: 16px;
+		gap: 1px;
+		background-color: var(--border1);
+		margin-top: -2px;
+		margin-bottom: -2px;
+	}
+
+	.stepper-button {
+		border: none;
+		width: 16px;
+		background-color: var(--actionSecondaryBackground);
+		color: var(--text2);
+		font-size: 0.8em;
+		line-height: 1;
+		height: 48%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.stepper-button-icon {
+		width: 8px;
+		height: 5px;
+	}
+
+	.stepper-button:hover:not(:disabled) {
+		background-color: var(--hoverColor);
+	}
+
+	.stepper-button:disabled {
+		opacity: 0.75;
+		cursor: not-allowed;
+	}
+
+	.stepper-up {
+		transform: rotate(0deg);
+		border-radius: 0 1px 0 0;
+	}
+
+	.stepper-down {
+		transform: rotate(180deg);
+		border-radius: 1px 0 0 0;
+	}
+
+	.stepper-button :global(svg) {
+		width: 16px;
+		height: 16px;
+	}
+
 	.webflow-input {
 		padding: 0;
 		margin: 0;

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

@@ -28,7 +28,8 @@ export interface InputProps extends Omit<HTMLInputAttributes, 'onblur' | 'onfocu
      */
     color?: string;
     /**
-     * Optional: If set it will add an element to the right of the input field and show the unit
+     * Optional: If set it will add an element to the right of the input field and show the unit.
+     * Cannot be used together with showSteppers
      */
     units?: string;
     /**
@@ -76,6 +77,23 @@ export interface InputProps extends Omit<HTMLInputAttributes, 'onblur' | 'onfocu
      * Possible values: 'blue', 'gray', or null/undefined for no pill
      */
     pill?: PillVariant;
+    /**
+     * Shows increment/decrement buttons for number inputs.
+     * Only available when type="number"
+     */
+    showSteppers?: boolean;
+    /**
+     * Step value for increment/decrement buttons.
+     */
+    step?: number;
+    /**
+     * Minimum value for number input.
+     */
+    min?: number;
+    /**
+     * Maximum value for number input.
+     */
+    max?: number;
     /**
      * Event handler for input changes - receives the trimmed string value
      */
@@ -92,6 +110,11 @@ export interface InputProps extends Omit<HTMLInputAttributes, 'onblur' | 'onfocu
      * Event handler for keydown events - receives the standard KeyboardEvent
      */
     onkeydown?: (event: KeyboardEvent) => void;
+    /**
+     * Event handler for numeric value changes - receives the numeric value
+     * Only called when showSteppers is true and value is a valid number
+     */
+    onValueChange?: (value: number) => void;
     /**
      * Additional CSS classes
      */
@@ -107,3 +130,6 @@ export interface InputEvent {
 export interface BlurEvent {
     value: string;
 }
+export interface NumericValueChangeEvent {
+    value: number;
+}

package/dist/ui/components/layout/Layout.stories.svelte

@@ -1,11 +1,11 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
-	import ExampleLayout from './ExampleLayout.svelte';
+	import { Wrapper } from './examples';
 
 	const { Story } = defineMeta({
 		title: 'UI/Layout',
-		component: ExampleLayout,
+		component: Wrapper,
 		tags: ['autodocs'],
 		parameters: {
 			layout: 'centered',
@@ -20,5 +20,5 @@
 </script>
 
 <Story name="Default">
-	<ExampleLayout />
+	<Wrapper />
 </Story>