@nextui-org/react 1.0.1-alpha.50 → 1.0.1-alpha.54

package/cjs/collapse/collapse-icon.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const CollapseIcon = ({ ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "collapse-icon",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M15.002 19.92L8.479 13.4a1.986 1.986 0 010-2.8l6.523-6.52",
+      fill: "none",
+      stroke: theme.palette.accents_5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.5
+    })
+  });
+};
+
+const MemoCollapseIcon = /*#__PURE__*/_react.default.memo(CollapseIcon);
+
+var _default = MemoCollapseIcon;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/collapse/collapse.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import CollapseGroup from './collapse-group';
+import { NormalWeights } from '../utils/prop-types';
+interface Props {
+    title: React.ReactNode | string;
+    subtitle?: React.ReactNode | string;
+    divider?: boolean;
+    animated?: boolean;
+    bordered?: boolean;
+    borderWeight?: NormalWeights;
+    arrowIcon?: React.ReactNode;
+    contentLeft?: React.ReactNode;
+    initialExpanded?: boolean;
+    showArrow?: boolean;
+    shadow?: boolean;
+    className?: string;
+    index?: number;
+    disabled?: boolean;
+    onChange?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, index?: number | undefined, value?: boolean) => void;
+}
+declare const defaultProps: {
+    className: string;
+    shadow: boolean;
+    divider: boolean;
+    bordered: boolean;
+    showArrow: boolean;
+    animated: boolean;
+    disabled: boolean;
+    borderWeight: "light" | "normal" | "bold";
+    initialExpanded: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type CollapseProps = Props & typeof defaultProps & NativeAttrs;
+declare type CollapseComponent<P = {}> = React.FC<P> & {
+    Group: typeof CollapseGroup;
+};
+declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs;
+declare const _default: CollapseComponent<ComponentProps>;
+export default _default;

package/cjs/collapse/collapse.js

@@ -0,0 +1,174 @@
+"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 _collapseIcon = _interopRequireDefault(require("./collapse-icon"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _expand = _interopRequireDefault(require("../utils/expand"));
+
+var _collapseContext = require("./collapse-context");
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _useWarning = _interopRequireDefault(require("../use-warning"));
+
+var _dimensions = require("../utils/dimensions");
+
+var _collections = require("../utils/collections");
+
+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: '',
+  shadow: false,
+  divider: true,
+  bordered: false,
+  showArrow: true,
+  animated: true,
+  disabled: false,
+  borderWeight: 'light',
+  initialExpanded: false
+};
+
+const Collapse = ({
+  children,
+  title,
+  subtitle,
+  initialExpanded,
+  shadow,
+  className,
+  divider,
+  arrowIcon,
+  showArrow,
+  disabled,
+  onChange,
+  bordered,
+  contentLeft,
+  animated: animatedProp,
+  borderWeight: borderWeightProp,
+  index,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const [visible, setVisible, visibleRef] = (0, _useCurrentState.default)(initialExpanded);
+  const {
+    values,
+    divider: groupDivider,
+    animated: groupAnimated,
+    updateValues
+  } = (0, _collapseContext.useCollapseContext)();
+
+  if (!title) {
+    (0, _useWarning.default)('"title" is required.', 'Collapse');
+  }
+
+  (0, _react.useEffect)(() => {
+    if (!values.length) return;
+    const isActive = !!values.find(item => item === index);
+    setVisible(isActive);
+  }, [values.join(',')]);
+  const arrowComponent = (0, _react.useMemo)(() => {
+    if (!showArrow) return null;
+    return arrowIcon ? arrowIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapseIcon.default, {});
+  }, [arrowIcon, showArrow]);
+  const borderWeight = (0, _react.useMemo)(() => {
+    const withDivider = groupDivider === undefined ? divider : groupDivider;
+    return withDivider ? (0, _dimensions.getNormalWeight)(borderWeightProp) : '0px';
+  }, [divider, groupDivider, borderWeightProp]);
+  const animated = (0, _react.useMemo)(() => {
+    return groupAnimated === undefined ? animatedProp : groupAnimated;
+  }, [groupAnimated, animatedProp]);
+  const bgColor = (0, _react.useMemo)(() => theme.type === 'dark' ? theme.palette.accents_1 : theme.palette.background, [theme.type]);
+  const {
+    ariaLabelledById,
+    ariaControlId
+  } = (0, _react.useMemo)(() => {
+    const nextuiId = (0, _collections.getId)();
+    return {
+      ariaLabelledById: `collapse-button-next-ui-${nextuiId}`,
+      ariaControlId: `collapse-next-ui-${nextuiId}`
+    };
+  }, []);
+
+  const clickHandler = event => {
+    if (disabled) return;
+    const next = !visibleRef.current;
+    setVisible(next);
+    updateValues && updateValues(index, next);
+    onChange && onChange(event, index, next);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+    className: _style.default.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('collapse', {
+      shadow,
+      bordered
+    }, className) || ""),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      role: "button",
+      id: ariaLabelledById,
+      "aria-disabled": disabled,
+      "aria-expanded": visible,
+      "aria-controls": ariaControlId,
+      onClick: clickHandler,
+      className: _style.default.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + ((0, _clsx.default)('view', {
+        disabled
+      }) || ""),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _style.default.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + ((0, _clsx.default)('title', {
+          animated
+        }) || ""),
+        children: [contentLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _style.default.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "title-content-left",
+          children: contentLeft
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _style.default.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "title-content",
+          children: [/*#__PURE__*/_react.default.isValidElement(title) ? title : /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+            className: _style.default.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]),
+            children: title
+          }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _style.default.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "subtitle",
+            children: subtitle
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: _style.default.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "title-content-right",
+          children: arrowComponent
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_expand.default, {
+      isExpanded: visible,
+      animated: animated,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "region",
+        tabIndex: -1,
+        id: ariaControlId,
+        "aria-labelledby": ariaLabelledById,
+        className: _style.default.dynamic([["1757461102", [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap]]]) + " " + "content",
+        children: children
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+      id: "1757461102",
+      dynamic: [borderWeight, theme.palette.border, borderWeight, theme.palette.border, bgColor, theme.expressiveness.shadowMedium, theme.layout.radius, theme.layout.gap, theme.layout.gap, theme.layout.radius, borderWeight, theme.palette.border, theme.layout.gap, theme.layout.gapHalf, theme.palette.foreground, visible ? '-90deg' : '0', theme.palette.accents_5, theme.layout.gap],
+      children: `.collapse.__jsx-style-dynamic-selector{border-top:${borderWeight} solid ${theme.palette.border};border-bottom:${borderWeight} solid ${theme.palette.border};}.shadow.__jsx-style-dynamic-selector{border:none;background:${bgColor};box-shadow:${theme.expressiveness.shadowMedium};border-radius:${theme.layout.radius};padding:0 ${theme.layout.gap};}.bordered.__jsx-style-dynamic-selector{padding:0 ${theme.layout.gap};border-radius:${theme.layout.radius};border:${borderWeight} solid ${theme.palette.border};}.view.__jsx-style-dynamic-selector{cursor:pointer;outline:none;padding:${theme.layout.gap} 0;}.view.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.view.disabled.__jsx-style-dynamic-selector .title.__jsx-style-dynamic-selector,.view.disabled.__jsx-style-dynamic-selector .subtitle.__jsx-style-dynamic-selector{opacity:0.5;}.title-content-left.__jsx-style-dynamic-selector,.title-content-right.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.title-content-left.__jsx-style-dynamic-selector{margin-right:${theme.layout.gapHalf};}.title-content.__jsx-style-dynamic-selector{width:100%;}.title.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${theme.palette.foreground};}.title-content-right.__jsx-style-dynamic-selector svg{-webkit-transform:rotateZ(${visible ? '-90deg' : '0'});-ms-transform:rotateZ(${visible ? '-90deg' : '0'});transform:rotateZ(${visible ? '-90deg' : '0'});}.animated.__jsx-style-dynamic-selector .title-content-right.__jsx-style-dynamic-selector svg{-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;}.title-content.__jsx-style-dynamic-selector h1,.title-content.__jsx-style-dynamic-selector h2,.title-content.__jsx-style-dynamic-selector h3,.title-content.__jsx-style-dynamic-selector h4,.title-content.__jsx-style-dynamic-selector h5,.title-content.__jsx-style-dynamic-selector h6,.title-content.__jsx-style-dynamic-selector p,.title-content.__jsx-style-dynamic-selector span,.title-content.__jsx-style-dynamic-selector b{margin:0 !important;}.subtitle.__jsx-style-dynamic-selector{color:${theme.palette.accents_5};margin:0;}.subtitle.__jsx-style-dynamic-selector>*{margin:0;}.content.__jsx-style-dynamic-selector{font-size:1rem;line-height:1.625rem;padding-bottom:${theme.layout.gap};}.content.__jsx-style-dynamic-selector>*:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector>*:last-child{margin-bottom:0;}`
+    })]
+  });
+};
+
+Collapse.defaultProps = defaultProps;
+var _default = Collapse;
+exports.default = _default;
+module.exports = exports.default;

