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

package/Typography/ReadMore.mjs

@@ -1,43 +1,114 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useMemo } from "react";
-import styled from "styled-components";
 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";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & p:first-child {\n    margin-top: 0;\n  }\n"], ["\n  & p:first-child {\n    margin-top: 0;\n  }\n"])));
-var BtnWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  transition: transform 0.18s ease-in-out;\n  text-align: right;\n  transform: translateY(", ");\n  opacity: ", ";\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  transition: transform 0.18s ease-in-out;\n  text-align: right;\n  transform: translateY(", ");\n  opacity: ", ";\n"])), function (p) { return (p.$expanded ? "0" : "-100%"); }, function (p) { return (p.$expanded ? 0 : 1); });
-var BtnFader = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 30%;\n  transition: transform 0.18s ease-in-out;\n  background: linear-gradient(45deg, transparent 50%, ", " 70%);\n"], ["\n  width: 30%;\n  transition: transform 0.18s ease-in-out;\n  background: linear-gradient(45deg, transparent 50%, ", " 70%);\n"])), function (p) { return p.$bg; });
-var Btn = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 0 10px 0 10px;\n  line-height: ", ";\n  background: var(--bodyBg);\n  color: var(--grey600);\n  white-space: nowrap;\n  font-size: ", "px;\n  cursor: pointer;\n"], ["\n  padding: 0 10px 0 10px;\n  line-height: ", ";\n  background: var(--bodyBg);\n  color: var(--grey600);\n  white-space: nowrap;\n  font-size: ", "px;\n  cursor: pointer;\n"])), function (p) { return (p.$lineHeight ? p.$lineHeight : "inherit"); }, function (p) { return p.$fontSize; });
-var BtnIcon = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-block;\n  margin: 0 0 0 4px;\n  transition: transform 0.18s ease-in-out;\n  ", ";\n  font-size: ", "px;\n"], ["\n  display: inline-block;\n  margin: 0 0 0 4px;\n  transition: transform 0.18s ease-in-out;\n  ", ";\n  font-size: ", "px;\n"])), function (p) { return (p.$expanded ? "transform: rotate(180deg);" : ""); }, function (p) { return p.$fontSize; });
-export var ReadMore = function (_a) {
-    var _b = _a.lines, lines = _b === void 0 ? 3 : _b, _c = _a.lineHeight, lineHeight = _c === void 0 ? 1.6 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 14 : _d, _e = _a.bg, bg = _e === void 0 ? "var(--bodyBg)" : _e, _f = _a.expand, expand = _f === void 0 ? "Expand" : _f, _g = _a.collapse, collapse = _g === void 0 ? "Collapse" : _g, props = __rest(_a, ["lines", "lineHeight", "fontSize", "bg", "expand", "collapse"]);
-    var defaultMaxHeight = lines * (lineHeight * fontSize);
-    var _h = useState(false), expanded = _h[0], setExpanded = _h[1];
-    var _j = useState(defaultMaxHeight), maxHeight = _j[0], setMaxHeight = _j[1];
-    var _k = useState(0), fullHeight = _k[0], setFullHeight = _k[1];
-    var _l = useState(false), exceeds = _l[0], setExceeds = _l[1];
-    var content = useRef(null);
-    var height = useSpring(defaultMaxHeight);
-    var styles = useMemo(function () { return (exceeds ? { height: height, overflow: "hidden" } : {}); }, [exceeds, height]);
-    var handleExpandClick = function () {
-        setExpanded(function (prevExpanded) { return !prevExpanded; });
+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(function () {
+    useIsomorphicLayoutEffect(()=>{
         if (content.current) {
-            var elementHeight = content.current.offsetHeight;
-            var newExceeds = elementHeight > maxHeight;
+            const elementHeight = content.current.offsetHeight;
+            const newExceeds = elementHeight > maxHeight;
             if (!newExceeds) {
                 setMaxHeight(elementHeight);
             }
             setExceeds(newExceeds);
             setFullHeight(elementHeight);
         }
-    }, [content, maxHeight]);
-    useIsomorphicLayoutEffect(function () {
+    }, [
+        content,
+        maxHeight
+    ]);
+    useIsomorphicLayoutEffect(()=>{
         height.set(expanded ? fullHeight : maxHeight);
-    }, [expanded, height, fullHeight, maxHeight]);
-    return (_jsxs(Root, { children: [_jsx(m.div, { style: styles, children: _jsx(Content, __assign({ ref: content }, props)) }), exceeds && (_jsxs(BtnWrap, { "$expanded": expanded, children: [_jsx(BtnFader, { "$bg": bg }), _jsxs(Btn, { "$fontSize": fontSize, "$lineHeight": lineHeight, onClick: handleExpandClick, "aria-expanded": expanded, "aria-label": expanded ? collapse : expand, children: [expanded ? collapse : expand, _jsx(BtnIcon, { "$expanded": expanded })] })] }))] }));
+    }, [
+        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
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

package/helpers/classed.mjs

@@ -1,5 +1,4 @@
-import { __assign } from "tslib";
-import { createElement, forwardRef } from "react";
+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,
@@ -18,35 +17,24 @@ import { createElement, forwardRef } from "react";
  *
  * Discussions and Q/A:
  * - https://stackoverflow.com/q/73055695/1938970
- */
-export function classed(component) {
+ */ export function classed(component) {
     // @ts-expect-error nevermind for now...
-    var type = component.type || component;
-    return function (strings) {
-        var args = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            args[_i - 1] = arguments[_i];
-        }
-        var WrappedComponent = forwardRef(function (props, ref) {
-            var _a;
-            var argResolved = args
-                .map(function (arg, index) {
-                var result = "";
+    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") {
+                } else if (typeof arg !== "undefined") {
                     result = arg.toString();
                 }
                 return strings[index] + result;
-            })
-                .join("");
-            var isNativeHtmlElement = typeof type === "string";
-            var propsToForward = isNativeHtmlElement
-                ? {}
-                : props;
+            }).join("");
+            const isNativeHtmlElement = typeof type === "string";
+            const propsToForward = isNativeHtmlElement ? {} : props;
             if (isNativeHtmlElement) {
-                for (var key in props) {
+                for(const key in props){
                     // like styled-components `transient` props
                     if (!key.startsWith("$")) {
                         // FIXME: for react 18 we need: @ts-expect-error
@@ -55,16 +43,19 @@ export function classed(component) {
                 }
             }
             // get the tagged function string outcome
-            var className = argResolved || strings[0];
+            let className = argResolved || strings[0];
             // check if we need to clean it or not from the optional structure `< class="..."`
-            className = ((_a = className.match(/class="([^"]*)/)) === null || _a === void 0 ? void 0 : _a[1]) || className;
+            className = className.match(/class="([^"]*)/)?.[1] || className;
             // add the custom classes from props
-            className += (props === null || props === void 0 ? void 0 : props.className) ? " " + (props === null || props === void 0 ? void 0 : props.className) : "";
-            return createElement(type, __assign(__assign({}, propsToForward), { 
+            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, 
+                className: className || undefined,
                 // add ref to props
-                ref: ref }));
+                ref
+            });
         });
         // FIXME: not sure if this is needed
         // WrappedComponent.displayName = type.toString();

