@hanwenbo/x-web-pro-components 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 hanwenbo
+
+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/es/blocks/index.d.ts

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

package/es/blocks/index.js

@@ -0,0 +1,2 @@
+// Blocks - 真实场景页面模板
+export {};

package/es/blocks/shared.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare const BlockShell: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+}>;
+export declare const BlockPanel: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const BlockEyebrow: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const BlockStat: React.FC<{
+    label: string;
+    value: string;
+    trend?: string;
+    tone?: 'default' | 'success' | 'warning';
+}>;
+export declare const BlockBreadcrumb: React.FC<{
+    items: string[];
+    className?: string;
+}>;

package/es/blocks/shared.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '@hanwenbo/x-web-ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var BlockShell = function BlockShell(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    contentClassName = _ref.contentClassName;
+  return /*#__PURE__*/_jsx("div", {
+    className: cn('min-h-screen bg-background text-foreground', className),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "relative overflow-hidden",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,hsl(var(--primary)/0.16),transparent_32%),radial-gradient(circle_at_bottom_right,hsl(var(--secondary)/0.78),transparent_36%)]"
+      }), /*#__PURE__*/_jsx("div", {
+        className: "pointer-events-none absolute inset-0 opacity-50 [background-image:linear-gradient(to_right,hsl(var(--border)/0.24)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--border)/0.18)_1px,transparent_1px)] [background-size:72px_72px] [mask-image:linear-gradient(to_bottom,white,transparent_92%)]"
+      }), /*#__PURE__*/_jsx("div", {
+        className: cn('relative mx-auto flex min-h-screen max-w-[1440px] flex-col px-6 py-6 md:px-10 lg:px-12', contentClassName),
+        children: children
+      })]
+    })
+  });
+};
+export var BlockPanel = function BlockPanel(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className;
+  return /*#__PURE__*/_jsx("div", {
+    className: cn('bg-card/95 rounded-[28px] border border-border shadow-[0_24px_80px_hsl(var(--foreground)/0.08)] backdrop-blur', className),
+    children: children
+  });
+};
+export var BlockEyebrow = function BlockEyebrow(_ref3) {
+  var children = _ref3.children,
+    className = _ref3.className;
+  return /*#__PURE__*/_jsx("div", {
+    className: cn('bg-card/85 inline-flex w-fit items-center gap-2 rounded-full border border-border px-3 py-1.5 text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground', className),
+    children: children
+  });
+};
+export var BlockStat = function BlockStat(_ref4) {
+  var label = _ref4.label,
+    value = _ref4.value,
+    trend = _ref4.trend,
+    _ref4$tone = _ref4.tone,
+    tone = _ref4$tone === void 0 ? 'default' : _ref4$tone;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "bg-background/82 rounded-2xl border border-border p-5",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "text-xs uppercase tracking-[0.16em] text-muted-foreground",
+      children: label
+    }), /*#__PURE__*/_jsx("div", {
+      className: "mt-3 text-2xl font-semibold text-foreground",
+      children: value
+    }), trend ? /*#__PURE__*/_jsx("div", {
+      className: cn('mt-2 text-sm', tone === 'success' ? 'text-success' : tone === 'warning' ? 'text-warning' : 'text-primary'),
+      children: trend
+    }) : null]
+  });
+};
+export var BlockBreadcrumb = function BlockBreadcrumb(_ref5) {
+  var items = _ref5.items,
+    className = _ref5.className;
+  return /*#__PURE__*/_jsx("div", {
+    className: cn('flex flex-wrap items-center gap-2 text-sm text-muted-foreground', className),
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/_jsxs(React.Fragment, {
+        children: [index > 0 ? /*#__PURE__*/_jsx(ChevronRight, {
+          className: "h-4 w-4 shrink-0"
+        }) : null, /*#__PURE__*/_jsx("span", {
+          className: index === items.length - 1 ? 'text-foreground' : undefined,
+          children: item
+        })]
+      }, item);
+    })
+  });
+};

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { type CardProps } from '@hanwenbo/x-web-ui/card';
+export interface ProCardTabPaneProps {
+    key: string;
+    label: React.ReactNode;
+    children?: React.ReactNode;
+}
+export interface ProCardTabsProps {
+    activeKey?: string;
+    defaultActiveKey?: string;
+    onChange?: (activeKey: string) => void;
+    items: ProCardTabPaneProps[];
+}
+export interface ProCardProps extends Omit<CardProps, 'size' | 'title' | 'variant'> {
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    tooltip?: React.ReactNode;
+    headerBordered?: boolean;
+    size?: 'default' | 'small';
+    variant?: 'outlined' | 'borderless';
+    ghost?: boolean;
+    boxShadow?: boolean;
+    split?: 'horizontal' | 'vertical';
+    direction?: 'row' | 'column';
+    wrap?: boolean;
+    tabs?: ProCardTabsProps;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+    checked?: boolean;
+    onChecked?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+export interface StatisticProps {
+    title?: React.ReactNode;
+    value?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    description?: React.ReactNode;
+    trend?: React.ReactNode;
+}
+export interface StatisticCardProps extends ProCardProps {
+    statistic?: StatisticProps;
+}
+export interface CheckCardProps {
+    value?: string | number | boolean;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    avatar?: React.ReactNode;
+    cover?: React.ReactNode;
+    extra?: React.ReactNode;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    onClick?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare type CheckCardValueType = string | number | boolean;
+export interface CheckCardOptionType extends CheckCardProps {
+    value: CheckCardValueType;
+}
+export interface CheckCardGroupProps {
+    value?: CheckCardValueType | CheckCardValueType[];
+    defaultValue?: CheckCardValueType | CheckCardValueType[];
+    multiple?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    bordered?: boolean;
+    options?: CheckCardOptionType[];
+    onChange?: (value: CheckCardValueType | CheckCardValueType[] | undefined) => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const ProCard: React.FC<ProCardProps>;
+export declare const Statistic: React.FC<StatisticProps>;
+export declare const StatisticCard: React.FC<StatisticCardProps>;
+export declare const CheckCardGroup: React.FC<CheckCardGroupProps>;
+export declare const CheckCard: React.FC<CheckCardProps> & {
+    Group: React.FC<CheckCardGroupProps>;
+};
+export default ProCard;

package/es/components/card/index.js

@@ -0,0 +1,361 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["title", "subTitle", "tooltip", "extra", "children", "size", "variant", "headerBordered", "ghost", "boxShadow", "split", "direction", "wrap", "tabs", "collapsible", "collapsed", "defaultCollapsed", "onCollapse", "checked", "onChecked", "className", "bodyClassName", "bodyStyle"],
+  _excluded2 = ["statistic", "children"];
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useMemo, useState } from 'react';
+import { Check, ChevronDown, CircleHelp } from 'lucide-react';
+import { Avatar } from '@hanwenbo/x-web-ui/avatar';
+import { Button } from '@hanwenbo/x-web-ui/button';
+import { Card } from '@hanwenbo/x-web-ui/card';
+import { Tooltip } from '@hanwenbo/x-web-ui/tooltip';
+import { cn } from '@hanwenbo/x-web-ui/utils/cn';
+import { attachPropertiesToComponent } from "../../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var renderTooltip = function renderTooltip(tooltip) {
+  if (!tooltip) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Tooltip, {
+    content: tooltip,
+    children: /*#__PURE__*/_jsx("span", {
+      className: "inline-flex items-center text-muted-foreground",
+      children: /*#__PURE__*/_jsx(CircleHelp, {
+        className: "h-4 w-4"
+      })
+    })
+  });
+};
+var toValueArray = function toValueArray(value, multiple) {
+  if (value == null) {
+    return [];
+  }
+  if (multiple) {
+    return Array.isArray(value) ? value : [value];
+  }
+  return Array.isArray(value) ? value.slice(0, 1) : [value];
+};
+export var ProCard = function ProCard(_ref) {
+  var _tabs$items, _ref2, _tabs$activeKey, _tabs$items2;
+  var title = _ref.title,
+    subTitle = _ref.subTitle,
+    tooltip = _ref.tooltip,
+    extra = _ref.extra,
+    children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
+    _ref$headerBordered = _ref.headerBordered,
+    headerBordered = _ref$headerBordered === void 0 ? false : _ref$headerBordered,
+    _ref$ghost = _ref.ghost,
+    ghost = _ref$ghost === void 0 ? false : _ref$ghost,
+    _ref$boxShadow = _ref.boxShadow,
+    boxShadow = _ref$boxShadow === void 0 ? false : _ref$boxShadow,
+    split = _ref.split,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'column' : _ref$direction,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    tabs = _ref.tabs,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? false : _ref$collapsible,
+    collapsed = _ref.collapsed,
+    _ref$defaultCollapsed = _ref.defaultCollapsed,
+    defaultCollapsed = _ref$defaultCollapsed === void 0 ? false : _ref$defaultCollapsed,
+    onCollapse = _ref.onCollapse,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    onChecked = _ref.onChecked,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName,
+    bodyStyle = _ref.bodyStyle,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(defaultCollapsed),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerCollapsed = _useState2[0],
+    setInnerCollapsed = _useState2[1];
+  var _useState3 = useState((tabs === null || tabs === void 0 ? void 0 : tabs.defaultActiveKey) || (tabs === null || tabs === void 0 || (_tabs$items = tabs.items) === null || _tabs$items === void 0 || (_tabs$items = _tabs$items[0]) === null || _tabs$items === void 0 ? void 0 : _tabs$items.key)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tabKey = _useState4[0],
+    setTabKey = _useState4[1];
+  var mergedCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : innerCollapsed;
+  var mergedActiveTab = (_ref2 = (_tabs$activeKey = tabs === null || tabs === void 0 ? void 0 : tabs.activeKey) !== null && _tabs$activeKey !== void 0 ? _tabs$activeKey : tabKey) !== null && _ref2 !== void 0 ? _ref2 : tabs === null || tabs === void 0 || (_tabs$items2 = tabs.items) === null || _tabs$items2 === void 0 || (_tabs$items2 = _tabs$items2[0]) === null || _tabs$items2 === void 0 ? void 0 : _tabs$items2.key;
+  var handleCollapse = function handleCollapse() {
+    var next = !mergedCollapsed;
+    if (collapsed === undefined) {
+      setInnerCollapsed(next);
+    }
+    onCollapse === null || onCollapse === void 0 || onCollapse(next);
+  };
+  var titleNode = title || subTitle ? /*#__PURE__*/_jsxs("div", {
+    className: "flex min-w-0 items-start gap-3",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "min-w-0",
+      children: [title && /*#__PURE__*/_jsx("div", {
+        className: "text-base font-semibold text-foreground",
+        children: title
+      }), subTitle && /*#__PURE__*/_jsx("div", {
+        className: "mt-1 text-sm text-muted-foreground",
+        children: subTitle
+      })]
+    }), renderTooltip(tooltip)]
+  }) : undefined;
+  var extraNode = extra || collapsible ? /*#__PURE__*/_jsxs("div", {
+    className: "flex items-center gap-2",
+    children: [extra, collapsible ? /*#__PURE__*/_jsx(Button, {
+      variant: "ghost",
+      size: "small",
+      icon: /*#__PURE__*/_jsx(ChevronDown, {
+        className: cn('h-4 w-4 transition-transform', mergedCollapsed && '-rotate-90')
+      }),
+      onClick: handleCollapse
+    }) : null]
+  }) : undefined;
+  var tabContent = useMemo(function () {
+    var _tabs$items$find;
+    return tabs === null || tabs === void 0 || (_tabs$items$find = tabs.items.find(function (item) {
+      return item.key === mergedActiveTab;
+    })) === null || _tabs$items$find === void 0 ? void 0 : _tabs$items$find.children;
+  }, [tabs === null || tabs === void 0 ? void 0 : tabs.items, mergedActiveTab]);
+  return /*#__PURE__*/_jsx(Card, _objectSpread(_objectSpread({}, rest), {}, {
+    title: titleNode,
+    extra: extraNode,
+    variant: ghost ? 'ghost' : variant === 'borderless' ? 'ghost' : 'default',
+    size: size === 'small' ? 'small' : 'middle',
+    className: cn(checked && 'ring-primary/20 ring-2', boxShadow && 'shadow-md', onChecked && 'cursor-pointer', className),
+    bodyClassName: cn(split === 'vertical' && 'divide-y divide-border', bodyClassName, direction === 'row' && 'flex flex-row items-start', wrap && 'flex-wrap'),
+    bodyStyle: _objectSpread(_objectSpread({}, headerBordered ? {
+      borderTopWidth: 1,
+      borderTopStyle: 'solid',
+      borderTopColor: 'hsl(var(--border))'
+    } : {}), bodyStyle),
+    onClick: onChecked ? onChecked : undefined,
+    children: tabs ? /*#__PURE__*/_jsxs("div", {
+      className: "space-y-4",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "flex flex-wrap items-center gap-2 border-b border-border pb-3",
+        children: tabs.items.map(function (item) {
+          return /*#__PURE__*/_jsx("button", {
+            type: "button",
+            className: cn('rounded-full border px-3 py-1 text-sm transition-colors', mergedActiveTab === item.key ? 'bg-primary/10 border-primary text-primary' : 'hover:border-primary/40 border-border bg-background text-muted-foreground'),
+            onClick: function onClick() {
+              var _tabs$onChange;
+              if (tabs.activeKey === undefined) {
+                setTabKey(item.key);
+              }
+              (_tabs$onChange = tabs.onChange) === null || _tabs$onChange === void 0 || _tabs$onChange.call(tabs, item.key);
+            },
+            children: item.label
+          }, item.key);
+        })
+      }), !mergedCollapsed && tabContent]
+    }) : !mergedCollapsed && children
+  }));
+};
+export var Statistic = function Statistic(_ref3) {
+  var title = _ref3.title,
+    value = _ref3.value,
+    prefix = _ref3.prefix,
+    suffix = _ref3.suffix,
+    description = _ref3.description,
+    trend = _ref3.trend;
+  return /*#__PURE__*/_jsxs("div", {
+    className: "space-y-2",
+    children: [title && /*#__PURE__*/_jsx("div", {
+      className: "text-sm font-medium text-muted-foreground",
+      children: title
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "flex items-end gap-2",
+      children: [prefix, /*#__PURE__*/_jsx("div", {
+        className: "text-3xl font-semibold leading-none text-foreground",
+        children: value
+      }), suffix && /*#__PURE__*/_jsx("div", {
+        className: "text-sm text-muted-foreground",
+        children: suffix
+      }), trend && /*#__PURE__*/_jsx("div", {
+        className: "text-sm text-muted-foreground",
+        children: trend
+      })]
+    }), description && /*#__PURE__*/_jsx("div", {
+      className: "text-sm text-muted-foreground",
+      children: description
+    })]
+  });
+};
+export var StatisticCard = function StatisticCard(_ref4) {
+  var statistic = _ref4.statistic,
+    children = _ref4.children,
+    props = _objectWithoutProperties(_ref4, _excluded2);
+  return /*#__PURE__*/_jsx(ProCard, _objectSpread(_objectSpread({}, props), {}, {
+    children: statistic ? /*#__PURE__*/_jsx(Statistic, _objectSpread({}, statistic)) : children
+  }));
+};
+var CheckCardBase = function CheckCardBase(_ref5) {
+  var value = _ref5.value,
+    title = _ref5.title,
+    description = _ref5.description,
+    avatar = _ref5.avatar,
+    cover = _ref5.cover,
+    extra = _ref5.extra,
+    _ref5$checked = _ref5.checked,
+    checked = _ref5$checked === void 0 ? false : _ref5$checked,
+    _ref5$disabled = _ref5.disabled,
+    disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
+    onChange = _ref5.onChange,
+    _onClick = _ref5.onClick,
+    children = _ref5.children,
+    className = _ref5.className;
+  return /*#__PURE__*/_jsx("div", {
+    "data-check-card-value": value == null ? undefined : String(value),
+    className: cn('rounded-2xl border bg-card p-4 transition-colors', checked ? 'bg-primary/5 border-primary' : 'border-border', disabled ? 'cursor-not-allowed opacity-50' : 'hover:border-primary/40 cursor-pointer', className),
+    onClick: function onClick() {
+      if (disabled) {
+        return;
+      }
+      onChange === null || onChange === void 0 || onChange(!checked);
+      _onClick === null || _onClick === void 0 || _onClick();
+    },
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "flex items-start justify-between gap-3",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "flex min-w-0 items-start gap-3",
+        children: [avatar ? /*#__PURE__*/_jsx("div", {
+          className: "shrink-0",
+          children: avatar
+        }) : /*#__PURE__*/_jsx(Avatar, {
+          text: typeof title === 'string' ? title : 'P',
+          size: "middle"
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "min-w-0",
+          children: [cover ? /*#__PURE__*/_jsx("div", {
+            className: "mb-3",
+            children: cover
+          }) : null, title && /*#__PURE__*/_jsx("div", {
+            className: "font-medium text-foreground",
+            children: title
+          }), description && /*#__PURE__*/_jsx("div", {
+            className: "mt-1 text-sm text-muted-foreground",
+            children: description
+          }), children && /*#__PURE__*/_jsx("div", {
+            className: "mt-3",
+            children: children
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [extra, /*#__PURE__*/_jsx("span", {
+          className: cn('inline-flex h-6 w-6 items-center justify-center rounded-full border', checked ? 'border-primary bg-primary text-primary-foreground' : 'border-border bg-background text-transparent'),
+          children: /*#__PURE__*/_jsx(Check, {
+            className: "h-3.5 w-3.5"
+          })
+        })]
+      })]
+    })
+  });
+};
+export var CheckCardGroup = function CheckCardGroup(_ref6) {
+  var value = _ref6.value,
+    defaultValue = _ref6.defaultValue,
+    _ref6$multiple = _ref6.multiple,
+    multiple = _ref6$multiple === void 0 ? false : _ref6$multiple,
+    _ref6$disabled = _ref6.disabled,
+    disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
+    _ref6$loading = _ref6.loading,
+    loading = _ref6$loading === void 0 ? false : _ref6$loading,
+    _ref6$bordered = _ref6.bordered,
+    bordered = _ref6$bordered === void 0 ? true : _ref6$bordered,
+    options = _ref6.options,
+    onChange = _ref6.onChange,
+    children = _ref6.children,
+    className = _ref6.className;
+  var _useState5 = useState(defaultValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    innerValue = _useState6[0],
+    setInnerValue = _useState6[1];
+  var mergedValue = value !== null && value !== void 0 ? value : innerValue;
+  var selectedValues = toValueArray(mergedValue, multiple);
+  var updateValue = function updateValue(nextValue) {
+    var nextSelectedValues = multiple ? selectedValues.includes(nextValue) ? selectedValues.filter(function (item) {
+      return item !== nextValue;
+    }) : [].concat(_toConsumableArray(selectedValues), [nextValue]) : selectedValues[0] === nextValue ? undefined : nextValue;
+    if (value === undefined) {
+      setInnerValue(nextSelectedValues);
+    }
+    onChange === null || onChange === void 0 || onChange(nextSelectedValues);
+  };
+  var optionNodes = options === null || options === void 0 ? void 0 : options.map(function (option) {
+    return /*#__PURE__*/_jsx(CheckCardBase, _objectSpread(_objectSpread({}, option), {}, {
+      disabled: disabled || option.disabled,
+      className: cn(!bordered && 'border-transparent bg-transparent'),
+      checked: selectedValues.includes(option.value),
+      onChange: function onChange() {
+        if (disabled || option.disabled) {
+          return;
+        }
+        updateValue(option.value);
+      }
+    }), String(option.value));
+  });
+  var childNodes = React.Children.map(children, function (child) {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+    var childValue = child.props.value;
+    if (childValue == null) {
+      return child;
+    }
+    return /*#__PURE__*/React.cloneElement(child, {
+      disabled: disabled || child.props.disabled,
+      className: cn(child.props.className, !bordered && 'border-transparent bg-transparent'),
+      checked: selectedValues.includes(childValue),
+      onChange: function onChange() {
+        if (disabled || child.props.disabled) {
+          return;
+        }
+        updateValue(childValue);
+      }
+    });
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: cn('grid gap-3 sm:grid-cols-2', className),
+    children: loading ? Array.from({
+      length: Math.max((options === null || options === void 0 ? void 0 : options.length) || React.Children.count(children), 1)
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsx("div", {
+        "data-check-card-loading": true,
+        children: /*#__PURE__*/_jsx(CheckCardBase, {
+          className: cn(!bordered && 'border-transparent bg-transparent'),
+          checked: false,
+          disabled: true
+        })
+      }, index);
+    }) : optionNodes && optionNodes.length ? optionNodes : childNodes
+  });
+};
+export var CheckCard = attachPropertiesToComponent(CheckCardBase, {
+  Group: CheckCardGroup
+});
+attachPropertiesToComponent(ProCard, {
+  CheckCard: CheckCard,
+  CheckCardGroup: CheckCardGroup,
+  Statistic: Statistic,
+  StatisticCard: StatisticCard
+});
+export default ProCard;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type TooltipProps } from '@hanwenbo/x-web-ui/tooltip';
+import type { ActionType, ProColumnType, RequestData } from '../../types';
+export declare type FieldRender<RecordType = Record<string, any>> = (text: any, record: RecordType, index: number) => React.ReactNode;
+export declare type DescriptionsItemProps<RecordType = Record<string, any>> = ProColumnType<RecordType>;
+export declare type ProDescriptionsItemProps<RecordType = Record<string, any>> = ProColumnType<RecordType>;
+export declare type ProDescriptionsActionType = ActionType;
+export interface ProDescriptionsProps<RecordType = Record<string, any>> {
+    title?: React.ReactNode;
+    tooltip?: React.ReactNode | (TooltipProps & {
+        title?: React.ReactNode;
+    });
+    extra?: React.ReactNode;
+    columns?: ProColumnType<RecordType>[];
+    dataSource?: RecordType;
+    onDataSourceChange?: (dataSource: RecordType | undefined) => void;
+    actionRef?: React.MutableRefObject<ActionType | undefined>;
+    params?: Record<string, any>;
+    request?: (params?: Record<string, any>) => Promise<RequestData<RecordType> | RecordType>;
+    loading?: boolean;
+    column?: number;
+    emptyText?: React.ReactNode;
+    className?: string;
+    editable?: {
+        editableKeys?: React.Key[];
+        onChange?: (editableKeys: React.Key[]) => void;
+        onSave?: (key: React.Key, entity: RecordType) => Promise<void> | void;
+    };
+}
+export declare const ProDescriptions: <RecordType extends Record<string, any> = Record<string, any>>({ title, tooltip, extra, columns, dataSource, onDataSourceChange, actionRef, params, request, loading: controlledLoading, column, emptyText, className, editable }: ProDescriptionsProps<RecordType>) => React.JSX.Element;
+export default ProDescriptions;