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

package/esm/loading/loading.styles.js

@@ -0,0 +1,438 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledSpinnerSpan = exports.StyledSpinnerContainer = exports.StyledSpinner = exports.StyledLoadingLabel = exports.StyledLoadingContainer = exports.StyledLoading = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const loadingBlink = (0, _stitches.keyframes)({
+  '0%': {
+    opacity: '0.2'
+  },
+  '20%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: '0.2'
+  }
+});
+const rotate = (0, _stitches.keyframes)({
+  '0%': {
+    transform: 'rotate(0deg)'
+  },
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+const points = (0, _stitches.keyframes)({
+  '0%': {
+    transform: 'translate(0px, 0px)'
+  },
+  '50%': {
+    transform: 'translate(0, calc(-$$loadingSize * 1.4))'
+  },
+  '100%': {
+    transform: 'translate(0px, 0px)'
+  }
+});
+const spinner = (0, _stitches.keyframes)({
+  '0%': {
+    opacity: 1
+  },
+  '100%': {
+    opacity: 0.15
+  }
+});
+const StyledLoadingContainer = (0, _stitches.styled)('div', {
+  d: 'inline-flex',
+  fd: 'column',
+  ai: 'center',
+  position: 'relative',
+  variants: {
+    color: {
+      white: {
+        $$loadingColor: '$colors$white'
+      },
+      default: {
+        $$loadingColor: '$colors$primary'
+      },
+      primary: {
+        $$loadingColor: '$colors$primary'
+      },
+      secondary: {
+        $$loadingColor: '$colors$secondary'
+      },
+      success: {
+        $$loadingColor: '$colors$success'
+      },
+      warning: {
+        $$loadingColor: '$colors$warning'
+      },
+      error: {
+        $$loadingColor: '$colors$error'
+      }
+    },
+    textColor: {
+      white: {
+        $$loadingTextColor: '$colors$white'
+      },
+      default: {
+        $$loadingTextColor: '$colors$text'
+      },
+      primary: {
+        $$loadingTextColor: '$colors$primary'
+      },
+      secondary: {
+        $$loadingTextColor: '$colors$secondary'
+      },
+      success: {
+        $$loadingTextColor: '$colors$success'
+      },
+      warning: {
+        $$loadingTextColor: '$colors$warning'
+      },
+      error: {
+        $$loadingTextColor: '$colors$error'
+      }
+    }
+  },
+  defaultVariants: {
+    color: 'default',
+    textColor: 'default'
+  }
+});
+exports.StyledLoadingContainer = StyledLoadingContainer;
+const StyledSpinnerContainer = (0, _stitches.styled)('div', {
+  size: '100%',
+  position: 'relative',
+  left: '50%',
+  top: '50%'
+});
+exports.StyledSpinnerContainer = StyledSpinnerContainer;
+const StyledSpinner = (0, _stitches.styled)('div', {
+  d: 'flex',
+  fd: 'column',
+  jc: 'center',
+  ai: 'center',
+  position: 'relative',
+  variants: {
+    size: {
+      xs: {
+        size: '$6'
+      },
+      sm: {
+        size: '$8'
+      },
+      md: {
+        size: '$9'
+      },
+      lg: {
+        size: '$11'
+      },
+      xl: {
+        size: '$12'
+      }
+    }
+  }
+});
+exports.StyledSpinner = StyledSpinner;
+const StyledSpinnerSpan = (0, _stitches.styled)('span', {
+  bg: '$$loadingColor',
+  position: 'absolute',
+  top: '-3.9%',
+  width: '24%',
+  height: '8%',
+  left: '-10%',
+  br: '$lg',
+  animation: `${spinner} 1.2s linear 0s infinite normal none running`,
+  '&:nth-child(1)': {
+    animationDelay: '-1.2s',
+    transform: 'rotate(0deg) translate(146%)'
+  },
+  '&:nth-child(2)': {
+    animationDelay: '-1.1s',
+    transform: 'rotate(30deg) translate(146%)'
+  },
+  '&:nth-child(3)': {
+    animationDelay: '-1s',
+    transform: 'rotate(60deg) translate(146%)'
+  },
+  '&:nth-child(4)': {
+    animationDelay: '-0.9s',
+    transform: 'rotate(90deg) translate(146%)'
+  },
+  '&:nth-child(5)': {
+    animationDelay: '-0.8s',
+    transform: 'rotate(120deg) translate(146%)'
+  },
+  '&:nth-child(6)': {
+    animationDelay: '-0.7s',
+    transform: 'rotate(150deg) translate(146%)'
+  },
+  '&:nth-child(7)': {
+    animationDelay: '-0.6s',
+    transform: 'rotate(180deg) translate(146%)'
+  },
+  '&:nth-child(8)': {
+    animationDelay: '-0.5s',
+    transform: 'rotate(210deg) translate(146%)'
+  },
+  '&:nth-child(9)': {
+    animationDelay: '-0.4s',
+    transform: 'rotate(240deg) translate(146%)'
+  },
+  '&:nth-child(10)': {
+    animationDelay: '-0.3s',
+    transform: 'rotate(270deg) translate(146%)'
+  },
+  '&:nth-child(11)': {
+    animationDelay: '-0.2s',
+    transform: 'rotate(300deg) translate(146%)'
+  },
+  '&:nth-child(12)': {
+    animationDelay: '-0.1s',
+    transform: 'rotate(330deg) translate(146%)'
+  }
+});
+exports.StyledSpinnerSpan = StyledSpinnerSpan;
+const StyledLoading = (0, _stitches.styled)('span', {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  size: '100%',
+  dflex: 'center',
+  bgColor: 'transparent',
+  us: 'none',
+  variants: {
+    size: {
+      xs: {
+        $$loadingSize: '$space$8',
+        $$loadingBorder: '$space$1'
+      },
+      sm: {
+        $$loadingSize: '$space$10',
+        $$loadingBorder: '$space$1'
+      },
+      md: {
+        $$loadingSize: '$space$12',
+        $$loadingBorder: 'calc($space$1 * 1.5)'
+      },
+      lg: {
+        $$loadingSize: '$space$15',
+        $$loadingBorder: '$space$2'
+      },
+      xl: {
+        $$loadingSize: '$space$18',
+        $$loadingBorder: '$space$3'
+      }
+    },
+    type: {
+      default: {
+        d: 'flex',
+        br: '$rounded',
+        position: 'relative',
+        size: '$$loadingSize',
+        i: {
+          top: '0px',
+          size: '100%',
+          position: 'absolute',
+          br: 'inherit'
+        },
+        '._1': {
+          border: '$$loadingBorder solid $$loadingColor',
+          borderTop: '$$loadingBorder solid transparent',
+          borderLeft: '$$loadingBorder solid transparent',
+          borderRight: '$$loadingBorder solid transparent',
+          animation: `${rotate} 0.8s ease infinite`
+        },
+        '._2': {
+          border: '$$loadingBorder dotted $$loadingColor',
+          borderTop: '$$loadingBorder solid transparent',
+          borderLeft: '$$loadingBorder solid transparent',
+          borderRight: '$$loadingBorder solid transparent',
+          animation: `${rotate} 0.8s linear infinite`,
+          opacity: 0.5
+        },
+        '._3': {
+          display: 'none'
+        }
+      },
+      points: {
+        d: 'flex',
+        position: 'relative',
+        transform: 'translate(0, calc($$loadingSize * 0.6))',
+        i: {
+          size: '$$loadingSize',
+          margin: '0 3px',
+          bg: '$$loadingColor'
+        },
+        '._1': {
+          br: '$rounded',
+          animation: `${points} 0.75s ease infinite`
+        },
+        '._2': {
+          br: '$rounded',
+          animation: `${points} 0.75s ease infinite 0.25s`
+        },
+        '._3': {
+          br: '$rounded',
+          animation: `${points} 0.75s ease infinite 0.5s`
+        }
+      },
+      'points-opacity': {
+        d: 'flex',
+        position: 'relative',
+        i: {
+          display: 'inline-block',
+          size: '$$loadingSize',
+          br: '$rounded',
+          bg: '$$loadingColor',
+          margin: '0 1px',
+          animation: `${loadingBlink} 1.4s infinite both`
+        },
+        '._2': {
+          animationDelay: '0.2s'
+        },
+        '._3': {
+          animationDelay: '0.4s'
+        }
+      },
+      spinner: {},
+      gradient: {
+        display: 'flex',
+        position: 'relative',
+        size: '$$loadingSize',
+        '._1': {
+          position: 'absolute',
+          size: '100%',
+          border: '0px',
+          animation: `${rotate} 1s linear infinite`,
+          top: '0px',
+          br: '$rounded',
+          bg: 'linear-gradient(0deg, $background 33%,$$loadingColor 100%)'
+        },
+        '._2': {
+          top: '2px',
+          position: 'absolute',
+          size: 'calc(100% - 4px)',
+          border: '0px',
+          bg: '$background',
+          br: '$rounded'
+        },
+        '._3': {
+          display: 'none'
+        }
+      }
+    }
+  },
+  compoundVariants: [// points-opacity & xs size
+  {
+    size: 'xs',
+    type: 'points-opacity',
+    css: {
+      $$loadingSize: '$space$1'
+    }
+  }, // points-opacity & sm size
+  {
+    size: 'sm',
+    type: 'points-opacity',
+    css: {
+      $$loadingSize: '$space$2'
+    }
+  }, // points-opacity & md size
+  {
+    size: 'md',
+    type: 'points-opacity',
+    css: {
+      $$loadingSize: '$space$3'
+    }
+  }, // points-opacity & lg size
+  {
+    size: 'lg',
+    type: 'points-opacity',
+    css: {
+      $$loadingSize: '$space$4'
+    }
+  }, // points-opacity & xl size
+  {
+    size: 'xl',
+    type: 'points-opacity',
+    css: {
+      $$loadingSize: '$space$5'
+    }
+  }, // points & xs size
+  {
+    size: 'xs',
+    type: 'points',
+    css: {
+      $$loadingSize: '$space$1'
+    }
+  }, // points & sm size
+  {
+    size: 'sm',
+    type: 'points',
+    css: {
+      $$loadingSize: '$space$2'
+    }
+  }, // points & md size
+  {
+    size: 'md',
+    type: 'points',
+    css: {
+      $$loadingSize: '$space$3'
+    }
+  }, // points & lg size
+  {
+    size: 'lg',
+    type: 'points',
+    css: {
+      $$loadingSize: '$space$4'
+    }
+  }, // points & xl size
+  {
+    size: 'xl',
+    type: 'points',
+    css: {
+      $$loadingSize: '$space$5'
+    }
+  }],
+  defaultVariants: {
+    type: 'default'
+  }
+});
+exports.StyledLoading = StyledLoading;
+const StyledLoadingLabel = (0, _stitches.styled)('label', {
+  mt: '$1',
+  color: '$$loadingTextColor',
+  fontSize: '$$loadingSize',
+  '*': {
+    margin: 0
+  },
+  variants: {
+    size: {
+      xs: {
+        fontSize: '$space$5',
+        marginTop: '$2'
+      },
+      sm: {
+        fontSize: '$space$6',
+        marginTop: '$3'
+      },
+      md: {
+        fontSize: '$base',
+        marginTop: '$4'
+      },
+      lg: {
+        fontSize: '$space$10',
+        marginTop: '$4'
+      },
+      xl: {
+        fontSize: '$space$11',
+        marginTop: '$5'
+      }
+    }
+  }
+});
+exports.StyledLoadingLabel = StyledLoadingLabel;

package/esm/loading/spinner.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { NormalSizes, SimpleColors } from '../utils/prop-types';
+import { CSS } from '../theme/stitches.config';
+import { SpinnerVariantsProps } from './loading.styles';
+interface Props {
+    size?: NormalSizes;
+    color?: SimpleColors;
+    textColor?: SimpleColors;
+    className?: string;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type SpinnerProps = Props & NativeAttrs & SpinnerVariantsProps & {
+    css?: CSS;
+};
+declare const Spinner: React.FC<React.PropsWithChildren<SpinnerProps>>;
+export default Spinner;

package/esm/loading/spinner.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _loading = require("./loading.styles");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const Spinner = ({
+  children,
+  size,
+  color,
+  textColor,
+  className,
+  ...props
+}) => {
+  const isValidChildren = Array.isArray(children) ? (children == null ? void 0 : children.length) > 1 && children[0] !== undefined : children !== undefined;
+  const ariaLabel = children && isValidChildren ? '' : 'Loading';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_loading.StyledSpinner, {
+    className: (0, _clsx.default)('nextui-spinner', className),
+    color: color,
+    size: size,
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.StyledSpinnerContainer, {
+      className: "nextui-spinner-container",
+      "aria-label": ariaLabel,
+      children: [...new Array(12)].map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.StyledSpinnerSpan, {}, `nextui-spinner-${index}`))
+    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_loading.StyledLoadingLabel, {
+      size: size,
+      color: textColor,
+      children: children
+    })]
+  });
+};
+
+Spinner.toString = () => '.nextui-spinner';
+
+var _default = Spinner;
+exports.default = _default;
+module.exports = exports.default;

