@koine/react 2.0.0-beta.7 → 2.0.0-beta.71

package/hooks/useSpinDelay.d.ts

@@ -1,14 +1 @@
-/**
- * Wraps your booleans only returning true after the `delay`, and for a minimum
- * time of `minDuration`. This way you're sure that you don't show unnecessary
- * or very short living spinners.
- *
- * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
- *
- * - Smaller footprint and options object as argument
- *
- * @param delay [500]
- * @param minDuration [200]
- */
-export declare function useSpinDelay(loading: boolean, delay?: number, minDuration?: number): boolean;
-export default useSpinDelay;
+export declare let useSpinDelay: (loading: boolean, delay?: number, minDuration?: number) => boolean;

package/hooks/useTraceUpdate.d.ts

@@ -1,5 +1 @@
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */
-export declare function useTraceUpdate(props: any): void;
-export default useTraceUpdate;
+export declare let useTraceUpdate: (props: any) => void;

package/hooks/useUpdateEffect.d.ts

@@ -1,6 +1,2 @@
 import { useEffect } from "react";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */
-export declare const useUpdateEffect: typeof useEffect;
-export default useUpdateEffect;
+export declare let useUpdateEffect: typeof useEffect;

package/hooks/useWindowSize.d.ts

@@ -1,12 +1,2 @@
-import debounce from "@koine/utils/debounce";
-/**
- * # Use `window` size
- *
- * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
- *
- * @returns An array with:
- * 1) _width_: using `window.innerWidth`
- * 2) _height_: using `window.innerHeight`
- */
-export declare function useWindowSize(wait?: Parameters<typeof debounce>[1], immediate?: Parameters<typeof debounce>[2]): readonly [number, number];
-export default useWindowSize;
+import { debounce } from "@koine/utils";
+export declare let useWindowSize: (wait?: Parameters<typeof debounce>[1], immediate?: Parameters<typeof debounce>[2]) => readonly [number, number];

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,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@koine/utils');
+var dom = require('@koine/dom');
+
+let useMountedState=()=>{let u=react.useRef(!1),n=react.useCallback(()=>u.current,[]);return react.useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
+
+let useAsyncFn=(o,l=[],u={loading:!1})=>{let a=react.useRef(0),i=useMountedState(),[d,c]=react.useState(u),g=react.useCallback((...r)=>{let t=++a.current;return d.loading||c(r=>({...r,loading:!0})),o(...r).then(r=>(i()&&t===a.current&&c({value:r,loading:!1}),r),r=>(i()&&t===a.current&&c({error:r,loading:!1}),r))},l);return [d,g]};
+
+let useFirstMountState=()=>{let t=react.useRef(!0);return t.current?(t.current=!1,!0):t.current};
+
+let useIsomorphicLayoutEffect=utils.isBrowser?react.useLayoutEffect:react.useEffect;
+
+let n$1=e=>{dom.injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};let useFixedOffset=i=>{let c=react.useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=dom.calculateFixedOffset();c.current=e,n$1(e);};if(e(),!ResizeObserver)return dom.listenResizeDebounced(0,e);{let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),c.current=r,utils.debounce(()=>n$1(r),400,!0)();});return dom.$each(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),c};
+
+let useFocus=()=>{let e=react.useRef(null);return [e,()=>{e.current&&e.current.focus();}]};
+
+let useInterval=(n,l,u=[])=>{let o=react.useRef();react.useEffect(()=>{o.current=n;},[n,...u]),react.useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return utils.noop},[l]);};
+
+let useKeyUp=(o,r=[])=>{react.useEffect(()=>dom.on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
+
+let e$1;let f=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:l}=window.getComputedStyle(e);return [r,n,l].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...f(e.parentElement)]},h=["x","y","top","bottom","left","right","width","height"],p=(e,t)=>h.every(r=>e[r]===t[r]);let useMeasure=h=>{let{scroll:d=!1}=h||{},[a,b]=react.useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),g=react.useRef([null,null,null,a]),v=react.useRef(!1);react.useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);let[w,,y]=react.useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();Object.freeze(n),v.current&&!p(r,n)&&(g.current[3]=n,b(n));},t=utils.debounce(e);return [e,t,t]},[b]);function x(){let[,e,t]=g.current;e&&(e.forEach(e=>dom.off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}function z(){let[t,r]=g.current;t&&!e$1&&ResizeObserver&&(e$1=new ResizeObserver(y),g.current[2]=e$1,e$1.observe(t),d&&r&&r.forEach(e=>dom.on(e,"scroll",y,{capture:!0,passive:!0})));}return react.useEffect(()=>d?dom.listenScrollDebounced(0,w,100):utils.noop,[d,w]),react.useEffect(()=>dom.listenResizeDebounced(0,w,100),[w]),react.useEffect(()=>{x(),z();},[d]),react.useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=f(e),z());},a,w]};
+
+let useNavigateAway=o=>{let n=react.useRef();react.useEffect(()=>{n.current=e=>{let r=o(e);return (r&&e.preventDefault(),"string"==typeof r)?e.returnValue=r:e.defaultPrevented?e.returnValue="":void 0};},[o]),react.useEffect(()=>dom.on(window,"beforeunload",e=>n.current?.(e)),[]);};
+
+let usePrevious=(r,t)=>{let[o,u]=react.useState([r,t]);return o[1]!==r&&u([o[1],r]),o[0]};
+
+let usePreviousRef=t=>{let u=react.useRef();return react.useEffect(()=>{u.current=t;}),u.current};
+
+let l={x:0,y:0},n=r=>r?.getBoundingClientRect(),u=(r,e)=>{if(!utils.isBrowser)return l;if(!e)return {x:window.scrollX,y:window.scrollY};let o=n(r?.current||document.body),u=n(e.current);return o?u?{x:(u.x||0)-(o.x||0),y:(u.y||0)-(o.y||0)}:{x:o.left,y:o.top}:l};let useScrollPosition=(l,n=[],i,c,m)=>{let f=react.useRef(u(null,c)),s=null,y=()=>{let r=u(i,c);l(r,f.current),f.current=r,s=null;};useIsomorphicLayoutEffect(()=>{if(!utils.isBrowser)return;let r=dom.listenScroll(()=>{m?null===s&&(s=window.setTimeout(y,m)):y();},c?.current);return ()=>{r(),s&&clearTimeout(s);}},n);};
+
+let useScrollThreshold=(i,m)=>{let[n,f]=react.useState(!1),u=react.useCallback(()=>{if(i){let r=window.scrollY,o=r<i,e=r>i;f(e),m&&m(o,e);}},[i,m]);return react.useEffect(()=>{if(i){let r=dom.listenScroll(u);return u(),r}return utils.noop},[i,u]),n};
+
+let useSmoothScroll=i=>{let l=useFixedOffset();return react.useCallback((e,m,f,n,u)=>{let c;let p=!1;if(utils.isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=dom.getOffsetTopSlim(t)-l.current,p=!0);}utils.isNumber(c)&&dom.scrollTo(c=c+(m||0)+(i||p?0:l.current),f,n,u);},[i,l])};
+
+var e,r;(r=e||(e={}))[r.IDLE=0]="IDLE",r[r.DELAY=1]="DELAY",r[r.DISPLAY=2]="DISPLAY",r[r.EXPIRE=3]="EXPIRE";let useSpinDelay=(e,r=500,i=200)=>{let[n,o]=react.useState(0),E=react.useRef();return react.useEffect(()=>{e&&0===n&&(clearTimeout(E.current),E.current=setTimeout(()=>{if(!e)return o(0);E.current=setTimeout(()=>{o(3);},i),o(2);},r),o(1)),e||2===n||(clearTimeout(E.current),o(0));},[e,n,r,i]),react.useEffect(()=>()=>clearTimeout(E.current),[]),2===n||3===n};
+
+let useTraceUpdate=t=>{let c=react.useRef(t);react.useEffect(()=>{let e=Object.entries(t).reduce((e,[r,t])=>(c.current[r]!==t&&(e[r]=[c.current[r],t]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=t;});};
+
+let useUpdateEffect=(r,o)=>{let f=useFirstMountState();react.useEffect(()=>{if(!f)return r()},o);};
+
+let useWindowSize=(n,o)=>{let[d,m]=react.useState(0),[w,l]=react.useState(0);return react.useEffect(()=>{let e=()=>{m(window.innerWidth),l(window.innerHeight);},r=n?dom.listenResizeDebounced(0,e,n,o):dom.listenResize(e);return e(),r},[n,o]),[d,w]};
+
+let classed=r=>{let n=r.type||r;return function(r,...o){return react.forwardRef(function(e,s){let a=o.map((t,n)=>{let o="";return "function"==typeof t?o=t(e):void 0!==t&&(o=t.toString()),r[n]+o}).join(""),i="string"==typeof n,l=i?{}:e;if(i)for(let t in e)t.startsWith("$")||(l[t]=e[t]);let c=a||r[0];return c=(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),react.createElement(n,{...l,className:c||void 0,ref:s})})}};
+
+let createUseMediaQueryWidth=i=>{let o=utils.getMediaQueryWidthResolvers(i);return function(t,i){let[s,a]=t.substring(1).split("-");utils.isUndefined(a)&&(a=s),utils.isUndefined(s)&&(s="min");let[m,d]=a.split("_"),l=o[s](m,d),[c,u]=react.useState(utils.isUndefined(i)?null:i);return useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(l),t=e=>{u(e.matches);};return (u(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(e.addListener(t),()=>{e.removeListener(t);})},[l]),c}};
+
+let extendComponent=(t,o)=>Object.assign(o=>react.createElement(t,o),{...o,defaultProps:o});
+
+let mergeRefs=e=>r=>{e.forEach(e=>{"function"==typeof e?e(r):null!=e&&(e.current=r);});};
+
+exports.classed = classed;
+exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
+exports.extendComponent = extendComponent;
+exports.mergeRefs = mergeRefs;
+exports.useAsyncFn = useAsyncFn;
+exports.useFirstMountState = useFirstMountState;
+exports.useFixedOffset = useFixedOffset;
+exports.useFocus = useFocus;
+exports.useInterval = useInterval;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useKeyUp = useKeyUp;
+exports.useMeasure = useMeasure;
+exports.useMountedState = useMountedState;
+exports.useNavigateAway = useNavigateAway;
+exports.usePrevious = usePrevious;
+exports.usePreviousRef = usePreviousRef;
+exports.useScrollPosition = useScrollPosition;
+exports.useScrollThreshold = useScrollThreshold;
+exports.useSmoothScroll = useSmoothScroll;
+exports.useSpinDelay = useSpinDelay;
+exports.useTraceUpdate = useTraceUpdate;
+exports.useUpdateEffect = useUpdateEffect;
+exports.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,3 @@
-export * from "./shared";
+export * from "./hooks";
+export * from "./utils";
+export * from "./types";

package/index.esm.js

@@ -0,0 +1,51 @@
+import { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, forwardRef, createElement } from 'react';
+import { isBrowser, debounce, noop, isNumber, getMediaQueryWidthResolvers, isUndefined } from '@koine/utils';
+import { listenResizeDebounced, $each, calculateFixedOffset, injectCss, on, listenScrollDebounced, off, listenScroll, getOffsetTopSlim, scrollTo, listenResize } from '@koine/dom';
+
+let useMountedState=()=>{let u=useRef(!1),n=useCallback(()=>u.current,[]);return useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
+
+let useAsyncFn=(o,l=[],u={loading:!1})=>{let a=useRef(0),i=useMountedState(),[d,c]=useState(u),g=useCallback((...r)=>{let t=++a.current;return d.loading||c(r=>({...r,loading:!0})),o(...r).then(r=>(i()&&t===a.current&&c({value:r,loading:!1}),r),r=>(i()&&t===a.current&&c({error:r,loading:!1}),r))},l);return [d,g]};
+
+let useFirstMountState=()=>{let t=useRef(!0);return t.current?(t.current=!1,!0):t.current};
+
+let useIsomorphicLayoutEffect=isBrowser?useLayoutEffect:useEffect;
+
+let n$1=e=>{injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};let useFixedOffset=i=>{let c=useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=calculateFixedOffset();c.current=e,n$1(e);};if(e(),!ResizeObserver)return listenResizeDebounced(0,e);{let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),c.current=r,debounce(()=>n$1(r),400,!0)();});return $each(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),c};
+
+let useFocus=()=>{let e=useRef(null);return [e,()=>{e.current&&e.current.focus();}]};
+
+let useInterval=(n,l,u=[])=>{let o=useRef();useEffect(()=>{o.current=n;},[n,...u]),useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return noop},[l]);};
+
+let useKeyUp=(o,r=[])=>{useEffect(()=>on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
+
+let e$1;let f=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:l}=window.getComputedStyle(e);return [r,n,l].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...f(e.parentElement)]},h=["x","y","top","bottom","left","right","width","height"],p=(e,t)=>h.every(r=>e[r]===t[r]);let useMeasure=h=>{let{scroll:d=!1}=h||{},[a,b]=useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),g=useRef([null,null,null,a]),v=useRef(!1);useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);let[w,,y]=useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();Object.freeze(n),v.current&&!p(r,n)&&(g.current[3]=n,b(n));},t=debounce(e);return [e,t,t]},[b]);function x(){let[,e,t]=g.current;e&&(e.forEach(e=>off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}function z(){let[t,r]=g.current;t&&!e$1&&ResizeObserver&&(e$1=new ResizeObserver(y),g.current[2]=e$1,e$1.observe(t),d&&r&&r.forEach(e=>on(e,"scroll",y,{capture:!0,passive:!0})));}return useEffect(()=>d?listenScrollDebounced(0,w,100):noop,[d,w]),useEffect(()=>listenResizeDebounced(0,w,100),[w]),useEffect(()=>{x(),z();},[d]),useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=f(e),z());},a,w]};
+
+let useNavigateAway=o=>{let n=useRef();useEffect(()=>{n.current=e=>{let r=o(e);return (r&&e.preventDefault(),"string"==typeof r)?e.returnValue=r:e.defaultPrevented?e.returnValue="":void 0};},[o]),useEffect(()=>on(window,"beforeunload",e=>n.current?.(e)),[]);};
+
+let usePrevious=(r,t)=>{let[o,u]=useState([r,t]);return o[1]!==r&&u([o[1],r]),o[0]};
+
+let usePreviousRef=t=>{let u=useRef();return useEffect(()=>{u.current=t;}),u.current};
+
+let l={x:0,y:0},n=r=>r?.getBoundingClientRect(),u=(r,e)=>{if(!isBrowser)return l;if(!e)return {x:window.scrollX,y:window.scrollY};let o=n(r?.current||document.body),u=n(e.current);return o?u?{x:(u.x||0)-(o.x||0),y:(u.y||0)-(o.y||0)}:{x:o.left,y:o.top}:l};let useScrollPosition=(l,n=[],i,c,m)=>{let f=useRef(u(null,c)),s=null,y=()=>{let r=u(i,c);l(r,f.current),f.current=r,s=null;};useIsomorphicLayoutEffect(()=>{if(!isBrowser)return;let r=listenScroll(()=>{m?null===s&&(s=window.setTimeout(y,m)):y();},c?.current);return ()=>{r(),s&&clearTimeout(s);}},n);};
+
+let useScrollThreshold=(i,m)=>{let[n,f]=useState(!1),u=useCallback(()=>{if(i){let r=window.scrollY,o=r<i,e=r>i;f(e),m&&m(o,e);}},[i,m]);return useEffect(()=>{if(i){let r=listenScroll(u);return u(),r}return noop},[i,u]),n};
+
+let useSmoothScroll=i=>{let l=useFixedOffset();return useCallback((e,m,f,n,u)=>{let c;let p=!1;if(isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=getOffsetTopSlim(t)-l.current,p=!0);}isNumber(c)&&scrollTo(c=c+(m||0)+(i||p?0:l.current),f,n,u);},[i,l])};
+
+var e,r;(r=e||(e={}))[r.IDLE=0]="IDLE",r[r.DELAY=1]="DELAY",r[r.DISPLAY=2]="DISPLAY",r[r.EXPIRE=3]="EXPIRE";let useSpinDelay=(e,r=500,i=200)=>{let[n,o]=useState(0),E=useRef();return useEffect(()=>{e&&0===n&&(clearTimeout(E.current),E.current=setTimeout(()=>{if(!e)return o(0);E.current=setTimeout(()=>{o(3);},i),o(2);},r),o(1)),e||2===n||(clearTimeout(E.current),o(0));},[e,n,r,i]),useEffect(()=>()=>clearTimeout(E.current),[]),2===n||3===n};
+
+let useTraceUpdate=t=>{let c=useRef(t);useEffect(()=>{let e=Object.entries(t).reduce((e,[r,t])=>(c.current[r]!==t&&(e[r]=[c.current[r],t]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=t;});};
+
+let useUpdateEffect=(r,o)=>{let f=useFirstMountState();useEffect(()=>{if(!f)return r()},o);};
+
+let useWindowSize=(n,o)=>{let[d,m]=useState(0),[w,l]=useState(0);return useEffect(()=>{let e=()=>{m(window.innerWidth),l(window.innerHeight);},r=n?listenResizeDebounced(0,e,n,o):listenResize(e);return e(),r},[n,o]),[d,w]};
+
+let classed=r=>{let n=r.type||r;return function(r,...o){return forwardRef(function(e,s){let a=o.map((t,n)=>{let o="";return "function"==typeof t?o=t(e):void 0!==t&&(o=t.toString()),r[n]+o}).join(""),i="string"==typeof n,l=i?{}:e;if(i)for(let t in e)t.startsWith("$")||(l[t]=e[t]);let c=a||r[0];return c=(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),createElement(n,{...l,className:c||void 0,ref:s})})}};
+
+let createUseMediaQueryWidth=i=>{let o=getMediaQueryWidthResolvers(i);return function(t,i){let[s,a]=t.substring(1).split("-");isUndefined(a)&&(a=s),isUndefined(s)&&(s="min");let[m,d]=a.split("_"),l=o[s](m,d),[c,u]=useState(isUndefined(i)?null:i);return useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(l),t=e=>{u(e.matches);};return (u(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(e.addListener(t),()=>{e.removeListener(t);})},[l]),c}};
+
+let extendComponent=(t,o)=>Object.assign(o=>createElement(t,o),{...o,defaultProps:o});
+
+let mergeRefs=e=>r=>{e.forEach(e=>{"function"==typeof e?e(r):null!=e&&(e.current=r);});};
+
+export { classed, createUseMediaQueryWidth, extendComponent, mergeRefs, useAsyncFn, useFirstMountState, useFixedOffset, useFocus, useInterval, useIsomorphicLayoutEffect, useKeyUp, useMeasure, useMountedState, useNavigateAway, usePrevious, usePreviousRef, useScrollPosition, useScrollThreshold, useSmoothScroll, useSpinDelay, useTraceUpdate, useUpdateEffect, useWindowSize };

package/package.json

@@ -2,56 +2,48 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.7",
-    "@koine/utils": "2.0.0-beta.7"
+    "@koine/dom": "2.0.0-beta.71",
+    "@koine/utils": "2.0.0-beta.71"
+  },
+  "peerDependencies": {
+    "@kuus/yup": "1.0.0-beta.7",
+    "date-fns": "^3.2.0",
+    "react": "^18.2.0",
+    "react-swipeable": "^7.0.1"
   },
   "peerDependenciesMeta": {
-    "@hookform/resolvers": {
-      "optional": true
-    },
     "@kuus/yup": {
       "optional": true
     },
-    "@mui/base": {
-      "optional": true
-    },
-    "@tiptap/react": {
-      "optional": true
-    },
-    "@tiptap/starter-kit": {
-      "optional": true
-    },
     "date-fns": {
       "optional": true
     },
-    "framer-motion": {
-      "optional": true
-    },
-    "react-hook-form": {
-      "optional": true
-    },
-    "react-icons": {
-      "optional": true
-    },
-    "react-is": {
-      "optional": true
-    },
-    "react-popper": {
-      "optional": true
-    },
     "react-swipeable": {
       "optional": true
     },
-    "styled-components": {
-      "optional": true
-    },
     "tailwindcss": {
       "optional": true
     }
   },
-  "peerDependencies": {},
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "version": "2.0.0-beta.7"
-}
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "module": "./index.esm.js",
+      "import": "./index.cjs.mjs",
+      "default": "./index.cjs.js"
+    },
+    "./calendar": {
+      "module": "./calendar.esm.js",
+      "import": "./calendar.cjs.mjs",
+      "default": "./calendar.cjs.js"
+    },
+    "./forms": {
+      "module": "./forms.esm.js",
+      "import": "./forms.cjs.mjs",
+      "default": "./forms.cjs.js"
+    }
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js",
+  "version": "2.0.0-beta.71"
+}

