@koine/react 2.0.0-beta.4 → 2.0.0-beta.6

package/Typography/TextLoop.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatePresence, m } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
 export const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400 })=>{
@@ -23,7 +24,7 @@ export const TextLoopPiece = ({ text = "", style = {}, className = "", direction
         delay,
         inline
     ]);
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: className,
         style: {
             ...style,
@@ -31,40 +32,47 @@ export const TextLoopPiece = ({ text = "", style = {}, className = "", direction
             display: inline ? "inline-block" : "block",
             width,
             whiteSpace: inline ? "nowrap" : "normal"
-        }
-    }, /*#__PURE__*/ React.createElement("span", {
-        ref: placeholderRef,
-        style: {
-            visibility: "hidden"
-        }
-    }), /*#__PURE__*/ React.createElement("div", {
-        style: {
-            overflow: noOverflow ? "hidden" : "visible",
-            display: "block",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            height: "100%",
-            width: "100%"
-        }
-    }, /*#__PURE__*/ React.createElement(AnimatePresence, null, /*#__PURE__*/ React.createElement(m.div, {
-        key: content.key,
-        style: {
-            position: "absolute"
         },
-        initial: {
-            opacity: 0,
-            y: direction === "down" ? "-100%" : "100%"
-        },
-        animate: {
-            opacity: 1,
-            y: 0
-        },
-        exit: {
-            opacity: 0,
-            y: direction === "down" ? "100%" : "-100%"
-        }
-    }, content.data))));
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                ref: placeholderRef,
+                style: {
+                    visibility: "hidden"
+                }
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    overflow: noOverflow ? "hidden" : "visible",
+                    display: "block",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    height: "100%",
+                    width: "100%"
+                },
+                children: /*#__PURE__*/ _jsx(AnimatePresence, {
+                    children: /*#__PURE__*/ _jsx(m.div, {
+                        style: {
+                            position: "absolute"
+                        },
+                        initial: {
+                            opacity: 0,
+                            y: direction === "down" ? "-100%" : "100%"
+                        },
+                        animate: {
+                            opacity: 1,
+                            y: 0
+                        },
+                        exit: {
+                            opacity: 0,
+                            y: direction === "down" ? "100%" : "-100%"
+                        },
+                        children: content.data
+                    }, content.key)
+                })
+            })
+        ]
+    });
 };
 export const TextLoop = ({ texts, interval = 3000, ...props })=>{
     const [index, setIndex] = useState(0);
@@ -75,7 +83,7 @@ export const TextLoop = ({ texts, interval = 3000, ...props })=>{
     }, [
         interval
     ]);
-    return /*#__PURE__*/ React.createElement(TextLoopPiece, {
+    return /*#__PURE__*/ _jsx(TextLoopPiece, {
         ...props,
         text: texts[index % texts.length]
     });

package/Typography/TypeStairs.js

@@ -8,17 +8,23 @@ Object.defineProperty(exports, "TypeStairs", {
         return TypeStairs;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const TypeStairs = /*#__PURE__*/ (0, _react.forwardRef)(({ children, limit }, ref)=>{
     // split in rows or just use one row if there is no limit
     const rows = limit ? splitTextIntoRows(children, limit) : [
         children
     ];
-    return rows.length > 1 ? /*#__PURE__*/ React.createElement(React.Fragment, null, rows.map((row, rowIndex)=>{
-        return /*#__PURE__*/ React.createElement("span", {
-            key: `row-${rowIndex}`
-        }, renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && /*#__PURE__*/ React.createElement("br", null));
-    })) : renderRow(rows[0], 0, ref);
+    return rows.length > 1 ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: rows.map((row, rowIndex)=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                children: [
+                    renderRow(row, rowIndex, ref),
+                    rowIndex !== rows.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)("br", {})
+                ]
+            }, `row-${rowIndex}`);
+        })
+    }) : renderRow(rows[0], 0, ref);
 });
 /**
  * every number chars find a space and break, then restart the gradient weight
@@ -46,18 +52,20 @@ function renderRow(row, rowIndex, ref) {
     const letters = row.split("");
     let fontWeightIdx = 1;
     // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, letters.map((letter, letterIndex)=>{
-        const fontWeight = Math.min(fontWeightIdx * 100, 800);
-        // don't waste a fontWeight for a white space
-        if (letter !== " ") {
-            fontWeightIdx++;
-        }
-        return /*#__PURE__*/ React.createElement("span", {
-            key: `letter-${rowIndex}-${letterIndex}`,
-            style: {
-                fontWeight
-            },
-            ref: ref
-        }, letter);
-    }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: letters.map((letter, letterIndex)=>{
+            const fontWeight = Math.min(fontWeightIdx * 100, 800);
+            // don't waste a fontWeight for a white space
+            if (letter !== " ") {
+                fontWeightIdx++;
+            }
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                style: {
+                    fontWeight
+                },
+                ref: ref,
+                children: letter
+            }, `letter-${rowIndex}-${letterIndex}`);
+        })
+    });
 }

