@antv/infographic 0.0.1-beta.1

package/lib/designs/components/ItemValue.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemValue = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const utils_1 = require("../../utils");
+const ItemValue = ({ indexes, value, formatter = (v) => String(v), ...props }) => {
+    const finalProps = {
+        width: 100,
+        fontSize: 14,
+        fill: '#666',
+        wordWrap: true,
+        lineHeight: 1.4,
+        children: formatter(value),
+        'data-value': value,
+        backgroundColor: 'rgba(199, 207, 145, 0.2)',
+        ...props,
+    };
+    finalProps.height ?? (finalProps.height = Math.ceil(+finalProps.lineHeight * +finalProps.fontSize));
+    return ((0, jsx_runtime_1.jsx)(infographic_jsx_1.Text, { ...finalProps, id: `item-${(0, utils_1.getItemKeyFromIndexes)(indexes)}-value` }));
+};
+exports.ItemValue = ItemValue;

package/lib/designs/components/ItemsGroup.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { GroupProps } from '@antv/infographic-jsx';
+export interface ItemsGroupProps extends GroupProps {
+}
+export declare const ItemsGroup: (props: ItemsGroupProps) => any;

package/lib/designs/components/ItemsGroup.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemsGroup = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const ItemsGroup = (props) => {
+    return (0, jsx_runtime_1.jsx)(infographic_jsx_1.Group, { id: "items-group", ...props });
+};
+exports.ItemsGroup = ItemsGroup;

package/lib/designs/components/Title.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { type BaseGeometryProps } from '@antv/infographic-jsx';
+import type { ThemeColors } from '../../themes';
+export interface TitleProps extends BaseGeometryProps {
+    alignHorizontal?: 'left' | 'center' | 'right';
+    title?: string;
+    desc?: string;
+    descLineNumber?: number;
+    themeColors: ThemeColors;
+}
+export declare const Title: (props: TitleProps) => any;

