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

package/esm/collapse/collapse.styles.js

@@ -0,0 +1,254 @@
+"use strict";
+
+exports.__esModule = true;
+exports.StyledCollapseView = exports.StyledCollapseIcon = exports.StyledCollapseGroup = exports.StyledCollapseContent = exports.StyledCollapse = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const StyledCollapse = (0, _stitches.styled)('div', {
+  transition: '$default',
+  '.nextui-collapse-title-content': {
+    w: '100%',
+    'h1,h2,h3,h4,h5,h6,p,span,b': {
+      margin: 0
+    }
+  },
+  '.nextui-collapse-title': {
+    d: 'flex',
+    jc: 'space-between',
+    ai: 'center',
+    color: '$foreground'
+  },
+  '.nextui-collapse-subtitle': {
+    color: '$accents5',
+    margin: 0,
+    '*': {
+      margin: 0
+    }
+  },
+  '.nextui-collapse-title-content-left': {
+    mr: '$sm'
+  },
+  '.nextui-collapse-title-content-left, .nextui-collapse-title-content-right': {
+    d: 'flex',
+    ai: 'center'
+  },
+  '@motion': {
+    transition: 'none',
+    '.nextui-collapse-title-content-right ': {
+      svg: {
+        transition: 'none'
+      }
+    }
+  },
+  variants: {
+    shadow: {
+      true: {
+        border: 'none',
+        boxShadow: '$md',
+        br: '$lg',
+        p: '0 $lg',
+        bg: '$background'
+      }
+    },
+    borderWeight: {
+      light: {
+        $$collapseBorderWidth: '$borderWeights$light'
+      },
+      normal: {
+        $$collapseBorderWidth: '$borderWeights$normal'
+      },
+      bold: {
+        $$collapseBorderWidth: '$borderWeights$bold'
+      },
+      extrabold: {
+        $$collapseBorderWidth: '$borderWeights$extrabold'
+      },
+      black: {
+        $$collapseBorderWidth: '$borderWeights$black'
+      }
+    },
+    divider: {
+      true: {
+        borderTop: '$$collapseBorderWidth solid $border',
+        borderBottom: '$$collapseBorderWidth solid $border'
+      }
+    },
+    bordered: {
+      true: {
+        br: '$lg',
+        p: '0 $lg',
+        border: '$$collapseBorderWidth solid $border'
+      }
+    },
+    animated: {
+      true: {
+        '.nextui-collapse-title-content-right ': {
+          svg: {
+            transition: 'transform 200ms ease'
+          }
+        }
+      },
+      false: {
+        transition: 'none'
+      }
+    },
+    visible: {
+      true: {
+        '.nextui-collapse-title-content-right ': {
+          svg: {
+            transform: 'rotateZ(-90deg)'
+          }
+        }
+      },
+      false: {
+        '.nextui-collapse-title-content-right': {
+          svg: {
+            transform: 'rotateZ(0deg)'
+          }
+        }
+      }
+    },
+    isDark: {
+      true: {}
+    }
+  },
+  defaultVariants: {
+    borderWeight: 'light'
+  },
+  compoundVariants: [// isDark && shadow
+  {
+    isDark: true,
+    shadow: true,
+    css: {
+      bg: '$accents1'
+    }
+  }]
+}, _stitches.sharedFocus);
+exports.StyledCollapse = StyledCollapse;
+const StyledCollapseView = (0, _stitches.styled)('div', {
+  w: '100%',
+  d: 'block',
+  ta: 'left',
+  bg: 'transparent',
+  border: 'none',
+  cursor: 'pointer',
+  outline: 'none',
+  padding: '$lg 0',
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed',
+        '.nextui-collapse-title, .nextui-collapse-subtitle': {
+          opacity: 0.5
+        }
+      }
+    }
+  }
+});
+exports.StyledCollapseView = StyledCollapseView;
+const StyledCollapseContent = (0, _stitches.styled)('div', {
+  fontSize: '$base',
+  lineHeight: '$lg',
+  pb: '$lg',
+  '*:first-child': {
+    mt: 0
+  },
+  '*:last-child': {
+    mb: 0
+  }
+});
+exports.StyledCollapseContent = StyledCollapseContent;
+const StyledCollapseIcon = (0, _stitches.styled)('svg', {
+  path: {
+    stroke: '$accents5'
+  }
+});
+exports.StyledCollapseIcon = StyledCollapseIcon;
+const StyledCollapseGroup = (0, _stitches.styled)('div', {
+  width: 'auto',
+  padding: '0 $sm',
+  'div + div': {
+    borderTop: 'none'
+  },
+  [`& ${StyledCollapse}:first-child`]: {
+    borderTop: 'none'
+  },
+  [`& ${StyledCollapse}:last-child`]: {
+    borderBottom: 'none'
+  },
+  variants: {
+    borderWeight: {
+      light: {
+        $$collapseGroupBorderWidth: '$borderWeights$light'
+      },
+      normal: {
+        $$collapseGroupBorderWidth: '$borderWeights$normal'
+      },
+      bold: {
+        $$collapseGroupBorderWidth: '$borderWeights$bold'
+      },
+      extrabold: {
+        $$collapseGroupBorderWidth: '$borderWeights$extrabold'
+      },
+      black: {
+        $$collapseGroupBorderWidth: '$borderWeights$black'
+      }
+    },
+    shadow: {
+      true: {
+        br: '$lg',
+        border: 'none',
+        boxShadow: '$md',
+        p: '0 $lg',
+        bg: '$background'
+      }
+    },
+    bordered: {
+      true: {
+        br: '$lg',
+        p: '0 $lg',
+        border: '$$collapseGroupBorderWidth solid $border'
+      }
+    },
+    splitted: {
+      true: {
+        [`& ${StyledCollapse}`]: {
+          br: '$lg',
+          border: 'none',
+          bg: '$background',
+          boxShadow: '$md',
+          p: '0 $lg',
+          margin: '$md 0'
+        }
+      }
+    },
+    isDark: {
+      true: {}
+    }
+  },
+  defaultVariants: {
+    borderWeight: 'light',
+    shadow: false,
+    bordered: false,
+    splitted: false
+  },
+  compoundVariants: [// isDark && shadow
+  {
+    isDark: true,
+    shadow: true,
+    css: {
+      bg: '$accents1'
+    }
+  }, // splitted && isDark
+  {
+    isDark: true,
+    splitted: true,
+    css: {
+      [`& ${StyledCollapse}`]: {
+        bg: '$accents1'
+      }
+    }
+  }]
+});
+exports.StyledCollapseGroup = StyledCollapseGroup;

