@koine/react 1.0.11 → 1.0.14

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;

package/node/Alert/Alert.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const AlertRoot = styled_components_1.default.div `
-  font-size: 12px;
-  ${(p) => (p.$danger ? `color: var(--danger)` : "")}
-`;
-const AlertInner = styled_components_1.default.div `
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.05);
-  /* border: 1px solid var(--grey700); */
-  /* background: pink; */
-  /* color: red; */
-`;
-const Alert = ({ $danger, children, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)(AlertRoot, { "$danger": $danger, ...props, children: (0, jsx_runtime_1.jsx)(AlertInner, { children: children }) }));
-};
-exports.Alert = Alert;

package/node/Alert/index.js

@@ -1,4 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Alert"), exports);

package/node/Animations/Reveal.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Reveal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const framer_motion_1 = require("framer-motion");
-const useReveal_1 = require("./useReveal");
-const Reveal = ({ children, direction, offsetStartY, offsetEndY, offsetStartX, ...props }) => {
-    const effectOptions = { direction, offsetStartY, offsetEndY, offsetStartX };
-    const prefersReducedMotion = (0, framer_motion_1.useReducedMotion)();
-    const { ref, startY, endY, startX } = (0, useReveal_1.useReveal)(effectOptions);
-    const { scrollYProgress } = (0, framer_motion_1.useViewportScroll)();
-    const xRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [startX, 0]);
-    const opacityRange = (0, framer_motion_1.useTransform)(scrollYProgress, [startY, endY], [0, 1]);
-    const x = (0, framer_motion_1.useSpring)(xRange, { stiffness: 400, damping: 90 });
-    const opacity = (0, framer_motion_1.useSpring)(opacityRange);
-    // console.log("start, end", startY, endY)
-    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { ...props, ref: ref, style: prefersReducedMotion ? {} : { x, opacity }, children: children }));
-};
-exports.Reveal = Reveal;

package/node/Animations/Underline.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UnderlineSkewed = void 0;
-const tslib_1 = require("tslib");
-const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-const framer_motion_1 = require("framer-motion");
-exports.UnderlineSkewed = (0, styled_components_1.default)(framer_motion_1.m.i) `
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 15%;
-  right: 15%;
-  height: 20px;
-  margin-top: -10px;
-  z-index: 0;
-  pointer-events: none;
-  background: var(--accent400);
-  transform: skewY(-5deg);
-`;

package/node/Animations/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Reveal"), exports);
-tslib_1.__exportStar(require("./Underline"), exports);
-tslib_1.__exportStar(require("./useReveal"), exports);

package/node/Animations/useReveal.js

@@ -1,74 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReveal = void 0;
-const react_1 = require("react");
-function useReveal({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all", }) {
-    const ref = (0, react_1.useRef)(null);
-    const [startY, setStartY] = (0, react_1.useState)(0);
-    const [endY, setEndY] = (0, react_1.useState)(0);
-    const [startX, setStartX] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        if (!ref.current) {
-            return;
-        }
-        const rect = ref.current.getBoundingClientRect();
-        // scroll position from top of the window
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const elementHeight = rect.height;
-        // rect.top is the distance from the currently visible viewport to the top
-        // of the given element
-        // so distanceTop is the distance between the top edge of the window and the
-        // top edge of the given element
-        const elementTop = rect.top;
-        const distanceTop = elementTop + scrollTop;
-        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
-        const offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
-        // the distance of the element from the top divided by the full height
-        // of the window gives back the start position of the given element in
-        // a scale from 0 to 1
-        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
-        // same for the end, we just add the given element height to the first value
-        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
-        let startX;
-        if (offsetStartX === "all") {
-            startX = direction === "left" ? -rect.right : rect.left;
-        }
-        else {
-            startX = rect.width * offsetStartX;
-            startX = direction === "left" ? -startX : startX;
-        }
-        // addMarker(startY + "px");
-        // addMarker(endY + "px");
-        // console.log("start", startY, "end", endY, "startX", startX)
-        setStartY(startY);
-        setEndY(endY);
-        setStartX(startX);
-        // addMarker(startY * 100 + "%", "blue", "fixed");
-        // addMarker(endY * 100 + "%", "blue", "fixed");
-    }, [
-        setStartY,
-        setEndY,
-        setStartX,
-        offsetStartY,
-        offsetEndY,
-        offsetStartX,
-        direction,
-    ]);
-    return { ref, startY, endY, startX };
-}
-exports.useReveal = useReveal;
-// function addMarker(top: string, color = "red", position = "absolute") {
-//   const div = document.createElement("div");
-//   div.setAttribute(
-//     "style",
-//     `
-//     position: ${position};
-//     top: ${top};
-//     left: 0;
-//     right: 0;
-//     height: 1px;
-//     background: ${color};
-//   `
-//   );
-//   document.body.appendChild(div);
-// }

package/node/Autocomplete/AutocompleteDownshift.js

