@koine/react 1.0.10 → 1.0.11

package/Grid/index.js

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

package/Grid/package.json

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

package/Hamburger/Hamburger.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type HamburgerProps = React.ComponentProps<"div"> & {
+    /** A way to provide your own state value. Can be used together with a state action (the `toggle` prop). */
+    toggled?: boolean;
+};
+export declare const Hamburger: ({ toggled, ...props }: HamburgerProps) => JSX.Element;

package/Hamburger/Hamburger.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file
+ *
+ * Simplified from https://github.com/luukdv/hamburger-react
+ */
+import styled from "styled-components";
+const HamburgerLabel = styled.div `
+  position: absolute;
+  top: 30px;
+  font-size: ${({ $toggled }) => ($toggled ? "0" : "9px")};
+  text-transform: uppercase;
+  left: 7px;
+  letter-spacing: 3px;
+`;
+const area = 48;
+const lines = 3;
+const width = 32;
+const room = Math.round((area - width) / 2);
+const barHeightRaw = width / 12;
+const barHeight = Math.round(barHeightRaw);
+const space = 0.5;
+const marginRaw = width / (lines * (space + (lines === 3 ? 1 : 1.25)));
+const margin = Math.round(marginRaw);
+const height = barHeight * lines + margin * (lines - 1);
+const topOffset = Math.round((area - height) / 2);
+const translate = 4.6325;
+const deviation = (barHeightRaw - barHeight + (marginRaw - margin)) / (lines === 3 ? 1 : 2);
+const move = parseFloat((width / translate - deviation / (4 / 3)).toFixed(2));
+const time = 0.4;
+const easing = "cubic-bezier(0, 0, 0, 1)";
+const transition = `${time}s ${easing}`;
+const burgerStyles = {
+    marginRight: "-8px",
+    position: "relative",
+    width: `${area}px`,
+    height: `${area}px`,
+    userSelect: "none",
+    outline: "0px",
+    cursor: "pointer",
+    transition,
+};
+const barStyles = {
+    position: "absolute",
+    width: `${width}px`,
+    height: `${barHeight}px`,
+    left: `${room}px`,
+    background: "currentColor",
+    transition,
+};
+export const Hamburger = ({ toggled, ...props }) => {
+    return (_jsxs("div", { style: {
+            ...burgerStyles,
+            transform: `${toggled ? `rotate(90deg)` : "none"}`,
+        }, tabIndex: 0, ...props, children: [_jsx("div", { style: {
+                    ...barStyles,
+                    top: `${topOffset}px`,
+                    transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`,
+                } }), _jsx("div", { style: {
+                    ...barStyles,
+                    top: `${topOffset + barHeight + margin}px`,
+                    transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`,
+                } }), _jsx(HamburgerLabel, { "$toggled": toggled, children: "Menu" })] }));
+};

package/Hamburger/index.d.ts

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

package/Hamburger/index.js

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

package/Hamburger/package.json

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

package/Header/index.d.ts

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

package/Header/index.js

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

package/Header/package.json

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

package/Header/useHeader.d.ts

@@ -0,0 +1,24 @@
+/** @type {boolean} */
+declare type isSticky = boolean & {
+    _branded: true;
+};
+/** @type {number} */
+declare type placeholderHeight = number & {
+    _branded: true;
+};
+/** @type {number} */
+declare type headerHeight = number & {
+    _branded: true;
+};
+/** @type {number} */
+declare type logoWidth = number & {
+    _branded: true;
+};
+declare type UseHeaderState = readonly [
+    isSticky,
+    placeholderHeight,
+    headerHeight,
+    logoWidth
+];
+export declare const useHeader: () => UseHeaderState;
+export {};

package/Header/useHeader.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useScrollPosition } from "../hooks/useScrollPosition";
+import { useTheme } from "../styles/theme";
+import { useMedia } from "../styles/media";
+export const useHeader = () => {
+    const [isSticky, setIsSticky] = useState(false);
+    const { header: themed } = useTheme();
+    const isDesktopLayout = useMedia(`min:${themed.breakpoint}`);
+    const valueIdx = isDesktopLayout ? 1 : 0;
+    const [headerHeight, setHeaderHeight] = useState(themed.height[valueIdx]);
+    const [placeholderHeight, setPlaceholderHeight] = useState(themed.height[valueIdx]);
+    const [logoWidth, setLogoWidth] = useState(themed.logoWidth[valueIdx]);
+    useScrollPosition((currentPosition) => {
+        const isPastThreshold = currentPosition.y * -1 > 40;
+        if (isSticky !== isPastThreshold)
+            setIsSticky(isPastThreshold);
+    }, [isSticky]);
+    useEffect(() => {
+        const valueIdx = isDesktopLayout ? 1 : 0;
+        setPlaceholderHeight(themed.height[valueIdx]);
+        setHeaderHeight(isSticky ? themed.heightSticky[valueIdx] : themed.height[valueIdx]);
+        setLogoWidth(isSticky ? themed.logoWidthSticky[valueIdx] : themed.logoWidth[valueIdx]);
+    }, [themed, isSticky, isDesktopLayout]);
+    return [
+        isSticky,
+        placeholderHeight,
+        headerHeight,
+        logoWidth,
+    ];
+};

