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

package/MenuItem/useMenuItem.mjs

@@ -1,78 +0,0 @@
-import useMenu from "@mui/base/useMenu";
-import useForkRef from "@mui/utils/useForkRef";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
-// import { unstable_useIsFocusVisible as useIsFocusVisible } from "@mui/utils";
-export function useMenuItem(props) {
-    const { disabled = false, rootRef: ref, label } = props;
-    const id = useId();
-    const { contextValue, open } = useMenu();
-    // const { getRootProps } = useMenuItemUnstyled(props);
-    const itemRef = useRef(null);
-    const handleRef = useForkRef(itemRef, ref);
-    if (contextValue === null) {
-        throw new Error("MenuItemUnstyled must be used within a MenuUnstyled");
-    }
-    const { registerItem, getItemState } = contextValue;
-    useEffect(()=>{
-        registerItem(id, {
-            disabled,
-            id,
-            ref: itemRef,
-            label
-        });
-    // return () => unregisterItem(id);
-    }, [
-        id,
-        registerItem,
-        /* unregisterItem,  */ disabled,
-        ref,
-        label
-    ]);
-    // const { getRootProps: getButtonProps, focusVisible } = useButton({
-    //   disabled,
-    //   focusableWhenDisabled: true,
-    //   ref: handleRef,
-    // });
-    // Ensure the menu item is focused when highlighted
-    const [focusRequested, requestFocus] = useState(false);
-    const focusIfRequested = useCallback(()=>{
-        if (focusRequested && itemRef.current != null) {
-            itemRef.current.focus();
-            requestFocus(false);
-        }
-    }, [
-        focusRequested
-    ]);
-    useEffect(()=>{
-        focusIfRequested();
-    });
-    // useDebugValue({ id, disabled, label });
-    const itemState = getItemState(id ?? "");
-    const { highlighted } = itemState ?? {
-        highlighted: false
-    };
-    useEffect(()=>{
-        requestFocus(highlighted && open);
-    }, [
-        highlighted,
-        open
-    ]);
-    return {
-        getRootProps: (other)=>{
-            // const optionProps = menuContext.getItemProps(id, other);
-            return {
-                ...other,
-                // ...getButtonProps(other),
-                // @ ts-expect-error type from @mui/base is not specific
-                // tabIndex: optionProps.tabIndex,
-                // @ ts-expect-error type from @mui/base is not specific
-                // id: optionProps.id,
-                role: "menuitem"
-            };
-        },
-        disabled: itemState?.disabled ?? false,
-        // focusVisible,
-        ref: handleRef
-    };
-}
-export default useMenuItem;

package/Meta/Meta.d.ts

@@ -1,15 +0,0 @@
-export 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) => import("react/jsx-runtime").JSX.Element;
-export default Meta;

package/Meta/Meta.js

@@ -1,25 +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, {
-    Meta: function() {
-        return Meta;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const Meta = ({ zoom })=>{
-    return /*#__PURE__*/ React.createElement("meta", {
-        name: "viewport",
-        content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}`
-    });
-};
-const _default = Meta;

package/Meta/Meta.mjs

@@ -1,7 +0,0 @@
-export const Meta = ({ zoom })=>{
-    return /*#__PURE__*/ React.createElement("meta", {
-        name: "viewport",
-        content: `width=device-width, initial-scale=1, maximum-scale=1${zoom ? "" : ", user-scalable=0"}`
-    });
-};
-export default Meta;

package/Meta/index.d.ts

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

package/Meta/index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _Meta.Meta;
-    }
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-const _Meta = _export_star._(require("./Meta"), exports);

package/Meta/index.mjs

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

package/NoJs/NoJs.d.ts

@@ -1,3 +0,0 @@
-export type NoJsProps = object;
-export declare const NoJs: (_props: NoJsProps) => import("react/jsx-runtime").JSX.Element;
-export default NoJs;

package/NoJs/NoJs.js

@@ -1,27 +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, {
-    NoJs: function() {
-        return NoJs;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const NoJs = (_props)=>{
-    return /*#__PURE__*/ React.createElement("script", {
-        id: "no-js",
-        dangerouslySetInnerHTML: {
-            __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`
-        }
-    });
-};
-const _default = NoJs;

package/NoJs/NoJs.mjs