package/helpers/classed.stories.mjs

@@ -0,0 +1,121 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck These are just wip experiments, we stick to just `./classed.tsx`
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createElement } from "react";
+import { classed } from "./classed";
+const 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__*/ 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__*/ 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__*/ _jsx("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__*/ createElement(props.as || type, {
+            ...props,
+            ...propsImplementation,
+            className: propsImplementation?.className + classNameDefault
+        });
+    };
+}
+const ClassedDynamicIgnoringProps = classedDynamic(()=>/*#__PURE__*/ _jsx("div", {
+        as: "h2",
+        className: "bg-slate-800"
+    }));
+const ClassedDynamicUsingProps = classedDynamic((p)=>{
+    return /*#__PURE__*/ _jsx("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__*/ createElement(componentName, {
+            ...props,
+            className: classDefault + classCustom
+        });
+    }; /*  as Component; */ 
+}
+const ClassedTaggedStatic = classedTaggedStatic(`<div class="bg-teal-400`);
+export default {
+    // component: KoineDialog,
+    title: "Helpers/classed"
+};
+const Template = (args)=>{
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Classed, {
+                className: "text-yellow-200",
+                test: "0a",
+                children: "Classed taller"
+            }),
+            /*#__PURE__*/ _jsx(Classed, {
+                className: "text-yellow-200",
+                test: "0b",
+                children: "Classed wider"
+            }),
+            /*#__PURE__*/ _jsx(ClassedOriginal, {
+                className: "text-white",
+                children: "ClassedOriginal"
+            }),
+            /*#__PURE__*/ _jsx(ClassedBind, {
+                className: "text-white",
+                children: "ClassedBind"
+            }),
+            /*#__PURE__*/ _jsx(ClassedDynamicIgnoringProps, {
+                className: "text-gray-300",
+                test: "2",
+                children: "ClassedDynamicIgnoringProps"
+            }),
+            /*#__PURE__*/ _jsx(ClassedDynamicUsingProps, {
+                className: "text-gray-600",
+                test: "3",
+                children: "ClassedDynamicUsingProps"
+            }),
+            /*#__PURE__*/ _jsx(ClassedTaggedStatic, {
+                className: "text-gray-600",
+                children: "ClassedTaggedStatic"
+            })
+        ]
+    });
+};
+export const Playground = Template.bind({});
+Playground.args = {};