@digitalc/dxp-ui 0.0.4 → 0.0.5-alpha-gomo.1

package/es/components/Icon/Icon.js

@@ -0,0 +1,18 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "style", "className"];
+import React from 'react';
+import "../../assets/iconFont/iconfont.css"; // 确保字体路径正确
+import { jsx as _jsx } from "react/jsx-runtime";
+var MIcon = function MIcon(_ref) {
+  var type = _ref.type,
+    style = _ref.style,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("i", _objectSpread({
+    className: "DCPL ".concat(className || '', " ").concat(type),
+    style: style,
+    "aria-hidden": "true"
+  }, rest));
+};
+export default MIcon;

package/es/components/Icon/designTokens.d.ts

@@ -0,0 +1,6 @@
+declare const designTokens: {
+    colorIconButtonNeutral: any;
+    colorIconButtonInverse: any;
+    sizingButtonIcon: any;
+};
+export default designTokens;

package/es/components/Icon/designTokens.js

@@ -0,0 +1,7 @@
+import TokenManager from "../../utils/tokenManager";
+var designTokens = {
+  colorIconButtonNeutral: TokenManager.tokenKey('colorIconButtonNeutral'),
+  colorIconButtonInverse: TokenManager.tokenKey('colorIconButtonInverse'),
+  sizingButtonIcon: TokenManager.tokenKey('sizingButtonIcon')
+};
+export default designTokens;

package/es/components/Icon/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface IIconProps {
+    name: string;
+    color?: string;
+    size?: string | number;
+    style?: React.CSSProperties;
+    inverse?: boolean;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const Icon: (props: IIconProps) => React.JSX.Element;
+export default Icon;

package/es/components/Icon/index.js

@@ -0,0 +1,29 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["name", "color", "size", "inverse", "style"];
+import React from 'react';
+import MIcon from "./Icon";
+import designTokens from "./designTokens";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Icon = function Icon(props) {
+  var colorIconButtonInverse = designTokens.colorIconButtonInverse,
+    colorIconButtonNeutral = designTokens.colorIconButtonNeutral,
+    sizingButtonIcon = designTokens.sizingButtonIcon;
+  var name = props.name,
+    color = props.color,
+    _props$size = props.size,
+    size = _props$size === void 0 ? sizingButtonIcon : _props$size,
+    _props$inverse = props.inverse,
+    inverse = _props$inverse === void 0 ? false : _props$inverse,
+    style = props.style,
+    rest = _objectWithoutProperties(props, _excluded);
+  var mergeStyle = _objectSpread({
+    color: color || (inverse ? colorIconButtonInverse : colorIconButtonNeutral),
+    fontSize: size ? "".concat(size, "px") : ''
+  }, style);
+  return /*#__PURE__*/_jsx(MIcon, _objectSpread({
+    type: name,
+    style: mergeStyle
+  }, rest));
+};
+export default Icon;

package/es/components/IconButton/designTokens.d.ts

@@ -0,0 +1,21 @@
+declare const designTokens: {
+    colorIconButtonNeutral: any;
+    colorIconButtonInverse: any;
+    sizingIconButtonMedium: any;
+    sizingIconButtonSmall: any;
+    spacingIconButtonPaddingVertical: any;
+    spacingIconButtonPaddingVerticalSm: any;
+    spacingIconButtonPaddingHorizontal: any;
+    spacingIconButtonPaddingHorizontalSm: any;
+    spacingIconButtonHorizontalGap: any;
+    spacingIconButtonHorizontalGapSm: any;
+    colorIconButtonDisabled: any;
+    colorIconButtonHover: any;
+    colorIconButtonActive: any;
+    transitionIconButton: string;
+};
+declare const otherDesignTokens: {
+    [x: string]: string;
+};
+export { designTokens, otherDesignTokens, };
+export default designTokens;

package/es/components/IconButton/designTokens.js

@@ -0,0 +1,39 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { getToken } from "../../utils/tokenHelper";
+import { cssClasses } from "../../constants";
+var prefixCls = cssClasses.PREFIX + '-icon-button';
+
+// 设计令牌定义
+var designTokens = {
+  // 图标按钮颜色
+  colorIconButtonNeutral: getToken('colorIconButtonNeutral'),
+  colorIconButtonInverse: getToken('colorIconButtonInverse'),
+  // 反色
+
+  // 图标按钮尺寸
+  sizingIconButtonMedium: getToken('sizingIconButtonIconMedium'),
+  // Medium Icon: 24px x 24px
+  sizingIconButtonSmall: getToken('sizingIconButtonIconSmall'),
+  // Small Icon: 16px x 16px
+
+  //  padding
+  spacingIconButtonPaddingVertical: getToken('spacingIconButtonPaddingVertical'),
+  // Medium
+  spacingIconButtonPaddingVerticalSm: getToken('spacingIconButtonPaddingVerticalSm'),
+  // Small
+
+  spacingIconButtonPaddingHorizontal: getToken('spacingIconButtonPaddingHorizontal'),
+  spacingIconButtonPaddingHorizontalSm: getToken('spacingIconButtonPaddingHorizontalSm'),
+  spacingIconButtonHorizontalGap: getToken('spacingIconButtonHorizontalGap'),
+  spacingIconButtonHorizontalGapSm: getToken('spacingIconButtonHorizontalGapSm'),
+  colorIconButtonDisabled: getToken('colorIconButtonDisabled'),
+  colorIconButtonHover: getToken('colorIconButtonHover'),
+  colorIconButtonActive: getToken('colorIconButtonActive'),
+  // 过渡动画
+  transitionIconButton: '0.3s'
+};
+
+// 其他样式属性
+var otherDesignTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "--".concat(prefixCls, "-color"), "".concat(getToken('colorIconButtonNeutral'))), "--".concat(prefixCls, "-color-inverse"), "".concat(getToken('colorIconButtonInverse'))), "--".concat(prefixCls, "-color-disabled"), "".concat(getToken('colorIconButtonDisabled'))), "--".concat(prefixCls, "-transition"), "all ".concat(designTokens.transitionIconButton));
+export { designTokens, otherDesignTokens };
+export default designTokens;

