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

A 3d Carousel that is built for React

"use strict";var e=require("react"),r=function(){return r=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},r.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var n,t={exports:{}},o={};var a,i,c={};
/**
 * @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 l(){return a||(a=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,h=console.info,v=console.warn,g=console.error,b=console.group,_=console.groupCollapsed,S=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 f=s.split("\n"),p=u.split("\n");for(l=c=0;c<f.length&&!f[c].includes("DetermineComponentFrameRoot");)c++;for(;l<p.length&&!p[l].includes("DetermineComponentFrameRoot");)l++;if(c===f.length||l===p.length)for(c=f.length-1,l=p.length-1;1<=c&&0<=l&&f[c]!==p[l];)l--;for(;1<=c&&0<=l;c--,l--)if(f[c]!==p[l]){if(1!==c||1!==l)do{if(c--,0>--l||f[c]!==p[l]){var d="\n"+f[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:h}),warn:A({},e,{value:v}),error:A({},e,{value:g}),group:A({},e,{value:b}),groupCollapsed:A({},e,{value:_}),groupEnd:A({},e,{value:S})})}0>Y&&console.error("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=n}return f=(f=e?e.displayName||e.name:"")?a(f):"","function"==typeof e&&K.set(e,f),f}function l(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 l(e.type);case F:r=e._payload,e=e._init;try{return l(e(r))}catch(e){}}return""}function s(){var e=B.A;return null===e?null:e.getOwner()}function u(){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 f(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 l=n.children;if(void 0!==l)if(a)if(z(l)){for(a=0;a<l.length;a++)p(l[a],e);Object.freeze&&Object.freeze(l)}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 p(l,e)}else l="",(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(l+=" 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")+" />",l=" 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,l);if(L.call(n,"key")){l=r(e);var f=Object.keys(n).filter((function(e){return"key"!==e}));a=0<f.length?"{key: someKey, "+f.join(": ..., ")+": ...}":"{key: someKey}",G[l+a]||(f=0<f.length?"{"+f.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,l,f,l),G[l+a]=!0)}if(l=null,void 0!==o&&(t(o),l=""+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),l=""+n.key),"key"in n)for(var d in o={},n)"key"!==d&&(o[d]=n[d]);else o=n;return l&&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:u}):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,l,c,0,s(),o)}function p(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=s();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!==s()&&(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=l(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,h,v,g,b,_,S,w=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=w.__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={};c.Fragment=C,c.jsx=function(e,r,n,t,o){return f(e,r,n,!1,0,o)},c.jsxs=function(e,r,n,t,o){return f(e,r,n,!0,0,o)}}()),c}var s=(i||(i=1,"production"===process.env.NODE_ENV?t.exports=function(){if(n)return o;n=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function t(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 o.Fragment=r,o.jsx=t,o.jsxs=t,o}():t.exports=l()),t.exports);var u="ReactSpinCarousel3D-module_carouselContainer__T3hc7",f="ReactSpinCarousel3D-module_itemsContainer__yN-pE",p="ReactSpinCarousel3D-module_carouselItem__o4BLL",d="ReactSpinCarousel3D-module_cardMode__FYuCl",m="ReactSpinCarousel3D-module_imageMode__OoxlJ",y="ReactSpinCarousel3D-module_radioButtonsContainer__KLYg0",h="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');module.exports=function(n){var t=n.data,o=n.renderItem,a=n.width,i=void 0===a?"100vw":a,c=n.height,l=void 0===c?300:c,v=n.itemWidth,g=void 0===v?300:v,b=n.accentColor,_=void 0===b?"hsl(204, 5%, 38%)":b,S=n.backgroundColor,w=void 0===S?"#F5F5F5":S,k=n.initialActiveIndex,x=void 0===k?Math.floor(t.length/2):k,C=n.isAutoPlay,j=void 0!==C&&C,R=n.autoPlayInterval,O=void 0===R?5e3:R,D=n.showRadioButtons,N=void 0===D||D,E=n.customRadioButtons,T=n.radioButtonStyle,$=void 0===T?{}:T,F=n.containerStyle,M=void 0===F?{}:F,P=n.itemStyle,I=void 0===P?{}:P,B=n.onItemClick,L=n.displayMode,A=void 0===L?"card":L,X=n.imageFit,z=void 0===X?"cover":X,Y=n.imagePosition,J=void 0===Y?"center":Y,U=e.useState(x),V=U[0],W=U[1],K=e.useState(!1),H=K[0],q=K[1],G=e.useState(!1),Q=G[0],Z=G[1],ee=e.useState(0),re=ee[0],ne=ee[1],te=e.useState(0),oe=te[0],ae=te[1],ie=e.useRef(null),ce=e.useCallback((function(e,r){B&&B(e,r)}),[B]);e.useEffect((function(){if(j&&!H&&!Q){var e=setInterval((function(){W((function(e){return(e+1)%t.length}))}),O);return function(){return clearInterval(e)}}}),[H,j,t.length,O,Q]);var le=function(e){Z(!0),ne(e.touches[0].clientX),ae(e.touches[0].clientX)},se=function(e){Q&&ae(e.touches[0].clientX)},ue=function(){if(Q){var e=re-oe;Math.abs(e)>50&&W(e>0?function(e){return(e+1)%t.length}:function(e){return 0===e?t.length-1:e-1}),Z(!1)}},fe=function(e){Z(!0),ne(e.clientX),ae(e.clientX)},pe=function(e){Q&&ae(e.clientX)},de=function(){if(q(!1),Q){var e=re-oe;Math.abs(e)>50&&W(e>0?function(e){return(e+1)%t.length}:function(e){return 0===e?t.length-1:e-1}),Z(!1)}};return s.jsxs("section",{className:u,style:r({width:"number"==typeof i?"".concat(i,"px"):i,"--accent-color":_,"--background-color":w,"--image-fit":z,"--image-position":J},M),children:[s.jsx("div",{className:f,style:{height:"number"==typeof l?"".concat(l,"px"):l,"--item-width":"number"==typeof g?g:parseFloat(g)||0},children:t.map((function(e,n){var a=V-n,i="number"==typeof g?g:parseFloat(g)||0;return s.jsx("div",{className:"".concat(p," ").concat("image"===A?m:d),style:r({"--item-width":i,transform:"\n                      translateX(-50%) \n                      rotateY(".concat(-10*a,"deg) \n                      translateX(").concat(a*-i,"px)\n                    "),zIndex:t.length-Math.abs(a),backgroundColor:"card"===A?w:"transparent",transition:Q?"none":"transform 0.5s ease-in-out"},I),onClick:function(){return ce(e,n)},onMouseEnter:function(){return q(!0)},ref:ie,onTouchStart:le,onTouchMove:se,onTouchEnd:ue,onMouseDown:fe,onMouseMove:pe,onMouseUp:de,onMouseLeave:de,children:o(e,n)},n)}))}),E?s.jsx("div",{className:y,children:t.map((function(r,n){return s.jsx(e.Fragment,{children:E(n,V===n,W)},n)}))}):N?s.jsx("div",{className:y,children:t.map((function(e,n){return s.jsx("input",{type:"radio",name:"carousel-".concat(Math.random().toString(36).substring(2,9)),className:h,checked:V===n,onChange:function(){return W(n)},style:r(r({},$),{borderColor:_})},n)}))}):null]})};
//# sourceMappingURL=index.js.map