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

package/Typography/TextLoop.mjs

@@ -1,82 +0,0 @@
-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__*/ 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(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))));
-};
-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__*/ React.createElement(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,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TypeStairs", {
-    enumerable: true,
-    get: function() {
-        return TypeStairs;
-    }
-});
-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);
-});
-/**
- * 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__*/ 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);
-    }));
-}

package/Typography/TypeStairs.mjs

@@ -1,53 +0,0 @@
-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);
-});
-/**
- * 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__*/ 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);
-    }));
-}

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

package/css/index.mjs

@@ -1,30 +0,0 @@
-export * from "../shared";
-// 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";
-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";

package/helpers/classed.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-type ClassedAugmentedProps<Props> = Props & {
-    className?: string;
-    ref?: React.Ref<any>;
-};
-type ClassedFinalProps<Props, Component> = Component extends React.ReactHTML ? React.HTMLProps<Component> & ClassedAugmentedProps<Props> : ClassedAugmentedProps<Props>;
-/**
- * This utility allows to extend a component a là `styled-components` but for
- * a className based styling solution like Tailwind,
- *
- * It also plays nicely with tailwind intellisense:
- * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
- *
- * For references about tagged functions:
- * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
- * - https://makersden.io/blog/reverse-engineering-styled-components
- * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
- * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
- *
- * Similar projects:
- * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
- *
- * Discussions and Q/A:
- * - https://stackoverflow.com/q/73055695/1938970
- */
-export declare function classed<Props, Component extends React.ElementType = any>(component: Component): (strings: TemplateStringsArray, ...args: string[] | ((props: Props) => string)[]) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ClassedFinalProps<Props, Component>> & React.RefAttributes<Component>>;
-export default classed;

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;

package/helpers/classed.mjs

@@ -1,65 +0,0 @@
-import React, { createElement, forwardRef } from "react";
-/**
- * This utility allows to extend a component a là `styled-components` but for
- * a className based styling solution like Tailwind,
- *
- * It also plays nicely with tailwind intellisense:
- * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
- *
- * For references about tagged functions:
- * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
- * - https://makersden.io/blog/reverse-engineering-styled-components
- * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
- * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
- *
- * Similar projects:
- * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
- *
- * Discussions and Q/A:
- * - https://stackoverflow.com/q/73055695/1938970
- */ export function classed(component) {
-    // @ts-expect-error nevermind for now...
-    const type = component.type || component;
-    return function(strings, ...args) {
-        const WrappedComponent = /*#__PURE__*/ 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__*/ 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>;
-    };
-}
-export default classed;

package/helpers/classed.stories.js

@@ -1,122 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
-"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, {
-    default: function() {
-        return _default;
-    },
-    Playground: function() {
-        return Playground;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-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"}`;
-/**
- * Adapted (removed `classnames` dependency) from:
- * @see https://daily.dev/blog/my-tailwind-css-utility-function-for-creating-reusable-react-components-typescript-support
- *
- * See also [classname-hoc](https://www.npmjs.com/package/classname-hoc)
- */ function classedOriginal(type, ...className) {
-    return function(props) {
-        return /*#__PURE__*/ (0, _react.createElement)(type, {
-            ...props,
-            className: [
-                props?.className || ""
-            ].concat(className).join(" ")
-        });
-    };
-}
-const ClassedOriginal = classedOriginal("div", "bg-slate-800");
-function classedBind(props) {
-    // @ts-expect-error no time now
-    const classNameImpl = props.className ? " " + props.className : "";
-    // return <this className={this.props.className + classNameImpl} {...props} />;
-    return /*#__PURE__*/ (0, _react.createElement)(this.props.as || this.type, {
-        ...props,
-        className: this.props.className + classNameImpl
-    }, // @ts-expect-error no time now
-    props.children);
-}
-const ClassedBind = classedBind.bind(/*#__PURE__*/ _react.default.createElement("div", {
-    as: "h2",
-    className: "bg-slate-800"
-}));
-function classedDynamic(ComponentFn) {
-    return function(propsImplementation) {
-        const { props, type } = ComponentFn(propsImplementation);
-        const classNameDefault = props.className ? " " + props.className : "";
-        return /*#__PURE__*/ (0, _react.createElement)(props.as || type, {
-            ...props,
-            ...propsImplementation,
-            className: propsImplementation?.className + classNameDefault
-        });
-    };
-}
-const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ _react.default.createElement("div", {
-        as: "h2",
-        className: "bg-slate-800"
-    }));
-const ClassedDynamicUsingProps = classedDynamic((p)=>{
-    return /*#__PURE__*/ _react.default.createElement("div", {
-        as: "h2",
-        className: `bg-slate-800 ${p?.test === "3" ? "py-3" : "px-3"}`
-    });
-});
-// type ExtractComponent<ComponentString extends string> =
-//   ComponentString extends `<${infer ComponentName} class="${infer ClassNames}`
-//     ? { name: ComponentName; className: ClassNames }
-//     : { error: "Cannot parse Component string" };
-// type ExtractedComponent<T extends string> = ExtractComponent<T>;
-function classedTaggedStatic(value = "") {
-    // @ts-expect-error we rely on correct implementation and assume it always matches
-    const componentName = value.match(/<(.*?)\s/)[1];
-    // @ts-expect-error we rely on correct implementation and assume it always matches
-    const classDefault = value.match(/class="(.+)/)[1];
-    return function(props) {
-        // @ts-expect-error no time now
-        const classCustom = props?.className ? " " + props?.className : "";
-        return /*#__PURE__*/ (0, _react.createElement)(componentName, {
-            ...props,
-            className: classDefault + classCustom
-        });
-    }; /*  as Component; */ 
-}
-const ClassedTaggedStatic = classedTaggedStatic(`<div class="bg-teal-400`);
-const _default = {
-    // component: KoineDialog,
-    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"));
-};
-const Playground = Template.bind({});
-Playground.args = {};