@yakad/ui 2.0.1 → 2.0.3

package/dist/Navigation/Navigation.module.css

@@ -1,61 +0,0 @@
-.navigation {
-    position: fixed;
-    max-width: 100%;
-    padding: 1rem 0;
-    background: rgb(var(--surfaceContainerColor, 243 237 247));
-    color: rgb(var(--onSurfaceColor, 28 27 31));
-    fill: rgb(var(--onSurfaceColor, 28 27 31));
-    transition: transform 0.3s;
-    overflow-y: auto;
-    z-index: 3;
-}
-
-.auto,
-.left {
-    top: 6rem;
-    left: 0;
-    width: 21.9rem;
-    height: calc(100% - 6rem);
-    max-height: 100%;
-    border-inline-end: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
-    transform: translate(-100%, 0);
-}
-[dir="rtl"] .auto,
-.right {
-    right: 0;
-    top: 6rem;
-    width: 21.9rem;
-    height: calc(100% - 6rem);
-    max-height: 100%;
-    border-inline-end: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
-
-    transform: translate(100%, 0);
-}
-
-.top {
-    top: 0;
-    width: 100%;
-    height: auto;
-    border-bottom: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
-    transform: translate(0, -100%);
-}
-.bottom {
-    bottom: 0;
-    width: 100%;
-    height: auto;
-    border-top: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
-    transform: translate(0, 100%);
-}
-
-.open {
-    transform: translate(0, 0);
-}
-
-@media screen and (max-width: 1000px) {
-    .auto,
-    .left,
-    .right {
-        top: 0;
-        height: 100%;
-    }
-}