package/es/components/IconButton/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import './style/index.less';
+export type Size = 'medium' | 'small';
+export interface IconButtonProps {
+    customeIconSize?: string | number;
+    prefixCls?: string;
+    name: string;
+    color?: string;
+    size?: Size | string | number;
+    style?: React.CSSProperties;
+    className?: string;
+    inverse?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    [key: string]: any;
+}
+declare const IconButton: React.FC<IconButtonProps>;
+import IconButtonGroup from '../IconButtonGroup';
+export { IconButtonGroup };
+export default IconButton;

package/es/components/IconButton/index.js

@@ -0,0 +1,106 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["prefixCls", "size", "customeIconSize", "disabled", "loading", "style", "className", "onMouseDown", "onClick", "onMouseEnter", "onMouseLeave"];
+import React from 'react';
+import classNames from 'classnames';
+import { Theme, useStyleRegister } from '@ant-design/cssinjs';
+import Icon from "../Icon";
+import { cssClasses } from "../../constants";
+import { noop } from "../../utils/noop";
+import { designTokens, otherDesignTokens } from "./designTokens";
+
+// 这种是另一方 定制 antd 的 style 的方式； 现在使用了上面的 designTokens.ts 的方式。
+import "./style/index.less";
+
+// 定义设计令牌类型
+
+// 定义派生令牌类型
+
+// 定义派生函数
+var derivativeFunc = function derivativeFunc(token) {
+  return {
+    buttonColor: token.primaryColor,
+    buttonFontSize: token.fontSize * 1.2
+  };
+};
+
+// 创建主题
+var theme = new Theme(derivativeFunc);
+var IconButton = function IconButton(props) {
+  var _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? cssClasses.PREFIX + '-icon-button' : _props$prefixCls,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    customeIconSize = props.customeIconSize,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    style = props.style,
+    className = props.className,
+    _props$onMouseDown = props.onMouseDown,
+    onMouseDown = _props$onMouseDown === void 0 ? noop : _props$onMouseDown,
+    _props$onClick = props.onClick,
+    onClick = _props$onClick === void 0 ? noop : _props$onClick,
+    _props$onMouseEnter = props.onMouseEnter,
+    onMouseEnter = _props$onMouseEnter === void 0 ? noop : _props$onMouseEnter,
+    _props$onMouseLeave = props.onMouseLeave,
+    onMouseLeave = _props$onMouseLeave === void 0 ? noop : _props$onMouseLeave,
+    restProps = _objectWithoutProperties(props, _excluded);
+
+  // 获取图标尺寸
+  var getIconSize = function getIconSize() {
+    if (size === 'medium') {
+      return designTokens.sizingIconButtonMedium;
+    } else if (size === 'small') {
+      return designTokens.sizingIconButtonSmall;
+    }
+    return designTokens.sizingIconButtonMedium;
+  };
+
+  // 处理点击事件
+  var handleClick = function handleClick(e) {
+    if (disabled || loading) {
+      return;
+    }
+    onClick === null || onClick === void 0 || onClick(e);
+  };
+
+  // 使用 useStyleRegister 注册自定义样式
+  var useCustomIconButtonStyle = function useCustomIconButtonStyle() {
+    var iconSize = getIconSize();
+    var gap = size === 'medium' ? designTokens.spacingIconButtonHorizontalGap : designTokens.spacingIconButtonHorizontalGapSm;
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {},
+      path: [prefixCls]
+    }, function () {
+      return "\n      .".concat(prefixCls, "-container {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        // width: ").concat(iconSize, "px;\n        // height: ").concat(iconSize, "px;\n        cursor: ").concat(disabled ? 'not-allowed' : 'pointer', ";\n        opacity: ").concat(disabled ? 0.5 : 1, ";\n        transition: ").concat(designTokens.transitionIconButton, ";\n      }\n\n      .").concat(prefixCls, "-medium {\n        width: ").concat(designTokens.sizingIconButtonMedium, "px;\n        height: ").concat(designTokens.sizingIconButtonMedium, "px;\n        padding:  ").concat(designTokens.spacingIconButtonPaddingHorizontal, "px ").concat(designTokens.spacingIconButtonPaddingVertical, "px;\n      }\n\n      .").concat(prefixCls, "-small {\n        width: ").concat(designTokens.sizingIconButtonSmall, "px;\n        height: ").concat(designTokens.sizingIconButtonSmall, "px;\n        padding: ").concat(designTokens.spacingIconButtonPaddingHorizontalSm, "px ").concat(designTokens.spacingIconButtonPaddingVerticalSm, "px;\n      }\n\n      .").concat(prefixCls, "-container:hover {\n        opacity: 0.8;\n        color: ").concat(designTokens.colorIconButtonHover, ";\n      }\n\n      .").concat(prefixCls, "-container:active {\n        opacity: 0.7;\n        color: ").concat(designTokens.colorIconButtonActive, ";\n      }\n\n      .").concat(prefixCls, "-loading i {\n        animation: loadingCircle 1s infinite linear;\n      }\n\n      .").concat(prefixCls, "-group {\n        gap: ").concat(gap, "px;\n      }\n\n      .").concat(prefixCls, "-group .").concat(prefixCls, "-medium + .").concat(prefixCls, "-medium {\n        padding-left: ").concat(designTokens.spacingIconButtonHorizontalGap, "px;\n      }\n\n      .").concat(prefixCls, "-group .").concat(prefixCls, "-small + .").concat(prefixCls, "-small {\n        padding-left: ").concat(designTokens.spacingIconButtonHorizontalGapSm, "px;\n      }\n    ");
+    });
+    return hashId;
+  };
+  var hashId = useCustomIconButtonStyle();
+  var iconSize = getIconSize();
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames("".concat(prefixCls, " ").concat(prefixCls, "-container ").concat(prefixCls, "-").concat(size, " ").concat(loading ? "".concat(prefixCls, "-loading") : ''), hashId, className),
+    style: style,
+    onClick: handleClick,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    children: /*#__PURE__*/_jsx(Icon, _objectSpread(_objectSpread({}, restProps), {}, {
+      size: customeIconSize || iconSize,
+      style: _objectSpread({}, otherDesignTokens)
+    }))
+  });
+};
+
+// 导入IconButtonGroup组件
+import IconButtonGroup from "../IconButtonGroup";
+
+// 导出组件
+import { jsx as _jsx } from "react/jsx-runtime";
+export { IconButtonGroup };
+
+// 默认导出
+export default IconButton;