package/lib/designs/components/Title.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Title = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const layouts_1 = require("../layouts");
+const Title = (props) => {
+    const { x = 0, y = 0, width = 720, alignHorizontal = 'center', title, desc, descLineNumber: subTitleLineNumber = 2, themeColors, } = props;
+    const MainTitle = (props) => {
+        const defaultProps = {
+            id: 'title',
+            fontSize: 24,
+            fill: themeColors.colorPrimaryText,
+            width,
+            height: desc ? 32 : 64,
+            lineHeight: 1.4,
+            alignHorizontal,
+        };
+        return ((0, jsx_runtime_1.jsx)(infographic_jsx_1.Text, { ...defaultProps, ...props, children: title }));
+    };
+    const Desc = (props) => {
+        const defaultProps = {
+            id: 'desc',
+            fontSize: 16,
+            fill: themeColors.colorTextSecondary,
+            width,
+            alignHorizontal,
+            lineHeight: 1.4,
+            height: subTitleLineNumber * 24,
+        };
+        return ((0, jsx_runtime_1.jsx)(infographic_jsx_1.Text, { ...defaultProps, ...props, children: desc }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { id: "title-group", flexDirection: "column", x: x, y: y, width: width, gap: 8, children: [title && (0, jsx_runtime_1.jsx)(MainTitle, {}), desc && (0, jsx_runtime_1.jsx)(Desc, {})] }));
+};
+exports.Title = Title;

package/lib/designs/components/index.d.ts

@@ -0,0 +1,10 @@
+export * from './Btn';
+export * from './BtnsGroup';
+export * from './Gap';
+export * from './Illus';
+export * from './ItemDesc';
+export * from './ItemIcon';
+export * from './ItemLabel';
+export * from './ItemsGroup';
+export * from './ItemValue';
+export * from './Title';

package/lib/designs/components/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Btn"), exports);
+__exportStar(require("./BtnsGroup"), exports);
+__exportStar(require("./Gap"), exports);
+__exportStar(require("./Illus"), exports);
+__exportStar(require("./ItemDesc"), exports);
+__exportStar(require("./ItemIcon"), exports);
+__exportStar(require("./ItemLabel"), exports);
+__exportStar(require("./ItemsGroup"), exports);
+__exportStar(require("./ItemValue"), exports);
+__exportStar(require("./Title"), exports);

package/lib/designs/decorations/index.d.ts

@@ -0,0 +1,3 @@
+export * from './simple-arrow';
+export * from './text-3d';
+export * from './triangle';

package/lib/designs/decorations/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./simple-arrow"), exports);
+__exportStar(require("./text-3d"), exports);
+__exportStar(require("./triangle"), exports);

package/lib/designs/decorations/simple-arrow.d.ts

@@ -0,0 +1,6 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { RectProps } from '@antv/infographic-jsx';
+export declare const SimpleArrow: ({ width, height, colorPrimary, rotation, ...rest }: RectProps & {
+    colorPrimary: string;
+    rotation?: number;
+}) => any;

package/lib/designs/decorations/simple-arrow.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleArrow = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const SimpleArrow = ({ width = 25, height = 25, colorPrimary = '#6699FF', rotation = 0, ...rest }) => {
+    const strokeId = `gradient-arrow-stroke-${colorPrimary.replace('#', '')}`;
+    const fillId = `gradient-arrow-fill-${colorPrimary.replace('#', '')}`;
+    const shaftWidth = Math.round(width * 0.515);
+    const shaftTop = Math.round(height * 0.275);
+    const shaftBottom = Math.round(height * 0.875);
+    const points = [
+        { x: 0, y: shaftTop },
+        { x: shaftWidth, y: shaftTop },
+        { x: shaftWidth, y: height * 0.075 },
+        { x: width, y: height * 0.575 },
+        { x: shaftWidth, y: height * 1.075 },
+        { x: shaftWidth, y: shaftBottom },
+        { x: 0, y: shaftBottom },
+    ];
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const transform = `rotate(${rotation} ${centerX} ${centerY})`;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Polygon, { ...rest, width: width, height: height, points: points, fill: `url(#${fillId})`, stroke: `url(#${strokeId})`, transform: transform }), (0, jsx_runtime_1.jsxs)(infographic_jsx_1.Defs, { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: fillId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", "stop-color": colorPrimary, "stop-opacity": "0.36" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", "stop-color": colorPrimary, "stop-opacity": "0" })] }), (0, jsx_runtime_1.jsxs)("linearGradient", { id: strokeId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", "stop-color": colorPrimary }), (0, jsx_runtime_1.jsx)("stop", { offset: "58%", "stop-color": colorPrimary, "stop-opacity": "0" })] })] })] }));
+};
+exports.SimpleArrow = SimpleArrow;

package/lib/designs/decorations/text-3d.d.ts

@@ -0,0 +1,82 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType } from '@antv/infographic-jsx';
+export interface Text3dProps {
+    /**
+     * Text content to display
+     */
+    text: string | number;
+    /**
+     * X position of the text
+     * @default 0
+     */
+    x?: number;
+    /**
+     * Y position of the text
+     * @default 0
+     */
+    y?: number;
+    /**
+     * Font size
+     * @default 56
+     */
+    fontSize?: number;
+    /**
+     * Font weight
+     * @default 'bold'
+     */
+    fontWeight?: string | number;
+    /**
+     * Text fill color
+     * @default '#FFFFFF'
+     */
+    fill?: string;
+    /**
+     * Text anchor alignment
+     * @default 'middle'
+     */
+    textAnchor?: 'start' | 'middle' | 'end';
+    /**
+     * Dominant baseline
+     * @default 'middle'
+     */
+    dominantBaseline?: 'auto' | 'middle' | 'hanging' | 'alphabetic' | 'ideographic' | 'mathematical' | 'central' | 'text-before-edge' | 'text-after-edge' | 'inherit' | 'use-script' | 'no-change' | 'reset-size';
+    /**
+     * Shadow offset X for the deepest layer
+     * @default 2
+     */
+    shadowOffsetX?: number;
+    /**
+     * Shadow offset Y for the deepest layer
+     * @default 4
+     */
+    shadowOffsetY?: number;
+    /**
+     * Mid-layer shadow offset X
+     * @default 1
+     */
+    midShadowOffsetX?: number;
+    /**
+     * Mid-layer shadow offset Y
+     * @default 2
+     */
+    midShadowOffsetY?: number;
+    /**
+     * Opacity of the deepest shadow layer
+     * @default 0.3
+     */
+    deepShadowOpacity?: number;
+    /**
+     * Opacity of the mid shadow layer
+     * @default 0.5
+     */
+    midShadowOpacity?: number;
+}
+/**
+ * A 3D text component with layered shadows to create a depth effect
+ *
+ * The component renders three layers of text:
+ * 1. Deep shadow layer (most offset, lowest opacity)
+ * 2. Mid shadow layer (medium offset, medium opacity)
+ * 3. Main text layer (no offset, full opacity)
+ */
+export declare const Text3d: ComponentType<Text3dProps>;

