@sheinx/base 3.0.0-alpha.1 → 3.0.0-alpha.3

package/cjs/card/card.js

@@ -0,0 +1,120 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.split.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _hooks = require("@sheinx/hooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _card = require("./card.context");
+var _cardAccordionContext = require("./card-accordion-context");
+var _formFooterContext = require("../form/form-footer-context");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var Card = function Card(props) {
+  var _props$jssStyle, _props$jssStyle$card, _props$id;
+  var _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style;
+  var cardClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : (_props$jssStyle$card = _props$jssStyle.card) === null || _props$jssStyle$card === void 0 ? void 0 : _props$jssStyle$card.call(_props$jssStyle);
+  var panelRef = (0, _react.useRef)(null);
+  var _useRef = (0, _react.useRef)({
+      id: undefined
+    }),
+    context = _useRef.current;
+  var _useState = (0, _react.useState)(props.defaultCollapsed),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    collpased = _useState2[0],
+    setCollpased = _useState2[1];
+  var moveInfo = (0, _hooks.useDragMove)();
+  var resizeInfo = (0, _hooks.useDragResize)({
+    defaultWidth: style === null || style === void 0 ? void 0 : style.width,
+    defaultHeight: style === null || style === void 0 ? void 0 : style.height,
+    panelRef: panelRef
+  });
+  var _useContext = (0, _react.useContext)(_cardAccordionContext.CardAccordionContext),
+    inAccordion = _useContext.inAccordion,
+    activeId = _useContext.activeId,
+    getDefaultId = _useContext.getDefaultId,
+    onActiveChange = _useContext.onActiveChange;
+  if (context.id === undefined) {
+    context.id = getDefaultId();
+  }
+  var id = (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : context.id;
+  var collapsible = props.collapsible || inAccordion;
+  var getCollpased = function getCollpased() {
+    if (inAccordion) return activeId !== id;
+    if (!collapsible) return false;
+    if (props.collapsed !== undefined) return !!props.collapsed;
+    return collpased;
+  };
+  var handleCollpased = (0, _hooks.usePersistFn)(function () {
+    var _props$onCollapse;
+    if (inAccordion) {
+      onActiveChange(id);
+      return;
+    }
+    if (!collapsible) return;
+    (_props$onCollapse = props.onCollapse) === null || _props$onCollapse === void 0 ? void 0 : _props$onCollapse.call(props, !props.collapsed);
+    setCollpased(!collpased);
+  });
+  var realCollpased = getCollpased();
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      collapsed: realCollpased,
+      collapsible: collapsible,
+      onCollapse: handleCollpased,
+      handleDragMouseDown: moveInfo.handleMouseDown
+    };
+  }, [realCollpased, collapsible]);
+  var alwaysShowShadow = props.shadow && props.shadow !== 'hover';
+  var renderResize = function renderResize() {
+    if (!props.resizable) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.resizeX,
+        onMouseDown: resizeInfo.handleXMouseDown
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.resizeY,
+        onMouseDown: resizeInfo.handleYMouseDown
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.resizeXY,
+        onMouseDown: resizeInfo.handleXYMouseDown
+      })]
+    });
+  };
+  var wrapStyle = _objectSpread({}, props.style);
+  if (props.resizable) {
+    wrapStyle.width = resizeInfo.width;
+    wrapStyle.height = resizeInfo.height;
+  }
+  if (props.moveable) {
+    wrapStyle.transform = "translate(".concat(moveInfo.pos.x, "px, ").concat(moveInfo.pos.y, "px)");
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(props.className, cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapper, props.shadow === 'hover' && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperHover), alwaysShowShadow && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperShadow), collapsible && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperCollapsible), realCollpased && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperCollapsed), props.resizable && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperResizable), props.moveable && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperMoveable), props.split && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperSplit), inAccordion && (cardClasses === null || cardClasses === void 0 ? void 0 : cardClasses.wrapperInAccordion)),
+    ref: panelRef,
+    style: wrapStyle,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_card.CardContext.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_formFooterContext.FormFooterProvider, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cardAccordionContext.CardAccordionContext.Provider, {
+          value: _cardAccordionContext.defualtCardAccordionContextValue,
+          children: props.children
+        })
+      })
+    }), renderResize()]
+  });
+};
+var _default = Card;
+exports.default = _default;

