@nextui-org/react 1.0.2-alpha.1 → 1.0.2-alpha.2

package/README.md

@@ -1,6 +1,6 @@
 <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/jrgarciadev/nextui/main/apps/docs/public/isotipo.png" alt="nextui" />
       <h1 align="center">NextUI</h1>
   </a>
 </p>
@@ -71,6 +71,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/theme/theme-provider.js

@@ -55,10 +55,11 @@ const ThemeProvider = ({
   const providerValue = (0, _react.useMemo)(() => {
     const themeTokens = isBrowser ? (0, _utils.getDocumentCSSTokens)() : {};
     const theme = (0, _deepMerge.default)((0, _object.copyObject)(_themeContext.defaultContext.theme), themeTokens);
+    const themeName = (0, _utils.getThemeName)(currentTheme);
     return {
       theme,
-      type: currentTheme,
-      isDark: currentTheme === 'dark'
+      type: themeName,
+      isDark: themeName === 'dark'
     };
   }, [currentTheme, isBrowser]);
   (0, _react.useEffect)(() => {
@@ -90,14 +91,20 @@ const ThemeProvider = ({
     });
     return () => observer.disconnect();
   }, []);
+  (0, _react.useEffect)(() => {
+    if (!isBrowser || !userTheme) {
+      return;
+    }
+
+    if (userTheme != null && userTheme.className) {
+      (0, _utils.changeTheme)(userTheme.className);
+      changeCurrentTheme((0, _utils.getThemeName)(userTheme.className));
+    }
+  }, [isBrowser, userTheme]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ssrProvider.SsrProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_themeContext.default.Provider, {
       value: providerValue,
-      children: [!disableBaseline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssBaseline.default, {}), userTheme ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        id: "__nextui",
-        className: userTheme,
-        children: children
-      }) : children]
+      children: [!disableBaseline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssBaseline.default, {}), children]
     })
   });
 };

package/cjs/theme/utils.d.ts

@@ -12,4 +12,5 @@ export declare const getDocumentCSSTokens: () => {
  * Returns active theme according to the given document
  */
 export declare const getDocumentTheme: (el: HTMLElement) => string;
+export declare const getThemeName: (theme: ThemeType | string) => string;
 export declare const changeTheme: (theme: ThemeType | string) => void;

package/cjs/theme/utils.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.getTokenValue = exports.getDocumentTheme = exports.getDocumentCSSTokens = exports.changeTheme = void 0;
+exports.getTokenValue = exports.getThemeName = exports.getDocumentTheme = exports.getDocumentCSSTokens = exports.changeTheme = void 0;
 
 var _common = _interopRequireDefault(require("./common"));
 
@@ -89,6 +89,16 @@ const getDocumentTheme = el => {
 
 exports.getDocumentTheme = getDocumentTheme;
 
+const getThemeName = theme => {
+  if (typeof theme === 'string') {
+    return theme != null && theme.includes('-theme') ? theme == null ? void 0 : theme.replace('-theme', '') : theme;
+  }
+
+  return theme;
+};
+
+exports.getThemeName = getThemeName;
+
 const changeTheme = theme => {
   var _el$getAttribute2, _el$getAttribute3;
 
@@ -96,7 +106,7 @@ const changeTheme = theme => {
   const el = document.documentElement;
   const prevClasses = (el == null ? void 0 : (_el$getAttribute2 = el.getAttribute('class')) == null ? void 0 : _el$getAttribute2.split(' ').filter(cls => !cls.includes('theme') && !cls.includes('light') && !cls.includes('dark'))) || [];
   const prevStyles = (el == null ? void 0 : (_el$getAttribute3 = el.getAttribute('style')) == null ? void 0 : _el$getAttribute3.split(';').filter(stl => !stl.includes('color-scheme')).map(el => `${el};`)) || [];
-  el == null ? void 0 : el.setAttribute('class', (0, _clsx.default)(prevClasses, `${theme}-theme`));
+  el == null ? void 0 : el.setAttribute('class', (0, _clsx.default)(prevClasses, `${getThemeName(theme)}-theme`));
   el == null ? void 0 : el.setAttribute('style', (0, _clsx.default)(prevStyles, `color-scheme: ${theme};`));
 };
 

package/cjs/tooltip/tooltip.styles.js

@@ -73,6 +73,7 @@ const StyledTooltipContent = (0, _stitches.styled)('div', {
       },
       invert: {
         $$tooltipColor: '$colors$foreground',
+        $$tooltipTextColor: '$colors$background',
         bg: '$$tooltipColor'
       }
     },
@@ -121,14 +122,7 @@ const StyledTooltipContent = (0, _stitches.styled)('div', {
       }
     }
   },
-  compoundVariants: [// color='invert' && contentColor='default'
-  {
-    color: 'invert',
-    contentColor: 'default',
-    css: {
-      $$tooltipTextColor: '$colors$white'
-    }
-  }, // color='primary' && contentColor='default'
+  compoundVariants: [// color='primary' && contentColor='default'
   {
     color: 'primary',
     contentColor: 'default',

package/esm/theme/theme-provider.js

@@ -55,10 +55,11 @@ const ThemeProvider = ({
   const providerValue = (0, _react.useMemo)(() => {
     const themeTokens = isBrowser ? (0, _utils.getDocumentCSSTokens)() : {};
     const theme = (0, _deepMerge.default)((0, _object.copyObject)(_themeContext.defaultContext.theme), themeTokens);
+    const themeName = (0, _utils.getThemeName)(currentTheme);
     return {
       theme,
-      type: currentTheme,
-      isDark: currentTheme === 'dark'
+      type: themeName,
+      isDark: themeName === 'dark'
     };
   }, [currentTheme, isBrowser]);
   (0, _react.useEffect)(() => {
@@ -90,14 +91,20 @@ const ThemeProvider = ({
     });
     return () => observer.disconnect();
   }, []);
+  (0, _react.useEffect)(() => {
+    if (!isBrowser || !userTheme) {
+      return;
+    }
+
+    if (userTheme != null && userTheme.className) {
+      (0, _utils.changeTheme)(userTheme.className);
+      changeCurrentTheme((0, _utils.getThemeName)(userTheme.className));
+    }
+  }, [isBrowser, userTheme]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ssrProvider.SsrProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_themeContext.default.Provider, {
       value: providerValue,
-      children: [!disableBaseline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssBaseline.default, {}), userTheme ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        id: "__nextui",
-        className: userTheme,
-        children: children
-      }) : children]
+      children: [!disableBaseline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssBaseline.default, {}), children]
     })
   });
 };