package/lib/designs/decorations/text-3d.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text3d = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+/**
+ * A 3D text component with layered shadows to create a depth effect
+ *
+ * The component renders three layers of text:
+ * 1. Deep shadow layer (most offset, lowest opacity)
+ * 2. Mid shadow layer (medium offset, medium opacity)
+ * 3. Main text layer (no offset, full opacity)
+ */
+const Text3d = ({ text, x = 0, y = 0, fontSize = 56, fontWeight = 'bold', fill = '#FFFFFF', textAnchor = 'middle', dominantBaseline = 'middle', shadowOffsetX = 2, shadowOffsetY = 4, midShadowOffsetX = 1, midShadowOffsetY = 2, deepShadowOpacity = 0.3, midShadowOpacity = 0.5, }) => {
+    return ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { children: [(0, jsx_runtime_1.jsx)("text", { x: x, y: y, fontSize: fontSize, fontWeight: fontWeight, fill: fill, fillOpacity: deepShadowOpacity, textAnchor: textAnchor, dominantBaseline: dominantBaseline, transform: `translate(${shadowOffsetX}, ${shadowOffsetY})`, children: text }), (0, jsx_runtime_1.jsx)("text", { x: x, y: y, fontSize: fontSize, fontWeight: fontWeight, fill: fill, fillOpacity: midShadowOpacity, textAnchor: textAnchor, dominantBaseline: dominantBaseline, transform: `translate(${midShadowOffsetX}, ${midShadowOffsetY})`, children: text }), (0, jsx_runtime_1.jsx)("text", { x: x, y: y, fontSize: fontSize, fontWeight: fontWeight, fill: fill, textAnchor: textAnchor, dominantBaseline: dominantBaseline, children: text })] }));
+};
+exports.Text3d = Text3d;

package/lib/designs/decorations/triangle.d.ts

@@ -0,0 +1,6 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { RectProps } from '@antv/infographic-jsx';
+export declare const Triangle: ({ width, height, colorPrimary, rotation, strokeWidth, ...rest }: RectProps & {
+    colorPrimary: string;
+    rotation?: number;
+}) => any;

