@yakad/ui 1.3.125 → 1.3.129

package/dist/AppBar/AppBar.d.ts

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

package/dist/AppBar/AppBar.module.css

@@ -3,14 +3,14 @@
     padding-left: 2rem;
     padding-right: 2rem;
     gap: 1rem;
-    box-shadow: 0 0.1rem 0 0 rgb(var(--onSurfaceColor, 28 27 31) / 0.1);
-    z-index: 2;
+    box-shadow: 0 0.1rem 0 0 rgb(var(--outlineColor, 121 116 126));
     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 ease;
     will-change: transform;
     user-select: none;
+    z-index: 2;
 }
 
 .xs {

package/dist/Card/Card.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import "./card.css";
-import { BoxProps } from "../boxing";
-export interface CardProps extends BoxProps {
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "space" | "center" | "end";
+    fullWidth?: boolean;
+    blur?: boolean;
     level?: "low" | "mid" | "high";
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Card/Card.js

@@ -16,8 +16,8 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Card.module.css";
 import "./card.css";
 export const Card = forwardRef(function Card(_a, ref) {
-    var { fullWidth = true, align, blur, level, className, children } = _a, restProps = __rest(_a, ["fullWidth", "align", "blur", "level", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: fullWidth }, styles.card, { [styles.blur]: blur }, {
+    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,
         yakadCardLowLevel: level === "low",
         yakadCardMidLevel: level === "mid",

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({ fullWidthLover: label }, styles.label, { [styles.labeled]: label }, { [styles.disabled]: restProps.disabled }, className);
+    const joinedClassNames = classNames({ fullWidth: 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({ fullWidthLover: true }, styles.ZZZZZZZZZZ, className);
+    const joinedClassNames = classNames({ fullWidth: 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({ fullWidthLover: true }, styles.input, className);
+    const joinedClassNames = classNames({ fullWidth: 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/Display/Display.d.ts

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

package/dist/Display/Display.js

@@ -12,9 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 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 { minWidth, maxWidth, className, children } = _a, restProps = __rest(_a, ["minWidth", "maxWidth", "className", "children"]);
-    const joinedClassNames = classNames({ fullWidthLover: true }, { [styles[`${minWidth}MinWidth`]]: minWidth }, { [styles[`${maxWidth}MaxWidth`]]: maxWidth }, className);
+    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);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/DisplayOnVisible/DisplayOnVisible.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface DisplayOnVisibleProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "space" | "center" | "end";
+    fullWidth?: boolean;
+    onVisible?: () => void;
+    onHidden?: () => void;
+    children?: React.ReactNode;
+}
+export declare const DisplayOnVisible: import("react").ForwardRefExoticComponent<DisplayOnVisibleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/{RenderOnVisible/RenderOnVisible.js → DisplayOnVisible/DisplayOnVisible.js}

@@ -14,10 +14,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
-import styles from "./RenderOnVisible.module.css";
-import { WithInteractions } from "../WithInteractions/WithInteractions";
-export const RenderOnVisible = forwardRef(function RenderOnVisible(_a, forwardedRef) {
-    var { align, blur, fullWidth, className, style, children } = _a, restProps = __rest(_a, ["align", "blur", "fullWidth", "className", "style", "children"]);
+import { WithInteractions } from "..";
+import styles from "./DisplayOnVisible.module.css";
+export const DisplayOnVisible = forwardRef(function DisplayOnVisible(_a, forwardedRef) {
+    var { align, fullWidth = true, onVisible, onHidden, className, style, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "onVisible", "onHidden", "className", "style", "children"]);
     const localRef = useRef(null);
     // Let the parent access our DOM node
     useImperativeHandle(forwardedRef, () => localRef.current);
@@ -25,13 +25,15 @@ export const RenderOnVisible = forwardRef(function RenderOnVisible(_a, forwarded
     const isVisible = boxHeight === 0;
     const handleOnVisible = () => {
         setBoxHeight(0);
+        onVisible === null || onVisible === void 0 ? void 0 : onVisible();
     };
     const handleOnHidden = () => {
         if (localRef.current) {
             const boxRect = localRef.current.getBoundingClientRect();
             setBoxHeight(boxRect.height);
         }
+        onHidden === null || onHidden === void 0 ? void 0 : onHidden();
     };
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: fullWidth }, { [styles.blur]: blur }, className);
-    return (_jsx(WithInteractions, { onVisible: handleOnVisible, onHidden: handleOnHidden, children: _jsx("div", Object.assign({ ref: localRef }, restProps, { className: joinedClassNames, style: Object.assign({ height: boxHeight || "auto" }, style), children: isVisible && children })) }));
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, { [styles.notVisible]: !isVisible }, className);
+    return (_jsx(WithInteractions, { onVisible: handleOnVisible, onHidden: handleOnHidden, children: _jsx("div", Object.assign({ ref: localRef }, restProps, { className: joinedClassNames, style: Object.assign({ height: boxHeight || "auto" }, style), children: children })) }));
 });

package/dist/DisplayOnVisible/DisplayOnVisible.module.css

@@ -0,0 +1,3 @@
+.notVisible > * {
+    display: none;
+}

package/dist/Footer/Footer.module.css

@@ -3,13 +3,13 @@
     padding-left: 2rem;
     padding-right: 2rem;
     gap: 1rem;
-    z-index: 1;
     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 ease;
     will-change: transform;
     user-select: none;
+    z-index: 1;
 }
 
 .xs {

package/dist/Form/Form.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
     align?: "start" | "space" | "center" | "end";
+    fullWidth?: 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, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: true }, styles.form, className);
+    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);
     return (_jsx("form", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

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({ fullWidthLover: 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({ fullWidth: 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({ fullWidthLover: true }, styles.list, styles[direction], { [styles.collapsed]: collapsed }, className);
+    const joinedClassNames = classNames({ fullWidth: true }, styles.list, styles[direction], { [styles.collapsed]: collapsed }, className);
     return (_jsx("ul", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/LoadingControl/LoadingControl.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type LoadingControlChildren = React.ReactElement<{
+    index?: number;
+}>;
+export interface LoadingControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "space" | "center" | "end";
+    fullWidth?: boolean;
+    loadingLimit?: number;
+    children: LoadingControlChildren;
+}
+export declare const LoadingControl: React.ForwardRefExoticComponent<LoadingControlProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/LoadingControl/LoadingControl.js

@@ -0,0 +1,52 @@
+"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 React, { forwardRef, useEffect, useState } from "react";
+import classNames from "classnames";
+import boxingStyles from "../boxing.module.css";
+import { DisplayOnVisible } from "..";
+export const LoadingControl = forwardRef(function LoadingControl(_a, ref) {
+    var { align, fullWidth = true, loadingLimit = 20, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "loadingLimit", "className", "children"]);
+    const [maxLoadedItem, setMaxLoadedItem] = useState(0);
+    const [maxVisibledItem, setMaxVisibledItem] = useState(0);
+    const [loadedItems, setLoadedItems] = useState([
+        React.cloneElement(children, {
+            index: 0,
+        }),
+    ]);
+    const handleOnVisible = (i) => {
+        if (i && maxVisibledItem < i)
+            setMaxVisibledItem(i);
+    };
+    useEffect(() => {
+        if (maxLoadedItem < maxVisibledItem + 5) {
+            const prevIndex = maxLoadedItem;
+            setMaxLoadedItem(prevIndex + 1);
+            setLoadedItems([
+                ...loadedItems,
+                React.cloneElement(children, {
+                    key: prevIndex + 1,
+                }),
+            ].slice(loadedItems.length >= loadingLimit ? 1 : 0));
+        }
+    }, [
+        children,
+        loadingLimit,
+        loadedItems,
+        maxLoadedItem,
+        maxVisibledItem,
+    ]);
+    console.log("loadedItems.length", loadedItems.length, "maxLoadedItem", maxLoadedItem, "maxVisibledItem", maxVisibledItem);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, className);
+    return (_jsx("div", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: loadedItems.map((item) => (_jsxs(DisplayOnVisible, { onVisible: () => handleOnVisible(item.props.index), children: [_jsx("h1", { children: item.props.index }), item] }, item.props.index))) })));
+});

package/dist/Navigation/Navigation.module.css

@@ -2,12 +2,12 @@
     position: fixed;
     max-width: 100%;
     padding: 1rem 0;
-    z-index: 3;
     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,
@@ -17,7 +17,7 @@
     width: 21.9rem;
     height: calc(100% - 6rem);
     max-height: 100%;
-    border-inline-end: 0.2rem solid #7d7d7d40;
+    border-inline-end: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
     transform: translate(-100%, 0);
 }
 [dir="rtl"] .auto,
@@ -27,7 +27,8 @@
     width: 21.9rem;
     height: calc(100% - 6rem);
     max-height: 100%;
-    border-inline-end: 0.2rem solid #7d7d7d40;
+    border-inline-end: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
+
     transform: translate(100%, 0);
 }
 
@@ -35,14 +36,14 @@
     top: 0;
     width: 100%;
     height: auto;
-    border-bottom: 0.2rem solid #7d7d7d40;
+    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 #7d7d7d40;
+    border-top: 0.2rem solid rgb(var(--outlineColor, 121 116 126));
     transform: translate(0, 100%);
 }
 

package/dist/Popup/Popup.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import { CardProps, OverlayProps } from "..";
 export interface PopupProps extends CardProps, OverlayProps {
-    align?: "start" | "space" | "center" | "end";
     heading?: string;
-    children?: React.ReactNode;
 }
 export declare const Popup: import("react").ForwardRefExoticComponent<PopupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Popup/Popup.js

@@ -17,6 +17,6 @@ import { Symbol } from "@yakad/symbols";
 import { Button, Card, Row, Screen, Spacer, Stack, Text, WithInteractions, } from "..";
 import styles from "./Popup.module.css";
 export const Popup = forwardRef(function Popup(_a, ref) {
-    var { align, heading, onClose, className, children } = _a, restProps = __rest(_a, ["align", "heading", "onClose", "className", "children"]);
+    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 })] })) }) }));
 });

