@d34dman/flowdrop 0.0.22 → 0.0.24

package/dist/components/form/FormNumberField.svelte

@@ -0,0 +1,109 @@
+<!--
+  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;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: number | string) => void;
+	}
+
+	let {
+		id,
+		value = "",
+		placeholder = "",
+		min,
+		max,
+		step,
+		required = 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}
+	aria-describedby={ariaDescribedBy}
+	aria-required={required}
+	oninput={handleInput}
+/>
+
+<style>
+	.form-number-field {
+		width: 100%;
+		padding: 0.625rem 0.875rem;
+		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-ref-gray-900, #111827);
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+	}
+
+	.form-number-field::placeholder {
+		color: var(--color-ref-gray-400, #9ca3af);
+	}
+
+	.form-number-field:hover {
+		border-color: var(--color-ref-gray-300, #d1d5db);
+		background-color: #ffffff;
+	}
+
+	.form-number-field:focus {
+		outline: none;
+		border-color: var(--color-ref-blue-500, #3b82f6);
+		background-color: #ffffff;
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.12),
+			0 1px 2px rgba(0, 0, 0, 0.04);
+	}
+</style>
+

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

@@ -0,0 +1,23 @@
+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;
+    /** 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.svelte

@@ -0,0 +1,252 @@
+<!--
+  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;
+		/** 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,
+		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}
+			aria-describedby={ariaDescribedBy}
+			aria-required={required}
+			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(--color-ref-blue-500, #3b82f6) 0%,
+			var(--color-ref-blue-500, #3b82f6) var(--progress, 0%),
+			var(--color-ref-gray-200, #e5e7eb) var(--progress, 0%),
+			var(--color-ref-gray-200, #e5e7eb) 100%
+		);
+		cursor: pointer;
+		transition: background 0.15s ease;
+	}
+
+	/* 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,
+			#ffffff 0%,
+			var(--color-ref-gray-50, #f9fafb) 100%
+		);
+		border: 2px solid var(--color-ref-blue-500, #3b82f6);
+		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(--color-ref-gray-200, #e5e7eb);
+	}
+
+	.form-range-field::-moz-range-progress {
+		height: 6px;
+		border-radius: 3px;
+		background: var(--color-ref-blue-500, #3b82f6);
+	}
+
+	/* Firefox - Thumb */
+	.form-range-field::-moz-range-thumb {
+		width: 18px;
+		height: 18px;
+		border-radius: 50%;
+		background: linear-gradient(
+			135deg,
+			#ffffff 0%,
+			var(--color-ref-gray-50, #f9fafb) 100%
+		);
+		border: 2px solid var(--color-ref-blue-500, #3b82f6);
+		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: 0.75rem;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.form-range-min,
+	.form-range-max {
+		color: var(--color-ref-gray-400, #9ca3af);
+		font-weight: 400;
+	}
+
+	.form-range-current {
+		font-weight: 600;
+		color: var(--color-ref-blue-600, #2563eb);
+		background-color: var(--color-ref-blue-50, #eff6ff);
+		padding: 0.125rem 0.5rem;
+		border-radius: 0.25rem;
+		min-width: 2.5rem;
+		text-align: center;
+	}
+</style>
+

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

@@ -0,0 +1,21 @@
+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;
+    /** 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.svelte

@@ -0,0 +1,126 @@
+<!--
+  FormSelect Component
+  Dropdown select for single value selection
+  
+  Features:
+  - Custom styled dropdown with chevron icon
+  - Supports both string[] and FieldOption[] for options
+  - Proper ARIA attributes for accessibility
+-->
+
+<script lang="ts">
+	import Icon from "@iconify/svelte";
+	import { normalizeOptions, type FieldOption } from "./types.js";
+
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: string;
+		/** Available options - can be string[] or FieldOption[] */
+		options: FieldOption[] | string[];
+		/** Whether the field is required */
+		required?: boolean;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: string) => void;
+	}
+
+	let {
+		id,
+		value = "",
+		options = [],
+		required = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Normalize options to consistent FieldOption format
+	 */
+	const normalizedOptions = $derived(normalizeOptions(options));
+
+	/**
+	 * Handle select changes
+	 */
+	function handleChange(event: Event): void {
+		const target = event.currentTarget as HTMLSelectElement;
+		onChange(target.value);
+	}
+</script>
+
+<div class="form-select-wrapper">
+	<select
+		{id}
+		class="form-select"
+		value={value ?? ""}
+		aria-describedby={ariaDescribedBy}
+		aria-required={required}
+		onchange={handleChange}
+	>
+		{#each normalizedOptions as option (option.value)}
+			<option value={option.value}>{option.label}</option>
+		{/each}
+	</select>
+	<span class="form-select__icon" aria-hidden="true">
+		<Icon icon="heroicons:chevron-down" />
+	</span>
+</div>
+
+<style>
+	.form-select-wrapper {
+		position: relative;
+	}
+
+	.form-select {
+		width: 100%;
+		padding: 0.625rem 2.5rem 0.625rem 0.875rem;
+		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		color: var(--color-ref-gray-900, #111827);
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+		cursor: pointer;
+		appearance: none;
+	}
+
+	.form-select:hover {
+		border-color: var(--color-ref-gray-300, #d1d5db);
+		background-color: #ffffff;
+	}
+
+	.form-select:focus {
+		outline: none;
+		border-color: var(--color-ref-blue-500, #3b82f6);
+		background-color: #ffffff;
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.12),
+			0 1px 2px rgba(0, 0, 0, 0.04);
+	}
+
+	.form-select__icon {
+		position: absolute;
+		right: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+		color: var(--color-ref-gray-400, #9ca3af);
+		display: flex;
+		align-items: center;
+		transition: color 0.2s;
+	}
+
+	.form-select__icon :global(svg) {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.form-select:focus + .form-select__icon {
+		color: var(--color-ref-blue-500, #3b82f6);
+	}
+</style>
+

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

@@ -0,0 +1,18 @@
+import { type FieldOption } from "./types.js";
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: string;
+    /** Available options - can be string[] or FieldOption[] */
+    options: FieldOption[] | string[];
+    /** Whether the field is required */
+    required?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+}
+declare const FormSelect: import("svelte").Component<Props, {}, "">;
+type FormSelect = ReturnType<typeof FormSelect>;
+export default FormSelect;

package/dist/components/form/FormTextField.svelte

@@ -0,0 +1,88 @@
+<!--
+  FormTextField Component
+  Text input field for string values
+  
+  Features:
+  - Standard text input with focus and hover states
+  - Proper ARIA attributes for accessibility
+  - Placeholder support
+-->
+
+<script lang="ts">
+	interface Props {
+		/** Field identifier */
+		id: string;
+		/** Current value */
+		value: string;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Whether the field is required */
+		required?: boolean;
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: string) => void;
+	}
+
+	let {
+		id,
+		value = "",
+		placeholder = "",
+		required = false,
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Handle input changes
+	 */
+	function handleInput(event: Event): void {
+		const target = event.currentTarget as HTMLInputElement;
+		onChange(target.value);
+	}
+</script>
+
+<input
+	{id}
+	type="text"
+	class="form-text-field"
+	value={value ?? ""}
+	{placeholder}
+	aria-describedby={ariaDescribedBy}
+	aria-required={required}
+	oninput={handleInput}
+/>
+
+<style>
+	.form-text-field {
+		width: 100%;
+		padding: 0.625rem 0.875rem;
+		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		color: var(--color-ref-gray-900, #111827);
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+	}
+
+	.form-text-field::placeholder {
+		color: var(--color-ref-gray-400, #9ca3af);
+	}
+
+	.form-text-field:hover {
+		border-color: var(--color-ref-gray-300, #d1d5db);
+		background-color: #ffffff;
+	}
+
+	.form-text-field:focus {
+		outline: none;
+		border-color: var(--color-ref-blue-500, #3b82f6);
+		background-color: #ffffff;
+		box-shadow:
+			0 0 0 3px rgba(59, 130, 246, 0.12),
+			0 1px 2px rgba(0, 0, 0, 0.04);
+	}
+</style>
+

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

@@ -0,0 +1,17 @@
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current value */
+    value: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+}
+declare const FormTextField: import("svelte").Component<Props, {}, "">;
+type FormTextField = ReturnType<typeof FormTextField>;
+export default FormTextField;