package/cjs/card/card.type.d.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { CommonType } from '../common/type';
+export interface CardClasses {
+    wrapper: string;
+    wrapperShadow: string;
+    wrapperHover: string;
+    wrapperSplit: string;
+    wrapperCollapsible: string;
+    wrapperResizable: string;
+    wrapperMoveable: string;
+    wrapperCollapsed: string;
+    wrapperInAccordion: string;
+    accordion: string;
+    header: string;
+    headerContent: string;
+    headerExtra: string;
+    indicator: string;
+    indicatorIcon: string;
+    body: string;
+    bodyCollapse: string;
+    footer: string;
+    resizeX: string;
+    resizeY: string;
+    resizeXY: string;
+    center: string;
+    right: string;
+}
+export interface CardJssStyle {
+    card?: () => CardClasses;
+}
+export interface CardProps extends Pick<CommonType, 'className' | 'style'> {
+    jssStyle?: CardJssStyle;
+    /**
+     * @en Whether can be collapsed，'bottom' can collaps on bottom
+     * @cn 是否可折叠，'bottom' 表示从下方点击折叠
+     * @default false
+     */
+    collapsible?: boolean | 'bottom';
+    /**le
+     * @en Whether to be collapsed.
+     * @cn 是否折叠，用于受控状态
+     */
+    collapsed?: boolean;
+    /**
+     * @en Initial collapsed state
+     * @cn 初始折叠状态（仅在 collapsible 为 true 时有效）
+     * @default true
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * @en Callback when collapsed state changed
+     * @cn 折叠状态改变时回调事件
+     */
+    onCollapse?: (collapsed: boolean) => void;
+    /**
+     * @en Whether to show the shadow.'hover' - Display it when the mouse is over the element.true - Always show, false - Never show
+     * @cn 是否显示阴影\n 'hover' - 鼠标移到元素上显示;\n true - 总是显示;\n false - 从不显示
+     * @default false
+     */
+    shadow?: boolean | 'hover';
+    /**
+     * @en Card.Accordion expand controlled key
+     * @cn 手风琴下控制展开的值
+     */
+    id?: any;
+    /**
+     * @en children
+     * @cn 子元素
+     */
+    children?: React.ReactNode;
+    /**
+     * @en get Card dom
+     * @cn 获取 Card dom
+     */
+    forwardedRef?: (el: HTMLDivElement) => void;
+    /**
+     * @en Is it possible to drag the size
+     * @cn 是否可以拖动大小
+     * @default false
+     */
+    resizable?: boolean | 'x' | 'y' | 'xy';
+    /**
+     * @en Is it possible to drag and drop to move
+     * @cn 是否可以拖拽移动
+     * @default false
+     */
+    moveable?: boolean;
+    /**
+     * @en Whether to split the header and body
+     * @cn 是否分割头部和主体
+     * @default false
+     */
+    split?: boolean;
+}
+//# sourceMappingURL=card.type.d.ts.map

package/cjs/card/card.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.type.d.ts","sourceRoot":"","sources":["card.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,MAAM,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IACxE,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAE1C;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAE3B;;;OAGG;IACH,EAAE,CAAC,EAAE,GAAG,CAAC;IAET;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/cjs/card/card.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/card/index.d.ts

@@ -0,0 +1,12 @@
+export { default, default as Card } from './card';
+export type { CardProps } from './card.type';
+export { default as CardHeader } from './card-header';
+export type { CardHeaderProps } from './card-header.type';
+export { default as CardBody } from './card-body';
+export type { CardBodyProps } from './card-body.type';
+export { default as CardFooter } from './card-footer';
+export type { CardFooterProps } from './card-footer.type';
+export { default as CardAccordion } from './card-accordion';
+export type { CardAccordionProps } from './card-accordion.type';
+export { default as CardSubmit } from '../modal/modal-submit';
+//# sourceMappingURL=index.d.ts.map

package/cjs/card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAClD,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC"}

package/cjs/card/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function get() {
+    return _card.default;
+  }
+});
+Object.defineProperty(exports, "CardAccordion", {
+  enumerable: true,
+  get: function get() {
+    return _cardAccordion.default;
+  }
+});
+Object.defineProperty(exports, "CardBody", {
+  enumerable: true,
+  get: function get() {
+    return _cardBody.default;
+  }
+});
+Object.defineProperty(exports, "CardFooter", {
+  enumerable: true,
+  get: function get() {
+    return _cardFooter.default;
+  }
+});
+Object.defineProperty(exports, "CardHeader", {
+  enumerable: true,
+  get: function get() {
+    return _cardHeader.default;
+  }
+});
+Object.defineProperty(exports, "CardSubmit", {
+  enumerable: true,
+  get: function get() {
+    return _modalSubmit.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _card.default;
+  }
+});
+var _card = _interopRequireDefault(require("./card"));
+var _cardHeader = _interopRequireDefault(require("./card-header"));
+var _cardBody = _interopRequireDefault(require("./card-body"));
+var _cardFooter = _interopRequireDefault(require("./card-footer"));
+var _cardAccordion = _interopRequireDefault(require("./card-accordion"));
+var _modalSubmit = _interopRequireDefault(require("../modal/modal-submit"));

