@nextui-org/react 1.0.1-alpha.48 → 1.0.1-alpha.51

package/cjs/backdrop/index.d.ts

@@ -0,0 +1,23 @@
+import React, { MouseEvent } from 'react';
+interface Props {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    visible?: boolean;
+    fullScreenContent?: boolean;
+    width?: string;
+    blur?: boolean;
+}
+declare const defaultProps: {
+    onClick: () => void;
+    visible: boolean;
+    blur: boolean;
+    fullScreenContent: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type BackdropProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    onClick: () => void;
+    visible: boolean;
+    blur: boolean;
+    fullScreenContent: boolean;
+}> & Omit<React.PropsWithChildren<BackdropProps>, "blur" | "onClick" | "visible" | "fullScreenContent">>;
+export default _default;

package/cjs/backdrop/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _cssTransition = _interopRequireDefault(require("../utils/css-transition"));
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _assertion = require("../utils/assertion");
+
+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 = {
+  onClick: () => {},
+  visible: false,
+  blur: false,
+  fullScreenContent: false
+};
+
+const Backdrop = /*#__PURE__*/_react.default.memo(({
+  children,
+  onClick,
+  visible,
+  width,
+  blur,
+  fullScreenContent,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const [, setIsContentMouseDown, IsContentMouseDownRef] = (0, _useCurrentState.default)(false);
+
+  const clickHandler = event => {
+    if (IsContentMouseDownRef.current) return;
+    onClick && onClick(event);
+  };
+
+  const childrenClickHandler = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+  }, []);
+
+  const mouseUpHandler = () => {
+    if (!IsContentMouseDownRef.current) return;
+    const timer = setTimeout(() => {
+      setIsContentMouseDown(false);
+      clearTimeout(timer);
+    }, 0);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cssTransition.default, {
+    name: "backdrop-wrapper",
+    visible: visible,
+    enterTime: 20,
+    leaveTime: 20,
+    clearTime: 150,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      onClick: clickHandler,
+      onMouseUp: mouseUpHandler,
+      ...props,
+      className: _style.default.dynamic([["903909204", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.breakpoints.sm.max]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('backdrop', {
+        fullscreen: fullScreenContent
+      }) || ""),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _style.default.dynamic([["903909204", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.breakpoints.sm.max]]]) + " " + ((0, _clsx.default)('layer', blur ? 'layer-blur' : 'layer-default') || "")
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        onClick: childrenClickHandler,
+        onMouseDown: () => setIsContentMouseDown(true),
+        className: _style.default.dynamic([["903909204", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.breakpoints.sm.max]]]) + " " + "content",
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+        id: "903909204",
+        dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.breakpoints.sm.max],
+        children: `.backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:99999;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.content.__jsx-style-dynamic-selector{position:relative;z-index:999999;outline:none;width:100%;max-width:${width};margin:20px auto;vertical-align:middle;display:inline-block;}.fullscreen.__jsx-style-dynamic-selector .content.__jsx-style-dynamic-selector{width:100vw;max-width:100vw;height:100vh;margin:0;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none;z-index:99999;}.layer-default.__jsx-style-dynamic-selector{background-color:black;opacity:${theme.expressiveness.portalOpacity};-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);}.layer-blur.__jsx-style-dynamic-selector{opacity:1;-webkit-transition:background 0.35s cubic-bezier(0.4,0,0.2,1);transition:background 0.35s cubic-bezier(0.4,0,0.2,1);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,0.1);}.fullscreen.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{display:none;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:${theme.expressiveness.portalOpacity};}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:${theme.expressiveness.portalOpacity};}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer-default.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.1);}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.4);}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.4);}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer-blur.__jsx-style-dynamic-selector{background-color:rgba(0,0,0,0.1);}@media only screen and (max-width:${theme.breakpoints.sm.max}){.content.__jsx-style-dynamic-selector{width:90%;}}`
+      })]
+    })
+  });
+});
+
+if (_assertion.__DEV__) {
+  Backdrop.displayName = 'NextUI - Backdrop';
+}
+
+var _default = (0, _withDefaults.default)(Backdrop, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

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

@@ -23,9 +23,9 @@ const CssBaseline = ({
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
     children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "748313834",
-      dynamic: [theme.palette.background, theme.palette.foreground, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.code, theme.layout.gapQuarter, theme.layout.gapQuarter, (0, _color.addColorAlpha)(theme.palette.code, 0.2), theme.font.mono, (0, _color.addColorAlpha)(theme.palette.code, 0.3), theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.selection, theme.palette.foreground],
-      children: `html,body{background-color:${theme.palette.background};color:${theme.palette.foreground};}html{font-size:16px;--nextui-icons-background:${theme.palette.background};}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:${theme.font.sans};}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625rem;-moz-letter-spacing:-0.005625rem;-ms-letter-spacing:-0.005625rem;letter-spacing:-0.005625rem;font-family:${theme.font.sans};}p{margin:1rem 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875rem;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${theme.palette.link};-webkit-text-decoration:${theme.expressiveness.linkStyle};text-decoration:${theme.expressiveness.linkStyle};}a:hover{-webkit-text-decoration:${theme.expressiveness.linkHoverStyle};text-decoration:${theme.expressiveness.linkHoverStyle};}ul,ol{padding:0;list-style-type:none;margin:${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gap};color:${theme.palette.foreground};}ol{list-style-type:decimal;}li{margin-bottom:0.625rem;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.625rem 0;}h1{font-size:3rem;-webkit-letter-spacing:-0.066875rem;-moz-letter-spacing:-0.066875rem;-ms-letter-spacing:-0.066875rem;letter-spacing:-0.066875rem;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.020625rem;-moz-letter-spacing:-0.020625rem;-ms-letter-spacing:-0.020625rem;letter-spacing:-0.020625rem;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.029375rem;-moz-letter-spacing:-0.029375rem;-ms-letter-spacing:-0.029375rem;letter-spacing:-0.029375rem;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.020625rem;-moz-letter-spacing:-0.020625rem;-ms-letter-spacing:-0.020625rem;letter-spacing:-0.020625rem;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01125rem;-moz-letter-spacing:-0.01125rem;-ms-letter-spacing:-0.01125rem;letter-spacing:-0.01125rem;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005625rem;-moz-letter-spacing:-0.005625rem;-ms-letter-spacing:-0.005625rem;letter-spacing:-0.005625rem;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:${theme.palette.code};padding:calc(${theme.layout.gapQuarter} * 0.5) ${theme.layout.gapQuarter};border-radius:0.375rem;background-color:${(0, _color.addColorAlpha)(theme.palette.code, 0.2)};font-family:${theme.font.mono};font-size:0.8rem;white-space:pre-wrap;-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;}code:hover{background-color:${(0, _color.addColorAlpha)(theme.palette.code, 0.3)};}pre{border-radius:${theme.layout.radius};padding:calc(${theme.layout.gap} * 0.75) ${theme.layout.gap};margin:${theme.layout.gap} 0;font-family:${theme.font.mono};white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:0.875rem;-webkit-overflow-scrolling:touch;}pre code{color:${theme.palette.foreground};font-size:0.8125rem;line-height:1.25rem;white-space: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{border-color:${theme.palette.accents_2};}details{background-color:${theme.palette.accents_1};border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::-webkit-details-marker,summary::before{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ${theme.layout.gap}) ${theme.layout.gap};color:${theme.palette.accents_5};background-color:${theme.palette.accents_1};border-radius:${theme.layout.radius};margin:1.5rem 0;}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:${theme.palette.selection};color:${theme.palette.foreground};}`
+      id: "1075366528",
+      dynamic: [theme.palette.background, theme.palette.text, theme.palette.background, theme.font.sans, theme.font.sans, theme.palette.link, theme.expressiveness.linkStyle, theme.expressiveness.linkHoverStyle, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gapHalf, theme.layout.gap, theme.palette.foreground, theme.palette.code, theme.layout.gapQuarter, theme.layout.gapQuarter, (0, _color.addColorAlpha)(theme.palette.code, 0.2), theme.font.mono, (0, _color.addColorAlpha)(theme.palette.code, 0.3), theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.font.mono, theme.palette.foreground, theme.palette.accents_2, theme.palette.accents_1, theme.layout.gap, theme.layout.gap, theme.palette.accents_5, theme.palette.accents_1, theme.layout.radius, theme.palette.selection, theme.palette.foreground],
+      children: `html,body{background-color:${theme.palette.background};color:${theme.palette.text};}html{font-size:16px;--nextui-icons-background:${theme.palette.background};}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-size:1rem;line-height:1.5;margin:0;padding:0;min-height:100%;position:relative;overflow-x:hidden;font-family:${theme.font.sans};}*,*:before,*:after{box-sizing:inherit;text-rendering:geometricPrecision;-webkit-tap-highlight-color:transparent;}p,small{font-weight:400;color:inherit;-webkit-letter-spacing:-0.005625rem;-moz-letter-spacing:-0.005625rem;-ms-letter-spacing:-0.005625rem;letter-spacing:-0.005625rem;font-family:${theme.font.sans};}p{margin:1rem 0;font-size:1em;line-height:1.625em;}small{margin:0;line-height:1.5;font-size:0.875rem;}b{font-weight:600;}span{font-size:inherit;color:inherit;font-weight:inherit;}img{max-width:100%;}a{cursor:pointer;font-size:inherit;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${theme.palette.link};-webkit-text-decoration:${theme.expressiveness.linkStyle};text-decoration:${theme.expressiveness.linkStyle};}a:hover{-webkit-text-decoration:${theme.expressiveness.linkHoverStyle};text-decoration:${theme.expressiveness.linkHoverStyle};}ul,ol{padding:0;list-style-type:none;margin:${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gapHalf} ${theme.layout.gap};color:${theme.palette.foreground};}ol{list-style-type:decimal;}li{margin-bottom:0.625rem;font-size:1em;line-height:1.625em;}h1,h2,h3,h4,h5,h6{color:inherit;margin:0 0 0.625rem 0;}h1{font-size:3rem;-webkit-letter-spacing:-0.066875rem;-moz-letter-spacing:-0.066875rem;-ms-letter-spacing:-0.066875rem;letter-spacing:-0.066875rem;line-height:1.5;font-weight:700;}h2{font-size:2.25rem;-webkit-letter-spacing:-0.020625rem;-moz-letter-spacing:-0.020625rem;-ms-letter-spacing:-0.020625rem;letter-spacing:-0.020625rem;font-weight:600;}h3{font-size:1.5rem;-webkit-letter-spacing:-0.029375rem;-moz-letter-spacing:-0.029375rem;-ms-letter-spacing:-0.029375rem;letter-spacing:-0.029375rem;font-weight:600;}h4{font-size:1.25rem;-webkit-letter-spacing:-0.020625rem;-moz-letter-spacing:-0.020625rem;-ms-letter-spacing:-0.020625rem;letter-spacing:-0.020625rem;font-weight:600;}h5{font-size:1rem;-webkit-letter-spacing:-0.01125rem;-moz-letter-spacing:-0.01125rem;-ms-letter-spacing:-0.01125rem;letter-spacing:-0.01125rem;font-weight:600;}h6{font-size:0.875rem;-webkit-letter-spacing:-0.005625rem;-moz-letter-spacing:-0.005625rem;-ms-letter-spacing:-0.005625rem;letter-spacing:-0.005625rem;font-weight:600;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;margin:0;}button:focus,input:focus,select:focus,textarea:focus{outline:none;}code{color:${theme.palette.code};padding:calc(${theme.layout.gapQuarter} * 0.5) ${theme.layout.gapQuarter};border-radius:0.375rem;background-color:${(0, _color.addColorAlpha)(theme.palette.code, 0.2)};font-family:${theme.font.mono};font-size:0.8rem;white-space:pre-wrap;-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;}code:hover{background-color:${(0, _color.addColorAlpha)(theme.palette.code, 0.3)};}pre{border-radius:${theme.layout.radius};padding:calc(${theme.layout.gap} * 0.75) ${theme.layout.gap};margin:${theme.layout.gap} 0;font-family:${theme.font.mono};white-space:pre;overflow:auto;line-height:1.5;text-align:left;font-size:0.875rem;-webkit-overflow-scrolling:touch;}pre code{color:${theme.palette.foreground};font-size:0.8125rem;line-height:1.25rem;white-space: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{border-color:${theme.palette.accents_2};}details{background-color:${theme.palette.accents_1};border:none;}details:focus,details:hover,details:active{outline:none;}summary{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;outline:none;}summary::-webkit-details-marker,summary::before{display:none;}summary::-moz-list-bullet{font-size:0;}summary:focus,summary:hover,summary:active{outline:none;list-style:none;}blockquote{padding:calc(0.667 * ${theme.layout.gap}) ${theme.layout.gap};color:${theme.palette.accents_5};background-color:${theme.palette.accents_1};border-radius:${theme.layout.radius};margin:1.5rem 0;}blockquote *:first-child{margin-top:0;}blockquote *:last-child{margin-bottom:0;}::selection{background-color:${theme.palette.selection};color:${theme.palette.foreground};}`
     })]
   });
 };

