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

package/cjs/theme/stitches.config.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.theme = exports.styled = exports.sharedVisuallyHidden = exports.sharedFocus = exports.keyframes = exports.globalCss = exports.getStitchesTheme = exports.getCssText = exports.css = exports.createThemeBase = exports.createTheme = exports.config = void 0;
+
+var _react = require("@stitches/react");
+
+var _common = _interopRequireDefault(require("./common"));
+
+var _lightTheme = _interopRequireDefault(require("./light-theme"));
+
+var _darkTheme = _interopRequireDefault(require("./dark-theme"));
+
+var _deepMerge = _interopRequireDefault(require("../utils/deep-merge"));
+
+const getStitchesTheme = targetTheme => {
+  return (0, _deepMerge.default)(targetTheme, _common.default.theme);
+};
+
+exports.getStitchesTheme = getStitchesTheme;
+const {
+  styled,
+  css,
+  theme,
+  createTheme: createThemeBase,
+  getCssText,
+  globalCss,
+  keyframes,
+  config
+} = (0, _react.createStitches)({ ..._common.default,
+  theme: { ..._common.default.theme,
+    shadows: { ..._lightTheme.default.shadows
+    },
+    colors: { ..._common.default.theme.colors,
+      ..._lightTheme.default.colors
+    }
+  }
+});
+exports.config = config;
+exports.keyframes = keyframes;
+exports.globalCss = globalCss;
+exports.getCssText = getCssText;
+exports.createThemeBase = createThemeBase;
+exports.theme = theme;
+exports.css = css;
+exports.styled = styled;
+const sharedFocus = css({
+  WebkitTapHighlightColor: 'transparent',
+  '&:focus:not(&:focus-visible)': {
+    boxShadow: 'none'
+  },
+  '&:focus': {
+    outline: 'none',
+    boxShadow: '0 0 0 2px $colors$background, 0 0 0 4px $colors$primary'
+  },
+  '@safari': {
+    WebkitTapHighlightColor: 'transparent',
+    outline: 'none'
+  }
+});
+exports.sharedFocus = sharedFocus;
+const sharedVisuallyHidden = css({
+  border: '0px',
+  clip: 'rect(0px, 0px, 0px, 0px)',
+  height: '1px',
+  width: '1px',
+  margin: '-1px',
+  padding: '0px',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute'
+});
+exports.sharedVisuallyHidden = sharedVisuallyHidden;
+
+const createTheme = ({
+  type,
+  theme
+}) => {
+  if (!type) {
+    throw new Error('Theme type is required');
+  }
+
+  return createThemeBase(`${type}-theme`, (0, _deepMerge.default)(type === 'dark' ? _darkTheme.default : _lightTheme.default, theme));
+};
+
+exports.createTheme = createTheme;

package/cjs/theme/theme-context.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NextUIThemeContext } from './types';
+export declare const defaultContext: NextUIThemeContext;
+declare const ThemeContext: React.Context<NextUIThemeContext>;
+export default ThemeContext;

package/cjs/theme/theme-context.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.defaultContext = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _stitches = require("./stitches.config");
+
+const defaultContext = {
+  isDark: false,
+  theme: _stitches.theme,
+  type: 'light'
+};
+exports.defaultContext = defaultContext;
+
+const ThemeContext = /*#__PURE__*/_react.default.createContext(defaultContext);
+
+var _default = ThemeContext;
+exports.default = _default;

package/cjs/theme/theme-provider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CreateTheme } from './types';
+export interface Props {
+    theme?: CreateTheme;
+    disableBaseline?: boolean;
+}
+declare const defaultProps: {
+    disableBaseline: boolean;
+};
+export declare type ThemeProviderProps = Props & typeof defaultProps;
+declare const _default: React.ComponentType<Partial<{
+    disableBaseline: boolean;
+}> & Omit<React.PropsWithChildren<ThemeProviderProps>, "disableBaseline">>;
+export default _default;

