@scripso-homepad/ui 0.4.28 → 0.4.29

package/dist/web/index.d.cts

@@ -63,6 +63,8 @@ type AppHeaderProps = {
     notificationsIcon?: ReactNode;
     searchIcon?: ReactNode;
     buildingChevronIcon?: ReactNode;
+    /** Rendered before the building select (e.g. month period control). */
+    actions?: ReactNode;
     buildingSelectDisabled?: boolean;
     searchDisabled?: boolean;
     notificationsDisabled?: boolean;
@@ -70,7 +72,7 @@ type AppHeaderProps = {
     onNotificationsClick?: () => void;
     onSearchChange?: (value: string) => void;
 };
-declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
+declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, actions, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
 
 type BuildingSelectProps = {
     options: AdminBuildingOption[];

package/dist/web/index.d.ts

@@ -63,6 +63,8 @@ type AppHeaderProps = {
     notificationsIcon?: ReactNode;
     searchIcon?: ReactNode;
     buildingChevronIcon?: ReactNode;
+    /** Rendered before the building select (e.g. month period control). */
+    actions?: ReactNode;
     buildingSelectDisabled?: boolean;
     searchDisabled?: boolean;
     notificationsDisabled?: boolean;
@@ -70,7 +72,7 @@ type AppHeaderProps = {
     onNotificationsClick?: () => void;
     onSearchChange?: (value: string) => void;
 };
-declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
+declare function AppHeader({ title, labels, hasBuildingSelect, showSearch, buildingOptions, selectedBuildingId, className, buildingSelectClassName, searchClassName, notificationsButtonClassName, searchValue, searchFieldStyle, buildingIcon, notificationsIcon, searchIcon, buildingChevronIcon, actions, buildingSelectDisabled, searchDisabled, notificationsDisabled, onBuildingChange, onNotificationsClick, onSearchChange, }: AppHeaderProps): react.JSX.Element;
 
 type BuildingSelectProps = {
     options: AdminBuildingOption[];

package/dist/web/index.js

@@ -28821,6 +28821,7 @@ function AppHeader({
   notificationsIcon,
   searchIcon,
   buildingChevronIcon,
+  actions,
   buildingSelectDisabled = false,
   searchDisabled = false,
   notificationsDisabled = false,
@@ -28838,6 +28839,7 @@ function AppHeader({
       children: [
         /* @__PURE__ */ jsx("h1", { className: "truncate typography-title text-slate-blue", children: title }),
         /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+          actions,
           hasBuildingSelect ? /* @__PURE__ */ jsx(
             BuildingSelect,
             {
@@ -30505,23 +30507,36 @@ function Drawer({
 }) {
   const [isPresent, setIsPresent] = useState(open);
   const [isAnimatedIn, setIsAnimatedIn] = useState(false);
+  const [isTransformSettled, setIsTransformSettled] = useState(open);
   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]);
@@ -30570,8 +30585,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
             ),
@@ -30928,7 +30945,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) => {