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

package/cjs/theme/stitches.config.js

@@ -20,16 +20,7 @@ const getStitchesTheme = targetTheme => {
 };
 
 exports.getStitchesTheme = getStitchesTheme;
-const {
-  styled,
-  css,
-  theme,
-  createTheme: createThemeBase,
-  getCssText,
-  globalCss,
-  keyframes,
-  config
-} = (0, _react.createStitches)({ ..._common.default,
+const stitches = (0, _react.createStitches)({ ..._common.default,
   theme: { ..._common.default.theme,
     shadows: { ..._lightTheme.default.shadows
     },
@@ -38,14 +29,22 @@ const {
     }
   }
 });
-exports.config = config;
-exports.keyframes = keyframes;
+const createThemeBase = stitches.createTheme;
+exports.createThemeBase = createThemeBase;
+const styled = stitches.styled;
+exports.styled = styled;
+const css = stitches.css;
+exports.css = css;
+const globalCss = stitches.globalCss;
 exports.globalCss = globalCss;
+const keyframes = stitches.keyframes;
+exports.keyframes = keyframes;
+const getCssText = stitches.getCssText;
 exports.getCssText = getCssText;
-exports.createThemeBase = createThemeBase;
+const theme = stitches.theme;
 exports.theme = theme;
-exports.css = css;
-exports.styled = styled;
+const config = stitches.config;
+exports.config = config;
 const sharedFocus = css({
   WebkitTapHighlightColor: 'transparent',
   '&:focus:not(&:focus-visible)': {
@@ -76,13 +75,14 @@ exports.sharedVisuallyHidden = sharedVisuallyHidden;
 
 const createTheme = ({
   type,
-  theme
+  theme,
+  className
 }) => {
   if (!type) {
     throw new Error('Theme type is required');
   }
 
-  return createThemeBase(`${type}-theme`, (0, _deepMerge.default)(type === 'dark' ? _darkTheme.default : _lightTheme.default, theme));
+  return createThemeBase(className || `${type}-theme`, (0, _deepMerge.default)(type === 'dark' ? _darkTheme.default : _lightTheme.default, theme));
 };
 
 exports.createTheme = createTheme;

package/cjs/theme/theme-provider.js

@@ -17,8 +17,6 @@ var _deepMerge = _interopRequireDefault(require("../utils/deep-merge"));
 
 var _object = require("../utils/object");
 
-var _ssrProvider = require("./ssr-provider");
-
 var _utils = require("./utils");
 
 var _useSsr = _interopRequireDefault(require("../use-ssr"));
@@ -55,10 +53,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,15 +89,19 @@ const ThemeProvider = ({
     });
     return () => observer.disconnect();
   }, []);
-  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]
-    })
+  (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.jsxs)(_themeContext.default.Provider, {
+    value: providerValue,
+    children: [!disableBaseline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssBaseline.default, {}), children]
   });
 };
 

package/cjs/theme/types.d.ts

