najwer23morsels 0.7.1 → 0.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/Button-DxJWdqdv.js +1 -0
- package/lib/Button.js +1 -1
- package/lib/Carousel.js +1 -1
- package/lib/IconArrowRight-Bs6HQ5lc.js +1 -0
- package/lib/Icons.js +1 -0
- package/lib/Slider.js +1 -1
- package/lib/button/Button.d.ts +1 -0
- package/lib/icons/IconArrowLeft.d.ts +2 -0
- package/lib/icons/IconArrowRight.d.ts +2 -0
- package/lib/icons/Icons.types.d.ts +4 -0
- package/lib/icons/index.d.ts +3 -0
- package/lib/slider/Slider.d.ts +1 -4
- package/package.json +1 -1
- package/lib/Button-BF9bCjkn.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsxs as o,jsx as e}from"react/jsx-runtime";import{L as t}from"./Loader-Bp_QrPqC.js";import{s as r}from"./TextBox-DnwTtpP2.js";var n={najwer23morselsButtonContainer:"Button-module_najwer23morselsButtonContainer__Okjrw"};r('@layer najwer23morselsButton{.Button-module_najwer23morselsButtonContainer__Okjrw{--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(--najwer23morselsButtonBg,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(--najwer23morselsButtonBgDisabled,var(--button-bgDisabled));box-shadow:none;cursor:not-allowed}}}');const a=({children:r,className:a,backgroundColor:i,padding:s,loading:l,height:d,width:b,borderColor:u,backgroundColorDisabled:h,...c})=>o("div",{className:["MorselsButtonWrapper",a].filter(Boolean).join(" "),children:[l&&e("div",{style:{width:b,height:d},children:e(t,{})}),!l&&e("button",{style:{...null!=s?{"--button-padding":s}:{},"--button-bg":i,"--button-height":d,"--button-width":b,"--button-bgDisabled":h,"--button-borderColor":u},className:[n.najwer23morselsButtonContainer,"MorselsButton"].filter(Boolean).join(" "),...c,children:e("span",{children:r})})]});a.displayName="Button";export{a as B};
|
package/lib/Button.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{B as Button}from"./Button-
|
|
1
|
+
export{B as Button}from"./Button-DxJWdqdv.js";import"react/jsx-runtime";import"./Loader-Bp_QrPqC.js";import"./TextBox-DnwTtpP2.js";
|
package/lib/Carousel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useRef as o,useState as t,useEffect as n}from"react";import{B as l}from"./Button-
|
|
1
|
+
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{useRef as o,useState as t,useEffect as n}from"react";import{B as l}from"./Button-DxJWdqdv.js";import{s as a}from"./TextBox-DnwTtpP2.js";import{u as i}from"./useWindowSize-CAQRbyxi.js";import"./Loader-Bp_QrPqC.js";var s={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:d="5px"})=>{const p=o(null),[f,h]=t(!1),[m,w]=t(!1),{width:_}=i(),x=o(!1),g=o(null),C=()=>{if(!p.current||!p.current.childNodes[1])return 0;const r=p.current.childNodes[1],e=getComputedStyle(r);return parseInt(e.marginLeft)+parseInt(e.marginRight)+r.offsetWidth+Number(d.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(!p.current)return;L();const r=p.current.scrollLeft,e=p.current.scrollWidth-p.current.clientWidth;r<=0?(h(!1),w(0!==e)):r>=e?(h(!0),w(!1)):(h(!0),w(!0))},b=(r,e,o=400,t=!1)=>{if(x.current&&!t)return r.scrollLeft=e,void v();const n=r.scrollLeft,l=e-n,a=performance.now(),i=s=>{if(x.current&&!t)return r.scrollLeft=e,void v();const u=s-a,c=Math.min(u/o,1);var d;r.scrollLeft=n+l*((d=c)<.5?4*d*d*d:1-Math.pow(-2*d+2,3)/2),c<1?requestAnimationFrame(i):v()};requestAnimationFrame(i)},y=o({isDown:!1,startX:0,scrollLeft:0,isMove:!1}),A=()=>{y.current.isDown=!1};return r("div",{className:s.carouselWrapper,style:{"--gap":d},children:e("div",{className:s.carousel,ref:p,onClick:r=>{y.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:v,onMouseDown:r=>{y.current.isDown=!0,y.current.startX=r.pageX-(p.current?.offsetLeft||0),y.current.scrollLeft=p.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 o=1*(("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(p.current?.offsetLeft||0)-y.current.startX);Math.abs(o)>5&&(y.current.isMove=!0),p.current&&(p.current.scrollLeft=y.current.scrollLeft-o)},onTouchMove:r=>{L()},children:[r("div",{className:[s.arrowLeft,f&&s.arrowShow].join(" "),children:r(l,{type:"button",onClick:()=>{if(!p.current)return;const r=C();if(0===r)return;const e=Math.floor(p.current.offsetWidth/r)*r,o=Math.max(p.current.scrollLeft-e,0);b(p.current,o,900,!0)},height:"40px",width:"40px",children:u||r("div",{className:[s.buttonArrowLeft].join(" ")})})}),a,r("div",{className:[s.arrowRight,m&&s.arrowShow].join(" "),children:r(l,{type:"button",onClick:()=>{if(!p.current)return;const r=C();if(0===r)return;const e=Math.floor(p.current.offsetWidth/r)*r,o=p.current.scrollWidth-p.current.clientWidth,t=Math.min(p.current.scrollLeft+e,o);b(p.current,t,900,!0)},height:"40px",width:"40px",children:c||r("div",{className:[s.buttonArrowRight].join(" ")})})})]})})};u.displayName="Carousel";export{u as Carousel};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";const h=({width:h,height:i})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:h,height:i,fill:"currentColor",children:t("path",{d:"M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"})});h.displayName="IconArrowRight";const i=({width:h,height:i})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:h,height:i,fill:"currentColor",children:t("path",{d:"M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"})});i.displayName="IconArrowRight";export{i as I,h as a};
|
package/lib/Icons.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{a as IconArrowLeft,I as IconArrowRight}from"./IconArrowRight-Bs6HQ5lc.js";import"react/jsx-runtime";
|
package/lib/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as r,Fragment as
|
|
1
|
+
import{jsxs as e,jsx as r,Fragment as l}from"react/jsx-runtime";import n,{useState as t,useRef as o,useEffect as i,useCallback as s}from"react";import{s as a,T as d}from"./TextBox-DnwTtpP2.js";import{L as m}from"./Loader-Bp_QrPqC.js";import{a as c,I as u}from"./IconArrowRight-Bs6HQ5lc.js";import{B as h}from"./Button-DxJWdqdv.js";var p={najwer23morselsSliderContainer:"Slider-module_najwer23morselsSliderContainer__1SbJN",najwer23morselsSliderContainerSlider:"Slider-module_najwer23morselsSliderContainerSlider__7ONky",najwer23morselsSlideWrapper:"Slider-module_najwer23morselsSlideWrapper__veeuJ",najwer23morselsSlide:"Slider-module_najwer23morselsSlide__KHKZW",najwer23morselsSliderControls:"Slider-module_najwer23morselsSliderControls__yTkht",najwer23morselsSliderControlsButtons:"Slider-module_najwer23morselsSliderControlsButtons__j3XUh",najwer23morselsSliderCounter:"Slider-module_najwer23morselsSliderCounter__56f5P"};a("@layer najwer23morselsSlider{.Slider-module_najwer23morselsSliderContainer__1SbJN{width:100%}.Slider-module_najwer23morselsSliderContainerSlider__7ONky{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_najwer23morselsSlideWrapper__veeuJ{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_najwer23morselsSlide__KHKZW{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.Slider-module_najwer23morselsSliderControls__yTkht{align-items:center;display:flex;justify-content:space-between;margin-left:20px;margin-right:20px}.Slider-module_najwer23morselsSliderControlsButtons__j3XUh{display:flex;gap:10px;margin-top:10px}.Slider-module_najwer23morselsSliderCounter__56f5P{align-items:center;align-items:flex-start;display:flex;height:50px;justify-content:center}}");const S=(e,r,l=!1)=>(l?e.slice(0,r):e.slice(-r)).map((e,r)=>n.cloneElement(e,{key:`${l?"clone-first":"clone-last"}-${r}`,className:e.props.className})),w=({isCircular:a=!1,children:w,className:g,showControls:f=!0,loading:j=!1,loaderColor:_="black"})=>{const C=n.Children.toArray(w).filter(n.isValidElement),[v,x]=t(a&&C.length>=2?2:0),[y,b]=t(!1),[k,E]=t(0),[N,T]=t(0),F=o(null),L=o([]),B=o(null),[W,M]=t(null),[$,z]=t(0),X=a&&C.length>=2?[...S(C,2,!1),...C.map((e,r)=>n.cloneElement(e,{key:e.key??r,className:e.props.className})),...S(C,2,!0)]:C.map((e,r)=>n.cloneElement(e,{key:e.key??r,className:e.props.className}));L.current.length!==X.length&&(L.current=Array(X.length).fill(null)),i(()=>{x(a&&C.length>=2?2:0)},[a,C.length,j]);const J=s(()=>{const e=F.current;if(!e)return;const r=L.current[0];if(!r)return;const l=window.getComputedStyle(r);E(r.offsetWidth+parseFloat(l.marginLeft)+parseFloat(l.marginRight)),T(e.offsetWidth)},[]);i(()=>{J();const e=()=>{null!==B.current&&clearTimeout(B.current),B.current=window.setTimeout(()=>{J(),b(!0)},150)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==B.current&&clearTimeout(B.current)}},[J,j]),i(()=>{const e=k+10;L.current.forEach((r,l)=>{if(!r)return;const n=(l-v)*e+(N-k)/2;r.style.transition=y?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",r.style.transform=`translateX(${n}px)`,r.style.left=""})},[v,k,N,y,X.length,a,j]),i(()=>{if(!y||!a)return;const e=L.current.length,r=L.current[e-1];if(!r)return;let l;const n=()=>{let t=v;1===v?t=e-3:v===e-2&&(t=2),t!==v&&x(t),b(!1),r.removeEventListener("transitionend",n),clearTimeout(l)};return r.addEventListener("transitionend",n),l=window.setTimeout(()=>{b(!1),r.removeEventListener("transitionend",n)},500),()=>{r.removeEventListener("transitionend",n),clearTimeout(l)}},[v,a,y,j]),i(()=>{if(!y)return;const e=L.current[0];if(!e)return;let r;const l=()=>{b(!1),e.removeEventListener("transitionend",l),clearTimeout(r)};return e.addEventListener("transitionend",l),r=window.setTimeout(()=>{b(!1),e.removeEventListener("transitionend",l)},500),()=>{e.removeEventListener("transitionend",l),clearTimeout(r)}},[y,j]);const K=()=>{y||(b(!0),x(a?e=>e+1:e=>Math.min(e+1,X.length-1)))},A=()=>{y||(b(!0),x(a?e=>e-1:e=>Math.max(e-1,0)))};return e("div",{className:[p.najwer23morselsSliderContainer,"MorselsSlider",g].filter(Boolean).join(" "),style:{height:j?"calc(100% - 2px)":f&&C.length>1?"calc(100% - 60px)":"100%"},onTouchStart:e=>{1===e.touches.length&&(M(e.touches[0].clientX),z(0))},onTouchMove:e=>{null!==W&&z(e.touches[0].clientX-W)},onTouchEnd:()=>{$>50?A():$<-50&&K(),M(null),z(0)},children:[j&&r(m,{loaderColor:_}),!j&&e(l,{children:[r("div",{className:[p.najwer23morselsSliderContainerSlider].filter(Boolean).join(" "),children:r("div",{className:[p.najwer23morselsSlideWrapper,"MorselsSliderWrapper"].join(" "),ref:F,children:X.map((e,l)=>r("div",{ref:e=>{L.current[l]=e},className:`${p.najwer23morselsSlide}`,style:{width:C.length>1?"calc(100% - 40px)":"100%"},"aria-hidden":v!==l,children:e},e.key??l))})}),f&&C.length>1&&e("div",{className:[p.najwer23morselsSliderControls,"MorselsSliderControls"].join(" "),children:[r("div",{className:[p.najwer23morselsSliderCounter,"MorselsSliderCounter"].join(" "),children:r(d,{mobileSize:16,desktopSize:16,color:"black",children:a?`${(()=>{if(!a)return v;const e=C.length;return e<1?0:(v-2+e)%e})()+1} / ${C.length}`:`${v+1} / ${C.length}`})}),e("div",{className:[p.najwer23morselsSliderControlsButtons,"MorselsSliderControlsButtons"].join(" "),children:[r(h,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:A,borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:y||!a&&0===v,children:r(c,{width:24,height:24})}),r(h,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:K,disabled:y||!a&&v==C.length-1,children:r(u,{width:24,height:24})})]})]})]})]})};w.displayName="Slider";export{w as Slider};
|
package/lib/button/Button.d.ts
CHANGED
package/lib/slider/Slider.d.ts
CHANGED
|
@@ -2,10 +2,7 @@ import React, { ReactNode } from 'react';
|
|
|
2
2
|
interface SliderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
3
|
isCircular?: boolean;
|
|
4
4
|
children: ReactNode;
|
|
5
|
-
|
|
6
|
-
arrowsColorBackground?: string;
|
|
7
|
-
arrowsColorBorder?: string;
|
|
8
|
-
showCounter?: boolean;
|
|
5
|
+
showControls?: boolean;
|
|
9
6
|
loading?: boolean;
|
|
10
7
|
loaderColor?: string;
|
|
11
8
|
}
|
package/package.json
CHANGED
package/lib/Button-BF9bCjkn.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as o,jsx as e}from"react/jsx-runtime";import{L as t}from"./Loader-Bp_QrPqC.js";import{s as n}from"./TextBox-DnwTtpP2.js";var r={najwer23morselsButtonContainer:"Button-module_najwer23morselsButtonContainer__Okjrw"};n('@layer najwer23morselsButton{.Button-module_najwer23morselsButtonContainer__Okjrw{--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(--najwer23morselsButtonBg,var(--button-bg));border: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(--najwer23morselsButtonBgDisabled,var(--button-bgDisabled));box-shadow:none;cursor:not-allowed}}}');const a=({children:n,className:a,backgroundColor:i,padding:s,loading:l,height:d,width:b,backgroundColorDisabled:u,...h})=>o("div",{className:["MorselsButtonWrapper",a].filter(Boolean).join(" "),children:[l&&e("div",{style:{width:b,height:d},children:e(t,{})}),!l&&e("button",{style:{...null!=s?{"--button-padding":s}:{},"--button-bg":i,"--button-height":d,"--button-width":b,"--button-bgDisabled":u},className:[r.najwer23morselsButtonContainer,"MorselsButton"].filter(Boolean).join(" "),...h,children:e("span",{children:n})})]});a.displayName="Button";export{a as B};
|