rsuite 5.74.2 → 5.75.0

package/Stat/styles/index.less

@@ -0,0 +1,106 @@
+@import '../../styles/common.less';
+@import '../../IconButton/styles/index.less';
+@import '../../Tooltip/styles/index.less';
+
+.rs-stat {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+
+  &-icon {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+  }
+
+  &-body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 100%;
+    margin: 0;
+  }
+
+  &-bordered {
+    border: 1px solid var(--rs-border-primary);
+    background-color: var(--rs-stat-body-bg);
+    border-radius: 6px;
+    padding: 16px;
+  }
+
+  &-label {
+    font-weight: 100;
+    display: inline-flex;
+    align-items: center;
+    color: var(--rs-text-secondary);
+    gap: 6px;
+
+    &-uppercase {
+      text-transform: uppercase;
+    }
+  }
+
+  &-value {
+    display: flex;
+    gap: 4px;
+    align-items: baseline;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1;
+    margin: 0;
+  }
+
+  &-value-unit {
+    font-size: 12px;
+    font-weight: 400;
+  }
+
+  &-trend {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    border-radius: 4px;
+    font-weight: 600;
+    font-size: 12px;
+    line-height: 1;
+
+    &-up {
+      color: var(--rs-green-900);
+    }
+
+    &-down {
+      color: var(--rs-red-900);
+    }
+
+    &-default {
+      padding: 2px 6px;
+    }
+
+    &-default&-up {
+      background-color: var(--rs-green-100);
+    }
+
+    &-default&-down {
+      background-color: var(--rs-red-100);
+    }
+
+    &-subtle&-up {
+      color: var(--rs-green-600);
+    }
+
+    &-subtle&-down {
+      color: var(--rs-red-600);
+    }
+  }
+
+  &-help-text {
+    color: var(--rs-text-secondary);
+  }
+
+  .rs-progress-line {
+    padding: 0;
+  }
+}

package/StatGroup/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/StatGroup",
+  "private": true,
+  "main": "../cjs/StatGroup/index.js",
+  "module": "../esm/StatGroup/index.js",
+  "types": "../esm/StatGroup/index.d.ts"
+}

package/StatGroup/styles/index.css

@@ -0,0 +1,7 @@
+.rs-stat-group {
+  --rs-columns: 4;
+  --rs-spacing: 6px;
+  display: grid;
+  grid-template-columns: repeat(var(--rs-columns), 1fr);
+  grid-gap: var(--rs-spacing);
+}

package/StatGroup/styles/index.less

@@ -0,0 +1,8 @@
+.rs-stat-group {
+  --rs-columns: 4;
+  --rs-spacing: 6px;
+
+  display: grid;
+  grid-template-columns: repeat(var(--rs-columns), 1fr);
+  grid-gap: var(--rs-spacing);
+}

package/StatHelpText/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/StatHelpText",
+  "private": true,
+  "main": "../cjs/Stat/StatHelpText.js",
+  "module": "../esm/Stat/StatHelpText.js",
+  "types": "../esm/Stat/StatHelpText.d.ts"
+}

package/StatLabel/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/StatLabel",
+  "private": true,
+  "main": "../cjs/Stat/StatLabel.js",
+  "module": "../esm/Stat/StatLabel.js",
+  "types": "../esm/Stat/StatLabel.d.ts"
+}

package/StatTrend/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/StatTrend",
+  "private": true,
+  "main": "../cjs/Stat/StatTrend.js",
+  "module": "../esm/Stat/StatTrend.js",
+  "types": "../esm/Stat/StatTrend.d.ts"
+}

package/StatValue/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/StatValue",
+  "private": true,
+  "main": "../cjs/Stat/StatValue.js",
+  "module": "../esm/Stat/StatValue.js",
+  "types": "../esm/Stat/StatValue.d.ts"
+}

package/StatValueUnit/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/StatValueUnit",
+  "private": true,
+  "main": "../cjs/Stat/StatValueUnit.js",
+  "module": "../esm/Stat/StatValueUnit.js",
+  "types": "../esm/Stat/StatValueUnit.d.ts"
+}

package/cjs/Affix/Affix.js

