@koine/react 2.0.0-beta.2 → 2.0.0-beta.21

package/Typography/ReadMore.js

@@ -1,33 +1,29 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReadMore = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var framer_motion_1 = require("framer-motion");
-// import { CgArrowsExpandDownRight as IconExpand } from "react-icons/cg";
-var hooks_1 = require("../hooks");
-var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
-var Content = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  & p:first-child {\n    margin-top: 0;\n  }\n"], ["\n  & p:first-child {\n    margin-top: 0;\n  }\n"])));
-var BtnWrap = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__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_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__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_components_1.default.span(templateObject_5 || (templateObject_5 = tslib_1.__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_components_1.default.span(templateObject_6 || (templateObject_6 = tslib_1.__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; });
-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 = tslib_1.__rest(_a, ["lines", "lineHeight", "fontSize", "bg", "expand", "collapse"]);
+import { __assign, __makeTemplateObject, __read, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { m, useSpring } from "framer-motion";
+import { useMemo, useRef, useState } from "react";
+import styled from "styled-components";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
+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 = (0, react_1.useState)(false), expanded = _h[0], setExpanded = _h[1];
-    var _j = (0, react_1.useState)(defaultMaxHeight), maxHeight = _j[0], setMaxHeight = _j[1];
-    var _k = (0, react_1.useState)(0), fullHeight = _k[0], setFullHeight = _k[1];
-    var _l = (0, react_1.useState)(false), exceeds = _l[0], setExceeds = _l[1];
-    var content = (0, react_1.useRef)(null);
-    var height = (0, framer_motion_1.useSpring)(defaultMaxHeight);
-    var styles = (0, react_1.useMemo)(function () { return (exceeds ? { height: height, overflow: "hidden" } : {}); }, [exceeds, height]);
+    var _h = __read(useState(false), 2), expanded = _h[0], setExpanded = _h[1];
+    var _j = __read(useState(defaultMaxHeight), 2), maxHeight = _j[0], setMaxHeight = _j[1];
+    var _k = __read(useState(0), 2), fullHeight = _k[0], setFullHeight = _k[1];
+    var _l = __read(useState(false), 2), 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; });
     };
-    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+    useIsomorphicLayoutEffect(function () {
         if (content.current) {
             var elementHeight = content.current.offsetHeight;
             var newExceeds = elementHeight > maxHeight;
@@ -38,10 +34,9 @@ var ReadMore = function (_a) {
             setFullHeight(elementHeight);
         }
     }, [content, maxHeight]);
-    (0, hooks_1.useIsomorphicLayoutEffect)(function () {
+    useIsomorphicLayoutEffect(function () {
         height.set(expanded ? fullHeight : maxHeight);
     }, [expanded, height, fullHeight, maxHeight]);
-    return ((0, jsx_runtime_1.jsxs)(Root, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { style: styles, children: (0, jsx_runtime_1.jsx)(Content, tslib_1.__assign({ ref: content }, props)) }), exceeds && ((0, jsx_runtime_1.jsxs)(BtnWrap, { "$expanded": expanded, children: [(0, jsx_runtime_1.jsx)(BtnFader, { "$bg": bg }), (0, jsx_runtime_1.jsxs)(Btn, { "$fontSize": fontSize, "$lineHeight": lineHeight, onClick: handleExpandClick, "aria-expanded": expanded, "aria-label": expanded ? collapse : expand, children: [expanded ? collapse : expand, (0, jsx_runtime_1.jsx)(BtnIcon, { "$expanded": expanded })] })] }))] }));
+    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 })] })] }))] }));
 };
