@carousel-ui/react-spin-carousel-3d/dist/index.mjs

A 3d Carousel that is built for React

import e,{useState as r,useRef as n,useCallback as t,useEffect as o}from"react";var a=function(){return a=Object.assign||function(e){for(var r,n=1,t=arguments.length;n<t;n++)for(var o in r=arguments[n])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},a.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var i,c={exports:{}},l={};var s,u,p={};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */function f(){return s||(s=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===I?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case C:return"Fragment";case x:return"Portal";case R:return"Profiler";case j:return"StrictMode";case E:return"Suspense";case T:return"SuspenseList"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case D:return(e.displayName||"Context")+".Provider";case O:return(e._context.displayName||"Context")+".Consumer";case N:var n=e.render;return(e=e.displayName)||(e=""!==(e=n.displayName||n.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case $:return null!==(n=e.displayName||null)?n:r(e.type)||"Memo";case F:n=e._payload,e=e._init;try{return r(e(n))}catch(e){}}return null}function n(e){return""+e}function t(e){try{n(e);var r=!1}catch(e){r=!0}if(r){var t=(r=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),n(e)}}function o(){}function a(e){if(void 0===J)try{throw Error()}catch(e){var r=e.stack.trim().match(/\n( *(at )?)/);J=r&&r[1]||"",U=-1<e.stack.indexOf("\n    at")?" (<anonymous>)":-1<e.stack.indexOf("@")?"@unknown:0:0":""}return"\n"+J+e+U}function i(e,r){if(!e||W)return"";var n=K.get(e);if(void 0!==n)return n;W=!0,n=Error.prepareStackTrace,Error.prepareStackTrace=void 0;var t;t=B.H,B.H=null,function(){if(0===Y){y=console.log,v=console.info,h=console.warn,g=console.error,b=console.group,_=console.groupCollapsed,w=console.groupEnd;var e={configurable:!0,enumerable:!0,value:o,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}Y++}();try{var i={DetermineComponentFrameRoot:function(){try{if(r){var n=function(){throw Error()};if(Object.defineProperty(n.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(n,[])}catch(e){var t=e}Reflect.construct(e,[],n)}else{try{n.call()}catch(e){t=e}e.call(n.prototype)}}else{try{throw Error()}catch(e){t=e}(n=e())&&"function"==typeof n.catch&&n.catch((function(){}))}}catch(e){if(e&&t&&"string"==typeof e.stack)return[e.stack,t.stack]}return[null,null]}};i.DetermineComponentFrameRoot.displayName="DetermineComponentFrameRoot";var c=Object.getOwnPropertyDescriptor(i.DetermineComponentFrameRoot,"name");c&&c.configurable&&Object.defineProperty(i.DetermineComponentFrameRoot,"name",{value:"DetermineComponentFrameRoot"});var l=i.DetermineComponentFrameRoot(),s=l[0],u=l[1];if(s&&u){var p=s.split("\n"),f=u.split("\n");for(l=c=0;c<p.length&&!p[c].includes("DetermineComponentFrameRoot");)c++;for(;l<f.length&&!f[l].includes("DetermineComponentFrameRoot");)l++;if(c===p.length||l===f.length)for(c=p.length-1,l=f.length-1;1<=c&&0<=l&&p[c]!==f[l];)l--;for(;1<=c&&0<=l;c--,l--)if(p[c]!==f[l]){if(1!==c||1!==l)do{if(c--,0>--l||p[c]!==f[l]){var d="\n"+p[c].replace(" at new "," at ");return e.displayName&&d.includes("<anonymous>")&&(d=d.replace("<anonymous>",e.displayName)),"function"==typeof e&&K.set(e,d),d}}while(1<=c&&0<=l);break}}}finally{W=!1,B.H=t,function(){if(0==--Y){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:A({},e,{value:y}),info:A({},e,{value:v}),warn:A({},e,{value:h}),error:A({},e,{value:g}),group:A({},e,{value:b}),groupCollapsed:A({},e,{value:_}),groupEnd:A({},e,{value:w})})}0>Y&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=n}return p=(p=e?e.displayName||e.name:"")?a(p):"","function"==typeof e&&K.set(e,p),p}function c(e){if(null==e)return"";if("function"==typeof e){var r=e.prototype;return i(e,!(!r||!r.isReactComponent))}if("string"==typeof e)return a(e);switch(e){case E:return a("Suspense");case T:return a("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case N:return e=i(e.render,!1);case $:return c(e.type);case F:r=e._payload,e=e._init;try{return c(e(r))}catch(e){}}return""}function l(){var e=B.A;return null===e?null:e.getOwner()}function s(){var e=r(this.type);return q[e]||(q[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function u(e,n,o,a,i,c){if("string"==typeof e||"function"==typeof e||e===C||e===R||e===j||e===E||e===T||e===M||"object"==typeof e&&null!==e&&(e.$$typeof===F||e.$$typeof===$||e.$$typeof===D||e.$$typeof===O||e.$$typeof===N||e.$$typeof===X||void 0!==e.getModuleId)){var u=n.children;if(void 0!==u)if(a)if(z(u)){for(a=0;a<u.length;a++)f(u[a],e);Object.freeze&&Object.freeze(u)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else f(u,e)}else u="",(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(u+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),null===e?a="null":z(e)?a="array":void 0!==e&&e.$$typeof===k?(a="<"+(r(e.type)||"Unknown")+" />",u=" Did you accidentally export a JSX literal instead of a component?"):a=typeof e,console.error("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",a,u);if(L.call(n,"key")){u=r(e);var p=Object.keys(n).filter((function(e){return"key"!==e}));a=0<p.length?"{key: someKey, "+p.join(": ..., ")+": ...}":"{key: someKey}",G[u+a]||(p=0<p.length?"{"+p.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',a,u,p,u),G[u+a]=!0)}if(u=null,void 0!==o&&(t(o),u=""+o),function(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(n)&&(t(n.key),u=""+n.key),"key"in n)for(var d in o={},n)"key"!==d&&(o[d]=n[d]);else o=n;return u&&function(e,r){function n(){V||(V=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}(o,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,n,t,o,a){return n=a.ref,e={$$typeof:k,type:e,key:r,props:a,_owner:o},null!==(void 0!==n?n:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:s}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,u,c,0,l(),o)}function f(e,r){if("object"==typeof e&&e&&e.$$typeof!==H)if(z(e))for(var n=0;n<e.length;n++){var t=e[n];d(t)&&m(t,r)}else if(d(e))e._store&&(e._store.validated=1);else if(null===e||"object"!=typeof e?n=null:n="function"==typeof(n=P&&e[P]||e["@@iterator"])?n:null,"function"==typeof n&&n!==e.entries&&(n=n.call(e))!==e)for(;!(e=n.next()).done;)d(e.value)&&m(e.value,r)}function d(e){return"object"==typeof e&&null!==e&&e.$$typeof===k}function m(e,n){if(e._store&&!e._store.validated&&null==e.key&&(e._store.validated=1,n=function(e){var n="",t=l();return t&&(t=r(t.type))&&(n="\n\nCheck the render method of `"+t+"`."),n||(e=r(e))&&(n="\n\nCheck the top-level render call using <"+e+">."),n}(n),!Q[n])){Q[n]=!0;var t="";e&&null!=e._owner&&e._owner!==l()&&(t=null,"number"==typeof e._owner.tag?t=r(e._owner.type):"string"==typeof e._owner.name&&(t=e._owner.name),t=" It was passed a child from "+t+".");var o=B.getCurrentStack;B.getCurrentStack=function(){var r=c(e.type);return o&&(r+=o()||""),r},console.error('Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',n,t),B.getCurrentStack=o}}var y,v,h,g,b,_,w,S=e,k=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),j=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),D=Symbol.for("react.context"),N=Symbol.for("react.forward_ref"),E=Symbol.for("react.suspense"),T=Symbol.for("react.suspense_list"),$=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),M=Symbol.for("react.offscreen"),P=Symbol.iterator,I=Symbol.for("react.client.reference"),B=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,A=Object.assign,X=Symbol.for("react.client.reference"),z=Array.isArray,Y=0;o.__reactDisabledLog=!0;var J,U,V,W=!1,K=new("function"==typeof WeakMap?WeakMap:Map),H=Symbol.for("react.client.reference"),q={},G={},Q={};p.Fragment=C,p.jsx=function(e,r,n,t,o){return u(e,r,n,!1,0,o)},p.jsxs=function(e,r,n,t,o){return u(e,r,n,!0,0,o)}}()),p}var d=(u||(u=1,"production"===process.env.NODE_ENV?c.exports=function(){if(i)return l;i=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(r,n,t){var o=null;if(void 0!==t&&(o=""+t),void 0!==n.key&&(o=""+n.key),"key"in n)for(var a in t={},n)"key"!==a&&(t[a]=n[a]);else t=n;return n=t.ref,{$$typeof:e,type:r,key:o,ref:void 0!==n?n:null,props:t}}return l.Fragment=r,l.jsx=n,l.jsxs=n,l}():c.exports=f()),c.exports);var m="ReactSpinCarousel3D-module_carouselContainer__T3hc7",y="ReactSpinCarousel3D-module_itemsContainer__yN-pE",v="ReactSpinCarousel3D-module_carouselItem__o4BLL",h="ReactSpinCarousel3D-module_cardMode__FYuCl",g="ReactSpinCarousel3D-module_imageMode__OoxlJ",b="ReactSpinCarousel3D-module_radioButtonsContainer__KLYg0",_="ReactSpinCarousel3D-module_radioButton__2CTOV";!function(e,r){void 0===r&&(r={});var n=r.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}('.ReactSpinCarousel3D-module_carouselContainer__T3hc7 {\r\n  width: 100%;\r\n  max-width: 100%;\r\n  display: flex;\r\n  box-sizing: border-box;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  overflow: hidden;\r\n  background-color: transparent;\r\n  padding-bottom: 2rem;\r\n}\r\n\r\n.ReactSpinCarousel3D-module_carouselContainer__T3hc7 img {\r\n  user-select: none;\r\n  -webkit-user-drag: none;\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n}\r\n\r\n.ReactSpinCarousel3D-module_itemsContainer__yN-pE {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  transform-style: preserve-3d;\r\n  perspective: calc(var(--item-width) * 2px);\r\n}\r\n\r\n/* Base carousel item styles */\r\n.ReactSpinCarousel3D-module_carouselItem__o4BLL {\r\n  position: absolute;\r\n  height: 100%;\r\n  left: 50%;\r\n  transform-origin: center;\r\n  backface-visibility: hidden;\r\n  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;\r\n  width: calc(var(--item-width) * 1px);\r\n  user-select: none;\r\n}\r\n\r\n/* Card mode specific styles */\r\n.ReactSpinCarousel3D-module_cardMode__FYuCl {\r\n  background-color: var(--background-color);\r\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);\r\n  border-radius: 10px;\r\n  overflow: auto;\r\n}\r\n\r\n/* Image mode specific styles */\r\n.ReactSpinCarousel3D-module_imageMode__OoxlJ {\r\n  background-color: transparent;\r\n  box-shadow: none;\r\n  border-radius: 0;\r\n  overflow: hidden;\r\n}\r\n\r\n.ReactSpinCarousel3D-module_imageMode__OoxlJ img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: var(--image-fit, cover);\r\n  object-position: var(--image-position, center);\r\n  display: block;\r\n  pointer-events: "none";\r\n}\r\n\r\n.ReactSpinCarousel3D-module_radioButtonsContainer__KLYg0 {\r\n  display: flex;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  gap: 2px;\r\n  margin-top: 16px;\r\n}\r\n\r\n.ReactSpinCarousel3D-module_radioButton__2CTOV {\r\n  width: 10px;\r\n  height: 10px;\r\n  appearance: none;\r\n  outline: none;\r\n  cursor: pointer;\r\n  border-radius: 50%;\r\n  border: 2px solid var(--accent-color);\r\n  background-color: transparent;\r\n  transition: all 0.3s ease;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n}\r\n\r\n.ReactSpinCarousel3D-module_radioButton__2CTOV:checked {\r\n  background-color: var(--accent-color);\r\n  border-color: var(--accent-color);\r\n  box-shadow: 0 0 8px hsla(204, 5%, 38%, 0.5);\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .ReactSpinCarousel3D-module_carouselItem__o4BLL {\r\n    width: 95% !important;\r\n  }\r\n}\r\n');var w=function(i){var c=i.data,l=i.renderItem,s=i.width,u=void 0===s?"100vw":s,p=i.height,f=void 0===p?300:p,w=i.itemWidth,S=void 0===w?300:w,k=i.accentColor,x=void 0===k?"hsl(204, 5%, 38%)":k,C=i.backgroundColor,j=void 0===C?"#F5F5F5":C,R=i.initialActiveIndex,O=void 0===R?Math.floor(c.length/2):R,D=i.isAutoPlay,N=void 0!==D&&D,E=i.autoPlayInterval,T=void 0===E?5e3:E,$=i.showRadioButtons,F=void 0===$||$,M=i.customRadioButtons,P=i.radioButtonStyle,I=void 0===P?{}:P,B=i.containerStyle,L=void 0===B?{}:B,A=i.itemStyle,X=void 0===A?{}:A,z=i.onItemClick,Y=i.displayMode,J=void 0===Y?"card":Y,U=i.imageFit,V=void 0===U?"cover":U,W=i.imagePosition,K=void 0===W?"center":W,H=r(O),q=H[0],G=H[1],Q=r(!1),Z=Q[0],ee=Q[1],re=r(!1),ne=re[0],te=re[1],oe=r(0),ae=oe[0],ie=oe[1],ce=r(0),le=ce[0],se=ce[1],ue=n(null),pe=t((function(e,r){z&&z(e,r)}),[z]);o((function(){if(N&&!Z&&!ne){var e=setInterval((function(){G((function(e){return(e+1)%c.length}))}),T);return function(){return clearInterval(e)}}}),[Z,N,c.length,T,ne]);var fe=function(e){te(!0),ie(e.touches[0].clientX),se(e.touches[0].clientX)},de=function(e){ne&&se(e.touches[0].clientX)},me=function(){if(ne){var e=ae-le;Math.abs(e)>50&&G(e>0?function(e){return(e+1)%c.length}:function(e){return 0===e?c.length-1:e-1}),te(!1)}},ye=function(e){te(!0),ie(e.clientX),se(e.clientX)},ve=function(e){ne&&se(e.clientX)},he=function(){if(ee(!1),ne){var e=ae-le;Math.abs(e)>50&&G(e>0?function(e){return(e+1)%c.length}:function(e){return 0===e?c.length-1:e-1}),te(!1)}};return d.jsxs("section",{className:m,style:a({width:"number"==typeof u?"".concat(u,"px"):u,"--accent-color":x,"--background-color":j,"--image-fit":V,"--image-position":K},L),children:[d.jsx("div",{className:y,style:{height:"number"==typeof f?"".concat(f,"px"):f,"--item-width":"number"==typeof S?S:parseFloat(S)||0},children:c.map((function(e,r){var n=q-r,t="number"==typeof S?S:parseFloat(S)||0;return d.jsx("div",{className:"".concat(v," ").concat("image"===J?g:h),style:a({"--item-width":t,transform:"\n                      translateX(-50%) \n                      rotateY(".concat(-10*n,"deg) \n                      translateX(").concat(n*-t,"px)\n                    "),zIndex:c.length-Math.abs(n),backgroundColor:"card"===J?j:"transparent",transition:ne?"none":"transform 0.5s ease-in-out"},X),onClick:function(){return pe(e,r)},onMouseEnter:function(){return ee(!0)},ref:ue,onTouchStart:fe,onTouchMove:de,onTouchEnd:me,onMouseDown:ye,onMouseMove:ve,onMouseUp:he,onMouseLeave:he,children:l(e,r)},r)}))}),M?d.jsx("div",{className:b,children:c.map((function(r,n){return d.jsx(e.Fragment,{children:M(n,q===n,G)},n)}))}):F?d.jsx("div",{className:b,children:c.map((function(e,r){return d.jsx("input",{type:"radio",name:"carousel-".concat(Math.random().toString(36).substring(2,9)),className:_,checked:q===r,onChange:function(){return G(r)},style:a(a({},I),{borderColor:x})},r)}))}):null]})};export{w as default};
//# sourceMappingURL=index.mjs.map