@@ -31,7 +31,7 @@ function useOffset(mountRef, onOffsetChange) {
     if ((newOffset === null || newOffset === void 0 ? void 0 : newOffset.height) !== (offset === null || offset === void 0 ? void 0 : offset.height) || (newOffset === null || newOffset === void 0 ? void 0 : newOffset.width) !== (offset === null || offset === void 0 ? void 0 : offset.width) || (newOffset === null || newOffset === void 0 ? void 0 : newOffset.top) !== (offset === null || offset === void 0 ? void 0 : offset.top) || (newOffset === null || newOffset === void 0 ? void 0 : newOffset.left) !== (offset === null || offset === void 0 ? void 0 : offset.left)) {
       setOffset(newOffset);
       if (offset !== null && newOffset !== null) {
-        onOffsetChange === null || onOffsetChange === void 0 ? void 0 : onOffsetChange(newOffset);
+        onOffsetChange === null || onOffsetChange === void 0 || onOffsetChange(newOffset);
       }
     }
   }, [mountRef, offset, onOffsetChange]);
@@ -95,7 +95,7 @@ function useFixed(offset, containerOffset, props) {
     }
     if (nextFixed !== fixed) {
       setFixed(nextFixed);
-      onChange === null || onChange === void 0 ? void 0 : onChange(nextFixed);
+      onChange === null || onChange === void 0 || onChange(nextFixed);
     }
   }, [offset, top, containerOffset, fixed, onChange]);
 

package/cjs/Animation/Transition.js

