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

package/README.md

@@ -1,70 +1,85 @@
 <p align="center">
   <a href="https://nextui.org">
-      <img width="20%" src="https://raw.githubusercontent.com/jrgarciadev/nextui/main/packages/docs/public/isotipo.png" alt="nextui" />
-      <h1 align="center">Nextui</h1>
+      <img width="20%" src="https://raw.githubusercontent.com/jrgarciadev/nextui/main/apps/docs/public/isotipo.png" alt="nextui" />
+      <h1 align="center">NextUI</h1>
+  </a>
+</p>
+</br>
+<p align="center">
+  <a href="https://github.com/jrgarciadev/nextui/blob/main/LICENSE">
+    <img src="https://img.shields.io/apm/l/atomic-design-ui.svg?" alt="License">
   </a>
-  </p>
-  </br>
-  <p align="center">
   <a href="https://codecov.io/gh/jrgarciadev/nextui">
     <img src="https://codecov.io/gh/jrgarciadev/nextui/branch/main/graph/badge.svg?token=QJF2QKR5N4" alt="codecov badge">
   </a>
-  <a href="https://www.travis-ci.com/jrgarciadev/nextui">
-    <img src="https://www.travis-ci.com/jrgarciadev/nextui.svg?branch=main" alt="travis ci nextui">
+  <a href="https://github.com/nextui-org/nextui/actions/workflows/main.yaml">
+    <img src="https://github.com/nextui-org/nextui/actions/workflows/main.yaml/badge.svg" alt="CI/CD nextui">
   </a>
-  <a href="https://github.com/jrgarciadev/nextui/blob/main/LICENSE">
-    <img src="https://img.shields.io/apm/l/atomic-design-ui.svg?" alt="License">
+  <a href="https://www.npmjs.com/package/@nextui-org/react">
+    <img src="https://img.shields.io/npm/dm/@nextui-org/react.svg?style=flat-round" alt="npm downloads">
   </a>
 </p>
 
-## Browser support
+## Getting Started
 
-Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE11+
+Visit <a aria-label="nextui learn" href="https://nextui.org/learn">https://nextui.org/guide</a> to get started with NextUI.
 
-## Supporting through Patreon
+## Documentation
 
-Any additional information goes here
+Visit [https://nextui.org/docs](https://nextui.org/docs) to view the full documentation.
 
-## Introduction
+## Quick Start
 
-A brief description of what this project does and who it's for
+1. Installation: Inside your React project directory, install NextUI by running either of the following:
 
-## Support
+```bash
+yarn add @nextui-org/react
+# or
+npm i @nextui-org/react
+```
 
-If you feel awesome and want to support us in a small way, please consider starring and sharing the repo! This helps us getting known and grow the community. 🙏
+2. Setup: For NextUI to work correctly, you need to set up the CssBaseline at the root of your application.
 
-## Installation
+Go to the root of your application and do this:
 
-Install my-project with npm
+```jsx
+import { CssBaseline, NextUIProvider } from '@nextui-org/react';
 
-```bash
-  npm install my-project
-  cd my-project
+const Application = () => (
+  <NextUIProvider>
+    <CssBaseline /> // ---> Normalize styles
+    <AppComponent /> // ---> Your App Component
+  </NextUIProvider>
+);
 ```
 
-## Components
+3. Using NextUI components: Once NextUI is installed you can use any of the components as follows.
+   NextUI uses tree-shaking so the unused modules will not be included in the bundle during the build process and
+   each component is exported separately.
 
-You can also view all developed components in [Storybook](https://linktodocumentation)
+```jsx
+import { Button } from '@nextui-org/react';
 
-- [Component 1](https://linktodocumentation)
-- [Component 2](https://linktodocumentation)
-- [Component 3](https://linktodocumentation)
-- [Component 4](https://linktodocumentation)
-- [Component 5](https://linktodocumentation)
-- [Component 6](https://linktodocumentation)
-- [Component 7](https://linktodocumentation)
-- [Component 8](https://linktodocumentation)
+const Component = () => <Button>Click me</Button>;
+```
 
-## Usage/Examples
+4. NextUI allows to manually import components if you need. E.g.
 
-```javascript
-import Component from 'my-project';
+```jsx
+import Button from '@nextui-org/react/button';
 
-function App() {
-  return <Component />;
-}
+const Component = () => <Button>Click me</Button>;
 ```
 
+### Communnity
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+- [Discord](https://discord.gg/9b6yyZKmH4)
+- [Twitter](https://twitter.com/getnextui)
+- [GitHub Discussions](https://github.com/nextui-org/nextui/discussions)
+
 ## Contributing
 
 Contributions are always welcome!
@@ -73,13 +88,6 @@ See `CONTRIBUTING.md` for ways to get started.
 
 Please adhere to this project's `CODE_OF_CONDUCT`.
 
-## Related
-
-Here are some related projects
-
-- [Vuesax](https://github.com/matiassingers/awesome-readme)
-- [Geist UI](https://github.com/matiassingers/awesome-readme)
-
 ## License
 
 [MIT](https://choosealicense.com/licenses/mit/)

package/avatar/package.json

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

package/backdrop/package.json

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

package/button/package.json

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

package/card/package.json

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

package/checkbox/package.json

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { AvatarGroupVariants } from './avatar-group.styles';
+interface Props {
+    count?: number;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type AvatarGroupProps = Props & NativeAttrs & AvatarGroupVariants & {
+    css?: CSS;
+};
+declare const AvatarGroup: React.FC<React.PropsWithChildren<AvatarGroupProps>>;
+export default AvatarGroup;

package/cjs/avatar/avatar-group.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _avatarGroup = _interopRequireWildcard(require("./avatar-group.styles"));
+
+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 AvatarGroup = ({
+  count,
+  children,
+  ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_avatarGroup.default, { ...props,
+    children: [children, count && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_avatarGroup.StyledAvatarGroupCount, {
+      className: "nextui-avatar-group-count",
+      children: ["+", count]
+    })]
+  });
+};
+
+AvatarGroup.toString = () => '.nextui-avatar-group';
+
+var _default = AvatarGroup;
+exports.default = _default;
+module.exports = exports.default;