@koine/react 2.0.0-beta.12 → 2.0.0-beta.15

package/NoJs/index.js

@@ -0,0 +1,2 @@
+export * from "./NoJs.js";
+export { NoJs as default } from "./NoJs.js";

package/Pagination/PaginationNav.d.ts

@@ -1,17 +1,9 @@
-import { KoineComponent, KoineComponentProps } from "../types";
+import { KoineComponent, KoineComponentProps } from "../types.js";
 export type KoinePaginationNavProps = {
-    /** The total number of elements to paginate */
     total: string | number;
-    /** The amount of items per page */
     perPage: string | number;
-    /** The current page in the pagination */
     currentPage: string | number;
-    /** Is the relative path of the url to prefix to the page number */
     baseUrl?: string;
-    /**
-     * The number of pages to show as number (and not dots) around the currentPage
-     * @default 2
-     */
     showOffset?: number;
 };
 type PaginationNavProps = KoineComponentProps<KoinePaginationNavProps, {

package/Pagination/PaginationNav.js

@@ -0,0 +1,48 @@
+import { __makeTemplateObject } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CgArrowLeftR as IconArrowLeft, CgArrowRightR as IconArrowRight, } from "react-icons/cg";
+import styled from "styled-components";
+import ensureInt from "@koine/utils/ensureInt";
+var Root = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px 0 40px;\n  font-weight: 600;\n\n  & a {\n    text-decoration: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px 0 40px;\n  font-weight: 600;\n\n  & a {\n    text-decoration: none;\n  }\n"])));
+var item = "\n  display: block;\n  padding: 5px 10px;\n";
+var ItemCurrent = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  background: var(--accent400);\n  border-radius: 2px;\n"], ["\n  ", "\n  background: var(--accent400);\n  border-radius: 2px;\n"])), item);
+var ItemLink = styled.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), item, function (props) { return (props.prev ? "color: var(--grey100);" : ""); });
+var DotsSeparator = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: var(--grey100);\n"], ["\n  color: var(--grey100);\n"])));
+var arrow = "display: flex; font-size: 20px;";
+var ItemPrev = styled.a(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), arrow);
+var ItemNext = styled.a(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), arrow);
+export var KoinePaginationNav = function (_a) {
+    var total = _a.total, perPage = _a.perPage, _currentPage = _a.currentPage, baseUrl = _a.baseUrl, _b = _a.showOffset, showOffset = _b === void 0 ? 2 : _b, _c = _a.currentUrl, currentUrl = _c === void 0 ? "/" : _c, _d = _a.Link, Link = _d === void 0 ? "a" : _d;
+    var currentPage = ensureInt(_currentPage);
+    total = ensureInt(total);
+    perPage = ensureInt(perPage);
+    currentPage = currentPage || 1;
+    baseUrl = baseUrl || currentUrl;
+    if (total < perPage) {
+        return null;
+    }
+    var firstPage = 1;
+    var lastPage = Math.ceil(total / perPage);
+    var prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
+    var nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
+    var prevArrow = currentPage > firstPage;
+    var nextArrow = currentPage < lastPage;
+    var pages = [];
+    for (var i = currentPage - showOffset; i < currentPage; i++) {
+        if (i > 1) {
+            pages.push(i);
+        }
+    }
+    pages.push(currentPage);
+    for (var i = currentPage + 1; i < currentPage + 1 + showOffset; i++) {
+        if (i < lastPage) {
+            pages.push(i);
+        }
+    }
+    var prevDots = pages[0] > firstPage + 1;
+    var nextDots = pages[pages.length - 1] < lastPage - 1;
+    return (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, { as: Link, href: "".concat(baseUrl, "/").concat(prevPage), children: _jsx(IconArrowLeft, {}) })), firstPage !== currentPage && (_jsx(ItemLink, { as: Link, href: "".concat(baseUrl), prev: true, children: firstPage })), prevDots && _jsx(DotsSeparator, { children: "..." }), pages.map(function (page) {
+                return page === currentPage ? (_jsx(ItemCurrent, { children: page }, page)) : (_jsx(ItemLink, { as: Link, href: "".concat(baseUrl, "/").concat(page), prev: page < currentPage, next: page > currentPage, children: page }, "pagination-".concat(page)));
+            }), nextDots && _jsx(DotsSeparator, { children: "..." }), lastPage !== currentPage && (_jsx(ItemLink, { as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true, children: lastPage })), nextArrow && (_jsx(ItemNext, { as: Link, href: "".concat(baseUrl, "/").concat(nextPage), children: _jsx(IconArrowRight, {}) }))] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Pagination/PaginationResults.js

