@koine/react 2.0.0-beta.9 → 2.0.0-beta.91

package/calendar.esm.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useState, Fragment, useEffect, useMemo, useReducer, useCallback } from 'react';
+import { addDays } from 'date-fns/addDays';
+import { addMonths } from 'date-fns/addMonths';
+import { addWeeks } from 'date-fns/addWeeks';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { endOfWeek } from 'date-fns/endOfWeek';
+import { isWithinInterval } from 'date-fns/isWithinInterval';
+import { startOfWeek } from 'date-fns/startOfWeek';
+import { subMonths } from 'date-fns/subMonths';
+import { subWeeks } from 'date-fns/subWeeks';
+import { format } from 'date-fns/format';
+import { eachWeekOfInterval } from 'date-fns/eachWeekOfInterval';
+import { useSwipeable } from 'react-swipeable';
+import { differenceInDays } from 'date-fns/differenceInDays';
+import { subDays } from 'date-fns/subDays';
+import { isUndefined, isString, arrayToLookup } from '@koine/utils';
+
+let getEventTimestamp=e=>{let t=new Date(e);return t.setHours(0,0,0,0),t.valueOf()/1e3};let getDisplayTime=e=>e.getHours()+":"+"0".repeat(2-e.getMinutes().toString().length)+e.getMinutes();let getStartDate=(e,t)=>(e.setHours(0,0,0),"month"===t?e.setDate(1):"week"===t&&(e=startOfWeek(e,{weekStartsOn:1})),e);let getEndDate=(e,t)=>{let r=e;return "month"===t?r=endOfMonth(e):"week"===t&&(r=endOfWeek(e,{weekStartsOn:1})),r.setHours(23,59,59),r};let getPrevDate=(e,t)=>"month"===t?subMonths(e,1):subWeeks(e,1);let getNextDate=(e,a)=>"month"===a?addMonths(e,1):addWeeks(e,1);let isTodayInView=(e,t)=>isWithinInterval(new Date,{start:e,end:t});let addCalendarEvents=(e,t)=>{for(let r in e){let a=e[r];t[r]=a;}return t};let i=e=>{let t={};for(let r in e){let a=e[r];a.days.forEach(e=>{t[e]=t[e]||{},t[e][r]=a;});}return t},d$1=e=>{let t=[];for(let r in e)t.push(e[r]);return(// sort events first multi, then all day then by start then by created date
+t.sort((e,t)=>{let r=Number(t.multi)-Number(e.multi),a=Number(t.allDay)-Number(e.allDay),n=e.start.getTime()-t.start.getTime(),s=e.created.getTime()-t.created.getTime();return r||a||n||s}),t)};let processEventsInView=(t,r,a,n)=>{let s=i(t),o=d$1(t),l=new Date,m=getEventTimestamp(l),p={},f=[];for(let t=0;t<n.length;t++){let i={props:{key:`week.${t}`},days:[]},d=n[t],u=d.getDate(),g=getEventTimestamp(new Date(d)),h=getEventTimestamp(addDays(new Date(d),6));for(let e=0;e<7;e++){let t=new Date(new Date(d).setDate(u+e)),n=getEventTimestamp(t),f={$isToday:m===n,$isOutOfRange:"month"===r&&t.getMonth()!==a},v={props:{key:`day.${n}`,...f},timestamp:n+"",label:t.getDate()+"",events:[]};// check that we have events in this day
+if(s?.[n]){let t=Object.keys(s[n]).map(()=>0);for(let r=0;r<o.length;r++){let a;let s=o[r],m=1,i=0;if(s.daysMap[n]){// if we already have the information on when the event has been
+// vertically positioned use that index
+if(// only for multi days events:
+s.multi&&(// filter out the days outside of the current week view to avoid
+// making a multi-days event chip wider than the week row or shorter
+// than it should be (when event spans across weeks)
+m=s.days.filter(e=>e>=g&&e<=h).length,// flag the first day of multi-days events, consider that an event
+// might start in a day earlier (hence outside) of the current
+// week/month view, so we always check for Mondays (dayNumber === 0)
+(0===s.days.indexOf(n)||0===e)&&(a=!0)),p[s.uid])i=p[s.uid];else // now look for a free slot and use its index as `top`
+for(let e=0;e<t.length;e++)if(1!==t[e]){i=e;break}// now mark the slot as busy
+t[i]=1,// store the slot vertical position consistently for multi-days events
+a&&(p[s.uid]=i),// push the event, they will be sorted later
+v.events.push({key:`event.${n}-${i}`,...f,...s,isPast:l>s.end,firstOfMulti:a,top:i,width:m});}}// fill the empty slots with events' placeholders
+for(let e=0;e<t.length;e++)1!==t[e]&&v.events.push({key:`event.${n}-${e}}`,placeholder:!0,top:e});// sort events and events placeholders by top position
+v.events.sort((e,t)=>e.top-t.top);}i.days.push(v);}f.push(i);}return f};
+
+/**
+ * TODO: include in this lib utilities like in https://github.com/react-icons/react-icons/blob/master/packages/react-icons/src/iconBase.tsx
+ *
+ * this is the `MdAdd` icon from `react-icons`
+ */let d=l=>/*#__PURE__*/jsxs("svg",{viewBox:"0 0 24 24",fill:"currentColor",stroke:"none",...l,children:[/*#__PURE__*/jsx("path",{d:"M0 0h24v24H0z"}),/*#__PURE__*/jsx("path",{d:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"})]}),/**
+ * Style for button within a event cell
+ *
+ * Here we might differentiate week/month view where the first does not get
+ * ellipsed btn texts, with `Start` as block element and underneath the `Title`
+ * on multiple lines, but that would mean that we loose the ability to interweave
+ * single-day events among the spaces left by wider multi-days events.
+ */o$1={overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"};let CalendarDaygridCell=({eventClicked:a,setEventClicked:s,// eventHovered,
+setEventHovered:h,view:c,maxEvents:u,events:p,calendarsMap:v,Cell:f="div",CellOverflow:y="div",CellEvent:$="div",CellEventBtn:m="div",CellEventTitle:w="span",CellEventStart:g="span"})=>{let[x,M]=useState(!1),O=p.filter(e=>!e.placeholder);return /*#__PURE__*/jsx(f,{children:p.map((t,p)=>{if(p===u&&!x)return /*#__PURE__*/jsxs(y,{onClick:()=>M(!0),children:[/*#__PURE__*/jsx(d,{}),O.length-u]},"overflowMessage"+p);if(p>u&&!x)return null;if(t.placeholder)return /*#__PURE__*/jsx(Fragment,{children:/*#__PURE__*/jsx($,{$placeholder:!0,children:/*#__PURE__*/jsx(m,{"aria-hidden":"true",style:{visibility:"hidden"},$placeholder:!0,children:/*#__PURE__*/jsx(w,{children:" "})})})},t.key);let f={zIndex:t.firstOfMulti?1:0,// to cover the following event days
+position:"relative",width:t.firstOfMulti?`${100*t.width}%`:"100%"};v[t.calendar.id].on||// @ts-expect-error nevermind
+(o$1.display="none");let k={$view:c,$selected:a?.uid===t.uid,$past:t.isPast,$color:t.color,$isOutOfRange:t.$isOutOfRange,$isToday:t.$isToday};return /*#__PURE__*/jsx(Fragment,{children:/*#__PURE__*/jsx($,{style:f,...k,children:/*#__PURE__*/jsx(m,{role:"button",style:o$1,...k,onClick:()=>s(e=>e?.uid===t.uid?null:t),onMouseEnter:()=>h(t),onMouseLeave:()=>h(null),children:t.allDay?/*#__PURE__*/jsx(w,{children:t.title}):/*#__PURE__*/jsxs(Fragment$1,{children:[/*#__PURE__*/jsx(g,{children:getDisplayTime(t.start)}),/*#__PURE__*/jsx(w,{children:t.title})]})})})},t.key)})})};/* {i === events.length - 1 && isExpanded ? (
+              <CellOverflow onClick={() => expand(false)}>
+                <IconCollapse />
+                Show less
+              </CellOverflow>
+            ) : null} */
+
+/**
+ * Dynamically import the date-fns correct locale
+ *
+ * Inspired by:
+ * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
+ */let useDateLocale=(a,l="en")=>{let[r,n]=useState(),[o,c]=useState(l);return(// const [ready, setReady] = useState(false);
+// If the user changes the locale listen to the change and import the locale that is now required.
+useEffect(()=>{let e=async()=>{// This webpack option stops all of the date-fns files being imported and chunked.
+// NB: this makes unnecessary numerous webpack chunks in applications
+// that do not even use this hook, so we comment out the webpack dynamic
+// import and its magic comment
+// const localeToSet = await import(
+//   /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
+//   `date-fns/locale/${locale}/index.js`,
+// );
+let e=await import('date-fns/locale/en-US');c(a||o),n(e.enUS);};// setReady(true);
+// If the locale has not yet been loaded.
+a!==o&&e();},[a,o]),r)};
+
+let KoineCalendarDaygridNav=({range:a,view:l,todayInView:r,handlePrev:i,handleNext:M,handleToday:d,handleView:y,locale:c,NavRoot:m="nav",NavTitle:s="div",NavBtns:b="div",NavBtnPrev:k="button",NavBtnNext:u="button",NavBtnToday:h="button",NavBtnViewMonth:f="button",NavBtnViewWeek:g="button"})=>{let[C,p]=a,v={locale:useDateLocale(c)},x="";return "month"===l&&(x=format(C,"MMMM yyyy",v)),"week"===l&&(x=C.getMonth()===p.getMonth()?format(C,"# MMMM yyyy",v).replace("#",`${C.getDate()}-${p.getDate()}`):`${format(C,"d MMMM",v)} - ${format(p,"d MMMM yyyy",v)}`),/*#__PURE__*/jsxs(m,{children:[/*#__PURE__*/jsxs(b,{children:[/*#__PURE__*/jsx(k,{onClick:i}),/*#__PURE__*/jsx(u,{onClick:M}),/*#__PURE__*/jsx(h,{onClick:d,disabled:r}),/*#__PURE__*/jsx(f,{onClick:()=>y("month"),disabled:"month"===l}),/*#__PURE__*/jsx(g,{onClick:()=>y("week"),disabled:"week"===l})]}),/*#__PURE__*/jsx(s,{range:a,formatted:x})]})};
+
+let KoineCalendarDaygridTable=({locale:d,handlePrev:s,handleNext:c,events:h,dayLabels:f,view:b,range:u,eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,calendarsMap:x={},maxEvents:j=5,Table:C="table",TableHead:D="thead",TableHeadCell:S="th",TableBody:k="tbody",TableBodyRow:z="tr",TableBodyCell:L="td",TableBodyCellDate:O="div",Cell:I,CellOverflow:K,CellEvent:M,CellEventBtn:R,CellEventTitle:T,CellEventStart:W})=>// ...props
+{let q={Cell:I,CellOverflow:K,CellEvent:M,CellEventBtn:R,CellEventTitle:T,CellEventStart:W},[A,B]=useState(f||[0,1,2,3,4,5,6]),[E,F]=useState([]),// const [days, setDays] = useState(dayLabels || [...Array(7).keys()]);
+G=useDateLocale(d),{month:H,weeks:J}=useMemo(()=>(function(e){let[t,a]=e,i=eachWeekOfInterval({start:t,end:a},{weekStartsOn:1});return {month:t.getMonth(),weeks:i}})(u),[u]),N=useSwipeable({onSwipedLeft:c,onSwipedRight:s});return useEffect(()=>{F(processEventsInView(h,b,H,J));},[h,b,H,J]),useEffect(()=>{G&&G.localize&&!f&&B([1,2,3,4,5,6,0].map(// @ts-expect-error nevermind
+e=>G.localize.day(e,{width:"abbreviated"})));},[G,f]),/*#__PURE__*/jsxs(C,{...N,children:[/*#__PURE__*/jsx(D,{children:/*#__PURE__*/jsx("tr",{children:A.map(t=>/*#__PURE__*/jsx(S,{scope:"column",children:t},t))})}),/*#__PURE__*/jsx(k,{children:E.map((r,a)=>/*#__PURE__*/jsx(z,{...r.props,children:r.days.map(r=>/*#__PURE__*/jsxs(L,{...r.props,children:[/*#__PURE__*/jsx(O,{...r.props,children:r.label}),r.events.length>0&&/*#__PURE__*/jsx(CalendarDaygridCell,{eventClicked:v,setEventClicked:g,eventHovered:w,setEventHovered:y,view:b,maxEvents:j,events:r.events,timestamp:r.timestamp,calendarsMap:x,...q})]}))}))})]})};
+
+let KoineCalendarLegend=({calendarsMap:a={},toggleCalendarVisibility:s,LegendItem:d="div",LegendItemStatus:i="span",LegendItemLabel:l="span",LegendItemEvents:t="span"})=>// const sorted = Object.entries(calendarsMap).sort((a, b) => {
+    //   const { name: nameA } = a[1];
+    //   const { name: nameB } = b[1];
+    //   if (nameA < nameB) return -1;
+    //   else if (nameA > nameB) return 1;
+    //   else return 0;
+    // });
+    /*#__PURE__*/jsx(Fragment$1,{children:Object.entries(a).map(([r,a])=>/*#__PURE__*/jsxs(d,{onClick:()=>s(r),$color:a.color,$empty:0===a.events,disabled:0===a.events,children:[/*#__PURE__*/jsx(i,{children:a.on?"⬤":"⭘"}),/*#__PURE__*/jsx(l,{children:a.name}),/*#__PURE__*/jsx(t,{children:a.events})]},"CalendarLegend."+r))});
+
+/** Fall back to `process.env.GOOGLE_CALENDAR_API_KEY *//** Start gethering events from date *//** End gethering events at date *//**
+   * The default is the time zone of the calendar
+   * @see https://developers.google.com/calendar/api/v3/reference/events/list
+   *//** The calendars settings */let getCalendarsEventsFromGoogle=async({calendars:e,...t})=>{let a={};return await Promise.all(e.map(async e=>{addCalendarEvents(await o({calendar:e,...t}),a);})),a};/** The calendar settings */async function o({apiKey:i,calendar:o,timeZone:m="",start:d,end:l}){let c={},u=new URLSearchParams({calendarId:o.id,timeZone:m,singleEvents:"true",maxAttendees:"1",maxResults:"9999",sanitizeHtml:"true",timeMin:d.toISOString(),timeMax:l.toISOString(),key:i||process.env.GOOGLE_CALENDAR_API_KEY||""}).toString(),f=/**
+ * Google event as it comes from Google's API
+ *//**
+ * Google calendar as it comes from Google's API
+ *//**
+ * Google event's date as it comes from Google's API
+ *//** When the event is "all day" we have `date` instead of `dateTime` */"https://www.googleapis.com/calendar/v3/calendars/"+o.id+"/events?"+u;try{let i=await fetch(f,{method:"GET"}),m=await i.json();o.name=o.name||m.summary,m.items.forEach(i=>{let m=function(i,o){let m=new Date(i.created),d=i.htmlLink,l=i.summary,c=i.status,u=new Date(i.start.date||i.start.dateTime),f=new Date(i.end.date||i.end.dateTime),w=o.color,g=isUndefined(i.end.dateTime)&&isString(i.end.date),p=i.location||"",D=i.description||"",// FIXME: he.decode(event.description || '');
+h=m.getTime()+""+u.getTime();// multi-days all day events has as end date the date after to what we actually
+// mean, hence we subtract one day. @see https://support.google.com/calendar/thread/10074544/google-calendar-all-day-events-are-showing-up-as-a-24-hr-event-across-time-zones?hl=en
+g&&f>u&&(f=subDays(f,1)).setHours(23,59,59);let y=function(){let t=new Date(u),a=new Date(f),n=[getEventTimestamp(t)];for(;differenceInDays(a,t);)// console.log(title, differenceInDays(to, from))
+t.setDate(t.getDate()+1),n.push(getEventTimestamp(t));return n}(),E=arrayToLookup(y),S=y.length>1;return {calendar:o,created:m,link:d,title:l,status:c,start:u,end:f,days:y,daysMap:E,multi:S,color:w,allDay:g,location:p,description:D,uid:h}}(i,o);c[m.uid]=m;});}catch(e){}// if (onError) onError(e);
+return c}
+
+/** The locale to format with `date-fns` *//** Calendars infos to use *//** Fall back to `process.env.GOOGLE_CALENDAR_API_KEY *//** The key is the event `uid` *//** It defaults to the first of the current month *//** It defaults to the last day of the current month *//**
+   * The calendar view
+   * @default "month"
+   *//**
+   * The default is the time zone of the calendar
+   * @see https://developers.google.com/calendar/api/v3/reference/events/list
+   */let useCalendar=({locale:d,apiKey:c,calendars:p,events:g,start:m,end:y,view:v="month",timeZone:f="",onError:b})=>{let[w,T]=useState(v),D=m||getStartDate(new Date,w),h=y||getEndDate(D,w),[O,P]=useState([D,h]),[j,x]=useState(isTodayInView(D,h)),[C,L]=useState(g||{}),[N,k]=useState(null),[q,z]=useState(null),[A,B]=useReducer((e,t)=>{let{type:l}=t;switch(l){case"events":{let l=t.payload;return Object.entries(e).reduce((e,[t,n])=>(e[t]={...n,events:l[t]||0},e),{})}case"visibility":{let l=t.payload;if("string"==typeof l)return {...e,[l]:{...e[l],on:!e[l].on}};return Object.entries(e).reduce((e,[t,n])=>(e[t]={...n,on:l.indexOf(t)>-1},e),{})}default:return e}},// initial state
+p.reduce((e,t)=>(e[t.id]={...t,name:t.name||"",on:!0,events:0},e),{})),E=useCallback(e=>{B({type:"visibility",payload:e});},[B]),F=useCallback(e=>{let t={};for(let l in e){let{id:n}=e[l].calendar;t[n]=t[n]||0,t[n]++;}B({type:"events",payload:t});},[]),G=useCallback(async(e,t,l)=>{try{let n=await getCalendarsEventsFromGoogle({apiKey:c,calendars:e,timeZone:f,start:t,end:l});// setEvents(mergeCalendarEvents(events, newEvents));
+L(n);}catch(e){b&&b(e);}},[L,c,f,b]),H=useCallback(()=>{let[e,t]=O,l=getStartDate(new Date,w),n=getEndDate(l,w);P([l,n]),// reset event only if we are not on the current view already
+(e.getTime()!==l.getTime()||t.getTime()!==n.getTime())&&(z(null),k(null));},[w,O]),I=useCallback(()=>{P(([e])=>{let t=getPrevDate(e,w),l=getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),J=useCallback(()=>{P(([e])=>{let t=getNextDate(e,w),l=getEndDate(t,w);return [t,l]}),z(null),k(null);},[w]),K=useCallback(e=>{let t=getStartDate(D,e),l=getEndDate(t,e);P([t,l]),T(e),z(null),k(null);},[D]);return useEffect(()=>{let[e,t]=O;G(p,e,t),x(isTodayInView(e,t));},// eslint-disable-next-line react-hooks/exhaustive-deps
+[O]),useEffect(()=>{C&&F(C);},[C,F]),// when toggling a calendar we also remove the clicked event if that belongs
+// to a now hidden calendar
+useEffect(()=>{q&&!A[q.calendar.id].on&&z(null);},[A,q,z]),{view:w,eventClicked:q,setEventClicked:z,eventHovered:N,setEventHovered:k,getDaygridNavProps:()=>({locale:d,handlePrev:I,handleNext:J,handleToday:H,handleView:K,todayInView:j,range:O,view:w}),getDaygridTableProps:()=>({locale:d,events:C,eventClicked:q,setEventClicked:z,eventHovered:N,setEventHovered:k,handlePrev:I,handleNext:J,calendarsMap:A,range:O,view:w}),getLegendProps:()=>({calendarsMap:A,toggleCalendarVisibility:E})}};
+
+export { CalendarDaygridCell, KoineCalendarDaygridNav, KoineCalendarDaygridTable, KoineCalendarLegend, useCalendar, useDateLocale };

package/classed.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./classed";
+export { default } from "./classed";

package/classed.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./classed.cjs.js').default;

package/classed.cjs.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+// React.ComponentProps<typeof Component>
+// ? @see https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-extracting-prop-types-of-a-component
+// type ClassedComponent<Props = {}> =
+//   | React.ElementType<Props>
+//   | OverridableComponent<any>
+//   | React.Component<Props>
+//   | React.FunctionComponent<Props>
+//   | React.ReactElement<Props>
+//   | React.ReactHTMLElement<any>
+//   | string // | JSX.IntrinsicElements
+//   | ((props: Props) => JSX.Element);
+/**
+ * This utility allows to extend a component a là `styled-components` but for
+ * a className based styling solution like Tailwind,
+ *
+ * It also plays nicely with tailwind intellisense:
+ * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
+ *
+ * For references about tagged functions:
+ * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
+ * - https://makersden.io/blog/reverse-engineering-styled-components
+ * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
+ * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
+ *
+ * Similar projects:
+ * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
+ *
+ * Discussions and Q/A:
+ * - https://stackoverflow.com/q/73055695/1938970
+ */let classed=r=>{// @ts-expect-error nevermind for now...
+let s=r.type||r;return function(r,...a){// FIXME: not sure if this is needed
+// WrappedComponent.displayName = type.toString();
+return /*#__PURE__*/react.forwardRef(// Props
+function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)// like styled-components `transient` props
+t.startsWith("$")||// FIXME: for react 18 we need: @ts-expect-error
+(i[t]=e[t]);// get the tagged function string outcome
+let c=o||r[0];return(// add the custom classes from props
+c=// check if we need to clean it or not from the optional structure `< class="..."`
+(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),/*#__PURE__*/react.createElement(s,{// ...props,
+...i,// only add ot props if it is not an empty string
+className:c||void 0,// add ref to props
+ref:n}))})}};// as unknown as React.ReactElement<typeof props>;
+
+exports.classed = classed;
+exports["default"] = classed;

package/classed.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './classed.cjs.js';
+export { _default as default } from './classed.cjs.default.js';

package/classed.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type ClassedAugmentedProps<Props> = Props & {
+    className?: string;
+    ref?: React.Ref<any>;
+};
+type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? React.HTMLProps<Component> & ClassedAugmentedProps<Props> : ClassedAugmentedProps<Props>;
+export declare let classed: <Props, Component extends React.ElementType<any, keyof React.JSX.IntrinsicElements> = any>(component: Component) => (strings: TemplateStringsArray, ...args: ((props: Props) => string)[] | string[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ClassedFinalProps<Props, Component>> & React.RefAttributes<Component>>;
+export default classed;

package/classed.esm.js

@@ -0,0 +1,46 @@
+import { forwardRef, createElement } from 'react';
+
+// React.ComponentProps<typeof Component>
+// ? @see https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-extracting-prop-types-of-a-component
+// type ClassedComponent<Props = {}> =
+//   | React.ElementType<Props>
+//   | OverridableComponent<any>
+//   | React.Component<Props>
+//   | React.FunctionComponent<Props>
+//   | React.ReactElement<Props>
+//   | React.ReactHTMLElement<any>
+//   | string // | JSX.IntrinsicElements
+//   | ((props: Props) => JSX.Element);
+/**
+ * This utility allows to extend a component a là `styled-components` but for
+ * a className based styling solution like Tailwind,
+ *
+ * It also plays nicely with tailwind intellisense:
+ * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
+ *
+ * For references about tagged functions:
+ * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
+ * - https://makersden.io/blog/reverse-engineering-styled-components
+ * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
+ * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
+ *
+ * Similar projects:
+ * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
+ *
+ * Discussions and Q/A:
+ * - https://stackoverflow.com/q/73055695/1938970
+ */let classed=r=>{// @ts-expect-error nevermind for now...
+let s=r.type||r;return function(r,...a){// FIXME: not sure if this is needed
+// WrappedComponent.displayName = type.toString();
+return /*#__PURE__*/forwardRef(// Props
+function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)// like styled-components `transient` props
+t.startsWith("$")||// FIXME: for react 18 we need: @ts-expect-error
+(i[t]=e[t]);// get the tagged function string outcome
+let c=o||r[0];return(// add the custom classes from props
+c=// check if we need to clean it or not from the optional structure `< class="..."`
+(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),/*#__PURE__*/createElement(s,{// ...props,
+...i,// only add ot props if it is not an empty string
+className:c||void 0,// add ref to props
+ref:n}))})}};// as unknown as React.ReactElement<typeof props>;
+
+export { classed, classed as default };

package/createUseMediaQueryWidth.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./createUseMediaQueryWidth";
+export { default } from "./createUseMediaQueryWidth";

package/createUseMediaQueryWidth.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./createUseMediaQueryWidth.cjs.js').default;

package/createUseMediaQueryWidth.cjs.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@koine/utils');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
+
+/**
+ * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
+ *
+ * @param customBreakpoints
+ * @returns
+ */let createUseMediaQueryWidth=n=>{let a=utils.getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");utils.isUndefined(s)&&(s=o),utils.isUndefined(o)&&(o="min");// with the hook creator approach these breakpoint types cannot be deduced
+// const [br1, br2] = ruleBreakpoint.split("-") as Split<
+//   typeof ruleBreakpoint,
+//   "-"
+// >;
+let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=react.useState(utils.isUndefined(n)?null:n);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return(// Safari < 14 can't use addEventListener on a MediaQueryList
+// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+(l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(// Update the state whenever the media query match state changes
+e.addListener(t),// Clean up on unmount and if the query changes
+()=>{e.removeListener(t);}))},[u]),c}};//// without creator it would be:
+
+exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
+exports["default"] = createUseMediaQueryWidth;

package/createUseMediaQueryWidth.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './createUseMediaQueryWidth.cjs.js';
+export { _default as default } from './createUseMediaQueryWidth.cjs.default.js';

package/createUseMediaQueryWidth.d.ts

@@ -0,0 +1,6 @@
+import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
+type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
+export type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
+export type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;
+export declare let createUseMediaQueryWidth: <TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig) => <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: MediaQueryWidth<TBreakpoints>, serverValue?: null | boolean) => boolean | null;
+export default createUseMediaQueryWidth;

