@aspect-ops/exon-ui 0.0.2 → 0.1.0

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+
+	interface Props {
+		value?: string | string[];
+		multiple?: boolean;
+		disabled?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		value = $bindable([]),
+		multiple = false,
+		disabled = false,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Normalize value to always work with arrays internally
+	let expandedItems = $derived.by(() => {
+		if (Array.isArray(value)) {
+			return value;
+		}
+		return value ? [value] : [];
+	});
+
+	// Context key
+	const ACCORDION_KEY = Symbol('accordion');
+
+	// Context API
+	const accordionContext = {
+		isExpanded: (itemValue: string): boolean => {
+			return expandedItems.includes(itemValue);
+		},
+		toggle: (itemValue: string): void => {
+			if (disabled) return;
+
+			const isCurrentlyExpanded = expandedItems.includes(itemValue);
+
+			if (multiple) {
+				// Multiple mode: toggle the item in the array
+				if (isCurrentlyExpanded) {
+					value = expandedItems.filter((v) => v !== itemValue) as typeof value;
+				} else {
+					value = [...expandedItems, itemValue] as typeof value;
+				}
+			} else {
+				// Single mode: replace with new value or clear
+				if (isCurrentlyExpanded) {
+					value = (Array.isArray(value) ? [] : '') as typeof value;
+				} else {
+					value = (Array.isArray(value) ? [itemValue] : itemValue) as typeof value;
+				}
+			}
+		},
+		isDisabled: (): boolean => disabled
+	};
+
+	setContext(ACCORDION_KEY, accordionContext);
+</script>
+
+<div class="accordion {className}" role="presentation">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.accordion {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		background: var(--color-bg-card, #ffffff);
+		overflow: hidden;
+	}
+</style>

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

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

package/dist/components/Accordion/AccordionItem.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+
+	interface Props {
+		value: string;
+		disabled?: boolean;
+		class?: string;
+		header?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+	}
+
+	let { value, disabled = false, class: className = '', header, children }: Props = $props();
+
+	// Context key (must match parent)
+	const ACCORDION_KEY = Symbol('accordion');
+
+	// Get context from parent Accordion
+	const ctx = getContext<{
+		isExpanded: (value: string) => boolean;
+		toggle: (value: string) => void;
+		isDisabled: () => boolean;
+	}>(ACCORDION_KEY);
+
+	// Generate unique IDs for ARIA (using $derived to avoid warnings)
+	const headerId = $derived(`accordion-header-${value}`);
+	const bodyId = $derived(`accordion-body-${value}`);
+
+	// Derived states
+	const isExpanded = $derived(ctx.isExpanded(value));
+	const isDisabled = $derived(disabled || ctx.isDisabled());
+
+	// Toggle handler
+	function handleToggle() {
+		if (!isDisabled) {
+			ctx.toggle(value);
+		}
+	}
+
+	// Keyboard handler
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			handleToggle();
+		}
+	}
+
+	// Body element reference for height animation
+	let bodyElement: HTMLDivElement | undefined = $state();
+
+	// Height calculation for smooth animation
+	const contentHeight = $derived.by(() => {
+		if (!bodyElement) return '0px';
+		if (!isExpanded) return '0px';
+
+		// Get the actual scrollHeight when expanded
+		const height = bodyElement.scrollHeight;
+		return `${height}px`;
+	});
+</script>
+
+<div class="accordion-item {className}">
+	<button
+		id={headerId}
+		class="accordion-header"
+		type="button"
+		aria-expanded={isExpanded}
+		aria-controls={bodyId}
+		disabled={isDisabled}
+		onclick={handleToggle}
+		onkeydown={handleKeydown}
+	>
+		<span class="accordion-header__content">
+			{#if header}
+				{@render header()}
+			{/if}
+		</span>
+		<svg
+			class="accordion-header__chevron"
+			class:accordion-header__chevron--expanded={isExpanded}
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+		>
+			<path
+				d="M5 7.5L10 12.5L15 7.5"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			/>
+		</svg>
+	</button>
+
+	<div
+		bind:this={bodyElement}
+		id={bodyId}
+		class="accordion-body"
+		class:accordion-body--expanded={isExpanded}
+		role="region"
+		aria-labelledby={headerId}
+		style="--content-height: {contentHeight}"
+	>
+		<div class="accordion-body__content">
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.accordion-item {
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	.accordion-item:last-child {
+		border-bottom: none;
+	}
+
+	/* Header */
+	.accordion-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-md, 1rem);
+		border: none;
+		background: transparent;
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-base, 1rem);
+		font-weight: var(--font-medium, 500);
+		text-align: left;
+		cursor: pointer;
+		transition: background-color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.accordion-header:hover:not(:disabled) {
+		background: var(--color-bg-hover, #f3f4f6);
+	}
+
+	.accordion-header:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	.accordion-header:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.accordion-header__content {
+		flex: 1;
+		display: flex;
+		align-items: center;
+	}
+
+	.accordion-header__chevron {
+		flex-shrink: 0;
+		margin-left: var(--space-sm, 0.5rem);
+		color: var(--color-text-muted, #6b7280);
+		transition: transform var(--transition-base, 200ms ease);
+	}
+
+	.accordion-header__chevron--expanded {
+		transform: rotate(180deg);
+	}
+
+	/* Body */
+	.accordion-body {
+		max-height: 0;
+		overflow: hidden;
+		transition: max-height var(--transition-base, 200ms ease);
+	}
+
+	.accordion-body--expanded {
+		max-height: var(--content-height);
+	}
+
+	.accordion-body__content {
+		padding: 0 var(--space-md, 1rem) var(--space-md, 1rem);
+		color: var(--color-text-muted, #6b7280);
+		font-size: var(--text-sm, 0.875rem);
+		line-height: var(--leading-normal, 1.5);
+	}
+
+	/* Mobile optimization - ensure min touch target */
+	@media (max-width: 640px) {
+		.accordion-header {
+			min-height: var(--touch-target-min, 44px);
+		}
+	}
+</style>

package/dist/components/Accordion/AccordionItem.svelte.d.ts

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

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

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

package/dist/components/Accordion/index.js

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

package/dist/components/ActionSheet/ActionSheet.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+	import type { ActionSheetProps } from '../../types/index.js';
+	import { Dialog } from 'bits-ui';
+
+	interface Props extends ActionSheetProps {
+		/** Bindable open state */
+		open?: boolean;
+		/** Slot for ActionSheetItem children */
+		actions?: import('svelte').Snippet;
+		/** Default slot for custom content */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		cancelLabel = 'Cancel',
+		showCancel = true,
+		closeOnSelect = true,
+		class: className = '',
+		actions,
+		children
+	}: Props = $props();
+
+	function handleOpenChange(value: boolean) {
+		open = value;
+	}
+
+	function handleBackdropClick() {
+		open = false;
+	}
+
+	function handleCancel() {
+		open = false;
+	}
+
+	// Provide context for ActionSheetItem to access closeOnSelect
+	import { setContext } from 'svelte';
+
+	setContext('actionsheet', {
+		get closeOnSelect() {
+			return closeOnSelect;
+		},
+		close: () => {
+			open = false;
+		}
+	});
+</script>
+
+<Dialog.Root {open} onOpenChange={handleOpenChange}>
+	<Dialog.Portal>
+		<Dialog.Overlay class="actionsheet-overlay" onclick={handleBackdropClick} />
+		<Dialog.Content
+			class="actionsheet-content {className}"
+			aria-labelledby={title ? 'actionsheet-title' : undefined}
+		>
+			<!-- Header section (optional) -->
+			{#if title || description}
+				<div class="actionsheet-header">
+					{#if title}
+						<Dialog.Title id="actionsheet-title" class="actionsheet-title">{title}</Dialog.Title>
+					{/if}
+					{#if description}
+						<Dialog.Description class="actionsheet-description">{description}</Dialog.Description>
+					{/if}
+				</div>
+			{/if}
+
+			<!-- Actions section -->
+			<div class="actionsheet-actions" role="group">
+				{#if actions}
+					{@render actions()}
+				{/if}
+				{#if children}
+					{@render children()}
+				{/if}
+			</div>
+
+			<!-- Cancel button (separated) -->
+			{#if showCancel}
+				<div class="actionsheet-cancel-container">
+					<button
+						type="button"
+						class="actionsheet-cancel"
+						onclick={handleCancel}
+						aria-label="Cancel"
+					>
+						{cancelLabel}
+					</button>
+				</div>
+			{/if}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+
+<style>
+	/* Overlay */
+	:global(.actionsheet-overlay) {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.4);
+		z-index: 100;
+	}
+
+	:global(.actionsheet-overlay[data-state='open']) {
+		animation: actionsheet-fade-in 200ms ease-out;
+	}
+
+	:global(.actionsheet-overlay[data-state='closed']) {
+		animation: actionsheet-fade-out 150ms ease-in;
+	}
+
+	@keyframes -global-actionsheet-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@keyframes -global-actionsheet-fade-out {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
+		}
+	}
+
+	/* Content */
+	:global(.actionsheet-content) {
+		/* F33: Must set font-family explicitly - portal doesn't inherit */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 101;
+		display: flex;
+		flex-direction: column;
+		max-height: 90vh;
+		padding: var(--space-sm, 0.5rem);
+		padding-bottom: calc(var(--space-sm, 0.5rem) + env(safe-area-inset-bottom, 0px));
+	}
+
+	:global(.actionsheet-content[data-state='open']) {
+		animation: actionsheet-slide-up 250ms cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	:global(.actionsheet-content[data-state='closed']) {
+		animation: actionsheet-slide-down 200ms cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	@keyframes -global-actionsheet-slide-up {
+		from {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@keyframes -global-actionsheet-slide-down {
+		from {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+	}
+
+	/* Header */
+	:global(.actionsheet-header) {
+		text-align: center;
+		padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
+		background: var(--color-bg, #ffffff);
+		border-radius: var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem) 0 0;
+		border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+	}
+
+	:global(.actionsheet-title) {
+		margin: 0;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 600;
+		color: var(--color-text-secondary, #6b7280);
+	}
+
+	:global(.actionsheet-description) {
+		margin: var(--space-xs, 0.25rem) 0 0;
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-muted, #9ca3af);
+	}
+
+	/* Actions container */
+	:global(.actionsheet-actions) {
+		display: flex;
+		flex-direction: column;
+		background: var(--color-bg, #ffffff);
+		border-radius: var(--radius-lg, 0.75rem);
+		overflow: hidden;
+	}
+
+	/* When there's a header, remove top border radius from actions */
+	:global(.actionsheet-header + .actionsheet-actions) {
+		border-radius: 0 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem);
+	}
+
+	/* Cancel button container */
+	:global(.actionsheet-cancel-container) {
+		margin-top: var(--space-sm, 0.5rem);
+	}
+
+	/* Cancel button - iOS style */
+	:global(.actionsheet-cancel) {
+		/* F33: Font inheritance for portal */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		width: 100%;
+		/* F20: Minimum touch target */
+		min-height: 56px;
+		padding: var(--space-md, 1rem);
+		border: none;
+		border-radius: var(--radius-lg, 0.75rem);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-primary, #3b82f6);
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: 600;
+		cursor: pointer;
+		transition: background-color var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:global(.actionsheet-cancel:hover) {
+		background: var(--color-bg-hover, #f9fafb);
+	}
+
+	:global(.actionsheet-cancel:active) {
+		background: var(--color-bg-active, #f3f4f6);
+	}
+
+	:global(.actionsheet-cancel:focus-visible) {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	/* Platform-specific styling */
+	:global([data-platform='ios']) :global(.actionsheet-content) {
+		padding: var(--space-sm, 0.5rem);
+	}
+
+	:global([data-platform='android']) :global(.actionsheet-content) {
+		padding: 0;
+		padding-bottom: env(safe-area-inset-bottom, 0px);
+	}
+
+	:global([data-platform='android']) :global(.actionsheet-actions),
+	:global([data-platform='android']) :global(.actionsheet-cancel) {
+		border-radius: 0;
+	}
+
+	:global([data-platform='android']) :global(.actionsheet-cancel-container) {
+		margin-top: 0;
+		border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { ActionSheetProps } from '../../types/index.js';
+interface Props extends ActionSheetProps {
+    /** Bindable open state */
+    open?: boolean;
+    /** Slot for ActionSheetItem children */
+    actions?: import('svelte').Snippet;
+    /** Default slot for custom content */
+    children?: import('svelte').Snippet;
+}
+declare const ActionSheet: import("svelte").Component<Props, {}, "open">;
+type ActionSheet = ReturnType<typeof ActionSheet>;
+export default ActionSheet;