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

package/Tabs/useTabs.js

@@ -1,66 +0,0 @@
-"use strict";
-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, {
-    useTabs: function() {
-        return useTabs;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _useControlled = /*#__PURE__*/ _interop_require_default._(require("@mui/utils/useControlled"));
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const useTabs = (props)=>{
-    const { value: valueProp, defaultValue, onChange, orientation, direction, selectionFollowsFocus } = props;
-    const [value, setValue] = (0, _useControlled.default)({
-        controlled: valueProp,
-        default: defaultValue,
-        name: "Tabs",
-        state: "value"
-    });
-    const idPrefix = (0, _react.useId)();
-    const onSelected = (0, _react.useCallback)((e, newValue)=>{
-        setValue(newValue);
-        if (onChange) {
-            onChange(e, newValue);
-        }
-    }, [
-        onChange,
-        setValue
-    ]);
-    const getRootProps = ()=>{
-        return {};
-    };
-    const tabsContextValue = (0, _react.useMemo)(()=>{
-        return {
-            idPrefix,
-            value,
-            onSelected,
-            orientation,
-            direction,
-            selectionFollowsFocus
-        };
-    }, [
-        idPrefix,
-        value,
-        onSelected,
-        orientation,
-        direction,
-        selectionFollowsFocus
-    ]);
-    return {
-        getRootProps,
-        tabsContextValue
-    };
-};
-const _default = useTabs;

package/Typography/CopyPasteVisible.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "CopyPasteVisible", {
-    enumerable: true,
-    get: function() {
-        return CopyPasteVisible;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const CopyPasteVisible = _styledcomponents.default.span`
-  color: transparent;
-  opacity: 0;
-  font-size: 0;
-`;

package/Typography/Native.js

@@ -1,90 +0,0 @@
-"use strict";
-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, {
-    p: function() {
-        return p;
-    },
-    h1: function() {
-        return h1;
-    },
-    h2: function() {
-        return h2;
-    },
-    h3: function() {
-        return h3;
-    },
-    h4: function() {
-        return h4;
-    },
-    P: function() {
-        return P;
-    },
-    H1: function() {
-        return H1;
-    },
-    H2: function() {
-        return H2;
-    },
-    H3: function() {
-        return H3;
-    },
-    H4: function() {
-        return H4;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _media = require("../styles/media");
-const p = `
-  margin: 0 0 1em 0;
-`;
-const h1 = `
-  margin: 0 0 10px 0;
-  font-size: 30px;
-  font-weight: 800;
-  line-height: var(--headingsLineHeight);
-  ${_media.min.md} {
-    font-size: 50px;
-  }
-`;
-const h2 = `
-  margin: 0 0 1em 0;
-  font-size: 24px;
-  font-weight: 800;
-  line-height: var(--headingsLineHeight);
-`;
-const h3 = `
-  margin: 0 0 1em 0;
-  font-size: 20px;
-  font-weight: 600;
-  line-height: var(--headingsLineHeight);
-`;
-const h4 = `
-  margin: 0 0 1em 0;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: var(--headingsLineHeight);
-`;
-const P = _styledcomponents.default.div`
-  ${p}
-`;
-const H1 = _styledcomponents.default.div`
-  ${h1}
-`;
-const H2 = _styledcomponents.default.div`
-  ${h2}
-`;
-const H3 = _styledcomponents.default.div`
-  ${h3}
-`;
-const H4 = _styledcomponents.default.div`
-  ${h4}
-`;

package/Typography/ReadMore.js

@@ -1,125 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "ReadMore", {
-    enumerable: true,
-    get: function() {
-        return ReadMore;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _jsxruntime = require("react/jsx-runtime");
-const _framermotion = require("framer-motion");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _hooks = require("../hooks");
-const Root = _styledcomponents.default.div``;
-const Content = _styledcomponents.default.div`
-  & p:first-child {
-    margin-top: 0;
-  }
-`;
-const BtnWrap = _styledcomponents.default.span`
-  display: flex;
-  justify-content: flex-end;
-  transition: transform 0.18s ease-in-out;
-  text-align: right;
-  transform: translateY(${(p)=>p.$expanded ? "0" : "-100%"});
-  opacity: ${(p)=>p.$expanded ? 0 : 1};
-`;
-const BtnFader = _styledcomponents.default.div`
-  width: 30%;
-  transition: transform 0.18s ease-in-out;
-  background: linear-gradient(45deg, transparent 50%, ${(p)=>p.$bg} 70%);
-`;
-const Btn = _styledcomponents.default.span`
-  padding: 0 10px 0 10px;
-  line-height: ${(p)=>p.$lineHeight ? p.$lineHeight : "inherit"};
-  background: var(--bodyBg);
-  color: var(--grey600);
-  white-space: nowrap;
-  font-size: ${(p)=>p.$fontSize}px;
-  cursor: pointer;
-`;
-const BtnIcon = _styledcomponents.default.span`
-  display: inline-block;
-  margin: 0 0 0 4px;
-  transition: transform 0.18s ease-in-out;
-  ${(p)=>p.$expanded ? "transform: rotate(180deg);" : ""};
-  font-size: ${(p)=>p.$fontSize}px;
-`;
-const ReadMore = ({ lines = 3, lineHeight = 1.6, fontSize = 14, bg = "var(--bodyBg)", expand = "Expand", collapse = "Collapse", ...props })=>{
-    const defaultMaxHeight = lines * (lineHeight * fontSize);
-    const [expanded, setExpanded] = (0, _react.useState)(false);
-    const [maxHeight, setMaxHeight] = (0, _react.useState)(defaultMaxHeight);
-    const [fullHeight, setFullHeight] = (0, _react.useState)(0);
-    const [exceeds, setExceeds] = (0, _react.useState)(false);
-    const content = (0, _react.useRef)(null);
-    const height = (0, _framermotion.useSpring)(defaultMaxHeight);
-    const styles = (0, _react.useMemo)(()=>exceeds ? {
-            height,
-            overflow: "hidden"
-        } : {}, [
-        exceeds,
-        height
-    ]);
-    const handleExpandClick = ()=>{
-        setExpanded((prevExpanded)=>!prevExpanded);
-    };
-    (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        if (content.current) {
-            const elementHeight = content.current.offsetHeight;
-            const newExceeds = elementHeight > maxHeight;
-            if (!newExceeds) {
-                setMaxHeight(elementHeight);
-            }
-            setExceeds(newExceeds);
-            setFullHeight(elementHeight);
-        }
-    }, [
-        content,
-        maxHeight
-    ]);
-    (0, _hooks.useIsomorphicLayoutEffect)(()=>{
-        height.set(expanded ? fullHeight : maxHeight);
-    }, [
-        expanded,
-        height,
-        fullHeight,
-        maxHeight
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Root, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.m.div, {
-                style: styles,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Content, {
-                    ref: content,
-                    ...props
-                })
-            }),
-            exceeds && /*#__PURE__*/ (0, _jsxruntime.jsxs)(BtnWrap, {
-                $expanded: expanded,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(BtnFader, {
-                        $bg: bg
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(Btn, {
-                        $fontSize: fontSize,
-                        $lineHeight: lineHeight,
-                        onClick: handleExpandClick,
-                        "aria-expanded": expanded,
-                        "aria-label": expanded ? collapse : expand,
-                        children: [
-                            expanded ? collapse : expand,
-                            /*#__PURE__*/ (0, _jsxruntime.jsx)(BtnIcon, {
-                                $expanded: expanded
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-};

package/Typography/TextLoop.js

@@ -1,108 +0,0 @@
-"use strict";
-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() + ""
-            });
-        }, delay);
-        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: /*#__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: {
-                            opacity: 0,
-                            y: direction === "down" ? "100%" : "-100%"
-                        },
-                        children: content.data
-                    }, content.key)
-                })
-            })
-        ]
-    });
-};
-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 ()=>clearTimeout(intervalId);
-    }, [
-        interval
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TextLoopPiece, {
-        ...props,
-        text: texts[index % texts.length]
-    });
-};

package/Typography/TypeStairs.js

@@ -1,71 +0,0 @@
-"use strict";
-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
-    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 = 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 {
-            rows.push(currow);
-            currow = word;
-            rowlen = word.length;
-        }
-    }
-    rows.push(currow);
-    return rows;
-}
-function renderRow(row, rowIndex, ref) {
-    const letters = row.split("");
-    let fontWeightIdx = 1;
-    // const 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 /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                style: {
-                    fontWeight
-                },
-                ref: ref,
-                children: letter
-            }, `letter-${rowIndex}-${letterIndex}`);
-        })
-    });
-}

package/Typography/index.js

@@ -1,10 +0,0 @@
-"use strict";
-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,33 +0,0 @@
-"use strict";
-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/helpers/classed.js

@@ -1,66 +0,0 @@
-"use strict";
-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, {
-    classed: function() {
-        return classed;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-function classed(component) {
-    // @ts-expect-error nevermind for now...
-    const type = component.type || component;
-    return function(strings, ...args) {
-        const WrappedComponent = /*#__PURE__*/ (0, _react.forwardRef)(function(props, ref) {
-            const argResolved = args.map((arg, index)=>{
-                let result = "";
-                if (typeof arg === "function") {
-                    result = arg(props);
-                } else if (typeof arg !== "undefined") {
-                    result = arg.toString();
-                }
-                return strings[index] + result;
-            }).join("");
-            const isNativeHtmlElement = typeof type === "string";
-            const propsToForward = isNativeHtmlElement ? {} : props;
-            if (isNativeHtmlElement) {
-                for(const key in props){
-                    // like styled-components `transient` props
-                    if (!key.startsWith("$")) {
-                        // FIXME: for react 18 we need: @ts-expect-error
-                        propsToForward[key] = props[key];
-                    }
-                }
-            }
-            // get the tagged function string outcome
-            let className = argResolved || strings[0];
-            // check if we need to clean it or not from the optional structure `< class="..."`
-            className = className.match(/class="([^"]*)/)?.[1] || className;
-            // add the custom classes from props
-            className += props?.className ? " " + props?.className : "";
-            return /*#__PURE__*/ (0, _react.createElement)(type, {
-                // ...props,
-                ...propsToForward,
-                // only add ot props if it is not an empty string
-                className: className || undefined,
-                // add ref to props
-                ref
-            });
-        });
-        // FIXME: not sure if this is needed
-        // WrappedComponent.displayName = type.toString();
-        return WrappedComponent; // as unknown as React.ReactElement<typeof props>;
-    };
-}
-const _default = classed;