ecmc-design-core 0.0.1

package/dist/atoms/container/types.d.ts

@@ -0,0 +1,252 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+/**
+ * Props for the Box container component (HBox and VBox variants)
+ *
+ * Provides flexbox layout capabilities with customizable spacing, alignment, and wrapping.
+ *
+ * @example
+ * ```svelte
+ * <HBox gap="md" align="center" justify="space-between">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </HBox>
+ * ```
+ */
+export interface BoxProps extends ContainerProps {
+	/**
+	 * Gap spacing between flex items (maps to CSS --spacing-* variables)
+	 * - `none`: 0 - No gap
+	 * - `xsm`: 0.5rem (8px) - var(--spacing-xsm)
+	 * - `sm`: 1rem (16px) - var(--spacing-sm)
+	 * - `md`: 1.5rem (24px) - var(--spacing-md)
+	 * - `lg`: 2rem (32px) - var(--spacing-lg)
+	 * - `xl`: 3rem (48px) - var(--spacing-xl)
+	 */
+	gap?: 'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
+
+	/**
+	 * Cross-axis alignment of flex items
+	 * - `flex-start`: Align items to the start
+	 * - `center`: Center items
+	 * - `flex-end`: Align items to the end
+	 * - `stretch`: Stretch items to fill container
+	 * - `baseline`: Align items along their baselines
+	 *
+	 * @default 'flex-start'
+	 */
+	align?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+
+	/**
+	 * Main-axis justification of flex items
+	 * - `flex-start`: Pack items at the start
+	 * - `center`: Center items
+	 * - `flex-end`: Pack items at the end
+	 * - `space-between`: Distribute with space between
+	 * - `space-around`: Distribute with space around
+	 * - `space-evenly`: Distribute with even spacing
+	 *
+	 * @default 'flex-start'
+	 */
+	justify?:
+		| 'flex-start'
+		| 'center'
+		| 'flex-end'
+		| 'space-between'
+		| 'space-around'
+		| 'space-evenly';
+
+	/**
+	 * Whether flex items should wrap to multiple lines
+	 *
+	 * @default false
+	 */
+	wrap?: boolean;
+}
+
+/**
+ * Internal props for Box components with direction variant
+ *
+ * @internal
+ */
+export interface InternalBoxProps extends BoxProps {
+	/**
+	 * Flex direction of the container
+	 * - `horizontal`: Row layout (HBox)
+	 * - `vertical`: Column layout (VBox)
+	 */
+	variant: 'horizontal' | 'vertical';
+}
+
+/**
+ * Props for the Centered container component
+ *
+ * Centers content horizontally and/or vertically using flexbox.
+ *
+ * @example
+ * ```svelte
+ * <Centered horizontal vertical>
+ *   <div>Perfectly centered content</div>
+ * </Centered>
+ * ```
+ */
+export interface CenteredProps extends ContainerProps {
+	/**
+	 * Whether to center content horizontally
+	 *
+	 * @default true
+	 */
+	horizontal?: boolean;
+
+	/**
+	 * Whether to center content vertically
+	 *
+	 * @default true
+	 */
+	vertical?: boolean;
+}
+
+/**
+ * Props for the GridBox container component
+ *
+ * Provides CSS Grid layout capabilities with customizable columns and spacing.
+ *
+ * @example
+ * ```svelte
+ * <GridBox columns={3} gap="md">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </GridBox>
+ * ```
+ */
+export interface GridBoxProps extends ContainerProps {
+	/**
+	 * Number of columns or custom grid-template-columns value
+	 * - Number: Creates equal-width columns (e.g., 3 → `repeat(3, 1fr)`)
+	 * - String: Custom CSS value (e.g., "200px 1fr 2fr")
+	 *
+	 * @default 2
+	 */
+	columns?: number | string;
+
+	/**
+	 * Gap spacing between grid items (maps to CSS --spacing-* variables)
+	 * - `none`: 0 - No gap
+	 * - `xsm`: 0.5rem (8px) - var(--spacing-xsm)
+	 * - `sm`: 1rem (16px) - var(--spacing-sm)
+	 * - `md`: 1.5rem (24px) - var(--spacing-md)
+	 * - `lg`: 2rem (32px) - var(--spacing-lg)
+	 * - `xl`: 3rem (48px) - var(--spacing-xl)
+	 */
+	gap?: 'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
+
+	/**
+	 * Controls how auto-placed items flow into the grid
+	 * - `row`: Fill each row before moving to next
+	 * - `column`: Fill each column before moving to next
+	 * - `dense`: Attempt to fill holes in the grid
+	 * - `row dense`: Row flow with hole-filling
+	 * - `column dense`: Column flow with hole-filling
+	 *
+	 * @default 'row'
+	 */
+	autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
+}
+
+/**
+ * Container metrics interface for tracking div element properties
+ *
+ * Provides comprehensive measurements of a container element including
+ * dimensions, position, and scroll state.
+ */
+export interface ContainerMetrics {
+	/**
+	 * Element dimensions including borders and scrollbars
+	 */
+	width: number;
+	height: number;
+
+	/**
+	 * Element position relative to viewport
+	 */
+	top: number;
+	left: number;
+
+	/**
+	 * Element position relative to nearest positioned ancestor
+	 */
+	offsetTop: number;
+	offsetLeft: number;
+
+	/**
+	 * Total scrollable content dimensions
+	 */
+	scrollWidth: number;
+	scrollHeight: number;
+
+	/**
+	 * Current scroll position
+	 */
+	scrollTop: number;
+	scrollLeft: number;
+
+	/**
+	 * Inner dimensions excluding scrollbars
+	 */
+	clientWidth: number;
+	clientHeight: number;
+}
+
+/**
+ * Base props for all container components
+ *
+ * Extends standard HTML div attributes with container-specific features.
+ *
+ * @example
+ * ```svelte
+ * <Container padding="md" bind:metrics={containerMetrics}>
+ *   <p>Content with medium padding</p>
+ * </Container>
+ * ```
+ */
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+	/**
+	 * The content to be rendered inside the container
+	 */
+	children?: Snippet;
+
+	/**
+	 * Padding options (maps to CSS --spacing-* variables)
+	 * - `none`: 0 - No padding
+	 * - `xsm`: 0.5rem (8px) - var(--spacing-xsm)
+	 * - `sm`: 1rem (16px) - var(--spacing-sm)
+	 * - `md`: 1.5rem (24px) - var(--spacing-md)
+	 * - `lg`: 2rem (32px) - var(--spacing-lg)
+	 * - `xl`: 3rem (48px) - var(--spacing-xl)
+	 */
+	padding?: 'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
+
+	fill?: boolean;
+
+	bg?: boolean;
+
+	/**
+	 * Optional bind property to track container element metrics
+	 *
+	 * Provides real-time access to container dimensions, position, and scroll state.
+	 *
+	 * @example
+	 * ```svelte
+	 * <script>
+	 *   let metrics: ContainerMetrics;
+	 * </script>
+	 *
+	 * <Container bind:metrics>
+	 *   Width: {metrics?.width}px
+	 * </Container>
+	 * ```
+	 */
+	metrics?: ContainerMetrics | undefined;
+}