package/createUseMediaQueryWidth.esm.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import { getMediaQueryWidthResolvers, isUndefined } from '@koine/utils';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
+
+/**
+ * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
+ *
+ * @param customBreakpoints
+ * @returns
+ */let createUseMediaQueryWidth=n=>{let a=getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");isUndefined(s)&&(s=o),isUndefined(o)&&(o="min");// with the hook creator approach these breakpoint types cannot be deduced
+// const [br1, br2] = ruleBreakpoint.split("-") as Split<
+//   typeof ruleBreakpoint,
+//   "-"
+// >;
+let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=useState(isUndefined(n)?null:n);return useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return(// Safari < 14 can't use addEventListener on a MediaQueryList
+// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+(l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(// Update the state whenever the media query match state changes
+e.addListener(t),// Clean up on unmount and if the query changes
+()=>{e.removeListener(t);}))},[u]),c}};//// without creator it would be:
+
+export { createUseMediaQueryWidth, createUseMediaQueryWidth as default };

package/extendComponent.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./extendComponent";
+export { default } from "./extendComponent";

package/extendComponent.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./extendComponent.cjs.js').default;

package/extendComponent.cjs.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+let extendComponent=(t,o)=>// const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
+    //   (props, ref) => createElement(component, { ...props, ref })
+    // );
+    Object.assign(// FIXME: check if we need to forwardRef or not
+    o=>react.createElement(t,o),{...o,defaultProps:o});
+
+exports["default"] = extendComponent;
+exports.extendComponent = extendComponent;

