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

package/Typography/TextLoop.js

@@ -1,51 +1,108 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLoop = exports.TextLoopPiece = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var framer_motion_1 = require("framer-motion");
-var TextLoopPiece = function (_a) {
-    var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.direction, direction = _e === void 0 ? "up" : _e, _f = _a.inline, inline = _f === void 0 ? true : _f, _g = _a.noOverflow, noOverflow = _g === void 0 ? true : _g, _h = _a.delay, delay = _h === void 0 ? 400 : _h;
-    var placeholderRef = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)({ data: "", key: "" }), content = _j[0], setContent = _j[1];
-    var _k = (0, react_1.useState)(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
-    (0, react_1.useEffect)(function () {
-        var timeoutId = setTimeout(function () {
-            if (!placeholderRef.current)
-                return;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TextLoopPiece: function() {
+        return TextLoopPiece;
+    },
+    TextLoop: function() {
+        return TextLoop;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _framermotion = require("framer-motion");
+const _react = require("react");
+const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400 })=>{
+    const placeholderRef = (0, _react.useRef)(null);
+    const [content, setContent] = (0, _react.useState)({
+        data: "",
+        key: ""
+    });
+    const [width, setWidth] = (0, _react.useState)(inline ? 0 : "auto");
+    (0, _react.useEffect)(()=>{
+        const timeoutId = setTimeout(()=>{
+            if (!placeholderRef.current) return;
             placeholderRef.current.innerHTML = text + "";
-            if (inline)
-                setWidth(placeholderRef.current.offsetWidth);
-            setContent({ data: text + "", key: new Date() + "" });
+            if (inline) setWidth(placeholderRef.current.offsetWidth);
+            setContent({
+                data: text + "",
+                key: new Date() + ""
+            });
         }, delay);
-        return function () { return clearTimeout(timeoutId); };
-    }, [text, delay, inline]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: tslib_1.__assign(tslib_1.__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }), children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", { style: {
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        text,
+        delay,
+        inline
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: className,
+        style: {
+            ...style,
+            position: "relative",
+            display: inline ? "inline-block" : "block",
+            width,
+            whiteSpace: inline ? "nowrap" : "normal"
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                ref: placeholderRef,
+                style: {
+                    visibility: "hidden"
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                style: {
                     overflow: noOverflow ? "hidden" : "visible",
                     display: "block",
                     position: "absolute",
                     top: 0,
                     left: 0,
                     height: "100%",
-                    width: "100%",
-                }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { style: { position: "absolute" }, initial: {
+                    width: "100%"
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.AnimatePresence, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.m.div, {
+                        style: {
+                            position: "absolute"
+                        },
+                        initial: {
                             opacity: 0,
-                            y: direction === "down" ? "-100%" : "100%",
-                        }, animate: { opacity: 1, y: 0 }, exit: {
+                            y: direction === "down" ? "-100%" : "100%"
+                        },
+                        animate: {
+                            opacity: 1,
+                            y: 0
+                        },
+                        exit: {
                             opacity: 0,
-                            y: direction === "down" ? "100%" : "-100%",
-                        }, children: content.data }, content.key) }) })] }));
+                            y: direction === "down" ? "100%" : "-100%"
+                        },
+                        children: content.data
+                    }, content.key)
+                })
+            })
+        ]
+    });
 };