package/cjs/card-group/__doc__/feiqi.text

@@ -0,0 +1,16 @@
+---
+name: CardGroup
+group: Other
+---
+
+# Title
+
+CardGroup 标题
+CardGroup
+
+# Describe
+
+CardGroup 描述
+CardGroup Describe
+
+# Example

package/cjs/card-group/__example__/01-base.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=01-base.d.ts.map

package/cjs/card-group/__example__/01-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-base.d.ts","sourceRoot":"","sources":["01-base.tsx"],"names":[],"mappings":";;AAcA,wBAME"}

package/cjs/card-group/__example__/01-base.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 基本用法
+ *    --
+ * en - Basic
+ *    --
+ */
+
+var jssStyle = {
+  cardGroup: _shineoutStyle.useCardGroupStyle
+};
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.CardGroup, {
+      jssStyle: jssStyle
+    })
+  });
+};
+exports.default = _default;

package/cjs/card-group/card-group-context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface CardGroupContextValue {
+    container: HTMLElement | null;
+}
+export declare const CardGroupContext: import("react").Context<CardGroupContextValue>;
+//# sourceMappingURL=card-group-context.d.ts.map

package/cjs/card-group/card-group-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-group-context.d.ts","sourceRoot":"","sources":["card-group-context.ts"],"names":[],"mappings":";AAEA,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,WAAW,GAAG,IAAI,CAAC;CAC/B;AACD,eAAO,MAAM,gBAAgB,gDAA4D,CAAC"}

package/cjs/card-group/card-group-context.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardGroupContext = void 0;
+var _react = require("react");
+var CardGroupContext = /*#__PURE__*/(0, _react.createContext)({
+  container: null
+});
+exports.CardGroupContext = CardGroupContext;

package/cjs/card-group/card-group.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CardGroupProps } from './card-group.type';
+declare const CardGroup: (props: CardGroupProps) => JSX.Element;
+export default CardGroup;
+//# sourceMappingURL=card-group.d.ts.map

package/cjs/card-group/card-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-group.d.ts","sourceRoot":"","sources":["card-group.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,QAAA,MAAM,SAAS,UAAW,cAAc,gBA6DvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/cjs/card-group/card-group.js

@@ -0,0 +1,78 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _hooks = require("@sheinx/hooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _cardGroupContext = require("./card-group-context");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var CardGroup = function CardGroup(props) {
+  var _props$jssStyle, _props$jssStyle$cardG;
+  // @ts-ignore gap 属性以被重命名了
+  var _props$columns = props.columns,
+    columns = _props$columns === void 0 ? 3 : _props$columns,
+    _props$gap = props.gap,
+    gap = _props$gap === void 0 ? 16 : _props$gap;
+  var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : (_props$jssStyle$cardG = _props$jssStyle.cardGroup) === null || _props$jssStyle$cardG === void 0 ? void 0 : _props$jssStyle$cardG.call(_props$jssStyle);
+  var render = (0, _hooks.useRender)();
+  var _useRef = (0, _react.useRef)({
+      scrollEl: null
+    }),
+    context = _useRef.current;
+  var getGap = function getGap() {
+    if (props.gutter !== undefined) return props.gutter;
+    return gap;
+  };
+  var handleScrollRef = (0, _hooks.usePersistFn)(function (el) {
+    if (!el) return;
+    if (context.scrollEl === el) return;
+    context.scrollEl = el;
+    render();
+  });
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      container: context.scrollEl
+    };
+  }, [context.scrollEl]);
+  var renderBody = function renderBody() {
+    if (!props.children) return null;
+    var gap = getGap();
+    var gridStyle = _objectSpread(_objectSpread({
+      gridRowGap: gap,
+      gridColumnGap: gap
+    }, props.gridStyle), {}, {
+      gridTemplateColumns: props.cardWidth !== undefined ? "repeat(auto-fill, minmax(".concat(props.cardWidth, "px, 1fr))") : "repeat(".concat(columns, ", 1fr)")
+    });
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cardGroupContext.CardGroupContext.Provider, {
+      value: contextValue,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: classes === null || classes === void 0 ? void 0 : classes.scroller,
+        ref: handleScrollRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: gridStyle,
+          className: classes === null || classes === void 0 ? void 0 : classes.grid,
+          children: context.scrollEl && props.children
+        })
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(props.className, classes === null || classes === void 0 ? void 0 : classes.wrapper),
+    style: _objectSpread({
+      height: props.height
+    }, props.style),
+    children: renderBody()
+  });
+};
+var _default = CardGroup;
+exports.default = _default;

package/cjs/card-group/card-group.type.d.ts