package/esm/collapse/index.d.ts

@@ -0,0 +1,6 @@
+import Collapse from './collapse';
+export type { CollapseProps } from './collapse';
+export type { CollapseGroupProps } from './collapse-group';
+export { StyledCollapse, StyledCollapseView, StyledCollapseContent, StyledCollapseIcon, StyledCollapseGroup } from './collapse.styles';
+export type { CollapseVariantsProps, CollapseViewVariantsProps, CollapseContentVariantsProps, CollapseIconVariantsProps, CollapseGroupVariantsProps } from './collapse.styles';
+export default Collapse;

package/esm/collapse/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledCollapseView = exports.StyledCollapseIcon = exports.StyledCollapseGroup = exports.StyledCollapseContent = exports.StyledCollapse = void 0;
+
+var _collapse = _interopRequireDefault(require("./collapse"));
+
+var _collapseGroup = _interopRequireDefault(require("./collapse-group"));
+
+var _collapse2 = require("./collapse.styles");
+
+exports.StyledCollapse = _collapse2.StyledCollapse;
+exports.StyledCollapseView = _collapse2.StyledCollapseView;
+exports.StyledCollapseContent = _collapse2.StyledCollapseContent;
+exports.StyledCollapseIcon = _collapse2.StyledCollapseIcon;
+exports.StyledCollapseGroup = _collapse2.StyledCollapseGroup;
+_collapse.default.Group = _collapseGroup.default; // export styled components
+
+var _default = _collapse.default;
+exports.default = _default;

package/esm/container/container.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { Wrap, Display, Justify, Direction, AlignItems, AlignContent } from '../utils/prop-types';
+interface Props {
+    gap?: number;
+    xs?: boolean;
+    sm?: boolean;
+    md?: boolean;
+    lg?: boolean;
+    xl?: boolean;
+    responsive?: boolean;
+    fluid?: boolean;
+    wrap?: Wrap;
+    display?: Display;
+    justify?: Justify;
+    direction?: Direction;
+    alignItems?: AlignItems;
+    alignContent?: AlignContent;
+    as?: keyof JSX.IntrinsicElements;
+    css?: CSS;
+}
+declare const defaultProps: {
+    gap: number;
+    xs: boolean;
+    sm: boolean;
+    md: boolean;
+    lg: boolean;
+    xl: boolean;
+    responsive: boolean;
+    fluid: boolean;
+    wrap: "nowrap" | "wrap" | "wrap-reverse";
+    as: keyof JSX.IntrinsicElements;
+    display: "flex" | "block" | "grid" | "inline" | "inline-block" | "inline-flex" | "inline-grid";
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type ContainerProps = Props & typeof defaultProps & NativeAttrs;
+declare type ComponentProps = Omit<Props, keyof typeof defaultProps> & Partial<typeof defaultProps> & NativeAttrs;
+declare type MemoContainerComponent<P = {}> = React.NamedExoticComponent<P>;
+declare const _default: MemoContainerComponent<ComponentProps>;
+export default _default;

package/esm/container/container.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _container = _interopRequireDefault(require("./container.styles"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  gap: 2,
+  xs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  responsive: true,
+  fluid: false,
+  wrap: 'wrap',
+  as: 'div',
+  display: 'block'
+};
+
+const Container = ({
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  wrap,
+  gap,
+  as,
+  display,
+  justify,
+  direction,
+  alignItems,
+  alignContent,
+  children,
+  responsive,
+  fluid,
+  css,
+  ...props
+}) => {
+  const gapUnit = (0, _react.useMemo)(() => {
+    return `calc(${gap} * $space$sm)`;
+  }, [gap]);
+
+  const getMaxWidth = () => {
+    if (xs) return '$breakpoints$xs';
+    if (sm) return '$breakpoints$sm';
+    if (md) return '$breakpoints$md';
+    if (lg) return '$breakpoints$lg';
+    if (xl) return '$breakpoints$xl';
+    return '';
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_container.default, {
+    css: {
+      px: gapUnit,
+      maxWidth: getMaxWidth(),
+      alignItems,
+      alignContent,
+      flexWrap: wrap,
+      display: display,
+      justifyContent: justify,
+      flexDirection: direction,
+      ...css
+    },
+    responsive: responsive,
+    fluid: fluid,
+    ...props,
+    children: children
+  });
+};
+
+Container.toString = () => '.nextui-container';
+
+Container.defaultProps = defaultProps;
+
+var _default = /*#__PURE__*/_react.default.memo(Container);
+
+exports.default = _default;
+module.exports = exports.default;