package/types.d.ts

@@ -1,10 +1,2 @@
-/// <reference types="react" />
-export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types";
-export type Translate = (i18nKey: any, query?: any, options?: any) => string;
-export type Option = {
-    value: string;
-    Label?: NonNullable<import("react").ReactNode>;
-    label: NonNullable<import("react").ReactChild | import("react").ReactFragment>;
-};
 export type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & ExtendableProps;
 export type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);

package/utils/Polymorphic.d.ts

@@ -0,0 +1,26 @@
+export declare namespace Polymorphic {
+    type Merge<P1 = Record<string, never>, P2 = Record<string, never>> = Omit<P1, keyof P2> & P2;
+    type ComponentTypes = React.ComponentClass<any> | React.FunctionComponent<any> | keyof JSX.IntrinsicElements;
+    type InferProps<TComponent extends ComponentTypes> = TComponent extends React.ComponentClass<infer Props> ? Props : TComponent extends React.FunctionComponent<infer Props> ? Props : TComponent extends React.ForwardRefExoticComponent<infer Props> ? Props : TComponent extends keyof JSX.IntrinsicElements ? React.ComponentPropsWithoutRef<TComponent> : never;
+    type AsProp<TComponent extends React.ElementType> = {
+        as?: TComponent;
+    };
+    export type Ref<TComponent extends React.ElementType> = React.ComponentPropsWithRef<TComponent>["ref"];
+    export type Props<TComponent extends React.ElementType, Props = Record<string, never>> = Omit<InferProps<TComponent>, keyof Props> & AsProp<TComponent> & Props;
+    export type PropsWithRef<TComponent extends React.ElementType, TProps = Record<string, never>> = Props<TComponent, TProps> & {
+        ref?: Ref<TComponent>;
+    };
+    type ForwardRefExoticComponent<TComponent, OwnProps> = React.ForwardRefExoticComponent<Merge<TComponent extends React.ElementType ? React.ComponentPropsWithRef<TComponent> : never, OwnProps & {
+        as?: TComponent;
+    }>>;
+    export type ComponentForwarded<TComponent, TProps = Record<string, never>> = ForwardRefExoticComponent<TComponent, TProps> & {
+        <As = TComponent>(props: As extends "" ? {
+            as: keyof JSX.IntrinsicElements;
+        } : As extends React.ComponentType<infer P> ? Merge<P, TProps & {
+            as: As;
+        }> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], TProps & {
+            as: As;
+        }> : never): React.ReactElement | null;
+    };
+    export {};
+}