package/extendComponent.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './extendComponent.cjs.js';
+export { _default as default } from './extendComponent.cjs.default.js';

package/{helpers/extend-component.d.ts → extendComponent.d.ts}

@@ -1,6 +1,5 @@
-import React from "react";
 export type ExtendableComponent<Props = any> = React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
-export declare const extendComponent: <Component extends ExtendableComponent<any>, DefaultProps extends {}>(component: Component, defaultProps: DefaultProps) => ((props: React.ComponentProps<Component>) => React.FunctionComponentElement<any>) & DefaultProps & {
+export declare let extendComponent: <Component extends ExtendableComponent<any>, DefaultProps extends {}>(component: Component, defaultProps: DefaultProps) => ((props: React.ComponentProps<Component>) => import("react").FunctionComponentElement<any>) & DefaultProps & {
     defaultProps: DefaultProps;
 };
 export interface OverridableComponents {
@@ -10,17 +9,6 @@ export interface OverridableComponents {
         motionable?: boolean;
     };
 }
-/**
- * Type to define a component that has overridable components.
- *
- * Each of them can define its:
- * - `type`: either as a native HTMLElement (the props for that element will be
- * automatically inferred) or as a custom React component
- * - `props`: any additional custom props
- * - `motionable`: if that component has a possible implementation with `framer-motion`,
- * in that case we remove some HTMLAttributes props which collides with
- * `MotionProps` from framer.
- */
 export type WithComponents<Props, Components extends OverridableComponents> = Props & {
     [Name in keyof Components]: NonNullable<Components[Name]["type"] extends keyof JSX.IntrinsicElements ? React.ElementType<Components[Name]["motionable"] extends true ? Omit<React.ComponentPropsWithoutRef<Components[Name]["type"]>, HtmlAttributesCollidingWithMotionProps> & Components[Name]["props"] : React.ComponentPropsWithoutRef<Components[Name]["type"]> & Components[Name]["props"]> : Components[Name]["type"]>;
 };

package/extendComponent.esm.js

@@ -0,0 +1,9 @@
+import { createElement } from 'react';
+
+let extendComponent=(t,o)=>// const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
+    //   (props, ref) => createElement(component, { ...props, ref })
+    // );
+    Object.assign(// FIXME: check if we need to forwardRef or not
+    o=>createElement(t,o),{...o,defaultProps:o});
+
+export { extendComponent as default, extendComponent };

package/forms/antispam.d.ts

@@ -0,0 +1,27 @@
+import { type ObjectShape } from "@kuus/yup";
+export declare let encodeForm: <T extends ObjectShape = {}>(validationRules: T) => {
+    encodedSchema: import("@kuus/yup").ObjectSchema<{
+        [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, any, any, any> ? T[keyof T]["__outputType"] : T[keyof T] extends {
+            readonly key: string;
+            readonly isContext: boolean;
+            readonly isValue: boolean;
+            readonly isSibling: boolean;
+            readonly path: any;
+            readonly getter: (data: unknown) => unknown;
+            readonly map?: ((value: unknown) => infer T_1) | undefined;
+            readonly __isYupRef: boolean;
+            getValue(value: any, parent?: {} | undefined, context?: {} | undefined): infer T_1;
+            cast(value: any, options?: {
+                parent?: {} | undefined;
+                context?: {} | undefined;
+            } | undefined): infer T_1;
+            resolve(): any;
+            describe(): import("@kuus/yup").SchemaRefDescription;
+            toString(): string;
+        } ? T_1 : unknown;
+    }, import("@kuus/yup").AnyObject, {
+        [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, import("@kuus/yup").AnyObject, any, any> ? T[keyof T]["__default"] : undefined;
+    }, "">;
+    encodedNames: Record<keyof T, string>;
+};
+export declare let decodeForm: <ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData) => ReturnAs;

package/forms.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./forms";

package/forms.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./forms.cjs.js').default;

package/forms.cjs.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var yup = require('@kuus/yup');
+var utils = require('@koine/utils');
+
+/**
+ * Encode form
+ *
+ * Takes a record of yup validations and outputs a `yup` schema with encoded
+ * names (antispam technique) and a record of the encoded/decoded input `name`s.
+ *
+ * We skip the names prefixed wth an underscore which are considered programmatic
+ * form data not created by user input.
+ *
+ * FIXME: types https://github.com/jquense/yup/issues/1700
+ */let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=utils.encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:// we need `.required()` to correctly infer the type @see
+// https://github.com/jquense/yup/issues/946
+yup.object(o).required(),encodedNames:i}};/**
+ * Decode form data
+ *
+ * This function is meant to be used inside an api endpoint to gather an encoded
+ * form submit data and transform it to the decoded desired json data.
+ *
+ * Here too we skip encoding/decoding process for names prefixed wth an underscore
+ * which are considered programmatic form data not created by user input.
+ */let decodeForm=e=>{let r={};for(let i in e){let l=utils.decode(i);// always add underscore prefixed names as they are treated as internal
+// private inputs outside of the honeypot system, normalise them here removing
+// the underscore prefix
+i.startsWith("_")?// @ts-expect-error nevermind
+r[i.substring(1)]=e[i]:utils.isUndefined(e[i])||""!==e[l]||// @ts-expect-error nevermind
+(r[l]=e[i]);}// console.log(formData, decoded, json);
+return r};
+
+exports.decodeForm = decodeForm;
+exports.encodeForm = encodeForm;

