najwer23morsels 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # najwer23morsels
 
+## 0.4.0
+
+### Minor Changes
+
+- Slider!
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -1,4 +1,4 @@
-# Morsels!
+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.
 
 ### Global css variables available
 
@@ -14,6 +14,11 @@
     --najwer23morselsTextBoxColorHover: orange;
     --najwer23morselsTextBoxLineHeight: 1.42857;
     --najwer23morselsTextBoxFontWeight: 400;
-    --najwer23morselsTextBoxFontWeightHover: 800
+    --najwer23morselsTextBoxFontWeightHover: 800;
+
+    /* MorselsSlider */
+    --najwer23morselsSliderArrowsColorBackground: white;
+    --najwer23morselsSliderArrowsColorBorder: black;
+    --najwer23morselsSliderArrowsColor: black;
 }
 ```

package/lib/Slider.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useState as n,useRef as l,useEffect as i,useCallback as s}from"react";import{s as o}from"./style-inject.es-BnTDb6vU.js";var a="Slider-module_sliderContainer__o7YCe",d="Slider-module_slideWrapper__Jll6Y",c="Slider-module_slide__G9U2-",m="Slider-module_sliderBtnControl__dtMGL",f="Slider-module_btn__FGB-r";o("@layer najwer23morselsSlider{.Slider-module_sliderContainer__o7YCe{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_slideWrapper__Jll6Y{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_slide__G9U2-{height:calc(100% - 2px);overflow:hidden;position:absolute;top:0;width:calc(100% - 100px);will-change:transform;&>*{height:100%;width:100%}}.Slider-module_sliderBtnControl__dtMGL{align-items:center;display:flex;font-size:20px;height:100%;justify-content:space-between;left:0;padding:0 20px;pointer-events:none;position:absolute;right:0;z-index:100}.Slider-module_btn__FGB-r{background-color:#1f487e;border:1px solid #fff;border-radius:5px;color:#fff;cursor:pointer;left:50%;padding:10px 30px;pointer-events:auto;user-select:none}}");const p=(e,t,n=!1)=>(n?e.slice(0,t):e.slice(-t)).map((e,t)=>r.cloneElement(e,{key:`${n?"clone-first":"clone-last"}-${t}`,className:e.props.className})),h=({isCircular:o=!1,children:h})=>{const u=r.Children.toArray(h).filter(r.isValidElement),[_,g]=n(o&&u.length>=2?2:0),[y,x]=n(!1),[v,w]=n(0),[b,N]=n(0),S=l(null),C=l([]),E=o&&u.length>=2?[...p(u,2,!1),...u.map((e,t)=>r.cloneElement(e,{key:e.key??t,className:e.props.className})),...p(u,2,!0)]:u.map((e,t)=>r.cloneElement(e,{key:e.key??t,className:e.props.className}));C.current.length!==E.length&&(C.current=Array(E.length).fill(null)),i(()=>{g(o&&u.length>=2?2:0)},[o,u.length]);const k=s(()=>{const e=S.current;if(!e)return;const t=C.current[0];if(!t)return;const r=window.getComputedStyle(t);w(t.offsetWidth+parseFloat(r.marginLeft)+parseFloat(r.marginRight)),N(e.offsetWidth)},[]);i(()=>(k(),window.addEventListener("resize",k),()=>window.removeEventListener("resize",k)),[k]),i(()=>{const e=v+10;C.current.forEach((t,r)=>{if(t)if(o){const n=(r-_)*e+(b-v)/2;t.style.transition=y?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",t.style.transform=`translateX(${n}px)`,t.style.left=""}else{const n=e*(r-_)+(b-v)/2;if(y){const e=parseFloat(t.style.left||"0");t.animate([{left:`${e}px`},{left:`${n}px`}],{duration:400,easing:"ease-out",fill:"forwards"}).finished.then(()=>{t.style.left=`${n}px`,x(!1)})}else t.style.left=`${n}px`;t.style.transition="none",t.style.transform=""}})},[_,v,b,y,E.length,o]),i(()=>{if(!o||!y)return;const e=C.current.length,t=C.current[e-1];if(!t)return;const r=()=>{let n=_;1===_?n=e-3:_===e-2&&(n=2),n!==_&&g(n),x(!1),t.removeEventListener("transitionend",r)};return t.addEventListener("transitionend",r),()=>t.removeEventListener("transitionend",r)},[_,o,y]);return e("div",{className:a,children:[e("div",{className:m,children:[t("button",{className:f,onClick:()=>{y||(x(!0),g(o?e=>e-1:e=>Math.max(e-1,0)))},disabled:y,children:"Prev"}),t("button",{className:f,onClick:()=>{y||(x(!0),g(o?e=>e+1:e=>Math.min(e+1,E.length-1)))},disabled:y,children:"Next"})]}),t("div",{className:d,ref:S,children:E.map((e,r)=>t("div",{ref:e=>{C.current[r]=e},className:`${c}`,"aria-hidden":_!==r,children:e},e.key??r))})]})};h.displayName="Slider";export{h as Slider};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useState as l,useRef as n,useEffect as o,useCallback as s}from"react";import{s as i}from"./style-inject.es-BnTDb6vU.js";var a={sliderContainer:"Slider-module_sliderContainer__o7YCe",slideWrapper:"Slider-module_slideWrapper__Jll6Y",slide:"Slider-module_slide__G9U2-",sliderBtnControl:"Slider-module_sliderBtnControl__dtMGL",btn:"Slider-module_btn__FGB-r"};i("@layer najwer23morselsSlider{.Slider-module_sliderContainer__o7YCe{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_slideWrapper__Jll6Y{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_slide__G9U2-{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.Slider-module_sliderBtnControl__dtMGL{align-items:center;display:flex;height:100%;left:0;padding:0 25px;pointer-events:none;position:absolute;right:0;z-index:100}.Slider-module_btn__FGB-r{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--najwer23morselsSliderArrowsColorBackground,var(--abgc,#fff));border:1px solid var(--najwer23morselsSliderArrowsColorBorder,var(--abc,#000));border-radius:50%;color:var(--najwer23morselsSliderArrowsColor,var(--ac,#000));cursor:pointer;display:flex;left:50%;padding:10px;pointer-events:auto;transition:all .2s linear;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;@media (hover:hover) and (pointer:fine){&:hover{box-shadow:0 4px 8px 0 rgba(0,0,0,.24),0 6px 20px 0 rgba(0,0,0,.19);filter:brightness(.95)}}}}");const d=(e,r,l=!1)=>(l?e.slice(0,r):e.slice(-r)).map((e,r)=>t.cloneElement(e,{key:`${l?"clone-first":"clone-last"}-${r}`,className:e.props.className})),c=({isCircular:i=!1,children:c,className:h,arrowsColor:m,arrowsColorBackground:u,arrowsColorBorder:p})=>{const f=t.Children.toArray(c).filter(t.isValidElement),[g,w]=l(i&&f.length>=2?2:0),[v,b]=l(!1),[x,_]=l(0),[y,C]=l(0),S=n(null),k=n([]),N=n(null),B=i&&f.length>=2?[...d(f,2,!1),...f.map((e,r)=>t.cloneElement(e,{key:e.key??r,className:e.props.className})),...d(f,2,!0)]:f.map((e,r)=>t.cloneElement(e,{key:e.key??r,className:e.props.className}));k.current.length!==B.length&&(k.current=Array(B.length).fill(null)),o(()=>{w(i&&f.length>=2?2:0)},[i,f.length]);const j=s(()=>{const e=S.current;if(!e)return;const r=k.current[0];if(!r)return;const t=window.getComputedStyle(r);_(r.offsetWidth+parseFloat(t.marginLeft)+parseFloat(t.marginRight)),C(e.offsetWidth)},[]);o(()=>{j();const e=()=>{null!==N.current&&clearTimeout(N.current),N.current=window.setTimeout(()=>{j(),i||b(!0)},150)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),null!==N.current&&clearTimeout(N.current)}},[j]),o(()=>{const e=x+10;k.current.forEach((r,t)=>{if(r)if(i){const l=(t-g)*e+(y-x)/2;r.style.transition=v?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",r.style.transform=`translateX(${l}px)`,r.style.left=""}else{const l=e*(t-g)+(y-x)/2;if(v){const e=parseFloat(r.style.left||"0");r.animate([{left:`${e}px`},{left:`${l}px`}],{duration:400,easing:"ease-out",fill:"forwards"}).finished.then(()=>{r.style.left=`${l}px`,b(!1)})}else r.style.left=`${l}px`;r.style.transition="none",r.style.transform=""}})},[g,x,y,v,B.length,i]),o(()=>{if(!i||!v)return;const e=k.current.length,r=k.current[e-1];if(!r)return;const t=()=>{let l=g;1===g?l=e-3:g===e-2&&(l=2),l!==g&&w(l),b(!1),r.removeEventListener("transitionend",t)};return r.addEventListener("transitionend",t),()=>r.removeEventListener("transitionend",t)},[g,i,v]);return e("div",{className:[a.sliderContainer,"MorselsSlider",h].filter(Boolean).join(" "),style:{"--ac":m,"--abgc":u,"--abc":p},children:[e("div",{className:[a.sliderBtnControl,"MorselsSliderControl",h].join(" "),style:{justifyContent:i?"space-between":0===g?"flex-end":g===f.length-1?"flex-start":"space-between"},children:[(i&&f.length>1||0!==g)&&r("button",{className:a.btn,onClick:()=>{v||(b(!0),w(i?e=>e-1:e=>Math.max(e-1,0)))},disabled:v,children:r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",fill:"currentColor",children:r("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"})})}),(i&&f.length>1||g!==f.length-1)&&r("button",{className:a.btn,onClick:()=>{v||(b(!0),w(i?e=>e+1:e=>Math.min(e+1,B.length-1)))},disabled:v,children:r("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",fill:"currentColor",children:r("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"})})})]}),r("div",{className:[a.slideWrapper,"MorselsSliderWrapper",h].join(" "),ref:S,children:B.map((e,t)=>r("div",{ref:e=>{k.current[t]=e},className:`${a.slide}`,style:{width:f.length>1?"calc(100% - 100px)":"100%"},"aria-hidden":g!==t,children:e},e.key??t))})]})};c.displayName="Slider";export{c as Slider};

package/lib/slider/Slider.d.ts

@@ -1,7 +1,10 @@
 import React, { ReactNode } from 'react';
-type SliderProps = {
+interface SliderProps extends React.HTMLAttributes<HTMLDivElement> {
     isCircular?: boolean;
     children: ReactNode;
-};
+    arrowsColor?: string;
+    arrowsColorBackground?: string;
+    arrowsColorBorder?: string;
+}
 export declare const Slider: React.FC<SliderProps>;
 export {};

package/package.json

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