package/cjs/index.d.ts

@@ -10,6 +10,7 @@ export { default as useBodyScroll } from './use-body-scroll';
 export { default as useClickAway } from './use-click-away';
 export { default as useClickAnywhere } from './use-click-anywhere';
 export { default as useInput } from './use-input';
+export { default as useKeyboard } from './use-keyboard';
 export { default as Avatar } from './avatar';
 export { default as CssBaseline } from './css-baseline';
 export { default as Checkbox } from './checkbox';
@@ -39,3 +40,6 @@ export { default as Snippet } from './snippet';
 export { default as Tooltip } from './tooltip';
 export { default as Input } from './input';
 export { default as Textarea } from './textarea';
+export { default as Modal } from './modal';
+export { default as useModal } from './modal/use-modal';
+export { default as Backdrop } from './backdrop';

package/cjs/index.js

@@ -15,6 +15,7 @@ var _exportNames = {
   useClickAway: true,
   useClickAnywhere: true,
   useInput: true,
+  useKeyboard: true,
   Avatar: true,
   CssBaseline: true,
   Checkbox: true,
@@ -37,9 +38,12 @@ var _exportNames = {
   Snippet: true,
   Tooltip: true,
   Input: true,
-  Textarea: true
+  Textarea: true,
+  Modal: true,
+  useModal: true,
+  Backdrop: true
 };
-exports.Textarea = exports.Input = exports.Tooltip = exports.Snippet = exports.Container = exports.Code = exports.Divider = exports.Col = exports.Row = exports.Image = exports.Card = exports.Grid = exports.Button = exports.Loading = exports.Link = exports.User = exports.Spacer = exports.Switch = exports.Radio = exports.Text = exports.Checkbox = exports.CssBaseline = exports.Avatar = exports.useInput = exports.useClickAnywhere = exports.useClickAway = exports.useBodyScroll = exports.useSSR = exports.usePortal = exports.useTheme = exports.useResize = exports.useRealShape = exports.useCurrentState = exports.ThemeProvider = void 0;
+exports.Backdrop = exports.useModal = exports.Modal = exports.Textarea = exports.Input = exports.Tooltip = exports.Snippet = exports.Container = exports.Code = exports.Divider = exports.Col = exports.Row = exports.Image = exports.Card = exports.Grid = exports.Button = exports.Loading = exports.Link = exports.User = exports.Spacer = exports.Switch = exports.Radio = exports.Text = exports.Checkbox = exports.CssBaseline = exports.Avatar = exports.useKeyboard = exports.useInput = exports.useClickAnywhere = exports.useClickAway = exports.useBodyScroll = exports.useSSR = exports.usePortal = exports.useTheme = exports.useResize = exports.useRealShape = exports.useCurrentState = exports.ThemeProvider = void 0;
 
 var _types = require("./theme/types");
 
@@ -94,6 +98,10 @@ var _useInput = _interopRequireDefault(require("./use-input"));
 
 exports.useInput = _useInput.default;
 
+var _useKeyboard = _interopRequireDefault(require("./use-keyboard"));
+
+exports.useKeyboard = _useKeyboard.default;
+
 var _avatar = _interopRequireDefault(require("./avatar"));
 
 exports.Avatar = _avatar.default;
@@ -222,6 +230,18 @@ var _textarea = _interopRequireDefault(require("./textarea"));
 
 exports.Textarea = _textarea.default;
 
+var _modal = _interopRequireDefault(require("./modal"));
+
+exports.Modal = _modal.default;
+
+var _useModal = _interopRequireDefault(require("./modal/use-modal"));
+
+exports.useModal = _useModal.default;
+
+var _backdrop = _interopRequireDefault(require("./backdrop"));
+
+exports.Backdrop = _backdrop.default;
+
 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; }