package/forms.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './forms.cjs.js';
+export { _default as default } from './forms.cjs.default.js';

package/forms.d.ts

@@ -0,0 +1 @@
+export * from "./forms/antispam";

package/forms.esm.js

@@ -0,0 +1,32 @@
+import { object } from '@kuus/yup';
+import { encode, decode, isUndefined } from '@koine/utils';
+
+/**
+ * Encode form
+ *
+ * Takes a record of yup validations and outputs a `yup` schema with encoded
+ * names (antispam technique) and a record of the encoded/decoded input `name`s.
+ *
+ * We skip the names prefixed wth an underscore which are considered programmatic
+ * form data not created by user input.
+ *
+ * FIXME: types https://github.com/jquense/yup/issues/1700
+ */let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:// we need `.required()` to correctly infer the type @see
+// https://github.com/jquense/yup/issues/946
+object(o).required(),encodedNames:i}};/**
+ * Decode form data
+ *
+ * This function is meant to be used inside an api endpoint to gather an encoded
+ * form submit data and transform it to the decoded desired json data.
+ *
+ * Here too we skip encoding/decoding process for names prefixed wth an underscore
+ * which are considered programmatic form data not created by user input.
+ */let decodeForm=e=>{let r={};for(let i in e){let l=decode(i);// always add underscore prefixed names as they are treated as internal
+// private inputs outside of the honeypot system, normalise them here removing
+// the underscore prefix
+i.startsWith("_")?// @ts-expect-error nevermind
+r[i.substring(1)]=e[i]:isUndefined(e[i])||""!==e[l]||// @ts-expect-error nevermind
+(r[l]=e[i]);}// console.log(formData, decoded, json);
+return r};
+
+export { decodeForm, encodeForm };

