@synthaxai/ui 1.0.0

package/dist/forms/Checkbox/Checkbox.svelte

@@ -0,0 +1,404 @@
+<!--
+  @component Checkbox
+  
+  An accessible checkbox component with support for labels,
+  descriptions, and indeterminate state.
+  
+  @example
+  <Checkbox
+    id="consent"
+    label="I agree to the terms"
+    checked={hasAgreed}
+    onchange={(e) => hasAgreed = e.target.checked}
+  />
+  
+  @example
+  <Checkbox
+    id="newsletter"
+    label="Subscribe to newsletter"
+    description="Receive weekly updates about new features"
+    checked={subscribed}
+    onchange={(e) => subscribed = e.target.checked}
+  />
+-->
+<script lang="ts">
+	import { Check, Minus } from 'lucide-svelte';
+	import { cn } from '../../utils/cn.js';
+	import { generateId } from '../../utils/keyboard.js';
+
+	type CheckboxSize = 'sm' | 'md' | 'lg';
+
+	interface Props {
+		/** Unique identifier for the checkbox */
+		id?: string;
+		/** Form field name */
+		name?: string;
+		/** Value attribute for form submission */
+		value?: string;
+		/** Label text for the checkbox */
+		label: string;
+		/** Whether the checkbox is checked */
+		checked?: boolean;
+		/** Description text below the label */
+		description?: string;
+		/** Whether the checkbox is required */
+		required?: boolean;
+		/** Whether the checkbox is disabled */
+		disabled?: boolean;
+		/** Error message to display */
+		error?: string;
+		/** Indeterminate state (partially checked) */
+		indeterminate?: boolean;
+		/** Size of the checkbox */
+		size?: CheckboxSize;
+		/** Hide the label visually (still accessible to screen readers) */
+		hideLabel?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+		/** Change handler */
+		onchange?: (event: Event) => void;
+		/** Test ID for e2e testing (Playwright, Cypress) */
+		testId?: string;
+		/** Show validation state immediately without waiting for interaction */
+		validateOnMount?: boolean;
+	}
+
+	let {
+		id = generateId('checkbox'),
+		name,
+		value,
+		label,
+		checked = false,
+		description = '',
+		required = false,
+		disabled = false,
+		error = '',
+		indeterminate = false,
+		size = 'md',
+		hideLabel = false,
+		class: className = '',
+		onchange,
+		testId,
+		validateOnMount = false
+	}: Props = $props();
+
+	let inputElement: HTMLInputElement;
+	let hasInteracted = $state(false);
+
+	// Set indeterminate state on input element
+	$effect(() => {
+		if (inputElement) {
+			inputElement.indeterminate = indeterminate;
+		}
+	});
+
+	const showChecked = $derived(checked && !indeterminate);
+	const shouldValidate = $derived(hasInteracted || validateOnMount);
+	const showError = $derived(shouldValidate && !!error);
+	const errorId = $derived(`${id}-error`);
+	const descriptionId = $derived(`${id}-description`);
+
+	const ariaDescribedBy = $derived(
+		[showError && errorId, description && descriptionId].filter(Boolean).join(' ') || undefined
+	);
+
+	function handleChange(e: Event) {
+		hasInteracted = true;
+		onchange?.(e);
+	}
+
+	// Icon sizes based on checkbox size
+	const iconSizes: Record<CheckboxSize, number> = {
+		sm: 12,
+		md: 14,
+		lg: 16
+	};
+</script>
+
+<div class={cn('checkbox-wrapper', `checkbox-${size}`, disabled && 'checkbox-disabled', className)}>
+	<label for={id} class="checkbox-label">
+		<!-- Checkbox input (visually hidden) -->
+		<input
+			bind:this={inputElement}
+			{id}
+			{name}
+			{value}
+			type="checkbox"
+			{checked}
+			{disabled}
+			{required}
+			aria-invalid={showError}
+			aria-describedby={ariaDescribedBy}
+			class="checkbox-input"
+			data-testid={testId}
+			onchange={handleChange}
+		/>
+
+		<!-- Custom checkbox visual -->
+		<span
+			class={cn(
+				'checkbox-box',
+				(checked || indeterminate) && 'checkbox-box-checked',
+				showError && 'checkbox-box-error'
+			)}
+			aria-hidden="true"
+		>
+			{#if showChecked}
+				<Check size={iconSizes[size]} strokeWidth={3} />
+			{:else if indeterminate}
+				<Minus size={iconSizes[size]} strokeWidth={3} />
+			{/if}
+		</span>
+
+		<!-- Label and description -->
+		<span class="checkbox-content" class:sr-only={hideLabel}>
+			<span class="checkbox-text">
+				{label}
+				{#if required}
+					<span class="checkbox-required" aria-hidden="true">*</span>
+				{/if}
+			</span>
+			{#if description && !hideLabel}
+				<span id={descriptionId} class="checkbox-description">
+					{description}
+				</span>
+			{/if}
+		</span>
+	</label>
+
+	<!-- Error message -->
+	{#if showError}
+		<p id={errorId} class="checkbox-error" role="alert">
+			{error}
+		</p>
+	{/if}
+</div>
+
+<style>
+	/* ========================================
+	   BASE WRAPPER
+	   ======================================== */
+	.checkbox-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.checkbox-disabled {
+		opacity: 0.6;
+	}
+
+	/* ========================================
+	   LABEL (clickable area)
+	   ======================================== */
+	.checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+		user-select: none;
+	}
+
+	/* When there's a description, align to top */
+	.checkbox-label:has(.checkbox-description) {
+		align-items: flex-start;
+	}
+
+	.checkbox-label:has(.checkbox-description) .checkbox-box {
+		margin-top: 0.125rem;
+	}
+
+	.checkbox-disabled .checkbox-label {
+		cursor: not-allowed;
+	}
+
+	/* ========================================
+	   HIDDEN INPUT
+	   ======================================== */
+	.checkbox-input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	/* ========================================
+	   CHECKBOX BOX
+	   ======================================== */
+	.checkbox-box {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 2px solid var(--ui-border-default);
+		border-radius: 0.25rem;
+		background: var(--ui-bg-secondary);
+		transition: all 0.15s ease;
+	}
+
+	/* Size variants */
+	.checkbox-sm .checkbox-box {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.checkbox-md .checkbox-box {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	.checkbox-lg .checkbox-box {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	/* Checked state */
+	.checkbox-box-checked {
+		background: rgb(var(--ui-color-primary));
+		border-color: rgb(var(--ui-color-primary));
+		color: white;
+	}
+
+	:global([data-theme='dark']) .checkbox-box-checked {
+		background: rgb(var(--ui-color-primary-light));
+		border-color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .checkbox-box-checked {
+			background: rgb(var(--ui-color-primary-light));
+			border-color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	/* Hover state */
+	.checkbox-label:hover .checkbox-box:not(.checkbox-box-checked) {
+		border-color: rgb(var(--ui-color-primary));
+	}
+
+	:global([data-theme='dark']) .checkbox-label:hover .checkbox-box:not(.checkbox-box-checked) {
+		border-color: rgb(var(--ui-color-primary-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .checkbox-label:hover .checkbox-box:not(.checkbox-box-checked) {
+			border-color: rgb(var(--ui-color-primary-light));
+		}
+	}
+
+	/* Focus state */
+	.checkbox-input:focus-visible + .checkbox-box {
+		box-shadow: 0 0 0 3px rgb(var(--ui-color-primary) / 0.4);
+	}
+
+	:global([data-theme='dark']) .checkbox-input:focus-visible + .checkbox-box {
+		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'])) .checkbox-input:focus-visible + .checkbox-box {
+			box-shadow: 0 0 0 3px rgb(var(--ui-color-primary-light) / 0.5);
+		}
+	}
+
+	/* Error state */
+	.checkbox-box-error {
+		border-color: rgb(var(--ui-color-error));
+	}
+
+	:global([data-theme='dark']) .checkbox-box-error {
+		border-color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .checkbox-box-error {
+			border-color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	/* ========================================
+	   CONTENT (label + description)
+	   ======================================== */
+	.checkbox-content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+	}
+
+	.checkbox-text {
+		font-weight: 500;
+		color: var(--ui-text-primary);
+	}
+
+	.checkbox-sm .checkbox-text {
+		font-size: 0.875rem;
+	}
+
+	.checkbox-md .checkbox-text,
+	.checkbox-lg .checkbox-text {
+		font-size: 0.875rem;
+	}
+
+	.checkbox-lg .checkbox-text {
+		font-size: 1rem;
+	}
+
+	.checkbox-required {
+		color: rgb(var(--ui-color-error));
+		margin-left: 0.125rem;
+	}
+
+	:global([data-theme='dark']) .checkbox-required {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .checkbox-required {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	.checkbox-description {
+		font-size: 0.75rem;
+		color: var(--ui-text-tertiary);
+	}
+
+	/* ========================================
+	   ERROR MESSAGE
+	   ======================================== */
+	.checkbox-error {
+		font-size: 0.75rem;
+		color: rgb(var(--ui-color-error));
+		margin-left: 2rem;
+	}
+
+	:global([data-theme='dark']) .checkbox-error {
+		color: rgb(var(--ui-color-error-light));
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .checkbox-error {
+			color: rgb(var(--ui-color-error-light));
+		}
+	}
+
+	/* ========================================
+	   SCREEN READER ONLY
+	   ======================================== */
+	.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/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,62 @@
+type CheckboxSize = 'sm' | 'md' | 'lg';
+interface Props {
+    /** Unique identifier for the checkbox */
+    id?: string;
+    /** Form field name */
+    name?: string;
+    /** Value attribute for form submission */
+    value?: string;
+    /** Label text for the checkbox */
+    label: string;
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Description text below the label */
+    description?: string;
+    /** Whether the checkbox is required */
+    required?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Indeterminate state (partially checked) */
+    indeterminate?: boolean;
+    /** Size of the checkbox */
+    size?: CheckboxSize;
+    /** Hide the label visually (still accessible to screen readers) */
+    hideLabel?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Change handler */
+    onchange?: (event: Event) => void;
+    /** Test ID for e2e testing (Playwright, Cypress) */
+    testId?: string;
+    /** Show validation state immediately without waiting for interaction */
+    validateOnMount?: boolean;
+}
+/**
+ * Checkbox
+ *
+ * An accessible checkbox component with support for labels,
+ * descriptions, and indeterminate state.
+ *
+ * @example
+ * <Checkbox
+ *   id="consent"
+ *   label="I agree to the terms"
+ *   checked={hasAgreed}
+ *   onchange={(e) => hasAgreed = e.target.checked}
+ * />
+ *
+ * @example
+ * <Checkbox
+ *   id="newsletter"
+ *   label="Subscribe to newsletter"
+ *   description="Receive weekly updates about new features"
+ *   checked={subscribed}
+ *   onchange={(e) => subscribed = e.target.checked}
+ * />
+ */
+declare const Checkbox: import("svelte").Component<Props, {}, "">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAQC,KAAK,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEvC,UAAU,KAAK;IACd,yCAAyC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B;AA2GF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

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

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

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

package/dist/forms/Checkbox/index.js

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