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

package/Progress/ProgressCircular.d.ts

@@ -1,19 +0,0 @@
-import { CSSProperties } from "styled-components";
-import type { Theme } from "../styles/theme";
-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;
-    thickness?: number | undefined;
-    color?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;

package/Progress/ProgressCircular.js

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "ProgressCircular", {
-    enumerable: true,
-    get: function() {
-        return ProgressCircular;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
-const animationRotation = (0, _styledcomponents.keyframes)`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-const animationCircle = (0, _styledcomponents.keyframes)`
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-  100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
-  }
-`;
-const ProgressCircularSvg = _styledcomponents.default.svg`
-  animation: ${animationRotation} 1.5s linear infinite;
-`;
-const ProgressCircularCircle = _styledcomponents.default.circle`
-  animation: ${animationCircle} 1.5s linear infinite;
-`;
-const ProgressCircular = ({ size = "1em", thickness = 1, color = "currentColor", ...props })=>{
-    return /*#__PURE__*/ React.createElement(ProgressCircularSvg, {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 44 44",
-        style: {
-            width: size,
-            height: size
-        },
-        ...props
-    }, /*#__PURE__*/ React.createElement(ProgressCircularCircle, {
-        cx: "22",
-        cy: "22",
-        r: "20",
-        fill: "none",
-        strokeWidth: thickness,
-        style: {
-            stroke: color
-        }
-    }));
-};

package/Progress/ProgressCircular.mjs

@@ -1,51 +0,0 @@
-import styled, { keyframes } from "styled-components";
-const animationRotation = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-const animationCircle = keyframes`
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-  100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
-  }
-`;
-const ProgressCircularSvg = styled.svg`
-  animation: ${animationRotation} 1.5s linear infinite;
-`;
-const ProgressCircularCircle = styled.circle`
-  animation: ${animationCircle} 1.5s linear infinite;
-`;
-/**
- * @see https://mui.com/components/progress/
- */ export const ProgressCircular = ({ size = "1em", thickness = 1, color = "currentColor", ...props })=>{
-    return /*#__PURE__*/ React.createElement(ProgressCircularSvg, {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 44 44",
-        style: {
-            width: size,
-            height: size
-        },
-        ...props
-    }, /*#__PURE__*/ React.createElement(ProgressCircularCircle, {
-        cx: "22",
-        cy: "22",
-        r: "20",
-        fill: "none",
-        strokeWidth: thickness,
-        style: {
-            stroke: color
-        }
-    }));
-};

package/Progress/ProgressLinear.d.ts

@@ -1,22 +0,0 @@
-import { CSSProperties } from "styled-components";
-import type { Theme } from "../styles/theme";
-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;
-    height?: string | undefined;
-    bg?: string | undefined;
-    fg?: string | undefined;
-}) => import("react/jsx-runtime").JSX.Element;

package/Progress/ProgressLinear.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "ProgressLinear", {
-    enumerable: true,
-    get: function() {
-        return ProgressLinear;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _framermotion = require("framer-motion");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const ProgressLinearBg = _styledcomponents.default.span`
-  position: relative;
-  overflow: hidden;
-  display: block;
-  height: 4px;
-`;
-const ProgressLinearFg = (0, _styledcomponents.default)(_framermotion.m.span)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-`;
-const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props })=>{
-    return /*#__PURE__*/ React.createElement(ProgressLinearBg, {
-        style: {
-            height,
-            background: bg
-        },
-        ...props
-    }, /*#__PURE__*/ React.createElement(ProgressLinearFg, {
-        style: {
-            height,
-            background: fg
-        },
-        initial: {
-            x: "-100%"
-        },
-        animate: {
-            x: done ? "-100%" : "0%"
-        },
-        transition: done ? {} : {
-            repeat: Infinity,
-            repeatType: "reverse",
-            duration: 2
-        }
-    }));
-};

package/Progress/ProgressLinear.mjs

@@ -1,42 +0,0 @@
-import { m } from "framer-motion";
-import styled from "styled-components";
-const ProgressLinearBg = styled.span`
-  position: relative;
-  overflow: hidden;
-  display: block;
-  height: 4px;
-`;
-const ProgressLinearFg = styled(m.span)`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-`;
-/**
- * @see https://mui.com/components/progress/#linear
- */ export const ProgressLinear = ({ done = false, height = "2px", bg = "transparent", fg = "currentColor", ...props })=>{
-    return /*#__PURE__*/ React.createElement(ProgressLinearBg, {
-        style: {
-            height,
-            background: bg
-        },
-        ...props
-    }, /*#__PURE__*/ React.createElement(ProgressLinearFg, {
-        style: {
-            height,
-            background: fg
-        },
-        initial: {
-            x: "-100%"
-        },
-        animate: {
-            x: done ? "-100%" : "0%"
-        },
-        transition: done ? {} : {
-            repeat: Infinity,
-            repeatType: "reverse",
-            duration: 2
-        }
-    }));
-};

package/Progress/ProgressOverlay.d.ts

@@ -1,4 +0,0 @@
-export type ProgressOverlayProps = {
-    running?: boolean;
-};
-export declare const ProgressOverlay: ({ running }: ProgressOverlayProps) => import("react/jsx-runtime").JSX.Element;