@@ -121,7 +121,7 @@ var Transition = /*#__PURE__*/function (_React$Component) {
   _proto.onTransitionEnd = function onTransitionEnd(node, handler) {
     var _this$animationEventL;
     this.setNextCallback(handler);
-    (_this$animationEventL = this.animationEventListener) === null || _this$animationEventL === void 0 ? void 0 : _this$animationEventL.off();
+    (_this$animationEventL = this.animationEventListener) === null || _this$animationEventL === void 0 || _this$animationEventL.off();
     if (!this.nextCallback) {
       return;
     }
@@ -178,16 +178,16 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     this.cancelNextCallback();
     var node = this.getChildElement();
     this.instanceElement = node;
-    onEnter === null || onEnter === void 0 ? void 0 : onEnter(node);
+    onEnter === null || onEnter === void 0 || onEnter(node);
     this.safeSetState({
       status: STATUS.ENTERING
     }, function () {
-      onEntering === null || onEntering === void 0 ? void 0 : onEntering(node);
+      onEntering === null || onEntering === void 0 || onEntering(node);
       _this3.onTransitionEnd(node, function () {
         _this3.safeSetState({
           status: STATUS.ENTERED
         }, function () {
-          onEntered === null || onEntered === void 0 ? void 0 : onEntered(node);
+          onEntered === null || onEntered === void 0 || onEntered(node);
         });
       });
     });
@@ -201,16 +201,16 @@ var Transition = /*#__PURE__*/function (_React$Component) {
     this.cancelNextCallback();
     var node = this.getChildElement();
     this.instanceElement = node;
-    onExit === null || onExit === void 0 ? void 0 : onExit(node);
+    onExit === null || onExit === void 0 || onExit(node);
     this.safeSetState({
       status: STATUS.EXITING
     }, function () {
-      onExiting === null || onExiting === void 0 ? void 0 : onExiting(node);
+      onExiting === null || onExiting === void 0 || onExiting(node);
       _this4.onTransitionEnd(node, function () {
         _this4.safeSetState({
           status: STATUS.EXITED
         }, function () {
-          onExited === null || onExited === void 0 ? void 0 : onExited(node);
+          onExited === null || onExited === void 0 || onExited(node);
         });
       });
     });

package/cjs/AutoComplete/AutoComplete.js

@@ -104,7 +104,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       esc: handleClose
     });
     handleKeyDown(event);
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
   };
   var selectFocusMenuItem = function selectFocusMenuItem(event) {
     if (!focusItemValue) {
@@ -122,10 +122,10 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     handleClose();
   };
   var handleSelect = (0, _hooks.useEventCallback)(function (item, event) {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, item, event);
+    onSelect === null || onSelect === void 0 || onSelect(item.value, item, event);
   });
   var handleChangeValue = (0, _hooks.useEventCallback)(function (value, event) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+    onChange === null || onChange === void 0 || onChange(value, event);
   });
   var handleChange = function handleChange(value, event) {
     setFocusItemValue('');
@@ -136,12 +136,12 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var handleClose = (0, _hooks.useEventCallback)(function () {
     if (isMounted()) {
       setFocus(false);
-      onClose === null || onClose === void 0 ? void 0 : onClose();
+      onClose === null || onClose === void 0 || onClose();
     }
   });
   var handleOpen = (0, _hooks.useEventCallback)(function () {
     setFocus(true);
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+    onOpen === null || onOpen === void 0 || onOpen();
   });
   var handleItemSelect = (0, _hooks.useEventCallback)(function (nextItemValue, item, event) {
     setValue(nextItemValue);
@@ -153,12 +153,12 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     handleClose();
   });
   var handleInputFocus = (0, _hooks.useEventCallback)(function (event) {
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    onFocus === null || onFocus === void 0 || onFocus(event);
     handleOpen();
   });
   var handleInputBlur = (0, _hooks.useEventCallback)(function (event) {
     setTimeout(handleClose, 300);
-    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    onBlur === null || onBlur === void 0 || onBlur(event);
   });
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,

package/cjs/Avatar/useImage.js

@@ -39,7 +39,7 @@ var useImage = function useImage(props) {
   var handleError = (0, _react.useCallback)(function (event) {
     setStatus('error');
     flush();
-    onError === null || onError === void 0 ? void 0 : onError(event);
+    onError === null || onError === void 0 || onError(event);
   }, [onError]);
   (0, _react.useEffect)(function () {
     setStatus(src ? 'loading' : 'pending');

package/cjs/Breadcrumb/Breadcrumb.js

@@ -51,7 +51,7 @@ var Breadcrumb = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setShowEllipsis = _useState[1];
   var handleClickEllipsis = (0, _hooks.useEventCallback)(function (event) {
     setShowEllipsis(false);
-    onExpand === null || onExpand === void 0 ? void 0 : onExpand(event);
+    onExpand === null || onExpand === void 0 || onExpand(event);
   });
   var content = (0, _react.useMemo)(function () {
     var count = _utils.ReactChildren.count(children);

package/cjs/Calendar/Calendar.js

@@ -47,16 +47,16 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setCalendarDate = _useCalendarDate.setCalendarDate;
   var handleChange = (0, _hooks.useEventCallback)(function (nextValue) {
     setCalendarDate(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    onChange === null || onChange === void 0 || onChange(nextValue);
     if (!(0, _date.isSameMonth)(nextValue, calendarDate)) {
-      onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextValue);
+      onMonthChange === null || onMonthChange === void 0 || onMonthChange(nextValue);
     }
   });
   var handleClickToday = (0, _hooks.useEventCallback)(function () {
     handleChange(new Date());
   });
   var handleSelect = (0, _hooks.useEventCallback)(function (nextValue) {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
+    onSelect === null || onSelect === void 0 || onSelect(nextValue);
     handleChange(nextValue);
   });
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),

package/cjs/Calendar/CalendarContainer.js

@@ -105,7 +105,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
   var timeDropdownProps = (0, _pick.default)(rest, _date.calendarOnlyProps);
   var handleChangeMonth = (0, _hooks.useEventCallback)(function (date, event) {
     reset();
-    onChangeMonth === null || onChangeMonth === void 0 ? void 0 : onChangeMonth(date, event);
+    onChangeMonth === null || onChangeMonth === void 0 || onChangeMonth(date, event);
   });
   var contextValue = {
     date: calendarDate,

package/cjs/Calendar/Grid/GridRow.js

@@ -45,7 +45,7 @@ var GridRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (disabled) {
       return;
     }
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
+    onSelect === null || onSelect === void 0 || onSelect(date, event);
   }, [onSelect]);
   var renderDays = function renderDays() {
     var days = [];
@@ -86,7 +86,7 @@ var GridRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
           inRange = true;
         }
       }
-      days.push( /*#__PURE__*/_react.default.createElement(_GridCell.default, {
+      days.push(/*#__PURE__*/_react.default.createElement(_GridCell.default, {
         key: (0, _date.format)(thisDate, 'yyyy-MM-dd'),
         date: thisDate,
         disabled: disabled,
@@ -101,7 +101,7 @@ var GridRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return days;
   };
   var classes = merge(className, prefix('row'));
-  var _ref3 = (_locale$dateLocale$op = locale === null || locale === void 0 ? void 0 : (_locale$dateLocale = locale.dateLocale) === null || _locale$dateLocale === void 0 ? void 0 : _locale$dateLocale.options) !== null && _locale$dateLocale$op !== void 0 ? _locale$dateLocale$op : {},
+  var _ref3 = (_locale$dateLocale$op = locale === null || locale === void 0 || (_locale$dateLocale = locale.dateLocale) === null || _locale$dateLocale === void 0 ? void 0 : _locale$dateLocale.options) !== null && _locale$dateLocale$op !== void 0 ? _locale$dateLocale$op : {},
     firstWeekContainsDate = _ref3.firstWeekContainsDate,
     weekStartsOn = _ref3.weekStartsOn;
   var week = (0, _date.format)(weekendDate, isoWeek ? 'I' : 'w', {

package/cjs/Calendar/MonthDropdown/MonthDropdownItem.js

@@ -51,7 +51,7 @@ var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props,
     if (disabled) {
       return;
     }
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(currentMonth, event);
+    onSelect === null || onSelect === void 0 || onSelect(currentMonth, event);
   });
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,

package/cjs/Calendar/TimeDropdown/TimeDropdown.js

@@ -59,7 +59,7 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
         nextDate = (0, _date.setSeconds)(nextDate, d);
         break;
     }
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextDate, event);
+    onSelect === null || onSelect === void 0 || onSelect(nextDate, event);
   });
   var handleClickMeridiem = (0, _hooks.useEventCallback)(function (meridiem, event) {
     var tempDate = date || (0, _date.startOfToday)();
@@ -73,7 +73,7 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     };
     var nextHours = adjustHours(meridiem, hours);
     var nextDate = (0, _date.setHours)(tempDate, nextHours);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextDate, event);
+    onSelect === null || onSelect === void 0 || onSelect(nextDate, event);
   });
   var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     prefix = _useClassNames.prefix,
@@ -96,7 +96,7 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
           'cell-active': value === i,
           'cell-disabled': disabled
         });
