@koine/react 2.0.0-beta.12 → 2.0.0-beta.120

package/Bg/index.d.ts

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

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

package/Buttons/IconButton.mjs

@@ -1,19 +0,0 @@
-import styled, { css } from "styled-components";
-import { btnStyleContained, btnStyleOutlined, btnStyleReset } from "./Button";
-export const iconBtnStyleReset = css`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  border-radius: 100%;
-  ${btnStyleReset}
-`;
-export const iconBtnStyleBase = css`
-  ${iconBtnStyleReset}
-`;
-export const IconButton = styled.button`
-  ${iconBtnStyleBase}
-  ${(p)=>p.$variant === "outlined" && btnStyleOutlined}
-  ${(p)=>p.$variant === "contained" && btnStyleContained}
-`;

package/Buttons/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./Button";
-export * from "./ButtonComposite";
-export * from "./ButtonFab";
-export * from "./ButtonLink";
-export * from "./IconButton";

package/Buttons/index.mjs

@@ -1,5 +0,0 @@
-export * from "./Button";
-export * from "./ButtonComposite";
-export * from "./ButtonFab";
-export * from "./ButtonLink";
-export * from "./IconButton";

package/Calendar/CalendarDaygridCell.mjs

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useState } from "react";
-import { MdAdd as IconExpand } from "react-icons/md";
-import { getDisplayTime } from "./utils";
-/**
- * Style for button within a event cell
- *
- * Here we might differentiate week/month view where the first does not get
- * ellipsed btn texts, with `Start` as block element and underneath the `Title`
- * on multiple lines, but that would mean that we loose the ability to interweave
- * single-day events among the spaces left by wider multi-days events.
- */ const styleBtn = {
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis"
-};
-export const CalendarDaygridCell = ({ eventClicked, setEventClicked, // eventHovered,
-setEventHovered, view, maxEvents, events, calendarsMap, Cell = "div", CellOverflow = "div", CellEvent = "div", CellEventBtn = "div", CellEventTitle = "span", CellEventStart = "span" })=>{
-    const [isExpanded, expand] = useState(false);
-    const eventsWithoutPlaceholders = events.filter((event)=>!event.placeholder);
-    return /*#__PURE__*/ _jsx(Cell, {
-        children: events.map((event, i)=>{
-            if (i === maxEvents && !isExpanded) {
-                return /*#__PURE__*/ _jsxs(CellOverflow, {
-                    onClick: ()=>expand(true),
-                    children: [
-                        /*#__PURE__*/ _jsx(IconExpand, {}),
-                        eventsWithoutPlaceholders.length - maxEvents
-                    ]
-                }, "overflowMessage" + i);
-            }
-            if (i > maxEvents && !isExpanded) return null;
-            if (event.placeholder) {
-                return /*#__PURE__*/ _jsx(Fragment, {
-                    children: /*#__PURE__*/ _jsx(CellEvent, {
-                        $placeholder: true,
-                        children: /*#__PURE__*/ _jsx(CellEventBtn, {
-                            "aria-hidden": "true",
-                            style: {
-                                visibility: "hidden"
-                            },
-                            $placeholder: true,
-                            children: /*#__PURE__*/ _jsx(CellEventTitle, {
-                                children: "\xa0"
-                            })
-                        })
-                    })
-                }, event.key);
-            }
-            const styleEvent = {
-                zIndex: event.firstOfMulti ? 1 : 0,
-                position: "relative",
-                width: event.firstOfMulti ? `${100 * event.width}%` : "100%"
-            };
-            if (!calendarsMap[event.calendar.id].on) {
-                // @ts-expect-error nevermind
-                styleBtn.display = "none";
-            }
-            const styledProps = {
-                $view: view,
-                $selected: eventClicked?.uid === event.uid,
-                $past: event.isPast,
-                $color: event.color,
-                $isOutOfRange: event.$isOutOfRange,
-                $isToday: event.$isToday
-            };
-            return /*#__PURE__*/ _jsx(Fragment, {
-                children: /*#__PURE__*/ _jsx(CellEvent, {
-                    style: styleEvent,
-                    ...styledProps,
-                    children: /*#__PURE__*/ _jsx(CellEventBtn, {
-                        role: "button",
-                        style: styleBtn,
-                        ...styledProps,
-                        onClick: ()=>setEventClicked((prev)=>prev?.uid === event.uid ? null : event),
-                        onMouseEnter: ()=>setEventHovered(event),
-                        onMouseLeave: ()=>setEventHovered(null),
-                        children: event.allDay ? /*#__PURE__*/ _jsx(CellEventTitle, {
-                            children: event.title
-                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                            children: [
-                                /*#__PURE__*/ _jsx(CellEventStart, {
-                                    children: getDisplayTime(event.start)
-                                }),
-                                /*#__PURE__*/ _jsx(CellEventTitle, {
-                                    children: event.title
-                                })
-                            ]
-                        })
-                    })
-                })
-            }, event.key);
-        })
-    });
-};

package/Calendar/CalendarDaygridNav.mjs

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import format from "date-fns/format";
-import { useDateLocale } from "../hooks/useDateLocale";
-export const KoineCalendarDaygridNav = ({ range, view, todayInView, handlePrev, handleNext, handleToday, handleView, locale: localeCode, NavRoot = "nav", NavTitle = "div", NavBtns = "div", NavBtnPrev = "button", NavBtnNext = "button", NavBtnToday = "button", NavBtnViewMonth = "button", NavBtnViewWeek = "button" })=>{
-    const [start, end] = range;
-    const locale = useDateLocale(localeCode);
-    const opts = {
-        locale
-    };
-    let formatted = "";
-    if (view === "month") {
-        formatted = format(start, "MMMM yyyy", opts);
-    }
-    if (view === "week") {
-        const inSameMonth = start.getMonth() === end.getMonth();
-        if (inSameMonth) {
-            formatted = format(start, "# MMMM yyyy", opts).replace("#", `${start.getDate()}-${end.getDate()}`);
-        } else {
-            formatted = `${format(start, "d MMMM", opts)} - ${format(end, "d MMMM yyyy", opts)}`;
-        }
-    }
-    return /*#__PURE__*/ _jsxs(NavRoot, {
-        children: [
-            /*#__PURE__*/ _jsxs(NavBtns, {
-                children: [
-                    /*#__PURE__*/ _jsx(NavBtnPrev, {
-                        onClick: handlePrev
-                    }),
-                    /*#__PURE__*/ _jsx(NavBtnNext, {
-                        onClick: handleNext
-                    }),
-                    /*#__PURE__*/ _jsx(NavBtnToday, {
-                        onClick: handleToday,
-                        disabled: todayInView
-                    }),
-                    /*#__PURE__*/ _jsx(NavBtnViewMonth, {
-                        onClick: ()=>handleView("month"),
-                        disabled: view === "month"
-                    }),
-                    /*#__PURE__*/ _jsx(NavBtnViewWeek, {
-                        onClick: ()=>handleView("week"),
-                        disabled: view === "week"
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(NavTitle, {
-                range: range,
-                formatted: formatted
-            })
-        ]
-    });
-};