@aspect-ops/exon-ui 0.0.2 → 0.1.0

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

@@ -0,0 +1,19 @@
+import type { InputSize } from '../../types/index.js';
+interface Props {
+    value?: Date | null;
+    placeholder?: string;
+    min?: Date | null;
+    max?: Date | null;
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    size?: InputSize;
+    format?: string;
+    locale?: string;
+    class?: string;
+    onchange?: (date: Date | null) => void;
+    onclear?: () => void;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

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

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

package/dist/components/DatePicker/index.js

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

package/dist/components/Divider/Divider.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { DividerOrientation } from '../../types/index.js';
+
+	interface Props {
+		orientation?: DividerOrientation;
+		decorative?: boolean;
+		class?: string;
+	}
+
+	let { orientation = 'horizontal', decorative = true, class: className = '' }: Props = $props();
+</script>
+
+{#if decorative}
+	<hr class="divider {className}" data-orientation={orientation} aria-hidden="true" />
+{:else}
+	<hr class="divider {className}" data-orientation={orientation} />
+{/if}
+
+<style>
+	.divider {
+		border: none;
+		background-color: var(--color-border, #e5e7eb);
+		font-family: inherit;
+		margin: 0;
+	}
+
+	/* Horizontal divider */
+	.divider[data-orientation='horizontal'] {
+		width: 100%;
+		height: 1px;
+	}
+
+	/* Vertical divider */
+	.divider[data-orientation='vertical'] {
+		width: 1px;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { DividerOrientation } from '../../types/index.js';
+interface Props {
+    orientation?: DividerOrientation;
+    decorative?: boolean;
+    class?: string;
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

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

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

package/dist/components/Divider/index.js

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

package/dist/components/EmptyState/EmptyState.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import type { EmptyStateSize } from '../../types/index.js';
+
+	interface Props {
+		title: string;
+		description?: string;
+		size?: EmptyStateSize;
+		class?: string;
+		icon?: import('svelte').Snippet;
+		action?: import('svelte').Snippet;
+	}
+
+	let { title, description, size = 'md', class: className = '', icon, action }: Props = $props();
+</script>
+
+<div class="empty-state empty-state--{size} {className}" role="status" aria-live="polite">
+	{#if icon}
+		<div class="empty-state__icon" aria-hidden="true">
+			{@render icon()}
+		</div>
+	{:else}
+		<div class="empty-state__icon" aria-hidden="true">
+			<svg
+				width="64"
+				height="64"
+				viewBox="0 0 64 64"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<rect
+					x="12"
+					y="16"
+					width="40"
+					height="36"
+					rx="2"
+					stroke="currentColor"
+					stroke-width="2"
+					fill="none"
+				/>
+				<path d="M12 24 L52 24" stroke="currentColor" stroke-width="2" />
+				<circle cx="20" cy="20" r="1.5" fill="currentColor" />
+				<circle cx="26" cy="20" r="1.5" fill="currentColor" />
+				<circle cx="32" cy="20" r="1.5" fill="currentColor" />
+			</svg>
+		</div>
+	{/if}
+
+	<h3 class="empty-state__title">{title}</h3>
+
+	{#if description}
+		<p class="empty-state__description">{description}</p>
+	{/if}
+
+	{#if action}
+		<div class="empty-state__action">
+			{@render action()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		padding: var(--space-xl, 1.5rem);
+		max-width: 400px;
+		margin: 0 auto;
+	}
+
+	.empty-state__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--color-text-muted, #9ca3af);
+		margin-bottom: var(--space-md, 0.75rem);
+	}
+
+	.empty-state__title {
+		margin: 0;
+		margin-bottom: var(--space-xs, 0.25rem);
+		font-family: inherit;
+		font-weight: 600;
+		line-height: 1.25;
+		color: var(--color-text, #1f2937);
+	}
+
+	.empty-state__description {
+		margin: 0;
+		margin-bottom: var(--space-md, 0.75rem);
+		font-family: inherit;
+		line-height: 1.5;
+		color: var(--color-text-secondary, #6b7280);
+	}
+
+	.empty-state__action {
+		margin-top: var(--space-md, 0.75rem);
+	}
+
+	/* Size variants */
+	.empty-state--sm .empty-state__icon {
+		width: 3rem;
+		height: 3rem;
+	}
+
+	.empty-state--sm .empty-state__icon svg {
+		width: 3rem;
+		height: 3rem;
+	}
+
+	.empty-state--sm .empty-state__title {
+		font-size: var(--text-base, 1rem);
+	}
+
+	.empty-state--sm .empty-state__description {
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.empty-state--md .empty-state__icon {
+		width: 4rem;
+		height: 4rem;
+	}
+
+	.empty-state--md .empty-state__icon svg {
+		width: 4rem;
+		height: 4rem;
+	}
+
+	.empty-state--md .empty-state__title {
+		font-size: var(--text-lg, 1.125rem);
+	}
+
+	.empty-state--md .empty-state__description {
+		font-size: var(--text-base, 1rem);
+	}
+
+	.empty-state--lg .empty-state__icon {
+		width: 5rem;
+		height: 5rem;
+	}
+
+	.empty-state--lg .empty-state__icon svg {
+		width: 5rem;
+		height: 5rem;
+	}
+
+	.empty-state--lg .empty-state__title {
+		font-size: var(--text-xl, 1.25rem);
+	}
+
+	.empty-state--lg .empty-state__description {
+		font-size: var(--text-lg, 1.125rem);
+	}
+
+	/* Mobile-first responsive adjustments */
+	@media (min-width: 768px) {
+		.empty-state {
+			padding: var(--space-2xl, 2rem);
+		}
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { EmptyStateSize } from '../../types/index.js';
+interface Props {
+    title: string;
+    description?: string;
+    size?: EmptyStateSize;
+    class?: string;
+    icon?: import('svelte').Snippet;
+    action?: import('svelte').Snippet;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

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

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

package/dist/components/EmptyState/index.js

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

package/dist/components/FAB/FAB.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+	import type { FABProps, FABSize, FABPosition } from '../../types/index.js';
+
+	interface Props extends FABProps {
+		onclick?: (e: MouseEvent) => void;
+		children?: import('svelte').Snippet;
+		label?: import('svelte').Snippet;
+	}
+
+	let {
+		size = 'md',
+		position = 'bottom-right',
+		extended = false,
+		disabled = false,
+		class: className = '',
+		onclick,
+		children,
+		label
+	}: Props = $props();
+
+	// Size mappings: sm=44px, md=56px, lg=72px (F20 compliance)
+	const sizeMap: Record<FABSize, string> = {
+		sm: '44px',
+		md: '56px',
+		lg: '72px'
+	};
+
+	const fabSize = $derived(sizeMap[size]);
+</script>
+
+<button
+	type="button"
+	class="fab fab--{size} fab--{position} {extended ? 'fab--extended' : ''} {className}"
+	class:fab--disabled={disabled}
+	{disabled}
+	aria-disabled={disabled}
+	style="--fab-size: {fabSize};"
+	{onclick}
+>
+	<span class="fab__icon">
+		{#if children}
+			{@render children()}
+		{/if}
+	</span>
+	{#if extended && label}
+		<span class="fab__label">
+			{@render label()}
+		</span>
+	{/if}
+</button>
+
+<style>
+	.fab {
+		position: fixed;
+		z-index: 50;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm, 0.5rem);
+		width: var(--fab-size, 56px);
+		height: var(--fab-size, 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: var(--text-base, 1rem);
+		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;
+	}
+
+	/* Size variants - all maintain F20 minimum touch target */
+	.fab--sm {
+		width: 44px;
+		height: 44px;
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	.fab--md {
+		width: 56px;
+		height: 56px;
+		font-size: var(--text-base, 1rem);
+	}
+
+	.fab--lg {
+		width: 72px;
+		height: 72px;
+		font-size: var(--text-lg, 1.125rem);
+	}
+
+	/* Extended variant */
+	.fab--extended {
+		width: auto;
+		min-width: var(--fab-size, 56px);
+		padding: 0 var(--space-lg, 1.5rem);
+		border-radius: var(--radius-xl, 1rem);
+	}
+
+	.fab--extended.fab--sm {
+		padding: 0 var(--space-md, 1rem);
+		min-height: 44px;
+		height: auto;
+	}
+
+	.fab--extended.fab--md {
+		padding: 0 var(--space-lg, 1.5rem);
+		min-height: 56px;
+		height: auto;
+	}
+
+	.fab--extended.fab--lg {
+		padding: 0 var(--space-xl, 2rem);
+		min-height: 72px;
+		height: auto;
+	}
+
+	/* Position variants with safe area insets (F21) */
+	.fab--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--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--bottom-center {
+		bottom: calc(var(--space-lg, 1.5rem) + env(safe-area-inset-bottom, 0px));
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.fab--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--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));
+	}
+
+	/* Hover effects */
+	.fab:hover:not(:disabled) {
+		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);
+		transform: scale(1.05);
+	}
+
+	.fab--bottom-center:hover:not(:disabled) {
+		transform: translateX(-50%) scale(1.05);
+	}
+
+	/* Active/pressed state */
+	.fab:active:not(:disabled) {
+		background: var(--color-primary-active, #1d4ed8);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -2px rgba(0, 0, 0, 0.1);
+		transform: scale(0.98);
+	}
+
+	.fab--bottom-center:active:not(:disabled) {
+		transform: translateX(-50%) scale(0.98);
+	}
+
+	/* Focus state */
+	.fab:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	/* Disabled state */
+	.fab--disabled,
+	.fab:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	/* Icon container */
+	.fab__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.fab--sm .fab__icon {
+		font-size: 1.25rem;
+	}
+
+	.fab--md .fab__icon {
+		font-size: 1.5rem;
+	}
+
+	.fab--lg .fab__icon {
+		font-size: 2rem;
+	}
+
+	/* Label for extended FAB */
+	.fab__label {
+		white-space: nowrap;
+	}
+
+	/* Platform-specific styling (F22) */
+	:global([data-platform='android']) .fab {
+		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:hover:not(:disabled) {
+		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='ios']) .fab {
+		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:hover:not(:disabled) {
+		box-shadow:
+			0 4px 16px rgba(0, 0, 0, 0.2),
+			0 2px 6px rgba(0, 0, 0, 0.1);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { FABProps } from '../../types/index.js';
+interface Props extends FABProps {
+    onclick?: (e: MouseEvent) => void;
+    children?: import('svelte').Snippet;
+    label?: import('svelte').Snippet;
+}
+declare const FAB: import("svelte").Component<Props, {}, "">;
+type FAB = ReturnType<typeof FAB>;
+export default FAB;