@yakad/ui 1.3.148 → 1.3.150

package/dist/Card/Card.d.ts

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

package/dist/Card/Card.js

@@ -12,16 +12,16 @@ 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 { Stack } from "..";
 import styles from "./Card.module.css";
 import "./card.css";
 export const Card = forwardRef(function Card(_a, ref) {
-    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" }, {
+    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",
-    }, className);
-    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
+    }, { [styles.hoverEffect]: hoverEffect }, className);
+    return (_jsx(Stack, Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Card/Card.module.css

@@ -1,6 +1,7 @@
 .card {
     padding: 2rem;
     border-radius: 2rem;
+    transition: box-shadow 0.3s ease, background-color 0.3s ease;
 }
 
 .card.elevated {
@@ -11,6 +12,12 @@
     fill: rgb(var(--onSurfaceColor, 28 27 31));
 }
 
+.card.hoverEffect:hover {
+    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));
+}
+
 .card.blur {
     background-color: color-mix(
         in srgb,

package/dist/Card/card.css

@@ -1,12 +1,12 @@
 .yakadCardAutoLevel,
 .yakadCardLowLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerColor);
+    --yakadCardBackgroundColor: var(--surfaceContainerLowColor);
 }
 
 .yakadCardAutoLevel .yakadCardAutoLevel,
 .yakadCardLowLevel .yakadCardAutoLevel,
 .yakadCardMidLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerHighColor);
+    --yakadCardBackgroundColor: var(--surfaceContainerColor);
 }
 
 .yakadCardAutoLevel .yakadCardAutoLevel .yakadCardAutoLevel,
@@ -14,5 +14,5 @@
 .yakadCardMidLevel .yakadCardAutoLevel,
 .yakadCardHighLevel,
 .yakadCardHighLevel .yakadCardAutoLevel {
-    --yakadCardBackgroundColor: var(--surfaceContainerHighestColor);
+    --yakadCardBackgroundColor: var(--surfaceContainerHighColor);
 }

package/dist/Dropdown/Dropdown.js

@@ -16,7 +16,8 @@ import classNames from "classnames";
 import { Card, WithInteractions } from "..";
 import styles from "./Dropdown.module.css";
 export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
-    var { level = "high", triggerref, onClose, className, style, children } = _a, restProps = __rest(_a, ["level", "triggerref", "onClose", "className", "style", "children"]);
+    var { fullWidthOnParentDemand = false, // Def in Card is True
+    blur, level = "high", triggerref, onClose, className, style, children } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "blur", "level", "triggerref", "onClose", "className", "style", "children"]);
     const fallbackTriggerRef = useRef(null);
     const dropdownRef = useRef(null);
     const placementTargetRef = triggerref || fallbackTriggerRef;
@@ -71,7 +72,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, 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, 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,

package/package.json

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