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

package/cjs/utils/prop-types.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.excludedInputPropsForTextarea = exports.normalWeights = exports.normalLoaders = exports.extraColors = exports.extendedColors = exports.simpleColors = exports.normalColors = exports.tuple = void 0;
+exports.excludedInputPropsForTextarea = exports.textTransforms = exports.textWeights = exports.normalWeights = exports.normalLoaders = exports.extraColors = exports.extendedColors = exports.simpleColors = exports.normalColors = exports.tuple = void 0;
 
 const tuple = (...args) => args;
 
@@ -19,10 +19,30 @@ const normalLoaders = tuple('default', 'points', 'points-opacity', 'gradient', '
 exports.normalLoaders = normalLoaders;
 const normalWeights = tuple('light', 'normal', 'bold');
 exports.normalWeights = normalWeights;
+const textWeights = tuple(
+/* Keyword values */
+'normal', 'bold',
+/* Keyword values relative to the parent */
+'lighter', 'bolder',
+/* Global values */
+'inherit', 'initial', 'revert', 'unset');
+exports.textWeights = textWeights;
+const textTransforms = tuple(
+/* Keyword values */
+'none', 'capitalize', 'uppercase', 'lowercase', 'full-width', 'full-size-kana',
+/* Global values */
+'inherit', 'initial', 'revert', 'unset');
+exports.textTransforms = textTransforms;
 const themeTypes = tuple('dark', 'light');
 const copyTypes = tuple('default', 'slient', 'prevent');
 const triggerTypes = tuple('hover', 'click');
-const position = tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
+const placement = tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
+const position = tuple('static', 'relative', 'absolute', 'fixed', 'sticky',
+/* Global values */
+'inherit', 'initial', 'revert', 'unset');
+const objectFit = tuple('contain', 'cover', 'fill', 'none', 'scale-down',
+/* Global values */
+'inherit', 'initial', 'revert', 'unset');
 const dividerAlign = tuple('start', 'center', 'end', 'left', 'right');
 const justify = tuple('flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly');
 const alignItems = tuple('flex-start', 'flex-end', 'center', 'stretch', 'baseline');

package/collapse/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "../cjs/collapse/index.js",
+  "module": "../esm/collapse/index.js",
+  "types": "../esm/collapse/index.d.ts"
+}

package/esm/avatar/avatar-group.js