package/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./index";

package/index.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./index.cjs.js').default;

package/index.cjs.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var classed = require('./classed.cjs.js');
+var createUseMediaQueryWidth = require('./createUseMediaQueryWidth.cjs.js');
+var extendComponent = require('./extendComponent.cjs.js');
+var FaviconTags = require('./FaviconTags.cjs.js');
+var mergeRefs = require('./mergeRefs.cjs.js');
+var Meta = require('./Meta.cjs.js');
+var NoJs = require('./NoJs.cjs.js');
+var useAsyncFn = require('./useAsyncFn.cjs.js');
+var useFirstMountState = require('./useFirstMountState.cjs.js');
+var useFixedOffset = require('./useFixedOffset.cjs.js');
+var useFocus = require('./useFocus.cjs.js');
+var useInterval = require('./useInterval.cjs.js');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
+var useKeyUp = require('./useKeyUp.cjs.js');
+var useMeasure = require('./useMeasure.cjs.js');
+var useMountedState = require('./useMountedState.cjs.js');
+var useNavigateAway = require('./useNavigateAway.cjs.js');
+var usePrevious = require('./usePrevious.cjs.js');
+var usePreviousRef = require('./usePreviousRef.cjs.js');
+var useScrollPosition = require('./useScrollPosition.cjs.js');
+var useScrollThreshold = require('./useScrollThreshold.cjs.js');
+var useSmoothScroll = require('./useSmoothScroll.cjs.js');
+var useSpinDelay = require('./useSpinDelay.cjs.js');
+var useTraceUpdate = require('./useTraceUpdate.cjs.js');
+var useUpdateEffect = require('./useUpdateEffect.cjs.js');
+var useWindowSize = require('./useWindowSize.cjs.js');
+require('react');
+require('@koine/utils');
+require('react/jsx-runtime');
+require('@koine/dom');
+
+
+
+exports.classed = classed.classed;
+exports.createUseMediaQueryWidth = createUseMediaQueryWidth.createUseMediaQueryWidth;
+exports.extendComponent = extendComponent.extendComponent;
+exports.FaviconTags = FaviconTags.FaviconTags;
+exports.mergeRefs = mergeRefs.mergeRefs;
+exports.Meta = Meta.Meta;
+exports.NoJs = NoJs.NoJs;
+exports.useAsyncFn = useAsyncFn.useAsyncFn;
+exports.useFirstMountState = useFirstMountState.useFirstMountState;
+exports.useFixedOffset = useFixedOffset.useFixedOffset;
+exports.useFocus = useFocus.useFocus;
+exports.useInterval = useInterval.useInterval;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
+exports.useKeyUp = useKeyUp.useKeyUp;
+exports.useMeasure = useMeasure.useMeasure;
+exports.useMountedState = useMountedState.useMountedState;
+exports.useNavigateAway = useNavigateAway.useNavigateAway;
+exports.usePrevious = usePrevious.usePrevious;
+exports.usePreviousRef = usePreviousRef.usePreviousRef;
+exports.useScrollPosition = useScrollPosition.useScrollPosition;
+exports.useScrollThreshold = useScrollThreshold.useScrollThreshold;
+exports.useSmoothScroll = useSmoothScroll.useSmoothScroll;
+exports.useSpinDelay = useSpinDelay.useSpinDelay;
+exports.useTraceUpdate = useTraceUpdate.useTraceUpdate;
+exports.useUpdateEffect = useUpdateEffect.useUpdateEffect;
+exports.useWindowSize = useWindowSize.useWindowSize;

