@koine/react 2.0.0-beta.2 → 2.0.0-beta.200

package/hooks/useSmoothScroll.d.ts

@@ -1,8 +0,0 @@
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */
-export declare function useSmoothScroll(disregardAutomaticFixedOffset?: boolean): (to?: number | string, customOffset?: number, callback?: () => void, fallbackTimeout?: number, behavior?: ScrollBehavior) => void;
-export default useSmoothScroll;

package/hooks/useSmoothScroll.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSmoothScroll = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var isNumber_1 = tslib_1.__importDefault(require("@koine/utils/isNumber"));
-var getOffsetTopSlim_1 = tslib_1.__importDefault(require("@koine/dom/getOffsetTopSlim"));
-var scrollTo_1 = tslib_1.__importDefault(require("@koine/dom/scrollTo"));
-var useFixedOffset_1 = tslib_1.__importDefault(require("./useFixedOffset"));
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */
-function useSmoothScroll(disregardAutomaticFixedOffset) {
-    var fixedOffset = (0, useFixedOffset_1.default)();
-    var scroll = (0, react_1.useCallback)(function (to, customOffset, callback, fallbackTimeout, behavior) {
-        var top = undefined;
-        var toIsElement = false;
-        if ((0, isNumber_1.default)(to)) {
-            top = to;
-        }
-        else if (to) {
-            var el = document.getElementById(to);
-            if (el) {
-                top = (0, getOffsetTopSlim_1.default)(el) - fixedOffset.current;
-                toIsElement = true;
-            }
-        }
-        if ((0, isNumber_1.default)(top)) {
-            top =
-                top +
-                    (customOffset || 0) +
-                    (disregardAutomaticFixedOffset || toIsElement
-                        ? 0
-                        : fixedOffset.current);
-            (0, scrollTo_1.default)(top, callback, fallbackTimeout, behavior);
-        }
-    }, [disregardAutomaticFixedOffset, fixedOffset]);
-    return scroll;
-}
-exports.useSmoothScroll = useSmoothScroll;
-exports.default = useSmoothScroll;

package/hooks/useSmoothScroll.mjs

@@ -1,39 +0,0 @@
-import { useCallback } from "react";
-import isNumber from "@koine/utils/isNumber";
-import getOffsetTopSlim from "@koine/dom/getOffsetTopSlim";
-import scrollTo from "@koine/dom/scrollTo";
-import useFixedOffset from "./useFixedOffset";
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */
-export function useSmoothScroll(disregardAutomaticFixedOffset) {
-    var fixedOffset = useFixedOffset();
-    var scroll = useCallback(function (to, customOffset, callback, fallbackTimeout, behavior) {
-        var top = undefined;
-        var toIsElement = false;
-        if (isNumber(to)) {
-            top = to;
-        }
-        else if (to) {
-            var el = document.getElementById(to);
-            if (el) {
-                top = getOffsetTopSlim(el) - fixedOffset.current;
-                toIsElement = true;
-            }
-        }
-        if (isNumber(top)) {
-            top =
-                top +
-                    (customOffset || 0) +
-                    (disregardAutomaticFixedOffset || toIsElement
-                        ? 0
-                        : fixedOffset.current);
-            scrollTo(top, callback, fallbackTimeout, behavior);
-        }
-    }, [disregardAutomaticFixedOffset, fixedOffset]);
-    return scroll;
-}
-export default useSmoothScroll;