-exports.TextLoopPiece = TextLoopPiece;
-var TextLoop = function (_a) {
-    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = tslib_1.__rest(_a, ["texts", "interval"]);
-    var _c = (0, react_1.useState)(0), index = _c[0], setIndex = _c[1];
-    (0, react_1.useEffect)(function () {
-        var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval // every 3 seconds
+const TextLoop = ({ texts, interval = 3000, ...props })=>{
+    const [index, setIndex] = (0, _react.useState)(0);
+    (0, _react.useEffect)(()=>{
+        const intervalId = setInterval(()=>setIndex((index)=>index + 1), interval // every 3 seconds
         );
-        return function () { return clearTimeout(intervalId); };
-    }, [interval]);
-    return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, tslib_1.__assign({}, props, { text: texts[index % texts.length] }));
+        return ()=>clearTimeout(intervalId);
+    }, [
+        interval
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TextLoopPiece, {
+        ...props,
+        text: texts[index % texts.length]
+    });
 };
-exports.TextLoop = TextLoop;

package/Typography/TextLoop.mjs

@@ -1,46 +1,90 @@
-import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, m } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
-import { m, AnimatePresence } from "framer-motion";
-export var TextLoopPiece = function (_a) {
-    var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.direction, direction = _e === void 0 ? "up" : _e, _f = _a.inline, inline = _f === void 0 ? true : _f, _g = _a.noOverflow, noOverflow = _g === void 0 ? true : _g, _h = _a.delay, delay = _h === void 0 ? 400 : _h;
-    var placeholderRef = useRef(null);
-    var _j = useState({ data: "", key: "" }), content = _j[0], setContent = _j[1];
-    var _k = useState(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
-    useEffect(function () {
-        var timeoutId = setTimeout(function () {
-            if (!placeholderRef.current)
-                return;
+export const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400 })=>{
+    const placeholderRef = useRef(null);
+    const [content, setContent] = useState({
+        data: "",
+        key: ""
+    });
+    const [width, setWidth] = useState(inline ? 0 : "auto");
+    useEffect(()=>{
+        const timeoutId = setTimeout(()=>{
+            if (!placeholderRef.current) return;
             placeholderRef.current.innerHTML = text + "";
-            if (inline)
-                setWidth(placeholderRef.current.offsetWidth);
-            setContent({ data: text + "", key: new Date() + "" });
+            if (inline) setWidth(placeholderRef.current.offsetWidth);
+            setContent({
+                data: text + "",
+                key: new Date() + ""
+            });
         }, delay);
-        return function () { return clearTimeout(timeoutId); };
-    }, [text, delay, inline]);
-    return (_jsxs("div", { className: className, style: __assign(__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }), children: [_jsx("span", { ref: placeholderRef, style: { visibility: "hidden" } }), _jsx("div", { style: {
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        text,
+        delay,
+        inline
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: className,
+        style: {
+            ...style,
+            position: "relative",
+            display: inline ? "inline-block" : "block",
+            width,
+            whiteSpace: inline ? "nowrap" : "normal"
+        },
+        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: _jsx(AnimatePresence, { children: _jsx(m.div, { style: { position: "absolute" }, initial: {
+                    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: {
+                            y: direction === "down" ? "-100%" : "100%"
+                        },
+                        animate: {
+                            opacity: 1,
+                            y: 0
+                        },
+                        exit: {
                             opacity: 0,
-                            y: direction === "down" ? "100%" : "-100%",
-                        }, children: content.data }, content.key) }) })] }));
+                            y: direction === "down" ? "100%" : "-100%"
+                        },
+                        children: content.data
+                    }, content.key)
+                })
+            })
+        ]
+    });
 };
-export var TextLoop = function (_a) {
-    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = __rest(_a, ["texts", "interval"]);
-    var _c = useState(0), index = _c[0], setIndex = _c[1];
-    useEffect(function () {
-        var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval // every 3 seconds
+export const TextLoop = ({ texts, interval = 3000, ...props })=>{
+    const [index, setIndex] = useState(0);
+    useEffect(()=>{
+        const intervalId = setInterval(()=>setIndex((index)=>index + 1), interval // every 3 seconds
         );
-        return function () { return clearTimeout(intervalId); };
-    }, [interval]);
-    return _jsx(TextLoopPiece, __assign({}, props, { text: texts[index % texts.length] }));
+        return ()=>clearTimeout(intervalId);
+    }, [
+        interval
+    ]);
+    return /*#__PURE__*/ _jsx(TextLoopPiece, {
+        ...props,
+        text: texts[index % texts.length]
+    });
 };

package/Typography/TypeStairs.js

@@ -1,34 +1,45 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypeStairs = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-exports.TypeStairs = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, limit = _a.limit;
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TypeStairs", {
+    enumerable: true,
+    get: function() {
+        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
-    var rows = limit ? splitTextIntoRows(children, limit) : [children];
-    return rows.length > 1 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: rows.map(function (row, rowIndex) {
-            return ((0, jsx_runtime_1.jsxs)("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, "row-".concat(rowIndex)));
-        }) })) : (renderRow(rows[0], 0, ref));
+    const rows = limit ? splitTextIntoRows(children, limit) : [
+        children
+    ];
+    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
  * @see https://stackoverflow.com/a/25770787
- */
-function splitTextIntoRows(input, limit) {
-    if (input === void 0) { input = ""; }
-    if (limit === void 0) { limit = 18; }
-    var rows = [];
-    var arr = input.split(" ");
-    var currow = arr[0];
-    var rowlen = currow.length;
-    for (var i = 1; i < arr.length; i++) {
-        var word = arr[i];
+ */ function splitTextIntoRows(input = "", limit = 18) {
+    const rows = [];
+    const arr = input.split(" ");
+    let currow = arr[0];
+    let rowlen = currow.length;
+    for(let i = 1; i < arr.length; i++){
+        const word = arr[i];
         rowlen += word.length + 1;
         if (rowlen <= limit) {
             currow += " " + word;
-        }
-        else {
+        } else {
             rows.push(currow);
             currow = word;
             rowlen = word.length;
@@ -38,15 +49,23 @@ function splitTextIntoRows(input, limit) {
     return rows;
 }
 function renderRow(row, rowIndex, ref) {
-    var letters = row.split("");
-    var fontWeightIdx = 1;
+    const letters = row.split("");
+    let fontWeightIdx = 1;
     // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: letters.map(function (letter, letterIndex) {
-            var fontWeight = Math.min(fontWeightIdx * 100, 800);
+    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 ((0, jsx_runtime_1.jsx)("span", { style: { fontWeight: fontWeight }, ref: ref, children: letter }, "letter-".concat(rowIndex, "-").concat(letterIndex)));
-        }) }));
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                style: {
+                    fontWeight
+                },
+                ref: ref,
+                children: letter
+            }, `letter-${rowIndex}-${letterIndex}`);
+        })
+    });
 }

