@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

package/hooks/useSmoothScroll.mjs

@@ -8,32 +8,28 @@ 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;
+ */ 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) {
-            var el = document.getElementById(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);
+            top = top + (customOffset || 0) + (disregardAutomaticFixedOffset || toIsElement ? 0 : fixedOffset.current);
             scrollTo(top, callback, fallbackTimeout, behavior);
         }
-    }, [disregardAutomaticFixedOffset, fixedOffset]);
+    }, [
+        disregardAutomaticFixedOffset,
+        fixedOffset
+    ]);
     return scroll;
 }
 export default useSmoothScroll;

package/hooks/useSpinDelay.mjs

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

package/hooks/useTraceUpdate.mjs

@@ -1,15 +1,16 @@
 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];
+ */ 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];
+                ps[k] = [
+                    prev.current[k],
+                    v
+                ];
             }
             return ps;
         }, {});

package/hooks/useUpdateEffect.mjs

@@ -2,14 +2,13 @@ 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 () {
+ */ export const useUpdateEffect = (effect, deps)=>{
+    const isFirstMount = useFirstMountState();
+    useEffect(()=>{
         if (!isFirstMount) {
             return effect();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
 };
 export default useUpdateEffect;

package/hooks/useWindowSize.mjs

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

package/index.mjs

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

@@ -31,9 +31,10 @@ import { LazyMotion } from "framer-motion";
  *   <App />
  * </MotionProvider>
  * ```
- */
-export var MotionProvider = function (_a) {
-    var features = _a.features, children = _a.children;
-    return _jsx(LazyMotion, { features: features, children: children });
+ */ export const MotionProvider = ({ features, children })=>{
+    return /*#__PURE__*/ _jsx(LazyMotion, {
+        features: features,
+        children: children
+    });
 };
 export default MotionProvider;

package/m/index.mjs

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

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@koine/react",
   "sideEffects": false,
+  "dependencies": {
+    "@koine/dom": "2.0.0-beta.11",
+    "@koine/utils": "2.0.0-beta.11"
+  },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {
       "optional": true
@@ -45,29 +49,24 @@
       "optional": true
     }
   },
-  "dependencies": {
+  "peerDependencies": {
     "@kuus/yup": "1.0.0-beta.7",
-    "@mui/base": "5.0.0-beta.4",
-    "@mui/utils": "5.13.1",
-    "@tiptap/react": "2.0.3",
-    "@tiptap/starter-kit": "2.0.3",
-    "clsx": "1.2.1",
+    "@mui/base": "5.0.0-beta.9",
+    "@mui/utils": "^5.14.3",
+    "@tiptap/react": "^2.0.4",
+    "@tiptap/starter-kit": "^2.0.4",
     "date-fns": "^2.30.0",
-    "framer-motion": "^10.12.16",
+    "framer-motion": "^10.15.0",
     "react": "^18.2.0",
-    "react-hook-form": "^7.44.3",
-    "react-icons": "^4.9.0",
+    "react-hook-form": "^7.45.2",
+    "react-icons": "^4.10.1",
     "react-swipeable": "^7.0.1",
     "styled-components": "^5.3.11",
-    "ts-debounce": "^4.0.0",
-    "tslib": "^2.5.3",
-    "type-fest": "^3.11.1"
-  },
-  "peerDependencies": {
-    "@koine/utils": "2.0.0-beta.1"
+    "tslib": "^2.6.1",
+    "type-fest": "^4.1.0"
   },
+  "module": "./index.mjs",
   "main": "./index.js",
   "types": "./index.d.ts",
-  "version": "2.0.0-beta.1",
-  "module": "./index.mjs"
-}
+  "version": "2.0.0-beta.11"
+}

package/shared/index.mjs

@@ -1,6 +1,41 @@
 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";

package/styles/Body.d.ts

@@ -1,4 +1,4 @@
-export declare const BodyRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const BodyRoot: any;
 /**
  * If you have background graphics to overlap you might need to add:
  *
@@ -7,4 +7,4 @@ export declare const BodyRoot: import("styled-components").StyledComponent<"div"
  * position: relative;
  * ```
  */
-export declare const BodyMain: import("styled-components").StyledComponent<"main", import("styled-components").DefaultTheme, {}, never>;
+export declare const BodyMain: any;

package/styles/Body.mjs

@@ -1,6 +1,9 @@
-import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export var BodyRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"])));
+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:
  *
@@ -8,6 +11,6 @@ export var BodyRoot = styled.div(templateObject_1 || (templateObject_1 = __makeT
  * z-index: 1;
  * position: relative;
  * ```
- */
-export var BodyMain = styled.main(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2;
+ */ export const BodyMain = styled.main`
+  flex: 1;
+`;

package/styles/Global.mjs

@@ -1,4 +1,3 @@
-import { __makeTemplateObject } from "tslib";
 import { createGlobalStyle } from "styled-components";
 /**
  * App global style
@@ -12,7 +11,39 @@ import { createGlobalStyle } from "styled-components";
  * - 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 var 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 var StylesGlobal = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), stylesGlobal);
-var templateObject_1;
+ */ 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.mjs

@@ -1,7 +1,7 @@
 export { BodyMain, BodyRoot } from "./Body";
 export { StylesGlobal, stylesGlobal } from "./Global";
-export { between, down, generateMediaQueries, max, min, only, up, useMedia, } from "./media";
-export { 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";
+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";

package/styles/media.mjs

@@ -1,20 +1,19 @@
 /// TODO:FIXME: this should use code from `useMqWidthCreator`
-var _a;
-import { useState, useEffect } from "react";
-import { useTheme, breakpoints } from "./theme";
-export var min = (_a = generateMediaQueries(breakpoints), _a.min), max = _a.max, up = _a.up, down = _a.down, between = _a.between, only = _a.only;
+import { useEffect, useState } from "react";
+import { breakpoints, useTheme } from "./theme";
+export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
 export function useMedia(media) {
-    var breakpoints = useTheme().breakpoints;
-    var _a = useState(false), matches = _a[0], setMatches = _a[1];
-    var _b = media.split(":"), _c = _b[0], direction = _c === void 0 ? "min" : _c, breakpoint = _b[1];
-    var px = breakpoints[breakpoint];
+    const { breakpoints } = useTheme();
+    const [matches, setMatches] = useState(false);
+    const [direction = "min", breakpoint] = media.split(":");
+    let px = breakpoints[breakpoint];
     if (direction === "max") {
         px = px - 0.02;
     }
-    var query = "(".concat(direction, "-width: ").concat(px, "px)");
-    useEffect(function () {
-        var mq = window.matchMedia(query);
-        var handleChange = function (event) {
+    const query = `(${direction}-width: ${px}px)`;
+    useEffect(()=>{
+        const mq = window.matchMedia(query);
+        const handleChange = (event)=>{
             setMatches(event.matches);
         };
         setMatches(mq.matches);
@@ -24,15 +23,17 @@ export function useMedia(media) {
             // Update the state whenever the media query match state changes
             mq.addListener(handleChange);
             // Clean up on unmount and if the query changes
-            return function () {
+            return ()=>{
                 mq.removeListener(handleChange);
             };
         }
         mq.addEventListener("change", handleChange);
-        return function () {
+        return ()=>{
             mq.removeEventListener("change", handleChange);
         };
-    }, [query]);
+    }, [
+        query
+    ]);
     return matches;
 }
 /**
@@ -83,74 +84,68 @@ export function useMedia(media) {
  * @custom-media --narrow-window (max-width: 30em);
  * @media (--narrow-window) {}
  * ```
- */
-export function generateMediaQueries(breakpoints) {
-    var temp = Object.keys(breakpoints).map(function (key) {
-        var br = key;
-        return [br, breakpoints[br]];
+ */ export function generateMediaQueries(breakpoints) {
+    const temp = Object.keys(breakpoints).map((key)=>{
+        const br = key;
+        return [
+            br,
+            breakpoints[br]
+        ];
     });
-    var sortedKeys = temp.sort(function (a, b) { return a[1] - b[1]; }).map(function (item) { return item[0]; });
-    var getNext = function (breakpoint) {
-        var index = sortedKeys.indexOf(breakpoint);
+    const sortedKeys = temp.sort((a, b)=>a[1] - b[1]).map((item)=>item[0]);
+    const getNext = (breakpoint)=>{
+        const index = sortedKeys.indexOf(breakpoint);
         return sortedKeys[index + 1];
     };
     /**
-     * It behaves the same as `@media (min-width: ${value}px)`
-     * where value is the given breakpoint value.
-     * For ease of use this can be used both as a function `min("md")` and as an
-     * object literal `min.md`.
-     */ // @ts-expect-error FIXME: at some point
-    var min = function (br) {
-        return "@media (min-width: ".concat(breakpoints[br], "px)");
-    };
+   * It behaves the same as `@media (min-width: ${value}px)`
+   * where value is the given breakpoint value.
+   * For ease of use this can be used both as a function `min("md")` and as an
+   * object literal `min.md`.
+   */ // @ts-expect-error FIXME: at some point
+    const min = (br)=>`@media (min-width: ${breakpoints[br]}px)`;
     /**
-     * It behaves the same as `@media (max-width: ${value}px)`
-     * where value is the given breakpoint value.
-     * For ease of use this can be used both as a function `max("md")` and as an
-     * object literal `max.md`.
-     */ // @ts-expect-error FIXME: at some point
-    var max = function (br) {
-        return "@media (max-width: ".concat(breakpoints[br] - 0.02, "px)");
-    };
-    for (var br in breakpoints) {
-        var _br = br;
-        min[_br] = "@media (min-width: ".concat(breakpoints[_br], "px)");
-        max[_br] = "@media (max-width: ".concat(breakpoints[_br] - 0.02, "px)");
+   * It behaves the same as `@media (max-width: ${value}px)`
+   * where value is the given breakpoint value.
+   * For ease of use this can be used both as a function `max("md")` and as an
+   * object literal `max.md`.
+   */ // @ts-expect-error FIXME: at some point
+    const max = (br)=>`@media (max-width: ${breakpoints[br] - 0.02}px)`;
+    for(const br in breakpoints){
+        const _br = br;
+        min[_br] = `@media (min-width: ${breakpoints[_br]}px)`;
+        max[_br] = `@media (max-width: ${breakpoints[_br] - 0.02}px)`;
     }
     /**
-     * It behaves the same as `min`
-     * @inheritdoc {max}
-     */
-    var up = min;
+   * It behaves the same as `min`
+   * @inheritdoc {max}
+   */ const up = min;
     /**
-     * It behaves similarly to `max` but you will use the "next" breakpoint,
-     * specifying CSS that will apply from the given breakpoint and down.
-     */
-    var down = function (br) {
-        var brNext = getNext(br);
+   * It behaves similarly to `max` but you will use the "next" breakpoint,
+   * specifying CSS that will apply from the given breakpoint and down.
+   */ const down = (br)=>{
+        const brNext = getNext(br);
         // TODO: if br does not exists otherwise throw Error
-        return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 0.02, "px)");
+        return brNext && `@media (max-width: ${breakpoints[brNext] - 0.02}px)`;
     };
     /**
-     * Media query between the two given breakpoints
-     */
-    var between = function (br1, br2) {
-        return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
+   * Media query between the two given breakpoints
+   */ const between = (br1, br2)=>{
+        return `@media (min-width: ${breakpoints[br1]}px) and (max-width: ${breakpoints[br2] - 0.02}px)`;
     };
     /**
-     * Media query to apply from the given breakpoint until the next, just for its
-     * full range
-     */
-    var only = function (br) {
-        var brNext = getNext(br);
+   * Media query to apply from the given breakpoint until the next, just for its
+   * full range
+   */ const only = (br)=>{
+        const brNext = getNext(br);
         return brNext ? between(br, brNext) : min(br);
     };
     return {
-        min: min,
-        max: max,
-        up: up,
-        down: down,
-        between: between,
-        only: only,
+        min,
+        max,
+        up,
+        down,
+        between,
+        only
     };
 }