@@ -0,0 +1,49 @@
+import { CheckboxStyle } from '../checkbox/checkbox.type';
+import { CommonType } from '../common/type';
+import { ReactNode } from 'react';
+export interface CardGroupClasses {
+    wrapper: string;
+    item: string;
+    checkbox: string;
+    scroller: string;
+    grid: string;
+}
+export interface CardGroupJssStyle extends CheckboxStyle {
+    cardGroup?: () => CardGroupClasses;
+}
+export interface CardGroupProps extends Pick<CommonType, 'className' | 'style'> {
+    jssStyle?: CardGroupJssStyle;
+    /**
+     * @en group height
+     * @cn 卡片组高度
+     */
+    height?: number;
+    /**
+     * @en card min width
+     * @cn 卡片最小宽度
+     */
+    cardWidth?: number;
+    /**
+     * @en items count each row, not work while cardWidth setted
+     * @cn 列数，设置 cardWidth 后该属性将失效
+     * @default 3
+     */
+    columns?: number;
+    /**
+     * @en grid style
+     * @cn 卡片网格样式
+     */
+    gridStyle?: React.CSSProperties;
+    /**
+     * @en gutter width horizontal and vertical, if diff shoud set gridStyle
+     * @cn 卡片横向纵向间距，如果两个间距相互独立可以通过 gridStyle 调整
+     * @default 16
+     */
+    gutter?: number;
+    /**
+     * @en children
+     * @cn 子元素
+     */
+    children?: ReactNode;
+}
+//# sourceMappingURL=card-group.type.d.ts.map

package/cjs/card-group/card-group.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-group.type.d.ts","sourceRoot":"","sources":["card-group.type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAkB,SAAQ,aAAa;IACtD,SAAS,CAAC,EAAE,MAAM,gBAAgB,CAAC;CACpC;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC7E,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAEhC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB"}

package/cjs/card-group/card-group.type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/card-group/index.d.ts

@@ -0,0 +1,5 @@
+export { default, default as CardGroup } from './card-group';
+export type { CardGroupProps } from './card-group.type';
+export { default as CardGroupItem } from './item';
+export type { CardGroupItemProps } from './item.type';
+//# sourceMappingURL=index.d.ts.map

package/cjs/card-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,QAAQ,CAAC;AAClD,YAAY,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC"}

package/cjs/card-group/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CardGroup", {
+  enumerable: true,
+  get: function get() {
+    return _cardGroup.default;
+  }
+});
+Object.defineProperty(exports, "CardGroupItem", {
+  enumerable: true,
+  get: function get() {
+    return _item.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _cardGroup.default;
+  }
+});
+var _cardGroup = _interopRequireDefault(require("./card-group"));
+var _item = _interopRequireDefault(require("./item"));

package/cjs/card-group/item.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CardGroupItemProps } from './item.type';
+declare const Item: <V>(props: CardGroupItemProps<V>) => JSX.Element;
+export default Item;
+//# sourceMappingURL=item.d.ts.map

package/cjs/card-group/item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["item.tsx"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,QAAA,MAAM,IAAI,kDAyCT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/cjs/card-group/item.js

@@ -0,0 +1,56 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@sheinx/hooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _cardGroupContext = require("./card-group-context");
+var _lazyload = _interopRequireDefault(require("./lazyload"));
+var _checkbox = _interopRequireDefault(require("../checkbox/checkbox"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var Item = function Item(props) {
+  var _props$jssStyle, _props$jssStyle$cardG;
+  var _useContext = (0, _react.useContext)(_cardGroupContext.CardGroupContext),
+    container = _useContext.container;
+  var classes = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : (_props$jssStyle$cardG = _props$jssStyle.cardGroup) === null || _props$jssStyle$cardG === void 0 ? void 0 : _props$jssStyle$cardG.call(_props$jssStyle);
+  var handleChange = (0, _hooks.usePersistFn)(function (_, checked) {
+    if (props.onChange) props.onChange(checked, props.value);
+  });
+  var renderChildren = function renderChildren(content) {
+    if (!props.placeholder) return content;
+    if (!container) return content;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lazyload.default, {
+      container: container,
+      placeholder: props.placeholder,
+      children: content
+    });
+  };
+  var cls = (0, _classnames.default)(props.className, classes === null || classes === void 0 ? void 0 : classes.item);
+  var showCheck = props.checked !== undefined;
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [props.children, !!showCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.default, {
+      jssStyle: props.jssStyle,
+      checked: props.checked,
+      disabled: props.disabled,
+      onChange: handleChange,
+      className: classes === null || classes === void 0 ? void 0 : classes.checkbox
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    style: props.style,
+    children: renderChildren(content)
+  });
+};
+var _default = Item;
+exports.default = _default;