package/dist/Row/Row.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
+    fullWidth?: 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, overflow = "shrink", size = "xl", className, children } = _a, restProps = __rest(_a, ["align", "overflow", "size", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexRowBox, { [boxingStyles[align]]: align }, boxingStyles[overflow], styles.row, { fullWidthLover: overflow === "shrink" }, styles[size], className);
+    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);
     return (_jsx("div", 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({ fullWidthLover: 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({ 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] }));
 });

package/dist/Spacer/Spacer.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-type ExcludedTypes = "children";
-export interface SpacerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, ExcludedTypes> {
+export interface SpacerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
 }
 export declare const Spacer: import("react").ForwardRefExoticComponent<SpacerProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/Stack/Stack.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
+    fullWidth?: 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, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: true }, styles.stack, className);
+    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);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

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({ fullWidthLover: true }, styles.table, className);
+    const joinedClassNames = classNames({ fullWidth: 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/Text/Text.d.ts

@@ -2,6 +2,7 @@
 type TextVariant = "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "body1" | "body2" | "body3" | "body4" | "body5" | "body6" | "caption" | "span";
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     variant?: TextVariant;
+    color?: "onSurfaceColor" | "onSurfaceVariantColor";
     children?: React.ReactNode;
 }
 export declare const H1: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/Text/Text.js

@@ -14,47 +14,74 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./Text.module.css";
 export const H1 = forwardRef(function H1(_a, ref) {
-    var { variant = "heading1", className, children } = _a, restProps = __rest(_a, ["variant", "className", "children"]);
-    const joinedClassNames = classNames(styles.text, styles[variant], className);
+    var { variant = "heading1", color, className, children } = _a, restProps = __rest(_a, ["variant", "color", "className", "children"]);
+    const joinedClassNames = classNames(styles.text, styles[variant], {
+        [styles.onSurfaceColor]: color === "onSurfaceColor",
+        [styles.onSurfaceVariantColor]: color === "onSurfaceVariantColor",
+    }, className);
     return (_jsx("h1", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const H2 = forwardRef(function H2(_a, ref) {
-    var { variant = "heading2", className, children } = _a, restProps = __rest(_a, ["variant", "className", "children"]);
-    const joinedClassNames = classNames(styles.text, styles[variant], className);
+    var { variant = "heading2", color, className, children } = _a, restProps = __rest(_a, ["variant", "color", "className", "children"]);
+    const joinedClassNames = classNames(styles.text, styles[variant], {
+        [styles.onSurfaceColor]: color === "onSurfaceColor",
+        [styles.onSurfaceVariantColor]: color === "onSurfaceVariantColor",
+    }, className);
     return (_jsx("h2", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const H3 = forwardRef(function H3(_a, ref) {
-    var { variant = "heading3", className, children } = _a, restProps = __rest(_a, ["variant", "className", "children"]);
-    const joinedClassNames = classNames(styles.text, styles[variant], className);
+    var { variant = "heading3", color, className, children } = _a, restProps = __rest(_a, ["variant", "color", "className", "children"]);
+    const joinedClassNames = classNames(styles.text, styles[variant], {
+        [styles.onSurfaceColor]: color === "onSurfaceColor",
+        [styles.onSurfaceVariantColor]: color === "onSurfaceVariantColor",
+    }, className);
     return (_jsx("h3", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const H4 = forwardRef(function H4(_a, ref) {
-    var { variant = "heading4", className, children } = _a, restProps = __rest(_a, ["variant", "className", "children"]);
-    const joinedClassNames = classNames(styles.text, styles[variant], className);
+    var { variant = "heading4", color, className, children } = _a, restProps = __rest(_a, ["variant", "color", "className", "children"]);
+    const joinedClassNames = classNames(styles.text, styles[variant], {
+        [styles.onSurfaceColor]: color === "onSurfaceColor",
+        [styles.onSurfaceVariantColor]: color === "onSurfaceVariantColor",
+    }, className);
     return (_jsx("h4", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const H5 = forwardRef(function H5(_a, ref) {
-    var { variant = "heading5", className, children } = _a, restProps = __rest(_a, ["variant", "className", "children"]);
-    const joinedClassNames = classNames(styles.text, styles[variant], className);
+    var { variant = "heading5", color, className, children } = _a, restProps = __rest(_a, ["variant", "color", "className", "children"]);
+    const joinedClassNames = classNames(styles.text, styles[variant], {
+        [styles.onSurfaceColor]: color === "onSurfaceColor",
+        [styles.onSurfaceVariantColor]: color === "onSurfaceVariantColor",
+    }, className);
     return (_jsx("h5", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const H6 = forwardRef(function H6(_a, ref) {
-    var { variant = "heading6", className, children } = _a, restProps = __rest(_a, ["variant", "className", "children"]);
-    const joinedClassNames = classNames(styles.text, styles[variant], className);
+    var { variant = "heading6", color, className, children } = _a, restProps = __rest(_a, ["variant", "color", "className", "children"]);
+    const joinedClassNames = classNames(styles.text, styles[variant], {
+        [styles.onSurfaceColor]: color === "onSurfaceColor",
+        [styles.onSurfaceVariantColor]: color === "onSurfaceVariantColor",
+    }, className);
     return (_jsx("h6", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const P = forwardRef(function P(_a, ref) {
-    var { variant = "body5", className, children } = _a, restProps = __rest(_a, ["variant", "className", "children"]);
-    const joinedClassNames = classNames(styles.text, styles[variant], className);
+    var { variant = "body5", color, className, children } = _a, restProps = __rest(_a, ["variant", "color", "className", "children"]);
+    const joinedClassNames = classNames(styles.text, styles[variant], {
+        [styles.onSurfaceColor]: color === "onSurfaceColor",
+        [styles.onSurfaceVariantColor]: color === "onSurfaceVariantColor",
+    }, className);
     return (_jsx("p", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const Span = forwardRef(function Span(_a, ref) {
-    var { variant = "span", className, children } = _a, restProps = __rest(_a, ["variant", "className", "children"]);
-    const joinedClassNames = classNames(styles.text, styles[variant], className);
+    var { variant = "span", color, className, children } = _a, restProps = __rest(_a, ["variant", "color", "className", "children"]);
+    const joinedClassNames = classNames(styles.text, styles[variant], {
+        [styles.onSurfaceColor]: color === "onSurfaceColor",
+        [styles.onSurfaceVariantColor]: color === "onSurfaceVariantColor",
+    }, className);
     return (_jsx("span", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });
 export const Text = forwardRef(function Text(_a, ref) {
-    var { variant = "body5", className, children } = _a, restProps = __rest(_a, ["variant", "className", "children"]);
-    const joinedClassNames = classNames(styles[variant], className);
+    var { variant = "body5", color, className, children } = _a, restProps = __rest(_a, ["variant", "color", "className", "children"]);
+    const joinedClassNames = classNames(styles[variant], {
+        [styles.onSurfaceColor]: color === "onSurfaceColor",
+        [styles.onSurfaceVariantColor]: color === "onSurfaceVariantColor",
+    }, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Text/Text.module.css

@@ -1,3 +1,12 @@
+.onSurfaceColor {
+    color: rgb(var(--onSurfaceColor, 28 27 31));
+    fill: rgb(var(--onSurfaceColor, 28 27 31));
+}
+.onSurfaceVariantColor {
+    color: rgb(var(--onSurfaceVariantColor, 73 69 78));
+    fill: rgb(var(--onSurfaceVariantColor, 73 69 78));
+}
+
 .text {
     margin: 0;
 }

package/dist/Theme/Theme.module.css

@@ -334,7 +334,6 @@
     --surfaceContainerHighColor: var(--LightSurfaceContainerHighColor);
     --surfaceContainerHighestColor: var(--LightSurfaceContainerHighestColor);
     --onSurfaceColor: var(--LightOnSurfaceColor);
-    --onSurfaceRGBColor: var(--LightOnSurfaceRGBColor);
     --onSurfaceVariantColor: var(--LightOnSurfaceVariantColor);
     --outlineColor: var(--LightOutlineColor);
     --outlineVariantColor: var(--LightOutlineVariantColor);
@@ -364,7 +363,6 @@
     --surfaceContainerHighColor: var(--DarkSurfaceContainerHighColor);
     --surfaceContainerHighestColor: var(--DarkSurfaceContainerHighestColor);
     --onSurfaceColor: var(--DarkOnSurfaceColor);
-    --onSurfaceRGBColor: var(--DarkOnSurfaceRGBColor);
     --onSurfaceVariantColor: var(--DarkOnSurfaceVariantColor);
     --outlineColor: var(--DarkOutlineColor);
     --outlineVariantColor: var(--DarkOutlineVariantColor);
@@ -395,7 +393,6 @@
         --surfaceContainerHighColor: var(--DarkSurfaceContainerHighColor);
         --surfaceContainerHighestColor: var(--DarkSurfaceContainerHighestColor);
         --onSurfaceColor: var(--DarkOnSurfaceColor);
-        --onSurfaceRGBColor: var(--DarkOnSurfaceRGBColor);
         --onSurfaceVariantColor: var(--DarkOnSurfaceVariantColor);
         --outlineColor: var(--DarkOutlineColor);
         --outlineVariantColor: var(--DarkOutlineVariantColor);

package/dist/boxing.module.css

@@ -21,8 +21,8 @@
     justify-content: flex-end;
     align-items: flex-end;
 }
-/* fullWidthLover */
-.flexColumnBox > :global(.fullWidthLover) {
+/* Full Width Childs */
+.flexColumnBox > :global(.fullWidth) {
     width: 100%;
 }
 

package/dist/index.d.ts

@@ -12,8 +12,6 @@ export * from "./Card/Card";
 export * from "./Theme/Theme";
 export * from "./Spacer/Spacer";
 export * from "./Hr/Hr";
-export * from "./Dropdown/Dropdown";
-export * from "./Popup/Popup";
 export * from "./List/List";
 export * from "./ListItem/ListItem";
 export * from "./Table/Table";
@@ -30,7 +28,9 @@ export * from "./RadioGroup/RadioGroup";
 export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
+export * from "./DisplayOnVisible/DisplayOnVisible";
 export * from "./WithInteractions/WithInteractions";
-export * from "./WithDropdawn/WithDropdawn";
 export * from "./WithOverlay/WithOverlay";
-export * from "./RenderOnVisible/RenderOnVisible";
+export * from "./Dropdown/Dropdown";
+export * from "./Popup/Popup";
+export * from "./LoadingControl/LoadingControl";

package/dist/index.js

@@ -15,8 +15,6 @@ export * from "./Theme/Theme";
 export * from "./Spacer/Spacer";
 export * from "./Hr/Hr";
 // UI Components
-export * from "./Dropdown/Dropdown";
-export * from "./Popup/Popup";
 export * from "./List/List";
 export * from "./ListItem/ListItem";
 export * from "./Table/Table";
@@ -35,7 +33,10 @@ export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 // Utilities
 export * from "./Display/Display";
+export * from "./DisplayOnVisible/DisplayOnVisible";
 export * from "./WithInteractions/WithInteractions";
-export * from "./WithDropdawn/WithDropdawn";
 export * from "./WithOverlay/WithOverlay";
-export * from "./RenderOnVisible/RenderOnVisible";
+// Overlays
+export * from "./Dropdown/Dropdown";
+export * from "./Popup/Popup";
+export * from "./LoadingControl/LoadingControl";

package/package.json

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

package/dist/RenderOnVisible/RenderOnVisible.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { BoxProps } from "../boxing";
-export interface RenderOnVisibleProps extends BoxProps {
-}
-export declare const RenderOnVisible: import("react").ForwardRefExoticComponent<RenderOnVisibleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/RenderOnVisible/RenderOnVisible.module.css

@@ -1,3 +0,0 @@
-.blur {
-    backdrop-filter: blur(0.5rem);
-}

package/dist/WithDropdawn/WithDropdawn.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-export interface WithDropdawnProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "space" | "center" | "end";
-    blur?: boolean;
-    trigger?: "onClick" | "onRightClick";
-    dropdawnChildren?: React.ReactElement;
-    children?: React.ReactElement<{
-        onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-    }>;
-}
-export declare function WithDropdawn({ align, blur, trigger, dropdawnChildren, className, style, children, ...restProps }: WithDropdawnProps): import("react/jsx-runtime").JSX.Element;

package/dist/WithDropdawn/WithDropdawn.js

@@ -1,77 +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, cloneElement } from "react";
-import classNames from "classnames";
-import { WithInteractions } from "../";
-import boxingStyles from "../boxing.module.css";
-import styles from "./WithDropdawn.module.css";
-export function WithDropdawn(_a) {
-    var { align, blur, trigger = "onClick", dropdawnChildren, className, style, children } = _a, restProps = __rest(_a, ["align", "blur", "trigger", "dropdawnChildren", "className", "style", "children"]);
-    const toggleElementRef = useRef(null);
-    const dropdawnRef = useRef(null);
-    const [showDropdawn, setShowDropdawn] = useState(false);
-    const [dropdawnOnTop, setDropdawnOnTop] = useState(false);
-    const [top, setTop] = useState(0);
-    const [dropdawnX, setDropdawnX] = useState(0);
-    const [arrowTop, setArrowTop] = useState(0);
-    const [arrowX, setArrowX] = useState(0);
-    const toggleShowDropdawn = () => setShowDropdawn((prev) => !prev);
-    useEffect(() => {
-        if (toggleElementRef.current && dropdawnRef.current) {
-            const buttonRect = toggleElementRef.current.getBoundingClientRect();
-            const dropdawnRect = dropdawnRef.current.getBoundingClientRect();
-            const padding = 10;
-            let dTop = buttonRect.bottom + padding;
-            let dX = buttonRect.x + buttonRect.width / 2;
-            let aTop = dTop;
-            const aX = dX;
-            // Prevent overflow bottom
-            if (dTop + dropdawnRect.height > window.innerHeight) {
-                dTop = buttonRect.top - dropdawnRect.height - padding;
-                aTop = buttonRect.top - padding;
-                setDropdawnOnTop(true);
-            }
-            else
-                setDropdawnOnTop(false);
-            // Prevent overflow right
-            if (dX + dropdawnRect.width / 2 > window.innerWidth - padding) {
-                dX = window.innerWidth - dropdawnRect.width / 2 - padding;
-            }
-            // Prevent overflow left
-            if (dX - dropdawnRect.width / 2 < padding) {
-                dX = dropdawnRect.width / 2 + padding;
-            }
-            setTop(dTop);
-            setDropdawnX(dX);
-            // Arrow Placing
-            setArrowTop(aTop);
-            setArrowX(aX);
-        }
-    }, [showDropdawn, dropdawnChildren]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.dropdawnCard, { [styles.blur]: blur }, className);
-    return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, { ref: toggleElementRef, onRightClick: () => trigger === "onRightClick" && setShowDropdawn(true), children: children &&
-                    cloneElement(children, {
-                        onClick: (e) => {
-                            var _a, _b;
-                            (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                            trigger === "onClick" && toggleShowDropdawn();
-                        },
-                    }) }), _jsx("span", { className: classNames(styles.arrow, {
-                    [styles.dropdawnOnTop]: dropdawnOnTop,
-                }, { [styles.blur]: blur }), style: {
-                    top: arrowTop,
-                    left: arrowX,
-                    visibility: showDropdawn ? "visible" : "hidden",
-                } }), _jsx(WithInteractions, { onOutsideClick: () => setShowDropdawn(false), children: _jsx("div", Object.assign({ ref: dropdawnRef }, restProps, { className: joinedClassNames, style: Object.assign({ top: top, left: dropdawnX, visibility: showDropdawn ? "visible" : "hidden" }, style), children: dropdawnChildren })) })] }));
-}

package/dist/WithDropdawn/WithDropdawn.module.css

@@ -1,47 +0,0 @@
-.dropdawnCard {
-    position: fixed;
-    min-width: 6rem;
-    min-height: 10rem;
-    max-width: calc(100% - 4rem);
-    max-height: min(50vh, 50rem);
-    padding: 2rem;
-    border-radius: 2rem;
-    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: rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    color: rgb(var(--onSurfaceColor, 28 27 31));
-    fill: rgb(var(--onSurfaceColor, 28 27 31));
-    z-index: 2;
-    transform: translate(-50%, 0);
-}
-.dropdawnCard.blur {
-    background-color: color-mix(
-        in srgb,
-        rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
-        transparent
-    );
-    backdrop-filter: blur(0.5rem);
-}
-
-/* Arrow */
-.arrow {
-    position: fixed;
-    width: 0;
-    height: 0;
-    border-left: 0.6rem solid transparent;
-    border-right: 0.6rem solid transparent;
-    border-bottom: 0.8rem solid
-        rgb(var(--surfaceContainerHighestColor, 230 224 233));
-    transform: translate(-50%, -100%);
-}
-.arrow.blur {
-    border-bottom: 0.8rem solid
-        color-mix(
-            in srgb,
-            rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
-            transparent
-        );
-}
-.arrow.dropdawnOnTop {
-    transform: translate(-50%, 0) rotate(180deg);
-}

package/dist/boxing.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "space" | "center" | "end";
-    blur?: boolean;
-    fullWidth?: boolean;
-    children?: React.ReactNode;
-}

package/dist/boxing.js

@@ -1 +0,0 @@
-export {};