@nextui-org/react 1.0.1-alpha.7 → 1.0.2-alpha.2

package/esm/avatar/avatar.styles.js

@@ -0,0 +1,334 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.StyledAvatar = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const StyledAvatar = (0, _stitches.styled)('span', {
+  dflex: 'center',
+  position: 'relative',
+  zIndex: '$1',
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+  verticalAlign: 'top',
+  cursor: 'auto',
+  transition: '$default',
+  '&:first-child': {
+    margin: 0
+  },
+  '&:hover .nextui-avatar-bg': {
+    boxShadow: ' inset 0 0 40px 0 rgb(0 0 0 / 14%)'
+  },
+  '.nextui-avatar-img': {
+    opacity: 0,
+    zIndex: '$3',
+    display: 'flex',
+    bg: '$background',
+    transition: 'transform 250ms ease 0ms, opacity 200ms ease-in 0ms',
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover'
+  },
+  '&[data-state="ready"] .nextui-avatar-img': {
+    opacity: 1
+  },
+  '.nextui-avatar-bg': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: '$2',
+    transition: '$default'
+  },
+  '.nextui-avatar-icon': {
+    display: 'flex',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    ta: 'center',
+    zIndex: '$2',
+    transform: 'translate(-50%, -50%)',
+    whiteSpace: 'nowrap',
+    us: 'none'
+  },
+  '.nextui-avatar-text': {
+    position: 'absolute',
+    zIndex: '$2',
+    left: '50%',
+    top: '50%',
+    ta: 'center',
+    transform: 'translate(-50%, -50%) scale(0.65)',
+    whiteSpace: 'nowrap',
+    us: 'none'
+  },
+  '@motion': {
+    transition: 'none',
+    '.nextui-avatar-bg, .nextui-avatar-img': {
+      transition: 'none'
+    }
+  },
+  variants: {
+    color: {
+      default: {
+        '.nextui-avatar-bg': {
+          bg: '$accents2'
+        }
+      },
+      primary: {
+        '.nextui-avatar-bg': {
+          bg: '$primary'
+        },
+        '.nextui-avatar-text': {
+          color: '$background'
+        }
+      },
+      secondary: {
+        '.nextui-avatar-bg': {
+          bg: '$secondary'
+        },
+        '.nextui-avatar-text': {
+          color: '$background'
+        }
+      },
+      success: {
+        '.nextui-avatar-bg': {
+          bg: '$success'
+        },
+        '.nextui-avatar-text': {
+          color: '$background'
+        }
+      },
+      warning: {
+        '.nextui-avatar-bg': {
+          bg: '$warning'
+        },
+        '.nextui-avatar-text': {
+          color: '$background'
+        }
+      },
+      error: {
+        '.nextui-avatar-bg': {
+          bg: '$error'
+        },
+        '.nextui-avatar-text': {
+          color: '$background'
+        }
+      },
+      gradient: {
+        '.nextui-avatar-bg': {
+          bg: '$gradient'
+        },
+        '.nextui-avatar-text': {
+          color: '$background'
+        }
+      }
+    },
+    textColor: {
+      default: {
+        '.nextui-avatar-text': {
+          color: '$text'
+        }
+      },
+      primary: {
+        '.nextui-avatar-text': {
+          color: '$primary'
+        }
+      },
+      secondary: {
+        '.nextui-avatar-text': {
+          color: '$secondary'
+        }
+      },
+      success: {
+        '.nextui-avatar-text': {
+          color: '$success'
+        }
+      },
+      warning: {
+        '.nextui-avatar-text': {
+          color: '$warning'
+        }
+      },
+      error: {
+        '.nextui-avatar-text': {
+          color: '$error'
+        }
+      }
+    },
+    size: {
+      xs: {
+        $$avatarXs: '$space$9',
+        sizeMin: '$$avatarXs',
+        '&.nextui-avatar-bg': {
+          size: '$$avatarXs'
+        },
+        '.nextui-avatar-text': {
+          fontSize: '$xs'
+        }
+      },
+      sm: {
+        $$avatarSm: '$space$11',
+        sizeMin: '$$avatarSm',
+        '.nextui-avatar-bg': {
+          size: '$$avatarSm'
+        },
+        '.nextui-avatar-text': {
+          fontSize: '$base'
+        }
+      },
+      md: {
+        $$avatarMd: '$space$14',
+        sizeMin: '$$avatarMd',
+        '.nextui-avatar-bg': {
+          size: '$$avatarMd'
+        },
+        '.nextui-avatar-text': {
+          fontSize: '$sm'
+        }
+      },
+      lg: {
+        $$avatarLg: '$space$16',
+        sizeMin: '$$avatarLg',
+        '.nextui-avatar-bg': {
+          size: '$$avatarLg'
+        },
+        '.nextui-avatar-text': {
+          fontSize: '$sm'
+        }
+      },
+      xl: {
+        $$avatarXl: '$space$18',
+        sizeMin: '$$avatarXl',
+        '&.nextui-avatar-bg': {
+          size: '$$avatarXl'
+        },
+        '.nextui-avatar-text': {
+          fontSize: '$md'
+        }
+      }
+    },
+    borderWeight: {
+      light: {
+        '.nextui-avatar-img': {
+          borderWidth: '$light'
+        }
+      },
+      normal: {
+        '.nextui-avatar-img': {
+          borderWidth: '$normal'
+        }
+      },
+      bold: {
+        '.nextui-avatar-img': {
+          borderWidth: '$normal'
+        }
+      },
+      extrabold: {
+        '.nextui-avatar-img': {
+          borderWidth: '$normal'
+        }
+      },
+      black: {
+        '.nextui-avatar-img': {
+          borderWidth: '$normal'
+        }
+      }
+    },
+    bordered: {
+      true: {
+        '&:hover:not(.only-text-avatar) .nextui-avatar-bg': {
+          opacity: '0.6'
+        },
+        '.nextui-avatar-img': {
+          borderStyle: 'solid',
+          borderColor: '$background'
+        }
+      }
+    },
+    stacked: {
+      true: {
+        ml: '-$5'
+      }
+    },
+    pointer: {
+      true: {
+        cursor: 'pointer'
+      }
+    },
+    rounded: {
+      true: {
+        borderRadius: '$rounded',
+        '.nextui-avatar-img': {
+          borderRadius: '$rounded'
+        }
+      }
+    },
+    squared: {
+      true: {
+        borderRadius: '$squared',
+        '.nextui-avatar-img': {
+          borderRadius: '$squared'
+        }
+      }
+    },
+    zoomed: {
+      true: {
+        '&:hover .nextui-avatar-img': {
+          transform: 'scale(1.125)'
+        }
+      }
+    }
+  },
+  compoundVariants: [{
+    bordered: true,
+    borderWeight: 'light',
+    css: {
+      padding: 'calc($1/2)'
+    }
+  }, {
+    bordered: true,
+    borderWeight: 'normal',
+    css: {
+      padding: '$1'
+    }
+  }, {
+    bordered: true,
+    borderWeight: 'bold',
+    css: {
+      padding: 'calc($2/1.5)'
+    }
+  }, {
+    bordered: true,
+    borderWeight: 'extrabold',
+    css: {
+      padding: '$2'
+    }
+  }, {
+    bordered: true,
+    borderWeight: 'black',
+    css: {
+      padding: 'calc($3/1.5)'
+    }
+  }, {
+    rounded: true,
+    squared: true,
+    css: {
+      borderRadius: '$squared',
+      '.nextui-avatar-img': {
+        borderRadius: '$squared'
+      }
+    }
+  }],
+  defaultVariants: {
+    size: 'md',
+    rounded: true,
+    color: 'default',
+    textColor: 'default',
+    borderWeight: 'normal'
+  }
+});
+exports.StyledAvatar = StyledAvatar;
+var _default = StyledAvatar;
+exports.default = _default;

