@koine/react 2.0.0-beta.7 → 2.0.0-beta.70

package/Breadcrumbs/Breadcrumbs.mjs

@@ -1,91 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { m } from "framer-motion";
-import { MdKeyboardArrowRight as IconDelimiter } from "react-icons/md";
-import styled, { css } from "styled-components";
-import titleCase from "@koine/utils/titleCase";
-import { max, min } from "../styles/media";
-const LINK_GUTTER_X = 10;
-const Root = styled.nav`
-  display: flex;
-  position: relative;
-`;
-const Inner = styled.div`
-  display: flex;
-  font-size: 11px;
-  color: var(--grey100);
-  ${min.sm} {
-    font-size: 12px;
-  }
-  ${max.lg} {
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-`;
-const Item = styled(m.div)`
-  display: flex;
-  align-items: center;
-  /* margin: 0 10px 0 0; */
-
-  &:first-child {
-    margin-left: -${LINK_GUTTER_X / 2}px;
-  }
-  ${min.sm} {
-    &:first-child {
-      margin-left: -${LINK_GUTTER_X}px;
-    }
-  }
-`;
-const itemChild = css`
-  display: block;
-  padding: 10px ${LINK_GUTTER_X / 2}px;
-
-  ${min.sm} {
-    padding: 10px ${LINK_GUTTER_X}px;
-  }
-`;
-const ItemLink = styled.a`
-  ${itemChild}
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-const ItemCurrent = styled.span`
-  ${itemChild}
-`;
-const ItemSeparator = styled(IconDelimiter)``;
-export const KoineBreadcrumbs = ({ items = [], Link, ...props })=>{
-    if (!items.length) {
-        return null;
-    }
-    return /*#__PURE__*/ _jsx(Root, {
-        ...props,
-        children: /*#__PURE__*/ _jsx(Inner, {
-            children: items.map((item, idx)=>/*#__PURE__*/ _jsxs(Item, {
-                    initial: {
-                        opacity: 0,
-                        x: 20
-                    },
-                    animate: {
-                        opacity: 1,
-                        x: 0,
-                        transition: {
-                            delay: idx * 0.2
-                        }
-                    },
-                    children: [
-                        item.url && /*#__PURE__*/ _jsx(ItemLink, {
-                            as: Link,
-                            href: item.url,
-                            children: titleCase(item.title)
-                        }),
-                        !item.url && /*#__PURE__*/ _jsx(ItemCurrent, {
-                            children: titleCase(item.title)
-                        }),
-                        idx < items.length - 1 && /*#__PURE__*/ _jsx(ItemSeparator, {})
-                    ]
-                }, idx))
-        })
-    });
-};

package/Breadcrumbs/index.d.ts

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

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

package/Breadcrumbs/index.mjs

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

package/Buttons/Button.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-/**
- * Prevent 300ms delay with `touch-action` performance optimization,
- * @see https://twitter.com/argyleink/status/1405881231695302659
- */
-export declare const btnStyleUndo: import("styled-components").FlattenSimpleInterpolation;
-export declare const btnStyleReset: import("styled-components").FlattenSimpleInterpolation;
-export declare const btnStyleBase: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<KoineButtonUiProps, import("styled-components").DefaultTheme>>;
-export declare const btnStyleContained: import("styled-components").FlattenSimpleInterpolation;
-export declare const btnStyleOutlined: import("styled-components").FlattenSimpleInterpolation;
-export declare const KoineButton: any;
-export type KoineButtonUiProps = {
-    disabled?: boolean;
-    $variant?: "contained" | "outlined";
-    $noGutter?: boolean;
-    $block?: boolean;
-};
-export type KoineButtonProps = KoineButtonUiProps & React.ComponentPropsWithRef<"button">;

package/Buttons/Button.js

@@ -1,106 +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, {
-    btnStyleUndo: function() {
-        return btnStyleUndo;
-    },
-    btnStyleReset: function() {
-        return btnStyleReset;
-    },
-    btnStyleBase: function() {
-        return btnStyleBase;
-    },
-    btnStyleContained: function() {
-        return btnStyleContained;
-    },
-    btnStyleOutlined: function() {
-        return btnStyleOutlined;
-    },
-    KoineButton: function() {
-        return KoineButton;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
-const _styled = require("../styles/styled");
-const btnStyleUndo = (0, _styledcomponents.css)`
-  appearance: none;
-  -webkit-appearance: none;
-  -webkit-touch-callout: none;
-  user-select: none;
-  touch-action: manipulation;
-  outline: 0px;
-  color: var(--bodyColor);
-`;
-const btnStyleReset = (0, _styledcomponents.css)`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border-width: 1px;
-  border-style: solid;
-  border-color: transparent;
-  cursor: pointer;
-  ${btnStyleUndo}
-
-  &[disabled] {
-    cursor: default;
-    opacity: 0.7;
-  }
-`;
-const btnStyleBase = (0, _styledcomponents.css)`
-  ${btnStyleReset}
-
-  min-width: ${(p)=>p.$noGutter ? "0" : "150px"};
-  padding: ${(p)=>p.$noGutter ? "0" : "10px 30px"};
-  border-radius: 0;
-  text-align: center;
-  text-transform: uppercase;
-  font-weight: 600;
-  ${(p)=>p.$block && `width: 100%; display: flex;`}
-
-  &:focus,
-  &:active,
-  &:visited {
-    ${_styled.stateFocus}
-  }
-
-  /* This targets icons within a button */
-  & svg {
-    margin: 0 1em 0 0;
-    font-size: 1.25em;
-  }
-`;
-const btnStyleContained = (0, _styledcomponents.css)`
-  color: white;
-  background: var(--accent200);
-  border-color: var(--accent200);
-
-  &:hover:not([disabled]) {
-    background: var(--accent300);
-    border-color: var(--accent300);
-  }
-`;
-const btnStyleOutlined = (0, _styledcomponents.css)`
-  color: var(--accent200);
-  border-color: var(--accent200);
-
-  &:hover:not([disabled]) {
-    background: var(--accent300);
-    border-color: var(--accent300);
-    color: white;
-  }
-`;
-const KoineButton = _styledcomponents.default.button`
-  ${btnStyleBase}
-  ${(p)=>p.$variant === "outlined" && btnStyleOutlined}
-  ${(p)=>p.$variant === "contained" && btnStyleContained}
-`;

package/Buttons/Button.mjs

@@ -1,78 +0,0 @@
-import styled, { css } from "styled-components";
-import { stateFocus } from "../styles/styled";
-/**
- * Prevent 300ms delay with `touch-action` performance optimization,
- * @see https://twitter.com/argyleink/status/1405881231695302659
- */ export const btnStyleUndo = css`
-  appearance: none;
-  -webkit-appearance: none;
-  -webkit-touch-callout: none;
-  user-select: none;
-  touch-action: manipulation;
-  outline: 0px;
-  color: var(--bodyColor);
-`;
-export const btnStyleReset = css`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border-width: 1px;
-  border-style: solid;
-  border-color: transparent;
-  cursor: pointer;
-  ${btnStyleUndo}
-
-  &[disabled] {
-    cursor: default;
-    opacity: 0.7;
-  }
-`;
-export const btnStyleBase = css`
-  ${btnStyleReset}
-
-  min-width: ${(p)=>p.$noGutter ? "0" : "150px"};
-  padding: ${(p)=>p.$noGutter ? "0" : "10px 30px"};
-  border-radius: 0;
-  text-align: center;
-  text-transform: uppercase;
-  font-weight: 600;
-  ${(p)=>p.$block && `width: 100%; display: flex;`}
-
-  &:focus,
-  &:active,
-  &:visited {
-    ${stateFocus}
-  }
-
-  /* This targets icons within a button */
-  & svg {
-    margin: 0 1em 0 0;
-    font-size: 1.25em;
-  }
-`;
-export const btnStyleContained = css`
-  color: white;
-  background: var(--accent200);
-  border-color: var(--accent200);
-
-  &:hover:not([disabled]) {
-    background: var(--accent300);
-    border-color: var(--accent300);
-  }
-`;
-export const btnStyleOutlined = css`
-  color: var(--accent200);
-  border-color: var(--accent200);
-
-  &:hover:not([disabled]) {
-    background: var(--accent300);
-    border-color: var(--accent300);
-    color: white;
-  }
-`;
-export const KoineButton = styled.button`
-  ${btnStyleBase}
-  ${(p)=>p.$variant === "outlined" && btnStyleOutlined}
-  ${(p)=>p.$variant === "contained" && btnStyleContained}
-`;

package/Buttons/ButtonComposite.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import { IconBaseProps, IconType } from "react-icons/lib";
-import { KoineComponent, KoineComponentProps } from "../types";
-import { KoineButtonProps } from "./Button";
-import { ButtonLinkProps } from "./ButtonLink";
-export type KoineButtonCompositeProps = KoineButtonProps & Omit<ButtonLinkProps, "Koine"> & {
-    Icon?: IconType | React.ElementType;
-    iconProps?: IconBaseProps;
-    textMain?: string;
-    textSub?: string;
-    text?: string;
-    textReverse?: boolean;
-};
-export type ButtonCompositeStyledProps = {
-    $twoLines?: boolean;
-    $reverse?: boolean;
-    $icon?: boolean;
-};
-export type ButtonCompositeProps = KoineComponentProps<KoineButtonCompositeProps, {
-    Button?: KoineComponent;
-    ButtonLink?: KoineComponent;
-}>;
-export declare const KoineButtonComposite: ({ Icon, iconProps, textMain, textSub, textReverse, text, Button, ButtonLink, ...props }: ButtonCompositeProps) => import("react/jsx-runtime").JSX.Element;

package/Buttons/ButtonComposite.js

@@ -1,116 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "KoineButtonComposite", {
-    enumerable: true,
-    get: function() {
-        return KoineButtonComposite;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const Root = _styledcomponents.default.span`
-  ${(p)=>p.$icon ? `display: flex;` : `display: inline-block; text-align: left;`}
-  min-width: 0;
-
-  & svg {
-    font-size: 2em !important;
-    margin: 0 0.33em 0 0 !important;
-  }
-`;
-const ButtonCompositeIcon = _styledcomponents.default.svg`
-  float: left;
-`;
-const BesidesIcon = _styledcomponents.default.span`
-  text-align: left;
-  line-height: 1.2;
-`;
-const Main = _styledcomponents.default.span`
-  display: block;
-  font-size: 0.9em;
-
-  &:last-child {
-    margin-top: ${(p)=>p.$reverse && !p.$icon ? "0.5em" : "0"};
-  }
-`;
-const Sub = _styledcomponents.default.span`
-  display: block;
-  text-transform: none;
-  font-size: 0.7em;
-  font-weight: 500;
-
-  ${Main} + & {
-    margin-top: ${(p)=>p.$reverse && !p.$icon ? "0.5em" : "0"};
-  }
-`;
-const Text = _styledcomponents.default.span``;
-const Inner = /*#__PURE__*/ (0, _react.memo)(({ textMain, textSub, text, $reverse, $icon })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            $reverse ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                children: [
-                    textSub && /*#__PURE__*/ (0, _jsxruntime.jsx)(Sub, {
-                        $icon: $icon,
-                        $reverse: $reverse,
-                        children: textSub
-                    }),
-                    textMain && /*#__PURE__*/ (0, _jsxruntime.jsx)(Main, {
-                        $icon: $icon,
-                        $reverse: $reverse,
-                        children: textMain
-                    })
-                ]
-            }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                children: [
-                    textMain && /*#__PURE__*/ (0, _jsxruntime.jsx)(Main, {
-                        $icon: $icon,
-                        $reverse: $reverse,
-                        children: textMain
-                    }),
-                    textSub && /*#__PURE__*/ (0, _jsxruntime.jsx)(Sub, {
-                        $icon: $icon,
-                        $reverse: $reverse,
-                        children: textSub
-                    })
-                ]
-            }),
-            text && /*#__PURE__*/ (0, _jsxruntime.jsx)(Text, {
-                children: text
-            })
-        ]
-    }));
-const KoineButtonComposite = ({ Icon, iconProps = {}, textMain, textSub, textReverse, text, Button = "button", ButtonLink = "a", ...props })=>{
-    const Btn = props.href ? ButtonLink : Button;
-    const styledProps = {
-        $icon: !!Icon,
-        $reverse: textReverse,
-        $twoLines: !!(textMain && textSub && !Icon)
-    };
-    const innerProps = {
-        textMain,
-        textSub,
-        text,
-        ...styledProps
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Root, {
-        as: Btn,
-        ...props,
-        ...styledProps,
-        children: [
-            Icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(ButtonCompositeIcon, {
-                as: Icon,
-                ...iconProps
-            }),
-            Icon ? /*#__PURE__*/ (0, _jsxruntime.jsx)(BesidesIcon, {
-                ...styledProps,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Inner, {
-                    ...innerProps
-                })
-            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(Inner, {
-                ...innerProps
-            })
-        ]
-    });
-};

package/Buttons/ButtonComposite.mjs

@@ -1,105 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo } from "react";
-import styled from "styled-components";
-const Root = styled.span`
-  ${(p)=>p.$icon ? `display: flex;` : `display: inline-block; text-align: left;`}
-  min-width: 0;
-
-  & svg {
-    font-size: 2em !important;
-    margin: 0 0.33em 0 0 !important;
-  }
-`;
-const ButtonCompositeIcon = styled.svg`
-  float: left;
-`;
-const BesidesIcon = styled.span`
-  text-align: left;
-  line-height: 1.2;
-`;
-const Main = styled.span`
-  display: block;
-  font-size: 0.9em;
-
-  &:last-child {
-    margin-top: ${(p)=>p.$reverse && !p.$icon ? "0.5em" : "0"};
-  }
-`;
-const Sub = styled.span`
-  display: block;
-  text-transform: none;
-  font-size: 0.7em;
-  font-weight: 500;
-
-  ${Main} + & {
-    margin-top: ${(p)=>p.$reverse && !p.$icon ? "0.5em" : "0"};
-  }
-`;
-const Text = styled.span``;
-const Inner = /*#__PURE__*/ memo(({ textMain, textSub, text, $reverse, $icon })=>/*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            $reverse ? /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    textSub && /*#__PURE__*/ _jsx(Sub, {
-                        $icon: $icon,
-                        $reverse: $reverse,
-                        children: textSub
-                    }),
-                    textMain && /*#__PURE__*/ _jsx(Main, {
-                        $icon: $icon,
-                        $reverse: $reverse,
-                        children: textMain
-                    })
-                ]
-            }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                children: [
-                    textMain && /*#__PURE__*/ _jsx(Main, {
-                        $icon: $icon,
-                        $reverse: $reverse,
-                        children: textMain
-                    }),
-                    textSub && /*#__PURE__*/ _jsx(Sub, {
-                        $icon: $icon,
-                        $reverse: $reverse,
-                        children: textSub
-                    })
-                ]
-            }),
-            text && /*#__PURE__*/ _jsx(Text, {
-                children: text
-            })
-        ]
-    }));
-export const KoineButtonComposite = ({ Icon, iconProps = {}, textMain, textSub, textReverse, text, Button = "button", ButtonLink = "a", ...props })=>{
-    const Btn = props.href ? ButtonLink : Button;
-    const styledProps = {
-        $icon: !!Icon,
-        $reverse: textReverse,
-        $twoLines: !!(textMain && textSub && !Icon)
-    };
-    const innerProps = {
-        textMain,
-        textSub,
-        text,
-        ...styledProps
-    };
-    return /*#__PURE__*/ _jsxs(Root, {
-        as: Btn,
-        ...props,
-        ...styledProps,
-        children: [
-            Icon && /*#__PURE__*/ _jsx(ButtonCompositeIcon, {
-                as: Icon,
-                ...iconProps
-            }),
-            Icon ? /*#__PURE__*/ _jsx(BesidesIcon, {
-                ...styledProps,
-                children: /*#__PURE__*/ _jsx(Inner, {
-                    ...innerProps
-                })
-            }) : /*#__PURE__*/ _jsx(Inner, {
-                ...innerProps
-            })
-        ]
-    });
-};

package/Buttons/ButtonFab.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { IconButtonProps } from "./IconButton";
-export declare const buttonFab: import("styled-components").FlattenSimpleInterpolation;
-export declare const IconButtonFab: any;
-export type IconButtonFabProps = IconButtonProps & React.ComponentPropsWithRef<"button">;

package/Buttons/ButtonFab.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, {
-    buttonFab: function() {
-        return buttonFab;
-    },
-    IconButtonFab: function() {
-        return IconButtonFab;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
-const _IconButton = require("./IconButton");
-const buttonFab = (0, _styledcomponents.css)`
-  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);
-`;
-const IconButtonFab = (0, _styledcomponents.default)(_IconButton.IconButton)`
-  ${buttonFab}
-`;

package/Buttons/ButtonFab.mjs

@@ -1,8 +0,0 @@
-import styled, { css } from "styled-components";
-import { IconButton } from "./IconButton";
-export const buttonFab = css`
-  box-shadow: 3px 3px 6px -4px rgb(0, 0, 0, 0.5);
-`;
-export const IconButtonFab = styled(IconButton)`
-  ${buttonFab}
-`;

package/Buttons/ButtonLink.d.ts

@@ -1,8 +0,0 @@
-import { KoineLinkProps } from "../Link";
-import { KoineComponent, KoineComponentProps } from "../types";
-import { KoineButtonUiProps } from "./Button";
-export type KoineButtonLinkProps = KoineButtonUiProps & KoineLinkProps;
-export type ButtonLinkProps = KoineComponentProps<KoineButtonLinkProps, {
-    Link?: KoineComponent;
-}>;
-export declare const KoineButtonLink: ({ href, Link, ...props }: React.PropsWithChildren<ButtonLinkProps>) => import("react/jsx-runtime").JSX.Element;

package/Buttons/ButtonLink.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "KoineButtonLink", {
-    enumerable: true,
-    get: function() {
-        return KoineButtonLink;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Button = require("./Button");
-const Root = (0, _styledcomponents.default)(_Button.KoineButton)`
-  text-decoration: none;
-`;
-const KoineButtonLink = ({ href, Link = "a", ...props })=>{
-    const isRelative = href && href.startsWith("/");
-    return isRelative ? /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
-        href: href,
-        ...props,
-        as: Link
-    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(Root, {
-        href: href,
-        ...props,
-        as: "a"
-    });
-};

package/Buttons/ButtonLink.mjs

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-import { KoineButton } from "./Button";
-const Root = styled(KoineButton)`
-  text-decoration: none;
-`;
-export const KoineButtonLink = ({ href, Link = "a", ...props })=>{
-    const isRelative = href && href.startsWith("/");
-    return isRelative ? /*#__PURE__*/ _jsx(Root, {
-        href: href,
-        ...props,
-        as: Link
-    }) : /*#__PURE__*/ _jsx(Root, {
-        href: href,
-        ...props,
-        as: "a"
-    });
-};

package/Buttons/IconButton.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { KoineButtonUiProps } from "./Button";
-export declare const iconBtnStyleReset: import("styled-components").FlattenSimpleInterpolation;
-export declare const iconBtnStyleBase: import("styled-components").FlattenSimpleInterpolation;
-export declare const IconButton: any;
-export type IconButtonUiProps = KoineButtonUiProps & {
-    disabled?: boolean;
-};
-export type IconButtonProps = IconButtonUiProps & React.ComponentPropsWithRef<"button">;