package/dist/Popup/Popup.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { CardProps, OverlayProps } from "..";
-export interface PopupProps extends CardProps, OverlayProps {
-    heading?: string;
-    teleport?: boolean;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Popup({ align, onClose, heading, className, children, teleport, ref, ...restProps }: PopupProps): import("react").JSX.Element;

package/dist/Popup/Popup.js

@@ -1,40 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle } from "react";
-import classNames from "classnames";
-import { Material } from "@yakad/symbols";
-import { Button, Card, Row, Screen, Spacer, Stack, Text, } from "..";
-import styles from "./Popup.module.css";
-import { createPortal } from "react-dom";
-import { useOnOutsideClick } from "@yakad/use-interactions";
-export function Popup(_a) {
-    var { align, onClose, heading, className, children, teleport = false, ref } = _a, restProps = __rest(_a, ["align", "onClose", "heading", "className", "children", "teleport", "ref"]);
-    const localRef = useOnOutsideClick(() => {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    });
-    const doTeleport = () => {
-        const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
-        const t = portalRoot && createPortal(popup(), portalRoot);
-        return t;
-    };
-    useEffect(() => {
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = "initial";
-        };
-    }, []);
-    useImperativeHandle(ref, () => localRef.current);
-    const popup = () => (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsxs(Card, Object.assign({ ref: localRef }, restProps, { className: classNames(styles.popup, className), children: [_jsxs(Row, { style: { marginBottom: "2rem" }, children: [_jsx(Text, { variant: "heading4", children: heading }), _jsx(Spacer, {}), _jsx(Button, { title: "Close", icon: _jsx(Material, { icon: "close" }), onClick: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }));
-    return teleport ? doTeleport() : popup();
-}

package/dist/Popup/Popup.module.css

@@ -1,15 +0,0 @@
-.popupscreen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-color: rgba(var(--surfaceContainerColor, 243 237 247), 0.2);
-    backdrop-filter: blur(0.2rem);
-    z-index: 4;
-}
-
-.popup {
-    width: 90%;
-    max-width: 60rem;
-    min-height: 10rem;
-    max-height: 90vh;
-}

package/dist/RadioButton/RadioButton.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-type ExcludedTypes = "type" | "name" | "defaultValue" | "defaultChecked" | "checked";
-export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedTypes> {
-    value: string | number;
-    label?: string;
-    dataFromRadioGroup?: {
-        name: string;
-        onSelect: () => void;
-        checked: boolean;
-    };
-    ref?: React.Ref<HTMLInputElement>;
-}
-export declare function RadioButton({ dataFromRadioGroup, label, onClick, className, ...restProps }: RadioButtonProps): import("react").JSX.Element;
-export {};

package/dist/RadioButton/RadioButton.js

@@ -1,31 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from "classnames";
-import { Material } from "@yakad/symbols";
-import { Button } from "..";
-import styles from "./RadioButton.module.css";
-export function RadioButton(_a) {
-    var { dataFromRadioGroup, label, onClick, className } = _a, restProps = __rest(_a, ["dataFromRadioGroup", "label", "onClick", "className"]);
-    const joinedClassNames = classNames(styles.radiobutton, {
-        [styles.labeled]: label,
-        className,
-    });
-    const onClickRadioButtonHandler = () => {
-        dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.onSelect();
-        onClick;
-    };
-    return (_jsxs("div", { className: joinedClassNames, children: [label && (_jsx("label", { className: styles.label, htmlFor: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.name, children: label })), _jsx(Button, { icon: _jsx(Material, { icon: (dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.checked)
-                        ? "radio_button_checked"
-                        : "radio_button_unchecked" }), onClick: onClickRadioButtonHandler, disabled: restProps.disabled }), _jsx("input", Object.assign({}, restProps, { className: styles.input, type: "radio", name: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.name, checked: dataFromRadioGroup === null || dataFromRadioGroup === void 0 ? void 0 : dataFromRadioGroup.checked }))] }));
-}

package/dist/RadioButton/RadioButton.module.css

@@ -1,22 +0,0 @@
-.radiobutton {
-    display: flex;
-    flex-direction: row;
-    width: 4rem;
-    height: 4rem;
-}
-.radiobutton.labeled {
-    width: 100%;
-}
-
-.input {
-    display: none;
-}
-
-.label {
-    display: block;
-    width: auto;
-    margin: 0.9rem 1rem;
-    margin-inline-end: auto;
-    line-height: 2.2rem;
-    font-size: 2rem;
-}

package/dist/Spacer/Spacer.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export interface SpacerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Spacer({ className, ...restProps }: SpacerProps): import("react").JSX.Element;

package/dist/Spacer/Spacer.module.css

@@ -1,5 +0,0 @@
-.spacer {
-    width: 0;
-    height: 100%;
-    margin: auto;
-}

package/dist/Table/Table.module.css

@@ -1,41 +0,0 @@
-.table {
-    border-collapse: unset;
-    border-spacing: unset;
-    border-radius: 0.7rem;
-    overflow: hidden;
-}
-
-.table .tbody .tr:nth-child(even) {
-    background-color: #7d7d7d20;
-}
-.table .tbody .tr:hover {
-    background-color: #7d7d7d30;
-}
-
-.table .thead .tr .th,
-.table .tfoot .tr .td {
-    padding: 1rem;
-    background-color: rgb(var(--surfaceContainerColor, 243 237 247));
-    border-inline-start: 0.1rem solid #7d7d7d15;
-    font-size: 1.5rem;
-    line-height: 3rem;
-    text-align: start;
-}
-.table .thead .tr .th {
-    border-bottom: 0.2rem solid #7d7d7d40;
-}
-.table .tfoot .tr .td {
-    border-top: 0.2rem solid #7d7d7d40;
-}
-
-.table .tbody .tr .td {
-    padding: 0.5rem 1rem;
-    border-inline-start: 0.1rem solid #7d7d7d15;
-    font-size: 1.4rem;
-    line-height: 3rem;
-}
-.table .thead .tr .th:nth-child(1),
-.table .tbody .tr .td:nth-child(1),
-.table .tfoot .tr .td:nth-child(1) {
-    border-inline-start: initial;
-}

package/dist/WithOverlay/WithOverlay.d.ts

@@ -1,15 +0,0 @@
-import { RefObject } from "react";
-import { Dropdown, DropdownProps, Popup, PopupProps, StackProps } from "..";
-export interface OverlayProps {
-    triggerref?: RefObject<HTMLElement | null>;
-    onClose?: () => void;
-}
-type AllowedOverlays = React.ReactElement<PopupProps, typeof Popup> | React.ReactElement<DropdownProps, typeof Dropdown>;
-export interface WithOverlayProps extends StackProps {
-    trigger?: "onClick" | "onRightClick";
-    overlay?: AllowedOverlays;
-    children?: React.ReactElement;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function WithOverlay({ trigger, overlay, children, onClick, ref, ...restProps }: WithOverlayProps): import("react").JSX.Element;
-export {};

package/dist/WithOverlay/WithOverlay.js

@@ -1,40 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useImperativeHandle, cloneElement, } from "react";
-import { Stack, } from "..";
-import { useOnRightClick } from "@yakad/use-interactions";
-export function WithOverlay(_a) {
-    var { trigger = "onClick", overlay, children, onClick, ref } = _a, restProps = __rest(_a, ["trigger", "overlay", "children", "onClick", "ref"]);
-    // Get Triggers ref and send to Overlay
-    const localRef = useRef(null);
-    const [showOverlay, setShowOverlay] = useState(false);
-    useOnRightClick(() => {
-        setShowOverlay(true);
-    }, localRef);
-    const onClickHandler = (e) => {
-        trigger === "onClick" && setShowOverlay((prev) => !prev);
-        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    };
-    // Let the parent access our DOM node
-    useImperativeHandle(ref, () => localRef.current);
-    const clonedOverlay = cloneElement(overlay, {
-        triggerref: localRef,
-        onClose: () => {
-            var _a, _b;
-            (_b = overlay === null || overlay === void 0 ? void 0 : (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-            setShowOverlay(false);
-        },
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ ref: localRef }, restProps, { onClick: onClickHandler, children: children })), showOverlay && clonedOverlay] }));
-}