@flowdrop/flowdrop 1.0.0

package/dist/components/form/FormMarkdownEditor.svelte.d.ts

@@ -0,0 +1,33 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value (markdown string) */
+    value: string;
+    /** Placeholder text shown when empty */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Editor height - "auto" or specific value like "300px" */
+    height?: string;
+    /** Whether to show the toolbar */
+    showToolbar?: boolean;
+    /** Whether to show the status bar */
+    showStatusBar?: boolean;
+    /** Whether to enable spell checking */
+    spellChecker?: boolean;
+    /** Whether to enable autosave */
+    autosave?: boolean;
+    /** Autosave delay in milliseconds */
+    autosaveDelay?: number;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
+    /** Whether to use dark theme */
+    darkTheme?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+}
+declare const FormMarkdownEditor: import("svelte").Component<Props, {}, "">;
+type FormMarkdownEditor = ReturnType<typeof FormMarkdownEditor>;
+export default FormMarkdownEditor;

package/dist/components/form/FormNumberField.stories.svelte

@@ -0,0 +1,36 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormNumberField from './FormNumberField.svelte';
+	import { fn } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Form/FormNumberField',
+		component: FormNumberField,
+		tags: ['autodocs'],
+		argTypes: {
+			value: { control: 'number' },
+			placeholder: { control: 'text' },
+			min: { control: 'number' },
+			max: { control: 'number' },
+			step: { control: 'number' },
+			required: { control: 'boolean' },
+			disabled: { control: 'boolean' }
+		},
+		args: {
+			id: 'demo-number-field',
+			value: '',
+			onChange: fn()
+		}
+	});
+</script>
+
+<Story name="Default" args={{ placeholder: 'Enter a number...' }} />
+
+<Story name="With Value" args={{ value: 42 }} />
+
+<Story
+	name="With Constraints"
+	args={{ value: 50, min: 0, max: 100, step: 5, placeholder: '0-100, step 5' }}
+/>
+
+<Story name="Disabled" args={{ value: 10, disabled: true }} />

package/dist/components/form/FormNumberField.stories.svelte.d.ts

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

package/dist/components/form/FormNumberField.svelte

@@ -0,0 +1,112 @@
+<!--
+  FormNumberField Component
+  Number input field for numeric values
+  
+  Features:
+  - Tabular numeric font for alignment
+  - Min/max/step support
+  - Proper ARIA attributes for accessibility
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: number | string;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Minimum allowed value */
+		min?: number;
+		/** Maximum allowed value */
+		max?: number;
+		/** Step increment */
+		step?: number;
+		/** Whether the field is required */
+		required?: boolean;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: number | string) => void;
+	}
+
+	let {
+		id,
+		value = '',
+		placeholder = '',
+		min,
+		max,
+		step,
+		required = false,
+		disabled = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Handle input changes
+	 * Returns the value as a number if valid, otherwise as string
+	 */
+	function handleInput(event: Event): void {
+		const target = event.currentTarget as HTMLInputElement;
+		const inputValue = target.value;
+
+		if (inputValue === '') {
+			onChange('');
+		} else {
+			const numValue = Number(inputValue);
+			onChange(isNaN(numValue) ? inputValue : numValue);
+		}
+	}
+</script>
+
+<input
+	{id}
+	type="number"
+	class="form-number-field"
+	value={value ?? ''}
+	{placeholder}
+	{min}
+	{max}
+	{step}
+	{disabled}
+	aria-describedby={ariaDescribedBy}
+	aria-required={required}
+	oninput={handleInput}
+/>
+
+<style>
+	.form-number-field {
+		width: 100%;
+		padding: 0.625rem 0.875rem;
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-lg);
+		font-size: var(--fd-text-sm);
+		font-family: inherit;
+		font-variant-numeric: tabular-nums;
+		color: var(--fd-foreground);
+		background-color: var(--fd-muted);
+		transition: all var(--fd-transition-normal);
+		box-shadow: var(--fd-shadow-sm);
+	}
+
+	.form-number-field::placeholder {
+		color: var(--fd-muted-foreground);
+	}
+
+	.form-number-field:hover {
+		border-color: var(--fd-border-strong);
+		background-color: var(--fd-background);
+	}
+
+	.form-number-field:focus {
+		outline: none;
+		border-color: var(--fd-primary);
+		background-color: var(--fd-background);
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.12),
+			var(--fd-shadow-sm);
+	}
+</style>

package/dist/components/form/FormNumberField.svelte.d.ts

