@aspect-ops/exon-ui 0.0.1

package/dist/components/Button/Button.svelte

@@ -0,0 +1,209 @@
+<script lang="ts">
+	import type { ButtonVariant, ButtonSize } from '../../types/index.js';
+
+	interface Props {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+		disabled?: boolean;
+		loading?: boolean;
+		fullWidth?: boolean;
+		class?: string;
+		onclick?: (e: MouseEvent) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		disabled = false,
+		loading = false,
+		fullWidth = false,
+		class: className = '',
+		onclick,
+		children
+	}: Props = $props();
+
+	const isDisabled = $derived(disabled || loading);
+</script>
+
+<button
+	class="btn btn--{variant} btn--{size} {fullWidth ? 'btn--full' : ''} {className}"
+	disabled={isDisabled}
+	aria-disabled={isDisabled}
+	aria-busy={loading}
+	{onclick}
+>
+	{#if loading}
+		<span class="btn__spinner" aria-hidden="true"></span>
+	{/if}
+	<span class="btn__content" class:btn__content--hidden={loading}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
+</button>
+
+<style>
+	.btn {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm, 0.5rem);
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border: 1px solid transparent;
+		border-radius: var(--radius-md, 0.375rem);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 600;
+		line-height: 1;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.btn:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* Sizes */
+	.btn--sm {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	.btn--md {
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.btn--lg {
+		min-height: 3.25rem;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		font-size: var(--text-base, 1rem);
+	}
+
+	/* Primary variant */
+	.btn--primary {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	.btn--primary:hover:not(:disabled) {
+		background: var(--color-primary-hover, #2563eb);
+		border-color: var(--color-primary-hover, #2563eb);
+	}
+
+	.btn--primary:active:not(:disabled) {
+		background: var(--color-primary-active, #1d4ed8);
+		border-color: var(--color-primary-active, #1d4ed8);
+	}
+
+	/* Secondary variant */
+	.btn--secondary {
+		background: var(--color-secondary, #6b7280);
+		color: var(--color-text-inverse, #ffffff);
+		border-color: var(--color-secondary, #6b7280);
+	}
+
+	.btn--secondary:hover:not(:disabled) {
+		background: var(--color-secondary-hover, #4b5563);
+		border-color: var(--color-secondary-hover, #4b5563);
+	}
+
+	.btn--secondary:active:not(:disabled) {
+		background: var(--color-secondary-active, #374151);
+		border-color: var(--color-secondary-active, #374151);
+	}
+
+	/* Outline variant */
+	.btn--outline {
+		background: transparent;
+		color: var(--color-text, #1f2937);
+		border-color: var(--color-border, #e5e7eb);
+	}
+
+	.btn--outline:hover:not(:disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+		border-color: var(--color-border-hover, #d1d5db);
+	}
+
+	.btn--outline:active:not(:disabled) {
+		background: var(--color-border, #e5e7eb);
+	}
+
+	/* Ghost variant */
+	.btn--ghost {
+		background: transparent;
+		color: var(--color-text, #1f2937);
+		border-color: transparent;
+	}
+
+	.btn--ghost:hover:not(:disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.btn--ghost:active:not(:disabled) {
+		background: var(--color-border, #e5e7eb);
+	}
+
+	/* Destructive variant */
+	.btn--destructive {
+		background: var(--color-destructive, #ef4444);
+		color: var(--color-text-inverse, #ffffff);
+		border-color: var(--color-destructive, #ef4444);
+	}
+
+	.btn--destructive:hover:not(:disabled) {
+		background: var(--color-destructive-hover, #dc2626);
+		border-color: var(--color-destructive-hover, #dc2626);
+	}
+
+	.btn--destructive:active:not(:disabled) {
+		background: var(--color-destructive-active, #b91c1c);
+		border-color: var(--color-destructive-active, #b91c1c);
+	}
+
+	/* Full width */
+	.btn--full {
+		width: 100%;
+	}
+
+	/* Loading spinner */
+	.btn__spinner {
+		position: absolute;
+		width: 1em;
+		height: 1em;
+		border: 2px solid currentColor;
+		border-right-color: transparent;
+		border-radius: 50%;
+		animation: spin 0.6s linear infinite;
+	}
+
+	.btn__content {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	.btn__content--hidden {
+		visibility: hidden;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/components/Button/Button.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonVariant, ButtonSize } from '../../types/index.js';
+interface Props {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.svelte';
+export type { ButtonProps, ButtonVariant, ButtonSize } from '../../types/index.js';

package/dist/components/Button/index.js

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

package/dist/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+
+	interface Props {
+		checked?: boolean;
+		indeterminate?: boolean;
+		value?: string;
+		name?: string;
+		id?: string;
+		disabled?: boolean;
+		required?: boolean;
+		error?: boolean;
+		class?: string;
+		onchange?: (checked: boolean) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		checked = $bindable(false),
+		indeterminate = false,
+		value,
+		name,
+		id,
+		disabled = false,
+		required = false,
+		error = false,
+		class: className = '',
+		onchange,
+		children
+	}: Props = $props();
+
+	function handleCheckedChange(newChecked: boolean) {
+		checked = newChecked;
+		onchange?.(newChecked);
+	}
+</script>
+
+<div class="checkbox-wrapper {className}">
+	<CheckboxPrimitive.Root
+		class="checkbox {error ? 'checkbox--error' : ''} {disabled ? 'checkbox--disabled' : ''}"
+		{checked}
+		{name}
+		{value}
+		{disabled}
+		{required}
+		{id}
+		aria-invalid={error}
+		aria-required={required}
+		onCheckedChange={handleCheckedChange}
+	>
+		{#snippet children({ checked: isChecked })}
+			<span class="checkbox__indicator">
+				{#if indeterminate}
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path d="M2.5 6H9.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+					</svg>
+				{:else if isChecked}
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M2.5 6L5 8.5L9.5 3.5"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
+				{/if}
+			</span>
+		{/snippet}
+	</CheckboxPrimitive.Root>
+
+	{#if children}
+		<label for={id} class="checkbox__label" class:checkbox__label--disabled={disabled}>
+			{@render children()}
+		</label>
+	{/if}
+</div>
+
+<style>
+	.checkbox-wrapper {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	:global(.checkbox) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.25rem;
+		height: 1.25rem;
+		min-width: 1.25rem;
+		min-height: 1.25rem;
+		border: 2px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-sm, 0.25rem);
+		background: var(--color-bg, #ffffff);
+		cursor: pointer;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			background var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:global(.checkbox:focus-visible) {
+		outline: none;
+		border-color: var(--color-primary, #3b82f6);
+		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+	}
+
+	:global(.checkbox[data-state='checked']),
+	:global(.checkbox[data-state='indeterminate']) {
+		background: var(--color-primary, #3b82f6);
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	:global(.checkbox--disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	:global(.checkbox--error) {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	:global(.checkbox--error[data-state='checked']),
+	:global(.checkbox--error[data-state='indeterminate']) {
+		background: var(--color-error, #ef4444);
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.checkbox__indicator {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.checkbox__label {
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		color: var(--color-text, #1f2937);
+		cursor: pointer;
+		user-select: none;
+		min-height: var(--touch-target-min, 44px);
+		display: flex;
+		align-items: center;
+	}
+
+	.checkbox__label--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    checked?: boolean;
+    indeterminate?: boolean;
+    value?: string;
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    class?: string;
+    onchange?: (checked: boolean) => void;
+    children?: import('svelte').Snippet;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/Checkbox/CheckboxGroup.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	interface Props {
+		values?: string[];
+		name?: string;
+		disabled?: boolean;
+		error?: boolean;
+		class?: string;
+		onchange?: (values: string[]) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		values = $bindable([]),
+		name,
+		disabled = false,
+		error = false,
+		class: className = '',
+		onchange,
+		children
+	}: Props = $props();
+
+	function handleCheckboxChange(value: string, checked: boolean | 'indeterminate') {
+		if (checked === true) {
+			values = [...values, value];
+		} else {
+			values = values.filter((v) => v !== value);
+		}
+		onchange?.(values);
+	}
+</script>
+
+<div
+	class="checkbox-group {error ? 'checkbox-group--error' : ''} {disabled
+		? 'checkbox-group--disabled'
+		: ''} {className}"
+	role="group"
+	aria-disabled={disabled}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.checkbox-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	.checkbox-group--disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+</style>

package/dist/components/Checkbox/CheckboxGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    values?: string[];
+    name?: string;
+    disabled?: boolean;
+    error?: boolean;
+    class?: string;
+    onchange?: (values: string[]) => void;
+    children?: import('svelte').Snippet;
+}
+declare const CheckboxGroup: import("svelte").Component<Props, {}, "values">;
+type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
+export default CheckboxGroup;

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

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

package/dist/components/Checkbox/index.js

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

package/dist/components/FormField/FormField.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	interface Props {
+		label?: string;
+		htmlFor?: string;
+		helperText?: string;
+		error?: string;
+		required?: boolean;
+		disabled?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		label,
+		htmlFor,
+		helperText,
+		error,
+		required = false,
+		disabled = false,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	const hasError = $derived(!!error);
+	const describedById = $derived(htmlFor ? `${htmlFor}-description` : undefined);
+	const showDescription = $derived(hasError ? error : helperText);
+</script>
+
+<div class="form-field {className}" class:form-field--disabled={disabled}>
+	<label for={htmlFor} class="form-field__label">
+		{label}
+		{#if required}
+			<span class="form-field__required" aria-label="required">*</span>
+		{/if}
+	</label>
+
+	<div class="form-field__input">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if showDescription}
+		<div
+			id={describedById}
+			class="form-field__description"
+			class:form-field__description--error={hasError}
+			role={hasError ? 'alert' : undefined}
+			aria-live={hasError ? 'polite' : undefined}
+		>
+			{showDescription}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.form-field {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs, 0.25rem);
+		width: 100%;
+	}
+
+	.form-field--disabled {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+
+	.form-field__label {
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 600;
+		color: var(--color-text, #1f2937);
+		line-height: 1.5;
+		min-height: var(--touch-target-min, 44px);
+	}
+
+	.form-field__required {
+		color: var(--color-destructive, #ef4444);
+		font-weight: 700;
+	}
+
+	.form-field__input {
+		width: 100%;
+	}
+
+	.form-field__description {
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	.form-field__description--error {
+		color: var(--color-destructive, #ef4444);
+		font-weight: 500;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    label?: string;
+    htmlFor?: string;
+    helperText?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

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

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

package/dist/components/FormField/index.js

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

package/dist/components/Icon/Icon.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { IconSize } from '../../types/index.js';
+
+	interface Props {
+		name: string;
+		size?: IconSize;
+		class?: string;
+		'aria-label'?: string;
+		'aria-hidden'?: boolean;
+	}
+
+	let {
+		name,
+		size = 'md',
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-hidden': ariaHidden = !ariaLabel
+	}: Props = $props();
+
+	// Size map aligned with typography scale
+	const sizeMap: Record<IconSize, string> = {
+		xs: '0.75rem',
+		sm: '1rem',
+		md: '1.25rem',
+		lg: '1.5rem',
+		xl: '2rem'
+	};
+</script>
+
+<svg
+	class="icon icon--{size} {className}"
+	style="--icon-size: {sizeMap[size]}"
+	aria-label={ariaLabel}
+	aria-hidden={ariaHidden}
+	role={ariaLabel ? 'img' : undefined}
+>
+	<use href="#{name}" />
+</svg>
+
+<style>
+	.icon {
+		width: var(--icon-size);
+		height: var(--icon-size);
+		fill: currentColor;
+		flex-shrink: 0;
+	}
+</style>

package/dist/components/Icon/Icon.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { IconSize } from '../../types/index.js';
+interface Props {
+    name: string;
+    size?: IconSize;
+    class?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Icon } from './Icon.svelte';
+export type { IconProps, IconSize } from '../../types/index.js';

package/dist/components/Icon/index.js

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