package/lib/designs/decorations/triangle.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Triangle = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const Triangle = ({ width = 25, height = 25, colorPrimary = '#6699FF', rotation = 0, strokeWidth = 4, ...rest }) => {
+    // 定义三角形的三个顶点
+    const points = [
+        { x: width / 2, y: 0 }, // 顶点
+        { x: width, y: height }, // 右下角
+        { x: 0, y: height }, // 左下角
+    ];
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const transform = `rotate(${rotation} ${centerX} ${centerY})`;
+    return ((0, jsx_runtime_1.jsx)(infographic_jsx_1.Polygon, { ...rest, width: width, height: height, points: points, fill: colorPrimary, stroke: colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", transform: transform }));
+};
+exports.Triangle = Triangle;

package/lib/designs/defs/DropShadow.d.ts

@@ -0,0 +1,12 @@
+/** @jsxImportSource @antv/infographic-jsx */
+interface DropShadowProps {
+    id?: string;
+    x?: string;
+    y?: string;
+    width?: string;
+    height?: string;
+    color?: string;
+    opacity?: number;
+}
+export declare const DropShadow: (props: DropShadowProps) => any;
+export {};

package/lib/designs/defs/DropShadow.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropShadow = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const DropShadow = (props) => {
+    const { color = 'black', opacity = 0.8, ...restProps } = props;
+    return ((0, jsx_runtime_1.jsx)("filter", { id: "drop-shadow", x: "-25%", y: "-25%", width: "200%", height: "200%", ...restProps, children: (0, jsx_runtime_1.jsx)("feDropShadow", { dx: "4", dy: "4", stdDeviation: "4", "flood-color": color, "flood-opacity": opacity }) }));
+};
+exports.DropShadow = DropShadow;

package/lib/designs/defs/LinearGradient.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource @antv/infographic-jsx */
+export interface LinearGradientProps {
+    id?: string;
+    startColor?: string;
+    stopColor?: string;
+    direction?: 'left-right' | 'right-left' | 'top-bottom' | 'bottom-top';
+}
+export declare const LinearGradient: (props: LinearGradientProps) => any;

package/lib/designs/defs/LinearGradient.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinearGradient = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const LinearGradient = (props) => {
+    const { id = 'linear-gradient', startColor = 'black', stopColor = 'white', direction = 'left-right', } = props;
+    const directionMap = {
+        'left-right': { x1: '0%', y1: '0%', x2: '100%', y2: '0%' },
+        'right-left': { x1: '100%', y1: '0%', x2: '0%', y2: '0%' },
+        'top-bottom': { x1: '0%', y1: '0%', x2: '0%', y2: '100%' },
+        'bottom-top': { x1: '0%', y1: '100%', x2: '0%', y2: '0%' },
+    };
+    return ((0, jsx_runtime_1.jsxs)("linearGradient", { id: id, ...directionMap[direction], children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: startColor }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: stopColor })] }));
+};
+exports.LinearGradient = LinearGradient;

package/lib/designs/defs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DropShadow';
+export * from './LinearGradient';

package/lib/designs/defs/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DropShadow"), exports);
+__exportStar(require("./LinearGradient"), exports);

package/lib/designs/index.d.ts

@@ -0,0 +1,6 @@
+export * from '../templates';
+export * from './components';
+export * from './items';
+export * from './layouts';
+export * from './structures';
+export type * from './types';

package/lib/designs/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../templates"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./items"), exports);
+__exportStar(require("./layouts"), exports);
+__exportStar(require("./structures"), exports);

package/lib/designs/items/BadgeCard.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface BadgeCardProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+    iconSize?: number;
+    badgeSize?: number;
+    gap?: number;
+}
+export declare const BadgeCard: ComponentType<BadgeCardProps>;

