@salmexio/ui 0.1.0

package/dist/layout/Card/Card.svelte

@@ -0,0 +1,283 @@
+<!--
+  @component Card
+
+  Win2K × Basquiat — Panel with canvas background, bold 3px borders, flat shadow.
+  Optional header/footer, interactive mode, semantic element support.
+
+  @example
+  <Card><p>Content</p></Card>
+  <Card variant="accent" accentColor="success" header={...} footer={...} />
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '../../utils/cn.js';
+
+	type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+	type CardVariant = 'default' | 'elevated' | 'outlined' | 'accent';
+	type AccentColor = 'primary' | 'success' | 'warning' | 'error' | 'info';
+
+	interface Props {
+		variant?: CardVariant;
+		padding?: CardPadding;
+		accentColor?: AccentColor;
+		interactive?: boolean;
+		asButton?: boolean;
+		as?: 'div' | 'article' | 'section';
+		id?: string;
+		ariaLabelledby?: string;
+		class?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		children?: Snippet;
+		onclick?: (event: MouseEvent) => void;
+		onkeydown?: (event: KeyboardEvent) => void;
+		testId?: string;
+	}
+
+	let {
+		variant = 'default',
+		padding = 'md',
+		accentColor = 'primary',
+		interactive = false,
+		asButton = false,
+		as = 'div',
+		id,
+		ariaLabelledby,
+		class: className = '',
+		header,
+		footer,
+		children,
+		onclick,
+		onkeydown,
+		testId
+	}: Props = $props();
+
+	const paddingValues: Record<CardPadding, string> = {
+		none: '0',
+		sm: 'var(--salmex-space-4)',
+		md: 'var(--salmex-space-6)',
+		lg: 'var(--salmex-space-8)',
+		xl: 'var(--salmex-space-10)'
+	};
+
+	const currentPadding = $derived(paddingValues[padding]);
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			(e.currentTarget as HTMLElement).click();
+		}
+		onkeydown?.(e);
+	}
+</script>
+
+{#snippet cardContent()}
+	{#if header}
+		<div
+			class="salmex-card-header"
+			style="margin: calc(-1 * {currentPadding}) calc(-1 * {currentPadding}) {currentPadding}; padding: var(--salmex-space-4) {currentPadding};"
+		>
+			{@render header()}
+		</div>
+	{/if}
+	{#if children}
+		<div class="salmex-card-content">
+			{@render children()}
+		</div>
+	{/if}
+	{#if footer}
+		<div
+			class="salmex-card-footer"
+			style="margin: {currentPadding} calc(-1 * {currentPadding}) calc(-1 * {currentPadding}); padding: var(--salmex-space-4) {currentPadding};"
+		>
+			{@render footer()}
+		</div>
+	{/if}
+{/snippet}
+
+{#if asButton}
+	<button
+		type="button"
+		{id}
+		class={cn(
+			'salmex-card',
+			`salmex-card-${variant}`,
+			`salmex-card-padding-${padding}`,
+			interactive && 'salmex-card-interactive',
+			variant === 'accent' && `salmex-card-accent-${accentColor}`,
+			className
+		)}
+		aria-labelledby={ariaLabelledby}
+		data-testid={testId}
+		onclick={onclick}
+		onkeydown={handleKeydown}
+	>
+		{@render cardContent()}
+	</button>
+{:else if interactive || onclick}
+	<svelte:element
+		this={as}
+		{id}
+		class={cn(
+			'salmex-card',
+			`salmex-card-${variant}`,
+			`salmex-card-padding-${padding}`,
+			'salmex-card-interactive',
+			variant === 'accent' && `salmex-card-accent-${accentColor}`,
+			className
+		)}
+		role="button"
+		tabindex={0}
+		aria-labelledby={ariaLabelledby}
+		data-testid={testId}
+		onclick={onclick}
+		onkeydown={handleKeydown}
+	>
+		{@render cardContent()}
+	</svelte:element>
+{:else}
+	<svelte:element
+		this={as}
+		{id}
+		class={cn(
+			'salmex-card',
+			`salmex-card-${variant}`,
+			`salmex-card-padding-${padding}`,
+			variant === 'accent' && `salmex-card-accent-${accentColor}`,
+			className
+		)}
+		aria-labelledby={ariaLabelledby}
+		data-testid={testId}
+	>
+		{@render cardContent()}
+	</svelte:element>
+{/if}
+
+<style>
+	.salmex-card {
+		position: relative;
+		overflow: hidden;
+		border-radius: var(--salmex-radius-none);
+		transition: transform var(--salmex-transition-base), box-shadow var(--salmex-transition-base);
+		/* Bold 3px border, flat shadow — Win2K × Basquiat */
+		border: 3px solid rgb(var(--salmex-border-dark));
+		box-shadow: var(--salmex-shadow-lg);
+	}
+
+	button.salmex-card {
+		width: 100%;
+		text-align: left;
+		font: inherit;
+		cursor: pointer;
+	}
+
+	.salmex-card-padding-none {
+		padding: 0;
+	}
+
+	.salmex-card-padding-sm {
+		padding: var(--salmex-space-4);
+	}
+
+	.salmex-card-padding-md {
+		padding: var(--salmex-space-6);
+	}
+
+	.salmex-card-padding-lg {
+		padding: var(--salmex-space-8);
+	}
+
+	.salmex-card-padding-xl {
+		padding: var(--salmex-space-10);
+	}
+
+	/* Default — canvas/paper surface */
+	.salmex-card-default {
+		background: rgb(var(--salmex-window-surface));
+	}
+
+	.salmex-card-elevated {
+		background: rgb(var(--salmex-bg-primary));
+		box-shadow: var(--salmex-shadow-lg), 0 6px 0 rgb(0 0 0 / 0.15);
+	}
+
+	.salmex-card-outlined {
+		background: transparent;
+		border-width: 3px;
+	}
+
+	.salmex-card-accent-primary,
+	.salmex-card-accent-success,
+	.salmex-card-accent-warning,
+	.salmex-card-accent-error,
+	.salmex-card-accent-info {
+		border-left-width: 6px;
+		background: rgb(var(--salmex-window-surface));
+	}
+
+	.salmex-card-accent-primary {
+		border-left-color: rgb(var(--salmex-electric-blue));
+	}
+
+	.salmex-card-accent-success {
+		border-left-color: rgb(var(--salmex-urban-green));
+	}
+
+	.salmex-card-accent-warning {
+		border-left-color: rgb(var(--salmex-spray-orange));
+	}
+
+	.salmex-card-accent-error {
+		border-left-color: rgb(var(--salmex-street-red));
+	}
+
+	.salmex-card-accent-info {
+		border-left-color: rgb(var(--salmex-info));
+	}
+
+	.salmex-card-interactive:hover {
+		transform: translateY(-2px);
+		box-shadow: 5px 7px 0 rgb(0 0 0 / 0.35);
+	}
+
+	.salmex-card-interactive:active {
+		transform: translate(2px, 2px);
+		box-shadow: 3px 3px 0 rgb(0 0 0 / 0.4);
+	}
+
+	.salmex-card-interactive:focus-visible {
+		outline: none;
+		box-shadow: 5px 7px 0 rgb(0 0 0 / 0.35), 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
+	}
+
+	:global([data-theme='dark']) .salmex-card-interactive:focus-visible {
+		box-shadow: 5px 7px 0 rgb(0 0 0 / 0.35), 0 0 0 3px rgb(var(--salmex-crown-yellow));
+	}
+
+	.salmex-card-header {
+		border-bottom: 2px solid rgb(var(--salmex-border-default));
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.3px;
+	}
+
+	.salmex-card-footer {
+		border-top: 2px solid rgb(var(--salmex-border-default));
+	}
+
+	.salmex-card-content {
+		display: block;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.salmex-card {
+			transition: none;
+		}
+		.salmex-card-interactive:hover {
+			transform: none;
+		}
+		.salmex-card-interactive:active {
+			transform: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type CardVariant = 'default' | 'elevated' | 'outlined' | 'accent';
+type AccentColor = 'primary' | 'success' | 'warning' | 'error' | 'info';
+interface Props {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    accentColor?: AccentColor;
+    interactive?: boolean;
+    asButton?: boolean;
+    as?: 'div' | 'article' | 'section';
+    id?: string;
+    ariaLabelledby?: string;
+    class?: string;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    testId?: string;
+}
+/**
+ * Card
+ *
+ * Win2K × Basquiat — Panel with canvas background, bold 3px borders, flat shadow.
+ * Optional header/footer, interactive mode, semantic element support.
+ *
+ * @example
+ * <Card><p>Content</p></Card>
+ * <Card variant="accent" accentColor="success" header={...} footer={...} />
+ */
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;
+//# sourceMappingURL=Card.svelte.d.ts.map

package/dist/layout/Card/Card.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIrC,KAAK,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAClE,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAuGF;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/layout/Card/index.js

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

package/dist/layout/Container/Container.svelte

@@ -0,0 +1,202 @@
+<!--
+  @component Container
+
+  Win2K × Basquiat — Responsive layout wrapper. Max-width, padding, optional centering.
+  Sharp edges, no rounded corners; supports semantic elements.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/cn.js';
+
+	type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'prose' | 'full';
+	type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+		size?: ContainerSize;
+		paddingX?: ContainerPadding;
+		paddingY?: ContainerPadding;
+		padding?: ContainerPadding;
+		centered?: boolean;
+		as?: 'div' | 'main' | 'section' | 'article';
+		id?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		size = 'xl',
+		paddingX,
+		paddingY,
+		padding = 'md',
+		centered = true,
+		as = 'div',
+		id,
+		class: className = '',
+		children,
+		...restProps
+	}: Props = $props();
+
+	const resolvedPaddingX = $derived(paddingX ?? padding);
+	const resolvedPaddingY = $derived(paddingY ?? 'none');
+</script>
+
+<svelte:element
+	this={as}
+	{id}
+	class={cn(
+		'salmex-container',
+		`salmex-container-${size}`,
+		`salmex-container-px-${resolvedPaddingX}`,
+		`salmex-container-py-${resolvedPaddingY}`,
+		centered && 'salmex-container-centered',
+		className
+	)}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>
+
+<style>
+	.salmex-container {
+		width: 100%;
+	}
+
+	.salmex-container-centered {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.salmex-container-xs {
+		max-width: 20rem;
+	}
+
+	.salmex-container-sm {
+		max-width: 42rem;
+	}
+
+	.salmex-container-md {
+		max-width: 56rem;
+	}
+
+	.salmex-container-lg {
+		max-width: 64rem;
+	}
+
+	.salmex-container-xl {
+		max-width: 72rem;
+	}
+
+	.salmex-container-2xl {
+		max-width: 80rem;
+	}
+
+	.salmex-container-prose {
+		max-width: 65ch;
+	}
+
+	.salmex-container-full {
+		max-width: 100%;
+	}
+
+	.salmex-container-px-none {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	.salmex-container-px-sm {
+		padding-left: var(--salmex-space-4);
+		padding-right: var(--salmex-space-4);
+	}
+
+	.salmex-container-px-md {
+		padding-left: var(--salmex-space-6);
+		padding-right: var(--salmex-space-6);
+	}
+
+	.salmex-container-px-lg {
+		padding-left: var(--salmex-space-8);
+		padding-right: var(--salmex-space-8);
+	}
+
+	.salmex-container-px-xl {
+		padding-left: var(--salmex-space-10);
+		padding-right: var(--salmex-space-10);
+	}
+
+	@media (min-width: 640px) {
+		.salmex-container-px-sm {
+			padding-left: var(--salmex-space-6);
+			padding-right: var(--salmex-space-6);
+		}
+		.salmex-container-px-md {
+			padding-left: var(--salmex-space-8);
+			padding-right: var(--salmex-space-8);
+		}
+		.salmex-container-px-lg {
+			padding-left: var(--salmex-space-10);
+			padding-right: var(--salmex-space-10);
+		}
+		.salmex-container-px-xl {
+			padding-left: var(--salmex-space-12);
+			padding-right: var(--salmex-space-12);
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.salmex-container-px-md {
+			padding-left: var(--salmex-space-10);
+			padding-right: var(--salmex-space-10);
+		}
+		.salmex-container-px-lg {
+			padding-left: var(--salmex-space-12);
+			padding-right: var(--salmex-space-12);
+		}
+		.salmex-container-px-xl {
+			padding-left: 42px;
+			padding-right: 42px;
+		}
+	}
+
+	.salmex-container-py-none {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
+	.salmex-container-py-sm {
+		padding-top: var(--salmex-space-4);
+		padding-bottom: var(--salmex-space-4);
+	}
+
+	.salmex-container-py-md {
+		padding-top: var(--salmex-space-6);
+		padding-bottom: var(--salmex-space-6);
+	}
+
+	.salmex-container-py-lg {
+		padding-top: var(--salmex-space-8);
+		padding-bottom: var(--salmex-space-8);
+	}
+
+	.salmex-container-py-xl {
+		padding-top: var(--salmex-space-10);
+		padding-bottom: var(--salmex-space-10);
+	}
+
+	@media (min-width: 640px) {
+		.salmex-container-py-md {
+			padding-top: var(--salmex-space-8);
+			padding-bottom: var(--salmex-space-8);
+		}
+		.salmex-container-py-lg {
+			padding-top: var(--salmex-space-10);
+			padding-bottom: var(--salmex-space-10);
+		}
+		.salmex-container-py-xl {
+			padding-top: var(--salmex-space-12);
+			padding-bottom: var(--salmex-space-12);
+		}
+	}
+</style>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type ContainerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'prose' | 'full';
+type ContainerPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    size?: ContainerSize;
+    paddingX?: ContainerPadding;
+    paddingY?: ContainerPadding;
+    padding?: ContainerPadding;
+    centered?: boolean;
+    as?: 'div' | 'main' | 'section' | 'article';
+    id?: string;
+    class?: string;
+    children?: Snippet;
+}
+/**
+ * Container
+ *
+ * Win2K × Basquiat — Responsive layout wrapper. Max-width, padding, optional centering.
+ * Sharp edges, no rounded corners; supports semantic elements.
+ */
+declare const Container: import("svelte").Component<Props, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;
+//# sourceMappingURL=Container.svelte.d.ts.map

package/dist/layout/Container/Container.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Container/Container.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIrD,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AACjF,KAAK,gBAAgB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA4CF;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as Container } from './Container.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/Container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/Container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/layout/Container/index.js

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

package/dist/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { Card } from './Card/index.js';
+export { Container } from './Container/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/layout/index.js

@@ -0,0 +1,2 @@
+export { Card } from './Card/index.js';
+export { Container } from './Container/index.js';