@yakad/ui 2.0.1 → 2.0.2

package/dist/Label/Label.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+declare const labelVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export { Label, labelVariants };

package/dist/{Spacer/Spacer.js → Label/Label.js}

@@ -10,10 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-import styles from "./Spacer.module.css";
-export function Spacer(_a) {
+import React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef((_a, ref) => {
     var { className } = _a, restProps = __rest(_a, ["className"]);
-    const joinedClassNames = classNames(styles.spacer, className);
-    return _jsx("div", Object.assign({}, restProps, { className: joinedClassNames }));
-}
+    return (_jsx(LabelPrimitive.Root, Object.assign({ ref: ref, className: labelVariants({ className }) }, restProps)));
+});
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label, labelVariants };

package/dist/Separator/Separator.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { type VariantProps } from "class-variance-authority";
+declare const separatorVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, VariantProps<typeof separatorVariants> {
+    ref?: React.Ref<React.ElementRef<typeof SeparatorPrimitive.Root>>;
+}
+export declare function Separator({ orientation, decorative, className, ref, ...restProps }: SeparatorProps): React.JSX.Element;
+export {};

package/dist/Separator/Separator.js

@@ -0,0 +1,24 @@
+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 } from "react/jsx-runtime";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cva } from "class-variance-authority";
+const separatorVariants = cva("shrink-0 bg-border");
+export function Separator(_a) {
+    var { orientation = "horizontal", decorative = true, className, ref } = _a, restProps = __rest(_a, ["orientation", "decorative", "className", "ref"]);
+    return (_jsx(SeparatorPrimitive.Root, Object.assign({ ref: ref, orientation: orientation, decorative: decorative, className: separatorVariants({
+            className: [
+                orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+                className,
+            ],
+        }) }, restProps)));
+}

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export * from "./Stack/Stack";
 export * from "./GridContainer/GridContainer";
 export * from "./GridItem/GridItem";
 export * from "./Card/Card";
-export * from "./Spacer/Spacer";
+export * from "./Separator/Separator";
 export * from "./Hr/Hr";
 export * from "./List/List";
 export * from "./ListItem/ListItem";
@@ -17,6 +17,7 @@ export * from "./Table/Table";
 export * from "./Button/Button";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
+export * from "./Label/Label";
 export * from "./Form/Form";
 export * from "./Input/Input";
 export * from "./CheckBox/CheckBox";
@@ -25,9 +26,6 @@ export * from "./RadioGroup/RadioGroup";
 export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
-export * from "./WithOverlay/WithOverlay";
 export * from "./RenderByScroll/RenderByScroll";
 export * from "./ActiveOnVisible/ActiveOnVisible";
-export * from "./Dropdown/Dropdown";
-export * from "./Popup/Popup";
 export * from "./Avatar/Avatar";

package/dist/index.js

@@ -11,7 +11,7 @@ export * from "./GridContainer/GridContainer";
 export * from "./GridItem/GridItem";
 export * from "./Card/Card"; // Stack Based
 // Theme & Styling
-export * from "./Spacer/Spacer";
+export * from "./Separator/Separator";
 export * from "./Hr/Hr";
 // UI Components
 export * from "./List/List";
@@ -20,6 +20,7 @@ export * from "./Table/Table";
 export * from "./Button/Button";
 export * from "./SvgIcon/SvgIcon";
 export * from "./Text/Text";
+export * from "./Label/Label";
 // Form Components
 export * from "./Form/Form";
 export * from "./Input/Input";
@@ -30,10 +31,7 @@ export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 // Utilities
 export * from "./Display/Display"; // Stack Based
-export * from "./WithOverlay/WithOverlay";
 export * from "./RenderByScroll/RenderByScroll"; // Stack Based
 export * from "./ActiveOnVisible/ActiveOnVisible"; // Stack Based
 // Overlays
-export * from "./Dropdown/Dropdown"; // Card Based
-export * from "./Popup/Popup"; // Card Based
 export * from "./Avatar/Avatar";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "2.0.1",
