@aspect-ops/exon-ui 0.0.3 → 0.2.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';