package/es/components/IconButton/style/index.less

@@ -0,0 +1,59 @@
+@import './variables.less';
+
+// 基础图标按钮样式
+@components: icon-button;
+
+// 使用字符串拼接
+.@{prefix}-@{components} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle; // 垂直居中
+  transition: all 0.3s;
+  user-select: none;
+  position: relative;
+
+  &:hover {
+    opacity: 0.8;
+    transform: scale(0.9);
+  }
+
+  &:active {
+    opacity: 0.5;
+    transform: scale(0.9);
+  }
+
+  // 禁用状态
+  &[disabled],
+  &.@{prefix}-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  // 加载状态
+  &.@{prefix}-loading {
+    cursor: default;
+    pointer-events: none;
+
+    i {
+      animation: loadingCircle 1s infinite linear;
+    }
+  }
+
+  @keyframes loadingCircle {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  // 分组样式
+  &-group {
+    display: inline-flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: center;
+  }
+}

package/es/components/IconButton/style/variables.less

@@ -0,0 +1,5 @@
+
+@import '../../../style/variables.less';
+
+// 图标按钮变量
+@btn-border-radius: var(--base-border-radius-button);

package/es/components/IconButtonGroup/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface IconButtonGroupProps {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children: React.ReactNode;
+}
+/**
+ * IconButtonGroup 组件用于对图标按钮进行分组
+ * 分组间距：
+ * - 中等图标按钮：8px
+ * - 小图标按钮：16px
+ */
+declare const IconButtonGroup: React.FC<IconButtonGroupProps>;
+export default IconButtonGroup;

