@aspect-ops/exon-ui 0.0.3 → 0.2.0

package/dist/components/Chip/Chip.svelte

@@ -0,0 +1,461 @@
+<script lang="ts">
+	import type { ChipVariant, ChipColor, ChipSize } from '../../types/index.js';
+
+	interface Props {
+		variant?: ChipVariant;
+		color?: ChipColor;
+		size?: ChipSize;
+		removable?: boolean;
+		selected?: boolean;
+		disabled?: boolean;
+		class?: string;
+		onclick?: () => void;
+		onremove?: () => void;
+		children?: import('svelte').Snippet;
+		leadingIcon?: import('svelte').Snippet;
+	}
+
+	let {
+		variant = 'filled',
+		color = 'default',
+		size = 'md',
+		removable = false,
+		selected = false,
+		disabled = false,
+		class: className = '',
+		onclick,
+		onremove,
+		children,
+		leadingIcon
+	}: Props = $props();
+
+	const isClickable = $derived(!!onclick && !disabled);
+
+	function handleClick() {
+		if (!disabled && onclick) {
+			onclick();
+		}
+	}
+
+	function handleRemove(event: MouseEvent) {
+		event.stopPropagation();
+		if (!disabled && onremove) {
+			onremove();
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			handleClick();
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<span
+	class="chip chip--{variant} chip--{color} chip--{size} {selected
+		? 'chip--selected'
+		: ''} {isClickable ? 'chip--clickable' : ''} {disabled ? 'chip--disabled' : ''} {className}"
+	role={isClickable ? 'button' : undefined}
+	aria-pressed={isClickable ? selected : undefined}
+	aria-disabled={disabled || undefined}
+	tabindex={isClickable && !disabled ? 0 : -1}
+	onclick={isClickable ? handleClick : undefined}
+	onkeydown={isClickable ? handleKeydown : undefined}
+>
+	{#if leadingIcon}
+		<span class="chip__icon" aria-hidden="true">
+			{@render leadingIcon()}
+		</span>
+	{/if}
+	<span class="chip__label">
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
+	{#if removable}
+		<button
+			type="button"
+			class="chip__remove"
+			onclick={handleRemove}
+			aria-label="Remove"
+			{disabled}
+		>
+			×
+		</button>
+	{/if}
+</span>
+
+<style>
+	.chip {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		min-height: var(--touch-target-min, 44px);
+		padding: 0.25rem 0.75rem;
+		border: 1px solid transparent;
+		border-radius: var(--radius-full, 9999px);
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+		line-height: 1;
+		white-space: nowrap;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+		background: transparent;
+		text-align: left;
+	}
+
+	.chip__label {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.chip__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.chip__remove {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 2.75rem;
+		height: 2.75rem;
+		margin: -0.25rem -0.25rem -0.25rem 0;
+		padding: 0;
+		border: none;
+		border-radius: var(--radius-full, 9999px);
+		background: transparent;
+		font-family: inherit;
+		font-size: 1.25rem;
+		line-height: 1;
+		color: inherit;
+		cursor: pointer;
+		transition: background-color var(--transition-fast, 150ms ease);
+	}
+
+	.chip__remove:hover:not(:disabled) {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.chip__remove:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	.chip__remove:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	/* Clickable state */
+	.chip--clickable {
+		cursor: pointer;
+	}
+
+	.chip--clickable:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	/* Disabled state */
+	.chip--disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* Size variants - all meet 44px touch target */
+	.chip--sm {
+		min-height: var(--touch-target-min, 44px);
+		padding: 0.25rem 0.75rem;
+		font-size: var(--text-xs, 0.75rem);
+	}
+
+	.chip--sm .chip__icon {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+
+	.chip--sm .chip__remove {
+		width: 2.5rem;
+		height: 2.5rem;
+		font-size: 1rem;
+	}
+
+	.chip--md {
+		min-height: var(--touch-target-min, 44px);
+		padding: 0.375rem 1rem;
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.chip--md .chip__icon {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.chip--md .chip__remove {
+		width: 2.75rem;
+		height: 2.75rem;
+		font-size: 1.25rem;
+	}
+
+	.chip--lg {
+		min-height: 3rem;
+		padding: 0.5rem 1.25rem;
+		font-size: var(--text-base, 1rem);
+	}
+
+	.chip--lg .chip__icon {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+
+	.chip--lg .chip__remove {
+		width: 3rem;
+		height: 3rem;
+		font-size: 1.5rem;
+	}
+
+	/* Filled variant - default */
+	.chip--filled.chip--default {
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+		border-color: transparent;
+	}
+
+	.chip--filled.chip--default.chip--clickable:hover:not(.chip--disabled) {
+		background: var(--color-border, #e5e7eb);
+	}
+
+	.chip--filled.chip--default .chip__remove:hover:not(:disabled) {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.chip--filled.chip--primary {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		border-color: transparent;
+	}
+
+	.chip--filled.chip--primary.chip--clickable:hover:not(.chip--disabled) {
+		background: var(--color-primary-hover, #2563eb);
+	}
+
+	.chip--filled.chip--primary .chip__remove:hover:not(:disabled) {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.chip--filled.chip--success {
+		background: var(--color-success, #10b981);
+		color: var(--color-text-inverse, #ffffff);
+		border-color: transparent;
+	}
+
+	.chip--filled.chip--success.chip--clickable:hover:not(.chip--disabled) {
+		background: var(--color-success-hover, #059669);
+	}
+
+	.chip--filled.chip--success .chip__remove:hover:not(:disabled) {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.chip--filled.chip--warning {
+		background: var(--color-warning, #f59e0b);
+		color: var(--color-text, #1f2937);
+		border-color: transparent;
+	}
+
+	.chip--filled.chip--warning.chip--clickable:hover:not(.chip--disabled) {
+		background: var(--color-warning-hover, #d97706);
+	}
+
+	.chip--filled.chip--warning .chip__remove:hover:not(:disabled) {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.chip--filled.chip--error {
+		background: var(--color-error, #ef4444);
+		color: var(--color-text-inverse, #ffffff);
+		border-color: transparent;
+	}
+
+	.chip--filled.chip--error.chip--clickable:hover:not(.chip--disabled) {
+		background: var(--color-error-hover, #dc2626);
+	}
+
+	.chip--filled.chip--error .chip__remove:hover:not(:disabled) {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	/* Outlined variant */
+	.chip--outlined.chip--default {
+		background: transparent;
+		color: var(--color-text, #1f2937);
+		border-color: var(--color-border, #e5e7eb);
+	}
+
+	.chip--outlined.chip--default.chip--clickable:hover:not(.chip--disabled) {
+		background: var(--color-bg-muted, #f3f4f6);
+		border-color: var(--color-border-hover, #d1d5db);
+	}
+
+	.chip--outlined.chip--default .chip__remove:hover:not(:disabled) {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.chip--outlined.chip--primary {
+		background: transparent;
+		color: var(--color-primary, #3b82f6);
+		border-color: var(--color-primary, #3b82f6);
+	}
+
+	.chip--outlined.chip--primary.chip--clickable:hover:not(.chip--disabled) {
+		background: rgba(59, 130, 246, 0.1);
+		border-color: var(--color-primary-hover, #2563eb);
+	}
+
+	.chip--outlined.chip--primary .chip__remove:hover:not(:disabled) {
+		background-color: rgba(59, 130, 246, 0.1);
+	}
+
+	.chip--outlined.chip--success {
+		background: transparent;
+		color: var(--color-success, #10b981);
+		border-color: var(--color-success, #10b981);
+	}
+
+	.chip--outlined.chip--success.chip--clickable:hover:not(.chip--disabled) {
+		background: rgba(16, 185, 129, 0.1);
+		border-color: var(--color-success-hover, #059669);
+	}
+
+	.chip--outlined.chip--success .chip__remove:hover:not(:disabled) {
+		background-color: rgba(16, 185, 129, 0.1);
+	}
+
+	.chip--outlined.chip--warning {
+		background: transparent;
+		color: var(--color-warning, #f59e0b);
+		border-color: var(--color-warning, #f59e0b);
+	}
+
+	.chip--outlined.chip--warning.chip--clickable:hover:not(.chip--disabled) {
+		background: rgba(245, 158, 11, 0.1);
+		border-color: var(--color-warning-hover, #d97706);
+	}
+
+	.chip--outlined.chip--warning .chip__remove:hover:not(:disabled) {
+		background-color: rgba(245, 158, 11, 0.1);
+	}
+
+	.chip--outlined.chip--error {
+		background: transparent;
+		color: var(--color-error, #ef4444);
+		border-color: var(--color-error, #ef4444);
+	}
+
+	.chip--outlined.chip--error.chip--clickable:hover:not(.chip--disabled) {
+		background: rgba(239, 68, 68, 0.1);
+		border-color: var(--color-error-hover, #dc2626);
+	}
+
+	.chip--outlined.chip--error .chip__remove:hover:not(:disabled) {
+		background-color: rgba(239, 68, 68, 0.1);
+	}
+
+	/* Soft variant */
+	.chip--soft.chip--default {
+		background: rgba(107, 114, 128, 0.1);
+		color: var(--color-text, #1f2937);
+		border-color: transparent;
+	}
+
+	.chip--soft.chip--default.chip--clickable:hover:not(.chip--disabled) {
+		background: rgba(107, 114, 128, 0.2);
+	}
+
+	.chip--soft.chip--default .chip__remove:hover:not(:disabled) {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.chip--soft.chip--primary {
+		background: rgba(59, 130, 246, 0.15);
+		color: var(--color-primary, #3b82f6);
+		border-color: transparent;
+	}
+
+	.chip--soft.chip--primary.chip--clickable:hover:not(.chip--disabled) {
+		background: rgba(59, 130, 246, 0.25);
+	}
+
+	.chip--soft.chip--primary .chip__remove:hover:not(:disabled) {
+		background-color: rgba(59, 130, 246, 0.2);
+	}
+
+	.chip--soft.chip--success {
+		background: rgba(16, 185, 129, 0.15);
+		color: var(--color-success, #10b981);
+		border-color: transparent;
+	}
+
+	.chip--soft.chip--success.chip--clickable:hover:not(.chip--disabled) {
+		background: rgba(16, 185, 129, 0.25);
+	}
+
+	.chip--soft.chip--success .chip__remove:hover:not(:disabled) {
+		background-color: rgba(16, 185, 129, 0.2);
+	}
+
+	.chip--soft.chip--warning {
+		background: rgba(245, 158, 11, 0.15);
+		color: var(--color-warning, #f59e0b);
+		border-color: transparent;
+	}
+
+	.chip--soft.chip--warning.chip--clickable:hover:not(.chip--disabled) {
+		background: rgba(245, 158, 11, 0.25);
+	}
+
+	.chip--soft.chip--warning .chip__remove:hover:not(:disabled) {
+		background-color: rgba(245, 158, 11, 0.2);
+	}
+
+	.chip--soft.chip--error {
+		background: rgba(239, 68, 68, 0.15);
+		color: var(--color-error, #ef4444);
+		border-color: transparent;
+	}
+
+	.chip--soft.chip--error.chip--clickable:hover:not(.chip--disabled) {
+		background: rgba(239, 68, 68, 0.25);
+	}
+
+	.chip--soft.chip--error .chip__remove:hover:not(:disabled) {
+		background-color: rgba(239, 68, 68, 0.2);
+	}
+
+	/* Selected state */
+	.chip--selected.chip--outlined,
+	.chip--selected.chip--soft {
+		border-width: 2px;
+		padding: calc(0.375rem - 1px) calc(1rem - 1px);
+	}
+
+	.chip--selected.chip--outlined.chip--sm,
+	.chip--selected.chip--soft.chip--sm {
+		padding: calc(0.25rem - 1px) calc(0.75rem - 1px);
+	}
+
+	.chip--selected.chip--outlined.chip--lg,
+	.chip--selected.chip--soft.chip--lg {
+		padding: calc(0.5rem - 1px) calc(1.25rem - 1px);
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { ChipVariant, ChipColor, ChipSize } from '../../types/index.js';
+interface Props {
+    variant?: ChipVariant;
+    color?: ChipColor;
+    size?: ChipSize;
+    removable?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    class?: string;
+    onclick?: () => void;
+    onremove?: () => void;
+    children?: import('svelte').Snippet;
+    leadingIcon?: import('svelte').Snippet;
+}
+declare const Chip: import("svelte").Component<Props, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/components/Chip/ChipGroup.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+
+	interface Props {
+		value?: string | string[];
+		multiple?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		value = $bindable([]),
+		multiple = false,
+		class: className = '',
+		children
+	}: Props = $props();
+
+	// Normalize value to always be an array internally
+	let selectedValues = $derived.by(() => {
+		if (Array.isArray(value)) {
+			return value;
+		}
+		return value ? [value] : [];
+	});
+
+	function isSelected(chipValue: string): boolean {
+		return selectedValues.includes(chipValue);
+	}
+
+	function toggleSelection(chipValue: string) {
+		if (multiple) {
+			// Multiple selection mode
+			if (Array.isArray(value)) {
+				if (selectedValues.includes(chipValue)) {
+					value = selectedValues.filter((v) => v !== chipValue);
+				} else {
+					value = [...selectedValues, chipValue];
+				}
+			} else {
+				// Convert to array if not already
+				value = selectedValues.includes(chipValue) ? [] : [chipValue];
+			}
+		} else {
+			// Single selection mode
+			if (Array.isArray(value)) {
+				value = selectedValues.includes(chipValue) ? [] : [chipValue];
+			} else {
+				value = value === chipValue ? '' : chipValue;
+			}
+		}
+	}
+
+	// Provide context for child chips
+	setContext('chipGroup', {
+		isSelected,
+		toggleSelection,
+		get multiple() {
+			return multiple;
+		}
+	});
+</script>
+
+<div class="chip-group {className}" role="group">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.chip-group {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-sm, 0.5rem);
+		align-items: center;
+	}
+</style>

package/dist/components/Chip/ChipGroup.svelte.d.ts

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

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

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

package/dist/components/Chip/index.js

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