@koine/react 2.0.0-beta.5 → 2.0.0-beta.51

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/Tabs/useTabs.mjs

@@ -1,46 +0,0 @@
-import useControlled from "@mui/utils/useControlled";
-import React, { useCallback, useId, useMemo } from "react";
-export const useTabs = (props)=>{
-    const { value: valueProp, defaultValue, onChange, orientation, direction, selectionFollowsFocus } = props;
-    const [value, setValue] = useControlled({
-        controlled: valueProp,
-        default: defaultValue,
-        name: "Tabs",
-        state: "value"
-    });
-    const idPrefix = useId();
-    const onSelected = useCallback((e, newValue)=>{
-        setValue(newValue);
-        if (onChange) {
-            onChange(e, newValue);
-        }
-    }, [
-        onChange,
-        setValue
-    ]);
-    const getRootProps = ()=>{
-        return {};
-    };
-    const tabsContextValue = useMemo(()=>{
-        return {
-            idPrefix,
-            value,
-            onSelected,
-            orientation,
-            direction,
-            selectionFollowsFocus
-        };
-    }, [
-        idPrefix,
-        value,
-        onSelected,
-        orientation,
-        direction,
-        selectionFollowsFocus
-    ]);
-    return {
-        getRootProps,
-        tabsContextValue
-    };
-};
-export default useTabs;

package/Typography/CopyPasteVisible.d.ts

@@ -1 +0,0 @@
-export declare const CopyPasteVisible: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,6 +0,0 @@
-import styled from "styled-components";
-export const CopyPasteVisible = styled.span`
-  color: transparent;
-  opacity: 0;
-  font-size: 0;
-`;

package/Typography/Native.d.ts

@@ -1,10 +0,0 @@
-export declare const p = "\n  margin: 0 0 1em 0;\n";
-export declare const h1: string;
-export declare const h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
-export declare const h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-export declare const h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
-export declare const P: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const H1: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const H2: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const H3: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const H4: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,47 +0,0 @@
-import styled from "styled-components";
-import { min } from "../styles/media";
-export const p = `
-  margin: 0 0 1em 0;
-`;
-export const h1 = `
-  margin: 0 0 10px 0;
-  font-size: 30px;
-  font-weight: 800;
-  line-height: var(--headingsLineHeight);
-  ${min.md} {
-    font-size: 50px;
-  }
-`;
-export const h2 = `
-  margin: 0 0 1em 0;
-  font-size: 24px;
-  font-weight: 800;
-  line-height: var(--headingsLineHeight);
-`;
-export const h3 = `
-  margin: 0 0 1em 0;
-  font-size: 20px;
-  font-weight: 600;
-  line-height: var(--headingsLineHeight);
-`;
-export const h4 = `
-  margin: 0 0 1em 0;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: var(--headingsLineHeight);
-`;
-export const P = styled.div`
-  ${p}
-`;
-export const H1 = styled.div`
-  ${h1}
-`;
-export const H2 = styled.div`
-  ${h2}
-`;
-export const H3 = styled.div`
-  ${h3}
-`;
-export const H4 = styled.div`
-  ${h4}
-`;

package/Typography/ReadMore.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-export type ReadMoreProps = React.ComponentPropsWithoutRef<"div"> & {
-    lines?: number;
-    lineHeight?: number;
-    fontSize?: number;
-    bg?: React.CSSProperties["background"];
-    /** @default "Expand" */
-    expand?: string;
-    /** @default "Collapse" */
-    collapse?: string;
-};
-export declare const ReadMore: ({ lines, lineHeight, fontSize, bg, expand, collapse, ...props }: ReadMoreProps) => import("react/jsx-runtime").JSX.Element;

package/Typography/ReadMore.js

@@ -1,110 +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 _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__*/ _react.default.createElement(Root, null, /*#__PURE__*/ _react.default.createElement(_framermotion.m.div, {
-        style: styles
-    }, /*#__PURE__*/ _react.default.createElement(Content, {
-        ref: content,
-        ...props
-    })), exceeds && /*#__PURE__*/ _react.default.createElement(BtnWrap, {
-        $expanded: expanded
-    }, /*#__PURE__*/ _react.default.createElement(BtnFader, {
-        $bg: bg
-    }), /*#__PURE__*/ _react.default.createElement(Btn, {
-        $fontSize: fontSize,
-        $lineHeight: lineHeight,
-        onClick: handleExpandClick,
-        "aria-expanded": expanded,
-        "aria-label": expanded ? collapse : expand
-    }, expanded ? collapse : expand, /*#__PURE__*/ _react.default.createElement(BtnIcon, {
-        $expanded: expanded
-    }))));
-};

package/Typography/ReadMore.mjs

@@ -1,99 +0,0 @@
-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__*/ React.createElement(Root, null, /*#__PURE__*/ React.createElement(m.div, {
-        style: styles
-    }, /*#__PURE__*/ React.createElement(Content, {
-        ref: content,
-        ...props
-    })), exceeds && /*#__PURE__*/ React.createElement(BtnWrap, {
-        $expanded: expanded
-    }, /*#__PURE__*/ React.createElement(BtnFader, {
-        $bg: bg
-    }), /*#__PURE__*/ React.createElement(Btn, {
-        $fontSize: fontSize,
-        $lineHeight: lineHeight,
-        onClick: handleExpandClick,
-        "aria-expanded": expanded,
-        "aria-label": expanded ? collapse : expand
-    }, expanded ? collapse : expand, /*#__PURE__*/ React.createElement(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,100 +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 _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__*/ React.createElement("div", {
-        className: className,
-        style: {
-            ...style,
-            position: "relative",
-            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(_framermotion.AnimatePresence, null, /*#__PURE__*/ React.createElement(_framermotion.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))));
-};
-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__*/ React.createElement(TextLoopPiece, {
-        ...props,
-        text: texts[index % texts.length]
-    });
-};