@antv/infographic 0.0.1-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 AntV
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/esm/constants/element.d.ts

@@ -0,0 +1,11 @@
+export declare const enum ElementTypeEnum {
+    Background = "background",
+    Text = "text",
+    IconGroup = "icon-group",
+    Icon = "icon",
+    Geometry = "geometry",
+    Button = "button",
+    IllusGroup = "illus-group",
+    IllusVolume = "illus-volume",
+    Illus = "illus"
+}

package/esm/constants/element.js

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

package/esm/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './element';

package/esm/constants/index.js

@@ -0,0 +1 @@
+export * from './element';

package/esm/designs/components/Btn.d.ts

@@ -0,0 +1,7 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { RectProps } from '@antv/infographic-jsx';
+export interface BtnProps extends RectProps {
+    indexes: number[];
+}
+export declare const BtnAdd: (props: BtnProps) => any;
+export declare const BtnRemove: (props: BtnProps) => any;

package/esm/designs/components/Btn.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+import { Rect } from '@antv/infographic-jsx';
+import { getItemKeyFromIndexes } from '../../utils';
+export const BtnAdd = (props) => {
+    const { indexes, ...restProps } = props;
+    const defaultProps = {
+        id: `btn-add-${getItemKeyFromIndexes(indexes)}`,
+        fill: '#B9EBCA',
+        fillOpacity: 0.3,
+        width: 20,
+        height: 20,
+    };
+    return _jsx(Rect, { ...defaultProps, ...restProps });
+};
+export const BtnRemove = (props) => {
+    const { indexes, ...restProps } = props;
+    const defaultProps = {
+        id: `btn-remove-${getItemKeyFromIndexes(indexes)}`,
+        fill: '#F9C0C0',
+        fillOpacity: 0.3,
+        width: 20,
+        height: 20,
+    };
+    return _jsx(Rect, { ...defaultProps, ...restProps });
+};

package/esm/designs/components/BtnsGroup.d.ts

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

package/esm/designs/components/BtnsGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+import { Group } from '@antv/infographic-jsx';
+export const BtnsGroup = (props) => {
+    return _jsx(Group, { id: "btns-group", width: 0, height: 0, ...props });
+};

package/esm/designs/components/Gap.d.ts