@@ -0,0 +1,11 @@
+import { __makeTemplateObject } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnimatePresence, m } from "framer-motion";
+import styled from "styled-components";
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // overflow: hidden;\n"], ["\n  // overflow: hidden;\n"])));
+var Inner = styled(m.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+export var PaginationResults = function (_a) {
+    var children = _a.children;
+    return (_jsx(AnimatePresence, { exitBeforeEnter: true, initial: true, children: _jsx(Root, { children: _jsx(Inner, { initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 }, children: children }) }) }));
+};
+var templateObject_1, templateObject_2;

package/Pagination/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./PaginationNav";
-export * from "./PaginationResults";
+export * from "./PaginationNav.js";
+export * from "./PaginationResults.js";

package/Pagination/index.js

@@ -0,0 +1,2 @@
+export * from "./PaginationNav.js";
+export * from "./PaginationResults.js";

package/Pill/Pill.js

@@ -0,0 +1,7 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var Pill = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 5px 10px;\n  margin: 0 0.5em 0.5em 0;\n  border-radius: 2px;\n  text-decoration: none;\n  font-size: 13px;\n  font-weight: 600;\n"], ["\n  display: inline-block;\n  padding: 5px 10px;\n  margin: 0 0.5em 0.5em 0;\n  border-radius: 2px;\n  text-decoration: none;\n  font-size: 13px;\n  font-weight: 600;\n"])));
+export var PillGreyLight = styled(Pill)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: var(--grey800);\n  color: var(--grey100);\n\n  &:hover {\n    color: white;\n    background: var(--grey300);\n  }\n"], ["\n  background: var(--grey800);\n  color: var(--grey100);\n\n  &:hover {\n    color: white;\n    background: var(--grey300);\n  }\n"])));
+export var PillAccentLight = styled(Pill)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: var(--accent400);\n  color: var(--grey100);\n\n  &:hover {\n    color: #fff;\n    background: var(--accent300);\n  }\n"], ["\n  background: var(--accent400);\n  color: var(--grey100);\n\n  &:hover {\n    color: #fff;\n    background: var(--accent300);\n  }\n"])));
+export var PillAccentLightOutlined = styled(Pill)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border: 1px solid var(--accent300);\n  color: var(--accent200);\n\n  &:hover {\n    color: #fff;\n    background: var(--accent300);\n  }\n"], ["\n  border: 1px solid var(--accent300);\n  color: var(--accent200);\n\n  &:hover {\n    color: #fff;\n    background: var(--accent300);\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Pill/index.d.ts

@@ -1 +1 @@
-export * from "./Pill";
+export * from "./Pill.js";

package/Pill/index.js

@@ -0,0 +1 @@
+export * from "./Pill.js";

package/Progress/ProgressCircular.d.ts

@@ -1,16 +1,10 @@
 import { CSSProperties } from "styled-components";
-import type { Theme } from "../styles/theme";
+import type { Theme } from "../styles/theme.js";
 export type ProgressCircularProps = {
-    /** @default "1em" */
     size?: CSSProperties["width"];
-    /** @default 1 */
     thickness: number;
-    /** @default "currentColor" */
     color: keyof Theme | NonNullable<CSSProperties["color"]>;
 };
-/**
- * @see https://mui.com/components/progress/
- */
 export declare const ProgressCircular: ({ size, thickness, color, ...props }: {
     [x: string]: any;
     size?: string | undefined;

package/Progress/ProgressCircular.js

@@ -0,0 +1,12 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { keyframes } from "styled-components";
+var animationRotation = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
+var animationCircle = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
+var ProgressCircularSvg = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  animation: ", " 1.5s linear infinite;\n"], ["\n  animation: ", " 1.5s linear infinite;\n"])), animationRotation);
+var ProgressCircularCircle = styled.circle(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " 1.5s linear infinite;\n"], ["\n  animation: ", " 1.5s linear infinite;\n"])), animationCircle);
+export var ProgressCircular = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "1em" : _b, _c = _a.thickness, thickness = _c === void 0 ? 1 : _c, _d = _a.color, color = _d === void 0 ? "currentColor" : _d, props = __rest(_a, ["size", "thickness", "color"]);
+    return (_jsx(ProgressCircularSvg, __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 44 44", style: { width: size, height: size } }, props, { children: _jsx(ProgressCircularCircle, { cx: "22", cy: "22", r: "20", fill: "none", strokeWidth: thickness, style: { stroke: color } }) })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Progress/ProgressLinear.d.ts

@@ -1,18 +1,11 @@
 import { CSSProperties } from "styled-components";
-import type { Theme } from "../styles/theme";
+import type { Theme } from "../styles/theme.js";
 export type ProgressLinearProps = {
-    /** @default false */
     done?: boolean;
-    /** @default "2px" */
     height?: CSSProperties["height"];
-    /** @default "currentColor" */
     bg: keyof Theme | NonNullable<CSSProperties["color"]>;
-    /** @default "currentColor" */
     fg: keyof Theme | NonNullable<CSSProperties["color"]>;
 };
-/**
- * @see https://mui.com/components/progress/#linear
- */
 export declare const ProgressLinear: ({ done, height, bg, fg, ...props }: {
     [x: string]: any;
     done?: boolean | undefined;

package/Progress/ProgressLinear.js

@@ -0,0 +1,21 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { m } from "framer-motion";
+import styled from "styled-components";
+var ProgressLinearBg = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  display: block;\n  height: 4px;\n"], ["\n  position: relative;\n  overflow: hidden;\n  display: block;\n  height: 4px;\n"])));
+var ProgressLinearFg = styled(m.span)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
+export var ProgressLinear = function (_a) {
+    var _b = _a.done, done = _b === void 0 ? false : _b, _c = _a.height, height = _c === void 0 ? "2px" : _c, _d = _a.bg, bg = _d === void 0 ? "transparent" : _d, _e = _a.fg, fg = _e === void 0 ? "currentColor" : _e, props = __rest(_a, ["done", "height", "bg", "fg"]);
+    return (_jsx(ProgressLinearBg, __assign({ style: { height: height, background: bg } }, props, { children: _jsx(ProgressLinearFg, { style: { height: height, background: fg }, initial: {
+                x: "-100%",
+            }, animate: {
+                x: done ? "-100%" : "0%",
+            }, transition: done
+                ? {}
+                : {
+                    repeat: Infinity,
+                    repeatType: "reverse",
+                    duration: 2,
+                } }) })));
+};
+var templateObject_1, templateObject_2;

package/Progress/ProgressOverlay.js

@@ -0,0 +1,23 @@
+import { __makeTemplateObject } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { m } from "framer-motion";
+import { useEffect } from "react";
+import styled from "styled-components";
+import { useHeader } from "../Header/index.js";
+import { ProgressCircular } from "./ProgressCircular.js";
+import { ProgressLinear } from "./ProgressLinear.js";
+var ProgressOverlayWrap = styled(m.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  cursor: wait;\n"], ["\n  z-index: 10000;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n  cursor: wait;\n"])));
+var ProgressOverlayCenterer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--progress-overlay-bg);\n"])));
+export var ProgressOverlay = function (_a) {
+    var running = _a.running;
+    var _b = useHeader(), headerHeight = _b[2];
+    useEffect(function () {
+        document.body.style.cursor = running ? "wait" : "";
+    }, [running]);
+    return (_jsxs(ProgressOverlayWrap, { animate: {
+            opacity: running ? 1 : 0,
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, { style: {
+                    top: headerHeight + "px",
+                }, children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
+};
+var templateObject_1, templateObject_2;

package/Progress/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./ProgressCircular";
-export * from "./ProgressLinear";
-export * from "./ProgressOverlay";
+export * from "./ProgressCircular.js";
+export * from "./ProgressLinear.js";
+export * from "./ProgressOverlay.js";

package/Progress/index.js

@@ -0,0 +1,3 @@
+export * from "./ProgressCircular.js";
+export * from "./ProgressLinear.js";
+export * from "./ProgressOverlay.js";

package/Rating/Rating.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="react" />
 export type RatingStarProps = React.ComponentPropsWithoutRef<"svg"> & RatingStarModel & {
-    /** @default 16 */
     size?: number;
-    /** Between 0 and 1 */
     value: number;
-    /** @default "#FFD84C" */
     colorBg?: React.CSSProperties["color"];
-    /** @default "#947813" */
     colorStroke?: React.CSSProperties["color"];
 };
 export declare const RatingStarRoot: any;
@@ -21,14 +17,10 @@ export type RatingStarModel = {
     dataIdx?: number;
 };
 export type RatingProps = {
-    /** @default 0 */
     value: number;
     count?: number;
-    /** @default 0 */
     min?: number;
-    /** @default 5 */
     max?: number;
-    /** @default true */
     showDetails?: boolean;
     starSize?: RatingStarProps["size"];
 } & Pick<RatingStarProps, "colorBg" | "colorStroke">;

package/Rating/Rating.js

@@ -0,0 +1,43 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useState } from "react";
+import styled from "styled-components";
+export var RatingStarRoot = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 1px;\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n  margin-right: 1px;\n"])));
+export var RatingStar = function (_a) {
+    var value = _a.value, _b = _a.colorBg, colorBg = _b === void 0 ? "#FFD84C" : _b, _c = _a.colorStroke, colorStroke = _c === void 0 ? "#947813" : _c, size = _a.size, props = __rest(_a, ["value", "colorBg", "colorStroke", "size"]);
+    var id = useId();
+    return (_jsxs(RatingStarRoot, __assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [_jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
+};
+export var RatingDetails = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"], ["\n  padding-left: 0.5em;\n  font-size: 12px;\n  color: var(--grey100);\n\n  &:before {\n    content: \"(\";\n  }\n  &:after {\n    content: \")\";\n  }\n"])));
+export var RatingCount = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var RatingValue = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n"], ["\n  display: none;\n"])));
+export var RatingRoot = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &:hover ", " {\n    display: inline-block;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &:hover ", " {\n    display: inline-block;\n  }\n"])), RatingValue);
+export var Rating = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? 0 : _b, count = _a.count, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.max, max = _d === void 0 ? 5 : _d, _e = _a.showDetails, showDetails = _e === void 0 ? true : _e, colorBg = _a.colorBg, colorStroke = _a.colorStroke, _f = _a.starSize, starSize = _f === void 0 ? 16 : _f;
+    var id = useId();
+    var currentValue = useState(value)[0];
+    var _g = useState([]), stars = _g[0], setStars = _g[1];
+    var getStars = useCallback(function (activeCount) {
+        var stars = [];
+        for (var currentStar = min + 1; currentStar < max + 1; currentStar++) {
+            var starValue = void 0;
+            var roundedActiveCount = Math.floor(activeCount);
+            if (roundedActiveCount === currentStar - 1) {
+                starValue = 1 - (currentStar - activeCount);
+            }
+            else if (roundedActiveCount >= currentStar) {
+                starValue = 1;
+            }
+            else {
+                starValue = 0;
+            }
+            stars.push({ value: starValue });
+        }
+        return stars;
+    }, [min, max]);
+    useEffect(function () {
+        setStars(getStars(currentValue));
+    }, [currentValue, getStars]);
+    return (_jsxs(RatingRoot, { children: [stars.map(function (star, idx) { return (_jsx(RatingStar, { idx: idx, dataIdx: idx, size: starSize, value: star.value, colorBg: colorBg, colorStroke: colorStroke }, id + idx)); }), " ", showDetails && count && (_jsxs(RatingDetails, { children: [_jsx(RatingCount, { children: count }), _jsx(RatingValue, { children: " - ".concat(value) })] }))] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Rating/index.d.ts

@@ -1,9 +1,6 @@
-export * from "./Rating";
+export * from "./Rating.js";
 export declare const getRatingWord: (value: number, precision?: number) => any;
 export declare const getRatingValue: (value: number) => string | number;
-/**
- * @see https://stackoverflow.com/a/14224813
- */
 export declare function convertRange(value: number, r1: number[], r2: number[]): number;
 export declare const deriveRating: (title: string, date: Date, minValue?: number, maxValue?: number, minQuantity?: number) => {
     value: number;

package/Rating/index.js

@@ -0,0 +1,45 @@
+export * from "./Rating.js";
+var RATING_WORDS = {
+    0: "Worst",
+    1: "Bad",
+    2: "Mediocre",
+    3: "Good",
+    4: "Great",
+    4.5: "Excellent",
+    5: "Best",
+};
+export var getRatingWord = function (value, precision) {
+    if (precision === void 0) { precision = 0.5; }
+    var buffer = 0;
+    var word;
+    while (buffer < value) {
+        word = RATING_WORDS[buffer];
+        buffer += precision;
+    }
+    return word;
+};
+export var getRatingValue = function (value) {
+    var converted = convertRange(value, [0, 5], [0, 10]);
+    if (converted % 1 === 0) {
+        return converted;
+    }
+    return converted.toFixed(1);
+};
+export function convertRange(value, r1, r2) {
+    return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
+}
+export var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
+    if (minValue === void 0) { minValue = 3.8; }
+    if (maxValue === void 0) { maxValue = 5; }
+    if (minQuantity === void 0) { minQuantity = 9; }
+    var entityTime = date.getTime();
+    var nowTime = new Date().getTime();
+    var length = title.length;
+    var value = Number(convertRange(length, [0, 90], [minValue, maxValue]).toFixed(2));
+    var timeDifference = convertRange(nowTime - entityTime, [0, 10000000000000], [minQuantity, 999999]);
+    var count = Math.round(timeDifference / length);
+    return {
+        value: value,
+        count: count,
+    };
+};

package/Select/SelectDownshift.d.ts

@@ -1,4 +1,4 @@
-import type { Option } from "../types";
+import type { Option } from "../types.js";
 export type SelectProps = {
     options?: Option[];
 };

package/Select/SelectDownshift.js

@@ -0,0 +1 @@
+export var Select = null;

package/Select/components.js

@@ -0,0 +1,12 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { m } from "framer-motion";
+import { forwardRef } from "react";
+import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
+import styled from "styled-components";
+export var SelectArrowStyled = styled(m.span)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n\n  &:not([disabled]) {\n    cursor: pointer;\n  }\n"])));
+export var SelectArrow = forwardRef(function SelectArrow(_a, ref) {
+    var isOpen = _a.isOpen, props = __rest(_a, ["isOpen"]);
+    return (_jsx(SelectArrowStyled, __assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: _jsx(IconCollapse, {}) })));
+});
+var templateObject_1;

package/Select/index.d.ts

@@ -1,2 +1,2 @@
-export type { SelectProps } from "./SelectDownshift";
-export { Select } from "./SelectDownshift";
+export type { SelectProps } from "./SelectDownshift.js";
+export { Select } from "./SelectDownshift.js";

package/Select/index.js

@@ -0,0 +1 @@
+export { Select } from "./SelectDownshift.js";

package/Sidebar/Sidebar.js

@@ -0,0 +1,23 @@
+import { __makeTemplateObject } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { CgCloseR as IconClose } from "react-icons/cg";
+import { GrFolderOpen as IconOpen } from "react-icons/gr";
+import styled from "styled-components";
+import { IconButtonFab } from "../Buttons/index.js";
+import { useHeader } from "../Header/index.js";
+import { max, min } from "../styles/media.js";
+var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return "".concat(max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
+});
+var SidebarToggle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), min.md);
+export var Sidebar = function (_a) {
+    var children = _a.children;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useHeader(), headerHeight = _c[2];
+    var handleClickToggle = useCallback(function () {
+        setOpen(function (prevOpen) { return !prevOpen; });
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, { onClick: handleClickToggle, children: _jsx(IconButtonFab, { "$variant": "contained", children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) }) }), _jsx(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
+};
+var templateObject_1, templateObject_2;

package/Sidebar/index.d.ts

@@ -1 +1 @@
-export * from "./Sidebar";
+export * from "./Sidebar.js";

package/Sidebar/index.js

@@ -0,0 +1 @@
+export * from "./Sidebar.js";

package/Spacing/Spacing.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { SpacingDevices, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize } from "../styles/spacing";
+import { SpacingDevices, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize } from "../styles/spacing.js";
 export type SpacingPropsStyled = {
     $top?: SpacingFnArgs;
     $bottom?: SpacingFnArgs;
@@ -14,17 +13,5 @@ type SpacingSyntaxFactor = string;
 type SpacingSyntaxDevices = `${SpacingDevices}` | `${SpacingDevices},${SpacingDevices}` | `${SpacingDevices},${SpacingDevices},${SpacingDevices}`;
 type SpacingSyntax = `${SpacingSize}` | `${SpacingSize}:${SpacingSyntaxFactor}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}:${SpacingSyntaxDevices}`;
 export type SpacingProps = React.ComponentPropsWithoutRef<"div"> & Partial<Record<SpacingDirectionAxis, SpacingSyntax>>;
-/**
- * Usage:
- *
- * ```jsx
- * <Spacing top="sm" />
- * <Spacing top="sm:1.5" />
- * <Spacing top="sm:1.5" bottom="lg" />
- * <Spacing vertical="sm:1.5:margin:mobile" />
- * <Spacing top="sm:1.5:padding:mobile" />
- * <Spacing top="sm:2:padding:tablet,desktop" />
- * ```
- */
 export declare const Spacing: ({ top, bottom, vertical, ...props }: SpacingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/Spacing/Spacing.js

@@ -0,0 +1,32 @@
+import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import isUndefined from "@koine/utils/isUndefined";
+import { spacingBottom, spacingTop, } from "../styles/spacing.js";
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], p.$bottom, false)); });
+var extractDirectionArgs = function (raw) {
+    var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
+    var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
+    var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
+    return [size, factorArg, property, devicesArg];
+};
+export var Spacing = function (_a) {
+    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = __rest(_a, ["top", "bottom", "vertical"]);
+    var $top;
+    var $bottom;
+    if (top) {
+        $top = extractDirectionArgs(top);
+    }
+    if (bottom) {
+        $bottom = extractDirectionArgs(bottom);
+    }
+    if (vertical) {
+        $top = extractDirectionArgs(vertical);
+        $bottom = $top;
+    }
+    if (!$top && !$bottom && !vertical) {
+        return _jsx(_Fragment, { children: props.children });
+    }
+    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
+};
+var templateObject_1;

package/Spacing/index.d.ts

@@ -1 +1 @@
-export * from "./Spacing";
+export * from "./Spacing.js";

package/Spacing/index.js

@@ -0,0 +1 @@
+export * from "./Spacing.js";

package/Sticky/Sticky.js

@@ -0,0 +1 @@
+export var Sticky = null;

package/Sticky/StickyCss.js

@@ -0,0 +1,6 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var StickyCss = function (_a) {
+    var top = _a.top, props = __rest(_a, ["top"]);
+    return _jsx("div", __assign({ style: { position: "sticky", top: 100 } }, props));
+};

package/Sticky/index.d.ts

@@ -1 +1 @@
-export { StickyCss, StickyCssProps } from "./StickyCss";
+export { StickyCss, StickyCssProps } from "./StickyCss.js";

package/Sticky/index.js

@@ -0,0 +1 @@
+export { StickyCss } from "./StickyCss.js";

package/Tabs/TabsMui.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import TabUnstyled, { type TabProps as TabUnstyledProps } from "@mui/base/Tab";
 import TabPanelUnstyled, { type TabPanelProps as TabPanelUnstyledProps } from "@mui/base/TabPanel";
 import TabsUnstyled, { type TabsProps as TabsUnstyledProps } from "@mui/base/Tabs";
@@ -6,7 +5,7 @@ import TabsListUnstyled, { type TabsListProps as TabsListUnstyledProps } from "@
 import { type UseTabReturnValue } from "@mui/base/useTab";
 import type { MotionProps } from "framer-motion";
 import type { Simplify } from "@koine/utils";
-import { type WithComponents } from "../helpers";
+import { type WithComponents } from "../helpers/index.js";
 type ReducedTabsUnstyledProps = Omit<TabsUnstyledProps, "component" | "slots" | "slotProps">;
 export type OwnProps = React.PropsWithChildren<ReducedTabsUnstyledProps & {
     mTab?: MotionProps;
@@ -29,7 +28,7 @@ export type Components = {
     };
     Indicator: {
         type: "span";
-        props: React.PropsWithChildren<Pick<UseTabReturnValue, "active" | /* "disabled" | */ "selected">>;
+        props: React.PropsWithChildren<Pick<UseTabReturnValue, "active" | "selected">>;
         motionable: true;
     };
     Panel: {

package/Tabs/TabsMui.js

@@ -0,0 +1,30 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TabUnstyled from "@mui/base/Tab";
+import TabPanelUnstyled from "@mui/base/TabPanel";
+import TabsUnstyled from "@mui/base/Tabs";
+import TabsListUnstyled from "@mui/base/TabsList";
+import useTab from "@mui/base/useTab";
+import { forwardRef } from "react";
+import { extendComponent, } from "../helpers/index.js";
+export var Root = TabsUnstyled;
+export var List = TabsListUnstyled;
+export var Indicator = "span";
+export var Panel = TabPanelUnstyled;
+export var Tab = forwardRef(function Tab(_a, ref) {
+    var children = _a.children, slot = _a.slot, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = __rest(_a, ["children", "slot", "slotProps", "slots", "Indicator"]);
+    var _b = useTab(__assign(__assign({}, props), { rootRef: ref })), active = _b.active, selected = _b.selected;
+    var indicatorProps = { active: active, selected: selected };
+    return (_jsxs(TabUnstyled, __assign({}, props, { children: [children, Indicator && _jsx(Indicator, __assign({}, indicatorProps))] })));
+});
+var TabsWithRef = forwardRef(function Tabs(_a, ref) {
+    var _Root = _a.Root, _List = _a.List, _Tab = _a.Tab, _Indicator = _a.Indicator, _Panel = _a.Panel, props = __rest(_a, ["Root", "List", "Tab", "Indicator", "Panel"]);
+    return _jsx(Root, __assign({}, props, { ref: ref }));
+});
+export var KoineTabs = extendComponent(TabsWithRef, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
+});

package/Tabs/index.d.ts

@@ -1 +1 @@
-export * from "./TabsMui";
+export * from "./TabsMui.js";

package/Tabs/index.js

@@ -0,0 +1 @@
+export * from "./TabsMui.js";

package/Tabs/sc/bare.d.ts

@@ -1,5 +0,0 @@
-/**
- * @file
- *
- * Here we manage only "vertical" oriented tabs for now
- */

package/Tabs/sc/bare.js

@@ -0,0 +1 @@
+"use strict";

package/Tabs/tw/bare.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export type { KoineTabsProps } from "../TabsMui";
+export type { KoineTabsProps } from "../TabsMui.js";
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;

package/Tabs/tw/bare.js

@@ -0,0 +1,16 @@
+import { __makeTemplateObject } from "tslib";
+import { classed, extendComponent } from "../../helpers/index.js";
+import * as _ from "../TabsMui.js";
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\"tabs"], ["< class=\"tabs"])));
+export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"tabsList flex"], ["< class=\"tabsList flex"])));
+export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"], ["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"])));
+export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"tabsIndicator"], ["< class=\"tabsIndicator"])));
+export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+export var KoineTabs = extendComponent(_.KoineTabs, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;