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

package/Rating/Rating.mjs

@@ -1,128 +0,0 @@
-import { useCallback, useEffect, useId, useState } from "react";
-import styled from "styled-components";
-export const RatingStarRoot = styled.svg`
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 1px;
-`;
-export const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props })=>{
-    const id = useId();
-    return /*#__PURE__*/ React.createElement(RatingStarRoot, {
-        viewBox: "0 0 16 16",
-        "data-value": value,
-        width: size + "px",
-        height: size + "px",
-        ...props
-    }, /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement("linearGradient", {
-        id: id,
-        x1: "0",
-        y1: "0",
-        x2: "1",
-        y2: "0"
-    }, /*#__PURE__*/ React.createElement("stop", {
-        offset: "0",
-        stopColor: colorBg
-    }), /*#__PURE__*/ React.createElement("stop", {
-        offset: value,
-        stopColor: colorBg
-    }), /*#__PURE__*/ React.createElement("stop", {
-        offset: value,
-        stopColor: "rgba(255, 255, 255, 0)"
-    }))), /*#__PURE__*/ React.createElement("path", {
-        stroke: colorStroke,
-        strokeWidth: "0.5",
-        fill: `url(#${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 const RatingDetails = styled.span`
-  padding-left: 0.5em;
-  font-size: 12px;
-  color: var(--grey100);
-
-  &:before {
-    content: "(";
-  }
-  &:after {
-    content: ")";
-  }
-`;
-export const RatingCount = styled.span``;
-export const RatingValue = styled.span`
-  display: none;
-`;
-export const RatingRoot = styled.div`
-  display: flex;
-  align-items: center;
-
-  &:hover ${RatingValue} {
-    display: inline-block;
-  }
-`;
-export const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16 })=>{
-    const id = useId();
-    const [currentValue /* , _setCurrentValue */ ] = useState(value);
-    const [stars, setStars] = useState([]);
-    const getStars = useCallback((activeCount)=>{
-        const stars = [];
-        for(let currentStar = min + 1; currentStar < max + 1; currentStar++){
-            let starValue;
-            const roundedActiveCount = Math.floor(activeCount);
-            // we have a rating of 3.4, when we get to the 4th star:
-            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(()=>{
-        setStars(getStars(currentValue));
-    }, [
-        currentValue,
-        getStars
-    ]);
-    // function updateStars(index) {
-    //   var currentActive = stars.filter((x) => x.active);
-    //   if (index !== currentActive.length) {
-    //     setStars(getStars(index));
-    //   }
-    // }
-    // function handleMouseOver(event) {
-    //   let index = Number(event.currentTarget.getAttribute("data-idx")) + 1;
-    //   updateStars(index);
-    // }
-    // function handleMouseLeave() {
-    //   setStars(getStars());
-    // }
-    // const handleClick = useCallback((event) => {
-    //   let index = Number(event.currentTarget.getAttribute("data-idx"));
-    //   let value  = index = index + 1;
-    //   if (value !== currentValue) {
-    //     setStars(getStars(value));
-    //     setCurrentValue(value);
-    //     onChange(value);
-    //   }
-    // }, [onChange];
-    return /*#__PURE__*/ React.createElement(RatingRoot, null, stars.map((star, idx)=>/*#__PURE__*/ React.createElement(RatingStar, {
-            key: id + idx,
-            idx: idx,
-            dataIdx: idx,
-            size: starSize,
-            // onMouseOver={handleMouseOver}
-            // onMouseLeave={handleMouseLeave}
-            // onClick={handleClick}
-            value: star.value,
-            colorBg: colorBg,
-            colorStroke: colorStroke
-        })), " ", showDetails && count && /*#__PURE__*/ React.createElement(RatingDetails, null, /*#__PURE__*/ React.createElement(RatingCount, null, count), /*#__PURE__*/ React.createElement(RatingValue, null, ` - ${value}`)));
-};

package/Rating/index.d.ts

@@ -1,11 +0,0 @@
-export * from "./Rating";
-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;
-    count: number;
-};

package/Rating/index.js

@@ -1,85 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    getRatingWord: function() {
-        return getRatingWord;
-    },
-    getRatingValue: function() {
-        return getRatingValue;
-    },
-    convertRange: function() {
-        return convertRange;
-    },
-    deriveRating: function() {
-        return deriveRating;
-    }
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Rating"), exports);
-const RATING_WORDS = {
-    0: "Worst",
-    1: "Bad",
-    2: "Mediocre",
-    3: "Good",
-    4: "Great",
-    4.5: "Excellent",
-    5: "Best"
-};
-const getRatingWord = (value, precision = 0.5)=>{
-    let buffer = 0;
-    let word;
-    while(buffer < value){
-        // @ts-expect-error can't remember
-        word = RATING_WORDS[buffer];
-        buffer += precision;
-    }
-    return word;
-};
-const getRatingValue = (value)=>{
-    const converted = convertRange(value, [
-        0,
-        5
-    ], [
-        0,
-        10
-    ]);
-    if (converted % 1 === 0) {
-        return converted;
-    }
-    return converted.toFixed(1);
-};
-function convertRange(value, r1, r2) {
-    return (value - r1[0]) * (r2[1] - r2[0]) / (r1[1] - r1[0]) + r2[0];
-}
-const deriveRating = (title, date, minValue = 3.8, maxValue = 5, minQuantity = 9)=>{
-    const entityTime = date.getTime();
-    const nowTime = new Date().getTime();
-    const length = title.length;
-    const value = Number(convertRange(length, [
-        0,
-        90
-    ], [
-        minValue,
-        maxValue
-    ]).toFixed(2));
-    const timeDifference = convertRange(nowTime - entityTime, [
-        0,
-        10000000000000
-    ], [
-        minQuantity,
-        999999
-    ]);
-    const count = Math.round(timeDifference / length);
-    return {
-        value,
-        count
-    };
-};

package/Rating/index.mjs

@@ -1,62 +0,0 @@
-export * from "./Rating";
-const RATING_WORDS = {
-    0: "Worst",
-    1: "Bad",
-    2: "Mediocre",
-    3: "Good",
-    4: "Great",
-    4.5: "Excellent",
-    5: "Best"
-};
-export const getRatingWord = (value, precision = 0.5)=>{
-    let buffer = 0;
-    let word;
-    while(buffer < value){
-        // @ts-expect-error can't remember
-        word = RATING_WORDS[buffer];
-        buffer += precision;
-    }
-    return word;
-};
-export const getRatingValue = (value)=>{
-    const converted = convertRange(value, [
-        0,
-        5
-    ], [
-        0,
-        10
-    ]);
-    if (converted % 1 === 0) {
-        return converted;
-    }
-    return converted.toFixed(1);
-};
-/**
- * @see https://stackoverflow.com/a/14224813
- */ export function convertRange(value, r1, r2) {
-    return (value - r1[0]) * (r2[1] - r2[0]) / (r1[1] - r1[0]) + r2[0];
-}
-export const deriveRating = (title, date, minValue = 3.8, maxValue = 5, minQuantity = 9)=>{
-    const entityTime = date.getTime();
-    const nowTime = new Date().getTime();
-    const length = title.length;
-    const value = Number(convertRange(length, [
-        0,
-        90
-    ], [
-        minValue,
-        maxValue
-    ]).toFixed(2));
-    const timeDifference = convertRange(nowTime - entityTime, [
-        0,
-        10000000000000
-    ], [
-        minQuantity,
-        999999
-    ]);
-    const count = Math.round(timeDifference / length);
-    return {
-        value,
-        count
-    };
-};

package/Select/SelectDownshift.d.ts

@@ -1,5 +0,0 @@
-import type { Option } from "../types";
-export type SelectProps = {
-    options?: Option[];
-};
-export declare const Select: null;

package/Select/SelectDownshift.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Select", {
-    enumerable: true,
-    get: function() {
-        return Select;
-    }
-});
-const Select = null; // import { useSelect } from "downshift";
- // export type SelectProps = {
- //   options?: Option[];
- // };
- // export const Select = ({ options = [] }: SelectProps) => {
- //   const {
- //     isOpen,
- //     selectedItem,
- //     getToggleButtonProps,
- //     getLabelProps,
- //     getMenuProps,
- //     highlightedIndex,
- //     getItemProps,
- //   } = useSelect({ items: options });
- //   return (
- //     <div>
- //       <label {...getLabelProps()}>Choose an element:</label>
- //       <button type="button" {...getToggleButtonProps()}>
- //         {selectedItem || "Elements"}
- //       </button>
- //       <ul {...getMenuProps()}>
- //         {isOpen &&
- //           options.map((item, index) => (
- //             <li
- //               style={
- //                 highlightedIndex === index ? { backgroundColor: "#bde4ff" } : {}
- //               }
- //               key={`${item.value}${index}`}
- //               {...getItemProps({ item, index })}
- //             >
- //               {item.label}
- //             </li>
- //           ))}
- //       </ul>
- //     </div>
- //   );
- // };

package/Select/SelectDownshift.mjs

@@ -1,37 +0,0 @@
-export const Select = null; // import { useSelect } from "downshift";
- // export type SelectProps = {
- //   options?: Option[];
- // };
- // export const Select = ({ options = [] }: SelectProps) => {
- //   const {
- //     isOpen,
- //     selectedItem,
- //     getToggleButtonProps,
- //     getLabelProps,
- //     getMenuProps,
- //     highlightedIndex,
- //     getItemProps,
- //   } = useSelect({ items: options });
- //   return (
- //     <div>
- //       <label {...getLabelProps()}>Choose an element:</label>
- //       <button type="button" {...getToggleButtonProps()}>
- //         {selectedItem || "Elements"}
- //       </button>
- //       <ul {...getMenuProps()}>
- //         {isOpen &&
- //           options.map((item, index) => (
- //             <li
- //               style={
- //                 highlightedIndex === index ? { backgroundColor: "#bde4ff" } : {}
- //               }
- //               key={`${item.value}${index}`}
- //               {...getItemProps({ item, index })}
- //             >
- //               {item.label}
- //             </li>
- //           ))}
- //       </ul>
- //     </div>
- //   );
- // };

package/Select/components.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-export declare const SelectArrowStyled: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLSpanElement, import("framer-motion").HTMLMotionProps<"span">>, import("styled-components").DefaultTheme, {}, never>;
-export type SelectArrowProps = {
-    isOpen?: boolean;
-};
-export declare const SelectArrow: import("react").ForwardRefExoticComponent<SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>;

package/Select/components.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    SelectArrowStyled: function() {
-        return SelectArrowStyled;
-    },
-    SelectArrow: function() {
-        return SelectArrow;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _framermotion = require("framer-motion");
-const _react = require("react");
-const _bs = require("react-icons/bs");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const SelectArrowStyled = (0, _styledcomponents.default)(_framermotion.m.span)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2em;
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-`;
-const SelectArrow = /*#__PURE__*/ (0, _react.forwardRef)(function SelectArrow({ isOpen, ...props }, ref) {
-    return /*#__PURE__*/ React.createElement(SelectArrowStyled, {
-        animate: {
-            rotate: isOpen ? 180 : 0
-        },
-        ref: ref,
-        ...props
-    }, /*#__PURE__*/ React.createElement(_bs.BsBoxArrowInDown, null));
-});

package/Select/components.mjs

@@ -1,23 +0,0 @@
-import { m } from "framer-motion";
-import { forwardRef } from "react";
-import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
-import styled from "styled-components";
-export const SelectArrowStyled = styled(m.span)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2em;
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-`;
-export const SelectArrow = /*#__PURE__*/ forwardRef(function SelectArrow({ isOpen, ...props }, ref) {
-    return /*#__PURE__*/ React.createElement(SelectArrowStyled, {
-        animate: {
-            rotate: isOpen ? 180 : 0
-        },
-        ref: ref,
-        ...props
-    }, /*#__PURE__*/ React.createElement(IconCollapse, null));
-});

package/Select/index.d.ts

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

package/Select/index.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Select", {
-    enumerable: true,
-    get: function() {
-        return _SelectDownshift.Select;
-    }
-});
-const _SelectDownshift = require("./SelectDownshift");
- // export type { SelectProps } from "./SelectReach";
- // export { Select } from "./SelectReach";

package/Select/index.mjs

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

package/Sidebar/Sidebar.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export type SidebarProps = React.PropsWithChildren<unknown>;
-export declare const Sidebar: ({ children }: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/Sidebar/Sidebar.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Sidebar", {
-    enumerable: true,
-    get: function() {
-        return Sidebar;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _cg = require("react-icons/cg");
-const _gr = require("react-icons/gr");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Buttons = require("../Buttons");
-const _Header = require("../Header");
-const _media = require("../styles/media");
-const SidebarWrapper = _styledcomponents.default.div`
-  ${(p)=>`${_media.max.md} {
-      z-index: 20;
-      display: flex;
-      flex-direction: column;
-      position: fixed;
-      right: 0;
-      left: var(--gutter-half);
-      top: ${p.$top || 0}px;
-      bottom: 0;
-      padding: var(--gutter-half);
-      transform: ${p.$open ? `translateX(0)` : `translateX(100%)`};
-      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
-      background: white;
-      box-shadow: ${p.$open ? `0 0 0 100vh rgba(0, 0, 0, .3)` : `0 0 100vh rgba(0, 0, 0, 0)`};
-      will-change: transform, box-shadow;
-      pointer-events: ${p.$open ? "all" : "none"}
-    }`}
-`;
-const SidebarToggle = _styledcomponents.default.span`
-  z-index: 21;
-  position: fixed;
-  right: var(--gutter-half);
-  bottom: var(--gutter-half);
-  ${_media.min.md} {
-    display: none;
-  }
-
-  path {
-    stroke: currentColor;
-  }
-`;
-const Sidebar = ({ children })=>{
-    const [open, setOpen] = (0, _react.useState)(false);
-    const [, , headerHeight] = (0, _Header.useHeader)();
-    const handleClickToggle = (0, _react.useCallback)(()=>{
-        setOpen((prevOpen)=>!prevOpen);
-    }, []);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(SidebarToggle, {
-        onClick: handleClickToggle
-    }, /*#__PURE__*/ React.createElement(_Buttons.IconButtonFab, {
-        $variant: "contained"
-    }, open ? /*#__PURE__*/ React.createElement(_cg.CgCloseR, null) : /*#__PURE__*/ React.createElement(_gr.GrFolderOpen, null))), /*#__PURE__*/ React.createElement(SidebarWrapper, {
-        $open: open,
-        $top: headerHeight
-    }, children));
-};

package/Sidebar/Sidebar.mjs

@@ -1,54 +0,0 @@
-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";
-import { useHeader } from "../Header";
-import { max, min } from "../styles/media";
-const SidebarWrapper = styled.div`
-  ${(p)=>`${max.md} {
-      z-index: 20;
-      display: flex;
-      flex-direction: column;
-      position: fixed;
-      right: 0;
-      left: var(--gutter-half);
-      top: ${p.$top || 0}px;
-      bottom: 0;
-      padding: var(--gutter-half);
-      transform: ${p.$open ? `translateX(0)` : `translateX(100%)`};
-      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
-      background: white;
-      box-shadow: ${p.$open ? `0 0 0 100vh rgba(0, 0, 0, .3)` : `0 0 100vh rgba(0, 0, 0, 0)`};
-      will-change: transform, box-shadow;
-      pointer-events: ${p.$open ? "all" : "none"}
-    }`}
-`;
-const SidebarToggle = styled.span`
-  z-index: 21;
-  position: fixed;
-  right: var(--gutter-half);
-  bottom: var(--gutter-half);
-  ${min.md} {
-    display: none;
-  }
-
-  path {
-    stroke: currentColor;
-  }
-`;
-export const Sidebar = ({ children })=>{
-    const [open, setOpen] = useState(false);
-    const [, , headerHeight] = useHeader();
-    const handleClickToggle = useCallback(()=>{
-        setOpen((prevOpen)=>!prevOpen);
-    }, []);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(SidebarToggle, {
-        onClick: handleClickToggle
-    }, /*#__PURE__*/ React.createElement(IconButtonFab, {
-        $variant: "contained"
-    }, open ? /*#__PURE__*/ React.createElement(IconClose, null) : /*#__PURE__*/ React.createElement(IconOpen, null))), /*#__PURE__*/ React.createElement(SidebarWrapper, {
-        $open: open,
-        $top: headerHeight
-    }, children));
-};

package/Sidebar/index.d.ts

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

package/Sidebar/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Sidebar"), exports);

package/Sidebar/index.mjs

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

package/Spacing/Spacing.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="react" />
-import { SpacingDevices, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize } from "../styles/spacing";
-export type SpacingPropsStyled = {
-    $top?: SpacingFnArgs;
-    $bottom?: SpacingFnArgs;
-};
-type SpacingFnArgs = [
-    SpacingSize,
-    SpacingFactor,
-    SpacingProperty,
-    SpacingDevices[]
-];
-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 {};