@nextui-org/react 1.0.1-alpha.52 → 1.0.1-alpha.56

package/cjs/button/button.js

@@ -13,7 +13,7 @@ var _useWarning = _interopRequireDefault(require("../use-warning"));
 
 var _useTheme = _interopRequireDefault(require("../use-theme"));
 
-var _button = _interopRequireDefault(require("./button.drip"));
+var _drip = _interopRequireDefault(require("../utils/drip"));
 
 var _buttonLoading = _interopRequireDefault(require("./button-loading"));
 
@@ -29,6 +29,8 @@ var _dimensions = require("../utils/dimensions");
 
 var _assertion = require("../utils/assertion");
 
+var _useDrip = _interopRequireDefault(require("../use-drip"));
+
 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 (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -61,9 +63,6 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({ ...btnProps
   const theme = (0, _useTheme.default)();
   const buttonRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => buttonRef.current);
-  const [dripShow, setDripShow] = (0, _react.useState)(false);
-  const [dripX, setDripX] = (0, _react.useState)(0);
-  const [dripY, setDripY] = (0, _react.useState)(0);
   const groupConfig = (0, _buttonGroupContext.useButtonGroupContext)();
   const filteredProps = (0, _utils.filterPropsWithGroup)(btnProps, groupConfig);
   /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -121,24 +120,19 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({ ...btnProps
     loaderSize
   } = (0, _react.useMemo)(() => (0, _styles.getButtonSize)(size, auto), [size, auto]);
   const dripColor = (0, _react.useMemo)(() => (0, _styles.getButtonDripColor)(theme.palette, filteredProps), [theme.palette, filteredProps]);
+  const {
+    onClick: onDripClickHandler,
+    ...dripBindings
+  } = (0, _useDrip.default)(false, buttonRef);
   const paddingForAutoMode = (0, _react.useMemo)(() => auto || size === 'mini' ? `calc(var(--next-ui-button-height) / 2 + var(--next-ui-button-padding) * .5)` : 0, [auto, size]);
   const hoverBeforeOpacity = (0, _react.useMemo)(() => filteredProps.color === 'gradient' && ghost ? 1 : 0, [ghost, filteredProps]);
   const paddingForBorderedGradient = (0, _react.useMemo)(() => filteredProps.color === 'gradient' && (bordered || ghost) ? `var(--next-ui-button-padding)` : 0, [filteredProps.color, bordered]);
 
-  const dripCompletedHandle = () => {
-    setDripShow(false);
-    setDripX(0);
-    setDripY(0);
-  };
-
   const clickHandler = event => {
     if (disabled || loading) return;
 
     if (animated && buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      setDripShow(true);
-      setDripX(event.clientX - rect.left);
-      setDripY(event.clientY - rect.top);
+      onDripClickHandler(event);
     }
 
     onClick && onClick(event);
@@ -177,11 +171,9 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({ ...btnProps
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _style.default.dynamic([["3651782765", [bg, padding, height, height, minWidth, width, radius, (border == null ? void 0 : border.width) || '2px', (border == null ? void 0 : border.display) || 'none', (border == null ? void 0 : border.color) || 'transparent', fontSize, color, cursor, events, shadowColor, radius, padding, height, color, bg, hover == null ? void 0 : hover.bg, radius, hoverBeforeOpacity, animated ? 'scale(0.97)' : 'none', (hover == null ? void 0 : hover.bg) || 'inherit', hover == null ? void 0 : hover.color, (hover == null ? void 0 : (_hover$style = hover.style) == null ? void 0 : _hover$style.filter) || 'none', hover == null ? void 0 : hover.color, (hover == null ? void 0 : (_hover$border = hover.border) == null ? void 0 : _hover$border.color) || 'transparent', hover == null ? void 0 : (_hover$border2 = hover.border) == null ? void 0 : _hover$border2.width, hover == null ? void 0 : hover.padding, cursor, events, bordered || ghost ? (border == null ? void 0 : border.width) || '2px' : '0', paddingForBorderedGradient, loading ? 0 : 1, paddingForAutoMode, paddingForAutoMode]]]) + " " + "text",
       children: children
-    }), dripShow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-      x: dripX,
-      y: dripY,
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_drip.default, {
       color: dripColor,
-      onCompleted: dripCompletedHandle
+      ...dripBindings
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
       id: "3651782765",
       dynamic: [bg, padding, height, height, minWidth, width, radius, (border == null ? void 0 : border.width) || '2px', (border == null ? void 0 : border.display) || 'none', (border == null ? void 0 : border.color) || 'transparent', fontSize, color, cursor, events, shadowColor, radius, padding, height, color, bg, hover == null ? void 0 : hover.bg, radius, hoverBeforeOpacity, animated ? 'scale(0.97)' : 'none', (hover == null ? void 0 : hover.bg) || 'inherit', hover == null ? void 0 : hover.color, (hover == null ? void 0 : (_hover$style = hover.style) == null ? void 0 : _hover$style.filter) || 'none', hover == null ? void 0 : hover.color, (hover == null ? void 0 : (_hover$border = hover.border) == null ? void 0 : _hover$border.color) || 'transparent', hover == null ? void 0 : (_hover$border2 = hover.border) == null ? void 0 : _hover$border2.width, hover == null ? void 0 : hover.padding, cursor, events, bordered || ghost ? (border == null ? void 0 : border.width) || '2px' : '0', paddingForBorderedGradient, loading ? 0 : 1, paddingForAutoMode, paddingForAutoMode],

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { AlignContent, AlignItems, Justify, Direction } from '../utils/prop-types';
+interface Props {
+    justify?: Justify;
+    direction?: Direction;
+    alignItems?: AlignItems;
+    alignContent?: AlignContent;
+    noPadding?: boolean;
+    width?: string;
+    height?: string;
+    className?: string;
+}
+declare const defaultProps: {
+    width: string;
+    height: string;
+    justify: string;
+    alignItems: string;
+    alignContent: string;
+    direction: string;
+    noPadding: boolean;
+    className: string;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type CardBodyProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    width: string;
+    height: string;
+    justify: string;
+    alignItems: string;
+    alignContent: string;
+    direction: string;
+    noPadding: boolean;
+    className: string;
+}> & Omit<CardBodyProps, "width" | "height" | "className" | "justify" | "direction" | "alignItems" | "alignContent" | "noPadding">>;
+export default _default;

package/cjs/card/card-body.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _cardContext = require("./card-context");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+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 (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; }
+
+const defaultProps = {
+  width: '100%',
+  height: 'auto',
+  justify: 'inherit',
+  alignItems: 'inherit',
+  alignContent: 'inherit',
+  direction: 'column',
+  noPadding: false,
+  className: ''
+};
+
+const CardBody = ({
+  className,
+  justify,
+  alignContent,
+  alignItems,
+  noPadding: noPaddingProp,
+  direction,
+  width,
+  height,
+  children,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const {
+    noPadding: noPaddingContext
+  } = (0, _react.useContext)(_cardContext.CardContext);
+  const noPadding = (0, _react.useMemo)(() => {
+    return noPaddingContext !== undefined ? noPaddingContext : noPaddingProp;
+  }, [noPaddingProp, noPaddingContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+    className: _style.default.dynamic([["3689227210", [width, height, direction, justify, alignItems, alignContent, theme.layout.gapHalf, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('card-body', {
+      'no-padding': noPadding
+    }, className) || ""),
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+      id: "3689227210",
+      dynamic: [width, height, direction, justify, alignItems, alignContent, theme.layout.gapHalf, theme.layout.gap],
+      children: `.card-body.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;width:${width};height:${height};-webkit-flex-direction:${direction};-ms-flex-direction:${direction};flex-direction:${direction};-webkit-box-pack:${justify};-webkit-justify-content:${justify};-ms-flex-pack:${justify};justify-content:${justify};-webkit-align-items:${alignItems};-webkit-box-align:${alignItems};-ms-flex-align:${alignItems};align-items:${alignItems};-webkit-align-content:${alignContent};-ms-flex-line-pack:${alignContent};align-content:${alignContent};padding:${theme.layout.gapHalf} calc(${theme.layout.gap} + 0.25rem);overflow-y:auto;position:relative;text-align:left;}.card-body.no-padding.__jsx-style-dynamic-selector{padding:0;}.card-body.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.card-body.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}`
+    })]
+  });
+};
+
+const MemoCardBody = /*#__PURE__*/_react.default.memo(CardBody);
+
+var _default = (0, _withDefaults.default)(MemoCardBody, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface CardConfig {
+    autoMargin?: boolean;
+    noPadding?: boolean;
+    background?: string;
+}
+export declare const CardContext: React.Context<CardConfig>;
+export declare const useCardContext: () => CardConfig;

package/cjs/card/card-context.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useCardContext = exports.CardContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const defaultContext = {
+  noPadding: undefined
+};
+
+const CardContext = /*#__PURE__*/_react.default.createContext(defaultContext);
+
+exports.CardContext = CardContext;
+
+const useCardContext = () => _react.default.useContext(CardContext);
+
+exports.useCardContext = useCardContext;

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

@@ -1,16 +1,37 @@
 import React from 'react';
+import { NormalColors, NormalWeights, SimpleColors } from '../utils/prop-types';
 interface Props {
-    disableAutoMargin?: boolean;
+    blur?: boolean;
+    autoMargin?: boolean;
+    border?: boolean;
     className?: string;
+    width?: string;
+    height?: string;
+    color?: NormalColors | string;
+    borderColor?: SimpleColors | string;
+    borderWeight?: NormalWeights;
+    noPadding?: boolean;
 }
 declare const defaultProps: {
-    disableAutoMargin: boolean;
+    autoMargin: boolean;
+    blur: boolean;
+    border: boolean;
+    width: string;
+    height: string;
+    noPadding: boolean;
+    borderWeight: "light" | "normal" | "bold";
     className: string;
 };
 declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export declare type CardFooterProps = Props & typeof defaultProps & NativeAttrs;
 declare const _default: React.ComponentType<Partial<{
-    disableAutoMargin: boolean;
+    autoMargin: boolean;
+    blur: boolean;
+    border: boolean;
+    width: string;
+    height: string;
+    noPadding: boolean;
+    borderWeight: "light" | "normal" | "bold";
     className: string;
-}> & Omit<CardFooterProps, "className" | "disableAutoMargin">>;
+}> & Omit<CardFooterProps, "width" | "height" | "blur" | "className" | "borderWeight" | "border" | "autoMargin" | "noPadding">>;
 export default _default;

package/cjs/card/card-footer.js

@@ -7,32 +7,80 @@ exports.default = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useTheme = _interopRequireDefault(require("../use-theme"));
 
 var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
 
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _cardContext = require("./card-context");
+
+var _color = require("../utils/color");
+
+var _dimensions = require("../utils/dimensions");
+
 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 (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; }
+
 const defaultProps = {
-  disableAutoMargin: false,
+  autoMargin: false,
+  blur: false,
+  border: false,
+  width: '100%',
+  height: 'auto',
+  noPadding: false,
+  borderWeight: 'light',
   className: ''
 };
 
 const CardFooter = ({
   children,
+  blur,
   className,
-  disableAutoMargin,
+  color,
+  width,
+  height,
+  border: borderProp,
+  borderColor,
+  borderWeight,
+  noPadding,
+  autoMargin: autoMarginProp,
   ...props
 }) => {
   const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("footer", { ...props,
-    className: _style.default.dynamic([["3326643427", [theme.layout.gapHalf, theme.layout.gap, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.layout.gap, theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || `${disableAutoMargin ? '' : 'auto-margin'} ${className}`),
+  const {
+    background,
+    autoMargin: autoMarginContext
+  } = (0, _react.useContext)(_cardContext.CardContext);
+  const autoMargin = (0, _react.useMemo)(() => {
+    return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
+  }, [autoMarginProp, autoMarginContext]);
+  const bgColor = (0, _react.useMemo)(() => {
+    if (color) {
+      return (0, _color.getNormalColor)(color, theme.palette);
+    }
+
+    return background || theme.palette.background;
+  }, [color, theme.palette, background]);
+  const border = (0, _react.useMemo)(() => {
+    if (!borderProp) return 'none';
+    return `${(0, _dimensions.getNormalWeight)(borderWeight)} solid ${(0, _color.getNormalColor)(borderColor, theme.palette, theme.palette.border)}`;
+  }, [borderWeight, theme.palette, borderColor, borderProp]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+    className: _style.default.dynamic([["135585066", [width, height, theme.layout.gapHalf, theme.layout.gap, bgColor, border, theme.layout.radius, theme.layout.radius, (0, _color.addColorAlpha)(bgColor, 0.4), theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('card-footer', {
+      'auto-margin': autoMargin,
+      blur,
+      'no-padding': noPadding
+    }, className) || ""),
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "3326643427",
-      dynamic: [theme.layout.gapHalf, theme.layout.gap, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.layout.gap, theme.layout.gapQuarter],
-      children: `footer.__jsx-style-dynamic-selector{padding:${theme.layout.gapHalf} ${theme.layout.gap};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:inherit;background-color:inherit;font-size:0.875rem;border-top:1px solid ${theme.palette.border};border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};min-height:calc(2.5 * ${theme.layout.gap});}.auto-margin.__jsx-style-dynamic-selector *{margin-top:0;margin-bottom:0;margin-right:${theme.layout.gapQuarter};}`
+      id: "135585066",
+      dynamic: [width, height, theme.layout.gapHalf, theme.layout.gap, bgColor, border, theme.layout.radius, theme.layout.radius, (0, _color.addColorAlpha)(bgColor, 0.4), theme.layout.gapQuarter],
+      children: `.card-footer.__jsx-style-dynamic-selector{width:${width};height:${height};padding:${theme.layout.gapHalf} ${theme.layout.gap};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:inherit;background-color:${bgColor};font-size:0.875rem;border-top:${border};border-bottom-left-radius:${theme.layout.radius};border-bottom-right-radius:${theme.layout.radius};}.card-footer.blur.__jsx-style-dynamic-selector{-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);background:${(0, _color.addColorAlpha)(bgColor, 0.4)};}.card-footer.no-padding.__jsx-style-dynamic-selector{padding:0;}.auto-margin.__jsx-style-dynamic-selector *{margin-top:0;margin-bottom:0;margin-right:${theme.layout.gapQuarter};}`
     })]
   });
 };

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Justify } from '../utils/prop-types';
+interface Props {
+    autoMargin?: boolean;
+    className?: string;
+    justify?: Justify;
+    noPadding?: boolean;
+}
+declare const defaultProps: {
+    autoMargin: boolean;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    noPadding: boolean;
+    className: string;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type CardHeaderProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    autoMargin: boolean;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    noPadding: boolean;
+    className: string;
+}> & Omit<CardHeaderProps, "className" | "justify" | "autoMargin" | "noPadding">>;
+export default _default;

package/cjs/card/card-header.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const defaultProps = {
+  autoMargin: false,
+  justify: 'flex-start',
+  noPadding: false,
+  className: ''
+};
+
+const CardHeader = ({
+  children,
+  className,
+  autoMargin,
+  justify,
+  noPadding,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+    className: _style.default.dynamic([["1342321190", [justify, theme.layout.gapHalf, theme.layout.gapHalf]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('card-header', {
+      'auto-margin': autoMargin,
+      'no-padding': noPadding
+    }, className) || ""),
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+      id: "1342321190",
+      dynamic: [justify, theme.layout.gapHalf, theme.layout.gapHalf],
+      children: `.card-header.__jsx-style-dynamic-selector{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;z-index:1;-webkit-box-pack:${justify};-webkit-justify-content:${justify};-ms-flex-pack:${justify};justify-content:${justify};-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:inherit;font-size:0.875rem;padding:${theme.layout.gapHalf} calc(${theme.layout.gapHalf} + 0.25rem);}.no-padding.__jsx-style-dynamic-selector{padding:0;}.auto-margin.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.auto-margin.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}`
+    })]
+  });
+};
+
+const MemoCardHeader = /*#__PURE__*/_react.default.memo(CardHeader);
+
+var _default = (0, _withDefaults.default)(MemoCardHeader, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/cjs/card/card.d.ts

@@ -1,33 +1,46 @@
-import React from 'react';
-import { CardColors } from '../utils/prop-types';
+import React, { PropsWithoutRef, RefAttributes } from 'react';
+import { NormalColors, NormalWeights, SimpleColors } from '../utils/prop-types';
+import CardHeader from './card-header';
 import CardFooter from './card-footer';
-import CardContent from './card-content';
+import CardBody from './card-body';
+import Image from '../image';
 interface Props {
-    hoverable?: boolean;
     shadow?: boolean;
     bordered?: boolean;
     animated?: boolean;
+    hoverable?: boolean;
+    clickable?: boolean;
+    cover?: boolean;
     className?: string;
     width?: string;
-    color?: CardColors;
+    height?: string;
+    color?: NormalColors | string;
+    textColor?: SimpleColors | string;
+    borderWeight?: NormalWeights;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 declare const defaultProps: {
-    color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "dark" | "lite" | "alert" | "purple" | "violet" | "cyan";
+    color: string;
+    textColor: string;
     bordered: boolean;
-    hoverable: boolean;
+    cover: boolean;
     animated: boolean;
+    clickable: boolean;
+    hoverable: boolean;
     shadow: boolean;
+    borderWeight: "light" | "normal" | "bold";
     width: string;
+    height: string;
     className: string;
 };
 declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
 export declare type CardProps = Props & typeof defaultProps & NativeAttrs;
-declare type MemoCardComponent<P = {}> = React.NamedExoticComponent<P> & {
+declare type CardComponent<T, P = {}> = React.ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
     Footer: typeof CardFooter;
-    Actions: typeof CardFooter;
-    Content: typeof CardContent;
-    Body: typeof CardContent;
+    Image: typeof Image;
 };
 declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs;
-declare const _default: MemoCardComponent<ComponentProps>;
+declare const _default: CardComponent<HTMLDivElement, ComponentProps>;
 export default _default;