package/es/components/IconButtonGroup/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { cssClasses } from "../../constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * IconButtonGroup 组件用于对图标按钮进行分组
+ * 分组间距：
+ * - 中等图标按钮：8px
+ * - 小图标按钮：16px
+ */
+var IconButtonGroup = function IconButtonGroup(props) {
+  var _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? cssClasses.PREFIX + '-icon-button-group' : _props$prefixCls,
+    className = props.className,
+    style = props.style,
+    children = props.children;
+  return /*#__PURE__*/_jsx("div", {
+    className: "".concat(prefixCls, " ").concat(cssClasses.PREFIX, "-icon-button-group ").concat(className || ''),
+    style: style,
+    children: children
+  });
+};
+export default IconButtonGroup;

package/es/components/Image/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type backImageRadio = 1 | 2 | 0.68;
+export declare const BackImageEunm: Record<string, backImageRadio>;
+export interface IImageProps {
+    src?: string;
+    radio?: backImageRadio;
+    imageSize?: number | string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const Image: (props: IImageProps) => React.JSX.Element;
+export default Image;

package/es/components/Image/index.js

@@ -0,0 +1,33 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["src", "style", "imageSize", "radio", "className"];
+import React from 'react';
+import { default as classNames } from 'classnames';
+import { cssClasses } from "../../constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var BackImageEunm = {
+  whRadio1: 1,
+  whRadio2: 2,
+  whRadio3: 0.68
+};
+var Image = function Image(props) {
+  var src = props.src,
+    style = props.style,
+    imageSize = props.imageSize,
+    _props$radio = props.radio,
+    radio = _props$radio === void 0 ? BackImageEunm.whRadio2 : _props$radio,
+    className = props.className,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  var mergedStyle = imageSize ? _objectSpread({
+    width: imageSize,
+    height: 'auto',
+    aspectRatio: "".concat(radio),
+    objectFit: 'cover'
+  }, style) : _objectSpread({}, style);
+  return /*#__PURE__*/_jsx("img", _objectSpread({
+    className: classNames("".concat(cssClasses.PREFIX, "-image}"), className),
+    src: src,
+    style: mergedStyle
+  }, otherProps));
+};
+export default Image;

