@koine/react 1.0.11 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koine/react",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "sideEffects": false,
   "main": "./node/index.js",
   "typings": "./index.d.ts",
@@ -8,7 +8,8 @@
     "styled-components": "^5.3.5",
     "framer-motion": "^6.3.3",
     "react": "^16.8 || ^17 || ^18",
-    "@mui/base": "^5.0.0-alpha.80",
+    "react-dom": "^16.8 || ^17 || ^18",
+    "@mui/base": "^5.0.0-alpha.81",
     "react-icons": "^4.3.1",
     "date-fns": "^2.28.0",
     "react-swipeable": "^7.0.0",

package/styles/Body.js

@@ -1,9 +1,6 @@
+import { __makeTemplateObject } from "tslib";
 import styled from "styled-components";
-export const BodyRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-`;
+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"])));
 /**
  * If you have background graphics to overlap you might need to add:
  *
@@ -12,6 +9,5 @@ export const BodyRoot = styled.div `
  * position: relative;
  * ```
  */
-export const BodyMain = styled.main `
-  flex: 1;
-`;
+export var BodyMain = styled.main(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var templateObject_1, templateObject_2;

package/styles/Global.js

@@ -1,3 +1,4 @@
+import { __makeTemplateObject } from "tslib";
 import { createGlobalStyle } from "styled-components";
 /**
  * App global style
@@ -12,39 +13,6 @@ import { createGlobalStyle } from "styled-components";
  *  - @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}`;
+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;

package/styles/media.js

@@ -1,18 +1,19 @@
+var _a;
 import { useState, useEffect } from "react";
 import { useTheme, breakpoints } from "./theme";
-export const { min, max, up, down, between, only } = generateMediaQueries(breakpoints);
+export var min = (_a = generateMediaQueries(breakpoints), _a.min), max = _a.max, up = _a.up, down = _a.down, between = _a.between, only = _a.only;
 export function useMedia(media) {
-    const { breakpoints } = useTheme();
-    const [matches, setMatches] = useState(false);
-    const [direction = "min", breakpoint] = media.split(":");
-    let px = breakpoints[breakpoint];
+    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];
     if (direction === "max") {
         px = px - 0.02;
     }
