@koine/react 2.0.0-beta.73 → 2.0.0-beta.75

package/FaviconTags.d.ts

@@ -0,0 +1,9 @@
+export type FaviconTagsProps = {
+    name: string;
+    color?: string;
+    safariTabColor?: string;
+    tileColor?: string;
+    themeColor?: string;
+};
+export declare let FaviconTags: ({ name, color, safariTabColor, tileColor, themeColor, }: FaviconTagsProps) => import("react/jsx-runtime").JSX.Element;
+export default FaviconTags;

package/FaviconTags.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export let FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), _jsx("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), _jsx("link", { rel: "manifest", href: "/site.webmanifest" }), _jsx("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), _jsx("meta", { name: "apple-mobile-web-app-title", content: name }), _jsx("meta", { name: "application-name", content: name }), _jsx("meta", { name: "msapplication-TileColor", content: tileColor || color }), _jsx("meta", { name: "theme-color", content: themeColor || color })] }));
+};
+export default FaviconTags;

package/Meta.d.ts

@@ -0,0 +1,5 @@
+export type MetaProps = {
+    zoom?: boolean;
+};
+export declare let Meta: ({ zoom }: MetaProps) => import("react/jsx-runtime").JSX.Element;
+export default Meta;

package/Meta.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export let Meta = ({ zoom }) => {
+    return (_jsx("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}` }));
+};
+export default Meta;

package/NoJs.d.ts

@@ -0,0 +1,3 @@
+export type NoJsProps = Record<string, never>;
+export declare let NoJs: (_props: NoJsProps) => import("react/jsx-runtime").JSX.Element;
+export default NoJs;

package/NoJs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export let NoJs = (_props) => {
+    return (_jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
+            __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`,
+        } }));
+};
+export default NoJs;

package/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/Polymorphic.js

@@ -0,0 +1 @@
+export {};

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.js

@@ -0,0 +1,41 @@
+import React, { createElement, forwardRef } from "react";
+export let classed = (component) => {
+    const type = component.type || component;
+    return function (strings, ...args) {
+        const WrappedComponent = forwardRef(function (props, ref) {
+            const argResolved = args
+                .map((arg, index) => {
+                let result = "";
+                if (typeof arg === "function") {
+                    result = arg(props);
+                }
+                else if (typeof arg !== "undefined") {
+                    result = arg.toString();
+                }
+                return strings[index] + result;
+            })
+                .join("");
+            const isNativeHtmlElement = typeof type === "string";
+            const propsToForward = isNativeHtmlElement
+                ? {}
+                : props;
+            if (isNativeHtmlElement) {
+                for (const key in props) {
+                    if (!key.startsWith("$")) {
+                        propsToForward[key] = props[key];
+                    }
+                }
+            }
+            let className = argResolved || strings[0];
+            className = className.match(/class="([^"]*)/)?.[1] || className;
+            className += props?.className ? " " + props?.className : "";
+            return createElement(type, {
+                ...propsToForward,
+                className: className || undefined,
+                ref,
+            });
+        });
+        return WrappedComponent;
+    };
+};
+export default classed;

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

package/createUseMediaQueryWidth.js

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { getMediaQueryWidthResolvers, isUndefined, } from "@koine/utils";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+export let createUseMediaQueryWidth = (customBreakpoints) => {
+    const queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
+    return function useMediaQueryWidth(media, serverValue) {
+        const definition = media.substring(1);
+        let [rule, ruleBreakpoint] = definition.split("-");
+        if (isUndefined(ruleBreakpoint)) {
+            ruleBreakpoint = rule;
+        }
+        if (isUndefined(rule)) {
+            rule = "min";
+        }
+        const [br1, br2] = ruleBreakpoint.split("_");
+        const query = queryResolvers[rule](br1, br2);
+        const [matches, setMatches] = useState(isUndefined(serverValue) ? null : serverValue);
+        useIsomorphicLayoutEffect(() => {
+            const mq = window.matchMedia(query);
+            const handleChange = (event) => {
+                setMatches(event.matches);
+            };
+            setMatches(mq.matches);
+            if (!mq.addEventListener) {
+                mq.addListener(handleChange);
+                return () => {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return () => {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+};
+export default createUseMediaQueryWidth;

package/extendComponent.d.ts

@@ -0,0 +1,16 @@
+export type ExtendableComponent<Props = any> = React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
+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 {
+    [key: string]: {
+        type: React.ElementType;
+        props: any;
+        motionable?: boolean;
+    };
+}
+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;

package/extendComponent.js

@@ -0,0 +1,9 @@
+import { createElement } from "react";
+export let extendComponent = (component, defaultProps) => {
+    const NewComponent = (props) => createElement(component, props);
+    return Object.assign(NewComponent, {
+        ...defaultProps,
+        defaultProps,
+    });
+};
+export default extendComponent;

package/index.cjs.js

@@ -4,54 +4,64 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 var utils = require('@koine/utils');
+var jsxRuntime = require('react/jsx-runtime');
 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 classed=r=>{let s=r.type||r;return function(r,...a){return react.forwardRef(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)t.startsWith("$")||(i[t]=e[t]);let c=o||r[0];return c=(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),react.createElement(s,{...i,className:c||void 0,ref: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 useIsomorphicLayoutEffect=utils.isBrowser?react.useLayoutEffect:react.useEffect;
 
-let useFirstMountState=()=>{let t=react.useRef(!0);return t.current?(t.current=!1,!0):t.current};
+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");let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=react.useState(utils.isUndefined(n)?null:n);return useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return (l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(e.addListener(t),()=>{e.removeListener(t);})},[u]),c}};
 
-let useIsomorphicLayoutEffect=utils.isBrowser?react.useLayoutEffect:react.useEffect;
+let extendComponent=(t,o)=>Object.assign(o=>react.createElement(t,o),{...o,defaultProps:o});
 
-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 FaviconTags=({name:a,color:t,safariTabColor:o,tileColor:c,themeColor:l})=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("link",{rel:"shortcut icon",href:"/favicon.ico",type:"image/x-icon"}),jsxRuntime.jsx("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/apple-touch-icon.png"}),jsxRuntime.jsx("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/favicon-32x32.png"}),jsxRuntime.jsx("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/favicon-16x16.png"}),jsxRuntime.jsx("link",{rel:"manifest",href:"/site.webmanifest"}),jsxRuntime.jsx("link",{rel:"mask-icon",href:"/safari-pinned-tab.svg",color:o||t}),jsxRuntime.jsx("meta",{name:"apple-mobile-web-app-title",content:a}),jsxRuntime.jsx("meta",{name:"application-name",content:a}),jsxRuntime.jsx("meta",{name:"msapplication-TileColor",content:c||t}),jsxRuntime.jsx("meta",{name:"theme-color",content:l||t})]});
 
-let useFocus=()=>{let e=react.useRef(null);return [e,()=>{e.current&&e.current.focus();}]};
+let mergeRefs=e=>r=>{e.forEach(e=>{"function"==typeof e?e(r):null!=e&&(e.current=r);});};
 
-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 Meta=({zoom:t})=>jsxRuntime.jsx("meta",{name:"viewport",content:`width=device-width, initial-scale=1, maximum-scale=1${t?"":", user-scalable=0"}`});
 
-let useKeyUp=(o,r=[])=>{react.useEffect(()=>dom.on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
+let NoJs=t=>jsxRuntime.jsx("script",{id:"no-js",dangerouslySetInnerHTML:{__html:'document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";'}});
 
-let e;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&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.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 useMountedState=()=>{let u=react.useRef(!1),n=react.useCallback(()=>u.current,[]);return react.useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
 
-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 useAsyncFn=(o,u=[],l={loading:!1})=>{let a=react.useRef(0),d=useMountedState(),[i,c]=react.useState(l),g=react.useCallback((...e)=>{let t=++a.current;return i.loading||c(e=>({...e,loading:!0})),o(...e).then(e=>(d()&&t===a.current&&c({value:e,loading:!1}),e),e=>(d()&&t===a.current&&c({error:e,loading:!1}),e))},u);return [i,g]};
 
-let usePrevious=(r,t)=>{let[o,u]=react.useState([r,t]);return o[1]!==r&&u([o[1],r]),o[0]};
+let useFirstMountState=()=>{let r=react.useRef(!0);return r.current?(r.current=!1,!0):r.current};
 
-let usePreviousRef=t=>{let u=react.useRef();return react.useEffect(()=>{u.current=t;}),u.current};
+let n$1=e=>{dom.injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};let useFixedOffset=i=>{let l=react.useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=dom.calculateFixedOffset();l.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;}),l.current=r,utils.debounce(()=>n$1(r),400,!0)();});return dom.$each(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
 
-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 useFocus=()=>{let r=react.useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
 
-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 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 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])};
+let useKeyUp=(o,r=[])=>{react.useEffect(()=>dom.on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
 
-let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=react.useState(0),m=react.useRef();return react.useEffect(()=>{u&&0===n&&(clearTimeout(m.current),m.current=setTimeout(()=>{if(!u)return o(0);m.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(m.current),o(0));},[u,n,c,i]),react.useEffect(()=>()=>clearTimeout(m.current),[]),2===n||3===n};
+let e;let m=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:u}=window.getComputedStyle(e);return [r,n,u].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...m(e.parentElement)]},p=["x","y","top","bottom","left","right","width","height"],d=(e,t)=>p.every(r=>e[r]===t[r]);let useMeasure=p=>{let{scroll:h=!1}=p||{},[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&&!d(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&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),h&&r&&r.forEach(e=>dom.on(e,"scroll",y,{capture:!0,passive:!0})));}return react.useEffect(()=>h?dom.listenScrollDebounced(0,w,100):utils.noop,[h,w]),react.useEffect(()=>dom.listenResizeDebounced(0,w,100),[w]),react.useEffect(()=>{x(),z();},[h]),react.useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=m(e),z());},a,w]};
 
-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 useNavigateAway=a=>{let o=react.useRef();react.useEffect(()=>{o.current=e=>{let t=a(e);return (t&&e.preventDefault(),"string"==typeof t)?e.returnValue=t:e.defaultPrevented?e.returnValue="":void 0};},[a]),react.useEffect(()=>dom.on(window,"beforeunload",e=>o.current?.(e)),[]);};
 
-let useUpdateEffect=(r,o)=>{let f=useFirstMountState();react.useEffect(()=>{if(!f)return r()},o);};
+let usePrevious=(r,t)=>{let[o,u]=react.useState([r,t]);return o[1]!==r&&u([o[1],r]),o[0]};
 
-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 usePreviousRef=t=>{let u=react.useRef();return react.useEffect(()=>{u.current=t;}),u.current};
 
-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 l={x:0,y:0},n=t=>t?.getBoundingClientRect(),u=(t,e)=>{if(!utils.isBrowser)return l;if(!e)return {x:window.scrollX,y:window.scrollY};let o=n(t?.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,d=()=>{let t=u(i,c);l(t,f.current),f.current=t,s=null;};useIsomorphicLayoutEffect(()=>{if(!utils.isBrowser)return;let t=dom.listenScroll(()=>{m?null===s&&(s=window.setTimeout(d,m)):d();},c?.current);return ()=>{t(),s&&clearTimeout(s);}},n);};
 
-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 useScrollThreshold=(i,m)=>{let[u,f]=react.useState(!1),n=react.useCallback(()=>{if(i){let r=window.scrollY,e=r<i,o=r>i;f(o),m&&m(e,o);}},[i,m]);return react.useEffect(()=>{if(i){let r=dom.listenScroll(n);return n(),r}return utils.noop},[i,n]),u};
 
-let extendComponent=(t,o)=>Object.assign(o=>react.createElement(t,o),{...o,defaultProps:o});
+let useSmoothScroll=m=>{let i=useFixedOffset();return react.useCallback((e,l,f,u,n)=>{let c;let p=!1;if(utils.isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=dom.getOffsetTopSlim(t)-i.current,p=!0);}utils.isNumber(c)&&dom.scrollTo(c=c+(l||0)+(m||p?0:i.current),f,u,n);},[m,i])};
 
-let mergeRefs=e=>r=>{e.forEach(e=>{"function"==typeof e?e(r):null!=e&&(e.current=r);});};
+let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=react.useState(0),l=react.useRef();return react.useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),react.useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
+
+let useTraceUpdate=r=>{let c=react.useRef(r);react.useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&(e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
+
+let useUpdateEffect=(r,f)=>{let o=useFirstMountState();react.useEffect(()=>{if(!o)return r()},f);};
+
+let useWindowSize=(o,n)=>{let[d,w]=react.useState(0),[m,u]=react.useState(0);return react.useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?dom.listenResizeDebounced(0,e,o,n):dom.listenResize(e);return e(),i},[o,n]),[d,m]};
 
+exports.FaviconTags = FaviconTags;
+exports.Meta = Meta;
+exports.NoJs = NoJs;
 exports.classed = classed;
 exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
 exports.extendComponent = extendComponent;

package/index.d.ts

@@ -1,3 +1,28 @@
-export * from "./hooks";
-export * from "./utils";
-export * from "./types";
+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";

package/index.esm.js

@@ -1,51 +1,58 @@
-import { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, forwardRef, createElement } from 'react';
-import { isBrowser, debounce, noop, isNumber, getMediaQueryWidthResolvers, isUndefined } from '@koine/utils';
+import { forwardRef, createElement, useLayoutEffect, useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { isBrowser, getMediaQueryWidthResolvers, isUndefined, debounce, noop, isNumber } from '@koine/utils';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 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 classed=r=>{let s=r.type||r;return function(r,...a){return forwardRef(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)t.startsWith("$")||(i[t]=e[t]);let c=o||r[0];return c=(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),createElement(s,{...i,className:c||void 0,ref: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 useIsomorphicLayoutEffect=isBrowser?useLayoutEffect:useEffect;
 
-let useFirstMountState=()=>{let t=useRef(!0);return t.current?(t.current=!1,!0):t.current};
+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");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 (l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(e.addListener(t),()=>{e.removeListener(t);})},[u]),c}};
 
-let useIsomorphicLayoutEffect=isBrowser?useLayoutEffect:useEffect;
+let extendComponent=(t,o)=>Object.assign(o=>createElement(t,o),{...o,defaultProps:o});
 
-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 FaviconTags=({name:a,color:t,safariTabColor:o,tileColor:c,themeColor:l})=>jsxs(Fragment,{children:[jsx("link",{rel:"shortcut icon",href:"/favicon.ico",type:"image/x-icon"}),jsx("link",{rel:"apple-touch-icon",sizes:"180x180",href:"/apple-touch-icon.png"}),jsx("link",{rel:"icon",type:"image/png",sizes:"32x32",href:"/favicon-32x32.png"}),jsx("link",{rel:"icon",type:"image/png",sizes:"16x16",href:"/favicon-16x16.png"}),jsx("link",{rel:"manifest",href:"/site.webmanifest"}),jsx("link",{rel:"mask-icon",href:"/safari-pinned-tab.svg",color:o||t}),jsx("meta",{name:"apple-mobile-web-app-title",content:a}),jsx("meta",{name:"application-name",content:a}),jsx("meta",{name:"msapplication-TileColor",content:c||t}),jsx("meta",{name:"theme-color",content:l||t})]});
 
-let useFocus=()=>{let e=useRef(null);return [e,()=>{e.current&&e.current.focus();}]};
+let mergeRefs=e=>r=>{e.forEach(e=>{"function"==typeof e?e(r):null!=e&&(e.current=r);});};
 
-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 Meta=({zoom:t})=>jsx("meta",{name:"viewport",content:`width=device-width, initial-scale=1, maximum-scale=1${t?"":", user-scalable=0"}`});
 
-let useKeyUp=(o,r=[])=>{useEffect(()=>on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
+let NoJs=t=>jsx("script",{id:"no-js",dangerouslySetInnerHTML:{__html:'document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";'}});
 
-let e;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&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.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 useMountedState=()=>{let u=useRef(!1),n=useCallback(()=>u.current,[]);return useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
 
-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 useAsyncFn=(o,u=[],l={loading:!1})=>{let a=useRef(0),d=useMountedState(),[i,c]=useState(l),g=useCallback((...e)=>{let t=++a.current;return i.loading||c(e=>({...e,loading:!0})),o(...e).then(e=>(d()&&t===a.current&&c({value:e,loading:!1}),e),e=>(d()&&t===a.current&&c({error:e,loading:!1}),e))},u);return [i,g]};
 
-let usePrevious=(r,t)=>{let[o,u]=useState([r,t]);return o[1]!==r&&u([o[1],r]),o[0]};
+let useFirstMountState=()=>{let r=useRef(!0);return r.current?(r.current=!1,!0):r.current};
 
-let usePreviousRef=t=>{let u=useRef();return useEffect(()=>{u.current=t;}),u.current};
+let n$1=e=>{injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};let useFixedOffset=i=>{let l=useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=calculateFixedOffset();l.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;}),l.current=r,debounce(()=>n$1(r),400,!0)();});return $each(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
 
-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 useFocus=()=>{let r=useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
 
-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 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 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])};
+let useKeyUp=(o,r=[])=>{useEffect(()=>on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
 
-let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=useState(0),m=useRef();return useEffect(()=>{u&&0===n&&(clearTimeout(m.current),m.current=setTimeout(()=>{if(!u)return o(0);m.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(m.current),o(0));},[u,n,c,i]),useEffect(()=>()=>clearTimeout(m.current),[]),2===n||3===n};
+let e;let m=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:u}=window.getComputedStyle(e);return [r,n,u].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...m(e.parentElement)]},p=["x","y","top","bottom","left","right","width","height"],d=(e,t)=>p.every(r=>e[r]===t[r]);let useMeasure=p=>{let{scroll:h=!1}=p||{},[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&&!d(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&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),h&&r&&r.forEach(e=>on(e,"scroll",y,{capture:!0,passive:!0})));}return useEffect(()=>h?listenScrollDebounced(0,w,100):noop,[h,w]),useEffect(()=>listenResizeDebounced(0,w,100),[w]),useEffect(()=>{x(),z();},[h]),useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=m(e),z());},a,w]};
 
-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 useNavigateAway=a=>{let o=useRef();useEffect(()=>{o.current=e=>{let t=a(e);return (t&&e.preventDefault(),"string"==typeof t)?e.returnValue=t:e.defaultPrevented?e.returnValue="":void 0};},[a]),useEffect(()=>on(window,"beforeunload",e=>o.current?.(e)),[]);};
 
-let useUpdateEffect=(r,o)=>{let f=useFirstMountState();useEffect(()=>{if(!f)return r()},o);};
+let usePrevious=(r,t)=>{let[o,u]=useState([r,t]);return o[1]!==r&&u([o[1],r]),o[0]};
 
-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 usePreviousRef=t=>{let u=useRef();return useEffect(()=>{u.current=t;}),u.current};
 
-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 l={x:0,y:0},n=t=>t?.getBoundingClientRect(),u=(t,e)=>{if(!isBrowser)return l;if(!e)return {x:window.scrollX,y:window.scrollY};let o=n(t?.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,d=()=>{let t=u(i,c);l(t,f.current),f.current=t,s=null;};useIsomorphicLayoutEffect(()=>{if(!isBrowser)return;let t=listenScroll(()=>{m?null===s&&(s=window.setTimeout(d,m)):d();},c?.current);return ()=>{t(),s&&clearTimeout(s);}},n);};
 
-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 useScrollThreshold=(i,m)=>{let[u,f]=useState(!1),n=useCallback(()=>{if(i){let r=window.scrollY,e=r<i,o=r>i;f(o),m&&m(e,o);}},[i,m]);return useEffect(()=>{if(i){let r=listenScroll(n);return n(),r}return noop},[i,n]),u};
 
-let extendComponent=(t,o)=>Object.assign(o=>createElement(t,o),{...o,defaultProps:o});
+let useSmoothScroll=m=>{let i=useFixedOffset();return useCallback((e,l,f,u,n)=>{let c;let p=!1;if(isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=getOffsetTopSlim(t)-i.current,p=!0);}isNumber(c)&&scrollTo(c=c+(l||0)+(m||p?0:i.current),f,u,n);},[m,i])};
 
-let mergeRefs=e=>r=>{e.forEach(e=>{"function"==typeof e?e(r):null!=e&&(e.current=r);});};
+let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=useState(0),l=useRef();return useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
+
+let useTraceUpdate=r=>{let c=useRef(r);useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&(e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
+
+let useUpdateEffect=(r,f)=>{let o=useFirstMountState();useEffect(()=>{if(!o)return r()},f);};
+
+let useWindowSize=(o,n)=>{let[d,w]=useState(0),[m,u]=useState(0);return useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?listenResizeDebounced(0,e,o,n):listenResize(e);return e(),i},[o,n]),[d,m]};
 
-export { classed, createUseMediaQueryWidth, extendComponent, mergeRefs, useAsyncFn, useFirstMountState, useFixedOffset, useFocus, useInterval, useIsomorphicLayoutEffect, useKeyUp, useMeasure, useMountedState, useNavigateAway, usePrevious, usePreviousRef, useScrollPosition, useScrollThreshold, useSmoothScroll, useSpinDelay, useTraceUpdate, useUpdateEffect, useWindowSize };
+export { FaviconTags, Meta, NoJs, classed, createUseMediaQueryWidth, extendComponent, mergeRefs, useAsyncFn, useFirstMountState, useFixedOffset, useFocus, useInterval, useIsomorphicLayoutEffect, useKeyUp, useMeasure, useMountedState, useNavigateAway, usePrevious, usePreviousRef, useScrollPosition, useScrollThreshold, useSmoothScroll, useSpinDelay, useTraceUpdate, useUpdateEffect, useWindowSize };

package/index.js

@@ -1,3 +1,26 @@
-export * from "./hooks";
-export * from "./utils";
-export * from "./types";
+export { classed } from "./classed";
+export { createUseMediaQueryWidth, } from "./createUseMediaQueryWidth";
+export { extendComponent, } from "./extendComponent";
+export { FaviconTags } from "./FaviconTags";
+export { mergeRefs } from "./mergeRefs";
+export { Meta } from "./Meta";
+export { NoJs } from "./NoJs";
+export { useAsyncFn, } 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, } from "./useMeasure";
+export { useMountedState } from "./useMountedState";
+export { useNavigateAway, } 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";

package/mergeRefs.d.ts

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

package/mergeRefs.js

@@ -0,0 +1,13 @@
+export let mergeRefs = (refs) => {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+};
+export default mergeRefs;