package/esm/modal/index.d.ts

@@ -0,0 +1,8 @@
+import Modal from './modal';
+export type { ModalProps } from './modal';
+export type { ModalHeaderProps } from './modal-header';
+export type { ModalBodyProps } from './modal-body';
+export type { ModalFooterProps } from './modal-footer';
+export { StyledModalHideTab, StyledModalCloseButton, StyledModalHeader, StyledModalBody, StyledModalFooter, StyledModal } from './modal.styles';
+export type { ModalVariantsProps, ModalCloseButtonVariantsProps, ModalBodyVariantsProps, ModalHeaderVariantsProps, ModalFooterVariantsProps } from './modal.styles';
+export default Modal;

package/esm/modal/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledModalHideTab = exports.StyledModalHeader = exports.StyledModalFooter = exports.StyledModalCloseButton = exports.StyledModalBody = exports.StyledModal = void 0;
+
+var _modal = _interopRequireDefault(require("./modal"));
+
+var _modalHeader = _interopRequireDefault(require("./modal-header"));
+
+var _modalBody = _interopRequireDefault(require("./modal-body"));
+
+var _modalFooter = _interopRequireDefault(require("./modal-footer"));
+
+var _modal2 = require("./modal.styles");
+
+exports.StyledModalHideTab = _modal2.StyledModalHideTab;
+exports.StyledModalCloseButton = _modal2.StyledModalCloseButton;
+exports.StyledModalHeader = _modal2.StyledModalHeader;
+exports.StyledModalBody = _modal2.StyledModalBody;
+exports.StyledModalFooter = _modal2.StyledModalFooter;
+exports.StyledModal = _modal2.StyledModal;
+_modal.default.Header = _modalHeader.default;
+_modal.default.Body = _modalBody.default;
+_modal.default.Footer = _modalFooter.default;
+var _default = _modal.default;
+exports.default = _default;

