najwer23morsels 0.8.13 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # najwer23morsels
 
+## 0.9.0
+
+### Minor Changes
+
+- Slider Scroll
+
 ## 0.8.0
 
 ### Minor Changes

package/lib/Sliderscroll.js

@@ -0,0 +1 @@
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useRef as l,useState as o,useEffect as t}from"react";import{B as n}from"./Button-DP1hmI08.js";import{s as i}from"./style-inject.es-BnTDb6vU.js";import{u as c}from"./useWindowSize-CAQRbyxi.js";import{a as s,I as d}from"./IconArrowRight-Bs6HQ5lc.js";import"./Loader-CL-mm0LT.js";import"./TextBox-B47QWA9m.js";var a={n23mSliderScroll:"SliderScroll-module_n23mSliderScroll__to3-Y",n23mSliderScrollTrack:"SliderScroll-module_n23mSliderScrollTrack__FcsTl",n23mSliderScrollControls:"SliderScroll-module_n23mSliderScrollControls__i64nM",n23mSliderScrollControlsButtons:"SliderScroll-module_n23mSliderScrollControlsButtons__W-5rb"};i("@layer n23mSliderScroll{.SliderScroll-module_n23mSliderScroll__to3-Y{display:grid;position:relative}.SliderScroll-module_n23mSliderScrollTrack__FcsTl{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--sliderscroll-gap);overflow-x:scroll;scrollbar-width:none;will-change:scroll-position;&::-webkit-scrollbar{display:none}&>*{flex-shrink:0}}.SliderScroll-module_n23mSliderScrollControls__i64nM{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderScroll-module_n23mSliderScrollControlsButtons__W-5rb{display:flex;gap:10px;margin-top:10px}}");const u=({children:i,className:u,gap:m="5px"})=>{const S=l(null),[f,p]=o(!1),[h,g]=o(!1),{width:v}=c(),w=l(!1),_=l(null),x=()=>{if(!S.current||!S.current.childNodes[1])return 0;const r=S.current.childNodes[1],e=getComputedStyle(r);return parseInt(e.marginLeft)+parseInt(e.marginRight)+r.offsetWidth+Number(m.slice(0,-2))};t(()=>{const r=setTimeout(()=>{C()},1);return()=>clearTimeout(r)},[v]);const b=()=>{w.current=!0,_.current&&clearTimeout(_.current),_.current=window.setTimeout(()=>{w.current=!1},150)},C=()=>{if(!S.current)return;b();const r=S.current.scrollLeft,e=S.current.scrollWidth-S.current.clientWidth;r<=0?(p(!1),g(0!==e)):r>=e?(p(!0),g(!1)):(p(!0),g(!0))},M=(r,e,l=400,o=!1)=>{if(w.current&&!o)return r.scrollLeft=e,void C();const t=r.scrollLeft,n=e-t,i=performance.now(),c=s=>{if(w.current&&!o)return r.scrollLeft=e,void C();const d=s-i,a=Math.min(d/l,1);var u;r.scrollLeft=t+n*((u=a)<.5?4*u*u*u:1-Math.pow(-2*u+2,3)/2),a<1?requestAnimationFrame(c):C()};requestAnimationFrame(c)},L=l({isDown:!1,startX:0,scrollLeft:0,isMove:!1}),k=()=>{L.current.isDown=!1};return r("div",{className:[a.n23mSliderScroll,"n23mSliderScroll",u].filter(Boolean).join(" "),style:{"--sliderscroll-gap":m},children:[e("div",{className:a.n23mSliderScrollTrack,ref:S,onClick:r=>{L.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:C,onMouseDown:r=>{L.current.isDown=!0,L.current.startX=r.pageX-(S.current?.offsetLeft||0),L.current.scrollLeft=S.current?.scrollLeft||0},onMouseLeave:k,onMouseUp:k,onMouseMove:r=>{if(!L.current.isDown)return void(L.current.isMove=!1);r.preventDefault(),b();var e;const l=1*(("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(S.current?.offsetLeft||0)-L.current.startX);Math.abs(l)>5&&(L.current.isMove=!0),S.current&&(S.current.scrollLeft=L.current.scrollLeft-l)},onTouchMove:r=>{b()},children:i}),e("div",{className:[a.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[a.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(n,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:()=>{if(!S.current)return;const r=x();if(0===r)return;const e=Math.floor(S.current.offsetWidth/r)*r,l=Math.max(S.current.scrollLeft-e,0);M(S.current,l,900,!0)},borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:!f,children:e(s,{width:24,height:24})}),e(n,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:()=>{if(!S.current)return;const r=x();if(0===r)return;const e=Math.floor(S.current.offsetWidth/r)*r,l=S.current.scrollWidth-S.current.clientWidth,o=Math.min(S.current.scrollLeft+e,l);M(S.current,o,900,!0)},disabled:!h,children:e(d,{width:24,height:24})})]})})]})};u.displayName="SliderScroll";export{u as SliderScroll};

package/lib/sliderscroll/SliderScroll.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface SliderScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    arrowLeftIcon?: ReactNode;
+    arrowRightIcon?: ReactNode;
+    gap?: string;
+}
+export declare const SliderScroll: React.FC<SliderScrollProps>;
+export {};

package/lib/sliderscroll/index.d.ts

@@ -0,0 +1,2 @@
+import { SliderScroll } from './SliderScroll';
+export { SliderScroll };

package/package.json

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

package/lib/Carousel.js

@@ -1 +0,0 @@
-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-DP1hmI08.js";import{s as a}from"./style-inject.es-BnTDb6vU.js";import{u as s}from"./useWindowSize-CAQRbyxi.js";import"./Loader-CL-mm0LT.js";import"./TextBox-B47QWA9m.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/carousel/Carousel.d.ts

@@ -1,6 +0,0 @@
-export declare const Carousel: React.FC<{
-    children: React.ReactNode;
-    arrowLeftIcon?: React.ReactNode;
-    arrowRightIcon?: React.ReactNode;
-    gap?: string;
-}>;

package/lib/carousel/index.d.ts

@@ -1,2 +0,0 @@
-import { Carousel } from './Carousel';
-export { Carousel };