@@ -1,9 +0,0 @@
-export const NoJs = (_props)=>{
-    return /*#__PURE__*/ React.createElement("script", {
-        id: "no-js",
-        dangerouslySetInnerHTML: {
-            __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`
-        }
-    });
-};
-export default NoJs;

package/NoJs/index.d.ts

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

package/NoJs/index.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _NoJs.NoJs;
-    }
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-const _NoJs = _export_star._(require("./NoJs"), exports);

package/NoJs/index.mjs

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

package/Pagination/PaginationNav.d.ts

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

package/Pagination/PaginationNav.js

@@ -1,107 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "KoinePaginationNav", {
-    enumerable: true,
-    get: function() {
-        return KoinePaginationNav;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _cg = require("react-icons/cg");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _ensureInt = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/ensureInt"));
-const Root = _styledcomponents.default.nav`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px 0 40px;
-  font-weight: 600;
-
-  & a {
-    text-decoration: none;
-  }
-`;
-const item = `
-  display: block;
-  padding: 5px 10px;
-`;
-const ItemCurrent = _styledcomponents.default.span`
-  ${item}
-  background: var(--accent400);
-  border-radius: 2px;
-`;
-const ItemLink = _styledcomponents.default.a`
-  ${item}
-
-  ${(props)=>props.prev ? "color: var(--grey100);" : ""}
-`;
-const DotsSeparator = _styledcomponents.default.span`
-  color: var(--grey100);
-`;
-const arrow = `display: flex; font-size: 20px;`;
-const ItemPrev = _styledcomponents.default.a`
-  ${arrow}
-`;
-const ItemNext = _styledcomponents.default.a`
-  ${arrow}
-`;
-const KoinePaginationNav = ({ total, perPage, currentPage: _currentPage, baseUrl, showOffset = 2, currentUrl = "/", Link = "a" })=>{
-    let currentPage = (0, _ensureInt.default)(_currentPage);
-    total = (0, _ensureInt.default)(total);
-    perPage = (0, _ensureInt.default)(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;
-    }
-    const firstPage = 1;
-    const lastPage = Math.ceil(total / perPage);
-    const prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
-    const nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
-    const prevArrow = currentPage > firstPage;
-    const nextArrow = currentPage < lastPage;
-    const pages = [];
-    // fill the pages before the current
-    for(let 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(let i = currentPage + 1; i < currentPage + 1 + showOffset; i++){
-        if (i < lastPage) {
-            pages.push(i);
-        }
-    }
-    const prevDots = pages[0] > firstPage + 1;
-    const nextDots = pages[pages.length - 1] < lastPage - 1;
-    return /*#__PURE__*/ React.createElement(Root, null, prevArrow && /*#__PURE__*/ React.createElement(ItemPrev, {
-        as: Link,
-        href: `${baseUrl}/${prevPage}`
-    }, /*#__PURE__*/ React.createElement(_cg.CgArrowLeftR, null)), firstPage !== currentPage && /*#__PURE__*/ React.createElement(ItemLink, {
-        as: Link,
-        href: `${baseUrl}`,
-        prev: true
-    }, firstPage), prevDots && /*#__PURE__*/ React.createElement(DotsSeparator, null, "..."), pages.map((page)=>page === currentPage ? /*#__PURE__*/ React.createElement(ItemCurrent, {
-            key: page
-        }, page) : /*#__PURE__*/ React.createElement(ItemLink, {
-            key: `pagination-${page}`,
-            as: Link,
-            href: `${baseUrl}/${page}`,
-            prev: page < currentPage,
-            next: page > currentPage
-        }, page)), nextDots && /*#__PURE__*/ React.createElement(DotsSeparator, null, "..."), lastPage !== currentPage && /*#__PURE__*/ React.createElement(ItemLink, {
-        as: Link,
-        href: `${baseUrl}/${lastPage}`,
-        next: true
-    }, lastPage), nextArrow && /*#__PURE__*/ React.createElement(ItemNext, {
-        as: Link,
-        href: `${baseUrl}/${nextPage}`
-    }, /*#__PURE__*/ React.createElement(_cg.CgArrowRightR, null)));
-};

package/Pagination/PaginationNav.mjs

@@ -1,103 +0,0 @@
-import { CgArrowLeftR as IconArrowLeft, CgArrowRightR as IconArrowRight } from "react-icons/cg";
-import styled from "styled-components";
-import ensureInt from "@koine/utils/ensureInt";
-const Root = styled.nav`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px 0 40px;
-  font-weight: 600;
-
-  & a {
-    text-decoration: none;
-  }
-`;
-const item = `
-  display: block;
-  padding: 5px 10px;
-`;
-const ItemCurrent = styled.span`
-  ${item}
-  background: var(--accent400);
-  border-radius: 2px;
-`;
-const ItemLink = styled.a`
-  ${item}
-
-  ${(props)=>props.prev ? "color: var(--grey100);" : ""}
-`;
-const DotsSeparator = styled.span`
-  color: var(--grey100);
-`;
-const arrow = `display: flex; font-size: 20px;`;
-const ItemPrev = styled.a`
-  ${arrow}
-`;
-const ItemNext = styled.a`
-  ${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 const KoinePaginationNav = ({ total, perPage, currentPage: _currentPage, baseUrl, showOffset = 2, currentUrl = "/", Link = "a" })=>{
-    let currentPage = ensureInt(_currentPage);
-    total = ensureInt(total);
-    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;
-    }
-    const firstPage = 1;
-    const lastPage = Math.ceil(total / perPage);
-    const prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
-    const nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
-    const prevArrow = currentPage > firstPage;
-    const nextArrow = currentPage < lastPage;
-    const pages = [];
-    // fill the pages before the current
-    for(let 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(let i = currentPage + 1; i < currentPage + 1 + showOffset; i++){
-        if (i < lastPage) {
-            pages.push(i);
-        }
-    }
-    const prevDots = pages[0] > firstPage + 1;
-    const nextDots = pages[pages.length - 1] < lastPage - 1;
-    return /*#__PURE__*/ React.createElement(Root, null, prevArrow && /*#__PURE__*/ React.createElement(ItemPrev, {
-        as: Link,
-        href: `${baseUrl}/${prevPage}`
-    }, /*#__PURE__*/ React.createElement(IconArrowLeft, null)), firstPage !== currentPage && /*#__PURE__*/ React.createElement(ItemLink, {
-        as: Link,
-        href: `${baseUrl}`,
-        prev: true
-    }, firstPage), prevDots && /*#__PURE__*/ React.createElement(DotsSeparator, null, "..."), pages.map((page)=>page === currentPage ? /*#__PURE__*/ React.createElement(ItemCurrent, {
-            key: page
-        }, page) : /*#__PURE__*/ React.createElement(ItemLink, {
-            key: `pagination-${page}`,
-            as: Link,
-            href: `${baseUrl}/${page}`,
-            prev: page < currentPage,
-            next: page > currentPage
-        }, page)), nextDots && /*#__PURE__*/ React.createElement(DotsSeparator, null, "..."), lastPage !== currentPage && /*#__PURE__*/ React.createElement(ItemLink, {
-        as: Link,
-        href: `${baseUrl}/${lastPage}`,
-        next: true
-    }, lastPage), nextArrow && /*#__PURE__*/ React.createElement(ItemNext, {
-        as: Link,
-        href: `${baseUrl}/${nextPage}`
-    }, /*#__PURE__*/ React.createElement(IconArrowRight, null)));
-};

package/Pagination/PaginationResults.d.ts

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

package/Pagination/PaginationResults.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "PaginationResults", {
-    enumerable: true,
-    get: function() {
-        return PaginationResults;
-    }
-});
-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 Root = _styledcomponents.default.div`
-  // overflow: hidden;
-`;
-const Inner = (0, _styledcomponents.default)(_framermotion.m.div)``;
-const PaginationResults = ({ children })=>{
-    return /*#__PURE__*/ React.createElement(_framermotion.AnimatePresence, {
-        exitBeforeEnter: true,
-        initial: true
-    }, /*#__PURE__*/ React.createElement(Root, null, /*#__PURE__*/ React.createElement(Inner, {
-        initial: {
-            opacity: 0,
-            x: -100
-        },
-        animate: {
-            opacity: 1,
-            x: 0
-        },
-        exit: {
-            opacity: 0,
-            x: 100
-        },
-        transition: {
-            type: "linear",
-            staggerChildren: 0.3
-        }
-    }, children)));
-};

package/Pagination/PaginationResults.mjs

@@ -1,29 +0,0 @@
-import { AnimatePresence, m } from "framer-motion";
-import styled from "styled-components";
-const Root = styled.div`
-  // overflow: hidden;
-`;
-const Inner = styled(m.div)``;
-export const PaginationResults = ({ children })=>{
-    return /*#__PURE__*/ React.createElement(AnimatePresence, {
-        exitBeforeEnter: true,
-        initial: true
-    }, /*#__PURE__*/ React.createElement(Root, null, /*#__PURE__*/ React.createElement(Inner, {
-        initial: {
-            opacity: 0,
-            x: -100
-        },
-        animate: {
-            opacity: 1,
-            x: 0
-        },
-        exit: {
-            opacity: 0,
-            x: 100
-        },
-        transition: {
-            type: "linear",
-            staggerChildren: 0.3
-        }
-    }, children)));
-};

package/Pagination/index.d.ts

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

package/Pagination/index.js

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

package/Pagination/index.mjs

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

package/Pill/Pill.d.ts

@@ -1,5 +0,0 @@
-export 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

@@ -1,62 +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, {
-    Pill: function() {
-        return Pill;
-    },
-    PillGreyLight: function() {
-        return PillGreyLight;
-    },
-    PillAccentLight: function() {
-        return PillAccentLight;
-    },
-    PillAccentLightOutlined: function() {
-        return PillAccentLightOutlined;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const Pill = _styledcomponents.default.div`
-  display: inline-block;
-  padding: 5px 10px;
-  margin: 0 0.5em 0.5em 0;
-  border-radius: 2px;
-  text-decoration: none;
-  font-size: 13px;
-  font-weight: 600;
-`;
-const PillGreyLight = (0, _styledcomponents.default)(Pill)`
-  background: var(--grey800);
-  color: var(--grey100);
-
-  &:hover {
-    color: white;
-    background: var(--grey300);
-  }
-`;
-const PillAccentLight = (0, _styledcomponents.default)(Pill)`
-  background: var(--accent400);
-  color: var(--grey100);
-
-  &:hover {
-    color: #fff;
-    background: var(--accent300);
-  }
-`;
-const PillAccentLightOutlined = (0, _styledcomponents.default)(Pill)`
-  border: 1px solid var(--accent300);
-  color: var(--accent200);
-
-  &:hover {
-    color: #fff;
-    background: var(--accent300);
-  }
-`;

package/Pill/Pill.mjs

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

package/Pill/index.d.ts

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

package/Pill/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("./Pill"), exports);

package/Pill/index.mjs

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