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

package/cjs/button/button.js

@@ -13,7 +13,7 @@ var _useWarning = _interopRequireDefault(require("../use-warning"));
 
 var _useTheme = _interopRequireDefault(require("../use-theme"));
 
-var _drip = _interopRequireDefault(require("../shared/drip"));
+var _drip = _interopRequireDefault(require("../utils/drip"));
 
 var _buttonLoading = _interopRequireDefault(require("./button-loading"));
 

package/cjs/card/card.js

@@ -23,7 +23,7 @@ var _image = _interopRequireDefault(require("../image"));
 
 var _clsx = _interopRequireDefault(require("../utils/clsx"));
 
-var _drip = _interopRequireDefault(require("../shared/drip"));
+var _drip = _interopRequireDefault(require("../utils/drip"));
 
 var _useDrip = _interopRequireDefault(require("../use-drip"));
 

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CollapseConfig {
+    values: Array<number>;
+    divider?: boolean;
+    animated?: boolean;
+    updateValues?: Function;
+}
+export declare const CollapseContext: React.Context<CollapseConfig>;
+export declare const useCollapseContext: () => CollapseConfig;

package/cjs/collapse/collapse-context.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useCollapseContext = exports.CollapseContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const defaultContext = {
+  values: []
+};
+
+const CollapseContext = /*#__PURE__*/_react.default.createContext(defaultContext);
+
+exports.CollapseContext = CollapseContext;
+
+const useCollapseContext = () => _react.default.useContext(CollapseContext);
+
+exports.useCollapseContext = useCollapseContext;

package/cjs/collapse/collapse-group.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { NormalWeights } from '../utils/prop-types';
+interface Props {
+    accordion?: boolean;
+    className?: string;
+    animated?: boolean;
+    bordered?: boolean;
+    splitted?: boolean;
+    shadow?: boolean;
+    divider?: boolean;
+    borderWeight?: NormalWeights;
+    onChange?: (index?: number | undefined, value?: boolean) => void;
+}
+declare const defaultProps: {
+    accordion: boolean;
+    shadow: boolean;
+    bordered: boolean;
+    splitted: boolean;
+    borderWeight: "light" | "normal" | "bold";
+    className: string;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type CollapseGroupProps = Props & typeof defaultProps & NativeAttrs;
+declare const _default: React.ComponentType<Partial<{
+    accordion: boolean;
+    shadow: boolean;
+    bordered: boolean;
+    splitted: boolean;
+    borderWeight: "light" | "normal" | "bold";
+    className: string;
+}> & Omit<React.PropsWithChildren<CollapseGroupProps>, "className" | "bordered" | "borderWeight" | "shadow" | "accordion" | "splitted">>;
+export default _default;

package/cjs/collapse/collapse-group.js

@@ -0,0 +1,111 @@
+"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 _collapseContext = require("./collapse-context");
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _collections = require("../utils/collections");
+
+var _dimensions = require("../utils/dimensions");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _collapse = _interopRequireDefault(require("./collapse"));
+
+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 = {
+  accordion: true,
+  shadow: false,
+  bordered: false,
+  splitted: false,
+  borderWeight: 'light',
+  className: ''
+};
+
+const CollapseGroup = ({
+  children,
+  accordion,
+  shadow,
+  className,
+  animated,
+  bordered,
+  splitted,
+  divider,
+  borderWeight: borderWeightProp,
+  onChange,
+  ...props
+}) => {
+  const theme = (0, _useTheme.default)();
+  const [state, setState, stateRef] = (0, _useCurrentState.default)([]);
+
+  const updateValues = (currentIndex, nextState) => {
+    const hasChild = stateRef.current.find(val => val === currentIndex);
+    onChange && onChange(currentIndex, nextState);
+
+    if (accordion) {
+      if (nextState) return setState([currentIndex]);
+      return setState([]);
+    }
+
+    if (nextState) {
+      // In a few cases, the user will set Collapse Component state manually.
+      // If the user incorrectly set the state, Group component should ignore it.
+
+      /* istanbul ignore if */
+      if (hasChild) return;
+      return setState([...stateRef.current, currentIndex]);
+    }
+
+    setState(stateRef.current.filter(item => item !== currentIndex));
+  };
+
+  const bgColor = (0, _react.useMemo)(() => theme.type === 'dark' ? theme.palette.accents_1 : theme.palette.background, [theme.type]);
+  const initialValue = (0, _react.useMemo)(() => ({
+    values: state,
+    updateValues,
+    divider,
+    animated
+  }), [state.join(',')]);
+  const hasIndexChildren = (0, _react.useMemo)(() => (0, _collections.setChildrenIndex)(children, [_collapse.default]), [children]);
+  const borderWeight = (0, _react.useMemo)(() => {
+    return bordered ? (0, _dimensions.getNormalWeight)(borderWeightProp) : '0px';
+  }, [bordered, borderWeightProp]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapseContext.CollapseContext.Provider, {
+    value: initialValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...props,
+      className: _style.default.dynamic([["2642035014", [theme.layout.gapHalf, theme.layout.radius, theme.layout.gap, bgColor, theme.expressiveness.shadowMedium, bgColor, theme.expressiveness.shadowMedium, theme.layout.gapHalf, borderWeight, theme.palette.border]]]) + " " + (props && props.className != null && props.className || (0, _clsx.default)('collapse-group', {
+        shadow,
+        bordered,
+        splitted
+      }, className) || ""),
+      children: [hasIndexChildren, /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
+        id: "2642035014",
+        dynamic: [theme.layout.gapHalf, theme.layout.radius, theme.layout.gap, bgColor, theme.expressiveness.shadowMedium, bgColor, theme.expressiveness.shadowMedium, theme.layout.gapHalf, borderWeight, theme.palette.border],
+        children: `.collapse-group.__jsx-style-dynamic-selector{width:auto;padding:0 ${theme.layout.gapHalf};}.collapse-group.__jsx-style-dynamic-selector>div + div{border-top:none;}.shadow.__jsx-style-dynamic-selector,.bordered.__jsx-style-dynamic-selector,.collapse-group.splitted.__jsx-style-dynamic-selector .collapse{border-radius:${theme.layout.radius};padding:0 ${theme.layout.gap};}.shadow.__jsx-style-dynamic-selector{border:none;background:${bgColor};box-shadow:${theme.expressiveness.shadowMedium};}.collapse-group.splitted.__jsx-style-dynamic-selector .collapse{border:none;background:${bgColor};box-shadow:${theme.expressiveness.shadowMedium};margin:${theme.layout.gapHalf} 0;}.bordered.__jsx-style-dynamic-selector{border:${borderWeight} solid ${theme.palette.border};}.collapse-group.__jsx-style-dynamic-selector .collapse:last-child{border-bottom:none;}.collapse-group.__jsx-style-dynamic-selector .collapse:first-child{border-top:none;}.gradient.vertical.__jsx-style-dynamic-selector .button:not(:last-child):not(:first-child){padding-top:0 !important;}`
+      })]
+    })
+  });
+};
+
+var _default = (0, _withDefaults.default)(CollapseGroup, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/cjs/collapse/collapse-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const MemoCollapseIcon: React.NamedExoticComponent<object>;
+export default MemoCollapseIcon;

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: "3069620932",
-      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: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.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/index.d.ts

@@ -48,3 +48,4 @@ 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

@@ -43,10 +43,11 @@ var _exportNames = {
   Modal: true,
   useModal: true,
   Backdrop: true,
+  Collapse: true,
   KeyMod: true,
   KeyCode: true
 };
-exports.KeyCode = exports.KeyMod = 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;
+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");
 
@@ -254,6 +255,10 @@ 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; }

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("../shared/clear-icon"));
+var _clearIcon = _interopRequireDefault(require("../utils/clear-icon"));
 
 var _color = require("../utils/color");
 

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

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useTheme = _interopRequireDefault(require("../use-theme"));
 
