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

package/cjs/avatar/avatar-group.styles.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledAvatarGroupCount = exports.StyledAvatarGroup = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+var _avatar = _interopRequireDefault(require("./avatar.styles"));
+
+const StyledAvatarGroupCount = (0, _stitches.styled)('span', {
+  fontSize: '$xs',
+  display: 'inline-flex',
+  alignItems: 'center',
+  marginLeft: '$3',
+  color: '$text'
+});
+exports.StyledAvatarGroupCount = StyledAvatarGroupCount;
+const StyledAvatarGroup = (0, _stitches.styled)('div', {
+  dflex: 'center',
+  height: 'auto',
+  width: 'max-content',
+  '@motion': {
+    transition: 'none'
+  },
+  [`& ${_avatar.default}`]: {
+    marginLeft: '-$space$5',
+    transition: '$default',
+    '.only-text-avatar': {
+      boxShadow: '$xs'
+    }
+  },
+  '.only-text-avatar': {
+    boxShadow: '$xs'
+  },
+  variants: {
+    animated: {
+      true: {
+        [`& ${_avatar.default}:hover`]: {
+          transform: 'translate(-$space$5)'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    animated: true
+  }
+});
+exports.StyledAvatarGroup = StyledAvatarGroup;
+var _default = StyledAvatarGroup;
+exports.default = _default;

package/cjs/avatar/avatar.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import AvatarGroup from './avatar-group';
+import { CSS } from '../theme/stitches.config';
+import { AvatarVariantsProps } from './avatar.styles';
+interface Props {
+    text?: string;
+    src?: string;
+    icon?: React.ReactNode;
+    alt?: string;
+    className?: string;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare type NativeAttrs = Omit<Partial<React.ImgHTMLAttributes<unknown> & React.HTMLAttributes<unknown>>, keyof Props | 'sizes'>;
+export declare type AvatarProps = Props & AvatarVariantsProps & NativeAttrs & {
+    css?: CSS;
+};
+declare type AvatarComponent<P = {}> = React.NamedExoticComponent<P> & {
+    Group: typeof AvatarGroup;
+};
+declare const _default: AvatarComponent<AvatarProps>;
+export default _default;

package/cjs/avatar/avatar.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _avatar = _interopRequireDefault(require("./avatar.styles"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+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 safeText = text => {
+  if ((text == null ? void 0 : text.length) <= 4) return text;
+  return text == null ? void 0 : text.slice(0, 3);
+};
+
+const Avatar = ({
+  src,
+  text,
+  icon,
+  alt,
+  className,
+  ...props
+}) => {
+  const showText = !src;
+  const [ready, setReady] = (0, _react.useState)(false);
+  const imgRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    var _imgRef$current;
+
+    (imgRef == null ? void 0 : (_imgRef$current = imgRef.current) == null ? void 0 : _imgRef$current.complete) && setReady(true);
+  }, []);
+  const getState = (0, _react.useMemo)(() => {
+    return !ready && src ? 'loading' : 'ready';
+  }, [src, ready]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_avatar.default, {
+    className: (0, _clsx.default)({
+      'only-text-avatar': showText
+    }, className),
+    "data-state": getState,
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "nextui-avatar-bg"
+    }), !showText && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      ref: imgRef,
+      className: (0, _clsx.default)('nextui-avatar-img', `nextui-avatar--${getState}`, {
+        'nextui-avatar-ready': ready
+      }),
+      src: src,
+      alt: alt,
+      "data-state": getState,
+      onLoad: () => setReady(true)
+    }), showText && !icon && text && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "nextui-avatar-text",
+      children: safeText(text)
+    }), icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "nextui-avatar-icon",
+      children: icon
+    })]
+  });
+};
+
+Avatar.toString = () => '.nextui-avatar';
+
+var _default = Avatar;
+exports.default = _default;
+module.exports = exports.default;