package/utils/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 {};

package/utils/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: `@${TBreakpoints}` | `@min-${TBreakpoints}` | `@max-${TBreakpoints}` | `@up-${TBreakpoints}` | `@down-${TBreakpoints}` | `@between-${TBreakpoints}_${TBreakpoints}` | `@only-${TBreakpoints}`, serverValue?: null | boolean) => boolean | null;
+export {};

package/{helpers/extend-component.d.ts → utils/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: import("react").ComponentProps<Component>) => import("react").FunctionComponentElement<any>) & DefaultProps & {
     defaultProps: DefaultProps;
 };
 export interface OverridableComponents {
@@ -10,19 +9,8 @@ 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"]>;
 };
 type HtmlAttributesCollidingWithMotionProps = "style" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd";
-export default extendComponent;
+export {};

package/utils/index.d.ts

@@ -0,0 +1,5 @@
+export { classed } from "./classed";
+export { createUseMediaQueryWidth, type MediaQuerWidthDef, type MediaQueryWidth, } from "./createUseMediaQueryWidth";
+export { type ExtendableComponent, type OverridableComponents, type WithComponents, extendComponent, } from "./extendComponent";
+export { mergeRefs } from "./mergeRefs";
+export type { Polymorphic } from "./Polymorphic";

package/utils/mergeRefs.d.ts