-var _clearIcon = _interopRequireDefault(require("../shared/clear-icon"));
+var _clearIcon = _interopRequireDefault(require("../utils/clear-icon"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 

package/cjs/text/text.d.ts

@@ -33,7 +33,6 @@ declare const defaultProps: {
     b: boolean;
     small: boolean;
     transform: "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "uppercase" | "lowercase" | "full-width" | "full-size-kana";
-    upperCase: boolean;
     i: boolean;
     span: boolean;
     del: boolean;
@@ -56,7 +55,6 @@ declare const _default: React.ComponentType<Partial<{
     b: boolean;
     small: boolean;
     transform: "inherit" | "initial" | "revert" | "unset" | "none" | "capitalize" | "uppercase" | "lowercase" | "full-width" | "full-size-kana";
-    upperCase: boolean;
     i: boolean;
     span: boolean;
     del: boolean;
@@ -65,5 +63,5 @@ declare const _default: React.ComponentType<Partial<{
     weight: TextWeights;
     className: string;
     color: string;
-}> & Omit<TextProps, "small" | "b" | "blockquote" | "del" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "i" | "p" | "span" | "className" | "color" | "weight" | "transform" | "upperCase">>;
+}> & Omit<TextProps, "small" | "b" | "blockquote" | "del" | "em" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "i" | "p" | "span" | "className" | "color" | "weight" | "transform">>;
 export default _default;

package/cjs/text/text.js

@@ -28,7 +28,6 @@ const defaultProps = {
   b: false,
   small: false,
   transform: 'none',
-  upperCase: false,
   i: false,
   span: false,
   del: false,

package/cjs/theme/dark.js

@@ -22,7 +22,8 @@ const palette = { ..._common.default,
   background: '#000',
   foreground: '#fff',
   code: '#77C8E6',
-  border: '#333'
+  border: '#333',
+  selection: '#ff4ecd'
 };
 exports.palette = palette;
 const expressiveness = {

package/cjs/theme/default.js

@@ -23,7 +23,8 @@ const palette = { ..._common.default,
   background: '#fff',
   foreground: '#000',
   code: '#f81ce5',
-  border: '#eaeaea'
+  border: '#eaeaea',
+  selection: '#0070f3'
 };
 exports.palette = palette;
 const expressiveness = {

package/cjs/{shared → utils}/clear-icon.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+var _withDefaults = _interopRequireDefault(require("./with-defaults"));
 
 var _jsxRuntime = require("react/jsx-runtime");