@@ -1,161 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Autocomplete = void 0;
-// TODO: remove, just use mui version...
-exports.Autocomplete = null;
-// import {
-//   forwardRef,
-//   useCallback,
-//   useState,
-//   ForwardedRef,
-//   ReactNode,
-//   ComponentPropsWithRef,
-//   CSSProperties,
-// } from "react";
-// import { useCombobox } from "downshift";
-// import { SetRequired } from "@koine/utils";
-// // import debounce from "lodash.debounce";
-// import {
-//   AutocompleteRoot,
-//   AutocompleteLabel,
-//   AutocompleteInputWrap,
-//   AutocompleteInput,
-//   AutocompleteInputArrow,
-//   AutocompleteMenu,
-//   AutocompleteMenuItem,
-// } from "./components";
-// import { defaultOptionsFilterFn, triggerOnChange } from "../Forms/helpers";
-// import { InputProgress } from "../Forms/styles";
-// export type AutocompleteOption = Option;
-// export type AutocompleteValue = null | AutocompleteOption;
-// export type AutocompleteProps = SetRequired<
-//   Omit<ComponentPropsWithRef<"input">, "onSelect">,
-//   "onChange" | "name"
-// > & {
-//   freeSolo?: boolean;
-//   onSelect?: (option?: AutocompleteValue) => any;
-//   options?: AutocompleteOption[];
-//   loadOptions: (query?: string) => Promise<AutocompleteOption[]>;
-//   label?: string | ReactNode;
-//   className?: string;
-//   style?: CSSProperties;
-//   $ref: ForwardedRef<HTMLInputElement>;
-// };
-// export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
-//   function Autocomplete(
-//     {
-//       freeSolo,
-//       onSelect,
-//       options = [],
-//       label,
-//       name,
-//       value,
-//       onChange,
-//       loadOptions,
-//       className,
-//       style,
-//       $ref,
-//       ...props
-//     },
-//     ref
-//   ) {
-//     const [items, setItems] = useState(options);
-//     const [loading, setLoading] = useState(false);
-//     const triggerChange = useCallback(
-//       (selectedItem?: AutocompleteValue, inputValue?: string) => {
-//         const value = freeSolo ? inputValue : selectedItem?.value;
-//         triggerOnChange(onChange, name, value || "");
-//         if (onSelect) onSelect(selectedItem);
-//       },
-//       [onChange, onSelect, name, freeSolo]
-//     );
-//     const handleInputValueChange = useCallback(
-//       async ({ inputValue }) => {
-//         if (inputValue) {
-//           if (loadOptions) {
-//             setLoading(true);
-//             try {
-//               const newOptions = await loadOptions(inputValue);
-//               setItems(newOptions);
-//             } catch (e) {}
-//             setLoading(false);
-//           } else {
-//             setItems(defaultOptionsFilterFn(options, inputValue));
-//           }
-//         } else {
-//           setItems(options);
-//           // clear like behaviour
-//           triggerChange({ value: "", label: "" });
-//         }
-//       },
-//       [loadOptions, triggerChange]
-//     );
-//     const {
-//       isOpen,
-//       // selectedItem,
-//       getToggleButtonProps,
-//       getLabelProps,
-//       getMenuProps,
-//       getInputProps,
-//       getComboboxProps,
-//       highlightedIndex,
-//       getItemProps,
-//       openMenu,
-//     } = useCombobox<null | AutocompleteOption>({
-//       id: `Autocomplete-${name}`,
-//       items,
-//       // initialInputValue: value,
-//       onSelectedItemChange: ({ selectedItem, inputValue }) => {
-//         triggerChange(selectedItem, inputValue);
-//       },
-//       // itemToString: (item) => (item ? item.label || item.value : ""),
-//       onInputValueChange: handleInputValueChange,
-//     });
-//     // const debouncedInputValueChangeHandler = useCallback(
-//     //   debounce(handleInputValueChange, 200),
-//     //   [handleInputValueChange]
-//     // );
-//     return (
-//       <AutocompleteRoot className={className} style={style}>
-//         {label && (
-//           <AutocompleteLabel {...getLabelProps()}>{label}</AutocompleteLabel>
-//         )}
-//         <AutocompleteInputWrap {...getComboboxProps()}>
-//           <AutocompleteInput
-//             {...getInputProps({
-//               onFocus: openMenu,
-//               onClick: openMenu,
-//               ref: $ref || ref,
-//               // itemRef: ref,
-//             })}
-//             {...props}
-//           />
-//           {!!items.length && (
-//             <AutocompleteInputArrow
-//               {...getToggleButtonProps()}
-//               aria-label={"toggle menu"}
-//             />
-//           )}
-//           {loading && <InputProgress />}
-//         </AutocompleteInputWrap>
-//         <AutocompleteMenu {...getMenuProps()}>
-//           {isOpen &&
-//             items
-//               // .filter(item => !inputValue || item.includes(inputValue))
-//               .map(
-//                 (item, index) =>
-//                   item && (
-//                     <AutocompleteMenuItem
-//                       $active={highlightedIndex === index}
-//                       key={`${item.value}${index}`}
-//                       {...getItemProps({ item, index })}
-//                     >
-//                       {item.label}
-//                     </AutocompleteMenuItem>
-//                   )
-//               )}
-//         </AutocompleteMenu>
-//       </AutocompleteRoot>
-//     );
-//   }
-// );