-exports.ReadMore = ReadMore;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Typography/TextLoop.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextLoop = exports.TextLoopPiece = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var framer_motion_1 = require("framer-motion");
-var TextLoopPiece = function (_a) {
+import { __assign, __read, __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";
+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 = (0, react_1.useRef)(null);
-    var _j = (0, react_1.useState)({ data: "", key: "" }), content = _j[0], setContent = _j[1];
-    var _k = (0, react_1.useState)(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
-    (0, react_1.useEffect)(function () {
+    var placeholderRef = useRef(null);
+    var _j = __read(useState({ data: "", key: "" }), 2), content = _j[0], setContent = _j[1];
+    var _k = __read(useState(inline ? 0 : "auto"), 2), width = _k[0], setWidth = _k[1];
+    useEffect(function () {
         var timeoutId = setTimeout(function () {
             if (!placeholderRef.current)
                 return;
@@ -21,7 +18,7 @@ var TextLoopPiece = function (_a) {
         }, delay);
         return function () { return clearTimeout(timeoutId); };
     }, [text, delay, inline]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: tslib_1.__assign(tslib_1.__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }), children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", { style: {
+    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: {
                     overflow: noOverflow ? "hidden" : "visible",
                     display: "block",
                     position: "absolute",
@@ -29,7 +26,7 @@ var TextLoopPiece = function (_a) {
                     left: 0,
                     height: "100%",
                     width: "100%",
-                }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { style: { position: "absolute" }, initial: {
+                }, children: _jsx(AnimatePresence, { children: _jsx(m.div, { style: { position: "absolute" }, initial: {
                             opacity: 0,
                             y: direction === "down" ? "-100%" : "100%",
                         }, animate: { opacity: 1, y: 0 }, exit: {
@@ -37,15 +34,12 @@ var TextLoopPiece = function (_a) {
                             y: direction === "down" ? "100%" : "-100%",
                         }, children: content.data }, content.key) }) })] }));
 };
-exports.TextLoopPiece = TextLoopPiece;
-var TextLoop = function (_a) {
-    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = tslib_1.__rest(_a, ["texts", "interval"]);
-    var _c = (0, react_1.useState)(0), index = _c[0], setIndex = _c[1];
-    (0, react_1.useEffect)(function () {
-        var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval // every 3 seconds
-        );
+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 = __read(useState(0), 2), index = _c[0], setIndex = _c[1];
+    useEffect(function () {
+        var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval);
         return function () { return clearTimeout(intervalId); };
     }, [interval]);
-    return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, tslib_1.__assign({}, props, { text: texts[index % texts.length] }));
+    return _jsx(TextLoopPiece, __assign({}, props, { text: texts[index % texts.length] }));
 };
-exports.TextLoop = TextLoop;

package/Typography/TypeStairs.js

@@ -1,20 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypeStairs = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-exports.TypeStairs = (0, react_1.forwardRef)(function (_a, ref) {
+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;
-    // split in rows or just use one row if there is no limit
     var rows = limit ? splitTextIntoRows(children, limit) : [children];
-    return rows.length > 1 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: rows.map(function (row, rowIndex) {
-            return ((0, jsx_runtime_1.jsxs)("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, "row-".concat(rowIndex)));
+    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));
 });
-/**
- * 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; }
@@ -40,13 +32,11 @@ function splitTextIntoRows(input, limit) {
 function renderRow(row, rowIndex, ref) {
     var letters = row.split("");
     var fontWeightIdx = 1;
-    // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: letters.map(function (letter, letterIndex) {
+    return (_jsx(_Fragment, { children: letters.map(function (letter, letterIndex) {
             var fontWeight = Math.min(fontWeightIdx * 100, 800);
-            // don't waste a fontWeight for a white space
             if (letter !== " ") {
                 fontWeightIdx++;
             }
-            return ((0, jsx_runtime_1.jsx)("span", { style: { fontWeight: fontWeight }, ref: ref, children: letter }, "letter-".concat(rowIndex, "-").concat(letterIndex)));
+            return (_jsx("span", { style: { fontWeight: fontWeight }, ref: ref, children: letter }, "letter-".concat(rowIndex, "-").concat(letterIndex)));
         }) }));
 }

package/Typography/index.d.ts

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

package/Typography/index.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./CopyPasteVisible"), exports);
-tslib_1.__exportStar(require("./Native"), exports);
-tslib_1.__exportStar(require("./ReadMore"), exports);
-tslib_1.__exportStar(require("./TextLoop"), exports);
-tslib_1.__exportStar(require("./TypeStairs"), exports);
+export * from "./CopyPasteVisible.js";
+export * from "./Native.js";
+export * from "./ReadMore.js";
+export * from "./TextLoop.js";
+export * from "./TypeStairs.js";

package/classed.d.ts

@@ -0,0 +1,8 @@
+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>;
+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.mjs → classed.js}

@@ -1,26 +1,6 @@
 import { __assign } from "tslib";
 import { 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...
     var type = component.type || component;
     return function (strings) {
         var args = [];
@@ -47,28 +27,17 @@ export function classed(component) {
                 : props;
             if (isNativeHtmlElement) {
                 for (var 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
             var 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;
-            // 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), { 
-                // only add ot props if it is not an empty string
-                className: className || undefined, 
-                // add ref to props
-                ref: ref }));
+            return createElement(type, __assign(__assign({}, propsToForward), { className: className || undefined, ref: ref }));
         });
-        // FIXME: not sure if this is needed
-        // WrappedComponent.displayName = type.toString();
-        return WrappedComponent; // as unknown as React.ReactElement<typeof props>;
+        return WrappedComponent;
     };
 }
 export default classed;

package/{helpers/createUseMediaQueryWidth.d.ts → createUseMediaQueryWidth.d.ts}

@@ -1,12 +1,6 @@
-import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils/getMediaQueryWidthResolvers";
+import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
 type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
 export type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
 export type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;
-/**
- * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
- *
- * @param customBreakpoints
- * @returns
- */
 export declare function createUseMediaQueryWidth<TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig): <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: `@${TBreakpoints}` | `@min-${TBreakpoints}` | `@max-${TBreakpoints}` | `@up-${TBreakpoints}` | `@down-${TBreakpoints}` | `@between-${TBreakpoints}_${TBreakpoints}` | `@only-${TBreakpoints}`, serverValue?: null | boolean) => boolean | null;
 export default createUseMediaQueryWidth;

package/createUseMediaQueryWidth.js

@@ -0,0 +1,39 @@
+import { __read } from "tslib";
+import { useState } from "react";
+import { getMediaQueryWidthResolvers, isUndefined, } from "@koine/utils";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
+export function createUseMediaQueryWidth(customBreakpoints) {
+    var queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
+    return function useMediaQueryWidth(media, serverValue) {
+        var definition = media.substring(1);
+        var _a = __read(definition.split("-"), 2), rule = _a[0], ruleBreakpoint = _a[1];
+        if (isUndefined(ruleBreakpoint)) {
+            ruleBreakpoint = rule;
+        }
+        if (isUndefined(rule)) {
+            rule = "min";
+        }
+        var _b = __read(ruleBreakpoint.split("_"), 2), br1 = _b[0], br2 = _b[1];
+        var query = queryResolvers[rule](br1, br2);
+        var _c = __read(useState(isUndefined(serverValue) ? null : serverValue), 2), matches = _c[0], setMatches = _c[1];
+        useIsomorphicLayoutEffect(function () {
+            var mq = window.matchMedia(query);
+            var handleChange = function (event) {
+                setMatches(event.matches);
+            };
+            setMatches(mq.matches);
+            if (!mq.addEventListener) {
+                mq.addListener(handleChange);
+                return function () {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return function () {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+}
+export default createUseMediaQueryWidth;

package/css/index.d.ts

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

package/css/index.js

@@ -1,36 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("../shared"), exports);
-// 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";
-var bare_1 = require("../Dialog/css/bare");
-Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
-// 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.js";

package/{helpers/extend-component.d.ts → extendComponent.d.ts}

@@ -10,17 +10,6 @@ export interface OverridableComponents {
         motionable?: boolean;
     };
 }
-/**
- * Type to define a component that has overridable components.
- *
- * Each of them can define its:
- * - `type`: either as a native HTMLElement (the props for that element will be
- * automatically inferred) or as a custom React component
- * - `props`: any additional custom props
- * - `motionable`: if that component has a possible implementation with `framer-motion`,
- * in that case we remove some HTMLAttributes props which collides with
- * `MotionProps` from framer.
- */
 export type WithComponents<Props, Components extends OverridableComponents> = Props & {
     [Name in keyof Components]: NonNullable<Components[Name]["type"] extends keyof JSX.IntrinsicElements ? React.ElementType<Components[Name]["motionable"] extends true ? Omit<React.ComponentPropsWithoutRef<Components[Name]["type"]>, HtmlAttributesCollidingWithMotionProps> & Components[Name]["props"] : React.ComponentPropsWithoutRef<Components[Name]["type"]> & Components[Name]["props"]> : Components[Name]["type"]>;
 };

package/{helpers/extend-component.mjs → extendComponent.js}

@@ -1,13 +1,9 @@
 import { __assign } from "tslib";
 import { createElement } from "react";
 export var extendComponent = function (component, defaultProps) {
-    // FIXME: check if we need to forwardRef or not
     var NewComponent = function (props) {
         return createElement(component, props);
     };
-    // const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
-    //   (props, ref) => createElement(component, { ...props, ref })
-    // );
     return Object.assign(NewComponent, __assign(__assign({}, defaultProps), { defaultProps: defaultProps }));
 };
 export default extendComponent;

package/index.d.ts

@@ -1 +1,25 @@
-export * from "./shared";
+export { classed } from "./classed.js";
+export { createUseMediaQueryWidth, type MediaQuerWidthDef, type MediaQueryWidth, } from "./createUseMediaQueryWidth.js";
+export { type ExtendableComponent, type OverridableComponents, type WithComponents, extendComponent, } from "./extendComponent.js";
+export { mergeRefs } from "./mergeRefs.js";
+export { useAsyncFn, type UseAsyncFnReturn, type UseAsyncState, } from "./useAsyncFn.js";
+export { useDateLocale } from "./useDateLocale.js";
+export { useFirstMountState } from "./useFirstMountState.js";
+export { useFixedOffset } from "./useFixedOffset.js";
+export { useFocus } from "./useFocus.js";
+export { useInterval } from "./useInterval.js";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { useKeyUp } from "./useKeyUp.js";
+export { useMeasure, type UseMeasureOptions, type UseMeasureReturn, } from "./useMeasure.js";
+export { useMountedState } from "./useMountedState.js";
+export { useNavigateAway, type UseNavigateAwayHandler, } from "./useNavigateAway.js";
+export { usePrevious } from "./usePrevious.js";
+export { usePreviousRef } from "./usePreviousRef.js";
+export { useScrollPosition } from "./useScrollPosition.js";
+export { useScrollThreshold } from "./useScrollThreshold.js";
+export { useSmoothScroll } from "./useSmoothScroll.js";
+export { useSpinDelay } from "./useSpinDelay.js";
+export { useTraceUpdate } from "./useTraceUpdate.js";
+export { useUpdateEffect } from "./useUpdateEffect.js";
+export { useWindowSize } from "./useWindowSize.js";
+export type { Translate, Option } from "./types.js";

package/index.js

@@ -1,8 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./shared"), exports);
-// we need to alias the star export otherwise the named exports would collide
-// export * as css from "./css";
-// export * as sc from "./sc";
-// export * as tw from "./tw";
+export { classed } from "./classed.js";
+export { createUseMediaQueryWidth, } from "./createUseMediaQueryWidth.js";
+export { extendComponent, } from "./extendComponent.js";
+export { mergeRefs } from "./mergeRefs.js";
+export { useAsyncFn, } from "./useAsyncFn.js";
+export { useDateLocale } from "./useDateLocale.js";
+export { useFirstMountState } from "./useFirstMountState.js";
+export { useFixedOffset } from "./useFixedOffset.js";
+export { useFocus } from "./useFocus.js";
+export { useInterval } from "./useInterval.js";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export { useKeyUp } from "./useKeyUp.js";
+export { useMeasure, } from "./useMeasure.js";
+export { useMountedState } from "./useMountedState.js";
+export { useNavigateAway, } from "./useNavigateAway.js";
+export { usePrevious } from "./usePrevious.js";
+export { usePreviousRef } from "./usePreviousRef.js";
+export { useScrollPosition } from "./useScrollPosition.js";
+export { useScrollThreshold } from "./useScrollThreshold.js";
+export { useSmoothScroll } from "./useSmoothScroll.js";
+export { useSpinDelay } from "./useSpinDelay.js";
+export { useTraceUpdate } from "./useTraceUpdate.js";
+export { useUpdateEffect } from "./useUpdateEffect.js";
+export { useWindowSize } from "./useWindowSize.js";

package/m/MotionProvider.d.ts

@@ -2,37 +2,5 @@
 import { type LazyProps } from "framer-motion";
 export type MotionProviderFeatures = LazyProps["features"];
 export type MotionProviderProps = LazyProps & React.PropsWithChildren<{}>;
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */
 export declare const MotionProvider: ({ features, children }: MotionProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default MotionProvider;

package/m/MotionProvider.js

@@ -1,43 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MotionProvider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var framer_motion_1 = require("framer-motion");
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */
-var MotionProvider = function (_a) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LazyMotion } from "framer-motion";
+export var MotionProvider = function (_a) {
     var features = _a.features, children = _a.children;
-    return (0, jsx_runtime_1.jsx)(framer_motion_1.LazyMotion, { features: features, children: children });
+    return _jsx(LazyMotion, { features: features, children: children });
 };
-exports.MotionProvider = MotionProvider;
-exports.default = exports.MotionProvider;
+export default MotionProvider;

package/m/index.d.ts

@@ -1,6 +1 @@
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */
-export * from "./MotionProvider";
+export * from "./MotionProvider.js";

package/m/index.js

@@ -1,9 +1 @@
-"use strict";
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./MotionProvider"), exports);
+export * from "./MotionProvider.js";

package/m/lite.js

@@ -1,4 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var framer_motion_1 = require("framer-motion");
-exports.default = framer_motion_1.domAnimation;
+import { domAnimation } from "framer-motion";
+export default domAnimation;

package/m/max.js

@@ -1,4 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var framer_motion_1 = require("framer-motion");
-exports.default = framer_motion_1.domMax;
+import { domMax } from "framer-motion";
+export default domMax;