@@ -0,0 +1 @@
+export declare let mergeRefs: <T = Element>(refs: (import("react").MutableRefObject<T> | import("react").LegacyRef<T>)[]) => (instance: T | null) => void;

package/Alert/Alert.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export type AlertProps = React.PropsWithChildren<{
-    $danger?: boolean;
-}>;
-export declare const Alert: ({ $danger, children, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/Alert/Alert.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Alert", {
-    enumerable: true,
-    get: function() {
-        return Alert;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const AlertRoot = _styledcomponents.default.div`
-  font-size: 12px;
-  ${(p)=>p.$danger ? `color: var(--danger)` : ""}
-`;
-const AlertInner = _styledcomponents.default.div`
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.05);
-  /* border: 1px solid var(--grey700); */
-  /* background: pink; */
-  /* color: red; */
-`;
-const Alert = ({ $danger, children, ...props })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertRoot, {
-        $danger: $danger,
-        ...props,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertInner, {
-            children: children
-        })
-    });
-};

package/Alert/Alert.mjs

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-const AlertRoot = styled.div`
-  font-size: 12px;
-  ${(p)=>p.$danger ? `color: var(--danger)` : ""}
-`;
-const AlertInner = styled.div`
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.05);
-  /* border: 1px solid var(--grey700); */
-  /* background: pink; */
-  /* color: red; */
-`;
-export const Alert = ({ $danger, children, ...props })=>{
-    return /*#__PURE__*/ _jsx(AlertRoot, {
-        $danger: $danger,
-        ...props,
-        children: /*#__PURE__*/ _jsx(AlertInner, {
-            children: children
-        })
-    });
-};