package/esm/modal/modal-body.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { ModalBodyVariantsProps } from './modal.styles';
+interface Props {
+    className?: string;
+    autoMargin?: boolean;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const defaultProps: {
+    className: string;
+    autoMargin: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props>;
+export declare type ModalBodyProps = Props & typeof defaultProps & NativeAttrs & ModalBodyVariantsProps & {
+    css?: CSS;
+};
+declare const _default: React.ComponentType<Partial<{
+    className: string;
+    autoMargin: boolean;
+}> & Omit<Props & {
+    className: string;
+    autoMargin: boolean;
+} & NativeAttrs & import("@stitches/react/types/styled-component").TransformProps<{
+    noPadding?: boolean | "true" | undefined;
+    autoMargin?: boolean | "true" | undefined;
+}, {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xsMax: string;
+    smMax: string;
+    mdMax: string;
+    lgMax: string;
+    xlMax: string;
+    motion: string;
+    safari: string;
+    hover: string;
+    dark: string;
+    light: string;
+}> & {
+    css?: CSS | undefined;
+}, "className" | "autoMargin">>;
+export default _default;

package/esm/modal/modal-body.js

@@ -0,0 +1,62 @@
+"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 _modalContext = require("./modal-context");
+
+var _modal = require("./modal.styles");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+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 = {
+  className: '',
+  autoMargin: true
+};
+const preClass = 'nextui-modal-body';
+
+const ModalBody = ({
+  className,
+  children,
+  autoMargin: autoMarginProp,
+  ...props
+}) => {
+  const {
+    autoMargin: autoMarginContext,
+    noPadding
+  } = (0, _react.useContext)(_modalContext.ModalContext);
+  const autoMargin = (0, _react.useMemo)(() => {
+    return autoMarginContext !== undefined ? autoMarginContext : autoMarginProp;
+  }, [autoMarginProp, autoMarginContext]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal.StyledModalBody, {
+    className: (0, _clsx.default)(preClass, {
+      [`${preClass}-auto-margin`]: autoMargin,
+      [`${preClass}-no-padding`]: noPadding
+    }, className),
+    autoMargin: autoMargin,
+    noPadding: noPadding,
+    ...props,
+    children: children
+  });
+};
+
+ModalBody.toString = () => '.nextui-modal-body';
+
+const MemoModalBody = /*#__PURE__*/_react.default.memo(ModalBody);
+
+var _default = (0, _withDefaults.default)(MemoModalBody, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/esm/modal/modal-close-button.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { ModalCloseButtonVariantsProps } from './modal.styles';
+interface Props {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare type NativeAttrs = Omit<React.ButtonHTMLAttributes<unknown>, keyof Props>;
+export declare type ModalCloseButtonProps = Props & NativeAttrs & ModalCloseButtonVariantsProps & {
+    css?: CSS;
+};
+declare const MemoModalCloseButton: React.NamedExoticComponent<ModalCloseButtonProps>;
+export default MemoModalCloseButton;