@@ -65,6 +65,7 @@ export interface TokenValue {
 }
 export declare type Theme = {
     type?: ThemeType | string;
+    className?: string;
     theme?: BaseTheme;
 };
 export declare type NextUIThemeContext = {

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.d.ts

@@ -19,6 +19,7 @@ interface Props {
     leaveDelay?: number;
     offset?: number;
     className?: string;
+    keepMounted?: boolean;
     portalClassName?: string;
     onClick?: () => void;
     onVisibleChange?: TooltipOnVisibleChange;
@@ -31,6 +32,7 @@ declare const defaultProps: {
     animated: boolean;
     shadow: boolean;
     rounded: boolean;
+    keepMounted: boolean;
     trigger: "hover" | "click";
     enterDelay: number;
     leaveDelay: number;
@@ -46,11 +48,12 @@ declare const _default: React.ComponentType<Partial<{
     animated: boolean;
     shadow: boolean;
     rounded: boolean;
+    keepMounted: boolean;
     trigger: "hover" | "click";
     enterDelay: number;
     leaveDelay: number;
     className: string;
     portalClassName: string;
     onVisibleChange: TooltipOnVisibleChange;
-}> & Omit<React.PropsWithChildren<TooltipProps>, "rounded" | "className" | "animated" | "shadow" | "hideArrow" | "initialVisible" | "trigger" | "enterDelay" | "leaveDelay" | "portalClassName" | "onVisibleChange">>;
+}> & Omit<React.PropsWithChildren<TooltipProps>, "rounded" | "className" | "animated" | "shadow" | "hideArrow" | "initialVisible" | "trigger" | "enterDelay" | "leaveDelay" | "keepMounted" | "portalClassName" | "onVisibleChange">>;
 export default _default;

package/cjs/tooltip/tooltip.js

@@ -27,6 +27,7 @@ const defaultProps = {
   animated: true,
   shadow: true,
   rounded: false,
+  keepMounted: false,
   trigger: 'hover',
   enterDelay: 0,
   leaveDelay: 0,
@@ -56,6 +57,7 @@ const Tooltip = ({
   css,
   triggerCss,
   onClick,
+  keepMounted,
   visible: customVisible,
   ...props
 }) => {
@@ -63,9 +65,9 @@ const Tooltip = ({
   const ref = (0, _react.useRef)(null);
   const [visible, setVisible] = (0, _react.useState)(initialVisible);
   const contentProps = {
-    css,
     animated,
     visible,
+    css,
     shadow,
     offset,
     placement,
@@ -108,7 +110,7 @@ const Tooltip = ({
     onClick == null ? void 0 : onClick();
   };
 
-  (0, _useClickAway.default)(ref, () => trigger === 'click' && changeVisible(false));
+  (0, _useClickAway.default)(ref, () => trigger === 'click' && !keepMounted && changeVisible(false));
   (0, _react.useEffect)(() => {
     if (customVisible === undefined) return;
     changeVisible(customVisible);

package/cjs/tooltip/tooltip.styles.d.ts

@@ -835,6 +835,22 @@ export declare const StyledTooltipTrigger: 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 StyledTooltipTrigger: 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 StyledTooltipTrigger: import("@stitches/react/types/styled-
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {
@@ -1725,6 +1758,22 @@ export declare const StyledTooltipArrow: import("@stitches/react/types/styled-co
             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";
     }) => {
@@ -1741,6 +1790,16 @@ export declare const StyledTooltipArrow: import("@stitches/react/types/styled-co
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -1771,6 +1830,13 @@ export declare const StyledTooltipArrow: import("@stitches/react/types/styled-co
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {
@@ -2617,6 +2683,22 @@ export declare const StyledTooltip: import("@stitches/react/types/styled-compone
             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";
     }) => {
@@ -2633,6 +2715,16 @@ export declare const StyledTooltip: import("@stitches/react/types/styled-compone
             readonly [$$PropertyValue]: "width";
         };
     };
+    maxSize: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        maxWidth: {
+            readonly [$$PropertyValue]: "width";
+        };
+        maxHeight: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
     sizeMax: (value: {
         readonly [$$PropertyValue]: "width";
     }) => {
@@ -2663,6 +2755,13 @@ export declare const StyledTooltip: import("@stitches/react/types/styled-compone
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {
@@ -3513,6 +3612,22 @@ export declare const StyledTooltipContent: 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";
     }) => {
@@ -3529,6 +3644,16 @@ export declare const StyledTooltipContent: 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";
     }) => {
@@ -3559,6 +3684,13 @@ export declare const StyledTooltipContent: import("@stitches/react/types/styled-
     }) => {
         backgroundImage: string;
     };
+    tdl: (value: {
+        readonly [$$PropertyValue]: "textDecorationLine";
+    }) => {
+        textDecorationLine: {
+            readonly [$$PropertyValue]: "textDecorationLine";
+        };
+    };
     textGradient: (value: {
         readonly [$$PropertyValue]: "backgroundImage";
     }) => {

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',