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

package/cjs/container/container.styles.js

@@ -0,0 +1,45 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.StyledContainer = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const StyledContainer = (0, _stitches.styled)('div', {
+  w: '100%',
+  mr: 'auto',
+  ml: 'auto',
+  variants: {
+    fluid: {
+      true: {
+        maxWidth: '100%'
+      }
+    },
+    responsive: {
+      true: {
+        '@xs': {
+          maxWidth: '$breakpoints$xs'
+        },
+        '@sm': {
+          maxWidth: '$breakpoints$sm'
+        },
+        '@md': {
+          maxWidth: '$breakpoints$md'
+        },
+        '@lg': {
+          maxWidth: '$breakpoints$lg'
+        },
+        '@xl': {
+          maxWidth: '$breakpoints$xl'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    fluid: false,
+    responsive: true
+  }
+});
+exports.StyledContainer = StyledContainer;
+var _default = StyledContainer;
+exports.default = _default;

package/cjs/container/index.d.ts

@@ -0,0 +1,5 @@
+import Container from './container';
+export type { ContainerProps } from './container';
+export { StyledContainer } from './container.styles';
+export type { ContainerVariantsProps } from './container.styles';
+export default Container;

package/cjs/container/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledContainer = void 0;
+
+var _container = _interopRequireDefault(require("./container"));
+
+var _container2 = require("./container.styles");
+
+exports.StyledContainer = _container2.StyledContainer;
+var _default = _container.default;
+exports.default = _default;

package/{dist/components → cjs}/css-baseline/css-baseline.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import flushToReact from 'styled-jsx/server';
+declare const flushCSS: () => JSX.Element;
 declare type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
-    flush: typeof flushToReact;
+    flush: typeof flushCSS;
 };
 declare const MemoCssBaseline: MemoCssBaselineComponent<{
     children?: React.ReactNode;

package/cjs/css-baseline/css-baseline.js

@@ -0,0 +1,247 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _stitches = require("../theme/stitches.config");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const globalStyles = (0, _stitches.globalCss)({
+  '*, *:before, *:after': {
+    boxSizing: 'border-box',
+    textRendering: 'geometricPrecision',
+    WebkitTapHighlightColor: 'transparent'
+  },
+  html: {
+    fontSize: '$base'
+  },
+  body: {
+    margin: 0,
+    padding: 0,
+    minHeight: '100%',
+    position: 'relative',
+    overflowX: 'hidden',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+    textRendering: 'optimizeLegibility',
+    fontSize: '$base',
+    lineHeight: '$md',
+    fontFamily: '$sans'
+  },
+  'html, body': {
+    backgroundColor: '$background',
+    color: '$text'
+  },
+  'p, small': {
+    color: 'inherit',
+    letterSpacing: '$tighter',
+    fontWeight: '$normal',
+    fontFamily: '$sans'
+  },
+  p: {
+    margin: '$md 0',
+    fontSize: '$base',
+    lineHeight: '$lg'
+  },
+  small: {
+    margin: 0,
+    lineHeight: '$md',
+    fontSize: '$xs'
+  },
+  b: {
+    fontWeight: '$semibold'
+  },
+  span: {
+    fontSize: 'inherit',
+    color: 'inherit',
+    fontWeight: 'inherit'
+  },
+  img: {
+    maxWidth: '100%'
+  },
+  a: {
+    cursor: 'pointer',
+    fontSize: 'inherit',
+    WebkitTouchCallout: 'none',
+    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+    WebkitBoxAlign: 'center',
+    alignItems: 'center',
+    color: '$link',
+    textDecoration: 'none'
+  },
+  'a:hover': {
+    textDecoration: 'none'
+  },
+  'ul,ol': {
+    padding: 0,
+    listStyleType: 'none',
+    margin: '$sm $sm $sm $lg',
+    color: '$foreground'
+  },
+  ol: {
+    listStyleType: 'decimal'
+  },
+  li: {
+    marginBottom: '$5',
+    fontSize: '$base',
+    lineHeight: '$lg'
+  },
+  'h1,h2,h3,h4,h5,h6': {
+    color: 'inherit',
+    margin: '0 0 $5 0'
+  },
+  h1: {
+    letterSpacing: '$tighter',
+    lineHeight: '$md',
+    fontSize: '$xl',
+    fontWeight: '$bold'
+  },
+  h2: {
+    letterSpacing: '$tighter',
+    fontSize: '$lg',
+    fontWeight: '$semibold'
+  },
+  h3: {
+    letterSpacing: '$tighter',
+    fontSize: '$md',
+    fontWeight: '$semibold'
+  },
+  h4: {
+    letterSpacing: '$tighter',
+    fontSize: '$sm',
+    fontWeight: '$semibold'
+  },
+  h5: {
+    letterSpacing: '$tight',
+    fontSize: '$base',
+    fontWeight: '$semibold'
+  },
+  h6: {
+    letterSpacing: '$tight',
+    fontSize: '$xs',
+    fontWeight: '$semibold'
+  },
+  'button, input, select,textarea': {
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+    color: 'inherit',
+    margin: 0
+  },
+  'button:focus, input:focus, select:focus,textarea:focus': {
+    outline: 'none'
+  },
+  code: {
+    color: '$code',
+    padding: '$1 $2',
+    borderRadius: '$xs',
+    bg: '$codeLight',
+    fontFamily: '$mono',
+    fontSize: '$xs',
+    whiteSpace: 'pre-wrap',
+    transition: '$default'
+  },
+  'code:hover': {
+    opacity: 0.8
+  },
+  pre: {
+    overflow: 'auto',
+    whiteSpace: 'pre',
+    textAlign: 'left',
+    fontSize: '$xs',
+    borderRadius: '$lg',
+    padding: '$md $lg',
+    margin: '$lg 0 ',
+    fontFamily: '$mono',
+    lineHeight: '$md',
+    webkitOverflowScrolling: 'touch'
+  },
+  'pre code': {
+    color: '$foreground',
+    fontSize: '$xs',
+    lineHeight: '$sm',
+    whiteSpace: 'pre'
+  },
+  'pre code:before,pre code:after': {
+    display: 'none'
+  },
+  'pre p': {
+    margin: 0
+  },
+  'pre::-webkit-scrollbar': {
+    display: 'none',
+    width: 0,
+    height: 0,
+    background: 'transparent'
+  },
+  hr: {
+    borderColor: '$accents2'
+  },
+  details: {
+    backgroundColor: '$accents1',
+    border: 'none'
+  },
+  'details:focus, details:hover, details:active': {
+    outline: 'none'
+  },
+  summary: {
+    cursor: 'pointer',
+    userSelect: 'none',
+    listStyle: 'none',
+    outline: 'none'
+  },
+  'summary::-webkit-details-marker, summary::before': {
+    display: 'none'
+  },
+  'summary::-moz-list-bullet': {
+    fontSize: 0
+  },
+  'summary:focus, summary:hover, summary:active': {
+    outline: 'none',
+    listStyle: 'none'
+  },
+  '::selection': {
+    backgroundColor: '$selection'
+  },
+  blockquote: {
+    padding: '$md $lg',
+    color: '$accents5',
+    backgroundColor: '$accents1',
+    borderRadius: '$lg',
+    margin: '$10 0'
+  },
+  'blockquote *:first-child': {
+    marginTop: 0
+  },
+  'blockquote *:last-child': {
+    marginBottom: 0
+  }
+});
+
+const flushCSS = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("style", {
+  id: "stitches",
+  dangerouslySetInnerHTML: {
+    __html: (0, _stitches.getCssText)()
+  }
+});
+
+const CssBaseline = ({
+  children
+}) => {
+  globalStyles();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+    children: children
+  });
+};
+
+const MemoCssBaseline = /*#__PURE__*/_react.default.memo(CssBaseline);
+
+MemoCssBaseline.flush = flushCSS;
+var _default = MemoCssBaseline;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/css-baseline/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _cssBaseline = _interopRequireDefault(require("./css-baseline"));
+
+exports.default = _cssBaseline.default;
+module.exports = exports.default;

package/cjs/divider/divider.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DividerAlign, SimpleColors } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
+import { DividerVariantsProps } from './divider.styles';
+interface Props {
+    x?: number;
+    y?: number;
+    height?: number;
+    textColor?: SimpleColors;
+    align?: DividerAlign;
+    css?: CSS;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type DividerProps = Props & DividerVariantsProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    x: number;
+    y: number;
+    height: number;
+    align: "left" | "right" | "start" | "center" | "end";
+}> & Omit<DividerProps, "height" | "x" | "y" | "align">>;
+export default _default;