package/esm/avatar/index.d.ts

@@ -0,0 +1,7 @@
+import Avatar from './avatar';
+export type { AvatarProps } from './avatar';
+export type { AvatarGroupProps } from './avatar-group';
+export { StyledAvatar } from './avatar.styles';
+export { StyledAvatarGroup } from './avatar-group.styles';
+export { StyledAvatarGroupCount } from './avatar-group.styles';
+export default Avatar;

package/esm/avatar/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledAvatarGroupCount = exports.StyledAvatarGroup = exports.StyledAvatar = void 0;
+
+var _avatar = _interopRequireDefault(require("./avatar"));
+
+var _avatarGroup = _interopRequireDefault(require("./avatar-group"));
+
+var _avatar2 = require("./avatar.styles");
+
+exports.StyledAvatar = _avatar2.StyledAvatar;
+
+var _avatarGroup2 = require("./avatar-group.styles");
+
+exports.StyledAvatarGroup = _avatarGroup2.StyledAvatarGroup;
+exports.StyledAvatarGroupCount = _avatarGroup2.StyledAvatarGroupCount;
+_avatar.default.Group = _avatarGroup.default;
+var _default = _avatar.default;
+exports.default = _default;

package/esm/backdrop/backdrop.d.ts

@@ -0,0 +1,37 @@
+import React, { MouseEvent } from 'react';
+import { CSS } from '../theme/stitches.config';
+import { BackdropVariantsProps } from './backdrop.styles';
+interface Props {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    onKeyPress?: (event: React.KeyboardEvent | KeyboardEvent) => void;
+    visible?: boolean;
+    preventDefault?: boolean;
+    maxWidth?: string;
+    animated?: boolean;
+    blur?: boolean;
+    opacity?: number;
+    css?: CSS;
+    className?: string;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const defaultProps: {
+    onClick: () => void;
+    visible: boolean;
+    blur: boolean;
+    animated: boolean;
+    preventDefault: boolean;
+    opacity: number;
+    className: string;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type BackdropProps = Props & typeof defaultProps & NativeAttrs & BackdropVariantsProps;
+declare const _default: React.ComponentType<Partial<{
+    onClick: () => void;
+    visible: boolean;
+    blur: boolean;
+    animated: boolean;
+    preventDefault: boolean;
+    opacity: number;
+    className: string;
+}> & Omit<React.PropsWithChildren<BackdropProps>, "blur" | "opacity" | "visible" | "preventDefault" | "className" | "onClick" | "animated">>;
+export default _default;

package/esm/backdrop/backdrop.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _cssTransition = _interopRequireDefault(require("../utils/css-transition"));
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _useKeyboard = _interopRequireWildcard(require("../use-keyboard"));
+
+var _backdrop = require("./backdrop.styles");
+
+var _assertion = require("../utils/assertion");
+
+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; }
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const defaultProps = {
+  onClick: () => {},
+  visible: false,
+  blur: false,
+  animated: true,
+  preventDefault: true,
+  opacity: 0.5,
+  className: ''
+};
+const preClass = 'nextui-backdrop';
+
+const Backdrop = /*#__PURE__*/_react.default.memo(({
+  children,
+  onClick,
+  onKeyPress,
+  visible,
+  maxWidth,
+  blur,
+  animated,
+  opacity,
+  preventDefault,
+  className,
+  css,
+  ...props
+}) => {
+  const [, setIsContentMouseDown, IsContentMouseDownRef] = (0, _useCurrentState.default)(false);
+
+  const clickHandler = event => {
+    if (IsContentMouseDownRef.current) return;
+    onClick && onClick(event);
+  };
+
+  const childrenClickHandler = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+  }, []);
+
+  const mouseUpHandler = () => {
+    if (!IsContentMouseDownRef.current) return;
+    const timer = setTimeout(() => {
+      setIsContentMouseDown(false);
+      clearTimeout(timer);
+    }, 0);
+  };
+
+  const {
+    bindings
+  } = (0, _useKeyboard.default)(ev => {
+    onKeyPress && onKeyPress(ev);
+  }, [_useKeyboard.KeyCode.Escape, _useKeyboard.KeyCode.Space], {
+    disableGlobalEvent: true,
+    preventDefault
+  });
+  const getState = (0, _react.useMemo)(() => {
+    return visible ? 'open' : 'closed';
+  }, [visible]);
+  const renderChildren = (0, _react.useMemo)(() => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_backdrop.StyledBackdrop, {
+      tabIndex: -1,
+      role: "button",
+      "aria-hidden": true,
+      "data-state": getState,
+      onClick: clickHandler,
+      onMouseUp: mouseUpHandler,
+      css: {
+        $$backdropOpacity: opacity,
+        ...css
+      },
+      className: (0, _clsx.default)(preClass, `${preClass}--${getState}`, className),
+      ...bindings,
+      ...props,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_backdrop.StyledBackdropLayer, {
+        className: (0, _clsx.default)(`${preClass}-layer`, blur ? `${preClass}-layer-blur` : `${preClass}-layer-default`),
+        animated: animated,
+        blur: blur
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_backdrop.StyledBackdropContent, {
+        className: `${preClass}-content`,
+        onClick: childrenClickHandler,
+        css: {
+          maxWidth
+        },
+        onMouseDown: () => setIsContentMouseDown(true),
+        children: children
+      })]
+    });
+  }, [children]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: animated ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
+      name: `${preClass}-wrapper`,
+      visible: visible,
+      enterTime: 20,
+      leaveTime: 20,
+      clearTime: 150,
+      children: renderChildren
+    }) : visible ? renderChildren : null
+  });
+});
+
+if (_assertion.__DEV__) {
+  Backdrop.displayName = 'NextUI - Backdrop';
+}
+
+Backdrop.toString = () => '.nextui-backdrop';
+
+var _default = (0, _withDefaults.default)(Backdrop, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;