@yakad/ui 1.3.150 → 1.3.152

package/dist/Card/Card.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { StackProps } from "..";
-import "./card.css";
 export interface CardProps extends StackProps {
     blur?: boolean;
     level?: "transparent" | "low" | "mid" | "high";

package/dist/Card/Card.js

@@ -14,14 +14,8 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import { Stack } from "..";
 import styles from "./Card.module.css";
-import "./card.css";
 export const Card = forwardRef(function Card(_a, ref) {
     var { blur, level, hoverEffect, className, children } = _a, restProps = __rest(_a, ["blur", "level", "hoverEffect", "className", "children"]);
-    const joinedClassNames = classNames(styles.card, { [styles.blur]: blur }, { [styles.elevated]: level !== "transparent" }, {
-        yakadCardAutoLevel: !level || level === "transparent",
-        yakadCardLowLevel: level === "low",
-        yakadCardMidLevel: level === "mid",
-        yakadCardHighLevel: level === "high",
-    }, { [styles.hoverEffect]: hoverEffect }, className);
+    const joinedClassNames = classNames(styles.card, { [styles.blur]: blur }, { [styles.elevated]: level !== "transparent" }, { [styles.hoverEffect]: hoverEffect }, { [styles.yakadCardAutoLevel]: !level || level === "transparent" }, { [styles.yakadCardLowLevel]: level === "low" }, { [styles.yakadCardMidLevel]: level === "mid" }, { [styles.yakadCardHighLevel]: level === "high" }, className);
     return (_jsx(Stack, Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Card/Card.module.css

@@ -1,3 +1,22 @@
+/* BackgroundColor Levels */
+.yakadCardAutoLevel,
+.yakadCardLowLevel {
+    --yakadCardBackgroundColor: var(--surfaceContainerColor);
+}
+.yakadCardAutoLevel .yakadCardAutoLevel,
+.yakadCardLowLevel .yakadCardAutoLevel,
+.yakadCardMidLevel {
+    --yakadCardBackgroundColor: var(--surfaceContainerHighColor);
+    --yakadCardBackgroundColor: var(--surfaceContainerHighColor);
+}
+.yakadCardAutoLevel .yakadCardAutoLevel .yakadCardAutoLevel,
+.yakadCardLowLevel .yakadCardAutoLevel .yakadCardAutoLevel,
+.yakadCardMidLevel .yakadCardAutoLevel,
+.yakadCardHighLevel,
+.yakadCardHighLevel .yakadCardAutoLevel {
+    --yakadCardBackgroundColor: var(--surfaceContainerHighestColor);
+}
+
 .card {
     padding: 2rem;
     border-radius: 2rem;
@@ -16,6 +35,7 @@
     box-shadow: 0px 3px 3px -2px rgb(0 0 0 / 20%),
         0px 3px 4px 0px rgb(0 0 0 / 14%), 0px 1px 8px 0px rgb(0 0 0 / 12%);
     background-color: rgb(var(--surfaceContainerHighestColor, 230 224 233));
+    cursor: pointer;
 }
 
 .card.blur {

package/dist/CheckBox/CheckBox.js

@@ -16,6 +16,6 @@ import { Symbol } from "@yakad/symbols";
 import styles from "./CheckBox.module.css";
 export const CheckBox = forwardRef(function CheckBox(_a, ref) {
     var { label, className, style } = _a, restProps = __rest(_a, ["label", "className", "style"]);
-    const joinedClassNames = classNames({ fullWidth: label }, styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
+    const joinedClassNames = classNames({ fullWidthOnParentDemand: label }, styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
     return (_jsxs("label", { className: joinedClassNames, style: style, children: [label, _jsx("input", Object.assign({ ref: ref }, restProps, { className: styles.input, type: "checkbox" })), _jsxs("div", { className: styles.symbolContainer, children: [_jsx(Symbol, { className: styles.symbolChecked, icon: "check_box" }), _jsx(Symbol, { className: styles.symbolUnChecked, icon: "check_box_outline_blank" })] })] }));
 });

package/dist/CodeBox/CodeBox.js

@@ -17,6 +17,6 @@ import { Button, Card } from "..";
 import styles from "./CodeBox.module.css";
 export const CodeBox = forwardRef(function CodeBox(_a, ref) {
     var { copyButton, className, children } = _a, restProps = __rest(_a, ["copyButton", "className", "children"]);
-    const joinedClassNames = classNames({ fullWidth: true }, styles.ZZZZZZZZZZ, className);
+    const joinedClassNames = classNames({ fullWidthOnParentDemand: true }, styles.ZZZZZZZZZZ, className);
     return (_jsxs(Card, Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: [_jsx("pre", { children: children }), copyButton && _jsx(Button, { icon: _jsx(Symbol, { icon: "copy_all" }) })] })));
 });

package/dist/CodeField/CodeField.js

@@ -32,7 +32,7 @@ function removeUnNumberChars(inputElement) {
 }
 export const CodeField = forwardRef(function CodeField(_a, ref) {
     var { length = 6, onFilled, autoComplete, pattern, onInput, className, style } = _a, restProps = __rest(_a, ["length", "onFilled", "autoComplete", "pattern", "onInput", "className", "style"]);
-    const joinedClassNames = classNames({ fullWidth: true }, styles.input, className);
+    const joinedClassNames = classNames({ fullWidthOnParentDemand: true }, styles.input, className);
     const joinedStyles = Object.assign(Object.assign({}, style), { width: `calc(1.5ch * ${length})` });
     return (_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: joinedStyles, type: "number", minLength: length, maxLength: length, autoComplete: autoComplete || "off", pattern: pattern || "[0-9]", onInput: (event) => {
             isInputFilled(event, length) && onFilled;

package/dist/InputField/InputField.js

@@ -16,5 +16,5 @@ import styles from "./InputField.module.css";
 export const InputField = forwardRef(function InputField(_a, ref) {
     var { variant = "outlined", boxSize = "normal", placeholder, className } = _a, restProps = __rest(_a, ["variant", "boxSize", "placeholder", "className"]);
     const joinedClassNames = classNames(styles.input, styles[variant], styles[boxSize], placeholder && styles.havePlaceHolder, className);
-    return (_jsxs("div", { className: classNames({ fullWidth: true }, styles.div), children: [_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, placeholder: " " })), placeholder && (_jsx("label", { className: styles.label, children: placeholder }))] }));
+    return (_jsxs("div", { className: classNames({ fullWidthOnParentDemand: true }, styles.div), children: [_jsx("input", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, placeholder: " " })), placeholder && (_jsx("label", { className: styles.label, children: placeholder }))] }));
 });

package/dist/List/List.js

@@ -15,6 +15,6 @@ import classNames from "classnames";
 import styles from "./List.module.css";
 export const List = forwardRef(function List(_a, ref) {
     var { direction = "row", collapsed, className, children } = _a, restProps = __rest(_a, ["direction", "collapsed", "className", "children"]);
-    const joinedClassNames = classNames({ fullWidth: true }, styles.list, styles[direction], { [styles.collapsed]: collapsed }, className);
+    const joinedClassNames = classNames({ fullWidthOnParentDemand: true }, styles.list, styles[direction], { [styles.collapsed]: collapsed }, className);
     return (_jsx("ul", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Select/Select.js

@@ -17,5 +17,5 @@ import inputStyles from "../InputField/InputField.module.css";
 export const Select = forwardRef(function Select(_a, ref) {
     var { variant = "outlined", boxsize = "normal", placeholder, className, children } = _a, restProps = __rest(_a, ["variant", "boxsize", "placeholder", "className", "children"]);
     const joinedClassNames = classNames(styles.select, inputStyles.input, inputStyles[variant], inputStyles[boxsize], { [inputStyles.havePlaceHolder]: placeholder }, className);
-    return (_jsxs("div", { className: classNames({ fullWidth: true }, inputStyles.div), children: [_jsx("select", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })), placeholder ? (_jsx("label", { className: inputStyles.label, children: placeholder })) : null] }));
+    return (_jsxs("div", { className: classNames({ fullWidthOnParentDemand: true }, inputStyles.div), children: [_jsx("select", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })), placeholder ? (_jsx("label", { className: inputStyles.label, children: placeholder })) : null] }));
 });

package/dist/Table/Table.js

@@ -15,7 +15,7 @@ import classNames from "classnames";
 import styles from "./Table.module.css";
 export const Table = forwardRef(function Table(_a, ref) {
     var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    const joinedClassNames = classNames({ fullWidth: true }, styles.table, className);
+    const joinedClassNames = classNames({ fullWidthOnParentDemand: true }, styles.table, className);
     return (_jsx("table", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const Thead = forwardRef(function Thead(_a, ref) {

package/dist/WithOverlay/WithOverlay.js

@@ -29,7 +29,9 @@ export const WithOverlay = forwardRef(function WithOverlay(_a, forwardedRef) {
         };
     }, [showOverlay]);
     // Teleport Overlay to portalRoot or body
+    const portalRoot = document.getElementsByClassName("portalRoot")[0] || document.body;
     const teleport = overlay &&
+        portalRoot &&
         createPortal(cloneElement(overlay, {
             triggerref: triggerRef,
             onClose: () => {
@@ -37,8 +39,7 @@ export const WithOverlay = forwardRef(function WithOverlay(_a, forwardedRef) {
                 (_b = (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
                 setShowOverlay(false);
             },
-        }), document.getElementsByClassName("portalRoot")[0] ||
-            document.body);
+        }), portalRoot);
     return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, Object.assign({ ref: triggerRef }, restProps, { onRightClick: (e) => {
                     trigger === "onRightClick" && setShowOverlay(true);
                     onRightClick === null || onRightClick === void 0 ? void 0 : onRightClick(e);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.150",
+    "version": "1.3.152",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",

package/dist/Card/card.css

@@ -1,18 +0,0 @@
-.yakadCardAutoLevel,
-.yakadCardLowLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerLowColor);
-}
-
-.yakadCardAutoLevel .yakadCardAutoLevel,
-.yakadCardLowLevel .yakadCardAutoLevel,
-.yakadCardMidLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerColor);
-}
-
-.yakadCardAutoLevel .yakadCardAutoLevel .yakadCardAutoLevel,
-.yakadCardLowLevel .yakadCardAutoLevel .yakadCardAutoLevel,
-.yakadCardMidLevel .yakadCardAutoLevel,
-.yakadCardHighLevel,
-.yakadCardHighLevel .yakadCardAutoLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerHighColor);
-}