@nextui-org/react 1.0.2-alpha.2 → 1.0.2-beta.4

package/esm/css-baseline/index.js

@@ -1,11 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _cssBaseline = _interopRequireDefault(require("./css-baseline"));
-
-exports.default = _cssBaseline.default;
-module.exports = exports.default;
+export{default}from"./css-baseline";

package/esm/divider/divider.js

@@ -1,82 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-var _dimensions = require("../utils/dimensions");
-
-var _divider = require("./divider.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 = {
-  x: 0,
-  y: 0,
-  height: 1,
-  align: 'center'
-};
-
-const Divider = ({
-  height,
-  x,
-  y,
-  align,
-  children,
-  textColor,
-  css,
-  ...props
-}) => {
-  const alignCss = (0, _react.useMemo)(() => {
-    if (!align || align === 'center') return '';
-
-    if (align === 'left' || align === 'start') {
-      return {
-        transform: 'translateY(-50%)',
-        left: '7%'
-      };
-    }
-
-    return {
-      transform: 'translateY(-50%)',
-      left: 'auto',
-      right: '7%'
-    };
-  }, [align]);
-  const top = y ? (0, _dimensions.getMargin)(y / 2) : 0;
-  const left = x ? (0, _dimensions.getMargin)(x / 2) : 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider.StyledDivider, {
-    role: "separator",
-    css: {
-      margin: `${top} ${left}`,
-      height: `calc(${height} * 1px)`,
-      ...css
-    },
-    ...props,
-    children: children && /*#__PURE__*/(0, _jsxRuntime.jsx)(_divider.StyledDividerText, {
-      css: { ...alignCss
-      },
-      color: textColor,
-      className: "nextui-divider-text",
-      children: children
-    })
-  });
-};
-
-Divider.toString = () => '.nextui-divider';
-
-const MemoDivider = /*#__PURE__*/_react.default.memo(Divider);
-
-var _default = (0, _withDefaults.default)(MemoDivider, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import t,{useMemo as r}from"react";import e from"../utils/with-defaults";import{getMargin as i}from"../utils/dimensions";import{StyledDivider as s,StyledDividerText as o}from"./divider.styles";import{jsx as n}from"react/jsx-runtime";const a=({height:t,x:e,y:a,align:l,children:m,textColor:c,css:d,...f})=>{const h=r((()=>l&&"center"!==l?"left"===l||"start"===l?{transform:"translateY(-50%)",left:"7%"}:{transform:"translateY(-50%)",left:"auto",right:"7%"}:""),[l]),x=a?i(a/2):0,u=e?i(e/2):0;return n(s,{role:"separator",css:{margin:`${x} ${u}`,height:`calc(${t} * 1px)`,...d},...f,children:m&&n(o,{css:{...h},color:c,className:"nextui-divider-text",children:m})})};a.toString=()=>".nextui-divider";const l=t.memo(a);export default e(l,{x:0,y:0,height:1,align:"center"});

package/esm/divider/divider.styles.js

@@ -1,77 +1 @@
-"use strict";
-
-exports.__esModule = true;
-exports.StyledDividerText = exports.StyledDivider = void 0;
-
-var _stitches = require("../theme/stitches.config");
-
-const StyledDivider = (0, _stitches.styled)('div', {
-  width: '100%',
-  maxWidth: '100%',
-  position: 'relative',
-  variants: {
-    color: {
-      default: {
-        bg: '$border'
-      },
-      primary: {
-        bg: '$primary'
-      },
-      secondary: {
-        bg: '$secondary'
-      },
-      success: {
-        bg: '$success'
-      },
-      warning: {
-        bg: '$warning'
-      },
-      error: {
-        bg: '$error'
-      }
-    }
-  },
-  defaultVariants: {
-    color: 'default'
-  }
-});
-exports.StyledDivider = StyledDivider;
-const StyledDividerText = (0, _stitches.styled)('span', {
-  position: 'absolute',
-  left: '50%',
-  top: '50%',
-  minHeight: '100%',
-  display: 'inline-flex',
-  jc: 'center',
-  ai: 'center',
-  transform: 'translate(-50%, -50%)',
-  padding: '0 $lg',
-  fontSize: '$base',
-  fontWeight: 'bold',
-  textTransform: 'capitalize',
-  backgroundColor: '$background',
-  zIndex: '$1',
-  variants: {
-    color: {
-      default: {
-        color: '$text'
-      },
-      primary: {
-        color: '$primary'
-      },
-      secondary: {
-        color: '$secondary'
-      },
-      success: {
-        color: '$success'
-      },
-      warning: {
-        color: '$warning'
-      },
-      error: {
-        color: '$error'
-      }
-    }
-  }
-});
-exports.StyledDividerText = StyledDividerText;
+import{styled as r}from"../theme/stitches.config";export const StyledDivider=r("div",{width:"100%",maxWidth:"100%",position:"relative",variants:{color:{default:{bg:"$border"},primary:{bg:"$primary"},secondary:{bg:"$secondary"},success:{bg:"$success"},warning:{bg:"$warning"},error:{bg:"$error"}}},defaultVariants:{color:"default"}});export const StyledDividerText=r("span",{position:"absolute",left:"50%",top:"50%",minHeight:"100%",display:"inline-flex",jc:"center",ai:"center",transform:"translate(-50%, -50%)",padding:"0 $lg",fontSize:"$base",fontWeight:"bold",textTransform:"capitalize",backgroundColor:"$background",zIndex:"$1",variants:{color:{default:{color:"$text"},primary:{color:"$primary"},secondary:{color:"$secondary"},success:{color:"$success"},warning:{color:"$warning"},error:{color:"$error"}}}});

package/esm/divider/index.js

@@ -1,15 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = exports.StyledDividerText = exports.StyledDivider = void 0;
-
-var _divider = _interopRequireDefault(require("./divider"));
-
-var _divider2 = require("./divider.styles");
-
-exports.StyledDivider = _divider2.StyledDivider;
-exports.StyledDividerText = _divider2.StyledDividerText;
-var _default = _divider.default;
-exports.default = _default;
+import e from"./divider";export{StyledDivider,StyledDividerText}from"./divider.styles";export default e;

package/esm/grid/grid-container.js

@@ -1,60 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _gridItem = _interopRequireDefault(require("./grid-item"));
-
-var _clsx = _interopRequireDefault(require("../utils/clsx"));
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-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: 0,
-  wrap: 'wrap',
-  className: ''
-};
-
-const GridContainer = ({
-  gap,
-  wrap,
-  css,
-  children,
-  className,
-  ...props
-}) => {
-  const gapUnit = (0, _react.useMemo)(() => {
-    return `calc(${gap} * $space$3)`;
-  }, [gap]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_gridItem.default, {
-    className: (0, _clsx.default)('nextui-grid-container', className),
-    css: {
-      $$gridGapUnit: gapUnit,
-      display: 'flex',
-      flexWrap: wrap,
-      boxZizing: 'border-box',
-      margin: 'calc(-1 * $$gridGapUnit)',
-      width: 'calc(100% + $$gridGapUnit * 2)',
-      ...css
-    },
-    ...props,
-    children: children
-  });
-};
-
-GridContainer.toString = () => '.nextui-grid-container';
-
-var _default = (0, _withDefaults.default)(GridContainer, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import r,{useMemo as i}from"react";import a from"./grid-item";import t from"../utils/clsx";import c from"../utils/with-defaults";import{jsx as e}from"react/jsx-runtime";const s=({gap:r,wrap:c,css:s,children:o,className:n,...p})=>{const l=i((()=>`calc(${r} * $space$3)`),[r]);return e(a,{className:t("nextui-grid-container",n),css:{$$gridGapUnit:l,display:"flex",flexWrap:c,boxZizing:"border-box",margin:"calc(-1 * $$gridGapUnit)",width:"calc(100% + $$gridGapUnit * 2)",...s},...p,children:o})};s.toString=()=>".nextui-grid-container";export default c(s,{gap:0,wrap:"wrap",className:""});

package/esm/grid/grid-item.js

@@ -1,123 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _grid = require("./grid.styles");
-
-var _clsx = _interopRequireDefault(require("../utils/clsx"));
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-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 = {
-  xs: false,
-  sm: false,
-  md: false,
-  lg: false,
-  xl: false,
-  className: ''
-};
-
-const getItemLayout = val => {
-  const display = val === 0 ? 'none' : 'inherit';
-
-  if (typeof val === 'number') {
-    const width = 100 / 12 * val;
-    const ratio = width > 100 ? '100%' : width < 0 ? '0' : `${width}%`;
-    return {
-      flexGrow: 0,
-      display,
-      maxWidth: ratio,
-      flexBasis: ratio
-    };
-  }
-
-  return {
-    flexGrow: 1,
-    display,
-    maxWidth: '100%',
-    flexBasis: '0'
-  };
-};
-
-const GridItem = ({
-  xs,
-  sm,
-  md,
-  lg,
-  xl,
-  css,
-  justify,
-  direction,
-  alignItems,
-  alignContent,
-  children,
-  className,
-  ...props
-}) => {
-  const classes = (0, _react.useMemo)(() => {
-    const breaks = {
-      xs,
-      sm,
-      md,
-      lg,
-      xl
-    };
-    const classString = Object.keys(breaks).reduce((pre, name) => {
-      if (breaks[name] !== undefined && breaks[name] !== false) return `${pre} ${name}`;
-      return pre;
-    }, '');
-    return classString.trim();
-  }, [xs, sm, md, lg, xl]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_grid.StyledGridItem, {
-    className: (0, _clsx.default)('nextui-grid-item', classes, className),
-    css: {
-      alignItems,
-      alignContent,
-      justifyContent: justify,
-      flexDirection: direction,
-      '&.xs': { ...getItemLayout(xs)
-      },
-      '@xsMax': {
-        '&.xs': { ...getItemLayout(xs)
-        }
-      },
-      '@sm': {
-        '&.sm': { ...getItemLayout(sm)
-        }
-      },
-      '@md': {
-        '&.md': { ...getItemLayout(md)
-        }
-      },
-      '@lg': {
-        '&.lg': { ...getItemLayout(lg)
-        }
-      },
-      '@xl': {
-        '&.xl': { ...getItemLayout(xl)
-        }
-      },
-      ...css
-    },
-    ...props,
-    children: children
-  });
-};
-
-GridItem.toString = () => '.nextui-grid-item';
-
-var _default = (0, _withDefaults.default)(GridItem, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import t,{useMemo as s}from"react";import{StyledGridItem as e}from"./grid.styles";import i from"../utils/clsx";import r from"../utils/with-defaults";import{jsx as l}from"react/jsx-runtime";const m=t=>{const s=0===t?"none":"inherit";if("number"==typeof t){const e=100/12*t,i=e>100?"100%":e<0?"0":`${e}%`;return{flexGrow:0,display:s,maxWidth:i,flexBasis:i}}return{flexGrow:1,display:s,maxWidth:"100%",flexBasis:"0"}},n=({xs:t,sm:r,md:n,lg:o,xl:x,css:a,justify:c,direction:d,alignItems:f,alignContent:u,children:g,className:p,...y})=>{const h=s((()=>{const s={xs:t,sm:r,md:n,lg:o,xl:x};return Object.keys(s).reduce(((t,e)=>void 0!==s[e]&&!1!==s[e]?`${t} ${e}`:t),"").trim()}),[t,r,n,o,x]);return l(e,{className:i("nextui-grid-item",h,p),css:{alignItems:f,alignContent:u,justifyContent:c,flexDirection:d,"&.xs":{...m(t)},"@xsMax":{"&.xs":{...m(t)}},"@sm":{"&.sm":{...m(r)}},"@md":{"&.md":{...m(n)}},"@lg":{"&.lg":{...m(o)}},"@xl":{"&.xl":{...m(x)}},...a},...y,children:g})};n.toString=()=>".nextui-grid-item";export default r(n,{xs:!1,sm:!1,md:!1,lg:!1,xl:!1,className:""});

package/esm/grid/grid.js

@@ -1,29 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _gridItem = _interopRequireDefault(require("./grid-item"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-const Grid = ({
-  children,
-  css,
-  ...props
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_gridItem.default, {
-    css: { ...css
-    },
-    ...props,
-    children: children
-  });
-};
-
-var _default = Grid;
-exports.default = _default;
-module.exports = exports.default;
+import r from"react";import t from"./grid-item";import{jsx as e}from"react/jsx-runtime";export default({children:r,css:i,...m})=>e(t,{css:{...i},...m,children:r});

package/esm/grid/grid.styles.js

@@ -1,15 +1 @@
-"use strict";
-
-exports.__esModule = true;
-exports.StyledGridItem = exports.StyledGridContainer = void 0;
-
-var _stitches = require("../theme/stitches.config");
-
-const StyledGridContainer = (0, _stitches.styled)('div', {});
-exports.StyledGridContainer = StyledGridContainer;
-const StyledGridItem = (0, _stitches.styled)('div', {
-  margin: 0,
-  boxSizing: 'border-box',
-  padding: '$$gridGapUnit'
-});
-exports.StyledGridItem = StyledGridItem;
+import{styled as i}from"../theme/stitches.config";export const StyledGridContainer=i("div",{});export const StyledGridItem=i("div",{margin:0,boxSizing:"border-box",padding:"$$gridGapUnit"});

package/esm/grid/index.js

@@ -1,18 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = exports.StyledGridItem = exports.StyledGridContainer = void 0;
-
-var _grid = _interopRequireDefault(require("./grid"));
-
-var _gridContainer = _interopRequireDefault(require("./grid-container"));
-
-var _grid2 = require("./grid.styles");
-
-exports.StyledGridContainer = _grid2.StyledGridContainer;
-exports.StyledGridItem = _grid2.StyledGridItem;
-_grid.default.Container = _gridContainer.default;
-var _default = _grid.default;
-exports.default = _default;
+import r from"./grid";import t from"./grid-container";export{StyledGridContainer,StyledGridItem}from"./grid.styles";r.Container=t;export default r;

package/esm/image/image.js

@@ -1,150 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _image = _interopRequireDefault(require("./image.skeleton"));
-
-var _useRealShape = _interopRequireDefault(require("../use-real-shape"));
-
-var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
-
-var _useResize = _interopRequireDefault(require("../use-resize"));
-
-var _image2 = require("./image.styles");
-
-var _clsx = _interopRequireDefault(require("../utils/clsx"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const defaultProps = {
-  showSkeleton: true,
-  autoResize: false,
-  objectFit: 'scale-down',
-  maxDelay: 3000,
-  className: ''
-};
-
-const Image = ({
-  src,
-  width,
-  height,
-  showSkeleton: showSkeletonProp,
-  className,
-  maxDelay,
-  autoResize,
-  objectFit,
-  containerCss,
-  css,
-  ...props
-}) => {
-  const [loading, setLoading] = (0, _react.useState)(true);
-  const [showSkeleton, setShowSkeleton] = (0, _react.useState)(showSkeletonProp);
-  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 onImageLoaded = () => {
-    setLoading(false);
-  };
-
-  (0, _react.useEffect)(() => {
-    if (!showAnimation) return;
-    if (!imageRef.current) return;
-
-    if (imageRef.current.complete) {
-      setLoading(false);
-      setShowSkeleton(false);
-    }
-  });
-  (0, _react.useEffect)(() => {
-    const timer = setTimeout(() => {
-      if (showAnimation) {
-        setShowSkeleton(false);
-      }
-
-      clearTimeout(timer);
-    }, maxDelay);
-    return () => clearTimeout(timer);
-  }, [loading]);
-  /**
-   * On mobile devices, the render witdth may be less than CSS width value.
-   * If the image is scaled, set the height manually.
-   * This is to ensure the aspect ratio of the image.
-   *
-   * If the image is auto width, ignore all.
-   */
-
-  (0, _react.useEffect)(() => {
-    if (!autoResize) return;
-    const notLoaded = shape.width === 0;
-    const isAutoZoom = zoomHeightRef.current === 'auto';
-    if (notLoaded || !width || !height) return;
-
-    if (shape.width < width) {
-      !isAutoZoom && setZoomHeight('auto');
-    } else {
-      isAutoZoom && setZoomHeight(h);
-    }
-  }, [shape, width]);
-  (0, _useResize.default)(() => {
-    if (!autoResize) return;
-    updateShape();
-  });
-  const getState = (0, _react.useMemo)(() => {
-    return loading ? 'loading' : 'ready';
-  }, [loading]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_image2.StyledImageContainer, {
-    className: (0, _clsx.default)('nextui-image-container', `nextui-image--${getState}`, className),
-    "data-state": getState,
-    ready: !loading,
-    css: { ...containerCss,
-      width: w,
-      height: zoomHeight
-    },
-    children: [showSkeleton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
-      opacity: 1
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_image2.StyledImage, {
-      ref: imageRef,
-      className: "nextui-image",
-      width: width,
-      height: height,
-      onLoad: onImageLoaded,
-      src: src,
-      "data-state": getState,
-      alt: props.alt || '',
-      css: {
-        objectFit,
-        ...css
-      },
-      ...props
-    })]
-  });
-};
-
-Image.toString = () => '.nextui-image';
-
-Image.defaultProps = defaultProps;
-
-var _default = /*#__PURE__*/_react.default.memo(Image);
-
-exports.default = _default;
-module.exports = exports.default;
+import t,{useEffect as e,useRef as o,useMemo as r,useState as a}from"react";import s from"./image.skeleton";import i from"../use-real-shape";import m from"../use-current-state";import c from"../use-resize";import{StyledImage as n,StyledImageContainer as u}from"./image.styles";import l from"../utils/clsx";import{jsx as p}from"react/jsx-runtime";import{jsxs as h}from"react/jsx-runtime";const d=({src:t,width:d,height:f,showSkeleton:x,className:g,maxDelay:w,autoResize:y,objectFit:j,containerCss:b,css:N,...k})=>{const[z,F]=a(!0),[S,T]=a(x),{w:$,h:D}=r((()=>({w:d?"number"==typeof d?`${d}px`:d:"auto",h:f?"number"==typeof f?`${f}px`:f:"auto"})),[d,f]),[R,C,L]=m(D),P=o(null),[q,v]=i(P),A=x&&!!d&&!!f;e((()=>{A&&P.current&&P.current.complete&&(F(!1),T(!1))})),e((()=>{const t=setTimeout((()=>{A&&T(!1),clearTimeout(t)}),w);return()=>clearTimeout(t)}),[z]),e((()=>{if(!y)return;const t=0===q.width,e="auto"===L.current;!t&&d&&f&&(q.width<d?!e&&C("auto"):e&&C(D))}),[q,d]),c((()=>{y&&v()}));const B=r((()=>z?"loading":"ready"),[z]);return h(u,{className:l("nextui-image-container",`nextui-image--${B}`,g),"data-state":B,ready:!z,css:{...b,width:$,height:R},children:[S&&p(s,{opacity:1}),p(n,{ref:P,className:"nextui-image",width:d,height:f,onLoad:()=>{F(!1)},src:t,"data-state":B,alt:k.alt||"",css:{objectFit:j,...N},...k})]})};d.toString=()=>".nextui-image",d.defaultProps={showSkeleton:!0,autoResize:!1,objectFit:"scale-down",maxDelay:3e3,className:""};export default t.memo(d);

package/esm/image/image.skeleton.js

@@ -1,50 +1 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
-
-var _image = require("./image.styles");
-
-var _clsx = _interopRequireDefault(require("../utils/clsx"));
-
-var _assertion = require("../utils/assertion");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-const defaultProps = {
-  opacity: 0.5,
-  className: ''
-};
-
-const ImageSkeleton = /*#__PURE__*/_react.default.memo(({
-  opacity,
-  css,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.StyledImageSkeleton, {
-    css: {
-      opacity,
-      ...css
-    },
-    className: (0, _clsx.default)('nextui-image-skeleton', className),
-    ...props
-  });
-});
-
-if (_assertion.__DEV__) {
-  ImageSkeleton.displayName = 'NextUI - ImageSkeleton';
-}
-
-ImageSkeleton.toString = () => '.nextui-image-skeleton';
-
-var _default = (0, _withDefaults.default)(ImageSkeleton, defaultProps);
-
-exports.default = _default;
-module.exports = exports.default;
+import t from"react";import e from"../utils/with-defaults";import{StyledImageSkeleton as s}from"./image.styles";import m from"../utils/clsx";import{__DEV__ as o}from"../utils/assertion";import{jsx as i}from"react/jsx-runtime";const a=t.memo((({opacity:t,css:e,className:o,...a})=>i(s,{css:{opacity:t,...e},className:m("nextui-image-skeleton",o),...a})));o&&(a.displayName="NextUI - ImageSkeleton"),a.toString=()=>".nextui-image-skeleton";export default e(a,{opacity:.5,className:""});