@aspect-ops/exon-ui 0.0.1 → 0.0.3

package/dist/components/Modal/ModalFooter.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { ModalFooterProps } from '../../types/index.js';
+
+	interface Props extends ModalFooterProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="modal-footer {className}">
+	{@render children?.()}
+</div>
+
+<style>
+	:global(.modal-footer) {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		padding: var(--space-lg, 1rem) var(--space-xl, 1.5rem);
+		border-top: 1px solid var(--color-border, #e5e7eb);
+		gap: var(--space-md, 0.75rem);
+		flex-shrink: 0;
+		flex-wrap: wrap;
+	}
+
+	/* Mobile: Stack buttons vertically */
+	@media (max-width: 640px) {
+		:global(.modal-footer) {
+			flex-direction: column-reverse;
+		}
+
+		:global(.modal-footer > *) {
+			width: 100%;
+		}
+	}
+</style>

package/dist/components/Modal/ModalFooter.svelte.d.ts

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

package/dist/components/Modal/ModalHeader.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { ModalHeaderProps } from '../../types/index.js';
+	import { Dialog } from 'bits-ui';
+
+	interface Props extends ModalHeaderProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="modal-header {className}">
+	<Dialog.Title class="modal-title">
+		{@render children?.()}
+	</Dialog.Title>
+	<Dialog.Close class="modal-close" aria-label="Close modal">&times;</Dialog.Close>
+</div>
+
+<style>
+	:global(.modal-header) {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--space-lg, 1rem) var(--space-xl, 1.5rem);
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+		gap: var(--space-md, 0.75rem);
+		flex-shrink: 0;
+	}
+
+	:global(.modal-title) {
+		font-size: var(--font-size-lg, 1.125rem);
+		font-weight: var(--font-weight-semibold, 600);
+		color: var(--color-text, #1f2937);
+		line-height: var(--line-height-tight, 1.25);
+		margin: 0;
+		flex: 1;
+	}
+
+	:global(.modal-close) {
+		/* F20: Minimum 44x44px touch target */
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+		width: 2.75rem;
+		height: 2.75rem;
+		border: none;
+		background: transparent;
+		color: var(--color-text-secondary, #6b7280);
+		font-size: var(--font-size-2xl, 1.5rem);
+		line-height: 1;
+		cursor: pointer;
+		border-radius: var(--radius-sm, 0.25rem);
+		transition: all 150ms ease;
+		flex-shrink: 0;
+		padding: 0;
+	}
+
+	:global(.modal-close:hover) {
+		background: var(--color-bg-secondary, #f3f4f6);
+		color: var(--color-text, #1f2937);
+	}
+
+	:global(.modal-close:focus-visible) {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	:global(.modal-close:active) {
+		transform: scale(0.95);
+	}
+</style>

package/dist/components/Modal/ModalHeader.svelte.d.ts

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

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

@@ -0,0 +1,4 @@
+export { default as Modal } from './Modal.svelte';
+export { default as ModalHeader } from './ModalHeader.svelte';
+export { default as ModalBody } from './ModalBody.svelte';
+export { default as ModalFooter } from './ModalFooter.svelte';

package/dist/components/Modal/index.js

@@ -0,0 +1,4 @@
+export { default as Modal } from './Modal.svelte';
+export { default as ModalHeader } from './ModalHeader.svelte';
+export { default as ModalBody } from './ModalBody.svelte';
+export { default as ModalFooter } from './ModalFooter.svelte';

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { PopoverProps } from '../../types/index.js';
+	import { Popover as BitsPopover } from 'bits-ui';
+
+	interface Props extends PopoverProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<BitsPopover.Root>
+	{@render children?.()}
+</BitsPopover.Root>

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

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

package/dist/components/Popover/PopoverContent.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import type { PopoverContentProps } from '../../types/index.js';
+	import { Popover as BitsPopover } from 'bits-ui';
+
+	interface Props extends PopoverContentProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { side = 'bottom', class: className = '', children }: Props = $props();
+</script>
+
+<BitsPopover.Portal>
+	<BitsPopover.Content {side} class="popover-content {className}">
+		{@render children?.()}
+	</BitsPopover.Content>
+</BitsPopover.Portal>
+
+<style>
+	/* Popover content */
+	:global(.popover-content) {
+		/* MUST set font-family explicitly - portal doesn't inherit (F33) */
+		font-family: var(--exon-font-sans, var(--font-family, system-ui, -apple-system, sans-serif));
+		background: var(--exon-popover-bg, white);
+		border: 1px solid var(--exon-color-neutral-200, #e5e7eb);
+		border-radius: var(--exon-radius-lg, 0.5rem);
+		padding: 1rem;
+		box-shadow: var(--exon-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+		min-width: 12.5rem;
+		max-width: 20rem;
+		z-index: 150;
+	}
+
+	/* Fade-in animation */
+	:global(.popover-content[data-state='open']) {
+		animation: popover-fade-in 200ms ease-out;
+	}
+
+	:global(.popover-content[data-state='closed']) {
+		animation: popover-fade-out 150ms ease-in;
+	}
+
+	@keyframes -global-popover-fade-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes -global-popover-fade-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+</style>

package/dist/components/Popover/PopoverContent.svelte.d.ts

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

package/dist/components/Popover/PopoverTrigger.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { PopoverTriggerProps } from '../../types/index.js';
+	import { Popover as BitsPopover } from 'bits-ui';
+
+	interface Props extends PopoverTriggerProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<BitsPopover.Trigger class={className}>
+	{@render children?.()}
+</BitsPopover.Trigger>

package/dist/components/Popover/PopoverTrigger.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.svelte';
+export { default as PopoverTrigger } from './PopoverTrigger.svelte';
+export { default as PopoverContent } from './PopoverContent.svelte';

package/dist/components/Popover/index.js

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.svelte';
+export { default as PopoverTrigger } from './PopoverTrigger.svelte';
+export { default as PopoverContent } from './PopoverContent.svelte';

package/dist/components/Progress/ProgressBar.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { ProgressBarProps } from '../../types/index.js';
+
+	interface Props extends ProgressBarProps {
+		value?: number;
+		max?: number;
+		indeterminate?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	}
+
+	let {
+		value = 0,
+		max = 100,
+		indeterminate = false,
+		size = 'md',
+		class: className = ''
+	}: Props = $props();
+
+	// Calculate percentage for determinate mode
+	const percentage = $derived(indeterminate ? 0 : Math.min(100, Math.max(0, (value / max) * 100)));
+</script>
+
+<div
+	class="progress-bar progress-bar--{size} {className}"
+	role="progressbar"
+	aria-valuemin="0"
+	aria-valuemax={max}
+	aria-valuenow={indeterminate ? undefined : value}
+	aria-label={indeterminate ? 'Loading' : `${Math.round(percentage)}% complete`}
+>
+	<div
+		class="progress-bar__fill"
+		class:progress-bar__fill--indeterminate={indeterminate}
+		style="width: {indeterminate ? '30%' : `${percentage}%`}"
+	></div>
+</div>
+
+<style>
+	.progress-bar {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		background-color: var(--exon-progress-track, var(--color-neutral-200, #e5e7eb));
+		border-radius: var(--exon-radius-full, 9999px);
+		font-family: inherit;
+	}
+
+	/* Size variants */
+	.progress-bar--sm {
+		height: 0.25rem;
+	}
+
+	.progress-bar--md {
+		height: 0.5rem;
+	}
+
+	.progress-bar--lg {
+		height: 0.75rem;
+	}
+
+	/* Progress fill */
+	.progress-bar__fill {
+		height: 100%;
+		background-color: var(--exon-progress-fill, var(--color-primary, #3b82f6));
+		border-radius: var(--exon-radius-full, 9999px);
+		transition: width 0.3s ease;
+	}
+
+	/* Indeterminate animation */
+	.progress-bar__fill--indeterminate {
+		animation: progress-indeterminate 1.5s ease-in-out infinite;
+	}
+
+	@keyframes progress-indeterminate {
+		0% {
+			transform: translateX(-100%);
+		}
+		50% {
+			transform: translateX(350%);
+		}
+		100% {
+			transform: translateX(-100%);
+		}
+	}
+</style>

package/dist/components/Progress/ProgressBar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ProgressBarProps } from '../../types/index.js';
+interface Props extends ProgressBarProps {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/Progress/ProgressCircle.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import type { ProgressCircleProps } from '../../types/index.js';
+
+	interface Props extends ProgressCircleProps {
+		value?: number;
+		max?: number;
+		indeterminate?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		strokeWidth?: number;
+		class?: string;
+	}
+
+	let {
+		value = 0,
+		max = 100,
+		indeterminate = false,
+		size = 'md',
+		strokeWidth = 4,
+		class: className = ''
+	}: Props = $props();
+
+	// SVG constants
+	const radius = 45;
+	const circumference = 2 * Math.PI * radius;
+
+	// Calculate percentage and stroke-dashoffset for determinate mode
+	const percentage = $derived(indeterminate ? 0 : Math.min(100, Math.max(0, (value / max) * 100)));
+	const strokeDashoffset = $derived(circumference * (1 - percentage / 100));
+</script>
+
+<div
+	class="progress-circle progress-circle--{size} {className}"
+	role="progressbar"
+	aria-valuemin="0"
+	aria-valuemax={max}
+	aria-valuenow={indeterminate ? undefined : value}
+	aria-label={indeterminate ? 'Loading' : `${Math.round(percentage)}% complete`}
+>
+	<svg class="progress-circle__svg" viewBox="0 0 100 100">
+		<!-- Track circle (background) -->
+		<circle
+			class="progress-circle__track"
+			cx="50"
+			cy="50"
+			r={radius}
+			fill="none"
+			stroke-width={strokeWidth}
+		/>
+
+		<!-- Progress circle (foreground) -->
+		<circle
+			class="progress-circle__fill"
+			class:progress-circle__fill--indeterminate={indeterminate}
+			cx="50"
+			cy="50"
+			r={radius}
+			fill="none"
+			stroke-width={strokeWidth}
+			stroke-dasharray={circumference}
+			stroke-dashoffset={indeterminate ? circumference * 0.75 : strokeDashoffset}
+			stroke-linecap="round"
+		/>
+	</svg>
+</div>
+
+<style>
+	.progress-circle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-family: inherit;
+	}
+
+	/* Size variants */
+	.progress-circle--sm {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+
+	.progress-circle--md {
+		width: 2.5rem;
+		height: 2.5rem;
+	}
+
+	.progress-circle--lg {
+		width: 3.5rem;
+		height: 3.5rem;
+	}
+
+	.progress-circle__svg {
+		width: 100%;
+		height: 100%;
+		transform: rotate(-90deg);
+	}
+
+	/* Track circle (background) */
+	.progress-circle__track {
+		stroke: var(--exon-progress-track, var(--color-neutral-200, #e5e7eb));
+	}
+
+	/* Progress circle (foreground fill) */
+	.progress-circle__fill {
+		stroke: var(--exon-progress-fill, var(--color-primary, #3b82f6));
+		transition: stroke-dashoffset 0.3s ease;
+	}
+
+	/* Indeterminate animation */
+	.progress-circle__fill--indeterminate {
+		animation:
+			progress-circle-rotate 1.5s linear infinite,
+			progress-circle-dash 1.5s ease-in-out infinite;
+	}
+
+	@keyframes progress-circle-rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	@keyframes progress-circle-dash {
+		0% {
+			stroke-dashoffset: 282.74;
+		}
+		50% {
+			stroke-dashoffset: 70.685;
+		}
+		100% {
+			stroke-dashoffset: 282.74;
+		}
+	}
+</style>

package/dist/components/Progress/ProgressCircle.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ProgressCircleProps } from '../../types/index.js';
+interface Props extends ProgressCircleProps {
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    strokeWidth?: number;
+    class?: string;
+}
+declare const ProgressCircle: import("svelte").Component<Props, {}, "">;
+type ProgressCircle = ReturnType<typeof ProgressCircle>;
+export default ProgressCircle;

package/dist/components/Progress/Spinner.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { SpinnerProps } from '../../types/index.js';
+
+	interface Props extends SpinnerProps {
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	}
+
+	let { size = 'md', class: className = '' }: Props = $props();
+</script>
+
+<div class="spinner spinner--{size} {className}" role="status" aria-label="Loading">
+	<span class="spinner__visually-hidden">Loading...</span>
+</div>
+
+<style>
+	.spinner {
+		display: inline-block;
+		border-style: solid;
+		border-color: var(--exon-spinner-color, var(--color-primary, #3b82f6)) transparent transparent
+			transparent;
+		border-radius: 50%;
+		animation: spinner-rotate 0.75s linear infinite;
+		font-family: inherit;
+	}
+
+	/* Size variants - diameter and border-width */
+	.spinner--sm {
+		width: 1rem;
+		height: 1rem;
+		border-width: 2px;
+	}
+
+	.spinner--md {
+		width: 1.5rem;
+		height: 1.5rem;
+		border-width: 2px;
+	}
+
+	.spinner--lg {
+		width: 2rem;
+		height: 2rem;
+		border-width: 3px;
+	}
+
+	/* Visually hidden text for screen readers */
+	.spinner__visually-hidden {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+
+	/* Rotation animation */
+	@keyframes spinner-rotate {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/dist/components/Progress/Spinner.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SpinnerProps } from '../../types/index.js';
+interface Props extends SpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

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

@@ -0,0 +1,3 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as ProgressCircle } from './ProgressCircle.svelte';
+export { default as Spinner } from './Spinner.svelte';

package/dist/components/Progress/index.js

@@ -0,0 +1,3 @@
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as ProgressCircle } from './ProgressCircle.svelte';
+export { default as Spinner } from './Spinner.svelte';