ecmc-design-core 0.0.1 → 0.0.2

package/README.md

@@ -2,6 +2,12 @@
 
 Atoms and molecules for the ECMC design system built with Svelte 5.
 
+```sh
+bun i ecmc-design-core
+# or
+npm i ecmc-design-core
+```
+
 ## Overview
 
 This is an opinionated component library providing foundational UI components (atoms) and compound components (molecules) for building consistent user interfaces. The library is built with Svelte 5 and includes TypeScript support and Storybook integration.

package/dist/atoms/container/Container.svelte

@@ -10,11 +10,17 @@
 		fill = defaultProps.fill!,
 		metrics = $bindable(),
 		bg = defaultProps.bg!,
+		rounding = defaultProps.rounding!,
 		...restProps
 	}: ContainerProps = $props();
 
 	let computedClasses = $derived(
-		cn(paddingClasses[padding], fill ? 'container--fill' : '', bg ? 'container--bg' : '')
+		cn(
+			paddingClasses[padding],
+			fill ? 'container--fill' : '',
+			bg ? 'container--bg' : '',
+			rounding ? 'container--rounding' : ''
+		)
 	);
 
 	// Container element reference
@@ -103,4 +109,8 @@
 	.container--bg {
 		background-color: light-dark(var(--neutral-200), var(--neutral-800));
 	}
+
+	.container--rounding {
+		border-radius: var(--rounding-size-1);
+	}
 </style>

package/dist/atoms/container/constants.js

@@ -4,7 +4,8 @@
 export const defaultProps = {
     padding: 'md',
     fill: false,
-    bg: false
+    bg: false,
+    rounding: false
 };
 /**
  * CSS class mappings for padding variants

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

@@ -228,10 +228,30 @@ export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
 	 */
 	padding?: 'none' | 'xsm' | 'sm' | 'md' | 'lg' | 'xl';
 
+	/**
+	 * whether to make the container fill its parent dimensions
+	 * sets width and height to 100%
+	 *
+	 * @default false
+	 */
 	fill?: boolean;
 
+	/**
+	 * whether to apply a background color to the container
+	 * uses neutral-200 in light mode, neutral-800 in dark mode
+	 *
+	 * @default false
+	 */
 	bg?: boolean;
 
+	/**
+	 * whether to apply border radius to the container
+	 * uses var(--rounding-size-1) which is 5px
+	 *
+	 * @default false
+	 */
+	rounding?: boolean;
+
 	/**
 	 * Optional bind property to track container element metrics
 	 *

package/dist/atoms/kbd/Kbd.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn } from '../../utils/cn.js';
+	import type { KbdProps } from './types.js';
+	import { defaultProps, kbdSizeClasses } from './constants.js';
+	import Centered from '../container/sub/centered.container.svelte';
+
+	let { children, size = defaultProps.size!, ...restProps }: KbdProps = $props();
+
+	let computedClasses = $derived(cn(kbdSizeClasses[size]));
+</script>
+
+<Centered padding="none" fill={false}>
+	<kbd class={computedClasses} {...restProps}>
+		{@render children?.()}
+	</kbd>
+</Centered>
+
+<style>
+	kbd {
+		background-color: light-dark(var(--neutral-100), var(--neutral-700));
+		color: light-dark(var(--neutral-900), var(--neutral-100));
+		border-color: light-dark(var(--neutral-300), var(--neutral-500));
+		display: inline-block;
+		line-height: 1;
+		border-radius: var(--rounding-size-1);
+		border: 1px solid;
+	}
+
+	.kbd--small {
+		padding: calc(var(--spacing-xsm) * 0.5) var(--spacing-xsm);
+		font-size: var(--font-size-0);
+	}
+
+	.kbd--medium {
+		padding: var(--spacing-xsm) var(--spacing-sm);
+		font-size: var(--font-size-1);
+	}
+
+	.kbd--large {
+		padding: var(--spacing-sm) var(--spacing-md);
+		font-size: var(--font-size-2);
+	}
+</style>

package/dist/atoms/kbd/Kbd.svelte.d.ts

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

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

@@ -0,0 +1,7 @@
+import type { KbdProps } from './types.js';
+export declare const defaultProps: Partial<KbdProps>;
+export declare const kbdSizeClasses: {
+    readonly small: "kbd--small";
+    readonly medium: "kbd--medium";
+    readonly large: "kbd--large";
+};

package/dist/atoms/kbd/constants.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+    size: 'small'
+};
+export const kbdSizeClasses = {
+    small: 'kbd--small',
+    medium: 'kbd--medium',
+    large: 'kbd--large'
+};

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+/**
+ * Props for the Kbd component
+ *
+ * Represents keyboard keys or shortcuts with visual styling that resembles
+ * physical keyboard keys. Useful for displaying keyboard shortcuts, hotkeys,
+ * or keyboard-related instructions.
+ *
+ * @example
+ * ```svelte
+ * <Kbd>Ctrl</Kbd>
+ *
+ * <Kbd variant="dark">
+ *   Enter
+ * </Kbd>
+ *
+ * <Kbd size="large">
+ *   ⌘
+ * </Kbd>
+ * ```
+ */
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+	/**
+	 * The content to be rendered inside the kbd element
+	 */
+	children?: Snippet;
+
+	/**
+	 * Size variant that determines the kbd's dimensions
+	 * - `small`: Compact size for inline usage
+	 * - `medium`: Standard size (default)
+	 * - `large`: Larger size for emphasis
+	 *
+	 * @default 'small'
+	 */
+	size?: 'small' | 'medium' | 'large';
+}

package/dist/index.d.ts

@@ -10,3 +10,7 @@ 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';
+export { default as Kbd } from './atoms/kbd/Kbd.svelte';
+export type { KbdProps } from './atoms/kbd/types.js';
+export { default as Item } from './molecules/item/Item.svelte';
+export type { ItemProps } from './molecules/item/types.js';

package/dist/index.js

@@ -9,3 +9,5 @@ export { default as Centered } from './atoms/container/sub/centered.container.sv
 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';
+export { default as Kbd } from './atoms/kbd/Kbd.svelte';
+export { default as Item } from './molecules/item/Item.svelte';

package/dist/molecules/item/Item.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { HBox, VBox, Text } from '../../index.js';
+	import type { ItemProps } from './types.js';
+
+	let { text, subtitle, action }: ItemProps = $props();
+</script>
+
+<HBox bg rounding padding="xsm" justify="space-between">
+	<VBox gap="none" padding="none">
+		<Text>{text}</Text>
+		<Text variant="half">{subtitle}</Text>
+	</VBox>
+	{@render action?.()}
+</HBox>

package/dist/molecules/item/Item.svelte.d.ts

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

package/dist/molecules/item/types.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+
+export interface ItemProps {
+	text: string;
+	subtitle?: string;
+	action?: Snippet;
+}

package/package.json

@@ -2,7 +2,7 @@
 	"name": "ecmc-design-core",
 	"description": "Atoms and molecules for ecmc design system",
 	"license": "MIT",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"author": {
 		"name": "Arad Fadaei",
 		"url": "https://www.fadaei.dev"
@@ -82,7 +82,9 @@
 		"@vitest/coverage-v8": "^4.0.16"
 	},
 	"keywords": [
-		"svelte"
+		"svelte",
+		"component",
+		"atomic"
 	],
 	"lint-staged": {
 		"*": "prettier --write --ignore-unknown",