@@ -0,0 +1,13 @@
+/** @jsxImportSource @antv/infographic-jsx */
+export interface GapProps {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+/**
+ * 用于在布局中创建间隙的占位符组件。
+ * @description
+ * ⚠️ 只能通过 <Gap /> 使用，不能通过 const gap = <Gap /> 这种方式使用。
+ */
+export declare const Gap: () => any;

package/esm/designs/components/Gap.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+/**
+ * 用于在布局中创建间隙的占位符组件。
+ * @description
+ * ⚠️ 只能通过 <Gap /> 使用，不能通过 const gap = <Gap /> 这种方式使用。
+ */
+export const Gap = () => {
+    return _jsx(_Fragment, {});
+};

package/esm/designs/components/Illus.d.ts

@@ -0,0 +1,6 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { RectProps } from '@antv/infographic-jsx';
+export interface IllusProps extends RectProps {
+    indexes?: number[];
+}
+export declare const Illus: ({ indexes, ...props }: IllusProps) => any;

package/esm/designs/components/Illus.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+import { Rect } from '@antv/infographic-jsx';
+import { getItemKeyFromIndexes } from '../../utils';
+export const Illus = ({ indexes, ...props }) => {
+    const defaultProps = {
+        fill: 'lightgray',
+    };
+    const finalProps = { ...defaultProps, ...props };
+    if (indexes?.length) {
+        finalProps.id = `item-${getItemKeyFromIndexes(indexes)}-illus`;
+    }
+    return _jsx(Rect, { ...finalProps });
+};

package/esm/designs/components/ItemDesc.d.ts

@@ -0,0 +1,7 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { TextProps } from '@antv/infographic-jsx';
+export interface ItemDescProps extends TextProps {
+    indexes: number[];
+    lineNumber?: number;
+}
+export declare const ItemDesc: ({ indexes, lineNumber, children, ...props }: ItemDescProps) => any;

package/esm/designs/components/ItemDesc.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+import { Text } from '@antv/infographic-jsx';
+import { getItemKeyFromIndexes } from '../../utils';
+export const ItemDesc = ({ indexes, lineNumber = 2, children, ...props }) => {
+    if (!children)
+        return null;
+    const finalProps = {
+        width: 100,
+        fontSize: 14,
+        fill: '#666',
+        wordWrap: true,
+        lineHeight: 1.4,
+        children,
+        backgroundColor: 'rgba(199, 207, 145, 0.2)',
+        ...props,
+    };
+    finalProps.height ?? (finalProps.height = Math.ceil(lineNumber * +finalProps.lineHeight * +finalProps.fontSize));
+    return (_jsx(Text, { ...finalProps, id: `item-${getItemKeyFromIndexes(indexes)}-desc` }));
+};

package/esm/designs/components/ItemIcon.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { RectProps } from '@antv/infographic-jsx';
+export interface ItemIconProps extends RectProps {
+    indexes: number[];
+    size?: number;
+}
+export declare const ItemIcon: (props: ItemIconProps) => any;
+export declare const ItemIconCircle: (props: ItemIconProps & {
+    colorBg?: string;
+}) => any;

package/esm/designs/components/ItemIcon.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { Ellipse, Group, Rect } from '@antv/infographic-jsx';
+import { getItemKeyFromIndexes } from '../../utils';
+export const ItemIcon = (props) => {
+    const { indexes, size = 32, ...restProps } = props;
+    const finalProps = {
+        fill: 'lightgray',
+        width: size,
+        height: size,
+        ...restProps,
+    };
+    return (_jsx(Rect, { ...finalProps, id: `item-${getItemKeyFromIndexes(indexes)}-icon` }));
+};
+export const ItemIconCircle = (props) => {
+    const { indexes, size = 50, fill, colorBg = 'white', ...restProps } = props;
+    // 圆形内最大内切正方形的边长 = 圆的直径 / √2
+    const innerSize = (size / Math.SQRT2) * 0.9;
+    const offset = (size - innerSize) / 2;
+    const iconProps = {
+        fill: colorBg,
+        ...restProps,
+        x: offset,
+        y: offset,
+        width: innerSize,
+        height: innerSize,
+    };
+    const prefix = `item-${getItemKeyFromIndexes(indexes)}`;
+    return (_jsxs(Group, { ...restProps, width: size, height: size, id: `${prefix}-group-icon`, children: [_jsx(Ellipse, { width: size, height: size, id: `${prefix}-bg`, fill: fill }), _jsx(Rect, { ...iconProps, id: `${prefix}-icon` })] }));
+};

package/esm/designs/components/ItemLabel.d.ts

@@ -0,0 +1,6 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { TextProps } from '@antv/infographic-jsx';
+export interface ItemLabelProps extends TextProps {
+    indexes: number[];
+}
+export declare const ItemLabel: ({ indexes, children, ...props }: ItemLabelProps) => any;

package/esm/designs/components/ItemLabel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+import { Text } from '@antv/infographic-jsx';
+import { getItemKeyFromIndexes } from '../../utils';
+export const ItemLabel = ({ indexes, children, ...props }) => {
+    const finalProps = {
+        fontSize: 18,
+        fontWeight: 'bold',
+        fill: '#252525',
+        width: 100,
+        lineHeight: 1.4,
+        children,
+        backgroundColor: 'rgba(199, 207, 145, 0.2)',
+        ...props,
+    };
+    finalProps.height ?? (finalProps.height = Math.ceil(+finalProps.lineHeight * +finalProps.fontSize));
+    return (_jsx(Text, { ...finalProps, id: `item-${getItemKeyFromIndexes(indexes)}-label` }));
+};

package/esm/designs/components/ItemValue.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { TextProps } from '@antv/infographic-jsx';
+export interface ItemValueProps extends TextProps {
+    indexes: number[];
+    value: number;
+    formatter?: (value: number) => string | number;
+}
+export declare const ItemValue: ({ indexes, value, formatter, ...props }: ItemValueProps) => any;

package/esm/designs/components/ItemValue.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+import { Text } from '@antv/infographic-jsx';
+import { getItemKeyFromIndexes } from '../../utils';
+export 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 (_jsx(Text, { ...finalProps, id: `item-${getItemKeyFromIndexes(indexes)}-value` }));
+};

package/esm/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/esm/designs/components/ItemsGroup.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+import { Group } from '@antv/infographic-jsx';
+export const ItemsGroup = (props) => {
+    return _jsx(Group, { id: "items-group", ...props });
+};

package/esm/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/esm/designs/components/Title.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Text, } from '@antv/infographic-jsx';
+import { FlexLayout } from '../layouts';
+export 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 (_jsx(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 (_jsx(Text, { ...defaultProps, ...props, children: desc }));
+    };
+    return (_jsxs(FlexLayout, { id: "title-group", flexDirection: "column", x: x, y: y, width: width, gap: 8, children: [title && _jsx(MainTitle, {}), desc && _jsx(Desc, {})] }));
+};

package/esm/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/esm/designs/components/index.js

@@ -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/esm/designs/decorations/index.d.ts

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

package/esm/designs/decorations/index.js

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

