@nextui-org/react 1.0.2-alpha.1 → 1.0.2-beta.3

package/README.md

@@ -1,13 +1,13 @@
 <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" />
+      <img width="20%" src="https://raw.githubusercontent.com/nextui-org/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">
+    <img src="https://img.shields.io/apm/l/atomic-design-ui.svg?style=flat" alt="License">
   </a>
   <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">
@@ -20,6 +20,12 @@
   </a>
 </p>
 
+<p align="center">
+  <a rel="noopener noreferrer" target="_blank" href="https://www.vercel.com?utm_source=nextui&utm_marketing=oss">
+    <img height="34px" src="https://raw.githubusercontent.com/nextui-org/nextui/main/apps/docs/public/powered-by-vercel.svg" alt="Powered by vercel">
+  </a>
+</p>
+
 ## Getting Started
 
 Visit <a aria-label="nextui learn" href="https://nextui.org/learn">https://nextui.org/guide</a> to get started with NextUI.
@@ -43,11 +49,10 @@ npm i @nextui-org/react
 Go to the root of your application and do this:
 
 ```jsx
-import { CssBaseline, NextUIProvider } from '@nextui-org/react';
+import { NextUIProvider } from '@nextui-org/react';
 
 const Application = () => (
   <NextUIProvider>
-    <CssBaseline /> // ---> Normalize styles
     <AppComponent /> // ---> Your App Component
   </NextUIProvider>
 );
@@ -71,6 +76,15 @@ import Button from '@nextui-org/react/button';
 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!

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

@@ -835,6 +835,22 @@ export declare const StyledAvatarGroupCount: import("@stitches/react/types/style
             readonly [$$PropertyValue]: "width";
         };
     };
+    minSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        minWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        minHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMin: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -851,6 +867,16 @@ export declare const StyledAvatarGroupCount: import("@stitches/react/types/style
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -881,6 +907,13 @@ export declare const StyledAvatarGroupCount: import("@stitches/react/types/style
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {
@@ -1727,6 +1760,22 @@ export declare const StyledAvatarGroup: import("@stitches/react/types/styled-com
             readonly [$$PropertyValue]: "width";
         };
     };
+    minSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        minWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        minHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMin: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -1743,6 +1792,16 @@ export declare const StyledAvatarGroup: import("@stitches/react/types/styled-com
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -1773,6 +1832,13 @@ export declare const StyledAvatarGroup: import("@stitches/react/types/styled-com
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {

package/cjs/avatar/avatar.styles.d.ts

@@ -846,6 +846,22 @@ export declare const StyledAvatar: import("@stitches/react/types/styled-componen
             readonly [$$PropertyValue]: "width";
         };
     };
+    minSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        minWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        minHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMin: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -862,6 +878,16 @@ export declare const StyledAvatar: import("@stitches/react/types/styled-componen
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -892,6 +918,13 @@ export declare const StyledAvatar: import("@stitches/react/types/styled-componen
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {

package/cjs/backdrop/backdrop.d.ts

@@ -33,5 +33,5 @@ declare const _default: React.ComponentType<Partial<{
     preventDefault: boolean;
     opacity: number;
     className: string;
-}> & Omit<React.PropsWithChildren<BackdropProps>, "blur" | "opacity" | "visible" | "preventDefault" | "className" | "onClick" | "animated">>;
+}> & Omit<React.PropsWithChildren<BackdropProps>, "blur" | "opacity" | "visible" | "className" | "preventDefault" | "onClick" | "animated">>;
 export default _default;

package/cjs/backdrop/backdrop.styles.d.ts

@@ -835,6 +835,22 @@ export declare const StyledBackdropContent: import("@stitches/react/types/styled
             readonly [$$PropertyValue]: "width";
         };
     };
+    minSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        minWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        minHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMin: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -851,6 +867,16 @@ export declare const StyledBackdropContent: import("@stitches/react/types/styled
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -881,6 +907,13 @@ export declare const StyledBackdropContent: import("@stitches/react/types/styled
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {
@@ -1728,6 +1761,22 @@ export declare const StyledBackdropLayer: import("@stitches/react/types/styled-c
             readonly [$$PropertyValue]: "width";
         };
     };
+    minSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        minWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        minHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMin: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -1744,6 +1793,16 @@ export declare const StyledBackdropLayer: import("@stitches/react/types/styled-c
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -1774,6 +1833,13 @@ export declare const StyledBackdropLayer: import("@stitches/react/types/styled-c
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {
@@ -2620,6 +2686,22 @@ export declare const StyledBackdrop: import("@stitches/react/types/styled-compon
             readonly [$$PropertyValue]: "width";
         };
     };
+    minSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        minWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        minHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMin: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -2636,6 +2718,16 @@ export declare const StyledBackdrop: import("@stitches/react/types/styled-compon
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -2666,6 +2758,13 @@ export declare const StyledBackdrop: import("@stitches/react/types/styled-compon
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {

package/cjs/button/button-group.styles.d.ts

@@ -841,6 +841,22 @@ export declare const StyledButtonGroup: import("@stitches/react/types/styled-com
             readonly [$$PropertyValue]: "width";
         };
     };
+    minSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        minWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        minHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMin: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -857,6 +873,16 @@ export declare const StyledButtonGroup: import("@stitches/react/types/styled-com
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -887,6 +913,13 @@ export declare const StyledButtonGroup: import("@stitches/react/types/styled-com
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {

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

@@ -847,6 +847,22 @@ export declare const StyledButtonIcon: import("@stitches/react/types/styled-comp
             readonly [$$PropertyValue]: "width";
         };
     };
+    minSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        minWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        minHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMin: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -863,6 +879,16 @@ export declare const StyledButtonIcon: import("@stitches/react/types/styled-comp
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -893,6 +919,13 @@ export declare const StyledButtonIcon: import("@stitches/react/types/styled-comp
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {

package/cjs/button/button.styles.d.ts

@@ -5,7 +5,6 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
     color?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     borderWeight?: "light" | "normal" | "bold" | "extrabold" | "black" | undefined;
-    rounded?: boolean | "true" | undefined;
     flat?: boolean | "true" | undefined;
     light?: boolean | "true" | undefined;
     shadow?: boolean | "true" | undefined;
@@ -13,6 +12,7 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
     clickable?: boolean | "false" | undefined;
     animated?: boolean | "true" | "false" | undefined;
     auto?: boolean | "true" | undefined;
+    rounded?: boolean | "true" | undefined;
 }, {
     xs: string;
     sm: string;
@@ -849,6 +849,22 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
             readonly [$$PropertyValue]: "width";
         };
     };
+    minSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        minWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        minHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMin: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -865,6 +881,16 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -895,6 +921,13 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {

package/cjs/button/button.styles.js

@@ -162,11 +162,6 @@ const StyledButton = (0, _stitches.styled)('button', {
         bw: '$black'
       }
     },
-    rounded: {
-      true: {
-        br: '$pill'
-      }
-    },
     flat: {
       true: {
         color: '$text'
@@ -220,6 +215,11 @@ const StyledButton = (0, _stitches.styled)('button', {
         width: 'auto',
         minWidth: 'min-content'
       }
+    },
+    rounded: {
+      true: {
+        br: '$pill'
+      }
     }
   },
   compoundVariants: [// size / auto
@@ -682,6 +682,37 @@ const StyledButton = (0, _stitches.styled)('button', {
         px: '$12'
       }
     }
+  }, // rounded && size
+  {
+    rounded: true,
+    size: 'xs',
+    css: {
+      br: '$pill'
+    }
+  }, {
+    rounded: true,
+    size: 'sm',
+    css: {
+      br: '$pill'
+    }
+  }, {
+    rounded: true,
+    size: 'md',
+    css: {
+      br: '$pill'
+    }
+  }, {
+    rounded: true,
+    size: 'lg',
+    css: {
+      br: '$pill'
+    }
+  }, {
+    rounded: true,
+    size: 'xl',
+    css: {
+      br: '$pill'
+    }
   }],
   defaultVariants: {
     color: 'default',