package/esm/theme/utils.d.ts

@@ -12,4 +12,5 @@ export declare const getDocumentCSSTokens: () => {
  * Returns active theme according to the given document
  */
 export declare const getDocumentTheme: (el: HTMLElement) => string;
+export declare const getThemeName: (theme: ThemeType | string) => string;
 export declare const changeTheme: (theme: ThemeType | string) => void;

package/esm/theme/utils.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.getTokenValue = exports.getDocumentTheme = exports.getDocumentCSSTokens = exports.changeTheme = void 0;
+exports.getTokenValue = exports.getThemeName = exports.getDocumentTheme = exports.getDocumentCSSTokens = exports.changeTheme = void 0;
 
 var _common = _interopRequireDefault(require("./common"));
 
@@ -89,6 +89,16 @@ const getDocumentTheme = el => {
 
 exports.getDocumentTheme = getDocumentTheme;
 
+const getThemeName = theme => {
+  if (typeof theme === 'string') {
+    return theme != null && theme.includes('-theme') ? theme == null ? void 0 : theme.replace('-theme', '') : theme;
+  }
+
+  return theme;
+};
+
+exports.getThemeName = getThemeName;
+
 const changeTheme = theme => {
   var _el$getAttribute2, _el$getAttribute3;
 
@@ -96,7 +106,7 @@ const changeTheme = theme => {
   const el = document.documentElement;
   const prevClasses = (el == null ? void 0 : (_el$getAttribute2 = el.getAttribute('class')) == null ? void 0 : _el$getAttribute2.split(' ').filter(cls => !cls.includes('theme') && !cls.includes('light') && !cls.includes('dark'))) || [];
   const prevStyles = (el == null ? void 0 : (_el$getAttribute3 = el.getAttribute('style')) == null ? void 0 : _el$getAttribute3.split(';').filter(stl => !stl.includes('color-scheme')).map(el => `${el};`)) || [];
-  el == null ? void 0 : el.setAttribute('class', (0, _clsx.default)(prevClasses, `${theme}-theme`));
+  el == null ? void 0 : el.setAttribute('class', (0, _clsx.default)(prevClasses, `${getThemeName(theme)}-theme`));
   el == null ? void 0 : el.setAttribute('style', (0, _clsx.default)(prevStyles, `color-scheme: ${theme};`));
 };
 

package/esm/tooltip/tooltip.styles.js

@@ -73,6 +73,7 @@ const StyledTooltipContent = (0, _stitches.styled)('div', {
       },
       invert: {
         $$tooltipColor: '$colors$foreground',
+        $$tooltipTextColor: '$colors$background',
         bg: '$$tooltipColor'
       }
     },
@@ -121,14 +122,7 @@ const StyledTooltipContent = (0, _stitches.styled)('div', {
       }
     }
   },
-  compoundVariants: [// color='invert' && contentColor='default'
-  {
-    color: 'invert',
-    contentColor: 'default',
-    css: {
-      $$tooltipTextColor: '$colors$white'
-    }
-  }, // color='primary' && contentColor='default'
+  compoundVariants: [// color='primary' && contentColor='default'
   {
     color: 'primary',
     contentColor: 'default',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "1.0.2-alpha.1",
+  "version": "1.0.2-alpha.2",
   "license": "MIT",
   "description": "🚀 Beautiful and modern React UI library.",
   "homepage": "https://nextui.org",