package/cjs/theme/theme-provider.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _cssBaseline = _interopRequireDefault(require("../css-baseline"));
+
+var _themeContext = _interopRequireWildcard(require("./theme-context"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+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"));
+
+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 defaultProps = {
+  disableBaseline: false
+};
+
+const ThemeProvider = ({
+  theme: userTheme,
+  disableBaseline,
+  children
+}) => {
+  const {
+    isBrowser
+  } = (0, _useSsr.default)();
+  const [currentTheme, setCurrentTheme] = (0, _react.useState)(_themeContext.defaultContext.type);
+
+  const changeCurrentTheme = type => {
+    setCurrentTheme(ct => ct !== type ? type : ct);
+  };
+
+  const changeTypeBaseEl = el => {
+    const themeValue = (0, _utils.getDocumentTheme)(el);
+    themeValue && changeCurrentTheme(themeValue);
+  };
+
+  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: themeName,
+      isDark: themeName === 'dark'
+    };
+  }, [currentTheme, isBrowser]);
+  (0, _react.useEffect)(() => {
+    var _document, _document4, _document5;
+
+    // initial set
+    changeTypeBaseEl((_document = document) == null ? void 0 : _document.documentElement);
+    const observer = new MutationObserver(mutation => {
+      var _mutation$;
+
+      if (mutation && mutation.length > 0 && ((_mutation$ = mutation[0]) == null ? void 0 : _mutation$.target.nodeName) === 'BODY') {
+        var _document2, _document2$body, _document2$body$datas;
+
+        const documentTheme = (_document2 = document) == null ? void 0 : (_document2$body = _document2.body) == null ? void 0 : (_document2$body$datas = _document2$body.dataset) == null ? void 0 : _document2$body$datas.theme;
+        documentTheme && changeCurrentTheme(documentTheme);
+      } else {
+        var _document3;
+
+        changeTypeBaseEl((_document3 = document) == null ? void 0 : _document3.documentElement);
+      }
+    });
+    observer.observe((_document4 = document) == null ? void 0 : _document4.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme', 'style']
+    });
+    observer.observe((_document5 = document) == null ? void 0 : _document5.body, {
+      attributes: true,
+      attributeFilter: ['data-theme', 'style']
+    });
+    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, {}), children]
+    })
+  });
+};
+
+var _default = (0, _withDefaults.default)(ThemeProvider, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/cjs/theme/types.d.ts

@@ -0,0 +1,75 @@
+import { StitchesTheme, createThemeBase } from './stitches.config';
+import commonTheme from './common';
+/** Configuration Interface */
+declare namespace ConfigType {
+    /** Theme interface. */
+    type Theme<T = {}> = {
+        borderStyles?: {
+            [token in number | string]: boolean | number | string;
+        };
+        borderWidths?: {
+            [token in number | string]: boolean | number | string;
+        };
+        colors?: {
+            [token in number | string]: boolean | number | string;
+        };
+        fonts?: {
+            [token in number | string]: boolean | number | string;
+        };
+        fontSizes?: {
+            [token in number | string]: boolean | number | string;
+        };
+        fontWeights?: {
+            [token in number | string]: boolean | number | string;
+        };
+        letterSpacings?: {
+            [token in number | string]: boolean | number | string;
+        };
+        lineHeights?: {
+            [token in number | string]: boolean | number | string;
+        };
+        radii?: {
+            [token in number | string]: boolean | number | string;
+        };
+        shadows?: {
+            [token in number | string]: boolean | number | string;
+        };
+        sizes?: {
+            [token in number | string]: boolean | number | string;
+        };
+        space?: {
+            [token in number | string]: boolean | number | string;
+        };
+        transitions?: {
+            [token in number | string]: boolean | number | string;
+        };
+        zIndices?: {
+            [token in number | string]: boolean | number | string;
+        };
+    } & {
+        [Scale in keyof T]: {
+            [Token in keyof T[Scale]]: T[Scale][Token] extends boolean | number | string ? T[Scale][Token] : boolean | number | string;
+        };
+    };
+}
+export declare type BaseTheme = ConfigType.Theme;
+export declare type NextUITheme = StitchesTheme;
+export declare type ThemeType = 'dark' | 'light';
+export declare type CreateTheme = ReturnType<typeof createThemeBase>;
+export declare type TokenKeyName = keyof typeof commonTheme['theme'];
+export interface TokenValue {
+    token: number | string;
+    value: number | string;
+    scale: string;
+    prefix: string;
+}
+export declare type Theme = {
+    type?: ThemeType | string;
+    theme?: BaseTheme;
+};
+export declare type NextUIThemeContext = {
+    type: ThemeType | string;
+    theme?: NextUITheme;
+    isDark?: boolean;
+};
+export {};

package/cjs/theme/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/cjs/theme/utils.d.ts

@@ -0,0 +1,16 @@
+import { ThemeType, TokenValue, TokenKeyName } from './types';
+export declare const getTokenValue: (token: TokenKeyName, tokenName: string) => string;
+export declare const getDocumentCSSTokens: () => {
+    colors: {
+        [x: string]: TokenValue | undefined;
+    };
+    shadows: {
+        [x: string]: TokenValue | undefined;
+    };
+};
+/**
+ * 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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.getTokenValue = exports.getThemeName = exports.getDocumentTheme = exports.getDocumentCSSTokens = exports.changeTheme = void 0;
+
+var _common = _interopRequireDefault(require("./common"));
+
+var _lightTheme = _interopRequireDefault(require("./light-theme"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+const getTokenValue = (token, tokenName) => {
+  if (!document || !token) return '';
+  let docStyle = getComputedStyle(document.documentElement);
+  const tokenKey = `--${_common.default.prefix}-${token}-${tokenName}`;
+  const tokenValue = docStyle.getPropertyValue(tokenKey);
+
+  if (tokenValue && tokenValue.includes('var')) {
+    getTokenValue(token, tokenValue);
+  }
+
+  return tokenValue;
+};
+
+exports.getTokenValue = getTokenValue;
+
+const getDocumentCSSTokens = () => {
+  const colorKeys = [...Object.keys(_common.default.theme.colors), ...Object.keys(_lightTheme.default.colors)];
+  const shadowKeys = Object.keys(_lightTheme.default.shadows);
+  /**
+   * accents1: {
+   *    prefix: "nextui"
+   *    scale: "colors"
+   *    token: "accents1"
+   *    value: "var(--nextui-colors-gray100)"
+   * }
+   */
+
+  const colorTokens = colorKeys.reduce((acc, crr) => {
+    const color = getTokenValue('colors', crr);
+
+    if (color) {
+      acc[crr] = {
+        prefix: _common.default.prefix,
+        scale: 'colors',
+        token: crr,
+        value: color
+      };
+    }
+
+    return acc;
+  }, {});
+  const shadowTokens = shadowKeys.reduce((acc, crr) => {
+    const shadow = getTokenValue('shadows', crr);
+
+    if (shadow) {
+      acc[crr] = {
+        prefix: _common.default.prefix,
+        scale: 'shadows',
+        token: crr,
+        value: shadow
+      };
+    }
+
+    return acc;
+  }, {});
+  return {
+    colors: colorTokens,
+    shadows: shadowTokens
+  };
+};
+/**
+ * Returns active theme according to the given document
+ */
+
+
+exports.getDocumentCSSTokens = getDocumentCSSTokens;
+
+const getDocumentTheme = el => {
+  var _el$getAttribute;
+
+  const styleAttrValues = (el == null ? void 0 : (_el$getAttribute = el.getAttribute('style')) == null ? void 0 : _el$getAttribute.split(';').map(el => el.trim()).filter(el => el.includes('color-scheme'))) || [];
+  const colorScheme = styleAttrValues.length > 0 ? styleAttrValues[0].replace('color-scheme: ', '').replace(';', '') : '';
+  const documentTheme = el == null ? void 0 : el.getAttribute('data-theme');
+  return documentTheme || colorScheme;
+};
+
+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;
+
+  if (!document) return;
+  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, `${getThemeName(theme)}-theme`));
+  el == null ? void 0 : el.setAttribute('style', (0, _clsx.default)(prevStyles, `color-scheme: ${theme};`));
+};
+
+exports.changeTheme = changeTheme;

