@aspect-ops/exon-ui 0.0.1 → 0.0.3

package/dist/components/Grid/Grid.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import type { SpacingToken, GridAlign, GridJustify } from '../../types/index.js';
+
+	interface Props {
+		columns?: number;
+		gap?: SpacingToken;
+		align?: GridAlign;
+		justify?: GridJustify;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		columns = 12,
+		gap = 'md',
+		align = 'stretch',
+		justify = 'start',
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<div
+	class="grid {className}"
+	data-columns={columns}
+	data-gap={gap}
+	data-align={align}
+	data-justify={justify}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.grid {
+		display: grid;
+		width: 100%;
+		font-family: inherit;
+	}
+
+	/* Columns */
+	.grid[data-columns='1'] {
+		grid-template-columns: repeat(1, 1fr);
+	}
+	.grid[data-columns='2'] {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.grid[data-columns='3'] {
+		grid-template-columns: repeat(3, 1fr);
+	}
+	.grid[data-columns='4'] {
+		grid-template-columns: repeat(4, 1fr);
+	}
+	.grid[data-columns='5'] {
+		grid-template-columns: repeat(5, 1fr);
+	}
+	.grid[data-columns='6'] {
+		grid-template-columns: repeat(6, 1fr);
+	}
+	.grid[data-columns='7'] {
+		grid-template-columns: repeat(7, 1fr);
+	}
+	.grid[data-columns='8'] {
+		grid-template-columns: repeat(8, 1fr);
+	}
+	.grid[data-columns='9'] {
+		grid-template-columns: repeat(9, 1fr);
+	}
+	.grid[data-columns='10'] {
+		grid-template-columns: repeat(10, 1fr);
+	}
+	.grid[data-columns='11'] {
+		grid-template-columns: repeat(11, 1fr);
+	}
+	.grid[data-columns='12'] {
+		grid-template-columns: repeat(12, 1fr);
+	}
+
+	/* Gap sizes using CSS custom properties */
+	.grid[data-gap='xs'] {
+		gap: var(--space-xs, 0.25rem);
+	}
+	.grid[data-gap='sm'] {
+		gap: var(--space-sm, 0.5rem);
+	}
+	.grid[data-gap='md'] {
+		gap: var(--space-md, 1rem);
+	}
+	.grid[data-gap='lg'] {
+		gap: var(--space-lg, 1.5rem);
+	}
+	.grid[data-gap='xl'] {
+		gap: var(--space-xl, 2rem);
+	}
+	.grid[data-gap='2xl'] {
+		gap: var(--space-2xl, 3rem);
+	}
+	.grid[data-gap='3xl'] {
+		gap: var(--space-3xl, 4rem);
+	}
+
+	/* Align items */
+	.grid[data-align='start'] {
+		align-items: start;
+	}
+	.grid[data-align='center'] {
+		align-items: center;
+	}
+	.grid[data-align='end'] {
+		align-items: end;
+	}
+	.grid[data-align='stretch'] {
+		align-items: stretch;
+	}
+
+	/* Justify items */
+	.grid[data-justify='start'] {
+		justify-items: start;
+	}
+	.grid[data-justify='center'] {
+		justify-items: center;
+	}
+	.grid[data-justify='end'] {
+		justify-items: end;
+	}
+	.grid[data-justify='space-between'] {
+		justify-items: space-between;
+	}
+	.grid[data-justify='space-around'] {
+		justify-items: space-around;
+	}
+	.grid[data-justify='space-evenly'] {
+		justify-items: space-evenly;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { SpacingToken, GridAlign, GridJustify } from '../../types/index.js';
+interface Props {
+    columns?: number;
+    gap?: SpacingToken;
+    align?: GridAlign;
+    justify?: GridJustify;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Grid: import("svelte").Component<Props, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/Grid/GridItem.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { GridItemProps } from '../../types/index.js';
+
+	interface Props extends GridItemProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { colSpan = 1, rowSpan = 1, class: className = '', children }: Props = $props();
+</script>
+
+<div class="grid-item {className}" style="grid-column: span {colSpan}; grid-row: span {rowSpan};">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.grid-item {
+		font-family: inherit;
+	}
+</style>

package/dist/components/Grid/GridItem.svelte.d.ts

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

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

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

package/dist/components/Grid/index.js

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

package/dist/components/List/List.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { ListProps } from '../../types/data-display.js';
+
+	interface Props {
+		/**
+		 * Show dividers between list items
+		 * @default false
+		 */
+		dividers?: boolean;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * List item content
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let { dividers = false, class: className = '', children }: Props = $props();
+</script>
+
+<ul class="list {dividers ? 'list--dividers' : ''} {className}" role="list">
+	{#if children}
+		{@render children()}
+	{/if}
+</ul>
+
+<style>
+	.list {
+		/* Reset default list styles */
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		font-family: inherit;
+	}
+
+	/* Divider styles - applied to list items */
+	.list--dividers :global(> li:not(:last-child)) {
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+interface Props {
+    /**
+     * Show dividers between list items
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * List item content
+     */
+    children?: import('svelte').Snippet;
+}
+declare const List: import("svelte").Component<Props, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/components/List/ListItem.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Makes the list item interactive with hover/active states
+		 * @default false
+		 */
+		clickable?: boolean;
+		/**
+		 * Marks the list item as selected
+		 * @default false
+		 */
+		selected?: boolean;
+		/**
+		 * Disables the list item
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Leading content slot (icons/avatars)
+		 */
+		leading?: import('svelte').Snippet;
+		/**
+		 * Trailing content slot (actions/badges)
+		 */
+		trailing?: import('svelte').Snippet;
+		/**
+		 * Main content
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		clickable = false,
+		selected = false,
+		disabled = false,
+		class: className = '',
+		leading,
+		trailing,
+		children
+	}: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<li
+	class="list-item {clickable ? 'list-item--clickable' : ''} {selected
+		? 'list-item--selected'
+		: ''} {disabled ? 'list-item--disabled' : ''} {className}"
+	role={clickable ? 'button' : undefined}
+	aria-selected={selected ? 'true' : undefined}
+	aria-disabled={disabled ? 'true' : undefined}
+	tabindex={clickable && !disabled ? 0 : -1}
+>
+	{#if leading}
+		<div class="list-item__leading">
+			{@render leading()}
+		</div>
+	{/if}
+
+	<div class="list-item__content">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if trailing}
+		<div class="list-item__trailing">
+			{@render trailing()}
+		</div>
+	{/if}
+</li>
+
+<style>
+	.list-item {
+		display: flex;
+		align-items: center;
+		min-height: 3rem; /* 48px for touch targets */
+		padding: 0.75rem 1rem;
+		font-family: inherit;
+		transition: background-color var(--transition-fast, 150ms ease);
+	}
+
+	.list-item__leading {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		margin-right: 0.75rem;
+	}
+
+	.list-item__content {
+		flex: 1;
+		min-width: 0; /* Allows text truncation */
+	}
+
+	.list-item__trailing {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+		margin-left: 0.75rem;
+	}
+
+	/* Clickable state */
+	.list-item--clickable {
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.list-item--clickable:hover:not(.list-item--disabled) {
+		background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
+	}
+
+	.list-item--clickable:active:not(.list-item--disabled) {
+		background-color: var(--color-bg-active, rgba(0, 0, 0, 0.08));
+	}
+
+	.list-item--clickable:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	/* Selected state */
+	.list-item--selected {
+		background-color: var(--color-primary-bg, rgba(59, 130, 246, 0.1));
+	}
+
+	.list-item--selected.list-item--clickable:hover:not(.list-item--disabled) {
+		background-color: var(--color-primary-bg-hover, rgba(59, 130, 246, 0.15));
+	}
+
+	/* Disabled state */
+	.list-item--disabled {
+		opacity: 0.5;
+		pointer-events: none;
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/List/ListItem.svelte.d.ts

@@ -0,0 +1,36 @@
+interface Props {
+    /**
+     * Makes the list item interactive with hover/active states
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Marks the list item as selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Disables the list item
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Leading content slot (icons/avatars)
+     */
+    leading?: import('svelte').Snippet;
+    /**
+     * Trailing content slot (actions/badges)
+     */
+    trailing?: import('svelte').Snippet;
+    /**
+     * Main content
+     */
+    children?: import('svelte').Snippet;
+}
+declare const ListItem: import("svelte").Component<Props, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

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

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

package/dist/components/List/index.js

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

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,204 @@
+<script lang="ts">
+	import type { ModalProps } from '../../types/index.js';
+	import { Dialog } from 'bits-ui';
+
+	interface Props extends ModalProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		size = 'md',
+		closeOnEscape = true,
+		closeOnBackdrop = true,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	function handleOpenChange(value: boolean) {
+		// Only close if escape is allowed or if it's not an escape key event
+		if (!value && !closeOnEscape) {
+			return;
+		}
+		open = value;
+	}
+
+	function handleBackdropClick() {
+		if (closeOnBackdrop) {
+			open = false;
+		}
+	}
+
+	function handleEscapeKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && !closeOnEscape) {
+			event.preventDefault();
+		}
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="modal-overlay" onclick={handleBackdropClick} />
+		<Dialog.Content class="modal-content modal-{size} {className}" onkeydown={handleEscapeKeyDown}>
+			{@render children?.()}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+
+<style>
+	/* Overlay */
+	:global(.modal-overlay) {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.5);
+		z-index: 100;
+	}
+
+	:global(.modal-overlay[data-state='open']) {
+		animation: fade-in 200ms ease-out;
+	}
+
+	:global(.modal-overlay[data-state='closed']) {
+		animation: fade-out 150ms ease-in;
+	}
+
+	@keyframes -global-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-fade-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	/* Content */
+	:global(.modal-content) {
+		/* MUST set font-family explicitly - portal doesn't inherit (F33) */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: var(--color-bg, #ffffff);
+		border-radius: var(--radius-md, 0.5rem);
+		box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.2));
+		z-index: 101;
+		max-height: 90vh;
+		display: flex;
+		flex-direction: column;
+		/* Safe area handling (F21) */
+		padding-top: env(safe-area-inset-top, 0);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+	}
+
+	:global(.modal-content[data-state='open']) {
+		animation: modal-in 200ms ease-out;
+	}
+
+	:global(.modal-content[data-state='closed']) {
+		animation: modal-out 150ms ease-in;
+	}
+
+	@keyframes -global-modal-in {
+		from {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(1);
+		}
+	}
+
+	@keyframes -global-modal-out {
+		from {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(0.95);
+		}
+	}
+
+	/* Size variants (F32: rem units) */
+	:global(.modal-sm) {
+		width: 25rem;
+		max-width: calc(100vw - 2rem);
+	}
+
+	:global(.modal-md) {
+		width: 31.25rem;
+		max-width: calc(100vw - 2rem);
+	}
+
+	:global(.modal-lg) {
+		width: 43.75rem;
+		max-width: calc(100vw - 2rem);
+	}
+
+	:global(.modal-full) {
+		width: 100%;
+		max-width: 100%;
+		height: 100vh;
+		max-height: 100vh;
+		border-radius: 0;
+		top: 0;
+		left: 0;
+		transform: none;
+	}
+
+	/* Mobile responsive */
+	@media (max-width: 640px) {
+		:global(.modal-content:not(.modal-full)) {
+			width: 100% !important;
+			max-width: 100% !important;
+			max-height: 90vh;
+			top: auto;
+			bottom: 0;
+			left: 0;
+			transform: none;
+			border-radius: 1rem 1rem 0 0;
+			margin: 0;
+		}
+
+		:global(.modal-content:not(.modal-full)[data-state='open']) {
+			animation: modal-slide-up 250ms ease-out;
+		}
+
+		:global(.modal-content:not(.modal-full)[data-state='closed']) {
+			animation: modal-slide-down 200ms ease-in;
+		}
+	}
+
+	@keyframes -global-modal-slide-up {
+		from {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes -global-modal-slide-down {
+		from {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+	}
+</style>

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

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

package/dist/components/Modal/ModalBody.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { ModalBodyProps } from '../../types/index.js';
+	import { Dialog } from 'bits-ui';
+
+	interface Props extends ModalBodyProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="modal-body {className}">
+	<Dialog.Description class="modal-description">
+		{@render children?.()}
+	</Dialog.Description>
+</div>
+
+<style>
+	:global(.modal-body) {
+		padding: var(--space-xl, 1.5rem);
+		overflow-y: auto;
+		flex: 1;
+		/* Smooth scrolling on iOS */
+		-webkit-overflow-scrolling: touch;
+	}
+
+	:global(.modal-description) {
+		font-size: var(--font-size-base, 1rem);
+		line-height: var(--line-height-normal, 1.5);
+		color: var(--color-text, #1f2937);
+	}
+
+	/* Scrollbar styling */
+	:global(.modal-body::-webkit-scrollbar) {
+		width: 0.5rem;
+	}
+
+	:global(.modal-body::-webkit-scrollbar-track) {
+		background: transparent;
+	}
+
+	:global(.modal-body::-webkit-scrollbar-thumb) {
+		background: var(--color-border, #e5e7eb);
+		border-radius: var(--radius-full, 9999px);
+	}
+
+	:global(.modal-body::-webkit-scrollbar-thumb:hover) {
+		background: var(--color-text-secondary, #6b7280);
+	}
+</style>

package/dist/components/Modal/ModalBody.svelte.d.ts

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