@aspect-ops/exon-ui 0.0.1

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

@@ -0,0 +1,17 @@
+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;
+}
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

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

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

package/dist/components/Select/index.js

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

package/dist/components/Sidebar/Sidebar.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { SidebarProps } from '../../types/index.js';
+
+	interface Props extends SidebarProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { collapsed = $bindable(false), class: className = '', children }: Props = $props();
+</script>
+
+<aside
+	class="sidebar {className}"
+	class:sidebar--collapsed={collapsed}
+	aria-label="Sidebar navigation"
+>
+	<nav class="sidebar__nav">
+		{#if children}
+			{@render children()}
+		{/if}
+	</nav>
+</aside>
+
+<style>
+	.sidebar {
+		display: flex;
+		flex-direction: column;
+		width: var(--sidebar-width, 16rem);
+		min-height: 100%;
+		background: var(--color-bg, #ffffff);
+		border-right: 1px solid var(--color-border, #e5e7eb);
+		font-family: inherit;
+		transition: width var(--transition-normal, 200ms ease);
+		overflow: hidden;
+	}
+
+	.sidebar--collapsed {
+		width: var(--sidebar-collapsed-width, 4rem);
+	}
+
+	.sidebar__nav {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-sm, 0.5rem);
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { SidebarProps } from '../../types/index.js';
+interface Props extends SidebarProps {
+    children?: import('svelte').Snippet;
+}
+declare const Sidebar: import("svelte").Component<Props, {}, "collapsed">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/Sidebar/SidebarGroup.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import type { SidebarGroupProps } from '../../types/index.js';
+
+	interface Props extends SidebarGroupProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		label,
+		collapsible = false,
+		defaultCollapsed = false,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	let collapsed = $state<boolean>();
+	$effect(() => {
+		collapsed = defaultCollapsed;
+	});
+
+	function toggleCollapse() {
+		if (collapsible) {
+			collapsed = !collapsed;
+		}
+	}
+</script>
+
+<div class="sidebar-group {className}">
+	{#if label}
+		{#if collapsible}
+			<button
+				type="button"
+				class="sidebar-group__header sidebar-group__header--collapsible"
+				onclick={toggleCollapse}
+				aria-expanded={!collapsed}
+			>
+				<span class="sidebar-group__label">{label}</span>
+				<span class="sidebar-group__chevron" class:sidebar-group__chevron--collapsed={collapsed}>
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 12 12"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+					>
+						<path d="M3 4.5L6 7.5L9 4.5" />
+					</svg>
+				</span>
+			</button>
+		{:else}
+			<div class="sidebar-group__header">
+				<span class="sidebar-group__label">{label}</span>
+			</div>
+		{/if}
+	{/if}
+
+	<div class="sidebar-group__content" class:sidebar-group__content--collapsed={collapsed}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.sidebar-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2xs, 0.125rem);
+	}
+
+	:global(.sidebar-group + .sidebar-group) {
+		margin-top: var(--space-md, 1rem);
+	}
+
+	.sidebar-group__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-xs, 0.25rem) var(--space-md, 1rem);
+	}
+
+	.sidebar-group__header--collapsible {
+		width: 100%;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		border-radius: var(--radius-sm, 0.25rem);
+		transition: background-color var(--transition-fast, 150ms ease);
+	}
+
+	.sidebar-group__header--collapsible:hover {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.sidebar-group__header--collapsible:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	.sidebar-group__label {
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	.sidebar-group__chevron {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-text-muted, #6b7280);
+		transition: transform var(--transition-fast, 150ms ease);
+	}
+
+	.sidebar-group__chevron--collapsed {
+		transform: rotate(-90deg);
+	}
+
+	.sidebar-group__content {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-2xs, 0.125rem);
+		overflow: hidden;
+		transition: max-height var(--transition-normal, 200ms ease);
+	}
+
+	.sidebar-group__content--collapsed {
+		max-height: 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	/* Hide group labels when sidebar is collapsed */
+	:global(.sidebar--collapsed) .sidebar-group__header {
+		display: none;
+	}
+</style>

package/dist/components/Sidebar/SidebarGroup.svelte.d.ts

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

package/dist/components/Sidebar/SidebarItem.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import type { SidebarItemProps } from '../../types/index.js';
+
+	interface Props extends SidebarItemProps {
+		onclick?: () => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		label,
+		href,
+		icon,
+		active = false,
+		badge,
+		indentLevel = 0,
+		class: className = '',
+		onclick,
+		children
+	}: Props = $props();
+
+	const paddingLeft = $derived(`calc(var(--space-md, 1rem) + ${indentLevel * 1}rem)`);
+</script>
+
+{#if href}
+	<a
+		{href}
+		class="sidebar-item {className}"
+		class:sidebar-item--active={active}
+		style:padding-left={paddingLeft}
+		aria-current={active ? 'page' : undefined}
+	>
+		{#if icon}
+			<span class="sidebar-item__icon">{icon}</span>
+		{/if}
+		<span class="sidebar-item__label">
+			{#if children}
+				{@render children()}
+			{:else}
+				{label}
+			{/if}
+		</span>
+		{#if badge !== undefined && badge > 0}
+			<span class="sidebar-item__badge">{badge > 99 ? '99+' : badge}</span>
+		{/if}
+	</a>
+{:else}
+	<button
+		type="button"
+		class="sidebar-item {className}"
+		class:sidebar-item--active={active}
+		style:padding-left={paddingLeft}
+		aria-current={active ? 'page' : undefined}
+		{onclick}
+	>
+		{#if icon}
+			<span class="sidebar-item__icon">{icon}</span>
+		{/if}
+		<span class="sidebar-item__label">
+			{#if children}
+				{@render children()}
+			{:else}
+				{label}
+			{/if}
+		</span>
+		{#if badge !== undefined && badge > 0}
+			<span class="sidebar-item__badge">{badge > 99 ? '99+' : badge}</span>
+		{/if}
+	</button>
+{/if}
+
+<style>
+	.sidebar-item {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		/* Touch target minimum (F20) */
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		background: transparent;
+		border: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		color: var(--color-text-muted, #6b7280);
+		font-size: var(--text-sm, 0.875rem);
+		text-decoration: none;
+		text-align: left;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	.sidebar-item:hover {
+		color: var(--color-text, #1f2937);
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.sidebar-item:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	.sidebar-item--active {
+		color: var(--color-primary, #3b82f6);
+		background: var(--color-primary-bg, #eff6ff);
+	}
+
+	.sidebar-item--active:hover {
+		color: var(--color-primary, #3b82f6);
+		background: var(--color-primary-bg, #eff6ff);
+	}
+
+	.sidebar-item__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 1.5rem;
+		font-size: 1.25rem;
+	}
+
+	.sidebar-item__label {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/* Hide label when sidebar is collapsed */
+	:global(.sidebar--collapsed) .sidebar-item__label {
+		display: none;
+	}
+
+	:global(.sidebar--collapsed) .sidebar-item__badge {
+		display: none;
+	}
+
+	.sidebar-item__badge {
+		flex-shrink: 0;
+		min-width: 1.25rem;
+		height: 1.25rem;
+		padding: 0 var(--space-2xs, 0.125rem);
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: 600;
+		line-height: 1.25rem;
+		text-align: center;
+		border-radius: var(--radius-full, 9999px);
+	}
+</style>

package/dist/components/Sidebar/SidebarItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SidebarItemProps } from '../../types/index.js';
+interface Props extends SidebarItemProps {
+    onclick?: () => void;
+    children?: import('svelte').Snippet;
+}
+declare const SidebarItem: import("svelte").Component<Props, {}, "">;
+type SidebarItem = ReturnType<typeof SidebarItem>;
+export default SidebarItem;

package/dist/components/Switch/Switch.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from 'bits-ui';
+
+	interface Props {
+		checked?: boolean;
+		name?: string;
+		id?: string;
+		disabled?: boolean;
+		required?: boolean;
+		class?: string;
+		onchange?: (checked: boolean) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		checked = $bindable(false),
+		name,
+		id,
+		disabled = false,
+		required = false,
+		class: className = '',
+		onchange,
+		children
+	}: Props = $props();
+
+	function handleCheckedChange(newChecked: boolean) {
+		checked = newChecked;
+		onchange?.(newChecked);
+	}
+</script>
+
+<div class="switch-wrapper {className}">
+	<SwitchPrimitive.Root
+		class="switch {disabled ? 'switch--disabled' : ''}"
+		{checked}
+		{name}
+		{id}
+		{disabled}
+		{required}
+		aria-required={required}
+		onCheckedChange={handleCheckedChange}
+	>
+		<SwitchPrimitive.Thumb class="switch__thumb" />
+	</SwitchPrimitive.Root>
+
+	{#if children}
+		<label for={id} class="switch__label" class:switch__label--disabled={disabled}>
+			{@render children()}
+		</label>
+	{/if}
+</div>
+
+<style>
+	.switch-wrapper {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	:global(.switch) {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		width: 2.75rem;
+		height: 1.5rem;
+		min-width: 2.75rem;
+		min-height: 1.5rem;
+		padding: 2px;
+		border: none;
+		border-radius: 9999px;
+		background: var(--color-bg-muted, #e5e7eb);
+		cursor: pointer;
+		transition: background var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:global(.switch:focus-visible) {
+		outline: none;
+		box-shadow: 0 0 0 3px var(--color-primary-alpha, rgba(59, 130, 246, 0.1));
+	}
+
+	:global(.switch[data-state='checked']) {
+		background: var(--color-primary, #3b82f6);
+	}
+
+	:global(.switch--disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	:global(.switch__thumb) {
+		display: block;
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 50%;
+		background: var(--color-bg, #ffffff);
+		box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.1));
+		transition: transform var(--transition-fast, 150ms ease);
+	}
+
+	:global(.switch[data-state='checked'] .switch__thumb) {
+		transform: translateX(1.25rem);
+	}
+
+	.switch__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;
+	}
+
+	.switch__label--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>

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

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

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

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

package/dist/components/Switch/index.js

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

package/dist/components/Tabs/TabContent.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import type { TabContentProps } from '../../types/index.js';
+	import type { Action } from 'svelte/action';
+
+	interface Props extends TabContentProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { value, lazy = false, class: className = '', children }: Props = $props();
+
+	// Track if this content has ever been rendered (for lazy loading)
+	let hasRendered = $state(false);
+
+	// Action to watch for when content becomes active
+	const watchActive: Action<HTMLElement> = (node) => {
+		if (!lazy || hasRendered) return;
+
+		// Find the TabsPrimitive.Content child element
+		const contentElement = node.querySelector('[data-state]');
+		if (!contentElement) return;
+
+		// Check initial state
+		if (contentElement.getAttribute('data-state') === 'active') {
+			hasRendered = true;
+			return;
+		}
+
+		// Watch for state changes
+		const observer = new MutationObserver((mutations) => {
+			for (const mutation of mutations) {
+				if (
+					mutation.type === 'attributes' &&
+					mutation.attributeName === 'data-state' &&
+					contentElement.getAttribute('data-state') === 'active'
+				) {
+					hasRendered = true;
+					observer.disconnect();
+					break;
+				}
+			}
+		});
+
+		observer.observe(contentElement, {
+			attributes: true,
+			attributeFilter: ['data-state']
+		});
+
+		return {
+			destroy() {
+				observer.disconnect();
+			}
+		};
+	};
+</script>
+
+<div use:watchActive class="tab-content-wrapper">
+	<TabsPrimitive.Content {value} class="tab-content {className}">
+		{#if !lazy || hasRendered}
+			{#if children}
+				{@render children()}
+			{/if}
+		{/if}
+	</TabsPrimitive.Content>
+</div>
+
+<style>
+	.tab-content-wrapper {
+		display: contents;
+	}
+
+	:global(.tab-content) {
+		font-family: inherit;
+		padding: var(--space-md, 1rem);
+		animation: fadeIn var(--transition-normal, 200ms ease);
+	}
+
+	:global(.tab-content:focus-visible) {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/components/Tabs/TabContent.svelte.d.ts

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

package/dist/components/Tabs/TabList.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import type { TabListProps } from '../../types/index.js';
+
+	interface Props extends TabListProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { scrollable = false, class: className = '', children }: Props = $props();
+
+	const scrollableClass = $derived(scrollable ? 'tab-list--scrollable' : '');
+</script>
+
+<TabsPrimitive.List class="tab-list {scrollableClass} {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</TabsPrimitive.List>
+
+<style>
+	:global(.tab-list) {
+		font-family: inherit;
+		display: flex;
+		gap: var(--space-xs, 0.25rem);
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	:global(.tab-list[data-orientation='vertical']) {
+		flex-direction: column;
+		border-bottom: none;
+		border-right: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	/* Scrollable styles - only applies to horizontal orientation */
+	:global(.tab-list--scrollable[data-orientation='horizontal']) {
+		overflow-x: auto;
+		overflow-y: hidden;
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* IE/Edge */
+	}
+
+	:global(.tab-list--scrollable[data-orientation='horizontal']::-webkit-scrollbar) {
+		display: none; /* Chrome/Safari */
+	}
+</style>

package/dist/components/Tabs/TabList.svelte.d.ts

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