@yakad/ui 1.3.40 → 1.3.41

package/dist/appBar/appBar.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 export interface AppBarProps extends React.HTMLAttributes<HTMLDivElement> {
     sticky?: boolean;
+    autohide?: boolean;
     blur?: boolean;
     children?: React.ReactNode;
 }

package/dist/appBar/appBar.js

@@ -9,12 +9,36 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import classNames from "classnames";
 import styles from "./appBar.module.css";
 export const AppBar = forwardRef((_a, ref) => {
-    var { sticky, blur, className, children } = _a, restProps = __rest(_a, ["sticky", "blur", "className", "children"]);
-    const joinedClassNames = classNames(styles.header, { [styles.sticky]: sticky }, { [styles.blur]: blur }, className);
+    var { sticky, autohide, blur, className, children } = _a, restProps = __rest(_a, ["sticky", "autohide", "blur", "className", "children"]);
+    const [show, setShow] = useState(true);
+    const [lastScrollY, setLastScrollY] = useState(0);
+    useEffect(() => {
+        if (!autohide)
+            return;
+        const handleScroll = () => {
+            const currentScrollY = window.scrollY;
+            if (currentScrollY > lastScrollY && currentScrollY > 50) {
+                // Scroll down
+                setShow(false);
+            }
+            else {
+                // Scroll up
+                setShow(true);
+            }
+            setLastScrollY(currentScrollY);
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, [lastScrollY, autohide]);
+    const joinedClassNames = classNames(styles.header, {
+        [styles.sticky]: sticky,
+        [styles.blur]: blur,
+        [styles.hidden]: autohide && !show,
+    }, className);
     return (React.createElement("header", Object.assign({ ref: ref }, restProps, { className: joinedClassNames }), children));
 });
 //# sourceMappingURL=appBar.js.map

package/dist/appBar/appBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"appBar.js","sourceRoot":"","sources":["../../src/appBar/appBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAQzC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC5B,CAAC,EAAmD,EAAE,GAAG,EAAE,EAAE;QAA5D,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,OAAgB,EAAX,SAAS,cAAjD,2CAAmD,CAAF;IAC9C,MAAM,gBAAgB,GAAG,UAAU,CAC/B,MAAM,CAAC,MAAM,EACb,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,EAC3B,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,EACvB,SAAS,CACZ,CAAC;IAEF,OAAO,CACH,8CAAQ,GAAG,EAAE,GAAG,IAAM,SAAS,IAAE,SAAS,EAAE,gBAAgB,KACvD,QAAQ,CACJ,CACZ,CAAC;AACN,CAAC,CACJ,CAAC"}
+{"version":3,"file":"appBar.js","sourceRoot":"","sources":["../../src/appBar/appBar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AASzC,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC5B,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,OAAgB,EAAX,SAAS,cAA3D,uDAA6D,CAAF;IACxD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,MAAM,YAAY,GAAG,GAAG,EAAE;YACtB,MAAM,cAAc,GAAG,MAAM,CAAC,OAAO,CAAC;YAEtC,IAAI,cAAc,GAAG,WAAW,IAAI,cAAc,GAAG,EAAE,EAAE,CAAC;gBACtD,cAAc;gBACd,OAAO,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;iBAAM,CAAC;gBACJ,YAAY;gBACZ,OAAO,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;YAED,cAAc,CAAC,cAAc,CAAC,CAAC;QACnC,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,MAAM,gBAAgB,GAAG,UAAU,CAC/B,MAAM,CAAC,MAAM,EACb;QACI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM;QACvB,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI;QACnB,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ,IAAI,CAAC,IAAI;KACrC,EACD,SAAS,CACZ,CAAC;IAEF,OAAO,CACH,8CAAQ,GAAG,EAAE,GAAG,IAAM,SAAS,IAAE,SAAS,EAAE,gBAAgB,KACvD,QAAQ,CACJ,CACZ,CAAC;AACN,CAAC,CACJ,CAAC"}

package/dist/appBar/appBar.module.css

@@ -8,13 +8,16 @@
     padding: 0 2rem;
     border-bottom: 0.1rem solid #7d7d7d40;
     gap: 1rem;
-    z-index: 2;
     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;
+    z-index: 2;
     user-select: none;
 }
-.sticky {
+
+.header.sticky {
     position: sticky;
     top: 0;
 }
@@ -22,8 +25,12 @@
 .header.blur {
     background-color: color-mix(
         in srgb,
-        rgb(var(--surfaceContainerColor, 243 237 247)) 90%,
+        rgb(var(--surfaceContainerColor, 243 237 247)) 85%,
         transparent
     );
-    backdrop-filter: blur(0.3rem);
+    backdrop-filter: blur(0.5rem);
+}
+
+.header.hidden {
+    transform: translateY(-100%);
 }

package/dist/card/card.module.css

@@ -33,8 +33,8 @@
 .card.blur {
     background-color: color-mix(
         in srgb,
-        rgb(var(--surfaceContainerHighestColor, 230 224 233)) 90%,
+        rgb(var(--surfaceContainerHighestColor, 230 224 233)) 85%,
         transparent
     );
-    backdrop-filter: blur(0.3rem);
+    backdrop-filter: blur(0.5rem);
 }

package/dist/footer/footer.module.css

@@ -32,8 +32,8 @@
 .footer.blur {
     background-color: color-mix(
         in srgb,
-        rgb(var(--surfaceContainerColor, 243 237 247)) 90%,
+        rgb(var(--surfaceContainerColor, 243 237 247)) 85%,
         transparent
     );
-    backdrop-filter: blur(0.3rem);
+    backdrop-filter: blur(0.5rem);
 }

package/package.json

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