@koine/react 2.0.0-beta.14 → 2.0.0-beta.16

package/Menu/MenuMui.mjs

@@ -1,164 +0,0 @@
-// import React, { forwardRef, useId, useMemo, useRef, useState } from "react";
-// import useEventCallback from "@mui/utils/useEventCallback";
-// import {
-//   motion as m,
-//   AnimatePresence,
-//   type HTMLMotionProps,
-// } from "framer-motion";
-// import {
-//   useMenu,
-//   MenuUnstyledContext,
-//   type MenuUnstyledContextType,
-//   type MenuUnstyledActions,
-// } from "@mui/base/MenuUnstyled";
-// import ModalUnstyled from "@mui/base/ModalUnstyled";
-// import ClickAwayListener from "@mui/base/ClickAwayListener";
-// import { usePopper, type PopperChildrenProps } from "react-popper";
-// import clsx from "@koine/utils/clsx";
-// const MenuRoot = m.div;
-// const MenuBackdrop = () => <div className="fixed inset-0" />;
-// /**
-//  * Props we control, cannot be overriden from implementers
-//  */
-// type MenuButtonOwnProps = {
-//   "aria-controls"?: string;
-//   "aria-haspopup": true | "true";
-//   "aria-expanded"?: true | "true";
-//   onClick: (event: React.MouseEvent<HTMLButtonElement>) => unknown;
-//   onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => unknown;
-// };
-// type MenuButtonProps = Omit<
-//   React.ComponentPropsWithRef<"button">,
-//   keyof MenuButtonOwnProps
-// > &
-//   MenuButtonOwnProps;
-// export type MenuItemsProps = {
-//   /**
-//    * Closes the parent menu
-//    */
-//   close: () => unknown;
-// };
-// /**
-//  * Props we control, cannot be overriden from implementers
-//  */
-// type MenuOwnProps = ReturnType<typeof useMenu>["getListboxProps"] & {
-//   onKeyDown: (event: React.KeyboardEvent) => unknown;
-//   style: React.StyleHTMLAttributes<HTMLDivElement>;
-// };
-// export type MenuProps = Omit<
-//   Omit<HTMLMotionProps<"div">, "children"> & {
-//     placement?: PopperChildrenProps["placement"];
-//     Button: (props: MenuButtonProps) => JSX.Element;
-//     children: (props: MenuItemsProps) => React.ReactNode;
-//   },
-//   keyof MenuOwnProps
-// >;
-// export const Menu = forwardRef(function Menu(props: MenuProps, ref) {
-//   const { Button, placement, children, className, ...htmlAttributes } = props;
-//   const id = useId();
-//   const buttonRef = useRef<HTMLButtonElement>(null);
-//   const menuActions = useRef<MenuUnstyledActions>(null);
-//   const [popperElement, setPopperElement] = useState(null);
-//   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-//   const open = Boolean(anchorEl);
-//   const { styles } = usePopper(anchorEl, popperElement, {
-//     placement,
-//     // strategy: "absolute",
-//   });
-//   const {
-//     registerItem,
-//     unregisterItem,
-//     getListboxProps,
-//     getItemProps,
-//     getItemState,
-//   } = useMenu({
-//     listboxId: id,
-//     listboxRef: setPopperElement,
-//     // these two make the Tab key behaviour correct, closing the menu on Tab
-//     // press and re-focusing the Button trigger element
-//     open,
-//     onClose: () => setAnchorEl(null),
-//   });
-//   const contextValue: MenuUnstyledContextType = {
-//     registerItem,
-//     unregisterItem,
-//     getItemState,
-//     getItemProps,
-//     open,
-//   };
-//   const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-//     if (open) {
-//       setAnchorEl(null);
-//     } else {
-//       setAnchorEl(event.currentTarget);
-//     }
-//   };
-//   const handleButtonKeyDown = (
-//     event: React.KeyboardEvent<HTMLButtonElement>
-//   ) => {
-//     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-//       event.preventDefault();
-//       setAnchorEl(event.currentTarget);
-//       if (event.key === "ArrowUp") {
-//         menuActions.current?.highlightLastItem();
-//       }
-//     }
-//   };
-//   const close = useEventCallback(() => {
-//     setAnchorEl(null);
-//     buttonRef.current?.focus();
-//   });
-//   const renderChildren = useMemo(() => {
-//     const childrenProps: MenuItemsProps = { close };
-//     return children(childrenProps);
-//   }, [children, close]);
-//   return (
-//     <>
-//       <Button
-//         ref={buttonRef}
-//         id={id}
-//         aria-haspopup="true"
-//         aria-controls={open ? id : undefined}
-//         aria-expanded={open ? "true" : undefined}
-//         onClick={handleButtonClick}
-//         onKeyDown={handleButtonKeyDown}
-//       />
-//       <AnimatePresence>
-//         {open && (
-//           <ModalUnstyled
-//             slots={{ backdrop: MenuBackdrop }}
-//             onClose={close}
-//             onBackdropClick={close}
-//             open={open}
-//           >
-//             <div>
-//               <ClickAwayListener onClickAway={close}>
-//                 <MenuRoot
-//                   initial={{
-//                     opacity: 0,
-//                   }}
-//                   animate={{
-//                     opacity: 1,
-//                   }}
-//                   exit={{
-//                     opacity: 0,
-//                   }}
-//                   className={clsx(className)}
-//                   style={styles["popper"]}
-//                   {...htmlAttributes}
-//                   {...getListboxProps()}
-//                   aria-labelledby={id}
-//                 >
-//                   <MenuUnstyledContext.Provider value={contextValue}>
-//                     {renderChildren}
-//                   </MenuUnstyledContext.Provider>
-//                 </MenuRoot>
-//               </ClickAwayListener>
-//             </div>
-//           </ModalUnstyled>
-//         )}
-//       </AnimatePresence>
-//     </>
-//   );
-// });
-// export default Menu;

