@synthaxai/ui 1.0.0

package/dist/forms/FormField/FormField.svelte

@@ -0,0 +1,299 @@
+<!--
+  @component FormField
+  
+  A wrapper component for form fields that provides consistent
+  layout, labels, hints, and error message handling.
+  
+  Use this to wrap custom inputs or third-party components.
+  
+  @example
+  <FormField label="Custom Input" error={fieldError}>
+    <input type="text" {...attrs} />
+  </FormField>
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Info, AlertCircle } from 'lucide-svelte';
+	import { cn } from '../../utils/cn.js';
+	import { generateId } from '../../utils/keyboard.js';
+
+	type FieldSize = 'sm' | 'md' | 'lg';
+
+	interface Props {
+		/** Unique identifier for the field */
+		id?: string;
+		/** Label text for the field */
+		label: string;
+		/** Whether the field is required */
+		required?: boolean;
+		/** Error message to display */
+		error?: string;
+		/** Hint text to display */
+		hint?: string;
+		/** Description text below the field */
+		description?: string;
+		/** Size of the field label */
+		size?: FieldSize;
+		/** Whether to hide the label visually */
+		hideLabel?: boolean;
+		/** Whether the field is disabled */
+		disabled?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Field content (input, select, etc.) */
+		children: Snippet;
+	}
+
+	let {
+		id = generateId('field'),
+		label,
+		required = false,
+		error = '',
+		hint = '',
+		description = '',
+		size = 'md',
+		hideLabel = false,
+		disabled = false,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const errorId = $derived(`${id}-error`);
+	const hintId = $derived(`${id}-hint`);
+	const descriptionId = $derived(`${id}-description`);
+</script>
+
+<div class={cn('form-field', `form-field-${size}`, disabled && 'form-field-disabled', className)}>
+	<!-- Label -->
+	<label for={id} class={cn('form-field-label', hideLabel && 'sr-only')}>
+		{label}
+		{#if required}
+			<span class="form-field-required" aria-hidden="true">*</span>
+		{/if}
+		{#if hint && !hideLabel}
+			<span class="form-field-hint-icon" title={hint}>
+				<Info size={14} />
+			</span>
+		{/if}
+	</label>
+
+	<!-- Field content slot -->
+	<div class="form-field-content">
+		{@render children()}
+	</div>
+
+	<!-- Footer section -->
+	<div class="form-field-footer">
+		{#if error}
+			<p id={errorId} class="form-field-message form-field-message-error" role="alert">
+				<AlertCircle size={12} />
+				{error}
+			</p>
+		{/if}
+
+		{#if description && !error}
+			<p id={descriptionId} class="form-field-message form-field-message-hint">
+				{description}
+			</p>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* ========================================
+	   BASE WRAPPER
+	   ======================================== */
+	.form-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.form-field-disabled {
+		opacity: 0.6;
+	}
+
+	/* ========================================
+	   LABEL
+	   ======================================== */
+	.form-field-label {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-weight: 500;
+		color: var(--ui-text-primary);
+	}
+
+	.form-field-sm .form-field-label {
+		font-size: 0.75rem;
+	}
+
+	.form-field-md .form-field-label,
+	.form-field-lg .form-field-label {
+		font-size: 0.875rem;
+	}
+
+	.form-field-required {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .form-field-required {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .form-field-required {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.form-field-hint-icon {
+		color: var(--ui-text-tertiary);
+		cursor: help;
+	}
+
+	/* ========================================
+	   CONTENT & SLOTTED INPUTS
+	   ======================================== */
+	.form-field-content {
+		/* Container for slotted content */
+	}
+
+	/* Style raw inputs inside FormField for consistency */
+	.form-field-content :global(input),
+	.form-field-content :global(textarea),
+	.form-field-content :global(select) {
+		width: 100%;
+		border: 2px solid var(--ui-border-default);
+		border-radius: 0.5rem;
+		background: var(--ui-bg-secondary);
+		color: var(--ui-text-primary);
+		transition: all 0.2s ease;
+	}
+
+	.form-field-content :global(input::placeholder),
+	.form-field-content :global(textarea::placeholder) {
+		color: var(--ui-text-tertiary);
+	}
+
+	/* Size variants for slotted inputs */
+	.form-field-sm .form-field-content :global(input),
+	.form-field-sm .form-field-content :global(select) {
+		height: 2rem;
+		padding: 0 0.75rem;
+		font-size: 0.875rem;
+	}
+
+	.form-field-md .form-field-content :global(input),
+	.form-field-md .form-field-content :global(select) {
+		height: 2.5rem;
+		padding: 0 0.75rem;
+		font-size: 0.875rem;
+	}
+
+	.form-field-lg .form-field-content :global(input),
+	.form-field-lg .form-field-content :global(select) {
+		height: 3rem;
+		padding: 0 1rem;
+		font-size: 1rem;
+	}
+
+	.form-field-sm .form-field-content :global(textarea) {
+		padding: 0.5rem 0.75rem;
+		font-size: 0.875rem;
+	}
+
+	.form-field-md .form-field-content :global(textarea) {
+		padding: 0.625rem 0.75rem;
+		font-size: 0.875rem;
+	}
+
+	.form-field-lg .form-field-content :global(textarea) {
+		padding: 0.75rem 1rem;
+		font-size: 1rem;
+	}
+
+	/* Focus state - matches Button's 40%/50% opacity */
+	.form-field-content :global(input:focus-visible),
+	.form-field-content :global(textarea:focus-visible),
+	.form-field-content :global(select:focus-visible) {
+		outline: none;
+		background: var(--ui-bg-primary);
+		border-color: rgb(var(--ui-color-primary));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	:global([data-theme='dark']) .form-field-content :global(input:focus-visible),
+	:global([data-theme='dark']) .form-field-content :global(textarea:focus-visible),
+	:global([data-theme='dark']) .form-field-content :global(select:focus-visible) {
+		border-color: rgb(var(--ui-color-primary-light));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .form-field-content :global(input:focus-visible),
+		:global(:root:not([data-theme='light'])) .form-field-content :global(textarea:focus-visible),
+		:global(:root:not([data-theme='light'])) .form-field-content :global(select:focus-visible) {
+			border-color: rgb(var(--ui-color-primary-light));
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	/* Disabled state */
+	.form-field-content :global(input:disabled),
+	.form-field-content :global(textarea:disabled),
+	.form-field-content :global(select:disabled) {
+		cursor: not-allowed;
+		background: var(--ui-bg-tertiary);
+	}
+
+	/* ========================================
+	   FOOTER & MESSAGES
+	   ======================================== */
+	.form-field-footer {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		min-height: 1.25rem;
+	}
+
+	.form-field-message {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: 0.75rem;
+	}
+
+	.form-field-message-error {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .form-field-message-error {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .form-field-message-error {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.form-field-message-hint {
+		color: var(--ui-text-tertiary);
+	}
+
+	/* ========================================
+	   UTILITIES
+	   ======================================== */
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+</style>

package/dist/forms/FormField/FormField.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+type FieldSize = 'sm' | 'md' | 'lg';
+interface Props {
+    /** Unique identifier for the field */
+    id?: string;
+    /** Label text for the field */
+    label: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Hint text to display */
+    hint?: string;
+    /** Description text below the field */
+    description?: string;
+    /** Size of the field label */
+    size?: FieldSize;
+    /** Whether to hide the label visually */
+    hideLabel?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Field content (input, select, etc.) */
+    children: Snippet;
+}
+/**
+ * FormField
+ *
+ * A wrapper component for form fields that provides consistent
+ * layout, labels, hints, and error message handling.
+ *
+ * Use this to wrap custom inputs or third-party components.
+ *
+ * @example
+ * <FormField label="Custom Input" error={fieldError}>
+ *   <input type="text" {...attrs} />
+ * </FormField>
+ */
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;
+//# sourceMappingURL=FormField.svelte.d.ts.map

package/dist/forms/FormField/FormField.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/FormField/FormField.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMrC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,UAAU,KAAK;IACd,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,EAAE,OAAO,CAAC;CAClB;AAqEF;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/forms/FormField/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FormField } from './FormField.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/FormField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/FormField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/forms/FormField/index.js

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