@synthaxai/ui 1.0.0

package/dist/forms/Select/Select.svelte

@@ -0,0 +1,548 @@
+<!--
+  @component Select
+  
+  An accessible select dropdown component with support for options,
+  groups, and custom styling. Designed for healthcare forms.
+  
+  @example
+  <Select
+    id="gender"
+    label="Gender"
+    value={gender}
+    options={[
+      { value: 'male', label: 'Male' },
+      { value: 'female', label: 'Female' },
+      { value: 'other', label: 'Other' }
+    ]}
+    onchange={(e) => gender = e.target.value}
+  />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { ChevronDown, AlertCircle, Check } from 'lucide-svelte';
+	import { cn } from '../../utils/cn.js';
+	import { generateId } from '../../utils/keyboard.js';
+
+	type SelectSize = 'sm' | 'md' | 'lg';
+
+	interface SelectOption {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	}
+
+	interface SelectGroup {
+		label: string;
+		options: SelectOption[];
+	}
+
+	interface Props {
+		/** Unique identifier for the select */
+		id?: string;
+		/** Form field name */
+		name?: string;
+		/** Label text for the select */
+		label: string;
+		/** Current value */
+		value?: string;
+		/** Placeholder text */
+		placeholder?: string;
+		/** Array of options or option groups */
+		options: SelectOption[] | SelectGroup[];
+		/** Whether the field is required */
+		required?: boolean;
+		/** Whether the field is disabled */
+		disabled?: boolean;
+		/** Error message to display */
+		error?: string;
+		/** Success message when valid */
+		successMessage?: string;
+		/** Hint text to display below the select */
+		hint?: string;
+		/** Size of the select */
+		size?: SelectSize;
+		/** Whether to hide the label visually (still accessible) */
+		hideLabel?: boolean;
+		/** Additional CSS classes for the wrapper */
+		class?: string;
+		/** Icon to display on the left */
+		iconLeft?: Snippet;
+		/** Change handler */
+		onchange?: (event: Event) => void;
+		/** Blur handler */
+		onblur?: (event: FocusEvent) => void;
+		/** Test ID for e2e testing (Playwright, Cypress) */
+		testId?: string;
+		/** Show validation state immediately without waiting for interaction */
+		validateOnMount?: boolean;
+	}
+
+	let {
+		id = generateId('select'),
+		name,
+		label,
+		value = '',
+		placeholder = 'Select an option',
+		options,
+		required = false,
+		disabled = false,
+		error = '',
+		successMessage = '',
+		hint = '',
+		size = 'md',
+		hideLabel = false,
+		class: className = '',
+		iconLeft,
+		onchange,
+		onblur,
+		testId,
+		validateOnMount = false
+	}: Props = $props();
+
+	// Internal state
+	let hasInteracted = $state(false);
+
+	// Derived states
+	// Validation shows: after interaction OR if validateOnMount is enabled
+	const shouldValidate = $derived(hasInteracted || validateOnMount);
+	const showError = $derived(shouldValidate && !!error);
+	const showSuccess = $derived(shouldValidate && !error && !!value && !!successMessage);
+	const isValid = $derived(shouldValidate && !error && !!value && !!successMessage);
+	const errorId = $derived(`${id}-error`);
+	const hintId = $derived(`${id}-hint`);
+
+	// Check if options are grouped
+	function isGrouped(opts: SelectOption[] | SelectGroup[]): opts is SelectGroup[] {
+		return opts.length > 0 && 'options' in opts[0];
+	}
+
+	function handleChange(e: Event) {
+		hasInteracted = true;
+		onchange?.(e);
+	}
+
+	function handleBlur(e: FocusEvent) {
+		hasInteracted = true;
+		onblur?.(e);
+	}
+
+	// Build aria-describedby
+	const ariaDescribedBy = $derived(
+		[error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+	);
+</script>
+
+<div class={cn('select-wrapper', `select-${size}`, disabled && 'select-disabled', className)}>
+	<!-- Label -->
+	<label for={id} class={cn('select-label', hideLabel && 'sr-only')}>
+		{label}
+		{#if required}
+			<span class="select-required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+
+	<!-- Select wrapper -->
+	<div class="select-field-wrapper">
+		{#if iconLeft}
+			<span class="select-icon-left" aria-hidden="true">
+				{@render iconLeft()}
+			</span>
+		{/if}
+
+		<select
+			{id}
+			{name}
+			{value}
+			{disabled}
+			{required}
+			aria-invalid={showError}
+			aria-describedby={ariaDescribedBy}
+			aria-required={required}
+			data-testid={testId}
+			class={cn(
+				'select-field',
+				iconLeft && 'select-has-icon-left',
+				(showError || isValid) && 'select-has-icon-right',
+				showError && 'select-error',
+				isValid && 'select-valid',
+				!value && 'select-placeholder'
+			)}
+			onchange={handleChange}
+			onblur={handleBlur}
+		>
+			{#if placeholder}
+				<option value="" disabled>{placeholder}</option>
+			{/if}
+
+			{#if isGrouped(options)}
+				{#each options as group}
+					<optgroup label={group.label}>
+						{#each group.options as option}
+							<option value={option.value} disabled={option.disabled}>
+								{option.label}
+							</option>
+						{/each}
+					</optgroup>
+				{/each}
+			{:else}
+				{#each options as option}
+					<option value={option.value} disabled={option.disabled}>
+						{option.label}
+					</option>
+				{/each}
+			{/if}
+		</select>
+
+		<!-- Status icon -->
+		{#if showError}
+			<span class="select-status-icon select-status-error" aria-hidden="true">
+				<AlertCircle size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16} />
+			</span>
+		{:else if isValid}
+			<span class="select-status-icon select-status-success" aria-hidden="true">
+				<Check size={size === 'sm' ? 14 : size === 'lg' ? 18 : 16} />
+			</span>
+		{/if}
+
+		<!-- Chevron icon -->
+		<span class="select-chevron" aria-hidden="true">
+			<ChevronDown size={size === 'sm' ? 16 : size === 'lg' ? 22 : 18} />
+		</span>
+	</div>
+
+	<!-- Footer messages -->
+	<div class="select-footer">
+		{#if showError}
+			<p id={errorId} class="select-message select-message-error" role="alert" aria-live="assertive">
+				<AlertCircle size={12} />
+				{error}
+			</p>
+		{:else if showSuccess}
+			<p class="select-message select-message-success">
+				<Check size={12} />
+				{successMessage}
+			</p>
+		{:else if hint}
+			<p id={hintId} class="select-message select-message-hint">
+				{hint}
+			</p>
+		{/if}
+	</div>
+</div>
+
+<style>
+	/* ========================================
+	   BASE WRAPPER
+	   ======================================== */
+	.select-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.select-disabled {
+		opacity: 0.6;
+	}
+
+	/* ========================================
+	   LABEL
+	   ======================================== */
+	.select-label {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		font-weight: 500;
+		color: var(--ui-text-primary);
+	}
+
+	.select-sm .select-label {
+		font-size: 0.75rem;
+	}
+
+	.select-md .select-label,
+	.select-lg .select-label {
+		font-size: 0.875rem;
+	}
+
+	.select-required {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .select-required {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .select-required {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	/* ========================================
+	   FIELD WRAPPER
+	   ======================================== */
+	.select-field-wrapper {
+		position: relative;
+	}
+
+	/* ========================================
+	   SELECT FIELD
+	   ======================================== */
+	.select-field {
+		width: 100%;
+		appearance: none;
+		border: 2px solid var(--ui-border-default);
+		border-radius: 0.5rem;
+		background: var(--ui-bg-secondary);
+		color: var(--ui-text-primary);
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	.select-field: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']) .select-field: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'])) .select-field:focus-visible {
+			border-color: rgb(var(--ui-color-primary-light));
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	.select-field:disabled {
+		cursor: not-allowed;
+		background: var(--ui-bg-tertiary);
+	}
+
+	/* Placeholder styling */
+	.select-placeholder {
+		color: var(--ui-text-tertiary);
+	}
+
+	/* Size variants */
+	.select-sm .select-field {
+		height: 2rem;
+		padding-left: 0.75rem;
+		padding-right: 2.25rem;
+		font-size: 0.875rem;
+	}
+
+	.select-md .select-field {
+		height: 2.5rem;
+		padding-left: 0.875rem;
+		padding-right: 2.75rem;
+		font-size: 0.875rem;
+	}
+
+	.select-lg .select-field {
+		height: 3rem;
+		padding-left: 1rem;
+		padding-right: 3.25rem;
+		font-size: 1rem;
+	}
+
+	/* Icon padding adjustments - use !important to override size-specific padding */
+	.select-field.select-has-icon-left {
+		padding-left: 2.5rem !important;
+	}
+
+	.select-field.select-has-icon-right {
+		padding-right: 4rem !important;
+	}
+
+	/* Error state */
+	.select-error {
+		border-color: rgb(var(--ui-color-error));
+	}
+
+	.select-error:focus-visible {
+		border-color: rgb(var(--ui-color-error));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-error) / 0.4);
+	}
+
+	:global([data-theme='dark']) .select-error {
+		border-color: rgb(var(--ui-color-error-light));
+	}
+
+	:global([data-theme='dark']) .select-error:focus-visible {
+		border-color: rgb(var(--ui-color-error-light));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-error-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .select-error {
+			border-color: rgb(var(--ui-color-error-light));
+		}
+
+		:global(:root:not([data-theme='light'])) .select-error:focus-visible {
+			border-color: rgb(var(--ui-color-error-light));
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-error-light) / 0.5);
+		}
+	}
+
+	/* Valid state */
+	.select-valid {
+		border-color: rgb(var(--ui-color-success));
+	}
+
+	.select-valid:focus-visible {
+		border-color: rgb(var(--ui-color-success));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-success) / 0.4);
+	}
+
+	:global([data-theme='dark']) .select-valid {
+		border-color: rgb(var(--ui-color-success-light));
+	}
+
+	:global([data-theme='dark']) .select-valid:focus-visible {
+		border-color: rgb(var(--ui-color-success-light));
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-success-light) / 0.5);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .select-valid {
+			border-color: rgb(var(--ui-color-success-light));
+		}
+
+		:global(:root:not([data-theme='light'])) .select-valid:focus-visible {
+			border-color: rgb(var(--ui-color-success-light));
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-success-light) / 0.5);
+		}
+	}
+
+	/* ========================================
+	   ICONS
+	   ======================================== */
+	.select-icon-left {
+		position: absolute;
+		left: 0.75rem;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+		color: var(--ui-text-tertiary);
+	}
+
+	.select-chevron {
+		position: absolute;
+		right: 0.875rem;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+		color: var(--ui-text-secondary);
+		transition: color 0.2s ease;
+	}
+
+	/* Improve chevron visibility on hover/focus */
+	.select-field-wrapper:hover .select-chevron,
+	.select-field:focus + .select-status-icon + .select-chevron,
+	.select-field:focus + .select-chevron,
+	.select-field:focus ~ .select-chevron {
+		color: var(--ui-text-primary);
+	}
+
+	.select-status-icon {
+		position: absolute;
+		right: 2.5rem;
+		top: 50%;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+
+	.select-status-error {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .select-status-error {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .select-status-error {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.select-status-success {
+		color: rgb(var(--ui-color-success));
+	}
+
+	:global([data-theme='dark']) .select-status-success {
+		color: rgb(var(--ui-color-success-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .select-status-success {
+			color: rgb(var(--ui-color-success-light));
+		}
+	}
+
+	/* ========================================
+	   FOOTER & MESSAGES
+	   ======================================== */
+	.select-footer {
+		min-height: 1.25rem;
+	}
+
+	.select-message {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: 0.75rem;
+	}
+
+	.select-message-error {
+		color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .select-message-error {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .select-message-error {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.select-message-success {
+		color: rgb(var(--ui-color-success));
+	}
+
+	:global([data-theme='dark']) .select-message-success {
+		color: rgb(var(--ui-color-success-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .select-message-success {
+			color: rgb(var(--ui-color-success-light));
+		}
+	}
+
+	.select-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/Select/Select.svelte.d.ts

@@ -0,0 +1,74 @@
+import type { Snippet } from 'svelte';
+type SelectSize = 'sm' | 'md' | 'lg';
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+}
+interface Props {
+    /** Unique identifier for the select */
+    id?: string;
+    /** Form field name */
+    name?: string;
+    /** Label text for the select */
+    label: string;
+    /** Current value */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Array of options or option groups */
+    options: SelectOption[] | SelectGroup[];
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Success message when valid */
+    successMessage?: string;
+    /** Hint text to display below the select */
+    hint?: string;
+    /** Size of the select */
+    size?: SelectSize;
+    /** Whether to hide the label visually (still accessible) */
+    hideLabel?: boolean;
+    /** Additional CSS classes for the wrapper */
+    class?: string;
+    /** Icon to display on the left */
+    iconLeft?: Snippet;
+    /** Change handler */
+    onchange?: (event: Event) => void;
+    /** Blur handler */
+    onblur?: (event: FocusEvent) => void;
+    /** Test ID for e2e testing (Playwright, Cypress) */
+    testId?: string;
+    /** Show validation state immediately without waiting for interaction */
+    validateOnMount?: boolean;
+}
+/**
+ * Select
+ *
+ * An accessible select dropdown component with support for options,
+ * groups, and custom styling. Designed for healthcare forms.
+ *
+ * @example
+ * <Select
+ *   id="gender"
+ *   label="Gender"
+ *   value={gender}
+ *   options={[
+ *     { value: 'male', label: 'Male' },
+ *     { value: 'female', label: 'Female' },
+ *     { value: 'other', label: 'Other' }
+ *   ]}
+ *   onchange={(e) => gender = e.target.value}
+ * />
+ */
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;
+//# sourceMappingURL=Select.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMrC,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,UAAU,YAAY;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,WAAW;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;CACxB;AAED,UAAU,KAAK;IACd,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,OAAO,EAAE,YAAY,EAAE,GAAG,WAAW,EAAE,CAAC;IACxC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,mBAAmB;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AA4JF;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

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

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

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

package/dist/forms/Select/index.js

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