@d34dman/flowdrop 0.0.22 → 0.0.24

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

@@ -0,0 +1,22 @@
+import type { FieldSchema } from './types.js';
+interface Props {
+    /** Field identifier */
+    id: string;
+    /** Current array value */
+    value: unknown[];
+    /** Schema for array items */
+    itemSchema: FieldSchema;
+    /** Minimum number of items required */
+    minItems?: number;
+    /** Maximum number of items allowed */
+    maxItems?: number;
+    /** Label for add button */
+    addLabel?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Callback when value changes */
+    onChange: (value: unknown[]) => void;
+}
+declare const FormArray: import("svelte").Component<Props, {}, "">;
+type FormArray = ReturnType<typeof FormArray>;
+export default FormArray;

package/dist/components/form/FormCheckboxGroup.svelte

@@ -0,0 +1,152 @@
+<!--
+  FormCheckboxGroup Component
+  Checkbox group for multiple value selection (enum with multiple=true)
+  
+  Features:
+  - Custom styled checkboxes with check icon
+  - Animated checkbox state transitions
+  - Focus-visible states for keyboard navigation
+-->
+
+<script lang="ts">
+	import Icon from "@iconify/svelte";
+
+	interface Props {
+		/** Field identifier (used for ARIA) */
+		id: string;
+		/** Current selected values */
+		value: string[];
+		/** Available options */
+		options: string[];
+		/** ARIA description ID */
+		ariaDescribedBy?: string;
+		/** Callback when value changes */
+		onChange: (value: string[]) => void;
+	}
+
+	let {
+		id,
+		value = [],
+		options = [],
+		ariaDescribedBy,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Handle checkbox toggle
+	 */
+	function handleCheckboxChange(option: string, checked: boolean): void {
+		const currentValues = Array.isArray(value) ? [...value] : [];
+
+		if (checked) {
+			if (!currentValues.includes(option)) {
+				onChange([...currentValues, option]);
+			}
+		} else {
+			onChange(currentValues.filter((v) => v !== option));
+		}
+	}
+</script>
+
+<div
+	class="form-checkbox-group"
+	role="group"
+	aria-labelledby="{id}-label"
+	aria-describedby={ariaDescribedBy}
+>
+	{#each options as option (option)}
+		{@const isChecked = Array.isArray(value) && value.includes(option)}
+		<label class="form-checkbox-item">
+			<input
+				type="checkbox"
+				class="form-checkbox__input"
+				value={option}
+				checked={isChecked}
+				onchange={(e) => handleCheckboxChange(option, e.currentTarget.checked)}
+			/>
+			<span class="form-checkbox__custom" aria-hidden="true">
+				<Icon icon="heroicons:check" />
+			</span>
+			<span class="form-checkbox__label">
+				{option}
+			</span>
+		</label>
+	{/each}
+</div>
+
+<style>
+	.form-checkbox-group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.625rem;
+		padding: 0.75rem;
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
+		border-radius: 0.5rem;
+	}
+
+	.form-checkbox-item {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		cursor: pointer;
+		padding: 0.375rem;
+		margin: -0.375rem;
+		border-radius: 0.375rem;
+		transition: background-color 0.15s;
+	}
+
+	.form-checkbox-item:hover {
+		background-color: var(--color-ref-gray-100, #f3f4f6);
+	}
+
+	.form-checkbox__input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.form-checkbox__custom {
+		width: 1.125rem;
+		height: 1.125rem;
+		border: 1.5px solid var(--color-ref-gray-300, #d1d5db);
+		border-radius: 0.25rem;
+		background-color: #ffffff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.15s;
+		flex-shrink: 0;
+	}
+
+	.form-checkbox__custom :global(svg) {
+		width: 0.75rem;
+		height: 0.75rem;
+		color: #ffffff;
+		opacity: 0;
+		transform: scale(0.5);
+		transition: all 0.15s;
+	}
+
+	.form-checkbox__input:checked + .form-checkbox__custom {
+		background-color: var(--color-ref-blue-500, #3b82f6);
+		border-color: var(--color-ref-blue-500, #3b82f6);
+	}
+
+	.form-checkbox__input:checked + .form-checkbox__custom :global(svg) {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	.form-checkbox__input:focus-visible + .form-checkbox__custom {
+		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+	}
+
+	.form-checkbox__label {
+		font-size: 0.875rem;
+		color: var(--color-ref-gray-700, #374151);
+		line-height: 1.4;
+	}
+</style>
+

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

@@ -0,0 +1,15 @@
+interface Props {
+    /** Field identifier (used for ARIA) */
+    id: string;
+    /** Current selected values */
+    value: string[];
+    /** Available options */
+    options: string[];
+    /** ARIA description ID */
+    ariaDescribedBy?: string;
+    /** Callback when value changes */
+    onChange: (value: string[]) => void;
+}
+declare const FormCheckboxGroup: import("svelte").Component<Props, {}, "">;
+type FormCheckboxGroup = ReturnType<typeof FormCheckboxGroup>;
+export default FormCheckboxGroup;

package/dist/components/form/FormField.svelte

@@ -0,0 +1,297 @@
+<!--
+  FormField Component
+  Factory component that renders the appropriate field based on schema type
+  
+  Features:
+  - Automatically selects the correct field component based on schema
+  - Wraps fields with FormFieldWrapper for consistent layout
+  - Supports all current field types (string, number, boolean, select, checkbox group, range)
+  - Extensible architecture for future complex types (array, object)
+  
+  Type Resolution Order:
+  1. format: 'hidden' -> skip rendering (return nothing)
+  2. enum with multiple: true -> FormCheckboxGroup
+  3. enum -> FormSelect
+  4. format: 'multiline' -> FormTextarea
+  5. format: 'range' (number/integer) -> FormRangeField
+  6. type: 'string' -> FormTextField
+  7. type: 'number' or 'integer' -> FormNumberField
+  8. type: 'boolean' -> FormToggle
+  9. type: 'select' or has options -> FormSelect
+  10. fallback -> FormTextField
+-->
+
+<script lang="ts">
+	import FormFieldWrapper from "./FormFieldWrapper.svelte";
+	import FormTextField from "./FormTextField.svelte";
+	import FormTextarea from "./FormTextarea.svelte";
+	import FormNumberField from "./FormNumberField.svelte";
+	import FormRangeField from "./FormRangeField.svelte";
+	import FormToggle from "./FormToggle.svelte";
+	import FormSelect from "./FormSelect.svelte";
+	import FormCheckboxGroup from "./FormCheckboxGroup.svelte";
+	import FormArray from "./FormArray.svelte";
+	import type { FieldSchema, FieldOption } from "./types.js";
+
+	interface Props {
+		/** Unique key/id for the field */
+		fieldKey: string;
+		/** Field schema definition */
+		schema: FieldSchema;
+		/** Current field value */
+		value: unknown;
+		/** Whether the field is required */
+		required?: boolean;
+		/** Animation delay index for staggered animations */
+		animationIndex?: number;
+		/** Callback when the field value changes */
+		onChange: (value: unknown) => void;
+	}
+
+	let {
+		fieldKey,
+		schema,
+		value,
+		required = false,
+		animationIndex = 0,
+		onChange
+	}: Props = $props();
+
+	/**
+	 * Computed description ID for ARIA association
+	 */
+	const descriptionId = $derived(schema.description && schema.title ? `${fieldKey}-description` : undefined);
+
+	/**
+	 * Animation delay based on index
+	 */
+	const animationDelay = $derived(animationIndex * 30);
+
+	/**
+	 * Field label - prefer title, fall back to description, then key
+	 */
+	const fieldLabel = $derived(String(schema.title ?? schema.description ?? fieldKey));
+
+	/**
+	 * Determine the field type to render
+	 */
+	const fieldType = $derived.by(() => {
+		// Hidden fields should not be rendered
+		if (schema.format === "hidden") {
+			return "hidden";
+		}
+
+		// Enum with multiple selection -> checkbox group
+		if (schema.enum && schema.multiple) {
+			return "checkbox-group";
+		}
+
+		// Enum with single selection -> select
+		if (schema.enum) {
+			return "select-enum";
+		}
+
+		// Multiline string -> textarea
+		if (schema.type === "string" && schema.format === "multiline") {
+			return "textarea";
+		}
+
+		// Range slider for number/integer with format: "range"
+		if ((schema.type === "number" || schema.type === "integer") && schema.format === "range") {
+			return "range";
+		}
+
+		// String -> text field
+		if (schema.type === "string") {
+			return "text";
+		}
+
+		// Number or integer -> number field
+		if (schema.type === "number" || schema.type === "integer") {
+			return "number";
+		}
+
+		// Boolean -> toggle
+		if (schema.type === "boolean") {
+			return "toggle";
+		}
+
+		// Select type or has options -> select
+		if (schema.type === "select" || schema.options) {
+			return "select-options";
+		}
+
+		// Future: Array type support
+		if (schema.type === "array") {
+			return "array";
+		}
+
+		// Future: Object type support
+		if (schema.type === "object") {
+			return "object";
+		}
+
+		// Fallback to text
+		return "text";
+	});
+
+	/**
+	 * Get enum options as string array for select/checkbox components
+	 */
+	const enumOptions = $derived.by((): string[] => {
+		if (!schema.enum) return [];
+		return schema.enum.map((opt) => String(opt));
+	});
+
+	/**
+	 * Get select options for select-options type
+	 */
+	const selectOptions = $derived.by((): FieldOption[] => {
+		if (!schema.options) return [];
+		return schema.options as FieldOption[];
+	});
+
+	/**
+	 * Get current value as the appropriate type
+	 */
+	const stringValue = $derived(String(value ?? ""));
+	const numberValue = $derived(value as number | string);
+	const booleanValue = $derived(Boolean(value ?? schema.default ?? false));
+	const arrayValue = $derived.by((): string[] => {
+		if (Array.isArray(value)) {
+			return value.map((v) => String(v));
+		}
+		return [];
+	});
+	const arrayItems = $derived.by((): unknown[] => {
+		if (Array.isArray(value)) {
+			return value;
+		}
+		return [];
+	});
+</script>
+
+{#if fieldType !== "hidden"}
+	<FormFieldWrapper
+		id={fieldKey}
+		label={fieldLabel}
+		{required}
+		description={schema.title ? schema.description : undefined}
+		{animationDelay}
+	>
+		{#if fieldType === "checkbox-group"}
+			<FormCheckboxGroup
+				id={fieldKey}
+				value={arrayValue}
+				options={enumOptions}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === "select-enum"}
+			<FormSelect
+				id={fieldKey}
+				value={stringValue}
+				options={enumOptions}
+				{required}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === "textarea"}
+			<FormTextarea
+				id={fieldKey}
+				value={stringValue}
+				placeholder={schema.placeholder ?? ""}
+				{required}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === "text"}
+			<FormTextField
+				id={fieldKey}
+				value={stringValue}
+				placeholder={schema.placeholder ?? ""}
+				{required}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === "number"}
+			<FormNumberField
+				id={fieldKey}
+				value={numberValue}
+				placeholder={schema.placeholder ?? ""}
+				min={schema.minimum}
+				max={schema.maximum}
+				{required}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === "range"}
+			<FormRangeField
+				id={fieldKey}
+				value={numberValue}
+				min={schema.minimum}
+				max={schema.maximum}
+				step={schema.step}
+				{required}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === "toggle"}
+			<FormToggle
+				id={fieldKey}
+				value={booleanValue}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === "select-options"}
+			<FormSelect
+				id={fieldKey}
+				value={stringValue}
+				options={selectOptions}
+				{required}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === "array" && schema.items}
+			<FormArray
+				id={fieldKey}
+				value={arrayItems}
+				itemSchema={schema.items}
+				minItems={schema.minItems}
+				maxItems={schema.maxItems}
+				addLabel={`Add ${schema.items.title ?? "Item"}`}
+				onChange={(val) => onChange(val)}
+			/>
+		{:else if fieldType === "object"}
+			<!-- Future: Object field component -->
+			<div class="form-field__unsupported">
+				<p>Object fields are not yet supported. Coming soon!</p>
+			</div>
+		{:else}
+			<!-- Fallback to text input -->
+			<FormTextField
+				id={fieldKey}
+				value={stringValue}
+				placeholder={schema.placeholder ?? ""}
+				ariaDescribedBy={descriptionId}
+				onChange={(val) => onChange(val)}
+			/>
+		{/if}
+	</FormFieldWrapper>
+{/if}
+
+<style>
+	.form-field__unsupported {
+		padding: 0.75rem;
+		background-color: var(--color-ref-amber-50, #fffbeb);
+		border: 1px solid var(--color-ref-amber-200, #fde68a);
+		border-radius: 0.5rem;
+		color: var(--color-ref-amber-800, #92400e);
+		font-size: 0.8125rem;
+	}
+
+	.form-field__unsupported p {
+		margin: 0;
+	}
+</style>
+

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

@@ -0,0 +1,18 @@
+import type { FieldSchema } from "./types.js";
+interface Props {
+    /** Unique key/id for the field */
+    fieldKey: string;
+    /** Field schema definition */
+    schema: FieldSchema;
+    /** Current field value */
+    value: unknown;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Animation delay index for staggered animations */
+    animationIndex?: number;
+    /** Callback when the field value changes */
+    onChange: (value: unknown) => void;
+}
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/components/form/FormFieldWrapper.svelte

@@ -0,0 +1,133 @@
+<!--
+  FormFieldWrapper Component
+  Provides consistent layout for form fields with label, description, and animations
+  
+  Features:
+  - Proper label associations with for/id attributes
+  - ARIA describedby for field descriptions
+  - Staggered fade-in animations
+  - Required field indicators
+-->
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		/** Field identifier for label association */
+		id: string;
+		/** Display label text */
+		label: string;
+		/** Whether the field is required */
+		required?: boolean;
+		/** Description/help text for the field */
+		description?: string;
+		/** Animation delay in milliseconds */
+		animationDelay?: number;
+		/** Slot content for the field input */
+		children: Snippet;
+	}
+
+	let {
+		id,
+		label,
+		required = false,
+		description,
+		animationDelay = 0,
+		children
+	}: Props = $props();
+
+	/**
+	 * Computed description ID for ARIA association
+	 */
+	const descriptionId = $derived(description ? `${id}-description` : undefined);
+</script>
+
+<div class="form-field" style="animation-delay: {animationDelay}ms">
+	<!-- Field Label -->
+	<label class="form-field__label" for={id}>
+		<span class="form-field__label-text">
+			{label}
+		</span>
+		{#if required}
+			<span class="form-field__required" aria-label="required">*</span>
+		{/if}
+	</label>
+
+	<!-- Field Input Container -->
+	<div class="form-field__input-wrapper">
+		{@render children()}
+	</div>
+
+	<!-- Field Description -->
+	{#if description}
+		<p id={descriptionId} class="form-field__description">
+			{description}
+		</p>
+	{/if}
+</div>
+
+<style>
+	/* ============================================
+	   FIELD CONTAINER
+	   ============================================ */
+
+	.form-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		animation: fieldFadeIn 0.3s ease-out forwards;
+		opacity: 0;
+		transform: translateY(4px);
+	}
+
+	@keyframes fieldFadeIn {
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* ============================================
+	   LABELS
+	   ============================================ */
+
+	.form-field__label {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: 0.8125rem;
+		font-weight: 600;
+		color: var(--color-ref-gray-700, #374151);
+		letter-spacing: -0.01em;
+	}
+
+	.form-field__label-text {
+		line-height: 1.4;
+	}
+
+	.form-field__required {
+		color: var(--color-ref-red-500, #ef4444);
+		font-weight: 500;
+	}
+
+	/* ============================================
+	   INPUT WRAPPER
+	   ============================================ */
+
+	.form-field__input-wrapper {
+		position: relative;
+	}
+
+	/* ============================================
+	   FIELD DESCRIPTION
+	   ============================================ */
+
+	.form-field__description {
+		margin: 0;
+		font-size: 0.75rem;
+		color: var(--color-ref-gray-500, #6b7280);
+		line-height: 1.5;
+		padding-left: 0.125rem;
+	}
+</style>
+

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

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Field identifier for label association */
+    id: string;
+    /** Display label text */
+    label: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Description/help text for the field */
+    description?: string;
+    /** Animation delay in milliseconds */
+    animationDelay?: number;
+    /** Slot content for the field input */
+    children: Snippet;
+}
+declare const FormFieldWrapper: import("svelte").Component<Props, {}, "">;
+type FormFieldWrapper = ReturnType<typeof FormFieldWrapper>;
+export default FormFieldWrapper;