@aspect-ops/exon-ui 0.0.2 → 0.1.0

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;

package/dist/components/Modal/ModalFooter.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { ModalFooterProps } from '../../types/index.js';
+
+	interface Props extends ModalFooterProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="modal-footer {className}">
+	{@render children?.()}
+</div>
+
+<style>
+	:global(.modal-footer) {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--space-lg, 1rem) var(--space-xl, 1.5rem);
+		border-top: 1px solid var(--color-border, #e5e7eb);
+		gap: var(--space-md, 0.75rem);
+		flex-shrink: 0;
+		flex-wrap: wrap;
+	}
+
+	/* Mobile: Stack buttons vertically */
+	@media (max-width: 640px) {
+		:global(.modal-footer) {
+			flex-direction: column-reverse;
+		}
+
+		:global(.modal-footer > *) {
+			width: 100%;
+		}
+	}
+</style>

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

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

package/dist/components/Modal/ModalHeader.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { ModalHeaderProps } from '../../types/index.js';
+	import { Dialog } from 'bits-ui';
+
+	interface Props extends ModalHeaderProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="modal-header {className}">
+	<Dialog.Title class="modal-title">
+		{@render children?.()}
+	</Dialog.Title>
+	<Dialog.Close class="modal-close" aria-label="Close modal">&times;</Dialog.Close>
+</div>
+
+<style>
+	:global(.modal-header) {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--space-lg, 1rem) var(--space-xl, 1.5rem);
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+		gap: var(--space-md, 0.75rem);
+		flex-shrink: 0;
+	}
+
+	:global(.modal-title) {
+		font-size: var(--font-size-lg, 1.125rem);
+		font-weight: var(--font-weight-semibold, 600);
+		color: var(--color-text, #1f2937);
+		line-height: var(--line-height-tight, 1.25);
+		margin: 0;
+		flex: 1;
+	}
+
+	:global(.modal-close) {
+		/* F20: Minimum 44x44px touch target */
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+		width: 2.75rem;
+		height: 2.75rem;
+		border: none;
+		background: transparent;
+		color: var(--color-text-secondary, #6b7280);
+		font-size: var(--font-size-2xl, 1.5rem);
+		line-height: 1;
+		cursor: pointer;
+		border-radius: var(--radius-sm, 0.25rem);
+		transition: all 150ms ease;
+		flex-shrink: 0;
+		padding: 0;
+	}
+
+	:global(.modal-close:hover) {
+		background: var(--color-bg-secondary, #f3f4f6);
+		color: var(--color-text, #1f2937);
+	}
+
+	:global(.modal-close:focus-visible) {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	:global(.modal-close:active) {
+		transform: scale(0.95);
+	}
+</style>

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

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

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

@@ -0,0 +1,4 @@
+export { default as Modal } from './Modal.svelte';
+export { default as ModalHeader } from './ModalHeader.svelte';
+export { default as ModalBody } from './ModalBody.svelte';
+export { default as ModalFooter } from './ModalFooter.svelte';

package/dist/components/Modal/index.js

@@ -0,0 +1,4 @@
+export { default as Modal } from './Modal.svelte';
+export { default as ModalHeader } from './ModalHeader.svelte';
+export { default as ModalBody } from './ModalBody.svelte';
+export { default as ModalFooter } from './ModalFooter.svelte';

package/dist/components/OTPInput/OTPInput.svelte

@@ -0,0 +1,312 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		/**
+		 * The OTP value (bindable)
+		 * @default ''
+		 */
+		value?: string;
+
+		/**
+		 * Number of OTP digits
+		 * @default 6
+		 */
+		length?: number;
+
+		/**
+		 * Input type validation
+		 * @default 'numeric'
+		 */
+		type?: 'numeric' | 'alphanumeric';
+
+		/**
+		 * Show dots instead of characters
+		 * @default false
+		 */
+		masked?: boolean;
+
+		/**
+		 * Disabled state
+		 * @default false
+		 */
+		disabled?: boolean;
+
+		/**
+		 * Error state
+		 * @default false
+		 */
+		error?: boolean;
+
+		/**
+		 * Component size
+		 * @default 'md'
+		 */
+		size?: 'sm' | 'md' | 'lg';
+
+		/**
+		 * Auto-focus first input on mount
+		 * @default false
+		 */
+		autoFocus?: boolean;
+
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+
+		/**
+		 * Callback when all digits are entered
+		 */
+		oncomplete?: (value: string) => void;
+
+		/**
+		 * Callback on value change
+		 */
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		length = 6,
+		type = 'numeric',
+		masked = false,
+		disabled = false,
+		error = false,
+		size = 'md',
+		autoFocus = false,
+		class: className = '',
+		oncomplete,
+		onchange
+	}: Props = $props();
+
+	// Track individual input elements
+	let inputs: (HTMLInputElement | null)[] = $state([]);
+
+	// Split value into individual characters
+	let chars = $derived(value.padEnd(length, ' ').slice(0, length).split(''));
+
+	onMount(() => {
+		if (autoFocus && inputs[0]) {
+			inputs[0].focus();
+		}
+	});
+
+	function handleInput(index: number, e: Event) {
+		const input = e.target as HTMLInputElement;
+		const char = input.value.slice(-1); // Get last character entered
+
+		// Validate based on type
+		if (type === 'numeric' && char && !/^\d$/.test(char)) {
+			input.value = '';
+			return;
+		}
+
+		if (type === 'alphanumeric' && char && !/^[a-zA-Z0-9]$/.test(char)) {
+			input.value = '';
+			return;
+		}
+
+		// Update value
+		const newChars = chars.map((c, i) => (i === index ? char : c));
+		const newValue = newChars.join('').trim();
+		value = newValue;
+
+		// Call onchange callback
+		onchange?.(newValue);
+
+		// Move to next input if character was entered
+		if (char && index < length - 1) {
+			inputs[index + 1]?.focus();
+		}
+
+		// Check completion
+		if (newValue.length === length) {
+			oncomplete?.(newValue);
+		}
+	}
+
+	function handleKeydown(index: number, e: KeyboardEvent) {
+		const input = e.target as HTMLInputElement;
+
+		switch (e.key) {
+			case 'Backspace':
+				// If input is empty, move to previous input
+				if (!input.value && index > 0) {
+					e.preventDefault();
+					inputs[index - 1]?.focus();
+					// Clear previous input
+					const newChars = chars.map((c, i) => (i === index - 1 ? '' : c));
+					value = newChars.join('').trim();
+					onchange?.(value);
+				}
+				break;
+
+			case 'ArrowLeft':
+				e.preventDefault();
+				if (index > 0) {
+					inputs[index - 1]?.focus();
+				}
+				break;
+
+			case 'ArrowRight':
+				e.preventDefault();
+				if (index < length - 1) {
+					inputs[index + 1]?.focus();
+				}
+				break;
+
+			case 'ArrowUp':
+			case 'ArrowDown':
+				// Prevent default to avoid number spinner in numeric inputs
+				e.preventDefault();
+				break;
+		}
+	}
+
+	function handlePaste(e: ClipboardEvent) {
+		e.preventDefault();
+		const pastedData = e.clipboardData?.getData('text') || '';
+
+		// Filter based on type
+		let filteredData = pastedData;
+		if (type === 'numeric') {
+			filteredData = pastedData.replace(/\D/g, '');
+		} else if (type === 'alphanumeric') {
+			filteredData = pastedData.replace(/[^a-zA-Z0-9]/g, '');
+		}
+
+		// Trim to length and update value
+		const newValue = filteredData.slice(0, length);
+		value = newValue;
+		onchange?.(newValue);
+
+		// Focus the next empty input or the last input
+		const nextEmptyIndex = newValue.length < length ? newValue.length : length - 1;
+		setTimeout(() => {
+			inputs[nextEmptyIndex]?.focus();
+		}, 0);
+
+		// Check completion
+		if (newValue.length === length) {
+			oncomplete?.(newValue);
+		}
+	}
+
+	function handleFocus(index: number, e: FocusEvent) {
+		const input = e.target as HTMLInputElement;
+		// Select content on focus for easy replacement
+		input.select();
+	}
+</script>
+
+<div
+	class="otp-input otp-input--{size} {error ? 'otp-input--error' : ''} {disabled
+		? 'otp-input--disabled'
+		: ''} {className}"
+	role="group"
+	aria-label="One-time password input"
+>
+	{#each Array(length) as _, index (index)}
+		<input
+			bind:this={inputs[index]}
+			class="otp-input__field"
+			type={masked ? 'password' : 'text'}
+			inputmode={type === 'numeric' ? 'numeric' : 'text'}
+			autocomplete="one-time-code"
+			maxlength="1"
+			value={chars[index]?.trim() || ''}
+			aria-label="Digit {index + 1} of {length}"
+			aria-invalid={error}
+			{disabled}
+			oninput={(e) => handleInput(index, e)}
+			onkeydown={(e) => handleKeydown(index, e)}
+			onpaste={(e) => handlePaste(e)}
+			onfocus={(e) => handleFocus(index, e)}
+		/>
+	{/each}
+</div>
+
+<style>
+	.otp-input {
+		display: flex;
+		gap: var(--space-sm, 0.5rem);
+		align-items: center;
+		width: 100%;
+	}
+
+	.otp-input--disabled {
+		opacity: 0.5;
+	}
+
+	.otp-input__field {
+		flex: 1;
+		min-width: 0;
+		min-height: var(--touch-target-min, 44px);
+		max-width: 3rem;
+		padding: var(--space-sm, 0.5rem);
+		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-lg, 1.125rem);
+		font-weight: var(--font-semibold, 600);
+		text-align: center;
+		line-height: 1;
+		transition:
+			border-color var(--transition-fast, 150ms ease),
+			box-shadow var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.otp-input__field: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));
+	}
+
+	.otp-input__field:disabled {
+		background: var(--color-bg-muted, #f3f4f6);
+		cursor: not-allowed;
+	}
+
+	/* Size variants */
+	.otp-input--sm .otp-input__field {
+		min-height: var(--touch-target-min, 44px);
+		max-width: 2.5rem;
+		padding: var(--space-xs, 0.25rem);
+		font-size: var(--text-base, 1rem);
+	}
+
+	.otp-input--md .otp-input__field {
+		min-height: var(--touch-target-min, 44px);
+		max-width: 3rem;
+		padding: var(--space-sm, 0.5rem);
+		font-size: var(--text-lg, 1.125rem);
+	}
+
+	.otp-input--lg .otp-input__field {
+		min-height: 3.25rem;
+		max-width: 3.5rem;
+		padding: var(--space-md, 1rem);
+		font-size: var(--text-xl, 1.25rem);
+	}
+
+	/* Error state */
+	.otp-input--error .otp-input__field {
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.otp-input--error .otp-input__field:focus {
+		border-color: var(--color-error, #ef4444);
+		box-shadow: 0 0 0 3px var(--color-error-alpha, rgba(239, 68, 68, 0.1));
+	}
+
+	/* Remove number spinner for numeric inputs */
+	.otp-input__field::-webkit-outer-spin-button,
+	.otp-input__field::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+</style>

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

@@ -0,0 +1,57 @@
+interface Props {
+    /**
+     * The OTP value (bindable)
+     * @default ''
+     */
+    value?: string;
+    /**
+     * Number of OTP digits
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Input type validation
+     * @default 'numeric'
+     */
+    type?: 'numeric' | 'alphanumeric';
+    /**
+     * Show dots instead of characters
+     * @default false
+     */
+    masked?: boolean;
+    /**
+     * Disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Component size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Auto-focus first input on mount
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Callback when all digits are entered
+     */
+    oncomplete?: (value: string) => void;
+    /**
+     * Callback on value change
+     */
+    onchange?: (value: string) => void;
+}
+declare const OTPInput: import("svelte").Component<Props, {}, "value">;
+type OTPInput = ReturnType<typeof OTPInput>;
+export default OTPInput;

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

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

package/dist/components/OTPInput/index.js

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

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { PopoverProps } from '../../types/index.js';
+	import { Popover as BitsPopover } from 'bits-ui';
+
+	interface Props extends PopoverProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<BitsPopover.Root>
+	{@render children?.()}
+</BitsPopover.Root>

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

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

package/dist/components/Popover/PopoverContent.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { PopoverContentProps } from '../../types/index.js';
+	import { Popover as BitsPopover } from 'bits-ui';
+
+	interface Props extends PopoverContentProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { side = 'bottom', class: className = '', children }: Props = $props();
+</script>
+
+<BitsPopover.Portal>
+	<BitsPopover.Content {side} class="popover-content {className}">
+		{@render children?.()}
+	</BitsPopover.Content>
+</BitsPopover.Portal>
+
+<style>
+	/* Popover content */
+	:global(.popover-content) {
+		/* MUST set font-family explicitly - portal doesn't inherit (F33) */
+		font-family: var(--exon-font-sans, var(--font-family, system-ui, -apple-system, sans-serif));
+		background: var(--exon-popover-bg, white);
+		border: 1px solid var(--exon-color-neutral-200, #e5e7eb);
+		border-radius: var(--exon-radius-lg, 0.5rem);
+		padding: 1rem;
+		box-shadow: var(--exon-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+		min-width: 12.5rem;
+		max-width: 20rem;
+		z-index: 150;
+	}
+
+	/* Fade-in animation */
+	:global(.popover-content[data-state='open']) {
+		animation: popover-fade-in 200ms ease-out;
+	}
+
+	:global(.popover-content[data-state='closed']) {
+		animation: popover-fade-out 150ms ease-in;
+	}
+
+	@keyframes -global-popover-fade-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes -global-popover-fade-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+</style>

package/dist/components/Popover/PopoverContent.svelte.d.ts

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

package/dist/components/Popover/PopoverTrigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { PopoverTriggerProps } from '../../types/index.js';
+	import { Popover as BitsPopover } from 'bits-ui';
+
+	interface Props extends PopoverTriggerProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<BitsPopover.Trigger class={className}>
+	{@render children?.()}
+</BitsPopover.Trigger>

package/dist/components/Popover/PopoverTrigger.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.svelte';
+export { default as PopoverTrigger } from './PopoverTrigger.svelte';
+export { default as PopoverContent } from './PopoverContent.svelte';