package/esm/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/esm/designs/decorations/simple-arrow.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Defs, Polygon } from '@antv/infographic-jsx';
+export 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 (_jsxs(_Fragment, { children: [_jsx(Polygon, { ...rest, width: width, height: height, points: points, fill: `url(#${fillId})`, stroke: `url(#${strokeId})`, transform: transform }), _jsxs(Defs, { children: [_jsxs("linearGradient", { id: fillId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", children: [_jsx("stop", { offset: "0%", "stop-color": colorPrimary, "stop-opacity": "0.36" }), _jsx("stop", { offset: "100%", "stop-color": colorPrimary, "stop-opacity": "0" })] }), _jsxs("linearGradient", { id: strokeId, x1: "100%", y1: "0%", x2: "0%", y2: "0%", children: [_jsx("stop", { offset: "0%", "stop-color": colorPrimary }), _jsx("stop", { offset: "58%", "stop-color": colorPrimary, "stop-opacity": "0" })] })] })] }));
+};

package/esm/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/esm/designs/decorations/text-3d.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+import { Group } from '@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)
+ */
+export 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 (_jsxs(Group, { children: [_jsx("text", { x: x, y: y, fontSize: fontSize, fontWeight: fontWeight, fill: fill, fillOpacity: deepShadowOpacity, textAnchor: textAnchor, dominantBaseline: dominantBaseline, transform: `translate(${shadowOffsetX}, ${shadowOffsetY})`, children: text }), _jsx("text", { x: x, y: y, fontSize: fontSize, fontWeight: fontWeight, fill: fill, fillOpacity: midShadowOpacity, textAnchor: textAnchor, dominantBaseline: dominantBaseline, transform: `translate(${midShadowOffsetX}, ${midShadowOffsetY})`, children: text }), _jsx("text", { x: x, y: y, fontSize: fontSize, fontWeight: fontWeight, fill: fill, textAnchor: textAnchor, dominantBaseline: dominantBaseline, children: text })] }));
+};

package/esm/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/esm/designs/decorations/triangle.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Polygon } from '@antv/infographic-jsx';
+export 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 (_jsx(Polygon, { ...rest, width: width, height: height, points: points, fill: colorPrimary, stroke: colorPrimary, strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", transform: transform }));
+};

package/esm/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/esm/designs/defs/DropShadow.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@antv/infographic-jsx/jsx-runtime";
+export const DropShadow = (props) => {
+    const { color = 'black', opacity = 0.8, ...restProps } = props;
+    return (_jsx("filter", { id: "drop-shadow", x: "-25%", y: "-25%", width: "200%", height: "200%", ...restProps, children: _jsx("feDropShadow", { dx: "4", dy: "4", stdDeviation: "4", "flood-color": color, "flood-opacity": opacity }) }));
+};

package/esm/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/esm/designs/defs/LinearGradient.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+export 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 (_jsxs("linearGradient", { id: id, ...directionMap[direction], children: [_jsx("stop", { offset: "0%", stopColor: startColor }), _jsx("stop", { offset: "100%", stopColor: stopColor })] }));
+};

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

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

package/esm/designs/defs/index.js

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

package/esm/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/esm/designs/index.js

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

package/esm/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/esm/designs/items/BadgeCard.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@antv/infographic-jsx/jsx-runtime";
+/** @jsxImportSource @antv/infographic-jsx */
+import { Defs, Ellipse, Group, Rect, } from '@antv/infographic-jsx';
+import tinycolor from 'tinycolor2';
+import { ItemDesc, ItemIcon, ItemLabel, ItemValue } from '../components';
+import { FlexLayout } from '../layouts';
+import { getItemProps } from '../utils';
+import { registerItem } from './registry';
+export const BadgeCard = (props) => {
+    const [{ datum, indexes, width = 200, height = 80, iconSize = 24, badgeSize = 32, gap = 8, positionH = 'normal', themeColors, valueFormatter, }, restProps,] = 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 (_jsxs(Group, { ...restProps, width: width, height: height, children: [_jsx(Defs, { children: _jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", children: [_jsx("stop", { offset: "0%", stopColor: themeColors.colorPrimary }), _jsx("stop", { offset: "100%", stopColor: tinycolor(themeColors.colorPrimary)
+                                .darken(20)
+                                .toHexString() })] }) }), _jsx(Rect, { x: 0, y: 0, width: width, height: height, fill: themeColors.colorPrimaryBg, rx: 8, ry: 8 }), _jsx(Ellipse, { x: badgeX, y: badgeY, width: badgeSize, height: badgeSize, fill: `url(#${gradientId})` }), _jsx(ItemIcon, { indexes: indexes, x: badgeX + (badgeSize - iconSize) / 2, y: badgeY + (badgeSize - iconSize) / 2, size: iconSize, fill: themeColors.colorWhite }), _jsxs(FlexLayout, { flexDirection: "column", x: contentStartX, y: contentY, width: contentWidth, height: !hasValue && !hasDesc ? undefined : contentAreaHeight, alignItems: "center", justifyContent: "center", children: [_jsx(ItemLabel, { indexes: indexes, width: contentWidth, alignHorizontal: positionH === 'flipped' ? 'right' : 'left', alignVertical: 'center', fontSize: 14, fill: themeColors.colorText, children: datum.label }), hasValue && (_jsx(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 && (_jsx(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 }))] }));
+};
+registerItem('badge-card', {
+    component: BadgeCard,
+    composites: ['icon', 'label', 'value', 'desc'],
+});