@yakad/ui 1.3.146 → 1.3.148

package/dist/Button/Button.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     size?: "small" | "medium" | "large";
     variant?: "text" | "outlined" | "filled" | "filledtonal" | "tonal" | "elevated" | "link" | "fab";
     borderStyle?: "none" | "semi" | "squircle" | "rounded";

package/dist/Button/Button.js

@@ -15,10 +15,10 @@ import classNames from "classnames";
 import { LoadingIcon } from "..";
 import styles from "./Button.module.css";
 export const Button = forwardRef(function Button(_a, ref) {
-    var { fullWidth = false, size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["fullWidth", "size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
+    var { fullWidthOnParentDemand = false, size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
     const childrenFirst = iconPosition === "end";
     const isloadingPositionCenter = !icon || loadingPosition === "center";
-    const joinedClassNames = classNames({ fullWidth: fullWidth }, styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
+    const joinedClassNames = classNames({ fullWidthOnParentDemand: fullWidthOnParentDemand }, styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
     return (_jsxs("button", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: [childrenFirst && children, loadingVariant && (_jsx("div", { className: classNames(styles.displayOnDisabled, {
                     [styles.positionCenter]: isloadingPositionCenter,
                 }), children: _jsx(LoadingIcon, { size: size, variant: loadingVariant }) })), icon, !childrenFirst && children] })));

package/dist/Card/Card.d.ts

@@ -2,8 +2,8 @@
 import "./card.css";
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     blur?: boolean;
-    level?: "low" | "mid" | "high";
+    level?: "transparent" | "low" | "mid" | "high";
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Card/Card.js

@@ -16,9 +16,9 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Card.module.css";
 import "./card.css";
 export const Card = forwardRef(function Card(_a, ref) {
-    var { align, fullWidth = true, blur, level, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "blur", "level", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, styles.card, { [styles.blur]: blur }, {
-        yakadCardAutoLevel: level === undefined,
+    var { align, fullWidthOnParentDemand = true, blur, level, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "blur", "level", "className", "children"]);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, { fullWidthOnParentDemand: fullWidthOnParentDemand }, styles.card, { [styles.blur]: blur }, { [styles.elevated]: level !== "transparent" }, {
+        yakadCardAutoLevel: !level || level === "transparent",
         yakadCardLowLevel: level === "low",
         yakadCardMidLevel: level === "mid",
         yakadCardHighLevel: level === "high",

package/dist/Card/Card.module.css

@@ -1,6 +1,9 @@
 .card {
     padding: 2rem;
     border-radius: 2rem;
+}
+
+.card.elevated {
     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(--yakadCardBackgroundColor, 230 224 233));

package/dist/Container/Container.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Container.module.css";
 export const Container = forwardRef(function Container(_a, ref) {
     var { size = "xl", align, className, children } = _a, restProps = __rest(_a, ["size", "align", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.container, styles[size], className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.container, styles[size], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Display/Display.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface DisplayProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     minWidth?: "xs" | "sm" | "md" | "lg" | "xl";
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;

package/dist/Display/Display.js

@@ -15,7 +15,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Display.module.css";
 export const Display = forwardRef(function Display(_a, ref) {
-    var { align, fullWidth = true, minWidth, maxWidth, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "minWidth", "maxWidth", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
+    var { align, fullWidthOnParentDemand = true, minWidth, maxWidth, className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "minWidth", "maxWidth", "className", "children"]);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, { fullWidthOnParentDemand: fullWidthOnParentDemand }, { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Dropdown/Dropdown.js

@@ -16,7 +16,7 @@ import classNames from "classnames";
 import { Card, WithInteractions } from "..";
 import styles from "./Dropdown.module.css";
 export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
-    var { fullWidth = false, blur, level = "high", triggerref, onClose, className, style, children } = _a, restProps = __rest(_a, ["fullWidth", "blur", "level", "triggerref", "onClose", "className", "style", "children"]);
+    var { level = "high", triggerref, onClose, className, style, children } = _a, restProps = __rest(_a, ["level", "triggerref", "onClose", "className", "style", "children"]);
     const fallbackTriggerRef = useRef(null);
     const dropdownRef = useRef(null);
     const placementTargetRef = triggerref || fallbackTriggerRef;
@@ -71,7 +71,7 @@ export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
             setIsPlaced(true);
         }
     }, [children, placementTargetRef]);
-    return (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(WithInteractions, { onOutsideClick: onClose, children: _jsx(Card, Object.assign({ ref: dropdownRef, fullWidth: fullWidth, 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, {
+    return (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(WithInteractions, { onOutsideClick: onClose, children: _jsx(Card, Object.assign({ ref: dropdownRef, 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,

package/dist/Form/Form.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     children?: React.ReactNode;
 }
 export declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLFormElement>>;

package/dist/Form/Form.js

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

package/dist/GridItem/GridItem.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./GridItem.module.css";
 export const GridItem = forwardRef(function GridItem(_a, ref) {
     var { align, xs, sm, md, lg, xl, className, children } = _a, restProps = __rest(_a, ["align", "xs", "sm", "md", "lg", "xl", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.gridItem, { [styles[`xs${xs}`]]: xs }, { [styles[`sm${sm}`]]: sm }, { [styles[`md${md}`]]: md }, { [styles[`lg${lg}`]]: lg }, { [styles[`xl${xl}`]]: xl }, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.gridItem, { [styles[`xs${xs}`]]: xs }, { [styles[`sm${sm}`]]: sm }, { [styles[`md${md}`]]: md }, { [styles[`lg${lg}`]]: lg }, { [styles[`xl${xl}`]]: xl }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/ListItem/ListItem.js

@@ -16,5 +16,5 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./ListItem.module.css";
 export const ListItem = forwardRef(function ListItem(_a, ref) {
     var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
-    return (_jsx("li", Object.assign({ ref: ref }, restProps, { className: classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.listItem, className), children: children })));
+    return (_jsx("li", Object.assign({ ref: ref }, restProps, { className: classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.listItem, className), children: children })));
 });

package/dist/Main/Main.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Main.module.css";
 export const Main = forwardRef(function Main(_a, ref) {
     var { align, navOpen = false, className, children } = _a, restProps = __rest(_a, ["align", "navOpen", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.main, { [styles.navOpen]: navOpen }, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.main, { [styles.navOpen]: navOpen }, className);
     return (_jsx("main", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Navigation/Navigation.js

@@ -16,7 +16,7 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Navigation.module.css";
 export const Navigation = forwardRef(function Navigation(_a, ref) {
     var { align, anchor = "auto", open = false, className, children } = _a, restProps = __rest(_a, ["align", "anchor", "open", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.navigation, styles[anchor], {
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.navigation, styles[anchor], {
         [styles.open]: open,
     }, className);
     return (_jsx("nav", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));

package/dist/Popup/Popup.js

@@ -18,5 +18,5 @@ import { Button, Card, Row, Screen, Spacer, Stack, Text, WithInteractions, } fro
 import styles from "./Popup.module.css";
 export const Popup = forwardRef(function Popup(_a, ref) {
     var { align, onClose, heading, className, children } = _a, restProps = __rest(_a, ["align", "onClose", "heading", "className", "children"]);
-    return (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsx(WithInteractions, { onOutsideClick: onClose, children: _jsxs(Card, Object.assign({ ref: ref }, 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(Symbol, { icon: "close" }), onClick: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }) }));
+    return (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsx(WithInteractions, { align: "center", onOutsideClick: onClose, children: _jsxs(Card, Object.assign({ ref: ref }, 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(Symbol, { icon: "close" }), onClick: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }) }));
 });

package/dist/Row/Row.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     overflow?: "shrink" | "wrap" | "scroll";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;

package/dist/Row/Row.js

@@ -15,7 +15,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Row.module.css";
 export const Row = forwardRef(function Row(_a, ref) {
-    var { align, fullWidth = true, overflow = "shrink", size = "xl", className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "overflow", "size", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexRowBox, { [boxingStyles[align]]: align }, boxingStyles[overflow], styles.row, { fullWidth: fullWidth }, styles[size], className);
+    var { align, fullWidthOnParentDemand = true, overflow = "shrink", size = "xl", className, children } = _a, restProps = __rest(_a, ["align", "fullWidthOnParentDemand", "overflow", "size", "className", "children"]);
+    const joinedClassNames = classNames(boxingStyles.flexRowBox, { [boxingStyles[align]]: align }, boxingStyles[overflow], styles.row, { fullWidthOnParentDemand: fullWidthOnParentDemand }, styles[size], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Screen/Screen.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Screen.module.css";
 export const Screen = forwardRef(function Screen(_a, ref) {
     var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.screen, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.screen, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Stack/Stack.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
+    fullWidthOnParentDemand?: boolean;
     children?: React.ReactNode;
 }
 export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Stack/Stack.js

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

package/dist/Theme/Theme.js

@@ -22,6 +22,6 @@ export const Theme = forwardRef(function Theme(_a, ref) {
     useEffect(() => {
         document.documentElement.style.setProperty("font-size", zoomPercentage + "%");
     }, [zoomPercentage]);
-    const joinedClassNames = classNames("portalRoot", boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.theme, styles[darkStyle], styles[color], className);
+    const joinedClassNames = classNames({ portalRoot: true }, boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { demandChildsToBeFullWidth: true }, styles.theme, styles[darkStyle], styles[color], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/boxing.module.css

@@ -1,3 +1,8 @@
+/* Full Width Childs */
+:global(.demandChildsToBeFullWidth) > :global(.fullWidthOnParentDemand) {
+    width: 100%;
+}
+
 /* Column Box */
 .flexColumnBox {
     display: flex;
@@ -21,10 +26,6 @@
     justify-content: flex-end;
     align-items: flex-end;
 }
-/* Full Width Childs */
-.flexColumnBox > :global(.fullWidth) {
-    width: 100%;
-}
 
 /* Row Box */
 .flexRowBox {

package/package.json

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