package/Hidden/Hidden.d.ts

@@ -0,0 +1,6 @@
+import { Breakpoint } from "../styles/theme";
+export declare type HiddenProps = {
+    $min?: Breakpoint;
+    $max?: Breakpoint;
+};
+export declare const Hidden: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HiddenProps, never>;

package/Hidden/Hidden.js

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+export const Hidden = styled.div `
+  ${(p) => `${p.$min
+    ? `
+  @media (min-width: ${p.theme.breakpoints[p.$min]}px) {
+    display: none;
+  }`
+    : ""} ${p.$max
+    ? `
+  @media (max-width: ${p.theme.breakpoints[p.$max]}px) {
+    display: none;
+  }`
+    : ""}`}
+`;

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,37 @@
+import styled from "styled-components";
+// export type KoineImgProps = {
+//   /** @default "cover" */
+//   $fit?: "cover" | "contain";
+// };
+export const KoineImg = styled.img ``;
+// 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,2 @@
+import styled from "styled-components";
+export const KoineLink = styled.a ``;

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,26 @@
+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 const LinkBlankA = styled.a.attrs({
+    target: "_blank",
+    rel: "noopener",
+}) ``;
+// TODO: use `touch` class on <html> instead of relying on screenwidth,
+// probably implement a lean Modernizr like thing with react-helmet
+export const LinkBlankIcon = styled(IconOutboundLink) `
+  color: var(---grey100);
+  font-size: inherit;
+  margin-left: 3px;
+  line-height: inherit;
+  vertical-align: middle;
+  width: 0px;
+  transition: width 0.1s ease-in-out;
+  ${max.sm} {
+    width: 20px;
+    opacity: 0.8;
+  }
+`;
+export const LinkBlank = ({ children, target, rel, ...props }) => {
+    return (_jsxs(LinkBlankA, { ...props, children: [children, _jsx(LinkBlankIcon, {})] }));
+};

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,11 @@
+import styled from "styled-components";
+export const Menu = styled.ul `
+  z-index: 3;
+  position: absolute;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  background: #fff;
+  width: 100%;
+  box-shadow: var(--shadow);
+`;

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,20 @@
+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/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,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Meta = ({ zoom }) => {
+    return (_jsx("meta", { name: "viewport", content: `width=device-width, initial-scale=1, maximum-scale=1${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 const NoJs = (_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,83 @@
+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";
+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, baseUrl, showOffset = 2, currentUrl = "/", Link = "a", }) => {
+    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;
+    }
+    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 (_jsxs(Root, { children: [prevArrow && (_jsx(ItemPrev, { as: Link, href: `${baseUrl}/${prevPage}`, children: _jsx(IconArrowLeft, {}) })), firstPage !== currentPage && (_jsx(ItemLink, { as: Link, href: `${baseUrl}`, prev: true, children: firstPage })), prevDots && _jsx(DotsSeparator, { children: "..." }), pages.map((page) => page === currentPage ? (_jsx(ItemCurrent, { children: page }, page)) : (_jsx(ItemLink, { as: Link, href: `${baseUrl}/${page}`, prev: page < currentPage, next: page > currentPage, children: page }, `pagination-${page}`))), nextDots && _jsx(DotsSeparator, { children: "..." }), lastPage !== currentPage && (_jsx(ItemLink, { as: Link, href: `${baseUrl}/${lastPage}`, next: true, children: lastPage })), nextArrow && (_jsx(ItemNext, { as: Link, href: `${baseUrl}/${nextPage}`, children: _jsx(IconArrowRight, {}) }))] }));
+};

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,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { AnimatePresence, m } from "framer-motion";
+const Root = styled.div `
+  // overflow: hidden;
+`;
+const Inner = styled(m.div) ``;
+export const PaginationResults = ({ children }) => {
+    return (_jsx(AnimatePresence, { exitBeforeEnter: true, initial: true, children: _jsx(Root, { children: _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.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>;