@aspect-ops/exon-ui 0.0.2 → 0.1.0

package/dist/components/Table/TableHeader.svelte.d.ts

@@ -0,0 +1,32 @@
+interface Props {
+    /**
+     * Enable sortable functionality with click/keyboard interaction
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Current sort direction (when sortable is true)
+     * @default null
+     */
+    sortDirection?: 'asc' | 'desc' | null;
+    /**
+     * Callback fired when sort is triggered (click or keyboard)
+     */
+    onsort?: () => void;
+    /**
+     * Text alignment
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Header cell content
+     */
+    children?: import('svelte').Snippet;
+}
+declare const TableHeader: import("svelte").Component<Props, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/Table/TableRow.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	interface Props {
+		/**
+		 * Marks the row as selected
+		 * @default false
+		 */
+		selected?: boolean;
+		/**
+		 * Makes the row interactive with hover/active states
+		 * @default false
+		 */
+		clickable?: boolean;
+		/**
+		 * Disables the row
+		 * @default false
+		 */
+		disabled?: boolean;
+		/**
+		 * Additional CSS classes
+		 */
+		class?: string;
+		/**
+		 * Table cells content
+		 */
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		selected = false,
+		clickable = false,
+		disabled = false,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+<tr
+	class="table-row {selected ? 'table-row--selected' : ''} {clickable
+		? 'table-row--clickable'
+		: ''} {disabled ? 'table-row--disabled' : ''} {className}"
+	role={clickable ? 'button' : undefined}
+	aria-selected={selected ? 'true' : undefined}
+	aria-disabled={disabled ? 'true' : undefined}
+	tabindex={clickable && !disabled ? 0 : undefined}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</tr>
+
+<style>
+	.table-row {
+		font-family: inherit;
+		transition: background-color var(--transition-fast, 150ms ease);
+	}
+
+	/* Selected state */
+	.table-row--selected {
+		background-color: var(--color-primary-bg, rgba(59, 130, 246, 0.1));
+	}
+
+	/* Clickable state */
+	.table-row--clickable {
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.table-row--clickable:hover:not(.table-row--disabled) {
+		background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
+	}
+
+	.table-row--clickable:active:not(.table-row--disabled) {
+		background-color: var(--color-bg-active, rgba(0, 0, 0, 0.08));
+	}
+
+	.table-row--clickable:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	/* Selected + Clickable hover state */
+	.table-row--selected.table-row--clickable:hover:not(.table-row--disabled) {
+		background-color: var(--color-primary-bg-hover, rgba(59, 130, 246, 0.15));
+	}
+
+	/* Disabled state */
+	.table-row--disabled {
+		opacity: 0.5;
+		pointer-events: none;
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/Table/TableRow.svelte.d.ts

@@ -0,0 +1,28 @@
+interface Props {
+    /**
+     * Marks the row as selected
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Makes the row interactive with hover/active states
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Disables the row
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Table cells content
+     */
+    children?: import('svelte').Snippet;
+}
+declare const TableRow: import("svelte").Component<Props, {}, "">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

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

@@ -0,0 +1,6 @@
+export { default as Table } from './Table.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableRow } from './TableRow.svelte';
+export { default as TableCell } from './TableCell.svelte';

package/dist/components/Table/index.js

@@ -0,0 +1,6 @@
+export { default as Table } from './Table.svelte';
+export { default as TableHead } from './TableHead.svelte';
+export { default as TableHeader } from './TableHeader.svelte';
+export { default as TableBody } from './TableBody.svelte';
+export { default as TableRow } from './TableRow.svelte';
+export { default as TableCell } from './TableCell.svelte';

package/dist/components/Tag/Tag.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import type { TagVariant, TagSize } from '../../types/index.js';
+
+	interface Props {
+		variant?: TagVariant;
+		size?: TagSize;
+		dismissible?: boolean;
+		ondismiss?: () => void;
+		class?: string;
+		children?: import('svelte').Snippet;
+		icon?: import('svelte').Snippet;
+	}
+
+	let {
+		variant = 'default',
+		size = 'md',
+		dismissible = false,
+		ondismiss,
+		class: className = '',
+		children,
+		icon
+	}: Props = $props();
+
+	function handleDismiss() {
+		ondismiss?.();
+	}
+</script>
+
+<span class="tag tag--{variant} tag--{size} {className}" role={dismissible ? undefined : 'status'}>
+	{#if icon}
+		<span class="tag__icon" aria-hidden="true">
+			{@render icon()}
+		</span>
+	{/if}
+	<span class="tag__label">
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
+	{#if dismissible}
+		<button type="button" class="tag__close" onclick={handleDismiss} aria-label="Remove tag">
+			×
+		</button>
+	{/if}
+</span>
+
+<style>
+	.tag {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		border-radius: var(--radius-full, 9999px);
+		font-family: inherit;
+		font-weight: 500;
+		line-height: 1;
+		white-space: nowrap;
+		transition: background-color 0.2s ease;
+	}
+
+	.tag__label {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.tag__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.tag__close {
+		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;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.tag__close:hover {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.tag__close:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	/* Size variants */
+	.tag--sm {
+		font-size: var(--text-xs, 0.75rem);
+		padding: 0.125rem var(--space-xs, 0.25rem);
+	}
+
+	.tag--sm .tag__close {
+		width: 2rem;
+		height: 2rem;
+		font-size: 1rem;
+	}
+
+	.tag--md {
+		font-size: var(--text-sm, 0.875rem);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+	}
+
+	.tag--md .tag__close {
+		width: 2.75rem;
+		height: 2.75rem;
+		font-size: 1.25rem;
+	}
+
+	.tag--lg {
+		font-size: var(--text-base, 1rem);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 0.75rem);
+	}
+
+	.tag--lg .tag__close {
+		width: 2.75rem;
+		height: 2.75rem;
+		font-size: 1.5rem;
+	}
+
+	/* Color variants */
+	.tag--default {
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+	}
+
+	.tag--default .tag__close:hover {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.tag--primary {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.tag--primary .tag__close:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.tag--secondary {
+		background: var(--color-secondary, #6b7280);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.tag--secondary .tag__close:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.tag--success {
+		background: var(--color-success, #10b981);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.tag--success .tag__close:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+
+	.tag--warning {
+		background: var(--color-warning, #f59e0b);
+		color: var(--color-text, #1f2937);
+	}
+
+	.tag--warning .tag__close:hover {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+
+	.tag--error {
+		background: var(--color-error, #ef4444);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.tag--error .tag__close:hover {
+		background-color: rgba(255, 255, 255, 0.2);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { TagVariant, TagSize } from '../../types/index.js';
+interface Props {
+    variant?: TagVariant;
+    size?: TagSize;
+    dismissible?: boolean;
+    ondismiss?: () => void;
+    class?: string;
+    children?: import('svelte').Snippet;
+    icon?: import('svelte').Snippet;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

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

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

package/dist/components/Tag/index.js

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