@koine/react 1.0.10 → 1.0.13

package/Hidden/Hidden.js

@@ -0,0 +1,10 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var Hidden = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return "".concat(p.$min
+        ? "\n  @media (min-width: ".concat(p.theme.breakpoints[p.$min], "px) {\n    display: none;\n  }")
+        : "", " ").concat(p.$max
+        ? "\n  @media (max-width: ".concat(p.theme.breakpoints[p.$max], "px) {\n    display: none;\n  }")
+        : "");
+});
+var templateObject_1;

package/Hidden/index.d.ts

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

package/Hidden/index.js

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

package/Hidden/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Hidden/index.js",
+  "types": "./index.d.ts"
+}

package/Img/index.d.ts

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

package/Img/index.js

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

package/Img/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Img/index.js",
+  "types": "./index.d.ts"
+}

package/Img/sc/bare.d.ts

@@ -0,0 +1,2 @@
+export declare type KoineImgProps = {};
+export declare const KoineImg: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;

package/Img/sc/bare.js

@@ -0,0 +1,39 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+// export type KoineImgProps = {
+//   /** @default "cover" */
+//   $fit?: "cover" | "contain";
+// };
+export var KoineImg = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;
+// export const KoineImg = styled.img<KoineImgProps>`
+//   object-fit: ${(p) => p.$fit || "cover"};
+// `;
+// /**
+//  * Replacement core component for native `<img />`
+//  *
+//  * Features:
+//  *  - lazy load
+//  *  - proportion cage
+//  */
+// export const Img = ({
+//   className,
+//   style = {},
+//   lazyProps,
+//   ...props
+// }: ImgProps) => {
+//   let { width, height, src } = props;
+//   width = width ? `${width}px` : "100%";
+//   height = height ? `${height}px` : "100%";
+//   const imgProps = { width, height, src };
+//   return (
+//     <ImgRoot style={{ width, height, ...style }} className={className}>
+//       <LazyLoad {...lazyProps}>
+//         <ImgNative {...imgProps} />
+//       </LazyLoad>
+//       <noscript>
+//         <img {...imgProps} />
+//       </noscript>
+//     </ImgRoot>
+//   );
+// };

package/Img/types.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare type KoineImgSmartWrapProps = React.PropsWithChildren<{
+    $loaded?: boolean;
+    $error?: boolean;
+    $bg?: React.CSSProperties["backgroundColor"];
+}>;
+export declare type KoineImgSmartProps = {
+    Wrap: React.FC<KoineImgSmartWrapProps>;
+};

package/Img/types.js

@@ -0,0 +1 @@
+export {};

package/Link/Link.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare type KoineLinkProps = React.ComponentPropsWithRef<"a">;
+export declare const KoineLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, never>;

package/Link/Link.js

@@ -0,0 +1,4 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var KoineLink = styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;

package/Link/LinkBlank.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type LinkBlankProps = React.ComponentPropsWithRef<"a">;
+export declare const LinkBlankA: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
+    target: "_blank";
+    rel: "noopener";
+}, "target" | "rel">;
+export declare const LinkBlankIcon: import("styled-components").StyledComponent<import("react-icons/lib").IconType, import("styled-components").DefaultTheme, {}, never>;
+export declare const LinkBlank: ({ children, target, rel, ...props }: LinkBlankProps) => JSX.Element;

package/Link/LinkBlank.js

