najwer23morsels 0.8.6 → 0.8.8

package/README.md

@@ -1,4 +1,4 @@
-The npm package najwer23morsels allows you to style its React UI components using native CSS logic, primarily through global CSS variables, enabling full customization without relying on additional styling libraries. This approach means you can control component appearance by simply overriding CSS variables or applying your own CSS rules, maintaining straightforward and native styling workflows. It supports styling flexibility by leveraging standard CSS practices, making it easy to adapt the design system to your own needs while keeping the styling logic simple and native to the web platform.
+The najwer23morsels npm package allows you to style React UI components using native CSS logic, primarily through global CSS variables. This enables full customization without relying on additional styling libraries. With this approach, you can control the appearance of a component simply by overriding CSS variables or applying your own CSS rules, keeping styling workflows simple and native. It supports styling flexibility by leveraging standard CSS practices, making it easy to customize the design system to your needs while maintaining styling logic that is straightforward and native to the web platform.
 
 ![NPM Downloads](https://img.shields.io/npm/dm/najwer23morsels)
 
@@ -55,6 +55,7 @@ export const Example = () => {
 
     /* MorselsButton */
     --n23mButtonBg: black;
+    --n23mButtonBorderColor: black;
     --n23mButtonBgDisabled: black;
 }
 ```

package/lib/Button-ClRkhVeI.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import{L as n}from"./Loader-B_e1Rrr4.js";import{s as e}from"./style-inject.es-BnTDb6vU.js";var r={n23mButtonButton:"Button-module_n23mButtonButton__IfHY-"};e('@layer n23mButton{.Button-module_n23mButtonButton__IfHY-{--boxShadow:0 4px 8px 0 rgba(0,0,0,.24),0 6px 20px 0 rgba(0,0,0,.19);-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--n23mButtonBg,var(--button-bg));border:1px solid var(--n23mButtonBorderColor,var(--button-borderColor,unset));border-radius:8px;box-shadow:none;cursor:pointer;height:var(--button-height,auto);letter-spacing:normal;padding:var(--button-padding,10px 17px);position:relative;transition:background-color .3s,box-shadow .3s;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:var(--button-width,auto);>span{display:inline-block;position:relative;z-index:1}&:before{background-color:inherit;border-radius:8px;content:"";inset:0;pointer-events:none;position:absolute;transition:filter .3s;z-index:0}@media (hover:hover) and (pointer:fine){&:hover:before{filter:brightness(100%)}&:hover{box-shadow:var(--boxShadow)}}&:active:before{filter:brightness(.8)}&:active{box-shadow:var(--boxShadow)}&:focus-visible:before{filter:brightness(.8);outline:none}&:focus-visible{box-shadow:var(--boxShadow);outline:none}&:disabled{background-color:var(--n23mButtonBgDisabled,var(--button-bgDisabled));box-shadow:none;cursor:not-allowed}}}');const i=({children:e,className:i,backgroundColor:a,padding:s,loading:l,height:d,width:b,borderColor:u,backgroundColorDisabled:h,...c})=>o("div",{className:["n23mButton",i].filter(Boolean).join(" "),children:[l&&t("div",{style:{width:b,height:d},children:t(n,{})}),!l&&t("button",{style:{...null!=s?{"--button-padding":s}:{},"--button-bg":a,"--button-height":d,"--button-width":b,"--button-bgDisabled":h,"--button-borderColor":u},className:[r.n23mButtonButton,"n23mButtonButton"].filter(Boolean).join(" "),...c,children:t("span",{children:e})})]});i.displayName="Button";export{i as B};

package/lib/Button.js

@@ -1 +1 @@
-export{B as Button}from"./Button-CXxpleNP.js";import"react/jsx-runtime";import"./Loader-B_e1Rrr4.js";import"./TextBox-clfMTADi.js";import"./style-inject.es-BnTDb6vU.js";
+export{B as Button}from"./Button-ClRkhVeI.js";import"react/jsx-runtime";import"./Loader-B_e1Rrr4.js";import"./TextBox-clfMTADi.js";import"./style-inject.es-BnTDb6vU.js";

package/lib/Carousel.js

@@ -1 +1 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useRef as t,useState as o,useEffect as n}from"react";import{B as l}from"./Button-CXxpleNP.js";import{s as a}from"./style-inject.es-BnTDb6vU.js";import{u as s}from"./useWindowSize-CAQRbyxi.js";import"./Loader-B_e1Rrr4.js";import"./TextBox-clfMTADi.js";var i={carousel:"Carousel-module_carousel__Yo2oU",carouselWrapper:"Carousel-module_carouselWrapper__JQHy4",arrowLeft:"Carousel-module_arrowLeft__kk-Rx",arrowRight:"Carousel-module_arrowRight__Spznn",arrowShow:"Carousel-module_arrowShow__NqOi-",buttonArrowRight:"Carousel-module_buttonArrowRight__1-Cq0",buttonArrowLeft:"Carousel-module_buttonArrowLeft__EAxth"};a('@layer najwer23snacksCarouel{.Carousel-module_carousel__Yo2oU{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--gap);overflow-x:scroll;scrollbar-width:none;will-change:scroll-position;&::-webkit-scrollbar{display:none}&>*{flex-shrink:0}}.Carousel-module_carouselWrapper__JQHy4{display:grid;position:relative}.Carousel-module_arrowLeft__kk-Rx{display:none;left:20px;position:absolute;top:calc(50% - 25px);@media (max-width:767.98px){display:none}}.Carousel-module_arrowRight__Spznn{display:none;position:absolute;right:20px;top:calc(50% - 25px);@media (max-width:767.98px){display:none}}.Carousel-module_arrowShow__NqOi-{display:block;@media (max-width:767.98px){display:none}}.Carousel-module_buttonArrowLeft__EAxth,.Carousel-module_buttonArrowRight__1-Cq0{height:15px;padding:5px 0;position:relative;transition:all .2s linear;width:15px}.Carousel-module_buttonArrowRight__1-Cq0:after{right:3px;transform:rotate(135deg)}.Carousel-module_buttonArrowLeft__EAxth:after,.Carousel-module_buttonArrowRight__1-Cq0:after{border-left:2px solid #fff;border-top:2px solid #fff;content:"";display:flex;height:15px;position:absolute;width:15px}.Carousel-module_buttonArrowLeft__EAxth:after{left:3px;transform:rotate(-45deg)}}');const u=({children:a,arrowLeftIcon:u,arrowRightIcon:c,gap:p="5px"})=>{const d=t(null),[f,h]=o(!1),[m,w]=o(!1),{width:_}=s(),x=t(!1),g=t(null),C=()=>{if(!d.current||!d.current.childNodes[1])return 0;const r=d.current.childNodes[1],e=getComputedStyle(r);return parseInt(e.marginLeft)+parseInt(e.marginRight)+r.offsetWidth+Number(p.slice(0,-2))};n(()=>{const r=setTimeout(()=>{v()},1);return()=>clearTimeout(r)},[_]);const L=()=>{x.current=!0,g.current&&clearTimeout(g.current),g.current=window.setTimeout(()=>{x.current=!1},150)},v=()=>{if(!d.current)return;L();const r=d.current.scrollLeft,e=d.current.scrollWidth-d.current.clientWidth;r<=0?(h(!1),w(0!==e)):r>=e?(h(!0),w(!1)):(h(!0),w(!0))},b=(r,e,t=400,o=!1)=>{if(x.current&&!o)return r.scrollLeft=e,void v();const n=r.scrollLeft,l=e-n,a=performance.now(),s=i=>{if(x.current&&!o)return r.scrollLeft=e,void v();const u=i-a,c=Math.min(u/t,1);var p;r.scrollLeft=n+l*((p=c)<.5?4*p*p*p:1-Math.pow(-2*p+2,3)/2),c<1?requestAnimationFrame(s):v()};requestAnimationFrame(s)},y=t({isDown:!1,startX:0,scrollLeft:0,isMove:!1}),A=()=>{y.current.isDown=!1};return r("div",{className:i.carouselWrapper,style:{"--gap":p},children:e("div",{className:i.carousel,ref:d,onClick:r=>{y.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:v,onMouseDown:r=>{y.current.isDown=!0,y.current.startX=r.pageX-(d.current?.offsetLeft||0),y.current.scrollLeft=d.current?.scrollLeft||0},onMouseLeave:A,onMouseUp:A,onMouseMove:r=>{if(!y.current.isDown)return void(y.current.isMove=!1);r.preventDefault(),L();var e;const t=1*(("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(d.current?.offsetLeft||0)-y.current.startX);Math.abs(t)>5&&(y.current.isMove=!0),d.current&&(d.current.scrollLeft=y.current.scrollLeft-t)},onTouchMove:r=>{L()},children:[r("div",{className:[i.arrowLeft,f&&i.arrowShow].join(" "),children:r(l,{type:"button",onClick:()=>{if(!d.current)return;const r=C();if(0===r)return;const e=Math.floor(d.current.offsetWidth/r)*r,t=Math.max(d.current.scrollLeft-e,0);b(d.current,t,900,!0)},height:"40px",width:"40px",children:u||r("div",{className:[i.buttonArrowLeft].join(" ")})})}),a,r("div",{className:[i.arrowRight,m&&i.arrowShow].join(" "),children:r(l,{type:"button",onClick:()=>{if(!d.current)return;const r=C();if(0===r)return;const e=Math.floor(d.current.offsetWidth/r)*r,t=d.current.scrollWidth-d.current.clientWidth,o=Math.min(d.current.scrollLeft+e,t);b(d.current,o,900,!0)},height:"40px",width:"40px",children:c||r("div",{className:[i.buttonArrowRight].join(" ")})})})]})})};u.displayName="Carousel";export{u as Carousel};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useRef as t,useState as o,useEffect as n}from"react";import{B as l}from"./Button-ClRkhVeI.js";import{s as a}from"./style-inject.es-BnTDb6vU.js";import{u as s}from"./useWindowSize-CAQRbyxi.js";import"./Loader-B_e1Rrr4.js";import"./TextBox-clfMTADi.js";var i={carousel:"Carousel-module_carousel__Yo2oU",carouselWrapper:"Carousel-module_carouselWrapper__JQHy4",arrowLeft:"Carousel-module_arrowLeft__kk-Rx",arrowRight:"Carousel-module_arrowRight__Spznn",arrowShow:"Carousel-module_arrowShow__NqOi-",buttonArrowRight:"Carousel-module_buttonArrowRight__1-Cq0",buttonArrowLeft:"Carousel-module_buttonArrowLeft__EAxth"};a('@layer najwer23snacksCarouel{.Carousel-module_carousel__Yo2oU{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--gap);overflow-x:scroll;scrollbar-width:none;will-change:scroll-position;&::-webkit-scrollbar{display:none}&>*{flex-shrink:0}}.Carousel-module_carouselWrapper__JQHy4{display:grid;position:relative}.Carousel-module_arrowLeft__kk-Rx{display:none;left:20px;position:absolute;top:calc(50% - 25px);@media (max-width:767.98px){display:none}}.Carousel-module_arrowRight__Spznn{display:none;position:absolute;right:20px;top:calc(50% - 25px);@media (max-width:767.98px){display:none}}.Carousel-module_arrowShow__NqOi-{display:block;@media (max-width:767.98px){display:none}}.Carousel-module_buttonArrowLeft__EAxth,.Carousel-module_buttonArrowRight__1-Cq0{height:15px;padding:5px 0;position:relative;transition:all .2s linear;width:15px}.Carousel-module_buttonArrowRight__1-Cq0:after{right:3px;transform:rotate(135deg)}.Carousel-module_buttonArrowLeft__EAxth:after,.Carousel-module_buttonArrowRight__1-Cq0:after{border-left:2px solid #fff;border-top:2px solid #fff;content:"";display:flex;height:15px;position:absolute;width:15px}.Carousel-module_buttonArrowLeft__EAxth:after{left:3px;transform:rotate(-45deg)}}');const u=({children:a,arrowLeftIcon:u,arrowRightIcon:c,gap:p="5px"})=>{const d=t(null),[f,h]=o(!1),[m,w]=o(!1),{width:_}=s(),x=t(!1),g=t(null),C=()=>{if(!d.current||!d.current.childNodes[1])return 0;const r=d.current.childNodes[1],e=getComputedStyle(r);return parseInt(e.marginLeft)+parseInt(e.marginRight)+r.offsetWidth+Number(p.slice(0,-2))};n(()=>{const r=setTimeout(()=>{v()},1);return()=>clearTimeout(r)},[_]);const L=()=>{x.current=!0,g.current&&clearTimeout(g.current),g.current=window.setTimeout(()=>{x.current=!1},150)},v=()=>{if(!d.current)return;L();const r=d.current.scrollLeft,e=d.current.scrollWidth-d.current.clientWidth;r<=0?(h(!1),w(0!==e)):r>=e?(h(!0),w(!1)):(h(!0),w(!0))},b=(r,e,t=400,o=!1)=>{if(x.current&&!o)return r.scrollLeft=e,void v();const n=r.scrollLeft,l=e-n,a=performance.now(),s=i=>{if(x.current&&!o)return r.scrollLeft=e,void v();const u=i-a,c=Math.min(u/t,1);var p;r.scrollLeft=n+l*((p=c)<.5?4*p*p*p:1-Math.pow(-2*p+2,3)/2),c<1?requestAnimationFrame(s):v()};requestAnimationFrame(s)},y=t({isDown:!1,startX:0,scrollLeft:0,isMove:!1}),A=()=>{y.current.isDown=!1};return r("div",{className:i.carouselWrapper,style:{"--gap":p},children:e("div",{className:i.carousel,ref:d,onClick:r=>{y.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:v,onMouseDown:r=>{y.current.isDown=!0,y.current.startX=r.pageX-(d.current?.offsetLeft||0),y.current.scrollLeft=d.current?.scrollLeft||0},onMouseLeave:A,onMouseUp:A,onMouseMove:r=>{if(!y.current.isDown)return void(y.current.isMove=!1);r.preventDefault(),L();var e;const t=1*(("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(d.current?.offsetLeft||0)-y.current.startX);Math.abs(t)>5&&(y.current.isMove=!0),d.current&&(d.current.scrollLeft=y.current.scrollLeft-t)},onTouchMove:r=>{L()},children:[r("div",{className:[i.arrowLeft,f&&i.arrowShow].join(" "),children:r(l,{type:"button",onClick:()=>{if(!d.current)return;const r=C();if(0===r)return;const e=Math.floor(d.current.offsetWidth/r)*r,t=Math.max(d.current.scrollLeft-e,0);b(d.current,t,900,!0)},height:"40px",width:"40px",children:u||r("div",{className:[i.buttonArrowLeft].join(" ")})})}),a,r("div",{className:[i.arrowRight,m&&i.arrowShow].join(" "),children:r(l,{type:"button",onClick:()=>{if(!d.current)return;const r=C();if(0===r)return;const e=Math.floor(d.current.offsetWidth/r)*r,t=d.current.scrollWidth-d.current.clientWidth,o=Math.min(d.current.scrollLeft+e,t);b(d.current,o,900,!0)},height:"40px",width:"40px",children:c||r("div",{className:[i.buttonArrowRight].join(" ")})})})]})})};u.displayName="Carousel";export{u as Carousel};

package/lib/Slider.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r,Fragment as n}from"react/jsx-runtime";import t,{useState as l,useRef as i,useEffect as o,useCallback as d,useLayoutEffect as s}from"react";import{s as a}from"./style-inject.es-BnTDb6vU.js";import{T as m}from"./TextBox-clfMTADi.js";import{L as c}from"./Loader-B_e1Rrr4.js";import{a as u,I as h}from"./IconArrowRight-Bs6HQ5lc.js";import{B as S}from"./Button-CXxpleNP.js";var p={n23mSliderContainerSlider:"Slider-module_n23mSliderContainerSlider__-1M4s",n23mSliderSlideWrapper:"Slider-module_n23mSliderSlideWrapper__hbDsw",n23mSliderSlide:"Slider-module_n23mSliderSlide__Hv6uj",n23mSliderControls:"Slider-module_n23mSliderControls__DLrdZ",n23mSliderControlsButtons:"Slider-module_n23mSliderControlsButtons__C1ypH",n23mSliderCounter:"Slider-module_n23mSliderCounter__UJLZw"};a("@layer n23mSlider{.Slider-module_n23mSliderContainer__Hx9qh{width:100%}.Slider-module_n23mSliderContainerSlider__-1M4s{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_n23mSliderSlideWrapper__hbDsw{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_n23mSliderSlide__Hv6uj{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.Slider-module_n23mSliderControls__DLrdZ{align-items:center;display:flex;justify-content:space-between;margin-left:20px;margin-right:20px}.Slider-module_n23mSliderControlsButtons__C1ypH{display:flex;gap:10px;margin-top:10px}.Slider-module_n23mSliderCounter__UJLZw{align-items:center;align-items:flex-start;display:flex;height:50px;justify-content:center}}");const g=(e,r,n=!1)=>(n?e.slice(0,r):e.slice(-r)).map((e,r)=>t.cloneElement(e,{key:`${n?"clone-first":"clone-last"}-${r}`,className:e.props.className})),f=({isCircular:a=!1,children:f,className:_,showControls:C=!0,loading:v=!1,loaderColor:w="black"})=>{const x=t.Children.toArray(f).filter(t.isValidElement),[y,b]=l(a&&x.length>=2?2:0),[E,j]=l(!1),[k,L]=l(0),[N,F]=l(0),T=i(null),B=i([]),$=i(null),[W,D]=l(null),[z,H]=l(0),M=a&&x.length>=2?[...g(x,2,!1),...x.map((e,r)=>t.cloneElement(e,{key:e.key??r,className:e.props.className})),...g(x,2,!0)]:x.map((e,r)=>t.cloneElement(e,{key:e.key??r,className:e.props.className}));B.current.length!==M.length&&(B.current=Array(M.length).fill(null)),o(()=>{b(a&&x.length>=2?2:0)},[a,x.length,v]);const Z=d(()=>{const e=T.current;if(!e)return;const r=B.current[0];if(!r)return;const n=window.getComputedStyle(r);L(r.offsetWidth+parseFloat(n.marginLeft)+parseFloat(n.marginRight)),F(e.offsetWidth)},[]);s(()=>{Z();const e=()=>{null!==$.current&&clearTimeout($.current),$.current=window.setTimeout(()=>{Z(),j(!0)},150)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==$.current&&clearTimeout($.current)}},[Z,v]),o(()=>{const e=k+10;B.current.forEach((r,n)=>{if(!r)return;const t=(n-y)*e+(N-k)/2;r.style.transition=E?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",r.style.transform=`translateX(${t}px)`,r.style.left=""})},[y,k,N,E,M.length,a,v]),o(()=>{if(!E||!a)return;const e=B.current.length,r=B.current[e-1];if(!r)return;let n;const t=()=>{let l=y;1===y?l=e-3:y===e-2&&(l=2),l!==y&&b(l),j(!1),r.removeEventListener("transitionend",t),clearTimeout(n)};return r.addEventListener("transitionend",t),n=window.setTimeout(()=>{j(!1),r.removeEventListener("transitionend",t)},500),()=>{r.removeEventListener("transitionend",t),clearTimeout(n)}},[y,a,E,v]),o(()=>{if(!E)return;const e=B.current[0];if(!e)return;let r;const n=()=>{j(!1),e.removeEventListener("transitionend",n),clearTimeout(r)};return e.addEventListener("transitionend",n),r=window.setTimeout(()=>{j(!1),e.removeEventListener("transitionend",n)},500),()=>{e.removeEventListener("transitionend",n),clearTimeout(r)}},[E,v]);const A=()=>{E||(j(!0),b(a?e=>e+1:e=>Math.min(e+1,M.length-1)))},X=()=>{E||(j(!0),b(a?e=>e-1:e=>Math.max(e-1,0)))};return e("div",{className:[p.n23mSlider,"n23mSlider",_].filter(Boolean).join(" "),style:{height:v?"calc(100% - 2px)":C&&x.length>1?"calc(100% - 60px)":"100%"},onTouchStart:e=>{1===e.touches.length&&(D(e.touches[0].clientX),H(0))},onTouchMove:e=>{null!==W&&H(e.touches[0].clientX-W)},onTouchEnd:()=>{z>50?X():z<-50&&A(),D(null),H(0)},children:[v&&r(c,{loaderColor:w}),!v&&e(n,{children:[r("div",{className:[p.n23mSliderContainerSlider,"n23mSliderContainerSlider"].filter(Boolean).join(" "),children:r("div",{className:[p.n23mSliderSlideWrapper,"n23mSliderSlideWrapper"].join(" "),ref:T,children:M.map((e,n)=>r("div",{ref:e=>{B.current[n]=e},className:`${p.n23mSliderSlide}`,style:{width:x.length>1?"calc(100% - 40px)":"100%"},"aria-hidden":y!==n,children:e},e.key??n))})}),C&&x.length>1&&e("div",{className:[p.n23mSliderControls,"n23mSliderControls"].join(" "),children:[r("div",{className:[p.n23mSliderCounter,"n23mSliderCounter"].join(" "),children:r(m,{mobileSize:16,desktopSize:16,color:"black",children:a?`${(()=>{if(!a)return y;const e=x.length;return e<1?0:(y-2+e)%e})()+1} / ${x.length}`:`${y+1} / ${x.length}`})}),e("div",{className:[p.n23mSliderControlsButtons,"n23mSliderControlsButtons"].join(" "),children:[r(S,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:X,borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:E||!a&&0===y,children:r(u,{width:24,height:24})}),r(S,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:A,disabled:E||!a&&y==x.length-1,children:r(h,{width:24,height:24})})]})]})]})]})};f.displayName="Slider";export{f as Slider};
+import{jsxs as e,jsx as r,Fragment as n}from"react/jsx-runtime";import t,{useState as l,useRef as i,useEffect as o,useCallback as d,useLayoutEffect as s}from"react";import{s as a}from"./style-inject.es-BnTDb6vU.js";import{T as m}from"./TextBox-clfMTADi.js";import{L as c}from"./Loader-B_e1Rrr4.js";import{a as u,I as h}from"./IconArrowRight-Bs6HQ5lc.js";import{B as S}from"./Button-ClRkhVeI.js";var p={n23mSliderContainerSlider:"Slider-module_n23mSliderContainerSlider__-1M4s",n23mSliderSlideWrapper:"Slider-module_n23mSliderSlideWrapper__hbDsw",n23mSliderSlide:"Slider-module_n23mSliderSlide__Hv6uj",n23mSliderControls:"Slider-module_n23mSliderControls__DLrdZ",n23mSliderControlsButtons:"Slider-module_n23mSliderControlsButtons__C1ypH",n23mSliderCounter:"Slider-module_n23mSliderCounter__UJLZw"};a("@layer n23mSlider{.Slider-module_n23mSliderContainer__Hx9qh{width:100%}.Slider-module_n23mSliderContainerSlider__-1M4s{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_n23mSliderSlideWrapper__hbDsw{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_n23mSliderSlide__Hv6uj{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.Slider-module_n23mSliderControls__DLrdZ{align-items:center;display:flex;justify-content:space-between;margin-left:20px;margin-right:20px}.Slider-module_n23mSliderControlsButtons__C1ypH{display:flex;gap:10px;margin-top:10px}.Slider-module_n23mSliderCounter__UJLZw{align-items:center;align-items:flex-start;display:flex;height:50px;justify-content:center}}");const g=(e,r,n=!1)=>(n?e.slice(0,r):e.slice(-r)).map((e,r)=>t.cloneElement(e,{key:`${n?"clone-first":"clone-last"}-${r}`,className:e.props.className})),f=({isCircular:a=!1,children:f,className:_,showControls:C=!0,loading:v=!1,loaderColor:w="black"})=>{const x=t.Children.toArray(f).filter(t.isValidElement),[y,b]=l(a&&x.length>=2?2:0),[E,j]=l(!1),[k,L]=l(0),[N,F]=l(0),T=i(null),B=i([]),$=i(null),[W,D]=l(null),[z,H]=l(0),M=a&&x.length>=2?[...g(x,2,!1),...x.map((e,r)=>t.cloneElement(e,{key:e.key??r,className:e.props.className})),...g(x,2,!0)]:x.map((e,r)=>t.cloneElement(e,{key:e.key??r,className:e.props.className}));B.current.length!==M.length&&(B.current=Array(M.length).fill(null)),o(()=>{b(a&&x.length>=2?2:0)},[a,x.length,v]);const Z=d(()=>{const e=T.current;if(!e)return;const r=B.current[0];if(!r)return;const n=window.getComputedStyle(r);L(r.offsetWidth+parseFloat(n.marginLeft)+parseFloat(n.marginRight)),F(e.offsetWidth)},[]);s(()=>{Z();const e=()=>{null!==$.current&&clearTimeout($.current),$.current=window.setTimeout(()=>{Z(),j(!0)},150)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==$.current&&clearTimeout($.current)}},[Z,v]),o(()=>{const e=k+10;B.current.forEach((r,n)=>{if(!r)return;const t=(n-y)*e+(N-k)/2;r.style.transition=E?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",r.style.transform=`translateX(${t}px)`,r.style.left=""})},[y,k,N,E,M.length,a,v]),o(()=>{if(!E||!a)return;const e=B.current.length,r=B.current[e-1];if(!r)return;let n;const t=()=>{let l=y;1===y?l=e-3:y===e-2&&(l=2),l!==y&&b(l),j(!1),r.removeEventListener("transitionend",t),clearTimeout(n)};return r.addEventListener("transitionend",t),n=window.setTimeout(()=>{j(!1),r.removeEventListener("transitionend",t)},500),()=>{r.removeEventListener("transitionend",t),clearTimeout(n)}},[y,a,E,v]),o(()=>{if(!E)return;const e=B.current[0];if(!e)return;let r;const n=()=>{j(!1),e.removeEventListener("transitionend",n),clearTimeout(r)};return e.addEventListener("transitionend",n),r=window.setTimeout(()=>{j(!1),e.removeEventListener("transitionend",n)},500),()=>{e.removeEventListener("transitionend",n),clearTimeout(r)}},[E,v]);const A=()=>{E||(j(!0),b(a?e=>e+1:e=>Math.min(e+1,M.length-1)))},X=()=>{E||(j(!0),b(a?e=>e-1:e=>Math.max(e-1,0)))};return e("div",{className:[p.n23mSlider,"n23mSlider",_].filter(Boolean).join(" "),style:{height:v?"calc(100% - 2px)":C&&x.length>1?"calc(100% - 60px)":"100%"},onTouchStart:e=>{1===e.touches.length&&(D(e.touches[0].clientX),H(0))},onTouchMove:e=>{null!==W&&H(e.touches[0].clientX-W)},onTouchEnd:()=>{z>50?X():z<-50&&A(),D(null),H(0)},children:[v&&r(c,{loaderColor:w}),!v&&e(n,{children:[r("div",{className:[p.n23mSliderContainerSlider,"n23mSliderContainerSlider"].filter(Boolean).join(" "),children:r("div",{className:[p.n23mSliderSlideWrapper,"n23mSliderSlideWrapper"].join(" "),ref:T,children:M.map((e,n)=>r("div",{ref:e=>{B.current[n]=e},className:`${p.n23mSliderSlide}`,style:{width:x.length>1?"calc(100% - 40px)":"100%"},"aria-hidden":y!==n,children:e},e.key??n))})}),C&&x.length>1&&e("div",{className:[p.n23mSliderControls,"n23mSliderControls"].join(" "),children:[r("div",{className:[p.n23mSliderCounter,"n23mSliderCounter"].join(" "),children:r(m,{mobileSize:16,desktopSize:16,color:"black",children:a?`${(()=>{if(!a)return y;const e=x.length;return e<1?0:(y-2+e)%e})()+1} / ${x.length}`:`${y+1} / ${x.length}`})}),e("div",{className:[p.n23mSliderControlsButtons,"n23mSliderControlsButtons"].join(" "),children:[r(S,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:X,borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:E||!a&&0===y,children:r(u,{width:24,height:24})}),r(S,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:A,disabled:E||!a&&y==x.length-1,children:r(h,{width:24,height:24})})]})]})]})]})};f.displayName="Slider";export{f as Slider};

package/lib/Slidermulti.js

@@ -1 +1 @@
-import{jsxs as e,jsx as l,Fragment as i}from"react/jsx-runtime";import r,{useState as t,useRef as n,useEffect as o}from"react";import{s as d}from"./style-inject.es-BnTDb6vU.js";import{L as s}from"./Loader-B_e1Rrr4.js";import{a,I as u}from"./IconArrowRight-Bs6HQ5lc.js";import{B as c}from"./Button-CXxpleNP.js";import"./TextBox-clfMTADi.js";var h={n23mSliderMulti:"SliderMulti-module_n23mSliderMulti__hsL9a",n23mSliderMultiContainerSlider:"SliderMulti-module_n23mSliderMultiContainerSlider__iu4xy",n23mSliderMultiSlideWrapper:"SliderMulti-module_n23mSliderMultiSlideWrapper__KPiK1",n23mSliderMultiSlide:"SliderMulti-module_n23mSliderMultiSlide__NDrCj",n23mSliderMultiControls:"SliderMulti-module_n23mSliderMultiControls__54jy-",n23mSliderMultiControlsButtons:"SliderMulti-module_n23mSliderMultiControlsButtons__JqcZ5"};d("@layer n23mSliderMulti{.SliderMulti-module_n23mSliderMulti__hsL9a{width:100%}.SliderMulti-module_n23mSliderMultiContainerSlider__iu4xy{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.SliderMulti-module_n23mSliderMultiSlideWrapper__KPiK1{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.SliderMulti-module_n23mSliderMultiSlide__NDrCj{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.SliderMulti-module_n23mSliderMultiControls__54jy-{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderMulti-module_n23mSliderMultiControlsButtons__JqcZ5{display:flex;gap:10px;margin-top:10px}}");const m=(e,l,i=!1,t)=>(i?e.slice(0,l):e.slice(-l)).map((e,l)=>r.cloneElement(e,{key:`${i?"clone-first":"clone-last"}-${l} ${t}`,className:e.props.className})),S=({isCircular:d=!1,children:S,className:p,showControls:g=!0,loading:M=!1,loaderColor:f="black",slidesPerView:_=4,slideSpacingPx:C=10,slidesToScroll:x=4})=>{const y=r.Children.toArray(S).filter(r.isValidElement),[v,w]=t(0),E=n(null);o(()=>{const e=()=>{E.current&&w(E.current.offsetWidth)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[M]);const j=_>0?(v-C*(_-1))/_:0;let b=d?[...m(y,r.Children.toArray(S).length,!1,1),...m(y,r.Children.toArray(S).length,!1,2),...y,...m(y,r.Children.toArray(S).length,!0,3),...m(y,r.Children.toArray(S).length,!0,4)]:y;const[N,F]=t(d?2*r.Children.toArray(S).length:0),[k,B]=t(!1),L=n([]),[A,T]=t(null),[$,W]=t(0);o(()=>{F(d?2*r.Children.toArray(S).length:0)},[d,_,y.length,M]);o(()=>{L.current.forEach((e,l)=>{if(!e)return;const i=(l-N)*(j+C)+(v-j*_-C*(_-1))/2;e.style.transition=k?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",e.style.transform=`translateX(${i}px)`,e.style.left=""})},[N,v,k,b.length,_,j,C,M]),o(()=>{if(!k)return;let e;const l=()=>{let i=N;N<_&&d?i=N+y.length:N>=y.length+_&&d&&(i=N-y.length),i!==N&&d&&F(i),B(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)};return L.current.forEach(e=>{e&&e.addEventListener("transitionend",l)}),e=window.setTimeout(()=>{B(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)})},500),()=>{L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)}},[N,d,k,y.length,_,b.length,M]);const P=()=>{k||(B(!0),F(e=>e+x))},D=()=>{k||(B(!0),F(e=>e-x))};return L.current.length!==b.length&&(L.current=Array(b.length).fill(null)),e("div",{className:[h.n23mSliderMulti,"n23mSliderMulti",p].filter(Boolean).join(" "),style:{height:M?"calc(100% - 2px)":g?"calc(100% - 60px)":"100%"},onTouchStart:e=>{1===e.touches.length&&(T(e.touches[0].clientX),W(0))},onTouchMove:e=>{null!==A&&W(e.touches[0].clientX-A)},onTouchEnd:()=>{$>50?D():$<-50&&P(),T(null),W(0)},children:[M&&l(s,{loaderColor:f}),!M&&e(i,{children:[l("div",{className:[h.n23mSliderMultiContainerSlider].filter(Boolean).join(" "),children:l("div",{className:[h.n23mSliderMultiSlideWrapper,"n23mSliderMultiSlideWrapper"].join(" "),ref:E,style:{display:"flex",gap:`${C}px`,overflow:"hidden",width:"100%"},children:b.map((e,i)=>l("div",{ref:e=>{L.current[i]=e},className:h.n23mSliderMultiSlide,style:{width:`${j}px`,flex:`0 0 ${j}px`},"aria-hidden":i<N||i>=N+_,children:e},e.key??i))})}),g&&l("div",{className:[h.n23mSliderMultiControls,"n23mSliderMultiControls"].join(" "),children:e("div",{className:[h.n23mSliderMultiControlsButtons,"n23mSliderMultiControlsButtons"].join(" "),children:[l(c,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:D,borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:k||!d&&0===N,children:l(a,{width:24,height:24})}),l(c,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:P,disabled:k||!d&&N+_>=y.length,children:l(u,{width:24,height:24})})]})})]})]})};S.displayName="Slider";export{S as SliderMulti};
+import{jsxs as e,jsx as l,Fragment as i}from"react/jsx-runtime";import r,{useState as t,useRef as n,useEffect as o}from"react";import{s as d}from"./style-inject.es-BnTDb6vU.js";import{L as s}from"./Loader-B_e1Rrr4.js";import{a,I as u}from"./IconArrowRight-Bs6HQ5lc.js";import{B as c}from"./Button-ClRkhVeI.js";import"./TextBox-clfMTADi.js";var h={n23mSliderMulti:"SliderMulti-module_n23mSliderMulti__hsL9a",n23mSliderMultiContainerSlider:"SliderMulti-module_n23mSliderMultiContainerSlider__iu4xy",n23mSliderMultiSlideWrapper:"SliderMulti-module_n23mSliderMultiSlideWrapper__KPiK1",n23mSliderMultiSlide:"SliderMulti-module_n23mSliderMultiSlide__NDrCj",n23mSliderMultiControls:"SliderMulti-module_n23mSliderMultiControls__54jy-",n23mSliderMultiControlsButtons:"SliderMulti-module_n23mSliderMultiControlsButtons__JqcZ5"};d("@layer n23mSliderMulti{.SliderMulti-module_n23mSliderMulti__hsL9a{width:100%}.SliderMulti-module_n23mSliderMultiContainerSlider__iu4xy{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.SliderMulti-module_n23mSliderMultiSlideWrapper__KPiK1{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.SliderMulti-module_n23mSliderMultiSlide__NDrCj{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.SliderMulti-module_n23mSliderMultiControls__54jy-{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderMulti-module_n23mSliderMultiControlsButtons__JqcZ5{display:flex;gap:10px;margin-top:10px}}");const m=(e,l,i=!1,t)=>(i?e.slice(0,l):e.slice(-l)).map((e,l)=>r.cloneElement(e,{key:`${i?"clone-first":"clone-last"}-${l} ${t}`,className:e.props.className})),S=({isCircular:d=!1,children:S,className:p,showControls:g=!0,loading:M=!1,loaderColor:f="black",slidesPerView:_=4,slideSpacingPx:C=10,slidesToScroll:x=4})=>{const y=r.Children.toArray(S).filter(r.isValidElement),[v,w]=t(0),E=n(null);o(()=>{const e=()=>{E.current&&w(E.current.offsetWidth)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[M]);const j=_>0?(v-C*(_-1))/_:0;let b=d?[...m(y,r.Children.toArray(S).length,!1,1),...m(y,r.Children.toArray(S).length,!1,2),...y,...m(y,r.Children.toArray(S).length,!0,3),...m(y,r.Children.toArray(S).length,!0,4)]:y;const[N,F]=t(d?2*r.Children.toArray(S).length:0),[k,B]=t(!1),L=n([]),[A,T]=t(null),[$,W]=t(0);o(()=>{F(d?2*r.Children.toArray(S).length:0)},[d,_,y.length,M]);o(()=>{L.current.forEach((e,l)=>{if(!e)return;const i=(l-N)*(j+C)+(v-j*_-C*(_-1))/2;e.style.transition=k?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",e.style.transform=`translateX(${i}px)`,e.style.left=""})},[N,v,k,b.length,_,j,C,M]),o(()=>{if(!k)return;let e;const l=()=>{let i=N;N<_&&d?i=N+y.length:N>=y.length+_&&d&&(i=N-y.length),i!==N&&d&&F(i),B(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)};return L.current.forEach(e=>{e&&e.addEventListener("transitionend",l)}),e=window.setTimeout(()=>{B(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)})},500),()=>{L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)}},[N,d,k,y.length,_,b.length,M]);const P=()=>{k||(B(!0),F(e=>e+x))},D=()=>{k||(B(!0),F(e=>e-x))};return L.current.length!==b.length&&(L.current=Array(b.length).fill(null)),e("div",{className:[h.n23mSliderMulti,"n23mSliderMulti",p].filter(Boolean).join(" "),style:{height:M?"calc(100% - 2px)":g?"calc(100% - 60px)":"100%"},onTouchStart:e=>{1===e.touches.length&&(T(e.touches[0].clientX),W(0))},onTouchMove:e=>{null!==A&&W(e.touches[0].clientX-A)},onTouchEnd:()=>{$>50?D():$<-50&&P(),T(null),W(0)},children:[M&&l(s,{loaderColor:f}),!M&&e(i,{children:[l("div",{className:[h.n23mSliderMultiContainerSlider].filter(Boolean).join(" "),children:l("div",{className:[h.n23mSliderMultiSlideWrapper,"n23mSliderMultiSlideWrapper"].join(" "),ref:E,style:{display:"flex",gap:`${C}px`,overflow:"hidden",width:"100%"},children:b.map((e,i)=>l("div",{ref:e=>{L.current[i]=e},className:h.n23mSliderMultiSlide,style:{width:`${j}px`,flex:`0 0 ${j}px`},"aria-hidden":i<N||i>=N+_,children:e},e.key??i))})}),g&&l("div",{className:[h.n23mSliderMultiControls,"n23mSliderMultiControls"].join(" "),children:e("div",{className:[h.n23mSliderMultiControlsButtons,"n23mSliderMultiControlsButtons"].join(" "),children:[l(c,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:D,borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:k||!d&&0===N,children:l(a,{width:24,height:24})}),l(c,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:P,disabled:k||!d&&N+_>=y.length,children:l(u,{width:24,height:24})})]})})]})]})};S.displayName="Slider";export{S as SliderMulti};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najwer23morsels",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",

package/lib/Button-CXxpleNP.js

@@ -1 +0,0 @@
-import{jsxs as o,jsx as t}from"react/jsx-runtime";import{L as e}from"./Loader-B_e1Rrr4.js";import{s as n}from"./style-inject.es-BnTDb6vU.js";var r={n23mButtonButton:"Button-module_n23mButtonButton__IfHY-"};n('@layer n23mButton{.Button-module_n23mButtonButton__IfHY-{--boxShadow:0 4px 8px 0 rgba(0,0,0,.24),0 6px 20px 0 rgba(0,0,0,.19);-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--n23mButtonBg,var(--button-bg));border:1px solid var(--button-borderColor,unset);border-radius:8px;box-shadow:none;cursor:pointer;height:var(--button-height,auto);letter-spacing:normal;padding:var(--button-padding,10px 17px);position:relative;transition:background-color .3s,box-shadow .3s;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:var(--button-width,auto);>span{display:inline-block;position:relative;z-index:1}&:before{background-color:inherit;border-radius:8px;content:"";inset:0;pointer-events:none;position:absolute;transition:filter .3s;z-index:0}@media (hover:hover) and (pointer:fine){&:hover:before{filter:brightness(100%)}&:hover{box-shadow:var(--boxShadow)}}&:active:before{filter:brightness(.8)}&:active{box-shadow:var(--boxShadow)}&:focus-visible:before{filter:brightness(.8);outline:none}&:focus-visible{box-shadow:var(--boxShadow);outline:none}&:disabled{background-color:var(--n23mButtonBgDisabled,var(--button-bgDisabled));box-shadow:none;cursor:not-allowed}}}');const i=({children:n,className:i,backgroundColor:a,padding:s,loading:l,height:d,width:b,borderColor:u,backgroundColorDisabled:h,...c})=>o("div",{className:["n23mButton",i].filter(Boolean).join(" "),children:[l&&t("div",{style:{width:b,height:d},children:t(e,{})}),!l&&t("button",{style:{...null!=s?{"--button-padding":s}:{},"--button-bg":a,"--button-height":d,"--button-width":b,"--button-bgDisabled":h,"--button-borderColor":u},className:[r.n23mButtonButton,"n23mButtonButton"].filter(Boolean).join(" "),...c,children:t("span",{children:n})})]});i.displayName="Button";export{i as B};