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

package/styles/spacing.mjs

@@ -1,26 +1,29 @@
-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);
+// import type { DefaultTheme } from "styled-components";
+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}`;
     if (!devices.length || devices[0] === "mobile") {
-        css += "@media(max-width: ".concat(breakpoints[DEVICES.mobile], "px){\n        ").concat(prop, ": ").concat(SPACES["mobile"][size] * factor, "px;\n      }");
-    }
-    else {
-        for (var index = 0; index < devices.length; index++) {
-            var device = devices[index];
+        css += `@media(max-width: ${breakpoints[DEVICES.mobile]}px){
+        ${prop}: ${SPACES["mobile"][size] * factor}px;
+      }`;
+    } else {
+        for(let index = 0; index < devices.length; index++){
+            const device = devices[index];
             if (device === "mobile") {
-                css += "".concat(prop, ": ").concat(SPACES[device][size] * factor, "px;");
-            }
-            else if (device === "tablet") {
-                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: ".concat(breakpoints[DEVICES.desktop], "px){\n          ").concat(prop, ": ").concat(SPACES["desktop"][size] * factor, "px;\n        }");
+                css += `${prop}: ${SPACES[device][size] * factor}px;`;
+            } else if (device === "tablet") {
+                css += `@media(min-width: ${breakpoints[DEVICES.tablet]}px){
+          ${prop}: ${SPACES["tablet"][size] * factor}px;
+        }`;
+            } else if (device === "desktop") {
+                css += `@media(min-width: ${breakpoints[DEVICES.desktop]}px){
+          ${prop}: ${SPACES["desktop"][size] * factor}px;
+        }`;
             }
         }
     }
@@ -28,8 +31,7 @@ function _spacing(theme, size, factor, property, direction, devices) {
 }
 export function spacing(size, factor, property, direction, devices) {
     if (direction === "vertical") {
-        return (_spacing(this, size, factor, property, "top", devices) +
-            _spacing(this, size, factor, property, "bottom", devices));
+        return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
     }
     return _spacing(this, size, factor, property, direction, devices);
 }
@@ -40,6 +42,5 @@ export function spacingBottom(size, factor, property, devices) {
     return _spacing(this, size, factor, property, "bottom", devices);
 }
 export function spacingVertical(size, factor, property, devices) {
-    return (_spacing(this, size, factor, property, "top", devices) +
-        _spacing(this, size, factor, property, "bottom", devices));
+    return _spacing(this, size, factor, property, "top", devices) + _spacing(this, size, factor, property, "bottom", devices);
 }

package/styles/styled.mjs

@@ -1,13 +1,26 @@
-export var colStretch = function (direction, 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  ");
+import React from "react";
+export const 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};
+    }
+  `;
 };
-/** @see https://caniuse.com/?search=inset */
-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 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;`;
 /**
  * @see import("@mui/utils").visuallyHidden https://github.com/mui-org/material-ui/blob/master/packages/mui-utils/src/visuallyHidden.ts
- */
-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);";
+ */ 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);`;

package/styles/theme--vanilla.mjs

@@ -4,8 +4,8 @@ import isBrowser from "@koine/utils/isBrowser";
 // import setCookie from "@koine/utils/setCookie";
 // import parseCookie from "@koine/utils/parseCookie";
 import useUpdateEffect from "../hooks/useUpdateEffect";
-export var THEME_KEY = "theme";
-export var THEME_DEFAULT = "light";
+export const THEME_KEY = "theme";
+export const THEME_DEFAULT = "light";
 // export const getInitialThemeFromRequest = (
 //   cookie?: string
 // ): ThemeVanillaValue => {
@@ -15,44 +15,51 @@ export var THEME_DEFAULT = "light";
 //   }
 //   return THEME_DEFAULT;
 // };