-    const query = `(${direction}-width: ${px}px)`;
-    useEffect(() => {
-        const mq = window.matchMedia(query);
-        const handleChange = (event) => {
+    var query = "(".concat(direction, "-width: ").concat(px, "px)");
+    useEffect(function () {
+        var mq = window.matchMedia(query);
+        var handleChange = function (event) {
             setMatches(event.matches);
         };
         setMatches(mq.matches);
@@ -22,12 +23,12 @@ 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 () => {
+            return function () {
                 mq.removeListener(handleChange);
             };
         }
         mq.addEventListener("change", handleChange);
-        return () => {
+        return function () {
             mq.removeEventListener("change", handleChange);
         };
     }, [query]);
@@ -83,13 +84,13 @@ export function useMedia(media) {
  * ```
  */
 export function generateMediaQueries(breakpoints) {
-    const temp = Object.keys(breakpoints).map((key) => {
-        const br = key;
+    var temp = Object.keys(breakpoints).map(function (key) {
+        var br = key;
         return [br, breakpoints[br]];
     });
-    const sortedKeys = temp.sort((a, b) => a[1] - b[1]).map((item) => item[0]);
-    const getNext = (breakpoint) => {
-        const index = sortedKeys.indexOf(breakpoint);
+    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);
         return sortedKeys[index + 1];
     };
     /**
@@ -98,53 +99,57 @@ export function generateMediaQueries(breakpoints) {
      * 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)`;
+    var min = function (br) {
+        return "@media (min-width: ".concat(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
-    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)`;
+    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 `min`
      * @inheritdoc {max}
      */
-    const up = min;
+    var 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.
      */
-    const down = (br) => {
-        const brNext = getNext(br);
+    var down = function (br) {
+        var brNext = getNext(br);
         // TODO: if br does not exists otherwise throw Error
-        return brNext && `@media (max-width: ${breakpoints[brNext] - 0.02}px)`;
+        return brNext && "@media (max-width: ".concat(breakpoints[brNext] - 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)`;
+    var between = function (br1, br2) {
+        return "@media (min-width: ".concat(breakpoints[br1], "px) and (max-width: ").concat(breakpoints[br2] - 0.02, "px)");
     };
     /**
      * Media query to apply from the given breakpoint until the next, just for its
      * full range
      */
-    const only = (br) => {
-        const brNext = getNext(br);
+    var only = function (br) {
+        var brNext = getNext(br);
         return brNext ? between(br, brNext) : min(br);
     };
     return {
-        min,
-        max,
-        up,
-        down,
-        between,
-        only,
+        min: min,
+        max: max,
+        up: up,
+        down: down,
+        between: between,
+        only: only,
     };
 }

package/styles/spacing.js

@@ -1,27 +1,26 @@
-function _spacing(theme, size = "md", factor = 1, property = "padding", direction = "top", devices = ["mobile", "tablet", "desktop"]) {
-    const { breakpoints, devices: DEVICES, spaces: SPACES } = theme;
-    let css = "";
-    const prop = `${property}-${direction}`;
+function _spacing(theme, size, factor, property, direction, devices) {
+    if (size === void 0) { size = "md"; }
+    if (factor === void 0) { factor = 1; }
+    if (property === void 0) { property = "padding"; }
+    if (direction === void 0) { direction = "top"; }
+    if (devices === void 0) { devices = ["mobile", "tablet", "desktop"]; }
+    var breakpoints = theme.breakpoints, DEVICES = theme.devices, SPACES = theme.spaces;
+    var css = "";
+    var prop = "".concat(property, "-").concat(direction);
     if (!devices.length || devices[0] === "mobile") {
-        css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
-        ${prop}: ${SPACES["mobile"][size] * factor}px;
-      }`;
+        css += "@media(max-width: ".concat(breakpoints[DEVICES.mobile], "px){\n        ").concat(prop, ": ").concat(SPACES["mobile"][size] * factor, "px;\n      }");
     }
     else {
-        for (let index = 0; index < devices.length; index++) {
-            const device = devices[index];
+        for (var index = 0; index < devices.length; index++) {
+            var device = devices[index];
             if (device === "mobile") {
-                css += `${prop}: ${SPACES[device][size] * factor}px;`;
+                css += "".concat(prop, ": ").concat(SPACES[device][size] * factor, "px;");
             }
             else if (device === "tablet") {
-                css += `@media(min-width: ${breakpoints[DEVICES.tablet]}px){
-          ${prop}: ${SPACES["tablet"][size] * factor}px;
-        }`;
+                css += "@media(min-width: ".concat(breakpoints[DEVICES.tablet], "px){\n          ").concat(prop, ": ").concat(SPACES["tablet"][size] * factor, "px;\n        }");
             }
             else if (device === "desktop") {
-                css += `@media(min-width: ${breakpoints[DEVICES.desktop]}px){
-          ${prop}: ${SPACES["desktop"][size] * factor}px;
-        }`;
+                css += "@media(min-width: ".concat(breakpoints[DEVICES.desktop], "px){\n          ").concat(prop, ": ").concat(SPACES["desktop"][size] * factor, "px;\n        }");
             }
         }
     }

package/styles/styled.js

@@ -1,27 +1,13 @@
 export function colStretch(direction, bg) {
-    return `
-    background: ${bg};
-    position: relative;
-
-    &:before{
-      z-index: -1;
-      content: '';
-      position: absolute;
-      right: ${direction === "left" ? "100%" : "-100vw"};
-      left: ${direction === "right" ? "100%" : "-100vw"};
-      top: 0;
-      bottom: 0;
-      background: ${bg};
-    }
-  `;
+    return "\n    background: ".concat(bg, ";\n    position: relative;\n\n    &:before{\n      z-index: -1;\n      content: '';\n      position: absolute;\n      right: ").concat(direction === "left" ? "100%" : "-100vw", ";\n      left: ").concat(direction === "right" ? "100%" : "-100vw", ";\n      top: 0;\n      bottom: 0;\n      background: ").concat(bg, ";\n    }\n  ");
 }
 /** @see https://caniuse.com/?search=inset */
-export const inset0 = `top:0;left:0;right:0;bottom:0;`;
-export const overlay = `position: absolute;${inset0}`;
-export const centered = `display: flex;align-items: center;justify-content: center;`;
-export const ellipsis = `overflow: hidden;text-overflow: ellipsis;white-space: nowrap;`;
+export var inset0 = "top:0;left:0;right:0;bottom:0;";
+export var overlay = "position: absolute;".concat(inset0);
+export var centered = "display: flex;align-items: center;justify-content: center;";
+export var ellipsis = "overflow: hidden;text-overflow: ellipsis;white-space: nowrap;";
 /**
  * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
  */
-export const invisible = `border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;`;
-export const stateFocus = `outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);`;
+export var invisible = "border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;white-space: nowrap;width: 1px;";
+export var stateFocus = "outline: 0px;box-shadow: 0 0 0 0.2rem rgba(200, 200, 200, 0.25);";

package/styles/theme--vanilla.js

@@ -1,53 +1,55 @@
+import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useState } from "react";
 import { isBrowser, setCookie, parseCookie } from "@koine/utils";
 import { useMount, useUpdateEffect } from "../hooks";
-export const THEME_KEY = "theme";
-export const THEME_DEFAULT = "light";
-export const getInitialThemeFromRequest = (cookie) => {
+export var THEME_KEY = "theme";
+export var THEME_DEFAULT = "light";
+export var getInitialThemeFromRequest = function (cookie) {
     if (cookie) {
-        const parsed = parseCookie(cookie);
-        return parsed?.theme;
+        var parsed = parseCookie(cookie);
+        return parsed === null || parsed === void 0 ? void 0 : parsed.theme;
     }
     return THEME_DEFAULT;
 };
-export const getInitialThemeFromClient = () => {
+export var getInitialThemeFromClient = function () {
     if (typeof window !== "undefined" && window.localStorage) {
-        const storedPrefs = window.localStorage.getItem(THEME_KEY);
+        var storedPrefs = window.localStorage.getItem(THEME_KEY);
         if (typeof storedPrefs === "string") {
             return storedPrefs;
         }
-        const userMedia = window.matchMedia("(prefers-color-scheme: dark)");
+        var userMedia = window.matchMedia("(prefers-color-scheme: dark)");
         if (userMedia.matches) {
             return "dark";
         }
     }
     return THEME_DEFAULT;
 };
-export const ThemeVanillaContext = createContext({
+export var ThemeVanillaContext = createContext({
     theme: "light",
     setTheme: undefined,
 });
-export const ThemeVanillaProvider = ({ initialTheme, children, }) => {
-    const [theme, setTheme] = useState(initialTheme);
-    const rawSetTheme = (rawTheme) => {
+export var ThemeVanillaProvider = function (_a) {
+    var initialTheme = _a.initialTheme, children = _a.children;
+    var _b = useState(initialTheme), theme = _b[0], setTheme = _b[1];
+    var rawSetTheme = function (rawTheme) {
         if (!rawTheme || !isBrowser) {
             return;
         }
-        const root = window.document.documentElement;
-        const isDark = rawTheme === "dark";
+        var root = window.document.documentElement;
+        var isDark = rawTheme === "dark";
         root.classList.remove(isDark ? "light" : "dark");
         root.classList.add(rawTheme);
         localStorage.setItem(THEME_KEY, rawTheme);
         setCookie(THEME_KEY, rawTheme);
     };
-    useMount(() => {
-        const theme = getInitialThemeFromClient();
+    useMount(function () {
+        var theme = getInitialThemeFromClient();
         setTheme(theme);
         rawSetTheme(theme);
     });
-    useUpdateEffect(() => {
+    useUpdateEffect(function () {
         rawSetTheme(theme);
     }, [theme]);
-    return (_jsx(ThemeVanillaContext.Provider, { value: { theme, setTheme }, children: children }));
+    return (_jsx(ThemeVanillaContext.Provider, __assign({ value: { theme: theme, setTheme: setTheme } }, { children: children })));
 };

package/styles/theme.js

@@ -1,5 +1,6 @@
+import { __assign } from "tslib";
 import { useTheme as _useTheme } from "styled-components";
-const DEFAULT_BREAKPOINTS = {
+var DEFAULT_BREAKPOINTS = {
     xs: 0,
     sm: 440,
     md: 768,
@@ -18,24 +19,23 @@ const DEFAULT_BREAKPOINTS = {
  * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
  * ```
  */
-export const breakpoints = process.env["BREAKPOINTS"]
-    ? process.env["BREAKPOINTS"].split(",").reduce((map, pair) => {
-        const [key, value] = pair.split(":");
+export var breakpoints = process.env["BREAKPOINTS"]
+    ? process.env["BREAKPOINTS"].split(",").reduce(function (map, pair) {
+        var _a = pair.split(":"), key = _a[0], value = _a[1];
         map[key] = parseFloat(value);
         return map;
     }, {})
     : DEFAULT_BREAKPOINTS;
-const themeDefault = {
+var themeDefault = {
     maxWidth: breakpoints.xxl,
-    breakpoints,
+    breakpoints: breakpoints,
     devices: {
         mobile: "sm",
         tablet: "md",
         desktop: "lg",
     },
 };
-export const createTheme = (options) => ({
-    ...themeDefault,
-    ...options,
-});
-export const useTheme = _useTheme;
+export var createTheme = function (options) {
+    return (__assign(__assign({}, themeDefault), options));
+};
+export var useTheme = _useTheme;