package/cjs/collapse/index.d.ts

@@ -0,0 +1,2 @@
+import Collapse from './collapse';
+export default Collapse;

package/cjs/collapse/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _collapse = _interopRequireDefault(require("./collapse"));
+
+var _collapseGroup = _interopRequireDefault(require("./collapse-group"));
+
+_collapse.default.Group = _collapseGroup.default;
+var _default = _collapse.default;
+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: "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};}`
+      id: "2908832453",
+      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.background],
+      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:border-box;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.background};}`
     })]
   });
 };

package/cjs/divider/divider.d.ts

@@ -1,20 +1,19 @@
 import React from 'react';
-import { DividerAlign, SnippetTypes } from '../utils/prop-types';
-export declare type DividerTypes = SnippetTypes;
+import { DividerAlign, SimpleColors } from '../utils/prop-types';
 interface Props {
     x?: number;
     y?: number;
-    volume?: number;
-    color?: DividerTypes | string;
+    height?: number;
+    color?: SimpleColors | string;
     align?: DividerAlign;
     className?: string;
 }
 declare const defaultProps: {
     x: number;
     y: number;
-    volume: number;
+    height: number;
     align: "left" | "right" | "start" | "center" | "end";
-    color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "invert";
+    color: string;
     className: string;
 };
 declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
@@ -22,9 +21,9 @@ export declare type DividerProps = Props & typeof defaultProps & NativeAttrs;
 declare const _default: React.ComponentType<Partial<{
     x: number;
     y: number;
-    volume: number;
+    height: number;
     align: "left" | "right" | "start" | "center" | "end";
-    color: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "gradient" | "invert";
+    color: string;
     className: string;
-}> & Omit<DividerProps, "className" | "color" | "x" | "y" | "align" | "volume">>;
+}> & Omit<DividerProps, "height" | "className" | "color" | "x" | "y" | "align">>;
 export default _default;

package/cjs/divider/divider.js

@@ -26,14 +26,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const defaultProps = {
   x: 0,
   y: 2,
-  volume: 1,
+  height: 1,
   align: 'center',
   color: 'default',
   className: ''
 };
 
 const Divider = ({
-  volume,
+  height,
   color,
   x,
   y,
@@ -43,26 +43,26 @@ const Divider = ({
   ...props
 }) => {
   const theme = (0, _useTheme.default)();
-  const bgColor = (0, _react.useMemo)(() => (0, _color.getNormalColor)(color, theme.palette), [color, theme.palette]);
+  const bgColor = (0, _react.useMemo)(() => (0, _color.getNormalColor)(color, theme.palette, theme.palette.border), [color, theme.palette]);
   const alignClassName = (0, _react.useMemo)(() => {
     if (!align || align === 'center') return '';
     if (align === 'left' || align === 'start') return 'start';
     return 'end';
   }, [align]);
-  const textColor = color === 'default' || color === 'gradient' ? theme.palette.foreground : color;
+  const textColor = color === 'default' ? theme.palette.foreground : color;
   const top = y ? (0, _dimensions.getMargin)(y / 2) : 0;
   const left = x ? (0, _dimensions.getMargin)(x / 2) : 0;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "separator",
     ...props,
-    className: _style.default.dynamic([["839888228", [volume, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || `divider ${className}`),
+    className: _style.default.dynamic([["3028347750", [height, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + (props && props.className != null && props.className || `divider ${className}`),
     children: [children && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      className: _style.default.dynamic([["839888228", [volume, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + `text ${alignClassName}`,
+      className: _style.default.dynamic([["3028347750", [height, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor]]]) + " " + `text ${alignClassName}`,
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "839888228",
-      dynamic: [volume, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor],
-      children: `.divider.__jsx-style-dynamic-selector{width:auto;max-width:100%;height:calc(${volume} * 1px);background:${bgColor};margin:${top} ${left};position:relative;}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 ${theme.layout.gap};font-size:1rem;font-weight:bold;text-transform:capitalize;background-color:${theme.palette.background};color:${textColor};z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}`
+      id: "3028347750",
+      dynamic: [height, bgColor, top, left, theme.layout.gap, theme.palette.background, textColor],
+      children: `.divider.__jsx-style-dynamic-selector{width:auto;width:100%;max-width:100%;height:calc(${height} * 1px);background:${bgColor};margin:${top} ${left};position:relative;}.text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;min-height:100%;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:0 ${theme.layout.gap};font-size:1rem;font-weight:bold;text-transform:capitalize;background-color:${theme.palette.background};color:${textColor};z-index:10;}.text.start.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:7%;}.text.end.__jsx-style-dynamic-selector{-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:auto;right:7%;}`
     })]
   });
 };

package/cjs/image/image.d.ts

@@ -1,20 +1,21 @@
 import React from 'react';
+import { ObjectFit } from '../utils/prop-types';
 import ImageBrowser from './image-browser';
 interface Props {
     src: string;
-    disableAutoResize?: boolean;
-    disableSkeleton?: boolean;
-    width?: number;
-    height?: number;
+    autoResize?: boolean;
+    showSkeleton?: boolean;
+    width?: number | string;
+    height?: number | string;
     className?: string;
-    scale?: string;
     maxDelay?: number;
+    objectFit?: ObjectFit;
 }
 declare const defaultProps: {
-    disableSkeleton: boolean;
-    disableAutoResize: boolean;
+    showSkeleton: boolean;
+    autoResize: boolean;
+    objectFit: "inherit" | "initial" | "revert" | "unset" | "none" | "contain" | "cover" | "fill" | "scale-down";
     className: string;
-    scale: string;
     maxDelay: number;
 };
 declare type NativeAttrs = Omit<React.ImgHTMLAttributes<unknown>, keyof Props>;

package/cjs/image/image.js

@@ -19,6 +19,8 @@ var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
 
 var _useResize = _interopRequireDefault(require("../use-resize"));
 
+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); }
@@ -26,10 +28,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 = {
-  disableSkeleton: false,
-  disableAutoResize: false,
+  showSkeleton: true,
+  autoResize: true,
+  objectFit: 'scale-down',
   className: '',
-  scale: '100%',
   maxDelay: 3000
 };
 
@@ -37,25 +39,31 @@ const Image = ({
   src,
   width,
   height,
-  disableSkeleton,
+  showSkeleton: showSkeletonProp,
   className,
-  scale,
   maxDelay,
-  disableAutoResize,
+  autoResize,
+  objectFit,
   ...props
 }) => {
-  const showAnimation = !disableSkeleton && width && height;
-  const w = width ? `${width}px` : 'auto';
-  const h = height ? `${height}px` : 'auto';
   const theme = (0, _useTheme.default)();
   const [loading, setLoading] = (0, _react.useState)(true);
   const [showSkeleton, setShowSkeleton] = (0, _react.useState)(true);
+  const {
+    w,
+    h
+  } = (0, _react.useMemo)(() => {
+    return {
+      w: width ? typeof width === 'number' ? `${width}px` : width : 'auto',
+      h: height ? typeof height === 'number' ? `${height}px` : height : 'auto'
+    };
+  }, [width, height]);
   const [zoomHeight, setZoomHeight, zoomHeightRef] = (0, _useCurrentState.default)(h);
   const imageRef = (0, _react.useRef)(null);
   const [shape, updateShape] = (0, _useRealShape.default)(imageRef);
+  const showAnimation = showSkeletonProp && width && height;
 
   const imageLoaded = () => {
-    if (!showAnimation) return;
     setLoading(false);
   };
 
@@ -87,7 +95,7 @@ const Image = ({
    */
 
   (0, _react.useEffect)(() => {
-    if (disableAutoResize) return;
+    if (!autoResize) return;
     const notLoaded = shape.width === 0;
     const isAutoZoom = zoomHeightRef.current === 'auto';
     if (notLoaded || !width || !height) return;
@@ -99,11 +107,13 @@ const Image = ({
     }
   }, [shape, width]);
   (0, _useResize.default)(() => {
-    if (disableAutoResize) return;
+    if (!autoResize) return;
     updateShape();
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: _style.default.dynamic([["3152964456", [w, zoomHeight, theme.layout.radius, scale, scale]]]) + " " + `image ${className}`,
+    className: _style.default.dynamic([["2293692961", [w, zoomHeight, theme.layout.radius, objectFit]]]) + " " + ((0, _clsx.default)('image', {
+      'image-ready': !loading
+    }, className) || ""),
     children: [showSkeleton && showAnimation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
       opacity: loading ? 0.5 : 0
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
@@ -113,11 +123,11 @@ const Image = ({
       onLoad: imageLoaded,
       src: src,
       ...props,
-      className: _style.default.dynamic([["3152964456", [w, zoomHeight, theme.layout.radius, scale, scale]]]) + " " + (props && props.className != null && props.className || "")
+      className: _style.default.dynamic([["2293692961", [w, zoomHeight, theme.layout.radius, objectFit]]]) + " " + (props && props.className != null && props.className || "")
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
-      id: "3152964456",
-      dynamic: [w, zoomHeight, theme.layout.radius, scale, scale],
-      children: `.image.__jsx-style-dynamic-selector{width:${w};height:${zoomHeight};margin:0 auto;position:relative;border-radius:${theme.layout.radius};overflow:hidden;max-width:100%;}img.__jsx-style-dynamic-selector{width:${scale};height:${scale};object-fit:scale-down;display:block;}`
+      id: "2293692961",
+      dynamic: [w, zoomHeight, theme.layout.radius, objectFit],
+      children: `.image.__jsx-style-dynamic-selector{width:${w};opacity:0;height:${zoomHeight};margin:0 auto;position:relative;border-radius:${theme.layout.radius};overflow:hidden;max-width:100%;-webkit-transition:-webkit-transform 250ms ease 0ms,opacity 200ms ease-in 0ms;-webkit-transition:transform 250ms ease 0ms,opacity 200ms ease-in 0ms;transition:transform 250ms ease 0ms,opacity 200ms ease-in 0ms;}.image-ready.__jsx-style-dynamic-selector{opacity:1;}img.__jsx-style-dynamic-selector{width:100%;height:100%;object-fit:${objectFit};display:block;}`
     })]
   });
 };

package/cjs/index.d.ts

@@ -7,9 +7,15 @@ export { default as useTheme } from './use-theme';
 export { default as usePortal } from './use-portal';
 export { default as useSSR } from './use-ssr';
 export { default as useBodyScroll } from './use-body-scroll';
+export type { BodyScrollOptions } from './use-body-scroll';
 export { default as useClickAway } from './use-click-away';
+export { default as useClipboard } from './use-clipboard';
+export type { UseClipboardOptions, UseClipboardResult } from './use-clipboard';
 export { default as useClickAnywhere } from './use-click-anywhere';
 export { default as useInput } from './use-input';
+export { default as useKeyboard } from './use-keyboard';
+export type { UseKeyboardHandler, KeyboardOptions, KeyboardResult, UseKeyboard } from './use-keyboard';
+export { KeyMod, KeyCode } from './use-keyboard/codes';
 export { default as Avatar } from './avatar';
 export { default as CssBaseline } from './css-baseline';
 export { default as Checkbox } from './checkbox';
@@ -41,3 +47,5 @@ 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';
+export { default as Collapse } from './collapse';

package/cjs/index.js

@@ -13,8 +13,10 @@ var _exportNames = {
   useSSR: true,
   useBodyScroll: true,
   useClickAway: true,
+  useClipboard: true,
   useClickAnywhere: true,
   useInput: true,
+  useKeyboard: true,
   Avatar: true,
   CssBaseline: true,
   Checkbox: true,
@@ -39,9 +41,13 @@ var _exportNames = {
   Input: true,
   Textarea: true,
   Modal: true,
-  useModal: true
+  useModal: true,
+  Backdrop: true,
+  Collapse: true,
+  KeyMod: true,
+  KeyCode: true
 };
-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.useInput = exports.useClickAnywhere = exports.useClickAway = exports.useBodyScroll = exports.useSSR = exports.usePortal = exports.useTheme = exports.useResize = exports.useRealShape = exports.useCurrentState = exports.ThemeProvider = void 0;
+exports.KeyCode = exports.KeyMod = exports.Collapse = 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.useClipboard = 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");
 
@@ -88,6 +94,10 @@ var _useClickAway = _interopRequireDefault(require("./use-click-away"));
 
 exports.useClickAway = _useClickAway.default;
 
+var _useClipboard = _interopRequireDefault(require("./use-clipboard"));
+
+exports.useClipboard = _useClipboard.default;
+
 var _useClickAnywhere = _interopRequireDefault(require("./use-click-anywhere"));
 
 exports.useClickAnywhere = _useClickAnywhere.default;
@@ -96,6 +106,15 @@ var _useInput = _interopRequireDefault(require("./use-input"));
 
 exports.useInput = _useInput.default;
 
+var _useKeyboard = _interopRequireDefault(require("./use-keyboard"));
+
+exports.useKeyboard = _useKeyboard.default;
+
+var _codes = require("./use-keyboard/codes");
+
+exports.KeyMod = _codes.KeyMod;
+exports.KeyCode = _codes.KeyCode;
+
 var _avatar = _interopRequireDefault(require("./avatar"));
 
 exports.Avatar = _avatar.default;
@@ -232,6 +251,14 @@ var _useModal = _interopRequireDefault(require("./modal/use-modal"));
 
 exports.useModal = _useModal.default;
 
+var _backdrop = _interopRequireDefault(require("./backdrop"));
+
+exports.Backdrop = _backdrop.default;
+
+var _collapse = _interopRequireDefault(require("./collapse"));
+
+exports.Collapse = _collapse.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; }