-        items.push( /*#__PURE__*/_react.default.createElement("li", {
+        items.push(/*#__PURE__*/_react.default.createElement("li", {
           key: i,
           role: "option",
           tabIndex: -1,

package/cjs/Calendar/hooks/useCalendarState.js

@@ -19,19 +19,19 @@ var useCalendarState = exports.useCalendarState = function useCalendarState(prop
     setCalendarState(undefined);
     if (calendarState === CalendarState.TIME) {
       var _props$onToggleTimeDr;
-      (_props$onToggleTimeDr = props.onToggleTimeDropdown) === null || _props$onToggleTimeDr === void 0 ? void 0 : _props$onToggleTimeDr.call(props, false);
+      (_props$onToggleTimeDr = props.onToggleTimeDropdown) === null || _props$onToggleTimeDr === void 0 || _props$onToggleTimeDr.call(props, false);
     } else if (calendarState === CalendarState.MONTH) {
       var _props$onToggleMonthD;
-      (_props$onToggleMonthD = props.onToggleMonthDropdown) === null || _props$onToggleMonthD === void 0 ? void 0 : _props$onToggleMonthD.call(props, false);
+      (_props$onToggleMonthD = props.onToggleMonthDropdown) === null || _props$onToggleMonthD === void 0 || _props$onToggleMonthD.call(props, false);
     }
   });
   var onMoveForward = (0, _hooks.useEventCallback)(function () {
     var _props$onMoveForward;
-    (_props$onMoveForward = props.onMoveForward) === null || _props$onMoveForward === void 0 ? void 0 : _props$onMoveForward.call(props, (0, _date.addMonths)(props.calendarDate, 1));
+    (_props$onMoveForward = props.onMoveForward) === null || _props$onMoveForward === void 0 || _props$onMoveForward.call(props, (0, _date.addMonths)(props.calendarDate, 1));
   });
   var onMoveBackward = (0, _hooks.useEventCallback)(function () {
     var _props$onMoveBackward;
-    (_props$onMoveBackward = props.onMoveBackward) === null || _props$onMoveBackward === void 0 ? void 0 : _props$onMoveBackward.call(props, (0, _date.addMonths)(props.calendarDate, -1));
+    (_props$onMoveBackward = props.onMoveBackward) === null || _props$onMoveBackward === void 0 || _props$onMoveBackward.call(props, (0, _date.addMonths)(props.calendarDate, -1));
   });
   var onToggleTimeDropdown = (0, _hooks.useEventCallback)(function () {
     var _props$onToggleTimeDr2;
@@ -40,7 +40,7 @@ var useCalendarState = exports.useCalendarState = function useCalendarState(prop
     } else {
       setCalendarState(CalendarState.TIME);
     }
-    (_props$onToggleTimeDr2 = props.onToggleTimeDropdown) === null || _props$onToggleTimeDr2 === void 0 ? void 0 : _props$onToggleTimeDr2.call(props, calendarState !== CalendarState.TIME);
+    (_props$onToggleTimeDr2 = props.onToggleTimeDropdown) === null || _props$onToggleTimeDr2 === void 0 || _props$onToggleTimeDr2.call(props, calendarState !== CalendarState.TIME);
   });
   var onToggleMonthDropdown = (0, _hooks.useEventCallback)(function () {
     var _props$onToggleMonthD2;
@@ -49,7 +49,7 @@ var useCalendarState = exports.useCalendarState = function useCalendarState(prop
     } else {
       setCalendarState(CalendarState.MONTH);
     }
-    (_props$onToggleMonthD2 = props.onToggleMonthDropdown) === null || _props$onToggleMonthD2 === void 0 ? void 0 : _props$onToggleMonthD2.call(props, calendarState !== CalendarState.MONTH);
+    (_props$onToggleMonthD2 = props.onToggleMonthDropdown) === null || _props$onToggleMonthD2 === void 0 || _props$onToggleMonthD2.call(props, calendarState !== CalendarState.MONTH);
   });
   var handlers = (0, _react.useMemo)(function () {
     return {

package/cjs/Card/Card.d.ts

@@ -0,0 +1,33 @@
+import CardHeader from './CardHeader';
+import CardBody from './CardBody';
+import CardFooter from './CardFooter';
+import type { WithAsProps, RsRefForwardingComponent } from '../internals/types';
+export interface CardProps extends WithAsProps {
+    /**
+     * Show border
+     */
+    bordered?: boolean;
+    /**
+     * Whether there is a shadow
+     */
+    shaded?: boolean | 'hover';
+    /**
+     * The width of the card
+     */
+    width?: number | string;
+    /**
+     * The direction of the card
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Different sizes
+     */
+    size?: 'lg' | 'md' | 'sm';
+}
+interface CardComponent extends RsRefForwardingComponent<'div', CardProps> {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+}
+declare const Card: CardComponent;
+export default Card;

package/cjs/Card/Card.js

@@ -0,0 +1,63 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CardHeader = _interopRequireDefault(require("./CardHeader"));
+var _CardBody = _interopRequireDefault(require("./CardBody"));
+var _CardFooter = _interopRequireDefault(require("./CardFooter"));
+var _CustomProvider = require("../CustomProvider");
+var _hooks = require("../internals/hooks");
+var _propTypes2 = require("../internals/propTypes");
+var _excluded = ["as", "bordered", "classPrefix", "className", "children", "direction", "shaded", "style", "size", "width"];
+var Card = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _withClassPrefix;
+  var _useCustom = (0, _CustomProvider.useCustom)('Card', props),
+    propsWithDefaults = _useCustom.propsWithDefaults;
+  var _propsWithDefaults$as = propsWithDefaults.as,
+    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
+    _propsWithDefaults$bo = propsWithDefaults.bordered,
+    bordered = _propsWithDefaults$bo === void 0 ? true : _propsWithDefaults$bo,
+    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
+    classPrefix = _propsWithDefaults$cl === void 0 ? 'card' : _propsWithDefaults$cl,
+    className = propsWithDefaults.className,
+    children = propsWithDefaults.children,
+    direction = propsWithDefaults.direction,
+    shaded = propsWithDefaults.shaded,
+    style = propsWithDefaults.style,
+    size = propsWithDefaults.size,
+    width = propsWithDefaults.width,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(propsWithDefaults, _excluded);
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
+    merge = _useClassNames.merge,
+    withClassPrefix = _useClassNames.withClassPrefix;
+  var classes = merge(className, withClassPrefix(direction, size, (_withClassPrefix = {
+    bordered: bordered,
+    shaded: shaded === true
+  }, _withClassPrefix['shaded-hover'] = shaded === 'hover', _withClassPrefix)));
+  var styles = (0, _extends2.default)({}, style, {
+    '--rs-card-width': typeof width === 'number' ? width + "px" : width
+  });
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref,
+    className: classes,
+    style: styles
+  }, rest), children);
+});
+Card.displayName = 'Card';
+Card.Header = _CardHeader.default;
+Card.Body = _CardBody.default;
+Card.Footer = _CardFooter.default;
+Card.propTypes = {
+  bordered: _propTypes.default.bool,
+  shaded: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOf(['hover'])]),
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  direction: (0, _propTypes2.oneOf)(['row', 'column']),
+  size: (0, _propTypes2.oneOf)(['lg', 'md', 'sm'])
+};
+var _default = exports.default = Card;

package/cjs/Card/CardBody.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from '../internals/utils';
+export type CardBodyProps = ComponentProps;
+declare const CardBody: import("../internals/types").RsRefForwardingComponent<"div", ComponentProps>;
+export default CardBody;

package/cjs/Card/CardBody.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _utils = require("../internals/utils");
+var CardBody = (0, _utils.createComponent)({
+  name: 'CardBody',
+  componentAs: 'div'
+});
+var _default = exports.default = CardBody;

package/cjs/Card/CardFooter.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from '../internals/utils';
+export type CardFooterProps = ComponentProps;
+declare const CardFooter: import("../internals/types").RsRefForwardingComponent<"div", ComponentProps>;
+export default CardFooter;

package/cjs/Card/CardFooter.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _utils = require("../internals/utils");
+var CardFooter = (0, _utils.createComponent)({
+  name: 'CardFooter',
+  componentAs: 'div'
+});
+var _default = exports.default = CardFooter;

package/cjs/Card/CardHeader.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from '../internals/utils';
+export type CardHeaderProps = ComponentProps;
+declare const CardHeader: import("../internals/types").RsRefForwardingComponent<"div", ComponentProps>;
+export default CardHeader;

package/cjs/Card/CardHeader.js

@@ -0,0 +1,11 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _utils = require("../internals/utils");
+var CardHeader = (0, _utils.createComponent)({
+  name: 'CardHeader',
+  componentAs: 'div'
+});
+var _default = exports.default = CardHeader;

package/cjs/Card/index.d.ts

@@ -0,0 +1,6 @@
+import Card from './Card';
+export type { CardProps } from './Card';
+export type { CardBodyProps } from './CardBody';
+export type { CardHeaderProps } from './CardHeader';
+export type { CardFooterProps } from './CardFooter';
+export default Card;

package/cjs/Card/index.js

@@ -0,0 +1,8 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _Card = _interopRequireDefault(require("./Card"));
+var _default = exports.default = _Card.default;

package/cjs/CardGroup/CardGroup.d.ts

@@ -0,0 +1,13 @@
+import type { WithAsProps, RsRefForwardingComponent } from '../internals/types';
+export interface CardGroupProps extends WithAsProps {
+    /**
+     * The number of columns in the group
+     */
+    columns?: number;
+    /**
+     * Spacing between columns
+     */
+    spacing?: number | string;
+}
+declare const CardGroup: RsRefForwardingComponent<'div', CardGroupProps>;
+export default CardGroup;