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

package/Autocomplete/helpers.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "normaliseAutocompleteValue", {
-    enumerable: true,
-    get: function() {
-        return normaliseAutocompleteValue;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _isArray = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isArray"));
-const _isString = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isString"));
-function normaliseAutocompleteValue(value, asArray) {
-    if (!value) {
-        return asArray ? [
-            ""
-        ] : "";
-    }
-    if ((0, _isString.default)(value)) {
-        return asArray ? [
-            value
-        ] : value;
-    }
-    if ((0, _isArray.default)(value)) {
-        const values = value.map((valueItem)=>{
-            return (0, _isString.default)(valueItem) ? valueItem : valueItem.value;
-        });
-        return asArray ? values : values.join(",");
-    }
-    return asArray ? [
-        value.value
-    ] : value.value;
-}

package/Autocomplete/helpers.mjs

@@ -1,35 +0,0 @@
-import isArray from "@koine/utils/isArray";
-import isString from "@koine/utils/isString";
-// export function normaliseAutocompleteValue(
-//   value?: AutocompleteValue,
-//   asArray?: true
-// ): string[];
-// export function normaliseAutocompleteValue(
-//   value?: AutocompleteValue,
-//   asArray?: false
-// ): string;
-// export function normaliseAutocompleteValue(
-//   value?: AutocompleteValue,
-//   asArray?: undefined
-// ): string;
-export function normaliseAutocompleteValue(value, asArray) {
-    if (!value) {
-        return asArray ? [
-            ""
-        ] : "";
-    }
-    if (isString(value)) {
-        return asArray ? [
-            value
-        ] : value;
-    }
-    if (isArray(value)) {
-        const values = value.map((valueItem)=>{
-            return isString(valueItem) ? valueItem : valueItem.value;
-        });
-        return asArray ? values : values.join(",");
-    }
-    return asArray ? [
-        value.value
-    ] : value.value;
-}

package/Autocomplete/index.d.ts

@@ -1,2 +0,0 @@
-export type { AutocompleteProps, AutocompleteConfig } from "./AutocompleteMui";
-export { Autocomplete } from "./AutocompleteMui";

package/Autocomplete/index.js

@@ -1,15 +0,0 @@
-// export type { AutocompleteProps } from "./AutocompleteDownshift";
-// export { Autocomplete } from "./AutocompleteDownshift";
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Autocomplete", {
-    enumerable: true,
-    get: function() {
-        return _AutocompleteMui.Autocomplete;
-    }
-});
-const _AutocompleteMui = require("./AutocompleteMui");
- // export type { AutocompleteProps } from "./AutocompleteReach";
- // export { Autocomplete } from "./AutocompleteReach";

package/Autocomplete/index.mjs

@@ -1,4 +0,0 @@
-// export type { AutocompleteProps } from "./AutocompleteDownshift";
-// export { Autocomplete } from "./AutocompleteDownshift";
-export { Autocomplete } from "./AutocompleteMui"; // export type { AutocompleteProps } from "./AutocompleteReach";
- // export { Autocomplete } from "./AutocompleteReach";

package/Bg/BgColor.d.ts

@@ -1,36 +0,0 @@
-/// <reference types="react" />
-import { ContainerProps } from "../Grid";
-export declare const BgColor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $bg: BgContainerProps["color"];
-}, never>;
-export declare const BgColorSkewed: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    $bg: BgContainerProps["color"];
-    $transform: string;
-}, never>;
-export type BgContainerProps = ContainerProps & {
-    color: NonNullable<React.CSSProperties["background"]>;
-    /**
-     * In `deg` unit.
-     * @default 0
-     */
-    skewY?: number;
-    /**
-     * In `deg` unit. Suggested `10` to `20`
-     * @default 0
-     */
-    rotate?: number;
-    /**
-     * @default  1
-     */
-    scaleY?: number;
-    /**
-     * @default 1
-     */
-    scaleX?: number;
-    /**
-     * In `vw` unit
-     * @default 0
-     */
-    perspective?: number;
-};
-export declare const BgContainer: ({ color, skewY, rotate, scaleY, scaleX, perspective, ...containerProps }: BgContainerProps) => import("react/jsx-runtime").JSX.Element;

package/Bg/BgColor.js

