react-tech-slider/dist/index.js

Reusable React component slider for showcasing brands

import"./index.css";import e,{useId as r}from"react";var t,n={exports:{}},a={};var o,s,i={};
/**
 * @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 o||(o=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===N?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case y:return"Fragment";case b:return"Profiler";case m:return"StrictMode";case j:return"Suspense";case k:return"SuspenseList";case w:return"Activity"}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"Portal";case h:return(e.displayName||"Context")+".Provider";case g:return(e._context.displayName||"Context")+".Consumer";case v:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case x:return null!==(t=e.displayName||null)?t:r(e.type)||"Memo";case S:t=e._payload,e=e._init;try{return r(e(t))}catch(e){}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,a="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),t(e)}}function a(e){if(e===y)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===S)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function s(){var e=r(this.type);return T[e]||(T[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 l(e,t,a,o,i,l,f,d){var y,m=t.children;if(void 0!==m)if(o)if(O(m)){for(o=0;o<m.length;o++)c(m[o]);Object.freeze&&Object.freeze(m)}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 c(m);if(_.call(t,"key")){m=r(e);var b=Object.keys(t).filter((function(e){return"key"!==e}));o=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",A[m+o]||(b=0<b.length?"{"+b.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} />',o,m,b,m),A[m+o]=!0)}if(m=null,void 0!==a&&(n(a),m=""+a),function(e){if(_.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(t)&&(n(t.key),m=""+t.key),"key"in t)for(var g in a={},t)"key"!==g&&(a[g]=t[g]);else a=t;return m&&function(e,r){function t(){u||(u=!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))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(a,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,t,n,a,o,i,l){return t=o.ref,e={$$typeof:p,type:e,key:r,props:o,_owner:a},null!==(void 0!==t?t: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.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,l,0,null===(y=$.A)?null:y.getOwner(),a,f,d)}function c(e){"object"==typeof e&&null!==e&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var u,f=e,p=Symbol.for("react.transitional.element"),d=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),m=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),h=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),j=Symbol.for("react.suspense"),k=Symbol.for("react.suspense_list"),x=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),N=Symbol.for("react.client.reference"),$=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,_=Object.prototype.hasOwnProperty,O=Array.isArray,R=console.createTask?console.createTask:function(){return null},T={},E=(f={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(f,o)(),P=R(a(o)),A={};i.Fragment=y,i.jsx=function(e,r,t,n,o){var s=1e4>$.recentlyCreatedOwnerStacks++;return l(e,r,t,!1,0,o,s?Error("react-stack-top-frame"):E,s?R(a(e)):P)},i.jsxs=function(e,r,t,n,o){var s=1e4>$.recentlyCreatedOwnerStacks++;return l(e,r,t,!0,0,o,s?Error("react-stack-top-frame"):E,s?R(a(e)):P)}}()),i}var c=(s||(s=1,"production"===process.env.NODE_ENV?n.exports=function(){if(t)return a;t=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(r,t,n){var a=null;if(void 0!==n&&(a=""+n),void 0!==t.key&&(a=""+t.key),"key"in t)for(var o in n={},t)"key"!==o&&(n[o]=t[o]);else n=t;return t=n.ref,{$$typeof:e,type:r,key:a,ref:void 0!==t?t:null,props:n}}return a.Fragment=r,a.jsx=n,a.jsxs=n,a}():n.exports=l()),n.exports);function u(e,r,t,n){return{...e||t?{width:`${e??t}rem`}:{},...r?{height:`${r}rem`}:{},...n}}function f({brandsList:e,gap:t,iconWidth:n,speed:a=1,className:o}){const s=r(),i=a>0?a:1,l=2/i,f=60/i,p=Math.max(e.length,1),d=Math.max(p*l,2.53/i),y=`rts-fade-cycle-${s}`.replace(/[^a-zA-Z0-9_-]/g,"-");const m=e=>e/d*100,b=`\n    @keyframes ${y} {\n      0% {\n        transform: translateY(30px);\n        opacity: 0;\n      }\n\n      ${m(.5/i)}% {\n        transform: translateY(0);\n        opacity: 1;\n      }\n\n      ${m(1.77/i)}% {\n        transform: translateY(0);\n        opacity: 1;\n      }\n\n      ${m(2.53/i)}%,\n      100% {\n        transform: translateY(-30px);\n        opacity: 0;\n      }\n    }\n  `,g=e.map(((r,t)=>function(e,r){if(0===e.length)return[];const t=r%e.length;return[...e.slice(t),...e.slice(0,t)]}(e,t)));return c.jsxs("div",{className:["rts-fade-out-container",o].filter(Boolean).join(" "),children:[c.jsx("style",{children:b}),c.jsx("div",{className:"rts-fade-track",style:{"--rts-animation-name":y,"--rts-animation-cycle":`${d}s`,...void 0!==t?{gap:`${t}px`}:{}},children:g.map(((e,r)=>c.jsx("div",{className:"rts-fade-column",children:e.map(((e,t)=>c.jsx("div",{className:"rts-fade-item",style:{"--rts-column-delay":r*f+"ms","--rts-logo-delay":t*l+"s"},children:c.jsx("img",{src:e.img,alt:e.name,className:["brand-slider","rts-fade-brand-slider",e.className??""].filter(Boolean).join(" "),style:u(e.width,e.height,n,e.style),loading:"lazy"})},`${r}-${e.id}`)))},r)))})]})}function p(e,r,t,n){return{...e||t?{width:`${e??t}rem`}:{},...r?{height:`${r}rem`}:{},...n}}function d({brandsList:e,borderWidth:r=1,borderColor:t="#7c05d8",backgroundColor:n="#00000033",iconWidth:a,isPlay:o=!0,pauseOnHoverActive:s=!1,durationMs:i=3e4,className:l}){const u=Math.max(e.length,1);return c.jsx("div",{className:["wrapper","rts-wrapper",o?"":"wrapper-paused rts-wrapper-paused",s?"wrapper-paused-hover rts-wrapper-paused-hover":"",l].filter(Boolean).join(" "),style:{"--amount-brands":u,"--transition-slider-duration":i/1e3+"s",borderTop:`${r}px solid ${t}`,borderBottom:`${r}px solid ${t}`,backgroundColor:n},children:e.map((({id:e,name:r,img:t,width:n,height:o,style:s,className:i},l)=>c.jsx("div",{className:["item","rts-item",`item${e}`].join(" "),style:{"--item":l+1},children:c.jsx("img",{src:t,alt:`${r}-icon`,className:["brand-slider","rts-brand-slider",i??""].filter(Boolean).join(" "),style:p(n,o,a,s),loading:"lazy"})},e)))})}function y(e){return"fades"===e.variant?c.jsx(f,{...e}):c.jsx(d,{...e})}export{y as Slider};