@@ -0,0 +1,17 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { MdLaunch as IconOutboundLink } from "react-icons/md";
+import { max } from "../styles/media";
+export var LinkBlankA = styled.a.attrs({
+    target: "_blank",
+    rel: "noopener",
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+// TODO: use `touch` class on <html> instead of relying on screenwidth,
+// probably implement a lean Modernizr like thing with react-helmet
+export var LinkBlankIcon = styled(IconOutboundLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"], ["\n  color: var(---grey100);\n  font-size: inherit;\n  margin-left: 3px;\n  line-height: inherit;\n  vertical-align: middle;\n  width: 0px;\n  transition: width 0.1s ease-in-out;\n  ", " {\n    width: 20px;\n    opacity: 0.8;\n  }\n"])), max.sm);
+export var LinkBlank = function (_a) {
+    var children = _a.children, target = _a.target, rel = _a.rel, props = __rest(_a, ["children", "target", "rel"]);
+    return (_jsxs(LinkBlankA, __assign({}, props, { children: [children, _jsx(LinkBlankIcon, {})] })));
+};
+var templateObject_1, templateObject_2;

package/Link/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Link";
+export * from "./LinkBlank";

package/Link/index.js

@@ -0,0 +1,2 @@
+export * from "./Link";
+export * from "./LinkBlank";

package/Link/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Link/index.js",
+  "types": "./index.d.ts"
+}

package/Menu/Menu.d.ts

@@ -0,0 +1 @@
+export declare const Menu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;

package/Menu/Menu.js

@@ -0,0 +1,4 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var Menu = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"], ["\n  z-index: 3;\n  position: absolute;\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  background: #fff;\n  width: 100%;\n  box-shadow: var(--shadow);\n"])));
+var templateObject_1;

package/Menu/index.d.ts

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

package/Menu/index.js

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

package/Menu/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Menu/index.js",
+  "types": "./index.d.ts"
+}

package/MenuItem/MenuItem.d.ts

@@ -0,0 +1,4 @@
+export declare const MenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    $active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;

package/MenuItem/MenuItem.js

@@ -0,0 +1,4 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var MenuItem = styled.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 8px 16px;\n\n  &[aria-selected=\"true\"] {\n    background: var(--accent400);\n  }\n\n  /** DEP: this is just for MultiselectMui? */\n  &.Mui-focused,\n  &[data-focus=\"true\"] {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:not([disabled]):hover {\n    cursor: pointer;\n    background: var(--accent300);\n  }\n"], ["\n  padding: 8px 16px;\n\n  &[aria-selected=\"true\"] {\n    background: var(--accent400);\n  }\n\n  /** DEP: this is just for MultiselectMui? */\n  &.Mui-focused,\n  &[data-focus=\"true\"] {\n    background: var(--accent300);\n    color: white;\n  }\n\n  &:not([disabled]):hover {\n    cursor: pointer;\n    background: var(--accent300);\n  }\n"])));
+var templateObject_1;

package/MenuItem/index.d.ts

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

package/MenuItem/index.js

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

package/MenuItem/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/MenuItem/index.js",
+  "types": "./index.d.ts"
+}

package/Meta/Meta.d.ts

@@ -0,0 +1,14 @@
+export declare type MetaProps = {
+    /**
+     * Determines whether `user-scalable=0` is add to the `meta->viewport` content
+     *
+     * This is an opt in instead of the default browser behaviour as it helps prevent
+     * weird zooming on input fields on iPhone iOS devices.
+     * @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
+     * @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
+     *
+     * @default false
+     */
+    zoom?: boolean;
+};
+export declare const Meta: ({ zoom }: MetaProps) => JSX.Element;

package/Meta/Meta.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Meta = function (_a) {
+    var zoom = _a.zoom;
+    return (_jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1".concat(zoom ? "" : ", user-scalable=0") }));
+};

package/Meta/index.d.ts

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

package/Meta/index.js

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

package/Meta/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Meta/index.js",
+  "types": "./index.d.ts"
+}

package/NoJs/NoJs.d.ts

@@ -0,0 +1,2 @@
+export declare type NoJsProps = object;
+export declare const NoJs: (_props: NoJsProps) => JSX.Element;

package/NoJs/NoJs.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export var NoJs = function (_props) {
+    return (_jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
+            __html: "document.querySelector(\"html\").className=document.querySelector(\"html\").className.replace(/no-js/,\"\") + \"js\";",
+        } }));
+};

package/NoJs/index.d.ts

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

package/NoJs/index.js

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

package/NoJs/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/NoJs/index.js",
+  "types": "./index.d.ts"
+}

package/Pagination/PaginationNav.d.ts

@@ -0,0 +1,22 @@
+import { KoineComponentProps, KoineComponent } from "../types";
+export declare 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;
+};
+declare type PaginationNavProps = KoineComponentProps<KoinePaginationNavProps, {
+    currentUrl?: string;
+    Link?: KoineComponent;
+}>;
+export declare const KoinePaginationNav: ({ total, perPage, currentPage, baseUrl, showOffset, currentUrl, Link, }: PaginationNavProps) => JSX.Element | null;
+export {};