@@ -0,0 +1,25 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: number | string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: number | string) => void;
+}
+declare const FormNumberField: import("svelte").Component<Props, {}, "">;
+type FormNumberField = ReturnType<typeof FormNumberField>;
+export default FormNumberField;

package/dist/components/form/FormRangeField.stories.svelte

@@ -0,0 +1,31 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormRangeField from './FormRangeField.svelte';
+	import { fn } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Form/FormRangeField',
+		component: FormRangeField,
+		tags: ['autodocs'],
+		argTypes: {
+			value: { control: { type: 'number' } },
+			min: { control: 'number' },
+			max: { control: 'number' },
+			step: { control: 'number' },
+			disabled: { control: 'boolean' }
+		},
+		args: {
+			id: 'demo-range-field',
+			value: 50,
+			onChange: fn()
+		}
+	});
+</script>
+
+<Story name="Default" args={{ min: 0, max: 100, step: 1 }} />
+
+<Story name="Temperature" args={{ value: 0.7, min: 0, max: 2, step: 0.05 }} />
+
+<Story name="Small Range" args={{ value: 3, min: 1, max: 10, step: 1 }} />
+
+<Story name="Disabled" args={{ value: 75, min: 0, max: 100, disabled: true }} />

package/dist/components/form/FormRangeField.stories.svelte.d.ts

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

package/dist/components/form/FormRangeField.svelte