package/hooks/useSpinDelay.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSpinDelay = void 0;
-var react_1 = require("react");
-var State;
-(function (State) {
-    State[State["IDLE"] = 0] = "IDLE";
-    State[State["DELAY"] = 1] = "DELAY";
-    State[State["DISPLAY"] = 2] = "DISPLAY";
-    State[State["EXPIRE"] = 3] = "EXPIRE";
-})(State || (State = {}));
-/**
- * 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]
- */
-function useSpinDelay(loading, delay, minDuration) {
-    if (delay === void 0) { delay = 500; }
-    if (minDuration === void 0) { minDuration = 200; }
-    var _a = (0, react_1.useState)(State.IDLE), state = _a[0], setState = _a[1];
-    var timeout = (0, react_1.useRef)();
-    (0, react_1.useEffect)(function () {
-        if (loading && state === State.IDLE) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(function () {
-                if (!loading) {
-                    return setState(State.IDLE);
-                }
-                timeout.current = setTimeout(function () {
-                    setState(State.EXPIRE);
-                }, minDuration);
-                setState(State.DISPLAY);
-            }, delay);
-            setState(State.DELAY);
-        }
-        if (!loading && state !== State.DISPLAY) {
-            clearTimeout(timeout.current);
-            setState(State.IDLE);
-        }
-    }, [loading, state, delay, minDuration]);
-    (0, react_1.useEffect)(function () {
-        return function () { return clearTimeout(timeout.current); };
-    }, []);
-    return state === State.DISPLAY || state === State.EXPIRE;
-}
-exports.useSpinDelay = useSpinDelay;
-exports.default = useSpinDelay;

package/hooks/useSpinDelay.mjs

@@ -1,50 +0,0 @@
-import { useEffect, useState, useRef } from "react";
-var State;
-(function (State) {
-    State[State["IDLE"] = 0] = "IDLE";
-    State[State["DELAY"] = 1] = "DELAY";
-    State[State["DISPLAY"] = 2] = "DISPLAY";
-    State[State["EXPIRE"] = 3] = "EXPIRE";
-})(State || (State = {}));
-/**
- * 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 function useSpinDelay(loading, delay, minDuration) {
-    if (delay === void 0) { delay = 500; }
-    if (minDuration === void 0) { minDuration = 200; }
-    var _a = useState(State.IDLE), state = _a[0], setState = _a[1];
-    var timeout = useRef();
-    useEffect(function () {
-        if (loading && state === State.IDLE) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(function () {
-                if (!loading) {
-                    return setState(State.IDLE);
-                }
-                timeout.current = setTimeout(function () {
-                    setState(State.EXPIRE);
-                }, minDuration);
-                setState(State.DISPLAY);
-            }, delay);
-            setState(State.DELAY);
-        }
-        if (!loading && state !== State.DISPLAY) {
-            clearTimeout(timeout.current);
-            setState(State.IDLE);
-        }
-    }, [loading, state, delay, minDuration]);
-    useEffect(function () {
-        return function () { return clearTimeout(timeout.current); };
-    }, []);
-    return state === State.DISPLAY || state === State.EXPIRE;
-}
-export default useSpinDelay;

package/hooks/useTraceUpdate.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTraceUpdate = void 0;
-var react_1 = require("react");
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */
-function useTraceUpdate(props) {
-    var prev = (0, react_1.useRef)(props);
-    (0, react_1.useEffect)(function () {
-        var changedProps = Object.entries(props).reduce(function (ps, _a) {
-            var k = _a[0], v = _a[1];
-            if (prev.current[k] !== v) {
-                // @ts-expect-error Does not matter here...
-                ps[k] = [prev.current[k], v];
-            }
-            return ps;
-        }, {});
-        if (Object.keys(changedProps).length > 0) {
-            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
-        }
-        prev.current = props;
-    });
-}
-exports.useTraceUpdate = useTraceUpdate;
-exports.default = useTraceUpdate;

package/hooks/useTraceUpdate.mjs

@@ -1,22 +0,0 @@
-import { useEffect, useRef } from "react";
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */
-export function useTraceUpdate(props) {
-    var prev = useRef(props);
-    useEffect(function () {
-        var changedProps = Object.entries(props).reduce(function (ps, _a) {
-            var k = _a[0], v = _a[1];
-            if (prev.current[k] !== v) {
-                // @ts-expect-error Does not matter here...
-                ps[k] = [prev.current[k], v];
-            }
-            return ps;
-        }, {});
-        if (Object.keys(changedProps).length > 0) {
-            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
-        }
-        prev.current = props;
-    });
-}
-export default useTraceUpdate;