package/Menu/index.mjs

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

package/MenuItem/MenuItem.mjs

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

package/MenuItem/MenuItemMui.mjs

@@ -1,31 +0,0 @@
-// import React, { forwardRef } from "react";
-// import { useMenuItem } from "@mui/base/MenuItemUnstyled";
-// // import { useMenuItem } from "./useMenuItem";
-// import clsx from "@koine/utils/clsx";
-// import { type MenuItemsProps } from "../Menu/MenuMui";
-// import { Polymorphic } from "../typings";
-// export type MenuItemProps = React.PropsWithChildren<Partial<MenuItemsProps>>;
-// export const MenuItem = forwardRef(function MenuItem<
-//   T extends React.ElementType = "button"
-// >(props: Polymorphic.Props<T, MenuItemProps>, ref: Polymorphic.Ref<T>) {
-//   const {
-//     as: As = "button",
-//     children,
-//     className,
-//     disabled: disabledProp,
-//     ...other
-//   } = props;
-//   const { getRootProps, disabled, focusVisible } = useMenuItem({
-//     ref,
-//     disabled: disabledProp,
-//   });
-//   return (
-//     <As
-//       className={clsx(focusVisible && "", disabled && "", className)}
-//       {...getRootProps(other)}
-//     >
-//       {children}
-//     </As>
-//   );
-// }) as Polymorphic.ComponentForwarded<"button", MenuItemProps>;
-// export default MenuItem;

package/MenuItem/index.mjs

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

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.mjs

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const Meta = ({ zoom })=>{
-    return /*#__PURE__*/ _jsx("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.mjs

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

package/NoJs/NoJs.mjs

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export const NoJs = (_props)=>{
-    return /*#__PURE__*/ _jsx("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.mjs

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

package/Pagination/PaginationNav.mjs

@@ -1,122 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CgArrowLeftR as IconArrowLeft, CgArrowRightR as IconArrowRight } from "react-icons/cg";
-import styled from "styled-components";
-import ensureInt from "@koine/utils/ensureInt";
-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__*/ _jsxs(Root, {
-        children: [
-            prevArrow && /*#__PURE__*/ _jsx(ItemPrev, {
-                as: Link,
-                href: `${baseUrl}/${prevPage}`,
-                children: /*#__PURE__*/ _jsx(IconArrowLeft, {})
-            }),
-            firstPage !== currentPage && /*#__PURE__*/ _jsx(ItemLink, {
-                as: Link,
-                href: `${baseUrl}`,
-                prev: true,
-                children: firstPage
-            }),
-            prevDots && /*#__PURE__*/ _jsx(DotsSeparator, {
-                children: "..."
-            }),
-            pages.map((page)=>page === currentPage ? /*#__PURE__*/ _jsx(ItemCurrent, {
-                    children: page
-                }, page) : /*#__PURE__*/ _jsx(ItemLink, {
-                    as: Link,
-                    href: `${baseUrl}/${page}`,
-                    prev: page < currentPage,
-                    next: page > currentPage,
-                    children: page
-                }, `pagination-${page}`)),
-            nextDots && /*#__PURE__*/ _jsx(DotsSeparator, {
-                children: "..."
-            }),
-            lastPage !== currentPage && /*#__PURE__*/ _jsx(ItemLink, {
-                as: Link,
-                href: `${baseUrl}/${lastPage}`,
-                next: true,
-                children: lastPage
-            }),
-            nextArrow && /*#__PURE__*/ _jsx(ItemNext, {
-                as: Link,
-                href: `${baseUrl}/${nextPage}`,
-                children: /*#__PURE__*/ _jsx(IconArrowRight, {})
-            })
-        ]
-    });
-};

package/Pagination/PaginationResults.mjs

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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__*/ _jsx(AnimatePresence, {
-        exitBeforeEnter: true,
-        initial: true,
-        children: /*#__PURE__*/ _jsx(Root, {
-            children: /*#__PURE__*/ _jsx(Inner, {
-                initial: {
-                    opacity: 0,
-                    x: -100
-                },
-                animate: {
-                    opacity: 1,
-                    x: 0
-                },
-                exit: {
-                    opacity: 0,
-                    x: 100
-                },
-                transition: {
-                    type: "linear",
-                    staggerChildren: 0.3
-                },
-                children: children
-            })
-        })
-    });
-};

package/Pagination/index.mjs

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

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.mjs

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

package/Progress/ProgressCircular.mjs

@@ -1,53 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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__*/ _jsx(ProgressCircularSvg, {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 44 44",
-        style: {
-            width: size,
-            height: size
-        },
-        ...props,
-        children: /*#__PURE__*/ _jsx(ProgressCircularCircle, {
-            cx: "22",
-            cy: "22",
-            r: "20",
-            fill: "none",
-            strokeWidth: thickness,
-            style: {
-                stroke: color
-            }
-        })
-    });
-};

package/Progress/ProgressLinear.mjs

@@ -1,44 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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__*/ _jsx(ProgressLinearBg, {
-        style: {
-            height,
-            background: bg
-        },
-        ...props,
-        children: /*#__PURE__*/ _jsx(ProgressLinearFg, {
-            style: {
-                height,
-                background: fg
-            },
-            initial: {
-                x: "-100%"
-            },
-            animate: {
-                x: done ? "-100%" : "0%"
-            },
-            transition: done ? {} : {
-                repeat: Infinity,
-                repeatType: "reverse",
-                duration: 2
-            }
-        })
-    });
-};