+    "version": "2.0.2",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -34,6 +34,7 @@
     },
     "dependencies": {
         "@material/material-color-utilities": "^0.4.0",
+        "@radix-ui/react-separator": "^1.1.15",
         "@yakad/lib": "1.0.23",
         "@yakad/symbols": "1.0.42",
         "@yakad/use-interactions": "1.0.0",

package/dist/Dropdown/Dropdown.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { CardProps, OverlayProps } from "..";
-export interface DropdownProps extends CardProps, OverlayProps {
-    teleport?: boolean;
-    ref?: React.Ref<HTMLDivElement>;
-}
-export declare function Dropdown({ fullWidthOnParentDemand, // Def in Card is True
-blur, level, triggerref, onClose, className, style, children, teleport, ref, ...restProps }: DropdownProps): import("react").JSX.Element;

package/dist/Dropdown/Dropdown.js

@@ -1,99 +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 { useRef, useState, useEffect, useImperativeHandle } from "react";
-import classNames from "classnames";
-import { Card } from "..";
-import styles from "./Dropdown.module.css";
-import { createPortal } from "react-dom";
-import { useOnOutsideClick } from "@yakad/use-interactions";
-export function Dropdown(_a) {
-    var { fullWidthOnParentDemand = false, // Def in Card is True
-    blur, level = "high", triggerref, onClose, className, style, children, teleport = false, ref } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "blur", "level", "triggerref", "onClose", "className", "style", "children", "teleport", "ref"]);
-    const fallbackTriggerRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const placementTargetRef = triggerref || fallbackTriggerRef;
-    // Let the parent access our DOM node
-    useImperativeHandle(ref, () => dropdownRef.current);
-    const [arrowPosition, setArrowPosition] = useState({
-        top: 0,
-        left: 0,
-    });
-    const [dropdownPosition, setDropdownPosition] = useState({
-        top: 0,
-        left: 0,
-    });
-    const [isPlacedAbove, setIsPlacedAbove] = useState(false);
-    const [isPlaced, setIsPlaced] = useState(false);
-    useEffect(() => {
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = "initial";
-        };
-    }, []);
-    const doTeleport = () => {
-        const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
-        const t = portalRoot && createPortal(dropdown(), portalRoot);
-        return t;
-    };
-    useEffect(() => {
-        if ((placementTargetRef === null || placementTargetRef === void 0 ? void 0 : placementTargetRef.current) && dropdownRef.current) {
-            const placementTarget = placementTargetRef.current.getBoundingClientRect();
-            const dropdownRect = dropdownRef.current.getBoundingClientRect();
-            const padding = 10;
-            let dropdownY = placementTarget.bottom + padding;
-            let dropdownXPos = placementTarget.left + placementTarget.width / 2;
-            let arrowY = dropdownY;
-            const arrowX = dropdownXPos;
-            // Prevent overflow bottom
-            if (dropdownY + dropdownRect.height > window.innerHeight &&
-                placementTarget.top > dropdownRect.height) {
-                dropdownY = placementTarget.top - padding;
-                arrowY = placementTarget.top - padding;
-                setIsPlacedAbove(true);
-            }
-            else
-                setIsPlacedAbove(false);
-            // Prevent overflow right
-            if (dropdownXPos + dropdownRect.width / 2 >
-                window.innerWidth - padding) {
-                dropdownXPos =
-                    window.innerWidth - dropdownRect.width / 2 - padding;
-            }
-            // Prevent overflow left
-            if (dropdownXPos - dropdownRect.width / 2 < padding) {
-                dropdownXPos = dropdownRect.width / 2 + padding;
-            }
-            setDropdownPosition({
-                top: dropdownY,
-                left: dropdownXPos,
-            });
-            setArrowPosition({
-                top: arrowY,
-                left: arrowX,
-            });
-            setIsPlaced(true);
-        }
-    }, [children, placementTargetRef]);
-    useOnOutsideClick(() => {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }, dropdownRef);
-    const dropdown = () => (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(Card, Object.assign({ ref: dropdownRef, fullWidthOnParentDemand: fullWidthOnParentDemand, blur: blur, level: level }, restProps, { className: classNames(styles.dropdownCard, { [styles.isPlacedAbove]: isPlacedAbove }, className), style: Object.assign({ top: dropdownPosition.top, left: dropdownPosition.left, visibility: isPlaced ? "visible" : "hidden" }, style), children: children })), _jsx("span", { className: classNames(styles.arrow, {
-                    [styles.isPlacedAbove]: isPlacedAbove,
-                }, { [styles.blur]: blur }), style: {
-                    top: arrowPosition.top,
-                    left: arrowPosition.left,
-                    visibility: isPlaced ? "visible" : "hidden",
-                } })] }));
-    return teleport ? doTeleport() : dropdown();
-}

package/dist/Dropdown/Dropdown.module.css

@@ -1,39 +0,0 @@
-.dropdownCard {
-    position: fixed;
-    min-width: 6rem;
-    min-height: 10rem;
-    max-width: calc(100vw - 10rem);
-    max-height: min(50vh, 40rem);
-    transform: translate(-50%, 1rem);
-    overflow-x: auto;
-    visibility: hidden;
-    z-index: 4;
-}
-.dropdownCard.isPlacedAbove {
-    transform: translate(-50%, calc(-100% - 1rem));
-}
-
-/* Arrow */
-.arrow {
-    position: fixed;
-    width: 0;
-    height: 0;
-    border-left: 0.8rem solid transparent;
-    border-right: 0.8rem solid transparent;
-    border-bottom: 1rem solid
-        rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    transform: translate(-50%, calc(-100% + 1rem));
-    visibility: hidden;
-    z-index: 4;
-}
-.arrow.isPlacedAbove {
-    transform: translate(-50%, -1rem) rotate(180deg);
-}
-.arrow.blur {
-    border-bottom: 1rem solid
-        color-mix(
-            in srgb,
-            rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
-            transparent
-        );
-}

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/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/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] }));
-}