@scripso-homepad/ui 0.4.27 → 0.4.29

package/dist/web/index.cjs

@@ -29434,6 +29434,7 @@ function AppHeader({
   notificationsIcon,
   searchIcon,
   buildingChevronIcon,
+  actions,
   buildingSelectDisabled = false,
   searchDisabled = false,
   notificationsDisabled = false,
@@ -29451,6 +29452,7 @@ function AppHeader({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "truncate typography-title text-slate-blue", children: title }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+          actions,
           hasBuildingSelect ? /* @__PURE__ */ jsxRuntime.jsx(
             BuildingSelect,
             {
@@ -31129,6 +31131,8 @@ function Modal({
   subtitle,
   icon,
   iconContainerClassName,
+  titleClassName,
+  subtitleClassName,
   children,
   cancelText,
   confirmText,
@@ -31165,9 +31169,8 @@ function Modal({
     return null;
   }
   const sharedButtonClassName = cn(
-    "btn h-13 w-full justify-center!",
-    footerLayout === "split" && "min-w-0",
-    footerLayout !== "split" && buttonClassName
+    "btn h-13 w-full! min-w-0! justify-center!",
+    buttonClassName
   );
   const modal = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -31210,7 +31213,7 @@ function Modal({
                   "h2",
                   {
                     id: "homepad-modal-title",
-                    className: "typography-title-sm tracking-normal text-black",
+                    className: cn("typography-title-sm tracking-normal text-black", titleClassName),
                     children: title
                   }
                 ),
@@ -31218,7 +31221,10 @@ function Modal({
                   "p",
                   {
                     id: "homepad-modal-subtitle",
-                    className: "typography-caption tracking-normal text-storm-gray-400",
+                    className: cn(
+                      "typography-caption tracking-normal text-storm-gray-400",
+                      subtitleClassName
+                    ),
                     children: subtitle
                   }
                 ) : null
@@ -31308,23 +31314,36 @@ function Drawer({
 }) {
   const [isPresent, setIsPresent] = react.useState(open);
   const [isAnimatedIn, setIsAnimatedIn] = react.useState(false);
+  const [isTransformSettled, setIsTransformSettled] = react.useState(open);
   react.useEffect(() => {
     if (open) {
       setIsPresent(true);
-      const frame = window.requestAnimationFrame(() => {
+      setIsTransformSettled(false);
+      const frame2 = window.requestAnimationFrame(() => {
         window.requestAnimationFrame(() => {
           setIsAnimatedIn(true);
         });
       });
+      const settleTimeout = window.setTimeout(() => {
+        setIsTransformSettled(true);
+      }, DRAWER_TRANSITION_MS);
       return () => {
-        window.cancelAnimationFrame(frame);
+        window.cancelAnimationFrame(frame2);
+        window.clearTimeout(settleTimeout);
       };
     }
-    setIsAnimatedIn(false);
+    setIsTransformSettled(false);
+    setIsAnimatedIn(true);
+    const frame = window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        setIsAnimatedIn(false);
+      });
+    });
     const timeout = window.setTimeout(() => {
       setIsPresent(false);
     }, DRAWER_TRANSITION_MS);
     return () => {
+      window.cancelAnimationFrame(frame);
       window.clearTimeout(timeout);
     };
   }, [open]);
@@ -31373,8 +31392,10 @@ function Drawer({
             "aria-labelledby": "homepad-drawer-title",
             ...subtitle ? { "aria-describedby": "homepad-drawer-subtitle" } : {},
             className: cn(
-              "relative z-10 flex h-[calc(100dvh-16px)] min-h-0 flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out will-change-transform max-md:h-dvh max-md:rounded-none",
-              isAnimatedIn ? "translate-x-0" : "translate-x-full",
+              "relative z-10 flex h-[calc(100dvh-16px)] min-h-0 flex-col overflow-hidden rounded-[16px] bg-white shadow-2xl transition-transform duration-300 ease-in-out max-md:h-dvh max-md:rounded-none",
+              // Keep GPU transform only while animating — settled translate-x-0 blurs text.
+              !isTransformSettled && "will-change-transform",
+              isAnimatedIn ? isTransformSettled ? "transform-none" : "translate-x-0" : "translate-x-full",
               widthClassName,
               className
             ),
@@ -31713,7 +31734,10 @@ function ConfirmModal({
   if (!open) {
     return null;
   }
-  const sharedButtonClassName = cn("btn h-10 min-w-0 flex-1 justify-center!", buttonClassName);
+  const sharedButtonClassName = cn(
+    "btn h-10! w-full! min-w-0! justify-center!",
+    buttonClassName
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -31728,7 +31752,7 @@ function ConfirmModal({
           "aria-labelledby": "homepad-confirm-modal-title",
           "aria-describedby": "homepad-confirm-modal-description",
           className: cn(
-            "flex w-full max-w-md flex-col gap-8 rounded-2xl bg-white p-4 opacity-100 md:p-6",
+            "flex w-full max-w-md flex-col gap-8 rounded-3xl bg-white p-6 opacity-100 md:p-8",
             containerClassName
           ),
           onClick: (event) => {
@@ -31754,7 +31778,7 @@ function ConfirmModal({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "flex w-full gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "grid w-full grid-cols-2 gap-4", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Button,
                 {