package/Alert/Alert.stories.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    default: function() {
-        return _default;
-    },
-    bare: function() {
-        return bare;
-    },
-    danger: function() {
-        return danger;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _Alert = require("./Alert");
-const _default = {
-    component: _Alert.Alert,
-    title: "Base/Alert"
-};
-const Template = (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_Alert.Alert, {
-        ...args
-    });
-const bare = Template.bind({});
-bare.args = {
-    children: "An alert message"
-};
-const danger = Template.bind({});
-danger.args = {
-    children: "A dangerous message",
-    $danger: true
-};

package/Alert/Alert.stories.mjs

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Alert } from "./Alert";
-export default {
-    component: Alert,
-    title: "Base/Alert"
-};
-const Template = (args)=>/*#__PURE__*/ _jsx(Alert, {
-        ...args
-    });
-export const bare = Template.bind({});
-bare.args = {
-    children: "An alert message"
-};
-export const danger = Template.bind({});
-danger.args = {
-    children: "A dangerous message",
-    $danger: true
-};

package/Alert/index.d.ts

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

package/Alert/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Alert"), exports);

package/Alert/index.mjs

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

package/Animations/Reveal.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { UseRevealOptions } from "./useReveal";
-export type RevealProps = React.PropsWithChildren<UseRevealOptions>;
-export declare const Reveal: ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props }: RevealProps) => import("react/jsx-runtime").JSX.Element;