package/Typography/TypeStairs.mjs

@@ -1,14 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 export const TypeStairs = /*#__PURE__*/ forwardRef(({ children, limit }, ref)=>{
     // split in rows or just use one row if there is no limit
     const rows = limit ? splitTextIntoRows(children, limit) : [
         children
     ];
-    return rows.length > 1 ? /*#__PURE__*/ React.createElement(React.Fragment, null, rows.map((row, rowIndex)=>{
-        return /*#__PURE__*/ React.createElement("span", {
-            key: `row-${rowIndex}`
-        }, renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && /*#__PURE__*/ React.createElement("br", null));
-    })) : renderRow(rows[0], 0, ref);
+    return rows.length > 1 ? /*#__PURE__*/ _jsx(_Fragment, {
+        children: rows.map((row, rowIndex)=>{
+            return /*#__PURE__*/ _jsxs("span", {
+                children: [
+                    renderRow(row, rowIndex, ref),
+                    rowIndex !== rows.length - 1 && /*#__PURE__*/ _jsx("br", {})
+                ]
+            }, `row-${rowIndex}`);
+        })
+    }) : renderRow(rows[0], 0, ref);
 });
 /**
  * every number chars find a space and break, then restart the gradient weight
@@ -36,18 +42,20 @@ function renderRow(row, rowIndex, ref) {
     const letters = row.split("");
     let fontWeightIdx = 1;
     // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, letters.map((letter, letterIndex)=>{
-        const fontWeight = Math.min(fontWeightIdx * 100, 800);
-        // don't waste a fontWeight for a white space
-        if (letter !== " ") {
-            fontWeightIdx++;
-        }
-        return /*#__PURE__*/ React.createElement("span", {
-            key: `letter-${rowIndex}-${letterIndex}`,
-            style: {
-                fontWeight
-            },
-            ref: ref
-        }, letter);
-    }));
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: letters.map((letter, letterIndex)=>{
+            const fontWeight = Math.min(fontWeightIdx * 100, 800);
+            // don't waste a fontWeight for a white space
+            if (letter !== " ") {
+                fontWeightIdx++;
+            }
+            return /*#__PURE__*/ _jsx("span", {
+                style: {
+                    fontWeight
+                },
+                ref: ref,
+                children: letter
+            }, `letter-${rowIndex}-${letterIndex}`);
+        })
+    });
 }

package/helpers/classed.stories.js

@@ -19,6 +19,7 @@ _export(exports, {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _classed = require("./classed");
 const Classed = (0, _classed.classed)("div")`< class="bg-red-400 ${(p)=>p.test === "0a" ? "py-3" : "px-3"}`;
@@ -48,7 +49,7 @@ function classedBind(props) {
     }, // @ts-expect-error no time now
     props.children);
 }
-const ClassedBind = classedBind.bind(/*#__PURE__*/ _react.default.createElement("div", {
+const ClassedBind = classedBind.bind(/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
     as: "h2",
     className: "bg-slate-800"
 }));
@@ -63,12 +64,12 @@ function classedDynamic(ComponentFn) {
         });
     };
 }