package/es/components/ListItem/designTokens.d.ts

@@ -0,0 +1,30 @@
+declare const designTokens: {
+    sizingListItemIconImage: any;
+    sizingListItemIconIcon: any;
+    sizingListItemIconIconStatus: any;
+    sizingListItemImageImage: any;
+    sizingListItemImageIcon: any;
+    sizingListItemImageIconLg: any;
+    sizingListItemImageThumbnail: any;
+    sizingListItemIcon: any;
+    sizingListItemIconLg: any;
+    spacingListItemIconStatusPaddingRight: any;
+    spacingListItemIconPaddingLeft: any;
+    spacingListItemImagePaddingRight: any;
+    spacingListItemIconImagePaddingVertical: any;
+    spacingListItemIconImagePaddingHorizontal: any;
+    spacingListItemIconIconPaddingVertical: any;
+    spacingListItemIconIconPaddingHorizontal: any;
+    spacingListItemImageIconPaddingRight: any;
+    spacingListItemImagePointsPaddingTop: any;
+    colorListItemIconBackground: any;
+    colorListItemIconSubtle: any;
+    colorListItemIcon: any;
+    borderRadiusListItem: any;
+    colorListItemBackground: any;
+    spacingListItemTextPaddingHorizontal: any;
+    colorListItemTextTitle: any;
+    colorListItemTextSubtitle: any;
+    colorListItemTextPoints: any;
+};
+export default designTokens;

package/es/components/ListItem/designTokens.js

