@aspect-ops/exon-ui 0.0.2 → 0.1.0

package/dist/components/FAB/FABGroup.svelte

@@ -0,0 +1,449 @@
+<script lang="ts">
+	import type { FABGroupProps, FABAction, FABPosition } from '../../types/index.js';
+
+	interface Props extends FABGroupProps {
+		children?: import('svelte').Snippet;
+		closeIconSlot?: import('svelte').Snippet;
+		iconSlot?: import('svelte').Snippet;
+	}
+
+	let {
+		actions = [],
+		icon = '+',
+		closeIcon = '\u00D7',
+		position = 'bottom-right',
+		direction = 'up',
+		class: className = '',
+		children,
+		closeIconSlot,
+		iconSlot
+	}: Props = $props();
+
+	let isOpen = $state(false);
+
+	function toggle() {
+		isOpen = !isOpen;
+	}
+
+	function handleAction(action: FABAction) {
+		if (action.onAction) {
+			action.onAction();
+		}
+		isOpen = false;
+	}
+
+	function handleBackdropClick() {
+		isOpen = false;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && isOpen) {
+			isOpen = false;
+		}
+	}
+
+	// Derive transform direction for action items
+	const getActionTransform = $derived((index: number) => {
+		const spacing = 60; // px spacing between items
+		const offset = (index + 1) * spacing;
+
+		switch (direction) {
+			case 'up':
+				return `translateY(-${offset}px)`;
+			case 'down':
+				return `translateY(${offset}px)`;
+			case 'left':
+				return `translateX(-${offset}px)`;
+			case 'right':
+				return `translateX(${offset}px)`;
+			default:
+				return `translateY(-${offset}px)`;
+		}
+	});
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- Backdrop -->
+{#if isOpen}
+	<button
+		type="button"
+		class="fab-group__backdrop"
+		onclick={handleBackdropClick}
+		aria-label="Close speed dial menu"
+	></button>
+{/if}
+
+<div
+	class="fab-group fab-group--{position} fab-group--{direction} {className}"
+	class:fab-group--open={isOpen}
+>
+	<!-- Action items -->
+	<div class="fab-group__actions" role="menu" aria-label="Speed dial actions">
+		{#each actions as action, index}
+			<button
+				type="button"
+				class="fab-group__action"
+				class:fab-group__action--visible={isOpen}
+				style="--action-index: {index}; --action-transform: {getActionTransform(index)};"
+				onclick={() => handleAction(action)}
+				role="menuitem"
+				aria-label={action.label}
+				tabindex={isOpen ? 0 : -1}
+			>
+				<span class="fab-group__action-icon">{action.icon}</span>
+				<span class="fab-group__action-label">{action.label}</span>
+			</button>
+		{/each}
+	</div>
+
+	<!-- Main FAB trigger -->
+	<button
+		type="button"
+		class="fab-group__trigger"
+		class:fab-group__trigger--open={isOpen}
+		onclick={toggle}
+		aria-expanded={isOpen}
+		aria-haspopup="menu"
+		aria-label={isOpen ? 'Close menu' : 'Open menu'}
+	>
+		<span class="fab-group__trigger-icon fab-group__trigger-icon--default">
+			{#if iconSlot}
+				{@render iconSlot()}
+			{:else if children}
+				{@render children()}
+			{:else}
+				{icon}
+			{/if}
+		</span>
+		<span class="fab-group__trigger-icon fab-group__trigger-icon--close">
+			{#if closeIconSlot}
+				{@render closeIconSlot()}
+			{:else}
+				{closeIcon}
+			{/if}
+		</span>
+	</button>
+</div>
+
+<style>
+	/* Backdrop */
+	.fab-group__backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: 49;
+		background: rgba(0, 0, 0, 0.3);
+		border: none;
+		cursor: pointer;
+		animation: fadeIn var(--transition-fast, 150ms ease) forwards;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	/* Container */
+	.fab-group {
+		position: fixed;
+		z-index: 50;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	/* Position variants with safe area insets (F21) */
+	.fab-group--bottom-right {
+		bottom: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-bottom, 0px));
+		right: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-right, 0px));
+	}
+
+	.fab-group--bottom-left {
+		bottom: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-bottom, 0px));
+		left: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-left, 0px));
+	}
+
+	.fab-group--bottom-center {
+		bottom: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-bottom, 0px));
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.fab-group--top-right {
+		top: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-top, 0px));
+		right: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-right, 0px));
+	}
+
+	.fab-group--top-left {
+		top: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-top, 0px));
+		left: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-left, 0px));
+	}
+
+	/* Direction variants */
+	.fab-group--up {
+		flex-direction: column-reverse;
+	}
+
+	.fab-group--down {
+		flex-direction: column;
+	}
+
+	.fab-group--left {
+		flex-direction: row-reverse;
+	}
+
+	.fab-group--right {
+		flex-direction: row;
+	}
+
+	/* Main trigger button */
+	.fab-group__trigger {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 56px;
+		height: 56px;
+		padding: 0;
+		margin: 0;
+		border: none;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		font-family: inherit;
+		font-size: 1.5rem;
+		font-weight: 600;
+		cursor: pointer;
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -2px rgba(0, 0, 0, 0.1);
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+		/* Touch target minimum (F20) */
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+	}
+
+	.fab-group__trigger:hover {
+		background: var(--color-primary-hover, #2563eb);
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -4px rgba(0, 0, 0, 0.1);
+	}
+
+	.fab-group__trigger:active {
+		background: var(--color-primary-active, #1d4ed8);
+	}
+
+	.fab-group__trigger:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	/* Rotation when open */
+	.fab-group__trigger--open {
+		background: var(--color-secondary, #6b7280);
+	}
+
+	.fab-group__trigger--open:hover {
+		background: var(--color-secondary-hover, #4b5563);
+	}
+
+	/* Icon transitions */
+	.fab-group__trigger-icon {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all var(--transition-normal, 200ms ease);
+	}
+
+	.fab-group__trigger-icon--default {
+		opacity: 1;
+		transform: rotate(0deg);
+	}
+
+	.fab-group__trigger-icon--close {
+		opacity: 0;
+		transform: rotate(-90deg);
+	}
+
+	.fab-group__trigger--open .fab-group__trigger-icon--default {
+		opacity: 0;
+		transform: rotate(90deg);
+	}
+
+	.fab-group__trigger--open .fab-group__trigger-icon--close {
+		opacity: 1;
+		transform: rotate(0deg);
+	}
+
+	/* Actions container */
+	.fab-group__actions {
+		position: absolute;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		pointer-events: none;
+	}
+
+	.fab-group--open .fab-group__actions {
+		pointer-events: auto;
+	}
+
+	.fab-group--up .fab-group__actions {
+		bottom: 100%;
+		flex-direction: column-reverse;
+	}
+
+	.fab-group--down .fab-group__actions {
+		top: 100%;
+		flex-direction: column;
+	}
+
+	.fab-group--left .fab-group__actions {
+		right: 100%;
+		flex-direction: row-reverse;
+	}
+
+	.fab-group--right .fab-group__actions {
+		left: 100%;
+		flex-direction: row;
+	}
+
+	/* Action item */
+	.fab-group__action {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		width: 44px;
+		height: 44px;
+		padding: 0;
+		margin: 0;
+		border: none;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-bg, #ffffff);
+		color: var(--color-text, #1f2937);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		cursor: pointer;
+		box-shadow:
+			0 2px 4px -1px rgba(0, 0, 0, 0.1),
+			0 1px 2px -1px rgba(0, 0, 0, 0.1);
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+		/* Touch target minimum (F20) */
+		min-width: var(--touch-target-min, 44px);
+		min-height: var(--touch-target-min, 44px);
+		/* Initial hidden state */
+		opacity: 0;
+		transform: scale(0.3);
+	}
+
+	.fab-group__action--visible {
+		opacity: 1;
+		transform: var(--action-transform) scale(1);
+		transition-delay: calc(var(--action-index) * 50ms);
+	}
+
+	.fab-group__action:hover {
+		background: var(--color-bg-muted, #f3f4f6);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -2px rgba(0, 0, 0, 0.1);
+	}
+
+	.fab-group__action:active {
+		background: var(--color-border, #e5e7eb);
+	}
+
+	.fab-group__action:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	/* Action icon */
+	.fab-group__action-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.25rem;
+	}
+
+	/* Action label - tooltip style */
+	.fab-group__action-label {
+		position: absolute;
+		white-space: nowrap;
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		background: var(--color-bg-inverse, #1f2937);
+		color: var(--color-text-inverse, #ffffff);
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: 500;
+		border-radius: var(--radius-sm, 0.25rem);
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--transition-fast, 150ms ease);
+	}
+
+	/* Label positioning based on direction */
+	.fab-group--up .fab-group__action-label,
+	.fab-group--down .fab-group__action-label {
+		right: calc(100% + var(--space-sm, 0.5rem));
+	}
+
+	.fab-group--left .fab-group__action-label,
+	.fab-group--right .fab-group__action-label {
+		bottom: calc(100% + var(--space-xs, 0.25rem));
+	}
+
+	.fab-group--bottom-left .fab-group__action-label,
+	.fab-group--top-left .fab-group__action-label {
+		right: auto;
+		left: calc(100% + var(--space-sm, 0.5rem));
+	}
+
+	.fab-group__action:hover .fab-group__action-label,
+	.fab-group__action:focus-visible .fab-group__action-label {
+		opacity: 1;
+	}
+
+	/* Platform-specific styling (F22) */
+	:global([data-platform='android']) .fab-group__trigger {
+		box-shadow:
+			0 6px 10px 0 rgba(0, 0, 0, 0.14),
+			0 1px 18px 0 rgba(0, 0, 0, 0.12),
+			0 3px 5px -1px rgba(0, 0, 0, 0.2);
+	}
+
+	:global([data-platform='android']) .fab-group__trigger:hover {
+		box-shadow:
+			0 12px 17px 2px rgba(0, 0, 0, 0.14),
+			0 5px 22px 4px rgba(0, 0, 0, 0.12),
+			0 7px 8px -4px rgba(0, 0, 0, 0.2);
+	}
+
+	:global([data-platform='android']) .fab-group__action {
+		box-shadow:
+			0 3px 5px -1px rgba(0, 0, 0, 0.2),
+			0 6px 10px 0 rgba(0, 0, 0, 0.14),
+			0 1px 18px 0 rgba(0, 0, 0, 0.12);
+	}
+
+	:global([data-platform='ios']) .fab-group__trigger {
+		box-shadow:
+			0 2px 8px rgba(0, 0, 0, 0.15),
+			0 1px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	:global([data-platform='ios']) .fab-group__action {
+		box-shadow:
+			0 1px 4px rgba(0, 0, 0, 0.1),
+			0 0.5px 2px rgba(0, 0, 0, 0.08);
+	}
+</style>

package/dist/components/FAB/FABGroup.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as FAB } from './FAB.svelte';
+export { default as FABGroup } from './FABGroup.svelte';
+export type { FABProps, FABSize, FABPosition, FABAction, FABGroupProps } from '../../types/index.js';

package/dist/components/FAB/index.js

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