package/Typography/TypeStairs.mjs

@@ -1,31 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-export var TypeStairs = forwardRef(function (_a, ref) {
-    var children = _a.children, limit = _a.limit;
+export const TypeStairs = /*#__PURE__*/ forwardRef(({ children, limit }, ref)=>{
     // split in rows or just use one row if there is no limit
-    var rows = limit ? splitTextIntoRows(children, limit) : [children];
-    return rows.length > 1 ? (_jsx(_Fragment, { children: rows.map(function (row, rowIndex) {
-            return (_jsxs("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && _jsx("br", {})] }, "row-".concat(rowIndex)));
-        }) })) : (renderRow(rows[0], 0, ref));
+    const rows = limit ? splitTextIntoRows(children, limit) : [
+        children
+    ];
+    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
  * @see https://stackoverflow.com/a/25770787
- */
-function splitTextIntoRows(input, limit) {
-    if (input === void 0) { input = ""; }
-    if (limit === void 0) { limit = 18; }
-    var rows = [];
-    var arr = input.split(" ");
-    var currow = arr[0];
-    var rowlen = currow.length;
-    for (var i = 1; i < arr.length; i++) {
-        var word = arr[i];
+ */ function splitTextIntoRows(input = "", limit = 18) {
+    const rows = [];
+    const arr = input.split(" ");
+    let currow = arr[0];
+    let rowlen = currow.length;
+    for(let i = 1; i < arr.length; i++){
+        const word = arr[i];
         rowlen += word.length + 1;
         if (rowlen <= limit) {
             currow += " " + word;
-        }
-        else {
+        } else {
             rows.push(currow);
             currow = word;
             rowlen = word.length;
@@ -35,15 +39,23 @@ function splitTextIntoRows(input, limit) {
     return rows;
 }
 function renderRow(row, rowIndex, ref) {
-    var letters = row.split("");
-    var fontWeightIdx = 1;
+    const letters = row.split("");
+    let fontWeightIdx = 1;
     // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return (_jsx(_Fragment, { children: letters.map(function (letter, letterIndex) {
-            var fontWeight = Math.min(fontWeightIdx * 100, 800);
+    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 (_jsx("span", { style: { fontWeight: fontWeight }, ref: ref, children: letter }, "letter-".concat(rowIndex, "-").concat(letterIndex)));
-        }) }));
+            return /*#__PURE__*/ _jsx("span", {
+                style: {
+                    fontWeight
+                },
+                ref: ref,
+                children: letter
+            }, `letter-${rowIndex}-${letterIndex}`);
+        })
+    });
 }

package/Typography/index.js

@@ -1,8 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./CopyPasteVisible"), exports);
-tslib_1.__exportStar(require("./Native"), exports);
-tslib_1.__exportStar(require("./ReadMore"), exports);
-tslib_1.__exportStar(require("./TextLoop"), exports);
-tslib_1.__exportStar(require("./TypeStairs"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./CopyPasteVisible"), exports);
+_export_star._(require("./Native"), exports);
+_export_star._(require("./ReadMore"), exports);
+_export_star._(require("./TextLoop"), exports);
+_export_star._(require("./TypeStairs"), exports);

package/css/index.js

@@ -1,36 +1,33 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../shared"), exports);
-// export * from "../Alert";
-// export * from "../Animations";
-// export * from "../Autocomplete";
-// export * from "../Bg";
-// export * from "../Breadcrumbs";
-// export * from "../Buttons";
-// export * from "../Carousel";
-// export * from "../Collapsable";
-// export * from "../Debug";
-var bare_1 = require("../Dialog/css/bare");
-Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
-// 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "KoineDialog", {
+    enumerable: true,
+    get: function() {
+        return _bare.KoineDialog;
+    }
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("../shared"), exports);
+const _bare = require("../Dialog/css/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/css/index.mjs

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