package/cjs/input/input-icon-clear.d.ts

@@ -3,6 +3,7 @@ import { SimpleColors } from '../utils/prop-types';
 interface Props {
     visible: boolean;
     hasContentRight?: boolean;
+    underlined?: boolean;
     status?: SimpleColors;
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     heightRatio?: string | undefined;

package/cjs/input/input-icon-clear.js

@@ -13,7 +13,7 @@ var _clsx = _interopRequireDefault(require("../utils/clsx"));
 
 var _useTheme = _interopRequireDefault(require("../use-theme"));
 
-var _clearIcon = _interopRequireDefault(require("./clear-icon"));
+var _clearIcon = _interopRequireDefault(require("../shared/clear-icon"));
 
 var _color = require("../utils/color");
 
@@ -29,6 +29,7 @@ const InputIconClear = ({
   status,
   disabled,
   visible,
+  underlined,
   hasContentRight,
   ...props
 }) => {
@@ -49,17 +50,18 @@ const InputIconClear = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     onClick: clickHandler,
     ...props,
-    className: _style.default.dynamic([["2855590982", [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', color, disabled ? theme.palette.accents_3 : theme.palette.foreground, width, width]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('clear-icon', {
+    className: _style.default.dynamic([["2364806577", [underlined ? '2px' : theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', color, disabled ? theme.palette.accents_3 : theme.palette.foreground, width, width]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('clear-icon', {
       visible,
       'dark-theme': isDark,
+      underlined: underlined,
       'has-content-right': hasContentRight
     }) || ""),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_clearIcon.default, {
       fill: "currentColor"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "2855590982",
-      dynamic: [theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', color, disabled ? theme.palette.accents_3 : theme.palette.foreground, width, width],
-      children: `.clear-icon.__jsx-style-dynamic-selector{position:absolute;right:0;margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto;padding:0 ${theme.layout.gapHalf};cursor:${disabled ? 'not-allowed' : 'pointer'};box-sizing:border-box;-webkit-transition:color 250ms ease 0s,-webkit-transform 250ms ease 0s;-webkit-transition:color 250ms ease 0s,transform 250ms ease 0s;transition:color 250ms ease 0s,transform 250ms ease 0s;color:${color};visibility:hidden;-webkit-transform:translateX(20%);-ms-transform:translateX(20%);transform:translateX(20%);opacity:0;}.has-content-right.__jsx-style-dynamic-selector{padding:0;position:relative;-webkit-transform:translateX(30%);-ms-transform:translateX(30%);transform:translateX(30%);}.visible.__jsx-style-dynamic-selector{visibility:visible;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:${disabled ? theme.palette.accents_3 : theme.palette.foreground};}.clear-icon.__jsx-style-dynamic-selector svg{color:currentColor;width:${width};height:${width};}`
+      id: "2364806577",
+      dynamic: [underlined ? '2px' : theme.layout.gapHalf, disabled ? 'not-allowed' : 'pointer', color, disabled ? theme.palette.accents_3 : theme.palette.foreground, width, width],
+      children: `.clear-icon.__jsx-style-dynamic-selector{position:absolute;right:0;margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto;padding:0 ${underlined ? '2px' : theme.layout.gapHalf};cursor:${disabled ? 'not-allowed' : 'pointer'};box-sizing:border-box;-webkit-transition:color 250ms ease 0s,-webkit-transform 250ms ease 0s;-webkit-transition:color 250ms ease 0s,transform 250ms ease 0s;transition:color 250ms ease 0s,transform 250ms ease 0s;color:${color};visibility:hidden;-webkit-transform:translateX(20%);-ms-transform:translateX(20%);transform:translateX(20%);opacity:0;}.has-content-right.__jsx-style-dynamic-selector{padding:0;position:relative;-webkit-transform:translateX(30%);-ms-transform:translateX(30%);transform:translateX(30%);}.visible.__jsx-style-dynamic-selector{visibility:visible;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:${disabled ? theme.palette.accents_3 : theme.palette.foreground};}.clear-icon.__jsx-style-dynamic-selector svg{color:currentColor;width:${width};height:${width};}`
     })]
   });
 };

package/cjs/input/input-password.d.ts

@@ -17,6 +17,7 @@ declare const passwordDefaultProps: {
     animated: boolean;
     underlined: boolean;
     shadow: boolean;
+    fullWidth: boolean;
     contentClickable: boolean;
     contentRightStyling: boolean;
     contentLeftStyling: boolean;
@@ -46,6 +47,7 @@ declare const _default: React.ComponentType<Partial<{
     animated: boolean;
     underlined: boolean;
     shadow: boolean;
+    fullWidth: boolean;
     contentClickable: boolean;
     contentRightStyling: boolean;
     contentLeftStyling: boolean;
@@ -72,6 +74,7 @@ declare const _default: React.ComponentType<Partial<{
     animated: boolean;
     underlined: boolean;
     shadow: boolean;
+    fullWidth: boolean;
     contentClickable: boolean;
     contentRightStyling: boolean;
     contentLeftStyling: boolean;
@@ -86,5 +89,5 @@ declare const _default: React.ComponentType<Partial<{
     className: string;
     placeholder: string;
     initialValue: string;
-} & NativeAttrs & React.RefAttributes<HTMLInputElement>, "clearable" | "rounded" | "contentClickable" | "contentLeftStyling" | "contentRightStyling" | "width" | "className" | "animated" | "placeholder" | "color" | "status" | "bordered" | "size" | "disabled" | "autoComplete" | "readOnly" | "required" | "initialValue" | "shadow" | "borderWeight" | "underlined" | "helperColor" | "hideToggle" | "visibleIcon" | "hiddenIcon">>;
+} & NativeAttrs & React.RefAttributes<HTMLInputElement>, "clearable" | "rounded" | "contentClickable" | "contentLeftStyling" | "contentRightStyling" | "width" | "className" | "animated" | "placeholder" | "color" | "status" | "bordered" | "size" | "disabled" | "autoComplete" | "readOnly" | "required" | "initialValue" | "shadow" | "borderWeight" | "underlined" | "fullWidth" | "helperColor" | "hideToggle" | "visibleIcon" | "hiddenIcon">>;
 export default _default;

package/cjs/input/input-props.d.ts

@@ -3,6 +3,7 @@ import { NormalSizes, SimpleColors, ContentPosition, NormalWeights, AsProp } fro
 export declare type FormElement = HTMLInputElement | HTMLTextAreaElement;
 export interface Props extends AsProp<'input' | 'textarea'>, React.HTMLAttributes<FormElement> {
     value?: string;
+    fullWidth?: boolean;
     initialValue?: string;
     placeholder?: string;
     size?: NormalSizes;
@@ -47,6 +48,7 @@ export declare const defaultProps: {
     animated: boolean;
     underlined: boolean;
     shadow: boolean;
+    fullWidth: boolean;
     contentClickable: boolean;
     contentRightStyling: boolean;
     contentLeftStyling: boolean;

package/cjs/input/input-props.js

@@ -11,6 +11,7 @@ const defaultProps = {
   animated: true,
   underlined: false,
   shadow: true,
+  fullWidth: false,
   contentClickable: false,
   contentRightStyling: true,
   contentLeftStyling: true,

package/cjs/input/input.js

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _useTheme = _interopRequireDefault(require("../use-theme"));
 
-var _assertion = require("../utils/assertion");
-
 var _inputLabel = _interopRequireDefault(require("./input-label"));
 
 var _inputBlockLabel = _interopRequireDefault(require("./input-block-label"));
@@ -31,6 +29,8 @@ var _dimensions = require("../utils/dimensions");
 
 var _clsx = _interopRequireDefault(require("../utils/clsx"));
 
+var _assertion = require("../utils/assertion");
+
 var _useWarning = _interopRequireDefault(require("../use-warning"));
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -72,12 +72,13 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   shadow,
   animated,
   required,
-  width,
+  width: widthProp,
   className,
   onBlur,
   onFocus,
   autoComplete,
   placeholder,
+  fullWidth,
   borderWeight: borderWeightProp,
   disabled,
   bordered,
@@ -98,6 +99,11 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
   const inputLabel = (0, _react.useMemo)(() => label || labelPlaceholder, [label, labelPlaceholder]);
   const ComponentWrapper = (0, _react.useMemo)(() => inputLabel ? 'div' : 'label', [inputLabel]);
   const inputPlaceholder = (0, _react.useMemo)(() => labelPlaceholder ? '' : placeholder, [placeholder, labelPlaceholder]);
+  const width = (0, _react.useMemo)(() => {
+    if (fullWidth) return '100%';
+    if (widthProp) return widthProp;
+    return 'initial';
+  }, [fullWidth, widthProp]);
 
   if (underlined && _assertion.__DEV__) {
     bordered && (0, _useWarning.default)('Using underlined and bordered at the same time will have no effect.');
@@ -260,6 +266,7 @@ const Input = /*#__PURE__*/_react.default.forwardRef(({
           }) || "")
         }), clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputIconClear.default, {
           status: status,
+          underlined: underlined,
           visible: Boolean(selfValue),
           hasContentRight: !!contentRight,
           heightRatio: heightRatio,

package/cjs/modal/index.d.ts

@@ -0,0 +1,2 @@
+import Modal from './modal';
+export default Modal;

package/cjs/modal/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = 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"));
+
+_modal.default.Header = _modalHeader.default;
+_modal.default.Body = _modalBody.default;
+_modal.default.Footer = _modalFooter.default;
+var _default = _modal.default;
+exports.default = _default;
+module.exports = exports.default;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+interface Props {
+    className?: string;
+    autoMargin?: boolean;
+}
+declare const defaultProps: {
+    className: string;
+    autoMargin: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props>;
+export declare type ModalContentProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    className: string;
+    autoMargin: boolean;
+}> & Omit<Props & {
+    className: string;
+    autoMargin: boolean;
+} & NativeAttrs, "className" | "autoMargin">>;
+export default _default;

package/cjs/modal/modal-body.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _modalContext = require("./modal-context");
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+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 ModalContent = ({
+  className,
+  children,
+  autoMargin: autoMarginProp,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  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.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", { ...props,
+      className: _style.default.dynamic([["1688581216", [theme.layout.gapHalf, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('modal-body', {
+        'auto-margin': autoMargin,
+        'no-padding': noPadding
+      }, className) || ""),
+      children: children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+      id: "1688581216",
+      dynamic: [theme.layout.gapHalf, theme.layout.gap],
+      children: `.modal-body.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:${theme.layout.gapHalf} calc(${theme.layout.gap} + 0.25rem);overflow-y:auto;position:relative;text-align:left;}.no-padding.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;padding:0;}.auto-margin.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.auto-margin.__jsx-style-dynamic-selector>*{margin-bottom:1rem;}.auto-margin.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}`
+    })]
+  });
+};
+
+const MemoModalContent = /*#__PURE__*/_react.default.memo(ModalContent);
+
+var _default = (0, _withDefaults.default)(MemoModalContent, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    disabled?: boolean;
+}
+declare const MemoModalCloseButton: React.NamedExoticComponent<Props>;
+export default MemoModalCloseButton;

package/cjs/modal/modal-close-button.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _clearIcon = _interopRequireDefault(require("../shared/clear-icon"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const ModalCloseButton = ({
+  onClick,
+  disabled,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+
+  const clickHandler = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onClick && onClick(event);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    onClick: clickHandler,
+    ...props,
+    className: _style.default.dynamic([["1382096932", [theme.layout.gapQuarter, theme.layout.gapQuarter, disabled ? 'not-allowed' : 'pointer', theme.layout.gapQuarter, theme.palette.accents_4]]]) + " " + (props && props.className != null && props.className || "close-icon"),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_clearIcon.default, {
+      plain: true,
+      size: 18,
+      fill: "currentColor"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+      id: "1382096932",
+      dynamic: [theme.layout.gapQuarter, theme.layout.gapQuarter, disabled ? 'not-allowed' : 'pointer', theme.layout.gapQuarter, theme.palette.accents_4],
+      children: `.close-icon.__jsx-style-dynamic-selector{position:absolute;z-index:1;top:${theme.layout.gapQuarter};right:calc(${theme.layout.gapQuarter} * 0.5);margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:auto;cursor:${disabled ? 'not-allowed' : 'pointer'};box-sizing:border-box;-webkit-transition:opacity 250ms ease 0s;transition:opacity 250ms ease 0s;padding:${theme.layout.gapQuarter};color:${theme.palette.accents_4};}.close-icon.__jsx-style-dynamic-selector:hover{opacity:0.8;}.close-icon.__jsx-style-dynamic-selector svg{color:currentColor;}`
+    })]
+  });
+};
+
+const MemoModalCloseButton = /*#__PURE__*/_react.default.memo(ModalCloseButton);
+
+var _default = MemoModalCloseButton;
+exports.default = _default;
+module.exports = exports.default;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ModalConfig {
+    autoMargin?: boolean;
+    noPadding?: boolean;
+    close?: () => void;
+}
+export declare const ModalContext: React.Context<ModalConfig>;
+export declare const useModalContext: () => ModalConfig;

package/cjs/modal/modal-context.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useModalContext = exports.ModalContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const defaultContext = {};
+
+const ModalContext = /*#__PURE__*/_react.default.createContext(defaultContext);
+
+exports.ModalContext = ModalContext;
+
+const useModalContext = () => _react.default.useContext(ModalContext);
+
+exports.useModalContext = useModalContext;

package/cjs/modal/modal-footer.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Justify } from '../utils/prop-types';
+interface Props {
+    className?: string;
+    justify?: Justify;
+    autoMargin?: boolean;
+}
+declare const defaultProps: {
+    className: string;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    autoMargin: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type ModalFooterProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    className: string;
+    justify: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    autoMargin: boolean;
+}> & Omit<ModalFooterProps, "className" | "justify" | "autoMargin">>;
+export default _default;