package/index.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './index.cjs.js';
+export { _default as default } from './index.cjs.default.js';

package/index.d.ts

@@ -1 +1,28 @@
-export * from "./shared";
+export { classed } from "./classed";
+export { createUseMediaQueryWidth, type MediaQuerWidthDef, type MediaQueryWidth, } from "./createUseMediaQueryWidth";
+export { type ExtendableComponent, type OverridableComponents, type WithComponents, extendComponent, } from "./extendComponent";
+export { FaviconTags, type FaviconTagsProps } from "./FaviconTags";
+export { mergeRefs } from "./mergeRefs";
+export { Meta, type MetaProps } from "./Meta";
+export { NoJs, type NoJsProps } from "./NoJs";
+export type { Polymorphic } from "./Polymorphic";
+export { useAsyncFn, type UseAsyncFnReturn, type UseAsyncState, } from "./useAsyncFn";
+export { useFirstMountState } from "./useFirstMountState";
+export { useFixedOffset } from "./useFixedOffset";
+export { useFocus } from "./useFocus";
+export { useInterval } from "./useInterval";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+export { useKeyUp } from "./useKeyUp";
+export { useMeasure, type UseMeasureOptions, type UseMeasureReturn, } from "./useMeasure";
+export { useMountedState } from "./useMountedState";
+export { useNavigateAway, type UseNavigateAwayHandler, } from "./useNavigateAway";
+export { usePrevious } from "./usePrevious";
+export { usePreviousRef } from "./usePreviousRef";
+export { useScrollPosition } from "./useScrollPosition";
+export { useScrollThreshold } from "./useScrollThreshold";
+export { useSmoothScroll } from "./useSmoothScroll";
+export { useSpinDelay } from "./useSpinDelay";
+export { useTraceUpdate } from "./useTraceUpdate";
+export { useUpdateEffect } from "./useUpdateEffect";
+export { useWindowSize } from "./useWindowSize";
+export type { KoineComponentProps, KoineComponent } from "./types";