@nextui-org/react 1.0.1-alpha.50 → 1.0.1-alpha.54

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;

package/cjs/card/card.js

@@ -13,14 +13,28 @@ var _useTheme = _interopRequireDefault(require("../use-theme"));
 
 var _styles = require("./styles");
 
+var _cardHeader = _interopRequireDefault(require("./card-header"));
+
 var _cardFooter = _interopRequireDefault(require("./card-footer"));
 
-var _cardContent = _interopRequireDefault(require("./card-content"));
+var _cardBody = _interopRequireDefault(require("./card-body"));
 
 var _image = _interopRequireDefault(require("../image"));
 
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _drip = _interopRequireDefault(require("../utils/drip"));
+
+var _useDrip = _interopRequireDefault(require("../use-drip"));
+
+var _assertion = require("../utils/assertion");
+
 var _collections = require("../utils/collections");
 
+var _dimensions = require("../utils/dimensions");
+
+var _cardContext = require("./card-context");
+
 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); }
@@ -29,54 +43,103 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const defaultProps = {
   color: 'default',
+  textColor: 'default',
   bordered: false,
+  cover: false,
+  animated: true,
+  clickable: false,
   hoverable: false,
-  animated: false,
-  shadow: false,
+  shadow: true,
+  borderWeight: 'normal',
   width: '100%',
+  height: 'auto',
   className: ''
 };
 
