@ticatec/topside-elements 1.0.0

package/dist/data_display/card/Card.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+    import type {Snippet} from 'svelte';
+    import type CardAction from "./CardAction";
+    import type {CardActionsAlign} from "./CardAction";
+    import CommonCardActionBar from "./CommonCardActionBar.svelte";
+    import CardHeader from "./CardHeader.svelte";
+
+    interface Props {
+        style?: string;
+        title?: string;
+        actions?: Array<CardAction>;
+        variant?: 'plain' | '3d';
+        data?: any;
+        header?: Snippet;
+        children?: Snippet;
+        theme?: string;
+        /** 操作栏图标排布方式，默认 'distribute'（按数量平分宽度、每个居中，不会被拉到两端） */
+        /** 动作栏对齐方式 */
+        actions$align?: CardActionsAlign;
+        /** 'center'/'left'/'right' 模式下相邻图标的固定间距，例如 '16px' */
+        actionsGap?: string;
+        /** 内容区内联样式 */
+        content$style?: string;
+    }
+
+    let {
+        style = "",
+        title = "",
+        actions = [],
+        variant = 'plain',
+        data = null,
+        header,
+        children,
+        theme,
+        actions$align = 'distribute',
+        actionsGap,
+        content$style = '',
+    }: Props = $props();
+</script>
+
+<div class="topside-card" style={style} data-theme={theme}>
+    <div class="card-inner shadow-hover" class:variant-3d={variant === '3d'} >
+        {#if title}
+            <div class="card-header">
+                <CardHeader {title}/>
+            </div>
+        {:else if header}
+            <div class="card-header">
+                {@render header()}
+            </div>
+        {/if}
+        <div class="card-content" style={content$style}>
+            {#if children}
+                {@render children()}
+            {/if}
+        </div>
+        {#if actions && actions.length > 0}
+            <CommonCardActionBar {actions} {data} align={actions$align} gap={actionsGap}/>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .topside-card {
+        display: block;
+        width: var(--topside-card-default-size);
+        padding: 4px 0;
+        overflow: hidden;
+    }
+
+    .card-inner {
+        display: block;
+        border-radius: var(--topside-card-radius);
+        position: relative;
+        background-color: var(--topside-card-color-surface);
+        flex-direction: column;
+        overflow: hidden;
+        border: 1px solid var(--topside-card-border-color);
+        transition: border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+        transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+        box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
+
+    .card-header {
+        padding: var(--topside-card-header-margin);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 600;
+        font-size: 1.15rem;
+        color: var(--topside-card-text-muted);
+        border-bottom: 1px solid var(--topside-card-color-inside-border);
+    }
+
+    .card-content {
+        flex: 1 1 auto;
+        padding: 20px;
+        font-size: 14px;
+        overflow: hidden;
+        line-height: 1.6;
+    }
+
+    .variant-3d {
+        box-shadow: var(--topside-card-shadow, rgba(0, 0, 0, 0.16) 0px 1px 4px);
+    }
+</style>

package/dist/data_display/card/Card.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type CardAction from "./CardAction";
+import type { CardActionsAlign } from "./CardAction";
+interface Props {
+    style?: string;
+    title?: string;
+    actions?: Array<CardAction>;
+    variant?: 'plain' | '3d';
+    data?: any;
+    header?: Snippet;
+    children?: Snippet;
+    theme?: string;
+    /** 操作栏图标排布方式，默认 'distribute'（按数量平分宽度、每个居中，不会被拉到两端） */
+    /** 动作栏对齐方式 */
+    actions$align?: CardActionsAlign;
+    /** 'center'/'left'/'right' 模式下相邻图标的固定间距，例如 '16px' */
+    actionsGap?: string;
+    /** 内容区内联样式 */
+    content$style?: string;
+}
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/data_display/card/CardAction.d.ts

@@ -0,0 +1,36 @@
+import type { ActionHandler } from "../../types";
+export type { ActionHandler };
+export default interface CardAction {
+    /**
+     * 显示文字（图标动作可省略，用 tooltip 说明）
+     */
+    label?: string;
+    /**
+     * 使用icon字体
+     */
+    icon?: string;
+    /**
+     * 直接嵌入图标
+     */
+    img?: string;
+    /**
+     * 鼠标停留的提示
+     */
+    tooltip?: string;
+    /**
+     *
+     */
+    disabled?: boolean;
+    /**
+     *
+     */
+    handler: ActionHandler;
+}
+/**
+ * 操作栏图标的排布方式：
+ * - distribute（默认）：按图标数量平分整行宽度，每个图标在自己的等分格子里居中
+ *   （等价于 justify-content: space-around；数量少时不会被拉到两端）
+ * - center / left / right：固定间距（见 CommonCardActionBar 的 gap），整组图标
+ *   在操作栏里居中 / 左对齐 / 右对齐
+ */
+export type CardActionsAlign = 'distribute' | 'center' | 'left' | 'right';

package/dist/data_display/card/CardAction.js

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

package/dist/data_display/card/CardHeader.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    interface Props {
+        title: string;
+    }
+
+    let {title}: Props = $props();
+</script>
+
+<span class="card-header-title" title={title}>{title}</span>
+
+<style>
+    .card-header-title {
+        display: block;
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+</style>

package/dist/data_display/card/CardHeader.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    title: string;
+}
+declare const CardHeader: import("svelte").Component<Props, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/data_display/card/CommonCardActionBar.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+    import type CardAction from "./CardAction";
+    import type {CardActionsAlign} from "./CardAction";
+    import utils from "../../overlay/common/utils";
+
+    interface Props {
+        actions: Array<CardAction>;
+        color?: string | null;
+        data?: any;
+        theme?: string;
+        /** 图标排布方式，默认 'distribute'（按数量平分宽度、每个居中） */
+        align?: CardActionsAlign;
+        /** 'center'/'left'/'right' 模式下相邻图标的固定间距；不设置则用 --topside-spacing-actionbar */
+        gap?: string;
+    }
+
+    let {
+        actions,
+        color = null,
+        data,
+        theme,
+        align = 'distribute',
+        gap
+    }: Props = $props();
+
+    let barStyle = $derived(gap ? `--card-action-gap: ${gap}` : '');
+
+    let clickEnable = $state(true);
+
+    const handleActionClick = (action: CardAction) => async (e: MouseEvent) => {
+        if (clickEnable && !action.disabled) {
+            clickEnable = false;
+            action.handler?.(data);
+            await utils.sleep(0.5);
+            clickEnable = true;
+        }
+    };
+
+    const handleActionKeyDown = (action: CardAction) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleActionClick(action)(e as unknown as MouseEvent);
+        }
+    };
+</script>
+
+<div class="card-action-bar align-{align}" style={barStyle}>
+    {#each actions as action}
+        {#if action.icon}
+            <i class="action-icon {action.icon}"
+               class:disabled={action.disabled}
+               data-tip={action.disabled ? undefined : action.tooltip}
+               role="button" tabindex={action.disabled ? -1 : 0}
+               aria-disabled={action.disabled}
+               aria-label={action.tooltip}
+               onclick={handleActionClick(action)}
+               onkeydown={handleActionKeyDown(action)}
+            ></i>
+        {:else if action.img}
+            <button type="button" class="card-action-img-btn"
+                    class:disabled={action.disabled}
+                    disabled={action.disabled}
+                    data-tip={action.disabled ? undefined : action.tooltip}
+                    aria-label={action.tooltip}
+                    onclick={handleActionClick(action)}>
+                <img class="card-action-img" alt="" src={action.img}/>
+            </button>
+        {/if}
+
+    {/each}
+</div>
+
+<style>
+    .card-action-bar {
+        padding: var(--topside-card-footer-margin);
+        height: var(--topside-card-footer-height);
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        align-items: center;
+        text-align: center;
+        font-size: var(--topside-card-bar-font-size);
+        border-top: 1px solid var(--topside-card-color-inside-border);
+        color: var(--topside-card-color-action-bar);
+    }
+
+    /* 按数量平分整行宽度，每个图标在自己的等分格子里居中 — 数量少时不会被拉到两端 */
+    .card-action-bar.align-distribute {
+        justify-content: space-around;
+    }
+
+    .card-action-bar.align-center {
+        justify-content: center;
+        gap: var(--card-action-gap, var(--topside-spacing-actionbar, 8px));
+    }
+
+    .card-action-bar.align-left {
+        justify-content: flex-start;
+        gap: var(--card-action-gap, var(--topside-spacing-actionbar, 8px));
+    }
+
+    .card-action-bar.align-right {
+        justify-content: flex-end;
+        gap: var(--card-action-gap, var(--topside-spacing-actionbar, 8px));
+    }
+
+    .action-icon {
+        display: block;
+        cursor: pointer;
+        position: relative;
+        font-size: var(--action-image-size, var(--topside-action-image-size, 15px));
+    }
+
+    .action-icon:hover {
+        color: var(--topside-card-color-action-bar-hover);
+    }
+
+    .action-icon:active {
+        position: relative;
+        top: 1px;
+    }
+
+    .action-icon.disabled {
+        color: var(--topside-card-color-action-bar-disabled);
+        top: unset!important;
+        cursor: not-allowed;
+    }
+
+
+    .card-action-img-btn {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        display: inline-flex;
+    }
+
+    .card-action-img-btn:active {
+        position: relative;
+        top: 1px;
+    }
+
+    .card-action-img-btn.disabled {
+        cursor: not-allowed;
+    }
+
+    .card-action-img-btn.disabled .card-action-img {
+        filter: grayscale(100%);
+    }
+
+    .card-action-img {
+        width: var(--action-image-size, var(--topside-action-image-size));
+        height: var(--action-image-size, var(--topside-action-image-size));
+    }
+
+</style>

package/dist/data_display/card/CommonCardActionBar.svelte.d.ts

@@ -0,0 +1,15 @@
+import type CardAction from "./CardAction";
+import type { CardActionsAlign } from "./CardAction";
+interface Props {
+    actions: Array<CardAction>;
+    color?: string | null;
+    data?: any;
+    theme?: string;
+    /** 图标排布方式，默认 'distribute'（按数量平分宽度、每个居中） */
+    align?: CardActionsAlign;
+    /** 'center'/'left'/'right' 模式下相邻图标的固定间距；不设置则用 --topside-spacing-actionbar */
+    gap?: string;
+}
+declare const CommonCardActionBar: import("svelte").Component<Props, {}, "">;
+type CommonCardActionBar = ReturnType<typeof CommonCardActionBar>;
+export default CommonCardActionBar;

package/dist/data_display/card/README.md

@@ -0,0 +1,144 @@
+# Card
+
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `actionsAlign`, `contentStyle` were removed in 5.1.0 (no compatibility aliases are kept).
+
+A content container with optional title bar (or custom header snippet), body, and an action bar at the bottom.
+
+> Svelte 5 component. Custom header is passed as the `header` snippet; body content is the default children.
+
+## Installation
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## Import
+
+```svelte
+<script lang="ts">
+  import Card from '@ticatec/topside-elements/Card';
+  import type { CardAction } from '@ticatec/topside-elements/Card';
+</script>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `''` | Plain-text title rendered by `CardHeader`. Single-line, truncated with an ellipsis (native tooltip shows the full text) when it overflows. If empty and `header` is provided, the custom snippet is used instead |
+| `header` | `Snippet` | `undefined` | Custom header content (takes over when `title` is empty) |
+| `actions` | `CardAction[]` | `[]` | Action bar items rendered at the bottom. Empty array → no footer |
+| `data` | `any` | `null` | Passed as the argument to each action's `callback(data)` |
+| `actions$align` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | How action icons are laid out — see below |
+| `actionsGap` | `string` | `undefined` | Fixed spacing between icons for `'center'`/`'left'`/`'right'` (e.g. `'16px'`); falls back to `--topside-spacing-actionbar` |
+| `variant` | `'plain' \| '3d'` | `'plain'` | `'3d'` adds a box-shadow to lift the card |
+| `style` | `string` | `''` | Inline CSS on the root |
+| `content$style` | `string` | `''` | Inline CSS on the body wrapper (`.card-content`) |
+| `theme` | `string` | `''` | Theme value, exposed as `data-theme` on the root for scoped CSS |
+| `children` | `Snippet` | `undefined` | Card body |
+
+### `CardAction`
+
+```ts
+interface CardAction {
+  icon?: string;       // icon font class, e.g. 'icon_google_edit'
+  img?: string;        // image URL (used when `icon` is not set)
+  tooltip?: string;    // hover tooltip (skipped when `disabled`)
+  disabled?: boolean;
+  callback: (data: any) => void;
+}
+```
+
+> If both `icon` and `img` are omitted, the action renders nothing — pick one. The action bar enforces a ~500ms debounce between clicks on the same action.
+
+## Examples
+
+### Title + body
+
+```svelte
+<Card title="My Card" variant="3d">
+  <p>This is the card content</p>
+</Card>
+```
+
+### Custom header snippet
+
+```svelte
+<Card {header}>
+  <p>Body</p>
+</Card>
+
+{#snippet header()}
+  <header style="display:flex; align-items:center; gap:8px;">
+    <i class="icon_google_star"></i>
+    <strong>Custom title</strong>
+  </header>
+{/snippet}
+```
+
+### Action bar
+
+```svelte
+<script lang="ts">
+  import Card from '@ticatec/topside-elements/Card';
+  import type { CardAction } from '@ticatec/topside-elements/Card';
+
+  const cardData = { id: 123, name: 'Sample Item' };
+
+  const actions: CardAction[] = [
+    { icon: 'icon_google_save', tooltip: 'Save', callback: (d) => console.log('save', d) },
+    { icon: 'icon_google_delete', tooltip: 'Delete', callback: (d) => console.log('delete', d) },
+  ];
+</script>
+
+<Card title="Item Details" {actions} data={cardData} variant="3d">
+  <p><strong>ID:</strong> {cardData.id}</p>
+  <p><strong>Name:</strong> {cardData.name}</p>
+</Card>
+```
+
+### Action bar layout
+
+With few actions, `justify-content: space-between` (the old, fixed behavior) pushes them to opposite edges — two icons end up one at the far left, one at the far right. `actions$align` controls this:
+
+- `'distribute'` (default) — the row is split into as many equal-width slots as there are actions, each icon centered in its own slot. Equivalent to `justify-content: space-around`; icons never get pushed all the way to the edges regardless of count.
+- `'center'` / `'left'` / `'right'` — icons keep a fixed gap (`actionsGap`, default `--topside-spacing-actionbar`) and the whole group is aligned as a block within the footer.
+
+```svelte
+<Card title="Item Details" {actions} data={cardData} actions$align="center" actionsGap="24px">
+  ...
+</Card>
+```
+
+## Styling
+
+### Card body
+
+| Variable | Used on |
+|----------|---------|
+| `--topside-card-default-size` | Root width |
+| `--topside-card-radius` | Border radius |
+| `--topside-card-color-surface` | Card background |
+| `--topside-card-border-color` | Outer border |
+| `--topside-card-color-inside-border` | Border between header / body / footer |
+| `--topside-card-header-margin` | Header padding |
+| `--topside-card-text-muted` | Title text color |
+| `--topside-card-shadow` | Drop shadow for `variant="3d"` (falls back to `rgba(0,0,0,0.16) 0 1px 4px`) |
+
+### Action bar
+
+| Variable | Used on |
+|----------|---------|
+| `--topside-card-footer-margin` | Footer padding |
+| `--topside-card-footer-height` | Footer height |
+| `--topside-card-bar-font-size` | Action icon size baseline |
+| `--topside-card-color-action-bar` | Default icon color |
+| `--topside-card-color-action-bar-hover` | Icon hover color |
+| `--topside-card-color-action-bar-disabled` | Icon disabled color |
+| `--action-image-size` / `--topside-action-image-size` | Per-card override for action icon/image size |
+| `--topside-spacing-actionbar` | Default `actionsGap` for `'center'`/`'left'`/`'right'` (falls back to `8px`) |
+
+## Variants
+
+- **`plain`** (default) — flat, only border
+- **`3d`** — adds `--topside-card-shadow`; the root also has a hover transition (border-color / transform / box-shadow)

package/dist/data_display/card/README_CN.md

@@ -0,0 +1,144 @@
+# Card 卡片
+
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `actionsAlign`, `contentStyle` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
+内容容器，可选标题栏（或自定义 header snippet）、内容体，以及底部操作栏。
+
+> Svelte 5 组件。自定义标题通过 `header` snippet 传入；内容体就是默认的 children。
+
+## 安装
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## 导入
+
+```svelte
+<script lang="ts">
+  import Card from '@ticatec/topside-elements/Card';
+  import type { CardAction } from '@ticatec/topside-elements/Card';
+</script>
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| `title` | `string` | `''` | 纯文本标题，由 `CardHeader` 渲染。默认单行显示，超出宽度会用省略号截断（原生 tooltip 显示完整文字）。为空且传了 `header` 时改用自定义 snippet |
+| `header` | `Snippet` | `undefined` | 自定义标题内容（`title` 为空时生效） |
+| `actions` | `CardAction[]` | `[]` | 底部操作栏。空数组 → 不渲染底栏 |
+| `data` | `any` | `null` | 作为参数传给每个 action 的 `callback(data)` |
+| `actions$align` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | 操作图标的排布方式，见下文 |
+| `actionsGap` | `string` | `undefined` | `'center'`/`'left'`/`'right'` 模式下图标之间的固定间距（比如 `'16px'`），不设则回退到 `--topside-spacing-actionbar` |
+| `variant` | `'plain' \| '3d'` | `'plain'` | `'3d'` 加盒阴影让卡片浮起来 |
+| `style` | `string` | `''` | 根节点的内联 CSS |
+| `content$style` | `string` | `''` | 内容区域包裹层（`.card-content`）的内联 CSS |
+| `theme` | `string` | `''` | 主题值，作为 `data-theme` 写到根节点上方便做作用域 CSS |
+| `children` | `Snippet` | `undefined` | 卡片内容体 |
+
+### `CardAction`
+
+```ts
+interface CardAction {
+  icon?: string;       // icon 字体类名，比如 'icon_google_edit'
+  img?: string;        // 图片 URL（未设 icon 时使用）
+  tooltip?: string;    // 悬停提示（`disabled` 为真时不显示）
+  disabled?: boolean;
+  callback: (data: any) => void;
+}
+```
+
+> `icon` 和 `img` 都不设的话该项不渲染任何东西 —— 二选一必填。操作栏对同一个 action 有约 500ms 的点击防抖。
+
+## 示例
+
+### 标题 + 内容
+
+```svelte
+<Card title="我的卡片" variant="3d">
+  <p>这是卡片内容</p>
+</Card>
+```
+
+### 自定义 header snippet
+
+```svelte
+<Card {header}>
+  <p>内容</p>
+</Card>
+
+{#snippet header()}
+  <header style="display:flex; align-items:center; gap:8px;">
+    <i class="icon_google_star"></i>
+    <strong>自定义标题</strong>
+  </header>
+{/snippet}
+```
+
+### 操作栏
+
+```svelte
+<script lang="ts">
+  import Card from '@ticatec/topside-elements/Card';
+  import type { CardAction } from '@ticatec/topside-elements/Card';
+
+  const cardData = { id: 123, name: '示例项目' };
+
+  const actions: CardAction[] = [
+    { icon: 'icon_google_save', tooltip: '保存', callback: (d) => console.log('save', d) },
+    { icon: 'icon_google_delete', tooltip: '删除', callback: (d) => console.log('delete', d) },
+  ];
+</script>
+
+<Card title="项目详情" {actions} data={cardData} variant="3d">
+  <p><strong>ID:</strong> {cardData.id}</p>
+  <p><strong>名称:</strong> {cardData.name}</p>
+</Card>
+```
+
+### 操作栏排布方式
+
+当图标数量比较少时，`justify-content: space-between`（旧的固定行为）会把它们推到两端 —— 两个图标就变成一个在最左，一个在最右。`actions$align` 用来控制这个行为：
+
+- `'distribute'`（默认）—— 把整行按图标数量平分成若干等宽格子，每个图标在自己的格子里居中。等价于 `justify-content: space-around`；不管图标数量多少，都不会被拉到两端。
+- `'center'` / `'left'` / `'right'` —— 图标之间保持固定间距（`actionsGap`，默认回退到 `--topside-spacing-actionbar`），整组图标作为一个整体在底栏里居中 / 左对齐 / 右对齐。
+
+```svelte
+<Card title="项目详情" {actions} data={cardData} actions$align="center" actionsGap="24px">
+  ...
+</Card>
+```
+
+## 样式定制
+
+### 卡片本体
+
+| 变量 | 用处 |
+|------|------|
+| `--topside-card-default-size` | 根节点宽度 |
+| `--topside-card-radius` | 圆角 |
+| `--topside-card-color-surface` | 卡片背景 |
+| `--topside-card-border-color` | 外边框 |
+| `--topside-card-color-inside-border` | 标题/内容/底栏之间的分隔线 |
+| `--topside-card-header-margin` | 标题区域内边距 |
+| `--topside-card-text-muted` | 标题文字颜色 |
+| `--topside-card-shadow` | `variant="3d"` 的盒阴影（缺省回退到 `rgba(0,0,0,0.16) 0 1px 4px`） |
+
+### 操作栏
+
+| 变量 | 用处 |
+|------|------|
+| `--topside-card-footer-margin` | 底栏内边距 |
+| `--topside-card-footer-height` | 底栏高度 |
+| `--topside-card-bar-font-size` | 操作图标基准尺寸 |
+| `--topside-card-color-action-bar` | 图标默认颜色 |
+| `--topside-card-color-action-bar-hover` | 图标悬停颜色 |
+| `--topside-card-color-action-bar-disabled` | 图标禁用颜色 |
+| `--action-image-size` / `--topside-action-image-size` | 单卡片覆盖操作图标/图片的尺寸 |
+| `--topside-spacing-actionbar` | `'center'`/`'left'`/`'right'` 模式下 `actionsGap` 的默认值（缺省回退到 `8px`） |
+
+## variant
+
+- **`plain`**（默认）—— 扁平，只有边框
+- **`3d`** —— 加 `--topside-card-shadow`；根节点同时有 hover 过渡（border-color / transform / box-shadow）

package/dist/data_display/card/index.d.ts

@@ -0,0 +1,5 @@
+import Card from "./Card.svelte";
+import type CardAction from "./CardAction";
+import type { ActionHandler, CardActionsAlign } from "./CardAction";
+export default Card;
+export type { CardAction, ActionHandler, CardActionsAlign };

package/dist/data_display/card/index.js

@@ -0,0 +1,2 @@
+import Card from "./Card.svelte";
+export default Card;

package/dist/data_display/concise_data_table/Column.d.ts

@@ -0,0 +1,9 @@
+export default interface Column {
+    title: string;
+    field: string;
+    width: number;
+    align?: "left" | "center" | "right";
+    weight?: number;
+    formatter?: (value: any) => string;
+    renderHTML?: boolean;
+}

package/dist/data_display/concise_data_table/Column.js

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