package/Animations/Reveal.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Reveal", {
-    enumerable: true,
-    get: function() {
-        return Reveal;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _framermotion = require("framer-motion");
-const _useReveal = require("./useReveal");
-const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props })=>{
-    const effectOptions = {
-        direction,
-        offsetStartY,
-        offsetEndY,
-        offsetStartX
-    };
-    const prefersReducedMotion = (0, _framermotion.useReducedMotion)();
-    const { ref, startY, endY, startX } = (0, _useReveal.useReveal)(effectOptions);
-    const { scrollYProgress } = (0, _framermotion.useViewportScroll)();
-    const xRange = (0, _framermotion.useTransform)(scrollYProgress, [
-        startY,
-        endY
-    ], [
-        startX,
-        0
-    ]);
-    const opacityRange = (0, _framermotion.useTransform)(scrollYProgress, [
-        startY,
-        endY
-    ], [
-        0,
-        1
-    ]);
-    const x = (0, _framermotion.useSpring)(xRange, {
-        stiffness: 400,
-        damping: 90
-    });
-    const opacity = (0, _framermotion.useSpring)(opacityRange);
-    // console.log("start, end", startY, endY)
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.motion.div, {
-        ...props,
-        ref: ref,
-        style: prefersReducedMotion ? {} : {
-            x,
-            opacity
-        },
-        children: children
-    });
-};