-export var getInitialThemeFromClient = function () {
+export const getInitialThemeFromClient = ()=>{
     if (typeof window !== "undefined" && window.localStorage) {
-        var storedPrefs = window.localStorage.getItem(THEME_KEY);
+        const storedPrefs = window.localStorage.getItem(THEME_KEY);
         if (typeof storedPrefs === "string") {
             return storedPrefs;
         }
-        var userMedia = window.matchMedia("(prefers-color-scheme: dark)");
+        const userMedia = window.matchMedia("(prefers-color-scheme: dark)");
         if (userMedia.matches) {
             return "dark";
         }
     }
     return THEME_DEFAULT;
 };
-export var ThemeVanillaContext = createContext({
+export const ThemeVanillaContext = /*#__PURE__*/ createContext({
     theme: "light",
-    setTheme: undefined,
+    setTheme: undefined
 });
-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) {
+export const ThemeVanillaProvider = ({ initialTheme, children })=>{
+    const [theme, setTheme] = useState(initialTheme);
+    const rawSetTheme = (rawTheme)=>{
         if (!rawTheme || !isBrowser) {
             return;
         }
-        var root = window.document.documentElement;
-        var isDark = rawTheme === "dark";
+        const root = window.document.documentElement;
+        const isDark = rawTheme === "dark";
         root.classList.remove(isDark ? "light" : "dark");
         root.classList.add(rawTheme);
         localStorage.setItem(THEME_KEY, rawTheme);
-        // setCookie(THEME_KEY, rawTheme);
+    // setCookie(THEME_KEY, rawTheme);
     };
-    useEffect(function () {
-        var theme = getInitialThemeFromClient();
+    useEffect(()=>{
+        const theme = getInitialThemeFromClient();
         setTheme(theme);
         rawSetTheme(theme);
     }, []);
-    useUpdateEffect(function () {
+    useUpdateEffect(()=>{
         rawSetTheme(theme);
-    }, [theme]);
-    return (_jsx(ThemeVanillaContext.Provider, { value: { theme: theme, setTheme: setTheme }, children: children }));
+    }, [
+        theme
+    ]);
+    return /*#__PURE__*/ _jsx(ThemeVanillaContext.Provider, {
+        value: {
+            theme,
+            setTheme
+        },
+        children: children
+    });
 };

package/styles/theme.mjs

@@ -1,12 +1,11 @@
-import { __assign } from "tslib";
 import { useTheme as _useTheme } from "styled-components";
-var DEFAULT_BREAKPOINTS = {
+const DEFAULT_BREAKPOINTS = {
     xs: 0,
     sm: 440,
     md: 768,
     lg: 1024,
     xl: 1368,
-    xxl: 1690,
+    xxl: 1690
 };
 /**
  * You can override the default breakpoints through the .env variable
@@ -18,24 +17,22 @@ var DEFAULT_BREAKPOINTS = {
  * ```.env
  * BREAKPOINTS=xs:0,sm:440,md:768,lg:1024,xl:1368,xxl:1690
  * ```
- */
-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;
-var themeDefault = {
+ */ export const breakpoints = process.env["BREAKPOINTS"] ? process.env["BREAKPOINTS"].split(",").reduce((map, pair)=>{
+    const [key, value] = pair.split(":");
+    map[key] = parseFloat(value);
+    return map;
+}, {}) : DEFAULT_BREAKPOINTS;
+const themeDefault = {
     maxWidth: breakpoints.xxl,
-    breakpoints: breakpoints,
+    breakpoints,
     devices: {
         mobile: "sm",
         tablet: "md",
-        desktop: "lg",
-    },
+        desktop: "lg"
+    }
 };
-export var createTheme = function (options) {
-    return (__assign(__assign({}, themeDefault), options));
-};
-export var useTheme = _useTheme;
+export const createTheme = (options)=>({
+        ...themeDefault,
+        ...options
+    });
+export const useTheme = _useTheme;

package/tw/index.mjs

@@ -8,24 +8,23 @@ export * from "../shared";
 // export * from "../Carousel";
 // export * from "../Collapsable";
 // export * from "../Debug";
-export { KoineDialog } from "../Dialog/tw/bare";
-// export * from "../Form";
-// 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";
+export { KoineDialog } from "../Dialog/tw/bare"; // export * from "../Form";
+ // 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/twm/index.mjs

@@ -8,24 +8,23 @@ export * from "../shared";
 // export * from "../Carousel";
 // export * from "../Collapsable";
 // export * from "../Debug";
-export { KoineDialog } from "../Dialog/tw/framer";
-// export * from "../Form";
-// 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";
+export { KoineDialog } from "../Dialog/tw/framer"; // export * from "../Form";
+ // 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/types.mjs

@@ -1 +1 @@
-export {};
+export { };

package/typings.d.ts

@@ -1,4 +1,5 @@
 import "styled-components";
+
 // import type {} from "styled-components/cssprop"; // for `css` prop
 
 /**

package/Alert/Alert.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Alert = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var AlertRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  font-size: 12px;\n  ", "\n"], ["\n  font-size: 12px;\n  ", "\n"])), function (p) { return (p.$danger ? "color: var(--danger)" : ""); });
-var AlertInner = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  padding: 1em;\n  background-color: rgba(0, 0, 0, 0.05);\n  /* border: 1px solid var(--grey700); */\n  /* background: pink; */\n  /* color: red; */\n"], ["\n  padding: 1em;\n  background-color: rgba(0, 0, 0, 0.05);\n  /* border: 1px solid var(--grey700); */\n  /* background: pink; */\n  /* color: red; */\n"])));
-var Alert = function (_a) {
-    var $danger = _a.$danger, children = _a.children, props = tslib_1.__rest(_a, ["$danger", "children"]);
-    return ((0, jsx_runtime_1.jsx)(AlertRoot, tslib_1.__assign({ "$danger": $danger }, props, { children: (0, jsx_runtime_1.jsx)(AlertInner, { children: children }) })));
-};
-exports.Alert = Alert;
-var templateObject_1, templateObject_2;

package/Alert/index.js

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

package/Alert/package.json

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

package/Animations/Reveal.js

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

package/Animations/Underline.js

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

package/Animations/index.js

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

package/Animations/package.json

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

package/Animations/useReveal.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReveal = void 0;
-var react_1 = require("react");
-function useReveal(_a) {
-    var _b = _a.direction, direction = _b === void 0 ? "left" : _b, _c = _a.offsetStartY, offsetStartY = _c === void 0 ? -2 : _c, _d = _a.offsetEndY, offsetEndY = _d === void 0 ? 0 : _d, _e = _a.offsetStartX, offsetStartX = _e === void 0 ? "all" : _e;
-    var ref = (0, react_1.useRef)(null);
-    var _f = (0, react_1.useState)(0), startY = _f[0], setStartY = _f[1];
-    var _g = (0, react_1.useState)(0), endY = _g[0], setEndY = _g[1];
-    var _h = (0, react_1.useState)(0), startX = _h[0], setStartX = _h[1];
-    (0, react_1.useEffect)(function () {
-        if (!ref.current) {
-            return;
-        }
-        var rect = ref.current.getBoundingClientRect();
-        // scroll position from top of the window
-        var scrollTop = window.scrollY || document.documentElement.scrollTop;
-        var 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
-        var elementTop = rect.top;
-        var distanceTop = elementTop + scrollTop;
-        var offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
-        var 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
-        var startY = (distanceTop + offsetTop) / document.body.clientHeight;
-        // same for the end, we just add the given element height to the first value
-        var endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
-        var 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: ref, startY: startY, endY: endY, startX: 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);
-// }