package/Pagination/PaginationNav.js

@@ -0,0 +1,61 @@
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { CgArrowRightR as IconArrowRight, CgArrowLeftR as IconArrowLeft, } from "react-icons/cg";
+import { ensureInt } from "@koine/utils";
+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);
+/*
+ * Possible outcomes:
+ * [1] 2 3 ... 78 >
+ * < 1 2 [3] 4 5 ... 78 >
+ * < 1 ... 6 7 [8] 9 10 ... 78 >
+ * < 1 ... 75 76 [77] 78 >
+ * < 1 ... 76 77 [78]
+ */
+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;
+    total = ensureInt(total);
+    currentPage = ensureInt(currentPage);
+    perPage = ensureInt(perPage);
+    // page 0 means 1
+    currentPage = currentPage || 1;
+    baseUrl = baseUrl || currentUrl;
+    // don't output anything if pagination is not needed
+    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 = [];
+    // fill the pages before the current
+    for (var i = currentPage - showOffset; i < currentPage; i++) {
+        if (i > 1) {
+            pages.push(i);
+        }
+    }
+    // add the current
+    pages.push(currentPage);
+    // fill the pages after the current
+    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, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(prevPage) }, { children: _jsx(IconArrowLeft, {}) }))), firstPage !== currentPage && (_jsx(ItemLink, __assign({ 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, __assign({ 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, __assign({ as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true }, { children: lastPage }))), nextArrow && (_jsx(ItemNext, __assign({ 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.d.ts

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

package/Pagination/PaginationResults.js

@@ -0,0 +1,11 @@
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { AnimatePresence, m } from "framer-motion";
+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, __assign({ exitBeforeEnter: true, initial: true }, { children: _jsx(Root, { children: _jsx(Inner, __assign({ 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

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

package/Pagination/index.js

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

package/Pagination/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Pagination/index.js",
+  "types": "./index.d.ts"
+}

package/Pill/Pill.d.ts

@@ -0,0 +1,5 @@
+export declare type PillProps = object;
+export declare const Pill: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & object, never>;
+export declare const PillGreyLight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & object, never>;
+export declare const PillAccentLight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & object, never>;
+export declare const PillAccentLightOutlined: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & object, never>;

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

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

package/Pill/index.js

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

package/Pill/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Pill/index.js",
+  "types": "./index.d.ts"
+}

package/Progress/ProgressCircular.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from "styled-components";
+import type { Theme } from "../styles/theme";
+export declare 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;
+}) => JSX.Element;

package/Progress/ProgressCircular.js

@@ -0,0 +1,15 @@
+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);
+/**
+ * @see https://mui.com/components/progress/
+ */
+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

@@ -0,0 +1,22 @@
+import { CSSProperties } from "styled-components";
+import type { Theme } from "../styles/theme";
+export declare 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;
+}) => JSX.Element;

package/Progress/ProgressLinear.js

@@ -0,0 +1,24 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { m } from "framer-motion";
+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"])));
+/**
+ * @see https://mui.com/components/progress/#linear
+ */
+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.d.ts

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

package/Progress/ProgressOverlay.js

@@ -0,0 +1,24 @@
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import styled from "styled-components";
+import { m } from "framer-motion";
+import { ProgressCircular } from "./ProgressCircular";
+import { ProgressLinear } from "./ProgressLinear";
+import { useHeader } from "../Header";
+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];
+    // const [progress, setProgress] = useState(0);
+    useEffect(function () {
+        document.body.style.cursor = running ? "wait" : "";
+    }, [running]);
+    return (_jsxs(ProgressOverlayWrap, __assign({ animate: {
+            opacity: running ? 1 : 0,
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, __assign({ style: {
+                    top: headerHeight + "px",
+                } }, { children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
+};
+var templateObject_1, templateObject_2;

package/Progress/index.d.ts

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

package/Progress/index.js

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

package/Progress/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Progress/index.js",
+  "types": "./index.d.ts"
+}

package/Rating/Rating.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export declare 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) => 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 declare type RatingStarModel = {
+    value: number;
+    idx?: number;
+    dataIdx?: number;
+};
+export declare 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) => JSX.Element;