-const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ _react.default.createElement("div", {
+const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         as: "h2",
         className: "bg-slate-800"
     }));
 const ClassedDynamicUsingProps = classedDynamic((p)=>{
-    return /*#__PURE__*/ _react.default.createElement("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
         as: "h2",
         className: `bg-slate-800 ${p?.test === "3" ? "py-3" : "px-3"}`
     });
@@ -98,25 +99,42 @@ const _default = {
     title: "Helpers/classed"
 };
 const Template = (args)=>{
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(Classed, {
-        className: "text-yellow-200",
-        test: "0a"
-    }, "Classed taller"), /*#__PURE__*/ _react.default.createElement(Classed, {
-        className: "text-yellow-200",
-        test: "0b"
-    }, "Classed wider"), /*#__PURE__*/ _react.default.createElement(ClassedOriginal, {
-        className: "text-white"
-    }, "ClassedOriginal"), /*#__PURE__*/ _react.default.createElement(ClassedBind, {
-        className: "text-white"
-    }, "ClassedBind"), /*#__PURE__*/ _react.default.createElement(ClassedDynamicIgnoringProps, {
-        className: "text-gray-300",
-        test: "2"
-    }, "ClassedDynamicIgnoringProps"), /*#__PURE__*/ _react.default.createElement(ClassedDynamicUsingProps, {
-        className: "text-gray-600",
-        test: "3"
-    }, "ClassedDynamicUsingProps"), /*#__PURE__*/ _react.default.createElement(ClassedTaggedStatic, {
-        className: "text-gray-600"
-    }, "ClassedTaggedStatic"));
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Classed, {
+                className: "text-yellow-200",
+                test: "0a",
+                children: "Classed taller"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(Classed, {
+                className: "text-yellow-200",
+                test: "0b",
+                children: "Classed wider"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedOriginal, {
+                className: "text-white",
+                children: "ClassedOriginal"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedBind, {
+                className: "text-white",
+                children: "ClassedBind"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedDynamicIgnoringProps, {
+                className: "text-gray-300",
+                test: "2",
+                children: "ClassedDynamicIgnoringProps"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedDynamicUsingProps, {
+                className: "text-gray-600",
+                test: "3",
+                children: "ClassedDynamicUsingProps"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ClassedTaggedStatic, {
+                className: "text-gray-600",
+                children: "ClassedTaggedStatic"
+            })
+        ]
+    });
 };
 const Playground = Template.bind({});
 Playground.args = {};

package/helpers/classed.stories.mjs

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { createElement } from "react";
 import { classed } from "./classed";
 const Classed = classed("div")`< class="bg-red-400 ${(p)=>p.test === "0a" ? "py-3" : "px-3"}`;
@@ -29,7 +30,7 @@ function classedBind(props) {
     }, // @ts-expect-error no time now
     props.children);
 }
-const ClassedBind = classedBind.bind(/*#__PURE__*/ React.createElement("div", {
+const ClassedBind = classedBind.bind(/*#__PURE__*/ _jsx("div", {
     as: "h2",
     className: "bg-slate-800"
 }));
@@ -44,12 +45,12 @@ function classedDynamic(ComponentFn) {
         });
     };
 }
-const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ React.createElement("div", {
+const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ _jsx("div", {
         as: "h2",
         className: "bg-slate-800"
     }));
 const ClassedDynamicUsingProps = classedDynamic((p)=>{
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsx("div", {
         as: "h2",
         className: `bg-slate-800 ${p?.test === "3" ? "py-3" : "px-3"}`
     });
@@ -79,25 +80,42 @@ export default {
     title: "Helpers/classed"
 };
 const Template = (args)=>{
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Classed, {
-        className: "text-yellow-200",
-        test: "0a"
-    }, "Classed taller"), /*#__PURE__*/ React.createElement(Classed, {
-        className: "text-yellow-200",
-        test: "0b"
-    }, "Classed wider"), /*#__PURE__*/ React.createElement(ClassedOriginal, {
-        className: "text-white"
-    }, "ClassedOriginal"), /*#__PURE__*/ React.createElement(ClassedBind, {
-        className: "text-white"
-    }, "ClassedBind"), /*#__PURE__*/ React.createElement(ClassedDynamicIgnoringProps, {
-        className: "text-gray-300",
-        test: "2"
-    }, "ClassedDynamicIgnoringProps"), /*#__PURE__*/ React.createElement(ClassedDynamicUsingProps, {
-        className: "text-gray-600",
-        test: "3"
-    }, "ClassedDynamicUsingProps"), /*#__PURE__*/ React.createElement(ClassedTaggedStatic, {
-        className: "text-gray-600"
-    }, "ClassedTaggedStatic"));
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Classed, {
+                className: "text-yellow-200",
+                test: "0a",
+                children: "Classed taller"
+            }),
+            /*#__PURE__*/ _jsx(Classed, {
+                className: "text-yellow-200",
+                test: "0b",
+                children: "Classed wider"
+            }),
+            /*#__PURE__*/ _jsx(ClassedOriginal, {
+                className: "text-white",
+                children: "ClassedOriginal"
+            }),
+            /*#__PURE__*/ _jsx(ClassedBind, {
+                className: "text-white",
+                children: "ClassedBind"
+            }),
+            /*#__PURE__*/ _jsx(ClassedDynamicIgnoringProps, {
+                className: "text-gray-300",
+                test: "2",
+                children: "ClassedDynamicIgnoringProps"
+            }),
+            /*#__PURE__*/ _jsx(ClassedDynamicUsingProps, {
+                className: "text-gray-600",
+                test: "3",
+                children: "ClassedDynamicUsingProps"
+            }),
+            /*#__PURE__*/ _jsx(ClassedTaggedStatic, {
+                className: "text-gray-600",
+                children: "ClassedTaggedStatic"
+            })
+        ]
+    });
 };
 export const Playground = Template.bind({});
 Playground.args = {};

