@lumen-design/container 0.0.2

package/dist/Aside.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface AsideProps {
+        width?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let { width, children, class: cls = '', ...attrs }: AsideProps = $props()
+
+    const classes = $derived(cls ? `lm-aside ${cls}` : 'lm-aside')
+    const style = $derived(width ? `width: ${width}` : '')
+</script>
+
+<aside {...attrs} class={classes} {style}>
+    {#if children}
+        {@render children()}
+    {/if}
+</aside>

package/dist/Aside.svelte.d.ts

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

package/dist/Container.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface ContainerProps {
+        direction?: 'horizontal' | 'vertical'
+        children?: Snippet
+        class?: string
+    }
+
+    let { direction = 'vertical', children, class: cls = '', ...attrs }: ContainerProps = $props()
+
+    const classes = $derived(`lm-container${direction === 'horizontal' ? ' is-horizontal' : ''}${cls ? ` ${cls}` : ''}`)
+</script>
+
+<div {...attrs} class={classes}>
+    {#if children}
+        {@render children()}
+    {/if}
+</div>

package/dist/Container.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface ContainerProps {
+    direction?: 'horizontal' | 'vertical';
+    children?: Snippet;
+    class?: string;
+}
+declare const Container: import("svelte").Component<ContainerProps, {}, "">;
+type Container = ReturnType<typeof Container>;
+export default Container;

package/dist/Footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface FooterProps {
+        height?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let { height, children, class: cls = '', ...attrs }: FooterProps = $props()
+
+    const classes = $derived(cls ? `lm-footer ${cls}` : 'lm-footer')
+    const style = $derived(height ? `height: ${height}` : '')
+</script>
+
+<footer {...attrs} class={classes} {style}>
+    {#if children}
+        {@render children()}
+    {/if}
+</footer>

package/dist/Footer.svelte.d.ts

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

package/dist/Header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface HeaderProps {
+        height?: string
+        children?: Snippet
+        class?: string
+    }
+
+    let { height, children, class: cls = '', ...attrs }: HeaderProps = $props()
+
+    const classes = $derived(cls ? `lm-header ${cls}` : 'lm-header')
+    const style = $derived(height ? `height: ${height}` : '')
+</script>
+
+<header {...attrs} class={classes} {style}>
+    {#if children}
+        {@render children()}
+    {/if}
+</header>

package/dist/Header.svelte.d.ts

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

package/dist/Main.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+
+    interface MainProps {
+        children?: Snippet
+        class?: string
+    }
+
+    let { children, class: cls = '', ...attrs }: MainProps = $props()
+
+    const classes = $derived(cls ? `lm-main ${cls}` : 'lm-main')
+</script>
+
+<main {...attrs} class={classes}>
+    {#if children}
+        {@render children()}
+    {/if}
+</main>

package/dist/Main.svelte.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Container } from './Container.svelte';
+export { default as Header } from './Header.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Aside } from './Aside.svelte';
+export { default as Main } from './Main.svelte';
+export type { ContainerProps, ContainerDirection, HeaderProps, FooterProps, AsideProps, MainProps } from './types';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as Container } from './Container.svelte';
+export { default as Header } from './Header.svelte';
+export { default as Footer } from './Footer.svelte';
+export { default as Aside } from './Aside.svelte';
+export { default as Main } from './Main.svelte';

package/dist/types.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+/** Container 方向 */
+export type ContainerDirection = 'horizontal' | 'vertical';
+/** Container 属性 */
+export interface ContainerProps {
+    /** 方向 */
+    direction?: ContainerDirection;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Header 属性 */
+export interface HeaderProps {
+    /** 高度 */
+    height?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Footer 属性 */
+export interface FooterProps {
+    /** 高度 */
+    height?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Aside 属性 */
+export interface AsideProps {
+    /** 宽度 */
+    width?: string;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}
+/** Main 属性 */
+export interface MainProps {
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@lumen-design/container",
+  "version": "0.0.2",
+  "description": "Container components for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}