@@ -2,6 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import withDefaults from '../utils/with-defaults';
+import clsx from '../utils/clsx';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultProps = {
@@ -17,15 +18,18 @@ const AvatarGroup = ({
   ...props
 }) => {
   const theme = useTheme();
+  const isDark = theme.type === 'dark';
   return /*#__PURE__*/_jsxs("div", { ...props,
-    className: _JSXStyle.dynamic([["1646920449", [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + (props && props.className != null && props.className || `avatar-group ${className}`),
+    className: _JSXStyle.dynamic([["1480508104", [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + (props && props.className != null && props.className || clsx('avatar-group', {
+      'is-dark': isDark
+    }, className) || ""),
     children: [children, count && /*#__PURE__*/_jsxs("span", {
-      className: _JSXStyle.dynamic([["1646920449", [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + "count",
+      className: _JSXStyle.dynamic([["1480508104", [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7]]]) + " " + "count",
       children: ["+", count]
     }), /*#__PURE__*/_jsx(_JSXStyle, {
-      id: "1646920449",
+      id: "1480508104",
       dynamic: [animated ? 'translate(-0.625rem)' : '', theme.layout.gapQuarter, theme.palette.accents_7],
-      children: `.avatar-group.__jsx-style-dynamic-selector{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;height:auto;width:-webkit-max-content;width:-moz-max-content;width:max-content;}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-0.625rem;-webkit-transition:-webkit-transform 0.25s ease;-webkit-transition:transform 0.25s ease;transition:transform 0.25s ease;}.avatar-group.__jsx-style-dynamic-selector .avatar:hover{-webkit-transform:${animated ? 'translate(-0.625rem)' : ''};-ms-transform:${animated ? 'translate(-0.625rem)' : ''};transform:${animated ? 'translate(-0.625rem)' : ''};}.count.__jsx-style-dynamic-selector{font-size:0.875rem;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:${theme.layout.gapQuarter};color:${theme.palette.accents_7};}`
+      children: `.avatar-group.__jsx-style-dynamic-selector{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;height:auto;width:-webkit-max-content;width:-moz-max-content;width:max-content;}.avatar-group.__jsx-style-dynamic-selector .avatar{margin-left:-0.625rem;-webkit-transition:-webkit-transform 0.25s ease;-webkit-transition:transform 0.25s ease;transition:transform 0.25s ease;}.avatar-group.__jsx-style-dynamic-selector .only-text-avatar{box-shadow:-4px 0 4px rgb(0 0 0 / 5%);}.is-dark.__jsx-style-dynamic-selector .only-text-avatar{box-shadow:-4px 0 15px rgb(0 0 0 / 50%);}.avatar-group.__jsx-style-dynamic-selector .avatar:hover{-webkit-transform:${animated ? 'translate(-0.625rem)' : ''};-ms-transform:${animated ? 'translate(-0.625rem)' : ''};transform:${animated ? 'translate(-0.625rem)' : ''};}.count.__jsx-style-dynamic-selector{font-size:0.875rem;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:${theme.layout.gapQuarter};color:${theme.palette.accents_7};}`
     })]
   });
 };

package/esm/avatar/avatar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NormalSizes, NormalColors, SimpleColors } from '../utils/prop-types';
+import { NormalSizes, NormalColors, SimpleColors, NormalWeights } from '../utils/prop-types';
 import AvatarGroup from './avatar-group';
 interface Props {
     src?: string;
@@ -13,6 +13,7 @@ interface Props {
     alt?: string;
     text?: string;
     size?: NormalSizes | number;
+    borderWeight?: NormalWeights;
     squared?: boolean;
     className?: string;
 }
@@ -20,6 +21,7 @@ declare const defaultProps: {
     text: string;
     stacked: boolean;
     size: number | "mini" | "small" | "medium" | "large" | "xlarge";
+    borderWeight: "light" | "normal" | "bold";
     textColor: "default" | "primary" | "secondary" | "success" | "warning" | "error";
     squared: boolean;
     zoomed: boolean;

package/esm/avatar/avatar.js

@@ -1,15 +1,16 @@
 import _JSXStyle from "styled-jsx/style";
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import useTheme from '../use-theme';
-import useWarning from '../use-warning';
-import { __DEV__ } from '../utils/assertion';
-import { isColor, getNormalColor, isNormalColor, addColorAlpha } from '../utils/color';
+import { getNormalColor, addColorAlpha } from '../utils/color';
+import clsx from '../utils/clsx';
+import { getNormalWeight } from '../utils/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const defaultProps = {
   text: '',
   stacked: false,
   size: 'medium',
+  borderWeight: 'normal',
   textColor: 'default',
   squared: false,
   zoomed: false,
@@ -28,18 +29,6 @@ const getSize = size => {
   return sizes[size];
 };
 
-const getBorder = size => {
-  const sizes = {
-    mini: '1px',
-    small: '1px',
-    medium: '1.5px',
-    large: '2px',
-    xlarge: '2.5px'
-  };
-  if (typeof size === 'number') return `1.5px`;
-  return sizes[size];
-};
-
 const safeText = text => {
   if (text.length <= 4) return text;
   return text.slice(0, 3);
@@ -50,6 +39,7 @@ const Avatar = ({
   stacked,
   text,
   size,
+  borderWeight,
   squared,
   zoomed,
   bordered,
@@ -67,7 +57,7 @@ const Avatar = ({
   const marginLeft = stacked ? '-.625rem' : 0;
   const [ready, setReady] = useState(false);
   const width = useMemo(() => getSize(size), [size]);
-  const border = useMemo(() => getBorder(size), [size]);
+  const border = useMemo(() => getNormalWeight(borderWeight), [borderWeight]);
   const imgRef = useRef(null);
   useEffect(() => {
     var _imgRef$current;
@@ -76,32 +66,32 @@ const Avatar = ({
   }, []);
   const avatarColor = useMemo(() => getNormalColor(color, theme.palette, theme.palette.accents_2), [color, theme.palette]);
   const avatarTextColor = useMemo(() => getNormalColor(textColor, theme.palette, theme.palette.text), [textColor, theme.palette]);
-  const hoverBackground = useMemo(() => color === 'gradient' || !bordered ? avatarColor : addColorAlpha(avatarColor, 0.8), [color, avatarColor, bordered]);
-
-  if (__DEV__ && color && !isNormalColor(color) && !isColor(color)) {
-    useWarning(`Props "color" ${color} is not a valid color.`, 'Avatar');
-  }
-
+  const hoverBackground = useMemo(() => color === 'gradient' || !bordered ? avatarColor : addColorAlpha(avatarColor, 0.6), [color, avatarColor, bordered]);
   return /*#__PURE__*/_jsxs("span", { ...props,
-    className: _JSXStyle.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + (props && props.className != null && props.className || `avatar ${bordered ? 'bordered' : ''} ${className}`),
+    className: _JSXStyle.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + (props && props.className != null && props.className || clsx('avatar', {
+      bordered,
+      'only-text-avatar': showText
+    }, className) || ""),
     children: [/*#__PURE__*/_jsx("span", {
-      className: _JSXStyle.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "avatar-bg"
+      className: _JSXStyle.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "avatar-bg"
     }), !showText && /*#__PURE__*/_jsx("img", {
       ref: imgRef,
       src: src,
       alt: alt,
       onLoad: () => setReady(true),
-      className: _JSXStyle.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + `avatar-img ${ready ? 'avatar-ready' : ''}`
+      className: _JSXStyle.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + (clsx('avatar-img', {
+        'avatar-ready': ready
+      }) || "")
     }), showText && !icon && /*#__PURE__*/_jsx("span", {
-      className: _JSXStyle.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "avatar-text",
+      className: _JSXStyle.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "avatar-text",
       children: safeText(text)
     }), icon && /*#__PURE__*/_jsx("span", {
-      className: _JSXStyle.dynamic([["556121610", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "icon",
+      className: _JSXStyle.dynamic([["3734005641", [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)']]]) + " " + "icon",
       children: icon
     }), /*#__PURE__*/_jsx(_JSXStyle, {
-      id: "556121610",
-      dynamic: [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'hue-rotate(40deg)' : 'none', zoomed && 'scale(1.125)'],
-      children: `.avatar.__jsx-style-dynamic-selector{position:relative;z-index:1;min-width:${width};min-height:${width};width:${width};height:${width};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;position:relative;overflow:hidden;border-radius:${radius};vertical-align:top;cursor:${pointer ? 'pointer' : 'auto'};margin:0 0 0 ${marginLeft};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.avatar-bg.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:${width};height:${width};background:${avatarColor};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.avatar.bordered.__jsx-style-dynamic-selector{padding:${border};}.avatar.__jsx-style-dynamic-selector:first-child{margin:0;}.avatar-img.__jsx-style-dynamic-selector{z-index:99;opacity:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-radius:50%;background:${theme.palette.background};border-radius:${radius};-webkit-transition:-webkit-transform 250ms ease 0ms,opacity 200ms ease-in 0ms;-webkit-transition:transform 250ms ease 0ms,opacity 200ms ease-in 0ms;transition:transform 250ms ease 0ms,opacity 200ms ease-in 0ms;}.avatar-ready.__jsx-style-dynamic-selector{opacity:1;}.bordered.__jsx-style-dynamic-selector .avatar-img.__jsx-style-dynamic-selector{border:${border} solid ${theme.palette.background};}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:calc(0.8em + ${width} * 0.1);text-align:center;color:${avatarTextColor};-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;left:50%;top:50%;text-align:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.bordered.__jsx-style-dynamic-selector:hover .avatar-bg.__jsx-style-dynamic-selector{background:${hoverBackground};-webkit-filter:${color === 'gradient' ? 'hue-rotate(40deg)' : 'none'};filter:${color === 'gradient' ? 'hue-rotate(40deg)' : 'none'};}.avatar.__jsx-style-dynamic-selector:hover .avatar-img.__jsx-style-dynamic-selector{-webkit-transform:${zoomed && 'scale(1.125)'};-ms-transform:${zoomed && 'scale(1.125)'};transform:${zoomed && 'scale(1.125)'};}.avatar.__jsx-style-dynamic-selector:hover .avatar-bg.__jsx-style-dynamic-selector{box-shadow:inset 0 0 40px 0 rgb(0 0 0 / 14%);}`
+      id: "3734005641",
+      dynamic: [width, width, width, width, radius, pointer ? 'pointer' : 'auto', marginLeft, width, width, avatarColor, border, theme.palette.background, radius, border, theme.palette.background, width, avatarTextColor, hoverBackground, color === 'gradient' ? 'opacity(0.6)' : 'none', zoomed && 'scale(1.125)'],
+      children: `.avatar.__jsx-style-dynamic-selector{position:relative;z-index:1;min-width:${width};min-height:${width};width:${width};height:${width};display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;position:relative;overflow:hidden;border-radius:${radius};vertical-align:top;cursor:${pointer ? 'pointer' : 'auto'};margin:0 0 0 ${marginLeft};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.avatar-bg.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;right:0;bottom:0;width:${width};height:${width};background:${avatarColor};-webkit-transition:all 0.25s ease;transition:all 0.25s ease;}.avatar.bordered.__jsx-style-dynamic-selector{padding:${border};}.avatar.__jsx-style-dynamic-selector:first-child{margin:0;}.avatar-img.__jsx-style-dynamic-selector{z-index:99;opacity:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-radius:50%;background:${theme.palette.background};border-radius:${radius};-webkit-transition:-webkit-transform 250ms ease 0ms,opacity 200ms ease-in 0ms;-webkit-transition:transform 250ms ease 0ms,opacity 200ms ease-in 0ms;transition:transform 250ms ease 0ms,opacity 200ms ease-in 0ms;}.avatar-ready.__jsx-style-dynamic-selector{opacity:1;}.bordered.__jsx-style-dynamic-selector .avatar-img.__jsx-style-dynamic-selector{border:${border} solid ${theme.palette.background};}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:calc(0.8em + ${width} * 0.1);text-align:center;color:${avatarTextColor};-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.icon.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;left:50%;top:50%;text-align:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.bordered.__jsx-style-dynamic-selector:hover .avatar-bg.__jsx-style-dynamic-selector{background:${hoverBackground};-webkit-filter:${color === 'gradient' ? 'opacity(0.6)' : 'none'};filter:${color === 'gradient' ? 'opacity(0.6)' : 'none'};}.avatar.__jsx-style-dynamic-selector:hover .avatar-img.__jsx-style-dynamic-selector{-webkit-transform:${zoomed && 'scale(1.125)'};-ms-transform:${zoomed && 'scale(1.125)'};transform:${zoomed && 'scale(1.125)'};}.avatar.__jsx-style-dynamic-selector:hover .avatar-bg.__jsx-style-dynamic-selector{box-shadow:inset 0 0 40px 0 rgb(0 0 0 / 14%);}`
     })]
   });
 };

package/esm/backdrop/index.d.ts

@@ -4,12 +4,14 @@ interface Props {
     visible?: boolean;
     fullScreenContent?: boolean;
     width?: string;
+    animated?: boolean;
     blur?: boolean;
 }
 declare const defaultProps: {
     onClick: () => void;
     visible: boolean;
     blur: boolean;
+    animated: boolean;
     fullScreenContent: boolean;
 };
 declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -18,6 +20,7 @@ declare const _default: React.ComponentType<Partial<{
     onClick: () => void;
     visible: boolean;
     blur: boolean;
+    animated: boolean;
     fullScreenContent: boolean;
-}> & Omit<React.PropsWithChildren<BackdropProps>, "blur" | "onClick" | "visible" | "fullScreenContent">>;
+}> & Omit<React.PropsWithChildren<BackdropProps>, "blur" | "animated" | "onClick" | "visible" | "fullScreenContent">>;
 export default _default;

package/esm/backdrop/index.js

@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import withDefaults from '../utils/with-defaults';
 import useTheme from '../use-theme';
 import CSSTransition from '../utils/css-transition';
@@ -8,10 +8,12 @@ import cslx from '../utils/clsx';
 import { __DEV__ } from '../utils/assertion';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const defaultProps = {
   onClick: () => {},
   visible: false,
   blur: false,
+  animated: true,
   fullScreenContent: false
 };
 const Backdrop = /*#__PURE__*/React.memo(({
@@ -20,6 +22,7 @@ const Backdrop = /*#__PURE__*/React.memo(({
   visible,
   width,
   blur,
+  animated,
   fullScreenContent,
   ...props
 }) => {
@@ -43,13 +46,8 @@ const Backdrop = /*#__PURE__*/React.memo(({
     }, 0);
   };
 
-  return /*#__PURE__*/_jsx(CSSTransition, {
-    name: "backdrop-wrapper",
-    visible: visible,
-    enterTime: 20,
-    leaveTime: 20,
-    clearTime: 150,
-    children: /*#__PURE__*/_jsxs("div", {
+  const renderChildren = useMemo(() => {
+    return /*#__PURE__*/_jsxs("div", {
       onClick: clickHandler,
       onMouseUp: mouseUpHandler,
       ...props,
@@ -68,7 +66,17 @@ const Backdrop = /*#__PURE__*/React.memo(({
         dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.breakpoints.sm.max],
         children: `.backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:99999;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.content.__jsx-style-dynamic-selector{position:relative;z-index:999999;outline:none;width:100%;max-width:${width};margin:20px auto;vertical-align:middle;display:inline-block;}.fullscreen.__jsx-style-dynamic-selector .content.__jsx-style-dynamic-selector{width:100vw;max-width:100vw;height:100vh;margin:0;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none;z-index:99999;}.layer-default.__jsx-style-dynamic-selector{background-color:black;opacity:${theme.expressiveness.portalOpacity};-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);}.layer-blur.__jsx-style-dynamic-selector{opacity:1;-webkit-transition:background 0.35s cubic-bezier(0.4,0,0.2,1);transition:background 0.35s cubic-bezier(0.4,0,0.2,1);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,0.1);}.fullscreen.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{display:none;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:${theme.expressiveness.portalOpacity};}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:${theme.expressiveness.portalOpacity};}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.1);}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.4);}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.4);}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.1);}@media only screen and (max-width:${theme.breakpoints.sm.max}){.content.__jsx-style-dynamic-selector{width:90%;}}`
       })]
-    })
+    });
+  }, [children]);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: animated ? /*#__PURE__*/_jsx(CSSTransition, {
+      name: "backdrop-wrapper",
+      visible: visible,
+      enterTime: 20,
+      leaveTime: 20,
+      clearTime: 150,
+      children: renderChildren
+    }) : visible ? renderChildren : null
   });
 });
 

package/esm/button/button-group.d.ts

@@ -49,5 +49,5 @@ declare const _default: React.ComponentType<Partial<{
     size: "mini" | "small" | "medium" | "large" | "xlarge";
     color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient";
     className: string;
-}> & Omit<ButtonGroupProps, "light" | "rounded" | "className" | "animated" | "color" | "vertical" | "bordered" | "size" | "auto" | "flat" | "disabled" | "shadow" | "ghost" | "borderWeight">>;
+}> & Omit<ButtonGroupProps, "light" | "rounded" | "className" | "animated" | "color" | "vertical" | "bordered" | "size" | "borderWeight" | "auto" | "flat" | "disabled" | "shadow" | "ghost">>;
 export default _default;

package/esm/button/button.js

@@ -1,8 +1,8 @@
 import _JSXStyle from "styled-jsx/style";
-import React, { useRef, useState, useMemo, useImperativeHandle } from 'react';
+import React, { useRef, useMemo, useImperativeHandle } from 'react';
 import useWarning from '../use-warning';
 import useTheme from '../use-theme';
-import ButtonDrip from './button.drip';
+import ButtonDrip from '../utils/drip';
 import ButtonLoading from './button-loading';
 import { filterPropsWithGroup } from './utils';
 import { useButtonGroupContext } from './button-group-context';
@@ -10,6 +10,7 @@ import ButtonIcon from './button-icon';
 import { getButtonColors, getButtonCursor, getButtonDripColor, getShadowColor, getButtonSize } from './styles';
 import { getNormalRadius } from '../utils/dimensions';
 import { __DEV__ } from '../utils/assertion';
+import useDrip from '../use-drip';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const defaultProps = {
@@ -37,9 +38,6 @@ const Button = /*#__PURE__*/React.forwardRef(({ ...btnProps
   const theme = useTheme();
   const buttonRef = useRef(null);
   useImperativeHandle(ref, () => buttonRef.current);
-  const [dripShow, setDripShow] = useState(false);
-  const [dripX, setDripX] = useState(0);
-  const [dripY, setDripY] = useState(0);
   const groupConfig = useButtonGroupContext();
   const filteredProps = filterPropsWithGroup(btnProps, groupConfig);
   /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -97,24 +95,19 @@ const Button = /*#__PURE__*/React.forwardRef(({ ...btnProps
     loaderSize
   } = useMemo(() => getButtonSize(size, auto), [size, auto]);
   const dripColor = useMemo(() => getButtonDripColor(theme.palette, filteredProps), [theme.palette, filteredProps]);
+  const {
+    onClick: onDripClickHandler,
+    ...dripBindings
+  } = useDrip(false, buttonRef);
   const paddingForAutoMode = useMemo(() => auto || size === 'mini' ? `calc(var(--next-ui-button-height) / 2 + var(--next-ui-button-padding) * .5)` : 0, [auto, size]);
   const hoverBeforeOpacity = useMemo(() => filteredProps.color === 'gradient' && ghost ? 1 : 0, [ghost, filteredProps]);
   const paddingForBorderedGradient = 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);
@@ -153,11 +146,9 @@ const Button = /*#__PURE__*/React.forwardRef(({ ...btnProps
     }) : /*#__PURE__*/_jsx("div", {
       className: _JSXStyle.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__*/_jsx(ButtonDrip, {
-      x: dripX,
-      y: dripY,
+    }), /*#__PURE__*/_jsx(ButtonDrip, {
       color: dripColor,
-      onCompleted: dripCompletedHandle
+      ...dripBindings
     }), /*#__PURE__*/_jsx(_JSXStyle, {
       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/esm/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/esm/card/card-body.js

@@ -0,0 +1,52 @@
+import _JSXStyle from "styled-jsx/style";
+import React, { useMemo, useContext } from 'react';
+import useTheme from '../use-theme';
+import { CardContext } from './card-context';
+import clsx from '../utils/clsx';
+import withDefaults from '../utils/with-defaults';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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 = useTheme();
+  const {
+    noPadding: noPaddingContext
+  } = useContext(CardContext);
+  const noPadding = useMemo(() => {
+    return noPaddingContext !== undefined ? noPaddingContext : noPaddingProp;
+  }, [noPaddingProp, noPaddingContext]);
+  return /*#__PURE__*/_jsxs("div", { ...props,
+    className: _JSXStyle.dynamic([["3689227210", [width, height, direction, justify, alignItems, alignContent, theme.layout.gapHalf, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || clsx('card-body', {
+      'no-padding': noPadding
+    }, className) || ""),
+    children: [children, /*#__PURE__*/_jsx(_JSXStyle, {
+      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.memo(CardBody);
+export default withDefaults(MemoCardBody, defaultProps);

package/esm/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/esm/card/card-context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const defaultContext = {
+  noPadding: undefined
+};
+export const CardContext = /*#__PURE__*/React.createContext(defaultContext);
+export const useCardContext = () => React.useContext(CardContext);

package/esm/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/esm/card/card-footer.js

@@ -1,27 +1,67 @@
 import _JSXStyle from "styled-jsx/style";
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
 import useTheme from '../use-theme';
 import withDefaults from '../utils/with-defaults';
+import clsx from '../utils/clsx';
+import { CardContext } from './card-context';
+import { addColorAlpha, getNormalColor } from '../utils/color';
+import { getNormalWeight } from '../utils/dimensions';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 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 = useTheme();
-  return /*#__PURE__*/_jsxs("footer", { ...props,
-    className: _JSXStyle.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
+  } = useContext(CardContext);
+  const autoMargin = useMemo(() => {
+    return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
+  }, [autoMarginProp, autoMarginContext]);
+  const bgColor = useMemo(() => {
+    if (color) {
+      return getNormalColor(color, theme.palette);
+    }
+
+    return background || theme.palette.background;
+  }, [color, theme.palette, background]);
+  const border = useMemo(() => {
+    if (!borderProp) return 'none';
+    return `${getNormalWeight(borderWeight)} solid ${getNormalColor(borderColor, theme.palette, theme.palette.border)}`;
+  }, [borderWeight, theme.palette, borderColor, borderProp]);
+  return /*#__PURE__*/_jsxs("div", { ...props,
+    className: _JSXStyle.dynamic([["135585066", [width, height, theme.layout.gapHalf, theme.layout.gap, bgColor, border, theme.layout.radius, theme.layout.radius, addColorAlpha(bgColor, 0.4), theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || clsx('card-footer', {
+      'auto-margin': autoMargin,
+      blur,
+      'no-padding': noPadding
+    }, className) || ""),
     children: [children, /*#__PURE__*/_jsx(_JSXStyle, {
-      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, 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:${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};}`
     })]
   });
 };