package/lib/designs/items/BadgeCard.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeCard = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const tinycolor2_1 = __importDefault(require("tinycolor2"));
+const components_1 = require("../components");
+const layouts_1 = require("../layouts");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const BadgeCard = (props) => {
+    const [{ datum, indexes, width = 200, height = 80, iconSize = 24, badgeSize = 32, gap = 8, positionH = 'normal', themeColors, valueFormatter, }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'height', 'iconSize', 'badgeSize', 'gap']);
+    const value = datum.value;
+    const gradientId = `${themeColors.colorPrimary}-badge`;
+    const badgeX = positionH === 'flipped' ? width - gap - badgeSize : gap;
+    const contentStartX = positionH === 'flipped' ? gap : badgeSize + 2 * gap;
+    const contentWidth = width - badgeSize - 3 * gap;
+    const fullWidth = width - gap * 2;
+    const hasValue = value !== undefined;
+    const hasDesc = !!datum.desc;
+    // 描述区域的固定位置（label + value 区域的下方）
+    const descY = gap + 14 + 18 + 8; // label(14) + value(18) + gap(8)
+    const contentAreaHeight = descY - gap; // label 和 value 占据的总高度
+    // 当没有 desc 时，徽章和内容区域垂直居中
+    const badgeY = !hasDesc ? (height - badgeSize) / 2 : gap;
+    // 没有 value 时，label 在整个内容区域垂直居中；有 value 时从顶部开始
+    const contentY = !hasValue && !hasDesc ? (height - 14) / 2 : gap;
+    return ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, width: width, height: height, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Defs, { children: (0, jsx_runtime_1.jsxs)("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: (0, tinycolor2_1.default)(themeColors.colorPrimary)
+                                .darken(20)
+                                .toHexString() })] }) }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimaryBg, rx: 8, ry: 8 }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: badgeX, y: badgeY, width: badgeSize, height: badgeSize, fill: `url(#${gradientId})` }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: badgeX + (badgeSize - iconSize) / 2, y: badgeY + (badgeSize - iconSize) / 2, size: iconSize, fill: themeColors.colorWhite }), (0, jsx_runtime_1.jsxs)(layouts_1.FlexLayout, { flexDirection: "column", x: contentStartX, y: contentY, width: contentWidth, height: !hasValue && !hasDesc ? undefined : contentAreaHeight, alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: 'center', fontSize: 14, fill: themeColors.colorText, children: datum.label }), hasValue && ((0, jsx_runtime_1.jsx)(components_1.ItemValue, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: "center", fontSize: 18, lineHeight: 1, fontWeight: "bold", fill: themeColors.colorPrimary, value: value, formatter: valueFormatter }))] }), hasDesc && ((0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: gap, y: descY, width: fullWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', fontSize: 11, fill: themeColors.colorTextSecondary, lineNumber: 2, lineHeight: 1.2, wordWrap: true, children: datum.desc }))] }));
+};
+exports.BadgeCard = BadgeCard;
+(0, registry_1.registerItem)('badge-card', {
+    component: exports.BadgeCard,
+    composites: ['icon', 'label', 'value', 'desc'],
+});

package/lib/designs/items/CandyCardLite.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface CandyCardLiteProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+}
+export declare const CandyCardLite: ComponentType<CandyCardLiteProps>;

package/lib/designs/items/CandyCardLite.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CandyCardLite = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const CandyCardLite = (props) => {
+    const [{ indexes, datum, width = 280, height = 140, themeColors }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'height']);
+    return ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: width, height: height, rx: 18, ry: 18, fill: themeColors.colorPrimaryBg, stroke: themeColors.colorPrimary }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Path, { x: width - 85, y: 0.5, width: 85, height: 65, id: (0, utils_1.getItemId)(indexes, 'static', 'decoration'), d: "M0.496704 0H61.7558C74.0725 0 84.0571 9.99394 84.0571 22.3221V60.1302L78.4401 62.9458C64.9296 68.1198 49.0492 65.0802 38.3968 53.9843L10.7444 25.1801C5.41799 19.6306 2.15489 12.855 0.935998 5.80383L0.496704 0Z", fill: "white" }), (0, jsx_runtime_1.jsx)(components_1.ItemLabel, { indexes: indexes, x: 20, y: 24, width: 200, alignHorizontal: "left", alignVertical: "center", fill: themeColors.colorText, children: datum.label }), (0, jsx_runtime_1.jsx)(components_1.ItemDesc, { indexes: indexes, x: 20, y: 58, width: 220, height: 70, fill: themeColors.colorTextSecondary, alignHorizontal: "left", alignVertical: "top", children: datum.desc }), (0, jsx_runtime_1.jsx)(components_1.ItemIcon, { indexes: indexes, x: width - 48, y: 12, width: 32, height: 32, fill: themeColors.colorPrimary })] }));
+};
+exports.CandyCardLite = CandyCardLite;
+(0, registry_1.registerItem)('candy-card-lite', {
+    component: exports.CandyCardLite,
+    composites: ['icon', 'label', 'desc'],
+});

package/lib/designs/items/CapsuleItem.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface CapsuleItemProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+    gap?: number;
+    iconPadding?: number;
+}
+export declare const CapsuleItem: ComponentType<CapsuleItemProps>;