package/cjs/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+import Tooltip from './tooltip';
+export type { TooltipProps } from './tooltip';
+export type { TooltipContentProps } from './tooltip-content';
+export { StyledTooltipTrigger, StyledTooltipArrow, StyledTooltipContent, StyledTooltip } from './tooltip.styles';
+export type { TooltipTriggerVariantsProps, TooltipContentVariantsProps } from './tooltip.styles';
+export default Tooltip;

package/cjs/tooltip/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledTooltipTrigger = exports.StyledTooltipContent = exports.StyledTooltipArrow = exports.StyledTooltip = void 0;
+
+var _tooltip = _interopRequireDefault(require("./tooltip"));
+
+var _tooltip2 = require("./tooltip.styles");
+
+exports.StyledTooltipTrigger = _tooltip2.StyledTooltipTrigger;
+exports.StyledTooltipArrow = _tooltip2.StyledTooltipArrow;
+exports.StyledTooltipContent = _tooltip2.StyledTooltipContent;
+exports.StyledTooltip = _tooltip2.StyledTooltip;
+var _default = _tooltip.default;
+exports.default = _default;

package/cjs/tooltip/placement.d.ts

@@ -0,0 +1,39 @@
+import { Placement } from '../utils/prop-types';
+import { MutableRefObject } from 'react';
+interface ParentDomRect {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+interface ReactiveDomReact {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    width: number;
+    height: number;
+}
+export declare const getRect: (ref: MutableRefObject<HTMLElement | null>) => ReactiveDomReact;
+export interface TooltipPlacement {
+    top: string;
+    left: string;
+    transform: string;
+}
+export declare const defaultTooltipPlacement: {
+    top: string;
+    left: string;
+    transform: string;
+};
+export interface TooltipIconPlacement {
+    top: string;
+    left: string;
+    right: string;
+    bottom: string;
+    transform: string;
+}
+export declare const getPlacement: (placement: Placement, rect: ParentDomRect, offset: number) => TooltipPlacement;
+export declare const getIconPlacement: (placement: Placement, offset: number) => TooltipIconPlacement;
+export {};