@@ -1,59 +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, {
-    BgColor: function() {
-        return BgColor;
-    },
-    BgColorSkewed: function() {
-        return BgColorSkewed;
-    },
-    BgContainer: function() {
-        return BgContainer;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Grid = require("../Grid");
-const _styles = require("../styles");
-const BgColor = _styledcomponents.default.div`
-  background: ${(p)=>p.$bg};
-`;
-const BgColorSkewed = _styledcomponents.default.div`
-  position: relative;
-  /* overflow: hidden; */
-
-  &:before {
-    z-index: -1;
-    content: "";
-    ${(p)=>`
-      ${_styles.overlay}
-      transform: ${p.$transform};
-      background: ${p.$bg};
-    `}
-  }
-`;
-const BgContainer = ({ color, skewY = 0, rotate = 0, scaleY = 1, scaleX = 1, perspective = 0, ...containerProps })=>{
-    let $transform = "";
-    if (skewY || rotate) {
-        $transform = `perspective(${perspective}vw) rotateY(${rotate}deg) skewY(${skewY}deg) scaleY(${scaleY}) scaleX(${scaleX})`;
-    }
-    return $transform ? /*#__PURE__*/ React.createElement(BgColorSkewed, {
-        $bg: color,
-        $transform: $transform
-    }, /*#__PURE__*/ React.createElement(_Grid.Container, {
-        style: {
-            position: "relative"
-        },
-        ...containerProps
-    })) : /*#__PURE__*/ React.createElement(BgColor, {
-        $bg: color
-    }, /*#__PURE__*/ React.createElement(_Grid.Container, containerProps));
-};

package/Bg/BgColor.mjs

@@ -1,37 +0,0 @@
-import styled from "styled-components";
-import { Container } from "../Grid";
-import { overlay } from "../styles";
-export const BgColor = styled.div`
-  background: ${(p)=>p.$bg};
-`;
-export const BgColorSkewed = styled.div`
-  position: relative;
-  /* overflow: hidden; */
-
-  &:before {
-    z-index: -1;
-    content: "";
-    ${(p)=>`
-      ${overlay}
-      transform: ${p.$transform};
-      background: ${p.$bg};
-    `}
-  }
-`;
-export const BgContainer = ({ color, skewY = 0, rotate = 0, scaleY = 1, scaleX = 1, perspective = 0, ...containerProps })=>{
-    let $transform = "";
-    if (skewY || rotate) {
-        $transform = `perspective(${perspective}vw) rotateY(${rotate}deg) skewY(${skewY}deg) scaleY(${scaleY}) scaleX(${scaleX})`;
-    }
-    return $transform ? /*#__PURE__*/ React.createElement(BgColorSkewed, {
-        $bg: color,
-        $transform: $transform
-    }, /*#__PURE__*/ React.createElement(Container, {
-        style: {
-            position: "relative"
-        },
-        ...containerProps
-    })) : /*#__PURE__*/ React.createElement(BgColor, {
-        $bg: color
-    }, /*#__PURE__*/ React.createElement(Container, containerProps));
-};

package/Bg/BgPhoto.d.ts

@@ -1,13 +0,0 @@
-import { ContainerProps } from "../Grid";
-export type BgPhotoPropsStyled = Required<Pick<BgPhotoProps, "containerSize" | "$overlap">>;
-export type BgPhotoProps = {
-    src: string;
-    containerSize?: ContainerProps["size"];
-    /**
-     * Bg photo overlap on container, in px
-     *
-     * @default 0
-     */
-    $overlap?: number;
-};
-export declare const BgPhoto: ({ src, containerSize, $overlap, }: BgPhotoProps) => import("react/jsx-runtime").JSX.Element;

package/Bg/BgPhoto.js

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "BgPhoto", {
-    enumerable: true,
-    get: function() {
-        return BgPhoto;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Grid = require("../Grid");
-const _Hidden = require("../Hidden");
-const BgPhotoWrap = (0, _styledcomponents.default)(_Hidden.Hidden)`
-  z-index: -10;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  pointer-events: none;
-  background-repeat: no-repeat;
-  background-position: top left;
-  background-size: contain;
-  filter: hue-rotate(-36deg);
-  opacity: 0.8;
-`;
-const BgPhotoMask = (0, _styledcomponents.default)(_Grid.Container)`
-  position: relative;
-  min-height: 100%;
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    height: 100%;
-    right: calc(100% - ${(p)=>p.$overlap + 2}px);
-    width: ${(p)=>{
-    const containerSizePx = p.theme.breakpoints[p.containerSize];
-    return `calc(((100vw - ${containerSizePx}px) / 2) + ${p.$overlap + 2}px)`;
-}};
-    background: linear-gradient(
-        90deg,
-        rgba(var(--bodyBg-rgb, 0)) 0%,
-        rgba(var(--bodyBg-rgb, 1)) 100%
-      ),
-      linear-gradient(
-        60deg,
-        rgba(var(--bodyBg-rgb, 0)) 0%,
-        rgba(var(--bodyBg-rgb, 1)) 70%
-      );
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: ${(p)=>p.$overlap + 1}px;
-    width: 100vw;
-    background: var(--bodyBg);
-  }
-`;
-const BgPhoto = ({ src, containerSize = "xl", $overlap = 0 })=>{
-    const styledProps = {
-        containerSize,
-        $overlap
-    };
-    return /*#__PURE__*/ React.createElement(BgPhotoWrap, {
-        style: {
-            backgroundImage: `url(${src})`
-        },
-        $max: "xxl"
-    }, /*#__PURE__*/ React.createElement(BgPhotoMask, {
-        size: containerSize,
-        ...styledProps
-    }));
-};

package/Bg/BgPhoto.mjs

@@ -1,69 +0,0 @@
-import styled from "styled-components";
-import { Container } from "../Grid";
-import { Hidden } from "../Hidden";
-const BgPhotoWrap = styled(Hidden)`
-  z-index: -10;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-  pointer-events: none;
-  background-repeat: no-repeat;
-  background-position: top left;
-  background-size: contain;
-  filter: hue-rotate(-36deg);
-  opacity: 0.8;
-`;
-const BgPhotoMask = styled(Container)`
-  position: relative;
-  min-height: 100%;
-
-  &:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    height: 100%;
-    right: calc(100% - ${(p)=>p.$overlap + 2}px);
-    width: ${(p)=>{
-    const containerSizePx = p.theme.breakpoints[p.containerSize];
-    return `calc(((100vw - ${containerSizePx}px) / 2) + ${p.$overlap + 2}px)`;
-}};
-    background: linear-gradient(
-        90deg,
-        rgba(var(--bodyBg-rgb, 0)) 0%,
-        rgba(var(--bodyBg-rgb, 1)) 100%
-      ),
-      linear-gradient(
-        60deg,
-        rgba(var(--bodyBg-rgb, 0)) 0%,
-        rgba(var(--bodyBg-rgb, 1)) 70%
-      );
-  }
-
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: ${(p)=>p.$overlap + 1}px;
-    width: 100vw;
-    background: var(--bodyBg);
-  }
-`;
-export const BgPhoto = ({ src, containerSize = "xl", $overlap = 0 })=>{
-    const styledProps = {
-        containerSize,
-        $overlap
-    };
-    return /*#__PURE__*/ React.createElement(BgPhotoWrap, {
-        style: {
-            backgroundImage: `url(${src})`
-        },
-        $max: "xxl"
-    }, /*#__PURE__*/ React.createElement(BgPhotoMask, {
-        size: containerSize,
-        ...styledProps
-    }));
-};

package/Bg/BgSvg.d.ts

@@ -1,7 +0,0 @@
-export type BgSvgProps = {
-    color: string;
-};
-/**
- * Centered triangle shape
- */
-export declare const BgSvg: ({ color }: BgSvgProps) => import("react/jsx-runtime").JSX.Element;

package/Bg/BgSvg.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "BgSvg", {
-    enumerable: true,
-    get: function() {
-        return BgSvg;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const Root = _styledcomponents.default.svg`
-  position: fixed;
-  z-index: -2;
-  bottom: 0;
-  transform: rotate(180deg);
-  opacity: 0.9;
-`;
-const BgSvg = ({ color })=>{
-    return /*#__PURE__*/ React.createElement(Root, {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 1200 120",
-        preserveAspectRatio: "none"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M1200 0L0 0 598.97 114.72 1200 0z",
-        fill: color
-    }));
-};

package/Bg/BgSvg.mjs

@@ -1,20 +0,0 @@
-import styled from "styled-components";
-const Root = styled.svg`
-  position: fixed;
-  z-index: -2;
-  bottom: 0;
-  transform: rotate(180deg);
-  opacity: 0.9;
-`;
-/**
- * Centered triangle shape
- */ export const BgSvg = ({ color })=>{
-    return /*#__PURE__*/ React.createElement(Root, {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 1200 120",
-        preserveAspectRatio: "none"
-    }, /*#__PURE__*/ React.createElement("path", {
-        d: "M1200 0L0 0 598.97 114.72 1200 0z",
-        fill: color
-    }));
-};

package/Bg/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./BgColor";
-export * from "./BgPhoto";
-export * from "./BgSvg";

package/Bg/index.js

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

package/Bg/index.mjs

@@ -1,3 +0,0 @@
-export * from "./BgColor";
-export * from "./BgPhoto";
-export * from "./BgSvg";

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,13 +0,0 @@
-import { KoineComponent, KoineComponentProps } from "../types";
-export type BreadcrumbsItem = {
-    title: string;
-    url?: string;
-};
-export type KoineBreadcrumbsProps = {
-    items: BreadcrumbsItem[];
-};
-type BreadcrumbsProps = KoineComponentProps<KoineBreadcrumbsProps, {
-    Link: KoineComponent;
-}>;
-export declare const KoineBreadcrumbs: ({ items, Link, ...props }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/Breadcrumbs/Breadcrumbs.js

@@ -1,90 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "KoineBreadcrumbs", {
-    enumerable: true,
-    get: function() {
-        return KoineBreadcrumbs;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _framermotion = require("framer-motion");
-const _md = require("react-icons/md");
-const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
-const _titleCase = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/titleCase"));
-const _media = require("../styles/media");
-const LINK_GUTTER_X = 10;
-const Root = _styledcomponents.default.nav`
-  display: flex;
-  position: relative;
-`;
-const Inner = _styledcomponents.default.div`
-  display: flex;
-  font-size: 11px;
-  color: var(--grey100);
-  ${_media.min.sm} {
-    font-size: 12px;
-  }
-  ${_media.max.lg} {
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-`;
-const Item = (0, _styledcomponents.default)(_framermotion.m.div)`
-  display: flex;
-  align-items: center;
-  /* margin: 0 10px 0 0; */
-
-  &:first-child {
-    margin-left: -${LINK_GUTTER_X / 2}px;
-  }
-  ${_media.min.sm} {
-    &:first-child {
-      margin-left: -${LINK_GUTTER_X}px;
-    }
-  }
-`;
-const itemChild = (0, _styledcomponents.css)`
-  display: block;
-  padding: 10px ${LINK_GUTTER_X / 2}px;
-
-  ${_media.min.sm} {
-    padding: 10px ${LINK_GUTTER_X}px;
-  }
-`;
-const ItemLink = _styledcomponents.default.a`
-  ${itemChild}
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-`;
-const ItemCurrent = _styledcomponents.default.span`
-  ${itemChild}
-`;
-const ItemSeparator = (0, _styledcomponents.default)(_md.MdKeyboardArrowRight)``;
-const KoineBreadcrumbs = ({ items = [], Link, ...props })=>{
-    if (!items.length) {
-        return null;
-    }
-    return /*#__PURE__*/ React.createElement(Root, props, /*#__PURE__*/ React.createElement(Inner, null, items.map((item, idx)=>/*#__PURE__*/ React.createElement(Item, {
-            key: idx,
-            initial: {
-                opacity: 0,
-                x: 20
-            },
-            animate: {
-                opacity: 1,
-                x: 0,
-                transition: {
-                    delay: idx * 0.2
-                }
-            }
-        }, item.url && /*#__PURE__*/ React.createElement(ItemLink, {
-            as: Link,
-            href: item.url
-        }, (0, _titleCase.default)(item.title)), !item.url && /*#__PURE__*/ React.createElement(ItemCurrent, null, (0, _titleCase.default)(item.title)), idx < items.length - 1 && /*#__PURE__*/ React.createElement(ItemSeparator, null)))));
-};

package/Breadcrumbs/Breadcrumbs.mjs

@@ -1,78 +0,0 @@
-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__*/ React.createElement(Root, props, /*#__PURE__*/ React.createElement(Inner, null, items.map((item, idx)=>/*#__PURE__*/ React.createElement(Item, {
-            key: idx,
-            initial: {
-                opacity: 0,
-                x: 20
-            },
-            animate: {
-                opacity: 1,
-                x: 0,
-                transition: {
-                    delay: idx * 0.2
-                }
-            }
-        }, item.url && /*#__PURE__*/ React.createElement(ItemLink, {
-            as: Link,
-            href: item.url
-        }, titleCase(item.title)), !item.url && /*#__PURE__*/ React.createElement(ItemCurrent, null, titleCase(item.title)), idx < items.length - 1 && /*#__PURE__*/ React.createElement(ItemSeparator, null)))));
-};

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";