@aspect-ops/exon-ui 0.0.1

package/dist/components/Navbar/Navbar.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+	import type { NavbarProps } from '../../types/index.js';
+
+	interface Props extends NavbarProps {
+		logo?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+		mobileMenu?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', logo, actions, mobileMenu, children }: Props = $props();
+
+	let mobileMenuOpen = $state(false);
+
+	function toggleMobileMenu() {
+		mobileMenuOpen = !mobileMenuOpen;
+	}
+
+	function closeMobileMenu() {
+		mobileMenuOpen = false;
+	}
+</script>
+
+<header class="navbar {className}">
+	<div class="navbar__container">
+		{#if logo}
+			<div class="navbar__logo">
+				{@render logo()}
+			</div>
+		{/if}
+
+		<nav class="navbar__nav" aria-label="Main navigation">
+			{#if children}
+				{@render children()}
+			{/if}
+		</nav>
+
+		{#if actions}
+			<div class="navbar__actions">
+				{@render actions()}
+			</div>
+		{/if}
+
+		<button
+			type="button"
+			class="navbar__hamburger"
+			onclick={toggleMobileMenu}
+			aria-expanded={mobileMenuOpen}
+			aria-controls="navbar-mobile-menu"
+			aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
+		>
+			<span class="navbar__hamburger-icon" class:navbar__hamburger-icon--open={mobileMenuOpen}>
+				<span></span>
+				<span></span>
+				<span></span>
+			</span>
+		</button>
+	</div>
+
+	{#if mobileMenuOpen}
+		<div
+			id="navbar-mobile-menu"
+			class="navbar__mobile-menu"
+			class:navbar__mobile-menu--open={mobileMenuOpen}
+		>
+			{#if mobileMenu}
+				{@render mobileMenu()}
+			{:else if children}
+				{@render children()}
+			{/if}
+		</div>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			class="navbar__overlay"
+			role="button"
+			tabindex="-1"
+			aria-label="Close menu"
+			onclick={closeMobileMenu}
+		></div>
+	{/if}
+</header>
+
+<style>
+	.navbar {
+		position: sticky;
+		top: 0;
+		z-index: 40;
+		background: var(--color-bg, #ffffff);
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+		font-family: inherit;
+	}
+
+	.navbar__container {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-md, 1rem);
+		max-width: var(--max-width, 80rem);
+		margin: 0 auto;
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+	}
+
+	.navbar__logo {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.navbar__nav {
+		display: none;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	.navbar__actions {
+		display: none;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	.navbar__hamburger {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		/* Touch target minimum (F20) */
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.navbar__hamburger:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.navbar__hamburger-icon {
+		position: relative;
+		width: 1.5rem;
+		height: 1.25rem;
+	}
+
+	.navbar__hamburger-icon span {
+		position: absolute;
+		left: 0;
+		width: 100%;
+		height: 2px;
+		background: var(--color-text, #1f2937);
+		border-radius: var(--radius-full, 9999px);
+		transition: all var(--transition-fast, 150ms ease);
+	}
+
+	.navbar__hamburger-icon span:nth-child(1) {
+		top: 0;
+	}
+
+	.navbar__hamburger-icon span:nth-child(2) {
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.navbar__hamburger-icon span:nth-child(3) {
+		bottom: 0;
+	}
+
+	.navbar__hamburger-icon--open span:nth-child(1) {
+		top: 50%;
+		transform: translateY(-50%) rotate(45deg);
+	}
+
+	.navbar__hamburger-icon--open span:nth-child(2) {
+		opacity: 0;
+	}
+
+	.navbar__hamburger-icon--open span:nth-child(3) {
+		bottom: 50%;
+		transform: translateY(50%) rotate(-45deg);
+	}
+
+	.navbar__mobile-menu {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		width: min(80vw, 20rem);
+		background: var(--color-bg, #ffffff);
+		border-left: 1px solid var(--color-border, #e5e7eb);
+		padding: var(--space-lg, 1.5rem);
+		overflow-y: auto;
+		z-index: 51;
+		animation: slide-in 200ms ease-out;
+	}
+
+	.navbar__overlay {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.4);
+		z-index: 50;
+		animation: fade-in 200ms ease-out;
+	}
+
+	@keyframes slide-in {
+		from {
+			transform: translateX(100%);
+		}
+		to {
+			transform: translateX(0);
+		}
+	}
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Desktop breakpoint (F10) */
+	@media (min-width: 768px) {
+		.navbar__nav {
+			display: flex;
+		}
+
+		.navbar__actions {
+			display: flex;
+		}
+
+		.navbar__hamburger {
+			display: none;
+		}
+
+		.navbar__mobile-menu,
+		.navbar__overlay {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { NavbarProps } from '../../types/index.js';
+interface Props extends NavbarProps {
+    logo?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+    mobileMenu?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+}
+declare const Navbar: import("svelte").Component<Props, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/dist/components/Radio/Radio.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { RadioGroup as RadioPrimitive } from 'bits-ui';
+
+	interface Props {
+		value: string;
+		id?: string;
+		disabled?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { value, id, disabled = false, class: className = '', children }: Props = $props();
+</script>
+
+<div class="radio-wrapper {className}">
+	<RadioPrimitive.Item class="radio {disabled ? 'radio--disabled' : ''}" {value} {id} {disabled}>
+		{#snippet children({ checked })}
+			{#if checked}
+				<span class="radio__indicator"></span>
+			{/if}
+		{/snippet}
+	</RadioPrimitive.Item>
+
+	{#if children}
+		<label for={id} class="radio__label" class:radio__label--disabled={disabled}>
+			{@render children()}
+		</label>
+	{/if}
+</div>
+
+<style>
+	.radio-wrapper {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	:global(.radio) {
+		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: 50%;
+		background: var(--color-bg, #ffffff);
+		cursor: pointer;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:global(.radio: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(.radio[data-state='checked']) {
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	:global(.radio--disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.radio__indicator {
+		width: 0.625rem;
+		height: 0.625rem;
+		border-radius: 50%;
+		background: var(--color-primary, #3b82f6);
+	}
+
+	.radio__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;
+	}
+
+	.radio__label--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    value: string;
+    id?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Radio: import("svelte").Component<Props, {}, "">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/Radio/RadioGroup.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { RadioGroup as RadioPrimitive } from 'bits-ui';
+
+	interface Props {
+		value?: string;
+		name?: string;
+		disabled?: boolean;
+		required?: boolean;
+		error?: boolean;
+		orientation?: 'horizontal' | 'vertical';
+		class?: string;
+		onchange?: (value: string) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		value = $bindable(''),
+		name,
+		disabled = false,
+		required = false,
+		error = false,
+		orientation = 'vertical',
+		class: className = '',
+		onchange,
+		children
+	}: Props = $props();
+
+	function handleValueChange(newValue: string | undefined) {
+		if (newValue !== undefined) {
+			value = newValue;
+			onchange?.(newValue);
+		}
+	}
+</script>
+
+<RadioPrimitive.Root
+	class="radio-group radio-group--{orientation} {error ? 'radio-group--error' : ''} {disabled
+		? 'radio-group--disabled'
+		: ''} {className}"
+	{name}
+	{value}
+	{disabled}
+	{required}
+	aria-invalid={error}
+	aria-required={required}
+	onValueChange={handleValueChange}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</RadioPrimitive.Root>
+
+<style>
+	:global(.radio-group) {
+		display: flex;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	:global(.radio-group--vertical) {
+		flex-direction: column;
+	}
+
+	:global(.radio-group--horizontal) {
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	:global(.radio-group--disabled) {
+		opacity: 0.5;
+		pointer-events: none;
+	}
+</style>

package/dist/components/Radio/RadioGroup.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    value?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    onchange?: (value: string) => void;
+    children?: import('svelte').Snippet;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

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

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

package/dist/components/Radio/index.js

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

package/dist/components/Select/Select.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from 'bits-ui';
+	import type { InputSize, SelectOption } from '../../types/index.js';
+
+	interface Props {
+		value?: string;
+		options: SelectOption[];
+		placeholder?: string;
+		name?: string;
+		id?: string;
+		size?: InputSize;
+		disabled?: boolean;
+		required?: boolean;
+		error?: boolean;
+		class?: string;
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		options,
+		placeholder = 'Select an option',
+		name,
+		id,
+		size = 'md',
+		disabled = false,
+		required = false,
+		error = false,
+		class: className = '',
+		onchange
+	}: Props = $props();
+
+	const selectedLabel = $derived(options.find((o) => o.value === value)?.label ?? '');
+
+	function handleValueChange(newValue: string | undefined) {
+		if (newValue !== undefined) {
+			value = newValue;
+			onchange?.(newValue);
+		}
+	}
+</script>
+
+<SelectPrimitive.Root
+	type="single"
+	{name}
+	{disabled}
+	{required}
+	{value}
+	onValueChange={handleValueChange}
+>
+	<SelectPrimitive.Trigger
+		class="select select--{size} {error ? 'select--error' : ''} {disabled
+			? 'select--disabled'
+			: ''} {className}"
+		{id}
+		aria-invalid={error}
+		aria-required={required}
+	>
+		<span class="select__value" class:select__value--placeholder={!value}>
+			{selectedLabel || placeholder}
+		</span>
+		<span class="select__icon" aria-hidden="true">
+			<svg
+				width="16"
+				height="16"
+				viewBox="0 0 16 16"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M4 6L8 10L12 6"
+					stroke="currentColor"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</span>
+	</SelectPrimitive.Trigger>
+
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content class="select__content" sideOffset={4}>
+			<SelectPrimitive.Viewport class="select__viewport">
+				{#each options as option (option.value)}
+					<SelectPrimitive.Item
+						class="select__item"
+						value={option.value}
+						disabled={option.disabled}
+					>
+						{#snippet children({ selected })}
+							<span class="select__item-text">{option.label}</span>
+							{#if selected}
+								<span class="select__item-indicator">
+									<svg
+										width="16"
+										height="16"
+										viewBox="0 0 16 16"
+										fill="none"
+										xmlns="http://www.w3.org/2000/svg"
+									>
+										<path
+											d="M13.5 4.5L6.5 11.5L3 8"
+											stroke="currentColor"
+											stroke-width="1.5"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+										/>
+									</svg>
+								</span>
+							{/if}
+						{/snippet}
+					</SelectPrimitive.Item>
+				{/each}
+			</SelectPrimitive.Viewport>
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
+</SelectPrimitive.Root>
+
+<style>
+	:global(.select) {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.5;
+		cursor: pointer;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:global(.select:focus) {
+		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(.select--disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	:global(.select--error) {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	:global(.select--error:focus) {
+		border-color: var(--color-error, #ef4444);
+		box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(239, 68, 68, 0.1));
+	}
+
+	/* Sizes */
+	:global(.select--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);
+	}
+
+	:global(.select--lg) {
+		min-height: 3.25rem;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		font-size: var(--text-base, 1rem);
+	}
+
+	.select__value {
+		flex: 1;
+		text-align: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.select__value--placeholder {
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	.select__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-text-muted, #6b7280);
+		flex-shrink: 0;
+		margin-left: var(--space-sm, 0.5rem);
+	}
+
+	:global(.select__content) {
+		z-index: 50;
+		min-width: 8rem;
+		overflow: hidden;
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg, #ffffff);
+		box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+	}
+
+	:global(.select__viewport) {
+		padding: var(--space-xs, 0.25rem);
+	}
+
+	:global(.select__item) {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.375rem 0.5rem;
+		border-radius: var(--radius-sm, 0.25rem);
+		font-size: var(--text-sm, 0.875rem);
+		line-height: 1.25;
+		color: var(--color-text, #1f2937);
+		cursor: pointer;
+		outline: none;
+		transition: background var(--transition-fast, 150ms ease);
+	}
+
+	:global(.select__item:hover),
+	:global(.select__item[data-highlighted]) {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	:global(.select__item[data-selected]) {
+		background: var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+		color: var(--color-primary, #3b82f6);
+	}
+
+	:global(.select__item[data-disabled]) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.select__item-text {
+		flex: 1;
+	}
+
+	.select__item-indicator {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-primary, #3b82f6);
+		margin-left: var(--space-sm, 0.5rem);
+	}
+</style>