@lumen-design/card 0.0.2

package/dist/Card.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import type { CardProps, StyleValue } from './types'
+
+    const styleToString = (value?: StyleValue): string | undefined => {
+        if (!value) return undefined
+        if (typeof value === 'string') return value
+        return Object.entries(value)
+            .map(([key, val]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}:${val}`)
+            .join(';')
+    }
+
+    let {
+        header,
+        footer,
+        bodyStyle,
+        headerClass = '',
+        bodyClass = '',
+        footerClass = '',
+        shadow = 'always',
+        children,
+        class: cls = '',
+        ...attrs
+    }: CardProps = $props()
+
+    const shadowClass = $derived(shadow !== 'always' ? ` is-${shadow}-shadow` : '')
+    const cardClasses = $derived(`lm-card${shadowClass}${cls ? ` ${cls}` : ''}`)
+    const headerClasses = $derived(`lm-card__header${headerClass ? ` ${headerClass}` : ''}`)
+    const bodyClasses = $derived(`lm-card__body${bodyClass ? ` ${bodyClass}` : ''}`)
+    const footerClasses = $derived(`lm-card__footer${footerClass ? ` ${footerClass}` : ''}`)
+    const bodyStyleText = $derived(styleToString(bodyStyle))
+</script>
+
+<div class={cardClasses} {...attrs}>
+    {#if header}
+        <div class={headerClasses}>
+            {#if typeof header === 'string'}
+                {header}
+            {:else}
+                {@render header()}
+            {/if}
+        </div>
+    {/if}
+
+    <div class={bodyClasses} style={bodyStyleText}>
+        {#if children}
+            {@render children()}
+        {/if}
+    </div>
+
+    {#if footer}
+        <div class={footerClasses}>
+            {#if typeof footer === 'string'}
+                {footer}
+            {:else}
+                {@render footer()}
+            {/if}
+        </div>
+    {/if}
+</div>

package/dist/Card.svelte.d.ts

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

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Card from './Card.svelte';
+export { Card };
+export * from './types';
+export default Card;

package/dist/index.js

@@ -0,0 +1,4 @@
+import Card from './Card.svelte';
+export { Card };
+export * from './types';
+export default Card;

package/dist/types.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** Card 阴影显示时机 */
+export type CardShadow = 'always' | 'hover' | 'never';
+export type StyleValue = string | Record<string, string | number>;
+/** Card 属性 */
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+    /** 卡片标题（也可通过 header snippet 传入） */
+    header?: string | Snippet;
+    /** 卡片底部（也可通过 footer snippet 传入） */
+    footer?: string | Snippet;
+    /** body 的 CSS 样式 */
+    bodyStyle?: StyleValue;
+    /** header 自定义类名 */
+    headerClass?: string;
+    /** body 自定义类名 */
+    bodyClass?: string;
+    /** footer 自定义类名 */
+    footerClass?: string;
+    /** 阴影显示时机 */
+    shadow?: CardShadow;
+    /** 子内容 */
+    children?: Snippet;
+    /** 自定义类名 */
+    class?: string;
+}

package/dist/types.js

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

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@lumen-design/card",
+  "version": "0.0.2",
+  "description": "Card component 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"
+  }
+}