@@ -0,0 +1,246 @@
+<!--
+  FormRangeField Component
+  Range slider input field for numeric values
+  
+  Features:
+  - Modern styled range slider with custom track and thumb
+  - Min/max/step support for value constraints
+  - Real-time value display with tabular numeric font
+  - Proper ARIA attributes for accessibility
+  - Visual feedback for current value position
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: number | string;
+		/** Minimum allowed value */
+		min?: number;
+		/** Maximum allowed value */
+		max?: number;
+		/** Step increment */
+		step?: number;
+		/** Whether the field is required */
+		required?: boolean;
+		/** Whether the field is disabled (read-only) */
+		disabled?: boolean;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: number) => void;
+	}
+
+	let {
+		id,
+		value = 0,
+		min = 0,
+		max = 100,
+		step = 1,
+		required = false,
+		disabled = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Compute the current numeric value
+	 * Handles string values and defaults
+	 */
+	const numericValue = $derived.by((): number => {
+		if (typeof value === 'number') {
+			return value;
+		}
+		const parsed = Number(value);
+		return isNaN(parsed) ? min : parsed;
+	});
+
+	/**
+	 * Compute the percentage position for the filled track
+	 * Used to show visual progress of the slider
+	 */
+	const progressPercentage = $derived.by((): number => {
+		const range = max - min;
+		if (range === 0) return 0;
+		return ((numericValue - min) / range) * 100;
+	});
+
+	/**
+	 * Handle input changes
+	 * Converts the value to a number and triggers onChange
+	 */
+	function handleInput(event: Event): void {
+		const target = event.currentTarget as HTMLInputElement;
+		const numValue = Number(target.value);
+		onChange(numValue);
+	}
+</script>
+
+<div class="form-range-container">
+	<div class="form-range-slider">
+		<input
+			{id}
+			type="range"
+			class="form-range-field"
+			value={numericValue}
+			{min}
+			{max}
+			{step}
+			{disabled}
+			aria-describedby={ariaDescribedBy}
+			aria-valuemin={min}
+			aria-valuemax={max}
+			aria-valuenow={numericValue}
+			oninput={handleInput}
+			style="--progress: {progressPercentage}%"
+		/>
+	</div>
+	<div class="form-range-values">
+		<span class="form-range-min">{min}</span>
+		<span class="form-range-current">{numericValue}</span>
+		<span class="form-range-max">{max}</span>
+	</div>
+</div>
+
+<style>
+	.form-range-container {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 100%;
+	}
+
+	.form-range-slider {
+		position: relative;
+		width: 100%;
+		padding: 0.25rem 0;
+	}
+
+	.form-range-field {
+		width: 100%;
+		height: 6px;
+		border-radius: 3px;
+		appearance: none;
+		-webkit-appearance: none;
+		background: linear-gradient(
+			to right,
+			var(--fd-primary) 0%,
+			var(--fd-primary) var(--progress, 0%),
+			var(--fd-border) var(--progress, 0%),
+			var(--fd-border) 100%
+		);
+		cursor: pointer;
+		transition: background var(--fd-transition-fast);
+	}
+
+	/* Webkit (Chrome, Safari, Edge) - Track */
+	.form-range-field::-webkit-slider-runnable-track {
+		height: 6px;
+		border-radius: 3px;
+	}
+
+	/* Webkit - Thumb */
+	.form-range-field::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background: linear-gradient(135deg, var(--fd-background) 0%, var(--fd-muted) 100%);
+		border: 2px solid var(--fd-primary);
+		box-shadow:
+			0 2px 6px rgba(59, 130, 246, 0.25),
+			0 1px 2px rgba(0, 0, 0, 0.1);
+		cursor: pointer;
+		margin-top: -6px;
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.form-range-field::-webkit-slider-thumb:hover {
+		transform: scale(1.1);
+		box-shadow:
+			0 4px 12px rgba(59, 130, 246, 0.35),
+			0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	.form-range-field:focus::-webkit-slider-thumb {
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.2),
+			0 4px 12px rgba(59, 130, 246, 0.35);
+	}
+
+	/* Firefox - Track */
+	.form-range-field::-moz-range-track {
+		height: 6px;
+		border-radius: 3px;
+		background: var(--fd-border);
+	}
+
+	.form-range-field::-moz-range-progress {
+		height: 6px;
+		border-radius: 3px;
+		background: var(--fd-primary);
+	}
+
+	/* Firefox - Thumb */
+	.form-range-field::-moz-range-thumb {
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background: linear-gradient(135deg, var(--fd-background) 0%, var(--fd-muted) 100%);
+		border: 2px solid var(--fd-primary);
+		box-shadow:
+			0 2px 6px rgba(59, 130, 246, 0.25),
+			0 1px 2px rgba(0, 0, 0, 0.1);
+		cursor: pointer;
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.form-range-field::-moz-range-thumb:hover {
+		transform: scale(1.1);
+		box-shadow:
+			0 4px 12px rgba(59, 130, 246, 0.35),
+			0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	.form-range-field:focus::-moz-range-thumb {
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.2),
+			0 4px 12px rgba(59, 130, 246, 0.35);
+	}
+
+	/* Focus styles */
+	.form-range-field:focus {
+		outline: none;
+	}
+
+	.form-range-field:focus-visible {
+		outline: none;
+	}
+
+	/* Value display row */
+	.form-range-values {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: var(--fd-text-xs);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.form-range-min,
+	.form-range-max {
+		color: var(--fd-muted-foreground);
+		font-weight: 400;
+	}
+
+	.form-range-current {
+		font-weight: 600;
+		color: var(--fd-primary-hover);
+		background-color: var(--fd-primary-muted);
+		padding: 0.125rem 0.5rem;
+		border-radius: var(--fd-radius-sm);
+		min-width: 2.5rem;
+		text-align: center;
+	}
+</style>

package/dist/components/form/FormRangeField.svelte.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: number | string;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled (read-only) */
+    disabled?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: number) => void;
+}
+declare const FormRangeField: import("svelte").Component<Props, {}, "">;
+type FormRangeField = ReturnType<typeof FormRangeField>;
+export default FormRangeField;

package/dist/components/form/FormSelect.stories.svelte

@@ -0,0 +1,50 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import FormSelect from './FormSelect.svelte';
+	import { fn } from 'storybook/test';
+
+	const { Story } = defineMeta({
+		title: 'Form/FormSelect',
+		component: FormSelect,
+		tags: ['autodocs'],
+		argTypes: {
+			value: { control: 'text' },
+			required: { control: 'boolean' },
+			disabled: { control: 'boolean' }
+		},
+		args: {
+			id: 'demo-select',
+			value: '',
+			onChange: fn()
+		}
+	});
+</script>
+
+<Story
+	name="String Options"
+	args={{
+		options: ['Option A', 'Option B', 'Option C'],
+		value: 'Option A'
+	}}
+/>
+
+<Story
+	name="FieldOption Objects"
+	args={{
+		options: [
+			{ value: 'gpt-4', label: 'GPT-4' },
+			{ value: 'gpt-3.5', label: 'GPT-3.5 Turbo' },
+			{ value: 'claude-3', label: 'Claude 3 Opus' }
+		],
+		value: 'gpt-4'
+	}}
+/>
+
+<Story
+	name="Disabled"
+	args={{
+		options: ['Read', 'Write', 'Admin'],
+		value: 'Read',
+		disabled: true
+	}}
+/>

package/dist/components/form/FormSelect.stories.svelte.d.ts

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