@aspect-ops/exon-ui 0.0.2 → 0.0.3

package/dist/components/Box/index.js

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

package/dist/components/Card/Card.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { CardVariant } from '../../types/index.js';
+
+	interface Props {
+		variant?: CardVariant;
+		clickable?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		variant = 'elevated',
+		clickable = false,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+{#if clickable}
+	<button type="button" class="card card--{variant} card--clickable {className}">
+		{#if children}
+			{@render children()}
+		{/if}
+	</button>
+{:else}
+	<div class="card card--{variant} {className}">
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.card {
+		display: flex;
+		flex-direction: column;
+		background: var(--color-bg-card, #ffffff);
+		border-radius: var(--radius-lg, 0.5rem);
+		overflow: hidden;
+		font-family: inherit;
+	}
+
+	/* Elevated variant (default) - uses shadow */
+	.card--elevated {
+		box-shadow: var(
+			--shadow-md,
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06)
+		);
+	}
+
+	/* Outlined variant - uses border */
+	.card--outlined {
+		border: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	/* Filled variant - uses background color */
+	.card--filled {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	/* Clickable state */
+	.card--clickable {
+		width: 100%;
+		text-align: left;
+		padding: 0;
+		border: none;
+		cursor: pointer;
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease;
+		min-height: 2.75rem;
+	}
+
+	.card--clickable:hover {
+		transform: translateY(-2px);
+	}
+
+	.card--clickable.card--elevated:hover {
+		box-shadow: var(
+			--shadow-lg,
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05)
+		);
+	}
+
+	.card--clickable:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.card--clickable:active {
+		transform: translateY(0);
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { CardVariant } from '../../types/index.js';
+interface Props {
+    variant?: CardVariant;
+    clickable?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/components/Card/CardBody.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="card__body {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.card__body {
+		flex: 1;
+		padding: var(--space-lg, 1.25rem);
+		font-family: inherit;
+		font-size: var(--text-base, 1rem);
+		line-height: 1.5;
+		color: var(--color-text, var(--gray-12, inherit));
+	}
+
+	/* Mobile-first: Adjust padding for smaller screens */
+	@media (max-width: 30rem) {
+		.card__body {
+			padding: var(--space-md, 1rem);
+		}
+	}
+</style>

package/dist/components/Card/CardBody.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const CardBody: import("svelte").Component<Props, {}, "">;
+type CardBody = ReturnType<typeof CardBody>;
+export default CardBody;

package/dist/components/Card/CardFooter.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="card__footer {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.card__footer {
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		padding: var(--space-lg, 1.25rem);
+		border-top: 1px solid var(--color-border, #e5e7eb);
+		font-family: inherit;
+	}
+
+	/* Mobile-first: Adjust padding and layout for smaller screens */
+	@media (max-width: 30rem) {
+		.card__footer {
+			flex-direction: column;
+			align-items: stretch;
+			padding: var(--space-md, 1rem);
+		}
+	}
+</style>

package/dist/components/Card/CardFooter.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const CardFooter: import("svelte").Component<Props, {}, "">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/components/Card/CardHeader.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		title?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', title, actions, children }: Props = $props();
+</script>
+
+<div class="card__header {className}">
+	{#if title || children}
+		<div class="card__header-title">
+			{#if title}
+				{@render title()}
+			{:else if children}
+				{@render children()}
+			{/if}
+		</div>
+	{/if}
+	{#if actions}
+		<div class="card__header-actions">
+			{@render actions()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.card__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-md, 1rem);
+		padding: var(--space-lg, 1.25rem);
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+		font-family: inherit;
+	}
+
+	.card__header-title {
+		flex: 1;
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: 600;
+		color: var(--color-text, var(--gray-12, inherit));
+		line-height: 1.4;
+	}
+
+	.card__header-actions {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+	}
+
+	/* Mobile-first: Stack on small screens */
+	@media (max-width: 30rem) {
+		.card__header {
+			flex-direction: column;
+			align-items: flex-start;
+		}
+
+		.card__header-actions {
+			width: 100%;
+			justify-content: flex-end;
+		}
+	}
+</style>

package/dist/components/Card/CardHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    class?: string;
+    title?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+}
+declare const CardHeader: import("svelte").Component<Props, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

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

@@ -0,0 +1,4 @@
+export { default as Card } from './Card.svelte';
+export { default as CardHeader } from './CardHeader.svelte';
+export { default as CardBody } from './CardBody.svelte';
+export { default as CardFooter } from './CardFooter.svelte';

package/dist/components/Card/index.js

@@ -0,0 +1,4 @@
+export { default as Card } from './Card.svelte';
+export { default as CardHeader } from './CardHeader.svelte';
+export { default as CardBody } from './CardBody.svelte';
+export { default as CardFooter } from './CardFooter.svelte';

package/dist/components/Center/Center.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	interface Props {
+		inline?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { inline = false, class: className = '', children }: Props = $props();
+</script>
+
+<div class="center {className}" data-inline={inline}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.center {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-family: inherit;
+	}
+
+	.center[data-inline='true'] {
+		display: inline-flex;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+interface Props {
+    inline?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Center: import("svelte").Component<Props, {}, "">;
+type Center = ReturnType<typeof Center>;
+export default Center;

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

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

package/dist/components/Center/index.js

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

package/dist/components/Container/Container.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import type { ContainerSize } from '../../types/index.js';
+
+	interface Props {
+		size?: ContainerSize;
+		centered?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { size = 'lg', centered = true, class: className = '', children }: Props = $props();
+</script>
+
+<div class="container {className}" data-size={size} data-centered={centered}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.container {
+		width: 100%;
+		padding: var(--space-md, 1rem);
+		font-family: inherit;
+	}
+
+	.container[data-centered='true'] {
+		margin: 0 auto;
+	}
+
+	/* Size variants - responsive max-widths */
+	.container[data-size='sm'] {
+		max-width: 40rem; /* 640px */
+	}
+
+	.container[data-size='md'] {
+		max-width: 48rem; /* 768px */
+	}
+
+	.container[data-size='lg'] {
+		max-width: 64rem; /* 1024px */
+	}
+
+	.container[data-size='xl'] {
+		max-width: 80rem; /* 1280px */
+	}
+
+	.container[data-size='full'] {
+		max-width: 100%;
+	}
+
+	/* Responsive padding - larger screens get more padding */
+	@media (min-width: 768px) {
+		.container {
+			padding: var(--space-lg, 1.5rem);
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { ContainerSize } from '../../types/index.js';
+interface Props {
+    size?: ContainerSize;
+    centered?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

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

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

package/dist/components/Container/index.js

@@ -0,0 +1 @@
+export { default as Container } from './Container.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';