-const Card = ({
-  children,
-  hoverable,
-  bordered,
-  className,
-  shadow,
-  animated,
-  color: cardColor,
-  width,
-  ...props
-}) => {
+const Card = /*#__PURE__*/_react.default.forwardRef(({ ...cardProps
+}, ref) => {
+  const {
+    children,
+    bordered,
+    cover,
+    className,
+    shadow,
+    animated,
+    clickable,
+    hoverable,
+    color: cardColor,
+    borderWeight: borderWeightProp,
+    width,
+    height,
+    textColor,
+    onClick,
+    ...props
+  } = cardProps;
   const theme = (0, _useTheme.default)();
-  const hoverShadow = (0, _react.useMemo)(() => {
-    if (shadow) return theme.expressiveness.shadowMedium;
-    return hoverable ? theme.expressiveness.shadowSmall : 'none';
-  }, [hoverable, shadow, theme.expressiveness]);
   const {
     color,
     bgColor,
-    border
-  } = (0, _react.useMemo)(() => (0, _styles.getStyles)(cardColor, theme.palette, shadow, bordered), [cardColor, theme.palette, shadow, bordered]);
-  const [withoutFooterChildren, footerChildren] = (0, _collections.pickChild)(children, _cardFooter.default);
+    dripColor,
+    borderColor
+  } = (0, _react.useMemo)(() => (0, _styles.getStyles)(cardColor, textColor, shadow, bordered, theme), [cardColor, theme, textColor, shadow, bordered]);
+  const cardRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => cardRef.current);
+  const {
+    onClick: onDripClickHandler,
+    ...dripBindings
+  } = (0, _useDrip.default)(false, cardRef);
+  const [withoutHeaderChildren, headerChildren] = (0, _collections.pickChild)(children, _cardHeader.default);
+  const [withoutFooterChildren, footerChildren] = (0, _collections.pickChild)(withoutHeaderChildren, _cardFooter.default);
   const [withoutImageChildren, imageChildren] = (0, _collections.pickChild)(withoutFooterChildren, _image.default);
-  const hasContent = (0, _collections.hasChild)(withoutImageChildren, _cardContent.default);
-  const background = cardColor === 'gradient' ? `background-image: ${bgColor}` : `background-color: ${bgColor}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
-    className: _style.default.dynamic([["2028560375", [theme.palette.background, width, theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, background, border == null ? void 0 : border.weight, border == null ? void 0 : border.color, hoverShadow]]]) + " " + (props && props.className != null && props.className || `card ${animated ? 'animated' : ''} ${className}`),
-    children: [imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/(0, _jsxRuntime.jsx)(_cardContent.default, {
-      children: withoutImageChildren
-    }), footerChildren, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "2028560375",
-      dynamic: [theme.palette.background, width, theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, background, border == null ? void 0 : border.weight, border == null ? void 0 : border.color, hoverShadow],
-      children: `.card.__jsx-style-dynamic-selector{background:${theme.palette.background};margin:0;padding:0;width:${width};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;border-radius:${theme.layout.radius};box-shadow:${shadow ? theme.expressiveness.shadowSmall : 'none'};box-sizing:border-box;color:${color};${background};border:${border == null ? void 0 : border.weight} solid ${border == null ? void 0 : border.color};}.card.__jsx-style-dynamic-selector:hover{box-shadow:${hoverShadow};}.card.__jsx-style-dynamic-selector img{width:100%;}.card.animated.__jsx-style-dynamic-selector img{-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.card.animated.__jsx-style-dynamic-selector:hover img{-webkit-transform:scale(1.15);-ms-transform:scale(1.15);transform:scale(1.15);}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}`
-    })]
+  const hasContent = (0, _collections.hasChild)(withoutImageChildren, _cardBody.default);
+  const hasHeader = (0, _collections.hasChild)(children, _cardHeader.default);
+  const borderWeight = (0, _react.useMemo)(() => bordered ? (0, _dimensions.getNormalWeight)(borderWeightProp) : '0px', [bordered, borderWeightProp]);
+  const cardConfig = (0, _react.useMemo)(() => ({
+    background: bgColor,
+    noPadding: cover ? true : undefined
+  }), []);
+
+  const clickHandler = event => {
+    if (animated && cardRef.current) {
+      onDripClickHandler(event);
+    }
+
+    onClick && onClick(event);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cardContext.CardContext.Provider, {
+    value: cardConfig,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      ref: cardRef,
+      onClick: clickHandler,
+      ...props,
+      className: _style.default.dynamic([["608496355", [bgColor, width, height, theme.layout.radius, shadow && !bordered ? theme.expressiveness.shadowMedium : 'none', color, borderWeight, borderColor, shadow ? theme.expressiveness.shadowLarge : 'none']]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('card', {
+        animated,
+        cover,
+        clickable,
+        hoverable
+      }, className) || ""),
+      children: [hasHeader ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [headerChildren, imageChildren]
+      }) : imageChildren, hasContent ? withoutImageChildren : !cover ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_cardBody.default, {
+        children: withoutImageChildren
+      }) : null, clickable && animated && /*#__PURE__*/(0, _jsxRuntime.jsx)(_drip.default, {
+        color: dripColor,
+        ...dripBindings
+      }), footerChildren, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+        id: "608496355",
+        dynamic: [bgColor, width, height, theme.layout.radius, shadow && !bordered ? theme.expressiveness.shadowMedium : 'none', color, borderWeight, borderColor, shadow ? theme.expressiveness.shadowLarge : 'none'],
+        children: `.card.__jsx-style-dynamic-selector{margin:0;padding:0;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:${bgColor};width:100%;max-width:${width};height:${height};border-radius:${theme.layout.radius};box-shadow:${shadow && !bordered ? theme.expressiveness.shadowMedium : 'none'};box-sizing:border-box;color:${color};border:${borderWeight} solid ${borderColor};}.card.animated.__jsx-style-dynamic-selector{-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.card.clickable.animated.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.97);-ms-transform:scale(0.97);transform:scale(0.97);}.card.hoverable.clickable.animated.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.99);-ms-transform:scale(0.99);transform:scale(0.99);}.card.clickable.__jsx-style-dynamic-selector{cursor:pointer;}.card.__jsx-style-dynamic-selector .image{width:100%;}.card.hoverable.animated.__jsx-style-dynamic-selector:hover{-webkit-transform:translateY(-2px);-ms-transform:translateY(-2px);transform:translateY(-2px);box-shadow:${shadow ? theme.expressiveness.shadowLarge : 'none'};}.card.cover.__jsx-style-dynamic-selector img{object-fit:cover;}.card.__jsx-style-dynamic-selector:not(.cover) .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}`
+      })]
+    })
   });
-};
+});
 
-Card.defaultProps = defaultProps;
-
-var _default = /*#__PURE__*/_react.default.memo(Card);
+if (_assertion.__DEV__) {
+  Card.displayName = 'NextUI - Card';
+}
 
+Card.defaultProps = defaultProps;
+var _default = Card;
 exports.default = _default;
 module.exports = exports.default;

package/cjs/card/index.js

@@ -7,14 +7,18 @@ exports.default = void 0;
 
 var _card = _interopRequireDefault(require("./card"));
 
+var _cardHeader = _interopRequireDefault(require("./card-header"));
+
 var _cardFooter = _interopRequireDefault(require("./card-footer"));
 
-var _cardContent = _interopRequireDefault(require("./card-content"));
+var _cardBody = _interopRequireDefault(require("./card-body"));
+
+var _image = _interopRequireDefault(require("../image"));
 
+_card.default.Header = _cardHeader.default;
+_card.default.Body = _cardBody.default;
 _card.default.Footer = _cardFooter.default;
-_card.default.Actions = _cardFooter.default;
-_card.default.Content = _cardContent.default;
-_card.default.Body = _cardContent.default;
+_card.default.Image = _image.default;
 var _default = _card.default;
 exports.default = _default;
 module.exports = exports.default;

package/cjs/card/styles.d.ts

@@ -1,12 +1,11 @@
-import { CardColors } from '../utils/prop-types';
+import { NextUIThemes } from './../theme/types';
+import { NormalColors, SimpleColors } from '../utils/prop-types';
 import { NextUIThemesPalette } from '../theme';
-export interface CardBorder {
-    weight?: string;
-    color?: string;
-}
 export declare type CardStyles = {
-    color: string;
     bgColor: string;
-    border?: CardBorder;
+    color: string;
+    borderColor: string;
+    dripColor: string;
 };
-export declare const getStyles: (type: CardColors, palette: NextUIThemesPalette, shadow?: boolean | undefined, bordered?: boolean | undefined) => CardStyles;
+export declare const getDripColor: (palette: NextUIThemesPalette, color: NormalColors | string, bordered: boolean) => string;
+export declare const getStyles: (color: NormalColors | string, textColor: SimpleColors | string, shadow: boolean, bordered: boolean, theme: NextUIThemes) => CardStyles;

package/cjs/card/styles.js

@@ -1,69 +1,39 @@
 "use strict";
 
 exports.__esModule = true;
-exports.getStyles = void 0;
+exports.getStyles = exports.getDripColor = void 0;
 
-const getStyles = (type, palette, shadow, bordered) => {
+var _color = require("./../utils/color");
+
+const getDripColor = (palette, color, bordered) => {
   const colors = {
-    default: {
-      color: palette.foreground,
-      bgColor: palette.accents_1
-    },
-    primary: {
-      color: palette.background,
-      bgColor: palette.primary
-    },
-    dark: {
-      color: palette.background,
-      bgColor: palette.foreground
-    },
-    secondary: {
-      color: palette.background,
-      bgColor: palette.secondary
-    },
-    success: {
-      color: palette.background,
-      bgColor: palette.success
-    },
-    warning: {
-      color: palette.background,
-      bgColor: palette.warning
-    },
-    error: {
-      color: palette.background,
-      bgColor: palette.error
-    },
-    lite: {
-      color: palette.foreground,
-      bgColor: palette.background
-    },
-    gradient: {
-      color: palette.white,
-      bgColor: palette.gradient
-    },
-    alert: {
-      color: palette.white,
-      bgColor: palette.alert
-    },
-    purple: {
-      color: palette.white,
-      bgColor: palette.purple
-    },
-    violet: {
-      color: palette.white,
-      bgColor: palette.violet
-    },
-    cyan: {
-      color: palette.text,
-      bgColor: palette.cyan
-    }
+    default: palette.accents_2,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    gradient: (0, _color.hexFromString)(palette.gradient, palette.primary, true)
   };
-  const showBorder = bordered && !shadow;
-  return { ...colors[type],
-    border: {
-      weight: showBorder ? '2px' : '0px',
-      color: showBorder ? palette.border : 'transparent'
-    }
+  const baseColor = color === 'default' ? palette.primary : colors[color || 'default'] || (0, _color.getNormalColor)(color, palette);
+  const selectedColor = bordered ? baseColor : palette.accents_6;
+  if (selectedColor) return (0, _color.addColorAlpha)(selectedColor, 0.25);
+  return palette.accents_2;
+};
+
+exports.getDripColor = getDripColor;
+
+const getStyles = (color, textColor, shadow, bordered, theme) => {
+  const palette = theme.palette;
+  const isDark = theme.type === 'dark';
+  const normalColor = (0, _color.getNormalColor)(color, palette, isDark ? palette.accents_1 : palette.background);
+  const normalTextColor = (0, _color.getNormalColor)(textColor, palette, palette.text);
+  const dripColor = getDripColor(palette, color, bordered);
+  return {
+    bgColor: color === 'default' && !shadow && !bordered ? palette.accents_1 : normalColor,
+    color: normalTextColor,
+    borderColor: color === 'default' ? palette.border : normalColor,
+    dripColor
   };
 };
 

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CollapseConfig {
+    values: Array<number>;
+    divider?: boolean;
+    animated?: boolean;
+    updateValues?: Function;
+}
+export declare const CollapseContext: React.Context<CollapseConfig>;
+export declare const useCollapseContext: () => CollapseConfig;

package/cjs/collapse/collapse-context.js

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { NormalWeights } from '../utils/prop-types';
+interface Props {
+    accordion?: boolean;
+    className?: string;
+    animated?: boolean;
+    bordered?: boolean;
+    splitted?: boolean;
+    shadow?: boolean;
+    divider?: boolean;
+    borderWeight?: NormalWeights;
+    onChange?: (index?: number | undefined, value?: boolean) => void;
+}
+declare const defaultProps: {
+    accordion: boolean;
+    shadow: boolean;
+    bordered: boolean;
+    splitted: boolean;
+    borderWeight: "light" | "normal" | "bold";
+    className: string;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type CollapseGroupProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    accordion: boolean;
+    shadow: boolean;
+    bordered: boolean;
+    splitted: boolean;
+    borderWeight: "light" | "normal" | "bold";
+    className: string;
+}> & Omit<React.PropsWithChildren<CollapseGroupProps>, "className" | "bordered" | "borderWeight" | "shadow" | "accordion" | "splitted">>;
+export default _default;

package/cjs/collapse/collapse-group.js

@@ -0,0 +1,111 @@
+"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 _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _collapseContext = require("./collapse-context");
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _collections = require("../utils/collections");
+
+var _dimensions = require("../utils/dimensions");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _collapse = _interopRequireDefault(require("./collapse"));
+
+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 = {
+  accordion: true,
+  shadow: false,
+  bordered: false,
+  splitted: false,
+  borderWeight: 'light',
+  className: ''
+};
+
+const CollapseGroup = ({
+  children,
+  accordion,
+  shadow,
+  className,
+  animated,
+  bordered,
+  splitted,
+  divider,
+  borderWeight: borderWeightProp,
+  onChange,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const [state, setState, stateRef] = (0, _useCurrentState.default)([]);
+
+  const updateValues = (currentIndex, nextState) => {
+    const hasChild = stateRef.current.find(val => val === currentIndex);
+    onChange && onChange(currentIndex, nextState);
+
+    if (accordion) {
+      if (nextState) return setState([currentIndex]);
+      return setState([]);
+    }
+
+    if (nextState) {
+      // In a few cases, the user will set Collapse Component state manually.
+      // If the user incorrectly set the state, Group component should ignore it.
+
+      /* istanbul ignore if */
+      if (hasChild) return;
+      return setState([...stateRef.current, currentIndex]);
+    }
+
+    setState(stateRef.current.filter(item => item !== currentIndex));
+  };
+
+  const bgColor = (0, _react.useMemo)(() => theme.type === 'dark' ? theme.palette.accents_1 : theme.palette.background, [theme.type]);
+  const initialValue = (0, _react.useMemo)(() => ({
+    values: state,
+    updateValues,
+    divider,
+    animated
+  }), [state.join(',')]);
+  const hasIndexChildren = (0, _react.useMemo)(() => (0, _collections.setChildrenIndex)(children, [_collapse.default]), [children]);
+  const borderWeight = (0, _react.useMemo)(() => {
+    return bordered ? (0, _dimensions.getNormalWeight)(borderWeightProp) : '0px';
+  }, [bordered, borderWeightProp]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapseContext.CollapseContext.Provider, {
+    value: initialValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+      className: _style.default.dynamic([["2642035014", [theme.layout.gapHalf, theme.layout.radius, theme.layout.gap, bgColor, theme.expressiveness.shadowMedium, bgColor, theme.expressiveness.shadowMedium, theme.layout.gapHalf, borderWeight, theme.palette.border]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('collapse-group', {
+        shadow,
+        bordered,
+        splitted
+      }, className) || ""),
+      children: [hasIndexChildren, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+        id: "2642035014",
+        dynamic: [theme.layout.gapHalf, theme.layout.radius, theme.layout.gap, bgColor, theme.expressiveness.shadowMedium, bgColor, theme.expressiveness.shadowMedium, theme.layout.gapHalf, borderWeight, theme.palette.border],
+        children: `.collapse-group.__jsx-style-dynamic-selector{width:auto;padding:0 ${theme.layout.gapHalf};}.collapse-group.__jsx-style-dynamic-selector>div + div{border-top:none;}.shadow.__jsx-style-dynamic-selector,.bordered.__jsx-style-dynamic-selector,.collapse-group.splitted.__jsx-style-dynamic-selector .collapse{border-radius:${theme.layout.radius};padding:0 ${theme.layout.gap};}.shadow.__jsx-style-dynamic-selector{border:none;background:${bgColor};box-shadow:${theme.expressiveness.shadowMedium};}.collapse-group.splitted.__jsx-style-dynamic-selector .collapse{border:none;background:${bgColor};box-shadow:${theme.expressiveness.shadowMedium};margin:${theme.layout.gapHalf} 0;}.bordered.__jsx-style-dynamic-selector{border:${borderWeight} solid ${theme.palette.border};}.collapse-group.__jsx-style-dynamic-selector .collapse:last-child{border-bottom:none;}.collapse-group.__jsx-style-dynamic-selector .collapse:first-child{border-top:none;}.gradient.vertical.__jsx-style-dynamic-selector .button:not(:last-child):not(:first-child){padding-top:0 !important;}`
+      })]
+    })
+  });
+};
+
+var _default = (0, _withDefaults.default)(CollapseGroup, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/cjs/collapse/collapse-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MemoCollapseIcon: React.NamedExoticComponent<object>;
+export default MemoCollapseIcon;