package/Progress/ProgressOverlay.js

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "ProgressOverlay", {
-    enumerable: true,
-    get: function() {
-        return ProgressOverlay;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _framermotion = require("framer-motion");
-const _react = require("react");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Header = require("../Header");
-const _ProgressCircular = require("./ProgressCircular");
-const _ProgressLinear = require("./ProgressLinear");
-const ProgressOverlayWrap = (0, _styledcomponents.default)(_framermotion.m.div)`
-  z-index: 10000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  cursor: wait;
-`;
-const ProgressOverlayCenterer = _styledcomponents.default.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--progress-overlay-bg);
-`;
-const ProgressOverlay = ({ running })=>{
-    const [, , headerHeight] = (0, _Header.useHeader)();
-    // const [progress, setProgress] = useState(0);
-    (0, _react.useEffect)(()=>{
-        document.body.style.cursor = running ? "wait" : "";
-    }, [
-        running
-    ]);
-    return /*#__PURE__*/ React.createElement(ProgressOverlayWrap, {
-        animate: {
-            opacity: running ? 1 : 0
-        },
-        initial: {
-            opacity: 0
-        },
-        transition: {
-            type: "easeInOut"
-        }
-    }, /*#__PURE__*/ React.createElement(_ProgressLinear.ProgressLinear, {
-        bg: "var(--accent400)",
-        fg: "var(--accent300)",
-        done: !running
-    }), /*#__PURE__*/ React.createElement(ProgressOverlayCenterer, {
-        style: {
-            top: headerHeight + "px"
-        }
-    }, /*#__PURE__*/ React.createElement(_ProgressCircular.ProgressCircular, {
-        size: "50px",
-        color: "var(--accent300)"
-    })));
-};

package/Progress/ProgressOverlay.mjs

@@ -1,58 +0,0 @@
-import { m } from "framer-motion";
-import { useEffect } from "react";
-import styled from "styled-components";
-import { useHeader } from "../Header";
-import { ProgressCircular } from "./ProgressCircular";
-import { ProgressLinear } from "./ProgressLinear";
-const ProgressOverlayWrap = styled(m.div)`
-  z-index: 10000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  cursor: wait;
-`;
-const ProgressOverlayCenterer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--progress-overlay-bg);
-`;
-export const ProgressOverlay = ({ running })=>{
-    const [, , headerHeight] = useHeader();
-    // const [progress, setProgress] = useState(0);
-    useEffect(()=>{
-        document.body.style.cursor = running ? "wait" : "";
-    }, [
-        running
-    ]);
-    return /*#__PURE__*/ React.createElement(ProgressOverlayWrap, {
-        animate: {
-            opacity: running ? 1 : 0
-        },
-        initial: {
-            opacity: 0
-        },
-        transition: {
-            type: "easeInOut"
-        }
-    }, /*#__PURE__*/ React.createElement(ProgressLinear, {
-        bg: "var(--accent400)",
-        fg: "var(--accent300)",
-        done: !running
-    }), /*#__PURE__*/ React.createElement(ProgressOverlayCenterer, {
-        style: {
-            top: headerHeight + "px"
-        }
-    }, /*#__PURE__*/ React.createElement(ProgressCircular, {
-        size: "50px",
-        color: "var(--accent300)"
-    })));
-};

package/Progress/index.d.ts

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

package/Progress/index.js

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

package/Progress/index.mjs

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

package/Rating/Rating.d.ts

@@ -1,35 +0,0 @@
-/// <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: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingStar: ({ value, colorBg, colorStroke, size, ...props }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
-export declare const RatingDetails: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingValue: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export type RatingStarModel = {
-    value: number;
-    idx?: number;
-    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">;
-export declare const Rating: ({ value, count, min, max, showDetails, colorBg, colorStroke, starSize, }: RatingProps) => import("react/jsx-runtime").JSX.Element;

package/Rating/Rating.js

@@ -1,162 +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, {
-    RatingStarRoot: function() {
-        return RatingStarRoot;
-    },
-    RatingStar: function() {
-        return RatingStar;
-    },
-    RatingDetails: function() {
-        return RatingDetails;
-    },
-    RatingCount: function() {
-        return RatingCount;
-    },
-    RatingValue: function() {
-        return RatingValue;
-    },
-    RatingRoot: function() {
-        return RatingRoot;
-    },
-    Rating: function() {
-        return Rating;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const RatingStarRoot = _styledcomponents.default.svg`
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 1px;
-`;
-const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props })=>{
-    const id = (0, _react.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"
-    }));
-};
-const RatingDetails = _styledcomponents.default.span`
-  padding-left: 0.5em;
-  font-size: 12px;
-  color: var(--grey100);
-
-  &:before {
-    content: "(";
-  }
-  &:after {
-    content: ")";
-  }
-`;
-const RatingCount = _styledcomponents.default.span``;
-const RatingValue = _styledcomponents.default.span`
-  display: none;
-`;
-const RatingRoot = _styledcomponents.default.div`
-  display: flex;
-  align-items: center;
-
-  &:hover ${RatingValue} {
-    display: inline-block;
-  }
-`;
-const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16 })=>{
-    const id = (0, _react.useId)();
-    const [currentValue /* , _setCurrentValue */ ] = (0, _react.useState)(value);
-    const [stars, setStars] = (0, _react.useState)([]);
-    const getStars = (0, _react.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
-    ]);
-    (0, _react.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}`)));
-};