@koine/react 2.0.0-beta.14 → 2.0.0-beta.141

package/hooks/useScrollTo.mjs

@@ -1,20 +0,0 @@
-import isBrowser from "@koine/utils/isBrowser";
-import useHeader from "../Header/useHeader";
-export function useScrollTo(id = "", offset = 0) {
-    const [, , headerHeight] = useHeader();
-    if (!isBrowser) {
-        return;
-    }
-    const headerOffset = headerHeight || 0;
-    let element = document.getElementById(id);
-    let top = 0;
-    if (element && element.offsetParent) {
-        do {
-            top += element.offsetTop;
-        }while (element = element.offsetParent)
-    }
-    top -= offset;
-    top -= headerOffset;
-    window.scroll(0, top);
-}
-export default useScrollTo;

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

@@ -1,35 +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) {
-    const fixedOffset = useFixedOffset();
-    const scroll = useCallback((to, customOffset, callback, fallbackTimeout, behavior)=>{
-        let top = undefined;
-        let toIsElement = false;
-        if (isNumber(to)) {
-            top = to;
-        } else if (to) {
-            const 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.mjs

@@ -1,52 +0,0 @@
-import { useEffect, useRef, useState } 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 = 500, minDuration = 200) {
-    const [state, setState] = useState(0);
-    const timeout = useRef();
-    useEffect(()=>{
-        if (loading && state === 0) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(()=>{
-                if (!loading) {
-                    return setState(0);
-                }
-                timeout.current = setTimeout(()=>{
-                    setState(3);
-                }, minDuration);
-                setState(2);
-            }, delay);
-            setState(1);
-        }
-        if (!loading && state !== 2) {
-            clearTimeout(timeout.current);
-            setState(0);
-        }
-    }, [
-        loading,
-        state,
-        delay,
-        minDuration
-    ]);
-    useEffect(()=>{
-        return ()=>clearTimeout(timeout.current);
-    }, []);
-    return state === 2 || state === 3;
-}
-export default useSpinDelay;

package/hooks/useTraceUpdate.mjs

@@ -1,23 +0,0 @@
-import { useEffect, useRef } from "react";
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */ export function useTraceUpdate(props) {
-    const prev = useRef(props);
-    useEffect(()=>{
-        const changedProps = Object.entries(props).reduce((ps, [k, v])=>{
-            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.mjs

@@ -1,14 +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 const useUpdateEffect = (effect, deps)=>{
-    const isFirstMount = useFirstMountState();
-    useEffect(()=>{
-        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.mjs

@@ -1,32 +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) {
-    const [width, widthSet] = useState(0);
-    const [height, heightSet] = useState(0);
-    useEffect(()=>{
-        function updateSize() {
-            widthSet(window.innerWidth);
-            heightSet(window.innerHeight);
-        }
-        const listener = wait ? listenResizeDebounced(0, updateSize, wait, immediate) : listenResize(updateSize);
-        updateSize();
-        return listener;
-    }, [
-        wait,
-        immediate
-    ]);
-    return [
-        width,
-        height
-    ];
-}
-export default useWindowSize;

package/index.mjs

@@ -1,4 +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.mjs

@@ -1,40 +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 const MotionProvider = ({ features, children })=>{
-    return /*#__PURE__*/ _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.mjs

@@ -1,5 +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.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.mjs

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

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

@@ -1,31 +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 } from "../Dialog/sc/bare";
-export { KoineForm } 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 "../Select";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/scm/index.d.ts

@@ -1,29 +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/framer";
-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/scm/index.mjs

@@ -1,31 +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 } from "../Dialog/sc/framer";
-// export { KoineForm, type KoineFormProps} from "../Form/sc/framer";
-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 "../Select";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/shared/index.d.ts

@@ -1,8 +0,0 @@
-export * from "../Calendar";
-export * from "../Dialog";
-export * from "../FaviconTags";
-export * from "../helpers";
-export * from "../hooks";
-export * from "../Meta";
-export * from "../NoJs";
-export * from "../types";

package/shared/index.mjs

@@ -1,43 +0,0 @@
-export * from "../Calendar";
-// export {
-//   Calendar,
-//   CalendarDaygridCell,
-//   CalendarDaygridCellComponents,
-//   CalendarDaygridCellEventBtnProps,
-//   CalendarDaygridCellEventProps,
-//   CalendarDaygridCellProps,
-//   CalendarDaygridCellStyledProps,
-//   CalendarDaygridNavProps,
-//   CalendarDaygridNavTitleProps,
-//   CalendarDaygridTableBodyCellDateProps,
-//   CalendarDaygridTableBodyCellProps,
-//   CalendarDaygridTableProps,
-//   CalendarEvent,
-//   CalendarEventsByTimestamp,
-//   CalendarEventsMap,
-//   CalendarLegendItemProps,
-//   CalendarLegendProps,
-//   CalendarRange,
-//   CalendarView,
-//   CalendarViewDay,
-//   CalendarViewDayProps,
-//   CalendarViewEvent,
-//   CalendarViewWeek,
-//   CalendarViewWeeks,
-//   Calendars
-// } from "../Calendar";
-export * from "../Dialog";
-// export {
-//   KoineDialog,
-//   type KoineDialogProps
-// } from "../Dialog";
-export * from "../FaviconTags";
-// export {
-//   FaviconTags,
-//   type FaviconTagsProps
-// } from "../FaviconTags";
-export * from "../helpers";
-export * from "../hooks";
-export * from "../Meta";
-export * from "../NoJs";
-export * from "../types";

package/styles/Body.d.ts

@@ -1,10 +0,0 @@
-export declare const BodyRoot: any;
-/**
- * If you have background graphics to overlap you might need to add:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */
-export declare const BodyMain: any;

package/styles/Body.mjs

@@ -1,16 +0,0 @@
-import styled from "styled-components";
-export const BodyRoot = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-`;
-/**
- * If you have background graphics to overlap you might need to add:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */ export const BodyMain = styled.main`
-  flex: 1;
-`;

package/styles/Global.d.ts

@@ -1,15 +0,0 @@
-/**
- * App global style
- *
- * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
- * and similar.
- *
- * What we do here:
- * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
- *  - @see https://stackoverflow.com/a/60987373/1938970
- * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
- *  - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
- *  - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
- */
-export declare const stylesGlobal = "\n  body {\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: scroll;\n  }\n\n  body,\n  button,\n  input,\n  textarea,\n  select,\n  select:-webkit-autofill::first-line,\n  input:-webkit-autofill::first-line {\n    font-family: var(--font), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n      sans-serif;\n    font-size: var(--fontSize);\n  }\n\n  html {\n    box-sizing: border-box;\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: inherit;\n    -webkit-tap-highlight-color: transparent;\n  }\n";
-export declare const StylesGlobal: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;

package/styles/Global.mjs

@@ -1,49 +0,0 @@
-import { createGlobalStyle } from "styled-components";
-/**
- * App global style
- *
- * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
- * and similar.
- *
- * What we do here:
- * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
- *  - @see https://stackoverflow.com/a/60987373/1938970
- * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
- *  - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
- *  - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
- */ export const stylesGlobal = `
-  body {
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
-    overflow-y: scroll;
-  }
-
-  body,
-  button,
-  input,
-  textarea,
-  select,
-  select:-webkit-autofill::first-line,
-  input:-webkit-autofill::first-line {
-    font-family: var(--font), -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-      sans-serif;
-    font-size: var(--fontSize);
-  }
-
-  html {
-    box-sizing: border-box;
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-    -webkit-tap-highlight-color: transparent;
-  }
-`;
-export const StylesGlobal = createGlobalStyle`${stylesGlobal}`;

package/styles/index.d.ts

@@ -1,7 +0,0 @@
-export { BodyMain, BodyRoot } from "./Body";
-export { StylesGlobal, stylesGlobal } from "./Global";
-export { MediaDirection, MediaQuery, MediaQueryFunction, between, down, generateMediaQueries, max, min, only, up, useMedia, } from "./media";
-export { SpacingArgs, SpacingDevices, SpacingDirection, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize, spacing, spacingBottom, spacingTop, spacingVertical, } from "./spacing";
-export { colStretch, centered, ellipsis, inset0, invisible, overlay, stateFocus, } from "./styled";
-export { breakpoints, createTheme, useTheme, type Breakpoint, type Breakpoints, type Theme, type ThemeOptions, } from "./theme";
-export { THEME_DEFAULT, THEME_KEY, type ThemeCookie, ThemeVanillaContext, type ThemeVanillaContextType, ThemeVanillaProvider, type ThemeVanillaProviderProps, type ThemeVanillaValue, getInitialThemeFromClient, } from "./theme--vanilla";

package/styles/index.mjs

@@ -1,7 +0,0 @@
-export { BodyMain, BodyRoot } from "./Body";
-export { StylesGlobal, stylesGlobal } from "./Global";
-export { MediaDirection, MediaQuery, MediaQueryFunction, between, down, generateMediaQueries, max, min, only, up, useMedia } from "./media";
-export { SpacingArgs, SpacingDevices, SpacingDirection, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize, spacing, spacingBottom, spacingTop, spacingVertical } from "./spacing";
-export { colStretch, centered, ellipsis, inset0, invisible, overlay, stateFocus } from "./styled";
-export { breakpoints, createTheme, useTheme } from "./theme";
-export { THEME_DEFAULT, THEME_KEY, ThemeVanillaContext, ThemeVanillaProvider, getInitialThemeFromClient } from "./theme--vanilla";