package/dist/atoms/input/Input.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { HBox, VBox, Centered } from '../../index.js';
+	import Text from '../text/Text.svelte';
+	import { defaultProps } from './constants.js';
+	import type { InputProps } from './types.js';
+	import { onMount } from 'svelte';
+
+	let {
+		type = defaultProps.type!,
+		labelLeft = defaultProps.labelLeft!,
+		placeholder = defaultProps.placeholder!,
+		value = $bindable(),
+		label,
+		id: providedId
+	}: InputProps = $props();
+
+	let id = $derived(providedId ?? `${label?.replace(/\s+/g, '-')}-id`);
+
+	let isSmallScreen = $state(false);
+	let effectiveLabelLeft = $derived(isSmallScreen ? false : labelLeft);
+
+	function checkScreenSize() {
+		isSmallScreen = window.innerWidth < 640;
+	}
+
+	onMount(() => {
+		checkScreenSize();
+		window.addEventListener('resize', checkScreenSize);
+		return () => window.removeEventListener('resize', checkScreenSize);
+	});
+</script>
+
+{#snippet contents()}
+	<label for={id}>
+		<Centered fill={true} padding="none" horizontal={effectiveLabelLeft}>
+			<Text>{label}</Text>
+		</Centered>
+	</label>
+	<input
+		{id}
+		bind:value
+		{type}
+		{placeholder}
+		aria-label={label ? label : 'unlabeled, please report'}
+	/>
+{/snippet}
+
+{#if effectiveLabelLeft}
+	<HBox gap="xsm">
+		{@render contents()}
+	</HBox>
+{:else}
+	<VBox gap="none">
+		{@render contents()}
+	</VBox>
+{/if}
+
+<style>
+	input {
+		padding: var(--spacing-xsm);
+		background-color: light-dark(var(--neutral-300), var(--neutral-700));
+		border: 1px solid light-dark(var(--neutral-300), var(--neutral-700));
+		outline: none;
+		width: 100%;
+	}
+
+	input::placeholder {
+		color: light-dark(var(--neutral-500), var(--neutral-400));
+		opacity: 0.7;
+	}
+
+	input:focus {
+		border-color: light-dark(var(--neutral-900), var(--neutral-300));
+	}
+</style>

package/dist/atoms/input/Input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputProps } from './types.js';
+declare const Input: import("svelte").Component<InputProps, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/atoms/input/constants.d.ts

@@ -0,0 +1,2 @@
+import type { InputProps } from './types.js';
+export declare const defaultProps: Partial<InputProps>;

package/dist/atoms/input/constants.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+    type: 'text',
+    labelLeft: false,
+    label: '',
+    placeholder: ''
+};

