@koine/react 2.0.0-beta.7 → 2.0.0-beta.71

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/ReadMore.mjs

@@ -1,114 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { m, useSpring } from "framer-motion";
-import React, { useMemo, useRef, useState } from "react";
-import styled from "styled-components";
-// import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
-import { useIsomorphicLayoutEffect } from "../hooks";
-const Root = styled.div``;
-const Content = styled.div`
-  & p:first-child {
-    margin-top: 0;
-  }
-`;
-const BtnWrap = styled.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 = styled.div`
-  width: 30%;
-  transition: transform 0.18s ease-in-out;
-  background: linear-gradient(45deg, transparent 50%, ${(p)=>p.$bg} 70%);
-`;
-const Btn = styled.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 = styled.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;
-`;
-export 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] = useState(false);
-    const [maxHeight, setMaxHeight] = useState(defaultMaxHeight);
-    const [fullHeight, setFullHeight] = useState(0);
-    const [exceeds, setExceeds] = useState(false);
-    const content = useRef(null);
-    const height = useSpring(defaultMaxHeight);
-    const styles = useMemo(()=>exceeds ? {
-            height,
-            overflow: "hidden"
-        } : {}, [
-        exceeds,
-        height
-    ]);
-    const handleExpandClick = ()=>{
-        setExpanded((prevExpanded)=>!prevExpanded);
-    };
-    useIsomorphicLayoutEffect(()=>{
-        if (content.current) {
-            const elementHeight = content.current.offsetHeight;
-            const newExceeds = elementHeight > maxHeight;
-            if (!newExceeds) {
-                setMaxHeight(elementHeight);
-            }
-            setExceeds(newExceeds);
-            setFullHeight(elementHeight);
-        }
-    }, [
-        content,
-        maxHeight
-    ]);
-    useIsomorphicLayoutEffect(()=>{
-        height.set(expanded ? fullHeight : maxHeight);
-    }, [
-        expanded,
-        height,
-        fullHeight,
-        maxHeight
-    ]);
-    return /*#__PURE__*/ _jsxs(Root, {
-        children: [
-            /*#__PURE__*/ _jsx(m.div, {
-                style: styles,
-                children: /*#__PURE__*/ _jsx(Content, {
-                    ref: content,
-                    ...props
-                })
-            }),
-            exceeds && /*#__PURE__*/ _jsxs(BtnWrap, {
-                $expanded: expanded,
-                children: [
-                    /*#__PURE__*/ _jsx(BtnFader, {
-                        $bg: bg
-                    }),
-                    /*#__PURE__*/ _jsxs(Btn, {
-                        $fontSize: fontSize,
-                        $lineHeight: lineHeight,
-                        onClick: handleExpandClick,
-                        "aria-expanded": expanded,
-                        "aria-label": expanded ? collapse : expand,
-                        children: [
-                            expanded ? collapse : expand,
-                            /*#__PURE__*/ _jsx(BtnIcon, {
-                                $expanded: expanded
-                            })
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
-};

package/Typography/TextLoop.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-export type TextLoopPieceProps = React.PropsWithChildren<{
-    text: string | number;
-    direction?: "up" | "down";
-    inline?: boolean;
-    noOverflow?: boolean;
-    delay?: number;
-    className?: string;
-    style?: React.CSSProperties;
-}>;
-export declare const TextLoopPiece: ({ text, style, className, direction, inline, noOverflow, delay, }: TextLoopPieceProps) => import("react/jsx-runtime").JSX.Element;
-export type TextLoopPrpps = Omit<TextLoopPieceProps, "text"> & {
-    texts: string[];
-    interval?: number;
-};
-export declare const TextLoop: ({ texts, interval, ...props }: TextLoopPrpps) => import("react/jsx-runtime").JSX.Element;

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/TextLoop.mjs

@@ -1,90 +0,0 @@
-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 })=>{
-    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() + ""
-            });
-        }, delay);
-        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: /*#__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);
-    useEffect(()=>{
-        const intervalId = setInterval(()=>setIndex((index)=>index + 1), interval // every 3 seconds
-        );
-        return ()=>clearTimeout(intervalId);
-    }, [
-        interval
-    ]);
-    return /*#__PURE__*/ _jsx(TextLoopPiece, {
-        ...props,
-        text: texts[index % texts.length]
-    });
-};

package/Typography/TypeStairs.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export type TypeStairsProps = {
-    children: string;
-    limit?: number;
-};
-export declare const TypeStairs: import("react").ForwardRefExoticComponent<TypeStairsProps & import("react").RefAttributes<unknown>>;

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/TypeStairs.mjs

@@ -1,61 +0,0 @@
-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__*/ _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 = 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__*/ _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/Typography/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./CopyPasteVisible";
-export * from "./Native";
-export * from "./ReadMore";
-export * from "./TextLoop";
-export * from "./TypeStairs";

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/Typography/index.mjs

@@ -1,5 +0,0 @@
-export * from "./CopyPasteVisible";
-export * from "./Native";
-export * from "./ReadMore";
-export * from "./TextLoop";
-export * from "./TypeStairs";

package/css/index.d.ts

@@ -1,2 +0,0 @@
-export * from "../shared";
-export { KoineDialog } from "../Dialog/css/bare";

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";