najwer23morsels 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # najwer23morsels
 
+## 0.3.0
+
+### Minor Changes
+
+- Slider without styles for arrows
+
 ## 0.2.0
 
 ### Minor Changes

package/lib/Slider.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import l,{useState as r,useRef as n,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-",h="Slider-module_sliderBtnControl__dtMGL",m="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;height:100%;justify-content:space-between;left:0;padding:0 25px;pointer-events:none;position:absolute;right:0;z-index:100}.Slider-module_btn__FGB-r{background-color:#1f487e;border:1px solid #fff;border-radius:50%;color:#fff;cursor:pointer;display:flex;left:50%;padding:10px;pointer-events:auto;user-select:none}}");const f=(e,t,r=!1)=>(r?e.slice(0,t):e.slice(-t)).map((e,t)=>l.cloneElement(e,{key:`${r?"clone-first":"clone-last"}-${t}`,className:e.props.className})),p=({isCircular:o=!1,children:p})=>{const u=l.Children.toArray(p).filter(l.isValidElement),[g,_]=r(o&&u.length>=2?2:0),[w,v]=r(!1),[y,x]=r(0),[b,C]=r(0),N=n(null),S=n([]),E=o&&u.length>=2?[...f(u,2,!1),...u.map((e,t)=>l.cloneElement(e,{key:e.key??t,className:e.props.className})),...f(u,2,!0)]:u.map((e,t)=>l.cloneElement(e,{key:e.key??t,className:e.props.className}));S.current.length!==E.length&&(S.current=Array(E.length).fill(null)),i(()=>{_(o&&u.length>=2?2:0)},[o,u.length]);const L=s(()=>{const e=N.current;if(!e)return;const t=S.current[0];if(!t)return;const l=window.getComputedStyle(t);x(t.offsetWidth+parseFloat(l.marginLeft)+parseFloat(l.marginRight)),C(e.offsetWidth)},[]);i(()=>(L(),window.addEventListener("resize",L),()=>window.removeEventListener("resize",L)),[L]),i(()=>{const e=y+10;S.current.forEach((t,l)=>{if(t)if(o){const r=(l-g)*e+(b-y)/2;t.style.transition=w?"transform 0.4s cubic-bezier(.4,0,.2,1)":"none",t.style.transform=`translateX(${r}px)`,t.style.left=""}else{const r=e*(l-g)+(b-y)/2;if(w){const e=parseFloat(t.style.left||"0");t.animate([{left:`${e}px`},{left:`${r}px`}],{duration:400,easing:"ease-out",fill:"forwards"}).finished.then(()=>{t.style.left=`${r}px`,v(!1)})}else t.style.left=`${r}px`;t.style.transition="none",t.style.transform=""}})},[g,y,b,w,E.length,o]),i(()=>{if(!o||!w)return;const e=S.current.length,t=S.current[e-1];if(!t)return;const l=()=>{let r=g;1===g?r=e-3:g===e-2&&(r=2),r!==g&&_(r),v(!1),t.removeEventListener("transitionend",l)};return t.addEventListener("transitionend",l),()=>t.removeEventListener("transitionend",l)},[g,o,w]);return e("div",{className:a,children:[e("div",{className:h,children:[t("button",{className:m,onClick:()=>{w||(v(!0),_(o?e=>e-1:e=>Math.max(e-1,0)))},disabled:w,children:t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",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"})})}),t("button",{className:m,onClick:()=>{w||(v(!0),_(o?e=>e+1:e=>Math.min(e+1,E.length-1)))},disabled:w,children:t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512",width:"24",height:"24",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"})})})]}),t("div",{className:d,ref:N,children:E.map((e,l)=>t("div",{ref:e=>{S.current[l]=e},className:`${c}`,"aria-hidden":g!==l,children:e},e.key??l))})]})};p.displayName="Slider";export{p as Slider};

package/lib/Textbox.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";var r={morselsTextBox:"TextBox-module_morselsTextBox__h97Ta"};!function(e,t){void 0===t&&(t={});var r=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("@layer najwer23morselsTextBox{.TextBox-module_morselsTextBox__h97Ta{--mobileFontSize:var(--ms);--desktopFontSize:var(--ds);--minViewport:400;--maxViewport:1400;--textBoxFontFamilyDefault:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--clampMinSize:min(var(--mobileFontSize),var(--desktopFontSize));--clampMaxSize:max(var(--mobileFontSize),var(--desktopFontSize));--fluidStartSize:var(--mobileFontSize);--fluidEndSize:var(--desktopFontSize);--sizeDifference:calc(var(--fluidEndSize) - var(--fluidStartSize));--viewportRange:calc(var(--maxViewport) - var(--minViewport));--slope:calc(var(--sizeDifference)/var(--viewportRange));--intercept:calc(var(--fluidStartSize) - var(--slope)*var(--minViewport));color:var(--najwer23morselsTextBoxColor,var(--c));font-family:var(--najwer23morselsFontFamily,var(--textBoxFontFamilyDefault));font-size:clamp(calc(var(--clampMinSize)/16*1rem),calc(var(--slope)*100vw + var(--intercept)/16*1rem),calc(var(--clampMaxSize)/16*1rem));font-weight:var(--najwer23morselsTextBoxFontWeight,var(--fw));line-height:var(--najwer23morselsTextBoxLineHeight,var(--lh,1.42857));margin:var(--najwer23morselsTextBoxMargin,var(--m));& a{color:var(--najwer23morselsTextBoxColor,var(--c));font-weight:var(--najwer23morselsTextBoxFontWeight,var(--fw));text-decoration:unset;transition:color .3s ease-in-out;&:active,&:focus-visible,&:hover{color:var(--najwer23morselsTextBoxColorHover,var(--ch,var(--c)));font-weight:var(--najwer23morselsTextBoxFontWeightHover,var(--fwh,var(--fw)));text-decoration:underline}}}}");const o=({tag:o="div",children:a,className:i,target:l,rel:n,mobileSize:s,desktopSize:m,lineHeight:c,color:v,href:x,colorHover:d,margin:f,fontWeight:h,fontWeightHover:p,...w})=>e(o,{style:{"--fw":h,"--fwh":p,"--ch":d,"--c":v,"--ms":s,"--ds":m,"--lh":c,...null!=f?{"--m":f}:{}},className:[r.morselsTextBox,"MorselsTextBox",i].filter(Boolean).join(" "),...w,children:[x&&t("a",{className:"MorselsTextBoxLink",href:x,target:l,rel:n,children:a}),!x&&a]});o.displayName="TextBox";export{o as TextBox};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{s as o}from"./style-inject.es-BnTDb6vU.js";var a={morselsTextBox:"TextBox-module_morselsTextBox__h97Ta"};o("@layer najwer23morselsTextBox{.TextBox-module_morselsTextBox__h97Ta{--mobileFontSize:var(--ms);--desktopFontSize:var(--ds);--minViewport:400;--maxViewport:1400;--textBoxFontFamilyDefault:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--clampMinSize:min(var(--mobileFontSize),var(--desktopFontSize));--clampMaxSize:max(var(--mobileFontSize),var(--desktopFontSize));--fluidStartSize:var(--mobileFontSize);--fluidEndSize:var(--desktopFontSize);--sizeDifference:calc(var(--fluidEndSize) - var(--fluidStartSize));--viewportRange:calc(var(--maxViewport) - var(--minViewport));--slope:calc(var(--sizeDifference)/var(--viewportRange));--intercept:calc(var(--fluidStartSize) - var(--slope)*var(--minViewport));color:var(--najwer23morselsTextBoxColor,var(--c));font-family:var(--najwer23morselsFontFamily,var(--textBoxFontFamilyDefault));font-size:clamp(calc(var(--clampMinSize)/16*1rem),calc(var(--slope)*100vw + var(--intercept)/16*1rem),calc(var(--clampMaxSize)/16*1rem));font-weight:var(--najwer23morselsTextBoxFontWeight,var(--fw));line-height:var(--najwer23morselsTextBoxLineHeight,var(--lh,1.42857));margin:var(--najwer23morselsTextBoxMargin,var(--m));& a{color:var(--najwer23morselsTextBoxColor,var(--c));font-weight:var(--najwer23morselsTextBoxFontWeight,var(--fw));text-decoration:unset;transition:color .3s ease-in-out;&:active,&:focus-visible,&:hover{color:var(--najwer23morselsTextBoxColorHover,var(--ch,var(--c)));font-weight:var(--najwer23morselsTextBoxFontWeightHover,var(--fwh,var(--fw)));text-decoration:underline}}}}");const t=({tag:o="div",children:t,className:i,target:l,rel:n,mobileSize:s,desktopSize:m,lineHeight:v,color:c,href:x,colorHover:f,margin:h,fontWeight:p,fontWeightHover:w,...d})=>e(o,{style:{"--fw":p,"--fwh":w,"--ch":f,"--c":c,"--ms":s,"--ds":m,"--lh":v,...null!=h?{"--m":h}:{}},className:[a.morselsTextBox,"MorselsTextBox",i].filter(Boolean).join(" "),...d,children:[x&&r("a",{className:"MorselsTextBoxLink",href:x,target:l,rel:n,children:t}),!x&&t]});t.displayName="TextBox";export{t as TextBox};

package/lib/slider/Slider.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+type SliderProps = {
+    isCircular?: boolean;
+    children: ReactNode;
+};
+export declare const Slider: React.FC<SliderProps>;
+export {};

package/lib/slider/index.d.ts

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

package/lib/style-inject.es-BnTDb6vU.js

@@ -0,0 +1 @@
+function e(e,t){void 0===t&&(t={});var d=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===d&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}export{e as s};

package/package.json

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

package/public/icon/icon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1080" height="1080" viewBox="0 0 1080 1080">
-  <rect width="1080" height="1080" fill="black"/>
-</svg>