package/lib/designs/items/CapsuleItem.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CapsuleItem = void 0;
+const jsx_runtime_1 = require("@antv/infographic-jsx/jsx-runtime");
+/** @jsxImportSource @antv/infographic-jsx */
+const infographic_jsx_1 = require("@antv/infographic-jsx");
+const components_1 = require("../components");
+const defs_1 = require("../defs");
+const utils_1 = require("../utils");
+const registry_1 = require("./registry");
+const CapsuleItem = (props) => {
+    const [{ datum, indexes, width = 300, height = 80, gap = 12, positionH = 'normal', iconPadding = height / 10, themeColors, }, restProps,] = (0, utils_1.getItemProps)(props, ['width', 'height', 'gap', 'iconPadding']);
+    // Capsule border radius and icon size (icon with some padding inside)
+    const borderRadius = height / 2;
+    const iconSize = height - iconPadding * 2; // Icon diameter with padding
+    // Calculate positions based on positionH and icon presence
+    const isFlipped = positionH === 'flipped';
+    const hasIcon = !!datum.icon;
+    // Calculate text area dimensions
+    const textWidth = hasIcon ? width - height - gap : width - gap * 2;
+    const textX = hasIcon ? (isFlipped ? gap : height) : gap;
+    const textAlign = hasIcon ? (isFlipped ? 'right' : 'left') : 'center';
+    const labelProps = {
+        indexes,
+        width: textWidth,
+        alignHorizontal: textAlign,
+        alignVertical: 'center',
+        fontSize: 16,
+        fontWeight: '600',
+        fill: themeColors.colorWhite,
+    };
+    // Get label bounds to calculate layout
+    const labelBounds = (0, infographic_jsx_1.getElementBounds)((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { ...labelProps, children: datum.label }));
+    const descProps = {
+        indexes,
+        width: textWidth,
+        alignHorizontal: textAlign,
+        alignVertical: 'top',
+        fontSize: 12,
+        lineNumber: 1,
+        fill: themeColors.colorWhite,
+    };
+    // Get desc bounds to calculate layout
+    const descBounds = (0, infographic_jsx_1.getElementBounds)(datum.desc ? (0, jsx_runtime_1.jsx)(components_1.ItemDesc, { ...descProps, children: datum.desc }) : null);
+    // Calculate vertical positions for text elements
+    const textGap = 4;
+    const totalTextHeight = labelBounds.height + textGap + descBounds.height;
+    const textStartY = (height - totalTextHeight) / 2;
+    const labelY = textStartY;
+    const descY = labelY + labelBounds.height + textGap;
+    // Calculate icon position (centered in the circle area with padding)
+    const iconX = isFlipped ? width - height + iconPadding : iconPadding;
+    const iconY = iconPadding;
+    return ((0, jsx_runtime_1.jsxs)(infographic_jsx_1.Group, { ...restProps, children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Defs, { children: (0, jsx_runtime_1.jsx)(defs_1.DropShadow, {}) }), (0, jsx_runtime_1.jsx)(infographic_jsx_1.Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimary, rx: borderRadius, ry: borderRadius }), datum.icon && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(infographic_jsx_1.Ellipse, { x: iconX, y: iconY, width: iconSize, height: iconSize, fillOpacity: 0.5, filter: "url(#drop-shadow)" }), (0, jsx_runtime_1.jsx)(components_1.ItemIconCircle, { indexes: indexes, x: iconX, y: iconY, size: iconSize, fill: themeColors.colorBg, colorBg: themeColors.colorPrimary })] })), datum.label && ((0, jsx_runtime_1.jsx)(components_1.ItemLabel, { x: textX, y: labelY, ...labelProps, children: datum.label })), datum.desc && ((0, jsx_runtime_1.jsx)(components_1.ItemDesc, { x: textX, y: descY, ...descProps, children: datum.desc }))] }));
+};
+exports.CapsuleItem = CapsuleItem;
+(0, registry_1.registerItem)('capsule-item', {
+    component: exports.CapsuleItem,
+    composites: ['icon', 'label', 'desc'],
+});

package/lib/designs/items/CircleNode.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType } from '@antv/infographic-jsx';
+import type { BaseItemProps } from './types';
+export interface CircleNodeProps extends BaseItemProps {
+    width?: number;
+    height?: number;
+}
+export declare const CircleNode: ComponentType<CircleNodeProps>;