package/hooks/useUpdateEffect.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUpdateEffect = void 0;
-var react_1 = require("react");
-var useFirstMountState_1 = require("./useFirstMountState");
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */
-var useUpdateEffect = function (effect, deps) {
-    var isFirstMount = (0, useFirstMountState_1.useFirstMountState)();
-    (0, react_1.useEffect)(function () {
-        if (!isFirstMount) {
-            return effect();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-};
-exports.useUpdateEffect = useUpdateEffect;
-exports.default = exports.useUpdateEffect;

package/hooks/useUpdateEffect.mjs

@@ -1,15 +0,0 @@
-import { useEffect } from "react";
-import { useFirstMountState } from "./useFirstMountState";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */
-export var useUpdateEffect = function (effect, deps) {
-    var isFirstMount = useFirstMountState();
-    useEffect(function () {
-        if (!isFirstMount) {
-            return effect();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-};
-export default useUpdateEffect;

package/hooks/useWindowSize.d.ts

@@ -1,12 +0,0 @@
-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;

package/hooks/useWindowSize.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWindowSize = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var listenResize_1 = tslib_1.__importDefault(require("@koine/dom/listenResize"));
-var listenResizeDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenResizeDebounced"));
-/**
- * # 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`
- */
-function useWindowSize(wait, immediate) {
-    var _a = (0, react_1.useState)(0), width = _a[0], widthSet = _a[1];
-    var _b = (0, react_1.useState)(0), height = _b[0], heightSet = _b[1];
-    (0, react_1.useEffect)(function () {
-        function updateSize() {
-            widthSet(window.innerWidth);
-            heightSet(window.innerHeight);
-        }
-        var listener = wait
-            ? (0, listenResizeDebounced_1.default)(0, updateSize, wait, immediate)
-            : (0, listenResize_1.default)(updateSize);
-        updateSize();
-        return listener;
-    }, [wait, immediate]);
-    return [width, height];
-}
-exports.useWindowSize = useWindowSize;
-exports.default = useWindowSize;

package/hooks/useWindowSize.mjs

@@ -1,29 +0,0 @@
-import { useEffect, useState } from "react";
-import listenResize from "@koine/dom/listenResize";
-import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
-/**
- * # 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 function useWindowSize(wait, immediate) {
-    var _a = useState(0), width = _a[0], widthSet = _a[1];
-    var _b = useState(0), height = _b[0], heightSet = _b[1];
-    useEffect(function () {
-        function updateSize() {
-            widthSet(window.innerWidth);
-            heightSet(window.innerHeight);
-        }
-        var listener = wait
-            ? listenResizeDebounced(0, updateSize, wait, immediate)
-            : listenResize(updateSize);
-        updateSize();
-        return listener;
-    }, [wait, immediate]);
-    return [width, height];
-}
-export default useWindowSize;

package/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./shared"), exports);
-// we need to alias the star export otherwise the named exports would collide
-// export * as css from "./css";
-// export * as sc from "./sc";
-// export * as tw from "./tw";

package/index.mjs

@@ -1,5 +0,0 @@
-export * from "./shared";
-// we need to alias the star export otherwise the named exports would collide
-// export * as css from "./css";
-// export * as sc from "./sc";
-// export * as tw from "./tw";

package/m/MotionProvider.d.ts

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-import { type LazyProps } from "framer-motion";
-export type MotionProviderFeatures = LazyProps["features"];
-export type MotionProviderProps = LazyProps & React.PropsWithChildren<{}>;
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */
-export declare const MotionProvider: ({ features, children }: MotionProviderProps) => import("react/jsx-runtime").JSX.Element;
-export default MotionProvider;

package/m/MotionProvider.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MotionProvider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var framer_motion_1 = require("framer-motion");
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */
-var MotionProvider = function (_a) {
-    var features = _a.features, children = _a.children;
-    return (0, jsx_runtime_1.jsx)(framer_motion_1.LazyMotion, { features: features, children: children });
-};
-exports.MotionProvider = MotionProvider;
-exports.default = exports.MotionProvider;

package/m/MotionProvider.mjs

@@ -1,39 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { LazyMotion } from "framer-motion";
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */
-export var MotionProvider = function (_a) {
-    var features = _a.features, children = _a.children;
-    return _jsx(LazyMotion, { features: features, children: children });
-};
-export default MotionProvider;

package/m/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */
-export * from "./MotionProvider";

package/m/index.js

@@ -1,9 +0,0 @@
-"use strict";
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./MotionProvider"), exports);

package/m/index.mjs

@@ -1,6 +0,0 @@
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */
-export * from "./MotionProvider";

package/m/lite.d.ts

@@ -1,2 +0,0 @@
-import { domAnimation } from "framer-motion";
-export default domAnimation;

package/m/lite.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var framer_motion_1 = require("framer-motion");
-exports.default = framer_motion_1.domAnimation;

package/m/lite.mjs

@@ -1,2 +0,0 @@
-import { domAnimation } from "framer-motion";
-export default domAnimation;

package/m/max.d.ts

@@ -1,2 +0,0 @@
-import { domMax } from "framer-motion";
-export default domMax;

package/m/max.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var framer_motion_1 = require("framer-motion");
-exports.default = framer_motion_1.domMax;

package/m/max.mjs

@@ -1,2 +0,0 @@
-import { domMax } from "framer-motion";
-export default domMax;

package/m/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/sc/index.d.ts

@@ -1,30 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/bare";
-export { KoineForm, type KoineFormProps } from "../Form/sc/bare";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/sc/index.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineForm = exports.KoineDialog = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../shared"), exports);
-tslib_1.__exportStar(require("../Alert"), exports);
-tslib_1.__exportStar(require("../Animations"), exports);
-tslib_1.__exportStar(require("../Autocomplete"), exports);
-tslib_1.__exportStar(require("../Bg"), exports);
-tslib_1.__exportStar(require("../Breadcrumbs"), exports);
-tslib_1.__exportStar(require("../Buttons"), exports);
-tslib_1.__exportStar(require("../Carousel"), exports);
-tslib_1.__exportStar(require("../Collapsable"), exports);
-tslib_1.__exportStar(require("../Debug"), exports);
-var bare_1 = require("../Dialog/sc/bare");
-Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
-var bare_2 = require("../Form/sc/bare");
-Object.defineProperty(exports, "KoineForm", { enumerable: true, get: function () { return bare_2.KoineForm; } });
-tslib_1.__exportStar(require("../Forms"), exports);
-tslib_1.__exportStar(require("../Grid"), exports);
-tslib_1.__exportStar(require("../Hamburger"), exports);
-tslib_1.__exportStar(require("../Header"), exports);
-tslib_1.__exportStar(require("../Hidden"), exports);
-tslib_1.__exportStar(require("../Img"), exports);
-tslib_1.__exportStar(require("../Link"), exports);
-tslib_1.__exportStar(require("../MenuItem"), exports);
-tslib_1.__exportStar(require("../Pagination"), exports);
-tslib_1.__exportStar(require("../Pill"), exports);
-tslib_1.__exportStar(require("../Progress"), exports);
-tslib_1.__exportStar(require("../Rating"), exports);
-// export * from "../Select";
-tslib_1.__exportStar(require("../Sidebar"), exports);
-tslib_1.__exportStar(require("../Spacing"), exports);
-tslib_1.__exportStar(require("../Sticky"), exports);
-tslib_1.__exportStar(require("../styles"), exports);
-tslib_1.__exportStar(require("../Tabs"), exports);
-tslib_1.__exportStar(require("../Typography"), exports);