@synthaxai/ui 1.0.0

package/dist/forms/RadioGroup/RadioGroup.svelte

@@ -0,0 +1,418 @@
+<!--
+  @component RadioGroup
+  
+  An accessible radio button group component for selecting one option from a set.
+  Critical for healthcare forms where mutually exclusive options are common
+  (e.g., gender, status, priority level).
+  
+  @example
+  <RadioGroup
+    id="priority"
+    label="Priority Level"
+    options={[
+      { value: 'low', label: 'Low' },
+      { value: 'medium', label: 'Medium' },
+      { value: 'high', label: 'High', description: 'Immediate attention required' }
+    ]}
+    bind:value={selectedPriority}
+    required
+  />
+-->
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import { generateId } from '../../utils/keyboard.js';
+	import { announce } from '../../utils/accessibility.js';
+
+	type RadioSize = 'sm' | 'md' | 'lg';
+type RadioOrientation = 'vertical' | 'horizontal';
+
+interface RadioOption {
+	/** Unique value for the option */
+	value: string;
+	/** Display label */
+	label: string;
+	/** Optional description text */
+	description?: string;
+	/** Whether this option is disabled */
+	disabled?: boolean;
+}
+
+interface Props {
+	/** Unique identifier for the radio group */
+	id?: string;
+	/** Form field name */
+	name?: string;
+	/** Group label */
+	label: string;
+	/** Radio options */
+	options: RadioOption[];
+	/** Currently selected value */
+	value?: string;
+	/** Whether a selection is required */
+	required?: boolean;
+	/** Whether the entire group is disabled */
+	disabled?: boolean;
+	/** Error message to display */
+	error?: string;
+	/** Hint text */
+	hint?: string;
+	/** Size of the radio buttons */
+	size?: RadioSize;
+	/** Layout orientation */
+	orientation?: RadioOrientation;
+	/** Whether to hide the group label visually */
+	hideLabel?: boolean;
+	/** Additional CSS classes */
+	class?: string;
+	/** Change handler */
+	onchange?: (value: string) => void;
+	/** Test ID for e2e testing (Playwright, Cypress) */
+	testId?: string;
+	/** Show validation state immediately without waiting for interaction */
+	validateOnMount?: boolean;
+}
+
+let {
+	id = generateId('radio'),
+	name,
+	label,
+	options,
+	value = '',
+	required = false,
+	disabled = false,
+	error = '',
+	hint = '',
+	size = 'md',
+	orientation = 'vertical',
+	hideLabel = false,
+	class: className = '',
+	onchange,
+	testId,
+	validateOnMount = false
+}: Props = $props();
+
+// Internal state
+let hasInteracted = $state(false);
+
+// Derived states
+const shouldValidate = $derived(hasInteracted || validateOnMount);
+const showError = $derived(shouldValidate && !!error);
+const errorId = $derived(`${id}-error`);
+const hintId = $derived(`${id}-hint`);
+const groupName = $derived(name || id);
+
+// Size styles - label only, radio sizes handled in CSS
+const sizeStyles: Record<RadioSize, { label: string }> = {
+	sm: { label: 'text-sm' },
+	md: { label: 'text-sm' },
+	lg: { label: 'text-base' }
+};
+
+function handleChange(optionValue: string) {
+	hasInteracted = true;
+	if (onchange) {
+		onchange(optionValue);
+		// Announce selection to screen readers
+		const selectedOption = options.find((opt) => opt.value === optionValue);
+		if (selectedOption) {
+			announce(`${selectedOption.label} selected`);
+		}
+	}
+}
+
+// Build aria-describedby
+const ariaDescribedBy = $derived(
+	[error && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+);
+</script>
+
+<fieldset
+	class={cn(
+		'radio-group flex flex-col gap-2',
+		disabled && 'opacity-60',
+		className
+	)}
+	aria-describedby={ariaDescribedBy}
+	data-testid={testId}
+	{disabled}
+>
+	<!-- Legend/Label -->
+	<legend
+		class={cn(
+			'flex items-center gap-1.5 font-medium text-[var(--ui-text-primary)] mb-1',
+			sizeStyles[size].label,
+			hideLabel && 'sr-only'
+		)}
+	>
+		{label}
+		{#if required}
+			<span class="text-[rgb(var(--ui-color-error))]" aria-hidden="true">*</span>
+			<span class="sr-only">(required)</span>
+		{/if}
+	</legend>
+
+	<!-- Hint text -->
+	{#if hint && !hideLabel}
+		<p id={hintId} class="text-xs text-[var(--ui-text-tertiary)] -mt-1 mb-1">
+			{hint}
+		</p>
+	{/if}
+
+	<!-- Radio options -->
+	<div
+		class={cn(
+			'flex gap-3',
+			orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap'
+		)}
+		role="radiogroup"
+		aria-required={required}
+	>
+		{#each options as option (option.value)}
+			{@const optionId = `${id}-${option.value}`}
+			{@const isSelected = value === option.value}
+			{@const isDisabled = disabled || option.disabled}
+
+			<label
+				for={optionId}
+				class={cn(
+					'radio-option',
+					`radio-${size}`,
+					isDisabled && 'radio-option-disabled'
+				)}
+			>
+				<!-- Styled radio input using appearance: none -->
+				<input
+					id={optionId}
+					type="radio"
+					name={groupName}
+					value={option.value}
+					checked={isSelected}
+					disabled={isDisabled}
+					{required}
+					aria-describedby={option.description ? `${optionId}-desc` : undefined}
+					class={cn(
+						'radio-input',
+						showError && !isSelected && 'radio-error'
+					)}
+					onchange={() => handleChange(option.value)}
+				/>
+
+				<!-- Label and description -->
+				<span class="radio-label-wrapper">
+					<span
+						class={cn(
+							'radio-label-text',
+							sizeStyles[size].label
+						)}
+					>
+						{option.label}
+					</span>
+					{#if option.description}
+						<span
+							id={`${optionId}-desc`}
+							class="radio-description"
+						>
+							{option.description}
+						</span>
+					{/if}
+				</span>
+			</label>
+		{/each}
+	</div>
+
+	<!-- Error message -->
+	{#if showError}
+		<p
+			id={errorId}
+			class="text-xs text-[rgb(var(--ui-color-error))] flex items-center gap-1 mt-1"
+			role="alert"
+		>
+			{error}
+		</p>
+	{/if}
+</fieldset>
+
+<style>
+	/* ========================================
+	   RADIO OPTION (label wrapper)
+	   ======================================== */
+	.radio-option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+		user-select: none;
+	}
+
+	/* When there's a description, align to top */
+	.radio-option:has(.radio-description) {
+		align-items: flex-start;
+	}
+
+	.radio-option:has(.radio-description) .radio-input {
+		margin-top: 0.125rem;
+	}
+
+	.radio-option-disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	/* ========================================
+	   RADIO INPUT - Modern CSS approach
+	   Uses appearance: none for full styling control
+	   ======================================== */
+	.radio-input {
+		/* Reset native appearance */
+		-webkit-appearance: none;
+		appearance: none;
+		margin: 0;
+		
+		/* Sizing - use grid for centering ::before */
+		display: grid;
+		place-content: center;
+		flex-shrink: 0;
+		
+		/* Visual styling */
+		border: 2px solid var(--ui-border-default);
+		border-radius: 50%;
+		background: var(--ui-bg-secondary);
+		cursor: pointer;
+		transition: all 0.2s ease;
+	}
+
+	/* Size variants */
+	.radio-sm .radio-input {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.radio-md .radio-input {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	.radio-lg .radio-input {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	/* Checked indicator using ::before */
+	.radio-input::before {
+		content: "";
+		border-radius: 50%;
+		transform: scale(0);
+		transition: transform 0.15s ease-in-out;
+		background-color: white;
+	}
+
+	.radio-sm .radio-input::before {
+		width: 0.5rem;
+		height: 0.5rem;
+	}
+
+	.radio-md .radio-input::before {
+		width: 0.625rem;
+		height: 0.625rem;
+	}
+
+	.radio-lg .radio-input::before {
+		width: 0.75rem;
+		height: 0.75rem;
+	}
+
+	.radio-input:checked::before {
+		transform: scale(1);
+	}
+
+	/* Checked state */
+	.radio-input:checked {
+		border-color: rgb(var(--ui-color-primary));
+		background-color: rgb(var(--ui-color-primary));
+	}
+
+	:global([data-theme='dark']) .radio-input:checked {
+		border-color: rgb(var(--ui-color-primary-light));
+		background-color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .radio-input:checked {
+			border-color: rgb(var(--ui-color-primary-light));
+			background-color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	/* Hover state */
+	.radio-input:not(:disabled):not(:checked):hover {
+		border-color: rgb(var(--ui-color-primary));
+	}
+
+	:global([data-theme='dark']) .radio-input:not(:disabled):not(:checked):hover {
+		border-color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .radio-input:not(:disabled):not(:checked):hover {
+			border-color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	/* Focus state - matches Button's 40%/50% opacity */
+	.radio-input:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	:global([data-theme='dark']) .radio-input:focus-visible {
+		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'])) .radio-input:focus-visible {
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	/* Disabled state */
+	.radio-input:disabled {
+		cursor: not-allowed;
+		background: var(--ui-bg-tertiary);
+	}
+
+	/* Error state */
+	.radio-error {
+		border-color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .radio-error {
+		border-color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .radio-error {
+			border-color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	/* ========================================
+	   LABEL TEXT
+	   ======================================== */
+	.radio-label-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.radio-label-text {
+		font-weight: 500;
+		color: var(--ui-text-primary);
+		line-height: 1.25;
+	}
+
+	.radio-description {
+		font-size: 0.75rem;
+		color: var(--ui-text-tertiary);
+	}
+</style>
+

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

@@ -0,0 +1,70 @@
+type RadioSize = 'sm' | 'md' | 'lg';
+type RadioOrientation = 'vertical' | 'horizontal';
+interface RadioOption {
+    /** Unique value for the option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional description text */
+    description?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+}
+interface Props {
+    /** Unique identifier for the radio group */
+    id?: string;
+    /** Form field name */
+    name?: string;
+    /** Group label */
+    label: string;
+    /** Radio options */
+    options: RadioOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Whether a selection is required */
+    required?: boolean;
+    /** Whether the entire group is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Hint text */
+    hint?: string;
+    /** Size of the radio buttons */
+    size?: RadioSize;
+    /** Layout orientation */
+    orientation?: RadioOrientation;
+    /** Whether to hide the group label visually */
+    hideLabel?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Change handler */
+    onchange?: (value: string) => void;
+    /** Test ID for e2e testing (Playwright, Cypress) */
+    testId?: string;
+    /** Show validation state immediately without waiting for interaction */
+    validateOnMount?: boolean;
+}
+/**
+ * RadioGroup
+ *
+ * An accessible radio button group component for selecting one option from a set.
+ * Critical for healthcare forms where mutually exclusive options are common
+ * (e.g., gender, status, priority level).
+ *
+ * @example
+ * <RadioGroup
+ *   id="priority"
+ *   label="Priority Level"
+ *   options={[
+ *     { value: 'low', label: 'Low' },
+ *     { value: 'medium', label: 'Medium' },
+ *     { value: 'high', label: 'High', description: 'Immediate attention required' }
+ *   ]}
+ *   bind:value={selectedPriority}
+ *   required
+ * />
+ */
+declare const RadioGroup: import("svelte").Component<Props, {}, "">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;
+//# sourceMappingURL=RadioGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioGroup/RadioGroup.svelte.ts"],"names":[],"mappings":"AAQC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAC;AAElD,UAAU,WAAW;IACpB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACd,4CAA4C;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yBAAyB;IACzB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AA8ID;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

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

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

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

package/dist/forms/RadioGroup/index.js

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