package/m/MotionProvider.js

@@ -16,10 +16,12 @@ _export(exports, {
         return _default;
     }
 });
+const _jsxruntime = require("react/jsx-runtime");
 const _framermotion = require("framer-motion");
 const MotionProvider = ({ features, children })=>{
-    return /*#__PURE__*/ React.createElement(_framermotion.LazyMotion, {
-        features: features
-    }, children);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.LazyMotion, {
+        features: features,
+        children: children
+    });
 };
 const _default = MotionProvider;

package/m/MotionProvider.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { LazyMotion } from "framer-motion";
 /**
  * `<LazyMotion />` provider wrapper from `framer-motion`
@@ -31,8 +32,9 @@ import { LazyMotion } from "framer-motion";
  * </MotionProvider>
  * ```
  */ export const MotionProvider = ({ features, children })=>{
-    return /*#__PURE__*/ React.createElement(LazyMotion, {
-        features: features
-    }, children);
+    return /*#__PURE__*/ _jsx(LazyMotion, {
+        features: features,
+        children: children
+    });
 };
 export default MotionProvider;

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@koine/react",
   "sideEffects": false,
+  "dependencies": {
+    "@koine/dom": "2.0.0-beta.6",
+    "@koine/utils": "2.0.0-beta.6"
+  },
   "peerDependenciesMeta": {
     "@hookform/resolvers": {
       "optional": true
@@ -45,33 +49,9 @@
       "optional": true
     }
   },
-  "dependencies": {
-    "@kuus/yup": "1.0.0-beta.7",
-    "@mui/base": "5.0.0-beta.4",
-    "@mui/utils": "^5.13.6",
-    "@tiptap/react": "2.0.3",
-    "@tiptap/starter-kit": "2.0.3",
-    "clsx": "^1.2.1",
-    "date-fns": "^2.30.0",
-    "framer-motion": "^10.12.17",
-    "react": "^18.2.0",
-    "react-hook-form": "^7.45.0",
-    "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.12.0"
-  },
   "peerDependencies": {},
   "module": "./index.mjs",
   "main": "./index.js",
-  "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.js"
-    }
-  },
   "types": "./index.d.ts",
-  "version": "2.0.0-beta.4"
+  "version": "2.0.0-beta.6"
 }

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/theme--vanilla.js

@@ -26,6 +26,7 @@ _export(exports, {
     }
 });
 const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _isBrowser = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isBrowser"));
 const _useUpdateEffect = /*#__PURE__*/ _interop_require_default._(require("../hooks/useUpdateEffect"));
@@ -71,10 +72,11 @@ const ThemeVanillaProvider = ({ initialTheme, children })=>{
     }, [
         theme
     ]);
-    return /*#__PURE__*/ React.createElement(ThemeVanillaContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ThemeVanillaContext.Provider, {
         value: {
             theme,
             setTheme
-        }
-    }, children);
+        },
+        children: children
+    });
 };

package/styles/theme--vanilla.mjs

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useEffect, useState } from "react";
 import isBrowser from "@koine/utils/isBrowser";
 // import setCookie from "@koine/utils/setCookie";
@@ -54,10 +55,11 @@ export const ThemeVanillaProvider = ({ initialTheme, children })=>{
     }, [
         theme
     ]);
-    return /*#__PURE__*/ React.createElement(ThemeVanillaContext.Provider, {
+    return /*#__PURE__*/ _jsx(ThemeVanillaContext.Provider, {
         value: {
             theme,
             setTheme
-        }
-    }, children);
+        },
+        children: children
+    });
 };