@@ -0,0 +1,31 @@
+import TokenManager from "../../utils/tokenManager";
+var designTokens = {
+  sizingListItemIconImage: TokenManager.tokenKey('sizingListItemIconImage'),
+  sizingListItemIconIcon: TokenManager.tokenKey('sizingListItemIconIcon'),
+  sizingListItemIconIconStatus: TokenManager.tokenKey('sizingListItemIconIconStatus'),
+  sizingListItemImageImage: TokenManager.tokenKey('sizingListItemImageImage'),
+  sizingListItemImageIcon: TokenManager.tokenKey('sizingListItemImageIcon'),
+  sizingListItemImageIconLg: TokenManager.tokenKey('sizingListItemImageIconLg'),
+  sizingListItemImageThumbnail: TokenManager.tokenKey('sizingListItemImageThumbnail'),
+  sizingListItemIcon: TokenManager.tokenKey('sizingListItemIcon'),
+  sizingListItemIconLg: TokenManager.tokenKey('sizingListItemIconLg'),
+  spacingListItemIconStatusPaddingRight: TokenManager.tokenKey('spacingListItemIconStatusPaddingRight'),
+  spacingListItemIconPaddingLeft: TokenManager.tokenKey('spacingListItemIconPaddingLeft'),
+  spacingListItemImagePaddingRight: TokenManager.tokenKey('spacingListItemImagePaddingRight'),
+  spacingListItemIconImagePaddingVertical: TokenManager.tokenKey('spacingListItemIconImagePaddingVertical'),
+  spacingListItemIconImagePaddingHorizontal: TokenManager.tokenKey('spacingListItemIconImagePaddingHorizontal'),
+  spacingListItemIconIconPaddingVertical: TokenManager.tokenKey('spacingListItemIconIconPaddingVertical'),
+  spacingListItemIconIconPaddingHorizontal: TokenManager.tokenKey('spacingListItemIconIconPaddingHorizontal'),
+  spacingListItemImageIconPaddingRight: TokenManager.tokenKey('spacingListItemImageIconPaddingRight'),
+  spacingListItemImagePointsPaddingTop: TokenManager.tokenKey('spacingListItemImagePointsPaddingTop'),
+  colorListItemIconBackground: TokenManager.tokenKey('colorListItemIconBackground'),
+  colorListItemIconSubtle: TokenManager.tokenKey('colorListItemIconSubtle'),
+  colorListItemIcon: TokenManager.tokenKey('colorListItemIcon'),
+  borderRadiusListItem: TokenManager.tokenKey('borderRadiusListItem'),
+  colorListItemBackground: TokenManager.tokenKey('colorListItemBackground'),
+  spacingListItemTextPaddingHorizontal: TokenManager.tokenKey('spacingListItemTextPaddingHorizontal'),
+  colorListItemTextTitle: TokenManager.tokenKey('colorListItemTextTitle'),
+  colorListItemTextSubtitle: TokenManager.tokenKey('colorListItemTextSubtitle'),
+  colorListItemTextPoints: TokenManager.tokenKey('colorListItemTextPoints')
+};
+export default designTokens;

package/es/components/ListItem/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import './style/index.less';
+export declare const ListItemTypes: {
+    readonly ListItemIcon: "ListItemIcon";
+    readonly ListItemImage: "ListItemImage";
+    readonly ListItemOther: "ListItemOther";
+};
+export declare const TAPPABLE_AREAS: {
+    readonly ALL: "ALL";
+    readonly EXPECT_IMAGE: "EXPECT_IMAGE";
+};
+export declare const ListItemRightTypes: {
+    readonly Toggle: "Toggle";
+    readonly Link: "Link";
+    readonly Status: "Status";
+    readonly Default: "Default";
+};
+export type ListItemType = typeof ListItemTypes[keyof typeof ListItemTypes];
+export type ListItemRightType = typeof ListItemRightTypes[keyof typeof ListItemRightTypes];
+export type TappableAreaType = typeof TAPPABLE_AREAS[keyof typeof TAPPABLE_AREAS];
+export interface IIconConfig {
+    iconStyle: React.CSSProperties;
+    iconName: string;
+}
+export interface ISubIconValueConfig {
+    value: string;
+    iconName: string;
+}
+export interface IListItemProps {
+    listType: ListItemType;
+    leftIcon?: IIconConfig;
+    leftImageSrc?: string;
+    title: string;
+    subTitle?: string;
+    listItemRightType?: ListItemRightType;
+    showToggle?: boolean;
+    toggleChecked?: boolean;
+    onToggleChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    showLink?: boolean;
+    LinkName?: string;
+    onLinkClick?: () => void;
+    showStatus?: boolean;
+    statusIconName?: string;
+    statusIconColor?: string;
+    subTitleUp?: boolean;
+    tagName?: string;
+    showTag?: boolean;
+    subIconObj?: ISubIconValueConfig;
+    leftThumbnail?: string;
+    showRightBtn?: boolean;
+    onRightBtnClick?: () => void;
+    rightBtnTxt?: string;
+    showRightIcon?: boolean;
+    rightIconName?: string;
+    onRightIconClick?: () => void;
+    tappableArea?: TappableAreaType;
+    tappableAreaClick?: () => void;
+}
+declare const ListItem: React.FC<IListItemProps>;
+export default ListItem;