@koine/react 1.0.4 → 1.0.9

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

@@ -1 +1 @@
-export * from "./Hidden";
+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

@@ -1 +1 @@
-export * from "./Img";
+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

@@ -1,5 +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>;
+/// <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

@@ -1,8 +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";
-}, "rel" | "target">;
-export declare const LinkBlankIcon: import("styled-components").StyledComponent<import("@react-icons/all-files/lib").IconType, import("styled-components").DefaultTheme, {}, never>;
-export declare const LinkBlank: React.FC<LinkBlankProps>;
+/// <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

@@ -1,2 +1,2 @@
-export * from "./Link";
-export * from "./LinkBlank";
+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

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

@@ -1 +1 @@
-export * from "./Menu";
+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

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

@@ -1 +1 @@
-export * from "./MenuItem";
+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

@@ -1,15 +1,14 @@
-/// <reference types="react" />
-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;
+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

@@ -1 +1 @@
-export * from "./Meta";
+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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare type NoJsProps = object;
-export declare const NoJs: (_props: NoJsProps) => JSX.Element;
+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

@@ -1 +1 @@
-export * from "./NoJs";
+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

@@ -1,23 +1,22 @@
-/// <reference types="react" />
-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, Koine, }: PaginationNavProps) => JSX.Element | null;
-export {};
+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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare type PaginationResultsProps = unknown;
-export declare const PaginationResults: React.FC<PaginationResultsProps>;
+/// <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

@@ -1,2 +1,2 @@
-export * from "./PaginationNav";
-export * from "./PaginationResults";
+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

@@ -1,5 +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>;
+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,37 @@
+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 +1 @@
-export * from "./Pill";
+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

@@ -1,20 +1,19 @@
-/// <reference types="react" />
-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;
+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;