package/cjs/divider/divider.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _dimensions = require("../utils/dimensions");
+
+var _divider = require("./divider.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 defaultProps = {
+  x: 0,
+  y: 0,
+  height: 1,
+  align: 'center'
+};
+
+const Divider = ({
+  height,
+  x,
+  y,
+  align,
+  children,
+  textColor,
+  css,
+  ...props
+}) => {
+  const alignCss = (0, _react.useMemo)(() => {
+    if (!align || align === 'center') return '';
+
+    if (align === 'left' || align === 'start') {
+      return {
+        transform: 'translateY(-50%)',
+        left: '7%'
+      };
+    }
+
+    return {
+      transform: 'translateY(-50%)',
+      left: 'auto',
+      right: '7%'
+    };
+  }, [align]);
+  const top = y ? (0, _dimensions.getMargin)(y / 2) : 0;
+  const left = x ? (0, _dimensions.getMargin)(x / 2) : 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider.StyledDivider, {
+    role: "separator",
+    css: {
+      margin: `${top} ${left}`,
+      height: `calc(${height} * 1px)`,
+      ...css
+    },
+    ...props,
+    children: children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider.StyledDividerText, {
+      css: { ...alignCss
+      },
+      color: textColor,
+      className: "nextui-divider-text",
+      children: children
+    })
+  });
+};
+
+Divider.toString = () => '.nextui-divider';
+
+const MemoDivider = /*#__PURE__*/_react.default.memo(Divider);
+
+var _default = (0, _withDefaults.default)(MemoDivider, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;