package/dist/atoms/input/types.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Props for the Input component
+ *
+ * A form input field with label support, multiple input types, and responsive label positioning.
+ * Features automatic label repositioning on small screens and accessibility support.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   let email = $state('');
+ * </script>
+ *
+ * <Input
+ *   label="Email Address"
+ *   type="email"
+ *   bind:value={email}
+ *   placeholder="Enter your email"
+ *   id="email-input"
+ * />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <!-- Horizontal label layout (desktop only) -->
+ * <Input
+ *   label="Username"
+ *   labelLeft={true}
+ *   bind:value={username}
+ *   id="username"
+ * />
+ * ```
+ */
+export interface InputProps {
+	/**
+	 * The type of input field to render
+	 * - `text`: Standard text input (default)
+	 * - `email`: Email input with validation
+	 * - `password`: Password input with masked characters
+	 *
+	 * @default 'text'
+	 */
+	type?: 'text' | 'email' | 'password';
+
+	/**
+	 * Label text displayed above or beside the input field
+	 * Also used for the `aria-label` accessibility attribute
+	 *
+	 * @default ''
+	 */
+	label?: string;
+
+	/**
+	 * Position the label to the left of the input (horizontal layout)
+	 * - `false`: Label appears above input (vertical layout)
+	 * - `true`: Label appears to the left (horizontal layout on desktop)
+	 *
+	 * Note: Automatically reverts to vertical layout on screens smaller than 640px
+	 *
+	 * @default false
+	 */
+	labelLeft?: boolean;
+
+	/**
+	 * Placeholder text shown when the input is empty
+	 *
+	 * @default ''
+	 */
+	placeholder?: string;
+
+	/**
+	 * The current value of the input field
+	 * This prop is bindable using `bind:value`
+	 *
+	 * @example
+	 * ```svelte
+	 * let userInput = $state('');
+	 * <Input bind:value={userInput} />
+	 * ```
+	 */
+	value: string;
+
+	/**
+	 * The HTML id attribute for the input element
+	 * Used to associate the label with the input for accessibility
+	 *
+	 * @example
+	 * ```svelte
+	 * <Input id="user-email" label="Email" />
+	 * ```
+	 */
+	id?: string;
+}

package/dist/atoms/text/Text.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { TextProps } from './types.js';
+	import { defaultProps, textVariantClasses, textAlignClasses } from './constants.js';
+
+	// Props with defaults
+	let {
+		children,
+		variant = defaultProps.variant!,
+		italic = defaultProps.italic!,
+		inline = defaultProps.inline!,
+		align = defaultProps.align!,
+		...restProps
+	}: TextProps = $props();
+
+	let computedClasses = $derived(
+		cn(textAlignClasses[align], textVariantClasses[variant], italic ? 'text--italic' : '')
+	);
+</script>
+
+{#if inline}
+	<span class={computedClasses} {...restProps}>
+		{@render children?.()}
+	</span>
+{:else}
+	<div class={computedClasses} {...restProps}>
+		{@render children?.()}
+	</div>
+{/if}
+
+<style>
+	.text--headline {
+		font-weight: 700;
+		font-size: var(--font-size-4);
+	}
+
+	.text--subtitle {
+		font-weight: 500;
+		font-size: var(--font-size-3);
+	}
+
+	.text--body-plus {
+		font-weight: 300;
+		font-size: var(--font-size-2);
+	}
+
+	.text--body {
+		font-weight: 300;
+		font-size: var(--font-size-1);
+	}
+
+	.text--half {
+		font-weight: 100;
+		font-size: var(--font-size-0);
+	}
+
+	.text--italic {
+		font-style: italic;
+	}
+
+	.text--align-center {
+		text-align: center;
+	}
+
+	.text--align-right {
+		text-align: right;
+	}
+</style>

package/dist/atoms/text/Text.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TextProps } from './types.js';
+declare const Text: import("svelte").Component<TextProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/atoms/text/constants.d.ts

@@ -0,0 +1,23 @@
+import type { TextProps } from './types.js';
+/**
+ * Default props for the text atom
+ */
+export declare const defaultProps: Partial<TextProps>;
+/**
+ * CSS class mappings for text variants
+ */
+export declare const textVariantClasses: {
+    readonly headline: "text--headline";
+    readonly subtitle: "text--subtitle";
+    readonly body: "text--body";
+    readonly bodyPlus: "text--body-plus";
+    readonly half: "text--half";
+};
+/**
+ * CSS class mappings for text alignment
+ */
+export declare const textAlignClasses: {
+    readonly center: "text--align-center";
+    readonly right: "text--align-right";
+    readonly left: "";
+};

package/dist/atoms/text/constants.js

@@ -0,0 +1,27 @@
+/**
+ * Default props for the text atom
+ */
+export const defaultProps = {
+    variant: 'body',
+    italic: false,
+    inline: false,
+    align: 'left'
+};
+/**
+ * CSS class mappings for text variants
+ */
+export const textVariantClasses = {
+    headline: 'text--headline',
+    subtitle: 'text--subtitle',
+    body: 'text--body',
+    bodyPlus: 'text--body-plus',
+    half: 'text--half'
+};
+/**
+ * CSS class mappings for text alignment
+ */
+export const textAlignClasses = {
+    center: 'text--align-center',
+    right: 'text--align-right',
+    left: ''
+};

package/dist/atoms/text/types.d.ts

@@ -0,0 +1,62 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+/**
+ * Props for the Text component
+ *
+ * Provides typography with various size variants, alignment, and styling options.
+ *
+ * @example
+ * ```svelte
+ * <Text variant="headline" align="center">
+ *   Welcome to our app
+ * </Text>
+ *
+ * <Text italic>
+ *   This is some italic body text
+ * </Text>
+ * ```
+ */
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+	/**
+	 * The content to be rendered inside the text
+	 */
+	children?: Snippet;
+
+	/**
+	 * Text variant that determines the size and weight styling
+	 * - `headline`: Large heading text (3rem/48px) - var(--font-size-4)
+	 * - `subtitle`: Medium heading text (2.5rem/40px) - var(--font-size-3)
+	 * - `body`: Standard body text (1rem/16px) - var(--font-size-1)
+	 * - `bodyPlus`: Larger body text (1.2rem/19.2px) - var(--font-size-2)
+	 *
+	 * @default 'body'
+	 */
+	variant?: 'headline' | 'subtitle' | 'body' | 'bodyPlus' | 'half';
+
+	/**
+	 * Whether the text should be rendered in italic style
+	 *
+	 * @default false
+	 */
+	italic?: boolean;
+
+	/**
+	 * Whether the text should display inline (span) or block-level (div)
+	 * - `false`: Renders as block-level `<div>`
+	 * - `true`: Renders as inline `<span>`
+	 *
+	 * @default false
+	 */
+	inline?: boolean;
+
+	/**
+	 * Horizontal text alignment
+	 * - `left`: Align text to the left
+	 * - `center`: Center text
+	 * - `right`: Align text to the right
+	 *
+	 * @default 'left'
+	 */
+	align?: 'right' | 'center' | 'left';
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Container } from './atoms/container/Container.svelte';
+export type { ContainerProps, ContainerMetrics } from './atoms/container/types.js';
+export { default as HBox } from './atoms/container/sub/hbox.container.svelte';
+export { default as VBox } from './atoms/container/sub/vbox.container.svelte';
+export { default as GridBox } from './atoms/container/sub/gridbox.container.svelte';
+export { default as Centered } from './atoms/container/sub/centered.container.svelte';
+export { default as Text } from './atoms/text/Text.svelte';
+export type { TextProps } from './atoms/text/types.js';
+export { default as Button } from './atoms/button/Button.svelte';
+export type { ButtonProps } from './atoms/button/types.js';
+export { default as Input } from './atoms/input/Input.svelte';
+export type { InputProps } from './atoms/input/types.js';

package/dist/index.js

@@ -0,0 +1,11 @@
+// Reexport your entry components here
+// Atoms
+export { default as Container } from './atoms/container/Container.svelte';
+// Reexport sub-containers
+export { default as HBox } from './atoms/container/sub/hbox.container.svelte';
+export { default as VBox } from './atoms/container/sub/vbox.container.svelte';
+export { default as GridBox } from './atoms/container/sub/gridbox.container.svelte';
+export { default as Centered } from './atoms/container/sub/centered.container.svelte';
+export { default as Text } from './atoms/text/Text.svelte';
+export { default as Button } from './atoms/button/Button.svelte';
+export { default as Input } from './atoms/input/Input.svelte';

package/dist/utils/cn.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Simple class name concatenation utility
+ * @param classes - Class names to concatenate (strings, undefined, or null)
+ * @returns Merged class string
+ */
+export declare function cn(...classes: (string | undefined | null | boolean)[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,8 @@
+/**
+ * Simple class name concatenation utility
+ * @param classes - Class names to concatenate (strings, undefined, or null)
+ * @returns Merged class string
+ */
+export function cn(...classes) {
+    return classes.filter(Boolean).join(' ').trim();
+}