@yakad/ui 1.3.109 → 1.3.111

package/dist/AppBar/AppBar.d.ts

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

package/dist/Card/Card.d.ts

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

package/dist/Container/Container.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     size?: "xs" | "sm" | "md" | "lg" | "xl";
     children?: React.ReactNode;
 }

package/dist/Footer/Footer.d.ts

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

package/dist/Form/Form.d.ts

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

package/dist/GridItem/GridItem.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 type GridColumn = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     xs?: GridColumn;
     sm?: GridColumn;
     md?: GridColumn;

package/dist/ListItem/ListItem.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
 }
 export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/Main/Main.d.ts

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

package/dist/Navigation/Navigation.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface NavigationProps extends React.HTMLAttributes<HTMLElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     anchor?: "left" | "right" | "top" | "bottom" | "auto";
     open: boolean;
     children?: React.ReactNode;

package/dist/Row/Row.d.ts

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

package/dist/Screen/Screen.d.ts

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

package/dist/Stack/Stack.d.ts

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

package/dist/Theme/Theme.d.ts

@@ -3,7 +3,7 @@ import "./globals.css";
 export type DarkStyle = "light" | "dark" | "system";
 export type ThemeColor = "green" | "red" | "yellow" | "blue" | "purple";
 export interface ThemeProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     darkstyle?: DarkStyle;
     color?: ThemeColor;
     zoom?: number;

package/dist/WithDropdawn/WithDropdawn.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface WithDropdawnProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "center" | "end";
+    align?: "start" | "space" | "center" | "end";
     blur?: boolean;
     trigger?: "onClick" | "onRightClick";
     dropdawnChildren?: React.ReactElement;

package/dist/WithDropdawn/WithDropdawn.js

@@ -23,35 +23,43 @@ export const WithDropdawn = (_a) => {
     const [showDropdawn, setShowDropdawn] = useState(false);
     const [dropdawnOnTop, setDropdawnOnTop] = useState(false);
     const [top, setTop] = useState(0);
-    const [left, setLeft] = 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 top = buttonRect.bottom + padding;
-            let left = buttonRect.left + buttonRect.width / 2 - dropdawnRect.width / 2;
+            let dTop = buttonRect.bottom + padding;
+            let dX = buttonRect.x + buttonRect.width / 2;
+            let aTop = top;
+            let aX = dX;
             // Prevent overflow bottom
-            if (top + dropdawnRect.height > window.innerHeight) {
-                top = buttonRect.top - dropdawnRect.height - padding;
+            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 (left + dropdawnRect.width > window.innerWidth - padding) {
-                left = window.innerWidth - dropdawnRect.width - padding;
+            if (dX + dropdawnRect.width / 2 > window.innerWidth - padding) {
+                dX = window.innerWidth - dropdawnRect.width / 2 - padding;
             }
             // Prevent overflow left
-            if (left < padding) {
-                left = padding;
+            if (dX - dropdawnRect.width / 2 < padding) {
+                dX = dropdawnRect.width / 2 + padding;
             }
-            setTop(top);
-            setLeft(left);
+            setTop(dTop);
+            setDropdawnX(dX);
+            // Arrow Placing
+            setArrowTop(aTop);
+            setArrowX(aX);
         }
     }, [showDropdawn, dropdawnChildren]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.dropdawnCard, { [styles.dropdawnOnTop]: dropdawnOnTop }, { [styles.blur]: blur }, className);
+    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) => {
@@ -59,6 +67,12 @@ export const WithDropdawn = (_a) => {
                             (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                             trigger === "onClick" && toggleShowDropdawn();
                         },
-                    }) }), _jsx(WithInteractions, { onOutsideClick: () => setShowDropdawn(false), children: _jsx("div", Object.assign({ ref: dropdawnRef }, restProps, { className: joinedClassNames, style: Object.assign({ top: top, left: left, visibility: showDropdawn ? "visible" : "hidden" }, style), children: dropdawnChildren })) })] }));
+                    }) }), _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 })) })] }));
 };
 WithDropdawn.displayName = "WithDropdawn";

package/dist/WithDropdawn/WithDropdawn.module.css

@@ -10,8 +10,8 @@
     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,
@@ -21,28 +21,25 @@
     backdrop-filter: blur(0.5rem);
 }
 
-.dropdawnCard::before {
-    content: "";
-    position: absolute;
-    top: -6px;
-    left: calc(50% - 6px);
+/* Arrow */
+.arrow {
+    position: fixed;
     width: 0;
     height: 0;
-    border-left: 6px solid transparent;
-    border-right: 6px solid transparent;
-    border-bottom: 6px solid
+    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%);
 }
-.dropdawnCard.blur::before {
-    border-bottom: 6px solid
+.arrow.blur {
+    border-bottom: 0.8rem solid
         color-mix(
             in srgb,
             rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
             transparent
         );
 }
-.dropdawnCard.dropdawnOnTop::before {
-    top: initial;
-    bottom: -6px;
-    transform: scale(1, -1);
+.arrow.dropdawnOnTop {
+    transform: translate(-50%, 0) rotate(180deg);
 }

package/dist/boxing.module.css

@@ -10,6 +10,10 @@
     align-items: flex-start;
 }
 .flexColumnBox.center {
+    justify-content: center;
+    align-items: center;
+}
+.flexColumnBox.space {
     justify-content: space-evenly;
     align-items: center;
 }
@@ -37,6 +41,9 @@
 .flexRowBox.center {
     justify-content: center;
 }
+.flexRowBox.space {
+    justify-content: space-evenly;
+}
 .flexRowBox.end {
     justify-content: flex-end;
 }

package/package.json

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