@synthaxai/ui 1.0.0

package/dist/layout/Container/Container.svelte

@@ -0,0 +1,252 @@
+<!--
+  @component Container
+  
+  A world-class responsive container component for consistent page layouts.
+  Provides centered content with proper max-width constraints and responsive padding.
+  
+  Features:
+  - Multiple size presets including prose-optimized width
+  - Responsive horizontal and vertical padding
+  - Semantic element support (div, main, section, article)
+  - Proper accessibility attributes
+  
+  @example
+  <Container>
+    <h1>Page Content</h1>
+  </Container>
+  
+  @example
+  <Container size="prose" as="article" paddingY="lg">
+    <p>Long-form readable content...</p>
+  </Container>
+-->
+<script lang="ts">
+	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'> {
+		/** Maximum width of the container */
+		size?: ContainerSize;
+		/** Horizontal padding (responsive) */
+		paddingX?: ContainerPadding;
+		/** Vertical padding */
+		paddingY?: ContainerPadding;
+		/** Shorthand for both paddingX and paddingY */
+		padding?: ContainerPadding;
+		/** Whether to center the container horizontally */
+		centered?: boolean;
+		/** HTML element to render as */
+		as?: 'div' | 'main' | 'section' | 'article';
+		/** Optional ID for the container */
+		id?: string;
+		/** Additional CSS classes */
+		class?: string;
+		/** Container content */
+		children?: Snippet;
+	}
+
+	let {
+		size = 'xl',
+		paddingX,
+		paddingY,
+		padding = 'md',
+		centered = true,
+		as = 'div',
+		id,
+		class: className = '',
+		children,
+		...restProps
+	}: Props = $props();
+
+	// Resolve padding values
+	const resolvedPaddingX = $derived(paddingX ?? padding);
+	const resolvedPaddingY = $derived(paddingY ?? 'none');
+</script>
+
+<svelte:element
+	this={as}
+	{id}
+	class="ui-container ui-container-{size} ui-container-px-{resolvedPaddingX} ui-container-py-{resolvedPaddingY} {centered ? 'ui-container-centered' : ''} {className}"
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</svelte:element>
+
+<style>
+	/* ========================================
+	   BASE STYLES
+	   ======================================== */
+	.ui-container {
+		width: 100%;
+	}
+
+	.ui-container-centered {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	/* ========================================
+	   SIZE VARIANTS (Max Width)
+	   ======================================== */
+	.ui-container-xs {
+		max-width: 20rem; /* 320px */
+	}
+
+	.ui-container-sm {
+		max-width: 42rem; /* 672px */
+	}
+
+	.ui-container-md {
+		max-width: 56rem; /* 896px */
+	}
+
+	.ui-container-lg {
+		max-width: 64rem; /* 1024px */
+	}
+
+	.ui-container-xl {
+		max-width: 72rem; /* 1152px */
+	}
+
+	.ui-container-2xl {
+		max-width: 80rem; /* 1280px */
+	}
+
+	.ui-container-prose {
+		max-width: 65ch; /* Optimal reading width */
+	}
+
+	.ui-container-full {
+		max-width: 100%;
+	}
+
+	/* ========================================
+	   HORIZONTAL PADDING (Responsive)
+	   ======================================== */
+	.ui-container-px-none {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
+	.ui-container-px-sm {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	.ui-container-px-md {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+
+	.ui-container-px-lg {
+		padding-left: 1.5rem;
+		padding-right: 1.5rem;
+	}
+
+	.ui-container-px-xl {
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+
+	/* Responsive padding adjustments */
+	@media (min-width: 640px) {
+		.ui-container-px-sm {
+			padding-left: 1.5rem;
+			padding-right: 1.5rem;
+		}
+
+		.ui-container-px-md {
+			padding-left: 1.5rem;
+			padding-right: 1.5rem;
+		}
+
+		.ui-container-px-lg {
+			padding-left: 2rem;
+			padding-right: 2rem;
+		}
+
+		.ui-container-px-xl {
+			padding-left: 2.5rem;
+			padding-right: 2.5rem;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.ui-container-px-md {
+			padding-left: 2rem;
+			padding-right: 2rem;
+		}
+
+		.ui-container-px-lg {
+			padding-left: 3rem;
+			padding-right: 3rem;
+		}
+
+		.ui-container-px-xl {
+			padding-left: 4rem;
+			padding-right: 4rem;
+		}
+	}
+
+	/* ========================================
+	   VERTICAL PADDING
+	   ======================================== */
+	.ui-container-py-none {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
+	.ui-container-py-sm {
+		padding-top: 1rem;
+		padding-bottom: 1rem;
+	}
+
+	.ui-container-py-md {
+		padding-top: 1.5rem;
+		padding-bottom: 1.5rem;
+	}
+
+	.ui-container-py-lg {
+		padding-top: 2rem;
+		padding-bottom: 2rem;
+	}
+
+	.ui-container-py-xl {
+		padding-top: 3rem;
+		padding-bottom: 3rem;
+	}
+
+	@media (min-width: 640px) {
+		.ui-container-py-md {
+			padding-top: 2rem;
+			padding-bottom: 2rem;
+		}
+
+		.ui-container-py-lg {
+			padding-top: 3rem;
+			padding-bottom: 3rem;
+		}
+
+		.ui-container-py-xl {
+			padding-top: 4rem;
+			padding-bottom: 4rem;
+		}
+	}
+
+	@media (min-width: 1024px) {
+		.ui-container-py-lg {
+			padding-top: 4rem;
+			padding-bottom: 4rem;
+		}
+
+		.ui-container-py-xl {
+			padding-top: 6rem;
+			padding-bottom: 6rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,50 @@
+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'> {
+    /** Maximum width of the container */
+    size?: ContainerSize;
+    /** Horizontal padding (responsive) */
+    paddingX?: ContainerPadding;
+    /** Vertical padding */
+    paddingY?: ContainerPadding;
+    /** Shorthand for both paddingX and paddingY */
+    padding?: ContainerPadding;
+    /** Whether to center the container horizontally */
+    centered?: boolean;
+    /** HTML element to render as */
+    as?: 'div' | 'main' | 'section' | 'article';
+    /** Optional ID for the container */
+    id?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Container content */
+    children?: Snippet;
+}
+/**
+ * Container
+ *
+ * A world-class responsive container component for consistent page layouts.
+ * Provides centered content with proper max-width constraints and responsive padding.
+ *
+ * Features:
+ * - Multiple size presets including prose-optimized width
+ * - Responsive horizontal and vertical padding
+ * - Semantic element support (div, main, section, article)
+ * - Proper accessibility attributes
+ *
+ * @example
+ * <Container>
+ *   <h1>Page Content</h1>
+ * </Container>
+ *
+ * @example
+ * <Container size="prose" as="article" paddingY="lg">
+ *   <p>Long-form readable content...</p>
+ * </Container>
+ */
+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;AAGrD,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,qCAAqC;IACrC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC5C,oCAAoC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAqCF;;;;;;;;;;;;;;;;;;;;;GAqBG;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,8 @@
+/**
+ * @synthaxai/ui - Layout Components
+ *
+ * Components for structuring page layouts and content containers.
+ */
+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;;;;GAIG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/layout/index.js

@@ -0,0 +1,7 @@
+/**
+ * @synthaxai/ui - Layout Components
+ *
+ * Components for structuring page layouts and content containers.
+ */
+export { Card } from './Card/index.js';
+export { Container } from './Container/index.js';