package/Animations/Reveal.mjs

@@ -1,43 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { motion, useReducedMotion, useSpring, useTransform, useViewportScroll } from "framer-motion";
-import { useReveal } from "./useReveal";
-export const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props })=>{
-    const effectOptions = {
-        direction,
-        offsetStartY,
-        offsetEndY,
-        offsetStartX
-    };
-    const prefersReducedMotion = useReducedMotion();
-    const { ref, startY, endY, startX } = useReveal(effectOptions);
-    const { scrollYProgress } = useViewportScroll();
-    const xRange = useTransform(scrollYProgress, [
-        startY,
-        endY
-    ], [
-        startX,
-        0
-    ]);
-    const opacityRange = useTransform(scrollYProgress, [
-        startY,
-        endY
-    ], [
-        0,
-        1
-    ]);
-    const x = useSpring(xRange, {
-        stiffness: 400,
-        damping: 90
-    });
-    const opacity = useSpring(opacityRange);
-    // console.log("start, end", startY, endY)
-    return /*#__PURE__*/ _jsx(motion.div, {
-        ...props,
-        ref: ref,
-        style: prefersReducedMotion ? {} : {
-            x,
-            opacity
-        },
-        children: children
-    });
-};

package/Animations/Underline.d.ts

@@ -1 +0,0 @@
-export declare const UnderlineSkewed: any;